/* Equalizer Orb: adapted from the component supplied by Brad, September 16, 2026. */
@property --eq-from {
  syntax: '<color>';
  inherits: true;
  initial-value: #38bdf8;
}

@property --eq-to {
  syntax: '<color>';
  inherits: true;
  initial-value: #818cf8;
}

@property --eq-ring {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --eq-breathe {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --eq-shake {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.sam-eq-orb {
  --orb-size: 168px;
  --orb-speed: 1;
  --orb-color-from: #818cf8;
  --orb-color-to: #22d3ee;
  --orb-level: 0;
  --orb-bass: 0;
  --orb-mid: 0;
  --orb-treble: 0;
  --eq-from: var(--orb-color-from);
  --eq-to: var(--orb-color-to);
  --eq-ring: 0;
  --eq-breathe: 0;
  --eq-shake: 0;
  --eq-ink: color-mix(in oklab, var(--eq-from) 45%, #0f172a);
  --eq-halo-mix: color-mix(in oklab, var(--eq-from), var(--eq-to) 60%);
  --eq-surface-hi: color-mix(in oklab, var(--eq-from) 10%, #ffffff);
  --eq-surface-lo: color-mix(in oklab, var(--eq-to) 16%, #e9edf7);
  --eq-rim: color-mix(in oklab, var(--eq-from) 38%, #b9c3d8);
  --eq-sheen: rgb(255 255 255 / 0.65);
  --eq-vignette: color-mix(in oklab, #0f172a, transparent 84%);
  --eq-glow-halo: color-mix(in oklab, var(--eq-halo-mix), transparent 35%);
  --eq-glow-core: color-mix(in oklab, var(--eq-from), transparent 25%);
  --eq-shadow-tint: color-mix(in oklab, var(--eq-ink), transparent 40%);
  --eq-shadow-tint-active: color-mix(in oklab, var(--eq-ink), transparent 28%);
  --eq-shadow-glow: transparent;
  --eq-shadow-glow-active: transparent;
  --eq-shadow:
    0 14px 28px -16px var(--eq-shadow-tint),
    0 0 26px -8px var(--eq-shadow-glow);
  --eq-shadow-active:
    0 16px 34px -16px var(--eq-shadow-tint-active),
    0 0 40px -6px var(--eq-shadow-glow-active);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--orb-size);
  height: var(--orb-size);
  isolation: isolate;
  transition:
    opacity 0.3s ease,
    filter 0.3s ease,
    --eq-from 0.35s ease,
    --eq-to 0.35s ease,
    --eq-ring 0.35s ease,
    --eq-breathe 0.35s ease,
    --eq-shake 0.35s ease;
}

@media (prefers-color-scheme: dark) {
  .sam-eq-orb {
    --eq-surface-hi: color-mix(in oklab, var(--eq-from) 20%, #0b0e17);
    --eq-surface-lo: color-mix(in oklab, var(--eq-to) 11%, #05070d);
    --eq-rim: color-mix(in oklab, var(--eq-from) 42%, #141824);
    --eq-sheen: rgb(255 255 255 / 0.09);
    --eq-vignette: rgb(0 0 0 / 0.55);
    --eq-glow-halo: var(--eq-halo-mix);
    --eq-glow-core: var(--eq-from);
    --eq-shadow-tint: rgb(0 0 0 / 0.6);
    --eq-shadow-tint-active: rgb(0 0 0 / 0.55);
    --eq-shadow-glow: color-mix(in oklab, var(--eq-from), transparent 68%);
    --eq-shadow-glow-active: color-mix(in oklab, var(--eq-from), transparent 55%);
  }
}

@supports (color: light-dark(#fff, #000)) {
  .sam-eq-orb {
    --eq-surface-hi: light-dark(
      color-mix(in oklab, var(--eq-from) 10%, #ffffff),
      color-mix(in oklab, var(--eq-from) 20%, #0b0e17)
    );
    --eq-surface-lo: light-dark(
      color-mix(in oklab, var(--eq-to) 16%, #e9edf7),
      color-mix(in oklab, var(--eq-to) 11%, #05070d)
    );
    --eq-rim: light-dark(
      color-mix(in oklab, var(--eq-from) 38%, #b9c3d8),
      color-mix(in oklab, var(--eq-from) 42%, #141824)
    );
    --eq-sheen: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.09));
    --eq-vignette: light-dark(color-mix(in oklab, #0f172a, transparent 84%), rgb(0 0 0 / 0.55));
    --eq-glow-halo: light-dark(
      color-mix(in oklab, var(--eq-halo-mix), transparent 35%),
      var(--eq-halo-mix)
    );
    --eq-glow-core: light-dark(
      color-mix(in oklab, var(--eq-from), transparent 25%),
      var(--eq-from)
    );
    --eq-shadow-tint: light-dark(
      color-mix(in oklab, var(--eq-ink), transparent 40%),
      rgb(0 0 0 / 0.6)
    );
    --eq-shadow-tint-active: light-dark(
      color-mix(in oklab, var(--eq-ink), transparent 28%),
      rgb(0 0 0 / 0.55)
    );
    --eq-shadow-glow: light-dark(
      transparent,
      color-mix(in oklab, var(--eq-from), transparent 68%)
    );
    --eq-shadow-glow-active: light-dark(
      transparent,
      color-mix(in oklab, var(--eq-from), transparent 55%)
    );
  }
}

.sam-eq-orb[data-state='idle'] {
  --eq-breathe: 1;
}

.sam-eq-orb[data-state='listening'] {
  --eq-ring: 1;
}

.sam-eq-orb[data-state='error'] {
  --eq-from: #fb7185;
  --eq-to: #f43f5e;
  --eq-shake: 1;
}

.sam-eq-orb[data-state='disabled'] {
  opacity: 0.5;
  filter: grayscale(0.85);
}

.sam-eq-ring {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--eq-from), var(--eq-to) 45%);
  opacity: calc(var(--eq-ring) * (0.18 + 0.6 * var(--orb-level)));
  transform: scale(calc(0.94 + var(--eq-ring) * (0.025 + 0.05 * var(--orb-level))));
}

.sam-eq-disc {
  position: absolute;
  inset: 3.5%;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 18%, var(--eq-surface-hi), var(--eq-surface-lo) 78%);
  box-shadow:
    inset 0 0 0 1px var(--eq-rim),
    var(--eq-shadow);
  transform: scale(calc(1 + 0.02 * var(--orb-level)));
  transition: box-shadow 0.35s ease;
  animation: eq-breathe calc(4s / var(--orb-speed)) ease-in-out infinite paused;
}

.sam-eq-orb[data-state='idle'] .sam-eq-disc {
  animation-play-state: running;
}

.sam-eq-disc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(85% 55% at 50% 8%, var(--eq-sheen), transparent 62%);
  pointer-events: none;
}

.sam-eq-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(100% 100% at 50% 45%, transparent 58%, var(--eq-vignette));
  pointer-events: none;
}

.sam-eq-orb[data-state='listening'] .sam-eq-disc,
.sam-eq-orb[data-state='speaking'] .sam-eq-disc {
  box-shadow:
    inset 0 0 0 1px var(--eq-rim),
    var(--eq-shadow-active);
}

.sam-eq-glowHalo {
  position: absolute;
  z-index: 0;
  width: 86%;
  height: 86%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--eq-glow-halo), transparent 70%);
  filter: blur(24px);
  opacity: calc(0.16 + 0.4 * var(--orb-level));
  transform: scale(calc(1 + 0.12 * var(--orb-level)));
}

.sam-eq-glowCore {
  position: absolute;
  z-index: 1;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--eq-glow-core), transparent 68%);
  filter: blur(6px);
  opacity: calc(0.26 + 0.5 * var(--orb-level));
  transform: scale(calc(1 + 0.2 * var(--orb-level)));
}

.sam-eq-bars {
  position: relative;
  z-index: 2;
  display: grid;
  width: 68%;
  height: 58%;
  -webkit-box-reflect: below 2px linear-gradient(to bottom, transparent 55%, rgb(0 0 0 / 0.3));
  animation: eq-shake calc(1.8s / var(--orb-speed)) linear infinite paused;
}

.sam-eq-orb[data-state='error'] .sam-eq-bars {
  animation-play-state: running;
}

.sam-eq-layer {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6%;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.sam-eq-orb[data-state='idle'] .sam-eq-layerIdle,
.sam-eq-orb[data-state='disabled'] .sam-eq-layerIdle,
.sam-eq-orb[data-state='listening'] .sam-eq-layerActive,
.sam-eq-orb[data-state='speaking'] .sam-eq-layerActive,
.sam-eq-orb[data-state='thinking'] .sam-eq-layerWave,
.sam-eq-orb[data-state='connecting'] .sam-eq-layerSweep,
.sam-eq-orb[data-state='error'] .sam-eq-layerFlat {
  opacity: 1;
}

.sam-eq-bar {
  --eq-dot: calc(var(--orb-size) * (0.013 + 0.006 * var(--bar-gain)));
  --eq-lo: calc((7% + 9% * var(--bar-level)) * var(--bar-gain));
  --eq-mid: calc((14% + 22% * var(--bar-level)) * var(--bar-gain));
  --eq-mh: calc((17% + 28% * var(--bar-level)) * var(--bar-gain));
  --eq-hi: calc((20% + 34% * var(--bar-level)) * var(--bar-gain));
  --eq-cn: calc((13% + 24% * var(--bar-level)) * (0.7 + 0.3 * var(--bar-gain)));
  width: 8%;
  height: var(--bar-h);
  border-radius: 999px;
  background: linear-gradient(
    to top,
    var(--eq-from),
    color-mix(in oklab, var(--eq-from), var(--eq-to) 55%) 55%,
    color-mix(in oklab, var(--eq-to), #fff 30%)
  );
  filter: hue-rotate(var(--bar-hue));
}

.sam-eq-bar1 {
  --bar-level: var(--orb-treble);
  --bar-h: 48%;
  --bar-gain: 0.55;
  --bar-hue: -5deg;
  --bar-i: 0;
  --bar-dur: 0.96s;
  --bar-delay: -0.31s;
  --bar-ease: cubic-bezier(0.45, 0, 0.55, 1);
}

.sam-eq-bar2 {
  --bar-level: calc(0.55 * var(--orb-mid) + 0.45 * var(--orb-treble));
  --bar-h: 66%;
  --bar-gain: 0.7;
  --bar-hue: -3deg;
  --bar-i: 1;
  --bar-dur: 0.78s;
  --bar-delay: -0.12s;
  --bar-ease: cubic-bezier(0.33, 0.72, 0.3, 1);
}

.sam-eq-bar3 {
  --bar-level: calc(0.8 * var(--orb-mid) + 0.2 * var(--orb-bass));
  --bar-h: 86%;
  --bar-gain: 0.9;
  --bar-hue: -1deg;
  --bar-i: 2;
  --bar-dur: 1.08s;
  --bar-delay: -0.54s;
  --bar-ease: cubic-bezier(0.6, 0.04, 0.4, 0.96);
}

.sam-eq-bar4 {
  --bar-level: calc(0.75 * var(--orb-bass) + 0.25 * var(--orb-mid));
  --bar-h: 100%;
  --bar-gain: 1;
  --bar-hue: 0deg;
  --bar-i: 3;
  --bar-dur: 0.72s;
  --bar-delay: -0.2s;
  --bar-ease: cubic-bezier(0.45, 0, 0.55, 1);
}

.sam-eq-bar5 {
  --bar-level: calc(0.85 * var(--orb-mid) + 0.15 * var(--orb-bass));
  --bar-h: 84%;
  --bar-gain: 0.88;
  --bar-hue: 1deg;
  --bar-i: 4;
  --bar-dur: 0.9s;
  --bar-delay: -0.66s;
  --bar-ease: cubic-bezier(0.33, 0.72, 0.3, 1);
}

.sam-eq-bar6 {
  --bar-level: calc(0.5 * var(--orb-mid) + 0.5 * var(--orb-treble));
  --bar-h: 64%;
  --bar-gain: 0.72;
  --bar-hue: 3deg;
  --bar-i: 5;
  --bar-dur: 0.84s;
  --bar-delay: -0.4s;
  --bar-ease: cubic-bezier(0.6, 0.04, 0.4, 0.96);
}

.sam-eq-bar7 {
  --bar-level: calc(0.9 * var(--orb-treble) + 0.1 * var(--orb-mid));
  --bar-h: 50%;
  --bar-gain: 0.55;
  --bar-hue: 5deg;
  --bar-i: 6;
  --bar-dur: 1.02s;
  --bar-delay: -0.09s;
  --bar-ease: cubic-bezier(0.45, 0, 0.55, 1);
}

@supports (clip-path: inset(10% 0 round 999px)) {
  .sam-eq-bar {
    clip-path: inset(calc(50% - var(--eq-dot)) 0 round 999px);
  }

  .sam-eq-layerFlat .sam-eq-bar {
    clip-path: inset(calc(50% - var(--orb-size) * 0.012) 0 round 999px);
  }

  .sam-eq-layerActive .sam-eq-bar {
    animation-duration: calc(var(--bar-dur) / var(--orb-speed));
    animation-delay: calc(var(--bar-delay) / var(--orb-speed));
    animation-timing-function: var(--bar-ease);
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }

  .sam-eq-layerActive .sam-eq-bar1 {
    animation-name: eq-b;
  }

  .sam-eq-layerActive .sam-eq-bar2 {
    animation-name: eq-a;
  }

  .sam-eq-layerActive .sam-eq-bar3 {
    animation-name: eq-c;
  }

  .sam-eq-layerActive .sam-eq-bar4 {
    animation-name: eq-a;
  }

  .sam-eq-layerActive .sam-eq-bar5 {
    animation-name: eq-b;
  }

  .sam-eq-layerActive .sam-eq-bar6 {
    animation-name: eq-c;
  }

  .sam-eq-layerActive .sam-eq-bar7 {
    animation-name: eq-a;
  }

  .sam-eq-layerWave .sam-eq-bar {
    animation: eq-wave calc(2.4s / var(--orb-speed)) cubic-bezier(0.45, 0, 0.55, 1)
      calc(var(--bar-i) * -0.3s / var(--orb-speed)) infinite paused;
  }

  .sam-eq-layerSweep .sam-eq-bar {
    animation: eq-connect calc(1.6s / var(--orb-speed)) ease-in-out
      calc(var(--bar-i) * 0.09s / var(--orb-speed)) infinite both paused;
  }

  .sam-eq-orb[data-state='listening'] .sam-eq-layerActive .sam-eq-bar,
  .sam-eq-orb[data-state='speaking'] .sam-eq-layerActive .sam-eq-bar,
  .sam-eq-orb[data-state='thinking'] .sam-eq-layerWave .sam-eq-bar,
  .sam-eq-orb[data-state='connecting'] .sam-eq-layerSweep .sam-eq-bar {
    animation-play-state: running;
  }

  @media (prefers-reduced-motion: reduce) {
    .sam-eq-orb .sam-eq-layer .sam-eq-bar {
      animation: none;
    }

    .sam-eq-orb .sam-eq-layerSweep .sam-eq-bar {
      clip-path: inset(calc(50% - (6% + 9% * var(--bar-gain))) 0 round 999px);
    }

    .sam-eq-orb .sam-eq-layerWave .sam-eq-bar {
      clip-path: inset(calc(50% - (9% + 16% * var(--bar-gain))) 0 round 999px);
    }

    .sam-eq-orb .sam-eq-layerActive .sam-eq-bar {
      clip-path: inset(calc(50% - (11% + 27% * var(--bar-gain))) 0 round 999px);
    }
  }
}

@supports not (clip-path: inset(10% 0 round 999px)) {
  .sam-eq-bar {
    transform: scaleY(0.14);
  }

  .sam-eq-layerFlat .sam-eq-bar {
    transform: scaleY(0.12);
  }

  .sam-eq-layerActive .sam-eq-bar {
    animation: eq-y calc(var(--bar-dur) / var(--orb-speed)) var(--bar-ease)
      calc(var(--bar-delay) / var(--orb-speed)) infinite paused;
  }

  .sam-eq-layerWave .sam-eq-bar {
    animation: eq-y calc(2.4s / var(--orb-speed)) cubic-bezier(0.45, 0, 0.55, 1)
      calc(var(--bar-i) * -0.3s / var(--orb-speed)) infinite paused;
  }

  .sam-eq-layerSweep .sam-eq-bar {
    animation: eq-y-connect calc(1.6s / var(--orb-speed)) ease-in-out
      calc(var(--bar-i) * 0.09s / var(--orb-speed)) infinite both paused;
  }

  .sam-eq-orb[data-state='listening'] .sam-eq-layerActive .sam-eq-bar,
  .sam-eq-orb[data-state='speaking'] .sam-eq-layerActive .sam-eq-bar,
  .sam-eq-orb[data-state='thinking'] .sam-eq-layerWave .sam-eq-bar,
  .sam-eq-orb[data-state='connecting'] .sam-eq-layerSweep .sam-eq-bar {
    animation-play-state: running;
  }

  @media (prefers-reduced-motion: reduce) {
    .sam-eq-orb .sam-eq-layer .sam-eq-bar {
      animation: none;
    }

    .sam-eq-orb .sam-eq-layerSweep .sam-eq-bar {
      transform: scaleY(calc(0.16 + 0.14 * var(--bar-gain)));
    }

    .sam-eq-orb .sam-eq-layerWave .sam-eq-bar {
      transform: scaleY(calc(0.2 + 0.26 * var(--bar-gain)));
    }

    .sam-eq-orb .sam-eq-layerActive .sam-eq-bar {
      transform: scaleY(calc(0.24 + 0.5 * var(--bar-gain)));
    }
  }
}

@keyframes eq-a {
  0%,
  100% {
    clip-path: inset(calc(50% - var(--eq-lo)) 0 round 999px);
  }
  30% {
    clip-path: inset(calc(50% - var(--eq-hi)) 0 round 999px);
  }
  55% {
    clip-path: inset(calc(50% - var(--eq-mid)) 0 round 999px);
  }
  80% {
    clip-path: inset(calc(50% - var(--eq-mh)) 0 round 999px);
  }
}

@keyframes eq-b {
  0%,
  100% {
    clip-path: inset(calc(50% - var(--eq-mid)) 0 round 999px);
  }
  30% {
    clip-path: inset(calc(50% - var(--eq-lo)) 0 round 999px);
  }
  55% {
    clip-path: inset(calc(50% - var(--eq-hi)) 0 round 999px);
  }
  78% {
    clip-path: inset(calc(50% - var(--eq-lo)) 0 round 999px);
  }
}

@keyframes eq-c {
  0%,
  100% {
    clip-path: inset(calc(50% - var(--eq-lo)) 0 round 999px);
  }
  25% {
    clip-path: inset(calc(50% - var(--eq-mid)) 0 round 999px);
  }
  52% {
    clip-path: inset(calc(50% - var(--eq-lo)) 0 round 999px);
  }
  80% {
    clip-path: inset(calc(50% - var(--eq-hi)) 0 round 999px);
  }
}

@keyframes eq-wave {
  0%,
  100% {
    clip-path: inset(calc(50% - var(--eq-lo)) 0 round 999px);
  }
  50% {
    clip-path: inset(calc(50% - var(--eq-mh)) 0 round 999px);
  }
}

@keyframes eq-connect {
  0%,
  26%,
  100% {
    clip-path: inset(calc(50% - var(--eq-dot)) 0 round 999px);
  }
  12% {
    clip-path: inset(calc(50% - var(--eq-cn)) 0 round 999px);
  }
}

@keyframes eq-y {
  0%,
  100% {
    transform: scaleY(calc((0.12 + 0.14 * var(--bar-level)) * var(--bar-gain)));
  }
  50% {
    transform: scaleY(calc((0.4 + 0.66 * var(--bar-level)) * var(--bar-gain)));
  }
}

@keyframes eq-y-connect {
  0%,
  26%,
  100% {
    transform: scaleY(0.12);
  }
  12% {
    transform: scaleY(calc(0.3 + 0.34 * var(--bar-level)));
  }
}

@keyframes eq-breathe {
  0%,
  100% {
    transform: scale(calc(1 + 0.02 * var(--orb-level)));
  }
  50% {
    transform: scale(calc(1 + 0.02 * var(--orb-level) + 0.02 * var(--eq-breathe)));
  }
}

@keyframes eq-shake {
  0%,
  22%,
  100% {
    transform: translateX(0);
  }
  4% {
    transform: translateX(calc(-1.5px * var(--eq-shake)));
  }
  9% {
    transform: translateX(calc(1.5px * var(--eq-shake)));
  }
  14% {
    transform: translateX(calc(-1px * var(--eq-shake)));
  }
  18% {
    transform: translateX(calc(1px * var(--eq-shake)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sam-eq-orb[data-state] .sam-eq-disc,
  .sam-eq-orb[data-state] .sam-eq-bars {
    animation: none;
  }

  .sam-eq-ring {
    opacity: calc(var(--eq-ring) * 0.55);
    transform: scale(calc(0.94 + 0.06 * var(--eq-ring)));
  }
}

/* Suspend all motion when the view is hidden, or motion is disabled. */
.sam-eq-orb[data-paused="true"], .sam-eq-orb[data-paused="true"] * { animation-play-state: paused !important; }
.sam-eq-orb[data-reduced="true"], .sam-eq-orb[data-reduced="true"] * { animation: none !important; transition: none !important; }
.sam-eq-orb[data-reduced="true"] .sam-eq-layerActive .sam-eq-bar { clip-path: inset(calc(50% - (11% + 27% * var(--bar-gain))) 0 round 999px); }
.sam-eq-orb[data-reduced="true"] :is(.sam-eq-layerWave, .sam-eq-layerSweep) .sam-eq-bar { clip-path: inset(calc(50% - (9% + 16% * var(--bar-gain))) 0 round 999px); }