/* The sphere itself is a generated image, never CSS/SVG art. */
.voice-orb {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: .25rem;
  min-width: 0;
  padding: .25rem 0 1.25rem;
  text-align: center;
}
.voice-orb__image {
  display: block;
  width: clamp(10rem, 24vw, 18rem);
  max-width: 88%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform-origin: center;
}
.voice-orb__image[hidden] { display: none; }
.voice-orb[data-reactive="true"] .voice-orb__image {
  transition: transform 60ms linear, opacity 60ms linear;
}
.voice-orb__caption { display: grid; gap: .25rem; min-width: 0; }
.voice-orb__name { font-size: 1.1rem; font-weight: 600; color: #f1f2fa; overflow-wrap: anywhere; }
.voice-orb__state { font-size: .88rem; color: #e1e5f4; }
.voice-orb__detail { font-size: .75rem; color: #abb4ca; }
.voice-orb[data-phase="error"] .voice-orb__state { color: #ffc3bb; }
/* Immediate stop: no transition tail or autonomous decorative animation. */
:root[data-motion="off"] .voice-orb__image,
:root[data-motion="lite"] .voice-orb__image {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .voice-orb__image { transform: none !important; opacity: 1 !important; transition: none !important; }
}