/* ==========================================================================
   HALO BENTO — SOFTPHONE (Persistent Communication Widget)
   Dock pill bottom-right on every screen → 380px panel with Phone / SMS /
   Webchat. During a call the top of the phone becomes a solid "call stage"
   whose colour is the call state: blue ringing, green connected, yellow hold.
   ========================================================================== */
:root {
    --halo-softphone-width: 380px;
    --halo-softphone-inset: 20px;
    --halo-softphone-key-height: 56px;
}

/* --------------------------------------------------------------------------
   1. DOCK (collapsed)
   -------------------------------------------------------------------------- */
.pcw-dock {
    position: fixed; right: var(--halo-softphone-inset); bottom: var(--halo-softphone-inset);
    z-index: var(--halo-z-softphone);
    display: flex; align-items: center; gap: var(--halo-2);
    max-width: calc(100vw - 24px);
    padding: 6px;
    border-radius: var(--halo-radius-pill);
    background: var(--halo-surface-raised);
    border: 1px solid var(--halo-hairline);
    box-shadow: var(--halo-shadow-3);
    font-family: var(--halo-font);
    animation: pcw-rise var(--halo-duration-4) var(--halo-ease-spring);
    transition: background-color var(--halo-duration-3) var(--halo-ease-out), transform var(--halo-duration-4) var(--halo-ease-spring);
}
.pcw-dock:hover { transform: translateY(-2px); }
.pcw-dock--live { background: var(--halo-fill-green); border-color: transparent; }
.pcw-dock--offline .pcw-fab__label { color: var(--halo-text-secondary); }
@keyframes pcw-rise { from { opacity: 0; transform: translateY(16px) scale(.96); } }

.pcw-fab {
    position: relative;
    display: flex; align-items: center; gap: var(--halo-3);
    min-height: 48px; padding: 0 var(--halo-3) 0 0;
    border: 0; border-radius: var(--halo-radius-pill);
    background: transparent; color: var(--halo-text);
    font: inherit; text-align: left; cursor: pointer;
}
.pcw-fab:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.pcw-fab__orb {
    position: relative; display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--halo-fill-gray); color: var(--halo-on-fill);
}
.pcw-fab--online .pcw-fab__orb { background: var(--halo-fill-navy); }
.pcw-fab__icon { color: inherit; }
.pcw-fab__status-dot {
    position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%;
    background: var(--halo-fill-green); border: 2px solid var(--halo-surface-raised);
}
.pcw-fab__meta { display: grid; gap: 1px; min-width: 0; }
.pcw-fab__label { font-size: var(--halo-text-body); font-weight: 700; }
.pcw-fab__subtext { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--halo-text-caption); color: var(--halo-text-tertiary); }
.pcw-fab__elapsed { font-family: var(--halo-font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.pcw-fab__label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcw-fab__chips { display: none; }
.pcw-fab__badge { position: absolute; top: -4px; left: 30px; }

.pcw-dock--live .pcw-fab { color: var(--halo-on-fill); }
.pcw-dock--live .pcw-fab__orb { background: rgb(255 255 255 / .2); animation: pcw-ring 2s var(--halo-ease-out) infinite; }
.pcw-dock--live .pcw-fab__status-dot { display: none; }
.pcw-dock--live .pcw-fab__subtext { color: rgb(255 255 255 / .88); }
.pcw-dock--live .pcw-fab__elapsed { color: var(--halo-on-fill); }
@keyframes pcw-ring { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .5); } 100% { box-shadow: 0 0 0 12px rgb(255 255 255 / 0); } }
.pcw-dock__end {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--halo-fill-red); color: var(--halo-on-fill); cursor: pointer;
    transition: transform var(--halo-duration-2) var(--halo-ease-spring);
}
.pcw-dock__end:active { transform: scale(.9); }
.pcw-dock__end:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--halo-fill-green), 0 0 0 4px var(--halo-on-fill); }

/* --------------------------------------------------------------------------
   2. PANEL
   -------------------------------------------------------------------------- */
.pcw-panel {
    position: fixed; right: var(--halo-softphone-inset); bottom: var(--halo-softphone-inset);
    z-index: var(--halo-z-softphone);
    width: min(var(--halo-softphone-width), calc(100vw - 24px));
    max-height: min(820px, calc(100dvh - 40px));
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--halo-radius-2xl);
    background: var(--halo-surface-raised);
    border: 1px solid var(--halo-hairline);
    box-shadow: var(--halo-shadow-4);
    color: var(--halo-text); font-family: var(--halo-font);
    transform-origin: bottom right;
    animation: pcw-panel-in var(--halo-duration-4) var(--halo-ease-spring);
}
@keyframes pcw-panel-in { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.pcw-panel__header { flex-shrink: 0; padding: var(--halo-4) var(--halo-4) var(--halo-3); }
.pcw-panel__header-top { display: flex; align-items: center; gap: var(--halo-2); margin-bottom: var(--halo-3); }
.pcw-panel__title-wrap { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pcw-panel__title { font: 700 1.0625rem/1.2 var(--halo-font-display); letter-spacing: -0.02em; }
.pcw-panel__subtitle { font-size: var(--halo-text-caption); font-weight: 600; color: var(--halo-soft-green-ink); }
.pcw-panel__reconnecting { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--halo-radius-pill); background: var(--halo-soft-yellow); color: var(--halo-soft-yellow-ink); font-size: var(--halo-text-caption); font-weight: 600; }
.pcw-panel__reconnecting-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pcw-blink 1.2s steps(2) infinite; }
@keyframes pcw-blink { 50% { opacity: .3; } }
.pcw-panel__minimize-btn { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--halo-text-secondary); cursor: pointer; }
.pcw-panel__minimize-btn:hover { background: var(--halo-surface-hover); color: var(--halo-text); }

/* Channel tabs: a full-width segmented control. */
.pcw-panel__tabs { display: flex; gap: 2px; width: 100%; padding: 4px; border-radius: var(--halo-radius-pill); background: var(--halo-surface-sunken); }
.pcw-panel__tabs .halo-worktab { flex: 1; justify-content: center; min-width: 0; min-height: 34px; padding-inline: var(--halo-2); gap: 6px; }
.pcw-panel__tab-icon-wrap { position: relative; display: inline-flex; }
.pcw-panel__tab-badge { position: absolute; top: -7px; right: -10px; }
.pcw-panel__content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--halo-hairline-strong) transparent; }
.pcw-panel__channel { padding: 0 var(--halo-4) var(--halo-4); }
.pcw-panel__channel-error { display: grid; gap: var(--halo-1); padding: var(--halo-4); border-radius: var(--halo-radius-md); background: var(--halo-soft-yellow); color: var(--halo-soft-yellow-ink); }
.pcw-panel__channel-error-title { font-weight: 700; }
.pcw-panel__channel-error-body, .pcw-panel__placeholder { font-size: var(--halo-text-sm); }

/* --------------------------------------------------------------------------
   3. PHONE — audio line and devices
   One line that says whether calls can work, and the one action that fixes it.
   -------------------------------------------------------------------------- */
.pcw-phone { display: flex; flex-direction: column; gap: var(--halo-3); }

