@charset "UTF-8";
/* ==========================================================================
   ディグラム・インタビュー（フロント）
   ========================================================================== */
.dgi {
	--i-ink: #263F36;
	--i-green: #315D4B;
	--i-green-dark: #203F32;
	--i-muted: #606961;
	--i-paper: #F8F7F2;
	--i-sage: #EAF0E7;
	--i-line: #D6DDD3;
	--i-accent: #A9553D;
	--i-radius: 14px;
	max-width: 760px;
	margin: 0 auto;
	padding: 8px 0 40px;
	color: var(--i-ink);
	font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 15px;
	line-height: 1.85;
}
.dgi *, .dgi *::before, .dgi *::after { box-sizing: border-box; }
.dgi [hidden] { display: none !important; }

.dgi-h1 { font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: .04em; margin: 0 0 14px; }
.dgi-lead { color: var(--i-muted); font-size: 14.5px; margin: 0 0 22px; }
.dgi-help { color: var(--i-muted); font-size: 12.5px; line-height: 1.8; margin: 8px 0 0; }
.dgi-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.dgi-error { color: #B03A2E; font-size: 13.5px; margin: 12px 0 0; }

.dgi-input {
	width: 100%; padding: 14px 16px; font: inherit; color: inherit;
	background: #fff; border: 1px solid var(--i-line); border-radius: var(--i-radius);
}
.dgi-input:focus { outline: 2px solid var(--i-green); outline-offset: 1px; border-color: var(--i-green); }
.dgi-input--key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }

.dgi-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 26px; font: inherit; font-weight: 700; letter-spacing: .04em;
	border-radius: 999px; border: 1px solid transparent; cursor: pointer;
	text-decoration: none; transition: background .15s ease, color .15s ease;
}
.dgi-btn--primary { background: var(--i-green); color: #fff; }
.dgi-btn--primary:hover:not(:disabled) { background: var(--i-green-dark); }
.dgi-btn--ghost { background: #fff; color: var(--i-ink); border-color: var(--i-line); }
.dgi-btn--ghost:hover:not(:disabled) { border-color: var(--i-green); color: var(--i-green); }
.dgi-btn--sm { padding: 9px 16px; font-size: 13px; }
.dgi-btn:disabled { opacity: .5; cursor: default; }

/* ---------- 入口 ---------- */
.dgi-gate { background: var(--i-sage); border-radius: var(--i-radius); padding: clamp(22px, 4vw, 36px); }
.dgi-keyform { max-width: 420px; }
.dgi-keyform .dgi-btn { margin-top: 18px; width: 100%; }

/* ---------- チャット ---------- */
.dgi-chat { display: flex; flex-direction: column; border: 1px solid var(--i-line); border-radius: var(--i-radius); background: #fff; overflow: hidden; }
.dgi-chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--i-line); background: var(--i-paper); }
.dgi-chat__head > div { min-width: 0; }
.dgi-chat__title { margin: 0; font-weight: 700; font-size: 15px; }
.dgi-chat__sub { margin: 2px 0 0; font-size: 12px; color: var(--i-muted); }
.dgi-chat__head .dgi-btn { margin-left: auto; flex: none; }

.dgi-log { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; height: min(58vh, 520px); overflow-y: auto; overscroll-behavior: contain; background: var(--i-paper); }
.dgi-msg { display: flex; }
.dgi-msg--user { justify-content: flex-end; }
.dgi-msg__wrap { max-width: 84%; }
.dgi-msg--user .dgi-msg__wrap { margin-left: auto; }
.dgi-msg__body { padding: 12px 16px; border-radius: 16px; white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.85; }
.dgi-msg--ai .dgi-msg__body { background: #fff; border: 1px solid var(--i-line); border-bottom-left-radius: 4px; }
.dgi-msg--user .dgi-msg__body { background: var(--i-green); color: #fff; border-bottom-right-radius: 4px; }

/* 読み上げの状態と「読み上げ不要」（入力欄のすぐ上） */
.dgi-voicebar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 0; background: #fff; border-top: 1px solid var(--i-line); }
.dgi-voicebar + .dgi-compose { border-top: 0; }
.dgi-voicebar__note { flex: 1; min-width: 0; font-size: 12.5px; color: var(--i-green); }
.dgi-voicetog { flex: none; padding: 6px 14px; font: inherit; font-size: 12.5px; color: var(--i-muted); background: #fff; border: 1px solid var(--i-line); border-radius: 999px; cursor: pointer; }
.dgi-voicetog:hover { color: var(--i-ink); border-color: var(--i-green); }
.dgi-voicetog.is-off { color: var(--i-green); border-color: var(--i-green); font-weight: 700; }

.dgi-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--i-muted); opacity: .35; animation: dgi-blink 1.2s infinite; }
.dgi-dot:nth-child(2) { animation-delay: .2s; }
.dgi-dot:nth-child(3) { animation-delay: .4s; margin-right: 0; }
@keyframes dgi-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .9; } }

