@coventia/softphone 0.2.1 → 0.3.0

package/dist/element/index.js

@@ -6931,7 +6931,7 @@ var require_jsx_runtime = __commonJS({
 });
 
 // src/element/index.ts
-var import_react32 = __toESM(require_react(), 1);
+var import_react41 = __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_react30 = __toESM(require_react(), 1);
+var import_react39 = __toESM(require_react(), 1);
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react3 = __toESM(require_react());
@@ -7043,6 +7043,14 @@ var ArrowRight = createLucideIcon("ArrowRight", [
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/bell-ring.js
+var BellRing = createLucideIcon("BellRing", [
+  ["path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", key: "1qo2s2" }],
+  ["path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0", key: "qgo35s" }],
+  ["path", { d: "M4 2C2.8 3.7 2 5.7 2 8", key: "tap9e0" }],
+  ["path", { d: "M22 8c0-2.3-.8-4.3-2-6", key: "5bb3ad" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/calendar-clock.js
 var CalendarClock = createLucideIcon("CalendarClock", [
   ["path", { d: "M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5", key: "1osxxc" }],
@@ -7157,6 +7165,13 @@ var MonitorSmartphone = createLucideIcon("MonitorSmartphone", [
   ["rect", { width: "6", height: "10", x: "16", y: "12", rx: "2", key: "1egngj" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/music.js
+var Music = createLucideIcon("Music", [
+  ["path", { d: "M9 18V5l12-2v13", key: "1jmyc2" }],
+  ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
+  ["circle", { cx: "18", cy: "16", r: "3", key: "1hluhg" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/pause.js
 var Pause = createLucideIcon("Pause", [
   ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
@@ -7282,6 +7297,19 @@ var Users = createLucideIcon("Users", [
   ["path", { d: "M16 3.13a4 4 0 0 1 0 7.75", key: "1da9ce" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/volume-2.js
+var Volume2 = createLucideIcon("Volume2", [
+  [
+    "path",
+    {
+      d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
+      key: "uqj9uw"
+    }
+  ],
+  ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
+  ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/x.js
 var X = createLucideIcon("X", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
@@ -7403,7 +7431,9 @@ function useDevices() {
       outputs: audio.outputs,
       currentInputId: audio.currentInputId,
       currentOutputId: audio.currentOutputId,
+      currentRingtoneOutputId: audio.currentRingtoneOutputId,
       canSelectOutput: audio.canSelectOutput,
+      canSelectRingtoneOutput: audio.canSelectRingtoneOutput,
       setInput: (deviceId) => audio.setInput(deviceId),
       setOutput: (deviceId) => audio.setOutput(deviceId),
       setRingtoneOutput: (deviceId) => audio.setRingtoneOutput(deviceId),
@@ -7660,6 +7690,59 @@ var KEYPAD_KEYS = [
   ["#", ""]
 ];
 
+// src/ui/audio/classic-ring.ts
+var C6 = 1046.5;
+var E6 = 1318.51;
+var HARMONICITY = 4;
+var INDEX = 1.8;
+var CLASSIC_CYCLE_SECONDS = 3;
+var CLASSIC_GAIN = 0.3841;
+function classicRingGraph(ctx, dest) {
+  const output = ctx.createGain();
+  output.gain.value = CLASSIC_GAIN;
+  const chain = ["highpass", "highpass", "lowpass", "lowpass"].map((type) => {
+    const f = ctx.createBiquadFilter();
+    f.type = type;
+    f.frequency.value = type === "highpass" ? 250 : 7500;
+    f.Q.value = 0.707;
+    return f;
+  });
+  for (let i = 0; i < chain.length - 1; i++) chain[i].connect(chain[i + 1]);
+  chain[chain.length - 1].connect(output);
+  output.connect(dest);
+  return { input: chain[0], output };
+}
+function strike(ctx, input, t, freq, vel, track) {
+  const carrier = ctx.createOscillator();
+  carrier.frequency.value = freq;
+  const modulator = ctx.createOscillator();
+  modulator.frequency.value = freq * HARMONICITY;
+  const depth = ctx.createGain();
+  depth.gain.setValueAtTime(0, t);
+  depth.gain.linearRampToValueAtTime(INDEX * freq, t + 4e-3);
+  depth.gain.setTargetAtTime(0, t + 4e-3, 0.02);
+  modulator.connect(depth);
+  depth.connect(carrier.frequency);
+  const amp = ctx.createGain();
+  amp.gain.setValueAtTime(0, t);
+  amp.gain.linearRampToValueAtTime(vel, t + 5e-3);
+  amp.gain.setTargetAtTime(0, t + 5e-3, 0.15);
+  amp.gain.setTargetAtTime(0, t + 0.045, 0.08);
+  carrier.connect(amp);
+  amp.connect(input);
+  for (const o of [carrier, modulator]) {
+    o.start(t);
+    o.stop(t + 0.7);
+    track(o);
+  }
+}
+function scheduleClassicCycle(ctx, input, t0, track) {
+  for (const ring of [0, 0.6]) {
+    for (let i = 0; i < 8; i++) strike(ctx, input, t0 + ring + i * 0.05, i % 2 ? E6 : C6, 0.55 + 0.1 * (i % 2), track);
+  }
+  return CLASSIC_CYCLE_SECONDS;
+}
+
 // src/ui/audio/audio.ts
 var TONE_HZ = 425;
 function createRemoteAudio() {
@@ -7702,30 +7785,159 @@ function primeAudio() {
   if (ctx && ctx.state === "suspended") void ctx.resume?.().catch(() => {
   });
 }
-function playRingtone() {
+function playRingtone(options = {}) {
   const ctx = sharedContext();
   if (!ctx) return { stop() {
   } };
+  const bus = ctx.createGain();
+  const route = routeToDevice(ctx, bus, options.sinkId ?? null);
+  const voice = options.buffer ? fileVoice(ctx, bus, options.buffer, options.loop ?? null) : synthesisedVoice(ctx, bus);
+  return {
+    stop() {
+      voice.stop();
+      route.stop();
+    }
+  };
+}
+function fileVoice(ctx, bus, buffer, loop) {
+  const FILE_LEVEL = 1;
+  const RAMP = 0.02;
+  const LEAD = 0.08;
   const gain = ctx.createGain();
   gain.gain.value = 0;
-  gain.connect(ctx.destination);
-  const osc = ctx.createOscillator();
-  osc.type = "sine";
-  osc.frequency.value = TONE_HZ;
-  osc.connect(gain);
-  osc.start();
-  const LEVEL = 0.8;
-  const RAMP = 0.02;
-  const burst = (at, dur) => {
+  gain.connect(bus);
+  const src = ctx.createBufferSource();
+  src.buffer = buffer;
+  src.loop = true;
+  const points = loop && loop.start >= 0 && loop.end > loop.start && loop.end <= buffer.duration + 1e-3 ? loop : null;
+  if (points) {
+    src.loopStart = points.start;
+    src.loopEnd = points.end;
+  }
+  src.connect(gain);
+  let stopped = false;
+  void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(() => {
+    if (stopped) return;
+    const at = ctx.currentTime + LEAD;
     gain.gain.setValueAtTime(0, at);
-    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
-    gain.gain.setValueAtTime(LEVEL, at + dur - RAMP);
-    gain.gain.linearRampToValueAtTime(0, at + dur);
+    gain.gain.linearRampToValueAtTime(FILE_LEVEL, at + RAMP);
+    src.start(at, points?.start ?? 0);
+  });
+  return {
+    stop() {
+      stopped = true;
+      try {
+        src.stop();
+      } catch {
+      }
+      try {
+        gain.disconnect();
+      } catch {
+      }
+    }
+  };
+}
+function routeToDevice(ctx, bus, sinkId) {
+  const toDefault = () => {
+    bus.connect(ctx.destination);
+  };
+  const el = sinkId && typeof document !== "undefined" ? document.createElement("audio") : null;
+  const dest = el && typeof ctx.createMediaStreamDestination === "function" ? ctx.createMediaStreamDestination() : null;
+  const canRoute = el && dest && typeof el.setSinkId === "function";
+  if (!canRoute || !sinkId) {
+    toDefault();
+    return { stop: () => safeDisconnect(bus) };
+  }
+  let stopped = false;
+  el.style.display = "none";
+  el.srcObject = dest.stream;
+  document.body.appendChild(el);
+  bus.connect(dest);
+  void el.setSinkId(sinkId).then(() => el.play()).catch((error) => {
+    if (stopped) return;
+    console.warn("[softphone] sound could not be sent to the chosen device; using the default output", error);
+    safeDisconnect(bus);
+    teardown(el);
+    toDefault();
+  });
+  return {
+    stop() {
+      stopped = true;
+      safeDisconnect(bus);
+      teardown(el);
+    }
+  };
+}
+function safeDisconnect(node) {
+  try {
+    node.disconnect();
+  } catch {
+  }
+}
+function teardown(el) {
+  el.pause();
+  el.srcObject = null;
+  el.remove();
+}
+var TEST_TONE_MS = 900;
+function playTestTone(sinkId) {
+  const ctx = sharedContext();
+  if (!ctx) return { stop() {
+  } };
+  const bus = ctx.createGain();
+  const route = routeToDevice(ctx, bus, sinkId);
+  const LEVEL = 0.5;
+  const NOTES = [
+    { hz: 660, at: 0.05 },
+    { hz: 880, at: 0.4 }
+  ];
+  const oscs = [];
+  let stopped = false;
+  let timer = null;
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    if (timer) clearTimeout(timer);
+    for (const o of oscs) {
+      try {
+        o.stop();
+      } catch {
+      }
+    }
+    route.stop();
   };
-  const scheduleCycle = (at) => {
-    burst(at, 0.4);
-    burst(at + 0.6, 0.4);
-    return 3;
+  void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(() => {
+    if (stopped) return;
+    const t0 = ctx.currentTime;
+    for (const { hz, at } of NOTES) {
+      const gain = ctx.createGain();
+      gain.gain.value = 0;
+      gain.connect(bus);
+      const osc = ctx.createOscillator();
+      osc.type = "sine";
+      osc.frequency.value = hz;
+      osc.connect(gain);
+      const start = t0 + at;
+      gain.gain.setValueAtTime(0, start);
+      gain.gain.linearRampToValueAtTime(LEVEL, start + 0.015);
+      gain.gain.setValueAtTime(LEVEL, start + 0.25);
+      gain.gain.linearRampToValueAtTime(0, start + 0.32);
+      osc.start(start);
+      osc.stop(start + 0.34);
+      oscs.push(osc);
+    }
+    timer = setTimeout(stop, TEST_TONE_MS);
+  });
+  return { stop };
+}
+function synthesisedVoice(ctx, bus) {
+  const { input, output } = classicRingGraph(ctx, bus);
+  const scheduled = /* @__PURE__ */ new Set();
+  const track = (o) => {
+    scheduled.add(o);
+    o.onended = () => scheduled.delete(o);
   };
   const LOOKAHEAD = 0.5;
   const TICK_MS = 150;
@@ -7734,7 +7946,7 @@ function playRingtone() {
   let timer = null;
   let nextAt = 0;
   const pump = () => {
-    while (nextAt < ctx.currentTime + LOOKAHEAD) nextAt += scheduleCycle(nextAt);
+    while (nextAt < ctx.currentTime + LOOKAHEAD) nextAt += scheduleClassicCycle(ctx, input, nextAt, track);
   };
   void Promise.resolve(ctx.resume?.()).catch(() => {
   }).finally(() => {
@@ -7747,12 +7959,15 @@ function playRingtone() {
     stop() {
       stopped = true;
       if (timer) clearInterval(timer);
-      try {
-        osc.stop();
-      } catch {
+      for (const o of scheduled) {
+        try {
+          o.stop();
+        } catch {
+        }
       }
+      scheduled.clear();
       try {
-        gain.disconnect();
+        output.disconnect();
       } catch {
       }
     }
@@ -9304,6 +9519,113 @@ function HistoryTab({ source }) {
   ] });
 }
 
+// src/ui/views/SettingsTab.tsx
+var import_react29 = __toESM(require_react(), 1);
+
+// src/ui/audio/ringtone-store.ts
+var stores = /* @__PURE__ */ new WeakMap();
+function ringtoneStore(softphone) {
+  const source = softphone.sources?.ringtones;
+  if (!source) return null;
+  let store = stores.get(softphone);
+  if (!store) {
+    store = createRingtoneStore(source);
+    stores.set(softphone, store);
+  }
+  return store;
+}
+function createRingtoneStore(source, decodeImpl = decodeRingtone) {
+  let settings = null;
+  let audioWanted = false;
+  let loaded = null;
+  let loading2 = null;
+  let inFlight = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    for (const l of listeners) l();
+  };
+  const effectiveUrl = () => {
+    if (!settings) return null;
+    return settings.catalogue.find((r) => r.id === settings.effective)?.url ?? null;
+  };
+  const loadEffective = async () => {
+    const url = effectiveUrl();
+    if (!audioWanted || !url || loaded?.url === url || loading2 === url) return;
+    loading2 = url;
+    try {
+      const buffer = await decodeImpl(url);
+      if (audioWanted && effectiveUrl() === url) {
+        loaded = { url, buffer };
+        notify();
+      }
+    } catch (error) {
+      console.warn(`[softphone] ringtone could not be loaded, using the built-in tone: ${url}`, error);
+    } finally {
+      if (loading2 === url) loading2 = null;
+    }
+  };
+  const apply = (next) => {
+    settings = next;
+    if (loaded && loaded.url !== effectiveUrl()) loaded = null;
+    notify();
+  };
+  return {
+    getSettings: () => settings,
+    readyBuffer: () => loaded && loaded.url === effectiveUrl() ? loaded.buffer : null,
+    readyLoop: () => {
+      if (!loaded || loaded.url !== effectiveUrl() || !settings) return null;
+      return settings.catalogue.find((r) => r.id === settings.effective)?.loop ?? null;
+    },
+    refresh() {
+      inFlight ??= (async () => {
+        if (!settings && source.cached) {
+          const early = await source.cached().catch(() => null);
+          if (early && !settings) {
+            apply(early);
+            void loadEffective();
+          }
+        }
+        try {
+          apply(await source.get());
+        } catch (error) {
+          console.warn("[softphone] ringtone settings could not be loaded; keeping the previous ones", error);
+        } finally {
+          inFlight = null;
+        }
+        await loadEffective();
+      })();
+      return inFlight;
+    },
+    async setMine(id) {
+      apply(await source.setMine(id));
+      void loadEffective();
+    },
+    wantAudio(on) {
+      if (audioWanted === on) return;
+      audioWanted = on;
+      if (!on) {
+        loaded = null;
+        notify();
+      } else {
+        void loadEffective();
+      }
+    },
+    decode: (url) => decodeImpl(url),
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+async function decodeRingtone(url) {
+  const Offline = typeof OfflineAudioContext !== "undefined" ? OfflineAudioContext : globalThis.webkitOfflineAudioContext;
+  if (!Offline) throw new Error("this browser cannot decode audio files");
+  const res = await fetch(url, { credentials: "omit" });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const bytes = await res.arrayBuffer();
+  return new Offline(1, 1, 48e3).decodeAudioData(bytes);
+}
+
 // src/ui/views/SettingsSection.tsx
 var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
 function SettingsSection({
@@ -9316,17 +9638,522 @@ function SettingsSection({
   ] });
 }
 
-// src/ui/views/SettingsTab.tsx
+// src/ui/views/settings/SettingsNavRow.tsx
 var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+function SettingsNavRow({
+  icon: Icon3,
+  title,
+  value,
+  onOpen,
+  rowRef
+}) {
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "cv-settings-row-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon3, { size: 16 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "cv-settings-nav-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "cv-settings-nav-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "cv-settings-nav-value", children: value })
+    ] }),
+    onOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRight, { size: 16, className: "cv-settings-nav-chevron", "aria-hidden": true }) : null
+  ] });
+  return onOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "cv-settings-nav", onClick: onOpen, ref: rowRef, children: inner }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "cv-settings-nav cv-settings-nav--static", children: inner });
+}
+
+// src/ui/views/settings/DevicePage.tsx
+var import_react24 = __toESM(require_react(), 1);
+
+// src/ui/views/settings/ChoiceList.tsx
+var import_react22 = __toESM(require_react(), 1);
+var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+function ChoiceList({
+  label,
+  choices,
+  value,
+  onSelect,
+  onReselect
+}) {
+  const name = (0, import_react22.useId)();
+  const pointer = (0, import_react22.useRef)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "cv-choices", role: "radiogroup", "aria-label": label, children: choices.map((c) => {
+    const checked = c.value === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "label",
+      {
+        className: "cv-choice",
+        "data-checked": checked || void 0,
+        onPointerDown: () => {
+          pointer.current = true;
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "input",
+            {
+              type: "radio",
+              className: "cv-choice-input",
+              name,
+              value: c.value,
+              checked,
+              onChange: () => {
+                const via = pointer.current ? "pointer" : "keyboard";
+                pointer.current = false;
+                onSelect(c.value, via);
+              },
+              onClick: () => {
+                if (c.value === value) {
+                  pointer.current = false;
+                  onReselect?.(c.value);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "cv-choice-text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-choice-label", children: c.label }),
+            c.sub ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-choice-sub", children: c.sub }) : null
+          ] }),
+          c.trailing,
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Check, { size: 16, className: "cv-choice-check", "aria-hidden": true })
+        ]
+      },
+      c.value
+    );
+  }) });
+}
+
+// src/ui/views/settings/SettingsPage.tsx
+var import_react23 = __toESM(require_react(), 1);
+var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
+function SettingsPage({
+  title,
+  intro,
+  onBack,
+  children
+}) {
+  const titleId = (0, import_react23.useId)();
+  const heading = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => heading.current?.focus(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: "cv-detail cv-settings-page",
+      role: "region",
+      "aria-labelledby": titleId,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onBack();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "cv-detail-head", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "cv-detail-back", onClick: onBack, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrowLeft, { size: 16, "aria-hidden": true }),
+          "Ajustes"
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "cv-settings-page-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: "cv-settings-page-title", id: titleId, tabIndex: -1, ref: heading, children: title }),
+          intro ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "cv-settings-page-intro", children: intro }) : null,
+          children
+        ] })
+      ]
+    }
+  );
+}
+
+// src/ui/views/settings/DevicePage.tsx
+var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+var SYSTEM_DEFAULT = "";
+var PAGES = {
+  input: {
+    title: "Micr\xF3fono",
+    intro: "El micr\xF3fono que usa el tel\xE9fono en las llamadas.",
+    empty: "No se encontr\xF3 ning\xFAn micr\xF3fono."
+  },
+  output: {
+    title: "Altavoces",
+    intro: "D\xF3nde oyes a la otra persona durante una llamada.",
+    empty: "No se encontr\xF3 ning\xFAn altavoz."
+  },
+  ringtone: {
+    title: "Salida del tono",
+    intro: "D\xF3nde suena el tono cuando entra una llamada. La llamada se oye por \xABAltavoces\xBB.",
+    empty: "No se encontr\xF3 ning\xFAn altavoz."
+  }
+};
+function deviceSummary(kind, list, id) {
+  const i = id ? list.findIndex((d) => d.deviceId === id) : -1;
+  return i >= 0 ? deviceLabel(list[i], i, kind) : "Predeterminado del sistema";
+}
+function DevicePage({ kind, onBack }) {
+  const devices = useDevices();
+  const page = PAGES[kind];
+  const list = kind === "input" ? devices.inputs : devices.outputs;
+  const current = kind === "input" ? devices.currentInputId : kind === "output" ? devices.currentOutputId : devices.currentRingtoneOutputId;
+  const apply = (id) => kind === "input" ? devices.setInput(id) : kind === "output" ? devices.setOutput(id) : devices.setRingtoneOutput(id);
+  const choices = [
+    { value: SYSTEM_DEFAULT, label: "Predeterminado del sistema" },
+    ...list.map((d, i) => ({ value: d.deviceId, label: deviceLabel(d, i, kind) }))
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(SettingsPage, { title: page.title, intro: page.intro, onBack, children: [
+    list.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      ChoiceList,
+      {
+        label: page.title,
+        choices,
+        value: current ?? SYSTEM_DEFAULT,
+        onSelect: (v) => void apply(v === SYSTEM_DEFAULT ? null : v)
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "cv-settings-page-empty", children: page.empty }),
+    kind === "output" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SpeakerTest, { sinkId: devices.currentOutputId }) : null
+  ] });
+}
+function SpeakerTest({ sinkId }) {
+  const [testing, setTesting] = (0, import_react24.useState)(false);
+  const tone = (0, import_react24.useRef)(null);
+  const timer = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(
+    () => () => {
+      tone.current?.stop();
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const test = () => {
+    primeAudio();
+    tone.current?.stop();
+    tone.current = playTestTone(sinkId);
+    setTesting(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setTesting(false), TEST_TONE_MS);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", className: "cv-btn cv-settings-test", onClick: test, disabled: testing, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Volume2, { size: 16, "aria-hidden": true }),
+    testing ? "Sonando\u2026" : "Probar altavoz"
+  ] });
+}
+
+// src/ui/views/settings/RingtonePage.tsx
+var import_react27 = __toESM(require_react(), 1);
+
+// src/ui/views/settings/ringtone-state.ts
+var import_react26 = __toESM(require_react(), 1);
+
+// src/ui/audio/preview.ts
+var PREVIEW_MAX_MS = 1e4;
+var BUILT_IN_PREVIEW_MS = 6e3;
+function previewDurationMs(buffer, loop) {
+  if (!buffer) return BUILT_IN_PREVIEW_MS;
+  const seconds = loop ? loop.end - loop.start : buffer.duration;
+  return Math.min(seconds * 1e3, PREVIEW_MAX_MS);
+}
+
+// src/ui/views/settings/ringtone-state.ts
+var noSubscribe = () => () => {
+};
+var noSettings = () => null;
+function useRingtoneSettings(store) {
+  const settings = (0, import_react26.useSyncExternalStore)(store?.subscribe ?? noSubscribe, store?.getSettings ?? noSettings);
+  const [failed, setFailed] = (0, import_react26.useState)(false);
+  const load = (0, import_react26.useCallback)(() => {
+    if (!store) return () => {
+    };
+    let live = true;
+    setFailed(false);
+    void store.refresh().then(() => {
+      if (live) setFailed(store.getSettings() === null);
+    });
+    return () => {
+      live = false;
+    };
+  }, [store]);
+  (0, import_react26.useEffect)(load, [load]);
+  return { settings, failed, retry: load };
+}
+function ringtoneSummary(settings, failed) {
+  if (!settings) return failed ? "No disponible" : "Cargando\u2026";
+  const byId = (id) => id ? settings.catalogue.find((r) => r.id === id) : void 0;
+  const mine = byId(settings.mine);
+  if (mine) return mine.name;
+  const org = byId(settings.orgDefault);
+  if (org) return `${org.name} \xB7 organizaci\xF3n`;
+  return settings.catalogue.find((r) => r.url === null)?.name ?? "Predeterminado";
+}
+function useRingtonePreview(store, sinkId) {
+  const [playing, setPlaying] = (0, import_react26.useState)(null);
+  const [error, setError] = (0, import_react26.useState)(null);
+  const current = (0, import_react26.useRef)(null);
+  const generation = (0, import_react26.useRef)(0);
+  const stop = (0, import_react26.useCallback)(() => {
+    generation.current += 1;
+    const c = current.current;
+    current.current = null;
+    if (c?.timer) clearTimeout(c.timer);
+    c?.tone?.stop();
+    setPlaying(null);
+  }, []);
+  (0, import_react26.useEffect)(() => stop, [stop]);
+  const start = (settings, choice) => {
+    stop();
+    primeAudio();
+    setError(null);
+    const gen = generation.current;
+    const orgDefault = settings.catalogue.some((r) => r.id === settings.orgDefault) ? settings.orgDefault : null;
+    const id = choice || orgDefault;
+    const option = settings.catalogue.find((r) => r.id === id) ?? settings.catalogue.find((r) => r.url === null);
+    setPlaying(choice);
+    current.current = { tone: null, timer: null };
+    const play = (buffer) => {
+      if (gen !== generation.current) return;
+      const loop = buffer ? option?.loop ?? null : null;
+      const tone = playRingtone({ buffer, loop, sinkId });
+      current.current = { tone, timer: setTimeout(stop, previewDurationMs(buffer, loop)) };
+    };
+    if (!option?.url) {
+      play(null);
+      return;
+    }
+    store.decode(option.url).then(play, () => {
+      if (gen !== generation.current) return;
+      stop();
+      setError("No se pudo reproducir el tono.");
+    });
+  };
+  return { playing, error, start, stop };
+}
+
+// src/ui/views/settings/RingtonePage.tsx
+var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+var ORG_DEFAULT = "";
+var KEYBOARD_SETTLE_MS = 300;
+function RingtonePage({
+  store,
+  settings,
+  failed,
+  onRetry,
+  onBack
+}) {
+  const softphone = useSoftphone();
+  const devices = useDevices();
+  const preview = useRingtonePreview(store, devices.canSelectRingtoneOutput ? devices.currentRingtoneOutputId : null);
+  const [pending, setPending] = (0, import_react27.useState)(void 0);
+  const [error, setError] = (0, import_react27.useState)(null);
+  const save = useSerialSave(store, {
+    onSettled: () => setPending(void 0),
+    onFailed: () => {
+      setPending(void 0);
+      setError("No se pudo guardar el tono. Int\xE9ntalo de nuevo.");
+    }
+  });
+  const latest = (0, import_react27.useRef)(settings);
+  latest.current = settings;
+  const settle = (0, import_react27.useRef)(null);
+  const { stop: stopPreview } = preview;
+  (0, import_react27.useEffect)(() => softphone.on("incomingCall" /* IncomingCall */, stopPreview), [softphone, stopPreview]);
+  (0, import_react27.useEffect)(
+    () => () => {
+      if (settle.current) {
+        clearTimeout(settle.current.timer);
+        save(settle.current.value || null);
+      }
+    },
+    [save]
+  );
+  const commit = (value) => {
+    save(value || null);
+    if (latest.current) preview.start(latest.current, value);
+  };
+  const onSelect = (value, via) => {
+    setError(null);
+    setPending(value);
+    if (settle.current) clearTimeout(settle.current.timer);
+    settle.current = null;
+    if (via === "pointer") {
+      commit(value);
+      return;
+    }
+    preview.stop();
+    settle.current = {
+      value,
+      timer: setTimeout(() => {
+        settle.current = null;
+        commit(value);
+      }, KEYBOARD_SETTLE_MS)
+    };
+  };
+  const onReselect = (value) => {
+    if (!settings) return;
+    if (preview.playing === value) preview.stop();
+    else preview.start(settings, value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    SettingsPage,
+    {
+      title: "Tono de llamada",
+      intro: "Lo que suena cuando entra una llamada. Se guarda en tu cuenta, as\xED que es el mismo en todos tus dispositivos.",
+      onBack,
+      children: settings ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ChoiceList,
+          {
+            label: "Tono de llamada",
+            choices: choicesFor(settings, preview.playing),
+            value: pending !== void 0 ? pending : currentValue(settings),
+            onSelect,
+            onReselect
+          }
+        ),
+        error ?? preview.error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "cv-settings-error", role: "alert", children: error ?? preview.error }) : null
+      ] }) : failed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "cv-empty", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "cv-empty-title", children: "No se pudieron cargar los tonos." }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "cv-btn cv-settings-retry", onClick: onRetry, children: "Reintentar" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "cv-empty", role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoaderCircle, { className: "cv-empty-spinner", size: 18, "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "cv-empty-title", children: "Cargando\u2026" })
+      ] })
+    }
+  );
+}
+function currentValue(settings) {
+  return settings.mine && settings.catalogue.some((r) => r.id === settings.mine) ? settings.mine : ORG_DEFAULT;
+}
+function choicesFor(settings, playing) {
+  const org = settings.orgDefault ? settings.catalogue.find((r) => r.id === settings.orgDefault) : void 0;
+  const builtIn = settings.catalogue.find((r) => r.url === null);
+  const mark = (value) => playing === value ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "cv-choice-playing", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Volume2, { size: 15, "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "cv-sr-only", children: "Sonando" })
+  ] }) : void 0;
+  const orgChoice = {
+    value: ORG_DEFAULT,
+    label: org ? "Predeterminado de la organizaci\xF3n" : "Predeterminado",
+    sub: (org ?? builtIn)?.name ?? "",
+    trailing: mark(ORG_DEFAULT)
+  };
+  return [orgChoice, ...settings.catalogue.map((r) => ({ value: r.id, label: r.name, trailing: mark(r.id) }))];
+}
+function useSerialSave(store, handlers) {
+  const wanted = (0, import_react27.useRef)(null);
+  const busy = (0, import_react27.useRef)(false);
+  const on = (0, import_react27.useRef)(handlers);
+  on.current = handlers;
+  const [save] = (0, import_react27.useState)(() => (id) => {
+    wanted.current = { id };
+    if (busy.current) return;
+    busy.current = true;
+    void (async () => {
+      while (wanted.current) {
+        const { id: next } = wanted.current;
+        wanted.current = null;
+        try {
+          await store.setMine(next);
+          if (!wanted.current) on.current.onSettled();
+        } catch {
+          if (!wanted.current) on.current.onFailed();
+        }
+      }
+      busy.current = false;
+    })();
+  });
+  return save;
+}
+
+// src/ui/views/SettingsTab.tsx
+var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
 function SettingsTab() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "cv-view cv-settings", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "cv-settings-body", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingsSection, { title: "Dispositivos", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DevicePickers, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "cv-settings-more", children: "M\xE1s ajustes se ir\xE1n a\xF1adiendo pr\xF3ximamente." })
