/* app.css — 節税診断 S2（LP・質問・結果）。色・間隔・角丸・書体はすべて tokens.css の var() 経由 */

/* --- 2.1 基礎 --- */
body.app { margin: 0; min-height: 100vh; background: var(--color-paper-warm); }
.app { color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading); }
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app h1, .app h2, .app h3 { margin: 0; font-weight: 600; }
.app p { margin: 0; }
.app a { color: var(--color-brand-navy); text-decoration: underline; text-underline-offset: .15em; }
.app a.pcard, .app a.brand, .app a.btn { text-decoration: none; }
.app a.pcard { color: var(--color-ink); }
.app a.btn--primary { color: var(--color-paper); }
.app a.btn--secondary, .app a.btn--ghost { color: var(--color-brand-navy); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }
.display { font-family: var(--font-display); font-weight: 600; }
.icon { width: var(--space-5); height: var(--space-5); flex: none; }
.icon--lg { width: var(--space-8); height: var(--space-8); }
.icon--xl { width: var(--space-12); height: var(--space-12); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- 2.2 デモ帯（全画面上部に固定。実装では position: fixed＋本文に上余白） --- */
.top { position: sticky; top: 0; z-index: 20; }
.band { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-4); background: var(--color-warning-soft); color: var(--color-warning); border-bottom: 1px solid var(--color-line); font-size: var(--text-xs); line-height: 1.5; padding-inline: max(var(--space-4), calc((100% - var(--content-max)) / 2 + var(--space-4))); }
.band .icon { width: var(--space-4); height: var(--space-4); margin-top: 1px; }
.band b { font-weight: 700; }

/* --- 2.3 ヘッダー --- */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-paper); border-bottom: 1px solid var(--color-line); min-height: var(--space-12); padding-inline: max(var(--space-4), calc((100% - var(--content-max)) / 2 + var(--space-4))); }
.brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-md); color: var(--color-brand-navy-deep); letter-spacing: .04em; text-decoration: none; }
.brand .seal { width: var(--space-6); height: var(--space-6); }
.hdr__sub { font-size: var(--text-xs); color: var(--color-muted); }

/* --- 2.4 監修印（この題材の個性: 円形の「監修」印。アイコン代わりの絵文字は使わない） --- */
.seal { width: var(--space-10); height: var(--space-10); color: var(--color-brand-navy); flex: none; }
.seal text { font-family: var(--font-display); font-weight: 700; fill: currentColor; }
.seal--muted { color: var(--color-muted); }

/* --- 2.5 ページ枠 --- */
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-10); display: grid; gap: var(--space-5); }
.page--chat { padding-bottom: 0; gap: var(--space-3); }

