/* Call It For Me — component styles.
   Colours, spacing, radii and shadows are tokens (tokens.css); font sizes come from the text-* classes the markup carries.
   Prefix: cf-. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }

/* ---------- helpers ---------- */
.cf-label { text-transform: uppercase; }
.cf-muted { color: var(--ink-muted); }
.cf-on-ground-muted { color: var(--ground-ink-muted); }
.cf-num { font-variant-numeric: tabular-nums; }
.cf-icon { flex-shrink: 0; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- page shell ---------- */
.cf-page { min-height: 100vh; background: var(--ground); color: var(--ink); }
.cf-page__col { max-width: 560px; margin: 0 auto; padding: 0 var(--space-4); }
.cf-stack { display: flex; flex-direction: column; gap: var(--space-8); }

.cf-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; }

/* ---------- logo ---------- */
.cf-logo { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.cf-logo__plate { display: block; flex-shrink: 0; border-radius: var(--radius-full); background: var(--logo-plate); }
.cf-logo__plate svg { display: block; width: 100%; height: 100%; }
.cf-logo__word { white-space: nowrap; }
.cf-logo:focus-visible { outline: none; border-radius: var(--radius-full); box-shadow: var(--focus-ring); }

/* ---------- button ---------- */
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--space-12); padding: 0 var(--space-6); border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms ease, transform 80ms ease;
}
.cf-btn:active:not(:disabled) { transform: translateY(1px); }
.cf-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cf-btn--primary { background: var(--action); color: var(--on-action); }
.cf-btn--primary:hover:not(:disabled) { background: var(--action-hover); }
.cf-btn--secondary { box-shadow: inset 0 0 0 2px var(--ink); }
.cf-btn--secondary:hover:not(:disabled) { background: var(--wash); }
.cf-btn--secondary:focus-visible { box-shadow: inset 0 0 0 2px var(--ink), var(--focus-ring); }
.cf-btn--tertiary { padding: 0 var(--space-3); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cf-btn--tertiary:hover:not(:disabled) { background: var(--wash); }
.cf-btn--danger { background: var(--danger); color: var(--on-danger); }
.cf-btn--sm { height: var(--space-8); padding: 0 var(--space-4); gap: var(--space-1); }
.cf-btn--sm.cf-btn--tertiary { padding: 0 var(--space-2); }
.cf-btn--block { display: flex; width: 100%; }
.cf-btn--icon { width: var(--space-12); padding: 0; }
.cf-btn--icon.cf-btn--sm { width: var(--space-8); }
.cf-btn:disabled { background: var(--surface-sunken); color: var(--ink-subtle); box-shadow: none; cursor: not-allowed; }
.cf-btn--tertiary:disabled { background: transparent; }

/* ---------- badge ---------- */
.cf-badge {
  display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start;
  height: var(--space-6); padding: 0 var(--space-3); border-radius: var(--radius-full);
  background: var(--surface-sunken); color: var(--ink-muted); white-space: nowrap;
}
.cf-badge--tint { background: var(--surface-tint); color: var(--ink); }
.cf-badge--success { background: var(--success-soft); color: var(--success); }
.cf-badge--danger { background: var(--danger-soft); color: var(--danger); }
.cf-badge--ink { background: var(--action); color: var(--on-action); }

/* ---------- card ---------- */
.cf-card { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-flat); }

/* ---------- composer ---------- */
.cf-composer { display: flex; flex-direction: column; gap: var(--space-2); }
.cf-composer__field {
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-2); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--field-line), var(--shadow-flat);
}
.cf-composer__field:focus-within { box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-flat); }
.cf-composer textarea {
  flex: 1; min-width: 0; min-height: var(--space-8); padding: var(--space-2) var(--space-3); border: 0; resize: none; outline: none;
  background: transparent; color: var(--ink);
}
.cf-composer textarea::placeholder { color: var(--ink-subtle); opacity: 1; }
.cf-composer--hero .cf-composer__field { flex-direction: column; align-items: stretch; }
.cf-composer--hero .cf-composer__field .cf-btn { align-self: flex-end; }
.cf-composer--hero textarea { min-height: var(--space-24); padding: var(--space-3) var(--space-3) 0; }
.cf-composer__hint { min-height: 20px; padding: 0 var(--space-4); color: var(--ground-ink-muted); }

.cf-dock { position: sticky; bottom: 0; padding: var(--space-3) 0 calc(var(--space-4) + env(safe-area-inset-bottom)); background: var(--ground); }

