/* Subtitle styling, shared by the control page, the popout, and later the
 * Electron overlay. Lifted from clients/web/public/captions.html, whose
 * appearance was the only part of it worth keeping -- it renders the v1
 * `result` shape and knows nothing of v2's separate events. */

.subtitles {
  margin: 0;
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-family: system-ui, sans-serif;
}

.subtitles.empty::before {
  content: "Waiting for speech…";
  color: #555;
  font-size: 1.5rem;
}

.utterance { display: flex; flex-direction: column; gap: 0.35rem; }

/* The source transcript is context, not the thing being read. */
.utterance .source { font-size: 1.4rem; color: #aaa; }

.utterance .line {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 2.4rem;
  line-height: 1.25;
}

.utterance .tag {
  flex: 0 0 auto;
  background: #2f6f4f;
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 1.2rem;
}

.utterance .text { word-break: break-word; }

/* Captured before a language switch, so its translation will arrive in the
 * language the listener just turned off. Dimmed rather than hidden: it is real
 * speech, and hiding it would leave an unexplained gap. */
.utterance.stale { opacity: 0.45; }

.utterance .note:empty { display: none; }
.utterance .note { font-size: 1rem; color: #c98; }

#status { font-size: 0.9rem; color: #888; }
#status.warn { color: #e0a030; }