/* ─── Live: Voice | Translate mode switch + translate two-pane stage ────────
   Shared base CSS (vars, header, halo, dock, status pill, ctrl-btn, ended
   overlay, reconnect banner, lmsg transcript, PiP, settings sheet) lives in
   the inline <style> of index.html. This file holds only the mode toggle,
   stage visibility, and the translate-specific two-pane layout. */

/* ── Mode toggle (header segmented control) ─────────────────────────────── */
.live-mode-toggle {
    display: inline-flex;
    padding: 3px;
    border-radius: 9999px;
    background: var(--live-surface-dim);
    border: 1px solid var(--live-outline);
}
.live-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--live-on-surface-variant);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: all 150ms ease;
    white-space: nowrap;
}
.live-mode-btn .material-symbols-outlined { font-size: 16px; }
.live-mode-btn:hover { color: var(--live-on-surface); }
.live-mode-btn[aria-pressed="true"] {
    background: var(--live-accent);
    color: var(--live-on-accent);
}

/* ── Stage visibility ────────────────────────────────────────────────────── */
.live-stage-pane {
    position: relative;
    flex: 1 1 100%;
    min-width: 0;
    min-height: 0;
    display: none;
    flex-direction: column;
}
body[data-live-mode="voice"] #voiceStage { display: flex; }
body[data-live-mode="translate"] #translateStage { display: flex; }

/* Header controls + voice-only dock affordances are hidden per mode. */
body[data-live-mode="voice"] #translateHeaderControls { display: none; }
body[data-live-mode="translate"] #voiceHeaderControls { display: none; }
body[data-live-mode="translate"] #voiceDockSlot,
body[data-live-mode="translate"] #settingsBtn,
body[data-live-mode="translate"] #cameraBtn,
body[data-live-mode="translate"] #screenBtn,
body[data-live-mode="translate"] #settingsSheet { display: none !important; }

/* ── Translate: twin-pane bilingual transcript ──────────────────────────── */
.live-select-wrap--lang { width: 200px; }

.twin-panes {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.pane {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    padding: 20px max(14px, calc((100% - 36rem) / 2)) 24px;
    gap: 12px;
    overscroll-behavior: contain;
}
.pane--source { border-right: 1px solid var(--live-outline); }
.pane-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -20px max(14px, calc((100% - 36rem) / 2)) 4px;
    padding: 14px max(14px, calc((100% - 36rem) / 2)) 6px;
    background: color-mix(in srgb, var(--live-surface-dim) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.pane-head .material-symbols-outlined { font-size: 18px; color: var(--live-on-surface-variant); }
.pane-title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--live-on-surface-variant);
}
.pane-lang {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    background: var(--live-accent-container);
    color: var(--live-on-accent-container);
    padding: 2px 9px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pane-line {
    font-size: 15px;
    line-height: 1.55;
    color: var(--live-on-surface);
    word-break: break-word;
}
.pane--source .pane-line { color: var(--live-on-surface-variant); }
.pane--target .pane-line { color: var(--live-on-surface); font-weight: 500; }
.pane-line--streaming::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 14px;
    margin-left: 4px;
    vertical-align: text-bottom;
    border-radius: 2px;
    background: var(--live-accent);
    animation: caret-blink 1s steps(2, start) infinite;
}

/* Translate empty state: halo shown while no pane lines exist. The panes
   always hold their sticky .pane-head, so :empty can't detect "no content". */
#translateStage:not([data-has-transcript="true"]) .live-empty { display: flex; }
#translateStage:not([data-has-transcript="true"]) .live-tools { opacity: 0; pointer-events: none; }

/* ── Echo toggle (translate header affordance) ──────────────────────────── */
.echo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid var(--live-outline);
    background: var(--live-surface);
    color: var(--live-on-surface-variant);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}
.echo-toggle .material-symbols-outlined { font-size: 16px; }
.echo-toggle[aria-pressed="true"] {
    background: var(--live-accent-container);
    color: var(--live-on-accent-container);
    border-color: color-mix(in srgb, var(--live-accent) 25%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .pane-line--streaming::after { animation: none !important; }
}

/* ═══ Responsive layer ══════════════════════════════════════════════════════
   This file is linked after index.html's inline <style>, so equal-specificity
   rules below win — base values declared inline are deliberately re-declared
   here when they only exist to serve a layout. Breakpoints:

     ≤ 1024px  transcript clears the floating tool cluster
     ≤ 820px   header stacks: brand + mode toggle, selects on their own row
     ≤ 900px   dock select narrows
     ≤ 640px   dock stacks; twin panes become rows; PiP shrinks
     ≤ 480px   primary call button takes a full-width row
     short landscape  everything compresses back into one dock row
     pointer: coarse  touch-target floors
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────── */
.live-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 8px;
    min-height: 3.5rem;
    padding: calc(6px + env(safe-area-inset-top))
             max(12px, env(safe-area-inset-right)) 6px
             max(12px, env(safe-area-inset-left));
}
@media (min-width: 768px) {
    .live-header {
        padding-right: max(16px, env(safe-area-inset-right));
        padding-left: max(16px, env(safe-area-inset-left));
    }
}
.live-header-brand { flex: 1 1 auto; min-width: 0; }
.live-header-actions { display: contents; }
.live-mode-toggle { flex: none; }

@media (max-width: 820px) {
    .live-header-brand { order: 1; }
    .live-mode-toggle { order: 2; }
    /* Full-width select row. The custom-select menu is sized from its trigger
       (js/shared/ui-utils.js), so widening the trigger also widens the menu —
       which is what makes the two-line options readable on a phone. */
    #voiceHeaderControls,
    #translateHeaderControls { flex: 1 1 100%; order: 3; min-width: 0; }
    .live-select-wrap--model,
    .live-select-wrap--lang { width: auto; }
    #voiceHeaderControls .live-select-wrap { flex: 1 1 0; min-width: 0; }
    #voiceHeaderControls .live-select-wrap--model { flex-grow: 1.7; }
    #translateHeaderControls .live-select-wrap--lang { flex: 1 1 auto; min-width: 0; }
    #echoToggle { flex: none; }
}

/* ── Stage: keep content clear of the floating tool cluster ─────────────── */
.live-halo { width: clamp(88px, 22vw, 128px); height: clamp(88px, 22vw, 128px); }

/* Voice tools sit top-right; the transcript column only clears them once the
   viewport is wide enough to push the column inward (46rem + 2×134px). */
@media (max-width: 1024px) {
    #transcript { padding-top: 52px; }
}
/* Translate has no PiP, so its tools drop to the bottom-right instead — that
   avoids the sticky .pane-head lang badge at every width. */
#translateStage .live-tools { top: auto; bottom: 14px; }
.pane--target { padding-bottom: 60px; }

/* ── Dock ───────────────────────────────────────────────────────────────── */
.live-dock {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
}
/* Without this the controls row overflows the dock as soon as the voice select
   appears (it mounts only once a session connects). */
.live-dock-controls { flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 900px) {
    .live-select-wrap--voice { width: 180px; }
}

@media (max-width: 640px) {
    .live-dock { flex-direction: column; align-items: stretch; gap: 10px; }
    .live-dock-status { justify-content: center; }
    .live-dock-controls { width: 100%; margin: 0; justify-content: center; gap: 8px; }
    #voiceDockSlot { order: -1; flex: 1 0 100%; justify-content: center; }
    #voiceDockSlot .live-select-wrap--voice { flex: 1 1 auto; width: auto; min-width: 0; }
    .live-round-btn { width: 46px; height: 46px; }
    .live-round-btn--mic { width: 56px; height: 56px; }
    .live-round-btn--mic .material-symbols-outlined { font-size: 24px; }
    #connectBtn.live-ctrl-btn--primary { padding: 12px 20px; font-size: 14px; }

    #transcript { padding-right: 14px; padding-left: 14px; padding-bottom: 20px; }
    .lmsg { max-width: 88%; }
    .live-tools { top: 10px; right: 10px; gap: 5px; }
    #translateStage .live-tools { top: auto; bottom: 10px; }
    .live-pip { right: 10px; bottom: 10px; }
    .live-pip-tile { width: clamp(112px, 32vw, 160px); }

    .twin-panes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
    .pane--source { border-right: none; border-bottom: 1px solid var(--live-outline); }
    .pane { padding: 16px 14px 20px; }
    /* Negative side margins let the blurred sticky head bleed to the pane edge
       while its content stays aligned with the lines below it. */
    .pane-head { margin: -16px -14px 4px; padding: 12px 14px 6px; }
    .pane--target { padding-bottom: 56px; }

    .live-sheet-inner { padding: 12px 14px 14px; }
}

@media (max-width: 480px) {
    .live-dock-controls { gap: 6px; }
    /* Primary action earns its own full-width row rather than being squeezed. */
    #connectBtn { flex: 1 0 100%; }
    #connectBtn.live-ctrl-btn--primary { padding: 13px 20px; }
}

/* ── Short landscape (phone on its side): height is the scarce axis ─────── */
@media (max-height: 520px) and (orientation: landscape) {
    .live-header { min-height: 3rem; }
    .live-empty { gap: 10px; padding: 12px; }
    .live-halo { width: 64px; height: 64px; }
    .live-empty h2 { font-size: 1.05rem; }
    .live-empty p { display: none; }

    .live-dock { flex-direction: row; align-items: center; gap: 8px; padding-top: 6px; }
    .live-dock-controls { width: auto; margin-left: auto; justify-content: flex-end; }
    #voiceDockSlot { order: 0; flex: 0 1 auto; }
    #connectBtn { flex: 0 1 auto; }
    .live-round-btn { width: 42px; height: 42px; }
    .live-round-btn--mic { width: 50px; height: 50px; }
    #connectBtn.live-ctrl-btn--primary { padding: 10px 18px; }

    /* Side-by-side beats stacked when there are only ~200px of pane height. */
    .twin-panes { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
    .pane--source { border-right: 1px solid var(--live-outline); border-bottom: none; }

    .live-pip { flex-direction: row; }
    .live-pip-tile { width: clamp(96px, 18vw, 140px); }
}

/* ── Touch targets ──────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    .live-mode-btn { min-height: 40px; padding-left: 16px; padding-right: 16px; }
    .echo-toggle { min-height: 40px; }
    .live-tool-btn, .live-voice-preview { width: 42px; height: 42px; }
    /* 16px is the threshold below which iOS Safari zooms on focus. */
    .live-sheet textarea { font-size: 16px; }
}