/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
.page[b-ni9ju2k3f5] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ni9ju2k3f5] {
    flex: 1;
}

.sidebar[b-ni9ju2k3f5] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ni9ju2k3f5] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ni9ju2k3f5]  a, .top-row[b-ni9ju2k3f5]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ni9ju2k3f5]  a:hover, .top-row[b-ni9ju2k3f5]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ni9ju2k3f5]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ni9ju2k3f5] {
        justify-content: space-between;
    }

    .top-row[b-ni9ju2k3f5]  a, .top-row[b-ni9ju2k3f5]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ni9ju2k3f5] {
        flex-direction: row;
    }

    .sidebar[b-ni9ju2k3f5] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ni9ju2k3f5] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ni9ju2k3f5]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ni9ju2k3f5], article[b-ni9ju2k3f5] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Mirror of MainLayout.razor.css — see there for why the backdrop can't centre with flex (Blazor
   reveals this with an inline display:block) and why the z-index has to clear 100000. */
#blazor-error-ui[b-ni9ju2k3f5] {
    color-scheme: light only;
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 25, 0.5);
    box-sizing: border-box;
    z-index: 200000;
}

    #blazor-error-ui .kfx-err-card[b-ni9ju2k3f5] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(460px, calc(100vw - 40px));
        box-sizing: border-box;
        background: #fff;
        color: #1c2230;
        border-radius: 10px;
        padding: 22px 24px 18px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
        font-size: 13.5px;
        line-height: 1.55;
        text-align: left;
    }

    #blazor-error-ui .kfx-err-title[b-ni9ju2k3f5] {
        font-size: 16px;
        font-weight: 600;
        color: #c4485a;
        margin-bottom: 8px;
    }

    #blazor-error-ui .kfx-err-body[b-ni9ju2k3f5] {
        color: #414a5c;
    }

    #blazor-error-ui .kfx-err-actions[b-ni9ju2k3f5] {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        align-items: center;
        margin-top: 18px;
    }

    #blazor-error-ui .kfx-err-btn[b-ni9ju2k3f5] {
        background: #4a7dff;
        color: #fff;
        border-radius: 6px;
        padding: 8px 16px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

        #blazor-error-ui .kfx-err-btn:hover[b-ni9ju2k3f5] {
            background: #3b6ae6;
        }

    #blazor-error-ui .kfx-err-dismiss[b-ni9ju2k3f5] {
        color: #6b7488;
        cursor: pointer;
        padding: 8px 10px;
        text-decoration: none;
    }

        #blazor-error-ui .kfx-err-dismiss:hover[b-ni9ju2k3f5] {
            color: #1c2230;
            text-decoration: underline;
        }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ur4psro41x] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ur4psro41x] {
    flex: 1;
}

.sidebar[b-ur4psro41x] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ur4psro41x] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ur4psro41x]  a, .top-row[b-ur4psro41x]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ur4psro41x]  a:hover, .top-row[b-ur4psro41x]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ur4psro41x]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ur4psro41x] {
        justify-content: space-between;
    }

    .top-row[b-ur4psro41x]  a, .top-row[b-ur4psro41x]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ur4psro41x] {
        flex-direction: row;
    }

    .sidebar[b-ur4psro41x] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ur4psro41x] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ur4psro41x]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ur4psro41x], article[b-ur4psro41x] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* The circuit-lost / unhandled-error dialog. Blazor reveals this by setting an INLINE display:block,
   which beats any display we set here — so the backdrop must not rely on flex to centre its card, and
   the card positions itself absolutely instead. z-index clears the admin tool's busy overlay (100000),
   otherwise the one message the user must act on renders behind a spinner they cannot dismiss. */
#blazor-error-ui[b-ur4psro41x] {
    color-scheme: light only;
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 25, 0.5);
    box-sizing: border-box;
    z-index: 200000;
}

    #blazor-error-ui .kfx-err-card[b-ur4psro41x] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(460px, calc(100vw - 40px));
        box-sizing: border-box;
        background: #fff;
        color: #1c2230;
        border-radius: 10px;
        padding: 22px 24px 18px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
        font-size: 13.5px;
        line-height: 1.55;
        text-align: left;
    }

    #blazor-error-ui .kfx-err-title[b-ur4psro41x] {
        font-size: 16px;
        font-weight: 600;
        color: #c4485a;
        margin-bottom: 8px;
    }

    #blazor-error-ui .kfx-err-body[b-ur4psro41x] {
        color: #414a5c;
    }

    #blazor-error-ui .kfx-err-actions[b-ur4psro41x] {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        align-items: center;
        margin-top: 18px;
    }

    /* The primary action. Blazor's own handler on .reload does the reloading — this is only its look. */
    #blazor-error-ui .kfx-err-btn[b-ur4psro41x] {
        background: #4a7dff;
        color: #fff;
        border-radius: 6px;
        padding: 8px 16px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

        #blazor-error-ui .kfx-err-btn:hover[b-ur4psro41x] {
            background: #3b6ae6;
        }

    /* Kept (and labelled, not a bare ✕) so the dialog can be put aside to copy something off the dead
       page first — but it is deliberately the quiet option, since refreshing is what actually helps. */
    #blazor-error-ui .kfx-err-dismiss[b-ur4psro41x] {
        color: #6b7488;
        cursor: pointer;
        padding: 8px 10px;
        text-decoration: none;
    }

        #blazor-error-ui .kfx-err-dismiss:hover[b-ur4psro41x] {
            color: #1c2230;
            text-decoration: underline;
        }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-w8czbvtiyr],
.components-reconnect-repeated-attempt-visible[b-w8czbvtiyr],
.components-reconnect-failed-visible[b-w8czbvtiyr],
.components-pause-visible[b-w8czbvtiyr],
.components-resume-failed-visible[b-w8czbvtiyr],
.components-rejoining-animation[b-w8czbvtiyr] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-w8czbvtiyr],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-w8czbvtiyr],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-w8czbvtiyr],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-w8czbvtiyr],
#components-reconnect-modal.components-reconnect-retrying[b-w8czbvtiyr],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-w8czbvtiyr],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-w8czbvtiyr],
#components-reconnect-modal.components-reconnect-failed[b-w8czbvtiyr],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-w8czbvtiyr] {
    display: block;
}


