:root {
  --bg: #10121c; --card: #1a1d2e; --text: #f2f3f8; --muted: #8d92a8; --line: rgba(141,146,168,.22);
  /* The pink is the brand: the play button, the cover, the glow. Text and filled buttons with white text use
     the deeper pink so both pass 4.5:1, and errors get their own colour */
  --accent: #ff4d6d; --accent-strong: #d6264a; --accent-text: #ff4d6d; --danger: #ff8566;
  /* Type: one family, five roles. rem, so a larger browser font size scales the whole app */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-meta: .75rem;     /* 12: times, the song in the bar, fine print, the small caps label */
  --fs-label: .875rem;   /* 14: status lines, notes, names, secondary buttons */
  --fs-body: 1rem;       /* 16: messages, the song, inputs (iPhones zoom on anything smaller), main buttons */
  --fs-title: clamp(1.375rem, 3.6dvh, 1.875rem);   /* 22-30: the station name on the player */
  /* Space: a 4px scale. Tight steps join things, wide steps separate groups */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --tap: 44px;   /* smallest touch target */
  /* Corners, by role */
  --r-sm: 10px;    /* controls: inputs, buttons */
  --r-md: 16px;    /* cards and bars: the chat bar, popovers, the Live chat button */
  --r-lg: 24px;    /* surfaces: the chat card */
  --r-xl: 28px;    /* the cover art and the desktop player */
  --r-bubble: 18px; --r-tail: 6px;   /* chat bubbles, with one tighter corner pointing at the speaker */
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #f4f5fa; --card: #fff; --text: #14172a; --muted: #666b83; --line: rgba(20,23,42,.12);
    --accent-text: #c41c42; --danger: #b3261e; color-scheme: light; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* The app: the tab's screen, the mini player and the tab bar, like a music app on a phone. The pink glow
   sits behind every tab */
body {
  color: var(--text); font-family: var(--font-ui); line-height: 1.4;
  height: 100dvh; overflow: hidden;
  background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--accent) 26%, var(--bg)), var(--bg) 72%) var(--bg) no-repeat;
}
.app {
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto;
  width: 100%; max-width: 460px; height: 100%; margin: 0 auto;
}
.view { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.view[hidden] { display: none; }

/* Mini player: on Recent and Chat, play and what's on stay in reach */
.mini {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 var(--space-2) var(--space-2); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--r-md);
}
body[data-view="player"] .mini { display: none; }
.mini .play-btn {
  width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; transition: transform .1s;
}
.mini .play-btn:active { transform: scale(.94); }
.mini .play-btn svg { width: 22px; height: 22px; fill: currentColor; }
.mini .play-btn.live { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .mini .play-btn.live { animation: none; } }
.mini-title { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; min-height: var(--tap); color: var(--text); text-decoration: none; }
.mini-cover { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); object-fit: cover; }
.mini-cover[hidden] { display: none; }
.mini-text { display: flex; flex-direction: column; min-width: 0; font-weight: 700; font-size: var(--fs-body); line-height: 1.25; }
.mini-text .track { font-size: var(--fs-meta); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-text .track:empty { display: none; }
.mini .status { flex: 0 1 auto; min-width: 0; max-width: 40%; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tab bar */
.tabbar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: var(--fs-meta); font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current="page"] { color: var(--text); }
.tab[aria-current="page"] svg { color: var(--accent-text); stroke-width: 2.4; }
.tab:focus-visible { outline-offset: -4px; border-radius: var(--r-sm); }
@media (hover: hover) { .tab:hover { color: var(--text); } }

/* Computers and tablets: the whole app in a phone-sized card, centred */
@media (min-width: 700px) and (min-height: 700px) {
  .app {
    height: min(880px, calc(100dvh - 48px)); max-width: 440px; margin-top: max(24px, calc((100dvh - 880px) / 2));
    border-radius: var(--r-xl); overflow: hidden;
    background: color-mix(in srgb, var(--card) 70%, transparent); box-shadow: 0 20px 60px rgba(0,0,0,.35);
  }
}
/* Phones on their side: little height, lots of width. The app widens (clear of the notch), and the tab bar
   puts each label beside its icon to give the screen back 16px */
@media (orientation: landscape) and (max-height: 520px) {
  .app { max-width: 760px; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .tabbar { height: calc(42px + env(safe-area-inset-bottom)); }
  .tab { flex-direction: row; gap: var(--space-2); font-size: var(--fs-label); }
  .tab svg { width: 20px; height: 20px; }
  .mini { padding-block: var(--space-1); }
}
.card {
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
h1 { font-size: var(--fs-title); font-weight: 700; line-height: 1.15; margin: 0 0 var(--space-1); }
button, input, textarea, select { font: inherit; }   /* form controls default to the browser's own font */
.status { font-size: var(--fs-label); color: var(--muted); }
.status.on { color: var(--accent-text); font-weight: 600; text-transform: uppercase; }
/* Connecting: a ring turns around the play button, which now reads Stop */
.play-btn { position: relative; }
.play-btn.connecting::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent-text);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .play-btn.connecting::after { animation: none; border-color: var(--accent-text); opacity: .5; } }
.status.err { color: var(--danger); font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }