/* お店の内装。壁の色と字の形は、参考HTML（出力書式仕様 v1.3）にそろえる */

/* 塗料と字の棚：ここで決めた色と字を、お店じゅうで使う */
:root {
  --ink: #1C2430; --sub: #5E6978; --faint: #8A94A2; --line: #D9DEE3; --fill: #F3F5F7;
  --accent: #2E6B6F; --accent-soft: #E6F0F0; --red: #C62F2A; --red-soft: #FBECEB;
  --gothic: "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  --mincho: "Noto Serif JP", "Noto Serif CJK JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: var(--ink); font-family: var(--gothic); line-height: 1.75; }

/* お店の扉（入口の画面） */
.entry { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--fill); }
.entry-box { width: 100%; max-width: 420px; background: #fff; border-top: 4px solid var(--accent); padding: 40px 32px 24px; }
.kind { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.entry h1 { font-size: 30px; letter-spacing: .06em; margin: 4px 0 8px; }
.lead { color: var(--sub); font-size: 14px; margin: 0 0 28px; }
.entry label { display: block; font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.entry input { width: 100%; font: inherit; font-size: 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; letter-spacing: .04em; }
.entry input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.msg { color: var(--red); font-size: 13px; min-height: 1.5em; margin: 8px 0 0; }
.entry footer { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line); text-align: right; color: var(--accent); font-weight: 700; letter-spacing: .2em; }

/* ボタン（押せないときは灰色） */
button { font: inherit; font-weight: 700; color: #fff; background: var(--accent); border: 0; border-radius: 3px; padding: 10px 28px; cursor: pointer; }
.entry button { width: 100%; margin-top: 16px; font-size: 16px; }
button:disabled { background: var(--faint); cursor: default; }

/* 窓口（対話の画面）：上に看板、まんなかにカウンター、下に話す台 */
.chat { display: flex; flex-direction: column; height: 100vh; }
.bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 2px solid var(--ink); }
.bar-title { font-weight: 700; letter-spacing: .06em; }
.bar-note { font-size: 12px; color: var(--faint); }
.log { flex: 1; overflow-y: auto; padding: 24px 16px; max-width: 760px; width: 100%; margin: 0 auto; }

/* 「前回の続きからです」の小さな札 */
.resume-note { margin: 0 0 20px; text-align: center; font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.resume-note::before, .resume-note::after { content: "—"; margin: 0 .6em; color: var(--line); }

/* ふきだし：左に話し手の名札、右に言葉 */
.turn { display: grid; grid-template-columns: 48px 1fr; gap: 8px; margin: 0 0 20px; }
.who { font-size: 12px; color: var(--faint); padding-top: 4px; }
.turn.shacho .who { color: var(--ink); font-weight: 700; }
/* 社長の言葉は明朝、AIの言葉はゴシック（対話ログと同じ） */
.turn.shacho .say { font-family: var(--mincho); font-size: 17px; line-height: 1.9; white-space: pre-wrap; }
.turn.ai .say { font-size: 15px; color: var(--sub); background: var(--fill); border-radius: 3px; padding: 10px 14px; }
/* AIの言葉の段落・点の付いた行・太字 */
.turn.ai .say p { margin: 0 0 .7em; }
.turn.ai .say p:last-child, .turn.ai .say ul:last-child { margin-bottom: 0; }
.turn.ai .say ul { margin: 0 0 .7em; padding-left: 1.3em; }
.turn.ai .say li { margin: .15em 0; }
.turn.ai .say li::marker { color: var(--accent); }
.turn.ai .say strong { color: var(--ink); font-weight: 700; }
/* 話している途中は、うしろで「▍」が点滅する */
.turn.ai .say.typing::after { content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; }
/* お知らせ（うまくいかなかったとき）は、赤いふきだし */
.turn.notice .say { background: var(--red-soft); color: var(--red); border-left: 3px solid var(--red); }
@keyframes blink { 50% { opacity: 0; } }

/* 話す台（入力欄）。社長が打つ字も明朝 */
.composer { border-top: 1px solid var(--line); padding: 12px 16px 16px; max-width: 760px; width: 100%; margin: 0 auto; }
.composer textarea { width: 100%; font-family: var(--mincho); font-size: 17px; line-height: 1.8; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; resize: vertical; }
.composer textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.composer-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.hint { font-size: 12px; color: var(--faint); }

/* 待合室（対話のあと、清書のあいだ） */
.waiting { max-width: 760px; width: 100%; margin: 0 auto; padding: 20px 16px 28px; border-top: 2px solid var(--accent); text-align: center; }
.waiting .w-title { margin: 0; font-weight: 700; color: var(--accent); font-size: 17px; }
.waiting .w-sub { margin: 6px 0 14px; color: var(--sub); font-size: 13px; }
.waiting .w-bar { height: 6px; background: var(--fill); border-radius: 3px; overflow: hidden; max-width: 420px; margin: 0 auto; }
.waiting .w-fill { height: 100%; width: 3%; background: var(--accent); transition: width .8s ease; }
.waiting .w-step { margin: 8px 0 0; color: var(--faint); font-size: 12px; min-height: 1.5em; }
/* 確かめの窓口（待合室の中に出る）。社長の言葉は明朝、確かめる言葉に色 */
.kakunin { max-width: 560px; margin: 22px auto 0; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 4px; text-align: left; }
.kakunin .k-count { margin: 0; font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: .1em; }
.kakunin .k-hint { margin: 4px 0 12px; font-size: 13px; color: var(--sub); }
/* 前の文脈：AIの問いは小さく、前の社長の言葉はうすく。言葉の一文の上に、つなげて見せる */
.kakunin .k-ctx { margin: 0; }
.kakunin .k-question { margin: 0 0 6px; font-size: 12px; color: var(--faint); line-height: 1.6; }
.kakunin .k-before { margin: 0; padding: 10px 14px 0; background: var(--fill); border-left: 3px solid var(--line); font-family: var(--mincho); font-size: 15px; line-height: 1.9; color: var(--faint); }
.kakunin .k-sentence { margin: 0 0 14px; padding: 12px 14px; background: var(--fill); border-left: 3px solid var(--accent); font-family: var(--mincho); font-size: 17px; line-height: 1.9; }
.kakunin mark { background: #FFF1B8; color: var(--ink); padding: 0 2px; border-radius: 2px; }
.kakunin .k-q { margin: 0 0 12px; font-weight: 700; }
.kakunin .k-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.kakunin .k-buttons button { flex: 1; min-width: 120px; font-size: 16px; padding: 12px; }
.kakunin .k-fix label { display: block; font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.kakunin .k-fix input { width: 100%; font-family: var(--mincho); font-size: 17px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; margin-bottom: 10px; }
.kakunin .k-fix input:focus { outline: 2px solid var(--accent); border-color: transparent; }
/* メールアドレスの確かめ */
.kakunin .k-label { display: block; font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.kakunin .k-email { width: 100%; font: inherit; font-size: 18px; letter-spacing: .02em; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; margin-bottom: 12px; }
.kakunin .k-email:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* 直したあとの一文（決める前の確かめ） */
.kakunin .k-pv-label { margin: 4px 0 6px; font-size: 13px; font-weight: 700; color: var(--accent); }
.kakunin .k-preview .k-sentence { border-left-color: #C99A3E; }
.kakunin .k-msg { margin: 8px 0 0; color: var(--red); font-size: 13px; min-height: 1em; }
button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
button.secondary:disabled { color: var(--faint); border-color: var(--line); background: #fff; }

.waiting.stopped { border-top-color: var(--red); }
.waiting.stopped .w-title { color: var(--red); }
.waiting.stopped .w-bar { display: none; }