-  ] }) });
+  const softphone = useSoftphone();
+  const devices = useDevices();
+  const store = ringtoneStore(softphone);
+  const ringtone = useRingtoneSettings(store);
+  const [page, setPage] = (0, import_react29.useState)(null);
+  const list = (0, import_react29.useRef)(null);
+  const rows = (0, import_react29.useRef)({});
+  const returnTo = (0, import_react29.useRef)(null);
+  (0, import_react29.useEffect)(() => {
+    void softphone.audio.refresh();
+  }, [softphone]);
+  (0, import_react29.useEffect)(() => {
+    list.current?.toggleAttribute("inert", page !== null);
+    if (page === null && returnTo.current) {
+      rows.current[returnTo.current]?.focus();
+      returnTo.current = null;
+    }
+  }, [page]);
+  const open = (p) => () => {
+    returnTo.current = p;
+    setPage(p);
+  };
+  const back = () => setPage(null);
+  const rowRef = (p) => (el) => {
+    rows.current[p] = el;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cv-view cv-settings", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cv-settings-body", ref: list, children: [
+      store ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SettingsSection, { title: "Llamadas entrantes", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        SettingsNavRow,
+        {
+          icon: Music,
+          title: "Tono de llamada",
+          value: ringtoneSummary(ringtone.settings, ringtone.failed),
+          onOpen: open("tone"),
+          rowRef: rowRef("tone")
+        }
+      ) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SettingsSection, { title: "Dispositivos", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          SettingsNavRow,
+          {
+            icon: Mic,
+            title: "Micr\xF3fono",
+            value: deviceSummary("input", devices.inputs, devices.currentInputId),
+            onOpen: open("input"),
+            rowRef: rowRef("input")
+          }
+        ),
+        devices.canSelectOutput ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          SettingsNavRow,
+          {
+            icon: Headphones,
+            title: "Altavoces",
+            value: deviceSummary("output", devices.outputs, devices.currentOutputId),
+            onOpen: open("output"),
+            rowRef: rowRef("output")
+          }
+        ) : (
+          // Safari and most of Firefox have no `setSinkId`: offering a page whose choice silently does
+          // nothing is worse than saying where the choice really lives.
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            SettingsNavRow,
+            {
+              icon: Headphones,
+              title: "Altavoces",
+              value: "Tu navegador no permite elegirlos desde aqu\xED \u2014 c\xE1mbialos en los ajustes del sistema."
+            }
+          )
+        ),
+        devices.canSelectRingtoneOutput ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          SettingsNavRow,
+          {
+            icon: BellRing,
+            title: "Salida del tono",
+            value: deviceSummary("ringtone", devices.outputs, devices.currentRingtoneOutputId),
+            onOpen: open("ringtone"),
+            rowRef: rowRef("ringtone")
+          }
+        ) : null
+      ] })
+    ] }),
+    page === "tone" && store ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      RingtonePage,
+      {
+        store,
+        settings: ringtone.settings,
+        failed: ringtone.failed,
+        onRetry: ringtone.retry,
+        onBack: back
+      }
+    ) : page !== null && page !== "tone" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DevicePage, { kind: page, onBack: back }) : null
+  ] });
 }
 
 // src/ui/permission/useMicPermission.ts
