/* /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. */
    /* DIVIDED BY --adm-zoom, like every other full-viewport consumer in the shell (see the note at
       the top of keyfax-admin.css). Viewport units do NOT shrink under `zoom`: the shell itself is
       `height: calc(100vh / Z)`, so inside it the body is (100vh/Z - topbar - statusbar) CSS pixels.
       Without the divide this claimed a full 100vh-76px REGARDLESS of zoom and overflowed the bottom
       by 69px at 110% and 215px at 125% — which clipped the composer and the take-control buttons
       clean off the screen, with no scrollbar to reveal them (reported 15 Sep 2026, and the exact
       failure the comment below already warned about). The arithmetic must stay exact. */
    max-height: calc(100vh / var(--adm-zoom, 1) - var(--adm-topbar-h, 48px) - var(--adm-statusbar-h, 28px));
    height: calc(100vh / var(--adm-zoom, 1) - 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 ───────────────────────────────────────────────────────────────── */
/* The white title band, matching every other page's (KfxAdminPageHeader / .adm-main-head): same
   padding, the same strong separator rather than a hairline, and the same title/subtitle type. This
   toolbar carries live badges and filter chips inline, so it keeps its own markup rather than using
   the shared control — only the LOOK is shared (Tom, 28 Aug 2026). */
.cc-toolbar[b-5ttx8n8p7p] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 18px 24px 14px; background: var(--surface);
    border-bottom: 1px solid var(--keyfaxFocusHighlightBorderColor);
}
/* A column now: the title and its badges on one line, the subtitle beneath. */
.cc-toolbar .ttl[b-5ttx8n8p7p] { display: flex; flex-direction: column; gap: 1px; }
.cc-toolbar .ttl .ttl-line[b-5ttx8n8p7p] { display: flex; align-items: center; gap: 9px;
    font-size: 16px; font-weight: 600; color: var(--text); }
.cc-toolbar .ttl h1[b-5ttx8n8p7p] { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; }
.cc-toolbar .ttl .ttl-sub[b-5ttx8n8p7p] { font-size: 13px; font-weight: 600; color: var(--text-2); }
.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; }
/* Wraps: the column is a fixed 320px and this row now carries the label, the attention badge, the
   order, the count AND Auto-Select, so the button takes a second line rather than squeezing the
   others. row-gap keeps that line clear of the one above. */
.cc-queue-head[b-5ttx8n8p7p] { padding: 11px 14px; border-bottom: 1px solid var(--border); display: flex;
    align-items: center; gap: 8px; flex-wrap: wrap; row-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;
    /* The same UA-button trap as .kfx-rc-msgtoggle, in its COLUMN form: a button's content is centred
       by the UA stylesheet, which on a column flex container is align-items — so every row shrank to
       fit and floated to the middle of the tile instead of filling it. text-align cannot reach it. */
    align-items: stretch;
    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; }
/* A reply taken from a policy document: amber, bolder and boxed, so it can never be read as the
   assistant's own words (the citation link alone was not enough for a tester, 11 Sep 2026). */
.msg .who-policy[b-5ttx8n8p7p] {
  color: oklch(45% 0.15 60); font-weight: 700;
  background: oklch(95% 0.06 80); border: 1px solid oklch(80% 0.12 70); border-radius: 4px; padding: 0 5px;
}
.adm-shell[data-theme="dark"] .msg .who-policy[b-5ttx8n8p7p] { color: oklch(85% 0.12 80); background: oklch(30% 0.06 70); border-color: oklch(50% 0.10 70); }
.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;
}

/* The SAME colours as the start page's search-row "Ask Keyfax" (.kfx-btn.primary in keyfax-vnext.css:
   solid --primary with --primary-on text, --primary-strong on hover) and the same disabled dimming
   (app.css dims every disabled button to .3). This board used to wear its own pale lavender gradient
   at .55 when disabled, so the button looked different — and barely changed — once past the start
   page (Tom, 10 Sep 2026). Fallbacks are the light-theme values, for a host without the tokens. */
