/* Added by scripts/build_web.py - not part of the product UI. */
.replay-banner {
  padding: 0.6rem var(--gap);
  background: var(--accent-dim);
  color: var(--text);
  font-size: 0.85rem;
  animation: enter 0.45s var(--ease) both;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.replay-banner a { color: var(--accent); white-space: nowrap; }
/* The banner learns more after load ("Recorded on CPU...", the live status)
   and grew a line, shifting the whole app down 21 px. Reserve the two lines
   it ends up with on any screen wide enough to show the full text. */
@media (min-width: 40rem) {
  .replay-banner { min-height: calc(3em + 1.2rem); }
}
.replay-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* On a phone the banner is pure overhead above the thing people came to
   see. body is overflow:hidden, so every line it takes comes straight out
   of the caption area - measured at 144px of captions on a 844px screen.
   Drop the explanation and the replay-speed control; the link stays. */
@media (max-width: 40rem) {
  .replay-banner { font-size: 0.78rem; padding: 0.45rem var(--gap); }
  .replay-long { display: none; }
  .replay-controls { display: none; }
  /* The idle hint shares a short panel with the header; keep it whole. */
  .empty { padding: 1rem; font-size: 0.85rem; }
}

/* The live page reports what it is doing - downloading the model, listening,
   transcribing - because the first run fetches tens of megabytes and silence
   during that is indistinguishable from a broken page. */
#live-status { color: var(--accent); }
.live-banner { background: var(--accent-dim); }

/* Source picker, injected by live.js next to the language select. */
.live-source {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.live-source select {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}
/* The header is filled in after load: the provider badge ("connecting…"
   becomes "WASM (your CPU)") and the language list. On a phone the header
   wraps, so either one growing pushed the whole app down. Both get their
   final width from the first paint. */
#device { min-width: 12.5em; justify-content: center; }
#language { width: 14.5em; max-width: 100%; }
.live-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
  margin-top: 0.4rem;
}
.live-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.2s linear;
}