@coventia/softphone 0.1.0 → 0.2.0

package/dist/element/index.js

@@ -6931,7 +6931,7 @@ var require_jsx_runtime = __commonJS({
 });
 
 // src/element/index.ts
-var import_react29 = __toESM(require_react(), 1);
+var import_react32 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // src/react/context.tsx
@@ -6950,7 +6950,7 @@ function useSoftphone() {
 }
 
 // src/ui/SoftphoneWidget.tsx
-var import_react27 = __toESM(require_react(), 1);
+var import_react30 = __toESM(require_react(), 1);
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react3 = __toESM(require_react());
@@ -7328,6 +7328,20 @@ function useActiveCall() {
     (0, import_react4.useCallback)(() => phone.activeCall, [phone])
   );
 }
+function usePresence(active) {
+  const phone = useSoftphone();
+  return (0, import_react4.useSyncExternalStore)(
+    (0, import_react4.useCallback)(
+      (cb) => {
+        if (!active) return () => {
+        };
+        return phone.on("presenceChanged" /* PresenceChanged */, () => cb());
+      },
+      [phone, active]
+    ),
+    (0, import_react4.useCallback)(() => phone.presence, [phone])
+  );
+}
 var CALL_EVENTS = [
   "stateChanged" /* StateChanged */,
   "muted" /* Muted */,
@@ -7764,6 +7778,125 @@ function elapsedSeconds(since, now) {
   if (!since) return 0;
   return Math.floor((now - since.getTime()) / 1e3);
 }
+function formatAge(totalSeconds) {
+  const s = Math.max(0, Math.floor(totalSeconds));
+  if (s < 60) return "justo ahora";
+  const mm = Math.floor(s / 60);
+  if (mm < 60) return `hace ${mm} min`;
+  const hh = Math.floor(mm / 60);
+  return `hace ${hh} h`;
+}
+
+// src/ui/lib/error-text.ts
+var ERROR_TEXT = {
+  // ── Engine lifecycle ────────────────────────────────────────────────────────
+  // Integrator mistakes rather than user-facing failures, but they must still read as something
+  // rather than as a blank panel if one ever reaches the UI.
+  "engine/duplicate-instance": {
+    title: "Tel\xE9fono duplicado",
+    body: "Hay otro tel\xE9fono abierto en esta p\xE1gina. Cierra uno y vuelve a cargar."
+  },
+  "engine/not-started": { title: "El tel\xE9fono a\xFAn no est\xE1 listo" },
+  "engine/destroyed": {
+    title: "Tel\xE9fono cerrado",
+    body: "Vuelve a cargar la p\xE1gina para usarlo de nuevo."
+  },
+  // ── Auth ────────────────────────────────────────────────────────────────────
+  // Never "token": the user has no idea what one is. What they can act on is the session.
+  "auth/token-fetch-failed": {
+    title: "Sin conexi\xF3n con el servidor",
+    body: "No se ha podido activar el tel\xE9fono. Reint\xE9ntalo en unos segundos."
+  },
+  "auth/token-rejected": {
+    title: "Sesi\xF3n caducada",
+    body: "Vuelve a iniciar sesi\xF3n para poder llamar."
+  },
+  // ── Media ───────────────────────────────────────────────────────────────────
+  // Verbatim from MicPermissionGate, which already says these well and says them first.
+  //
+  // NEVER ACTUALLY SHOWN via this table — these four codes (through `media/playback-blocked`, below)
+  // are never raised as a `SoftphoneError` at all. See the fuller comment on each in `core/errors.ts`
+  // for why. Copy kept here anyway so the catalogue and this file stay the same shape as every other
+  // code — `error-text.test.ts` would fail the build the moment they drifted.
+  "media/permission-denied": {
+    title: "Micr\xF3fono bloqueado",
+    body: "Perm\xEDtelo en tu navegador para poder llamar."
+  },
+  "media/no-input-device": {
+    title: "Sin micr\xF3fono",
+    body: "Conecta un micr\xF3fono y vuelve a intentarlo."
+  },
+  "media/webrtc-unsupported": {
+    title: "Llamadas no disponibles",
+    body: "Este navegador no admite llamadas. Prueba con Chrome, Edge o Firefox."
+  },
+  "media/playback-blocked": { title: "Toca la pantalla para activar el sonido" },
+  // ── Network / signalling ────────────────────────────────────────────────────
+  // "Centralita" rather than "SIP" or "registro": the user knows what a phone system is.
+  "net/registration-failed": {
+    title: "No se pudo conectar",
+    body: "No hemos podido conectar con la centralita. Reintenta en unos segundos."
+  },
+  "net/transport-failed": {
+    title: "Conexi\xF3n perdida",
+    body: "Se ha perdido la conexi\xF3n con la centralita."
+  },
+  // NEVER ACTUALLY SHOWN either — CallScreen's own "Reconectando…" already covers this, off the
+  // call's `reconnecting` state rather than this channel. See the comment in `core/errors.ts`.
+  "net/ice-failed": { title: "Recuperando el audio\u2026" },
+  // ── Call ────────────────────────────────────────────────────────────────────
+  /*
+      THE VOICE RULE FOR THIS BLOCK: say what HAPPENED, not what it is called.
+  
+      These were status labels — "Llamada perdida", "Llamada rechazada", "Sin respuesta". Each is a
+      name for a category rather than an account of an event, which is why they read as a database enum
+      someone forgot to translate into human. Worse, a label hides the ACTOR: "Llamada rechazada" never
+      says who rejected what, so the user reading it after declining a call and the user reading it
+      after being declined see the same three words.
+  
+      So each one is a short sentence about what the other person, or the phone, did — the form
+      `call/busy` already had, and the reason it was the only one here that read clearly.
+  
+      Impersonal third-person plural ("contestaron", "colgaron") throughout: the user does not know who
+      is at the other end, and it is what Spanish uses when the subject is unknown. Mixing it with the
+      singular across neighbouring lines reads as carelessness.
+  
+      LENGTH IS A HARD CONSTRAINT, not a preference. `.cv-dial-outcome` is one line at a fixed
+      `1.15rem`, and the keypad below it is `flex: 1` — a title that wraps resizes every key and shifts
+      the grid under a finger already reaching for it. `error-text.test.ts` caps this at 48 characters.
+    */
+  "call/not-answerable": { title: "Esa llamada ya ha terminado" },
+  /*
+    NOT "Comunicando", which is what this said and what sent us looking. SIP 486 is both "the line is
+    engaged" AND what almost every endpoint sends when a person presses decline — including our own
+    `reject()`. One code, two events, no way to tell them apart, so the copy has to hold both rather
+    than assert the less likely one. `call/rejected` can be definite: an endpoint sending 603 Decline
+    means exactly that.
+  */
+  "call/busy": { title: "No contestaron o la l\xEDnea estaba ocupada" },
+  "call/no-answer": { title: "No contestaron" },
+  "call/rejected": { title: "No aceptaron tu llamada" },
+  /*
+    The legacy CRM said "La persona que llamaba colgó antes de que pudieras contestar." — the right
+    fact, at three times the width of the line that has to hold it. This keeps the fact and drops the
+    words: the user needs to know the call was FOR them and that nobody is waiting on the line.
+    "Llamada perdida" alone tested badly for exactly the label reason above — it names the category
+    without saying anyone rang.
+  */
+  "call/missed": { title: "Colgaron antes de que pudieras contestar" },
+  // "No se pudo completar la llamada" was our own "something went wrong": true of every failure and
+  // useful for none. The number is what the user can actually act on.
+  "call/failed": { title: "No se pudo conectar con ese n\xFAmero" },
+  // The load-bearing half is the SECOND sentence: the original call is still up, and a user who
+  // thinks they dropped it will hang up on a client to "fix" it.
+  "call/transfer-failed": { title: "No se pudo transferir. Sigues en la llamada" },
+  "call/unsupported": { title: "Esta funci\xF3n no est\xE1 disponible" },
+  // ── Provider ────────────────────────────────────────────────────────────────
+  "provider/provision-failed": {
+    title: "No se pudo activar el tel\xE9fono",
+    body: "Si el problema contin\xFAa, contacta con soporte."
+  }
+};
 
 // src/ui/lib/useTicker.ts
 var import_react9 = __toESM(require_react(), 1);
@@ -7886,17 +8019,195 @@ var STATUS_LABEL = {
   reconnecting: "Reconectando\u2026",
   held: "En espera"
 };
+var CONSULT_FAIL_CODE = {
+  busy: "call/busy",
+  "no-answer": "call/no-answer",
+  rejected: "call/rejected",
+  failed: "call/failed"
+};
+function consultFailText(reason) {
+  return ERROR_TEXT[CONSULT_FAIL_CODE[reason] ?? "call/transfer-failed"].title;
+}
+var MIN_CONSULT_HOLD_SECONDS = 10;
+function ConsultScreen({
+  mainName,
+  consultView,
+  now,
+  onReturn,
+  onComplete,
+  onHangupAll
+}) {
+  const s = consultView.state;
+  const answered = s === "active";
+  const name = consultView.remote.displayName;
+  const number = consultView.remote.number;
+  const showNumber = number !== name;
+  const heldSeconds = elapsedSeconds(consultView.answeredAt, now);
+  const [rawM = "0", ss = "00"] = formatDuration(heldSeconds).split(":");
+  const mm = rawM.padStart(2, "0");
+  const canComplete = heldSeconds >= MIN_CONSULT_HOLD_SECONDS;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-view", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-call", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: "cv-consult-hold-banner", onClick: onReturn, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Pause, { size: 13, "aria-hidden": true }),
+        mainName,
+        " en espera \xB7 Volver"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-avatar-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-avatar", "aria-hidden": true, children: initials(name) }),
+        answered ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-avatar-dot", "aria-hidden": true }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call-name", children: name }),
+      showNumber ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call-number", children: number }) : null,
+      answered ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-timer", "aria-label": "Duraci\xF3n de la llamada", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("b", { children: mm }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("i", { children: ":" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("b", { children: ss })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call-status", children: STATUS_LABEL[s] ?? "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-transfer-actions", children: [
+        answered ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onComplete, disabled: !canComplete, children: "Completar" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "cv-btn", onClick: onReturn, children: "Cancelar" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-controls-primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-ctrl-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "cv-round cv-round--hangup",
+            onClick: onHangupAll,
+            "aria-label": "Colgar todo",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneOff, { size: 26 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Colgar todo" })
+      ] }) })
+    ] })
+  ] });
+}
+var PRESENCE_LABEL = {
+  disponible: "Disponible",
+  en_llamada: "En llamada",
+  desconectado: "Desconectado"
+};
+var PRESENCE_RANK = {
+  disponible: 0,
+  en_llamada: 1,
+  desconectado: 2
+};
+function filterAgents(agents, query) {
+  const q = query.trim().toLowerCase();
+  return agents.filter((a) => !q || (a.name ?? "").toLowerCase().includes(q) || a.extension.includes(q)).sort(
+    (a, b) => PRESENCE_RANK[a.state] - PRESENCE_RANK[b.state] || (a.name ?? a.extension).localeCompare(b.name ?? b.extension)
+  );
+}
+function truncateForButton(text, max = 16) {
+  return text.length > max ? `${text.slice(0, max)}\u2026` : text;
+}
+function TransferPicker({
+  agents,
+  myUserId,
+  query,
+  onSelect
+}) {
+  const others = agents.filter((a) => a.userId !== myUserId);
+  if (others.length === 0) return null;
+  const filtered = filterAgents(others, query);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-presence", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-presence-list", role: "listbox", "aria-label": "Compa\xF1eros", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cv-presence-empty", children: "Sin coincidencias" }) : filtered.map((agent) => {
+      const isBusy = agent.state === "en_llamada";
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          className: "cv-presence-item",
+          disabled: isBusy,
+          onClick: () => onSelect(agent.extension),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-presence-dot", "data-state": agent.state, "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-presence-name", children: agent.name ?? agent.extension }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "cv-presence-meta", children: [
+              agent.extension,
+              " \xB7 ",
+              PRESENCE_LABEL[agent.state]
+            ] })
+          ]
+        },
+        agent.userId
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cv-presence-legend", children: "Desconectado: sin conexi\xF3n en el softphone web. Puede atender desde otro dispositivo." })
+  ] });
+}
 function CallScreen({
   call,
   incomingCallAction
 }) {
   const view = useCall(call);
+  const softphone = useSoftphone();
   const [showTransfer, setShowTransfer] = (0, import_react12.useState)(false);
   const [transferTo, setTransferTo] = (0, import_react12.useState)("");
+  const [consultCall, setConsultCall] = (0, import_react12.useState)(null);
+  const [consultOutcome, setConsultOutcome] = (0, import_react12.useState)(null);
+  const [myUserId, setMyUserId] = (0, import_react12.useState)(null);
+  const consultView = useCall(consultCall);
+  const consultIntentRef = (0, import_react12.useRef)(null);
   const [showDevices, setShowDevices] = (0, import_react12.useState)(false);
   const controlsRef = (0, import_react12.useRef)(null);
   const now = useTicker(view?.state === "active");
+  const consultNow = useTicker(consultView?.state === "active");
   const isConnected = view ? view.state === "active" || view.state === "held" || view.state === "reconnecting" : false;
+  const transferPickerActive = isConnected && showTransfer && !consultCall;
+  const presence = usePresence(transferPickerActive);
+  (0, import_react12.useEffect)(() => {
+    const listAgents = softphone.sources?.listAgents;
+    if (!listAgents) return;
+    let cancelled = false;
+    void listAgents().then((d) => !cancelled && setMyUserId(d.me?.userId ?? null)).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [softphone]);
+  (0, import_react12.useEffect)(() => {
+    if (!consultCall) return;
+    return consultCall.on("ended" /* Ended */, ({ reason }) => {
+      const intent = consultIntentRef.current;
+      consultIntentRef.current = null;
+      setConsultCall(null);
+      if (!intent) {
+        setConsultOutcome(reason);
+        if (call.state !== "ended") void call.unhold();
+      }
+    });
+  }, [consultCall, call]);
+  const startConsult = async (target) => {
+    const t = (target ?? transferTo).trim();
+    if (!t) return;
+    setConsultOutcome(null);
+    setConsultCall(await call.startConsult(t));
+  };
+  const selectPresenceAgent = (extension) => {
+    setTransferTo(extension);
+    void startConsult(extension);
+  };
+  const [quickTransfer, setQuickTransfer] = (0, import_react12.useState)(false);
+  const selectPresenceAgentAuto = (extension) => {
+    void call.transfer(extension);
+  };
+  const completeTransfer = async () => {
+    if (!consultCall) return;
+    const target = transferTo.trim();
+    consultIntentRef.current = "complete";
+    await consultCall.hangup();
+    await call.transfer(target);
+  };
+  const cancelConsult = async () => {
+    consultIntentRef.current = "cancel";
+    await call.cancelConsult();
+  };
   (0, import_react12.useEffect)(() => {
     if (!showDevices) return;
     const onKey = (e) => {
@@ -7921,6 +8232,19 @@ function CallScreen({
   const name = view.remote.displayName;
   const number = view.remote.number;
   const showNumber = number !== name;
+  if (consultCall && consultView) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ConsultScreen,
+      {
+        mainName: name,
+        consultView,
+        now: consultNow,
+        onReturn: () => void cancelConsult(),
+        onComplete: () => void completeTransfer(),
+        onHangupAll: () => void call.hangup()
+      }
+    );
+  }
   const incomingAction = isRinging && view.remote.contact && incomingCallAction ? incomingCallAction : null;
   const IncomingActionIcon = incomingAction?.icon ?? ExternalLink;
   const [rawM = "0", ss = "00"] = formatDuration(elapsedSeconds(view.answeredAt, now)).split(":");
@@ -7939,7 +8263,79 @@ function CallScreen({
         STATUS_LABEL[s] ?? ""
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-settings-section-body", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePickers, {}) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    ] }) : transferPickerActive ? (
+      /*
+        Found live (2026-09-29): the agent list a moment ago picked between showing ONE agent row
+        or forcing a scroll — `.cv-presence-list`'s own `max-height` had already been trimmed twice
+        (T7, then T3) chasing that, and both times the room it was chasing lived somewhere else.
+        The full avatar/name/giant-timer block above stayed on screen, unconditionally, the WHOLE
+        time the picker was open — exactly the anti-pattern `.cv-call-devices-inline` (above) was
+        already built to avoid for the pre-connect device picker: "an inline swap, not an overlay,
+        so it gets the full box, not a leftover sliver." The picker never got that same treatment.
+        Measured live (a temporary harness, `playground/react/picker-harness.*`, real Chromium at
+        this SDK's own real embed footprint, 310×520): the avatar+name+timer block alone cost
+        ~150px of `.cv-call`'s ~340px of usable height — more than the entire agent list, the mode
+        toggle, and the free-text row combined. Reusing `.cv-call-devices-inline`'s OWN "who's
+        calling doesn't disappear" compact context line (below) instead of the full block gives
+        that ~150px back to the one thing this screen is actually for right now: the list.
+      */
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-transfer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-transfer-context", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-call-devices-title", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "cv-call-devices-context", children: [
+            showNumber ? `${number} \xB7 ` : "",
+            s === "active" ? `${mm}:${ss}` : STATUS_LABEL[s] ?? ""
+          ] })
+        ] }),
+        consultOutcome ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cv-dial-outcome", role: "status", "data-shown": "true", children: consultFailText(consultOutcome) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-transfer-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              className: "cv-search",
+              value: transferTo,
+              onChange: (e) => setTransferTo(e.target.value),
+              placeholder: "Nombre, ext. o n\xFAmero",
+              "aria-label": "Transferir a",
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              className: "cv-btn cv-btn--accent",
+              disabled: !transferTo.trim(),
+              onClick: () => void startConsult(),
+              children: transferTo.trim() ? `Llamar a ${truncateForButton(transferTo.trim())}` : "Llamar"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-segmented", role: "tablist", "aria-label": "Modo de transferencia", children: [
+          { key: "consult", label: "Hablar primero" },
+          { key: "auto", label: "Transferir directo" }
+        ].map(({ key, label }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": quickTransfer === (key === "auto"),
+            className: "cv-segmented-btn",
+            onClick: () => setQuickTransfer(key === "auto"),
+            children: label
+          },
+          key
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          TransferPicker,
+          {
+            agents: presence,
+            myUserId,
+            query: transferTo,
+            onSelect: quickTransfer ? selectPresenceAgentAuto : selectPresenceAgent
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-avatar-wrap", children: [
         isRinging ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-avatar-ping", "aria-hidden": true }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-avatar", "aria-hidden": true, children: initials(name) }),
@@ -7969,31 +8365,6 @@ function CallScreen({
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Headphones, { size: 13, "aria-hidden": true }),
           "Dispositivos"
         ] })
-      ] }) : null,
-      inCall && showTransfer ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-transfer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "input",
-          {
-            className: "cv-search",
-            value: transferTo,
-            onChange: (e) => setTransferTo(e.target.value),
-            placeholder: "Extensi\xF3n o n\xFAmero",
-            "aria-label": "Transferir a",
-            autoFocus: true
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
-          {
-            className: "cv-btn cv-btn--accent",
-            disabled: !transferTo.trim(),
-            onClick: () => {
-              void call.transfer(transferTo.trim());
-              setShowTransfer(false);
-            },
-            children: "Transferir"
-          }
-        )
       ] }) : null
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-controls", ref: controlsRef, children: isRinging ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-controls-primary", children: [
@@ -8838,117 +9209,6 @@ function MicPrompt({
   ] });
 }
 