-var import_react22 = __toESM(require_react(), 1);
+var import_react31 = __toESM(require_react(), 1);
 
 // src/core/env.ts
 function isBrowser() {
@@ -9338,8 +10165,8 @@ function isWebRtcSupported() {
 
 // src/ui/permission/useMicPermission.ts
 function useMicPermission() {
-  const [state, setState] = (0, import_react22.useState)("checking");
-  const warm = (0, import_react22.useCallback)(async () => {
+  const [state, setState] = (0, import_react31.useState)("checking");
+  const warm = (0, import_react31.useCallback)(async () => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       for (const track of stream.getTracks()) track.stop();
@@ -9348,7 +10175,7 @@ function useMicPermission() {
       setState("denied");
     }
   }, []);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!isWebRtcSupported()) {
       setState("unsupported");
       return;
@@ -9439,60 +10266,60 @@ function unblockGuide() {
 }
 
 // src/ui/permission/MicPermissionGate.tsx
-var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
 function MicPrompt({
   state,
   onRequest
 }) {
   if (state === "unsupported") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MicOff, { size: 22 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "cv-gate-title", children: "Llamadas no disponibles" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "Este navegador no admite llamadas. Prueba con Chrome, Edge o Firefox." })
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MicOff, { size: 22 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "cv-gate-title", children: "Llamadas no disponibles" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Este navegador no admite llamadas. Prueba con Chrome, Edge o Firefox." })
     ] });
   }
   if (state === "denied") {
     const guide = unblockGuide();
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MicOff, { size: 22 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "cv-gate-title", children: "Micr\xF3fono bloqueado" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "Perm\xEDtelo en tu navegador para poder llamar." }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("details", { className: "cv-help", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("summary", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CircleHelp, { size: 13, "aria-hidden": true }),
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MicOff, { size: 22 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "cv-gate-title", children: "Micr\xF3fono bloqueado" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Perm\xEDtelo en tu navegador para poder llamar." }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("details", { className: "cv-help", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("summary", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CircleHelp, { size: 13, "aria-hidden": true }),
           "C\xF3mo permitirlo"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ol", { children: guide.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { children: step }, step)) }),
-        guide.url ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("a", { href: guide.url, target: "_blank", rel: "noreferrer noopener", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ol", { children: guide.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { children: step }, step)) }),
+        guide.url ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("a", { href: guide.url, target: "_blank", rel: "noreferrer noopener", children: [
           "Gu\xEDa del navegador",
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ExternalLink, { size: 11, "aria-hidden": true })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ExternalLink, { size: 11, "aria-hidden": true })
         ] }) : null
       ] })
     ] });
   }
   if (state === "warming") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Mic, { size: 22 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "Acepta el aviso que muestra el navegador para continuar." })
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Mic, { size: 22 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Acepta el aviso que muestra el navegador para continuar." })
     ] });
   }
   if (state === "checking") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Mic, { size: 22 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "Preparando el micr\xF3fono\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Mic, { size: 22 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Preparando el micr\xF3fono\u2026" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Mic, { size: 22 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "Lo necesitamos para que puedas hablar durante las llamadas." }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onRequest, children: "Permitir micr\xF3fono" })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Mic, { size: 22 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Lo necesitamos para que puedas hablar durante las llamadas." }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onRequest, children: "Permitir micr\xF3fono" })
   ] });
 }
 
 // src/ui/permission/ErrorGate.tsx
