/* Design tokens: design E, "Editorial + colour covers" (as the iOS app; docs/design.md in
   interrupt-ios). Ink is the only accent: near-black in light mode, near-white in dark, for
   buttons, progress and selection. Surfaces are plain white or black with system greys; the
   generated covers are the only colour. New York (or Source Serif 4) for titles and reading,
   SF for UI, SF Mono for times. Light and dark follow the system. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-elev: #f2f2f7;
  --bg-elev-2: rgba(17, 17, 17, 0.06);
  --glass: #f2f2f7;
  --glass-strong: #f2f2f7;
  --glass-edge: none;
  --fg: #111111;
  --fg-2: #3a3a3c;
  --fg-muted: #6e6e73;
  --fg-faint: #8e8e93;
  --line: #c6c6c8;
  --section-rule: #111111;
  --accent: #111111;
  --accent-strong: #000000;
  --accent-soft: rgba(17, 17, 17, 0.07);
  --accent-fg: #ffffff;
  --cta: #111111;
  --cta-strong: #000000;
  --cta-soft: rgba(17, 17, 17, 0.07);
  --cta-fg: #ffffff;
  --cta-shadow: none;
  /* No colour for success: it's said in words, in the label colour. */
  --success: #111111;
  --success-soft: rgba(17, 17, 17, 0.07);
  --warn: #6e6e73;
  /* Red for danger text: E's record red (#ff3b30) is too light for text on white. */
  --danger: #d70015;
  --danger-soft: rgba(215, 0, 21, 0.08);
  --record: #ff3b30;
  --transcript-past: #767676;
  --transcript-upcoming: #3a3a3c;
  --word-highlight: rgba(17, 17, 17, 0.09);
  --time-chip: rgba(17, 17, 17, 0.07);
  --scrim: rgba(0, 0, 0, 0.32);
  --np-under: #f2f2f7;
  --bar-bg: rgba(255, 255, 255, 0.92);
  --art-placeholder: #1f1f21;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: none;
  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.12);
  --shadow-art: 0 12px 32px rgba(0, 0, 0, 0.18);
  --blur: blur(24px) saturate(180%);
  --max: 620px;
  --tap: 44px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --serif: ui-serif, "New York", "Source Serif 4", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elev: #1c1c1e;
    --bg-elev-2: rgba(255, 255, 255, 0.1);
    --glass: #1c1c1e;
    --glass-strong: #1c1c1e;
    --fg: #f5f5f7;
    --fg-2: #c7c7cc;
    --fg-muted: #98989d;
    --fg-faint: #6c6c70;
    --line: #38383a;
    --section-rule: #f5f5f7;
    --accent: #f5f5f7;
    --accent-strong: #ffffff;
    --accent-soft: rgba(255, 255, 255, 0.12);
    --accent-fg: #000000;
    --cta: #f5f5f7;
    --cta-strong: #ffffff;
    --cta-soft: rgba(255, 255, 255, 0.12);
    --cta-fg: #000000;
    --success: #f5f5f7;
    --success-soft: rgba(255, 255, 255, 0.12);
    --warn: #98989d;
    --danger: #ff6961;
    --danger-soft: rgba(255, 105, 97, 0.14);
    --record: #ff453a;
    --transcript-past: #7c7c80;
    --transcript-upcoming: #c7c7cc;
    --word-highlight: rgba(255, 255, 255, 0.18);
    --time-chip: rgba(255, 255, 255, 0.12);
    --scrim: rgba(0, 0, 0, 0.6);
    --np-under: #000000;
    --bar-bg: rgba(0, 0, 0, 0.92);
    --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.6);
    --shadow-art: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
/* Installed to the Home Screen: no pinch or double-tap zoom (common.js). */
html.standalone { touch-action: pan-x pan-y; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  min-height: 100dvh;
  font-size: 16px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
html.reader-open, html.reader-open body { overflow: hidden; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; color: inherit; }
img { display: block; max-width: 100%; }
svg.icon { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.icon.fill { fill: currentColor; stroke: none; }
h1, h2, h3 { letter-spacing: -0.01em; }
/* Design E: titles and reading in the serif (New York on Apple devices, Source Serif 4
   elsewhere); UI in SF; times in SF Mono. */
h1, h2, .page-title, .large-title, .lib-title, .step-question, .auth-hero h1, #title, .reader-body { font-family: var(--serif); }
.reader-time, time, .time, .mono { font-family: var(--mono); }

.wrap { max-width: var(--max); margin: 0 auto; padding: calc(8px + var(--safe-top)) 16px calc(32px + var(--safe-bottom)); }

/* ---------- Navigation bar ---------- */
/* Back (or the app name) on the left, the page title in the middle, actions on the right.
   Every control is at least 44pt high. */
.nav {
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr); align-items: center; gap: 4px;
  min-height: 52px; padding: 2px 0 10px;
}
.nav-left { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.nav-title { margin: 0; font-size: 17px; font-weight: 600; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.nav-btn {
  appearance: none; border: none; background: transparent; color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tap); min-width: var(--tap); padding: 0 8px; margin: 0 -8px 0 0; border-radius: 12px;
  font: inherit; font-size: 17px; font-weight: 500; white-space: nowrap; max-width: 100%;
}
.nav-left .nav-btn { margin: 0 0 0 -10px; }
.nav-right .nav-btn { margin: 0 -6px 0 0; }
.nav-btn:hover { text-decoration: none; background: var(--accent-soft); }
.nav-btn:active { opacity: 0.6; }
.nav-btn.icon { padding: 0; width: var(--tap); border-radius: 50%; }
.nav-btn.icon svg.icon { width: 24px; height: 24px; }
/* Floating glass controls in the bar, like iOS 26. */
.nav-btn.glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-edge), var(--shadow); color: var(--fg); margin: 0; }
.nav-btn.glass:not(.icon) { padding: 0 16px 0 10px; border-radius: 999px; }
.nav-btn.glass:hover { background: var(--glass-strong); }
.nav-btn.filled { background: var(--cta); color: var(--cta-fg); box-shadow: var(--cta-shadow); margin: 0; }
.nav-btn.filled:hover { background: var(--cta-strong); }
.nav-btn.danger { color: var(--danger); }
.nav-btn .label { overflow: hidden; text-overflow: ellipsis; }
.nav-btn svg.icon.chevron { width: 26px; height: 26px; margin-left: -6px; }
/* The home page: the app name as a large title. */
.nav-home { grid-template-columns: minmax(0, 1fr) max-content; padding-bottom: 14px; }
.nav-home .page-title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--cta); display: grid; place-items: center; color: var(--cta-fg); flex-shrink: 0; }
.brand-mark svg.icon { width: 20px; height: 20px; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--glass); color: var(--fg);
  border-radius: 999px; padding: 12px 18px; font-size: 16px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  transition: transform 80ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.btn:hover { background: var(--bg-elev-2); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--cta); border-color: var(--cta); color: var(--cta-fg); box-shadow: var(--cta-shadow); }
.btn-primary:hover { background: var(--cta-strong); border-color: var(--cta-strong); }
.btn-secondary { background: var(--bg-elev-2); border-color: transparent; color: var(--fg); }
.btn-secondary:hover { background: var(--accent-soft); }
.btn-tinted { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.btn-tinted:hover { background: var(--accent-soft); opacity: 0.85; }
.btn-danger { color: var(--danger); border-color: transparent; background: var(--danger-soft); }
.btn-danger:hover { background: var(--danger-soft); opacity: 0.85; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-pill { border-radius: 999px; }

/* ---------- Surfaces ---------- */
.card, .glass {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: none; border-radius: var(--radius); box-shadow: var(--glass-edge), var(--shadow);
}
.card { padding: 16px; }
.card h2, .card h3 { margin: 0; }
.card h3 { font-size: 17px; }
.muted { color: var(--fg-muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.stack { display: grid; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.hidden { display: none !important; }
/* Voice Ask, when the server has it switched off (see askOn in common.js). */
html:not(.ask-on) .ask-only, html.ask-on .ask-off { display: none !important; }
/* Audio made elsewhere, when the server has it switched off (EXTERNAL_MEDIA_ENABLED). */
html:not(.ext-on) .ext-only { display: none !important; }
/* The New page shows only what the chosen way of making it uses. */
#tab-make[data-mode="read"] .make-only, #tab-make[data-mode="make"] .read-only { display: none !important; }
.add .modes { margin-bottom: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A grouped list of tappable rows (iOS Settings style). */
.list { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: none; border-radius: var(--radius); overflow: hidden; box-shadow: var(--glass-edge), var(--shadow); }
.list-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px;
  color: var(--fg); background: transparent; border: none; font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
.list > * + * { border-top: 0.5px solid var(--line); }
.list-row:hover { background: var(--bg-elev-2); text-decoration: none; }
.list-row .list-text { flex: 1; min-width: 0; }
.list-row .list-text small { display: block; color: var(--fg-muted); font-size: 13px; }
.list-row svg.icon.chevron { color: var(--fg-faint); }
.list-row.danger { color: var(--danger); }

/* ---------- Library ---------- */
.usage { margin: -6px 0 12px; font-size: 14px; color: var(--fg-muted); }
.usage.error { color: var(--danger); }
.episode-list { display: grid; gap: 10px; }
.episode-card {
  display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  color: var(--fg); box-shadow: var(--shadow); min-height: 100px;
}
.episode-card:hover { text-decoration: none; background: var(--bg-elev-2); }
.episode-card:active { transform: scale(0.99); }
.episode-card > div { min-width: 0; }
.artwork {
  width: 76px; height: 76px; border-radius: 12px; background: var(--art-placeholder);
  display: grid; place-items: center; color: #fff; overflow: hidden; flex-shrink: 0;
}
.artwork svg.icon { width: 40%; height: 40%; }
.artwork.kind-text { background: var(--art-placeholder); }
.artwork.kind-text.pasted { background: var(--art-placeholder); }
.artwork.kind-youtube { background: var(--art-placeholder); }
.artwork.kind-podcast { background: var(--art-placeholder); }
.artwork.kind-spotify { background: var(--art-placeholder); }
.artwork.kind-audio { background: var(--art-placeholder); }
.artwork img { width: 100%; height: 100%; object-fit: cover; }
/* Generated covers (js/cover.js): the light one, or in dark mode the dark one with E's 1 px
   inner hairline. */
.artwork.cover { position: relative; }
.artwork.cover svg { width: 100%; height: 100%; display: block; }
.artwork.cover .cover-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .artwork.cover .cover-light { display: none; }
  .artwork.cover .cover-dark { display: block; }
  .artwork.cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); pointer-events: none; }
}
.episode-card h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.episode-card .desc { margin: 0; font-size: 13px; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.episode-card .meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--fg-muted); min-width: 0; }
.episode-card .meta .status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { height: 4px; background: var(--bg-elev-2); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress > span { display: block; height: 100%; background: var(--cta); border-radius: 999px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-elev-2); color: var(--fg-muted); white-space: nowrap; }
.badge.ok { color: var(--success); background: var(--success-soft); }
.badge.warn { color: var(--fg); background: var(--bg-elev); }
.empty { text-align: center; padding: 48px 16px; color: var(--fg-muted); }
.empty .big { font-size: 42px; margin-bottom: 8px; }
.empty .btn { margin-top: 8px; }

/* ---------- Forms ---------- */
label.field { display: grid; gap: 6px; font-size: 14px; color: var(--fg-muted); font-weight: 600; }
input[type="text"], input[type="url"], input[type="email"], input[type="password"], textarea, select, input[type="number"] {
  width: 100%; font: inherit; font-weight: 400; font-size: 17px; color: var(--fg); background: var(--glass); border: 0.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; outline: none; min-height: 48px;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-height: 88px; resize: vertical; }
input[type="file"] { color: var(--fg-muted); font-size: 14px; min-height: 0; }
.upload-progress { display: block; height: 8px; background: var(--bg-elev-2); border-radius: 999px; overflow: hidden; }
.upload-progress > span { display: block; height: 100%; width: 0; background: var(--cta); transition: width 150ms ease; }
.error { color: var(--danger); font-size: 14px; }
.notice { color: var(--success); font-size: 14px; }

/* ---------- Player: Now Playing ---------- */
.player { display: grid; gap: 14px; }
.now-playing { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 6px 0 0; }
.art-wrap { width: min(72vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.art-wrap .artwork {
  width: 100%; height: 100%; border-radius: 18px; box-shadow: var(--shadow-art);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Like Apple Podcasts: the artwork shrinks a little while paused. */
.now-playing.is-paused .art-wrap .artwork { transform: scale(0.86); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.now-playing.no-video .art-wrap { display: none; }
.np-meta { display: grid; gap: 4px; width: 100%; min-width: 0; }
.np-meta h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-sub { margin: 0; font-size: 14px; color: var(--fg-muted); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-sub .badge { font-weight: 600; }

/* The description, folded away: tap to read it. */
.about { border-radius: var(--radius-sm); background: var(--glass); box-shadow: var(--glass-edge); overflow: hidden; }
.about summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--fg-muted); }
.about summary::-webkit-details-marker { display: none; }
.about summary svg.icon { margin-left: auto; transition: transform 200ms ease; color: var(--fg-faint); }
.about[open] summary svg.icon { transform: rotate(180deg); }
.about p { margin: 0; padding: 0 14px 14px; font-size: 15px; color: var(--fg); white-space: pre-wrap; }

/* The scrubber: a thin bar with the played part filled. */
.timeline { display: grid; gap: 2px; padding: 4px 0 0; }
.timeline input[type="range"] {
  --pct: 0%;
  appearance: none; -webkit-appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; padding: 0;
}
.timeline input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(to right, var(--cta) var(--pct), var(--bg-elev-2) var(--pct));
}
.timeline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: var(--fg); border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.timeline input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: var(--bg-elev-2); }
.timeline input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--cta); }
.timeline input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--fg); border: none; }
.timeline input[type="range"]:disabled { opacity: 0.35; cursor: default; }
.times { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: 13px; font-weight: 500; }

