/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* =====================================================
   Smith-Heffa Theme
   Pure white, black, and pharaoh gold
   ===================================================== */

/* ===== CSS Variables ===== */
:root {
    /* Smith-Heffa Brand Colors */
    --pharaoh-gold: #d4af37;
    --pharaoh-gold-deep: #c8a44d;
    --pharaoh-gold-light: #f4e2a3;
    --pure-white: #ffffff;
    --pharaoh-black: #000000;
    --nvidia-green: var(--pharaoh-gold);
    --nvidia-green-dark: var(--pharaoh-gold-deep);
    --nvidia-green-light: var(--pharaoh-gold-light);
    --nvidia-black: var(--pharaoh-black);

    /* Timeline Colors (Live RIVA WebUI palette) */
    --timeline-user: var(--pharaoh-gold);
    --timeline-ai: var(--pharaoh-gold-light);
    --timeline-vad: #f1d98a;
    --timeline-asr: var(--pharaoh-gold-deep);
    --timeline-tts: var(--pure-white);
    --timeline-llm-prefill: #e7c96a;
    --timeline-llm-generate: var(--pharaoh-gold);
    --timeline-ttl: #fff2c2;

    /* Semantic aliases for timeline lanes (Live RIVA WebUI style) */
    --timeline-system: var(--pharaoh-gold-light);
    --timeline-audio: var(--pharaoh-gold);
    --timeline-audio-muted: #9ca3af;   /* User waveform (preview bar + timeline) when muted - gray */
    --mic-button-muted: #5a4a16;
    --mic-preview-bg: rgba(0, 0, 0, 0.4);     /* Preview balloon when unmuted - transparent gray */
    --mic-preview-bg-muted: rgba(90, 74, 22, 0.88);
    --timeline-speech: var(--pharaoh-gold-deep);
    --timeline-speech-partial: var(--pharaoh-gold-light);
    --timeline-llm: var(--pharaoh-gold);
    --timeline-tts-lane: var(--pure-white);
    --timeline-tts-rect: #f4f0e1;
    --timeline-tts-first-audio-line: #fff6d5;

    /* Highlight colors */
    --ttl-highlight: #fff2c2;
    --ttl-band-fill: rgba(212, 175, 55, 0.14);
    --ttl-band-text: rgba(212, 175, 55, 0.92);

    /* Dark Mode Theme */
    --dark-bg-primary: #000000;
    --dark-bg-secondary: #090909;
    --dark-bg-tertiary: #141414;
    --dark-bg-elevated: #0d0d0d;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #e9debb;
    --dark-text-tertiary: #b7a56b;
    --dark-border-color: rgba(212, 175, 55, 0.28);
    --dark-border-hover: rgba(212, 175, 55, 0.54);

    /* Light Mode Theme - NVIDIA-inspired */
    --light-bg-primary: #ffffff;
    --light-bg-secondary: #faf7ef;
    --light-bg-tertiary: #f3ecd8;
    --light-bg-elevated: #ffffff;
    --light-text-primary: #080808;
    --light-text-secondary: #4f4220;
    --light-text-tertiary: #8b7442;
    --light-border-color: rgba(200, 164, 77, 0.38);
    --light-border-hover: rgba(200, 164, 77, 0.7);
    --light-accent-bg: #fbf4de;
    --light-accent-border: #e7d28e;
    --light-chat-user-bg: #f7e7b6;
    --light-chat-user-border: #c8a44d;
    --light-chat-ai-bg: #fffdfa;
    --light-chat-ai-border: #d4af37;

    /* Accent Colors */
    --accent-primary: var(--nvidia-green);
    --accent-hover: var(--nvidia-green-light);
    --accent-active: var(--nvidia-green-dark);

    /* Semantic Colors */
    --success: #76B900;
    --warning: #c8a44d;
    --error: #ef4444;
    --info: #d4af37;

    /* Shadows & Effects */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* NVIDIA Glow Effects */
    --glow-nvidia: 0 0 20px rgba(212, 175, 55, 0.28);
    --glow-nvidia-strong: 0 0 30px rgba(212, 175, 55, 0.48);

    /* Typography */
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-mono: 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-title: 'Outfit', var(--font-sans);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
}

/* Dark Mode (Default) */
[data-theme="dark"], :root {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    --bg-elevated: var(--dark-bg-elevated);
    --bg-hover: rgba(212, 175, 55, 0.12);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: var(--dark-text-tertiary);
    --border-color: var(--dark-border-color);
    --border-hover: var(--dark-border-hover);
    --config-panel-bg-readonly: #121212;
    --config-panel-bg-editable: var(--dark-bg-primary);
}

/* Light Mode */
[data-theme="light"] {
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --bg-tertiary: var(--light-bg-tertiary);
    --bg-elevated: var(--light-bg-elevated);
    --bg-hover: var(--light-accent-bg);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-tertiary: var(--light-text-tertiary);
    --border-color: var(--light-border-color);
    --border-hover: var(--light-border-hover);
    --config-panel-bg-readonly: #f7f2e3;
    --config-panel-bg-editable: var(--light-bg-primary);

    /* Light mode specific tweaks */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 30px -10px rgba(0, 0, 0, 0.18);

    /* Subtle NVIDIA green glow for light mode */
    --glow-nvidia: 0 0 15px rgba(212, 175, 55, 0.14);
    --glow-nvidia-strong: 0 0 25px rgba(212, 175, 55, 0.24);
}

/* Light mode accent backgrounds for better visibility */
[data-theme="light"] .session-item.active {
    background: var(--light-accent-bg);
    border-color: var(--nvidia-green);
}

[data-theme="light"] .config-tab:hover {
    background: var(--light-accent-bg);
}

[data-theme="light"] .chat-bubble.user {
    background: var(--light-chat-user-bg);
    color: var(--light-text-primary);
    border-color: var(--light-chat-user-border);
    border-right-color: var(--light-chat-user-border);
}

[data-theme="light"] .chat-bubble.ai,
[data-theme="light"] .chat-bubble.assistant {
    background: var(--light-chat-ai-bg);
    color: var(--light-text-primary);
    border-color: var(--light-chat-ai-border);
    border-left-color: var(--light-chat-ai-border);
}

/* Enhance NVIDIA green visibility in light mode */
[data-theme="light"] .stat-value,
[data-theme="light"] .timeline-metric-value {
    color: var(--nvidia-green-dark);
}

/* Light mode header with subtle accent */
[data-theme="light"] .header {
    background: var(--bg-primary);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.1);
}

/* Session meta: slightly darker than page to read as "title bar"; keep green left ear like session-item */
[data-theme="light"] .session-meta-container {
    background: rgba(0, 0, 0, 0.06);
    border-top-color: rgba(0, 0, 0, 0.1);
    border-right-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--accent-primary);
    box-shadow: none;
}
[data-theme="light"] .pipeline-config-container {
    background: transparent;
}

/* Light mode timeline with subtle green accent */
[data-theme="light"] .timeline-panel {
    background: var(--bg-primary);
}

[data-theme="light"] .timeline-viz-container {
    background: var(--bg-tertiary);
}

[data-theme="light"] .timeline-scroll-track {
    background: rgba(0, 0, 0, 0.1);
}

/* ===== Base Styles ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

code, pre {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

/* ===== Layout ===== */
.container {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: calc(100vh - 64px);
    overflow: hidden;
}

/* ===== Main Panel (wraps config, chat, timeline) ===== */
.main-panel {
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
}

/* ===== Content Area (config + chat side by side) ===== */
.content-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0; /* allow row to shrink so config/chat panels can scroll internally */
    overflow: hidden;
    transition: grid-template-columns var(--transition-base);
}
.content-area > .config-panel,
.content-area > .chat-panel {
    min-height: 0; /* allow grid items to shrink so inner scroll works */
    overflow: hidden;
}
.content-area.content-area--config-collapsed {
    grid-template-columns: 48px 1fr;
}

/* ===== Header ===== */
.header {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-md) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    height: 64px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--pharaoh-gold) 42%, transparent);
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.14), rgba(255, 255, 255, 0.04));
    color: var(--pharaoh-gold-light);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: all var(--transition-base);
}

.top-link-btn:hover {
    border-color: var(--pharaoh-gold);
    color: #fff4d2;
    box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.24);
}

/* Theme toggle (Auto / Light / Dark) – matches Live RIVA WebUI */
.theme-toggle {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.header-title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.header-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(to bottom, var(--pharaoh-gold-light), var(--pharaoh-gold-deep));
    border-radius: var(--radius-sm);
    box-shadow: var(--glow-nvidia);
}

