* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* iOS paints a dark flash over anything tapped. Every control here has its own pressed
   state, so the default highlight is switched off site-wide. */
html {
  -webkit-tap-highlight-color: transparent;
}

/* =====================
   COLOR VARIABLES
   ===================== */

:root {
  /* Background gradient — dark mode: near-blacks and deep charcoals */
  --grad-base: hsla(210, 8%, 7%, 1);
  --grad-1: hsla(210, 10%, 9%, 1);
  --grad-2: hsla(220, 8%, 12%, 1);
  --grad-3: hsla(200, 6%, 10%, 1);
  --grad-4: hsla(215, 9%, 8%, 1);
  --grad-5: hsla(205, 7%, 13%, 1);
  --grad-6: hsla(218, 8%, 11%, 1);

  /* Card surfaces */
  --bg-primary: rgba(245, 242, 238, 0.05);
  --bg-secondary: rgba(245, 242, 238, 0.05);
  --bg-header-footer: rgba(245, 242, 238, 0.06);

  --text-primary: hsla(36, 10%, 90%, 1);
  --text-secondary: hsla(36, 6%, 55%, 1);
  --logo-color: hsla(36, 10%, 90%, 1);
  --border-color: rgba(245, 242, 238, 0.07);

  /* User bubble — warm white */
  --user-bubble-bg: hsla(36, 10%, 90%, 1);
  --user-bubble-text: hsla(210, 8%, 8%, 1);
  --user-bubble-shadow: rgba(0, 0, 0, 0.25);

  /* Assistant bubble — slightly lifted dark */
  --assistant-bubble-bg: rgba(245, 242, 238, 0.08);
  --assistant-bubble-text: hsla(36, 10%, 88%, 1);
  --assistant-bubble-shadow: rgba(0, 0, 0, 0.15);

  --input-bg: rgba(245, 242, 238, 0.05);
  --input-border: rgba(245, 242, 238, 0.11);
  --input-focus-border: rgba(245, 242, 238, 0.28);

  --typing-dot: hsla(36, 6%, 50%, 1);
  --live-tag-bg: rgba(245, 242, 238, 0.08);
  --live-tag-hover-bg: rgba(245, 242, 238, 0.14);
  --live-tag-active-bg: rgba(245, 242, 238, 0.2);
  --live-tag-text: hsla(36, 10%, 88%, 1);
  --link-color: hsla(36, 10%, 68%, 1);
  --link-hover: hsla(36, 10%, 90%, 1);

  --scrollbar-thumb: rgba(245, 242, 238, 0.1);
  --scrollbar-thumb-hover: rgba(245, 242, 238, 0.18);

  --card-shadow: 0 0 0 1px rgba(245, 242, 238, 0.06), 0 24px 64px rgba(0, 0, 0, 0.6);
  --card-border: rgba(245, 242, 238, 0.07);
  --backdrop-blur: blur(24px);
  --bg-interrupt: rgba(245, 242, 238, 0.08);
  --interrupt-btn-bg: rgba(18, 20, 24, 0.95);
  --interrupt-btn-text: #f0ece6;
  /* Ring line colors */
  --ring-color: rgba(245, 242, 238, 0.13);
  --star-color: 245, 242, 238;  /* RGB only — used in rgba() in JS */
  /* Skeleton loader */
  --skeleton-base: rgba(245, 242, 238, 0.06);
  --skeleton-shine: rgba(245, 242, 238, 0.1);
  /* Universal embed fade — used for all voice/song embed opacity transitions */
  --embed-transition: opacity 1.4s ease;
}

/* Force dark */
:root[data-theme="dark"] {
  --grad-base: hsla(210, 8%, 7%, 1);
  --grad-1: hsla(210, 10%, 9%, 1);
  --grad-2: hsla(220, 8%, 12%, 1);
  --grad-3: hsla(200, 6%, 10%, 1);
  --grad-4: hsla(215, 9%, 8%, 1);
  --grad-5: hsla(205, 7%, 13%, 1);
  --grad-6: hsla(218, 8%, 11%, 1);
  --bg-primary: rgba(245, 242, 238, 0.05);
  --bg-secondary: rgba(245, 242, 238, 0.05);
  --bg-header-footer: rgba(245, 242, 238, 0.06);
  --text-primary: hsla(36, 10%, 90%, 1);
  --text-secondary: hsla(36, 6%, 55%, 1);
  --logo-color: hsla(36, 10%, 90%, 1);
  --border-color: rgba(245, 242, 238, 0.07);
  --user-bubble-bg: hsla(36, 10%, 90%, 1);
  --user-bubble-text: hsla(210, 8%, 8%, 1);
  --user-bubble-shadow: rgba(0, 0, 0, 0.25);
  --assistant-bubble-bg: rgba(245, 242, 238, 0.08);
  --assistant-bubble-text: hsla(36, 10%, 88%, 1);
  --assistant-bubble-shadow: rgba(0, 0, 0, 0.15);
  --input-bg: rgba(245, 242, 238, 0.05);
  --input-border: rgba(245, 242, 238, 0.11);
  --input-focus-border: rgba(245, 242, 238, 0.28);
  --typing-dot: hsla(36, 6%, 50%, 1);
  --live-tag-bg: rgba(245, 242, 238, 0.08);
  --live-tag-hover-bg: rgba(245, 242, 238, 0.14);
  --live-tag-active-bg: rgba(245, 242, 238, 0.2);
  --live-tag-text: hsla(36, 10%, 88%, 1);
  --link-color: hsla(36, 10%, 68%, 1);
  --link-hover: hsla(36, 10%, 90%, 1);
  --scrollbar-thumb: rgba(245, 242, 238, 0.1);
  --scrollbar-thumb-hover: rgba(245, 242, 238, 0.18);
  --card-shadow: 0 0 0 1px rgba(245, 242, 238, 0.06), 0 24px 64px rgba(0, 0, 0, 0.6);
  --card-border: rgba(245, 242, 238, 0.07);
  --bg-interrupt: rgba(245, 242, 238, 0.08);
  --interrupt-btn-bg: rgba(18, 20, 24, 0.95);
  --interrupt-btn-text: #f0ece6;
  --ring-color: rgba(245, 242, 238, 0.12);
  --star-color: 245, 242, 238;
  --skeleton-base: rgba(245, 242, 238, 0.06);
  --skeleton-shine: rgba(245, 242, 238, 0.1);
}

