/* =================================================================================
 * VoIP Call Rail redesign (2026-05)
 * =================================================================================
 * All styles in this section are scoped under `.cs-modal-shell` or other prototype-
 * specific class names so they don't disturb existing modals / sidebars in the app.
 *
 * Layered roughly:
 *   1. CSModalShell                   (modal chrome host: toolbar + body)
 *   2. (later slices) call rail, pills, caller-inline, action column,
 *      keypad tray, CRM tray, notes tray, etc.
 *
 * Tied to the prototype at:
 *   Web-Portal/src/controls/selector/PROTOTYPE_floating_call_item.html
 * ================================================================================= */

/* ---- CSModalShell ------------------------------------------------------------- */

.cs-modal-shell .modal-content {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 6px 12px rgba(0,0,0,.06);
}

.cs-modal-shell .modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 14px 16px;
}

.cs-modal-shell .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.cs-modal-shell .cs-modal-body {
    padding: 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;            /* sections scroll within; toolbar pins to top via sticky */
}

.cs-modal-shell .cs-modal-toolbar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.cs-modal-shell .cs-modal-search {
    flex: 1;
    position: relative;
}

.cs-modal-shell .cs-modal-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 12px;
    pointer-events: none;
}

.cs-modal-shell .cs-modal-search-input {
    width: 100%;
    padding: 8px 10px 8px 30px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    font-size: 13px;
    color: #1f2937;
}

.cs-modal-shell .cs-modal-search-input:focus {
    outline: none;
    border-color: #87c040;
    box-shadow: 0 0 0 2px rgba(135,192,64,.15);
}

.cs-modal-shell .cs-modal-seg {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 2px;
}

.cs-modal-shell .cs-modal-seg-btn {
    border: none;
    background: transparent;
    padding: 6px 10px;
    font-size: 12px;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
}

.cs-modal-shell .cs-modal-seg-btn.active {
    background: #87c040;
    color: #ffffff;
    font-weight: 600;
}

/* ---- Unified Transfer modal: sections, rows, per-row action buttons ---------- */

.cs-modal-shell .cs-modal-group {
    border-bottom: 1px solid #e5e7eb;
}

.cs-modal-shell .cs-modal-group:last-child {
    border-bottom: none;
}

.cs-modal-shell .cs-modal-group-head {
    padding: 8px 16px;
    background: #f9fafb;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cs-modal-shell .cs-modal-group-head i {
    font-size: 11px;
    color: #9ca3af;
}

.cs-modal-shell .cs-modal-group-rows {
    background: #ffffff;
}

.cs-modal-shell .cs-modal-target {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.cs-modal-shell .cs-modal-target:last-child {
    border-bottom: none;
}

.cs-modal-shell .cs-modal-target:hover {
    background: #f9fafb;
}

.cs-modal-shell .cs-modal-target .av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #87c040, #3b82f6);
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.cs-modal-shell .cs-modal-target .ic {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #6b7280;
    background: #f9fafb;
}

.cs-modal-shell .cs-modal-target .info {
    flex: 1;
    min-width: 0;
}

.cs-modal-shell .cs-modal-target .info .name {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

.cs-modal-shell .cs-modal-target .info .sub {
    font-size: 11px;
    color: #6b7280;
}

.cs-modal-shell .cs-modal-target .row-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Per-row action button — neutral by default, .vm = info-blue, .park = warning-amber. */
.cs-modal-shell .row-act {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}

.cs-modal-shell .row-act:hover {
    background: #87c040;
    color: #ffffff;
    border-color: #87c040;
}

.cs-modal-shell .row-act.vm {
    color: #3b82f6;
    border-color: rgba(59,130,246,.3);
    background: rgba(59,130,246,.08);
}

.cs-modal-shell .row-act.vm:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.cs-modal-shell .row-act.park {
    color: #f59e0b;
    border-color: rgba(245,158,11,.3);
    background: rgba(245,158,11,.08);
}

.cs-modal-shell .row-act.park:hover {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
}

.cs-modal-shell .badge-wait {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245,158,11,.15);
    color: #f59e0b;
    font-weight: 600;
}

/* Dial-a-number row: input + Transfer button. */
.cs-modal-shell .cs-dial-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #ffffff;
}

.cs-modal-shell .cs-dial-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    color: #1f2937;
    background: #ffffff;
}

.cs-modal-shell .cs-dial-input:focus {
    outline: none;
    border-color: #87c040;
    box-shadow: 0 0 0 2px rgba(135,192,64,.15);
}

.cs-modal-shell .cs-dial-row .row-act {
    background: #87c040;
    color: #ffffff;
    border-color: #87c040;
    padding: 8px 14px;
}

.cs-modal-shell .cs-dial-row .row-act:hover {
    background: #6ea033;
    border-color: #6ea033;
}

/* ---- TransferUserRow / TransferQueueRow / TransferParkingStallRow ------------
   These extend the existing SelectorItem subclasses (so their rabbit-event
   subscriptions for presence / parked-call status keep firing). The base
   SelectorItem renders its own chrome; we apply scoped overrides here so a
   row inside the unified Transfer modal reads like the prototype's
   `cs-modal-target` shape. -------------------------------------------------- */

/* GenericSelector / GenericSelectorHeader: scoped Selector + SelectorHeader
   variants. Used anywhere a Selector needs the prototype's section-title
   visual (icon + uppercase label) without bleeding into other selectors. */

/* When a GenericSelector lives inside a cs-modal-group, the inner
   GenericSelectorHeader provides the section title — hide the outer
   cs-modal-group-head from buildSection() so the title doesn't render twice. */
.cs-modal-shell .cs-modal-group:has(.cs-generic-selector) .cs-modal-group-head {
    display: none;
}

/* Generic selector container: strip the base Selector chrome so it sits
   flush inside its host. */
.cs-generic-selector {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Generic selector header: icon + uppercase label row.
   The header's outer _itemContainer (.avidbit-selector-item-container) is the
   full-width row, so the gray strip + border + padding live there — that way
   the bg goes all the way across regardless of how wide the inner icon-title
   stretches. The inner .icon-title-container just lays out icon + title +
   count badge horizontally. */
.cs-generic-selector-head > .avidbit-selector-item-container {
    padding: 8px 16px !important;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.cs-generic-selector-head > .avidbit-selector-item-container > .icon-title-container {
    gap: 6px;
    padding: 0 !important;
    background: transparent;
}

.cs-generic-selector-head > .avidbit-selector-item-container > .icon-title-container .selector-item-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: #6b7280 !important;
}

.cs-generic-selector-head > .avidbit-selector-item-container > .icon-title-container i {
    font-size: 11px;
    color: #9ca3af;
}

/* The framework's renderItem always creates empty t_subTitle / t_subTitle2
   widgets inside .title-container, even when the SelectorHeader has no
   subtitle. They take a line of space (line-height), making _titleContainer
   taller than the badge and icon — so the title sits at the top of its box
   while the badge centers against the box's middle. Hide them on headers. */
.cs-generic-selector-head > .avidbit-selector-item-container .selector-item-subtitle,
.cs-generic-selector-head > .avidbit-selector-item-container .selector-item-subtitle-2 {
    display: none !important;
}

/* Title-container itself: drop default block stacking. With the subtitle hidden
   it's now just the title text — let it shrink-to-fit so it lines up cleanly
   with the icon and badge in the icon-title-container's flex row. */
.cs-generic-selector-head > .avidbit-selector-item-container .title-container {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* ---- Transfer modal: bottom Dial section --------------------------------- */
/* Replaces the original TransferDialRow with a recents-search Selector +
   Transfer button. Same visual language as the rest of the modal but a
   distinct band so it reads as "the dial / contacts surface" separately
   from the upper sectioned list. */
.cs-modal-shell .cs-transfer-dial-section {
    border-top: 1px solid #e5e7eb;
    margin-top: 8px;
    padding: 12px 16px 16px;
    background: #f9fafb;
}
.cs-modal-shell .cs-transfer-dial-head {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
    margin-bottom: 8px;
}
.cs-modal-shell .cs-transfer-dial-row {
    gap: 8px;
}
.cs-modal-shell .cs-transfer-dial-input {
    flex: 1 1 auto;
    min-width: 0;
}
.cs-modal-shell .cs-transfer-dial-input .form-control,
.cs-modal-shell .cs-transfer-dial-input input[type="text"] {
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
}
.cs-modal-shell .cs-transfer-dial-btn,
.cs-modal-shell .cs-transfer-dial-btn.btn {
    background: #3b82f6 !important;
    border: 1px solid #2563eb !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    flex-shrink: 0;
}
.cs-modal-shell .cs-transfer-dial-btn:hover,
.cs-modal-shell .cs-transfer-dial-btn.btn:hover {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
}

/* Inline multi-number picker — overlay the modal content instead of
   pushing it down. The dial section is the positioned anchor (relative)
   so the panel can float above sibling content with absolute positioning.
   Backed with a subtle shadow + ring so it reads as a popover layer. */
.cs-modal-shell .cs-transfer-dial-section {
    position: relative;
}
.cs-modal-shell .cs-transfer-dial-multinumber {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% - 4px); /* opens DOWNWARD from the section. The dial
                                section now sits at the top of the modal,
                                so downward keeps the popover inside the
                                modal-body bounds. */
    margin-top: 0;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15,23,42,.16), 0 4px 10px rgba(15,23,42,.06);
    z-index: 10050;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: none;
}
.cs-modal-shell .cs-transfer-dial-multinumber::-webkit-scrollbar { display: none; }

.cs-modal-shell .cs-transfer-dial-multinumber-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
    margin-bottom: 8px;
    padding: 2px 4px;
}

/* Each phone-number row: brand-tinted icon chip on the left, number text
   stack on the right, soft hover lift. Cleaner card-style affordance than
   the previous flat row. */
.cs-modal-shell .cs-transfer-dial-multinumber-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.cs-modal-shell .cs-transfer-dial-multinumber-row:last-child {
    margin-bottom: 0;
}
.cs-modal-shell .cs-transfer-dial-multinumber-row:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    box-shadow: 0 2px 6px rgba(59,130,246,.12);
    transform: translateX(2px);
}

/* Phone-icon chip — square-rounded badge anchoring the row visually. */
.cs-modal-shell .cs-transfer-dial-multinumber-row::before {
    content: '\f095'; /* fa-phone */
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(59,130,246,.12);
    color: #2563eb;
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
}
/* Text stack: type label on top (small, uppercase, muted) and the actual
   number underneath (medium, prominent). Sits between the icon chip and
   the trailing chevron in the flex row. */
.cs-modal-shell .cs-transfer-dial-multinumber-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.cs-modal-shell .cs-transfer-dial-multinumber-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
    line-height: 1;
}
.cs-modal-shell .cs-transfer-dial-multinumber-num {
    font-size: 13px;
    color: #1f2937;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Trailing chevron — quiet affordance that this row is clickable. */
.cs-modal-shell .cs-transfer-dial-multinumber-row::after {
    content: '\f054'; /* fa-chevron-right */
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    font-size: 10px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color .14s ease;
}
.cs-modal-shell .cs-transfer-dial-multinumber-row:hover::after {
    color: #2563eb;
}

/* Contact-row variant of the number picker: rendered INLINE under a
   Contacts row (Quick Transfer has no dial section to float over), so
   drop the popover positioning / shadow and let it flow as a block. */
.cs-modal-shell .cs-transfer-contact-multinumber {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin: 0 16px 10px 16px;
    padding: 8px;
    box-shadow: none;
    border-color: #e5e7eb;
    background: #f9fafb;
    z-index: auto;
    max-height: 240px;
}

/* When the recents-search dropdown is open, let it escape the modal body's
   `overflow-y: auto` and the modal-content's border-radius clip so the
   popup overlays everything (matches the pattern used by the disposition
   dropdown inside the Notes tray). High z-index keeps it above sibling
   content. */
.cs-modal-shell:has(.cs-transfer-dial-section .dropdown-menu.show) .cs-modal-body,
.cs-modal-shell:has(.cs-transfer-dial-section .dropdown-menu.show) .modal-content,
.cs-modal-shell:has(.cs-transfer-dial-section .dropdown-menu.show) .modal-dialog {
    overflow: visible !important;
}
.cs-modal-shell .cs-transfer-dial-section .dropdown-menu {
    z-index: 10050 !important;
}

/* Row look — overlays the existing SelectorItem chrome so the transfer modal
   reads like the prototype's compact .modal-target rows (32px avatar, 13px
   name, 11px muted sub, 10px vertical padding). The outer .cs-transfer-row
   is the SelectorItem WContainerWidget itself; its inner DOM is built by
   SelectorItem::renderItem() — so we override class targets like
   .selector-item-title / .selector-item-subtitle that the framework adds. */
.cs-modal-shell .cs-transfer-row {
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.cs-modal-shell .cs-transfer-row:hover {
    background: #f9fafb;
}

/* Inner item container padding + gap — match prototype's .modal-target
   shape: 10px vertical / 16px horizontal padding, 10px between children.
   align-items: center vertically centers the avatar, title block, and
   action buttons against each other (framework only adds d-flex + flex-row
   without an alignment value, so flex defaults to stretch). */
.cs-modal-shell .cs-transfer-row .avidbit-selector-item-container {
    padding: 10px 16px !important;
    padding-bottom: 10px !important;
    gap: 10px;
    align-items: center !important;
}

/* Title (name): match prototype 13px / weight 500, kill any inherited
   uppercase from elsewhere in the codebase. */
.cs-modal-shell .cs-transfer-row .selector-item-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    color: #1f2937 !important;
}

/* Sub-lines (email, voipNumber, etc): 11px muted, also forced sentence-case. */
.cs-modal-shell .cs-transfer-row .selector-item-subtitle,
.cs-modal-shell .cs-transfer-row .selector-item-subtitle-2 {
    font-size: 11px !important;
    color: #6b7280 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

/* The framework's icon-title-container is flex by default and stretches with
   flex-grow-1; we just want the avatar + text. Compact the icon size. */
.cs-modal-shell .cs-transfer-row .icon-title-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 10px;
}

/* Avatar / icon — 32px round to match prototype's .modal-target .av. */
.cs-modal-shell .cs-transfer-row .symbol-container,
.cs-modal-shell .cs-transfer-row .symbol-30 {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
}

/* SelectorItem-based rows (TransferUserRow/TransferQueueRow/TransferParkingStallRow):
   the row's outer .cs-transfer-row contains an _itemContainer (.d-flex.flex-row)
   whose children are _iconTitleContainer (flex-grow-1) and _infoContainer.
   The action buttons live inside _infoContainer > .row-actions.

   The framework gives `.selector-item .info-container` a default
   `padding-right: 35px` and `flex-grow: 4`. The 35px pad was eating the
   buttons' room and forcing them to wrap; killing it + giving the
   info-container an explicit width (per-row-type, below) is what makes
   the buttons stay on one line. `align-self: center` on `.row-actions`
   is the missing piece for vertical centering — without it the buttons
   pin to the top regardless of `align-items: center` on the parent.   */

/* Belt-and-braces: ensure the icon-title and right-interaction siblings inside
   the row don't stretch — they're the elements that previously pulled flex
   layout's default `align-items: stretch` and forced action buttons to the top. */
.cs-modal-shell .cs-transfer-row > .avidbit-selector-item-container > * {
    align-self: center;
}

.cs-modal-shell .cs-transfer-row .icon-title-container,
.cs-modal-shell .cs-transfer-row .title-container {
    min-width: 0;
}

/* Standalone class for align-self: center — applied directly in C++ to
   `_infoContainer` and `_actionsContainer` so the rule sticks without
   relying on the longer descendant selectors that compete with other
   framework styles.                                                      */
.cs-self-center
{
    align-self: center !important;
}

/* Standalone reset for `.info-container`'s framework defaults. The
   framework rule `.selector-item .info-container { padding-right: 35px;
   flex-grow: 4; }` (avidbit_portal.css) eats the action-buttons slot and
   makes the column greedy. Applied via C++ to the user transfer row so
   the override is direct (not descendant-selector-based) and can't lose
   a specificity race.                                                    */
.cs-info-container-reset
{
    padding-right: 0 !important;
    flex-grow: 0 !important;
}

/* ---- Per-row-type tweaks ----
   Common: zero out the framework's right pad, force flex row + center,
   no wrap, and let each row-type below choose its own width.            */
.cs-modal-shell .cs-transfer-row .avidbit-selector-item-container {
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.cs-modal-shell .cs-transfer-row .info-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding-right: 0 !important;    /* kill framework 35px */
    padding-left: 8px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    align-self: center !important;
}
.cs-modal-shell .cs-transfer-row .row-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}
.cs-modal-shell .cs-transfer-row .row-act {
    flex: 0 0 auto !important;
    align-self: center !important;
    white-space: nowrap !important;
}

/* USERS — three action buttons (Blind / Call / VM). 40% width gives the
   buttons enough room and keeps them aligned column-wise across rows.   */
.cs-modal-shell .cs-transfer-row-user .info-container {
    width: 40% !important;
}
.cs-modal-shell .cs-transfer-row-user .row-actions {
    justify-content: flex-start !important;
    width: 100% !important;
}
.cs-modal-shell .cs-transfer-row-user .row-act {
    min-width: 60px !important;
    text-align: center !important;
}

/* QUEUES — single Transfer button, vertically + horizontally centered.
   Extra vertical breathing room between rows.                          */
.cs-modal-shell .cs-transfer-row-queue {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    margin-bottom: 6px !important;
}
.cs-modal-shell .cs-transfer-row-queue .info-container {
    width: 25% !important;
}
.cs-modal-shell .cs-transfer-row-queue .row-actions {
    justify-content: center !important;
    width: 100% !important;
}

/* VM INBOXES — single Send button, vertically + horizontally centered. */
.cs-modal-shell .cs-transfer-row-vminbox .info-container {
    width: 25% !important;
}
.cs-modal-shell .cs-transfer-row-vminbox .row-actions {
    justify-content: center !important;
    width: 100% !important;
}

/* NUMBERS — single Transfer button, vertically + horizontally centered. */
.cs-modal-shell .cs-transfer-row-number .info-container {
    width: 25% !important;
}
.cs-modal-shell .cs-transfer-row-number .row-actions {
    justify-content: center !important;
    width: 100% !important;
}

/* Conference modal (#2) — footer button row inside the modal body.
   Right-aligns the Cancel + Start Conference buttons; the selector itself
   takes the full body width above. */
.cs-modal-shell.cs-conference-modal .cs-conference-footer,
.cs-modal-shell.cs-device-swap-modal .cs-device-swap-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    gap: 8px;
}

/* Device-swap modal (#3) — per-device meta badges.
   Three variants matching the prototype's `.badge-meta.default / .current / .web`:
   - .default = amber (user's preferred / default communication device)
   - .current = green (the device this call is currently routed through)
   - .web     = info-blue (reserved for the WebRTC-capable row, future) */
.cs-modal-shell.cs-device-swap-modal .meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.cs-modal-shell.cs-device-swap-modal .badge-meta {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
}

.cs-modal-shell.cs-device-swap-modal .badge-meta.default {
    background: rgba(245,158,11,.15);
    color: #f59e0b;
}

.cs-modal-shell.cs-device-swap-modal .badge-meta.current {
    background: rgba(135,192,64,.18);
    color: #87c040;
}

.cs-modal-shell.cs-device-swap-modal .badge-meta.web {
    background: rgba(59,130,246,.15);
    color: #3b82f6;
}

/* Current-call device row reads as inactive: slightly dimmed (no Swap action). */
.cs-modal-shell.cs-device-swap-modal .cs-transfer-row.device-current {
    opacity: .85;
}

/* ========================================================================== */
/* VoIP Call Rail (#4 — chrome only, no calls yet)                              */
/* Behind the kUseNewCallRail flag in CSCommunicator_ActiveCalls.h.             */
/* When the flag flips on, CSCommunicator_ActiveCalls gets the .cs-call-rail    */
/* class and the chrome below replaces the legacy floating sidebar look.        */
/* ========================================================================== */

/* Outer rail container. Floating (default) = 56px column, shadow + rounded.
   Pinned = 88px column flush to the right edge, no shadow, no border-radius. */
.cs-call-rail {
    position: fixed;
    right: 8px;
    top: 140px;
    bottom: 20px;
    width: 56px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 6px;
    z-index: 50;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .18s ease, right .18s ease, border-radius .18s ease;
    scrollbar-width: none;
}
.cs-call-rail::-webkit-scrollbar { display: none; }

/* Pinned: integrated into the right edge, wider, no float aesthetics. */
.cs-call-rail.cs-call-rail-pinned {
    right: 0;
    width: 88px;
    border-radius: 0;
    box-shadow: none;
    border-left: 1px solid #e5e7eb;
    border-right: none;
    border-top: none;
    border-bottom: none;
    /* Pinned rail owns the full right edge from the top of the viewport. */
    top: 0;
    bottom: 0;
}

/* Page content reserves room for the pinned rail by adding right padding.
   Keyed purely off the pinned state, not the device. `.cs-rail-content-
   reserve` is added to aApp->root() by setPinned() only while the rail is
   pinned AND visible (see applyRailVisibility), so this rule fires exactly
   when an 88px-wide rail occupies the right edge — desktop and mobile/PWA
   alike. A pinned rail overlapping content on a touchscreen is the same
   bug as on desktop, so the reserve must NOT be gated by input capability.
   When the rail unpins or hides the class is removed and the reserve
   reverts. The floating (unpinned) rail is a 56px overlay by design and
   gets no reserve.

   box-sizing: border-box is required: aApp->root() (.Wt-domRoot) is a
   width:auto block, so without border-box the 88px padding adds ON TOP of
   its full width and overflows horizontally instead of shrinking the
   content box. This is the SINGLE reserve owner — see the note at the
   pinned-rail z-index rule for why the former <body> padding was dropped. */
.cs-rail-content-reserve
{
    padding-right: 88px;
    box-sizing: border-box;
}

.cs-rail-content-reserve > .flex-grow-1,
.cs-rail-content-reserve .flex-root,
.cs-rail-content-reserve .page,
.cs-rail-content-reserve #kt_wrapper,
.cs-rail-content-reserve #kt_content,
.cs-rail-content-reserve #kt_header,
.cs-rail-content-reserve #kt_footer
{
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1;
}

.cs-rail-content-reserve > .flex-grow-1,
.cs-rail-content-reserve .flex-root,
.cs-rail-content-reserve .page,
.cs-rail-content-reserve #kt_wrapper,
.cs-rail-content-reserve #kt_content
{
    min-height: 0;
}

.cs-rail-content-reserve .communicator-outer-widget,
.cs-rail-content-reserve .row.col-12.communicator-outer-widget.h-100
{
    flex: 1 1 0 !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 0 !important;
    height: auto !important;
    min-height: 0;
    max-height: calc(100svh - 290px) !important;
}

.cs-rail-content-reserve .communicator-outer-widget > .communicator-outer-widget-holder,
.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container,
.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card
{
    max-height: inherit !important;
    min-height: 0 !important;
}

.cs-rail-content-reserve .communicator-outer-widget > .communicator-outer-widget-holder
{
    align-self: stretch !important;
    flex-shrink: 1 !important;
    height: auto !important;
}

.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container,
.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card
{
    height: auto !important;
}

