:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel2: #334155;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --accent2: #22c55e;
  --warn: #f59e0b;
  --line: #475569;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", "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(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.topbar .role { font-weight: 700; font-size: 1.05rem; }
.topbar .site { color: var(--muted); font-size: .85rem; }
.topbar .spacer { flex: 1; }
.status { font-size: .85rem; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.status.on { background: rgba(34,197,94,.15); color: var(--accent2); }
.status.off { background: rgba(148,163,184,.15); color: var(--muted); }

/* ===== 言語切替バー ===== */
.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: var(--panel2); color: var(--text);
  padding: .35rem .8rem; border-radius: 999px; font-size: .9rem; cursor: pointer;
}
.langbtn.active { background: var(--accent); color: #062235; 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: .45; transition: opacity .35s ease, color .35s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(10px);} to {opacity:.45; 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: .65; word-break: break-word; }

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

/* 認識中（interim・灰の暫定行） */
.interim {
  margin: 0 1rem 1rem; padding: .6rem 1rem; border-radius: 12px;
  background: rgba(148,163,184,.12); color: var(--muted); font-style: italic;
  border: 1px dashed var(--line); display: none; word-break: break-word;
}

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

/* ===== 監督操作バー ===== */
.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(--accent2); color: #052e16; }
.btn.ghost { background: var(--panel2); color: var(--text); }
.btn.speak { background: var(--accent); color: #062235; flex: 1; min-width: 180px; }
.btn.speak.speaking { background: var(--warn); color: #3b2400; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== モニター画面（大画面・1言語大表示・最新を特大強調） ===== */
body.monitor { background: #0b1220; }
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); }
/* 最新の行：特大・明るく（モニターはこの1行が主役） */
body.monitor .msg.latest .msg-main { 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） ===== */
.entry { max-width: 760px; margin: 0 auto; padding: 2rem 1.2rem; }
.entry h1 { font-size: 1.6rem; }
.entry .lead { color: var(--muted); line-height: 1.7; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,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; transition: .15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .ico { font-size: 2rem; }
.card .t { font-weight: 700; margin: .5rem 0 .2rem; font-size: 1.1rem; }
.card .d { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.tip { background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.3); border-radius: 12px; padding: 1rem; color: #bae6fd; font-size: .9rem; line-height: 1.6; }

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