/* ============================================================
   style.css — 即譯（即時傳譯與聽寫 PWA）
   行動優先、深色主題、支援瀏海安全區（safe-area）
   ============================================================ */

:root {
    --bg: #f4f8fd;          /* 主背景（白偏淡藍） */
    --bg2: #ffffff;         /* 頁首/列/卡片白底 */
    --bg3: #e8f0fb;         /* 浮起元素（淡藍） */
    --fg: #11243f;          /* 主文字（深藍） */
    --fg-dim: #5e7090;      /* 次要文字（原文逐字稿） */
    --accent: #1769d6;      /* 強調藍（譯文/主要動作） */
    --accent2: #0f4f9e;     /* 深藍（譯文文字） */
    --border: #d3e0f2;      /* 邊框（淡藍灰） */
    --ok: #1e9e57;
    --warn: #d98a00;
    --err: #d64141;
    --rec: #e5392f;         /* 錄音紅 */
    --radius: 14px;
    --fs: 1;                /* 逐字稿字級倍率（設定頁調整） */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 重要：class 設了 display:flex 等值會覆蓋 hidden 屬性的預設 display:none，
   導致「隱藏的 overlay 仍攔截點擊」。此規則確保 hidden 永遠真的隱藏。 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    background: var(--bg);
    color: var(--fg);
    font-family: system-ui, -apple-system, "Noto Sans TC", "PingFang TC",
                 "Microsoft JhengHei", sans-serif;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    height: 100dvh;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
select, input[type="text"], input[type="password"] {
    font: inherit;
    color: var(--fg);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
}
a { color: var(--accent); }

/* ───── 頁首 ───── */
#topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
    background: var(--accent);   /* 藍色頁首 */
    color: #fff;
}
#topbar h1 { font-size: 1.05rem; flex: 1; text-align: center; font-weight: 600; }
.icon-btn { font-size: 1.25rem; padding: 4px 6px; border-radius: 8px; }
.icon-btn:active { background: rgba(255,255,255,.2); }
.install-btn { color: #fff; }   /* 安裝按鈕（在藍色頁首上以白色顯示） */

/* 狀態圓點 */
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.idle { background: #5a6372; }
.dot.connecting, .dot.reconnecting { background: var(--warn); animation: pulse 1s infinite; }
.dot.live { background: var(--ok); }
.dot.stopping { background: var(--warn); }
.dot.error { background: var(--err); }
#statusText { font-size: .8rem; color: rgba(255,255,255,.85); min-width: 3.2em; }
@keyframes pulse { 50% { opacity: .35; } }

/* ───── 模式切換 ───── */
#modeTabs { display: flex; background: var(--bg2); padding: 0 14px 8px; gap: 8px; }
.tab {
    flex: 1; padding: 8px 0; border-radius: 10px;
    background: var(--bg3); color: var(--fg-dim); font-weight: 600;
}
.tab.active { background: var(--accent); color: #fff; }

/* ───── 語言列 ───── */
#langBar { background: var(--bg2); padding: 0 14px 12px; }
.lang-row { display: flex; align-items: center; gap: 8px; }
.lang-fixed { color: var(--fg-dim); font-size: .9rem; white-space: nowrap; }
.lang-arrow { color: var(--fg-dim); }
.lang-row select { flex: 1; min-width: 0; }

/* ───── 逐字稿區 ───── */
#transcript {
    overflow-y: auto;
    padding: 14px 14px 20px;
    scroll-behavior: smooth;
    font-size: calc(1rem * var(--fs));
}
.empty-hint { color: var(--fg-dim); text-align: center; margin-top: 14vh; line-height: 1.9; }
.empty-hint .small { font-size: .82rem; }

/* 傳譯模式：原文/譯文成對卡片 */
.turn { margin-bottom: 14px; }
.turn .src { color: var(--fg-dim); line-height: 1.55; }
.turn .dst { color: var(--accent2); line-height: 1.6; margin-top: 2px; font-weight: 500; }
.turn .dst::before { content: "→ "; color: var(--fg-dim); font-weight: 400; }
.turn.gap .src { color: var(--warn); font-size: .85em; }
.turn.live-turn .dst::after,
.turn.live-turn .src:last-child::after { content: "▍"; animation: pulse 1s infinite; color: var(--accent); }

/* 聽寫模式：大字連續段落（隱藏譯文） */
body.mode-dictate #transcript { font-size: calc(1.35rem * var(--fs)); line-height: 1.85; }
body.mode-dictate .turn { margin-bottom: 6px; }
body.mode-dictate .turn .src { color: var(--fg); }
body.mode-dictate .turn .dst { display: none; }

/* 跳至最新 */
.jump-btn {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom) + 150px);
    background: var(--bg3);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
    z-index: 5;
}

/* 恢復提示列 */
.resume-bar {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 150px);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    z-index: 6;
    font-size: .9rem;
}
.resume-bar span { flex: 1; }
.resume-bar button {
    background: var(--accent); color: #fff;
    padding: 6px 12px; border-radius: 8px; font-weight: 600;
}
.resume-bar #resumeDismissBtn { background: var(--bg2); color: var(--fg-dim); }

/* PWA 安裝提示橫幅（自動冒出；放在恢復提示列上方避免重疊） */
.install-bar {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 210px);
    background: var(--bg3);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    z-index: 7;
    font-size: .9rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.install-bar span { flex: 1; }