/* ===== Session List Sidebar ===== */
.session-list {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

.session-list-header {
    padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
    border-bottom: 1px solid var(--border-color);
}

.session-list-subheader {
    padding: var(--space-md) 0 var(--space-sm) 0;
}

.session-list-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.session-count {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.new-session-btn {
    width: 100%;
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--nvidia-green), var(--nvidia-green-dark));
    color: #000000;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md), var(--glow-nvidia);
}

.new-session-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg), var(--glow-nvidia-strong);
}

.new-session-btn:active {
    transform: translateY(0);
}

.session-list-header-secondary {
    padding-top: 0;
    display: grid;
    gap: var(--space-sm);
}

.academy-return-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--transition-base);
}

.academy-return-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.academy-return-btn--gold {
    border-color: color-mix(in srgb, var(--pharaoh-gold) 38%, transparent);
    color: var(--pharaoh-gold-light);
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.14), rgba(255, 255, 255, 0.02));
}

.academy-return-btn--gold:hover {
    border-color: var(--pharaoh-gold);
    color: #fff4d2;
    box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.24);
}

/* Highlight when in setup mode: dull fill (not pressable), thick green border = activated, draws attention to config panel on the right */
.new-session-btn--highlight {
    background: var(--bg-tertiary) !important;
    color: var(--text-tertiary) !important;
    box-shadow: none;
    cursor: default;
    border: 2px solid var(--border-color);
    outline: 4px solid var(--nvidia-green, #76b900);
    outline-offset: 2px;
}
.new-session-btn--highlight:hover {
    transform: none;
    box-shadow: none;
}

.session-items {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}

.session-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: 0;
    transition: all var(--transition-base);
}

.session-item-body {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.session-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.session-item:hover .session-item-body {
    transform: translateX(4px);
}

.session-item.active {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    border-left-width: 4px;
    box-shadow: var(--shadow-md);
}

.session-item-menu-btn {
    flex-shrink: 0;
    padding: var(--space-xs);
    margin: calc(-1 * var(--space-xs)) 0 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-base), background var(--transition-base);
}

.session-item-menu-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.session-item-menu-btn .lucide-inline {
    width: 16px;
    height: 16px;
}

.session-item-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    min-width: 140px;
    padding: var(--space-xs);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.session-item-dropdown.open {
    display: block;
}

.session-item-dropdown button {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-base);
}

.session-item-dropdown button:hover {
    background: var(--bg-hover);
}

