/* Orb — voice UI component. Palette is themeable via custom properties. */
.orb {
  --orb-a: #313fda;
  --orb-b: #b20dc5;
  --orb-c: #aa2336;
  --orb-d: #6abcd3;
  --orb-e: #6310a1;
  --orb-base: #0a0718;
  position: relative;
  width: var(--orb-size, 320px);
  height: var(--orb-size, 320px);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.orb-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb-b) 0%, var(--orb-a) 35%, transparent 68%);
  filter: blur(calc(var(--orb-size, 320px) * 0.12));
  z-index: -1;
  pointer-events: none;
}
.orb-body {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 60%, #1a1240 0%, var(--orb-base) 75%);
  box-shadow:
    inset 0 0 calc(var(--orb-size, 320px) * 0.08) rgba(255, 255, 255, 0.18),
    inset 0 calc(var(--orb-size, 320px) * -0.04) calc(var(--orb-size, 320px) * 0.1) rgba(0, 0, 0, 0.45);
  transform: translateZ(0);
}
.orb-blobs { position: absolute; inset: 0; filter: blur(calc(var(--orb-size, 320px) * 0.06)); }
.orb-blobs i {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.orb-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 46% 30% at 36% 22%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(106, 188, 211, 0.35), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.orb-ring {
  position: absolute;
  inset: -9%;
  width: 118%;
  height: 118%;
  overflow: visible;
  pointer-events: none;
}
.orb-wave {
  fill: none;
  stroke: rgba(205, 225, 255, 0.85);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 4px rgba(150, 160, 255, 0.9));
}
.orb-arc {
  fill: none;
  stroke: #e9e4ff;
  stroke-width: 2.2;
  stroke-linecap: round;
  transform-origin: 0 0;
  filter: drop-shadow(0 0 5px rgba(178, 13, 197, 0.9));
}
.orb-arc2 { stroke: #8fd3e6; stroke-width: 1.6; }
.orb-check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  opacity: 0;
  pointer-events: none;
}
.orb-check svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  .orb-blobs { filter: blur(calc(var(--orb-size, 320px) * 0.08)); }
}