.pcw-audio {
    --audio-bg: var(--halo-soft-gray); --audio-ink: var(--halo-soft-gray-ink);
    display: flex; align-items: center; gap: var(--halo-2);
    min-height: 44px; padding: 6px 6px 6px 14px;
    border-radius: var(--halo-radius-md);
    background: var(--audio-bg); color: var(--audio-ink);
}
.pcw-audio--ok { --audio-bg: var(--halo-soft-green); --audio-ink: var(--halo-soft-green-ink); }
.pcw-audio--busy { --audio-bg: var(--halo-soft-blue); --audio-ink: var(--halo-soft-blue-ink); }
.pcw-audio--off { --audio-bg: var(--halo-soft-yellow); --audio-ink: var(--halo-soft-yellow-ink); }
.pcw-audio--blocked { --audio-bg: var(--halo-soft-red); --audio-ink: var(--halo-soft-red-ink); align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.pcw-audio__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.pcw-audio--blocked .pcw-audio__dot { margin-top: 6px; }
.pcw-audio--ok .pcw-audio__dot { animation: pcw-pulse 2s var(--halo-ease-out) infinite; }
.pcw-audio--busy .pcw-audio__dot { animation: pcw-blink 1s steps(2) infinite; }
@keyframes pcw-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.pcw-audio__text { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: var(--halo-text-sm); }
.pcw-audio__text small { font-size: var(--halo-text-caption); line-height: 1.4; opacity: .92; }
.pcw-audio__icon {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px;
    border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.pcw-audio__icon:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.pcw-phone__webrtc-connect {
    flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: var(--halo-radius-pill);
    background: var(--halo-surface); color: var(--halo-text);
    font: 700 var(--halo-text-caption)/1 var(--halo-font); cursor: pointer; box-shadow: var(--halo-shadow-1);
}

.pcw-devices { display: grid; gap: var(--halo-3); padding: var(--halo-3) var(--halo-4); border-radius: var(--halo-radius-lg); background: var(--halo-surface-sunken); }
.pcw-devices__head { display: flex; align-items: center; justify-content: space-between; }
.pcw-devices__actions { display: flex; gap: 2px; color: var(--halo-text-secondary); }
.pcw-devices__group { display: grid; gap: 6px; }
.pcw-devices__label { font-size: var(--halo-text-caption); font-weight: 600; color: var(--halo-text-tertiary); }
.pcw-devices__empty, .pcw-devices__note { margin: 0; font-size: var(--halo-text-sm); color: var(--halo-text-tertiary); }

/* --------------------------------------------------------------------------
   4. PHONE — call stage (incoming, calling, live, hold)
   The stage colour is the call state, readable from across the room.
   -------------------------------------------------------------------------- */
.pcw-stage {
    --stage: var(--halo-fill-navy); --on-stage: var(--halo-on-fill); --stage-glass: rgb(255 255 255 / .18);
    display: grid; justify-items: center; gap: var(--halo-3); text-align: center;
    padding: var(--halo-5) var(--halo-4);
    border-radius: var(--halo-radius-xl);
    background: var(--stage); color: var(--on-stage);
    transition: background-color var(--halo-duration-4) var(--halo-ease-spring), color var(--halo-duration-3) var(--halo-ease-out);
    animation: pcw-stage-in var(--halo-duration-4) var(--halo-ease-spring);
}
@keyframes pcw-stage-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.pcw-stage--ringing { --stage: var(--halo-fill-blue); padding-block: var(--halo-6) var(--halo-5); }
.pcw-stage--live { --stage: var(--halo-fill-green); }
.pcw-stage--hold { --stage: var(--halo-fill-yellow); --on-stage: var(--halo-on-fill-yellow); --stage-glass: rgb(14 46 74 / .1); }
.pcw-stage__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pcw-stage__tags .halo-badge { background: var(--stage-glass); color: var(--on-stage); box-shadow: none; }
.pcw-tag {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
    border-radius: var(--halo-radius-pill); background: var(--stage-glass, var(--halo-surface-sunken));
    font-size: var(--halo-text-caption); font-weight: 700;
}
.pcw-tag__pulse { width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: pcw-ring 1.6s var(--halo-ease-out) infinite; }
.pcw-tag--rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--halo-fill-red); box-shadow: 0 0 0 2px var(--halo-on-fill); animation: pcw-blink 1.4s steps(2) infinite; }
.pcw-stage__who { display: grid; justify-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.pcw-stage__avatar {
    display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px;
    border-radius: 50%; background: var(--stage-glass); color: var(--on-stage);
    font: 700 1.375rem/1 var(--halo-font-display); letter-spacing: -0.02em;
}
.pcw-stage__avatar--ringing { animation: pcw-ring 1.6s var(--halo-ease-out) infinite; }
.pcw-stage__name { max-width: 100%; font: 700 1.5rem/1.15 var(--halo-font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.pcw-stage__number { font-size: var(--halo-text-sm); font-weight: 500; opacity: .9; font-variant-numeric: tabular-nums; }
.pcw-stage__elapsed { font: 700 2.25rem/1 var(--halo-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: inherit; }
.pcw-stage__calling { font: 600 var(--halo-text-body)/1 var(--halo-font); opacity: .92; animation: pcw-blink 1.4s steps(2) infinite; }
.pcw-stage__answer { display: flex; justify-content: center; gap: var(--halo-10); margin-top: var(--halo-2); }
.pcw-answer { display: grid; justify-items: center; gap: 8px; font: 600 var(--halo-text-caption)/1 var(--halo-font); }
.pcw-round {
    display: grid; place-items: center; width: 64px; height: 64px;
    border: 0; border-radius: 50%; color: var(--halo-on-fill); cursor: pointer;
    transition: transform var(--halo-duration-2) var(--halo-ease-spring);
}
.pcw-round--accept { background: var(--halo-fill-green); animation: pcw-ring 1.6s var(--halo-ease-out) infinite; }
.pcw-round--decline { background: var(--halo-fill-red); }
.pcw-round:active { transform: scale(.92); }
.pcw-round:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--stage), 0 0 0 4px var(--on-stage); }

/* Controls: labelled buttons, a pressed toggle shows its state in colour and words. */
.pcw-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--halo-2); }
.pcw-ctl {
    display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 72px; padding: 8px 4px;
    border: 0; border-radius: var(--halo-radius-lg); background: var(--halo-surface-sunken); color: var(--halo-text);
    font: 600 var(--halo-text-caption)/1.1 var(--halo-font); cursor: pointer;
    transition: background-color var(--halo-duration-2) var(--halo-ease-out), color var(--halo-duration-2) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
}
.pcw-ctl:hover { background: var(--halo-surface-pressed); }
.pcw-ctl:active { transform: scale(.95); }
.pcw-ctl:disabled { opacity: .55; cursor: wait; transform: none; }
.pcw-ctl__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--halo-surface); }
.pcw-ctl__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcw-ctl.is-on { background: var(--halo-fill-navy); color: var(--halo-on-fill); }
.pcw-ctl.is-on .pcw-ctl__icon { background: rgb(255 255 255 / .18); }
.pcw-ctl.is-hold { background: var(--halo-fill-yellow); color: var(--halo-on-fill-yellow); }
.pcw-ctl.is-hold .pcw-ctl__icon { background: rgb(14 46 74 / .1); }
.pcw-ctl.is-rec { background: var(--halo-fill-red); color: var(--halo-on-fill); }
.pcw-ctl.is-rec .pcw-ctl__icon { background: rgb(255 255 255 / .18); }

