@mooncompany/uplink-chat 0.5.0

package/public/css/app.a6a7f8f5.css

@@ -0,0 +1,2731 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ============================================================================
+   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: rgba(0, 40, 60, 0.9);
+      
+      /* 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: 'Space Mono', monospace;
+      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, body {
+      height: 100%;
+      overflow: hidden;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--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: 'Space Mono', monospace;
+      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);
+    }
+    
+    .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: 'Space Mono', monospace;
+      font-size: var(--text-sm);
+      font-weight: 700;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+      color: var(--accent);
+    }
+    
+    .status-badge {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      font-family: 'Space Mono', monospace;
+      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 */
+      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;
+    }
+
+    .messages::-webkit-scrollbar { width: 8px; }
+    .messages::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
+    .messages::-webkit-scrollbar-thumb { 
+      background: var(--accent-30); 
+      border-radius: 4px;
+    }
+    .messages::-webkit-scrollbar-thumb:hover { 
+      background: var(--accent-50); 
+    }
+    
+    .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: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+      word-wrap: break-word;
+    }
+    
+    #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: '⏳';
+      position: absolute;
+      top: var(--space-1);
+      right: var(--space-2);
+      font-size: var(--text-xs);
+    }
+    
+    .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;
+    }
+    /* 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;
+}
+
+/* ============================================================================
+   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;
+    }
+    
+    .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: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+      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-size: var(--text-base);
+      font-weight: 600;
+      color: var(--text);
+    }
+
+    .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: 'Space Mono', monospace;
+      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: 'Space Mono', monospace;
+  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);
+}