/* =============================================================================
   StreamRelay design system, ported to Stream Controller.

   Spotify structure + Apple polish: near-black immersive surfaces, hairline
   separation instead of filled panels, one saturated accent (violet), type
   carrying the hierarchy, big radii and pill buttons for one-handed phone use.

   HOW THIS WORKS
   The app's own CSS is entirely token-driven (--surface, --line, --ink, …), so
   switching design is mostly a matter of remapping those tokens and then
   overriding the handful of places where the *shape* differs — radii, button
   geometry, elevation, tracking. Everything here is scoped to
   :root[data-design="relay"], so the original design is untouched and the two
   can be switched at runtime.

   The .sr-* primitives and the screen-safe blur at the bottom are deliberately
   NOT scoped — the blur is a feature, not a skin, and it matters in both.
   ========================================================================== */

:root[data-design="relay"] {
  /* --- StreamRelay tokens, verbatim --- */
  --sr-bg: #0a0a0b;
  --sr-bg-elevated: #0f0f11;
  --sr-surface: #151518;
  --sr-surface-2: #1b1b1f;
  --sr-surface-3: #232328;
  --sr-text-dim: #71717a;
  --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 20px;

  /* --- mapped onto the names the app's CSS already uses --- */
  --ground: var(--sr-bg);
  --surface: var(--sr-surface);
  --surface-2: var(--sr-surface-2);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --ink: #f4f4f6;
  --ink-2: #a1a1aa;
  --muted: #a1a1aa;

  --accent: #8b5cf6;
  --accent-ink: #ffffff;
  --accent-soft: rgba(139, 92, 246, .14);
  --accent-line: rgba(139, 92, 246, .4);
  --indigo: #a78bfa;

  /* Status colours are FUNCTIONAL here, never decorative. Note the app calls
     its danger colour --live (it predates this system), so the mapping looks
     inverted: --ok is StreamRelay's --live green, --live is its --danger rose. */
  --ok: #34d399;
  --warn: #fbbf24;
  --live: #fb7185;

  /* Hairlines, not boxes — elevation is almost entirely removed. */
  --shadow: none;
  --radius: var(--r-lg);

  /* Inter where it's installed, system stack otherwise. Deliberately not
     fetched from a CDN: this app is self-hosted and shouldn't gain a
     third-party request for a font. */
  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  color-scheme: dark;
}

/* Dark only, for now — the theme toggle is hidden while this design is active,
   but guard anyway so a stale data-theme="light" can't half-apply. */
:root[data-design="relay"][data-theme="light"] {
  --ground: var(--sr-bg);
  --surface: var(--sr-surface);
  --surface-2: var(--sr-surface-2);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --ink: #f4f4f6;
  --ink-2: #a1a1aa;
  --muted: #a1a1aa;
  --accent: #8b5cf6;
  --accent-soft: rgba(139, 92, 246, .14);
  --ok: #34d399; --warn: #fbbf24; --live: #fb7185;
  --shadow: none;
}

/* ---------- page ---------- */

:root[data-design="relay"] body {
  /* The original's blue radial glow reads as a second brand colour. One accent
     only — so this is a whisper of violet, or nothing. */
  background:
    radial-gradient(1100px 500px at 82% -180px, rgba(139, 92, 246, .07), transparent 70%),
    var(--ground);
  letter-spacing: -.01em;
}

:root[data-design="relay"] h1,
:root[data-design="relay"] h2,
:root[data-design="relay"] h3 {
  letter-spacing: -.03em;
  font-weight: 600;
  line-height: 1.1;
}
:root[data-design="relay"] .card .card-h h2 { font-weight: 600; letter-spacing: -.02em; }

/* ---------- shell ---------- */

:root[data-design="relay"] .app-header {
  background: color-mix(in oklab, var(--sr-bg-elevated) 86%, transparent);
  border-bottom: 1px solid var(--line);
}
:root[data-design="relay"] .app-header .brand b { letter-spacing: -.03em; font-weight: 600; }

:root[data-design="relay"] .nav-btn {
  border-radius: 999px;
  transition: background .12s ease, color .12s ease;
}
:root[data-design="relay"] .nav-btn.active {
  background: var(--accent-soft);
  color: #c4b5fd;
}

