@import "./team-management.css";
@import './panel-components.css';
@import './market.css';

/* Panel design layer: tokens, shell and shared components for every dashboard page. Loaded after dashboard.css. */

:root {
    --panel-bg: #f6f7f5; --panel-surface: #fff; --panel-soft: #f1f3f0; --panel-text: #14181a; --panel-muted: #56606b; --panel-subtle: #6a737e;
    --panel-line: #e4e7e2; --panel-input-line: #cfd4cc; --panel-accent: #0f766e; --panel-on-accent: #fff; --panel-tint: #e3f2ee;
    --panel-nav: #fbfbfa; --panel-nav-text: #4b5560; --panel-nav-active: #eaf1ee; --panel-ink: #14181a; --panel-on-ink: #fff;
    --panel-series-1: #0d9488; --panel-series-2: #6d5bd0; --panel-series-2-soft: #eeebfb; --panel-series-2-text: #5443b8;
    --panel-warn: #9a5800; --panel-warn-soft: #fdf1de; --panel-good: #0f766e; --panel-good-soft: #e3f2ee; --panel-danger: #b42318; --panel-danger-soft: #feeceb;
    --panel-shadow: 0 1px 2px #14181a0a; --panel-radius: 14px; color-scheme: light;
}
html[data-panel-theme=dark] {
    --panel-bg: #0e1113; --panel-surface: #15191c; --panel-soft: #1c2125; --panel-text: #eceeee; --panel-muted: #a9b1b8; --panel-subtle: #8f98a0;
    --panel-line: #262c31; --panel-input-line: #3a424a; --panel-accent: #3fd1b5; --panel-on-accent: #06231d; --panel-tint: #0f2e2a;
    --panel-nav: #111417; --panel-nav-text: #a9b1b8; --panel-nav-active: #1c2327; --panel-ink: #eceeee; --panel-on-ink: #0e1113;
    --panel-series-1: #0fa896; --panel-series-2: #8b7cf0; --panel-series-2-soft: #221e3d; --panel-series-2-text: #b7adff;
    --panel-warn: #f2b25c; --panel-warn-soft: #33260f; --panel-good: #4adec0; --panel-good-soft: #0f2e2a; --panel-danger: #ff8a7a; --panel-danger-soft: #3a1a17;
    --panel-shadow: none; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    html[data-panel-theme=system] {
        --panel-bg: #0e1113; --panel-surface: #15191c; --panel-soft: #1c2125; --panel-text: #eceeee; --panel-muted: #a9b1b8; --panel-subtle: #8f98a0;
        --panel-line: #262c31; --panel-input-line: #3a424a; --panel-accent: #3fd1b5; --panel-on-accent: #06231d; --panel-tint: #0f2e2a;
        --panel-nav: #111417; --panel-nav-text: #a9b1b8; --panel-nav-active: #1c2327; --panel-ink: #eceeee; --panel-on-ink: #0e1113;
        --panel-series-1: #0fa896; --panel-series-2: #8b7cf0; --panel-series-2-soft: #221e3d; --panel-series-2-text: #b7adff;
        --panel-warn: #f2b25c; --panel-warn-soft: #33260f; --panel-good: #4adec0; --panel-good-soft: #0f2e2a; --panel-danger: #ff8a7a; --panel-danger-soft: #3a1a17;
        --panel-shadow: none; color-scheme: dark;
    }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dashboard-page { -webkit-font-smoothing: antialiased; }
.dashboard-page svg { flex-shrink: 0; }

/* Error responses share the panel theme without loading protected workspace data. */
.panel-status-page { min-height: 100dvh; }
.panel-status-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 16px 32px; border-bottom: 1px solid var(--panel-line); background: var(--panel-nav); }
.panel-status-header .panel-brand { padding: 0; }
.panel-status-header .panel-theme-options { flex-shrink: 0; padding: 0; margin: 0; border: 0; }
.panel-status-main { min-height: calc(100dvh - 73px); display: grid; align-items: center; padding: 48px 24px 96px; }
.panel-status-content { width: min(100%, 480px); margin: 0 auto; }
.panel-status-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 28px; border: 1px solid var(--panel-line); border-radius: var(--panel-radius); background: var(--panel-surface); color: var(--panel-accent); }
.panel-status-icon svg { width: 26px; height: 26px; }
.panel-status-code { display: block; margin-bottom: 10px; color: var(--panel-subtle); font-size: 12px; font-weight: 550; letter-spacing: .08em; }
.dashboard-page .panel-status-content h1 { margin-bottom: 14px; line-height: 1.25; }
.panel-status-content p { margin: 0; max-width: 46ch; color: var(--panel-muted); font-size: 14px; line-height: 1.7; }
.panel-status-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.panel-status-actions form { margin: 0; }
.dashboard-page .panel-status-actions :is(button, .panel-button) { min-height: 44px; }
.panel-status-page :focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 3px; }
@media (max-width: 600px) {
    .panel-status-header { min-height: 64px; padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
    .dashboard-page .panel-status-header .panel-brand { font-size: 15px; }
    .panel-status-header .panel-brand-mark { width: 28px; height: 28px; }
    .dashboard-page .panel-status-header .panel-theme-options button { min-width: 44px; min-height: 36px; padding: 6px; }
    .panel-status-main { min-height: calc(100dvh - 73px); padding: 40px 24px 80px; }
    .dashboard-page .panel-status-content h1 { font-size: 25px; }
}

/* ---------- Shell ---------- */
.dashboard-shell { grid-template-columns: 256px minmax(0, 1fr); }
.panel-sidebar { position: sticky; top: 0; height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 18px 14px 14px; background: var(--panel-nav); border-right: 1px solid var(--panel-line); overflow: hidden; }
.panel-sidebar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-page .panel-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px; color: var(--panel-text); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.panel-brand-mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-ink); color: var(--panel-on-ink); font-size: 16px; }
.dashboard-page .panel-workspace { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel-surface); color: var(--panel-text); }
.panel-workspace-caption { margin: -4px 8px 0; font-size: 12px; color: var(--panel-subtle); }
.panel-workspace-mark { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-tint); color: var(--panel-accent); font-weight: 650; flex-shrink: 0; }
.panel-workspace-text { flex: 1; min-width: 0; }
.panel-workspace-text strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-workspace-text small { display: block; font-size: 12px; color: var(--panel-subtle); }
.panel-workspace > svg { color: var(--panel-subtle); }
.panel-nav { display: flex; flex-direction: column; gap: 20px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px 0 12px; }
.panel-nav-group { flex-shrink: 0; }
.panel-nav-group { display: flex; flex-direction: column; gap: 1px; }
.panel-nav-group > p, .dashboard-page .panel-nav-group > summary { margin: 0; padding: 0 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--panel-subtle); }
.dashboard-page .panel-nav-group > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; min-height: 28px; padding-bottom: 0; border-radius: 6px; }
.panel-nav-group > summary::-webkit-details-marker { display: none; }
.panel-nav-group > summary:hover { color: var(--panel-text); }
.panel-nav-group > summary svg { width: 14px; height: 14px; transition: transform .15s; }
.panel-nav-group[open] > summary svg { transform: rotate(90deg); }
.dashboard-page .panel-nav-group[open] > summary { margin-bottom: 4px; }
.dashboard-page .panel-nav-group a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 8px; color: var(--panel-nav-text); font-size: 13px; font-weight: 500; }
.dashboard-page .panel-nav-group a:hover { background: var(--panel-soft); color: var(--panel-text); }
.dashboard-page .panel-nav-group a[aria-current] { background: var(--panel-nav-active); color: var(--panel-text); font-weight: 600; }
.panel-nav-group a[aria-current] svg { color: var(--panel-accent); }
.panel-nav-group a span { flex: 1; min-width: 0; }
.panel-nav-count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--panel-warn-soft); color: var(--panel-warn); font-size: 12px; font-weight: 650; display: grid; place-items: center; }
.panel-sidebar .panel-nav-external { width: 13px; height: 13px; color: var(--panel-subtle); }
/* A heading with pages under it only opens and closes its list; the arrow shows there is more inside. */
.panel-nav-section > summary { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 8px; color: var(--panel-nav-text); font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; user-select: none; }
.panel-nav-section > summary::-webkit-details-marker { display: none; }
.panel-nav-section > summary:hover { background: var(--panel-soft); color: var(--panel-text); }
.panel-nav-section > summary:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 1px; }
.panel-nav-section > summary span { flex: 1; min-width: 0; }
.panel-nav-section > summary .panel-nav-chevron { width: 14px; height: 14px; color: var(--panel-subtle); transition: transform .15s; }
.panel-nav-section[open] > summary .panel-nav-chevron { transform: rotate(90deg); }
.panel-nav-section.is-active > summary { color: var(--panel-text); font-weight: 600; }
.panel-nav-section.is-active > summary > svg:first-child { color: var(--panel-accent); }
.panel-account { padding-top: 10px; border-top: 1px solid var(--panel-line); }
.panel-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-soft); color: var(--panel-text); font-weight: 650; font-size: 12px; flex-shrink: 0; }
.dashboard-page .panel-account-trigger { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; margin: 0; background: transparent; color: var(--panel-text); border: 0; text-align: left; font-weight: 550; }
.dashboard-page .panel-account-trigger:hover, .dashboard-page .panel-account-trigger[aria-expanded=true] { background: var(--panel-soft); }
.panel-account-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.panel-account-trigger > svg { stroke-width: 3; color: var(--panel-subtle); }
.dashboard-page .panel-icon-button { width: 34px; height: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--panel-subtle); box-shadow: none; }
.dashboard-page .panel-icon-button:hover { background: var(--panel-soft); color: var(--panel-text); }
.panel-backdrop { display: none; }

.dashboard-header { height: 60px; padding: 0 32px; background: var(--panel-bg); position: sticky; top: 0; z-index: 10; }
.dashboard-header svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-context { font-size: 13px; gap: 8px; }
.header-context .header-separator { width: 14px; height: 14px; color: var(--panel-subtle); }
.header-context strong { font-weight: 550; }
.dashboard-page .panel-menu { width: 34px; height: 34px; min-height: 34px; padding: 0; place-items: center; border: 1px solid var(--panel-line); border-radius: 8px; background: var(--panel-surface); box-shadow: none; }
.dashboard-page .panel-menu svg { width: 17px; height: 17px; }

