/* Aurora communications. One shell, shared workspace tabs, opaque working surfaces. */
:root {
    --halo-softphone-width: 440px;
    --halo-softphone-inset: 20px;
    --halo-softphone-key-height: 48px;
    --halo-softphone-frost: color-mix(in srgb, var(--halo-surface) 88%, transparent);
}
.pcw-fab, .pcw-panel {
    position: fixed; bottom: var(--halo-softphone-inset); right: var(--halo-softphone-inset); z-index: 1300;
    color: var(--halo-text); font-family: var(--halo-font);
    border: 1px solid var(--halo-hairline-strong); border-radius: var(--halo-radius-xl);
    background: var(--halo-softphone-frost);
    backdrop-filter: var(--halo-glass-blur); -webkit-backdrop-filter: var(--halo-glass-blur);
    box-shadow: var(--halo-shadow-3);
}
.pcw-fab { display: flex; align-items: center; gap: var(--halo-3); padding: var(--halo-3); min-height: 56px; max-width: calc(100vw - 24px); cursor: pointer; text-align: left; }
.pcw-fab:hover { border-color: var(--halo-ink-brand); }
.pcw-fab__orb { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--halo-radius-md); background: var(--halo-tint-brand); color: var(--halo-ink-brand); flex-shrink: 0; }
.pcw-fab__icon { color: inherit; }
.pcw-fab__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcw-fab__label { font-size: var(--halo-text-body); font-weight: 600; }
.pcw-fab__subtext { font-size: var(--halo-text-sm); color: var(--halo-text-secondary); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcw-fab__chips { display: none; }
.pcw-fab__status-dot { position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--halo-action-success); border: 2px solid var(--halo-surface); }
.pcw-fab__badge { top: -6px; right: -6px; }
.pcw-panel { width: min(var(--halo-softphone-width), calc(100vw - 40px)); max-height: min(820px, calc(100dvh - 40px)); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: pcw-panel-enter var(--halo-duration-3) var(--halo-ease-spring), pcw-aurora-fade var(--halo-duration-2) var(--halo-ease-out); }
.pcw-panel__header { flex-shrink: 0; padding: var(--halo-4) var(--halo-4) 0; }
.pcw-panel__header-top { display: flex; align-items: center; gap: var(--halo-2); margin-bottom: var(--halo-3); }
.pcw-panel__title-wrap { display: flex; flex-direction: column; gap: var(--halo-1); flex: 1; min-width: 0; }
.pcw-panel__title { font: 600 var(--halo-text-title)/1.3 var(--halo-font-display); }
.pcw-panel__subtitle { font-size: var(--halo-text-sm); color: var(--halo-text-secondary); }
.pcw-panel__reconnecting { font-size: var(--halo-text-sm); color: var(--halo-ink-warning); }
.pcw-panel__minimize-btn { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border: 0; border-radius: var(--halo-radius-md); background: transparent; color: var(--halo-text-secondary); cursor: pointer; }
.pcw-panel__minimize-btn:hover { background: var(--halo-surface-hover); color: var(--halo-text); }
.pcw-panel__tabs { width: 100%; }
.pcw-panel__tabs .halo-worktab { flex: 1; justify-content: center; min-width: 0; padding-inline: var(--halo-2); gap: var(--halo-2); }
.pcw-panel__tab-icon-wrap { position: relative; display: inline-flex; }
.pcw-panel__tab-badge { top: -7px; right: -10px; }
.pcw-panel__content { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; background: var(--halo-surface); scrollbar-width: thin; scrollbar-color: var(--halo-hairline-strong) transparent; }
.pcw-panel__channel { padding: var(--halo-4); }
.pcw-panel__channel-error { display: flex; flex-direction: column; gap: var(--halo-2); padding: var(--halo-4); background: var(--halo-tint-warning); color: var(--halo-ink-warning); border-radius: var(--halo-radius-md); }
.pcw-panel__channel-error-title { font-weight: 600; }
.pcw-panel__channel-error-body, .pcw-panel__placeholder { font-size: var(--halo-text-sm); }
@keyframes pcw-panel-enter { from { transform: translateY(16px) scale(.98); } to { transform: none; } }
@keyframes pcw-aurora-fade { from { opacity: 0; } to { opacity: 1; } }
@media(max-width: 540px) { .pcw-panel { width: calc(100vw - 24px); right: 12px; bottom: 12px; max-height: calc(100dvh - 24px); } .pcw-panel__header { padding: var(--halo-3) var(--halo-3) 0; } .pcw-panel__channel { padding: var(--halo-3); } }

/* PcwPhoneChannel */

    .pcw-phone {
        display: flex;
        flex-direction: column;
        gap: 0;
        height: 100%;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       INCOMING CALL NOTIFICATION — ringing glow card
       ═══════════════════════════════════════════════════════════════════════ */

.pcw-phone__incoming {
    padding: 14px 16px;margin-bottom: 14px;background: color-mix(in srgb, rgb(var(--halo-tone-info)) 9%, var(--halo-surface));border: 1px solid rgb(var(--halo-tone-info) / .3);border-radius: var(--halo-radius-lg);
    animation: pcw-phone-incoming-enter var(--halo-duration-4) var(--halo-ease-spring) forwards, pcw-aurora-fade var(--halo-duration-2) var(--halo-ease-out) forwards; box-shadow: var(--halo-shadow-1);
}

    @keyframes pcw-phone-incoming-enter {
        from { transform: translateY(24px) scale(.96); }
        to   { transform: translateY(0) scale(1); }
    }

    @keyframes pcw-phone-incoming-breathe {
        0%, 100% { box-shadow: 0 6px 20px rgb(var(--halo-tone-info) / .14); }
        50%      { box-shadow: 0 10px 28px rgb(var(--halo-tone-info) / .24); }
    }

    .pcw-phone__incoming-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .pcw-phone__incoming-pulse {
        --pcw-pulse-tone: var(--halo-tone-info);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgb(var(--halo-tone-info));
        box-shadow: 0 0 0 0 rgb(var(--halo-tone-info) / .60);
        animation: pcw-phone-pulse 1.6s var(--halo-ease-out) infinite;
    }

    /* Aurora live pulse. The tone comes from the element (--pcw-pulse-tone)
       so one keyframe serves ringing (cyan), connecting (amber) and live (emerald). */
    @keyframes pcw-phone-pulse {
        0%   { box-shadow: 0 0 0 0 rgb(var(--pcw-pulse-tone, var(--halo-tone-success)) / .50); }
        70%  { box-shadow: 0 0 0 7px rgb(var(--pcw-pulse-tone, var(--halo-tone-success)) / 0); }
        100% { box-shadow: 0 0 0 7px rgb(var(--pcw-pulse-tone, var(--halo-tone-success)) / 0); }
    }

    .pcw-phone__incoming-label {
        font-size: 0.6875rem;
        font-weight: 700;
        color: var(--halo-ink-info);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .pcw-phone__incoming-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin-bottom: 12px;
    }

    .pcw-phone__incoming-number {
        font-family: var(--halo-font-mono);
        font-size: 1rem;
        font-weight: 700;
        color: var(--halo-text);
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
    }

    .pcw-phone__incoming-name {
        font-size: 0.8125rem;
        color: var(--halo-text-secondary);
        font-weight: 500;
    }

    .pcw-phone__incoming-actions {
        display: flex;
        gap: 10px;
    }

.pcw-phone__incoming-accept {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
        border: none;
        border-radius: 999px;
        font-size: 0.8125rem;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        transition: background var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring), box-shadow var(--halo-duration-1) var(--halo-ease-out), filter var(--halo-duration-1) var(--halo-ease-out);
    }
