/**
 * Voice Recorder Inline Styling
 * Includes recording button, timer, and inline layout (no modal)
 */

/* Voice recording container */
#voice-recording-container {
  padding: 0;
  background: none;
  border-radius: 0;
  min-height: auto;
  overflow: hidden; /* Prevent pulse animation from causing scrollbars */
}

/* Status text */
#voice-status-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* SVG timer circle - positioned behind button content */
.voice-timer-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 69px;
  height: 69px;
  transform: translate(-50%, -50%) rotate(-90deg); /* Center and rotate */
  pointer-events: none;
}

.timer-bg {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 6;
  opacity: 0.3;
}

.timer-progress {
  fill: none;
  stroke: var(--brand-1);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke 0.3s ease, stroke-dashoffset 0.1s linear;
  opacity: 0; /* Hidden by default */
}

/* Show progress ring when recording */
.btn-voice-record.recording .timer-progress {
  opacity: 1;
}

/* Button content container */
.voice-btn-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Microphone icon - shown by default */
.voice-mic-icon {
  display: block;
  font-size: 1.73rem;
  transition: opacity 0.2s ease;
}

/* Timer text - hidden by default */
.voice-timer-text {
  display: none;
  font-size: 1.01rem;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

/* When recording: hide icon, show timer */
.btn-voice-record.recording .voice-mic-icon {
  display: none;
}

.btn-voice-record.recording .voice-timer-text {
  display: block;
}

/* When paused: show icon (timer stays hidden), show progress ring */
.btn-voice-record.paused .voice-mic-icon {
  display: block;
}

.btn-voice-record.paused .voice-timer-text {
  display: none;
}

/* Show progress ring when recording or paused */
.btn-voice-record.paused .timer-progress {
  opacity: 1;
}

/* Record button */
.btn-voice-record {
  position: relative;
  width: 69px;
  height: 69px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  border: none;
  color: var(--white);
  font-size: 1.73rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(var(--brand-rgb), 0.3);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  flex-shrink: 0;
}

.btn-voice-record:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(var(--brand-rgb), 0.4);
}

.btn-voice-record:active:not(:disabled) {
  transform: scale(0.95);
}

.btn-voice-record.recording {
  background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
  box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4);
  animation: pulse-recording 1.5s ease-in-out infinite;
}

.btn-voice-record.paused {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-aux) 100%);
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.4);
}

.btn-voice-record:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Recording pulse animation */
.record-pulse {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 3px solid transparent;
  opacity: 0;
  pointer-events: none;
}

.btn-voice-record.recording .record-pulse {
  border-color: rgba(220, 53, 69, 0.6);
  animation: pulse-ring 1.5s ease-out infinite;
}

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

@keyframes pulse-ring {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* Action buttons */
#voice-reset-btn,
#voice-send-btn {
  border-radius: 50%;
  width: 58px;
  height: 58px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 1.44rem;
}

#voice-reset-btn {
  background-color: var(--color-text-secondary);
  border: none;
  color: var(--white);
}

#voice-reset-btn:hover:not(:disabled) {
  background-color: var(--color-text);
  transform: scale(1.05);
}

#voice-send-btn {
  background: var(--grad-brand);
  border: none;
  color: var(--white);
}

#voice-send-btn:hover:not(:disabled) {
  background: var(--grad-brand-rev);
  transform: scale(1.05);
}

#voice-reset-btn:disabled,
#voice-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}


/* Responsive adjustments */
@media (max-width: 576px) {
  #voice-status-text {
    font-size: 0.75rem;
    min-width: 100px;
  }

  .voice-timer-svg {
    width: 50px;
    height: 50px;
  }

  #voice-timer-display {
    font-size: 0.75rem;
  }

  .btn-voice-record {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  #voice-reset-btn,
  #voice-send-btn {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }
}

/* Color theme adjustments for dark mode - handled by CSS variables */
/* Timer, status text, and borders automatically adapt via:
   --color-text, --color-text-secondary, --color-border */