-// src/ui/lib/error-text.ts
-var ERROR_TEXT = {
-  // ── Engine lifecycle ────────────────────────────────────────────────────────
-  // Integrator mistakes rather than user-facing failures, but they must still read as something
-  // rather than as a blank panel if one ever reaches the UI.
-  "engine/duplicate-instance": {
-    title: "Tel\xE9fono duplicado",
-    body: "Hay otro tel\xE9fono abierto en esta p\xE1gina. Cierra uno y vuelve a cargar."
-  },
-  "engine/not-started": { title: "El tel\xE9fono a\xFAn no est\xE1 listo" },
-  "engine/destroyed": {
-    title: "Tel\xE9fono cerrado",
-    body: "Vuelve a cargar la p\xE1gina para usarlo de nuevo."
-  },
-  // ── Auth ────────────────────────────────────────────────────────────────────
-  // Never "token": the user has no idea what one is. What they can act on is the session.
-  "auth/token-fetch-failed": {
-    title: "Sin conexi\xF3n con el servidor",
-    body: "No se ha podido activar el tel\xE9fono. Reint\xE9ntalo en unos segundos."
-  },
-  "auth/token-rejected": {
-    title: "Sesi\xF3n caducada",
-    body: "Vuelve a iniciar sesi\xF3n para poder llamar."
-  },
-  // ── Media ───────────────────────────────────────────────────────────────────
-  // Verbatim from MicPermissionGate, which already says these well and says them first.
-  //
-  // NEVER ACTUALLY SHOWN via this table — these four codes (through `media/playback-blocked`, below)
-  // are never raised as a `SoftphoneError` at all. See the fuller comment on each in `core/errors.ts`
-  // for why. Copy kept here anyway so the catalogue and this file stay the same shape as every other
-  // code — `error-text.test.ts` would fail the build the moment they drifted.
-  "media/permission-denied": {
-    title: "Micr\xF3fono bloqueado",
-    body: "Perm\xEDtelo en tu navegador para poder llamar."
-  },
-  "media/no-input-device": {
-    title: "Sin micr\xF3fono",
-    body: "Conecta un micr\xF3fono y vuelve a intentarlo."
-  },
-  "media/webrtc-unsupported": {
-    title: "Llamadas no disponibles",
-    body: "Este navegador no admite llamadas. Prueba con Chrome, Edge o Firefox."
-  },
-  "media/playback-blocked": { title: "Toca la pantalla para activar el sonido" },
-  // ── Network / signalling ────────────────────────────────────────────────────
-  // "Centralita" rather than "SIP" or "registro": the user knows what a phone system is.
-  "net/registration-failed": {
-    title: "No se pudo conectar",
-    body: "No hemos podido conectar con la centralita. Reintenta en unos segundos."
-  },
-  "net/transport-failed": {
-    title: "Conexi\xF3n perdida",
-    body: "Se ha perdido la conexi\xF3n con la centralita."
-  },
-  // NEVER ACTUALLY SHOWN either — CallScreen's own "Reconectando…" already covers this, off the
-  // call's `reconnecting` state rather than this channel. See the comment in `core/errors.ts`.
-  "net/ice-failed": { title: "Recuperando el audio\u2026" },
-  // ── Call ────────────────────────────────────────────────────────────────────
-  /*
-      THE VOICE RULE FOR THIS BLOCK: say what HAPPENED, not what it is called.
-  
-      These were status labels — "Llamada perdida", "Llamada rechazada", "Sin respuesta". Each is a
-      name for a category rather than an account of an event, which is why they read as a database enum
-      someone forgot to translate into human. Worse, a label hides the ACTOR: "Llamada rechazada" never
-      says who rejected what, so the user reading it after declining a call and the user reading it
-      after being declined see the same three words.
-  
-      So each one is a short sentence about what the other person, or the phone, did — the form
-      `call/busy` already had, and the reason it was the only one here that read clearly.
-  
-      Impersonal third-person plural ("contestaron", "colgaron") throughout: the user does not know who
-      is at the other end, and it is what Spanish uses when the subject is unknown. Mixing it with the
-      singular across neighbouring lines reads as carelessness.
-  
-      LENGTH IS A HARD CONSTRAINT, not a preference. `.cv-dial-outcome` is one line at a fixed
-      `1.15rem`, and the keypad below it is `flex: 1` — a title that wraps resizes every key and shifts
-      the grid under a finger already reaching for it. `error-text.test.ts` caps this at 48 characters.
-    */
-  "call/not-answerable": { title: "Esa llamada ya ha terminado" },
-  /*
-    NOT "Comunicando", which is what this said and what sent us looking. SIP 486 is both "the line is
-    engaged" AND what almost every endpoint sends when a person presses decline — including our own
-    `reject()`. One code, two events, no way to tell them apart, so the copy has to hold both rather
-    than assert the less likely one. `call/rejected` can be definite: an endpoint sending 603 Decline
-    means exactly that.
-  */
-  "call/busy": { title: "No contestaron o la l\xEDnea estaba ocupada" },
-  "call/no-answer": { title: "No contestaron" },
-  "call/rejected": { title: "No aceptaron tu llamada" },
-  /*
-    The legacy CRM said "La persona que llamaba colgó antes de que pudieras contestar." — the right
-    fact, at three times the width of the line that has to hold it. This keeps the fact and drops the
-    words: the user needs to know the call was FOR them and that nobody is waiting on the line.
-    "Llamada perdida" alone tested badly for exactly the label reason above — it names the category
-    without saying anyone rang.
-  */
-  "call/missed": { title: "Colgaron antes de que pudieras contestar" },
-  // "No se pudo completar la llamada" was our own "something went wrong": true of every failure and
-  // useful for none. The number is what the user can actually act on.
-  "call/failed": { title: "No se pudo conectar con ese n\xFAmero" },
-  // The load-bearing half is the SECOND sentence: the original call is still up, and a user who
-  // thinks they dropped it will hang up on a client to "fix" it.
-  "call/transfer-failed": { title: "No se pudo transferir. Sigues en la llamada" },
-  "call/unsupported": { title: "Esta funci\xF3n no est\xE1 disponible" },
-  // ── Provider ────────────────────────────────────────────────────────────────
-  "provider/provision-failed": {
-    title: "No se pudo activar el tel\xE9fono",
-    body: "Si el problema contin\xFAa, contacta con soporte."
-  }
-};
-
 // src/ui/permission/ErrorGate.tsx
 var import_jsx_runtime15 = (
   /*
@@ -9292,8 +9552,102 @@ function useCallAudio(enabled) {
   }, [softphone, enabled]);
 }
 
-// src/ui/SoftphoneWidget.tsx
+// src/ui/notices/TransferNotices.tsx
 var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+function TransferNotices({
+  notices,
+  dismiss
+}) {
+  const softphone = useSoftphone();
+  const now = useTicker(notices.length > 0, 15e3);
+  const callBack = (notice) => {
+    dismiss(notice.id);
+    if (notice.caller) void softphone.call(notice.caller).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: "cv-transfer-notices",
+      role: "status",
+      part: "transfer-notices",
+      "data-has-notices": notices.length > 0,
+      children: [
+        notices.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "cv-transfer-notices-count", children: [
+          notices.length,
+          " traspasos sin conectar"
+        ] }) : null,
+        notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "cv-transfer-notice", part: "transfer-notice", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "cv-transfer-notice-mark", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PhoneMissed, { size: 16 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "cv-transfer-notice-body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "cv-transfer-notice-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "cv-transfer-notice-title", children: [
+                "El traspaso a ",
+                notice.target,
+                " no se conect\xF3"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "cv-transfer-notice-dismiss",
+                  onClick: () => dismiss(notice.id),
+                  "aria-label": "Descartar aviso",
+                  part: "transfer-notice-dismiss",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(X, { size: 14 })
+                }
+              )
+            ] }),
+            notice.caller ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "cv-transfer-notice-subtitle", children: [
+              notice.caller,
+              " se ha desconectado."
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "cv-transfer-notice-footer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "cv-transfer-notice-age", children: formatAge(elapsedSeconds(notice.at, now)) }),
+              notice.caller ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "cv-btn cv-btn--accent cv-transfer-notice-callback",
+                  onClick: () => callBack(notice),
+                  part: "transfer-notice-callback",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Phone, { size: 14, "aria-hidden": true }),
+                    "Llamar de vuelta"
+                  ]
+                }
+              ) : null
+            ] })
+          ] })
+        ] }, notice.id))
+      ]
+    }
+  );
+}
+
+// src/ui/notices/useTransferNotices.ts
+var import_react28 = __toESM(require_react(), 1);
+function useTransferNotices() {
+  const softphone = useSoftphone();
+  const [notices, setNotices] = (0, import_react28.useState)([]);
+  const nextId = (0, import_react28.useRef)(0);
+  const dismiss = (0, import_react28.useCallback)((id) => {
+    setNotices((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+  (0, import_react28.useEffect)(
+    () => softphone.on("transferOutcome" /* TransferOutcome */, (payload) => {
+      if (payload.status === "not-connected") {
+        const id = nextId.current++;
+        setNotices((prev) => [...prev, { id, target: payload.target, caller: payload.caller, at: payload.at }]);
+      }
+    }),
+    [softphone]
+  );
+  return { notices, dismiss };
+}
+
+// src/ui/SoftphoneWidget.tsx
+var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
 function SoftphoneWidget(props) {
   const {
     contacts,
@@ -9309,7 +9663,7 @@ function SoftphoneWidget(props) {
   const fallback = softphone.sources;
   const contactsSource = contacts ?? fallback?.contacts;
   const historySource = history ?? fallback?.history;
-  const [tab, setTab] = (0, import_react27.useState)("dialer");
+  const [tab, setTab] = (0, import_react30.useState)("dialer");
   const call = useActiveCall();
   const isLeader = useIsLeader();
   const softphoneState = useSoftphoneState();
@@ -9318,7 +9672,9 @@ function SoftphoneWidget(props) {
   useCallAudio(sounds);
   const blocked = requireMic && mic.state !== "ready";
   const fatal = useLastError();
+  const screenIsFree = !call && !blocked && !fatal && !isFollower;
   const { outcome, clear: clearOutcome } = useCallOutcome();
+  const { notices: transferNotices, dismiss: dismissTransferNotice } = useTransferNotices();
   const retry = () => {
     void (async () => {
       try {
@@ -9336,14 +9692,15 @@ function SoftphoneWidget(props) {
     // optional parts of a phone, so this is never conditionally hidden.
     { id: "settings", icon: Settings, label: "Ajustes", show: true }
   ].filter((t) => t.show);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       className: className ? `cv-softphone ${className}` : "cv-softphone",
       ...theme === "system" ? {} : { "data-cv-theme": theme },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LeaderGate, {}) : blocked ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CallScreen, { call, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SettingsTab, {}) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialpad, { outcome, onIntent: clearOutcome }) }),
-        call || blocked || fatal || isFollower ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        screenIsFree ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TransferNotices, { notices: transferNotices, dismiss: dismissTransferNotice }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LeaderGate, {}) : blocked ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CallScreen, { call, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SettingsTab, {}) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialpad, { outcome, onIntent: clearOutcome }) }),
+        screenIsFree ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "button",
           {
             role: "tab",
@@ -9351,19 +9708,19 @@ function SoftphoneWidget(props) {
             className: "cv-tab",
             onClick: () => setTab(id),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon3, { size: 20 }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon3, { size: 20 }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: label })
             ]
           },
           id
-        )) })
+        )) }) : null
       ]
     }
   );
 }
 
 // src/styles/softphone.css