.pcw-phone__incoming-decline {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
        border: none;
        border-radius: 999px;
        font-size: 0.8125rem;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        transition: background var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring), box-shadow var(--halo-duration-1) var(--halo-ease-out), filter var(--halo-duration-1) var(--halo-ease-out);
    }

.pcw-phone__incoming-accept {
    background: var(--halo-action-success); color: var(--halo-on-action);

    border-radius: var(--halo-radius-md);
    box-shadow: none;
}


.pcw-phone__incoming-accept:hover {
    filter: brightness(1.05);transform: translateY(-1px);
    background: var(--halo-action-success); color: var(--halo-on-action); border-radius: var(--halo-radius-md); box-shadow: var(--halo-shadow-1);
}

    .pcw-phone__incoming-accept:active {
        transform: translateY(0) scale(0.97);
    }

.pcw-phone__incoming-decline {
    background: var(--halo-surface);border: 1px solid var(--halo-hairline);
    color: var(--halo-ink-critical); border-radius: var(--halo-radius-md); border-color: var(--halo-hairline-strong);
}

    .pcw-phone__incoming-decline:hover {
        background: color-mix(in srgb, rgb(var(--halo-tone-critical)) 10%, var(--halo-surface));
        color: var(--halo-ink-critical);
        border-color: rgb(var(--halo-tone-critical) / .20);
    }

    .pcw-phone__incoming-decline:active {
        transform: scale(0.97);
    }

    /* ═══════════════════════════════════════════════════════════════════════
       ACTIVE CALL VIEW — large centered display
       ═══════════════════════════════════════════════════════════════════════ */

.pcw-phone__active {
    display: flex;flex-direction: column;align-items: center;gap: 18px;padding: 20px 0 8px 0;animation: pcw-phone-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    background: color-mix(in srgb, rgb(var(--halo-tone-success)) 9%, var(--halo-surface)); border: 1px solid rgb(var(--halo-tone-success) / .25); border-radius: var(--halo-radius-lg); box-shadow: var(--halo-shadow-1);
}

    .pcw-phone__active--enter {
        animation: pcw-phone-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    @keyframes pcw-phone-fade {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .pcw-phone__active-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pcw-phone__direction-icon {
        color: var(--halo-ink-brand);
        font-size: 1rem !important;
    }

    .pcw-phone__active-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 0 16px;
        text-align: center;
    }

    /* Aurora: the person leads, the number supports. The number keeps the mono
       face; when no customer name is resolved it is the headline on its own. */

.pcw-phone__active-number {
    font-family: var(--halo-font-mono);font-weight: 600;font-variant-numeric: tabular-nums;letter-spacing: 0;
    color: var(--halo-text); font-size: var(--halo-text-page); overflow-wrap: anywhere;
}

.pcw-phone__active-number:has(+ .pcw-phone__active-customer) {
    order: 2;font-weight: 500;
    font-size: var(--halo-text-sm); color: var(--halo-text-secondary);
}

.pcw-phone__active-customer {
    order: 1;letter-spacing: var(--halo-tracking-tight);
    font-family: var(--halo-font-display); font-size: var(--halo-text-title); font-weight: 700; color: var(--halo-text); overflow-wrap: anywhere;
}

.pcw-phone__active-timer {
    display: flex;align-items: center;justify-content: center;padding: 4px 14px;border-radius: 999px;color: var(--halo-ink-success);font-family: var(--halo-font-mono);font-size: var(--halo-text-display);font-variant-numeric: tabular-nums;
    background: transparent; box-shadow: none;
}

.pcw-phone__elapsed { font: 600 var(--halo-text-display)/1.2 var(--halo-font-mono); color: inherit; font-variant-numeric: tabular-nums; }

    .pcw-phone__controls {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 6px;
        padding: 0 8px;
    }

.pcw-phone__control-btn {
    display: flex;align-items: center;justify-content: center;width: 42px;height: 42px;cursor: pointer;transition: background var(--halo-duration-1) var(--halo-ease-out), color var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring), box-shadow var(--halo-duration-1) var(--halo-ease-out), border-color var(--halo-duration-1) var(--halo-ease-out);
    background: var(--halo-surface); color: var(--halo-text); border: 1px solid var(--halo-hairline); border-radius: var(--halo-radius-md);

    box-shadow: none;
}


.pcw-phone__control-btn:hover { background: var(--halo-surface-hover); color: var(--halo-text); border-color: var(--halo-hairline-strong); }

    .pcw-phone__control-btn:active {
        transform: translateY(0) scale(0.93);
    }

    .pcw-phone__control-btn:focus-visible {
        outline: 2px solid var(--halo-ink-brand);
        outline-offset: 2px;
    }

.pcw-phone__control-btn--active {
    border-color: transparent;
     color: var(--halo-ink-brand);

    background: var(--halo-tint-brand);
    box-shadow: none;
}


.pcw-phone__control-btn--active:hover {
    filter: brightness(1.05);
    color: var(--halo-ink-brand); background: rgb(var(--halo-tone-brand) / .12); box-shadow: var(--halo-shadow-1);
}

    .pcw-phone__control-btn:disabled {
        cursor: wait;
        opacity: 0.58;
        transform: none;
        box-shadow: none;
    }

    .pcw-phone__recording-btn {
        color: var(--halo-ink-critical);
    }

.pcw-phone__recording-btn--active { background: var(--halo-action-critical); color: var(--halo-on-action); border-color: transparent; box-shadow: none; }

.pcw-phone__recording-status {
        display: inline-flex;
        align-items: center;
        align-self: center;
        gap: 7px;
        min-height: 28px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 650;
    }
.pcw-phone__recording-error {
        display: inline-flex;
        align-items: center;
        align-self: center;
        gap: 7px;
        min-height: 28px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 650;
    }

    .pcw-phone__recording-status {
        color: var(--halo-ink-critical);
        background: color-mix(in srgb, rgb(var(--halo-tone-critical)) 10%, var(--halo-surface));
        border: 1px solid color-mix(in srgb, rgb(var(--halo-tone-critical)) 10%, var(--halo-surface));
    }

