/* LLM switcher + per-LLM chat pane skins
 * Loaded on top of chat-demo.css; requires chat-demo-section markup.
 *
 * Skins reverse-engineered from live chat UIs (claude.ai, gemini.google.com,
 * grok.com, chatgpt.com) on 2026-04-18 via Playwright MCP. Tokens match
 * what a logged-in user sees at default zoom in light mode.
 *
 * Anatomy per skin:
 *   — Pane background + border treatment (each LLM is flatter than the
 *     default card look; shadows are stripped and borders go hair-thin)
 *   — Bar chrome (title typography, chevron for model switchers, hidden
 *     mono "session" label since that doesn't exist in any real LLM)
 *   — User bubble (bg, radius, max-width — each LLM has its own shape)
 *   — AI response (always flat text, no bubble — matches reality)
 *   — Font family stack (falls back to system-ui so nothing 404s)
 */

/* =============================================================
   Shared — bar slots, logo display toggles, base skin overrides
   ============================================================= */
.chat-pane-llm-mark {
  width: 18px; height: 18px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.llm-svg { display: none; width: 16px; height: 16px; }
.chat-pane-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-2);
  letter-spacing: -0.005em;
}
.chat-pane-session {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  margin-left: 2px;
}

/* Attachment thumb per skin — the 200×110 mock rectangle next to the
   user bubble represents a pasted image. Each LLM wraps pasted images
   differently (radius, border, shadow); we match their real treatments
   so the chat pane feels authentic. Captured from claude.ai (8px radius,
   0.5px warm-gray border, small shadow); Gemini/Grok/GPT use documented
   patterns since we didn't capture live attachments for those. */
