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

/* Inline SVG icons */
.ui-icon {
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
  color: var(--text-muted);
}
/* Accent-colored icons in interactive contexts */
.ui-icon.icon-accent,
.setting-label .ui-icon,
.voice-subgroup-icon .ui-icon,
.voice-mode-icon .ui-icon,
.premium-lock-icon .ui-icon,
.overlay-logo .ui-icon,
.logo-icon .ui-icon {
  color: var(--accent);
}
/* Muted icons for status/inline text */
.ui-icon.icon-muted {
  color: var(--text-dim);
}
/* Agent list/emoji fallback icons */
.agent-item-emoji .ui-icon,
.agent-avatar-fallback .ui-icon,
.agent-avatar-emoji .ui-icon,
.satellite-item-icon .ui-icon {
  color: var(--accent);
}

/* ============================================================================
   TABLE OF CONTENTS (M-33: Added for navigation in 2.1k line file)
   ============================================================================
   
   1. GLOBAL RESET & BASE STYLES
   2. CSS CUSTOM PROPERTIES (:root variables)
   3. ACCESSIBILITY UTILITIES (sr-only, skip-link, focus indicators)
   4. ONBOARDING & OVERLAY SCREENS (unlock, onboarding)
   5. FORM COMPONENTS (inputs, labels, errors, buttons)
   6. LAYOUT STRUCTURE (app, header, panels, side panel)
   7. HEADER & LOGO
   8. MESSAGE AREA & CHAT BUBBLES
   9. MESSAGE ACTIONS
   10. INPUT AREA (text input, voice input, file upload)
   11. MODE TABS (text/voice toggle)
   12. PANELS (settings, history, shortcuts, satellites, dashboard)
   13. BUTTONS & INTERACTIVE ELEMENTS
   14. ANIMATIONS & TRANSITIONS
   15. RESPONSIVE BREAKPOINTS (mobile, tablet, desktop)
   16. UTILITY CLASSES
   
   ============================================================================ */

/* ============================================================================
   1. GLOBAL RESET & BASE STYLES
   ============================================================================ */

/* Screen reader only - visually hidden but accessible */
/* ============================================================================
   3. ACCESSIBILITY UTILITIES
   ============================================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
    
    :root {
      /* Core colors */
      --bg: #000;
      --bg-secondary: rgba(10, 20, 40, 0.95);
      --bg-input: rgba(0, 30, 60, 0.8);
      --accent: #00f0ff;
      --accent-hover: #00c8d8;
      --accent-secondary: #8b5cf6;
      --text: #f1f5f9;
      --text-muted: #8acad8;
      --text-dim: #8ab8c8; /* WCAG AA 4.5:1+ contrast against --bg */
      --text-inverse: #000;
      --border: var(--accent-15);
      
      /* Opacity variants for common colors (M-08: extracted from inline rgba values) */
      --black-05: rgba(0, 0, 0, 0.05);
      --black-10: rgba(0, 0, 0, 0.1);
      --black-20: rgba(0, 0, 0, 0.2);
      --black-30: rgba(0, 0, 0, 0.3);
      --black-40: rgba(0, 0, 0, 0.4);
      --black-50: rgba(0, 0, 0, 0.5);
      --black-80: rgba(0, 0, 0, 0.8);
      --black-85: rgba(0, 0, 0, 0.85);
      
      --white-05: rgba(255, 255, 255, 0.05);
      --white-10: rgba(255, 255, 255, 0.1);
      --white-20: rgba(255, 255, 255, 0.2);
      
      --accent-05: rgba(0, 240, 255, 0.05);
      --accent-10: rgba(0, 240, 255, 0.1);
      --accent-15: rgba(0, 240, 255, 0.15);
      --accent-20: rgba(0, 240, 255, 0.2);
      --accent-30: rgba(0, 240, 255, 0.3);
      --accent-40: rgba(0, 240, 255, 0.4);
      --accent-50: rgba(0, 240, 255, 0.5);
      
      --error-10: rgba(255, 68, 102, 0.1);
      --error-20: rgba(255, 68, 102, 0.2);
      --error-30: rgba(255, 68, 102, 0.3);
      
      --success-20: rgba(0, 255, 136, 0.2);
      
      /* User/Assistant bubbles */
      --user-bubble: rgba(76, 29, 149, 0.4);
      --user-accent: #4c1d95;
      --user-accent-hover: #3b1577;
      --assistant-bubble: rgb(0 30 45 / 90%);
      
      /* Status colors */
      --success: #4ade80;
      --warning: #fbbf24;
      --info: #60a5fa;
      --recording: #ff3366;
      --error: #ef4444;
      --neutral: #6b7280;
      
      /* Decorative */
      --star-color: #fff;
      
      /* Syntax highlighting */
      --syntax-keyword: #c792ea;
      --syntax-string: #c3e88d;
      --syntax-comment: #546e7a;
      --syntax-number: #f78c6c;
      
      /* File type colors */
      --file-js: #f7df1e;
      --file-ts: #3178c6;
      --file-py: #3776ab;
      --file-json: #00ff88;
      --file-html: #e34f26;
      --file-css: #1572b6;
      --file-md: #083fa1;
      
      /* Spacing scale (4px base) */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;

      /* Typography scale */
      --text-xs: 0.75rem;    /* 12px */
      --text-sm: 0.875rem;   /* 14px */
      --text-base: 1rem;     /* 16px */
      --text-lg: 1.125rem;   /* 18px */
      --text-xl: 1.25rem;    /* 20px */
      --text-2xl: 1.5rem;    /* 24px */
      --text-3xl: 2rem;      /* 32px */

      /* Border radius scale */
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-2xl: 24px;
      --radius-full: 9999px;
    }

    /* Accessibility: Skip link */
    .skip-link {
      position: absolute;
      top: -100px;
      left: var(--space-4);
      background: var(--accent);
      color: var(--text-inverse);
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-md);
      z-index: var(--z-tooltip);
      text-decoration: none;
      font-weight: 600;
      transition: top 0.2s;
    }

    .skip-link:focus {
      top: var(--space-4);
    }

    /* Accessibility: Focus indicators */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    button:focus-visible,
    .header-btn:focus-visible,
    .mode-tab:focus-visible,
    .toggle:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
    
    /* Touch optimization: Prevent double-tap zoom on interactive elements */
    button,
    a,
    input,
    textarea,
    select,
    .toggle,
    .mode-tab,
    .header-btn,
    .send-btn,
    .voice-btn,
    .input-btn,
    .setting-row,
    [role="button"],
    [role="tab"],
    [role="switch"] {
      touch-action: manipulation;
    }
    
    /* Onboarding & Unlock Screens */
    /* ============================================================================
   4. ONBOARDING & OVERLAY SCREENS
   ============================================================================ */
