/* Dark, high-contrast, big type. --fs scales all reading text. */

:root {
  --fs: 1.2;
  --bg: #0d0f12;
  --panel: #171b21;
  --text: #f2f4f7;
  --muted: #8a919c;
  --interim: #6d7480;
  --accent: #ffd166;
  --good: #3ddc84;
  --bad: #ff5d5d;
  --warn: #ffb020;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Our display rules on IDs/classes would otherwise defeat the hidden attribute. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

.screen {
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

/* ---------- Setup ---------- */
#screen-setup, #screen-end { justify-content: center; gap: 22px; max-width: 480px; margin: 0 auto; width: 100%; }
.logo { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; }
.tagline { color: var(--muted); font-size: 17px; }
.setup-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.optional { font-weight: 400; text-transform: none; letter-spacing: 0; }

.roster-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.roster-chip {
  background: var(--panel); border: 1px solid #2a3038; border-radius: 999px;
  padding: 8px 14px; font-size: 17px; display: inline-flex; align-items: center; gap: 8px;
}
.roster-chip button { background: none; border: none; color: var(--muted); font-size: 17px; padding: 0 2px; }

.roster-form, #sheet-other-form { display: flex; gap: 8px; }
input[type="text"] {
  flex: 1; background: var(--panel); border: 1px solid #2a3038; border-radius: 10px;
  color: var(--text); font-size: 17px; padding: 12px 14px; outline: none;
}
input[type="text"]:focus { border-color: var(--accent); }

.btn-small {
  background: var(--panel); border: 1px solid #2a3038; border-radius: 10px;
  color: var(--text); font-size: 17px; padding: 12px 16px;
}
.btn-small.selected { border-color: var(--accent); color: var(--accent); }
.font-size-row { display: flex; gap: 8px; }
.font-size-row button:nth-child(1) { font-size: 15px; }
.font-size-row button:nth-child(3) { font-size: 21px; }

.btn-big {
  background: var(--accent); color: #14161a; border: none; border-radius: 14px;
  font-size: 22px; font-weight: 700; padding: 18px; margin-top: 10px;
}
.setup-error { color: var(--bad); font-size: 15px; }

/* ---------- Live ---------- */
#screen-live { padding: 0; position: relative; }

/* Thread panel: ~30% of the screen, the biggest type on screen.
   Centering happens on the inner block, not via align-items — a flex child
   centered inside a too-small parent overflows *past* the scroll origin and
   spills over the captions below it. */
#thread-panel {
  flex: 0 0 30%;
  background: var(--panel);
  border-bottom: 2px solid #2a3038;
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
  overflow: hidden;
  display: grid;
  align-content: center;
}
#thread-text {
  /* Starting size; app.js shrinks it until the text fits the panel. */
  font-size: calc(24px * var(--fs));
  line-height: 1.3;
  font-weight: 650;
  transition: opacity 0.45s ease;
  overflow-wrap: break-word;
}
#thread-text.quiet { color: var(--muted); font-weight: 500; font-style: italic; }

#mic-warning {
  flex: 0 0 auto; background: #5a1e1e; color: #ffd9d9;
  font-size: 15px; padding: 10px 16px; text-align: center;
}

/* Captions: peripheral vision, scrolling below. */
#captions-wrap { flex: 1 1 auto; position: relative; min-height: 0; }
#captions {
  height: 100%; overflow-y: auto; padding: 12px 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.cap-line { font-size: calc(20px * var(--fs)); line-height: 1.3; }
.cap-line .spk { font-weight: 700; color: var(--accent); margin-right: 6px; }
.cap-line.interim { color: var(--interim); }
.cap-line.interim .spk { color: var(--interim); }

.btn-jump {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #14161a; border: none; border-radius: 999px;
  font-size: 16px; font-weight: 700; padding: 10px 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* ---------- Bottom bar ---------- */
#bottom-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid #2a3038;
}
#listening-indicator { display: flex; align-items: center; gap: 8px; min-width: 74px; }
.dot-pulse {
  width: 12px; height: 12px; border-radius: 50%; background: var(--bad);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
#meter { width: 46px; height: 6px; background: #2a3038; border-radius: 3px; overflow: hidden; }
#meter-fill { height: 100%; width: 0%; background: var(--good); transition: width 0.1s linear; }

.btn-catchup {
  flex: 1; background: var(--accent); color: #14161a; border: none; border-radius: 12px;
  font-size: 19px; font-weight: 700; padding: 15px;
}
.btn-end {
  background: none; border: 1px solid var(--bad); color: var(--bad);
  border-radius: 12px; font-size: 17px; padding: 15px 16px;
}

/* ---------- Status lights ---------- */
#status-lights {
  position: absolute; top: calc(4px + env(safe-area-inset-top)); right: 8px;
  display: flex; gap: 8px; opacity: 0.85;
}
.light { font-size: 11px; color: var(--muted); padding-left: 12px; position: relative; }
.light::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted);
}
.light.connecting::before { background: var(--warn); }
.light.connected::before { background: var(--good); }
.light.error::before { background: var(--bad); }

/* ---------- Proposal chip ---------- */
#proposal-chip {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(30% + 10px);
  background: #22262e; border: 1px solid #343b45; border-radius: 999px;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px;
  font-size: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); z-index: 5;
}
#proposal-chip button {
  border: none; border-radius: 999px; width: 36px; height: 36px; font-size: 17px;
}
#proposal-yes { background: var(--good); color: #14161a; }
#proposal-no { background: #343b45; color: var(--text); }

/* ---------- Name sheet ---------- */
#sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9; }
#name-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: #1c2129; border-radius: 18px 18px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  animation: sheet-up 0.22s ease;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
#sheet-title { font-size: 18px; font-weight: 700; }
#sheet-names { display: flex; flex-wrap: wrap; gap: 10px; }
#sheet-names button {
  background: var(--panel); border: 1px solid #343b45; border-radius: 12px;
  color: var(--text); font-size: 19px; padding: 14px 20px;
}

/* ---------- Catch-up overlay ---------- */
#catchup-overlay {
  position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
#catchup-card {
  background: #1c2129; border-radius: 18px; padding: 24px; max-width: 560px;
  display: flex; flex-direction: column; gap: 14px;
}
.catchup-heading { color: var(--accent); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
#catchup-text { font-size: calc(21px * var(--fs)); line-height: 1.4; }
#catchup-text.loading { color: var(--muted); font-style: italic; }
.catchup-dismiss { color: var(--muted); font-size: 13px; text-align: center; }