.chat-demo-section[data-llm-skin="claude"] .chat-demo-thumb {
  border-radius: 8px;
  border: 0.5px solid rgba(17, 17, 17, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.chat-demo-section[data-llm-skin="gemini"] .chat-demo-thumb {
  border-radius: 16px;
  border: 1px solid #E8EAED;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
}
.chat-demo-section[data-llm-skin="grok"] .chat-demo-thumb {
  border-radius: 12px;
  border: 1px solid rgba(5, 5, 5, 0.08);
  box-shadow: none;
}
.chat-demo-section[data-llm-skin="gpt"] .chat-demo-thumb {
  border-radius: 18px;
  border: 1px solid rgba(13, 13, 13, 0.06);
  box-shadow: 0 2px 6px rgba(13, 13, 13, 0.06);
}

/* When any skin is active: flatten the chat pane card look (real LLMs
   don't have the "floating card" treatment — they're page-flush) and
   strip the tail-style AI bubble down to flat markdown (every real LLM
   renders AI responses as plain text, no bubble). */
.chat-demo-section[data-llm-skin] .chat-pane {
  box-shadow: none;
  border-width: 1px;
}
.chat-demo-section[data-llm-skin] .chat-demo-with .chat-pane {
  box-shadow: 0 16px 40px rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.22);
}
.chat-demo-section[data-llm-skin] .ai-bubble {
  background: transparent;
  padding: 0;
  border-radius: 0;
  max-width: 100%;
  box-shadow: none;
}
.chat-demo-section[data-llm-skin] .ai-bubble code {
  background: rgba(15, 23, 42, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
}
.chat-demo-section[data-llm-skin] .user-bubble {
  border-bottom-right-radius: inherit;
  font-weight: 400;
}
/* The fabricated mono "session" label doesn't exist on any real LLM —
   hide it by default and let each skin opt in to a specific replacement. */
.chat-demo-section[data-llm-skin] .chat-pane-session {
  display: none;
}

/* =============================================================
   Claude — warm cream page, Söhne-ish sans, warm gray user bubble
   Source: claude.ai  · page #F8F8F6 · user bubble #EFEEEB (rounded-xl)
                    · AI: no bubble, flat text · mono: Anthropic Mono 14px
   ============================================================= */
.chat-demo-section[data-llm-skin="claude"] .llm-svg-claude {
  display: block; color: #D97757;
}
.chat-demo-section[data-llm-skin="claude"] .chat-pane {
  background: #F8F8F6;
  border-color: rgba(17, 17, 17, 0.08);
  font-family: "Anthropic Sans", Söhne, ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, sans-serif;
}
.chat-demo-section[data-llm-skin="claude"] .chat-pane-bar {
  background: #F8F8F6;
  border-bottom-color: rgba(17, 17, 17, 0.05);
  padding: 11px 16px;
}
.chat-demo-section[data-llm-skin="claude"] .chat-pane-name {
  color: #2C1810;
  font-weight: 500;
  font-size: 13.5px;
}
/* Replace hidden mono "session" label with a chevron glyph — matches
   real claude.ai's conversation-title dropdown treatment. */
.chat-demo-section[data-llm-skin="claude"] .chat-pane-name::after {
  content: "›";
  color: #8A7968;
  font-weight: 400;
  margin-left: 6px;
  opacity: 0.6;
}
.chat-demo-section[data-llm-skin="claude"] .chat-pane-dot { background: #D97757; }
.chat-demo-section[data-llm-skin="claude"] .chat-pane-body {
  background: #F8F8F6;
  color: #121212;
}
.chat-demo-section[data-llm-skin="claude"] .user-bubble {
  background: #EFEEEB;
  color: #121212;
  border-radius: 12px;
  padding: 10px 16px;
  max-width: 75%;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.002em;
}
.chat-demo-section[data-llm-skin="claude"] .ai-bubble {
  color: #121212;
  line-height: 1.5;
  font-size: 15px;
}
.chat-demo-section[data-llm-skin="claude"] .ai-bubble code {
  font-family: "Anthropic Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(17, 17, 17, 0.06);
  color: #14181F;
  font-size: 13px;
}

/* =============================================================
   Gemini — white page, Google Sans, light-blue pill user bubble
   Source: gemini.google.com  · page #FFF · user #E9EEF6 (24px pill)
                             · AI: no bubble, flat text · accent #4285F4
   ============================================================= */
.chat-demo-section[data-llm-skin="gemini"] .llm-svg-gemini {
  display: block; color: #4285F4;
}
.chat-demo-section[data-llm-skin="gemini"] .chat-pane {
  background: #FFFFFF;
  border-color: #E8EAED;
  font-family: "Google Sans Text", "Google Sans", Roboto,
               ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.chat-demo-section[data-llm-skin="gemini"] .chat-pane-bar {
  background: #FFFFFF;
  border-bottom-color: #E8EAED;
  padding: 11px 16px;
}
.chat-demo-section[data-llm-skin="gemini"] .chat-pane-name {
  color: #1F1F1F;
  font-weight: 500;
  font-size: 13.5px;
}
.chat-demo-section[data-llm-skin="gemini"] .chat-pane-name::after {
  content: "⌄";
  color: #5F6368;
  font-weight: 400;
  margin-left: 6px;
  font-size: 11px;
  vertical-align: 1px;
}
.chat-demo-section[data-llm-skin="gemini"] .chat-pane-dot { background: #4285F4; }
.chat-demo-section[data-llm-skin="gemini"] .chat-pane-body {
  background: #FFFFFF;
  color: #1F1F1F;
}
.chat-demo-section[data-llm-skin="gemini"] .user-bubble {
  background: #E9EEF6;
  color: #1F1F1F;
  border-radius: 24px;
  padding: 12px 18px;
  max-width: 72%;
  font-size: 15px;
  line-height: 1.45;
}
.chat-demo-section[data-llm-skin="gemini"] .ai-bubble {
  color: #1F1F1F;
  line-height: 1.55;
  font-size: 15px;
}

/* =============================================================
   Grok — near-white page, Inter, asymmetric-corner user bubble
   Source: grok.com  · page #FCFCFC · user #F7F7F7 (24/24/8/24 corners)
                    · AI: no bubble, flat text · mono: IBM Plex Mono 14.4px
   Real Grok has the most minimal chrome of the four — no visible bar
   border, no card shadow, chat sits flush on the page.
   ============================================================= */
.chat-demo-section[data-llm-skin="grok"] .llm-svg-grok {
  display: block; color: #050505;
}
.chat-demo-section[data-llm-skin="grok"] .chat-pane {
  background: #FCFCFC;
  border-color: rgba(5, 5, 5, 0.06);
  font-family: Inter, "universalSans", ui-sans-serif, system-ui,
               -apple-system, sans-serif;
}
.chat-demo-section[data-llm-skin="grok"] .chat-pane-bar {
  background: #FCFCFC;
  border-bottom-color: transparent;
  padding: 11px 16px;
}
.chat-demo-section[data-llm-skin="grok"] .chat-pane-name {
  color: #050505;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}
.chat-demo-section[data-llm-skin="grok"] .chat-pane-dot { background: #050505; }
.chat-demo-section[data-llm-skin="grok"] .chat-pane-body {
  background: #FCFCFC;
  color: #050505;
}
.chat-demo-section[data-llm-skin="grok"] .user-bubble {
  background: #F3F3F3;
  color: #050505;
  border-radius: 24px 24px 8px 24px;
  padding: 10px 18px;
  max-width: 75%;
  font-size: 15px;
  line-height: 1.5;
}
.chat-demo-section[data-llm-skin="grok"] .ai-bubble {
  color: #050505;
  line-height: 1.55;
  font-size: 15px;
}
.chat-demo-section[data-llm-skin="grok"] .ai-bubble code {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace;
  font-size: 13px;
}

/* =============================================================
   GPT — white page, system-ui, 50%-gray 22px-radius user bubble
   Source: chatgpt.com  · page #FFF · user rgba(233,233,233,0.5) (22px)
                       · AI: no bubble, flat text · header 52px flush
   Real ChatGPT shows "ChatGPT ▾" as the bar title (model switcher).
   ============================================================= */
.chat-demo-section[data-llm-skin="gpt"] .llm-svg-gpt {
  display: block; color: #0D0D0D;
}
.chat-demo-section[data-llm-skin="gpt"] .chat-pane {
  background: #FFFFFF;
  border-color: rgba(13, 13, 13, 0.08);
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI",
               Helvetica, Arial, sans-serif;
}
.chat-demo-section[data-llm-skin="gpt"] .chat-pane-bar {
  background: #FFFFFF;
  border-bottom-color: rgba(13, 13, 13, 0.05);
  padding: 12px 16px;
}
.chat-demo-section[data-llm-skin="gpt"] .chat-pane-name {
  color: #0D0D0D;
  font-weight: 600;
  font-size: 14px;
}
.chat-demo-section[data-llm-skin="gpt"] .chat-pane-name::after {
  content: "⌄";
  color: #8E8E8E;
  font-weight: 400;
  margin-left: 6px;
  font-size: 12px;
  vertical-align: 1px;
}
.chat-demo-section[data-llm-skin="gpt"] .chat-pane-dot { background: #0D0D0D; }
.chat-demo-section[data-llm-skin="gpt"] .chat-pane-body {
  background: #FFFFFF;
  color: #0D0D0D;
}
.chat-demo-section[data-llm-skin="gpt"] .user-bubble {
  background: rgba(233, 233, 233, 0.6);
  color: #0D0D0D;
  border-radius: 22px;
  padding: 10px 18px;
  max-width: 70%;
  font-size: 15px;
  line-height: 1.5;
}
.chat-demo-section[data-llm-skin="gpt"] .ai-bubble {
  color: #0D0D0D;
  line-height: 1.55;
  font-size: 15px;
}

/* =============================================================
   Per-LLM code block styling — overrides the generic dark-terminal
   .chat-demo-code so each LLM's code block matches the real chrome.
   Real code-block styles across LLMs vary wildly (light vs. dark,
   header label or none, token palette). Token classes below map to
   the spans in js/llm-switcher.js (tok-com, tok-tag, tok-attr,
   tok-str, tok-kw).
   ============================================================= */

/* Claude — subtle warm-tinted block, Anthropic Mono, muted tokens */
.chat-demo-section[data-llm-skin="claude"] .chat-demo-code {
  background: rgba(17, 17, 17, 0.04);
  color: #14181F;
  border: 0.5px solid rgba(17, 17, 17, 0.08);
  font-family: "Anthropic Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
}
.chat-demo-section[data-llm-skin="claude"] .chat-demo-code .tok-com  { color: #8A7968; font-style: italic; }
.chat-demo-section[data-llm-skin="claude"] .chat-demo-code .tok-tag  { color: #B85C38; }
.chat-demo-section[data-llm-skin="claude"] .chat-demo-code .tok-attr { color: #5E6C85; }
.chat-demo-section[data-llm-skin="claude"] .chat-demo-code .tok-str  { color: #3E7C5C; }
.chat-demo-section[data-llm-skin="claude"] .chat-demo-code .tok-kw   { color: #7B4CA8; }

/* Gemini — dark body with language header + copy button, matches real
   gemini.google.com code-block chrome. Header strip has lowercase
   language label on the left and a rounded pill "Copy" button on the
   right with clipboard icon + text. Syntax palette uses Google's
   actual token colors from gemini.google.com. */
.chat-demo-section[data-llm-skin="gemini"] .chat-demo-code {
  position: relative;
  background: #1B1B1B;
  color: #E3E3E3;
  border: none;
  border-radius: 12px;
  font-family: "Roboto Mono", "Google Sans Mono", ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 48px 18px 20px;
  margin: 14px 0 12px;
  overflow: hidden;
}
.chat-demo-section[data-llm-skin="gemini"] .chat-demo-code::before {
  content: 'tsx';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 18px;
  color: #C4C7C5;
  font-family: "Google Sans", "Roboto", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  background: #2A2A2A;
  border-bottom: 1px solid #3A3A3A;
}
.chat-demo-section[data-llm-skin="gemini"] .chat-demo-code::after {
  content: 'Copy';
  position: absolute;
  top: 7px;
  right: 10px;
  padding: 4px 10px 4px 28px;
  color: #C4C7C5;
  font-family: "Google Sans", "Roboto", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4C7C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 14px 14px;
  border: 1px solid rgba(196, 199, 197, 0.22);
}
.chat-demo-section[data-llm-skin="gemini"] .chat-demo-code .tok-com  { color: #7E8087; font-style: italic; }
.chat-demo-section[data-llm-skin="gemini"] .chat-demo-code .tok-tag  { color: #F28B82; }
.chat-demo-section[data-llm-skin="gemini"] .chat-demo-code .tok-attr { color: #FDD663; }
.chat-demo-section[data-llm-skin="gemini"] .chat-demo-code .tok-str  { color: #81C995; }
.chat-demo-section[data-llm-skin="gemini"] .chat-demo-code .tok-kw   { color: #8AB4F8; }

/* Grok — light body (#F7F7F7), IBM Plex Mono, Grok's real token palette */
.chat-demo-section[data-llm-skin="grok"] .chat-demo-code {
  background: #F7F7F7;
  color: #002339;
  border: 1px solid rgba(5, 5, 5, 0.06);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
}
.chat-demo-section[data-llm-skin="grok"] .chat-demo-code .tok-com  { color: #8E8E8E; font-style: italic; }
.chat-demo-section[data-llm-skin="grok"] .chat-demo-code .tok-tag  { color: #E67E22; }
.chat-demo-section[data-llm-skin="grok"] .chat-demo-code .tok-attr { color: #6B46C1; }
.chat-demo-section[data-llm-skin="grok"] .chat-demo-code .tok-str  { color: #10B981; }
.chat-demo-section[data-llm-skin="grok"] .chat-demo-code .tok-kw   { color: #8B5CF6; }

/* ChatGPT — light gray block (#ECECEC), SF Mono, cooler token palette */
.chat-demo-section[data-llm-skin="gpt"] .chat-demo-code {
  background: #ECECEC;
  color: #0D0D0D;
  border: none;
  font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}
.chat-demo-section[data-llm-skin="gpt"] .chat-demo-code .tok-com  { color: #6B7280; font-style: italic; }
.chat-demo-section[data-llm-skin="gpt"] .chat-demo-code .tok-tag  { color: #2563EB; }
.chat-demo-section[data-llm-skin="gpt"] .chat-demo-code .tok-attr { color: #EC4899; }
.chat-demo-section[data-llm-skin="gpt"] .chat-demo-code .tok-str  { color: #059669; }
.chat-demo-section[data-llm-skin="gpt"] .chat-demo-code .tok-kw   { color: #7C3AED; }

/* =============================================================
   Switcher UI — tabs, live badge, meta line
   ============================================================= */
.llm-switcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto 40px;
  max-width: 820px;
}
.llm-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.llm-live-dot {
  width: 8px; height: 8px;
  background: #EF4444;
  border-radius: 50%;
  animation: llm-live-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes llm-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.82); }
}
.llm-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  flex-wrap: wrap;
  justify-content: center;
}
.llm-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.llm-tab:hover:not(.active) { color: var(--text-2); background: rgba(15, 23, 42, 0.03); }
.llm-tab.active {
  background: var(--text);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
.llm-tab:focus-visible { outline: 2px solid #22C55E; outline-offset: 3px; }
.llm-logo { width: 16px; height: 16px; display: inline-grid; place-items: center; flex-shrink: 0; }
.llm-logo svg { width: 16px; height: 16px; }
.llm-logo-claude svg { color: #D97757; }
.llm-logo-gemini svg { color: #4285F4; }
.llm-logo-grok svg { color: #0F172A; }
.llm-tab.active .llm-logo-grok svg { color: white; }
.llm-logo-gpt svg { color: #0D0D0D; }
.llm-tab.active .llm-logo-gpt svg { color: white; }
.llm-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  flex-wrap: wrap;
  justify-content: center;
}
.llm-meta-label {
  color: var(--text-3);
  margin-right: 2px;
}
.llm-meta code {
  font-family: inherit;
  color: var(--text-2);
}
.llm-meta-dot { color: var(--text-4); }

@media (prefers-reduced-motion: reduce) {
  .llm-live-dot { animation: none; }
}