/* ============================================================
   NOVIRA — chapter-audio.css
   Listen mode for the Katha reader.

   Two surfaces:
     .nv-listen        the entry affordance, sitting in the chapter header
     .nv-audio         the docked player that takes over the bottom edge

   It borrows the reader's existing material (near-black, 24px blur, purple
   #a855f7 accent) on purpose. A player that introduces its own visual language
   would read as a widget bolted onto the page instead of part of it.
   ============================================================ */

.nv-audio-scope {
  /* Accent ramp — same purple the reader already uses for emphasis. */
  --nv-a-500: #a855f7;
  --nv-a-400: #b782f8;
  --nv-a-300: #c7a4fa;
  --nv-a-soft: rgba(168, 85, 247, 0.14);
  --nv-a-line: rgba(168, 85, 247, 0.32);

  --nv-ink:    rgba(255, 255, 255, 0.95);
  --nv-ink-2:  rgba(255, 255, 255, 0.72);
  --nv-ink-3:  rgba(255, 255, 255, 0.52);
  --nv-line:   rgba(255, 255, 255, 0.10);
  --nv-fill:   rgba(255, 255, 255, 0.06);
  --nv-fill-2: rgba(255, 255, 255, 0.11);

  --nv-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layering: dock sits above the reader's sticky header (1000) and its
     floating utility bar (1001), below the signup toast (9000). */
  --nv-z-dock: 1200;
  --nv-z-sheet: 1210;
}

/* ── Entry point ──────────────────────────────────────────── */

.nv-listen {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px 0 16px;
  border: 1px solid var(--nv-a-line);
  border-radius: 999px;
  background: var(--nv-a-soft);
  color: var(--nv-ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.25s var(--nv-ease), border-color 0.25s var(--nv-ease), transform 0.25s var(--nv-ease);
}

.nv-listen:hover { background: rgba(168, 85, 247, 0.22); border-color: rgba(168, 85, 247, 0.5); }
.nv-listen:active { transform: translateY(1px); }
.nv-listen[disabled] { opacity: 0.5; cursor: not-allowed; }
.nv-listen svg { width: 18px; height: 18px; flex: none; }

.nv-listen-note {
  display: block;
  margin-top: 10px;
  color: var(--nv-ink-3);
  font-size: 0.8rem;
}

/* ── Read-along ───────────────────────────────────────────── */
/* A wash, not a marker in the margin: the paragraph itself lights up so the
   eye lands on the words rather than on a rule beside them. */

.nv-audio-line {
  border-radius: 8px;
  /* Loose prose is highlighted through an inline wrapper, so the wash has to
     survive line wrapping instead of only decorating the first fragment. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 0.45s var(--nv-ease), box-shadow 0.45s var(--nv-ease);
}

.nv-audio-line-active {
  background-color: rgba(168, 85, 247, 0.13);
  /* Bleeds the wash past the text box without changing layout. */
  box-shadow: 0 0 0 10px rgba(168, 85, 247, 0.13);
}

/* ── Dock ─────────────────────────────────────────────────── */

.nv-audio {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--nv-z-dock);
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid var(--nv-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(101%);
  transition: transform 0.45s var(--nv-ease);
  font-family: 'Inter', sans-serif;
  color: var(--nv-ink);
}

.nv-audio.is-open { transform: translateY(0); }

/* Push the reader's floating pill above the dock so neither covers the other. */
body.nv-audio-open .reader-bar {
  bottom: calc(var(--nv-audio-height, 84px) + 20px);
}

/* ── Scrubber ─────────────────────────────────────────────── */
/* Full-bleed along the dock's top edge. The whole strip is the hit area, so a
   thumb on a phone can land anywhere in a 20px band and still seek. */

.nv-audio-scrub {
  position: relative;
  height: 20px;
  margin-top: -10px;
  cursor: pointer;
  touch-action: none;
}

.nv-audio-scrub-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 3px;
  background: var(--nv-fill-2);
  transition: height 0.2s var(--nv-ease), top 0.2s var(--nv-ease);
}

.nv-audio-scrub-buffer,
.nv-audio-scrub-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
}

.nv-audio-scrub-buffer { background: rgba(255, 255, 255, 0.16); }
.nv-audio-scrub-fill { background: var(--nv-a-500); }

.nv-audio-scrub-head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--nv-ease), transform 0.2s var(--nv-ease);
  pointer-events: none;
}

.nv-audio-scrub:hover .nv-audio-scrub-rail,
.nv-audio-scrub:focus-visible .nv-audio-scrub-rail,
.nv-audio-scrub.is-dragging .nv-audio-scrub-rail { height: 6px; top: 7px; }