.akf-btn[b-qpzfql64z8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--primary, #8D52A0);
    border-radius: var(--r-sm, 6px);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-on, #fff);
    cursor: pointer;
    background: var(--primary, #8D52A0);
    transition: background 120ms, border-color 120ms, opacity .12s;
    white-space: nowrap;
}

.akf-btn:hover:not(:disabled)[b-qpzfql64z8] {
    background: var(--primary-strong, #6F3D80);
    border-color: var(--primary-strong, #6F3D80);
}

.akf-btn:disabled[b-qpzfql64z8] {
    opacity: .3;
    cursor: not-allowed;
}

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

/* ── Result board ── */
.akf-result[b-qpzfql64z8] {
    position: relative;          /* anchors the dismiss button */
    margin-top: 14px;
    border: 1px solid #ece8f7;
    background: #faf9fe;
    border-radius: 10px;
    padding: 14px 40px 14px 16px; /* room on the right for the ✕ */
}

/* The ✕ that clears an answer: quiet until hovered, in the card's own purple family. */
.akf-dismiss[b-qpzfql64z8] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #7d6fb0;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.akf-dismiss:hover[b-qpzfql64z8] {
    background: #f1edfb;
    border-color: #e3dbf6;
    color: #4b3f80;
}

.akf-dismiss:focus-visible[b-qpzfql64z8] {
    outline: 2px solid #9b86d8;
    outline-offset: 1px;
}

.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/KfxDesignedForm.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────────────
   Giving a designed form the surface's own control styling.

   HmsFormRenderer marks its controls with the HMS stylesheet's class names — .input, .select,
   .textarea, .btn — because that is where it normally lives. The diagnostics surfaces load
   keyfax-vnext.css instead, which knows nothing about those names, so an inline form arrived with
   no borders, no rounding, no background and browser-default heights; the Yes/No buttons did not
   read as buttons at all (Tom, 28 Aug 2026).

   Restated here against the SAME tokens the surface's own controls use — .kfx-input and .kfx-btn in
   keyfax-vnext.css — so a form's fields look like the engine's fields they sit beside. Deliberately
   scoped to this component rather than added to keyfax-vnext.css: .input and .btn are far too
   general to define globally, and would reach into anything else that happens to use them.

   ::deep throughout, because the markup belongs to the renderer, not to this component.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Field labels ── mirrors .kfx-label ─────────────────────────────────────
   The renderer writes these INLINE (display:block; font-size:11px; color:var(--text-3)), so a
   stylesheet cannot win without !important — which is why it is here and nowhere else in this file.

   Matched on that inline display:block, which separates a FIELD's caption from the consent
   component's "I agree", written display:inline-flex beside its checkbox. Uppercasing that one
   would be wrong: it is a sentence the tenant is agreeing to, not a field name. */
[b-yryjk3qgtv] label[style*="display:block"] {
    font-size: var(--fs-xs) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3) !important;
    margin-bottom: 5px !important;
}

/* ── Text-like controls ── mirrors .kfx-select / .kfx-input ─────────────────── */
[b-yryjk3qgtv] .input,
[b-yryjk3qgtv] .select {
    box-sizing: border-box;
    height: var(--row-h);
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: var(--fs-body);
    font-family: inherit;
    color: var(--text);
    outline: none;
    transition: border-color 120ms;
}

/* A textarea sizes to its rows, so it takes the padding but never the fixed height. */
[b-yryjk3qgtv] .textarea {
    box-sizing: border-box;
    padding: 8px 10px;
    min-height: calc(var(--row-h) * 2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: var(--fs-body);
    font-family: inherit;
    color: var(--text);
    outline: none;
    transition: border-color 120ms;
}

[b-yryjk3qgtv] .input:focus,
[b-yryjk3qgtv] .select:focus,
[b-yryjk3qgtv] .textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* The signature component sets its own script face inline; keep that and take only the frame. */
[b-yryjk3qgtv] .input[style*="cursive"] { font-family: 'Segoe Script', 'Brush Script MT', cursive !important; }

/* ── Buttons ── mirrors .kfx-btn ────────────────────────────────────────────── */
[b-yryjk3qgtv] .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--row-h);
    padding: 0 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-body);
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms, border-color 120ms;
}

