/* skins/copilot.css — Copilot-inspired visual skin Hand-tuned approximation. No logos, no brand marks, no proprietary fonts. Font stack names "Segoe UI" as first preference (system font on Windows) with cross-platform fallbacks. Light + Dark modes via [data-skin][data-mode] on . Wave 3a.4 */ /* ── Light ── */ [data-skin="copilot"][data-mode="light"], [data-skin="copilot"]:not([data-mode="dark"]) { --bg: #f5f5f5; --fg: #242424; --bg-elev: #f5f5f5; --border: #d1d1d1; --accent: #0F6CBD; --font-base: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; /* Bubbles — Fluent UI tighter corner radius */ --bubble-radius: 4px; --bubble-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.13); --bubble-ai-bg: #f5f5f5; --bubble-ai-fg: #242424; --bubble-ai-border: 1px solid #d1d1d1; --bubble-user-bg: #0F6CBD; --bubble-user-fg: #fff; --bubble-user-border: none; /* Chips */ --chip-bg: #fff; --chip-fg: #0F6CBD; --chip-border: #0F6CBD; } /* ── K: Per-skin differentiation — Copilot ── Fluent Design language: tighter 4px radius on interactive elements + a heavier top-bar shadow (elevation 4) to match the Fluent depth model. */ [data-skin="copilot"] .top-bar, [data-skin="copilot"]:not([data-mode="dark"]) .top-bar { /* Heavier shadow — Fluent "Elevation 4" look */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.08); } /* Tighter 4px corners on top-bar interactive controls */ [data-skin="copilot"] .top-bar button, [data-skin="copilot"] .top-bar select, [data-skin="copilot"] .top-bar [data-control='lang'], [data-skin="copilot"] .top-bar [data-mode-toggle], [data-skin="copilot"] .demo-toggle { border-radius: 4px; } /* ── Dark ── */ [data-skin="copilot"][data-mode="dark"] { --bg: #1f1f1f; --fg: #fff; --bg-elev: #2b2b2b; --border: #3b3b3b; --accent: #4cc2ff; --font-base: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; /* Bubbles */ --bubble-radius: 4px; --bubble-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.13); --bubble-ai-bg: #2b2b2b; --bubble-ai-fg: #fff; --bubble-ai-border: 1px solid #3b3b3b; --bubble-user-bg: #4cc2ff; --bubble-user-fg: #1f1f1f; --bubble-user-border: none; /* Chips */ --chip-bg: #2b2b2b; --chip-fg: #4cc2ff; --chip-border: #4cc2ff; }