.pcw-phone__recording-status--pending {
        color: var(--halo-text-secondary);
        background: var(--halo-surface-sunken);
        border-color: var(--halo-hairline-strong);
    }
.pcw-phone__recording-status--policy {
        color: var(--halo-text-secondary);
        background: var(--halo-surface-sunken);
        border-color: var(--halo-hairline-strong);
    }

    .pcw-phone__recording-status--pending .mud-icon-root {
        animation: pcw-recording-spin 900ms linear infinite;
    }

    .pcw-phone__recording-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--halo-action-critical);
        box-shadow: 0 0 0 4px rgb(var(--halo-tone-critical) / .12);
    }

    .pcw-phone__recording-error {
        align-self: stretch;
        border-radius: 10px;
        color: var(--halo-ink-critical);
        background: color-mix(in srgb, rgb(var(--halo-tone-critical)) 10%, var(--halo-surface));
        border: 1px solid color-mix(in srgb, rgb(var(--halo-tone-critical)) 10%, var(--halo-surface));
    }

    @keyframes pcw-recording-spin {
        to { transform: rotate(360deg); }
    }

.pcw-phone__control-btn--end {
    color: var(--halo-on-action);background: var(--halo-action-critical);border-color: transparent;animation: none;
    box-shadow: var(--halo-shadow-1);
}

.pcw-phone__control-btn--end:hover { background: var(--halo-action-critical); color: var(--halo-on-action); filter: brightness(.94); }

    .pcw-phone__handoff {
        align-self: stretch;
        display: grid;
        gap: 10px;
        margin: 0 10px;
        padding: 12px;
        border: 1px solid var(--halo-hairline);
        border-radius: 12px;
        background: var(--halo-surface);
        box-shadow: var(--halo-shadow-2);
        animation: pcw-phone-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    .pcw-phone__handoff-header {
        align-items: center;
        color: var(--halo-text);
        display: flex;
        font-size: 0.72rem;
        font-weight: 800;
        justify-content: space-between;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .pcw-phone__handoff-close {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--halo-text-secondary);
        cursor: pointer;
        display: inline-flex;
        height: 26px;
        justify-content: center;
        padding: 0;
        width: 26px;
    }

    .pcw-phone__handoff-close:hover {
        background: var(--halo-surface-sunken);
        color: var(--halo-text);
    }

    .pcw-phone__handoff-input .mud-input-filled {
        background: var(--halo-surface-sunken) !important;
        border-radius: 10px !important;
        min-height: 40px !important;
    }

    .pcw-phone__handoff-input input {
        font-size: 0.82rem;
        font-weight: 700;
    }

    .pcw-phone__handoff-directory {
        max-height: 150px;
        overflow-y: auto;
    }

    .pcw-phone__handoff-external {
        align-items: center;
        background: color-mix(in srgb, rgb(var(--halo-tone-info)) 10%, var(--halo-surface));
        border: 1px solid color-mix(in srgb, rgb(var(--halo-tone-info)) 10%, var(--halo-surface));
        border-radius: 10px;
        color: var(--halo-ink-info);
        display: grid;
        font-size: 0.76rem;
        font-weight: 700;
        gap: 8px;
        grid-template-columns: auto auto minmax(0, 1fr);
        min-height: 36px;
        padding: 8px 10px;
    }

    .pcw-phone__handoff-external strong {
        color: var(--halo-text);
        font-size: 0.8rem;
        overflow: hidden;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pcw-phone__handoff-actions {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pcw-phone__handoff-action {
        align-items: center;
        background: var(--halo-action-brand);
        border: none;
        border-radius: 10px;
        color: var(--halo-on-action);
        cursor: pointer;
        display: inline-flex;
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 800;
        justify-content: center;
        min-height: 38px;
        padding: 0 10px;
        transition: filter var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring), opacity var(--halo-duration-1) var(--halo-ease-out);
    }

    .pcw-phone__handoff-action--secondary {
        background: var(--halo-surface-inverse);
    }

    .pcw-phone__handoff-action:hover:not(:disabled) {
        filter: brightness(1.05);
        transform: translateY(-1px);
    }

    .pcw-phone__handoff-action:disabled {
        cursor: not-allowed;
        opacity: 0.48;
    }

    .pcw-phone__handoff-actions:has(.pcw-phone__handoff-action:only-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    @keyframes pcw-end-breathe {
        0%, 100% { box-shadow: 0 6px 14px rgb(var(--halo-tone-critical) / .35); }
        50%      { box-shadow: 0 10px 22px rgb(var(--halo-tone-critical) / .48); }
    }

    @media (prefers-reduced-motion: reduce) {

.pcw-phone__incoming { animation: none; }
.pcw-phone__active { animation: none; }
.pcw-phone__control-btn--end { animation: none; }

    }

/* PcwPhoneChannel */

    /* ═══════════════════════════════════════════════════════════════════════
       DIAL VIEW
       ═══════════════════════════════════════════════════════════════════════ */
    .pcw-phone__dial {
        display: flex;
        flex-direction: column;
        gap: 14px;
        animation: pcw-phone-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    .pcw-phone__dial--enter {
        animation: pcw-phone-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

.pcw-phone__workspace {
    display: grid;min-height: 0;
    grid-template-columns: minmax(0, 1fr); gap: var(--halo-3);
}

.pcw-phone__rail {
    align-items: center;background: var(--halo-surface-sunken);border: 1px solid var(--halo-hairline);display: flex;
    flex-direction: row; padding: var(--halo-1); gap: var(--halo-1); align-self: start; width: fit-content; border-radius: var(--halo-radius-md);
}

.pcw-phone__rail-btn {
    align-items: center;background: transparent;border: 0;border-radius: 10px;color: var(--halo-text-secondary);cursor: pointer;display: inline-flex;height: 30px;justify-content: center;transition: background var(--halo-duration-1) var(--halo-ease-out), color var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
    width: auto; min-height: 34px; gap: var(--halo-2); padding: 0 var(--halo-3); font: 600 var(--halo-text-sm)/1 var(--halo-font);
}

.pcw-phone__rail-btn:hover {
        background: var(--halo-surface);
        color: var(--halo-ink-brand);
        box-shadow: var(--halo-shadow-2);
    }

.pcw-phone__rail-btn--active {
    background: var(--halo-surface);
    color: var(--halo-ink-brand); box-shadow: var(--halo-shadow-1);
}

    .pcw-phone__rail-btn:active {
        transform: scale(0.95);
    }

    .pcw-phone__workspace-main {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
    }

.pcw-phone__routing {
    display: flex;flex-direction: column;border-radius: 12px;
    padding: 0; background: transparent; border: 0; gap: var(--halo-2);
}

.pcw-phone__routing-header {
    display: flex;align-items: center;justify-content: space-between;gap: 8px;font-weight: 800;letter-spacing: 0;
    color: var(--halo-text-secondary); text-transform: none; font-size: var(--halo-text-sm);
}

    .pcw-phone__routing-header strong {
        color: var(--halo-text);
        font-size: 0.6875rem;
        text-transform: none;
    }

.pcw-phone__routing-select-wrap {
    display: flex;align-items: center;gap: 6px;min-width: 0;color: var(--halo-text-secondary);padding: 0 8px;
    min-height: var(--halo-control-lg); background: var(--halo-surface); border: 1px solid var(--halo-hairline-strong); border-radius: var(--halo-radius-md);
}

.pcw-phone__routing-select {
    outline: none;font-size: 0.8125rem;font-weight: 700;
    width: 100%; min-width: 0; border: 0; padding: var(--halo-2); background: var(--halo-surface); color: var(--halo-text); font: inherit;
}

    .pcw-phone__routing-status {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        gap: 5px;
        padding: 4px;
        border-radius: 10px;
        background: var(--halo-surface-sunken);
    }

    .pcw-phone__routing-status-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        height: 28px;
        padding: 0 5px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--halo-text-secondary);
        font-size: 0.6875rem;
        font-weight: 800;
        cursor: pointer;
    }

    .pcw-phone__routing-status-btn--active {
        background: var(--halo-surface);
        box-shadow: var(--halo-shadow-1);
        color: var(--halo-text);
    }

    .pcw-phone__routing-status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--halo-text-tertiary);
        flex: 0 0 auto;
    }

    .pcw-phone__routing-status-dot--available { background: var(--halo-action-success); }
    .pcw-phone__routing-status-dot--busy { background: var(--halo-action-warning); }
    .pcw-phone__routing-status-dot--away { background: var(--halo-text-secondary); }
    .pcw-phone__routing-status-dot--offline { background: var(--halo-text-tertiary); }

    .pcw-phone__routing-empty {
        min-height: 34px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        border: 1px dashed var(--halo-hairline-strong);
        border-radius: 10px;
        color: var(--halo-text-secondary);
        font-size: 0.75rem;
        font-weight: 700;
        background: var(--halo-surface-sunken);
    }

    .pcw-phone__dial-input {
        display: flex;
        flex-direction: column;
    }

    .pcw-phone__dial-search {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .pcw-phone__dial-input input {
        font-family: var(--halo-font-mono);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--halo-text);
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em;
    }

    .pcw-phone__directory {
        border: 1px solid var(--halo-hairline-strong);
        border-radius: 12px;
        display: grid;
        gap: 4px;
        padding: 6px;
    }

    .pcw-phone__directory-item {
        align-items: center;
        background: var(--halo-surface);
        border: 0;
        border-radius: 10px;
        color: var(--halo-text);
        cursor: pointer;
        display: grid;
        gap: 10px;
        grid-template-columns: 30px minmax(0, 1fr) 24px;
        min-height: 42px;
        padding: 6px 8px;
        text-align: left;
        transition: background var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
    }

    .pcw-phone__directory-item:hover {
        background: color-mix(in srgb, rgb(var(--halo-tone-success)) 10%, var(--halo-surface));
        transform: translateY(-1px);
    }

    .pcw-phone__directory-avatar {
        align-items: center;
        background: color-mix(in srgb, rgb(var(--halo-tone-info)) 10%, var(--halo-surface));
        border-radius: 8px;
        color: var(--halo-ink-info);
        display: inline-flex;
        font-size: 0.72rem;
        font-weight: 800;
        height: 30px;
        justify-content: center;
        width: 30px;
    }

    .pcw-phone__directory-info {
        display: grid;
        min-width: 0;
    }

.pcw-phone__directory-info strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
.pcw-phone__directory-info small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pcw-phone__directory-info strong {
        font-size: 0.82rem;
    }

    .pcw-phone__directory-info small {
        color: var(--halo-text-secondary);
        font-size: 0.72rem;
        font-weight: 700;
    }

    .pcw-phone__dial-action {
        display: flex;
    }

.pcw-phone__dialpad {
    display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--halo-2);
}

.pcw-phone__dialpad-key {
    color: var(--halo-text);cursor: pointer;font-family: inherit;transition: background var(--halo-duration-1) var(--halo-ease-out), border-color var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
       background: var(--halo-surface); border: 1px solid var(--halo-hairline);

    height: var(--halo-softphone-key-height);
    min-height: var(--halo-softphone-key-height);
    border-radius: var(--halo-radius-md);
    box-shadow: none;
}


.pcw-phone__dialpad-key:hover {
    color: rgb(var(--halo-tone-brand));
    background: var(--halo-surface-hover); border-color: rgb(var(--halo-tone-brand) / .3);
}

    .pcw-phone__dialpad-key:active {
        transform: scale(0.97);
    }

.pcw-phone__dialpad-digit {
        display: block;
        text-align: center;
    }
.pcw-phone__dialpad-letters {
        display: block;
        text-align: center;
    }

.pcw-phone__dialpad-digit {
    font-family: var(--halo-font-mono);font-variant-numeric: tabular-nums;
    color: var(--halo-text); font-size: var(--halo-text-title); font-weight: 650;
}

.pcw-phone__dialpad-letters {
    min-height: 10px;font-weight: 700;text-transform: uppercase;
    color: var(--halo-text-secondary); font-size: var(--halo-text-caption); margin-left: 3px;
}

.pcw-phone__call-btn {
    width: 100%;
    height: 44px; border-radius: var(--halo-radius-md); box-shadow: var(--halo-shadow-1);
}

    .pcw-phone__error {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        background: color-mix(in srgb, rgb(var(--halo-tone-critical)) 10%, var(--halo-surface));
        border: 1px solid color-mix(in srgb, rgb(var(--halo-tone-critical)) 10%, var(--halo-surface));
        border-radius: 10px;
    }

    .pcw-phone__error-icon {
        color: var(--halo-ink-critical);
        font-size: 1rem !important;
        flex-shrink: 0;
    }

    .pcw-phone__error-text {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--halo-ink-critical);
        line-height: 1.4;
    }

    /* ─── Recent Calls ─── */
    .pcw-phone__recent {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 8px;
    }

    .pcw-phone__recent--panel {
        margin-top: 0;
    }

    .pcw-phone__recent-title {
        font-size: 0.6875rem;
        font-weight: 700;
        color: var(--halo-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0 4px;
    }

    .pcw-phone__recent-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .pcw-phone__recent-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 10px;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 12px;
        transition: background var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
        width: 100%;
        text-align: left;
        font-family: inherit;
    }

    .pcw-phone__recent-item:hover {
        background: var(--halo-surface-sunken);
    }

    .pcw-phone__recent-item:active {
        transform: scale(0.99);
    }

    .pcw-phone__recent-direction {
        color: var(--halo-ink-brand);
        font-size: 1.05rem !important;
        flex-shrink: 0;
        padding: 6px;
        background: color-mix(in srgb, rgb(var(--halo-tone-critical)) 10%, var(--halo-surface));
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .pcw-phone__recent-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        flex: 1;
    }

    .pcw-phone__recent-number {
        font-family: var(--halo-font-mono);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--halo-text);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pcw-phone__recent-disposition {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .pcw-phone__recent-disposition--success {
        background: rgb(var(--halo-tone-success));
    }

    .pcw-phone__recent-disposition--error {
        background: var(--halo-action-critical);
    }

    .pcw-phone__recent-disposition--warning {
        background: var(--halo-action-warning);
    }

    .pcw-phone__recent-disposition--neutral {
        background: var(--halo-text-tertiary);
    }

    .pcw-phone__recent-redial {
        align-items: center;
        background: color-mix(in srgb, rgb(var(--halo-tone-success)) 10%, var(--halo-surface));
        border-radius: 999px;
        color: var(--halo-ink-success);
        display: inline-flex;
        height: 28px;
        justify-content: center;
        width: 28px;
    }

    .pcw-phone__recent-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 0;
    }

    .pcw-phone__recent-empty--panel {
        background: var(--halo-surface-sunken);
        border: 1px dashed var(--halo-hairline-strong);
        border-radius: 12px;
        flex-direction: column;
        gap: 8px;
        min-height: 190px;
    }

    .pcw-phone__recent-empty-text {
        font-size: 0.8125rem;
        color: var(--halo-text-tertiary);
    }

    /* ═══════════════════════════════════════════════════════════════════════
       WEBRTC CONNECTION STATUS — compact pill
       ═══════════════════════════════════════════════════════════════════════ */

.pcw-phone__webrtc-status {
    display: flex;align-items: center;gap: 8px;font-size: 0.75rem;animation: pcw-phone-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    padding: var(--halo-3); border-radius: var(--halo-radius-md); margin-bottom: var(--halo-3);
}

.pcw-phone__webrtc-status--disconnected {
    background: var(--halo-surface-sunken); border: 1px solid var(--halo-hairline);
}

.pcw-phone__webrtc-status--connecting {
    background: rgb(var(--halo-tone-warning) / .10); border: 1px solid rgb(var(--halo-tone-warning) / .25);
}

.pcw-phone__webrtc-status--connected {
    border: 1px solid rgb(var(--halo-tone-success) / .28);
    background: rgb(var(--halo-tone-success) / .08);
}

    .pcw-phone__webrtc-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

.pcw-phone__webrtc-dot--off {
    background: var(--halo-action-neutral); box-shadow: none; animation: none;
}

    .pcw-phone__webrtc-dot--connecting {
        --pcw-pulse-tone: var(--halo-tone-warning);
        background: var(--halo-action-warning);
        animation: pcw-phone-pulse 1.6s var(--halo-ease-out) infinite;
    }

.pcw-phone__webrtc-dot--on {
    --pcw-pulse-tone: var(--halo-tone-success);background: rgb(var(--halo-tone-success));box-shadow: 0 0 0 0 rgb(var(--halo-tone-success) / .50);
    animation: none;
}

    .pcw-phone__webrtc-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--halo-text);
        flex: 1;
    }

.pcw-phone__webrtc-connect {
    font-size: 0.75rem;font-weight: 700;border: none;padding: 5px 14px;cursor: pointer;transition: transform var(--halo-duration-2) var(--halo-ease-spring), box-shadow var(--halo-duration-1) var(--halo-ease-out), filter var(--halo-duration-1) var(--halo-ease-out);font-family: inherit;
    min-height: 34px; padding-inline: var(--halo-4); border-radius: var(--halo-radius-md);  color: var(--halo-on-action); box-shadow: var(--halo-shadow-1);

    background: var(--halo-action-brand);
}


    .pcw-phone__webrtc-connect:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: var(--halo-shadow-1);
    }

    .pcw-phone__webrtc-connect:active {
        transform: translateY(0) scale(0.97);
    }

    .pcw-phone__status-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pcw-phone__device-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--halo-text-tertiary);
        cursor: pointer;
        transition: background var(--halo-duration-1) var(--halo-ease-out), color var(--halo-duration-1) var(--halo-ease-out);
        padding: 0;
    }

    .pcw-phone__device-btn:hover {
        background: var(--halo-surface-sunken);
        color: var(--halo-text);
    }

    /* ═══════════════════════════════════════════════════════════════════════
       AUDIO DEVICE SETTINGS
       ═══════════════════════════════════════════════════════════════════════ */

.pcw-phone__devices {
    padding: 10px;margin-bottom: 8px;display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: 8px;animation: pcw-phone-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    background: var(--halo-surface); border: 1px solid var(--halo-hairline); border-radius: var(--halo-radius-lg); box-shadow: var(--halo-shadow-1);
}

    .pcw-phone__devices-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .pcw-phone__devices-title {
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--halo-text);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .pcw-phone__device-empty {
        display: block;
        padding: 7px 8px;
        border-radius: 8px;
        background: var(--halo-surface);
        border: 1px solid var(--halo-hairline);
        color: var(--halo-text-secondary);
        font-size: 0.66rem;
        line-height: 1.35;
    }

    .pcw-phone__device-empty--notice {
        grid-column: 1 / -1;
        margin-bottom: 0;
        background: color-mix(in srgb, rgb(var(--halo-tone-critical)) 10%, var(--halo-surface));
        border-color: rgb(var(--halo-tone-critical) / .18);
        color: var(--halo-ink-critical);
    }

    .pcw-phone__devices-actions {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .pcw-phone__devices-action {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--halo-text-tertiary);
        cursor: pointer;
        padding: 0;
    }

    .pcw-phone__devices-action:hover {
        background: var(--halo-surface-sunken);
        color: var(--halo-text);
    }

    .pcw-phone__device-group {
        margin-bottom: 0;
        min-width: 0;
    }

    .pcw-phone__device-group:last-child {
        margin-bottom: 0;
    }

    .pcw-phone__device-label {
        display: block;
        font-size: 0.6875rem;
        font-weight: 500;
        color: var(--halo-text-tertiary);
        margin-bottom: 4px;
    }

    .pcw-phone__device-group .mud-input-control {
        margin-top: 0;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       DTMF KEYPAD — round softphone keys
       ═══════════════════════════════════════════════════════════════════════ */
    .pcw-phone__dtmf {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 14px 8px 6px 8px;
        animation: pcw-phone-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

.pcw-phone__dtmf-key {
    display: flex;align-items: center;justify-content: center;aspect-ratio: 1 / 1;max-height: 54px;cursor: pointer;transition: background var(--halo-duration-1) var(--halo-ease-out), color var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring), box-shadow var(--halo-duration-1) var(--halo-ease-out), border-color var(--halo-duration-1) var(--halo-ease-out);font-family: inherit;
    min-height: var(--halo-softphone-key-height); height: var(--halo-softphone-key-height); border-radius: var(--halo-radius-md); background: var(--halo-surface); border: 1px solid var(--halo-hairline); box-shadow: var(--halo-shadow-1);
}

    .pcw-phone__dtmf-key:hover {
        background: color-mix(in srgb, rgb(var(--halo-tone-success)) 10%, var(--halo-surface));
        border-color: rgb(var(--halo-tone-brand) / .22);
        box-shadow: var(--halo-shadow-1);
        transform: translateY(-1px);
    }

    .pcw-phone__dtmf-key:active {
        background: var(--halo-action-brand);
        border-color: transparent;
        color: var(--halo-on-action);
        transform: translateY(0) scale(0.93);
        box-shadow: 0 2px 8px rgb(var(--halo-tone-brand) / .32);
    }

    .pcw-phone__dtmf-key:focus-visible {
        outline: 2px solid var(--halo-ink-brand);
        outline-offset: 2px;
    }

    .pcw-phone__dtmf-digit {
        font-family: var(--halo-font-mono);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--halo-text);
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
    }

    .pcw-phone__dtmf-key:active .pcw-phone__dtmf-digit {
        color: var(--halo-on-action);
    }

