/* ============================================
   NOPROXi — Live Session Layout
   Smooth, shadow-driven, borderless enterprise
   ============================================ */

/* --- Electron Frameless Title Bar --- */
#electron-titlebar {
    display: none; /* shown only in Electron via JS */
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 36px;
    z-index: 9999;
    background: #0f0f0e;
    -webkit-app-region: drag; /* draggable by default */
    user-select: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 14px;
}
.etb-drag {
    display: flex; align-items: center; gap: 8px;
    flex: 1;
    -webkit-app-region: drag;
}
.etb-title {
    font-size: 13.5px; font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.5);
}
.etb-badge {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #10b981;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 10px; padding: 1px 7px;
}
.etb-controls {
    display: flex; align-items: center; gap: 4px;
    -webkit-app-region: no-drag;
}
.etb-btn {
    width: 28px; height: 28px;
    border: none; background: transparent;
    border-radius: 6px; cursor: pointer;
    color: rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.etb-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
.etb-close:hover { background: #ef4444; color: white; }

/* Position selector dropdown */
.etb-position-wrap { position: relative; }
.etb-position-menu {
    display: none; position: absolute; top: 34px; right: 0;
    background: rgba(20,20,20,0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 4px;
    min-width: 110px; z-index: 10000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.etb-position-menu.open { display: flex; flex-direction: column; }
.etb-pos-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; border: none; background: transparent;
    color: rgba(255,255,255,0.6); font-family: inherit; font-size: 13.5px;
    border-radius: 7px; cursor: pointer; transition: all 0.15s;
    -webkit-app-region: no-drag;
}
.etb-pos-opt:hover { background: rgba(255,255,255,0.1); color: #fff; }
.etb-pos-opt.active { color: #10b981; }
.etb-pos-opt svg { flex-shrink: 0; }

/* Collapse button */
.etb-collapse-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.95); }

/* Push page content down when title bar is shown */
body.is-electron { padding-top: 36px; }

.live-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background: var(--canvas-100);
}

/* --- Top Bar --- */
.live-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--white);
    box-shadow: 0 2px 12px rgba(19,19,20,0.04), 0 1px 0 rgba(0,0,0,0.03);
    gap: 16px;
    z-index: 10;
    flex-shrink: 0;
}

.topbar-conv-pills { display: none; align-items: center; gap: 8px; }
.topbar-end-btn {
    display: none; /* shown on mobile via media query */
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: rgba(239,68,68,0.08);
    color: var(--red-500);
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.topbar-end-btn:hover { background: rgba(239,68,68,0.15); }
.topbar-end-btn svg { width: 13px; height: 13px; }
.live-top-left { display: flex; align-items: center; gap: 10px; }
.live-top-left .back-home-btn { width: 28px; height: 28px; }
.live-session-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live-company {
    font-size: 13.5px; font-weight: 700; color: var(--canvas-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-session-type {
    font-size: 11.5px; font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
    padding: 2px 8px;
    background: var(--canvas-100);
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}

.live-top-center { display: flex; align-items: center; gap: 16px; }
.live-indicator {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 16px;
    background: var(--emerald-50);
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700;
    color: var(--emerald-600);
    letter-spacing: 0.06em;
    box-shadow: 0 1px 4px rgba(16,185,129,0.08);
}
.live-timer {
    font-family: var(--font-mono);
    font-size: 13.5px; font-weight: 500;
    color: var(--text-muted);
}

.live-top-right { display: flex; align-items: center; gap: 8px; }
.topbar-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--canvas-50);
    font-family: var(--font); font-size: 12.5px; font-weight: 600;
    color: var(--canvas-600); cursor: pointer;
    transition: all 0.2s var(--ease);
}
.topbar-btn:hover {
    background: var(--canvas-200);
    color: var(--canvas-900);
}
.topbar-btn.active {
    background: var(--canvas-950); color: var(--white);
    box-shadow: 0 2px 8px rgba(19,19,20,0.1);
}
.topbar-btn.danger { color: var(--red-500); background: var(--red-50); }
.topbar-btn.danger:hover { background: var(--red-500); color: var(--white); box-shadow: 0 4px 12px rgba(239,68,68,0.15); }

/* --- Topbar Text Size Controls --- */
.topbar-size-group {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: var(--canvas-50);
    border: 1px solid var(--canvas-200);
    border-radius: 8px;
    padding: 1px;
}
.topbar-size-btn {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    color: var(--canvas-500);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}
.topbar-size-btn:hover {
    background: var(--white);
    color: var(--canvas-800);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.topbar-size-btn .size-arrow {
    font-size: 10px;
    font-weight: 600;
    margin-left: 1px;
}
[data-theme="dark"] .topbar-size-group {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .topbar-size-btn { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .topbar-size-btn:hover { background: rgba(255,255,255,0.1); color: #fff; box-shadow: none; }

/* Text size steps */
.live-main.text-size-1 .t-text { font-size: 10.5px !important; }
.live-main.text-size-1 .ans-body { font-size: 11px !important; }
.live-main.text-size-1 .ans-q { font-size: 12px !important; }
.live-main.text-size-2 .t-text { font-size: 11.5px !important; }
.live-main.text-size-2 .ans-body { font-size: 12px !important; }
.live-main.text-size-2 .ans-q { font-size: 13px !important; }
/* size-3 = default, no override */
.live-main.text-size-4 .t-text { font-size: 13.5px !important; }
.live-main.text-size-4 .ans-body { font-size: 14px !important; }
.live-main.text-size-4 .ans-q { font-size: 15px !important; }
.live-main.text-size-5 .t-text { font-size: 15px !important; }
.live-main.text-size-5 .ans-body { font-size: 15.5px !important; }
.live-main.text-size-5 .ans-q { font-size: 16.5px !important; }
/* Fullscreen text size steps */
.fs-main.text-size-1 .t-text { font-size: 10px !important; }
.fs-main.text-size-1 .ans-body { font-size: 10.5px !important; }
.fs-main.text-size-2 .t-text { font-size: 11px !important; }
.fs-main.text-size-2 .ans-body { font-size: 11.5px !important; }
.fs-main.text-size-4 .t-text { font-size: 13px !important; }
.fs-main.text-size-4 .ans-body { font-size: 13.5px !important; }
.fs-main.text-size-5 .t-text { font-size: 14.5px !important; }
.fs-main.text-size-5 .ans-body { font-size: 15px !important; }

/* --- Main Split --- */
.live-main {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr 240px;
    grid-template-rows: 1fr;
    gap: 6px;
    padding: 6px;
    background: var(--canvas-100);
    overflow: hidden;
}

/* Left column stacks shared preview + transcript */
.live-col-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    order: 1;
}

/* Answers panel takes center */
.answers-panel { order: 2; }

/* Reference panel on right */
.reference-panel { order: 3; transition: width 0.25s ease, opacity 0.2s ease; }

/* Collapsed Quick Ref — panel hidden, AI answers auto-expands */
.live-main.ref-collapsed { grid-template-columns: 280px 1fr 0px; }
.live-main.ref-collapsed .reference-panel { opacity: 0; overflow: hidden; pointer-events: none; width: 0; padding: 0; border: none; }
.live-main.ref-collapsed .reference-panel .panel-head,
.live-main.ref-collapsed .reference-panel .panel-body { display: none; }

/* Reset old order */
.transcript-panel {
    order: unset;
    flex: 1;
    min-height: 0;
}

.live-panel {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* --- Shared Screen Preview --- */
.shared-preview-panel {
    flex: 0 0 32%;
    max-height: none;
}
.shared-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    flex-shrink: 0;
    background: var(--white);
    position: relative;
}
.shared-preview-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 12px; right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.shared-preview-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-600);
}
.shared-preview-fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: var(--canvas-50);
    color: var(--canvas-600);
    cursor: pointer;
    transition: all 0.15s ease;
}
.shared-preview-fullscreen:hover {
    background: var(--terra-50);
    color: var(--terra);
}
.shared-preview-body {
    flex: 1;
    position: relative;
    background: var(--canvas-50);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#shared-screen-feed {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
}
#shared-screen-feed.active {
    display: block;
}
.shared-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--canvas-400);
    font-size: 11px;
    font-weight: 500;
}
.shared-preview-placeholder span {
    font-size: 11px;
}
/* Green pulse border when actively sharing */
.shared-preview-panel.is-sharing {
    box-shadow: 0 0 0 2px rgba(16,185,129,0.3), var(--shadow-sm);
}
.shared-preview-panel.is-sharing .shared-preview-head {
    background: rgba(16,185,129,0.04);
}

/* --- Reference Keywords Panel --- */
.reference-panel .panel-head h3 {
    font-size: 12px;
}
.ref-body {
    padding: 14px !important;
}
.ref-keyword-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ref-keyword-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--canvas-700);
    background: var(--canvas-50);
    transition: background 0.15s ease;
}
.ref-keyword-item:hover {
    background: var(--terra-50);
}
.ref-keyword-item::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--terra);
    flex-shrink: 0;
    opacity: 0.6;
}
.ref-keyword-item.ref-keyword-heading {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-500);
    background: transparent;
    padding: 10px 10px 4px;
    margin-top: 4px;
}
.ref-keyword-item.ref-keyword-heading:first-child {
    margin-top: 0;
    padding-top: 4px;
}
.ref-keyword-item.ref-keyword-heading::before {
    display: none;
}