[b-yryjk3qgtv] .btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }

[b-yryjk3qgtv] .btn:hover { background: var(--surface-2); }

/* The CHOSEN Yes/No option and a lit rating star both come through as .primary. It needs its own
   hover: the base rule above paints near-white, which on a solid primary button with white text
   makes the label vanish — the trap keyfax-vnext.css records against .kfx-btn. */
[b-yryjk3qgtv] .btn.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-on);
}
[b-yryjk3qgtv] .btn.primary:hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
}

/* Repeating-group row controls — small, square, and not worth a full button's width. */
[b-yryjk3qgtv] .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
}
[b-yryjk3qgtv] .icon-btn:hover { background: var(--surface-2); }

/* ── The rest ───────────────────────────────────────────────────────────────── */
/* Native checkboxes, in the surface's accent rather than the browser's blue. */
[b-yryjk3qgtv] input[type="checkbox"] { accent-color: var(--primary); width: 15px; height: 15px; }

/* The repeating group's table, so its cells do not collide once the inputs have frames. */
[b-yryjk3qgtv] table { border-collapse: collapse; width: 100%; }
[b-yryjk3qgtv] table td, [b-yryjk3qgtv] table th { padding: 4px 6px; }
/* /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; }

/* The solid button needs its OWN hover.

   Without one, the SHARED .kfx-btn:hover in keyfax-vnext.css applied instead. That rule swaps the
   background to --surface-2 (#F1F3F7, near-white) — correct for the neutral button it was written
   for, which has dark text. This button is the branded blue with color:#fff, so hovering Submit,
   or Ok in the priority/quantity popup, painted white on near-white and the label disappeared
   (Tom, 25 Aug 2026: "impossible to see").

   Derived from the button's OWN colour rather than a fixed shade, so a tenant who brands
   --keyfaxButtonPrimaryBackgroundColor gets a darker version of THEIR blue rather than being
   dragged back to ours. Same idiom as .btn.danger:hover in hms.css.

   The background is restated rather than left to the filter alone: the filter would otherwise
   darken whatever the shared rule had already painted, which is the near-white we are fixing.

   .ghost and .danger are excluded because they are solid in their own right and carry their own
   hovers — without the exclusion this rule would put a blue border on the grey Cancel. */