/* --- 2.6 カード --- */
.card { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.card--tight { padding: var(--space-4); }
.card__title { font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.eyebrow { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: .08em; text-transform: uppercase; }

/* --- 2.7 ボタン（primary / secondary / ghost・hover / focus / disabled） --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; font: inherit; font-size: var(--text-base); font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.btn--primary { background: var(--color-brand-navy); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-brand-navy-deep); }
.btn--secondary { background: var(--color-paper); color: var(--color-brand-navy); border-color: var(--color-brand-navy); }
.btn--secondary:hover { background: var(--color-sky-soft); }
.btn--ghost { background: transparent; color: var(--color-brand-navy); padding: 0 var(--space-3); }
.btn--ghost:hover { background: var(--color-sky-soft); }
.btn--warn { background: var(--color-warning); color: var(--color-paper); }
.btn--warn:hover { filter: brightness(.92); }
.btn--block { width: 100%; }
.btn--icon { width: var(--tap-min); padding: 0; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.app :focus-visible { outline: 2px solid var(--color-brand-navy); outline-offset: 2px; }

/* --- 2.8 入力 --- */
.field { display: grid; gap: var(--space-1); }
.field__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); }
.field__label .req { color: var(--color-danger); margin-left: var(--space-1); font-weight: 400; font-size: var(--text-xs); }
.field__hint { font-size: var(--text-xs); color: var(--color-muted); }
.input { width: 100%; min-height: var(--tap-min); padding: 0 var(--space-3); font: inherit; font-size: var(--text-base); color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.input::placeholder { color: var(--color-muted); }
.input:hover { border-color: var(--color-muted); }
.input:focus { border-color: var(--color-brand-navy); outline: 2px solid var(--color-brand-navy); outline-offset: 0; }
.input[disabled] { background: var(--color-paper-warm); color: var(--color-muted); cursor: not-allowed; }
.field.is-error .input { border: 2px solid var(--color-danger); }
.field__err { display: flex; gap: var(--space-1); align-items: flex-start; color: var(--color-danger); font-size: var(--text-sm); }
.field__err .icon { width: var(--space-4); height: var(--space-4); margin-top: var(--space-1); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--tap-min); padding: var(--space-2) 0; cursor: pointer; font-size: var(--text-sm); color: var(--color-ink-soft); }
.check input { width: var(--space-5); height: var(--space-5); margin: var(--space-1) 0 0; accent-color: var(--color-brand-navy); flex: none; }
.check.is-error { color: var(--color-danger); }
.select { appearance: none; background-image: none; padding-right: var(--space-8); }
.select-wrap { position: relative; }
.select-wrap .icon { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-muted); width: var(--space-4); height: var(--space-4); }

/* --- 2.9 チップ・バッジ --- */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--space-6); padding: 0 var(--space-2); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--color-line); background: var(--color-paper); color: var(--color-ink-soft); white-space: nowrap; }
.chip--navy { background: var(--color-sky-soft); border-color: var(--color-sky-soft); color: var(--color-brand-navy-deep); }
.chip--success { background: var(--color-success-soft); border-color: var(--color-success-soft); color: var(--color-success); }
.chip--warning { background: var(--color-warning-soft); border-color: var(--color-warning-soft); color: var(--color-warning); }
.chip--muted { color: var(--color-muted); }
.chip--band-high { color: var(--color-score-high); border-color: var(--color-score-high); }
.chip--band-mid { color: var(--color-score-mid); border-color: var(--color-score-mid); }
.chip--band-low { color: var(--color-score-low); border-color: var(--color-score-low); }
.faq-chip { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-brand-navy); background: var(--color-paper); color: var(--color-brand-navy); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.faq-chip:hover { background: var(--color-sky-soft); }

/* --- 2.10 トースト（画面上部・デモ帯の直下。4 秒で自動消滅・タップで閉じる） --- */
.toast-region { position: fixed; left: 0; right: 0; top: var(--band-h, 0); z-index: 20; display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-4) 0; pointer-events: none; }
.toast { width: 100%; max-width: var(--content-max); margin: 0 auto; pointer-events: auto; cursor: pointer; display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid; box-shadow: var(--shadow-sm); font-size: var(--text-sm); line-height: 1.5; }
.toast--success { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-ink); }
.toast--success .icon { color: var(--color-success); }
.toast--error { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-ink); }
.toast--error .icon { color: var(--color-danger); }
.toast--info { background: var(--color-sky-soft); border-color: var(--color-brand-navy); color: var(--color-ink); }
.toast--info .icon { color: var(--color-brand-navy); }
.toast b { font-weight: 700; }

