@coventia/softphone 0.1.0 → 0.2.1

package/dist/softphone.css

@@ -219,6 +219,10 @@
 
   background: var(--cv-bg);
   overflow: hidden;
+  /* The containing block for `.cv-transfer-notices` — it overlays this whole shell, top edge to top
+     edge, not just `.cv-body`, so it reads as one seamless panel rather than a strip that starts a few
+     pixels short of the shell's own rounded corner. */
+  position: relative;
 
   /* The frame is the HOST's call. The CRM's panel already draws `border rounded-xl shadow-2xl`, so
      drawing our own put a card inside a card — nested chrome, which is always wrong. Defaulting to
@@ -236,8 +240,6 @@
   .cv-dial-prefix { padding: 0.7rem 0.6rem 0; }
   .cv-dial-head { padding: 0.3rem 0.6rem 0.6rem; }
   .cv-display { font-size: 1.5rem; }
-  .cv-controls-row { gap: 1.1rem; }
-
 }
 
 /* Short hosts. The flex chain already lets the keypad absorb what is left, but below this the keys
@@ -293,6 +295,140 @@
 .cv-tab:disabled { opacity: 0.35; cursor: not-allowed; }
 .cv-tab span { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; }
 
+/* ── Transfer outcome notices (Phase A — transfer-outcome-relay.md §5.5) ──────── */
+/*
+  A persistent, dismissable banner OVER `.cv-body`, never a toast and never auto-dismissed — it carries
+  an action, and WCAG 2.2.1 requires a time limit to be removable, adjustable or extended.
+
+  Overlaps rather than reserving its own height, the same reasoning `.cv-dial-outcome`'s own comment
+  already gives for why the widget never lets a line of text resize the keypad under a moving finger —
+  here that principle cuts the other way: appearing costs nothing but a repaint, not a reflow, so the
+  widget's overall height stays identical whether a notice is showing or not, exactly like `.cv-detail`
+  overlaying `.cv-body`'s own list rather than pushing it down. It sits over whatever the current tab
+  happens to be showing (most often the dialer's country picker and number field — an acceptable loss:
+  the agent is not expected to start a fresh manual dial before dealing with a transfer that just failed
+  to connect), which is also why it outranks `.cv-detail` in `z-index`.
+
+  `[data-has-notices='false']` collapses to zero footprint: the element stays mounted (so its
+  `role="status"` region exists before the FIRST notice ever arrives — an aria-live region inserted at
+  the same moment as its own content is not reliably announced), but an idle widget, the common case,
+  covers nothing and costs no paint either.
+*/
+.cv-transfer-notices {
+  position: absolute;
+  inset: 0 0 auto 0;
+  z-index: 3; /* above `.cv-detail`'s 2 — this is the higher-priority thing on screen */
+}
+.cv-transfer-notices[data-has-notices='true'] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.6rem 0.75rem;
+  background: var(--cv-bg);
+  box-shadow: var(--cv-shadow);
+  animation: cv-transfer-notices-in 200ms var(--cv-ease-out) both;
+}
+@keyframes cv-transfer-notices-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-transfer-notices[data-has-notices='true'] { animation: none; }
+}
+.cv-transfer-notices-count {
+  margin: 0;
+  font: 600 0.72rem var(--cv-font);
+  color: var(--cv-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.cv-transfer-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.65rem 0.7rem;
+  border-radius: var(--cv-radius-key);
+  border: 1px solid var(--cv-danger-soft);
+  background: var(--cv-surface);
+}
+/* Same shape as `.cv-gate-mark`, smaller — one visual language for "here is a status", not two. */
+.cv-transfer-notice-mark {
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  background: var(--cv-danger-soft);
+  color: var(--cv-danger);
+}
+.cv-transfer-notice-body { flex: 1; min-width: 0; }
+/*
+  Title shares its row with only the dismiss button (24px) — not the whole card's width, and not the
+  "Llamar de vuelta" button, which gets its own row below (`.cv-transfer-notice-footer`). The original
+  layout put mark + title + subtitle + a full button all in one flex row, leaving the title as little as
+  ~80px to wrap into at the real ~340px embed width — nearly every word landed on its own line.
+  `align-items: flex-start` keeps the dismiss pinned to the first line even when the title wraps to two.
+*/
+.cv-transfer-notice-header { display: flex; align-items: flex-start; gap: 0.4rem; }
+.cv-transfer-notice-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font: 600 0.82rem var(--cv-font);
+  color: var(--cv-text);
+  line-height: 1.35;
+}
+.cv-transfer-notice-subtitle {
+  margin: 0.15rem 0 0;
+  font-size: 0.78rem;
+  color: var(--cv-muted);
+  line-height: 1.35;
+}
+/* Age and the callback button share a row too, same reasoning as the header — a short fixed-width
+   timestamp beside a content-sized button, neither one fighting the title for space above. */
+.cv-transfer-notice-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.35rem;
+}
+.cv-transfer-notice-age { margin: 0; font-size: 0.7rem; color: var(--cv-faint); flex-shrink: 0; }
+/*
+  `.cv-btn.cv-transfer-notice-callback` — TWO classes, not one. Equal-specificity selectors resolve by
+  source order, and this rule used to lose its `padding`/`font-size` to the shared `.cv-btn` rule below
+  simply because that one appears later in the file; the button rendered at full default CTA size
+  instead of this smaller, secondary one, which is what actually forced the title into that ~80px
+  column above. The extra class is what makes this override win regardless of source order.
+*/
+.cv-btn.cv-transfer-notice-callback {
+  flex-shrink: 0;
+  padding: 0.35rem 0.6rem;
+  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  white-space: nowrap;
+}
+/* Same round icon-only shape as `.cv-search-clear` — one dismiss affordance, not a new one. */
+.cv-transfer-notice-dismiss {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 999px;
+  background: none;
+  color: var(--cv-muted);
+  cursor: pointer;
+  transition: color 0.12s ease, background 0.12s ease, transform 0.1s var(--cv-ease-out);
+}
+.cv-transfer-notice-dismiss:hover { color: var(--cv-text); background: var(--cv-surface-2); }
+.cv-transfer-notice-dismiss:active { transform: scale(0.88); }
+
 /* ── Buttons ─────────────────────────────────────────────────────────────────── */
 .cv-btn {
   font: 600 0.875rem var(--cv-font);
@@ -494,6 +630,16 @@
   gap: 0.15rem;
   text-align: center;
   padding: 1rem;
+  /*
+    A REAL bug, found live (plan T7): the transfer picker's agent list can make this box's content
+    taller than the space `flex: 1` actually allocates it — the avatar/name/timer/status ABOVE the
+    picker are still shown while transferring, unlike `.cv-call-devices-inline`'s own "swap the
+    content" fix for the pre-connect devices screen. Without this, the overflow painted straight past
+    `.cv-call`'s own shrunk box and onto `.cv-controls` below it — not scroll, actual overlap, controls
+    rendered ON TOP of list rows. `overflow-y: auto` keeps any excess inside THIS box, scrollable,
+    exactly like `.cv-presence-list`'s own internal scroll already does for the list itself.
+  */
+  overflow-y: auto;
 }
 
 .cv-avatar-wrap { position: relative; margin-bottom: 0.85rem; }
