/* "Talk to us" voice launcher: the page's own pill, the pre-call card and the
   after-call email field. Colours come from tokens; the notch comes from the
   theme layer's .btn rule. The Dograh embed runs headless; its own pill is
   hidden below as a safety net in case the embed mode is ever flipped back. */
#dograh-widget-cta { display: none !important; }

.voice { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.voice-pill { gap: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.voice-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-green); }
.voice-pill--live .voice-pill__dot { animation: voice-pulse 1.2s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

.voice-card { width: min(360px, calc(100vw - 48px)); background: #FFFFFF; border: 1px solid var(--sv-line); border-radius: var(--radius-lg); padding: 22px 22px 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12); position: relative; }
.voice-card__close, .voice-after__dismiss { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--sv-muted); cursor: pointer; }
.voice-card__eyebrow { margin-bottom: 8px; }
.voice-card__lead { font: 400 14px/20px var(--font-sans); color: var(--sv-text); margin: 0 0 16px; }
.voice-card__form { display: flex; flex-direction: column; gap: 12px; }
.voice-card__optional { font-weight: 400; color: var(--sv-muted); margin-left: 4px; }
.voice-card__start { width: 100%; margin-top: 4px; }
.voice-card__skip { border: 0; background: none; font: 500 12px/18px var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--sv-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.voice-card__skip:hover { color: var(--sv-text); }
.voice-card__note { font: 400 12px/18px var(--font-sans); color: var(--sv-muted); margin: 14px 0 0; }

.voice-after { width: min(360px, calc(100vw - 48px)); background: #FFFFFF; border: 1px solid var(--sv-line); border-radius: var(--radius-lg); padding: 14px 40px 14px 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12); position: relative; }
.voice-after__form { display: flex; flex-direction: column; gap: 8px; }
.voice-after__label { font: 500 13px/18px var(--font-sans); color: var(--sv-text); }
.voice-after--done { font: 400 13px/18px var(--font-sans); color: var(--sv-text); padding-right: 16px; }

@media (max-width: 640px) {
  .voice { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
  .voice-pill { align-self: flex-end; }
  .voice-card, .voice-after { width: auto; }
}

/* The demo error class sets display; the hidden attribute must still win inside the card. */
.voice [hidden] { display: none !important; }