/* =====================
   PAGE BACKGROUND
   ===================== */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  color: var(--text-primary);
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background-color: var(--grad-base);
}

/* Grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

/* Background canvas — rings + star field, full viewport */
#bg-rings {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* =====================
   CARD
   ===================== */

#app-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);
  overflow: hidden;
}

@media (min-width: 769px) {
  #app-card {
    height: calc(100dvh - 48px);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
  }
}

/* =====================
   HEADER
   ===================== */

#header {
  background-color: var(--bg-header-footer);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  padding: 12px 16px;
  z-index: 100;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
}

#header h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--logo-color);
  text-align: left;
  line-height: 1;
  display: flex;
  align-items: baseline;
}

.logo-efr { letter-spacing: -0.04em; font-weight: 600; }
.logo-ai  { letter-spacing: -0.06em; font-weight: 600; }
.logo-n   { letter-spacing: -0.08em; font-weight: 600; }
.logo-dot { letter-spacing: -0.11em; font-weight: 500; }
.logo-fm  { letter-spacing: -0.05em; font-weight: 300; }

/* =====================
   GROOVE MAP BUTTON
   ===================== */

/* ── Header chips ──
   Grooves, the mode switch and (inside an episode) the music service control. One look
   for all three: icon then label, the same text colour, and a faint fill at rest so they
   read as buttons without needing a hover. The fill deepens on hover and again when
   pressed. Phones use a taller version (see the phone block near the end of this file). */
#groove-map-btn,
#mode-switch,
#show-service-pill-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;   /* one line box, so the three labels share a baseline */
  color: var(--text-primary);
  background: var(--live-tag-bg);
  border: none;
  border-radius: 8px;
  padding: 4px 10px 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

#groove-map-btn:hover,
#mode-switch:hover,
#show-service-pill-header:hover {
  background: var(--live-tag-hover-bg);
}

#groove-map-btn:active,
#mode-switch:active,
#show-service-pill-header:active {
  background: var(--live-tag-active-bg);
}

#groove-map-btn svg,
#mode-switch svg,
#show-service-pill-header svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
}

/* Extends each chip's tap area to at least 44px tall without moving it */
#groove-map-btn::after,
#mode-switch::after,
#show-service-pill-header::after {
  content: '';
  position: absolute;
  inset: -9px 0;
}

#mode-switch-icon {
  display: flex;
}

/* Grooves: always shown in Explore (even before the first unlock) as a nudge to discover
   them. Hidden on the first-visit screen, before "Start exploring", and in show mode. */
body.intro-active #groove-map-btn {
  display: none;
}

/* The mode switch names where it takes you: "EP. 01" from Explore, "Explore" from the
   episode. Hidden until an episode is on offer, and on the first-visit screen. */
#mode-switch[hidden],
body.intro-active:not(.mode-show) #mode-switch {
  display: none;
}

/* The music service control only exists inside an episode */
#show-service-pill-header {
  display: none;
}

body.mode-show #show-service-pill-header {
  display: flex;
}

/* On the narrowest phones the Grooves label gives way when the episode button is also in the header */
@media (max-width: 359px) {
  #header-right:has(#mode-switch:not([hidden])) .groove-map-btn__label {
    display: none;
  }
}

/* =====================
   PLAYER SEGMENTED CONTROL
   ===================== */

#header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}


/* =====================
   GROOVE MAP MODAL
   ===================== */

#groove-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(ellipse 40% 35% at 50% 38%,
      rgba(30, 30, 30, 0.10) 0%,
      transparent 100%
    ),
    rgba(6, 7, 9, 0.92);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#groove-modal.open {
  display: flex;
  opacity: 0;
}

#groove-modal.visible {
  opacity: 1;
}

#groove-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  padding: 24px 16px 32px;
  position: relative;
  gap: 0;
}

#groove-modal-header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
}

#groove-modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(245, 242, 238, 0.95);
}

#groove-modal-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(245, 242, 238, 0.4);
  margin-top: 3px;
  text-align: left;
}

#groove-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  color: rgba(245, 242, 238, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background 0.2s ease;
  position: absolute;
  top: 24px;
  right: 16px;
}

#groove-modal-close:hover {
  color: rgba(245, 242, 238, 0.9);
  background: rgba(245, 242, 238, 0.08);
}

