.supervisor-shell {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .supervisor-overview {
        display: flex;
        flex-direction: column;
        gap: 14px;
        /* Agent Status + Live Calls share this height so the two panels stay
           symmetric below the pulse band. */
        --supervisor-panel-height: max(400px, calc(100vh - 1060px));
    }

    @media (max-width: 960px) {
        .supervisor-overview {
            --supervisor-panel-height: 420px;
        }
    }

    /* ── Header actions ── */
    .supervisor-overview__live-status {
        display: inline-flex;
        align-items: center;
        gap: 12px;
    }

    .supervisor-overview__updated {
        font-size: var(--halo-text-caption);
        font-weight: 600;
        color: var(--halo-text-tertiary);
        font-family: var(--halo-font-mono);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }





    /* ── Queue scope bar: one queue at a time, picked from the user's own queues ── */
    .slo-queuebar {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 10px 14px;
        border: 1px solid var(--halo-hairline);
        border-radius: var(--halo-radius-lg);
        background: var(--halo-surface);
        box-shadow: 0 6px 18px rgb(var(--halo-tone-brand) / 0.07);
        animation: slo-panel-in var(--halo-duration-3) var(--halo-ease-out) both;
    }

    .slo-queuebar__pick {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
    }

    .slo-queuebar__dot {
        flex-shrink: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .slo-queuebar__dot--healthy { background: var(--halo-ink-success); }
    .slo-queuebar__dot--warning { background: var(--halo-ink-warning); }
    .slo-queuebar__dot--critical { background: var(--halo-ink-critical); animation: slo-queuebar-pulse 1.6s var(--halo-ease-out) infinite; }
    .slo-queuebar__dot--empty { background: var(--halo-text-tertiary); }

    .slo-queuebar__select { min-width: 230px; }





    .slo-queuebar__stats {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .slo-queuebar__stat {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: var(--halo-text-sm);
        font-weight: 700;
        color: var(--halo-text-secondary);
        font-family: var(--halo-font-mono);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .slo-queuebar__stat--alert { color: var(--halo-ink-critical); }

    .slo-queuebar__statdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .slo-queuebar__statdot--green { background: var(--halo-ink-success); }
    .slo-queuebar__statdot--navy { background: var(--halo-fill-navy); }
    .slo-queuebar__statdot--red { background: var(--halo-ink-critical); }

    .slo-queuebar__scope {
        margin-left: auto;
        font-size: var(--halo-text-caption);
        font-weight: 650;
        color: var(--halo-text-tertiary);
        white-space: nowrap;
    }

    @keyframes slo-queuebar-pulse {
        0% { box-shadow: 0 0 0 0 rgb(var(--halo-tone-critical) / 0.45); }
        70%, 100% { box-shadow: 0 0 0 7px transparent; }
    }

    /* ── Attention center ── */
    .slo-allclear {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        align-self: flex-start;
        padding: 7px 14px;
        border: 1px solid rgb(var(--halo-tone-success) / 0.18);
        border-radius: var(--halo-radius-pill);
        background: rgb(var(--halo-tone-neutral) / 0.55);
        color: var(--halo-ink-success);
        font-size: var(--halo-text-sm);
        font-weight: 700;
    }

    .slo-allclear__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--halo-ink-success);
        animation: slo-hero-breathe 2.2s var(--halo-ease-out) infinite;
    }

    .slo-alerts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 10px;
    }

    .slo-alert {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--slo-alert-border, rgb(var(--halo-tone-warning) / 0.3));
        border-radius: var(--halo-radius-lg);
        background: var(--slo-alert-bg, var(--halo-surface-sunken));
        cursor: pointer;
        text-align: left;
        animation: slo-alert-in var(--halo-duration-4) var(--halo-ease-spring) both,
                   slo-fade-in var(--halo-duration-2) var(--halo-ease-out) both;
        animation-delay: calc(var(--halo-row, 0) * 30ms + 60ms);
        transition: transform var(--halo-duration-3) var(--halo-ease-spring), box-shadow var(--halo-duration-1) var(--halo-ease-out);
    }

    .slo-alert:hover {
        transform: translateY(-1px);
        box-shadow: var(--halo-shadow-2);
    }

    .slo-alert:nth-child(1) { --halo-row: 0; }
    .slo-alert:nth-child(2) { --halo-row: 1; }
    .slo-alert:nth-child(3) { --halo-row: 2; }
    .slo-alert:nth-child(4) { --halo-row: 3; }
    .slo-alert:nth-child(5) { --halo-row: 4; }
    .slo-alert:nth-child(6) { --halo-row: 5; }
    .slo-alert:nth-child(7) { --halo-row: 6; }
    .slo-alert:nth-child(8) { --halo-row: 7; }
    .slo-alert:nth-child(9) { --halo-row: 8; }
    .slo-alert:nth-child(10) { --halo-row: 9; }
    .slo-alert:nth-child(11) { --halo-row: 10; }
    .slo-alert:nth-child(n+12) { --halo-row: 11; }

    .slo-alert:focus-visible {
        outline: none;
        box-shadow: var(--halo-focus-ring);
    }

    .slo-alert--warning {
        --slo-alert-bg: var(--halo-surface-sunken);
        --slo-alert-border: rgb(var(--halo-tone-warning) / 0.3);
        --slo-alert-icon-bg: var(--halo-text-tertiary);
        --slo-alert-icon: var(--halo-ink-warning);
    }

    .slo-alert--critical {
        --slo-alert-bg: var(--halo-surface);
        --slo-alert-border: rgb(var(--halo-tone-critical) / 0.32);
        --slo-alert-icon-bg: var(--halo-surface-sunken);
        --slo-alert-icon: var(--halo-ink-critical);
        animation: slo-alert-in var(--halo-duration-4) var(--halo-ease-spring) both,
                   slo-fade-in var(--halo-duration-2) var(--halo-ease-out) both,
                   slo-alert-glow 2s var(--halo-ease-out) infinite;
        animation-delay: calc(var(--halo-row, 0) * 30ms + 60ms),
                         calc(var(--halo-row, 0) * 30ms + 60ms),
                         calc(var(--halo-row, 0) * 30ms + 460ms);
    }

    .slo-alert__icon {
        display: inline-grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: var(--halo-radius-sm);
        background: var(--slo-alert-icon-bg);
        color: var(--slo-alert-icon);
        flex-shrink: 0;
    }

    .slo-alert__text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
    }

    .slo-alert__text strong {
        color: var(--halo-text);
        font-size: var(--halo-text-sm);
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .slo-alert__text small {
        color: var(--halo-text-secondary);
        font-size: var(--halo-text-caption);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .slo-alert__go {
        color: var(--slo-alert-icon);
        flex-shrink: 0;
    }

    /* ── Operation pulse row: hero + trend ── */
    .supervisor-overview__pulse-row {
        display: grid;
        grid-template-columns: minmax(340px, 0.46fr) minmax(0, 1fr);
        gap: 14px;
        align-items: stretch;
        margin-top: 14px;
    }

    /* ── Panels ── */
    .supervisor-overview__panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 14px;
    }

    .supervisor-overview__panel-left,
    .supervisor-overview__panel-right {
        min-width: 0;
    }

    .supervisor-overview__panel-left .halo-card__header,
    .supervisor-overview__panel-right .halo-card__header {
        padding: 18px 20px 4px;
        background: transparent;
    }

    .supervisor-overview__panel-left .halo-card__body,
    .supervisor-overview__panel-right .halo-card__body {
        padding: 12px 20px 20px;
    }

    .supervisor-overview__panel-left .halo-card__title,
    .supervisor-overview__panel-right .halo-card__title {
        font-size: 0.98rem;
        letter-spacing: 0;
    }

    /* ── Wallboard (TV) mode ── */
    /* The layout's .halo-main-inner (position:relative; z-index:1) caps any
       z-index inside it, so lift that stacking context while the wallboard is
       active; the shell then sits above the navbar, below the softphone and dialogs. */
    .halo-main-inner:has(.supervisor-shell--wallboard) {
        z-index: 1290;
    }

    .supervisor-shell--wallboard {
        position: fixed;
        inset: 0;
        z-index: 1290;
        overflow: auto;
        padding: 20px 28px 32px;
        gap: 16px;
        /* The wallboard is always dark (.halo-dark on the shell) for floor monitors. */
        background: var(--halo-canvas);
        color: var(--halo-text);
        color-scheme: dark;
    }

    .slo-wallbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 4px;
    }

    .slo-wallbar__title {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: var(--halo-text-title);
        font-weight: 800;
        font-family: var(--halo-font-display);
        color: var(--halo-text);
        letter-spacing: var(--halo-tracking-tight);
    }

    .slo-wallbar__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--halo-ink-success);
        box-shadow: none;
        animation: slo-hero-breathe 2s var(--halo-ease-out) infinite;
    }

    .slo-wallbar__right {
        display: inline-flex;
        align-items: center;
        gap: 14px;
    }

    .slo-wallbar__exit {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 14px;
        border: 1px solid var(--halo-hairline);
        border-radius: var(--halo-radius-pill);
        background: var(--halo-surface);
        color: var(--halo-text);
        font-size: var(--halo-text-sm);
        font-weight: 750;
        cursor: pointer;
        box-shadow: none;
        transition: border-color var(--halo-duration-1) var(--halo-ease-out), background-color var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-2) var(--halo-ease-spring);
    }

    .slo-wallbar__exit:hover {
        border-color: rgb(var(--halo-tone-brand) / 0.4);
        background: var(--halo-soft-navy);
        transform: translateY(-1px);
    }

    /* Wallboard scales the broadcast surfaces and hides the work surfaces */
    .supervisor-shell--wallboard .supervisor-overview__tabs .mud-tabs-tabbar,
    .supervisor-shell--wallboard .supervisor-overview__panels {
        display: none;
    }

    .supervisor-shell--wallboard .supervisor-overview__tabs .mud-tabs-panels {
        padding-top: 0;
    }

    .supervisor-shell--wallboard .supervisor-overview__tabs .mud-tabs-panels > * {
        animation: slo-wallboard-panel-fade var(--halo-duration-3) var(--halo-ease-out);
    }

    @keyframes slo-wallboard-panel-fade {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .supervisor-shell--wallboard .slo-hero__value { font-size: 6rem; font-family: var(--halo-font-display); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
    .supervisor-shell--wallboard .slo-hero__value-label { font-size: 1rem; }
    .supervisor-shell--wallboard .slo-hero__wait { font-size: 0.95rem; padding: 7px 16px; }
    .supervisor-shell--wallboard .slo-hero__gauge { width: 200px; }
    .supervisor-shell--wallboard .slo-hero__gauge-center { inset: 34px 0 0; }
    .supervisor-shell--wallboard .slo-hero__gauge-center strong { font-size: var(--halo-text-page); font-family: var(--halo-font-display); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
    .supervisor-shell--wallboard .slo-hero__stat strong { font-size: var(--halo-text-page); font-family: var(--halo-font-display); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
    .supervisor-shell--wallboard .slo-hero__stat span { font-size: var(--halo-text-sm); }

    .supervisor-shell--wallboard .slo-queuebar__stat { font-size: 0.95rem; }

    .supervisor-shell--wallboard .slo-vital__value { font-size: var(--halo-text-display); font-family: var(--halo-font-display); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
    .supervisor-shell--wallboard .slo-vital__label { font-size: var(--halo-text-body); }

    .supervisor-shell--wallboard .ltc-plot,
    .supervisor-shell--wallboard .ltc-empty { --ltc-height: 240px; }

    .supervisor-shell--wallboard .slo-alert__text strong { font-size: 0.95rem; }
    .supervisor-shell--wallboard .slo-alert__text small { font-size: var(--halo-text-sm); }

    .slo-agent-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 4px;
    }

    .slo-agent-grid__head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 16px;
        padding: 0 4px;
    }

    .slo-agent-grid__eyebrow {
        display: block;
        margin-bottom: 2px;
        color: var(--halo-text-tertiary);
        font-size: var(--halo-text-caption);
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    .slo-agent-grid__head h2 {
        margin: 0;
        color: var(--halo-text);
        font-family: var(--halo-font-display);
        font-size: var(--halo-text-title);
        font-weight: 800;
        letter-spacing: var(--halo-tracking-tight);
    }

    .slo-agent-grid__meta {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        color: var(--halo-text-secondary);
        font-size: var(--halo-text-sm);
        font-weight: 750;
        white-space: nowrap;
    }

    .slo-agent-grid__pager {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .slo-agent-grid__page-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: 1px solid var(--halo-hairline);
        border-radius: 50%;
        background: var(--halo-surface);
        color: var(--halo-ink-brand);
        cursor: pointer;
    }

    .slo-agent-grid__page-btn:disabled {
        color: var(--halo-text-tertiary);
        cursor: default;
        opacity: 0.55;
    }

    .slo-agent-grid__table {
        overflow: hidden;
        border: 1px solid var(--halo-hairline);
        border-radius: var(--halo-radius-sm);
        background: var(--halo-surface);
    }

    .slo-agent-grid__row {
        display: grid;
        grid-template-columns: minmax(240px, 1.35fr) minmax(140px, 0.75fr) minmax(140px, 0.75fr) minmax(120px, 0.55fr) minmax(120px, 0.55fr) minmax(100px, 0.5fr);
        align-items: center;
        min-height: 48px;
        border-top: 1px solid rgb(var(--halo-tone-neutral) / 0.9);
        color: var(--halo-text-secondary);
        font-size: var(--halo-text-body);
        font-weight: 650;
    }

    .slo-agent-grid__row > span {
        min-width: 0;
        padding: 0 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 30ms cascade on the roster rows; last column is a live timer. */
    .slo-agent-grid__row {
        animation: slo-panel-in var(--halo-duration-3) var(--halo-ease-out) both;
        animation-delay: calc(var(--halo-row, 0) * 30ms + 60ms);
    }

    .slo-agent-grid__row:nth-child(1) { --halo-row: 0; }
    .slo-agent-grid__row:nth-child(2) { --halo-row: 1; }
    .slo-agent-grid__row:nth-child(3) { --halo-row: 2; }
    .slo-agent-grid__row:nth-child(4) { --halo-row: 3; }
    .slo-agent-grid__row:nth-child(5) { --halo-row: 4; }
    .slo-agent-grid__row:nth-child(6) { --halo-row: 5; }
    .slo-agent-grid__row:nth-child(7) { --halo-row: 6; }
    .slo-agent-grid__row:nth-child(8) { --halo-row: 7; }
    .slo-agent-grid__row:nth-child(9) { --halo-row: 8; }
    .slo-agent-grid__row:nth-child(10) { --halo-row: 9; }
    .slo-agent-grid__row:nth-child(11) { --halo-row: 10; }
    .slo-agent-grid__row:nth-child(n+12) { --halo-row: 11; }

    .slo-agent-grid__row:not(.slo-agent-grid__row--head) > span:last-child {
        font-family: var(--halo-font-mono);
        font-variant-numeric: tabular-nums;
    }

    .slo-agent-grid__row--head {
        min-height: 38px;
        border-top: 0;
        background: var(--halo-surface);
        color: var(--halo-text-tertiary);
        font-size: var(--halo-text-caption);
        font-weight: 850;
        letter-spacing: 0.06em;
    }

    .slo-agent-grid__agent {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--halo-text);
    }

    .slo-agent-grid__agent strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--halo-text-body);
        letter-spacing: 0;
    }

    .slo-agent-grid__avatar {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--halo-surface-sunken);
        color: var(--halo-ink-brand);
        font-size: var(--halo-text-caption);
        font-weight: 850;
    }

    .slo-agent-grid__status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
    }

    .slo-agent-grid__status span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--halo-text-tertiary);
        box-shadow: none;
    }

    .slo-agent-grid__status--online span { background: var(--halo-ink-success); box-shadow: none; }
    .slo-agent-grid__status--busy span { background: var(--halo-ink-warning); box-shadow: none; }
    .slo-agent-grid__status--ringing span { background: var(--halo-ink-brand); box-shadow: none; }
    .slo-agent-grid__status--away span { background: var(--halo-ink-info); box-shadow: none; }
    .slo-agent-grid__status--offline span { background: var(--halo-text-tertiary); box-shadow: none; }

    .slo-agent-grid__empty {
        padding: 24px 16px;
        color: var(--halo-text-tertiary);
        font-size: var(--halo-text-body);
        font-weight: 700;
        text-align: center;
    }

    @media (max-width: 1280px) {
        .supervisor-shell--wallboard .slo-hero__value { font-size: 4.2rem; }
        .slo-agent-grid__row {
            grid-template-columns: minmax(200px, 1.15fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) minmax(108px, 0.55fr) minmax(108px, 0.55fr) minmax(90px, 0.45fr);
            font-size: var(--halo-text-sm);
        }
    }

    /* ── Reports ── */
    .supervisor-reports {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-top: 4px;
    }

    .supervisor-reports__filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(160px, 0.2fr)) minmax(180px, 1fr) auto;
        gap: 12px;
        align-items: center;
    }

    .supervisor-reports__kpis {
        display: grid;
        grid-template-columns: repeat(6, minmax(120px, 1fr));
        gap: 12px;
    }

    .supervisor-reports__tables section {
        background: var(--halo-surface);
        border: 1px solid var(--halo-hairline);
        border-radius: var(--halo-radius-lg);
        box-shadow: var(--halo-shadow-lift);
        padding: 14px 16px;
    }

    .supervisor-reports__tables {
        display: grid;
        grid-template-columns: minmax(320px, 0.45fr) minmax(0, 1fr);
        gap: 16px;
    }

    .supervisor-reports__tables h3 {
        margin: 0 0 10px;
        color: var(--halo-text);
        font-family: var(--halo-font-display);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: var(--halo-tracking-tight);
    }

    /* ── Skeleton loading ── */
    .supervisor-overview__queuebar-skeleton {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 10px 14px;
        background: var(--halo-surface);
        border-radius: var(--halo-radius-lg);
        box-shadow: none;
    }

    .supervisor-overview__pulse-skeleton {
        display: grid;
        grid-template-columns: minmax(340px, 0.46fr) minmax(0, 1fr);
        gap: 14px;
    }

    .supervisor-overview__panel-skeleton {
        background: var(--halo-surface);
        border-radius: var(--halo-radius-lg);
        box-shadow: none;
        padding: 24px;
    }

    .supervisor-overview__skeleton-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
        margin-top: 16px;
    }

    .supervisor-overview__skeleton-card-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 16px 18px;
        background: var(--halo-surface);
        border-radius: var(--halo-radius-md);
        border: 1px solid var(--halo-surface-sunken);
    }

    /* ── Live call dialog ── */
    .live-call-dialog.mud-dialog {
        width: min(820px, calc(100vw - 32px));
        max-width: 820px;
        border-radius: var(--halo-radius-lg);
        overflow: hidden;
        box-shadow: 0 28px 90px rgb(var(--halo-tone-info) / 0.24);
    }

    .live-call-dialog .mud-dialog-content {
        padding: 0;
    }

    .live-call-modal {
        display: flex;
        flex-direction: column;
        min-height: min(650px, calc(100vh - 72px));
        background: var(--halo-canvas);
    }

    .live-call-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 22px 28px 14px;
        background: transparent;
    }

    .live-call-modal__identity {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .live-call-modal__avatar {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        flex: 0 0 auto;
        border-radius: var(--halo-radius-md);
        background: var(--halo-soft-navy);
        color: var(--halo-ink-brand);
    }

    .live-call-modal__title-group {
        min-width: 0;
    }

    .live-call-modal__eyebrow {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: var(--halo-text-caption);
        font-weight: 700;
        color: var(--halo-text-secondary);
    }

    .live-call-modal__live-dot,
    .live-call-modal__pulse {
        width: 8px;
        height: 8px;
        border-radius: var(--halo-radius-pill);
        background: var(--halo-ink-success);
        box-shadow: none;
    }

    .live-call-modal__title-group h2 {
        margin: 2px 0;
        color: var(--halo-text);
        font-family: var(--halo-font-display);
        font-size: 1.45rem;
        font-weight: 800;
        letter-spacing: -0.025em;
    }

    .live-call-modal__meta-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        color: var(--halo-text-secondary);
        font-size: var(--halo-text-body);
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .live-call-modal__meta-row span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
    }

    .live-call-modal__header-actions,
    .live-call-modal__assist-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .live-call-modal__assist-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 2px 28px 18px;
        background: transparent;
    }

    .live-call-modal__assist-copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 180px;
    }

    .live-call-modal__assist-copy span {
        color: var(--halo-text-secondary);
        font-size: var(--halo-text-caption);
        font-weight: 700;
    }

    .live-call-modal__assist-copy strong {
        color: var(--halo-text);
        font-size: var(--halo-text-body);
        font-weight: 800;
    }

    .live-call-modal__assist-actions .mud-button-root {
        min-height: 40px;
        border-radius: var(--halo-radius-sm);
        box-shadow: none;
        text-transform: none;
        font-weight: 700;
    }

    .live-call-modal__action-error {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 16px 28px 0;
        padding: 10px 14px;
        border: 1px solid rgb(var(--halo-tone-critical) / 0.25);
        border-radius: var(--halo-radius-md);
        background: var(--halo-soft-red);
        color: var(--halo-ink-critical);
        font-size: var(--halo-text-sm);
        font-weight: 600;
    }

    .live-call-modal__insights {
        display: grid;
        grid-template-columns: minmax(310px, 0.42fr) minmax(0, 1fr);
        gap: 16px;
        min-height: 420px;
        padding: 20px 28px 28px;
    }

    .live-call-modal__sentiment,
    .live-call-modal__transcript {
        border: none;
        border-radius: var(--halo-radius-lg);
        background: var(--halo-surface);
        box-shadow: var(--halo-shadow-2);
        min-width: 0;
    }

    .live-call-modal__sentiment {
        padding: 20px;
    }

    .live-call-modal__section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
        color: var(--halo-ink-info);
    }

    .live-call-modal__section-title {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .live-call-modal__section-title span {
        color: var(--halo-text);
        font-family: var(--halo-font-display);
        font-size: 0.95rem;
        font-weight: 800;
    }

    .live-call-modal__section-title small {
        color: var(--halo-text-tertiary);
        font-size: var(--halo-text-caption);
        font-weight: 650;
    }

    .live-call-modal__section-icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: var(--halo-radius-sm);
        background: var(--halo-soft-navy);
        color: var(--halo-ink-brand);
    }

    .live-call-modal__sentiment-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .live-call-modal__sentiment-grid div {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-height: 84px;
        padding: 12px 14px;
        border-radius: var(--halo-radius-md);
        background: var(--halo-surface-sunken);
        border: none;
    }

    .live-call-modal__sentiment-grid span {
        color: var(--halo-text-secondary);
        font-size: var(--halo-text-caption);
        font-weight: 600;
    }

    .live-call-modal__sentiment-grid strong {
        color: var(--halo-text);
        font-size: 0.95rem;
        overflow-wrap: anywhere;
    }

    .live-call-modal__summary {
        margin: 14px 0 0;
        color: var(--halo-text-secondary);
        font-size: var(--halo-text-body);
        line-height: 1.5;
    }

    .live-call-modal__transcript {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 18px;
    }

    .live-call-modal__transcript-state {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid rgb(var(--halo-tone-brand) / 0.20);
        border-radius: var(--halo-radius-pill);
        background: var(--halo-soft-navy);
        color: var(--halo-ink-brand);
        font-size: var(--halo-text-caption);
        font-weight: 750;
        white-space: nowrap;
    }

    .live-call-modal__transcript-state--done {
        border-color: var(--halo-soft-green);
        background: var(--halo-surface-sunken);
        color: var(--halo-ink-success);
    }

    .live-call-modal__transcript-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow-y: auto;
        max-height: calc(100vh - 300px);
        min-height: 292px;
        padding: 16px;
        border: none;
        border-radius: var(--halo-radius-md);
        background: var(--halo-surface-sunken);
        scroll-behavior: smooth;
    }

    .live-call-modal__transcript-line {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: fit-content;
        max-width: min(82%, 560px);
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        animation: slo-pop-in var(--halo-duration-4) var(--halo-ease-spring) both,
                   slo-fade-in var(--halo-duration-2) var(--halo-ease-out) both;
    }

    .live-call-modal__transcript-line--agent {
        align-self: flex-end;
        align-items: flex-end;
        transform-origin: bottom right;
    }

    .live-call-modal__transcript-line--customer {
        align-self: flex-start;
        align-items: flex-start;
        transform-origin: bottom left;
    }

    .live-call-modal__transcript-meta {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin: 0 6px;
        color: var(--halo-ink-info);
        font-size: var(--halo-text-caption);
        font-weight: 700;
    }

    .live-call-modal__transcript-line--agent .live-call-modal__transcript-meta {
        flex-direction: row-reverse;
    }

    .live-call-modal__speaker {
        color: var(--halo-text-secondary);
        overflow-wrap: anywhere;
    }

    .live-call-modal__line-badges {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: inherit;
        opacity: 0.78;
    }

    .live-call-modal__line-badges small {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--halo-text-tertiary);
        font-size: var(--halo-text-caption);
        font-weight: 750;
    }

    .live-call-modal__transcript-line p {
        margin: 0;
        padding: 10px 14px;
        border-radius: var(--halo-radius-lg);
        font-size: var(--halo-text-body);
        line-height: 1.45;
        overflow-wrap: anywhere;
        box-shadow: none;
    }

    .live-call-modal__transcript-line--agent p {
        border-bottom-right-radius: 6px;
        background: var(--halo-action-brand);
        color: var(--halo-on-action);
    }

    .live-call-modal__transcript-line--customer p {
        border-bottom-left-radius: 6px;
        background: var(--halo-surface);
        color: var(--halo-text);
        border: 1px solid var(--halo-hairline);
    }

    .live-call-modal__loading,
    .live-call-modal__empty {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 292px;
        border: 1px dashed var(--halo-hairline-strong);
        border-radius: var(--halo-radius-md);
        background: var(--halo-surface-sunken);
        color: var(--halo-text-secondary);
        font-size: var(--halo-text-body);
        font-weight: 600;
    }

    .live-call-modal__empty {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .live-call-modal__empty small {
        color: var(--halo-text-tertiary);
        font-size: var(--halo-text-caption);
        font-weight: 650;
    }

    .live-call-modal__debug-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--halo-hairline);
    }

    .live-call-modal__debug-strip div {
        min-width: 0;
        padding: 9px 10px;
        border: none;
        border-radius: var(--halo-radius-sm);
        background: var(--halo-surface-sunken);
    }

    .live-call-modal__debug-strip span,
    .live-call-modal__debug-strip strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .live-call-modal__debug-strip span {
        color: var(--halo-text-tertiary);
        font-size: var(--halo-text-caption);
        font-weight: 750;
    }

    .live-call-modal__debug-strip strong {
        color: var(--halo-ink-info);
        font-family: var(--halo-font-mono);
        font-size: var(--halo-text-sm);
        font-weight: 750;
        font-variant-numeric: tabular-nums;
    }

    /* Webchat supervision: one queue rail and a spacious conversation surface. */
    .mud-dialog.halo-modal.supervisor-webchat-dialog {
        width: min(1120px, calc(100vw - 32px));
        max-width: none;
        max-height: calc(100dvh - 32px);
        margin: 16px;
        overflow: hidden;
    }
    /* app.css sets legacy dialog padding with !important; keep this reset local. */
    .mud-dialog.halo-modal.supervisor-webchat-dialog .mud-dialog-content { padding: 0 !important; overflow: hidden; min-height: 0; }
    .supervisor-webchat-dialog .mud-focus-trap,
    .supervisor-webchat-dialog .mud-focus-trap-child-container { display: flex; flex-direction: column; min-height: 0; }
    .supervisor-webchat-modal {
        display: flex;
        flex-direction: column;
        height: min(820px, calc(100dvh - 64px));
        min-height: 0;
        background: var(--halo-surface);
    }
    .supervisor-webchat-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 22px;
        border-bottom: 1px solid var(--halo-hairline);
        flex-shrink: 0;
    }
    .supervisor-webchat-modal__identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .supervisor-webchat-modal__avatar {
        display: inline-grid; place-items: center; width: 42px; height: 42px;
        border-radius: var(--halo-radius-md); background: var(--halo-surface-sunken); color: var(--halo-ink-brand); flex-shrink: 0;
    }
    .supervisor-webchat-modal__identity > div > span { color: var(--halo-text-secondary); font-size: var(--halo-text-caption); font-weight: 500; }
    .supervisor-webchat-modal__identity h2 { margin: 3px 0 0; color: var(--halo-text); font-size: var(--halo-text-title); font-weight: 650; }
    .supervisor-webchat-modal__error {
        display: flex; align-items: center; gap: 8px; padding: 12px 20px;
        background: var(--halo-soft-red); color: var(--halo-ink-critical); font-size: var(--halo-text-sm);
    }
    .supervisor-webchat-modal__body {
        display: grid; grid-template-columns: minmax(220px, 28%) minmax(0, 1fr);
        flex: 1; min-height: 0; overflow: hidden;
    }
    .supervisor-webchat-modal__list {
        display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0;
        padding: 12px; overflow-y: auto; overscroll-behavior: contain;
        border-right: 1px solid var(--halo-hairline); background: var(--halo-surface-sunken);
    }
    .supervisor-webchat-modal__chat {
        display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; align-content: start; flex: 0 0 auto; gap: 8px;
        width: 100%; min-width: 0; padding: 14px 12px;
        border: 1px solid transparent; border-radius: var(--halo-radius-md); box-shadow: none;
        background: transparent; color: var(--halo-text); text-align: left; font: inherit; cursor: pointer;
        transition: background-color var(--halo-duration-1) var(--halo-ease-out), border-color var(--halo-duration-1) var(--halo-ease-out), box-shadow var(--halo-duration-1) var(--halo-ease-out), transform var(--halo-duration-3) var(--halo-ease-spring);
        animation: slo-panel-in var(--halo-duration-3) var(--halo-ease-out) both;
        animation-delay: calc(var(--halo-row, 0) * 30ms + 60ms);
    }
    .supervisor-webchat-modal__chat:nth-child(1) { --halo-row: 0; }
    .supervisor-webchat-modal__chat:nth-child(2) { --halo-row: 1; }
    .supervisor-webchat-modal__chat:nth-child(3) { --halo-row: 2; }
    .supervisor-webchat-modal__chat:nth-child(4) { --halo-row: 3; }
    .supervisor-webchat-modal__chat:nth-child(5) { --halo-row: 4; }
    .supervisor-webchat-modal__chat:nth-child(6) { --halo-row: 5; }
    .supervisor-webchat-modal__chat:nth-child(7) { --halo-row: 6; }
    .supervisor-webchat-modal__chat:nth-child(8) { --halo-row: 7; }
    .supervisor-webchat-modal__chat:nth-child(9) { --halo-row: 8; }
    .supervisor-webchat-modal__chat:nth-child(10) { --halo-row: 9; }
    .supervisor-webchat-modal__chat:nth-child(11) { --halo-row: 10; }
    .supervisor-webchat-modal__chat:nth-child(n+12) { --halo-row: 11; }
    .supervisor-webchat-modal__chat:hover { background: var(--halo-surface); transform: translateY(-1px); box-shadow: var(--halo-shadow-2); }
    .supervisor-webchat-modal__chat--active,
    .supervisor-webchat-modal__chat--active:hover {
        background: var(--halo-soft-navy); border-color: rgb(var(--halo-tone-brand) / .3);
        box-shadow: inset 3px 0 0 rgb(var(--halo-tone-brand));
    }
    .supervisor-webchat-modal__chat:focus-visible { outline: 2px solid var(--halo-ink-brand); outline-offset: 2px; }
    .supervisor-webchat-modal__chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
    .supervisor-webchat-modal__chat-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--halo-text-body); font-weight: 600; }
    .supervisor-webchat-modal__chat-head small { flex-shrink: 0; padding: 3px 7px; border-radius: var(--halo-radius-xs); font-size: var(--halo-text-caption); font-weight: 600; background: var(--halo-surface); color: var(--halo-text-secondary); }
    .supervisor-webchat-modal__chat-head .supervisor-webchat-modal__risk { background: var(--halo-soft-red); color: var(--halo-ink-critical); }
    .supervisor-webchat-modal__chat-meta { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--halo-text-secondary); font-size: var(--halo-text-caption); overflow-wrap: anywhere; }
    .supervisor-webchat-modal__chat-meta :is(.mud-icon-root, .halo-icon) { font-size: 16px; flex-shrink: 0; width: 1em; height: 1em; }
    .supervisor-webchat-modal__workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
    .supervisor-webchat-modal__tools { display: grid; gap: 7px; padding: 14px 20px; border-bottom: 1px solid var(--halo-hairline); flex-shrink: 0; }
    .supervisor-webchat-modal__assign-label { color: var(--halo-text-secondary); font-size: var(--halo-text-caption); font-weight: 600; }
    .supervisor-webchat-modal__assign { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; }
    .supervisor-webchat-modal__agent-select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 12px; font: inherit; font-size: var(--halo-text-sm); border: 1px solid var(--halo-hairline); border-radius: var(--halo-radius-sm); background: var(--halo-surface); color: var(--halo-text); text-overflow: ellipsis; }
    .supervisor-webchat-modal__thread { flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
    .supervisor-webchat-modal__thread .wtp { height: 100%; min-width: 0; border: 0; border-radius: 0; box-shadow: none; }
    .supervisor-webchat-modal__thread .wtp__header { padding: 14px 20px; gap: 12px; }
    .supervisor-webchat-modal__thread .wtp__header-info { flex-direction: row; align-items: center; flex-wrap: wrap; min-width: 0; gap: 8px; }
    .supervisor-webchat-modal__thread .wtp__visitor-name { overflow-wrap: anywhere; }
    .supervisor-webchat-modal__thread .wtp__message-count { white-space: nowrap; }
    .supervisor-webchat-modal__thread .wtp__customer-card { padding: 12px 20px; }
    .supervisor-webchat-modal__thread .wtp__customer-meta { gap: 6px 14px; }
    .supervisor-webchat-modal__thread .wtp__customer-meta-item { min-width: 0; }
    .supervisor-webchat-modal__thread .wtp__customer-meta-value { overflow-wrap: anywhere; }
    .supervisor-webchat-modal__thread .wtp__thread { padding: 20px; background: var(--halo-canvas); overscroll-behavior: contain; }
    .supervisor-webchat-modal__thread .halo-chat-bubble--inbound .halo-chat-bubble__content { background: var(--halo-surface); color: var(--halo-text); }
    .supervisor-webchat-modal__thread .wtp__compose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 20px; }
    .supervisor-webchat-modal__thread .wtp__compose-input { min-width: 0; width: 100%; height: auto; min-height: 0; padding: 0; border: 0; box-shadow: none; }
    .supervisor-webchat-modal__thread .wtp__textarea { min-height: 64px; border: 1px solid var(--halo-hairline); border-radius: var(--halo-radius-sm); }
    .supervisor-webchat-modal__thread .wtp__compose-footer { justify-content: flex-end; }
    @media (max-width: 700px) {
        .mud-dialog.halo-modal.supervisor-webchat-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; margin: 8px; }
        .supervisor-webchat-modal { height: calc(100dvh - 32px); }
        .supervisor-webchat-modal__header { padding: 12px 14px; }
        .supervisor-webchat-modal__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 130px minmax(0, 1fr); }
        .supervisor-webchat-modal__list { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--halo-hairline); padding: 8px; }
        .supervisor-webchat-modal__chat { width: 230px; padding: 10px; }
        .supervisor-webchat-modal__tools { padding: 10px 14px; }
        .supervisor-webchat-modal__thread .wtp__header, .supervisor-webchat-modal__thread .wtp__customer-card { padding: 10px 14px; }
        .supervisor-webchat-modal__thread .wtp__thread { padding: 14px; }
        .supervisor-webchat-modal__thread .wtp__inspection { padding: 10px 14px; }
    }

    @keyframes slo-hero-sweep {
        from { transform: translateX(-32%); }
        to { transform: translateX(26%); }
    }

    @keyframes slo-hero-breathe {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.45; transform: scale(0.78); }
    }

    @keyframes slo-hero-pop {
        from { transform: scale(1.12); }
        to { transform: scale(1); }
    }

    @keyframes slo-hero-hot {
        0%, 100% { box-shadow: 0 0 0 0 rgb(var(--halo-tone-neutral) / 0); }
        50% { box-shadow: none; }
    }

    @keyframes slo-gauge-in {
        from { stroke-dasharray: 0 100; }
    }

    /* Panels and rows: appear with ease-out. */
    @keyframes slo-panel-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: none; }
    }

    /* Pops (alerts, chat bubbles): transform on the spring, opacity separately. */
    @keyframes slo-alert-in {
        from { transform: translateY(8px) scale(.96); }
        to { transform: none; }
    }

    @keyframes slo-pop-in {
        from { transform: translateY(8px) scale(.96); }
        to { transform: none; }
    }

    @keyframes slo-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slo-alert-glow {
        0%, 100% { box-shadow: 0 0 0 0 rgb(var(--halo-tone-critical) / 0); }
        50% { box-shadow: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        .slo-hero,
        .slo-hero::after,
        .slo-hero__live-dot,
        .slo-hero__value,
        .slo-hero__stat strong,
        .slo-hero__wait--hot,
        .slo-hero__gauge-arc,
        .slo-alert,
        .slo-alert--critical,
        .slo-allclear__dot,
        .slo-wallbar__dot,
        .slo-queuebar,
        .slo-queuebar__dot--critical,
        .slo-agent-grid__row,
        .live-call-modal__transcript-line,
        .supervisor-webchat-modal__chat,
        .supervisor-shell--wallboard .supervisor-overview__tabs .mud-tabs-panels > * {
            animation: none !important;
        }

        .slo-hero__gauge-arc { transition: none; }

        .slo-alert,
        .slo-wallbar__exit,
        .supervisor-webchat-modal__chat { transition: none; }

        .slo-alert:hover,
        .slo-wallbar__exit:hover,
        .supervisor-webchat-modal__chat:hover { transform: none; }
    }

    /* ── Responsive ── */
    @media (max-width: 1100px) {
        .supervisor-overview__pulse-row {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 960px) {
        .supervisor-overview__panels {
            grid-template-columns: 1fr;
        }

        .live-call-modal__insights {
            grid-template-columns: 1fr;
        }

        .supervisor-reports__filters,
        .supervisor-reports__kpis,
        .supervisor-reports__tables {
            grid-template-columns: 1fr;
        }

        .supervisor-overview__pulse-skeleton {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .supervisor-overview__panels {
            gap: 12px;
        }

        .slo-hero {
            grid-template-columns: 1fr;
        }

        .slo-hero__gauge { justify-self: start; }

        .slo-hero__value { font-size: 2.6rem; }


    }

/* Halo composition: solid working panels, shared summary metrics. */
.supervisor-overview { color:var(--halo-text); font-family:var(--halo-font); }
.supervisor-pulse { min-width:0; }
.supervisor-pulse__title { margin:0 0 var(--halo-3); font-size:var(--halo-text-title); font-weight:600; }
.supervisor-pulse__metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--halo-3); }
.supervisor-overview__pulse-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-bottom:var(--halo-4); }
.supervisor-reports__kpis > .halo-metric { display:block; padding:var(--halo-4); }
.supervisor-reports__filters { align-items:end; }
.supervisor-reports__tables section { min-width:0; }
.supervisor-overview .halo-table-shell { overflow:auto; }
.supervisor-overview__tabs .mud-tabs-panels { padding-top:var(--halo-4); }
.live-call-dialog.mud-dialog, .supervisor-webchat-dialog.mud-dialog { border-radius:var(--halo-radius-xl); box-shadow:var(--halo-shadow-3); }
.supervisor-shell--wallboard .supervisor-pulse .halo-metric__value { font-size:var(--halo-text-display); font-family: var(--halo-font-display); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.supervisor-shell--wallboard .supervisor-daily-metrics .halo-metric__value { font-size:var(--halo-text-display); font-family: var(--halo-font-display); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
@media(max-width:1100px) { .supervisor-overview__pulse-row { grid-template-columns:1fr; } }
@media(max-width:480px) { .supervisor-pulse__metrics { grid-template-columns:1fr; } }