/**
 * 体調チェックアンケート スタイルシート
 * 高齢者向け：落ち着いた配色、安心感のあるデザイン
 */

/* ===== CSS変数 ===== */
/* わかばテーマ(全アプリ共通デザイン言語)。
   色・影・角丸の値は design/tokens.css だけが持つ(tokens.css を先に読み込む)。
   ここは、このファイルで使うローカル名にトークンを受け直すだけの層。値は書かない。

   ★セレクタに .rt-sample を含めるのは必須。カスタムプロパティは「宣言した要素」で
     値が確定するため、:root だけに書くと、評価用サンプル(青)が .rt-sample で
     --rt-* を差し替えてもローカル名(--color-*)には伝わらない。 */
:root, .rt-sample {
    --color-bg: var(--rt-bg);
    --color-bg-chat: var(--rt-bg-chat);
    --color-text: var(--rt-ink);
    --color-text-secondary: var(--rt-ink-soft);
    --color-text-light: var(--rt-ink-faint);

    --color-primary: var(--rt-primary);
    --color-primary-light: var(--rt-primary-light);
    --color-primary-dark: var(--rt-primary-dark);

    --color-answer: var(--rt-answer);      /* 回答バブル: 黄色(入口アプリのデモと同一) */
    --color-answer-text: var(--rt-answer-ink);

    --color-white: var(--rt-card);
    --color-border: var(--rt-border);
    --color-error: var(--rt-error);
}

:root {
    /* [#14] 文字サイズ切替の倍率 --fs は tokens.css が既定値1を持ち、JS が上書きする */
    --font-size-h1: calc(26px * var(--fs));
    --font-size-body: calc(20px * var(--fs));
    --font-size-button: calc(19px * var(--fs));
    --font-size-small: calc(15px * var(--fs));
    --font-size-vas: calc(44px * var(--fs));

    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    --btn-min-height: 54px;
    --border-radius: var(--rt-radius-field);
    --border-radius-large: var(--rt-radius-card);
}

/* ===== リセット & ベース ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* hidden属性を確実に効かせる(button{display:flex}等が上書きするのを防ぐ) */
[hidden] { display: none !important; }

html, body { height: 100%; overflow: hidden; }

body {
    /* 可読性優先で標準ゴシック(丸ゴシックのWebフォントは入口アプリのみ) */
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
                 'Hiragino Sans', Meiryo, sans-serif;
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* ===== 画面切り替え ===== */
.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; }

/* 中央寄せ画面(読み込み中 / 回答不可) */
#screen-loading, #screen-blocked { justify-content: center; align-items: center; }
.center-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--spacing-md); padding: var(--spacing-lg); text-align: center; max-width: 480px; width: 100%;
}
.center-box .btn-large { width: auto; min-width: 240px; }