.overlay-screen {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: var(--black-85);
      z-index: var(--z-overlay);
      display: none;
      align-items: center;
      justify-content: center;
      padding: var(--space-5);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .overlay-screen.visible {
      display: flex;
    }
    
    .overlay-card {
      background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg) 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8);
      max-width: 400px;
      width: 100%;
      box-shadow: 0 20px 60px var(--black-50), 0 0 40px var(--accent-10);
    }
    
    .overlay-header {
      text-align: center;
      margin-bottom: 28px;
    }
    
    .overlay-logo {
      font-size: var(--text-3xl);
      margin-bottom: var(--space-3);
    }
    
    .overlay-title {
      font-family: var(--font-mono);
      font-size: var(--text-2xl);
      font-weight: 400;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: var(--space-2);
    }
    
    .overlay-subtitle {
      color: var(--text-muted);
      font-size: var(--text-base);
    }
    
    .form-group {
      margin-bottom: var(--space-5);
    }
    
    .form-label {
      display: block;
      font-size: var(--text-sm);
      color: var(--text-muted);
      margin-bottom: var(--space-2);
      letter-spacing: 0.5px;
    }
    
    .form-input {
      width: 100%;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 14px var(--space-4);
      color: var(--text);
      font-size: var(--text-base);
      outline: none;
      transition: all 0.2s;
    }
    
    .form-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 20px var(--accent-15);
    }
    
    .form-input:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    
    .form-input.error {
      border-color: var(--error);
    }
    
    .form-input.success {
      border-color: var(--success);
    }
    
    .form-hint {
      font-size: var(--text-xs);
      color: var(--text-dim);
      margin-top: var(--space-2);
    }
    
    .form-error {
      font-size: var(--text-sm);
      color: var(--error);
      margin-top: var(--space-2);
      display: none;
    }
    
    .form-error.visible {
      display: block;
    }
    
    .url-input-group {
      position: relative;
    }
    
    .url-status {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: var(--text-lg);
    }
    
    .url-status.checking::after {
      content: '\23F3';
      animation: spin 1s linear infinite;
    }
    
    .url-status.valid::after {
      content: '\2713';
      color: var(--success);
    }
    
    .url-status.invalid::after {
      content: '\2717';
      color: var(--error);
    }
    
    @keyframes spin {
      from { transform: translateY(-50%) rotate(0deg); }
      to { transform: translateY(-50%) rotate(360deg); }
    }
    
    .encrypt-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) 0;
      border-top: 1px solid var(--border);
      margin-top: var(--space-2);
    }
    
    .encrypt-label {
      font-size: var(--text-base);
    }
    
    .encrypt-desc {
      font-size: var(--text-xs);
      color: var(--text-dim);
      margin-top: 2px;
    }
    
    .password-fields {
      display: none;
      margin-top: var(--space-4);
      padding-top: var(--space-4);
      border-top: 1px solid var(--border);
    }
    
    .password-fields.visible {
      display: block;
    }
    
    /* ============================================================================
   5. FORM COMPONENTS
   ============================================================================ */
.btn-primary {
      width: 100%;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
      border: none;
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      color: var(--text-inverse);
      font-size: var(--text-base);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: var(--space-2);
    }
    
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 20px var(--accent-30);
    }
    
    .btn-primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
    
    .btn-secondary {
      width: 100%;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 14px;
      color: var(--text-muted);
      font-size: var(--text-base);
      cursor: pointer;
      transition: all 0.2s;
      margin-top: var(--space-3);
    }
    
    .btn-secondary:hover {
      border-color: var(--text-muted);
      color: var(--text);
    }
    
    .forgot-link {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: var(--space-4);
      padding: 0;
      border: none;
      background: none;
      color: var(--text-dim);
      font-size: var(--text-sm);
      font-family: inherit;
      cursor: pointer;
      transition: color 0.2s;
    }
    
    .forgot-link:hover {
      color: var(--text-muted);
    }
    
    /* Forgot password confirmation */
    .forgot-confirm {
      display: none;
      text-align: center;
      padding: var(--space-5);
      background: var(--error-10);
      border: 1px solid var(--error-30);
      border-radius: var(--radius-lg);
      margin-top: var(--space-4);
    }
    
    .forgot-confirm.visible {
      display: block;
    }
    
    .forgot-confirm p {
      font-size: var(--text-sm);
      color: var(--text);
      margin-bottom: var(--space-3);
    }
    
    .forgot-confirm .reassurance {
      font-size: var(--text-sm);
      color: var(--success);
      margin-bottom: var(--space-4);
    }
    
    .forgot-buttons {
      display: flex;
      gap: var(--space-2);
    }
    
    .forgot-buttons button {
      flex: 1;
      padding: var(--space-2);
      border-radius: var(--radius-md);
      font-size: var(--text-sm);
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .btn-danger {
      background: var(--error);
      border: none;
      color: var(--text);
    }

    @media (hover: hover) {
      .btn-danger:hover {
        background: var(--recording);
      }
    }

    .btn-cancel {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
    }

    @media (hover: hover) {
      .btn-cancel:hover {
        border-color: var(--text-muted);
      }
    }
    
    html {
      height: 100%;
      background: var(--bg);
      overscroll-behavior: none;
    }

    body {
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
      /* iOS PWA: fill available viewport height including safe areas */
      min-height: 100vh;
      min-height: -webkit-fill-available;
      /* Prevent Select All from grabbing entire page — allow only in content areas */
      -webkit-user-select: none;
      user-select: none;
    }

    /* Re-enable text selection in content areas */
    input, textarea, [contenteditable="true"] {
      -webkit-user-select: text;
      user-select: text;
    }
    
    /* Starfield background */
    #stars {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      z-index: 0; /* Below everything - intentionally 0 */
      background: var(--bg);
    }
    
    .star {
      position: absolute;
      background: var(--star-color);
      border-radius: 50%;
      animation: twinkle var(--duration) ease-in-out infinite;
    }
    
    @keyframes twinkle {
      0%, 100% { opacity: var(--opacity); }
      50% { opacity: 0.2; }
    }

    /* Accessibility: Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      .star {
        animation: none;
        opacity: var(--opacity, 0.6);
      }
      
      * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
    
    /* Layout wrapper for split view */
    
/* ============================================================================
   6. LAYOUT STRUCTURE
   ============================================================================ */
.layout-wrapper {
      display: flex;
      height: 100%;
      width: 100%;
      position: relative;
    }

    /* Main layout */
    .app {
      display: flex;
      flex-direction: column;
      height: 100%;
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      z-index: var(--z-dropdown);
      transition: margin 0.3s ease, max-width 0.3s ease;
    }

    /* Side panel - hidden by default */
    .side-panel {
      display: none;
      flex-direction: column;
      height: 100%;
      background: var(--bg);
      border-left: 1px solid var(--border);
      overflow: hidden;
    }

    .side-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-2) var(--space-5);
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      flex-shrink: 0;
    }

    .side-panel-title {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: var(--accent);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .side-panel-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: var(--text-xl);
      cursor: pointer;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      border-radius: var(--radius-md);
      transition: color 0.15s;
    }

    .side-panel-close:hover {
      color: var(--text);
    }

    .side-panel-content {
      flex: 1;
      overflow-y: auto;
      padding: var(--space-4);
    }
    
    /* Header - clean, minimal, no fill */
    
/* ============================================================================
   7. HEADER & LOGO
   ============================================================================ */
