/* skins/gemini.css — Gemini-inspired visual skin Hand-tuned approximation. No logos, no brand marks, no proprietary fonts. Font stack names "Google Sans" as first preference with system fallbacks — no @import or external fetch. gradient user bubble (CSS-only, no images). Light + Dark modes via [data-skin][data-mode] on . Wave 3a.3 */ /* ── Light ── */ [data-skin="gemini"][data-mode="light"], [data-skin="gemini"]:not([data-mode="dark"]) { --bg: #FAFAFA; --fg: #1f1f1f; --bg-elev: #FAFAFA; --border: #dde3ea; --accent: #1a73e8; --font-base: "Google Sans", "Roboto", sans-serif; /* Bubbles — gradient user bubble expressed via background shorthand */ --bubble-radius: 20px; --bubble-shadow: none; --bubble-ai-bg: #f0f4f9; --bubble-ai-fg: #1f1f1f; --bubble-ai-border: none; --bubble-user-bg: linear-gradient(135deg, #1a73e8 0%, #d93cb7 100%); --bubble-user-fg: #fff; --bubble-user-border: none; /* Chips — chip-border darkened from #1a73e8 (4.32:1) to #0e5db8 for headroom. */ --chip-bg: #f0f4f9; --chip-fg: #1a73e8; --chip-border: #0e5db8; } /* Wave 8 P5.1: composer-send must paint accent-on-white in light mode. The default chat.css rule sets `color: var(--bg-elev)`; in Gemini light --bg-elev is #FAFAFA, leaving an off-white glyph on a blue disc — pale and easy to miss. Force a white glyph on a solid Google-blue disc so the send arrow reads at a glance. Mirrors the `:not([data-mode="dark"])` fallback used by the rest of the skin. */ [data-skin="gemini"][data-mode="light"] .composer-send, [data-skin="gemini"]:not([data-mode="dark"]) .composer-send { background: #1a73e8; color: #fff; } /* ── Dark ── */ [data-skin="gemini"][data-mode="dark"] { --bg: #1a1b1e; --fg: #e3e3e3; --bg-elev: #25262a; --border: #3c3d42; --accent: #7baaf7; --font-base: "Google Sans", "Roboto", sans-serif; /* Bubbles — charcoal background, blue accent (no purple cast) */ --bubble-radius: 20px; --bubble-shadow: none; --bubble-ai-bg: #25262a; --bubble-ai-fg: #e3e3e3; --bubble-ai-border: none; --bubble-user-bg: linear-gradient(135deg, #4285f4 0%, #34a853 100%); --bubble-user-fg: #fff; --bubble-user-border: none; /* Chips */ --chip-bg: #25262a; --chip-fg: #7baaf7; --chip-border: #7baaf7; } /* ── Gradient bubble support ── CSS custom properties can't hold gradient values that browsers apply to `background-color`. Override the [data-role="user"] text bubble's background directly so the gradient renders. Exclude card-hosting messages — they manage their own bg via inline-cards.css. */ [data-skin="gemini"][data-mode="light"] .message[data-role="user"]:not([data-type$="_card"]):not([data-type="submission_confirmation"]):not([data-type="review_status_card"]), [data-skin="gemini"]:not([data-mode="dark"]) .message[data-role="user"]:not([data-type$="_card"]):not([data-type="submission_confirmation"]):not([data-type="review_status_card"]) { background: linear-gradient(135deg, #1a73e8 0%, #d93cb7 100%); } [data-skin="gemini"][data-mode="dark"] .message[data-role="user"]:not([data-type$="_card"]):not([data-type="submission_confirmation"]):not([data-type="review_status_card"]) { background: linear-gradient(135deg, #4285f4 0%, #34a853 100%); } /* ── K: Per-skin differentiation — Gemini ── Larger ~24px bubble radius (more pillowed than ChatGPT's 18px) + a subtle left-sidebar gradient that echoes the Gemini product's background treatment. */ [data-skin="gemini"][data-mode="light"] .message:not([data-type$="_card"]):not([data-type="submission_confirmation"]):not([data-type="review_status_card"]), [data-skin="gemini"]:not([data-mode="dark"]) .message:not([data-type$="_card"]):not([data-type="submission_confirmation"]):not([data-type="review_status_card"]) { border-radius: 24px; } [data-skin="gemini"][data-mode="dark"] .message:not([data-type$="_card"]):not([data-type="submission_confirmation"]):not([data-type="review_status_card"]) { border-radius: 24px; } /* Subtle left-sidebar gradient — Gemini's light-blue-to-white wash */ [data-skin="gemini"][data-mode="light"] .left-panel, [data-skin="gemini"]:not([data-mode="dark"]) .left-panel { background: linear-gradient(180deg, #e8f0fe 0%, #fafafa 30%); } [data-skin="gemini"][data-mode="dark"] .left-panel { background: linear-gradient(180deg, #1e2a3a 0%, #1a1b1e 30%); }