.pcw-end {
    display: flex; align-items: center; justify-content: center; gap: var(--halo-2);
    width: 100%; min-height: 52px; margin-top: var(--halo-1);
    border: 0; border-radius: var(--halo-radius-pill); background: var(--halo-fill-red); color: var(--halo-on-fill);
    font: 700 var(--halo-text-body)/1 var(--halo-font); cursor: pointer;
    transition: transform var(--halo-duration-2) var(--halo-ease-spring), box-shadow var(--halo-duration-3) var(--halo-ease-spring);
}
.pcw-end:hover { box-shadow: 0 10px 22px -12px var(--halo-fill-red); }
.pcw-end:active { transform: scale(.97); }

.pcw-notes { animation: pcw-fade-up var(--halo-duration-3) var(--halo-ease-spring); }
.pcw-note, .pcw-error {
    display: flex; align-items: flex-start; gap: var(--halo-2); padding: 10px 12px;
    border-radius: var(--halo-radius-md); font-size: var(--halo-text-sm);
}
.pcw-note { background: var(--halo-soft-blue); color: var(--halo-soft-blue-ink); }
.pcw-error { background: var(--halo-soft-red); color: var(--halo-soft-red-ink); }
.pcw-spin { animation: pcw-spin 900ms linear infinite; }
@keyframes pcw-spin { to { transform: rotate(360deg); } }

/* Transfer / add person: replaces the controls, with a way back. */
.pcw-handoff { display: grid; gap: var(--halo-3); padding: var(--halo-3); border-radius: var(--halo-radius-lg); background: var(--halo-surface-sunken); animation: pcw-fade-up var(--halo-duration-3) var(--halo-ease-spring); }
.pcw-handoff__head { display: flex; align-items: center; gap: var(--halo-2); font: 700 var(--halo-text-body)/1 var(--halo-font-display); }
.pcw-handoff__external { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: var(--halo-radius-md); background: var(--halo-soft-blue); color: var(--halo-soft-blue-ink); font-size: var(--halo-text-caption); font-weight: 700; }
.pcw-handoff__external strong { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; color: var(--halo-text); font-size: var(--halo-text-sm); }
.pcw-handoff__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--halo-2); }
.pcw-handoff__actions:has(.pcw-pill:only-child) { grid-template-columns: minmax(0, 1fr); }

.pcw-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--halo-control-lg); padding: 0 var(--halo-4);
    border: 1px solid var(--halo-input-border); border-radius: var(--halo-radius-pill);
    background: var(--halo-surface); color: var(--halo-text);
    font: 700 var(--halo-text-sm)/1 var(--halo-font); cursor: pointer;
    transition: transform var(--halo-duration-2) var(--halo-ease-spring);
}
.pcw-pill:active:not(:disabled) { transform: scale(.96); }
.pcw-pill:disabled { opacity: .48; cursor: not-allowed; }
.pcw-pill--navy { background: var(--halo-fill-navy); border-color: transparent; color: var(--halo-on-fill); }
.pcw-pill--go { background: var(--halo-fill-green); border-color: transparent; color: var(--halo-on-fill); }
.pcw-pill--ghost { border-color: transparent; background: transparent; color: var(--halo-text-secondary); }

/* Keypads: dialing and in-call tones. */
.pcw-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--halo-2); animation: pcw-fade-up var(--halo-duration-3) var(--halo-ease-spring); }
.pcw-key {
    display: grid; place-items: center; align-content: center; height: var(--halo-softphone-key-height);
    border: 0; border-radius: var(--halo-radius-md); background: var(--halo-surface-sunken); color: var(--halo-text); cursor: pointer;
    transition: background-color var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
}
.pcw-key:hover { background: var(--halo-surface-pressed); }
.pcw-key:active { transform: scale(.94); }
.pcw-key__digit { font: 600 1.375rem/1 var(--halo-font-display); }
.pcw-key__letters { margin-top: 2px; font-size: 0.59375rem; font-weight: 700; letter-spacing: .12em; color: var(--halo-text-tertiary); }

/* --------------------------------------------------------------------------
   5. PHONE — ready: calling from, one smart field, recent calls first
   -------------------------------------------------------------------------- */
.pcw-ready { display: grid; gap: var(--halo-3); }
.pcw-ready--enter { animation: pcw-fade-up var(--halo-duration-3) var(--halo-ease-spring); }
@keyframes pcw-fade-up { from { opacity: 0; transform: translateY(8px); } }

