/* ============================================================
   Stan Design — purple / Stan-cat iOS aesthetic
   Ported from Claude Design "Stanchat.dc.html" (2026-07-07).
   Scoped to the standalone StanChat PWA only: it remaps the shared
   /brand/tokens.css variables. Only reskins the DARK palette — light
   mode keeps tokens.css's normal black-on-white and is untouched here,
   so the in-app light/dark toggle still does the right thing.
   ============================================================ */

body[data-stanchat-standalone] {
  /* accent + type apply in both themes */
  --accent:          #7C5CFF;
  --accent-press:    #6A4CE0;
  --accent-soft:     #B18CFF;
  --accent-dim:      rgba(124,92,255,0.14);
  --accent-border:   rgba(124,92,255,0.30);

  /* Stan agent chip */
  --stan-bg: rgba(124,92,255,0.12);
  --stan-fg: #B18CFF;

  /* gradients */
  --gradient-accent:   linear-gradient(135deg, #7C5CFF 0%, #B18CFF 100%);
  --gradient-wordmark: linear-gradient(135deg, #7C5CFF 0%, #B18CFF 100%);

  /* type — Inter + JetBrains Mono, graceful fallback to SF on iOS */
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', "SF Mono", ui-monospace, monospace;
}

/* Purple-dark surface — only when dark is the resolved theme (explicit
   dark, or "system" with the OS in dark mode). Light stays tokens.css default.
   Same :root[data-theme] / prefers-color-scheme split chat.css already uses. */
:root[data-theme="dark"] body[data-stanchat-standalone] {
  --bg:              #08080c;
  --bg-card:         rgba(255,255,255,0.03);
  --bg-secondary:    #0d0d12;
  --bg-elevated:     #1A1330;
  --bg-input:        rgba(255,255,255,0.05);
  --bg-terminal:     #08060f;
  --bg-console:      #0d0b16;

  --text-primary:    #E8EAF0;
  --text-secondary:  #C7CBD6;
  --text-dim:        #6B7B8D;
  --text-on-dark:    #E8EAF0;
  --text-on-accent:  #FFFFFF;

  --border:          rgba(124,92,255,0.14);
  --border-mid:      rgba(124,92,255,0.24);

  --green:  #33E88D; --green-bg: rgba(51,232,141,0.12);
  --amber:  #FFB020; --amber-bg: rgba(255,176,32,0.14);
  --red:    #FF4455; --red-bg:   rgba(255,68,85,0.12);
  --blue:   #41D7FF; --blue-bg:  rgba(65,215,255,0.12);

  --halo:               rgba(124,92,255,0.30);
  --glow-accent:        rgba(124,92,255,0.42);
  --glow-accent-soft:   rgba(124,92,255,0.22);
  --shadow-glow:        0 0 0 4px var(--accent-dim), 0 8px 24px var(--glow-accent);
  --shadow-glow-strong: 0 0 0 3px var(--accent-dim), 0 0 22px var(--glow-accent);

  --gradient-hero: radial-gradient(120% 75% at 50% 0%, #241a44 0%, #0d0d12 46%, #08080c 100%);

  color-scheme: dark;
  background: var(--bg);
}
/* Dark is the DEFAULT surface, not an OS-dependent one — the Stan shell chrome
   (nav bar, hero gradient) is hardcoded dark, so following the OS here put light
   cards inside a dark shell on any light-mode device. chat.css already uses this
   same "dark unless explicitly light" rule; this keeps the two in step. */
:root:not([data-theme="light"]) body[data-stanchat-standalone] {
    --bg:              #08080c;
    --bg-card:         rgba(255,255,255,0.03);
    --bg-secondary:    #0d0d12;
    --bg-elevated:     #1A1330;
    --bg-input:        rgba(255,255,255,0.05);
    --bg-terminal:     #08060f;
    --bg-console:      #0d0b16;

    --text-primary:    #E8EAF0;
    --text-secondary:  #C7CBD6;
    --text-dim:        #6B7B8D;
    --text-on-dark:    #E8EAF0;
    --text-on-accent:  #FFFFFF;

    --border:          rgba(124,92,255,0.14);
    --border-mid:      rgba(124,92,255,0.24);

    --green:  #33E88D; --green-bg: rgba(51,232,141,0.12);
    --amber:  #FFB020; --amber-bg: rgba(255,176,32,0.14);
    --red:    #FF4455; --red-bg:   rgba(255,68,85,0.12);
    --blue:   #41D7FF; --blue-bg:  rgba(65,215,255,0.12);

    --halo:               rgba(124,92,255,0.30);
    --glow-accent:        rgba(124,92,255,0.42);
    --glow-accent-soft:   rgba(124,92,255,0.22);
    --shadow-glow:        0 0 0 4px var(--accent-dim), 0 8px 24px var(--glow-accent);
    --shadow-glow-strong: 0 0 0 3px var(--accent-dim), 0 0 22px var(--glow-accent);

    --gradient-hero: radial-gradient(120% 75% at 50% 0%, #241a44 0%, #0d0d12 46%, #08080c 100%);

    color-scheme: dark;
    background: var(--bg);
}

/* ---- Component notes -----------------------------------------------------
   The app is fully driven by the /brand/tokens.css variables remapped above,
   so .user-msg (purple gradient bubble, 20/20/6/20 tail), .turn-avatar,
   .orb-mini and glows already reskin to the Stan palette with no per-class
   rules. Stan/assistant turns stay full-width editorial (chat.js design
   intent) rather than a card — matching the "no bubbles for Stan" direction.
   Only genuine enhancements below. */

/* Give the user bubble the mockup's richer gradient (flat --accent → gradient) */
body[data-stanchat-standalone] .user-msg {
  background: linear-gradient(135deg, #7C5CFF, #8f6cff);
}

/* Send button + primary actions get the glow */
body[data-stanchat-standalone] :where(#send-btn) {
  background: var(--gradient-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,92,255,0.4);
}
body[data-stanchat-standalone] :where(#send-btn svg) { stroke: #fff; }

/* Wordmark gradient on the "Chat" half of the logo */
body[data-stanchat-standalone] :where(.auth-title span, .topbar-name span) {
  background: var(--gradient-wordmark);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}