.dashboard-page .admin-main { max-width: 1440px; padding: 28px 32px 40px; }
.dashboard-footer { font-size: 12px; margin-top: 32px; }

/* Shared menus are portaled to the document body, outside table and sidebar overflow. */
.panel-popover[hidden] { display: none; }
.panel-popover { position: fixed; z-index: 100; box-sizing: border-box; width: 248px; max-width: calc(100vw - 16px); padding: 6px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--panel-line); border-radius: 12px; background: var(--panel-surface); color: var(--panel-text); box-shadow: 0 12px 40px #0002, 0 2px 8px #0001; }
.panel-popover svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-page .panel-popover .panel-popover-item { display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: 9px; min-height: 36px; margin: 0; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--panel-text); box-shadow: none; font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.dashboard-page .panel-popover .panel-popover-item:hover, .dashboard-page .panel-popover .panel-popover-item:focus-visible { background: var(--panel-soft); }
.panel-popover form { margin: 0; }
.panel-account-meta { padding: 7px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--panel-line); }
.panel-account-meta strong { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.panel-account-meta small { display: block; margin-top: 3px; color: var(--panel-muted); font-size: 12px; }
.panel-theme-options { padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--panel-line); }
.panel-theme-options > span { display: block; margin-bottom: 8px; font-size: 12px; color: var(--panel-muted); }
.panel-theme-options > div { display: flex; gap: 3px; padding: 3px; border-radius: 8px; background: var(--panel-soft); }
.dashboard-page .panel-theme-options button { flex: 1; min-height: 30px; margin: 0; padding: 4px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--panel-muted); font-size: 12px; font-weight: 500; }
.dashboard-page .panel-theme-options button[aria-checked=true] { background: var(--panel-surface); color: var(--panel-text); box-shadow: 0 1px 3px #0002; }
.dashboard-page :is([data-panel-popover], .panel-popover a, .panel-popover button):focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 2px; }

/* ---------- Typography & page heading ---------- */
.dashboard-page h1 { font-size: 28px; letter-spacing: -.025em; line-height: 1.15; font-weight: 650; margin: 0 0 6px; }
.dashboard-page h2 { font-size: 15px; letter-spacing: -.01em; font-weight: 650; margin: 0 0 4px; }
.dashboard-page .admin-intro { font-size: 14px; line-height: 1.55; margin-bottom: 24px; }
.eyebrow { font-size: 11px; letter-spacing: .06em; font-weight: 600; text-transform: uppercase; color: var(--panel-subtle); margin-bottom: 8px; }
.page-heading { margin-bottom: 24px; }

.dashboard-page .panel-settings .connection-status-heading { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--panel-line); }

/* ---------- Surfaces ---------- */
.dashboard-page .admin-card { border-radius: var(--panel-radius); padding: 22px; margin-bottom: 20px; box-shadow: var(--panel-shadow); }
.dashboard-page .admin-card p { font-size: 13px; line-height: 1.6; }
.dashboard-page :is(.retention-workspace, .retention-recovery) { padding: 0; }
.card-title { margin-bottom: 16px; }
.card-title p { margin-top: 2px; }
.dashboard-page .admin-stats { gap: 16px; margin-bottom: 20px; }
.dashboard-page .admin-stats article { padding: 18px 20px; border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); }
.dashboard-page .admin-stats article:after { display: none; }
.dashboard-page .admin-stats small { font-size: 13px; }
.dashboard-page .admin-stats strong { font-size: 30px; letter-spacing: -.03em; line-height: 1.15; margin-top: 8px; font-variant-numeric: tabular-nums; }
.dashboard-page .admin-stats article small + strong + small { margin-top: 6px; font-size: 12px; color: var(--panel-subtle); }

/* Stats nested in a card read as one metric strip, not cards within a card. */
.dashboard-page .admin-card .admin-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin: 14px 0; border: 1px solid var(--panel-line); border-radius: 10px; overflow: hidden; }
.dashboard-page .admin-card .admin-stats article { border: 0; border-radius: 0; box-shadow: 1px 0 0 var(--panel-line), 0 1px 0 var(--panel-line); padding: 16px 18px; background: transparent; }
.dashboard-page .admin-card .admin-stats strong { font-size: 26px; margin-top: 6px; }
.dashboard-page .admin-card .admin-stats small { font-size: 12px; }

/* ---------- Tables ---------- */
.dashboard-page .admin-table { border: 1px solid var(--panel-line); border-radius: 10px; }
.dashboard-page table { font-size: 13px; }
.dashboard-page th { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--panel-subtle); padding: 10px 14px; }
.dashboard-page tbody th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 550; color: var(--panel-text); background: transparent; padding: 12px 14px; }
.dashboard-page td { padding: 12px 14px; font-variant-numeric: tabular-nums; }
.dashboard-page td small { font-size: 12px; }

/* ---------- Controls ---------- */
.dashboard-page button:where(:not(.panel-menu):not(.panel-icon-button)), .dashboard-page .panel-button { border-radius: 8px; min-height: 38px; padding: 8px 14px; font-weight: 600; font-size: 13px; box-shadow: none; border-color: var(--panel-line); }
.dashboard-page button:enabled:hover, .dashboard-page .panel-button:hover { filter: none; box-shadow: none; border-color: var(--panel-input-line); background: var(--panel-soft); }
.dashboard-page button[type=submit]:enabled:hover, .dashboard-page form button:where(:not([type])):enabled:hover, .dashboard-page .panel-button.primary:hover { background: var(--panel-accent-fill); filter: brightness(.94); }
.dashboard-page .panel-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-page .panel-button.ink { background: var(--panel-ink); border-color: var(--panel-ink); color: var(--panel-on-ink); }
.dashboard-page .panel-button.ink:hover { background: var(--panel-ink); filter: brightness(1.15); }
.dashboard-page .admin-form input:not([type=checkbox]):not([type=radio]), .dashboard-page .admin-form select, .dashboard-page .admin-form textarea, .dashboard-page .admin-search input { background: var(--panel-surface); border-radius: 8px; padding: 9px 12px; }
.dashboard-page :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { border-color: var(--panel-accent); box-shadow: 0 0 0 3px var(--panel-tint); outline: none; }
.panel-badge { border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 500; }
.panel-badge.warn { color: var(--panel-warn); background: var(--panel-warn-soft); border-color: transparent; }
.panel-badge.info { color: var(--panel-series-2-text); background: var(--panel-series-2-soft); border-color: transparent; }
.dashboard-page .admin-notice { border-radius: 10px; }
.dashboard-page .admin-error { border-radius: 10px; border-color: var(--panel-danger); color: var(--panel-danger); background: var(--panel-danger-soft); }
.empty-state { padding: 28px; font-size: 13px; }

/* Zero-specificity baseline so every stray control matches; page rules still win. */
:where(.dashboard-page main) :where(select, textarea, input:not([type=checkbox], [type=radio], [type=color], [type=hidden], [type=file], [type=range])) { box-sizing: border-box; min-height: 38px; padding: 8px 10px; border: 1px solid var(--panel-input-line); border-radius: 8px; background: var(--panel-surface); color: var(--panel-text); font: inherit; font-size: 13px; }

:where(.dashboard-page main form:not([method=get]):not(.department-filter)) :where(label):has(> :is(select, textarea, input:not([type=checkbox], [type=radio], [type=hidden]))) { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 13px; }
:where(.dashboard-page main form:not([method=get]):not(.department-filter)) :where(label) > :where(select, textarea, input:not([type=checkbox], [type=radio], [type=hidden], [type=color])) { display: block; width: 100%; max-width: 560px; margin: 0; }

.dashboard-page main label:has(> input:is([type=checkbox], [type=radio])) { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin: 10px 0; font-size: 13px; line-height: 1.45; color: var(--panel-text); }
.dashboard-page main label > input:is([type=checkbox], [type=radio]) { margin: 1px 0 0; }

:where(.dashboard-page main fieldset) > :where(legend) { margin-bottom: 10px; font-size: 13px; font-weight: 650; color: var(--panel-text); }

/* ---------- Settings forms & inline notices ---------- */
.dashboard-page .panel-settings :is(input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea) { background: var(--panel-surface); border-radius: 8px; }
.dashboard-page .panel-settings h2 + :not(p) { margin-top: 14px; }


.dashboard-page .admin-card details + details { margin-top: 8px; }
.dashboard-page .admin-card :is(h3, h4):not(:first-child) { margin-top: 20px; }
.dashboard-page .admin-card :is(h3, h4) { font-size: 14px; font-weight: 650; margin-bottom: 8px; }


.dashboard-page form.admin-form:has(.admin-card) { max-width: none; }


.dashboard-page form.admin-form:not([method=get]) > label > :is(select, input:not([type=checkbox]):not([type=radio]):not([type=color])) { max-width: 560px; }
.dashboard-page .admin-card blockquote { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: var(--panel-soft); color: var(--panel-text); font-size: 13px; line-height: 1.6; }
.dashboard-page main > p[role=status]:not(.admin-notice), .dashboard-page main > div > p[role=status]:not(.admin-notice) { margin: 0 0 20px; padding: 12px 16px; border: 1px dashed var(--panel-input-line); border-radius: 10px; font-size: 13px; color: var(--panel-muted); }
.dashboard-page main > p[role=status]:empty, .dashboard-page main > div > p[role=status]:empty { display: none; }

