/* ─── Tidepool fonts ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter+Tight:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

/* ─── Tidepool design tokens ─────────────────────────── */
:root {
  /* Surfaces */
  --tide-bg:         #0e1a26;
  --tide-bg-raise:   #142434;
  --tide-panel:      #1a2c3e;
  --tide-panel-subtle: rgba(20, 36, 52, 0.5);

  /* Text */
  --tide-ink:        #f5ebd6;
  --tide-ink-2:      #cdbfa6;
  --tide-ink-3:      #8a9bab;
  --tide-ink-4:      #5a6975;

  /* Lines */
  --tide-line:        rgba(245, 235, 214, 0.10);
  --tide-line-strong: rgba(245, 235, 214, 0.18);

  /* Accents */
  --tide-brass:       #d4985f;
  --tide-brass-deep:  #b87a3f;
  --tide-brass-soft:  rgba(212, 152, 95, 0.16);

  --tide-sea:         #5ba8a0;
  --tide-sea-soft:    rgba(91, 168, 160, 0.14);

  --tide-coral:       #e57366;
  --tide-coral-soft:  rgba(229, 115, 102, 0.16);

  /* Typography */
  --tide-font-sans: 'Geist', 'Inter Tight', system-ui, -apple-system, sans-serif;
  --tide-font-tc:   'Noto Sans TC', 'Geist', system-ui, sans-serif;
  --tide-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Responsive breakpoints — use in @media via min-width preferred. */
  --bp-phone:  480px;   /* ≤ phone */
  --bp-tablet: 1024px;  /* ≤ tablet */
  /* > 1024 = laptop / desktop */

  /* Spacing scale (mobile baseline; bump on larger via @media) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

/* ─── Base body ──────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  background: var(--tide-bg);
  color: var(--tide-ink);
  font-family: var(--tide-font-tc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Recording dot (now coral, was red) ─────────────── */
.recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--tide-coral);
  animation: recording-pulse 1.5s ease-in-out infinite;
}

@keyframes recording-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229, 115, 102, 0.45); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 6px rgba(229, 115, 102, 0); }
}

/* ─── Utterance Rows ─────────────────────────────────── */
.utt-row {
  padding: 6px 0;
  line-height: 1.6;
}

.utt-time {
  font-size: 11px;
  color: var(--tide-ink-3);
  font-family: var(--tide-font-mono);
  letter-spacing: 0.04em;
}

.utt-text {
  font-size: 15px;
  color: var(--tide-ink);
}

/* ─── Transcript Scroll Area ─────────────────────────── */
#transcript-list {
  scrollbar-width: thin;
  scrollbar-color: var(--tide-line-strong) transparent;
}

#transcript-list::-webkit-scrollbar {
  width: 6px;
}

#transcript-list::-webkit-scrollbar-track {
  background: transparent;
}

#transcript-list::-webkit-scrollbar-thumb {
  background-color: var(--tide-line-strong);
  border-radius: 3px;
}

/* ─── Translation Row ────────────────────────────────── */
.utt-translation {
  font-size: 14px;
  color: var(--tide-ink-2);
  margin-top: 2px;
  padding-left: 12px;
  border-left: 2px solid rgba(212, 152, 95, 0.55);
}

/* ─── Speculative Translation (interim) ─────────────── */
.utt-spec-translation {
  font-size: 14px;
  color: var(--tide-ink-3);
  margin-top: 2px;
  padding-left: 12px;
  border-left: 2px dashed rgba(212, 152, 95, 0.30);
  font-style: italic;
}

/* ─── Font Size Classes ──────────────────────────────── */
.font-sm .utt-text { font-size: 13px; }
.font-sm .utt-translation, .font-sm .utt-spec-translation { font-size: 12px; }

.font-md .utt-text { font-size: 15px; }
.font-md .utt-translation, .font-md .utt-spec-translation { font-size: 14px; }

.font-lg .utt-text { font-size: 19px; }
.font-lg .utt-translation, .font-lg .utt-spec-translation { font-size: 17px; }

.font-xl .utt-text { font-size: 24px; }
.font-xl .utt-translation, .font-xl .utt-spec-translation { font-size: 21px; }

/* ─── Font Size Button Active ────────────────────────── */
.font-btn-active {
  background-color: var(--tide-brass) !important;
  color: var(--tide-bg) !important;
}