/* ==========================================================================
   HALO DESIGN SYSTEM — LAYER 3: SHELL & OVERLAYS
   Sidebar · Topbar · Workspace tabs · Page header · Modal · Drawer
   Alerts · Toasts · Empty states · Softphone
   Requires halo-tokens.css.
   ========================================================================== */

/* ==========================================================================
   1. APP SHELL
   ========================================================================== */

.halo-shell {
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 100dvh;
    background: var(--halo-canvas);
    color: var(--halo-text);
    font-family: var(--halo-font);
}
.halo-shell__main { display: flex; flex-direction: column; min-width: 0; }
.halo-shell__content { flex: 1; padding: var(--halo-6); min-width: 0; }
@media (max-width: 720px) { .halo-shell__content { padding: var(--halo-4); } }

/* --------------------------------------------------------------------------
   Sidebar — deliberately achromatic. It is the frame, not the picture: the
   coloured glass in the content area only reads as vivid against a quiet rail.
   -------------------------------------------------------------------------- */
.halo-sidebar {
    width: 244px; flex: none;
    display: flex; flex-direction: column;
    padding: var(--halo-3) var(--halo-2);
    background: var(--halo-sidebar-surface);
    border-right: 1px solid var(--halo-sidebar-border);
    color: var(--halo-sidebar-muted);
    overflow-y: auto;
}
.halo-sidebar__brand {
    display: flex; align-items: center; gap: var(--halo-3);
    padding: var(--halo-2) var(--halo-3) var(--halo-4);
    color: var(--halo-sidebar-text); font-size: var(--halo-text-title); font-weight: 600;
    letter-spacing: var(--halo-tracking-tight);
}
.halo-sidebar__mark {
    display: grid; place-items: center; width: 30px; height: 30px; flex: none;
    border-radius: 9px; color: var(--halo-sidebar-text);
    background: rgb(var(--halo-violet));
}
.halo-sidebar__group { margin-top: var(--halo-5); }
.halo-sidebar__group-label {
    padding: 0 var(--halo-3) var(--halo-2);
    font: 600 var(--halo-text-caption)/1 var(--halo-font);
    letter-spacing: var(--halo-tracking-wide);
    text-transform: uppercase;
    color: var(--halo-sidebar-muted);
}
.halo-nav-item {
    position: relative;
    display: flex; align-items: center; gap: var(--halo-3);
    width: 100%; height: 38px; padding-inline: var(--halo-3);
    border: 0; border-radius: var(--halo-radius-sm);
    background: transparent; color: inherit; cursor: pointer;
    font: 500 var(--halo-text-body)/1 var(--halo-font);
    text-decoration: none;
    transition: background-color 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-out);
}
.halo-nav-item:hover { background: rgb(255 255 255 / .06); color: var(--halo-sidebar-text); transform: none; }
.halo-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--halo-violet) / .80); }
.halo-nav-item[aria-current="page"] {
    background: rgb(255 255 255 / .10);
    color: var(--halo-sidebar-text); font-weight: 600;
    box-shadow: inset 3px 0 0 rgb(var(--halo-tone-brand));
}
.halo-nav-item[aria-current="page"]:hover { transform: none; }
.halo-nav-item__trail { margin-left: auto; font-size: var(--halo-text-caption); border: 1px solid var(--halo-sidebar-border); border-radius: var(--halo-radius-pill); padding: 3px 7px; color: var(--halo-sidebar-muted); }
.halo-sidebar--collapsed { width: 64px; }
.halo-sidebar--collapsed .halo-nav-item__text,
.halo-sidebar--collapsed .halo-sidebar__group-label,
.halo-sidebar--collapsed .halo-sidebar__brand span { display: none; }

/* --------------------------------------------------------------------------
   Topbar + workspace tabs (the open-record strip)
   -------------------------------------------------------------------------- */