/* ---------- Filter bars (GET forms) ---------- */
.dashboard-page form.admin-form[method=get] { margin-bottom: 14px; max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.dashboard-page form.admin-form[method=get] > .dashboard-grid { display: contents; }
.dashboard-page form.admin-form[method=get] label { order: 1; flex: 1 1 170px; max-width: 260px; margin: 0; font-size: 12px; font-weight: 550; color: var(--panel-muted); }
.dashboard-page form.admin-form[method=get] label:has(input[type=search], input[name=q]) { flex: 2 1 280px; max-width: 420px; }
.dashboard-page form.admin-form[method=get] label :is(input, select) { margin-top: 6px; font-size: 13px; color: var(--panel-text); font-weight: 400; }
.dashboard-page form.admin-form[method=get] label .team-owner-note { display: none; }
.dashboard-page form.admin-form[method=get] > :is(button, .admin-inline) { order: 2; margin: 0; }
.dashboard-page form.admin-form[method=get] > :is(p, small) { order: 3; flex-basis: 100%; margin: 0; font-size: 12px; color: var(--panel-subtle); }
.dashboard-page .admin-card:has(> form.admin-form[method=get]) > h2 { margin-bottom: 14px; }

/* ---------- Page chrome ---------- */
.page-heading .eyebrow, .eyebrow:has(+ h1) { display: none; }
.dashboard-page .page-heading p { color: var(--panel-muted); font-size: 14px; line-height: 1.55; }
.team-access-note { max-width: none; padding: 12px 16px; border-radius: 10px; border-color: transparent; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 20px; }
.dashboard-page .team-access-note p { margin: 0; font-size: 13px; color: var(--panel-muted); }

/* ---------- Live support inbox ---------- */
.dashboard-page .inbox-presence { gap: 10px 16px; padding: 10px 14px 10px 16px; margin-bottom: 16px; border-radius: 12px; }
.inbox-presence form { gap: 8px; font-size: 13px; }
.inbox-presence form label { font-weight: 550; color: var(--panel-text); }
.dashboard-page .inbox-presence select { height: 34px; padding: 0 10px; background: var(--panel-surface); border-radius: 8px; }
.dashboard-page .inbox-presence form button { min-height: 34px; padding: 0 12px; }
.inbox-presence > div { font-size: 13px; }
.inbox-presence small { font-size: 12px; }
.dashboard-page .inbox-presence > p { width: auto; flex: 1 1 280px; font-size: 12px; text-align: right; }
.presence-switch { display: inline-flex; gap: 2px; min-width: 0; margin: 0; padding: 3px; border: 1px solid var(--panel-line); border-radius: 9px; background: var(--panel-soft); }
.dashboard-page .presence-switch label { position: relative; display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 6px 12px; border-radius: 7px; color: var(--panel-muted); font-size: 13px; font-weight: 550; cursor: pointer; }
.presence-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.presence-switch label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--panel-subtle); }
.presence-switch .presence-option--online::before { background: var(--panel-good); }
.presence-switch .presence-option--away::before { background: var(--panel-warn); }
.dashboard-page .presence-switch label:hover { color: var(--panel-text); }
.dashboard-page .presence-switch label:has(input:checked) { background: var(--panel-surface); color: var(--panel-text); font-weight: 650; box-shadow: inset 0 0 0 1px var(--panel-line), 0 1px 2px #0000001a; }
/* The chosen state carries its own colour, so it reads at a glance in the dark theme too. */
.dashboard-page .presence-switch .presence-option--online:has(input:checked) { background: var(--panel-good-soft); color: var(--panel-good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-good) 45%, transparent); }
.dashboard-page .presence-switch .presence-option--away:has(input:checked) { background: var(--panel-warn-soft); color: var(--panel-warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-warn) 45%, transparent); }
.dashboard-page .presence-switch label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.presence-switch label:has(input:focus-visible) { outline: 2px solid var(--panel-accent); outline-offset: 1px; }
.inbox-presence form[aria-busy="true"] .presence-switch { opacity: .7; }
.inbox-toolbar { margin-bottom: 16px; }
.inbox-filters { gap: 2px; padding: 3px; border: 1px solid var(--panel-line); border-radius: 9px; background: var(--panel-soft); }
.dashboard-page .inbox-filters a { padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--panel-muted); font-size: 13px; font-weight: 550; }
.dashboard-page .inbox-filters a:hover { color: var(--panel-text); }
.dashboard-page .inbox-filters a[aria-current] { background: var(--panel-surface); color: var(--panel-text); box-shadow: 0 1px 2px #0000001a; }
.dashboard-page .department-filter select { height: 36px; padding: 0 10px; background: var(--panel-surface); border-radius: 8px; }
.support-layout { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; }
.dashboard-page .inbox-list { padding: 14px 0 0; }
/* The chat list scrolls inside itself, fits under the page heading and filters (about 333px with the page padding)
   and stays beside the open chat, so a busy inbox never lengthens the page. */
@media (min-width: 1101px) {
    .dashboard-page .support-layout > .inbox-list { position: sticky; top: 16px; max-height: max(360px, calc(100dvh - 333px)); overflow-y: auto; overscroll-behavior: contain; }
    .dashboard-page .support-layout > .inbox-list > .card-title { position: sticky; top: -14px; z-index: 1; margin: -14px 0 0; padding: 14px 16px 10px; background: var(--panel-surface); }
}
.inbox-list > .card-title { padding: 0 16px; margin-bottom: 10px; }
.inbox-list > .card-title h2 { font-size: 13px; color: var(--panel-muted); font-weight: 600; }
.dashboard-page .inbox-list > :is(form, p, nav) { margin: 0 16px 12px; }
.dashboard-page .inbox-list > form.admin-form label { margin: 0 0 8px; font-size: 13px; }
.inbox-row { padding: 12px 16px; gap: 12px; }
.inbox-row:hover { background: var(--panel-soft); }
.inbox-row.selected { background: var(--panel-nav-active); border-left: 0; box-shadow: inset 3px 0 0 var(--panel-accent); }
.inbox-row strong { font-size: 13px; font-weight: 600; }
.inbox-row small { font-size: 12px; margin-top: 3px; }
.inbox-row time { font-size: 12px; font-variant-numeric: tabular-nums; }
.inbox-messages { padding: 16px 4px; gap: 12px; }
.inbox-message { border-radius: 12px 12px 4px 12px; background: var(--panel-tint); border-color: transparent; }
.inbox-message.from-member { border-radius: 12px 12px 12px 4px; background: var(--panel-soft); }
.inbox-message small { font-size: 12px; }
.inbox-message p { font-size: 14px; line-height: 1.5; }
.dashboard-page .inbox-composer textarea { background: var(--panel-surface); border-color: var(--panel-input-line); border-radius: 10px; font-size: 14px; }
.inbox-composer small, .inbox-hint { font-size: 12px; }
.inbox-empty h2 { font-size: 17px; }

/* ---------- Overview ---------- */
.overview-heading { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 20px; }
.overview-heading > div:first-child { flex: 1 1 320px; min-width: 0; }
.overview-heading .overview-date { font-size: 13px; color: var(--panel-subtle); margin-bottom: 6px; }
.overview-heading p { margin: 0; color: var(--panel-muted); }
.overview-heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.range-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--panel-line); border-radius: 9px; background: var(--panel-soft); }
.dashboard-page .range-switch a { display: grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 7px; color: var(--panel-muted); font-size: 13px; font-weight: 550; }
.dashboard-page .range-switch a:hover { color: var(--panel-text); }
.dashboard-page .range-switch a[aria-current] { background: var(--panel-tint); color: var(--panel-accent); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-accent) 35%, transparent); }

.overview-card { border: 1px solid var(--panel-line); border-radius: var(--panel-radius); background: var(--panel-surface); box-shadow: var(--panel-shadow); min-width: 0; }
.overview-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 0; }
.overview-card-head > div { flex: 1; min-width: 0; }
.overview-card-head p { margin: 2px 0 0; font-size: 13px; color: var(--panel-muted); }
.dashboard-page .overview-card-head > a { font-size: 13px; font-weight: 550; color: var(--panel-accent); white-space: nowrap; }
.overview-card-body { padding: 16px 22px 20px; }

