/*
 * DESIGN INTENT
 * Tone: soft organic — warm, rounded, gently animated
 * Fonts: Bricolage Grotesque (display) + Nunito Sans (body)
 * Palette: cream #FAF6F0 / warm white #FFFDF9 / warm ink #2A2118 / terracotta #C96F4A
 * Layout signature: single floating chat card over an ambient warm gradient field
 * Memorable element: breathing gradient orb + soft staggered bubble entrances
 *
 * Split: base.css (tokens + reset + ambient field) · chat.css (chat card,
 * transcript, chips, composer, notice) · settings.css (gear modal).
 */

:root {
  color-scheme: light;

  --canvas: #FAF6F0;
  --sunken: #F3ECE2;
  --base: #F7F1E8;
  --raised: #FFFDF9;
  --ink: #2A2118;
  --ink-soft: #6B5D4D;
  --ink-faint: #9C8D7B;
  --line: rgba(90, 70, 45, 0.12);
  --line-strong: rgba(90, 70, 45, 0.2);

  --accent: #C96F4A;
  --accent-hover: #B85E39;
  --accent-soft: rgba(201, 111, 74, 0.12);
  --accent-text: #B85E39;
  --accent-quiet: #C9A28D;
  --on-accent: #FFFDF9;

  --ok: #4F7D5B;
  --warn: #9A6B1E;
  --stop: #B3463C;

  --shadow-sm: 0 1px 2px rgba(120, 85, 50, 0.06), 0 2px 10px -2px rgba(120, 85, 50, 0.08);
  --shadow-md: 0 8px 28px -6px rgba(160, 100, 60, 0.18), 0 2px 8px rgba(120, 85, 50, 0.06);
  --shadow-lg: 0 24px 60px -12px rgba(160, 100, 60, 0.22), 0 4px 16px rgba(120, 85, 50, 0.08);

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --t-fast: 200ms; --t-base: 400ms; --t-slow: 600ms;
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.44, 1);

  --display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --sans: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 66ch;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); color: var(--accent-text); }

/* Thin warm scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(160, 110, 70, 0.25);
  border-radius: 99px;
  border: 3px solid var(--canvas);
}
::-webkit-scrollbar-thumb:hover { background: rgba(160, 110, 70, 0.45); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

code, .mono { font-family: var(--mono); font-size: 0.85em; }

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; }

/* ---------- Ambient background field ---------- */

.ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 15% 0%, #FBEFE2 0%, transparent 55%),
    radial-gradient(100% 80% at 90% 100%, #F6E7D6 0%, transparent 50%),
    var(--canvas);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.blob-a {
  width: 46vmax; height: 46vmax;
  left: -12vmax; top: -14vmax;
  background: radial-gradient(circle, rgba(240, 170, 120, 0.5), transparent 70%);
  animation: drift-a 26s ease-in-out infinite alternate;
}

.blob-b {
  width: 40vmax; height: 40vmax;
  right: -14vmax; bottom: -12vmax;
  background: radial-gradient(circle, rgba(190, 150, 200, 0.35), transparent 70%);
  animation: drift-b 32s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vmax, 5vmax) scale(1.12); }
}

@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.05); }
  to   { transform: translate(-5vmax, -6vmax) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}