@@ -572,7 +718,7 @@
 }
 .cv-badge-hold { color: var(--cv-hold); font-weight: 600; }
 
-/* ── Pre-connect device check (ringing / dialing) ──────────────────────────────
+/* ── Device check (ringing / dialing / in-call) ────────────────────────────────
    Before a call connects there is only ONE other control on screen (Colgar, or
    Rechazar/Contestar) — putting Dispositivos in that same neighbourhood, even
    spaced out, keeps it a mis-tap away from hanging up or answering. The entry
@@ -588,6 +734,11 @@
    cramped and scrolly for just two rows. `.cv-call-devices-inline` REPLACES the
    avatar/name/status block in `.cv-call` instead (see that JSX's own comment) —
    an inline swap, not an overlay, so it gets the full box, not a leftover sliver.
+
+   Once connected it is the SAME chip and the SAME swap. Dispositivos used to be a fifth control in
+   the call row (with a floating popover), which is what forced that row down to 40px buttons and
+   9px labels in a 310px host. A set-once setting does not need a slot among the four things you do
+   mid-call (mute, hold, transfer, keypad), and the control row stays live under the swap.
    ───────────────────────────────────────────────────────────────────────────── */
 .cv-call-devices-chip {
   display: inline-flex;
@@ -660,16 +811,22 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.7rem;
+  gap: 0.9rem;
   padding: 0.35rem 1rem 1.1rem;
-  /* The containing block for `.cv-device-popover` — see that rule's own comment for why it is
+  /* The containing block for `.cv-keypad-popover` — see that rule's own comment for why it is
      anchored here rather than to the trigger button. */
   position: relative;
 }
