/* ============================================================================ themes.css — LIGHT THEME ---------------------------------------------------------------------------- A COLOR-ONLY override layer, active only when . HARD RULE: this file changes ONLY colors — background, color, border-COLOR, box-shadow, gradient stops, fill/stroke. It NEVER sets font-*, padding, margin, width, height, line-height, border-WIDTH, gap, or any box metric, so every dimension stays byte-identical to the dark default. Dark = the app's untouched baseline; this file adds ZERO rules to it. Because the app has no color-variable system (every color is a literal rgba/hex spread across the component CSS + Tailwind utility classes), this layer targets concrete selectors. Two gotchas it deliberately handles: • "Glass" raised surfaces are WHITE-alpha overlays (rgba(255,255,255,.0x)) on a dark page — invisible white-on-white in light mode, so they flip to BLACK-alpha rgba(0,0,0,.0x). • Tailwind utility classes (bg-gray-900, text-white…) are NOT overridden globally — text-white is correct on colored buttons — only on the named structural containers. Loaded LAST in index.html so it wins the cascade; html[data-theme="light"] also raises specificity so component rules are reliably beaten. ============================================================================ */ /* ---- Page + structural chrome (targeted by id, so Tailwind bg-gray-* on colored buttons elsewhere is untouched) --------------------------------- */ /* Palette = ChatGPT light (neutral greys + near-black text), NOT slate/blue. Main canvas #fff, sidebar off-white #f9f9f9, text #0d0d0d, muted #676767. */ html[data-theme="light"] body { background-color: #ffffff; color: #0d0d0d; } html[data-theme="light"] #sidebar { background-color: #f9f9f9; /* off-white sidebar */ color: #0d0d0d; /* box-shadow, not border — #sidebar has no border in dark, so a real border would add 1px and shift the layout. inset shadow is layout-neutral. */ box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.08); } html[data-theme="light"] #main-content, html[data-theme="light"] #chat-history { /* !important REQUIRED: chat.css sets #main-content to rgba(10,15,30,0.95) !important — without matching it the whole canvas silently stays dark. */ background-color: #ffffff !important; } html[data-theme="light"] #logo-bar { background-color: #ffffff; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08); /* layout-neutral divider */ } html[data-theme="light"] #input-bar { /* #input-bar HAS a border-top in dark, so overriding only the COLOR keeps the 1px width unchanged (no re-declared border shorthand). */ background: #ffffff !important; border-color: rgba(0, 0, 0, 0.10) !important; } /* Sidebar white text → dark (scoped to the sidebar so colored controls elsewhere keep their own utility colors). */ html[data-theme="light"] #sidebar .text-white { color: #0d0d0d; } html[data-theme="light"] #sidebar .text-gray-400, html[data-theme="light"] #sidebar .text-gray-300 { color: #676767; } /* ---- Chat bubbles — ChatGPT-style neutral grey user bubble --------------- */ html[data-theme="light"] .user-message { background: #ececec; border: 1px solid rgba(0, 0, 0, 0.10); color: #0d0d0d; box-shadow: none; } html[data-theme="light"] .user-message:hover { background: #e5e5e5; box-shadow: none; } html[data-theme="light"] .assistant-message { color: #0d0d0d; } html[data-theme="light"] .assistant-message:hover { background: rgba(0, 0, 0, 0.02); } html[data-theme="light"] .message-content { color: #0d0d0d; } html[data-theme="light"] .message-content .text-xs, html[data-theme="light"] .message-content .text-gray-300, html[data-theme="light"] .message-content .text-gray-400 { color: #676767; } /* Code blocks — LIGHT like ChatGPT (light grey box, dark text + a light syntax palette). highlight.js paints .hljs dark, so we flip the block bg AND remap the monokai token colors to dark-on-light (github-light-ish) equivalents. */ html[data-theme="light"] .chat-message pre, html[data-theme="light"] .chat-message pre code.hljs, html[data-theme="light"] .hljs { background: #f6f8fa !important; color: #1f2328 !important; border: 1px solid rgba(0, 0, 0, 0.08); } html[data-theme="light"] .chat-message :not(pre) > code { background: rgba(0, 0, 0, 0.05); color: #1f2328; } html[data-theme="light"] .hljs-comment, html[data-theme="light"] .hljs-quote { color: #6e7781 !important; } html[data-theme="light"] .hljs-keyword, html[data-theme="light"] .hljs-selector-tag, html[data-theme="light"] .hljs-literal, html[data-theme="light"] .hljs-type { color: #cf222e !important; } html[data-theme="light"] .hljs-string, html[data-theme="light"] .hljs-meta .hljs-string { color: #0a3069 !important; } html[data-theme="light"] .hljs-number, html[data-theme="light"] .hljs-symbol, html[data-theme="light"] .hljs-bullet, html[data-theme="light"] .hljs-attr { color: #0550ae !important; } html[data-theme="light"] .hljs-title, html[data-theme="light"] .hljs-title.function_, html[data-theme="light"] .hljs-section, html[data-theme="light"] .hljs-name { color: #8250df !important; } html[data-theme="light"] .hljs-attribute, html[data-theme="light"] .hljs-variable, html[data-theme="light"] .hljs-template-variable { color: #953800 !important; } html[data-theme="light"] .hljs-built_in, html[data-theme="light"] .hljs-class .hljs-title { color: #0550ae !important; } /* A user request that is MOSTLY CODE must still read as one grey unit: the generic code flip above (#f6f8fa, near-white) covered the #f4f4f4 bubble almost entirely, so a code-heavy request blended into the white answer canvas and the request/answer boundary vanished (user report 2026-07-10). Inside the user bubble, code surfaces go a step darker than the bubble — the whole request reads as one grey card, the answer's code blocks stay near-white. Same selector shapes as the generic flip, placed later → wins the tie. */ html[data-theme="light"] .user-message pre, html[data-theme="light"] .user-message pre code.hljs, html[data-theme="light"] .user-message .hljs { background: #d8d8d8 !important; border-color: rgba(0, 0, 0, 0.15); } html[data-theme="light"] .user-message :not(pre) > code { background: rgba(0, 0, 0, 0.11); } /* ---- Composer — ChatGPT neutral grey pill -------------------------------- */ html[data-theme="light"] .message-input-container { background: #f4f4f4; border: 1px solid rgba(0, 0, 0, 0.10); } html[data-theme="light"] .message-input-container:focus-within { background: #f4f4f4; border-color: rgba(0, 0, 0, 0.18); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } html[data-theme="light"] .message-input-container textarea, html[data-theme="light"] .message-input-container input { color: #0d0d0d; } html[data-theme="light"] #input-bar .text-white { color: #0d0d0d; } /* ---- Panels / modals / settings (dark gradient shells → light) ----------- */ html[data-theme="light"] .app-settings-panel, html[data-theme="light"] .settings-panel { background: linear-gradient(135deg, #ffffff, #f1f5f9); border: 1px solid rgba(99, 102, 241, 0.20); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18), 0 0 40px rgba(99, 102, 241, 0.06); } html[data-theme="light"] .app-settings-title { color: #0d0d0d; } html[data-theme="light"] .app-settings-label { color: #0d0d0d; } html[data-theme="light"] .app-settings-hint { color: #676767; } html[data-theme="light"] .app-settings-select { /* background-COLOR, not the `background` shorthand — the shorthand wipes the custom SVG dropdown-arrow background-image (it vanished in light). Re-provide a dark arrow so it's crisp on white. */ background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); /* Lock no-repeat + position: the :hover rule uses a `background:` SHORTHAND which resets background-repeat to `repeat`; my arrow image wins on specificity but would then TILE into a grid without these. */ background-repeat: no-repeat !important; background-position: right 10px center !important; color: #0d0d0d; border: 1px solid rgba(0, 0, 0, 0.15); } /* ---- Generic glass surfaces (raised cards, hovers): white-alpha → black-alpha. Scoped inside the chat/message surface so it doesn't touch colored widgets. */ html[data-theme="light"] .message-content [style*="rgba(255, 255, 255, 0.04)"], html[data-theme="light"] .message-content [style*="rgba(255,255,255,0.04)"] { background: rgba(0, 0, 0, 0.03) !important; } /* ---- Reasoning panel scroll-fades (FUNCTIONAL: the opaque stop is matched to the page bg — must re-match the light canvas or a dark smudge shows). ----- */ html[data-theme="light"] .reasoning-bottom-fade { background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.15) 60%, transparent 100%); } html[data-theme="light"] .reasoning-header { background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.15) 80%, transparent 100%); color: #6d28d9 !important; /* violet-700, readable on light */ } /* ---- Top bar (model selector row) — own CSS bg, not a Tailwind class ------ */ html[data-theme="light"] #top-bar { background-color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* dark #top-bar already has a 1px border-bottom → same width */ } /* ---- Sidebar footer (credits / manage / upgrade / settings) --------------- */ html[data-theme="light"] #sidebar-footer { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(241, 245, 249, 0.97) 30%); border-top: 1px solid rgba(99, 102, 241, 0.18); /* dark already has a 1px border-top → same width */ } html[data-theme="light"] .credit-widget-bar-bg { background: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .credit-widget-info span { color: #5d5d5d; } html[data-theme="light"] .credit-widget-reset { color: #676767; } html[data-theme="light"] .sidebar-footer-manage-btn { background: rgba(0, 0, 0, 0.04); color: #5d5d5d; border-color: rgba(0, 0, 0, 0.10); } html[data-theme="light"] .sidebar-footer-manage-btn:hover { background: rgba(0, 0, 0, 0.08); color: #0d0d0d; border-color: rgba(0, 0, 0, 0.15); } html[data-theme="light"] .sidebar-footer-links a { color: #676767; } html[data-theme="light"] .sidebar-footer-links a:hover { color: #0d0d0d; } /* ---- Sidebar action buttons (New Chat / Folder / Search) — the weak-contrast pale-blue-on-pale the user flagged. Darken the text + firm up the fills. --- */ html[data-theme="light"] .sidebar-action-primary { background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(139, 92, 246, 0.12) 100%); color: #1d4ed8; /* blue-700 — strong on light */ border-color: rgba(59, 130, 246, 0.35); } html[data-theme="light"] .sidebar-action-secondary { background: rgba(0, 0, 0, 0.04); color: #5d5d5d; border-color: rgba(0, 0, 0, 0.10); } /* ---- Tailwind gray SURFACES → light (modals/panels built with utilities: folder-lock, system-prompt, bulk-delete, model settings…). Structural ids above win by specificity, so #main-content/#sidebar/#input-bar are unaffected. */ html[data-theme="light"] .bg-gray-900 { background-color: #f1f5f9 !important; } html[data-theme="light"] .bg-gray-800 { background-color: #ffffff !important; } html[data-theme="light"] .bg-gray-700 { background-color: #f1f5f9 !important; } html[data-theme="light"] .bg-gray-600 { background-color: #e2e8f0 !important; } html[data-theme="light"] .border-gray-600 { border-color: rgba(0, 0, 0, 0.12) !important; } html[data-theme="light"] .border-gray-700 { border-color: rgba(0, 0, 0, 0.10) !important; } /* Utility text: white/light-gray → dark. Then RE-ASSERT white on COLORED accent fills (buttons like bg-blue-600/bg-red-600 keep white text). Order matters: the colored-fill rule comes AFTER so it wins at equal specificity. */ html[data-theme="light"] .text-white { color: #0d0d0d !important; } html[data-theme="light"] .text-gray-300 { color: #5d5d5d !important; } html[data-theme="light"] .text-gray-400 { color: #676767 !important; } /* :not([class*="bg-gray-"]) excludes buttons that are gray by DEFAULT and only turn colored on hover (e.g. `bg-gray-700 hover:bg-blue-600 text-white`): those keep the dark text from the flip above, so they stay readable in their light default state instead of showing invisible white text. */ html[data-theme="light"] [class*="bg-blue-"]:not([class*="bg-gray-"]), html[data-theme="light"] [class*="bg-indigo-"]:not([class*="bg-gray-"]), html[data-theme="light"] [class*="bg-green-"]:not([class*="bg-gray-"]), html[data-theme="light"] [class*="bg-red-"]:not([class*="bg-gray-"]), html[data-theme="light"] [class*="bg-gradient"]:not([class*="bg-gray-"]) { color: #ffffff !important; /* white text stays on saturated button fills */ } /* ---- Composer input row: the always-visible surface ---------------------- #prompt has NO explicit color (inherits) → force dark so typed text is readable; .input-row-btn is pale indigo #c7d2fe → near-invisible on light (the "unsichtbares Mikro"), darken it. */ html[data-theme="light"] #prompt { color: #0d0d0d !important; } html[data-theme="light"] #prompt::placeholder { color: rgba(100, 116, 139, 0.65); } html[data-theme="light"] .input-row-btn { color: #4f46e5; } /* indigo-600 — visible on light */ html[data-theme="light"] .input-row-btn:hover { background: rgba(99, 102, 241, 0.12); color: #4338ca; } /* ---- Plans / Usage modal (rateLimitBanner.js .rlb-* — class-based) -------- */ html[data-theme="light"] .rlb-modal { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.10); box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(0, 0, 0, 0.04); } html[data-theme="light"] .rlb-title { color: #0d0d0d; } html[data-theme="light"] .rlb-subtitle, html[data-theme="light"] .rlb-feat, html[data-theme="light"] .rlb-beta { color: #676767; } html[data-theme="light"] .rlb-usage, html[data-theme="light"] .rlb-usage-container { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.06); } html[data-theme="light"] .rlb-countdown { color: #676767; } html[data-theme="light"] .rlb-usage-header, html[data-theme="light"] .rlb-plan-name, html[data-theme="light"] .rlb-feat-highlight { color: #0d0d0d !important; } html[data-theme="light"] .rlb-bar-bg { background: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .rlb-plan-price { color: #0d0d0d; } html[data-theme="light"] .rlb-card { background: #f8fafc; } html[data-theme="light"] .rlb-card-free .rlb-btn { background: #e2e8f0; } html[data-theme="light"] .rlb-btn { background: rgba(0, 0, 0, 0.04); color: #0d0d0d; border: 1px solid rgba(0, 0, 0, 0.12); } html[data-theme="light"] .rlb-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .rlb-close { background: rgba(0, 0, 0, 0.04); color: #5d5d5d; border-color: rgba(0, 0, 0, 0.10); } html[data-theme="light"] .rlb-close:hover { background: rgba(0, 0, 0, 0.08); color: #0d0d0d; } /* keep the green "Current Plan"/ACTIVE and the white PLUS button as-is (readable). */ /* ---- Model picker (topbar.css .ms-* + inline #ms-search) ------------------ */ html[data-theme="light"] #ms-search { background: rgba(0, 0, 0, 0.04) !important; /* !important beats the element's inline style */ border: 1px solid rgba(0, 0, 0, 0.12) !important; color: #0d0d0d !important; } html[data-theme="light"] .ms-model-card { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.10); } html[data-theme="light"] .ms-model-name { color: #0d0d0d; } html[data-theme="light"] .ms-model-provider, html[data-theme="light"] .ms-model-meta { color: #676767; } html[data-theme="light"] .ms-tier-title { color: #5d5d5d; } /* ---- Header: logo + model/effort selector pills (select2) ---------------- #app-logo is a white PNG that vanishes on light — stopgap filter darkens it (a proper light-logo asset can be swapped in later, then drop this rule). */ /* transform:translateY nudges the logo 5px UP visually WITHOUT changing the box it occupies (transforms don't affect layout flow) — so no reflow, same height. */ html[data-theme="light"] #app-logo { filter: brightness(0.35) saturate(1.15); transform: translateY(-5px); } /* Model + Effort pills (select2 --classic). Dark rules use !important, so match it. */ html[data-theme="light"] .select2-container--classic .select2-selection--single { background-color: rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; color: #0d0d0d !important; } html[data-theme="light"] .select2-container--classic .select2-selection--single:hover { background-color: rgba(0, 0, 0, 0.07) !important; border-color: rgba(0, 0, 0, 0.25) !important; } html[data-theme="light"] .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #0d0d0d !important; } html[data-theme="light"] .select2-container--classic .select2-selection__arrow b { border-color: #5d5d5d transparent transparent transparent !important; /* the dropdown triangle (color = the shape) */ } /* select2 dropdown list */ html[data-theme="light"] .select2-container--classic .select2-results, html[data-theme="light"] .select2-container--classic .select2-results__option, html[data-theme="light"] .select2-container--classic .select2-results__group { background-color: #ffffff !important; color: #0d0d0d !important; } html[data-theme="light"] .select2-container--classic .select2-results__option--highlighted, html[data-theme="light"] .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: rgba(59, 130, 246, 0.15) !important; color: #0d0d0d !important; } /* ============================================================================ COMPREHENSIVE MODAL/OVERLAY PASS (from the full dark-surface inventory) Every surface below is either a class selector or an inline style reached via a stable id/class hook + !important. Backdrops (rgba(0,0,0,x) dim layers) are left dark on purpose. Still colors only. ============================================================================ */ /* --- select2 dropdown panel + search (beyond the pills above) ------------- */ html[data-theme="light"] .select2-dropdown { background-color: #ffffff !important; border-color: rgba(0, 0, 0, 0.12) !important; } html[data-theme="light"] .select2-container--classic .select2-results__group { color: #676767 !important; } html[data-theme="light"] .select2-container--classic .select2-search--dropdown .select2-search__field { background: rgba(0, 0, 0, 0.04) !important; color: #0d0d0d !important; border-color: rgba(0, 0, 0, 0.12) !important; } html[data-theme="light"] .select2-container--classic .select2-selection__clear { color: #676767 !important; } /* --- Reasoning EFFORT pill + native option list --------------------------- */ html[data-theme="light"] #reasoning-effort { background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(139, 92, 246, 0.06)); color: #4338ca; border-color: rgba(99, 102, 241, 0.30); } html[data-theme="light"] #reasoning-effort option { background: #ffffff; color: #0d0d0d; } html[data-theme="light"] .model-info-btn { background: rgba(0, 0, 0, 0.04); color: #676767; } html[data-theme="light"] .model-info-btn:hover { background: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .model-info-btn.active { background: rgba(59, 130, 246, 0.18); color: #2563eb; } /* --- Files Explorer (inside the now-white sidebar) ------------------------- */ html[data-theme="light"] .fe-title { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #0d0d0d; color: #0d0d0d; /* gradient text → solid dark */ } html[data-theme="light"] .fe-back, html[data-theme="light"] .fe-grid-back, html[data-theme="light"] .fe-tile, html[data-theme="light"] .fe-tile-ico { color: #5d5d5d; } html[data-theme="light"] .fe-tile-meta, html[data-theme="light"] .fe-leaf-meta { color: #676767; } html[data-theme="light"] .fe-sort-btn { background: rgba(0, 0, 0, 0.05); } html[data-theme="light"] .fe-row:hover { background: rgba(0, 0, 0, 0.05); } html[data-theme="light"] .fe-zone-action:hover, html[data-theme="light"] .fe-row-action:hover { background: rgba(0, 0, 0, 0.06); color: #0d0d0d; } html[data-theme="light"] .fe-chip-count { background: #e2e8f0; color: #0d0d0d; } html[data-theme="light"] .fe-tile { background: rgba(0, 0, 0, 0.04); } html[data-theme="light"] .fe-tile-thumb { background: rgba(0, 0, 0, 0.05); } html[data-theme="light"] .fe-tile-favicon, html[data-theme="light"] .fe-thumb-favicon { background: rgba(0, 0, 0, 0.05); } /* Files-explorer modals */ html[data-theme="light"] .fe-modal-panel { background: linear-gradient(135deg, #ffffff, #f1f5f9); border-color: rgba(0, 0, 0, 0.12); } html[data-theme="light"] .fe-modal-title { color: #0d0d0d; } html[data-theme="light"] .fe-modal-message { color: #5d5d5d; } html[data-theme="light"] .fe-modal-input { background: #ffffff; color: #0d0d0d; border-color: rgba(0, 0, 0, 0.15); } html[data-theme="light"] .fe-modal-btn { background: rgba(0, 0, 0, 0.05); color: #5d5d5d; } /* --- Image lightbox -------------------------------------------------------- */ html[data-theme="light"] .lightbox-container { background: linear-gradient(145deg, #ffffff, #f1f5f9); border-color: rgba(0, 0, 0, 0.12); } html[data-theme="light"] .lightbox-caption { background: rgba(0, 0, 0, 0.04); color: #5d5d5d; } html[data-theme="light"] .lightbox-close, html[data-theme="light"] .lightbox-btn { background: rgba(0, 0, 0, 0.05); color: #5d5d5d; } html[data-theme="light"] .lightbox-toolbar { background: rgba(0, 0, 0, 0.04); } /* --- File viewer (attachment/PDF/CSV/text) -------------------------------- */ html[data-theme="light"] .file-viewer-panel { background: linear-gradient(145deg, #ffffff, #f1f5f9); border-color: rgba(0, 0, 0, 0.12); } html[data-theme="light"] .file-viewer-title { color: #0d0d0d; } html[data-theme="light"] .file-viewer-close { background: rgba(0, 0, 0, 0.05); color: #5d5d5d; } html[data-theme="light"] .file-viewer-download-name { color: #5d5d5d; } html[data-theme="light"] .file-viewer-loading { color: #676767; } html[data-theme="light"] .file-viewer-meta { color: #676767; } html[data-theme="light"] .file-viewer-text, html[data-theme="light"] .file-viewer-csvwrap { background: rgba(0, 0, 0, 0.04); color: #0d0d0d; } html[data-theme="light"] .file-viewer-csv th { background: rgba(0, 0, 0, 0.05); color: #4338ca; } html[data-theme="light"] .file-viewer-tab { background: rgba(0, 0, 0, 0.05); color: #5d5d5d; } html[data-theme="light"] .file-viewer-tab.active { background: rgba(99, 102, 241, 0.15); color: #4338ca; } /* --- Tooltip + legacy code-in-modal + html-preview frame ------------------ */ html[data-theme="light"] .tooltip .tooltiptext { background: #0d0d0d; color: #f8fafc; } /* dark tooltip on light = readable, keep dark */ html[data-theme="light"] .html-preview-iframe { border-color: rgba(0, 0, 0, 0.15); } /* --- System-Prompt modal (inline GLASS_PANEL via id hooks) ----------------- > div[style] (1,1,1) MUST out-specify the navy catch-all below (1,1,0) — the panel's own gradient contains rgba(15,23,42,…), so without this the catch-all paints the whole panel near-transparent and the dark backdrop shows through ("schwarz auf dunkel"). Solid #fff so nothing bleeds through. */ html[data-theme="light"] #system-prompt-modal > div[style] { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.12) !important; } /* Every inline dark-navy surface inside the modal (textareas, cards, search bars across the System-Prompt/Deep-Context/Hyper-Context/Temporal tabs). */ html[data-theme="light"] #system-prompt-modal [style*="rgba(15,23,42"], html[data-theme="light"] #system-prompt-modal [style*="rgba(15, 23, 42"] { background: rgba(0, 0, 0, 0.03) !important; color: #0d0d0d !important; } html[data-theme="light"] #system-prompt-modal textarea, html[data-theme="light"] #system-prompt-modal select { background: #ffffff !important; color: #0d0d0d !important; border-color: rgba(0, 0, 0, 0.15) !important; } /* Inputs: the collapsible TITLE inputs are transparent (background:none) — forcing them white made stark "Windows 95" bars. Keep them transparent so they blend into the light collapsible; only give the real SEARCH fields (in the hyper/temporal bodies, 2-id specificity wins) a subtle field bg. */ html[data-theme="light"] #system-prompt-modal input { background: transparent !important; color: #0d0d0d !important; } html[data-theme="light"] #system-prompt-modal #syshyper-body input, html[data-theme="light"] #system-prompt-modal #systmp-body input { background: rgba(0, 0, 0, 0.04) !important; } html[data-theme="light"] .sysmodal-tab { color: #676767; } /* sysctx-rich content (injected class rules) */ html[data-theme="light"] .sysctx-rich h1, html[data-theme="light"] .sysctx-rich h2, html[data-theme="light"] .sysctx-rich h3, html[data-theme="light"] .sysctx-rich h4 { color: #1f2328; } html[data-theme="light"] .sysctx-rich strong { color: #0d0d0d; } html[data-theme="light"] .sysctx-rich blockquote { color: #676767; } html[data-theme="light"] .sysctx-rich a { color: #2563eb; } html[data-theme="light"] .sysctx-rich th { background: rgba(99, 102, 241, 0.12); color: #4338ca; } html[data-theme="light"] .sysctx-rich hr { border-color: rgba(0, 0, 0, 0.10); } /* Save button (+ any inline indigo-gradient button): text.-white flip turned it black on the colored fill → re-assert white. */ html[data-theme="light"] #sysprompt-save, html[data-theme="light"] button[style*="linear-gradient(135deg,#6366f1"], html[data-theme="light"] button[style*="linear-gradient(135deg, #6366f1"] { color: #ffffff !important; } html[data-theme="light"] .sysctx-rich h1, html[data-theme="light"] .sysctx-rich h2, html[data-theme="light"] .sysctx-rich h3, html[data-theme="light"] .sysctx-rich strong { color: #0d0d0d; } html[data-theme="light"] .sysctx-rich blockquote { color: #676767; } html[data-theme="light"] .sysctx-rich a { color: #4338ca; } /* --- Provider-consent modal (inline via id hooks) ------------------------- */ html[data-theme="light"] #consentModal > div { background: #ffffff !important; color: #0d0d0d !important; } html[data-theme="light"] #consentModal h2 { color: #0d0d0d !important; } html[data-theme="light"] #consentMessage { color: #676767 !important; } html[data-theme="light"] #declineConsent { background: rgba(0, 0, 0, 0.05) !important; color: #5d5d5d !important; } /* --- Bulk-delete controls bar (inline via id hook) ------------------------ */ html[data-theme="light"] #bulk-delete-controls { background: linear-gradient(135deg, #ffffff, #f1f5f9) !important; border-color: rgba(0, 0, 0, 0.10) !important; } html[data-theme="light"] #bulk-delete-controls #selected-count { color: #676767 !important; } html[data-theme="light"] #bulk-delete-controls button[style*="rgba(255,255,255"] { background: rgba(0, 0, 0, 0.05) !important; color: #5d5d5d !important; } /* --- Cookie banner (injected class) --------------------------------------- */ html[data-theme="light"] .cb-card { background: #ffffff; color: #0d0d0d; } html[data-theme="light"] .cb-title { color: #0d0d0d; } html[data-theme="light"] .cb-text { color: #676767; } html[data-theme="light"] .cb-btn-decline { background: rgba(0, 0, 0, 0.05); color: #5d5d5d; } /* --- Memory-tool card (injected class) ------------------------------------ */ html[data-theme="light"] .memtool-card, html[data-theme="light"] .memtool-think { background: rgba(0, 0, 0, 0.03); } html[data-theme="light"] .memtool-diff { background: rgba(0, 0, 0, 0.04); } html[data-theme="light"] .memtool-label, html[data-theme="light"] .memtool-detail { color: #5d5d5d; } /* --- Music player card (inline base #2d3748 via class hook) ---------------- */ /* Music player card: album-art background + a dark veil for caption legibility. Like a photo/media surface, it stays DARK in light mode (flipping the base to white left the veil + white text as a broken half-state). Intentionally not overridden — see the code-block/lightbox-mat precedent. */ /* --- Plans modal residual: the featured PLUS card inner (#09090b) --------- */ html[data-theme="light"] .rlb-card-plus { background: #f8fafc; } /* ============================================================================ v6 — surfaces still dark after the neutral retune (all light-text-on-light or a missed shell). Same rules: color only. ============================================================================ */ /* --- Model-picker SHELL (the modal bg itself was never overridden) --------- */ html[data-theme="light"] #model-selector-modal { background: linear-gradient(135deg, #ffffff, #f9f9f9) !important; border-color: rgba(0, 0, 0, 0.10) !important; } html[data-theme="light"] .ms-model-card { background: #f4f4f4 !important; border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .ms-model-card .ms-model-name { color: #0d0d0d !important; } html[data-theme="light"] .ms-model-card .ms-model-provider, html[data-theme="light"] .ms-model-card .ms-model-meta { color: #676767 !important; } /* Tensor ASI/AGI/AI hero cards: pale indigo fill would hide their white text. */ html[data-theme="light"] .ms-agi-card, html[data-theme="light"] .ms-agi-card strong, html[data-theme="light"] .ms-agi-card b { color: #0d0d0d !important; } html[data-theme="light"] .ms-agi-card div, html[data-theme="light"] .ms-agi-card span, html[data-theme="light"] .ms-agi-card p { color: #5d5d5d !important; } /* --- Audio message label + transcript (inline light text) ------------------ */ html[data-theme="light"] .audio-label { color: #0d0d0d; } html[data-theme="light"] .audio-label strong { color: #0d0d0d; } html[data-theme="light"] .audio-label-meta { color: #676767; } html[data-theme="light"] .audio-transcript-body { background: rgba(0, 0, 0, 0.04) !important; } html[data-theme="light"] .audio-transcript-body [style*="226,232,240"], html[data-theme="light"] .audio-transcript-body [style*="226, 232, 240"] { color: #0d0d0d !important; } html[data-theme="light"] .audio-transcript-body [style*="148,163,184"], html[data-theme="light"] .audio-transcript-body [style*="148, 163, 184"] { color: #676767 !important; } html[data-theme="light"] .audio-transcript-toggle { color: #676767 !important; } /* --- Memory-tool card THOUGHTS + steps (light text on the light card) ------ */ /* Thinking box: dark bg rgba(15,23,42,0.45) + light text/head → light box, dark text, readable indigo head. The running "Thinking…" shimmer gradient has a near-white middle stop (#f1f5f9) invisible on white → dark-indigo shimmer. */ html[data-theme="light"] .memtool-think-text { background: rgba(0, 0, 0, 0.05) !important; color: #1f2328 !important; } html[data-theme="light"] .memtool-think { border-top-color: rgba(0, 0, 0, 0.10); } html[data-theme="light"] .memtool-think-head { color: #4338ca; } html[data-theme="light"] .memtool-think.running .memtool-think-head span { background: linear-gradient(90deg, #4338ca 25%, #a5b4fc 50%, #4338ca 75%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } /* Tool-tile glyphs were #e2e8f0 (near-white) → invisible on the pale colored tints. Dark slate base reads on any tile; the 4 categoried ones get a hue-matched dark tint. */ html[data-theme="light"] .memtool-icon, html[data-theme="light"] .memtool-head-icon { color: #334155 !important; } html[data-theme="light"] .memtool-icon.grep { color: #0369a1 !important; } html[data-theme="light"] .memtool-icon.glob { color: #15803d !important; } html[data-theme="light"] .memtool-icon.sql { color: #b45309 !important; } html[data-theme="light"] .memtool-icon.embedding { color: #7e22ce !important; } html[data-theme="light"] .memtool-label, html[data-theme="light"] .memtool-head-text { color: #0d0d0d; } html[data-theme="light"] .memtool-detail { color: #676767; } /* --- Hyper-Context / Deep-Context / Temporal tabs: the table + card inline navies. Broaden the inline catch to every dark-navy signature they use, and force dark text on the whole tab body so table cells are readable. --------- */ html[data-theme="light"] #syshyper-body, html[data-theme="light"] #systmp-body { color: #0d0d0d; } html[data-theme="light"] #system-prompt-modal [style*="rgba(30,41,59"], html[data-theme="light"] #system-prompt-modal [style*="rgba(30, 41, 59"], html[data-theme="light"] #system-prompt-modal [style*="rgba(51,65,85"], html[data-theme="light"] #system-prompt-modal [style*="rgba(2,6,23"] { background: rgba(0, 0, 0, 0.03) !important; } html[data-theme="light"] #system-prompt-modal table th, html[data-theme="light"] #syshyper-body th { background: rgba(0, 0, 0, 0.05) !important; color: #0d0d0d !important; } html[data-theme="light"] #system-prompt-modal table td, html[data-theme="light"] #syshyper-body td { color: #0d0d0d !important; border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] #syshyper-body [style*="226,232,240"], html[data-theme="light"] #syshyper-body [style*="226, 232, 240"], html[data-theme="light"] #systmp-body [style*="226,232,240"], html[data-theme="light"] #systmp-body [style*="226, 232, 240"] { color: #0d0d0d !important; } /* ============================================================================ v7 — EXHAUSTIVE pass (from the full JS-inline + CSS catalogs). Two mechanisms: (1) container-scoped catch-alls that flip EVERY dark-navy inline bg + light inline text inside a modal, matching BOTH the authored `rgba(15,23,42,` and the browser-normalized `rgba(15, 23, 42,` form (elements built via .style.cssText get re-serialized with spaces + hex→rgb); (2) direct class/id overrides for the remaining CSS + injected-