/* Her voice box. His word, minute 73076, 9/17: "The middle is the voice
   box, that's the ElevenLabs widget, that's her whole aura, that's in the
   middle. And you click her, you don't click a button, you click her and
   speak to her, but it's written that, click her to speak to her."

   Four palettes, ported (not imported) from cib/world.js and its
   tokens.json, his own four state colours: idle violet/rose, thinking
   amber/red, speaking green/teal, listening cyan/blue. Motion speed follows
   his own relative order: thinking fastest, then speaking, then idle, then
   listening slowest.

   No em dashes anywhere, including these comments. */

.voicebox {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.voicemark {
  position: relative;
  width: min(30vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.voicemark:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}

.voicemark-bloom,
.voicemark-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.voicemark-bloom {
  background: radial-gradient(circle,
    rgba(139, 92, 246, 0.35),
    rgba(236, 72, 153, 0.16) 45%,
    transparent 72%);
  animation: voicebreathe 3.2s ease-in-out infinite alternate;
}
.voicemark-rim {
  inset: 14%;
  border: 1px solid rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 46px rgba(139, 92, 246, 0.28), inset 0 0 30px rgba(236, 72, 153, 0.14);
  animation: voicebreathe 4s ease-in-out infinite alternate-reverse;
}
@keyframes voicebreathe { from { opacity: .6; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .voicemark-bloom, .voicemark-rim { animation: none; }
}

/* thinking: amber and red, his fastest motion */
.voicemark[data-voice-state="thinking"] .voicemark-bloom {
  background: radial-gradient(circle,
    rgba(245, 158, 11, 0.4),
    rgba(239, 68, 68, 0.2) 45%,
    transparent 72%);
  animation-duration: 1.6s;
}
.voicemark[data-voice-state="thinking"] .voicemark-rim {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 52px rgba(245, 158, 11, 0.32), inset 0 0 30px rgba(239, 68, 68, 0.18);
  animation-duration: 2s;
}

/* speaking: green and teal */
.voicemark[data-voice-state="speaking"] .voicemark-bloom {
  background: radial-gradient(circle,
    rgba(34, 197, 94, 0.4),
    rgba(45, 212, 191, 0.2) 45%,
    transparent 72%);
  animation-duration: 2.2s;
}
.voicemark[data-voice-state="speaking"] .voicemark-rim {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 52px rgba(34, 197, 94, 0.32), inset 0 0 30px rgba(45, 212, 191, 0.18);
  animation-duration: 2.6s;
}

/* listening: cyan and blue, his calmest motion */
.voicemark[data-voice-state="listening"] .voicemark-bloom {
  background: radial-gradient(circle,
    rgba(6, 182, 212, 0.4),
    rgba(59, 130, 246, 0.2) 45%,
    transparent 72%);
  animation-duration: 4.8s;
}
.voicemark[data-voice-state="listening"] .voicemark-rim {
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 52px rgba(6, 182, 212, 0.32), inset 0 0 30px rgba(59, 130, 246, 0.18);
  animation-duration: 5.6s;
}

.voicecaption {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  text-align: center;
  pointer-events: none;
}

.voicestatus {
  margin: 0;
  min-height: 1em;
  font-size: 11.5px;
  color: var(--ink-faint);
  text-align: center;
  pointer-events: none;
}
.voicestatus:empty { display: none; }

@media (max-width: 520px) {
  .voicebox { top: 10%; }
  .voicemark { width: min(38vw, 140px); }
}