/**
 * Bot Voice CSS — Chat Widget TTS Integration
 *
 * Styles for:
 *   .urbot-voice-toggle-btn   — mic/speaker toggle in chat input bar
 *   .urbot-voice-indicator    — "Speaking..." label next to avatar
 *   .urbot-voice-speaking     — class added to avatar img while speaking
 *   .voice-unsupported        — hidden on unsupported browsers
 *
 * These classes are driven by httpdocs/js/lib/urbot-voice.js (URBotVoiceChat)
 * and complement the existing tts-controls.css.
 */

/* ---- Voice toggle button ---- */

.urbot-voice-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.urbot-voice-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
}

.urbot-voice-toggle-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* Active = auto-speak ON */
.urbot-voice-toggle-btn.active {
  background: rgba(99, 102, 241, 0.18);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.42);
}

.urbot-voice-toggle-btn.active:hover {
  background: rgba(99, 102, 241, 0.28);
  color: #a5b4fc;
}

/* Speaking pulse ring */
.urbot-voice-toggle-btn[data-speaking="true"] {
  animation: urbot-voice-btn-pulse 1.4s ease-in-out infinite;
  color: #818cf8;
}

@keyframes urbot-voice-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); }
  50%       { box-shadow: 0 0 0 7px rgba(99, 102, 241, 0); }
}

.urbot-voice-toggle-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* ---- "Speaking..." indicator next to avatar ---- */

.urbot-voice-indicator {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  color: #818cf8;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 20px;
  padding: 1px 7px;
  margin-top: 3px;
  letter-spacing: 0.3px;
  animation: urbot-voice-indicator-fade 1.8s ease-in-out infinite;
  white-space: nowrap;
}

@keyframes urbot-voice-indicator-fade {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ---- Avatar glow while speaking ---- */

.urbot-voice-speaking {
  animation: urbot-voice-avatar-glow 1.6s ease-in-out infinite;
  border-radius: 50%;
}

@keyframes urbot-voice-avatar-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(99, 102, 241, 0.5)); }
  50%       { filter: drop-shadow(0 0 9px rgba(99, 102, 241, 0.9)); }
}

/* ---- Unsupported browser: hide voice UI ---- */

.voice-unsupported {
  display: none !important;
}

/* ---- Compact chat bar alignment ---- */

.urbot-chat-input-bar .urbot-voice-toggle-btn {
  margin-left: 2px;
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .urbot-voice-toggle-btn[data-speaking="true"],
  .urbot-voice-indicator,
  .urbot-voice-speaking {
    animation: none;
  }

  .urbot-voice-toggle-btn[data-speaking="true"] {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
  }

  .urbot-voice-speaking {
    filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.6));
  }
}

/* ---- High contrast mode ---- */

@media (forced-colors: active) {
  .urbot-voice-toggle-btn {
    border: 2px solid ButtonText;
    color: ButtonText;
  }

  .urbot-voice-toggle-btn.active {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  .urbot-voice-indicator {
    border: 1px solid ButtonText;
    color: ButtonText;
    background: Canvas;
  }
}