.channel-strip { display: grid; grid-template-columns: 250px repeat(2, minmax(0, 1fr)) auto; align-items: stretch; margin-bottom: 20px; }
.channel-strip > * + * { border-left: 1px solid var(--panel-line); }
.channel-summary { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.channel-summary strong { font-weight: 650; }
.channel-summary span { font-size: 13px; color: var(--panel-muted); }
.channel-option { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; }
.channel-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--panel-tint); color: var(--panel-series-1); }
.channel-icon.agent { background: var(--panel-series-2-soft); color: var(--panel-series-2); }
.channel-icon svg, .overview-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.channel-option > span:nth-child(2) { flex: 1; min-width: 0; }
.channel-option strong { display: block; font-weight: 650; }
.channel-option small { display: block; font-size: 13px; color: var(--panel-muted); }
.channel-state { font-size: 13px; font-weight: 550; color: var(--panel-muted); min-width: 44px; text-align: right; }
.switch { position: relative; width: 40px; height: 24px; flex-shrink: 0; }
.dashboard-page .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 12px; background: var(--panel-input-line); transition: background .15s; pointer-events: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #00000040; transition: left .15s; }
.switch input:checked + span { background: var(--panel-series-1); }
.switch input:checked + span::after { left: 19px; }
.switch input:focus-visible + span { outline: 2px solid var(--panel-accent); outline-offset: 2px; }
.channel-actions { display: flex; align-items: center; gap: 8px; padding: 0 18px; }
.channel-actions[hidden] { display: none; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.kpi > small { font-size: 13px; color: var(--panel-muted); }
.kpi-value { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.kpi-value strong { font-size: 30px; font-weight: 650; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--panel-subtle); }
.kpi-note svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kpi-note.good { color: var(--panel-good); }
.kpi-note.warn { color: var(--panel-warn); }
.sparkline { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.sparkline span { width: 5px; border-radius: 2px; background: var(--panel-input-line); min-height: 3px; }
.sparkline span.on { background: var(--panel-series-1); }

.overview-row { display: grid; gap: 16px; margin-bottom: 20px; }
.overview-row.activity { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.overview-row.metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overview-row.follow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--panel-muted); flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i, .queue-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--panel-series-1); }
.chart-legend i.agent, .queue-legend i.agent { background: var(--panel-series-2); }
.chart-legend i.neutral { background: var(--panel-subtle); }
.activity-chart-wrap .chart-legend { justify-content: flex-end; margin: -6px 0 12px; }
.activity-bar.neutral i { background: var(--panel-subtle); }
.dashboard-page details.chart-table { margin-top: 16px; }
.dashboard-page details.chart-table > summary { font-size: 13px; color: var(--panel-muted); }
.queue-legend i.waiting { background: var(--panel-warn); }
.activity-chart { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.activity-axis { height: 200px; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--panel-subtle); text-align: right; margin-top: -7px; font-variant-numeric: tabular-nums; }
.activity-plot { position: relative; height: 200px; border-bottom: 1px solid var(--panel-input-line); background: linear-gradient(var(--panel-line) 1px, transparent 1px) 0 0 / 100% 50%; }
.activity-columns { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); }
.activity-day { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-radius: 6px 6px 0 0; }
.activity-empty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font-size: 13px; color: var(--panel-subtle); pointer-events: none; background: linear-gradient(var(--panel-surface), var(--panel-surface)) center / 180px 24px no-repeat; }
.activity-day:hover, .activity-day:focus-visible { background: var(--panel-soft); }
.activity-day.today { background: var(--panel-soft); }
.activity-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.activity-bar b { font-size: 12px; font-weight: 650; color: var(--panel-text); font-variant-numeric: tabular-nums; }
.activity-bar i { display: block; width: min(16px, 1.1vw); min-width: 4px; height: calc(var(--value) * 1%); max-height: calc(100% - 22px); border-radius: 4px 4px 0 0; background: var(--panel-series-1); }
.activity-bar.agent i { background: var(--panel-series-2); }
.activity-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 2; display: none; padding: 8px 10px; border-radius: 8px; background: var(--panel-ink); color: var(--panel-on-ink); font-size: 12px; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.activity-day:hover .activity-tooltip, .activity-day:focus-visible .activity-tooltip { display: block; }
.activity-labels { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); margin: 8px 0 0 32px; font-size: 11px; color: var(--panel-subtle); text-align: center; font-variant-numeric: tabular-nums; }
.activity-labels span.today { color: var(--panel-text); font-weight: 600; }
.activity-labels.dense span:not(:first-child):not(:last-child):not(:nth-child(5n)) { visibility: hidden; }
.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--panel-line); }
.metric-strip small, .metric-pair small { display: block; font-size: 12px; color: var(--panel-subtle); }
.metric-strip strong { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.metric-strip strong span { font-size: 13px; font-weight: 400; color: var(--panel-subtle); }

.queue-bar { display: flex; gap: 2px; height: 8px; margin: 16px 22px 0; border-radius: 4px; overflow: hidden; background: var(--panel-soft); }
.queue-bar span { background: var(--panel-warn); }
.queue-bar span.human { background: var(--panel-series-2); }
.queue-bar span.closed { background: var(--panel-series-1); }
.queue-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 22px 16px; }
.queue-legend small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--panel-muted); }
.queue-legend i { width: 8px; height: 8px; border-radius: 2px; }
.queue-legend strong { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.queue-list { border-top: 1px solid var(--panel-line); }
.dashboard-page .queue-item { display: flex; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--panel-line); color: var(--panel-text); }
.dashboard-page .queue-item:hover { background: var(--panel-soft); }
.queue-item > div { flex: 1; min-width: 0; }
.queue-item-top { display: flex; gap: 8px; font-size: 13px; }
.queue-item-top strong { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-item-top time { color: var(--panel-subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.queue-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.queue-empty { padding: 20px 22px; font-size: 13px; color: var(--panel-muted); border-bottom: 1px solid var(--panel-line); }
.queue-footer { padding: 12px 22px 14px; }
.dashboard-page .queue-footer .panel-button { width: 100%; }
.queue-presence { display: inline-flex; align-items: center; gap: 6px; }
.queue-presence::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.queue-presence.online { color: var(--panel-good); background: var(--panel-good-soft); border-color: transparent; }

.metric-list { display: flex; flex-direction: column; }
.metric-list h3 { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--panel-subtle); }
.metric-list h3:not(:first-child) { margin-top: 14px; }
.metric-list div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--panel-line); font-size: 13px; }
.metric-list div:last-of-type, .metric-list h3 + div + div + div:not(:has(+ div)) { border-bottom: 0; }
.metric-list dt { color: var(--panel-muted); }
.metric-list dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.metric-list dd small { font-weight: 400; color: var(--panel-subtle); }
.model-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel-soft); margin-bottom: 8px; }
.model-row code { font-size: 13px; font-weight: 550; }
.model-row small { display: block; font-size: 12px; color: var(--panel-subtle); }
.model-row > div { flex: 1; min-width: 0; }
.model-row > span { font-size: 12px; color: var(--panel-muted); text-align: right; font-variant-numeric: tabular-nums; }
.metric-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.metric-pair strong { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.overview-footnote { margin: 0; font-size: 12px; color: var(--panel-subtle); line-height: 1.5; }
.credit-total { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.credit-total strong { font-size: 30px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.credit-total span { color: var(--panel-subtle); }
.credit-meter { height: 8px; border-radius: 4px; background: var(--panel-soft); overflow: hidden; margin-bottom: 14px; }
.credit-meter span { display: block; height: 100%; background: var(--panel-series-1); }
.credit-meter span.reserved { background: var(--panel-series-2); }

.follow-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; border: 1px dashed var(--panel-input-line); border-radius: 12px; text-align: center; font-size: 13px; color: var(--panel-muted); }
.follow-empty.compact { min-height: 120px; margin-bottom: 12px; }
.credit-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.credit-stats dt { font-size: 12px; color: var(--panel-subtle); }
.credit-stats dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.dashboard-page .overview-link { font-size: 13px; font-weight: 550; color: var(--panel-accent); }
.model-tokens { margin: -2px 0 10px; }
.follow-empty strong { color: var(--panel-text); font-size: 14px; }
.overview-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-good-soft); color: var(--panel-good); margin-bottom: 4px; }
.config-links { display: flex; flex-direction: column; }
.dashboard-page .config-links a { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--panel-line); color: var(--panel-text); }
.dashboard-page .config-links a:last-child { border-bottom: 0; }
.dashboard-page .config-links a:hover strong { color: var(--panel-accent); }
.config-links a > span:first-child { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-soft); color: var(--panel-muted); }
.config-links svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.config-links a > div { flex: 1; min-width: 0; }
.config-links strong { display: block; font-size: 13px; font-weight: 600; }
.config-links small { display: block; font-size: 12px; color: var(--panel-subtle); }
.config-links a > svg { color: var(--panel-subtle); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .overview-row.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .channel-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .channel-summary { grid-column: 1 / -1; border-bottom: 1px solid var(--panel-line); }
    .channel-strip > .channel-option:nth-of-type(1) { border-left: 0; }
    .channel-strip > .channel-actions { grid-column: 1 / -1; justify-content: flex-end; padding: 12px 18px; border-left: 0; border-top: 1px solid var(--panel-line); }
}
@media (max-width: 1150px) {
    .dashboard-shell { grid-template-columns: 232px minmax(0, 1fr); }
    .overview-row.activity, .overview-row.follow { grid-template-columns: 1fr; }
    .support-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .dashboard-shell { grid-template-columns: minmax(0, 1fr); }
    .panel-sidebar { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 272px; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: 10px 0 40px #0003; }
    .panel-menu-open .panel-sidebar { transform: none; }
    .panel-menu-open .panel-backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: #0006; }
    .dashboard-page .panel-menu { display: grid; }
    .dashboard-header { padding: 0 16px; }
    .dashboard-page .admin-main { padding: 22px 16px 32px; }
}
@media (max-width: 760px) {
    .dashboard-header { height: auto; min-height: 60px; flex-wrap: nowrap; padding: 10px 16px; }
    .header-context { flex: 1 1 auto; }
    .header-context > span, .header-context .header-separator { display: none; }
    .header-actions { width: auto; }
    .dashboard-page .header-actions .panel-button span { display: none; }
    .dashboard-page .header-actions .panel-button { width: 34px; padding: 0; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .overview-row.metrics { grid-template-columns: 1fr; }
    .channel-strip { grid-template-columns: 1fr; }
    .channel-strip > * + * { border-left: 0; border-top: 1px solid var(--panel-line); }
    .channel-summary { border-bottom: 0; }
    .overview-heading-actions { width: 100%; }
    .overview-heading-actions .range-switch { flex: 1 1 100%; }
    .overview-heading-actions .range-switch a { flex: 1; }
    .activity-bar i { width: 8px; }
    .dashboard-page .inbox-presence > p { text-align: left; flex-basis: 100%; }
    .dashboard-page main table:not(.admin-table table) { display: block; max-width: 100%; overflow-x: auto; }
    .dashboard-page h1 { font-size: 24px; }
}

/* The segmented presence control uses radio inputs; keep it out of the generic checkbox-label layout. */
.dashboard-page main .presence-switch label:has(> input) { align-items: center; margin: 0; }

/* Site code: the script a site adds to its pages, with a copy button beside each form of it. */
.widget-embed { display: grid; gap: 12px; }
.widget-embed > p { margin: 0; }
.widget-embed .widget-embed-ready { color: var(--panel-accent); border-color: currentColor; }
.widget-embed .widget-embed-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--panel-muted); }
.widget-embed .widget-embed-steps li { padding: 0; border: 0; }
.widget-embed-steps li::before { content: "○"; margin-right: 8px; }
.widget-embed-steps li.done { color: var(--panel-text); }
.widget-embed-steps li.done::before { content: "●"; color: var(--panel-accent); }
.widget-embed-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.widget-embed-code > div { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.widget-embed-code strong { font-size: 13px; font-weight: 600; }
.widget-embed-code small { font-size: 12px; color: var(--panel-muted); }
.widget-embed-code code { min-width: 0; padding: 9px 12px; border: 1px solid var(--panel-line); border-radius: 8px; background: var(--panel-soft); font-size: 12px; white-space: nowrap; overflow-x: auto; user-select: all; }
.site-code { margin-bottom: 8px; }
.site-code > summary { cursor: pointer; }
.site-code[open] > .widget-embed { margin: 10px 0 14px; max-width: 640px; }
.widget-embed-renew { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
.widget-embed-renew small { font-size: 12px; color: var(--panel-muted); }

/* Customer sites are a directory; installation belongs to the site's own settings page. */
.dashboard-page .customer-sites { padding: 0; overflow: hidden; }
.dashboard-page .customer-sites th { padding: 12px 20px; background: var(--panel-soft); }
.dashboard-page .customer-sites td { padding: 16px 20px; vertical-align: middle; }
.site-cell { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.site-cell > div { min-width: 0; }
.site-cell strong { display: block; font-size: 14px; font-weight: 600; }
.site-cell small { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-monogram { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel-soft); color: var(--panel-text); font-weight: 650; font-size: 16px; }
.site-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--panel-muted); }
.site-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-status--active { color: var(--panel-good); }
.site-status--pending { color: var(--panel-warn); }
.site-service-label { font-size: 12px; white-space: nowrap; }
.site-row-actions { display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.dashboard-page .site-row-actions > .panel-button { font-size: 12px; white-space: nowrap; min-height: 34px; padding: 0 12px; gap: 10px; }
.site-more { flex: none; }
.dashboard-page .site-more > button[aria-expanded=true] { background: var(--panel-soft); color: var(--panel-text); }
.site-more-menu { width: 210px; }
.dashboard-page .site-more-menu .site-access-action.is-destructive { color: var(--panel-danger); }
.customer-sites > nav { padding: 12px 20px; }
.site-install { grid-column: 1 / -1; }
.site-install .widget-embed { gap: 18px; }
.widget-code-management { padding-top: 12px; border-top: 1px solid var(--panel-line); }
.widget-code-management > summary { color: var(--panel-muted); font-size: 12px; cursor: pointer; }
.widget-code-management .widget-embed-renew { margin-top: 12px; }

/* A support desk keeps conversations, messages and contextual work in separate scroll regions. */
.dashboard-page .admin-main:has(.support-workspace) { max-width: none; padding: 16px 20px 20px; }
.dashboard-body:has(.support-workspace) .dashboard-footer, .admin-main:has(.support-workspace) ~ .dashboard-footer { display: none; }
.support-workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.support-workspace-heading .page-heading { display: flex; align-items: center; gap: 12px; margin: 0; flex: none; }
.dashboard-page .support-workspace-heading h1 { margin: 0; font-size: 22px; }
.dashboard-page .support-workspace-heading .inbox-presence { margin: 0; padding: 0; border: 0; background: none; gap: 8px; justify-content: flex-end; }
.dashboard-page .support-workspace-heading .inbox-presence > p { flex: 0 1 auto; margin: 0; font-size: 11px; }
.support-workspace .inbox-toolbar { margin: 0 0 12px; gap: 8px; }
.support-workspace .inbox-filters { width: auto; }
.support-workspace .department-filter { font-size: 12px; }
.support-workbench { gap: 0; border: 1px solid var(--panel-line); border-radius: 12px; overflow: hidden; background: var(--panel-surface); align-items: stretch; }
.dashboard-page .support-workbench > .admin-card { border: 0; border-radius: 0; box-shadow: none; margin: 0; min-width: 0; }
.dashboard-page .support-workbench > .inbox-list { padding: 0; border-right: 1px solid var(--panel-line); position: static; max-height: none; }
.dashboard-page .support-workbench > .inbox-list > .card-title { margin: 0; padding: 16px; top: 0; border-bottom: 1px solid var(--panel-line); background: var(--panel-surface); }
.inbox-scope { display: block; margin-top: 4px; color: var(--panel-subtle); font-size: 11px; }
.support-workbench .inbox-row { padding: 14px 12px; gap: 8px; }
.support-workbench .member-avatar { width: 30px; height: 30px; font-size: 12px; flex: none; }
.support-workbench .inbox-row time { font-size: 10px; }
.dashboard-page .support-workbench > .inbox-detail { padding: 0; min-height: 0; display: flex; flex-direction: column; }
.support-workbench .inbox-detail > .card-title { margin: 0; padding: 16px; border-bottom: 1px solid var(--panel-line); align-items: flex-start; gap: 12px; flex-direction: row; }
.support-workbench .inbox-detail > .card-title h2 { font-size: 14px; }
.support-workbench .inbox-detail > .card-title p { font-size: 11px; margin: 4px 0 0; color: var(--panel-muted); }
.support-workbench .inbox-actions { justify-content: flex-end; gap: 6px; }
.dashboard-page .support-workbench .inbox-actions :is(button, .panel-button) { margin: 0; min-height: 29px; padding: 0 9px; font-size: 11px; }
.support-workbench .inbox-detail > .team-access-note { margin: 0; padding: 6px 16px; border: 0; border-radius: 0; background: var(--panel-surface); gap: 4px 8px; min-height: 0; }
.support-workbench .team-access-note .annotation-actions, .support-workbench .team-access-note p { margin: 0; }
.support-workbench .team-access-note p:empty, .support-workbench .team-access-note .annotation-actions:empty, .support-workbench [data-member-read]:empty { display: none; }
.support-workbench .inbox-detail > .inbox-messages { flex: 1; min-height: 160px; height: auto; padding: 20px 16px; background: var(--panel-bg); border-top: 1px solid var(--panel-line); }
.support-workbench .inbox-message { max-width: 90%; padding: 10px 12px; }
.support-workbench .inbox-message small { font-size: 10px; }
.support-workbench .inbox-message p { margin: 5px 0 0; font-size: 13px; }
.support-workbench .inbox-composer { flex: none; margin: 0; padding: 12px 16px 14px; position: relative; background: var(--panel-surface); }
.support-workbench .inbox-composer > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dashboard-page .support-workbench .inbox-composer textarea { min-height: 72px; max-height: 160px; padding: 10px 12px; font-size: 13px; }
.support-workbench .inbox-composer > div { justify-content: flex-end; margin-top: 8px; }
.support-workbench .ready-reply-picker { margin: 0 0 8px; padding: 0; border: 0; background: none; font-size: 12px; }
.support-workbench .ready-reply-picker[open] { max-height: 220px; overflow-y: auto; }
.support-workbench .ready-reply-options { max-height: 130px; }
.support-workbench .inbox-hint { padding: 12px 16px; margin: 0; }
.support-workbench .inbox-pagination:empty { display: none; }
.support-workbench .inbox-pagination nav { padding: 6px 16px; }
.dashboard-page .support-workbench > .inbox-context { padding: 16px; border-left: 1px solid var(--panel-line); background: var(--panel-surface); font-size: 12px; }
.support-workbench .inbox-context > .card-title { margin-bottom: 18px; }
.support-workbench .inbox-context > .card-title h2 { font-size: 13px; }
.support-workbench .inbox-context > .card-title p { margin: 4px 0 0; color: var(--panel-muted); font-size: 11px; }
.support-workbench .inbox-context .team-access-note { margin-bottom: 12px; padding: 8px 10px; font-size: 12px; }
.support-workbench .inbox-context :is(.inbox-transfer, .inbox-notes) { padding: 12px 0; margin: 0; border: 0; border-top: 1px solid var(--panel-line); border-radius: 0; background: transparent; }
.support-workbench .inbox-context summary { cursor: pointer; font-size: 12px; font-weight: 550; }
.support-workbench .inbox-transfer form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.support-workbench .inbox-transfer :is(small, button) { grid-column: 1; grid-row: auto; }
.support-workbench .inbox-context .inbox-tags { padding-bottom: 14px; margin-bottom: 0; border: 0; }
.support-workbench .inbox-context .support-note-list { max-height: 220px; }
.support-workbench .inbox-context .support-note { padding: 10px; }
.support-workbench .inbox-context .support-note p { font-size: 12px; }
.support-workbench .inbox-context .support-note-composer { margin-top: 12px; padding-top: 12px; }
.dashboard-page .support-workbench .inbox-context textarea { min-height: 70px; font-size: 12px; }
.support-workbench .inbox-context input[type=file] { width: 100%; font-size: 11px; }
.support-workbench .inbox-context .card-title { flex-wrap: wrap; }
.support-workbench .inbox-empty { margin: auto; padding: 40px 20px; }
@media (min-width: 1280px) {
    .support-workspace { height: calc(100dvh - 96px); min-height: 550px; display: flex; flex-direction: column; }
    #support-inbox { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .support-workbench { flex: 1; min-height: 0; grid-template-columns: 244px minmax(300px, 1fr) 260px; }
    .support-workbench:not(:has(.inbox-context)) { grid-template-columns: 280px minmax(0, 1fr); }
    .support-workbench > :is(.inbox-list, .inbox-context) { overflow-y: auto; overscroll-behavior: contain; }
    .support-workbench > .inbox-detail { overflow: hidden; }
}
@media (min-width: 900px) and (max-width: 1279px) {
    .support-workspace-heading { flex-wrap: wrap; }
    .support-workbench { grid-template-columns: 240px minmax(0, 1fr); }
    .support-workbench > .inbox-list { max-height: 780px; overflow-y: auto; }
    .support-workbench > .inbox-context { grid-column: 2; }
    .support-workbench .inbox-messages { min-height: 380px; max-height: 55dvh; }
}
@media (max-width: 899px) {
    .dashboard-page .admin-main:has(.support-workspace) { padding: 14px; }
    .support-workspace-heading { display: block; }
    .support-workspace-heading .page-heading { justify-content: space-between; margin-bottom: 14px; }
    .dashboard-page .support-workspace-heading .inbox-presence { justify-content: flex-start; }
    .support-workbench { grid-template-columns: minmax(0, 1fr); }
    .dashboard-page .support-workbench > .inbox-list { max-height: 280px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--panel-line); }
    .support-workbench .inbox-detail > .card-title { flex-wrap: wrap; }
    .support-workbench .inbox-messages { min-height: 300px; max-height: 55dvh; }
    .dashboard-page .support-workbench > .inbox-context { border-left: 0; border-top: 1px solid var(--panel-line); }
    .widget-embed-code { grid-template-columns: minmax(0, 1fr); }
    .widget-embed-code .panel-button { justify-self: start; }
}

/* Every section uses the same left navigation, inside the main drawer on mobile. */
.panel-mobile-sections { display: none; }
.dashboard-page .panel-nav-group a[aria-current] { background: var(--panel-tint); color: var(--panel-accent); box-shadow: inset 3px 0 var(--panel-accent); }
.panel-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; line-height: 1.5; }
.panel-breadcrumbs a { color: var(--panel-muted); }
.panel-breadcrumbs a:hover { color: var(--panel-accent); }
.panel-breadcrumbs > span { color: var(--panel-subtle); }
.panel-breadcrumbs strong { color: var(--panel-text); }
.panel-content-layout, .panel-content { min-width: 0; }
.panel-content-layout.with-section-rail { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; align-items: start; }
.panel-section-nav { margin: 0; position: sticky; top: 84px; max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.panel-section-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.panel-section-group > p { margin: 0 10px 7px; color: var(--panel-subtle); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.dashboard-page .panel-section-group a { display: flex; align-items: center; min-height: 40px; box-sizing: border-box; padding: 9px 10px; border-radius: 7px; font-size: 12px; font-weight: 550; line-height: 1.5; color: var(--panel-muted); overflow-wrap: anywhere; }
.dashboard-page .panel-section-group a:hover { color: var(--panel-text); background: var(--panel-soft); }
.dashboard-page .panel-section-group a[aria-current] { color: var(--panel-accent); background: var(--panel-tint); }
.dashboard-page .panel-section-group a:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: -2px; }
.panel-site-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.panel-site-heading .panel-workspace-mark { width: 42px; height: 42px; font-size: 18px; }
.panel-site-heading strong { display: block; font-size: 18px; font-weight: 650; }
.panel-site-heading small { display: block; font-size: 12px; color: var(--panel-muted); margin-top: 3px; overflow-wrap: anywhere; }
.dashboard-page .settings-page-heading { margin-bottom: 24px; }
.widget-embed-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.widget-embed-status a { font-size: 12px; }
.widget-embed-code code { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; padding: 16px; }
.widget-code-management > .widget-embed-code { margin-top: 20px; }
.widget-code-management .widget-embed-renew { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--panel-line); }
.chat-window-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.dashboard-page .chat-window-heading h1 { margin: 0 0 10px; }
.chat-window-heading > div > p { margin: 0; max-width: 64ch; font-size: 13px; line-height: 1.65; color: var(--panel-muted); }
.chat-window-visibility { flex: none; margin: 0; }
.chat-window-visibility label { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel-surface); cursor: pointer; }
.chat-window-visibility strong { display: block; font-size: 14px; }
.chat-window-visibility small { display: block; margin-top: 3px; font-size: 12px; color: var(--panel-muted); }
p.chat-window-visibility { font-size: 13px; color: var(--panel-muted); }
.chat-window-page > .settings-card { margin-bottom: 24px; }
.chat-window-appearance-grid { display: grid; gap: 28px; }
.chat-window-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 28px; align-items: start; }
.chat-window-form .settings-form-actions { grid-column: 1 / -1; }
.chat-window-field > label:first-child, .chat-window-field .color-fields label { margin-top: 0; }
.chat-window-field input:not([type=color]) { width: 100%; box-sizing: border-box; }
/* Desktop and phone share one height: 1280×760 at 3.4 parts and 390×780 at 1 part. */
.chat-window-previews { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr); gap: 32px; align-items: end; padding-top: 20px; border-top: 1px solid var(--panel-line); }
.chat-preview { margin: 0; min-width: 0; }
.chat-preview figcaption { margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--panel-muted); }
.chat-preview-screen { position: relative; overflow: hidden; background: #0c121b; }
.chat-preview-screen iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.chat-preview-desktop .chat-preview-screen { aspect-ratio: 1280 / 760; border-radius: 10px; box-shadow: 0 0 0 1px var(--panel-line), var(--panel-shadow); }
.chat-preview-mobile { padding: 6px; }
.chat-preview-mobile .chat-preview-screen { aspect-ratio: 390 / 780; border-radius: 24px; box-shadow: 0 0 0 6px #05080d, var(--panel-shadow); }
.account-security-settings { max-width: 760px; }
.account-security-challenge { width: min(440px, 100%); margin: 64px auto; }
.connection-check-details { margin: 16px 0; }
.connection-check-details p { font-size: 12px; }
.with-section-rail .settings-columns { gap: 20px; }
.with-section-rail .services-layout { grid-template-columns: 1fr; }
.with-section-rail .services-connection { display: grid; grid-template-columns: 1fr; }
@media (max-width: 1200px) {
    .panel-content-layout.with-section-rail { grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
    .with-section-rail .settings-columns { grid-template-columns: 1fr; }
    .chat-window-form { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .panel-content-layout.with-section-rail { display: block; }
    .panel-section-nav { display: none; }
    .panel-mobile-sections { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 12px 18px; padding-left: 10px; border-left: 1px solid var(--panel-line); }
    .panel-mobile-sections > p { margin: 16px 10px 4px; color: var(--panel-subtle); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    .dashboard-page .panel-mobile-sections a { min-height: 44px; padding: 8px 10px; font-size: 12px; line-height: 1.5; }
    .dashboard-page .panel-mobile-sections a[aria-current] { box-shadow: none; }
}
@media (max-width: 760px) {
    .panel-breadcrumbs { font-size: 12px; gap: 6px; }
    .panel-site-heading { margin-bottom: 14px; }
    .widget-embed-code { grid-template-columns: minmax(0, 1fr); }
    .widget-embed-code button { justify-self: start; }
}

.dashboard-page .panel-account-trigger[aria-current] { background: var(--panel-tint); color: var(--panel-accent); }
.dashboard-page .settings-field input[readonly] { background: var(--panel-soft); color: var(--panel-muted); border-style: dashed; }

/* Visitor directory: identity and recent work before access controls. */
.visitor-directory-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.dashboard-page .member-controls-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 20px; }
.dashboard-page .member-detail { position: static; }
.member-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.dashboard-page .member-filters a { padding: 6px 9px; border-radius: 7px; font-size: 12px; }
.dashboard-page .member-filters a[aria-current] { color: var(--panel-accent); background: var(--panel-tint); }
.visitor-conversations { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--panel-line); }
.dashboard-page .visitor-conversations h3 { margin: 0 0 8px; }
.visitor-conversations a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; }
.visitor-conversations a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visitor-conversations small { flex-shrink: 0; color: var(--panel-muted); }
.visitor-access-list { display: grid; gap: 0; margin: 10px 0 20px; }
.dashboard-page .visitor-access-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--panel-line); font-size: 13px; }
.dashboard-page .visitor-access-row input[type=checkbox] { appearance: none; width: 32px; height: 19px; min-width: 32px; margin: 0; padding: 0; border: 1px solid var(--panel-input-line); border-radius: 20px; background: var(--panel-soft); position: relative; cursor: pointer; }
.visitor-access-row input[type=checkbox]::after { content: ''; position: absolute; width: 13px; height: 13px; top: 2px; left: 2px; border-radius: 50%; background: var(--panel-muted); transition: transform .12s; }
.dashboard-page .visitor-access-row input:checked { background: var(--panel-accent-fill); border-color: var(--panel-accent); }
.visitor-access-row input:checked::after { transform: translateX(13px); background: var(--panel-on-accent); }
.visitor-access-row input:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 3px; }
@media (max-width: 1100px) { .dashboard-page .member-controls-grid { grid-template-columns: minmax(0, 1fr); } }

.dashboard-page .member-controls-grid #member-settings { scroll-margin-top: 90px; }

.tool-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 20px; }
.dashboard-page .tool-source-card { min-width: 0; margin: 0; padding: 20px; }
.dashboard-page .tool-permissions-form .tool-permission-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 8px 0; margin: 0; box-sizing: border-box; border-bottom: 1px solid var(--panel-line); font-size: 13px; line-height: 1.4; cursor: pointer; }
.dashboard-page .tool-permissions-form .tool-source-heading { min-height: 24px; padding: 0; border: 0; font-size: 14px; font-weight: 600; }
.dashboard-page .tool-source-heading + p { margin: 8px 0 18px; font-size: 12px; }
.dashboard-page .tool-source-options { margin: 0; }
.dashboard-page .tool-source-card .tool-source-options > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 0; margin: 0; border-top: 1px solid var(--panel-line); list-style: none; font-size: 12px; cursor: pointer; }
.tool-source-options > summary::-webkit-details-marker { display: none; }
.tool-source-options > summary > span { display: flex; align-items: center; gap: 8px; }
.dashboard-page .tool-source-options > summary small { display: inline; margin: 0; padding: 1px 6px; border-radius: 5px; background: var(--panel-soft); color: var(--panel-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.tool-source-options > summary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .15s; }
.tool-source-options[open] > summary svg { transform: rotate(90deg); }
.tool-source-options .tool-permission-list { margin-top: 8px; }
.tool-permission-group { margin-top: 20px; }
.tool-permission-group + .tool-permission-group { margin-top: 24px; }
.tool-group-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dashboard-page .tool-group-heading h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 600; color: var(--panel-muted); }
.dashboard-page .tool-group-heading small { margin: 0; font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
.dashboard-page .tool-group-select { min-height: 28px; padding: 3px 7px; border: 1px solid var(--panel-line); border-radius: 5px; background: transparent; color: var(--panel-accent); font-size: 11px; font-weight: 500; white-space: nowrap; }
.dashboard-page .tool-group-select:hover { background: var(--panel-soft); }
.dashboard-page .tool-group-select[hidden] { display: none; }
.dashboard-page .tool-permission-group .tool-permission-row:last-child { border-bottom: 0; }
.dashboard-page .tool-source-link { display: inline-block; margin-top: 14px; font-size: 12px; }
.dashboard-page .tool-source-card .tool-source-empty { margin: 0; padding-top: 10px; border-top: 1px solid var(--panel-line); font-size: 12px; }
.dashboard-page .tool-capabilities-card { padding: 20px; }
.tool-capabilities-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.dashboard-page .tool-capabilities-heading h2 { margin: 0; font-size: 14px; }
.dashboard-page .tool-capabilities-heading p { margin: 0; font-size: 12px; }
.tool-capabilities-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
.dashboard-page .tool-capability .tool-permission-row { min-height: 48px; }
.tool-permission-row > span { min-width: 0; }
.tool-permission-row:hover > span { color: var(--panel-accent); }
.dashboard-page .tool-permission-row input[type=checkbox] { appearance: none; position: relative; width: 32px; height: 19px; min-width: 32px; padding: 0; margin: 0; border: 1px solid var(--panel-input-line); border-radius: 20px; background: var(--panel-soft); cursor: pointer; }
.tool-permission-row input[type=checkbox]::after { content: ''; position: absolute; width: 13px; height: 13px; top: 2px; left: 2px; border-radius: 50%; background: var(--panel-muted); transition: transform .12s; }
.dashboard-page .tool-permission-row input:checked { background: var(--panel-accent-fill); border-color: var(--panel-accent); }
.tool-permission-row input:checked::after { transform: translateX(13px); background: var(--panel-on-accent); }
.tool-permission-row input:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 3px; }
@media (max-width: 1100px) { .tool-source-grid { grid-template-columns: minmax(0, 1fr); } .tool-capabilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tool-capabilities-grid { grid-template-columns: minmax(0, 1fr); } .tool-capabilities-heading { align-items: flex-start; flex-direction: column; gap: 3px; } }