#components-reconnect-modal[b-w8czbvtiyr] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-w8czbvtiyr 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-w8czbvtiyr 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-w8czbvtiyr 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-w8czbvtiyr]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-w8czbvtiyr 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-w8czbvtiyr {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-w8czbvtiyr {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-w8czbvtiyr {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-w8czbvtiyr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-w8czbvtiyr] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-w8czbvtiyr] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-w8czbvtiyr] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-w8czbvtiyr] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-w8czbvtiyr] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-w8czbvtiyr] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-w8czbvtiyr 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-w8czbvtiyr] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-w8czbvtiyr {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/KfxAdminChatMonitor.razor.rz.scp.css */
/* Live Chat Console (Monitoring › Voice & Chat). Ported from the vNext design handoff. The console reuses
   the shared design-system tokens under un-prefixed names (--surface/--border/--primary/…); here they are
   aliased to the admin theme's --adm-* tokens so the console themes with the admin shell (incl. dark mode,
   since the --adm-* values flip under .adm-shell[data-theme="dark"]). Blazor scopes these selectors to this
   component, so the generic class names (.btn/.flag/.msg/…) don't leak. */

.cc-root[b-5ttx8n8p7p] {
    --bg:             var(--adm-bg);
    --surface:        var(--adm-surface);
    --surface-2:      var(--adm-surface-2);
    --surface-3:      var(--adm-surface-3);
    --border:         var(--adm-border);
    --border-strong:  var(--adm-border-strong);
    --text:           var(--adm-text);
    --text-2:         var(--adm-text-2);
    --text-3:         var(--adm-text-3);
    --text-4:         var(--adm-text-4);
    --primary:        var(--adm-primary);
    --primary-strong: var(--adm-primary-strong);
    --primary-soft:   var(--adm-primary-soft);
    --primary-on:     var(--adm-primary-on);
    --primary-ring:   var(--adm-primary-ring);
    --success:        var(--adm-success);
    --success-soft:   var(--adm-success-soft);
    --warn:           var(--adm-warn);
    --warn-soft:      var(--adm-warn-soft);
    --danger:         var(--adm-danger);
    --danger-soft:    var(--adm-danger-soft);
    --info:           var(--adm-info);
    --info-soft:      var(--adm-info-soft);
    /* Ownership by ANOTHER advisor — purple so other supervisors know not to step in (Stage 2/3 takeover). */
    --purple:         #7c3aed;
    --purple-soft:    color-mix(in srgb, #7c3aed 14%, transparent);
    --shadow-1:       var(--adm-shadow-1);
    --shadow-2:       var(--adm-shadow-2);
    --fs-body:        var(--adm-fs-body);
    --fs-sm:          var(--adm-fs-sm);
    --fs-xs:          var(--adm-fs-xs);
    --r-sm:           var(--adm-r-sm);
    --r-md:           var(--adm-r-md);
    --r-lg:           var(--adm-r-lg);
    --row-h:          34px;

    /* Fill the (flex-column) .adm-main via flex:1 (a percentage height through the grid/flex nesting doesn't
       resolve reliably), so the console has a real bounded height and scrolls INTERNALLY — the queue and each
       transcript scroll independently; the page itself doesn't. */
    /* flex-basis 0 (not auto): fill the container and IGNORE content height, so a long live transcript scrolls
       INSIDE .cc-thread instead of growing the panel past the viewport. .adm-main scrolls (overflow-y:auto), so a
       content-sized (auto) basis here would let the whole console grow. Also cap to the shell body height as a
       hard backstop regardless of the flex chain. */
    display: flex; flex-direction: column; min-height: 0; flex: 1 1 0; overflow: hidden;
    /* The shell is topbar / body / STATUS BAR — both fixed heights must come off the cap, or the
       console sizes ~28px past the visible body (it scrolled by that much before .adm-main was
       clipped, then clipped the composer bottoms). This cap is the operative height through the
       grid's auto-row, so the arithmetic must be exact. */
    max-height: calc(100vh - var(--adm-topbar-h, 48px) - var(--adm-statusbar-h, 28px));
    height: calc(100vh - var(--adm-topbar-h, 48px) - var(--adm-statusbar-h, 28px));
}

/* ── Shared base classes the console reuses (scoped, so no leak) ─────────────── */
.btn[b-5ttx8n8p7p] {
    appearance: none; height: var(--row-h); padding: 0 14px; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: var(--surface);
    font: inherit; font-weight: 500; color: var(--text); cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; letter-spacing: -.005em;
}
.btn:hover[b-5ttx8n8p7p] { background: var(--surface-2); }
.btn.primary[b-5ttx8n8p7p] { background: var(--primary); color: var(--primary-on); border-color: var(--primary); }
.btn.primary:hover[b-5ttx8n8p7p] { background: var(--primary-strong); border-color: var(--primary-strong); }
.btn.ghost[b-5ttx8n8p7p] { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover[b-5ttx8n8p7p] { background: var(--surface-2); color: var(--text); }
.btn svg[b-5ttx8n8p7p] { width: 15px; height: 15px; }
.btn.sm[b-5ttx8n8p7p] { height: 30px; padding: 0 10px; font-size: var(--fs-sm); }

.flag[b-5ttx8n8p7p] {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--border); background: var(--surface-2);
}
.flag.warn[b-5ttx8n8p7p] { background: var(--warn-soft); border-color: oklch(85% 0.1 70); color: oklch(40% 0.1 60); }
.flag.info[b-5ttx8n8p7p] { background: var(--info-soft); border-color: oklch(85% 0.07 240); color: oklch(35% 0.12 240); }

.dotind[b-5ttx8n8p7p] { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }

.pulse[b-5ttx8n8p7p] { width: 8px; height: 8px; border-radius: 999px; background: var(--success); position: relative; }
.pulse[b-5ttx8n8p7p]::after { content: ''; position: absolute; inset: -4px; border-radius: 999px;
    background: var(--success); opacity: .3; animation: cc-pulse-b-5ttx8n8p7p 2s infinite; }
@keyframes cc-pulse-b-5ttx8n8p7p { 0% { transform: scale(.6); opacity: .5; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.cc-toolbar[b-5ttx8n8p7p] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 22px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.cc-toolbar .ttl[b-5ttx8n8p7p] { font-size: 15px; font-weight: 600; letter-spacing: -.015em; display: flex; align-items: center; gap: 9px; }
.cc-toolbar .ttl .live[b-5ttx8n8p7p] { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs);
    font-weight: 600; color: var(--success); background: var(--success-soft); padding: 3px 9px; border-radius: 999px; }
.cc-toolbar .ttl .live .pulse[b-5ttx8n8p7p] { width: 7px; height: 7px; }
.cc-spacer[b-5ttx8n8p7p] { flex: 1; }
.cc-toolbar .cc-cust[b-5ttx8n8p7p] { appearance: none; font: inherit; font-size: var(--fs-sm); color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; }
.cc-toolbar .cc-cust:hover[b-5ttx8n8p7p] { border-color: var(--border-strong, var(--border)); }

.cc-seg[b-5ttx8n8p7p] { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; }
.cc-seg button[b-5ttx8n8p7p] { appearance: none; border: 0; background: transparent; font: inherit; font-size: var(--fs-sm);
    font-weight: 500; color: var(--text-2); padding: 5px 11px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; }
.cc-seg button:hover[b-5ttx8n8p7p] { color: var(--text); }
.cc-seg button[aria-pressed="true"][b-5ttx8n8p7p] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-1); }
.cc-seg button svg[b-5ttx8n8p7p] { width: 14px; height: 14px; }

