.z-root[data-z-state="idle"] .accent-tri__outer,
.z-root[data-z-state="idle"] .accent-tri__inner,
.z-root[data-z-state="idle"] .accent-tri__third,
.z-root[data-z-state="idle"] .layer-flower-iris { animation-duration: 20s; }
.z-root[data-z-state="idle"] .accent-tri__outer { animation-duration: 8.2s; }
.z-root[data-z-state="idle"] .accent-tri__inner { animation-duration: 10.7s; }
.z-root[data-z-state="idle"] .accent-tri__third { animation-duration: 6.31s; }
.z-root[data-z-state="idle"] .layer-neon-z { animation-name: zIdleBreath; animation-duration: 6.8s; }
.z-root[data-z-state="operational"] .z-phase-pill b::after { content: "operational"; }
.z-root[data-z-state="loading"] .z-phase-pill b::after { content: "loading"; }
.z-root[data-z-state="listening"] .z-phase-pill b::after { content: "listening"; }
.z-root[data-z-state="recording"] .z-phase-pill b::after { content: "recording"; }
.z-root[data-z-state="typing"] .z-phase-pill b::after { content: "typing"; }
.z-root[data-z-state="thinking"] .z-phase-pill b::after { content: "thinking"; }
/* Z_SPEAKING_STATE_2026-05-11: "speaking" state alias used by the popup
   typewriter overlay. Faster cycle than thinking (4.0s) to read as
   "actively talking", and emits the same triangle/iris animation set. */
.z-root[data-z-state="speaking"] .z-phase-pill b::after { content: "speaking"; }
.z-root[data-z-state="speaking"] { --z-cycle: 4.0s; }
.z-root[data-z-state="searching"] .z-phase-pill b::after { content: "searching"; }
.z-root[data-z-state="dispatching"] .z-phase-pill b::after { content: "dispatching"; }
.z-root[data-z-state="engineer-running"] .z-phase-pill b::after { content: "engineer running"; }
.z-root[data-z-state="worker-syncing"] .z-phase-pill b::after { content: "worker syncing"; }
.z-root[data-z-state="self-checking"] .z-phase-pill b::after { content: "self checking"; }
.z-root[data-z-state="self-fixing"] .z-phase-pill b::after { content: "self fixing"; }
.z-root[data-z-state="guarding"] .z-phase-pill b::after { content: "guarding"; }
.z-root[data-z-state="drift-warning"] .z-phase-pill b::after { content: "drift warning"; }
.z-root[data-z-state="drift-block"] .z-phase-pill b::after { content: "drift block"; }
.z-root[data-z-state="complete"] .z-phase-pill b::after { content: "complete"; }
.z-root[data-z-state="blocked"] .z-phase-pill b::after { content: "blocked"; }
.z-root[data-z-state="error"] .z-phase-pill b::after { content: "error"; }