/* Transport: skip back, play/pause, skip forward. Big round targets, like Apple Podcasts. */
.transport { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 2px 0; }
.transport button { appearance: none; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform 80ms ease, opacity 120ms ease; }
.transport button:active { transform: scale(0.92); }
.transport button:disabled { opacity: 0.35; cursor: default; transform: none; }
.transport .skip { width: 68px; height: 68px; border-radius: 50%; color: var(--fg); }
.transport .skip:hover { background: var(--bg-elev-2); }
.transport .skip svg.icon { width: 48px; height: 48px; stroke-width: 1.6; }
.transport .play { width: 84px; height: 84px; border-radius: 50%; background: var(--fg); color: var(--bg); box-shadow: none; }
.transport .play:hover { opacity: 0.9; }
.transport .play svg.icon { width: 46px; height: 46px; }
.transport .play.is-loading { background: var(--fg-faint); box-shadow: none; }
/* Playing without a tap was refused: the play button asks for the tap. */
.transport .play.nudge, .reader-mini .play.nudge { background: var(--cta); color: var(--cta-fg); animation: tap-pulse 1.6s ease-out infinite; }
.status-line { margin: -4px 0 0; text-align: center; font-size: 14px; color: var(--fg-muted); min-height: 20px; }

/* Ask: the app's own button, big enough for a glance while driving. */
.btn-ask { min-height: 64px; font-size: 18px; border-radius: 999px; gap: 10px; }
.btn-ask svg.icon { width: 24px; height: 24px; }
.btn-ask.is-live { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.btn-make { min-height: 56px; font-size: 17px; border-radius: 999px; }

/* Chips under the controls: speed, transcript, save note. */
.chips { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chip {
  appearance: none; border: none; background: var(--bg-elev-2); color: var(--fg); cursor: pointer;
  border-radius: 999px; min-height: 40px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums;
}
.chip:hover { opacity: 0.85; }
.chip:active { transform: scale(0.97); }
.chip svg.icon { width: 18px; height: 18px; }
.chip.active { background: var(--cta-soft); color: var(--cta); }
/* Tap-to-insert examples under the Make form's instructions: they wrap, left-aligned. */
#make-hints { justify-content: flex-start; flex-wrap: wrap; margin-top: 8px; }
#make-hints .chip { min-height: 34px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.saved-note { font-size: 13px; color: var(--fg-muted); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Voice chat ---------- */
.voice-panel { display: grid; gap: 12px; }
.voice-status { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.voice-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fg-faint); flex-shrink: 0; }
.voice-dot.listening { background: var(--success); animation: pulse 1.4s ease-in-out infinite; }
.voice-dot.thinking { background: var(--warn); animation: pulse 0.8s ease-in-out infinite; }
.voice-dot.speaking { background: var(--accent); animation: pulse 0.6s ease-in-out infinite; }
.voice-dot.error { background: var(--danger); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } }

.bubble { padding: 10px 14px; border-radius: 18px; max-width: 88%; word-wrap: break-word; white-space: pre-wrap; }
.bubble.user { background: var(--accent); color: var(--accent-fg); justify-self: end; border-bottom-right-radius: 5px; }
.bubble.assistant { background: var(--bg-elev-2); justify-self: start; border-bottom-left-radius: 5px; }
.bubble.partial { opacity: 0.7; font-style: italic; }
.bubble .tag { display: block; font-size: 12px; opacity: 0.75; margin-bottom: 4px; font-weight: 600; }

/* ---------- Video (YouTube) and Spotify's player ---------- */
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow-art); }
.video iframe, .video > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.spotify-embed { height: 152px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.spotify-embed iframe, .spotify-embed > div { display: block; width: 100%; height: 152px; border: 0; }

/* ---------- Reader (synced transcript) ---------- */
/* Collapsed: a card showing a few lines around the one being spoken, like Spotify's lyrics
   card. Expanded: a full-screen sheet with a Done button at the top and the transport pinned
   at the bottom, so it can always be closed and playback controlled without leaving it. */
.reader { display: grid; gap: 8px; grid-template-rows: auto 1fr auto; padding: 12px 16px 12px; }
.reader-head { display: flex; align-items: center; gap: 8px; min-height: var(--tap); }
.reader-head strong { font-size: 17px; }
.reader-head .btn-sm { min-height: 40px; }
.reader-close { display: none; }
.reader-body {
  position: relative; max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  font-size: 19px; line-height: 1.6; padding: 4px 2px 30vh; scroll-padding: 20px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
}
.reader-para { margin: 0 0 16px; }
.reader-time {
  appearance: none; border: none; background: none; padding: 0 8px 0 0; font: inherit; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--fg-faint); cursor: pointer; vertical-align: 2px;
}
.reader-time:hover { color: var(--accent); }
.seg { cursor: pointer; border-radius: 4px; transition: color 200ms ease, background 200ms ease; }
.seg:hover { background: var(--bg-elev-2); }
.seg.read { color: var(--fg-muted); }
.seg.current { color: var(--fg); font-weight: 600; background: var(--cta-soft); box-shadow: 0 0 0 3px var(--cta-soft); }
.reader-foot { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.reader-hint { margin: 0; }
.reader-follow { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 2; box-shadow: var(--shadow); }
.reader:not(.expanded) .reader-follow { bottom: 44px; }
.reader-mini { display: none; }

.reader.expanded {
  position: fixed; inset: 0; z-index: 40; max-width: none; border-radius: 0; border: none; box-shadow: none;
  background: var(--bg-elev); padding: calc(6px + var(--safe-top)) 0 0; gap: 0;
  grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh;
}
.reader.expanded .reader-head { padding: 0 8px 6px 16px; border-bottom: 1px solid var(--line); }
.reader.expanded .reader-close { display: inline-flex; }
.reader.expanded .reader-expand { display: none; }
.reader.expanded .reader-body {
  max-height: none; min-height: 0; padding: 18px 20px 40vh; font-size: 21px; line-height: 1.65;
  -webkit-mask-image: none; mask-image: none;
}
.reader.expanded .reader-para { max-width: var(--max); margin-left: auto; margin-right: auto; }
.reader.expanded .reader-foot { display: none; }
.reader.expanded .reader-follow { bottom: calc(96px + var(--safe-bottom)); }
.reader.expanded .reader-mini {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 16px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--bg-elev);
}
.reader-mini button { appearance: none; border: none; background: transparent; color: var(--fg); cursor: pointer; display: grid; place-items: center; padding: 0; border-radius: 50%; }
.reader-mini button:active { transform: scale(0.92); }
.reader-mini button:disabled { opacity: 0.35; }
.reader-mini .skip { width: 52px; height: 52px; }
.reader-mini .skip svg.icon { width: 36px; height: 36px; stroke-width: 1.6; }
.reader-mini .play { width: 60px; height: 60px; background: var(--fg); color: var(--bg); }
.reader-mini .play svg.icon { width: 30px; height: 30px; }
.reader-mini .ask { width: 52px; height: 52px; background: var(--cta); color: var(--cta-fg); margin-left: 8px; }
.reader-mini .ask svg.icon { width: 26px; height: 26px; }
.reader-mini .ask.is-live { background: var(--fg); color: var(--bg); }