.halo-topbar {
    display: flex; align-items: center; gap: var(--halo-3);
    height: 52px; padding-inline: var(--halo-4);
    background: color-mix(in srgb, var(--halo-canvas) 80%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--halo-hairline);
    position: sticky; top: 0; z-index: var(--halo-z-sticky);
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .halo-topbar { background: rgb(255 255 255 / .78); }
    :root[data-theme="dark"] .halo-topbar, .halo-dark .halo-topbar { background: rgb(21 20 29 / .78); }
}

/* Open-record navigation uses the same underline language as page tabs. */
.halo-worktabs { display:flex; align-items:center; gap:var(--halo-2); background:transparent; border-bottom:1px solid var(--halo-hairline); }
.halo-worktab { position:relative; display:inline-flex; align-items:center; min-height:38px; padding:0 var(--halo-1); border:0; border-radius:0; background:transparent; color:var(--halo-text-secondary); font:500 var(--halo-text-sm)/1 var(--halo-font); white-space:nowrap; }
.halo-worktab:hover { background:var(--halo-surface-hover); color:var(--halo-text); }
.halo-worktab[aria-selected="true"],.halo-worktab--active { color:var(--halo-text); }
.halo-worktab[aria-selected="true"]::after,.halo-worktab--active::after { content:""; position:absolute; bottom:0; inset-inline:var(--halo-2); height:2px; border-radius:2px; background:rgb(var(--halo-tone-brand)); animation:halo-tab-ink var(--halo-duration-3) var(--halo-ease-spring); }
.halo-worktab__age { font:500 var(--halo-text-caption)/1 var(--halo-font-mono); color:var(--halo-text-secondary); font-variant-numeric:tabular-nums; }
.halo-worktab__close { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:var(--halo-radius-xs); background:transparent; color:var(--halo-text-secondary); cursor:pointer; }
.halo-worktab__close:hover { background:var(--halo-tint-critical); color:var(--halo-ink-critical); }
.halo-worktabs__count { font:500 var(--halo-text-caption)/1 var(--halo-font-mono); color:var(--halo-text-secondary); font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */
.halo-page-header {
    display: block;
    padding-bottom: var(--halo-5);
    border-bottom: 1px solid var(--halo-hairline);
}
.halo-page-header__back {
    display: inline-flex; align-items: center; gap: var(--halo-2);
    margin-bottom: var(--halo-2); color: var(--halo-text-secondary);
    font: 600 var(--halo-text-sm)/1 var(--halo-font); text-decoration: none;
}
.halo-page-header__back:hover { color: var(--halo-ink-brand); }
.halo-page-header__back:focus-visible { outline: none; border-radius: var(--halo-radius-xs); box-shadow: var(--halo-focus-ring); }
.halo-page-header__content { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--halo-4); }
.halo-page-header__heading { min-width: 0; }
.halo-page-header__title { margin: 0; font-family: var(--halo-font-display); font-size: var(--halo-text-page); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.halo-page-header__subtitle { margin: var(--halo-1) 0 0; font-size: var(--halo-text-body); color: var(--halo-text-secondary); }
.halo-page-header__crumbs { font-size: var(--halo-text-sm); color: var(--halo-text-tertiary); margin-bottom: var(--halo-1); }
.halo-page-header__actions { margin-left: auto; display: flex; gap: var(--halo-2); flex: none; }
@media (max-width: 720px) {
    .halo-page-header__content { flex-direction: column; }
    .halo-page-header__actions { margin-left: 0; flex-wrap: wrap; }
}

/* ==========================================================================
   2. MODALS & DRAWERS
   Dialogs are SOLID. Only the scrim is blurred — a translucent form over a
   translucent table is where "glass everywhere" designs fall apart.
   ========================================================================== */

.halo-scrim {
    position: fixed; inset: 0; z-index: var(--halo-z-modal);
    background: var(--halo-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: grid; place-items: center;
    padding: var(--halo-6);
    animation: halo-fade var(--halo-duration-3) var(--halo-ease-out);
}
@keyframes halo-fade { from { opacity: 0; } }

/* macOS sheet: scale .92 → 1 with a short spring; opacity lands first. */
.halo-modal {
    width: min(560px, 100%);
    max-height: min(86dvh, 900px);
    display: flex; flex-direction: column;
    background: var(--halo-surface-raised);
    border: 1px solid var(--halo-hairline-strong);
    border-radius: var(--halo-radius-xl);
    box-shadow: var(--halo-shadow-3), inset 0 0 0 .5px rgb(255 255 255 / .06);
    overflow: hidden;
    animation: halo-modal-in var(--halo-duration-4) var(--halo-ease-spring),
               halo-fade var(--halo-duration-2) var(--halo-ease-out);
}
@keyframes halo-modal-in { from { transform: translateY(14px) scale(.92); } }
.halo-modal--lg { width: min(820px, 100%); }
.halo-modal--sm { width: min(420px, 100%); }

.halo-modal__header {
    display: flex; align-items: flex-start; gap: var(--halo-3);
    padding: var(--halo-5) var(--halo-5) var(--halo-4);
}
.halo-modal__title { margin: 0; font-family: var(--halo-font-display); font-size: var(--halo-text-title); font-weight: 800; letter-spacing: var(--halo-tracking-tight); }
.halo-modal__subtitle { margin: 2px 0 0; font-size: var(--halo-text-sm); color: var(--halo-text-secondary); }
.halo-modal__close { margin-left: auto; }
.halo-modal__body { padding: 0 var(--halo-5) var(--halo-5); overflow-y: auto; flex: 1; }
.halo-modal__footer {
    display: flex; align-items: center; gap: var(--halo-2);
    padding: var(--halo-4) var(--halo-5);
    border-top: 1px solid var(--halo-hairline);
    background: var(--halo-surface-sunken);
}
.halo-modal__footer > .halo-btn:first-child { margin-right: auto; }
.halo-modal__footer--end { justify-content: flex-end; }

/* Destructive confirm: the only dialog that carries a tint. */
.halo-modal--danger .halo-modal__header { background: rgb(var(--halo-tone-critical) / .06); }

/* MudBlazor adapter. Feature dialogs opt in with .halo-modal so legacy
   dialog chrome cannot leak into migrated modules. */
.mud-dialog.halo-modal {
    padding: 0;
    color: var(--halo-text);
    background: var(--halo-surface-raised);
    border: 1px solid var(--halo-hairline-strong);
    border-radius: var(--halo-radius-xl);
    box-shadow: var(--halo-shadow-3), inset 0 0 0 .5px rgb(255 255 255 / .06);
}

.mud-dialog.halo-modal > .mud-dialog-title {
    padding: var(--halo-5) var(--halo-5) var(--halo-4);
    color: var(--halo-text);
}

.mud-dialog.halo-modal > .mud-dialog-content {
    padding: 0 var(--halo-5) var(--halo-5);
    color: var(--halo-text);
}

.mud-dialog.halo-modal > .mud-dialog-actions {
    gap: var(--halo-2);
    padding: var(--halo-4) var(--halo-5);
    border-top: 1px solid var(--halo-hairline);
    background: var(--halo-surface-sunken);
}

/* User management: portal above the softphone, with persistent save actions. */
.mud-dialog.halo-modal.halo-user-editor {
    width: min(1120px, calc(100vw - 48px));
    max-width: 1120px;
    max-height: min(92dvh, 1080px);
}
.mud-dialog.halo-user-editor .mud-focus-trap,
.mud-dialog.halo-user-editor .mud-focus-trap-child-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.mud-dialog.halo-user-editor .mud-dialog-title,
.mud-dialog.halo-user-editor .mud-dialog-actions { flex: 0 0 auto; }
.mud-dialog.halo-user-editor .mud-dialog-actions {
    padding: var(--halo-4) var(--halo-6);
    border-top: 1px solid var(--halo-hairline);
    background: var(--halo-surface);
}
.mud-dialog.halo-user-editor .mud-dialog-content {
    padding: 0 var(--halo-6) var(--halo-6);
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (max-width: 700px) {
    .mud-dialog.halo-modal.halo-user-editor {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        margin: 8px;
    }
    .mud-dialog.halo-user-editor .mud-dialog-title,
    .mud-dialog.halo-user-editor .mud-dialog-content,
    .mud-dialog.halo-user-editor .mud-dialog-actions { padding: var(--halo-4); }
}

.mud-dialog.halo-modal .mud-input-control .mud-input,
.mud-dialog.halo-modal input,
.mud-dialog.halo-modal select,
.mud-dialog.halo-modal textarea {
    color: var(--halo-text);
    background: var(--halo-surface);
    border-radius: var(--halo-radius-md);
}

.mud-dialog.halo-modal .mud-input-control:focus-within .mud-input,
.mud-dialog.halo-modal input:focus-visible,
.mud-dialog.halo-modal select:focus-visible,
.mud-dialog.halo-modal textarea:focus-visible {
    outline: none;
    border-color: var(--halo-focus-color);
    box-shadow: var(--halo-focus-ring);
}

.halo-confirm__header { display: flex; align-items: center; gap: var(--halo-3); }
.halo-confirm__icon {
    --t1: var(--halo-tone-info); display: grid; place-items: center;
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--halo-radius-md);
    color: rgb(var(--t1)); background: rgb(var(--t1) / .10);
}
.halo-confirm__icon--warning { --t1: var(--halo-tone-warning); }
.halo-confirm__icon--critical { --t1: var(--halo-tone-critical); }
.halo-confirm__body { display: grid; gap: var(--halo-4); }
.halo-confirm__entity { padding: var(--halo-2) var(--halo-3); border-radius: var(--halo-radius-md); background: var(--halo-surface-sunken); color: var(--halo-text-secondary); font-size: var(--halo-text-sm); font-weight: 600; }
.halo-confirm__actions { display: flex; justify-content: flex-end; gap: var(--halo-2); width: 100%; }

.mud-dialog.halo-modal .halo-alert {
    color: var(--halo-text);
    background: rgb(var(--t1) / .08);
    border-color: rgb(var(--t1) / .22);
    box-shadow: inset 0 0 0 1px rgb(var(--t1) / .22);
}

.halo-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--halo-z-drawer);
    width: min(480px, 100%);
    display: flex; flex-direction: column;
    background: var(--halo-surface-raised);
    border-left: 1px solid var(--halo-hairline);
    box-shadow: var(--halo-shadow-4);
    animation: halo-drawer-in var(--halo-duration-3) var(--halo-ease-sheet);
}
@keyframes halo-drawer-in { from { transform: translateX(100%); } }
.halo-drawer--left { animation-name: halo-drawer-in-left; }
@keyframes halo-drawer-in-left { from { transform: translateX(-100%); } }
.halo-drawer--left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--halo-hairline); }