.header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) var(--space-5);
      padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
      background: transparent;
      position: relative;
      z-index: var(--z-base);
    }

    /* iOS PWA standalone mode — ensure safe area is always respected.
       Some iOS versions don't evaluate env() correctly in standalone PWAs,
       so we use a 44px fallback (standard iOS status bar height). */
    @media all and (display-mode: standalone) {
      .header {
        padding-top: calc(var(--space-4) + env(safe-area-inset-top, 44px));
      }
    }
    
    .header-left {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      min-width: 0;
      overflow: hidden;
    }
    
    .logo-icon {
      font-size: var(--text-xl);
      line-height: 1;
    }

    .logo {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
    }

    .header-wordmark {
      height: 26px;
      width: auto;
      cursor: pointer;
      display: block;
      margin-right: var(--space-2);
    }
    
    .status-badge {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: 1px;
      color: var(--text-dim);
      text-transform: uppercase;
    }
    
    .encryption-badge {
      color: var(--success);
    }
    
    .encryption-badge.warning {
      color: var(--error);
    }
    
    .header-right {
      display: flex;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    /* Header center — mode toggle (desktop only) */
    .header-center {
      display: none; /* Hidden on mobile — bottom tabs used instead */
    }

    .header-mode-btn {
      background: none;
      border: none;
      color: var(--text-dim);
      padding: var(--space-2);
      min-width: 40px;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: var(--radius-md);
      transition: all 0.2s;
    }

    .header-mode-btn:hover {
      color: var(--text);
      background: var(--accent-10);
    }

    .header-mode-btn.active {
      color: var(--accent);
      background: var(--accent-10);
    }

    .header-mode-btn:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--text-dim);
      padding: var(--space-2);
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      border-radius: var(--radius-md);
    }
    
    .header-btn:hover {
      color: var(--accent);
      background: var(--accent-10);
      transform: scale(1.05);
    }
    
    .header-btn.active {
      color: var(--accent);
    }
    
    /* Messages area */
    
/* ============================================================================
   8. MESSAGE AREA & CHAT BUBBLES
   ============================================================================ */