.spinner {
    width: 48px; height: 48px;
    border: 5px solid var(--color-primary-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 共通テキスト ===== */
h1 {
    font-size: var(--font-size-h1);
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.description {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
}

/* ===== ボタン共通 ===== */
button {
    font-family: inherit;
    font-size: var(--font-size-button);
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius);
    transition: all 0.15s ease;
    min-height: var(--btn-min-height);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
button:active { transform: scale(0.98); }

/* 影も評価用サンプルの青スコープに追従する(--rt-shadow-primary-sm は .rt-sample 側で再宣言済み)。
   トークンに無い一点物の影だけ、プロパティに rgba(var(--rt-primary-rgb), α) と直接書く。 */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: var(--rt-shadow-primary-sm);
}
.btn-primary:hover { background-color: var(--color-primary-dark); }

/* 消極ボタン(閉じる・もどる)。入口アプリの .btn-gray と同一のグレー(docs §4)。
   テーマ非依存なので評価用サンプルの青スコープでもグレーのまま。 */
.btn-secondary {
    background-color: var(--rt-gray-bg);
    color: var(--rt-gray-ink);
    border: 1.5px solid var(--rt-gray-line);
}

/* 主要動作ボタンはピル型に統一。文字も他のボタン同様 --fs に追従させる(従来は21px固定で
   「文字サイズ 大/特大」が効いていなかった) */
.btn-large { min-height: 76px; font-size: calc(21px * var(--fs)); border-radius: var(--rt-radius-pill); }

/* ===== チャット画面 ===== */
#screen-chat { background-color: var(--color-bg-chat); }

.chat-header {
    background-color: var(--color-primary);
    color: white;
    padding: 10px var(--spacing-md);
    flex-shrink: 0;
}
.header-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.app-title { font-size: var(--font-size-body); font-weight: 700; letter-spacing: 0.02em; }

/* [#14] 文字サイズ切替トグル(白ベース＋濃い基調色の文字・タップ領域44px以上) */
.btn-font {
    min-height: 40px;
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
    background-color: var(--color-white); color: var(--color-primary-dark);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px; padding: 5px 14px;
    font-size: 15px; font-weight: 700; /* トグル自身は拡大しない(特大時のヘッダ折返し防止) */
    width: auto; flex-shrink: 0; white-space: nowrap;
}
.btn-font:hover { background-color: var(--color-primary-light); }
.btn-font:active { transform: scale(0.98); }

/* 説明文書を表示(白ベタ背景＋濃い基調色の文字でAAコントラスト・44px以上)。ヘッダ上段の左側に配置。 */
.btn-consent {
    /* 文書アイコンを文字の左・同じ行に（基底 button の flex-direction:column / width:100% を明示的に打ち消す） */
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 5px 14px; width: auto;
    background-color: var(--color-white); color: var(--color-primary-dark);
    border: none; border-radius: 20px;
    font-size: 15px; font-weight: 700; /* ヘッダ折返し防止のため拡大しない */
    box-shadow: var(--rt-shadow-soft);
    flex-shrink: 1; white-space: nowrap; min-width: 0;
}
.btn-consent:hover { background-color: var(--color-primary-light); }
.btn-consent:active { transform: scale(0.98); }
.btn-consent .doc-ico {
    width: 18px; height: 22px;
    border: 2px solid var(--color-primary-dark); border-radius: 3px;
    position: relative; flex-shrink: 0;
}
.btn-consent .doc-ico::before,
.btn-consent .doc-ico::after { content: ""; position: absolute; left: 3px; right: 3px; height: 2px; background: var(--color-primary-dark); }
.btn-consent .doc-ico::before { top: 5px; }
.btn-consent .doc-ico::after { top: 10px; }

.header-progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.progress-text { font-size: var(--font-size-small); font-weight: 700; color: #fff; }

.chat-header .progress-bar {
    height: 6px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}
#progress-fill { height: 100%; background-color: white; transition: width 0.35s ease; border-radius: 3px; width: 0; }

/* position:relative で子(設問)の offsetTop がこのコンテナ基準になる（スクロール目標の基準）。
   scroll-behavior はJSアニメと競合するため付けない。 */
.chat-container { flex: 1; overflow-y: auto; padding: var(--spacing-md); position: relative; }

/* [スクロール改善] バブルは穏やかに fade で出現（座標移動はさせない=スクロール計算と干渉しない） */
.chat-message { margin-bottom: var(--spacing-lg); animation: gentleIn 0.4s ease; }
@keyframes gentleIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* [#7] 設問番号チップ「質問 X / N（あと Z 問）」。Nは複数シート合算の総設問数 */
.q-chip {
    display: inline-block;
    background-color: var(--color-primary); color: #fff;
    font-size: var(--font-size-small); font-weight: 700;
    padding: 4px 14px; border-radius: var(--rt-radius-pill); margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(var(--rt-primary-rgb), 0.25);
}
.q-chip .rest { opacity: 0.9; font-weight: 600; }

/* 質問バブル(左側) */
.question-bubble {
    background-color: var(--color-white);
    border-radius: 4px var(--border-radius-large) var(--border-radius-large) var(--border-radius-large);
    padding: var(--spacing-md) var(--spacing-lg);
    max-width: 88%;
    box-shadow: var(--rt-shadow-soft);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* 終了時/3か月で使用感設問の前に挟む区切りメッセージ */
.preamble-bubble {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: var(--font-size-small);
    margin-bottom: var(--spacing-sm);
}
/* 動作確認用プレビューの通知バナー。
   黄(--color-answer)は「あなたの回答」専用なので、注意の告知は琥珀＋左罫線で描き分ける。 */
.preview-notice {
    background-color: var(--rt-caution);
    color: var(--rt-caution-ink);
    border: 1px solid var(--rt-caution-line);
    border-left-width: 5px;
    font-size: var(--font-size-small);
    line-height: 1.6;
}

.answer-area { margin-top: var(--spacing-sm); padding-left: var(--spacing-xs); }

.options-list { display: flex; flex-direction: column; gap: var(--spacing-xs); }

.option-btn {
    background-color: var(--color-white);
    color: var(--color-text);
    border: 2px solid var(--color-border);
    /* 選択肢はピル型。タップ目標が大きく見え、指で押しやすい(docs/design-tokens.md §3) */
    border-radius: var(--rt-radius-pill);
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 52px;
    font-size: var(--font-size-body);
    font-weight: normal;
    text-align: left;
    flex-direction: row;
    justify-content: flex-start;
    box-shadow: var(--rt-shadow-hairline);
}
.option-btn:hover { border-color: var(--color-primary); background-color: var(--color-primary-light); }
.option-btn.selected { background-color: var(--color-answer); color: var(--color-answer-text); border-color: var(--color-answer); }
.option-btn.selected-previous { background-color: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }
/* 押した瞬間のフィードバック。単一選択でも「いま選んでいる選択肢」なので
   .selected と同じ黄にする(複数選択と見た目を揃える)。押下感は scale で出す。 */
.option-btn.selecting { background-color: var(--color-answer); color: var(--color-answer-text); border-color: var(--color-answer); transform: scale(0.98); }

.answer-area.fading-out { opacity: 0; transition: opacity 0.2s ease; }
.answer-area.fading-in { animation: fadeInAnswer 0.2s ease; }
@keyframes fadeInAnswer {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 回答済みバブル(右側) */
.answer-bubble {
    background-color: var(--color-answer);
    color: var(--color-answer-text);
    border-radius: var(--border-radius-large) 4px var(--border-radius-large) var(--border-radius-large);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-left: auto;
    max-width: 85%;
    /* 黄のバブルには暖色の影(緑の影だと差し色が濁って見える) */
    box-shadow: var(--rt-shadow-bubble);
    font-size: var(--font-size-body);
    cursor: pointer;
    transition: opacity 0.2s;
}
.answer-bubble:hover { opacity: 0.9; }
/* [#9] 「タップで修正」ヒント。バブル右端に寄せ、白ピルは控えめに(マーク無し) */
.answer-bubble .edit-hint {
    display: table; margin: 8px 0 0 auto;
    font-size: calc(13px * var(--fs)); font-weight: 600;
    background: rgba(255, 255, 255, 0.8); color: var(--color-primary-dark);
    border-radius: 14px; padding: 3px 11px;
}

/* [#8] 入力バリデーションのインライン赤字メッセージ(role=alert) */
.inline-error {
    color: var(--color-error);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.5;
    margin-top: 8px;
}

/* VASスライダー */
.vas-area {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: var(--rt-shadow-soft);
    border: 1px solid var(--color-border);
    /* スライダー操作中に周囲の文字が選択されてドラッグが妨げられないように */
    -webkit-user-select: none;
    user-select: none;
}
.vas-area .vas-value-input { -webkit-user-select: text; user-select: text; } /* 数値入力は選択可 */
.vas-value-display { text-align: center; margin-bottom: var(--spacing-md); }
.vas-value-input {
    font-size: var(--font-size-vas);
    font-weight: bold;
    color: var(--color-primary);
    width: 180px;
    text-align: center;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    background-color: var(--color-white);
    -moz-appearance: textfield;
}
/* プレースホルダも文字サイズ切替に追従させる(固定pxだと特大時に本体だけ大きくなる) */
.vas-value-input::placeholder { color: var(--color-text-light); font-size: calc(24px * var(--fs)); }
.vas-value-input::-webkit-outer-spin-button,
.vas-value-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vas-value-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 18px;
    border-radius: 9px;
    /* 淡すぎて選択位置が分かりづらかったため、視認性を上げたトラック＋枠線 */
    background: linear-gradient(to right, var(--rt-primary-track) 0%, var(--color-primary) 100%);
    box-shadow: inset 0 0 0 1px rgba(var(--rt-primary-rgb), 0.25);
    outline: none;
    margin: var(--spacing-md) 0;
    /* ドラッグ時にテキスト選択が始まって禁止カーソルになる/掴めない不具合を防ぐ */
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
}
/* つまみ(選択位置)を濃紺の的に。白リング＋濃紺の外リングで背景と関係なく目立つ */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-primary-dark); border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--color-primary-dark), 0 3px 10px rgba(0, 0, 0, 0.35); cursor: grab;
}
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
input[type="range"]::-moz-range-thumb {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-primary-dark); border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--color-primary-dark), 0 3px 10px rgba(0, 0, 0, 0.35); cursor: grab;
}
.vas-scale-numbers {
    display: flex; justify-content: space-between;
    font-size: var(--font-size-body); font-weight: bold; color: var(--color-text); margin-top: var(--spacing-xs);
}
.vas-labels { margin-top: var(--spacing-sm); font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: 1.4; }
.vas-labels div { margin-bottom: 4px; }
.vas-confirm-btn { margin-top: var(--spacing-md); background-color: var(--color-primary); color: white; border-radius: var(--rt-radius-pill); box-shadow: var(--rt-shadow-primary-sm); }
.vas-confirm-btn:disabled { background-color: var(--color-border); cursor: not-allowed; }