/* Consistent platform spacing and navigation. */
.platform-panel .panel-content > h1 { margin-bottom:20px; }
.platform-panel .admin-main { max-width:1360px; }
.platform-panel .page-heading { align-items:center; gap:20px; }
.dashboard-page .model-page .page-heading { display:flex; justify-content:space-between; margin-bottom:26px; }
.model-page .page-heading p { margin:8px 0 0; }
.model-default { border:1px solid var(--panel-line); background:var(--panel-surface); border-radius:12px; margin-bottom:24px; }
.model-default > summary { display:flex; align-items:center; gap:14px; list-style:none; padding:19px 22px; cursor:pointer; }
.model-default > summary::-webkit-details-marker { display:none; }
.model-default-icon { display:grid; place-items:center; flex:none; height:38px; width:38px; border-radius:10px; color:var(--panel-accent); background:var(--panel-tint); font-size:22px; }
.model-default-copy { flex:1; min-width:0; }
.model-default-copy small { display:block; margin-bottom:4px; font-size:12px; font-weight:400; color:var(--panel-muted); }
.model-default-copy strong { font-size:14px; font-weight:600; }
.model-default-copy strong span { font-weight:400; color:var(--panel-muted); }
.model-default-fallback { color:var(--panel-muted); font-size:12px; font-weight:400; }
.model-default-edit { padding-left:18px; margin-left:4px; border-left:1px solid var(--panel-line); font-size:12px; font-weight:550; }
.dashboard-page .model-routing-form { padding:20px 22px; border-top:1px solid var(--panel-line); max-width:none; }
.model-provider-workspace { overflow:hidden; border:1px solid var(--panel-line); border-radius:12px; background:var(--panel-surface); margin-bottom:24px; }
.model-provider-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:4px; padding:8px; background:var(--panel-soft); border-bottom:1px solid var(--panel-line); }
.dashboard-page .model-provider-tabs button { display:flex; align-items:center; gap:10px; min-width:0; padding:12px 16px; margin:0; border:1px solid transparent; border-radius:9px; color:var(--panel-muted); background:transparent; text-align:left; box-shadow:none; }
.dashboard-page .model-provider-tabs button[aria-selected=true] { color:var(--panel-text); background:var(--panel-surface); border-color:var(--panel-line); box-shadow:var(--panel-shadow); }
.model-provider-tabs strong { display:block; font-size:13px; font-weight:600; }
.model-provider-tabs small { display:block; margin-top:3px; font-size:11px; font-weight:400; color:var(--panel-muted); }
.model-provider-mark { flex:none; display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--panel-line); border-radius:9px; font-weight:650; font-size:15px; background:var(--panel-surface); }
.model-provider-dot { flex:none; width:6px; height:6px; border-radius:50%; background:var(--panel-input-line); margin-left:auto; }
.model-provider-dot.is-connected { background:var(--panel-good); }
.model-provider-content { padding:26px; }
.model-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:26px; }
.dashboard-page .model-section-heading h2 { font-size:18px; }
.model-section-heading p { font-size:13px; color:var(--panel-muted); margin:7px 0 0; }
.model-connection-row { display:grid; grid-template-columns:minmax(160px,.8fr) minmax(0,2fr); align-items:start; gap:24px; padding:22px 0; border-top:1px solid var(--panel-line); }
.dashboard-page .model-field-copy h3 { margin:0 0 5px; font-size:13px; font-weight:600; }
.model-field-copy p { margin:0; font-size:12px; line-height:1.5; color:var(--panel-muted); }
.model-field-control { min-width:0; }
.model-field-control .panel-select, .dashboard-page .model-field-control > input { margin-top:0; }
.dashboard-page .model-field-copy h3 label { margin:0; font-size:inherit; font-weight:inherit; }
.model-field-control input[readonly] { color:var(--panel-muted); background:var(--panel-bg); }
.model-advanced > .admin-inline { margin-top:16px; }
.dashboard-page .model-key-form, .dashboard-page .model-selection { max-width:none; margin:0; }
.model-key-controls { display:flex; align-items:stretch; gap:10px; }
.dashboard-page .model-key-controls input { min-width:0; flex:1; width:0; margin:0; font-size:13px; }
.dashboard-page .model-key-controls button { flex:none; white-space:nowrap; margin:0; }
.dashboard-page button.secondary { background:var(--panel-surface); border-color:var(--panel-input-line); color:var(--panel-text); }
.dashboard-page button.secondary[type=submit]:hover { background:var(--panel-soft); filter:none; }
.model-current { margin:8px 0 0; font-size:11px; color:var(--panel-subtle); overflow-wrap:anywhere; }
.model-current strong { font-weight:450; color:var(--panel-muted); }
.model-auto-cache { display:inline-flex; align-items:center; gap:8px; color:var(--panel-good); font-size:13px; padding:10px 0; }
.model-save-bar { border-top:1px solid var(--panel-line); padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.model-save-bar small { font-size:12px; color:var(--panel-muted); line-height:1.5; }
.model-save-bar button { flex:none; }
.model-empty-state { display:flex; align-items:center; gap:16px; padding:32px 22px; border:1px dashed var(--panel-input-line); border-radius:10px; background:var(--panel-bg); }
.model-empty-symbol { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--panel-soft); color:var(--panel-subtle); font-size:24px; }
.dashboard-page .model-empty-state h3 { margin:0 0 5px; font-size:14px; font-weight:550; }
.model-empty-state p { font-size:12px; color:var(--panel-muted); margin:4px 0; }
.model-advanced { margin-top:24px; padding-top:14px; border-top:1px solid var(--panel-line); font-size:12px; color:var(--panel-subtle); }
.model-advanced summary { cursor:pointer; }
.model-advanced form { padding-top:14px; }
@media (max-width:900px) { .model-connection-row { grid-template-columns:minmax(0,1fr); gap:12px; } .model-default-fallback { display:none; } }
@media (max-width:600px) {
    .model-provider-content { padding:18px; }
    .dashboard-page .model-provider-tabs button { padding:10px; }
    .model-provider-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
    .model-key-controls, .model-save-bar { flex-direction:column; align-items:stretch; }
    .dashboard-page .model-key-controls input { width:100%; box-sizing:border-box; }
    .model-default > summary { padding:16px; }
    .model-default-copy strong span { display:block; font-size:12px; margin-top:3px; }
    .model-default-icon { display:none; }
    .model-default-edit { padding-left:12px; }
    .dashboard-page .model-page .page-heading { align-items:flex-start; flex-direction:column; gap:16px; }
    .model-page .page-heading > div:first-child { flex:0 1 auto; }
    .panel-select-meta { display:none; }
}