-var softphone_default = "/**\r\n * @coventia/softphone/styles.css\r\n *\r\n * The theming contract (SPEC \xA72.6) + all component styles. A host restyles the softphone by\r\n * overriding the `--cv-*` custom properties \u2014 which are INHERITED, so they cross the shadow boundary\r\n * of `<coventia-softphone>` by design (the host's own CSS *selectors* do not, which is what stops a\r\n * stray `button { width:100% }` from destroying the dialpad).\r\n *\r\n * Defaults match the Coventia product: light surface, emerald accent, soft rounded key cards.\r\n *\r\n * Reseller:  coventia-softphone { --cv-accent:#7c3aed; --cv-bg:#0b0b0f; }\r\n * CRM (shadcn bridge, ~15 lines, dark mode included):\r\n *   .cv-softphone { --cv-bg:hsl(var(--background)); --cv-text:hsl(var(--foreground)); \u2026 }\r\n *\r\n * TYPOGRAPHY NOTE: `--cv-font` is a system stack on purpose. An embedded widget should inherit its\r\n * host's type, not force a webfont into someone else's app; hosts override the token if they want.\r\n *\r\n * Strings are Spanish-only (SPEC \xA72.4). No i18n.\r\n */\r\n\r\n/*\r\n * The custom element's own box.\r\n *\r\n * A custom element is `display: inline` by default and has NO size \u2014 and the widget inside now fills\r\n * its host rather than asserting 340\xD7520, so without this the element would render to ZERO. The\r\n * drop-in promise is \"one tag and it works\", which means the TAG must carry a box.\r\n *\r\n * These are defaults, not decisions: they sit on `:host`, so any host stylesheet outranks them \u2014\r\n *\r\n *   coventia-softphone { width: 100%; height: 100%; }   \u2190 a sidebar\r\n *   coventia-softphone { height: 600px; }               \u2190 taller\r\n *\r\n * React consumers never see this: they import `/ui` and their own wrapper states the box (the CRM's\r\n * PhoneDialer does exactly that).\r\n */\r\n:host {\r\n  display: block;\r\n  width: 340px;\r\n  height: 520px;\r\n}\r\n\r\n/* React's container inside the shadow root \u2014 element path only; inert everywhere else.\r\n *\r\n * It must pass the host's height straight through. `.cv-softphone` below is `height: 100%`, and a\r\n * percentage height resolves against the PARENT: leave this div at its default `auto` and that 100%\r\n * silently becomes `auto` too, so the widget collapses to its content height and the host's `height`\r\n * is ignored. What you see is a short card stranded in a taller box \u2014 which reads as a broken widget,\r\n * not as a broken wrapper. */\r\n.cv-mount {\r\n  height: 100%;\r\n}\r\n\r\n:host,\r\n.cv-softphone {\r\n  /* Surface */\r\n  --cv-bg: #ffffff;\r\n  --cv-surface: #f9fafb;\r\n  --cv-surface-2: #f3f4f6;\r\n  --cv-border: #f3f4f6;\r\n  --cv-border-strong: #e5e7eb;\r\n\r\n  /* Text \u2014 three tiers, split by CONTRAST DUTY, not by taste:\r\n     `text`  informational primary        17.7:1\r\n     `muted` informational secondary       4.8:1  (AA \u2014 phone numbers, timestamps, tab labels)\r\n     `faint` DECORATIVE only               2.5:1  (keypad letters, placeholder \u2014 never information)\r\n     The legacy used gray-400 for all secondary text, which fails AA at 2.54:1. Splitting the tier\r\n     keeps the look while making the informational text legible. */\r\n  --cv-text: #111827;\r\n  --cv-muted: #6b7280;\r\n  --cv-faint: #9ca3af;\r\n\r\n  /* Intent \u2014 emerald. Split by CONTRAST DUTY, because one \"brand green\" cannot do all three jobs:\r\n     `accent`        FILL that carries a white glyph  \u2192 emerald-600, white 3.77:1 \u2713\r\n                     (emerald-500 is the prettier brand green but white on it is 2.54:1 \u2014 the\r\n                      call button's phone icon would fail WCAG non-text contrast. Measured, not guessed.)\r\n     `accent-strong` emerald AS TEXT on a surface     \u2192 emerald-700, 5.48:1 \u2713 for the 10px tab label\r\n     `accent-light`  DECORATIVE only (the ring halo)  \u2014 never carries text, so it stays vivid */\r\n  --cv-accent: #059669;\r\n  --cv-accent-strong: #047857;\r\n  --cv-accent-light: #10b981;\r\n  --cv-accent-soft: #a7f3d0;\r\n  --cv-accent-contrast: #ffffff;\r\n  --cv-danger: #ef4444;\r\n  /* `--cv-danger` ITSELF fails 3:1 non-text contrast against `--cv-danger-soft` (2.6:1, measured) \u2014\r\n     the same AS-TEXT/on-a-tinted-surface split `accent` already has, `danger` was just missing until\r\n     the Historial tab's status badges needed it. Darker on light (mirrors `accent-strong`), LIGHTER on\r\n     dark (red-400) \u2014 same inversion `accent-strong` documents above, same reason: emphasis on a dark\r\n     surface means more light, not less.\r\n     red-700 (#b91c1c) was the first pick here and overshot both minimums (6.47:1 text, 4.47:1 badge)\r\n     enough to read as a dark, brownish red rather than red \u2014 red-600 clears both with real margin\r\n     still (4.83:1 / 3.34:1, measured) and looks like red. */\r\n  --cv-danger-strong: #dc2626;\r\n  --cv-danger-soft: #fecaca;\r\n  /* A third status hue, sky \u2014 for the Historial row status chip specifically: an outgoing call that\r\n     WAS answered gets its own colour rather than sharing `accent`, matching the legacy CRM's own\r\n     three-way split (emerald/sky/rose) that this file's earlier restrained accent-only-for-\"fine\"\r\n     version had collapsed away. Same strong/soft split, same inversion, as `accent`/`danger` above \u2014\r\n     4.47:1 light / 4.42:1 dark against `-soft`, measured. */\r\n  --cv-info: #0284c7;\r\n  --cv-info-strong: #0369a1;\r\n  --cv-info-soft: #bae6fd;\r\n  --cv-hold: #6366f1;\r\n\r\n  /* Shape & type */\r\n  --cv-radius: 16px;\r\n  /* Strong ease-out. The built-in CSS easings are too weak to read as intentional. */\r\n  --cv-ease-out: cubic-bezier(0.23, 1, 0.32, 1);\r\n  --cv-radius-key: 16px;\r\n  --cv-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n  --cv-font-size: 14px;\r\n  --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);\r\n\r\n  color: var(--cv-text);\r\n  font-family: var(--cv-font);\r\n  font-size: var(--cv-font-size);\r\n}\r\n\r\n/**\r\n * Dark theme \u2014 matched to the Coventia product's own dark tokens, not invented.\r\n *\r\n * The CRM defines `--background: 240 10% 10%` (#17171c) with surfaces at 15.9% (#27272a) and borders\r\n * at 25.9% (#404044) \u2014 the zinc/240-hue family. An earlier draft here used a near-black\r\n * (#0f0f13, ~half the luminance of the product's background) with 2%-luminance borders that were\r\n * effectively invisible. That is the \"black tonality\" that read wrong: right hue, wrong lightness.\r\n *\r\n * Note the accent INVERTS: on light, `accent-strong` is darker than `accent` (emerald-700); on dark\r\n * it must be LIGHTER (emerald-400), because emphasis on a dark surface means more light, not less.\r\n * Same token, opposite direction \u2014 miss this and the timer/active tab sink into the background.\r\n *\r\n * \u2500\u2500 HOW THE THEME IS CHOSEN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n * By default it follows the OS (`prefers-color-scheme`). But a host must be able to PIN it: the\r\n * Coventia CRM toggles dark with a class (next-themes), not the OS setting \u2014 so a user with a dark\r\n * OS but the CRM in light mode would otherwise get a dark widget inside a light app.\r\n *\r\n *   <SoftphoneWidget theme=\"light\" />   \u2192 data-cv-theme=\"light\"  \u2014 always light\r\n *   <SoftphoneWidget theme=\"dark\" />    \u2192 data-cv-theme=\"dark\"   \u2014 always dark\r\n *   <SoftphoneWidget />                 \u2192 follows the OS\r\n *\r\n * To follow the HOST's theme rather than the OS, pass the host's current theme through, e.g.\r\n * next-themes: `const { resolvedTheme } = useTheme(); <SoftphoneWidget theme={resolvedTheme} />`.\r\n *\r\n * The dark block is duplicated below (OS-driven vs. pinned) on purpose: plain CSS has no way to\r\n * share a declaration block across a media query and a selector, and the honest duplication beats a\r\n * clever custom-property toggle nobody can debug.\r\n */\r\n@media (prefers-color-scheme: dark) {\r\n  :host(:not([data-cv-theme='light'])),\r\n  .cv-softphone:not([data-cv-theme='light']) {\r\n    --cv-bg: #17171c;          /* CRM --background            240 10% 10%  */\r\n    --cv-surface: #202027;     /* between bg and secondary                 */\r\n    --cv-surface-2: #27272a;   /* CRM --secondary/--muted     240 3.7% 15.9% */\r\n    --cv-border: #2e2e33;\r\n    --cv-border-strong: #404044; /* CRM --border              240 3.7% 25.9% */\r\n    --cv-text: #fafafa;        /* CRM --foreground            0 0% 98%     */\r\n    --cv-muted: #a1a1aa;       /* CRM --muted-foreground      240 5% 64.9% \u2192 6.97:1 AA */\r\n    --cv-faint: #71717a;       /* decorative only                          */\r\n    --cv-accent-strong: #34d399; /* emerald-400 \u2014 9.29:1 on #17171c        */\r\n    --cv-accent-light: #34d399;  /* the halo reads brighter on dark          */\r\n    --cv-accent-soft: #065f46;   /* glows must darken on dark, not glare     */\r\n    --cv-danger-strong: #f87171; /* red-400 \u2014 LIGHTER than --cv-danger, same inversion as accent-strong */\r\n    --cv-danger-soft: #7f1d1d;\r\n    --cv-info-strong: #38bdf8;   /* sky-400 \u2014 same inversion, same reason */\r\n    --cv-info-soft: #0c4a6e;\r\n    --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.4);\r\n  }\r\n}\r\n\r\n/* Pinned dark \u2014 wins regardless of the OS setting. */\r\n:host([data-cv-theme='dark']),\r\n.cv-softphone[data-cv-theme='dark'] {\r\n  --cv-bg: #17171c;\r\n  --cv-surface: #202027;\r\n  --cv-surface-2: #27272a;\r\n  --cv-border: #2e2e33;\r\n  --cv-border-strong: #404044;\r\n  --cv-text: #fafafa;\r\n  --cv-muted: #a1a1aa;\r\n  --cv-faint: #71717a;\r\n  --cv-accent-strong: #34d399;\r\n  --cv-accent-light: #34d399;\r\n  --cv-accent-soft: #065f46;\r\n  --cv-danger-strong: #f87171;\r\n  --cv-danger-soft: #7f1d1d;\r\n  --cv-info-strong: #38bdf8;\r\n  --cv-info-soft: #0c4a6e;\r\n  --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.4);\r\n}\r\n\r\n.cv-softphone,\r\n.cv-softphone *,\r\n.cv-softphone *::before,\r\n.cv-softphone *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* \u2500\u2500 Shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-softphone {\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  /* FILL the box the host gives us; do not assert one.\r\n     This was `width: 340px; height: 520px`, which is a component telling its host how big its\r\n     layout is. The CRM's panel is 310 wide, so the third keypad column was simply cut off \u2014 and no\r\n     amount of theming could have fixed it, because the widget was not asking. A component in\r\n     someone else's layout accepts a size. */\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  /* \u2026but a dialpad is not a spreadsheet. Given 900px it should not become a 900px dialpad with\r\n     300px keys; it should be itself, centred. Cap and centre rather than stretch. */\r\n  max-width: var(--cv-max-width, 420px);\r\n  margin-inline: auto;\r\n\r\n  /* Adapt to THIS box, not to the viewport. The widget can be 310px wide inside a 1920px screen \u2014\r\n     a media query would ask the wrong question and get a confident wrong answer. Container queries\r\n     are the only ones that know the truth, and a shadow root is the ideal place for them. */\r\n  container-type: inline-size;\r\n  container-name: cv;\r\n\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n\r\n  /* The frame is the HOST's call. The CRM's panel already draws `border rounded-xl shadow-2xl`, so\r\n     drawing our own put a card inside a card \u2014 nested chrome, which is always wrong. Defaulting to\r\n     a frame still suits a bare drop-in on a blank page; a host that has its own sets these to\r\n     `none` / `0` and the double edge disappears. */\r\n  border: var(--cv-shell-border, 1px solid var(--cv-border-strong));\r\n  border-radius: var(--cv-shell-radius, var(--cv-radius));\r\n  box-shadow: var(--cv-shell-shadow, 0 4px 24px rgb(0 0 0 / 0.06));\r\n}\r\n\r\n/* Narrow hosts \u2014 a sidebar, a phone-width column. Reclaim the horizontal padding first: at 260px\r\n   the gutters cost more than they give, and a cramped keypad is worse than a tight one. */\r\n@container cv (max-width: 300px) {\r\n  .cv-keypad { padding: 0 0.6rem; gap: 6px; }\r\n  .cv-dial-prefix { padding: 0.7rem 0.6rem 0; }\r\n  .cv-dial-head { padding: 0.3rem 0.6rem 0.6rem; }\r\n  .cv-display { font-size: 1.5rem; }\r\n  .cv-controls-row { gap: 1.1rem; }\r\n\r\n}\r\n\r\n/* Short hosts. The flex chain already lets the keypad absorb what is left, but below this the keys\r\n   stop being tappable \u2014 so buy the height back from the chrome instead of from the keys. */\r\n@container cv (max-height: 440px) {\r\n  .cv-dial-prefix { padding-top: 0.5rem; }\r\n  .cv-dial-head { padding-top: 0.2rem; padding-bottom: 0.4rem; }\r\n  .cv-dial-foot { padding-bottom: 0.5rem; }\r\n  .cv-controls { gap: 0.4rem; padding-bottom: 0.6rem; }\r\n}\r\n\r\n/* The flex chain that makes the layout work: body flexes, views fill it, only the\r\n   keypad/list grows. Without `min-height:0` a grid child refuses to shrink and overflows. */\r\n.cv-body {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.cv-view {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  /* Containing block for `.cv-detail` below \u2014 an absolute overlay must cover exactly THIS tab's\r\n     content, not escape to whatever the next positioned ancestor up the tree happens to be. */\r\n  position: relative;\r\n}\r\n\r\n/* \u2500\u2500 Tab bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-tabs {\r\n  display: flex;\r\n  border-top: 1px solid var(--cv-border);\r\n  background: var(--cv-bg);\r\n  flex-shrink: 0;\r\n}\r\n.cv-tab {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 3px;\r\n  padding: 9px 0 8px;\r\n  background: none;\r\n  border: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  font: inherit;\r\n  transition: color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-tab:hover:not(:disabled) { background: var(--cv-surface); }\r\n.cv-tab[aria-selected='true'] { color: var(--cv-accent-strong); }\r\n.cv-tab:disabled { opacity: 0.35; cursor: not-allowed; }\r\n.cv-tab span { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; }\r\n\r\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-btn {\r\n  font: 600 0.875rem var(--cv-font);\r\n  cursor: pointer;\r\n  padding: 0.5rem 0.9rem;\r\n  border-radius: 10px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  transition: background 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-btn:hover:not(:disabled) { background: var(--cv-surface); }\r\n.cv-btn:active:not(:disabled) { transform: scale(0.97); }\r\n.cv-btn:disabled { opacity: 0.45; cursor: not-allowed; }\r\n.cv-btn--accent {\r\n  background: var(--cv-accent);\r\n  border-color: var(--cv-accent);\r\n  color: var(--cv-accent-contrast);\r\n}\r\n.cv-btn--accent:hover:not(:disabled) { background: var(--cv-accent-strong); }\r\n\r\n/* Round action buttons (answer / hangup / call) */\r\n.cv-round {\r\n  width: 64px;\r\n  height: 64px;\r\n  border-radius: 999px;\r\n  border: none;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;\r\n}\r\n.cv-round:active:not(:disabled) { transform: scale(0.94); }\r\n.cv-round--answer {\r\n  background: var(--cv-accent);\r\n  box-shadow: 0 8px 20px -4px var(--cv-accent-soft);\r\n}\r\n.cv-round--answer:hover:not(:disabled) { background: var(--cv-accent-strong); }\r\n.cv-round--answer:disabled {\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-faint);\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n}\r\n.cv-round--hangup {\r\n  background: var(--cv-danger);\r\n  box-shadow: 0 8px 20px -4px var(--cv-danger-soft);\r\n}\r\n.cv-round--hangup:hover:not(:disabled) { filter: brightness(0.94); }\r\n\r\n/* \u2500\u2500 Dialpad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* The prefix chip, on its own row above the number.\r\n   Sharing a line with the number starves it: chip + erase button eat the middle, and a formatted\r\n   international number needs every pixel. The number is the content; the prefix is a setting. */\r\n.cv-dial-prefix {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 1rem 1rem 0;\r\n}\r\n.cv-dial-head {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0.35rem 1rem 0.75rem;\r\n  gap: 0.25rem;\r\n}\r\n/*\r\n * The outcome of the last attempt, under the number.\r\n *\r\n * ALWAYS in the layout, visible or not. The keypad is `flex: 1` and absorbs whatever height is left,\r\n * so a line that appears and disappears would resize every key and shift the whole grid under the\r\n * user's finger \u2014 mid-dial, which is exactly when this text arrives. Reserving the row costs one line\r\n * of height and buys a keypad that never moves.\r\n */\r\n.cv-dial-outcome {\r\n  flex-shrink: 0;\r\n  margin: 0;\r\n  min-height: 1.15rem;\r\n  padding: 0 1rem;\r\n  text-align: center;\r\n  font-size: 0.78rem;\r\n  line-height: 1.15rem;\r\n  color: var(--cv-muted);\r\n  /*\r\n    One line, always. `error-text.test.ts` caps every outcome at 48 characters so nothing should ever\r\n    reach this \u2014 but a cap depends on whoever writes the next string remembering it, and the failure\r\n    it prevents is not cosmetic: the keypad below is `flex: 1`, so a second line resizes all twelve\r\n    keys and shifts the grid under a finger that is already moving. Truncating is visibly wrong and\r\n    harmless; reflowing the dialpad mid-dial is invisibly wrong and makes the user misdial.\r\n  */\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  /* Muted, not danger: the phone still works. A red line here would read as a broken phone. */\r\n  opacity: 0;\r\n  transition: opacity 150ms ease-out;\r\n}\r\n.cv-dial-outcome[data-shown='true'] {\r\n  opacity: 1;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-dial-outcome {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n.cv-display {\r\n  flex: 1;\r\n  min-width: 0;\r\n  font: 600 1.75rem var(--cv-font);\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.02em;\r\n  text-align: center;\r\n  color: var(--cv-text);\r\n  border: none;\r\n  background: none;\r\n  padding: 0;\r\n  caret-color: var(--cv-accent);\r\n}\r\n.cv-display::placeholder { color: var(--cv-faint); font-weight: 400; }\r\n.cv-display:focus { outline: none; }\r\n\r\n/* The spacer/erase pair keeps the number optically centred. */\r\n.cv-dial-side {\r\n  width: 36px;\r\n  height: 36px;\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  border-radius: 999px;\r\n  transition: color 0.15s ease, opacity 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-dial-side:hover { color: var(--cv-text); }\r\n.cv-dial-side:active { transform: scale(0.9); }\r\n.cv-dial-side[data-hidden='true'] { opacity: 0; pointer-events: none; }\r\n\r\n/* THE layout fix: the keypad flexes to fill, and its rows share the space equally.\r\n   Keys must NOT use aspect-ratio \u2014 that overflows the shell and shoves the call button\r\n   under the tab bar. */\r\n.cv-keypad {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  grid-template-rows: repeat(4, 1fr);\r\n  gap: 8px;\r\n  padding: 0 1rem;\r\n}\r\n.cv-key {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 1px;\r\n  border-radius: var(--cv-radius-key);\r\n  border: 1px solid var(--cv-border);\r\n  background: var(--cv-bg);\r\n  box-shadow: var(--cv-shadow);\r\n  color: var(--cv-text);\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition: background 0.12s ease, transform 0.06s ease;\r\n}\r\n.cv-key:hover { background: var(--cv-surface); }\r\n.cv-key:active { transform: scale(0.95); background: var(--cv-surface-2); }\r\n.cv-key b { font: 500 1.25rem/1 var(--cv-font); }\r\n.cv-key small {\r\n  font-size: 9px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.14em;\r\n  /* Decorative: the letters carry no information the digit doesn't. `faint`, not `muted`. */\r\n  color: var(--cv-faint);\r\n  line-height: 1;\r\n}\r\n\r\n.cv-dial-foot {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 0.75rem 0 1rem;\r\n}\r\n\r\n/* \u2500\u2500 Active call \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-call {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.15rem;\r\n  text-align: center;\r\n  padding: 1rem;\r\n}\r\n\r\n.cv-avatar-wrap { position: relative; margin-bottom: 0.85rem; }\r\n.cv-avatar {\r\n  position: relative;\r\n  width: 68px;\r\n  height: 68px;\r\n  border-radius: 999px;\r\n  /* accent \u2192 accent-strong (emerald 600\u2192700): white initials clear 3.77:1 at EVERY stop. Starting\r\n     the ramp at emerald-500 would look punchier but drop the light end to 2.54:1. */\r\n  background: linear-gradient(135deg, var(--cv-accent) 0%, var(--cv-accent-strong) 100%);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n  font: 700 1.3rem var(--cv-font);\r\n  letter-spacing: -0.01em;\r\n  box-shadow: 0 8px 20px -6px var(--cv-accent-soft);\r\n}\r\n/* A soft halo while ringing \u2014 the one moment worth animating. */\r\n.cv-avatar-ping {\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 999px;\r\n  /* Decorative \u2014 nothing sits on it, so it uses the vivid emerald. */\r\n  background: var(--cv-accent-light);\r\n  opacity: 0.16;\r\n  animation: cv-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;\r\n  pointer-events: none;\r\n}\r\n@keyframes cv-ping {\r\n  0% { transform: scale(1); opacity: 0.22; }\r\n  80%, 100% { transform: scale(1.7); opacity: 0; }\r\n}\r\n.cv-avatar-dot {\r\n  position: absolute;\r\n  bottom: 1px;\r\n  right: 1px;\r\n  width: 14px;\r\n  height: 14px;\r\n  border-radius: 999px;\r\n  background: var(--cv-accent);\r\n  border: 2px solid var(--cv-bg);\r\n}\r\n\r\n.cv-call-name { font-size: 1rem; font-weight: 600; line-height: 1.2; }\r\n.cv-call-number { font-size: 0.75rem; color: var(--cv-muted); margin-top: 2px; }\r\n\r\n.cv-timer {\r\n  display: flex;\r\n  align-items: baseline;\r\n  justify-content: center;\r\n  gap: 1px;\r\n  margin-top: 0.75rem;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-timer b {\r\n  font: 700 2.25rem/1 var(--cv-font);\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.03em;\r\n}\r\n.cv-timer i {\r\n  font: 300 1.75rem/1 var(--cv-font);\r\n  font-style: normal;\r\n  color: var(--cv-accent);\r\n  animation: cv-blink 1.6s ease-in-out infinite;\r\n  margin: 0 1px;\r\n}\r\n@keyframes cv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }\r\n\r\n.cv-call-status {\r\n  margin-top: 0.6rem;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-badge-hold { color: var(--cv-hold); font-weight: 600; }\r\n\r\n/* \u2500\u2500 Pre-connect device check (ringing / dialing) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   Before a call connects there is only ONE other control on screen (Colgar, or\r\n   Rechazar/Contestar) \u2014 putting Dispositivos in that same neighbourhood, even\r\n   spaced out, keeps it a mis-tap away from hanging up or answering. The entry\r\n   chip lives beside the call status instead, removing it from that neighbourhood\r\n   rather than just adding distance within it \u2014 same resting-pill SHAPE as `.cv-cp`\r\n   (CountryPicker), reused rather than invented fresh.\r\n\r\n   Opening it does NOT pop a panel into that same tight space, though \u2014 this\r\n   SDK's real production embed (a 310\xD7520 host panel with its own header eating\r\n   further into that) leaves too little free room around a trigger sitting in\r\n   vertically-centred content for a floating popover to open into without either\r\n   overlapping Colgar/Rechazar/Contestar or clamping itself down to something\r\n   cramped and scrolly for just two rows. `.cv-call-devices-inline` REPLACES the\r\n   avatar/name/status block in `.cv-call` instead (see that JSX's own comment) \u2014\r\n   an inline swap, not an overlay, so it gets the full box, not a leftover sliver.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-call-devices-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  height: 26px;\r\n  padding: 0 0.65rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 999px;\r\n  background: var(--cv-bg);\r\n  color: var(--cv-muted);\r\n  font: 600 0.7rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;\r\n}\r\n.cv-call-devices-chip:hover { background: var(--cv-surface); }\r\n.cv-call-devices-chip:active { transform: scale(0.95); }\r\n\r\n/*\r\n  The entry-point row \u2014 ONE chip today (Dispositivos), up to two once a host configures\r\n  `incomingCallAction` (that one first: who is calling outranks a phone-utility setting). `width:\r\n  100%` + `flex-wrap` on purpose: a host's action label is arbitrary text this component cannot\r\n  assume is short, so two chips sit side by side when they fit and wrap onto their own centred line\r\n  when they do not, rather than overflowing `.cv-call`'s fixed width.\r\n*/\r\n.cv-call-chips {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  gap: 0.5rem;\r\n  margin-top: 0.65rem;\r\n}\r\n\r\n.cv-call-devices-inline {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.9rem;\r\n  /* `.cv-call` centres and centre-aligns its normal (avatar) content \u2014 rows read left-aligned\r\n     everywhere else in the widget (Ajustes, the in-call popover), so this opts back out of both. */\r\n  text-align: left;\r\n  animation: cv-call-devices-in 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-call-devices-in {\r\n  from { opacity: 0; transform: translateY(6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-call-devices-inline { animation: none; }\r\n}\r\n.cv-call-devices-header { display: flex; align-items: center; gap: 0.5rem; }\r\n.cv-call-devices-title { font-size: 0.95rem; font-weight: 600; color: var(--cv-text); }\r\n/* `--cv-muted` on `--cv-bg` \u2014 the same already-verified pairing `.cv-settings-note` uses\r\n   (4.83:1 light / 6.97:1 dark), not a new one. */\r\n.cv-call-devices-context {\r\n  margin: 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n\r\n/* \u2500\u2500 Call controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   TWO TIERS. Hang up is the one action that must never be hunted for, so it sits\r\n   alone, centred, and largest \u2014 the anchor. The secondaries flank above it. They\r\n   used to share a single row, where hang up was just the last button and carried\r\n   the same weight as \"transfer\"; mid-call, that is the wrong hierarchy.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-controls {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  padding: 0.35rem 1rem 1.1rem;\r\n  /* The containing block for `.cv-device-popover` \u2014 see that rule's own comment for why it is\r\n     anchored here rather than to the trigger button. */\r\n  position: relative;\r\n}\r\n.cv-controls-row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 1.5rem;\r\n}\r\n.cv-controls-primary {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 2.75rem;\r\n}\r\n/* Button + its word. The column keeps the label from widening the hit target. */\r\n.cv-ctrl-item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n}\r\n/* 10px, muted: present when you look for it, silent when you don't. An icon-only\r\n   control is a quiz, and mid-call is the worst time to sit one. */\r\n.cv-ctrl-label {\r\n  font-size: 0.625rem;\r\n  line-height: 1;\r\n  color: var(--cv-muted);\r\n  white-space: nowrap;\r\n  user-select: none;\r\n}\r\n.cv-ctrl {\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: 999px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: background 0.15s ease, color 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-ctrl:hover { background: var(--cv-surface); }\r\n.cv-ctrl:active { transform: scale(0.94); }\r\n\r\n/* The ON states say what they MEAN, in the widget's own tokens: muted is danger,\r\n   held is hold, transfer-open is accent. Colour is the state, not decoration. */\r\n.cv-ctrl[data-tone='danger'] {\r\n  background: var(--cv-danger);\r\n  border-color: var(--cv-danger);\r\n  color: #fff;\r\n}\r\n.cv-ctrl[data-tone='hold'] {\r\n  background: var(--cv-hold);\r\n  border-color: var(--cv-hold);\r\n  color: #fff;\r\n}\r\n.cv-ctrl[data-tone='accent'] {\r\n  background: var(--cv-accent-soft);\r\n  border-color: transparent;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-ctrl[data-tone]:hover { filter: brightness(0.95); }\r\n\r\n/* Muted is the one state worth animating: it is invisible, it is easy to forget,\r\n   and the cost of forgetting is talking to nobody. Same halo the avatar rings\r\n   with \u2014 one language, not two. */\r\n.cv-ctrl[data-tone='danger'] {\r\n  position: relative;\r\n}\r\n.cv-ctrl[data-tone='danger']::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 999px;\r\n  background: var(--cv-danger);\r\n  animation: cv-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-ctrl[data-tone='danger']::after { animation: none; opacity: 0; }\r\n}\r\n.cv-ctrl[aria-pressed='true'] {\r\n  background: var(--cv-text);\r\n  color: var(--cv-bg);\r\n  border-color: var(--cv-text);\r\n}\r\n\r\n.cv-transfer {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n  width: 100%;\r\n  padding: 0.85rem 0.25rem 0;\r\n}\r\n\r\n/*\r\n  The in-call device quick-switch (SPEC \xA77 Phase 2 \u2014 device management). Same rows as the Ajustes tab\r\n  (`.cv-settings-row`, via the shared `DevicePickers`), in a popover instead of a page \u2014 the call\r\n  screen already takes over the whole body, so there is no tab bar to reach Ajustes from mid-call.\r\n\r\n  Only the in-call state still uses a floating popover \u2014 before a call connects, Dispositivos is\r\n  inline content instead (`.cv-call-devices-inline`, above), not an overlay. Opens UPWARD (`bottom:\r\n  100%`): the trigger sits at the bottom of the call screen, and there is no room to open downward.\r\n  Anchored to `.cv-controls`'s own horizontal padding \u2014 a container whose width is bounded by ITS\r\n  parent, never the narrow trigger itself \u2014 the same fix CountryPicker's own popover needed (see its\r\n  comment).\r\n*/\r\n.cv-device-popover {\r\n  position: absolute;\r\n  z-index: 20;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.6rem;\r\n  padding: 0.7rem;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n}\r\n.cv-device-popover--above {\r\n  bottom: 100%;\r\n  left: 1rem;\r\n  right: 1rem;\r\n  margin-bottom: 0.6rem;\r\n  transform-origin: bottom center;\r\n  animation: cv-device-pop-in-up 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-device-pop-in-up {\r\n  from { opacity: 0; transform: translateY(4px) scale(0.97); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-device-popover--above { animation: none; }\r\n}\r\n/* No per-row override needed here: `.cv-settings-row`/`.cv-settings-note` carry no border,\r\n   background or padding of their own (see the Settings tab block) \u2014 this popover's own `gap` and\r\n   `padding` are the only spacing in play, which is what keeps it lighter than the full Ajustes\r\n   page's bordered section for what is meant to be a quick, transient panel. */\r\n\r\n/* \u2500\u2500 Lists (contacts / history) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-list-head { flex-shrink: 0; padding: 0.85rem 1rem 0.5rem; }\r\n.cv-search {\r\n  width: 100%;\r\n  padding: 0.5rem 0.75rem;\r\n  border-radius: 10px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: inherit;\r\n  transition: border-color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-search::placeholder { color: var(--cv-muted); }\r\n.cv-search:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }\r\n\r\n/*\r\n  A wrapper around `.cv-search`, not a change to it \u2014 that class is also the transfer-target input\r\n  in CallScreen, which wants neither an icon nor a clear button. `.cv-search--icon` is an ADDITIVE\r\n  modifier on the input itself (padding only), so the base class is byte-for-byte what it was for\r\n  every other consumer.\r\n*/\r\n.cv-search-field { position: relative; display: flex; align-items: center; }\r\n.cv-search--icon { padding-left: 2.15rem; padding-right: 1.85rem; }\r\n.cv-search-icon {\r\n  position: absolute;\r\n  left: 0.75rem;\r\n  color: var(--cv-muted);\r\n  pointer-events: none;\r\n}\r\n.cv-search-clear {\r\n  position: absolute;\r\n  right: 0.5rem;\r\n  width: 22px;\r\n  height: 22px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  border-radius: 999px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-search-clear:hover { color: var(--cv-text); }\r\n.cv-search-clear:active { transform: scale(0.88); }\r\n\r\n/* \u2500\u2500 Historial filters: status (Todas/Perdidas) + person \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-segmented {\r\n  display: flex;\r\n  gap: 2px;\r\n  padding: 2px;\r\n  border-radius: 10px;\r\n  background: var(--cv-surface-2);\r\n  margin-bottom: 0.4rem;\r\n}\r\n.cv-segmented-btn {\r\n  flex: 1;\r\n  padding: 0.35rem 0;\r\n  border: none;\r\n  border-radius: 8px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  font: 600 0.75rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;\r\n}\r\n/* The active segment is stated by its own fill + shadow, not colour alone \u2014 the same reasoning\r\n   `.cv-item-action[data-tone='accent']`'s own comment gives for resting-state colour: a state that\r\n   only differs by hue must still read on a screen that renders neither. */\r\n.cv-segmented-btn[aria-selected='true'] {\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  box-shadow: var(--cv-shadow);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-segmented-btn { transition: none; }\r\n}\r\n\r\n/* The person filter \u2014 same combobox SHAPE as `.cv-cp-*` (CountryPicker): a chip opening a positioned\r\n   popover list with a checkmark on the active row. Not the same CLASSES: the two pickers have nothing\r\n   to do with each other and sharing a namespace would make a future change to one silently reach the\r\n   other. */\r\n.cv-person-filter { position: relative; width: 100%; }\r\n.cv-person-filter-chip {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  width: 100%;\r\n  padding: 0.4rem 0.65rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 10px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-muted);\r\n  font: 500 0.78rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease;\r\n}\r\n.cv-person-filter-chip:hover { background: var(--cv-surface-2); }\r\n/*\r\n  Border only, no fill \u2014 the popover opening and the caret rotating already say \"this is open\";\r\n  painting the whole width of a wide text pill solid green on top of that was the same over-strong\r\n  green the selected row had (see its own comment below). A coloured border is the same restrained\r\n  signal `.cv-search:focus` already uses for \"active\" elsewhere in this file.\r\n*/\r\n.cv-person-filter-chip[aria-expanded='true'] {\r\n  border-color: var(--cv-accent);\r\n}\r\n.cv-person-filter-label {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  text-align: left;\r\n  color: var(--cv-text);\r\n}\r\n.cv-person-filter-caret {\r\n  flex-shrink: 0;\r\n  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n.cv-person-filter-caret[data-open='true'] { transform: rotate(180deg); }\r\n.cv-person-filter-pop {\r\n  position: absolute;\r\n  top: calc(100% + 6px);\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 20;\r\n  max-height: 220px;\r\n  overflow-y: auto;\r\n  padding: 0.25rem;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n  transform-origin: top center;\r\n  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-person-filter-pop { animation: none; }\r\n  .cv-person-filter-caret { transition: none; }\r\n}\r\n.cv-person-filter-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.45rem 0.5rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-person-filter-item:hover { background: var(--cv-surface-2); }\r\n/*\r\n  NOT a solid `--cv-accent-soft` fill \u2014 that read as a wall of saturated green across a wide row,\r\n  much louder than the legacy CRM's own treatment for this exact list (`bg-emerald-50` \u2014 a barely-\r\n  there wash \u2014 plus coloured text, never a strong fill). Coloured, bold text + the checkmark carry\r\n  \"selected\" instead; `--cv-accent-strong` is already verified elsewhere in this file as AA against\r\n  `--cv-surface`, which is what this popover sits on.\r\n*/\r\n.cv-person-filter-item[aria-selected='true'] .cv-person-filter-name {\r\n  font-weight: 600;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-person-filter-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-person-filter-check { color: var(--cv-accent-strong); flex-shrink: 0; }\r\n.cv-person-filter-check[data-on='false'] { opacity: 0; }\r\n\r\n.cv-list {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 0 0.5rem 0.5rem;\r\n}\r\n/*\r\n  Historial's day group header. Sticky within `.cv-list` (its nearest scrolling ancestor \u2014 a plain\r\n  wrapper div between the two does not break that), OPAQUE `--cv-bg` rather than a translucent\r\n  `/85 + backdrop-blur` treatment: it still needs to fully occlude rows scrolling underneath it, and\r\n  a flat match to the list's own background does that with no new CSS feature this file doesn't\r\n  already use elsewhere.\r\n*/\r\n.cv-history-day {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  padding: 0.5rem 0.6rem 0.35rem;\r\n  background: var(--cv-bg);\r\n  color: var(--cv-muted);\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  padding: 0.5rem;\r\n  border-radius: 12px;\r\n  /*\r\n    NOT `cursor: pointer` \u2014 this div has no click handler of its own; only its children\r\n    (`.cv-item-main`, `.cv-item-action`) do, and each already sets its own pointer cursor. Putting\r\n    it here too used to make the WHOLE row's box promise a click \u2014 its own padding, and the flex\r\n    `gap` between avatar/name/button \u2014 none of which does anything when clicked. Most noticeable\r\n    right where one row's padding meets the next, which reads as \"there's something clickable\r\n    between these two contacts\" when there is not.\r\n  */\r\n  transition: background 0.12s ease;\r\n  text-align: left;\r\n  width: 100%;\r\n  border: none;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n.cv-item:hover { background: var(--cv-surface); }\r\n.cv-item-avatar {\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 999px;\r\n  /*\r\n    RADIAL, not diagonal \u2014 deliberately. The initials sit centered, so a radial gradient puts them\r\n    at its lightest point (pure `--cv-surface`) no matter what, while the edges still darken toward\r\n    `--cv-surface-2` for the same cheap depth a diagonal gradient gave. A diagonal version measured\r\n    4.39:1 for `--cv-muted` text at its far corner \u2014 under the 4.5:1 text needs \u2014 because centered\r\n    text's exact position against a DIAGONAL gradient depends on glyph width, not just circle size.\r\n    Centering the gradient on the centered text removes that dependency entirely, structurally,\r\n    rather than nudging a token and hoping the margin holds. Both stops stay tokens, so this is\r\n    still theme-correct for free \u2014 a hardcoded gray gradient would not adapt to dark mode.\r\n  */\r\n  background: radial-gradient(circle, var(--cv-surface), var(--cv-surface-2));\r\n  /*\r\n    Without this, the circle's own boundary can vanish: `.cv-item:hover` sets the ROW background to\r\n    `--cv-surface` \u2014 the exact color the gradient above STARTS at (1.00 contrast ratio, i.e.\r\n    identical) in both themes. `--cv-border-strong` is the same token `.cv-search`'s border already\r\n    uses against this same surface a few rules up \u2014 a pairing already proven visible, not a new one.\r\n  */\r\n  border: 1px solid var(--cv-border-strong);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n  font-weight: 700;\r\n  flex-shrink: 0;\r\n}\r\n/*\r\n  The Historial row's status chip \u2014 WHY a call needs colour at all: direction is already the icon's\r\n  shape (an arrow in/out), but \"did this connect\" is not shape-able, and a flat grey circle made every\r\n  row look identical at a glance. Small badge, not a row-wide fill (that mistake already got made once\r\n  on the person filter \u2014 see its own comment): a 40px circle reads as a status glyph, the same way a\r\n  colored icon-badge does anywhere else; a wide fill reads as decoration competing with the text next\r\n  to it. `--danger-strong`/`--accent-strong` (not the plain base tokens) because the base tokens\r\n  measure BELOW 3:1 non-text contrast against their own `-soft` fill \u2014 `--cv-danger` on\r\n  `--cv-danger-soft` is 2.6:1; `--cv-danger-strong` is 4.47:1 light / 3.62:1 dark, measured.\r\n*/\r\n.cv-item-avatar[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n.cv-item-avatar[data-tone='info'] { background: var(--cv-info-soft); color: var(--cv-info-strong); }\r\n.cv-item-avatar[data-tone='danger'] { background: var(--cv-danger-soft); color: var(--cv-danger-strong); }\r\n/* A button, reset to look like plain content \u2014 the row is a container, not a control. */\r\n.cv-item-main {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: block;\r\n  border: none;\r\n  background: none;\r\n  padding: 0;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n  transition: transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-item-main:disabled { cursor: default; }\r\n.cv-item-main:not(:disabled):active { transform: scale(0.985); }\r\n.cv-item-name {\r\n  display: block;\r\n  font-weight: 600;\r\n  font-size: 0.875rem;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n/*\r\n  14px bold does not clear WCAG's large-text bar (18.66px bold) \u2014 this text needs the full 4.5:1, not\r\n  the 3:1 large-text minimum. `--cv-danger-strong`: 6.47:1 light / 6.46:1 dark against `--cv-bg`,\r\n  measured; the plain `--cv-danger` this used to be was only 3.76:1 light \u2014 a real (if marginal) fail.\r\n*/\r\n.cv-item-name[data-tone='danger'] { color: var(--cv-danger-strong); }\r\n.cv-item-sub {\r\n  display: block;\r\n  font-size: 0.72rem;\r\n  color: var(--cv-muted);\r\n  margin-top: 1px;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.cv-item-sub-outcome { color: var(--cv-danger-strong); }\r\n/*\r\n  Decorative reinforcement, not the sole carrier \u2014 the row's own play button is what says \"this call\r\n  has a recording\" (it only renders when one exists); this is a small hint IN the metadata line that\r\n  the button is worth pressing, so `--cv-faint` (2.5:1, documented above as decorative-only) is the\r\n  right tier here, same reasoning `.cv-empty-icon`/`.cv-gate-mark` already use for icons next to real\r\n  text rather than standing alone.\r\n\r\n  `display: inline-flex` is load-bearing, not decoration \u2014 every OTHER inline icon in this file gets\r\n  an explicit `display` for the same reason: `/react` + `/ui` render straight into the host's light\r\n  DOM (no shadow root), so a host reset like Tailwind Preflight's `svg { display: block }` reaches\r\n  this element directly. Without an explicit override here, that reset knocks the icon onto its own\r\n  line instead of trailing the duration text it is meant to sit beside.\r\n*/\r\n.cv-item-sub-rec {\r\n  display: inline-flex;\r\n  color: var(--cv-faint);\r\n  margin-left: 0.3rem;\r\n  vertical-align: -1px;\r\n}\r\n.cv-item-action {\r\n  width: 34px;\r\n  height: 34px;\r\n  border-radius: 999px;\r\n  border: none;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  transition: background 0.12s ease, color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-item-action:hover { background: var(--cv-accent); color: #fff; }\r\n.cv-item-action:active { transform: scale(0.9); }\r\n/*\r\n  The call action specifically (ContactsTab) \u2014 NOT History's \"play recording\", which shares this\r\n  same class and must stay neutral; a play button has no reason to be accent-colored. Scoped with\r\n  `data-tone`, the same modifier convention `.cv-ctrl[data-tone]` already uses elsewhere in this file.\r\n\r\n  Coloured at REST, not just on hover: a hover-only reveal never fires on a touchscreen, so the one\r\n  affordance that most needs to read as \"you can tap this\" would be invisible on exactly the devices\r\n  a phone widget is likeliest to run on. `accent-strong` is already verified elsewhere in this file\r\n  as AA on a surface; `accent-soft` is the same hover tint `.cv-ctrl[data-tone='accent']` uses, just\r\n  transparent at rest so fifty rows of solid fill never turns the list into a wall of green.\r\n*/\r\n.cv-item-action[data-tone='accent'] { color: var(--cv-accent-strong); }\r\n.cv-item-action[data-tone='accent']:hover { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-item-main, .cv-item-action, .cv-search-clear { transition: none; }\r\n}\r\n\r\n.cv-empty {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100%;\r\n  color: var(--cv-muted);\r\n  text-align: center;\r\n  padding: 2.5rem 1.25rem;\r\n  font-size: 0.82rem;\r\n}\r\n.cv-empty-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-faint);\r\n  margin-bottom: 0.75rem;\r\n}\r\n.cv-empty-title { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--cv-muted); }\r\n/*\r\n  `--cv-muted`, NOT `--cv-faint` \u2014 this file documents faint as \"decorative only... never\r\n  information\" (2.5:1, below AA), and this line IS information: it is the reason the list is\r\n  empty, sometimes echoing the user's own search back to them. `--cv-faint` here measured 2.54:1\r\n  light / 3.70:1 dark against a 4.5:1 bar \u2014 a real failure, not a rounding difference.\r\n*/\r\n.cv-empty-sub { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--cv-muted); }\r\n.cv-empty-spinner {\r\n  margin-bottom: 0.75rem;\r\n  animation: cv-spin 0.8s linear infinite;\r\n  /* A loading spinner's rotation IS the information, with no static equivalent \u2014 unlike this\r\n     file's other motion, it stays exempt from reduced-motion rather than freezing into a shape\r\n     that would just look stuck. Colour comes from `.cv-empty`'s own `color: var(--cv-muted)` \u2014\r\n     the spinner no longer sets its own, now that it sits next to real text instead of standing\r\n     alone: the icon is decorative reinforcement, same as `.cv-empty-icon`, not the sole carrier. */\r\n}\r\n@keyframes cv-spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n/* The scroll-triggered \"load more\" marker \u2014 see `useInfiniteList`. Never visible itself; a small\r\n   height so it has a real box for the `IntersectionObserver` to track. */\r\n.cv-list-sentinel {\r\n  height: 1px;\r\n}\r\n.cv-list-loading-more {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0.75rem 0 0.25rem;\r\n  color: var(--cv-muted);\r\n}\r\n/* Exempt from reduced-motion for the same reason `.cv-empty-spinner` is \u2014 see its own comment. */\r\n.cv-list-loading-more-spinner {\r\n  animation: cv-spin 0.8s linear infinite;\r\n}\r\n\r\n/* \u2500\u2500 Contact detail (overlays the list) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail {\r\n  position: absolute;\r\n  inset: 0;\r\n  /* Above the list's own sticky day-group header (`.cv-history-day`, z-index: 1) \u2014 otherwise\r\n     that header's z-index wins the stacking fight wherever its unscrolled flow position happens\r\n     to land on top of this overlay, and it paints through despite both having an opaque bg. */\r\n  z-index: 2;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--cv-bg);\r\n  animation: cv-detail-in 220ms var(--cv-ease-out) both;\r\n}\r\n@keyframes cv-detail-in {\r\n  from { opacity: 0; transform: translateX(10px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-detail { animation: none; }\r\n}\r\n\r\n.cv-detail-head { flex-shrink: 0; padding: 0.6rem 0.5rem 0; }\r\n.cv-detail-back {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  padding: 0.4rem 0.5rem;\r\n  border: none;\r\n  border-radius: 8px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  font: 600 0.82rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-detail-back:hover { color: var(--cv-text); }\r\n.cv-detail-back:active { transform: scale(0.97); }\r\n\r\n.cv-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.25rem; }\r\n.cv-detail-identity {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n  padding: 0.75rem 0 1.5rem;\r\n}\r\n.cv-detail-avatar {\r\n  width: 72px;\r\n  height: 72px;\r\n  border-radius: 999px;\r\n  /* Same radial + border treatment as `.cv-item-avatar` (see its own comment), just larger. Neutral\r\n     by default \u2014 a contact has no \"status\" to colour. `HistoryDetail` overrides both with `[data-tone]`\r\n     below: a call DOES have one, the same one the list row already shows, so the hero avatar staying\r\n     grey there would be information the list already gave up on repeating here. */\r\n  background: radial-gradient(circle, var(--cv-surface), var(--cv-surface-2));\r\n  border: 1px solid var(--cv-border-strong);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--cv-muted);\r\n  font-size: 1.35rem;\r\n  font-weight: 700;\r\n  margin-bottom: 0.85rem;\r\n}\r\n/* Same token pairs already verified for `.cv-item-avatar[data-tone]` \u2014 size doesn't change a contrast\r\n   ratio, so no new numbers to measure here. */\r\n.cv-detail-avatar[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); border-color: transparent; }\r\n.cv-detail-avatar[data-tone='info'] { background: var(--cv-info-soft); color: var(--cv-info-strong); border-color: transparent; }\r\n.cv-detail-avatar[data-tone='danger'] { background: var(--cv-danger-soft); color: var(--cv-danger-strong); border-color: transparent; }\r\n.cv-detail-name {\r\n  margin: 0;\r\n  font-size: 1.1rem;\r\n  font-weight: 700;\r\n  color: var(--cv-text);\r\n  letter-spacing: -0.01em;\r\n}\r\n.cv-detail-name[data-tone='danger'] { color: var(--cv-danger-strong); }\r\n.cv-detail-meta {\r\n  margin: 0.2rem 0 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n\r\n/* \u2500\u2500 Call detail: recording \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail-recording { margin-bottom: 1rem; }\r\n.cv-detail-recording-label {\r\n  margin: 0 0 0.4rem;\r\n  padding: 0 0.15rem;\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-detail-audio { width: 100%; display: block; }\r\n.cv-detail-audio + .cv-detail-audio { margin-top: 0.5rem; }\r\n.cv-detail-recording-status {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  margin: 0 0 1rem;\r\n  padding: 0.65rem 0.75rem;\r\n  border-radius: 12px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n}\r\n/*\r\n  Text colour only, same neutral `--cv-surface` background the other states use \u2014 NOT a\r\n  `--cv-danger-soft` fill. Measured first, not assumed: `--cv-danger-strong` on `--cv-danger-soft`\r\n  is 3.34:1 light / 3.62:1 dark, well under the 4.5:1 this 0.78rem text needs (it only ever cleared\r\n  the SEPARATE 3:1 non-text bar this token was built for \u2014 an icon on that badge, not body text on\r\n  it). Same lesson the person-filter fix already paid for: a badge-strength pairing that works for an\r\n  icon is not automatically safe for text.\r\n*/\r\n.cv-detail-recording-status--warn { color: var(--cv-danger-strong); }\r\n.cv-detail-recording-spinner { animation: cv-spin 0.8s linear infinite; flex-shrink: 0; }\r\n\r\n/* \u2500\u2500 Call detail: who handled it \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail-handlers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }\r\n.cv-detail-handler-hop { display: inline-flex; align-items: center; gap: 0.3rem; }\r\n.cv-detail-handler-arrow { color: var(--cv-faint); flex-shrink: 0; }\r\n.cv-detail-handler-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  padding: 0.15rem 0.5rem;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-text);\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n}\r\n/* The LAST hop \u2014 the one the call actually ended with \u2014 is the one worth a glance first. */\r\n.cv-detail-handler-chip[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n.cv-detail-handler-ext {\r\n  font-weight: 400;\r\n  font-variant-numeric: tabular-nums;\r\n  opacity: 0.75;\r\n}\r\n\r\n.cv-detail-rows {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  overflow: hidden;\r\n  background: var(--cv-bg);\r\n}\r\n.cv-detail-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  width: 100%;\r\n  padding: 0.7rem 0.85rem;\r\n  border: none;\r\n  border-top: 1px solid var(--cv-border);\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n}\r\n.cv-detail-row:first-child { border-top: none; }\r\n.cv-detail-row--action {\r\n  cursor: pointer;\r\n  transition: background 0.12s ease;\r\n}\r\n.cv-detail-row--action:hover { background: var(--cv-surface); }\r\n.cv-detail-row-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  /*\r\n    Without this the circle nearly vanishes into its own row: `--cv-surface-2` measures only ~1.1:1\r\n    against the row's rest-state background and ~1.05:1 against `--cv-surface`, the color\r\n    `.cv-detail-row--action:hover` sets the ROW to \u2014 both far below a readable boundary, and worse\r\n    than `.cv-item-avatar`/`.cv-detail-avatar` above even manage WITH their border (1.18:1 light /\r\n    1.57:1 dark). Same token, same fix, same reason.\r\n  */\r\n  border: 1px solid var(--cv-border-strong);\r\n  color: var(--cv-muted);\r\n  flex-shrink: 0;\r\n}\r\n.cv-detail-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }\r\n.cv-detail-row-eyebrow {\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-detail-row-value {\r\n  font-size: 0.85rem;\r\n  font-weight: 500;\r\n  color: var(--cv-text);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.cv-detail-row-chevron { color: var(--cv-faint); flex-shrink: 0; }\r\n\r\n.cv-detail-foot { flex-shrink: 0; padding: 0.85rem 1.25rem 1.1rem; }\r\n.cv-detail-call { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }\r\n\r\n/* \u2500\u2500 Settings tab (device selection, SPEC \xA77 Phase 2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-settings-body {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 1rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  /* Generous separation BETWEEN sections, deliberately larger than any gap inside one \u2014 grouping\r\n     only reads as grouping if the space between groups is clearly bigger than the space within one\r\n     (see impeccable's layout guidance: \"tight grouping, generous separation\"). */\r\n  gap: 1.5rem;\r\n}\r\n\r\n/*\r\n  One labeled group (`SettingsSection`): a title, and a bordered body holding its rows. Ajustes\r\n  started as a flat list of two rows with nothing to say they were related \u2014 fine for exactly two\r\n  rows, unreadable the moment an unrelated third setting lands with nothing to tell it apart from\r\n  the device rows above it.\r\n\r\n  The body is ONE card, not a card per row: `.cv-settings-row`/`.cv-settings-note` below carry no\r\n  border or background of their own, only a divider between siblings \u2014 the same shape\r\n  `.cv-detail-rows`/`.cv-detail-row` already use elsewhere in this file, and deliberately not a\r\n  stack of individually-bordered cards (nested-card territory).\r\n*/\r\n.cv-settings-section { display: flex; flex-direction: column; gap: 0.5rem; }\r\n.cv-settings-section-title {\r\n  margin: 0;\r\n  padding: 0 0.2rem;\r\n  font-size: 0.7rem;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-settings-section-body {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n}\r\n.cv-settings-section-body > * { padding: 0.75rem 0.85rem; }\r\n.cv-settings-section-body > *:not(:first-child) { border-top: 1px solid var(--cv-border); }\r\n\r\n.cv-settings-row { display: flex; align-items: center; gap: 0.7rem; }\r\n/* Same treatment as `.cv-detail-row-icon`, same reason \u2014 see its own comment on why the border is\r\n   load-bearing: `--cv-surface-2` alone nearly vanishes into the section's own background. */\r\n.cv-settings-row-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  border: 1px solid var(--cv-border-strong);\r\n  color: var(--cv-muted);\r\n  flex-shrink: 0;\r\n}\r\n.cv-settings-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }\r\n/* Same pairing as `.cv-detail-row-eyebrow` (`--cv-muted` on `--cv-bg`), verified there already. */\r\n.cv-settings-row-label {\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-settings-select {\r\n  width: 100%;\r\n  padding: 0.45rem 0.6rem;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: inherit;\r\n  font-size: 0.85rem;\r\n  transition: border-color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-settings-select:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }\r\n.cv-settings-empty { font-size: 0.85rem; color: var(--cv-muted); }\r\n/* `--cv-muted` on `--cv-bg` \u2014 4.83:1 light / 6.97:1 dark, computed fresh for THIS pairing (the note\r\n   used to sit on `--cv-surface` with its own card; now it sits directly on the section's `--cv-bg`,\r\n   a different background that earns its own check rather than inheriting the old one's number). */\r\n.cv-settings-note {\r\n  margin: 0;\r\n  color: var(--cv-muted);\r\n  font-size: 0.8rem;\r\n  line-height: 1.5;\r\n}\r\n/* Closing note for the tab as a whole, not any one section \u2014 sits directly on `.cv-settings-body`,\r\n   which shares the same `--cv-bg` as `.cv-settings-section-body` above, so the `--cv-muted`-on-\r\n   `--cv-bg` pairing already verified for `.cv-settings-note` carries over unchanged. Centred and\r\n   quieter than a row: this is a footnote about the tab, not a row's worth of content. */\r\n.cv-settings-more {\r\n  margin: 0;\r\n  padding: 0 0.5rem;\r\n  text-align: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n  line-height: 1.5;\r\n}\r\n\r\n/* \u2500\u2500 Centred states (mic gate) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-center {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.85rem;\r\n  padding: 1.75rem;\r\n  text-align: center;\r\n}\r\n.cv-center p { color: var(--cv-muted); margin: 0; font-size: 0.85rem; line-height: 1.5; }\r\n\r\n\r\n/* \"C\xF3mo permitirlo\" \u2014 a native <details> disclosure.\r\n   Collapsed by default: the people who already know where the padlock is should not have to read\r\n   past three steps to get there, and the people who don't get them without leaving the app. */\r\n.cv-help {\r\n  width: 100%;\r\n  margin-top: 0.15rem;\r\n  text-align: left;\r\n}\r\n.cv-help summary {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  justify-content: center;\r\n  width: 100%;\r\n  padding: 0.3rem;\r\n  border-radius: 8px;\r\n  color: var(--cv-muted);\r\n  font: 500 0.75rem var(--cv-font);\r\n  cursor: pointer;\r\n  list-style: none; /* hide the default triangle; the icon is the affordance */\r\n  transition: color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-help summary::-webkit-details-marker { display: none; }\r\n.cv-help summary:hover { color: var(--cv-text); background: var(--cv-surface-2); }\r\n.cv-help[open] summary { color: var(--cv-text); margin-bottom: 0.35rem; }\r\n\r\n.cv-help ol {\r\n  margin: 0;\r\n  padding: 0.6rem 0.7rem 0.6rem 1.6rem;\r\n  background: var(--cv-surface);\r\n  border-radius: 10px;\r\n  color: var(--cv-muted);\r\n  font-size: 0.73rem;\r\n  line-height: 1.55;\r\n}\r\n.cv-help li + li { margin-top: 0.3rem; }\r\n.cv-help li::marker { color: var(--cv-faint); font-variant-numeric: tabular-nums; }\r\n\r\n.cv-help a {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  margin-top: 0.45rem;\r\n  padding-left: 0.1rem;\r\n  color: var(--cv-accent-strong);\r\n  font-size: 0.73rem;\r\n  font-weight: 500;\r\n  text-decoration: none;\r\n}\r\n.cv-help a:hover { text-decoration: underline; }\r\n\r\n/* The panel is the only thing that moves, and only when opened by hand \u2014 so it animates. */\r\n.cv-help[open] ol {\r\n  animation: cv-gate-in 200ms var(--cv-ease-out) both;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-help[open] ol { animation: none; }\r\n}\r\n\r\n/* \u2500\u2500 The permission gate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   Four states, and only ONE of them deserves a designed screen.\r\n\r\n   `checking` resolves in ~100\u2013400 ms. Rendering it immediately means the user\r\n   sees text appear and vanish inside a blink \u2014 a flash reads as jank, not as\r\n   information. So it is delayed 450 ms with `both` fill: invisible during the\r\n   delay, and if the check finishes first (the usual case, and always the case\r\n   when permission is already granted) it is never painted at all.\r\n\r\n   `prompting` is the one the user actually reads and acts on. It gets the\r\n   hierarchy: mark, title, reason, action.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-gate {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.6rem;\r\n  padding: 1.5rem 1.75rem;\r\n  text-align: center;\r\n}\r\n\r\n/* The disc echoes the call avatar \u2014 one visual language, not two. */\r\n.cv-gate-mark {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 52px;\r\n  height: 52px;\r\n  border-radius: 999px;\r\n  background: var(--cv-accent-soft);\r\n  color: var(--cv-accent-strong);\r\n  margin-bottom: 0.15rem;\r\n}\r\n.cv-gate[data-tone='danger'] .cv-gate-mark {\r\n  background: var(--cv-danger-soft);\r\n  color: var(--cv-danger);\r\n}\r\n\r\n.cv-gate-title {\r\n  margin: 0;\r\n  font: 600 0.95rem var(--cv-font);\r\n  color: var(--cv-text);\r\n  letter-spacing: -0.01em;\r\n}\r\n.cv-gate p {\r\n  margin: 0;\r\n  color: var(--cv-muted);\r\n  font-size: 0.8rem;\r\n  line-height: 1.5;\r\n  max-width: 24ch; /* two comfortable lines, not one long one */\r\n}\r\n.cv-gate .cv-btn { margin-top: 0.5rem; }\r\n\r\n/* Entrance. Staggered 45 ms apart: the eye follows mark \u2192 title \u2192 reason \u2192\r\n   action, which is the order it needs to read them in anyway. */\r\n.cv-gate > * {\r\n  animation: cv-gate-in 260ms var(--cv-ease-out) both;\r\n}\r\n.cv-gate > *:nth-child(2) { animation-delay: 45ms; }\r\n.cv-gate > *:nth-child(3) { animation-delay: 90ms; }\r\n.cv-gate > *:nth-child(4) { animation-delay: 135ms; }\r\n\r\n@keyframes cv-gate-in {\r\n  from { opacity: 0; transform: translateY(6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n\r\n/* The checking state: held back, then a quiet fade. No stagger, no movement \u2014\r\n   it is a status, not a screen, and it should barely register. */\r\n.cv-gate[data-state='checking'] > *,\r\n.cv-gate[data-state='warming'] > * {\r\n  animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both;\r\n}\r\n@keyframes cv-gate-wait {\r\n  from { opacity: 0; }\r\n  to   { opacity: 1; }\r\n}\r\n/* A slow breath rather than a spinner: a spinner promises a long wait, and this\r\n   is not one. */\r\n.cv-gate[data-state='checking'] .cv-gate-mark,\r\n.cv-gate[data-state='warming'] .cv-gate-mark {\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-muted);\r\n  animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both,\r\n             cv-breathe 1.8s ease-in-out 450ms infinite;\r\n}\r\n@keyframes cv-breathe {\r\n  0%, 100% { opacity: 1; }\r\n  50%      { opacity: 0.45; }\r\n}\r\n\r\n/* Reduced motion: keep the fade and \u2014 critically \u2014 keep the DELAY, which is\r\n   timing rather than motion and is the whole point. Drop the travel. */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-gate > * {\r\n    animation: cv-gate-wait 200ms var(--cv-ease-out) both;\r\n  }\r\n  .cv-gate[data-state='checking'] .cv-gate-mark,\r\n  .cv-gate[data-state='warming'] .cv-gate-mark {\r\n    animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-avatar-ping,\r\n  .cv-timer i { animation: none; }\r\n  .cv-softphone *,\r\n  .cv-softphone *::before { transition-duration: 0.01ms !important; }\r\n}\r\n\r\n/* `*` and `#` stay in the grid \u2014 a keypad without them is not a keypad \u2014 but they are not part of a\r\n   number (toE164 keeps digits only). Dimmed rather than `disabled` so the grid still reads as a\r\n   keypad and the glyphs stay legible; they become live DTMF on the in-call screen. */\r\n.cv-key[data-dialable='false'] {\r\n  cursor: default;\r\n}\r\n.cv-key[data-dialable='false'] b {\r\n  color: var(--cv-faint);\r\n}\r\n.cv-key[data-dialable='false']:hover {\r\n  background: none;\r\n}\r\n.cv-key[data-dialable='false']:active {\r\n  transform: none;\r\n}\r\n\r\n/* \u2500\u2500 Country picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   The prefix chip + its list. Sits where the old left spacer was, so the number\r\n   stays optically centred against the 36px erase button on the right.\r\n\r\n   The popover is absolutely positioned inside the widget rather than portalled:\r\n   there is nowhere to portal TO inside a shadow root, and the widget already owns\r\n   its stacking context. That also means it cannot be clipped by a host's\r\n   `overflow:hidden` \u2014 the failure SPEC \xA72.6 lists for the CRM's Radix version.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* The anchor spans the whole ROW, not just the chip.\r\n   With the chip centred, anchoring to the chip put the popover's left edge at ~120px and its right\r\n   edge past the widget \u2014 clipped by `.cv-softphone { overflow: hidden }`, which is the classic\r\n   absolute-inside-overflow bug. Anchoring to the full row makes overflowing arithmetically\r\n   impossible: `left:0; right:0` cannot be wider than the row that contains it. */\r\n.cv-cp {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  width: 100%;\r\n}\r\n/* A PILL, with a resting surface and a border.\r\n   This was `border: none; background: none` \u2014 invisible until hover, so it read as a label rather\r\n   than a control. That was survivable when it sat inline beside the number; alone on its own row it\r\n   is just floating text, and nothing says \"you can change this\". A control that changes state has to\r\n   look like one at rest, not only under a cursor that may never arrive (touch has no hover at all). */\r\n.cv-cp-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  height: 30px;\r\n  padding: 0 0.5rem 0 0.4rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 999px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: 600 0.8rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s, border-color 0.15s;\r\n}\r\n.cv-cp-chip:hover { background: var(--cv-surface-2); }\r\n.cv-cp-chip:active { transform: scale(0.95); }\r\n/* Open: the chip is the thing the list belongs to, so it stays visibly engaged while the list is up. */\r\n.cv-cp-chip[aria-expanded='true'] {\r\n  background: var(--cv-accent-soft);\r\n  border-color: var(--cv-accent);\r\n}\r\n.cv-cp-dial {\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.02em;\r\n}\r\n.cv-cp-caret {\r\n  color: var(--cv-faint);\r\n  flex-shrink: 0;\r\n  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n.cv-cp-caret[data-open='true'] { transform: rotate(180deg); }\r\n\r\n/* The country mark. TWO designed states in ONE 20\xD714 box (a flag's own 3:2), so the chip and every\r\n   row keep their rhythm whichever is showing \u2014 nothing reflows when the flags land. The plate is the\r\n   LOADING state (flags are a lazy import) and the offline state, not a fallback: there is no flash of\r\n   something broken, only a designed plate becoming a designed flag, once per session.\r\n   `::part(country-mark)` lets a host restyle either. */\r\n.cv-mark {\r\n  width: 20px;\r\n  height: 14px;\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--cv-font);\r\n}\r\n/* The SVG fills the slot exactly; 3x2 is the flag aspect, so nothing is letterboxed or cropped. */\r\n.cv-mark-svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  border-radius: 2px;\r\n  object-fit: cover;\r\n}\r\n.cv-mark[data-plate='true'] {\r\n  /* The ISO code set into the slot a flag will occupy. */\r\n  font-family: var(--cv-font);\r\n  font-size: 8.5px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.04em;\r\n  color: var(--cv-text);\r\n  background: var(--cv-surface-2);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 3px;\r\n  /* Cap-height letters sit optically high in a 14px box; nudge them back to centre. */\r\n  padding-top: 1px;\r\n}\r\n\r\n.cv-cp-pop {\r\n  position: absolute;\r\n  top: calc(100% + 6px);\r\n  /* Pinned to BOTH row edges, so it is bounded by the container by construction \u2014 no width guess,\r\n     no media query, nothing to clip. `max-width` keeps it from looking stretched on a wide host. */\r\n  left: 0;\r\n  right: 0;\r\n  margin-inline: auto;\r\n  max-width: 260px;\r\n  z-index: 20;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n  overflow: hidden;\r\n  /* Grows from the chip it belongs to, rather than appearing on top of it. */\r\n  transform-origin: top center;\r\n  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-cp-in {\r\n  from { opacity: 0; transform: translateY(-4px) scale(0.97); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-cp-pop { animation: none; }\r\n  .cv-cp-caret { transition: none; }\r\n}\r\n.cv-cp-search {\r\n  flex-shrink: 0;\r\n  padding: 0.5rem 0.65rem;\r\n  border: none;\r\n  border-bottom: 1px solid var(--cv-border);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  outline: none;\r\n}\r\n.cv-cp-search::placeholder { color: var(--cv-faint); }\r\n/* Both states named explicitly. In the CRM the widget mounts via `/ui`, i.e. in the LIGHT DOM \u2014 none\r\n   of the shadow-DOM isolation the web-component playground proves applies there, so a host's focus\r\n   ring (or the browser's own) can land on our input. The accent underline IS the focus indicator. */\r\n.cv-cp-search:focus,\r\n.cv-cp-search:focus-visible {\r\n  outline: none;\r\n  border-bottom-color: var(--cv-accent);\r\n  border-bottom-width: 2px;\r\n  padding-bottom: calc(0.5rem - 1px);\r\n}\r\n.cv-cp-list {\r\n  overflow-y: auto;\r\n  max-height: 220px;\r\n  padding: 0.25rem;\r\n}\r\n.cv-cp-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.4rem 0.45rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-cp-item:hover { background: var(--cv-surface-2); }\r\n/* The current country is stated by the row, not only by a tick at the far right. */\r\n.cv-cp-item[aria-selected='true'] { background: var(--cv-accent-soft); }\r\n.cv-cp-item[aria-selected='true'] .cv-cp-name { font-weight: 600; }\r\n.cv-cp-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-cp-item .cv-cp-dial {\r\n  color: var(--cv-muted);\r\n  font-weight: 400;\r\n}\r\n.cv-cp-check { color: var(--cv-accent-strong); flex-shrink: 0; }\r\n.cv-cp-check[data-on='false'] { opacity: 0; }\r\n.cv-cp-empty {\r\n  margin: 0;\r\n  padding: 1rem 0.5rem;\r\n  text-align: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n}\r\n";
+var softphone_default = "/**\r\n * @coventia/softphone/styles.css\r\n *\r\n * The theming contract (SPEC \xA72.6) + all component styles. A host restyles the softphone by\r\n * overriding the `--cv-*` custom properties \u2014 which are INHERITED, so they cross the shadow boundary\r\n * of `<coventia-softphone>` by design (the host's own CSS *selectors* do not, which is what stops a\r\n * stray `button { width:100% }` from destroying the dialpad).\r\n *\r\n * Defaults match the Coventia product: light surface, emerald accent, soft rounded key cards.\r\n *\r\n * Reseller:  coventia-softphone { --cv-accent:#7c3aed; --cv-bg:#0b0b0f; }\r\n * CRM (shadcn bridge, ~15 lines, dark mode included):\r\n *   .cv-softphone { --cv-bg:hsl(var(--background)); --cv-text:hsl(var(--foreground)); \u2026 }\r\n *\r\n * TYPOGRAPHY NOTE: `--cv-font` is a system stack on purpose. An embedded widget should inherit its\r\n * host's type, not force a webfont into someone else's app; hosts override the token if they want.\r\n *\r\n * Strings are Spanish-only (SPEC \xA72.4). No i18n.\r\n */\r\n\r\n/*\r\n * The custom element's own box.\r\n *\r\n * A custom element is `display: inline` by default and has NO size \u2014 and the widget inside now fills\r\n * its host rather than asserting 340\xD7520, so without this the element would render to ZERO. The\r\n * drop-in promise is \"one tag and it works\", which means the TAG must carry a box.\r\n *\r\n * These are defaults, not decisions: they sit on `:host`, so any host stylesheet outranks them \u2014\r\n *\r\n *   coventia-softphone { width: 100%; height: 100%; }   \u2190 a sidebar\r\n *   coventia-softphone { height: 600px; }               \u2190 taller\r\n *\r\n * React consumers never see this: they import `/ui` and their own wrapper states the box (the CRM's\r\n * PhoneDialer does exactly that).\r\n */\r\n:host {\r\n  display: block;\r\n  width: 340px;\r\n  height: 520px;\r\n}\r\n\r\n/* React's container inside the shadow root \u2014 element path only; inert everywhere else.\r\n *\r\n * It must pass the host's height straight through. `.cv-softphone` below is `height: 100%`, and a\r\n * percentage height resolves against the PARENT: leave this div at its default `auto` and that 100%\r\n * silently becomes `auto` too, so the widget collapses to its content height and the host's `height`\r\n * is ignored. What you see is a short card stranded in a taller box \u2014 which reads as a broken widget,\r\n * not as a broken wrapper. */\r\n.cv-mount {\r\n  height: 100%;\r\n}\r\n\r\n:host,\r\n.cv-softphone {\r\n  /* Surface */\r\n  --cv-bg: #ffffff;\r\n  --cv-surface: #f9fafb;\r\n  --cv-surface-2: #f3f4f6;\r\n  --cv-border: #f3f4f6;\r\n  --cv-border-strong: #e5e7eb;\r\n\r\n  /* Text \u2014 three tiers, split by CONTRAST DUTY, not by taste:\r\n     `text`  informational primary        17.7:1\r\n     `muted` informational secondary       4.8:1  (AA \u2014 phone numbers, timestamps, tab labels)\r\n     `faint` DECORATIVE only               2.5:1  (keypad letters, placeholder \u2014 never information)\r\n     The legacy used gray-400 for all secondary text, which fails AA at 2.54:1. Splitting the tier\r\n     keeps the look while making the informational text legible. */\r\n  --cv-text: #111827;\r\n  --cv-muted: #6b7280;\r\n  --cv-faint: #9ca3af;\r\n\r\n  /* Intent \u2014 emerald. Split by CONTRAST DUTY, because one \"brand green\" cannot do all three jobs:\r\n     `accent`        FILL that carries a white glyph  \u2192 emerald-600, white 3.77:1 \u2713\r\n                     (emerald-500 is the prettier brand green but white on it is 2.54:1 \u2014 the\r\n                      call button's phone icon would fail WCAG non-text contrast. Measured, not guessed.)\r\n     `accent-strong` emerald AS TEXT on a surface     \u2192 emerald-700, 5.48:1 \u2713 for the 10px tab label\r\n     `accent-light`  DECORATIVE only (the ring halo)  \u2014 never carries text, so it stays vivid */\r\n  --cv-accent: #059669;\r\n  --cv-accent-strong: #047857;\r\n  --cv-accent-light: #10b981;\r\n  --cv-accent-soft: #a7f3d0;\r\n  --cv-accent-contrast: #ffffff;\r\n  --cv-danger: #ef4444;\r\n  /* `--cv-danger` ITSELF fails 3:1 non-text contrast against `--cv-danger-soft` (2.6:1, measured) \u2014\r\n     the same AS-TEXT/on-a-tinted-surface split `accent` already has, `danger` was just missing until\r\n     the Historial tab's status badges needed it. Darker on light (mirrors `accent-strong`), LIGHTER on\r\n     dark (red-400) \u2014 same inversion `accent-strong` documents above, same reason: emphasis on a dark\r\n     surface means more light, not less.\r\n     red-700 (#b91c1c) was the first pick here and overshot both minimums (6.47:1 text, 4.47:1 badge)\r\n     enough to read as a dark, brownish red rather than red \u2014 red-600 clears both with real margin\r\n     still (4.83:1 / 3.34:1, measured) and looks like red. */\r\n  --cv-danger-strong: #dc2626;\r\n  --cv-danger-soft: #fecaca;\r\n  /* A third status hue, sky \u2014 for the Historial row status chip specifically: an outgoing call that\r\n     WAS answered gets its own colour rather than sharing `accent`, matching the legacy CRM's own\r\n     three-way split (emerald/sky/rose) that this file's earlier restrained accent-only-for-\"fine\"\r\n     version had collapsed away. Same strong/soft split, same inversion, as `accent`/`danger` above \u2014\r\n     4.47:1 light / 4.42:1 dark against `-soft`, measured. */\r\n  --cv-info: #0284c7;\r\n  --cv-info-strong: #0369a1;\r\n  --cv-info-soft: #bae6fd;\r\n  --cv-hold: #6366f1;\r\n\r\n  /* Shape & type */\r\n  --cv-radius: 16px;\r\n  /* Strong ease-out. The built-in CSS easings are too weak to read as intentional. */\r\n  --cv-ease-out: cubic-bezier(0.23, 1, 0.32, 1);\r\n  --cv-radius-key: 16px;\r\n  --cv-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n  --cv-font-size: 14px;\r\n  --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);\r\n\r\n  color: var(--cv-text);\r\n  font-family: var(--cv-font);\r\n  font-size: var(--cv-font-size);\r\n}\r\n\r\n/**\r\n * Dark theme \u2014 matched to the Coventia product's own dark tokens, not invented.\r\n *\r\n * The CRM defines `--background: 240 10% 10%` (#17171c) with surfaces at 15.9% (#27272a) and borders\r\n * at 25.9% (#404044) \u2014 the zinc/240-hue family. An earlier draft here used a near-black\r\n * (#0f0f13, ~half the luminance of the product's background) with 2%-luminance borders that were\r\n * effectively invisible. That is the \"black tonality\" that read wrong: right hue, wrong lightness.\r\n *\r\n * Note the accent INVERTS: on light, `accent-strong` is darker than `accent` (emerald-700); on dark\r\n * it must be LIGHTER (emerald-400), because emphasis on a dark surface means more light, not less.\r\n * Same token, opposite direction \u2014 miss this and the timer/active tab sink into the background.\r\n *\r\n * \u2500\u2500 HOW THE THEME IS CHOSEN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n * By default it follows the OS (`prefers-color-scheme`). But a host must be able to PIN it: the\r\n * Coventia CRM toggles dark with a class (next-themes), not the OS setting \u2014 so a user with a dark\r\n * OS but the CRM in light mode would otherwise get a dark widget inside a light app.\r\n *\r\n *   <SoftphoneWidget theme=\"light\" />   \u2192 data-cv-theme=\"light\"  \u2014 always light\r\n *   <SoftphoneWidget theme=\"dark\" />    \u2192 data-cv-theme=\"dark\"   \u2014 always dark\r\n *   <SoftphoneWidget />                 \u2192 follows the OS\r\n *\r\n * To follow the HOST's theme rather than the OS, pass the host's current theme through, e.g.\r\n * next-themes: `const { resolvedTheme } = useTheme(); <SoftphoneWidget theme={resolvedTheme} />`.\r\n *\r\n * The dark block is duplicated below (OS-driven vs. pinned) on purpose: plain CSS has no way to\r\n * share a declaration block across a media query and a selector, and the honest duplication beats a\r\n * clever custom-property toggle nobody can debug.\r\n */\r\n@media (prefers-color-scheme: dark) {\r\n  :host(:not([data-cv-theme='light'])),\r\n  .cv-softphone:not([data-cv-theme='light']) {\r\n    --cv-bg: #17171c;          /* CRM --background            240 10% 10%  */\r\n    --cv-surface: #202027;     /* between bg and secondary                 */\r\n    --cv-surface-2: #27272a;   /* CRM --secondary/--muted     240 3.7% 15.9% */\r\n    --cv-border: #2e2e33;\r\n    --cv-border-strong: #404044; /* CRM --border              240 3.7% 25.9% */\r\n    --cv-text: #fafafa;        /* CRM --foreground            0 0% 98%     */\r\n    --cv-muted: #a1a1aa;       /* CRM --muted-foreground      240 5% 64.9% \u2192 6.97:1 AA */\r\n    --cv-faint: #71717a;       /* decorative only                          */\r\n    --cv-accent-strong: #34d399; /* emerald-400 \u2014 9.29:1 on #17171c        */\r\n    --cv-accent-light: #34d399;  /* the halo reads brighter on dark          */\r\n    --cv-accent-soft: #065f46;   /* glows must darken on dark, not glare     */\r\n    --cv-danger-strong: #f87171; /* red-400 \u2014 LIGHTER than --cv-danger, same inversion as accent-strong */\r\n    --cv-danger-soft: #7f1d1d;\r\n    --cv-info-strong: #38bdf8;   /* sky-400 \u2014 same inversion, same reason */\r\n    --cv-info-soft: #0c4a6e;\r\n    --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.4);\r\n  }\r\n}\r\n\r\n/* Pinned dark \u2014 wins regardless of the OS setting. */\r\n:host([data-cv-theme='dark']),\r\n.cv-softphone[data-cv-theme='dark'] {\r\n  --cv-bg: #17171c;\r\n  --cv-surface: #202027;\r\n  --cv-surface-2: #27272a;\r\n  --cv-border: #2e2e33;\r\n  --cv-border-strong: #404044;\r\n  --cv-text: #fafafa;\r\n  --cv-muted: #a1a1aa;\r\n  --cv-faint: #71717a;\r\n  --cv-accent-strong: #34d399;\r\n  --cv-accent-light: #34d399;\r\n  --cv-accent-soft: #065f46;\r\n  --cv-danger-strong: #f87171;\r\n  --cv-danger-soft: #7f1d1d;\r\n  --cv-info-strong: #38bdf8;\r\n  --cv-info-soft: #0c4a6e;\r\n  --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.4);\r\n}\r\n\r\n.cv-softphone,\r\n.cv-softphone *,\r\n.cv-softphone *::before,\r\n.cv-softphone *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* \u2500\u2500 Shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-softphone {\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  /* FILL the box the host gives us; do not assert one.\r\n     This was `width: 340px; height: 520px`, which is a component telling its host how big its\r\n     layout is. The CRM's panel is 310 wide, so the third keypad column was simply cut off \u2014 and no\r\n     amount of theming could have fixed it, because the widget was not asking. A component in\r\n     someone else's layout accepts a size. */\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  /* \u2026but a dialpad is not a spreadsheet. Given 900px it should not become a 900px dialpad with\r\n     300px keys; it should be itself, centred. Cap and centre rather than stretch. */\r\n  max-width: var(--cv-max-width, 420px);\r\n  margin-inline: auto;\r\n\r\n  /* Adapt to THIS box, not to the viewport. The widget can be 310px wide inside a 1920px screen \u2014\r\n     a media query would ask the wrong question and get a confident wrong answer. Container queries\r\n     are the only ones that know the truth, and a shadow root is the ideal place for them. */\r\n  container-type: inline-size;\r\n  container-name: cv;\r\n\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n  /* The containing block for `.cv-transfer-notices` \u2014 it overlays this whole shell, top edge to top\r\n     edge, not just `.cv-body`, so it reads as one seamless panel rather than a strip that starts a few\r\n     pixels short of the shell's own rounded corner. */\r\n  position: relative;\r\n\r\n  /* The frame is the HOST's call. The CRM's panel already draws `border rounded-xl shadow-2xl`, so\r\n     drawing our own put a card inside a card \u2014 nested chrome, which is always wrong. Defaulting to\r\n     a frame still suits a bare drop-in on a blank page; a host that has its own sets these to\r\n     `none` / `0` and the double edge disappears. */\r\n  border: var(--cv-shell-border, 1px solid var(--cv-border-strong));\r\n  border-radius: var(--cv-shell-radius, var(--cv-radius));\r\n  box-shadow: var(--cv-shell-shadow, 0 4px 24px rgb(0 0 0 / 0.06));\r\n}\r\n\r\n/* Narrow hosts \u2014 a sidebar, a phone-width column. Reclaim the horizontal padding first: at 260px\r\n   the gutters cost more than they give, and a cramped keypad is worse than a tight one. */\r\n@container cv (max-width: 300px) {\r\n  .cv-keypad { padding: 0 0.6rem; gap: 6px; }\r\n  .cv-dial-prefix { padding: 0.7rem 0.6rem 0; }\r\n  .cv-dial-head { padding: 0.3rem 0.6rem 0.6rem; }\r\n  .cv-display { font-size: 1.5rem; }\r\n  .cv-controls-row { gap: 1.1rem; }\r\n\r\n}\r\n\r\n/* Short hosts. The flex chain already lets the keypad absorb what is left, but below this the keys\r\n   stop being tappable \u2014 so buy the height back from the chrome instead of from the keys. */\r\n@container cv (max-height: 440px) {\r\n  .cv-dial-prefix { padding-top: 0.5rem; }\r\n  .cv-dial-head { padding-top: 0.2rem; padding-bottom: 0.4rem; }\r\n  .cv-dial-foot { padding-bottom: 0.5rem; }\r\n  .cv-controls { gap: 0.4rem; padding-bottom: 0.6rem; }\r\n}\r\n\r\n/* The flex chain that makes the layout work: body flexes, views fill it, only the\r\n   keypad/list grows. Without `min-height:0` a grid child refuses to shrink and overflows. */\r\n.cv-body {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.cv-view {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  /* Containing block for `.cv-detail` below \u2014 an absolute overlay must cover exactly THIS tab's\r\n     content, not escape to whatever the next positioned ancestor up the tree happens to be. */\r\n  position: relative;\r\n}\r\n\r\n/* \u2500\u2500 Tab bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-tabs {\r\n  display: flex;\r\n  border-top: 1px solid var(--cv-border);\r\n  background: var(--cv-bg);\r\n  flex-shrink: 0;\r\n}\r\n.cv-tab {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 3px;\r\n  padding: 9px 0 8px;\r\n  background: none;\r\n  border: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  font: inherit;\r\n  transition: color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-tab:hover:not(:disabled) { background: var(--cv-surface); }\r\n.cv-tab[aria-selected='true'] { color: var(--cv-accent-strong); }\r\n.cv-tab:disabled { opacity: 0.35; cursor: not-allowed; }\r\n.cv-tab span { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; }\r\n\r\n/* \u2500\u2500 Transfer outcome notices (Phase A \u2014 transfer-outcome-relay.md \xA75.5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/*\r\n  A persistent, dismissable banner OVER `.cv-body`, never a toast and never auto-dismissed \u2014 it carries\r\n  an action, and WCAG 2.2.1 requires a time limit to be removable, adjustable or extended.\r\n\r\n  Overlaps rather than reserving its own height, the same reasoning `.cv-dial-outcome`'s own comment\r\n  already gives for why the widget never lets a line of text resize the keypad under a moving finger \u2014\r\n  here that principle cuts the other way: appearing costs nothing but a repaint, not a reflow, so the\r\n  widget's overall height stays identical whether a notice is showing or not, exactly like `.cv-detail`\r\n  overlaying `.cv-body`'s own list rather than pushing it down. It sits over whatever the current tab\r\n  happens to be showing (most often the dialer's country picker and number field \u2014 an acceptable loss:\r\n  the agent is not expected to start a fresh manual dial before dealing with a transfer that just failed\r\n  to connect), which is also why it outranks `.cv-detail` in `z-index`.\r\n\r\n  `[data-has-notices='false']` collapses to zero footprint: the element stays mounted (so its\r\n  `role=\"status\"` region exists before the FIRST notice ever arrives \u2014 an aria-live region inserted at\r\n  the same moment as its own content is not reliably announced), but an idle widget, the common case,\r\n  covers nothing and costs no paint either.\r\n*/\r\n.cv-transfer-notices {\r\n  position: absolute;\r\n  inset: 0 0 auto 0;\r\n  z-index: 3; /* above `.cv-detail`'s 2 \u2014 this is the higher-priority thing on screen */\r\n}\r\n.cv-transfer-notices[data-has-notices='true'] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.5rem;\r\n  padding: 0.6rem 0.75rem;\r\n  background: var(--cv-bg);\r\n  box-shadow: var(--cv-shadow);\r\n  animation: cv-transfer-notices-in 200ms var(--cv-ease-out) both;\r\n}\r\n@keyframes cv-transfer-notices-in {\r\n  from { opacity: 0; transform: translateY(-6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-transfer-notices[data-has-notices='true'] { animation: none; }\r\n}\r\n.cv-transfer-notices-count {\r\n  margin: 0;\r\n  font: 600 0.72rem var(--cv-font);\r\n  color: var(--cv-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-transfer-notice {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 0.6rem;\r\n  padding: 0.65rem 0.7rem;\r\n  border-radius: var(--cv-radius-key);\r\n  border: 1px solid var(--cv-danger-soft);\r\n  background: var(--cv-surface);\r\n}\r\n/* Same shape as `.cv-gate-mark`, smaller \u2014 one visual language for \"here is a status\", not two. */\r\n.cv-transfer-notice-mark {\r\n  flex-shrink: 0;\r\n  display: grid;\r\n  place-items: center;\r\n  width: 30px;\r\n  height: 30px;\r\n  border-radius: 999px;\r\n  background: var(--cv-danger-soft);\r\n  color: var(--cv-danger);\r\n}\r\n.cv-transfer-notice-body { flex: 1; min-width: 0; }\r\n/*\r\n  Title shares its row with only the dismiss button (24px) \u2014 not the whole card's width, and not the\r\n  \"Llamar de vuelta\" button, which gets its own row below (`.cv-transfer-notice-footer`). The original\r\n  layout put mark + title + subtitle + a full button all in one flex row, leaving the title as little as\r\n  ~80px to wrap into at the real ~340px embed width \u2014 nearly every word landed on its own line.\r\n  `align-items: flex-start` keeps the dismiss pinned to the first line even when the title wraps to two.\r\n*/\r\n.cv-transfer-notice-header { display: flex; align-items: flex-start; gap: 0.4rem; }\r\n.cv-transfer-notice-title {\r\n  flex: 1;\r\n  min-width: 0;\r\n  margin: 0;\r\n  font: 600 0.82rem var(--cv-font);\r\n  color: var(--cv-text);\r\n  line-height: 1.35;\r\n}\r\n.cv-transfer-notice-subtitle {\r\n  margin: 0.15rem 0 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  line-height: 1.35;\r\n}\r\n/* Age and the callback button share a row too, same reasoning as the header \u2014 a short fixed-width\r\n   timestamp beside a content-sized button, neither one fighting the title for space above. */\r\n.cv-transfer-notice-footer {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 0.5rem;\r\n  margin-top: 0.35rem;\r\n}\r\n.cv-transfer-notice-age { margin: 0; font-size: 0.7rem; color: var(--cv-faint); flex-shrink: 0; }\r\n/*\r\n  `.cv-btn.cv-transfer-notice-callback` \u2014 TWO classes, not one. Equal-specificity selectors resolve by\r\n  source order, and this rule used to lose its `padding`/`font-size` to the shared `.cv-btn` rule below\r\n  simply because that one appears later in the file; the button rendered at full default CTA size\r\n  instead of this smaller, secondary one, which is what actually forced the title into that ~80px\r\n  column above. The extra class is what makes this override win regardless of source order.\r\n*/\r\n.cv-btn.cv-transfer-notice-callback {\r\n  flex-shrink: 0;\r\n  padding: 0.35rem 0.6rem;\r\n  font-size: 0.75rem;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  white-space: nowrap;\r\n}\r\n/* Same round icon-only shape as `.cv-search-clear` \u2014 one dismiss affordance, not a new one. */\r\n.cv-transfer-notice-dismiss {\r\n  flex-shrink: 0;\r\n  width: 24px;\r\n  height: 24px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  border-radius: 999px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, background 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-transfer-notice-dismiss:hover { color: var(--cv-text); background: var(--cv-surface-2); }\r\n.cv-transfer-notice-dismiss:active { transform: scale(0.88); }\r\n\r\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-btn {\r\n  font: 600 0.875rem var(--cv-font);\r\n  cursor: pointer;\r\n  padding: 0.5rem 0.9rem;\r\n  border-radius: 10px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  transition: background 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-btn:hover:not(:disabled) { background: var(--cv-surface); }\r\n.cv-btn:active:not(:disabled) { transform: scale(0.97); }\r\n.cv-btn:disabled { opacity: 0.45; cursor: not-allowed; }\r\n.cv-btn--accent {\r\n  background: var(--cv-accent);\r\n  border-color: var(--cv-accent);\r\n  color: var(--cv-accent-contrast);\r\n}\r\n.cv-btn--accent:hover:not(:disabled) { background: var(--cv-accent-strong); }\r\n\r\n/* Round action buttons (answer / hangup / call) */\r\n.cv-round {\r\n  width: 64px;\r\n  height: 64px;\r\n  border-radius: 999px;\r\n  border: none;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;\r\n}\r\n.cv-round:active:not(:disabled) { transform: scale(0.94); }\r\n.cv-round--answer {\r\n  background: var(--cv-accent);\r\n  box-shadow: 0 8px 20px -4px var(--cv-accent-soft);\r\n}\r\n.cv-round--answer:hover:not(:disabled) { background: var(--cv-accent-strong); }\r\n.cv-round--answer:disabled {\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-faint);\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n}\r\n.cv-round--hangup {\r\n  background: var(--cv-danger);\r\n  box-shadow: 0 8px 20px -4px var(--cv-danger-soft);\r\n}\r\n.cv-round--hangup:hover:not(:disabled) { filter: brightness(0.94); }\r\n\r\n/* \u2500\u2500 Dialpad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* The prefix chip, on its own row above the number.\r\n   Sharing a line with the number starves it: chip + erase button eat the middle, and a formatted\r\n   international number needs every pixel. The number is the content; the prefix is a setting. */\r\n.cv-dial-prefix {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 1rem 1rem 0;\r\n}\r\n.cv-dial-head {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0.35rem 1rem 0.75rem;\r\n  gap: 0.25rem;\r\n}\r\n/*\r\n * The outcome of the last attempt, under the number.\r\n *\r\n * ALWAYS in the layout, visible or not. The keypad is `flex: 1` and absorbs whatever height is left,\r\n * so a line that appears and disappears would resize every key and shift the whole grid under the\r\n * user's finger \u2014 mid-dial, which is exactly when this text arrives. Reserving the row costs one line\r\n * of height and buys a keypad that never moves.\r\n */\r\n.cv-dial-outcome {\r\n  flex-shrink: 0;\r\n  margin: 0;\r\n  min-height: 1.15rem;\r\n  padding: 0 1rem;\r\n  text-align: center;\r\n  font-size: 0.78rem;\r\n  line-height: 1.15rem;\r\n  color: var(--cv-muted);\r\n  /*\r\n    One line, always. `error-text.test.ts` caps every outcome at 48 characters so nothing should ever\r\n    reach this \u2014 but a cap depends on whoever writes the next string remembering it, and the failure\r\n    it prevents is not cosmetic: the keypad below is `flex: 1`, so a second line resizes all twelve\r\n    keys and shifts the grid under a finger that is already moving. Truncating is visibly wrong and\r\n    harmless; reflowing the dialpad mid-dial is invisibly wrong and makes the user misdial.\r\n  */\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  /* Muted, not danger: the phone still works. A red line here would read as a broken phone. */\r\n  opacity: 0;\r\n  transition: opacity 150ms ease-out;\r\n}\r\n.cv-dial-outcome[data-shown='true'] {\r\n  opacity: 1;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-dial-outcome {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n.cv-display {\r\n  flex: 1;\r\n  min-width: 0;\r\n  font: 600 1.75rem var(--cv-font);\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.02em;\r\n  text-align: center;\r\n  color: var(--cv-text);\r\n  border: none;\r\n  background: none;\r\n  padding: 0;\r\n  caret-color: var(--cv-accent);\r\n}\r\n.cv-display::placeholder { color: var(--cv-faint); font-weight: 400; }\r\n.cv-display:focus { outline: none; }\r\n\r\n/* The spacer/erase pair keeps the number optically centred. */\r\n.cv-dial-side {\r\n  width: 36px;\r\n  height: 36px;\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  border-radius: 999px;\r\n  transition: color 0.15s ease, opacity 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-dial-side:hover { color: var(--cv-text); }\r\n.cv-dial-side:active { transform: scale(0.9); }\r\n.cv-dial-side[data-hidden='true'] { opacity: 0; pointer-events: none; }\r\n\r\n/* THE layout fix: the keypad flexes to fill, and its rows share the space equally.\r\n   Keys must NOT use aspect-ratio \u2014 that overflows the shell and shoves the call button\r\n   under the tab bar. */\r\n.cv-keypad {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  grid-template-rows: repeat(4, 1fr);\r\n  gap: 8px;\r\n  padding: 0 1rem;\r\n}\r\n.cv-key {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 1px;\r\n  border-radius: var(--cv-radius-key);\r\n  border: 1px solid var(--cv-border);\r\n  background: var(--cv-bg);\r\n  box-shadow: var(--cv-shadow);\r\n  color: var(--cv-text);\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition: background 0.12s ease, transform 0.06s ease;\r\n}\r\n.cv-key:hover { background: var(--cv-surface); }\r\n.cv-key:active { transform: scale(0.95); background: var(--cv-surface-2); }\r\n.cv-key b { font: 500 1.25rem/1 var(--cv-font); }\r\n.cv-key small {\r\n  font-size: 9px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.14em;\r\n  /* Decorative: the letters carry no information the digit doesn't. `faint`, not `muted`. */\r\n  color: var(--cv-faint);\r\n  line-height: 1;\r\n}\r\n\r\n.cv-dial-foot {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 0.75rem 0 1rem;\r\n}\r\n\r\n/* \u2500\u2500 Active call \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-call {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.15rem;\r\n  text-align: center;\r\n  padding: 1rem;\r\n  /*\r\n    A REAL bug, found live (plan T7): the transfer picker's agent list can make this box's content\r\n    taller than the space `flex: 1` actually allocates it \u2014 the avatar/name/timer/status ABOVE the\r\n    picker are still shown while transferring, unlike `.cv-call-devices-inline`'s own \"swap the\r\n    content\" fix for the pre-connect devices screen. Without this, the overflow painted straight past\r\n    `.cv-call`'s own shrunk box and onto `.cv-controls` below it \u2014 not scroll, actual overlap, controls\r\n    rendered ON TOP of list rows. `overflow-y: auto` keeps any excess inside THIS box, scrollable,\r\n    exactly like `.cv-presence-list`'s own internal scroll already does for the list itself.\r\n  */\r\n  overflow-y: auto;\r\n}\r\n\r\n.cv-avatar-wrap { position: relative; margin-bottom: 0.85rem; }\r\n.cv-avatar {\r\n  position: relative;\r\n  width: 68px;\r\n  height: 68px;\r\n  border-radius: 999px;\r\n  /* accent \u2192 accent-strong (emerald 600\u2192700): white initials clear 3.77:1 at EVERY stop. Starting\r\n     the ramp at emerald-500 would look punchier but drop the light end to 2.54:1. */\r\n  background: linear-gradient(135deg, var(--cv-accent) 0%, var(--cv-accent-strong) 100%);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n  font: 700 1.3rem var(--cv-font);\r\n  letter-spacing: -0.01em;\r\n  box-shadow: 0 8px 20px -6px var(--cv-accent-soft);\r\n}\r\n/* A soft halo while ringing \u2014 the one moment worth animating. */\r\n.cv-avatar-ping {\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 999px;\r\n  /* Decorative \u2014 nothing sits on it, so it uses the vivid emerald. */\r\n  background: var(--cv-accent-light);\r\n  opacity: 0.16;\r\n  animation: cv-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;\r\n  pointer-events: none;\r\n}\r\n@keyframes cv-ping {\r\n  0% { transform: scale(1); opacity: 0.22; }\r\n  80%, 100% { transform: scale(1.7); opacity: 0; }\r\n}\r\n.cv-avatar-dot {\r\n  position: absolute;\r\n  bottom: 1px;\r\n  right: 1px;\r\n  width: 14px;\r\n  height: 14px;\r\n  border-radius: 999px;\r\n  background: var(--cv-accent);\r\n  border: 2px solid var(--cv-bg);\r\n}\r\n\r\n.cv-call-name { font-size: 1rem; font-weight: 600; line-height: 1.2; }\r\n.cv-call-number { font-size: 0.75rem; color: var(--cv-muted); margin-top: 2px; }\r\n\r\n.cv-timer {\r\n  display: flex;\r\n  align-items: baseline;\r\n  justify-content: center;\r\n  gap: 1px;\r\n  margin-top: 0.75rem;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-timer b {\r\n  font: 700 2.25rem/1 var(--cv-font);\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.03em;\r\n}\r\n.cv-timer i {\r\n  font: 300 1.75rem/1 var(--cv-font);\r\n  font-style: normal;\r\n  color: var(--cv-accent);\r\n  animation: cv-blink 1.6s ease-in-out infinite;\r\n  margin: 0 1px;\r\n}\r\n@keyframes cv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }\r\n\r\n.cv-call-status {\r\n  margin-top: 0.6rem;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-badge-hold { color: var(--cv-hold); font-weight: 600; }\r\n\r\n/* \u2500\u2500 Pre-connect device check (ringing / dialing) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   Before a call connects there is only ONE other control on screen (Colgar, or\r\n   Rechazar/Contestar) \u2014 putting Dispositivos in that same neighbourhood, even\r\n   spaced out, keeps it a mis-tap away from hanging up or answering. The entry\r\n   chip lives beside the call status instead, removing it from that neighbourhood\r\n   rather than just adding distance within it \u2014 same resting-pill SHAPE as `.cv-cp`\r\n   (CountryPicker), reused rather than invented fresh.\r\n\r\n   Opening it does NOT pop a panel into that same tight space, though \u2014 this\r\n   SDK's real production embed (a 310\xD7520 host panel with its own header eating\r\n   further into that) leaves too little free room around a trigger sitting in\r\n   vertically-centred content for a floating popover to open into without either\r\n   overlapping Colgar/Rechazar/Contestar or clamping itself down to something\r\n   cramped and scrolly for just two rows. `.cv-call-devices-inline` REPLACES the\r\n   avatar/name/status block in `.cv-call` instead (see that JSX's own comment) \u2014\r\n   an inline swap, not an overlay, so it gets the full box, not a leftover sliver.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-call-devices-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  height: 26px;\r\n  padding: 0 0.65rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 999px;\r\n  background: var(--cv-bg);\r\n  color: var(--cv-muted);\r\n  font: 600 0.7rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;\r\n}\r\n.cv-call-devices-chip:hover { background: var(--cv-surface); }\r\n.cv-call-devices-chip:active { transform: scale(0.95); }\r\n\r\n/*\r\n  The entry-point row \u2014 ONE chip today (Dispositivos), up to two once a host configures\r\n  `incomingCallAction` (that one first: who is calling outranks a phone-utility setting). `width:\r\n  100%` + `flex-wrap` on purpose: a host's action label is arbitrary text this component cannot\r\n  assume is short, so two chips sit side by side when they fit and wrap onto their own centred line\r\n  when they do not, rather than overflowing `.cv-call`'s fixed width.\r\n*/\r\n.cv-call-chips {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  gap: 0.5rem;\r\n  margin-top: 0.65rem;\r\n}\r\n\r\n.cv-call-devices-inline {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.9rem;\r\n  /* `.cv-call` centres and centre-aligns its normal (avatar) content \u2014 rows read left-aligned\r\n     everywhere else in the widget (Ajustes, the in-call popover), so this opts back out of both. */\r\n  text-align: left;\r\n  animation: cv-call-devices-in 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-call-devices-in {\r\n  from { opacity: 0; transform: translateY(6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-call-devices-inline { animation: none; }\r\n}\r\n.cv-call-devices-header { display: flex; align-items: center; gap: 0.5rem; }\r\n.cv-call-devices-title { font-size: 0.95rem; font-weight: 600; color: var(--cv-text); }\r\n/* `--cv-muted` on `--cv-bg` \u2014 the same already-verified pairing `.cv-settings-note` uses\r\n   (4.83:1 light / 6.97:1 dark), not a new one. */\r\n.cv-call-devices-context {\r\n  margin: 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n\r\n/* \u2500\u2500 Call controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   TWO TIERS. Hang up is the one action that must never be hunted for, so it sits\r\n   alone, centred, and largest \u2014 the anchor. The secondaries flank above it. They\r\n   used to share a single row, where hang up was just the last button and carried\r\n   the same weight as \"transfer\"; mid-call, that is the wrong hierarchy.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-controls {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  padding: 0.35rem 1rem 1.1rem;\r\n  /* The containing block for `.cv-device-popover` \u2014 see that rule's own comment for why it is\r\n     anchored here rather than to the trigger button. */\r\n  position: relative;\r\n}\r\n.cv-controls-row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 1.5rem;\r\n}\r\n.cv-controls-primary {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 2.75rem;\r\n}\r\n/* Button + its word. The column keeps the label from widening the hit target. */\r\n.cv-ctrl-item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n}\r\n/* 10px, muted: present when you look for it, silent when you don't. An icon-only\r\n   control is a quiz, and mid-call is the worst time to sit one. */\r\n.cv-ctrl-label {\r\n  font-size: 0.625rem;\r\n  line-height: 1;\r\n  color: var(--cv-muted);\r\n  white-space: nowrap;\r\n  user-select: none;\r\n}\r\n.cv-ctrl {\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: 999px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: background 0.15s ease, color 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-ctrl:hover { background: var(--cv-surface); }\r\n.cv-ctrl:active { transform: scale(0.94); }\r\n\r\n/* The ON states say what they MEAN, in the widget's own tokens: muted is danger,\r\n   held is hold, transfer-open is accent. Colour is the state, not decoration. */\r\n.cv-ctrl[data-tone='danger'] {\r\n  background: var(--cv-danger);\r\n  border-color: var(--cv-danger);\r\n  color: #fff;\r\n}\r\n.cv-ctrl[data-tone='hold'] {\r\n  background: var(--cv-hold);\r\n  border-color: var(--cv-hold);\r\n  color: #fff;\r\n}\r\n.cv-ctrl[data-tone='accent'] {\r\n  background: var(--cv-accent-soft);\r\n  border-color: transparent;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-ctrl[data-tone]:hover { filter: brightness(0.95); }\r\n\r\n/* Muted is the one state worth animating: it is invisible, it is easy to forget,\r\n   and the cost of forgetting is talking to nobody. Same halo the avatar rings\r\n   with \u2014 one language, not two. */\r\n.cv-ctrl[data-tone='danger'] {\r\n  position: relative;\r\n}\r\n.cv-ctrl[data-tone='danger']::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 999px;\r\n  background: var(--cv-danger);\r\n  animation: cv-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-ctrl[data-tone='danger']::after { animation: none; opacity: 0; }\r\n}\r\n.cv-ctrl[aria-pressed='true'] {\r\n  background: var(--cv-text);\r\n  color: var(--cv-bg);\r\n  border-color: var(--cv-text);\r\n}\r\n\r\n/*\r\n  The attended-transfer target-entry panel (`docs/specs/transfer-availability.md` \xA75): an optional\r\n  outcome line, then a row of whatever's actionable (input+button today). Once a consult exists,\r\n  `ConsultScreen` takes over the whole screen instead \u2014 this panel is ONLY ever the pre-consult /\r\n  retry-after-failure state now; it used to also cover the consulting/answered phases, which is why\r\n  its rule is a column container built for more than one child even though there's only ever one row\r\n  here today. (History: was two near-duplicate rules \u2014 `.cv-transfer` as a bare ROW,\r\n  `.cv-transfer-consult` as a column \u2014 until the row version turned out to be a real,\r\n  reproduced-in-browser bug: the optional `.cv-dial-outcome` message rendered as a THIRD item in the\r\n  same horizontal row as the input and button, squeezing the input to its content-minimum. Merged\r\n  rather than patched.)\r\n*/\r\n.cv-transfer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.3rem;\r\n  width: 100%;\r\n  padding: 0.2rem 0.25rem 0;\r\n  /* `.cv-call` centres and centre-aligns its normal (avatar) content \u2014 same reasoning\r\n     `.cv-call-devices-inline` already opts out of for the OTHER inline swap in this box (its own\r\n     comment): rows read left-aligned everywhere else in the widget, and a centred context line\r\n     sitting directly above a left-aligned input/toggle/list read as two layouts stacked on top of\r\n     each other, found live (2026-09-29). */\r\n  text-align: left;\r\n  /* Found live (2026-09-29): `.cv-call`'s avatar/name/timer block used to sit ABOVE this,\r\n     unconditionally, so this panel only ever got whatever was left over \u2014 see the JSX call site's own\r\n     comment. Now that this IS the whole of `.cv-call`'s content while a transfer is in progress\r\n     (a swap, not an addition), it should CLAIM `.cv-call`'s available height, not just sit in it \u2014\r\n     `flex: 1` does that; `min-height: 0` is what lets a flex child actually shrink to fit instead of\r\n     forcing its parent to grow past it (the same reason `.cv-call`/`.cv-view`/`.cv-body` all set it,\r\n     see their own comments). This is what lets `.cv-presence-list` below flex-grow into real room\r\n     instead of needing its own hand-tuned `max-height` guess. */\r\n  flex: 1;\r\n  min-height: 0;\r\n  /* Same entrance `.cv-call-devices-inline` already uses for the analogous inline swap (its own\r\n     comment) \u2014 reused, not a second animation invented for this widget's second inline-swap view. */\r\n  animation: cv-call-devices-in 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-transfer { animation: none; }\r\n}\r\n/* The compact \"who am I still on the phone with\" line while the picker is open \u2014 reuses\r\n   `.cv-call-devices-inline`'s own two classes verbatim (`.cv-call-devices-title` for the name,\r\n   `.cv-call-devices-context` for the number/timer line) rather than inventing a second \"quiet header\"\r\n   style for the same widget; only the tiny stacking gap between them is new.\r\n\r\n   Found live (2026-09-29): `.cv-transfer`'s own `gap` alone gave every section \u2014 context, input row,\r\n   mode toggle, results list \u2014 the exact same spacing, so nothing read as its own group; the eye had\r\n   no cue for where \"who I'm on the phone with\" ends and \"pick a transfer target\" begins. This extra\r\n   `margin-bottom`, on top of the base `gap`, is that cue \u2014 the toggle stays close to the list it\r\n   controls (unchanged), only the boundary above the interactive controls opened up. */\r\n.cv-transfer-context {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  flex-shrink: 0;\r\n  margin-bottom: 0.35rem;\r\n}\r\n/* Plan T3: the mode toggle reuses `.cv-segmented` (HistoryTab's own filter control) as-is, but its\r\n   `margin-bottom` (needed THERE, where the surrounding layout has no gap of its own) is redundant\r\n   here \u2014 `.cv-transfer`'s own `gap` above already spaces every child, so the two would stack. Scoped\r\n   to this context only; HistoryTab's own copy is untouched. */\r\n.cv-transfer .cv-segmented { margin-bottom: 0; flex-shrink: 0; }\r\n.cv-transfer .cv-presence-legend { flex-shrink: 0; }\r\n/* Same treatment as `.cv-call-status` (the avatar's own \"Llamando\u2026\"/\"En espera\" line) \u2014 one muted\r\n   status-line vocabulary for the whole call screen, not a second one invented for this panel. */\r\n.cv-transfer-status {\r\n  margin: 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  letter-spacing: 0.04em;\r\n}\r\n/* The target-entry/retry row: an input plus one button. */\r\n.cv-transfer-row {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n}\r\n/*\r\n  Flex items default to `min-width: auto`, which floors them at their CONTENT size rather than letting\r\n  them shrink or grow to fill the row \u2014 `.cv-search`'s own `width: 100%` never actually took effect\r\n  here, because `.cv-btn`'s text (\"Llamar\") set an unshrinkable floor and the input, having no\r\n  `flex-grow`, never reclaimed the space left over. `flex: 1` + `min-width: 0` is what actually makes\r\n  an input-plus-button row behave like one; `flex: none` keeps the button at its natural size.\r\n*/\r\n.cv-transfer-row .cv-search {\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n/* `max-width` + ellipsis: the label now includes whatever was typed (\"Llamar a {typed}\", spec \xA74.5)\r\n   and `truncateForButton` already bounds that in JS \u2014 this is the CSS backstop, so a value that\r\n   slips past it (a very wide character set, a future copy change) still can't push `.cv-search` down\r\n   to an unusable sliver the way the pre-truncation button did before this was noticed. */\r\n.cv-transfer-row .cv-btn {\r\n  flex: none;\r\n  max-width: 60%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n/* The consult-answered row: one or two buttons, no input. */\r\n.cv-transfer-actions {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n}\r\n.cv-transfer-actions .cv-btn {\r\n  flex: 1;\r\n}\r\n/* The ringing phase has only \"Cancelar\" \u2014 a secondary, low-stakes action. Letting the row's own\r\n   `flex: 1` stretch a LONE button edge to edge reads as oversized for what it is, and nothing else in\r\n   this widget sizes a single button to the full row; every other `.cv-btn` sizes to its content. */\r\n.cv-transfer-actions .cv-btn:only-child {\r\n  flex: none;\r\n}\r\n\r\n/*\r\n  The agent picker (spec \xA74.5, plan T7) \u2014 an inline, always-visible filtered list under the\r\n  input+button row, not a click-to-open popover like `.cv-person-filter-pop`: the whole point is that\r\n  typing already filters it, so hiding it behind a second interaction would undo that.\r\n\r\n  Redesigned live (2026-09-29): T7 (72px) and T3 (30px) both hand-tuned a `max-height` in PIXELS\r\n  against whatever else happened to be on screen at the time, and both were broken by the very next\r\n  addition above the list (T3's own toggle broke T7's number the same way this would keep breaking on\r\n  the next change) \u2014 down to \"barely proves the list is scrollable\" at 30px, which is what the user\r\n  was actually seeing: \"users cannot almost see any of the listed users.\" The real fix wasn't a bigger\r\n  magic number, it was `.cv-transfer`'s own move to `flex: 1` (see its comment) freeing real height\r\n  from the block that used to sit above this whole panel \u2014 `.cv-presence` and this list now flex-grow\r\n  into whatever's ACTUALLY left after the context line, input row, toggle and legend take their own\r\n  natural size, on whatever real height the host panel gives `.cv-call` (this SDK's fixed ~310\xD7520\r\n  embed today, but also whatever a different host gives it tomorrow \u2014 no more re-tuning a constant\r\n  every time something above the list changes). `.cv-call`'s own `overflow-y: auto` (its own comment)\r\n  is still the last-resort net if content ever genuinely doesn't fit; this just means that net should\r\n  now rarely, if ever, have to catch anything for a normal agent list.\r\n*/\r\n.cv-presence {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.35rem;\r\n  flex: 1;\r\n  min-height: 0;\r\n}\r\n.cv-presence-list {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 0.25rem;\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius-key);\r\n  background: var(--cv-surface);\r\n}\r\n.cv-presence-empty {\r\n  margin: 0;\r\n  padding: 0.5rem;\r\n  text-align: center;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-presence-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.4rem 0.5rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-presence-item:hover:not(:disabled) { background: var(--cv-surface-2); }\r\n/* En llamada rows are a hard block, not just a hint (CallScreen.tsx's own comment on the row has why)\r\n   \u2014 same `:disabled` treatment `.cv-btn`/`.cv-tab` already use elsewhere in this file, not a new pattern. */\r\n.cv-presence-item:disabled { opacity: 0.45; cursor: not-allowed; }\r\n.cv-presence-dot {\r\n  flex-shrink: 0;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 999px;\r\n}\r\n/* Reuses existing intent tokens rather than inventing new ones \u2014 `--cv-accent` already means\r\n   \"good, reachable\" (the answer button), `--cv-hold` already means \"occupied elsewhere\" (the hold\r\n   toggle), and `--cv-faint` is this file's own DECORATIVE-only tier (see the `--cv-*` legend near the\r\n   top) \u2014 exactly what \"no signal for this person\" is, no signal being the whole point of that tier. */\r\n.cv-presence-dot[data-state='disponible'] { background: var(--cv-accent); }\r\n.cv-presence-dot[data-state='en_llamada'] { background: var(--cv-hold); }\r\n.cv-presence-dot[data-state='desconectado'] { background: var(--cv-faint); }\r\n.cv-presence-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-presence-meta {\r\n  flex-shrink: 0;\r\n  font-size: 0.72rem;\r\n  color: var(--cv-muted);\r\n}\r\n/* Spec \xA74.6: Desconectado is a HINT, never \"can't transfer\" \u2014 this is what tells the agent so, right\r\n   under the list it describes. `--cv-muted`, NOT `--cv-faint`: this text is informational (the reader\r\n   needs it to not misread the state), and `--cv-faint` is reserved for decorative-only content that\r\n   fails AA on purpose \u2014 using it here would repeat the exact tier mistake this file's own `--cv-*`\r\n   comment block warns against. */\r\n.cv-presence-legend {\r\n  margin: 0;\r\n  font-size: 0.7rem;\r\n  color: var(--cv-muted);\r\n  line-height: 1.35;\r\n}\r\n\r\n/*\r\n  `ConsultScreen`'s \"someone is still waiting\" banner (`docs/specs/transfer-availability.md` \xA75, the\r\n  cross-talk fix) \u2014 full-width and tappable, not a passive status line, because the entire reason this\r\n  screen exists is to make \"go back to the caller\" impossible to miss. Neutral surface + the same\r\n  `--cv-hold` colour `.cv-badge-hold` already uses for the same fact elsewhere, not a new soft-fill\r\n  token: a text/icon tint on a plain surface is already proven legible here, and inventing an\r\n  unmeasured background-tint pairing risks a real contrast regression this file takes seriously\r\n  elsewhere (see the `-soft`/`-strong` split's own comments).\r\n*/\r\n.cv-consult-hold-banner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.4rem;\r\n  width: 100%;\r\n  padding: 0.5rem 0.75rem;\r\n  border-radius: 999px;\r\n  border: 1px solid var(--cv-border);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-hold);\r\n  font: 600 0.78rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease;\r\n}\r\n.cv-consult-hold-banner:hover {\r\n  background: var(--cv-surface-2);\r\n  border-color: var(--cv-hold);\r\n}\r\n.cv-consult-hold-banner:active {\r\n  transform: scale(0.98);\r\n}\r\n\r\n/*\r\n  The in-call device quick-switch (SPEC \xA77 Phase 2 \u2014 device management). Same rows as the Ajustes tab\r\n  (`.cv-settings-row`, via the shared `DevicePickers`), in a popover instead of a page \u2014 the call\r\n  screen already takes over the whole body, so there is no tab bar to reach Ajustes from mid-call.\r\n\r\n  Only the in-call state still uses a floating popover \u2014 before a call connects, Dispositivos is\r\n  inline content instead (`.cv-call-devices-inline`, above), not an overlay. Opens UPWARD (`bottom:\r\n  100%`): the trigger sits at the bottom of the call screen, and there is no room to open downward.\r\n  Anchored to `.cv-controls`'s own horizontal padding \u2014 a container whose width is bounded by ITS\r\n  parent, never the narrow trigger itself \u2014 the same fix CountryPicker's own popover needed (see its\r\n  comment).\r\n*/\r\n.cv-device-popover {\r\n  position: absolute;\r\n  z-index: 20;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.6rem;\r\n  padding: 0.7rem;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n}\r\n.cv-device-popover--above {\r\n  bottom: 100%;\r\n  left: 1rem;\r\n  right: 1rem;\r\n  margin-bottom: 0.6rem;\r\n  transform-origin: bottom center;\r\n  animation: cv-device-pop-in-up 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-device-pop-in-up {\r\n  from { opacity: 0; transform: translateY(4px) scale(0.97); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-device-popover--above { animation: none; }\r\n}\r\n/* No per-row override needed here: `.cv-settings-row`/`.cv-settings-note` carry no border,\r\n   background or padding of their own (see the Settings tab block) \u2014 this popover's own `gap` and\r\n   `padding` are the only spacing in play, which is what keeps it lighter than the full Ajustes\r\n   page's bordered section for what is meant to be a quick, transient panel. */\r\n\r\n/* \u2500\u2500 Lists (contacts / history) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-list-head { flex-shrink: 0; padding: 0.85rem 1rem 0.5rem; }\r\n.cv-search {\r\n  width: 100%;\r\n  padding: 0.5rem 0.75rem;\r\n  border-radius: 10px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: inherit;\r\n  transition: border-color 0.15s ease, background 0.15s ease;\r\n  /* Found live (2026-09-29): in the transfer row specifically, `.cv-btn`'s own `max-width: 60%`\r\n     (needed for the dynamic \"Llamar a {typed}\" label) can leave the input narrower than its\r\n     placeholder text \u2014 an `<input>` has no native ellipsis, so it hard-clipped mid-word\r\n     (\"...o n\xFAm\") instead of trailing off cleanly. A real, if rare, risk for ANY `.cv-search` usage\r\n     wherever it's squeezed, not just this one row \u2014 the fix belongs on the base rule. */\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.cv-search::placeholder { color: var(--cv-muted); }\r\n.cv-search:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }\r\n\r\n/*\r\n  A wrapper around `.cv-search`, not a change to it \u2014 that class is also the transfer-target input\r\n  in CallScreen, which wants neither an icon nor a clear button. `.cv-search--icon` is an ADDITIVE\r\n  modifier on the input itself (padding only), so the base class is byte-for-byte what it was for\r\n  every other consumer.\r\n*/\r\n.cv-search-field { position: relative; display: flex; align-items: center; }\r\n.cv-search--icon { padding-left: 2.15rem; padding-right: 1.85rem; }\r\n.cv-search-icon {\r\n  position: absolute;\r\n  left: 0.75rem;\r\n  color: var(--cv-muted);\r\n  pointer-events: none;\r\n}\r\n.cv-search-clear {\r\n  position: absolute;\r\n  right: 0.5rem;\r\n  width: 22px;\r\n  height: 22px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  border-radius: 999px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-search-clear:hover { color: var(--cv-text); }\r\n.cv-search-clear:active { transform: scale(0.88); }\r\n\r\n/* \u2500\u2500 Historial filters: status (Todas/Perdidas) + person \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-segmented {\r\n  display: flex;\r\n  gap: 2px;\r\n  padding: 2px;\r\n  border-radius: 10px;\r\n  background: var(--cv-surface-2);\r\n  margin-bottom: 0.4rem;\r\n}\r\n.cv-segmented-btn {\r\n  flex: 1;\r\n  padding: 0.35rem 0;\r\n  border: none;\r\n  border-radius: 8px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  font: 600 0.75rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;\r\n}\r\n/* The active segment is stated by its own fill + shadow, not colour alone \u2014 the same reasoning\r\n   `.cv-item-action[data-tone='accent']`'s own comment gives for resting-state colour: a state that\r\n   only differs by hue must still read on a screen that renders neither. */\r\n.cv-segmented-btn[aria-selected='true'] {\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  box-shadow: var(--cv-shadow);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-segmented-btn { transition: none; }\r\n}\r\n\r\n/* The person filter \u2014 same combobox SHAPE as `.cv-cp-*` (CountryPicker): a chip opening a positioned\r\n   popover list with a checkmark on the active row. Not the same CLASSES: the two pickers have nothing\r\n   to do with each other and sharing a namespace would make a future change to one silently reach the\r\n   other. */\r\n.cv-person-filter { position: relative; width: 100%; }\r\n.cv-person-filter-chip {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  width: 100%;\r\n  padding: 0.4rem 0.65rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 10px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-muted);\r\n  font: 500 0.78rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease;\r\n}\r\n.cv-person-filter-chip:hover { background: var(--cv-surface-2); }\r\n/*\r\n  Border only, no fill \u2014 the popover opening and the caret rotating already say \"this is open\";\r\n  painting the whole width of a wide text pill solid green on top of that was the same over-strong\r\n  green the selected row had (see its own comment below). A coloured border is the same restrained\r\n  signal `.cv-search:focus` already uses for \"active\" elsewhere in this file.\r\n*/\r\n.cv-person-filter-chip[aria-expanded='true'] {\r\n  border-color: var(--cv-accent);\r\n}\r\n.cv-person-filter-label {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  text-align: left;\r\n  color: var(--cv-text);\r\n}\r\n.cv-person-filter-caret {\r\n  flex-shrink: 0;\r\n  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n.cv-person-filter-caret[data-open='true'] { transform: rotate(180deg); }\r\n.cv-person-filter-pop {\r\n  position: absolute;\r\n  top: calc(100% + 6px);\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 20;\r\n  max-height: 220px;\r\n  overflow-y: auto;\r\n  padding: 0.25rem;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n  transform-origin: top center;\r\n  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-person-filter-pop { animation: none; }\r\n  .cv-person-filter-caret { transition: none; }\r\n}\r\n.cv-person-filter-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.45rem 0.5rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-person-filter-item:hover { background: var(--cv-surface-2); }\r\n/*\r\n  NOT a solid `--cv-accent-soft` fill \u2014 that read as a wall of saturated green across a wide row,\r\n  much louder than the legacy CRM's own treatment for this exact list (`bg-emerald-50` \u2014 a barely-\r\n  there wash \u2014 plus coloured text, never a strong fill). Coloured, bold text + the checkmark carry\r\n  \"selected\" instead; `--cv-accent-strong` is already verified elsewhere in this file as AA against\r\n  `--cv-surface`, which is what this popover sits on.\r\n*/\r\n.cv-person-filter-item[aria-selected='true'] .cv-person-filter-name {\r\n  font-weight: 600;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-person-filter-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-person-filter-check { color: var(--cv-accent-strong); flex-shrink: 0; }\r\n.cv-person-filter-check[data-on='false'] { opacity: 0; }\r\n\r\n.cv-list {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 0 0.5rem 0.5rem;\r\n}\r\n/*\r\n  Historial's day group header. Sticky within `.cv-list` (its nearest scrolling ancestor \u2014 a plain\r\n  wrapper div between the two does not break that), OPAQUE `--cv-bg` rather than a translucent\r\n  `/85 + backdrop-blur` treatment: it still needs to fully occlude rows scrolling underneath it, and\r\n  a flat match to the list's own background does that with no new CSS feature this file doesn't\r\n  already use elsewhere.\r\n*/\r\n.cv-history-day {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  padding: 0.5rem 0.6rem 0.35rem;\r\n  background: var(--cv-bg);\r\n  color: var(--cv-muted);\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  padding: 0.5rem;\r\n  border-radius: 12px;\r\n  /*\r\n    NOT `cursor: pointer` \u2014 this div has no click handler of its own; only its children\r\n    (`.cv-item-main`, `.cv-item-action`) do, and each already sets its own pointer cursor. Putting\r\n    it here too used to make the WHOLE row's box promise a click \u2014 its own padding, and the flex\r\n    `gap` between avatar/name/button \u2014 none of which does anything when clicked. Most noticeable\r\n    right where one row's padding meets the next, which reads as \"there's something clickable\r\n    between these two contacts\" when there is not.\r\n  */\r\n  transition: background 0.12s ease;\r\n  text-align: left;\r\n  width: 100%;\r\n  border: none;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n.cv-item:hover { background: var(--cv-surface); }\r\n.cv-item-avatar {\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 999px;\r\n  /*\r\n    RADIAL, not diagonal \u2014 deliberately. The initials sit centered, so a radial gradient puts them\r\n    at its lightest point (pure `--cv-surface`) no matter what, while the edges still darken toward\r\n    `--cv-surface-2` for the same cheap depth a diagonal gradient gave. A diagonal version measured\r\n    4.39:1 for `--cv-muted` text at its far corner \u2014 under the 4.5:1 text needs \u2014 because centered\r\n    text's exact position against a DIAGONAL gradient depends on glyph width, not just circle size.\r\n    Centering the gradient on the centered text removes that dependency entirely, structurally,\r\n    rather than nudging a token and hoping the margin holds. Both stops stay tokens, so this is\r\n    still theme-correct for free \u2014 a hardcoded gray gradient would not adapt to dark mode.\r\n  */\r\n  background: radial-gradient(circle, var(--cv-surface), var(--cv-surface-2));\r\n  /*\r\n    Without this, the circle's own boundary can vanish: `.cv-item:hover` sets the ROW background to\r\n    `--cv-surface` \u2014 the exact color the gradient above STARTS at (1.00 contrast ratio, i.e.\r\n    identical) in both themes. `--cv-border-strong` is the same token `.cv-search`'s border already\r\n    uses against this same surface a few rules up \u2014 a pairing already proven visible, not a new one.\r\n  */\r\n  border: 1px solid var(--cv-border-strong);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n  font-weight: 700;\r\n  flex-shrink: 0;\r\n}\r\n/*\r\n  The Historial row's status chip \u2014 WHY a call needs colour at all: direction is already the icon's\r\n  shape (an arrow in/out), but \"did this connect\" is not shape-able, and a flat grey circle made every\r\n  row look identical at a glance. Small badge, not a row-wide fill (that mistake already got made once\r\n  on the person filter \u2014 see its own comment): a 40px circle reads as a status glyph, the same way a\r\n  colored icon-badge does anywhere else; a wide fill reads as decoration competing with the text next\r\n  to it. `--danger-strong`/`--accent-strong` (not the plain base tokens) because the base tokens\r\n  measure BELOW 3:1 non-text contrast against their own `-soft` fill \u2014 `--cv-danger` on\r\n  `--cv-danger-soft` is 2.6:1; `--cv-danger-strong` is 4.47:1 light / 3.62:1 dark, measured.\r\n*/\r\n.cv-item-avatar[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n.cv-item-avatar[data-tone='info'] { background: var(--cv-info-soft); color: var(--cv-info-strong); }\r\n.cv-item-avatar[data-tone='danger'] { background: var(--cv-danger-soft); color: var(--cv-danger-strong); }\r\n/* A button, reset to look like plain content \u2014 the row is a container, not a control. */\r\n.cv-item-main {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: block;\r\n  border: none;\r\n  background: none;\r\n  padding: 0;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n  transition: transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-item-main:disabled { cursor: default; }\r\n.cv-item-main:not(:disabled):active { transform: scale(0.985); }\r\n.cv-item-name {\r\n  display: block;\r\n  font-weight: 600;\r\n  font-size: 0.875rem;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n/*\r\n  14px bold does not clear WCAG's large-text bar (18.66px bold) \u2014 this text needs the full 4.5:1, not\r\n  the 3:1 large-text minimum. `--cv-danger-strong`: 6.47:1 light / 6.46:1 dark against `--cv-bg`,\r\n  measured; the plain `--cv-danger` this used to be was only 3.76:1 light \u2014 a real (if marginal) fail.\r\n*/\r\n.cv-item-name[data-tone='danger'] { color: var(--cv-danger-strong); }\r\n.cv-item-sub {\r\n  display: block;\r\n  font-size: 0.72rem;\r\n  color: var(--cv-muted);\r\n  margin-top: 1px;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.cv-item-sub-outcome { color: var(--cv-danger-strong); }\r\n/*\r\n  Decorative reinforcement, not the sole carrier \u2014 the row's own play button is what says \"this call\r\n  has a recording\" (it only renders when one exists); this is a small hint IN the metadata line that\r\n  the button is worth pressing, so `--cv-faint` (2.5:1, documented above as decorative-only) is the\r\n  right tier here, same reasoning `.cv-empty-icon`/`.cv-gate-mark` already use for icons next to real\r\n  text rather than standing alone.\r\n\r\n  `display: inline-flex` is load-bearing, not decoration \u2014 every OTHER inline icon in this file gets\r\n  an explicit `display` for the same reason: `/react` + `/ui` render straight into the host's light\r\n  DOM (no shadow root), so a host reset like Tailwind Preflight's `svg { display: block }` reaches\r\n  this element directly. Without an explicit override here, that reset knocks the icon onto its own\r\n  line instead of trailing the duration text it is meant to sit beside.\r\n*/\r\n.cv-item-sub-rec {\r\n  display: inline-flex;\r\n  color: var(--cv-faint);\r\n  margin-left: 0.3rem;\r\n  vertical-align: -1px;\r\n}\r\n.cv-item-action {\r\n  width: 34px;\r\n  height: 34px;\r\n  border-radius: 999px;\r\n  border: none;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  transition: background 0.12s ease, color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-item-action:hover { background: var(--cv-accent); color: #fff; }\r\n.cv-item-action:active { transform: scale(0.9); }\r\n/*\r\n  The call action specifically (ContactsTab) \u2014 NOT History's \"play recording\", which shares this\r\n  same class and must stay neutral; a play button has no reason to be accent-colored. Scoped with\r\n  `data-tone`, the same modifier convention `.cv-ctrl[data-tone]` already uses elsewhere in this file.\r\n\r\n  Coloured at REST, not just on hover: a hover-only reveal never fires on a touchscreen, so the one\r\n  affordance that most needs to read as \"you can tap this\" would be invisible on exactly the devices\r\n  a phone widget is likeliest to run on. `accent-strong` is already verified elsewhere in this file\r\n  as AA on a surface; `accent-soft` is the same hover tint `.cv-ctrl[data-tone='accent']` uses, just\r\n  transparent at rest so fifty rows of solid fill never turns the list into a wall of green.\r\n*/\r\n.cv-item-action[data-tone='accent'] { color: var(--cv-accent-strong); }\r\n.cv-item-action[data-tone='accent']:hover { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-item-main, .cv-item-action, .cv-search-clear { transition: none; }\r\n}\r\n\r\n.cv-empty {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100%;\r\n  color: var(--cv-muted);\r\n  text-align: center;\r\n  padding: 2.5rem 1.25rem;\r\n  font-size: 0.82rem;\r\n}\r\n.cv-empty-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-faint);\r\n  margin-bottom: 0.75rem;\r\n}\r\n.cv-empty-title { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--cv-muted); }\r\n/*\r\n  `--cv-muted`, NOT `--cv-faint` \u2014 this file documents faint as \"decorative only... never\r\n  information\" (2.5:1, below AA), and this line IS information: it is the reason the list is\r\n  empty, sometimes echoing the user's own search back to them. `--cv-faint` here measured 2.54:1\r\n  light / 3.70:1 dark against a 4.5:1 bar \u2014 a real failure, not a rounding difference.\r\n*/\r\n.cv-empty-sub { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--cv-muted); }\r\n.cv-empty-spinner {\r\n  margin-bottom: 0.75rem;\r\n  animation: cv-spin 0.8s linear infinite;\r\n  /* A loading spinner's rotation IS the information, with no static equivalent \u2014 unlike this\r\n     file's other motion, it stays exempt from reduced-motion rather than freezing into a shape\r\n     that would just look stuck. Colour comes from `.cv-empty`'s own `color: var(--cv-muted)` \u2014\r\n     the spinner no longer sets its own, now that it sits next to real text instead of standing\r\n     alone: the icon is decorative reinforcement, same as `.cv-empty-icon`, not the sole carrier. */\r\n}\r\n@keyframes cv-spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n/* The scroll-triggered \"load more\" marker \u2014 see `useInfiniteList`. Never visible itself; a small\r\n   height so it has a real box for the `IntersectionObserver` to track. */\r\n.cv-list-sentinel {\r\n  height: 1px;\r\n}\r\n.cv-list-loading-more {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0.75rem 0 0.25rem;\r\n  color: var(--cv-muted);\r\n}\r\n/* Exempt from reduced-motion for the same reason `.cv-empty-spinner` is \u2014 see its own comment. */\r\n.cv-list-loading-more-spinner {\r\n  animation: cv-spin 0.8s linear infinite;\r\n}\r\n\r\n/* \u2500\u2500 Contact detail (overlays the list) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail {\r\n  position: absolute;\r\n  inset: 0;\r\n  /* Above the list's own sticky day-group header (`.cv-history-day`, z-index: 1) \u2014 otherwise\r\n     that header's z-index wins the stacking fight wherever its unscrolled flow position happens\r\n     to land on top of this overlay, and it paints through despite both having an opaque bg. */\r\n  z-index: 2;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--cv-bg);\r\n  animation: cv-detail-in 220ms var(--cv-ease-out) both;\r\n}\r\n@keyframes cv-detail-in {\r\n  from { opacity: 0; transform: translateX(10px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-detail { animation: none; }\r\n}\r\n\r\n.cv-detail-head { flex-shrink: 0; padding: 0.6rem 0.5rem 0; }\r\n.cv-detail-back {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  padding: 0.4rem 0.5rem;\r\n  border: none;\r\n  border-radius: 8px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  font: 600 0.82rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-detail-back:hover { color: var(--cv-text); }\r\n.cv-detail-back:active { transform: scale(0.97); }\r\n\r\n.cv-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.25rem; }\r\n.cv-detail-identity {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n  padding: 0.75rem 0 1.5rem;\r\n}\r\n.cv-detail-avatar {\r\n  width: 72px;\r\n  height: 72px;\r\n  border-radius: 999px;\r\n  /* Same radial + border treatment as `.cv-item-avatar` (see its own comment), just larger. Neutral\r\n     by default \u2014 a contact has no \"status\" to colour. `HistoryDetail` overrides both with `[data-tone]`\r\n     below: a call DOES have one, the same one the list row already shows, so the hero avatar staying\r\n     grey there would be information the list already gave up on repeating here. */\r\n  background: radial-gradient(circle, var(--cv-surface), var(--cv-surface-2));\r\n  border: 1px solid var(--cv-border-strong);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--cv-muted);\r\n  font-size: 1.35rem;\r\n  font-weight: 700;\r\n  margin-bottom: 0.85rem;\r\n}\r\n/* Same token pairs already verified for `.cv-item-avatar[data-tone]` \u2014 size doesn't change a contrast\r\n   ratio, so no new numbers to measure here. */\r\n.cv-detail-avatar[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); border-color: transparent; }\r\n.cv-detail-avatar[data-tone='info'] { background: var(--cv-info-soft); color: var(--cv-info-strong); border-color: transparent; }\r\n.cv-detail-avatar[data-tone='danger'] { background: var(--cv-danger-soft); color: var(--cv-danger-strong); border-color: transparent; }\r\n.cv-detail-name {\r\n  margin: 0;\r\n  font-size: 1.1rem;\r\n  font-weight: 700;\r\n  color: var(--cv-text);\r\n  letter-spacing: -0.01em;\r\n}\r\n.cv-detail-name[data-tone='danger'] { color: var(--cv-danger-strong); }\r\n.cv-detail-meta {\r\n  margin: 0.2rem 0 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n\r\n/* \u2500\u2500 Call detail: recording \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail-recording { margin-bottom: 1rem; }\r\n.cv-detail-recording-label {\r\n  margin: 0 0 0.4rem;\r\n  padding: 0 0.15rem;\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-detail-audio { width: 100%; display: block; }\r\n.cv-detail-audio + .cv-detail-audio { margin-top: 0.5rem; }\r\n.cv-detail-recording-status {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  margin: 0 0 1rem;\r\n  padding: 0.65rem 0.75rem;\r\n  border-radius: 12px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n}\r\n/*\r\n  Text colour only, same neutral `--cv-surface` background the other states use \u2014 NOT a\r\n  `--cv-danger-soft` fill. Measured first, not assumed: `--cv-danger-strong` on `--cv-danger-soft`\r\n  is 3.34:1 light / 3.62:1 dark, well under the 4.5:1 this 0.78rem text needs (it only ever cleared\r\n  the SEPARATE 3:1 non-text bar this token was built for \u2014 an icon on that badge, not body text on\r\n  it). Same lesson the person-filter fix already paid for: a badge-strength pairing that works for an\r\n  icon is not automatically safe for text.\r\n*/\r\n.cv-detail-recording-status--warn { color: var(--cv-danger-strong); }\r\n.cv-detail-recording-spinner { animation: cv-spin 0.8s linear infinite; flex-shrink: 0; }\r\n\r\n/* \u2500\u2500 Call detail: who handled it \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail-handlers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }\r\n.cv-detail-handler-hop { display: inline-flex; align-items: center; gap: 0.3rem; }\r\n.cv-detail-handler-arrow { color: var(--cv-faint); flex-shrink: 0; }\r\n.cv-detail-handler-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  padding: 0.15rem 0.5rem;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-text);\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n}\r\n/* The LAST hop \u2014 the one the call actually ended with \u2014 is the one worth a glance first. */\r\n.cv-detail-handler-chip[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n.cv-detail-handler-ext {\r\n  font-weight: 400;\r\n  font-variant-numeric: tabular-nums;\r\n  opacity: 0.75;\r\n}\r\n\r\n.cv-detail-rows {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  overflow: hidden;\r\n  background: var(--cv-bg);\r\n}\r\n.cv-detail-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  width: 100%;\r\n  padding: 0.7rem 0.85rem;\r\n  border: none;\r\n  border-top: 1px solid var(--cv-border);\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n}\r\n.cv-detail-row:first-child { border-top: none; }\r\n.cv-detail-row--action {\r\n  cursor: pointer;\r\n  transition: background 0.12s ease;\r\n}\r\n.cv-detail-row--action:hover { background: var(--cv-surface); }\r\n.cv-detail-row-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  /*\r\n    Without this the circle nearly vanishes into its own row: `--cv-surface-2` measures only ~1.1:1\r\n    against the row's rest-state background and ~1.05:1 against `--cv-surface`, the color\r\n    `.cv-detail-row--action:hover` sets the ROW to \u2014 both far below a readable boundary, and worse\r\n    than `.cv-item-avatar`/`.cv-detail-avatar` above even manage WITH their border (1.18:1 light /\r\n    1.57:1 dark). Same token, same fix, same reason.\r\n  */\r\n  border: 1px solid var(--cv-border-strong);\r\n  color: var(--cv-muted);\r\n  flex-shrink: 0;\r\n}\r\n.cv-detail-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }\r\n.cv-detail-row-eyebrow {\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-detail-row-value {\r\n  font-size: 0.85rem;\r\n  font-weight: 500;\r\n  color: var(--cv-text);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.cv-detail-row-chevron { color: var(--cv-faint); flex-shrink: 0; }\r\n\r\n.cv-detail-foot { flex-shrink: 0; padding: 0.85rem 1.25rem 1.1rem; }\r\n.cv-detail-call { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }\r\n\r\n/* \u2500\u2500 Settings tab (device selection, SPEC \xA77 Phase 2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-settings-body {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 1rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  /* Generous separation BETWEEN sections, deliberately larger than any gap inside one \u2014 grouping\r\n     only reads as grouping if the space between groups is clearly bigger than the space within one\r\n     (see impeccable's layout guidance: \"tight grouping, generous separation\"). */\r\n  gap: 1.5rem;\r\n}\r\n\r\n/*\r\n  One labeled group (`SettingsSection`): a title, and a bordered body holding its rows. Ajustes\r\n  started as a flat list of two rows with nothing to say they were related \u2014 fine for exactly two\r\n  rows, unreadable the moment an unrelated third setting lands with nothing to tell it apart from\r\n  the device rows above it.\r\n\r\n  The body is ONE card, not a card per row: `.cv-settings-row`/`.cv-settings-note` below carry no\r\n  border or background of their own, only a divider between siblings \u2014 the same shape\r\n  `.cv-detail-rows`/`.cv-detail-row` already use elsewhere in this file, and deliberately not a\r\n  stack of individually-bordered cards (nested-card territory).\r\n*/\r\n.cv-settings-section { display: flex; flex-direction: column; gap: 0.5rem; }\r\n.cv-settings-section-title {\r\n  margin: 0;\r\n  padding: 0 0.2rem;\r\n  font-size: 0.7rem;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-settings-section-body {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n}\r\n.cv-settings-section-body > * { padding: 0.75rem 0.85rem; }\r\n.cv-settings-section-body > *:not(:first-child) { border-top: 1px solid var(--cv-border); }\r\n\r\n.cv-settings-row { display: flex; align-items: center; gap: 0.7rem; }\r\n/* Same treatment as `.cv-detail-row-icon`, same reason \u2014 see its own comment on why the border is\r\n   load-bearing: `--cv-surface-2` alone nearly vanishes into the section's own background. */\r\n.cv-settings-row-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  border: 1px solid var(--cv-border-strong);\r\n  color: var(--cv-muted);\r\n  flex-shrink: 0;\r\n}\r\n.cv-settings-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }\r\n/* Same pairing as `.cv-detail-row-eyebrow` (`--cv-muted` on `--cv-bg`), verified there already. */\r\n.cv-settings-row-label {\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-settings-select {\r\n  width: 100%;\r\n  padding: 0.45rem 0.6rem;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: inherit;\r\n  font-size: 0.85rem;\r\n  transition: border-color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-settings-select:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }\r\n.cv-settings-empty { font-size: 0.85rem; color: var(--cv-muted); }\r\n/* `--cv-muted` on `--cv-bg` \u2014 4.83:1 light / 6.97:1 dark, computed fresh for THIS pairing (the note\r\n   used to sit on `--cv-surface` with its own card; now it sits directly on the section's `--cv-bg`,\r\n   a different background that earns its own check rather than inheriting the old one's number). */\r\n.cv-settings-note {\r\n  margin: 0;\r\n  color: var(--cv-muted);\r\n  font-size: 0.8rem;\r\n  line-height: 1.5;\r\n}\r\n/* Closing note for the tab as a whole, not any one section \u2014 sits directly on `.cv-settings-body`,\r\n   which shares the same `--cv-bg` as `.cv-settings-section-body` above, so the `--cv-muted`-on-\r\n   `--cv-bg` pairing already verified for `.cv-settings-note` carries over unchanged. Centred and\r\n   quieter than a row: this is a footnote about the tab, not a row's worth of content. */\r\n.cv-settings-more {\r\n  margin: 0;\r\n  padding: 0 0.5rem;\r\n  text-align: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n  line-height: 1.5;\r\n}\r\n\r\n/* \u2500\u2500 Centred states (mic gate) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-center {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.85rem;\r\n  padding: 1.75rem;\r\n  text-align: center;\r\n}\r\n.cv-center p { color: var(--cv-muted); margin: 0; font-size: 0.85rem; line-height: 1.5; }\r\n\r\n\r\n/* \"C\xF3mo permitirlo\" \u2014 a native <details> disclosure.\r\n   Collapsed by default: the people who already know where the padlock is should not have to read\r\n   past three steps to get there, and the people who don't get them without leaving the app. */\r\n.cv-help {\r\n  width: 100%;\r\n  margin-top: 0.15rem;\r\n  text-align: left;\r\n}\r\n.cv-help summary {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  justify-content: center;\r\n  width: 100%;\r\n  padding: 0.3rem;\r\n  border-radius: 8px;\r\n  color: var(--cv-muted);\r\n  font: 500 0.75rem var(--cv-font);\r\n  cursor: pointer;\r\n  list-style: none; /* hide the default triangle; the icon is the affordance */\r\n  transition: color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-help summary::-webkit-details-marker { display: none; }\r\n.cv-help summary:hover { color: var(--cv-text); background: var(--cv-surface-2); }\r\n.cv-help[open] summary { color: var(--cv-text); margin-bottom: 0.35rem; }\r\n\r\n.cv-help ol {\r\n  margin: 0;\r\n  padding: 0.6rem 0.7rem 0.6rem 1.6rem;\r\n  background: var(--cv-surface);\r\n  border-radius: 10px;\r\n  color: var(--cv-muted);\r\n  font-size: 0.73rem;\r\n  line-height: 1.55;\r\n}\r\n.cv-help li + li { margin-top: 0.3rem; }\r\n.cv-help li::marker { color: var(--cv-faint); font-variant-numeric: tabular-nums; }\r\n\r\n.cv-help a {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  margin-top: 0.45rem;\r\n  padding-left: 0.1rem;\r\n  color: var(--cv-accent-strong);\r\n  font-size: 0.73rem;\r\n  font-weight: 500;\r\n  text-decoration: none;\r\n}\r\n.cv-help a:hover { text-decoration: underline; }\r\n\r\n/* The panel is the only thing that moves, and only when opened by hand \u2014 so it animates. */\r\n.cv-help[open] ol {\r\n  animation: cv-gate-in 200ms var(--cv-ease-out) both;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-help[open] ol { animation: none; }\r\n}\r\n\r\n/* \u2500\u2500 The permission gate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   Four states, and only ONE of them deserves a designed screen.\r\n\r\n   `checking` resolves in ~100\u2013400 ms. Rendering it immediately means the user\r\n   sees text appear and vanish inside a blink \u2014 a flash reads as jank, not as\r\n   information. So it is delayed 450 ms with `both` fill: invisible during the\r\n   delay, and if the check finishes first (the usual case, and always the case\r\n   when permission is already granted) it is never painted at all.\r\n\r\n   `prompting` is the one the user actually reads and acts on. It gets the\r\n   hierarchy: mark, title, reason, action.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-gate {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.6rem;\r\n  padding: 1.5rem 1.75rem;\r\n  text-align: center;\r\n}\r\n\r\n/* The disc echoes the call avatar \u2014 one visual language, not two. */\r\n.cv-gate-mark {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 52px;\r\n  height: 52px;\r\n  border-radius: 999px;\r\n  background: var(--cv-accent-soft);\r\n  color: var(--cv-accent-strong);\r\n  margin-bottom: 0.15rem;\r\n}\r\n.cv-gate[data-tone='danger'] .cv-gate-mark {\r\n  background: var(--cv-danger-soft);\r\n  color: var(--cv-danger);\r\n}\r\n\r\n.cv-gate-title {\r\n  margin: 0;\r\n  font: 600 0.95rem var(--cv-font);\r\n  color: var(--cv-text);\r\n  letter-spacing: -0.01em;\r\n}\r\n.cv-gate p {\r\n  margin: 0;\r\n  color: var(--cv-muted);\r\n  font-size: 0.8rem;\r\n  line-height: 1.5;\r\n  max-width: 24ch; /* two comfortable lines, not one long one */\r\n}\r\n.cv-gate .cv-btn { margin-top: 0.5rem; }\r\n\r\n/* Entrance. Staggered 45 ms apart: the eye follows mark \u2192 title \u2192 reason \u2192\r\n   action, which is the order it needs to read them in anyway. */\r\n.cv-gate > * {\r\n  animation: cv-gate-in 260ms var(--cv-ease-out) both;\r\n}\r\n.cv-gate > *:nth-child(2) { animation-delay: 45ms; }\r\n.cv-gate > *:nth-child(3) { animation-delay: 90ms; }\r\n.cv-gate > *:nth-child(4) { animation-delay: 135ms; }\r\n\r\n@keyframes cv-gate-in {\r\n  from { opacity: 0; transform: translateY(6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n\r\n/* The checking state: held back, then a quiet fade. No stagger, no movement \u2014\r\n   it is a status, not a screen, and it should barely register. */\r\n.cv-gate[data-state='checking'] > *,\r\n.cv-gate[data-state='warming'] > * {\r\n  animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both;\r\n}\r\n@keyframes cv-gate-wait {\r\n  from { opacity: 0; }\r\n  to   { opacity: 1; }\r\n}\r\n/* A slow breath rather than a spinner: a spinner promises a long wait, and this\r\n   is not one. */\r\n.cv-gate[data-state='checking'] .cv-gate-mark,\r\n.cv-gate[data-state='warming'] .cv-gate-mark {\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-muted);\r\n  animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both,\r\n             cv-breathe 1.8s ease-in-out 450ms infinite;\r\n}\r\n@keyframes cv-breathe {\r\n  0%, 100% { opacity: 1; }\r\n  50%      { opacity: 0.45; }\r\n}\r\n\r\n/* Reduced motion: keep the fade and \u2014 critically \u2014 keep the DELAY, which is\r\n   timing rather than motion and is the whole point. Drop the travel. */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-gate > * {\r\n    animation: cv-gate-wait 200ms var(--cv-ease-out) both;\r\n  }\r\n  .cv-gate[data-state='checking'] .cv-gate-mark,\r\n  .cv-gate[data-state='warming'] .cv-gate-mark {\r\n    animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-avatar-ping,\r\n  .cv-timer i { animation: none; }\r\n  .cv-softphone *,\r\n  .cv-softphone *::before { transition-duration: 0.01ms !important; }\r\n}\r\n\r\n/* `*` and `#` stay in the grid \u2014 a keypad without them is not a keypad \u2014 but they are not part of a\r\n   number (toE164 keeps digits only). Dimmed rather than `disabled` so the grid still reads as a\r\n   keypad and the glyphs stay legible; they become live DTMF on the in-call screen. */\r\n.cv-key[data-dialable='false'] {\r\n  cursor: default;\r\n}\r\n.cv-key[data-dialable='false'] b {\r\n  color: var(--cv-faint);\r\n}\r\n.cv-key[data-dialable='false']:hover {\r\n  background: none;\r\n}\r\n.cv-key[data-dialable='false']:active {\r\n  transform: none;\r\n}\r\n\r\n/* \u2500\u2500 Country picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   The prefix chip + its list. Sits where the old left spacer was, so the number\r\n   stays optically centred against the 36px erase button on the right.\r\n\r\n   The popover is absolutely positioned inside the widget rather than portalled:\r\n   there is nowhere to portal TO inside a shadow root, and the widget already owns\r\n   its stacking context. That also means it cannot be clipped by a host's\r\n   `overflow:hidden` \u2014 the failure SPEC \xA72.6 lists for the CRM's Radix version.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* The anchor spans the whole ROW, not just the chip.\r\n   With the chip centred, anchoring to the chip put the popover's left edge at ~120px and its right\r\n   edge past the widget \u2014 clipped by `.cv-softphone { overflow: hidden }`, which is the classic\r\n   absolute-inside-overflow bug. Anchoring to the full row makes overflowing arithmetically\r\n   impossible: `left:0; right:0` cannot be wider than the row that contains it. */\r\n.cv-cp {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  width: 100%;\r\n}\r\n/* A PILL, with a resting surface and a border.\r\n   This was `border: none; background: none` \u2014 invisible until hover, so it read as a label rather\r\n   than a control. That was survivable when it sat inline beside the number; alone on its own row it\r\n   is just floating text, and nothing says \"you can change this\". A control that changes state has to\r\n   look like one at rest, not only under a cursor that may never arrive (touch has no hover at all). */\r\n.cv-cp-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  height: 30px;\r\n  padding: 0 0.5rem 0 0.4rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 999px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: 600 0.8rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s, border-color 0.15s;\r\n}\r\n.cv-cp-chip:hover { background: var(--cv-surface-2); }\r\n.cv-cp-chip:active { transform: scale(0.95); }\r\n/* Open: the chip is the thing the list belongs to, so it stays visibly engaged while the list is up. */\r\n.cv-cp-chip[aria-expanded='true'] {\r\n  background: var(--cv-accent-soft);\r\n  border-color: var(--cv-accent);\r\n}\r\n.cv-cp-dial {\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.02em;\r\n}\r\n.cv-cp-caret {\r\n  color: var(--cv-faint);\r\n  flex-shrink: 0;\r\n  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n.cv-cp-caret[data-open='true'] { transform: rotate(180deg); }\r\n\r\n/* The country mark. TWO designed states in ONE 20\xD714 box (a flag's own 3:2), so the chip and every\r\n   row keep their rhythm whichever is showing \u2014 nothing reflows when the flags land. The plate is the\r\n   LOADING state (flags are a lazy import) and the offline state, not a fallback: there is no flash of\r\n   something broken, only a designed plate becoming a designed flag, once per session.\r\n   `::part(country-mark)` lets a host restyle either. */\r\n.cv-mark {\r\n  width: 20px;\r\n  height: 14px;\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--cv-font);\r\n}\r\n/* The SVG fills the slot exactly; 3x2 is the flag aspect, so nothing is letterboxed or cropped. */\r\n.cv-mark-svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  border-radius: 2px;\r\n  object-fit: cover;\r\n}\r\n.cv-mark[data-plate='true'] {\r\n  /* The ISO code set into the slot a flag will occupy. */\r\n  font-family: var(--cv-font);\r\n  font-size: 8.5px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.04em;\r\n  color: var(--cv-text);\r\n  background: var(--cv-surface-2);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 3px;\r\n  /* Cap-height letters sit optically high in a 14px box; nudge them back to centre. */\r\n  padding-top: 1px;\r\n}\r\n\r\n.cv-cp-pop {\r\n  position: absolute;\r\n  top: calc(100% + 6px);\r\n  /* Pinned to BOTH row edges, so it is bounded by the container by construction \u2014 no width guess,\r\n     no media query, nothing to clip. `max-width` keeps it from looking stretched on a wide host. */\r\n  left: 0;\r\n  right: 0;\r\n  margin-inline: auto;\r\n  max-width: 260px;\r\n  z-index: 20;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n  overflow: hidden;\r\n  /* Grows from the chip it belongs to, rather than appearing on top of it. */\r\n  transform-origin: top center;\r\n  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-cp-in {\r\n  from { opacity: 0; transform: translateY(-4px) scale(0.97); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-cp-pop { animation: none; }\r\n  .cv-cp-caret { transition: none; }\r\n}\r\n.cv-cp-search {\r\n  flex-shrink: 0;\r\n  padding: 0.5rem 0.65rem;\r\n  border: none;\r\n  border-bottom: 1px solid var(--cv-border);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  outline: none;\r\n}\r\n.cv-cp-search::placeholder { color: var(--cv-faint); }\r\n/* Both states named explicitly. In the CRM the widget mounts via `/ui`, i.e. in the LIGHT DOM \u2014 none\r\n   of the shadow-DOM isolation the web-component playground proves applies there, so a host's focus\r\n   ring (or the browser's own) can land on our input. The accent underline IS the focus indicator. */\r\n.cv-cp-search:focus,\r\n.cv-cp-search:focus-visible {\r\n  outline: none;\r\n  border-bottom-color: var(--cv-accent);\r\n  border-bottom-width: 2px;\r\n  padding-bottom: calc(0.5rem - 1px);\r\n}\r\n.cv-cp-list {\r\n  overflow-y: auto;\r\n  max-height: 220px;\r\n  padding: 0.25rem;\r\n}\r\n.cv-cp-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.4rem 0.45rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-cp-item:hover { background: var(--cv-surface-2); }\r\n/* The current country is stated by the row, not only by a tick at the far right. */\r\n.cv-cp-item[aria-selected='true'] { background: var(--cv-accent-soft); }\r\n.cv-cp-item[aria-selected='true'] .cv-cp-name { font-weight: 600; }\r\n.cv-cp-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-cp-item .cv-cp-dial {\r\n  color: var(--cv-muted);\r\n  font-weight: 400;\r\n}\r\n.cv-cp-check { color: var(--cv-accent-strong); flex-shrink: 0; }\r\n.cv-cp-check[data-on='false'] { opacity: 0; }\r\n.cv-cp-empty {\r\n  margin: 0;\r\n  padding: 1rem 0.5rem;\r\n  text-align: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n}\r\n";
 
 // src/element/index.ts
 var EVENTS = {
@@ -9372,7 +9729,8 @@ var EVENTS = {
   callStarted: "cv-call-started",
   callEnded: "cv-call-ended",
   error: "cv-error",
-  leaderChanged: "cv-leadership-changed"
+  leaderChanged: "cv-leadership-changed",
+  transferOutcome: "cv-transfer-outcome"
 };
 var CoventiaSoftphoneElement = class extends HTMLElement {
   /**
@@ -9490,7 +9848,9 @@ var CoventiaSoftphoneElement = class extends HTMLElement {
       phone.on(
         "leaderChanged" /* LeaderChanged */,
         ({ isLeader }) => this.#emit(EVENTS.leaderChanged, { isLeader })
-      )
+      ),
+      // Payload is already exactly `TransferOutcomeEvent` — no reshaping needed, unlike the events above.
+      phone.on("transferOutcome" /* TransferOutcome */, (payload) => this.#emit(EVENTS.transferOutcome, payload))
     ];
   }
   #detach() {
@@ -9537,9 +9897,9 @@ var CoventiaSoftphoneElement = class extends HTMLElement {
       ...this.#config.incomingCallAction ? { incomingCallAction: this.#config.incomingCallAction } : {}
     };
     this.#root.render(
-      (0, import_react29.createElement)(
+      (0, import_react32.createElement)(
         SoftphoneProvider,
-        { softphone: this.#softphone, children: (0, import_react29.createElement)(SoftphoneWidget, widgetProps) }
+        { softphone: this.#softphone, children: (0, import_react32.createElement)(SoftphoneWidget, widgetProps) }
       )
     );
   }