:root {
  /* Brand colors - bright, cheerful, friendly */
  --coral: #FF6B6B;
  /* primary - warm and inviting */
  --teal: #4ECDC4;
  /* secondary - calming and supportive */
  --yellow: #FFE66D;
  /* accent - energetic and fun */
  --green: #51CF66;
  /* success - fresh and encouraging */
  --bg: #FFFFFF;

  /* RGB variants for mixing/gradients */
  --teal-rgb: 78, 205, 196;
  --coral-rgb: 255, 107, 107;
  /* clean background */
  --ink: #111827;
  /* primary text - high contrast and readable */
  --ink-soft: #374151;
  /* secondary text - darker for better readability */

  /* Tinted surfaces for gentle bubble backgrounds */
  --teal-tint: rgba(78, 205, 196, 0.12);
  /* user messages, explained items */
  --coral-tint: rgba(255, 107, 107, 0.12);
  /* bot messages, mistake items */
  --yellow-tint: rgba(255, 230, 109, 0.15);
  /* highlights/accents, translated items */
  --green-tint: rgba(81, 207, 102, 0.12);
  /* exploratory items */

  /* Surface colors */
  --surface: #FFFFFF;
  --surface-muted: #FAFCFC;
  /* slightly tinted for input fields */
  --surface-raised: #FFFFFF;
  /* for cards with shadows */

  /* Connection status colors */
  --status-connected: #48BB78;
  /* green */
  --status-connecting: var(--yellow);
  --status-error: #F56565;
  /* red */

  /* Spacing scale - mobile-first, generous */
  --s-1: 4px;
  /* 0.25rem */
  --s-2: 8px;
  /* 0.5rem */
  --s-3: 12px;
  /* 0.75rem */
  --s-4: 16px;
  /* 1rem */
  --s-5: 20px;
  /* 1.25rem */
  --s-6: 24px;
  /* 1.5rem */
  --s-7: 32px;
  /* 2rem */
  --s-8: 40px;
  /* 2.5rem */
  --s-9: 48px;
  /* 3rem */
  --s-10: 64px;
  /* 4rem */

  /* Border radii - organic, friendly feel */
  --r-s: 10px;
  /* small elements */
  --r-m: 16px;
  /* medium elements, inputs */
  --r-l: 22px;
  /* large cards, panels */
  --r-xl: 28px;
  /* extra large surfaces */
  --r-pill: 999px;
  /* buttons, badges */

  /* Box shadows - soft and welcoming */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.06);
  /* subtle elevation */
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* floating panels */
  --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* interactive elements */
  --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  /* recessed elements */

  /* Typography scale */
  --text-xs: 0.75rem;
  /* 12px - timestamps, labels */
  --text-sm: 0.875rem;
  /* 14px - secondary text */
  --text-base: 1rem;
  /* 16px - body text */
  --text-lg: 1.125rem;
  /* 18px - message text */
  --text-xl: 1.25rem;
  /* 20px - headings */
  --text-2xl: 1.5rem;
  /* 24px - page titles */

  /* Motion and timing */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  /* snappy exits */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* gentle entrances */
  --ease-emph: cubic-bezier(0.2, 0, 0, 1);
  /* emphasis motions */
  --dur-fast: 150ms;
  /* quick interactions */
  --dur-med: 240ms;
  /* standard transitions */
  --dur-slow: 360ms;
  /* panel animations */

  /* Focus and interaction states */
  --focus-ring: 3px solid var(--teal);
  --focus-offset: 2px;

  /* Chat-specific tokens */
  --bubble-max-width: 85%;
  --avatar-size: 36px;
  --message-spacing: var(--s-4);
  /* Horizontal offset that clears the avatar column, so a branch rope anchored
     at the bubble's outer edge never overlaps the portrait beside it. */
  --avatar-lane: calc(var(--avatar-size) + var(--s-3));
  /* Height of the branch rope, and the space each message reserves below itself
     to hold it. The two must match or the rope detaches from its bubble. */
  --rope-drop: 44px;
  /* Width of the rope box. The trunk descends 12px inside its trailing edge, so
     the box is offset by --rope-descent-inset to put that descent on the
     bubble's edge and carry the rest of the rope out into the margin. The rope
     reaches --rope-descent-inset past the bubble, so it must not exceed the
     gutter --chat-gutter reserves beside the transcript. */
  --rope-width: 108px;
  --rope-descent-inset: calc(var(--rope-width) - 12px);

  /* Layout constraints */
  --container-max: 1040px;
  --panel-width: 380px;
  /* Docked Daily Focus column beside the conversation. */
  --focus-column-width: 260px;
  /* Side gutters inside the chat column. The branch ropes hang outside the
     message bubbles into this space, and the composer matches it so the input
     lines up with the transcript above. */
  --chat-gutter: 90px;
  --input-min-height: 44px;
  /* touch-friendly */

  /* Theme-aware separator and hover wash. Hardcoded rgba(0,0,0,...) hairlines
     are invisible against the dark surfaces this UI actually renders on. */
  --hairline: rgba(0, 0, 0, 0.08);
  --hover-wash: rgba(0, 0, 0, 0.05);

  /* Minimum comfortable touch target (WCAG 2.5.8 / iOS HIG). */
  --tap-min: 44px;

  /* Glassmorphism 2.0 - Aurora Compatible */
  --glass-opacity: 0.4;
  --glass-blur: 24px;
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --surface-glass: rgba(255, 255, 255, 0.4);

  /* Visual Polish Tokens */
  /* Static grain tile. An SVG feTurbulence filter is re-evaluated by the
     rasterizer on every repaint and resize; a plain repeating image is not. */
  --noise-texture: url("data:image/png;base64,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");
  --glow-border: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --glow-active: 0 0 20px rgba(78, 205, 196, 0.15), inset 0 0 0 1px rgba(78, 205, 196, 0.3);

  /* Aurora Gradients */
  --aurora-1: #4ECDC4;
  --aurora-2: #A78BFA;
  /* Purple */
  --aurora-3: #FF6B6B;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1E1E1E;
    --surface-muted: #252525;
    --ink: #F0F4F8;
    /* Brighter text for better contrast */
    --ink-soft: #9BAEC8;

    /* Dark Mode Glass */
    --surface-glass: rgba(20, 20, 20, 0.4);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --hairline: rgba(255, 255, 255, 0.1);
    --hover-wash: rgba(255, 255, 255, 0.07);

    /* Dark Mode Aurora */
    --aurora-1: #2C7A7B;
    /* Darker Teal */
    --aurora-2: #6B46C1;
    /* Darker Purple */
    --aurora-3: #C53030;
    /* Darker Red */

    /* Adjust tints for dark mode to be visible but legible */
    /* using lower opacity to keep bg dark enough for light text */
    --teal-tint: rgba(78, 205, 196, 0.2);
    --coral-tint: rgba(255, 107, 107, 0.2);
    --yellow-tint: rgba(255, 230, 109, 0.2);
    --green-tint: rgba(81, 207, 102, 0.2);

    /* Adjust shadows for dark mode */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

/* Responsive token adjustments */
@media (min-width: 768px) {
  :root {
    --s-7: 40px;
    /* increase spacing on larger screens */
    --s-8: 48px;
    --s-9: 56px;
    --s-10: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-max: 1120px;
    /* wider on desktop */
    --text-base: 1.0625rem;
    /* slightly larger text */
    --text-lg: 1.1875rem;
  }
}

/* On a wide screen the conversation should use the room rather than sit in a
   narrow strip with a scrollbar floating 160px inside the right edge. */
@media (min-width: 1500px) {
  :root {
    --container-max: 1280px;
  }
}