.support-workbench .inbox-thread-navigation { border-bottom:1px solid var(--panel-line); padding:0 16px 12px; flex:none; }
.inbox-member-history { border:1px solid var(--panel-line); border-radius:8px; background:var(--panel-surface); overflow:hidden; }
.inbox-member-history > summary { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; color:var(--panel-text); font-size:12px; font-weight:550; list-style:none; }
.inbox-member-history > summary::-webkit-details-marker { display:none; }
.inbox-member-history > summary::before { content:'›'; font-size:18px; line-height:1; transition:transform .15s; }
.inbox-member-history[open] > summary::before { transform:rotate(90deg); }
.inbox-member-history > summary small { margin-left:auto; color:var(--panel-muted); font-size:11px; font-weight:400; }
.inbox-member-history > nav { max-height:220px; overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--panel-line); }
.inbox-member-history .inbox-history-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; color:var(--panel-text); border-bottom:1px solid var(--panel-line); }
.inbox-history-row > span { min-width:0; }
.inbox-history-row strong { display:block; font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-history-row small { display:block; font-size:10px; color:var(--panel-muted); margin-top:3px; }
.inbox-history-row time { flex:none; font-size:10px; color:var(--panel-muted); font-variant-numeric:tabular-nums; }
.inbox-member-history .inbox-history-row[aria-current], .inbox-member-history .inbox-history-row:hover { background:var(--panel-tint); }
.inbox-history-notice { display:flex; gap:8px 16px; justify-content:space-between; flex-wrap:wrap; margin:0 0 10px; color:var(--panel-muted); font-size:12px; }
.inbox-history-notice a { color:var(--panel-accent); font-weight:550; }
@media(max-width:600px) { .inbox-history-row time { max-width:75px; text-align:right; } }

.evaluation-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 20px 0; }
.evaluation-setup > *, .evaluation-answer { min-width: 0; }
.evaluation-setup fieldset { border: 1px solid var(--panel-line); border-radius: 16px; padding: 20px; }
.evaluation-setup legend { padding: 0 8px; font-weight: 600; }
.evaluation-models { display: grid; gap: 12px; max-height: 240px; overflow-y: auto; margin-top: 16px; }
.evaluation-models label { align-items: flex-start; overflow-wrap: anywhere; }
.evaluation-filter, .evaluation-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.evaluation-filter input[type=search] { max-width: 360px; }
.evaluation-cases { max-height: 540px; overflow-y: auto; border-block: 1px solid var(--panel-line); margin: 16px 0; }
.evaluation-case { display: flex; gap: 14px; align-items: center; padding: 18px 8px; border-bottom: 1px solid var(--panel-line); cursor: pointer; }
.evaluation-case:hover, .evaluation-case:has(input:checked) { background: var(--panel-soft); }
.evaluation-case > span:first-of-type { flex: 1; min-width: 0; }
.evaluation-case a { font-weight: 600; text-decoration: none; display: block; }
.evaluation-case small { display: block; margin-top: 5px; opacity: .7; }
.evaluation-case input, .evaluation-models input { width: 18px; height: 18px; flex-shrink: 0; }
.evaluation-tag { opacity: .6; font-size: 12px; white-space: nowrap; }
.evaluation-run-link { display: flex; gap: 20px; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--panel-line); text-decoration: none; }
.evaluation-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; align-items: start; }
.evaluation-answer { border: 1px solid var(--panel-line); border-radius: 16px; padding: 20px; }
.evaluation-message { padding: 16px; border-radius: 14px; margin: 12px 0; border: 1px solid var(--panel-line); }
.evaluation-message.is-user { background: var(--panel-soft); }
.evaluation-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.evaluation-message small { opacity: .65; }
.evaluation-evidence { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; font-size: 12px; }
.evaluation-metrics { display: flex; flex-wrap: wrap; gap: 12px; }
.evaluation-metrics span { padding: 8px 12px; border: 1px solid var(--panel-line); border-radius: 10px; }
.evaluation-models [hidden], .evaluation-cases [hidden] { display: none; }
.evaluation-table { overflow-x: auto; margin: 16px 0; }
.evaluation-table table { width: 100%; border-collapse: collapse; }
.evaluation-table th, .evaluation-table td { text-align: left; padding: 14px; border-bottom: 1px solid var(--panel-line); vertical-align: top; }
.evaluation-table small, .evaluation-table td span { display: block; }
.evaluation-table small { opacity: .65; }
@media (max-width: 760px) { .evaluation-setup { grid-template-columns: minmax(0, 1fr); } .evaluation-tag { display: none; } .evaluation-filter > *, .evaluation-action > * { width: 100%; } .evaluation-comparison { grid-template-columns: minmax(0, 1fr); } }

