/* ============================================================
   VOICE3 / "Reps" — clean, strict, GPT-like design system
   Sans: Hanken Grotesk · Mono: JetBrains Mono
   Expression lives in ONE place: a painterly green→teal field.
   Surfaces are quiet, borderless, separated by tone + air.
   ============================================================ */

/* kill the blue tap-highlight flash on mobile across all pages */
* { -webkit-tap-highlight-color: transparent; }

:root {
  /* ---- Surfaces (LIGHT) ---- */
  --bg:        #fbfbfa;   /* page canvas */
  --bg-2:      #f3f3f1;   /* inset / track */
  --bg-3:      #ececea;   /* hover */
  --elev:      #ffffff;   /* raised surface (cards) */

  /* ---- Ink ---- */
  --ink:       #16161a;
  --ink-2:     #5c5c66;
  --ink-3:     #9a9aa3;
  --ink-on-accent: #06281f;

  /* ---- Hairline (used sparingly) ---- */
  --line:      #ececea;
  --line-2:    #e0e0dd;

  /* ---- Painterly accent palette ---- */
  --accent:    #14b083;
  --accent-2:  #2ec4b6;
  --accent-3:  #7ee787;
  --accent-soft: #edf7f2;
  --accent-ink:  #0a7355;
  /* paint pigments (used inside the SVG field) */
  --p1: #9ff07a; --p2: #2ec4b6; --p3: #1f9fc4; --p4: #c9f58a; --p5: #14b083;

  /* ---- Status ---- */
  --ok: #14a06a; --warn: #c8881a; --bad: #d9533c; --live: #e0533d;

  /* ---- Shape ---- */
  --radius-xs: 8px; --radius-sm: 12px; --radius: 16px;
  --radius-lg: 22px; --radius-xl: 30px; --radius-pill: 999px;

  /* ---- No drop shadows anywhere. Separation = tone + air + hairline. ---- */
  --sh-1: none;
  --sh-2: none;
  --sh-3: none;
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent-2) 32%, transparent);

  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22,.7,.25,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] {
  --bg:        #0e0e10;
  --bg-2:      #161618;
  --bg-3:      #202024;
  --elev:      #19191c;

  --ink:       #f1f1f3;
  --ink-2:     #abacb4;
  --ink-3:     #74747e;
  --ink-on-accent: #06281f;

  --line:      #232327;
  --line-2:    #2c2c31;

  --accent:    #2ee0a3;
  --accent-2:  #34d6c6;
  --accent-3:  #8ff0a0;
  --accent-soft: #122a24;
  --accent-ink:  #5ee8bf;

  --sh-1: none;
  --sh-2: none;
  --sh-3: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* circular theme reveal — disable default cross-fade so clip-path shows cleanly */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 1; }
::view-transition-old(root) { z-index: 0; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px; line-height: 1.5;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 650; letter-spacing: -.02em; }
p { margin: 0; }
::selection { background: color-mix(in oklab, var(--accent) 28%, transparent); }

/* ---- Theme switch via View Transitions: circular reveal from the toggle ---- */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 1; }
::view-transition-old(root) { z-index: 0; }

/* ---------- Type ---------- */
.t-display { font-size: clamp(40px, 6vw, 66px); line-height: 1.02; font-weight: 720; letter-spacing: -.038em; }
.t-h1 { font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -.032em; }
.t-h2 { font-size: 23px; line-height: 1.18; font-weight: 660; letter-spacing: -.026em; }
.t-h3 { font-size: 17px; line-height: 1.3; font-weight: 640; letter-spacing: -.02em; }
.t-body { font-size: 15px; line-height: 1.55; }
.t-sm { font-size: 13px; line-height: 1.45; }
.t-xs { font-size: 11.5px; line-height: 1.4; }
.t-mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.muted { color: var(--ink-2); }
.muted-2 { color: var(--ink-3); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); font-family: var(--mono); }