+/* FOUR controls, sized so they never need to shrink to fit. This row held five (Dispositivos too) and
+   the only way to fit five in the CRM's 310px host was a 40px button with a 9px label and ~6px gaps —
+   below the 44/48px a thumb needs, and below legible for a word read mid-call. The default 48px size
+   below was never actually seen: it only applied above a 360px host, which no real embed is.
+   Dispositivos is the `.cv-call-chips` chip up by the call info instead (the same entry point the
+   ringing and dialing screens already use). 4 × 52 + 3 × 20 = 268px, inside 310 - 2 × 16 padding. */
 .cv-controls-row {
   display: flex;
   justify-content: center;
-  gap: 1.5rem;
+  gap: 1.25rem;
 }
 .cv-controls-primary {
   display: flex;
@@ -692,9 +849,12 @@
   white-space: nowrap;
   user-select: none;
 }
+/* The four secondaries' words get a notch more than Colgar / Rechazar / Contestar's 10px — they are
+   the ones read mid-call, and the five-up row used to shrink them to 9px (8px in a sidebar). */
+.cv-controls-row .cv-ctrl-label { font-size: 0.6875rem; }
 .cv-ctrl {
-  width: 48px;
-  height: 48px;
+  width: 52px;
+  height: 52px;
   border-radius: 999px;
   border: 1px solid var(--cv-border-strong);
   background: var(--cv-bg);
@@ -707,6 +867,11 @@
 }
 .cv-ctrl:hover { background: var(--cv-surface); }
 .cv-ctrl:active { transform: scale(0.94); }
+.cv-ctrl:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 
 /* The ON states say what they MEAN, in the widget's own tokens: muted is danger,
    held is hold, transfer-open is accent. Colour is the state, not decoration. */
@@ -752,56 +917,326 @@
   border-color: var(--cv-text);
 }
 
+/*
+  Sidebar-narrow (this file's own ≤300px tier, up in "Narrow hosts"). The four 52px controls with
+  20px gaps need 268px, which a 260px host cannot give — so this tier steps down to 44px with 12px
+  gaps (4 × 44 + 3 × 12 = 212px) and reclaims `.cv-controls`'s own horizontal padding, the first
+  lever that block's own comment names. 44px is still the Apple HIG minimum tap target; the five-up
+  row this replaced went to 36px here.
+
+  Placed AFTER `.cv-controls`/`.cv-controls-row` above rather than up with this file's other
+  `@container` blocks near the top: `gap` and `padding-left`/`-right` here have the same specificity as
+  those base rules' own shorthand, so — unlike a compound selector such as `.cv-controls-row .cv-ctrl`,
+  which wins on specificity regardless of position — source order is what decides, and a narrower-width
+  override declared BEFORE the base rule it means to narrow loses to it. Confirmed live: moved up into
+  the "Narrow hosts" section, the `.cv-ctrl` width and label font-size reductions took effect (compound
+  selectors) but `gap` and `.cv-controls`'s padding silently did not (plain selectors, later base rule won).
+*/
+@container cv (max-width: 300px) {
+  .cv-controls { padding-left: 0.5rem; padding-right: 0.5rem; }
+  .cv-controls-row { gap: 0.75rem; }
+  .cv-controls-row .cv-ctrl { width: 44px; height: 44px; }
+  .cv-controls-row .cv-ctrl-label { font-size: 0.625rem; }
+}
+
+/*
+  The attended-transfer target-entry panel (`docs/specs/transfer-availability.md` §5): an optional
+  outcome line, then a row of whatever's actionable (input+button today). Once a consult exists,
+  `ConsultScreen` takes over the whole screen instead — this panel is ONLY ever the pre-consult /
+  retry-after-failure state now; it used to also cover the consulting/answered phases, which is why
+  its rule is a column container built for more than one child even though there's only ever one row
+  here today. (History: was two near-duplicate rules — `.cv-transfer` as a bare ROW,
+  `.cv-transfer-consult` as a column — until the row version turned out to be a real,
+  reproduced-in-browser bug: the optional `.cv-dial-outcome` message rendered as a THIRD item in the
+  same horizontal row as the input and button, squeezing the input to its content-minimum. Merged
+  rather than patched.)
+*/
 .cv-transfer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  width: 100%;