#groove-modal-close:active {
  background: rgba(245, 242, 238, 0.14);
}

#groove-rock-container {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: visible;
  margin-top: 8px;
}

#groove-rock-canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* ── Card row: prev | card | next ──────────────────────────── */

#groove-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin-top: 20px;
}

/* Caret nav buttons — rounded square, matches send-button register */
#groove-prev,
#groove-next {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(245, 242, 238, 0.13);
  background: rgba(245, 242, 238, 0.07);
  color: rgba(245, 242, 238, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

#groove-prev:hover,
#groove-next:hover {
  background: rgba(245, 242, 238, 0.13);
  color: rgba(245, 242, 238, 0.9);
  border-color: rgba(245, 242, 238, 0.22);
}

#groove-prev:active,
#groove-next:active {
  background: rgba(245, 242, 238, 0.2);
  color: rgba(245, 242, 238, 1);
  transform: scale(0.93);
}

/* ── Zone info card ────────────────────────────────────────── */

#groove-zone-card {
  flex: 1;
  min-width: 0;
  background: rgba(18, 20, 24, 0.96);
  border: 1px solid rgba(245, 242, 238, 0.12);
  border-radius: 16px;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#groove-zone-card.visible {
  opacity: 1;
  pointer-events: auto;
}

#groove-zone-card.locked {
  opacity: 1;
}

#groove-zone-card.visible.locked {
  opacity: 1;
  pointer-events: auto;
}

.groove-card__pretitle {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 242, 238, 0.35);
}

/* Default title — locked state */
.groove-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(245, 242, 238, 0.95);
  line-height: 1.1;
}

/* Discovered title — copper metallic gradient */
#groove-zone-card:not(.locked) .groove-card__title {
  background: linear-gradient(
    105deg,
    #7a4418 0%,
    #c87941 28%,
    #e8a055 50%,
    #c07038 72%,
    #7a4418 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Progress bar ── */
.groove-card__progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Default track — locked state */
.groove-card__progress-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(245, 242, 238, 0.18);
  overflow: hidden;
  box-sizing: border-box;
}

/* Discovered track — copper tint border */
#groove-zone-card:not(.locked) .groove-card__progress-track {
  border-color: rgba(200, 121, 65, 0.35);
}

/* Default fill — white, used for locked unlock-progress */
.groove-card__progress-fill {
  height: 100%;
  border-radius: 4px;
  background: rgba(245, 242, 238, 0.55);
  transition: width 0.4s ease;
  min-width: 0;
}

/* Discovered fill — copper metallic gradient */
#groove-zone-card:not(.locked) .groove-card__progress-fill {
  background: linear-gradient(
    90deg,
    #7a4418 0%,
    #c87941 35%,
    #e8a055 55%,
    #c07038 75%,
    #8a5020 100%
  );
}

.groove-card__progress-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(245, 242, 238, 0.4);
}

.groove-card__cta {
  width: 100%;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(245, 242, 238, 0.1);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.1s ease;
  margin-top: 2px;
  box-sizing: border-box;
  background: rgba(245, 242, 238, 0.12);
  color: rgba(245, 242, 238, 0.9);
}

.groove-card__cta:hover {
  background: rgba(245, 242, 238, 0.18);
}

.groove-card__cta:active {
  transform: scale(0.97);
}



.groove-invoke-msg {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  padding: 8px 0 4px;
  opacity: 0.6;
  clear: both;
}

#chat-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 0;
  background-color: var(--bg-secondary);
  position: relative;
  z-index: 1;
  scrollbar-width: none;
}

#chat-container::-webkit-scrollbar {
  width: 0px;
  display: none;
}

#chat-container:hover,
#chat-container:focus-within {
  /* scrollbar hidden — no hover styles needed */
}

#chat-messages {
  padding: 0 16px;
}

/* =====================
   MESSAGES
   ===================== */

.message {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 18px;
  max-width: 75%;
  line-height: 1.5;
  display: inline-block;
  word-wrap: break-word;
}

.message.user {
  background: var(--user-bubble-bg);
  color: var(--user-bubble-text);
  box-shadow: 0 1px 3px var(--user-bubble-shadow);
  margin-left: auto;
  float: right;
  clear: both;
}

.message.assistant {
  background: var(--assistant-bubble-bg);
  color: var(--assistant-bubble-text);
  box-shadow: 0 1px 3px var(--assistant-bubble-shadow);
  float: left;
  clear: both;
  margin-left: 0;
  margin-right: auto;
}

.message.typing {
  background: var(--assistant-bubble-bg);
  box-shadow: 0 1px 3px var(--assistant-bubble-shadow);
  padding: 12px 16px;
  float: left;
  clear: both;
  margin-left: 0;
  margin-right: auto;
}

.typing-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 20px;
}

.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--text-secondary);
  opacity: 0.2;
  display: block;
}

.message.song {
  background: transparent;
  box-shadow: none;
  max-width: 100%;
  padding: 0;
  float: left;
  clear: both;
  margin-bottom: 24px;
  width: 100%;
}

/* Embed wrapper — clamps height so Spotify can't stretch it */
.song-embed-wrapper {
  width: 100%;
  height: 152px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  position: relative;
  background: var(--skeleton-base);
}

.song-embed-wrapper.youtube {
  height: 280px;
}

