/* /Components/Layout/LanguageSelector.razor.rz.scp.css */
.cm-lang[b-sx4olikiia] { position: relative; }

.cm-lang-trigger[b-sx4olikiia] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--touch-min, 44px);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-sans);
    user-select: none;
}

.cm-lang-current[b-sx4olikiia] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-lang-caret[b-sx4olikiia] { transition: transform var(--transition-fast); }
.cm-lang[open] .cm-lang-caret[b-sx4olikiia] { transform: rotate(180deg); }

.cm-lang-menu[b-sx4olikiia] {
    position: absolute;
    left: 0;
    min-width: 100%;
    width: max-content;
    z-index: 200;
    max-height: min(60vh, 22rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.cm-lang-item[b-sx4olikiia] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--touch-min, 44px);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
}
.cm-lang-name[b-sx4olikiia] { flex: 1; min-width: 0; }

/* ── In the dark sidebar: opens upward, it sits at the bottom of the viewport ── */
.cm-lang--sidebar .cm-lang-trigger[b-sx4olikiia] { color: var(--text-secondary); }
.cm-lang--sidebar .cm-lang-trigger:hover[b-sx4olikiia],
.cm-lang--sidebar[open] .cm-lang-trigger[b-sx4olikiia] { background: var(--bg-hover); color: var(--text-primary); }
.cm-lang--sidebar .cm-lang-menu[b-sx4olikiia] { bottom: calc(100% + 6px); background: var(--bg-elevated); border: 1px solid var(--border-default); }
.cm-lang--sidebar .cm-lang-item[b-sx4olikiia] { color: var(--text-secondary); }
.cm-lang--sidebar .cm-lang-item:focus-visible[b-sx4olikiia] { background: var(--bg-hover); color: var(--text-primary); }
.cm-lang--sidebar .cm-lang-item.is-current[b-sx4olikiia] { color: var(--text-primary); font-weight: 600; background: rgba(129, 140, 248, 0.16); }
.cm-lang--sidebar .cm-lang-item.is-current iconify-icon[b-sx4olikiia] { color: var(--accent-primary); }

/* ── On the public legal pages: a light pill that opens downward ── */
.cm-lang--legal[b-sx4olikiia] { min-width: 11rem; }
.cm-lang--legal .cm-lang-trigger[b-sx4olikiia] {
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
}
.cm-lang--legal .cm-lang-trigger:hover[b-sx4olikiia] { border-color: var(--border-strong); }
.cm-lang--legal .cm-lang-menu[b-sx4olikiia] { top: calc(100% + 6px); left: auto; min-width: 100%; width: max-content; background: var(--bg-elevated); border: 1px solid var(--border-default); }
.cm-lang--legal .cm-lang-item[b-sx4olikiia] { color: var(--text-primary); }

/* Hover only with a real pointer: on touch it stuck on the row last tapped. */
@media (hover: hover) {
    .cm-lang--sidebar .cm-lang-item:hover[b-sx4olikiia] { background: var(--bg-hover); color: var(--text-primary); }
    .cm-lang--legal .cm-lang-item:hover[b-sx4olikiia] { background: var(--bg-hover); }
}
.cm-lang--legal .cm-lang-item.is-current[b-sx4olikiia] { background: var(--accent-light); color: var(--link); font-weight: 600; }

/* A finger needs the 44px floor on the trigger and on every row. */
@media (pointer: coarse) {
    .cm-lang-trigger[b-sx4olikiia], .cm-lang-item[b-sx4olikiia] { min-height: var(--touch-min); }
}

/* ── In the phone drawer (2026-09-29): the list opens in the drawer's own scroll ──
   It used to float upward in a 60vh box with its own scroll: at 390×844 and 360×640 "Deutsch"
   sat below the box's edge and could not be tapped, with nothing to say the list went on, and
   a scroll inside the drawer's scroll. Here the nine rows are part of the drawer, which
   chatmai-ui.js scrolls to show them. */
@media (max-width: 640.98px) {
    .cm-lang--sidebar .cm-lang-menu[b-sx4olikiia] {
        position: static;
        max-height: none;
        overflow: visible;
        margin-top: 6px;
        box-shadow: none;
        width: 100%;
    }
    .cm-lang-item[b-sx4olikiia] { white-space: normal; } /* allow wrap if phone is extremely narrow, though it won't hit it */
}

/* ── In the side rail with a finger (not the phone drawer): the list spans the preferences row ──
   The theme buttons are 44px there, which left the trigger 70px wide, and the list took the
   trigger's width: "日本語" and "Tiếng Việt" broke over two and three lines. Nine 44px rows
   are 408px, taller than the 22rem cap, so "Deutsch" sat below the edge; the cap is raised to
   fit them where the screen allows. */
@media (pointer: coarse) and (min-width: 641px) {
    .cm-lang--sidebar .cm-lang-menu[b-sx4olikiia] { right: auto; min-width: calc(var(--sidebar-width) - 24px); width: max-content; max-height: min(70vh, 26rem); }
}

/* ── Beside the rail on a short screen: a phone on its side (2026-09-29) ──
   At 844×390 the upward list was clipped by the rail: a box 234px tall with five of the nine
   rows showing, the rest behind the rail's edge and no sign that the list went on. Here it
   opens to the right of the rail, over the page, as a grid that shows all nine at once.
   chatmai-ui.js lines its bottom up with the trigger and keeps it inside the safe area; the
   fallbacks put it at the rail's edge if the script has not run. */
@media (min-width: 641px) and (max-height: 500px) {
    .cm-lang--sidebar .cm-lang-menu[b-sx4olikiia] {
        position: fixed;
        left: var(--cm-flyout-left, calc(env(safe-area-inset-left, 0px) + var(--sidebar-width) + 20px));
        right: auto;
        top: auto;
        bottom: max(var(--cm-flyout-bottom, 12px), calc(8px + env(safe-area-inset-bottom, 0px)));
        min-width: min(30rem, calc(100vw - var(--cm-flyout-left, calc(env(safe-area-inset-left, 0px) + var(--sidebar-width) + 20px)) - env(safe-area-inset-right, 0px) - 12px));
        width: max-content;
        max-width: calc(100vw - var(--cm-flyout-left, calc(env(safe-area-inset-left, 0px) + var(--sidebar-width) + 20px)) - env(safe-area-inset-right, 0px) - 12px);
        max-height: calc(100dvh - var(--cm-safe-top, 0px) - 16px - env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        gap: 2px;
    }
}

/* ── The collapsed rail (2026-09-29): a globe and a short label, the menu beside the rail ──
   The full row does not fit in 72px, so the collapsed rail used to hide the picker: a language
   could only be changed by expanding the rail first. Here the trigger is a 48px icon button
   ("TH", "繁") and the menu opens to the right of the rail, over the page, fixed to the
   viewport so the rail cannot clip it. chatmai-ui.js (placeFlyout) lines its bottom up with the
   trigger; the fallbacks keep it clear of the rail and above the home indicator. */
.cm-lang--rail .cm-lang-trigger[b-sx4olikiia] {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: var(--touch-min, 44px);
    padding: 4px 0;
    color: var(--text-secondary);
}
.cm-lang--rail .cm-lang-trigger:hover[b-sx4olikiia],
.cm-lang--rail[open] .cm-lang-trigger[b-sx4olikiia] { background: var(--bg-hover); color: var(--text-primary); }
.cm-lang-short[b-sx4olikiia] { font-size: 0.6875rem; font-weight: 700; line-height: 1; letter-spacing: 0.04em; }
.cm-lang--rail .cm-lang-menu[b-sx4olikiia] {
    position: fixed;
    left: var(--cm-flyout-left, calc(env(safe-area-inset-left, 0px) + var(--sidebar-collapsed) + 20px));
    right: auto;
    top: auto;
    bottom: max(var(--cm-flyout-bottom, 12px), calc(8px + env(safe-area-inset-bottom, 0px)));
    min-width: 13rem;
    width: max-content;
    max-height: calc(100dvh - var(--cm-safe-top, 0px) - 16px - env(safe-area-inset-bottom, 0px));
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
}
.cm-lang-title[b-sx4olikiia] {
    grid-column: 1 / -1;
    margin: 0;
    padding: 6px 10px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.cm-lang--rail .cm-lang-item[b-sx4olikiia] { color: var(--text-secondary); white-space: nowrap; }
.cm-lang--rail .cm-lang-item:focus-visible[b-sx4olikiia] { background: var(--bg-hover); color: var(--text-primary); }
.cm-lang--rail .cm-lang-item.is-current[b-sx4olikiia] { color: var(--text-primary); font-weight: 600; background: rgba(129, 140, 248, 0.16); }
.cm-lang--rail .cm-lang-item.is-current iconify-icon[b-sx4olikiia] { color: var(--accent-primary); }
@media (hover: hover) {
    .cm-lang--rail .cm-lang-item:hover[b-sx4olikiia] { background: var(--bg-hover); color: var(--text-primary); }
}
/* A short screen (a phone on its side): nine rows do not fit in one column, so a grid, as in
   the expanded rail's menu there. */
@media (min-width: 641px) and (max-height: 500px) {
    .cm-lang--rail .cm-lang-menu[b-sx4olikiia] {
        min-width: min(30rem, calc(100vw - var(--cm-flyout-left, calc(env(safe-area-inset-left, 0px) + var(--sidebar-collapsed) + 20px)) - env(safe-area-inset-right, 0px) - 12px));
        width: max-content;
        max-width: calc(100vw - var(--cm-flyout-left, calc(env(safe-area-inset-left, 0px) + var(--sidebar-collapsed) + 20px)) - env(safe-area-inset-right, 0px) - 12px);
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        gap: 2px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   MainLayout — ChatMai application shell
   ═══════════════════════════════════════════════════════════ */
.page[b-b29p4fj0yu] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-app);
}

main[b-b29p4fj0yu] {
    outline: none;
    flex: 1;
    min-width: 0;
    /* On phones .page is a column: without this, main grew to its content, the whole document
       scrolled instead of <article>, and the status-bar padding scrolled away with it, so iPhone
       content ran under the clock (2026-09-29). */
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
}

article[b-b29p4fj0yu] {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sidebar[b-b29p4fj0yu] {
    background: var(--sidebar-bg);
    display: none;
}

/* ── Bottom Navigation (Mobile) — App-style ──────────────── */
.bottom-nav[b-b29p4fj0yu] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-primary);
    border-top: 1px solid var(--border-default);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: max(4px, env(safe-area-inset-left, 0px));
    padding-right: max(4px, env(safe-area-inset-right, 0px));
    /* Below dialogs (1000+): an open pop-up covers the tabs instead of the tabs covering its buttons. */
    z-index: 900;
}

.bottom-nav-slot[b-b29p4fj0yu] {
    display: flex;
}

.bottom-nav-item[b-b29p4fj0yu] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 6px 0 8px 0;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 500;
    min-height: var(--touch-min);
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    min-width: 0;
}

/* Allow long labels to wrap to two lines on narrow screens */
.bottom-nav-item > span[b-b29p4fj0yu] {
    max-width: 100%;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1;
}

.bottom-nav-item:hover[b-b29p4fj0yu] {
    color: var(--text-secondary);
    text-decoration: none;
}

.bottom-nav-item.active[b-b29p4fj0yu] {
    color: var(--link);
    font-weight: 700;
}
.bottom-nav-item.active iconify-icon[b-b29p4fj0yu] {
    color: var(--link);
}

.bottom-nav-item.center-control[b-b29p4fj0yu] {
    color: var(--link);
    font-weight: 700;
}

.center-control-icon-wrapper[b-b29p4fj0yu] {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--accent-solid);
    color: var(--on-accent);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.center-control-icon-wrapper iconify-icon[b-b29p4fj0yu] {
    color: var(--on-accent) !important;
    font-size: 24px;
}

.nav-unread-badge[b-b29p4fj0yu] {
    position: absolute;
    top: -2px;
    right: -4px;
    background: #d92d20;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 0 0 2px var(--bg-primary);
    line-height: 1;
}

@media (max-width: 640.98px) {
    main[b-b29p4fj0yu] {
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    /* Hide bottom nav when inside chat view */
    body:has(.mobile-chat-active) main[b-b29p4fj0yu] {
        padding-bottom: 0;
    }
    body:has(.mobile-chat-active) .bottom-nav[b-b29p4fj0yu] {
        display: none;
    }
}

/* ── Desktop — Floating Sidebar ──────────────────────────── */
@media (min-width: 641px) {
    .page[b-b29p4fj0yu] {
        flex-direction: row;
    }

    .sidebar[b-b29p4fj0yu] {
        display: block;
        width: var(--sidebar-width);
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
        margin: 0;
        flex-shrink: 0;
        transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow: hidden;

        border-radius: 0;
        border-right: 1px solid var(--border-default); box-shadow: none;
        z-index: 100;
    }

    .sidebar-collapsed .sidebar[b-b29p4fj0yu] {
        width: var(--sidebar-collapsed);
    }

    .bottom-nav[b-b29p4fj0yu] {
        display: none;
    }

    main[b-b29p4fj0yu] {
        padding-bottom: 0;
    }
}

/* ── Error UI ────────────────────────────────────────────── */
#blazor-error-ui[b-b29p4fj0yu] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    bottom: 24px;
    box-shadow: var(--shadow-xl);
    display: none;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 24px;
    position: fixed;
    z-index: 2000;
    color: var(--text-primary);
    align-items: center;
    gap: 16px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
}

#blazor-error-ui .reload[b-b29p4fj0yu] {
    color: var(--accent-primary);
    text-decoration: underline;
    font-weight: 600;
}

#blazor-error-ui .dismiss[b-b29p4fj0yu] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

#blazor-error-ui .dismiss:hover[b-b29p4fj0yu] {
    color: var(--text-primary);
}

/* ── Mobile Menu Drawer ────────────────────────────────────────── */
.menu-btn[b-b29p4fj0yu] {
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-overlay[b-b29p4fj0yu] {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 1050;
    animation: fadeIn-b-b29p4fj0yu 0.2s ease;
}

@keyframes fadeIn-b-b29p4fj0yu {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 640.98px) {
    .page.mobile-menu-open .bottom-nav[b-b29p4fj0yu] { visibility: hidden; }
    .page.mobile-menu-open main article[b-b29p4fj0yu] { overflow: hidden; }
    .page.mobile-menu-open .sidebar[b-b29p4fj0yu] {
        display: flex;
        position: fixed;
        top: 0;
        padding-top: env(safe-area-inset-top, var(--cm-safe-top, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        bottom: 0;
        right: 0;
        width: 85%;
        max-width: 380px;
        margin: 0;
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
        z-index: 1100;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
        animation: slideInRight-b-b29p4fj0yu 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        height: auto;
    }

    @keyframes slideInRight-b-b29p4fj0yu {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }
}
/* /Components/Layout/MobilePageNavigation.razor.rz.scp.css */
.cm-mobile-nav[b-493r6p80bf] {
    display: none;
    position: sticky;
    top: var(--cm-safe-top, 0);
    z-index: 20;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-default);
    padding: 0 16px;
    padding-right: 68px;
    height: 56px;
    align-items: center;
    gap: 12px;
}

@media (max-width: 640.98px) {
    .cm-mobile-nav[b-493r6p80bf] {
        display: flex;
    }
}

.cm-mobile-nav-back[b-493r6p80bf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    margin-left: -8px; /* Optical alignment */
    transition: background 0.2s;
    flex-shrink: 0;
}

.cm-mobile-nav-back:hover[b-493r6p80bf], .cm-mobile-nav-back:focus-visible[b-493r6p80bf] {
    background: var(--bg-secondary);
}

.cm-mobile-nav-title[b-493r6p80bf] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   NavMenu — ChatMai application navigation
   Theme-aware sidebar, clear task groups, readable typography
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar Wrapper ─────────────────────────────────────── */
.nav-wrapper[b-41dw752b58] {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sidebar-bg);
    position: relative;
    overflow: hidden;
    color: var(--text-muted);
}

/* ── Sidebar Header (Logo + Toggle) ──────────────────────── */
.sidebar-header[b-41dw752b58] {
    display: flex;
    align-items: center;
    padding: 24px 20px 16px;
    flex-shrink: 0;
}

/* Top Workspace Switcher */
.sidebar-workspace-header[b-41dw752b58] {
    padding: 0 16px 16px;
    flex-shrink: 0;
}

.workspace-switcher.top-switcher[b-41dw752b58] {
    margin: 0;
}

.workspace-switcher.top-switcher .workspace-switcher-btn[b-41dw752b58],
.workspace-static.top-switcher[b-41dw752b58] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-base);
    text-align: left;
}

.workspace-switcher.top-switcher .workspace-switcher-btn:hover[b-41dw752b58] {
    background: var(--bg-hover);
}

.ws-avatar[b-41dw752b58] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(129, 140, 248, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.ws-info[b-41dw752b58] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ws-info .ws-name[b-41dw752b58] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-info .ws-role[b-41dw752b58] {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-icon[b-41dw752b58] {
    color: var(--text-muted);
}

.workspace-switcher.top-switcher .workspace-dropdown[b-41dw752b58] {
    top: 100%;
    bottom: auto;
    margin-top: 8px;
    margin-bottom: 0;
}

.brand-link[b-41dw752b58] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
    padding: 0;
    margin: 0;
}

.brand-link:hover[b-41dw752b58] {
    color: var(--text-primary);
    text-decoration: none;
}

.brand-logo[b-41dw752b58] {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    object-fit: contain;
    transition: transform var(--transition-base);
}

.brand-link:hover .brand-logo[b-41dw752b58] {
    transform: scale(1.05);
}

.brand-text[b-41dw752b58] {
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* Toggle Button */
.sidebar-toggle-btn[b-41dw752b58] {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover[b-41dw752b58] {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-color: var(--text-muted);
}

/* Hide bootstrap checkbox toggler */
.navbar-toggler[b-41dw752b58] {
    display: none;
}

/* ── Scrollable Nav ──────────────────────────────────────── */
.nav-scrollable[b-41dw752b58] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px;
}

/* ── Nav Items ───────────────────────────────────────────── */
.nav-item[b-41dw752b58] {
    margin-bottom: 2px;
}

.nav-item.px-3[b-41dw752b58] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

[b-41dw752b58] .nav-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 12px !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
    text-decoration: none;
    min-height: var(--touch-min, 44px);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    width: 100%;
    /* allow long label wrapping, line-height 1.5 protects Thai tone marks */
    line-height: 1.5;
    white-space: normal;
    overflow: visible;
    position: relative;
    background: transparent;
    border: none;
}

[b-41dw752b58] .nav-link::before {
    display: none;
}

[b-41dw752b58] .nav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary) !important;
}

[b-41dw752b58] .nav-link.active {
    background: var(--accent-light) !important;
    color: var(--accent-primary) !important;
    font-weight: 600;
}

/* Nav Icons */
.nav-icon[b-41dw752b58],
[b-41dw752b58] .nav-link iconify-icon {
    font-size: 20px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: all var(--transition-base);
}

[b-41dw752b58] .nav-link:hover iconify-icon {
    opacity: 0.7;
    color: var(--text-secondary);
}

[b-41dw752b58] .nav-link.active iconify-icon {
    opacity: 1;
    color: var(--accent-primary) !important;
}

/* ── Bottom Section ──────────────────────────────────────── */
.sidebar-bottom[b-41dw752b58] {
    border-top: 1px solid var(--border-default);
    padding: 12px;
    flex-shrink: 0;
    background: transparent;
}

/* User Info */
.user-info[b-41dw752b58] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    background: transparent;
    border: none;
}

.user-avatar[b-41dw752b58] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(129, 140, 248, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--accent-primary);
    flex-shrink: 0;
    border: none;
}

.user-details[b-41dw752b58] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.user-name[b-41dw752b58] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-workspace[b-41dw752b58] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Workspace Switcher */
.workspace-switcher[b-41dw752b58] {
    position: relative;
    margin: 4px 4px 8px;
}

.workspace-switcher-btn[b-41dw752b58] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    font-family: var(--font-sans);
    text-align: left;
}

.workspace-switcher-btn:hover[b-41dw752b58] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.workspace-dropdown[b-41dw752b58] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    margin-bottom: 8px;
    z-index: 100;
}

.workspace-item[b-41dw752b58] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-secondary);
    transition: background var(--transition-base);
    font-size: 0.8125rem;
}

/* Each workspace is a POST form (switching changes the session); its button looks like the old link. */
.workspace-item-form[b-41dw752b58] {
    margin: 0;
}

button.workspace-item[b-41dw752b58] {
    width: 100%;
    min-height: 44px;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

button.workspace-item:focus-visible[b-41dw752b58] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.workspace-item:hover[b-41dw752b58] {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.workspace-item.active[b-41dw752b58] {
    background: rgba(129, 140, 248, 0.12);
    color: var(--accent-primary);
    font-weight: 600;
}

.ws-icon[b-41dw752b58] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    flex-shrink: 0;
    border: none;
    color: var(--text-muted);
}

.ws-details[b-41dw752b58] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ws-name[b-41dw752b58] { font-weight: 600; font-size: 0.8125rem; }
.ws-role[b-41dw752b58] { font-size: 0.6875rem; color: var(--text-muted); margin-top: 1px; }

/* ── Group labels ─────────────────────────────────────────── */
.nav-group-label[b-41dw752b58] {
    margin: 14px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role-label[b-41dw752b58] {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ── Preferences: language + theme ─────────────────────────── */
.sidebar-prefs[b-41dw752b58] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0 6px;
}
.sidebar-prefs[b-41dw752b58]  .cm-lang { flex: 1; min-width: 0; }

.theme-switch[b-41dw752b58] {
    display: inline-flex;
    flex: none;
    padding: 2px;
    gap: 2px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
}
.theme-btn[b-41dw752b58] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--text-muted);
}
.theme-btn:hover[b-41dw752b58] { color: var(--text-primary); background: var(--bg-hover); }
.theme-btn[aria-pressed="true"][b-41dw752b58] { color: var(--text-primary); background: rgba(129, 140, 248, 0.28); }

/* ── The collapsed rail's language and theme buttons (2026-09-29) ──
   Hidden everywhere except the collapsed rail at ≥ 641px; the phone drawer always shows the
   full row. The theme menu opens beside the rail like the language menu. */
.sidebar-prefs-rail[b-41dw752b58] { display: none; }
@media (min-width: 641px) {
    .nav-wrapper.collapsed .sidebar-prefs-rail[b-41dw752b58] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 2px 0 6px;
    }
}
.cm-theme-menu[b-41dw752b58] { position: relative; }
.cm-theme-trigger[b-41dw752b58] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min, 44px);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.cm-theme-trigger[b-41dw752b58]::-webkit-details-marker { display: none; }
.cm-theme-trigger:hover[b-41dw752b58],
.cm-theme-menu[open] .cm-theme-trigger[b-41dw752b58] { background: var(--bg-hover); color: var(--text-primary); }
/* The trigger shows the stored choice: <html data-cm-theme-mode> is set before first paint. */
.cm-theme-icon[b-41dw752b58] { display: none; }
:root:not([data-cm-theme-mode]) .cm-theme-icon--light[b-41dw752b58],
:root[data-cm-theme-mode="light"] .cm-theme-icon--light[b-41dw752b58],
:root[data-cm-theme-mode="dark"] .cm-theme-icon--dark[b-41dw752b58],
:root[data-cm-theme-mode="system"] .cm-theme-icon--system[b-41dw752b58] { display: inline-block; }
.cm-theme-flyout[b-41dw752b58] {
    position: fixed;
    left: var(--cm-flyout-left, calc(env(safe-area-inset-left, 0px) + var(--sidebar-collapsed) + 20px));
    bottom: max(var(--cm-flyout-bottom, 12px), calc(8px + env(safe-area-inset-bottom, 0px)));
    z-index: 200;
    /* As wide as the longest name ("デバイスの設定に合わせる", "Wie das Gerät"), never past the screen. */
    width: max-content;
    min-width: 13rem;
    max-width: calc(100vw - var(--cm-flyout-left, calc(env(safe-area-inset-left, 0px) + var(--sidebar-collapsed) + 20px)) - env(safe-area-inset-right, 0px) - 12px);
    max-height: calc(100dvh - var(--cm-safe-top, 0px) - 16px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
}
.cm-flyout-title[b-41dw752b58] {
    margin: 0;
    padding: 6px 10px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.cm-theme-item[b-41dw752b58] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--touch-min, 44px);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    text-align: left;
    white-space: nowrap;
    color: var(--text-secondary);
}
.cm-theme-name[b-41dw752b58] { flex: 1; min-width: 0; }
.cm-theme-check[b-41dw752b58] { visibility: hidden; color: var(--accent-primary); }
.cm-theme-item[aria-checked="true"][b-41dw752b58] { color: var(--text-primary); font-weight: 600; background: rgba(129, 140, 248, 0.16); }
.cm-theme-item[aria-checked="true"] .cm-theme-check[b-41dw752b58] { visibility: visible; }
.cm-theme-item:focus-visible[b-41dw752b58] { background: var(--bg-hover); color: var(--text-primary); }
@media (hover: hover) {
    .cm-theme-item:hover[b-41dw752b58] { background: var(--bg-hover); color: var(--text-primary); }
}

/* Theme-aware visible focus for both sidebar palettes. */
.nav-wrapper :focus-visible[b-41dw752b58],
.nav-wrapper[b-41dw752b58]  :focus-visible { outline-color: var(--accent-primary); }

/* The workspace switcher is a <details>: the summary is the button. */
details.workspace-switcher > summary[b-41dw752b58] { list-style: none; }
details.workspace-switcher > summary[b-41dw752b58]::-webkit-details-marker { display: none; }
details.workspace-switcher[open] .dropdown-icon[b-41dw752b58] { transform: rotate(180deg); }
.dropdown-icon[b-41dw752b58] { transition: transform var(--transition-fast); }

/* Switch Service / Logout */
.switch-service-btn[b-41dw752b58],
.logout-btn[b-41dw752b58] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--transition-base);
    width: 100%;
    min-height: var(--touch-min, 44px);
    font-family: var(--font-sans);
}

.switch-service-btn:hover[b-41dw752b58],
.logout-btn:hover[b-41dw752b58] {
    background: var(--bg-hover);
    color: var(--text-secondary);
    text-decoration: none;
}

/* ── Nav flex-column ─────────────────────────────────────── */
.nav.flex-column[b-41dw752b58] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    list-style: none;
}

/* ── Collapsed State ─────────────────────────────────────── */
/* Desktop only: the phone drawer always shows labels, whatever was left collapsed on a desktop. */
@media (min-width: 641px) {
    .nav-wrapper.collapsed .brand-text[b-41dw752b58],
    .nav-wrapper.collapsed .nav-label[b-41dw752b58],
    .nav-wrapper.collapsed .user-details[b-41dw752b58],
    .nav-wrapper.collapsed .top-switcher .ws-info[b-41dw752b58],
    .nav-wrapper.collapsed .top-switcher .dropdown-icon[b-41dw752b58],
    .nav-wrapper.collapsed .switch-service-btn span[b-41dw752b58],
    .nav-wrapper.collapsed .logout-btn span[b-41dw752b58],
    .nav-wrapper.collapsed .nav-group-label[b-41dw752b58],
    .nav-wrapper.collapsed .sidebar-prefs[b-41dw752b58] {
        display: none;
    }

    .nav-wrapper.collapsed[b-41dw752b58]  .nav-link {
        justify-content: center;
        padding: 10px !important;
    }

    .nav-wrapper.collapsed .user-info[b-41dw752b58] {
        justify-content: center;
        padding: 8px;
    }

    .nav-wrapper.collapsed .sidebar-toggle-btn[b-41dw752b58] {
        margin-left: 0;
    }

    /* Logo over the toggle: side by side they filled the 56px and the 44px touch toggle ran
       into the rail's edge. */
    .nav-wrapper.collapsed .sidebar-header[b-41dw752b58] {
        flex-direction: column;
        gap: 8px;
        padding: 20px 8px 12px;
    }

    /* The workspace: its initial, with the name in the tooltip. "Hide every span" also hid the
       initial and every name in the switcher's list, which left a caret that opened a column
       of check marks clipped by the rail. */
    .nav-wrapper.collapsed .sidebar-workspace-header[b-41dw752b58] { padding: 0 8px 12px; }
    .nav-wrapper.collapsed .workspace-switcher.top-switcher .workspace-switcher-btn[b-41dw752b58],
    .nav-wrapper.collapsed .workspace-static.top-switcher[b-41dw752b58] {
        justify-content: center;
        padding: 6px 0;
    }
    /* Its list opens beside the rail, level with the row (chatmai-ui.js sets the top). */
    .nav-wrapper.collapsed .workspace-switcher.top-switcher .workspace-dropdown[b-41dw752b58] {
        position: fixed;
        left: var(--cm-flyout-left, calc(env(safe-area-inset-left, 0px) + var(--sidebar-collapsed) + 20px));
        top: var(--cm-flyout-top, 80px);
        right: auto;
        bottom: auto;
        width: 16rem;
        margin: 0;
        max-height: calc(100dvh - var(--cm-safe-top, 0px) - 16px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 200;
    }

    .nav-wrapper.collapsed .switch-service-btn[b-41dw752b58],
    .nav-wrapper.collapsed .logout-btn[b-41dw752b58] {
        justify-content: center;
        padding: 10px;
    }
}

/* Pending owner questions */
.nav-count-badge[b-41dw752b58] {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-amber);
    color: #1c1917;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

@media (min-width: 641px) {
    .nav-wrapper.collapsed .nav-count-badge[b-41dw752b58] {
        position: absolute;
        top: 4px;
        right: 8px;
        min-width: 8px;
        width: 8px;
        height: 8px;
        padding: 0;
        font-size: 0;
    }
}

/* Inbox: unread conversations. A flat filled red with white text (5:1) reads the same on the
   light and the dark sidebar; the ring takes the sidebar's own token so it cuts the badge out of
   whichever surface the app theme draws. Same colours as the bottom bar's Inbox badge. */
.nav-inbox-badge[b-41dw752b58] {
    margin-left: auto;
    flex: none;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #d92d20;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 641px) {
    /* The collapsed rail: a compact count on the icon's corner instead of a row-end pill. */
    .nav-wrapper.collapsed .nav-inbox-badge[b-41dw752b58] {
        position: absolute;
        top: 2px;
        left: calc(50% + 4px);
        margin: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 0.625rem;
        box-shadow: 0 0 0 2px var(--sidebar-bg);
    }
}

@media (pointer: coarse) {
    [b-41dw752b58] .nav-link, .switch-service-btn[b-41dw752b58], .logout-btn[b-41dw752b58] { min-height: var(--touch-min, 44px); }
    .theme-btn[b-41dw752b58] { width: var(--touch-min); height: var(--touch-min); }
    details.workspace-switcher > summary[b-41dw752b58] { min-height: var(--touch-min); }
    .cm-theme-trigger[b-41dw752b58], .cm-theme-item[b-41dw752b58] { min-height: var(--touch-min); }
    .brand-link[b-41dw752b58] { min-height: var(--touch-min); }
    .sidebar-toggle-btn[b-41dw752b58] { width: var(--touch-min); height: var(--touch-min); }
}

/* Mobile Close Button */
.mobile-close-btn[b-41dw752b58] {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    margin-left: auto;
    flex-shrink: 0;
}
.mobile-close-btn:hover[b-41dw752b58] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

@media (max-width: 640.98px) {
    .desktop-only[b-41dw752b58] { display: none !important; }
    .mobile-only.mobile-close-btn[b-41dw752b58] { display: flex; }

    .sidebar-bottom[b-41dw752b58] {
        padding: 24px 16px 32px;
        gap: 12px;
        display: flex;
        flex-direction: column;
    }
    .switch-service-btn[b-41dw752b58], .logout-btn[b-41dw752b58] {
        background: var(--bg-secondary);
        border-radius: 14px;
        padding: 14px 16px;
        font-size: 0.95rem;
        font-weight: 600;
        justify-content: flex-start;
        box-shadow: none;
        border: none;
    }
    .switch-service-btn span[b-41dw752b58], .logout-btn span[b-41dw752b58] {
        margin-left: 8px;
    }
    .nav-item[b-41dw752b58] {
        border-radius: 12px;
        padding: 0;
        margin-bottom: 2px;
    }
    .nav-group-label[b-41dw752b58] {
        padding: 16px 14px 8px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        color: var(--text-muted);
    }


    .sidebar-header[b-41dw752b58] { padding: 12px 16px 8px; }
    .sidebar-workspace-header[b-41dw752b58] { padding: 0 16px 8px; }

    .nav-wrapper[b-41dw752b58] { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
    .nav-scrollable[b-41dw752b58] { flex: 1 0 auto; overflow: visible; padding: 4px 12px; }

    /* Compact shortcuts */
    [b-41dw752b58] .nav-link { min-height: 44px; padding: 6px 12px !important; font-size: .875rem; }
    .nav-group-label[b-41dw752b58] { margin: 4px 0 2px; padding: 12px 12px 6px; }

    /* Compact secondary account/settings */
    .sidebar-bottom[b-41dw752b58] { margin-top: auto; padding: 12px; border-top: 1px solid var(--border-default); background: var(--bg-primary); flex-shrink: 0; }

    /* Preferences */
    .sidebar-prefs[b-41dw752b58] { flex-wrap: nowrap; gap: 8px; padding: 0 0 8px; }
    .sidebar-prefs[b-41dw752b58]  .cm-lang { flex: 1; }
    .theme-switch[b-41dw752b58] { flex: 0 0 auto; }

    /* Exits */
    .switch-service-btn[b-41dw752b58], .logout-btn[b-41dw752b58] { min-height: 44px; padding: 6px 12px; }

    .user-info[b-41dw752b58] { padding: 6px; }
}

/* The side rail on a short screen: a phone on its side, 844×390 (2026-09-29). The rail is
   366px tall there; its header and the account footer (about 230px) left the links 16px, so
   none of the 15 links could be tapped, Logout was cut off at the bottom, and the language
   picker was squeezed to a 70px globe with no name. As in the phone drawer, the whole rail is
   one scroll and the footer follows the last link. The language picker and the theme buttons
   get a row each, so the current language is named. */
@media (min-width: 641px) and (max-height: 500px) {
    .nav-wrapper[b-41dw752b58] { overflow-y: auto; overscroll-behavior: contain; }
    .nav-scrollable[b-41dw752b58] { flex: none; overflow: visible; }
    .sidebar-header[b-41dw752b58] { padding: 16px 20px 12px; }
    .sidebar-bottom[b-41dw752b58] { margin-top: 8px; padding-bottom: 12px; }
    .sidebar-prefs[b-41dw752b58] { flex-wrap: wrap; }
    .sidebar-prefs[b-41dw752b58]  .cm-lang { flex: 1 1 100%; }
    .theme-switch[b-41dw752b58] { flex: 1 1 100%; }
    .theme-btn[b-41dw752b58] { flex: 1; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-squwymw10p],
.components-reconnect-repeated-attempt-visible[b-squwymw10p],
.components-reconnect-failed-visible[b-squwymw10p],
.components-pause-visible[b-squwymw10p],
.components-resume-failed-visible[b-squwymw10p],
.components-rejoining-animation[b-squwymw10p] {
    display: none;
}

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


#components-reconnect-modal[b-squwymw10p] {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    width: 24rem;
    margin: 20vh auto;
    padding: 32px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    font-family: var(--font-sans);
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-squwymw10p 0.5s both;
    &[open] {
        animation: components-reconnect-modal-slideUp-b-squwymw10p 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-squwymw10p 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-squwymw10p]::backdrop {
    background-color: rgba(43, 42, 40, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: components-reconnect-modal-fadeInOpacity-b-squwymw10p 0.5s ease-in-out;
    opacity: 1;
}

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

@keyframes components-reconnect-modal-fadeInOpacity-b-squwymw10p {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

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

#components-reconnect-modal p[b-squwymw10p] {
    margin: 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

#components-reconnect-modal button[b-squwymw10p] {
    border: none;
    background-color: var(--accent-primary);
    color: var(--text-inverse);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition-fast);
}

#components-reconnect-modal button:hover[b-squwymw10p] {
    background-color: var(--accent-hover);
}

#components-reconnect-modal button:active[b-squwymw10p] {
    transform: scale(0.97);
}

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

.components-rejoining-animation div[b-squwymw10p] {
    position: absolute;
    border: 2px solid var(--accent-primary);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-squwymw10p 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

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

@keyframes components-rejoining-animation-b-squwymw10p {
    0% { top: 30px; left: 30px; width: 0; height: 0; opacity: 0; }
    4.9% { top: 30px; left: 30px; width: 0; height: 0; opacity: 0; }
    5% { top: 30px; left: 30px; width: 0; height: 0; opacity: 1; }
    100% { top: 0px; left: 0px; width: 60px; height: 60px; opacity: 0; }
}

/* /Components/Pages/ActivityLog.razor.rz.scp.css */
/* ── Activity Log Page ────────────────── */
.cm-section.activity-log-page[b-97bh6cwto0] {
    width: 100%;
    padding: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.cm-page-header[b-97bh6cwto0] {
    margin-bottom: 1.5rem;
}

.cm-page-header h1[b-97bh6cwto0] {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.02em;
}

.cm-page-header .header-icon[b-97bh6cwto0] {
    color: var(--accent-primary);
}

.cm-page-header .subtitle[b-97bh6cwto0] {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.cm-grouped-section[b-97bh6cwto0] {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.cm-grouped-section h3[b-97bh6cwto0] {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

/* ── Filters ─────────────────────────── */
.filter-row[b-97bh6cwto0] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.form-group[b-97bh6cwto0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 160px;
}

.form-group label[b-97bh6cwto0] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.form-control[b-97bh6cwto0] {
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
    font-family: var(--font-sans);
    min-height: 44px; /* Minimum touch target */
}

.form-control:focus[b-97bh6cwto0] {
    border-color: var(--text-primary);
    box-shadow: var(--ring);
}

/* ── Log Table ───────────────────────── */
.log-table[b-97bh6cwto0] {
    overflow-x: auto;
}

.log-table table[b-97bh6cwto0] {
    width: 100%;
    border-collapse: collapse;
}

.log-table thead th[b-97bh6cwto0] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.log-table tbody tr[b-97bh6cwto0] {
    transition: background 0.15s;
}

.log-table tbody tr:hover[b-97bh6cwto0] {
    background: var(--bg-tertiary);
}

.log-table tbody td[b-97bh6cwto0] {
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.time-cell[b-97bh6cwto0] {
    white-space: normal;
}

.time-ago[b-97bh6cwto0] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.who-cell[b-97bh6cwto0] {
    white-space: normal;
}

.log-user[b-97bh6cwto0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-avatar[b-97bh6cwto0] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.user-avatar.sm[b-97bh6cwto0] {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.65rem;
}

/* ── Action Badges ───────────────────── */
.action-badge[b-97bh6cwto0] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

/* Personal-data export — highlighted so it stands out during a compliance review */
.action-badge.action-exportcustomerdata[b-97bh6cwto0] {
    background: var(--bg-tertiary);
    color: var(--accent-amber);
    border-color: var(--accent-amber-bg);
}

.action-badge.action-replymessage[b-97bh6cwto0] {
    background: var(--accent-green-bg);
    color: var(--accent-green);
    border-color: var(--accent-green-bg);
}

.action-badge.action-assignchat[b-97bh6cwto0] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.action-badge.action-takecontrol[b-97bh6cwto0] {
    background: var(--bg-tertiary);
    color: var(--accent-amber);
    border-color: var(--accent-amber-bg);
}

.action-badge.action-releasechat[b-97bh6cwto0] {
    background: var(--accent-blue-bg);
    color: var(--accent-blue-text);
    border-color: var(--border-subtle);
}

.action-badge.action-pickupchat[b-97bh6cwto0] {
    background: var(--accent-green-bg);
    color: var(--accent-green);
    border-color: var(--accent-green-bg);
}

.action-badge.action-addadmin[b-97bh6cwto0] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.action-badge.action-removeadmin[b-97bh6cwto0] {
    background: var(--accent-red-bg);
    color: var(--accent-red);
    border-color: var(--accent-red-bg);
}

.action-badge.action-suspendadmin[b-97bh6cwto0] {
    background: var(--bg-tertiary);
    color: var(--accent-amber);
    border-color: var(--accent-amber-bg);
}

.action-badge.action-reactivateadmin[b-97bh6cwto0] {
    background: var(--accent-green-bg);
    color: var(--accent-green);
    border-color: var(--accent-green-bg);
}

.action-badge.action-updatepermissions[b-97bh6cwto0] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.details-cell[b-97bh6cwto0] {
    min-width: 12rem;
    max-width: 22rem;
    overflow-wrap: anywhere;
}

.target-link[b-97bh6cwto0] {
    color: var(--link, var(--text-primary));
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (pointer: coarse) {
    .target-link[b-97bh6cwto0] { display: inline-flex; align-items: center; min-height: var(--touch-min, 44px); margin-top: 0; }
}

.log-skeleton[b-97bh6cwto0] {
    display: grid;
    gap: 0.6rem;
}

.log-skeleton-row[b-97bh6cwto0] {
    height: 2.75rem;
    border-radius: var(--radius-sm);
}

/* Phones, landscape too: each entry is a card; the column name sits beside its value. */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
    .cm-section.activity-log-page[b-97bh6cwto0] { padding: 1rem; }
    .cm-grouped-section[b-97bh6cwto0] { padding: 1rem; }
    .log-table[b-97bh6cwto0] { overflow-x: visible; }
    .log-table thead[b-97bh6cwto0] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .log-table table[b-97bh6cwto0], .log-table tbody[b-97bh6cwto0], .log-table tr[b-97bh6cwto0], .log-table td[b-97bh6cwto0] { display: block; width: 100%; }
    .log-table tbody tr[b-97bh6cwto0] { padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); }
    .log-table tbody td[b-97bh6cwto0] { border: none; padding: 0.2rem 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem; align-items: start; }
    .log-table tbody td[b-97bh6cwto0]::before { content: attr(data-label); font-size: 0.75rem; color: var(--text-muted); padding-top: 0.1rem; }
    .details-cell[b-97bh6cwto0] { max-width: none; min-width: 0; }
    .who-cell[b-97bh6cwto0], .time-cell[b-97bh6cwto0] { white-space: normal; }
}

.target-info[b-97bh6cwto0] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Pagination ──────────────────────── */
.pagination[b-97bh6cwto0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.btn[b-97bh6cwto0] {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    min-height: 44px; /* Minimum touch target */
}

.btn-sm[b-97bh6cwto0] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    min-height: 44px; /* Minimum touch target */
}

.btn-sm:hover:not(:disabled)[b-97bh6cwto0] {
    background: var(--bg-elevated);
}

.btn-sm:disabled[b-97bh6cwto0] {
    opacity: 0.4;
    cursor: not-allowed;
}

.loading[b-97bh6cwto0] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.empty-state[b-97bh6cwto0] {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem;
}


/* Added for compliance: hit areas, focus, disabled states */
.btn[b-97bh6cwto0], .btn-primary[b-97bh6cwto0], .btn-secondary[b-97bh6cwto0], .btn-danger[b-97bh6cwto0], .btn-outline[b-97bh6cwto0], .btn-sm[b-97bh6cwto0], button[b-97bh6cwto0], .form-control[b-97bh6cwto0], .form-select[b-97bh6cwto0], .toggle-slider[b-97bh6cwto0], .sod-back[b-97bh6cwto0] {
    min-height: 44px;
}
.btn:focus-visible[b-97bh6cwto0], button:focus-visible[b-97bh6cwto0], .form-control:focus-visible[b-97bh6cwto0], .form-select:focus-visible[b-97bh6cwto0], input:focus-visible[b-97bh6cwto0], textarea:focus-visible[b-97bh6cwto0] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.btn:disabled[b-97bh6cwto0], button:disabled[b-97bh6cwto0], .form-control:disabled[b-97bh6cwto0], .form-select:disabled[b-97bh6cwto0], input:disabled[b-97bh6cwto0], textarea:disabled[b-97bh6cwto0] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/AdminPermissions.razor.rz.scp.css */
/* ── Admin Permissions Page ───────────── */
.cm-section[b-xam9io2nrb] {
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Page Header ─────────────────────── */
.cm-page-header[b-xam9io2nrb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.cm-page-header h1[b-xam9io2nrb] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.cm-page-header h1 svg[b-xam9io2nrb] {
    color: var(--accent-primary);
}

.cm-page-header .subtitle[b-xam9io2nrb] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.header-actions[b-xam9io2nrb] {
    display: flex;
    gap: 0.75rem;
}

/* ── Layout Grid ─────────────────────── */
.layout-grid[b-xam9io2nrb] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Cards ───────────────────────────── */
.cm-grouped-section[b-xam9io2nrb] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.cm-grouped-section h3[b-xam9io2nrb] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}

/* ── User Profile Card ───────────────── */
.user-card[b-xam9io2nrb] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar[b-xam9io2nrb] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

.user-details[b-xam9io2nrb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.user-details strong[b-xam9io2nrb] {
    font-size: 1rem;
    color: var(--text-primary);
}

.user-details span[b-xam9io2nrb] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Role Badges ─────────────────────── */
.role-badge[b-xam9io2nrb] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
    flex-shrink: 0;
}

.role-owner[b-xam9io2nrb] {
    background: var(--bg-tertiary);
    color: var(--accent-amber);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.role-admin[b-xam9io2nrb] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.role-subadmin[b-xam9io2nrb] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.role-agent[b-xam9io2nrb] {
    background: var(--accent-green-bg);
    color: var(--accent-green);
    border: 1px solid #a7f3d0;
}

/* ── Role Selector ───────────────────── */
.role-selector[b-xam9io2nrb] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.role-selector label[b-xam9io2nrb] {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: normal;
}

.form-select[b-xam9io2nrb] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    background: transparent var(--cvi-chevron) no-repeat right 0.75rem center / 1.1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-sans);
    outline: none;
    cursor: pointer;
    min-width: 140px;
    transition: border-color 0.2s;
}

.form-select:focus[b-xam9io2nrb] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

@media (pointer: coarse) {
    .form-select[b-xam9io2nrb] {
        min-height: var(--touch-min, 44px);
        font-size: max(16px, 0.85rem);
    }
}

@media (max-width: 560px) {
    .role-selector[b-xam9io2nrb] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .role-selector label[b-xam9io2nrb] {
        white-space: normal;
    }
}

/* ── Permission Grid ─────────────────── */
.permission-grid[b-xam9io2nrb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.permission-item[b-xam9io2nrb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px; /* Ensure minimum 44px hit areas */
    cursor: pointer;
    padding: 1rem 1.15rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

@media (hover: hover) {
    .permission-item:hover[b-xam9io2nrb] {
        border-color: rgba(99, 102, 241, 0.3);
        background: var(--bg-surface);
    }
}

.permission-info[b-xam9io2nrb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.permission-info strong[b-xam9io2nrb] {
    font-size: 0.88rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.permission-info strong svg[b-xam9io2nrb],
.permission-info strong .material-symbols-rounded[b-xam9io2nrb] {
    color: var(--accent-primary);
    flex-shrink: 0;
    font-size: 1.1rem;
}

.permission-info span[b-xam9io2nrb] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ── Toggle Switch ───────────────────── */
.toggle-switch[b-xam9io2nrb] {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input[b-xam9io2nrb] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider[b-xam9io2nrb] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--text-muted);
    border-radius: 1.5rem;
    transition: all 0.25s;
}

.toggle-slider[b-xam9io2nrb]::before {
    content: '';
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--bg-surface);
    left: 0.2rem;
    bottom: 0.2rem;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked+.toggle-slider[b-xam9io2nrb] {
    background: var(--accent-primary);
}

.toggle-switch input:checked+.toggle-slider[b-xam9io2nrb]::before {
    transform: translateX(1.25rem);
}

.toggle-switch input:focus-visible+.toggle-slider[b-xam9io2nrb] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ── Buttons ─────────────────────────── */
.btn[b-xam9io2nrb] {
    padding: 0.55rem 1.15rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    min-height: 44px; /* Hit area */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-xam9io2nrb] {
    background: var(--accent-solid);
    color: var(--on-accent);
}

.btn-primary:hover[b-xam9io2nrb] {
    background: var(--accent-solid-hover);
    color: var(--on-accent);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-primary:disabled[b-xam9io2nrb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-xam9io2nrb] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.btn-secondary:hover[b-xam9io2nrb] {
    background: var(--bg-elevated);
}

/* ── Misc ────────────────────────────── */
.loading[b-xam9io2nrb] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.spinner-border[b-xam9io2nrb] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-xam9io2nrb 0.6s linear infinite;
}

@keyframes spin-b-xam9io2nrb {
    to {
        transform: rotate(360deg);
    }
}

/* ── Toast Notification ──────────────── */
.toast-container[b-xam9io2nrb] {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    animation: slideIn-b-xam9io2nrb 0.3s ease-out;
}

.toast[b-xam9io2nrb] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
}

.toast-success[b-xam9io2nrb] {
    background: var(--accent-green-bg);
    color: var(--accent-green);
    border: 1px solid #a7f3d0;
}

.toast-error[b-xam9io2nrb] {
    background: var(--accent-red-bg);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.toast-icon[b-xam9io2nrb] {
    font-size: 1.1rem;
}

@keyframes slideIn-b-xam9io2nrb {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Added for compliance: hit areas, focus, disabled states */
.btn[b-xam9io2nrb], .btn-primary[b-xam9io2nrb], .btn-secondary[b-xam9io2nrb], .btn-danger[b-xam9io2nrb], .btn-outline[b-xam9io2nrb], .btn-sm[b-xam9io2nrb], button[b-xam9io2nrb], .form-control[b-xam9io2nrb], .form-select[b-xam9io2nrb], .toggle-slider[b-xam9io2nrb], .sod-back[b-xam9io2nrb] {
    min-height: 44px;
}
.btn:focus-visible[b-xam9io2nrb], button:focus-visible[b-xam9io2nrb], .form-control:focus-visible[b-xam9io2nrb], .form-select:focus-visible[b-xam9io2nrb], input:focus-visible[b-xam9io2nrb], textarea:focus-visible[b-xam9io2nrb] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.btn:disabled[b-xam9io2nrb], button:disabled[b-xam9io2nrb], .form-control:disabled[b-xam9io2nrb], .form-select:disabled[b-xam9io2nrb], input:disabled[b-xam9io2nrb], textarea:disabled[b-xam9io2nrb] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/AdminTeam.razor.rz.scp.css */
/* ── Team (/admin/team) ────────────────────────────────────────────
   Roster first, full width, with Invite as one action in the header (2026-10-07). The page used
   a 1000px column whose form sat above the list; on a 1697px desktop the content was a 430px
   strip. Panels, figures and pills come from the workspace page kit in chatmai-ui.css. */

.team-page[b-jibbc5jmz0] { max-width: 1200px; }

.team-invite-open .material-symbols-rounded[b-jibbc5jmz0] { font-size: 20px; }

.team-kpis[b-jibbc5jmz0] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.team-loading[b-jibbc5jmz0] {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 1.25rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.team-empty[b-jibbc5jmz0] { padding: 2rem 1.25rem; }

/* ── Roster table ─────────────────────────────────────────────── */
.team-table[b-jibbc5jmz0] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.team-table thead th[b-jibbc5jmz0] {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.team-table thead th:first-child[b-jibbc5jmz0] { padding-left: 1.25rem; }
.team-table tbody tr[b-jibbc5jmz0] { border-bottom: 1px solid var(--border-subtle); }
.team-table tbody tr:last-child[b-jibbc5jmz0] { border-bottom: 0; }
.team-table tbody tr:hover[b-jibbc5jmz0] { background: var(--bg-hover); }
.team-table tbody th[b-jibbc5jmz0],
.team-table tbody td[b-jibbc5jmz0] {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    text-align: left;
    font-weight: 400;
    color: var(--text-secondary);
}
.team-table tbody th[b-jibbc5jmz0] { padding-left: 1.25rem; min-width: 14rem; }

.team-member[b-jibbc5jmz0] { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.team-member-text[b-jibbc5jmz0] { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.team-member-name[b-jibbc5jmz0] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
    font-size: var(--text-base); font-weight: 600; color: var(--text-primary);
    overflow-wrap: anywhere;
}
.team-member-email[b-jibbc5jmz0],
.team-member-meta[b-jibbc5jmz0] { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }

.team-date[b-jibbc5jmz0] { white-space: nowrap; font-variant-numeric: tabular-nums; }

.team-row.is-suspended .team-member-name[b-jibbc5jmz0],
.team-row.is-removed .team-member-name[b-jibbc5jmz0] { color: var(--text-secondary); }
.team-row.is-removed .cm-avatar[b-jibbc5jmz0] { opacity: 0.6; }

.team-actions-cell[b-jibbc5jmz0] { width: 1%; white-space: nowrap; }
.team-actions[b-jibbc5jmz0] { display: flex; justify-content: flex-end; gap: 0.25rem; }
.team-actions .material-symbols-rounded[b-jibbc5jmz0] { font-size: 20px; }

/* ── Dialogs ──────────────────────────────────────────────────── */
.team-dialog[b-jibbc5jmz0] { width: min(100%, 30rem); }
.team-dialog--confirm[b-jibbc5jmz0] { width: min(100%, 26rem); }
.team-dialog-body[b-jibbc5jmz0] { display: flex; flex-direction: column; gap: 1rem; }
.team-dialog-desc[b-jibbc5jmz0] { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.team-dialog .cm-input[b-jibbc5jmz0] {
    padding: 0 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
}
.team-dialog .cm-input:focus[b-jibbc5jmz0] { outline: none; border-color: var(--border-accent); box-shadow: var(--ring); }

/* ── Narrow: each member is a card; the column headings become labels ──
   Measured on the roster panel itself, not the window: beside the 260px sidebar a 1024px window
   leaves the table about 700px, too narrow for six columns. */
.team-roster[b-jibbc5jmz0] { container-type: inline-size; }
@container (max-width: 720px) {
    .team-table[b-jibbc5jmz0], .team-table tbody[b-jibbc5jmz0], .team-table tr[b-jibbc5jmz0], .team-table th[b-jibbc5jmz0], .team-table td[b-jibbc5jmz0] { display: block; }
    .team-table thead[b-jibbc5jmz0] {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .team-table tbody tr[b-jibbc5jmz0] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem 0.75rem;
        padding: 1rem 1.25rem;
    }
    .team-table tbody tr:hover[b-jibbc5jmz0] { background: transparent; }
    .team-table tbody th[b-jibbc5jmz0],
    .team-table tbody td[b-jibbc5jmz0] { padding: 0; }
    .team-table tbody th[b-jibbc5jmz0] { grid-column: 1 / -1; min-width: 0; }
    .team-table td[data-label][b-jibbc5jmz0] {
        display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
        grid-column: 1 / -1;
        min-height: 1.75rem;
    }
    .team-table td[data-label][b-jibbc5jmz0]::before {
        content: attr(data-label);
        font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
    }
    .team-actions-cell[b-jibbc5jmz0] { grid-column: 1 / -1; width: auto; }
    .team-actions[b-jibbc5jmz0] { justify-content: flex-start; margin-top: 0.25rem; }
    .team-actions:empty[b-jibbc5jmz0] { display: none; }
}

@media (max-width: 640.98px) {
    /* The shell's mobile header already names the page with a Back button beside it. */
    .team-header .header-content h1[b-jibbc5jmz0] { display: none; }
    .team-kpis[b-jibbc5jmz0] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .team-kpis .cm-kpi-label .material-symbols-rounded[b-jibbc5jmz0] { display: none; }
}

@media (max-width: 640.98px) {
    .team-header .header-actions .cm-btn[b-jibbc5jmz0] { flex: 1 1 auto; }
}

/* Invitations (029): one row per waiting or expired invitation; stacks on a phone. */
.team-invite-list[b-jibbc5jmz0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.team-invite-row[b-jibbc5jmz0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    /* The same inset as the roster's first column, so names line up with the panel title. */
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border-default);
}

.team-invite-row:first-child[b-jibbc5jmz0] {
    border-top: 0;
}

.team-invite-state[b-jibbc5jmz0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.team-invite-failed[b-jibbc5jmz0] {
    color: var(--accent-red-text);
}

@media (max-width: 640px) {
    .team-invite-row[b-jibbc5jmz0] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/AiBotCreator.razor.rz.scp.css */
/* Base layout */
.cm-page[b-m3g6ww8g5b] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: var(--text-primary);
    background: var(--bg-app);
}

.cm-page-header[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: max(20px, env(safe-area-inset-top, 0px)) max(72px, env(safe-area-inset-right, 24px)) 20px max(24px, env(safe-area-inset-left, 24px));
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-left[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-btn[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.back-btn:hover[b-m3g6ww8g5b] {
    background: var(--bg-secondary);
}

.cm-page-header h1[b-m3g6ww8g5b] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.cm-page-content[b-m3g6ww8g5b] {
    flex: 1;
    padding: 32px max(24px, env(safe-area-inset-right, 24px)) 32px max(24px, env(safe-area-inset-left, 24px));
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Wizard */
.wizard-container[b-m3g6ww8g5b] {
    background: var(--bg-primary);
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
    border: 1px solid var(--border-default);
    overflow: hidden;
}

.wizard-steps[b-m3g6ww8g5b] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-primary);
    overflow-x: auto;
    scrollbar-width: none;
}
.wizard-steps[b-m3g6ww8g5b]::-webkit-scrollbar { display: none; }

.step[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-tertiary);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.6;
}

.step-num[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}

.step.active[b-m3g6ww8g5b] {
    color: var(--accent-primary);
    opacity: 1;
}

.step.active .step-num[b-m3g6ww8g5b] { background: var(--accent-solid, var(--accent-primary)); color: var(--on-accent, white); }

.step.completed[b-m3g6ww8g5b] {
    color: var(--text-primary);
    opacity: 1;
}

.step.completed .step-num[b-m3g6ww8g5b] { background: var(--accent-solid, var(--text-primary)); color: var(--bg-primary); }

.wizard-content[b-m3g6ww8g5b] {
    padding: 32px;
}

/* Form Layout */
.form-group[b-m3g6ww8g5b] {
    margin-bottom: 24px;
}

.form-group > label[b-m3g6ww8g5b] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.help-text[b-m3g6ww8g5b] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 4px 0 0 0;
    line-height: 1.4;
}

.form-row[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-default);
}
.form-row:last-child[b-m3g6ww8g5b] {
    border-bottom: none;
}
.form-row.align-top[b-m3g6ww8g5b] {
    align-items: flex-start;
}
.form-row-content[b-m3g6ww8g5b] {
    flex: 1;
    min-width: 0;
}
.form-row-content label[b-m3g6ww8g5b] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.form-row-input[b-m3g6ww8g5b] {
    flex: 2;
    min-width: 0;
}

/* Inputs */
.cm-input[b-m3g6ww8g5b] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cm-input:focus[b-m3g6ww8g5b] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light, rgba(0,100,255,0.1));
}
.cm-textarea[b-m3g6ww8g5b] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* Toggle */
.bot-toggle[b-m3g6ww8g5b] { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.bot-toggle input[b-m3g6ww8g5b] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.toggle-slider[b-m3g6ww8g5b] { position: relative; width: 44px; height: 24px; background-color: var(--text-tertiary); transition: .4s; border-radius: 24px; }
.toggle-slider[b-m3g6ww8g5b]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.bot-toggle input:focus-visible + .toggle-slider[b-m3g6ww8g5b] { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .bot-toggle input:checked + .toggle-slider[b-m3g6ww8g5b] {
    background-color: var(--accent-solid, var(--accent-primary));
}
.bot-toggle input:checked + .toggle-slider[b-m3g6ww8g5b]:before {
    transform: translateX(20px);
}

/* Buttons */
.wizard-actions[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    padding: 24px 32px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-default);
}
.spacer[b-m3g6ww8g5b] { flex: 1; }

.cm-btn[b-m3g6ww8g5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.cm-btn:hover[b-m3g6ww8g5b] { background: var(--bg-secondary); }
.cm-btn--primary[b-m3g6ww8g5b] {
    background: var(--accent-solid, var(--accent-primary));
    color: var(--on-accent, white);
    border-color: transparent;
}
.cm-btn--primary:hover[b-m3g6ww8g5b] {
    background: var(--accent-primary);
    filter: brightness(0.9);
}
.cm-btn:disabled[b-m3g6ww8g5b] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Avatars */
.avatar-tabs[b-m3g6ww8g5b] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 12px;
    display: inline-flex;
}
.tab-btn[b-m3g6ww8g5b] {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.tab-btn.active[b-m3g6ww8g5b] {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.avatar-catalog h4[b-m3g6ww8g5b] {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.avatar-grid[b-m3g6ww8g5b] { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.avatar-option[b-m3g6ww8g5b] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s; background-size: 400% 400%; background-repeat: no-repeat;
}
.avatar-option:hover[b-m3g6ww8g5b] { transform: scale(1.05); }
.avatar-option.selected[b-m3g6ww8g5b] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px var(--accent-light, rgba(0,100,255,0.1));
}
.selected-avatar-name[b-m3g6ww8g5b] {
    margin: 16px 0 0 0;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-block;
}

/* Upload */
.avatar-upload[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    gap: 20px;
}
.upload-area[b-m3g6ww8g5b] {
    position: relative;
    width: 120px;
    height: 120px;
}
/* InputFile renders its <input> as a child component, so it needs ::deep to receive these styles. */
.upload-area[b-m3g6ww8g5b]  .cm-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.upload-label[b-m3g6ww8g5b] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.3;
    border: 2px dashed var(--border-default);
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transition: all 0.2s;
    z-index: 1;
}
.upload-area[b-m3g6ww8g5b]  .cm-file-input:hover + .upload-label,
.upload-area[b-m3g6ww8g5b]  .cm-file-input:focus-visible + .upload-label {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.upload-area[b-m3g6ww8g5b]  .cm-file-input:focus-visible + .upload-label {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}
.preview-avatar[b-m3g6ww8g5b], .avatar-preview[b-m3g6ww8g5b] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-default);
}

/* Cards */
.card-list[b-m3g6ww8g5b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.list-item-checkbox[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.2s;
}
.list-item-checkbox:hover[b-m3g6ww8g5b] { border-color: var(--accent-primary); }
.list-item-checkbox.selected[b-m3g6ww8g5b] {
    border-color: var(--accent-primary);
    background: var(--accent-light, rgba(0,100,255,0.02));
}
.item-content[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}
.item-content iconify-icon[b-m3g6ww8g5b] {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

/* Thai addressing: three choices, each showing the sentence it produces */
.addressing-group[b-m3g6ww8g5b] { border: 0; margin: 0; padding: 0; min-width: 0; }
.addressing-legend[b-m3g6ww8g5b] { font-weight: 600; color: var(--text-primary); padding: 0; }
.addressing-options[b-m3g6ww8g5b] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.addressing-option[b-m3g6ww8g5b] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: var(--touch-min, 44px);
    padding: 12px 14px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    background: var(--bg-primary);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.addressing-option:hover[b-m3g6ww8g5b] { border-color: var(--accent-primary); }
.addressing-option.selected[b-m3g6ww8g5b] { border-color: var(--accent-primary); background: var(--accent-light); }
.addressing-option input[b-m3g6ww8g5b] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.addressing-option:has(input:focus-visible)[b-m3g6ww8g5b] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.addressing-title[b-m3g6ww8g5b] { font-weight: 600; color: var(--text-primary); }
.addressing-sample[b-m3g6ww8g5b] { font-size: 0.875rem; line-height: 1.45; color: var(--text-secondary); }

/* Where auto-reply, hours and the AI model are set */
.ai-config-pointer[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px dashed var(--border-default);
    border-radius: 12px;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}
.ai-config-pointer:hover[b-m3g6ww8g5b], .ai-config-pointer:focus-visible[b-m3g6ww8g5b] { border-color: var(--accent-primary); background: var(--bg-secondary); }
.ai-config-pointer > iconify-icon[b-m3g6ww8g5b] { flex: none; width: 22px; height: 22px; font-size: 22px; color: var(--text-secondary); }
.ai-config-pointer > span[b-m3g6ww8g5b] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ai-config-pointer > span > span[b-m3g6ww8g5b] { font-size: 0.875rem; color: var(--text-secondary); }

/* Knowledge */
.k-cards[b-m3g6ww8g5b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.k-card[b-m3g6ww8g5b] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-default);
}
.k-content strong[b-m3g6ww8g5b] {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.k-content p[b-m3g6ww8g5b] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}
.k-actions[b-m3g6ww8g5b] {
    display: flex;
    gap: 4px;
}
.btn-icon[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-icon:hover[b-m3g6ww8g5b] { background: var(--bg-primary); color: var(--text-primary); }
.btn-icon.danger:hover[b-m3g6ww8g5b] { color: #dc2626; background: #fee2e2; }

/* Review */
.review-section[b-m3g6ww8g5b] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.local-preview[b-m3g6ww8g5b] {
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--border-default);
}
.preview-header[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.preview-header .preview-avatar[b-m3g6ww8g5b], .preview-header .avatar-preview[b-m3g6ww8g5b] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.preview-title h4[b-m3g6ww8g5b] {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
}
.preview-badge[b-m3g6ww8g5b] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--accent-light, rgba(0,100,255,0.1));
    color: var(--accent-primary);
    border-radius: 100px;
}
.preview-chat[b-m3g6ww8g5b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-bubble[b-m3g6ww8g5b] {
    background: var(--bg-primary);
    padding: 16px;
    border-radius: 16px;
    border-top-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.bot-identity[b-m3g6ww8g5b] {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.review-details[b-m3g6ww8g5b] {
    display: flex;
    flex-direction: column;
}
.review-row[b-m3g6ww8g5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-default);
}
.review-row:last-child[b-m3g6ww8g5b] { border-bottom: none; }
.review-row span[b-m3g6ww8g5b] { color: var(--text-secondary); }
.review-row strong[b-m3g6ww8g5b] { color: var(--text-primary); font-weight: 600; }

/* Avatars Sprite */
.catalog-avatar[b-m3g6ww8g5b] { background-size: 400% 400%; }
.avatar-c-0[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 0% 0%; }
.avatar-t-0[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 0% 0%; }
.avatar-c-1[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 33.333333% 0%; }
.avatar-t-1[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 33.333333% 0%; }
.avatar-c-2[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 66.666667% 0%; }
.avatar-t-2[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 66.666667% 0%; }
.avatar-c-3[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 100% 0%; }
.avatar-t-3[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 100% 0%; }
.avatar-c-4[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 0% 33.333333%; }
.avatar-t-4[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 0% 33.333333%; }
.avatar-c-5[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 33.333333% 33.333333%; }
.avatar-t-5[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 33.333333% 33.333333%; }
.avatar-c-6[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 66.666667% 33.333333%; }
.avatar-t-6[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 66.666667% 33.333333%; }
.avatar-c-7[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 100% 33.333333%; }
.avatar-t-7[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 100% 33.333333%; }
.avatar-c-8[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 0% 66.666667%; }
.avatar-t-8[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 0% 66.666667%; }
.avatar-c-9[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 33.333333% 66.666667%; }
.avatar-t-9[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 33.333333% 66.666667%; }
.avatar-c-10[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 66.666667% 66.666667%; }
.avatar-t-10[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 66.666667% 66.666667%; }
.avatar-c-11[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 100% 66.666667%; }
.avatar-t-11[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 100% 66.666667%; }
.avatar-c-12[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 0% 100%; }
.avatar-t-12[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 0% 100%; }
.avatar-c-13[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 33.333333% 100%; }
.avatar-t-13[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 33.333333% 100%; }
.avatar-c-14[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 66.666667% 100%; }
.avatar-t-14[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 66.666667% 100%; }
.avatar-c-15[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 100% 100%; }
.avatar-t-15[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 100% 100%; }
.avatar-f-0[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 0% 0%; }
.avatar-f-1[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 33.333333% 0%; }
.avatar-f-2[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 66.666667% 0%; }
.avatar-f-3[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 100% 0%; }
.avatar-f-4[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 0% 33.333333%; }
.avatar-f-5[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 33.333333% 33.333333%; }
.avatar-f-6[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 66.666667% 33.333333%; }
.avatar-f-7[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 100% 33.333333%; }
.avatar-f-8[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 0% 66.666667%; }
.avatar-f-9[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 33.333333% 66.666667%; }
.avatar-f-10[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 66.666667% 66.666667%; }
.avatar-f-11[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 100% 66.666667%; }
.avatar-f-12[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 0% 100%; }
.avatar-f-13[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 33.333333% 100%; }
.avatar-f-14[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 66.666667% 100%; }
.avatar-f-15[b-m3g6ww8g5b] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 100% 100%; }

@media (max-width: 768px) {
    .wizard-steps[b-m3g6ww8g5b] {
        position: relative;
        padding: 24px 16px 48px 16px;
        gap: 0;
    }
    .step[b-m3g6ww8g5b] {
        flex: 1;
        justify-content: center;
    }
    .step:not(.active) .step-label[b-m3g6ww8g5b] {
        display: none;
    }
    .step.active .step-label[b-m3g6ww8g5b] {
        display: block;
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 12px;
        text-align: center;
    }
    .cm-page-header[b-m3g6ww8g5b] {
        display: none;
    }
    .cm-page-content[b-m3g6ww8g5b] {
        padding: 16px max(16px, env(safe-area-inset-right, 16px)) 16px max(16px, env(safe-area-inset-left, 16px));
    }
    .form-row[b-m3g6ww8g5b] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .addressing-options[b-m3g6ww8g5b] { grid-template-columns: minmax(0, 1fr); }
    .wizard-content[b-m3g6ww8g5b] {
        padding: 20px;
    }
    .wizard-actions[b-m3g6ww8g5b] {
        padding: 16px 20px;
    }

    .form-row-input[b-m3g6ww8g5b] {
        width: 100%;
    }
}
/* /Components/Pages/AiBotsList.razor.rz.scp.css */
/* Base page layout */
.cm-page[b-6lfr9vaiun] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: var(--text-primary);
    background: var(--bg-app);
}

.cm-page-header[b-6lfr9vaiun] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: max(20px, env(safe-area-inset-top, 0px)) max(72px, env(safe-area-inset-right, 24px)) 20px max(24px, env(safe-area-inset-left, 24px));
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-content h1[b-6lfr9vaiun] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.header-sub[b-6lfr9vaiun] {
    margin: 4px 0 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.header-actions[b-6lfr9vaiun] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon-btn[b-6lfr9vaiun] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    color: var(--text-secondary);
    background: transparent; position: static;
    border: 1px solid var(--border-default);
    font-size: 1.25rem;
}
.header-icon-btn:hover[b-6lfr9vaiun] {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.cm-page-content[b-6lfr9vaiun] {
    flex: 1;
    padding: 24px max(24px, env(safe-area-inset-right, 24px)) 24px max(24px, env(safe-area-inset-left, 24px));
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Empty State */
.empty-state[b-6lfr9vaiun] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 480px;
    margin: 40px auto;
    text-align: center;
}

.empty-hero[b-6lfr9vaiun] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.avatar-cluster[b-6lfr9vaiun] {
    position: relative;
    width: 120px;
    height: 80px;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.avatar-cluster .bot-avatar[b-6lfr9vaiun] {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--bg-app);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.avatar-left[b-6lfr9vaiun] {
    left: 0;
    top: 12px;
    z-index: 1;
    transform: rotate(-10deg);
}

.avatar-right[b-6lfr9vaiun] {
    right: 0;
    top: 12px;
    z-index: 2;
    transform: rotate(10deg);
}

.avatar-center[b-6lfr9vaiun] {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 3;
    width: 64px !important;
    height: 64px !important;
}

.empty-hero h2[b-6lfr9vaiun] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.empty-sub[b-6lfr9vaiun] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 32px 0;
    line-height: 1.5;
}

.empty-create-btn[b-6lfr9vaiun] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 100px;
    background: var(--accent-solid, var(--accent-primary));
    color: var(--on-accent, white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.how-it-works-card[b-6lfr9vaiun] {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 20px;
    padding: 24px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 32px;
}

.hiw-step[b-6lfr9vaiun] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
}

.hiw-icon[b-6lfr9vaiun] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--accent-primary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.hiw-text[b-6lfr9vaiun] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hiw-text strong[b-6lfr9vaiun] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.hiw-text span[b-6lfr9vaiun] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.hiw-divider[b-6lfr9vaiun] {
    height: 1px;
    background: var(--border-default);
    margin: 16px 0 16px 20px;
    width: calc(100% - 20px);
}

.subdued-link[b-6lfr9vaiun] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 100px;
    transition: background 0.2s;
}

.subdued-link:hover[b-6lfr9vaiun] {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

/* Populated Grid */
.bot-grid[b-6lfr9vaiun] {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.bot-card[b-6lfr9vaiun] {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
}

.bot-card:hover[b-6lfr9vaiun], .bot-card:focus-visible[b-6lfr9vaiun] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: var(--accent-primary);
    outline: none;
}

.bot-card-header[b-6lfr9vaiun] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.bot-avatar[b-6lfr9vaiun] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--bg-secondary);
}

.empty-avatar[b-6lfr9vaiun] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-tertiary);
}

.bot-info[b-6lfr9vaiun] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bot-name[b-6lfr9vaiun] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bot-voice[b-6lfr9vaiun] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 100px;
    align-self: flex-start;
}

.bot-card-body[b-6lfr9vaiun] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-default);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.bot-channels[b-6lfr9vaiun] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bot-channels iconify-icon[b-6lfr9vaiun] {
    font-size: 1.125rem;
    color: var(--text-tertiary);
}

/* Loading & Error */
.loading-state[b-6lfr9vaiun] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 16px;
    color: var(--text-secondary);
}
.spin-icon[b-6lfr9vaiun] {
    font-size: 2rem;
    animation: spin-b-6lfr9vaiun 1s linear infinite;
}
@keyframes spin-b-6lfr9vaiun { 100% { transform: rotate(360deg); } }

/* Shared styles from old CSS */
.cm-btn[b-6lfr9vaiun] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.cm-btn:hover[b-6lfr9vaiun] {
    background: var(--bg-secondary);
}
.cm-btn--primary[b-6lfr9vaiun] {
    background: var(--accent-solid, var(--accent-primary));
    color: var(--on-accent, white);
    border-color: transparent;
}
.cm-btn--primary:hover[b-6lfr9vaiun] {
    background: var(--accent-primary);
    filter: brightness(0.9);
}
.cm-btn:focus-visible[b-6lfr9vaiun] { outline: 3px solid var(--accent-primary); outline-offset: 3px; }

/* Avatars */
.catalog-avatar[b-6lfr9vaiun] { background-size: 400% 400%; }
.avatar-c-0[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 0% 0%; }
.avatar-t-0[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 0% 0%; }
.avatar-c-1[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 33.333333% 0%; }
.avatar-t-1[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 33.333333% 0%; }
.avatar-c-2[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 66.666667% 0%; }
.avatar-t-2[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 66.666667% 0%; }
.avatar-c-3[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 100% 0%; }
.avatar-t-3[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 100% 0%; }
.avatar-c-4[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 0% 33.333333%; }
.avatar-t-4[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 0% 33.333333%; }
.avatar-c-5[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 33.333333% 33.333333%; }
.avatar-t-5[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 33.333333% 33.333333%; }
.avatar-c-6[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 66.666667% 33.333333%; }
.avatar-t-6[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 66.666667% 33.333333%; }
.avatar-c-7[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 100% 33.333333%; }
.avatar-t-7[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 100% 33.333333%; }
.avatar-c-8[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 0% 66.666667%; }
.avatar-t-8[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 0% 66.666667%; }
.avatar-c-9[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 33.333333% 66.666667%; }
.avatar-t-9[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 33.333333% 66.666667%; }
.avatar-c-10[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 66.666667% 66.666667%; }
.avatar-t-10[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 66.666667% 66.666667%; }
.avatar-c-11[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 100% 66.666667%; }
.avatar-t-11[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 100% 66.666667%; }
.avatar-c-12[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 0% 100%; }
.avatar-t-12[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 0% 100%; }
.avatar-c-13[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 33.333333% 100%; }
.avatar-t-13[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 33.333333% 100%; }
.avatar-c-14[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 66.666667% 100%; }
.avatar-t-14[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 66.666667% 100%; }
.avatar-c-15[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-companions-v1.png'); background-position: 100% 100%; }
.avatar-t-15[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-people-v1.png'); background-position: 100% 100%; }
.avatar-f-0[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 0% 0%; }
.avatar-f-1[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 33.333333% 0%; }
.avatar-f-2[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 66.666667% 0%; }
.avatar-f-3[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 100% 0%; }
.avatar-f-4[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 0% 33.333333%; }
.avatar-f-5[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 33.333333% 33.333333%; }
.avatar-f-6[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 66.666667% 33.333333%; }
.avatar-f-7[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 100% 33.333333%; }
.avatar-f-8[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 0% 66.666667%; }
.avatar-f-9[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 33.333333% 66.666667%; }
.avatar-f-10[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 66.666667% 66.666667%; }
.avatar-f-11[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 100% 66.666667%; }
.avatar-f-12[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 0% 100%; }
.avatar-f-13[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 33.333333% 100%; }
.avatar-f-14[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 66.666667% 100%; }
.avatar-f-15[b-6lfr9vaiun] { background-image: url('/images/avatars/chatmai-thai-folklore-v1.png'); background-position: 100% 100%; }

@media (max-width: 768px) {
    .cm-page-header[b-6lfr9vaiun] {
        padding: 16px max(16px, env(safe-area-inset-right, 16px)) 0 max(16px, env(safe-area-inset-left, 16px));
        background: transparent; position: static;
        border-bottom: none;
        justify-content: flex-end;
    }
    .header-content[b-6lfr9vaiun] {
        display: none;
    }
    .header-actions .cm-btn span[b-6lfr9vaiun] {
        display: none;
    }
    .header-actions .cm-btn[b-6lfr9vaiun] {
        padding: 10px;
    }
    .cm-page-content[b-6lfr9vaiun] {
        padding: 16px max(16px, env(safe-area-inset-right, 16px)) 16px max(16px, env(safe-area-inset-left, 16px));
    }
    .empty-hero h2[b-6lfr9vaiun] {
        font-size: 1.5rem;
    }
    .empty-sub[b-6lfr9vaiun] {
        font-size: 0.9375rem;
    }
}
/* /Components/Pages/AiConfigPage.razor.rz.scp.css */
/* AI Config: channels first (what runs where), configurations second, editor in a sheet. */

/* Page gutters: this page has no shared .cm-page styles, so it keeps its own (24px, 16px on phones). */
.aic-page[b-pmehmbi12s] {
    width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box;
    padding: 24px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px));
}
.aic-header[b-pmehmbi12s] {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.5rem;
}
.aic-header h1[b-pmehmbi12s] { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.aic-intro[b-pmehmbi12s] { min-width: 0; flex: 1 1 320px; }
.aic-sub[b-pmehmbi12s] { margin: 0.375rem 0 0; color: var(--text-secondary); font-size: 0.9375rem; max-width: 60ch; }
.aic-header-actions[b-pmehmbi12s] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.aic-state[b-pmehmbi12s] {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    padding: 3rem 1rem; color: var(--text-secondary); text-align: center;
}
.aic-spin[b-pmehmbi12s] { animation: aic-spin-b-pmehmbi12s 1s linear infinite; }
@keyframes aic-spin-b-pmehmbi12s { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aic-spin[b-pmehmbi12s] { animation: none; } }

.aic-status[b-pmehmbi12s] { margin-bottom: 1rem; }

.aic-section[b-pmehmbi12s] { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 2rem; }
.aic-section-title[b-pmehmbi12s] { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }

.aic-empty[b-pmehmbi12s] {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    padding: 2rem 1rem; border: 1px dashed var(--border-default); border-radius: var(--radius-lg, 16px);
    color: var(--text-secondary); text-align: center;
}
.aic-empty > iconify-icon[b-pmehmbi12s] { width: 32px; height: 32px; font-size: 32px; }
.aic-empty p[b-pmehmbi12s] { margin: 0; }

/* Channels */
.aic-channel-list[b-pmehmbi12s] {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0.875rem;
}
.aic-channel[b-pmehmbi12s] {
    display: flex; flex-direction: column; gap: 0.75rem; min-width: 0;
    padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg, 16px);
    background: var(--bg-surface);
}
.aic-channel.is-broken[b-pmehmbi12s] { border-color: var(--accent-red-text); }
.aic-channel.is-disconnected[b-pmehmbi12s] { background: var(--bg-secondary); }
.aic-channel-head[b-pmehmbi12s] { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.aic-logo[b-pmehmbi12s] { flex: none; display: inline-flex; width: 22px; height: 22px; }
.aic-channel-name[b-pmehmbi12s] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.aic-channel-name strong[b-pmehmbi12s] {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary);
}
.aic-origin[b-pmehmbi12s] {
    align-self: flex-start; padding: 0.125rem 0.5rem; border-radius: var(--radius-full, 999px);
    font-size: 0.75rem; font-weight: 600; background: var(--bg-tertiary); color: var(--text-secondary);
}
.aic-origin--assigned[b-pmehmbi12s] { background: var(--accent-blue-bg); color: var(--accent-blue-text); }
.aic-origin--broken[b-pmehmbi12s] { background: var(--accent-red-bg); color: var(--accent-red-text); }

.aic-facts[b-pmehmbi12s] { margin: 0; display: grid; gap: 0.375rem; }
.aic-facts > div[b-pmehmbi12s] { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
.aic-facts dt[b-pmehmbi12s] { color: var(--text-secondary); font-size: 0.8125rem; }
.aic-facts dd[b-pmehmbi12s] { margin: 0; min-width: 0; color: var(--text-primary); font-size: 0.875rem; overflow-wrap: anywhere; }
.aic-facts dd.is-on[b-pmehmbi12s] { color: var(--accent-green-text); font-weight: 600; }
.aic-facts dd.is-off[b-pmehmbi12s] { color: var(--text-secondary); font-weight: 600; }

.aic-broken[b-pmehmbi12s] {
    display: flex; gap: 0.5rem; align-items: flex-start; margin: 0;
    padding: 0.625rem 0.75rem; border-radius: var(--radius-md, 10px);
    background: var(--accent-red-bg); color: var(--accent-red-text); font-size: 0.875rem;
}
.aic-broken > iconify-icon[b-pmehmbi12s] { flex: none; width: 18px; height: 18px; font-size: 18px; margin-top: 1px; }

.aic-assign[b-pmehmbi12s] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    padding-top: 0.75rem; border-top: 1px dashed var(--border-default);
}
.aic-assign label[b-pmehmbi12s] { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.aic-assign select[b-pmehmbi12s] { flex: 1 1 12rem; min-width: 0; min-height: var(--touch-min, 44px); }
.aic-assign > iconify-icon[b-pmehmbi12s] { flex: none; width: 18px; height: 18px; font-size: 18px; color: var(--text-secondary); }
.aic-disconnected[b-pmehmbi12s] { flex: 1 1 12rem; font-size: 0.875rem; color: var(--text-secondary); }

/* Message filter: a summary row on the channel card, the list in its own sheet */
.aic-filter-row[b-pmehmbi12s] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding-top: 0.75rem; border-top: 1px dashed var(--border-default);
}
.aic-filter-text[b-pmehmbi12s] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-width: 0; flex: 1 1 12rem; font-size: 0.8125rem; color: var(--text-secondary); }
.aic-filter-text > iconify-icon[b-pmehmbi12s] { flex: none; width: 16px; height: 16px; font-size: 16px; }
.aic-filter-count[b-pmehmbi12s] { font-weight: 600; color: var(--text-secondary); }
.aic-filter-count.has-rules[b-pmehmbi12s] { color: var(--accent-amber-text); }
.aic-filter-row .cm-btn[b-pmehmbi12s] { min-height: var(--touch-min, 44px); }
.aic-delay-queued[b-pmehmbi12s] { font-size: 0.75rem; color: var(--text-secondary); }
.aic-delay-switch[b-pmehmbi12s] { display: flex; align-items: center; gap: 0.5rem; min-height: var(--touch-min, 44px); font-weight: 600; }
.aic-delay-switch input[b-pmehmbi12s] { width: 1.125rem; height: 1.125rem; flex: none; }
.aic-delay-range[b-pmehmbi12s] { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0.75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md, 12px); min-width: 0; }
.aic-delay-range legend[b-pmehmbi12s] { padding: 0 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.aic-delay-range label[b-pmehmbi12s] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; color: var(--text-secondary); min-width: 0; }
.aic-delay-range[disabled][b-pmehmbi12s] { opacity: 0.6; }
.aic-delay-sheet .aic-sheet-body[b-pmehmbi12s] { display: flex; flex-direction: column; gap: 0.75rem; }

.aic-filter-head[b-pmehmbi12s] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.aic-filter-channel[b-pmehmbi12s] { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: 0.8125rem; color: var(--text-secondary); }
.aic-filter-channel > span[b-pmehmbi12s] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-filter-help[b-pmehmbi12s] { margin: 0; font-size: 0.875rem; color: var(--text-primary); }
.aic-filter-empty[b-pmehmbi12s] {
    margin: 0; padding: 1rem; border: 1px dashed var(--border-default); border-radius: var(--radius-md, 10px);
    font-size: 0.875rem; color: var(--text-secondary); text-align: center;
}
.aic-rules[b-pmehmbi12s] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.aic-rule[b-pmehmbi12s] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 10rem) var(--touch-min, 44px); align-items: center; gap: 0.5rem;
}
.aic-rule .cm-input[b-pmehmbi12s] { min-height: var(--touch-min, 44px); min-width: 0; }
.aic-rule-remove[b-pmehmbi12s] { color: var(--accent-red-text); }
.aic-rule-remove:disabled[b-pmehmbi12s] { opacity: 0.5; cursor: default; }
.aic-rules-foot[b-pmehmbi12s] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.aic-rules-foot .cm-btn[b-pmehmbi12s] { min-height: var(--touch-min, 44px); }

/* Configurations */
.aic-config-grid[b-pmehmbi12s] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0.875rem; }
.aic-config[b-pmehmbi12s] {
    display: flex; flex-direction: column; gap: 0.75rem; min-width: 0;
    padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg, 16px);
    background: var(--bg-surface);
}
.aic-config--default[b-pmehmbi12s] { background: var(--bg-secondary); }
.aic-config header[b-pmehmbi12s] { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; min-width: 0; }
.aic-config h3[b-pmehmbi12s] {
    margin: 0; min-width: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aic-count[b-pmehmbi12s] { flex: none; font-size: 0.8125rem; color: var(--text-secondary); }
.aic-facts--compact > div[b-pmehmbi12s] { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
.aic-note[b-pmehmbi12s] { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); }
.aic-config footer[b-pmehmbi12s] { display: flex; gap: 0.5rem; margin-top: auto; }
.aic-delete[b-pmehmbi12s] { margin-left: auto; color: var(--accent-red-text); }

/* Editor sheet */
.aic-backdrop[b-pmehmbi12s] { position: fixed; inset: 0; z-index: 1400; background: rgba(0, 0, 0, 0.45); }
.aic-sheet[b-pmehmbi12s] {
    position: fixed; z-index: 1450; top: 0; right: 0; bottom: 0;
    width: min(560px, 100vw); display: flex; flex-direction: column;
    background: var(--bg-surface); color: var(--text-primary);
    border-left: 1px solid var(--border-default); box-shadow: var(--shadow-xl, 0 10px 40px rgba(0, 0, 0, 0.25));
}
.aic-sheet-head[b-pmehmbi12s] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-default);
}
.aic-sheet-head h2[b-pmehmbi12s] { margin: 0; font-size: 1.125rem; font-weight: 700; }
.aic-close[b-pmehmbi12s] {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch-min, 44px); height: var(--touch-min, 44px); border: 0; border-radius: var(--radius-full, 999px);
    background: transparent; color: var(--text-secondary); cursor: pointer;
}
.aic-close:hover[b-pmehmbi12s], .aic-close:focus-visible[b-pmehmbi12s] { background: var(--bg-hover); color: var(--text-primary); }
.aic-close iconify-icon[b-pmehmbi12s] { width: 20px; height: 20px; font-size: 20px; }
.aic-sheet-body[b-pmehmbi12s] { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.aic-sheet-foot[b-pmehmbi12s] {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.875rem 1.25rem calc(0.875rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border-default);
}

.aic-field[b-pmehmbi12s] { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.aic-field > label[b-pmehmbi12s] { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.aic-field--inline[b-pmehmbi12s] { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; }
.aic-field--inline select[b-pmehmbi12s] { flex: 0 1 11rem; min-width: 0; }
.aic-field select[b-pmehmbi12s], .aic-field input[b-pmehmbi12s] { min-height: var(--touch-min, 44px); }

.aic-group[b-pmehmbi12s] { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.aic-group legend[b-pmehmbi12s] { padding: 0; margin-bottom: 0.25rem; font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); }
.aic-hint[b-pmehmbi12s] { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); }
.aic-hint a[b-pmehmbi12s], .aic-key a[b-pmehmbi12s] { color: var(--link, var(--accent-primary)); font-weight: 600; }

.aic-switch-row[b-pmehmbi12s] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.aic-switch-row span[b-pmehmbi12s] { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.aic-switch-row small[b-pmehmbi12s] { color: var(--text-secondary); font-size: 0.8125rem; }

.aic-segment[b-pmehmbi12s] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem;
    padding: 0.25rem; border-radius: var(--radius-md, 10px); background: var(--bg-tertiary);
}
.aic-segment-item[b-pmehmbi12s] {
    position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 40px; padding: 0.375rem 0.5rem; border-radius: calc(var(--radius-md, 10px) - 2px);
    font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.aic-segment-item input[b-pmehmbi12s] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aic-segment-item.selected[b-pmehmbi12s] { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12)); }
.aic-segment-item:has(input:focus-visible)[b-pmehmbi12s] { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

.aic-week[b-pmehmbi12s] { display: flex; flex-direction: column; gap: 0.5rem; }
.aic-day[b-pmehmbi12s] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md, 10px);
    background: var(--bg-secondary);
}
.aic-day.is-on[b-pmehmbi12s] { background: var(--bg-surface); border-color: var(--accent-primary); }
.aic-day-name[b-pmehmbi12s] { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; font-weight: 600; cursor: pointer; }
.aic-day-name input[b-pmehmbi12s] { width: 18px; height: 18px; }
.aic-times[b-pmehmbi12s] { display: flex; align-items: center; gap: 0.375rem; flex: 1 1 14rem; min-width: 0; }
.aic-times input[b-pmehmbi12s] { flex: 1; min-width: 0; }
.aic-times input:disabled[b-pmehmbi12s] { opacity: 0.5; }

.aic-key[b-pmehmbi12s] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; font-size: 0.8125rem; }
.aic-key.is-ok[b-pmehmbi12s] { color: var(--accent-green-text); }
.aic-key.is-warn[b-pmehmbi12s] { color: var(--accent-amber-text); }
.aic-key iconify-icon[b-pmehmbi12s] { width: 16px; height: 16px; font-size: 16px; }

.aic-select-all[b-pmehmbi12s] { align-self: flex-start; }
.aic-pick[b-pmehmbi12s] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.aic-pick-item[b-pmehmbi12s] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; min-height: var(--touch-min, 44px);
    padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md, 10px);
    cursor: pointer; background: var(--bg-surface);
}
.aic-pick-item.selected[b-pmehmbi12s] { border-color: var(--accent-primary); background: var(--accent-light); }
.aic-pick-item input[b-pmehmbi12s] { width: 18px; height: 18px; flex: none; }
.aic-pick-name[b-pmehmbi12s] { flex: 1 1 8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-pick-now[b-pmehmbi12s] { flex: 1 1 100%; padding-left: 1.75rem; color: var(--text-secondary); font-size: 0.75rem; }

/* Delete confirmation: the channels that return to the workspace default */
.aic-dialog-lead[b-pmehmbi12s] { margin: 0 0 0.5rem; }
.aic-dialog-list[b-pmehmbi12s] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.aic-dialog-list li[b-pmehmbi12s] { display: flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--text-primary); }
.aic-dialog-list li span[b-pmehmbi12s] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-field textarea[b-pmehmbi12s] { min-height: auto; resize: vertical; }

@media (max-width: 768px) {
    .aic-page[b-pmehmbi12s] { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); }
    .aic-header[b-pmehmbi12s] { margin-bottom: 1rem; }
    /* A column header must not keep the 320px basis as a vertical reserve (ChatMai AGENTS). */
    .aic-intro[b-pmehmbi12s] { flex-basis: auto; }
    .aic-header h1[b-pmehmbi12s] { display: none; }
    .aic-header[b-pmehmbi12s] { padding-top: 0.25rem; }
    .aic-header-actions[b-pmehmbi12s] { width: 100%; }
    .aic-header-actions > *[b-pmehmbi12s] { flex: 1 1 0; justify-content: center; }
    .aic-sheet[b-pmehmbi12s] {
        top: auto; left: 0; width: 100vw; max-height: calc(var(--cm-vvh, 100dvh) - 2rem);
        border-left: 0; border-top: 1px solid var(--border-default);
        border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;
    }
    .aic-facts > div[b-pmehmbi12s], .aic-facts--compact > div[b-pmehmbi12s] { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
    .aic-segment-item[b-pmehmbi12s] { font-size: 0.8125rem; }
    /* Phrase on its own line, how it matches and Remove beneath it. */
    .aic-rule[b-pmehmbi12s] { grid-template-columns: minmax(0, 1fr) var(--touch-min, 44px); padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-default); }
    .aic-rule-phrase[b-pmehmbi12s] { grid-column: 1 / -1; }
}
/* /Components/Pages/AiQuestions.razor.rz.scp.css */
/* ── AI Questions Page ────────────────────────────────────── */
.cm-page[b-96kav6wd7c] {
    padding: 1.5rem 1.5rem calc(4rem + env(safe-area-inset-bottom, 0px));
    max-width: 1000px;
    margin: 0 auto;
    min-width: 0;
}

.cm-page-header[b-96kav6wd7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.header-content h1[b-96kav6wd7c] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.header-content .subtitle[b-96kav6wd7c] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0 0;
}

.header-actions[b-96kav6wd7c] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cm-chips[b-96kav6wd7c] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.cm-chip[b-96kav6wd7c] {
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--border-default);
    border-radius: 22px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
.cm-chip.active[b-96kav6wd7c] {
    background: var(--accent-solid);
    color: var(--on-accent);
    border-color: var(--accent-solid);
}
.cm-chip-count[b-96kav6wd7c] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.75rem;
}
.cm-chip.active .cm-chip-count[b-96kav6wd7c] {
    background: rgba(255, 255, 255, 0.22);
    color: var(--on-accent);
}

.cm-notice[b-96kav6wd7c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.cm-notice.ok[b-96kav6wd7c] { background: var(--accent-green-bg); color: var(--accent-green); }
.cm-notice.warn[b-96kav6wd7c] { background: var(--accent-amber-bg); color: var(--accent-amber); }
.cm-notice.bad[b-96kav6wd7c] { background: var(--accent-red-bg); color: var(--accent-red); }

.cm-btn[b-96kav6wd7c] {
    min-height: 44px;
    padding: 0 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: opacity 0.2s, background 0.2s;
}
.cm-btn:disabled[b-96kav6wd7c] { opacity: 0.5; cursor: not-allowed; }
.cm-btn--primary[b-96kav6wd7c] { background: var(--accent-solid); color: var(--on-accent); }
.cm-btn--secondary[b-96kav6wd7c] { background: var(--bg-tertiary); color: var(--text-primary); }
.cm-btn--text[b-96kav6wd7c] { background: transparent; color: var(--text-primary); padding: 0 0.5rem; }
.cm-btn--text:hover[b-96kav6wd7c] { background: var(--bg-hover); }

.cm-empty[b-96kav6wd7c] {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--bg-surface);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
}
.cm-empty-icon[b-96kav6wd7c] { font-size: 2rem; color: var(--text-muted); margin-bottom: 1rem; display: block; }
.cm-empty-title[b-96kav6wd7c] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; }
.cm-empty-text[b-96kav6wd7c] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1.5rem; }
.aiops-empty-actions[b-96kav6wd7c] { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }

.cm-q-card[b-96kav6wd7c] {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}
.cm-q-card--target[b-96kav6wd7c] { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); }

.cm-q-header[b-96kav6wd7c] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cm-q-meta[b-96kav6wd7c] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cm-q-time[b-96kav6wd7c] { font-size: 0.8rem; color: var(--text-muted); }

.cm-badge[b-96kav6wd7c] {
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}
.cm-badge.warn[b-96kav6wd7c] { background: var(--accent-amber-bg); color: var(--accent-amber); }
.cm-badge.bad[b-96kav6wd7c] { background: var(--accent-red-bg); color: var(--accent-red); }
.cm-badge.info[b-96kav6wd7c] { background: var(--bg-tertiary); color: var(--text-secondary); }
.cm-badge.ok[b-96kav6wd7c] { background: var(--accent-green-bg); color: var(--accent-green); }
.cm-badge.neutral[b-96kav6wd7c] { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-default); }

.cm-q-title[b-96kav6wd7c] { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; }
.cm-q-channels[b-96kav6wd7c] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.cm-q-scope-note[b-96kav6wd7c] { margin-bottom: 0.75rem; }
.cm-q-why[b-96kav6wd7c] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1rem; background: var(--bg-secondary); padding: 0.75rem; border-radius: 8px; border-left: 3px solid var(--border-strong); }
.cm-q-why-detail[b-96kav6wd7c] { font-style: italic; }

.cm-q-asks[b-96kav6wd7c] { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.cm-q-asks li[b-96kav6wd7c] { font-size: 0.9rem; color: var(--text-primary); padding-left: 1rem; border-left: 2px solid var(--border-default); }
.cm-ask-meta[b-96kav6wd7c] { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; align-items: center; }
.cm-ask-meta a[b-96kav6wd7c] { color: var(--accent-primary); text-decoration: none; }
.cm-ask-meta a:hover[b-96kav6wd7c] { text-decoration: underline; }

.cm-q-edit[b-96kav6wd7c] {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    margin-top: 1.5rem;
    border: 1px solid var(--border-default);
}
.cm-field[b-96kav6wd7c] { margin-bottom: 1rem; }
.cm-field > span[b-96kav6wd7c] { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; }
.cm-input[b-96kav6wd7c] {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    box-sizing: border-box;
    resize: vertical;
}
.cm-input:focus[b-96kav6wd7c] { border-color: var(--accent-primary); outline: none; }

.cm-grid-2[b-96kav6wd7c] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.cm-check[b-96kav6wd7c] { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; }
.cm-check input[b-96kav6wd7c] { width: 20px; height: 20px; margin: 0.1rem 0 0; accent-color: var(--accent-primary); flex: none; }
.cm-check span[b-96kav6wd7c] { display: block; font-size: 0.85rem; color: var(--text-primary); }
.cm-check strong[b-96kav6wd7c] { display: block; font-weight: 600; margin-bottom: 0.1rem; }
.cm-check small[b-96kav6wd7c] { color: var(--text-secondary); font-size: 0.75rem; }

.cm-draft-status[b-96kav6wd7c] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem; }
.cm-draft-status.discarded[b-96kav6wd7c] { color: var(--accent-amber); }
.cm-draft-status.failed[b-96kav6wd7c] { color: var(--accent-red); }
.cm-draft-status.conflict[b-96kav6wd7c] { color: var(--accent-amber); }
.cm-draft-actions[b-96kav6wd7c] { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

.cm-q-actions[b-96kav6wd7c] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.cm-q-done[b-96kav6wd7c] {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.cm-q-done.ok .cm-done-icon[b-96kav6wd7c] { color: var(--accent-green); }
.cm-q-done.bad .cm-done-icon[b-96kav6wd7c] { color: var(--accent-red); }
.cm-done-icon[b-96kav6wd7c] { font-size: 1.5rem; flex: none; }
.cm-done-body[b-96kav6wd7c] { flex: 1; }
.cm-done-text[b-96kav6wd7c] { font-weight: 600; color: var(--text-primary); margin: 0 0 0.25rem; }
.cm-done-q[b-96kav6wd7c] { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 1rem; }
.cm-done-actions[b-96kav6wd7c] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Skeleton */
.sk-line[b-96kav6wd7c] { height: 0.75rem; background: var(--bg-tertiary); border-radius: 4px; margin-bottom: 0.5rem; }
.sk-line.title[b-96kav6wd7c] { height: 1.25rem; width: 60%; }
.sk-line.short[b-96kav6wd7c] { width: 40%; }

@media (max-width: 640px) {
    .cm-page[b-96kav6wd7c] { padding: 1rem 1rem calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .cm-page-header[b-96kav6wd7c] { flex-direction: column; align-items: stretch; margin-bottom: 1rem; }
    .header-actions[b-96kav6wd7c] { justify-content: stretch; }
    .header-actions .cm-btn[b-96kav6wd7c] { flex: 1; }

    .cm-q-card[b-96kav6wd7c] { padding: 1.25rem; }
    .cm-grid-2[b-96kav6wd7c] { grid-template-columns: 1fr; }
    .cm-q-edit[b-96kav6wd7c] { padding: 1rem; }

    .cm-q-actions .cm-btn[b-96kav6wd7c] { flex: 1; }
}
/* Classes from @code DraftStatus that we can't change the markup of */
.aiops-draft[b-96kav6wd7c] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-muted); }
.aiops-draft--discarded[b-96kav6wd7c], .aiops-draft--conflict[b-96kav6wd7c] { color: var(--accent-amber); }
.aiops-draft--failed[b-96kav6wd7c] { color: var(--accent-red); }
.aiops-draft-text[b-96kav6wd7c] { display: flex; align-items: center; gap: 0.4rem; }
.aiops-draft-text .material-symbols-rounded[b-96kav6wd7c] { font-size: 1.1rem; }
.aiops-draft-choices[b-96kav6wd7c] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; width: 100%; }

.aiops-btn[b-96kav6wd7c] {
    min-height: 44px;
    padding: 0 0.75rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.aiops-btn:hover[b-96kav6wd7c] { background: var(--bg-hover); }
.aiops-btn.primary[b-96kav6wd7c] { background: var(--accent-solid); color: var(--on-accent); }
.aiops-btn.primary:hover[b-96kav6wd7c] { background: var(--accent-solid-hover); }


/* Extracted styles */
.cm-badge--small[b-96kav6wd7c] { padding: 0.1rem 0.4rem; font-size: 0.7rem; }
.cm-q-asks-more[b-96kav6wd7c] { margin-bottom: 1rem; margin-top: -0.5rem; }
.cm-q-draft-note[b-96kav6wd7c] { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.cm-q-actions--standalone[b-96kav6wd7c] { margin-top: 1rem; }
.cm-notice--standalone[b-96kav6wd7c] { margin-top: 1rem; margin-bottom: 0; }
.owner-answer-text[b-96kav6wd7c] { white-space: pre-line; }
.owner-answer-link[b-96kav6wd7c] { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; }
.owner-answer-link:hover[b-96kav6wd7c] { text-decoration: underline; }
.cm-ask-meta > *[b-96kav6wd7c] { white-space: nowrap; }
.cm-ask-meta > .cm-ask-who[b-96kav6wd7c] { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
/* /Components/Pages/AiSettings.razor.rz.scp.css */
/* ── AI Settings Page ─────────────────── */
.ai-settings-page[b-9sesn15k1k] {
    padding: 1.5rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    /* Written by AiSettings.razor.js from the sticky header's real height; these are the
       fallbacks before the module runs. */
    --ais-header-offset: 8rem;
    --ais-offset: 8rem;
}

.ais-title-icon[b-9sesn15k1k] { color: var(--accent-primary); flex: none; }

.ais-save[b-9sesn15k1k] { min-width: 9rem; }
.ais-save:disabled:not([aria-busy="true"])[b-9sesn15k1k] {
    opacity: 1;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.ais-save[aria-busy="true"][b-9sesn15k1k] { opacity: 0.85; }

.ais-alert[b-9sesn15k1k] { margin-bottom: 1rem; }
.ais-alert .material-symbols-rounded[b-9sesn15k1k] { font-size: 20px; }

/* ── Layout: in-page nav + sections ─────── */
.ais-layout[b-9sesn15k1k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.ais-content[b-9sesn15k1k] { min-width: 0; }

.ais-section[b-9sesn15k1k] { scroll-margin-top: var(--ais-offset); }
.ais-section h2[tabindex="-1"]:focus-visible[b-9sesn15k1k] { outline: 2px solid var(--accent-primary); outline-offset: 4px; border-radius: 4px; }

.ais-nav[b-9sesn15k1k] { min-width: 0; }

/* Auto's own limits, under the reply-language hint as a paragraph of its own. */
.cm-auto-hint[b-9sesn15k1k] { display: block; margin-top: 0.375rem; }

/* The section bar wrapper has no box outside portrait phones, and its Save copy is not displayed. */
.ais-bar[b-9sesn15k1k] { display: contents; }
.ais-save--bar[b-9sesn15k1k] { display: none; }

.ais-nav-title[b-9sesn15k1k] {
    margin: 0 0 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ais-nav-list[b-9sesn15k1k] {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.25rem;
}

.ais-nav-link[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    min-height: var(--control-h-sm);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.ais-nav-link:hover[b-9sesn15k1k] { background: var(--bg-hover); color: var(--text-primary); }
.ais-nav-link[aria-current="location"][b-9sesn15k1k] {
    background: var(--accent-light);
    color: var(--link);
}

/* Desktop: a sticky list beside the sections. */
@media (min-width: 1100px) {
    .ais-layout.has-nav[b-9sesn15k1k] {
        grid-template-columns: 13rem minmax(0, 1fr);
        align-items: start;
    }
    .ais-nav[b-9sesn15k1k] {
        position: sticky;
        top: var(--ais-header-offset);
        max-height: calc(100dvh - var(--ais-header-offset) - 1rem);
        overflow-y: auto;
        padding: 0.75rem;
        background: var(--bg-primary);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
    }
    .ais-nav-list[b-9sesn15k1k] { flex-direction: column; }
    .ais-nav-link[b-9sesn15k1k] { border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
    .ais-nav-link[aria-current="location"][b-9sesn15k1k] { border-left-color: var(--accent-primary); }
}

/* Tablet: a sticky bar of chips under the header. Phone: the same chips, scrolling sideways
   inside themselves, so the page never scrolls sideways. */
@media (max-width: 1099.98px) {
    .ais-nav[b-9sesn15k1k] {
        padding: 0.5rem;
        background: var(--bg-primary);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
    }
    .ais-nav-title[b-9sesn15k1k] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .ais-nav-list[b-9sesn15k1k] {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 0.25rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ais-nav-list[b-9sesn15k1k]::-webkit-scrollbar { display: none; }
    /* More chips off one edge: that edge fades out (data-more, set by AiSettings.razor.js), so a
       cut-off chip reads as "scroll for more" rather than as a clipping mistake. */
    .ais-nav-list[data-more="end"][b-9sesn15k1k] {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }
    .ais-nav-list[data-more="start"][b-9sesn15k1k] {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
    }
    .ais-nav-list[data-more="both"][b-9sesn15k1k] {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    }
    .ais-nav-list > li[b-9sesn15k1k] { flex: none; scroll-snap-align: start; }
    .ais-nav-link[b-9sesn15k1k] {
        white-space: nowrap;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-full);
        background: var(--bg-surface);
    }
    .ais-nav-link[aria-current="location"][b-9sesn15k1k] { border-color: var(--accent-primary); }
}

@media (min-width: 641px) and (max-width: 1099.98px) and (min-height: 501px) {
    .ais-nav[b-9sesn15k1k] {
        position: sticky;
        top: var(--ais-header-offset);
        z-index: 40;
        box-shadow: var(--shadow-sm);
    }
}

/* ── Cards ────────────────────────────── */
.settings-card[b-9sesn15k1k] {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.card-header[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.card-header--split[b-9sesn15k1k] {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.card-title[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.card-actions[b-9sesn15k1k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-icon[b-9sesn15k1k] { color: var(--accent-primary); flex: none; }
.card-icon--alt[b-9sesn15k1k] { color: var(--link); }

.card-header h2[b-9sesn15k1k] {
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.section-desc[b-9sesn15k1k] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: -0.5rem 0 1rem;
}

/* ── Bento Grid ────────────────────────── */
.bento-grid[b-9sesn15k1k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.ais-full[b-9sesn15k1k] { grid-column: 1 / -1; }

/* Wrappers around panels that draw their own card: no chrome of their own. */
.ais-wrap[b-9sesn15k1k] { display: block; min-width: 0; }
.ais-wrap[b-9sesn15k1k]  .aiops-card { margin-bottom: 0; }

.ais-inline-alert[b-9sesn15k1k] { margin-bottom: 1rem; }
.ais-inline-alert svg[b-9sesn15k1k] { flex: none; margin-top: 0.125rem; }

/* ── Forms ────────────────────────────── */
.form-group[b-9sesn15k1k] {
    margin-bottom: 0.9rem;
}

.form-group label[b-9sesn15k1k] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-control[b-9sesn15k1k] {
    width: 100%;
    min-height: var(--control-h);
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-surface);
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
    font-family: var(--font-sans);
}

.form-control:focus[b-9sesn15k1k] {
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: var(--ring);
}

.form-text[b-9sesn15k1k] {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

.textarea-lg[b-9sesn15k1k] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.form-row[b-9sesn15k1k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
}

.ais-key-row[b-9sesn15k1k] { margin-bottom: 6px; }
.ais-mini-btn[b-9sesn15k1k] { min-height: 32px; padding: 4px 10px; }
.ais-push-end[b-9sesn15k1k] { margin-left: auto; }

/* ── Toggle Switches ─────────────────── */
.toggle-list[b-9sesn15k1k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toggle-item[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.toggle-item.is-unavailable .toggle-switch[b-9sesn15k1k] { opacity: 0.5; }

.ais-toggle-note[b-9sesn15k1k] { margin: 0 0 0.5rem; }

.toggle-info[b-9sesn15k1k] {
    flex: 1;
    min-width: 0;
}

.toggle-info strong[b-9sesn15k1k] {
    display: block;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.toggle-info span[b-9sesn15k1k] {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.toggle-switch[b-9sesn15k1k] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch.small[b-9sesn15k1k] {
    width: 36px;
    height: 20px;
}

/* The input stays in the accessibility tree and takes keyboard focus; it only has no box. */
.toggle-switch input[b-9sesn15k1k],
.modern-toggle input[b-9sesn15k1k] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.toggle-switch input:disabled[b-9sesn15k1k],
.modern-toggle input:disabled[b-9sesn15k1k] { cursor: not-allowed; }

.slider[b-9sesn15k1k] {
    position: absolute;
    inset: 0;
    background: var(--border-strong);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}

.slider[b-9sesn15k1k]::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--bg-surface);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.toggle-switch.small .slider[b-9sesn15k1k]::before {
    height: 14px;
    width: 14px;
}

.toggle-switch input:checked + .slider[b-9sesn15k1k] {
    background: var(--accent-solid);
}

.toggle-switch input:checked + .slider[b-9sesn15k1k]::before {
    transform: translateX(20px);
}

.toggle-switch.small input:checked + .slider[b-9sesn15k1k]::before {
    transform: translateX(16px);
}

.toggle-switch input:focus-visible + .slider[b-9sesn15k1k],
.modern-toggle input:focus-visible + .modern-slider[b-9sesn15k1k] {
    box-shadow: var(--ring);
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ── Schedule Grid ───────────────────── */
.schedule-grid[b-9sesn15k1k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0.5rem;
}

.schedule-row[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.schedule-row.active[b-9sesn15k1k] {
    background: var(--accent-light);
    border-color: transparent;
}

.day-name[b-9sesn15k1k] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 5rem;
}
.schedule-row:not(.active) .day-name[b-9sesn15k1k] { color: var(--text-muted); }

.allday-toggle[b-9sesn15k1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    min-height: 32px;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
}
.allday-toggle input[b-9sesn15k1k] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-solid); cursor: pointer; }
.allday-toggle.is-off[b-9sesn15k1k] { color: var(--text-muted); cursor: not-allowed; }
.allday-toggle.is-off input[b-9sesn15k1k] { cursor: not-allowed; }

.schedule-times[b-9sesn15k1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.time-input[b-9sesn15k1k] {
    min-height: 32px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--text-primary);
    width: 7rem;
    color-scheme: light dark;
}
.time-input:focus-visible[b-9sesn15k1k] { outline: none; border-color: var(--accent-primary); box-shadow: var(--ring); }

.time-input:disabled[b-9sesn15k1k] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}
/* Times only where they mean something (2026-09-29). A day that is off, or open 24 hours, showed
   two greyed fields; the "24 hours" ones were dimmer than an off day's, so an active day looked
   less active than an idle one. Unticking "24 hours" brings the fields back at 09:00-18:00. */
.schedule-times.is-all-day[b-9sesn15k1k],
.schedule-row:not(.active) .schedule-times[b-9sesn15k1k] { display: none; }
.schedule-row:not(.active) .allday-toggle[b-9sesn15k1k] { visibility: hidden; }

.time-sep[b-9sesn15k1k] {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ── Quota ────────────────────────────── */
.quota-bar[b-9sesn15k1k] {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.quota-fill[b-9sesn15k1k] {
    height: 100%;
    background: var(--accent-solid);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.quota-stats[b-9sesn15k1k] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.quota-remaining[b-9sesn15k1k] {
    font-weight: 600;
    color: var(--accent-green-text);
}

.quota-remaining.low[b-9sesn15k1k] {
    color: var(--accent-red-text);
}

/* ── Loading ─────────────────────────── */
.loading-state[b-9sesn15k1k] {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.spinner[b-9sesn15k1k] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border-default);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-9sesn15k1k 0.8s linear infinite;
    margin: 0 auto 0.75rem;
}

@keyframes spin-b-9sesn15k1k {
    to { transform: rotate(360deg); }
}

/* ── Primary Control & Provider Selector ── */
.primary-control-card[b-9sesn15k1k] {
    margin-bottom: 1.5rem;
    border: 1.5px solid var(--border-default);
    transition: border-color var(--transition-base);
}
.primary-control-card.power-on[b-9sesn15k1k] {
    border-color: var(--accent-primary);
}

.global-power-section[b-9sesn15k1k],
.auto-enable-row[b-9sesn15k1k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.auto-enable-section[b-9sesn15k1k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.power-info[b-9sesn15k1k] { min-width: 0; }
.power-info h3[b-9sesn15k1k] {
    margin: 0 0 0.25rem 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}
.power-info h4[b-9sesn15k1k] {
    margin: 0 0 0.25rem 0;
    font-size: var(--text-md);
    font-weight: 600;
    /* A setting's name, like Global Chatbot Power above it: not the global h4's uppercase eyebrow. */
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-primary);
}
.power-info p[b-9sesn15k1k] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.divider[b-9sesn15k1k] {
    height: 1px;
    background: var(--border-subtle);
    margin: 1rem 0;
}

.provider-info h4[b-9sesn15k1k] {
    margin: 0 0 0.25rem 0;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
}
.provider-info p[b-9sesn15k1k] {
    margin: 0 0 1rem 0;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.provider-selector[b-9sesn15k1k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
}

.provider-option[b-9sesn15k1k] {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 1.25rem 2.75rem 1.25rem 1.25rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    background: var(--bg-secondary);
}
.provider-option:hover:not(:disabled)[b-9sesn15k1k] {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
}
.provider-option.selected[b-9sesn15k1k],
.provider-option[aria-checked="true"][b-9sesn15k1k] {
    border-color: var(--accent-primary);
    background: var(--accent-light);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
}
.provider-option:disabled[b-9sesn15k1k] { cursor: not-allowed; }

.provider-icon[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent-primary);
    margin-right: 1rem;
    flex-shrink: 0;
}
.provider-icon .material-symbols-rounded[b-9sesn15k1k] { font-size: 24px; }
.provider-icon.custom-icon[b-9sesn15k1k] {
    background: var(--bg-tertiary);
    color: var(--link);
}

.provider-details[b-9sesn15k1k] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.provider-name[b-9sesn15k1k] {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}
.provider-desc[b-9sesn15k1k] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

.check-circle[b-9sesn15k1k] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.provider-option[aria-checked="true"] .check-circle[b-9sesn15k1k] {
    background: var(--accent-solid);
    border-color: var(--accent-solid);
    color: var(--on-accent);
}
.check-circle svg[b-9sesn15k1k] {
    width: 12px;
    height: 12px;
}

/* Large switch for the page-level power controls. On is the accent, not green: green means
   "healthy" elsewhere in the app, and the state is also carried by the knob position. */
.modern-toggle[b-9sesn15k1k] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
}
.modern-toggle.large[b-9sesn15k1k] {
    width: 56px;
    height: 30px;
}
.modern-slider[b-9sesn15k1k] {
    position: absolute;
    inset: 0;
    background: var(--border-strong);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}
.modern-slider[b-9sesn15k1k]::before {
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background: var(--bg-surface);
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}
.modern-toggle input:checked + .modern-slider[b-9sesn15k1k] {
    background: var(--accent-solid);
}
.modern-toggle input:checked + .modern-slider[b-9sesn15k1k]::before {
    transform: translateX(26px);
}

.highlight-card[b-9sesn15k1k] {
    border: 1px solid var(--border-accent);
}
.badge-byoai[b-9sesn15k1k] {
    display: inline-flex;
    align-items: center;
    background: var(--accent-light);
    color: var(--link);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 700;
}
.disabled-section[b-9sesn15k1k] {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}
.disabled-section[b-9sesn15k1k]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
}

/* ── Test API UI ───────────────────────── */
.test-api-section[b-9sesn15k1k] {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.api-test-result[b-9sesn15k1k] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    animation: slide-up-fade-b-9sesn15k1k 0.3s ease-out forwards;
}

@keyframes slide-up-fade-b-9sesn15k1k {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.api-test-result.success[b-9sesn15k1k] { background: var(--accent-green-bg); color: var(--accent-green-text); }
.api-test-result.error[b-9sesn15k1k] { background: var(--accent-red-bg); color: var(--accent-red-text); }

.result-icon[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.result-content p[b-9sesn15k1k] {
    margin: 0;
    font-size: var(--text-base);
    color: inherit;
    line-height: 1.4;
    word-break: break-word;
}

/* ── Apply Action Card ─────────────────── */
.apply-action-card[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    width: 100%;
    position: relative;
}

.apply-action-card:hover:not(.disabled)[b-9sesn15k1k] {
    background: var(--bg-surface);
    border-color: var(--border-strong);
}

.apply-action-card:focus-within[b-9sesn15k1k] {
    border-color: var(--accent-primary);
    box-shadow: var(--ring);
}

.apply-action-card.selected[b-9sesn15k1k] {
    background: var(--accent-light);
    border-color: var(--accent-primary);
}

.apply-action-card.disabled[b-9sesn15k1k] {
    opacity: 0.6;
    cursor: not-allowed;
}

.action-icon[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.apply-action-card.selected .action-icon[b-9sesn15k1k] {
    background: var(--accent-solid);
    color: var(--on-accent);
}

.action-text[b-9sesn15k1k] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.action-text strong[b-9sesn15k1k] {
    font-size: var(--text-base);
    color: var(--text-primary);
    font-weight: 600;
}

.action-text span[b-9sesn15k1k] {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

.action-checkbox[b-9sesn15k1k] {
    margin-left: auto;
}

.custom-checkbox[b-9sesn15k1k] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--on-accent);
}

.custom-checkbox svg[b-9sesn15k1k] {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.custom-checkbox.checked[b-9sesn15k1k] {
    background: var(--accent-solid);
    border-color: var(--accent-solid);
}

.custom-checkbox.checked svg[b-9sesn15k1k] {
    opacity: 1;
    transform: scale(1);
}

/* ── Dialogs ───────────────────────────── */
.ais-dialog-title[b-9sesn15k1k] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.doc-content h3[b-9sesn15k1k] {
    margin: 1.5rem 0 0.5rem;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
}
.doc-content p[b-9sesn15k1k] { color: var(--text-secondary); }
.doc-content pre[b-9sesn15k1k] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    margin-top: 0.5rem;
}
.doc-content[b-9sesn15k1k]  code { font-family: var(--font-mono); }
.ais-doc-note[b-9sesn15k1k] { margin-top: 1rem; }

.logs-body[b-9sesn15k1k] { background: var(--bg-secondary); }

.log-entry[b-9sesn15k1k] {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}
.log-head[b-9sesn15k1k] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.625rem;
}
.log-status[b-9sesn15k1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}
.log-status .material-symbols-rounded[b-9sesn15k1k] { font-size: 18px; }
.log-status.ok[b-9sesn15k1k] { color: var(--accent-green-text); }
.log-status.bad[b-9sesn15k1k] { color: var(--accent-red-text); }
.log-time[b-9sesn15k1k] { color: var(--text-muted); font-size: var(--text-sm); }
.log-meta[b-9sesn15k1k] { font-size: var(--text-sm); color: var(--text-secondary); word-break: break-all; }
.log-block[b-9sesn15k1k] { margin-top: 0.625rem; }
.log-block strong[b-9sesn15k1k] { font-size: var(--text-sm); color: var(--text-primary); }
.log-block pre[b-9sesn15k1k] { margin-top: 0.25rem; max-height: 150px; overflow: auto; }

/* ── Phones ───────────────────────────── */
@media (max-width: 640px) {
    .ai-settings-page[b-9sesn15k1k] {
        padding: 1rem;
    }

    .header-actions > .ais-save[b-9sesn15k1k] { flex: 1 1 auto; }

    .settings-card[b-9sesn15k1k] { padding: 1.125rem; }

    .global-power-section[b-9sesn15k1k],
    .auto-enable-row[b-9sesn15k1k] { align-items: flex-start; }

    .schedule-times[b-9sesn15k1k] { width: 100%; }
    .time-input[b-9sesn15k1k] { flex: 1 1 0; min-width: 0; width: auto; }
}

/* ── Tablets and desktops: the pinned header compacts once the page scrolls ──
   Title, two-line subtitle and Save took about 170px of a 1024px tablet screen, plus the chip bar
   under it. Scrolled (data-compact, AiSettings.razor.js), the subtitle goes, the title shrinks and
   Save stays in the same row: one line, about 64px. Save's label, state and place are unchanged. */
@media (min-width: 641px) and (min-height: 501px) {
    .page-header-sticky[b-9sesn15k1k] { transition: padding var(--transition-fast); }
    .ai-settings-page[data-compact] .page-header-sticky[b-9sesn15k1k] {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        flex-wrap: nowrap;
    }
    .ai-settings-page[data-compact] .page-header-sticky > .header-content[b-9sesn15k1k] { min-width: 0; }
    .ai-settings-page[data-compact] .page-header-sticky h1[b-9sesn15k1k] {
        font-size: 1.125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ai-settings-page[data-compact] .page-header-sticky h1 > svg[b-9sesn15k1k] { width: 18px; height: 18px; }
    .ai-settings-page[data-compact] .page-header-sticky .subtitle[b-9sesn15k1k] { display: none; }
    .ai-settings-page[data-compact] .ais-savebar[b-9sesn15k1k] { flex: none; }
    .ai-settings-page[data-compact] .ais-save[b-9sesn15k1k] { min-height: var(--control-h-sm); }
}
@media (min-width: 641px) and (min-height: 501px) and (pointer: coarse) {
    .ai-settings-page[data-compact] .ais-save[b-9sesn15k1k] { min-height: var(--touch-min); }
}
@media (prefers-reduced-motion: reduce) { .page-header-sticky[b-9sesn15k1k] { transition: none; } }

/* ── Phones and short landscape phones: only Save stays pinned ──
   The header box dissolves (display: contents), so the title card scrolls away with the page and
   the Save bar becomes a child of the page: its sticky range is then the whole page, not the
   header. It is pinned only while it has something to say (.is-pinned: unsaved changes, saving,
   or the "Saved" confirmation), and it stops short of the notification bell's corner. */
@media (max-width: 640px), (max-height: 500px) {
    .page-header-sticky[b-9sesn15k1k] { display: contents; }
    /* A title on the page, as on every other page on a phone (chatmai-ui.css), not a card. */
    .page-header-sticky > .header-content[b-9sesn15k1k] {
        margin-bottom: 0.75rem;
        padding: 0.25rem max(0.25rem, var(--cm-bell-reserve)) 0 0.25rem;
    }
    .page-header-sticky > .header-content h1[b-9sesn15k1k] { font-size: 1.5rem; }
    .ais-savebar[b-9sesn15k1k] {
        z-index: 50;
        width: auto;
        margin: 0 calc(var(--cm-bell-reserve) - 0.75rem) 1.25rem 0;
    }
    .ais-savebar.is-pinned[b-9sesn15k1k] {
        position: sticky;
        top: 0.5rem;
    }
    .ais-savebar.is-pinned > .ais-save[b-9sesn15k1k] { box-shadow: var(--shadow-lg); }
    .ais-mobile-savebar[b-9sesn15k1k] {
        display: flex;
        position: fixed;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
        left: 0;
        right: 0;
        padding: 0.75rem 1rem;
        background: transparent;
        z-index: 100;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 0.2s;
    }
    .ais-mobile-savebar.is-pinned[b-9sesn15k1k] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s;
    }
    html.cm-kb-open .ais-mobile-savebar[b-9sesn15k1k] {
        display: none;
    }
    .ais-mobile-savebar > .ais-save[b-9sesn15k1k] {
        width: 100%;
        max-width: 20rem;
        box-shadow: var(--shadow-lg);
    }
}

/* ── Portrait phones: one compact section bar ──
   The owner's iPhone (increments 10 and 21): once the title scrolled away, the section chips went
   with it, so on a 6,000px page there was no way to see or change the section without scrolling
   back up, and the "Saved" pill under the title was a full-width button that did nothing. Now the
   chips are one bar pinned 0.5rem under the status bar (about 54px), and Save joins its end only
   while there is something to save, is saving, or has just saved. The bar keeps the bell's corner
   free. The header's Save copy is not displayed here. */
@media (max-width: 640px) and (min-height: 501px) {
    .ais-savebar--head[b-9sesn15k1k] { display: none; }
    .ais-bar[b-9sesn15k1k] {
        position: sticky;
        top: 0.5rem;
        z-index: 50;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        min-width: 0;
        margin-right: calc(var(--cm-bell-reserve) - 0.75rem);
        padding: 0.25rem;
        background: var(--bg-primary);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        transition: box-shadow var(--transition-fast);
    }
    .ais-bar:not(:has(.ais-nav, .ais-save))[b-9sesn15k1k] { display: none; }
    .ais-bar[data-stuck][b-9sesn15k1k] { box-shadow: var(--shadow-md); border-color: var(--border-default); }
    /* Pinned, the 0.5rem above the bar is page colour, so cut-off lines of the content scrolling
       underneath do not show between the status bar strip and the bar. Edge to edge: the page's
       1rem padding on the left, the viewport's width. */
    .ais-bar[data-stuck][b-9sesn15k1k]::before {
        content: "";
        position: absolute;
        left: calc(-1rem - 1px);
        bottom: 100%;
        width: 100vw;
        height: calc(0.5rem + 1px);
        background: var(--bg-app);
        pointer-events: none;
    }
    .ais-bar > .ais-nav[b-9sesn15k1k] {
        flex: 1 1 auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .ais-bar > .ais-save--bar[b-9sesn15k1k] {
        display: inline-flex;
        flex: none;
        min-width: 0;
        min-height: var(--touch-min);
        padding-inline: 0.875rem;
        white-space: nowrap;
    }
    /* Beside the chips, Save is a 44px square: its icon (disk, spinner, tick) shows, its label is
       read out but not drawn. With a label, "Speichern", "Simpan" or "保存" took up to 125px of a
       360px phone, and the current chip (up to 208px in Japanese) was cut off by Save's edge in five
       of the nine languages. The square leaves every chip room to show whole. */
    .ais-bar > .ais-save--bar:not(:only-child)[b-9sesn15k1k] {
        width: var(--touch-min);
        padding: 0;
        justify-content: center;
    }
    .ais-bar > .ais-save--bar:not(:only-child) > span:last-child[b-9sesn15k1k] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .ais-bar > .ais-save--bar:not(:only-child) > svg[b-9sesn15k1k] { width: 20px; height: 20px; }
    /* Alone in the bar (AI switched off: one section, so no chips), Save takes the whole row, labelled. */
    .ais-bar > .ais-save--bar:only-child[b-9sesn15k1k] { flex: 1 1 auto; }
}

/* A field focused under the pinned header or bar (a tap, Tab, or the iOS keyboard's arrows) is
   scrolled to below it, not behind it. The bar's own chips are left out: they are the sticky
   thing, and asking to reveal space above them would scroll the page. */
.ais-content :is(input, select, textarea, button, a[href])[b-9sesn15k1k] { scroll-margin-top: var(--ais-offset); }

/* ── Fingers: 44px targets, 16px fields ── */
@media (pointer: coarse) {
    .ais-nav-link[b-9sesn15k1k] { min-height: var(--touch-min); }

    /* The switches keep their drawn size; the hit area around them grows to 44px. */
    .toggle-switch[b-9sesn15k1k]::after,
    .modern-toggle[b-9sesn15k1k]::after {
        content: "";
        position: absolute;
        left: -4px;
        right: -4px;
        top: 50%;
        height: var(--touch-min);
        transform: translateY(-50%);
    }
    .toggle-switch input[b-9sesn15k1k],
    .modern-toggle input[b-9sesn15k1k] {
        top: 50%;
        bottom: auto;
        height: var(--touch-min);
        transform: translateY(-50%);
    }

    .allday-toggle[b-9sesn15k1k] { min-height: var(--touch-min); padding: 0 0.25rem; }
    .allday-toggle input[b-9sesn15k1k] { width: 20px; height: 20px; }
    .time-input[b-9sesn15k1k],
    .form-control[b-9sesn15k1k] { min-height: var(--touch-min); font-size: 16px; }
    .ais-mini-btn[b-9sesn15k1k] { min-height: var(--touch-min); }
    .provider-option[b-9sesn15k1k] { min-height: var(--touch-min); }
}


/* ── Redesign: Tab Panels ─────────────────── */
.ais-tab-panel[b-9sesn15k1k] {
    display: none;
}
.ais-tab-panel.is-active[b-9sesn15k1k] {
    display: block;
    animation: fadeIn-b-9sesn15k1k 0.2s ease-in-out;
}

@keyframes fadeIn-b-9sesn15k1k {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Redesign: Sidebar Tabs (Desktop) & Wrapping Selector (Mobile) ─────────────────── */
/* Nav list now functions as a tablist */
.ais-nav-list[b-9sesn15k1k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ais-nav-link[b-9sesn15k1k] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px; /* 44px touch target */
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.ais-nav-link:hover[b-9sesn15k1k], .ais-nav-link:focus-visible[b-9sesn15k1k] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.ais-nav-link.active[b-9sesn15k1k] {
    color: var(--accent-primary);
    background: var(--accent-light);
    font-weight: 600;
}

/* Remove old scroll-spy styles */
.ais-nav-link[aria-current="true"][b-9sesn15k1k] {
    color: inherit;
    background: transparent;
    font-weight: 500;
}

/* Mobile wrapping selector */
@media (max-width: 899px) {
    .ais-nav[b-9sesn15k1k] {
        margin-bottom: 1rem;
    }
    .ais-nav-list[b-9sesn15k1k] {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .ais-nav-link[b-9sesn15k1k] {
        width: auto;
        padding: 0.5rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-default);
    }
    .ais-nav-link.active[b-9sesn15k1k] {
        background: var(--accent-primary);
        color: white;
        border-color: var(--accent-primary);
    }
    /* Hide the title on mobile */
    .ais-nav-title[b-9sesn15k1k] {
        display: none;
    }
}

/* Disciplined flatcards */
.settings-card[b-9sesn15k1k] {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02); /* Flat shadow */
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.settings-card:last-child[b-9sesn15k1k] {
    margin-bottom: 0;
}

/* Keyboard-aware compact Save */
.ais-mobile-savebar[b-9sesn15k1k] {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Task header and navigation share the app's compact layout. */
.page-header-sticky[b-9sesn15k1k] { position: static; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0; margin-bottom: 1.5rem; background: transparent; border: 0; box-shadow: none; }
.primary-control-card.power-on[b-9sesn15k1k], .highlight-card[b-9sesn15k1k] { border-color: var(--border-default); }
.ais-nav-list[b-9sesn15k1k] { overflow: visible; scroll-snap-type: none; }
.ais-nav-link:focus-visible[b-9sesn15k1k] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.ais-mobile-savebar[b-9sesn15k1k] { display: none; }
@media (min-width: 900px) {
    .ais-layout.has-nav[b-9sesn15k1k] { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; }
    .ais-nav[b-9sesn15k1k] { position: sticky; top: 1rem; }
    .ais-nav-list[b-9sesn15k1k] { flex-direction: column; }
}
@media (max-width: 899px) {
    .ais-bar[b-9sesn15k1k] { display: block; position: static; background: transparent; box-shadow: none; border: 0; padding: 0; }
    .ais-nav[b-9sesn15k1k] { position: static; padding: 0; border: 0; background: transparent; }
    .ais-nav-list[b-9sesn15k1k] { flex-wrap: wrap; }
    .ais-nav-list > li[b-9sesn15k1k] { min-width: 0; max-width: 100%; }
    .ais-nav-link[b-9sesn15k1k] { white-space: normal; overflow-wrap: anywhere; }
    .ais-nav-link.active[b-9sesn15k1k] { background: var(--accent-solid); color: var(--on-accent); }
    .ais-savebar--head[b-9sesn15k1k], .ais-save--bar[b-9sesn15k1k] { display: none; }
    .ais-mobile-savebar[b-9sesn15k1k] { display: flex; bottom: calc(var(--bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + 8px); padding-bottom: 0; }
    html.cm-kb-open .ais-mobile-savebar[b-9sesn15k1k] { display: none; }
    .settings-card[b-9sesn15k1k] { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .ais-tab-panel.is-active[b-9sesn15k1k] { animation: none; } }.ais-overview[b-9sesn15k1k] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; padding: 1rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 12px; }
.ais-overview dt[b-9sesn15k1k] { color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 0.35rem; }
.ais-overview dd[b-9sesn15k1k] { color: var(--text-primary); font-weight: 600; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 899px) {
    .ais-mobile-savebar[b-9sesn15k1k] { position: fixed; left: 1rem; right: 1rem; z-index: 100; justify-content: center; padding: 0; visibility: hidden; opacity: 0; pointer-events: none; }
    .ais-mobile-savebar.is-pinned[b-9sesn15k1k] { visibility: visible; opacity: 1; pointer-events: auto; }
    .ais-mobile-savebar > .ais-save[b-9sesn15k1k] { width: 100%; max-width: 24rem; box-shadow: var(--shadow-lg); }
}
@media (max-width: 480px) {
    .ais-overview[b-9sesn15k1k] { grid-template-columns: 1fr; gap: 0.75rem; }
    .ais-overview > div[b-9sesn15k1k] { display: flex; justify-content: space-between; gap: 1rem; }
    .ais-overview dd[b-9sesn15k1k] { text-align: end; }
}
@media (max-width: 899px) {
    .ais-bar[b-9sesn15k1k] { margin-right: 0; }
    .ais-nav-list[b-9sesn15k1k] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ais-nav-link[b-9sesn15k1k] { width: 100%; height: 100%; }
}

/* Task navigation matches the horizontal keyboard behavior. */
.ai-settings-page .ais-layout.has-nav[b-9sesn15k1k] { display: block; }
.ai-settings-page .ais-bar[b-9sesn15k1k] { position: static; display: block; margin: 0 0 1.25rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
.ai-settings-page .ais-nav[b-9sesn15k1k] { position: static; padding: 0; border: 0; background: transparent; }
.ai-settings-page .ais-nav-title[b-9sesn15k1k] { display: none; }
.ai-settings-page .ais-nav-list[b-9sesn15k1k] { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: .25rem; padding: .25rem; background: var(--bg-secondary); border-radius: 12px; scrollbar-width: none; scroll-snap-type: x proximity; }
.ai-settings-page .ais-nav-list > li[b-9sesn15k1k] { flex: 0 0 auto; min-width: 0; scroll-snap-align: start; }
.ai-settings-page .ais-nav-link[b-9sesn15k1k] { min-height: 44px; width: auto; height: auto; white-space: nowrap; padding: .65rem 1rem; border-radius: 9px; color: var(--text-secondary); }
.ai-settings-page .ais-nav-link.active[b-9sesn15k1k] { background: var(--bg-surface); color: var(--link); box-shadow: var(--shadow-sm); }
.ai-settings-page .ais-save--bar[b-9sesn15k1k] { display: none !important; }
@media (max-width: 899px) {
    .ai-settings-page .ais-overview[b-9sesn15k1k] { display: none; }
    .ai-settings-page .page-header-sticky[b-9sesn15k1k] { position: static; margin-bottom: 1rem; padding: 0 3rem 0 0; }
    .ai-settings-page .page-header-sticky h1[b-9sesn15k1k] { font-size: 1.5rem; }
    .ai-settings-page .page-header-sticky .subtitle[b-9sesn15k1k] { font-size: .875rem; }
    .ai-settings-page .ais-mobile-savebar .ais-save[b-9sesn15k1k] { min-height: 44px; }
}


/* The workspace default and the per-channel AI configurations (AI Config page). */
.ais-config-link[b-9sesn15k1k] { color: inherit; text-decoration: none; }
.ais-config-link:hover .cm-grouped-row-title[b-9sesn15k1k], .ais-config-link:focus-visible .cm-grouped-row-title[b-9sesn15k1k] { color: var(--accent-primary); }
.ais-config-link iconify-icon[b-9sesn15k1k] { width: 18px; height: 18px; font-size: 18px; color: var(--text-secondary); }
.ais-inline-link[b-9sesn15k1k] { color: var(--link, var(--accent-primary)); font-weight: 600; }
/* /Components/Pages/AiUsageInsights.razor.rz.scp.css */
.cm-dashboard[b-2t90bnoch6] {
    padding: 1.5rem;
    background-color: var(--bg-app);
    color: var(--text-primary);
    min-height: 100vh;
}

.cm-page-header[b-2t90bnoch6] {
    margin-bottom: 2rem;
}

.cm-page-header-content h1[b-2t90bnoch6] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.cm-subtitle[b-2t90bnoch6] {
    color: var(--text-secondary);
}

.cm-metrics-grid[b-2t90bnoch6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.cm-semantic-note[b-2t90bnoch6] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.cm-report-grid[b-2t90bnoch6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: start;
}

.cm-report-grid .cm-grouped-list[b-2t90bnoch6] {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cm-metric-card[b-2t90bnoch6] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cm-metric-label[b-2t90bnoch6] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.cm-metric-value[b-2t90bnoch6] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.cm-grouped-list[b-2t90bnoch6] {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.cm-card-header[b-2t90bnoch6] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cm-card-header h2[b-2t90bnoch6] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.cm-filters-bar[b-2t90bnoch6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.cm-input[b-2t90bnoch6], .cm-select[b-2t90bnoch6] {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
}

.cm-btn[b-2t90bnoch6] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: center;
}

.cm-btn-primary[b-2t90bnoch6] {
    background: var(--accent-solid);
    color: var(--on-accent);
}

.cm-table-responsive[b-2t90bnoch6] {
    overflow-x: auto;
    width: 100%;
}

.cm-table[b-2t90bnoch6] {
    width: 100%;
    border-collapse: collapse;
}

.cm-table th[b-2t90bnoch6], .cm-table td[b-2t90bnoch6] {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.cm-table th[b-2t90bnoch6] {
    font-weight: 600;
    color: var(--text-secondary);
}

.cm-text-right[b-2t90bnoch6] {
    text-align: right !important;
}

.cm-text-nowrap[b-2t90bnoch6] {
    white-space: nowrap;
}

.cm-text-center[b-2t90bnoch6] {
    text-align: center;
}

.cm-text-danger[b-2t90bnoch6] {
    color: var(--accent-red-text);
}

.cm-text-muted[b-2t90bnoch6] {
    color: var(--text-secondary);
}

.cm-badge[b-2t90bnoch6] {
    padding: 0.25em 0.6em;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
}

.cm-badge-success[b-2t90bnoch6] { background: var(--accent-green-bg); color: var(--accent-green-text); }
.cm-badge-danger[b-2t90bnoch6] { background: var(--accent-red-bg); color: var(--accent-red-text); }
.cm-badge-secondary[b-2t90bnoch6] { background: var(--bg-tertiary); color: var(--text-secondary); }

.cm-empty-state[b-2t90bnoch6] {
    padding: 3rem;
    text-align: center;
    color: var(--text-secondary);
}

.cm-compact-empty[b-2t90bnoch6] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.cm-disclaimer[b-2t90bnoch6] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.cm-mobile-card[b-2t90bnoch6] {
    display: none;
}

.cm-pagination[b-2t90bnoch6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.cm-pagination button[b-2t90bnoch6] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary);
}

.cm-pagination button:disabled[b-2t90bnoch6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cm-group-summary[b-2t90bnoch6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 1rem;
    padding: 1rem;
}

.cm-group-card[b-2t90bnoch6] {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

.cm-sr-only[b-2t90bnoch6] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.cm-filters-bar :is(input, select, button):focus-visible[b-2t90bnoch6], .cm-pagination button:focus-visible[b-2t90bnoch6] {
    outline: 3px solid var(--accent-solid);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .cm-card-header[b-2t90bnoch6] { padding: 1rem; }
    .cm-dashboard[b-2t90bnoch6] { padding: 0.5rem; }
    .cm-metrics-grid[b-2t90bnoch6] { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .cm-metric-card[b-2t90bnoch6] { padding: 1rem; }

    .cm-table[b-2t90bnoch6] { display: none; }

    .cm-mobile-card[b-2t90bnoch6] {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid var(--border-subtle);
        color: var(--text-primary);
    }

    .cm-mobile-card-row[b-2t90bnoch6] {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        gap: 0.75rem;
        overflow-wrap: anywhere;
    }
}
/* /Components/Pages/Analytics.razor.rz.scp.css */
/* ── Analytics (/analytics) ────────────────────────────────────────
   Header (title, Export, Refresh), the range as the shared chips, six figures, the two time
   charts, the three breakdowns and the agent table. Bars are drawn from data through --h and
   --pct; every colour is a theme token. Kit classes live in chatmai-ui.css. */

.analytics-page[b-tycs53g4qy] { max-width: 1280px; }

.analytics-actions[b-tycs53g4qy] { align-items: center; }
.analytics-refresh[b-tycs53g4qy] { border: 1px solid var(--border-default); background: var(--bg-surface); }
.analytics-spin[b-tycs53g4qy] { animation: analytics-spin-b-tycs53g4qy 0.9s linear infinite; }
@keyframes analytics-spin-b-tycs53g4qy { to { transform: rotate(360deg); } }

.analytics-range[b-tycs53g4qy] { margin: 0 0 1.25rem; }

/* Three across; six only where each tile still has room for "1 hr 14 min" beside the sidebar. */
.analytics-kpis[b-tycs53g4qy] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1560px) { .analytics-kpis[b-tycs53g4qy] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.analytics-ratio[b-tycs53g4qy] { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.analytics-ratio span[b-tycs53g4qy] { display: inline-flex; align-items: center; gap: 0.25rem; }

.analytics-alert[b-tycs53g4qy] { align-items: center; flex-wrap: wrap; }
.analytics-alert-text[b-tycs53g4qy] { flex: 1 1 14rem; min-width: 0; }

/* ── Time charts ──────────────────────────────────────────────── */
.analytics-charts[b-tycs53g4qy] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.25rem;
    align-items: stretch;
}
.analytics-chart[b-tycs53g4qy] { display: flex; flex-direction: column; }
.analytics-chart > .cm-panel-body[b-tycs53g4qy] { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.analytics-chart:only-child[b-tycs53g4qy] { grid-column: 1 / -1; }

.analytics-legend[b-tycs53g4qy] { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.analytics-legend-item[b-tycs53g4qy] { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); color: var(--text-secondary); }
.analytics-legend-dot[b-tycs53g4qy] { width: 10px; height: 10px; border-radius: 3px; }
.analytics-legend-dot.received[b-tycs53g4qy],
.analytics-day-bar.received[b-tycs53g4qy] { background: var(--accent-primary); }
.analytics-legend-dot.sent[b-tycs53g4qy],
.analytics-day-bar.sent[b-tycs53g4qy] { background: var(--accent-green); }

/* A long range scrolls inside its own box rather than squeezing 90 days into a phone. */
.analytics-daily-scroll[b-tycs53g4qy] { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 0.25rem; }
.analytics-daily[b-tycs53g4qy] {
    display: grid;
    grid-template-columns: repeat(var(--days), minmax(10px, 1fr));
    gap: 4px;
    align-items: end;
    height: 200px;
    min-width: calc(var(--days) * 14px);
}
.analytics-day[b-tycs53g4qy] { display: flex; flex-direction: column; align-items: stretch; gap: 0.375rem; height: 100%; min-width: 0; }
.analytics-day-bars[b-tycs53g4qy] { flex: 1; display: flex; align-items: flex-end; gap: 2px; min-height: 0; }
.analytics-day-bar[b-tycs53g4qy] { flex: 1; height: var(--h, 0%); min-height: 2px; border-radius: 3px 3px 0 0; }
.analytics-day-label[b-tycs53g4qy] { height: 1rem; font-size: 0.6875rem; line-height: 1rem; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.analytics-hourly[b-tycs53g4qy] {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 3px;
    align-items: end;
    height: 200px;
}
.analytics-hour[b-tycs53g4qy] { display: flex; flex-direction: column; gap: 0.375rem; height: 100%; min-width: 0; }
.analytics-hour-track[b-tycs53g4qy] { flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.analytics-hour-bar[b-tycs53g4qy] { width: 100%; height: var(--h, 0%); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent-primary); }
.analytics-hour:hover .analytics-hour-bar[b-tycs53g4qy] { background: var(--accent-hover); }
.analytics-hour-label[b-tycs53g4qy] { height: 1rem; font-size: 0.6875rem; line-height: 1rem; color: var(--text-muted); white-space: nowrap; overflow: visible; }
.analytics-chart-empty[b-tycs53g4qy] { margin: 0; padding: 2rem 0; text-align: center; font-size: var(--text-sm); color: var(--text-muted); }

/* ── Breakdowns ───────────────────────────────────────────────── */
.analytics-grid[b-tycs53g4qy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
    align-items: start;
}
.analytics-dist[b-tycs53g4qy] { list-style: none; margin: 0; padding: 0.5rem 1.25rem 1.25rem; }
.analytics-dist-item[b-tycs53g4qy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.375rem 0.75rem;
    padding: 0.625rem 0;
}
.analytics-dist-name[b-tycs53g4qy] {
    display: flex; align-items: center; gap: 0.5rem; min-width: 0;
    font-size: var(--text-sm); font-weight: 500; color: var(--text-primary);
    overflow-wrap: anywhere;
}
.analytics-dist-logo[b-tycs53g4qy] { display: inline-flex; flex: none; }
.analytics-dist-count[b-tycs53g4qy] { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.analytics-dist-bar[b-tycs53g4qy] { grid-column: 1 / -1; }
.analytics-label-dot[b-tycs53g4qy] { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--label, var(--accent-primary)); box-shadow: 0 0 0 1px var(--border-subtle); }
.analytics-dist-bar.is-label > span[b-tycs53g4qy] { background: var(--label, var(--accent-primary)); }

/* ── Agent table ──────────────────────────────────────────────── */
.analytics-table[b-tycs53g4qy] { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.analytics-table thead th[b-tycs53g4qy] {
    padding: 0.625rem 1.25rem;
    text-align: left;
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}
.analytics-table tbody tr[b-tycs53g4qy] { border-bottom: 1px solid var(--border-subtle); }
.analytics-table tbody tr:last-child[b-tycs53g4qy] { border-bottom: 0; }
.analytics-table tbody th[b-tycs53g4qy],
.analytics-table tbody td[b-tycs53g4qy] { padding: 0.75rem 1.25rem; text-align: left; font-weight: 400; color: var(--text-secondary); }
.analytics-table .num[b-tycs53g4qy] { text-align: right; font-variant-numeric: tabular-nums; }
.analytics-table tbody td.num[b-tycs53g4qy] { font-weight: 700; color: var(--text-primary); }
.analytics-agent[b-tycs53g4qy] { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.analytics-agent-name[b-tycs53g4qy] { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }

/* ── Skeleton ─────────────────────────────────────────────────── */
.analytics-sk-label[b-tycs53g4qy] { height: 0.75rem; width: 60%; }
.analytics-sk-panel[b-tycs53g4qy] { display: flex; flex-direction: column; gap: 0.875rem; }
.analytics-sk-title[b-tycs53g4qy] { height: 1rem; width: 30%; }
.analytics-sk-chart[b-tycs53g4qy] { height: 180px; width: 100%; }
.analytics-sk-bar[b-tycs53g4qy] { height: 0.625rem; width: 100%; }

@media (max-width: 900px) {
    .analytics-charts[b-tycs53g4qy] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640.98px) {
    .analytics-header .header-content h1[b-tycs53g4qy] { display: none; }
    .analytics-actions[b-tycs53g4qy] { flex-wrap: nowrap; }
    .analytics-export[b-tycs53g4qy] { flex: 1 1 auto; }
    .analytics-refresh[b-tycs53g4qy] { flex: none; }
    .analytics-kpis[b-tycs53g4qy] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-daily[b-tycs53g4qy], .analytics-hourly[b-tycs53g4qy] { height: 160px; }
    .analytics-hourly[b-tycs53g4qy] { gap: 2px; }
    .analytics-dist[b-tycs53g4qy] { padding: 0.25rem 1rem 1rem; }

    /* One card per agent: the figures sit under the name with their headings beside them. */
    .analytics-table[b-tycs53g4qy], .analytics-table tbody[b-tycs53g4qy], .analytics-table tr[b-tycs53g4qy], .analytics-table th[b-tycs53g4qy], .analytics-table td[b-tycs53g4qy] { display: block; }
    .analytics-table thead[b-tycs53g4qy] {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .analytics-table tbody tr[b-tycs53g4qy] { padding: 0.875rem 1rem; }
    .analytics-table tbody th[b-tycs53g4qy],
    .analytics-table tbody td[b-tycs53g4qy] { padding: 0; }
    .analytics-table tbody td[data-label][b-tycs53g4qy] {
        display: flex; justify-content: space-between; gap: 0.75rem;
        margin-top: 0.375rem;
        text-align: right;
    }
    .analytics-table tbody td[data-label][b-tycs53g4qy]::before {
        content: attr(data-label);
        font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .analytics-spin[b-tycs53g4qy] { animation: none; }
}
/* /Components/Pages/ApprovedImages.razor.rz.scp.css */
/* Approved reply images. Theme tokens only, so light and dark both work. */

.aim-live:empty[b-bmhi3xl5x7] {
    display: none;
}

.aim-upload[b-bmhi3xl5x7] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: end;
}

.aim-upload-action[b-bmhi3xl5x7],
.aim-bind-action[b-bmhi3xl5x7] {
    display: flex;
    justify-content: flex-end;
}

.aim-none[b-bmhi3xl5x7] {
    margin: 1rem 0 0;
}

.aim-assets[b-bmhi3xl5x7] {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.aim-asset[b-bmhi3xl5x7] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.aim-asset.is-archived[b-bmhi3xl5x7] {
    opacity: 0.6;
}

.aim-asset-img[b-bmhi3xl5x7],
.aim-approval-img[b-bmhi3xl5x7],
.aim-preview img[b-bmhi3xl5x7] {
    display: block;
    width: 100%;
    object-fit: contain;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.aim-asset-img[b-bmhi3xl5x7] {
    aspect-ratio: 4 / 5;
}

.aim-asset-info[b-bmhi3xl5x7],
.aim-approval-info[b-bmhi3xl5x7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.aim-asset-label[b-bmhi3xl5x7] {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.aim-meta[b-bmhi3xl5x7] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.aim-pills[b-bmhi3xl5x7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.aim-asset-actions[b-bmhi3xl5x7],
.aim-approval-actions[b-bmhi3xl5x7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.aim-bind[b-bmhi3xl5x7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.aim-kind[b-bmhi3xl5x7],
.aim-preview[b-bmhi3xl5x7],
.aim-confirm[b-bmhi3xl5x7],
.aim-bind-action[b-bmhi3xl5x7] {
    grid-column: 1 / -1;
}

.aim-kind[b-bmhi3xl5x7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
}

.aim-kind legend[b-bmhi3xl5x7] {
    width: 100%;
    margin-bottom: 0.25rem;
}

.aim-kind .cm-hint[b-bmhi3xl5x7] {
    width: 100%;
}

.aim-radio[b-bmhi3xl5x7],
.aim-confirm[b-bmhi3xl5x7] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
}

.aim-radio input[b-bmhi3xl5x7],
.aim-confirm input[b-bmhi3xl5x7] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--accent-solid);
    flex-shrink: 0;
}

.aim-radio input:focus-visible[b-bmhi3xl5x7],
.aim-confirm input:focus-visible[b-bmhi3xl5x7] {
    outline: 2px solid var(--accent-solid);
    outline-offset: 2px;
}

.aim-confirm[b-bmhi3xl5x7] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.aim-preview[b-bmhi3xl5x7] {
    margin: 0;
    max-width: 320px;
}

.aim-preview img[b-bmhi3xl5x7] {
    max-height: 400px;
}

.aim-approvals[b-bmhi3xl5x7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aim-approval[b-bmhi3xl5x7] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.aim-approval-img[b-bmhi3xl5x7] {
    width: 72px;
    height: 72px;
}

.aim-approval-info strong[b-bmhi3xl5x7] {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .aim-upload[b-bmhi3xl5x7],
    .aim-bind[b-bmhi3xl5x7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .aim-upload-action[b-bmhi3xl5x7],
    .aim-bind-action[b-bmhi3xl5x7] {
        justify-content: stretch;
    }

    .aim-upload-action .cm-btn[b-bmhi3xl5x7],
    .aim-bind-action .cm-btn[b-bmhi3xl5x7] {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .aim-approval[b-bmhi3xl5x7] {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .aim-approval-img[b-bmhi3xl5x7] {
        width: 56px;
        height: 56px;
    }

    .aim-approval-actions[b-bmhi3xl5x7] {
        grid-column: 1 / -1;
    }

    .aim-asset-actions .cm-btn[b-bmhi3xl5x7],
    .aim-approval-actions .cm-btn[b-bmhi3xl5x7] {
        min-height: 44px;
    }
}
/* /Components/Pages/Connect.razor.rz.scp.css */
/* Connect Page Styles — status first, one primary action per card, tokens only.
   2026-10-07: an overview (channels in use, accounts, what needs attention), then the channels in
   use with their accounts, attention first, then the channels still to add. */

.connect-container[b-657jxnp5iu] { max-width: 1280px; }
.connect-alert[b-657jxnp5iu] { margin-bottom: 1.5rem; align-items: center; }

.connect-overview[b-657jxnp5iu] { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.75rem; }
.connect-overview .cm-kpi.is-warning[b-657jxnp5iu] { border-color: var(--accent-amber); }
.connect-overview .cm-kpi.is-warning .cm-kpi-label > .material-symbols-rounded[b-657jxnp5iu] { color: var(--accent-amber-text); }

.connect-section + .connect-section[b-657jxnp5iu] { margin-top: 2rem; }
.connect-section-title[b-657jxnp5iu] {
    margin: 0 0 0.875rem;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.connect-section-sub[b-657jxnp5iu] { margin: -0.5rem 0 1rem; font-size: var(--text-sm); color: var(--text-muted); }

/* ── Grid: 1 column on phones, 2 on tablets and landscape phones, 3 on desktop ── */
.platforms-grid[b-657jxnp5iu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

@media (min-width: 641px) {
    .platforms-grid[b-657jxnp5iu] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}

@media (min-width: 1200px) {
    .platforms-grid[b-657jxnp5iu] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    /* Channels in use carry their account lists, so they get the wider two-column track. */
    .platforms-grid--in-use[b-657jxnp5iu] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Card ──────────────────────────────── */
.platform-card[b-657jxnp5iu] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    transition: border-color var(--transition-fast);
}
/* A channel still to add is an offer, not a status report: its actions sit at the bottom. */
.platforms-grid--to-add .pc-actions[b-657jxnp5iu] { margin-top: auto; }

.platform-card.pc-state--Connected[b-657jxnp5iu] { border-color: var(--border-default); }
.platform-card.pc-state--NeedsAttention[b-657jxnp5iu] { border-color: var(--accent-amber); }

.connect-header[b-657jxnp5iu] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

/* The channel's own logo, at the size of the slot and in its owner's colours. There is no tile
   behind it: LINE, Instagram and Shopee bring their own square, and a tile of ours behind the
   others would redraw their logos inside our shape. `color` reaches only TikTok's note. */
.pc-logo[b-657jxnp5iu] {
    width: 48px;
    height: 48px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.pc-logo[b-657jxnp5iu]  iconify-icon {
    display: block;
    width: 100%;
    height: 100%;
}

.pc-heading[b-657jxnp5iu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
    min-width: 0;
    flex: 1;
}

.pc-heading h3[b-657jxnp5iu] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Status pill: icon + words, so the state never rests on colour alone. */
.pc-status[b-657jxnp5iu] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem 0.1875rem 0.375rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.pc-status .material-symbols-rounded[b-657jxnp5iu] { font-size: 16px; }
.pc-status--Connected[b-657jxnp5iu] { background: var(--accent-green-bg); color: var(--accent-green-text); }
.pc-status--NeedsAttention[b-657jxnp5iu] { background: var(--accent-amber-bg); color: var(--accent-amber-text); }
.pc-status--NotConnected[b-657jxnp5iu] { background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border-default); }
.pc-status--ComingSoon[b-657jxnp5iu] { background: var(--bg-tertiary); color: var(--text-secondary); }

.pc-desc[b-657jxnp5iu] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.55;
}

/* ── Connected accounts ────────────────── */
.pc-accounts[b-657jxnp5iu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.pc-accounts-title[b-657jxnp5iu] {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pc-count[b-657jxnp5iu] { font-weight: 600; }

.pc-account-list[b-657jxnp5iu] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pc-account[b-657jxnp5iu] {
    padding: 0.625rem 0.5rem 0.625rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    min-width: 0;
}
.pc-account.has-issue[b-657jxnp5iu] { border-color: var(--accent-amber); }

.pc-account-row[b-657jxnp5iu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.pc-avatar[b-657jxnp5iu],
.pc-avatar-fallback[b-657jxnp5iu] {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--bg-tertiary);
}

.pc-avatar[b-657jxnp5iu] {
    object-fit: cover;
    border: 1px solid var(--border-default);
}

.pc-avatar-fallback[b-657jxnp5iu] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-secondary);
}
.pc-avatar-fallback[hidden][b-657jxnp5iu],
.pc-avatar[hidden][b-657jxnp5iu] { display: none; }

.pc-account-main[b-657jxnp5iu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.pc-account-name[b-657jxnp5iu] {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-account-id[b-657jxnp5iu] {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.pc-mono[b-657jxnp5iu] { font-family: var(--font-mono); color: var(--text-secondary); }

.pc-issue[b-657jxnp5iu] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--accent-amber-text);
}
.pc-issue .material-symbols-rounded[b-657jxnp5iu] { font-size: 18px; flex: none; }

/* ── Per-account overflow menu ─────────── */
.pc-menu[b-657jxnp5iu] { flex: none; }
.pc-menu[open] > .pc-menu-btn[b-657jxnp5iu] { background: var(--bg-hover); color: var(--text-primary); }
.pc-menu-btn:focus-visible[b-657jxnp5iu] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.pc-menu-list[b-657jxnp5iu] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 60;
    min-width: 12rem;
    padding: 0.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.pc-menu-item[b-657jxnp5iu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--control-h);
    padding: 0 0.75rem;
    border: 0;
    border-radius: calc(var(--radius-sm) - 0.25rem);
    background: transparent;
    color: var(--text-primary);
    font: 600 var(--text-sm)/1.2 var(--font-sans);
    text-align: left;
    cursor: pointer;
}
.pc-menu-item .material-symbols-rounded[b-657jxnp5iu] { font-size: 18px; }
.pc-menu-item:hover[b-657jxnp5iu],
.pc-menu-item:focus-visible[b-657jxnp5iu] { background: var(--bg-hover); outline: none; }
.pc-menu-item.danger[b-657jxnp5iu] { color: var(--accent-red-text); }
.pc-menu-item.danger:hover[b-657jxnp5iu],
.pc-menu-item.danger:focus-visible[b-657jxnp5iu] { background: var(--accent-red-bg); }

/* ── Actions ───────────────────────────── */
.pc-actions[b-657jxnp5iu] {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.pc-primary[b-657jxnp5iu] { flex: 1 1 12rem; }
.pc-secondary[b-657jxnp5iu] { flex: 0 1 auto; }
.pc-actions .material-symbols-rounded[b-657jxnp5iu] { font-size: 18px; }

/* A full connection allowance, under the button that met it. */
.pc-quota[b-657jxnp5iu] { flex: 1 1 100%; margin-top: 0.25rem; }
.pc-quota:focus[b-657jxnp5iu] { outline: none; }
.pc-quota:focus-visible[b-657jxnp5iu] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.pc-quota-body[b-657jxnp5iu] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.pc-quota-text[b-657jxnp5iu] { margin: 0; }
.pc-quota-link[b-657jxnp5iu] { min-height: var(--touch-min, 44px); max-width: 100%; white-space: normal; text-align: left; }

.pc-soon[b-657jxnp5iu] {
    flex: 1;
    padding: 0.625rem 1rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ---- Connection self-check -----------------------------------------------
   "Connected" on a card only means Shopee accepted the authorisation. Whether
   the shop can actually send and receive is a separate question with a
   separate answer, so it gets its own strip under the details. */
.account-test[b-657jxnp5iu] {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--border-subtle);
}
.account-test .material-symbols-rounded[b-657jxnp5iu] { font-size: 18px; }

.check-result[b-657jxnp5iu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.check-result.ok[b-657jxnp5iu] {
    background: var(--accent-green-bg);
    color: var(--accent-green-text);
}

.check-result.bad[b-657jxnp5iu] {
    background: var(--accent-red-bg);
    color: var(--accent-red-text);
}

.check-result .check-line[b-657jxnp5iu] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-weight: 600;
}

.check-result .check-raw[b-657jxnp5iu] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.5;
    word-break: break-word;
}

.check-result a[b-657jxnp5iu] {
    color: var(--link);
    font-weight: 600;
    text-decoration: underline;
}

/* ── Dialogs ───────────────────────────── */
/* On the shared backdrop (z-index 1500, above the bottom nav at 900). The head and foot stay
   put and only the body scrolls, so Close and the primary action are always on screen. */
.cn-backdrop[b-657jxnp5iu] {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

.cn-dialog[b-657jxnp5iu] {
    width: min(100%, 32rem);
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    animation: cn-rise-b-657jxnp5iu 0.2s ease-out;
}
.cn-dialog--confirm[b-657jxnp5iu] { width: min(100%, 26rem); }

@keyframes cn-rise-b-657jxnp5iu {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.cn-head[b-657jxnp5iu] {
    flex: none;
    align-items: center;
    padding: 1rem 1rem 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.cn-title-row[b-657jxnp5iu] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}
.cn-title-logo[b-657jxnp5iu] { display: flex; flex: none; }
.cn-title-row .cm-dialog-title[b-657jxnp5iu] { overflow-wrap: anywhere; }

.cn-danger-title[b-657jxnp5iu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-red-text);
}

.cn-body[b-657jxnp5iu] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem;
}

.cn-foot[b-657jxnp5iu] {
    flex: none;
    border-top: 1px solid var(--border-subtle);
    padding: 0.75rem 1.25rem 1rem;
}
.cn-foot--tinted[b-657jxnp5iu] { background: var(--bg-secondary); }

.cn-description[b-657jxnp5iu] {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.55;
}

.cn-confirm-text[b-657jxnp5iu] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: 1.5;
}

.cn-error[b-657jxnp5iu] { margin-bottom: 1rem; scroll-margin: 0.75rem; }
.cn-error:focus[b-657jxnp5iu] { outline: none; }

.form-group[b-657jxnp5iu] {
    margin-bottom: 1rem;
}

.form-group label[b-657jxnp5iu] {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.form-group input[b-657jxnp5iu] {
    width: 100%;
    min-height: var(--control-h);
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-surface);
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.form-group input:focus[b-657jxnp5iu] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--ring);
}

.form-group input[b-657jxnp5iu]::placeholder {
    color: var(--text-muted);
}

.form-group small[b-657jxnp5iu] {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

.input-with-toggle[b-657jxnp5iu] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-toggle input[b-657jxnp5iu] {
    padding-right: 3rem;
}

.toggle-visibility[b-657jxnp5iu] {
    position: absolute;
    right: 2px;
}
.toggle-visibility .material-symbols-rounded[b-657jxnp5iu] { font-size: 20px; }

.webhook-url-box[b-657jxnp5iu] {
    background: var(--accent-light);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.875rem;
    margin-bottom: 1rem;
}

.webhook-label[b-657jxnp5iu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.badge-required[b-657jxnp5iu] {
    font-size: var(--text-xs);
    font-weight: 700;
    background: var(--accent-red-bg);
    color: var(--accent-red-text);
    padding: 1px 6px;
    border-radius: 4px;
}

.url-copy-row[b-657jxnp5iu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.25rem 0.25rem 0.625rem;
    margin-bottom: 0.375rem;
    min-width: 0;
}

.url-copy-row code[b-657jxnp5iu] {
    flex: 1;
    min-width: 0;
    font-size: var(--text-xs);
    color: var(--link);
    word-break: break-all;
    font-family: var(--font-mono);
}

.webhook-url-box small[b-657jxnp5iu] {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}

.modal-guide[b-657jxnp5iu] {
    margin-top: 0.25rem;
}

.modal-guide details[b-657jxnp5iu] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.modal-guide summary[b-657jxnp5iu] {
    display: flex;
    align-items: center;
    min-height: var(--control-h);
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--link);
    font-weight: 600;
    user-select: none;
}

.modal-guide summary:hover[b-657jxnp5iu] {
    background: var(--bg-hover);
}

.modal-guide ol[b-657jxnp5iu] {
    padding: 0 0.875rem 0.75rem 2rem;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.8;
}

.guide-link[b-657jxnp5iu] {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min, 44px);
    margin-top: 0.5rem;
    color: var(--link);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: underline;
}

/* ---- Shopee pre-flight gate ----------------------------------------------
   Asked before the credential fields, because obtaining the Chat API grant is
   the seller's account manager's decision and nothing below it works without
   one. Letting them fill the form first only wastes their evening. */
.shopee-gate[b-657jxnp5iu] {
    padding: 1.25rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    text-align: left;
}

.shopee-gate .gate-icon[b-657jxnp5iu] {
    display: flex;
    color: var(--link);
}

.shopee-gate h3[b-657jxnp5iu] {
    margin: 10px 0 6px;
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
}

.shopee-gate p[b-657jxnp5iu] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-secondary);
}

.shopee-gate .gate-actions[b-657jxnp5iu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1rem;
}

.shopee-gate small[b-657jxnp5iu] {
    display: block;
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.6;
}

/* ── Phones ────────────────────────────── */
@media (max-width: 640px) {
    .platform-card[b-657jxnp5iu] { padding: 1rem; }
    .connect-overview[b-657jxnp5iu] { gap: 0.5rem; }
    .connect-overview .cm-kpi-label > .material-symbols-rounded[b-657jxnp5iu] { display: none; }
    .pc-logo[b-657jxnp5iu] { width: 44px; height: 44px; }
    .pc-heading h3[b-657jxnp5iu] { font-size: var(--text-md); }

    /* Dialogs become a full-width sheet from the bottom. */
    .cn-backdrop[b-657jxnp5iu] {
        align-items: end;
        place-items: end stretch;
        padding: var(--cm-safe-top, 0px) 0 0;
    }
    .cn-dialog[b-657jxnp5iu],
    .cn-dialog--confirm[b-657jxnp5iu] {
        width: 100%;
        max-height: calc(100dvh - var(--cm-safe-top, 0px) - 0.75rem);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: 0;
    }
    .cn-foot[b-657jxnp5iu] { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
    .cn-foot > .cm-btn[b-657jxnp5iu] { flex: 1 1 auto; }
    .cn-body[b-657jxnp5iu] { padding: 1rem; }
    .cn-head[b-657jxnp5iu] { padding-left: 1rem; }

    /* Typing: the backdrop is the part above the keyboard (chatmai-ui.css), and the sheet sits on
       the keyboard. The keyboard covers the home indicator. */
    html.cm-kb-open .platform-card[b-657jxnp5iu] { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
    html.cm-kb-open .cn-backdrop[b-657jxnp5iu] { padding-bottom: 0; }
    html.cm-kb-open .cn-dialog[b-657jxnp5iu] { max-height: calc(var(--cm-vvh, 100dvh) - 0.75rem - var(--cm-safe-top, 0px)); }
    html.cm-kb-open .cn-foot[b-657jxnp5iu] { padding-bottom: 0.75rem; }
}

/* Landscape phones (e.g. 844×390): very little height, so the dialog uses nearly all of it. */
@media (max-height: 480px) {
    .cn-dialog[b-657jxnp5iu] { max-height: calc(100dvh - 1rem); }
    .cn-backdrop[b-657jxnp5iu] { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .cn-head[b-657jxnp5iu] { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .cn-foot[b-657jxnp5iu] { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    /* Typing leaves about 170px above the keyboard: just room for the head, the focused field and
       the foot, with their 44px targets. */
    html.cm-kb-open .cn-backdrop[b-657jxnp5iu] { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    html.cm-kb-open .cn-dialog[b-657jxnp5iu] { max-height: calc(var(--cm-vvh, 100dvh) - 0.5rem); }
    html.cm-kb-open .cn-head[b-657jxnp5iu],
    html.cm-kb-open .cn-foot[b-657jxnp5iu] { padding-top: 0.25rem; padding-bottom: 0.25rem; }
}

/* ── Fingers: 44px targets, 16px fields; nothing depends on hover ── */
@media (pointer: coarse) {
    .pc-menu-item[b-657jxnp5iu],
    .modal-guide summary[b-657jxnp5iu],
    .guide-link[b-657jxnp5iu] { min-height: var(--touch-min); }
    .form-group input[b-657jxnp5iu] { min-height: var(--touch-min); font-size: 16px; }
    .input-with-toggle input[b-657jxnp5iu] { padding-right: 3.25rem; }
}

.connect-skeleton[b-657jxnp5iu] { height: 11rem; border-radius: var(--radius-xl); }

.connect-group[b-657jxnp5iu] { display: flex; flex-direction: column; gap: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
    .platform-card[b-657jxnp5iu] { transition: none; }
}
/* /Components/Pages/ConnectedApps.razor.rz.scp.css */
.ca-field[b-wlu6vb1aro] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.ca-label[b-wlu6vb1aro] { color: var(--text-secondary); font-size: .76rem; font-weight: 600; }
.ca-copy-row[b-wlu6vb1aro] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ca-code[b-wlu6vb1aro] { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-default);
    background: var(--bg-secondary); color: var(--text-primary); font-family: var(--font-mono); font-size: .8rem; overflow-wrap: anywhere; }
.ca-copy-row .cm-icon-btn[b-wlu6vb1aro] { flex: none; min-width: 44px; min-height: 44px; }
.ca-steps[b-wlu6vb1aro] { margin: 0 0 14px; padding-left: 1.25rem; color: var(--text-secondary); font-size: .85rem; line-height: 1.6; }
.ca-subhead[b-wlu6vb1aro] { margin: 18px 0 8px; font-size: .9rem; }
.ca-scopes[b-wlu6vb1aro] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.ca-scopes li[b-wlu6vb1aro] { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-secondary); min-width: 0; }
.ca-scopes strong[b-wlu6vb1aro] { font-size: .82rem; color: var(--text-primary); }
.ca-scopes span[b-wlu6vb1aro] { font-size: .76rem; color: var(--text-secondary); line-height: 1.45; }
.ca-grants[b-wlu6vb1aro] { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ca-grant[b-wlu6vb1aro] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--border-default);
    border-radius: 12px; background: var(--bg-primary); min-width: 0; }
.ca-grant-main[b-wlu6vb1aro] { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ca-grant-name[b-wlu6vb1aro] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text-primary); }
.ca-pills[b-wlu6vb1aro] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ca-grant-actions[b-wlu6vb1aro] { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.ca-grant-actions .aiops-btn[b-wlu6vb1aro] { min-height: 44px; }

@media (max-width: 640px) {
    .ca-grant[b-wlu6vb1aro] { flex-direction: column; }
    .ca-grant-actions[b-wlu6vb1aro] { width: 100%; }
    .ca-grant-actions .aiops-btn[b-wlu6vb1aro] { flex: 1 1 auto; }
}
/* /Components/Pages/DashboardInsight.razor.rz.scp.css */
/* ── Insights (/admin/insights) ────────────────────────────────────
   The service counts the last 30 days (Active chats are open now), so every figure says which.
   Figures first, then the AI allowance when ChatMai's own key answers, then where conversations
   come from and how they ended, each as a share bar. Kit classes live in chatmai-ui.css. */

.insight-page[b-0lznzpk8y0] { max-width: 1200px; }

.insight-actions[b-0lznzpk8y0] { align-items: center; }
.insight-period[b-0lznzpk8y0] { min-height: var(--control-h-sm); padding-inline: 0.75rem; }
.insight-actions .material-symbols-rounded[b-0lznzpk8y0] { font-size: 18px; }

.insight-kpis[b-0lznzpk8y0] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.insight-alert[b-0lznzpk8y0] { align-items: center; flex-wrap: wrap; }
.insight-alert-text[b-0lznzpk8y0] { flex: 1 1 14rem; min-width: 0; }

/* ── AI allowance ─────────────────────────────────────────────── */
.insight-quota-bar[b-0lznzpk8y0] { height: 8px; }
.insight-quota-figures[b-0lznzpk8y0] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
}
.insight-quota-figures div[b-0lznzpk8y0] { min-width: 0; }
.insight-quota-figures dt[b-0lznzpk8y0] { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.insight-quota-figures dd[b-0lznzpk8y0] {
    margin: 0.125rem 0 0;
    font-size: var(--text-lg); font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Breakdowns ───────────────────────────────────────────────── */
.insight-grid[b-0lznzpk8y0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}
.insight-list[b-0lznzpk8y0] { list-style: none; margin: 0; padding: 0.5rem 1.25rem 1.25rem; }
.insight-item[b-0lznzpk8y0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.375rem 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.insight-item:last-child[b-0lznzpk8y0] { border-bottom: 0; }
.insight-item-name[b-0lznzpk8y0] {
    display: flex; align-items: center; gap: 0.5rem; min-width: 0;
    font-size: var(--text-base); font-weight: 500; color: var(--text-primary);
    overflow-wrap: anywhere;
}
.insight-logo[b-0lznzpk8y0] { display: inline-flex; flex: none; }
.insight-item-value[b-0lznzpk8y0] {
    font-size: var(--text-base); font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.insight-item-share[b-0lznzpk8y0] { margin-left: 0.25rem; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.insight-item-bar[b-0lznzpk8y0] { grid-column: 1 / -1; }
.insight-empty[b-0lznzpk8y0] { margin: 0; padding: 1.25rem; font-size: var(--text-sm); color: var(--text-muted); }

.outcome-icon[b-0lznzpk8y0] { flex: none; }
.outcome-icon.won[b-0lznzpk8y0] { color: var(--accent-green-text); }
.outcome-icon.lost[b-0lznzpk8y0] { color: var(--accent-red-text); }
.outcome-icon.pending[b-0lznzpk8y0] { color: var(--accent-amber-text); }
.outcome-icon.other[b-0lznzpk8y0] { color: var(--text-muted); }
.outcome-bar.won > span[b-0lznzpk8y0] { background: var(--accent-green); }
.outcome-bar.lost > span[b-0lznzpk8y0] { background: var(--accent-red); }
.outcome-bar.pending > span[b-0lznzpk8y0] { background: var(--accent-amber); }
.outcome-bar.other > span[b-0lznzpk8y0] { background: var(--text-muted); }

/* ── Skeleton ─────────────────────────────────────────────────── */
.insight-sk-label[b-0lznzpk8y0] { height: 0.75rem; width: 60%; }
.insight-sk-panel[b-0lznzpk8y0] { display: flex; flex-direction: column; gap: 0.875rem; }
.insight-sk-title[b-0lznzpk8y0] { height: 1rem; width: 40%; }
.insight-sk-bar[b-0lznzpk8y0] { height: 0.625rem; width: 100%; }

@media (max-width: 900px) {
    .insight-kpis[b-0lznzpk8y0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insight-grid[b-0lznzpk8y0] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640.98px) {
    .insight-header .header-content h1[b-0lznzpk8y0] { display: none; }
    .insight-actions[b-0lznzpk8y0] { justify-content: space-between; }
    .insight-list[b-0lznzpk8y0] { padding: 0.25rem 1rem 1rem; }
    .insight-quota-figures dd[b-0lznzpk8y0] { font-size: var(--text-md); }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Dashboard — Scoped CSS Redesign
   ═══════════════════════════════════════════════════════════ */

/* ── Container & Header ────────────────── */
.cm-page-container[b-c2vczxv3jm] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn 0.4s ease;
}

.cm-page-header[b-c2vczxv3jm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.cm-page-header h1[b-c2vczxv3jm] {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.02em;
}

.cm-page-subtitle[b-c2vczxv3jm] {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* ── Common Card ───────────────────────── */
.cm-grouped-section[b-c2vczxv3jm] {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-base);
}

.cm-grouped-section-title[b-c2vczxv3jm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.cm-grouped-section-title h2[b-c2vczxv3jm] {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.cm-grouped-list[b-c2vczxv3jm] {
    padding: 0.75rem 1.25rem 1.25rem;
}

.cm-btn-link[b-c2vczxv3jm] {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}
.cm-btn-link:hover[b-c2vczxv3jm] {
    text-decoration: underline;
}

/* ── Stats Grid ────────────────────────── */
.cm-stats-grid[b-c2vczxv3jm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cm-stat-card[b-c2vczxv3jm] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

.cm-stat-card:hover[b-c2vczxv3jm] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cm-stat-icon[b-c2vczxv3jm] {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.cm-stat-icon svg[b-c2vczxv3jm] { width: 20px; height: 20px; }

.cm-stat-info[b-c2vczxv3jm] { flex: 1; }

.stat-value[b-c2vczxv3jm] {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.cm-stat-label[b-c2vczxv3jm] {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.15rem;
}

.stat-trend[b-c2vczxv3jm] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.stat-trend svg[b-c2vczxv3jm] { flex: none; margin-top: 0.1rem; }
.stat-trend.trend-up[b-c2vczxv3jm] { color: var(--accent-green-text); }
.stat-trend.trend-down[b-c2vczxv3jm] { color: var(--accent-red-text); }
.stat-trend.trend-flat[b-c2vczxv3jm], .stat-trend.neutral[b-c2vczxv3jm] { color: var(--text-secondary); }
.stat-trend.ok[b-c2vczxv3jm] { color: var(--accent-green-text); }
.stat-trend.alert[b-c2vczxv3jm] { color: var(--accent-red-text); align-items: center; }

/* ── Content Grid ──────────────────────── */
.cm-dashboard-content[b-c2vczxv3jm] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1rem;
}

.cm-right-column[b-c2vczxv3jm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Conversations ─────────────────────── */
.cm-conversation-list[b-c2vczxv3jm] { display: flex; flex-direction: column; }

.cm-conv-item[b-c2vczxv3jm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-base);
}

.cm-conv-item:hover[b-c2vczxv3jm] { background: var(--bg-hover); }

.cm-conv-item + .cm-conv-item[b-c2vczxv3jm] {
    border-top: 1px solid var(--border-subtle);
}

.cm-conv-avatar[b-c2vczxv3jm] {
    position: relative;
    flex-shrink: 0;
}

.cm-conv-avatar img[b-c2vczxv3jm], .cm-avatar-fallback[b-c2vczxv3jm] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
}

.cm-avatar-fallback[b-c2vczxv3jm] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.cm-platform-dot[b-c2vczxv3jm] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
}

/* Platform specific colors are kept but these should use custom properties ideally. */
.cm-platform-dot.facebook[b-c2vczxv3jm] { background: #1877F2; }
.cm-platform-dot.line[b-c2vczxv3jm] { background: #00B900; }
.cm-platform-dot.instagram[b-c2vczxv3jm] { background: #E4405F; }
.cm-platform-dot.tiktok[b-c2vczxv3jm], .cm-platform-dot.tiktokshop[b-c2vczxv3jm] { background: #010101; }
.cm-platform-dot.shopee[b-c2vczxv3jm] { background: #ee4d2d; }
.cm-platform-dot.lazada[b-c2vczxv3jm] { background: #0f146d; }

html[data-theme="dark"] .cm-platform-dot.tiktok[b-c2vczxv3jm],
html[data-theme="dark"] .cm-platform-dot.tiktokshop[b-c2vczxv3jm] { background: #fafaf9; }
html[data-theme="dark"] .cm-platform-dot.lazada[b-c2vczxv3jm] { background: #a5b4fc; }

.cm-conv-details[b-c2vczxv3jm] { flex: 1; min-width: 0; }

.cm-conv-name[b-c2vczxv3jm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-conv-preview[b-c2vczxv3jm] {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.cm-conv-meta[b-c2vczxv3jm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.cm-conv-time[b-c2vczxv3jm] { font-size: 0.7rem; color: var(--text-muted); }

.cm-unread-badge[b-c2vczxv3jm] {
    background: var(--accent-solid);
    color: var(--on-accent);
    font-size: 0.68rem;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* ── Platforms ─────────────────────────── */
.cm-platform-list[b-c2vczxv3jm] { display: flex; flex-direction: column; gap: 0.35rem; }

.cm-platform-item[b-c2vczxv3jm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
}

.cm-platform-item:hover[b-c2vczxv3jm] { background: var(--bg-hover); }

.cm-platform-icon-wrapper[b-c2vczxv3jm] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-primary);
}

.cm-platform-info[b-c2vczxv3jm] { flex: 1; display: flex; flex-direction: column; }
.cm-platform-name[b-c2vczxv3jm] { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.cm-platform-pages[b-c2vczxv3jm] { font-size: 0.72rem; color: var(--text-muted); }

.cm-platform-stats[b-c2vczxv3jm] { display: flex; flex-direction: column; align-items: center; }
.cm-conversations-count[b-c2vczxv3jm] { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.cm-conversations-label[b-c2vczxv3jm] { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Quick Actions ─────────────────────── */
.cm-actions-grid[b-c2vczxv3jm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cm-action-card[b-c2vczxv3jm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.15rem 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-base);
}

.cm-action-card:hover[b-c2vczxv3jm] {
    background: var(--bg-tertiary);
    border-color: var(--border-default);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.cm-action-card span[b-c2vczxv3jm] { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); }

.cm-action-icon[b-c2vczxv3jm] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.cm-action-icon svg[b-c2vczxv3jm] { width: 20px; height: 20px; }

/* ── Today's Activity ──────────────────── */
.cm-activity-stats[b-c2vczxv3jm] { display: flex; flex-direction: column; gap: 0.35rem; }

.cm-activity-item[b-c2vczxv3jm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.5rem;
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
}

.cm-activity-item:hover[b-c2vczxv3jm] { background: var(--bg-hover); }

.cm-activity-icon[b-c2vczxv3jm] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.cm-activity-detail[b-c2vczxv3jm] { display: flex; flex-direction: column; }
.activity-value[b-c2vczxv3jm] { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.cm-activity-label[b-c2vczxv3jm] { font-size: 0.72rem; color: var(--text-muted); }

/* ── Skeletons ─────────────────────────── */
.cm-skeleton[b-c2vczxv3jm] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    animation: pulse-b-c2vczxv3jm 1.5s infinite;
}

.sk-value[b-c2vczxv3jm] { width: 3.5rem; height: 1.6rem; margin: 0.1rem 0; display: block; }
.sk-chip[b-c2vczxv3jm] { width: 70%; height: 0.9rem; display: block; }
.sk-activity[b-c2vczxv3jm] { width: 2.25rem; height: 1.1rem; margin-bottom: 0.2rem; display: block; }
.sk-list[b-c2vczxv3jm] { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.25rem; }
.sk-row[b-c2vczxv3jm] { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.5rem; }
.sk-avatar[b-c2vczxv3jm] { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.sk-avatar.square[b-c2vczxv3jm] { width: 36px; height: 36px; border-radius: var(--radius-md); }
.sk-lines[b-c2vczxv3jm] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sk-line[b-c2vczxv3jm] { height: 0.8rem; width: 60%; display: block; }
.sk-line.short[b-c2vczxv3jm] { width: 85%; height: 0.7rem; }

/* ── Misc ──────────────────────────────── */
.cm-dash-alert[b-c2vczxv3jm] { margin-bottom: 1rem; align-items: center; flex-wrap: wrap; display: flex; gap: 0.5rem; }
.cm-dash-alert-text[b-c2vczxv3jm] { flex: 1 1 12rem; }

.cm-empty[b-c2vczxv3jm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    gap: 0.5rem;
}
.cm-empty-title[b-c2vczxv3jm] { color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; margin: 0; }
.cm-empty-text[b-c2vczxv3jm] { color: var(--text-muted); font-size: 0.78rem; margin: 0; }
.cm-empty.compact[b-c2vczxv3jm] { padding: 1.25rem 0.75rem; }
.cm-empty-icon[b-c2vczxv3jm] { color: var(--text-muted); }

.cm-spin[b-c2vczxv3jm] { animation: spin-b-c2vczxv3jm 1s linear infinite; }

.cm-welcome-resume[b-c2vczxv3jm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
    color: var(--text-primary);
}
.cm-welcome-icon[b-c2vczxv3jm] { color: var(--accent-primary); display: flex; }
.cm-welcome-text[b-c2vczxv3jm] { flex: 1; display: flex; flex-direction: column; }
.cm-welcome-title[b-c2vczxv3jm] { font-weight: 600; font-size: 0.95rem; }
.cm-welcome-count[b-c2vczxv3jm] { font-size: 0.8rem; color: var(--text-muted); }
.cm-welcome-next[b-c2vczxv3jm] { font-size: 0.85rem; color: var(--text-primary); overflow-wrap: anywhere; }
.cm-welcome-cta[b-c2vczxv3jm] { display: flex; align-items: center; gap: 0.25rem; font-weight: 500; font-size: 0.85rem; color: var(--accent-primary); }

.pulse-dot[b-c2vczxv3jm] {
    width: 7px;
    height: 7px;
    background: var(--accent-red);
    border-radius: 50%;
    animation: pulse-glow-b-c2vczxv3jm 2s infinite;
}

/* ── Buttons ───────────────────────────── */
.cm-btn[b-c2vczxv3jm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    text-decoration: none;
}
.cm-btn--secondary[b-c2vczxv3jm] {
    border-color: var(--border-default);
    background: transparent;
    color: var(--text-secondary);
}
.cm-btn--secondary:hover[b-c2vczxv3jm] {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.cm-btn--primary[b-c2vczxv3jm] {
    background: var(--accent-solid);
    color: var(--on-accent);
}
.cm-btn--primary:hover[b-c2vczxv3jm] {
    background: var(--accent-solid-hover);
}
.cm-btn--sm[b-c2vczxv3jm] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}
.cm-btn:disabled[b-c2vczxv3jm] { opacity: 0.5; cursor: not-allowed; }

/* ── Responsive ────────────────────────── */
@media (max-width: 1024px) {
    .cm-stats-grid[b-c2vczxv3jm] { grid-template-columns: repeat(2, 1fr); }
    .cm-dashboard-content[b-c2vczxv3jm] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .cm-page-container[b-c2vczxv3jm] { padding: 1rem; }
    .cm-stats-grid[b-c2vczxv3jm] { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
    .cm-stat-card[b-c2vczxv3jm] { padding: 0.875rem; }
    .stat-value[b-c2vczxv3jm] { font-size: 1.35rem; }
    .cm-stat-icon[b-c2vczxv3jm] { width: 36px; height: 36px; }
    .cm-stat-icon svg[b-c2vczxv3jm] { width: 18px; height: 18px; }
    .cm-page-header[b-c2vczxv3jm] { flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
    .cm-page-header h1[b-c2vczxv3jm] { font-size: 1.3rem; }
    .cm-grouped-section-title[b-c2vczxv3jm] { padding: 1rem; }
    .cm-grouped-list[b-c2vczxv3jm] { padding: 1rem; }
    .cm-conv-item[b-c2vczxv3jm] { padding: 0.55rem 0.25rem; }
    .cm-conv-avatar img[b-c2vczxv3jm], .cm-avatar-fallback[b-c2vczxv3jm] { width: 36px; height: 36px; }
    .cm-empty[b-c2vczxv3jm] { padding: 1.25rem 0.75rem; }
}

@media (max-width: 380px) {
    .cm-stats-grid[b-c2vczxv3jm] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .cm-stat-card[b-c2vczxv3jm] { padding: 0.75rem; gap: 0.5rem; }
    .cm-actions-grid[b-c2vczxv3jm] { grid-template-columns: 1fr; }
}

@media (max-height: 480px) and (orientation: landscape) {
    .cm-stats-grid[b-c2vczxv3jm] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cm-stat-card[b-c2vczxv3jm] { padding: 0.75rem; gap: 0.5rem; }
    .cm-stat-icon[b-c2vczxv3jm] { display: none; }
}

.cm-stat-card[b-c2vczxv3jm], .cm-grouped-section[b-c2vczxv3jm], .cm-conv-details[b-c2vczxv3jm], .cm-platform-info[b-c2vczxv3jm] { min-width: 0; }

@media (pointer: coarse) {
    .cm-btn[b-c2vczxv3jm], .cm-btn-link[b-c2vczxv3jm] { min-height: var(--touch-min, 44px); min-width: var(--touch-min, 44px); }
    .cm-grouped-section-title .cm-btn-link[b-c2vczxv3jm] { display: inline-flex; align-items: center; justify-content: center; }
    .cm-conv-item[b-c2vczxv3jm], .cm-action-card[b-c2vczxv3jm] { min-height: var(--touch-min, 44px); }
}

@keyframes spin-b-c2vczxv3jm { 100% { transform: rotate(360deg); } }
@keyframes pulse-b-c2vczxv3jm { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes pulse-glow-b-c2vczxv3jm { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
/* /Components/Pages/Inbox.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Inbox — ChatMai Bento Glass Style
   Creative chat • Gradient bubbles • Glass surfaces
   ═══════════════════════════════════════════════════════════ */

/* ── Main Grid — Floating Bento Panels ─────────────────── */
.inbox-container[b-9nejda263b] {
    display: grid;
    grid-template-columns: 300px 1fr 280px;
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    background: var(--bg-app);
    gap: 10px;
    padding: 12px;
}

@media (min-width: 1201px) {
    .inbox-container:not(:has(.contact-details))[b-9nejda263b] {
        grid-template-columns: 300px 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   Left Panel — Conversation List
   ═══════════════════════════════════════════════════════════ */
.conversation-list[b-9nejda263b] {
    background: var(--bg-primary);
    border-right: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.list-header[b-9nejda263b] {
    padding: 20px 20px 16px;
    flex-shrink: 0;
}

.list-header .list-title[b-9nejda263b] {
    margin: 0 0 14px 0;
    line-height: 1.25;
    text-transform: none;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* Filter Tabs */
.filter-tabs[b-9nejda263b] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Hidden and Spam were icons alone, which most people could not read (QA, 2026-09-29). They now
   carry their names, and sit as a second set, drawn outlined because they are folders a chat is
   moved to rather than a read state. A set never splits, so a phone shows at most two rows. */
.filter-set[b-9nejda263b] { display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.filter-set--folders button svg[b-9nejda263b] { flex: none; }

/* Search */
.search-box[b-9nejda263b] {
    margin-top: 12px;
}

.search-input-wrapper[b-9nejda263b] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-9nejda263b] {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
    font-size: 16px;
}

.search-input-wrapper input[b-9nejda263b] {
    width: 100%;
    padding: 10px 32px 10px 36px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    outline: none;
    transition: all var(--transition-fast);
}

.search-input-wrapper input:focus[b-9nejda263b] {
    background: var(--bg-primary);
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.search-input-wrapper input[b-9nejda263b]::placeholder {
    color: var(--text-muted);
}

.clear-search[b-9nejda263b] {
    position: absolute;
    right: 8px;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
}

.clear-search:hover[b-9nejda263b] {
    background: var(--border-strong);
    color: var(--text-primary);
}

/* Conversation Items */
.conversations[b-9nejda263b] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
}

/* A newer chip's list is still loading: the rows shown belong to the previous chip. */
.conversations.is-switching[b-9nejda263b] { opacity: .55; transition: opacity 120ms ease-out; }

.conversation-item[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    border-radius: var(--radius-md);
    border-bottom: none;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    margin-bottom: 2px;
}

.conversation-item:hover[b-9nejda263b] {
    background: var(--bg-secondary);
}

.conversation-item.selected[b-9nejda263b] {
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-primary));
    box-shadow: inset 3px 0 0 var(--accent-primary);
}

.conversation-item.selected .conv-name[b-9nejda263b] {
    color: var(--text-primary);
    font-weight: 700;
}

.conversation-item.selected .conv-preview[b-9nejda263b] {
    color: var(--text-secondary);
    font-weight: 500;
}

.conversation-item.selected .page-name[b-9nejda263b],
.conversation-item.selected .conv-time[b-9nejda263b] {
    color: var(--text-secondary);
}

/* The row's main area is a button; it lays out exactly as the row used to. */
.conv-open[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.conv-open:focus-visible[b-9nejda263b] { outline-offset: 4px; }
.conversation-item.has-unread .conv-name[b-9nejda263b] { font-weight: 700; }
.conversation-item.has-unread .conv-preview[b-9nejda263b] { color: var(--text-secondary); }

/* Platform accent — subtle dot instead of border */
.conversation-item[b-9nejda263b]::before {
    display: none;
}

/* Avatar */
.avatar[b-9nejda263b] {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.avatar img[b-9nejda263b] {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex: none;
}

.avatar-fallback[b-9nejda263b] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    /* A customer without a photo: an indigo-tint disc, not bg-secondary, which on the list's
       white rows left only a floating initial between the two badges (2026-09-29). */
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-primary));
    color: var(--link);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.chat-header-avatar[b-9nejda263b] {
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex: none;
}

.message-avatar[b-9nejda263b] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex: none;
}

.message-avatar.fallback[b-9nejda263b] {
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-primary));
    color: var(--link);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.625rem;
}

.contact-avatar-fallback[b-9nejda263b] {
    width: 68px;
    height: 68px;
    font-size: 1.375rem;
    margin: 0 auto 12px auto;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Platform Badge — the channel's own logo on a white disc, so it reads on any avatar. */
.platform-badge[b-9nejda263b] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    color: #000;
    border: 2px solid var(--bg-primary);
}

.platform-badge[b-9nejda263b]  iconify-icon { width: 14px; height: 14px; }

/* AI Badge */
.ai-badge[b-9nejda263b] {
    position: absolute;
    top: -2px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--text-inverse);
    border: 2px solid var(--bg-primary);
    z-index: 2;
}

.ai-badge svg[b-9nejda263b] { flex-shrink: 0; }

/* Conversation Info */
.conv-info[b-9nejda263b] {
    flex: 1;
    min-width: 0;
}

.conv-name[b-9nejda263b] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-name[b-9nejda263b] {
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.conv-preview[b-9nejda263b] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

.conv-meta[b-9nejda263b] {
    text-align: right;
    flex-shrink: 0;
}

.conv-time[b-9nejda263b] {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.unread-badge[b-9nejda263b] {
    background: var(--accent-primary);
    color: var(--text-inverse);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    margin-top: 4px;
    display: inline-block;
    min-width: 18px;
    text-align: center;
}

/* Conv Actions */
.conv-actions[b-9nejda263b] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.conversation-item:hover .conv-actions[b-9nejda263b],
.conversation-item:focus-within .conv-actions[b-9nejda263b] { opacity: 1; }

/* No hover on a touchscreen: the actions used to sit invisible over the timestamp, so a tap there
   could hide or delete a chat nobody could see a button for. Show them, in the row. */
@media (hover: none) {
    .conv-actions[b-9nejda263b] { position: static; transform: none; opacity: 1; }
    .conv-action-btn[b-9nejda263b] { width: 36px; height: 36px; box-shadow: none; background: transparent; color: var(--text-muted); }
}

.conv-action-btn[b-9nejda263b] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
}

.conv-action-btn:hover[b-9nejda263b] { background: var(--bg-secondary); }
.conv-action-btn[b-9nejda263b] { color: var(--text-secondary); }
.conv-action-btn.delete:hover[b-9nejda263b] { background: var(--accent-red-bg); color: var(--accent-red); }
.conv-action-btn.spam:hover[b-9nejda263b] { background: var(--accent-amber-bg); color: var(--accent-amber); }
.conv-action-btn svg[b-9nejda263b] { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   Center Panel — Chat View
   ═══════════════════════════════════════════════════════════ */
.chat-panel[b-9nejda263b] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--bg-primary);
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.no-conversation[b-9nejda263b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 8px;
}

.no-conversation i[b-9nejda263b] { font-size: 48px; opacity: 0.3; }

/* Chat Header */
.chat-header[b-9nejda263b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-primary);
    flex-shrink: 0;
    z-index: 10;
    gap: 12px;
    min-height: 64px;
    box-sizing: border-box;
}

.contact-info[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.contact-info img[b-9nejda263b] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex: none;
}

.contact-name-container[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.contact-name[b-9nejda263b] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

/* A long name ends in "…" inside its own box. Text set straight in the flex row cannot: it was cut
   mid-letter and pushed the pencil out of the header, behind More (2026-09-30, 360 and 390 wide). */
.contact-name-text[b-9nejda263b] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-name .btn-edit-name[b-9nejda263b] { flex: none; }

.btn-edit-name[b-9nejda263b] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-fast);
}

.contact-name:hover .btn-edit-name[b-9nejda263b] { opacity: 1; }
.btn-edit-name:hover[b-9nejda263b] { color: var(--accent-primary); background: var(--accent-light); }

.edit-contact-name-input[b-9nejda263b] {
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: 0.9375rem;
    outline: none;
    font-family: var(--font-sans);
}

.btn-save-name[b-9nejda263b], .btn-cancel-name[b-9nejda263b] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.btn-save-name[b-9nejda263b] { color: var(--accent-primary); }
.btn-save-name:hover[b-9nejda263b] { background: var(--accent-light); }
.btn-cancel-name[b-9nejda263b] { color: var(--accent-red); }
.btn-cancel-name:hover[b-9nejda263b] { background: var(--accent-red-bg); }

.contact-platform[b-9nejda263b] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Chat Actions */
.chat-actions[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Messages ────────────────────────────────────────────── */
.messages-container[b-9nejda263b] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.message[b-9nejda263b] {
    max-width: 60%;
    padding: 10px 16px;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
}

.message.customer[b-9nejda263b] {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-primary);
    border-radius: 4px 1.25rem 1.25rem 1.25rem;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* A reply is the brand indigo in both themes (white text 6.3:1). It was near-black in light and
   indigo in dark, so the same conversation looked like two products (QA, 2026-09-29). */
.message.agent[b-9nejda263b],
.message.system[b-9nejda263b] {
    align-self: flex-end;
    background: var(--accent-solid);
    color: #fff;
    border-radius: 1.25rem 1.25rem 4px 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Dark theme (2026-09-29). A customer's words were #f5f5f4 on a near-white bubble (about 1.1:1);
   the bubble is now a raised surface. */
:root[data-theme="dark"] .message.customer[b-9nejda263b] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    box-shadow: none;
}
:root[data-theme="dark"] .message.agent[b-9nejda263b],
:root[data-theme="dark"] .message.system[b-9nejda263b] { box-shadow: none; }

.message-content[b-9nejda263b] {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Reply Preview */
.reply-preview-message[b-9nejda263b] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

/* Inside a reply, a quote is a darker inset: a lighter one left its name 3.8:1 and its text
   3.1:1 on indigo. Both are now above 4.5:1. */
.message.agent .reply-preview-message[b-9nejda263b],
.message.system .reply-preview-message[b-9nejda263b] {
    background: rgba(0, 0, 0, 0.2);
}

.reply-bar[b-9nejda263b] {
    width: 3px;
    background: var(--accent-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.message.agent .reply-bar[b-9nejda263b],
.message.system .reply-bar[b-9nejda263b] {
    background: rgba(255, 255, 255, 0.7);
}

.reply-content[b-9nejda263b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.reply-sender[b-9nejda263b] {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 0.6875rem;
}

.message.agent .reply-sender[b-9nejda263b],
.message.system .reply-sender[b-9nejda263b] {
    color: #fff;
}

.reply-text[b-9nejda263b] {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message.agent .reply-text[b-9nejda263b],
.message.system .reply-text[b-9nejda263b] {
    color: rgba(255, 255, 255, 0.88);
}

/* Media */
.message-media[b-9nejda263b] {
    max-width: min(100%, 72vw, 280px);
    max-height: 280px;
    object-fit: contain;
    border-radius: var(--radius-md);
    display: block;
    margin-bottom: 4px;
}

.message-audio[b-9nejda263b] { width: 100%; max-width: 240px; }

.message-file[b-9nejda263b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    font-size: 0.8125rem;
}

.message.agent .message-file[b-9nejda263b] { background: rgba(255, 255, 255, 0.12); }
.message-file:hover[b-9nejda263b] { background: rgba(0, 0, 0, 0.06); }

.message-link[b-9nejda263b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent-primary);
    text-decoration: underline;
    font-size: 0.8125rem;
    word-break: break-all;
}

.message.agent .message-link[b-9nejda263b] { color: rgba(255, 255, 255, 0.9); text-decoration: underline; }

.message-reel-caption[b-9nejda263b] {
    margin-top: 4px;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-location span[b-9nejda263b] {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
}

.message-time[b-9nejda263b] {
    font-size: 0.75rem;
    opacity: 1;
    margin-top: 4px;
}

/* Message Wrapper */
.message-wrapper[b-9nejda263b] {
    display: flex !important;
    align-items: flex-end;
    position: relative;
    width: 100%;
}

.message-wrapper[b-9nejda263b] { margin-top: 6px; }
.message-wrapper:first-child[b-9nejda263b] { margin-top: 0; }

.message-wrapper.customer + .message-wrapper.customer[b-9nejda263b] { margin-top: 3px; }
.message-wrapper.agent + .message-wrapper.agent[b-9nejda263b] { margin-top: 3px; }
.message-wrapper.system + .message-wrapper.system[b-9nejda263b] { margin-top: 3px; }
.message-wrapper.agent + .message-wrapper.system[b-9nejda263b] { margin-top: 3px; }
.message-wrapper.system + .message-wrapper.agent[b-9nejda263b] { margin-top: 3px; }
.message-wrapper.customer + .message-wrapper.agent[b-9nejda263b] { margin-top: 16px; }
.message-wrapper.agent + .message-wrapper.customer[b-9nejda263b] { margin-top: 16px; }

.message-wrapper.customer[b-9nejda263b] { justify-content: flex-start !important; flex-direction: row; }
.message-wrapper.agent[b-9nejda263b], .message-wrapper.system[b-9nejda263b] { justify-content: flex-end !important; flex-direction: row; }
.message-wrapper .message[b-9nejda263b] { align-self: auto !important; flex-shrink: 0; }

/* Message Actions */
.message-actions[b-9nejda263b] {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    align-items: center;
}

.message-wrapper.agent .message-actions[b-9nejda263b] { order: 1; }
.message-wrapper.agent .message-meta-external[b-9nejda263b] { order: 2; margin: 0 4px; }
.message-wrapper.agent .message[b-9nejda263b] { order: 3; }

.message-wrapper.customer .message-avatar[b-9nejda263b] { order: 1; margin-right: 6px; }
.message-wrapper.customer .message[b-9nejda263b] { order: 2; }
.message-wrapper.customer .message-meta-external[b-9nejda263b] { order: 3; margin: 0 4px; }
.message-wrapper.customer .message-actions[b-9nejda263b] { order: 4; }

.message-wrapper:hover .message-actions[b-9nejda263b] { opacity: 1; }

.action-btn[b-9nejda263b] {
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-md);
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.action-btn:hover[b-9nejda263b] {
    background: var(--bg-secondary);
}

.action-btn svg[b-9nejda263b] { width: 14px; height: 14px; color: var(--text-muted); }
.action-btn:hover svg[b-9nejda263b] { color: var(--text-primary); }

/* Message Reactions */
.message-reactions[b-9nejda263b] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.reaction-badge[b-9nejda263b] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    cursor: default;
}

.message.agent .reaction-badge[b-9nejda263b] { background: rgba(0, 0, 0, 0.2); color: #fff; }

/* ── Message Input — Floating Glass Bar ──────────────────── */
.message-input[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 16px;
    background: color-mix(in srgb, var(--bg-surface) 75%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-subtle);
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.message-input textarea[b-9nejda263b] {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    resize: none;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    min-height: 42px;
    max-height: 120px;
    line-height: 1.4;
    background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.message-input textarea:focus[b-9nejda263b] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

.message-input textarea[b-9nejda263b]::placeholder {
    color: var(--text-muted);
}

.attachment-picker-container[b-9nejda263b],
.emoji-picker-container[b-9nejda263b],
.quick-reply-container[b-9nejda263b],
.ai-suggest-container[b-9nejda263b] {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.send-btn[b-9nejda263b] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 42px;
    height: 42px;
    background: var(--accent-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.send-btn:hover:not(:disabled)[b-9nejda263b] {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.send-btn:disabled[b-9nejda263b] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
}

.send-btn.sending[b-9nejda263b] { background: var(--accent-hover); }
.send-btn svg[b-9nejda263b] { flex-shrink: 0; }

.send-spinner[b-9nejda263b] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-9nejda263b 0.8s linear infinite;
}

/* ── Tool Buttons ────────────────────────────────────────── */
.emoji-btn[b-9nejda263b],
.quick-reply-btn[b-9nejda263b],
.attachment-btn[b-9nejda263b] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-muted);
}

.emoji-btn:hover[b-9nejda263b], .quick-reply-btn:hover[b-9nejda263b], .attachment-btn:hover[b-9nejda263b] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.image-upload-btn[b-9nejda263b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
    border: none;
    color: var(--text-secondary);
}

.image-upload-btn:hover[b-9nejda263b] { background: var(--bg-tertiary); }

/* ── Emoji Picker ────────────────────────────────────────── */
.emoji-picker[b-9nejda263b] {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 320px;
    max-height: 360px;
    z-index: 1000;
    margin-bottom: 8px;
    animation: popIn-b-9nejda263b 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.emoji-tabs[b-9nejda263b] {
    display: flex;
    border-bottom: 1px solid var(--border-default);
    padding: 6px;
    gap: 2px;
    overflow-x: auto;
}

.emoji-tab[b-9nejda263b] {
    background: none;
    border: none;
    font-size: 18px;
    padding: 6px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.emoji-tab:hover[b-9nejda263b] { background: var(--bg-secondary); }
.emoji-tab.active[b-9nejda263b] { background: var(--accent-light); }

.emoji-grid[b-9nejda263b] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.emoji-item[b-9nejda263b] {
    background: none;
    border: none;
    font-size: 22px;
    padding: 6px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.1s;
}

.emoji-item:hover[b-9nejda263b] {
    background: var(--bg-secondary);
    transform: scale(1.2);
}

/* ── Quick Reply Picker ──────────────────────────────────── */
.quick-reply-picker[b-9nejda263b] {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 340px;
    max-height: 400px;
    z-index: 1000;
    margin-bottom: 8px;
    overflow: hidden;
    animation: popIn-b-9nejda263b 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quick-reply-header[b-9nejda263b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-default);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.quick-reply-actions[b-9nejda263b] { display: flex; gap: 8px; align-items: center; }

.quick-reply-header .add-btn[b-9nejda263b] {
    background: var(--accent-solid);
    color: var(--on-accent);
    border: none;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    flex: none;
}

.quick-reply-header .add-btn:hover[b-9nejda263b] { background: var(--accent-hover); }
.quick-reply-header .add-btn:disabled[b-9nejda263b] { background: var(--bg-tertiary); cursor: not-allowed; }

.quick-reply-header .close-btn[b-9nejda263b] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
}

.quick-reply-header .close-btn:hover[b-9nejda263b] { color: var(--text-primary); }

.quick-reply-form[b-9nejda263b] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-reply-form input[b-9nejda263b],
.quick-reply-form textarea[b-9nejda263b] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
}

.quick-reply-form .form-actions[b-9nejda263b] { display: flex; gap: 8px; justify-content: flex-end; }

.quick-reply-form .cancel-btn[b-9nejda263b] {
    padding: 6px 14px;
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    color: var(--text-secondary);
}

.quick-reply-form .save-btn[b-9nejda263b] {
    padding: 6px 14px;
    background: var(--accent-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
}

.quick-reply-form .save-btn:disabled[b-9nejda263b] { background: var(--bg-tertiary); cursor: not-allowed; }

.quick-reply-list[b-9nejda263b] {
    overflow-y: auto;
    max-height: 280px;
    padding: 8px;
}

.quick-reply-list .empty-state[b-9nejda263b] {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.quick-reply-item-container[b-9nejda263b] { display: flex; align-items: center; gap: 2px; }

.quick-reply-item[b-9nejda263b] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background var(--transition-fast);
    font-family: var(--font-sans);
}

.quick-reply-item:hover[b-9nejda263b] { background: var(--bg-secondary); }

.quick-reply-item .reply-content[b-9nejda263b] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.quick-reply-item .reply-title[b-9nejda263b] { font-weight: 600; font-size: 0.8125rem; color: var(--text-primary); }
.quick-reply-item .reply-preview[b-9nejda263b] { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reply-icon[b-9nejda263b] {
    font-size: 18px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.delete-reply-btn[b-9nejda263b] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.quick-reply-item-container:hover .delete-reply-btn[b-9nejda263b] { opacity: 1; }
.delete-reply-btn:hover[b-9nejda263b] { background: var(--accent-red-bg); color: var(--accent-red); }

/* ── Attachment Picker ───────────────────────────────────── */
.attachment-picker[b-9nejda263b] {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 6px;
    min-width: 160px;
    z-index: 100;
    margin-bottom: 8px;
    animation: popIn-b-9nejda263b 0.15s ease;
}

.attachment-option[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.attachment-option:hover[b-9nejda263b] { background: var(--bg-secondary); color: var(--text-primary); }
.attachment-icon[b-9nejda263b] { font-size: 18px; }

/* ── Attachment Preview ──────────────────────────────────── */
.attachment-preview-container[b-9nejda263b] {
    padding: 12px 20px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-default);
}

.attachment-preview-card[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.attachment-thumbnail[b-9nejda263b] {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.attachment-thumbnail img[b-9nejda263b] { width: 100%; height: 100%; object-fit: cover; }

.attachment-icon-wrapper[b-9nejda263b] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    color: var(--accent-primary);
}

.attachment-icon-wrapper.video[b-9nejda263b] { color: #DB2777; }
.attachment-icon-wrapper.audio[b-9nejda263b] { color: var(--accent-green); }
.attachment-icon-wrapper.file[b-9nejda263b] { color: var(--accent-primary); }
.attachment-icon-wrapper svg[b-9nejda263b] { width: 22px; height: 22px; }

.upload-overlay[b-9nejda263b] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-spinner[b-9nejda263b] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-9nejda263b 0.8s linear infinite;
}

.attachment-info[b-9nejda263b] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attachment-name[b-9nejda263b] { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attachment-meta[b-9nejda263b] { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--text-muted); }
.attachment-dot[b-9nejda263b] { color: var(--text-muted); }

.attachment-remove-btn[b-9nejda263b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--accent-red-bg);
    color: var(--accent-red);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.attachment-remove-btn:hover:not(:disabled)[b-9nejda263b] { background: rgba(255, 59, 48, 0.15); }
.attachment-remove-btn:disabled[b-9nejda263b] { opacity: 0.5; cursor: not-allowed; }

/* ── Reply Bar ───────────────────────────────────────────── */
.reply-bar-container[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--bg-primary);
    border-left: 3px solid var(--accent-primary);
    margin: 8px 20px 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.reply-bar-content[b-9nejda263b] { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reply-bar-label[b-9nejda263b] { font-size: 0.8125rem; font-weight: 600; color: var(--accent-primary); }
.reply-bar-preview[b-9nejda263b] { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reply-bar-cancel[b-9nejda263b] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.reply-bar-cancel:hover[b-9nejda263b] { color: var(--text-primary); }

/* ── Error Message ───────────────────────────────────────── */
.error-message[b-9nejda263b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--accent-red-bg);
    color: var(--accent-red);
    font-size: 0.8125rem;
    font-weight: 500;
}

.error-message button[b-9nejda263b] {
    background: none;
    border: none;
    color: var(--accent-red);
    cursor: pointer;
    padding: 2px;
}

/* ═══════════════════════════════════════════════════════════
   Right Panel — Contact Details
   ═══════════════════════════════════════════════════════════ */
.contact-panel[b-9nejda263b] {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    border-left: none;
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.contact-panel:empty[b-9nejda263b] {
    display: none;
}

.contact-details[b-9nejda263b] {
    display: flex;
    flex-direction: column;
    padding: 22px 16px 20px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    min-height: 100%;
    box-sizing: border-box;
    text-align: left;
}

.contact-details h3[b-9nejda263b] {
    margin: 0 0 6px 0;
    font-size: 1.0625rem;
    font-weight: 700;
    font-family: var(--font-display, var(--font-sans));
    color: var(--text-primary);
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.contact-avatar[b-9nejda263b] {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-full);
    margin: 0 auto 12px;
    object-fit: cover;
    flex: none;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.platform-tag[b-9nejda263b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 auto 16px;
}

.platform-tag[b-9nejda263b]  iconify-icon {
    flex-shrink: 0;
    color: var(--text-primary);
}

.contact-meta[b-9nejda263b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.contact-meta .field[b-9nejda263b] {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    margin-bottom: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contact-meta label[b-9nejda263b] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}

.contact-meta span[b-9nejda263b] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.loading[b-9nejda263b], .empty[b-9nejda263b] {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ── Image Preview ───────────────────────────────────────── */
.image-preview-container[b-9nejda263b] {
    padding: 10px 20px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    gap: 12px;
}

.image-preview[b-9nejda263b] { position: relative; display: inline-block; }

.image-preview img[b-9nejda263b] {
    max-width: 100px;
    max-height: 70px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.remove-image-btn[b-9nejda263b] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-red);
    color: white;
    border: 2px solid var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.image-filename[b-9nejda263b] {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ═══════════════════════════════════════════════════════════
   Sections (Labels, Outcome, Products, Quota, Notes)
   ═══════════════════════════════════════════════════════════ */
.inbox-section[b-9nejda263b], .note-section[b-9nejda263b], .assignment-section[b-9nejda263b] {
    margin-top: 8px;
    padding: 12px 14px;
    border-top: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.03));
    border-radius: var(--radius-lg);
    box-shadow: none;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
}

.inbox-section label[b-9nejda263b], .assignment-section label[b-9nejda263b], .note-section label[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
}

.inbox-section label svg[b-9nejda263b], .assignment-section label svg[b-9nejda263b] { flex-shrink: 0; }

/* Label Chips */
.label-chips[b-9nejda263b] { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.label-chip[b-9nejda263b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.chip-remove[b-9nejda263b] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    opacity: 0.5;
    padding: 0;
    color: inherit;
}

.chip-remove:hover[b-9nejda263b] { opacity: 1; }

.label-add-container[b-9nejda263b] { position: relative; }

.label-add-btn[b-9nejda263b] {
    background: none;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-full);
    padding: 3px 10px;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
}

.label-add-btn:hover[b-9nejda263b] { border-color: var(--accent-primary); color: var(--accent-primary); }

.label-dropdown[b-9nejda263b] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 180px;
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: 50;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
}

.label-option[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
    font-family: var(--font-sans);
}

.label-option:hover[b-9nejda263b] { background: var(--bg-secondary); }

.label-dot[b-9nejda263b] { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.label-empty[b-9nejda263b] { display: block; padding: 12px; font-size: 0.75rem; color: var(--text-muted); text-align: center; }

.label-option-row[b-9nejda263b] { display: flex; align-items: center; }
.label-option-row .label-option[b-9nejda263b] { flex: 1; }

.label-delete-btn[b-9nejda263b] {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
}

.label-delete-btn:hover[b-9nejda263b] { color: var(--accent-red); background: var(--accent-red-bg); }

.label-create-section[b-9nejda263b] { border-top: 1px solid var(--border-default); padding: 8px; margin-top: 4px; }
.label-create-row[b-9nejda263b] { display: flex; align-items: center; gap: 6px; }

.label-color-picker[b-9nejda263b] { width: 28px; height: 28px; border: none; border-radius: var(--radius-sm); cursor: pointer; padding: 0; background: none; }
.label-name-input[b-9nejda263b] { flex: 1; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 0.75rem; outline: none; min-width: 0; font-family: var(--font-sans); }
.label-name-input:focus[b-9nejda263b] { border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1); }

.label-create-btn[b-9nejda263b] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent-primary);
    color: var(--text-inverse);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.label-create-btn:hover:not(:disabled)[b-9nejda263b] { background: var(--accent-hover); }
.label-create-btn:disabled[b-9nejda263b] { background: var(--bg-tertiary); cursor: not-allowed; }

/* Outcome Select */
.outcome-select[b-9nejda263b] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    cursor: pointer;
    font-family: var(--font-sans);
    box-sizing: border-box;
    text-align: left;
}

.outcome-select:focus[b-9nejda263b] { border-color: var(--accent-primary); outline: none; box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1); }
.outcome-manage[b-9nejda263b] { position: relative; margin-top: 6px; }

/* Linked Products */
.linked-products[b-9nejda263b] { display: flex; flex-direction: column; gap: 6px; }

.linked-product-item[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.04));
    border-radius: var(--radius-md);
}

.linked-product-img[b-9nejda263b] { width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.linked-product-img.placeholder[b-9nejda263b] { display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); font-size: 14px; }
.linked-product-info[b-9nejda263b] { flex: 1; min-width: 0; }
.linked-product-name[b-9nejda263b] { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linked-product-price[b-9nejda263b] { font-size: 0.6875rem; color: var(--accent-primary); font-weight: 700; }

.product-dropdown[b-9nejda263b] { min-width: 220px; }
.product-search-input[b-9nejda263b] { width: 100%; padding: 8px 10px; border: none; border-bottom: 1px solid var(--border-default); font-size: 0.8125rem; outline: none; font-family: var(--font-sans); }
.product-option[b-9nejda263b] { justify-content: space-between; }
.product-option-name[b-9nejda263b] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-option-price[b-9nejda263b] { font-size: 0.75rem; color: var(--accent-primary); font-weight: 700; flex-shrink: 0; }

/* Mini Quota */
.mini-quota-bar[b-9nejda263b] { width: 100%; height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.mini-quota-fill[b-9nejda263b] { height: 100%; background: var(--accent-primary); border-radius: 2px; transition: width 0.4s ease; }
.mini-quota-text[b-9nejda263b] { font-size: 0.6875rem; color: var(--text-muted); }

/* Note Input */
.note-input[b-9nejda263b] {
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    resize: vertical;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
    text-align: left;
}

.note-input:focus[b-9nejda263b] { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1); }
.note-input[b-9nejda263b]::placeholder { color: var(--text-muted); }
.note-saved[b-9nejda263b] { display: inline-block; margin-top: 4px; font-size: 0.6875rem; color: var(--accent-green); }

/* ═══════════════════════════════════════════════════════════
   AI Bot Toggle
   ═══════════════════════════════════════════════════════════ */
.ai-toggle-container[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    margin-left: 4px;
    padding-left: 10px;
    border-left: 1px solid var(--border-default);
    box-sizing: border-box;
}

.ai-toggle-switch[b-9nejda263b] { position: relative; display: inline-flex; align-items: center; width: 36px; height: 20px; flex-shrink: 0; }
.ai-toggle-switch input[b-9nejda263b] { opacity: 0; width: 0; height: 0; }

.ai-toggle-slider[b-9nejda263b] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--bg-tertiary);
    border-radius: 20px;
    transition: 0.25s;
}

.ai-toggle-slider[b-9nejda263b]::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: var(--bg-surface);
    border-radius: 50%;
    transition: 0.25s;
    box-shadow: var(--shadow-sm);
}

.ai-toggle-switch input:checked + .ai-toggle-slider[b-9nejda263b] {
    background: var(--accent-primary);
}

.ai-toggle-switch input:checked + .ai-toggle-slider[b-9nejda263b]::before {
    transform: translateX(16px);
}

.ai-toggle-label[b-9nejda263b] {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: color 0.2s;
    font-size: 16px;
}

.ai-toggle-label.active[b-9nejda263b] { color: var(--accent-primary); }

/* ═══════════════════════════════════════════════════════════
   Assignment Controls
   ═══════════════════════════════════════════════════════════ */
.assignment-controls[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.assign-btn[b-9nejda263b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    box-sizing: border-box;
}

.assign-btn svg[b-9nejda263b] { flex-shrink: 0; }

.assign-btn.pick-up[b-9nejda263b] { border-color: var(--accent-primary); color: var(--accent-primary); }
.assign-btn.pick-up:hover[b-9nejda263b] { background: var(--accent-light); }
.assign-btn.release[b-9nejda263b] { border-color: var(--accent-amber); color: var(--accent-amber); }
.assign-btn.release:hover[b-9nejda263b] { background: var(--accent-amber-bg); }
.assign-btn.take-control:hover[b-9nejda263b] { background: var(--bg-secondary); }
.assign-btn.assign:hover[b-9nejda263b] { background: var(--bg-secondary); }

.assigned-to-me[b-9nejda263b], .assigned-to-other[b-9nejda263b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    box-sizing: border-box;
    white-space: nowrap;
}

.assigned-to-me[b-9nejda263b] { color: var(--accent-green); background: var(--accent-green-bg); }
.assigned-to-other[b-9nejda263b] { color: var(--text-muted); background: var(--bg-secondary); }

/* Assignment Dropdown */
.assign-dropdown-container[b-9nejda263b] { position: relative; }

.assign-dropdown[b-9nejda263b] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 100;
    overflow: hidden;
    animation: popIn-b-9nejda263b 0.15s ease;
}

.assign-option[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    transition: background var(--transition-fast);
    text-align: left;
    font-family: var(--font-sans);
}

.assign-option:hover[b-9nejda263b] { background: var(--bg-secondary); }

.assign-avatar[b-9nejda263b] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.assign-role[b-9nejda263b] { font-size: 0.6875rem; color: var(--text-muted); margin-left: auto; }

.assigned-info[b-9nejda263b] { display: flex; flex-direction: column; gap: 2px; }
.assigned-name[b-9nejda263b] { font-weight: 600; color: var(--text-primary); font-size: 0.875rem; }
.assigned-status[b-9nejda263b] { font-size: 0.75rem; color: var(--accent-green); }
.unassigned-text[b-9nejda263b] { font-size: 0.8125rem; color: var(--text-muted); font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   AI Features
   ═══════════════════════════════════════════════════════════ */

.ai-summary-bar[b-9nejda263b] {
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-primary);
}

.summary-toggle[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: var(--font-sans);
}

.summary-toggle:hover[b-9nejda263b] { background: var(--bg-secondary); }

.summary-spinner[b-9nejda263b] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-9nejda263b 0.8s linear infinite;
}

.summary-content[b-9nejda263b] {
    padding: 10px 20px 14px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.summary-content.error[b-9nejda263b] { color: var(--accent-red); }

.ai-suggest-btn[b-9nejda263b] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-muted);
}

.ai-suggest-btn:hover:not(:disabled)[b-9nejda263b] { background: var(--bg-secondary); color: var(--accent-primary); }
.ai-suggest-btn:disabled[b-9nejda263b] { opacity: 0.4; cursor: not-allowed; }
.ai-suggest-btn.generating[b-9nejda263b] { background: var(--accent-light); color: var(--accent-primary); }

.ai-suggestion-box[b-9nejda263b] {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 8px;
    box-shadow: var(--shadow-md);
    animation: popIn-b-9nejda263b 0.2s ease;
}

.ai-suggestion-header[b-9nejda263b] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }

.ai-label[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-dismiss[b-9nejda263b] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
}

.ai-dismiss:hover[b-9nejda263b] { color: var(--accent-red); }

.ai-suggestion-text[b-9nejda263b] { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; margin-bottom: 8px; }
.ai-suggestion-actions[b-9nejda263b] { display: flex; gap: 6px; }
.ai-suggestion-image[b-9nejda263b] { margin: 0 0 8px; padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.ai-suggestion-image img[b-9nejda263b] { display: block; max-width: 100%; max-height: 150px; margin: 0 auto; object-fit: contain; border-radius: var(--radius-sm); }
.ai-suggestion-image figcaption[b-9nejda263b] { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: var(--text-xs); color: var(--text-secondary); }

.ai-accept-btn[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--accent-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
}

.ai-accept-btn:hover[b-9nejda263b] { background: var(--accent-hover); }

.ai-row[b-9nejda263b] { display: flex; align-items: flex-end; gap: 6px; width: 100%; }
.ai-row textarea[b-9nejda263b] { flex: 1; }

/* AI Typing */
.ai-typing-indicator[b-9nejda263b] { margin-top: 8px; }

.ai-typing[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.ai-sparkle[b-9nejda263b] { font-size: 14px; animation: pulse-sparkle-b-9nejda263b 1.5s infinite ease-in-out; color: var(--accent-primary); }
.ai-typing-text[b-9nejda263b] { color: var(--text-secondary); font-weight: 600; }

.typing-dots span[b-9nejda263b] { font-weight: bold; color: var(--text-muted); animation: blink-b-9nejda263b 1.4s infinite both; }
.typing-dots span:nth-child(2)[b-9nejda263b] { animation-delay: 0.2s; }
.typing-dots span:nth-child(3)[b-9nejda263b] { animation-delay: 0.4s; }

.ai-typing-footer[b-9nejda263b] { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }

/* The typing line sits in an indigo reply bubble: grey text there was 2.3:1 (light) and 3.6:1 (dark). */
.message.agent .ai-typing-text[b-9nejda263b], .message.agent .ai-sparkle[b-9nejda263b], .message.agent .typing-dots span[b-9nejda263b] { color: var(--bg-surface); }

/* Customer Typing */
.typing-bubble[b-9nejda263b] { display: flex; gap: 6px; align-items: center; padding: 12px 20px; }
.typing-dot[b-9nejda263b] { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: blink-b-9nejda263b 1.4s infinite both; }
.typing-dot:nth-child(2)[b-9nejda263b] { animation-delay: 0.2s; }
.typing-dot:nth-child(3)[b-9nejda263b] { animation-delay: 0.4s; }
.typing-name[b-9nejda263b] { font-size: 0.75rem; color: var(--text-muted); margin-right: 8px; }

/* Viewer Badges */
.viewer-badges[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--accent-light);
    border-bottom: 1px solid var(--border-default);
    font-size: 0.75rem;
    color: var(--accent-primary);
}

.viewer-label[b-9nejda263b] { font-weight: 600; }

.viewer-tag[b-9nejda263b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
}

.viewer-name[b-9nejda263b] { font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   Banners
   ═══════════════════════════════════════════════════════════ */
.disconnected-banner[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--accent-amber-bg);
    border-top: 1px solid var(--border-default);
}

.disconnected-icon[b-9nejda263b] { font-size: 22px; flex-shrink: 0; color: var(--accent-amber); }
.disconnected-text strong[b-9nejda263b] { display: block; font-size: 0.875rem; color: var(--accent-amber); margin-bottom: 2px; }
.disconnected-text p[b-9nejda263b] { margin: 0; font-size: 0.8125rem; color: var(--accent-amber); }
.disconnected-text a[b-9nejda263b] { color: var(--accent-primary); text-decoration: underline; font-weight: 600; }

.lock-banner[b-9nejda263b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--accent-amber-bg);
    border-top: 1px solid var(--border-default);
    color: var(--accent-amber);
}

.lock-banner.assigned-lock[b-9nejda263b] { background: var(--accent-light); color: var(--accent-primary); }
.lock-icon[b-9nejda263b] { font-size: 20px; flex-shrink: 0; }
.lock-text strong[b-9nejda263b] { display: block; font-size: 0.8125rem; margin-bottom: 2px; }
.lock-text p[b-9nejda263b] { font-size: 0.75rem; margin: 0; opacity: 0.8; }

/* Toasts */
.sending-toast[b-9nejda263b] {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    animation: toastSlideUp-b-9nejda263b 0.25s ease-out;
}

.hide-toast[b-9nejda263b] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--text-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    box-shadow: var(--shadow-xl);
    z-index: 9999;
    animation: toastSlideUp-b-9nejda263b 0.25s ease-out;
}

.undo-btn[b-9nejda263b] {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

/* Confirm Dialog */
.confirm-overlay[b-9nejda263b] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-9nejda263b 0.15s ease-out;
}

.confirm-dialog[b-9nejda263b] {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 28px 24px 24px;
    max-width: 360px;
    width: 90%;
    box-shadow: var(--shadow-xl);
    text-align: center;
    animation: dialogSlideUp-b-9nejda263b 0.2s ease-out;
}

.confirm-dialog p:first-child[b-9nejda263b] { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px 0; }
.confirm-name[b-9nejda263b] { color: var(--text-muted); font-size: 0.875rem; margin: 0 0 20px 0; }
.confirm-actions[b-9nejda263b] { display: flex; gap: 10px; }

.confirm-cancel[b-9nejda263b] {
    flex: 1;
    padding: 10px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.confirm-cancel:hover[b-9nejda263b] { background: var(--bg-tertiary); }

.confirm-delete[b-9nejda263b] {
    flex: 1;
    padding: 10px;
    border: none;
    background: var(--accent-red);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.confirm-delete:hover[b-9nejda263b] { background: #E63329; }

/* ═══════════════════════════════════════════════════════════
   Skeleton Loading
   ═══════════════════════════════════════════════════════════ */
.skeleton-item[b-9nejda263b] { pointer-events: none; }

.skeleton-circle[b-9nejda263b] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-surface) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-9nejda263b 1.5s infinite;
}

.skeleton-line[b-9nejda263b] {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-surface) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-9nejda263b 1.5s infinite;
}

.skeleton-name[b-9nejda263b] { width: 65%; height: 14px; margin-bottom: 6px; }
.skeleton-page[b-9nejda263b] { width: 45%; height: 10px; margin-bottom: 6px; }
.skeleton-preview[b-9nejda263b] { width: 85%; height: 12px; }
.skeleton-time[b-9nejda263b] { width: 40px; height: 10px; margin-left: auto; }

/* Load More */
.load-more-btn[b-9nejda263b] {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-default) !important;
    padding: 6px 16px !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    transition: all var(--transition-fast);
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    box-shadow: var(--shadow-sm) !important;
}

.load-more-btn:hover[b-9nejda263b] { background: var(--bg-secondary) !important; }

/* Fullscreen Image */
.fullscreen-overlay[b-9nejda263b] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fullscreen-overlay img[b-9nejda263b] {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

/* Message Custom Preview */
.message-custom-preview[b-9nejda263b] {
    background: var(--bg-secondary) !important;
    border-left: 3px solid var(--accent-primary) !important;
    padding: 10px 14px !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════════════ */
@keyframes spin-b-9nejda263b { to { transform: rotate(360deg); } }
@keyframes fadeIn-b-9nejda263b { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn-b-9nejda263b { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes dialogSlideUp-b-9nejda263b { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastSlideUp-b-9nejda263b { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes shimmer-b-9nejda263b { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes blink-b-9nejda263b { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } }
@keyframes pulse-sparkle-b-9nejda263b { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }

/* ═══════════════════════════════════════════════════════════
   Responsive — Tablet
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1279.98px) {
    .inbox-container[b-9nejda263b] { grid-template-columns: 280px 1fr; padding: 12px; gap: 10px; }
    .contact-panel[b-9nejda263b] { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Responsive — Mobile (App-like)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .inbox-container[b-9nejda263b] {
        grid-template-columns: 1fr;
        height: calc(100vh - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px));
        height: calc(100dvh - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px));
        padding: 0;
        gap: 0;
    }

    /* — Full-screen panels, no floating — */
    .conversation-list[b-9nejda263b] {
        display: flex;
        border-radius: 0;
        box-shadow: none;
    }
    .chat-panel[b-9nejda263b] {
        display: none;
        border-radius: 0;
        box-shadow: none;
    }
    .contact-panel[b-9nejda263b] { display: none; }

    /* — Mobile chat active state — */
    .inbox-container.mobile-chat-active .conversation-list[b-9nejda263b] { display: none; }
    .inbox-container.mobile-chat-active .chat-panel[b-9nejda263b] { display: flex; }
    .inbox-container.mobile-chat-active[b-9nejda263b] {
        /* When chat is active, bottom nav is hidden via body:has, so restore full height */
        height: 100vh;
        height: 100dvh;
    }

    /* — List header — */
    .list-header[b-9nejda263b] {
        padding: 16px 16px 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .list-header .list-title[b-9nejda263b] {
        font-size: 1.25rem;
        margin-bottom: 10px;
    }

    /* — Conversation items — */
    .conversations[b-9nejda263b] { padding: 0; }
    .conversation-item[b-9nejda263b] {
        padding: 14px 16px;
        border-radius: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        margin-bottom: 0;
    }
    .conversation-item:last-child[b-9nejda263b] { border-bottom: none; }
    .conversation-item.selected[b-9nejda263b] { background: var(--bg-secondary); }

    /* — Filter tabs — */
    .filter-tabs[b-9nejda263b] { gap: 6px; }
    .filter-tabs button[b-9nejda263b] { padding: 6px 12px; font-size: 0.75rem; }

    /* — Chat header — app bar style — */
    .chat-header[b-9nejda263b] {
        padding: 10px 12px;
        background: var(--bg-primary);
        backdrop-filter: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .contact-info img[b-9nejda263b] { width: 32px; height: 32px; }
    .contact-name[b-9nejda263b] { font-size: 0.875rem; }

    /* — Chat actions compact — */
    .chat-actions[b-9nejda263b] { gap: 4px; }
    .chat-actions .assignment-controls[b-9nejda263b] { gap: 4px; }

    /* Hide text inside assign buttons to save space on mobile */
    .chat-actions .assign-btn[b-9nejda263b] {
        padding: 6px;
        font-size: 0; /* hides text */
    }
    .chat-actions .assign-btn svg[b-9nejda263b] {
        margin: 0;
    }
    .chat-actions .assigned-to-other[b-9nejda263b],
    .chat-actions .assigned-to-me[b-9nejda263b] {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    /* Hide AI toggle on mobile to save space (use settings instead) */
    .chat-actions .ai-toggle-container[b-9nejda263b] { display: none !important; }

    /* — Back button visible & tappable — */
    .btn-back-mobile[b-9nejda263b] {
        display: flex !important;
        width: 36px;
        height: 36px;
    }

    /* — Messages area — */
    .messages-container[b-9nejda263b] { padding: 12px 16px; }
    .message[b-9nejda263b] { max-width: 82%; }

    /* — Input bar — edge-to-edge — */
    .message-input[b-9nejda263b] {
        padding: 10px 12px;
        /* Since bottom nav is hidden in chat, we MUST add safe-area padding back to input bar */
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
        gap: 6px;
        background: var(--bg-primary);
        backdrop-filter: none;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 0;
    }
    .message-input textarea[b-9nejda263b] {
        padding: 10px 14px;
        font-size: 16px;
        min-height: var(--touch-min, 44px);
        background: var(--bg-secondary);
        border: none;
        box-shadow: none;
    }
    .message-input textarea:focus[b-9nejda263b] {
        box-shadow: none;
        background: var(--bg-secondary);
    }
    .send-btn[b-9nejda263b] { width: 40px; height: 40px; }
    .image-upload-btn[b-9nejda263b] { width: 40px; height: 40px; }

    /* — Emoji picker — */
    .emoji-picker[b-9nejda263b] { width: calc(100vw - 24px); max-width: 320px; left: auto; right: 0; }
    .emoji-grid[b-9nejda263b] { grid-template-columns: repeat(7, 1fr); }
    .quick-reply-picker[b-9nejda263b] { width: calc(100vw - 24px); max-width: 320px; }
    .attachment-picker[b-9nejda263b] { min-width: 160px; }

    /* — Message actions — */
    .message-actions[b-9nejda263b] { opacity: 0.6; }
}

/* Back button */
.btn-back-mobile[b-9nejda263b] {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    flex-shrink: 0;
    margin-right: 4px;
}

.btn-back-mobile:hover[b-9nejda263b] { background: var(--bg-secondary); }

@media (max-width: 380px) {
    .conversation-item[b-9nejda263b] { padding: 12px; }
    .avatar[b-9nejda263b], .avatar-fallback[b-9nejda263b] { width: 40px; height: 40px; }
    .emoji-grid[b-9nejda263b] { grid-template-columns: repeat(6, 1fr); }
    .send-btn[b-9nejda263b] { width: 38px; height: 38px; }
}

.ai-toggle-switch.disabled[b-9nejda263b] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.ai-toggle-switch.disabled input[b-9nejda263b] { cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   Phone and tablet, increment 2 (2026-09-28)
   One pane up to 1024px (an iPad in portrait left the chat 250px wide); the phone
   frame (bottom tabs, full bleed) only where MainLayout shows the tabs: up to 640px.
   ═══════════════════════════════════════════════════════════ */

/* Line breaks typed by customers and agents show as typed. */
.message-content[b-9nejda263b] { white-space: pre-wrap; }

/* Hover quick actions where there is hover; touch gets one visible "more" menu. */
.conv-more[b-9nejda263b] { display: none; flex-shrink: 0; }
@media (hover: none) {
    .conv-actions[b-9nejda263b] { display: none !important; }
    .conv-more[b-9nejda263b] { display: block; }
}
.conv-more-btn[b-9nejda263b] {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-right: -8px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
}
.conv-more[open] > .conv-more-btn[b-9nejda263b], .conv-more-btn:hover[b-9nejda263b] { background: var(--bg-secondary); color: var(--text-primary); }
.conv-more-menu[b-9nejda263b] {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
    min-width: 200px; padding: 6px;
    display: flex; flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
}
.conv-more-menu button[b-9nejda263b] {
    display: flex; align-items: center; gap: 10px;
    min-height: var(--touch-min, 44px); padding: 0 12px;
    border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-primary);
    font: 500 0.9375rem/1.2 var(--font-sans); text-align: left; cursor: pointer;
}
.conv-more-menu button:hover[b-9nejda263b], .conv-more-menu button:focus-visible[b-9nejda263b] { background: var(--bg-secondary); }
.conv-more-menu button.danger[b-9nejda263b] { color: var(--accent-red); }

/* Scrolling lists keep the scroll to themselves (no rubber-banding the whole app). */
.conversations[b-9nejda263b], .messages-container[b-9nejda263b], .contact-panel[b-9nejda263b], .quick-reply-list[b-9nejda263b], .emoji-grid[b-9nejda263b] { overscroll-behavior: contain; }

/* ── Composer ── */
/* Only phones fold the tools (the phone block below shows it). */
.compose-tools-toggle[b-9nejda263b] { display: none; }
.message-input[b-9nejda263b] { position: relative; flex-wrap: wrap; }
.message-input textarea[b-9nejda263b] { max-height: 160px; overflow-y: hidden; }
/* A phone on its side is ~390px tall: a 160px reply left one message in view. The text scrolls
   inside instead (Inbox.razor.js reads this max-height). */
@media (max-height: 500px) and (orientation: landscape) {
    .message-input textarea[b-9nejda263b] { max-height: 96px; }
}

.emoji-picker[b-9nejda263b], .quick-reply-picker[b-9nejda263b], .attachment-picker[b-9nejda263b] { z-index: 1001; }

/* The AI draft sits on its own full-width row above the composer instead of squeezing it. */
.ai-suggestion-card[b-9nejda263b] {
    order: -1;
    flex: 1 0 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.ai-suggestion-card.generating[b-9nejda263b] { color: var(--text-secondary); }
.ai-suggestion-label[b-9nejda263b] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.75rem; font-weight: 700; color: var(--link);
}
.ai-suggestion-dismiss[b-9nejda263b] {
    display: grid; place-items: center; width: 36px; height: 36px; margin: -8px -8px -8px 0;
    border: 0; border-radius: var(--radius-full); background: none; color: var(--text-muted); cursor: pointer;
}
.ai-suggestion-dismiss:hover[b-9nejda263b] { background: var(--bg-secondary); color: var(--text-primary); }
.ai-suggestion-card .ai-accept-btn[b-9nejda263b] {
    min-height: var(--touch-min, 44px); padding: 0 14px;
    border: 0; border-radius: var(--radius-full);
    background: var(--accent-solid); color: var(--on-accent);
    font: 600 0.8125rem var(--font-sans); cursor: pointer;
}

/* New messages while reading history: a pill instead of a jump. */
.new-messages-pill[b-9nejda263b] {
    position: relative; z-index: 20;
    align-self: center;
    margin: -52px 0 8px;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--touch-min, 44px); padding: 0 16px;
    border: 0; border-radius: var(--radius-full);
    background: var(--accent-solid); color: var(--on-accent);
    font: 600 0.8125rem var(--font-sans);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

/* Upload progress */
.upload-progress[b-9nejda263b] { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--bg-secondary); overflow: hidden; }
.upload-progress-bar[b-9nejda263b] { height: 100%; background: var(--accent-solid); transition: width 0.2s ease; }
.upload-progress-bar.indeterminate[b-9nejda263b] { width: 40% !important; animation: cm-indeterminate-b-9nejda263b 1.1s ease-in-out infinite; }
.upload-progress-text[b-9nejda263b] { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--text-secondary); }
@keyframes cm-indeterminate-b-9nejda263b { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ── Chat header controls ── */
.ai-toggle-short[b-9nejda263b] { display: none; }
.contact-info-btn[b-9nejda263b] {
    display: none; place-items: center;
    width: 44px; height: 44px; flex-shrink: 0;
    border: 0; border-radius: var(--radius-full);
    background: none; color: var(--text-secondary); cursor: pointer;
}
.contact-info-btn:hover[b-9nejda263b] { background: var(--bg-secondary); color: var(--text-primary); }
.contact-sheet-head[b-9nejda263b], .contact-sheet-backdrop[b-9nejda263b] { display: none; }

/* Contact details become a sheet where the side column does not fit. */
@media (max-width: 1279.98px) {
    .contact-info-btn[b-9nejda263b] { display: inline-grid; }
    .inbox-container.contact-sheet-open .contact-panel[b-9nejda263b] {
        display: flex;
        position: fixed; z-index: 1200;
        top: 0; right: 0; bottom: 0;
        width: min(420px, 100vw);
        padding: calc(8px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-app);
        border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
        box-shadow: var(--shadow-xl);
        overflow-y: auto;
        animation: cm-sheet-in-b-9nejda263b 0.2s ease-out;
    }
    .inbox-container.contact-sheet-open .contact-sheet-backdrop[b-9nejda263b] {
        display: block; position: fixed; inset: 0; z-index: 1150; background: var(--overlay);
    }
    html.cm-kb-open .inbox-container.contact-sheet-open .contact-panel[b-9nejda263b] {
        bottom: auto;
        height: var(--cm-vvh, 100dvh);
    }
    .inbox-container.contact-sheet-open .contact-sheet-head[b-9nejda263b] {
        display: flex; align-items: center; justify-content: space-between;
        padding: 4px 0 4px 8px; font-size: 1rem;
    }
    .contact-sheet-close[b-9nejda263b] {
        display: grid; place-items: center; width: 44px; height: 44px;
        border: 0; border-radius: var(--radius-full); background: none; color: var(--text-secondary); cursor: pointer;
    }
    .contact-sheet-close:hover[b-9nejda263b] { background: var(--bg-secondary); color: var(--text-primary); }
}
@keyframes cm-sheet-in-b-9nejda263b { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 1024px) {
    /* The per-chat AI switch stays reachable: a compact "AI" switch. */
    .chat-actions .ai-toggle-container[b-9nejda263b] { display: flex !important; gap: 6px; padding: 0 4px; }
    .ai-provider-badge[b-9nejda263b], .ai-toggle-icon[b-9nejda263b] { display: none; }
    .ai-toggle-short[b-9nejda263b] { display: inline; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
    .btn-back-mobile[b-9nejda263b] { width: 44px; height: 44px; margin-left: -6px; }
    .chat-actions .assign-btn[b-9nejda263b],
    .chat-actions-inline .assign-btn[b-9nejda263b] { min-width: 40px; min-height: var(--touch-min, 44px); justify-content: center; }
    .chat-header[b-9nejda263b] { gap: 8px; }
    .contact-info[b-9nejda263b] { flex: 1; }
}

/* Tablets and landscape phones (sidebar showing, no bottom tabs): one pane with the usual gutter. */
@media (min-width: 641px) and (max-width: 1024px) {
    .inbox-container[b-9nejda263b],
    .inbox-container.mobile-chat-active[b-9nejda263b] {
        height: calc(100dvh - 24px - var(--cm-safe-top, 0px));
        padding: 12px;
    }
    html.cm-kb-open.cm-composer-kb-open .inbox-container[b-9nejda263b] {
        height: calc(var(--cm-vvh, 100dvh) - 24px - var(--cm-safe-top, 0px));
    }
    html.cm-kb-open:not(.cm-composer-kb-open) .inbox-container[b-9nejda263b] {
        height: calc(var(--cm-vvh, 100dvh) - var(--cm-safe-top, 0px));
        padding: 0;
    }
    html.cm-kb-open:not(.cm-composer-kb-open) .chat-panel[b-9nejda263b] {
        overflow-y: auto;
    }
    .conversation-list[b-9nejda263b], .chat-panel[b-9nejda263b] { border-radius: var(--radius-xl); }
}

/* Phones */
@media (max-width: 640.98px) {
    .inbox-container[b-9nejda263b] {
        height: calc(100dvh - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px) - var(--cm-safe-top, 0px));
    }
    /* With the keyboard up, iOS keeps the layout viewport full height: follow the visible part
       (--cm-vvh, set by chatmai-ui.js) so the header and composer stay on screen. */
    .inbox-container.mobile-chat-active[b-9nejda263b],
    html.cm-kb-open .inbox-container[b-9nejda263b] {
        height: calc(var(--cm-vvh, 100dvh) - var(--cm-safe-top, 0px));
    }
    /* The list title leaves room for the notification bell in the corner. */
    .list-header .list-title[b-9nejda263b] { min-height: var(--touch-min, 44px); display: flex; align-items: center; padding-right: 56px; margin-bottom: 8px; }
    .filter-tabs button[b-9nejda263b] { min-height: var(--touch-min, 44px); }

    /* Composer: phones have an emoji keyboard, so the picker button gives its room to the text. */
    .message-input[b-9nejda263b] { padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px)); gap: 4px; }
    /* With the keyboard up the home indicator is covered, but iOS still reports its 34px inset, which
       left a blank strip between the composer and the keyboard (iPhone, 2026-09-29). */
    html.cm-kb-open .message-input[b-9nejda263b] { padding-bottom: 8px; }
    .message-input .emoji-picker-container[b-9nejda263b] { display: none; }
    .attachment-btn[b-9nejda263b], .quick-reply-btn[b-9nejda263b], .ai-suggest-btn[b-9nejda263b], .send-btn[b-9nejda263b] { width: 44px; height: 44px; }
    .message-input textarea[b-9nejda263b] { min-width: 150px; min-height: var(--touch-min, 44px); }
    /* Three tool buttons left the reply about 150px at 360 wide, a dozen Thai characters a line.
       Once there is text they fold behind one + button (Inbox.razor), and the reply gets ~250px. */
    .message-input.tools-folded .attachment-picker-container[b-9nejda263b],
    .message-input.tools-folded .quick-reply-container[b-9nejda263b],
    .message-input.tools-folded .ai-suggest-container[b-9nejda263b] { display: none; }
    .compose-tools-toggle[b-9nejda263b] {
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 44px; height: 44px; padding: 0; line-height: 0; border: none; border-radius: var(--radius-full);
        background: transparent; color: var(--text-secondary); cursor: pointer;
    }
    .compose-tools-toggle iconify-icon[b-9nejda263b] { display: block; }
    .compose-tools-toggle:active[b-9nejda263b] { background: var(--bg-hover); }
    .compose-tools-toggle:focus-visible[b-9nejda263b] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

    /* Pickers open as a panel across the screen, never off its edge. */
    .emoji-picker[b-9nejda263b], .quick-reply-picker[b-9nejda263b], .attachment-picker[b-9nejda263b] {
        position: fixed;
        left: 8px; right: 8px;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        width: auto; max-width: none; min-width: 0;
        max-height: min(60dvh, 420px);
        overflow-y: auto;
        margin: 0;
    }
    .attachment-option[b-9nejda263b] { min-height: 48px; }
}

/* A long bubble shrinks instead of pushing its time and reply button off the screen. */
.message-wrapper .message[b-9nejda263b] { flex-shrink: 1; min-width: 0; }
.message-wrapper .message-meta-external[b-9nejda263b], .message-wrapper .message-actions[b-9nejda263b], .message-wrapper .message-avatar[b-9nejda263b] { flex-shrink: 0; }

@media (max-width: 640.98px) {
    /* The header keeps the name readable: the list already shows the avatar. */
    .chat-header .contact-info > img[b-9nejda263b],
    .chat-header .contact-info > .chat-header-avatar[b-9nejda263b] { display: none !important; }
    .contact-info[b-9nejda263b] { gap: 4px; min-width: 0; }
    .contact-info > div[b-9nejda263b] { min-width: 0; }
    /* Visible, not hidden: the source popover opens out of this row. The text inside ellipsizes. */
    .contact-platform[b-9nejda263b] { white-space: nowrap; overflow: visible; }
    .chat-actions[b-9nejda263b] { gap: 2px; }
    .chat-actions .ai-toggle-container[b-9nejda263b] { padding: 0 2px; border-left: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════
   Chat header, increment 3 (2026-09-28): labelled actions on wide screens,
   one "More actions" menu on phones and tablets, the owner shown under the name,
   and the AI state said in words when a person has the chat.
   ═══════════════════════════════════════════════════════════ */
.chat-header[b-9nejda263b] { background: var(--bg-primary); border-bottom-color: var(--border-default); backdrop-filter: none; -webkit-backdrop-filter: none; gap: 12px; }
.chat-actions-inline[b-9nejda263b] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chat-actions-inline .assign-btn[b-9nejda263b] { min-height: 34px; }
details.assign-dropdown-container > summary[b-9nejda263b] { list-style: none; }
details.assign-dropdown-container > summary[b-9nejda263b]::-webkit-details-marker { display: none; }
details.assign-dropdown-container[open] > summary[b-9nejda263b] { background: var(--bg-secondary); color: var(--text-primary); }
.assign-dropdown[b-9nejda263b] { max-height: min(60dvh, 360px); overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.assign-option[b-9nejda263b] { border-radius: var(--radius-sm); min-height: var(--touch-min, 44px); }
.assign-option:focus-visible[b-9nejda263b] { background: var(--bg-secondary); outline-offset: -2px; }
.assign-name[b-9nejda263b] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-empty[b-9nejda263b] { display: block; padding: 10px 14px; font-size: 0.8125rem; color: var(--text-muted); }

.contact-platform[b-9nejda263b] { display: flex; align-items: center; gap: 6px; min-width: 0; }
.contact-platform-via[b-9nejda263b] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-owner-chip[b-9nejda263b] {
    display: none; flex: none; align-items: center;
    padding: 1px 8px; border-radius: var(--radius-full);
    font-size: 0.6875rem; font-weight: 600; line-height: 1.6; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* The owner matters more than the page name: the "via" text gives way first. */
.contact-platform-via[b-9nejda263b] { flex: 0 1 auto; }
.chat-owner-chip.is-open[b-9nejda263b] { background: var(--bg-secondary); color: var(--text-secondary); }
.chat-owner-chip.is-mine[b-9nejda263b] { background: var(--accent-green-bg); color: var(--accent-green-text); }
.chat-owner-chip.is-other[b-9nejda263b] { background: var(--accent-blue-bg); color: var(--accent-blue-text); }

.chat-more[b-9nejda263b] { display: none; position: relative; flex: none; }
.chat-more > summary[b-9nejda263b] { list-style: none; }
.chat-more > summary[b-9nejda263b]::-webkit-details-marker { display: none; }
.chat-more-btn[b-9nejda263b] {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--radius-full); color: var(--text-secondary); cursor: pointer;
}
.chat-more[open] > .chat-more-btn[b-9nejda263b], .chat-more-btn:hover[b-9nejda263b] { background: var(--bg-secondary); color: var(--text-primary); }
.chat-more-menu[b-9nejda263b] {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
    width: max-content; min-width: 240px; max-width: calc(100vw - 16px);
    max-height: calc(var(--cm-vvh, 100dvh) - 140px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; display: flex; flex-direction: column;
    background: var(--bg-elevated); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); box-shadow: var(--shadow-xl);
}
.chat-more-menu > button[b-9nejda263b], .chat-more-menu .assign-option[b-9nejda263b] {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: var(--touch-min, 44px); padding: 0 12px;
    border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-primary);
    font: 500 0.9375rem/1.25 var(--font-sans); text-align: left; cursor: pointer;
}
.chat-more-menu > button:hover[b-9nejda263b], .chat-more-menu > button:focus-visible[b-9nejda263b],
.chat-more-menu .assign-option:hover[b-9nejda263b], .chat-more-menu .assign-option:focus-visible[b-9nejda263b] { background: var(--bg-secondary); }
.chat-more-group[b-9nejda263b] { display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.chat-more-heading[b-9nejda263b] { padding: 6px 12px 2px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }

.ai-paused-strip[b-9nejda263b] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 16px; flex-shrink: 0;
    background: var(--accent-amber-bg); color: var(--accent-amber-text);
    border-bottom: 1px solid var(--border-default);
    font-size: 0.8125rem; font-weight: 500; line-height: 1.4;
}
.ai-paused-strip > span[b-9nejda263b] { flex: 1 1 12rem; min-width: 0; }
.ai-paused-resume[b-9nejda263b] {
    min-height: var(--touch-min, 44px); padding: 0 12px; border-radius: var(--radius-full);
    border: 1px solid currentColor; background: transparent; color: inherit;
    font: 600 0.8125rem/1 var(--font-sans); cursor: pointer; white-space: nowrap;
}
.ai-paused-resume:hover:not(:disabled)[b-9nejda263b] { background: var(--bg-primary); }
.ai-paused-resume:disabled[b-9nejda263b] { opacity: 0.6; cursor: progress; }

/* Hand-off (2026-09-29): the customer asked for a person. The row says so before its preview, and
   the open chat says why the AI is off, with Pick up beside Turn AI back on. */
.conv-handoff-line[b-9nejda263b] { margin-top: 4px; min-width: 0; }
.conv-handoff[b-9nejda263b] {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 8px;
    border-radius: var(--radius-full); background: var(--accent-amber-bg); color: var(--accent-amber-text);
    font-size: 0.75rem; font-weight: 600; line-height: 1.5;
}
/* The buttons keep one row (as a strip child they grew from 12rem and stacked, 113px tall in German
   on a phone on its side); the words wrap beside them, or above them when there is no room. */
.ai-paused-strip > .ai-handoff-actions[b-9nejda263b] { display: inline-flex; flex: 0 0 auto; max-width: 100%; gap: 8px; flex-wrap: wrap; }
@media (max-height: 500px) and (orientation: landscape) {
    .ai-paused-strip.ai-handoff-strip[b-9nejda263b] { padding-block: 6px; line-height: 1.3; }
}
.ai-handoff-pickup[b-9nejda263b] { background: var(--accent-amber-text); border-color: var(--accent-amber-text); color: var(--bg-primary); }
.ai-handoff-pickup:hover:not(:disabled)[b-9nejda263b] { background: var(--accent-amber-text); filter: brightness(1.1); }

/* The chat's AI switch: the track stays 36x20, the tap target is 44x44 (it was the track alone). */
.ai-toggle-switch[b-9nejda263b]::after { content: ""; position: absolute; inset: -12px -4px; }
.ai-toggle-label[b-9nejda263b] { cursor: pointer; }

@media (max-width: 1024px) {
    .chat-actions-inline[b-9nejda263b] { display: none; }
    .chat-more[b-9nejda263b] { display: block; }
    .chat-owner-chip[b-9nejda263b] { display: inline-flex; }
    .ai-paused-strip[b-9nejda263b] { padding: 8px 12px; }
}
@media (pointer: coarse) {
    .ai-paused-resume[b-9nejda263b] { min-height: var(--touch-min); }
    .assign-option[b-9nejda263b] { min-height: var(--touch-min); }
    .chat-actions .assign-btn[b-9nejda263b],
    .chat-actions-inline .assign-btn[b-9nejda263b] { min-height: var(--touch-min, 44px); }
}

/* Nothing only on hover (2026-09-28): keyboard focus shows these too, and on a touchscreen they
   are simply visible, at a size a finger can hit. */
.contact-name:focus-within .btn-edit-name[b-9nejda263b],
.message-wrapper:focus-within .message-actions[b-9nejda263b],
.quick-reply-item-container:focus-within .delete-reply-btn[b-9nejda263b] { opacity: 1; }
.chip-remove:focus-visible[b-9nejda263b] { opacity: 1; }
@media (hover: none) {
    .btn-edit-name[b-9nejda263b], .delete-reply-btn[b-9nejda263b] { opacity: 1; }
    .chip-remove[b-9nejda263b] { opacity: 0.85; }
}
@media (pointer: coarse) {
    .btn-edit-name[b-9nejda263b], .btn-save-name[b-9nejda263b], .btn-cancel-name[b-9nejda263b], .label-create-btn[b-9nejda263b] { min-width: var(--touch-min); min-height: var(--touch-min); display: inline-grid; place-items: center; }
    .label-color-picker[b-9nejda263b] { width: var(--touch-min); height: var(--touch-min); }
    .edit-contact-name-input[b-9nejda263b], .label-name-input[b-9nejda263b] { min-height: var(--touch-min); }
    /* The 44px target reaches back over the gap, so the pencil still sits just after the name. */
    .contact-name .btn-edit-name[b-9nejda263b] { margin-inline-start: -6px; }
    .action-btn[b-9nejda263b] { min-width: 40px; min-height: var(--touch-min, 44px); }
    .delete-reply-btn[b-9nejda263b], .label-delete-btn[b-9nejda263b] { min-width: var(--touch-min); min-height: var(--touch-min); justify-content: center; }
    .chip-remove[b-9nejda263b] { min-width: 32px; min-height: var(--touch-min, 44px); display: inline-grid; place-items: center; }
    .label-add-btn[b-9nejda263b], .label-option[b-9nejda263b], .product-option[b-9nejda263b], .quick-reply-item[b-9nejda263b], .quick-reply-header .add-btn[b-9nejda263b] { min-height: var(--touch-min); }
    .quick-reply-header .add-btn[b-9nejda263b] { min-width: var(--touch-min, 44px); min-height: var(--touch-min, 44px); }
    .emoji-item[b-9nejda263b] { min-width: var(--touch-min); min-height: var(--touch-min); }
    .emoji-tab[b-9nejda263b] { min-width: var(--touch-min); min-height: var(--touch-min); }
    .reply-bar-cancel[b-9nejda263b], .attachment-remove-btn[b-9nejda263b], .ai-suggestion-dismiss[b-9nejda263b], .error-message button[b-9nejda263b] { min-width: var(--touch-min); min-height: var(--touch-min); }
    .load-more-btn[b-9nejda263b] { min-height: var(--touch-min); }
}

/* The side-panel menus are <details>: no disclosure triangle, and the summary looks like the button it was. */
details.label-add-container > summary[b-9nejda263b], details.outcome-manage > summary[b-9nejda263b] { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
details.label-add-container > summary[b-9nejda263b]::-webkit-details-marker, details.outcome-manage > summary[b-9nejda263b]::-webkit-details-marker { display: none; }
details.outcome-manage[b-9nejda263b] { position: relative; }
.label-dropdown[b-9nejda263b] { max-height: min(50dvh, 320px); overflow-y: auto; overscroll-behavior: contain; max-width: calc(100vw - 24px); }
/* In the right-hand contact column the menus open towards the page, never past its right edge. */
@media (min-width: 1280px) { .contact-panel .label-dropdown[b-9nejda263b] { left: auto; right: 0; } }
.label-option:focus-visible[b-9nejda263b], .product-option:focus-visible[b-9nejda263b] { background: var(--bg-secondary); outline-offset: -2px; }

@media (pointer: coarse) { .filter-tabs button[b-9nejda263b] { min-height: var(--touch-min); min-width: var(--touch-min); } }

/* ═══════════════════════════════════════════════════════════
   Chat source, increment 4 (2026-09-28). At 360-390px the "via <page>" text used to
   ellipsize into fragments ("via Sh…"). Now the channel logo always shows, the owner chip
   never shrinks, and a tap on the source opens the full channel and page name.
   ═══════════════════════════════════════════════════════════ */
.chat-source[b-9nejda263b] { position: relative; flex: 0 1 auto; min-width: 0; }
.chat-source > summary[b-9nejda263b] { list-style: none; }
.chat-source > summary[b-9nejda263b]::-webkit-details-marker { display: none; }
.chat-source-btn[b-9nejda263b] {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
    padding: 1px 6px 1px 2px; border-radius: var(--radius-sm);
    color: var(--text-muted); cursor: pointer;
}
.chat-source-btn:hover[b-9nejda263b], .chat-source[open] > .chat-source-btn[b-9nejda263b] { background: var(--bg-secondary); color: var(--text-secondary); }
.chat-source-btn:focus-visible[b-9nejda263b] { outline: 2px solid var(--ring, var(--accent-primary)); outline-offset: 1px; }
.chat-source-btn .platform-logo[b-9nejda263b] { flex: none; }
.chat-source-text[b-9nejda263b] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-source-panel[b-9nejda263b] {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 70;
    width: max-content; min-width: 200px; max-width: min(340px, calc(100vw - 64px));
    padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-xl);
    white-space: normal; font-size: 0.875rem; line-height: 1.4;
}
.chat-source-row[b-9nejda263b] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-source-key[b-9nejda263b] { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.chat-source-val[b-9nejda263b] { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; word-break: break-word; font-weight: 500; }
.chat-source-val .platform-logo[b-9nejda263b] { flex: none; }
/* The owner chip is never clipped: when the source and the chip do not fit on one line (Thai at
   360px leaves the name column about 120px), the chip takes its own line under the source instead
   of being cut. Only a name longer than the whole column ellipsizes. */
.contact-platform[b-9nejda263b] { flex-wrap: wrap; row-gap: 2px; }
.contact-platform .chat-owner-chip[b-9nejda263b] { flex: none; max-width: 100%; }
/* Basis 0: the source shrinks to its logo before the chip is pushed down, so the chip wraps only
   when it and a 44px source cannot share the line. */
.chat-source[b-9nejda263b] { flex: 1 1 0; min-width: 44px; max-width: 100%; }
/* The name column takes the header's free space and never lets its content run under the actions
   (QA 1366: the source overflowed a 127px column to 329px, under "Pick up"). */
.chat-header .contact-info[b-9nejda263b] { flex: 1 1 auto; min-width: 0; }
.chat-header .contact-info > div:not(.avatar-fallback)[b-9nejda263b] { flex: 1 1 auto; min-width: 0; }
/* The initials disc keeps its size; only the name column grows (QA 1440: it stretched into a pill). */
.chat-header .contact-info > .avatar-fallback[b-9nejda263b], .chat-header .contact-info > img[b-9nejda263b] { flex: none; }
.chat-source-btn[b-9nejda263b] { display: flex; width: fit-content; overflow: hidden; }
/* The name row stays above the source's enlarged touch area where they meet, but only as wide as
   its content, and the header actions stay above both (QA 1366: a full-width name row swallowed
   the "Pick up" click). */
.contact-name-container[b-9nejda263b] { position: relative; z-index: 1; width: fit-content; max-width: 100%; }
.chat-header .chat-actions[b-9nejda263b] { position: relative; z-index: 2; }

@media (max-width: 640.98px) {
    /* The logo says which channel; the word "via" is spoken by the label, not shown. */
    .chat-source-via[b-9nejda263b] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .contact-platform[b-9nejda263b] { gap: 4px; }
}
@media (pointer: coarse) {
    /* A 44px target that does not make the header taller: the extra height overlaps the header
       padding, and the name row above stays on top where they meet. */
    .chat-source-btn[b-9nejda263b] { min-height: var(--touch-min, 44px); min-width: var(--touch-min, 44px); margin-block: -12px; }
}

/* Delivery state colours on tokens, so they follow the theme. */
.status-icon.status-failed[b-9nejda263b] { color: var(--accent-red); }
.status-icon.status-read[b-9nejda263b] { color: var(--link); }

/* A reply that did not reach the customer: said in words under its bubble, with Send again. */
.msg-failed[b-9nejda263b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 10px;
    margin: 4px 0 2px auto;
    max-width: min(100%, 420px);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--accent-red-text);
    text-align: right;
}
.msg-failed-text[b-9nejda263b] { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; overflow-wrap: anywhere; }
.msg-failed-why[b-9nejda263b] { color: var(--text-secondary); font-size: 12px; }
.msg-failed-retry[b-9nejda263b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    min-height: var(--touch-min, 44px);
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-red) 35%, transparent);
    background: var(--bg-primary, var(--bg-surface));
    color: var(--accent-red-text);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.msg-failed-retry:hover:not(:disabled)[b-9nejda263b] { background: var(--accent-red-bg); }
.msg-failed-retry:focus-visible[b-9nejda263b] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.msg-failed-retry:disabled[b-9nejda263b] { opacity: .7; cursor: default; }
/* A fixed box: iconify-icon draws itself only once on screen, and a 0px-then-16px icon re-wrapped
   the row, which moved the chat off its newest message. */
.msg-failed-retry iconify-icon[b-9nejda263b] { display: inline-block; flex: none; width: 16px; height: 16px; }
.msg-failed-retry iconify-icon.spin[b-9nejda263b] { animation: spin-b-9nejda263b 1s linear infinite; }
@media (pointer: coarse) { .msg-failed-retry[b-9nejda263b] { min-height: var(--touch-min, 44px); } }
.message-wrapper + .msg-failed + .message-wrapper[b-9nejda263b] { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════
   Chat header by the chat's own width (increment 5, 2026-09-28). The viewport rule above left
   laptops (1100-1440px, sidebar and contact column open) with a 0-90px name column: the contact's
   name disappeared behind four labelled actions. The header now reads the pane it sits in: below
   760px it uses the labelled "More actions" menu and the owner chip, as phones and tablets do.
   ═══════════════════════════════════════════════════════════ */
.chat-panel[b-9nejda263b] { container: chatpane / inline-size; }
@container chatpane (max-width: 760px) {
    .chat-actions-inline[b-9nejda263b] { display: none; }
    .chat-more[b-9nejda263b] { display: block; }
    .chat-owner-chip[b-9nejda263b] { display: inline-flex; }
    .ai-provider-badge[b-9nejda263b], .ai-toggle-icon[b-9nejda263b] { display: none; }
    .ai-toggle-short[b-9nejda263b] { display: inline; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
    /* Renaming a contact (2026-09-30): the name field, Save and Cancel take the header row until it
       is saved or cancelled. Beside the actions, Save sat under the info button and Cancel under
       More (z-index 2), and ran 2px past a 360px screen, so a tap could not save the name. */
    .chat-header.is-renaming .chat-actions[b-9nejda263b] { display: none; }
    .chat-header.is-renaming .contact-name-container[b-9nejda263b] { width: 100%; }
    .chat-header.is-renaming .edit-contact-name-input[b-9nejda263b] { flex: 1 1 auto; min-width: 0; width: auto; }
    .chat-header.is-renaming .btn-save-name[b-9nejda263b],
    .chat-header.is-renaming .btn-cancel-name[b-9nejda263b] { flex: none; }
}

/* Touch (2026-09-29): a Reply (and Download) button beside every message took a sixth of a phone's
   width and turned the chat into a column of arrows. They now appear when the message is tapped
   (Inbox.razor.js toggles .cm-actions-open) or reached with a keyboard, and swiping a message to
   the right replies to it, as in LINE and Messenger. Zero width, not display:none, so the buttons
   stay focusable. */
@media (hover: none) {
    .message-actions[b-9nejda263b] { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }
    .message-wrapper.cm-actions-open .message-actions[b-9nejda263b],
    .message-wrapper:focus-within .message-actions[b-9nejda263b] { opacity: 1; width: auto; overflow: visible; pointer-events: auto; }
    .message-wrapper.cm-actions-open .message[b-9nejda263b] { filter: brightness(0.96); }
    .messages-container[b-9nejda263b] { overflow-x: hidden; }
    .message-wrapper .message[b-9nejda263b] { touch-action: pan-y; }
}

/* Another chat's file that was not sent (2026-09-30): said by name, with the way back to that chat.
   It sits where the chat's own error does, or above the list when no chat is open. */
.attachment-notice[b-9nejda263b] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 12px;
    padding: 10px 12px;
    border: 1px solid var(--accent-amber);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    flex: none;
}
.attachment-notice > iconify-icon[b-9nejda263b] { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-amber); }
.attachment-notice-text[b-9nejda263b] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.attachment-notice-text p[b-9nejda263b] { margin: 0; }
.attachment-notice-next[b-9nejda263b] { margin-top: 2px !important; color: var(--text-secondary); }
.attachment-notice-actions[b-9nejda263b] { flex: none; display: flex; align-items: center; gap: 4px; }
.attachment-notice-close[b-9nejda263b] { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px; display: inline-flex; align-items: center; justify-content: center; }
.conv-file-held[b-9nejda263b] { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 500; color: var(--accent-red); }
.conv-file-held iconify-icon[b-9nejda263b] { flex: none; width: 12px; height: 12px; }
@media (max-width: 1023px) {
    .attachment-notice[b-9nejda263b] { flex-wrap: wrap; }
    .attachment-notice-actions[b-9nejda263b] { width: 100%; justify-content: flex-end; }
    .attachment-notice-actions .cm-btn[b-9nejda263b], .attachment-notice-close[b-9nejda263b] { min-height: var(--touch-min); min-width: var(--touch-min); }
}
@media (max-height: 500px) and (orientation: landscape) {
    .attachment-notice[b-9nejda263b] { flex-wrap: nowrap; margin: 4px; padding: 6px; }
    .attachment-notice-text p[b-9nejda263b] { display: inline; margin-right: 4px; }
    .attachment-notice-actions[b-9nejda263b] { width: auto; flex-shrink: 0; }
}



/* ═══════════════════════════════════════════════════════════
   Landscape Keyboard Usability (2026-10-01)
   When the native keyboard is open in landscape, the visual
   viewport shrinks to ~66px. Ancestors like chat-header must
   collapse so the composer and send buttons are fully usable.
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 450px) and (orientation: landscape) {
    html.cm-composer-kb-open .inbox-container[b-9nejda263b],
    html.cm-composer-kb-open .inbox-container.mobile-chat-active[b-9nejda263b] {
        display: flex;
        flex-direction: column;
        height: var(--cm-vvh, 100dvh);
        padding: 0;
        border-radius: 0;
    }
    html.cm-composer-kb-open .inbox-container > .conversation-list[b-9nejda263b] {
        display: none;
    }
    html.cm-composer-kb-open .inbox-container > .chat-panel[b-9nejda263b] {
        display: flex;
        flex: 1;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        min-height: 0;
    }
    html.cm-composer-kb-open .chat-header[b-9nejda263b],
    html.cm-composer-kb-open .list-header[b-9nejda263b],
    html.cm-composer-kb-open .ai-summary-bar[b-9nejda263b] {
        display: none;
    }
    html.cm-composer-kb-open .messages-container[b-9nejda263b] {
        padding-top: 0;
        padding-bottom: 0;
    }
    html.cm-composer-kb-open .message-input textarea[b-9nejda263b] {
        min-height: var(--touch-min, 44px);
        max-height: 44px;
    }
    html.cm-composer-kb-open .attachment-btn[b-9nejda263b],
    html.cm-composer-kb-open .quick-reply-btn[b-9nejda263b],
    html.cm-composer-kb-open .ai-suggest-btn[b-9nejda263b],
    html.cm-composer-kb-open .send-btn[b-9nejda263b],
    html.cm-composer-kb-open .compose-tools-toggle[b-9nejda263b] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: var(--touch-min, 44px);
    }
    html.cm-composer-kb-open .message-input[b-9nejda263b] {
        padding-top: 4px;
        padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    }
}


/* Scoped Chat Panel Drag and Drop Overlay */
.chat-panel[b-9nejda263b] {
    position: relative;
}

.cm-drop-overlay[b-9nejda263b] {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--accent-solid) 88%, transparent);
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--on-accent);
    backdrop-filter: blur(4px);
    pointer-events: none;
    border: 2px dashed color-mix(in srgb, var(--on-accent) 75%, transparent);
    border-radius: var(--radius-xl, 12px);
    margin: 6px;
    box-sizing: border-box;
}

.cm-drop-overlay.active[b-9nejda263b] {
    display: flex;
}

.cm-drop-overlay-content[b-9nejda263b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--on-accent);
    pointer-events: none;
}
/* /Components/Pages/Invite.razor.rz.scp.css */
/* /invite: plain server-rendered page (no circuit); tokens from the app theme. */
.invite-page[b-47dif9bzt6] { max-width: 560px; margin: 8vh auto 48px; padding: 0 20px; display: flex; flex-direction: column; gap: 16px; }
.invite-page h1[b-47dif9bzt6] { font-size: 1.5rem; margin: 0; }
.invite-page h2[b-47dif9bzt6] { font-size: 1.0625rem; margin: 0 0 8px; }
.invite-page p[b-47dif9bzt6] { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.invite-who[b-47dif9bzt6] { font-size: 0.875rem; }
.invite-result[b-47dif9bzt6] { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-surface); }
.invite-result.is-ok[b-47dif9bzt6] { border-color: var(--accent-green); background: var(--accent-green-bg); color: var(--text-primary); }
.invite-result.is-problem[b-47dif9bzt6] { border-color: var(--accent-red); background: var(--accent-red-bg); color: var(--text-primary); }
.invite-card[b-47dif9bzt6] { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-surface); }
.invite-facts[b-47dif9bzt6] { display: grid; gap: 8px; margin: 0; }
.invite-facts div[b-47dif9bzt6] { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.invite-facts dt[b-47dif9bzt6] { color: var(--text-secondary); }
.invite-facts dd[b-47dif9bzt6] { margin: 0; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.invite-actions[b-47dif9bzt6] { display: flex; flex-wrap: wrap; gap: 10px; }
.invite-actions form[b-47dif9bzt6], .invite-row-actions form[b-47dif9bzt6], .invite-forget[b-47dif9bzt6] { margin: 0; }
.invite-list[b-47dif9bzt6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.invite-row[b-47dif9bzt6] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.invite-row-text[b-47dif9bzt6] { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.invite-row-text span[b-47dif9bzt6] { color: var(--text-secondary); font-size: 0.875rem; }
.invite-row-actions[b-47dif9bzt6] { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-page .cm-btn[b-47dif9bzt6] { min-height: 44px; }
/* /Components/Pages/Knowledge.razor.rz.scp.css */
/* ── Knowledge Base Page ────────────────────────────────────── */
.cm-page[b-nrhx3cp2s8] {
    padding: 1.5rem 1.5rem calc(4rem + env(safe-area-inset-bottom, 0px));
    max-width: 1000px;
    margin: 0 auto;
    min-width: 0;
}

.cm-page-header[b-nrhx3cp2s8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.header-content h1[b-nrhx3cp2s8] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.header-content .subtitle[b-nrhx3cp2s8] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0 0;
}

.header-actions[b-nrhx3cp2s8] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cm-grouped-list[b-nrhx3cp2s8] {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.kb-alert[b-nrhx3cp2s8] { margin-bottom: 1rem; }

.kb-tester[b-nrhx3cp2s8] {
    margin-bottom: 1.5rem;
}
.kb-tester-field[b-nrhx3cp2s8] { flex: 1; min-width: 0; }
.kb-test-notice[b-nrhx3cp2s8] { margin: 1rem 0 0; }

.search-section[b-nrhx3cp2s8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.search-box[b-nrhx3cp2s8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    max-width: 400px;
    min-height: 44px;
    padding: 0 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-muted);
}

.search-box:focus-within[b-nrhx3cp2s8] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-light);
}

.search-box input[b-nrhx3cp2s8] {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    min-height: 44px;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: transparent;
}

.search-clear[b-nrhx3cp2s8] { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }

.entry-count[b-nrhx3cp2s8] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.entry-list[b-nrhx3cp2s8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.entry-card[b-nrhx3cp2s8] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    min-width: 0;
}

.entry-card.inactive .entry-content[b-nrhx3cp2s8] {
    opacity: 0.6;
}

.entry-type-badge[b-nrhx3cp2s8] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.entry-type-badge.product[b-nrhx3cp2s8] { background: var(--accent-light); color: var(--accent-primary); }
.entry-type-badge.service[b-nrhx3cp2s8] { background: var(--accent-blue-bg); color: var(--accent-blue); }
.entry-type-badge.faq[b-nrhx3cp2s8] { background: var(--accent-amber-bg); color: var(--accent-amber); }
.entry-type-badge.policy[b-nrhx3cp2s8] { background: var(--accent-green-bg); color: var(--accent-green); }
.entry-type-badge.info[b-nrhx3cp2s8] { background: var(--bg-tertiary); color: var(--text-secondary); }

.entry-content[b-nrhx3cp2s8] {
    flex: 1;
    min-width: 0;
}

.entry-header[b-nrhx3cp2s8] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.entry-title[b-nrhx3cp2s8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-price[b-nrhx3cp2s8] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.entry-desc[b-nrhx3cp2s8] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.25rem 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.entry-meta[b-nrhx3cp2s8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.entry-category[b-nrhx3cp2s8],
.entry-type-label[b-nrhx3cp2s8],
.entry-inactive-badge[b-nrhx3cp2s8] {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
}

.entry-category[b-nrhx3cp2s8] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.entry-type-label[b-nrhx3cp2s8] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    text-transform: capitalize;
}

.entry-inactive-badge[b-nrhx3cp2s8] {
    background: var(--accent-red-bg);
    color: var(--accent-red);
}

.entry-actions[b-nrhx3cp2s8] {
    display: flex;
    gap: 0.25rem;
}

.action-btn[b-nrhx3cp2s8] {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-btn:hover[b-nrhx3cp2s8] {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.action-btn.danger:hover[b-nrhx3cp2s8] {
    background: var(--accent-red-bg);
    color: var(--accent-red);
}

/* Skeleton */
.entry-card--skeleton[b-nrhx3cp2s8] { border-color: var(--border-subtle); }
.sk-badge[b-nrhx3cp2s8] { width: 40px; height: 40px; border-radius: 8px; flex: none; background: var(--bg-tertiary); }
.sk-line[b-nrhx3cp2s8] { height: 0.75rem; margin-top: 0.6rem; width: 100%; background: var(--bg-tertiary); border-radius: 4px; }
.sk-title[b-nrhx3cp2s8] { height: 1rem; width: 45%; margin-top: 0; }
.sk-short[b-nrhx3cp2s8] { width: 30%; }

.kb-empty[b-nrhx3cp2s8] {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--bg-surface);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
}
.cm-empty-icon[b-nrhx3cp2s8] { font-size: 2rem; color: var(--text-muted); margin-bottom: 1rem; display: block; }
.cm-empty-title[b-nrhx3cp2s8] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; }
.cm-empty-text[b-nrhx3cp2s8] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1.5rem; }
.kb-empty-actions[b-nrhx3cp2s8] { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }

.cm-btn[b-nrhx3cp2s8] {
    min-height: 44px;
    padding: 0 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.cm-btn:disabled[b-nrhx3cp2s8] { opacity: 0.5; cursor: not-allowed; }
.cm-btn--primary[b-nrhx3cp2s8] { background: var(--accent-solid); color: var(--on-accent); }
.cm-btn--secondary[b-nrhx3cp2s8] { background: var(--bg-tertiary); color: var(--text-primary); }

.cm-chips[b-nrhx3cp2s8] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.cm-chip[b-nrhx3cp2s8] {
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--border-default);
    border-radius: 22px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
.cm-chip.active[b-nrhx3cp2s8] {
    background: var(--accent-solid);
    color: var(--on-accent);
    border-color: var(--accent-solid);
}
.cm-chip-count[b-nrhx3cp2s8] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.75rem;
}
.cm-chip.active .cm-chip-count[b-nrhx3cp2s8] {
    background: rgba(255, 255, 255, 0.22);
    color: var(--on-accent);
}

/* Modal */
.modal-backdrop[b-nrhx3cp2s8] {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.modal-content[b-nrhx3cp2s8] {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.modal-content.small[b-nrhx3cp2s8] { max-width: 400px; }
.modal-header[b-nrhx3cp2s8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}
.modal-header h3[b-nrhx3cp2s8] { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.modal-close[b-nrhx3cp2s8] {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.modal-body[b-nrhx3cp2s8] {
    padding: 1.5rem;
    overflow-y: auto;
}
.modal-footer[b-nrhx3cp2s8] {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--border-subtle);
}
.modal-error[b-nrhx3cp2s8] { margin: 0 1.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--accent-red-text, var(--accent-red)); }

/* Forms */
.form-group[b-nrhx3cp2s8] { margin-bottom: 1rem; }
.form-group label[b-nrhx3cp2s8] {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}
.form-control[b-nrhx3cp2s8] {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.form-control:focus[b-nrhx3cp2s8] {
    border-color: var(--accent-primary);
    outline: none;
}
.form-control[aria-invalid="true"][b-nrhx3cp2s8] { border-color: var(--accent-red); }
.cm-field-error[b-nrhx3cp2s8] { font-size: 0.8rem; color: var(--accent-red); margin-top: 0.4rem; }
.textarea-lg[b-nrhx3cp2s8] { min-height: 100px; resize: vertical; }

.toggle-inline[b-nrhx3cp2s8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.toggle-inline input[b-nrhx3cp2s8] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-primary);
}

.import-example[b-nrhx3cp2s8] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: pre-wrap;
    margin-bottom: 1rem;
    border: 1px solid var(--border-default);
}
.delete-item-name[b-nrhx3cp2s8] { font-weight: 600; color: var(--text-primary); margin-top: 0.5rem; }

/* Mobile */
@media (max-width: 640px) {
    .cm-page[b-nrhx3cp2s8] { padding: 1rem 1rem calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .cm-page-header[b-nrhx3cp2s8] { flex-direction: column; align-items: stretch; margin-bottom: 1rem; }
    .header-actions[b-nrhx3cp2s8] { justify-content: stretch; }
    .header-actions .cm-btn[b-nrhx3cp2s8] { flex: 1; }

    .search-section[b-nrhx3cp2s8] { flex-direction: column; align-items: stretch; }
    .search-box[b-nrhx3cp2s8] { max-width: none; }

    .entry-card[b-nrhx3cp2s8] { flex-direction: column; padding: 1rem; }
    .entry-actions[b-nrhx3cp2s8] { align-self: flex-end; }

    .modal-backdrop[b-nrhx3cp2s8] { align-items: flex-end; padding: calc(0.75rem + var(--cm-safe-top, 0px)) 0 0; }
    .modal-content[b-nrhx3cp2s8] {
        max-height: calc(100vh - 0.75rem);
        max-height: calc(100dvh - 0.75rem - var(--cm-safe-top, 0px));
        border-radius: 16px 16px 0 0;
    }
    .modal-footer[b-nrhx3cp2s8] { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
    .modal-footer .cm-btn[b-nrhx3cp2s8] { flex: 1; }
}

html.cm-kb-open .modal-backdrop[b-nrhx3cp2s8] { height: var(--cm-vvh, 100dvh); padding-bottom: 0.5rem; bottom: auto; }
html.cm-kb-open .modal-content[b-nrhx3cp2s8] { max-height: calc(var(--cm-vvh, 100dvh) - 1rem - var(--cm-safe-top, 0px)); }
@media (max-width: 640px) {
    html.cm-kb-open .modal-backdrop[b-nrhx3cp2s8] { padding-bottom: 0; }
    html.cm-kb-open .modal-content[b-nrhx3cp2s8] { max-height: calc(var(--cm-vvh, 100dvh) - 0.75rem - var(--cm-safe-top, 0px)); }
    html.cm-kb-open .modal-footer[b-nrhx3cp2s8] { padding-bottom: 0.75rem; }
}


/* Tester */
.header-icon[b-nrhx3cp2s8] { font-size: 18px; }
.kb-tester-title[b-nrhx3cp2s8] { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.1rem; color: var(--text-primary); }
.kb-test-row[b-nrhx3cp2s8] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kb-test-input[b-nrhx3cp2s8] { margin-bottom: 0; }
.kb-test-notice--error[b-nrhx3cp2s8] { color: var(--accent-red-text, var(--accent-red)); }
.kb-test-notice--warning[b-nrhx3cp2s8] { color: var(--accent-amber-text, var(--accent-amber)); }
.kb-test-retry[b-nrhx3cp2s8] { margin-left: 0.5rem; }
.kb-test-hits[b-nrhx3cp2s8] { margin-top: 1rem; padding: 0; list-style: none; }
.kb-test-hit[b-nrhx3cp2s8] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; }
.kb-test-score[b-nrhx3cp2s8] { background: var(--accent-solid, var(--accent-primary)); color: var(--on-accent, #fff); }
.kb-test-footnote[b-nrhx3cp2s8] { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.kb-test-catalog-off[b-nrhx3cp2s8] { margin: 12px 0 0; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; }
.kb-test-catalog-title[b-nrhx3cp2s8] { margin: 14px 0 4px; font-size: 0.85rem; color: var(--text-primary); }
.kb-test-catalog-hits[b-nrhx3cp2s8] { padding: 0; list-style: none; }
.kb-test-price[b-nrhx3cp2s8] { color: var(--accent-green); }
.kb-test-catalog-none[b-nrhx3cp2s8] { margin: 12px 0 0; font-size: 0.85rem; color: var(--text-muted); }

/* Import */
.import-result[b-nrhx3cp2s8] { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; }
.import-result--success[b-nrhx3cp2s8] { color: var(--accent-green); }
.import-result--warning[b-nrhx3cp2s8] { color: var(--accent-amber-text, var(--accent-amber)); }
.import-result-icon[b-nrhx3cp2s8] { margin-top: 0.1rem; }
.import-result-text[b-nrhx3cp2s8] { flex: 1; }
.import-result-errors[b-nrhx3cp2s8] { display: block; margin-top: 0.25rem; }

/* Modal */
.delete-confirm-text[b-nrhx3cp2s8] { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
.cm-btn--danger[b-nrhx3cp2s8] { background: var(--accent-red); color: var(--on-accent, #fff); }
/* Wide, short Android screens retain safe edges; keyboard geometry stays in the sheet rules. */
@media (min-width: 641px) and (max-height: 500px) {
    .modal-backdrop[b-nrhx3cp2s8] { align-items: center; padding: calc(0.5rem + var(--cm-safe-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px)); }
    .modal-content[b-nrhx3cp2s8] { max-height: calc(100dvh - 1rem - var(--cm-safe-top, 0px)); }
}

/* Channel scope (2026-10-07) */
.kb-badge[b-nrhx3cp2s8] { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; max-width: 100%; font-size: 0.75rem; line-height: 1.5; padding: 0 0.35rem; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-secondary); }
.kb-badge--warn[b-nrhx3cp2s8] { background: var(--accent-amber-bg); color: var(--accent-amber-text); }
.kb-badge-logo[b-nrhx3cp2s8] { flex: none; display: inline-flex; width: 14px; height: 14px; }
.kb-badge-name[b-nrhx3cp2s8] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.kb-channel-filter[b-nrhx3cp2s8] { flex: none; min-width: 0; max-width: 100%; }
.kb-channel-filter .form-control[b-nrhx3cp2s8] { min-height: 44px; max-width: 22rem; margin-bottom: 0; }
.kb-tester-channel[b-nrhx3cp2s8] { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.kb-test-channel-label[b-nrhx3cp2s8] { font-size: 0.8rem; color: var(--text-secondary); }
.kb-tester-channel .form-control[b-nrhx3cp2s8] { min-height: 44px; margin-bottom: 0; }
.kb-test-scope[b-nrhx3cp2s8] { margin-top: 0.35rem; }
.kb-import-target[b-nrhx3cp2s8] { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
@media (max-width: 640px) {
    .kb-channel-filter .form-control[b-nrhx3cp2s8] { max-width: none; width: 100%; }
}
/* /Components/Pages/KnowledgeScopePicker.razor.rz.scp.css */
.kb-scope[b-5xa5gzt4zp] { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.kb-scope-legend[b-5xa5gzt4zp] { padding: 0; margin-bottom: 0.25rem; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.toggle-inline[b-5xa5gzt4zp] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; color: var(--text-primary); min-height: 44px; min-width: 0; }
.toggle-inline input[b-5xa5gzt4zp] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent-primary); }
.kb-scope-channels[b-5xa5gzt4zp] { list-style: none; margin: 0 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; }
.kb-scope-logo[b-5xa5gzt4zp] { flex: none; display: inline-flex; width: 16px; height: 16px; }
.kb-scope-name[b-5xa5gzt4zp] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-scope-platform[b-5xa5gzt4zp] { color: var(--text-muted); }
.kb-scope-note[b-5xa5gzt4zp] { margin: 0; font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kb-scope-note--error[b-5xa5gzt4zp] { color: var(--accent-red-text, var(--accent-red)); }
.kb-badge[b-5xa5gzt4zp] { flex: none; font-size: 0.75rem; padding: 0 0.35rem; border-radius: 4px; }
.kb-badge--warn[b-5xa5gzt4zp] { background: var(--accent-amber-bg, var(--bg-tertiary)); color: var(--accent-amber-text, var(--accent-amber)); }
.cm-field-error[b-5xa5gzt4zp] { font-size: 0.8rem; color: var(--accent-red); margin: 0; }
/* /Components/Pages/McpConsent.razor.rz.scp.css */
.mcp-consent[b-soi720dvvp] { max-width: 640px; margin: 5vh auto 32px; padding: 0 4px; display: flex; flex-direction: column; gap: 14px; color: var(--text-primary); }
.mcp-consent-icon[b-soi720dvvp] { font-size: 40px; color: var(--accent-primary); }
.mcp-consent h1[b-soi720dvvp] { font-size: 1.375rem; margin: 0; }
.mcp-consent p[b-soi720dvvp] { margin: 0; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
.mcp-consent-lead[b-soi720dvvp] { color: var(--text-primary) !important; font-size: 1rem; }
.mcp-consent-meta[b-soi720dvvp] { font-size: .85rem; }
.mcp-consent-pill[b-soi720dvvp] { display: inline-flex; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); }

/* Who is asking, where the browser returns, and who is signed in */
.mcp-consent-head[b-soi720dvvp] { display: flex; align-items: flex-start; gap: 14px; }
.mcp-consent-head .mcp-consent-icon[b-soi720dvvp] { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
    font-size: 28px; background: var(--accent-light); }
.mcp-consent-head-text[b-soi720dvvp] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mcp-consent-facts[b-soi720dvvp] { list-style: none; margin: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-secondary); }
.mcp-consent-facts li[b-soi720dvvp] { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; min-width: 0; }
.mcp-consent-facts .material-symbols-rounded[b-soi720dvvp] { flex: none; font-size: 18px; margin-top: 1px; color: var(--text-muted); }

.mcp-consent-form[b-soi720dvvp] { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.mcp-consent-box[b-soi720dvvp] { border: 1px solid var(--border-default); border-radius: 14px; padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0;
    background: var(--bg-surface); }
.mcp-consent legend[b-soi720dvvp] { padding: 0 6px; font-weight: 700; font-size: .95rem; color: var(--text-primary); }

/* Read only / Select all / Clear, with the live count. Revealed by McpConsent.razor.js. */
.mcp-consent-tools[b-soi720dvvp] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    padding: 8px 0 10px; border-bottom: 1px solid var(--border-subtle); }
.mcp-consent-tools[hidden][b-soi720dvvp] { display: none; }
.mcp-consent-count[b-soi720dvvp] { font-size: .85rem; font-weight: 600; color: var(--text-secondary); }
.mcp-consent-tool-buttons[b-soi720dvvp] { display: flex; flex-wrap: wrap; gap: 6px; }
.mcp-consent-tool-buttons .cm-btn[b-soi720dvvp] { min-height: 44px; gap: 6px; white-space: normal; }
.mcp-consent-tool-buttons .material-symbols-rounded[b-soi720dvvp] { font-size: 18px; }
.mcp-consent-none[b-soi720dvvp] { padding: 8px 12px; border-radius: 10px; font-size: .85rem; background: var(--accent-red-bg); color: var(--accent-red-text) !important; }
.mcp-consent-none[hidden][b-soi720dvvp] { display: none; }

.mcp-consent-group[b-soi720dvvp] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mcp-consent-group + .mcp-consent-group[b-soi720dvvp] { padding-top: 6px; }
.mcp-consent-group-title[b-soi720dvvp] { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
    color: var(--text-secondary); }
.mcp-consent-group-title .material-symbols-rounded[b-soi720dvvp] { font-size: 18px; color: var(--accent-primary); }

.mcp-consent-choice[b-soi720dvvp] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 10px;
    background: var(--bg-secondary); cursor: pointer; min-height: 44px; min-width: 0; }
.mcp-consent-choice:hover[b-soi720dvvp] { border-color: var(--border-strong); }
.mcp-consent-choice:has(input:checked)[b-soi720dvvp] { border-color: var(--accent-primary); background: var(--accent-light); }
.mcp-consent-choice:has(input:focus-visible)[b-soi720dvvp] { outline: 3px solid var(--accent-primary); outline-offset: 2px; }
.mcp-consent-choice input[b-soi720dvvp] { margin-top: 3px; accent-color: var(--accent-primary); flex: none; width: 18px; height: 18px; }
.mcp-consent-choice-text[b-soi720dvvp] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mcp-consent-choice-head[b-soi720dvvp] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.mcp-consent-choice strong[b-soi720dvvp] { font-size: .9rem; color: var(--text-primary); overflow-wrap: anywhere; }
.mcp-consent-choice small[b-soi720dvvp] { font-size: .78rem; color: var(--text-secondary); line-height: 1.45; overflow-wrap: anywhere; }

/* What kind of access each permission is, in words as well as colour */
.mcp-consent-kind[b-soi720dvvp] { flex: none; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.6; }
.mcp-consent-kind--read[b-soi720dvvp] { background: var(--accent-blue-bg); color: var(--accent-blue-text); }
.mcp-consent-kind--write[b-soi720dvvp] { background: var(--accent-amber-bg); color: var(--accent-amber-text); }
.mcp-consent-kind--sensitive[b-soi720dvvp] { background: var(--accent-red-bg); color: var(--accent-red-text); }
.mcp-consent-choice--write[b-soi720dvvp] { border-left: 3px solid var(--accent-amber); }
.mcp-consent-choice--sensitive[b-soi720dvvp] { border-left: 3px solid var(--accent-red); }

.mcp-consent-warn[b-soi720dvvp] { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-default); background: var(--bg-secondary); font-size: .85rem; }

/* The decision stays in reach under a long permission list */
.mcp-consent-actions[b-soi720dvvp] { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin: 4px -4px 0;
    padding: 12px 4px calc(12px + env(safe-area-inset-bottom)); background: var(--bg-app); border-top: 1px solid var(--border-subtle); }
.mcp-consent-actions .cm-btn[b-soi720dvvp] { min-height: 44px; flex: 1 1 160px; justify-content: center; }

@media (max-width: 480px) {
    .mcp-consent[b-soi720dvvp] { margin-top: 2vh; }
    .mcp-consent-head .mcp-consent-icon[b-soi720dvvp] { width: 44px; height: 44px; font-size: 24px; }
    .mcp-consent-box[b-soi720dvvp] { padding: 10px 10px 12px; }
    .mcp-consent-tools[b-soi720dvvp] { flex-direction: column; align-items: stretch; }
    .mcp-consent-tool-buttons .cm-btn[b-soi720dvvp] { flex: 1 1 auto; justify-content: center; }
}
/* /Components/Pages/OwnerAlerts.razor.rz.scp.css */
/* Status, preferences, connection health, then delivery history. Existing handlers stay intact. */
.aiops-page[b-4zucegae1f] { max-width: 1120px; margin: 0 auto; padding: 1.5rem; font-family: var(--font-sans); color: var(--text-primary); }
.page-header-sticky[b-4zucegae1f] { position: static; padding: 0; margin-bottom: 1.5rem; background: transparent; border: 0; box-shadow: none; }
.page-header-sticky h1[b-4zucegae1f] { display: flex; align-items: center; gap: 0.65rem; font-size: 1.65rem; line-height: 1.35; margin: 0 0 0.4rem; }
.page-header-sticky h1 .material-symbols-rounded[b-4zucegae1f] { color: var(--accent-primary); }
.subtitle[b-4zucegae1f] { margin: 0; color: var(--text-secondary); max-width: 65ch; }
.aiops-card[b-4zucegae1f], .aiops-card.brand[b-4zucegae1f] { padding: 1.25rem; margin-bottom: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: none; }
.aiops-card h2[b-4zucegae1f] { font-size: 1.1rem; margin: 0 0 0.4rem; }
.aiops-help[b-4zucegae1f] { color: var(--text-secondary); }
.aiops-row[b-4zucegae1f] { flex-wrap: wrap; gap: 0.75rem; }
.aiops-grid[b-4zucegae1f] { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; }
.aiops-check[b-4zucegae1f], .aiops-check:has(input:checked)[b-4zucegae1f] { min-height: 60px; background: transparent; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; padding: 1rem; }
.aiops-check:last-child[b-4zucegae1f] { border-bottom: 0; }
.aiops-check strong[b-4zucegae1f] { color: var(--text-primary); font-size: 0.9rem; }
.aiops-check small[b-4zucegae1f] { display: block; margin-top: 0.25rem; color: var(--text-secondary); }
.aiops-btn[b-4zucegae1f] { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.aiops-btn:focus-visible[b-4zucegae1f], a:focus-visible[b-4zucegae1f] { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
.aiops-table[b-4zucegae1f] { min-width: 560px; }
.aiops-table-wrap[b-4zucegae1f] { overflow-x: auto; overscroll-behavior-x: contain; }
@media (max-width: 640px) {
    .aiops-page[b-4zucegae1f] { padding: 1rem; }
    .page-header-sticky h1[b-4zucegae1f] { font-size: 1.5rem; }
    .aiops-card[b-4zucegae1f] { padding: 1rem; }
    .aiops-row.between[b-4zucegae1f] { align-items: flex-start; }
    .aiops-row > .aiops-btn[b-4zucegae1f] { flex: 1 1 auto; }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* ChatMai Pricing (rate card 2026-10-12): the free plan as a status band, then the two things that
   are sold, side by side where there is room. Flat surfaces and the app's light/dark tokens only. */

.pricing-page[b-jzgwsuyy43] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 24px 64px;
    /* Columns follow the page's own width, not the viewport: the sidebar can take 260px of it. */
    container-type: inline-size;
}

/* ── Status band ───────────────────────────────────────────────────────── */

.pr-status[b-jzgwsuyy43] {
    margin-bottom: 28px;
}

.pr-eyebrow[b-jzgwsuyy43] {
    margin: 0 0 10px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.pr-status-band[b-jzgwsuyy43] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
}

.pr-stat[b-jzgwsuyy43] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 18px 22px;
}

.pr-stat + .pr-stat[b-jzgwsuyy43] {
    border-left: 1px solid var(--border-subtle);
}

.pr-plan-line[b-jzgwsuyy43] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.pr-plan-name[b-jzgwsuyy43] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.pr-stat-label[b-jzgwsuyy43] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
}

.pr-stat-value[b-jzgwsuyy43] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.pr-stat-note[b-jzgwsuyy43] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

.pr-stat-plan .pr-stat-note[b-jzgwsuyy43] {
    color: var(--text-muted);
}

/* Allowances in force: a footer row across the whole band. */
.pr-grants[b-jzgwsuyy43] {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 12px 22px;
    display: grid;
    gap: 4px;
    border-top: 1px solid var(--border-subtle);
}

.pr-grants li[b-jzgwsuyy43] {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── The two offers ────────────────────────────────────────────────────── */

.pr-offers[b-jzgwsuyy43] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.pricing-section[b-jzgwsuyy43] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    /* Connect links to #channels; the pinned desktop header must not cover the heading. */
    scroll-margin-top: 7rem;
}

.pr-offer-head[b-jzgwsuyy43] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}

.pr-offer-title[b-jzgwsuyy43] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.pr-rate[b-jzgwsuyy43] {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pr-rate-price[b-jzgwsuyy43] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pr-rate-unit[b-jzgwsuyy43] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.pr-facts[b-jzgwsuyy43] {
    list-style: none;
    margin: 12px 0 20px;
    padding: 0;
    display: grid;
    gap: 6px;
}

.pr-facts li[b-jzgwsuyy43] {
    position: relative;
    padding-left: 14px;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

.pr-facts li[b-jzgwsuyy43]::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted);
}

.pr-lead[b-jzgwsuyy43] {
    margin: 12px 0 16px;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

.pr-footnote[b-jzgwsuyy43] {
    margin: 16px 0 0;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-muted);
}

/* The note under a whole offer sits at its foot, so the two panels end on the same line. */
.pricing-section > .pr-footnote:last-child[b-jzgwsuyy43] {
    margin-top: auto;
    padding-top: 16px;
}

/* ── AI reply package ──────────────────────────────────────────────────── */

.billing-package[b-jzgwsuyy43] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.pr-field-label[b-jzgwsuyy43] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.billing-stepper[b-jzgwsuyy43] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.billing-step[b-jzgwsuyy43] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.billing-step:hover:not(:disabled)[b-jzgwsuyy43] {
    background: var(--bg-hover);
}

.billing-step:disabled[b-jzgwsuyy43] {
    color: var(--text-muted);
    opacity: 0.45;
    cursor: not-allowed;
}

.billing-step-value[b-jzgwsuyy43] {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pr-sizes[b-jzgwsuyy43] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.pr-size[b-jzgwsuyy43] {
    min-height: 34px;
    padding: 0 4px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.pr-size:hover:not(:disabled)[b-jzgwsuyy43] {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.pr-size[aria-pressed="true"][b-jzgwsuyy43] {
    background: var(--bg-primary);
    border-color: var(--accent-solid);
    box-shadow: inset 0 0 0 1px var(--accent-solid);
    color: var(--text-primary);
    font-weight: 700;
}

.pr-size:disabled[b-jzgwsuyy43] {
    cursor: not-allowed;
}

.pr-total[b-jzgwsuyy43] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 4px;
}

.pr-total .price[b-jzgwsuyy43] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.pr-total-note[b-jzgwsuyy43] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.pr-buy[b-jzgwsuyy43] {
    width: 100%;
}

.billing-contact[b-jzgwsuyy43] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.billing-contact p[b-jzgwsuyy43] {
    flex: 1 1 12rem;
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ── Channel expansion ─────────────────────────────────────────────────── */

.pr-options[b-jzgwsuyy43] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-subtle);
}

.pr-option[b-jzgwsuyy43] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.pr-option-line[b-jzgwsuyy43] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.pr-option-title[b-jzgwsuyy43] {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.pr-option-desc[b-jzgwsuyy43],
.pr-option-status[b-jzgwsuyy43] {
    margin: 4px 0 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

.pr-option-status[b-jzgwsuyy43] {
    color: var(--text-muted);
}

/* Not a price claim: the offer could not be read, so only the list price is shown. */
.pr-option-warn[b-jzgwsuyy43] {
    margin: 8px 0 0;
    padding-left: 10px;
    border-left: 2px solid var(--accent-amber);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

.pr-option-buy[b-jzgwsuyy43] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.pr-option-buy .pr-option-status[b-jzgwsuyy43] {
    flex: 1 1 14rem;
    margin: 0;
}

.pr-option-price[b-jzgwsuyy43] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.pr-option-price .price[b-jzgwsuyy43] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.pr-option-price .period[b-jzgwsuyy43],
.billing-list-price[b-jzgwsuyy43] {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.btn-add-slot[b-jzgwsuyy43] {
    min-width: 8.5rem;
}

/* Usage by channel type, folded unless a type is at its limit */
.pr-usage[b-jzgwsuyy43] {
    margin-top: 14px;
}

.pr-usage summary[b-jzgwsuyy43] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--touch-min);
    list-style: none;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}

.pr-usage summary[b-jzgwsuyy43]::-webkit-details-marker {
    display: none;
}

.pr-chevron[b-jzgwsuyy43] {
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-fast);
}

.pr-usage[open] .pr-chevron[b-jzgwsuyy43] {
    transform: translateY(2px) rotate(225deg);
}

.billing-channel-list[b-jzgwsuyy43] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    column-gap: 24px;
}

/* A long allowance wraps under the channel name rather than squeezing it to "F…". */
.billing-channel-list li[b-jzgwsuyy43] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
    padding: 9px 0;
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
}

.pr-ch-name[b-jzgwsuyy43] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.pr-ch-count[b-jzgwsuyy43] {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pr-ch-cap[b-jzgwsuyy43] {
    color: var(--text-muted);
}

.pr-ch-cap[b-jzgwsuyy43]::before {
    content: "·";
    margin-right: 8px;
}

/* ── Tags ──────────────────────────────────────────────────────────────── */

.pr-tag[b-jzgwsuyy43] {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 1px 8px;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: var(--radius-full);
    background: transparent;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.pr-tag-ok[b-jzgwsuyy43] {
    color: var(--accent-green-text);
}

.pr-tag-offer[b-jzgwsuyy43] {
    color: var(--link);
}

.pr-tag-warn[b-jzgwsuyy43] {
    color: var(--text-primary);
    border-color: var(--accent-amber);
    background: var(--accent-amber-bg);
}

/* ── Terms ─────────────────────────────────────────────────────────────── */

.pr-terms[b-jzgwsuyy43] {
    margin: 24px 0 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-muted);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn[b-jzgwsuyy43] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--control-h);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn-primary[b-jzgwsuyy43] {
    background: var(--accent-solid);
    color: var(--on-accent);
}

.btn-primary:hover:not(:disabled)[b-jzgwsuyy43] {
    background: var(--accent-solid-hover);
    color: var(--on-accent);
}

.btn-outline[b-jzgwsuyy43],
.btn-add-slot[b-jzgwsuyy43] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.btn-outline:hover:not(:disabled)[b-jzgwsuyy43],
.btn-add-slot:hover:not(:disabled)[b-jzgwsuyy43] {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.btn:disabled[b-jzgwsuyy43] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:focus-visible[b-jzgwsuyy43],
.billing-step:focus-visible[b-jzgwsuyy43],
.pr-size:focus-visible[b-jzgwsuyy43],
.pr-usage summary:focus-visible[b-jzgwsuyy43] {
    outline: 2px solid var(--border-accent);
    outline-offset: 2px;
}

.btn-spinner[b-jzgwsuyy43] {
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-jzgwsuyy43 0.6s linear infinite;
}

/* ── Notices and loading ───────────────────────────────────────────────── */

.alert[b-jzgwsuyy43] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    line-height: 1.5;
    margin-bottom: 20px;
}

.alert > iconify-icon[b-jzgwsuyy43] {
    margin-top: 2px;
}

.alert-info[b-jzgwsuyy43] {
    background: var(--accent-blue-bg);
    color: var(--accent-blue-text);
    border: 1px solid transparent;
}

.alert-danger[b-jzgwsuyy43] {
    background: var(--accent-red-bg);
    color: var(--accent-red-text);
    border: 1px solid color-mix(in srgb, var(--accent-red) 25%, transparent);
}

.loading-state[b-jzgwsuyy43] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
    color: var(--text-muted);
}

.spinner[b-jzgwsuyy43] {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border: 3px solid var(--border-default);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: spin-b-jzgwsuyy43 0.7s linear infinite;
}

/* ── Confirmation ──────────────────────────────────────────────────────── */

.modal-overlay[b-jzgwsuyy43] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--overlay);
    animation: fadeIn-b-jzgwsuyy43 0.2s ease;
}

.modal-card[b-jzgwsuyy43] {
    width: 100%;
    padding: 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
}

.payment-modal[b-jzgwsuyy43] {
    max-width: 440px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    text-align: left;
}

.payment-modal h3[b-jzgwsuyy43] {
    margin: 0 0 16px;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.payment-modal .alert[b-jzgwsuyy43] {
    margin-bottom: 16px;
}

.payment-summary[b-jzgwsuyy43] {
    margin: 0 0 12px;
    border-top: 1px solid var(--border-subtle);
}

.summary-row[b-jzgwsuyy43] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-base);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.summary-row > span:first-child[b-jzgwsuyy43] {
    min-width: 0;
}

.summary-row > span:last-child[b-jzgwsuyy43] {
    flex: none;
    color: var(--text-primary);
}

.summary-row.summary-item > span:first-child[b-jzgwsuyy43] {
    font-weight: 500;
    color: var(--text-primary);
}

.summary-row.discount > span:last-child[b-jzgwsuyy43] {
    color: var(--accent-green-text);
}

.summary-row.total[b-jzgwsuyy43] {
    padding-top: 14px;
    border-bottom: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.pr-modal-note[b-jzgwsuyy43] {
    margin: 0 0 20px;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

.modal-actions[b-jzgwsuyy43] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

/* ── Narrower pages ────────────────────────────────────────────────────── */

@container (max-width: 820px) {
    .pr-offers[b-jzgwsuyy43] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The band becomes rows: label and figure on one line, the note under them. */
@container (max-width: 600px) {
    .pr-status-band[b-jzgwsuyy43] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pr-stat[b-jzgwsuyy43] {
        padding: 14px 16px;
    }

    .pr-stat + .pr-stat[b-jzgwsuyy43] {
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
    }

    .pr-stat:not(.pr-stat-plan)[b-jzgwsuyy43] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: 12px;
    }

    .pr-stat:not(.pr-stat-plan) .pr-stat-note[b-jzgwsuyy43] {
        grid-column: 1 / -1;
    }

    .pr-stat-value[b-jzgwsuyy43] {
        font-size: 1.375rem;
    }

    .pr-grants[b-jzgwsuyy43] {
        padding: 12px 16px;
    }

    .pricing-section[b-jzgwsuyy43] {
        padding: 18px;
    }
}

@container (max-width: 480px) {
    .pr-sizes[b-jzgwsuyy43] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .billing-package[b-jzgwsuyy43] {
        padding: 12px;
    }

    .pr-option-buy > .btn[b-jzgwsuyy43] {
        flex: 1 1 100%;
    }
}

@media (max-width: 640px) {
    .pricing-page[b-jzgwsuyy43] {
        padding: 16px 16px 64px;
    }

    /* The shared mobile navigation already titles the page; a second "Pricing" heading repeated it. */
    .page-header-sticky .header-content h1[b-jzgwsuyy43] {
        display: none;
    }

    .page-header-sticky .header-content .subtitle[b-jzgwsuyy43] {
        margin-top: 0;
    }

    /* The header scrolls with the page on a phone, so nothing covers the section heading. */
    .pricing-section[b-jzgwsuyy43] {
        scroll-margin-top: calc(1rem + var(--cm-safe-top, 0px));
    }

    .modal-actions > .btn[b-jzgwsuyy43] {
        flex: 1 1 0;
    }
}

@media (pointer: coarse) {
    .pr-size[b-jzgwsuyy43] {
        min-height: var(--touch-min);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay[b-jzgwsuyy43] {
        animation: none;
    }

    .billing-step[b-jzgwsuyy43],
    .pr-size[b-jzgwsuyy43],
    .pr-chevron[b-jzgwsuyy43],
    .btn[b-jzgwsuyy43] {
        transition: none;
    }
}

@keyframes spin-b-jzgwsuyy43 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-jzgwsuyy43 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/Pages/Products.razor.rz.scp.css */
/* ── Products Page ─────────────────────── */
.products-page[b-tn08t9owse] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Common Components ───────────────── */
.cm-page-header[b-tn08t9owse] {
    margin-bottom: 0.5rem;
}

.cm-page-header h1[b-tn08t9owse] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.cm-page-header h1 svg[b-tn08t9owse] {
    color: var(--accent-primary);
}

.cm-page-header .subtitle[b-tn08t9owse] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.cm-section[b-tn08t9owse] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cm-grouped-list[b-tn08t9owse] {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle, var(--border-default));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ── Search ──────────────────────────── */
.search-section[b-tn08t9owse] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.search-box[b-tn08t9owse] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    max-width: 480px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 44px; /* 44px touch target */
}

.search-box:focus-within[b-tn08t9owse] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.search-box svg[b-tn08t9owse] {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 0.75rem;
}

.search-box input[b-tn08t9owse] {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: transparent;
    height: 100%;
    padding-right: 0.75rem;
}

.search-box input[b-tn08t9owse]::placeholder {
    color: var(--text-muted);
}

.product-count[b-tn08t9owse] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: normal;
    font-weight: 500;
}

.product-scope-hint[b-tn08t9owse] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ── Product list ────────────────────── */
.product-list[b-tn08t9owse] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-row[b-tn08t9owse] {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
}

.product-row + .product-row[b-tn08t9owse] {
    border-top: 1px solid var(--border-subtle, var(--border-default));
}

.product-thumb[b-tn08t9owse] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-thumb img[b-tn08t9owse] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-main[b-tn08t9owse] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.product-name[b-tn08t9owse] {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-desc[b-tn08t9owse] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.product-tags[b-tn08t9owse] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.product-tag[b-tn08t9owse] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.product-tag--warn[b-tn08t9owse] {
    background: var(--accent-amber-bg);
    color: var(--accent-amber-text);
}

.product-side[b-tn08t9owse] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.product-price[b-tn08t9owse] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.product-scope-btn[b-tn08t9owse] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
}

.product-scope-btn iconify-icon[b-tn08t9owse] {
    width: 16px;
    height: 16px;
    flex: none;
}

/* ── Scope dialog ────────────────────── */
.product-scope-dialog[b-tn08t9owse] {
    width: min(100%, 32rem);
}

.product-dialog-close[b-tn08t9owse] {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.product-dialog-close:hover[b-tn08t9owse] {
    background: var(--bg-tertiary);
}

/* ── Loading & Empty ─────────────────── */
.loading-state[b-tn08t9owse],
.empty-state[b-tn08t9owse] {
    text-align: center;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state svg[b-tn08t9owse] {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.spinner[b-tn08t9owse] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border-subtle, var(--border-default));
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-tn08t9owse 0.8s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-tn08t9owse {
    to { transform: rotate(360deg); }
}

.empty-state p[b-tn08t9owse],
.loading-state p[b-tn08t9owse] {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
}

.empty-hint[b-tn08t9owse] {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.alert[b-tn08t9owse] {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-danger[b-tn08t9owse] {
    background: var(--accent-red-bg);
    color: var(--accent-red-text);
    border: 1px solid transparent;
}

/* ── Mobile ──────────────────────────── */
@media (max-width: 640px) {
    .products-page[b-tn08t9owse] {
        padding: 1rem;
        gap: 1rem;
    }

    .search-section[b-tn08t9owse] {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }

    .search-box[b-tn08t9owse] {
        max-width: 100%;
    }

    .product-row[b-tn08t9owse] {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .product-thumb[b-tn08t9owse] {
        width: 48px;
        height: 48px;
    }

    .product-side[b-tn08t9owse] {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Hit areas, focus, disabled states */
button[b-tn08t9owse] {
    min-height: 44px;
}
button:focus-visible[b-tn08t9owse], input:focus-visible[b-tn08t9owse] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
button:disabled[b-tn08t9owse], input:disabled[b-tn08t9owse] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/SalesHubDocs.razor.rz.scp.css */
/* Sales Hub API docs. Tokens only (app.css), so both themes work. */

/* width: 100%: with auto margins in <article>'s flex column the page shrank to fit its content,
   so the signing formula's <pre> made it 605px wide on a 390px phone. Now the <pre> scrolls. */
.sh-docs[b-xkvzlh1lxg] {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 32px 84px;
    color: var(--text-primary);
    min-width: 0;
}
.material-symbols-rounded[b-xkvzlh1lxg] { font-size: 19px; }

/* ── Hero ── */
.sh-docs-hero[b-xkvzlh1lxg] {
    padding: 44px 46px 48px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.back[b-xkvzlh1lxg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--touch-min, 44px);
    margin-bottom: 30px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 650;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.back:hover[b-xkvzlh1lxg],
.back:focus-visible[b-xkvzlh1lxg] { color: var(--link); }
.eyebrow[b-xkvzlh1lxg] {
    display: block;
    color: var(--link);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.sh-docs h1[b-xkvzlh1lxg] {
    max-width: 760px;
    margin: 12px 0 16px;
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.sh-docs-hero > p[b-xkvzlh1lxg] {
    max-width: 66ch;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: 1.75;
    text-wrap: pretty;
}
.actions[b-xkvzlh1lxg] { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.actions .cm-btn[b-xkvzlh1lxg] { white-space: normal; text-align: center; max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 500; font-family: var(--font-sans); }

/* ── Quick start ── */
.doc-grid[b-xkvzlh1lxg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 12px;
    margin: 24px 0;
}
.doc-grid article[b-xkvzlh1lxg] {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.number[b-xkvzlh1lxg] { font: 700 var(--text-xs)/1 var(--font-mono); color: var(--link); letter-spacing: .06em; }
.sh-docs h2[b-xkvzlh1lxg] { margin: 14px 0 8px; font-size: var(--text-lg); line-height: 1.3; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sh-docs p[b-xkvzlh1lxg] { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.65; text-wrap: pretty; overflow-wrap: anywhere; }

/* ── Sections ── */
.doc-section[b-xkvzlh1lxg] {
    min-width: 0;
    margin-top: 14px;
    padding: 28px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.doc-intro[b-xkvzlh1lxg] { max-width: 70ch; }
/* The signing recipe scrolls sideways inside itself; the page never does. */
.doc-section pre[b-xkvzlh1lxg] {
    max-width: 100%;
    overflow-x: auto;
    margin: 22px 0 0;
    padding: 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font: 12px/1.75 var(--font-mono);
    white-space: pre;
}
.doc-section pre:focus-visible[b-xkvzlh1lxg] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.callout[b-xkvzlh1lxg] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 16px;
    padding: 14px;
    border-left: 3px solid var(--accent-primary);
    border-radius: 8px;
    background: var(--accent-light);
}
.callout .material-symbols-rounded[b-xkvzlh1lxg] { flex: none; color: var(--link); }
.sh-docs .callout p[b-xkvzlh1lxg] { color: var(--text-primary); }

.endpoint-list[b-xkvzlh1lxg] { margin-top: 18px; }
.endpoint-list > div[b-xkvzlh1lxg] {
    display: grid;
    grid-template-columns: 62px minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border-default);
}
.endpoint-list b[b-xkvzlh1lxg] {
    width: max-content;
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--accent-green-bg);
    color: var(--accent-green-text);
    font: 700 var(--text-xs)/1.2 var(--font-mono);
}
.endpoint-list b.post[b-xkvzlh1lxg] { background: var(--accent-amber-bg); color: var(--accent-amber-text); }
.endpoint-list code[b-xkvzlh1lxg] { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); font-size: var(--text-sm); }
.endpoint-list span[b-xkvzlh1lxg] { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; }

.two[b-xkvzlh1lxg] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; }
.two > div[b-xkvzlh1lxg] { min-width: 0; padding: 28px; }
.two > div + div[b-xkvzlh1lxg] { border-left: 1px solid var(--border-default); }
.two code[b-xkvzlh1lxg] { display: inline-block; max-width: 100%; margin-top: 5px; color: var(--link); font: 500 var(--text-sm)/1.5 var(--font-mono); overflow-wrap: anywhere; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .endpoint-list > div[b-xkvzlh1lxg] { grid-template-columns: 54px minmax(0, 1fr); }
    .endpoint-list span[b-xkvzlh1lxg] { grid-column: 2; }
}

@media (max-width: 820px) {
    .sh-docs[b-xkvzlh1lxg] { padding: 24px 14px 40px; }
    .sh-docs-hero[b-xkvzlh1lxg] { padding: 26px 22px 30px; }
    .back[b-xkvzlh1lxg] { margin-bottom: 22px; }
    .two[b-xkvzlh1lxg] { grid-template-columns: minmax(0, 1fr); }
    .two > div + div[b-xkvzlh1lxg] { border-left: 0; border-top: 1px solid var(--border-default); }
}

@media (max-width: 500px) {
    .sh-docs-hero[b-xkvzlh1lxg] { padding: 22px 18px 26px; }
    .sh-docs h1[b-xkvzlh1lxg] { font-size: 2rem; }
    .actions .cm-btn[b-xkvzlh1lxg] { width: 100%; }
    .doc-section[b-xkvzlh1lxg] { padding: 22px 18px; }
    .endpoint-list > div[b-xkvzlh1lxg] { grid-template-columns: minmax(0, 1fr); }
    .endpoint-list span[b-xkvzlh1lxg] { grid-column: auto; }
    .two[b-xkvzlh1lxg] { padding: 0; }
    .two > div[b-xkvzlh1lxg] { padding: 22px 18px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .sh-docs[b-xkvzlh1lxg] { padding-top: 16px; }
    .sh-docs-hero[b-xkvzlh1lxg] { padding-top: 22px; padding-bottom: 24px; }
    .back[b-xkvzlh1lxg] { margin-bottom: 16px; }
}

@media (pointer: coarse) {
    .back[b-xkvzlh1lxg] { min-height: var(--touch-min); }
}
/* /Components/Pages/SalesHubOrderDetail.razor.rz.scp.css */
/* Scoped CSS using updated structural semantic classes */

.cm-section[b-dqkeg5d28s] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 32px 88px;
    color: var(--text-primary);
    min-width: 0;
}

/* ── Header ── */
.sod-back[b-dqkeg5d28s] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--touch-min, 44px);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 650;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}
.sod-back:hover[b-dqkeg5d28s],
.sod-back:focus-visible[b-dqkeg5d28s] { color: var(--link); }

.cm-page-header[b-dqkeg5d28s] {
    margin: 16px 0 32px;
}
.sod-title[b-dqkeg5d28s] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
}
.sod-title > div:first-child[b-dqkeg5d28s] { min-width: 0; flex: 1 1 300px; }

.kicker[b-dqkeg5d28s] {
    color: var(--link);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.cm-section h1[b-dqkeg5d28s] {
    margin: 8px 0 5px;
    font-size: clamp(1.75rem, 5vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.04em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.cm-section h2[b-dqkeg5d28s] { margin: 7px 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.cm-section p[b-dqkeg5d28s],
.cm-section small[b-dqkeg5d28s] { color: var(--text-secondary); line-height: 1.55; }
.sod-title p[b-dqkeg5d28s] { margin: 0; }

.badges[b-dqkeg5d28s] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.status[b-dqkeg5d28s] {
    padding: 7px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 700;
}
.status.confirmed[b-dqkeg5d28s],
.status.completed[b-dqkeg5d28s],
.status.paid[b-dqkeg5d28s] { border-color: transparent; background: var(--accent-green-bg); color: var(--accent-green-text); }
.status.needs_review[b-dqkeg5d28s],
.status.pending[b-dqkeg5d28s] { border-color: transparent; background: var(--accent-amber-bg); color: var(--accent-amber-text); }
.status.cancelled[b-dqkeg5d28s],
.status.refunded[b-dqkeg5d28s],
.status.failed[b-dqkeg5d28s] { border-color: transparent; background: var(--accent-red-bg); color: var(--accent-red-text); }

.sod-message[b-dqkeg5d28s] { margin-bottom: 24px; }

/* ── Cards ── */
.cm-grouped-section[b-dqkeg5d28s] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.sod-grid[b-dqkeg5d28s] { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); gap: 16px; margin-bottom: 16px; }
.sod-grid .cm-grouped-section[b-dqkeg5d28s] { margin-bottom: 0; }

.cm-grouped-section dl[b-dqkeg5d28s] { margin: 20px 0 0; }
.cm-grouped-section dl div[b-dqkeg5d28s] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border-default);
    font-size: var(--text-sm);
}
.cm-grouped-section dt[b-dqkeg5d28s] { color: var(--text-secondary); font-weight: 500; }
.cm-grouped-section dd[b-dqkeg5d28s] { min-width: 0; overflow-wrap: anywhere; margin: 0; margin-left: auto; font-weight: 650; text-align: right; }

.review[b-dqkeg5d28s] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--accent-amber-bg);
    color: var(--accent-amber-text);
}
.review > .material-symbols-rounded[b-dqkeg5d28s] { flex: none; }
.review > span:last-child[b-dqkeg5d28s] { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.review small[b-dqkeg5d28s] { color: inherit; }

.total > strong[b-dqkeg5d28s] {
    display: block;
    margin-top: 18px;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

.section-head[b-dqkeg5d28s] { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.item-count[b-dqkeg5d28s] { color: var(--text-secondary); font-size: var(--text-sm); }

.line[b-dqkeg5d28s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 16px 0;
    border-top: 1px solid var(--border-default);
}
.line:last-child[b-dqkeg5d28s] { padding-bottom: 0; border-bottom: none; }
.line > div[b-dqkeg5d28s] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.line-main[b-dqkeg5d28s] { flex: 1 1 220px; overflow-wrap: anywhere; }
.line-price[b-dqkeg5d28s] { flex: 0 1 auto; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.line em[b-dqkeg5d28s] { color: var(--accent-amber-text); font-size: var(--text-xs); font-style: normal; }

.claim[b-dqkeg5d28s] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    background: var(--bg-secondary);
}
.claim > .material-symbols-rounded[b-dqkeg5d28s] { color: var(--link); font-size: 24px; }
.claim-details[b-dqkeg5d28s] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.actions-card[b-dqkeg5d28s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    border-left: 4px solid var(--accent-primary);
    background: var(--bg-secondary);
}
.actions-card > div:first-child[b-dqkeg5d28s] { min-width: 0; flex: 1 1 280px; }
.actions-card p[b-dqkeg5d28s] { margin: 8px 0 0; }
.action-buttons[b-dqkeg5d28s] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.action-buttons:empty[b-dqkeg5d28s] { display: none; }
.action-buttons .danger[b-dqkeg5d28s] { border-color: var(--accent-red); color: var(--accent-red-text); }
.action-buttons .danger:hover:not(:disabled)[b-dqkeg5d28s] { background: var(--accent-red-bg); border-color: var(--accent-red); color: var(--accent-red-text); }

.cm-btn[b-dqkeg5d28s] { white-space: normal; text-align: center; max-width: 100%; min-height: var(--touch-min, 44px); }
.cm-btn .material-symbols-rounded[b-dqkeg5d28s] { font-size: 20px; }

/* ── Empty / loading ── */
.sod-empty[b-dqkeg5d28s] { margin-top: 16px; text-align: center; padding: 48px 24px; }
.sod-empty .cm-empty-icon .material-symbols-rounded[b-dqkeg5d28s] { font-size: 32px; color: var(--text-secondary); }
.cm-section .sod-empty h1.cm-empty-title[b-dqkeg5d28s] { margin: 16px 0 24px; font-size: var(--text-lg); line-height: 1.4; letter-spacing: 0; }
.sod-skeleton .cm-skeleton[b-dqkeg5d28s] { margin-bottom: 12px; }
.sk-back[b-dqkeg5d28s] { width: 120px; height: 16px; }
.sk-kicker[b-dqkeg5d28s] { width: 160px; height: 14px; margin-top: 32px; }
.sk-title[b-dqkeg5d28s] { width: min(420px, 80%); height: 44px; margin-bottom: 32px !important; }
.sk-line[b-dqkeg5d28s] { width: 100%; height: 16px; }
.sk-half[b-dqkeg5d28s] { width: 50%; }
.sk-total[b-dqkeg5d28s] { width: 60%; height: 42px; }

/* ── Confirmation dialog ── */
.confirm-backdrop[b-dqkeg5d28s] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: calc(1rem + var(--cm-safe-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
    background: var(--overlay);
    overscroll-behavior: contain;
}
.confirm-box[b-dqkeg5d28s] {
    width: min(480px, 100%);
    max-height: calc(100dvh - 2rem - var(--cm-safe-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    padding: 32px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-xl);
}

html.cm-kb-open .confirm-backdrop[b-dqkeg5d28s] {
    height: var(--cm-vvh, 100dvh);
    bottom: auto;
}
html.cm-kb-open .confirm-box[b-dqkeg5d28s] {
    max-height: calc(var(--cm-vvh, 100dvh) - 2rem - var(--cm-safe-top, 0px) - env(safe-area-inset-bottom, 0px));
}

.confirm-head[b-dqkeg5d28s] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.confirm-close[b-dqkeg5d28s] { margin: -8px -8px 0 0; min-height: var(--touch-min, 44px); min-width: var(--touch-min, 44px); }
.confirm-box h2[b-dqkeg5d28s] { margin: 16px 0 8px; font-size: var(--text-xl); }
.confirm-box p[b-dqkeg5d28s] { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }
.command-icon[b-dqkeg5d28s] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--link);
    font-size: 24px;
}
.confirm-box label[b-dqkeg5d28s] {
    display: block;
    margin-top: 24px;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 650;
}
.confirm-box textarea[b-dqkeg5d28s] {
    width: 100%;
    box-sizing: border-box;
    min-height: 100px;
    padding: 12px 16px;
    resize: vertical;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    min-height: var(--touch-min, 44px);
}
.confirm-box textarea:focus[b-dqkeg5d28s] { border-color: var(--accent-primary); box-shadow: var(--ring); outline: 0; }
.confirm-box textarea[aria-invalid="true"][b-dqkeg5d28s] { border-color: var(--accent-red); }
.command-error[b-dqkeg5d28s] { margin-top: 12px; }
.confirm-actions[b-dqkeg5d28s] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; }

/* ── Responsive ── */
@media (max-width: 760px) {
    .cm-section[b-dqkeg5d28s] { padding: 24px 16px 48px; }
    .sod-title[b-dqkeg5d28s] { flex-direction: column; align-items: stretch; }
    .sod-title > div:first-child[b-dqkeg5d28s] { flex-basis: auto; }
    .badges[b-dqkeg5d28s] { justify-content: flex-start; }
    .sod-grid[b-dqkeg5d28s] { grid-template-columns: minmax(0, 1fr); }
    .cm-grouped-section[b-dqkeg5d28s] { padding: 20px; }
    .actions-card[b-dqkeg5d28s] { flex-direction: column; align-items: stretch; }
    .actions-card > div:first-child[b-dqkeg5d28s] { flex-basis: auto; }
    .action-buttons[b-dqkeg5d28s] { justify-content: stretch; }
    .action-buttons .cm-btn[b-dqkeg5d28s] { flex: 1 1 100%; }
    .claim[b-dqkeg5d28s] { grid-template-columns: auto minmax(0, 1fr); }
    .claim .cm-btn[b-dqkeg5d28s] { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 480px) {
    .confirm-actions .cm-btn[b-dqkeg5d28s] { flex: 1 1 100%; }
    .confirm-box[b-dqkeg5d28s] { padding: 24px 20px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .cm-section[b-dqkeg5d28s] { padding-top: 16px; }
    .cm-page-header[b-dqkeg5d28s] { margin: 16px 0 24px; }
    .confirm-box[b-dqkeg5d28s] { padding: 20px 24px; }
    .command-icon[b-dqkeg5d28s] { width: 40px; height: 40px; font-size: 20px; }
    .confirm-box h2[b-dqkeg5d28s] { margin-top: 12px; }
    .confirm-box textarea[b-dqkeg5d28s] { min-height: 80px; }
}

@media (pointer: coarse) {
    .sod-back[b-dqkeg5d28s] { min-height: var(--touch-min, 44px); }
    .cm-btn[b-dqkeg5d28s] { min-height: var(--touch-min, 44px); }
    .confirm-close[b-dqkeg5d28s] { min-height: var(--touch-min, 44px); min-width: var(--touch-min, 44px); }
}


/* Added for compliance: hit areas, focus, disabled states */
.btn[b-dqkeg5d28s], .btn-primary[b-dqkeg5d28s], .btn-secondary[b-dqkeg5d28s], .btn-danger[b-dqkeg5d28s], .btn-outline[b-dqkeg5d28s], .btn-sm[b-dqkeg5d28s], button[b-dqkeg5d28s], .form-control[b-dqkeg5d28s], .form-select[b-dqkeg5d28s], .toggle-slider[b-dqkeg5d28s], .sod-back[b-dqkeg5d28s] {
    min-height: 44px;
}
.btn:focus-visible[b-dqkeg5d28s], button:focus-visible[b-dqkeg5d28s], .form-control:focus-visible[b-dqkeg5d28s], .form-select:focus-visible[b-dqkeg5d28s], input:focus-visible[b-dqkeg5d28s], textarea:focus-visible[b-dqkeg5d28s] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.btn:disabled[b-dqkeg5d28s], button:disabled[b-dqkeg5d28s], .form-control:disabled[b-dqkeg5d28s], .form-select:disabled[b-dqkeg5d28s], input:disabled[b-dqkeg5d28s], textarea:disabled[b-dqkeg5d28s] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/SalesHubSettings.razor.rz.scp.css */
/* ── Sales Hub settings (/admin/sales-hub) ─────────────────────────
   Where the connector stands, then its settings and credentials side by side, then how an order
   travels. A workspace without a connector gets a setup state, not an error (2026-10-07): the
   lookup succeeded and simply found none. Kit classes live in chatmai-ui.css. */

.sales-settings-page[b-vpb5rnbq7b] { max-width: 1200px; }
.sales-doc-link .material-symbols-rounded[b-vpb5rnbq7b],
.sales-settings-page .cm-btn .material-symbols-rounded[b-vpb5rnbq7b] { font-size: 18px; }

.sales-load-error[b-vpb5rnbq7b] { align-items: center; flex-wrap: wrap; }
.sales-load-error-text[b-vpb5rnbq7b] { flex: 1 1 16rem; min-width: 0; }
.sales-load-error-text p[b-vpb5rnbq7b] { margin: 0.125rem 0 0; }

/* ── Not set up yet ───────────────────────────────────────────── */
.sales-setup[b-vpb5rnbq7b] {
    display: flex; align-items: flex-start; gap: 1.25rem;
    padding: 1.5rem;
}
.sales-setup-icon[b-vpb5rnbq7b],
.sales-connector-logo[b-vpb5rnbq7b] {
    flex: none;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: var(--radius-lg);
    background: var(--accent-light); color: var(--link);
}
.sales-setup-icon .material-symbols-rounded[b-vpb5rnbq7b],
.sales-connector-logo .material-symbols-rounded[b-vpb5rnbq7b] { font-size: 28px; }
.sales-setup-copy[b-vpb5rnbq7b] { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.sales-setup-copy h2[b-vpb5rnbq7b] { margin: 0; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.sales-setup-copy p[b-vpb5rnbq7b] { margin: 0; max-width: 42rem; font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); }
.sales-setup-actions[b-vpb5rnbq7b] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* ── Status ───────────────────────────────────────────────────── */
.sales-status[b-vpb5rnbq7b] { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.25rem; }
.sales-connector-copy[b-vpb5rnbq7b] { flex: 1 1 16rem; min-width: 0; }
.sales-connector-eyebrow[b-vpb5rnbq7b] { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.sales-connector-copy h2[b-vpb5rnbq7b] { margin: 0.125rem 0 0; font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.sales-connector-meta[b-vpb5rnbq7b] {
    display: flex; flex-wrap: wrap; gap: 0.375rem;
    margin: 0.25rem 0 0;
    font-size: var(--text-sm); color: var(--text-muted);
}
.sales-connector-url[b-vpb5rnbq7b] { font-family: var(--font-mono); overflow-wrap: anywhere; min-width: 0; }
.sales-connector-pills[b-vpb5rnbq7b] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── Settings and credentials ─────────────────────────────────── */
.sales-grid[b-vpb5rnbq7b] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.25rem;
    align-items: start;
}
.sales-settings-body[b-vpb5rnbq7b] { display: flex; flex-direction: column; gap: 1rem; }
.sales-input[b-vpb5rnbq7b] {
    padding: 0 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
}
.sales-input:focus[b-vpb5rnbq7b] { outline: none; border-color: var(--border-accent); box-shadow: var(--ring); }
.sales-field-days .sales-input[b-vpb5rnbq7b] { max-width: 10rem; }
.sales-global-off p[b-vpb5rnbq7b] { margin: 0.125rem 0 0; }

.sales-switches[b-vpb5rnbq7b] {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.sales-switches li + li[b-vpb5rnbq7b] { border-top: 1px solid var(--border-subtle); }
.sales-switch[b-vpb5rnbq7b] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
}
.sales-switch.is-disabled[b-vpb5rnbq7b] { cursor: not-allowed; }
.sales-switch-text[b-vpb5rnbq7b] { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.sales-switch-title[b-vpb5rnbq7b] { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.sales-switch-desc[b-vpb5rnbq7b] { font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
.sales-switch .cm-toggle[b-vpb5rnbq7b] { flex: none; }

.sales-save[b-vpb5rnbq7b] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.sales-save-message[b-vpb5rnbq7b] { flex: 1 1 16rem; margin: 0; }

.sales-credentials-body[b-vpb5rnbq7b] { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.sales-help[b-vpb5rnbq7b] { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }
.sales-generated[b-vpb5rnbq7b] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; width: 100%; }
.sales-generated .cm-alert p[b-vpb5rnbq7b] { margin: 0.125rem 0 0; }
.sales-generated .cm-field[b-vpb5rnbq7b] { width: 100%; }
.sales-bundle[b-vpb5rnbq7b] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: vertical;
}
.sales-rotation[b-vpb5rnbq7b] {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--accent-red-bg);
    border-radius: var(--radius-lg);
    background: var(--accent-red-bg);
}
.sales-rotation p[b-vpb5rnbq7b] { margin: 0 0 0.75rem; font-size: var(--text-sm); line-height: 1.6; color: var(--accent-red-text); }
.sales-rotation-actions[b-vpb5rnbq7b] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── How an order travels ─────────────────────────────────────── */
.sales-flow-steps[b-vpb5rnbq7b] {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
}
.sales-flow-steps li[b-vpb5rnbq7b] {
    display: flex; align-items: flex-start; gap: 0.75rem;
    font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary);
}
.sales-flow-icon[b-vpb5rnbq7b] {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg-secondary); color: var(--accent-primary);
}
.sales-flow-icon .material-symbols-rounded[b-vpb5rnbq7b] { font-size: 20px; }

/* ── Skeleton ─────────────────────────────────────────────────── */
.sales-sk-logo[b-vpb5rnbq7b] { width: 52px; height: 52px; border-radius: var(--radius-lg); }
.sales-sk-stack[b-vpb5rnbq7b] { flex: 1; display: flex; flex-direction: column; gap: 0.625rem; }
.sales-sk-line[b-vpb5rnbq7b] { height: 0.75rem; width: 70%; }
.sales-sk-line.is-short[b-vpb5rnbq7b] { width: 25%; }
.sales-sk-line.is-title[b-vpb5rnbq7b] { height: 1.125rem; width: 45%; }
.sales-sk-button[b-vpb5rnbq7b] { height: var(--control-h); width: 10rem; border-radius: var(--radius-md); }

@media (max-width: 960px) {
    .sales-grid[b-vpb5rnbq7b] { grid-template-columns: minmax(0, 1fr); }
    .sales-flow-steps[b-vpb5rnbq7b] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640.98px) {
    .sales-header .header-content h1[b-vpb5rnbq7b] { display: none; }
    .sales-header .header-actions .cm-btn[b-vpb5rnbq7b] { flex: 1 1 auto; }
    .sales-setup[b-vpb5rnbq7b] { flex-direction: column; padding: 1.25rem; }
    .sales-setup-actions[b-vpb5rnbq7b], .sales-setup-actions .cm-btn[b-vpb5rnbq7b] { width: 100%; }
    .sales-save[b-vpb5rnbq7b] { flex-direction: column; align-items: stretch; }
    .sales-save-btn[b-vpb5rnbq7b] { width: 100%; }
    .sales-field-days .sales-input[b-vpb5rnbq7b] { max-width: none; }
}
/* /Components/Pages/SelectPages.razor.rz.scp.css */
.select-pages-container[b-ct1srl6e9e] {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 24px;
}



.pages-list[b-ct1srl6e9e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.page-card[b-ct1srl6e9e] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s;
}

.page-card:hover[b-ct1srl6e9e] {
    border-color: var(--text-primary);
    background: var(--bg-tertiary);
}

.page-card.selected[b-ct1srl6e9e] {
    border-color: var(--text-primary);
    background: var(--bg-secondary);
}

.page-check[b-ct1srl6e9e] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-default);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.page-card.selected .page-check[b-ct1srl6e9e] {
    background: var(--text-primary);
    border-color: var(--text-primary);
}

.check-icon[b-ct1srl6e9e] {
    color: var(--bg-primary);
    font-size: 14px;
    font-weight: bold;
}

.page-avatar[b-ct1srl6e9e] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.page-info[b-ct1srl6e9e] {
    flex: 1;
}

.page-name[b-ct1srl6e9e] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
}

.page-id[b-ct1srl6e9e] {
    font-size: 12px;
    color: var(--text-muted);
}

.actions[b-ct1srl6e9e] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-secondary[b-ct1srl6e9e] {
    padding: 12px 24px;
    min-height: 44px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.btn-secondary:hover[b-ct1srl6e9e] {
    background: var(--bg-elevated);
}

.btn-primary[b-ct1srl6e9e] {
    padding: 12px 24px;
    min-height: 44px;
    background: var(--text-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover[b-ct1srl6e9e] {
    background: var(--text-primary);
}

.btn-primary:disabled[b-ct1srl6e9e] {
    background: var(--bg-surface);
    cursor: not-allowed;
}

.loading[b-ct1srl6e9e],
.empty[b-ct1srl6e9e] {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty a[b-ct1srl6e9e] {
    margin-top: 20px;
    display: inline-block;
}


/* The cards are checkbox buttons: reset the button chrome so they keep the card look. */
button.page-card[b-ct1srl6e9e] { width: 100%; text-align: left; font: inherit; color: inherit; }
.page-card[aria-checked="true"][b-ct1srl6e9e] { border-color: var(--text-primary); background: var(--bg-secondary); }
.pages-toolbar[b-ct1srl6e9e] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.75rem; }
.pages-count[b-ct1srl6e9e] { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; }
.loading[b-ct1srl6e9e] { display: flex; align-items: center; gap: 0.5rem; }
/* /Components/Pages/Settings.razor.rz.scp.css */
.cm-section[b-lojgih882i] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}



/* Grid Layout */
.settings-grid[b-lojgih882i] {
    display: grid;
    /* minmax(0, …): a long Page name must end in "…", not widen the column past the screen. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.main-column[b-lojgih882i],
.side-column[b-lojgih882i] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Cards */
.cm-grouped-list[b-lojgih882i] {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    border: none;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.card-header[b-lojgih882i] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.card-header h3[b-lojgih882i] {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.card-actions[b-lojgih882i] {
    margin-top: 20px;
}

/* The cards are flex columns (app.css), where margins add up instead of collapsing: a heading
   followed straight by its buttons (Legal, Danger zone) had a 40px empty band under its rule. */
.card-header + .card-actions[b-lojgih882i] {
    margin-top: 0;
}

.card-actions.stack[b-lojgih882i] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Forms */
.form-row[b-lojgih882i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-bottom: 14px;
}

/* The row spaces its fields; a field's own margin on top of the row gap left 30px between Name
   and Email, and New and Confirm password, against 14px everywhere else. */
.form-row > .form-group[b-lojgih882i] {
    margin-bottom: 0;
}

.form-group[b-lojgih882i] {
    margin-bottom: 14px;
}

.form-group label[b-lojgih882i] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-control[b-lojgih882i] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    background: transparent;
    transition: all 0.2s;
    outline: none;
    font-family: var(--font-sans);
}

.form-control:focus[b-lojgih882i] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-control:disabled[b-lojgih882i] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.form-hint[b-lojgih882i] {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.section-desc[b-lojgih882i] {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Password Requirements */
.password-requirements[b-lojgih882i] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
}

.password-requirements .req[b-lojgih882i] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.password-requirements .req.met[b-lojgih882i] {
    color: var(--accent-green);
}

.inline-error[b-lojgih882i] {
    color: var(--accent-red);
    font-size: 13px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Platform Summary */
.platform-summary[b-lojgih882i] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.platform-row[b-lojgih882i] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* No slot rows yet (they are created on the first Connect): the connected channels themselves. */
.platform-summary-list[b-lojgih882i] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.platform-summary-list li[b-lojgih882i] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.platform-summary-list .platform-name[b-lojgih882i] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.platform-summary-list .platform-usage[b-lojgih882i] {
    flex: none;
    margin-left: auto;
}

.platform-summary-note[b-lojgih882i] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.platform-summary-failed[b-lojgih882i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.platform-info[b-lojgih882i] {
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

.platform-name[b-lojgih882i] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.platform-usage[b-lojgih882i] {
    font-size: 12px;
    color: var(--text-muted);
}

.platform-bar-wrap[b-lojgih882i] {
    flex: 1;
}

.platform-bar[b-lojgih882i] {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.platform-bar-fill[b-lojgih882i] {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary));
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Subscription Card */
.subscription-card .plan-badge[b-lojgih882i] {
    display: inline-flex;
    /* A flex child stretches: "Free" was a full-width grey bar that read as a disabled field. */
    align-self: flex-start;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.plan-badge.free[b-lojgih882i] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.plan-badge.premium[b-lojgih882i] {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary));
    color: white;
}

.plan-expiry[b-lojgih882i] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Usage Meter */
.usage-section[b-lojgih882i] {
    margin: 16px 0;
}

.usage-header[b-lojgih882i] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.usage-bar[b-lojgih882i] {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.usage-note[b-lojgih882i] {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.usage-grants[b-lojgih882i] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.usage-fill[b-lojgih882i] {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary));
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Danger Zone */
.danger-card[b-lojgih882i] {
    border-color: rgba(239, 68, 68, 0.3);
    position: relative;
    overflow: hidden;
}

.danger-stripe[b-lojgih882i] {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-red);
}

/* Buttons */
.btn[b-lojgih882i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    font-family: var(--font-sans);
}

.btn-primary[b-lojgih882i] {
    background: var(--accent-solid);
    color: var(--on-accent);
}

.btn-primary:hover[b-lojgih882i] {
    background: var(--accent-solid-hover);
    color: var(--on-accent);
}

.btn-outline[b-lojgih882i] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.btn-outline:hover[b-lojgih882i] {
    background: var(--bg-tertiary);
}

.btn-danger-outline[b-lojgih882i] {
    background: var(--accent-red-bg);
    color: var(--accent-red-text);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-danger-outline:hover[b-lojgih882i] {
    background: var(--accent-red-bg);
}

.btn-danger[b-lojgih882i] {
    background: var(--accent-red-bg);
    color: var(--accent-red-text);

    background: var(--accent-red-text);
    color: white;
}

.btn-danger:hover[b-lojgih882i] {
    background: var(--accent-red-text);
}

.btn:disabled[b-lojgih882i] {
    opacity: 0.5;
    cursor: not-allowed;
}

.full-width[b-lojgih882i] {
    width: 100%;
}

.btn-spinner[b-lojgih882i] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-lojgih882i 0.6s linear infinite;
}

/* Alerts */
.alert[b-lojgih882i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
}

.alert-success[b-lojgih882i] {
    background: var(--bg-tertiary);
    color: var(--accent-green);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-danger[b-lojgih882i] {
    background: var(--accent-red-bg);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Loading */
.loading-state[b-lojgih882i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    color: var(--text-muted);
}

.spinner[b-lojgih882i] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-default);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: spin-b-lojgih882i 0.7s linear infinite;
    margin-bottom: 12px;
}

/* Modal */
.modal-overlay[b-lojgih882i] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    animation: fadeIn-b-lojgih882i 0.2s ease;
}

.modal-card[b-lojgih882i] {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    border: none;
    box-shadow: var(--shadow-xl);
}

.modal-icon[b-lojgih882i] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.modal-icon.danger[b-lojgih882i] {
    background: var(--accent-red-bg);
}

.modal-card h3[b-lojgih882i] {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.modal-card p[b-lojgih882i] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.modal-warning[b-lojgih882i] {
    background: var(--accent-red-bg);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    text-align: left;
}

.modal-warning ul[b-lojgih882i] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--accent-red);
}

.modal-warning li[b-lojgih882i] {
    margin-bottom: 4px;
}

.modal-actions[b-lojgih882i] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 900px) {
    .settings-grid[b-lojgih882i] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The row is one column here: no second field to keep 200px beside. */
    .platform-info[b-lojgih882i] {
        min-width: 0;
        flex: 1 1 auto;
    }

    .form-row[b-lojgih882i] {
        grid-template-columns: 1fr;
    }

    .password-requirements[b-lojgih882i] {
        grid-template-columns: 1fr;
    }
}

@keyframes spin-b-lojgih882i {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-lojgih882i {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Phones: the same 16px page margin as Dashboard, Knowledge and AI Settings (was 24px here). */
@media (max-width: 640px) {
    .cm-section[b-lojgih882i] {
        padding: 16px;
    }
}

.page-ai-toggle[b-lojgih882i] { margin-left:auto; display:flex; align-items:center; gap:8px; }
.page-ai-toggle > span[b-lojgih882i] {font-size:.8rem;color:var(--text-muted);}

.page-ai-toggle .switch[b-lojgih882i] { position:relative; display:inline-flex; width:48px; height:44px; align-items:center; flex-shrink:0; cursor:pointer; }
.page-ai-toggle input[b-lojgih882i] { position:absolute; opacity:0; width:48px; height:44px; margin:0; z-index:1; cursor:pointer; }
.page-ai-toggle .slider[b-lojgih882i] { width:48px; height:28px; background:var(--border-strong,#aaa); border-radius:20px; transition:background .15s; position:relative; }
.page-ai-toggle .slider[b-lojgih882i]::before { content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; border-radius:50%; background:white; transition:transform .15s; }
.page-ai-toggle input:checked + .slider[b-lojgih882i] {background:var(--accent-primary,#6055ed);}
.page-ai-toggle input:checked + .slider[b-lojgih882i]::before {transform:translateX(20px);}
.page-ai-toggle input:focus-visible + .slider[b-lojgih882i] {outline:2px solid var(--accent-primary,#6055ed);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.page-ai-toggle .slider[b-lojgih882i],.page-ai-toggle .slider[b-lojgih882i]::before{transition:none;}}

.page-ai-feedback[b-lojgih882i] { color:var(--text-primary); font-size:.875rem; }
.page-ai-feedback:empty[b-lojgih882i] { display:none; }
.page-ai-toggle input:disabled[b-lojgih882i] { cursor:wait; }

.btn[b-lojgih882i] { min-height: 44px; }
.page-ai-toggle .switch[b-lojgih882i] { min-height: 44px; }


/* Added for compliance: hit areas, focus, disabled states */
.btn[b-lojgih882i], .btn-primary[b-lojgih882i], .btn-secondary[b-lojgih882i], .btn-danger[b-lojgih882i], .btn-outline[b-lojgih882i], .btn-sm[b-lojgih882i], button[b-lojgih882i], .form-control[b-lojgih882i], .form-select[b-lojgih882i], .toggle-slider[b-lojgih882i], .sod-back[b-lojgih882i] {
    min-height: 44px;
}
.btn:focus-visible[b-lojgih882i], button:focus-visible[b-lojgih882i], .form-control:focus-visible[b-lojgih882i], .form-select:focus-visible[b-lojgih882i], input:focus-visible[b-lojgih882i], textarea:focus-visible[b-lojgih882i] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.btn:disabled[b-lojgih882i], button:disabled[b-lojgih882i], .form-control:disabled[b-lojgih882i], .form-select:disabled[b-lojgih882i], input:disabled[b-lojgih882i], textarea:disabled[b-lojgih882i] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Operational forms use the same quiet panels as the rest of the app. */
.cm-grouped-list[b-lojgih882i] { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: none; padding: 1.25rem; }
.settings-security[b-lojgih882i] { display: block; }
.settings-security > summary[b-lojgih882i] { min-height: 44px; cursor: pointer; list-style: none; margin: 0; padding: 0; border: 0; }
.settings-security > summary[b-lojgih882i]::-webkit-details-marker { display: none; }
.settings-security > summary[b-lojgih882i]::after { content: '+'; margin-left: auto; font-size: 1.25rem; color: var(--text-secondary); }
.settings-security[open] > summary[b-lojgih882i] { margin-bottom: 1rem; }
.settings-security[open] > summary[b-lojgih882i]::after { content: '−'; }
.settings-security > summary:focus-visible[b-lojgih882i] { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
@media (max-width: 640px) { .cm-grouped-list[b-lojgih882i] { padding: 1rem; } }
/* /Components/Pages/ShopeeGuide.razor.rz.scp.css */
.shg[b-lptp8rch87]{max-width:900px;margin:0 auto;padding:40px 32px 84px;color:var(--text-primary)}
.shg-hero[b-lptp8rch87]{padding:34px 34px 36px;border:1px solid var(--border-default);border-radius:16px;background:var(--bg-primary)}
/* 44px to hit, the same look: the negative margins give the extra height back to the hero's padding. */
.shg .back[b-lptp8rch87]{display:inline-flex;align-items:center;gap:8px;min-height:var(--touch-min, 44px);margin:-12px 0 14px -8px;padding:0 10px 0 8px;border-radius:10px;color:var(--text-secondary);text-decoration:none;font-size:.8rem;font-weight:650}
.shg .back:hover[b-lptp8rch87]{color:var(--accent-primary)}
.shg .back:focus-visible[b-lptp8rch87]{outline:2px solid var(--accent-primary);outline-offset:0}
.shg .eyebrow[b-lptp8rch87]{display:block;color:var(--accent-primary);font-size:.69rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.shg h1[b-lptp8rch87]{max-width:22ch;margin:10px 0 14px;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.shg-hero>p[b-lptp8rch87]{max-width:64ch;margin:0;color:var(--text-secondary);font-size:.95rem;line-height:1.75;text-wrap:pretty}

.shg-gate[b-lptp8rch87]{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin-top:16px;padding:22px;border:1px solid var(--accent-amber);border-radius:14px;background:var(--accent-amber-bg)}
.shg-gate .material-symbols-rounded[b-lptp8rch87]{color:var(--accent-amber);font-size:26px}
.shg-gate h2[b-lptp8rch87]{margin:0 0 8px;font-size:1.05rem;letter-spacing:-.02em}
.shg-gate p[b-lptp8rch87]{margin:0;color:var(--text-primary);font-size:.86rem;line-height:1.7}
.shg .quiet[b-lptp8rch87]{margin-top:8px !important;color:var(--text-secondary);font-size:.8rem}

/* minmax(0,1fr): the nowrap webhook URL scrolls inside .copyable instead of widening the page. */
.shg-steps[b-lptp8rch87]{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
.shg-steps article[b-lptp8rch87]{padding:24px;border:1px solid var(--border-default);border-radius:14px;background:var(--bg-primary)}
.shg-steps article.critical[b-lptp8rch87]{border-color:var(--accent-amber)}
.shg .n[b-lptp8rch87]{font:700 .72rem/1 var(--font-mono);color:var(--accent-primary);letter-spacing:.06em}
.shg-steps h3[b-lptp8rch87]{margin:12px 0 8px;font-size:1.06rem;line-height:1.3;letter-spacing:-.025em}
.shg-steps p[b-lptp8rch87]{margin:0;color:var(--text-secondary);font-size:.86rem;line-height:1.7;text-wrap:pretty}
.shg-steps ul[b-lptp8rch87]{margin:12px 0 0;padding-left:18px;color:var(--text-secondary);font-size:.84rem;line-height:1.8}
.shg .fields[b-lptp8rch87]{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0 0}
.shg .fields dt[b-lptp8rch87]{font:600 .78rem/1.6 var(--font-mono);color:var(--text-primary)}
.shg .fields dd[b-lptp8rch87]{margin:0;color:var(--text-secondary);font-size:.82rem;line-height:1.6}
.shg .copyable[b-lptp8rch87]{margin-top:14px;padding:12px 14px;border:1px solid var(--border-default);border-radius:10px;background:var(--bg-secondary);overflow-x:auto}
.shg .copyable code[b-lptp8rch87]{color:var(--text-primary);font:500 .8rem/1.5 var(--font-mono);white-space:nowrap}
.shg .ext[b-lptp8rch87]{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;color:var(--link);text-decoration:none;font-size:.84rem;font-weight:650}
.shg .ext:hover[b-lptp8rch87]{text-decoration:underline}
.shg .ext .material-symbols-rounded[b-lptp8rch87]{font-size:16px}
.shg .cta[b-lptp8rch87]{display:inline-flex;align-items:center;min-height:var(--touch-min, 44px);margin-top:16px;padding:10px 18px;border-radius:10px;background:var(--text-primary);color:var(--bg-primary);text-decoration:none;font-size:.84rem;font-weight:650}
.shg .cta:hover[b-lptp8rch87]{background:var(--text-secondary)}

.shg-trouble[b-lptp8rch87]{margin-top:28px;padding:26px;border:1px solid var(--border-default);border-radius:14px;background:var(--bg-primary)}
.shg-trouble h2[b-lptp8rch87]{margin:0 0 6px;font-size:1.06rem;letter-spacing:-.025em}
.shg-trouble .rows>div[b-lptp8rch87]{display:grid;grid-template-columns:minmax(200px,.9fr) 1.4fr;gap:16px;padding:14px 0;border-top:1px solid var(--border-default)}
.shg-trouble b[b-lptp8rch87]{color:var(--text-primary);font-size:.84rem;font-weight:650;line-height:1.6}
.shg-trouble span[b-lptp8rch87]{color:var(--text-secondary);font-size:.82rem;line-height:1.65}

@media(max-width:760px){
  .shg[b-lptp8rch87]{padding:24px 14px 70px}
  .shg-hero[b-lptp8rch87]{padding:26px 20px 28px}
  .shg-steps article[b-lptp8rch87]{padding:20px 18px}
  .shg .fields[b-lptp8rch87]{grid-template-columns:1fr;gap:2px 0}
  .shg .fields dd[b-lptp8rch87]{margin-bottom:8px}
  .shg-trouble .rows>div[b-lptp8rch87]{grid-template-columns:1fr;gap:4px}
}
/* /Components/Pages/TeamDashboard.razor.rz.scp.css */
/* ── Team dashboard (/admin/dashboard) ─────────────────────────────
   Four figures, then who is carrying the open conversations, busiest first, each with a bar
   against the busiest person. Kit classes (cm-panel, cm-kpi, cm-pill, cm-avatar, cm-bar) live in
   chatmai-ui.css. */

.team-dash[b-380zooq5cm] { max-width: 1200px; }

.team-dash-kpis[b-380zooq5cm] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-dash-unknown[b-380zooq5cm] { color: var(--text-muted); }

.team-dash-alert[b-380zooq5cm] { margin: 1rem 1.25rem 0; align-items: center; flex-wrap: wrap; }
.team-dash-alert-text[b-380zooq5cm] { flex: 1 1 14rem; min-width: 0; }

.team-dash-list[b-380zooq5cm] { list-style: none; margin: 0; padding: 0; }
.team-dash-row[b-380zooq5cm] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(9rem, 14rem);
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}
.team-dash-row:last-child[b-380zooq5cm] { border-bottom: 0; }
.team-dash-row.is-inactive .cm-avatar[b-380zooq5cm] { opacity: 0.6; }

.team-dash-who[b-380zooq5cm] { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.team-dash-name[b-380zooq5cm] { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.team-dash-email[b-380zooq5cm] { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.team-dash-tags[b-380zooq5cm] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.25rem; }
.team-dash-last[b-380zooq5cm] { font-size: var(--text-xs); color: var(--text-muted); }

.team-dash-load[b-380zooq5cm] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.125rem 0.5rem;
}
.team-dash-count[b-380zooq5cm] {
    font-size: var(--text-lg); font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.team-dash-count-label[b-380zooq5cm] { font-size: var(--text-xs); color: var(--text-muted); }
.team-dash-bar[b-380zooq5cm] { grid-column: 1 / -1; margin-top: 0.25rem; }

/* Skeleton rows while the team loads */
.team-dash-sk-avatar[b-380zooq5cm] { width: 40px; height: 40px; border-radius: 50%; }
.team-dash-sk-lines[b-380zooq5cm] { display: flex; flex-direction: column; gap: 0.5rem; grid-column: 2 / -1; }
.team-dash-sk-line[b-380zooq5cm] { height: 0.75rem; width: 60%; }
.team-dash-sk-line.is-short[b-380zooq5cm] { width: 35%; }

@media (max-width: 900px) {
    .team-dash-kpis[b-380zooq5cm] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640.98px) {
    .team-dash-header .header-content h1[b-380zooq5cm] { display: none; }
    .team-dash-header .header-actions .cm-btn[b-380zooq5cm] { flex: 1 1 auto; }
    .team-dash-row[b-380zooq5cm] {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 1rem;
    }
    .team-dash-load[b-380zooq5cm] { grid-column: 1 / -1; }
}
/* /Components/Shared/AiSimulationModal.razor.rz.scp.css */
/* ── Test a reply (dry run) ─────────────────────────────────── */
/* Layout and theme come from .cm-dialog in chatmai-ui.css; these only widen and arrange it. */
.sim-dialog[b-lx1esnzhlg] {
    width: min(100%, 46rem);
}

.sim-title-group[b-lx1esnzhlg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.sim-sub[b-lx1esnzhlg] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.sim-close[b-lx1esnzhlg] {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.sim-close:hover[b-lx1esnzhlg] {
    background: var(--bg-tertiary);
}

.sim-body[b-lx1esnzhlg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sim-controls-grid[b-lx1esnzhlg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.sim-field[b-lx1esnzhlg] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.sim-field label[b-lx1esnzhlg],
.sim-turn-role[b-lx1esnzhlg] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sim-hint[b-lx1esnzhlg] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.sim-section[b-lx1esnzhlg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sim-section-title[b-lx1esnzhlg] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sim-turns[b-lx1esnzhlg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sim-turn[b-lx1esnzhlg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.sim-turn.is-shop[b-lx1esnzhlg] {
    border-inline-start: 3px solid var(--accent-solid);
}

.sim-turn-head[b-lx1esnzhlg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sim-turn-remove[b-lx1esnzhlg] {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.sim-turn-remove:hover[b-lx1esnzhlg] {
    color: var(--accent-red-text);
    background: var(--accent-red-bg);
}

.sim-turn-input[b-lx1esnzhlg] {
    resize: vertical;
}

.sim-turn-actions[b-lx1esnzhlg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sim-turn-actions .cm-btn[b-lx1esnzhlg] {
    min-height: 44px;
}

.sim-run-bar[b-lx1esnzhlg] {
    display: flex;
    justify-content: flex-end;
}

.sim-run-btn[b-lx1esnzhlg] {
    min-height: 44px;
    min-width: 8rem;
}

/* ── Result ─────────────────────────────────────────────────── */
.sim-results[b-lx1esnzhlg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.sim-outcome[b-lx1esnzhlg] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sim-outcome--ok[b-lx1esnzhlg] { background: var(--accent-green-bg); color: var(--accent-green-text); }
.sim-outcome--warn[b-lx1esnzhlg] { background: var(--accent-amber-bg); color: var(--accent-amber-text); }
.sim-outcome--error[b-lx1esnzhlg] { background: var(--accent-red-bg); color: var(--accent-red-text); }

.sim-refusal[b-lx1esnzhlg],
.sim-error[b-lx1esnzhlg] {
    margin: 0;
    color: var(--accent-red-text);
}

.sim-warn[b-lx1esnzhlg] {
    margin: 0;
    color: var(--accent-amber-text);
}

.sim-safe[b-lx1esnzhlg],
.sim-muted[b-lx1esnzhlg] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.sim-reply-card[b-lx1esnzhlg] {
    padding: 0.875rem 1rem;
    border: 1px solid var(--accent-solid);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
}

.sim-reply-label[b-lx1esnzhlg] {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.sim-reply-content[b-lx1esnzhlg] {
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A reply sent as several messages (033): one bubble per message, in order. */
.sim-reply-parts[b-lx1esnzhlg] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sim-reply-part[b-lx1esnzhlg] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.sim-part-pause[b-lx1esnzhlg] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sim-card[b-lx1esnzhlg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

/* A held draft is never a reply: a dashed amber frame, never the solid accent of .sim-reply-card. */
.sim-held-draft[b-lx1esnzhlg] {
    border: 1px dashed var(--accent-amber-text);
}

.sim-held-reply[b-lx1esnzhlg] {
    color: var(--text-secondary);
}

.sim-card h4[b-lx1esnzhlg] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sim-image[b-lx1esnzhlg] {
    margin: 0;
    padding: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.sim-image img[b-lx1esnzhlg] {
    display: block;
    max-width: 100%;
    max-height: 200px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.sim-dl[b-lx1esnzhlg] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.875rem;
}

.sim-dl dt[b-lx1esnzhlg] { color: var(--text-secondary); }
.sim-dl dd[b-lx1esnzhlg] { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }

.sim-mono[b-lx1esnzhlg] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.sim-attempts[b-lx1esnzhlg],
.sim-sources[b-lx1esnzhlg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sim-attempt[b-lx1esnzhlg],
.sim-source[b-lx1esnzhlg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.sim-attempt-status[b-lx1esnzhlg] { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.sim-attempt-status--success[b-lx1esnzhlg] { color: var(--accent-green-text); }
.sim-attempt-status--error[b-lx1esnzhlg],
.sim-attempt-status--refusal[b-lx1esnzhlg] { color: var(--accent-red-text); }
.sim-attempt-status--no_response[b-lx1esnzhlg] { color: var(--accent-amber-text); }

.sim-source-title[b-lx1esnzhlg] {
    min-width: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.sim-cited[b-lx1esnzhlg] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--accent-solid);
    color: var(--on-accent);
}

/* ── Phones ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .sim-controls-grid[b-lx1esnzhlg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sim-run-btn[b-lx1esnzhlg] {
        width: 100%;
    }
}
/* /Components/Shared/AppNotificationCenter.razor.rz.scp.css */
/* The notification bell (fixed top-right) and its panel. Moved out of an inline <style> on
   2026-09-28 so it is scoped and follows the Light/Dark choice instead of the device setting. */
.snc[b-wtgexd3cy4] { position: fixed; z-index: 850; top: calc(18px + var(--cm-safe-top, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); }

.snc-bell[b-wtgexd3cy4] { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border-default); border-radius: 11px; background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); z-index: 2; }
.snc-bell:hover[b-wtgexd3cy4] { border-color: var(--border-strong); background: var(--bg-secondary); transform: translateY(-1px); }
.snc-bell:active[b-wtgexd3cy4] { transform: translateY(1px); }

.snc-count[b-wtgexd3cy4] { position: absolute; right: -4px; top: -5px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--bg-app); border-radius: 10px; background: #d92d20; color: #ffffff; font: 700 11px/16px var(--font-sans); }

.snc-panel[b-wtgexd3cy4] { position: absolute; top: 52px; right: 0; width: 420px; max-height: calc(100dvh - 88px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-default); border-radius: 16px; background: var(--bg-primary); box-shadow: var(--shadow-xl); z-index: 2; }

/* Mobile bottom sheet */
@media(max-width: 768px) {
  .snc[b-wtgexd3cy4] { top: calc(12px + var(--cm-safe-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
  .snc-panel[b-wtgexd3cy4] { position: fixed; top: auto; bottom: max(12px, env(safe-area-inset-bottom, 0px)); right: 12px; left: 12px; width: auto; max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px) - var(--cm-safe-top, 0px)); border-radius: 16px; box-shadow: 0 -4px 24px rgba(0,0,0,0.15); }
}

.snc-head[b-wtgexd3cy4] { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border-default); }
.snc-head > div[b-wtgexd3cy4] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.snc-head strong[b-wtgexd3cy4] { font-size: 14px; color: var(--text-primary); }
.snc-head span[b-wtgexd3cy4] { font-size: 12px; color: var(--text-secondary); }
.snc-head button[b-wtgexd3cy4] { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 14px; padding: 0 12px; }
.snc-head button:hover[b-wtgexd3cy4] { background: var(--bg-hover); color: var(--text-primary); }
.snc-head .snc-close[b-wtgexd3cy4] { padding: 0; width: 44px; }
.snc-head .snc-mark-read[b-wtgexd3cy4] { color: var(--accent-primary); font-weight: 500; }
.snc-head .snc-mark-read:disabled[b-wtgexd3cy4] { opacity: 0.5; pointer-events: none; }

.snc-list[b-wtgexd3cy4] { overflow-y: auto; overscroll-behavior: contain; flex: 1; }

.snc-item[b-wtgexd3cy4] { position: relative; width: 100%; display: grid; grid-template-columns: 12px 36px minmax(0, 1fr); gap: 12px; padding: 16px; border: 0; border-bottom: 1px solid var(--border-default); background: var(--bg-primary); color: var(--text-primary); text-align: left; cursor: pointer; transition: background var(--transition-fast); align-items: start; }
.snc-item:hover[b-wtgexd3cy4] { background: var(--bg-secondary); }
.snc-item.unread[b-wtgexd3cy4] { background: var(--bg-secondary); }
.snc-item > span:last-child[b-wtgexd3cy4] { display: flex; flex-direction: column; gap: 4px; }
.snc-item strong[b-wtgexd3cy4] { font-size: 14px; line-height: 1.4; color: var(--text-primary); }
.snc-item small[b-wtgexd3cy4] { font-size: 14px; color: var(--text-secondary); line-height: 1.4; }
.snc-item time[b-wtgexd3cy4] { font-size: 12px; color: var(--text-muted); }
.snc-item:disabled[b-wtgexd3cy4] { opacity: 0.6; pointer-events: none; }

.snc-dot[b-wtgexd3cy4] { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.snc-item.unread .snc-dot[b-wtgexd3cy4] { background: var(--accent-primary); }

.snc-cat-icon[b-wtgexd3cy4] { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-surface); color: var(--text-secondary); }
.snc-cat-icon .material-symbols-rounded[b-wtgexd3cy4] { font-size: 20px; }

/* Status tokens */
.snc-cat-chat[b-wtgexd3cy4] { background: var(--accent-blue-bg); color: var(--accent-blue-text); }
.snc-cat-ai[b-wtgexd3cy4] { background: var(--accent-green-bg); color: var(--accent-green-text); }
.snc-cat-system[b-wtgexd3cy4] { background: var(--accent-amber-bg); color: var(--accent-amber-text); }
.snc-cat-sales[b-wtgexd3cy4] { background: var(--accent-light); color: var(--link); }

.snc-item-header[b-wtgexd3cy4] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.snc-cat-label[b-wtgexd3cy4] { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--accent-primary); }

.snc-loading[b-wtgexd3cy4], .snc-error[b-wtgexd3cy4], .snc-empty[b-wtgexd3cy4] { padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.snc-empty .material-symbols-rounded[b-wtgexd3cy4] { font-size: 40px; }
.snc-error button[b-wtgexd3cy4] { margin-top: 8px; padding: 0 16px; min-height: 44px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-primary); cursor: pointer; font-size: 14px; color: var(--text-primary); font-weight: 500; }

.snc-push[b-wtgexd3cy4] { display: flex; align-items: center; gap: 12px; margin: 12px; padding: 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-surface); color: var(--text-primary); text-align: left; cursor: pointer; min-height: 44px; flex: none; }
.snc-push>span:last-child[b-wtgexd3cy4] { display: flex; flex-direction: column; gap: 2px; }
.snc-push strong[b-wtgexd3cy4] { font-size: 14px; }
.snc-push small[b-wtgexd3cy4] { font-size: 12px; color: var(--text-secondary); }

.snc-note[b-wtgexd3cy4] { flex: none; display: flex; align-items: flex-start; gap: 12px; margin: 12px 12px 0; padding: 12px; border-radius: 12px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.snc-note .material-symbols-rounded[b-wtgexd3cy4] { font-size: 20px; flex: none; }
.snc-note--error[b-wtgexd3cy4] { background: var(--accent-red-bg); color: var(--accent-red-text); }

.snc-backdrop[b-wtgexd3cy4] { position: fixed; inset: 0; z-index: 1; background: transparent; }

@media(max-width: 1024px) { body:has(.mobile-chat-active) .snc[b-wtgexd3cy4] { display: none; } }

.snc:has(.snc-panel)[b-wtgexd3cy4] { z-index: 1050; }
.snc-backdrop[b-wtgexd3cy4] { touch-action: none; background: var(--overlay); }
.snc-head > div[b-wtgexd3cy4] { min-width: 0; overflow-wrap: anywhere; }
.snc-head .snc-mark-read[b-wtgexd3cy4] { color: var(--link); flex-shrink: 0; max-width: 45%; white-space: normal; line-height: 1.35; }
.snc-cat-label[b-wtgexd3cy4] { color: var(--link); }

/* Urgent / Highest Priority visible styling */
.snc-bell--urgent[b-wtgexd3cy4] {
  border-color: #f43f5e;
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.25), var(--shadow-sm);
}

.snc-count--urgent[b-wtgexd3cy4] {
  background: #e11d48;
  box-shadow: 0 0 0 2px var(--bg-app);
  animation: snc-pulse-b-wtgexd3cy4 2.2s infinite;
}

@keyframes snc-pulse-b-wtgexd3cy4 {
  0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

.snc-item.urgent[b-wtgexd3cy4] {
  border-left: 3px solid #e11d48;
}

.snc-item-meta[b-wtgexd3cy4] {
  display: flex;
  align-items: center;
  gap: 6px;
}

.snc-priority-badge[b-wtgexd3cy4] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 0.4px;
  line-height: 1.4;
}

.snc-priority-urgent[b-wtgexd3cy4] {
  background: rgba(225, 29, 72, 0.12);
  color: #e11d48;
}
/* /Components/Shared/SalesNotificationCenter.razor.rz.scp.css */
/* The notification bell (fixed top-right) and its panel. Moved out of an inline <style> on
   2026-09-28 so it is scoped and follows the Light/Dark choice instead of the device setting. */
.snc[b-yimiex0sct]{position:fixed;z-index:850;top:18px;right:24px}
.snc-bell[b-yimiex0sct]{position:relative;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--border-default);border-radius:11px;background:var(--bg-primary);color:var(--text-primary);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)}
.snc-bell:hover[b-yimiex0sct]{border-color:var(--border-strong);background:var(--bg-secondary);transform:translateY(-1px)}
.snc-bell:active[b-yimiex0sct]{transform:translateY(1px)}
.snc-count[b-yimiex0sct]{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--bg-app);border-radius:9px;background:var(--accent-red);color:var(--bg-surface);font:700 9px/14px var(--font-sans)}
.snc-panel[b-yimiex0sct]{position:absolute;top:50px;right:0;width:min(390px,calc(100vw - 28px));max-height:min(620px,calc(100dvh - 88px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-default);border-radius:16px;background:var(--bg-primary);box-shadow:var(--shadow-xl)}
.snc-head[b-yimiex0sct]{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 18px;border-bottom:1px solid var(--border-default)}
.snc-head div[b-yimiex0sct]{display:flex;flex-direction:column;gap:3px}
.snc-head strong[b-yimiex0sct]{font-size:.87rem}
.snc-head span[b-yimiex0sct],.snc-item small[b-yimiex0sct]{color:var(--text-secondary);font-size:.72rem;line-height:1.45}
.snc-head button[b-yimiex0sct]{width:var(--touch-min);height:var(--touch-min);display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer}
.snc-head button:hover[b-yimiex0sct]{background:var(--bg-hover);color:var(--text-primary)}
.snc-push[b-yimiex0sct]{flex:none;display:flex;align-items:center;gap:11px;margin:12px;padding:12px;border:1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);border-radius:11px;background:var(--accent-light);color:var(--link);text-align:left;cursor:pointer}
.snc-push>span:last-child[b-yimiex0sct]{display:flex;flex-direction:column;gap:2px}
.snc-push small[b-yimiex0sct]{color:var(--text-secondary)}
.snc-list[b-yimiex0sct]{overflow:auto}
.snc-item[b-yimiex0sct]{position:relative;width:100%;display:grid;grid-template-columns:10px minmax(0,1fr);gap:8px;padding:14px 17px;border:0;border-bottom:1px solid var(--border-default);background:var(--bg-primary);color:var(--text-primary);text-align:left;cursor:pointer;transition:background var(--transition-fast)}
.snc-item:hover[b-yimiex0sct]{background:var(--bg-secondary)}
.snc-item.unread[b-yimiex0sct]{background:var(--accent-light)}
.snc-item>span:last-child[b-yimiex0sct]{display:flex;flex-direction:column;gap:4px}
.snc-item strong[b-yimiex0sct]{font-size:.77rem;line-height:1.4}
.snc-item time[b-yimiex0sct]{color:var(--text-muted);font-size:.66rem}
.snc-dot[b-yimiex0sct]{width:7px;height:7px;margin-top:5px;border-radius:50%;background:transparent}
.snc-item.unread .snc-dot[b-yimiex0sct]{background:var(--accent-primary)}
.snc-empty[b-yimiex0sct]{display:flex;flex-direction:column;align-items:center;gap:9px;padding:42px 24px;color:var(--text-muted);font-size:.76rem}
.snc-empty .material-symbols-rounded[b-yimiex0sct]{font-size:34px}
.snc[b-yimiex0sct]{top:calc(18px + var(--cm-safe-top,0px));right:max(24px,env(safe-area-inset-right,0px))}
.snc-bell[b-yimiex0sct]{width:44px;height:44px}
.snc-panel[b-yimiex0sct]{z-index:2}
.snc-backdrop[b-yimiex0sct]{position:fixed;inset:0;z-index:1;background:transparent}
.snc-bell[b-yimiex0sct]{position:relative;z-index:2}
.snc-note[b-yimiex0sct]{flex:none;display:flex;align-items:flex-start;gap:9px;margin:12px 12px 0;padding:11px 12px;border-radius:11px;background:var(--bg-secondary);color:var(--text-secondary);font-size:.78rem;line-height:1.5}
.snc-note .material-symbols-rounded[b-yimiex0sct]{font-size:20px;flex:none}
.snc-note--error[b-yimiex0sct]{background:var(--accent-red-bg);color:var(--accent-red-text)}
@media(max-width:768px){.snc[b-yimiex0sct]{top:calc(10px + var(--cm-safe-top,0px));right:max(12px,env(safe-area-inset-right,0px))}
.snc-panel[b-yimiex0sct]{top:52px;max-height:calc(100dvh - 76px - var(--bottom-nav-height) - env(safe-area-inset-bottom,0px) - var(--cm-safe-top,0px))}}
@media(max-width:1024px){body:has(.mobile-chat-active) .snc[b-yimiex0sct]{display:none}}


/* Items are at least 44px for a finger; the unread dot keeps its place. */
@media (pointer: coarse) { .snc-item[b-yimiex0sct] { min-height: var(--touch-min); } .snc-push[b-yimiex0sct] { min-height: var(--touch-min); } }
/* /Components/Shared/SalesOrderComposer.razor.rz.scp.css */
/* Sales Hub order composer (opened from the Inbox). Tokens only (app.css); buttons, alerts, empty
   state and skeletons come from the shared kit (chatmai-ui.css).

   Layout: a centred dialog on wide screens, a bottom sheet up to 860px. The header stays put and
   only the body scrolls, so Close is always reachable. */

.shc-backdrop[b-qwg4rsgis8] {
    position: fixed;
    inset: 0;
    z-index: 1500; /* above the bottom tab bar (900), the mobile drawer (1100) and the Inbox sheets */
    display: grid;
    place-items: center;
    padding: calc(24px + var(--cm-safe-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px));
    background: var(--overlay);
    overscroll-behavior: contain;
}

.shc-modal[b-qwg4rsgis8] {
    width: min(1120px, 100%);
    max-height: calc(var(--cm-vvh, 100dvh) - 48px - var(--cm-safe-top, 0px) - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
}

/* ── Header ── */
.shc-header[b-qwg4rsgis8] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px 18px 24px;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-elevated);
}
.shc-header-copy[b-qwg4rsgis8] { min-width: 0; }
.shc-header h2[b-qwg4rsgis8] { margin: 5px 0 0; font-size: var(--text-xl); line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
.shc-kicker[b-qwg4rsgis8] {
    display: block;
    color: var(--link);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.shc-close[b-qwg4rsgis8] { width: 40px; height: 40px; }

/* ── Scrolling body ── */
.shc-body[b-qwg4rsgis8] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.shc-content[b-qwg4rsgis8] { padding: 26px 28px 30px; }
.shc-grid[b-qwg4rsgis8] { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .72fr); gap: 30px; }
.shc-column[b-qwg4rsgis8] { min-width: 0; }
.shc-summary[b-qwg4rsgis8] {
    position: sticky;
    top: 0;
    align-self: start;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.shc-section-title[b-qwg4rsgis8] { display: flex; align-items: flex-start; gap: 11px; margin: 2px 0 16px; }
.shc-section-title > span[b-qwg4rsgis8] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--accent-light);
    color: var(--link);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
}
.shc-section-title div[b-qwg4rsgis8] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shc-section-title strong[b-qwg4rsgis8] { font-size: var(--text-base); line-height: 1.35; }
.shc-section-title small[b-qwg4rsgis8],
.shc-fields small[b-qwg4rsgis8],
.shc-item small[b-qwg4rsgis8] { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.45; }

/* ── Fields ── */
.shc-fields[b-qwg4rsgis8] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 30px; }
.shc-fields label[b-qwg4rsgis8],
.shc-item-grid label[b-qwg4rsgis8],
.shc-reason[b-qwg4rsgis8] { display: flex; flex-direction: column; gap: 7px; min-width: 0; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 650; }
.shc-fields .wide[b-qwg4rsgis8] { grid-column: 1 / -1; }

.shc-fields input[b-qwg4rsgis8],
.shc-fields textarea[b-qwg4rsgis8],
.shc-add-row select[b-qwg4rsgis8],
.shc-item input[b-qwg4rsgis8],
.shc-reason input[b-qwg4rsgis8],
.shc-reason textarea[b-qwg4rsgis8] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: var(--control-h);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: 9px 12px;
    font: 500 var(--text-base)/1.45 var(--font-sans);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.shc-fields textarea[b-qwg4rsgis8],
.shc-reason textarea[b-qwg4rsgis8] { min-height: 76px; resize: vertical; }
.shc-fields input:hover[b-qwg4rsgis8],
.shc-fields textarea:hover[b-qwg4rsgis8],
.shc-add-row select:hover[b-qwg4rsgis8],
.shc-item input:hover[b-qwg4rsgis8],
.shc-reason input:hover[b-qwg4rsgis8],
.shc-reason textarea:hover[b-qwg4rsgis8] { border-color: var(--border-strong); }
.shc-fields input:focus[b-qwg4rsgis8],
.shc-fields textarea:focus[b-qwg4rsgis8],
.shc-add-row select:focus[b-qwg4rsgis8],
.shc-item input:focus[b-qwg4rsgis8],
.shc-reason input:focus[b-qwg4rsgis8],
.shc-reason textarea:focus[b-qwg4rsgis8] { border-color: var(--accent-primary); box-shadow: var(--ring); outline: 0; }
.shc-item input:disabled[b-qwg4rsgis8] { opacity: .6; cursor: not-allowed; }
.shc-fields .invalid[b-qwg4rsgis8],
.shc-item .invalid[b-qwg4rsgis8],
.shc-reason .invalid[b-qwg4rsgis8] { border-color: var(--accent-red); background: var(--accent-red-bg); }

/* ── Products ── */
.shc-add-row[b-qwg4rsgis8] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.cm-btn[b-qwg4rsgis8] { white-space: normal; text-align: center; max-width: 100%; }
.cm-btn .material-symbols-rounded[b-qwg4rsgis8] { font-size: 19px; }

.shc-items[b-qwg4rsgis8] { display: grid; gap: 11px; margin-top: 12px; }
.shc-empty[b-qwg4rsgis8] {
    padding: 22px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
}
.shc-empty .cm-empty-icon[b-qwg4rsgis8] { width: 40px; height: 40px; }
.shc-item[b-qwg4rsgis8] {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
.shc-item-head[b-qwg4rsgis8] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.shc-item-head > div[b-qwg4rsgis8] { display: flex; min-width: 0; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.shc-item-head strong[b-qwg4rsgis8] { font-size: var(--text-base); line-height: 1.4; }
.shc-item-grid[b-qwg4rsgis8] { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.shc-reason[b-qwg4rsgis8] { margin-top: 12px; }

/* ── Summary ── */
.shc-total-row[b-qwg4rsgis8] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 9px 0; color: var(--text-secondary); font-size: var(--text-sm); }
.shc-total-row strong[b-qwg4rsgis8] { margin-left: auto; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.shc-total-row.discount[b-qwg4rsgis8],
.shc-total-row.discount strong[b-qwg4rsgis8] { color: var(--accent-green-text); }
.shc-total-row.grand[b-qwg4rsgis8] { margin-top: 3px; padding-top: 15px; border-top: 1px solid var(--border-default); color: var(--text-primary); font-size: var(--text-base); }
.shc-total-row.grand strong[b-qwg4rsgis8] { font-size: var(--text-lg); }

.shc-check[b-qwg4rsgis8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
}
.shc-check:focus-within[b-qwg4rsgis8] { border-color: var(--accent-primary); box-shadow: var(--ring); }
.shc-check input[b-qwg4rsgis8] { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-primary); }
.shc-check span[b-qwg4rsgis8] { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--text-sm); }
.shc-check small[b-qwg4rsgis8],
.shc-footnote[b-qwg4rsgis8] { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.45; }

.shc-warning[b-qwg4rsgis8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-left: 3px solid var(--accent-amber);
    border-radius: 8px;
    background: var(--accent-amber-bg);
    color: var(--accent-amber-text);
    font-size: var(--text-sm);
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.shc-warning > .material-symbols-rounded[b-qwg4rsgis8] { font-size: 20px; flex: none; }

.shc-force[b-qwg4rsgis8] {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--accent-amber);
    border-radius: var(--radius-sm);
    background: var(--accent-amber-bg);
    color: var(--accent-amber-text);
    font-size: var(--text-sm);
}
.shc-force p[b-qwg4rsgis8] { margin: 4px 0 11px; line-height: 1.5; color: inherit; }
.shc-btn-danger[b-qwg4rsgis8] { border-color: var(--accent-red); background: var(--accent-red-bg); color: var(--accent-red-text); }
.shc-btn-danger:hover:not(:disabled)[b-qwg4rsgis8] { background: var(--accent-red); border-color: var(--accent-red); color: var(--on-accent); }

.shc-inline-error[b-qwg4rsgis8] { margin-top: 11px; overflow-wrap: anywhere; }
.shc-submit[b-qwg4rsgis8] { min-height: 46px; margin-top: 18px; }
.shc-footnote[b-qwg4rsgis8] { margin: 10px 0 0; text-align: center; }

/* ── Loading / result states ── */
.shc-loading[b-qwg4rsgis8] { padding: 22px 28px 30px; }
.shc-loading-note[b-qwg4rsgis8] { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--text-secondary); font-size: var(--text-sm); }
.shc-loading-note .cm-spinner[b-qwg4rsgis8] { color: var(--accent-primary); }
.shc-loading .shc-summary[b-qwg4rsgis8] { display: flex; flex-direction: column; gap: 12px; }
.shc-sk-field[b-qwg4rsgis8] { height: var(--control-h); }
.shc-sk-area[b-qwg4rsgis8] { height: 76px; }
.shc-sk-line[b-qwg4rsgis8] { height: 14px; }
.shc-sk-button[b-qwg4rsgis8] { height: 46px; margin-top: 8px; }

.shc-state[b-qwg4rsgis8] {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 40px 24px;
    text-align: center;
}
.shc-state > .material-symbols-rounded[b-qwg4rsgis8] { font-size: 52px; }
.shc-state strong[b-qwg4rsgis8] { font-size: var(--text-md); }
.shc-state p[b-qwg4rsgis8] { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.shc-state small[b-qwg4rsgis8] { max-width: 50ch; color: var(--text-secondary); }
.shc-success > .material-symbols-rounded[b-qwg4rsgis8] { color: var(--accent-green-text); }
.shc-error > .material-symbols-rounded[b-qwg4rsgis8] { color: var(--accent-red-text); }

/* ── Bottom sheet: tablets, phones, landscape phones ── */
@media (max-width: 860px) {
    .shc-backdrop[b-qwg4rsgis8] { padding: calc(8px + var(--cm-safe-top, 0px)) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); place-items: end center; }
    .shc-modal[b-qwg4rsgis8] {
        max-height: calc(var(--cm-vvh, 100dvh) - 8px - var(--cm-safe-top, 0px));
        border-bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .shc-body[b-qwg4rsgis8] { padding-bottom: env(safe-area-inset-bottom, 0px); }
    .shc-grid[b-qwg4rsgis8] { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .shc-summary[b-qwg4rsgis8] { position: static; }
    .shc-header[b-qwg4rsgis8] { padding: 14px 14px 14px 18px; }
    .shc-header h2[b-qwg4rsgis8] { font-size: var(--text-lg); }
    .shc-content[b-qwg4rsgis8],
    .shc-loading[b-qwg4rsgis8] { padding: 20px 18px 26px; }
    .shc-state[b-qwg4rsgis8] { min-height: 260px; }
}

@media (max-width: 560px) {
    .shc-fields[b-qwg4rsgis8] { grid-template-columns: minmax(0, 1fr); }
    .shc-fields .wide[b-qwg4rsgis8] { grid-column: auto; }
}

@media (max-width: 480px) {
    .shc-add-row[b-qwg4rsgis8] { grid-template-columns: minmax(0, 1fr); }
    .shc-add-row .cm-btn[b-qwg4rsgis8] { width: 100%; }
    .shc-item-grid[b-qwg4rsgis8] { grid-template-columns: minmax(0, 1fr); }
    .shc-content[b-qwg4rsgis8],
    .shc-loading[b-qwg4rsgis8] { padding-left: 14px; padding-right: 14px; }
    .shc-summary[b-qwg4rsgis8] { padding: 18px 16px; }
}

/* Landscape phone: the sheet is short, so the header gets tight and the fields sit two across. */
@media (max-height: 500px) and (orientation: landscape) {
    .shc-header[b-qwg4rsgis8] { padding-top: 8px; padding-bottom: 8px; }
    .shc-header h2[b-qwg4rsgis8] { margin-top: 2px; font-size: var(--text-md); }
    .shc-content[b-qwg4rsgis8],
    .shc-loading[b-qwg4rsgis8] { padding-top: 14px; }
    .shc-fields[b-qwg4rsgis8] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 20px; }
    .shc-fields .wide[b-qwg4rsgis8] { grid-column: 1 / -1; }
    .shc-state[b-qwg4rsgis8] { min-height: 0; padding: 24px; }
    .shc-state > .material-symbols-rounded[b-qwg4rsgis8] { font-size: 36px; }
}

@media (pointer: coarse) {
    .shc-close[b-qwg4rsgis8] { width: var(--touch-min); height: var(--touch-min); }
    .shc-fields input[b-qwg4rsgis8],
    .shc-add-row select[b-qwg4rsgis8],
    .shc-item input[b-qwg4rsgis8],
    .shc-reason input[b-qwg4rsgis8] { min-height: var(--touch-min); }
    .shc-check input[b-qwg4rsgis8] { width: 22px; height: 22px; }
}
/* /Components/Shared/UnsavedChangesGuard.razor.rz.scp.css */
/* The "unsaved changes" dialog, shared by AI Settings and Settings. */
.unsaved-dialog[b-d2irvrwqw4] { width: min(100%, 26rem); }
.unsaved-body[b-d2irvrwqw4] { padding: 2rem 1.5rem 1.5rem; text-align: center; }
.unsaved-icon[b-d2irvrwqw4] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-red-bg);
    color: var(--accent-red-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.unsaved-title[b-d2irvrwqw4] {
    margin: 0 0 0.5rem;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.unsaved-desc[b-d2irvrwqw4] {
    margin: 0 0 1.5rem;
    font-size: var(--text-base);
    color: var(--text-secondary);
}
.unsaved-actions[b-d2irvrwqw4] { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.unsaved-actions > .cm-btn[b-d2irvrwqw4] { flex: 1 1 10rem; }
/* /Components/Shared/WorkspaceSettingsLink.razor.rz.scp.css */
/* The same quiet panel as Settings' other cards (Settings.razor.css), which a child component's
   elements do not receive: scoped styles stop at the component boundary. Tokens only, so both
   themes are right (app.css defines each for :root and :root[data-theme="dark"]). */
.ws-settings[b-ruylo9j0sq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 1.25rem;
}

.ws-settings-header[b-ruylo9j0sq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--accent-primary);
}

.ws-settings-header h3[b-ruylo9j0sq] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.ws-settings-name[b-ruylo9j0sq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.ws-settings-name dt[b-ruylo9j0sq] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* A long shop name ends in "…" (the full name is the tooltip) instead of widening the card. */
.ws-settings-value[b-ruylo9j0sq] {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.ws-settings-value--missing[b-ruylo9j0sq] {
    font-weight: 400;
    color: var(--text-muted);
}

.ws-settings-hint[b-ruylo9j0sq] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ws-settings-link[b-ruylo9j0sq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 8px;
    min-height: 44px;
    padding: 9px 18px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.ws-settings-link:hover[b-ruylo9j0sq] {
    background: var(--bg-tertiary);
}

.ws-settings-link:focus-visible[b-ruylo9j0sq] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .ws-settings[b-ruylo9j0sq] {
        padding: 1rem;
    }

    .ws-settings-link[b-ruylo9j0sq] {
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ws-settings-link[b-ruylo9j0sq] {
        transition: none;
    }
}

.ws-name-input[b-ruylo9j0sq] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); font: inherit; }
.ws-name-input:focus-visible[b-ruylo9j0sq] { outline: 2px solid var(--accent-primary); outline-offset: 2px; }