.pcw-from {
    display: flex; align-items: center; gap: var(--halo-3); width: 100%; min-height: 52px; padding: 8px 12px 8px 14px;
    border: 0; border-radius: var(--halo-radius-lg); background: var(--halo-surface-sunken); color: var(--halo-text);
    text-align: left; cursor: pointer;
}
.pcw-from:hover { background: var(--halo-surface-pressed); }
.pcw-from__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--halo-fill-gray); }
.pcw-from__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pcw-from__text small { font-size: var(--halo-text-caption); color: var(--halo-text-tertiary); font-weight: 600; }
.pcw-from__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--halo-text-sm); }
.pcw-from__status { flex: none; padding: 4px 10px; border-radius: var(--halo-radius-pill); background: var(--halo-surface); font-size: var(--halo-text-caption); font-weight: 700; }
.pcw-from-sheet { display: grid; gap: var(--halo-2); padding: var(--halo-3); border-radius: var(--halo-radius-lg); border: 1px solid var(--halo-hairline); animation: pcw-fade-up var(--halo-duration-3) var(--halo-ease-spring); }
.pcw-select {
    width: 100%; min-height: var(--halo-control-md); padding: 0 14px;
    border: 1px solid var(--halo-input-border); border-radius: var(--halo-radius-pill);
    background: var(--halo-surface); color: var(--halo-text); font: 600 var(--halo-text-sm)/1 var(--halo-font);
}
.pcw-select:focus-visible { outline: none; border-color: var(--halo-focus-color); box-shadow: var(--halo-focus-ring-field); }
.pcw-phone__routing-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: var(--halo-radius-pill); background: var(--halo-surface-sunken); }
.pcw-phone__routing-status-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; border: 0; border-radius: var(--halo-radius-pill); background: transparent; color: var(--halo-text-tertiary); font: 600 var(--halo-text-caption)/1 var(--halo-font); cursor: pointer; }
.pcw-phone__routing-status-btn:hover { color: var(--halo-text); }
.pcw-phone__routing-status-btn.is-selected { background: var(--halo-surface); color: var(--halo-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06); }
.pcw-phone__routing-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--halo-fill-gray); }
.pcw-phone__routing-status-dot--available { background: var(--halo-fill-green); }
.pcw-phone__routing-status-dot--busy { background: var(--halo-fill-red); }
.pcw-phone__routing-status-dot--away { background: var(--halo-fill-yellow); }

.pcw-dial { position: relative; }
.pcw-number { display: flex; align-items: center; gap: var(--halo-2); }
.pcw-number > :first-child { flex: 1; min-width: 0; }
.pcw-number__keypad {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px;
    border: 0; border-radius: 50%; background: var(--halo-surface-sunken); color: var(--halo-text-secondary); cursor: pointer;
}
.pcw-number__keypad:hover { color: var(--halo-text); }
.pcw-number__keypad.is-on { background: var(--halo-fill-navy); color: var(--halo-on-fill); }

.pcw-call__btn {
    display: flex; align-items: center; justify-content: center; gap: var(--halo-2);
    width: 100%; min-height: 52px; padding: 0 var(--halo-4);
    border: 0; border-radius: var(--halo-radius-pill); background: var(--halo-fill-green); color: var(--halo-on-fill);
    font: 700 var(--halo-text-body)/1 var(--halo-font); cursor: pointer;
    transition: transform var(--halo-duration-2) var(--halo-ease-spring), box-shadow var(--halo-duration-3) var(--halo-ease-spring);
}
.pcw-call__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcw-call__btn:hover:not(:disabled) { box-shadow: 0 10px 22px -12px var(--halo-fill-green); }
.pcw-call__btn:active:not(:disabled) { transform: scale(.97); }
.pcw-call__btn:disabled { background: var(--halo-surface-sunken); color: var(--halo-text-tertiary); cursor: not-allowed; }

/* Rows: directory matches, transfer targets, recent calls. */
.pcw-list { display: grid; gap: 2px; }
.pcw-list--float {
    position: absolute; inset: calc(100% + 6px) 0 auto; z-index: 2; padding: 4px;
    border-radius: var(--halo-radius-lg); border: 1px solid var(--halo-hairline);
    background: var(--halo-surface-raised); box-shadow: var(--halo-shadow-3);
}
.pcw-row {
    display: flex; align-items: center; gap: var(--halo-3); width: 100%; min-height: 52px; padding: 6px 8px;
    border: 0; border-radius: var(--halo-radius-md); background: transparent; color: var(--halo-text); text-align: left; cursor: pointer;
}
.pcw-row:hover { background: var(--halo-surface-hover); }
.pcw-row__avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--halo-soft-navy); color: var(--halo-soft-navy-ink); font-size: var(--halo-text-caption); font-weight: 700; }
.pcw-row__dir { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--halo-soft-blue); color: var(--halo-soft-blue-ink); }
.pcw-row--missed .pcw-row__dir { background: var(--halo-soft-red); color: var(--halo-soft-red-ink); }
.pcw-row--missed .pcw-row__text small { color: var(--halo-ink-critical); font-weight: 600; }
.pcw-row__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pcw-row__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcw-row__text small { font-size: var(--halo-text-caption); color: var(--halo-text-tertiary); }
.pcw-row__call { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--halo-soft-green); color: var(--halo-soft-green-ink); opacity: 0; transition: opacity var(--halo-duration-1) var(--halo-ease-out); }
.pcw-row:hover .pcw-row__call, .pcw-row:focus-visible .pcw-row__call { opacity: 1; }
@media (hover: none) { .pcw-row__call { opacity: 1; } }
.pcw-row__end { color: var(--halo-text-tertiary); }