/* Skeleton shimmer */
.song-embed-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--skeleton-shine) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.song-embed-wrapper.loaded::before {
  opacity: 0;
  pointer-events: none;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.song-embed {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  opacity: 0;
  transition: var(--embed-transition);
}

.song-embed.loaded {
  opacity: 1;
}

.live-tag {
  display: inline-block;
  font-size: 14px;
  color: var(--live-tag-text);
  background: var(--live-tag-bg);
  padding: 6px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-weight: 500;
  float: right;
  clear: both;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.live-tag:hover { background: var(--live-tag-hover-bg); }

.live-tag a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-tag svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.song-story {
  background: var(--assistant-bubble-bg);
  color: var(--assistant-bubble-text);
  box-shadow: 0 1px 3px var(--assistant-bubble-shadow);
  padding: 12px 16px;
  border-radius: 18px;
  max-width: 75%;
  line-height: 1.5;
  display: inline-block;
  word-wrap: break-word;
  clear: both;
}

/* Factual info about a song — deliberately NOT a chat bubble. A dark, near-opaque card
   (not the 18px pill shape .message uses) with a left accent stripe, like a reference note
   or citation rather than something Efrain said. The solid fill is intentional: this sits
   directly over the animated glow-ring canvas, and a transparent background (the original
   version) failed contrast whenever a ring's glow swept behind the text. */
.song-info {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 75%;
  margin-bottom: 16px;
  padding: 12px 14px;
  display: inline-block;
  word-wrap: break-word;
  float: left;
  clear: both;
  background: rgba(8, 9, 10, 0.9);
  border-radius: 6px;
  border-left: 2px solid rgba(245, 242, 238, 0.18);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.song-info.visible {
  opacity: 1;
}

/* Inline link inside a chat bubble (e.g. "isn't Wikipedia") — matches the surrounding
   bubble text exactly, distinguished only by an underline, not a separate link color. */
.inline-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inline-link:hover {
  opacity: 0.8;
}

#chat-messages::after {
  content: "";
  display: table;
  clear: both;
}

/* =====================
   INTERRUPT / BUTTON BAR
   ===================== */

/*
  Key principle: the footer height NEVER changes.
  The input wrapper and interrupt bar share the same space — they crossfade.
  No max-height tricks, no layout shifts.
*/

/* Input wrapper: opacity-only fade. Height stays constant. */
#input-wrapper {
  transition: opacity 0.3s ease;
}

/* Placeholder: instant hide on submit, fades back in after input is visible */
#user-input::placeholder {
  transition: opacity 0.2s ease;
}
#user-input.hide-placeholder::placeholder {
  opacity: 0;
  transition: opacity 0s;
}

/*
  Interrupt bar: fills the entire footer (inset: 0) and uses the same
  padding as #input-footer so buttons land in exactly the same slot
  the input wrapper occupies — pixel-perfect replacement of the same surface.
*/
#interrupt-bar {
  position: absolute;
  inset: 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* Match the mobile footer padding on mobile — safe area is below the buttons, not inside them */
@media (max-width: 768px) {
  #interrupt-bar {
    padding: 12px 16px;
    padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
    align-items: flex-start;
  }
}

#interrupt-bar.visible {
  opacity: 1;
  pointer-events: auto;
}

#interrupt-question {
  display: none;
}

#interrupt-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}

/* Buttons styled like user chat bubbles */
.interrupt-btn {
  background: var(--user-bubble-bg);
  color: var(--user-bubble-text);
  border: none;
  border-radius: 14px;
  padding: 0 20px;
  height: 44px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  box-shadow: 0 1px 3px var(--user-bubble-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (max-width: 768px) {
  /* A set of short labels (the Spotify / Apple Music / Neither question): each button is
     as wide as its text needs and stays on one line, so three fit in a row at 44px. */
  #interrupt-buttons.is-compact .interrupt-btn {
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 11px 12px;
  }

  .interrupt-btn {
    flex: 1 1 calc(50% - 4px);
    white-space: normal;
    text-align: center;
    min-height: 44px;
    height: auto;
    padding: 11px 16px;
    line-height: 1.3;
    font-size: 14px;
  }
}

.interrupt-btn:nth-child(1) { animation: btnEntrance 0.35s ease both; }
.interrupt-btn:nth-child(2) { animation: btnEntrance 0.35s 0.07s ease both; }
.interrupt-btn:nth-child(3) { animation: btnEntrance 0.35s 0.14s ease both; }

.interrupt-btn:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.interrupt-btn:active {
  box-shadow: none;
  transform: scale(0.97);
}

@keyframes btnEntrance {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================
   INPUT FOOTER
   ===================== */

#input-footer {
  background-color: var(--bg-header-footer);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  padding: 12px 16px;
  /* Extend background into iOS home indicator zone so there's no color gap */
  padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
  z-index: 100;
  flex-shrink: 0;
  border-top: 1px solid var(--border-color);
  /* relative so interrupt-bar can be positioned inside without height change */
  position: relative;
}

#input-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
}

#user-input {
  flex: 1;
  padding: 12px 46px 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  background-color: var(--input-bg);
  color: var(--text-primary);
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  resize: none;
  overflow-y: hidden;
  height: 48px;
  min-height: 48px;
  max-height: 120px;
  line-height: 1.5;
  box-sizing: border-box;
}