/* テキスト入力 */
.text-input-area {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: var(--rt-shadow-soft);
    border: 1px solid var(--color-border);
}
.text-input {
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-body);
    padding: var(--spacing-sm);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    resize: none;
    min-height: 100px;
}
.text-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.text-confirm-btn { margin-top: var(--spacing-sm); background-color: var(--color-primary); color: white; border-radius: var(--rt-radius-pill); box-shadow: var(--rt-shadow-primary-sm); }

/* ===== [#11] 診察券番号 専用UI ===== */
.card-input-area {
    background-color: var(--color-white); border-radius: var(--border-radius);
    padding: var(--spacing-md); box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid var(--color-border);
}
.card-label { display: block; font-size: var(--font-size-body); font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.card-hint { font-size: var(--font-size-small); color: var(--color-text-secondary); margin-bottom: 12px; line-height: 1.5; }
.card-number-input {
    width: 100%; font-family: inherit; font-size: calc(24px * var(--fs)); font-weight: 700; letter-spacing: 0.08em;
    text-align: center; color: var(--color-primary-dark);
    padding: 14px 12px; border: 2px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-bg);
}
.card-number-input::placeholder { color: var(--color-text-light); font-weight: 400; letter-spacing: normal; font-size: calc(17px * var(--fs)); }
.card-number-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); background: #fff; }
.card-confirm-btn {
    margin-top: 14px; background-color: var(--color-primary); color: #fff; border-radius: var(--rt-radius-pill);
    min-height: 54px; width: 100%; font-size: var(--font-size-button); font-weight: 700;
    box-shadow: var(--rt-shadow-primary-sm);
}
.card-confirm-btn:hover { background-color: var(--color-primary-dark); }

/* 確定エリア */
.confirm-area { padding: var(--spacing-md); background-color: var(--color-white); border-top: 1px solid var(--color-border); }
.btn-confirm {
    background-color: var(--color-primary);
    color: white;
    font-size: calc(22px * var(--fs));
    min-height: 60px;
    border-radius: var(--rt-radius-pill);
    box-shadow: var(--rt-shadow-primary-sm);
}
.btn-confirm:hover { background-color: var(--color-primary-dark); }

/* [#12] 「最初からやり直す」は控えめなリンクとして下部に置く */
.restart-link-wrap { text-align: center; margin-top: 10px; }
.restart-link {
    background: none; border: none; color: var(--color-text-light);
    font-size: var(--font-size-small); text-decoration: underline;
    padding: 8px 12px; min-height: 40px; font-weight: 500; width: auto; margin: 0 auto;
}
.restart-link:hover { color: var(--color-text-secondary); }

/* ===== [#2+#3] チャット上に重ねるオーバーレイ(独立画面へは遷移しない) ===== */
.app-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: var(--rt-scrim);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: fadeIn 0.2s ease;
}
.dialog-card {
    background: var(--color-white); border-radius: var(--rt-radius-dialog);
    padding: var(--spacing-lg); max-width: 360px; width: 100%; text-align: center;
    box-shadow: var(--rt-shadow-dialog);
}
.dialog-card .dialog-title {
    font-size: var(--font-size-body); font-weight: 700; color: var(--color-text);
    line-height: 1.6; margin-bottom: var(--spacing-md);
}
.dialog-card .dialog-sub {
    font-size: var(--font-size-small); color: var(--color-text-secondary);
    line-height: 1.7; margin-bottom: var(--spacing-lg);
    white-space: pre-line;
}
.dialog-btns { display: flex; flex-direction: column; gap: 10px; }
.dialog-btns .btn-primary,
.dialog-btns .btn-secondary { min-height: 56px; border-radius: var(--rt-radius-pill); font-size: var(--font-size-button); }