/* paint text fill */
.paint-text {
  background: linear-gradient(100deg, var(--p1), var(--p2) 45%, var(--p3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   COMPONENTS  (borderless, separated by tone + soft shadow)
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px; height: 42px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .12s var(--ease), background .2s var(--ease), color .2s;
}
.btn:active { transform: scale(.98); }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: color-mix(in oklab, var(--ink) 88%, var(--accent)); }
.btn-accent { background: var(--accent); color: var(--ink-on-accent); }
.btn-accent:hover { background: color-mix(in oklab, var(--accent) 88%, #000); }
.btn-ghost { background: var(--bg-2); color: var(--ink); }
.btn-ghost:hover { background: var(--bg-3); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--bg-2); color: var(--ink); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 16px; }
.btn-icon { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.btn-block { display: flex; width: 100%; }

/* ---- Input ---- */
.field { display: grid; gap: 7px; }
.field > label { font-size: 13px; font-weight: 560; color: var(--ink-2); }
.input, .textarea, .select {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font: inherit; font-size: 14.5px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.textarea { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent-2); box-shadow: none; }
.input-icon { position: relative; }
.input-icon .input { padding-left: 42px; }
.input-icon .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); }

/* ---- Toggle / segmented ---- */
.switch { width: 44px; height: 26px; border-radius: 999px; background: var(--bg-3); position: relative; transition: background .22s var(--ease); flex: none; }
.switch.on { background: var(--accent); }
.switch::after { content:""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .22s var(--ease); }
.switch.on::after { transform: translateX(18px); }

.seg { display: inline-flex; padding: 3px; background: var(--bg-2); border-radius: var(--radius-pill); gap: 2px; }
.seg button { padding: 7px 15px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 560; color: var(--ink-2); transition: color .18s, background .18s; display:flex; align-items:center; gap:6px; }
.seg button .ic { width: 15px; height: 15px; }
.seg button.active { background: var(--elev); color: var(--ink); }

/* ---- Chip / badge ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 560; background: var(--bg-2); color: var(--ink-2); }
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 640; font-family: var(--mono); }
.badge .ic { width: 12px; height: 12px; }
.badge.ok { background: color-mix(in oklab, var(--ok) 15%, transparent); color: var(--ok); }
.badge.warn { background: color-mix(in oklab, var(--warn) 18%, transparent); color: var(--warn); }
.badge.bad { background: color-mix(in oklab, var(--bad) 15%, transparent); color: var(--bad); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }

/* ---- Card (no border, no shadow; tone + air) ---- */
.card { background: var(--bg-2); border-radius: var(--radius-lg); padding: 22px; transition: background .2s var(--ease); }
.card.hoverable { cursor: pointer; }
.card.hoverable:hover { background: var(--bg-3); }
.card-quiet { background: var(--bg-2); border-radius: var(--radius-lg); }

/* ---- Avatar ---- */
.avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; position: relative; display:grid; place-items:center; color:#06281f; font-weight:700; font-size:14px; }
.avatar.sq { border-radius: 11px; }

/* ---- Stat ---- */
.stat .k { font-size: 12px; color: var(--ink-3); font-weight: 560; }
.stat .v { font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-family: var(--mono); }
.stat .delta { font-size: 12px; font-weight: 640; display:inline-flex; align-items:center; gap:3px; }
.stat .delta .ic { width: 12px; height: 12px; }
.stat .delta.up { color: var(--ok); }
.stat .delta.down { color: var(--bad); }

/* ---- Meter ---- */
.meter { display: grid; gap: 7px; }
.meter .lab { display: flex; justify-content: space-between; font-size: 12px; }
.meter .lab b { font-family: var(--mono); }
.meter .bar { height: 6px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--p2), var(--p1)); }

/* ---- Scrollbar ---- */
.scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; }

/* ============================================================
   PAINTERLY VOICE — living liquid drop (morphs constantly,
   paint forms inside). No ring, no glow.
   ============================================================ */
.voice { position: relative; display: grid; place-items: center; }
.drop { overflow: hidden; position: relative;
  border-radius: 46% 54% 52% 48% / 54% 47% 53% 46%;
  animation: drop-morph 9s ease-in-out infinite, drop-wob 11s ease-in-out infinite; }
.drop svg { width: 100%; height: 100%; display: block; }
@keyframes drop-morph {
  0%,100% { border-radius: 46% 54% 52% 48% / 54% 47% 53% 46%; }
  20% { border-radius: 60% 40% 44% 56% / 46% 58% 42% 54%; }
  40% { border-radius: 50% 50% 62% 38% / 58% 42% 56% 44%; }
  60% { border-radius: 40% 60% 48% 52% / 50% 56% 44% 50%; }
  80% { border-radius: 56% 44% 38% 62% / 44% 50% 50% 58%; }
}
@keyframes drop-wob {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  33% { transform: translate(5px,-4px) rotate(5deg) scale(1.03); }
  66% { transform: translate(-4px,4px) rotate(-4deg) scale(.99); }
}
/* ============ THREE DISTINCT VOICE STATES ============ */

/* — Client speaks: rounded square, paint flows AND warms to red-orange — */
.voice--ai .drop {
  border-radius: 30%;
  animation: ai-squircle 5s ease-in-out infinite;
}
.voice--ai .drop svg {
  position: absolute; top: -28%; left: -28%;
  width: 156%; height: 156%;
  filter: sepia(1) saturate(6) hue-rotate(-34deg) brightness(.98);  /* steady red-orange */
  animation: paint-flow 6s ease-in-out infinite;
}
@keyframes ai-squircle {
  0%,100% { border-radius: 30%; transform: scale(1); }
  50%     { border-radius: 36%; transform: scale(1.03); }
}
@keyframes paint-flow {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25%     { transform: translate(-7%,5%) rotate(4deg); }
  50%     { transform: translate(4%,-6%) rotate(-3deg); }
  75%     { transform: translate(6%,4%) rotate(2deg); }
}

/* — I speak: smaller, quieter, calm — the system is listening — */
.voice--me .drop {
  animation: drop-morph 9s ease-in-out infinite, drop-wob 12s ease-in-out infinite;
  opacity: .82;
}

/* — Start / end of call: drop forms, then calmly dissolves away — */
.voice--end .drop {
  animation: drop-morph 8s ease-in-out infinite, end-dissolve 5s ease-in-out infinite;
}
@keyframes end-dissolve {
  0%      { transform: scale(.2); opacity: 0; filter: blur(8px); }   /* forms */
  18%     { transform: scale(1);  opacity: 1; filter: blur(0); }     /* settled */
  62%     { transform: scale(1);  opacity: 1; filter: blur(0); }     /* present */
  82%,100%{ transform: scale(.86); opacity: 0; filter: blur(7px); }  /* dissolves, ends */
}