.dgi-compose { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--i-line); background: #fff; }
.dgi-input--msg { flex: 1; resize: none; max-height: 160px; padding: 12px 14px; border-radius: 12px; line-height: 1.7; }
.dgi-send { flex: none; padding: 12px 18px; font: inherit; font-weight: 700; color: #fff; background: var(--i-green); border: 0; border-radius: 12px; cursor: pointer; }
.dgi-send:hover:not(:disabled) { background: var(--i-green-dark); }
.dgi-send:disabled { opacity: .5; cursor: default; }

.dgi-mic { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--i-line); background: #fff; cursor: pointer; display: grid; place-items: center; }
.dgi-mic:hover:not(:disabled) { border-color: var(--i-green); }
.dgi-mic:disabled { opacity: .5; cursor: default; }
.dgi-mic__icon { width: 12px; height: 18px; border-radius: 6px; background: var(--i-ink); position: relative; display: block; }
.dgi-mic__icon::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 20px; height: 9px; border: 2px solid var(--i-ink); border-top: 0; border-radius: 0 0 12px 12px; }
.dgi-mic.is-recording { background: var(--i-accent); border-color: var(--i-accent); animation: dgi-pulse 1.4s infinite; }
.dgi-mic.is-recording .dgi-mic__icon, .dgi-mic.is-recording .dgi-mic__icon::after { background: #fff; border-color: #fff; }
@keyframes dgi-pulse { 0% { box-shadow: 0 0 0 0 rgba(169, 85, 61, .45); } 70% { box-shadow: 0 0 0 12px rgba(169, 85, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(169, 85, 61, 0); } }

.dgi-status { min-height: 20px; margin: 10px 2px 0; font-size: 12.5px; color: var(--i-muted); }
.dgi-status.is-error { color: #B03A2E; }

/* 会話を終了する（入力欄の下。会話中は画面の下を見ているため） */
.dgi-chat__foot { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--i-line); text-align: center; }
.dgi-finish { min-width: 240px; padding: 13px 22px; font-size: 15px; }
.dgi-finish__note { margin: 8px 0 0; font-size: 12.5px; color: var(--i-muted); }

/* ---------- 完了 ---------- */
.dgi-done { background: var(--i-sage); border-radius: var(--i-radius); padding: clamp(24px, 5vw, 44px); text-align: center; }
.dgi-done .dgi-lead { margin-bottom: 8px; }

/* ---------- 確認ダイアログ ---------- */
.dgi-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(38, 63, 54, .45); display: grid; place-items: center; padding: 20px; }
.dgi-modal__box { background: #fff; border-radius: var(--i-radius); padding: 26px; max-width: 420px; width: 100%; }
.dgi-modal__title { margin: 0 0 10px; font-weight: 700; font-size: 16px; }
.dgi-modal__body { margin: 0 0 22px; font-size: 14px; color: var(--i-muted); line-height: 1.85; }
.dgi-modal__actions { display: flex; gap: 10px; }
.dgi-modal__actions .dgi-btn { flex: 1; padding: 12px 10px; font-size: 14px; }

@media (max-width: 600px) {
	.dgi-log { height: 56vh; }
	.dgi-msg__wrap { max-width: 92%; }
	.dgi-chat__head { flex-wrap: wrap; }
	.dgi-finish { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.dgi-dot, .dgi-mic.is-recording { animation: none; }
}

/* ==========================================================================
   試験モード（管理者のみ）
   ========================================================================== */
.dgi--test { max-width: 900px; }

.dgi-test {
	background: #FFF8EC;
	border: 1px solid #E6D4B4;
	border-radius: var(--i-radius);
	padding: 18px 20px;
	margin-bottom: 18px;
}
.dgi-test__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dgi-test__tag {
	background: #9A5B10; color: #fff; font-size: 11.5px; font-weight: 700;
	padding: 3px 10px; border-radius: 999px; letter-spacing: .04em;
}
.dgi-test__note { color: #7A5A22; font-size: 12.5px; line-height: 1.7; }

.dgi-test__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.dgi-test__form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--i-muted); }
.dgi-test__form .dgi-input { min-width: 140px; height: 42px; padding: 0 12px; font-size: 14px; box-sizing: border-box; }
.dgi-test__form input.dgi-input { min-width: 170px; }
.dgi-test__form .dgi-btn { height: 42px; padding: 0 20px; white-space: nowrap; }

.dgi-test__links { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 0; font-size: 13px; }
.dgi-test__links a { color: var(--i-green); text-decoration: underline; }
.dgi-test__links a:hover { color: var(--i-green-dark); }

.dgi-test__prompt { margin-top: 14px; font-size: 13px; }
.dgi-test__prompt summary { cursor: pointer; color: var(--i-green); }
.dgi-test__pre {
	background: #fff; border: 1px solid var(--i-line); border-radius: 8px;
	padding: 12px 14px; margin-top: 10px; max-height: 340px; overflow: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
}

.dgi-result { margin-top: 26px; text-align: left; border-top: 1px solid var(--i-line); padding-top: 22px; }
.dgi-result__h { font-size: 15px; margin: 0 0 12px; }
.dgi-result details { margin-top: 12px; font-size: 13px; }
.dgi-result details summary { cursor: pointer; color: var(--i-green); }

@media (max-width: 640px) {
	.dgi-test__form { flex-direction: column; align-items: stretch; }
	.dgi-test__form .dgi-input { width: 100%; }
}

/* 決済直後の案内 */
.dgi-paid { background: var(--i-sage); border-left: 4px solid var(--i-green); border-radius: 8px; padding: 14px 16px; margin: 0 0 18px; }
.dgi-paid__title { font-weight: 700; margin: 0 0 6px; font-size: 15px; }
.dgi-paid__body { margin: 0; font-size: 14px; line-height: 1.8; }
.dgi-done [data-dgi-next] { margin: 18px 0 0; }

/* リンクのボタン：テーマのリンク色・下線に負けないようにする */
.dgi a.dgi-btn, .dgi a.dgi-btn:hover, .dgi a.dgi-btn:visited { text-decoration: none !important; }
.dgi a.dgi-btn--primary, .dgi a.dgi-btn--primary:hover, .dgi a.dgi-btn--primary:visited, .dgi a.dgi-btn--primary:focus { color: #fff !important; }