/* ---------- Segmented control ---------- */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--bg-elev-2); border-radius: 12px; padding: 3px; }
.tabs button {
  appearance: none; border: none; background: transparent; color: var(--fg-muted); font: inherit; font-size: 15px; font-weight: 600;
  padding: 6px 8px; border-radius: 9px; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 150ms ease, color 150ms ease;
}
.tabs button svg.icon { width: 18px; height: 18px; }
.tabs button[aria-selected="true"] { background: var(--bg-elev); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
@media (prefers-color-scheme: dark) { .tabs button[aria-selected="true"] { background: #3a3a3c; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } }

/* ---------- Add ---------- */
/* The same grouped rows as the Edit page; each tab is a column of groups. */
.wrap.add { display: grid; gap: 12px; }
.add-panel { display: grid; gap: 8px; min-width: 0; }
.add .agent-row { margin-bottom: 2px; }
.add .group-label { margin-top: 10px; }
.btn-lg { min-height: 54px; font-size: 17px; margin-top: 10px; }
/* The link field: one glass field with the Check button inside it. */
.link-field { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px 6px 6px 14px; border-radius: var(--radius-sm); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-edge), var(--shadow); }
.link-field:focus-within { box-shadow: var(--glass-edge), 0 0 0 3px var(--accent-soft); }
.link-field .lead { display: grid; color: var(--fg-faint); }
.link-field .lead svg.icon { width: 20px; height: 20px; }
.link-field input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 6px; min-height: 0; }
.link-field .btn { flex-shrink: 0; min-height: 42px; padding: 0 18px; box-shadow: none; }
/* What a link turned out to be. */
.preview { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-sm); min-width: 0; }
.preview img, .preview-art { width: 72px; height: 72px; flex-shrink: 0; border-radius: 12px; object-fit: cover; background: var(--art-placeholder); }
.preview img.wide { width: 128px; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; }
.preview-art { display: grid; place-items: center; color: #fff; }
.preview-text { display: grid; gap: 2px; min-width: 0; }
.preview-text strong { font-size: 17px; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.preview-text small { font-size: 14px; color: var(--fg-muted); }
.list-row .tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.list-row .tile.is-loading svg.icon { animation: pulse 1s ease-in-out infinite; }
.list-row .list-text small { line-height: 18px; }
.episode-pick img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.episode-pick .list-text { font-size: 16px; line-height: 21px; }
/* A file row: the whole row opens the picker; × removes an optional file again. */
.file-row { padding: 0; gap: 0; cursor: default; }
.file-row:hover { background: transparent; }
.file-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.file-pick:hover { background: var(--bg-elev-2); }
.file-pick .list-text { min-width: 0; overflow-wrap: anywhere; }
.file-row .file-pick .value { color: var(--accent); font-weight: 600; }
.file-pick:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.file-row .upload-progress { height: 4px; margin-top: 6px; }
.file-clear { appearance: none; border: 0; background: transparent; color: var(--fg-faint); width: var(--tap); height: var(--tap); margin-right: 4px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.file-clear:hover { color: var(--fg); background: var(--bg-elev-2); }
.file-clear svg.icon { width: 16px; height: 16px; stroke-width: 2.6; }
.edit-field textarea.text-input { min-height: 200px; max-height: 50vh; overflow: auto; font-size: 16px; line-height: 23px; color: var(--fg); }
textarea.text-input { min-height: 220px; font-size: 15px; line-height: 1.5; }
@media (max-width: 380px) {
  .preview img.wide { width: 104px; }
  .tabs button svg.icon { display: none; }
}

/* Button groups on the Edit page: two per row on a phone. */
.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions-grid .btn { min-height: 44px; padding-left: 8px; padding-right: 8px; }

/* ---------- Q&A history ---------- */
/* Questions on the right in dusty blue, answers on the left on glass. Each answer lists the
   moments of the recording it came from as orange play chips. Tool calls and events are for
   the app's builders (.dev-only), shown only with body.show-dev. */
.qa { padding-bottom: calc(150px + var(--safe-bottom)); }
.has-mini .wrap.qa { padding-bottom: calc(240px + var(--safe-bottom)); }
.has-mini-video .wrap.qa { padding-bottom: calc(460px + var(--safe-bottom)); }
.qa-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; color: var(--fg); text-decoration: none; margin: 6px 0 14px; min-width: 0; }
.qa-item .artwork { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.qa-item .text { display: flex; flex-direction: column; min-width: 0; }
.qa-item strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-item small { font-size: 13px; color: var(--fg-muted); }
.thread { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qa-divider { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--fg-muted); }
.qa-divider .line { flex-grow: 1; height: 0.5px; background: var(--line); }
.qa-divider svg.icon { width: 16px; height: 16px; }
.thread .q { align-self: flex-end; max-width: 86%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.thread .a { align-self: flex-start; max-width: 92%; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.thread .bubble { max-width: 100%; font-size: 16px; line-height: 22px; }
.thread .bubble.user { background: var(--accent); color: var(--accent-fg); border-radius: 20px 20px 6px 20px; }
.thread .bubble.assistant { background: var(--glass-strong); box-shadow: var(--glass-edge); border-radius: 20px 20px 20px 6px; padding: 12px 14px; }
.replay { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.replay svg.icon { width: 16px; height: 16px; }
.thread .cut { padding: 0 6px; font-size: 13px; color: var(--fg-muted); font-style: italic; }
.ts { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; height: 22px; border-radius: 11px; background: var(--cta-soft); color: var(--cta); font-size: 13px; font-weight: 700; vertical-align: 1px; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.ts svg.icon { width: 11px; height: 11px; }
.sources { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sources-label { padding: 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: var(--fg-muted); }
.source { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--cta-soft); color: var(--fg); text-decoration: none; min-width: 0; }
.source:hover, .ts:hover, .replay:hover { text-decoration: none; }
.source:hover, .source.is-playing { background: var(--time-chip); }
.source.is-playing .quote { color: var(--fg); }
.source .at { flex-shrink: 0; height: 28px; padding: 0 10px 0 8px; border-radius: 14px; background: var(--cta); color: var(--cta-fg); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.source .at svg.icon { width: 12px; height: 12px; }
.source .quote { font-size: 14px; line-height: 19px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dev-only { display: none; }
.show-dev .dev-only { display: revert; }
.thread .tool { align-self: flex-start; max-width: 100%; border: 1px dashed var(--line); border-radius: 10px; padding: 6px 10px; font-family: var(--mono); font-size: 12px; color: var(--fg-muted); min-width: 0; }
.thread .tool summary { cursor: pointer; overflow-wrap: anywhere; }
.thread .tool pre { white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; font-size: 12px; color: var(--fg); max-height: 320px; overflow: auto; }
.thread .event { align-self: center; font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
.dev-switch { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--bg-elev-2); cursor: pointer; }
.dev-switch > span { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.dev-switch strong { font-size: 15px; }
.dev-switch small { font-size: 13px; line-height: 18px; color: var(--fg-muted); }
input[type="checkbox"][role="switch"] { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 51px; height: 31px; margin: 0; border-radius: 16px; background: rgba(120, 120, 128, 0.32); position: relative; cursor: pointer; transition: background 0.2s; }
input[type="checkbox"][role="switch"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
input[type="checkbox"][role="switch"]:checked { background: var(--accent); }
input[type="checkbox"][role="switch"]:checked::after { transform: translateX(20px); }
input[type="checkbox"][role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.composer-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; gap: 8px; max-width: var(--max); margin: 0 auto; padding: 0 12px calc(14px + var(--safe-bottom)); }
.composer-note { align-self: center; margin: 0; padding: 6px 12px; border-radius: 14px; background: var(--glass-strong); box-shadow: var(--glass-edge); font-size: 13px; color: var(--fg-2); }
.composer-note a { font-weight: 600; color: var(--accent); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 26px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-edge), var(--shadow-float); }
.composer textarea { flex-grow: 1; min-width: 0; min-height: 40px; max-height: 160px; padding: 9px 0; border: 0; background: transparent; resize: none; font: inherit; font-size: 17px; color: var(--fg); outline: none; box-shadow: none; }
.send { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 20px; background: var(--cta); color: var(--cta-fg); display: grid; place-items: center; cursor: pointer; }
.send:hover { background: var(--cta-strong); }
.send:disabled { opacity: 0.5; cursor: default; }
.send svg.icon { width: 20px; height: 20px; }
.composer-closed { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-edge), var(--shadow-float); font-size: 15px; line-height: 20px; }
.composer-closed span { flex-grow: 1; }
.composer-closed a { font-weight: 600; color: var(--accent); }
pre.prompt { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; background: var(--bg-elev-2); border: none; border-radius: 12px; padding: 12px; max-height: 60vh; overflow: auto; color: var(--fg); }
.typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); animation: pulse 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }

.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%); background: rgba(28, 28, 30, 0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: none; color: #fff; padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-float); font-size: 15px; z-index: 60; max-width: 90vw; }
.toast a { color: #ffffff; font-weight: 600; text-decoration: underline; }
.toast.error { background: rgba(160, 0, 15, 0.94); }
.has-mini .toast { bottom: calc(var(--mini-bottom) + 86px); }
.has-mini-video .toast { top: calc(16px + var(--safe-top)); bottom: auto; }

/* ---------- Clear Dusk components ---------- */
.large-title { margin: 0 0 12px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.2px; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 2px 0 6px; }
.nav-bar .spacer { flex: 1; }
.nav-bar .group { display: flex; gap: 10px; }
.nav-btn.agent-btn { margin: 0; padding: 0 16px 0 12px; gap: 6px; color: var(--accent); font-size: 15px; font-weight: 600; }
.nav-btn.agent-btn svg.icon { width: 20px; height: 20px; }
.agent-nudge { margin: 14px 0 0; background: var(--bg-elev); }
.agent-nudge a.main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; }
.banner.agent-nudge .tile { background: var(--accent); color: var(--accent-fg); }
.agent-nudge .go { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--cta-fg); margin-left: auto; }
.agent-nudge .go svg.icon { width: 16px; height: 16px; stroke-width: 2.6; }
.agent-row { border-radius: var(--radius-sm); margin-bottom: 14px; }
/* Q&A: the header stays at the top while the thread scrolls, so Now Playing is one tap away. */
.qa .nav { position: sticky; top: 0; z-index: 25; margin: 0 -16px; padding: calc(8px + var(--safe-top)) 16px 10px; background: var(--bar-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.wrap.qa { padding-top: 0; }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn .icon, .btn svg.icon { width: 20px; height: 20px; }

/* Design E's kicker (small caps-like labels) and section headers: a kicker over a 1.5 px rule. */
.kicker { font-family: var(--font); font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); }
.section-head { margin: 14px 0 0; padding-bottom: 6px; border-bottom: 1.5px solid var(--section-rule); font-family: var(--font); font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); }

/* The library's top: account, Connect, the plan on the right; then the date over the title. */
.lib-nav { min-height: 44px; padding: 0; margin: 0 -10px; }
.lib-nav .nav-btn.icon { color: var(--fg); }
.lib-nav .agent-btn { min-height: 44px; padding: 0 10px; color: var(--fg); font-weight: 500; }
.plan-label { min-height: 44px; display: flex; align-items: center; padding: 0 10px; font-size: 13px; color: var(--fg-muted); white-space: nowrap; }
.plan-label:hover { text-decoration: none; color: var(--fg); }
.plan-label.full { color: var(--danger); }
.lib-head { padding-top: 2px; }
.lib-head .large-title { margin: 2px 0 0; }
@media (max-width: 370px) { .lib-nav .agent-btn .label { display: none; } }

/* The bar at the bottom of the library: filter, search, New. */
.has-dock { --mini-bottom: calc(68px + var(--safe-bottom)); }
.has-dock .wrap { padding-bottom: calc(96px + var(--safe-bottom)); }
.has-dock.has-mini .wrap { padding-bottom: calc(170px + var(--safe-bottom)); }
.has-dock.has-mini-video .wrap { padding-bottom: calc(410px + var(--safe-bottom)); }
.has-dock.has-mini-spotify .wrap { padding-bottom: calc(280px + var(--safe-bottom)); }
.lib-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 29; display: flex; gap: 10px; align-items: center; padding: 10px max(16px, calc((100% - var(--max)) / 2 + 16px)) calc(10px + var(--safe-bottom)); background: color-mix(in srgb, var(--bg) 95%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.dock-btn { appearance: none; border: 0; flex-shrink: 0; width: 48px; height: 48px; border-radius: 24px; display: grid; place-items: center; cursor: pointer; background: var(--bg-elev); color: var(--fg); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.dock-btn svg.icon { width: 22px; height: 22px; }
.dock-btn.on { background: var(--cta); color: var(--cta-fg); }
.dock-btn:hover { text-decoration: none; }
.dock-search { flex: 1; min-width: 0; height: 48px; border-radius: 24px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--bg-elev); color: var(--fg-muted); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.dock-search svg.icon { width: 18px; height: 18px; flex-shrink: 0; }
.dock-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--fg); outline: none; padding: 0; min-height: 0; box-shadow: none; }
.dock-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.dock-search:focus-within { box-shadow: 0 0 0 2px var(--cta); }
body.has-dock:not(.has-mini) .toast { bottom: calc(var(--mini-bottom) + 12px); }
body.has-dock:not(.has-mini) .undo { bottom: calc(var(--mini-bottom) + 12px); }
body.has-dock.has-mini .undo { bottom: calc(var(--mini-bottom) + 84px); }
body.has-dock.has-mini-spotify .undo { bottom: calc(var(--mini-bottom) + 176px); }
.bar { height: 6px; border-radius: 3px; background: var(--bg-elev-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 3px; background: var(--cta); transition: width 300ms ease; }
.chevron-faint { color: var(--fg-faint); width: 16px; height: 16px; }

/* Library rows: tap to open; "···" (or a swipe left) reveals Cancel and Delete. */
/* E's row: cover 72 (radius 10), then the kicker, the serif title (2 lines) and the description
   (2 lines). An item being made has its cover under a veil with an ink ring, its title in grey,
   and what's happening in italics. */
.lib-item { position: relative; overflow: hidden; }
.lib-item + .lib-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.5px; background: var(--line); z-index: 2; }
.lib-actions { position: absolute; top: 0; right: 0; bottom: 0; width: 176px; display: flex; }
.lib-actions button { flex: 1; border: 0; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 4px; }
.lib-actions svg.icon { width: 20px; height: 20px; }
.lib-actions .cancel { background: #8e8e93; }
.lib-actions .delete { background: var(--danger); }
.lib-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; min-height: 100px; box-sizing: border-box; padding: 14px 0; background: var(--bg); transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1); touch-action: pan-y; }
.lib-item.open .lib-row { transform: translateX(-176px); }
.lib-item.dragging .lib-row { transition: none; }
.lib-link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 14px; color: var(--fg); align-self: stretch; }
.lib-link:hover { text-decoration: none; }
.lib-link .artwork, .making-art { width: 72px; height: 72px; border-radius: 10px; flex-shrink: 0; }
.lib-text { flex: 1; min-width: 0; display: grid; gap: 3px; align-content: start; }
.lib-kicker { font-family: var(--font); font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-kicker .warn { color: var(--fg-muted); }
.lib-title { font-family: var(--serif); font-size: 20px; line-height: 25px; font-weight: 600; color: var(--fg); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.lib-dek { font-size: 15px; line-height: 20px; color: var(--fg-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lib-dek.status { font-family: var(--serif); font-style: italic; color: var(--fg-muted); }
.lib-item.making .lib-title { color: var(--fg-muted); }
.making-art { position: relative; display: block; }
.making-art .artwork { width: 100%; height: 100%; }
.making-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--bg) 62%, transparent); }
.making-ring, .making-mark { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.making-ring svg { display: block; }
.making-ring circle { fill: none; stroke-width: 3; }
.making-ring .track { stroke: color-mix(in srgb, var(--cta) 18%, transparent); }
.making-ring .arc { stroke: var(--cta); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.making-ring.spinning svg { animation: ring-spin 1s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.making-mark { font-size: 20px; font-weight: 700; color: var(--cta); }
.lib-state { appearance: none; border: 0; cursor: pointer; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--fg); }
button.lib-state:hover { background: var(--bg-elev); }
.lib-state svg.icon { width: 18px; height: 18px; }
.lib-state.done { color: var(--fg-muted); }
.lib-state.done svg.icon { width: 18px; height: 18px; stroke-width: 2.6; }
.lib-more { appearance: none; width: 32px; height: 44px; flex-shrink: 0; border: 0; background: transparent; color: var(--fg-faint); cursor: pointer; display: grid; place-items: center; border-radius: 10px; }
.lib-more:hover { color: var(--fg); background: var(--bg-elev); }
.lib-more svg.icon { width: 18px; height: 18px; }
.lib-empty { padding: 36px 20px; text-align: center; color: var(--fg-muted); display: grid; gap: 12px; justify-items: center; }
.lib-empty .sheet-icon { margin: 0; }
.lib-empty p { margin: 0; font-size: 15px; line-height: 21px; }
.lib-list:empty { display: none; }

/* A glass banner: add the app to the Home Screen. */
.banner { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 14px; border-radius: var(--radius-sm); margin-top: 12px; }
.banner button.main { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; color: var(--fg); text-align: left; cursor: pointer; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.banner .tile { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: var(--cta); color: var(--cta-fg); display: grid; place-items: center; }
.banner .tile svg.icon { width: 20px; height: 20px; }
.banner strong { display: block; font-size: 15px; }
.banner small { display: block; font-size: 13px; color: var(--fg-2); }
.banner .dismiss { appearance: none; border: 0; background: transparent; width: 40px; height: 40px; border-radius: 50%; color: var(--fg-2); cursor: pointer; display: grid; place-items: center; }
.banner .dismiss svg.icon { width: 14px; height: 14px; stroke-width: 2.8; }

/* The mini player at the bottom of the library (E): a 72 px bar with an ink progress line along
   its top, the cover (44), the title in the serif and the time beneath. It plays there, asks
   there (a panel grows up out of it), closes with ×, and grows into Now Playing (tap the cover
   and title, or swipe up). */
.has-mini .wrap { padding-bottom: calc(116px + var(--safe-bottom)); }
.has-mini-video .wrap { padding-bottom: calc(340px + var(--safe-bottom)); }
:root { --mini-bottom: calc(14px + var(--safe-bottom)); }
.mini-player { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--mini-bottom); width: min(var(--max), 100%); box-sizing: border-box; min-height: 72px; z-index: 30; display: flex; align-items: center; gap: 0; padding: 12px 6px 10px 20px; overflow: hidden; background: color-mix(in srgb, var(--bg) 95%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 0.5px solid var(--line); animation: sheet-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; touch-action: none; }
@media (min-width: 660px) { .mini-player { width: calc(var(--max) - 32px); border: 0.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-float); } }
.mini-player.expanding { opacity: 0; transition: opacity 0.15s ease; }
.mini-grabber { display: none; position: absolute; top: 5px; left: 50%; width: 32px; height: 4px; margin-left: -16px; border-radius: 2px; background: var(--fg-faint); opacity: 0.6; }
/* A YouTube video playing in the mini player: a small window floating just above the bar. */
.mini-video { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(var(--mini-bottom) + 82px); width: min(420px, calc(100% - 24px)); aspect-ratio: 16 / 9; min-height: 200px; border-radius: 20px; overflow: hidden; background: #000; box-shadow: var(--shadow-float); animation: sheet-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.mini-video iframe, .mini-video > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mini-video.expanding { opacity: 0; transition: opacity 0.15s ease; }
/* Spotify's compact player, floating the same way. */
.mini-video.mini-spotify { aspect-ratio: auto; min-height: 0; height: 80px; width: min(var(--max), calc(100% - 24px)); border-radius: 14px; background: transparent; }
.has-mini-spotify .wrap { padding-bottom: calc(210px + var(--safe-bottom)); }
.has-mini-spotify .wrap.qa { padding-bottom: calc(330px + var(--safe-bottom)); }
.has-mini-spotify .toast { bottom: calc(var(--mini-bottom) + 176px); }
.has-mini-spotify .undo { bottom: calc(190px + var(--safe-bottom)); }
/* Now Playing sliding up from the mini player (on a tap, or following the finger). */
.np-scrim { position: fixed; inset: 0; z-index: 79; background: var(--scrim); opacity: 0; }
.np-sheet { position: fixed; left: 0; right: 0; top: 0; height: 100vh; z-index: 80; background: var(--bg); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18); will-change: transform; display: flex; justify-content: center; }
.np-sheet .grabber { margin-top: calc(24px + var(--safe-top)); width: 36px; height: 5px; border-radius: 3px; background: var(--fg-faint); opacity: 0.6; }
.mini-player .open { appearance: none; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--fg); padding: 0; }
.mini-player .artwork { position: relative; width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; }
.mini-player .artwork img { border-radius: 8px; }
.mini-badge { display: none !important; position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elev); color: var(--fg); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.mini-badge svg.icon { width: 11px; height: 11px; stroke-width: 2.6; }
.mini-player .text { min-width: 0; display: grid; }
.mini-player .text strong { font-family: var(--serif); font-size: 16px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player .text small { font-size: 13px; line-height: 18px; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player .round { appearance: none; border: 0; background: transparent; cursor: pointer; width: var(--tap); height: var(--tap); flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: var(--fg); }
.mini-player .round:hover { background: var(--bg-elev); }
.mini-player .round svg.icon { width: 22px; height: 22px; }
.mini-player .round.ask { color: var(--fg); }
.mini-player .round.ask.live { background: var(--fg); color: var(--bg); }
.mini-player .round.nudge { background: var(--cta); color: var(--cta-fg); box-shadow: var(--cta-shadow); }
.mini-player .round.close { width: 36px; color: var(--fg-muted); }
.mini-player .round.close svg.icon { width: 16px; height: 16px; stroke-width: 2.6; }
.mini-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; overflow: hidden; }
.mini-progress > span { display: block; height: 100%; width: 0; background: var(--cta); }
.mini-grow { position: fixed; z-index: 80; background: var(--bg); box-shadow: var(--shadow-float); }
.mini-ask { position: fixed; z-index: 31; left: 50%; transform: translateX(-50%); bottom: calc(var(--mini-bottom) + 86px); width: min(var(--max), calc(100% - 24px)); max-height: min(60vh, 440px); display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 26px; background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--glass-edge), var(--shadow-float); transform-origin: 50% 100%; animation: ask-grow 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.mini-ask.closing { animation: ask-shrink 0.24s ease-in both; }
.mini-ask .hint { margin: 0; font-size: 14px; line-height: 19px; color: var(--fg-2); }
/* Now Playing, opened from the mini player: the sheet that slid up is already there, so its
   content just fades in. */
.from-mini .player > :not(.ask-panel) { animation: fade-in 0.22s ease both; }

/* Undo after deleting. */
.undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + var(--safe-bottom)); width: min(420px, calc(100% - 48px)); z-index: 55; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 18px; border-radius: 24px; background: rgba(28, 28, 30, 0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; font-size: 15px; box-shadow: var(--shadow-float); animation: sheet-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.undo span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.undo button { appearance: none; border: 0; min-height: 36px; padding: 0 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.16); color: #ffffff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
body:not(.has-mini) .undo { bottom: calc(24px + var(--safe-bottom)); }
.has-mini-video .undo { top: calc(16px + var(--safe-top)); bottom: auto; }

/* Sheets */
@keyframes sheet-in { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: var(--scrim); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 8px calc(8px + var(--safe-bottom)); animation: fade-in 0.2s ease both; }
.sheet-backdrop.closing { opacity: 0; transition: opacity 0.2s ease; }
.sheet { width: 100%; max-width: 520px; max-height: calc(100dvh - 40px); overflow: auto; border-radius: 36px; padding: 10px 22px 22px; background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--glass-edge), var(--shadow-float); display: grid; gap: 14px; justify-items: center; text-align: center; animation: sheet-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; outline: none; }
.sheet-grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--line); }
.sheet-icon { width: 64px; height: 64px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--cta-soft); color: var(--cta); }
.sheet-icon.blue { background: var(--accent-soft); color: var(--accent); }
.sheet-icon svg.icon { width: 30px; height: 30px; }
.sheet-title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.sheet-body { margin: 0; font-size: 17px; line-height: 23px; color: var(--fg-2); }
.sheet-note { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--bg-elev-2); text-align: left; }
.sheet-note svg.icon { color: var(--accent); }
.sheet-note span { display: grid; gap: 1px; }
.sheet-note strong { font-size: 15px; }
.sheet-note small { font-size: 13px; color: var(--fg-muted); }
.sheet-actions { width: 100%; display: grid; gap: 10px; }
.sheet-actions .btn { min-height: 52px; font-size: 17px; }
.sheet-actions a.btn:hover { text-decoration: none; }
.sheet-backdrop.action { padding: 0 10px calc(10px + var(--safe-bottom)); }
.action-sheet { width: 100%; max-width: 520px; display: grid; gap: 8px; animation: sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.action-group { border-radius: 18px; overflow: hidden; background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); display: grid; }
.action-message { padding: 16px 20px; text-align: center; display: grid; gap: 4px; border-bottom: 0.5px solid var(--line); }
.action-message strong { font-size: 15px; }
.action-message span { font-size: 13px; line-height: 18px; color: var(--fg-muted); }
.action-sheet button { appearance: none; border: 0; min-height: 56px; font: inherit; font-size: 20px; cursor: pointer; background: transparent; }
.action-danger { color: var(--danger); }
.action-cancel { border-radius: 18px; background: var(--bg-elev) !important; color: var(--accent); font-weight: 600 !important; }

/* Home Screen guide */
.guide { width: 100%; display: grid; gap: 14px; text-align: left; }
.guide .tabs { grid-template-columns: repeat(2, 1fr); }
.guide-art { height: 220px; border-radius: 24px; background: var(--bg-elev-2); position: relative; overflow: hidden; display: grid; place-items: center; }
.guide-step { display: flex; gap: 14px; align-items: flex-start; min-height: 88px; }
.guide-step .num { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--cta); color: var(--cta-fg); font-weight: 700; display: grid; place-items: center; }
.guide-step h3 { margin: 0 0 4px; font-size: 20px; line-height: 25px; }
.guide-step p { margin: 0; font-size: 15px; line-height: 20px; color: var(--fg-2); }
.dots { display: flex; justify-content: center; gap: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width 200ms ease; }
.dots i.on { width: 22px; background: var(--cta); }
.guide-nav { display: flex; gap: 10px; }
.guide-nav .btn { min-height: 52px; font-size: 17px; }
.guide-nav .grow { flex: 1; }
.mock { background: var(--bg-elev); border-radius: 18px; box-shadow: var(--shadow); color: var(--fg-2); }
.mock-bar { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 52px; border-radius: 26px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; }
.mock-bar svg.icon { width: 20px; height: 20px; }
.tap-target { width: 46px; height: 46px; border-radius: 50%; background: var(--cta); color: var(--cta-fg); display: grid; place-items: center; box-shadow: 0 0 0 6px var(--cta-soft); animation: tap-pulse 1.6s ease-out infinite; }
@keyframes tap-pulse { 0% { box-shadow: 0 0 0 0 rgba(120, 120, 128, 0.45); } 100% { box-shadow: 0 0 0 16px rgba(120, 120, 128, 0); } }
.mock-list { position: absolute; left: 20px; right: 20px; top: 20px; bottom: 0; border-radius: 18px 18px 0 0; display: grid; align-content: start; padding: 6px 0; font-size: 16px; }
.mock-list div { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 16px; }
.mock-list svg.icon { width: 20px; height: 20px; }
.mock-list .hl { margin: 2px 8px; padding: 0 8px; border-radius: 12px; background: var(--cta-soft); box-shadow: 0 0 0 2px var(--cta); color: var(--fg); font-weight: 600; }
.mock-dialog { width: 280px; padding: 16px; display: grid; gap: 14px; }
.mock-dialog .top { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.mock-dialog .pill { min-height: 34px; padding: 0 14px; border-radius: 17px; background: var(--cta); color: var(--cta-fg); font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 5px var(--cta-soft); }
.mock-app { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.mock-app small { display: block; color: var(--fg-muted); font-size: 13px; }
.app-tile { width: 52px; height: 52px; border-radius: 12px; background: var(--cta); color: var(--cta-fg); display: grid; place-items: center; flex-shrink: 0; }
.app-tile svg.icon { width: 34px; height: 34px; stroke-width: 1.8; }
.home-grid { display: grid; grid-template-columns: repeat(4, 56px); gap: 16px 22px; }
.home-grid i { width: 56px; height: 56px; border-radius: 13px; background: var(--line); }
.home-grid .me { display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--fg); }
.home-grid .me .app-tile { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 0 0 5px var(--cta-soft); }

/* ---------- Now Playing: Ask in place ---------- */
.player-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; padding: 2px 0 4px; touch-action: none; cursor: grab; }
.player-top > :first-child { justify-self: start; }
.player-top > :last-child { justify-self: end; }
.player-top .grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--fg-faint); opacity: 0.6; }
/* Dragging Now Playing down: it lifts off the page as a card and the library's dimmed colour
   shows behind it; let go past a point and it slides away. */