.cf-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cf-chip { height: var(--space-8); padding: 0 var(--space-3); gap: var(--space-1); box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- chat ---------- */
.cf-thread { display: flex; flex-direction: column; gap: var(--space-1); }
.cf-bubble {
  max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cf-bubble--turn { margin-top: var(--space-3); }
.cf-bubble--user { align-self: flex-end; background: var(--action); color: var(--on-action); border-bottom-right-radius: var(--radius-xs); }
.cf-bubble--assistant { align-self: flex-start; background: var(--surface); color: var(--ink); border-bottom-left-radius: var(--radius-xs); box-shadow: var(--shadow-flat-sm); }
.cf-bubble--note { align-self: center; max-width: 100%; padding: var(--space-2) 0; color: var(--ground-ink-muted); text-align: center; }
.cf-bubble--error { align-self: flex-start; display: flex; gap: var(--space-3); background: var(--danger-soft); color: var(--ink); border-bottom-left-radius: var(--radius-xs); }
.cf-bubble--error .cf-icon { color: var(--danger); margin-top: 2px; }
.cf-bubble__title { display: block; }

.cf-thinking { display: inline-flex; gap: 6px; align-items: center; height: 24px; }
.cf-thinking span { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ink-subtle); animation: cf-blink 1.2s infinite ease-in-out; }
.cf-thinking span:nth-child(2) { animation-delay: .15s; }
.cf-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes cf-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- steps (dial holes) ---------- */
.cf-steps { display: flex; flex-direction: column; gap: var(--space-6); counter-reset: cf-step; }
.cf-step { display: grid; grid-template-columns: var(--space-12) 1fr; gap: var(--space-4); align-items: start; }
.cf-hole {
  display: grid; place-items: center; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-flat-sm);
}
.cf-step__text { padding-top: var(--space-1); }
.cf-step__text p { color: var(--ground-ink-muted); }

/* ---------- quote ---------- */
.cf-quote { display: flex; flex-direction: column; gap: var(--space-6); }
.cf-quote__head { display: flex; flex-direction: column; gap: var(--space-2); }
.cf-quote__phone { color: var(--ink-muted); }
.cf-terms { display: flex; flex-direction: column; gap: var(--space-4); }
.cf-terms dt { color: var(--ink-muted); margin-bottom: var(--space-2); }
.cf-terms li { display: flex; gap: var(--space-2); align-items: flex-start; }
.cf-terms li + li { margin-top: var(--space-2); }
.cf-terms .cf-icon { color: var(--ink-muted); margin-top: 0; }
.cf-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-4); row-gap: var(--space-1); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--surface-sunken); }
.cf-price__note, .cf-price__held { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--ink-muted); }
.cf-price__held { flex-basis: 100%; }
.cf-pay__status { display: flex; align-items: center; gap: var(--space-3); min-height: var(--space-12); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.cf-pay__status .cf-icon { color: var(--ink-muted); }
.cf-pay__status--done .cf-icon { color: var(--success); }
.cf-pay { display: flex; flex-direction: column; gap: var(--space-3); }
.cf-wallet { display: flex; align-items: center; justify-content: center; height: var(--space-12); border-radius: var(--radius-full); background: var(--action); color: var(--on-action); }
.cf-or { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-muted); }
.cf-or::before, .cf-or::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: var(--line); }
.cf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cf-field { display: flex; align-items: center; height: var(--space-12); padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-inset); color: var(--ink-subtle); }
.cf-field--wide { grid-column: 1 / -1; }
.cf-quote__fine { color: var(--ink-muted); }

/* ---------- call status (the phone) ---------- */
.cf-call {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-6); border-radius: var(--radius-lg); background: var(--phone); color: var(--on-phone); box-shadow: var(--shadow-flat);
}
.cf-call--stale .cf-call__top .text-figure { opacity: .55; }
.cf-call__stale { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--on-phone-muted); }
.cf-call__dial { width: var(--space-16); height: var(--space-16); }
.cf-call__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cf-call__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-3); }
.cf-call__state { display: inline-flex; align-items: center; gap: var(--space-2); }
.cf-call__who { color: var(--on-phone-muted); }
.cf-call__foot { margin-top: var(--space-2); color: var(--on-phone-muted); max-width: 34em; }
.cf-live { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--phone-live); flex-shrink: 0; }
.cf-call--connected .cf-live { animation: cf-pulse 1.6s infinite ease-in-out; }
@keyframes cf-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--phone-live); } 50% { box-shadow: 0 0 0 5px transparent; } }

/* ---------- transcript ---------- */
.cf-transcript { display: flex; flex-direction: column; gap: var(--space-4); }
.cf-transcript__head { display: flex; justify-content: space-between; align-items: center; }
.cf-transcript__head .cf-label { color: var(--ink-muted); }
.cf-lines { display: flex; flex-direction: column; gap: var(--space-1); }
.cf-line { display: flex; flex-direction: column; gap: var(--space-1); max-width: 85%; }
.cf-line--turn { margin-top: var(--space-4); }
.cf-line__who { color: var(--ink-muted); }
.cf-line__text { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-line--agent { align-self: flex-start; }
.cf-line--agent .cf-line__text { background: var(--surface-tint); border-bottom-left-radius: var(--radius-xs); }
.cf-line--business { align-self: flex-end; align-items: flex-end; }
.cf-line--business .cf-line__text { background: var(--surface-sunken); border-bottom-right-radius: var(--radius-xs); }
.cf-line--you { align-self: flex-end; align-items: flex-end; }
.cf-line--you .cf-line__text { background: var(--action); color: var(--on-action); border-bottom-right-radius: var(--radius-xs); }
.cf-line__ack { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); }
.cf-line__ack--done { color: var(--success); }
.cf-line__ack--failed { color: var(--danger); }
.cf-line__ack .cf-btn--sm { height: var(--space-6); margin-left: var(--space-1); color: var(--ink); }
.cf-line--blocked .cf-line__text { background: var(--surface-sunken); color: var(--ink-muted); }
.cf-event { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-1) 0; color: var(--ink-muted); text-align: center; }
.cf-event--turn { margin-top: var(--space-4); }
.cf-event + .cf-line { margin-top: var(--space-4); }
.cf-transcript__empty { color: var(--ink-muted); }
.cf-line--partial .cf-line__text { color: var(--ink-muted); font-style: italic; }
.cf-line--partial .cf-line__text::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: cf-blink 1s infinite steps(1); }

/* ---------- ask ---------- */
.cf-ask { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); padding-top: calc(var(--space-6) + 4px); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-raised); overflow: hidden; }
.cf-ask__timer { position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--surface-sunken); }
.cf-ask__bar { height: 100%; width: calc(var(--left, 1) * 100%); background: var(--ink); transition: width 1s linear; }
.cf-ask--urgent .cf-ask__bar { background: var(--danger); }
.cf-ask__waiting { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.cf-ask__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); }
.cf-ask__options--stack { display: flex; flex-direction: column; }
.cf-ask__options--stack .cf-btn { justify-content: flex-start; height: auto; min-height: var(--space-12); padding: var(--space-3) var(--space-6); white-space: normal; text-align: left; }
.cf-ask .cf-btn--picked:disabled { background: var(--action); color: var(--on-action); box-shadow: none; }
.cf-ask--sent .cf-ask__bar { background: var(--ink-subtle); transition: none; }
.cf-ask__free { display: flex; gap: var(--space-2); align-items: center; }
.cf-input { flex: 1; min-width: 0; height: var(--space-12); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 2px var(--field-line); color: var(--ink); outline: none; }
.cf-input::placeholder { color: var(--ink-subtle); opacity: 1; }
.cf-input:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.cf-ask__left { color: var(--ink-muted); }
.cf-ask--urgent .cf-ask__left { color: var(--danger); }
.cf-sheet { position: sticky; bottom: 0; padding: var(--space-3) 0 calc(var(--space-4) + env(safe-area-inset-bottom)); }

/* ---------- outcome ---------- */
.cf-outcome { display: flex; flex-direction: column; gap: var(--space-6); }
.cf-outcome__top { display: flex; flex-direction: column; gap: var(--space-3); }
.cf-outcome__mark { display: grid; place-items: center; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink); }
.cf-outcome--success .cf-outcome__mark { background: var(--success-soft); color: var(--success); }
.cf-outcome--decision .cf-outcome__mark { background: var(--surface-tint); color: var(--ink); }
.cf-outcome--error .cf-outcome__mark { background: var(--danger-soft); color: var(--danger); }
.cf-outcome__kind { color: var(--ink-muted); }
.cf-outcome--success .cf-outcome__kind { color: var(--success); }
.cf-outcome--error .cf-outcome__kind { color: var(--danger); }
.cf-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cf-fact { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--space-8); padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--surface-sunken); }
.cf-fact .cf-icon { color: var(--ink-muted); }
.cf-charge { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cf-confirm { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--danger-soft); }
.cf-outcome__fine { color: var(--ink-subtle); }

/* ---------- start page ---------- */
.cf-hero { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) 0 var(--space-12); }
.cf-hero__copy { display: flex; flex-direction: column; gap: var(--space-3); max-width: 30em; }
.cf-hero__copy p { color: var(--ground-ink-muted); }
.cf-footnote { padding: var(--space-8) 0 var(--space-12); color: var(--ground-ink-muted); max-width: 34em; }

@media (prefers-reduced-motion: reduce) {
  .cf-call__dial, .cf-call__dial svg, .cf-live, .cf-thinking span, .cf-line--partial .cf-line__text::after { animation: none !important; }
  .cf-btn, .cf-ask__bar { transition: none; }
}

/* ---------- masthead + the live phone ---------- */
/* The logo is the phone. It is fixed on every page: a bar on phones, parked in the top-left corner on wide screens. */
:root { --masthead-h: 112px; --masthead-dial: 64px; }
.cf-masthead { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top); background: var(--ground); }
.cf-masthead__in { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); max-width: 560px; height: var(--masthead-h); margin: 0 auto; padding: 0 var(--space-4) var(--space-4); }
.cf-page--masthead { padding-top: calc(var(--masthead-h) + env(safe-area-inset-top)); }
/* The column fills the screen under the masthead so the dock and the ask sheet sit at the bottom even on short pages. */
.cf-page--masthead > .cf-page__col { display: flex; flex-direction: column; min-height: calc(100vh - var(--masthead-h) - env(safe-area-inset-top)); min-height: calc(100dvh - var(--masthead-h) - env(safe-area-inset-top)); }
.cf-page--masthead .cf-dock, .cf-page--masthead .cf-sheet { margin-top: auto; }
.cf-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; border-radius: var(--radius-full); }
.cf-brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cf-brand .cf-phone { font-size: var(--masthead-dial) !important; }
.cf-brand__name { white-space: nowrap; }
.cf-brand__tld { font-weight: 400; }
@media (max-height: 640px) and (max-width: 1039px) { :root { --masthead-h: 92px; --masthead-dial: 48px; } }
@media (min-width: 1040px) {
  :root { --masthead-dial: 112px; }
  .cf-masthead { right: auto; background: transparent; }
  .cf-masthead__in { flex-direction: column; align-items: flex-start; height: auto; max-width: none; padding: var(--space-12) var(--space-8); }
  .cf-brand { flex-direction: column; align-items: flex-start; gap: var(--space-4); border-radius: var(--radius-md); }
  .cf-page--masthead { padding-top: var(--space-12); }
  .cf-page--masthead > .cf-page__col { min-height: calc(100vh - var(--space-12)); }
}

/* The phone: 1em = dial size. Handset rests across the top of the dial; lifted = up and tilted. */
.cf-phone { position: relative; display: block; flex-shrink: 0; width: 1em; height: 1em; }
.cf-phone__plate { display: block; width: 1em; height: 1em; border-radius: var(--radius-full); background: var(--logo-plate); }
.cf-phone__plate svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cf-dial__wheel { transform-box: fill-box; transform-origin: center; }
.cf-phone.is-dialing .cf-dial__wheel { animation: cf-turn 1.5s .35s 1 both; }
/* finger pulls C round to the stop (189deg), holds, then the governor lets it run back at an even speed */
@keyframes cf-turn {
  0% { transform: rotate(0); animation-timing-function: cubic-bezier(.45, .05, .35, 1); }
  42% { transform: rotate(189deg); }
  52% { transform: rotate(189deg); animation-timing-function: linear; }
  94% { transform: rotate(-3deg); animation-timing-function: ease-out; }
  100% { transform: rotate(0); }
}
.cf-handset { position: absolute; left: 50%; bottom: .8em; width: 1.24em; margin-left: -.62em; transform-origin: 50% 100%; pointer-events: none;
  opacity: 0; transform: none; transition: transform .45s cubic-bezier(.2, .9, .3, 1.25), opacity .2s ease; }