#user-input::placeholder {
  color: var(--text-secondary);
  transition: opacity 0.2s ease;
}

/* JS adds this class on submit — hides placeholder instantly while input fades */
#user-input.hide-placeholder::placeholder {
  opacity: 0;
  transition: opacity 0s;
}

#user-input:focus {
  outline: none;
  border-color: var(--input-focus-border);
}

#send-button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background 0.2s ease;
  color: var(--link-color);
}

#send-button:hover {
  color: var(--link-hover);
  background: var(--live-tag-bg);
}

#send-button:active {
  color: var(--link-hover);
  background: var(--live-tag-hover-bg);
}

#send-button svg { width: 18px; height: 18px; }

/* =====================
   RESPONSIVE
   ===================== */

@media (max-width: 768px) {
  #app-card {
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  #header {
    padding: 12px 16px;
  }

  #input-footer {
    padding: 12px 16px;
    padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
  }

  #chat-messages {
    padding: 0 16px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  #header,
  #input-footer {
    padding: 8px 16px;
  }
}

/* Ring/star positioning handled by JS */

/* =====================
   TOAST
   ===================== */
#status-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #0e1012;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.4;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  max-width: calc(100vw - 48px);
  white-space: normal;
}

#status-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast-message {
  flex: 1;
}

.toast-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.toast-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.toast-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 8px;
  flex-shrink: 0;
}

.toast-dismiss:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* =====================
   VOICE EMBED
   ===================== */

/* Voice embed specific tokens — dark mode defaults */
:root {
  --wave-color: rgba(245, 242, 238, 0.45);
  --wave-played-color: rgba(245, 242, 238, 0.88);
  --play-btn-bg: rgba(245, 242, 238, 0.10);
  --play-btn-hover-bg: rgba(245, 242, 238, 0.18);
  --play-btn-stroke: rgba(245, 242, 238, 0.85);
  --voice-embed-bg: rgba(245, 242, 238, 0.06);
}

:root[data-theme="dark"] {
  --wave-color: rgba(245, 242, 238, 0.45);
  --wave-played-color: rgba(245, 242, 238, 0.88);
  --play-btn-bg: rgba(245, 242, 238, 0.10);
  --play-btn-hover-bg: rgba(245, 242, 238, 0.18);
  --play-btn-stroke: rgba(245, 242, 238, 0.85);
  --voice-embed-bg: rgba(245, 242, 238, 0.06);
}

/* Wrapper — matches .message.song spacing */
.voice-embed-wrapper {
  width: 100%;
  float: left;
  clear: both;
  margin-bottom: 24px;
  background: var(--voice-embed-bg);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.voice-embed {
  width: 100%;
  height: 152px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transition: var(--embed-transition);
}

.voice-embed.loaded {
  opacity: 1;
}

/* Waveform layer */
.voice-embed__waveform {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  opacity: 0;
  transition: var(--embed-transition);
}

.voice-embed__waveform.visible  { opacity: 1; }
.voice-embed__waveform.fading   { opacity: 0; transition: var(--embed-transition); }

.voice-embed__canvas {
  display: block;
  flex: 1;
  width: 100%;
  height: 100%;
}

/* Static layer — title + replay button */
.voice-embed__static {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  opacity: 0;
  transition: var(--embed-transition);
  pointer-events: none;
}

.voice-embed__static.visible {
  opacity: 1;
  pointer-events: auto;
}

.voice-embed__title {
  font-size: 11px;
  font-weight: 400;
  font-family: 'Space Mono', monospace;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  user-select: none;
  line-height: 1.6;
  flex: 1;
  text-align: left;
}

.voice-embed__date,
.voice-embed__time {
  display: inline;
}

@media (max-width: 768px) {
  .voice-embed__time {
    display: block;
  }
}

/* Replay button */
.voice-embed__play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--play-btn-bg);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.voice-embed__play-btn:hover {
  background: var(--play-btn-hover-bg);
  transform: translateY(-1px);
}

.voice-embed__play-btn:active {
  transform: scale(0.95);
}

.voice-embed__play-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--play-btn-stroke);
  fill: var(--play-btn-stroke);
  transform: translateX(1px);
}

.voice-embed__tx {
  position: absolute;
  top: 20px;
  left: 16px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wave-color);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  font-family: 'Space Mono', monospace;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  gap: 7px;
}

.voice-embed__tx.active {
  opacity: 1;
  animation: ve-tx-flicker 1s infinite;
}

.voice-embed__tx-square {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--wave-color);
  flex-shrink: 0;
}

.voice-embed__tx.active .voice-embed__tx-square {
  animation: ve-sq-flicker 0.7s infinite;
}

.voice-embed__signal {
  display: block;
  width: 32px;
  height: 10px;
  flex-shrink: 0;
}

/* ── Control bar (episode transmissions only: .voice-embed--controls) ──
   The waveform and title share the top of the card; play/pause, timecodes and the
   scrubber sit in a 56px bar along the bottom. */
.voice-embed--controls .voice-embed__waveform,
.voice-embed--controls .voice-embed__static {
  inset: 0 0 56px 0;
}

.voice-embed--controls .voice-embed__play-btn {
  display: none;   /* the control bar's own button replaces it */
}

.voice-embed--controls .voice-embed__tx {
  top: 14px;
}