.session-item-dropdown button.session-menu-delete:hover {
    background: var(--danger-bg, rgba(220, 53, 69, 0.15));
    color: var(--danger, #dc3545);
}

.session-item-dropdown button .lucide-inline {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.session-item-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.session-item-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

.session-item-metrics {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.session-item-pipeline {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
    font-family: var(--font-mono);
}

.metric-badge {
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ===== Config tabs (NVIDIA-style: link-like with gradient underline) ===== */
.config-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0 var(--space-lg);
    /* Bar is 7px tall at bottom:-18px (18–25px below tab); padding must fit it so nav overflow doesn't clip */
    padding-bottom: 10px;
    border-bottom:2px solid var(--border-color);
    overflow-x: auto;
    min-height: 0;
    flex-shrink: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.config-tabs::-webkit-scrollbar {
    display: none;
}

.config-tab {
    position: relative;
    padding: var(--space-sm) 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: opacity var(--transition-base), color var(--transition-base);
    white-space: nowrap;
    opacity: 0.75;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.config-tab:hover {
    opacity: 1;
}
.config-tab .config-tab-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
/* Pipeline tab icons use timeline colors (icon only) */
.config-tab[data-tab="asr"] .config-tab-icon { color: var(--timeline-asr); }
.config-tab[data-tab="llm"] .config-tab-icon { color: var(--timeline-llm); }
.config-tab[data-tab="tts"] .config-tab-icon { color: var(--timeline-tts); }

.config-tab.active {
    font-weight: 600;
    opacity: 1;
}
/* 7px bar fully inside nav padding (18–25px below tab); overlaps border; z-index paints on top */
.config-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 7px;
    width: 100%;
    background: linear-gradient(to right, #b8e600, var(--nvidia-green));
    border-radius: 9999px;
    z-index: 1;
}
.config-tab.config-tab--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.config-tab.config-tab--disabled .config-tab-icon,
.config-tab.config-tab--disabled .lucide-inline {
    color: var(--text-muted) !important;
}

/* ===== Config Panel ===== */
.config-panel {
    background: var(--config-panel-bg-readonly);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    transition: background-color var(--transition-base);
}
.config-panel.config-panel--editable {
    background: var(--config-panel-bg-editable);
}

/* Locked once session has started (live or stopped): gray background, tabs clickable, form read-only */
.config-panel.config-panel--locked {
    background: var(--config-panel-bg-readonly);
}
.config-panel.config-panel--locked .config-content {
    opacity: 0.9;
}
.config-panel.config-panel--locked .config-tabs {
    pointer-events: auto;
}
/* Disable form interaction when locked; keep #config-tab-content scrollable (scrollbar + wheel) */
.config-panel.config-panel--locked .config-content .config-tab-content .config-form,
.config-panel.config-panel--locked .config-content #config-tab-content .config-form {
    pointer-events: none;
}

/* Collapsed: narrow strip with expand button only */
.config-panel.config-panel--collapsed {
    min-width: 0;
    width: 48px;
}
.config-panel.config-panel--collapsed .config-header,
.config-panel.config-panel--collapsed .config-content {
    display: none !important;
}
.config-panel.config-panel--collapsed .config-expand-strip {
    display: flex !important;
}
.config-expand-strip {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    height: 100%;
    min-height: 80px;
}
.config-expand-btn {
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.config-expand-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.config-expand-btn .lucide-inline {
    width: 20px;
    height: 20px;
}
.config-collapse-btn {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.config-collapse-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.config-collapse-btn .lucide-inline {
    width: 16px;
    height: 16px;
}

/* Green highlight when in setup mode (ready to START session) */
.config-panel--start-ready {
    margin: 2px;
    border: 4px solid var(--nvidia-green, #76b900);
    border-radius: var(--radius-md);
    box-shadow: 0 0 12px rgba(118, 185, 0, 0.25);
}

.config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    flex-shrink: 0;
}

.config-header h3 {
    margin: 0;
}

.config-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.config-auto-hide-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary, #1e1e1e);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.config-auto-hide-btn:hover:not(:disabled) {
    background: var(--bg-tertiary, #2a2a2a);
    color: var(--text-primary);
}
.config-auto-hide-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.config-auto-hide-btn.config-auto-hide-btn--on {
    border-color: var(--nvidia-green, #76b900);
    color: var(--nvidia-green, #76b900);
}
.config-auto-hide-btn .config-auto-hide-icon {
    width: 14px;
    height: 14px;
}

/* ── Preset picker (config header row) ──────────────────────────── */
.preset-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .preset-label { display: none; }
}
.preset-picker {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 1;
    min-width: 0;
}
.preset-select {
    font-size: 0.85rem;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary, #1e1e1e);
    color: var(--text-primary);
    max-width: 160px;
    min-width: 60px;
    text-overflow: ellipsis;
    cursor: pointer;
}
.preset-select:focus {
    border-color: var(--nvidia-green, #76b900);
    outline: none;
}
.preset-save-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary, #1e1e1e);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.preset-save-btn:hover {
    background: var(--bg-tertiary, #2a2a2a);
    color: var(--nvidia-green, #76b900);
    border-color: var(--nvidia-green, #76b900);
}
.preset-save-btn .lucide-inline {
    width: 14px;
    height: 14px;
}

/* ── Preset save modal ──────────────────────────────────────────── */
.preset-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.preset-modal {
    background: var(--bg-primary, #121212);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-lg);
    min-width: 340px;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.preset-modal-header {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}
.preset-modal-body {
    margin-bottom: var(--space-lg);
}
.preset-modal-body label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}
.preset-save-name-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary, #1e1e1e);
    color: var(--text-primary);
    box-sizing: border-box;
}
.preset-save-name-input:focus {
    border-color: var(--nvidia-green, #76b900);
    outline: none;
}
.preset-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
}
.preset-modal-btn {
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md, 6px);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
}
.preset-modal-btn--cancel {
    background: var(--bg-secondary, #1e1e1e);
    color: var(--text-primary);
}
.preset-modal-btn--cancel:hover {
    background: var(--bg-tertiary, #2a2a2a);
    border-color: var(--text-secondary);
}
.preset-modal-btn--save {
    background: var(--nvidia-green, #76b900);
    color: #fff;
    border-color: var(--nvidia-green, #76b900);
    font-weight: 600;
}
.preset-modal-btn--save:hover {
    filter: brightness(1.1);
}
.preset-overwrite-warning {
    margin-top: var(--space-sm, 6px);
    padding: var(--space-xs, 4px) var(--space-sm, 8px);
    font-size: 0.8rem;
    color: #f5a623;
    background: rgba(245, 166, 35, 0.1);
    border: 1px solid rgba(245, 166, 35, 0.3);
    border-radius: var(--radius-sm, 4px);
}

.config-save-default-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary, #1e1e1e);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.config-save-default-btn:hover:not(:disabled) {
    background: var(--bg-tertiary, #2a2a2a);
    color: var(--text-primary);
}

.config-save-default-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.config-content {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden; /* do not scroll here; only #config-tab-content scrolls */
    display: grid;
    grid-template-rows: auto 1fr auto; /* tabs, scrollable content, footer (if shown) */
}

.config-tab-content,
#config-tab-content {
    min-height: 0; /* critical so grid row can shrink and overflow can scroll */
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-lg);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* allow vertical scroll to be controlled on touch */
    overscroll-behavior: contain; /* keep scroll inside this element, don't leak to body */
}

.config-footer {
    flex-shrink: 0;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.config-footer #save-default-config-btn,
.config-footer #reset-default-config-btn {
    flex: 1;
    min-width: 0;
}

.config-section {
    margin-bottom: var(--space-xl);
}

.config-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

/* Read-only config input (Live RIVA WebUI-style) */
.readonly-config-input {
    cursor: not-allowed;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.config-deployment-hint {
    color: var(--text-secondary);
    font-size: 11px;
    display: block;
    margin-top: 4px;
}

/* Nested panel (Advanced ASR Settings) */
.nested-panel {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.nested-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background 0.2s;
}

.nested-panel-header:hover {
    background: var(--bg-tertiary);
}

.nested-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.nested-panel-toggle {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.nested-panel-toggle.expanded {
    transform: rotate(0deg);
}

.nested-panel-content {
    padding: 16px;
    background: var(--bg-primary);
}

/* Config display grid (Model Configuration, VAD read-only rows) */
.config-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.config-grid .config-item {
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 12px;
    min-height: 32px;
    border-bottom: none;
}

.config-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.config-value {
    color: var(--text-primary);
    font-family: inherit;
    font-weight: 600;
    font-size: 11px;
}

.config-value--device {
    display: block;
    padding: 6px 10px;
    margin-top: 4px;
    background: var(--surface-hover, rgba(255, 255, 255, 0.06));
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

/* VAD Tuning (sliders + presets) */
.vad-tuning-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vad-slider-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vad-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
}

.vad-slider-value {
    font-family: inherit;
    color: var(--nvidia-green);
    font-weight: 600;
    font-size: 11px;
}

.vad-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.vad-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nvidia-green);
    cursor: pointer;
}

.vad-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nvidia-green);
    cursor: pointer;
    border: none;
}

.vad-presets {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.vad-preset-btn {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.vad-preset-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--nvidia-green);
}

/* Editable Config Forms */
.config-form {
    padding: var(--space-md) 0;
    transition: opacity 0.2s ease;
}

.config-form.config-updated {
    opacity: 0.8;
}

/* Read-only forms */
.config-form.readonly input,
.config-form.readonly select,
.config-form.readonly textarea {
    background: var(--bg-secondary);
    cursor: not-allowed;
    opacity: 0.8;
}
[data-theme="light"] .config-form.readonly input,
[data-theme="light"] .config-form.readonly select,
[data-theme="light"] .config-form.readonly textarea,
[data-theme="light"] .readonly-config-input {
    background: var(--light-bg-tertiary);
    border: 1px solid var(--light-border-color);
    color: var(--light-text-primary);
}

.config-form.readonly input[type="checkbox"],
.config-form.readonly input[type="range"] {
    cursor: not-allowed;
    pointer-events: none;
}

/* Backend Selection Tabs (nested tabs for ASR/TTS) */
.backend-tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.backend-tabs.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.backend-tab {
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.backend-tab:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--nvidia-green);
    color: var(--text-primary);
}

.backend-tab.active {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.1), rgba(118, 185, 0, 0.05));
    border-color: var(--nvidia-green);
    color: var(--nvidia-green);
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(118, 185, 0, 0.2);
}

.backend-tab:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Traditional tab style for speech-api-tabs (ASR/TTS backend row: RIVA | REST API | Realtime API) */
.backend-tabs.speech-api-tabs {
    gap: 0;
    margin-bottom: var(--space-lg);
    padding-bottom: 0;
    border-bottom: 1px solid var(--border-color);
    align-items: stretch;
}

.backend-tabs.speech-api-tabs .backend-tab.speech-api-tab {
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition-base), border-color var(--transition-base);
    white-space: normal;
    line-height: 1.25;
    text-align: center;
}

.backend-tabs.speech-api-tabs .backend-tab.speech-api-tab:hover:not(:disabled) {
    color: var(--text-primary);
    background: transparent;
    border-color: transparent;
}

.backend-tabs.speech-api-tabs .backend-tab.speech-api-tab.active {
    color: var(--nvidia-green);
    font-weight: 600;
    border-bottom: 2px solid var(--nvidia-green);
    margin-bottom: -1px;
    background: transparent;
    box-shadow: none;
}

.backend-tabs.speech-api-tabs .backend-tab.speech-api-tab:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* NVIDIA RIVA tab: bird icon (green), vertically centered with label */
.speech-api-tab .riva-tab-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.speech-api-tab .riva-tab-icon {
    color: var(--nvidia-green);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.backend-content {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.config-note {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--nvidia-green);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.vision-video-unavailable-banner {
    padding: var(--space-md);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.4;
}
.vision-video-unavailable-banner code {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}
[data-theme="light"] .vision-video-unavailable-banner {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.5);
    color: #1a1d1f;
}
[data-theme="light"] .vision-video-unavailable-banner code {
    background: rgba(0, 0, 0, 0.06);
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    transition: all var(--transition-base);
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--nvidia-green);
    box-shadow: 0 0 0 3px rgba(118, 185, 0, 0.1);
}

.form-group input[type="range"] {
    width: calc(100% - 60px);
    margin-right: var(--space-sm);
    accent-color: var(--nvidia-green);
}

.form-group .range-value {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nvidia-green);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-mono);
}

.input-hint {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-weight: 500 !important;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--nvidia-green);
}

.radio-label {
    display: flex !important;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-weight: 500 !important;
    margin-bottom: 6px;
}
.radio-label input[type="radio"] {
    cursor: pointer;
    accent-color: var(--nvidia-green);
}

.preset-model-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.checkbox-label--with-icon {
    display: flex !important;
    align-items: center;
    gap: var(--space-sm);
}
.app-config-barge-in-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.9;
}

/* Toggle switch (slide style, like Live RIVA WebUI) */
.form-group-row--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.form-group-row--toggle .toggle-switch {
    flex-shrink: 0;
}
.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: 0.3s ease;
    border-radius: 26px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: 0.3s ease;
    border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-primary, var(--nvidia-green));
    border-color: var(--accent-primary, var(--nvidia-green));
}
.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
    background-color: white;
}
.toggle-switch input:disabled + .toggle-slider {
    cursor: not-allowed;
    opacity: 0.6;
}
.form-group-row--toggle .label-text {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}
.form-group-row--toggle .label-text .lucide-inline {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.9;
}
.app-config-subheading {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}
.app-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.radio-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
}
.radio-label input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--nvidia-green);
    cursor: pointer;
}
.app-number-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    width: fit-content;
}
.btn-stepper {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    background: var(--bg-tertiary);
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 0;
    transition: background var(--transition-base);
}
.app-number-stepper .btn-stepper:last-of-type {
    border-right: none;
    border-left: 1px solid var(--border-color);
}
.btn-stepper:hover:not(:disabled) {
    background: var(--surface-hover, rgba(255, 255, 255, 0.06));
}
.app-number-stepper-value {
    min-width: 2.5rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.config-item:last-child {
    border-bottom: none;
}

.config-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.config-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* ===== Chat Panel ===== */
.chat-panel {
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
    overflow-y: auto;
    min-width: 0;
}

/* When config pane is collapsed: session-meta full width, pipeline full width, then row [image+controls 60% | chat+debug 40%] */
.chat-panel.chat-panel--config-collapsed {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 60% 40%;
    gap: var(--space-sm);
}
.chat-panel.chat-panel--config-collapsed .session-meta-container {
    grid-column: 1 / -1;
    grid-row: 1;
}
.chat-panel.chat-panel--config-collapsed .session-meta-container {
    flex-wrap: wrap;
}
.chat-panel.chat-panel--config-collapsed .session-meta-left {
    flex: 1;
    min-width: 0;
}
.session-meta-right {
    display: none;
}
.session-meta-container.session-meta--has-right .session-meta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
    text-align: right;
}
.session-meta-recorded,
.session-meta-filename-right {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}
.session-meta-filename-right .session-filename-label,
.session-meta-filename-right .session-filename-text {
    font-size: inherit;
}
.session-meta-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}
.chat-panel.chat-panel--config-collapsed .pipeline-config-container {
    grid-column: 1 / -1;
    grid-row: 2;
}
.chat-panel.chat-panel--config-collapsed .chat-panel-main-wrap {
    grid-row: 3;
    grid-column: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.chat-panel.chat-panel--config-collapsed .chat-panel-main-wrap .session-image-container {
    flex: 1;
    min-height: 0;
    max-height: none;
}
.chat-panel.chat-panel--config-collapsed .chat-panel-main-wrap .session-image-container.session-image-container--video-aspect {
    flex: 0 0 auto;
    min-height: 0;
}
.chat-panel.chat-panel--config-collapsed .chat-panel-right-col {
    grid-row: 3;
    grid-column: 2;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-panel.chat-panel--config-collapsed .chat-panel-right-col .chat-history {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.chat-panel.chat-panel--config-collapsed .chat-panel-right-col .voice-debug-panel {
    flex-shrink: 0;
    margin-top: var(--space-sm);
}

/* Default: chat-panel-main-wrap is a column (pipeline, image, controls, asr) */
.chat-panel-main-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

/* Right column: chat history + voice debug (default stack; when collapsed, debug at bottom of right col) */
.chat-panel-right-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
    min-height: 0;
    min-width: 0;
}
.chat-panel-right-col .chat-history {
    flex: 1;
    min-height: 0;
}
.chat-panel:not(.chat-panel--config-collapsed) .chat-panel-right-col .voice-debug-panel {
    flex-shrink: 0;
}

/* Pipeline config: transparent grid, device slots + connected pipeline bar */
.pipeline-config-container {
    flex-shrink: 0;
    min-width: 0;
    padding: var(--space-xs) 0;
    margin-bottom: var(--space-sm);
    background: transparent;
    font-size: 0.75rem;
    overflow: visible;
}

/* Server health (Ollama + Riva) row below pipeline in setup */
.server-health-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    margin-bottom: var(--space-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.server-health-status {
    flex: 1;
    min-width: 0;
}
.server-health-check-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 0.75rem;
}

.pipeline-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 10px;
    column-gap: var(--space-sm);
    align-items: center;
    overflow: visible;
    min-width: 0;
}
.pipeline-grid--no-camera {
    grid-template-columns: 1fr 1fr;
}
.pipeline-device-slot {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 0;
}
.pipeline-device-slot-icon {
    display: inline-flex;
    align-items: center;
    padding-right: 8px;
    margin-right: 8px;
    border-right: 1px solid var(--border-color);
}
.pipeline-device-slot-icon .lucide-inline {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.9;
}
.pipeline-device-slot-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.pipeline-device-slot-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pipeline-device-slot--placeholder {
    visibility: hidden;
    min-width: 0;
}
.pipeline-device-slot--placeholder .pipeline-device-slot-icon {
    min-width: 12px;
}
.pipeline-device-type-icon.lucide-inline {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}
/* Center: down arrow between row 1 and row 2 */
.pipeline-arrow-row {
    position: absolute;
    top: 35%;
    left: calc(50% - 12px);
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 8px;
}
.pipeline-arrow-down.lucide-inline {
    width: 12px;
    height: 12px;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.7;
}
/* Row 2: segments with 20px margin left/right; flow uses full width */
.pipeline-flow-row {
    grid-column: 1 / -1;
    margin: 0 28px;
    display: flex;
    overflow: visible;
    min-width: 0;
}
/* Overlay: corner icons in square containers, vertically centered across 1.5–2.5 row */
.pipeline-corner {
    position: absolute;
    top: 50%;
    transform: translateY(0%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.8;
    pointer-events: none;
}
.pipeline-corner .lucide-inline {
    width: 20px;
    height: 20px;
}
.pipeline-corner-left {
    left: 0;
}
.pipeline-corner-right {
    right: 0;
}
.pipeline-flow {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    min-height: 28px;
    gap: 0;
    overflow: visible;
    font-size: 0.6875rem;
    margin-top: -2px;
    padding-bottom: 2px;
}
.pipeline-flow .pipeline-seg { font-size: inherit; }
/* Segment: SVG draws shape with fill + stroke. No clip on segment so stroke isn't cut off; label is clipped to shape. */
.pipeline-seg {
    position: relative;
    flex: 1;
    min-width: 0; /* allow shrink so label ellipsis works */
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: center;
    overflow: visible;
}
.pipeline-seg-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.pipeline-seg-poly {
    fill: var(--bg-tertiary);
    stroke: var(--border-color);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}
/* Stroke only: timeline legend colors (ASR blue, LLM orange, TTS magenta); fill stays gray */
.pipeline-seg-asr .pipeline-seg-poly { stroke: var(--timeline-asr, #1976D2); }
.pipeline-seg-llm .pipeline-seg-poly { stroke: var(--timeline-llm, #FF9800); }
.pipeline-seg-tts .pipeline-seg-poly { stroke: var(--timeline-tts, #EC407A); }
/* Full voice: one segment spanning 3 slots, 45°/135° slants, gradient stroke ASR-blue → TTS-magenta */
.pipeline-seg-realtime {
    flex: 3;
}
.pipeline-seg-realtime .pipeline-seg-poly {
    stroke: url(#pipeline-realtime-stroke);
}
.pipeline-seg-label {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Fixed slant: inset = var(--seg-slant) so angle stays 45°/135° at any width (set by JS) */
    clip-path: polygon(0 0, calc(100% - var(--seg-slant, 20px)) 0, 100% 50%, calc(100% - var(--seg-slant, 20px)) 100%, 0 100%, var(--seg-slant, 20px) 50%);
    -webkit-clip-path: polygon(0 0, calc(100% - var(--seg-slant, 20px)) 0, 100% 50%, calc(100% - var(--seg-slant, 20px)) 100%, 0 100%, var(--seg-slant, 20px) 50%);
}
.pipeline-seg:not(:first-of-type) {
    margin-left: -2px;
}

.session-meta-container {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: 0;
    padding: var(--space-sm) var(--space-md);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

/* Two-line compact layout: left = icon + title; right = Session recorded + filename when available */
.session-meta-container.session-meta-container--two-line {
    align-items: center;
    padding: var(--space-xs) var(--space-md);
}
.session-meta-container.session-meta-container--two-line .session-title {
    margin: 0;
    line-height: 1.25;
}

.session-meta-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}
.session-meta-icon .lucide-inline {
    width: 20px;
    height: 20px;
}

.session-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 2px 0;
    line-height: 1.3;
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.session-meta-line2 {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.session-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: 0.8rem;
}
.session-stats:empty {
    display: none;
}
.session-meta-line3.session-stats:empty {
    display: none;
}

.session-meta-line4.session-filename {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.session-filename-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.session-filename-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.session-filename-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.session-filename-copy:hover {
    color: var(--accent-primary, var(--text-secondary));
    background: var(--bg-tertiary);
}
.session-filename-copy .lucide-inline {
    width: 14px;
    height: 14px;
}

/* Device tags in session-meta: one line, tag/pill style (from Configuration > Devices) */
.device-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}
.device-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.device-tag .lucide-inline {
    width: 12px;
    height: 12px;
    opacity: 0.9;
}
.device-tag--blank .device-tag-placeholder {
    display: inline-block;
    min-width: 20px;
}

.session-stat-item {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.stat-label {
    color: var(--text-tertiary);
    font-weight: 500;
}

.stat-value {
    color: var(--nvidia-green);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1rem;
}

/* ===== Session Image Container ===== */
.session-image-container {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height: 480px;
    margin: 0 auto;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}
/* While in setup (Start overlay visible) and no video yet, keep container 16:9 so it isn't too tall; once video has dimensions (--video-aspect), allow shrink to avoid padding */
.session-image-container:has(.session-control-overlay--start):not(.session-image-container--video-aspect) {
    aspect-ratio: 16 / 7;
    flex-shrink: 0;
}
body[data-limit-session-image-height="true"] .session-image-container:has(.session-control-overlay--start):not(.session-image-container--video-aspect):not(.fullscreen) {
    aspect-ratio: 16 / 7;
    flex-shrink: 0;
}
/* Inner wrapper: in normal mode fills container; in fullscreen becomes centered video frame so overlays sit on video */
.session-image-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* When video is active, JS sets aspect-ratio from video dimensions to avoid gray letterboxing */
.session-image-container.session-image-container--video-aspect {
    max-height: none;
}

/* UI setting: limit session image height so it fits in view without vertical scroll (e.g. 32:9 displays). Driven by body attribute. Exclude .fullscreen so fullscreen mode is unaffected. */
body[data-limit-session-image-height="true"] .session-image-container:not(.fullscreen) {
    max-height: 60vh !important;
    aspect-ratio: auto; /* allow height to be capped; inner content letterboxes via object-fit: contain */
}
body[data-limit-session-image-height="true"] .session-image-container:not(.fullscreen).session-image-container--video-aspect {
    max-height: 60vh !important;
    aspect-ratio: auto;
}
/* Preview (non-collapsed): allow main-wrap and session-image to shrink so 60vh cap is effective */
body[data-limit-session-image-height="true"] .chat-panel:not(.chat-panel--config-collapsed) .chat-panel-main-wrap {
    min-height: 0;
}
body[data-limit-session-image-height="true"] .chat-panel:not(.chat-panel--config-collapsed) .chat-panel-main-wrap .session-image-container:not(.fullscreen) {
    max-height: 60vh !important;
    min-height: 0;
    flex-shrink: 1; /* override base flex-shrink: 0 so item can shrink below intrinsic (aspect-ratio) size */
    aspect-ratio: auto; /* allow height to be capped by max-height; inner video/img will letterbox via object-fit: contain */
}
/* In setup (Start overlay visible) and no video yet: keep container 16:9; once video has dimensions, allow shrink to avoid top/bottom padding */
body[data-limit-session-image-height="true"] .chat-panel:not(.chat-panel--config-collapsed) .chat-panel-main-wrap .session-image-container:not(.fullscreen):has(.session-control-overlay--start):not(.session-image-container--video-aspect) {
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
}
/* With limit-height: let session-image shrink so main-wrap doesn’t scroll; show video at reduced size */
body[data-limit-session-image-height="true"] .chat-panel.chat-panel--config-collapsed .chat-panel-main-wrap .session-image-container:not(.fullscreen) {
    max-height: 60vh !important;
    flex: 1 1 0;
    min-height: 0;
}
body[data-limit-session-image-height="true"] .chat-panel.chat-panel--config-collapsed .chat-panel-main-wrap .session-image-container:not(.fullscreen).session-image-container--video-aspect {
    max-height: 60vh !important;
    flex: 1 1 0;
    min-height: 0;
}

.session-preview-image,
.session-video-feed {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Keep video aspect ratio (contain); container aspect is set from video to minimize letterboxing */
.session-image-container.session-image-container--video-aspect .session-video-feed {
    object-fit: contain;
}

/* Top-right controls: Mirror + Fullscreen (like Live VLM WebUI) */
.fullscreen-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}
.fullscreen-controls .fullscreen-btn {
    position: static;
}
.fullscreen-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.5;
}
.fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: var(--accent-primary);
    opacity: 0.9;
    transform: scale(1.05);
}
.fullscreen-btn svg,
.fullscreen-btn i {
    width: 20px !important;
    height: 20px !important;
}
.mirror-btn {
    flex: 0 0 auto;
}

/* Fullscreen mode: container fills viewport, inner is centered video frame (no stretch, overlays on video) */
.session-image-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 9999;
    margin: 0;
    border-radius: 0;
    border: none;
    aspect-ratio: auto;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
/* Inner fits in viewport using actual video/mjpeg aspect (set by JS from videoWidth/videoHeight or naturalWidth/naturalHeight); fallback 16:9 */
.session-image-container.fullscreen .session-image-inner {
    position: relative;
    width: min(100vw, 100vh * var(--fullscreen-ar-w, 16) / var(--fullscreen-ar-h, 9));
    height: min(100vh, 100vw * var(--fullscreen-ar-h, 9) / var(--fullscreen-ar-w, 16));
    max-width: 100vw;
    max-height: 100vh;
    flex-shrink: 0;
}
.session-image-container.fullscreen .session-image-inner video,
.session-image-container.fullscreen .session-image-inner img.session-video-feed {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.session-image-container.fullscreen .fullscreen-btn {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
}
.session-image-container.fullscreen .fullscreen-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}
.session-image-container.fullscreen .session-control-overlay {
    z-index: 100;
}
.session-image-container.fullscreen .fullscreen-controls {
    z-index: 101;
}

/* Fullscreen speaker (TTS) button: show only in fullscreen, same timeline-ai purple as header */
.fullscreen-controls .fullscreen-btn.speaker-fullscreen-btn {
    display: none;
    border-color: var(--timeline-ai);
}
.session-image-container.fullscreen .fullscreen-controls .fullscreen-btn.speaker-fullscreen-btn {
    display: flex;
}
.fullscreen-controls .fullscreen-btn.speaker-fullscreen-btn.speaker-btn-muted {
    background: var(--timeline-ai);
    border-color: var(--timeline-ai);
    color: #ffffff;
}
.fullscreen-controls .fullscreen-btn.speaker-fullscreen-btn.speaker-btn-muted svg {
    stroke: #ffffff;
}

/* Fullscreen mic-preview-strip: 2× height (96px), lower position; 2x waveform amplitude via JS */
.session-image-container.fullscreen .mic-preview-strip {
    z-index: 100;
    min-height: 96px !important;
    height: 96px !important;
    bottom: 12px;
    flex-shrink: 0;
}

/* Fullscreen conversation overlays: black transparent rectangles with inset spacing */
.fullscreen-ai-bubble,
.fullscreen-user-bubble {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    padding: 14px 18px;
    z-index: 99;
    pointer-events: none;
    max-height: 26vh;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 10px;
    color: white;
}
.session-image-container.fullscreen .fullscreen-ai-bubble {
    display: block;
    top: 80px; /* below STOP, Mirror, Shrink icons (12px + 40px + gap) */
}
/* AI bubble: pharaoh gold for readability on dark fullscreen background */
.session-image-container.fullscreen .fullscreen-ai-bubble .fullscreen-bubble-label,
.session-image-container.fullscreen .fullscreen-ai-bubble .fullscreen-bubble-text {
    color: var(--pharaoh-gold-light);
}
/* You (user) bubble: distance from bottom. Micro-adjust: larger = higher, smaller = lower (closer to mic strip). */
.session-image-container.fullscreen .fullscreen-user-bubble {
    display: block;
    bottom: 120px;
}
.fullscreen-bubble-label {
    font-size: clamp(0.85rem, 2.4vw, 1.15rem);
    font-weight: 600;
    color: var(--nvidia-green-light);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fullscreen-bubble-text {
    font-size: clamp(1.05rem, 2.8vw, 1.5rem);
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.fullscreen-bubble-text:empty::after {
    content: '\00a0';
}

/* Video mirror (flip horizontal) */
.session-image-container.video-mirrored #video-feed,
.session-image-container.video-mirrored #video-feed-mjpeg {
    transform: scaleX(-1);
}

.image-placeholder,
.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-tertiary);
    padding: var(--space-2xl);
    text-align: center;
}

/* Session control overlay: morphs from center (Start) to top-left (Stop) like Live VLM WebUI */
.session-control-overlay {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: top 0.35s ease-out, left 0.35s ease-out, transform 0.35s ease-out;
}
.session-control-overlay .start-btn,
.session-control-overlay .stop-btn {
    pointer-events: auto;
    flex: none;
}
/* Centered (setup): Play/Start button */
.session-control-overlay--start {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Top-left (live): STOP only; mute is on the bottom mic strip */
.session-control-overlay--stop {
    top: var(--space-md);
    left: var(--space-md);
    right: auto;
    bottom: auto;
    transform: none;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-sm);
}
.session-control-overlay--stop .stop-btn--overlay {
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9rem;
    box-shadow: var(--shadow-lg);
    min-width: 5.5rem;
    width: 5.5rem;
    justify-content: center;
}
.session-control-overlay--stop .stop-btn--overlay:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.placeholder-icon {
    font-size: 4rem;
    margin-bottom: var(--space-lg);
    opacity: 0.5;
}

.placeholder-text {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
}

.placeholder-subtext {
    font-size: 0.9rem;
    color: var(--text-tertiary);
}

.image-placeholder.placeholder--sound-only .placeholder-text {
    color: #ef4444;
}

/* Hide placeholder when content is loaded */
.session-preview-image[src]:not([src=""]) + .image-placeholder,
.session-video-feed.active + .video-placeholder {
    display: none;
}

/* Mic preview strip: when muted, red circle button (left) + waveform balloon (right). Circle flips to green + mic icon on hover. */
.mic-preview-strip {
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 12px;
    min-height: 48px;
    height: 48px;
    z-index: 4; /* above session-control-overlay (3) so mute button is clickable in preview */
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto; /* allow clicks on the mute button in setup and live */
}
.mic-preview-strip .mic-mute-preview-btn {
    pointer-events: auto;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: #fff;
    /* Soft glow to avoid sharp edge; single blurred shadow so no expand/contract */
    box-shadow: 0 0 20px 6px rgba(255, 255, 255, 0.28);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    overflow: hidden;
    perspective: 220px;
    display: block;
}
.mic-preview-strip .mic-mute-preview-btn:hover {
    /* Slightly stronger soft glow + subtle ring; no hard edge */
    box-shadow: 0 0 2px 8px rgba(0, 0, 0, 0.22), 0 0 4px 12px rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}
.mic-preview-strip .mic-mute-preview-btn-inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.35s ease; /* flip animates on hover and on unhover (unless just clicked) */
    transform: rotate3d(1, 1, 0, 0deg);
}
.mic-preview-strip .mic-mute-preview-btn-inner.flipped {
    transform: rotate3d(1, 1, 0, 180deg);
}
/* Hover: flip to show opposite face (mic <-> mic-off); shadow/glow expands on button */
.mic-preview-strip .mic-mute-preview-btn:hover .mic-mute-preview-btn-inner {
    transform: rotate3d(1, 1, 0, 180deg);
}
.mic-preview-strip .mic-mute-preview-btn:hover .mic-mute-preview-btn-inner.flipped {
    transform: rotate3d(1, 1, 0, 0deg);
}
/* After click: stay on current face (no flip) while still hovered; on leave only shadow shrinks */
.mic-preview-strip .mic-mute-preview-btn.mic-mute-preview-btn-just-clicked:hover .mic-mute-preview-btn-inner {
    transform: rotate3d(1, 1, 0, 180deg);
}
.mic-preview-strip .mic-mute-preview-btn.mic-mute-preview-btn-just-clicked:hover .mic-mute-preview-btn-inner.flipped {
    transform: rotate3d(1, 1, 0, 180deg);
}
.mic-preview-strip .mic-mute-preview-btn.mic-mute-preview-btn-just-clicked:hover .mic-mute-preview-btn-inner:not(.flipped) {
    transform: rotate3d(1, 1, 0, 0deg);
}
.mic-preview-strip .mic-mute-preview-btn-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.mic-preview-strip .mic-mute-preview-btn-face--unmuted {
    background: var(--timeline-audio, #76B900);
    transform: rotate3d(1, 1, 0, 0deg);
    transition: background 0.2s ease;
}
/* Hover (flip shows opposite face): unmuted face = mic on green; muted face = mic-off on gray */
.mic-preview-strip .mic-mute-preview-btn:hover .mic-mute-preview-btn-face--unmuted {
    background: var(--timeline-audio, #76B900);
}
.mic-preview-strip .mic-mute-preview-btn-face--muted {
    background: var(--mic-button-muted, #006666);
    transform: rotate3d(1, 1, 0, 180deg);
    transition: background 0.2s ease;
}
.mic-preview-strip .mic-mute-preview-btn:hover .mic-mute-preview-btn-face--muted {
    background: var(--mic-button-muted, #006666);
}
.mic-preview-strip .mic-mute-preview-btn .mic-preview-icon {
    width: 24px;
    height: 24px;
}

.mic-waveform-overlay {
    flex: 1;
    min-width: 0;
    min-height: 28px;
    align-self: stretch;
    padding: 8px 0;
    pointer-events: none;
}
.session-image-container.fullscreen .mic-waveform-overlay {
    padding: 20px 0;
}
.mic-waveform-overlay canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.start-btn, .stop-btn {
    flex: 1;
    padding: var(--space-md) var(--space-xl);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    transition: all var(--transition-base);
    white-space: nowrap;
}

.start-btn {
    background: linear-gradient(135deg, var(--nvidia-green), var(--nvidia-green-dark));
    color: white;
    box-shadow: var(--shadow-md), var(--glow-nvidia);
}

.start-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--glow-nvidia-strong);
}

.stop-btn {
    background: linear-gradient(135deg, var(--error), #dc2626);
    color: white;
    box-shadow: var(--shadow-md);
}

.stop-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.session-control .stop-btn {
    flex: 0 0 auto;
    min-width: 11rem;
    width: 11rem;
}

/* Start button loading state */
.start-btn.loading {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    cursor: wait;
}
.spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pipeline status indicators */
.pipeline-status {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
}
.pipeline-status--ok {
    color: var(--nvidia-green, #76b900);
}
.pipeline-status--error {
    color: var(--error, #ef4444);
}

/* ===== Chat History (compact: more lines visible) ===== */
.chat-history {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    min-height: 0;
    padding: 0 var(--space-xs);
}

/* ===== Voice pipeline message log (JSON, like Live RIVA WebUI) ===== */
.voice-debug-panel {
    flex-shrink: 0;
    margin-top: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    max-height: 220px;
    display: flex;
    flex-direction: column;
}
.voice-debug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8rem;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-color);
}
.voice-debug-panel.collapsed .voice-debug-log {
    display: none;
}
.voice-debug-log {
    flex: 1;
    margin: 0;
    padding: var(--space-sm);
    overflow: auto;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
    min-height: 60px;
    max-height: 160px;
}

/* ===== Chat Input (bottom, when Mic = None - Text Only, ChatGPT-style) ===== */
.chat-input-container {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) 0 0;
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-sm);
}
.chat-input {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    resize: none;
    transition: border-color var(--transition-fast);
}
.chat-input:focus {
    outline: none;
    border-color: var(--nvidia-green);
}
.chat-input::placeholder {
    color: var(--text-tertiary);
}

.chat-ptcf-btn {
    flex-shrink: 0;
    min-width: 68px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--pharaoh-gold) 36%, transparent);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.14), rgba(255, 255, 255, 0.04));
    color: var(--pharaoh-gold-light);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: all var(--transition-fast);
}

.chat-ptcf-btn:hover {
    border-color: var(--pharaoh-gold);
    color: #fff4d2;
    transform: translateY(-1px);
}

body[data-historical-preview="true"] #server-health-row,
body[data-historical-preview="true"] #save-default-config-btn,
body[data-historical-preview="true"] #reset-default-config-btn,
body[data-historical-preview="true"] #voice-debug-panel,
body[data-historical-preview="true"] #chat-input-container,
body[data-historical-preview="true"] #speaker-toggle-fullscreen-btn,
body[data-historical-preview="true"] #mirror-video-btn,
body[data-historical-preview="true"] #fullscreen-video-btn,
body[data-historical-preview="true"] #speaker-toggle-btn,
body[data-historical-preview="true"] #settings-btn,
body[data-historical-preview="true"] #preset-save-btn,
body[data-historical-preview="true"] .session-control-overlay {
    display: none !important;
}

body[data-historical-preview="true"] .session-list-subheader h2::after {
    content: " Preview";
    margin-left: 0.35rem;
    color: var(--accent-color);
    font-size: 0.85em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.chat-send-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: var(--nvidia-green);
    color: white;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.chat-send-btn:hover {
    background: var(--nvidia-green-light);
    transform: scale(1.05);
}
.chat-send-btn .lucide-inline {
    width: 18px;
    height: 18px;
}

.chat-bubble {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    animation: slideIn var(--transition-base);
}

.chat-bubble.user {
    border-left: 1px solid #4a6b28;
    border-right: 3px solid var(--info);
    background: #4a6b28;
    color: rgba(255,255,255,0.95);
    border-color: #4a6b28;
    margin-left: auto;
}

.chat-bubble.ai,
.chat-bubble.assistant {
    border-left: 3px solid var(--nvidia-green);
    background: #5a4a6b;
    color: rgba(255,255,255,0.95);
    border-color: #5a4a6b;
    margin-right: 0.5rem;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-avatar {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.chat-bubble .chat-content {
    flex: 1;
    min-width: 0;
}

.chat-bubble .chat-text {
    line-height: 1.4;
}

.chat-text {
    font-size: 0.9rem;
}

.reasoning-block {
    margin-bottom: 6px;
    border: 1px solid rgba(118, 185, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
}
.reasoning-block summary {
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.78rem;
    color: var(--nvidia-green);
    background: rgba(118, 185, 0, 0.08);
    user-select: none;
}
.reasoning-text {
    padding: 6px 10px;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    color: #bbb;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    background: rgba(0, 0, 0, 0.15);
}

/* Light mode: reasoning text must be dark for readability */
[data-theme="light"] .reasoning-block {
    border-color: rgba(90, 143, 0, 0.4);
}
[data-theme="light"] .reasoning-block summary {
    color: var(--nvidia-green-dark);
    background: rgba(118, 185, 0, 0.12);
}
[data-theme="light"] .reasoning-text {
    color: #1a1d1f;
    background: rgba(0, 0, 0, 0.06);
}

/* Confidence / TTL: subtle, small, right-aligned */
.chat-meta {
    display: block;
    font-size: 0.65rem;
    color: var(--text-tertiary);
    opacity: 0.85;
    margin-top: 0.15rem;
    line-height: 1.2;
    text-align: right;
}
.chat-meta .lucide-inline {
    width: 0.9em;
    height: 0.9em;
    vertical-align: -0.15em;
    margin-right: 0.15em;
}
.chat-meta-gap {
    display: inline-block;
    width: 1em;
    min-width: 1em;
}

body[data-smith-heffa-workflow="true"] .new-session-btn {
    background: linear-gradient(135deg, var(--pharaoh-gold-light), var(--pharaoh-gold-deep));
    color: #140f06;
    box-shadow: var(--shadow-md), 0 0 22px rgba(201, 168, 76, 0.24);
}

body[data-smith-heffa-workflow="true"] .new-session-btn--highlight {
    outline: 4px solid var(--pharaoh-gold, #c9a84c);
}

body[data-smith-heffa-workflow="true"] .chat-send-btn {
    background: linear-gradient(135deg, var(--pharaoh-gold-light), var(--pharaoh-gold-deep));
    color: #140f06;
}

body[data-smith-heffa-workflow="true"] .chat-send-btn:hover {
    background: linear-gradient(135deg, #f2de9a, var(--pharaoh-gold));
}

body[data-smith-heffa-workflow="true"] .chat-bubble.user {
    background: linear-gradient(135deg, #17110a, #261b0d);
    border-color: rgba(201, 168, 76, 0.45);
    border-right-color: var(--pharaoh-gold-light);
}

body[data-smith-heffa-workflow="true"] .chat-bubble.ai,
body[data-smith-heffa-workflow="true"] .chat-bubble.assistant {
    background: linear-gradient(135deg, #fffdfa, #f6efdc);
    color: #18120b;
    border-left-color: var(--pharaoh-gold);
    border-color: rgba(201, 168, 76, 0.28);
}

body[data-smith-heffa-workflow="true"] .chat-bubble.ai .chat-meta,
body[data-smith-heffa-workflow="true"] .chat-bubble.assistant .chat-meta {
    color: #8f6c16;
}

body[data-smith-heffa-workflow="true"] .chat-bubble.ai .chat-avatar,
body[data-smith-heffa-workflow="true"] .chat-bubble.assistant .chat-avatar {
    color: #8f6c16;
}

body[data-smith-heffa-workflow="true"] .chat-input {
    border-color: rgba(201, 168, 76, 0.3);
    background: rgba(255, 252, 245, 0.92);
}

body[data-smith-heffa-workflow="true"] .chat-input:focus {
    border-color: var(--pharaoh-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12);
}

body[data-smith-heffa-workflow="true"] .chat-input-container {
    border-top-color: rgba(201, 168, 76, 0.24);
}

body[data-smith-heffa-workflow="true"] .chat-panel,
body[data-smith-heffa-workflow="true"] .chat-panel.chat-panel--config-collapsed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(240px, 1fr) auto;
    gap: var(--space-md);
    overflow-y: auto;
}

body[data-smith-heffa-workflow="true"] .chat-panel .session-meta-container,
body[data-smith-heffa-workflow="true"] .chat-panel .pipeline-config-container,
body[data-smith-heffa-workflow="true"] .chat-panel .chat-panel-main-wrap,
body[data-smith-heffa-workflow="true"] .chat-panel .chat-panel-right-col,
body[data-smith-heffa-workflow="true"] .chat-panel .chat-input-container {
    grid-column: 1;
}

body[data-smith-heffa-workflow="true"] .chat-panel .session-meta-container {
    grid-row: 1;
}

body[data-smith-heffa-workflow="true"] .chat-panel .pipeline-config-container {
    grid-row: 2;
    margin-bottom: 0;
}

body[data-smith-heffa-workflow="true"] .chat-panel .chat-panel-main-wrap {
    grid-row: 3;
    overflow: visible;
}

body[data-smith-heffa-workflow="true"] .chat-panel .chat-panel-right-col {
    grid-row: 4;
    min-height: 280px;
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(23, 17, 10, 0.76), rgba(10, 10, 10, 0.9));
    padding: var(--space-sm);
}

body[data-smith-heffa-workflow="true"] .chat-panel .chat-history {
    padding: var(--space-sm);
    gap: var(--space-md);
}

body[data-smith-heffa-workflow="true"] .chat-panel .chat-input-container {
    grid-row: 5;
    margin-top: 0;
    padding-top: var(--space-md);
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(7, 7, 7, 0.96) 24%);
    z-index: 2;
}

body[data-smith-heffa-workflow="true"] .chat-panel .chat-panel-main-wrap .session-image-container {
    max-height: 260px;
    aspect-ratio: 16 / 5.5;
    border-color: rgba(201, 168, 76, 0.22);
}

body[data-smith-heffa-workflow="true"] .chat-panel .chat-bubble.ai,
body[data-smith-heffa-workflow="true"] .chat-panel .chat-bubble.assistant {
    margin-right: 0;
}

body[data-smith-heffa-workflow="true"] .chat-panel .chat-bubble .chat-text {
    line-height: 1.6;
}

body[data-smith-heffa-workflow="true"] .chat-panel .empty-state {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--pharaoh-gold-light);
}

body[data-smith-heffa-workflow="true"] .chat-panel .config-note {
    border-left-color: var(--pharaoh-gold);
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.08), rgba(255, 255, 255, 0.02));
}

.chat-placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.message-role {
    font-weight: 600;
    color: var(--text-primary);
}

.message-timestamp {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.message-content {
    color: var(--text-primary);
    line-height: 1.6;
}

.empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 1.1rem;
}

/* ===== Timeline Panel (preserve Live RIVA WebUI styling) ===== */
.timeline-panel {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 400px; /* Default height when not overridden by UI Settings */
    min-height: 200px; /* Minimum height */
    max-height: 600px; /* Maximum height */
    padding: var(--space-sm) var(--space-md); /* Reduced padding */
    position: relative;
    transition: height var(--transition-base), min-height var(--transition-base);
}

.timeline-panel.timeline-panel--dragging {
    transition: none;
}

.timeline-panel.timeline-panel--height-auto {
    /* Inline height cleared by JS; uses CSS default above */
}

/* Minimized when Configuration > App > Show Timeline Visualization is unchecked */
.timeline-panel.timeline-panel--minimized {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
}
.timeline-panel.timeline-panel--minimized .timeline-content,
.timeline-panel.timeline-panel--minimized .timeline-metrics,
.timeline-panel.timeline-panel--minimized .timeline-scroll-bar {
    display: none !important;
}
.timeline-panel.timeline-panel--minimized .timeline-resize-handle {
    pointer-events: none;
    opacity: 0.5;
}

/* Resize Handle */
.timeline-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
    z-index: 10;
    transition: background 0.2s ease;
}

.timeline-resize-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.timeline-resize-handle:hover::before,
.timeline-resize-handle.dragging::before {
    background: var(--nvidia-green);
    width: 100px;
    box-shadow: 0 0 8px rgba(118, 185, 0, 0.4);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    flex-shrink: 0;
}

.timeline-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0;
}

.timeline-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.timeline-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 0; /* Allow flex shrink so canvas doesn’t push metrics off */
    padding-bottom: 6px; /* Gap so x-axis time labels are not hidden behind metrics bar */
}

#timeline-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.timeline-gain-label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    margin-right: 4px;
    font-weight: 500;
}

[data-theme="light"] .timeline-gain-label {
    color: var(--text-tertiary, #8a8a8a);
}

.timeline-gain-select {
    font-size: 0.7rem;
    padding: 2px 6px;
    min-width: 4.25em;
    height: 1.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23666' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 18px;
}

.timeline-gain-select:hover {
    border-color: var(--text-tertiary);
}

[data-theme="light"] .timeline-gain-select {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
    color: #5a5a5a;
}

[data-theme="light"] .timeline-gain-select:hover {
    border-color: rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.06);
}

.timeline-ttl-threshold {
    width: 4rem;
    vertical-align: middle;
}
.timeline-ttl-threshold-value {
    font-size: 0.7rem;
    min-width: 1.5em;
    color: var(--text-secondary);
}
.timeline-ttl-threshold-unit {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-left: 1px;
}

.timeline-metrics {
    padding: var(--space-sm) 0;
    background: transparent;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--space-xl);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 4px; /* Gap above stats so x-axis time labels stay visible */
}

