/* PD-647 Admin Voice call states: recording player, presence chip, call panel phases,
   live banners and the Calls detail card. Loaded right after admin-shell-voice.css
   (split out to respect the Admin Portal CSS file-size guard). */

/* PD-647: call recordings play inline through the authenticated proxy. */
.admin-voice-recording {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.admin-voice-recording-audio {
  width: 100%;
  max-width: 420px;
}

.admin-voice-recording-status,
.admin-voice-recording-empty {
  margin: 0;
  font-size: 12px;
}

.admin-voice-recording-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #475569;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 9px 10px;
}

.admin-voice-spinner {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  border-top-color: #2563eb;
  animation: admin-voice-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .admin-voice-spinner {
    animation: none;
  }
}

/* PD-647: one presence chip — label + icon + colour, never colour alone.
   Text colours meet 4.5:1 (amber text #92400e, violet text #5b21b6); the
   brighter #d97706 / #7c3aed are used only for borders and dots. */
.admin-voice-btn .icon {
  font-size: 12px;
  line-height: 1;
  color: #334155;
}

.admin-voice-btn .icon.hidden {
  display: none;
}

.admin-voice-wrap[data-voice-presence="available"] .admin-voice-btn {
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.14);
}

.admin-voice-wrap[data-voice-presence="away"] .admin-voice-btn {
  border-color: #d97706;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.14);
}

.admin-voice-wrap[data-voice-presence="away"] .admin-voice-btn .dot {
  background: #d97706;
}

.admin-voice-wrap[data-voice-presence="away"] .admin-voice-btn .icon {
  color: #92400e;
}

.admin-voice-wrap[data-voice-presence="ringing"] .admin-voice-btn,
.admin-voice-wrap[data-voice-presence="error"] .admin-voice-btn,
.admin-voice-wrap[data-voice-presence="failed"] .admin-voice-btn,
.admin-voice-wrap[data-voice-presence="reconnecting"] .admin-voice-btn {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.16);
}

.admin-voice-wrap[data-voice-presence="ringing"] .admin-voice-btn .dot,
.admin-voice-wrap[data-voice-presence="error"] .admin-voice-btn .dot,
.admin-voice-wrap[data-voice-presence="failed"] .admin-voice-btn .dot,
.admin-voice-wrap[data-voice-presence="reconnecting"] .admin-voice-btn .dot {
  background: #dc2626;
}

.admin-voice-wrap[data-voice-presence="error"] .admin-voice-btn .icon,
.admin-voice-wrap[data-voice-presence="failed"] .admin-voice-btn .icon,
.admin-voice-wrap[data-voice-presence="ringing"] .admin-voice-btn .icon,
.admin-voice-wrap[data-voice-presence="reconnecting"] .admin-voice-btn .icon {
  color: #b91c1c;
}

.admin-voice-wrap[data-voice-presence="live"] .admin-voice-btn,
.admin-voice-wrap[data-voice-presence="dialing"] .admin-voice-btn {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}

.admin-voice-wrap[data-voice-presence="live"] .admin-voice-btn .dot,
.admin-voice-wrap[data-voice-presence="dialing"] .admin-voice-btn .dot {
  background: #2563eb;
}

.admin-voice-wrap[data-voice-presence="live"] .admin-voice-btn .label {
  font-variant-numeric: tabular-nums;
}

.admin-voice-wrap[data-voice-presence="ai"] .admin-voice-btn {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.16);
}

.admin-voice-wrap[data-voice-presence="ai"] .admin-voice-btn .dot {
  background: #7c3aed;
}

.admin-voice-wrap[data-voice-presence="ai"] .admin-voice-btn .icon {
  color: #5b21b6;
}

.admin-voice-wrap[data-voice-presence="ending"] .admin-voice-btn .dot,
.admin-voice-wrap[data-voice-presence="ended"] .admin-voice-btn .dot,
.admin-voice-wrap[data-voice-presence="offline"] .admin-voice-btn .dot {
  background: #94a3b8;
}

/* Missed/unread calls keep a red badge whatever the presence. */
.admin-voice-wrap.has-new .admin-voice-btn .count {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.admin-voice-wrap.is-pulsing .admin-voice-btn .dot {
  animation: admin-voice-pulse 1.1s ease-in-out infinite;
}

@keyframes admin-voice-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.35); }
}

.admin-voice-reception {
  display: grid;
  gap: 4px;
  padding: 8px;
  margin: 0 0 6px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.admin-voice-reception label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #475569;
}

.admin-voice-reception select {
  min-height: 34px;
}

.admin-voice-reception.is-away {
  border-color: #fcd34d;
  background: #fffbeb;
}

.admin-voice-reception.is-away label {
  color: #92400e;
}

.admin-voice-reception-status {
  margin: 0;
  font-size: 11.5px;
  color: #475569;
}

