/* live.madbots.cloud — the public watch page.
 *
 * One stylesheet, two shapes. The breakpoint is 900px: below it the page is a
 * single column with the chat underneath; above it the chat sits alongside.
 * There is deliberately no device sniffing and no second page — a phone held
 * sideways and a narrow desktop window are the same problem, and `@media`
 * already solves it.
 *
 * Brand tokens come from /theme.css; nothing here redefines a colour. */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;                 /* dvh, not vh: iOS Safari's toolbar */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
}

/* ── top bar ─────────────────────────────────────────────────────────── */

.bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(12px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(8px);
}
.bar .logo img { height: 30px; width: auto; display: block; }
.bar .live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
.bar .live .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3a3a42;
  transition: background .3s, box-shadow .3s;
}
.bar .live[data-on="1"] .dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
.bar .live[data-on="1"] .what { color: var(--ink); }
@keyframes pulse { 50% { opacity: .45; } }

/* ⚠️ Respect the setting. A pulsing dot is decoration; for someone with
   vestibular sensitivity it is not. */
@media (prefers-reduced-motion: reduce) {
  .bar .live[data-on="1"] .dot { animation: none; }
}

/* ── the shell: one column, then two ─────────────────────────────────── */

.shell {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 22px);
  padding: clamp(12px, 2.5vw, 28px);
  max-width: 1500px; width: 100%; margin: 0 auto;
  align-content: start;
}

.stage { min-width: 0; }              /* min-width:0 or the grid refuses to shrink */

.under {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; flex-wrap: wrap;
}

.viewers {
  flex: 1; min-width: 0;
  font-size: .85rem; color: var(--dim);
  letter-spacing: .04em;
}
.viewers span { color: var(--ink); font-weight: 700; font-size: 1.05rem; }

.chat-toggle {
  font: inherit; font-weight: 600; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 20px; cursor: pointer; flex: none;
  background: var(--panel-2); color: var(--ink);
}
.chat-toggle:hover { border-color: var(--accent); }
.shell[data-chat="closed"] .ct-close,
.shell[data-chat="open"]   .ct-open { display: none; }

/* ⚠️ `hidden` would unload the chat's websocket every time it is collapsed.
   Keep it in the tree and take it out of layout instead, so reopening is
   instant and no message is missed while it is shut. */
.shell[data-chat="closed"] .side {
  display: none;
}
.side { min-width: 0; }

@media (min-width: 900px) {
  .shell[data-chat="open"] {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px);
  }
  /* The toggle is for small screens; on a wide one the chat simply sits there.
     It stays available, because someone may still want the video full width. */
}