/* ===================================================================== LIGHT THEME — AiCopal Warm beige palette inspired by ClawHub.ai Applied via .light-theme class on ===================================================================== */ /* --- Smooth Theme Transition --- */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.2s ease !important; } /* ===================================================================== SECTION 1: Design Token Overrides ===================================================================== */ html.light-theme { color-scheme: light; /* --- Base Palette --- */ --bg-color: #f8f2ed; --panel-bg: #ffffff; --input-bg: #f3ece5; --surface-hover: #efe7df; --surface-active: #e5dbd3; /* --- Text --- */ --text-primary: #2a1f19; --text-secondary: #6b5d52; --text-muted: #9a8c80; /* --- Brand & Accent --- */ --accent: #1aab8a; --bubble-accent: #7c6bcc; --accent-light: #3b82f6; --accent-dim: rgba(26, 171, 138, 0.08); --accent-hover: rgba(26, 171, 138, 0.12); /* --- Semantic --- */ --success: #0d9668; --success-light: #10b981; --success-dim: rgba(16, 185, 129, 0.08); --error: #dc2626; --error-light: #ef4444; --error-dim: rgba(220, 38, 38, 0.06); --warning: #d97706; --warning-dim: rgba(217, 119, 6, 0.08); --recording: #dc2626; /* --- Borders (white alpha → brown alpha) --- */ --border: #e0d6cc; --border-subtle: rgba(42, 31, 25, 0.06); --border-medium: rgba(42, 31, 25, 0.10); --border-emphasis: rgba(42, 31, 25, 0.18); --border-focus: var(--accent); --border-error: var(--error); /* --- Glow Effects (softer) --- */ --glow-accent: 0 0 16px rgba(26, 171, 138, 0.08); --glow-accent-strong: 0 0 24px rgba(26, 171, 138, 0.12); --glow-blue: 0 0 16px rgba(59, 130, 246, 0.08); /* --- Shadows (warm, lighter) --- */ --shadow-sm: 0 1px 3px rgba(42, 31, 25, 0.06); --shadow-md: 0 4px 12px rgba(42, 31, 25, 0.08); --shadow-lg: 0 10px 30px rgba(42, 31, 25, 0.12); --shadow-accent: 0 4px 12px rgba(26, 171, 138, 0.15); /* --- Scrollbar --- */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(42, 31, 25, 0.15); --scrollbar-thumb-hover: rgba(42, 31, 25, 0.3); } /* ===================================================================== SECTION 2: Global & Body ===================================================================== */ html.light-theme body { background: var(--bg-color); color: var(--text-primary); } html.light-theme ::selection { background: rgba(26, 171, 138, 0.2); color: var(--text-primary); } /* ===================================================================== SECTION 3: Toolbar & Header ===================================================================== */ html.light-theme .toolbar-section { background: linear-gradient(180deg, rgba(42, 31, 25, 0.02) 0%, rgba(42, 31, 25, 0.005) 100%); box-shadow: inset 0 -1px 0 rgba(42, 31, 25, 0.08), 0 2px 8px rgba(42, 31, 25, 0.06); } html.light-theme .toolbar-btn { background: rgba(42, 31, 25, 0.04); border-color: rgba(42, 31, 25, 0.10); } html.light-theme .toolbar-btn:hover { background: rgba(42, 31, 25, 0.08); } /* Session name gradient text — darker for light bg */ html.light-theme .session-name { background: linear-gradient(90deg, #0d9668 0%, #2563eb 50%) text; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ===================================================================== SECTION 4: Workspace / Input Pane / Output Pane ===================================================================== */ html.light-theme .input-pane, html.light-theme .output-pane { background: var(--bg-color); } html.light-theme .transcript-header { background: linear-gradient(180deg, rgba(42, 31, 25, 0.02) 0%, transparent 100%); border-bottom-color: rgba(42, 31, 25, 0.08); } html.light-theme .transcript-content { background: rgba(42, 31, 25, 0.01); } html.light-theme #textInput { background: var(--input-bg); color: var(--text-primary); border-color: var(--border); } html.light-theme #textInput:focus { border-color: var(--accent); } /* ===================================================================== SECTION 5: Buttons & Controls ===================================================================== */ /* Generic buttons with white-alpha backgrounds → brown-alpha */ html.light-theme .btn, html.light-theme button[class*="btn"] { border-color: rgba(42, 31, 25, 0.12); } html.light-theme .floating-mic-btn { box-shadow: 0 2px 8px rgba(42, 31, 25, 0.12); } /* Toggle buttons (auto-reply etc) */ html.light-theme .toggle-btn.active { background: var(--accent); color: #fff; } /* Context chips */ html.light-theme .qa-chip, html.light-theme .context-chip { background: rgba(42, 31, 25, 0.06); border-color: rgba(42, 31, 25, 0.12); color: var(--text-primary); } html.light-theme .qa-chip:hover, html.light-theme .context-chip:hover { background: rgba(42, 31, 25, 0.10); } html.light-theme .qa-chip.active, html.light-theme .context-chip.active { background: rgba(26, 171, 138, 0.10); border-color: rgba(26, 171, 138, 0.25); color: var(--accent); } /* ===================================================================== SECTION 6: Session Panel ===================================================================== */ html.light-theme .session-panel { background: var(--panel-bg); border-right-color: var(--border); } /* Panel header — intentionally dark to preserve the vibrant gradient logo and AICOPAL wordmark's pop, but tinted from the same warm espresso family as the rest of the light palette (--text-primary is #2a1f19) so it feels like a deliberate dark accent plane rather than a left-over slab from dark theme. Subtle gradient adds depth without reducing contrast against the neon pink/purple/cyan of the logo and wordmark. */ html.light-theme .session-panel-header { background: linear-gradient(135deg, #2a1f19 0%, #1a130f 100%); border-bottom: 1px solid rgba(42, 31, 25, 0.35); box-shadow: 0 2px 8px rgba(42, 31, 25, 0.08); } /* Keep brand logo + name in dark-theme style */ html.light-theme .panel-back-btn { color: #a1a1aa; } html.light-theme .panel-back-btn:hover { background: rgba(255, 255, 255, 0.08); color: #e4e4e7; } html.light-theme .session-item { background: transparent; border-color: transparent; } html.light-theme .session-item:hover { background: rgba(42, 31, 25, 0.04); } html.light-theme .session-item.active { background: rgba(26, 171, 138, 0.06); border-color: rgba(26, 171, 138, 0.15); } /* Session panel profile bar */ html.light-theme .session-panel-profile { background: var(--panel-bg); border-bottom-color: var(--border); } html.light-theme .panel-footer-trigger:hover { background: rgba(42, 31, 25, 0.04); } /* Panel user popover */ html.light-theme .panel-user-popover { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 8px 32px rgba(42, 31, 25, 0.12), 0 2px 8px rgba(42, 31, 25, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); } html.light-theme .panel-popover-divider { background: rgba(0, 0, 0, 0.06); } html.light-theme .panel-popover-btn:hover { background: rgba(42, 31, 25, 0.05); } html.light-theme .popover-icon-settings { background: rgba(37, 99, 235, 0.08); color: #2563eb; } html.light-theme .popover-icon-admin { background: rgba(124, 58, 237, 0.08); color: #7c3aed; } html.light-theme .popover-icon-logout { background: rgba(220, 38, 38, 0.08); color: #dc2626; } html.light-theme .panel-popover-logout { color: #dc2626; } html.light-theme .panel-popover-logout:hover { background: rgba(220, 38, 38, 0.05); } html.light-theme .panel-popover-btn:hover .popover-icon-settings { background: rgba(37, 99, 235, 0.14); } html.light-theme .panel-popover-btn:hover .popover-icon-admin { background: rgba(124, 58, 237, 0.14); } html.light-theme .panel-popover-btn:hover .popover-icon-logout { background: rgba(220, 38, 38, 0.14); } /* Session filter tabs */ html.light-theme .session-filter-tab { color: var(--text-secondary); } html.light-theme .session-filter-tab.active { color: var(--text-primary); background: rgba(42, 31, 25, 0.06); } /* Group headers */ html.light-theme .session-group-header { background: rgba(42, 31, 25, 0.03); border-color: var(--border); } /* ===================================================================== SECTION 7: Chat / Context QA Area ===================================================================== */ /* Chat messages */ html.light-theme .qa-message.user { background: rgba(26, 171, 138, 0.08); border-color: rgba(26, 171, 138, 0.15); } html.light-theme .qa-message.assistant, html.light-theme .qa-message.ai { background: rgba(42, 31, 25, 0.03); border-color: rgba(42, 31, 25, 0.08); } /* Chat input area */ html.light-theme .qa-input-area, html.light-theme .qa-input-container { background: var(--panel-bg); border-color: var(--border); } html.light-theme #qaInput { background: var(--input-bg); color: var(--text-primary); } html.light-theme #qaInput::placeholder { color: var(--text-muted); } /* Model/style indicator pill */ html.light-theme .qa-model-style-indicator { background: rgba(42, 31, 25, 0.05); border-color: rgba(42, 31, 25, 0.10); color: var(--text-secondary); } html.light-theme .qa-model-style-indicator:hover { background: rgba(42, 31, 25, 0.08); } /* Send button */ html.light-theme .qa-send-btn { background: var(--accent); color: #fff; } /* ===================================================================== SECTION 8: Modals & Overlays ===================================================================== */ /* Generic modal overlay */ html.light-theme .modal-overlay, html.light-theme .drawer-overlay, html.light-theme .response-modal-overlay, html.light-theme .document-manager-overlay, html.light-theme .settings-drawer-overlay { background: rgba(42, 31, 25, 0.35); } /* Modal containers */ html.light-theme .modal-content, html.light-theme .response-modal, html.light-theme .settings-drawer-content, html.light-theme .document-manager-modal { background: var(--panel-bg); border-color: var(--border); box-shadow: 0 8px 32px rgba(42, 31, 25, 0.15); } html.light-theme .modal-header, html.light-theme .response-modal-header { background: linear-gradient(180deg, rgba(42, 31, 25, 0.02) 0%, transparent 100%); border-bottom-color: rgba(42, 31, 25, 0.08); } /* ===================================================================== SECTION 9: Settings Drawer / Intelligence Sheet ===================================================================== */ html.light-theme .settings-drawer, html.light-theme .intelligence-sheet { background: var(--panel-bg); border-color: var(--border); box-shadow: 0 -10px 40px rgba(42, 31, 25, 0.12); } html.light-theme .settings-drawer-header, html.light-theme .intelligence-sheet-header { border-bottom-color: rgba(42, 31, 25, 0.08); } /* ===================================================================== SECTION 10: Notifications / Toasts ===================================================================== */ html.light-theme .notification { background: var(--panel-bg); border-color: var(--border); box-shadow: 0 4px 24px rgba(42, 31, 25, 0.12); color: var(--text-primary); } html.light-theme .notification.error { border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.04); } /* ===================================================================== SECTION 11: Form Controls (selects, inputs, textareas) ===================================================================== */ html.light-theme select, html.light-theme input[type="text"], html.light-theme input[type="password"], html.light-theme input[type="url"], html.light-theme textarea { background: var(--input-bg); color: var(--text-primary); border-color: var(--border); } html.light-theme select:focus, html.light-theme input[type="text"]:focus, html.light-theme input[type="password"]:focus, html.light-theme textarea:focus { border-color: var(--accent); } html.light-theme select option { background: var(--panel-bg); color: var(--text-primary); } /* Toggle switches */ html.light-theme .setting-toggle, html.light-theme .toggle-switch { background: rgba(42, 31, 25, 0.12); } html.light-theme .setting-toggle.active, html.light-theme .toggle-switch.active { background: var(--accent); } /* Native select removed — MicPicker light overrides are below (section 8b) */ /* ===================================================================== SECTION 12: Code Blocks & Markdown Rendering ===================================================================== */ html.light-theme pre, html.light-theme code { background: rgba(42, 31, 25, 0.04); border-color: rgba(42, 31, 25, 0.10); color: var(--text-primary); } html.light-theme pre { box-shadow: inset 0 1px 0 rgba(42, 31, 25, 0.04); } html.light-theme .code-block-header { background: rgba(42, 31, 25, 0.06); border-bottom-color: rgba(42, 31, 25, 0.08); } /* ===================================================================== SECTION 13: Response Tabs ===================================================================== */ html.light-theme .response-tabs-header { background: var(--panel-bg); border-bottom-color: var(--border); } html.light-theme .response-tab-btn { color: var(--text-secondary); } html.light-theme .response-tab-btn.active { color: var(--text-primary); background: var(--accent); color: #fff; } /* ===================================================================== SECTION 14: Context Menu ===================================================================== */ html.light-theme .session-context-menu, html.light-theme .context-menu { background: var(--panel-bg); border-color: var(--border); box-shadow: 0 8px 32px rgba(42, 31, 25, 0.15); } html.light-theme .context-menu-item:hover { background: rgba(42, 31, 25, 0.06); } html.light-theme .context-menu-header { border-bottom-color: var(--border); } /* Session context menu items — base style.css hardcodes color:#fff and white-tinted hover/divider for the dark theme. Override for light. */ html.light-theme .session-context-menu .context-menu-item { color: var(--text-primary) !important; } html.light-theme .session-context-menu .context-menu-item i { color: var(--text-secondary); } html.light-theme .session-context-menu .context-menu-item:hover, html.light-theme .session-context-menu .context-menu-item:active { background: rgba(42, 31, 25, 0.06) !important; } html.light-theme .session-context-menu .context-menu-divider { background: rgba(42, 31, 25, 0.10); } /* Danger item keeps its red — but tone it slightly for the warm light surface so it doesn't fluoresce, and tint hover with red. */ html.light-theme .session-context-menu .context-menu-item.danger { color: var(--error, #dc2626) !important; } html.light-theme .session-context-menu .context-menu-item.danger i { color: var(--error, #dc2626); } html.light-theme .session-context-menu .context-menu-item.danger:hover, html.light-theme .session-context-menu .context-menu-item.danger:active { background: rgba(220, 38, 38, 0.08) !important; } /* --- Group Dropdown (light theme) --- */ html.light-theme .add-to-group-dropdown { background: var(--panel-bg); border-color: var(--border); box-shadow: 0 8px 32px rgba(42, 31, 25, 0.15); } html.light-theme .add-to-group-dropdown .dropdown-header { background: rgba(42, 31, 25, 0.03); border-bottom-color: var(--border); } html.light-theme .add-to-group-dropdown .dropdown-sort-row { background: rgba(42, 31, 25, 0.03); border-bottom-color: var(--border); } html.light-theme .add-to-group-dropdown .dropdown-list { background: transparent; } html.light-theme .add-to-group-dropdown .dropdown-item:hover { background: rgba(42, 31, 25, 0.06); } html.light-theme .add-to-group-dropdown .dropdown-item.in-group { background: rgba(34, 197, 94, 0.08); } html.light-theme .add-to-group-dropdown .dropdown-item.in-group:hover { background: rgba(239, 68, 68, 0.1); } html.light-theme .add-to-group-dropdown .dropdown-new-group { background: rgba(42, 31, 25, 0.03); border-top-color: var(--border); } html.light-theme .add-to-group-dropdown .dropdown-new-group:hover { background: rgba(26, 171, 138, 0.08); } /* --- Action Sheet Group Items (light theme) --- */ html.light-theme .action-sheet-group-item:active { background: rgba(42, 31, 25, 0.06); } html.light-theme .action-sheet-group-item.in-group { background: rgba(34, 197, 94, 0.06); } html.light-theme .action-sheet-group-item.in-group:active { background: rgba(239, 68, 68, 0.08); } html.light-theme .action-sheet-search-wrapper { background: rgba(42, 31, 25, 0.04); border-color: var(--border); } html.light-theme .action-sheet-sort-btn.active { background: rgba(13, 150, 104, 0.08); border-color: #0d9668; color: #0d9668; } /* ===================================================================== SECTION 15: User Popover (Toolbar) — now shares panel-user-popover design ===================================================================== */ /* ===================================================================== SECTION 16: Tier / Badge Styling ===================================================================== */ html.light-theme .tier-badge { background: rgba(42, 31, 25, 0.06); border-color: rgba(42, 31, 25, 0.12); color: var(--text-secondary); } /* ===================================================================== SECTION 17: Scrollbar ===================================================================== */ html.light-theme ::-webkit-scrollbar-track { background: transparent; } html.light-theme ::-webkit-scrollbar-thumb { background: rgba(42, 31, 25, 0.15); } html.light-theme ::-webkit-scrollbar-thumb:hover { background: rgba(42, 31, 25, 0.3); } /* ===================================================================== SECTION 18: Summary Panel / Help Tab ===================================================================== */ html.light-theme .summary-content, html.light-theme .help-content { background: var(--bg-color); } html.light-theme .summary-card, html.light-theme .help-card { background: var(--panel-bg); border-color: var(--border); } /* ===================================================================== SECTION 19: Hardcoded Gradient Fixes ===================================================================== */ /* Toolbar shimmer — reduce intensity */ html.light-theme .toolbar-shimmer { background: linear-gradient( 90deg, transparent 0%, rgba(42, 31, 25, 0.03) 25%, rgba(42, 31, 25, 0.06) 50%, rgba(42, 31, 25, 0.03) 75%, transparent 100% ); } /* Settings drawer bottom gradient */ html.light-theme .settings-drawer-bottom, html.light-theme .intelligence-sheet-bottom { background: linear-gradient(180deg, var(--panel-bg) 0%, var(--panel-bg) 100%); box-shadow: 0 -10px 40px rgba(42, 31, 25, 0.08); } /* Floating action pane */ html.light-theme .floating-action-pane { background: var(--panel-bg); border-color: var(--border); box-shadow: 0 4px 24px rgba(42, 31, 25, 0.10); } /* Slash command overlay */ html.light-theme .slash-overlay { background: var(--panel-bg); border-color: var(--border); box-shadow: 0 8px 32px rgba(42, 31, 25, 0.15); } html.light-theme .slash-item:hover, html.light-theme .slash-item.active { background: rgba(42, 31, 25, 0.06); } /* ===================================================================== SECTION 20: Drag Handle & Resizers ===================================================================== */ html.light-theme .session-panel-resizer-handle { color: var(--text-muted); } html.light-theme .pane-resizer { background: var(--border); } /* ===================================================================== SECTION 21: Live Transcript Badge ===================================================================== */ html.light-theme .live-badge { background: rgba(42, 31, 25, 0.06); border-color: rgba(42, 31, 25, 0.12); } /* ===================================================================== SECTION 22: Bottom Sheet / Action Sheet (Mobile) ===================================================================== */ html.light-theme .bottom-sheet, html.light-theme .action-sheet { background: var(--panel-bg); box-shadow: 0 -4px 20px rgba(42, 31, 25, 0.12); } html.light-theme .bottom-sheet-handle { background: rgba(42, 31, 25, 0.2); } /* ===================================================================== SECTION 23: Pull-to-Refresh ===================================================================== */ html.light-theme .pull-indicator { background: var(--panel-bg); box-shadow: 0 2px 8px rgba(42, 31, 25, 0.10); } /* ===================================================================== SECTION 24: Avatar Gradient (keep contrast on light bg) ===================================================================== */ html.light-theme .panel-footer-avatar { background: linear-gradient(135deg, var(--accent), #3b82f6) !important; color: #fff; } html.light-theme .user-avatar { background: linear-gradient(135deg, var(--accent), #3b82f6); color: #fff; } /* ===================================================================== SECTION 25: Recording / Active States ===================================================================== */ /* Recording pulse animation — keep red, just soften shadows */ html.light-theme .recording-active .floating-mic-btn { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6), 0 6px 25px rgba(220, 38, 38, 0.3); } /* ===================================================================== SECTION 26: Document Manager Modal ===================================================================== */ html.light-theme .document-item { background: rgba(42, 31, 25, 0.02); border-color: rgba(42, 31, 25, 0.08); } html.light-theme .document-item:hover { background: rgba(42, 31, 25, 0.05); } /* ===================================================================== SECTION 27: Miscellaneous Hardcoded Overrides ===================================================================== */ /* Any element using rgba(255,255,255,...) for hover/bg */ html.light-theme [style*="rgba(255, 255, 255"] { /* Can't override inline styles generically, handled per-component above */ } /* Global background fallback */ html.light-theme .app-container { background: var(--bg-color); } /* Version/debug text */ html.light-theme .app-version { color: var(--text-muted); } /* Links */ html.light-theme a { color: var(--accent-light); } html.light-theme a:hover { color: #2563eb; } /* ===================================================================== SECTION 28: CRITICAL — Hardcoded Dark Overrides These override rgba/hex colors hardcoded in style.css that don't use CSS variables and appear dark in light mode. ===================================================================== */ /* --- Response pane gradient (style.css:1915) --- */ html.light-theme .pane-response { background: linear-gradient(180deg, var(--bg-color) 0%, var(--panel-bg) 100%); } /* --- Response tabs pill bar (style.css:7222-7224) --- */ html.light-theme .response-tabs { background: rgba(42, 31, 25, 0.05); border-color: rgba(42, 31, 25, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(42, 31, 25, 0.06); } /* Active tab button */ html.light-theme .response-tab-btn { color: var(--text-secondary); } html.light-theme .response-tab-btn.active { color: #fff; } /* Tab glider */ html.light-theme .tab-glider { background: var(--accent); } /* --- Chat input wrapper — glassmorphism capsule (style.css:7387) --- */ html.light-theme .qa-input-wrapper { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; border-color: rgba(42, 31, 25, 0.15) !important; box-shadow: 0 4px 20px rgba(42, 31, 25, 0.08) !important; } html.light-theme .qa-input-wrapper:focus-within { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 6px 30px rgba(42, 31, 25, 0.12), var(--glow-accent) !important; border-color: var(--accent) !important; } /* Tab-specific chat input wrapper override (style.css:7626-7642, uses !important) */ html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(42, 31, 25, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 20px rgba(42, 31, 25, 0.08) !important; } html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper:focus-within { background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 6px 30px rgba(42, 31, 25, 0.12), var(--glow-accent) !important; border-color: var(--accent) !important; } html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper textarea#qaInput { color: var(--text-primary) !important; } /* ============================================================= Light theme — chat-input bottom control bar ============================================================= The base style.css hard-codes rgb(30, 30, 35) for the bottom toolbar background to hide text that scrolls behind it. That's fine for dark theme but clashes in light theme. Override with a subtle warm-gray that stays darker than the light textarea above (for visual separation) but fits the cream palette and keeps icons/text readable. */ html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper .qa-input-buttons-left { /* Warm off-white that's slightly darker than --input-bg (#f3ece5) — gives the control strip its own subtle plane without the hard black rectangle we get in dark theme. */ background: rgba(42, 31, 25, 0.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; border-top: 1px solid rgba(42, 31, 25, 0.10) !important; } /* Icons in the bottom toolbar — darker for readability on light bg */ html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper button.icon-btn { color: rgba(42, 31, 25, 0.62) !important; } html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper button.icon-btn:hover { color: rgba(42, 31, 25, 0.95) !important; background: rgba(42, 31, 25, 0.08) !important; } html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper button.icon-btn:disabled { color: rgba(42, 31, 25, 0.28) !important; } /* Mic button when listening — keep red but tweak halo for light bg */ html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper button.icon-btn.listening { color: #fff !important; background: rgba(220, 38, 38, 0.90) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important; } /* Model / response style indicator pill — readable text on the warm light strip, keep the accent-gradient border for brand continuity */ html.light-theme #tab-content-chat .qa-model-style-indicator, html.light-theme .live-model-style-indicator { background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)) padding-box, linear-gradient(135deg, var(--accent, #d97706), #b45309) border-box !important; color: rgba(42, 31, 25, 0.82) !important; border: 1px solid transparent !important; } html.light-theme #tab-content-chat .qa-model-style-indicator:hover, html.light-theme .live-model-style-indicator:hover { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) padding-box, linear-gradient(135deg, var(--accent, #d97706), #b45309) border-box !important; color: rgba(42, 31, 25, 1) !important; box-shadow: 0 2px 8px rgba(42, 31, 25, 0.08) !important; } /* Chevron inherits the pill's text colour so it doesn't render as a bright dark-theme glyph on the light surface. */ html.light-theme .live-model-style-indicator .live-indicator-chevron, html.light-theme #tab-content-chat .qa-model-style-indicator .qa-indicator-chevron { color: inherit !important; opacity: 0.6; } html.light-theme #tab-content-chat .qa-indicator-chevron { opacity: 0.55 !important; color: rgba(42, 31, 25, 0.62) !important; } /* Attach-badge counter should stay readable */ html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper .qa-attach-badge { color: #fff !important; } /* Send button gradient stays vivid — it's the primary action — but drop the heavy dark shadow that was calibrated for dark bg */ html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper #qaSendBtn { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18) !important; } html.light-theme #tab-content-chat .qa-input-area .qa-input-wrapper #qaSendBtn:hover { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28), 0 0 8px rgba(217, 119, 6, 0.18) !important; } /* --- Toolbar section (style.css:352-354) --- */ html.light-theme .toolbar-section { background: rgba(42, 31, 25, 0.02); box-shadow: inset 0 -1px 0 rgba(42, 31, 25, 0.06), 0 2px 8px rgba(42, 31, 25, 0.04); } /* --- Question detection panel (hardcoded dark bg) --- */ html.light-theme .question-container { background: rgba(255, 255, 255, 0.98); border-color: var(--border); } html.light-theme .question-header { background: rgba(42, 31, 25, 0.03); } html.light-theme .question-list { background: rgba(42, 31, 25, 0.01); } html.light-theme .question-backdrop { background: rgba(42, 31, 25, 0.3); } /* --- QA sheet backdrops --- */ html.light-theme .qa-sheet-backdrop { background: rgba(42, 31, 25, 0.3); } /* --- Settings drawer overlay (style.css:5170, 5677, 5685) --- */ html.light-theme .settings-drawer-overlay, html.light-theme .drawer-backdrop { background: rgba(42, 31, 25, 0.3); } /* --- Context QA modal overlay --- */ html.light-theme .qa-modal-overlay { background: rgba(42, 31, 25, 0.35); } /* --- Floating mic + side buttons --- */ html.light-theme .floating-mic-btn { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(42, 31, 25, 0.12); } /* --- Output sidebar buttons (the gear/layers/doc icons on right) --- */ html.light-theme .output-sidebar-btn, html.light-theme .sidebar-btn { background: rgba(42, 31, 25, 0.04); color: var(--text-secondary); } html.light-theme .output-sidebar-btn:hover, html.light-theme .sidebar-btn:hover { background: rgba(42, 31, 25, 0.08); color: var(--text-primary); } /* --- Transcript header (style.css:7063-7074) --- */ html.light-theme .transcript-header-bar { background: linear-gradient(180deg, var(--panel-bg) 0%, var(--bg-color) 100%); border-top-color: rgba(42, 31, 25, 0.06); box-shadow: 0 -4px 20px rgba(42, 31, 25, 0.06); } /* --- Transcript toggle bar (style.css:7085) --- */ html.light-theme .transcript-toggle-handle { background: rgba(42, 31, 25, 0.15); } /* --- Transcript overflow settings (native select removed) --- */ /* --- Action bar buttons (style.css:3045-3050) --- */ html.light-theme .action-btn { background: rgba(42, 31, 25, 0.06); color: var(--text-secondary); } html.light-theme .action-btn:hover { background: rgba(42, 31, 25, 0.10); } /* --- Context chips in chat (style.css:2439-2531) --- */ html.light-theme .qa-context-pill { background: rgba(42, 31, 25, 0.05); border-color: rgba(42, 31, 25, 0.12); color: var(--text-secondary); } html.light-theme .qa-context-pill:hover { background: rgba(42, 31, 25, 0.08); } /* --- Transcript text color (monospace on light bg) --- */ html.light-theme .transcript-line, html.light-theme .transcript-text { color: var(--text-primary); } html.light-theme .transcript-timestamp { color: var(--text-muted); } html.light-theme .transcript-speaker { color: var(--text-secondary); font-weight: 600; } /* --- Notification/toast (style.css:5848-5851) --- */ html.light-theme .toast, html.light-theme .notification-toast { background: var(--panel-bg); border-color: var(--border); box-shadow: 0 8px 32px rgba(42, 31, 25, 0.15); color: var(--text-primary); } /* --- Speakers panel (style.css:8218-8227) --- */ html.light-theme .speakers-panel { background: linear-gradient(180deg, var(--panel-bg) 0%, var(--bg-color) 100%); box-shadow: 0 -10px 40px rgba(42, 31, 25, 0.08); } html.light-theme .speaker-item { border-color: rgba(42, 31, 25, 0.08); } html.light-theme .speaker-item:hover { background: rgba(42, 31, 25, 0.04); } /* --- Toolbar shimmer gradient (style.css:8331) --- */ html.light-theme .toolbar-shimmer::before { background: linear-gradient( 90deg, transparent 0%, rgba(42, 31, 25, 0.03) 50%, transparent 100% ); } /* --- Language selector chip --- */ html.light-theme .language-chip { background: rgba(42, 31, 25, 0.06); border-color: rgba(42, 31, 25, 0.12); color: var(--text-secondary); } /* --- Badge counts (the blue/green pills on sessions) --- */ html.light-theme .session-badge { box-shadow: 0 1px 3px rgba(42, 31, 25, 0.15); } /* --- New session + save buttons in toolbar --- */ html.light-theme .toolbar-icon-btn { color: var(--text-secondary); } html.light-theme .toolbar-icon-btn:hover { color: var(--text-primary); background: rgba(42, 31, 25, 0.06); } /* --- Empty state text color --- */ html.light-theme .empty-state-text, html.light-theme .qa-empty-hint { color: var(--text-muted); } /* --- User avatar in toolbar --- */ html.light-theme #userProfileBtn { border-color: rgba(42, 31, 25, 0.12); } /* --- Pane resizer between panels --- */ html.light-theme .pane-resizer:hover { background: var(--accent); } /* --- Transcript Empty State (light theme) --- */ html.light-theme .empty-state-pulse-ring { border-color: rgba(37, 99, 235, 0.2); } html.light-theme .empty-state-mic-hero { box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2), 0 0 12px rgba(26, 171, 138, 0.1); } html.light-theme .empty-state-mic-hero:hover { box-shadow: 0 12px 40px rgba(37, 99, 235, 0.3), 0 0 20px rgba(26, 171, 138, 0.15); } /* "Starting" state — softer glow tuned for light backgrounds */ html.light-theme .empty-state-mic-hero.starting { box-shadow: 0 8px 32px rgba(37, 99, 235, 0.4), 0 0 22px rgba(26, 171, 138, 0.3); } html.light-theme .empty-state-upload-btn { border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.04); color: var(--text-primary); } html.light-theme .empty-state-upload-btn i { color: var(--accent, #1aab8a); } html.light-theme .empty-state-upload-btn:hover { background: rgba(0, 0, 0, 0.08); border-color: var(--accent); box-shadow: 0 4px 16px rgba(26, 171, 138, 0.1); } html.light-theme .mic-picker-trigger { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.12); color: var(--text-secondary); } html.light-theme .mic-picker-trigger:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.2); color: var(--text-primary); } html.light-theme .mic-picker-dropdown { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06); } html.light-theme .mic-picker-option:hover { background: rgba(0, 0, 0, 0.05); } html.light-theme .mic-picker-inline .mic-picker-trigger { background: var(--input-bg); border-color: var(--border); } html.light-theme .mic-picker-refresh-btn { border-color: var(--border); } html.light-theme .mic-picker-refresh-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--text-primary); }