/* PcwSmsChannel */

    .pcw-sms {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       CONVERSATION LIST VIEW
       ═══════════════════════════════════════════════════════════════════════ */
    .pcw-sms__list {
        display: flex;
        flex-direction: column;
        gap: 0;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        animation: pcw-sms-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    .pcw-sms__list--enter {
        animation: pcw-sms-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    @keyframes pcw-sms-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .pcw-sms__list-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 8px;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 10px;
        transition: background var(--halo-duration-1) var(--halo-ease-out);
        width: 100%;
        text-align: left;
    }

    .pcw-sms__list-item:hover {
        background: var(--halo-surface-sunken);
    }

    .pcw-sms__list-item-left {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        flex: 1;
    }

    .pcw-sms__list-item-number {
        font-family: var(--halo-font-mono);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--halo-text);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pcw-sms__list-item-preview {
        font-size: 0.75rem;
        color: var(--halo-text-tertiary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .pcw-sms__list-item-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        flex-shrink: 0;
    }

    .pcw-sms__unread-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--halo-action-info);
        flex-shrink: 0;
    }

    /* ─── Empty State ─── */
    .pcw-sms__empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 48px 24px;
    }

    .pcw-sms__empty-icon {
        color: var(--halo-text-tertiary);
        font-size: 2rem !important;
    }

    .pcw-sms__empty-text {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--halo-text-tertiary);
        text-align: center;
    }