/* [#12] 破壊的な「やり直す」側は控えめ danger 配色にする(主従反転) */
.btn-danger-quiet {
    background: var(--color-white); color: var(--color-error); border: 1px solid var(--rt-error-line);
    min-height: 50px; border-radius: var(--rt-radius-pill); width: 100%; font-size: var(--font-size-small); font-weight: 600;
}
.btn-danger-quiet:hover { background: var(--rt-error-light); }

/* 送信中スピナー */
.mini-spinner {
    width: 44px; height: 44px; border: 5px solid var(--color-primary-light);
    border-top-color: var(--color-primary); border-radius: 50%;
    animation: spin 0.9s linear infinite; margin: 0 auto var(--spacing-md);
}
.submitting-text { font-size: var(--font-size-body); color: var(--color-primary-dark); font-weight: 700; }

/* ===== 体験サンプル(&sample=1) — 評価用フレーム =====
   本編は通常回答と同一表示。上部バーと終了/使用感アンケートのダイアログのみ
   白+水色・標準ゴシックの別デザインにして、サンプルであることを示す。

   ★配色は個別プロパティを上書きせず、tokens.css の .rt-sample スコープで
     トークンごと差し替える。中のボタン・入力・スピナー・影は自動的に青系になり、
     上書き漏れ(青いボタンに緑の影が残る等)が構造的に起きない。
     このため、青くしたい外枠には .rt-sample を必ず併記すること。 */
/* バーとチップの文字は --fs に追従させない。height:38px と body.sample-mode .screen の
   calc(100% - 38px) が対になっているため、拡大すると折り返して画面高がずれる。 */
.sample-bar {
    height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--color-white); border-bottom: 2px solid var(--rt-line);
    color: var(--rt-heading); font-size: 14px; font-weight: 700; letter-spacing: .06em;
}
.sample-bar::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--rt-accent); }
/* バーの高さぶんだけ各画面を縮める(html,bodyはoverflow:hiddenのため) */
body.sample-mode .screen { height: calc(100% - 38px); }

.dialog-card.sample-frame { border: 1px solid var(--rt-line); }
.sample-frame .sample-chip {
    display: inline-block; background: var(--color-primary-light); color: var(--rt-heading);
    border: 1px solid var(--rt-line);
    border-radius: var(--rt-radius-pill); padding: 3px 14px; margin-bottom: 14px;
    font-size: 13px; font-weight: 700; letter-spacing: .06em;
}

/* サンプル終了のシンプルなチェックマーク(体験サンプル用) */
.check-mark-simple { font-size: 44px; font-weight: 700; color: var(--color-primary); line-height: 1; }
/* サンプルの使用感アンケート入力 */
.dialog-textarea {
    width: 100%; font: inherit; font-size: var(--font-size-small);
    padding: 12px; border: 2px solid var(--color-border); border-radius: var(--border-radius);
    resize: vertical; min-height: 110px; margin: 10px 0 4px; background: var(--color-white);
}
.dialog-textarea:focus { outline: none; border-color: var(--color-primary); }
.sample-comment-note { margin-top: 14px; font-weight: 600; color: var(--color-text); }