-var import_jsx_runtime15 = (
+var import_jsx_runtime20 = (
   /*
         `part` on all four, because this is the most intrusive thing the SDK draws — it replaces the
         whole dialpad — and inside `<coventia-softphone>` a shadow root makes it otherwise unreachable
@@ -9508,36 +10335,36 @@ function ErrorGate({
   onRetry
 }) {
   const text = ERROR_TEXT[error.code];
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "cv-gate", "data-tone": "danger", "data-code": error.code, part: "error-gate", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TriangleAlert, { size: 22 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "cv-gate-title", part: "error-title", children: text.title }),
-    text.body === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { part: "error-body", children: text.body }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onRetry, part: "error-retry", children: "Reintentar" })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "cv-gate", "data-tone": "danger", "data-code": error.code, part: "error-gate", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TriangleAlert, { size: 22 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "cv-gate-title", part: "error-title", children: text.title }),
+    text.body === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { part: "error-body", children: text.body }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onRetry, part: "error-retry", children: "Reintentar" })
   ] });
 }
 
 // src/ui/permission/LeaderGate.tsx
-var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
 function LeaderGate() {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "cv-gate", part: "leader-gate", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MonitorSmartphone, { size: 22 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "cv-gate-title", part: "leader-title", children: "Tel\xE9fono activo en otra pesta\xF1a" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { part: "leader-body", children: "Solo una pesta\xF1a puede usar el tel\xE9fono a la vez. Cierra la otra para activar esta." })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "cv-gate", part: "leader-gate", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MonitorSmartphone, { size: 22 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "cv-gate-title", part: "leader-title", children: "Tel\xE9fono activo en otra pesta\xF1a" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { part: "leader-body", children: "Solo una pesta\xF1a puede usar el tel\xE9fono a la vez. Cierra la otra para activar esta." })
   ] });
 }
 
 // src/ui/lib/useCallOutcome.ts
-var import_react23 = __toESM(require_react(), 1);
+var import_react32 = __toESM(require_react(), 1);
 var BACKSTOP_MS = 6e3;
 function useCallOutcome() {
   const softphone = useSoftphone();
-  const [code, setCode] = (0, import_react23.useState)(null);
-  const timer = (0, import_react23.useRef)(void 0);
-  const clear = (0, import_react23.useCallback)(() => {
+  const [code, setCode] = (0, import_react32.useState)(null);
+  const timer = (0, import_react32.useRef)(void 0);
+  const clear = (0, import_react32.useCallback)(() => {
     clearTimeout(timer.current);
     setCode(null);
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const off = softphone.on("error" /* Error */, (error) => {
       if (error.fatal) return;
       clearTimeout(timer.current);
@@ -9549,7 +10376,7 @@ function useCallOutcome() {
       clearTimeout(timer.current);
     };
   }, [softphone]);
-  (0, import_react23.useEffect)(() => softphone.on("incomingCall" /* IncomingCall */, () => clear()), [softphone, clear]);
+  (0, import_react32.useEffect)(() => softphone.on("incomingCall" /* IncomingCall */, () => clear()), [softphone, clear]);
   return {
     outcome: code === null ? null : { code, text: ERROR_TEXT[code].title },
     clear
@@ -9557,12 +10384,12 @@ function useCallOutcome() {
 }
 
 // src/ui/audio/useCallAudio.ts
-var import_react25 = __toESM(require_react(), 1);
+var import_react34 = __toESM(require_react(), 1);
 function useCallAudio(enabled) {
   const softphone = useSoftphone();
-  const remote = (0, import_react25.useRef)(null);
-  const tone = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
+  const remote = (0, import_react34.useRef)(null);
+  const tone = (0, import_react34.useRef)(null);
+  (0, import_react34.useEffect)(() => {
     if (!enabled || typeof document === "undefined") return;
     const prime = () => primeAudio();
     const gestures = ["pointerdown", "keydown"];
@@ -9574,14 +10401,29 @@ function useCallAudio(enabled) {
     const offDeviceChange = softphone.on("deviceChange" /* DeviceChange */, () => {
       void remote.current?.setOutputDevice(softphone.audio.currentOutputId);
     });
+    const ringtones = ringtoneStore(softphone);
+    ringtones?.wantAudio(true);
+    const refreshRingtone = () => {
+      if (softphone.isLeader) void ringtones?.refresh();
+    };
+    refreshRingtone();
+    const offLeader = softphone.on("leaderChanged" /* LeaderChanged */, ({ isLeader }) => {
+      if (isLeader) refreshRingtone();
+    });
     const stopTone = () => {
       tone.current?.stop();
       tone.current = null;
     };
     const setTone = (next) => {
       stopTone();
-      if (next === "ringtone") tone.current = playRingtone();
-      else if (next === "ringback") tone.current = playRingback();
+      if (next === "ringtone") {
+        const audio = softphone.audio;
+        tone.current = playRingtone({
+          buffer: ringtones?.readyBuffer() ?? null,
+          loop: ringtones?.readyLoop() ?? null,
+          sinkId: audio.canSelectRingtoneOutput ? audio.currentRingtoneOutputId : null
+        });
+      } else if (next === "ringback") tone.current = playRingback();
     };
     const perCall = [];
     const followedCalls = /* @__PURE__ */ new Set();
@@ -9612,6 +10454,7 @@ function useCallAudio(enabled) {
           stopTone();
           remote.current?.detach();
           if (wasConnected && (reason === "local" || reason === "remote")) playCallEndedTone();
+          refreshRingtone();
         })
       );
     };
@@ -9629,6 +10472,8 @@ function useCallAudio(enabled) {
       offIncoming();
       offActive();
       offDeviceChange();
+      offLeader();
+      ringtones?.wantAudio(false);
       for (const off of perCall) off();
       stopTone();
       remote.current?.destroy();
@@ -9638,7 +10483,7 @@ function useCallAudio(enabled) {
 }
 
 // src/ui/notices/TransferNotices.tsx
-var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
 function TransferNotices({
   notices,
   dismiss
@@ -9650,7 +10495,7 @@ function TransferNotices({
     if (notice.caller) void softphone.call(notice.caller).catch(() => {
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: "cv-transfer-notices",
@@ -9658,20 +10503,20 @@ function TransferNotices({
       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 > 1 ? /* @__PURE__ */ (0, import_jsx_runtime22.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: [
+        notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cv-transfer-notice", part: "transfer-notice", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "cv-transfer-notice-mark", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PhoneMissed, { size: 16 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cv-transfer-notice-body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cv-transfer-notice-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "cv-transfer-notice-title", children: [
                 "El traspaso a ",
                 notice.target,
                 " no se conect\xF3"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "button",
                 {
                   type: "button",
@@ -9679,17 +10524,17 @@ function TransferNotices({
                   onClick: () => dismiss(notice.id),
                   "aria-label": "Descartar aviso",
                   part: "transfer-notice-dismiss",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(X, { size: 14 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(X, { size: 14 })
                 }
               )
             ] }),
-            notice.caller ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "cv-transfer-notice-subtitle", children: [
+            notice.caller ? /* @__PURE__ */ (0, import_jsx_runtime22.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)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cv-transfer-notice-footer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "cv-transfer-notice-age", children: formatAge(elapsedSeconds(notice.at, now)) }),
+              notice.caller ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -9697,7 +10542,7 @@ function TransferNotices({
                   onClick: () => callBack(notice),
                   part: "transfer-notice-callback",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Phone, { size: 14, "aria-hidden": true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Phone, { size: 14, "aria-hidden": true }),
                     "Llamar de vuelta"
                   ]
                 }
@@ -9711,15 +10556,15 @@ function TransferNotices({
 }
 
 // src/ui/notices/useTransferNotices.ts
-var import_react28 = __toESM(require_react(), 1);
+var import_react37 = __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) => {
+  const [notices, setNotices] = (0, import_react37.useState)([]);
+  const nextId = (0, import_react37.useRef)(0);
+  const dismiss = (0, import_react37.useCallback)((id) => {
     setNotices((prev) => prev.filter((n) => n.id !== id));
   }, []);
-  (0, import_react28.useEffect)(
+  (0, import_react37.useEffect)(
     () => softphone.on("transferOutcome" /* TransferOutcome */, (payload) => {
       if (payload.status === "not-connected") {
         const id = nextId.current++;
@@ -9732,7 +10577,7 @@ function useTransferNotices() {
 }
 
 // src/ui/SoftphoneWidget.tsx
-var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
 function SoftphoneWidget(props) {
   const {
     contacts,
@@ -9748,7 +10593,7 @@ function SoftphoneWidget(props) {
   const fallback = softphone.sources;
   const contactsSource = contacts ?? fallback?.contacts;
   const historySource = history ?? fallback?.history;
-  const [tab, setTab] = (0, import_react30.useState)("dialer");
+  const [tab, setTab] = (0, import_react39.useState)("dialer");
   const call = useActiveCall();
   const isLeader = useIsLeader();
   const softphoneState = useSoftphoneState();
@@ -9777,15 +10622,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_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: className ? `cv-softphone ${className}` : "cv-softphone",
       ...theme === "system" ? {} : { "data-cv-theme": theme },
       children: [
-        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, keyTones: sounds, ...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, keyTones: sounds }) }),
-        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)(
+        screenIsFree ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TransferNotices, { notices: transferNotices, dismiss: dismissTransferNotice }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LeaderGate, {}) : blocked ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CallScreen, { call, keyTones: sounds, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SettingsTab, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Dialpad, { outcome, onIntent: clearOutcome, keyTones: sounds }) }),
+        screenIsFree ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "button",
           {
             role: "tab",
@@ -9793,8 +10638,8 @@ function SoftphoneWidget(props) {
             className: "cv-tab",
             onClick: () => setTab(id),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon3, { size: 20 }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon3, { size: 20 }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: label })
             ]
           },
           id
@@ -9805,7 +10650,7 @@ function SoftphoneWidget(props) {
 }
 
 // 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  /* 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}\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 Device check (ringing / dialing / in-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\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\r\n   Once connected it is the SAME chip and the SAME swap. Dispositivos used to be a fifth control in\r\n   the call row (with a floating popover), which is what forced that row down to 40px buttons and\r\n   9px labels in a 310px host. A set-once setting does not need a slot among the four things you do\r\n   mid-call (mute, hold, transfer, keypad), and the control row stays live under the swap.\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.9rem;\r\n  padding: 0.35rem 1rem 1.1rem;\r\n  /* The containing block for `.cv-keypad-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/* FOUR controls, sized so they never need to shrink to fit. This row held five (Dispositivos too) and\r\n   the only way to fit five in the CRM's 310px host was a 40px button with a 9px label and ~6px gaps \u2014\r\n   below the 44/48px a thumb needs, and below legible for a word read mid-call. The default 48px size\r\n   below was never actually seen: it only applied above a 360px host, which no real embed is.\r\n   Dispositivos is the `.cv-call-chips` chip up by the call info instead (the same entry point the\r\n   ringing and dialing screens already use). 4 \xD7 52 + 3 \xD7 20 = 268px, inside 310 - 2 \xD7 16 padding. */\r\n.cv-controls-row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 1.25rem;\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/* The four secondaries' words get a notch more than Colgar / Rechazar / Contestar's 10px \u2014 they are\r\n   the ones read mid-call, and the five-up row used to shrink them to 9px (8px in a sidebar). */\r\n.cv-controls-row .cv-ctrl-label { font-size: 0.6875rem; }\r\n.cv-ctrl {\r\n  width: 52px;\r\n  height: 52px;\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.cv-ctrl:disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\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  Sidebar-narrow (this file's own \u2264300px tier, up in \"Narrow hosts\"). The four 52px controls with\r\n  20px gaps need 268px, which a 260px host cannot give \u2014 so this tier steps down to 44px with 12px\r\n  gaps (4 \xD7 44 + 3 \xD7 12 = 212px) and reclaims `.cv-controls`'s own horizontal padding, the first\r\n  lever that block's own comment names. 44px is still the Apple HIG minimum tap target; the five-up\r\n  row this replaced went to 36px here.\r\n\r\n  Placed AFTER `.cv-controls`/`.cv-controls-row` above rather than up with this file's other\r\n  `@container` blocks near the top: `gap` and `padding-left`/`-right` here have the same specificity as\r\n  those base rules' own shorthand, so \u2014 unlike a compound selector such as `.cv-controls-row .cv-ctrl`,\r\n  which wins on specificity regardless of position \u2014 source order is what decides, and a narrower-width\r\n  override declared BEFORE the base rule it means to narrow loses to it. Confirmed live: moved up into\r\n  the \"Narrow hosts\" section, the `.cv-ctrl` width and label font-size reductions took effect (compound\r\n  selectors) but `gap` and `.cv-controls`'s padding silently did not (plain selectors, later base rule won).\r\n*/\r\n@container cv (max-width: 300px) {\r\n  .cv-controls { padding-left: 0.5rem; padding-right: 0.5rem; }\r\n  .cv-controls-row { gap: 0.75rem; }\r\n  .cv-controls-row .cv-ctrl { width: 44px; height: 44px; }\r\n  .cv-controls-row .cv-ctrl-label { font-size: 0.625rem; }\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@keyframes cv-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\r\n/*\r\n  The in-call DTMF keypad \u2014 the one floating popover left on the call screen. (Dispositivos was the\r\n  other; it is inline content now, `.cv-call-devices-inline` above, in every call state.)\r\n\r\n  Opens UPWARD (`bottom: 100%`): the trigger sits at the bottom of the call screen, and there is no\r\n  room to open downward. Anchored to `.cv-controls`'s own horizontal padding \u2014 a container whose width\r\n  is bounded by ITS parent, never the narrow trigger itself \u2014 the same fix CountryPicker's own popover\r\n  needed (see its comment): anchoring to a narrow, off-centre trigger let the popover's edge reach\r\n  `.cv-softphone`'s `overflow: hidden` and get clipped.\r\n*/\r\n.cv-keypad-popover {\r\n  position: absolute;\r\n  z-index: 20;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 8px;\r\n  padding: 0.85rem 1rem;\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-keypad-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-pop-in-up 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n/* `.cv-key` already carries the full key look (border, hover, active-scale, digit/letter type) from\r\n   the pre-call dialer \u2014 only the size needs setting here, since this grid has no flex ancestor to\r\n   stretch the rows the way `.cv-keypad` gets to.\r\n\r\n   A fixed HEIGHT, not an `aspect-ratio`. This popover opens upward from `.cv-controls`, so it has\r\n   (host height - controls block - margin) to work with, and a ratio ties its height to the host's\r\n   WIDTH, which says nothing about how much height there is. Found live: the CRM's real body is 310\xD7473\r\n   (a 520px panel minus its 45px header), and a 1.3 ratio made this popover 285px \u2014 with the 184px\r\n   controls block that is 479px, so its top ~7px were clipped by `.cv-softphone`'s `overflow: hidden`.\r\n   48px keys give a 243px popover at ANY width, fit that host with room to spare, and stay at the\r\n   44-48px minimum tap target (the old ratio gave 45px keys at a 260px host, 58px at 310). */\r\n.cv-keypad-popover .cv-key {\r\n  height: 48px;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-keypad-popover--above { animation: none; }\r\n}\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";
+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}\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 Device check (ringing / dialing / in-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\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\r\n   Once connected it is the SAME chip and the SAME swap. Dispositivos used to be a fifth control in\r\n   the call row (with a floating popover), which is what forced that row down to 40px buttons and\r\n   9px labels in a 310px host. A set-once setting does not need a slot among the four things you do\r\n   mid-call (mute, hold, transfer, keypad), and the control row stays live under the swap.\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.9rem;\r\n  padding: 0.35rem 1rem 1.1rem;\r\n  /* The containing block for `.cv-keypad-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/* FOUR controls, sized so they never need to shrink to fit. This row held five (Dispositivos too) and\r\n   the only way to fit five in the CRM's 310px host was a 40px button with a 9px label and ~6px gaps \u2014\r\n   below the 44/48px a thumb needs, and below legible for a word read mid-call. The default 48px size\r\n   below was never actually seen: it only applied above a 360px host, which no real embed is.\r\n   Dispositivos is the `.cv-call-chips` chip up by the call info instead (the same entry point the\r\n   ringing and dialing screens already use). 4 \xD7 52 + 3 \xD7 20 = 268px, inside 310 - 2 \xD7 16 padding. */\r\n.cv-controls-row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 1.25rem;\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/* The four secondaries' words get a notch more than Colgar / Rechazar / Contestar's 10px \u2014 they are\r\n   the ones read mid-call, and the five-up row used to shrink them to 9px (8px in a sidebar). */\r\n.cv-controls-row .cv-ctrl-label { font-size: 0.6875rem; }\r\n.cv-ctrl {\r\n  width: 52px;\r\n  height: 52px;\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.cv-ctrl:disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\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  Sidebar-narrow (this file's own \u2264300px tier, up in \"Narrow hosts\"). The four 52px controls with\r\n  20px gaps need 268px, which a 260px host cannot give \u2014 so this tier steps down to 44px with 12px\r\n  gaps (4 \xD7 44 + 3 \xD7 12 = 212px) and reclaims `.cv-controls`'s own horizontal padding, the first\r\n  lever that block's own comment names. 44px is still the Apple HIG minimum tap target; the five-up\r\n  row this replaced went to 36px here.\r\n\r\n  Placed AFTER `.cv-controls`/`.cv-controls-row` above rather than up with this file's other\r\n  `@container` blocks near the top: `gap` and `padding-left`/`-right` here have the same specificity as\r\n  those base rules' own shorthand, so \u2014 unlike a compound selector such as `.cv-controls-row .cv-ctrl`,\r\n  which wins on specificity regardless of position \u2014 source order is what decides, and a narrower-width\r\n  override declared BEFORE the base rule it means to narrow loses to it. Confirmed live: moved up into\r\n  the \"Narrow hosts\" section, the `.cv-ctrl` width and label font-size reductions took effect (compound\r\n  selectors) but `gap` and `.cv-controls`'s padding silently did not (plain selectors, later base rule won).\r\n*/\r\n@container cv (max-width: 300px) {\r\n  .cv-controls { padding-left: 0.5rem; padding-right: 0.5rem; }\r\n  .cv-controls-row { gap: 0.75rem; }\r\n  .cv-controls-row .cv-ctrl { width: 44px; height: 44px; }\r\n  .cv-controls-row .cv-ctrl-label { font-size: 0.625rem; }\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@keyframes cv-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\r\n/*\r\n  The in-call DTMF keypad \u2014 the one floating popover left on the call screen. (Dispositivos was the\r\n  other; it is inline content now, `.cv-call-devices-inline` above, in every call state.)\r\n\r\n  Opens UPWARD (`bottom: 100%`): the trigger sits at the bottom of the call screen, and there is no\r\n  room to open downward. Anchored to `.cv-controls`'s own horizontal padding \u2014 a container whose width\r\n  is bounded by ITS parent, never the narrow trigger itself \u2014 the same fix CountryPicker's own popover\r\n  needed (see its comment): anchoring to a narrow, off-centre trigger let the popover's edge reach\r\n  `.cv-softphone`'s `overflow: hidden` and get clipped.\r\n*/\r\n.cv-keypad-popover {\r\n  position: absolute;\r\n  z-index: 20;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 8px;\r\n  padding: 0.85rem 1rem;\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-keypad-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-pop-in-up 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n/* `.cv-key` already carries the full key look (border, hover, active-scale, digit/letter type) from\r\n   the pre-call dialer \u2014 only the size needs setting here, since this grid has no flex ancestor to\r\n   stretch the rows the way `.cv-keypad` gets to.\r\n\r\n   A fixed HEIGHT, not an `aspect-ratio`. This popover opens upward from `.cv-controls`, so it has\r\n   (host height - controls block - margin) to work with, and a ratio ties its height to the host's\r\n   WIDTH, which says nothing about how much height there is. Found live: the CRM's real body is 310\xD7473\r\n   (a 520px panel minus its 45px header), and a 1.3 ratio made this popover 285px \u2014 with the 184px\r\n   controls block that is 479px, so its top ~7px were clipped by `.cv-softphone`'s `overflow: hidden`.\r\n   48px keys give a 243px popover at ANY width, fit that host with room to spare, and stay at the\r\n   44-48px minimum tap target (the old ratio gave 45px keys at a 260px host, 58px at 310). */\r\n.cv-keypad-popover .cv-key {\r\n  height: 48px;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-keypad-popover--above { animation: none; }\r\n}\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\r\n/* `--cv-danger-strong` is the AS-TEXT danger token (see its definition): red-600 on the light `--cv-bg`,\r\n   red-400 on the dark one. */\r\n.cv-settings-error { margin: 0.6rem 0.2rem 0; font-size: 0.78rem; line-height: 1.4; color: var(--cv-danger-strong); }\r\n\r\n/*\r\n  Ajustes as a list (custom-ringtone.md \xA74.6, revised 2026-10-14): each row names a setting, shows its CURRENT\r\n  value under the name, and opens a page. Same icon circle and dividers as the device rows above (they live in\r\n  the same `.cv-settings-section-body`, which supplies the padding and the dividers), same chevron as\r\n  `.cv-detail-row--action` \u2014 one row vocabulary across the widget.\r\n*/\r\n.cv-settings-nav {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  width: 100%;\r\n  border: none;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n}\r\nbutton.cv-settings-nav { cursor: pointer; transition: background 0.12s ease; }\r\nbutton.cv-settings-nav:hover { background: var(--cv-surface); }\r\nbutton.cv-settings-nav:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -2px; }\r\n.cv-settings-nav-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }\r\n.cv-settings-nav-title { font-size: 0.88rem; font-weight: 600; color: var(--cv-text); }\r\n/* One line, cut with an ellipsis \u2014 the full device name is on its page. `--cv-muted` on `--cv-bg` is the\r\n   pairing already verified for `.cv-settings-note`. The static row (a note, no page) may wrap instead. */\r\n.cv-settings-nav-value {\r\n  font-size: 0.8rem;\r\n  color: var(--cv-muted);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-settings-nav--static .cv-settings-nav-value { white-space: normal; line-height: 1.45; }\r\n.cv-settings-nav-chevron { flex-shrink: 0; color: var(--cv-muted); }\r\n\r\n/* A settings page: the `.cv-detail` overlay (entrance, back button, reduced motion all inherited) with a\r\n   scrolling body of its own. */\r\n.cv-settings-page-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.25rem 1rem 1rem; }\r\n.cv-settings-page-title {\r\n  margin: 0.15rem 0.2rem 0.35rem;\r\n  font-size: 1.05rem;\r\n  font-weight: 700;\r\n  letter-spacing: -0.01em;\r\n  color: var(--cv-text);\r\n}\r\n/* Focus lands here on open (for keyboard and screen-reader users); a ring on a heading would only look\r\n   like a stray box to everyone else. */\r\n.cv-settings-page-title:focus { outline: none; }\r\n.cv-settings-page-intro { margin: 0 0.2rem 0.85rem; font-size: 0.8rem; line-height: 1.45; color: var(--cv-muted); }\r\n.cv-settings-page-empty { margin: 0; padding: 0 0.2rem; font-size: 0.85rem; color: var(--cv-muted); }\r\n\r\n/* The checkmark list: one card like `.cv-settings-section-body`, a row per choice. */\r\n.cv-choices {\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-choice {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  min-height: 44px;\r\n  padding: 0.6rem 0.85rem;\r\n  cursor: pointer;\r\n  transition: background 0.12s ease;\r\n}\r\n.cv-choice + .cv-choice { border-top: 1px solid var(--cv-border); }\r\n.cv-choice:hover { background: var(--cv-surface); }\r\n/* The real control: a native radio, kept in the accessibility tree and keyboard order, drawn by the row. */\r\n.cv-choice-input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  pointer-events: none;\r\n}\r\n.cv-choice:has(.cv-choice-input:focus-visible) { outline: 2px solid var(--cv-accent); outline-offset: -2px; }\r\n.cv-choice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }\r\n.cv-choice-label { font-size: 0.88rem; color: var(--cv-text); overflow-wrap: anywhere; }\r\n.cv-choice-sub { font-size: 0.78rem; color: var(--cv-muted); }\r\n.cv-choice[data-checked] .cv-choice-label { font-weight: 600; }\r\n.cv-choice-check { flex-shrink: 0; color: var(--cv-accent-strong); visibility: hidden; }\r\n.cv-choice[data-checked] .cv-choice-check { visibility: visible; }\r\n.cv-choice-playing { display: inline-flex; flex-shrink: 0; color: var(--cv-accent-strong); }\r\n\r\n.cv-settings-test,\r\n.cv-settings-retry {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n}\r\n.cv-settings-test { margin-top: 0.85rem; }\r\n.cv-settings-retry { margin-top: 0.6rem; }\r\n\r\n/* Visually hidden, still read aloud. */\r\n.cv-sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  clip-path: inset(50%);\r\n  white-space: nowrap;\r\n}\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\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 = {
@@ -9982,9 +10827,9 @@ var CoventiaSoftphoneElement = class extends HTMLElement {
       ...this.#config.incomingCallAction ? { incomingCallAction: this.#config.incomingCallAction } : {}
     };
     this.#root.render(
-      (0, import_react32.createElement)(
+      (0, import_react41.createElement)(
         SoftphoneProvider,
-        { softphone: this.#softphone, children: (0, import_react32.createElement)(SoftphoneWidget, widgetProps) }
+        { softphone: this.#softphone, children: (0, import_react41.createElement)(SoftphoneWidget, widgetProps) }
       )
     );
   }
@@ -10037,6 +10882,7 @@ lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/arrow-left-right.js:
 lucide-react/dist/esm/icons/arrow-left.js:
 lucide-react/dist/esm/icons/arrow-right.js:
+lucide-react/dist/esm/icons/bell-ring.js:
 lucide-react/dist/esm/icons/calendar-clock.js:
 lucide-react/dist/esm/icons/check.js:
 lucide-react/dist/esm/icons/chevron-down.js:
@@ -10052,6 +10898,7 @@ lucide-react/dist/esm/icons/loader-circle.js:
 lucide-react/dist/esm/icons/mic-off.js:
 lucide-react/dist/esm/icons/mic.js:
 lucide-react/dist/esm/icons/monitor-smartphone.js:
+lucide-react/dist/esm/icons/music.js:
 lucide-react/dist/esm/icons/pause.js:
 lucide-react/dist/esm/icons/phone-incoming.js:
 lucide-react/dist/esm/icons/phone-missed.js:
@@ -10065,6 +10912,7 @@ lucide-react/dist/esm/icons/timer.js:
 lucide-react/dist/esm/icons/triangle-alert.js:
 lucide-react/dist/esm/icons/user.js:
 lucide-react/dist/esm/icons/users.js:
+lucide-react/dist/esm/icons/volume-2.js:
 lucide-react/dist/esm/icons/x.js:
 lucide-react/dist/esm/lucide-react.js:
   (**