/* The waveform is drawn in the space under the label (see WAVE_TOP_GAP in script.js) */
.voice-embed--controls .voice-embed__waveform {
  align-items: flex-end;
}

.voice-embed--controls .voice-embed__canvas {
  flex: none;
}

.voice-embed__controls {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-embed__toggle {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--play-btn-bg);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

/* 44px tap area around the 40px button */
.voice-embed__toggle::after {
  content: '';
  position: absolute;
  inset: -2px;
}

.voice-embed__toggle:hover {
  background: var(--play-btn-hover-bg);
}

.voice-embed__toggle:active {
  transform: scale(0.95);
}

.voice-embed__toggle svg {
  width: 16px;
  height: 16px;
  stroke: var(--play-btn-stroke);
  fill: var(--play-btn-stroke);
  transform: translateX(1px);   /* optical centring for the play triangle */
}

.voice-embed__toggle.is-playing svg {
  fill: none;
  transform: none;
}

.voice-embed__clock {
  flex: none;
  min-width: 4ch;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--show-muted-strong);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.voice-embed__clock:last-child {
  text-align: right;
}

/* Scrubber: a thin track with a 44px-tall touch area, so it is easy to grab with a thumb */
.voice-embed__seek {
  --played: 0%;
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;   /* dragging the thumb must not scroll the page */
  -webkit-user-select: none;
  user-select: none;
}

/* A bigger thumb for fingers */
@media (pointer: coarse) {
  .voice-embed__seek::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -9px;
  }

  .voice-embed__seek::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
}

.voice-embed__seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--wave-played-color) var(--played), var(--wave-color) var(--played));
}

.voice-embed__seek::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--wave-color);
}

.voice-embed__seek::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--wave-played-color);
}

.voice-embed__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;   /* centre the 16px thumb on the 4px track */
  border-radius: 50%;
  border: none;
  background: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.voice-embed__seek::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.voice-embed__toggle:focus-visible,
.voice-embed__seek:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: 2px;
}

@keyframes ve-tx-flicker {
  0%   { opacity: 1; }
  10%  { opacity: 0.15; }
  15%  { opacity: 0.9; }
  25%  { opacity: 0.65; }
  30%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes ve-sq-flicker {
  0%   { opacity: 1; }
  12%  { opacity: 0.1; }
  18%  { opacity: 1; }
  50%  { opacity: 1; }
  62%  { opacity: 0.15; }
  68%  { opacity: 0.85; }
  75%  { opacity: 0.3; }
  82%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ── Intro: Start Exploring button (lives in footer, replaces input on load) ─ */
#intro-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

#intro-start-btn:hover {
  background: var(--live-tag-bg);
  border-color: var(--input-focus-border);
}

#intro-start-btn:active {
  transform: scale(0.98);
}

/* Hide input + send button while intro is active */
body.intro-active #user-input,
body.intro-active #send-button {
  display: none;
}

/* Hide start button once intro is dismissed */
body:not(.intro-active) #intro-start-btn {
  display: none;
}

/* =====================
   INTRO PHOTO GRID
   ===================== */

.intro-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
  padding-bottom: 20px;
  width: 100%;
}

.intro-photo-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0;
  transition: var(--embed-transition);
  background: var(--skeleton-base);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.intro-photo-item.loaded {
  opacity: 1;
}

.intro-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.intro-photo-item:hover img {
  transform: scale(1.04);
}

/* ── Lightbox ── */

.intro-lightbox-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.intro-lightbox-scrim.visible {
  opacity: 1;
}

.intro-lightbox-img {
  max-width: min(560px, 90vw);
  max-height: 70vh;
  width: auto;
  height: auto;
  border-radius: 50px;
  display: block;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.intro-lightbox-caption {
  margin-top: 16px;
  font-size: 16px;
  font-family: 'Space Mono', sans-serif;
  color: rgba(245, 242, 238, 0.88);
  text-align: left;
  pointer-events: none;
  max-width: min(560px, 90vw);
}

/* =====================
   SHOW MODE
   A monthly on-rails episode. body.mode-show swaps the chat thread and text input
   for the show view and a single "next" button. Header, footer and card are shared.
   ===================== */

/*
  Site type scale — four working sizes. Emphasis comes from weight and colour, not size:
    18px/600  titles: episode title, Grooves modal title
    16px      reading text: chat messages, text input, sign-off, form fields
    14px      everything in the interface: buttons (500), playlist rows, info line,
              pill, toggle, tags, toasts, song info
    11px mono labels: edition, transmission titles, Grooves card labels
  Outside the scale by design: the 28px logo, the 22px Grooves card title, and the 8px
  "new transmission" label inside the voice embed.

  Spacing scale — 4 / 8 / 12 / 16 / 24:
    16px  the side gutter everywhere (header, footer, chat, show masthead and stage)
    12px  vertical padding in header and footer; text-to-control gaps
    8px   gaps between related items; padding inside rows
    24px  space between songs / major blocks
  Corners: 8 (small controls), 12 (rows, tags, embeds, toggle), 14 (inputs and buttons),
  18 (chat bubbles), full (pill).
*/
:root {
  /* --text-secondary only reaches 3:1 on a highlighted row or the toggle's fill.
     This lighter step clears WCAG AA (4.5:1) on both. */
  --show-muted-strong: hsla(36, 8%, 72%, 1);
  /* A recessed surface: darker than the card and mostly opaque. In a dark interface,
     lighter reads as raised and darker as set in, so this marks a tray, not a panel. */
  --show-well-bg: rgba(10, 11, 13, 0.62);
}

/* ── Mode switching ── */
#show-view,
#show-next-btn {
  display: none;
}