.kfx-btn:hover:not(.ghost):not(.danger)[b-fk745hpd1h] {
    background: var(--keyfaxButtonPrimaryBackgroundColor, #2563eb);
    border-color: var(--keyfaxButtonPrimaryBorderColor, #1d4ed8);
}

/* Only a LIVE button reacts. A disabled one keeps its resting colour (faded by the rule above)
   rather than flashing, which the shared hover did to it as well. */
.kfx-btn:hover:not(.ghost):not(.danger):not(:disabled)[b-fk745hpd1h] { filter: brightness(.92); }

.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; }

/* Manual-change affordance: Priority/Qty read as values with a pencil, opening the justification
   popup — in-situ editing is deliberately gone (the change must carry a reason and is audited). */
.kfx-rc-manual[b-fk745hpd1h] {
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 6px;
    padding: 3px 8px;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.kfx-rc-manual:hover[b-fk745hpd1h] {
    border-color: var(--keyfaxButtonPrimaryBackgroundColor, #2563eb);
    color: var(--keyfaxButtonPrimaryBackgroundColor, #2563eb);
}

.kfx-rc-manual span[b-fk745hpd1h] { opacity: .55; font-size: .85em; margin-left: 3px; }

/* The four numbers (premium fees, proposal §10). A narrow two-column block under the services
   grid rather than a row inside it: these are totals for the JOB, and putting them in the grid
   would make them read as another service. */
.kfx-rc-totals[b-fk745hpd1h] {
  width: auto;
  min-width: 240px;
  margin-top: 8px;
}
.kfx-rc-totals td:first-child[b-fk745hpd1h] { color: var(--text-2, #4a4a5a); }
.kfx-rc-totals .kfx-rc-grand td[b-fk745hpd1h] { font-weight: 700; }

/* Why the figure is what it is. The note is quiet; the warning is not — a refused override means
   the job was priced by the fallback, which somebody may have to account for later. */
.kfx-rc-costnote[b-fk745hpd1h] {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3, #6a6a7a);
}
.kfx-rc-costwarn[b-fk745hpd1h] {
  margin-top: 6px;
  font-size: 12px;
  color: var(--danger, #c4485a);
}

/* ── The advice given, read back (TES051) ──────────────────────────────────────────────────────
   A line per message, code on the right, opening into the message as it was SHOWN. The colours are
   the interview's own (--keyfaxMsgStaffBackground / --keyfaxMsgCallerBackground, app.css), because
   an advisor checking what the caller was told should be looking at the same thing they were
   looking at when they told them — a read-back in different colours is a different message. */
.kfx-rc-msgs[b-fk745hpd1h] { margin-top: 10px; }
.kfx-rc-msgtable[b-fk745hpd1h] { width: 100%; }
.kfx-rc-msgcode[b-fk745hpd1h] { text-align: right; white-space: nowrap; color: var(--text-2, #4a4a5a); }

/* The row is a button, not a row with a button in it: the whole line is the target, which is what
   a list of collapsed things behaves like everywhere else. */
.kfx-rc-msgtoggle[b-fk745hpd1h] {
  display: flex;
  align-items: center;
  /* The browser's UA stylesheet centres a button's content, and once the button is a FLEX container
     that centring is justify-content — which text-align cannot undo, because text-align does not
     apply to flex items. The line therefore floated ~140px in from the Message column while the
     header above it stayed left (Tom, 25 Aug 2026). Stated explicitly rather than relied upon. */
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--link, #7a4f9a);
  text-align: left;
  cursor: pointer;
}
.kfx-rc-msgtoggle:hover[b-fk745hpd1h] { text-decoration: underline; }
.kfx-rc-msgchev[b-fk745hpd1h] { flex: none; width: 1em; color: var(--text-3, #6a6a7a); }

.kfx-rc-msgbodyrow > td[b-fk745hpd1h] { padding-top: 0; }
.kfx-rc-msgbox[b-fk745hpd1h] {
  max-width: 640px;
  margin: 4px 0 10px;
  border: 1px solid var(--border, #d8d8e0);
  border-radius: 4px;
  overflow: hidden;
}
.kfx-rc-msghead[b-fk745hpd1h] { padding: 10px 12px; font-weight: 600; }
.kfx-rc-msgcontent[b-fk745hpd1h] { padding: 12px; background: var(--surface, #fff); }
.kfx-rc-msgcontent :first-child[b-fk745hpd1h] { margin-top: 0; }
.kfx-rc-msgcontent :last-child[b-fk745hpd1h] { margin-bottom: 0; }
/* The provenance line legacy printed under each box — which message this was, in the terms an
   author would search for. */
.kfx-rc-msgfoot[b-fk745hpd1h] {
  padding: 6px 12px;
  border-top: 1px solid var(--border, #d8d8e0);
  background: var(--surface-2, #f7f7fa);
  font-size: 12px;
  text-align: right;
  color: var(--text-3, #6a6a7a);
}
/* One head colour per PRESENTATION STYLE (OMF049). Before this there were two — "staff" and
   everything-else — so Default, Security and Compulsory all came out in the caller blue whichever
   one the author picked. The five are the five rows in MessageStyles, in their Sequence order.
   Each stays overridable by the same --keyfaxMsg*Background custom property the first two used, so a
   customer skin can restyle them without touching this file. Security and Compulsory are the two
   deliberately SATURATED ones — they are the "stop and read this" pair — so they set a foreground
   too rather than leaving dark text on a strong ground. */
.kfx-rc-msgbox.msgDefault    .kfx-rc-msghead[b-fk745hpd1h] { background: var(--keyfaxMsgDefaultBackground, #f0f0f2); }
.kfx-rc-msgbox.msgStaff      .kfx-rc-msghead[b-fk745hpd1h] { background: var(--keyfaxMsgStaffBackground, #bce2bc); }
.kfx-rc-msgbox.msgCaller     .kfx-rc-msghead[b-fk745hpd1h] { background: var(--keyfaxMsgCallerBackground, #dcedfc); }
.kfx-rc-msgbox.msgSecurity   .kfx-rc-msghead[b-fk745hpd1h] {
  background: var(--keyfaxMsgSecurityBackground, #dc3545);
  color: var(--keyfaxMsgSecurityForeground, #fff);
}
.kfx-rc-msgbox.msgCompulsory .kfx-rc-msghead[b-fk745hpd1h] {
  background: var(--keyfaxMsgCompulsoryBackground, #ffc107);
  color: var(--keyfaxMsgCompulsoryForeground, #2a2a3a);
}
.kfx-rc-msgtitle[b-fk745hpd1h] {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1, #2a2a3a);
}
/* /Components/Pages/Diagnostics/KfxVideoAnywhereDialog.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────────────
   "Video Anywhere" dialog — the branded title band, the explanatory panel and the
   mobile/email pair.

   The palette is the product's own (--primary / --primary-soft / --primary-strong),
   not a colour invented here. TEXT on the band uses --primary-strong rather than
   --primary: the brand purple #8D52A0 does not reach AA against a light background,
   and a title is exactly where that matters.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Title band ───────────────────────────────────────────────────────────── */

.kfx-va-head[b-a4k8reqkam] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--primary-soft, #F6EFF9);
}

/* The mark, given a solid tile so it reads as a logo rather than a stray glyph. */
.kfx-va-mark[b-a4k8reqkam] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--primary, #8D52A0);
    color: #fff;
}

.kfx-va-titles[b-a4k8reqkam] { flex: 1; min-width: 0; }

/* Overrides .kfx-modal-h h3 / p, which are generic modal chrome. */
.kfx-va-titles h3[b-a4k8reqkam] {
    margin: 0;
    color: var(--primary-strong, #6F3D80);
}

.kfx-va-titles p[b-a4k8reqkam] {
    margin: 1px 0 0;
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* Pinned to the top of the band rather than centred on it, so it reads as dismiss-this-dialog
   rather than as part of the title. flex:none stops it being squeezed by a long title. */
.kfx-va-x[b-a4k8reqkam] { flex: none; align-self: flex-start; }

/* ── The explanation ──────────────────────────────────────────────────────── */

.kfx-va-intro[b-a4k8reqkam] {
    background: var(--primary-soft, #F6EFF9);
    border-left: 3px solid var(--primary, #8D52A0);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--text-2);
}

.kfx-va-intro p[b-a4k8reqkam] { margin: 0 0 6px; }
.kfx-va-intro p:last-child[b-a4k8reqkam] { margin-bottom: 0; }
.kfx-va-intro-quiet[b-a4k8reqkam] { color: var(--text-3); }

/* ── Fields ───────────────────────────────────────────────────────────────── */

/* Alternatives, so side by side — stacked, they read as three things all required. Collapses to one
   column when there is not room for two comfortable boxes. */
.kfx-va-pair[b-a4k8reqkam] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.kfx-va-hint[b-a4k8reqkam] {
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--text-3);
}

.kfx-va-err[b-a4k8reqkam] {
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: #b3413b;
}

.kfx-va-bad[b-a4k8reqkam] { border-color: #b3413b; }

/* "Did you mean …?" — a one-click accept, because retyping an address to fix one letter is how the
   NEXT typo gets made. Inline with the message rather than a button below it. */
.kfx-va-fix[b-a4k8reqkam] {
    display: inline;
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--primary-strong, #6F3D80);
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Pages/Diagnostics/StaffDiagnostics.razor.rz.scp.css */
/* Styles moved to wwwroot/css/keyfax-vnext.css (global — needed by child components) */