/* PcwSmsChannel */

    /* ═══════════════════════════════════════════════════════════════════════
       THREAD VIEW
       ═══════════════════════════════════════════════════════════════════════ */
    .pcw-sms__thread {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        animation: pcw-sms-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    .pcw-sms__thread--enter {
        animation: pcw-sms-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    /* ─── Thread Header ─── */
    .pcw-sms__thread-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 8px;
        border-bottom: 1px solid var(--halo-hairline);
        flex-shrink: 0;
    }

    .pcw-sms__back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 8px;
        background: var(--halo-surface-sunken);
        color: var(--halo-text);
        cursor: pointer;
        transition: background var(--halo-duration-1) var(--halo-ease-out);
        flex-shrink: 0;
    }

    .pcw-sms__back-btn:hover {
        background: var(--halo-hairline);
    }

    .pcw-sms__thread-header-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .pcw-sms__thread-header-number {
        font-family: var(--halo-font-mono);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--halo-text);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pcw-sms__thread-header-customer {
        font-size: 0.6875rem;
        color: var(--halo-text-tertiary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ─── Messages ─── */
    .pcw-sms__messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        scroll-behavior: smooth;
    }

    /* ─── Compose Area ─── */
    .pcw-sms__compose {
        flex-shrink: 0;
        border-top: 1px solid var(--halo-hairline);
        padding: 10px 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .pcw-sms__compose-input {
        display: flex;
    }

    .pcw-sms__textarea {
        width: 100%;
        min-height: 36px;
        max-height: 96px;
        padding: 8px 12px;
        border: none;
        border-radius: 12px;
        background: var(--halo-surface-sunken);
        font-size: 0.8125rem;
        font-family: inherit;
        color: var(--halo-text);
        resize: none;
        outline: none;
        line-height: 1.45;
        transition: background var(--halo-duration-1) var(--halo-ease-out), box-shadow var(--halo-duration-1) var(--halo-ease-out);
    }

    .pcw-sms__textarea:focus {
        background: var(--halo-surface);
        box-shadow: 0 0 0 1.5px var(--halo-text);
    }

    .pcw-sms__textarea:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pcw-sms__textarea::placeholder {
        color: var(--halo-text-tertiary);
    }

    .pcw-sms__compose-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pcw-sms__char-count {
        font-family: var(--halo-font-mono);
        font-size: 0.625rem;
        color: var(--halo-text-tertiary);
        font-variant-numeric: tabular-nums;
    }

    .pcw-sms__char-count--over {
        color: var(--halo-ink-critical);
        font-weight: 600;
    }

    .pcw-sms__send-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: var(--halo-surface-inverse);
        color: var(--halo-text-inverse);
        cursor: pointer;
        transition: background var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
    }

    .pcw-sms__send-btn:hover:not(:disabled) {
        background: var(--halo-surface-inverse);
    }

    .pcw-sms__send-btn:active:not(:disabled) {
        transform: scale(0.94);
    }

    .pcw-sms__send-btn:disabled {
        background: var(--halo-hairline);
        color: var(--halo-text-tertiary);
        cursor: not-allowed;
    }

    .pcw-sms__validation-error {
        font-size: 0.6875rem;
        color: var(--halo-ink-critical);
        padding: 0 4px;
    }

/* PcwWebchatChannel */

    .pcw-webchat {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       EMPTY STATE — Webchat coming soon
       ═══════════════════════════════════════════════════════════════════════ */
    .pcw-webchat__empty {
        min-height: unset;
        padding: 48px 24px;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       CONVERSATION LIST VIEW
       ═══════════════════════════════════════════════════════════════════════ */
    .pcw-webchat__list {
        display: flex;
        flex-direction: column;
        gap: 0;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        animation: pcw-webchat-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    .pcw-webchat__list--enter {
        animation: pcw-webchat-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    @keyframes pcw-webchat-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .pcw-webchat__list-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 8px;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 10px;
        transition: background var(--halo-duration-1) var(--halo-ease-out);
        width: 100%;
        text-align: left;
    }

    .pcw-webchat__list-item:hover {
        background: var(--halo-surface-sunken);
    }

    .pcw-webchat__list-item--selected {
        background: var(--halo-surface-sunken);
        border-left: 3px solid var(--halo-ink-info);
    }

    .pcw-webchat__list-item--selected:hover {
        background: var(--halo-surface-sunken);
    }

    /* ─── Staggered fade-in ─── */
    .pcw-webchat__list-item--stagger {
        opacity: 0;
        /* Aurora "pop": spring on the transform, ease-out on the opacity. */
        animation: pcw-webchat-item-fade-in var(--halo-duration-4) var(--halo-ease-spring) forwards,
                   pcw-aurora-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    @keyframes pcw-webchat-item-fade-in {
        from { transform: translateY(8px) scale(.96); }
        to   { transform: translateY(0) scale(1); }
    }

    /* ─── Pop-in animation for newly assigned conversations ─── */
    .pcw-webchat__list-item--slide-in {
        animation: pcw-webchat-item-slide-in var(--halo-duration-4) var(--halo-ease-spring) forwards,
                   pcw-aurora-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    @keyframes pcw-webchat-item-slide-in {
        from { transform: translateY(8px) scale(.96); }
        to   { transform: translateY(0) scale(1); }
    }

    /* ─── Highlight animation for new assignment or new message on non-active conversation ─── */
    .pcw-webchat__list-item--highlight {
        animation: pcw-webchat-item-highlight var(--halo-duration-3) var(--halo-ease-out);
    }

    @keyframes pcw-webchat-item-highlight {
        0% { background-color: rgb(var(--halo-tone-pipeline) / .10); }
        100% { background-color: transparent; }
    }

    .pcw-webchat__list-item-left {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        flex: 1;
    }

    .pcw-webchat__list-item-name {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--halo-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pcw-webchat__list-item-preview {
        font-size: 0.75rem;
        color: var(--halo-text-tertiary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .pcw-webchat__typing-preview {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        color: var(--halo-ink-success);
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .pcw-webchat__typing-dots {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex-shrink: 0;
    }

    .pcw-webchat__typing-dot {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: var(--halo-action-success);
        animation: pcw-webchat-typing-pulse 900ms ease-in-out infinite;
    }

    .pcw-webchat__typing-dot:nth-child(2) {
        animation-delay: 150ms;
    }

    .pcw-webchat__typing-dot:nth-child(3) {
        animation-delay: 300ms;
    }

    @keyframes pcw-webchat-typing-pulse {
        0%, 80%, 100% {
            opacity: 0.35;
            transform: translateY(0);
        }
        40% {
            opacity: 1;
            transform: translateY(-2px);
        }
    }

    .pcw-webchat__list-item-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        flex-shrink: 0;
    }

    .pcw-webchat__unread-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--halo-action-info);
        flex-shrink: 0;
    }

    .pcw-webchat__list-item-left .halo-badge {
        align-self: flex-start;
        margin-top: 2px;
    }

/* PcwWebchatChannel */

    /* ═══════════════════════════════════════════════════════════════════════
       THREAD VIEW
       ═══════════════════════════════════════════════════════════════════════ */
    .pcw-webchat__thread {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        animation: pcw-webchat-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    .pcw-webchat__thread--enter {
        animation: pcw-webchat-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    /* ─── Thread Header ─── */
    .pcw-webchat__thread-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 8px;
        border-bottom: 1px solid var(--halo-hairline);
        flex-shrink: 0;
    }

    .pcw-webchat__back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 8px;
        background: var(--halo-surface-sunken);
        color: var(--halo-text);
        cursor: pointer;
        transition: background var(--halo-duration-1) var(--halo-ease-out);
        flex-shrink: 0;
    }

    .pcw-webchat__back-btn:hover {
        background: var(--halo-hairline);
    }

    .pcw-webchat__thread-header-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .pcw-webchat__thread-header-name {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--halo-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pcw-webchat__thread-header-info .halo-badge {
        align-self: flex-start;
    }

    /* ─── Reconnecting indicator ─── */
    .pcw-webchat__reconnecting {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.6875rem;
        color: var(--halo-ink-warning);
        font-weight: 500;
        line-height: 1;
    }

    .pcw-webchat__reconnecting-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--halo-action-warning);
        animation: pcw-reconnect-pulse 1.2s ease-in-out infinite;
        flex-shrink: 0;
    }

    @keyframes pcw-reconnect-pulse {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 1; }
    }

    /* ─── Messages ─── */
    .pcw-webchat__messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        scroll-behavior: smooth;
    }

    /* ─── Message fade-in animation ─── */
    .pcw-webchat__msg-fade-in {
        /* Chat bubble "pop" (Aurora §6.1): spring transform, ease-out opacity. */
        animation: pcw-msg-fade-in var(--halo-duration-4) var(--halo-ease-spring) forwards,
                   pcw-aurora-fade var(--halo-duration-2) var(--halo-ease-out) forwards;
    }

    @keyframes pcw-msg-fade-in {
        from { transform: translateY(8px) scale(.96); }
        to   { transform: translateY(0) scale(1); }
    }

    /* ─── Compose Area ─── */
    .pcw-webchat__typing-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 8px;
        border-top: 1px solid var(--halo-surface-sunken);
        color: var(--halo-ink-success);
        font-size: 0.75rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .pcw-webchat__compose {
        flex-shrink: 0;
        border-top: 1px solid var(--halo-hairline);
        padding: 10px 8px;
        display: flex;
        align-items: flex-end;
        gap: 8px;
    }

    .pcw-webchat__suggestions {
        display: grid;
        gap: 8px;
        padding: 10px 8px;
        border-top: 1px solid var(--halo-hairline);
        background: var(--halo-surface);
        flex-shrink: 0;
    }

    .pcw-webchat__suggestions-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: var(--halo-text);
        font-size: 0.72rem;
        font-weight: 850;
    }

.pcw-webchat__suggestions-head small {
        color: var(--halo-text-secondary);
        font-size: 0.68rem;
        font-weight: 700;
    }
.pcw-webchat__suggestions-loading {
        color: var(--halo-text-secondary);
        font-size: 0.68rem;
        font-weight: 700;
    }
.pcw-webchat__suggestions-error {
        color: var(--halo-text-secondary);
        font-size: 0.68rem;
        font-weight: 700;
    }

    .pcw-webchat__suggestions-error {
        color: var(--halo-ink-critical);
    }

    .pcw-webchat__suggestion {
        display: grid;
        gap: 3px;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--halo-hairline-strong);
        border-radius: 10px;
        background: var(--halo-surface);
        color: var(--halo-text);
        cursor: pointer;
        text-align: left;
    }

    .pcw-webchat__suggestion:hover {
        border-color: var(--halo-text-tertiary);
        background: var(--halo-surface-sunken);
    }

    .pcw-webchat__suggestion span {
        font-size: 0.7rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .pcw-webchat__suggestion small {
        color: var(--halo-text-secondary);
        font-size: 0.74rem;
        font-weight: 650;
        line-height: 1.35;
    }

    .pcw-webchat__compose-input {
        display: flex;
        flex: 1;
    }

    .pcw-webchat__textarea {
        width: 100%;
        min-height: 36px;
        max-height: 96px;
        padding: 8px 12px;
        border: none;
        border-radius: 12px;
        background: var(--halo-surface-sunken);
        font-size: 0.8125rem;
        font-family: inherit;
        color: var(--halo-text);
        resize: none;
        outline: none;
        line-height: 1.45;
        transition: background var(--halo-duration-1) var(--halo-ease-out), box-shadow var(--halo-duration-1) var(--halo-ease-out);
    }

    .pcw-webchat__textarea:focus {
        background: var(--halo-surface);
        box-shadow: 0 0 0 1.5px var(--halo-text);
    }

    .pcw-webchat__textarea:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pcw-webchat__textarea::placeholder {
        color: var(--halo-text-tertiary);
    }

    .pcw-webchat__compose-footer {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.pcw-webchat__send-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: var(--halo-surface-inverse);
        color: var(--halo-text-inverse);
        cursor: pointer;
        transition: background var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
        flex-shrink: 0;
    }
.pcw-webchat__ai-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: var(--halo-surface-inverse);
        color: var(--halo-text-inverse);
        cursor: pointer;
        transition: background var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
        flex-shrink: 0;
    }

    .pcw-webchat__ai-btn {
        background: var(--halo-surface);
        color: var(--halo-text);
        border: 1px solid var(--halo-hairline-strong);
    }

    .pcw-webchat__ai-btn:hover:not(:disabled) {
        background: var(--halo-surface-sunken);
    }

    .pcw-webchat__send-btn:hover:not(:disabled) {
        background: var(--halo-surface-inverse);
    }

    .pcw-webchat__send-btn:active:not(:disabled) {
        transform: scale(0.94);
    }

.pcw-webchat__send-btn:disabled {
        background: var(--halo-hairline);
        color: var(--halo-text-tertiary);
        cursor: not-allowed;
    }
.pcw-webchat__ai-btn:disabled {
        background: var(--halo-hairline);
        color: var(--halo-text-tertiary);
        cursor: not-allowed;
    }

    /* ─── Compose disabled state ─── */
    .pcw-webchat__compose--disabled {
        opacity: 0.6;
        pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {

.pcw-webchat__list-item--stagger { animation: none; opacity: 1; }
.pcw-webchat__list-item--slide-in { animation: none; opacity: 1; }
.pcw-webchat__list-item--highlight { animation: none; opacity: 1; }
.pcw-webchat__msg-fade-in { animation: none; opacity: 1; }
.pcw-webchat__typing-dot { animation: none; opacity: 1; }
.pcw-webchat__reconnecting-dot { animation: none; opacity: 1; }

    }

/* Shared channel controls and accessibility. */

.halo-communications .pcw-phone__call-btn:disabled { opacity: 1; color: var(--halo-text-tertiary); background: var(--halo-surface-sunken); box-shadow: none; }

.halo-communications .pcw-phone__webrtc-status--idle { background: var(--halo-surface-sunken); border: 1px solid var(--halo-hairline); }

.halo-communications .pcw-phone__webrtc-dot--idle { background: var(--halo-action-neutral); box-shadow: none; animation: none; }

.halo-communications .pcw-phone__permission-help {
    display: flex;
    align-items: flex-start;
    gap: var(--halo-2);
    margin: calc(var(--halo-2) * -1) 0 var(--halo-3);
    padding: var(--halo-3);
    border: 1px solid var(--halo-hairline-strong);
    border-radius: var(--halo-radius-md);
    background: var(--halo-surface-sunken);
    color: var(--halo-ink-critical);
    font-size: var(--halo-text-sm);
    line-height: 1.45;
}

.halo-communications .pcw-phone__active--hold { background: color-mix(in srgb, rgb(var(--halo-tone-warning)) 9%, var(--halo-surface)); border-color: rgb(var(--halo-tone-warning) / .3); }

.halo-communications .pcw-phone__active--hold .pcw-phone__active-timer { color: var(--halo-ink-warning); }

.halo-communications :is(input,textarea,select) { color-scheme: inherit; color: var(--halo-text); background-color: var(--halo-surface); }
.halo-communications :is(button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--halo-ink-brand); outline-offset: 2px; }
.halo-communications :is(.pcw-sms__compose,.pcw-webchat__compose) { background: var(--halo-surface); border-top: 1px solid var(--halo-hairline); padding: var(--halo-3); }

.pcw-fab__elapsed { color: var(--halo-ink-success); font-family: var(--halo-font-mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-transparency: reduce) { :root { --halo-softphone-frost: var(--halo-surface); } }
@supports not (backdrop-filter: blur(1px)) { :root { --halo-softphone-frost: var(--halo-surface); } }
@media (prefers-reduced-motion: reduce) {
    .halo-communications, .halo-communications * { animation: none !important; transition: none !important; }
}

/* Hidden channels stay mounted, but must never occupy layout or receive focus. */
.halo-communications [hidden] { display: none !important; }

.halo-communications :is(.pcw-sms,.pcw-webchat) { min-height: 360px; max-height: min(600px, calc(100dvh - 230px)); }
.pcw-widget-error { position: fixed; bottom: var(--halo-6); right: var(--halo-6); z-index: 1300; max-width: 380px; padding: var(--halo-5); border-radius: var(--halo-radius-lg); background: var(--halo-surface); color: var(--halo-text); box-shadow: var(--halo-shadow-3); }
.pcw-widget-error__title { color: var(--halo-ink-critical); font-weight: 600; }
.pcw-widget-error__body { color: var(--halo-text-secondary); font-size: var(--halo-text-sm); }
.halo-communications, .halo-communications *, .halo-communications *::before, .halo-communications *::after { box-sizing: border-box; }

.halo-communications { color-scheme: light; }
:root[data-theme="dark"] .halo-communications, .halo-dark .halo-communications { color-scheme: dark; }
.halo-communications :is(input, textarea, select) { color-scheme: inherit; }


.pcw-phone__webrtc-status--idle { background: var(--halo-surface-sunken); border: 1px solid var(--halo-hairline); }

.pcw-phone__webrtc-dot--idle { background: var(--halo-action-neutral); box-shadow: none; animation: none; }