+  padding: 0.2rem 0.25rem 0;
+  /* `.cv-call` centres and centre-aligns its normal (avatar) content — same reasoning
+     `.cv-call-devices-inline` already opts out of for the OTHER inline swap in this box (its own
+     comment): rows read left-aligned everywhere else in the widget, and a centred context line
+     sitting directly above a left-aligned input/toggle/list read as two layouts stacked on top of
+     each other, found live (2026-09-29). */
+  text-align: left;
+  /* Found live (2026-09-29): `.cv-call`'s avatar/name/timer block used to sit ABOVE this,
+     unconditionally, so this panel only ever got whatever was left over — see the JSX call site's own
+     comment. Now that this IS the whole of `.cv-call`'s content while a transfer is in progress
+     (a swap, not an addition), it should CLAIM `.cv-call`'s available height, not just sit in it —
+     `flex: 1` does that; `min-height: 0` is what lets a flex child actually shrink to fit instead of
+     forcing its parent to grow past it (the same reason `.cv-call`/`.cv-view`/`.cv-body` all set it,
+     see their own comments). This is what lets `.cv-presence-list` below flex-grow into real room
+     instead of needing its own hand-tuned `max-height` guess. */
+  flex: 1;
+  min-height: 0;
+  /* Same entrance `.cv-call-devices-inline` already uses for the analogous inline swap (its own
+     comment) — reused, not a second animation invented for this widget's second inline-swap view. */
+  animation: cv-call-devices-in 0.18s cubic-bezier(0.2, 0, 0.2, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-transfer { animation: none; }
+}
+/* The compact "who am I still on the phone with" line while the picker is open — reuses
+   `.cv-call-devices-inline`'s own two classes verbatim (`.cv-call-devices-title` for the name,
+   `.cv-call-devices-context` for the number/timer line) rather than inventing a second "quiet header"
+   style for the same widget; only the tiny stacking gap between them is new.
+
+   Found live (2026-09-29): `.cv-transfer`'s own `gap` alone gave every section — context, input row,
+   mode toggle, results list — the exact same spacing, so nothing read as its own group; the eye had
+   no cue for where "who I'm on the phone with" ends and "pick a transfer target" begins. This extra
+   `margin-bottom`, on top of the base `gap`, is that cue — the toggle stays close to the list it
+   controls (unchanged), only the boundary above the interactive controls opened up. */
+.cv-transfer-context {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex-shrink: 0;
+  margin-bottom: 0.35rem;
+}
+/* Plan T3: the mode toggle reuses `.cv-segmented` (HistoryTab's own filter control) as-is, but its
+   `margin-bottom` (needed THERE, where the surrounding layout has no gap of its own) is redundant
+   here — `.cv-transfer`'s own `gap` above already spaces every child, so the two would stack. Scoped
+   to this context only; HistoryTab's own copy is untouched. */
+.cv-transfer .cv-segmented { margin-bottom: 0; flex-shrink: 0; }
+.cv-transfer .cv-presence-legend { flex-shrink: 0; }
+/* Same treatment as `.cv-call-status` (the avatar's own "Llamando…"/"En espera" line) — one muted
+   status-line vocabulary for the whole call screen, not a second one invented for this panel. */
+.cv-transfer-status {
+  margin: 0;
+  font-size: 0.78rem;
+  color: var(--cv-muted);
+  letter-spacing: 0.04em;
+}
+/* The target-entry/retry row: an input plus one button. */
+.cv-transfer-row {
+  display: flex;
+  gap: 0.5rem;
+}
+/*
+  Flex items default to `min-width: auto`, which floors them at their CONTENT size rather than letting
+  them shrink or grow to fill the row — `.cv-search`'s own `width: 100%` never actually took effect
+  here, because `.cv-btn`'s text ("Llamar") set an unshrinkable floor and the input, having no
+  `flex-grow`, never reclaimed the space left over. `flex: 1` + `min-width: 0` is what actually makes
+  an input-plus-button row behave like one; `flex: none` keeps the button at its natural size.
+*/
+.cv-transfer-row .cv-search {
+  flex: 1;
+  min-width: 0;
+}
+/* `max-width` + ellipsis: the label now includes whatever was typed ("Llamar a {typed}", spec §4.5)
+   and `truncateForButton` already bounds that in JS — this is the CSS backstop, so a value that
+   slips past it (a very wide character set, a future copy change) still can't push `.cv-search` down
+   to an unusable sliver the way the pre-truncation button did before this was noticed. */
+.cv-transfer-row .cv-btn {
+  flex: none;
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The consult-answered row: one or two buttons, no input. */
+.cv-transfer-actions {
   display: flex;
   gap: 0.5rem;
+}
+.cv-transfer-actions .cv-btn {
+  flex: 1;
+}
+/* The ringing phase has only "Cancelar" — a secondary, low-stakes action. Letting the row's own
+   `flex: 1` stretch a LONE button edge to edge reads as oversized for what it is, and nothing else in
+   this widget sizes a single button to the full row; every other `.cv-btn` sizes to its content. */
+.cv-transfer-actions .cv-btn:only-child {
+  flex: none;
+}
+
+/*
+  The agent picker (spec §4.5, plan T7) — an inline, always-visible filtered list under the
+  input+button row, not a click-to-open popover like `.cv-person-filter-pop`: the whole point is that
+  typing already filters it, so hiding it behind a second interaction would undo that.
+
+  Redesigned live (2026-09-29): T7 (72px) and T3 (30px) both hand-tuned a `max-height` in PIXELS
+  against whatever else happened to be on screen at the time, and both were broken by the very next
+  addition above the list (T3's own toggle broke T7's number the same way this would keep breaking on
+  the next change) — down to "barely proves the list is scrollable" at 30px, which is what the user
+  was actually seeing: "users cannot almost see any of the listed users." The real fix wasn't a bigger
+  magic number, it was `.cv-transfer`'s own move to `flex: 1` (see its comment) freeing real height
+  from the block that used to sit above this whole panel — `.cv-presence` and this list now flex-grow
+  into whatever's ACTUALLY left after the context line, input row, toggle and legend take their own
+  natural size, on whatever real height the host panel gives `.cv-call` (this SDK's fixed ~310×520
+  embed today, but also whatever a different host gives it tomorrow — no more re-tuning a constant
+  every time something above the list changes). `.cv-call`'s own `overflow-y: auto` (its own comment)
+  is still the last-resort net if content ever genuinely doesn't fit; this just means that net should
+  now rarely, if ever, have to catch anything for a normal agent list.
+*/
+.cv-presence {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  flex: 1;
+  min-height: 0;
+}
+.cv-presence-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.25rem;
+  border: 1px solid var(--cv-border);
+  border-radius: var(--cv-radius-key);
+  background: var(--cv-surface);
+}
+.cv-presence-empty {
+  margin: 0;
+  padding: 0.5rem;
+  text-align: center;
+  font-size: 0.78rem;
+  color: var(--cv-muted);
+}
+.cv-presence-item {
   width: 100%;
-  padding: 0.85rem 0.25rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.5rem;
+  border: none;
+  border-radius: calc(var(--cv-radius) - 4px);
+  background: none;
+  color: var(--cv-text);
+  font: 400 0.8rem var(--cv-font);
+  text-align: left;
+  cursor: pointer;
+}
+.cv-presence-item:hover:not(:disabled) { background: var(--cv-surface-2); }
+/* En llamada rows are a hard block, not just a hint (CallScreen.tsx's own comment on the row has why)
+   — same `:disabled` treatment `.cv-btn`/`.cv-tab` already use elsewhere in this file, not a new pattern. */
+.cv-presence-item:disabled { opacity: 0.45; cursor: not-allowed; }
+.cv-presence-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+/* Reuses existing intent tokens rather than inventing new ones — `--cv-accent` already means
+   "good, reachable" (the answer button), `--cv-hold` already means "occupied elsewhere" (the hold
+   toggle), and `--cv-faint` is this file's own DECORATIVE-only tier (see the `--cv-*` legend near the
+   top) — exactly what "no signal for this person" is, no signal being the whole point of that tier. */
+.cv-presence-dot[data-state='disponible'] { background: var(--cv-accent); }
+.cv-presence-dot[data-state='en_llamada'] { background: var(--cv-hold); }
+.cv-presence-dot[data-state='desconectado'] { background: var(--cv-faint); }
+.cv-presence-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-presence-meta {
+  flex-shrink: 0;
+  font-size: 0.72rem;
+  color: var(--cv-muted);
+}
+/* Spec §4.6: Desconectado is a HINT, never "can't transfer" — this is what tells the agent so, right
+   under the list it describes. `--cv-muted`, NOT `--cv-faint`: this text is informational (the reader
+   needs it to not misread the state), and `--cv-faint` is reserved for decorative-only content that
+   fails AA on purpose — using it here would repeat the exact tier mistake this file's own `--cv-*`
+   comment block warns against. */
+.cv-presence-legend {
+  margin: 0;
+  font-size: 0.7rem;
+  color: var(--cv-muted);
+  line-height: 1.35;
 }
 
 /*
-  The in-call device quick-switch (SPEC §7 Phase 2 — device management). Same rows as the Ajustes tab
-  (`.cv-settings-row`, via the shared `DevicePickers`), in a popover instead of a page — the call
-  screen already takes over the whole body, so there is no tab bar to reach Ajustes from mid-call.
-
-  Only the in-call state still uses a floating popover — before a call connects, Dispositivos is
-  inline content instead (`.cv-call-devices-inline`, above), not an overlay. Opens UPWARD (`bottom:
-  100%`): the trigger sits at the bottom of the call screen, and there is no room to open downward.
-  Anchored to `.cv-controls`'s own horizontal padding — a container whose width is bounded by ITS
-  parent, never the narrow trigger itself — the same fix CountryPicker's own popover needed (see its
-  comment).
+  `ConsultScreen`'s "someone is still waiting" banner (`docs/specs/transfer-availability.md` §5, the
+  cross-talk fix) — full-width and tappable, not a passive status line, because the entire reason this
+  screen exists is to make "go back to the caller" impossible to miss. Neutral surface + the same
+  `--cv-hold` colour `.cv-badge-hold` already uses for the same fact elsewhere, not a new soft-fill
+  token: a text/icon tint on a plain surface is already proven legible here, and inventing an
+  unmeasured background-tint pairing risks a real contrast regression this file takes seriously
+  elsewhere (see the `-soft`/`-strong` split's own comments).
 */