html.np-drag body { background: var(--np-under); }
html.np-drag .wrap.player { background: var(--bg); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18); min-height: 100vh; will-change: transform; }
.pill-group { display: flex; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-edge), var(--shadow); }
.pill-group .nav-btn { margin: 0; color: var(--fg); }
.pill-group .qa { padding: 0 6px 0 14px; gap: 6px; font-size: 15px; font-weight: 600; }
.pill-group .qa svg.icon { width: 20px; height: 20px; }
.btn-ask { background: var(--cta); border-color: var(--cta); color: var(--cta-fg); box-shadow: var(--cta-shadow); min-height: 58px; font-size: 17px; position: relative; z-index: 36; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.btn-ask:hover { background: var(--cta-strong); border-color: var(--cta-strong); }
.btn-ask.is-live, .btn-ask.is-live:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); }
.ask-area { position: relative; }
.ask-panel { position: fixed; z-index: 35; left: 50%; width: min(var(--max), calc(100% - 32px)); transform: translateX(-50%); top: calc(64px + var(--safe-top)); bottom: var(--ask-bottom, 140px); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2); transform-origin: 50% 100%; animation: ask-grow 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes ask-grow { 0% { opacity: 0; transform: translateX(-50%) translateY(70px) scale(0.3, 0.08); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateX(-50%); } }
.ask-panel.closing { animation: ask-shrink 0.24s ease-in both; }
@keyframes ask-shrink { to { opacity: 0; transform: translateX(-50%) translateY(50px) scale(0.6, 0.2); } }
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ask-head .status { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; min-width: 0; }
.ask-head .status span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-head .paused { flex-shrink: 0; min-height: 28px; padding: 0 10px; border-radius: 14px; background: var(--bg-elev-2); font-size: 13px; font-weight: 600; color: var(--fg-2); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ask-head .paused svg.icon { width: 12px; height: 12px; }
.ask-middle { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.ask-orb { width: 112px; height: 112px; flex-shrink: 0; border-radius: 50%; background: var(--cta); color: var(--cta-fg); display: grid; place-items: center; animation: orb-pulse 1.6s ease-out infinite; }
.ask-orb svg.icon { width: 48px; height: 48px; stroke-width: 2.4; }
.ask-orb.speaking { animation-duration: 0.8s; }
@keyframes orb-pulse { 0% { box-shadow: 0 0 0 0 rgba(120, 120, 128, 0.35); } 100% { box-shadow: 0 0 0 26px rgba(120, 120, 128, 0); } }
.ask-middle p { margin: 0; font-size: 15px; line-height: 20px; color: var(--fg-2); }
.ask-note { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--bg-elev-2); font-size: 13px; line-height: 18px; color: var(--fg-2); }
.ask-note svg.icon { width: 16px; height: 16px; flex-shrink: 0; }
.ask-note span { flex: 1; }
.ask-note a { font-weight: 600; }
.ask-open .player .now-playing, .ask-open .player .timeline, .ask-open .player .transport, .ask-open .player .reader:not(.expanded), .ask-open .player .about, .ask-open .player .video, .ask-open .player .spotify-embed { visibility: hidden; }

/* ---------- Plans ---------- */
.section-title { margin: 22px 4px 10px; font-size: 22px; font-weight: 700; }
.usage-block { padding: 16px; display: grid; gap: 14px; }
.usage-block .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.usage-block .head strong { font-size: 17px; }
.tag { min-height: 26px; padding: 0 10px; border-radius: 13px; background: var(--bg-elev-2); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.tag.cta { background: var(--cta); color: var(--cta-fg); font-size: 12px; letter-spacing: 0.3px; min-height: 22px; padding: 0 8px; }
.meter { display: grid; gap: 6px; }
.meter .line { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.meter .line span:last-child { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.meter .bar { height: 8px; border-radius: 4px; }
.plan { position: relative; display: grid; margin-bottom: 14px; }
.plan[aria-checked="true"] { box-shadow: var(--glass-edge), var(--shadow), inset 0 0 0 2.5px var(--cta); }
.plan-head { appearance: none; border: 0; background: transparent; font: inherit; color: var(--fg); text-align: left; cursor: pointer; padding: 18px 16px 10px; display: flex; align-items: center; gap: 12px; border-radius: var(--radius) var(--radius) 0 0; }
.radio { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--fg-faint); display: grid; place-items: center; color: var(--cta-fg); }
.plan[aria-checked="true"] .radio { border: 0; background: var(--cta); }
.radio svg.icon { width: 14px; height: 14px; stroke-width: 3.4; display: none; }
.plan[aria-checked="true"] .radio svg.icon { display: block; }
.plan-name { flex: 1; display: grid; }
.plan-name .t { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; }
.plan-name small { font-size: 15px; color: var(--fg-muted); }
.plan-price { display: grid; justify-items: end; }
.plan-price strong { font-size: 28px; font-weight: 700; }
.plan-price small { font-size: 13px; color: var(--fg-muted); }
.pros-cons { padding: 4px 16px 18px; display: grid; gap: 10px; }
.pros-cons h4 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: var(--success); }
.pros-cons h4.con { color: var(--danger); margin-top: 4px; }
.pc { display: flex; gap: 10px; font-size: 15px; line-height: 20px; }
.pc svg.icon { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2.6; color: var(--success); }
.pc.con svg.icon { color: var(--danger); }
.compare { display: grid; font-size: 15px; }
.compare .r { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 12px 16px; align-items: center; }
.compare .r + .r { border-top: 0.5px solid var(--line); }
.compare .r > :not(:first-child) { text-align: center; }
.compare .r.h { font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.compare .r.h > :last-child { color: var(--cta); }
.compare .r > :last-child { font-weight: 700; }
.compare svg.icon { width: 20px; height: 20px; color: var(--success); stroke-width: 2.6; margin: 0 auto; }
.fine { margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--fg-muted); }
.plans-cta { display: grid; gap: 8px; margin: 18px 0 22px; }
.plans-cta .btn { min-height: 56px; font-size: 17px; }
.row-icon { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; color: #fff; background: #8e8e93; }
.row-icon svg.icon { width: 18px; height: 18px; }
.row-icon.blue { background: var(--accent); color: var(--accent-fg); }

/* ---------- Sign in ---------- */
.auth { max-width: 440px; margin: 0 auto; display: grid; gap: 20px; padding-top: 24px; }
.auth-hero { display: grid; justify-items: center; gap: 12px; text-align: center; }
.app-icon { width: 84px; height: 84px; border-radius: 20px; background: var(--cta); color: var(--cta-fg); display: grid; place-items: center; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.app-icon svg.icon { width: 54px; height: 54px; stroke-width: 1.8; }
.auth-hero h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; }
.auth-hero p { margin: 0; font-size: 17px; line-height: 23px; color: var(--fg-2); }
.promise { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; justify-self: stretch; }
.promise li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 20px; color: var(--fg); }
.promise li svg.icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); }
.auth .tabs { grid-template-columns: repeat(2, 1fr); }
.fields { border-radius: var(--radius-sm); overflow: hidden; }
.fields label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; font-size: 17px; }
.fields label + label { border-top: 0.5px solid var(--line); }
.fields label > span:first-child { width: 88px; flex-shrink: 0; color: var(--fg); }
.fields input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 12px 0; min-height: 0; border-radius: 0; }
.hint { margin: -12px 0 0; padding: 0 16px; font-size: 13px; line-height: 18px; color: var(--fg-muted); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--fg-muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 0.5px; background: var(--line); }
.auth .btn-lg { margin-top: 0; }
.link-btn { appearance: none; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 4px; min-height: var(--tap); }
.link-btn:hover { text-decoration: underline; }
.auth .foot { margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--fg-muted); }
.free-card { padding: 14px 16px; display: grid; gap: 10px; }
.free-card h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; color: var(--fg-muted); }