.messages {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden; /* Prevent horizontal scroll */
      overscroll-behavior-y: contain; /* Prevent pull-to-refresh / rubber-band */
      padding: var(--space-4);
      padding-bottom: 160px; /* Fallback — JS dynamically adjusts via ui.js updateMessagesPadding */
      display: flex;
      flex-direction: column;
      gap: var(--space-2); /* Tighter message spacing */
    }
    
    /* Spacer pushes messages to bottom when few, without breaking scroll */
    .messages::before {
      content: '';
      flex: 1;
    }

    /* ── Themed scrollbars ── */
    /* Applied globally to all scrollable containers so every panel matches */
    .messages::-webkit-scrollbar,
    .satellite-list::-webkit-scrollbar,
    .satellite-tab-content::-webkit-scrollbar,
    .satellite-navigator::-webkit-scrollbar,
    .agents-tab-content::-webkit-scrollbar,
    .settings-panel-content::-webkit-scrollbar,
    .text-field::-webkit-scrollbar,
    .split-text-field::-webkit-scrollbar,
    .split-messages::-webkit-scrollbar,
    .activity-messages::-webkit-scrollbar { width: 6px; }

    .messages::-webkit-scrollbar-track,
    .satellite-list::-webkit-scrollbar-track,
    .satellite-tab-content::-webkit-scrollbar-track,
    .satellite-navigator::-webkit-scrollbar-track,
    .agents-tab-content::-webkit-scrollbar-track,
    .settings-panel-content::-webkit-scrollbar-track,
    .text-field::-webkit-scrollbar-track,
    .split-text-field::-webkit-scrollbar-track,
    .split-messages::-webkit-scrollbar-track,
    .activity-messages::-webkit-scrollbar-track { background: transparent; }

    .messages::-webkit-scrollbar-thumb,
    .satellite-list::-webkit-scrollbar-thumb,
    .satellite-tab-content::-webkit-scrollbar-thumb,
    .satellite-navigator::-webkit-scrollbar-thumb,
    .agents-tab-content::-webkit-scrollbar-thumb,
    .settings-panel-content::-webkit-scrollbar-thumb,
    .text-field::-webkit-scrollbar-thumb,
    .split-text-field::-webkit-scrollbar-thumb,
    .split-messages::-webkit-scrollbar-thumb,
    .activity-messages::-webkit-scrollbar-thumb {
      background: var(--accent-30);
      border-radius: 3px;
    }

    .messages::-webkit-scrollbar-thumb:hover,
    .satellite-list::-webkit-scrollbar-thumb:hover,
    .satellite-tab-content::-webkit-scrollbar-thumb:hover,
    .satellite-navigator::-webkit-scrollbar-thumb:hover,
    .agents-tab-content::-webkit-scrollbar-thumb:hover,
    .settings-panel-content::-webkit-scrollbar-thumb:hover,
    .text-field::-webkit-scrollbar-thumb:hover,
    .split-text-field::-webkit-scrollbar-thumb:hover,
    .split-messages::-webkit-scrollbar-thumb:hover,
    .activity-messages::-webkit-scrollbar-thumb:hover {
      background: var(--accent-50);
    }

    /* Firefox scrollbar styling */
    .messages,
    .satellite-list,
    .satellite-tab-content,
    .satellite-navigator,
    .agents-tab-content,
    .settings-panel-content,
    .text-field,
    .split-text-field,
    .split-messages,
    .activity-messages {
      scrollbar-width: thin;
      scrollbar-color: var(--accent-30) transparent;
    }
    
    .message {
      max-width: 85%;
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-xl);
      line-height: 1.45;
      font-size: inherit;
      font-family: var(--font-sans);
      word-wrap: break-word;
      /* Allow text selection — contain keeps Select All within this element (Safari/iOS) */
      user-select: text;
      -webkit-user-select: text;
    }
    
    /* iOS/Safari: contain selection to individual messages */
    @supports (-webkit-user-select: contain) {
      .message {
        -webkit-user-select: contain;
      }
    }
    
    #messages.text-small .message { font-size: var(--text-sm); }
    #messages.text-medium .message { font-size: var(--text-base); }
    #messages.text-large .message { font-size: var(--text-lg); }
    
    .message.user {
      align-self: flex-end;
      background: linear-gradient(135deg, var(--user-bubble), var(--user-accent-hover));
      border: 1px solid var(--accent-30);
      color: var(--text);
      border-bottom-right-radius: var(--radius-sm);
    }
    
    .message.assistant {
      align-self: flex-start;
      background: var(--assistant-bubble);
      border: 1px solid var(--accent-10);
      border-bottom-left-radius: var(--radius-sm);
    }

    .message.assistant::before {
      content: '';
      font-size: var(--text-sm);
    }

    /* Agent avatar styles moved to top-level below .messages block */
    
    /* Queued message indicator */
    .message.queued {
      opacity: 0.7;
      border-style: dashed;
    }
    .message.queued::after {
      content: '';
      display: inline-block;
      width: 14px;
      height: 14px;
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M6.5 7h11'/><path d='M6.5 17h11'/><path d='M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1'/><path d='M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1'/></svg>");
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: var(--space-1);
      right: var(--space-2);
    }
    
    .message img:not(.agent-avatar-img) {
      max-width: 100%;
      border-radius: var(--radius-md);
      margin-top: var(--space-2);
      /* Hide broken images that fail to load (reduces visual flash before onerror) */
      min-height: 0;
    }
    
    /* Suppress broken image icon in browsers */
    .message img:not(.agent-avatar-img)::before {
      content: none;
    }

    .message-image-expired {
      padding: var(--space-3) var(--space-4);
      background: var(--bg-input);
      border: 1px dashed var(--border);
      border-radius: var(--radius-md);
      color: var(--text-dim);
      font-size: var(--text-sm);
      margin-top: var(--space-2);
    }
    
    .message a {
      color: var(--accent);
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
    }
    
    .message a:hover {
      text-decoration-style: solid;
    }

    /* Streaming message indicator - rainbow glow */
    .message.streaming {
      position: relative;
      animation: streamingRainbow 4s linear infinite;
    }
    
    @keyframes streamingRainbow {
      0%   { border-color: #ff4466; box-shadow: 0 0 8px rgba(255,68,102,0.4), 0 0 20px rgba(255,68,102,0.15); }
      16%  { border-color: #ff9f43; box-shadow: 0 0 8px rgba(255,159,67,0.4), 0 0 20px rgba(255,159,67,0.15); }
      33%  { border-color: #ffd32a; box-shadow: 0 0 8px rgba(255,211,42,0.4), 0 0 20px rgba(255,211,42,0.15); }
      50%  { border-color: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.4), 0 0 20px rgba(74,222,128,0.15); }
      66%  { border-color: #00b4d8; box-shadow: 0 0 8px rgba(0,180,216,0.4), 0 0 20px rgba(0,180,216,0.15); }
      83%  { border-color: #c084fc; box-shadow: 0 0 8px rgba(192,132,252,0.4), 0 0 20px rgba(192,132,252,0.15); }
      100% { border-color: #ff4466; box-shadow: 0 0 8px rgba(255,68,102,0.4), 0 0 20px rgba(255,68,102,0.15); }
    }
    
    /* streamPulse dot removed — rainbow border is sufficient */

    /* Stop generation button */
    .stop-generation-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      margin: 0 auto var(--space-2);
      padding: var(--space-2) var(--space-4);
      background: var(--error-20);
      border: 1px solid var(--error);
      border-radius: var(--radius-2xl);
      color: var(--error);
      font-size: var(--text-sm);
      cursor: pointer;
      transition: all 0.2s;
      animation: stopBtnAppear 0.2s ease-out;
    }
    
    .stop-generation-btn:hover {
      background: var(--error-30);
      transform: scale(1.02);
    }
    
    @keyframes stopBtnAppear {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .message.system {
      align-self: center;
      background: none;
      color: var(--text-dim);
      font-size: var(--text-sm);
      padding: var(--space-1) 0;
    }

    .exec-approval-wrapper {
      align-self: center;
      width: min(100%, 720px);
      max-width: min(100%, 720px);
    }

    .exec-approval-card {
      width: 100%;
      max-width: 100%;
      border: 1px solid var(--warning);
      background: linear-gradient(180deg, var(--bg-secondary), color-mix(in srgb, var(--warning) 10%, var(--bg-secondary)));
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
      border-bottom-left-radius: var(--radius-xl);
    }

    .exec-approval-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: var(--space-2);
      flex-wrap: wrap;
    }

    .exec-approval-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--warning);
      color: var(--text-inverse);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .exec-approval-status {
      font-size: var(--text-sm);
      color: var(--text-muted);
      font-weight: 600;
    }

    .exec-approval-status[data-status="allow-once"],
    .exec-approval-status[data-status="allow-always"] {
      color: var(--success);
    }

    .exec-approval-status[data-status="deny"],
    .exec-approval-status[data-status="timeout"],
    .exec-approval-status[data-status="error"] {
      color: var(--error);
    }

    .exec-approval-command {
      font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
      font-size: var(--text-sm);
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-3);
      margin-bottom: var(--space-2);
      overflow-wrap: anywhere;
    }

    .exec-approval-meta {
      display: grid;
      gap: 6px;
      margin-bottom: var(--space-3);
      color: var(--text-muted);
      font-size: var(--text-sm);
    }

    .exec-approval-footer {
      display: flex;
      justify-content: space-between;
      gap: var(--space-2);
      align-items: center;
      flex-wrap: wrap;
    }

    .exec-approval-timer {
      font-size: var(--text-sm);
      color: var(--text);
      font-weight: 600;
    }

    .exec-approval-actions {
      display: flex;
      gap: var(--space-2);
      flex-wrap: wrap;
    }

    .exec-approval-btn {
      appearance: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      font: inherit;
      font-size: var(--text-sm);
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
      color: var(--text);
      background: var(--bg-input);
    }

    .exec-approval-btn:hover:not(:disabled) {
      transform: translateY(-1px);
    }

    .exec-approval-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .exec-approval-btn.allow-once {
      border-color: var(--accent);
      background: var(--accent-10);
    }

    .exec-approval-btn.allow-always {
      border-color: var(--success);
      background: color-mix(in srgb, var(--success) 14%, transparent);
    }

    .exec-approval-btn.deny {
      border-color: var(--error);
      background: var(--error-10);
      color: var(--error);
    }
    /* Message wrapper for timestamp positioning below bubble */
    .message-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 85%;
    }

    .message-wrapper.user {
      align-self: flex-end;
      align-items: flex-end;
    }

    .message-wrapper.assistant {
      align-self: flex-start;
      align-items: flex-start;
    }

    .message-wrapper .message {
      align-self: auto;
      max-width: 100%;
    }

    /* Timestamp styles consolidated in timestamps.css */


    /* Background task indicator */
    .message.background-task {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
      color: var(--text);
      border-radius: var(--radius-md);
      padding: var(--space-2) var(--space-3);
      margin: var(--space-2) 0;
      font-size: var(--text-sm);
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .message.background-task::before {
      content: '???';
      animation: pulse 2s infinite;
    }

    .message.background-task.completed {
      background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    }

    .message.background-task.completed::before {
      content: '?';
      animation: none;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    /* Typing indicator */
    .typing {
      align-self: flex-start;
      background: var(--assistant-bubble);
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-xl);
      border-bottom-left-radius: var(--radius-sm);
      display: flex;
      gap: var(--space-1);
    }
    
    .typing span {
      width: var(--space-2);
      height: var(--space-2);
      background: var(--text-muted);
      border-radius: var(--radius-full);
      animation: bounce 1.4s infinite ease-in-out;
    }
    
    .typing span:nth-child(1) { animation-delay: 0s; }
    .typing span:nth-child(2) { animation-delay: 0.2s; }
    .typing span:nth-child(3) { animation-delay: 0.4s; }
    
    /* Thinking state - shows text instead of dots */
    .typing .thinking-text,
    .typing .tool-text {
      color: var(--text-muted);
      font-size: var(--text-sm);
      white-space: nowrap;
    }
    
    /* Legacy CSS class approach (kept for compatibility) */
    .typing.thinking span:not(.thinking-text) { display: none; }
    .typing.using-tool span:not(.tool-text) { display: none; }


    
    @keyframes bounce {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-6px); }
    }
    
    /* Empty state */
    .empty-state {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-dim);
      text-align: center;
      padding: var(--space-10);
    }
    
    .empty-state svg {
      width: 64px;
      height: 64px;
      margin-bottom: var(--space-4);
      opacity: 0.5;
    }
    
    .empty-state h3 {
      font-size: var(--text-lg);
      margin-bottom: var(--space-2);
      color: var(--text-muted);
    }
    
    .empty-state p {
      font-size: var(--text-base);
    }
    
    /* Mode toggle tabs - at bottom */