.admin-voice-reception-status:empty {
  display: none;
}

.admin-voice-error {
  display: grid;
  gap: 6px;
  margin: 0 0 6px;
  padding: 8px 10px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 12.5px;
}

.admin-voice-error.hidden {
  display: none;
}

.admin-voice-error-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-voice-call-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.admin-voice-call-timer {
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  font-variant-numeric: tabular-nums;
}

.admin-voice-call-timer.hidden {
  display: none;
}

.admin-voice-incoming[data-voice-phase="ringing"] {
  border-color: #fecaca;
  background: #fef2f2;
}

.admin-voice-incoming[data-voice-phase="ending"],
.admin-voice-incoming[data-voice-phase="ended"] {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.admin-voice-incoming[data-voice-phase="failed"],
.admin-voice-incoming[data-voice-phase="end_error"] {
  border-color: #fecaca;
  background: #fef2f2;
}

.admin-voice-incoming[data-voice-phase="failed"] .title,
.admin-voice-incoming[data-voice-phase="end_error"] .title {
  color: #991b1b;
}

.admin-voice-incoming[data-voice-phase="ending"] .title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  border-top-color: #2563eb;
  vertical-align: -1px;
  animation: admin-voice-spin 0.8s linear infinite;
}

/* White on #15803d is 5.02:1 (white on #16a34a was 3.30:1). */
.admin-voice-call-actions #admin-voice-answer {
  background: #15803d;
  border-color: #166534;
  color: #fff;
}

.admin-voice-call-actions #admin-voice-hangup:not(.hidden),
.admin-voice-call-actions #admin-voice-reject:not(.hidden) {
  border-color: #b91c1c;
  color: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
  .admin-voice-wrap.is-pulsing .admin-voice-btn .dot,
  .admin-voice-incoming[data-voice-phase="ending"] .title::before {
    animation: none;
  }
}

/* PD-647 AC-4.x/5.x: one visual language (animated bars) for anything automatic. */
.admin-voice-live-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 6px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.4;
}

.admin-voice-live-banner.hidden {
  display: none;
}

.admin-voice-live-banner[data-kind="notice"] {
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.admin-voice-live-banner[data-kind="ai"] {
  border: 1px solid #ddd6fe;
  background: #f3eeff;
  color: #5b21b6;
}

.admin-voice-live-banner-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-voice-live-banner-text {
  margin: 0;
  font-weight: 700;
}

.admin-voice-live-banner-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;
}

.admin-voice-live-banner-list:empty {
  display: none;
}

.admin-voice-live-elapsed {
  font-variant-numeric: tabular-nums;
}

.admin-voice-bars {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin-top: 2px;
}

.admin-voice-bars span {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
  animation: admin-voice-bar 0.9s ease-in-out infinite;
}

.admin-voice-bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
.admin-voice-bars span:nth-child(2) { height: 100%; animation-delay: 0.15s; }
.admin-voice-bars span:nth-child(3) { height: 65%; animation-delay: 0.3s; }
.admin-voice-bars span:nth-child(4) { height: 85%; animation-delay: 0.45s; }

@keyframes admin-voice-bar {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-voice-bars span {
    animation: none;
  }
}

/* PD-647 AC-9.x: call event card. */
.communications-call-card-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.communications-call-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  background: #f1f5f9;
  color: #334155;
}

.communications-call-badge.is-completed { background: #dcfce7; color: #166534; }
.communications-call-badge.is-missed { background: #fef3c7; color: #92400e; }
.communications-call-badge.is-failed { background: #fee2e2; color: #991b1b; }
.communications-call-badge.is-ai { background: #f3eeff; color: #5b21b6; }
.communications-call-badge.is-voicemail { background: #eff6ff; color: #1d4ed8; }
.communications-call-badge.is-transcript-final { background: #dcfce7; color: #166534; }
.communications-call-badge.is-transcript-live { background: #eff6ff; color: #1d4ed8; }
.communications-call-badge.is-transcript-unavailable { background: #fee2e2; color: #991b1b; }

.communications-call-status.is-ai {
  background: #f3eeff;
  color: #5b21b6;
}

.communications-call-status.is-voicemail {
  background: #eff6ff;
  color: #1d4ed8;
}

.communications-call-ai-summary {
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  background: #f3eeff;
  padding: 10px 12px;
  color: #3b0764;
  font-size: 13px;
  line-height: 1.5;
}

.communications-call-ai-summary-who {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5b21b6;
}

.communications-call-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.communications-call-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
}

.communications-call-chip.is-checkout {
  border: 1px solid #86efac;
  background: #f0fdf4;
  color: #166534;
}

.communications-call-chip.is-message {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.communications-call-transcript-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  font-size: 12px;
}

.communications-call-detail-utterances li.is-assistant {
  background: #f3eeff;
  border-radius: 8px;
}