/* --- 2.11 4 状態の共通型 --- */
.sk { background: var(--color-line); border-radius: var(--radius-md); animation: sk-pulse 1.2s ease-in-out infinite; }
.sk--text { height: var(--space-4); }
.sk--title { height: var(--space-6); width: 60%; }
.sk--block { height: var(--space-12); }
.sk--circle { width: var(--gauge-size); height: var(--gauge-size); border-radius: 50%; margin: 0 auto; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.spinner { width: var(--space-5); height: var(--space-5); border-radius: 50%; border: 2px solid var(--color-line); border-top-color: var(--color-brand-navy); animation: spin .8s linear infinite; flex: none; }
.btn--primary .spinner { border-color: var(--color-sky-soft); border-top-color: var(--color-paper); }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-line { display: flex; gap: var(--space-2); align-items: center; color: var(--color-muted); font-size: var(--text-sm); }
.empty { text-align: center; padding: var(--space-10) var(--space-5); display: grid; gap: var(--space-3); justify-items: center; }
.empty .icon--xl { color: var(--color-muted); }
.empty__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); }
.empty__desc { color: var(--color-muted); font-size: var(--text-sm); max-width: 32ch; }
.errbox { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--color-danger-soft); border: 1px solid var(--color-danger); border-radius: var(--radius-md); }
.errbox__head { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-danger); font-weight: 600; }
.errbox__desc { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* --- 2.12 LP --- */
.hero { display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-4) var(--space-2); }
.hero h1 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.4; color: var(--color-ink); letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--color-brand-navy); }
.hero__lead { color: var(--color-ink-soft); }
.pcards { display: grid; gap: var(--space-3); }
.pcard { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: calc(var(--choice-min) + var(--space-4)); padding: var(--space-4); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: left; font: inherit; color: var(--color-ink); cursor: pointer; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.pcard:hover { border-color: var(--color-brand-navy); }
.pcard:active { background: var(--color-sky-soft); }
.pcard__icon { width: var(--space-12); height: var(--space-12); flex: none; display: grid; place-items: center; background: var(--color-sky-soft); color: var(--color-brand-navy); border-radius: var(--radius-md); }
.pcard__icon .icon { width: var(--space-6); height: var(--space-6); }
.pcard__body { flex: 1; display: grid; gap: var(--space-1); }
.pcard__title { font-size: var(--text-md); font-weight: 600; }
.pcard__desc { font-size: var(--text-sm); color: var(--color-muted); }
.pcard__chev { color: var(--color-muted); width: var(--space-5); height: var(--space-5); flex: none; }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.trust__item { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-3) var(--space-1); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.trust__item .icon { color: var(--color-brand-navy); width: var(--space-6); height: var(--space-6); }
.trust__label { font-size: var(--text-xs); color: var(--color-ink-soft); font-weight: 600; line-height: 1.4; }
.foot { padding: var(--space-5) var(--space-4) var(--space-8); font-size: var(--text-xs); color: var(--color-muted); display: grid; gap: var(--space-2); border-top: 1px solid var(--color-line); }

/* --- 2.13 質問 --- */
.qbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.qbar__count { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-brand-navy-deep); }
.qbar__count b { font-size: var(--text-xl); }
.qbar__rest { font-size: var(--text-xs); color: var(--color-muted); }
.pbar { height: var(--space-2); background: var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.pbar__fill { height: 100%; background: var(--color-brand-navy); border-radius: var(--radius-md); transition: width .25s ease; }
.question { display: grid; gap: var(--space-2); padding: var(--space-2) 0; }
.question__text { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); }
.question__help { font-size: var(--text-sm); color: var(--color-muted); }
.choices { display: grid; gap: var(--space-3); }
.choice { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--choice-min); padding: var(--space-3) var(--space-4); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); line-height: 1.5; color: var(--color-ink); text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.choice:hover { border-color: var(--color-brand-navy); }
.choice__label { flex: 1; }
.choice__mark { width: var(--space-6); height: var(--space-6); flex: none; border-radius: 50%; border: 2px solid var(--color-line); display: grid; place-items: center; color: var(--color-paper); }
.choice__mark .icon { width: var(--space-4); height: var(--space-4); }
.choice.is-selected { background: var(--color-sky-soft); border: 2px solid var(--color-brand-navy); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }
.choice.is-selected .choice__mark { background: var(--color-brand-navy); border-color: var(--color-brand-navy); }
.choice[disabled] { opacity: .45; cursor: not-allowed; }
.qfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }

/* --- 2.14 結果: ゲージ --- */
.score-card { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.gauge { position: relative; width: var(--gauge-size); height: var(--gauge-size); }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.gauge__track { stroke: var(--color-line); }
.gauge circle.gauge__room { stroke: var(--color-muted); stroke-dasharray: 4 4; stroke-linecap: butt; }
.gauge__fill { stroke: var(--color-score-mid); transition: stroke-dasharray .8s ease-out; }
.gauge--high .gauge__fill { stroke: var(--color-score-high); }
.gauge--low .gauge__fill { stroke: var(--color-score-low); }
.gauge__center { position: absolute; inset: 0; display: grid; place-content: center; gap: 0; }
.gauge__num { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--color-ink); font-weight: 600; }
.gauge__num small { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; margin-left: var(--space-1); }
.gauge__label { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-1); }
.score-legend { display: flex; gap: var(--space-4); justify-content: center; font-size: var(--text-xs); color: var(--color-muted); }
.score-legend i { display: inline-block; width: var(--space-4); height: 0; border-top: 2px solid var(--color-score-mid); vertical-align: middle; margin-right: var(--space-1); }
.score-card--high .score-legend i:not(.room) { border-top-color: var(--color-score-high); }
.score-card--low .score-legend i:not(.room) { border-top-color: var(--color-score-low); }
.score-legend i.room { border-top-style: dashed; border-top-color: var(--color-muted); }
.score-headline { font-size: var(--text-md); color: var(--color-ink); font-weight: 600; line-height: 1.5; }
.score-sub { font-size: var(--text-sm); color: var(--color-muted); }

/* --- 2.15 結果: カテゴリ別横棒 --- */
.cats { display: grid; gap: var(--space-3); }
.cat { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: center; }
.cat__label { font-size: var(--text-sm); color: var(--color-ink-soft); }
.cat__pct { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink); text-align: right; }
.cat__bar { grid-column: 1 / -1; height: var(--space-2); background: var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.cat__fill { height: 100%; background: var(--color-brand-navy); border-radius: var(--radius-md); }
.cat.is-room .cat__label::after { content: "余地あり"; margin-left: var(--space-2); font-size: var(--text-xs); color: var(--color-warning); font-weight: 600; }

/* --- 2.16 結果: 制度カード（ロック／開放） --- */
.measure { display: grid; gap: var(--space-3); }
.measure__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.measure__head .seal { width: var(--space-8); height: var(--space-8); }
.measure__title { flex: 1; font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.measure__one { color: var(--color-ink-soft); font-size: var(--text-sm); }
.measure__body { position: relative; }
.measure__body.is-locked .measure__text { filter: blur(var(--space-1)); user-select: none; pointer-events: none; color: var(--color-muted); }
.measure__text { font-size: var(--text-sm); color: var(--color-ink-soft); display: grid; gap: var(--space-2); }
.measure__text ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.lockveil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-2); text-align: center; }
.lockveil__badge { display: grid; place-items: center; width: var(--space-12); height: var(--space-12); border-radius: 50%; background: var(--color-paper); border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); color: var(--color-brand-navy); }
.lockveil__badge .icon { width: var(--space-6); height: var(--space-6); }
.lockveil__text { font-size: var(--text-xs); color: var(--color-ink-soft); background: var(--color-paper); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); }
.measure details summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); color: var(--color-brand-navy); font-size: var(--text-sm); font-weight: 600; }
.measure details summary::-webkit-details-marker { display: none; }
.measure details[open] summary .icon { transform: rotate(180deg); }

/* --- 2.17 結果: フォーム・免責 --- */
.form { display: grid; gap: var(--space-4); }
.form__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); }
.form__note { font-size: var(--text-xs); color: var(--color-muted); display: flex; gap: var(--space-1); align-items: flex-start; }
.form__note .icon { width: var(--space-4); height: var(--space-4); margin-top: 1px; color: var(--color-warning); }
.disclaimer { font-size: var(--text-xs); color: var(--color-muted); padding: var(--space-3) var(--space-4); border-left: 2px solid var(--color-line); }


