/* Voice overlay - premium conversation UI */
.voice-overlay {
  position: relative;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.voice-overlay.visible { max-height: 200px; }
.voice-overlay-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #111827 0%, #1e293b 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.voice-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 16px 16px; gap: 10px;
}

/* Waveform bars */
.voice-waveform {
  display: flex; align-items: center; justify-content: center;
  gap: 3px; height: 32px;
}
.voice-waveform span {
  display: block; width: 3px; height: 8px;
  border-radius: 2px; background: rgba(255,255,255,0.2);
  transition: background 0.3s;
}
.voice-waveform.active span {
  animation: voiceBar 1.2s ease-in-out infinite;
}
.voice-overlay.listening .voice-waveform.active span { background: #22c55e; }
.voice-overlay.speaking .voice-waveform.active span { background: #60a5fa; }
.voice-waveform.active span:nth-child(1) { animation-delay: 0s; }
.voice-waveform.active span:nth-child(2) { animation-delay: 0.15s; }
.voice-waveform.active span:nth-child(3) { animation-delay: 0.3s; }
.voice-waveform.active span:nth-child(4) { animation-delay: 0.45s; }
.voice-waveform.active span:nth-child(5) { animation-delay: 0.6s; }

@keyframes voiceBar {
  0%, 100% { height: 8px; }
  50% { height: 28px; }
}

/* Status text */
.voice-status-text {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5); transition: color 0.3s;
}
.voice-overlay.listening .voice-status-text { color: #22c55e; }
.voice-overlay.speaking .voice-status-text { color: #60a5fa; }
.voice-overlay.connecting .voice-status-text { color: rgba(255,255,255,0.4); }
.voice-overlay.error .voice-status-text,
.voice-overlay.denied .voice-status-text { color: #f87171; }
.voice-overlay.ending .voice-status-text { color: rgba(255,255,255,0.3); }

/* Timer */
.voice-timer {
  font-size: 22px; font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.02em;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Stop button */
.voice-stop-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; margin-top: 2px;
  -webkit-tap-highlight-color: transparent;
}
.voice-stop-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}
.voice-stop-btn:active { transform: scale(0.92); }

/* Mic button */
.voice-mic-btn {
  width: 36px; height: 36px; border-radius: 10px; border: none;
  background: transparent; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.voice-mic-btn svg {
  width: 18px; height: 18px;
  fill: var(--n500, #6b7280); transition: fill 0.2s;
}
.voice-mic-btn:hover { background: var(--n100, #f3f4f6); }
.voice-mic-btn:hover svg { fill: var(--n800, #1f2937); }

/* Connecting */
.voice-mic-btn.connecting { animation: micPulse 1.2s ease-in-out infinite; }
.voice-mic-btn.connecting svg { fill: var(--n600, #4b5563); }

/* Active - green glow */
.voice-mic-btn.active {
  background: #22c55e; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  animation: micActiveGlow 2s ease-in-out infinite;
}
.voice-mic-btn.active svg { fill: #fff; }
.voice-mic-btn.active:hover { background: #16a34a; }

@keyframes micPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes micActiveGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}