/* ==========================================================================
   3. ALERTS, BANNERS, TOASTS, INLINE VALIDATION
   One anatomy for all four: tint 8% + 1px ring + icon + title + body.
   ========================================================================== */

.halo-alert {
    --t1: var(--halo-tone-info);
    display: flex; gap: var(--halo-3);
    padding: var(--halo-3) var(--halo-4);
    border-radius: var(--halo-radius-md);
    background: rgb(var(--t1) / .08);
    box-shadow: inset 0 0 0 1px rgb(var(--t1) / .22);
    color: var(--halo-text);
}
.halo-alert__icon { flex: none; color: rgb(var(--t1)); margin-top: 1px; }
.halo-alert__title { font-weight: 600; font-size: var(--halo-text-body); }
.halo-alert__body { font-size: var(--halo-text-sm); color: var(--halo-text-secondary); margin-top: 2px; }
.halo-alert__actions { margin-left: auto; display: flex; gap: var(--halo-2); align-items: center; flex: none; }
.halo-alert--info     { --t1: var(--halo-tone-info); }
.halo-alert--success  { --t1: var(--halo-tone-success); }
.halo-alert--warning  { --t1: var(--halo-tone-warning); }
.halo-alert--critical { --t1: var(--halo-tone-critical); }
:root[data-theme="dark"] .halo-alert, .halo-dark .halo-alert { background: rgb(var(--t1) / .14); }