/* --- Fullscreen Overlay — ultra-transparent glass HUD over shared screen --- */
.fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: transparent;
    pointer-events: none;
}
.fullscreen-overlay * {
    pointer-events: auto;
}

/* Topbar — thin crystal-clear strip */
.fs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}
.fs-top-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fs-status-text {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--canvas-900);
}
.fs-timer {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--canvas-500);
}
.fs-top-center {
    display: flex;
    align-items: center;
    gap: 3px;
}
.fs-tb-btn {
    padding: 5px !important;
    min-width: unset !important;
    border-radius: 5px !important;
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: var(--canvas-600) !important;
    cursor: pointer;
    transition: all 0.15s;
}
.fs-tb-btn:hover {
    background: rgba(0,0,0,0.08) !important;
    color: var(--canvas-900) !important;
}
.fs-tb-btn.active {
    background: rgba(217,119,87,0.1) !important;
    color: var(--terra) !important;
    border-color: var(--terra) !important;
}
.fs-tb-btn.danger {
    color: #dc3545 !important;
}
.fs-tb-btn.danger:hover {
    background: #dc3545 !important;
    color: #fff !important;
}
.fs-tb-btn span { display: none; }
.fs-size-group {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.08) !important;
}
.fs-size-group .topbar-size-btn {
    font-size: 11px;
    padding: 3px 7px;
    color: var(--canvas-500);
}
.fs-size-group .topbar-size-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--canvas-800);
}
[data-theme="dark"] .fs-size-group {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .fs-size-group .topbar-size-btn { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fs-size-group .topbar-size-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.fs-tb-sep {
    width: 1px;
    height: 16px;
    background: rgba(0,0,0,0.1);
    margin: 0 3px;
}
.fs-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fs-top-right .answer-mode-pills {
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    padding: 2px;
}
.fs-top-right .mode-pill {
    color: var(--canvas-500);
    font-size: 10.5px;
    padding: 3px 10px;
}
.fs-top-right .mode-pill.active {
    background: rgba(0,0,0,0.08);
    color: var(--canvas-900);
}
.fs-overlay-close {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    background: rgba(0,0,0,0.04);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    color: var(--canvas-700);
    cursor: pointer;
    transition: all 0.2s ease;
}
.fs-overlay-close:hover {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
}

/* Main 3-panel layout */
.fs-main {
    flex: 1;
    display: grid;
    grid-template-columns: 260px 1fr 200px;
    gap: 6px;
    padding: 6px;
    overflow: hidden;
}
.fs-reference-panel .fs-panel-body {
    padding: 10px;
}

/* Panels — crystal-clear glass, dark text */
.fs-panel {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}
.fs-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: rgba(255,255,255,0.3);
    position: relative;
}
.fs-panel-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10px; right: 10px;
    height: 1px;
    background: rgba(0,0,0,0.06);
}
.fs-panel-head h3 {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--canvas-500);
    margin: 0;
}
.fs-panel-head h3 svg {
    opacity: 0.6;
    color: var(--canvas-500);
    stroke: var(--canvas-500);
}
.fs-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.fs-panel-body::-webkit-scrollbar { width: 4px; }
.fs-panel-body::-webkit-scrollbar-track { background: transparent; }
.fs-panel-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.fs-panel-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }

/* Fullscreen text — dark on clear glass */
.fs-panel-body .t-item { margin-bottom: 10px; }
.fs-panel-body .t-speaker-label { color: var(--canvas-400) !important; font-size: 9px; }
.fs-panel-body .t-speaker-label.candidate { color: var(--terra) !important; }
.fs-panel-body .t-text { color: var(--canvas-800) !important; font-size: 11.5px; line-height: 1.5; }
.fs-panel-body .t-item.is-question { background: rgba(0,0,0,0.03); border-left-color: var(--canvas-300); }

/* Fullscreen answer items — flow style */
.fs-panel-body .answer-item {
    border-bottom-color: rgba(0,0,0,0.06);
    padding: 10px 0;
}
.fs-panel-body .ans-question-label {
    background: transparent;
    color: var(--canvas-500);
    font-size: 9.5px;
    padding: 0;
}
.fs-panel-body .ans-question-label:hover { background: transparent; color: var(--canvas-700); }
.fs-panel-body .ans-q-arrow { color: var(--terra); }
.fs-panel-body .ans-body {
    background: transparent !important;
    border-left: 2px solid var(--terra) !important;
    border-radius: 0 !important;
    color: var(--canvas-800) !important;
    font-size: 11.5px;
    padding: 0 0 0 8px;
    box-shadow: none !important;
}
.fs-panel-body .ans-body strong { color: var(--canvas-900) !important; }
.fs-panel-body .ans-body li { font-size: 11.5px; }
.fs-panel-body .ans-body.bullet-mode li::before { color: var(--terra); }
.fs-panel-body .ans-meta { font-size: 9.5px; color: var(--canvas-400); margin-top: 6px; }
.fs-panel-body .ans-model { color: var(--canvas-400); background: transparent; }
.fs-panel-body .ans-tp { border-left-color: var(--canvas-200); padding-left: 8px; }
.fs-panel-body .ans-tp-label { color: var(--canvas-400); }
.fs-panel-body .ans-tp li { color: var(--canvas-600); font-size: 10.5px; }

/* Fullscreen reference keywords */
.fs-reference-panel .ref-cat-title {
    color: var(--canvas-400) !important;
    font-size: 9px;
}
.fs-reference-panel .ref-keyword {
    color: var(--canvas-700) !important;
    font-size: 11px;
}

.fs-send-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
    position: relative;
}
.fs-send-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 10px; right: 10px;
    height: 1px;
    background: rgba(0,0,0,0.06);
}
.fs-send-bar .send-indicator { color: var(--canvas-500); font-size: 11px; }
.fs-send-bar .btn-send {
    font-size: 11px;
    padding: 5px 14px;
}
.fs-answer-toolbar {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
    position: relative;
}
.fs-answer-toolbar .answer-send-btn {
    margin-left: auto;
    font-size: 12px;
    padding: 6px 16px;
}
.fs-answer-toolbar::before {
    content: '';
    position: absolute;
    top: 0; left: 10px; right: 10px;
    height: 1px;
    background: rgba(0,0,0,0.06);
}
.fs-answer-toolbar .tool-btn {
    padding: 3px 8px;
    font-size: 10.5px;
    background: rgba(0,0,0,0.04);
    color: var(--canvas-600);
    border: 1px solid rgba(0,0,0,0.06);
}
.fs-answer-toolbar .tool-btn:hover {
    background: rgba(0,0,0,0.08);
    color: var(--canvas-900);
}

/* Fullscreen ref collapsed */
.fs-main.ref-collapsed { grid-template-columns: 260px 1fr 0px; }
.fs-main.ref-collapsed .fs-reference-panel { opacity: 0; overflow: hidden; pointer-events: none; width: 0; padding: 0; }
.fs-main.ref-collapsed .fs-reference-panel .fs-panel-head,
.fs-main.ref-collapsed .fs-reference-panel .fs-panel-body { display: none; }

/* Tablet fullscreen */
@media (max-width: 1024px) {
    .fs-main {
        grid-template-columns: 240px 1fr;
        gap: 4px;
        padding: 4px;
    }
    .fs-reference-panel { display: none; }
}
/* Mobile fullscreen */
@media (max-width: 768px) {
    .fs-main {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 4px;
        padding: 4px;
    }
    .fs-top-center { display: none; }
    .fs-reference-panel { display: none; }
    .fs-overlay-close span { display: none; }
}