/* --- 追加: 実装で必要になった差分（モックにない状態・要素） --- */
.foot { padding-inline: max(var(--space-4), calc((100% - var(--content-max)) / 2 + var(--space-4))); }
[hidden] { display: none !important; }
.lockveil { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; padding: 0; }
.lockveil:hover .lockveil__badge { border-color: var(--color-brand-navy); }
.lockveil:focus-visible { outline-offset: calc(var(--space-1) * -1); border-radius: var(--radius-md); }
.measure__text details ul { margin-top: var(--space-2); }
.measure__text p { margin: 0; }
.errbox--warn { background: var(--color-warning-soft); border-color: var(--color-warning); }
.errbox--warn .errbox__head { color: var(--color-warning); }
.errbox .btn { justify-self: start; }
.is-scroll-target { scroll-margin-top: calc(var(--space-12) + var(--space-10)); }
.focus-target:focus { outline: none; }
.cat__pct .unit { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--color-muted); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.stack { display: grid; gap: var(--space-3); }
.cta-card { display: grid; gap: var(--space-3); text-align: center; }
.cta-card .btn { justify-self: stretch; }
.choice .icon { display: block; }
.check .req { color: var(--color-danger); margin-left: var(--space-1); font-size: var(--text-xs); }
.check.is-error .field__err { margin-top: var(--space-1); }
.check__body { display: grid; gap: var(--space-1); }

@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
ul.trust { list-style: none; margin: 0; padding: 0; }
.qstatus:empty { display: none; }
.choice:disabled { opacity: .45; cursor: not-allowed; }
.choice.is-selected:disabled { opacity: 1; }
.qslot { display: grid; gap: var(--space-4); }

/* ===== S4: AI 税務アドバイザー（チャット）と管理画面 ===== */

/* --- 2.18 チャット --- */
body.app--chat { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.chat-shell { flex: 1; min-height: 0; width: 100%; max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; background: var(--color-paper-warm); border-inline: 1px solid var(--color-line); }
.chat-shell > .page { flex: 1; align-content: start; }
.chat-hdr { flex-wrap: wrap; }
.chat-hdr__title { display: grid; gap: var(--space-1); }
.chat-sum { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4) var(--space-4) var(--space-5); }
.msg { display: flex; }
.msg--ai { justify-content: flex-start; }
.msg--user { justify-content: flex-end; }
.bubble { max-width: 86%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-base); line-height: var(--leading); display: grid; gap: var(--space-3); overflow-wrap: anywhere; }
.msg--ai .bubble { background: var(--color-paper); border: 1px solid var(--color-line); color: var(--color-ink); border-bottom-left-radius: var(--radius-md); }
.msg--user .bubble { background: var(--color-brand-navy); color: var(--color-paper); border-bottom-right-radius: var(--radius-md); }
.bubble__text { white-space: pre-wrap; }
.msg--ai .bubble--warn { background: var(--color-warning-soft); border: 2px solid var(--color-warning); max-width: 100%; }
.msg--ai .bubble--err { background: var(--color-danger-soft); border: 1px solid var(--color-danger); }
.bubble .btn { white-space: normal; line-height: 1.4; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.bubble .btn--secondary { justify-self: start; }
.bubble__flag { display: flex; gap: var(--space-2); align-items: center; color: var(--color-warning); font-weight: 700; font-size: var(--text-sm); }
.bubble--err .bubble__flag { color: var(--color-danger); }
.bubble__note { color: var(--color-ink-soft); }
.evidence { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-muted); }
.evidence .seal { width: var(--space-4); height: var(--space-4); color: var(--color-muted); }
.evidence span { background: var(--color-paper-warm); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 0 var(--space-1); }
.faqs { display: grid; gap: var(--space-2); justify-items: start; }
.typing { display: inline-flex; gap: var(--space-1); align-items: center; color: var(--color-muted); font-size: var(--text-sm); }
.typing i { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--color-muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
.typing__text { margin-left: var(--space-1); }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.composer-area { background: var(--color-paper); border-top: 1px solid var(--color-line); padding-bottom: env(safe-area-inset-bottom); }
.composer { display: flex; gap: var(--space-2); align-items: flex-end; padding: var(--space-3) var(--space-4) var(--space-2); }
.composer .input { flex: 1; min-width: 0; }
.composer__hint { font-size: var(--text-xs); color: var(--color-muted); padding: 0 var(--space-4) var(--space-3); text-align: center; }

/* --- 2.19 管理画面 --- */
.admin-hdr { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.admin-hdr__right { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--color-muted); }
.admin-hdr__org { display: none; }
.admin-main { max-width: var(--admin-max); margin: 0 auto; padding: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.admin-center { min-height: 70vh; display: grid; place-items: center; padding: var(--space-5) var(--space-4); }
.pass-card { width: 100%; max-width: calc(var(--content-max) - var(--space-12) * 3); display: grid; gap: var(--space-5); }
.pass-card .seal { margin: 0 auto; }
.pass-card h1 { font-family: var(--font-display); font-size: var(--text-xl); text-align: center; }
.pass-card__lead { text-align: center; }
.errbox__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.stat { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-3); }
.stat__label { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.4; }
.stat__num { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-brand-navy-deep); line-height: 1.1; }
.stat__num small { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--color-muted); margin-left: var(--space-1); }
.stat__note { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.4; }
.sk--w-half { width: 50%; }
.sk--w-third { width: 33%; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: end; }
.filters .field { min-width: 0; }
.filters__profile, .filters__check, .filters__foot { grid-column: 1 / -1; }
.filters__check { align-self: center; }
.filters__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.filters__count { font-size: var(--text-sm); color: var(--color-muted); }
.table-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { position: sticky; top: 0; z-index: 1; background: var(--color-paper-warm); color: var(--color-muted); font-weight: 600; font-size: var(--text-xs); text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); vertical-align: middle; white-space: nowrap; color: var(--color-ink); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-paper-warm); }
.table .num { font-family: var(--font-display); font-size: var(--text-md); }
.table .sample { margin-left: var(--space-1); }
.tip-host { position: relative; display: inline-block; cursor: help; }
.measures-cell { color: var(--color-brand-navy); text-decoration: underline dotted; }
.tip { display: none; position: fixed; z-index: 30; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); gap: var(--space-1); box-shadow: var(--shadow-sm); }
.tip-host.is-tip .tip { display: grid; }
.tip span { background: transparent; border: 0; padding: 0; color: inherit; }