/* Full-bleed banner — impersonation, outage, tenant warnings. */
.halo-banner {
    --t1: var(--halo-tone-warning);
    display: flex; align-items: center; gap: var(--halo-3);
    padding: var(--halo-2) var(--halo-4);
    font-size: var(--halo-text-sm); font-weight: 500;
    background: rgb(var(--t1) / .14);
    border-bottom: 1px solid rgb(var(--t1) / .28);
    color: var(--halo-text);
}
.halo-banner--critical { --t1: var(--halo-tone-critical); }

.halo-toast-stack {
    position: fixed; right: var(--halo-5); bottom: var(--halo-5);
    z-index: var(--halo-z-toast);
    display: flex; flex-direction: column; gap: var(--halo-2);
    width: min(380px, calc(100vw - var(--halo-8)));
}
.halo-toast {
    --t1: var(--halo-tone-neutral);
    display: flex; align-items: flex-start; gap: var(--halo-3);
    padding: var(--halo-3) var(--halo-4);
    border-radius: 14px;
    background: var(--halo-surface-raised);
    border: 1px solid var(--halo-hairline-strong);
    border-left: 3px solid rgb(var(--t1));
    box-shadow: var(--halo-shadow-3);
    animation: halo-toast-in var(--halo-duration-4) var(--halo-ease-spring),
               halo-fade var(--halo-duration-2) var(--halo-ease-out);
}
@keyframes halo-toast-in { from { transform: translateY(16px) scale(.96); } }
.halo-toast--success  { --t1: var(--halo-tone-success); }
.halo-toast--critical { --t1: var(--halo-tone-critical); }
.halo-toast--warning  { --t1: var(--halo-tone-warning); }