/* --- Post-Session Feedback Popup --- */
.sfb-rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sfb-star {
    font-size: 32px;
    background: none;
    border: none;
    color: var(--canvas-200);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0 2px;
    line-height: 1;
}
.sfb-star:hover,
.sfb-star.active {
    color: #f0a500;
    transform: scale(1.15);
}
.sfb-rating-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 16px;
    min-height: 20px;
}
.sfb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    justify-content: center;
}
.sfb-tag {
    padding: 6px 14px;
    border: 1px solid var(--canvas-200);
    border-radius: 20px;
    background: transparent;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--canvas-600);
    cursor: pointer;
    transition: all 0.15s ease;
}
.sfb-tag:hover {
    border-color: var(--terra);
    color: var(--terra);
}
.sfb-tag.active {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
}
.sfb-comment {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--canvas-200);
    border-radius: 10px;
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--canvas-900);
    resize: none;
    transition: border-color 0.15s;
}
.sfb-comment:focus {
    outline: none;
    border-color: var(--terra);
}
.sfb-comment::placeholder {
    color: var(--canvas-400);
}
/* Dark theme feedback */
[data-theme="dark"] .sfb-star { color: var(--canvas-700); }
[data-theme="dark"] .sfb-star:hover,
[data-theme="dark"] .sfb-star.active { color: #f0a500; }
[data-theme="dark"] .sfb-tag { border-color: rgba(255,255,255,0.12); color: var(--text-secondary); }
[data-theme="dark"] .sfb-tag.active { background: var(--terra); border-color: var(--terra); color: #fff; }
[data-theme="dark"] .sfb-comment { background: var(--bg-elevated); border-color: rgba(255,255,255,0.12); color: var(--text-primary); }
/* Dark fullscreen overlay — crystal clear, slightly tinted */
[data-theme="dark"] .fs-topbar { background: rgba(20,20,25,0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .fs-panel { background: rgba(20,20,25,0.5); border-color: rgba(255,255,255,0.04); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
[data-theme="dark"] .fs-panel-head { background: rgba(0,0,0,0.15); }
[data-theme="dark"] .fs-panel-head h3 { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fs-panel-head h3 svg { color: rgba(255,255,255,0.5); stroke: rgba(255,255,255,0.5); }
[data-theme="dark"] .fs-panel-head::after { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .fs-status-text { color: #eee; }
[data-theme="dark"] .fs-timer { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fs-tb-btn { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.6) !important; }
[data-theme="dark"] .fs-tb-btn:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
[data-theme="dark"] .fs-tb-sep { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .fs-top-right .answer-mode-pills { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .fs-top-right .mode-pill { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .fs-top-right .mode-pill.active { background: rgba(255,255,255,0.12); color: #fff; }
[data-theme="dark"] .fs-overlay-close { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
[data-theme="dark"] .fs-send-bar { background: rgba(0,0,0,0.15); }
[data-theme="dark"] .fs-send-bar::before { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .fs-answer-toolbar { background: rgba(0,0,0,0.15); }
[data-theme="dark"] .fs-answer-toolbar::before { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .fs-answer-toolbar .tool-btn { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .fs-answer-toolbar .tool-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
[data-theme="dark"] .fs-panel-body .t-speaker-label { color: rgba(255,255,255,0.4) !important; }
[data-theme="dark"] .fs-panel-body .t-text { color: rgba(255,255,255,0.85) !important; }
[data-theme="dark"] .fs-panel-body .t-item.is-question { background: rgba(255,255,255,0.04); border-left-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .fs-panel-body .answer-item { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .fs-panel-body .ans-question-label { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .fs-panel-body .ans-question-label:hover { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .fs-panel-body .ans-body { color: rgba(255,255,255,0.9) !important; }
[data-theme="dark"] .fs-panel-body .ans-body strong { color: #fff !important; }
[data-theme="dark"] .fs-panel-body .ans-meta { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .fs-panel-body .ans-model { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .fs-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .fs-panel-body { scrollbar-color: rgba(255,255,255,0.1) transparent; }
[data-theme="dark"] .fs-send-bar .send-indicator { color: rgba(255,255,255,0.5); }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    flex-shrink: 0;
    background: var(--white);
    position: relative;
}
/* Soft gradient bottom edge */
.panel-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.panel-head h3 {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--canvas-600);
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.panel-body::-webkit-scrollbar { width: 5px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.panel-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.panel-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
[data-theme="dark"] .panel-body { scrollbar-color: rgba(255,255,255,0.15) transparent; }
[data-theme="dark"] .panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
[data-theme="dark"] .panel-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* --- Answer Mode Pills --- */
.answer-mode-pills {
    display: flex; gap: 2px;
    background: var(--canvas-100);
    padding: 3px; border-radius: var(--radius-md);
}
.mode-pill {
    padding: 5px 14px;
    border: none; background: transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font); font-size: 12.5px; font-weight: 600;
    color: var(--text-muted); cursor: pointer;
    transition: all 0.2s var(--ease);
}
.mode-pill.active {
    background: var(--white);
    color: var(--canvas-900);
    box-shadow: 0 1px 4px rgba(19,19,20,0.06);
}

/* --- Answer Items — flowing text feed --- */
.answer-item {
    margin-bottom: 0;
    padding: 14px 0;
    animation: answerSlideIn 0.4s var(--ease);
    position: relative;
    border-bottom: 1px solid var(--canvas-100);
}
.answer-item:last-child { border-bottom: none; }
@keyframes answerSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ans-question-label {
    font-size: 10.5px; font-weight: 500;
    color: var(--canvas-500); margin-bottom: 6px;
    display: flex; align-items: flex-start; gap: 5px;
    cursor: pointer;
    padding: 0;
    background: transparent;
    border-radius: 0;
    transition: color 0.15s;
    max-width: 100%;
    line-height: 1.5;
}
.ans-question-label:hover {
    color: var(--canvas-700);
    background: transparent;
}
.ans-q-arrow {
    flex-shrink: 0;
    font-size: 7px;
    color: var(--terra);
    transition: transform 0.2s;
    margin-top: 3px;
    display: inline-block;
}
.ans-question-label.expanded .ans-q-arrow {
    transform: rotate(90deg);
}
.ans-q-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.ans-question-label.expanded .ans-q-text {
    white-space: normal;
    overflow: visible;
}
[data-theme="dark"] .ans-question-label {
    color: var(--canvas-500);
    background: transparent;
}
[data-theme="dark"] .ans-question-label:hover {
    color: var(--canvas-300);
    background: transparent;
}
[data-theme="dark"] .answer-item {
    border-bottom-color: rgba(255,255,255,0.06);
}

.ans-body {
    padding: 0 0 0 10px;
    background: transparent;
    border-radius: 0;
    border-left: 2px solid var(--terra);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--canvas-800);
    position: relative;
    overflow: hidden;
    box-shadow: none;
}

.ans-body.bullet-mode ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
}
.ans-body.bullet-mode li {
    position: relative;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.6;
}
.ans-body.bullet-mode li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--terra);
    font-weight: 700;
}

.ans-body strong { font-weight: 700; color: var(--canvas-900); }
.ans-body em { color: var(--terra-700); font-style: normal; font-weight: 600; }

/* [[placeholder]] highlights — bold dashed-underline in terra accent */
.ans-placeholder {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    color: var(--terra);
    cursor: help;
    border-radius: 2px;
    padding: 0 1px;
    transition: background 0.15s;
}
.ans-placeholder:hover {
    background: color-mix(in srgb, var(--terra) 12%, transparent);
}
[data-theme="dark"] .ans-placeholder {
    color: #f4a97a;
}
body.is-electron .ans-placeholder {
    color: #c0501a;
    font-weight: 800;
    text-shadow: 0 0 3px rgba(255,255,255,0.4);
}
[data-theme="dark"] body.is-electron .ans-placeholder {
    color: #f4a97a;
    text-shadow: none;
}

.ans-meta {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
    font-size: 10.5px; color: var(--text-muted);
}
.ans-model {
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-weight: 500;
    color: var(--text-muted);
}
.ans-meta .ans-model::after {
    content: '\00b7';
    margin-left: 6px;
    color: var(--canvas-300);
}

/* Talking Points — compact, inline with flow */
.ans-tp {
    margin-top: 8px;
    padding-top: 0;
    padding-left: 10px;
    border-left: 2px solid var(--canvas-200);
    position: relative;
}
.ans-tp-label {
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--canvas-400); margin-bottom: 4px;
}
.ans-tp ul { list-style: none; padding: 0; margin: 0; }
.ans-tp li {
    font-size: 12px; color: var(--text-secondary);
    padding: 2px 0 2px 14px; position: relative;
    line-height: 1.5;
}
.ans-tp li::before {
    content: "\2022";
    position: absolute; left: 1px;
    color: var(--canvas-300);
    font-size: 12px;
}

/* --- Answer Toolbar --- */
.answer-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 22px;
    background: var(--white);
    flex-shrink: 0;
    position: relative;
}
.answer-toolbar .answer-send-btn {
    margin-left: auto;
    font-size: 12.5px;
    padding: 7px 18px;
}
/* Soft top edge */
.answer-toolbar::before {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.tool-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--canvas-50);
    font-family: var(--font); font-size: 12.5px; font-weight: 500;
    color: var(--text-secondary); cursor: pointer;
    transition: all 0.2s var(--ease);
}
.tool-btn:hover {
    background: var(--terra-50);
    color: var(--terra-700);
    box-shadow: var(--shadow-xs);
}

/* --- Transcript Items --- */
.t-item {
    margin-bottom: 14px;
    animation: transcriptIn 0.35s var(--ease);
}
@keyframes transcriptIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}
.t-item .t-speaker-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.t-item .t-speaker-label.interviewer { color: var(--canvas-500); }
.t-item .t-speaker-label.candidate { color: var(--terra); }
.t-item .t-text {
    font-size: 11.5px;
    color: var(--canvas-700);
    line-height: 1.6;
}
.t-item.is-question {
    padding: 12px 14px;
    background: var(--ivory-warm);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--canvas-400);
    box-shadow: var(--shadow-xs);
}

/* --- AI Generating Animation --- */
.generating-indicator {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    background: var(--terra-50);
    border-radius: var(--radius-full);
    font-size: 13.5px; font-weight: 600;
    color: var(--terra-600);
    animation: genPulse 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(217,119,87,0.06);
}
@keyframes genPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(217,119,87,0.06); }
    50% { box-shadow: 0 2px 16px rgba(217,119,87,0.12); }
}

/* Animated thinking dots */
.gen-dots { display: flex; gap: 4px; align-items: center; }
.gen-dots span {
    width: 5px; height: 5px;
    background: var(--terra);
    border-radius: 50%;
    animation: thinkBounce 1.2s ease-in-out infinite;
}
.gen-dots span:nth-child(2) { animation-delay: 0.15s; }
.gen-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinkBounce {
    0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
    30% { transform: translateY(-6px) scale(1.2); opacity: 1; }
}

/* --- Thinking sparkle --- */
.thinking-sparkle { position: relative; display: inline-block; }
.thinking-sparkle::before,
.thinking-sparkle::after {
    content: '';
    position: absolute;
    width: 3px; height: 3px;
    background: var(--terra);
    border-radius: 50%;
    animation: sparkle 1.5s ease-in-out infinite;
}
.thinking-sparkle::before { top: -4px; left: 50%; }
.thinking-sparkle::after { bottom: -4px; right: 0; animation-delay: 0.5s; }
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* --- Send Bar --- */
.send-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: var(--white);
    flex-shrink: 0;
    position: relative;
}
/* Soft top edge */
.send-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.send-indicator {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 500;
    color: var(--emerald-600);
}
.btn-send {
    padding: 9px 24px;
    font-size: 13.5px;
    border-radius: var(--radius-md);
    /* Never show loading/wait cursor — avoids interviewer suspicion */
    cursor: pointer !important;
}
.btn-send:active,
.btn-send:focus,
.btn-send:disabled {
    cursor: pointer !important;
}

/* Electron desktop: regular arrow cursor everywhere — no hand symbol */
body.is-electron,
body.is-electron *,
body.is-electron *:hover,
body.is-electron *:focus,
body.is-electron *:active,
body.is-electron *:disabled,
body.is-electron button,
body.is-electron button:hover,
body.is-electron a,
body.is-electron a:hover,
body.is-electron .btn,
body.is-electron .btn:hover,
body.is-electron .btn-send,
body.is-electron .btn-send:hover,
body.is-electron .btn-send:active,
body.is-electron .btn-send:disabled {
    cursor: default !important;
}
/* Text inputs keep the text cursor */
body.is-electron input,
body.is-electron input:hover,
body.is-electron textarea,
body.is-electron textarea:hover,
body.is-electron select,
body.is-electron select:hover {
    cursor: text !important;
}
/* Hide cursor during live session for screen-share protection */
body.is-electron #screen-live *,
body.is-electron #screen-live *:hover,
body.is-electron #screen-live *:focus,
body.is-electron #screen-live *:active,
body.is-electron #screen-live *:disabled {
    cursor: none !important;
}

/* --- Stealth Mode Button --- */
.stealth-topbar-btn {
    position: relative;
    border: 1px solid transparent;
    transition: all 0.2s var(--ease);
}
.stealth-topbar-btn:hover {
    background: rgba(16,185,129,0.06);
    color: #10b981;
    border-color: rgba(16,185,129,0.2);
}
.stealth-topbar-btn.active {
    background: rgba(16,185,129,0.1) !important;
    color: #10b981 !important;
    border-color: rgba(16,185,129,0.25) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.08) !important;
}
/* Subtle pulse ring when stealth is on */
.stealth-topbar-btn.active::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--radius-md) + 3px);
    border: 1px solid rgba(16,185,129,0.3);
    animation: stealthRing 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes stealthRing {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 0;   transform: scale(1.06); }
}

/* ==========================================================
   ELECTRON TRANSPARENT OVERLAY MODE
   Desktop is visible through the window. Panels use frosted
   glass so content stays readable over any background.
   ========================================================== */

/* Title bar — slim dark frosted strip */
body.is-electron #electron-titlebar {
    background: rgba(10, 10, 10, 0.55) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Session layout root — transparent */
body.is-electron .live-layout {
    background: transparent !important;
}

/* Top bar — frosted glass */
body.is-electron .live-topbar {
    background: rgba(250, 249, 240, 0.78) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.05);
}

/* Grid area between panels */
body.is-electron .live-main {
    background: transparent !important;
}

/* Panels — the core content panes */
body.is-electron .live-panel {
    background: rgba(255, 255, 255, 0.30) !important;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 4px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

body.is-electron .panel-head {
    background: rgba(255, 255, 255, 0.20) !important;
}
body.is-electron .panel-body {
    background: transparent !important;
}

/* Answer flow — transparent, no card */
body.is-electron .ans-body {
    background: transparent !important;
    border-left: 2px solid var(--terra);
}
body.is-electron .answer-item {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Transcript question items */
body.is-electron .t-item.is-question {
    background: rgba(245,240,227,0.20) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Answer toolbar & send bar */
body.is-electron .answer-toolbar,
body.is-electron .send-bar {
    background: rgba(255,255,255,0.20) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Tool buttons */
body.is-electron .tool-btn {
    background: rgba(255,255,255,0.20) !important;
}

/* Topbar buttons */
body.is-electron .topbar-btn {
    background: rgba(255,255,255,0.20) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Answer mode pills */
body.is-electron .answer-mode-pills {
    background: rgba(255,255,255,0.15) !important;
}
body.is-electron .mode-pill.active {
    background: rgba(255,255,255,0.30) !important;
}

/* Model badge — inline, no pill */
body.is-electron .ans-model {
    background: transparent !important;
}

/* Generating indicator */
body.is-electron .generating-indicator {
    background: rgba(217,119,87,0.12) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Input footer area */
body.is-electron .transcript-input-wrap,
body.is-electron .answer-input-wrap {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Text visibility — dark, high-contrast text ── */
body.is-electron .t-text {
    color: #000 !important;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255,255,255,0.7), 0 1px 2px rgba(255,255,255,0.4);
}
body.is-electron .t-speaker-label {
    color: #111 !important;
    font-weight: 800;
    text-shadow: 0 0 4px rgba(255,255,255,0.6);
}
body.is-electron .t-speaker-label.interviewer {
    color: #000 !important;
}
body.is-electron .t-speaker-label.candidate {
    color: var(--terra) !important;
    text-shadow: 0 0 3px rgba(255,255,255,0.4);
}
body.is-electron .ans-body {
    color: #000 !important;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(255,255,255,0.7), 0 1px 2px rgba(255,255,255,0.4);
}
body.is-electron .ans-body strong {
    color: #000 !important;
    font-weight: 800;
}
body.is-electron .ans-body em {
    color: #6b3410 !important;
    font-weight: 700;
}
body.is-electron .ans-question-label {
    color: #6b3410 !important;
    font-weight: 800;
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
}
body.is-electron .ans-meta {
    color: #222 !important;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
}
body.is-electron .ans-model {
    color: #111 !important;
    font-weight: 700;
}
body.is-electron .panel-head h3 {
    color: #000 !important;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(255,255,255,0.7);
}
body.is-electron .mode-pill {
    color: #222 !important;
    font-weight: 600;
}
body.is-electron .mode-pill.active {
    color: #000 !important;
    font-weight: 700;
}
body.is-electron .tool-btn {
    color: #111 !important;
    font-weight: 600;
}
body.is-electron .send-indicator {
    color: #0d5a3a !important;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
}
body.is-electron .live-company {
    color: #000 !important;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(255,255,255,0.7);
}
body.is-electron .live-role {
    color: #222 !important;
    font-weight: 600;
}
body.is-electron .live-timer {
    color: #000 !important;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
}
body.is-electron .ans-tp-label {
    color: #333 !important;
    font-weight: 700;
}
body.is-electron .ans-tp li {
    color: #1a1a1a !important;
}

/* ── Dark theme — bright, bold text for contrast ── */
[data-theme="dark"] body.is-electron .t-text {
    color: #fff !important;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}
[data-theme="dark"] body.is-electron .t-speaker-label {
    color: #eee !important;
    font-weight: 800;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
}
[data-theme="dark"] body.is-electron .t-speaker-label.candidate {
    color: var(--terra) !important;
    font-weight: 800;
}
[data-theme="dark"] body.is-electron .ans-body {
    color: #fff !important;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}
[data-theme="dark"] body.is-electron .ans-body strong {
    color: #fff !important;
    font-weight: 800;
}
[data-theme="dark"] body.is-electron .ans-body em {
    color: #f0b090 !important;
    font-weight: 700;
}
[data-theme="dark"] body.is-electron .ans-question-label {
    color: #f0b090 !important;
    font-weight: 800;
}
[data-theme="dark"] body.is-electron .ans-meta {
    color: #ccc !important;
    font-weight: 600;
}
[data-theme="dark"] body.is-electron .ans-model {
    color: #eee !important;
    font-weight: 700;
}
[data-theme="dark"] body.is-electron .panel-head h3 {
    color: #fff !important;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(0,0,0,0.7);
}
[data-theme="dark"] body.is-electron .mode-pill {
    color: #ccc !important;
    font-weight: 600;
}
[data-theme="dark"] body.is-electron .mode-pill.active {
    color: #fff !important;
    font-weight: 700;
}
[data-theme="dark"] body.is-electron .tool-btn {
    color: #eee !important;
    font-weight: 600;
}
[data-theme="dark"] body.is-electron .send-indicator {
    color: #4ade80 !important;
    font-weight: 700;
}
[data-theme="dark"] body.is-electron .live-company {
    color: #fff !important;
    font-weight: 800;
}
[data-theme="dark"] body.is-electron .live-role {
    color: #ccc !important;
    font-weight: 600;
}
[data-theme="dark"] body.is-electron .live-timer {
    color: #fff !important;
    font-weight: 700;
}
[data-theme="dark"] body.is-electron .ans-tp-label {
    color: #ccc !important;
    font-weight: 700;
}
[data-theme="dark"] body.is-electron .ans-tp li {
    color: #e0e0e0 !important;
}

/* ── Dark theme background variant ── */
[data-theme="dark"] body.is-electron .live-topbar {
    background: rgba(14, 14, 18, 0.35) !important;
}
[data-theme="dark"] body.is-electron .live-panel {
    background: rgba(22, 22, 30, 0.30) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] body.is-electron .panel-head {
    background: rgba(28, 28, 36, 0.20) !important;
}
[data-theme="dark"] body.is-electron .ans-body {
    background: transparent !important;
    border-left: 2px solid var(--terra);
}
[data-theme="dark"] body.is-electron .answer-item {
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
[data-theme="dark"] body.is-electron .t-item.is-question {
    background: rgba(40,40,45,0.20) !important;
}
[data-theme="dark"] body.is-electron .answer-toolbar,
[data-theme="dark"] body.is-electron .send-bar {
    background: rgba(20,20,25,0.20) !important;
}
[data-theme="dark"] body.is-electron .tool-btn {
    background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] body.is-electron .topbar-btn {
    background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] body.is-electron .answer-mode-pills {
    background: rgba(255,255,255,0.05) !important;
}
[data-theme="dark"] body.is-electron .mode-pill.active {
    background: rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] body.is-electron .ans-model {
    background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] body.is-electron .transcript-input-wrap,
[data-theme="dark"] body.is-electron .answer-input-wrap {
    background: rgba(18, 18, 24, 0.25) !important;
}

/* Electron glass: shared preview panel */
body.is-electron .shared-preview-panel {
    background: rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 4px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
}
body.is-electron .shared-preview-head {
    background: rgba(255,255,255,0.20) !important;
}
body.is-electron .shared-preview-body {
    background: rgba(0,0,0,0.05) !important;
}
/* Electron glass: reference panel */
body.is-electron .reference-panel {
    background: rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 4px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
}
body.is-electron .ref-keyword-item {
    background: rgba(255,255,255,0.15) !important;
}

/* Dark theme electron: new panels */
[data-theme="dark"] body.is-electron .shared-preview-panel {
    background: rgba(22,22,30,0.30) !important;
}
[data-theme="dark"] body.is-electron .shared-preview-head {
    background: rgba(28,28,36,0.20) !important;
}
[data-theme="dark"] body.is-electron .reference-panel {
    background: rgba(22,22,30,0.30) !important;
}
[data-theme="dark"] body.is-electron .ref-keyword-item {
    background: rgba(255,255,255,0.06) !important;
}

/* --- Topbar Separator --- */
.topbar-sep {
    width: 1px;
    height: 20px;
    background: var(--canvas-200);
    margin: 0 4px;
    flex-shrink: 0;
}

/* --- Active Dot on Audio/Mic Buttons --- */
.topbar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.2s var(--ease);
}
.topbar-btn.active .topbar-dot {
    background: var(--emerald-500);
    box-shadow: 0 0 6px rgba(16,185,129,0.4);
}

/* --- Capture Live Dot (green when screen shared) --- */
.capture-live-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s var(--ease);
    pointer-events: none;
}
.capture-live-dot.sharing {
    background: var(--emerald-500);
    box-shadow: 0 0 6px rgba(16,185,129,0.45);
    animation: capturePulse 2s ease-in-out infinite;
}
@keyframes capturePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
#capture-btn { position: relative; }

/* --- Switch Screen Button --- */
.topbar-btn-sm {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border-radius: 6px;
    font-size: 0;
}

/* --- Live Credit Display --- */
.live-timer-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-credit {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--terra);
    padding: 2px 8px;
    background: var(--terra-50);
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}

/* --- Timer Warning (last 2 min of practice) --- */
.live-timer.timer-warning {
    color: var(--red-500);
    animation: timerPulse 1s ease-in-out infinite;
}
@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- Screen Capture in Transcript --- */
.t-capture {
    margin-bottom: 18px;
    animation: transcriptIn 0.35s var(--ease);
}
.t-capture-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.t-capture-img {
    max-width: 100%;
    max-height: 160px;
    border-radius: var(--radius-md);
    border: 1px solid var(--canvas-200);
    box-shadow: var(--shadow-xs);
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s var(--ease);
}
.t-capture-img:hover {
    transform: scale(1.02);
}

/* --- Voice Source Labels --- */
.t-speaker-label.you { color: var(--terra); }
.t-speaker-label.interviewer { color: var(--canvas-500); }

/* --- Interim (live preview) transcript --- */
.t-interim {
    opacity: 0.55;
    border-left: 2px solid var(--terra);
    padding-left: 10px;
    animation: sttPulse 1.5s ease-in-out infinite;
}
.t-interim-text {
    font-style: italic;
    color: var(--canvas-400) !important;
}
@keyframes sttPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.35; }
}

/* --- Session Notification Toast (appears during live session) --- */
.session-notif-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 900;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    max-width: 320px;
    background: var(--white);
    border: 1px solid var(--canvas-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    animation: snToastIn 0.35s var(--ease);
    cursor: pointer;
    transition: opacity 0.3s;
}
@keyframes snToastIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}
.session-notif-toast.sn-toast-out {
    animation: snToastOut 0.3s ease forwards;
}
@keyframes snToastOut {
    to { opacity: 0; transform: translateX(16px); }
}
.sn-toast-icon {
    color: var(--terra);
    flex-shrink: 0;
    margin-top: 1px;
}
.sn-toast-content { flex: 1; min-width: 0; }
.sn-toast-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--canvas-900);
    margin-bottom: 2px;
}
.sn-toast-msg {
    font-size: 11.5px;
    color: var(--canvas-500);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sn-toast-dismiss {
    background: none;
    border: none;
    color: var(--canvas-400);
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.sn-toast-dismiss:hover { color: var(--canvas-700); }

/* Dark theme */
[data-theme="dark"] .session-notif-toast {
    background: var(--bg-lifted);
    border-color: rgba(255,255,255,0.09);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
[data-theme="dark"] .sn-toast-title { color: var(--text-primary); }
[data-theme="dark"] .sn-toast-msg { color: var(--text-secondary); }
[data-theme="dark"] .sn-toast-dismiss { color: var(--text-muted); }
[data-theme="dark"] .sn-toast-dismiss:hover { color: var(--text-secondary); }

/* Electron frosted glass */
body.is-electron .session-notif-toast {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(0,0,0,0.06);
}
[data-theme="dark"] body.is-electron .session-notif-toast {
    background: rgba(30,30,35,0.85);
    border-color: rgba(255,255,255,0.06);
}

/* Electron overrides for new elements */
body.is-electron .topbar-sep {
    background: rgba(255,255,255,0.12);
}
body.is-electron .live-credit {
    background: rgba(217,119,87,0.12);
    color: #6b3410;
    font-weight: 700;
}
body.is-electron .t-capture-img {
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] body.is-electron .topbar-sep {
    background: rgba(255,255,255,0.08);
}
[data-theme="dark"] body.is-electron .live-credit {
    background: rgba(217,119,87,0.15);
    color: #f0b090;
}
[data-theme="dark"] .topbar-sep {
    background: var(--canvas-700);
}
[data-theme="dark"] .live-credit {
    background: rgba(217,119,87,0.15);
}
[data-theme="dark"] .t-capture-img {
    border-color: var(--canvas-700);
}

/* --- Mobile Controls Bar (hidden on desktop, shown in mobile footer) --- */
.mobile-controls-bar {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    /* Safe area for iPhone home indicator and Android gesture bar */
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid var(--canvas-100);
}
.mc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: var(--canvas-50);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.mc-btn svg { width: 15px; height: 15px; }
.mc-btn.active {
    background: var(--canvas-900);
    color: var(--white);
    opacity: 1;
}
/* Inactive state: dim toggleable buttons so active/inactive is clearly distinct */
.mc-btn:not(.active):not(.mc-send) {
    opacity: 0.55;
}
.mc-btn:hover:not(.active):not(.mc-send) { background: var(--canvas-100); opacity: 0.85; }
.mc-spacer { flex: 1; }
.mc-btn.mc-send {
    background: var(--canvas-900);
    color: var(--white);
    width: 38px;
    height: 34px;
    border-radius: 10px;
}
.mc-btn.mc-send:hover { background: var(--canvas-800); }
[data-theme="dark"] .mobile-controls-bar { background: var(--bg-card); border-top-color: rgba(255,255,255,0.09); }
[data-theme="dark"] .mc-btn { background: var(--bg-elevated); color: var(--text-secondary); }
[data-theme="dark"] .mc-btn.active { background: var(--bg-lifted); color: var(--text-primary); }
[data-theme="dark"] .mc-btn.mc-send { background: var(--bg-lifted); color: var(--text-primary); }
[data-theme="dark"] .topbar-end-btn { background: rgba(239,68,68,0.15); }

/* --- Unified Mobile Feed (hidden on desktop) --- */
.live-unified-feed {
    display: none;
}

.unified-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--canvas-50);
    border-bottom: 1px solid var(--canvas-100);
}
.unified-head h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0;
}
.unified-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}

/* ── Chat bubble layout ── */

/* Transcript items = user/interviewer messages → RIGHT side */
.unified-body .u-transcript {
    max-width: 82%;
    margin-left: auto;
    margin-right: 0;
    padding: 10px 14px;
    background: var(--terra);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
    animation: transcriptIn 0.3s var(--ease);
}
.unified-body .u-transcript.is-question {
    background: var(--terra);
    border-left: none;
    border-radius: 16px 16px 4px 16px;
    padding: 10px 14px;
}
.unified-body .u-speaker {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 3px;
}
.unified-body .u-speaker.interviewer { color: rgba(255,255,255,0.75); }
.unified-body .u-speaker.you { color: rgba(255,255,255,0.85); }
.unified-body .u-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: #fff;
}

/* AI answers = assistant messages → LEFT side */
.unified-body .u-answer {
    max-width: 88%;
    margin-right: auto;
    margin-left: 0;
    background: var(--canvas-75, var(--canvas-50));
    border: 1px solid var(--canvas-100);
    border-radius: 16px 16px 16px 4px;
    overflow: hidden;
    animation: transcriptIn 0.35s var(--ease);
}
.unified-body .u-ans-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--terra);
    padding: 10px 14px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.unified-body .u-ans-label svg { flex-shrink: 0; }
.unified-body .u-ans-body {
    padding: 8px 14px 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-primary);
}
.unified-body .u-ans-body ul {
    margin: 0; padding-left: 16px;
    list-style: disc;
}
.unified-body .u-ans-body li {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.5;
}
.unified-body .u-ans-tp {
    padding: 6px 14px 8px;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.unified-body .u-ans-tp-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.unified-body .u-ans-tp ul {
    margin: 0; padding-left: 14px;
    list-style: disc;
}
.unified-body .u-ans-tp li {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.unified-body .u-ans-meta {
    padding: 4px 14px 8px;
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
}
.unified-body .u-ans-model {
    font-weight: 600;
    background: var(--canvas-100);
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

/* Generating indicator → LEFT aligned like AI bubble */
.unified-body .u-generating {
    max-width: 60%;
    margin-right: auto;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--canvas-75, var(--canvas-50));
    border: 1px solid var(--canvas-100);
    border-radius: 16px 16px 16px 4px;
    animation: transcriptIn 0.3s var(--ease);
}

/* Unified toolbar */
.unified-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--canvas-50);
    border-top: 1px solid var(--canvas-100);
    overflow-x: auto;
}
.unified-toolbar .tool-btn {
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
}

/* Unified send bar */
.unified-send-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--canvas-50);
    border-top: 1px solid var(--canvas-100);
}

