/* =========================================================
   Malme ライトテーマ（明るめ・なじみやすい）
   Primary: ウォームチャコール #3C3838 / Accent: ダスティローズ #C2706B
   Card: ウォームライトグレー #F5F0F0 / Gradient: #F5EAEA→#EACED0
   ========================================================= */
:root {
  --bg: #FBF8F8;            /* 柔らかい暖色オフホワイト */
  --grad-start: #F5EAEA;
  --grad-end: #EACED0;
  --header: #3C3838;        /* プライマリ（チャコール）*/
  --panel: #FFFFFF;         /* カード・バー */
  --panel2: #F5F0F0;        /* ウォームライトグレー */
  --text: #333333;          /* 本文 */
  --heading: #3C3838;       /* 見出し・最新行 */
  --muted: #8A7C7C;         /* 淡色テキスト（ウォームグレー）*/
  --accent: #C2706B;        /* ダスティローズ */
  --accent-soft: #E8B4B0;   /* ライトローズ */
  --accent-tint: #F7ECEC;   /* ごく淡いローズ */
  --line: #E8DFDF;          /* 暖色ライトボーダー */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Arial, "Helvetica Neue", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== ヘッダ（チャコール地＋ローズのアクセントライン）===== */
.topbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem;
  background: var(--header);
  border-bottom: 3px solid var(--accent);
  flex-wrap: wrap;
}
.topbar .role { font-weight: 700; font-size: 1.05rem; color: #fff; }
.topbar .site { color: rgba(255,255,255,.72); font-size: .85rem; }
.topbar a.langbtn { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.topbar .spacer { flex: 1; }
.status { font-size: .85rem; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.status.on { background: rgba(232,180,176,.25); color: #F3D9D7; }
.status.off { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }

/* ===== 言語切替バー ===== */
.langbar { display: flex; gap: .4rem; padding: .5rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.langbtn {
  border: 1px solid var(--line); background: #fff; color: var(--text);
  padding: .35rem .8rem; border-radius: 999px; font-size: .9rem; cursor: pointer;
}
.langbtn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }

/* ===== フィード（字幕型・流れる表示／枠なし） ===== */
.feed-wrap { position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.feed {
  flex: 1; overflow-y: auto; padding: 1rem 1.2rem 30vh; display: flex; flex-direction: column; gap: .9rem;
  scroll-behavior: smooth;
}
/* 枠（カード）は廃止。区切りは余白のみ。最新行を強調、過去は淡く */
.msg { animation: pop .25s ease; opacity: .5; transition: opacity .35s ease, color .35s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(10px);} to {opacity:.5; transform:none;} }
.msg-main { font-size: 1.2rem; line-height: 1.55; color: var(--muted); word-break: break-word; overflow-wrap: anywhere; }
.msg-sub { margin-top: .25rem; color: var(--muted); font-size: .8rem; opacity: .75; word-break: break-word; }

/* 最新の1行：大きく・濃く強調（読み手はここを見れば良い） */
.msg.latest { opacity: 1; }
.msg.latest .msg-main { color: var(--heading); font-weight: 700; font-size: 1.55rem; line-height: 1.5; }
.msg.latest .msg-sub { color: var(--muted); opacity: .95; }

/* 認識中（interim・暫定行） */
.interim {
  margin: 0 1rem 1rem; padding: .6rem 1rem; border-radius: 12px;
  background: var(--accent-tint); color: var(--accent); font-style: italic;
  border: 1px dashed var(--accent-soft); display: none; word-break: break-word;
}

/* 「最新へ」ボタン */
.jump {
  position: absolute; right: 1rem; bottom: 1rem; display: none;
  align-items: center; gap: .3rem;
  background: var(--accent); color: #fff; border: none; font-weight: 700;
  padding: .5rem .9rem; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(60,56,56,.25);
}

/* ===== 監督操作バー ===== */
.controls { display: flex; gap: .6rem; padding: .8rem 1rem; background: var(--panel); border-top: 1px solid var(--line); flex-wrap: wrap; }
.btn { border: none; border-radius: 10px; padding: .7rem 1.1rem; font-size: 1rem; cursor: pointer; font-weight: 700; }
.btn.primary { background: var(--header); color: #fff; }             /* 昼礼開始 */
.btn.speak { background: var(--accent); color: #fff; flex: 1; min-width: 180px; }  /* 話す（主CTA）*/
.btn.speak.speaking { background: #8A7C7C; color: #fff; }            /* 停止中 */
.btn.ghost { background: #fff; color: var(--heading); border: 1px solid var(--line); }  /* 昼礼終了 */
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== モニター画面（大画面・1言語大表示・最新を特大強調） ===== */
body.monitor { background: linear-gradient(180deg, #FBF8F8 0%, #F5EAEA 100%); }
body.monitor .feed { padding: 3vh 5vw 40vh; gap: 1.6rem; }
body.monitor .msg-main { font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-weight: 600; line-height: 1.4; }
body.monitor .msg-sub { font-size: clamp(.85rem, 1.3vw, 1.2rem); }
body.monitor .msg.latest .msg-main { color: var(--heading); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; line-height: 1.3; }
body.monitor .msg.latest .msg-sub { font-size: clamp(1rem, 1.8vw, 1.6rem); }
body.monitor .topbar .role { font-size: 1.3rem; }
body.monitor .langbtn { font-size: 1.1rem; padding: .5rem 1.1rem; }
body.monitor .interim { font-size: clamp(1.2rem, 2.6vw, 2.2rem); margin: 0 5vw 2vh; }

/* ===== エントリ（index）===== */
body[data-role="entry"] { background: linear-gradient(180deg, var(--grad-start) 0%, var(--bg) 42%); }
.entry { max-width: 860px; margin: 0 auto; padding: 2rem 1.2rem; width: 100%; }
.entry h1 { font-size: 1.7rem; color: var(--heading); margin-bottom: .4rem; }
.entry .lead { color: #5C5555; line-height: 1.8; }

/* カード配置: 上3 → 横長1 → 横長1（幅を上段に合わせる）*/
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem;
  box-shadow: 0 1px 3px rgba(60,56,56,.06); transition: .15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(194,112,107,.16); }
.card .ico { font-size: 2rem; }
.card .t { font-weight: 700; margin: .5rem 0 .2rem; font-size: 1.1rem; color: var(--heading); }
.card .d { color: var(--muted); font-size: .85rem; line-height: 1.5; }

/* 横長カード（履歴・QR）: 全幅＋アイコン左・本文右 */
.card.wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2rem; }
.card.wide .ico { margin: 0; flex: 0 0 auto; }
.card.wide .card-body { display: flex; flex-direction: column; }
.card.wide .t { margin: 0 0 .25rem; }

.tip { background: var(--accent-tint); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 1rem; color: #7A4B47; font-size: .9rem; line-height: 1.7; }
.tip strong { color: var(--accent); }

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
}

/* モック注記 */
.disclaimer { margin-top: auto; text-align: center; color: var(--muted); font-size: .78rem; padding: .5rem 1rem; background: var(--panel); border-top: 1px solid var(--line); }