/* 完了: 双葉マーク(ブランド統一) */
.check-circle {
    width: 92px; height: 92px; border-radius: 50%; background: var(--color-primary-light);
    border: 3px solid var(--color-primary); display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--spacing-md); animation: pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.done-title { font-size: var(--font-size-h1); font-weight: 700; color: var(--color-primary-dark); margin-bottom: 8px; }
.done-sub { font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: 1.8; white-space: pre-line; }

/* [#6] 送信失敗: 「回答内容は消えていません」の一文は入れない */
.fail-ico {
    width: 64px; height: 64px; border-radius: 50%; background: var(--rt-error-light); border: 3px solid var(--color-error);
    display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md);
    color: var(--color-error); font-size: 34px; font-weight: 700; line-height: 1;
}
.fail-title { font-size: var(--font-size-body); font-weight: 700; color: var(--color-error); margin-bottom: 10px; line-height: 1.5; }
.fail-msg { font-size: var(--font-size-small); color: var(--color-text); line-height: 1.7; margin-bottom: var(--spacing-lg); }

/* ===== モーダル ===== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--rt-scrim);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000; animation: fadeIn 0.2s ease;
}
.modal-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background-color: var(--color-white);
    border-radius: var(--rt-radius-dialog);
    padding: var(--spacing-lg);
    max-width: 420px; width: 92%;
    box-shadow: var(--rt-shadow-dialog);
    text-align: center;
}
.modal-message { font-size: var(--font-size-body); color: var(--color-text); margin-bottom: var(--spacing-lg); line-height: 1.7; }
.modal-buttons { display: flex; gap: var(--spacing-sm); }
.modal-buttons button { flex: 1; min-height: 52px; border-radius: var(--rt-radius-pill); }

/* 説明・同意文書 閲覧モーダル */
.consent-modal-content { max-width: 480px; width: 94%; max-height: 85vh; display: flex; flex-direction: column; }
.consent-view-title { font-weight: 700; color: var(--color-primary-dark); text-align: center; line-height: 1.5; font-size: var(--font-size-body); margin-bottom: 10px; }
.consent-scroll-area {
    max-height: 55vh; overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: var(--color-bg);
    text-align: left;
}
.consent-text { font-size: var(--font-size-small); color: var(--color-text); line-height: 1.8; word-break: break-word; }
/* 同意書の整形(consent.js の RTQ_CONSENT_HTML 用) */
.consent-title { font-weight: 700; font-size: var(--font-size-body); color: var(--color-primary-dark); text-align: center; line-height: 1.5; margin-bottom: 0.8em; }
.consent-h { font-weight: 700; color: var(--color-primary-dark); margin: 1.3em 0 0.4em; }
.consent-p { margin: 0 0 0.7em; }
.consent-li { margin: 0 0 0.25em 1.2em; }

/* ===== レスポンシブ対応 ===== */
@media (max-width: 480px) {
    :root {
        --font-size-body: calc(18px * var(--fs));
        --font-size-button: calc(17px * var(--fs));
        --font-size-vas: calc(38px * var(--fs));
    }
    .question-bubble { max-width: 92%; }
    .answer-bubble { max-width: 80%; }
}
@media (min-width: 768px) {
    .chat-container { max-width: 580px; margin: 0 auto; }
}

/* ===== アクセシビリティ ===== */
/* 「動きを減らす」設定(Windows: アクセシビリティ→視覚効果→アニメーション効果 オフ /
   macOS: 視差効果を減らす)への配慮。止めるのは「動き」だけにする。
   ★ transition-duration まで一括で 0 にしてはいけない。押した手応え(色の変化)が消えて
     UI が反応していないように見え、高齢の利用者ほど操作の成否がわからなくなる。
     transition-property を色・不透明度に限定し、移動を伴う transform だけを落とす。 */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    *, *::before, *::after {
        transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke !important;
    }
}