/* ==========================================================================
   4. EMPTY / LOADING / ERROR STATES
   ========================================================================== */

.halo-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--halo-2); text-align: center;
    padding: var(--halo-12) var(--halo-6);
    border: 1px dashed var(--halo-hairline-strong);
    border-radius: var(--halo-radius-lg);
    color: var(--halo-text-secondary);
}
.halo-empty__icon {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--halo-radius-md);
    background: rgb(var(--halo-tone-brand) / .10);
    color: var(--halo-ink-brand);
    margin-bottom: var(--halo-2);
}
.halo-empty__title { font-family: var(--halo-font-display); font-size: var(--halo-text-title); font-weight: 700; letter-spacing: var(--halo-tracking-tight); color: var(--halo-text); }
.halo-empty__body { font-size: var(--halo-text-sm); max-width: 42ch; }
.halo-empty--inline { padding: var(--halo-8) var(--halo-4); border: 0; }

/* Split-pane placeholder ("select a conversation") — same anatomy, no border. */
.halo-placeholder {
    display: flex; align-items: center; gap: var(--halo-3);
    padding: var(--halo-6);
    color: var(--halo-text-secondary);
}

/* ==========================================================================
   5. SOFTPHONE
   The one persistently floating surface, and the one place where heavy glass
   is functional: it sits over live data and must stay readable while the page
   underneath scrolls. Theme-aware glass; semantic colour identifies call state.
   ========================================================================== */