.pcw-recent { display: grid; gap: var(--halo-1); }
.pcw-recent__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font: 700 var(--halo-text-sm)/1 var(--halo-font-display); }
.pcw-recent__missed { padding: 3px 9px; border-radius: var(--halo-radius-pill); background: var(--halo-soft-red); color: var(--halo-soft-red-ink); font: 700 var(--halo-text-caption)/1.2 var(--halo-font); }
.pcw-recent__more { justify-self: center; border: 0; background: transparent; color: var(--halo-ink-info); font: 600 var(--halo-text-sm)/1 var(--halo-font); padding: 8px; cursor: pointer; }
.pcw-recent__empty { margin: 0; padding: var(--halo-5) var(--halo-3); text-align: center; color: var(--halo-text-tertiary); font-size: var(--halo-text-sm); }

/* --------------------------------------------------------------------------
   6. PHONE — wrap-up after a call
   -------------------------------------------------------------------------- */
.pcw-wrap { display: grid; gap: var(--halo-3); animation: pcw-stage-in var(--halo-duration-4) var(--halo-ease-spring); }
.pcw-wrap__head { display: flex; align-items: center; gap: var(--halo-3); }
.pcw-wrap__avatar { width: 48px; height: 48px; margin: 0; font-size: 1rem; background: var(--halo-soft-navy); color: var(--halo-soft-navy-ink); }
.pcw-wrap__title { display: grid; gap: 2px; min-width: 0; }
.pcw-wrap__eyebrow { font-size: var(--halo-text-caption); font-weight: 600; color: var(--halo-text-tertiary); }
.pcw-wrap__title h3 { margin: 0; font: 700 1.125rem/1.2 var(--halo-font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pcw-wrap__clock { display: flex; align-items: center; gap: var(--halo-2); padding: 8px 12px; border-radius: var(--halo-radius-md); background: var(--halo-soft-yellow); color: var(--halo-soft-yellow-ink); font-size: var(--halo-text-sm); font-weight: 600; }
.pcw-wrap__elapsed { font-variant-numeric: tabular-nums; font-weight: 700; color: inherit; }
.pcw-wrap__label { font-size: var(--halo-text-caption); font-weight: 700; color: var(--halo-text-secondary); }
.pcw-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--halo-2); }
.pcw-outcome {
    --tone-bg: var(--halo-fill-navy); --tone-ink: var(--halo-on-fill);
    display: flex; align-items: center; gap: var(--halo-2); min-height: 48px; padding: 0 var(--halo-3);
    border: 0; border-radius: var(--halo-radius-md); background: var(--halo-surface-sunken); color: var(--halo-text);
    font: 600 var(--halo-text-sm)/1 var(--halo-font); text-align: left; cursor: pointer;
    transition: background-color var(--halo-duration-2) var(--halo-ease-out), color var(--halo-duration-2) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
}
.pcw-outcome:hover { background: var(--halo-surface-pressed); }
.pcw-outcome:active { transform: scale(.97); }
.pcw-outcome[aria-checked="true"] { background: var(--tone-bg); color: var(--tone-ink); }
.pcw-outcome--green { --tone-bg: var(--halo-fill-green); }
.pcw-outcome--gray { --tone-bg: var(--halo-fill-gray); }
.pcw-outcome--blue { --tone-bg: var(--halo-fill-blue); }
.pcw-outcome--yellow { --tone-bg: var(--halo-fill-yellow); --tone-ink: var(--halo-on-fill-yellow); }
.pcw-outcome--navy { --tone-bg: var(--halo-fill-navy); }
.pcw-outcome--red { --tone-bg: var(--halo-fill-red); }
.pcw-wrap__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--halo-2); margin-top: var(--halo-1); }

/* --------------------------------------------------------------------------
   7. SMS & WEBCHAT
   -------------------------------------------------------------------------- */
.halo-communications :is(.pcw-sms, .pcw-webchat) { display: flex; flex-direction: column; min-height: 360px; max-height: min(600px, calc(100dvh - 230px)); }
:is(.pcw-sms__list, .pcw-webchat__list) { display: grid; gap: 2px; align-content: start; }
:is(.pcw-sms__list--enter, .pcw-webchat__list--enter, .pcw-sms__thread--enter, .pcw-webchat__thread--enter) { animation: pcw-fade-up var(--halo-duration-3) var(--halo-ease-spring); }
:is(.pcw-sms__list-item, .pcw-webchat__list-item) {
    display: flex; align-items: center; justify-content: space-between; gap: var(--halo-3); width: 100%;
    min-height: 60px; padding: 10px 12px;
    border: 0; border-radius: var(--halo-radius-md); background: transparent; color: var(--halo-text); text-align: left; cursor: pointer;
    transition: background-color var(--halo-duration-1) var(--halo-ease-out);
}
:is(.pcw-sms__list-item, .pcw-webchat__list-item):hover { background: var(--halo-surface-hover); }
.pcw-webchat__list-item--selected { background: var(--halo-soft-red); }
.pcw-webchat__list-item--highlight { background: var(--halo-soft-yellow); }
.pcw-webchat__list-item--stagger { animation: pcw-fade-up var(--halo-duration-3) var(--halo-ease-spring) both; }
:is(.pcw-sms__list-item-left, .pcw-webchat__list-item-left) { display: grid; gap: 3px; min-width: 0; justify-items: start; }
:is(.pcw-sms__list-item-number, .pcw-webchat__list-item-name) { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
:is(.pcw-sms__list-item-preview, .pcw-webchat__list-item-preview) { font-size: var(--halo-text-sm); color: var(--halo-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
:is(.pcw-sms__list-item-right, .pcw-webchat__list-item-right) { display: grid; justify-items: end; gap: 6px; flex: none; font-size: var(--halo-text-caption); color: var(--halo-text-tertiary); }
:is(.pcw-sms__unread-dot, .pcw-webchat__unread-dot) { width: 10px; height: 10px; border-radius: 50%; background: var(--halo-fill-red); }
.pcw-sms__empty { display: grid; justify-items: center; gap: var(--halo-2); padding: var(--halo-10) var(--halo-4); color: var(--halo-text-tertiary); }
.pcw-sms__empty-icon { box-sizing: content-box; padding: 14px; border-radius: 18px; background: var(--halo-soft-blue); color: var(--halo-soft-blue-ink); transform: rotate(-6deg); }
.pcw-sms__empty-text { font-size: var(--halo-text-sm); }

:is(.pcw-sms__thread, .pcw-webchat__thread) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
:is(.pcw-sms__thread-header, .pcw-webchat__thread-header) { display: flex; align-items: center; gap: var(--halo-2); padding: var(--halo-1) 0 var(--halo-3); border-bottom: 1px solid var(--halo-hairline); }
:is(.pcw-sms__back-btn, .pcw-webchat__back-btn) { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--halo-text-secondary); cursor: pointer; }
:is(.pcw-sms__back-btn, .pcw-webchat__back-btn):hover { background: var(--halo-surface-hover); color: var(--halo-text); }
:is(.pcw-sms__thread-header-info, .pcw-webchat__thread-header-info) { display: grid; gap: 2px; min-width: 0; justify-items: start; }
:is(.pcw-sms__thread-header-number, .pcw-webchat__thread-header-name) { font: 700 var(--halo-text-body)/1.2 var(--halo-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pcw-sms__thread-header-customer { font-size: var(--halo-text-caption); color: var(--halo-text-tertiary); }
.pcw-webchat__reconnecting { display: inline-flex; align-items: center; gap: 6px; font-size: var(--halo-text-caption); font-weight: 600; color: var(--halo-ink-warning); }
.pcw-webchat__reconnecting-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pcw-blink 1.2s steps(2) infinite; }
:is(.pcw-sms__messages, .pcw-webchat__messages) { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--halo-2); padding: var(--halo-3) 0; }
.pcw-webchat__msg-fade-in { animation: pcw-fade-up var(--halo-duration-3) var(--halo-ease-spring); }

.pcw-webchat__typing-bar, .pcw-webchat__typing-preview { display: inline-flex; align-items: center; gap: 8px; font-size: var(--halo-text-caption); color: var(--halo-text-tertiary); }
.pcw-webchat__typing-bar { padding: 0 0 var(--halo-2); }
.pcw-webchat__typing-dots { display: inline-flex; gap: 3px; }
.pcw-webchat__typing-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pcw-typing 1s var(--halo-ease-out) infinite; }
.pcw-webchat__typing-dot:nth-child(2) { animation-delay: .15s; }
.pcw-webchat__typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes pcw-typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.pcw-webchat__suggestions { display: grid; gap: 6px; padding: 0 0 var(--halo-2); }
.pcw-webchat__suggestions-head { display: flex; align-items: center; gap: 6px; font-size: var(--halo-text-caption); font-weight: 700; color: var(--halo-ink-critical); }
.pcw-webchat__suggestions-head small { color: var(--halo-text-tertiary); font-weight: 500; }
.pcw-webchat__suggestions-loading { font-size: var(--halo-text-sm); color: var(--halo-text-tertiary); }
.pcw-webchat__suggestions-error { padding: 8px 12px; border-radius: var(--halo-radius-md); background: var(--halo-soft-red); color: var(--halo-soft-red-ink); font-size: var(--halo-text-sm); }
.pcw-webchat__suggestion { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--halo-input-border); border-radius: var(--halo-radius-md); background: var(--halo-surface); color: var(--halo-text); text-align: left; cursor: pointer; }
.pcw-webchat__suggestion:hover { background: var(--halo-surface-hover); }
.pcw-webchat__suggestion span { font-weight: 600; font-size: var(--halo-text-sm); }
.pcw-webchat__suggestion small { font-size: var(--halo-text-caption); color: var(--halo-text-secondary); }

:is(.pcw-sms__compose, .pcw-webchat__compose) { display: flex; align-items: flex-end; gap: var(--halo-2); flex-wrap: wrap; padding: 6px 6px 6px 16px; border-radius: 24px; background: var(--halo-surface-sunken); }
.pcw-webchat__compose--disabled { opacity: .6; }
:is(.pcw-sms__compose-input, .pcw-webchat__compose-input) { flex: 1; min-width: 0; display: flex; }
:is(.pcw-sms__textarea, .pcw-webchat__textarea) { flex: 1; min-height: 36px; max-height: 140px; padding: 9px 0; border: 0; resize: none; background: transparent; color: var(--halo-text); font: 400 var(--halo-text-body)/1.4 var(--halo-font); outline: none; }
:is(.pcw-sms__textarea, .pcw-webchat__textarea)::placeholder { color: var(--halo-text-tertiary); }
:is(.pcw-sms__compose-footer, .pcw-webchat__compose-footer) { display: flex; align-items: center; gap: 6px; }
.pcw-sms__char-count { font-size: var(--halo-text-caption); color: var(--halo-text-tertiary); font-variant-numeric: tabular-nums; }
.pcw-sms__char-count--over { color: var(--halo-ink-critical); font-weight: 700; }
:is(.pcw-sms__send-btn, .pcw-webchat__send-btn) { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--halo-fill-red); color: var(--halo-on-fill); cursor: pointer; transition: transform var(--halo-duration-2) var(--halo-ease-spring); }
:is(.pcw-sms__send-btn, .pcw-webchat__send-btn):active:not(:disabled) { transform: scale(.9); }
:is(.pcw-sms__send-btn, .pcw-webchat__send-btn):disabled { background: var(--halo-surface-pressed); color: var(--halo-text-tertiary); cursor: not-allowed; }
.pcw-webchat__ai-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--halo-surface); color: var(--halo-ink-critical); cursor: pointer; }
.pcw-webchat__ai-btn:disabled { color: var(--halo-text-tertiary); cursor: not-allowed; }
.pcw-sms__validation-error { flex-basis: 100%; padding: 0 0 4px; font-size: var(--halo-text-caption); font-weight: 600; color: var(--halo-ink-critical); }
.pcw-webchat__empty { padding-block: var(--halo-8); }

/* --------------------------------------------------------------------------
   8. SHARED
   -------------------------------------------------------------------------- */
.pcw-widget-error {
    position: fixed; right: var(--halo-softphone-inset); bottom: var(--halo-softphone-inset); z-index: var(--halo-z-softphone);
    display: grid; gap: var(--halo-2); max-width: 380px; padding: var(--halo-5);
    border-radius: var(--halo-radius-xl); background: var(--halo-surface-raised); color: var(--halo-text); box-shadow: var(--halo-shadow-4);
}
.pcw-widget-error__title { margin: 0; color: var(--halo-ink-critical); font-weight: 700; }
.pcw-widget-error__body { margin: 0; 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; color: var(--halo-text); }
.halo-communications :is(button, input, select, textarea, summary):focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
/* Hidden channels stay mounted, but must never occupy layout or receive focus. */
.halo-communications [hidden] { display: none !important; }

@media (max-width: 540px) {
    .pcw-panel { right: 12px; bottom: 12px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
    .pcw-dock { right: 12px; bottom: 12px; }
    .pcw-panel__header { padding: var(--halo-3) var(--halo-3) var(--halo-2); }
    .pcw-panel__channel { padding: 0 var(--halo-3) var(--halo-3); }
}
@media (prefers-reduced-motion: reduce) {
    .pcw-dock, .pcw-panel, .halo-communications, .halo-communications * { animation: none !important; transition-duration: 1ms !important; }
}