/* Voice Button Enhanced Styling */

/* Default voice button state */
.btn-voice {
  background: var(--bg-primary, #ffffff) !important;
  color: var(--text-secondary) !important;
  border: 2px solid var(--border-color, #d1d5db) !important;
  transition: all 0.2s ease !important;
  position: relative;
  overflow: hidden;
}

.btn-voice:hover {
  background: var(--bg-tertiary, #f3f4f6) !important;
  color: var(--primary-color, #2563eb) !important;
  border-color: var(--primary-color, #2563eb) !important;
  transform: translateY(-1px) !important;
}

/* Listening state - Red with pulsing animation and stop icon */
.btn-voice.listening {
  background: var(--danger-color, #ef4444) !important;
  color: white !important;
  border-color: var(--danger-color, #ef4444) !important;
  animation: pulse-listening 1.5s infinite !important;
  transform: none !important;
}

.btn-voice.listening:hover {
  background: #dc2626 !important; /* Darker red on hover */
  color: white !important;
  border-color: #dc2626 !important;
  transform: none !important;
}

/* Speaking state - Green with slow pulsing */
.btn-voice.speaking {
  background: var(--success-color, #10b981) !important;
  color: white !important;
  border-color: var(--success-color, #10b981) !important;
  animation: pulse-speaking 2s infinite !important;
  transform: none !important;
}

.btn-voice.speaking:hover {
  background: #059669 !important; /* Darker green on hover */
  color: white !important;
  border-color: #059669 !important;
  transform: none !important;
}

/* Error state - Orange/Yellow warning */
.btn-voice.error {
  background: var(--warning-color, #f59e0b) !important;
  color: white !important;
  border-color: var(--warning-color, #f59e0b) !important;
  animation: pulse-error 1s ease-in-out 3 !important;
}

.btn-voice.error:hover {
  background: #d97706 !important;
  color: white !important;
  border-color: #d97706 !important;
}

/* Icon transitions */
.btn-voice i {
  transition: all 0.3s ease;
  font-size: 1rem;
}

/* Listening state icon styling */
.btn-voice.listening i.fa-stop {
  animation: icon-pulse 1.5s infinite;
}

/* Speaking state icon styling */
.btn-voice.speaking i.fa-volume-up {
  animation: volume-bounce 2s infinite;
}

/* Pulse animations */
@keyframes pulse-listening {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@keyframes pulse-speaking {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes pulse-error {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes icon-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.9);
  }
}

@keyframes volume-bounce {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.95);
  }
}

/* Loading state for button */
.btn-voice.loading {
  position: relative;
}

.btn-voice.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .btn-voice {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
  }
  
  .btn-voice i {
    font-size: 1.1rem;
  }
}

/* Focus styles for accessibility */
.btn-voice:focus {
  outline: 2px solid var(--primary-color, #2563eb);
  outline-offset: 2px;
}

.btn-voice.listening:focus {
  outline-color: var(--danger-color, #ef4444);
}

.btn-voice.speaking:focus {
  outline-color: var(--success-color, #10b981);
}

/* Disabled state */
.btn-voice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: none !important;
}

.btn-voice:disabled:hover {
  transform: none !important;
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-voice.listening {
    border-width: 3px !important;
  }
  
  .btn-voice.speaking {
    border-width: 3px !important;
  }
  
  .btn-voice.error {
    border-width: 3px !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn-voice,
  .btn-voice *,
  .btn-voice::before,
  .btn-voice::after {
    animation: none !important;
    transition: none !important;
  }
  
  .btn-voice:hover {
    transform: none !important;
  }
}