.halo-softphone {
    --t1: var(--halo-tone-neutral);
    position: fixed; right: var(--halo-5); bottom: var(--halo-5);
    z-index: var(--halo-z-softphone);
    width: min(var(--halo-softphone-width, 500px), calc(100vw - 24px));
    display: flex; flex-direction: column; gap: var(--halo-4);
    padding: var(--halo-4);
    border-radius: var(--halo-radius-xl);
    color: var(--halo-text);
    background-color: color-mix(in srgb, rgb(var(--t1)) 18%, var(--halo-glass-base));
    -webkit-backdrop-filter: var(--halo-glass-blur);
    backdrop-filter: var(--halo-glass-blur);
    border: 1px solid rgb(var(--t1) / .40);
    box-shadow: inset 0 1px 0 var(--halo-glass-highlight), var(--halo-shadow-3);
    animation: halo-softphone-in var(--halo-duration-4) var(--halo-ease-spring), halo-fade var(--halo-duration-2) var(--halo-ease-out);
    transition: background-color var(--halo-duration-3) var(--halo-ease-out), border-color var(--halo-duration-3) var(--halo-ease-out);
}
@keyframes halo-softphone-in { from { transform: translateY(24px) scale(.96); } }
.halo-softphone--idle    { --t1: var(--halo-tone-neutral); }
.halo-softphone--ringing { --t1: var(--halo-tone-info); }
.halo-softphone--active  { --t1: var(--halo-tone-success); }
.halo-softphone--hold    { --t1: var(--halo-tone-warning); }
.halo-softphone--ending  { --t1: var(--halo-tone-critical); }

.halo-softphone__status {
    display: flex; align-items: center; gap: var(--halo-2);
    font: 700 var(--halo-text-caption)/1 var(--halo-font);
    letter-spacing: var(--halo-tracking-wide);
    text-transform: uppercase;
    color: var(--halo-text-secondary);
}
.halo-softphone__pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgb(var(--t1));
    box-shadow: 0 0 0 0 rgb(var(--t1) / .60);
}
.halo-softphone--ringing .halo-softphone__pulse,
.halo-softphone--active .halo-softphone__pulse { animation: halo-pulse 1.6s var(--halo-ease-out) infinite; }
@keyframes halo-pulse {
    70% { box-shadow: 0 0 0 8px rgb(var(--t1) / 0); }
    to { box-shadow: 0 0 0 0 rgb(var(--t1) / 0); }
}
@media (prefers-reduced-motion: reduce) { .halo-softphone__pulse { animation: none !important; } .halo-softphone { animation: none; } }

.halo-softphone__who { font-family: var(--halo-font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: var(--halo-tracking-tight); color: var(--halo-text); }
.halo-softphone__meta { font-size: var(--halo-text-sm); color: var(--halo-text-secondary); }
.halo-softphone__timer { font-family: var(--halo-font-mono); font-variant-numeric: tabular-nums; font-size: var(--halo-text-sm); font-weight: 500; color: var(--halo-text); }
.halo-softphone--active .halo-softphone__timer { color: var(--halo-ink-success); }

/* Controls stay opaque: the state lives in the frost, the icon and the border. */
.halo-softphone__controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--halo-2); }
.halo-softphone__btn {
    display: grid; place-items: center; gap: 4px;
    height: 52px; border: 1px solid var(--halo-hairline-strong); border-radius: var(--halo-radius-md);
    background: var(--halo-surface);
    color: var(--halo-text-secondary); cursor: pointer;
    font: 600 var(--halo-text-caption)/1 var(--halo-font);
    transition: background-color 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);
}
.halo-softphone__btn:hover { background: var(--halo-surface-hover); color: var(--halo-text); transform: scale(1.06); }
.halo-softphone__btn:active { transform: scale(.96); }
.halo-softphone__btn:focus-visible { outline: none; box-shadow: var(--halo-focus-ring); }
.halo-softphone__btn[aria-pressed="true"] { background: rgb(var(--halo-tone-warning) / .18); color: var(--halo-ink-warning); border-color: rgb(var(--halo-tone-warning) / .40); }
.halo-softphone__btn--end { background: var(--halo-action-critical); border-color: transparent; color: var(--halo-on-action); }
.halo-softphone__btn--end:hover { background: rgb(var(--halo-tone-critical)); color: var(--halo-on-action); }
.halo-softphone__btn--answer { background: var(--halo-action-success); border-color: transparent; color: var(--halo-on-action); }
.halo-softphone__btn--answer:hover { background: rgb(var(--halo-tone-success)); color: var(--halo-on-action); }