-.cv-device-popover {
+.cv-consult-hold-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 999px;
+  border: 1px solid var(--cv-border);
+  background: var(--cv-surface);
+  color: var(--cv-hold);
+  font: 600 0.78rem var(--cv-font);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+.cv-consult-hold-banner:hover {
+  background: var(--cv-surface-2);
+  border-color: var(--cv-hold);
+}
+.cv-consult-hold-banner:active {
+  transform: scale(0.98);
+}
+
+@keyframes cv-pop-in-up {
+  from { opacity: 0; transform: translateY(4px) scale(0.97); }
+  to   { opacity: 1; transform: none; }
+}
+
+/*
+  The in-call DTMF keypad — the one floating popover left on the call screen. (Dispositivos was the
+  other; it is inline content now, `.cv-call-devices-inline` above, in every call state.)
+
+  Opens UPWARD (`bottom: 100%`): the trigger sits at the bottom of the call screen, and there is no
+  room to open downward. Anchored to `.cv-controls`'s own horizontal padding — a container whose width
+  is bounded by ITS parent, never the narrow trigger itself — the same fix CountryPicker's own popover
+  needed (see its comment): anchoring to a narrow, off-centre trigger let the popover's edge reach
+  `.cv-softphone`'s `overflow: hidden` and get clipped.
+*/
+.cv-keypad-popover {
   position: absolute;
   z-index: 20;
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  padding: 0.7rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  padding: 0.85rem 1rem;
   background: var(--cv-surface);
   border: 1px solid var(--cv-border);
   border-radius: var(--cv-radius);
   box-shadow: var(--cv-shadow);
 }
-.cv-device-popover--above {
+.cv-keypad-popover--above {
   bottom: 100%;
   left: 1rem;
   right: 1rem;
   margin-bottom: 0.6rem;
   transform-origin: bottom center;
-  animation: cv-device-pop-in-up 0.14s cubic-bezier(0.2, 0, 0.2, 1);
-}
-@keyframes cv-device-pop-in-up {
-  from { opacity: 0; transform: translateY(4px) scale(0.97); }
-  to   { opacity: 1; transform: none; }
+  animation: cv-pop-in-up 0.14s cubic-bezier(0.2, 0, 0.2, 1);
+}
+/* `.cv-key` already carries the full key look (border, hover, active-scale, digit/letter type) from
+   the pre-call dialer — only the size needs setting here, since this grid has no flex ancestor to
+   stretch the rows the way `.cv-keypad` gets to.
+
+   A fixed HEIGHT, not an `aspect-ratio`. This popover opens upward from `.cv-controls`, so it has
+   (host height - controls block - margin) to work with, and a ratio ties its height to the host's
+   WIDTH, which says nothing about how much height there is. Found live: the CRM's real body is 310×473
+   (a 520px panel minus its 45px header), and a 1.3 ratio made this popover 285px — with the 184px
+   controls block that is 479px, so its top ~7px were clipped by `.cv-softphone`'s `overflow: hidden`.
+   48px keys give a 243px popover at ANY width, fit that host with room to spare, and stay at the
+   44-48px minimum tap target (the old ratio gave 45px keys at a 260px host, 58px at 310). */
+.cv-keypad-popover .cv-key {
+  height: 48px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .cv-device-popover--above { animation: none; }
+  .cv-keypad-popover--above { animation: none; }
 }
-/* No per-row override needed here: `.cv-settings-row`/`.cv-settings-note` carry no border,
-   background or padding of their own (see the Settings tab block) — this popover's own `gap` and
-   `padding` are the only spacing in play, which is what keeps it lighter than the full Ajustes
-   page's bordered section for what is meant to be a quick, transient panel. */
 
 /* ── Lists (contacts / history) ──────────────────────────────────────────────── */
 .cv-list-head { flex-shrink: 0; padding: 0.85rem 1rem 0.5rem; }
@@ -814,6 +1249,13 @@
   color: var(--cv-text);
   font: inherit;
   transition: border-color 0.15s ease, background 0.15s ease;
+  /* Found live (2026-09-29): in the transfer row specifically, `.cv-btn`'s own `max-width: 60%`
+     (needed for the dynamic "Llamar a {typed}" label) can leave the input narrower than its
+     placeholder text — an `<input>` has no native ellipsis, so it hard-clipped mid-word
+     ("...o núm") instead of trailing off cleanly. A real, if rare, risk for ANY `.cv-search` usage
+     wherever it's squeezed, not just this one row — the fix belongs on the base rule. */
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .cv-search::placeholder { color: var(--cv-muted); }
 .cv-search:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }