/* ---- Suprafața apelului --------------------------------------------------------
   Tot ce se vede din clipa în care se apasă „Sună" până când apelul se închide,
   pe orice drum (dial-plan.js): butonul în lucru și rândul lui (`is-dialing`,
   dial.js), propoziția unui refuz lângă buton, DOCUL APELULUI jos-dreapta
   (call-dock.js — capul comun, corpul, subsolul liniei SIP) și cardul celor
   trei trepte al legării (bridge-card.js), desenat în corpul docului.

   Tăiat pe 2026-09-17 din două foi: pastila de apel din styles-booking.css și
   cardul legării din styles-overlays.css, când docul le-a unit într-o singură
   suprafață (proprietarul, cu o captură: „interfața nu m-a ajutat să înțeleg
   că se pregătește un apel către clientul ăla"). Legat în index.html după
   styles-overlays.css, de unde a plecat cardul; nimic de mai sus nu țintește
   clasele de aici. Mișcarea consumă tokenii --motion-* din capul
   styles-workspace.css; culorile și scara tipografică sunt numai tokeni
   (design-kit/lint-tokens.mjs). */

/* ---- butonul apăsat și rândul lui (dial.js) ------------------------------------ */
/* Din clipa apăsării până când `dial()` se întoarce: butonul e dezactivat, cu
   iconița bătând ca o linie care sună, iar rândul se aprinde ușor — pe orice
   listă, fiindcă starea se pune pe DOCUMENT, nu de fiecare suprafață. */
@keyframes dial-ring {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-14deg);
  }
  40% {
    transform: rotate(12deg);
  }
  60% {
    transform: rotate(-8deg);
  }
  80% {
    transform: rotate(6deg);
  }
}
[data-dial].is-dialing {
  opacity: 1;
  color: var(--se-color-status-success);
  border-color: var(--se-color-status-success);
  background: var(--se-color-status-success-bg);
  cursor: progress;
}
tr.is-dialing > td,
.item.is-dialing,
.row-item.is-dialing {
  background: var(--se-color-status-success-bg);
  transition: background var(--motion-dur-base) var(--motion-ease-out);
}
/* Propoziția refuzului, lângă buton, câteva secunde (REFUSAL_LINGER_MS): roșie,
   pe rândul ei sub buton, ca să nu lățească celula. */
.dial-refusal {
  display: block;
  margin-top: var(--se-space-4);
  max-width: 26ch;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-alert-red-600);
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: no-preference) {
  [data-dial].is-dialing .ph {
    animation: dial-ring 1.2s infinite;
    transform-origin: 50% 60%;
  }
  .dial-refusal {
    animation: action-fade-in var(--motion-dur-base) var(--motion-ease-out);
  }
}

/* ---- docul apelului (call-dock.js) ------------------------------------------- */
/* Jos-dreapta, ferit de docul de mesaje plutitor, sub toast și sub bannerul de
   reapelare pe z-index — un apel se vede, o reapelare care pleacă în 5 secunde
   se vede ÎNTÂI. Un card, nu o pastilă: capul spune cine, numărul, de unde;
   corpul ține cardul legării sau treapta liniei.

   CELE DOUĂ MUTĂRI SUNT ALE LUI `placeFloating` (call-dock.js), nu ale foii:
   `--call-dock-lift` îl urcă PESTE stivă, `--call-dock-shift` îl duce la STÂNGA
   ei, și numai una dintre ele e vreodată nenulă. Foaia păstrează marginea
   (`--se-space-20`, `--se-space-12` pe telefon) și o scade din `max-height`
   ÎMPREUNĂ cu ridicătura, fiindcă asta e regula pe care o încălca varianta
   veche: citea `--dock-space` direct ca `bottom` și nu-l scădea nicăieri, deci
   pe o fereastră scundă cu stiva trasă în sus cardul legării ieșea pe SUS din
   ecran, tăiat (captura proprietarului, 2026-09-21: 2000×664, stiva sus-dreapta,
   `--dock-space` 542px, docul la `bottom: 562px`, vârful la −198px). */