/* Collapsed pill — what agents see 95% of the day. */
.halo-softphone--dock {
    width: auto; flex-direction: row; align-items: center;
    gap: var(--halo-3); padding: var(--halo-2) var(--halo-3) var(--halo-2) var(--halo-4);
    border-radius: var(--halo-radius-pill);
}

/* Submission detail keeps navigation visible while long forms scroll. */
.mud-dialog.cp-submission-dialog { max-height: calc(100dvh - 32px); }
.mud-dialog.cp-submission-dialog > .mud-dialog-content { min-height: 0; overflow-y: auto; }
.mud-dialog.cp-submission-dialog > .mud-dialog-actions { flex-wrap: wrap; flex-shrink: 0; }

/* Appearance stays available to every signed-in role, independently of settings permissions. */
.halo-theme-picker { display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: var(--halo-2); row-gap: var(--halo-1); padding: var(--halo-3) var(--halo-2); border-top: 1px solid var(--halo-sidebar-border); color: var(--halo-sidebar-text); }
.halo-theme-picker__icon { grid-row: 1 / 3; font-size: 24px; }
.halo-theme-picker__label { font-size: var(--halo-text-sm); }
.halo-theme-picker__select { min-width: 0; width: 100%; min-height: var(--halo-control-lg); padding: var(--halo-2); border: 1px solid var(--halo-sidebar-border); border-radius: var(--halo-radius-sm); background: var(--halo-sidebar-surface); color: var(--halo-sidebar-text); color-scheme: dark; font: inherit; }
.halo-theme-picker__select:focus-visible { outline: 2px solid var(--halo-sidebar-text); outline-offset: 2px; }
@media (min-width: 768px) {
    .halo-sidebar:not(:hover):not(:focus-within) .halo-theme-picker { grid-template-columns: 24px 180px; }
    .halo-sidebar:not(:hover):not(:focus-within) :is(.halo-theme-picker__label, .halo-theme-picker__select) { opacity: 0; }
}

/* Aurora workspace chrome follows the selected light/dark theme. */
.halo-worktabs--chrome { background:var(--halo-surface-sunken); border:1px solid var(--halo-hairline); border-radius:var(--halo-radius-lg); padding:var(--halo-2); gap:var(--halo-3); }
.halo-worktabs--chrome .workspace-tabs__track { flex:1; gap:var(--halo-2); }
.halo-worktabs--chrome .halo-worktab { border-radius:var(--halo-radius-md); color:var(--halo-text-secondary); transition:background var(--halo-duration-2) var(--halo-ease-out), color var(--halo-duration-2); }
.halo-worktabs--chrome .halo-worktab:hover { background:var(--halo-surface-hover); color:var(--halo-text); }
.halo-worktabs--chrome .halo-worktab--active { background:var(--halo-surface); color:var(--halo-ink-brand); box-shadow:var(--halo-shadow-1), inset 0 0 0 1px var(--halo-hairline); }
.halo-worktabs--chrome .halo-worktab--active::after { content:none; }
.halo-worktabs--chrome .halo-worktab__age,.halo-worktabs--chrome .halo-worktabs__count,.halo-worktabs--chrome .halo-worktab__close { color:var(--halo-text-secondary); }
.halo-worktabs--chrome .halo-worktab__close:hover { background:var(--halo-tint-critical); color:var(--halo-ink-critical); }
.halo-channel-tabs { display:flex; flex-wrap:wrap; gap:var(--halo-2); margin-bottom:var(--halo-5); padding:var(--halo-2); background:var(--halo-surface-sunken); border:1px solid var(--halo-hairline); border-radius:var(--halo-radius-lg); }
.halo-channel-tabs a { padding:var(--halo-2) var(--halo-4); color:var(--halo-text-secondary); border-radius:var(--halo-radius-md); font-weight:600; text-decoration:none; }
.halo-channel-tabs a:hover { background:var(--halo-surface-hover); color:var(--halo-text); }
.halo-channel-tabs a.is-active { background:var(--halo-surface); color:var(--halo-ink-brand); box-shadow:var(--halo-shadow-1), inset 0 0 0 1px var(--halo-hairline); }
.halo-channel-tabs a:focus-visible { outline:2px solid var(--halo-ink-brand); outline-offset:2px; }