/* ---------- Connect an agent ---------- */
.lede { margin: -4px 4px 14px; font-size: 16px; line-height: 22px; color: var(--fg-2); }
.panel { padding: 16px; display: grid; gap: 12px; margin-bottom: 14px; }
.panel > *, .two > * { min-width: 0; }
.panel { grid-template-columns: minmax(0, 1fr); }
.panel h2 { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.panel .note { margin: 0; font-size: 13px; line-height: 18px; color: var(--fg-muted); }
/* "Set up with your agent": a menu under its button. The panel it sits in is lifted above the
   panels after it (each glass panel is its own stacking context). */
.panel.has-menu { position: relative; z-index: 5; }
.panel .note a { color: var(--accent); font-weight: 600; }
.menu-wrap { position: relative; }
.menu-caret { display: inline-grid; place-items: center; margin-left: 2px; transition: transform 150ms ease; }
.menu-caret svg.icon { width: 18px; height: 18px; }
[aria-expanded="true"] .menu-caret { transform: rotate(180deg); }
.menu {
  /* Solid: inside a glass panel a second backdrop blur has nothing to blur, so glass would
     let the text behind show through. Centred under the button, as wide as it up to 360px. */
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(100%, 360px); z-index: 10;
  padding: 6px; display: grid; gap: 2px; border-radius: var(--radius-sm); background: var(--bg-elev);
  box-shadow: var(--glass-edge), var(--shadow-float); animation: fade-in 0.12s ease both;
}
.menu-item {
  appearance: none; border: 0; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 8px 10px; border-radius: 10px; text-decoration: none;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--accent-soft); text-decoration: none; outline: none; }
.menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.menu-item .ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.menu-item .ic svg.icon { width: 17px; height: 17px; }
.menu-text { flex: 1; min-width: 0; }
.menu-text strong { display: block; font-size: 16px; font-weight: 600; }
.menu-text small { display: block; font-size: 13px; line-height: 18px; color: var(--fg-muted); }
.menu-go { display: grid; place-items: center; color: var(--fg-faint); }
.menu-go svg.icon { width: 16px; height: 16px; }
.menu-sep { height: 0.5px; margin: 4px 10px; background: var(--line); }
.menu-label { padding: 6px 10px 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--fg-muted); }
.code-row code { font-family: var(--mono); font-size: 14px; color: var(--accent); word-break: break-all; }
.code-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--bg-elev-2); }
.code-row code { flex: 1; min-width: 0; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-row .btn { min-height: 34px; padding: 0 12px; font-size: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.two .btn { min-height: 44px; font-size: 15px; padding: 0 10px; white-space: nowrap; }
.steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: 12px; font-size: 15px; line-height: 21px; }
.steps li::before { content: counter(step); counter-increment: step; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.steps { counter-reset: step; }
.ability { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ability .ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--cta-soft); color: var(--cta); }
.ability .ic.blue { background: var(--accent-soft); color: var(--accent); }
.ability .ic.red { background: var(--danger-soft); color: var(--danger); }
.ability .ic svg.icon { width: 18px; height: 18px; }
.ability strong { display: block; font-size: 16px; }
.ability small { display: block; font-size: 13px; line-height: 18px; color: var(--fg-muted); }
.says { display: grid; gap: 8px; margin-bottom: 14px; }
.says div { justify-self: start; max-width: 340px; padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--accent-soft); font-size: 15px; line-height: 21px; }
.monogram { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--accent-fg); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.monogram img { width: 100%; height: 100%; object-fit: cover; }
.btn-danger-soft { min-height: 36px; padding: 0 14px; font-size: 15px; background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.consent-icons { display: flex; align-items: center; justify-content: center; gap: 10px; }
.consent-icons .app-tile, .consent-icons .monogram { width: 64px; height: 64px; border-radius: 16px; font-size: 26px; }
.consent-icons .app-tile svg.icon { width: 42px; height: 42px; }
.consent-icons > svg.icon { color: var(--fg-faint); }
.perm { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 16px; }
.perm svg.icon { width: 20px; height: 20px; color: var(--accent); }
.perm.add svg.icon { color: var(--cta); }
.perm.del svg.icon { color: var(--danger); }
.perm + .perm { border-top: 0.5px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .ask-panel, .ask-panel.closing, .ask-orb, .sheet, .action-sheet, .sheet-backdrop, .undo, .tap-target, .lib-row, .mini-player, .mini-video, .mini-ask, .mini-ask.closing, .from-mini .player > :not(.ask-panel) { animation: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-dot, .typing i { animation: none; }
  .seg, .art-wrap .artwork { transition: none; }
}

/* ---------- Edit ---------- */
/* Grouped like iOS Settings: a label above each group, a note below it, rows with a small
   tinted icon tile. */
.edit { display: grid; gap: 8px; }
.edit-hero { display: grid; justify-items: center; gap: 6px; padding: 14px 0 10px; }
.edit-art { position: relative; cursor: pointer; border-radius: 28px; }
.edit-art .artwork { width: 132px; height: 132px; border-radius: 28px; box-shadow: var(--shadow-art); }
.edit-art .artwork img { border-radius: 28px; }
.edit-art:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.edit-badge { position: absolute; right: -6px; bottom: -6px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elev); color: var(--accent); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.edit-badge svg.icon { width: 17px; height: 17px; }
.edit-art-link { margin-top: 8px; font-size: 17px; font-weight: 600; color: var(--accent); cursor: pointer; }
.edit-meta { margin: 0; font-size: 13px; color: var(--fg-muted); }
.group-label { margin: 14px 0 0; padding: 0 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: var(--fg-muted); }
.group-foot { margin: 0; padding: 0 16px; font-size: 13px; line-height: 18px; color: var(--fg-muted); }
.group-foot.center { text-align: center; }
.edit-field { display: grid; gap: 3px; padding: 10px 16px 12px; cursor: text; }
.edit-field > span { font-size: 13px; color: var(--fg-muted); }
.edit-field input, .edit-field textarea { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; min-height: 0; border-radius: 0; font: inherit; font-size: 17px; line-height: 22px; color: var(--fg); resize: none; overflow: hidden; outline: none; }
.edit-field textarea { color: var(--fg-2); min-height: 22px; }
.list-row .tile { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.list-row .tile svg.icon { width: 18px; height: 18px; }
.list-row.danger .tile { background: var(--danger-soft); color: var(--danger); }
.list-row.static { cursor: default; }
.list-row.static:hover { background: transparent; }
.list-row.ok .tile { background: var(--success-soft); color: var(--success); }
.list-row.warn .tile { background: var(--bg-elev); color: var(--fg); }
.list-row .list-text { font-size: 17px; }
.list-row .value { font-size: 15px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.list-row:disabled { cursor: default; opacity: 0.55; }
.list-row:disabled:hover { background: transparent; }
.delete-group { margin-top: 22px; }
.delete-group .list-row { justify-content: center; gap: 8px; font-size: 17px; font-weight: 600; }
.sheet.wide { justify-items: stretch; text-align: left; background: var(--bg); }
.sheet.wide .sheet-title, .sheet.wide .sheet-grabber { justify-self: center; }
.paste-area { min-height: 40vh; font-size: 15px; }
.transcript-list { max-height: 55vh; overflow: auto; display: grid; gap: 2px; }
.transcript-list .line { display: flex; gap: 12px; padding: 8px 6px; border-radius: 10px; color: var(--fg); text-decoration: none; font-size: 15px; line-height: 21px; }
.transcript-list .line:hover { background: var(--bg-elev-2); }
.transcript-list .at { flex-shrink: 0; min-width: 44px; font-weight: 600; color: var(--cta); font-variant-numeric: tabular-nums; }

/* ---------- voices ---------- */
.voices .list-row { min-height: 56px; }
.voices .list-row[disabled] { opacity: 0.45; cursor: not-allowed; }
.voice-row { cursor: pointer; }
.play-chip { width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--cta-soft); color: var(--cta); cursor: pointer; }
.play-chip svg.icon { width: 18px; height: 18px; }
.play-chip:active { transform: scale(0.94); }
.rec-row .rec-time { font-size: 17px; font-weight: 600; color: var(--danger); }
.rec-dot { width: 14px; height: 14px; margin: 0 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0; animation: pulse 1s ease-in-out infinite; }
.rec-bar { height: 4px; margin: 0 16px; border-radius: 2px; background: var(--bg-elev-2); overflow: hidden; }
.rec-bar span { display: block; height: 100%; background: var(--danger); transition: width 0.1s linear; }
.read-aloud { margin: 0; padding: 14px 16px 16px; font-size: 19px; line-height: 28px; color: var(--fg); }
.list > .rec-bar, .list > .read-aloud { border-top: 0; }
.lang-tabs { width: 100%; grid-template-columns: repeat(2, 1fr); }
.consent-row { align-items: flex-start; gap: 14px; cursor: pointer; }
.consent-row .list-text { font-size: 15px; line-height: 20px; }
.consent-row .list-text small { margin-top: 4px; }
.consent-row input[disabled] { opacity: 0.6; cursor: default; }

/* The voice picker (Make audio). */
.voice-pick { width: 100%; text-align: left; }
.voice-pick .list-row { gap: 12px; }
.voice-pick .radio { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.voice-pick .radio svg.icon { width: 14px; height: 14px; opacity: 0; }
.voice-pick [aria-checked="true"] .radio { background: var(--cta); border-color: var(--cta); color: var(--cta-fg); }
.voice-pick [aria-checked="true"] .radio svg.icon { opacity: 1; }
.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
#voice-chip { margin-right: auto; max-width: 50%; }
#voice-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Up Next ---------- */
/* At the top of the library: what plays after the current item, in order. Rows are dragged by
   the grip to reorder, tapped to play now, and × takes one out. */
.upnext { margin: 0; }
.upnext-head { display: flex; align-items: baseline; gap: 6px; }
.upnext-head h2 { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.upnext-head .count { color: var(--fg-faint); }
.upnext-head .spacer { flex: 1; }
.upnext-head button { appearance: none; border: 0; background: transparent; padding: 14px 0 6px 14px; margin: -14px 0 -6px; line-height: 13px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--fg); }
.upnext-head button:hover { text-decoration: underline; }
.upnext-row { position: relative; display: flex; align-items: center; gap: 2px; min-height: 52px; background: var(--bg); transition: transform 160ms ease; }
.upnext-row + .upnext-row { border-top: 0.5px solid var(--line); }
.upnext-row.dragging { transition: none; z-index: 3; box-shadow: var(--shadow-float); }
.upnext-row .grip { width: 28px; height: 44px; margin-left: -6px; flex-shrink: 0; display: grid; place-items: center; color: var(--fg-faint); cursor: grab; touch-action: none; }
.upnext-row .grip svg.icon { width: 18px; height: 18px; stroke-width: 2.6; }
.upnext-row .open { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; text-align: left; color: var(--fg); flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.upnext-row .artwork { width: 36px; height: 36px; border-radius: 7px; flex-shrink: 0; }
.upnext-row strong { flex: 1; min-width: 0; font-family: var(--serif); font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upnext-row small { flex-shrink: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--fg-muted); }
.upnext-row .remove { appearance: none; border: 0; background: transparent; width: 40px; height: 44px; margin-right: -10px; flex-shrink: 0; display: grid; place-items: center; color: var(--fg-faint); cursor: pointer; border-radius: 10px; }
.upnext-row .remove:hover { color: var(--fg); background: var(--bg-elev); }
.upnext-row .remove svg.icon { width: 16px; height: 16px; stroke-width: 2.6; }
/* Choices in an action sheet (Play next, Add to Up Next, Delete). */
.action-item { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--accent); }
.action-item.action-danger { color: var(--danger); }
.action-item + .action-item { border-top: 0.5px solid var(--line); }
.action-item svg.icon { width: 22px; height: 22px; }
/* Now Playing: the item that follows this one. */
.upnext-line { margin: -4px 0 0; font-size: 14px; color: var(--fg-muted); display: flex; justify-content: center; align-items: center; gap: 6px; min-width: 0; }
.upnext-line:hover { text-decoration: none; }
.upnext-line svg.icon { width: 16px; height: 16px; flex-shrink: 0; }
.upnext-line strong { font-weight: 600; color: var(--fg-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Make a podcast (Add page) ---------- */
.tabs.lengths { grid-template-columns: repeat(5, 1fr); }
.tabs.subtabs { grid-template-columns: repeat(2, 1fr); }
.source-row .list-text { overflow-wrap: anywhere; }
.source-row .file-clear { flex-shrink: 0; }
.paste-box { display: grid; }
.paste-box > * + * { border-top: 0.5px solid var(--line); }
.paste-actions { display: flex; justify-content: flex-end; padding: 10px 16px 12px; }
#make-link { margin-top: 8px; }
#tab-make select { width: auto; max-width: 60%; margin-left: auto; min-height: 36px; padding: 4px 8px; border-radius: 10px; font: inherit; font-size: 16px; }
#make-sources-foot.error { color: var(--danger); }
.group-foot.warn-note { color: var(--warn); }

/* ---------- Tone (custom voices) ---------- */
.tone-presets { justify-content: flex-start; flex-wrap: wrap; }
.tone-strength input[type=range], .tone-adjust input[type=range] { flex: 0 1 55%; accent-color: var(--cta); }
.tone-adjust { margin-top: 8px; }
.tone-adjust > summary { cursor: pointer; font-weight: 600; color: var(--cta); padding: 6px 2px; list-style: none; }
.tone-adjust > summary::-webkit-details-marker { display: none; }
.tone-hear { display: flex; justify-content: flex-start; margin-top: 8px; }
.add .make-about { margin-top: 8px; white-space: nowrap; }
/* Asking by typing (js/text-ask.js): the voice panel's place and shape, with a thread and a box. */
.text-ask .text-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.text-ask .text-thread:empty { flex: 1; }
.text-ask .bubble { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
.text-ask .bubble.q { align-self: flex-end; background: var(--cta); color: var(--cta-fg); border-bottom-right-radius: 6px; }
.text-ask .bubble.a { align-self: flex-start; background: var(--bg-elev-2); color: var(--fg); border-bottom-left-radius: 6px; }
.text-ask .bubble .ts { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; margin: 0 1px; border: 0; border-radius: 8px; background: var(--cta-soft); color: var(--cta); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.text-ask .bubble .ts svg.icon { width: 11px; height: 11px; }
.text-ask .bubble.typing { display: flex; gap: 4px; padding: 14px; }
.text-ask .bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); animation: orb-pulse 1.2s ease-in-out infinite; }
.text-ask .bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.text-ask .bubble.typing span:nth-child(3) { animation-delay: 0.4s; }
.text-ask .text-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.text-ask .text-compose { display: flex; align-items: flex-end; gap: 8px; }
.text-ask .text-compose textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 11px 14px; border-radius: 22px; border: 1px solid var(--line, rgba(0, 0, 0, 0.1)); background: var(--bg); color: var(--fg); font: inherit; font-size: 16px; line-height: 20px; }
.text-ask .text-compose .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex-shrink: 0; }
/* The New page, one question per screen (js/make.js). */
.new-steps { max-width: 560px; margin: 0 auto; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.new-steps .step { display: grid; gap: 10px; min-width: 0; animation: fade-in 0.2s ease both; }
.new-steps .step-question { margin: 6px 0 4px; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.new-steps .nav-right .step-count { font-size: 14px; font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.step-dots { display: flex; justify-content: center; gap: 6px; margin: -4px 0 10px; }
.step-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width 0.2s ease, background 0.2s ease; }
.step-dots span.done { background: var(--fg-faint); }
.step-dots span.on { width: 20px; background: var(--cta); }
.step-bar { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.step-bar #step-next { flex: 1; }
/* New with something playing: the mini player sits just above the step bar. */
.has-steps { --mini-bottom: calc(74px + env(safe-area-inset-bottom)); }
.has-steps.has-mini .new-steps { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
.has-steps.has-mini-video .new-steps { padding-bottom: calc(410px + env(safe-area-inset-bottom)); }
.has-steps.has-mini-spotify .new-steps { padding-bottom: calc(280px + env(safe-area-inset-bottom)); }
.step-bar #step-back { flex: 0 0 auto; min-width: 88px; }
.step-bar .invisible { display: none; }
.big-field textarea.big-input { width: 100%; min-height: 96px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 17px; line-height: 23px; resize: vertical; }
.quiet-link { justify-self: center; margin-top: 6px; padding: 6px 8px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--fg-2); text-decoration: none; cursor: pointer; }
.quiet-link:hover { color: var(--fg); }
.way-cards { display: grid; gap: 12px; }
.way-card { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 18px; border: 2px solid transparent; border-radius: var(--radius-sm); text-align: left; font: inherit; color: var(--fg); cursor: pointer; }
.way-card.on { border-color: var(--cta); }
.way-card[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.way-card .way-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--cta-soft); color: var(--cta); }
.way-card .way-icon svg.icon { width: 22px; height: 22px; }
.way-card .list-text strong { display: block; font-size: 18px; line-height: 24px; }
.way-card .list-text small { display: block; margin-top: 3px; }
.way-card .estimate { color: var(--fg); font-weight: 600; }
.way-card .why-not { color: var(--fg-muted); }
.new-steps details.more { border-radius: var(--radius-sm); }
.new-steps details.more > summary { cursor: pointer; padding: 10px 2px; font-weight: 600; color: var(--cta); list-style: none; }
.new-steps details.more > summary::-webkit-details-marker { display: none; }
.new-steps details.more > summary::before { content: '+ '; }
.new-steps details.more[open] > summary::before { content: '− '; }
.new-steps details.more[open] { display: grid; gap: 8px; }
.review-row { text-align: left; }
.review-row .list-text small { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2); }
.review-row .list-text { overflow-wrap: anywhere; }
#make-error .fix-link { margin-left: 8px; }
.new-steps .list-row.disabled { opacity: 0.55; cursor: not-allowed; }
.new-steps .fell-back { margin: 0; padding: 10px 16px; }
.new-steps .heads-up { display: grid; gap: 8px; justify-items: start; margin: 4px 0; padding: 12px 16px; border-radius: 14px; background: var(--bg-elev-2); }
.new-steps .heads-up.hidden { display: none; }
.new-steps .heads-up p { margin: 0; }
.new-steps .lang-row select { width: 100%; }

/* ---------- Design E: Now Playing (E4/E5) and Ask (E6) ---------- */
/* The top: grabber, close, the Transcript / Cover control, and Q&A and more. */
.player-top { position: relative; }
.player-top .grabber { position: absolute; top: 0; left: 50%; margin-left: -18px; }
.player-top .pill-group { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.player-top .nav-btn { color: var(--fg); }
.np-tabs { display: flex; width: clamp(120px, calc(100vw - 180px), 190px); height: 32px; padding: 2px; box-sizing: border-box; border-radius: 9px; background: rgba(118, 118, 128, 0.12); }
.np-tabs.hidden { display: none; }
.np-tabs button { appearance: none; flex: 1; border: 0; border-radius: 7px; background: transparent; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
.np-tabs button[aria-selected="true"] { background: var(--bg); font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
@media (prefers-color-scheme: dark) { .np-tabs { background: rgba(118, 118, 128, 0.24); } .np-tabs button[aria-selected="true"] { background: #636366; } }

/* The episode: its kicker over the serif title. With the cover large, centred. */
.np-sub { font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); gap: 6px; }
.np-sub a { color: var(--fg-muted); }
.np-sub .badge, .np-sub .badge.warn { padding: 0; border-radius: 0; background: none; font-size: inherit; font-weight: 600; color: inherit; }
.np-sub > * + *::before { content: "·"; margin-right: 6px; }
.np-meta { gap: 3px; }
.np-meta h2 { font-size: 22px; line-height: 28px; font-weight: 600; }
.art-wrap { width: min(80vw, 313px); }
.art-wrap .artwork { border-radius: 14px; box-shadow: none; }
.now-playing.is-paused .art-wrap .artwork { transform: none; box-shadow: none; }
.about { background: var(--bg-elev); box-shadow: none; }

/* The controls: scrubber (a 3 px track with a 13 px ink knob), mono times, the transport row
   (speed, back 15, play, forward 30, Up Next) and the ink Ask button. */
.np-controls { display: grid; gap: 6px; }
.status-line { margin: 0; font-size: 13px; min-height: 0; }
.status-line:empty { display: none; }
.timeline { gap: 0; padding: 0; }
.timeline input[type="range"] { height: 21px; }
.timeline input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right, var(--cta) var(--pct), var(--line) var(--pct)); }
.timeline input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -5px; background: var(--cta); box-shadow: none; }
.timeline input[type="range"]::-moz-range-track { height: 3px; background: var(--line); }
.timeline input[type="range"]::-moz-range-progress { height: 3px; }
.timeline input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; background: var(--cta); }
.times { font-family: var(--mono); font-size: 12px; font-weight: 400; }
.transport { justify-content: space-between; gap: 0; min-height: 64px; padding: 0; }
.transport .skip { width: 52px; height: 52px; }
.transport .skip svg.icon { width: 32px; height: 32px; stroke-width: 1.7; }
.transport .play { width: 64px; height: 64px; background: var(--cta); color: var(--cta-fg); }
.transport .play svg.icon { width: 30px; height: 30px; }
.transport .speed { width: 44px; height: 44px; border-radius: 50%; color: var(--fg); font-family: var(--mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.transport .speed.active { background: var(--bg-elev); }
.transport .speed.hidden { visibility: hidden; display: grid; }
.upnext-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--fg-faint); position: relative; }
.upnext-btn.has-next { color: var(--fg); }
.upnext-btn.has-next::after { content: ""; position: absolute; top: 9px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--cta); }
.upnext-btn svg.icon { width: 24px; height: 24px; }
.upnext-btn:hover { background: var(--bg-elev); text-decoration: none; }
.btn-ask, .btn-ask:hover { min-height: 50px; border-radius: 12px; font-size: 17px; box-shadow: none; margin-top: 4px; }
.btn-ask svg.icon { width: 20px; height: 20px; }
.btn-ask.is-live, .btn-ask.is-live:hover { box-shadow: none; }
.btn-make { min-height: 50px; border-radius: 12px; }
.chips { justify-content: flex-start; flex-wrap: wrap; }
.chips:not(:has(> :not(.hidden):not(:empty))) { display: none; }
.chip { min-height: 32px; padding: 4px 12px; font-size: 13px; background: var(--bg-elev); }
.saved-note { margin-left: auto; }

/* Transcript view: the page is the episode block, then the transcript filling the space, then
   the controls; only the transcript scrolls. */
html.np-text body { overflow: hidden; }
.np-text .wrap.player { display: flex; flex-direction: column; gap: 0; height: 100vh; height: 100dvh; box-sizing: border-box; padding-bottom: calc(10px + var(--safe-bottom)); }
.np-text .wrap.player > * { flex-shrink: 0; }
.np-text .now-playing { grid-template-columns: 64px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: 14px; padding: 6px 0 14px; border-bottom: 0.5px solid var(--line); }
.np-text .now-playing.no-video { grid-template-columns: minmax(0, 1fr); }
.np-text .art-wrap { width: 64px; }
.np-text .art-wrap .artwork { border-radius: 10px; }
.np-text .np-sub { justify-content: flex-start; }
.np-text .np-meta h2 { font-size: 19px; line-height: 24px; }
.np-text .about { display: none; }
.np-text .video { margin-bottom: 10px; }
.np-text .chips { padding-top: 10px; }
.np-text .wrap.player > .reader { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; position: relative; }
.np-text .reader .reader-head, .np-text .reader .reader-foot { display: none; }
.np-text .reader-body { flex: 1; max-height: none; min-height: 0; padding: 18px 0 90px; font-size: 20px; line-height: 30px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); }
.np-text .reader-follow { bottom: 70px; }
.np-text .np-controls { padding-top: 4px; }
html:not(.np-text) .reader { display: none; }

/* The transcript: a 56 px time gutter, each paragraph in the serif 20/30. Heard paragraphs are
   grey, the current one is in the text colour with the spoken word marked, upcoming a softer
   grey. */
.reader-para { margin: 0 0 18px; }
.reader-para.timed { display: grid; grid-template-columns: 56px minmax(0, 1fr); }
.reader-para .reader-time { justify-self: end; align-self: start; height: auto; min-height: 0; font-family: var(--mono); padding: 0 12px 0 0; font-size: 11px; line-height: inherit; font-weight: 500; vertical-align: baseline; color: var(--fg-muted); }
.reader-para.past, .reader-para.past .reader-time { color: var(--transcript-past); }
.reader-para.upcoming { color: var(--transcript-upcoming); }
.reader-para.current { color: var(--fg); }
.reader-para.current .reader-time { color: var(--fg); font-weight: 700; }
.seg.read, .seg.current { color: inherit; font-weight: inherit; background: none; box-shadow: none; }
.seg:hover { background: var(--word-highlight); }
.seg .word { background: var(--word-highlight); border-radius: 4px; padding: 1px 3px; margin: 0 -3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Ask (E6): a sheet over Now Playing. The question in serif italics, the answer in the serif
   18/29, its times as chips that play that moment. */
.ask-panel { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 16px; box-shadow: 0 0 0 0.5px var(--line), 0 12px 40px rgba(0, 0, 0, 0.18); padding: 16px 20px; }
.ask-head strong { font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.ask-head .paused { background: none; padding: 0; min-height: 0; font-weight: 400; color: var(--fg-muted); }
.ask-head .paused svg.icon { display: none; }
.text-ask .text-thread { gap: 14px; }
.text-ask .bubble { max-width: none; padding: 0; border-radius: 0; background: none; color: var(--fg); white-space: pre-wrap; }
.text-ask .bubble.q { align-self: stretch; background: none; color: var(--fg); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 31px; }
.text-ask .bubble.q::before { content: "\201C"; }
.text-ask .bubble.q::after { content: "\201D"; }
.text-ask .bubble.a { align-self: stretch; background: none; font-family: var(--serif); font-size: 18px; line-height: 29px; padding-top: 14px; border-top: 0.5px solid var(--line); }
.text-ask .bubble.a.typing { border-top: 0; padding: 4px 0; }
.text-ask .bubble .ts { height: 26px; padding: 0 7px; margin: 0 2px; border-radius: 6px; background: var(--time-chip); color: var(--fg); font-family: var(--mono); font-size: 13px; font-weight: 600; vertical-align: 1px; gap: 3px; }
.text-ask .bubble .ts svg.icon { width: 9px; height: 9px; }
.text-ask .text-starters .chip { min-height: 44px; font-size: 15px; font-weight: 400; padding: 0 14px; }
.text-ask .text-compose textarea { border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.text-ask .text-compose .btn { width: 46px; height: 46px; min-height: 46px; border-radius: 12px; }

/* ---------- Design E: New (E2/E3) ---------- */
/* The top: Cancel (Back after the first step), the step's title, "2 of 5". */
.new-steps .nav { padding-bottom: 6px; }
.nav-btn.nav-text { color: var(--fg); font-weight: 400; padding: 0 10px; }
.nav-btn.nav-text svg.icon { width: 22px; height: 22px; margin-left: -6px; }
#step-back.invisible { display: none; }
#step-back:not(.invisible):not(.hidden) + .cancel { display: none; }
.new-steps .nav-right .step-count { font-size: 13px; font-weight: 400; color: var(--fg-muted); }
.step-dots { display: none; }
.new-steps .step-question { font-size: 28px; line-height: 33px; letter-spacing: -0.2px; margin: 6px 0 2px; }
.new-steps .section-head { padding: 0 0 6px; margin: 12px 0 0; }
.new-steps .sources-head:has(+ .hidden) { display: none; }

/* Lists are rows on the page, not cards: 0.5 px separators, a trailing ink check when chosen. */
.new-steps .list { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; overflow: visible; }
.new-steps .section-head + .list > :first-child { border-top: 0; }
.new-steps .list-row { padding-left: 0; padding-right: 0; }
.new-steps .list-row:hover { background: transparent; }
.new-steps .list-row .tile { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-elev); color: var(--fg); }
.new-steps .list-row.ok .tile, .new-steps .list-row.warn .tile { background: var(--bg-elev); color: var(--fg); }
.new-steps .voice-pick .radio { order: 9; width: 24px; height: 24px; border: 0; background: none; color: var(--fg); }
.new-steps .voice-pick [aria-checked="true"] .radio { background: none; color: var(--fg); }
.new-steps .voice-pick .radio svg.icon { width: 20px; height: 20px; stroke-width: 2.6; }
.new-steps .voice-pick [aria-checked="true"] .radio svg.icon { display: block; opacity: 1; }
.new-steps .group-foot { padding: 0; }
.new-steps .voice-pick [aria-checked="true"] .list-text { font-weight: 600; }
.new-steps .voice-pick [aria-checked="true"] .list-text small { font-weight: 400; }

/* Sources: the title in the serif, what it is in mono. */
.new-steps .source-row .list-text { font-family: var(--serif); font-size: 16px; line-height: 21px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.new-steps .source-row .list-text small { font-family: var(--mono); font-size: 12px; font-weight: 400; white-space: normal; }
.new-steps .big-field textarea.big-input { border-radius: 12px; background: var(--bg-elev); border-color: transparent; }

/* How: two rows, a serif title and what it does. */
.way-cards { gap: 0; }
.way-card { padding: 16px 0; border: 0; border-radius: 0; background: none; align-items: flex-start; }
.way-card + .way-card { border-top: 0.5px solid var(--line); }
.way-card .way-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-elev); color: var(--fg); }
.way-card .way-icon svg.icon { width: 20px; height: 20px; }
.way-card .list-text { flex: 1; min-width: 0; }
.way-card .list-text strong { font-family: var(--serif); font-size: 22px; line-height: 27px; font-weight: 600; }
.way-card .list-text small { font-size: 15px; line-height: 20px; color: var(--fg-2); }
.way-card .estimate { font-size: 13px !important; color: var(--fg-muted) !important; font-weight: 400; }
.way-check { flex-shrink: 0; width: 24px; height: 27px; display: grid; place-items: center; color: var(--fg); visibility: hidden; }
.way-check svg.icon { width: 20px; height: 20px; stroke-width: 2.6; }
.way-card.on .way-check { visibility: visible; }

/* Style: 60 px rows with the cover the podcast will get (44), the name in the serif. */
#make-styles .list-row { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
#make-styles .artwork { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; }
#make-styles .list-text { font-family: var(--serif); font-size: 18px; line-height: 22px; }
#make-styles .list-text small { font-family: var(--font); font-size: 13px; line-height: 17px; }

/* Length: a segmented control with the choice in ink. */
.tabs.lengths { height: 36px; padding: 2px; gap: 0; border-radius: 9px; background: rgba(118, 118, 128, 0.12); margin-top: 4px; }
.tabs.lengths button { min-height: 0; height: 32px; border-radius: 7px; font-size: 14px; color: var(--fg); }
.tabs.lengths button[aria-selected="true"] { background: var(--cta); color: var(--cta-fg); box-shadow: none; }
@media (prefers-color-scheme: dark) { .tabs.lengths { background: rgba(118, 118, 128, 0.24); } }
.new-steps details.more > summary { color: var(--fg); }

/* The foot: one 52 px ink button. */
.step-bar { padding-left: 20px; padding-right: 20px; }
.step-bar #step-next { min-height: 52px; border-radius: 12px; box-shadow: none; font-size: 17px; }

/* ---------- Design E: the other pages (account, Plans, Voices, sign-in, connect, consent, Q&A,
   Edit, 404) ---------- */
/* Back and other top buttons: plain text and icons, not glass pills. */
.nav-btn.glass { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--fg); }
.nav-btn.glass:not(.icon) { padding: 0 10px 0 4px; }
.nav-btn:hover, .nav-btn.glass:hover { background: var(--bg-elev); }
.nav-btn.filled { box-shadow: none; }

/* Buttons: radius 12, flat; chips and small buttons stay rounder. */
.btn { border-radius: 12px; }
.btn-primary, .btn-primary:hover { box-shadow: none; }
.btn-sm { border-radius: 10px; }
.btn.btn-pill { border-radius: 999px; }

/* Cards (a plan, the 404, a Connect block): the surface grey, no glass. */
.card, .glass { background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 16px; }

/* Section labels: a kicker over a 1.5 px rule. */
.group-label { margin: 22px 0 0; padding: 0 0 6px; border-bottom: 1.5px solid var(--section-rule); font-family: var(--font); font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); }
.group-foot { padding: 0; }

/* Lists are rows on the page with 0.5 px separators, not cards. Forms keep their fields on the
   surface grey. */
.list:not(:has(.edit-field)) { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; overflow: visible; }
.list:not(:has(.edit-field)) > .list-row { padding-left: 0; padding-right: 0; }
.list:not(:has(.edit-field)) > .list-row:not(:disabled):not(.disabled):hover { background: transparent; opacity: 0.8; }
.list:not(:has(.edit-field)) > .list-row:is(:disabled, .disabled):hover { background: transparent; }
.list:has(.edit-field) { background: var(--bg-elev); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 12px; }
.list-row .tile { background: var(--bg-elev); color: var(--fg); }
.list-row .row-icon { background: var(--bg-elev); color: var(--fg); }

/* Plans: pros and cons in words and greys, not green and red. */
.pros-cons h4, .pros-cons h4.con { color: var(--fg-muted); }
.pc svg.icon { color: var(--fg); }
.pc.con svg.icon { color: var(--fg-muted); }

/* Q&A: each question in serif italics, its answer in the serif under a rule, as in Ask. */
.thread .q { align-self: stretch; max-width: 100%; align-items: flex-start; }
.thread .a { align-self: stretch; max-width: 100%; }
.thread .bubble.user { background: none; color: var(--fg); padding: 0; border-radius: 0; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 29px; }
.thread .bubble.assistant { background: none; box-shadow: none; border-radius: 0; padding: 12px 0 0; border-top: 0.5px solid var(--line); font-family: var(--serif); font-size: 18px; line-height: 29px; }
.ts { border-radius: 6px; background: var(--time-chip); color: var(--fg); font-family: var(--mono); font-weight: 600; }
.source { background: var(--bg-elev); }
.source .at { border-radius: 6px; font-family: var(--mono); }

/* New, step 1: what it's made from. A note under the question, then three ways to add a source:
   a link field, a PDF, and "Paste text", which opens a labelled box with its word count. */
.step-note { margin: -2px 0 4px; font-size: 15px; line-height: 20px; color: var(--fg-2); }
.link-row { cursor: text; }
.link-row .link-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; min-height: 0; box-shadow: none; font: inherit; font-size: 17px; color: var(--fg); outline: none; }
.link-row .link-input::placeholder { color: var(--fg); }
.link-row:focus-within .link-input::placeholder { color: var(--fg-faint); }
.link-row .btn { min-height: 34px; padding: 4px 14px; }
.link-row .link-field { flex: 1; min-width: 0; display: grid; gap: 1px; }
.link-row .link-hint { font-size: 13px; line-height: 17px; color: var(--fg-muted); }
.text-panel { display: grid; gap: 8px; margin-top: 4px; }
.text-panel.hidden { display: none; }
.text-label { font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); padding-bottom: 6px; border-bottom: 1.5px solid var(--section-rule); }
.text-panel textarea.big-input { min-height: 200px; font-size: 16px; line-height: 23px; }
.text-count { margin: 0; font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.text-actions { display: flex; justify-content: flex-end; gap: 8px; }
#add-ways > * + * { border-top: 0.5px solid var(--line); }

/* The Library's title row: the title, and "New podcast" (ink, labelled) at the right. The bottom
   bar is filter and search only. */
.lib-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn.new-podcast { flex-shrink: 0; min-height: 36px; padding: 0 14px 0 12px; border-radius: 18px; font-size: 15px; gap: 6px; margin-top: 4px; }
.btn.new-podcast svg.icon { width: 17px; height: 17px; }
.btn.new-podcast:hover { text-decoration: none; }
.new-steps .step > * { min-width: 0; }

/* The library row of the item playing: "PLAYING ·" with the equaliser glyph, in the label colour. */
.now-playing-mark { display: none; }
.lib-item:is(.is-playing, .is-current) .now-playing-mark { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; color: var(--fg); }
.lib-item.is-playing .lib-kicker { color: var(--fg); }
.now-playing-mark svg.icon { width: 12px; height: 12px; stroke-width: 2.4; }

/* The app shell (js/app.js): the mini player stays in the page across views, but Now Playing
   has its own controls, so there it's out of sight (and takes no room). */
body.np-view .mini-player, body.np-view .mini-video, body.np-view .mini-ask { display: none; }
body.np-view.has-mini .wrap, body.np-view.has-mini-video .wrap, body.np-view.has-mini-spotify .wrap { padding-bottom: calc(32px + var(--safe-bottom)); }