.install-bar button {
    background: var(--accent); color: #fff;
    padding: 6px 12px; border-radius: 8px; font-weight: 600;
    white-space: nowrap;
}
.install-bar #installBarDismiss { background: var(--bg2); color: var(--fg-dim); }

/* ───── 底部控制 ───── */
#controls {
    background: var(--bg2);
    padding: 8px 14px calc(env(safe-area-inset-bottom) + 10px);
    border-top: 1px solid var(--border);
}
.tools-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.tool-btn {
    font-size: .8rem; color: var(--fg-dim);
    background: var(--bg3); padding: 6px 10px; border-radius: 8px;
}
.tool-btn:active { background: var(--border); }
.tool-btn.confirm { background: var(--err); color: #fff; }   /* 清除的兩段式確認 */

.main-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.round-btn {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--bg3); font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center;
}
.round-btn.off { opacity: .35; }            /* 喇叭關閉 */
.round-btn.paused { background: var(--warn); color: #3a2800; }
.round-btn:disabled { opacity: .25; cursor: default; }

/* 大麥克風鈕 + RMS 音量環 */
.mic-btn {
    position: relative;
    width: 78px; height: 78px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 2rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.mic-btn.recording { background: var(--rec); color: #fff; }
.mic-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 3px solid currentColor; opacity: .35;
    transform: scale(var(--level, 1));
    transition: transform .08s linear;
    pointer-events: none;
}
.meta-col { display: flex; flex-direction: column; min-width: 64px; }
#timer { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.small { font-size: .75rem; color: var(--fg-dim); }

/* ───── 大字幕 ───── */
.cap-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: var(--accent);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 5vmin;
    text-align: center;
}
.cap-overlay p#capText {
    font-size: clamp(2rem, 9vmin, 6rem);
    line-height: 1.4; color: #fff; font-weight: 700;
    overflow-wrap: anywhere;
}
.cap-hint { margin-top: 4vmin; color: rgba(255,255,255,.75); font-size: .9rem; }

/* ───── 設定 dialog ───── */
dialog {
    border: none; border-radius: var(--radius);
    background: var(--bg2); color: var(--fg);
    width: min(560px, 92vw);
    max-height: 86dvh; overflow-y: auto;
    padding: 20px;
    margin: auto;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { font-size: 1.1rem; margin-bottom: 14px; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; margin-bottom: 6px; font-size: .9rem; }
.field input[type="text"], .field input[type="password"], .field select { width: 100%; }
.field.check { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; }
.field.check input { margin-top: 3px; }
.field.check span { margin: 0; }
.key-row { display: flex; gap: 8px; }
.key-row input { flex: 1; }
.field .small { display: block; margin-top: 6px; line-height: 1.6; }
#fontVal { color: var(--accent); margin-left: 6px; }
input[type="range"] { width: 100%; }
details summary { cursor: pointer; font-size: .9rem; margin-bottom: 8px; }
#debugInfo {
    background: var(--bg); border-radius: 8px; padding: 10px;
    font-size: .72rem; white-space: pre-wrap; word-break: break-all;
    max-height: 200px; overflow-y: auto; color: var(--fg-dim);
    margin-bottom: 8px;
}
.privacy { line-height: 1.7; }
.dlg-actions { text-align: right; margin-top: 10px; }
.btn-primary {
    background: var(--accent); color: #fff;
    padding: 10px 22px; border-radius: 10px; font-weight: 700;
}
.btn-secondary {
    background: var(--bg3); color: var(--fg);
    padding: 10px 22px; border-radius: 10px;
}

/* ───── Toast ───── */
.toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom) + 160px);
    background: var(--bg3); color: var(--fg);
    border: 1px solid var(--border);
    padding: 10px 18px; border-radius: 12px;
    max-width: 86vw;
    box-shadow: 0 6px 20px rgba(0,0,0,.5);
    z-index: 60;
    font-size: .9rem;
    line-height: 1.55;
    text-align: center;
}
.toast.tappable { cursor: pointer; border-color: var(--accent); }

/* ───── 探針頁 ───── */
.probe-page { display: block; overflow-y: auto; padding: 20px; }
.probe-main { max-width: 640px; margin: 0 auto; }
.probe-main h1 { font-size: 1.3rem; margin: 16px 0; }
.probe-hint { color: var(--fg-dim); margin: 12px 0; line-height: 1.7; }
.probe-list { list-style: none; margin: 16px 0; }
.probe-list li {
    padding: 9px 12px; margin-bottom: 6px;
    background: var(--bg2); border-radius: 8px;
    font-size: .85rem; line-height: 1.5; word-break: break-all;
}
.probe-list li.ok { border-left: 3px solid var(--ok); }
.probe-list li.fail { border-left: 3px solid var(--err); }
.probe-list li.warn { border-left: 3px solid var(--warn); }
.probe-page .btn-primary, .probe-page .btn-secondary { margin: 6px 0; }

/* 桌機微調 */
@media (min-width: 720px) {
    #transcript { max-width: 760px; width: 100%; margin: 0 auto; }
    #langBar, #modeTabs { padding-left: max(14px, calc(50vw - 380px)); padding-right: max(14px, calc(50vw - 380px)); }
}