/* Account identity: a stable anchor in the navigation rail and compact header. */
.halo-account { display:flex; align-items:center; gap:10px; width:100%; min-width:0; min-height:48px; padding:6px; border:1px solid transparent; border-radius:var(--halo-radius-md); background:transparent; color:var(--halo-text-primary); text-align:left; cursor:pointer; font:inherit; }
.halo-account:hover { background:var(--halo-tint-brand); border-color:var(--halo-hairline); }
.halo-account:focus-visible { outline:2px solid var(--halo-focus-color); outline-offset:-2px; }
.halo-account--sidebar { color:var(--halo-sidebar-text); }
.halo-account--sidebar:hover { background:rgb(255 255 255 / .06); border-color:var(--halo-sidebar-border); }
.halo-account__avatar { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:50%; overflow:hidden; background:var(--halo-tint-brand); color:var(--halo-ink-brand); font-size:13px; font-weight:650; }
.halo-account--sidebar .halo-account__avatar { background:rgb(var(--halo-violet) / .28); color:var(--halo-sidebar-text); }
.halo-account__avatar img { width:100%; height:100%; object-fit:cover; }
.halo-account__copy { display:grid; gap:3px; min-width:0; flex:1; }
.halo-account__copy strong,.halo-account__copy > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.halo-account__copy strong { font-size:var(--halo-text-body); font-weight:600; line-height:1.3; }
.halo-account__copy > span { font-size:var(--halo-text-caption); color:var(--halo-text-secondary); line-height:1.3; }
.halo-account--sidebar .halo-account__copy > span { color:var(--halo-sidebar-muted); }
.halo-account__more { font-weight:700; font-size:20px; }
.account-profile { display:grid; gap:var(--halo-4); padding-block:var(--halo-2); }
.account-profile__identity { display:flex; align-items:center; gap:var(--halo-4); min-width:0; }
.account-profile__identity > div { min-width:0; overflow-wrap:anywhere; }
.account-profile__identity h3 { margin:0 0 4px; font-size:var(--halo-text-title); }
.account-profile__identity p { margin:0 0 6px; color:var(--halo-text-secondary); }
.account-profile__avatar { width:72px; height:72px; flex-basis:72px; font-size:24px; }
.account-profile__role,.account-profile__hint { font-size:var(--halo-text-caption); color:var(--halo-text-secondary); }
.account-profile__hint { margin:0; line-height:1.6; }
.account-profile__photo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--halo-2); }
.account-profile__upload { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid var(--halo-hairline-strong); border-radius:var(--halo-radius-md); color:var(--halo-text-primary); background:var(--halo-surface); cursor:pointer; }
.account-profile__upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.account-profile__upload:focus-within { outline:2px solid var(--halo-focus-color); outline-offset:2px; }
.account-profile__upload.is-busy { opacity:.6; }
.account-profile__appearance .halo-theme-picker { border-color:var(--halo-hairline); color:var(--halo-text-primary); padding-inline:0; }
.account-profile__appearance .halo-theme-picker__select { background:var(--halo-surface); color:var(--halo-text-primary); border-color:var(--halo-hairline-strong); color-scheme:normal; }
.account-profile__error { color:var(--halo-ink-critical); }
.account-profile__message { color:var(--halo-ink-success); }