/* Timeline Scrollbar */
.timeline-scroll-bar {
    display: none;
    width: 100%;
    height: 20px;
    padding: 0 var(--space-md);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.timeline-scroll-track {
    position: relative;
    width: 100%;
    height: 12px;
    margin-top: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 1px solid var(--border-color);
}

.timeline-scroll-thumb {
    position: absolute;
    height: 100%;
    background: var(--nvidia-green);
    border-radius: var(--radius-md);
    cursor: grab;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(118, 185, 0, 0.4),
                0 0 0 1px rgba(118, 185, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.timeline-scroll-thumb:hover {
    background: var(--nvidia-green-hover);
    box-shadow: 0 3px 8px rgba(118, 185, 0, 0.6),
                0 0 0 2px rgba(118, 185, 0, 0.4);
    transform: scaleY(1.1);
}

.timeline-scroll-thumb:active {
    cursor: grabbing;
    background: var(--nvidia-green-hover);
    box-shadow: 0 2px 4px rgba(118, 185, 0, 0.5),
                0 0 0 2px rgba(118, 185, 0, 0.5);
}

/* Light mode adjustments */
[data-theme="light"] .timeline-scroll-thumb {
    box-shadow: 0 2px 6px rgba(118, 185, 0, 0.3),
                0 0 0 1px rgba(118, 185, 0, 0.4);
    border: 2px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .timeline-scroll-thumb:hover {
    box-shadow: 0 3px 8px rgba(118, 185, 0, 0.5),
                0 0 0 2px rgba(118, 185, 0, 0.5);
}

.timeline-legend {
    display: flex;
    gap: 16px;
    font-size: 11px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

#timelineCanvas {
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    border-radius: 4px;
    display: block;
    flex: 1;
}

/* Timeline scroll bar (below canvas) - REMOVED: duplicate styles, see main scrollbar styles above */

.timeline-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.timeline-metrics {
    padding: var(--space-sm) 0;
    background: transparent;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--space-xl);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 4px; /* Gap above stats so x-axis time labels stay visible */
}

.timeline-metric {
    display: flex;
    gap: var(--space-sm);
}

.timeline-metric-label {
    color: var(--text-tertiary);
}

.timeline-metric-value {
    color: var(--nvidia-green);
    font-family: var(--font-mono);
    font-weight: 600;
}

/* Lucide icons (inline with text) */
.lucide-inline {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    display: inline-block;
}
.header-title-icon.lucide-inline {
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.25em;
}
.placeholder-icon .lucide-inline {
    width: 48px;
    height: 48px;
    color: var(--text-tertiary);
}

/* ===== Buttons ===== */
.icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 1rem;
}

/* Speaker (TTS) toggle: timeline AI purple — border when on, fill when off */
/* #speaker-toggle-btn {
    border-color: var(--timeline-ai);
} */
#speaker-toggle-btn.speaker-btn-muted {
    background: var(--timeline-ai);
    border-color: var(--timeline-ai);
    color: #ffffff;
}
#speaker-toggle-btn.speaker-btn-muted svg {
    stroke: #ffffff;
}