.cf-handset__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cf-handset__svg path { fill: #000; stroke: var(--logo-plate); stroke-width: 4; stroke-linejoin: round; paint-order: stroke; }
.cf-phone[data-pose="lifted"] .cf-handset { opacity: 1; transform: translate(.05em, -.13em) rotate(-11deg); }
.cf-phone[data-pose="rest"] .cf-handset { opacity: 1; transition: transform .26s cubic-bezier(.55, 0, .85, .35), opacity .2s; }
.cf-phone[data-pose="hangup"] .cf-handset { animation: cf-hangup 1.8s both; }
.cf-phone[data-pose="off"] .cf-handset { transition: opacity .4s ease; }
/* straight and down onto the cradle (with a small clack), a second on the cradle, then gone */
@keyframes cf-hangup {
  0% { opacity: 1; transform: translate(.05em, -.13em) rotate(-11deg); animation-timing-function: cubic-bezier(.55, 0, .85, .35); }
  15% { transform: none; animation-timing-function: ease-out; }
  20% { transform: translateY(-.025em); animation-timing-function: ease-in; }
  25% { transform: none; }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
.cf-phone__fx { position: absolute; left: 1em; top: -.42em; width: .36em; height: .36em; pointer-events: none; color: var(--ink); }
.cf-phone__fx-svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cf-phone__fx-svg circle { fill: currentColor; stroke: none; }
.cf-fx-ring, .cf-fx-hold { opacity: 0; }
.cf-phone[data-fx="ring"] .cf-fx-ring { opacity: 1; }
.cf-phone[data-fx="ring"] .cf-fx-ring path { animation: cf-ringwave 1.4s infinite ease-out; }
.cf-phone[data-fx="ring"] .cf-fx-ring path + path { animation-delay: .2s; }
.cf-phone[data-fx="hold"] .cf-fx-hold { opacity: 1; transform-box: fill-box; animation: cf-holdnote 2.4s infinite ease-in-out; }
@keyframes cf-ringwave { 0%, 100% { opacity: .15; } 30% { opacity: 1; } }
@keyframes cf-holdnote { 0% { transform: translate(0, 2px) rotate(-6deg); opacity: .3; } 50% { transform: translate(2px, -3px) rotate(6deg); opacity: 1; } 100% { transform: translate(0, 2px) rotate(-6deg); opacity: .3; } }
.cf-phone--still .cf-handset { transition: none !important; animation: none !important; }
.cf-phone--still[data-pose="hangup"] .cf-handset { opacity: 0; }

/* ---------- place card, alert, end card, skeleton ---------- */
.cf-place { align-self: flex-start; display: flex; flex-direction: column; gap: var(--space-1); width: min(320px, 85%); padding: var(--space-4); border-radius: var(--radius-md); border-bottom-left-radius: var(--radius-xs); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-flat-sm); }
.cf-place__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.cf-place__label { color: var(--ink-muted); }
.cf-place__phone { display: inline-flex; align-items: center; gap: var(--space-2); }
.cf-place__phone .cf-icon { color: var(--ink-muted); }
.cf-bubble--fix { align-self: flex-start; display: flex; gap: var(--space-3); background: var(--surface); color: var(--ink); border-bottom-left-radius: var(--radius-xs); box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-flat-sm); }
.cf-bubble--fix .cf-icon { margin-top: 2px; }

.cf-alert { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--ink); }
.cf-alert > .cf-icon { color: var(--danger); align-self: flex-start; margin-top: 0; }
.cf-alert__text { flex: 1; min-width: 0; }
.cf-alert .cf-btn { flex-shrink: 0; }
.cf-alert--neutral { background: var(--surface); box-shadow: var(--shadow-flat-sm); }
.cf-alert--neutral > .cf-icon { color: var(--ink-muted); }
.cf-alert--float { position: sticky; top: calc(var(--masthead-h) + env(safe-area-inset-top) + var(--space-2)); z-index: 5; align-self: center; margin: var(--space-2) 0 var(--space-4); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); box-shadow: var(--shadow-raised); }
@media (min-width: 1040px) { .cf-alert--float { top: var(--space-4); } }

.cf-end { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.cf-end .cf-actions { margin-top: var(--space-3); }
.cf-end--danger .cf-outcome__mark { background: var(--danger-soft); color: var(--danger); }

.cf-skel { display: flex; flex-direction: column; gap: var(--space-3); }
.cf-skel__bar { height: 16px; border-radius: var(--radius-full); background: var(--surface-sunken); }
.cf-skel__bar--title { height: 24px; width: 55%; }
.cf-skel--phone { background: var(--phone); }
.cf-skel--phone .cf-skel__bar { background: var(--on-phone-muted); opacity: .25; }

@media (prefers-reduced-motion: reduce) {
  .cf-phone .cf-dial__wheel, .cf-phone .cf-handset, .cf-phone__fx * { animation: none !important; }
  .cf-phone .cf-handset { transition: opacity .2s !important; }
  .cf-phone[data-pose="lifted"] .cf-handset { transform: translate(.05em, -.13em) rotate(-11deg); }
  .cf-phone[data-pose="hangup"] .cf-handset { opacity: 1; }
}