/* Agent avatar — small circle next to timestamp on assistant bubbles */
.agent-avatar {
  display: none;
}

.message.assistant .agent-avatar {
  display: inline-block;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
  margin-bottom: 2px;
}

.agent-avatar img,
.agent-avatar-img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 !important;
}

.agent-avatar-emoji,
.message.assistant .agent-avatar.agent-avatar-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 18px;
  border-radius: 50%;
  background: var(--bg-tertiary, #2a2a2a);
  line-height: 1;
  overflow: visible;
  text-align: center;
}

/* ============================================================================
   11. MODE TABS
   ============================================================================ */
.mode-tabs {
      display: flex;
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding-bottom: env(safe-area-inset-bottom);
      margin-top: 0;
      position: relative;
    }

    /* In PWA standalone mode, iOS handles safe area natively — 
       don't double up the bottom padding */
    @media all and (display-mode: standalone) {
      .mode-tabs {
        padding-bottom: 0;
      }
    }
    
    .mode-tab {
      flex: 1;
      padding: 14px var(--space-3);
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: var(--text-sm);
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      position: relative;
      z-index: 1;
    }
    
    /* Inactive tab underline */
    .mode-tab::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: var(--accent);
      border-radius: var(--radius-full);
      transition: width 0.2s ease, box-shadow 0.2s ease;
    }
    
    .mode-tab:hover {
      color: var(--text);
      background: var(--accent-05);
    }
    
    .mode-tab.active {
      color: var(--accent);
      background: var(--accent-10);
      font-weight: 600;
    }
    
    /* Active tab underline indicator */
    .mode-tab.active::after {
      width: 60%;
      box-shadow: 0 0 8px var(--accent);
    }
    
    .mode-tab.active svg {
      filter: drop-shadow(0 0 4px var(--accent));
    }
    
    /* Icon styling for tabs */
    .mode-tab svg {
      transition: transform 0.2s ease, filter 0.2s ease;
    }
    
    .mode-tab:hover svg {
      transform: scale(1.1);
    }
    
    .mode-tab.active svg {
      transform: scale(1.15);
    }
    
    .mode-tab.has-error {
      animation: tab-error-pulse 0.5s ease;
      color: var(--error);
    }
    
    .mode-tab.has-tool {
      animation: tab-tool-pulse 0.3s ease;
      color: var(--success);
    }
    
    @keyframes tab-error-pulse {
      0%, 100% { background: transparent; }
      50% { background: rgba(239, 68, 68, 0.2); }
    }
    
    @keyframes tab-tool-pulse {
      0%, 100% { background: transparent; }
      50% { background: rgba(16, 185, 129, 0.2); }
    }
    
    /* Activity button indicators */
    .header-btn.has-error {
      animation: btn-error-pulse 0.5s ease;
      color: var(--error);
    }
    
    .header-btn.has-tool {
      animation: btn-tool-pulse 0.3s ease;
      color: var(--success);
    }
    
    @keyframes btn-error-pulse {
      0%, 100% { background: transparent; }
      50% { background: rgba(239, 68, 68, 0.3); }
    }
    
    @keyframes btn-tool-pulse {
      0%, 100% { background: transparent; }
      50% { background: rgba(16, 185, 129, 0.3); }
    }
    
    /* Input area */
    
/* ============================================================================
   10. INPUT AREA
   ============================================================================ */
