/* skins/chatgpt.css — ChatGPT-inspired visual skin Hand-tuned approximation. No logos, no brand marks, no proprietary fonts. Font stack names "Söhne" as first preference with system fallbacks — no @import or external fetch. Light + Dark modes via [data-skin][data-mode] on . Wave 3a.1 */ /* ── Light ── */ [data-skin="chatgpt"][data-mode="light"], [data-skin="chatgpt"]:not([data-mode="dark"]) { --bg: #fff; --fg: #0d0d0d; --bg-elev: #f7f7f8; --border: #e5e5e5; --accent: #10A37F; --font-base: "Söhne", "Helvetica Neue", Arial, sans-serif; /* Bubbles */ --bubble-radius: 18px; --bubble-shadow: none; --bubble-ai-bg: #f7f7f8; --bubble-ai-fg: #0d0d0d; --bubble-ai-border: none; --bubble-user-bg: #10A37F; --bubble-user-fg: #fff; --bubble-user-border: none; /* Chips — chip-border darkened from #10A37F (3.20:1) to #0d8a6a for headroom over the WCAG 1.4.11 3:1 non-text minimum. */ --chip-bg: #fff; --chip-fg: #10A37F; --chip-border: #0d8a6a; } /* ── K: Per-skin differentiation — ChatGPT ── Stronger sidebar divider: a more visible border between the left panel and the chat, matching ChatGPT's characteristic panel separation. */ [data-skin="chatgpt"][data-mode="light"] .left-panel, [data-skin="chatgpt"]:not([data-mode="dark"]) .left-panel { border-right: 1px solid #c0c0c0; /* more visible than the default #e5e5e5 */ background: #f7f7f8; } [data-skin="chatgpt"][data-mode="dark"] .left-panel { border-right: 1px solid #4a4a4a; /* clearer division in dark */ background: #1a1a1a; } /* ── Dark ── */ [data-skin="chatgpt"][data-mode="dark"] { --bg: #212121; --fg: #ececec; --bg-elev: #2f2f2f; --border: #3d3d3d; --accent: #19C37D; --font-base: "Söhne", "Helvetica Neue", Arial, sans-serif; /* Bubbles */ --bubble-radius: 18px; --bubble-shadow: none; --bubble-ai-bg: #2f2f2f; --bubble-ai-fg: #ececec; --bubble-ai-border: none; --bubble-user-bg: #19C37D; --bubble-user-fg: #0d0d0d; --bubble-user-border: none; /* Chips */ --chip-bg: #2f2f2f; --chip-fg: #19C37D; --chip-border: #19C37D; }