.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container,
.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card,
.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card > .card-body,
.cs-rail-content-reserve .communicator-outer-widget .f_conversation_flex_box
{
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card > .card-body,
.cs-rail-content-reserve .communicator-outer-widget .f_conversation_flex_box
{
    height: auto !important;
    overflow: hidden;
}

.cs-rail-content-reserve .communicator-outer-widget .conversation-history-widget
{
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: auto !important;
}

.cs-rail-content-reserve .communicator-outer-widget .conversation-history-widget .f_conversation_full_screen
{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.cs-rail-content-reserve .communicator-outer-widget .conversation-reply-tabs
{
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.cs-rail-content-reserve .communicator-outer-widget,
.cs-rail-content-reserve .communicator-outer-widget > .communicator-outer-widget-holder,
.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container,
.cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card
{
    overflow: hidden;
}

.cs-rail-content-reserve .cs-call-rail-host
{
    width: 0;
    min-width: 0;
    max-width: 0;
    flex: 0 0 0;
}

@media (max-width: 767.98px)
{
    .cs-rail-content-reserve .communicator-outer-widget,
    .cs-rail-content-reserve .row.col-12.communicator-outer-widget.h-100
    {
        height: calc(100svh - 260px) !important;
        max-height: calc(100svh - 260px) !important;
    }

    .cs-rail-content-reserve .communicator-outer-widget > .communicator-outer-widget-holder,
    .cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container,
    .cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card
    {
        height: 100% !important;
    }

    .cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card
    {
        margin-bottom: 0 !important;
    }

    .cs-rail-content-reserve .f_conversation_recent_full_screen
    {
        /* Definite height so recents fills the panel even when the call rail is
           pinned (matches the base rule). */
        height: calc(100svh - 411px);
        overflow: auto;
    }
    .cs-rail-content-reserve .f_conversation_users_full_screen
    {
        max-height: calc(100svh - 411px);
        overflow: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px)
{
    .cs-rail-content-reserve .communicator-outer-widget,
    .cs-rail-content-reserve .row.col-12.communicator-outer-widget.h-100
    {
        height: calc(100svh - 210px) !important;
        max-height: calc(100svh - 210px) !important;
    }

    .cs-rail-content-reserve .communicator-outer-widget > .communicator-outer-widget-holder,
    .cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container,
    .cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card
    {
        height: 100% !important;
    }

    .cs-rail-content-reserve .communicator-outer-widget #pwa_conversation_container > .card
    {
        margin-bottom: 0 !important;
    }
}

/* Desktop (>=992px) communicator route under a pinned, on-call rail.

   The reserve base rule (.cs-rail-content-reserve .communicator-outer-widget)
   leaves the row at height:auto on desktop and relies on flex-grow to fill the
   parent. But this route's parent is a block, so flex-grow supplies no height;
   the row falls back to its content height, and the h-100 columns then resolve
   their height against that auto row — a circular dependency that collapses the
   whole communicator (recents + conversation) to 0px. It only bit while pinned
   AND on a call, because that's the only time setPinned()/applyRailVisibility()
   add .cs-rail-content-reserve; the moment the call ends or the rail unpins, the
   class is dropped and the unscoped desktop block below (which DOES give the row
   an explicit height) takes over and the conversation reappears.

   The <768 and 768-991 reserve blocks already hand the row an explicit height;
   >=992 was the gap. Mirror them — and the off-state desktop block — by giving
   the reserve row a definite height (matching its existing max-height). Higher
   specificity than the unscoped .communicator-outer-widget rule below, so it
   wins while reserved. */
@media (min-width: 992px)
{
    .cs-rail-content-reserve .communicator-outer-widget,
    .cs-rail-content-reserve .row.col-12.communicator-outer-widget.h-100
    {
        height: calc(100svh - 290px) !important;
        max-height: calc(100svh - 290px) !important;
    }
}

/* Small/tablet communicator route: when there are only a few conversation
   items, Bootstrap's content-sized layout leaves the reply box floating high
   on the page. Give the route a real viewport-sized box and let the history
   region absorb the remaining space so the reply composer pins to the card
   bottom. */
@media (max-width: 991.98px)
{
    .communicator-outer-widget,
    .row.col-12.communicator-outer-widget.h-100
    {
        height: calc(100svh - 250px) !important;
        max-height: calc(100svh - 250px) !important;
        min-height: 0 !important;
    }

    .communicator-outer-widget > .communicator-outer-widget-holder:not(.d-none),
    .communicator-outer-widget #pwa_conversation_container,
    .communicator-outer-widget #pwa_conversation_container > .card
    {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    .communicator-outer-widget #pwa_conversation_container > .card
    {
        margin-bottom: 0 !important;
    }

    .communicator-outer-widget #pwa_conversation_container,
    .communicator-outer-widget #pwa_conversation_container > .card,
    .communicator-outer-widget #pwa_conversation_container > .card > .card-body,
    .communicator-outer-widget .f_conversation_flex_box
    {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
    }

    .communicator-outer-widget #pwa_conversation_container > .card > .card-body,
    .communicator-outer-widget .f_conversation_flex_box
    {
        height: auto !important;
        overflow: hidden;
    }

    .communicator-outer-widget .conversation-history-widget
    {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: auto !important;
    }

    .communicator-outer-widget .conversation-history-widget .f_conversation_full_screen
    {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .communicator-outer-widget .conversation-reply-tabs
    {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}

/* Desktop communicator route without a pinned call rail. The conversation
   card already receives the route's viewport cap from CSCommunicator; its
   legacy inner `height: 100%` history stack can still push the composer past
   that card. Keep history as the sole scrollable flex child and keep the
   reply composer inside the capped card. */
@media (min-width: 992px)
{
    .communicator-outer-widget,
    .row.col-12.communicator-outer-widget.h-100
    {
        height: calc(100svh - 250px) !important;
        max-height: calc(100svh - 250px) !important;
        min-height: 0 !important;
    }

    .communicator-outer-widget > .communicator-outer-widget-holder:not(.d-none),
    .communicator-outer-widget #pwa_conversation_container
    {
        height: 100% !important;
        min-height: 0 !important;
    }

    .communicator-outer-widget #pwa_conversation_container > .card
    {
        margin-bottom: 0 !important;
    }

    .communicator-outer-widget #pwa_conversation_container,
    .communicator-outer-widget #pwa_conversation_container > .card,
    .communicator-outer-widget #pwa_conversation_container > .card > .card-body,
    .communicator-outer-widget .f_conversation_flex_box
    {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
    }

    .communicator-outer-widget #pwa_conversation_container,
    .communicator-outer-widget #pwa_conversation_container > .card
    {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden;
    }

    .communicator-outer-widget #pwa_conversation_container > .card > .card-body,
    .communicator-outer-widget .f_conversation_flex_box
    {
        height: auto !important;
        overflow: hidden;
    }

    .communicator-outer-widget .conversation-history-widget
    {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: auto !important;
    }

    .communicator-outer-widget .conversation-history-widget .f_conversation_full_screen
    {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .communicator-outer-widget .conversation-reply-tabs
    {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}

/* Rail-head: pin + hide buttons.
   Floating (default): stacked vertically (rail is only 56px wide).
   Pinned (88px): row with the buttons centered side-by-side. */
.cs-call-rail-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 0 8px;
    border-bottom: 1px solid #e5e7eb;
    margin: 0 0 6px;
    flex-shrink: 0;
}

.cs-call-rail.cs-call-rail-pinned .cs-call-rail-head {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

/* Buttons — bordered surface like the prototype, with predictable hover.
   Wt's WPushButton emits a real <button>; reset Bootstrap's default chrome
   with !important so it doesn't override our look. */
.cs-call-rail-btn,
.cs-call-rail-btn.btn {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
    font-size: 13px;
    line-height: 1;
    box-shadow: none !important;
}
.cs-call-rail-btn:hover,
.cs-call-rail-btn.btn:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

.cs-call-rail-btn i { font-size: 13px; line-height: 1; }

/* Pinned state — fill the pin button with the brand green to make the
   "currently pinned" state visually obvious. Icon rotates as a secondary
   cue (the prototype's pin convention). */
.cs-call-rail.cs-call-rail-pinned .cs-call-rail-pin {
    background: rgba(135,192,64,.18) !important;
    color: #87c040 !important;
}
.cs-call-rail.cs-call-rail-pinned .cs-call-rail-pin:hover {
    background: rgba(135,192,64,.28) !important;
    color: #6ea033 !important;
}
.cs-call-rail.cs-call-rail-pinned .cs-call-rail-pin i {
    transform: rotate(-30deg);
    transition: transform .14s ease;
}
.cs-call-rail.cs-call-rail-floating .cs-call-rail-pin i {
    transform: rotate(0deg);
    transition: transform .14s ease;
}

/* Pill column (#6) */
.cs-call-rail-pills  { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 4px 0; }

/* ---------------------------------------------------------------------------- */
/* Caller-inline display (#7)                                                   */
/*                                                                              */
/* Visible only when pinned — the 56px floating rail is too narrow to host the  */
/* full 44px avatar + name + timer + status pill stack. Unpinned mode uses the  */
/* floating chip elsewhere (covered in #6 follow-ups, separate path).           */
/* ---------------------------------------------------------------------------- */
.cs-call-rail-inline {
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 2px 0 10px;
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
}
.cs-call-rail.cs-call-rail-pinned .cs-call-rail-inline {
    display: flex;
}
.cs-call-rail.cs-call-rail-pinned .cs-call-rail-inline:hover {
    background: #f9fafb;
}

.cs-call-rail-inline-av {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    background: #87c040; /* fallback — real gradient applied inline */
    flex-shrink: 0;
}
.cs-call-rail-inline-initials { line-height: 1; }

.cs-call-rail-inline-ring {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #87c040;
    border: 2px solid #ffffff;
    z-index: 2;
    pointer-events: none;
}
.cs-call-rail-inline[data-status="connected"] .cs-call-rail-inline-ring { background: #87c040; }
.cs-call-rail-inline[data-status="held"]      .cs-call-rail-inline-ring { background: #d97706; }
.cs-call-rail-inline[data-status="muted"]     .cs-call-rail-inline-ring { background: #dc2626; }
.cs-call-rail-inline[data-status="ringing"]   .cs-call-rail-inline-ring {
    background: #3b82f6;
    animation: cs-call-pill-ring-pulse 1.1s ease-in-out infinite;
}

.cs-call-rail-inline-name {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: #1f2937;
}
.cs-call-rail-inline-timer {
    font-size: 10px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.cs-call-rail-inline-status {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.4;
}
.cs-call-rail-inline[data-status="connected"] .cs-call-rail-inline-status { background: rgba(135,192,64,.15); color: #87c040; }
.cs-call-rail-inline[data-status="held"]      .cs-call-rail-inline-status { background: #fef3c7;                color: #d97706; }
.cs-call-rail-inline[data-status="muted"]     .cs-call-rail-inline-status { background: #fee2e2;                color: #dc2626; }
.cs-call-rail-inline[data-status="ringing"]   .cs-call-rail-inline-status { background: rgba(59,130,246,.15);   color: #3b82f6; }
.cs-call-rail-inline[data-status="queued"]    .cs-call-rail-inline-status { background: rgba(59,130,246,.15);   color: #3b82f6; }
.cs-call-rail-inline[data-status="ended"]     .cs-call-rail-inline-status { background: #f3f4f6;                color: #6b7280; }
.cs-call-rail-inline[data-status="queued"]    .cs-call-rail-inline-ring   { background: #3b82f6; }

/* ---------------------------------------------------------------------------- */
/* Connected-wave animation (#7)                                                */
/*                                                                              */
/* Two staggered ripples emanate outward from the avatar while the call is in   */
/* the connected state — visual "sound waves." Only runs when status=connected; */
/* held / muted / ringing intentionally suppress the animation so the meaning   */
/* of "this call is live, both sides talking" stays specific.                   */
/*                                                                              */
/* Selectors:                                                                   */
/*   - .cs-call-rail-inline-av when the parent has data-status="connected"      */
/*   - .cs-call-pill.cs-pill-focused when the pill has data-status="connected"  */
/* ---------------------------------------------------------------------------- */
@keyframes cs-connected-wave {
    0%   { transform: scale(1);    opacity: 0;    }
    18%  {                          opacity: 0.55; }
    100% { transform: scale(1.45); opacity: 0;    }
}

.cs-call-rail-inline[data-status="connected"] .cs-call-rail-inline-av::before,
.cs-call-rail-inline[data-status="connected"] .cs-call-rail-inline-av::after,
.cs-call-pill.cs-pill-focused[data-status="connected"]::before,
.cs-call-pill.cs-pill-focused[data-status="connected"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #87c040;
    background: transparent;
    animation: cs-connected-wave 2.4s ease-out infinite;
    pointer-events: none;
}
.cs-call-rail-inline[data-status="connected"] .cs-call-rail-inline-av::after,
.cs-call-pill.cs-pill-focused[data-status="connected"]::after {
    animation-delay: 1.2s;
}

/* ---------------------------------------------------------------------------- */
/* Ringing-state action block (#7)                                              */
/*                                                                              */
/* One block per inbound call (outbound calls don't build a block at all).      */
/* Hidden by default — the rail toggles `.cs-active` on the focused call's      */
/* block to reveal it. Class-driven rather than Wt's hide()/show() so the       */
/* widget renders hidden on the first paint with zero flash, even before any    */
/* JS update lands.                                                             */
/* ---------------------------------------------------------------------------- */
.cs-call-rail-ringing-actions {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 4px;
    align-items: center;
    flex-shrink: 0;
}
.cs-call-rail-ringing-actions.cs-active {
    display: flex;
}

/* Buttons share a 60x60 square footprint with the icon-over-label stack.
   Specificity boost via `.btn` covers Bootstrap's default chrome on the
   underlying <button> element Wt renders. */
.cs-call-rail-ring-btn,
.cs-call-rail-ring-btn.btn {
    width: 60px;
    height: 60px;
    padding: 0 !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    cursor: pointer;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: none;
    line-height: 1;
    margin: 0 !important;
    transition: transform .14s ease, box-shadow .2s ease, filter .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
    -webkit-tap-highlight-color: transparent;
}
.cs-call-rail-ring-btn i,
.cs-call-rail-ring-btn .btn i {
    font-size: 18px;
    line-height: 1;
}
.cs-call-rail-ring-btn span { line-height: 1; }
.cs-call-rail-ring-btn:hover { transform: translateY(-2px); }
.cs-call-rail-ring-btn:active { transform: translateY(0); filter: brightness(.94); }
.cs-call-rail-ring-btn:focus,
.cs-call-rail-ring-btn:focus-visible { outline: none !important; }

/* Answer — brand-green with a subtle vertical gradient + color-matched
   ambient shadow so the primary affordance pops without going neon.
   Hidden by default; `.cs-can-answer` reveals it once the call's WebRTC
   flag arrives. Class-driven so the initial render is hidden — no flash. */
.cs-call-rail-ring-answer,
.cs-call-rail-ring-answer.btn {
    display: none !important;
    background: linear-gradient(180deg, #95cc4f 0%, #7bb336 100%) !important;
    color: #ffffff !important;
    border-color: rgba(110, 160, 51, .35) !important;
    box-shadow: 0 1px 2px rgba(110,160,51,.35), 0 6px 14px rgba(135,192,64,.32) !important;
}
.cs-call-rail-ring-answer.cs-can-answer,
.cs-call-rail-ring-answer.cs-can-answer.btn {
    display: inline-flex !important;
}
.cs-call-rail-ring-answer i,
.cs-call-rail-ring-answer.btn i { color: #ffffff !important; }
.cs-call-rail-ring-answer:hover,
.cs-call-rail-ring-answer.btn:hover {
    background: linear-gradient(180deg, #9bd457 0%, #82bb3a 100%) !important;
    box-shadow: 0 2px 4px rgba(110,160,51,.4), 0 12px 22px rgba(135,192,64,.42) !important;
    color: #ffffff !important;
}

/* Ignore — quiet outline style, distinct from the two destructive/primary
   colored siblings. Hover slides into a slightly warmer surface to suggest
   "snooze" without committing to a colored intent. */
.cs-call-rail-ring-ignore,
.cs-call-rail-ring-ignore.btn {
    background: #ffffff !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
}
.cs-call-rail-ring-ignore i,
.cs-call-rail-ring-ignore.btn i { color: #475569 !important; }
.cs-call-rail-ring-ignore:hover,
.cs-call-rail-ring-ignore.btn:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(15,23,42,.08), 0 8px 18px rgba(15,23,42,.06) !important;
}
.cs-call-rail-ring-ignore:hover i,
.cs-call-rail-ring-ignore.btn:hover i { color: #1e293b !important; }

/* Hangup / Reject — red with the same gradient + ambient-shadow treatment
   as Answer so the two colored siblings read as a matched pair. */
.cs-call-rail-ring-hangup,
.cs-call-rail-ring-hangup.btn {
    background: linear-gradient(180deg, #f05050 0%, #d8312f 100%) !important;
    color: #ffffff !important;
    border-color: rgba(180, 40, 38, .35) !important;
    box-shadow: 0 1px 2px rgba(180,40,38,.32), 0 6px 14px rgba(220,38,38,.28) !important;
}
.cs-call-rail-ring-hangup i,
.cs-call-rail-ring-hangup.btn i { color: #ffffff !important; }
.cs-call-rail-ring-hangup:hover,
.cs-call-rail-ring-hangup.btn:hover {
    background: linear-gradient(180deg, #f25c5c 0%, #dc3735 100%) !important;
    box-shadow: 0 2px 4px rgba(180,40,38,.4), 0 12px 22px rgba(220,38,38,.36) !important;
    color: #ffffff !important;
}


/* Per-call pill (#6).
   36px round avatar w/ caller initials. The hash-of-call-UUID gradient is
   applied via doJavaScript on creation (Wt's internal style management was
   clobbering inline setAttributeValue("style",...) on some render paths).
   The solid `background` below is a fallback so the pill remains visible
   if the JS gradient hasn't applied yet — the inline JS gradient wins
   when present since it lands on the `style` attribute. Status ring-dot
   colour comes from the parent's `data-status` attribute. */
.cs-call-pill {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    transition: transform .14s ease, box-shadow .14s ease, outline-offset .14s ease;
    outline: 2px solid transparent;
    outline-offset: 0;
    background: #87c040;
}
.cs-call-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.18); }

/* Focused state — primary-green outline + soft glow. Click on any pill
   moves the focus; siblings deselect. */
.cs-call-pill.cs-pill-focused {
    outline-color: #87c040;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(135,192,64,.18);
}

/* Status ring-dot — small circle anchored bottom-right of the avatar.
   Drives off the parent's data-status attribute so updates are cheap. */
.cs-call-pill .cs-call-pill-ring {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #87c040;
    pointer-events: none;
}
.cs-call-pill[data-status="connected"] .cs-call-pill-ring { background: #87c040; }
.cs-call-pill[data-status="held"]      .cs-call-pill-ring { background: #d97706; }
.cs-call-pill[data-status="muted"]     .cs-call-pill-ring { background: #dc2626; }
.cs-call-pill[data-status="ringing"]   .cs-call-pill-ring {
    background: #3b82f6;
    animation: cs-call-pill-ring-pulse 1.1s ease-in-out infinite;
}
.cs-call-pill[data-status="queued"]    .cs-call-pill-ring {
    background: #3b82f6;
    animation: cs-call-pill-ring-pulse 1.1s ease-in-out infinite;
}

@keyframes cs-call-pill-ring-pulse {
    0%   { transform: scale(1);   box-shadow: 0 0 0 0   rgba(59,130,246,.45); }
    70%  { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(59,130,246,0);   }
    100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(59,130,246,0);   }
}

/* Dashed "+" new-call tail pill. No background, dashed border, neutral
   color. Disabled-looking until #12 wires the actual new-call flow. */
.cs-call-pill.cs-call-pill-new {
    background: transparent;
    border: 1.5px dashed #d1d5db;
    color: #9ca3af;
    cursor: default;
}
.cs-call-pill.cs-call-pill-new:hover {
    transform: none;
    box-shadow: none;
    border-color: #9ca3af;
    color: #6b7280;
}
.cs-call-pill.cs-call-pill-new i { font-size: 12px; }

/* Tab handle — visible only when the rail is hidden. Vertical CALLS label. */
.cs-call-rail-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #87c040;
    color: #ffffff !important;
    padding: 14px 10px;
    border-radius: 10px 0 0 10px;
    box-shadow: -3px 6px 18px rgba(0,0,0,.22);
    cursor: pointer;
    z-index: 49;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    user-select: none;
    transition: background .14s ease, padding-right .14s ease;
}
.cs-call-rail-tab:hover {
    background: #6ea033;
    padding-right: 14px;
}

/* Force white on the tab icon — FA glyphs sometimes inherit unexpectedly
   when nested inside other styled containers, leaving the glyph invisible
   on the green background. */
.cs-call-rail-tab .cs-call-rail-tab-icon,
.cs-call-rail-tab i.cs-call-rail-tab-icon {
    font-size: 16px !important;
    line-height: 1;
    color: #ffffff !important;
}

.cs-call-rail-tab-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
}

/* Conference modal (#2) — full lifecycle.
   Workflow hint banner explaining the "place call first then join here" flow.
   Visible in both pre-conference and in-conference states. */
.cs-modal-shell.cs-conference-modal .conf-workflow-hint {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    background: rgba(59,130,246,.06);
    border-bottom: 1px solid rgba(59,130,246,.18);
    color: #1f2937;
    font-size: 12px;
    line-height: 1.5;
}

.cs-modal-shell.cs-conference-modal .conf-workflow-hint i {
    color: #3b82f6;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Empty state — shown when t_loadAddable finds no candidates. */
.cs-modal-shell.cs-conference-modal .conf-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 24px;
    text-align: center;
    color: #6b7280;
}

.cs-modal-shell.cs-conference-modal .conf-empty-state > i {
    font-size: 28px;
    color: #9ca3af;
    opacity: .6;
    margin-bottom: 4px;
}

.cs-modal-shell.cs-conference-modal .conf-empty-state .title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.cs-modal-shell.cs-conference-modal .conf-empty-state .hint {
    font-size: 12px;
    max-width: 340px;
    line-height: 1.5;
}

/* Count badge next to GenericSelectorHeader title — matches prototype's
   `<span class="count">5</span>` pill on .modal-group-head. inline-flex +
   align-items center keeps it vertically aligned with the title text
   regardless of line-height differences. */
.cs-generic-selector-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 18px;
    line-height: 1;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0 8px;
    color: #6b7280;
    font-size: 10px;
    font-weight: 500;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Buttons get a min-width so labels of different lengths (Blind/Call/VM,
   Transfer, Park, Send) line up cleanly across rows in the same section. */
.cs-modal-shell .row-act {
    min-width: 56px;
    text-align: center;
}

/* ---------------------------------------------------------------------------- */
/* Keypad slide-out tray (#9)                                                   */
/*                                                                              */
/* A per-call DTMF tray that slides in from the right of the rail when the     */
/* Keypad button is clicked. Hosts the existing CSDialPad widget plus a       */
/* read-only digit log; click-outside / Esc / focus-change close it.          */
/* ---------------------------------------------------------------------------- */
.cs-keypad-tray {
    position: fixed;
    top: 96px;
    right: 80px;
    width: 248px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 6px 12px rgba(0,0,0,.06);
    z-index: 48; /* below the rail (z=50) so it appears to slide out from under it */
    /* Off-screen by default; transform + opacity transition for the slide-in. */
    transform: translateX(calc(100% + 60px));
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
}
.cs-keypad-tray.cs-keypad-tray-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
/* Pinned rail is 88px wide and flush right — push the tray further from the
   right edge so it clears the rail. */
.cs-call-rail.cs-call-rail-pinned ~ * .cs-keypad-tray,
body:has(.cs-call-rail.cs-call-rail-pinned) .cs-keypad-tray {
    right: 100px;
}

/* Read-only digit log above the keypad. Renders the digits the user sent
   this session; capped at 24 chars on the JS side. */
.cs-keypad-tray-log {
    display: block;
    min-height: 28px;
    padding: 6px 10px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    color: #1f2937;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    word-break: break-all;
    line-height: 1.2;
}

/* CSDialPad — neutralize the legacy bg-secondary / rounded look. Round 60px
   keys with letter hints (CSDialPad already renders the letters as part of
   the digit's textContainer). */
.cs-keypad-tray .cs-keypad-tray-pad {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* In the dock the keypad card body is dock-width (~850px), so the 3-col
   `repeat(3, 1fr)` keyrows spread the digits clear across it. Constrain the
   pad + the digit log to a compact, centered column (matches the legacy
   floating tray's width) so the keys cluster instead of stretching
   (request 2026-06-10). Scoped to the dock card body so the legacy fixed
   tray — already 248px wide — is untouched. */
.cs-call-sidebar-card-body.cs-keypad-tray .cs-keypad-tray-pad,
.cs-call-sidebar-card-body.cs-keypad-tray .cs-keypad-tray-log {
    width: 100%;
    max-width: 248px;
    margin-left: auto;
    margin-right: auto;
}
/* Hide the bundled WLineEdit input — it's a hidden focus target for keyboard
   input (CSDialPad's keyDownAllowed path), not user-visible. !important
   needed to beat Bootstrap's `.w-100` / `.form-control` rules CSDialPad
   adds to the input. */
.cs-keypad-tray .cs-keypad-tray-pad .form-control {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.cs-keypad-tray .dialpad-keyrow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
}
.cs-keypad-tray .dialpad-digit,
.cs-keypad-tray .dialpad-digit.bg-secondary,
.cs-keypad-tray .dialpad-digit.rounded {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 50% !important;
    color: #1f2937 !important;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, transform .08s ease, border-color .12s ease;
    user-select: none;
}
.cs-keypad-tray .dialpad-digit:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}
/* Press feedback — quick scale-down + stronger surface for tactile feel.
   :active fires during mouse-down; `.selected` is the Wt-side "last digit
   pressed" indicator that lingers between clicks. */
.cs-keypad-tray .dialpad-digit:active,
.cs-keypad-tray .dialpad-digit.selected {
    background: #e5e7eb !important;
    transform: scale(.94);
}

/* Keyboard press flash — mirrors the mouse :active feel for keyboard input.
   Driven by a JS keydown listener that adds `cs-keypad-press-flash` for
   ~180ms on the matching button. Uses transform + filter (not background)
   because the static `background: #ffffff !important;` above would block
   any keyframe background changes (CSS animations can't beat !important). */
.cs-keypad-tray .dialpad-digit.cs-keypad-press-flash {
    animation: cs-keypad-press-flash 180ms ease-out;
}
@keyframes cs-keypad-press-flash {
    0%   { transform: scale(1);   filter: none; }
    45%  { transform: scale(.92); filter: brightness(.86); }
    100% { transform: scale(1);   filter: none; }
}

/* ---- Global keyboard DTMF (2026-06-12) ----
   Toggle row at the top of the keypad card; the subtle 'armed' cue on the
   dock keypad button; and the transient on-dock feedback when a digit is
   sent with the keypad closed. */
.cs-call-sidebar-card-body.cs-keypad-tray .cs-keypad-globaldtmf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 248px;
    margin: 0 auto 10px;
    padding: 8px 10px;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    background: #f9fafb;
}
.cs-keypad-globaldtmf-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.cs-keypad-globaldtmf-label {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}
.cs-keypad-globaldtmf-hint {
    font-size: 10px;
    color: #6b7280;
    line-height: 1.25;
}
.cs-keypad-globaldtmf-switch {
    flex: 0 0 auto;
}

/* Subtle 'armed' cue — a small STATIC teal status dot on the focused call's
   keypad circle whenever the pref is ON and a connected call is focused. No
   pulse / glow (motion read as distracting, 2026-06-12) — just a quiet dot
   with a thin white ring so it reads on the white button. The
   .cs-dock-dtmf-armed class is toggled on the dock by refreshGlobalDtmfArmed. */
.cs-call-dock.cs-dock-dtmf-armed .items-container > .selector-item.cs-focused-item .cs-rail-keypad-btn .selector-item-option-button .btn {
    position: relative;
}
.cs-call-dock.cs-dock-dtmf-armed .items-container > .selector-item.cs-focused-item .cs-rail-keypad-btn .selector-item-option-button .btn::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2dd4bf;
    box-shadow: 0 0 0 1.5px #ffffff;
    pointer-events: none;
}

/* Transient digit confirmation popped just above the focused call pill when
   a global-DTMF digit is sent (keypad closed). Element created + removed in
   JS (window._csDtmfFlash); positioned fixed to the pill's rect. */
.cs-dtmf-digit-pop {
    position: fixed;
    transform: translate(-50%, -100%);
    z-index: 2000;
    pointer-events: none;
    min-width: 22px;
    padding: 5px 9px;
    border-radius: 9px;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .28);
    animation: cs-dtmf-pop 0.9s cubic-bezier(.2, .8, .25, 1) forwards;
}
@keyframes cs-dtmf-pop {
    0%   { opacity: 0; transform: translate(-50%, -70%)  scale(0.8); }
    18%  { opacity: 1; transform: translate(-50%, -120%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -175%) scale(1); }
}
/* Gentle teal flash ring on the focused pill as the digit pops. */
.cs-dtmf-pill-flash {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .55) !important;
    transition: box-shadow .12s ease;
}

/* ---------------------------------------------------------------------------- */
/* CRM slide-out tray (#10a — scaffolding + Open Externally)                    */
/*                                                                              */
/* Wider than the keypad tray (CRM has more content). Same slide-from-the-     */
/* right animation; scrollable body for multiple sections (10b–e fill the     */
/* others in). Hidden scrollbar matches the rail aesthetic.                    */
/* ---------------------------------------------------------------------------- */
.cs-crm-tray {
    position: fixed;
    top: 96px;
    right: 80px;
    width: 360px;
    max-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 6px 12px rgba(0,0,0,.06);
    z-index: 48;
    transform: translateX(calc(100% + 60px));
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
    overflow: hidden;
}
.cs-crm-tray.cs-crm-tray-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
body:has(.cs-call-rail.cs-call-rail-pinned) .cs-crm-tray {
    right: 100px;
}

/* Header bar — title + X close. */
.cs-crm-tray-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}
.cs-crm-tray-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.cs-crm-tray-close,
.cs-crm-tray-close.btn {
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer;
    box-shadow: none !important;
}
.cs-crm-tray-close:hover,
.cs-crm-tray-close.btn:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}
.cs-crm-tray-close i { font-size: 14px; }

/* Scrollable body — hidden scrollbar for the rail aesthetic. */
.cs-crm-tray-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 12px;
    scrollbar-width: none;
}
.cs-crm-tray-body::-webkit-scrollbar { display: none; }

/* Same overflow escape as the Notes tray: when a SelectorField dropdown
   is open inside the CRM tray (e.g. Lead Status), drop overflow clipping
   so the popup menu can render past the tray edges. */
.cs-crm-tray:has(.dropdown-menu.show),
.cs-crm-tray:has(.dropdown-menu.show) .cs-crm-tray-body {
    overflow: visible !important;
}
.cs-crm-tray .dropdown-menu {
    z-index: 10050 !important;
}

/* Section wrapper — small label + body. */
.cs-crm-section {
    padding: 12px 16px 4px;
    border-bottom: 1px solid #f3f4f6;
}
.cs-crm-section:last-child { border-bottom: none; }
.cs-crm-section-head {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
    margin-bottom: 8px;
}
.cs-crm-section-empty {
    display: block;
    padding: 8px 0;
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}

/* Open Externally row — brand-colored icon + label stack + arrow. */
.cs-crm-ext-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background .14s ease;
}
.cs-crm-ext-row-clickable { cursor: pointer; }
.cs-crm-ext-row-clickable:hover { background: #f9fafb; }
.cs-crm-ext-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #ffffff;
    flex-shrink: 0;
    overflow: hidden;
}
.cs-crm-ext-icon i { font-size: 15px; color: #ffffff; }
/* CSDBIntegration's icon is a URL — render as an image, sized to fit the
   32px chip. object-fit:contain keeps the brand mark proportional. */
.cs-crm-ext-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.cs-crm-ext-labels {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cs-crm-ext-name {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.3;
}
/* Name row: the name plus a small kind chip (Contact / Company) so a contact
   and its company stay distinguishable when both match the caller's number. */
.cs-crm-ext-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    min-width: 0;
}
.cs-crm-ext-kind {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.4;
}
.cs-crm-ext-kind i { font-size: 9px; }
.cs-crm-ext-kind-contact { background: rgba(105, 147, 255, .16); color: #3b6fe0; }
.cs-crm-ext-kind-company { background: rgba(47, 133, 90, .14); color: #2f855a; }
.cs-crm-ext-kind-ticket { background: rgba(217, 119, 6, .14); color: #b45309; }
.cs-crm-ext-sub {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Small "Open in {brand}" hint at the bottom of the labels stack so the user
   knows which CRM the click will take them to. */
.cs-crm-ext-hint {
    font-size: 10px;
    color: #9ca3af;
    line-height: 1.3;
    margin-top: 2px;
    font-weight: 500;
}
/* Third-line detail (line3 from the integration data — e.g. "Notes / Tasks").
   Slightly dimmer than the standard sub-line. */
.cs-crm-ext-line3 {
    color: #9ca3af;
}
.cs-crm-ext-arrow {
    font-size: 11px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* Per-record container (Company / Contact section). No gray frame —
   the embedded CRMDataWidget's own .card provides the white surface and
   border; this just stacks the card + sub-label + action bar with a
   margin between records. */
.cs-crm-record-row {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 12px 0;
}
.cs-crm-record-row:last-child { margin-bottom: 0; }
.cs-crm-record-row:last-child { margin-bottom: 0; }
.cs-crm-record-sub {
    display: block;
    font-size: 10px;
    color: #9ca3af;
    margin-top: 6px;
    font-style: italic;
}
.cs-crm-record-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 8px;
}
.cs-crm-record-actions .btn,
.cs-crm-record-actions .btn-sm {
    padding: 3px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}

/* Section header with right-aligned mini-button (Tasks "+ Add task"). */
.cs-crm-section-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cs-crm-section-head-text {
    /* same look as standalone section-head WText */
    flex: 1;
}
.cs-crm-mini-btn,
.cs-crm-mini-btn.btn {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}
.cs-crm-mini-btn:hover,
.cs-crm-mini-btn.btn:hover {
    background: #87c040 !important;
    color: #ffffff !important;
    border-color: #87c040 !important;
}

/* Task row — checkbox icon + name + due date. */
.cs-crm-tasks-list {
    display: flex;
    flex-direction: column;
}
.cs-crm-task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.cs-crm-task:last-child { border-bottom: none; }
.cs-crm-task-check {
    color: #9ca3af;
    font-size: 13px;
    flex-shrink: 0;
}
.cs-crm-task-done .cs-crm-task-check { color: #87c040; }
.cs-crm-task-name {
    flex: 1;
    color: #1f2937;
    line-height: 1.3;
}
.cs-crm-task-done .cs-crm-task-name {
    text-decoration: line-through;
    color: #9ca3af;
}
.cs-crm-task-due {
    font-size: 10px;
    color: #9ca3af;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Inline add-task host — slides open below the task list when "+ Add task"
   is clicked. Hidden by default via inline style:none from the C++ side. */
.cs-crm-tasks-add-host {
    margin-top: 8px;
}
.cs-crm-task-add-slot {
    margin-bottom: 8px;
}
.cs-crm-task-add-slot:last-child { margin-bottom: 0; }

/* "Log call details" dashed entry button (#10d) — VIEW state of the Call
   details section. Click expands the inline edit host below. Mirrors the
   prototype's `.crm-log-btn`. */
.cs-crm-log-btn,
.cs-crm-log-btn.btn {
    width: 100% !important;
    padding: 10px !important;
    border: 1px dashed #d1d5db !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    box-shadow: none !important;
    margin: 0 !important;
}
.cs-crm-log-btn:hover,
.cs-crm-log-btn.btn:hover {
    border-color: #87c040 !important;
    color: #87c040 !important;
    background: rgba(135,192,64,.05) !important;
}
.cs-crm-log-btn i { font-size: 12px; margin-right: 4px; }

/* Call edit host — hidden by default, revealed when "Log call details" is
   clicked. One CRMCallDetailsDataWidget per writable+call-supporting
   integration with Save/Cancel underneath. */
.cs-crm-call-edit-host {
    margin-top: 4px;
}
.cs-crm-call-edit-slot {
    margin-bottom: 8px;
}
.cs-crm-call-edit-slot:last-child { margin-bottom: 0; }

/* Recent history rows (#10e) — read-only chronological list of interactions.
   Card-style row with a colored left-border accent + colored icon chip
   keyed off the activity type (call / email / meeting / note / activity).
   Title is line-clamped to 3 lines; full text available on hover tooltip. */
.cs-crm-hist {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    /* Right padding only reserves room for the chevron when the row is
       actually clippable (`.cs-crm-hist-clipped` toggled by JS measure). */
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #d1d5db; /* type-coded below */
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
    transition: background .14s ease, box-shadow .14s ease, border-color .14s ease;
    cursor: default;
}
.cs-crm-hist.cs-crm-hist-clipped {
    padding-right: 22px;
    cursor: pointer;
}
.cs-crm-hist:last-of-type { margin-bottom: 0; }
.cs-crm-hist.cs-crm-hist-clipped:hover {
    background: #f9fafb;
    box-shadow: 0 2px 4px rgba(15,23,42,.06);
}
/* Chevron affordance — only rendered when the row is actually clipped
   (note text overflows the 3-line clamp). The chevron is suppressed for
   short rows so a single-line note doesn't look falsely "expandable". */
.cs-crm-hist.cs-crm-hist-clipped::after {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    font-size: 9px;
    color: #9ca3af;
    position: absolute;
    top: 12px;
    right: 10px;
    transition: transform .18s ease;
    pointer-events: none;
}
.cs-crm-hist.cs-crm-hist-clipped.cs-crm-hist-expanded::after {
    transform: rotate(-180deg);
}

/* Icon chip — square-rounded so it doesn't look like an avatar. */
.cs-crm-hist-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280;
    display: grid;
    place-items: center;
    font-size: 13px;
    flex-shrink: 0;
}
.cs-crm-hist-icon i { color: inherit; line-height: 1; }

/* Info column — top meta line + title. */
.cs-crm-hist-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-crm-hist-meta-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    line-height: 1.3;
}
.cs-crm-hist-type {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.4;
}
.cs-crm-hist-dot {
    color: #d1d5db;
    font-weight: 700;
}
.cs-crm-hist-ts,
.cs-crm-hist-source {
    color: #6b7280;
    font-size: 10px;
    font-weight: 500;
}
.cs-crm-hist-source {
    color: #9ca3af;
    font-style: italic;
}
.cs-crm-hist-name {
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.4;
    /* Clamp to 3 lines by default — full text revealed when the row gets
       `.cs-crm-hist-expanded`. The row's tooltip carries the full text as
       a fallback for non-click discovery. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    transition: -webkit-line-clamp .18s ease;
}
.cs-crm-hist-expanded .cs-crm-hist-name {
    -webkit-line-clamp: unset;
    display: block; /* drop -webkit-box so the clamp has no effect at all */
    overflow: visible;
    white-space: pre-wrap; /* preserve line breaks in multi-paragraph CRM notes */
}

/* Type-coded accents — left border + icon chip color.
   Call → blue, Email + Note → green, Meeting → purple, Activity → gray. */
.cs-crm-hist-call {
    border-left-color: #3b82f6;
}
.cs-crm-hist-call .cs-crm-hist-icon {
    background: rgba(59,130,246,.14);
    color: #2563eb;
}
.cs-crm-hist-call .cs-crm-hist-type {
    background: rgba(59,130,246,.14);
    color: #2563eb;
}

.cs-crm-hist-email,
.cs-crm-hist-note {
    border-left-color: #87c040;
}
.cs-crm-hist-email .cs-crm-hist-icon,
.cs-crm-hist-note  .cs-crm-hist-icon {
    background: rgba(135,192,64,.14);
    color: #4f8b1d;
}
.cs-crm-hist-email .cs-crm-hist-type,
.cs-crm-hist-note  .cs-crm-hist-type {
    background: rgba(135,192,64,.14);
    color: #4f8b1d;
}

.cs-crm-hist-meeting {
    border-left-color: #8b5cf6;
}
.cs-crm-hist-meeting .cs-crm-hist-icon {
    background: rgba(139,92,246,.14);
    color: #7c3aed;
}
.cs-crm-hist-meeting .cs-crm-hist-type {
    background: rgba(139,92,246,.14);
    color: #7c3aed;
}

.cs-crm-hist-activity {
    border-left-color: #6b7280;
}
.cs-crm-hist-activity .cs-crm-hist-icon {
    background: rgba(107,114,128,.14);
    color: #4b5563;
}
.cs-crm-hist-activity .cs-crm-hist-type {
    background: rgba(107,114,128,.14);
    color: #4b5563;
}

/* ---------------------------------------------------------------------------- */
/* Quick-Call-Transfer slide-out tray. Replaces the legacy inline render below   */
/* the action column when the user's `Show Quick Call Transfer` preference is    */
/* enabled — the tray auto-opens once on call render so the user lands on the    */
/* transfer surface immediately. Same slide-from-right pattern + dimensions as   */
/* the Notes tray for visual consistency.                                        */
/* ---------------------------------------------------------------------------- */
.cs-qt-tray {
    position: fixed;
    top: 96px;
    right: 80px;
    width: 340px;
    max-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 6px 12px rgba(0,0,0,.06);
    z-index: 48;
    transform: translateX(calc(100% + 60px));
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
    overflow: hidden;
}
.cs-qt-tray.cs-qt-tray-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
body:has(.cs-call-rail.cs-call-rail-pinned) .cs-qt-tray {
    right: 100px;
}
.cs-qt-tray-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}
.cs-qt-tray-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.cs-qt-tray-close,
.cs-qt-tray-close.btn {
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer;
    box-shadow: none !important;
}
.cs-qt-tray-close:hover,
.cs-qt-tray-close.btn:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}
.cs-qt-tray-close i { font-size: 14px; }
.cs-qt-tray-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
    scrollbar-width: none;
}
.cs-qt-tray-body::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------- */
/* Call Info slide-out tray. Generic per-call info surface — caller ID + CRM    */
/* "Open externally" rows + previous notes + Add-Notes affordance. Opened by    */
/* clicking the active caller display; auto-opens once per call on arrival if   */
/* the call has CRM data or saved notes. Reuses the Notes / CRM tray dimensions */
/* + shell styling. */
/* ---------------------------------------------------------------------------- */
.cs-callinfo-tray {
    position: fixed;
    top: 96px;
    right: 80px;
    width: 340px;
    max-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 6px 12px rgba(0,0,0,.06);
    z-index: 48;
    transform: translateX(calc(100% + 60px));
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
    overflow: hidden;
}
.cs-callinfo-tray.cs-callinfo-tray-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
body:has(.cs-call-rail.cs-call-rail-pinned) .cs-callinfo-tray {
    right: 100px;
}
.cs-callinfo-tray-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}
.cs-callinfo-tray-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.cs-callinfo-tray-close,
.cs-callinfo-tray-close.btn {
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer;
    box-shadow: none !important;
}
.cs-callinfo-tray-close:hover,
.cs-callinfo-tray-close.btn:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}
.cs-callinfo-tray-close i { font-size: 14px; }
.cs-callinfo-tray-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
    scrollbar-width: none;
}
.cs-callinfo-tray-body::-webkit-scrollbar { display: none; }

/* Caller ID section — name + phone number stack. */
.cs-callinfo-id-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 2px;
}
.cs-callinfo-id-name {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    word-break: break-word;
}
.cs-callinfo-id-number {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
    letter-spacing: .2px;
}
.cs-callinfo-id-notes {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
    font-style: italic;
    word-break: break-word;
}

/* Add-Notes section — button + collapsible draft host (textarea + Save). */
.cs-callinfo-sec-addnote {
    border-bottom: none;
}
.cs-callinfo-add-btn,
.cs-callinfo-add-btn.btn {
    width: 100%;
    background: #ffffff !important;
    border: 1px dashed #cbd5e1 !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.cs-callinfo-add-btn:hover,
.cs-callinfo-add-btn.btn:hover {
    border-color: #87c040 !important;
    background: rgba(135,192,64,.06) !important;
    color: #4f8b1d !important;
}
.cs-callinfo-add-btn i {
    margin-right: 6px;
    color: inherit;
}
.cs-callinfo-add-btn.cs-callinfo-add-btn-open {
    display: none;
}
/* The draft host is hidden by default; .cs-callinfo-draft-open reveals
   the textarea + Save row when the user clicks Add Notes. */
.cs-callinfo-draft-host {
    display: none;
    margin-top: 6px;
}
.cs-callinfo-draft-host.cs-callinfo-draft-open {
    display: block;
}
.cs-callinfo-newnote-textarea {
    width: 100%;
    font-size: 13px !important;
    padding: 9px 11px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    resize: vertical;
    min-height: 64px;
}
.cs-callinfo-newnote-textarea:focus {
    outline: none !important;
    border-color: #87c040 !important;
    box-shadow: 0 0 0 2px rgba(135,192,64,.15) !important;
}
.cs-callinfo-save-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.cs-callinfo-save-btn,
.cs-callinfo-save-btn.btn {
    background: #87c040 !important;
    border: 1px solid #87c040 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.cs-callinfo-save-btn:hover,
.cs-callinfo-save-btn.btn:hover {
    background: #4f8b1d !important;
    border-color: #4f8b1d !important;
}

/* ---------------------------------------------------------------------------- */
/* Call Notes slide-out tray (#11) — same slide-from-right pattern as the CRM   */
/* and keypad trays, scoped under .cs-notes-tray so it doesn't collide.         */
/* Opens via the Notes button OR a click on the focused caller-inline display. */
/* ---------------------------------------------------------------------------- */
.cs-notes-tray {
    position: fixed;
    top: 96px;
    right: 80px;
    width: 340px;
    max-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 6px 12px rgba(0,0,0,.06);
    z-index: 48;
    transform: translateX(calc(100% + 60px));
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
    overflow: hidden;
}
.cs-notes-tray.cs-notes-tray-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
body:has(.cs-call-rail.cs-call-rail-pinned) .cs-notes-tray {
    right: 100px;
}
.cs-notes-tray-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}
.cs-notes-tray-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.cs-notes-tray-close,
.cs-notes-tray-close.btn {
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer;
    box-shadow: none !important;
}
.cs-notes-tray-close:hover,
.cs-notes-tray-close.btn:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}
.cs-notes-tray-close i { font-size: 14px; }

/* Head-actions row: refresh + close buttons sit at the right edge of the
   tray header. Refresh shares the close button's neutral look. */
.cs-notes-tray-head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cs-notes-tray-refresh,
.cs-notes-tray-refresh.btn {
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer;
    box-shadow: none !important;
}
.cs-notes-tray-refresh:hover,
.cs-notes-tray-refresh.btn:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}
.cs-notes-tray-refresh i { font-size: 13px; }
/* Subtle spin on click as a "refreshing" affordance — purely visual,
   not gated on a real loading state. */
.cs-notes-tray-refresh:active i {
    animation: cs-notes-refresh-spin .5s ease;
}
@keyframes cs-notes-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.cs-notes-tray-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
    scrollbar-width: none;
}
.cs-notes-tray-body::-webkit-scrollbar { display: none; }

/* Wt SelectorField in DROPDOWN mode renders its popup as a `.dropdown-menu`
   child of the field, positioned absolutely by Bootstrap+Popper. The tray's
   overflow:hidden (corner clipping) and body's overflow-y:auto clip that
   popup. When a dropdown is open we drop overflow constraints so the menu
   can render past the tray edges. */
.cs-notes-tray:has(.dropdown-menu.show),
.cs-notes-tray:has(.dropdown-menu.show) .cs-notes-tray-body {
    overflow: visible !important;
}
.cs-notes-tray .dropdown-menu {
    z-index: 10050 !important;
}
/* In the DOCK the open dropdown is also clipped by the card's corner-clip
   (.cs-call-sidebar-card overflow:hidden) and the panel's scroll
   (.cs-call-sidebar overflow-y:auto) — the body-only rule above isn't enough
   there (2026-06-12). Drop overflow on the whole card-body → card → panel
   chain whenever any sidebar card has an open dropdown (covers Notes
   disposition + CRM + any future tray dropdown). The dock root is already
   overflow:visible. */
.cs-call-dock .cs-call-sidebar-card-body:has(.dropdown-menu.show),
.cs-call-dock .cs-call-sidebar-card:has(.dropdown-menu.show),
.cs-call-rail.cs-call-dock .cs-call-sidebar:has(.dropdown-menu.show) {
    overflow: visible !important;
}
.cs-call-dock .cs-call-sidebar .dropdown-menu {
    z-index: 10050 !important;
}

/* The caller-inline display (when pinned) is now clickable — second entry
   point to the Notes tray. Pointer cursor signals affordance. */
.cs-call-rail.cs-call-rail-pinned .cs-call-rail-inline {
    cursor: pointer;
}

/* Disposition + new-note widget hosts inside the Notes tray (#11b / #11d).
   Same flattening treatment as the CRM tray's record cards — strip the
   embedded DataWidget's Card chrome, hide its built-in footer/toolbar,
   stack labels above inputs so the dropdown / textarea span full width. */
.cs-notes-tray .cs-notes-tags-host,
.cs-notes-tray .cs-notes-note-host {
    margin-top: 4px;
}
.cs-notes-tray .card,
.cs-notes-tray .card-custom {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.cs-notes-tray .gutter-b { margin-bottom: 0 !important; }
.cs-notes-tray .card-header {
    display: none !important;
}
.cs-notes-tray .card-body {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cs-notes-tray .card-footer,
.cs-notes-tray .card-toolbar {
    display: none !important;
}
.cs-notes-tray .form-group {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}
.cs-notes-tray .row {
    display: block !important;
    margin: 0 !important;
}
.cs-notes-tray [class^="col-"],
.cs-notes-tray [class*=" col-"] {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    display: block !important;
}
.cs-notes-tray label,
.cs-notes-tray .col-form-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 0 !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
}
.cs-notes-tray .form-control,
.cs-notes-tray select,
.cs-notes-tray textarea {
    font-size: 12px !important;
    padding: 6px 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    width: 100% !important;
}
.cs-notes-tray .form-control:focus,
.cs-notes-tray select:focus,
.cs-notes-tray textarea:focus {
    outline: none !important;
    border-color: #87c040 !important;
    box-shadow: 0 0 0 2px rgba(135,192,64,.15) !important;
}

/* The Selector renders a `.mobile-label` (dark navy bar with the field's
   label "TAGS") that becomes visible whenever the dropdown is `.show` —
   it duplicates our section heading and looks broken in this context.
   Suppress it inside our trays. */
.cs-notes-tray .avidbit-selector .mobile-label,
.cs-notes-tray .avidbit-selector.show .mobile-label,
.cs-crm-tray .avidbit-selector .mobile-label,
.cs-crm-tray .avidbit-selector.show .mobile-label {
    display: none !important;
}

/* Hide the redundant DataField `<label>` (e.g. "Tags:") since each
   tray section already has its own heading via `.cs-crm-section-head`. */
.cs-notes-tray .cs-notes-tags-host > .kt-form label,
.cs-notes-tray .cs-notes-tags-host > .kt-form > .form-group > label,
.cs-notes-tray .cs-notes-note-host > .kt-form label {
    display: none !important;
}

/* Previous-notes list (#11c) — sits below the disposition section. The
   rows themselves reuse `.cs-crm-hist.cs-crm-hist-note` styling for
   parity with the CRM recent-history list; the wrapper just provides
   a tighter top margin so the section heading hugs the first row. */
.cs-notes-tray .cs-notes-history-list {
    margin-top: 4px;
}

/* New-note section (#11d) — textarea + attribution row + footer Save.
   The section lives outside the refreshable host so a rabbit / refresh
   / auto-on-open re-render doesn't wipe the user's in-progress typing. */
.cs-notes-tray .cs-notes-newnote-textarea {
    width: 100%;
    font-size: 13px !important;
    padding: 9px 11px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    resize: vertical;
    min-height: 64px;
}
.cs-notes-tray .cs-notes-newnote-textarea:focus {
    outline: none !important;
    border-color: #87c040 !important;
    box-shadow: 0 0 0 2px rgba(135,192,64,.15) !important;
}

/* "Adding as <User>" attribution: small initials avatar + label. */
.cs-notes-tray .cs-notes-newnote-attribution {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.cs-notes-tray .cs-notes-newnote-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #87c040, #4f8b1d);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cs-notes-tray .cs-notes-newnote-attribution-text {
    font-size: 11px;
    color: #6b7280;
}
.cs-notes-tray .cs-notes-newnote-attribution-text strong {
    color: #1f2937;
    font-weight: 600;
}

/* Tray footer with the unified Save button. Stays pinned to the bottom
   of the tray (the body's `flex: 1; overflow-y: auto` pushes it down). */
.cs-notes-tray-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}
.cs-notes-tray-save,
.cs-notes-tray-save.btn {
    background: #87c040 !important;
    border: 1px solid #87c040 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.cs-notes-tray-save:hover,
.cs-notes-tray-save.btn:hover {
    background: #4f8b1d !important;
    border-color: #4f8b1d !important;
}

/* "✓ Saved to CRM" save-confirmation flash (#10e). Injected as a sibling
   of the Save button by Wt.avidbit.crmSavedFlash and auto-removed after
   ~1.7s. Fades out in the last 600ms. */
.cs-crm-saved-flash {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(135,192,64,.15);
    color: #4f8b1d;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    opacity: 1;
    transition: opacity .55s ease;
    pointer-events: none;
}
.cs-crm-saved-flash i {
    font-size: 10px;
    color: inherit;
}
.cs-crm-saved-flash.cs-crm-saved-flash-fade {
    opacity: 0;
}

/* "✓ Saved" save-confirmation flash (#11e). Injected as a sibling of the
   Notes-tray Save button by Wt.avidbit.notesSavedFlash and auto-removed
   after ~1.7s. Same visual treatment as the CRM tray flash. */
.cs-notes-saved-flash {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(135,192,64,.15);
    color: #4f8b1d;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    opacity: 1;
    transition: opacity .55s ease;
    pointer-events: none;
}
.cs-notes-saved-flash i
{
    font-size: 10px;
    color: inherit;
}
.cs-notes-saved-flash.cs-notes-saved-flash-fade {
    opacity: 0;
}

/* ---------------------------------------------------------------------------- */
/* CRMAdd*DataWidget restyle — only inside the call rail's CRM tray (#10).      */
/*                                                                              */
/* The data widgets ship with their own Bootstrap / KeenAdmin chrome which is   */
/* heavy for the narrow CRM tray context. These overrides flatten the           */
/* widget's outer card (the rail's own .cs-crm-record-row provides it),        */
/* shrink the auto-generated `<h3>` section header into a section label, and  */
/* tighten the form-group / form-control rows so the result reads like the    */
/* prototype's .crm-info-card aesthetic.                                       */
/*                                                                              */
/* Scoped to `.cs-crm-tray .cs-crm-record-row` so the legacy floating sidebar  */
/* path (and every other DataWidget consumer in the app) is untouched.         */
/* ---------------------------------------------------------------------------- */

/* The widget's own .card is now THE visible card for the record — full-
   row width, subtle border + soft shadow, neutralized KeenAdmin chrome. */
.cs-crm-tray .cs-crm-record-row .card,
.cs-crm-tray .cs-crm-record-row .card-custom {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    margin: 0 !important;
    width: 100%;
}
.cs-crm-tray .cs-crm-record-row .gutter-b {
    margin-bottom: 0 !important;
}
.cs-crm-tray .cs-crm-record-row .card-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 8px 12px !important;
    min-height: 0 !important;
    margin: 0 !important;
}
.cs-crm-tray .cs-crm-record-row .card-body {
    background: transparent !important;
    border: none !important;
    padding: 10px 12px !important;
    margin: 0 !important;
}
/* Hide the widget's own built-in footer (Save / Cancel duplicates of the
   external Edit / Save / Cancel chrome the rail provides). */
.cs-crm-tray .cs-crm-record-row .card-footer {
    display: none !important;
}
/* Hide the card's toolbar in the header — that's where the "View Company" /
   "View Contact" mini-button lives. The rail's Edit button handles mode
   toggling externally. */
.cs-crm-tray .cs-crm-record-row .card-toolbar {
    display: none !important;
}
.cs-crm-tray .cs-crm-record-row .card-title {
    margin: 0 !important;
    padding: 0 !important;
}

/* Auto-generated `<h3>` section header — shrink into a section sublabel.
   `font-size-lg text-dark font-weight-bold mb-6` from DataWidget::createSectionHeader. */
.cs-crm-tray .cs-crm-record-row h3,
.cs-crm-tray .cs-crm-record-row .font-size-lg {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
}

/* Built-in separator between header and body — replace heavy separator with
   a thin divider that matches the prototype's quiet card aesthetic. */
.cs-crm-tray .cs-crm-record-row .separator,
.cs-crm-tray .cs-crm-record-row .separator-dashed,
.cs-crm-tray .cs-crm-record-row .separator-solid {
    border-top: 1px solid #e5e7eb !important;
    border-bottom: none !important;
    background: transparent !important;
    margin: 4px 0 8px !important;
    height: 0 !important;
}

/* Form rows — tight vertical rhythm, stack label above input so inputs span
   the full row width (the default Bootstrap col-md-N split shrinks inputs
   to a narrow column). */
.cs-crm-tray .cs-crm-record-row .form-group {
    margin-bottom: 8px !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
}
.cs-crm-tray .cs-crm-record-row .form-group:last-child { margin-bottom: 0 !important; }
.cs-crm-tray .cs-crm-record-row .row {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.cs-crm-tray .cs-crm-record-row [class^="col-"],
.cs-crm-tray .cs-crm-record-row [class*=" col-"] {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
}

/* Labels — small, muted, uppercase. */
.cs-crm-tray .cs-crm-record-row label,
.cs-crm-tray .cs-crm-record-row .col-form-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 0 !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
}

/* Inputs — minimal borders, small text. */
.cs-crm-tray .cs-crm-record-row .form-control,
.cs-crm-tray .cs-crm-record-row input[type="text"],
.cs-crm-tray .cs-crm-record-row input[type="tel"],
.cs-crm-tray .cs-crm-record-row input[type="email"],
.cs-crm-tray .cs-crm-record-row select,
.cs-crm-tray .cs-crm-record-row textarea {
    font-size: 12px !important;
    padding: 6px 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
}
.cs-crm-tray .cs-crm-record-row .form-control:focus,
.cs-crm-tray .cs-crm-record-row input:focus,
.cs-crm-tray .cs-crm-record-row select:focus,
.cs-crm-tray .cs-crm-record-row textarea:focus {
    outline: none !important;
    border-color: #87c040 !important;
    box-shadow: 0 0 0 2px rgba(135,192,64,.15) !important;
}

/* VIEW mode — values render as plain text spans. Strip the input-look so
   the card reads like the prototype's static meta lines. */
.cs-crm-tray .cs-crm-record-row .form-control-plaintext,
.cs-crm-tray .cs-crm-record-row .form-control[readonly] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #1f2937 !important;
    min-height: 0 !important;
}

/* The DataWidget marks itself with `.edit` when in EDIT mode. Hide any
   built-in save/cancel footer the widget renders — our .cs-crm-record-actions
   bar drives Save/Cancel via setWidgetMode + saveActualDataWidget. */
.cs-crm-tray .cs-crm-record-row .kt-portlet__foot {
    display: none !important;
}

/* The widget's own "View Company" / "View Contact" mini-button (rendered in
   its header) is redundant with our Edit / Save / Cancel chrome — hide it. */
.cs-crm-tray .cs-crm-record-row .kt-portlet__head-toolbar,
.cs-crm-tray .cs-crm-record-row .data-widget-toolbar {
    display: none !important;
}

/* Hide the widget's own internal "Create Company" / "Add New Contact"
   first-row affordance — `<div class="d-flex flex-direction-row text-primary">`.
   The section header now carries an external "+ Add Company" / "+ Add Contact"
   mini-button that drives this; the widget's inline version would duplicate it. */
.cs-crm-tray .cs-crm-record-row .d-flex.flex-direction-row.text-primary {
    display: none !important;
}

/* Empty (add-new) records — the widget hides every field row by default
   when there's no CRMID (it normally waits for a click on the internal
   "Create Company" affordance to reveal them). Our header "+ Add Company"
   / "+ Add Contact" button already gated the reveal at the host level, so
   the form fields should be visible the moment the host expands. Force
   them visible regardless of the widget's `_hideEverything` flag. */
.cs-crm-tray .cs-crm-record-empty .card-body > .row,
.cs-crm-tray .cs-crm-record-empty .card-body .row {
    display: flex !important;
}
/* Also hide the widget's "Create Company" / "Add New Contact" row entirely
   — its `.row` parent isn't covered by the `.text-primary` selector above
   (only the inner container is), so the empty .row would still take space. */
.cs-crm-tray .cs-crm-record-empty .card-body > .row:first-child {
    display: none !important;
}
/* The digit's inner text container is a flex column; ensure letter hints
   (the "ABC" etc. CSDialPadButton renders) sit visibly under the number. */
.cs-keypad-tray .dialpad-digit > div {
    line-height: 1.05;
}
.cs-keypad-tray .dialpad-digit > div > * + * {
    font-size: 9px;
    color: #9ca3af;
    font-weight: 600;
    letter-spacing: 1px;
}

/* ---------------------------------------------------------------------------- */
/* Per-call action column (#8a)                                                 */
/*                                                                              */
/* The Selector framework adds each VoIPActiveCallFloatingSelectorItem inside   */
/* the active-calls header's .items-container. In rail mode we only want the    */
/* focused call's action column visible — the pill column above identifies     */
/* which call is which, so showing every item's full action surface at once    */
/* would be redundant and overflow the narrow rail.                            */
/*                                                                              */
/* `.cs-focused-item` is toggled by setFocusedCall in rail mode. Non-focused   */
/* items render in the DOM (so their per-call rabbit subscriptions + timers    */
/* keep ticking) but are hidden visually.                                       */
/* ---------------------------------------------------------------------------- */
.cs-call-rail .items-container > .selector-item {
    display: none;
}
.cs-call-rail .items-container > .selector-item.cs-focused-item {
    display: block;
}

/* ---------------------------------------------------------------------------- */
/* Dropdown popup descendant escape hatch                                       */
/*                                                                              */
/* The rail-mode rules above (and the ones below that follow the same selector */
/* pattern) hide / flatten `.cs-call-rail .items-container > .selector-item`.  */
/* But `.items-container` is also the class the Selector framework puts on    */
/* EVERY SelectorHeader's sub-item container — including the disposition      */
/* selector dropdown popup, the CRM Lead-Status dropdown, etc. Those popups   */
/* render inside per-call trays which are inside `.cs-call-rail`, so the      */
/* selectors above match them too and they end up invisible.                  */
/*                                                                              */
/* Restore default rendering for any `.selector-item` that's actually inside  */
/* a dropdown menu. Use `revert` (not `initial`) so each property falls back   */
/* to the cascade — i.e. whatever `avidbit_portal.css` `.selector-item`       */
/* defaults are — not to the CSS spec defaults.                                */
/* ---------------------------------------------------------------------------- */
.cs-call-rail .dropdown-menu .items-container > .selector-item {
    display: block !important;
}
/* QT / Transfer tray rows: display restore WITHOUT !important (bug fix
   2026-06-10). Selector search filters rows via item->hide() = an INLINE
   display:none, which loses to any !important class rule — with the
   !important here the search box "never filtered". This selector's
   specificity (0,4,0) still beats the rail's hide rule above (0,3,0,
   non-important), so rows stay visible at rest. The rule went live for
   in-dock cards when variant C moved the sidebar inside .cs-call-rail. */
.cs-call-rail .cs-qt-tray .items-container > .selector-item {
    display: block;
}
.cs-call-rail .dropdown-menu .items-container > .selector-item,
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container,
.cs-call-rail .cs-qt-tray .items-container > .selector-item,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container {
    background: revert !important;
    border: revert !important;
    box-shadow: revert !important;
    padding: revert !important;
    margin: revert !important;
    gap: revert !important;
}
/* `.icon-title-container` is a Bootstrap `.d-flex` container (icon + title
   side by side). `revert` would only step back to the user-agent default
   (`block` for `<div>`), not to the `.d-flex` rule from the same author
   origin — so the title would stack under the icon. Restore flex explicitly. */
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container,
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .icon-title-container,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .icon-title-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .info-container,
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .title-container,
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .selector-item-title,
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .selector-item-subtitle,
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .selector-item-subtitle-2,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .info-container,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .title-container,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .selector-item-title,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .selector-item-subtitle,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .selector-item-subtitle-2 {
    display: revert !important;
}

/* `.info-container` is the framework's right-of-title slot — the Quick-
   Call-Transfer pill (`<tag class="tagify__tag …">`) lives in here. The
   rail's `display: revert` would leave it as a block, which inside the
   parent's flex-row works in theory but renders unpredictably under the
   Tagify library's own flex rules. Pin it to `flex; align-items: center;
   margin-left: auto; flex-shrink: 0` so the pill always sits aligned at
   the right edge of the row, regardless of how wide the title block is. */
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .info-container {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    gap: 4px;
}
/* Make sure the pill itself is rendered inline-flex inside its container,
   not a stacked block. The `<tag>` element has no native default so
   browsers fall back to `inline` — but if a parent declares `flex` the
   <tag> becomes a flex item which would consume its parent's width. */
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .info-container > tag,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .info-container .tagify__tag {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* `.title-container` holds the framework's title + subtitle <span>s. By
   default inline spans flow side-by-side. Force the container to a flex
   column and the children to block-level so name / phone / role stack
   one under another inside the QT tray (matches the inline render's
   original layout and the dropdown popup pattern). */
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .title-container,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .title-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0;
    flex: 1 1 auto;
}
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .title-container > .selector-item-title,
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .title-container > .selector-item-subtitle,
.cs-call-rail .dropdown-menu .items-container > .selector-item > .avidbit-selector-item-container .title-container > .selector-item-subtitle-2,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .title-container > .selector-item-title,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .title-container > .selector-item-subtitle,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .avidbit-selector-item-container .title-container > .selector-item-subtitle-2 {
    display: block !important;
}
.cs-call-rail .dropdown-menu .items-container > .selector-item .f_right_selector_item,
.cs-call-rail .dropdown-menu .items-container > .selector-item .f_selector_item_options_button,
.cs-call-rail .cs-qt-tray .items-container > .selector-item .f_right_selector_item,
.cs-call-rail .cs-qt-tray .items-container > .selector-item .f_selector_item_options_button {
    display: revert !important;
}
.cs-call-rail .dropdown-menu .items-container > .selector-item > .options,
.cs-call-rail .dropdown-menu .items-container > .selector-item .options-container,
.cs-call-rail .dropdown-menu .items-container > .selector-item .options-container-header,
.cs-call-rail .cs-qt-tray .items-container > .selector-item > .options,
.cs-call-rail .cs-qt-tray .items-container > .selector-item .options-container,
.cs-call-rail .cs-qt-tray .items-container > .selector-item .options-container-header {
    display: revert !important;
    flex-direction: revert !important;
    gap: revert !important;
    padding: revert !important;
    margin: revert !important;
    background: revert !important;
    align-items: revert !important;
}
/* The selector-item-header (i.e. group title like "Users") is itself a
   .selector-item subclass in the Selector framework. Without this guard
   it also gets the rail's "hide non-focused" treatment and the section
   headers disappear, leaving the QT tray apparently empty even though
   the data loaded. */
.cs-call-rail .cs-qt-tray .selector-item-header,
.cs-call-rail .cs-qt-tray .selector-item-header > .avidbit-selector-item-container,
.cs-call-rail .cs-qt-tray .selector-item-header .items-container,
.cs-call-rail .cs-qt-tray .selector-item-header .options,
.cs-call-rail .cs-qt-tray .selector-item-header .options-container,
.cs-call-rail .cs-qt-tray .selector-item-header .options-container-header {
    background: revert !important;
    border: revert !important;
    box-shadow: revert !important;
    padding: revert !important;
    margin: revert !important;
    gap: revert !important;
    flex-direction: revert !important;
    align-items: revert !important;
}
/* display split out of the group above (search bug fix 2026-06-10):
   the header ROOT must NOT carry display !important — SelectorHeader
   search hides empty sections via this->hide() (inline display:none),
   and !important here kept "no match" section titles visible. The
   CHILD chrome keeps !important (it fights the rail's
   `.avidbit-selector-item-container { display:none !important }`). */
.cs-call-rail .cs-qt-tray .selector-item-header {
    display: revert;
}
.cs-call-rail .cs-qt-tray .selector-item-header > .avidbit-selector-item-container,
.cs-call-rail .cs-qt-tray .selector-item-header .items-container,
.cs-call-rail .cs-qt-tray .selector-item-header .options,
.cs-call-rail .cs-qt-tray .selector-item-header .options-container,
.cs-call-rail .cs-qt-tray .selector-item-header .options-container-header {
    display: revert !important;
}

/* Multi-select checkbox swap on hover. The Selector framework binds a
   jQuery hover handler that hides `.symbol-container` and shows
   `.selection-checkbox` — but in our embedded context the inline
   `width: 0px; display: none` set when the label was created can win
   over the JS's `.show()`, leaving the user with a missing checkbox.
   Force the icon→checkbox swap via pure CSS so it works regardless of
   the JS state. Once the framework's selection JS runs, it manipulates
   inline styles directly to hide all icons / show all checkboxes for
   the "actively selecting" state — that path is unaffected. */
.cs-call-rail .dropdown-menu .items-container > .selector-item:hover .symbol-container {
    display: none !important;
}
.cs-call-rail .dropdown-menu .items-container > .selector-item:hover .selection-checkbox {
    display: flex !important;
    width: 40px !important;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------------------- */
/* Legacy buttons hidden in rail mode (#8b)                                     */
/*                                                                              */
/* The buttons stay constructed in VoIPActiveCallFloatingSelectorItem so the    */
/* legacy floating-sidebar path (kUseNewCallRail=false) keeps working — they    */
/* just don't render visually inside the rail. Suppressed buttons:              */
/*   - Park, Send-to-VM     → consolidated into the Transfer modal              */
/*   - Speaker / audioResume → deferred pending default-speaker-device infra    */
/*   - Listen / Whisper / Barge → supervisor actions, belong on a separate     */
/*                                supervisor surface (apply to OTHER people's  */
/*                                calls, not the user's own).                  */
/*   - Answer / Reject / Silence (legacy early-call buttons) → the per-call    */
/*                                ringing-action block (#7) renders these.     */
/* ---------------------------------------------------------------------------- */
.cs-call-rail .cs-rail-suppressed {
    display: none !important;
}

/* ---------------------------------------------------------------------------- */
/* Action column restyle (#8c)                                                  */
/*                                                                              */
/* Inside the rail, the focused per-call item renders its action surface as a  */
/* vertical column. The original SelectorItem chrome (avatar, title, subtitle, */
/* etc.) is largely hidden — the pill column above + caller-inline display    */
/* already identify the call, so we collapse the item to just its action      */
/* buttons.                                                                    */
/* ---------------------------------------------------------------------------- */

/* Outer item: drop default selector-item card chrome inside the rail. */
.cs-call-rail .items-container > .selector-item.cs-focused-item {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Hide framework-rendered identity chrome — pill column + caller-inline already
   show this. Keep the options menu container (it hosts the buttons + section
   headers). */
.cs-call-rail .items-container > .selector-item > .avidbit-selector-item-container .icon-title-container,
.cs-call-rail .items-container > .selector-item > .avidbit-selector-item-container .info-container,
.cs-call-rail .items-container > .selector-item > .avidbit-selector-item-container .selector-item-title,
.cs-call-rail .items-container > .selector-item > .avidbit-selector-item-container .selector-item-subtitle,
.cs-call-rail .items-container > .selector-item > .avidbit-selector-item-container .selector-item-subtitle-2 {
    display: none;
}

/* The avidbit-selector-item-container hosts the framework's icon +
   title row. In rail mode the caller-inline display (pinned) and the
   pill column (always) already identify the call, so this row is dead
   weight — hide it entirely. Sibling .options divs hold the action
   buttons and remain visible. */
.cs-call-rail .items-container > .selector-item > .avidbit-selector-item-container {
    display: none !important;
}

/* Hide the 3-dot options menu icon (`f_right_selector_item` is its outer
   container, `f_selector_item_options_button` the icon). Rail mode renders
   all quick actions as inline buttons inside the section column, so the
   menu serves no purpose. */
.cs-call-rail .items-container > .selector-item .f_right_selector_item,
.cs-call-rail .items-container > .selector-item .f_selector_item_options_button {
    display: none !important;
}

/* SelectorItem's sub-options container (`.options`) hosts the action headers.
   Reflow to a vertical flex column inside the rail's narrow width. */
.cs-call-rail .items-container > .selector-item > .options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
}

/* SelectorItemOptionHeader's title row (`.options-container-header`) is empty
   in our use — hidden via setHeaderVisibility(false) on the active-calls
   header in the item code path. Stays hidden here as a safety net. */
.cs-call-rail .items-container > .selector-item .options-container-header {
    display: none;
}

/* The flex row of buttons + section headers (`.options-container`). Switch
   to vertical column layout — flexbox `order:` values on the section-class
   children put each section in the right visual position. */
.cs-call-rail .items-container > .selector-item .options-container {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    padding: 0;
    margin: 0;
    background: transparent;
}

/* ---------------------------------------------------------------------------- */
/* Section headers (#8c)                                                        */
/*                                                                              */
/* Each section header is a flex row: small icon + uppercase label + chevron.  */
/* Click toggles `.cs-rail-collapsed-{section}` on the parent SelectorItem,    */
/* which hides matching `.cs-rail-sec-{section}` buttons via CSS sibling rules.*/
/* The header itself stays visible (so the user can re-expand).                 */
/* ---------------------------------------------------------------------------- */
/* Compact pill-shaped section header — icon + chevron in the narrow floating
   rail, icon + label + chevron when pinned. Matches the prototype's
   `.v-c-rail .group-head` (44×28 light-gray pill, brand-green-tint hover). */
.cs-rail-section-head {
    width: 44px;
    height: 28px;
    margin: 6px auto 2px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 8px;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
    user-select: none;
    align-self: center;
}
.cs-rail-section-head:hover {
    background: rgba(135,192,64,.14);
    color: #1f2937;
}
.cs-rail-section-head-icon {
    font-size: 11px;
    color: inherit;
    line-height: 1;
    flex-shrink: 0;
}
.cs-rail-section-head-label {
    line-height: 1;
    /* Floating rail (56px wide) doesn't have room for the label — pill stays
       icon + chevron only. Pinned rail (88px) is wide enough. */
    display: none;
}
.cs-call-rail.cs-call-rail-pinned .cs-rail-section-head {
    width: auto;
    min-width: 64px;
    padding: 0 8px;
}
.cs-call-rail.cs-call-rail-pinned .cs-rail-section-head-label {
    display: inline;
}
.cs-rail-section-head-chev {
    font-size: 8px;
    color: inherit;
    opacity: .65;
    transition: transform .18s ease;
    line-height: 1;
}
.cs-rail-section-head.cs-rail-section-collapsed .cs-rail-section-head-chev {
    transform: rotate(-90deg);
}

/* Flex order — interleave headers + their buttons in the right sequence.
   Inside .selector-item-option-header > optionContainer, all items are flex
   siblings with order:0 by default. Assigning order values groups them
   visually without relying on DOM insertion order. */
.cs-call-rail .cs-rail-secthead-control { order: 10; }
.cs-call-rail .cs-rail-sec-control      { order: 11; }
.cs-call-rail .cs-rail-secthead-routing { order: 20; }
.cs-call-rail .cs-rail-sec-routing      { order: 21; }
.cs-call-rail .cs-rail-secthead-record  { order: 30; }
.cs-call-rail .cs-rail-sec-record       { order: 31; }
/* Hangup pinned at the bottom — order 99 puts it after every other section
   regardless of collapse state. No section header above it. */
.cs-call-rail .cs-rail-end-call          { order: 99; }

/* Collapse — hide each section's buttons when the parent item carries the
   matching collapsed-{section} class. The standalone Hangup button is never
   collapsible per spec — left out intentionally. */
.cs-call-rail .selector-item.cs-rail-collapsed-control .cs-rail-sec-control,
.cs-call-rail .selector-item.cs-rail-collapsed-routing .cs-rail-sec-routing,
.cs-call-rail .selector-item.cs-rail-collapsed-record  .cs-rail-sec-record {
    display: none;
}

/* ---------------------------------------------------------------------------- */
/* Individual action button restyle (#8c)                                       */
/*                                                                              */
/* Compact icon-only buttons sized for the narrow rail. Tooltip carries the    */
/* label; the icon itself does the visual work. Hover lifts slightly with a   */
/* subtle shadow.                                                              */
/* ---------------------------------------------------------------------------- */
.cs-call-rail .items-container .selector-item-option-button {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    padding: 0;
    align-self: center;
}
/* Borderless ghost buttons matching the prototype. Bootstrap's btn-* color
   variants set their own colors with their own specificity, so we list them
   explicitly to win. The button itself stays transparent + minimal-chrome;
   colored intents come from state classes (.cs-rail-end-call for hangup,
   future mute-active / hold-active palettes in #8d). */
.cs-call-rail .items-container .selector-item-option-button .btn,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-danger,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-warning,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-dark,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-success,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-secondary {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    padding: 0 !important;
    border-radius: 10px !important;
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.cs-call-rail .items-container .selector-item-option-button .btn:hover,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-danger:hover,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-warning:hover,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-dark:hover,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-success:hover,
.cs-call-rail .items-container .selector-item-option-button .btn.btn-secondary:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    box-shadow: none !important;
}
/* Neutralize the SelectorItemOptionButton's icon-inner styling — the `<i>`
   carries `.symbol-label.pl-1.bg-white-o-30` from KeenAdmin/Metronic, and
   the wrapper `.symbol-35` enforces a 35×35 box. Wipe all three so the FA
   glyph inherits our color cleanly and centers in the 44×44 button. */
.cs-call-rail .items-container .selector-item-option-button .btn .symbol,
.cs-call-rail .items-container .selector-item-option-button .btn .symbol-35,
.cs-call-rail .items-container .selector-item-option-button .btn .symbol-label {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.cs-call-rail .items-container .selector-item-option-button .btn i {
    font-size: 17px;
    line-height: 1;
    color: inherit !important;
    background: transparent !important;
}
.cs-call-rail .items-container .selector-item-option-button .btn i::before {
    color: inherit;
}

/* ---------------------------------------------------------------------------- */
/* State palettes (#8d) — mute-active / hold-active                            */
/*                                                                              */
/* Mute uses the existing `.avidbit_muted_call` class that the JS muteCall      */
/* function toggles on the mute button when WebRTC sender-track audio is        */
/* disabled. So this CSS picks up BOTH user-clicked mutes and auto-mutes        */
/* (e.g. placing a new call mutes existing ones) — same DOM signal drives the  */
/* visual.                                                                      */
/*                                                                              */
/* Hold uses `.cs-hold-active`, added to the hold button by the per-item code  */
/* when `getCallHoldStartTime()` becomes non-null.                              */
/* ---------------------------------------------------------------------------- */

/* Mute — light-red palette when WebRTC audio is muted. */
.cs-call-rail .items-container .avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn,
.cs-call-rail .items-container .avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn.btn-danger,
.cs-call-rail .items-container .avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn.btn-dark {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}
.cs-call-rail .items-container .avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn i {
    color: #dc2626 !important;
}
.cs-call-rail .items-container .avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn:hover {
    background: #fecaca !important;
    color: #b91c1c !important;
}
.cs-call-rail .items-container .avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn:hover i {
    color: #b91c1c !important;
}

/* Hold — light-yellow palette when the call is on hold. */
.cs-call-rail .items-container .cs-hold-active .selector-item-option-button .btn,
.cs-call-rail .items-container .cs-hold-active .selector-item-option-button .btn.btn-warning,
.cs-call-rail .items-container .cs-hold-active .selector-item-option-button .btn.btn-dark {
    background: #fef3c7 !important;
    color: #d97706 !important;
}
.cs-call-rail .items-container .cs-hold-active .selector-item-option-button .btn i {
    color: #d97706 !important;
}
.cs-call-rail .items-container .cs-hold-active .selector-item-option-button .btn:hover {
    background: #fde68a !important;
    color: #b45309 !important;
}
.cs-call-rail .items-container .cs-hold-active .selector-item-option-button .btn:hover i {
    color: #b45309 !important;
}

/* Hangup — standalone always-visible action. Bright danger-red fill, white
   phone-slash icon, slight pop via box-shadow so it's unmistakable at a
   glance. Margin separates it visually from the action sections above. */
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button {
    margin-top: 8px;
}
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn,
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn.btn-danger,
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn.btn-dark,
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn.btn-warning,
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn.btn-secondary {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    box-shadow: 0 2px 6px rgba(239,68,68,.35) !important;
    font-size: 16px !important;
}
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn:hover,
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn.btn-danger:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(220,38,38,.5) !important;
}
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn i,
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn i.symbol-label,
.cs-call-rail .items-container .cs-rail-end-call .selector-item-option-button .btn .symbol-label {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ---------------------------------------------------------------------------- */
/* Resting-state palettes for action buttons that should stand out from the      */
/* neutral rail chrome. Active-state palettes (above) override these with more   */
/* intense backgrounds when the call is muted / on hold / recording.             */
/* ---------------------------------------------------------------------------- */

/* Mute (idle) — neutral rail chrome (background stays transparent from
   the base rule). Icon stays red-tinted so the affordance reads. The
   active .avidbit_muted_call rule above flips the whole button red. */
.cs-call-rail .items-container .avidbit_mute_call:not(.avidbit_muted_call) .selector-item-option-button .btn i {
    color: #dc2626 !important;
}

/* Hold (idle) — neutral chrome with amber-tinted icon. Active state
   (.cs-hold-active) above flips the whole button amber.                          */
.cs-call-rail .items-container .selector-item-option-button:not(.cs-hold-active) .btn.btn-warning i {
    color: #d97706 !important;
}

/* Record / Pause-Recording — single button, four states. data-status is on
   the OUTER wrapper (same element as .cs-rail-record-btn); inner .btn
   inherits the visual via the descendant selector.

   - idle             : neutral chrome, red outline-circle icon. Click starts.
   - recording        : solid red bg + white filled-circle icon. Click pauses
                        (only when user has mask permission).
   - recording-locked : red bg with pulse. No-op click (no mask permission).
   - paused           : amber bg + white outline-circle icon. Click resumes. */

/* Idle — neutral chrome (background transparent from the base rule). Just
   tint the icon red so the button's purpose reads at a glance. */
.cs-call-rail .items-container .cs-rail-record-btn[data-status="idle"] .selector-item-option-button .btn i {
    color: #dc2626 !important;
}

/* Recording — solid red bg, white filled-circle icon. */
.cs-call-rail .items-container .cs-rail-record-btn[data-status="recording"] .selector-item-option-button .btn,
.cs-call-rail .items-container .cs-rail-record-btn[data-status="recording"] .selector-item-option-button .btn.btn-secondary {
    background: #dc2626 !important;
    color: #ffffff !important;
}
.cs-call-rail .items-container .cs-rail-record-btn[data-status="recording"] .selector-item-option-button .btn i {
    color: #ffffff !important;
}
.cs-call-rail .items-container .cs-rail-record-btn[data-status="recording"] .selector-item-option-button .btn:hover {
    background: #b91c1c !important;
}

/* Paused — same amber chrome as Recording-with-perm but flipped to a play
   icon so the next-click action ("resume") reads correctly. */
.cs-call-rail .items-container .cs-rail-record-btn[data-status="paused"] .selector-item-option-button .btn,
.cs-call-rail .items-container .cs-rail-record-btn[data-status="paused"] .selector-item-option-button .btn.btn-secondary {
    background: #d97706 !important;
    color: #ffffff !important;
}
.cs-call-rail .items-container .cs-rail-record-btn[data-status="paused"] .selector-item-option-button .btn i {
    color: #ffffff !important;
}
.cs-call-rail .items-container .cs-rail-record-btn[data-status="paused"] .selector-item-option-button .btn:hover {
    background: #b45309 !important;
}

/* Recording-locked — active recording but the rep can't pause. Pulsing red
   so it's clear something is happening; default cursor (no-op click). */
.cs-call-rail .items-container .cs-rail-record-btn[data-status="recording-locked"] .selector-item-option-button .btn,
.cs-call-rail .items-container .cs-rail-record-btn[data-status="recording-locked"] .selector-item-option-button .btn.btn-secondary {
    background: #dc2626 !important;
    color: #ffffff !important;
    cursor: default;
    animation: cs-rail-record-pulse 1.6s ease-in-out infinite;
}
.cs-call-rail .items-container .cs-rail-record-btn[data-status="recording-locked"] .selector-item-option-button .btn i {
    color: #ffffff !important;
}
@keyframes cs-rail-record-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
    50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* ==========================================================================
   CSCallSidebar — unified per-call sidebar that hosts floating-window cards
   (Notes / CRM / Keypad / Call Info / Quick Transfer) to the left of the
   pinned rail on desktop, or as a bottom-sheet on mobile.

   Scope of slice 1a: chrome only. No card content yet — slices 1b through
   7 hook actual content in. The container is added to the DOM by
   CSCommunicator_ActiveCalls but only becomes visible once it has at
   least one card (driven by the .cs-call-sidebar-open class which the
   widget toggles in refreshOpenState()).

   Visual reference: PROTOTYPE_floating_call_item.html (Variant C, split-
   slideout section). Keep this CSS in sync if the prototype is iterated.
   ========================================================================== */

.cs-call-sidebar {
    position: fixed;
    top: 72px;
    right: 96px;                          /* sits to the left of the 88px pinned rail */
    width: 380px;
    max-height: calc(100vh - 104px);
    background: transparent;
    z-index: 48;
    display: none;
    flex-direction: column;
    gap: 18px;
    padding: 6px 10px;                    /* inset so card shadows aren't clipped */
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: none;
    pointer-events: none;                 /* let main content receive clicks where the sidebar is empty */
    transform: translateX(calc(100% + 40px));
    opacity: 0;
    transition: transform .28s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
}
.cs-call-sidebar::-webkit-scrollbar { display: none; }

.cs-call-sidebar.cs-call-sidebar-open {
    display: flex;
    transform: translateX(0);
    opacity: 1;
}

/* === Card chrome ========================================================== */

.cs-call-sidebar-card {
    flex: 0 0 auto;
    /* Cards size to their content but cap at half the viewport height so a
       tall card (CRM rows, long notes history, etc.) can stretch without
       eating the whole screen. The card body scrolls past this cap. */
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 16px rgba(15, 23, 42, 0.08),
        0 24px 40px rgba(15, 23, 42, 0.10);
    pointer-events: auto;                 /* cards themselves are interactive */
    transition: box-shadow .2s ease, transform .2s ease;
}
.cs-call-sidebar-card:hover {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 12px 20px rgba(15, 23, 42, 0.10),
        0 32px 48px rgba(15, 23, 42, 0.12);
}

.cs-call-sidebar-card-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(to bottom, #ffffff, #f3f4f6);
    border-radius: 12px 12px 0 0;
}

.cs-call-sidebar-card-title {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-call-sidebar-card-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.cs-call-sidebar-card-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.cs-call-sidebar-card-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: none;
}
.cs-call-sidebar-card-body::-webkit-scrollbar { display: none; }

/* Brief flash on the title bar when a card is just added so the user
   sees which one appeared. Triggered via CSCallSidebarCard::flashJustAdded
   adding the .cs-call-sidebar-card-flash class for ~0.7s. */
@keyframes cs-call-sidebar-card-promote {
    0%   { background: rgba(135, 192, 64, 0.22); }
    100% { background: linear-gradient(to bottom, #ffffff, #f3f4f6); }
}
.cs-call-sidebar-card.cs-call-sidebar-card-flash .cs-call-sidebar-card-head {
    animation: cs-call-sidebar-card-promote 0.6s ease-out;
}

/* === Mobile / narrow viewport ============================================
   On narrow viewports the sidebar keeps the same slide-from-right anchor
   as desktop — it just gets narrower. The original full-bleed bottom-
   sheet pattern was sliding the sidebar BEHIND the call rail and eating
   the full viewport width. Anchoring the right edge at 96px (88px rail
   + 8px breathing room) keeps the sidebar visually clear of the rail,
   and the max-width cap stops it from getting visually overweight on
   small phones.

   Matches `(hover: none) and (pointer: coarse)` in addition to the width
   query so a phone in landscape (≈800-930px wide — over 768px, but still
   a touch device) gets the mobile sidebar layout, staying consistent with
   the pointer-gated rail-reserve rules above. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .cs-call-sidebar {
        top: 72px;
        right: 0;
        left: 0;
        bottom: auto;
        width: 100vw;
        max-width: none;
        max-height: calc(100vh - 96px);
        padding: 4px 0;
        background: transparent;
        backdrop-filter: none;
        border-top: none;
        transform: translateX(calc(100% + 40px));
    }
    .cs-call-sidebar.cs-call-sidebar-open {
        transform: translateX(0);
    }
    /* When the call rail is PINNED, the base full-width sidebar would run
       its right ~88px underneath the fixed 88px rail. Inset it so the cards
       stop to the left of the rail (+ 8px gap), mirroring the desktop
       `right: 96px` clearance. Scoped to the pinned state so the unpinned
       (floating) case keeps the full-width base rule. The (0,3,1)
       specificity beats the base `.cs-call-sidebar` (0,1,0). */
    body:has(.cs-call-rail.cs-call-rail-pinned) .cs-call-sidebar {
        right: 96px;
        width: auto;
    }
}

/* Rail-button active state — lights up primary-green while the button's
   corresponding card is open in the unified sidebar (slice 1b onwards).
   Class name kept as `ss-button-active` to match what the prototype + the
   item's t_toggleRailNotesTray apply via addStyleClass. */
.cs-call-rail .btn.ss-button-active,
.v-c-rail .btn.ss-button-active {
    background: #87c040;
    color: #ffffff;
}
.cs-call-rail .btn.ss-button-active:hover,
.v-c-rail .btn.ss-button-active:hover {
    background: #76a834;
}

/* Slice 5 — per-call sidebar state. The CSCallSidebar applies this class
   to cards that belong to a call other than the focused one. display:none
   takes the card out of layout but keeps it in the DOM so draft notes,
   scroll positions, etc. survive a focus swap and reappear when the user
   switches back to that call. */
.cs-call-sidebar-card.cs-call-sidebar-card-hidden {
    display: none !important;
}

/* Slice 6 — when the legacy tray classes (.cs-notes-tray, .cs-crm-tray,
   .cs-callinfo-tray, .cs-keypad-tray) are applied to a card body inside
   CSCallSidebar, their original position:fixed / width / transform rules
   would yank the body out of the card frame. Neutralize the positioning
   so descendant-selector styles (`.cs-notes-tray .cs-notes-tray-body { … }`
   etc.) still work but the outer chrome doesn't fight the card. */
.cs-call-sidebar-card-body.cs-notes-tray,
.cs-call-sidebar-card-body.cs-crm-tray,
.cs-call-sidebar-card-body.cs-callinfo-tray,
.cs-call-sidebar-card-body.cs-keypad-tray,
.cs-call-sidebar-card-body.cs-qt-tray {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-height: none !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: none !important;
}

.cs-call-sidebar-card.cs-qt-sidebar-card {
    max-height: min(72vh, 640px);
    background: #f8fafc;
    border-color: #dbe3ea;
}

.cs-call-sidebar-card.cs-qt-sidebar-card .cs-call-sidebar-card-head {
    background: #ffffff;
    border-bottom-color: #e2e8f0;
    padding: 11px 12px 10px 14px;
}

.cs-call-sidebar-card.cs-qt-sidebar-card .cs-call-sidebar-card-title {
    color: #0f172a;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.cs-call-sidebar-card.cs-qt-sidebar-card .cs-call-sidebar-card-close {
    border-color: #dbe3ea;
    background: #f8fafc;
}

.cs-call-sidebar-card.cs-qt-sidebar-card .cs-call-sidebar-card-close:hover {
    background: #eef2f7;
}

.cs-call-sidebar-card-body.cs-qt-tray.cs-qt-card-tray {
    /* Continuous white surface — the embedded merged widget renders flat
       rows on top, so the body must be white edge-to-edge (no grey
       gutter showing between rows). The card HEAD keeps its #f8fafc
       accent; only the body goes white. */
    background: #ffffff !important;
}

.cs-qt-context {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.cs-qt-context-kicker {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cs-qt-context-title {
    min-width: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-qt-tray .cs-qt-tray-body {
    padding: 10px;
}

.cs-qt-tray .cs-qt-scope {
    margin: 0 0 8px;
    padding: 0 2px 8px;
    border-bottom: 1px solid #e2e8f0;
}

.cs-qt-tray .cs-qt-scope-title {
    display: block;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-call-rail .cs-qt-tray .selector-item-header > .avidbit-selector-item-container,
.cs-call-sidebar-card-body.cs-qt-tray .selector-item-header > .avidbit-selector-item-container {
    min-height: 28px;
    padding: 10px 2px 5px !important;
    color: #64748b;
}

.cs-call-rail .cs-qt-tray .selector-item-header .selector-item-title,
.cs-call-sidebar-card-body.cs-qt-tray .selector-item-header .selector-item-title {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cs-call-rail .cs-qt-tray .items-container > .selector-item:not(.selector-item-header),
.cs-call-sidebar-card-body.cs-qt-tray .items-container > .selector-item:not(.selector-item-header) {
    margin: 0 0 8px !important;
}

.cs-call-rail .cs-qt-tray .items-container > .selector-item:not(.selector-item-header) > .avidbit-selector-item-container,
.cs-call-sidebar-card-body.cs-qt-tray .items-container > .selector-item:not(.selector-item-header) > .avidbit-selector-item-container {
    /* Flat selector-item look — NO per-row card border / radius / shadow.
       Each row is a plain padded white strip; the 8px row margin above
       provides the spacing without making rows look like floating cards.
       (Earlier the rows had a border-radius + box-shadow + hover shadow;
       that "card" treatment was removed — it diverged from the flat
       selector-item style used elsewhere and from the Full modal.) */
    min-height: 54px;
    padding: 9px 10px !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cs-call-rail .cs-qt-tray .selector-item-title,
.cs-call-sidebar-card-body.cs-qt-tray .selector-item-title {
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.cs-call-rail .cs-qt-tray .selector-item-subtitle,
.cs-call-rail .cs-qt-tray .selector-item-subtitle-2,
.cs-call-sidebar-card-body.cs-qt-tray .selector-item-subtitle,
.cs-call-sidebar-card-body.cs-qt-tray .selector-item-subtitle-2 {
    color: #64748b;
    font-size: 11px;
    line-height: 1.25;
}

.cs-call-rail .cs-qt-tray .info-container > tag,
.cs-call-rail .cs-qt-tray .info-container .tagify__tag,
.cs-call-sidebar-card-body.cs-qt-tray .info-container > tag,
.cs-call-sidebar-card-body.cs-qt-tray .info-container .tagify__tag {
    min-height: 30px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid rgba(15, 118, 110, 0.24) !important;
    border-radius: 7px !important;
    background: #0f766e !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.cs-call-rail .cs-qt-tray .info-container > tag.bg-dark,
.cs-call-rail .cs-qt-tray .info-container .tagify__tag.bg-dark,
.cs-call-sidebar-card-body.cs-qt-tray .info-container > tag.bg-dark,
.cs-call-sidebar-card-body.cs-qt-tray .info-container .tagify__tag.bg-dark {
    border-color: rgba(51, 65, 85, 0.28) !important;
    background: #334155 !important;
}

.cs-call-rail .cs-qt-tray .info-container .tagify__tag-text,
.cs-call-sidebar-card-body.cs-qt-tray .info-container .tagify__tag-text {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1;
}

/* Defensive overrides — guarantee the sidebar lays cards out as a stacked
   flex column with visible gap, regardless of which legacy tray classes a
   card body carries. The legacy `.cs-notes-tray` / `.cs-crm-tray` etc.
   rules have `position: fixed` and large width values that, if leaking
   through, would yank cards out of layout and stack them on top of each
   other at the original tray anchor. */
.cs-call-sidebar {
    display: flex !important;
    flex-direction: column !important;
    /* Cards always start at the top of the sidebar regardless of how
       many cards are open or how tall the sidebar is on small screens.
       Without this, vertical justification was defaulting to center in
       some viewport configurations and pushing the cards down. */
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    gap: 18px !important;
}
.cs-call-sidebar:not(.cs-call-sidebar-open) {
    display: none !important;
}
.cs-call-sidebar > .cs-call-sidebar-card {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
}

/* Force per-row action buttons visible at ALL viewport widths.
   The framework's renderMainInfoContainer() adds `d-none d-sm-flex` to
   every info-container, which hides the action-buttons column below
   the Bootstrap-sm breakpoint (576px). On phones this swallows the
   Blind / Call / VM / Transfer / Park buttons inside transfer rows and
   quick-transfer rows. Override both .info-container and .row-actions
   for the transfer + quick-transfer contexts so action buttons stay
   reachable on every device. */
.cs-modal-shell .cs-transfer-row .info-container,
.cs-modal-shell .cs-transfer-row .row-actions,
.cs-qt-tray .info-container,
.cs-qt-tray .row-actions,
.cs-qt-tray .selector-item .info-container,
.cs-qt-tray .selector-item .row-actions,
.cs-call-sidebar-card-body .cs-transfer-row .info-container,
.cs-call-sidebar-card-body .cs-transfer-row .row-actions,
.cs-call-sidebar-card-body .selector-item .info-container,
.cs-call-sidebar-card-body .selector-item .row-actions {
    display: flex !important;
}

/* === Pinned-rail content reservation =====================================
   `.cs-rail-content-reserve` (added to aApp->root() by
   CSCommunicator_ActiveCalls::setPinned, only while pinned + visible)
   carries the SINGLE 88px reserve. The Wt root is a normal-flow ancestor
   of all page content — including the PWA shell #pwa-nav-content and
   #pwa-tab-nav (verified: both are plain normal-flow descendants of the
   root, no explicit width) — so padding-right on the root shrinks every
   normal-flow descendant clear of the fixed 88px rail.

   An earlier revision ALSO put padding-right on <body> as "hardening."
   That rule was REMOVED, for two reasons:
     1. aApp->root() (.Wt-domRoot) is a normal-flow <div> child of <body>,
        so a <body> padding stacked with the root padding — reserving
        176px, twice the rail width, leaving an 88px white gap.
     2. Its stated purpose — shifting position:fixed descendants left —
        is not how the box model works. Fixed elements anchor to the
        viewport and ignore ancestor padding entirely.
   Any fixed, right-anchored chrome that must clear the rail has to be
   offset explicitly (right / width) under
   `body:has(.cs-call-rail.cs-call-rail-pinned)`. In the current PWA there
   is none — the global .title-bar is not rendered (the route calls
   hideHeader()) and the bottom tab nav is normal-flow — so no such rule
   is needed today. Add one here if fixed right-edge chrome is introduced.

   The rail's z-index is bumped above page chrome (sidebar / modal
   Bootstrap defaults at 1040+) so any incidental overlap puts the rail
   visually on top rather than behind. */
.cs-call-rail.cs-call-rail-pinned {
    z-index: 1041 !important;
}

/* === Transfer row action-buttons — mobile reinforcement ==================
   Earlier override wasn't enough; this version pairs the legacy class
   on the same element (.info-container.d-none) to bump specificity
   from 3 → 4 class points and beat any other override in the cascade.
   Also forces the row layout so the buttons CAN fit when the modal
   is narrow on phone widths (wrap row-actions to a second line rather
   than overflow-clip them). */

/* 1) Force info-container display:flex even when Bootstrap's d-none
      is active. The combined class selector wins specificity. */
.cs-modal-shell .cs-transfer-row .info-container.d-none,
.cs-modal-shell .cs-transfer-row .row-actions.d-none,
.cs-qt-tray .info-container.d-none,
.cs-qt-tray .row-actions.d-none,
.cs-qt-tray .selector-item .info-container.d-none,
.cs-qt-tray .selector-item .row-actions.d-none,
.cs-call-sidebar-card-body .info-container.d-none,
.cs-call-sidebar-card-body .row-actions.d-none {
    display: flex !important;
}

/* === Narrow-viewport transfer rows =======================================
   "Variant-C" layout: when the row is narrow there isn't room for the
   avatar + name + 3 buttons on one line, so the action buttons wrap to
   a SECOND line below the name. The avatar + name stay on line 1; the
   buttons drop to line 2, indented under the name, splitting the row
   width evenly.

   This `@media` covers ALL transfer contexts (Full modal + the embedded
   dock-card selectors — rows are inside the .cs-modal-shell either way)
   at narrow VIEWPORT widths. On a wide desktop there's room, so the
   buttons stay inline next to the name (desktop base rules — no wrap).
   The old unconditional wrap for the floating ~340px QT card is retired
   (cards are dock-width now) — see the retirement note further down. */
@media (max-width: 576px) {
    .cs-modal-shell .cs-transfer-row .avidbit-selector-item-container {
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    /* Action slot drops to its own line, full width, indented under the
       name (avatar ~36px + ~10px gap ≈ 46px). */
    .cs-modal-shell .cs-transfer-row .info-container {
        flex: 1 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
        padding-left: 46px !important;
        padding-right: 0 !important;
    }
    .cs-modal-shell .cs-transfer-row .row-actions {
        width: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    .cs-modal-shell .cs-transfer-row .row-actions > .row-act,
    .cs-modal-shell .cs-transfer-row .row-actions > button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 32px !important;
    }
    .cs-call-sidebar-card.cs-qt-sidebar-card {
        max-height: 76vh;
    }
    .cs-qt-tray .cs-qt-tray-body {
        padding: 8px;
    }
}

/* ============================================================================ */
/* Quick Transfer — embedded CSCommunicator_TransferSelector (Mode::Quick).     */
/* The merged widget is a Modal-derived WContainerWidget reparented into the    */
/* sidebar card body. Its default chrome (cs-modal-shell padding, internal      */
/* modal-body scroll, large radius) doesn't match the slim card aesthetic,     */
/* so neutralize the modal layout and let the QT card own width / padding /     */
/* scroll / radius.                                                              */
/* ============================================================================ */

/* (1) The embedded widget itself must fill the QT card body width. The base
   `.modal` class was stripped in Quick mode, but Bootstrap modal-dialog
   ancestors and inline styles can still constrain width. Force full-width
   block layout. */
.cs-qt-merged > .cs-transfer-selector-quick,
.cs-call-sidebar-card-body.cs-qt-tray .cs-transfer-selector-quick {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

/* Modal renders an inner .modal-dialog wrapper that constrains width on
   desktop (max-width: 500px). In the embed it has to be full-width too. */
.cs-transfer-selector-quick .modal-dialog,
.cs-transfer-selector-quick .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* (2) No scrollbars on the embedded modal-body — the QT card body already
   provides the single scroll region. Inner overflow:auto would create a
   second scroll axis + visible scrollbar. */
.cs-transfer-selector-quick .modal-body,
.cs-transfer-selector-quick .cs-modal-body {
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
    scrollbar-width: none !important;
}
.cs-transfer-selector-quick .modal-body::-webkit-scrollbar,
.cs-transfer-selector-quick .cs-modal-body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* (6) Search toolbar — make it visually integrated with the slim card.
   Default modal-toolbar has horizontal padding that adds another inset on
   top of the card's already-padded body. Strip the extra padding and let
   the input span the full width with a soft outline. */
.cs-transfer-selector-quick .cs-modal-toolbar {
    padding: 0 0 10px 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
}
.cs-transfer-selector-quick .cs-modal-search {
    width: 100% !important;
    margin: 0 !important;
}
.cs-transfer-selector-quick .cs-modal-search-input {
    width: 100% !important;
    height: 34px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
    padding: 4px 10px !important;
    background: #f9fafb !important;
}
.cs-transfer-selector-quick .cs-modal-search-input:focus {
    background: #ffffff !important;
    border-color: #87c040 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(135,192,64,.18) !important;
}

/* Card corners — pull the QT card body's radius in from 14px to 8px so
   the sidebar card itself feels squarer, matching the design. White
   background fill so any framework gap between section headers /
   items / scroll region paints over with the card color. */
.cs-call-sidebar-card-body.cs-qt-tray,
.cs-call-sidebar-card.cs-qt-sidebar-card,
.cs-call-sidebar-card.cs-qt-sidebar-card .cs-call-sidebar-card-body {
    border-radius: 8px !important;
    background: #ffffff !important;
}

/* === Quick Transfer rows — unconditional second-row wrap RETIRED ==========
   (2026-06-09.) An earlier block here forced the embedded selector's row
   buttons onto a full-width second line regardless of viewport, because
   the old FLOATING QT card was a fixed ~340px. Since the sidebar cards
   moved INSIDE the dock (variant C), every card is dock-width (~850px on
   desktop) and the wrap made the Blind / Call / VM buttons land on their
   own line, stretched huge. Wide cards now use the Full modal's one-line
   layout (the `.cs-modal-shell .cs-transfer-row` rules above); genuinely
   narrow viewports still wrap via the `@media (max-width: 576px)` block. */

/* ============================================================================ */
/* Transfer / Quick-Transfer — action buttons + search, styled to the prototype */
/* (PROTOTYPE_qt_mobile.html Variant-C buttons + PROTOTYPE_floating_call_item    */
/* .html modal-toolbar search). Scoped to .cs-transfer-modal so both the Full    */
/* Transfer modal and the embedded Quick Transfer card pick it up.               */
/* ============================================================================ */

/* Action buttons (Blind / Call / VM / Park / Transfer). Prototype Variant-C:
   8px radius (NOT a pill), 1px border, white surface, 12px/600 muted text;
   hover fills primary-green. vm = info-blue accent, park = amber accent. */
.cs-transfer-modal .row-actions .row-act,
.cs-transfer-modal .row-actions .row-act.Wt-btn {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.cs-transfer-modal .row-actions .row-act:hover,
.cs-transfer-modal .row-actions .row-act.Wt-btn:hover {
    background: #87c040 !important;
    border-color: #87c040 !important;
    color: #ffffff !important;
}
.cs-transfer-modal .row-actions .row-act.vm,
.cs-transfer-modal .row-actions .row-act.vm.Wt-btn {
    color: #3b82f6 !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    background: rgba(59, 130, 246, 0.06) !important;
}
.cs-transfer-modal .row-actions .row-act.vm:hover,
.cs-transfer-modal .row-actions .row-act.vm.Wt-btn:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}
.cs-transfer-modal .row-actions .row-act.park,
.cs-transfer-modal .row-actions .row-act.park.Wt-btn {
    color: #d97706 !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    background: rgba(217, 119, 6, 0.06) !important;
}
.cs-transfer-modal .row-actions .row-act.park:hover,
.cs-transfer-modal .row-actions .row-act.park.Wt-btn:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

/* Native selector search — restyled to the prototype's modal-toolbar search:
   a full-width rounded-10px box with a magnifier icon and a subtle border,
   sitting in a small padded strip above the section list. */
.cs-transfer-modal .cs-generic-selector .search-container {
    padding: 12px 14px 6px !important;
}
.cs-transfer-modal .av_containerSearch {
    display: flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.cs-transfer-modal .av_containerSearch > .d-flex {
    width: 100% !important;
    align-items: center !important;
}
.cs-transfer-modal .av_containerSearch .fa-search {
    color: #9ca3af !important;
    font-size: 12px !important;
    padding: 0 6px 0 12px !important;
}
.cs-transfer-modal .av_searchInput {
    flex: 1 1 auto !important;
    width: 100% !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13px !important;
    padding: 8px 12px 8px 4px !important;
    height: auto !important;
    box-shadow: none !important;
}
.cs-transfer-modal .av_searchInput:focus {
    outline: none !important;
    box-shadow: none !important;
}
.cs-transfer-modal .av_containerSearch:focus-within {
    border-color: #87c040 !important;
    box-shadow: 0 0 0 2px rgba(135, 192, 64, 0.15) !important;
}

/* ================================================================= *
 * Park modal — responsive "parking map" pegs (.cs-park-*).
 * Peg width / height / border-radius / font-size and the grid gap
 * are set inline from C++ (sized by each lot's stall count); the
 * rules below own colour, layout and state only.
 * ================================================================= */
.cs-park-modal .modal-dialog {
    max-width: 600px;
}
.cs-park-modal .cs-park-lots {
    padding: 16px 20px;
}

/* --- "who's being parked" banner (pinned at top of the scroll area) --- */
.cs-park-modal .cs-park-callbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}
.cs-park-modal .cs-park-callbar-av {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    background: linear-gradient(135deg, #87c040, #3b82f6);
}
.cs-park-modal .cs-park-callbar-who {
    min-width: 0;
    flex: 1;
}
.cs-park-modal .cs-park-callbar-nm {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-park-modal .cs-park-callbar-nu {
    display: block;
    font-size: 12px;
    color: #6b7280;
}
.cs-park-modal .cs-park-callbar-tag {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6ea033;
    background: #eef7e1;
    padding: 5px 10px;
    border-radius: 999px;
}
.cs-park-modal .cs-park-empty {
    display: block;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    padding: 28px 0;
}

/* --- lot section + header --- */
.cs-park-modal .cs-park-lot {
    margin-bottom: 18px;
}
.cs-park-modal .cs-park-lot:last-child {
    margin-bottom: 0;
}
.cs-park-modal .cs-park-lothead {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}
.cs-park-modal .cs-park-lot-ic {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef7e1;
    color: #6ea033;
    font-size: 15px;
}
.cs-park-modal .cs-park-lot-meta {
    min-width: 0;
}
.cs-park-modal .cs-park-lot-nm {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: #1f2937;
}
.cs-park-modal .cs-park-lot-rng {
    display: block;
    font-size: 11px;
    color: #9ca3af;
}
.cs-park-modal .cs-park-nextfree {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #87c040;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.cs-park-modal .cs-park-nextfree:hover {
    background: #6ea033;
}
.cs-park-modal .cs-park-nextfree.disabled {
    color: #9ca3af;
    background: #f1f3f6;
    cursor: default;
}

/* --- peg grid --- */
.cs-park-modal .cs-park-pegs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}
.cs-park-modal .cs-park-peg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    text-align: center;
    overflow: hidden;
}
.cs-park-modal .cs-park-peg.free {
    border-color: #cfe6a8;
    color: #6ea033;
    cursor: pointer;
}
.cs-park-modal .cs-park-peg.free:hover {
    background: #eef7e1;
    border-color: #87c040;
}
.cs-park-modal .cs-park-peg.taken {
    background: #fef3c7;
    border-color: #fcd9a0;
    color: #d97706;
    cursor: not-allowed;
}
.cs-park-modal .cs-park-peg-n {
    font-weight: 800;
    line-height: 1;
    /* font-size set inline from C++ */
}
.cs-park-modal .cs-park-peg-word {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 600;
}
.cs-park-modal .cs-park-peg-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.cs-park-modal .cs-park-peg-mini {
    font-size: 10px;
    opacity: .7;
}
.cs-park-modal .cs-park-peg-who {
    font-size: 11px;
    max-width: 92%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-park-modal .cs-park-peg-ini {
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================================ */
/* Calls-Waiting badge (queued-for-user calls)                                  */
/*                                                                              */
/* A compact badge + popover docked just left of the rail. Built as a           */
/* parentContainer sibling (like _callSidebar) so it shows even when the rail   */
/* itself is hidden — a call can be waiting while the user is on no other call. */
/* Design "C1": cluster-card rows with Pick up + Voicemail / Transfer / Dismiss.*/
/* ============================================================================ */
/* Dock slice #6 (scope change 2026-06-10: badge KEPT, relocated — not
   retired). It anchors to the dock now: bottom-right, riding ABOVE the dock's
   live height (--cs-dock-h), popover opening UPWARD; below the dock when
   top-docked. All behavior (auto-open, sound, badge-local dismiss) unchanged.
   Queued calls ALSO appear as dock selector pills — both surfaces coexist. */
.cs-waiting-badge {
    position: fixed;
    right: 14px;
    top: auto;
    bottom: calc(30px + var(--cs-dock-h, 96px));
    z-index: 60;
    display: flex;
    flex-direction: column-reverse;   /* chip at the bottom, popover above */
    align-items: flex-end;
    gap: 10px;
}
body:has(.cs-call-dock.cs-dock-top) .cs-waiting-badge {
    bottom: auto;
    top: calc(78px + var(--cs-dock-h, 96px));
    flex-direction: column;           /* popover opens downward up top */
}

/* The chip — pulsing hourglass + count + "N call(s)". Click toggles popover. */
.cs-waiting-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 8px 14px 8px 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: #1f2937;
}
.cs-waiting-chip-ic {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(59,130,246,.15);
    color: #3b82f6;
    display: grid;
    place-items: center;
    font-size: 13px;
}
.cs-waiting-chip-ic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #3b82f6;
    animation: cs-waiting-ring 1.5s ease-out infinite;
    pointer-events: none;
}
.cs-waiting-chip-count {
    position: absolute;
    top: -4px;
    left: 22px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #3b82f6;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #ffffff;
}
.cs-waiting-chip-lbl { display: flex; flex-direction: column; line-height: 1.15; }
.cs-waiting-chip-sub { font-size: 10px; color: #6b7280; font-weight: 500; }
.cs-waiting-chip-chev { color: #6b7280; font-size: 11px; }

@keyframes cs-waiting-ring {
    0%   { transform: scale(1);    opacity: .7; }
    100% { transform: scale(1.55); opacity: 0;  }
}

/* The popover — header + rows list. */
.cs-waiting-pop {
    width: 320px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    overflow: hidden;
}
.cs-waiting-pop-head {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* C1 cluster-card row — caller on top, action row beneath. */
.cs-waiting-row { padding: 12px 14px; border-bottom: 1px solid #e5e7eb; }
.cs-waiting-row:last-child { border-bottom: none; }
.cs-waiting-top { display: flex; align-items: center; gap: 11px; }
.cs-waiting-av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    background: #87c040;   /* fallback — real gradient applied inline */
}
.cs-waiting-who { flex: 1; min-width: 0; }
.cs-waiting-nm {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-waiting-meta {
    font-size: 11px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.cs-waiting-wt { font-variant-numeric: tabular-nums; color: #3b82f6; font-weight: 600; }

.cs-waiting-acts { display: flex; gap: 7px; margin-top: 10px; }
/* Wt's WPushButton emits a real <button>; reset Bootstrap chrome with
   !important so our look wins (same approach as .cs-call-rail-btn). */
.cs-waiting-go,
.cs-waiting-go.btn {
    flex: 1;
    height: 34px;
    border-radius: 9px;
    border: none !important;
    background: #87c040 !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cs-waiting-go:hover,
.cs-waiting-go.btn:hover { background: #6ea033 !important; color: #ffffff !important; }
.cs-waiting-ic,
.cs-waiting-ic.btn {
    width: 38px;
    height: 34px;
    min-width: 38px;
    border-radius: 9px;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cs-waiting-ic:hover,
.cs-waiting-ic.btn:hover { background: #f3f4f6 !important; color: #1f2937 !important; }
.cs-waiting-danger:hover,
.cs-waiting-danger.btn:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

/* ============================================================================ */
/* Queued call shown in the rail                                                */
/*                                                                              */
/* A waiting call also appears as a rail pill. When focused, its normal action  */
/* column is suppressed and a dedicated 4-option block (Pick up / Voicemail /   */
/* Transfer / Dismiss) shows instead — the same options as the badge.           */
/* ============================================================================ */

/* Suppress the focused queued item's body — the per-call block provides the
   actions, and the pill + caller-inline cover identity. The item stays in the
   DOM (display:none, like non-focused items) so its rabbit subs / timers tick.
   More specific than the `.cs-focused-item { display:block }` rule above. */
.cs-call-rail .items-container > .selector-item.cs-focused-item.cs-rail-queued-item {
    display: none;
}

/* Queued action block — reuses .cs-call-rail-ringing-actions layout + the
   60x60 .cs-call-rail-ring-btn footprint; only the colors differ per action. */
.cs-rail-queued-pickup,
.cs-rail-queued-pickup.btn {
    background: #87c040 !important;
    color: #ffffff !important;
}
.cs-rail-queued-pickup i,
.cs-rail-queued-pickup span { color: #ffffff !important; }
.cs-rail-queued-pickup:hover,
.cs-rail-queued-pickup.btn:hover { background: #6ea033 !important; }

.cs-rail-queued-vm,
.cs-rail-queued-vm.btn,
.cs-rail-queued-xfer,
.cs-rail-queued-xfer.btn {
    background: #eef2f6 !important;
    color: #475569 !important;
}
.cs-rail-queued-vm i,
.cs-rail-queued-xfer i { color: #475569 !important; }
.cs-rail-queued-vm:hover,
.cs-rail-queued-vm.btn:hover,
.cs-rail-queued-xfer:hover,
.cs-rail-queued-xfer.btn:hover { background: #e2e8f0 !important; }

.cs-rail-queued-dismiss,
.cs-rail-queued-dismiss.btn {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}
.cs-rail-queued-dismiss i { color: #dc2626 !important; }
.cs-rail-queued-dismiss:hover,
.cs-rail-queued-dismiss.btn:hover { background: #fecaca !important; }

/* ============================================================================ */
/* BOTTOM DOCK (slice #1)                                                       */
/*                                                                              */
/* `.cs-call-dock` layers the bottom-center dock layout over the rail CSS      */
/* (which stays applied via `.cs-call-rail` until slice #9 deletes the dead    */
/* parts). Design source: docs/prototypes/call-rail/                           */
/* PROTOTYPE_bottom_action_bar.html + _NOTES.md.                                */
/*                                                                              */
/* Box anatomy (DOM order inside the dock):                                    */
/*   .cs-call-rail-pills        interim multi-call selector (replaced in #3)   */
/*   .cs-call-rail-inline       identity row: avatar · big name · muted number */
/*                              · timer · status pill                           */
/*   .items-container           focused item → horizontal circle controls       */
/*   .cs-call-rail-ringing-actions  per-call ringing block (redesigned in #5)  */
/* ============================================================================ */

/* ---- container: bottom-center floating box ---- */
.cs-call-rail.cs-call-dock {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    top: auto;
    bottom: 18px;
    width: min(880px, calc(100vw - 24px));
    max-height: none;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px;
    overflow: visible;
    /* Same rung as .cs-call-rail-pinned (1041): above the .header (1035) and
       its dropdowns — the notifications panel was burying the hang-up circle
       when top-docked — and above offcanvas (1037) / modal backdrop (1040).
       Real modals (1050+) still paint over the dock. Both elements are
       position:fixed, so scrolling can never separate them; stacking must. */
    z-index: 1041;
    transition: none;
}

/* WIDE (≥920px viewport): ONE row — identity left (reserved 300px+, grows),
   controls right. The flex-wrap lets full-width children (pills, ringing
   block) take their own rows. */
@media (min-width: 920px) {
    .cs-call-rail.cs-call-dock {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 14px;
    }
    .cs-call-dock .cs-call-rail-inline {
        flex: 1 1 300px;
        min-width: 300px;
    }
    .cs-call-dock .items-container {
        flex: 0 0 auto;
        margin-left: auto;
    }
}
/* CONSTRAINED (<920px): stacked — identity row, hairline, controls row. */
@media (max-width: 919.98px) {
    .cs-call-rail.cs-call-dock {
        width: min(560px, calc(100vw - 16px));
    }
    .cs-call-dock .items-container {
        border-top: 1px solid #f3f4f6;
        padding-top: 8px;
    }
}

/* ---- identity row (caller-inline repurposed) ---- */
/* Flat children laid out on a 2-row grid: avatar spans both rows; big name on
   top; muted number · timer · status pill on the second line. Overrides the
   rail's pinned-only display gate. */
.cs-call-dock .cs-call-rail-inline,
.cs-call-rail.cs-call-dock .cs-call-rail-inline {
    display: grid !important;
    grid-template-columns: auto auto auto auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 9px;
    row-gap: 1px;
    align-items: center;
    justify-items: start;
    padding: 0;
    margin: 0;
    border-bottom: none;
    cursor: pointer;
    text-align: left;
}
.cs-call-dock .cs-call-rail-inline:hover { background: transparent; }
.cs-call-dock .cs-call-rail-inline-av {
    grid-row: 1 / 3;
    grid-column: 1;
    width: 44px;
    height: 44px;
}
.cs-call-dock .cs-call-rail-inline-name {
    grid-row: 1;
    grid-column: 2 / 5;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    max-width: none;
    text-align: left;
}
.cs-call-dock .cs-call-rail-inline-number {
    grid-row: 2;
    grid-column: 2;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.2;
}
.cs-call-dock .cs-call-rail-inline-timer {
    grid-row: 2;
    grid-column: 3;
    font-size: 12px;
}
.cs-call-dock .cs-call-rail-inline-status {
    grid-row: 2;
    grid-column: 4;
}

/* ---- selector pills row (slice #3) ---- */
/* One pill per call across the top of the box; ONLY rendered with 2+ calls
   (syncPills toggles .cs-dock-pills-multi). The focused pill is highlighted
   green; clicking a pill retargets identity row + controls + trays. */
.cs-call-dock .cs-call-rail-pills {
    display: none;
    width: 100%;
    order: -1;
    padding: 0 0 8px;
    border-bottom: 1px dashed #e5e7eb;
}
.cs-call-dock .cs-call-rail-pills.cs-dock-pills-multi {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
}
/* The dashed "+" tail pill has no role in the dock. */
.cs-call-dock .cs-call-pill-new { display: none !important; }

/* Pill anatomy — overrides the rail's circular avatar-pill look.
   The rail-era rule (~line 1554) carries !important on display:grid,
   border-radius:50% and place-items, so display / radius / outline here
   need their own !important or the pill children stack VERTICALLY in a
   single grid column (very tall oval pills — bug fixed 2026-06-09). */
.cs-call-dock .cs-call-pill {
    width: auto !important;
    height: auto !important;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 5px;
    border: 1px solid #e5e7eb;
    border-radius: 999px !important;
    background: #f9fafb !important;
    box-shadow: none;
    outline: none !important;       /* dock focus = green tint, not the rail's outline ring */
    cursor: pointer;
}
.cs-call-dock .cs-call-pill:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db;
}
.cs-call-dock .cs-call-pill.cs-pill-focused {
    background: rgba(135,192,64,.15) !important;
    border-color: #87c040;
}
.cs-call-dock .cs-call-pill-av {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 8px;
    flex-shrink: 0;
}
.cs-call-dock .cs-call-pill-av .cs-call-pill-ring {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
}
/* Connected wave (bug 2026-06-10): the rail-era ripple (~line 1407) rings
   the WHOLE pill — correct when pills were 36px circles, a stretching
   pulsing oval on the dock's chip shape. Kill the chip-level rings and
   ripple the 22px avatar circle instead, like the identity-row avatar. */
.cs-call-dock .cs-call-pill.cs-pill-focused[data-status="connected"]::before,
.cs-call-dock .cs-call-pill.cs-pill-focused[data-status="connected"]::after {
    content: none;
}
.cs-call-dock .cs-call-pill.cs-pill-focused[data-status="connected"] .cs-call-pill-av::before,
.cs-call-dock .cs-call-pill.cs-pill-focused[data-status="connected"] .cs-call-pill-av::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #87c040;
    background: transparent;
    animation: cs-connected-wave 2.4s ease-out infinite;
    pointer-events: none;
}
.cs-call-dock .cs-call-pill.cs-pill-focused[data-status="connected"] .cs-call-pill-av::after {
    animation-delay: 1.2s;
}
.cs-call-dock .cs-call-pill-nm {
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    max-width: 92px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-call-dock .cs-call-pill.cs-pill-focused .cs-call-pill-nm { color: #6ea033; }
.cs-call-dock .cs-call-pill-st {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    color: #6b7280;
}
.cs-call-dock .cs-call-pill[data-status="held"]    .cs-call-pill-st { color: #d97706; }
.cs-call-dock .cs-call-pill[data-status="ringing"] .cs-call-pill-st { color: #3b82f6; }
.cs-call-dock .cs-call-pill[data-status="queued"]  .cs-call-pill-st { color: #3b82f6; }
.cs-call-dock .cs-call-pill-tm {
    font-size: 10.5px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}
/* Inline green Pickup (queued) / Resume (held) on pills. Visibility is
   CLASS-driven (.cs-pill-ans-on, toggled by updateDockPillTexts): the old
   `display:inline-flex !important` here beat Wt's inline display:none, so
   the button could never actually hide once shown (2026-07-10 fix — the
   stale play button on LIVE pills). Hidden by default. */
.cs-call-pill-ans,
.cs-call-pill-ans.btn {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50% !important;
    border: none !important;
    background: #87c040 !important;
    color: #ffffff !important;
    font-size: 8px;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 0 0 2px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.cs-call-pill-ans.cs-pill-ans-on,
.cs-call-pill-ans.btn.cs-pill-ans-on {
    display: inline-flex !important;
}
.cs-call-pill-ans i,
.cs-call-pill-ans.btn i {
    font-size: 8px !important;
    line-height: 1;
}
.cs-call-pill-ans:hover,
.cs-call-pill-ans.btn:hover { background: #6ea033 !important; }
.cs-call-pill-ans i,
.cs-call-pill-ans.btn i,
.cs-call-pill-ans span,
.cs-call-pill-ans.btn span,
.cs-call-pill-ans svg,
.cs-call-pill-ans.btn svg,
.cs-call-pill-ans svg *,
.cs-call-pill-ans.btn svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* Hold model (2026-07-10): the same inline button doubles as one-tap
   Resume on HELD pills — play glyph nudged right so it reads centered
   in the circle. Colors stay the pickup green (one affordance). */
.cs-call-pill-ans.cs-call-pill-resume i {
    margin-left: 1px;
}
/* Swap in flight: the two affected pills dim and stop taking clicks
   until both hold round-trips confirm (or the 3s timeout re-enables). */
.cs-call-pill.cs-swap-pending {
    opacity: 0.55;
    pointer-events: none;
}
.cs-call-pill-ans:disabled,
.cs-call-pill-ans.btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ---- controls: the focused item becomes a horizontal circle row ---- */
.cs-call-dock .items-container > .selector-item > .options {
    flex-direction: row;
    padding: 0;
}
.cs-call-dock .items-container > .selector-item .options-container {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
/* Section headers + height-collapse machinery are retired in the dock. */
.cs-call-dock .cs-rail-section-head { display: none !important; }
/* Legacy inline conference roster (the nested _threeWaySelector with its
   "Conference Calls" header) is hidden in the dock — its rows are killed by
   the rail row-hide leak so only a stray header shows, and the Conference
   TRAY is the proper management surface. The selector stays in the DOM (its
   per-leg items keep their rabbit subscriptions); only the visual is hidden. */
.cs-call-dock .cs-dock-threeway-inline { display: none !important; }
.cs-call-dock .items-container > .selector-item[class*="cs-rail-collapsed-"] .cs-dock-prime,
.cs-call-dock .items-container > .selector-item[class*="cs-rail-collapsed-"] .cs-dock-more {
    /* collapse classes may linger from saved state — dock ignores them */
    display: inline-flex;
}

/* Circle buttons — the PROTOTYPE'S round controls (46px circles, white face,
   hairline border, soft shadow, hover lift; 42px at narrow widths). These
   must OUT-SPECIFY the rail-era ghost-square rules above (which carry
   !important on bg/radius at 4-class specificity), hence the stacked
   .cs-call-rail.cs-call-dock prefix + the explicit btn-variant list + our own
   !important. The dock block is also LATER in the file, so equal-specificity
   ties break our way. */
.cs-call-dock .cs-dock-prime,
.cs-call-dock .cs-dock-more {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button,
.cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button .btn,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button .btn.btn-danger,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button .btn.btn-warning,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button .btn.btn-dark,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button .btn.btn-success,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button .btn.btn-secondary,
.cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button .btn,
.cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button .btn.btn-danger,
.cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button .btn.btn-warning,
.cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button .btn.btn-dark,
.cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button .btn.btn-success,
.cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button .btn.btn-secondary {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 50% !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button .btn:hover,
.cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button .btn:hover {
    background: #f3f4f6 !important;
    transform: translateY(-1px);
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button .btn i,
.cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button .btn i {
    font-size: 16px;
    line-height: 1;
}
/* End call: the one filled circle — solid red, white glyph (prototype). */
.cs-call-rail.cs-call-dock .items-container .cs-rail-end-call .selector-item-option-button .btn,
.cs-call-rail.cs-call-dock .items-container .cs-rail-end-call .selector-item-option-button .btn.btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-rail-end-call .selector-item-option-button .btn:hover {
    background: #b91c1c !important;
}

/* ---- active-state fills (decision 2026-06-10) ----
   Mute = solid red while muted, Hold = solid yellow while held, Record =
   solid red while recording (neutral when not). The rail-era palettes
   (~line 3691) LOSE the cascade to the white-circle rules above — same
   specificity, dock block later — so the dock re-asserts them here, after
   the white circles, with the state class adding the tiebreaker. */
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn.btn-danger,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn.btn-dark {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn i {
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.avidbit_mute_call.avidbit_muted_call .selector-item-option-button .btn:hover {
    background: #b91c1c !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-hold-active .selector-item-option-button .btn,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-hold-active .selector-item-option-button .btn.btn-warning,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-hold-active .selector-item-option-button .btn.btn-dark {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-hold-active .selector-item-option-button .btn i {
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-hold-active .selector-item-option-button .btn:hover {
    background: #d97706 !important;
}
/* In-conference: the Conference control is promoted to the primary row
   (decision 2026-06-10) and painted a solid blue filled circle so it both
   gives one-tap access to the Conference tray and signals the in-conference
   state. Same placement rationale as the other active fills (after the white
   circles). */
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-dock-conf-active .selector-item-option-button .btn,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-dock-conf-active .selector-item-option-button .btn.btn-secondary,
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-dock-conf-active .selector-item-option-button .btn.btn-dark {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-dock-conf-active .selector-item-option-button .btn i {
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-dock-prime.cs-dock-conf-active .selector-item-option-button .btn:hover {
    background: #2563eb !important;
}
/* Record idle: NEUTRAL glyph (the rail tinted it red at rest, which reads
   as "recording" — the user wants red to mean recording only). */
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="idle"] .selector-item-option-button .btn i {
    color: #1f2937 !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="recording"] .selector-item-option-button .btn,
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="recording"] .selector-item-option-button .btn.btn-secondary,
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="recording-locked"] .selector-item-option-button .btn,
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="recording-locked"] .selector-item-option-button .btn.btn-secondary {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="recording"] .selector-item-option-button .btn i,
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="recording-locked"] .selector-item-option-button .btn i {
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="recording"] .selector-item-option-button .btn:hover {
    background: #b91c1c !important;
}
/* Paused recording: amber, white glyph (resume affordance). */
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="paused"] .selector-item-option-button .btn,
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="paused"] .selector-item-option-button .btn.btn-secondary {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}
.cs-call-rail.cs-call-dock .items-container .cs-rail-record-btn[data-status="paused"] .selector-item-option-button .btn i {
    color: #ffffff !important;
}
.cs-call-dock .cs-dock-prime .option-button-title,
.cs-call-dock .cs-dock-more .option-button-title {
    display: none;
}
@media (max-width: 919.98px) {
    .cs-call-rail.cs-call-dock .items-container .cs-dock-prime .selector-item-option-button .btn,
    .cs-call-rail.cs-call-dock .items-container .cs-dock-more .selector-item-option-button .btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }
}

/* Row order: mute · hold · transfer · park · keypad · info · more · end.
   (Park is a PRIORITY button — present at every width.) */
.cs-call-dock .cs-dock-o1 { order: 1; }
.cs-call-dock .cs-dock-o2 { order: 2; }
.cs-call-dock .cs-dock-o3 { order: 3; }
.cs-call-dock .cs-dock-o4 { order: 4; }
.cs-call-dock .cs-dock-o5 { order: 5; }
.cs-call-dock .cs-dock-o6 { order: 6; }
.cs-call-dock .cs-dock-o7 { order: 7; }
.cs-call-dock .cs-dock-o8 { order: 8; }

/* Buttons that carry neither dock class (legacy/suppressed leftovers) keep
   their existing rail visibility rules; the More group hides until opened. */
.cs-call-dock .selector-item .cs-dock-more { display: none; }
.cs-call-dock .selector-item.cs-dock-more-open .cs-dock-more {
    display: inline-flex;
    order: 20;
}
/* Light tint distinguishes the revealed More group from the primaries. */
.cs-call-dock .selector-item.cs-dock-more-open .cs-dock-more .btn {
    background-color: #f9fafb;
}
/* ---- More TRAY (sidebar card) — in-dock action strip ----
   With the sidebar living inside the dock, More reads as a strip of labeled
   mini-circles directly above the controls row (prototype's .mtile look):
   transparent tiles, 40px circle icon, 10px label underneath. Tiles only
   render when their action is available (no disabled ghosts). */
.cs-dock-more-tray { padding: 4px 0 8px; }
.cs-dock-more-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 8px;
    padding: 10px 4px 6px;
}
.cs-dock-more-tile,
.cs-dock-more-tile.btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 74px;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    box-shadow: none !important;
    margin: 0 !important;
    white-space: normal;
    text-align: center;
}
.cs-dock-more-tile:hover,
.cs-dock-more-tile.btn:hover {
    background: transparent !important;
    color: #1f2937 !important;
}
.cs-dock-more-tile i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: #1f2937;
    transition: background 0.15s ease;
}
.cs-dock-more-tile:hover i {
    background: #f3f4f6;
}
/* Record tile reflects the live recording state (decision 2026-06-10):
   solid-red icon circle + white glyph while the call IS recording, normal
   neutral circle otherwise. Applied in t_renderMoreTrayBody, which
   re-renders the More tiles on every open. */
.cs-dock-more-tile.cs-dock-more-tile-recording i {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}
.cs-dock-more-tile.cs-dock-more-tile-recording:hover i {
    background: #b91c1c;
}

.cs-call-dock .cs-dock-more-btn-open .btn {
    background-color: #87c040 !important;
    border-color: #87c040 !important;
    color: #ffffff !important;
}
.cs-call-dock .cs-dock-more-btn-open .btn .symbol-label { color: #ffffff !important; }

/* ---- ringing block: row layout inside the dock box (#5 redesigns) ---- */
.cs-call-dock .cs-call-rail-ringing-actions {
    width: 100%;
    order: 30;
}
.cs-call-dock .cs-call-rail-ringing-actions.cs-active {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 0;
    border-top: 1px dashed #e5e7eb;
}
/* (2026-06-09) The caller-info panel is no longer a child of this block —
   it's a direct dock child placed on the tray row (see the .cs-ring-info
   dock rules below), so the block holds ONLY the Answer / VM / Decline
   circles, centered on the controls edge. */

/* ---- retired chrome safety net (deleted for real in #9) ---- */
.cs-call-dock .cs-call-rail-head,
.cs-call-dock .cs-call-rail-tab { display: none !important; }

/* ============================================================================ */
/* BOTTOM DOCK (slice #2) — top/bottom flip, identity utils, minimize chip      */
/* ============================================================================ */

/* Docked to the top: under the app header instead of the bottom edge. */
.cs-call-rail.cs-call-dock.cs-dock-top {
    bottom: auto;
    top: 66px;
}

/* Identity-row utility buttons (minimize · flip) — far right, both rows. */
.cs-call-dock .cs-dock-utils {
    grid-row: 1 / 3;
    grid-column: 5;
    justify-self: end;
    display: flex;
    gap: 4px;
}
.cs-dock-util-btn,
.cs-dock-util-btn.btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    box-shadow: none !important;
}
.cs-dock-util-btn:hover,
.cs-dock-util-btn.btn:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* ---- minimized status chip ---- */
/* Filled with the state color; uppercase label + caller name + live timer.
   data-state: active (green) / held (amber) / ringing (pulsing blue). */
.cs-dock-chip {
    position: fixed;
    right: 14px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #87c040;
    color: #ffffff;
    border-radius: 14px;
    padding: 8px 14px 8px 9px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(135,192,64,.5);
    transition: filter .14s ease;
}
.cs-dock-chip:hover { filter: brightness(1.06); }
.cs-dock-chip.cs-dock-chip-top { bottom: auto; top: 66px; }
.cs-dock-chip[data-state="held"] {
    background: #d97706;
    box-shadow: 0 10px 28px rgba(217,119,6,.45);
}
.cs-dock-chip[data-state="ringing"] {
    background: #3b82f6;
    box-shadow: 0 10px 28px rgba(59,130,246,.5);
    animation: cs-dock-chip-breathe 1.4s ease-in-out infinite;
}
@keyframes cs-dock-chip-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
.cs-dock-chip-av {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #87c040, #3b82f6);
    border: 2px solid rgba(255,255,255,.75);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
.cs-dock-chip-av::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.55);
    animation: cs-dock-chip-pulse 1.8s infinite;
    pointer-events: none;
}
@keyframes cs-dock-chip-pulse {
    0%   { transform: scale(1);    opacity: .9; }
    100% { transform: scale(1.35); opacity: 0;  }
}
.cs-dock-chip-meta { min-width: 0; }
.cs-dock-chip-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    opacity: .9;
    line-height: 1.2;
}
.cs-dock-chip-whorow {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.cs-dock-chip-who {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-dock-chip-timer {
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}
.cs-dock-chip-up {
    color: rgba(255,255,255,.85);
    font-size: 11px;
    margin-left: 2px;
}

/* ============================================================================ */
/* BOTTOM DOCK — trays INSIDE the dock (variant C, decision 2026-06-09)         */
/*                                                                              */
/* CSCallSidebar is a CHILD of the dock container itself                        */
/* (CSCommunicator_ActiveCalls::buildRailChrome): the open card renders within  */
/* the dock's rounded border, above the controls row — below it when top-       */
/* docked or in PWA call mode (CSS `order`) — and the dock simply grows.        */
/* --cs-dock-h keeps tracking the combined height via the dock's               */
/* ResizeObserver, so the chip / waiting-badge anchors keep working, and       */
/* minimize-to-chip hides the panel together with the dock. One card visible    */
/* at a time — enforced in CSCallSidebar::applyCardVisibility, not CSS.         */
/* These (0,3,0)+ selectors must out-specify every legacy fixed-position        */
/* sidebar rule above (base, mobile media block, rail-pinned).                  */
/* Visual reference: PROTOTYPE_dock_integrated_trays.html (variant C).          */
/* ============================================================================ */
.cs-call-rail.cs-call-dock .cs-call-sidebar {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    order: -1;                       /* own row ABOVE identity + controls */
    margin: 0;
    padding: 0 2px 8px;
    /* Tall enough for the large trays (Transfer / Park) — viewport-bounded
       so the dock never grows past the screen; whatever still doesn't fit
       scrolls (panel-level overflow-y is the safety net; ideally the card
       BODY scrolls first via the flex min-height chain). */
    max-height: min(70vh, calc(100vh - 230px));
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-bottom: 1px solid #eef0f3;   /* interior seam toward the rows below */
    box-shadow: none;
    transform: none;
    opacity: 1;
    overflow-y: auto;
    pointer-events: auto;
    z-index: auto;
    transition: none;
}
@keyframes cs-dock-panel-grow {
    from { max-height: 0; opacity: 0.25; }
    to   { max-height: min(70vh, calc(100vh - 230px)); opacity: 1; }
}
.cs-call-rail.cs-call-dock .cs-call-sidebar.cs-call-sidebar-open {
    transform: none;
    animation: cs-dock-panel-grow 0.22s ease-out;
}
/* Top-docked — and PWA call mode, where the dock sits at the pane top — the
   panel goes BELOW the rows instead; divider flips to the top edge. */
.cs-call-rail.cs-call-dock.cs-dock-top .cs-call-sidebar,
.cs-pwa-call-mode .cs-call-rail.cs-call-dock .cs-call-sidebar {
    order: 99;
    border-bottom: none;
    border-top: 1px solid #eef0f3;
    padding: 8px 2px 0;
}
/* Cards shed their floating chrome — the dock supplies the box. */
.cs-call-dock .cs-call-sidebar-card,
.cs-call-dock .cs-call-sidebar-card:hover {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    max-height: none;
    min-height: 0;
    flex: 0 1 auto;
}
/* Header matches the prototype's .tray-h: slim muted uppercase title,
   borderless X (decision 2026-06-09 — "cleaner title / text box" pass). */
.cs-call-dock .cs-call-sidebar-card .cs-call-sidebar-card-head {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid #eef0f3;
    padding: 9px 4px;
}
.cs-call-dock .cs-call-sidebar-card .cs-call-sidebar-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.4px;
}
.cs-call-dock .cs-call-sidebar-card .cs-call-sidebar-card-close {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 13px;
    width: 24px;
    height: 24px;
}
.cs-call-dock .cs-call-sidebar-card .cs-call-sidebar-card-close:hover {
    background: transparent;
    color: #1f2937;
}

/* ---- Park / Device Swap / Conference embedded in dock cards ----
   (Park 2026-06-09; Swap + Conference 2026-06-10.) All are CSModalShell-
   derived; embedded=true strips the overlay/header/footer but the
   Bootstrap dialog wrappers remain. Same modal-flattening treatment as
   the Transfer embeds (cs-transfer-selector-quick) so the content renders
   inline; the card body is the scroll region. */
.cs-call-sidebar-card-body.cs-park-card-tray .cs-park-selector-embed,
.cs-call-sidebar-card-body.cs-swap-card-tray .cs-device-swap-embed,
.cs-call-sidebar-card-body.cs-conference-card-tray .cs-conference-embed {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
}
.cs-park-selector-embed .modal-dialog,
.cs-park-selector-embed .modal-content,
.cs-device-swap-embed .modal-dialog,
.cs-device-swap-embed .modal-content,
.cs-conference-embed .modal-dialog,
.cs-conference-embed .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cs-park-selector-embed .modal-body,
.cs-park-selector-embed .cs-modal-body,
.cs-device-swap-embed .modal-body,
.cs-device-swap-embed .cs-modal-body,
.cs-conference-embed .modal-body,
.cs-conference-embed .cs-modal-body {
    overflow: visible !important;
    max-height: none !important;
    padding: 0 10px !important;
    scrollbar-width: none !important;
}
.cs-park-selector-embed .modal-footer,
.cs-device-swap-embed .modal-footer,
.cs-conference-embed .modal-footer {
    display: none !important;
}

/* ---- Embedded-selector ROW restore (bug fix 2026-06-10) ----
   The Device Swap / Conference / Park embeds are GenericSelectors whose
   device / participant rows are `.selector-item` nodes nested inside the
   selector's own `.items-container`. Because the whole dock IS itself a
   `.cs-call-rail` Selector, the rail's "hide every non-focused row +
   flatten its `.avidbit-selector-item-container`" rules (≈3244 / 3491)
   LEAK into these nested selectors: the group header shows (it's the
   selector's top-level item, not under an `.items-container`) but every
   row under it gets `display:none` — symptom was "I see 'Your Devices'
   with the count but no devices." The QT tray already restores its own
   rows this way; mirror it for these three. Plain `display` (no
   !important) so a future per-row hide() still wins; the 4-class
   specificity already beats the rail's 3-class hide rule. The inner
   container needs !important to beat the rail's !important flatten. */
.cs-call-rail .cs-swap-card-tray .items-container > .selector-item,
.cs-call-rail .cs-conference-card-tray .items-container > .selector-item,
.cs-call-rail .cs-park-card-tray .items-container > .selector-item {
    display: block;
}
.cs-call-rail .cs-swap-card-tray .items-container > .selector-item > .avidbit-selector-item-container,
.cs-call-rail .cs-conference-card-tray .items-container > .selector-item > .avidbit-selector-item-container,
.cs-call-rail .cs-park-card-tray .items-container > .selector-item > .avidbit-selector-item-container {
    display: flex !important;
}
/* …and the rail ALSO hides the row's inner identity chrome — icon/title/
   subtitle (≈3478) — because the dock shows the CALL's identity elsewhere.
   For an embedded device/participant selector that chrome IS the row's
   content (device name, badges under the title container, sub-line), so
   restore it too, or the row renders as just an action button with no
   label (Codex review 2026-06-10). The rail hides here are non-!important,
   so a scoped !important restore wins without deep selectors; search's
   row hide() still works (it sets inline display:none on the .selector-item
   itself, which the non-!important row rule above yields to). .info-container
   is already force-shown by the .cs-call-sidebar-card-body rule above. */
.cs-swap-card-tray .icon-title-container,
.cs-conference-card-tray .icon-title-container,
.cs-park-card-tray .icon-title-container {
    display: flex !important;
}
.cs-swap-card-tray .selector-item-title,
.cs-swap-card-tray .selector-item-subtitle,
.cs-swap-card-tray .selector-item-subtitle-2,
.cs-conference-card-tray .selector-item-title,
.cs-conference-card-tray .selector-item-subtitle,
.cs-conference-card-tray .selector-item-subtitle-2,
.cs-park-card-tray .selector-item-title,
.cs-park-card-tray .selector-item-subtitle,
.cs-park-card-tray .selector-item-subtitle-2 {
    display: block !important;
}

/* ---- Live Transcript in its dock card (decision 2026-06-10) ----
   CSLiveTranscript is a plain widget — no modal wrappers to flatten.
   Just give the chunks breathing room; the card body scrolls.

   Size-to-content with a cap (bug fix 2026-06-10): the base
   `.cs-call-sidebar-card-body { flex: 1; min-height: 0 }` collapses while
   the transcript starts EMPTY (chunks arrive async over rabbit), so the
   card looked "fixed/empty" and didn't visibly grow as lines came in.
   `flex: 0 1 auto` lets it size to the chunks; `max-height` caps the
   growth so a long transcript scrolls internally instead of pushing the
   dock taller without bound; `min-height` keeps the loading indicator and
   first lines visible. */
.cs-call-sidebar-card-body.cs-transcript-card-tray {
    padding: 8px 10px;
    flex: 0 1 auto;
    min-height: 96px;
    max-height: 42vh;
    overflow-y: auto;
}

/* Initial "pulling transcript" indicator — shown until the first chunk
   arrives, then removed in CSLiveTranscript::processMessage. */
.cs-transcript-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 8px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}
.cs-transcript-loading i {
    font-size: 14px;
    color: #6993FF;
}

/* ============================================================================ */
/* BOTTOM DOCK (slice #5) — ringing layout + auto-shown customer info           */
/* ============================================================================ */

/* While the focused call is ringing, the item's circle controls hide — the
   ringing block (Answer / Voicemail / Decline) + the tray-slot info panel
   are the surface. */
.cs-call-dock .items-container > .selector-item.cs-dock-ringing .options-container {
    display: none !important;
}
/* …and with the controls gone the items row is an empty box (its hairline
   border + paddings + the dock's row gap read as a tall white band between
   the identity row and the Answer row — bug 2026-06-09). Collapse the whole
   row; non-focused items are hidden in the dock anyway. */
.cs-call-dock:has(.items-container .selector-item.cs-dock-ringing.cs-focused-item) .items-container {
    display: none;
}

/* Ringing box accent: blue halo on the whole dock + rippling avatar. */
.cs-call-dock:has(.selector-item.cs-dock-ringing.cs-focused-item) {
    border-color: #3b82f6;
    box-shadow: 0 10px 30px rgba(59,130,246,.28), 0 0 0 1px rgba(59,130,246,.25);
}
.cs-call-dock:has(.selector-item.cs-dock-ringing.cs-focused-item) .cs-call-rail-inline-av::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #3b82f6;
    animation: cs-dock-ripple 1.5s ease-out infinite;
    pointer-events: none;
}
@keyframes cs-dock-ripple {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(1.5); opacity: 0;  }
}

/* Ring buttons → circles in the dock (Answer large green / VM neutral /
   Decline large red), overriding the rail's 60px squares. */
.cs-call-dock .cs-call-rail-ring-btn,
.cs-call-dock .cs-call-rail-ring-btn.btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50% !important;
    flex-direction: row;
}
.cs-call-dock .cs-call-rail-ring-btn span { display: none; }   /* tooltip-only, like the circles */
.cs-call-dock .cs-call-rail-ring-answer,
.cs-call-dock .cs-call-rail-ring-answer.btn,
.cs-call-dock .cs-dock-ring-decline,
.cs-call-dock .cs-dock-ring-decline.btn {
    width: 54px;
    height: 54px;
    min-width: 54px;
}
.cs-call-dock .cs-dock-ring-vm,
.cs-call-dock .cs-dock-ring-vm.btn {
    background: #eef2f6 !important;
    border-color: #e5e7eb !important;
    color: #475569 !important;
}
.cs-call-dock .cs-dock-ring-vm i { color: #475569 !important; }

/* The auto-shown caller-info panel while ringing. */
.cs-ring-info {
    width: 100%;
    text-align: left;
    padding: 9px 2px 0;
    margin-top: 8px;
    border-top: 1px dashed #e5e7eb;
}
/* (2026-06-09) The panel is a DIRECT dock child so it occupies the same
   full-width tray row the sidebar cards open in — caller info ABOVE the
   identity row, like an auto-opened Call Info tray — instead of being
   sandwiched inside the ringing block with the Answer row below it.
   Hidden until refreshRingingForCall marks the focused ringing call's
   panel .cs-active (class-toggle, no first-paint flash). */
.cs-call-rail > .cs-ring-info { display: none; }
.cs-call-rail.cs-call-dock > .cs-ring-info.cs-active {
    display: block;
    order: -1;                       /* tray slot: above identity + controls */
    margin: 0;
    padding: 0 2px 8px;
    border-top: none;
    border-bottom: 1px solid #eef0f3;   /* interior seam, matches the sidebar row */
}
/* Top-docked / PWA call mode: the dock sits at the pane top, so the info
   flips BELOW the identity row — but stays ABOVE the Answer / VM / Decline
   row (.cs-call-rail-ringing-actions, order 30) so those keep the outer
   edge, matching the prototype's identity → info → Answer stack. */
.cs-call-rail.cs-call-dock.cs-dock-top > .cs-ring-info.cs-active,
.cs-pwa-call-mode .cs-call-rail.cs-call-dock > .cs-ring-info.cs-active {
    order: 20;
    border-bottom: none;
    border-top: 1px solid #eef0f3;
    padding: 8px 2px 0;
}
.cs-ring-fromto {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.cs-ring-ft { min-width: 0; }
.cs-ring-ft-lbl {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 1px;
}
.cs-ring-ft-name {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
/* The line they dialed (the company being answered for) has to be readable
   at a glance. Customer feedback 2026-09-17: 15px in the mid brand green
   (#6ea033, ~3.1:1 on the white card) was too small and blended into the
   background. Now: bigger + heavier, and a darker green on the same hue
   (#3f7a12, ~5.3:1 on white — WCAG AA) so it still reads as "the To line"
   without washing out; a brand-green bar on the left marks the block for
   anyone who can't rely on the colour alone. */
.cs-ring-ft-to {
    padding-left: 10px;
    border-left: 3px solid #87c040;
}
.cs-ring-ft-to .cs-ring-ft-name {
    color: #3f7a12;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.2px;
}
.cs-ring-ft-to .cs-ring-ft-lbl { color: #3f7a12; }
.cs-ring-ft-num {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}
.cs-ring-int {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 2px;
    font-size: 12.5px;
    animation: cs-ring-rowfade .35s ease;
    border-bottom: 1px solid #f3f4f6;
}
.cs-ring-int:last-child { border-bottom: none; }
@keyframes cs-ring-rowfade {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}
.cs-ring-int-ic {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}
.cs-ring-int-img { width: 100%; height: 100%; object-fit: contain; }
.cs-ring-int-name {
    flex: 1;
    min-width: 0;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-ring-int-open {
    font-size: 11px;
    color: #3b82f6;
    cursor: pointer;
    white-space: nowrap;
}
.cs-ring-int-open:hover { text-decoration: underline; }
.cs-ring-skel {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 2px;
}
.cs-ring-skel-ic,
.cs-ring-skel-line {
    border-radius: 7px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9ecf0 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: cs-ring-shimmer 1.2s infinite;
}
.cs-ring-skel-ic { width: 24px; height: 24px; flex-shrink: 0; }
.cs-ring-skel-line { width: 45%; height: 11px; border-radius: 6px; }
.cs-ring-skel-txt { font-size: 10px; color: #6b7280; white-space: nowrap; }
@keyframes cs-ring-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* From/To blocks reused inside the Call Info card body. */
.cs-callinfo-tray .cs-ring-fromto,
.cs-call-sidebar-card .cs-ring-fromto {
    padding: 10px 14px 2px;
}

/* From/To blocks inside the Quick Transfer context strip — the strip
   already pads (.cs-qt-context 10px 14px), so zero out the card-body
   padding above (same specificity; this rule is later so it wins). */
.cs-qt-context .cs-ring-fromto {
    padding: 0;
    margin: 4px 0 0;
    gap: 18px;
}

/* ============================================================================ */
/* BOTTOM DOCK (slice #7) — PWA "Call" tab modes                                */
/*                                                                              */
/* Root-level classes set by CSCommunicatorWeb::t_updatePWACallMode():          */
/*   .cs-pwa-hide-dock  — PWA, anywhere but the Call tab's calls view: the      */
/*                        floating dock/trays/chip/badge hide (slice #8 brings  */
/*                        the chip back as the return affordance).              */
/*   .cs-pwa-call-mode  — Call tab, calls view: the globally-mounted dock       */
/*                        re-homes INTO the pane region via CSS (no re-parent). */
/* ============================================================================ */
.cs-pwa-hide-dock .cs-call-rail.cs-call-dock,
.cs-pwa-hide-dock .cs-call-sidebar,
.cs-pwa-hide-dock .cs-waiting-badge {
    display: none !important;
}
/* Decision 2026-06-10 (supersedes the floating return chip): on the PWA,
   calls live ONLY in their tab — nothing call-related takes space in other
   sections. The Call tab's count badge + the ring auto-jump are the only
   signals. The chip therefore hides with the rest of the dock chrome. */
.cs-pwa-hide-dock .cs-dock-chip {
    display: none !important;
}

/* Live call-count badge on the Call tab icon (slice #8). */
.cs-pwa-tab-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 22px);
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #87c040;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid #1a1a27;
    line-height: 1;
    pointer-events: none;
}

/* DOCKED, not floating (decision 2026-06-10): on the PWA the calls view is
   flush page content — full-bleed width, flat chrome (no radius, no floating
   shadow, no side gaps). With the FAB variant there's no swap bar, so the
   stack docks at the very top of the pane. */
.cs-pwa-call-mode .cs-call-rail.cs-call-dock {
    top: 4px;
    bottom: auto;
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: none;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.cs-pwa-call-mode .cs-call-rail.cs-call-dock.cs-dock-top {
    top: 4px;   /* in-page mode ignores the desktop top/bottom preference */
}
.cs-pwa-call-mode .cs-dock-utils { display: none; }       /* float-only utils */
.cs-pwa-call-mode .cs-dock-chip { display: none !important; }
/* (The sidebar lives INSIDE the dock now — it flows with the docked pane;
   the .cs-pwa-call-mode order-99/divider flip is in the inside-the-dock
   block above. No separate PWA anchoring needed.) */
.cs-pwa-call-mode .cs-waiting-badge {
    right: 12px;
    bottom: auto;
    top: calc(26px + var(--cs-dock-h, 96px));
    flex-direction: column;
}

/* Floating action button (Variant B, decision 2026-06-10) — swaps the Call
   tab between calls and dialer. Fixed above the bottom tab bar; it lives
   inside the tab pane so it disappears with the tab. */
.cs-pwa-call-fab,
.cs-pwa-call-fab.btn {
    position: fixed;
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 50% !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 20px;
    z-index: 70;
    /* NO !important on display — Wt's setHidden() hides via an inline
       display:none, and an !important rule here would beat it (FAB showed
       with zero calls). The .btn-qualified selector already out-specifies
       Bootstrap's .btn display. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.3) !important;
    cursor: pointer;
    transition: transform .15s ease;
}
.cs-pwa-call-fab:hover { transform: scale(1.06); }
/* Keenthemes paints .btn i in muted grey — the glyph must be solid white
   on both FAB states. */
.cs-pwa-call-fab i,
.cs-pwa-call-fab.btn i,
.cs-pwa-call-fab span,
.cs-pwa-call-fab.btn span,
.cs-pwa-call-fab svg,
.cs-pwa-call-fab.btn svg,
.cs-pwa-call-fab svg *,
.cs-pwa-call-fab.btn svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 20px;
}
.cs-pwa-call-fab .cs-pwa-call-fab-badge,
.cs-pwa-call-fab.btn .cs-pwa-call-fab-badge {
    color: #ffffff !important;
    font-size: 11px;
}

/* ---- Dialpad touch-tone toggle (decision 2026-06-09) ----
   Small speaker icon anchored to the right edge of the dialpad's call row.
   Muted at rest; the icon itself flips fa-volume / fa-volume-slash. */
.cs-dialpad-actions-row {
    position: relative;
}
.cs-dialpad-tone-toggle {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    cursor: pointer;
}
.cs-dialpad-tone-toggle:hover {
    background: #f3f4f6;
    color: #1f2937;
}
.cs-dialpad-tone-toggle i {
    font-size: 15px;
}
.cs-pwa-call-fab-to-dialer,
.cs-pwa-call-fab-to-dialer.btn {
    background: #374151 !important;
}
.cs-pwa-call-fab-to-calls,
.cs-pwa-call-fab-to-calls.btn {
    background: #87c040 !important;
    animation: cs-pwa-fab-pulse 1.8s infinite;
}
@keyframes cs-pwa-fab-pulse {
    0%   { box-shadow: 0 10px 24px rgba(0,0,0,.3), 0 0 0 0    rgba(135,192,64,.45); }
    70%  { box-shadow: 0 10px 24px rgba(0,0,0,.3), 0 0 0 14px rgba(135,192,64,0);   }
    100% { box-shadow: 0 10px 24px rgba(0,0,0,.3), 0 0 0 0    rgba(135,192,64,0);   }
}
.cs-pwa-call-fab-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 2px solid #ffffff;
}

/* ---- Modern dialer restyle (match PROTOTYPE_pwa_call_tab.html) ---- */
/* Scoped to the Call tab's dialer host (.cs-dialpad-modern): big round keys with
   letter subtext, centered entry, round green call button. */
.cs-dialpad-modern .avidbit-communicator-dialpad-row {
    justify-content: center;
    gap: 14px;
    padding-top: 14px !important;
}
.cs-dialpad-modern .communicator_dialPadNumber.dialpad-digit,
.cs-dialpad-modern .communicator_dialPadNumber.dialpad-digit.bg-secondary {
    width: 72px;
    height: 72px;
    border-radius: 50% !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    margin: 0 !important;
    box-shadow: none !important;
}
.cs-dialpad-modern .communicator_dialPadNumber.dialpad-digit:hover {
    background: #f3f4f6 !important;
}
.cs-dialpad-modern .communicator_dialPadNumber_subText {
    font-size: 8.5px;
    letter-spacing: 1.5px;
    color: #6b7280;
    font-weight: 600;
    line-height: 1.2;
}
.cs-dialpad-modern .communicator_dialPadNumber_call_button,
.cs-dialpad-modern .communicator_dialPadNumber_call_button.bg-primary {
    width: 64px;
    height: 64px;
    border-radius: 50% !important;
    background: #87c040 !important;
    color: #ffffff !important;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: none !important;
    box-shadow: 0 8px 20px rgba(135,192,64,.4) !important;
}
.cs-dialpad-modern .communicator_dialPadNumber_call_button.bg-primary:hover {
    background: #6ea033 !important;
}
.cs-dialpad-modern .communicator_dialPadNumber_call_button.bg-success {
    width: 64px;
    height: 64px;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: none !important;
}
/* Entry line: centered, big, hairline underline (prototype's d-entry). */
.cs-dialpad-modern .title-bar-search-container,
.cs-dialpad-modern .title-bar-search-container.form-control {
    text-align: center;
    font-size: 24px !important;
    font-weight: 600;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cs-dialpad-modern .btn.btn-secondary {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hang-up on the minimized chip (decision 2026-06-10). */
/* Solid WHITE at rest with a red glyph, full red with a white glyph on
   hover (decision 2026-06-09 — was a translucent ghost before). The i
   rules carry !important to beat Keenthemes' grey .btn i. */
.cs-dock-chip-hangup,
.cs-dock-chip-hangup.btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50% !important;
    border: none !important;
    background: #ffffff !important;
    color: #dc2626 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    cursor: pointer;
    box-shadow: none !important;
}
.cs-dock-chip-hangup i,
.cs-dock-chip-hangup.btn i {
    color: #dc2626 !important;
}
.cs-dock-chip-hangup:hover,
.cs-dock-chip-hangup.btn:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}
.cs-dock-chip-hangup:hover i,
.cs-dock-chip-hangup.btn:hover i {
    color: #ffffff !important;
}

/* ==========================================================================
   Full-page communicator route without the app subheader.

   CSCommunicator::route() hides the "Communicator" title subheader and tags
   the route row with .communicator-no-subheader. Every height budget below
   mirrors its with-subheader counterpart earlier in this file minus the
   subheader's height: 125px at >=992px (min-h-lg-125px) and ~80px below
   that (pt-5 + pb-7 + the h2 title row). Each selector carries one class
   more than the block it overrides so it wins the !important specificity
   race regardless of order; this file also loads after adrem_thomas.css so
   equal-specificity ties resolve here. The dashboard embed (renderSmall)
   never gets the marker class and keeps the original budgets. */

/* Desktop, no pinned rail: 250 -> 125. */
@media (min-width: 992px)
{
    .communicator-outer-widget.communicator-no-subheader,
    .row.col-12.communicator-outer-widget.communicator-no-subheader.h-100
    {
        height: calc(100svh - 125px) !important;
        max-height: calc(100svh - 125px) !important;
    }
}

/* Tablet/phone, no pinned rail: 250 -> 170. */
@media (max-width: 991.98px)
{
    .communicator-outer-widget.communicator-no-subheader,
    .row.col-12.communicator-outer-widget.communicator-no-subheader.h-100
    {
        height: calc(100svh - 170px) !important;
        max-height: calc(100svh - 170px) !important;
    }
}

/* Pinned-rail reserve, base rule: 290 -> 165. */
.cs-rail-content-reserve .communicator-outer-widget.communicator-no-subheader,
.cs-rail-content-reserve .row.col-12.communicator-outer-widget.communicator-no-subheader.h-100
{
    max-height: calc(100svh - 165px) !important;
}

/* Pinned-rail reserve, desktop: 290 -> 165. */
@media (min-width: 992px)
{
    .cs-rail-content-reserve .communicator-outer-widget.communicator-no-subheader,
    .cs-rail-content-reserve .row.col-12.communicator-outer-widget.communicator-no-subheader.h-100
    {
        height: calc(100svh - 165px) !important;
        max-height: calc(100svh - 165px) !important;
    }
}

/* Pinned-rail reserve, tablet: 210 -> 130. */
@media (min-width: 768px) and (max-width: 991.98px)
{
    .cs-rail-content-reserve .communicator-outer-widget.communicator-no-subheader,
    .cs-rail-content-reserve .row.col-12.communicator-outer-widget.communicator-no-subheader.h-100
    {
        height: calc(100svh - 130px) !important;
        max-height: calc(100svh - 130px) !important;
    }
}

/* Pinned-rail reserve, phone: 260 -> 180. */
@media (max-width: 767.98px)
{
    .cs-rail-content-reserve .communicator-outer-widget.communicator-no-subheader,
    .cs-rail-content-reserve .row.col-12.communicator-outer-widget.communicator-no-subheader.h-100
    {
        height: calc(100svh - 180px) !important;
        max-height: calc(100svh - 180px) !important;
    }
}

/* Left-nav scrollers (recents + company lists): same delta as their row so
   the lists fill the taller card instead of leaving a hole under them.
   Base (desktop/tablet): 411 -> 286. */
.communicator-no-subheader .f_conversation_recent_full_screen
{
    height: calc(100svh - 286px);
}

.communicator-no-subheader .f_conversation_users_full_screen
{
    max-height: calc(100svh - 286px);
}

@media (max-width: 767.98px)
{
    /* Phone: adrem_thomas.css's 180 -> 100. */
    .communicator-no-subheader .f_conversation_recent_full_screen
    {
        height: calc(100svh - 100px);
    }

    /* Phone keeps the users list unbounded (mirrors adrem_thomas.css). */
    .communicator-no-subheader .f_conversation_users_full_screen
    {
        max-height: initial;
        overflow: initial;
    }

    /* Phone + pinned rail: the reserve's 411 -> 331. */
    .cs-rail-content-reserve .communicator-no-subheader .f_conversation_recent_full_screen
    {
        height: calc(100svh - 331px);
        overflow: auto;
    }

    .cs-rail-content-reserve .communicator-no-subheader .f_conversation_users_full_screen
    {
        max-height: calc(100svh - 331px);
        overflow: auto;
    }
}

/* ============================================================= */
/* Rich CRM data elements (docs/crm-rich-data/DESIGN.md,          */
/* prototype variant B — record card). Rendered by                */
/* VoIPActiveCallFloatingSelectorItem::t_renderDataElementsInto   */
/* into the ring-info panel and the Call Info tray, AFTER the     */
/* entry's cs-crm-ext-row.                                        */
/* ============================================================= */

.cs-rich-pills
{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 4px 2px 6px;
}

.cs-rich-pill
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    line-height: 1.5;
}

.cs-rich-pill i
{
    font-size: 9.5px;
    color: #6b7280;
}

.cs-rich-pill .cs-rich-k
{
    color: #6b7280;
    font-weight: 500;
}

.cs-rich-pill .cs-rich-v
{
    font-weight: 700;
}

.cs-rich-pill-link
{
    cursor: pointer;
    color: #6ea033;
    border-color: #cfe3b2;
    background: #f6faef;
}

.cs-rich-pill-link:hover
{
    background: #eef6e2;
}

.cs-rich-pill-link i
{
    color: #6ea033;
}

.cs-rich-chip
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    background: #f3f4f6;
    color: #4b5563;
}

/* Tones — shared by pills and chips */
.cs-rich-tone-amber  { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.cs-rich-tone-green  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.cs-rich-tone-red    { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.cs-rich-tone-blue   { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.cs-rich-tone-purple { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.cs-rich-tone-gray   { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.cs-rich-pill.cs-rich-tone-amber i,
.cs-rich-pill.cs-rich-tone-amber .cs-rich-k  { color: #d97706; }
.cs-rich-pill.cs-rich-tone-purple i,
.cs-rich-pill.cs-rich-tone-purple .cs-rich-k { color: #8b5cf6; }

/* Record card — one per group string */
.cs-rich-card
{
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fbfcfd;
    padding: 10px 12px;
    margin: 6px 0 8px;
    max-width: 460px;
    text-align: left;
}

.cs-rich-card-head
{
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}

.cs-rich-card-title
{
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2937;
}

.cs-rich-card-head .cs-rich-chip
{
    margin-left: auto;
}

.cs-rich-line
{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 1px;
    font-size: 12.5px;
    color: #1f2937;
}

.cs-rich-line i
{
    width: 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    flex-shrink: 0;
}

.cs-rich-line .cs-rich-lbl
{
    color: #6b7280;
    font-size: 11px;
}

.cs-rich-line .cs-rich-v
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-rich-cta
{
    display: block;
    width: 100%;
    margin-top: 9px;
    border-radius: 9px;
    background: #87c040;
    color: #ffffff;
    font-weight: 600;
    font-size: 12.5px;
    padding: 9px 0;
    text-align: center;
    cursor: pointer;
}

.cs-rich-cta:hover
{
    background: #76ab36;
}

/* ---- Tickets section (generic-token integrations) ---------------------- */
.cs-crm-ticket-list
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-crm-ticket-row
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #ebedf3;
}
.cs-crm-ticket-row-selectable
{
    cursor: pointer;
}
.cs-crm-ticket-row-selectable:hover
{
    background: #f3f6f9;
}
.cs-crm-ticket-row-current
{
    border-color: #6993FF;
    background: #eef3ff;
}
.cs-crm-ticket-row-pending
{
    opacity: .7;
}
.cs-crm-ticket-labels
{
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.cs-crm-ticket-title
{
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-crm-ticket-label
{
    font-size: 11px;
    color: #7e8299;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-crm-ticket-status
{
    margin-top: 4px;
}
.cs-crm-ticket-integration
{
    padding-top: 6px;
}
.cs-rich-source-states
{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 8px;
}
.cs-rich-source-state
{
    padding: 2px 6px;
    border-radius: 10px;
    background: #fff4de;
    color: #b76e00;
    font-size: 11px;
}
.cs-rich-source-state-error
{
    background: #ffe2e5;
    color: #f64e60;
}
.cs-rich-omitted
{
    display: block;
    margin-top: 6px;
}
.conv-ticket-op-row
{
    padding: 6px 0;
    border-bottom: 1px solid #ebedf3;
}
.conv-ticket-op-row:last-child
{
    border-bottom: 0;
}
.conv-ticket-op-line
{
    font-weight: 500;
    display: block;
}

/* ---- Wrap-up ticket section, Variant A (docs/ticket-integration/prototype) ----
   Scoped to .cs-crm-wrapup: the live rail reuses the same widgets untouched. */
.cs-crm-wrapup .cs-crm-sec-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebedf3;
    margin-bottom: 10px;
}
.cs-crm-wrapup .cs-crm-sec-head-create,
.cs-crm-wrapup .cs-crm-sec-head-tickets
{
    margin-top: 22px;
}
.cs-crm-wrapup .cs-crm-sec-title
{
    font-size: 14px;
    font-weight: 600;
    color: #181c32;
    margin: 0;
}
.cs-crm-wrapup .cs-crm-eyebrow
{
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7e8299;
}
.cs-crm-wrapup .cs-crm-sec-actions
{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cs-crm-wrapup .cs-crm-sec-actions .btn
{
    margin: 0;
}
.cs-crm-wrapup .cs-crm-id-row
{
    padding: 8px 10px;
    margin-bottom: 2px;
    gap: 12px;
}
.cs-crm-wrapup .cs-crm-id-row:hover
{
    background: #f7f8fc;
}
.cs-crm-wrapup .cs-crm-avatar
{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    background: #e1e9ff;
    color: #3f6fe0;
    flex: none;
    line-height: 1;
}
.cs-crm-wrapup .cs-crm-avatar-company
{
    background: #fff4de;
    color: #b47300;
}
.cs-crm-wrapup .cs-crm-ext-name
{
    font-size: 13px;
    font-weight: 500;
    color: #181c32;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-crm-wrapup .cs-crm-ext-name-muted
{
    color: #7e8299;
    font-weight: 400;
}
.cs-crm-wrapup .cs-crm-ext-sub
{
    font-size: 11.5px;
    color: #7e8299;
}
.cs-crm-wrapup .cs-crm-btn-ghost,
.cs-crm-wrapup .cs-crm-btn-ghost.btn
{
    background: transparent;
    border: 1px solid #e4e6ef;
    color: #3f4254;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
}
.cs-crm-wrapup .cs-crm-btn-ghost:hover
{
    background: #f7f8fc;
}
.cs-crm-wrapup .cs-crm-pill
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    margin-left: auto;
}
.cs-crm-wrapup .cs-crm-pill-warn
{
    background: #fff4de;
    color: #b47300;
}
.cs-crm-spin
{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cs-crm-spin .9s linear infinite;
    vertical-align: -1px;
}
@keyframes cs-crm-spin
{
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce)
{
    .cs-crm-spin { animation: none; }
}
/* Tickets */
.cs-crm-wrapup .cs-crm-check
{
    font-size: 12.5px;
    color: #3f4254;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.cs-crm-wrapup .cs-crm-check input
{
    accent-color: #6993ff;
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
}
.cs-crm-wrapup .cs-crm-ticket-list
{
    gap: 6px;
}
.cs-crm-wrapup .cs-crm-ticket-row
{
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid #ebedf3;
}
.cs-crm-wrapup .cs-crm-ticket-row-selectable:hover
{
    background: #f7f8fc;
}
.cs-crm-wrapup .cs-crm-ticket-row-pending
{
    opacity: 1;
    border-color: #6993ff;
    background: #e1e9ff;
}
.cs-crm-wrapup .cs-crm-ticket-check
{
    font-size: 16px;
    width: 16px;
    line-height: 1;
    margin-right: 0 !important;
}
.cs-crm-wrapup .cs-crm-ticket-row-pending .cs-crm-ticket-check
{
    color: #6993ff !important;
}
.cs-crm-wrapup .cs-crm-ticket-sub
{
    font-size: 11.5px;
    color: #7e8299;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-crm-wrapup .cs-crm-ticket-row .cs-crm-mini-btn,
.cs-crm-wrapup .cs-crm-ticket-row .cs-crm-mini-btn.btn
{
    font-size: 12px !important;
    padding: 5px 10px !important;
    border-color: #e4e6ef !important;
    color: #3f4254 !important;
    background: transparent !important;
}
.cs-crm-wrapup .cs-crm-ticket-row .cs-crm-mini-btn:hover
{
    background: #f7f8fc !important;
    color: #3f4254 !important;
    border-color: #e4e6ef !important;
}
/* Create ticket: AI toolbar */
.cs-crm-wrapup .cs-crm-ticket-ai
{
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #ebedf3;
    border-radius: 8px;
    background: #f7f8fc;
    margin-bottom: 0 !important;
}
.cs-crm-wrapup .cs-crm-ticket-ai .btn,
.cs-crm-wrapup .cs-crm-ticket-ai .form-control
{
    margin: 0 !important;
}
.cs-crm-wrapup .cs-crm-ticket-ai-generate,
.cs-crm-wrapup .cs-crm-ticket-ai-generate.btn
{
    background: #6993ff;
    border-color: #6993ff;
    color: #ffffff;
    font-weight: 500;
}
.cs-crm-wrapup .cs-crm-ticket-ai-generate.btn:disabled
{
    opacity: .5;
}
.cs-crm-wrapup .cs-crm-ticket-ai-provider
{
    padding: 6px 30px 6px 10px;
    font-size: 12px;
    height: auto;
}
.cs-crm-wrapup .cs-crm-ai-spacer
{
    flex: 1 1 auto;
}
.cs-crm-wrapup .cs-crm-ticket-ai-sofar,
.cs-crm-wrapup .cs-crm-ticket-ai-sofar.btn
{
    background: transparent;
    border: 1px solid #e4e6ef;
    color: #3f4254;
    font-weight: 500;
}
.cs-crm-wrapup .cs-crm-ticket-ai-sofar.btn:hover
{
    background: #ffffff;
}
.cs-crm-wrapup .cs-crm-ticket-ai-caption
{
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7e8299;
    font-size: 11.5px;
    min-height: 0;
}
.cs-crm-wrapup .cs-crm-ticket-ai-caption:empty
{
    display: none;
}
/* Create ticket: fields */
.cs-crm-wrapup .cs-crm-ticket-fields
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin-top: 14px;
}
.cs-crm-wrapup .cs-crm-ticket-fields .form-group
{
    grid-column: 1 / -1;
    margin: 0 !important;
}
.cs-crm-wrapup .cs-crm-ticket-fields .cs-crm-ticket-field-select
{
    grid-column: auto;
}
.cs-crm-wrapup .cs-crm-ticket-label
{
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7e8299;
    margin-bottom: 6px;
}
.cs-crm-wrapup .cs-crm-ticket-fields textarea.form-control
{
    min-height: 96px;
    resize: vertical;
}
.cs-crm-wrapup .cs-crm-ticket-status
{
    margin-top: 10px;
}
/* Create form: its own time decision, with the amount it will log */
.cs-crm-wrapup .cs-crm-ticket-time-row
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 8px 10px;
    background: #f3f6f9;
    border-radius: 6px;
}
.cs-crm-wrapup .cs-crm-ticket-time-caption
{
    font-size: 12px;
    color: #7e8299;
    padding-left: 22px;
}
.cs-crm-wrapup .cs-crm-ticket-time-caption-on
{
    color: #1bc5bd;
}
/* History Save outcome, repeated on the rebuilt module */
.cs-crm-history-notice
{
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: #1bc5bd;
    margin: 0 0 8px;
}

/* Wrap-up identity creates: their own Save, separate from the wrap-up Save */
.cs-crm-wrapup .cs-crm-id-actions
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 14px;
}
.cs-crm-wrapup .cs-crm-id-status
{
    font-size: 12px;
    color: #7e8299;
}
.cs-crm-wrapup .cs-crm-id-status-warn
{
    color: #b47300;
}
.cs-crm-wrapup .cs-crm-id-status-error
{
    color: #f64e60;
}

/* Link existing contact / customer picker (issue 10): rail and wrap-up */
.cs-crm-link-picker
{
    margin: 6px 0 12px;
    padding: 10px 12px;
    border: 1px solid #e4e6ef;
    border-radius: 8px;
    background: #fff;
}
.cs-crm-link-search
{
    display: flex;
    align-items: center;
    gap: 8px;
}
.cs-crm-link-search-icon
{
    color: #b5b5c3;
    font-size: 12px;
}
.cs-crm-link-input
{
    flex: 1 1 auto;
    min-width: 0;
}
.cs-crm-link-status
{
    display: block;
    margin-top: 6px;
    color: #7e8299;
}
.cs-crm-link-results
{
    margin-top: 6px;
    max-height: 240px;
    overflow-y: auto;
}
.cs-crm-link-row
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-top: 1px solid #f1f1f4;
}
.cs-crm-link-row:first-child
{
    border-top: 0;
}
.cs-crm-link-row:hover
{
    background: #f8f9fc;
}
.cs-crm-link-labels
{
    flex: 1 1 auto;
    min-width: 0;
}
.cs-crm-link-avatar
{
    flex: 0 0 auto;
}
.cs-crm-link-btn
{
    flex: 0 0 auto;
}
.cs-crm-wrapup .cs-crm-link-picker
{
    margin: 0 0 14px;
}
.cs-crm-ticket-identity-hint
{
    display: block;
    margin: 4px 0 10px;
    color: #b47300;
    font-size: 12px;
}

/* Rail add / link hosts: integration chooser when several integrations offer the action */
.cs-crm-integration-chooser
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 8px;
}
.cs-crm-record-actions .cs-crm-id-status
{
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
    color: #7e8299;
}

.cs-crm-ai-set-hint
{
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    color: #3699ff;
}

.cs-crm-pill-current
{
    margin-left: auto;
    background: #e1f0ff;
    color: #3699ff;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
}
.cs-crm-use-this
{
    margin-left: auto;
}
.cs-crm-company-chooser-line
{
    display: flex;
    align-items: center;
}
.conv-crm-module
{
    margin: 8px 0 12px;
}
.conv-crm-module-section
{
    margin-bottom: 10px;
}

/* Descriptor-driven add forms: the legacy rows are replaced, even where the tray forces rows visible */
.cs-crm-tray .cs-crm-record-empty .card-body .row.cs-crm-legacy-hidden,
.cs-crm-tray .cs-crm-record-empty .card-body > .row.cs-crm-legacy-hidden,
.cs-crm-tray .cs-crm-record-row .row.cs-crm-legacy-hidden
{
    display: none !important;
}

/* Card header line: integration name left, the card's own controls right */
.cs-crm-record-head
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
}
.cs-crm-record-head .cs-crm-record-sub
{
    margin: 0;
}
.cs-crm-record-head .cs-crm-record-actions,
.cs-crm-record-head .cs-crm-pill-current,
.cs-crm-record-head .cs-crm-use-this
{
    margin-left: auto;
}