/* 幅 48em 未満はカード、以上は表 */
.table-wrap { display: none; }
.lead-cards { display: grid; gap: var(--space-3); }
.lead-card { display: grid; gap: var(--space-2); }
.lead-card__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.lead-card__name { font-weight: 600; }
.lead-card__meta { color: var(--color-muted); font-size: var(--text-xs); }
.lead-card__contact { overflow-wrap: anywhere; }
.lead-card .num { font-family: var(--font-display); font-size: var(--text-md); white-space: nowrap; }
.lead-card__measures summary { cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; color: var(--color-brand-navy); font-size: var(--text-sm); }
.lead-card__measures ul { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--color-ink-soft); }

/* 個別相談ボタンの「希望を伝えました」: 無効の薄表示ではなく成功の見た目にする */
.btn.btn--sent[disabled] { opacity: 1; cursor: default; background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success); }

@media (min-width: 48em) {
  .table-wrap { display: block; }
  .lead-cards { display: none; }
  .admin-hdr { padding: var(--space-3) var(--space-6); }
  .admin-hdr__org { display: inline; }
  .admin-main { padding: var(--space-6); gap: var(--space-5); }
  .stats { gap: var(--space-4); }
  .stat { padding: var(--space-5); }
  .stat__label { font-size: var(--text-sm); }
  .stat__num { font-size: var(--text-2xl); }
  .stat__num small { font-size: var(--text-sm); }
  .filters { display: flex; flex-wrap: wrap; }
  .filters__check { align-self: end; }
  .filters__foot { margin-left: auto; flex-wrap: nowrap; }
}
.app a.btn--warn { color: var(--color-paper); }