.icon-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: scale(1.05);
}

.icon-btn:active {
    transform: scale(0.95);
}

/* Icon button with text label (e.g. Preset) – allow width to fit content */
.icon-btn.icon-btn--with-label {
    width: auto;
    min-width: 36px;
    padding: 0 10px;
    gap: 6px;
}

/* API Base URL presets (Live RIVA WebUI-style) */
.api-presets-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 220px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: var(--space-xs);
}
.api-preset-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.api-preset-item:hover {
    background: var(--bg-hover);
}
.api-preset-item strong { font-size: 12px; }
.api-preset-item span { font-size: 11px; color: var(--text-secondary); }

.btn-secondary {
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}
.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--nvidia-green);
}
.btn-secondary.btn-sm {
    padding: 2px 8px;
    font-size: 0.8rem;
}

.primary-btn {
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, var(--nvidia-green), var(--nvidia-green-dark));
    color: #000000;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md), var(--glow-nvidia);
}

.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg), var(--glow-nvidia-strong);
}

.primary-btn:active {
    transform: translateY(0);
}

/* Secondary button: same size and alignment as primary, outline/muted style */
.secondary-btn {
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.secondary-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-hover);
}

.secondary-btn:active {
    background: var(--bg-tertiary);
}

/* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* ===== Utility Classes ===== */
.text-nvidia {
    color: var(--nvidia-green);
}

