/* =========================================================================
   Shared call-flow buttons — one primary CTA + one secondary, reused across
   the setup screen (Start Call / Upload) and the post-call actions row
   (New Call / Proceed to Training / Download Recording).

   • .action-btn            → secondary (teal outline, soft fill)
   • .action-btn.is-primary → primary CTA (teal fill, white text) — same
                              treatment everywhere; JS picks which button gets
                              it (see quick-coach.js).
   • .action-btn--icon      → icon-only variant (e.g. Upload), square-ish but
                              the same height as its labelled siblings.

   The round in-call phone controls (Start during a live call / Hangup) keep
   their own .call-btn shape and are intentionally NOT part of this pair.
   ========================================================================= */

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.65rem 2.2rem;
  border: 1.5px solid var(--teal-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  background: var(--teal-soft);
  color: var(--teal);
  transition: background var(--dur-micro) var(--ease),
              color     var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.action-btn svg { width: 16px; height: 16px; fill: currentColor; }
.action-btn:hover:not(:disabled) {
  background: var(--teal);
  color: var(--bg);
  transform: translateY(-1px);
}
.action-btn:active:not(:disabled) { transform: translateY(0); opacity: 0.9; }
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.action-btn:disabled:hover { transform: none; }

/* Busy state (Upload while a recording is being read). */
.action-btn.is-busy { opacity: 0.5; cursor: progress; }

/* Icon-only variant — trim the wide label padding back to roughly square so a
   lone icon doesn't float in a stretched pill. Vertical padding is unchanged,
   so its height still matches the labelled buttons beside it. */
.action-btn--icon { padding: 0.65rem 0.85rem; }

/* Primary CTA — teal fill, white text, soft glow. Same look as the setup
   screen's Start Call button used to have, now shared with the post-call row. */
.action-btn.is-primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  box-shadow: 0 12px 30px var(--teal-glow);
}
.action-btn.is-primary:hover:not(:disabled) {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
}