.call-dock {
  position: fixed;
  right: calc(var(--se-space-20) + var(--call-dock-shift, 0px));
  bottom: calc(var(--se-space-20) + var(--call-dock-lift, 0px));
  z-index: 300;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 2 * var(--se-space-20)));
  max-height: calc(100dvh - 2 * var(--se-space-20) - var(--call-dock-lift, 0px));
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-left: 3px solid var(--se-color-status-success);
  border-radius: var(--se-radius-xl);
  box-shadow: var(--shadow-float);
  transition:
    bottom var(--motion-dur-base) var(--motion-ease-out),
    right var(--motion-dur-base) var(--motion-ease-out);
}
.call-dock[hidden],
body.gated .call-dock {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .call-dock:not([hidden]) {
    animation: action-card-in var(--motion-dur-slow) var(--motion-ease-out);
  }
}
.call-dock-head {
  display: flex;
  align-items: center;
  gap: var(--se-space-12);
  padding: var(--se-space-12) var(--se-space-16) var(--se-space-8);
}
.call-dock-avatar {
  flex: none;
  font-size: var(--se-type-captionmed-size);
}
.call-dock-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.call-dock-name {
  font-size: var(--se-type-bodysb-size);
  line-height: var(--se-type-bodysb-line);
  font-weight: var(--se-type-bodysb-weight);
  color: var(--se-color-text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call-dock-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--se-space-8);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
}
.call-dock-number {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.call-dock-number:empty,
.call-dock-via:empty {
  display: none;
}
.call-dock-via::before {
  content: "·";
  margin-right: var(--se-space-8);
  color: var(--se-color-text-muted);
}
.call-dock-number:empty + .call-dock-via::before {
  content: none;
  margin: 0;
}
.call-dock-body {
  display: block;
  position: relative;
  padding: 0 var(--se-space-16) var(--se-space-12);
  overflow-y: auto;
}
.call-dock-body:empty {
  display: none;
}
.call-dock-body[data-demo="1"]::before {
  content: "SIMULARE";
  display: inline-block;
  margin-bottom: var(--se-space-12);
  padding: 2px var(--se-space-8);
  border-radius: var(--se-radius-pill);
  background: var(--se-color-badge-yellow-100);
  color: var(--se-color-badge-yellow-600);
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  font-weight: var(--se-type-micromed-weight);
  letter-spacing: 0.06em;
}
/* Treapta liniei SIP: un punct și o propoziție — „se formează…", „sună…", „în
   convorbire 00:45", „în așteptare", „închis". Punctul bate cât linia e în drum
   (aceeași bătaie ca `bridge-dot-pulse`, mai jos), stă verde în convorbire și
   se stinge pe „închis". */
.call-dock-sip {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  margin: 0;
  padding: var(--se-space-8) var(--se-space-12);
  border-radius: var(--se-radius-md);
  background: var(--se-color-fill-neutral);
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
}
.call-dock-pip {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--se-color-secondary-60);
}
.call-dock-sip.is-talking {
  background: var(--se-color-status-success-bg);
  color: var(--se-color-status-success);
}
.call-dock-sip.is-talking .call-dock-pip {
  background: var(--se-color-status-success);
}
.call-dock-sip.is-held {
  background: var(--se-color-status-warning-bg);
  color: var(--se-color-status-warning);
}
.call-dock-sip.is-held .call-dock-pip {
  background: var(--se-color-status-warning);
}
.call-dock-sip.is-closed {
  color: var(--se-color-text-muted);
}
.call-dock-sip.is-closed .call-dock-pip {
  background: var(--se-color-text-muted);
}
.call-dock-timer {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.call-dock-foot {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  padding: 0 var(--se-space-12) var(--se-space-12) var(--se-space-16);
}
.call-dock-foot[hidden] {
  display: none;
}
.call-dock-btn {
  flex: none;
}
.call-dock-hangup {
  width: 36px;
  height: 36px;
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  border: 0;
  background: var(--se-color-alert-red-600);
  color: var(--se-color-text-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--motion-dur-fast) var(--motion-ease-out),
    filter var(--motion-dur-fast) ease;
}
.call-dock-hangup .ph {
  width: 18px;
  height: 18px;
}
.call-dock-hangup:hover {
  filter: brightness(1.08);
}
.call-dock-hangup:active {
  transform: scale(0.94);
}
/* Butoanele cardului legării stau în corp, pe un rând, ca în fereastra de unde
   a venit cardul (`.modal-actions`, styles-overlays.css). */
.call-dock-body .modal-actions {
  margin-top: var(--se-space-4);
}
/* Andocat în coloana a treia a Panoului principal (`#callDockSlot`,
   `placeCallDock` în call-dock.js): un card în curgerea coloanei, lat cât ea,
   fără umbră de plutire și fără loc rezervat la fundul paginii — plutitor acolo
   acoperea stiva de mesaje andocată sub el și strângea grila (măsurat
   2026-09-18). Specificitatea (0,2,0) bate și forma de telefon de mai jos. */
.call-dock.docked {
  position: static;
  width: auto;
  max-height: none;
  box-shadow: none;
  flex: 0 0 auto;
  transition: none;
}
/* Pe telefon docul e o foaie pe toată lățimea, nu un card în colț — deci nu are
   unde să se ducă LATERAL, și `--call-dock-shift` nu-l atinge (`placeFloating`
   măsoară lățimea rămasă și nu alege mutarea aia aici). Ridicătura rămâne, și
   se scade din `max-height` ca sus. */
@media (max-width: 480px) {
  .call-dock {
    right: var(--se-space-12);
    left: var(--se-space-12);
    width: auto;
    bottom: calc(var(--se-space-12) + var(--call-dock-lift, 0px));
    max-height: calc(100dvh - 2 * var(--se-space-12) - var(--call-dock-lift, 0px));
  }
  .call-dock-btn {
    display: none;
  }
}

/* ---- Legarea a două numere: cele trei trepte ------------------------------
   Cardul se desenează în corpul docului (`.call-dock-body`, bridge-progress.js).
   Fiecare lucru care se mișcă aici ține de o FAZĂ a lui `bridge-phase.js`:
   punctul pulsează cât treapta e activă, linia se umple când cea de deasupra
   s-a încheiat, bifa sare când o treaptă se închide. Nimic nu se învârte la
   nesfârșit fără înțeles — o stare pe care n-o vedem e faza `unwatched`, care
   se SCRIE, nu se pulsează peste. */
.bridge-steps {
  list-style: none;
  margin: 0 0 var(--se-space-16);
  padding: 0;
}
.bridge-step {
  position: relative;
  display: flex;
  gap: var(--se-space-12);
  padding-bottom: var(--se-space-20);
}
.bridge-step:last-child {
  padding-bottom: 0;
}
/* Conectorul e o PISTĂ și umplerea ei, desenate pe treapta de JOS: CSS nu poate
   privi înapoi, deci `bridge-card.js` pune `is-linked` pe treapta a cărei
   predecesoare s-a încheiat. */
.bridge-step:not(:first-child)::before,
.bridge-step:not(:first-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: calc(-1 * var(--se-space-20));
  width: 2px;
  height: var(--se-space-20);
}
.bridge-step:not(:first-child)::before {
  background: var(--se-color-border-default);
}
.bridge-step:not(:first-child)::after {
  background: var(--se-color-status-success);
  transform: scaleY(0);
  transform-origin: top;
}
.bridge-step.is-linked::after {
  transform: scaleY(1);
}
.bridge-dot {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--se-color-fill-neutral);
  color: var(--se-color-text-muted);
  border: 1px solid var(--se-color-border-default);
}
.bridge-dot .ph {
  width: 16px;
  height: 16px;
}
.bridge-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.bridge-step.is-active .bridge-dot {
  background: var(--se-color-secondary-10);
  color: var(--se-color-secondary-60);
  border-color: var(--se-color-secondary-30);
}
.bridge-step.is-done .bridge-dot {
  background: var(--se-color-status-success-bg);
  color: var(--se-color-status-success);
  border-color: var(--se-color-status-success-bg);
}
.bridge-step.is-failed .bridge-dot {
  background: var(--se-color-alert-red-100);
  color: var(--se-color-alert-red-600);
  border-color: var(--se-color-alert-red-100);
}
.bridge-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 3px;
}
.bridge-step-body b {
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
}
.bridge-step.is-pending .bridge-step-body b {
  color: var(--se-color-text-muted);
}
.bridge-step-body small {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.bridge-step.is-failed .bridge-step-body small {
  color: var(--se-color-alert-red-600);
}
.bridge-live {
  display: flex;
  align-items: baseline;
  gap: var(--se-space-8);
  padding: var(--se-space-12);
  border-radius: var(--se-radius-md);
  margin-bottom: var(--se-space-12);
  background: var(--se-color-status-success-bg);
  color: var(--se-color-status-success);
}
.bridge-live b {
  font-size: var(--se-type-bodysb-size);
  line-height: var(--se-type-bodysb-line);
  font-weight: var(--se-type-bodysb-weight);
}
.bridge-timer {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.bridge-note {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
  margin-bottom: var(--se-space-8);
  overflow-wrap: anywhere;
}
/* Vechimea nu se ascunde niciodată — regula pupitrului, peste tot. */
.bridge-age {
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-microreg-line);
  color: var(--se-color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--se-space-8);
}
/* Acordul GDPR al apelului (consent-plan.js): forma rândului `.call-dock-sip` — un
   punct și o propoziție —, mai mic, sub trepte sau sub linie. Patru tonuri, starea
   purtată și de cuvânt, nu doar de culoare: `wait` (se cere; punctul bate),
   `ok` (da / frază ascultată), `warn` (neconfirmat — fără înregistrare), `bad`
   (refuzat / a închis). */
.consent-line {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  margin: var(--se-space-8) 0;
  padding: var(--se-space-4) var(--se-space-12);
  border-radius: var(--se-radius-md);
  background: var(--se-color-fill-neutral);
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-captionmed-weight);
  color: var(--se-color-text-title);
  overflow-wrap: anywhere;
}
.consent-pip {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--se-color-secondary-60);
}
.consent-line.is-ok {
  background: var(--se-color-status-success-bg);
  color: var(--se-color-status-success);
}
.consent-line.is-ok .consent-pip {
  background: var(--se-color-status-success);
}
.consent-line.is-warn {
  background: var(--se-color-status-warning-bg);
  color: var(--se-color-status-warning);
}
.consent-line.is-warn .consent-pip {
  background: var(--se-color-status-warning);
}
.consent-line.is-bad {
  background: color-mix(in srgb, var(--se-color-status-error) 10%, transparent);
  color: var(--se-color-status-error);
}
.consent-line.is-bad .consent-pip {
  background: var(--se-color-status-error);
}
@keyframes bridge-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bridge-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bridge-check-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Aceeași bătaie ca `ring-pulse` (styles-overlays.css), ca cele două cercuri
   care sună pe consola asta să pulseze la fel; culoarea vine din token prin
   `color-mix`, niciodată dintr-un rgb scris de mână. */
@keyframes bridge-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--se-color-secondary-60) 30%, transparent);
  }
  70% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--se-color-secondary-60) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--se-color-secondary-60) 0%, transparent);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .call-dock-body.enter {
    animation: bridge-card-in var(--motion-dur-base) var(--motion-ease-out);
  }
  .call-dock-body.enter .bridge-step {
    animation: bridge-card-in var(--motion-dur-base) var(--motion-ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
  .bridge-step.is-active .bridge-dot,
  .call-dock-sip.is-dialing .call-dock-pip,
  .call-dock-sip.is-ringing .call-dock-pip,
  .consent-line.is-wait .consent-pip {
    animation: bridge-dot-pulse 1.4s infinite;
  }
  .bridge-step.is-done .bridge-dot .ph {
    animation: bridge-check-pop var(--motion-dur-base) var(--motion-ease-spring);
  }
  .bridge-step:not(:first-child)::after {
    transition: transform var(--motion-dur-base) var(--motion-ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .call-dock-body.enter,
  .bridge-step.is-done .bridge-dot .ph {
    animation: bridge-fade-in var(--motion-dur-fast) ease-out;
  }
  .bridge-step:not(:first-child)::after {
    transition: none;
  }
}