.input-area {
      padding: var(--space-3) var(--space-4) var(--space-3);
      background: transparent;
      border-top: 1px solid var(--border);
      margin-bottom: 0;
    }
    
    /* Image preview */
    .image-preview {
      display: none;
      position: relative;
      margin-bottom: var(--space-3);
      width: fit-content;
      max-width: 100%;
      background: transparent;
      min-height: 0;
      overflow: visible;
    }
    
    .image-preview.visible {
      display: inline-block;
    }
    
    .image-preview img {
      display: block;
      max-height: 120px;
      max-width: 200px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      object-fit: cover;
    }
    
    .preview-remove {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      background: var(--recording);
      color: white;
      border: none;
      cursor: pointer;
      font-size: var(--text-sm);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .file-label {
      display: none;
      padding: var(--space-3) var(--space-4);
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      font-size: var(--text-sm);
      color: var(--text);
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    /* Text input */
    .text-input-row {
      display: none;
      gap: var(--space-2);
      align-items: flex-end;
    }
    
    .text-input-row.active {
      display: flex;
    }
    
    .input-actions {
      display: flex;
      gap: var(--space-1);
    }
    
    .input-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      border-radius: var(--radius-full);
      border: none;
      background: var(--bg-input);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    
    .input-btn:hover {
      background: var(--border);
      color: var(--text);
    }
    
    .input-btn svg {
      width: var(--space-5);
      height: var(--space-5);
    }
    
    .text-field {
      flex: 1;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: var(--radius-2xl);
      padding: var(--space-2) var(--space-4);
      color: var(--text);
      font-size: var(--text-base);
      outline: none;
      transition: border-color 0.15s;
      font-family: var(--font-sans);
      resize: none;
      min-height: var(--space-10);
      max-height: 150px;
      overflow-y: auto;
      line-height: 1.4;
    }
    
    .text-field:focus {
      border-color: var(--accent);
      box-shadow: 0 0 15px var(--accent-20);
    }
    
    .text-field:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    
    .text-field::placeholder {
      color: var(--text-dim);
    }
    
    .send-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      border-radius: var(--radius-full);
      border: none;
      background: var(--accent);
      color: var(--text-inverse, #fff);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      box-shadow: 0 0 20px var(--accent-30);
    }
    
    .send-btn:hover {
      background: var(--accent-hover);
      box-shadow: 0 0 30px var(--accent-40);
    }
    
    .send-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    
    .send-btn svg {
      width: 18px;
      height: 18px;
    }
    
    /* Voice input */
    .voice-input-row {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-5) 0;
    }
    
    .voice-input-row.active {
      display: flex;
    }
    
    /* Voice orb container with rings */
    .voice-orb-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 120px;
    }
    
    .voice-ring {
      position: absolute;
      border-radius: var(--radius-full);
      border: 1px solid var(--white-10);
    }
    
    .voice-ring::before {
      content: '';
      position: absolute;
      width: var(--space-1);
      height: var(--space-1);
      background: var(--accent);
      border-radius: var(--radius-full);
      top: -2px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 8px var(--accent);
    }
    
    .voice-ring-1 {
      width: 100px;
      height: 100px;
      animation: orbit 20s linear infinite;
    }
    
    .voice-ring-2 {
      width: 120px;
      height: 120px;
      animation: orbit 30s linear infinite reverse;
    }
    
    @keyframes orbit {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    .voice-btn {
      width: 80px;
      height: 80px;
      border-radius: var(--radius-full);
      border: 2px solid rgba(180, 180, 200, 0.3);
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      position: relative;
      z-index: 2;
      box-shadow: 0 0 20px rgba(200,200,220,0.2);
      overflow: hidden;
      padding: 0;
    }
    
    .voice-btn canvas {
      width: 100%;
      height: 100%;
      border-radius: var(--radius-full);
    }
    
    .voice-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    
    .voice-btn.recording {
      border-color: var(--recording);
      box-shadow: 0 0 30px rgba(255,80,100,0.5), 0 0 60px rgba(255,80,100,0.3);
      animation: pulse-record 1s infinite;
    }
    
    .voice-btn.realtime-active {
      animation: voiceRainbow 4s linear infinite;
    }
    
    .voice-btn.realtime-active.mic-muted {
      animation: voiceRainbow 4s linear infinite;
      opacity: 0.6;
    }
    
    @keyframes voiceRainbow {
      0%   { border-color: #ff4466; box-shadow: 0 0 20px rgba(255,68,102,0.5), 0 0 50px rgba(255,68,102,0.2); }
      16%  { border-color: #ff9f43; box-shadow: 0 0 20px rgba(255,159,67,0.5), 0 0 50px rgba(255,159,67,0.2); }
      33%  { border-color: #ffd32a; box-shadow: 0 0 20px rgba(255,211,42,0.5), 0 0 50px rgba(255,211,42,0.2); }
      50%  { border-color: #4ade80; box-shadow: 0 0 20px rgba(74,222,128,0.5), 0 0 50px rgba(74,222,128,0.2); }
      66%  { border-color: #00b4d8; box-shadow: 0 0 20px rgba(0,180,216,0.5), 0 0 50px rgba(0,180,216,0.2); }
      83%  { border-color: #a78bfa; box-shadow: 0 0 20px rgba(167,139,250,0.5), 0 0 50px rgba(167,139,250,0.2); }
      100% { border-color: #ff4466; box-shadow: 0 0 20px rgba(255,68,102,0.5), 0 0 50px rgba(255,68,102,0.2); }
    }
    
    .voice-btn.auto-hold {
      box-shadow: 0 0 25px rgba(200,200,220,0.5), 0 0 50px rgba(200,200,220,0.25);
    }
    
    .voice-btn.auto-hold.recording {
      box-shadow: 0 0 30px rgba(255,80,100,0.6), 0 0 60px rgba(255,80,100,0.3);
    }
    
    .voice-orb-container:has(.voice-btn.recording) .voice-ring {
      border-color: rgba(255, 51, 102, 0.2);
    }
    
    .voice-orb-container:has(.voice-btn.recording) .voice-ring::before {
      background: var(--recording);
      box-shadow: 0 0 8px var(--recording);
    }
    
    .voice-btn.processing {
      border-color: var(--accent);
      color: var(--accent);
      animation: processing-spin 2s linear infinite;
    }
    
    @keyframes pulse-record {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    
    @keyframes processing-spin {
      from { filter: hue-rotate(0deg); }
      to { filter: hue-rotate(360deg); }
    }
    
    .voice-status {
      font-size: var(--text-sm);
      color: var(--text-muted);
    }
    
    .voice-status.recording {
      color: var(--recording);
    }
    
    .voice-timer {
      font-family: monospace;
      font-size: var(--text-lg);
      color: var(--recording);
      display: none;
    }
    
    .voice-timer.visible {
      display: block;
    }
    
    /* Hidden file input */
    input[type="file"] {
      display: none;
    }
    
    /* Panel backdrop overlay */
    
/* ============================================================================
   12. PANELS
   ============================================================================ */
.panel-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--black-50);
      z-index: calc(var(--z-dropdown) - 10);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .panel-backdrop.visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* ============================================
       UNIFIED PANEL SYSTEM
       All panels (Settings, Activity, Satellites)
       share these base styles for consistency
       ============================================ */

    /* Base panel styles - positioned by split-view on desktop, mobile.css handles < 1024px */
    .panel {
      background: var(--bg);
      overflow: hidden;
      display: none;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }

    .panel.visible {
      display: flex;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) var(--space-5);
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      position: sticky;
      top: 0;
      z-index: 1;
      flex-shrink: 0;
    }

    .panel-title {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: var(--accent);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .panel-close {
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: var(--text-xl);
      cursor: pointer;
      border-radius: var(--radius-md);
      transition: color 0.2s, background 0.2s;
    }

    .panel-close:hover {
      color: var(--text);
      background: var(--white-10);
    }

    .panel-content {
      flex: 1;
      overflow-y: auto;
      padding: var(--space-4) var(--space-5);
    }

    .panel-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      padding: var(--space-4) 0;
      border-bottom: 1px solid var(--border);
    }

    .panel-row:last-child {
      border-bottom: none;
    }

    .panel-row-info {
      flex: 1;
    }

    .panel-row-label {
      font-size: var(--text-base);
      font-weight: 500;
      color: var(--text);
    }

    .panel-row-desc {
      font-size: var(--text-sm);
      color: var(--text-muted);
      margin-top: var(--space-1);
    }

    /* Settings panel — uses unified .panel for positioning/layout.
       Only settings-specific visual overrides below. */
    .settings-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-2) var(--space-5);
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      position: sticky;
      top: 0;
      z-index: 1;
      flex-shrink: 0;
    }

    .settings-panel-title {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: var(--accent);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .settings-panel-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: var(--text-xl);
      cursor: pointer;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      border-radius: var(--radius-md);
      transition: color 0.2s, background 0.2s;
    }

    .settings-panel-close:hover {
      color: var(--text);
      background: var(--white-10);
    }

    .settings-panel-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: var(--space-4) var(--space-5);
    }
    
    /* Settings sections - collapsible groups */
    .settings-section {
      border-bottom: 1px solid var(--border);
    }

    .settings-section:last-child {
      border-bottom: none;
    }

    .settings-section-header {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      width: 100%;
      padding: var(--space-3) var(--space-1);
      background: none;
      border: none;
      color: var(--text);
      cursor: pointer;
      font-size: var(--text-sm);
      font-weight: 600;
      letter-spacing: 0.3px;
      transition: color 0.15s;
    }

    .settings-section-header:hover {
      color: var(--accent);
    }

    .settings-section-header:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }

    .settings-section-icon {
      flex-shrink: 0;
      width: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }

    .settings-section-icon svg {
      width: 18px;
      height: 18px;
    }

    .settings-section-title {
      flex: 1;
      text-align: left;
    }

    .settings-section-chevron {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-dim);
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    .settings-section-chevron svg {
      width: 16px;
      height: 16px;
    }

    .settings-section-header[aria-expanded="true"] .settings-section-chevron {
      transform: rotate(90deg);
    }

    .settings-section-body {
      overflow: hidden;
      transition: max-height 0.25s ease, opacity 0.2s ease;
      max-height: 1200px;
      opacity: 1;
    }

    .settings-section-body.collapsed {
      max-height: 0;
      opacity: 0;
      pointer-events: none;
    }

    .settings-section-body .setting-row:first-child {
      padding-top: var(--space-2);
    }

    /* Danger zone section highlight */
    .settings-section-danger .settings-section-icon {
      color: var(--warning);
    }

    .settings-section-danger .settings-section-header {
      color: var(--text-dim);
    }
    
    .settings-section-danger .settings-section-header:hover {
      color: var(--error);
    }

    .settings-section-danger .settings-section-header:hover .settings-section-icon {
      color: var(--error);
    }

    /* Status indicator dot (Edge TTS, Piper, Gateway, etc.) */
    .status-indicator {
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full);
      background: var(--text-dim);
      flex-shrink: 0;
    }

    .status-indicator.connected {
      background: var(--success);
    }

    .status-indicator.disconnected {
      background: var(--error);
    }

    /* TTS Provider config sub-panels */
    .tts-provider-config {
      border-top: 1px solid var(--border);
      padding-top: var(--space-1);
      margin-top: var(--space-1);
    }

    .tts-provider-config .setting-row:last-child {
      border-bottom: none;
    }

    /* Setting rows - align with unified panel-row styles */
    .setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      padding: var(--space-4) 0;
      border-bottom: 1px solid var(--border);
      min-width: 0;
    }

    .setting-row > div:first-child {
      min-width: 0;
      flex-shrink: 1;
    }
    
    .setting-row:last-child {
      border-bottom: none;
    }
    
    .setting-label {
      font-size: var(--text-base);
    }
    
    .setting-desc {
      font-size: var(--text-xs);
      color: var(--text-dim);
      margin-top: 2px;
    }
    
    .setting-input {
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-2) var(--space-3);
      color: var(--text);
      font-size: var(--text-sm);
      width: 120px;
      outline: none;
    }
    
    .setting-input:focus {
      border-color: var(--accent);
    }
    
    .setting-input:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }
    
    .setting-select {
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-2) var(--space-3);
      color: var(--text);
      font-size: var(--text-sm);
      outline: none;
      cursor: pointer;
      flex-shrink: 0;
    }
    
    .setting-select:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }

    /* Setting buttons - unified styles */
    .setting-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-2) var(--space-4);
      border-radius: 8px;
      font-size: var(--text-sm);
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: background 0.15s, opacity 0.15s, box-shadow 0.15s, transform 0.1s;
      white-space: nowrap;
      line-height: 1.4;
      flex-shrink: 0;
      min-height: 44px;
    }

    .setting-btn:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .setting-btn:active {
      transform: scale(0.97);
    }

    /* Primary - accent background, white text (Save, Push) */
    .setting-btn-primary {
      background: var(--accent);
      color: white;
    }

    .setting-btn-primary:hover {
      opacity: 0.85;
    }

    .setting-btn-primary:active {
      opacity: 0.75;
    }

    /* Secondary - subtle background, border, muted text (Clear, Change, View, Pull) */
    .setting-btn-secondary {
      background: var(--bg-input);
      border: 1px solid var(--border);
      color: var(--text-muted);
    }

    .setting-btn-secondary:hover {
      background: var(--white-10);
      color: var(--text);
    }

    .setting-btn-secondary:active {
      background: var(--white-5);
    }

    /* Danger - red background, white text (Logout) */
    .setting-btn-danger {
      background: var(--error);
      color: white;
      font-weight: 500;
    }

    .setting-btn-danger:hover {
      opacity: 0.85;
    }

    .setting-btn-danger:active {
      opacity: 0.75;
    }

    /* Setting utility classes */
    .setting-input-wide {
      max-width: 180px;
      width: 100%;
    }

    .setting-full-width {
      flex: 1;
    }

    .setting-input-group {
      display: flex;
      gap: 8px;
      margin-top: 8px;
      min-width: 0;
      max-width: 100%;
    }

    .setting-input-mono {
      flex: 1;
      min-width: 0;
      font-family: monospace;
    }

    .setting-label-danger {
      color: var(--error);
    }

    .setting-label-accent {
      color: var(--accent);
    }

    /* Conditional rows — hidden by default, shown via JS inline style override */
    .setting-hidden {
      display: none;
    }

    /* Toggle switch */
    .toggle {
      width: var(--space-12);
      height: 26px;
      background: var(--border);
      border-radius: var(--radius-xl);
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    
    .toggle.on {
      background: var(--accent);
    }
    
    .toggle::after {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      background: white;
      border-radius: var(--radius-full);
      top: 2px;
      left: 2px;
      transition: transform 0.2s;
    }
    
    .toggle.on::after {
      transform: translateX(22px);
    }
    
    .toggle.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    /* Desktop adjustments */
    @media (min-width: 640px) {
      .app {
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
      }
      
      .message {
        max-width: 70%;
      }
      
      .voice-btn {
        width: 80px;
        height: 80px;
      }
    }

    /* Tablet - tabs at bottom, no gap, constrained to app width */
    /* Breakpoint: 769px - 1023px (between --breakpoint-md and --breakpoint-lg) */
    @media (min-width: 769px) and (max-width: 1023px) {
      
/* ============================================================================
   11. MODE TABS
   ============================================================================ */
.mode-tabs {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 800px;
        background: var(--bg);
        border-top: 1px solid var(--border);
        padding: 0;
        z-index: var(--z-dropdown);
      }

      .mode-tab {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-base);
      }

      
/* ============================================================================
   10. INPUT AREA
   ============================================================================ */
.input-area {
        position: fixed !important;
        bottom: 41px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 800px;
        padding: var(--space-3);
        background: var(--bg);
        border-top: none;
        z-index: calc(var(--z-dropdown) + 1);
      }
    }

    /* Wide desktop - expand chat area */
    /* Breakpoint: 1024px (--breakpoint-lg) */
    @media (min-width: 1024px) {
      .app {
        max-width: 900px;
      }
      
      .message {
        max-width: 75%;
      }


/* ============================================================================
   7. HEADER & LOGO
   ============================================================================ */
.header {
        padding: var(--space-2) var(--space-5);
        border-bottom: 1px solid var(--border);
      }

      /* Show header center mode toggle on desktop */
      .header-center {
        display: flex;
        gap: var(--space-1);
        align-items: center;
      }

      /* Hide bottom mode tabs on desktop — header toggle replaces them */
      
/* ============================================================================
   11. MODE TABS
   ============================================================================ */
.mode-tabs {
        display: none;
      }

      /* Desktop split view - 70/30 layout when panel is open */
      body.panel-open 
/* ============================================================================
   6. LAYOUT STRUCTURE
   ============================================================================ */
.layout-wrapper {
        display: flex;
      }

      body.panel-open .app {
        max-width: 70%;
        margin: 0;
        margin-right: 30%;
        flex-shrink: 0;
      }

      body.panel-open .side-panel {
        display: flex;
        width: 30%;
        min-width: 320px;
      }

      /* Override panel positioning when in side panel */
      .side-panel-content .settings-panel,
      .side-panel-content .dev-panel,
      .side-panel-content .satellite-navigator {
        position: static !important;
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
      }

      /* Hide the panel's own header in split view - use side panel header */
      .side-panel-content .settings-panel-header,
      .side-panel-content .dev-panel-header {
        display: none !important;
      }

      /* Satellite close button is handled via JS (routes to SplitView on desktop) */

    }

    /* Ultra-wide desktop */
    /* Breakpoint: 1440px (--breakpoint-xl) */
    @media (min-width: 1440px) {
      .app {
        max-width: 1100px;
      }
      
      .message {
        max-width: 70%;
      }
    }

    /* Super-wide desktop (1920px+) */
    /* Breakpoint: 1920px (--breakpoint-2xl) */
    @media (min-width: 1920px) {
      .app {
        max-width: 1400px;
      }
      
      .message {
        max-width: 65%;
      }
    }

    /* Scroll indicators for panels */
    .settings-panel-content,
    .dev-panel-content,
    .satellite-list,
    .shortcuts-list {
      /* Fade out at edges to indicate more content */
      mask-image: linear-gradient(to bottom, 
        transparent 0, 
        black var(--space-2), 
        black calc(100% - var(--space-2)), 
        transparent 100%
      );
      -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0, 
        black var(--space-2), 
        black calc(100% - var(--space-2)), 
        transparent 100%
      );
    }