.z-root[data-z-state="loading"] { --z-cycle: 2.8s; }
.z-root[data-z-state="listening"] { --z-cycle: 3.8s; --c1: #7ee8fa; --c2: #ffffff; }
.z-root[data-z-state="recording"] { --z-cycle: 2.6s; --c1: #ff2d55; --c2: #7ee8fa; }
.z-root[data-z-state="typing"] { --z-cycle: 3.1s; }
.z-root[data-z-state="thinking"] { --z-cycle: 5.5s; }
.z-root[data-z-state="searching"] { --z-cycle: 3.4s; --c1: #7ee8fa; --c2: #ff2d55; }
.z-root[data-z-state="dispatching"] { --z-cycle: 2.2s; --c1: #ffffff; --c2: #7ee8fa; }
.z-root[data-z-state="engineer-running"] { --z-cycle: 2.7s; --c1: #7ee8fa; --c2: #ff2d55; }
.z-root[data-z-state="worker-syncing"] { --z-cycle: 4.4s; --c1: #7ee8fa; --c2: #ffffff; }
.z-root[data-z-state="self-checking"] { --z-cycle: 5s; --c1: #ffffff; --c2: #7ee8fa; }
.z-root[data-z-state="self-fixing"] { --z-cycle: 3.3s; --c1: #ff2d55; --c2: #ffffff; }
.z-root[data-z-state="guarding"] { --z-cycle: 6.5s; }
.z-root[data-z-state="drift-warning"] { --c1: #ff2d55; --c2: #ffffff; --z-cycle: 3.2s; }
.z-root[data-z-state="drift-block"] { --c1: #ff0038; --c2: #7ee8fa; --z-cycle: 2.2s; }
.z-root[data-z-state="complete"] { --z-cycle: 9s; }
.z-root[data-z-state="blocked"] { --c1: #ffb86b; --c2: #ffffff; --z-cycle: 3.6s; }
.z-root[data-z-state="error"] { --c1: #ff002d; --c2: #ffffff; --z-cycle: 2.5s; }

.z-root[data-z-state="loading"] .accent-tri__third { animation-duration: 2.15s; }
.z-root[data-z-state="loading"] .z-neon-rotor-y {
  animation:
    zNeonBootSpinY 1000ms cubic-bezier(.2,.9,.18,1) both,
    zNeonContinuousFlipY 2600ms linear 1000ms infinite;
}
.z-root[data-z-state="listening"] .layer-sun { animation-name: zListenRadar; }
.z-root[data-z-state="recording"] .layer-neon-z { animation-name: zRecordingBeat; animation-duration: 1.6s; }
.z-root[data-z-state="typing"] .layer-neon-z { animation-name: zTypingRhythm; animation-duration: 1.8s; }
.z-root[data-z-state="thinking"] .accent-tri__third { animation-duration: 4.62s; }
.z-root[data-z-state="thinking"] .z-neon-rotor-y,
.z-root[data-z-state="searching"] .z-neon-rotor-y {
  animation: zNeonThinkingY 2400ms ease-in-out infinite;
}
.z-root[data-z-state="speaking"] .layer-sun { animation-name: zSpeakingWave; }
.z-root[data-z-state="speaking"] .z-neon-rotor-y {
  animation: zNeonSpeakingY 1100ms ease-in-out infinite;
}
.z-root[data-z-state="speaking"] .z-disk {
  filter: saturate(calc(1.08 + (var(--z-audio-level, 0) * .42))) brightness(calc(1 + (var(--z-audio-level, 0) * .18)));
  box-shadow:
    inset 0 0 44px rgba(255,255,255,.06),
    inset 0 -22px 60px rgba(0,0,0,.52),
    0 0 calc(76px + (var(--z-audio-level, 0) * 48px)) color-mix(in oklab, var(--c1) 28%, transparent);
}
.z-root[data-z-state="speaking"] .layer-flower-iris {
  filter: drop-shadow(0 0 calc(12px + (var(--z-audio-level, 0) * 18px)) color-mix(in oklab, var(--c2) 48%, transparent));
}
.z-root[data-z-state="dispatching"] .accent-tri__third { animation-name: zDispatchSpark; animation-duration: 1.4s; }
.z-root[data-z-state="worker-syncing"] .layer-flower-iris { animation-duration: 4.8s; }
.z-root[data-z-state="self-checking"] .accent-tri { opacity: .68; }
.z-root[data-z-state="blocked"] .layer-neon-z,
.z-root[data-z-state="error"] .layer-neon-z { animation-name: zWarningFlicker; animation-duration: 2.2s; }
.z-root[data-z-state="drift-block"] .z-disk { box-shadow: inset 0 0 44px rgba(255,255,255,.07), 0 0 0 24px rgba(255,0,56,.08), 0 0 94px rgba(255,45,85,.38); }
.z-root[data-z-state="complete"] .accent-tri { opacity:.46; }

@keyframes zIdleBreath {
  0%,100% { opacity:.58; transform:scale(.96); }
  50% { opacity:.86; transform:scale(1.02); }
}
@keyframes zListenRadar {
  0%,100% { opacity:.28; transform:scale(.72); }
  45% { opacity:.92; transform:scale(1.18); }
}
@keyframes zRecordingBeat {
  0%,100% { opacity:.68; transform:scale(.98); }
  35% { opacity:1; transform:scale(1.11); }
  70% { opacity:.82; transform:scale(1.02); }
}
@keyframes zTypingRhythm {
  0%,100% { transform:translateX(0) scale(.98); opacity:.66; }
  30% { transform:translateX(-1px) scale(1.04); opacity:1; }
  60% { transform:translateX(1px) scale(1); opacity:.82; }
}
@keyframes zSearchSweep {
  0% { transform:rotate(0deg) scale(.92); opacity:.62; }
  50% { transform:rotate(180deg) scale(1.05); opacity:1; }
  100% { transform:rotate(360deg) scale(.92); opacity:.62; }
}
@keyframes zSpeakingWave {
  0%,100% { transform:scale(.78); opacity:.32; }
  25% { transform:scale(1.06); opacity:.9; }
  55% { transform:scale(.92); opacity:.62; }
}
@keyframes zDispatchSpark {
  0% { transform:rotate(0deg) translateX(0) scale(.88); opacity:.74; }
  45% { transform:rotate(140deg) translateX(4px) scale(.88); opacity:1; }
  100% { transform:rotate(360deg) translateX(0) scale(.88); opacity:.74; }
}
@keyframes zTerminalScan {
  0% { opacity:.34; transform:translateY(-1px); }
  50% { opacity:.72; transform:translateY(1px); }
  100% { opacity:.34; transform:translateY(-1px); }
}
@keyframes zWarningFlicker {
  0%,100% { opacity:.78; transform:scale(.98); }
  12% { opacity:.42; }
  24% { opacity:1; }
  52% { opacity:.66; transform:scale(1.02); }
}