#appointment-recording-panel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.5rem 0.85rem;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

#appointment-recording-panel[data-recording-state="recording"] {
  border-color: #fecaca;
  background: #fff7f7;
}

#appointment-recording-panel[data-recording-state="paused"] {
  border-color: #fde68a;
  background: #fffbeb;
}

#appointment-recording-panel[data-recording-state="starting"],
#appointment-recording-panel[data-recording-state="uploading"] {
  border-color: #bfdbfe;
  background: #eff6ff;
}

#appointment-recording-panel[data-recording-state="saved"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

#appointment-recording-panel[data-recording-state="error"] {
  border-color: #fecaca;
  background: #fff7f7;
}

.appointment-mode-session-indicator {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.45);
  flex: 0 0 auto;
}

#appointment-recording-panel[data-recording-state="recording"] .appointment-mode-session-indicator {
  background: #dc2626;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
  animation: appointmentRecordingPulseRed 1.35s infinite;
}

#appointment-recording-panel[data-recording-state="paused"] .appointment-mode-session-indicator {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  animation: appointmentRecordingPulseYellow 1.55s infinite;
}

#appointment-recording-panel[data-recording-state="starting"] .appointment-mode-session-indicator,
#appointment-recording-panel[data-recording-state="uploading"] .appointment-mode-session-indicator {
  background: #2563eb;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  animation: appointmentRecordingPulseBlue 1.55s infinite;
}

#appointment-recording-panel[data-recording-state="saved"] .appointment-mode-session-indicator {
  background: #16a34a;
}

#appointment-recording-panel[data-recording-state="error"] .appointment-mode-session-indicator {
  background: #dc2626;
}

.appointment-mode-session-label,
.appointment-mode-session-elapsed,
.appointment-mode-session-separator {
  white-space: nowrap;
  flex: 0 0 auto;
}

.appointment-mode-session-label {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f172a;
}

.appointment-mode-session-elapsed {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.02em;
}

.appointment-mode-session-separator {
  font-size: 0.9rem;
  font-weight: 700;
  color: #94a3b8;
}

.appointment-mode-session-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

#appointment-recording-pause-btn.hidden,
#appointment-recording-resume-btn.hidden,
#appointment-recording-retry-btn.hidden {
  display: none !important;
}

#appointment-recording-pause-btn,
#appointment-recording-resume-btn,
#appointment-recording-retry-btn {
  border: none;
  background: transparent;
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

#appointment-recording-pause-btn:hover,
#appointment-recording-resume-btn:hover,
#appointment-recording-retry-btn:hover {
  color: #1d4ed8;
}

#appointment-recording-panel[data-recording-state="paused"] #appointment-recording-resume-btn {
  color: #b45309;
}

#appointment-recording-panel[data-recording-state="paused"] #appointment-recording-resume-btn:hover {
  color: #92400e;
}

#appointment-recording-panel[data-recording-state="recording"] #appointment-recording-pause-btn {
  color: #b91c1c;
}

#appointment-recording-panel[data-recording-state="recording"] #appointment-recording-pause-btn:hover {
  color: #991b1b;
}

#appointment-recording-panel[data-recording-state="error"] #appointment-recording-retry-btn {
  color: #b91c1c;
}

#appointment-recording-panel[data-recording-state="saved"] #appointment-recording-pause-btn,
#appointment-recording-panel[data-recording-state="saved"] #appointment-recording-resume-btn,
#appointment-recording-panel[data-recording-state="saved"] #appointment-recording-retry-btn {
  color: #166534;
}

@keyframes appointmentRecordingPulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.48);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

@keyframes appointmentRecordingPulseYellow {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

@keyframes appointmentRecordingPulseBlue {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.38);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}