/* Simpyl call widget. No external fonts or images. */
.sdc {
  --sdc-navy: #12355B;
  --sdc-amber: #F2B705;
  --sdc-pill: #0B1F35;
  --sdc-btn: #3A4757;
  --sdc-red: #D7263D;
  --sdc-muted-text: #C3CDD8;
  --sdc-focus: #F2B705;
  --sdc-icon-bg: #FFD21F;            /* brand v1 Poster Yellow, app icon tile only */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  max-width: 26rem;
}
.sdc *, .sdc *::before, .sdc *::after { box-sizing: border-box; }
.sdc button { font: inherit; cursor: pointer; }
.sdc button:focus-visible, .sdc a:focus-visible {
  outline: 3px solid var(--sdc-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--sdc-pill);
}
.sdc-icon {
  flex: none; width: 3rem; height: 3rem; border-radius: .9rem;
  background: var(--sdc-icon-bg); display: grid; place-items: center;
}
.sdc-icon svg { width: 1.7rem; height: 1.7rem; }

/* Start state */
.sdc-start {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  padding: .6rem 1.4rem .6rem .6rem; border: 0; border-radius: 999px;
  background: var(--sdc-pill); color: #fff; text-align: left;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.sdc-start:hover { background: #102a47; }
.sdc-start-label { display: flex; flex-direction: column; line-height: 1.25; }
.sdc-start-title { font-weight: 700; font-size: 1.1rem; }
.sdc-start-sub { font-size: .85rem; color: var(--sdc-muted-text); }
.sdc-phone { margin-left: auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #1F8A4C; display: grid; place-items: center; flex: none; }
.sdc-phone svg { width: 1.3rem; height: 1.3rem; }

/* Live pill (modeled on the reference call bar) */
.sdc-pill {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .6rem .6rem .6rem; border-radius: 999px;
  background: var(--sdc-pill); box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.sdc-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sdc-timer { font-variant-numeric: tabular-nums; font-size: 1.05rem; color: #fff; }
.sdc-name { font-size: .95rem; color: var(--sdc-muted-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdc-actions { margin-left: auto; display: flex; gap: .6rem; }
.sdc-round {
  width: 3rem; height: 3rem; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff;
}
.sdc-round svg { width: 1.35rem; height: 1.35rem; }
.sdc-mute { background: var(--sdc-btn); }
.sdc-mute:hover { background: #4A5869; }
.sdc-mute[aria-pressed="true"] { background: #fff; color: var(--sdc-pill); }
.sdc-hangup { background: var(--sdc-red); }
.sdc-hangup:hover { background: #B81F33; }
.sdc-mute .sdc-ic-off { display: none; }
.sdc-mute[aria-pressed="true"] .sdc-ic-on { display: none; }
.sdc-mute[aria-pressed="true"] .sdc-ic-off { display: block; }

.sdc[data-state="connecting"] .sdc-icon { animation: sdc-pulse 1.2s ease-in-out infinite; }
.sdc[data-warn="true"] .sdc-timer { color: var(--sdc-amber); font-weight: 700; }
@keyframes sdc-pulse { 50% { transform: scale(.9); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .sdc[data-state="connecting"] .sdc-icon { animation: none; } }

/* Status, captions, notices */
.sdc-status { margin: .6rem 0 0 1rem; font-size: .9rem; min-height: 1.3em; color: #fff; }
.sdc-caption { margin: .25rem 0 0 1rem; font-size: .9rem; color: var(--sdc-muted-text); min-height: 1.3em; }
.sdc-caption:empty { display: none; }
.sdc-notice { margin: .6rem 0 0 1rem; font-size: .8rem; color: var(--sdc-muted-text); line-height: 1.4; }

/* Ended / error */
.sdc-card {
  display: flex; align-items: center; gap: .9rem; padding: .6rem .6rem .6rem .6rem;
  border-radius: 1.6rem; background: var(--sdc-pill); box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.sdc-card-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sdc-card-title { font-weight: 700; }
.sdc-card-sub { font-size: .9rem; color: var(--sdc-muted-text); }
.sdc-again {
  margin-left: auto; flex: none; border: 0; border-radius: 999px; padding: .7rem 1.1rem;
  background: var(--sdc-amber); color: var(--sdc-navy); font-weight: 700;
}
.sdc-again:hover { background: #FFC933; }
.sdc[data-state="error"] .sdc-icon { background: #F4C9CF; }

.sdc [hidden] { display: none !important; }
.sdc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* In ended/error the card already shows the text; keep the status for screen readers only. */
.sdc[data-state="ended"] .sdc-status, .sdc[data-state="error"] .sdc-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===================== Call pill additions (standalone /call/ page) ===================== */
/* Compact = pill only. Status is screen-reader only; captions are off unless data-captions="true". */
.sdc[data-compact="true"] { display: inline-block; width: max-content; max-width: 28rem; }
.sdc[data-compact="true"] .sdc-start { width: auto; }
.sdc[data-compact="true"] .sdc-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sdc[data-compact="true"]:not([data-captions="true"]) .sdc-caption { display: none; }
.sdc[data-compact="true"] .sdc-caption { margin: .35rem .9rem 0; max-width: 22rem; font-size: .85rem; color: var(--sdc-caption-text, #fff); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.sdc[data-compact="true"] .sdc-card { border-radius: 999px; padding-right: .5rem; }
.sdc[data-compact="true"] .sdc-card-title,
.sdc[data-compact="true"] .sdc-card-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdc[data-compact="true"] .sdc-card-sub { max-width: 12.5rem; }
.sdc[data-compact="true"] .sdc-card:has(.sdc-ext:not([hidden])) .sdc-card-sub { display: none; }
.sdc[data-compact="true"] .sdc-card .sdc-ext:not([hidden]) + .sdc-again { display: none; }  /* retrying in the same frame can't help */
.sdc[data-compact="true"] .sdc-card-text { flex-shrink: 0; }  /* title + "Open in new tab" say enough */
.sdc-card .sdc-ext + .sdc-again { margin-left: .4rem; }
.sdc-ext { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.sdc-ext:hover { background: rgba(255,255,255,.12); }
.sdc-card .sdc-ext:not([hidden]) + .sdc-again { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }

/* Smooth size changes between states (the iframe follows via postMessage). */
.sdc-start, .sdc-pill, .sdc-card { animation: sdc-in .22s ease-out; }
@keyframes sdc-in { from { opacity: .4; transform: scale(.97); } }

/* Speaking: a soft ring around our icon while the receptionist talks. */
.sdc-pill .sdc-icon { position: relative; }
.sdc-pill .sdc-icon::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--sdc-icon-bg); opacity: 0; transition: opacity .2s;
}
.sdc[data-speaking="true"] .sdc-pill .sdc-icon::after { opacity: 1; animation: sdc-ring 1.1s ease-in-out infinite; }
@keyframes sdc-ring { 50% { box-shadow: 0 0 0 5px rgba(255,210,31,.35); } }
@media (prefers-reduced-motion: reduce) {
  .sdc-start, .sdc-pill, .sdc-card { animation: none; }
  .sdc[data-speaking="true"] .sdc-pill .sdc-icon::after { animation: none; }
}

/* ---------- Theme: native (dark chat-app call bar; our own round icon, no third-party marks) ---------- */
.sdc[data-theme="native"] {
  --sdc-pill: var(--sdc-native-bg, #161618);
  --sdc-btn: #3A3A3C;
  --sdc-red: #E5352B;
  --sdc-muted-text: #A8A8AD;          /* 7.6:1 on #161618 */
  --sdc-focus: var(--color-ring-primary, #3B82F6);
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.sdc[data-theme="native"] .sdc-icon { border-radius: 50%; width: 2.75rem; height: 2.75rem; }
.sdc[data-theme="native"] .sdc-icon svg { width: 1.55rem; height: 1.55rem; }
.sdc[data-theme="native"] .sdc-start,
.sdc[data-theme="native"] .sdc-pill,
.sdc[data-theme="native"] .sdc-card {
  padding: .55rem; gap: .8rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 4px 18px rgba(0,0,0,.28);
}
.sdc[data-theme="native"] .sdc-start { padding-right: .55rem; }
.sdc[data-theme="native"] .sdc-start:hover { background: #222225; }
.sdc[data-theme="native"] .sdc-start-title { font-weight: 600; font-size: 1rem; }
.sdc[data-theme="native"] .sdc-start-sub { font-size: .8rem; }
.sdc[data-theme="native"] .sdc-phone { margin-left: .9rem; width: 2.75rem; height: 2.75rem; background: #1F8A4C; }
.sdc[data-theme="native"] .sdc-timer { font-size: 1rem; }
.sdc[data-theme="native"] .sdc-name { font-size: .9rem; }
.sdc[data-theme="native"] .sdc-meta { min-width: 7.5rem; }
.sdc[data-theme="native"] .sdc-round { width: 2.75rem; height: 2.75rem; }
.sdc[data-theme="native"] .sdc-round svg { width: 1.25rem; height: 1.25rem; }
.sdc[data-theme="native"] .sdc-mute:hover { background: #48484A; }
.sdc[data-theme="native"] .sdc-mute[aria-pressed="true"] { background: #fff; color: #161618; }
.sdc[data-theme="native"] .sdc-hangup:hover { background: #C92C23; }
.sdc[data-theme="native"] .sdc-again { background: #fff; color: #161618; font-weight: 600; padding: .65rem 1rem; }
.sdc[data-theme="native"] .sdc-again:hover { background: #E6E6E8; }
.sdc[data-theme="native"] .sdc-card .sdc-ext:not([hidden]) + .sdc-again { background: transparent; color: #fff; }
.sdc[data-theme="native"] .sdc-card-title { font-weight: 600; }
.sdc[data-theme="native"][data-warn="true"] .sdc-timer { color: #FFB340; }  /* 9:1 on the pill */
.sdc[data-theme="native"] button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--sdc-focus); }
.sdc[data-theme="native"] .sdc-start:focus-visible { outline-offset: 3px; }
/* Pill: "Open in new tab" is the only action when the mic can't be used here, so make it primary. */
.sdc[data-compact="true"]:not([data-theme="native"]) .sdc-ext { background: var(--sdc-amber); color: var(--sdc-navy); box-shadow: none; }
.sdc[data-compact="true"]:not([data-theme="native"]) .sdc-ext:hover { background: #FFC933; }