.bg-nvidia {
    background: var(--nvidia-green);
}

.glow-nvidia {
    box-shadow: var(--glow-nvidia);
}

.gradient-nvidia {
    background: linear-gradient(135deg, var(--nvidia-green), var(--nvidia-green-dark));
}

/* ===== Modal Styles ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
}

/* Settings modal: wider 2-pane layout with stable height to avoid flash on tab change */
.modal-content--settings {
    max-width: 720px;
    width: 92%;
}

/* Shortcuts guide: compact modal */
.modal-content--shortcuts {
    max-width: 380px;
}

.shortcuts-list {
    padding: var(--space-md) var(--space-lg);
}

.shortcuts-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm) var(--space-lg);
    margin: 0;
    align-items: baseline;
}

.shortcuts-dl dt {
    margin: 0;
    font-weight: 600;
}

.shortcuts-dl dd {
    margin: 0;
    color: var(--text-secondary);
}

.shortcuts-dl kbd {
    display: inline-block;
    min-width: 2.2em;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 var(--border-color);
}

.modal-content--settings .modal-body {
    min-height: 380px;
}

.settings-panes {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.settings-nav {
    flex-shrink: 0;
    width: 140px;
    padding-right: var(--space-md);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-item {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.settings-nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.settings-nav-item.active {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--bg-tertiary);
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding-left: var(--space-lg);
}

.settings-pane {
    display: none;
}

.settings-pane.active {
    display: block;
}

.settings-label-inline {
    padding: var(--space-xs) 0;
}

.settings-slider-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.settings-slider {
    flex: 1;
    max-width: 200px;
    accent-color: var(--nvidia-green);
}

.settings-slider-value {
    font-variant-numeric: tabular-nums;
    min-width: 2.5em;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

/* UI Settings modal: larger gear icon in header */
#settings-modal .modal-header .lucide-inline,
#settings-modal .modal-header h2 svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

/* Settings Sections */
.settings-section {
    margin-bottom: var(--space-xl);
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h3 {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.settings-item {
    margin-bottom: var(--space-md);
}

.settings-item:last-child {
    margin-bottom: 0;
}

.settings-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    cursor: pointer;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
}

.settings-label:hover {
    background: var(--bg-secondary);
}

.settings-label input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--nvidia-green);
}

.settings-text {
    flex: 1;
}

.settings-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.settings-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===== Local Video Picker ===== */
.local-video-picker {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0;
    margin-top: 8px;
    flex-wrap: wrap;
}

.local-video-picker-loading,
.local-video-picker-empty {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    padding: 8px 0;
}

.local-video-picker-empty code {
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.local-video-thumb {
    flex-shrink: 0;
    width: 130px;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-tertiary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.local-video-thumb:hover {
    border-color: var(--nvidia-green);
}

.local-video-thumb.selected {
    border-color: var(--nvidia-green);
    box-shadow: 0 0 8px rgba(118, 185, 0, 0.4);
}

.local-video-thumb video {
    width: 100%;
    height: 75px;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.local-video-thumb-name {
    padding: 4px 6px;
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.local-video-scenario-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(118, 185, 0, 0.9);
    color: #000;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.4;
    pointer-events: none;
}

.local-video-thumb.has-scenario {
    position: relative;
}

.local-video-thumb.has-scenario.selected .local-video-scenario-badge {
    background: var(--nvidia-green);
}

/* ===== Responsive Design ===== */
/* Wide screens: larger session-list sidebar */
@media (min-width: 1600px) {
    .container {
        grid-template-columns: 360px 1fr;
    }
}

@media (max-width: 1200px) {
    .container {
        grid-template-columns: 220px 1fr;
    }

    .content-area {
        grid-template-columns: 1fr;
    }

    .chat-panel {
        display: grid;
    }
}

@media (max-width: 768px) {
    html, body {
        height: auto;
        min-height: 100%;
    }

    body {
        overflow-y: auto;
    }

    .header {
        height: auto;
        min-height: 64px;
        padding: 12px 16px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .header-right {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .container {
        display: block;
        height: auto;
        min-height: calc(100vh - 64px);
        overflow: visible;
    }

    .session-list {
        display: flex;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0 12px 16px;
    }

    .main-panel,
    .content-area,
    .config-panel,
    .chat-panel,
    .timeline-panel {
        display: block;
        overflow: visible;
        height: auto;
    }

    .content-area {
        grid-template-columns: 1fr;
    }

    .chat-panel.chat-panel--config-collapsed {
        display: block;
    }

    .chat-panel-right-col,
    .chat-panel-main-wrap {
        width: 100%;
    }

    .timeline-panel {
        min-height: 260px;
    }

    body[data-smith-heffa-workflow="true"] .chat-panel .chat-panel-main-wrap .session-image-container {
        max-height: 200px;
        aspect-ratio: 16 / 7;
    }

    body[data-smith-heffa-workflow="true"] .chat-panel .chat-input-container {
        position: static;
        background: transparent;
    }
}