/* ============================================
   SPLIT VIEW - Desktop panel layout (70/30)
   ============================================ */


/* ============================================================================
   6. LAYOUT STRUCTURE
   ============================================================================ */
.layout-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

.layout-wrapper .app {
  flex: 1;
  transition: max-width 0.3s ease, margin-right 0.3s ease;
}

.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.3s ease;
  z-index: var(--z-dropdown);
}

/* Desktop: 70/30 split when panel is open */
@media (min-width: 1024px) {
  body.panel-open .app {
    max-width: 70%;
    margin-right: 30%;
  }

  body.panel-open .side-panel {
    width: 30%;
    display: flex;
  }
}

/* Hide side panel completely on mobile - use overlay panels instead */
@media (max-width: 1023px) {
  .side-panel {
    display: none !important;
  }
}

.side-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.side-panel-header h3,
#sidePanelTitle {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.side-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-xl);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: var(--radius-md);
  transition: color 0.2s;
}

.side-panel-close:hover {
  color: var(--text-primary, #fff);
}

.side-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4, 16px);
}

/* Override panel styles when inside side-panel */
.side-panel-content .settings-panel,
.side-panel-content .dev-panel,
.side-panel-content .satellite-navigator {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.side-panel-content .settings-panel-header,
.side-panel-content .dev-panel-header {
  display: none !important; /* Use side-panel header instead */
}

/* Button active state */
.header-btn.active {
  background: var(--accent);
  color: var(--text-inverse);
}

/* ============================================
   SEND-IN-PROGRESS INDICATOR
   ============================================ */

.send-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#sendBtn.sending {
  /* No longer dim — button stays interactive for stop/queue */
}

