/*
 * theme.css — Live Sessions. A broadcast control room: near-black blue-grey
 * ground, warm paper ink, one amber "on air" accent. Opens dark; the light
 * set is warm paper with a deeper amber.
 */

:root {
  color-scheme: dark;
  --canvas: #0f1216;
  --surface: #181c22;
  --surface-2: #20252d;
  --border: #2c323b;
  --border-strong: #4a525e;
  --ink: #f2f0ea;
  --muted: #a3a9b3;
  --accent: #f2b33d;
  --accent-hover: #f7c35f;
  --accent-ink: #1c1403;
  --accent-text: #f2b33d;
  --accent-strong: #f7cf7e;
  --accent-soft: #33290f;
  --accent-border: #5c4a1a;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #172f22;
  --success-strong: #58a474;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2517;
  --warning-strong: #ca854f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b191b;
  --danger-strong: #d57575;
  --chart-1: #f2b33d;
  --chart-2: #cb70a4;
  --chart-3: #be6436;
  --chart-4: #98911a;
  --chart-5: #159670;
  --chart-6: #1c9ec8;

  --x-stage: #06080b;
  --x-stage-ink: #f2f0ea;
  --x-stage-muted: #a3a9b3;

  --font-display: "Archivo Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.025em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0.625rem;
  --radius-card: 1rem;
  --radius-input: 0.625rem;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f6f4ee;
  --surface: #ffffff;
  --surface-2: #ece9e0;
  --border: #d9d5c9;
  --border-strong: #a8a394;
  --ink: #191c21;
  --muted: #5f6570;
  --accent: #e5a424;
  --accent-hover: #d4951a;
  --accent-ink: #1c1403;
  --accent-text: #7a5200;
  --accent-strong: #6b4700;
  --accent-soft: #f8ebc9;
  --accent-border: #dcc27f;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfebe3;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6dd;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dfdf;
  --danger-strong: #b91c1c;
  --chart-1: #b97a00;
  --chart-2: #7c285c;
  --chart-3: #7c350c;
  --chart-4: #425605;
  --chart-5: #0b5668;
  --chart-6: #5152a5;

  --x-stage: #06080b;
  --x-stage-ink: #f2f0ea;
  --x-stage-muted: #a3a9b3;
}

/*
 * app.css — Live Sessions' own CSS: the room (stage, control bar, private
 * chat), the host's chat desk, and the page ground. Tokens only.
 */

/* ---- Ground ---------------------------------------------------------------- */
.lobby {
  background:
    radial-gradient(60rem 28rem at 50% -8rem, color-mix(in srgb, var(--accent) 14%, transparent), transparent),
    var(--canvas);
  background-repeat: no-repeat;
}

/* ---- On air ---------------------------------------------------------------- */
.on-air { background: var(--danger); color: var(--danger-ink); }
.on-air .dot { animation: on-air-pulse 1.6s ease-in-out infinite; }
@keyframes on-air-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
html.reduced-motion .on-air .dot { animation: none; }

/* ---- Schedule ---------------------------------------------------------------- */
.schedule-row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.schedule-row.is-live { border-color: var(--accent-border); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
@media (min-width: 48rem) {
  .schedule-row { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.75rem 2rem; }
}

/* ---- The room ---------------------------------------------------------------- */
.room {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100dvh;
}
.room [hidden] { display: none !important; }
@media (min-width: 64rem) {
  .room { grid-template-columns: minmax(0, 1fr) 23rem; grid-template-rows: auto minmax(0, 1fr); }
  .room-bar { grid-column: 1 / -1; }
}
@media (orientation: landscape) and (max-height: 32rem) and (max-width: 63.99rem) {
  .room { height: auto; }
  .room .chat { height: 24rem; }
}

.room-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--x-stage);
  color: var(--x-stage-ink);
}
.stage-frame { flex: 1; min-height: 0; display: grid; place-items: center; }
.stage-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--x-stage);
}
@media (min-width: 64rem) {
  .stage-screen { width: min(100%, calc((100dvh - 9.5rem) * 16 / 9)); }
}
.stage:fullscreen .stage-screen { width: min(100vw, calc((100vh - 5rem) * 16 / 9)); }

.stage-player,
.stage-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Sits over the video so a click cannot pause it, scrub it or open the host's site. */
.stage-shield { position: absolute; inset: 0; z-index: 1; }

.stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  text-align: center;
  color: var(--x-stage-ink);
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 16%, var(--x-stage)), var(--x-stage) 72%);
}
.stage-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--x-stage-muted);
}
.stage-note { max-width: 34ch; font-size: 0.875rem; color: var(--x-stage-muted); }
.countdown {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 9vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sound-pill {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--x-stage-ink) 12%, transparent);
}
.ctl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 4.25rem;
  height: 3.25rem;
  padding: 0 0.625rem;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--x-stage-ink);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms, filter 150ms;
}
.ctl:hover { background: color-mix(in srgb, var(--x-stage-ink) 10%, transparent); text-decoration: none; }
.ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctl:disabled { opacity: 0.45; cursor: not-allowed; }
.ctl-leave { background: var(--danger); color: var(--danger-ink); }
.ctl-leave:hover { background: var(--danger); filter: brightness(1.15); }
.ctl-volume { width: 6rem; accent-color: var(--accent); }
.ctl-volume:disabled { opacity: 0.45; }
@media (max-width: 40rem) { .ctl-volume { display: none; } }
@media (min-width: 64rem) { .ctl-chat { display: none; } }

/* ---- Chat (the room's side panel and the host's thread) ------------------------ */
.chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
@media (min-width: 64rem) {
  .chat { border-top: 0; border-left: 1px solid var(--border); }
}
.chat-head { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); }
.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem;
}
.chat-empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  max-width: 30ch;
  text-align: center;
}
.chat-form { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); }
.chat-foot { padding: 0 1rem 0.75rem; font-size: 0.75rem; color: var(--muted); }

.bubble { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 0.875rem; font-size: 0.9375rem; line-height: 1.4; }
.bubble-mine { align-self: flex-end; background: var(--accent-soft); color: var(--accent-strong); border-bottom-right-radius: 0.25rem; }
.bubble-theirs { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 0.25rem; }
.bubble-meta { margin-bottom: 0.125rem; font-size: 0.6875rem; font-weight: 600; opacity: 0.85; }
.bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- Host desk ------------------------------------------------------------------ */
.desk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 64rem) {
  .desk { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; }
}
.inbox-list { display: flex; flex-direction: column; max-height: 32rem; overflow-y: auto; }
.inbox-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  transition: background-color 150ms;
}
.inbox-item:last-child { border-bottom: 0; }
.inbox-item:hover { background: var(--surface-2); text-decoration: none; }
.inbox-item.is-active { background: var(--accent-soft); }
.presence { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--success-strong); }
.thread-panel { display: flex; flex-direction: column; height: 34rem; }