:root[data-design="relay"] .tabbar {
  background: color-mix(in oklab, var(--sr-bg-elevated) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--line);
}
:root[data-design="relay"] .tab-item.active { color: #c4b5fd; }

/* ---------- cards: hairlines, not boxes ---------- */

:root[data-design="relay"] .card {
  border-radius: var(--r-lg);
  box-shadow: none;
  background: var(--sr-surface);
}
:root[data-design="relay"] .card .card-h { padding: 15px 18px; }
:root[data-design="relay"] .card .card-b { padding: 18px; }
/* Nested cards sit one step lighter, per --surface-2 in the token list. */
:root[data-design="relay"] .card .card { background: var(--sr-surface-2); border-radius: var(--r); }

:root[data-design="relay"] .auth-card,
:root[data-design="relay"] .setup-card { border-radius: var(--r-lg); box-shadow: none; }
:root[data-design="relay"] .setup-card { border-color: var(--accent-line); }

/* ---------- round, soft, tappable ---------- */

:root[data-design="relay"] .btn {
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
/* One flat accent — the original's gradient reads as two colours. */
:root[data-design="relay"] .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
:root[data-design="relay"] .btn.primary:hover { background: #7c4dff; border-color: #7c4dff; }
:root[data-design="relay"] .btn.ghost { border-color: var(--line-strong); }
:root[data-design="relay"] .btn.ghost:hover { background: var(--sr-surface-3); border-color: var(--line-strong); }
:root[data-design="relay"] .btn.small { padding: 7px 14px; }
/* Press in, don't move down — this is the one animation that matters on a phone. */
:root[data-design="relay"] .btn:active { transform: scale(.97); }

:root[data-design="relay"] .icon-btn {
  border-radius: 999px;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
:root[data-design="relay"] .icon-btn:hover { background: var(--sr-surface-3); border-color: var(--line-strong); }
:root[data-design="relay"] .icon-btn:active { transform: scale(.97); }

:root[data-design="relay"] .scene-btn { border-radius: var(--r); }
:root[data-design="relay"] .scene-btn:active { transform: scale(.98); }

/* ---------- inset fields ---------- */

:root[data-design="relay"] .field input,
:root[data-design="relay"] .field select,
:root[data-design="relay"] .field textarea,
:root[data-design="relay"] .assistant-url input {
  background: var(--sr-bg-elevated);
  border-radius: var(--r-sm);
  border-color: var(--line-strong);
}
:root[data-design="relay"] .field input:focus,
:root[data-design="relay"] .field select:focus {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
  border-color: var(--accent-line);
}
:root[data-design="relay"] .field label {
  color: var(--sr-text-dim);
  letter-spacing: .01em;
  font-weight: 600;
}
:root[data-design="relay"] .log,
:root[data-design="relay"] code,
:root[data-design="relay"] .copy-inline { background: var(--sr-bg-elevated); }

/* ---------- chips, pills, dots ---------- */

:root[data-design="relay"] .pill { border-radius: 999px; }
:root[data-design="relay"] .chat-target,
:root[data-design="relay"] .why-chip,
:root[data-design="relay"] .role-badge { border-radius: 999px; }
:root[data-design="relay"] .dash-toggle { border-radius: var(--r-sm); }
:root[data-design="relay"] .dash-toggle:hover { background: var(--sr-surface-3); }
:root[data-design="relay"] .mx-row,
:root[data-design="relay"] .share-row,
:root[data-design="relay"] .chat-plat,
:root[data-design="relay"] .gated-row { border-radius: var(--r); }
:root[data-design="relay"] input[type="checkbox"],
:root[data-design="relay"] input[type="range"] { accent-color: var(--accent); }

/* The live dot gets a soft glow ring — .dot-live in the source system. */
:root[data-design="relay"] .pill.on .d {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 22%, transparent);
}

/* =============================================================================
   Screen-safe blur — NOT scoped to a design, because it isn't decoration.

   IRL streamers share their screen. Anything that grants access to a channel or
   an OBS session is blurred by default, and Copy still works while blurred: the
   button reads the underlying value, so a key can go into OBS without ever
   being displayed. Toggle lives in the header.
   ========================================================================== */

.sr-secret {
  filter: blur(7px);
  /* Deliberately NOT transitioned. A transition on filter left the computed
     value stuck mid-flight when the toggle flipped, so a "hidden" key could
     read as revealed (or vice versa) — for something whose whole job is not
     showing a secret, correctness beats the 120ms fade. */
  /* Stops a stray double-click selecting and revealing the text under blur. */
  user-select: none;
}
/* Explicitly opted out, or the feature is off. */
:root[data-screensafe="off"] .sr-secret,
.sr-secret.sr-shown { filter: none; user-select: auto; }

/* The header toggle reads as armed when secrets are hidden. */
.sr-safe-btn.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}