body.mode-show #chat-container,
body.mode-show #input-wrapper,
body.mode-show #interrupt-bar,
body.mode-show #groove-map-btn {
  display: none;
}

body.mode-show #show-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
  background-color: var(--bg-secondary);
}

body.mode-show #show-next-btn {
  display: flex;
}

/* ── Masthead: episode label, then the title with the facts at its right edge ──
   Set on the recessed surface, like the phone playlist below it, so the episode's own
   chrome reads as one darker band above the content. */
.show-masthead {
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--show-well-bg);
}

.show-edition {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.6;
}

.show-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}

.show-title {
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-primary);
}

/* "4 of 15 songs • 64 min" on desktop; phones show only the minutes here, because the
   song count lives in the playlist bar */
.show-meta {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.show-meta .sep {
  opacity: 0.5;
}

/* The Apple logo glyph only exists in Apple's system fonts, not in Inter. At the label's
   own size it reads small and loose next to "Music", so it is drawn larger, pulled in
   tight, and nudged up to sit on the same optical centre as the word. */
.apple-logo {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  font-size: 1.22em;
  line-height: 1;
  margin-right: calc(0.04em - 2px);
  position: relative;
  top: -0.06em;
}

/* ── Body: playlist + current item ── */
.show-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.show-list {
  overflow-y: auto;
  padding: 8px;
  border-right: 1px solid var(--border-color);
  scrollbar-width: none;
}

.show-list::-webkit-scrollbar {
  display: none;
}

.show-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
  background: transparent;
  border: none;
  border-radius: 8px;   /* the small-control corner, as on the header chips: rows are compact */
  padding: 8px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.15s ease;
}

.show-row:hover {
  background: var(--live-tag-bg);
}

.show-row[aria-current="true"] {
  background: var(--live-tag-hover-bg);
}

/* Number or icon, centred on the two-line title/artist block beside it */
.show-row__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.show-row__num svg {
  display: block;
}

.show-row[aria-current="true"] .show-row__num,
.show-row[aria-current="true"] .show-row__artist {
  color: var(--show-muted-strong);
}

.show-row__text {
  min-width: 0;
}

.show-row__title,
.show-row__artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show-row__title  { font-size: 14px; font-weight: 500; line-height: 20px; }
.show-row__artist { font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-secondary); }

.show-stage {
  min-width: 0;
  padding: 16px;
  overflow-y: auto;
  /* A thin, dark scrollbar: the sign-off and note form can run past the fold */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.show-stage .song-embed-wrapper {
  margin-bottom: 0;
}

.show-stage .voice-embed-wrapper {
  float: none;
  margin-bottom: 0;
}

/* Intro / outro text and the first-visit service question */
.show-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--assistant-bubble-text);
  background: var(--assistant-bubble-bg);
  box-shadow: 0 1px 3px var(--assistant-bubble-shadow);
  border-radius: 18px;
  padding: 12px 16px;
  white-space: pre-line;
}

/* ── Listener note form (under the sign-off) ── */
.show-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.show-note__label {
  font-size: 14px;
  color: var(--show-muted-strong);
}

.show-note__label:not(:first-child) {
  margin-top: 8px;
}

/* 16px text stops iOS Safari zooming the page when a field is focused */
.show-note__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  background-color: var(--input-bg);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

textarea.show-note__input {
  resize: vertical;
  min-height: 96px;
}

.show-note__input::placeholder {
  color: var(--text-secondary);
}

.show-note__input:focus {
  outline: none;
  border-color: var(--input-focus-border);
}

/* Honeypot — off-screen so people never meet it */
.show-note__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.show-note__send {
  align-self: flex-end;   /* on the right, where a send control sits in a message box */
  height: 44px;
  margin-top: 8px;
  padding: 0 20px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.show-note__send:hover {
  background: var(--live-tag-bg);
  border-color: var(--input-focus-border);
}

.show-note__send:disabled {
  cursor: default;
  color: var(--text-secondary);
}

.show-note__send:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: 2px;
}

.show-note__status {
  font-size: 14px;
  line-height: 1.5;
  color: var(--show-muted-strong);
  min-height: 21px;
}

/* ── Final message: parts arrive one after another ──
   Same slow fade the embeds use. initShow adds .is-in to each part in turn. */
.show-reveal {
  opacity: 0;
  transition: var(--embed-transition);
}

.show-reveal.is-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .show-reveal {
    transition: none;
  }
}

/* The final message has no footer button. The footer comes back while the Spotify or
   Apple Music question is open, since that question lives in it. */
body.mode-show.show-at-end:not(.show-picking) #input-footer {
  display: none;
}

/* ── Support link (under the sign-off and note form) ──
   Secondary on purpose: same outline treatment as "Send note". The footer's
   "Explore" button stays the main action. */
/* Centred as a closing block of its own, set a little apart from the form above it */
.show-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  text-align: center;
}

.show-support__line {
  font-size: 14px;
  line-height: 1.5;
  color: var(--show-muted-strong);
}