/* Dark theme for unified feed */
[data-theme="dark"] .unified-head {
    background: var(--bg-card);
    border-bottom-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .unified-body .u-transcript {
    background: var(--terra-600, var(--terra));
}
[data-theme="dark"] .unified-body .u-transcript.is-question {
    background: var(--terra-600, var(--terra));
}
[data-theme="dark"] .unified-body .u-answer {
    background: var(--bg-elevated);
    border-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .unified-body .u-generating {
    background: var(--bg-elevated);
    border-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .unified-body .u-ans-tp {
    border-top-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .unified-body .u-ans-model {
    background: rgba(255,255,255,0.09);
}
[data-theme="dark"] .unified-toolbar {
    background: var(--bg-card);
    border-top-color: rgba(255,255,255,0.09);
}
[data-theme="dark"] .unified-send-bar {
    background: var(--bg-card);
    border-top-color: rgba(255,255,255,0.09);
}

/* Dark theme for new panels (non-electron) */
[data-theme="dark"] .shared-preview-panel {
    background: var(--bg-card);
}
[data-theme="dark"] .shared-preview-head {
    background: var(--bg-card);
}
[data-theme="dark"] .shared-preview-body {
    background: var(--bg-elevated);
}
[data-theme="dark"] .shared-preview-placeholder {
    color: var(--text-muted);
}
[data-theme="dark"] .shared-preview-fullscreen {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
[data-theme="dark"] .shared-preview-fullscreen:hover {
    background: rgba(217,119,87,0.15);
    color: var(--terra);
}
[data-theme="dark"] .reference-panel {
    background: var(--bg-card);
}
[data-theme="dark"] .ref-keyword-item {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
[data-theme="dark"] .ref-keyword-item:hover {
    background: rgba(217,119,87,0.1);
}
/* (Dark fullscreen overlay styles moved inline with .fullscreen-overlay section above) */

/* --- Responsive --- */
/* --- Mobile PiP Shared Screen Preview --- */
.mobile-pip {
    display: none; /* shown via mobile media query */
    position: absolute;
    top: 10px;
    left: 10px;
    width: 120px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--canvas-900);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 1.5px rgba(255,255,255,0.1);
    z-index: 20;
    cursor: move;
}
#mobile-pip-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
#mobile-pip-video.active {
    display: block;
}
.mobile-pip-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,0.4);
}
#mobile-pip-video.active ~ .mobile-pip-placeholder {
    display: none;
}
.mobile-pip-fullscreen {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.15s ease;
}
.mobile-pip-fullscreen:hover,
.mobile-pip-fullscreen:active {
    background: var(--terra);
    transform: scale(1.1);
}
/* Green border when sharing */
.mobile-pip.is-sharing {
    box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 2px rgba(16,185,129,0.5);
}

/* --- Mobile Reference Dropdown --- */
.mobile-ref-dropdown {
    position: absolute;
    top: 8px;
    left: 136px; /* clear the 120px PiP + gap */
    right: 8px;
    z-index: 15;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--canvas-200);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    max-height: 50vh;
    overflow-y: auto;
    animation: mobileRefIn 0.25s ease;
}
@keyframes mobileRefIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.mobile-ref-body {
    padding: 12px;
}
.mobile-ref-body .ref-keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.mobile-ref-body .ref-keyword-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--canvas-700);
    background: var(--canvas-50);
    border: 1px solid var(--canvas-100);
}
.mobile-ref-body .ref-keyword-item::before {
    width: 4px;
    height: 4px;
}
.mobile-ref-body .ref-keyword-item.ref-keyword-heading {
    width: 100%;
    font-size: 10px;
    padding: 6px 4px 2px;
    border: none;
    background: transparent;
    color: var(--canvas-500);
    border-radius: 0;
}
.mobile-ref-body .ref-keyword-item.ref-keyword-heading:first-child {
    padding-top: 0;
}
[data-theme="dark"] .mobile-ref-dropdown {
    background: rgba(22,22,30,0.95);
    border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .mobile-ref-body .ref-keyword-item {
    background: var(--bg-elevated);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}
[data-theme="dark"] .mobile-pip {
    background: #111;
}

/* --- Mobile Topbar Quick Buttons (ref, fullscreen) --- */
.topbar-mobile-btn {
    display: none; /* shown in mobile media query */
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: var(--canvas-50);
    color: var(--canvas-600);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.topbar-mobile-btn:hover,
.topbar-mobile-btn:active {
    background: var(--terra-50);
    color: var(--terra);
}
.topbar-mobile-btn.active {
    background: var(--terra);
    color: #fff;
}
[data-theme="dark"] .topbar-mobile-btn {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
[data-theme="dark"] .topbar-mobile-btn:hover {
    background: rgba(217,119,87,0.15);
    color: var(--terra);
}

@media (max-width: 768px) {
    /* Show unified feed, hide separate panels */
    .live-unified-feed {
        display: flex;
        flex-direction: column;
        background: var(--panel-bg, #fff);
        border-radius: var(--radius-lg, 12px);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        min-height: 0;
    }
    .live-panel.answers-panel,
    .live-panel.transcript-panel {
        display: none !important;
    }
    /* Hide left column panels and reference panel on mobile */
    .live-col-left,
    .reference-panel {
        display: none !important;
    }
    .live-main {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        gap: 0;
        padding: 4px;
        overflow: hidden;
    }
    .live-topbar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
        box-shadow: none;
        border-bottom: 1px solid var(--canvas-150, var(--canvas-100));
    }
    [data-theme="dark"] .live-topbar { border-bottom-color: rgba(255,255,255,0.06); }
    [data-theme="dark"] .live-unified-feed { background: var(--bg); }
    /* Hide session title, role, badge, logo, topbar tool buttons */
    .live-top-left { display: none !important; }
    .live-top-right { display: none !important; }
    .topbar-sep { display: none; }
    /* Topbar: status+timer left, conversation pills right */
    .live-topbar { justify-content: space-between; }
    .live-top-center { gap: 10px; }
    .live-indicator { padding: 5px 12px; font-size: 10px; }
    .live-timer { font-size: 12.5px; }
    .live-credit { font-size: 11px; padding: 2px 6px; }
    .generating-indicator { font-size: 12.5px; padding: 10px 16px; }
    /* Move conversation pills into topbar — hide the unified-head row */
    .unified-head { display: none !important; }
    .topbar-conv-pills { display: flex !important; }
    .topbar-conv-pills .answer-mode-pills { padding: 2px; border-radius: 8px; }
    .topbar-conv-pills .mode-pill { font-size: 10.5px; padding: 3px 9px; }
    /* Show mobile controls bar in footer, hide old send bar */
    .mobile-controls-bar { display: flex !important; }
    .unified-send-bar { display: none !important; }
    /* Compact toolbar (Redo/Shorter/Longer/Copy) sits above controls bar */
    .unified-toolbar { padding: 4px 10px; gap: 3px; border-top: none; }
    .unified-toolbar .tool-btn { padding: 3px 7px; font-size: 10px; }
    .unified-toolbar .tool-btn svg { width: 12px; height: 12px; }
    /* Topbar end button */
    .topbar-end-btn { display: flex; }
    /* Send button in controls bar */
    .mc-btn.mc-send {
        background: var(--canvas-900);
        color: var(--white);
    }
    .mc-btn.mc-send:hover { background: var(--canvas-800); }
    /* Hide shortcut bar and guide on mobile — not useful on touch devices */
    .live-shortcut-bar { display: none !important; }
    .shortcut-guide-overlay { display: none !important; }
    /* Show mobile PiP preview + topbar buttons */
    .mobile-pip { display: flex; }
    .topbar-mobile-btn { display: flex; }
    /* Unified feed needs relative for PiP + ref dropdown positioning */
    .live-unified-feed { position: relative; }
    /* Pad unified body top for PiP overlay */
    .unified-body { padding-top: 86px !important; }
}
@media (max-width: 480px) {
    .live-main {
        gap: 0;
        padding: 2px;
    }
    .live-topbar {
        padding: 6px 10px;
        gap: 5px;
    }
    .live-top-center { gap: 6px; }
    .live-indicator { padding: 4px 8px; font-size: 9.5px; }
    .live-timer { font-size: 12px; }
    .topbar-conv-pills .mode-pill { font-size: 10px; padding: 3px 7px; }
    .topbar-end-btn { width: 26px; height: 26px; border-radius: 7px; }
    .topbar-end-btn svg { width: 11px; height: 11px; }
    .mc-btn { width: 30px; height: 30px; border-radius: 8px; }
    .mc-btn svg { width: 14px; height: 14px; }
    .unified-body { padding: 8px; gap: 6px; }
    .unified-body .u-transcript { max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 3px 14px; }
    .unified-body .u-answer { max-width: 90%; border-radius: 14px 14px 14px 3px; }
    .unified-body .u-text { font-size: 12.5px; }
    .unified-body .u-ans-body { font-size: 12.5px; }
    .unified-body .u-ans-body li { font-size: 12px; }
    .unified-toolbar { padding: 3px 8px; gap: 2px; }
    .unified-toolbar .tool-btn { padding: 3px 6px; font-size: 10px; }
    .unified-toolbar .tool-btn svg { width: 11px; height: 11px; }
    .generating-indicator { font-size: 11px; padding: 8px 14px; }
    .live-shortcut-bar { display: none; }
}
@media (max-width: 390px) {
    .mobile-controls-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .mobile-controls-bar::-webkit-scrollbar { display: none; }
}
@media (max-width: 360px) {
    .live-topbar { padding: 5px 8px; }
    .topbar-end-btn { width: 24px; height: 24px; border-radius: 6px; }
    .topbar-end-btn svg { width: 10px; height: 10px; }
    .mc-btn { width: 28px; height: 28px; border-radius: 7px; }
    .mc-btn svg { width: 13px; height: 13px; }
    .mobile-controls-bar { padding: 5px 8px; gap: 3px; }
    .unified-body { padding: 6px; gap: 5px; }
    .unified-body .u-transcript { max-width: 88%; padding: 7px 10px; border-radius: 12px 12px 3px 12px; }
    .unified-body .u-answer { max-width: 92%; border-radius: 12px 12px 12px 3px; }
    .unified-body .u-text { font-size: 12px; }
    .unified-body .u-ans-body { font-size: 12px; padding: 6px 10px 8px; }
    .unified-body .u-ans-body li { font-size: 11px; }
    .unified-body .u-ans-label { padding: 8px 10px 0; font-size: 9.5px; }
}

/* Wide monitors */
@media (min-width: 1440px) {
    .live-main {
        grid-template-columns: 320px 1fr 280px;
    }
}

/* Vertical monitor */
@media (max-aspect-ratio: 3/4) and (min-width: 769px) {
    .live-main {
        grid-template-columns: 1fr;
        grid-template-rows: 180px 1fr auto;
        gap: 8px;
    }
    .live-col-left {
        flex-direction: row;
        gap: 8px;
    }
    .shared-preview-panel {
        max-height: none;
        flex: 1;
    }
    .transcript-panel {
        flex: 1;
    }
    .reference-panel {
        max-height: 200px;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
    .live-main {
        grid-template-columns: 240px 1fr;
    }
    .reference-panel {
        display: none;
    }
}

/* =====================================================
   AUTH PAGE — Clean, readable, professional
   Inspired by Linear / Vercel / Notion sign-in pages
   ===================================================== */

/* --- Nuke ALL effects on auth screen globally --- */
#screen-auth,
#screen-auth *,
#screen-auth *::before,
#screen-auth *::after {
    text-shadow: none !important;
    filter: none !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ========================
   LIGHT MODE
   ======================== */

/* Left panel — clean white */
.auth-left {
    background: #fff !important;
}

/* Logo */
.auth-left .logo-name {
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

/* Heading — bold, dark, unmissable */
.auth-left .auth-box h2 {
    color: #1a1a1a !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 6px !important;
}

/* Subtext — readable gray */
.auth-left .auth-box p {
    color: #6b6b6b !important;
    font-size: 14.5px !important;
    margin-bottom: 28px !important;
}

/* Labels — clear, medium weight */
.auth-left .auth-box .input-group label {
    color: #333 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

/* Inputs — visible border, clean background */
.auth-left .auth-box .input-group input {
    background: #fff !important;
    border: 1.5px solid #d0d0d0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #1a1a1a !important;
    font-size: 14.5px !important;
    padding: 11px 14px !important;
}
.auth-left .auth-box .input-group input:focus {
    border-color: #1a1a1a !important;
    box-shadow: none !important;
    outline: none !important;
    background: #fff !important;
}
.auth-left .auth-box .input-group input::placeholder {
    color: #aaa !important;
}

/* Primary button — solid dark, high contrast */
.auth-left .auth-box .btn-primary {
    background: #1a1a1a !important;
    color: #fff !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: background 0.15s ease !important;
}
.auth-left .auth-box .btn-primary:hover {
    background: #333 !important;
    box-shadow: none !important;
    transform: none !important;
}
/* ── btn-ready glow — overrides the no-glow rule above ── */
.auth-left .auth-box .btn-primary.btn-ready {
    background: var(--terra) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(217,119,87,0.22), 0 6px 24px rgba(217,119,87,0.4) !important;
    transition: background 0.25s ease, box-shadow 0.3s ease !important;
}
.auth-left .auth-box .btn-primary.btn-ready:hover {
    background: var(--terra-600, #C46849) !important;
    box-shadow: 0 0 0 4px rgba(217,119,87,0.28), 0 8px 28px rgba(217,119,87,0.5) !important;
    transform: none !important;
}
[data-theme="dark"] .auth-left .auth-box .btn-primary.btn-ready {
    background: #E07C58 !important;
    box-shadow: 0 0 0 3px rgba(224,124,88,0.25), 0 6px 28px rgba(224,124,88,0.45) !important;
}

/* Ghost button */
.auth-left .auth-box .btn-ghost {
    color: #888 !important;
    font-size: 13.5px !important;
    box-shadow: none !important;
}
.auth-left .auth-box .btn-ghost:hover {
    color: #1a1a1a !important;
    background: #f5f5f5 !important;
    box-shadow: none !important;
}

/* Error banner */
.auth-left .auth-box .auth-error-banner {
    margin-bottom: 10px;
}

/* Right panel */
.auth-right .auth-visual h3 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
.auth-right .auth-visual p {
    color: #999 !important;
    font-size: 13.5px !important;
}


/* ========================
   DARK MODE
   ======================== */

/* Left panel — deep dark warm */
[data-theme="dark"] .auth-left {
    background: var(--bg) !important;
}

/* Logo */
[data-theme="dark"] .auth-left .logo-name {
    color: #e0e0e0 !important;
}

/* Heading — bright white, clearly readable */
[data-theme="dark"] .auth-left .auth-box h2 {
    color: #f0f0f0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* Subtext — medium gray, not faint */
[data-theme="dark"] .auth-left .auth-box p {
    color: #909090 !important;
    font-size: 14.5px !important;
}

/* Labels — light enough to read clearly */
[data-theme="dark"] .auth-left .auth-box .input-group label {
    color: #b0b0b0 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
}

/* Inputs — visible border against dark bg */
[data-theme="dark"] .auth-left .auth-box .input-group input {
    background: var(--bg-elevated) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    font-size: 14.5px !important;
    padding: 11px 14px !important;
}
[data-theme="dark"] .auth-left .auth-box .input-group input:focus {
    border-color: #D97757 !important;
    box-shadow: none !important;
    outline: none !important;
    background: var(--bg-lifted) !important;
}
[data-theme="dark"] .auth-left .auth-box .input-group input::placeholder {
    color: #555 !important;
}

/* Primary button — terracotta, bold, stands out */
[data-theme="dark"] .auth-left .auth-box .btn-primary {
    background: #D97757 !important;
    color: #fff !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
[data-theme="dark"] .auth-left .auth-box .btn-primary:hover {
    background: #e08868 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Ghost button */
[data-theme="dark"] .auth-left .auth-box .btn-ghost {
    color: #808080 !important;
    box-shadow: none !important;
}
[data-theme="dark"] .auth-left .auth-box .btn-ghost:hover {
    color: #ccc !important;
    background: #1e1e22 !important;
    box-shadow: none !important;
}

/* Error banner dark */
[data-theme="dark"] .auth-left .auth-box .auth-error-banner {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.2);
}

/* Right panel — slightly darker for contrast split */
[data-theme="dark"] .auth-right {
    background: #0b0b0e !important;
}
[data-theme="dark"] .auth-right::before,
[data-theme="dark"] .auth-right::after {
    opacity: 0.12 !important;
}
[data-theme="dark"] .auth-right .auth-visual h3 {
    color: #d0d0d0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
[data-theme="dark"] .auth-right .auth-visual p {
    color: #707070 !important;
    font-size: 13.5px !important;
}

/* Auth — mobile responsive (≤767px tablet/mobile) */
@media (max-width: 767px) {
    /* Logo must be white on mobile — dark bg behind floating brand */
    .auth-left .logo.auth-logo-desktop .logo-name { color: #fff !important; }
    .auth-left .logo.auth-logo-desktop .logo-svg { filter: brightness(1.5) !important; }

    .auth-left .auth-box h2 { font-size: 16px !important; margin-bottom: 2px !important; }
    .auth-left .auth-box p { font-size: 12px !important; margin-bottom: 8px !important; }
    .auth-left .auth-box .input-group { margin-bottom: 7px !important; }
    .auth-left .auth-box .input-group label { font-size: 11px !important; margin-bottom: 2px !important; }
    .auth-left .auth-box .input-group input { font-size: 12.5px !important; padding: 8px 16px !important; }
    .auth-left .auth-box .btn-primary { font-size: 12.5px !important; padding: 8px 16px !important; width: 100% !important; display: flex !important; justify-content: center !important; margin-top: 10px !important; line-height: 1.4 !important; box-sizing: border-box !important; }
    .auth-left .auth-box .auth-error-banner { margin-bottom: 6px !important; padding: 8px 10px !important; }
    .auth-left .auth-box .auth-error-text { font-size: 12px !important; }
    .auth-left .auth-box .btn-ghost.btn-full { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; width: auto !important; }
}

/* Auth — small mobile (≤479px) */
@media (max-width: 479px) {
    .auth-left .auth-box h2 { font-size: 14.5px !important; margin-bottom: 1px !important; }
    .auth-left .auth-box p { font-size: 11px !important; margin-bottom: 6px !important; }
    .auth-left .auth-box .input-group { margin-bottom: 5px !important; }
    .auth-left .auth-box .input-group label { font-size: 10.5px !important; margin-bottom: 1px !important; }
    .auth-left .auth-box .input-group input { font-size: 12px !important; padding: 7px 16px !important; }
    .auth-left .auth-box .btn-primary { font-size: 12px !important; padding: 7px 16px !important; width: 100% !important; display: flex !important; justify-content: center !important; margin-top: 8px !important; line-height: 1.4 !important; box-sizing: border-box !important; }
    .auth-left .auth-box .auth-error-banner { margin-bottom: 4px !important; padding: 7px 10px !important; }
    .auth-left .auth-box .auth-error-text { font-size: 11px !important; }
    .auth-left .auth-box .btn-ghost.btn-full { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; width: auto !important; }
}

/* ---- Live Session Shortcut Hint Bar ---- */
.live-shortcut-bar {
    position: fixed;
    bottom: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: rgba(19,19,20,0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    z-index: 900;
    opacity: 0.45;
    transition: opacity 0.25s ease;
    cursor: grab;
    user-select: none;
}
.live-shortcut-bar:active { cursor: grabbing; }
.live-shortcut-bar:hover {
    opacity: 0.9;
}
/* Fullscreen shortcut bar */
.fs-shortcut-bar {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: rgba(19,19,20,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    z-index: 10001;
    opacity: 0.4;
    transition: opacity 0.25s ease;
    cursor: grab;
    user-select: none;
}
.fs-shortcut-bar:active { cursor: grabbing; }
.fs-shortcut-bar:hover { opacity: 0.9; }
.shortcut-hint-key {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    padding: 3px 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.shortcut-hint-key kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
}
.shortcut-hint-key.flash {
    background: rgba(217,119,87,0.3);
    color: #fff;
}
.shortcut-hint-key.flash kbd {
    background: var(--terra);
    color: #fff;
    border-color: var(--terra);
}

/* ---- Shortcut Guide Overlay (shown on session start) ---- */
/* Shortcut guide — floating draggable panel */
.shortcut-guide-overlay {
    position: fixed;
    z-index: 10002;
    animation: sgFadeIn 0.25s ease;
    pointer-events: auto;
}
.shortcut-guide-overlay.fade-out {
    animation: sgFadeOut 0.25s ease forwards;
}
@keyframes sgFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes sgFadeOut { from { opacity: 1; } to { opacity: 0; } }

.shortcut-guide-card {
    background: var(--white);
    border-radius: 14px;
    padding: 0;
    width: 260px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    text-align: center;
    overflow: hidden;
}
.shortcut-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--canvas-50);
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid var(--canvas-100);
}
.shortcut-guide-header:active { cursor: grabbing; }
.shortcut-guide-title {
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--canvas-700);
    margin: 0;
}
.shortcut-guide-close {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border: none; border-radius: 4px;
    background: transparent;
    color: var(--canvas-400);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s;
}
.shortcut-guide-close:hover { background: var(--canvas-100); color: var(--canvas-700); }
.shortcut-guide-subtitle {
    display: none;
}
.shortcut-guide-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
    padding: 6px 0;
}
.shortcut-guide-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    background: transparent;
    border-radius: 0;
}
.shortcut-guide-row:hover { background: var(--canvas-50); }
.shortcut-guide-keys {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--canvas-500);
}
.shortcut-guide-keys kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    color: var(--canvas-700);
    background: var(--white);
    border: 1px solid var(--canvas-200);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.shortcut-guide-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--canvas-600);
}
.shortcut-guide-hint {
    display: none;
}
[data-theme="dark"] .shortcut-guide-card {
    background: var(--canvas-100);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
}
[data-theme="dark"] .shortcut-guide-header { background: rgba(255,255,255,0.04); border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .shortcut-guide-row:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .shortcut-guide-keys kbd {
    background: var(--canvas-100);
    border-color: var(--canvas-300);
    color: var(--canvas-800);
}

/* ---- Pending Feedback Banner (Studio) ---- */
.pending-fb-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 0 0 12px;
    background: linear-gradient(135deg, var(--terra-50), var(--canvas-50));
    border: 1px solid var(--terra-100);
    border-radius: 10px;
    animation: pfbIn 0.3s ease;
}
.pending-fb-banner.pfb-out {
    animation: pfbOut 0.3s ease forwards;
}
@keyframes pfbIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pfbOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
.pfb-icon { font-size: 16px; flex-shrink: 0; }
.pfb-text {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--canvas-700);
}
.pfb-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pfb-btn {
    font-size: 11.5px !important;
    padding: 5px 14px !important;
}
.pfb-dismiss {
    font-size: 11.5px !important;
    padding: 5px 10px !important;
    color: var(--canvas-500) !important;
}
[data-theme="dark"] .pending-fb-banner {
    background: linear-gradient(135deg, rgba(217,119,87,0.08), rgba(255,255,255,0.03));
    border-color: rgba(217,119,87,0.15);
}
[data-theme="dark"] .pfb-text { color: var(--canvas-300); }

/* ============================================
   Landing Pricing Cards — Mobile Overrides
   session.css loads last → !important wins cascade
   ============================================ */
@media (max-width: 767px) {
    .lp-price-card { padding: 24px 18px 20px !important; }
    .lp-price-name { font-size: 18px !important; }
    .lp-price-story { font-size: 13.5px !important; line-height: 1.55 !important; }
    .lp-price-amount { font-size: 25px !important; }
    .lp-price-interval { font-size: 12.5px !important; }
    .lp-price-detail { font-size: 12.5px !important; }
    .lp-price-btn { font-size: 12.5px !important; padding: 9px 20px !important; }
    .lp-price-hero .lp-price-btn { font-size: 12.5px !important; padding: 9px 20px !important; }
    .lp-price-badge { font-size: 9.5px !important; }
    .lp-price-icon { width: 44px !important; height: 44px !important; }
    .lp-pricing-trust { font-size: 12.5px !important; }
}
@media (max-width: 479px) {
    .lp-price-card { padding: 18px 14px !important; }
    .lp-price-name { font-size: 17px !important; }
    .lp-price-story { font-size: 12.5px !important; line-height: 1.5 !important; margin-bottom: 12px !important; }
    .lp-price-amount { font-size: 22px !important; }
    .lp-price-interval { font-size: 11px !important; }
    .lp-price-detail { font-size: 12px !important; margin-bottom: 12px !important; }
    .lp-price-btn { font-size: 12px !important; padding: 7px 18px !important; }
    .lp-price-hero .lp-price-btn { font-size: 12px !important; padding: 7px 18px !important; }
    .lp-price-badge { font-size: 9px !important; padding: 2px 10px !important; }
    .lp-price-icon { width: 36px !important; height: 36px !important; margin-bottom: 10px !important; }
    .lp-pricing-trust { font-size: 11px !important; }
}

/* ── Accessibility: restore focus-visible outline for auth inputs (overrides outline:none !important) ── */
.auth-left .auth-box .input-group input:focus-visible {
    outline: 2px solid #1a1a1a !important;
    outline-offset: 2px !important;
}
[data-theme="dark"] .auth-left .auth-box .input-group input:focus-visible {
    outline: 2px solid #D97757 !important;
    outline-offset: 2px !important;
}