.cc-filter[b-5ttx8n8p7p] { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cc-chip[b-5ttx8n8p7p] { appearance: none; border: 1px solid var(--border); background: var(--surface); font: inherit;
    font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); padding: 5px 11px; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; }
.cc-chip:hover[b-5ttx8n8p7p] { border-color: var(--border-strong); color: var(--text); }
.cc-chip[aria-pressed="true"][b-5ttx8n8p7p] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.cc-chip .n[b-5ttx8n8p7p] { font-variant-numeric: tabular-nums; font-weight: 600; }
.cc-chip .dotind[b-5ttx8n8p7p] { width: 7px; height: 7px; }

/* ── Layout: queue + focus area ────────────────────────────────────────────── */
.cc-layout[b-5ttx8n8p7p] { display: grid; grid-template-columns: 320px 1fr; flex: 1; min-height: 0; }

.cc-queue[b-5ttx8n8p7p] { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column;
    min-height: 0; overflow: hidden; }
.cc-queue-head[b-5ttx8n8p7p] { padding: 11px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.cc-queue-head .qh-title[b-5ttx8n8p7p] { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.cc-queue-head .qh-count[b-5ttx8n8p7p] { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.cc-queue-body[b-5ttx8n8p7p] { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cc-qgroup[b-5ttx8n8p7p] { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-4); padding: 8px 6px 2px; display: flex; align-items: center; gap: 6px; }

.cc-qitem[b-5ttx8n8p7p] {
    appearance: none; width: 100%; text-align: left; font: inherit; cursor: pointer;
    /* Border = NEGATIVE sentiment escalation: invisible while calm (ordinary hairline), then
       2/4/8px light→dark red with a radiant glow from 4/10 up. Vars are set inline per tile. */
    background: var(--surface); border: var(--neg-w, 1px) solid var(--neg-c, var(--border)); border-radius: var(--r-md);
    box-shadow: var(--neg-glow, 0 0 0 transparent);
    padding: 10px 11px 10px 13px; position: relative; display: flex; flex-direction: column; gap: 6px;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.cc-qitem[b-5ttx8n8p7p]::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 999px; background: var(--state-c, var(--text-4)); }
.cc-qitem:hover[b-5ttx8n8p7p] { border-color: var(--primary-ring); box-shadow: var(--shadow-1); }
/* In a focus slot: the tile wears its SLOT's pastel BACKGROUND (matching the whole preview
   panel) plus a ring, so tile ↔ window pairing is unmissable. The border stays the
   negative-sentiment signal. */
.cc-qitem.in-focus[b-5ttx8n8p7p] { box-shadow: 0 0 0 2.5px var(--slot-c, var(--primary-soft)), var(--neg-glow, 0 0 0 transparent);
    background: color-mix(in srgb, var(--slot-c, transparent) 22%, var(--surface)); }
.cc-qitem.attention:hover[b-5ttx8n8p7p] { border-color: var(--danger); }

.cc-qi-top[b-5ttx8n8p7p] { display: flex; align-items: center; gap: 8px; }
.cc-qi-av[b-5ttx8n8p7p] { width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center;
    font-size: 10px; font-weight: 600; color: #fff; background: linear-gradient(135deg, oklch(72% 0.1 295), oklch(64% 0.12 320)); }
.cc-qi-name[b-5ttx8n8p7p] { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-qi-when[b-5ttx8n8p7p] { margin-left: auto; font-size: 10.5px; color: var(--text-4); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cc-qi-topic[b-5ttx8n8p7p] { font-size: var(--fs-xs); color: var(--text-2); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.cc-qi-topic .ch[b-5ttx8n8p7p] { color: var(--text-4); }
.cc-qi-snippet[b-5ttx8n8p7p] { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.cc-qi-foot[b-5ttx8n8p7p] { display: flex; align-items: center; gap: 6px; }
.cc-state-badge[b-5ttx8n8p7p] { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
    background: var(--state-soft, var(--surface-2)); color: var(--state-c, var(--text-3)); }
.cc-state-badge svg[b-5ttx8n8p7p] { width: 9px; height: 9px; }
.cc-signals[b-5ttx8n8p7p] { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.cc-sig[b-5ttx8n8p7p] { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--text-4); font-weight: 500; }
.cc-sig .dotind[b-5ttx8n8p7p] { width: 7px; height: 7px; }
.cc-qi-reason[b-5ttx8n8p7p] { font-size: 10.5px; font-weight: 500; color: var(--danger); display: flex; align-items: center; gap: 5px; }
.cc-qi-reason svg[b-5ttx8n8p7p] { width: 11px; height: 11px; }

/* ── Focus area ────────────────────────────────────────────────────────────── */
.cc-focus[b-5ttx8n8p7p] { min-height: 0; overflow: hidden; display: grid; gap: 12px; padding: 12px; background: var(--bg); grid-auto-rows: 1fr; }
.cc-focus[data-cols="1"][b-5ttx8n8p7p] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.cc-focus[data-cols="2"][b-5ttx8n8p7p] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.cc-focus[data-cols="4"][b-5ttx8n8p7p] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* ── Wallboard (12/16-up) ──────────────────────────────────────────────────────
   Tiles on top for awareness, ONE full conversation underneath (the cockpit) where
   replies are typed. Tile text stays READABLE — it eases from 10px on a laptop up to
   the full 14px on a wide monitor — which means 16 readable tiles genuinely can't fit
   the top area on a small screen, so the tile grid scrolls rather than shrinking the
   text to illegibility. Drag its bottom-right corner to trade tiles against cockpit. */
.cc-focus.wall[b-5ttx8n8p7p] { display: flex; flex-direction: column; grid-auto-rows: initial; }
.cc-wall-grid[b-5ttx8n8p7p] {
    --tile-fs: clamp(10px, 0.34vw + 5.6px, 14px);
    display: grid; gap: 8px; align-content: start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, auto);
    /* 2 : 1 against the cockpit below — the requested two-thirds / one-third, expressed as flex
       ratios because a percentage height has no definite parent to resolve against here (it
       collapsed to the min-height). Resizable from its bottom-right corner. */
    flex: 2 1 0; min-height: 130px;
    overflow: auto; resize: vertical;
    padding-right: 2px;
}
@media (max-width: 1500px) { .cc-wall-grid[b-5ttx8n8p7p] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .cc-wall-grid[b-5ttx8n8p7p] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-wall-split[b-5ttx8n8p7p] { height: 6px; flex: 0 0 auto; margin: 2px 0 6px; border-radius: 3px; background: var(--border);
                 opacity: .6; }

.cc-tile[b-5ttx8n8p7p] {
    position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0;
    font-size: var(--tile-fs); line-height: 1.35;
    background: var(--surface); border-radius: 8px;
    /* Same NEGATIVE-sentiment escalation the queue tiles and panels wear (--neg-w/-c/-glow come
       from NegBorderVars): the red border is the whole point of a wallboard — you spot the unhappy
       conversation across the room. Without this the vars were set on the tile but nothing read them. */
    border: var(--neg-w, 1px) solid var(--neg-c, var(--border));
    box-shadow: var(--neg-glow, 0 0 0 transparent);
    padding: 6px 8px; cursor: pointer; overflow: hidden;
}
/* Hover lifts the tile WITHOUT repainting its border — overriding border-color here would wipe
   out the sentiment escalation, which is the one thing that must never be hidden. */
.cc-tile:hover[b-5ttx8n8p7p] { box-shadow: var(--neg-glow, 0 0 0 transparent), 0 6px 18px rgba(0,0,0,.20); }
.cc-tile.sel[b-5ttx8n8p7p] { outline: 2px solid var(--primary); outline-offset: -2px; }
.cc-tile.human[b-5ttx8n8p7p] { background: var(--surface-2); }
.cc-tile.empty[b-5ttx8n8p7p] { align-items: center; justify-content: center; color: var(--text-4); border-style: dashed; cursor: default; }
.cc-tile.empty.drop-ready[b-5ttx8n8p7p] { border-color: var(--primary); background: var(--primary-soft, var(--surface-2)); }

.ct-h[b-5ttx8n8p7p] { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ct-av[b-5ttx8n8p7p] { flex: 0 0 auto; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center;
         background: var(--surface-2); font-size: .85em; font-weight: 600; }
.ct-nm[b-5ttx8n8p7p] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-pin[b-5ttx8n8p7p] { flex: 0 0 auto; font-size: .9em; }
.ct-state[b-5ttx8n8p7p] { margin-left: auto; flex: 0 0 auto; font-size: .82em; padding: 0 .4em; border-radius: 999px;
            color: var(--state-c); border: 1px solid currentColor; }
.ct-meta[b-5ttx8n8p7p] { color: var(--text-3); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-thread[b-5ttx8n8p7p] { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.ct-msg[b-5ttx8n8p7p] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 5px; border-radius: 5px; }
.ct-msg.them[b-5ttx8n8p7p] { background: var(--surface-2); }
.ct-msg.us[b-5ttx8n8p7p] { color: var(--text-3); }

/* Hover = read it properly, at full size, without moving it. Delayed so a pointer crossing
   the wall doesn't strobe, and suppressed mid-drag so it can't fight drag-and-drop. */
/* FIXED, not absolute: the tile clips its own content and the tile grid scrolls, so an anchored
   popup was cut off by both. Positioned against the viewport it escapes every clip without any
   JS — and a consistent, large, centred panel is easier to read than one that darts about. */
.cc-tile-pop[b-5ttx8n8p7p] {
    position: fixed; left: 50%; top: 50%; z-index: 60;
    width: min(760px, 78vw); max-height: 70vh; overflow: auto;
    font-size: 13px; line-height: 1.45;
    background: var(--surface); border: 1px solid var(--primary); border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,.34); padding: 14px 16px;
    opacity: 0; visibility: hidden; transform: translate(-50%, -48%);
    transition: opacity .12s ease .45s, transform .12s ease .45s, visibility 0s linear .45s;
}
.cc-tile:hover .cc-tile-pop[b-5ttx8n8p7p] { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.cc-focus.dragging .cc-tile-pop[b-5ttx8n8p7p] { display: none; }
.ctp-h[b-5ttx8n8p7p] { font-weight: 600; margin-bottom: 6px; color: var(--text-2); }
/* The shared .dot-sep draws nothing inside these new headers — give it its own dot here. */
.ctp-h .dot-sep[b-5ttx8n8p7p], .ct-meta .dot-sep[b-5ttx8n8p7p] {
    display: inline-block; width: 3px; height: 3px; border-radius: 50%;
    background: var(--text-4); margin: 0 6px; vertical-align: middle;
}
.ctp-body[b-5ttx8n8p7p] { display: flex; flex-direction: column; gap: 4px; }
.ctp-msg[b-5ttx8n8p7p] { padding: 3px 8px; border-radius: 7px; }
.ctp-msg.them[b-5ttx8n8p7p] { background: var(--surface-2); }
.ctp-msg.us[b-5ttx8n8p7p] { color: var(--text-3); }

/* The wallboard's cockpit: whatever sits below the tiles fills the remaining height —
   the working panel, or the empty-state prompt when nothing is selected yet.
   The min-height is sized to the panel's FIXED-height furniture (header ~57 + status strip
   ~30 + composer with its checkbox row and quick buttons ~170) plus a sliver of transcript:
   at 160px the panel's overflow:hidden CLIPPED the composer's lower half — the take-over
   controls were literally out of sight (Jul 2026). The tile grid yields (scrolling sooner
   on short screens) because a cockpit you can't type in is useless, while tiles that
   scroll are merely inconvenient. */
.cc-focus.wall .cc-panel[b-5ttx8n8p7p],
.cc-focus.wall .cc-slot-empty[b-5ttx8n8p7p] { flex: 1 1 0; min-height: 350px; }
/* In the cockpit the transcript absorbs the squeeze — the composer never does. */
.cc-focus.wall .cc-thread[b-5ttx8n8p7p] { min-height: 48px; }
.cc-focus.wall .cc-composer[b-5ttx8n8p7p] { flex-shrink: 0; }

.cc-autobtn[b-5ttx8n8p7p] { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px;
              border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
              font-size: var(--fs-xs); cursor: pointer; }
.cc-autobtn:hover[b-5ttx8n8p7p] { border-color: var(--primary); }
.cc-autobtn.on[b-5ttx8n8p7p] { background: var(--primary); border-color: var(--primary); color: #fff; }
.cc-autobtn svg[b-5ttx8n8p7p] { width: 12px; height: 12px; }

/* The preview panel wears its SLOT's pastel as the WHOLE background (matching the queue tile it
   mirrors — a header-only tint was too subtle), while the border + glow escalate with NEGATIVE
   sentiment: nothing while calm, 2/4/8px light→dark red from 4/10 up. */
.cc-panel[b-5ttx8n8p7p] { background: color-mix(in srgb, var(--slot-c, transparent) 18%, var(--surface));
    border: var(--neg-w, 1px) solid var(--neg-c, var(--border)); border-radius: var(--r-lg);
    box-shadow: var(--neg-glow, 0 0 0 transparent), var(--shadow-1);
    display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
    transition: box-shadow .12s, border-color .12s; }
.cc-panel.active[b-5ttx8n8p7p] { box-shadow: 0 0 0 2px var(--primary-ring), var(--neg-glow, 0 0 0 transparent), var(--shadow-2); }
.cc-panel.human[b-5ttx8n8p7p] { border-color: var(--primary-ring); }
/* Handled by ANOTHER advisor — purple border + top accent so it's unmistakable at a glance. */
.cc-panel.owned-other[b-5ttx8n8p7p] { border-color: var(--purple); }
.cc-panel.owned-other[b-5ttx8n8p7p] { box-shadow: inset 0 3px 0 0 var(--purple), var(--shadow-1); }
.cc-qitem.owned-other[b-5ttx8n8p7p] { --state-c: var(--purple); }

/* "Preview" affordance for signals not yet wired to live conversations (kept in the UI, honestly flagged). */
.cc-preview-pill[b-5ttx8n8p7p] { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; cursor: help;
    font-size: var(--fs-xs); color: var(--purple); background: var(--purple-soft);
    border-radius: 999px; padding: 2px 9px; }
.cc-preview-pill svg[b-5ttx8n8p7p] { width: 12px; height: 12px; }
.cc-preview[b-5ttx8n8p7p] { opacity: .55; cursor: help; }   /* dims a placeholder signal + shows it's hover-explained */

.cc-ph[b-5ttx8n8p7p] { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--border); }
.cc-ph-av[b-5ttx8n8p7p] { width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center;
    font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(135deg, oklch(72% 0.1 295), oklch(64% 0.12 320)); }
.cc-ph-id[b-5ttx8n8p7p] { min-width: 0; flex: 1; }
.cc-ph-name[b-5ttx8n8p7p] { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; line-height: 1.15; min-width: 0; }
.cc-ph-name .nm[b-5ttx8n8p7p] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cc-ph-name .flag[b-5ttx8n8p7p] { flex-shrink: 0; font-size: 10px; padding: 2px 7px; }
.cc-ph-meta[b-5ttx8n8p7p] { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.cc-ph-meta > span:not(.dot-sep)[b-5ttx8n8p7p] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ph-meta .topic-m[b-5ttx8n8p7p] { flex-shrink: 0; font-weight: 500; color: var(--text-2); }
.cc-ph-meta .dot-sep[b-5ttx8n8p7p] { width: 3px; height: 3px; border-radius: 999px; background: var(--text-4); flex-shrink: 0; }
.cc-ph-meta .mono[b-5ttx8n8p7p] { font-variant-numeric: tabular-nums; }
.cc-ph-actions[b-5ttx8n8p7p] { display: flex; align-items: center; gap: 4px; }
.cc-iconbtn[b-5ttx8n8p7p] { appearance: none; border: 1px solid transparent; background: transparent; color: var(--text-3);
    width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; }
.cc-iconbtn:hover[b-5ttx8n8p7p] { background: var(--surface-2); color: var(--text); }
.cc-iconbtn svg[b-5ttx8n8p7p] { width: 15px; height: 15px; }

.cc-strip[b-5ttx8n8p7p] { display: flex; align-items: center; gap: 10px; padding: 7px 13px; font-size: var(--fs-xs);
    border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.cc-strip .seg-l[b-5ttx8n8p7p] { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 500; }
.cc-strip .seg-l svg[b-5ttx8n8p7p] { width: 13px; height: 13px; }
.cc-meter[b-5ttx8n8p7p] { display: inline-flex; align-items: center; gap: 5px; }
.cc-meter .bars[b-5ttx8n8p7p] { display: inline-flex; gap: 2px; align-items: flex-end; }
.cc-meter .bars i[b-5ttx8n8p7p] { width: 4px; border-radius: 1px; background: var(--surface-3); display: block; }
.cc-meter .bars i.on[b-5ttx8n8p7p] { background: var(--mc, var(--success)); }

.cc-thread[b-5ttx8n8p7p] { flex: 1; min-height: 96px; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.msg[b-5ttx8n8p7p] { display: flex; flex-direction: column; gap: 3px; max-width: 84%; }
.msg .b[b-5ttx8n8p7p] { padding: 9px 12px; border-radius: 13px; font-size: var(--fs-sm); line-height: 1.45; }
.msg .m[b-5ttx8n8p7p] { font-size: 10px; color: var(--text-4); display: flex; align-items: center; gap: 5px; padding: 0 4px; }
.msg.tenant[b-5ttx8n8p7p] { align-self: flex-start; }
.msg.tenant .b[b-5ttx8n8p7p] { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 4px; }
.msg.ai[b-5ttx8n8p7p] { align-self: flex-end; align-items: flex-end; }
.msg.ai .b[b-5ttx8n8p7p] { background: var(--info-soft); color: oklch(28% 0.06 240); border-bottom-right-radius: 4px; border: 1px solid oklch(88% 0.04 240); }
.adm-shell[data-theme="dark"] .msg.ai .b[b-5ttx8n8p7p] { color: oklch(88% 0.05 240); border-color: oklch(38% 0.07 240); }
.msg.agent[b-5ttx8n8p7p] { align-self: flex-end; align-items: flex-end; }
.msg.agent .b[b-5ttx8n8p7p] { background: var(--primary); color: var(--primary-on); border-bottom-right-radius: 4px; }
.msg.system[b-5ttx8n8p7p] { align-self: center; max-width: 92%; }
.msg.system .b[b-5ttx8n8p7p] { background: transparent; color: var(--text-3); font-size: var(--fs-xs); text-align: center;
    border: 1px dashed var(--border); border-radius: 999px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; }
.msg.system .b svg[b-5ttx8n8p7p] { width: 12px; height: 12px; }
/* An answer the ENGINE selected itself (blackboard auto-answer) — amber, matching the recap card the
   tenant saw in the chat, so the console reads the same moment the same way. Bot-side (the engine
   answered), hence right-aligned like the AI bubbles, but visibly not something anybody typed. */
.msg.auto[b-5ttx8n8p7p] { align-self: flex-end; align-items: flex-end; max-width: 88%; }
.msg.auto .b[b-5ttx8n8p7p] { background: var(--warn-soft, #fdf0d5); color: oklch(38% 0.09 70);
    border: 1px dashed oklch(70% 0.12 70); border-bottom-right-radius: 4px;
    font-size: var(--fs-xs); display: inline-flex; align-items: flex-start; gap: 6px; }
.msg.auto .b svg[b-5ttx8n8p7p] { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; }
.adm-shell[data-theme="dark"] .msg.auto .b[b-5ttx8n8p7p] { color: oklch(85% 0.09 70); border-color: oklch(45% 0.09 70); }
/* Something the assistant said with NO user turn behind it — the opening greeting, a message node the
   script advanced through, a re-presented state on a new surface. Bot-side like .ai, but violet and
   dashed so an advisor scanning the thread can see instantly which lines nobody prompted. */
.msg.unprompted[b-5ttx8n8p7p] { align-self: flex-end; align-items: flex-end; max-width: 88%; }
.msg.unprompted .b[b-5ttx8n8p7p] { background: var(--primary-soft, oklch(96% 0.03 295)); color: oklch(34% 0.10 295);
    border: 1px dashed oklch(72% 0.11 295); border-bottom-right-radius: 4px; }
.adm-shell[data-theme="dark"] .msg.unprompted .b[b-5ttx8n8p7p] { color: oklch(87% 0.07 295); border-color: oklch(46% 0.09 295); }
.msg .who-unprompted[b-5ttx8n8p7p] { color: oklch(55% 0.14 295); font-weight: 600; }
.adm-shell[data-theme="dark"] .msg .who-unprompted[b-5ttx8n8p7p] { color: oklch(78% 0.10 295); }
.msg .who-ai[b-5ttx8n8p7p] { color: var(--info); font-weight: 600; }
.msg .who-agent[b-5ttx8n8p7p] { color: var(--primary); font-weight: 600; }

.cc-typing[b-5ttx8n8p7p] { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
    background: var(--surface-2); border-radius: 13px; border-bottom-left-radius: 4px; }
.cc-typing i[b-5ttx8n8p7p] { width: 6px; height: 6px; border-radius: 999px; background: var(--text-4); animation: ccblink-b-5ttx8n8p7p 1.2s infinite; }
.cc-typing i:nth-child(2)[b-5ttx8n8p7p] { animation-delay: .2s; } .cc-typing i:nth-child(3)[b-5ttx8n8p7p] { animation-delay: .4s; }
@keyframes ccblink-b-5ttx8n8p7p { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.cc-suggest[b-5ttx8n8p7p] { margin: 0 13px 10px; border: 1px solid oklch(88% 0.05 295); background: linear-gradient(135deg, var(--primary-soft), transparent);
    border-radius: var(--r-md); padding: 10px 12px; }
.adm-shell[data-theme="dark"] .cc-suggest[b-5ttx8n8p7p] { border-color: oklch(40% 0.08 295); }
.cc-suggest .sg-h[b-5ttx8n8p7p] { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--primary);
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cc-suggest .sg-h svg[b-5ttx8n8p7p] { width: 12px; height: 12px; }
.cc-suggest .sg-text[b-5ttx8n8p7p] { font-size: var(--fs-sm); color: var(--text); line-height: 1.45;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-focus[data-cols="1"] .cc-suggest .sg-text[b-5ttx8n8p7p] { -webkit-line-clamp: unset; }
.cc-suggest .sg-acts[b-5ttx8n8p7p] { display: flex; gap: 6px; margin-top: 9px; }

.cc-composer[b-5ttx8n8p7p] { border-top: 1px solid var(--border); padding: 10px 12px; background: var(--surface); }
.cc-monitor-bar[b-5ttx8n8p7p] { display: flex; align-items: center; gap: 10px; }
.cc-monitor-bar .mb-text[b-5ttx8n8p7p] { font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: 7px; flex: 1; }
.cc-monitor-bar .mb-text svg[b-5ttx8n8p7p] { width: 14px; height: 14px; color: var(--info); }
.cc-input-wrap[b-5ttx8n8p7p] { display: flex; align-items: flex-end; gap: 8px; }
.cc-input[b-5ttx8n8p7p] { flex: 1; min-height: 38px; max-height: 120px; padding: 9px 12px; border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-sm); resize: none; line-height: 1.4; }
.cc-input:focus[b-5ttx8n8p7p] { outline: none; border-color: var(--primary-ring); box-shadow: 0 0 0 3px var(--primary-soft); }
.cc-send[b-5ttx8n8p7p] { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-md); border: 0; background: var(--primary);
    color: var(--primary-on); display: grid; place-items: center; cursor: pointer; }
.cc-send:hover[b-5ttx8n8p7p] { background: var(--primary-strong); }
.cc-send:disabled[b-5ttx8n8p7p] { opacity: .4; cursor: not-allowed; }
.cc-send svg[b-5ttx8n8p7p] { width: 16px; height: 16px; }
.cc-live-flag[b-5ttx8n8p7p] { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--primary); margin-bottom: 7px; }
.cc-live-flag .pulse[b-5ttx8n8p7p] { width: 7px; height: 7px; background: var(--primary); }
.cc-live-flag .pulse[b-5ttx8n8p7p]::after { background: var(--primary); }
.cc-quickbar[b-5ttx8n8p7p] { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.cc-quick[b-5ttx8n8p7p] { font-size: var(--fs-xs); color: var(--text-2); border: 1px solid var(--border); background: var(--surface);
    border-radius: 999px; padding: 3px 10px; cursor: pointer; font-family: inherit; }
.cc-quick:hover[b-5ttx8n8p7p] { border-color: var(--primary-ring); color: var(--primary); }

.cc-slot-empty[b-5ttx8n8p7p] { border: 1.5px dashed var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; color: var(--text-4); background: var(--surface); cursor: default; text-align: center; padding: 20px; }
.cc-slot-empty svg[b-5ttx8n8p7p] { width: 26px; height: 26px; opacity: .6; }
.cc-slot-empty .se-h[b-5ttx8n8p7p] { font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); }
.cc-slot-empty .se-s[b-5ttx8n8p7p] { font-size: var(--fs-xs); }
/* A queue tile is mid-drag: light the empty slots up as drop targets. */
.cc-slot-empty.drop-ready[b-5ttx8n8p7p] { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* The toolbar's sample/preview badge doubles as the live ⇄ sample-data toggle. */
.cc-badge-btn[b-5ttx8n8p7p] { font: inherit; cursor: pointer; }
.cc-badge-btn:hover[b-5ttx8n8p7p] { filter: brightness(.96); }

/* Queue-order dropdown (queue header). */
.cc-sort[b-5ttx8n8p7p] { margin-left: 8px; font: inherit; font-size: var(--fs-xs); color: var(--text-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 2px 6px; max-width: 150px; }
/* /Components/Pages/Admin/KfxAdminVersions.razor.rz.scp.css */
.kf-full-height-git[b-jve5ngyu70] {
    height:calc(100vw - 164px);
}

/* /Components/Pages/Admin/KfxGridDataExport.razor.rz.scp.css */
/* Understated, right-aligned footer for the raw grid-data export buttons — small and low-contrast so the
   eye goes to the main "Export" menu (top-right), not here. */

.kfx-data-export[b-zy8qgrd5y7] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    padding: 6px 24px 14px;
    opacity: .65;
}

.kfx-data-export:hover[b-zy8qgrd5y7] {
    opacity: 1;
}

.kfx-data-export-note[b-zy8qgrd5y7] {
    font-size: 10.5px;
    color: var(--adm-text-4, #94a3b8);
}

.kfx-data-export-btn[b-zy8qgrd5y7] {
    font-size: 10.5px;
    line-height: 1.4;
    padding: 1px 7px;
    border: 1px solid var(--adm-border, #e2e8f0);
    border-radius: 4px;
    background: transparent;
    color: var(--adm-text-3, #64748b);
    cursor: pointer;
}

.kfx-data-export-btn:hover[b-zy8qgrd5y7] {
    background: var(--adm-surface-2, #f1f5f9);
    color: var(--adm-text-2, #334155);
}

.kfx-data-export-btn:disabled[b-zy8qgrd5y7] {
    opacity: .5;
    cursor: default;
}
/* /Components/Pages/Admin/KfxReportExportBar.razor.rz.scp.css */
/* The primary report actions (Export / Email) — made deliberately larger and more prominent than a normal
   admin button, so they read as the main way to get the FORMATTED report out (vs the understated raw
   grid-data buttons at the foot of the report). */

.kfx-export-main[b-4mavsklto7] {
    font-size: 14px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Nudge the inline icon up to a matching size. */
.kfx-export-main[b-4mavsklto7]  svg {
    width: 17px;
    height: 17px;
}

.kfx-export-main:hover:not(:disabled)[b-4mavsklto7] {
    filter: brightness(0.96);
    box-shadow: 0 2px 8px rgba(15, 18, 25, .14);
}
/* /Components/Pages/Admin/KfxReportParamsHeader.razor.rz.scp.css */
/* "Reporting on" parameter header at the top of a run report — labelled, readable, clearly the report's
   subject (not the selection controls above it). */

.kfx-rep-params[b-qe80vkqrop] {
    margin: 14px 24px 4px;
    padding: 12px 16px;
    border: 1px solid var(--adm-border, #e2e8f0);
    border-left: 3px solid var(--keyfaxButtonPrimaryBackgroundColor, #2563eb);
    border-radius: 8px;
    background: var(--adm-surface-2, #f8fafc);
}

.kfx-rep-params-caption[b-qe80vkqrop] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--adm-text-4, #94a3b8);
    margin-bottom: 8px;
}

.kfx-rep-params-items[b-qe80vkqrop] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.kfx-rep-param[b-qe80vkqrop] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kfx-rep-param-label[b-qe80vkqrop] {
    font-size: 11px;
    color: var(--adm-text-4, #94a3b8);
}

.kfx-rep-param-value[b-qe80vkqrop] {
    font-size: 14px;
    font-weight: 600;
    color: var(--adm-text-1, #0f172a);
}
/* /Components/Pages/Diagnostics/KfxAskKeyfax.razor.rz.scp.css */
/* Self-contained styling for the demo "Ask Keyfax" board — deliberately independent of the kfx-*/adm-*
   theme tokens so it looks identical wherever it is dropped in. */

/* Match the Q&A card (.kfx-qa-stage): same surface, border, radius and shadow tokens so it reads as a
   peer white card, with bottom margin to separate it from the Q&A below. */
.akf-board[b-qpzfql64z8] {
    border: 1px solid var(--border, #e6e6ef);
    background: var(--surface, #fff);
    border-radius: var(--r-lg, 12px);
    padding: 20px 22px;
    margin: 0 0 20px;
    box-shadow: var(--shadow-1, 0 1px 3px rgba(20, 20, 40, .08));
    font-family: inherit;
}

.akf-head[b-qpzfql64z8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.akf-head-spark[b-qpzfql64z8] {
    color: #9b86d8;
    font-size: 15px;
}

.akf-title[b-qpzfql64z8] {
    font-size: 15px;
    font-weight: 700;
    color: #2c2c3a;
}

.akf-badge[b-qpzfql64z8] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7d6fb0;
    background: #f1edfb;
    border: 1px solid #e3dbf6;
    border-radius: 999px;
    padding: 2px 8px;
}

.akf-blurb[b-qpzfql64z8] {
    font-size: 12px;
    color: #6c6c7a;
    margin: 4px 0 12px;
}

.akf-bar[b-qpzfql64z8] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.akf-field[b-qpzfql64z8] {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 220px;
}

.akf-label[b-qpzfql64z8] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9a9aa8;
}

.akf-input[b-qpzfql64z8] {
    width: 100%;
    box-sizing: border-box;
    background: #f4f4f8;
    border: 1px solid #e6e6ef;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: #2c2c3a;
    outline: none;
    transition: border-color .12s, background .12s;
}

.akf-input[b-qpzfql64z8]::placeholder {
    color: #a7a7b4;
}

.akf-input:focus[b-qpzfql64z8] {
    border-color: #b9a7e6;
    background: #fff;
}

.akf-input:disabled[b-qpzfql64z8] {
    opacity: .6;
}

.akf-btn[b-qpzfql64z8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #b9a7e6 0%, #a98fde 100%);
    box-shadow: 0 1px 2px rgba(120, 90, 200, .25);
    transition: filter .12s, opacity .12s;
    white-space: nowrap;
}

.akf-btn:hover:not(:disabled)[b-qpzfql64z8] {
    filter: brightness(1.05);
}

.akf-btn:disabled[b-qpzfql64z8] {
    opacity: .55;
    cursor: default;
}

.akf-spark[b-qpzfql64z8] {
    font-size: 13px;
    line-height: 1;
}

/* ── Result board ── */
.akf-result[b-qpzfql64z8] {
    margin-top: 14px;
    border: 1px solid #ece8f7;
    background: #faf9fe;
    border-radius: 10px;
    padding: 14px 16px;
}

.akf-result-busy[b-qpzfql64z8] {
    color: #7d6fb0;
    font-size: 13px;
    font-style: italic;
}

.akf-answer[b-qpzfql64z8] {
    font-size: 13.5px;
    line-height: 1.55;
    color: #34343f;
    white-space: pre-wrap;
}

.akf-cite[b-qpzfql64z8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e0daf3;
    font-size: 12px;
}

.akf-cite-tag[b-qpzfql64z8] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a7cc0;
    background: #f1edfb;
    border-radius: 4px;
    padding: 2px 6px;
}

.akf-cite-link[b-qpzfql64z8] {
    color: #6a55b8;
    font-weight: 600;
    text-decoration: none;
}

.akf-cite-link:hover[b-qpzfql64z8] {
    text-decoration: underline;
}

.akf-cite-sec[b-qpzfql64z8] {
    color: #8a8a96;
}

.akf-cite-flag[b-qpzfql64z8] {
    color: #b06a3a;
    background: #fbf0e6;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
}
/* /Components/Pages/Diagnostics/KfxResultCards.razor.rz.scp.css */
/* The advisor result-cards experience: stacked sub-session cards, each with its services summary,
   editable export fields and per-card task mail-merge editors. */

.kfx-rc[b-fk745hpd1h] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 860px;
}

.kfx-rc-card[b-fk745hpd1h] {
    border: 1px solid var(--adm-border, #e2e8f0);
    border-radius: 10px;
    padding: 16px 18px;
    background: var(--adm-surface, #fff);
}

.kfx-rc-current[b-fk745hpd1h] {
    border-color: var(--keyfaxButtonPrimaryBackgroundColor, #2563eb);
    box-shadow: 0 0 0 1px var(--keyfaxButtonPrimaryBackgroundColor, #2563eb) inset;
}

.kfx-rc-head[b-fk745hpd1h] {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--adm-text-1, #0f172a);
}

.kfx-rc-details[b-fk745hpd1h] {
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--adm-text-2, #334155);
}

.kfx-rc-grid[b-fk745hpd1h] {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 14px;
    font-size: .9rem;
}

.kfx-rc-grid th[b-fk745hpd1h], .kfx-rc-grid td[b-fk745hpd1h] {
    border-bottom: 1px solid var(--adm-border, #e2e8f0);
    padding: 6px 8px;
    text-align: left;
}

.kfx-rc-grid thead th[b-fk745hpd1h] {
    background: var(--adm-surface-2, #f6f6f1);
    font-weight: 600;
}

.kfx-rc-num[b-fk745hpd1h] { text-align: right; }

.kfx-rc-field[b-fk745hpd1h] { margin-bottom: 12px; }

.kfx-rc-label[b-fk745hpd1h] {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.kfx-rc-input[b-fk745hpd1h] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: 4px;
    font: inherit;
}

/* ── Access-times quick keys + Special Instructions picklist (web-form parity) ── */
.kfx-rc-qhint[b-fk745hpd1h] {
    font-size: 12px;
    color: var(--adm-text-4, #8a8f9c);
    margin-bottom: 4px;
}

.kfx-rc-quick[b-fk745hpd1h] { border-collapse: separate; border-spacing: 3px; margin: 0 0 6px -3px; }

.kfx-rc-qk[b-fk745hpd1h] {
    min-width: 52px;
    padding: 4px 8px;
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: 4px;
    background: var(--adm-surface-2, #f6f6f1);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.kfx-rc-qk:hover[b-fk745hpd1h] { background: var(--adm-surface-3, #ecece5); }

.kfx-rc-qday[b-fk745hpd1h] { font-weight: 600; }

.kfx-rc-qall[b-fk745hpd1h] { white-space: nowrap; }

.kfx-rc-qdate[b-fk745hpd1h] {
    padding: 3px 6px;
    border: 1px solid var(--adm-border, #cbd5e1);
    border-radius: 4px;
    font: inherit;
    font-size: 12px;
}

.kfx-rc-pick[b-fk745hpd1h] { margin-bottom: 6px; }

/* ── Tasks ── */
.kfx-rc-task[b-fk745hpd1h] {
    border: 1px solid var(--adm-border, #e2e8f0);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
    background: var(--adm-surface-2, #fbfbf8);
}

.kfx-rc-task-head[b-fk745hpd1h] {
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kfx-rc-badge[b-fk745hpd1h] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background: var(--keyfaxButtonPrimaryBackgroundColor, #2563eb);
}

.kfx-rc-env[b-fk745hpd1h] {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 10px;
    align-items: center;
    margin-bottom: 10px;
}

.kfx-rc-env label[b-fk745hpd1h] {
    font-weight: 600;
    font-size: .85rem;
    color: var(--adm-text-2, #334155);
}

.kfx-rc-task-actions[b-fk745hpd1h] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.kfx-rc-sent[b-fk745hpd1h] {
    font-weight: 700;
    color: #15803d;
}

.kfx-rc-error[b-fk745hpd1h] {
    color: #b91c1c;
    font-size: .85rem;
}

.kfx-rc-notasks[b-fk745hpd1h] {
    color: var(--adm-text-3, #64748b);
    font-style: italic;
    margin-top: 8px;
}

/* ── Footer (engine actions) ── */
.kfx-rc-footer[b-fk745hpd1h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
}

.kfx-rc-footer-right[b-fk745hpd1h] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.kfx-btn[b-fk745hpd1h] {
    display: inline-block;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    font-size: .95rem;
    border-radius: 6px;
    border: 1px solid var(--keyfaxButtonPrimaryBorderColor, #1d4ed8);
    background: var(--keyfaxButtonPrimaryBackgroundColor, #2563eb);
    color: #fff;
}

.kfx-btn:disabled[b-fk745hpd1h] { opacity: .55; cursor: default; }

.kfx-btn.ghost[b-fk745hpd1h] {
    background: transparent;
    color: var(--keyfaxButtonPrimaryBackgroundColor, #2563eb);
}

.kfx-btn.danger[b-fk745hpd1h] {
    background: #7a7a86;
    border-color: #7a7a86;
}

.kfx-btn.danger:hover[b-fk745hpd1h] { background: #63636e; }
/* /Components/Pages/Diagnostics/StaffDiagnostics.razor.rz.scp.css */
/* Styles moved to wwwroot/css/keyfax-vnext.css (global — needed by child components) */