/* The light, filled button used for the choices in the footer (.interrupt-btn): same
   colours, radius, shadow and press behaviour. With the footer gone on the final message,
   this is the one prominent action on the screen. */
.show-support__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--user-bubble-text);
  text-decoration: none;
  background: var(--user-bubble-bg);
  border-radius: 14px;
  box-shadow: 0 1px 3px var(--user-bubble-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.show-support__link:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.show-support__link:active {
  box-shadow: none;
  transform: scale(0.97);
}

.show-support__link:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: 2px;
}

/* ── Footer button ── */
#show-next-btn {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, opacity 0.3s ease;
}

#show-next-btn:hover {
  background: var(--live-tag-bg);
  border-color: var(--input-focus-border);
}

#show-next-btn:active {
  transform: scale(0.98);
}

/* Service question: fills the footer over the next button, like #interrupt-bar does in Explore */
#show-picker {
  position: absolute;
  inset: 0;
  padding: 12px 16px;
  display: none;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

body.mode-show #show-picker {
  display: flex;
}

#show-picker.visible {
  opacity: 1;
}

body.mode-show.show-picking #show-next-btn {
  opacity: 0;
  pointer-events: none;
}

/* ── Keyboard focus ── */
#mode-switch:focus-visible,
#groove-map-btn:focus-visible,
#show-service-pill-header:focus-visible,
.show-row:focus-visible,
#show-next-btn:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: 2px;
}

/* Playlist fold control — phones only (see the media query below) */
#show-list-toggle {
  display: none;
}

/* ── Phones: playlist stacks on top with a capped height; current item sits under it ── */
@media (max-width: 768px) {
  .show-body {
    display: flex;
    flex-direction: column;
  }

  /* A slim bar above the playlist. Tapping it folds the playlist away or brings it back. */
  #show-list-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--show-muted-strong);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    text-align: left;
  }

  /* The playlist (its bar and its rows) is one recessed tray between the title above and
     the current item below, so the three blocks read as separate layers. The stars are
     dimmed behind it and stay bright behind the content. */
  #show-list-toggle,
  .show-list {
    background: var(--show-well-bg);
  }

  /* "Playlist", then the episode's facts, then the chevron pushed to the right edge */
  .show-list-toggle__meta {
    flex: 1;
    min-width: 0;
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
  }

  /* The song count lives in the playlist bar on phones, so the masthead keeps only the minutes */
  #show-count,
  .show-meta .sep {
    display: none;
  }

  /* Header chips are taller on phones, with larger icons, for thumbs */
  #groove-map-btn,
  #mode-switch,
  #show-service-pill-header {
    padding: 6px 10px 6px 8px;
  }

  #groove-map-btn svg,
  #mode-switch svg,
  #show-service-pill-header svg {
    width: 18px;
    height: 18px;
  }

  #groove-map-btn::after,
  #mode-switch::after,
  #show-service-pill-header::after {
    inset: -7px 0;
  }

  /* "Apple Music" in words (non-Apple phones) is too wide to sit beside the logo with its
     icon, so the icon gives way there */
  #show-service-pill-header.is-long svg {
    display: none;
  }

  #show-service-pill-header.is-long {
    padding-left: 10px;
  }

  #show-list-toggle:focus-visible {
    outline: 2px solid var(--input-focus-border);
    outline-offset: -2px;
  }

  /* Chevron points down when folded (tap to open), up when open (tap to fold) */
  .show-list-toggle__chevron {
    transition: transform 0.2s ease-out;
    transform: rotate(180deg);
  }

  .show-body.list-collapsed .show-list-toggle__chevron {
    transform: rotate(0deg);
  }

  .show-body.list-collapsed .show-list {
    display: none;
  }

  .show-list {
    flex: none;
    max-height: 212px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  /* Text and embeds both start at the top, under the playlist; empty space falls above the button */
  .show-stage {
    flex: 1;
  }

  #show-picker {
    padding: 12px 16px;
    padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
    align-items: flex-start;
  }
}

/* Phones narrower than an iPhone: the header pill drops its icon to keep its breathing room */
@media (max-width: 374px) {
  #show-service-pill-header svg {
    display: none;
  }

  #show-service-pill-header {
    padding-left: 10px;
  }

  #header-right {
    gap: 8px;
  }
}

/* ── Desktop episode layout ──
   The playlist is a full-height sidebar, wide enough for most song titles, and the footer
   button sits under the content column only. #show-view and .show-body are flattened with
   display: contents so the header, masthead, sidebar, content and footer can share one grid
   on the card. The content column at 400px is wider than a phone, so embeds are unaffected. */
@media (min-width: 769px) {
  body.mode-show #app-card {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  body.mode-show #header,
  body.mode-show .show-masthead {
    grid-column: 1 / -1;
  }

  body.mode-show #show-view,
  body.mode-show .show-body {
    display: contents;
  }

  body.mode-show .show-list {
    grid-column: 1;
    grid-row: 3 / 5;   /* runs past the footer, to the bottom of the card */
    min-height: 0;
    background-color: var(--bg-secondary);
  }

  body.mode-show .show-stage {
    grid-column: 2;
    grid-row: 3;
    min-height: 0;
    background-color: var(--bg-secondary);
  }

  body.mode-show #input-footer {
    grid-column: 2;
    grid-row: 4;
  }
}