/* Benchmark workbench and in-place conversation inspection. */
.benchmark-workspace > .admin-card { margin-bottom: 24px; }
.benchmark-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.benchmark-heading h2, .benchmark-heading h3 { margin: 0; }
.benchmark-heading > span, .benchmark-heading p, .benchmark-muted { color: var(--panel-muted); font-size: 13px; }
.benchmark-setup { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; margin: 20px 0; }
.benchmark-mode { border-left: 1px solid var(--panel-line); padding-left: 32px; }
.benchmark-mode details { margin-top: 24px; }
.benchmark-mode details > label { margin-top: 16px; }
.benchmark-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.benchmark-chips span { background: var(--panel-tint); color: var(--panel-accent); border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.benchmark-filters { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.benchmark-filters > input { flex: 1; min-width: 160px; }
.benchmark-filters > .panel-select { width: 210px; }
.benchmark-filters > label { white-space: nowrap; }
.dashboard-page .benchmark-case-open { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 14px 10px; background: none; color: var(--panel-text); border: 0; text-align: left; border-radius: 8px; font-weight: 400; cursor: pointer; min-width: 0; }
.benchmark-case-open > span:first-child { min-width: 0; flex: 1; }
.benchmark-case-open strong { display: block; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.benchmark-case-open small { color: var(--panel-muted); }
.dashboard-page .benchmark-case-open:hover { background: var(--panel-soft); }
.benchmark-chevron { font-size: 25px; color: var(--panel-subtle); }
.evaluation-case { padding: 0 8px; }
.dashboard-page .evaluation-run-link { width: 100%; background: none; color: var(--panel-text); text-align: left; border-radius: 0; border: 0; border-bottom: 1px solid var(--panel-line); font-size: 13px; font-weight: 400; }
.dashboard-page .evaluation-run-link:hover { background: var(--panel-soft); }
.benchmark-matrix table { min-width: 100%; }
.benchmark-matrix th, .benchmark-matrix td { min-width: 150px; padding: 22px 18px; border-right: 1px solid var(--panel-line); }
.benchmark-matrix thead th { color: var(--panel-muted); font-size: 13px; font-weight: 600; background: var(--panel-soft); }
.benchmark-matrix tbody th { font-size: 14px; min-width: 190px; background: var(--panel-surface); }
.benchmark-matrix tr > :first-child { position: sticky; left: 0; z-index: 1; }
.benchmark-matrix small { font-size: 11px; margin-top: 5px; }
.benchmark-score { color: var(--panel-muted); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.benchmark-matrix .benchmark-best { background: var(--panel-tint); }
.benchmark-best .benchmark-score { color: var(--panel-accent); font-weight: 650; }
.benchmark-unscored { color: var(--panel-subtle); font-size: 13px; }
.benchmark-progress { width: 100%; height: 5px; accent-color: var(--panel-accent); margin: 16px 0; border: 0; }
.benchmark-details { margin: 16px 0; padding-block: 16px; border-block: 1px solid var(--panel-line); }
.benchmark-details > summary { cursor: pointer; font-weight: 550; font-size: 14px; }
.benchmark-details > .admin-form { margin-top: 20px; }
.benchmark-feedback { color: var(--panel-accent); font-size: 13px; }
.benchmark-feedback.is-error { color: var(--panel-danger); }
.benchmark-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(700px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--panel-line); background: var(--panel-bg); color: var(--panel-text); box-shadow: -12px 0 60px #0004; }
.benchmark-drawer[open] { display: flex; flex-direction: column; }
.benchmark-drawer::backdrop { background: #0008; }
body:has(.benchmark-drawer[open]) { overflow: hidden; }
.benchmark-drawer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--panel-line); background: var(--panel-surface); }
.benchmark-drawer-bar > span { font-size: 13px; color: var(--panel-muted); }
.benchmark-drawer-content { overflow-y: auto; padding: 28px; overscroll-behavior: contain; flex: 1; }
.benchmark-drawer-content h2 { font-size: 21px; line-height: 1.4; overflow-wrap: anywhere; }
.benchmark-drawer-content h3 { font-size: 16px; margin-top: 28px; }
.benchmark-drawer .evaluation-message { font-size: 14px; line-height: 1.65; background: var(--panel-surface); margin-right: 28px; }
.benchmark-drawer .evaluation-message.is-user { background: var(--panel-soft); margin-left: 28px; margin-right: 0; }
.benchmark-drawer select { width: 100%; padding-right: 32px; }
@media (max-width: 760px) {
    .benchmark-setup { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .benchmark-mode { border-left: 0; padding-left: 0; }
    .benchmark-filters > .panel-select { flex: 1; }
    .benchmark-filters > label { width: 100%; }
    .benchmark-drawer-content { padding: 20px 16px; }
    .benchmark-drawer-bar { padding: 12px 16px; }
    .benchmark-matrix th, .benchmark-matrix td { min-width: 135px; padding: 16px 12px; }
    .benchmark-matrix tbody th { min-width: 140px; }
}
.benchmark-case-open strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Visitor analytics: traffic chart, breakdown bars, device donut and the latest visits. */
.analytics-kpis .kpi-note { font-size: 11px; }
.analytics-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.analytics-card-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.analytics-card-head small { font-size: 11px; color: var(--panel-subtle); }
.analytics-chart-card { padding-bottom: 4px; }
.analytics-chart { display: block; width: calc(100% - 40px); height: 240px; margin: 16px 20px 0; overflow: visible; }
.analytics-chart text { font-size: 11px; fill: var(--panel-subtle); font-variant-numeric: tabular-nums; }
.analytics-gridline { stroke: var(--panel-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.analytics-area { fill: color-mix(in srgb, var(--panel-series-1) 18%, transparent); }
.analytics-line { fill: none; stroke: var(--panel-series-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.analytics-line-views { stroke: var(--panel-series-2); stroke-width: 2; stroke-dasharray: 5 4; }
.analytics-point rect { fill: transparent; }
.analytics-point:hover rect { fill: color-mix(in srgb, var(--panel-text) 6%, transparent); }
.analytics-scale { margin: 4px 20px 0; font-size: 11px; color: var(--panel-subtle); }
.analytics-empty { margin: 0; padding: 60px 20px; text-align: center; font-size: 13px; color: var(--panel-subtle); }
.analytics-strip { margin: 14px 20px 16px; }
.analytics-strip dt { font-size: 12px; color: var(--panel-subtle); }
.analytics-strip dd { margin: 2px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.analytics-live { padding-bottom: 12px; }
.analytics-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--panel-good); box-shadow: 0 0 0 4px var(--panel-good-soft); }
.analytics-live-count { display: block; margin: 14px 20px 0; font-size: 40px; font-weight: 650; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.analytics-live > small { display: block; margin: 6px 20px 0; font-size: 12px; color: var(--panel-subtle); }
.analytics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.analytics-bars { list-style: none; margin: 0; padding: 12px 20px 18px; display: grid; gap: 6px; }
.analytics-bars li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; padding: 4px 8px; border-radius: 6px; font-size: 12px; isolation: isolate; }
.analytics-bars li > i { position: absolute; inset: 0 auto 0 0; width: var(--share); border-radius: 6px; background: color-mix(in srgb, var(--panel-series-1) 14%, transparent); z-index: -1; }
.analytics-bars li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-bars li > span small { display: block; font-size: 10px; color: var(--panel-subtle); overflow: hidden; text-overflow: ellipsis; }
.analytics-bars li > b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.analytics-bars .analytics-none, .analytics-legend .analytics-none { color: var(--panel-subtle); justify-content: flex-start; }
.analytics-live .analytics-bars { margin-top: 10px; }
.analytics-donut-wrap { display: flex; align-items: center; gap: 20px; padding: 16px 20px 20px; }
.analytics-donut { width: 120px; height: 120px; flex: none; transform: rotate(-90deg) scaleY(-1); }
.analytics-donut circle { fill: none; stroke-width: 6; }
.analytics-donut-track { stroke: var(--panel-soft); }
.analytics-donut-part.analytics-series-1, .analytics-legend .analytics-series-1 { stroke: var(--panel-series-1); background: var(--panel-series-1); }
.analytics-donut-part.analytics-series-2, .analytics-legend .analytics-series-2 { stroke: var(--panel-series-2); background: var(--panel-series-2); }
.analytics-donut-part.analytics-series-3, .analytics-legend .analytics-series-3 { stroke: var(--panel-warn); background: var(--panel-warn); }
.analytics-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; font-size: 13px; }
.analytics-legend li { display: flex; align-items: center; gap: 8px; }
.analytics-legend i { width: 10px; height: 10px; border-radius: 3px; }
.analytics-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.analytics-recent { margin-bottom: 20px; }
.analytics-recent .table-scroll { padding: 12px 20px 20px; overflow-x: auto; }
.analytics-recent table { width: 100%; font-size: 12px; }
.analytics-recent td { white-space: nowrap; }
.analytics-path { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
@media (max-width: 1100px) { .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .analytics-grid { grid-template-columns: minmax(0, 1fr); } .analytics-chart { height: 180px; } }
.live-visits td { white-space: nowrap; font-size: 12px; }
.live-visits td small { display: block; font-size: 10px; color: var(--panel-subtle); }
@media (max-width: 700px) {
    .chat-window-heading { flex-direction: column; }
    .chat-window-previews { grid-template-columns: 1fr; }
    .chat-preview-mobile { max-width: 220px; }
}