.nv-audio-scrub:hover .nv-audio-scrub-head,
.nv-audio-scrub:focus-visible .nv-audio-scrub-head,
.nv-audio-scrub.is-dragging .nv-audio-scrub-head { opacity: 1; transform: scale(1); }

.nv-audio-scrub:focus-visible { outline: none; }
.nv-audio-scrub:focus-visible .nv-audio-scrub-fill { background: var(--nv-a-300); }

/* ── Transport row ────────────────────────────────────────── */

.nv-audio-row {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nv-audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--nv-fill);
  color: var(--nv-ink);
  cursor: pointer;
  transition: background 0.2s var(--nv-ease), color 0.2s var(--nv-ease), transform 0.2s var(--nv-ease);
}

.nv-audio-btn:hover { background: var(--nv-fill-2); }
.nv-audio-btn:active { transform: scale(0.94); }
.nv-audio-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.nv-audio-btn svg { width: 20px; height: 20px; }

.nv-audio-btn-play {
  width: 52px;
  height: 52px;
  background: var(--nv-a-500);
  color: #14041f;
}
.nv-audio-btn-play:hover { background: var(--nv-a-400); }
.nv-audio-btn-play svg { width: 24px; height: 24px; }

.nv-audio-btn.is-on { background: var(--nv-a-soft); color: var(--nv-a-300); }

.nv-audio-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.nv-audio-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nv-audio-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--nv-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nv-audio-time {
  flex: none;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--nv-ink-2);
}

.nv-audio-rate {
  flex: none;
  min-width: 52px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--nv-line);
  border-radius: 999px;
  background: transparent;
  color: var(--nv-ink-2);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 0.2s var(--nv-ease), border-color 0.2s var(--nv-ease);
}
.nv-audio-rate:hover { color: var(--nv-ink); border-color: rgba(255, 255, 255, 0.24); }

/* ── Settings sheet ───────────────────────────────────────── */

.nv-audio-sheet {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--nv-ease);
}

.nv-audio-sheet.is-open { grid-template-rows: 1fr; }
.nv-audio-sheet-inner { overflow: hidden; min-height: 0; }
.nv-audio-sheet-pad { padding: 16px 0 4px; border-bottom: 1px solid var(--nv-line); }

.nv-audio-group + .nv-audio-group { margin-top: 18px; }

.nv-audio-group-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nv-ink-3);
}

.nv-audio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nv-audio-chip {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--nv-line);
  border-radius: 999px;
  background: transparent;
  color: var(--nv-ink-2);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--nv-ease), color 0.2s var(--nv-ease), border-color 0.2s var(--nv-ease);
}

.nv-audio-chip:hover { color: var(--nv-ink); border-color: rgba(255, 255, 255, 0.24); }

.nv-audio-chip[aria-pressed="true"],
.nv-audio-chip[aria-checked="true"] {
  background: var(--nv-a-soft);
  border-color: var(--nv-a-line);
  color: #fff;
}

.nv-audio-chip small {
  margin-left: 6px;
  font-weight: 500;
  color: var(--nv-ink-3);
}

.nv-audio-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--nv-ink);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.nv-audio-toggle-hint {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--nv-ink-3);
}

.nv-audio-switch {
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--nv-fill-2);
  position: relative;
  transition: background 0.25s var(--nv-ease);
}

.nv-audio-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s var(--nv-ease);
}

.nv-audio-toggle[aria-pressed="true"] .nv-audio-switch { background: var(--nv-a-500); }
.nv-audio-toggle[aria-pressed="true"] .nv-audio-switch::after { transform: translateX(18px); }

/* ── Status line ──────────────────────────────────────────── */

.nv-audio-status {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 12px;
  font-size: 0.8rem;
  color: var(--nv-ink-2);
  display: none;
}

.nv-audio-status.is-shown { display: block; }
.nv-audio-status[data-tone="error"] { color: #fca5a5; }

/* ── Focus ────────────────────────────────────────────────── */

.nv-audio-scope :focus-visible {
  outline: 2px solid var(--nv-a-300);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .nv-audio-row { gap: 10px; padding: 8px 12px 12px; }
  .nv-audio-time { display: none; }
  .nv-audio-sub { font-size: 0.74rem; }
  .nv-audio-btn { width: 40px; height: 40px; }
  .nv-audio-btn-play { width: 48px; height: 48px; }
  .nv-audio-skip-back { display: none; }
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .nv-audio,
  .nv-audio-sheet,
  .nv-audio-line,
  .nv-audio-scrub-rail,
  .nv-audio-scrub-head,
  .nv-audio-btn,
  .nv-audio-chip,
  .nv-audio-switch,
  .nv-audio-switch::after {
    transition-duration: 0.01ms;
  }
  .nv-audio { transform: translateY(0); display: none; }
  .nv-audio.is-open { display: block; }
}