/* ─── 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;
}

/* ─── Light theme (實測回饋 2026-08-01) ─────────────────
   所有頁面顏色都走 --tide-* token，淺色主題＝整組 token 覆蓋。
   套用方式：<html data-theme="light">（js/theme.js 依 localStorage 設定，
   各頁 head 內嵌一行防閃爍）。導覽列（mm-nav）刻意維持深色。 */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

html[data-theme="light"] {
  --tide-bg:           #f4f6f8;
  --tide-bg-2:         #ffffff;   /* 部分頁面以 var(--tide-bg-2, #14222f) 引用 */
  --tide-bg-raise:     #ffffff;
  --tide-panel:        #ffffff;
  --tide-panel-subtle: rgba(255, 255, 255, 0.72);

  --tide-ink:          #22303c;
  --tide-ink-2:        #4c5b68;
  --tide-ink-3:        #74838f;
  --tide-ink-4:        #a2adb6;

  --tide-line:         rgba(34, 48, 60, 0.12);
  --tide-line-strong:  rgba(34, 48, 60, 0.22);

  /* 亮底需要更深的強調色維持對比 */
  --tide-brass:        #b87a3f;
  --tide-brass-deep:   #9a6330;
  --tide-brass-soft:   rgba(184, 122, 63, 0.14);
  --tide-sea:          #37837b;
  --tide-sea-soft:     rgba(55, 131, 123, 0.12);
  --tide-coral:        #c94f42;
  --tide-coral-soft:   rgba(201, 79, 66, 0.12);
}

/* 頁面裡少數寫死的深色面板 — 淺色時覆蓋（specificity 蓋過頁內同名規則） */
html[data-theme="light"] .rail { background: rgba(244, 246, 248, 0.75); }
html[data-theme="light"] .rail-cta { background: rgba(255, 255, 255, 0.94); }
html[data-theme="light"] .mascot-stage { background: var(--tide-panel); }
html[data-theme="light"] .font-btn-active { color: #ffffff !important; }