/* Stop icon state on send button */
#sendBtn.send-stop {
  background: var(--error, #ef4444);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

#sendBtn.send-stop:hover {
  background: var(--error-hover, #dc2626);
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

#sendBtn.send-stop svg {
  width: 14px;
  height: 14px;
}

#sendBtn:disabled {
  pointer-events: none;
}

#textInput:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   SCROLL TO BOTTOM BUTTON
   ============================================ */

.scroll-to-bottom-btn {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #00f0ff);
  color: var(--text-inverse, #000);
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 2px 12px var(--accent-40);
  animation: fadeInUp 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.scroll-to-bottom-btn:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 4px 16px var(--accent-50);
}

.scroll-to-bottom-btn:active {
  transform: translateX(-50%) scale(0.98);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

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

/* ============================================
   AUDIO PLAYER BAR
   Fixed bottom bar for TTS playback
   ============================================ */
.audio-player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: var(--bg-secondary, #1a1a2e);
  border-top: 1px solid var(--border-primary, #333);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  z-index: var(--z-toast, 9000);
  animation: slideUp 0.2s ease-out;
}

.audio-player-bar audio { display: none; }

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.audio-player-play {
  background: none;
  border: none;
  color: var(--text-primary, #eee);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  transition: background 0.15s;
}
.audio-player-play:hover { background: var(--bg-hover, rgba(255,255,255,0.1)); }

.audio-player-progress {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary, #333);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.audio-player-bar-fill {
  height: 100%;
  background: var(--accent-primary, #6c5ce7);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

.audio-player-time {
  font-size: 12px;
  color: var(--text-secondary, #999);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

.audio-player-close {
  background: none;
  border: none;
  color: var(--text-secondary, #999);
  cursor: pointer;
  font-size: 20px;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.audio-player-close:hover {
  color: var(--text-primary, #eee);
  background: var(--bg-hover, rgba(255,255,255,0.1));
}

/* ============================================================================
   MISSED MESSAGES NOTIFICATION
   ============================================================================ */
@keyframes missedFadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  20%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.missed-message-banner {
  background: rgba(0, 120, 200, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  margin: 10px;
  text-align: center;
  font-size: 14px;
  animation: missedFadeInOut 4s ease-in-out;
}

/* ============================================================================
   UPDATE BANNER
   ============================================================================ */

@keyframes update-banner-slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.update-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-secondary, rgba(10, 20, 40, 0.95));
  border-bottom: 1px solid var(--accent, #4ecdc4);
  color: var(--text-primary, #eee);
  font-size: 13px;
  animation: update-banner-slide-down 0.3s ease-out;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.update-banner-hiding {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}

.update-banner-text {
  flex: 1;
  min-width: 0;
}

.update-banner-bot-btn {
  background: var(--accent, #4ecdc4);
  color: var(--bg, #000);
  border: none;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.update-banner-bot-btn:hover {
  opacity: 0.85;
}

.update-banner-dismiss {
  background: none;
  border: none;
  color: var(--text-secondary, #999);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.update-banner-dismiss:hover {
  color: var(--text-primary, #eee);
  background: var(--bg-hover, rgba(255,255,255,0.1));
}





/* Utility: hide on touch/mobile devices */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}
/* ============================================================================
   VOICE MODE CARDS (Settings UI)
   ============================================================================ */

.voice-mode-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin-top: var(--space-3, 12px);
}

.voice-mode-card {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  background: var(--bg-secondary, rgba(10, 20, 40, 0.95));
  border: 2px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.voice-mode-card:hover {
  background: var(--bg-hover, rgba(20, 40, 80, 0.6));
  border-color: var(--accent, #60a5fa);
}

.voice-mode-card.selected {
  background: var(--bg-hover, rgba(20, 40, 80, 0.6));
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 0 0 2px var(--accent-glow, rgba(96, 165, 250, 0.3));
}

.voice-mode-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.voice-mode-content {
  flex: 1;
}

.voice-mode-title {
  font-size: var(--text-base, 14px);
  font-weight: 600;
  color: var(--text-primary, #eee);
  margin-bottom: var(--space-1, 4px);
}

.voice-mode-desc {
  font-size: var(--text-sm, 13px);
  color: var(--text-muted, rgba(255, 255, 255, 0.6));
  line-height: 1.4;
}

/* Keyboard focus for accessibility */
.voice-mode-card:focus-visible {
  outline: 2px solid var(--accent, #60a5fa);
  outline-offset: 2px;
}

/* Conditional settings containers */
#pushToTalkSettings,
#liveVoiceSettings,
#agentVoiceSettings {
  margin-top: var(--space-4, 16px);
}