/* ENGAGE — shared Agent and Supervisor presentation. No external fonts. */
:root {
    --ps-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ps-text-xs: 12px;
    --ps-text-sm: 13px;
    --ps-text: 15px;
    --ps-section-title: 20px;
    --ps-title: 32px;
    --ps-kpi-primary: 48px;
    --ps-kpi-secondary: 26px;
    --ps-space-1: 4px;
    --ps-space-2: 8px;
    --ps-space-3: 12px;
    --ps-space-4: 16px;
    --ps-space-5: 20px;
    --ps-space-6: 24px;
    --ps-space-8: 32px;
    --ps-space-10: 40px;
    --ps-space-12: 48px;
    --ps-shell: #0b0f14;
    --ps-shell-raised: #111720;
    --ps-shell-hover: #171e28;
    --ps-bg: #f7f8f8;
    --ps-stone: #e8e3d9;
    --ps-soft: #fafaf9;
    --ps-surface: #ffffff;
    --ps-text-color: #11151b;
    --ps-muted: #65748b;
    --ps-on-dark: #f5f2ea;
    --ps-muted-on-dark: #9da5af;
    --ps-accent: #b49a63;
    --ps-accent-light: #c2aa76;
    --ps-accent-text: #7d683e;
    --ps-border: rgba(20, 25, 32, .08);
    --ps-dark-border: rgba(255, 255, 255, .08);
    --ps-success: #16843d;
    --ps-success-bg: #eaf7ee;
    --ps-warning: #80673d;
    --ps-warning-bg: #f1ede3;
    --ps-danger: #b73535;
    --ps-danger-bg: #fff0ef;
    --ps-info: #586d7f;
    --ps-info-bg: #eaf0f3;
    --ps-radius-badge: 20px;
    --ps-radius-sm: 8px;
    --ps-radius: 12px;
    --ps-radius-lg: 16px;
    --ps-shadow: 0 8px 28px rgba(20, 25, 32, .035);
    --ps-shadow-modal: 0 20px 60px rgba(11, 15, 20, .18);
}

/* The only !important boundary: neutralize Frappe Desk chrome and constraints. */
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.navbar, .body-sidebar, .desk-sidebar, .desk-sidebar-wrapper, .standard-sidebar, .layout-side-section, .layout-side-section-wrapper, .page-head) {
    display: none !important;
}
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.main-section, .page-container, .page-body, .page-wrapper, .layout-main, .layout-main-section-wrapper, .layout-main-section) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
body:is(.cc-supervisor-mode, .cc-agent-mode) .layout-main { display: block !important; }
body:is(.cc-supervisor-mode, .cc-agent-mode) { margin: 0; background: var(--ps-bg); }
.cc-workspace, body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal, .cc-import-overlay, .cc-campaign-overlay) {
    font: 400 var(--ps-text)/1.45 var(--ps-font);
    color: var(--ps-text-color);
}
.cc-workspace *, .cc-workspace *::before, .cc-workspace *::after { box-sizing: border-box; }
.cc-workspace {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    grid-template-rows: 72px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--ps-bg);
}
.cc-workspace [hidden] { display: none; }
.cc-workspace svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; }

/* Product navigation: grouped hierarchy, restrained selection, no pill menu. */
.cc-navigation {
    grid-column: 1;
    grid-row: 1 / 3;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--ps-space-6) var(--ps-space-4) var(--ps-space-5);
    background: linear-gradient(150deg, #10191e, var(--ps-shell) 65%);
    color: var(--ps-on-dark);
    border-right: 1px solid var(--ps-dark-border);
}
.cc-wordmark {
    display: flex;
    align-items: center;
    padding: 0 var(--ps-space-2);
    text-decoration: none;
    color: var(--ps-on-dark);
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.8px;
}
.cc-wordmark:hover { color: var(--ps-on-dark); text-decoration: none; }
.cc-wordmark-ai { color: var(--ps-accent-light); }
.cc-brand-emblem { display: flex; align-items: center; gap: 3px; height: 24px; margin-right: 10px; transform: skewY(-18deg); }
.cc-brand-emblem i { width: 3px; height: 12px; background: var(--ps-accent); }
.cc-brand-emblem i:nth-child(2) { height: 20px; }
.cc-brand-emblem i:nth-child(3) { height: 16px; }
.cc-nav-caption {
    padding: var(--ps-space-3) var(--ps-space-2) var(--ps-space-5);
    color: var(--ps-muted-on-dark);
    font-size: 11px;
    letter-spacing: 1.1px;
}
.cc-navigation nav { display: grid; gap: var(--ps-space-1); }
.cc-nav-group-label { padding: var(--ps-space-4) var(--ps-space-3) var(--ps-space-2); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ps-muted-on-dark); }
.cc-nav-group-label:first-child { padding-top: 0; }
.cc-workspace .cc-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 60px;
    padding: 12px var(--ps-space-3);
    width: 100%;
    border: 0;
    border-radius: var(--ps-radius-sm);
    color: var(--ps-muted-on-dark);
    background: transparent;
    text-align: left;
    font: 400 var(--ps-text)/1.4 var(--ps-font);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.cc-workspace .cc-nav-item:hover { background: var(--ps-shell-hover); color: var(--ps-on-dark); }
.cc-workspace .cc-nav-item:is([aria-current], [aria-selected="true"]) {
    background: var(--ps-shell-hover);
    color: var(--ps-on-dark);
    box-shadow: inset 0 0 0 1px rgba(194, 170, 118, .14);
}
.cc-workspace .cc-nav-item:is([aria-current], [aria-selected="true"])::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ps-accent-light);
}
.cc-workspace .cc-nav-item:is([aria-current], [aria-selected="true"]) svg { color: var(--ps-accent-light); }
.cc-nav-bottom { margin-top: auto; border-top: 1px solid var(--ps-dark-border); padding: var(--ps-space-5) var(--ps-space-2) 0; display: grid; gap: var(--ps-space-3); overflow-wrap: anywhere; }
.cc-account { display: flex; align-items: center; gap: var(--ps-space-3); min-width: 0; }
.cc-account-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--ps-radius-sm); border: 1px solid var(--ps-dark-border); background: var(--ps-shell-hover); color: var(--ps-accent-light); font-size: var(--ps-text-sm); }
.cc-account strong { display: block; font-size: var(--ps-text-sm); font-weight: 500; }
.cc-account small { display: block; color: var(--ps-muted-on-dark); font-size: var(--ps-text-xs); margin-top: var(--ps-space-1); }
.cc-workspace .cc-logout { display: flex; align-items: center; gap: var(--ps-space-3); background: transparent; color: var(--ps-muted-on-dark); border: 0; padding: var(--ps-space-2) 0; font-size: var(--ps-text-sm); text-align: left; cursor: pointer; }

/* A slim, shared dark application bar connects the navigation and workspace. */
.cc-appbar {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ps-space-5);
    padding: 0 var(--ps-space-6);
    min-width: 0;
    background: var(--ps-shell-raised);
    border-bottom: 1px solid rgba(194, 170, 118, .16);
    color: var(--ps-muted-on-dark);
}
.cc-global-search { display: flex; align-items: center; gap: 10px; width: min(540px, 45%); min-width: 0; padding: 12px 16px; border: 1px solid #35424e; border-radius: 8px; background: #202a32; }
.cc-global-search input { border: 0; background: transparent; color: var(--ps-muted-on-dark); font: 400 14px var(--ps-font); width: 100%; min-width: 0; opacity: 1; }
.cc-global-search input::placeholder { color: var(--ps-muted-on-dark); opacity: 1; }
.cc-global-search svg { width: 15px; height: 15px; }
.cc-global-search kbd { flex-shrink: 0; font: 400 9px var(--ps-font); padding: 2px 4px; border: 1px solid var(--ps-dark-border); border-radius: 3px; color: var(--ps-muted-on-dark); background: transparent; box-shadow: none; }
.cc-appbar-tools { display: flex; align-items: center; gap: var(--ps-space-4); min-width: 0; }
.cc-app-date, .cc-app-live { font-size: var(--ps-text-xs); white-space: nowrap; }
.cc-app-live { display: inline-flex; align-items: center; gap: 6px; padding-left: var(--ps-space-4); border-left: 1px solid var(--ps-dark-border); }
.cc-app-live::before { content: ""; width: 4px; height: 4px; background: var(--ps-accent-light); border-radius: 50%; }
.cc-app-profile { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: var(--ps-shell-hover); border: 1px solid var(--ps-dark-border); font-size: 10px; color: var(--ps-accent-light); }
.cc-workspace .cc-icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ps-muted-on-dark); cursor: pointer; }
.cc-icon-button svg { width: 15px; height: 15px; }
.cc-header-actions { display: flex; align-items: center; gap: var(--ps-space-2); }
.cc-period-selector { display: flex; align-items: center; gap: var(--ps-space-2); padding: 10px 14px; min-height: 44px; margin: 0; background: var(--ps-soft); border: 1px solid var(--ps-border); border-radius: 4px; color: var(--ps-muted); }
.cc-period-selector select { font: 400 14px var(--ps-font); background: transparent; color: var(--ps-text-color); border: 0; padding-right: var(--ps-space-2); width: 70px; }
.cc-period-selector svg { width: 14px; height: 14px; }
.cc-workspace .cc-refresh-button { display: flex; align-items: center; gap: 7px; padding: 8px 11px; min-height: 44px; min-width: 140px; justify-content: center; font: 600 14px var(--ps-font); color: var(--ps-on-dark); background: var(--ps-shell-raised); border: 1px solid var(--ps-shell-raised); border-radius: 4px; cursor: pointer; }
.cc-refresh-button svg { width: 14px; height: 14px; }
.cc-metric-primary .cc-metric-label { color: var(--ps-muted); }
.cc-metric-primary .cc-metric-label svg { color: var(--ps-accent-light); }
.cc-section-kicker { display: block; font-size: 11px; letter-spacing: 1px; color: var(--ps-muted); margin-bottom: 4px; }
.cc-chart-legend { display: inline-flex; align-items: center; gap: 6px; }
.cc-chart-legend i { width: 12px; height: 2px; background: var(--ps-accent); }
.cc-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 116px; padding: var(--ps-space-3); text-align: center; }
.cc-empty-state strong { font-size: 12px; font-weight: 400; color: var(--ps-text-color); }
.cc-empty-state p { max-width: 320px; font-size: 10px; color: var(--ps-muted); line-height: 1.5; margin: 0; }
.cc-empty-icon { display: grid; place-items: center; color: var(--ps-accent-text); margin-bottom: 3px; }
.cc-empty-icon svg { width: 22px; height: 22px; stroke-width: 1.2; }
.cc-turnover-plot { min-height: 232px; display: flex; align-items: center; justify-content: center; }
.cc-turnover-plot > .cc-empty-state { width: 100%; min-height: 172px; border-top: 1px solid var(--ps-border); border-bottom: 1px solid var(--ps-border); }
/* Chart drawing is data-driven; product code does not synthesize a series. */
.cc-turnover-chart { width: 100%; }
.cc-turnover-chart svg { width: 100%; height: 218px; display: block; }
.cc-chart-grid { stroke: var(--ps-border); stroke-width: 1; }
.cc-chart-line { fill: none; stroke: var(--ps-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cc-chart-area { fill: rgba(180, 154, 99, .07); }
.cc-chart-dot { fill: var(--ps-accent-light); stroke: var(--ps-soft); stroke-width: 2; }
.cc-chart-axis { fill: var(--ps-muted); font: 12px var(--ps-font); }
.cc-chart-footer { display: flex; justify-content: space-between; color: var(--ps-muted); font-size: 10px; margin-top: 4px; }
.cc-ranking-tabs { display: flex; gap: var(--ps-space-4); border-bottom: 1px solid var(--ps-border); margin-bottom: 9px; }
.cc-ranking-tabs button { font: 400 11px var(--ps-font); background: transparent; color: var(--ps-muted); padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.cc-ranking-tabs button[aria-selected="true"] { color: var(--ps-text-color); border-bottom-color: var(--ps-accent); }
.cc-ranking-content { min-height: 0; }
.cc-ranking-content .cc-empty-state { min-height: 150px; }
.cc-ranking-list { margin: 0; padding: 0; list-style: none; }
.cc-ranking-row { display: grid; grid-template-columns: 26px 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--ps-border); font-size: 11px; }
.cc-ranking-row:last-child { border-bottom: 0; }
.cc-rank-position { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f8ebc9; color: var(--ps-accent-text); font-size: 10px; font-variant-numeric: tabular-nums; }
.cc-rank-avatar { display: grid; place-items: center; width: 32px; height: 32px; background: var(--ps-stone); border-radius: 50%; color: var(--ps-muted); font-size: 11px; }
.cc-rank-person { display: grid; grid-template-columns: minmax(110px,1fr) minmax(80px,1fr); align-items: center; gap: 12px; min-width: 0; }
.cc-rank-person > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ranking-row b { font-weight: 500; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-ranking-row progress { width: 100%; height: 7px; border: 0; border-radius: 8px; background: var(--ps-stone); accent-color: var(--ps-accent); }
.cc-ranking-row progress::-webkit-progress-bar { background: var(--ps-stone); }
.cc-ranking-row progress::-webkit-progress-value { background: var(--ps-accent); border-radius: 8px; }
.cc-ranking-row progress::-moz-progress-bar { background: var(--ps-accent); }
.cc-ranking-row:first-child progress { accent-color: var(--ps-accent); }
.cc-ranking-row:first-child progress::-webkit-progress-value { background: var(--ps-accent); }
.cc-ranking-row:first-child progress::-moz-progress-bar { background: var(--ps-accent); }
.cc-workspace .cc-text-button { display: inline-flex; align-items: center; gap: 6px; font: 400 13px var(--ps-font); min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--ps-accent-text); cursor: pointer; }
.cc-text-button svg { width: 12px; height: 12px; }
.cc-recent-panel { padding-bottom: var(--ps-space-3); }
.cc-recent-panel .cc-panel-heading { margin-bottom: var(--ps-space-2); }
.cc-recent-panel .cc-table-scroll { max-height: 185px; }
.cc-workspace .cc-recent-panel :is(th, td) { font-size: 12px; padding: 10px 8px; }
.cc-workspace .cc-recent-panel th:first-child, .cc-workspace .cc-recent-panel td:first-child { padding-left: 0; }
.cc-workspace .cc-recent-panel th:last-child, .cc-workspace .cc-recent-panel td:last-child { padding-right: 0; }
.cc-workspace .cc-recent-panel .cc-table-empty { padding: 0; }
.cc-table-empty .cc-empty-state { min-height: 80px; }
.cc-table-empty .cc-empty-state strong { font-size: 11px; }
.cc-table-empty .cc-empty-icon svg { width: 18px; height: 18px; }
.cc-table-note { padding-top: var(--ps-space-2); color: var(--ps-muted); font-size: 11px; border-top: 1px solid var(--ps-border); }
.cc-small-badge { display: inline-block; font-size: 11px; font-weight: 400; border-radius: 20px; padding: 5px 10px; white-space: nowrap; }
.cc-badge-success { color: var(--ps-success); background: var(--ps-success-bg); }
.cc-badge-warning { color: var(--ps-warning); background: var(--ps-warning-bg); }
.cc-badge-danger { color: var(--ps-danger); background: var(--ps-danger-bg); }
.cc-badge-info { color: var(--ps-info); background: var(--ps-info-bg); }
.cc-workspace .cc-muted { color: var(--ps-muted); }

/* Operational header: period is descriptive; no nonfunctional date selector. */
.cc-main {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    padding: 0 var(--ps-space-6) var(--ps-space-4);
    width: 100%;
    margin: 0 auto;
}
.cc-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ps-space-6);
    padding: var(--ps-space-4) 0;
}
.cc-eyebrow {
    color: var(--ps-muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.2px;
    margin-bottom: var(--ps-space-1);
}
.cc-workspace h1 {
    font-size: var(--ps-title);
    font-weight: 650;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 var(--ps-space-1);
}
.cc-workspace h2 { font-size: var(--ps-section-title); font-weight: 650; letter-spacing: -.3px; margin: 0; }
.cc-workspace p { color: var(--ps-muted); margin: var(--ps-space-2) 0 var(--ps-space-4); }
.cc-workspace-header p { font-size: var(--ps-text); margin: 0; }
.cc-header-controls {
    display: grid;
    justify-items: end;
    gap: var(--ps-space-2);
}
.cc-sync { display: flex; align-items: center; justify-content: flex-end; gap: var(--ps-space-2); font-size: var(--ps-text-xs); color: var(--ps-muted); text-align: right; max-width: 260px; }
.cc-sync::before { content: ""; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; flex-shrink: 0; }
.cc-sync-error { color: var(--ps-warning); }

/* Six light KPI cards, matching the approved dashboard hierarchy. */
.cc-workspace .cc-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.cc-metric { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; align-items: start; min-width: 0; position: relative; border: 1px solid var(--ps-border); border-radius: var(--ps-radius); background: var(--ps-surface); padding: 20px 18px; box-shadow: var(--ps-shadow); }
.cc-metric-label { font-size: 14px; color: var(--ps-muted); min-height: 22px; }
.cc-metric-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fcf6eb; color: #97702e; }
.cc-metric-icon svg { width: 28px; height: 28px; }
.cc-metric:nth-child(even) .cc-metric-icon { background: var(--ps-success-bg); color: var(--ps-success); }
.cc-metric-label svg { order: -1; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #fbf5e9; color: #97702e; }
.cc-metric:nth-child(even) .cc-metric-label svg { color: var(--ps-success); background: var(--ps-success-bg); }
.cc-metric strong { white-space: nowrap; display: block; margin: 10px 0 8px; font-size: clamp(22px,1.45vw,28px); font-weight: 650; line-height: 1.15; letter-spacing: -.8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc-metric small b { display: block; color: var(--ps-success); font-size: 14px; }
.cc-metric small span { display: block; }
.cc-metric small { display: block; color: var(--ps-muted); font-size: 12px; }

/* The first analytics row fits below the KPIs at 1366 x 768. */
.cc-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--ps-space-4);
}
.cc-panel {
    min-width: 0;
    padding: var(--ps-space-4) var(--ps-space-5);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    background: var(--ps-surface);
    box-shadow: var(--ps-shadow);
}
.cc-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ps-space-3);
    margin-bottom: var(--ps-space-3);
}
.cc-panel-heading > span { font-size: var(--ps-text-xs); color: var(--ps-muted); }
.cc-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 176px; padding: var(--ps-space-4); text-align: center; background: var(--ps-bg); border-radius: var(--ps-radius-sm); }
.cc-unavailable strong { font-size: var(--ps-text); font-weight: 500; }
.cc-unavailable p { max-width: 340px; font-size: var(--ps-text-sm); line-height: 1.6; margin: var(--ps-space-2) 0 0; }
.cc-empty-symbol { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: var(--ps-space-2); color: var(--ps-accent-text); }
.cc-availability-label { margin-top: var(--ps-space-3); color: var(--ps-muted); font-size: var(--ps-text-xs); }
.cc-data-note { margin-top: var(--ps-space-4); color: var(--ps-muted); font-size: var(--ps-text-sm); }
.cc-data-note summary { cursor: pointer; width: fit-content; }
.cc-data-note p { max-width: 720px; }
.cc-workspace-footer { display: flex; justify-content: space-between; gap: var(--ps-space-4); color: var(--ps-muted); font-size: var(--ps-text-xs); padding-top: var(--ps-space-5); }

/* Tables stay tables. Sticky headings belong to their own scroll container. */
.cc-table-scroll {
    overflow: auto;
    max-height: 62vh;
}
.cc-workspace table, body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ps-text); }
.cc-workspace th, body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ps-soft);
    color: var(--ps-muted);
    text-align: left;
    font-size: var(--ps-text-xs);
    font-weight: 400;
    letter-spacing: .1px;
    padding: var(--ps-space-3);
    border-bottom: 1px solid var(--ps-border);
    white-space: nowrap;
}
.cc-workspace td, body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-table td {
    padding: var(--ps-space-3);
    border-bottom: 1px solid var(--ps-border);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.cc-workspace tbody tr:last-child td { border-bottom: 0; }
.cc-workspace .cc-agent-table { min-width: 980px; }
.cc-workspace .cc-agent-row { cursor: pointer; }
.cc-workspace tbody tr:hover, .cc-workspace tbody tr:focus-within { background: #faf4e6; }
.cc-workspace .cc-agent-name { font-weight: 500; }
.cc-workspace .cc-agent-user { display: none; }
.cc-team-summary { color: var(--ps-muted); padding-bottom: var(--ps-space-5); font-size: var(--ps-text-sm); }
.cc-workspace .cc-status { display: inline-flex; align-items: center; gap: var(--ps-space-1); border-radius: var(--ps-radius-badge); padding: 4px 7px; background: var(--ps-bg); color: var(--ps-muted); font-size: var(--ps-text-xs); font-weight: 400; white-space: nowrap; }
.cc-workspace .cc-status-ready { background: var(--ps-success-bg); color: var(--ps-success); }
.cc-workspace :is(.cc-status-oncall, .cc-status-ringing, .cc-status-dialing) { background: var(--ps-info-bg); color: var(--ps-info); }
.cc-workspace .cc-status-pause { background: var(--ps-warning-bg); color: var(--ps-warning); }
.cc-workspace .cc-status-error { background: var(--ps-danger-bg); color: var(--ps-danger); }
.cc-workspace .cc-agent-actions { display: flex; gap: var(--ps-space-2); }
.cc-workspace .cc-empty { color: var(--ps-muted); font-size: var(--ps-text-sm); padding: var(--ps-space-5) 0; text-align: center; }

/* Controls and dialogs use the same tokens, including retained feature modals. */
.cc-workspace :is(.cc-button, .cc-agent-action), body:is(.cc-supervisor-mode, .cc-agent-mode) :where(.modal .btn, .cc-import-overlay button, .cc-campaign-overlay button) {
    min-height: 44px; font: 500 14px/1.4 var(--ps-font);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-sm);
    padding: 10px var(--ps-space-4);
    background: var(--ps-surface);
    color: var(--ps-text-color);
    box-shadow: none;
    cursor: pointer;
}
.cc-workspace .cc-button, body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.btn-primary, .cc-import-action, .cc-save-campaign, .cc-import-finish) { background: var(--ps-shell-raised); border-color: var(--ps-shell-raised); color: var(--ps-on-dark); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .btn-danger { color: var(--ps-danger); background: var(--ps-danger-bg); border-color: transparent; }
.cc-workspace button:hover, body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal .btn, .cc-import-overlay button, .cc-campaign-overlay button):hover { filter: brightness(.96); }
.cc-workspace button:disabled, body:is(.cc-supervisor-mode, .cc-agent-mode) button:disabled { opacity: .5; cursor: not-allowed; }
.cc-workspace :focus-visible, body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal, .cc-import-overlay, .cc-campaign-overlay) :focus-visible { outline: 2px solid var(--ps-accent-text); outline-offset: 3px; }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal-content, .cc-import-modal, .cc-campaign-modal) { border: 1px solid var(--ps-border); border-radius: var(--ps-radius-lg); box-shadow: var(--ps-shadow-modal); background: var(--ps-bg); }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal-header, .modal-footer) { padding: var(--ps-space-5) var(--ps-space-6); border-color: var(--ps-border); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .modal-body { padding: var(--ps-space-6); }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-import-modal-head, .cc-campaign-modal-head) { background: var(--ps-shell-raised); padding: var(--ps-space-6) var(--ps-space-8); }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-import-modal-head h2, .cc-campaign-modal-head h2) { font-size: 24px; font-weight: 500; letter-spacing: -.5px; }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-import-close, .cc-campaign-close, .cc-new-campaign-button) { color: var(--ps-on-dark); background: var(--ps-shell-hover); border-color: var(--ps-dark-border); }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal, .cc-import-overlay, .cc-campaign-overlay) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font: 400 var(--ps-text)/1.45 var(--ps-font); color: var(--ps-text-color); background: var(--ps-surface); border: 1px solid var(--ps-border); border-radius: var(--ps-radius-sm); box-shadow: none; padding: 10px var(--ps-space-3); }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-import-overlay, .cc-campaign-overlay) input { accent-color: var(--ps-info); }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-campaign-card, .cc-new-campaign-form, .cc-campaign-agent-choice, .cc-import-agent-row, .cc-import-stat, .cc-import-distribution-card, .cc-import-preview, .cc-import-file-box, .cc-import-success-lists div) { background: var(--ps-surface); border-color: var(--ps-border); border-radius: var(--ps-radius); box-shadow: none; }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-campaign-card { border-left-width: 2px; }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-campaign-card.active { border-left-color: var(--ps-success); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-campaign-card.upcoming { border-left-color: var(--ps-info); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-campaign-card.paused { border-left-color: var(--ps-warning); }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-campaign-progress span) { background: var(--ps-info); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-campaign-progress { background: var(--ps-stone); border-radius: 0; height: 3px; }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-campaign-card-top b, .cc-import-distribution-card b, .cc-import-template) { color: var(--ps-accent-text); }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-campaign-agents span, .cc-campaign-day span) { color: var(--ps-info); background: var(--ps-info-bg); border-radius: var(--ps-radius-badge); }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-import-campaign-meta span, .cc-import-success-icon) { color: var(--ps-success); background: var(--ps-success-bg); border-radius: var(--ps-radius-sm); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-import-stat.good strong { color: var(--ps-success); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-import-stat.warn strong { color: var(--ps-warning); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-import-spinner { border-top-color: var(--ps-accent); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-campaign-stats div { background: var(--ps-bg); border-radius: var(--ps-radius-sm); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ps-space-3); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-stat { background: var(--ps-surface); border-radius: var(--ps-radius-sm); padding: var(--ps-space-4); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-stat :is(span, strong) { display: block; }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-stat span { font-size: var(--ps-text-sm); color: var(--ps-muted); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-stat strong { font-size: 24px; font-weight: 400; }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-section { margin-top: var(--ps-space-6); }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-table-wrap { overflow: auto; max-height: 42vh; }
body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-agent-detail-head { display: flex; justify-content: space-between; gap: var(--ps-space-5); margin-bottom: var(--ps-space-5); }

/* Shared density and layout from the approved desktop references. */
.cc-app-person { display: grid; gap: 3px; color: var(--ps-on-dark); font-size: 14px; }
.cc-app-person small { color: var(--ps-muted-on-dark); font-size: 12px; }
.cc-app-profile { width: 44px; height: 44px; border-radius: 50%; font-size: 15px; }
.cc-supervisor[data-section]:not([data-section="dashboard"]) .cc-appbar { background: #fff; color: var(--ps-muted); border-color: var(--ps-border); }
.cc-supervisor[data-section]:not([data-section="dashboard"]) .cc-app-person { color: var(--ps-text-color); }
.cc-supervisor[data-section]:not([data-section="dashboard"]) .cc-global-search { background: #f2f4f5; border-color: var(--ps-border); }
.cc-campaign-overview { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1.4fr; align-items: center; gap: 24px; margin-bottom: 12px; min-height: 86px; }
.cc-campaign-overview > div + div { padding-left: 24px; border-left: 1px solid var(--ps-border); }
.cc-campaign-overview strong, .cc-campaign-overview span { display: block; }
.cc-campaign-overview strong { font-size: 17px; }
.cc-campaign-overview > div:first-child strong { font-size: 23px; }
.cc-campaign-overview span, .cc-campaign-overview p { font-size: 13px; color: var(--ps-muted); margin: 4px 0 0; }
.cc-campaign-analytics .cc-rank-person { grid-template-columns: 1fr; gap: 5px; }
.cc-campaign-analytics .cc-ranking-row { min-height: 32px; padding: 3px 0; grid-template-columns: 26px minmax(0,1fr) auto; }
.cc-campaign-analytics .cc-rank-avatar { display: none; }
.cc-campaign-analytics h2 { margin-bottom: 12px; }
.cc-campaign-analytics .cc-turnover-plot { min-height: 170px; }
.cc-campaign-analytics .cc-turnover-chart svg { height: 170px; }
.cc-dashboard-agents table { font-size: 13px; }
.cc-dashboard-agents :is(th,td) { padding: 9px 6px; }
.cc-dashboard-agents th:nth-child(4), .cc-dashboard-agents td:nth-child(4) { display: none; }
.cc-dashboard-grid .cc-table-note { font-size: 10px; }
.cc-dashboard-grid .cc-panel-heading { margin-bottom: 8px; }
.cc-dashboard-grid .cc-recent-panel .cc-detail-link { min-height: 36px; }
.cc-dashboard-grid .cc-recent-panel table { table-layout: fixed; }
.cc-dashboard-grid .cc-recent-panel :is(th,td) { min-width: 0; padding-left: 5px; padding-right: 5px; }
.cc-dashboard-grid .cc-recent-panel th:first-child { width: 42px; }
.cc-dashboard-grid .cc-recent-panel .cc-table-scroll { overflow-x: hidden; }
.cc-recordings-layout .cc-recording-inline { position: static; width: 100%; height: auto; max-height: none; border: 1px solid var(--ps-border); border-radius: 14px; margin: 18px 0 0; box-shadow: none; font-size: 14px; }
.cc-recording-inline > header { position: static; padding: 12px 16px; }
.cc-recording-inline > header small { display: none; }
.cc-recording-inline > header h2 { font-size: 17px; }
.cc-recording-inline .cc-detail-body { padding: 0; }
.cc-recording-inline .cc-recording-details { padding: 12px 16px; }
.cc-recording-inline .cc-recording-player { border-radius: 0; padding: 18px; }
.cc-recording-inline .cc-recording-player .cc-audio-play { display: block; min-width: 88px; min-height: 56px; margin: 8px auto 16px; background: #fff; color: var(--ps-shell); }
.cc-recording-inline .cc-audio-duration { color: white; }
.cc-recordings-layout .cc-recording-preview { min-height: 44px; padding: 4px 0; }
.cc-recordings-list :is(td,th) { padding: 2px 7px; font-size: 13px; }
.cc-recordings-list td:first-child { max-width: 74px; overflow: hidden; text-overflow: ellipsis; }
.cc-leaders-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-content: start; }
.cc-leaders-panel .cc-panel-heading { margin: 0; }
.cc-leaders-panel .cc-panel-heading > span { display: none; }
.cc-leaders-panel .cc-ranking-tabs { border: 0; gap: 12px; margin: 0; }
.cc-leaders-panel .cc-ranking-tabs button { font-size: 12px; }
.cc-leaders-panel .cc-ranking-content { grid-column: 1 / -1; }
.cc-supervisor[data-section]:not([data-section="dashboard"]) .cc-header-controls { display: flex; align-items: center; gap: 20px; }
.cc-supervisor[data-section]:not([data-section="dashboard"]) .cc-sync { max-width: 380px; }
.cc-supervisor[data-section]:not([data-section="dashboard"]) .cc-workspace-header { min-height: 92px; }
.cc-campaign-analytics + .cc-panel :is(th,td) { padding: 3px 8px; font-size: 13px; }
.cc-campaign-analytics + .cc-panel .cc-panel-heading { margin-bottom: 10px; }
.cc-summary-cards > .cc-panel { position: relative; padding-left: 84px; min-height: 112px; }
.cc-summary-cards > .cc-panel::before { content: ""; position: absolute; left: 18px; top: 22px; width: 46px; height: 46px; border-radius: 14px; background: #fbf3e3; }
.cc-summary-icon { position: absolute; left: 28px; top: 32px; color: #966b29; }
.cc-summary-icon svg { width: 26px; height: 26px; }
.cc-summary-cards > .cc-panel:nth-child(even)::before { background: var(--ps-success-bg); }
.cc-summary-cards > .cc-panel:nth-child(even) .cc-summary-icon { color: var(--ps-success); }
.cc-detail-drawer.cc-recording-inline > header { padding: 12px 16px; }
.cc-detail-drawer.cc-recording-inline > header h2 { font-size: 17px; margin: 0; }
.cc-detail-drawer.cc-recording-inline .cc-detail-body { padding: 0; }
.cc-detail-drawer.cc-recording-inline .cc-recording-details summary { cursor: pointer; }
.cc-detail-drawer.cc-recording-inline .cc-recording-player { padding: 16px 20px; }
.cc-detail-drawer.cc-recording-inline .cc-audio-error:empty { display: none; }
@media(min-width:1600px) {
 .cc-supervisor[data-section="calls"] { grid-template-columns: 249px minmax(0,1fr); grid-template-rows: 96px minmax(0,1fr); }
 .cc-supervisor[data-section="calls"] .cc-main { padding-left: 32px; }
 .cc-recordings-summary .cc-summary-cards { margin: 16px 0 20px; }
 .cc-recordings-summary .cc-summary-cards > .cc-panel { min-height: 135px; }
}
.cc-detail-drawer.cc-recording-inline > header { padding: 4px 16px; }
.cc-detail-drawer.cc-recording-inline .cc-recording-player { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.cc-recording-inline .cc-recording-player audio { display: none; }
.cc-recording-inline .cc-audio-progress { grid-column: 1 / -1; grid-row: 1; margin: 0; }
.cc-recording-inline .cc-audio-duration { grid-column: 1 / -1; grid-row: 2; }
.cc-detail-drawer.cc-recording-inline .cc-recording-player button { margin: 0; padding: 10px; min-height: 52px; }
.cc-detail-drawer.cc-recording-inline .cc-recording-player .cc-audio-play { grid-column: 2; grid-row: 3; min-width: 0; border-radius: 50%; width: 68px; height: 68px; padding: 4px; white-space: nowrap; justify-self: center; }
.cc-recording-inline [data-seek="-10"] { grid-column: 1; grid-row: 3; }
.cc-recording-inline [data-seek="10"] { grid-column: 3; grid-row: 3; }
.cc-recording-inline .cc-audio-error:not(:empty) { grid-column: 1 / -1; }
@media(min-width:1600px) { .cc-dashboard-grid > .cc-panel:nth-child(-n+2) { min-height: 306px; } }
@media(max-width:1100px) { .cc-leaders-panel { display: block; } .cc-supervisor[data-section]:not([data-section="dashboard"]) .cc-header-controls { display: grid; } }
@media(max-width:640px) { .cc-summary-cards > .cc-panel { padding: 16px; } .cc-summary-cards > .cc-panel::before,.cc-summary-cards > .cc-panel::after { display: none; } }

@media(max-width:1400px) { .cc-metric { grid-template-columns: 40px minmax(0,1fr); gap: 10px; } .cc-metric-icon { width: 40px; height: 40px; } .cc-rank-person { grid-template-columns: 1fr; } }
@media(max-width:850px) { .cc-app-person { display: none; } .cc-campaign-overview { grid-template-columns: 1fr 1fr; } }
@media(max-width:640px) { .cc-campaign-overview { grid-template-columns: 1fr; } .cc-campaign-overview > div + div { padding: 0; border: 0; } .cc-metric { display: block; } .cc-metric-icon { margin-bottom: 12px; } .cc-dashboard-grid .cc-recent-panel .cc-table-scroll { overflow: visible; } }

/* Reference analytics and operational cards; all values remain source-driven. */
.cc-recordings-layout { display: grid; grid-template-columns: minmax(0,2.1fr) minmax(280px,1fr); gap: 16px; }
.cc-recording-preview { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ps-border); background: transparent; text-align: left; font: inherit; color: var(--ps-text-color); cursor: pointer; }
.cc-recording-preview > span:nth-child(2) { flex: 1; min-width: 0; }
.cc-recording-preview strong { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.cc-recording-preview small { display: block; color: var(--ps-muted); font-size: 12px; }
.cc-recording-preview > span:last-of-type { font-size: 12px; }
.cc-recording-play-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ps-soft); border: 1px solid var(--ps-border); }
.cc-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cc-recordings-list table { min-width: 740px; }
.cc-recordings-list [data-play-index] { min-height: 44px; padding: 8px 16px; border: 1px solid var(--ps-border); border-radius: 24px; background: var(--ps-soft); text-decoration: none; }
.cc-recordings-list td { white-space: nowrap; }
@media(max-width:1199px) { .cc-recordings-layout { grid-template-columns: minmax(0,1fr); } }
@media(max-width:640px) { .cc-recordings-list td { white-space: normal; } }

.cc-summary-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 12px 0; }
.cc-summary-cards .cc-panel { background: white; min-width: 0; overflow-wrap: anywhere; }
.cc-summary-cards span { color: var(--ps-muted); font-size: 14px; }
.cc-summary-cards strong { display: block; font-size: 30px; line-height: 1.3; margin-top: 10px; font-weight: 650; }
.cc-campaign-analytics { display: grid; grid-template-columns: 2.25fr 1fr .95fr; gap: 16px; margin-bottom: 14px; }
.cc-source-note { font-size: 13px; }
.cc-section-kicker, .cc-eyebrow { display: none; }
.cc-ranking-tabs button { min-height: 44px; font-size: 13px; }
.cc-workspace .cc-logout { min-height: 44px; }
@media(min-width:1600px) {
 .cc-dashboard-grid { grid-template-columns: repeat(24,minmax(0,1fr)); }
 .cc-dashboard-grid .cc-trend { grid-column: span 15; }
 .cc-dashboard-grid .cc-leaders-panel { grid-column: span 9; }
 .cc-dashboard-grid .cc-agent-status-panel { grid-column: span 12; }
 .cc-dashboard-grid .cc-recent-panel { grid-column: span 6; }
 .cc-dashboard-grid .cc-agent-status-panel .cc-table-scroll { max-height: 340px; }
 .cc-dashboard-grid .cc-agent-status-panel td { padding-top: 7px; padding-bottom: 7px; }
}
@media(max-width:1400px) { .cc-metric { padding: 16px; } .cc-metric-label { min-height: 36px; } .cc-metric strong { margin: 8px 0 6px; } .cc-workspace .cc-summary { grid-template-columns: repeat(3,minmax(0,1fr)); } .cc-campaign-analytics { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .cc-campaign-analytics > :first-child { grid-column: 1 / -1; } }
@media(max-width:640px) { .cc-summary-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } .cc-campaign-analytics { grid-template-columns: minmax(0,1fr); } }

@media (min-width: 1600px) {
    .cc-workspace { --ps-title: 36px; --ps-kpi-primary: 56px; grid-template-columns: 222px minmax(0, 1fr); }
    .cc-main, .cc-appbar { padding-left: 24px; padding-right: 24px; }
    .cc-recent-panel .cc-table-scroll { max-height: 288px; }
    .cc-workspace .cc-recent-panel :is(th, td) { font-size: 12px; padding-top: 5px; padding-bottom: 5px; }
    .cc-ranking-row { font-size: 12px; }
    .cc-rank-avatar { font-size: 11px; }
}

/* ENGAGE identity and shared detail presentation. */
body:is(.cc-supervisor-mode, .cc-agent-mode):has(.cc-nav-open), body:is(.cc-supervisor-mode, .cc-agent-mode):has(.cc-detail-drawer[open]:not(.cc-recording-inline)) { overflow: hidden; }
.cc-recent-panel table { table-layout: auto; }
.cc-workspace .cc-recent-panel th { white-space: normal; }
.cc-workspace .cc-recent-panel td { overflow-wrap: normal; min-width: 64px; }
.cc-recent-panel .cc-small-badge { white-space: nowrap; }
body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-import-overlay, .cc-campaign-overlay) { backdrop-filter: none; -webkit-backdrop-filter: none; }

.cc-wordmark { display: grid; justify-items: center; text-align: center; gap: 10px; letter-spacing: 0; padding: 0 0 36px; }
.cc-wordmark strong { font-size: 27px; font-weight: 500; letter-spacing: 2px; }
.cc-wordmark .cc-brand-vendor { font-size: 12px; color: var(--ps-accent-light); }
.cc-wordmark small { display: none; font-size: 10px; color: var(--ps-muted-on-dark); font-weight: 400; }
.cc-brand-credits { display: grid; gap: 5px; font-size: 10px; line-height: 1.5; color: var(--ps-muted-on-dark); }
.cc-brand-credits a { color: inherit; text-decoration: none; }
.cc-brand-credits a:hover { color: var(--ps-accent-light); text-decoration: underline; }
.cc-nav-bottom .cc-brand-credits { padding: 12px 0; border-bottom: 1px solid var(--ps-dark-border); margin-bottom: 12px; }
.cc-navigation { overflow-y: auto; }
.cc-nav-caption { display: none; }
.cc-nav-group-label { padding-top: 8px; }
.cc-workspace .cc-menu-toggle, .cc-mobile-brand, .cc-workspace .cc-nav-close, .cc-nav-backdrop { display: none; }
.cc-agent-status-panel { grid-column: 1 / -1; }
.cc-agent-status-panel .cc-table-scroll { max-height: 360px; }
.cc-detail-link { font: inherit; text-align: left; color: var(--ps-text-color); border: 0; background: transparent; padding: 4px 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--ps-border); text-underline-offset: 4px; }
.cc-detail-link:hover { text-decoration-color: var(--ps-accent-text); }
.cc-metric-primary .cc-metric-label { color: var(--ps-muted); }
.cc-detail-drawer { position: fixed; inset: 0 0 0 auto; width: min(680px, 60vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--ps-bg); color: var(--ps-text-color); font: 400 13px/1.5 var(--ps-font); box-shadow: var(--ps-shadow-modal); }
.cc-detail-drawer::backdrop { background: rgba(11,15,20,.5); }
.cc-detail-drawer > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 24px; background: var(--ps-shell-raised); color: var(--ps-on-dark); }
.cc-detail-drawer header h2 { margin: 4px 0 0; font-size: 24px; font-weight: 500; }
.cc-detail-drawer header small { color: var(--ps-accent-light); font-size: 10px; letter-spacing: 1px; }
.cc-detail-drawer header button { width: 44px; height: 44px; font-size: 28px; background: transparent; color: inherit; border: 1px solid var(--ps-dark-border); border-radius: 4px; cursor: pointer; }
.cc-detail-body { padding: 24px; overflow-wrap: anywhere; }
.cc-detail-fields { display: grid; gap: 0; margin: 0; }
.cc-detail-fields > div { padding: 16px 0; border-bottom: 1px solid var(--ps-border); }
.cc-detail-fields dt, .cc-detail-note { font-weight: 400; color: var(--ps-muted); font-size: 12px; }
.cc-detail-fields dd { margin: 6px 0 0; font-size: 16px; }
.cc-detail-drawer :focus-visible { outline: 2px solid var(--ps-accent-text); outline-offset: 3px; }
.cc-workspace button, .cc-workspace a { transition: background-color 120ms ease, color 120ms ease; }
.cc-workspace button:active { filter: brightness(.9); }
.cc-workspace [aria-busy="true"] { opacity: .5; }
@media (max-width: 1199px) and (min-width: 641px) {
    .cc-workspace { grid-template-columns: 76px minmax(0, 1fr); }
    .cc-navigation { padding: 20px 12px; }
    .cc-wordmark { padding: 0; justify-items: center; }
    .cc-wordmark strong { font-size: 10px; letter-spacing: .6px; }
    .cc-wordmark .cc-brand-vendor, .cc-wordmark small, .cc-nav-caption, .cc-nav-group-label, .cc-nav-item span, .cc-account, .cc-nav-bottom .cc-brand-credits { display: none; }
    .cc-navigation nav { margin-top: 28px; gap: 8px; }
    .cc-workspace .cc-nav-item { justify-content: center; min-height: 48px; padding: 12px; }
    .cc-workspace .cc-logout { font-size: 0; justify-content: center; min-height: 44px; }
    .cc-main { padding: 0 20px 24px; }
    .cc-app-date, .cc-global-search kbd { display: none; }
    .cc-secondary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 0; }
    .cc-metric-secondary:nth-child(3) { border-right: 0; }
    .cc-metric-secondary { padding: 0 16px; }
    .cc-detail-drawer { width: min(760px, 88vw); }
}
@media (max-width: 850px) {
    .cc-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .cc-workspace-header { flex-wrap: wrap; gap: 12px; }
    .cc-header-controls { justify-items: start; }
    .cc-sync { text-align: left; justify-content: flex-start; max-width: none; }
    .cc-global-search { max-width: 260px; }
}
@media (max-width: 1199px) {
    .cc-workspace :is(.cc-text-button, .cc-detail-link, .cc-ranking-tabs button, .cc-button, .cc-agent-action, .cc-icon-button), body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal button, .cc-import-overlay button, .cc-campaign-overlay button) { min-height: 44px; }
    .cc-workspace .cc-icon-button { min-width: 44px; }
    .cc-ranking-tabs { gap: 20px; }
    .cc-ranking-tabs button { font-size: 12px; }
    .cc-ranking-row { min-height: 44px; font-size: 13px; }
    .cc-ranking-row b { font-size: 12px; }
    .cc-workspace .cc-recent-panel :is(th, td) { font-size: 12px; padding: 12px 8px; }
    .cc-recent-panel .cc-table-scroll { max-height: 320px; }
}
@media (max-width: 640px) {
    .cc-workspace { display: block; --ps-title: 28px; --ps-kpi-primary: 42px; --ps-kpi-secondary: 28px; --ps-text-xs: 11px; --ps-text-sm: 12px; }
    .cc-navigation { display: none; position: fixed; inset: 0 auto 0 0; width: min(300px, 88vw); height: 100dvh; z-index: 102; padding: 24px 20px; }
    .cc-nav-open .cc-navigation { display: flex; }
    .cc-nav-open .cc-nav-backdrop { display: block; position: fixed; inset: 0; width: 100%; height: 100dvh; background: rgba(11,15,20,.55); border: 0; z-index: 101; }
    .cc-navigation nav { margin-top: 12px; }
    .cc-navigation .cc-brand-credits a { display: inline-flex; align-items: center; min-height: 44px; }
    .cc-workspace .cc-nav-item { min-height: 44px; }
    .cc-workspace .cc-nav-close { display: block; position: absolute; right: 12px; top: 12px; font-size: 28px; }
    .cc-workspace .cc-menu-toggle { display: block; font-size: 22px; }
    .cc-mobile-brand { display: grid; margin-right: auto; gap: 1px; }
    .cc-mobile-brand strong { font-size: 16px; letter-spacing: 1.5px; font-weight: 500; color: var(--ps-on-dark); }
    .cc-mobile-brand small { font-size: 10px; color: var(--ps-muted-on-dark); }
    .cc-appbar { display: flex; position: sticky; top: 0; z-index: 20; height: 64px; padding: 0 12px; gap: 8px; }
    .cc-global-search, .cc-app-date, .cc-app-live, .cc-app-profile, .cc-appbar-tools button:disabled { display: none; }
    .cc-appbar-tools { gap: 0; }
    .cc-main { padding: 0 16px 24px; }
    .cc-workspace-header { padding: 24px 0 20px; }
    .cc-workspace-header p { font-size: 13px; }
    .cc-header-controls { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .cc-sync { font-size: 11px; }
    .cc-header-actions .cc-refresh-button { display: none; }
    .cc-period-selector { min-height: 44px; }
    .cc-workspace .cc-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .cc-metric-label { flex-wrap: wrap; font-size: 13px; }
    .cc-metric strong { font-size: 26px; }
    .cc-metric-primary { padding: 20px; }
    .cc-secondary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; padding: 20px 0; }
    .cc-metric-secondary, .cc-metric-secondary:first-child, .cc-metric-secondary:last-child { padding: 0 16px; }
    .cc-metric-secondary:nth-child(even) { border-right: 0; }
    .cc-panel { padding: 20px 16px; }
    .cc-panel-heading { flex-wrap: wrap; gap: 8px; }
    .cc-workspace .cc-text-button { font-size: 12px; }
    .cc-section-kicker { font-size: 10px; }
    .cc-turnover-plot { min-height: 180px; }
    .cc-ranking-tabs { justify-content: space-between; gap: 8px; }
    .cc-workspace .cc-table-scroll { overflow: visible; max-height: none; }
    .cc-workspace table, .cc-workspace .cc-agent-table { display: block; width: 100%; min-width: 0; }
    .cc-workspace thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .cc-workspace tbody { display: grid; gap: 12px; }
    .cc-workspace tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; background: var(--ps-surface); border: 1px solid var(--ps-border); border-radius: 4px; }
    .cc-workspace tbody td, .cc-workspace .cc-recent-panel tbody td { display: block; padding: 8px; border: 0; font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
    .cc-workspace tbody td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--ps-muted); margin-bottom: 4px; }
    .cc-workspace tbody td:first-child, .cc-workspace tbody td:last-child, .cc-workspace td.cc-table-empty { grid-column: 1 / -1; padding: 8px; }
    .cc-workspace td.cc-table-empty::before { display: none; }
    .cc-workspace .cc-agent-actions { flex-wrap: wrap; }
    .cc-small-badge { font-size: 11px; white-space: normal; }
    .cc-workspace-footer { flex-wrap: wrap; font-size: 11px; }
    .cc-detail-drawer { width: 100vw; max-width: 100vw; }
    .cc-detail-body { padding: 20px; }
    .cc-detail-drawer .cc-agent-detail-head { flex-wrap: wrap; }
    .cc-detail-drawer .cc-agent-detail-table-wrap { overflow: visible; max-height: none; }
    .cc-detail-drawer table, .cc-detail-drawer tbody { display: block; width: 100%; }
    .cc-detail-drawer thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .cc-detail-drawer tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 12px 0; background: var(--ps-surface); padding: 12px; }
    body:is(.cc-supervisor-mode, .cc-agent-mode) .cc-detail-drawer td { padding: 8px; border: 0; min-width: 0; overflow-wrap: anywhere; }
    .cc-detail-drawer td::before { content: attr(data-label); display: block; color: var(--ps-muted); font-size: 11px; margin-bottom: 4px; }
    .cc-detail-drawer td:first-child, .cc-detail-drawer td:last-child { grid-column: 1 / -1; }

    body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal-dialog, .cc-import-modal, .cc-campaign-modal) { width: 100%; max-width: 100%; margin: 0; border-radius: 0; max-height: 100dvh; }
    body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-import-overlay, .cc-campaign-overlay) { padding: 0; }
    body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal-content, .cc-import-modal, .cc-campaign-modal) { min-height: 100dvh; border-radius: 0; }
    body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal-body, .cc-import-modal-body, .cc-campaign-modal-body) { padding: 20px; }
    body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-import-modal-head, .cc-campaign-modal-head) { padding: 20px; flex-wrap: wrap; }
    body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.cc-campaign-form-grid, .cc-campaign-stats, .cc-import-stats, .cc-import-distribution-grid, .cc-agent-detail-stats) { grid-template-columns: minmax(0, 1fr); }
    body:is(.cc-supervisor-mode, .cc-agent-mode) :is(.modal, .cc-import-overlay, .cc-campaign-overlay) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { width: 100%; max-width: 100%; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-workspace *, .cc-detail-drawer { transition: none; animation: none; }
}

/* Focused operational refinements; retain the existing ENGAGE composition. */
.cc-operational-warning { margin: 0 0 16px; padding: 12px 16px; border-left: 2px solid var(--ps-warning); background: var(--ps-warning-bg); color: var(--ps-warning); font-size: 13px; }
.cc-app-live.cc-sync-error { color: var(--ps-accent-light); }
.cc-supervision-menu summary { cursor: pointer; font-size: 12px; color: var(--ps-accent-text); padding: 8px 0; }
.cc-supervision-menu > div { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.cc-supervision-menu .cc-agent-action { padding: 8px; font-size: 11px; }
.cc-detail-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cc-detail-jumps button { font: inherit; padding: 10px 16px; min-height: 44px; border: 1px solid var(--ps-border); background: var(--ps-surface); color: var(--ps-text-color); border-radius: var(--ps-radius-sm); cursor: pointer; }
.cc-detail-drawer [id^="cc-agent-"] { scroll-margin-top: 115px; }
.cc-report-list > div { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--ps-border); }
.cc-report-list > div:last-child { border: 0; }
.cc-report-list h3 { margin: 0; font-size: 16px; font-weight: 500; }
.cc-report-list p { margin: 8px 0 0; }
.cc-report-list .cc-button { flex-shrink: 0; }
@media (max-width: 1199px) {
    .cc-supervision-menu summary { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 640px) {
    .cc-report-list > div { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Agent composition: operational strip, customer / phone, result / receipt, action rail. */
.cc-logo { object-fit: contain; flex: 0 0 auto; }
.cc-agent { grid-template-columns: 282px minmax(0,1fr); grid-template-rows: minmax(100vh,auto); }
.cc-agent-main { grid-column: 2; grid-row: 1; min-width: 0; padding: 18px 24px 18px 40px; }
.cc-agent .cc-navigation { padding-top: 34px; }
.cc-agent .cc-wordmark { padding-bottom: 46px; }
.cc-agent .cc-topbar { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(140px,.6fr) minmax(170px,1fr); align-items: stretch; gap: 16px; min-height: 100px; margin-bottom: 28px; }
.cc-agent .cc-topbar > div { display: flex; justify-content: center; flex-direction: column; min-width: 0; padding: 18px 24px; background: white; border-radius: 16px; }
.cc-agent .cc-topbar > div:first-child { background: #fbf8f1; border: 1px solid #ede8dc; }
.cc-agent .cc-status-title, .cc-agent .cc-queue-label { font-size: 14px; color: var(--ps-muted); }
.cc-agent .cc-nav-item { font-size: 17px; }
.cc-agent .cc-nav-item svg { width: 28px; height: 28px; }
.cc-agent .cc-status-value { font-size: 20px; font-weight: 650; margin-top: 6px; }
.cc-agent .cc-topbar .cc-queue-stats { flex-direction: row; align-items: center; justify-content: space-around; gap: 20px; }
.cc-agent .cc-queue-number { display: block; font-size: 26px; font-weight: 650; margin-top: 6px; }
.cc-agent .cc-topbar .cc-agent-progress { flex-direction: row; align-items: center; gap: 10px; padding: 8px; }
.cc-agent-progress > span { order: 2; font-size: 13px; color: var(--ps-muted); }
.cc-agent-progress progress { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cc-progress-label { display: grid; place-items: center; flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(closest-side,white 77%,transparent 80%),conic-gradient(var(--ps-accent) calc(var(--cc-progress,0)*1%),#e5e5e2 0); font-size: 20px; }
.cc-agent .cc-topbar .cc-agent-account { background: transparent; padding: 16px; gap: 6px; }
.cc-agent-account strong { font-size: 17px; }
.cc-agent .cc-connected { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ps-muted); }
.cc-agent .cc-dot { width: 12px; height: 12px; background: #28a34a; border-radius: 50%; box-shadow: 0 0 0 7px #25ac4915; margin-right: 6px; }
 .cc-agent .cc-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(340px,1fr); grid-template-areas: "customer phone" "tabs phone" "result result"; gap: 10px 28px; align-items: start; }
.cc-agent .cc-card { min-width: 0; padding: 22px 28px; border: 1px solid #eceff1; border-radius: 16px; background: white; box-shadow: var(--ps-shadow); }
.cc-agent .cc-card-title { font-size: 22px; font-weight: 650; margin: 0 0 18px; }
.cc-agent .cc-customer-card { grid-area: customer; min-height: 266px; margin-top: 44px; position: relative; padding-top: 28px; }
.cc-agent .cc-card-title.cc-contact-caption { position: absolute; top: -38px; left: 6px; font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--ps-muted); margin-bottom: 20px; }
.cc-agent .cc-customer-name { font-size: 40px; line-height: 1.2; font-weight: 650; letter-spacing: -.8px; max-width: 65%; overflow-wrap: anywhere; margin-bottom: 20px; }
.cc-agent .cc-phone, .cc-contact-email, .cc-contact-location { font-size: 22px; color: var(--ps-muted); margin-top: 12px; }
.cc-agent .cc-phone::before { content: "☎"; display: inline-block; width: 36px; color: var(--ps-shell); }
.cc-contact-email::before { content: "✉"; display: inline-block; width: 36px; color: var(--ps-shell); }
.cc-contact-location::before { content: "⌖"; display: inline-block; width: 36px; color: var(--ps-shell); }
.cc-customer-note { position: absolute; right: 26px; top: 80px; width: 35%; padding: 18px; border-radius: 12px; background: #f7f5f0; }
.cc-customer-note strong { font-size: 16px; }
.cc-customer-note p { font-size: 15px; line-height: 1.6; margin: 10px 0 0; }
.cc-customer-more { margin-top: 16px; font-size: 12px; color: var(--ps-muted); }
.cc-customer-more summary { cursor: pointer; min-height: 28px; }
.cc-agent .cc-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 12px 0; }
.cc-agent .cc-stat-value { font-size: 20px; font-weight: 600; }
.cc-agent .cc-agent-tabs { grid-area: tabs; display: flex; gap: 12px; border: 0; margin: 0; }
.cc-agent-tabs button { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; padding: 14px 26px; border: 0; border-radius: 12px; background: transparent; color: var(--ps-muted); font: 500 17px var(--ps-font); cursor: pointer; }
.cc-agent-tabs button[aria-selected="true"] { color: var(--ps-text-color); background: #fcf7ed; box-shadow: inset 0 -3px var(--ps-accent); }
.cc-agent .cc-result-card { grid-area: result; display: grid; grid-template-columns: minmax(0,.83fr) minmax(0,1.17fr); gap: 16px; border: 0; padding: 0; background: transparent; }
.cc-result-form, .cc-receipt-card { min-height: 400px; }
.cc-agent .cc-result-card:has(.cc-disposition option[value="SALE"]:checked):not(.cc-result-saved) .cc-result-form { grid-column: 1 / -1; }
.cc-agent .cc-result-card:has(.cc-disposition option[value="SALE"]:checked):not(.cc-result-saved) .cc-receipt-card { display: none; }
.cc-agent .cc-label { display: block; font-size: 15px; margin: 10px 0 6px; }
.cc-agent :is(input:not([type=checkbox]),select,textarea) { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #d9dee5; border-radius: 9px; background: white; color: var(--ps-text-color); font: inherit; padding: 10px 14px; }
.cc-agent textarea.cc-textarea { min-height: 90px; resize: vertical; }
.cc-agent .cc-check { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; }
.cc-agent-actionbar { grid-column: 1 / -1; background: white; padding: 12px 24px; border: 1px solid var(--ps-border); border-radius: 14px; display: flex; justify-content: center; gap: 16px; }
.cc-agent :is(.cc-save,.cc-btn-main,.cc-call,.cc-mute,.cc-sale-add,.cc-sale-remove,.cc-qty-step) { min-height: 48px; border: 1px solid var(--ps-border); border-radius: 10px; padding: 12px 18px; cursor: pointer; font: 600 16px var(--ps-font); }
.cc-agent :is(.cc-save,.cc-btn-main) { background: var(--ps-shell-raised); color: white; }
.cc-agent .cc-save, .cc-agent .cc-interaction-next { width: min(100%,760px); min-height: 60px; }
.cc-agent .cc-interaction-next:disabled { background: #e4e6e9; color: #858b94; border-color: #d9dde2; opacity: 1; cursor: not-allowed; }
.cc-agent button:disabled { opacity: .5; cursor: not-allowed; }
.cc-agent .cc-phone-card { grid-area: phone; min-height: 330px; padding: 28px 32px; background: linear-gradient(150deg,#1d2529,#080f15); color: white; display: grid; grid-template-columns: 1fr 1fr; justify-items: center; align-content: start; gap: 12px 24px; }
.cc-agent .cc-phone-card > :is(.cc-card-title,.cc-dial-display) { display: none; }
.cc-agent .cc-phone-state { grid-column: 1 / -1; justify-self: start; font-size: 20px; font-weight: 500; color: white; margin: 0; }
.cc-agent .cc-phone-state::before { content: ""; display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 16px; background: #68d381; box-shadow: 0 0 12px #68d381; }
.cc-call-timer { grid-column: 1 / -1; justify-self: start; padding-left: 30px; font-size: 30px; font-variant-numeric: tabular-nums; width: 100%; padding-bottom: 14px; border-bottom: 1px solid #ffffff14; }
.cc-agent .cc-phone-card :is(.cc-call,.cc-mute) { width: 122px; height: 122px; border-radius: 50%; margin-top: 12px; padding: 16px; box-shadow: inset 0 1px 0 #ffffff35,0 8px 20px #00000024; color: white; }
.cc-agent .cc-call { background: linear-gradient(#41b959,#1e973c); }
.cc-agent .is-active .cc-call { background: linear-gradient(#ef5555,#cd2626); }
.cc-agent .cc-mute { background: linear-gradient(#384147,#1c252e); }
.cc-agent .cc-mute[aria-pressed="true"] { background: var(--ps-accent); color: var(--ps-shell); }
.cc-agent .cc-phone-card:has(.cc-mute[hidden]) .cc-call { grid-column: 1 / -1; }
.cc-agent .cc-call::before, .cc-agent .cc-mute::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 8px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 3H4a1 1 0 0 0-1 1c0 9 8 17 17 17a1 1 0 0 0 1-1v-4l-5-2-2 3a15 15 0 0 1-7-7l3-2-2-5Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.cc-agent .is-active .cc-call::before { transform: rotate(135deg); }
.cc-agent .cc-mute::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='2' width='6' height='13' rx='3'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8'/%3E%3C/svg%3E"); }
.cc-agent .cc-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.cc-agent [hidden] { display: none; }
.cc-agent .cc-table { width: 100%; border-collapse: collapse; }
.cc-agent .cc-table :is(th,td) { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--ps-border); font-size: 15px; }
.cc-agent .cc-table th { font-weight: 400; color: var(--ps-muted); }
.cc-agent .cc-history-card, .cc-receipt-content { overflow-x: auto; }
.cc-agent .cc-empty { padding: 36px 0; color: var(--ps-muted); text-align: center; }
.cc-sale-box { margin: 16px 0; }
.cc-sale-head { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.cc-sale-head strong, .cc-sale-head span { display: block; }
.cc-sale-head span { color: var(--ps-muted); font-size: 13px; }
.cc-agent .cc-sale-row { display: grid; grid-template-columns: minmax(0,2fr) minmax(160px,1fr) minmax(90px,.6fr) minmax(90px,.6fr) 48px; align-items: end; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ps-border); }
.cc-sale-row label { display: block; font-size: 13px; margin-bottom: 6px; }
.cc-sale-row > div { min-width: 0; }
.cc-sale-quantity { display: flex; align-items: center; }
.cc-agent .cc-sale-quantity input { text-align: center; padding: 4px; }
.cc-agent .cc-qty-step { padding: 8px; min-width: 44px; }
.cc-sale-price, .cc-sale-line-total { display: flex; align-items: center; min-height: 48px; }
.cc-sale-footer { display: flex; justify-content: flex-end; margin-top: 16px; }
.cc-sale-footer strong { display: block; font-size: 30px; }
.cc-sale-status:not(:empty) { display: flex; align-items: center; gap: 16px; margin: 16px 0; padding: 18px; background: #e9f8ed; color: #08672e; border: 1px solid #d8efdf; border-radius: 10px; font-size: 20px; }
.cc-sale-status:not(:empty)::before { content: "✓"; display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(#47c461,#168c35); color: white; font-size: 26px; }
.cc-agent .cc-sale-saved :is(.cc-sale-rows,.cc-sale-add) { display: none; }
.cc-agent .cc-result-saved .cc-result-form > :is(.cc-label,.cc-disposition,.cc-subdisposition,.cc-notes,.cc-check) { display: none; }
.cc-agent .cc-result-saved .cc-sale-head { display: none; }
.cc-agent .cc-result-saved .cc-result-form > :is(.cc-notes-label,.cc-notes) { display: block; }
.cc-agent .cc-result-saved .cc-result-form:has(.cc-notes:placeholder-shown) > :is(.cc-notes,.cc-notes-label) { display: none; }
.cc-agent .cc-result-saved .cc-notes { color: var(--ps-muted); background: #fafbfb; opacity: 1; }
.cc-agent .cc-result-saved .cc-sale-footer { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--ps-border); justify-content: flex-start; }
.cc-agent .cc-result-saved .cc-sale-box { display: flex !important; flex-direction: column; }
.cc-agent .cc-result-saved .cc-sale-status { order: -1; }
.cc-sold-products tbody tr:first-child { background: #eaf7ee; }
.cc-sold-products tfoot { font-weight: 650; }
.cc-sold-products tfoot td { font-size: 24px !important; padding-top: 14px; padding-bottom: 14px; }
.cc-sold-products p { font-size: 11px; margin: 8px 0 0; }
.cc-panel.cc-operational-filters { padding: 8px 16px; }
.cc-operational-filters > button { min-height: 44px; min-width: 120px; }
.cc-operational-filters > .cc-filter-clear { background: #faf7f0; color: var(--ps-text-color); border-color: var(--ps-border); }
.cc-operational-filters { display: flex; align-items: end; gap: 24px; flex-wrap: wrap; margin: 12px 0; }
.cc-operational-filters label { display: grid; gap: 6px; flex: 1; min-width: 150px; font-size: 13px; color: var(--ps-muted); }
.cc-operational-filters select, .cc-operational-filters input { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #d9dee5; border-radius: 8px; background: white; font: inherit; color: var(--ps-text-color); }
.cc-recording-player { background: linear-gradient(145deg,#1d282f,#0d141a); padding: 24px; border-radius: 12px; color: white; }
.cc-recording-player audio { width: 100%; }
.cc-recording-player button { border: 1px solid var(--ps-dark-border); border-radius: 12px; background: #26303c; color: white; font: inherit; cursor: pointer; min-height: 48px; padding: 12px; margin: 12px 8px 0 0; }
.cc-agent-menu { display: none; }
@media(max-width:1400px) {
 .cc-agent { grid-template-columns: 220px minmax(0,1fr); } .cc-agent-main { padding: 16px 20px; }
 .cc-agent .cc-topbar { grid-template-columns: 1.3fr 1fr .8fr 1fr; gap: 8px; } .cc-agent .cc-topbar > div { padding: 12px; }
 .cc-agent .cc-grid { grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); gap: 12px 20px; }
 .cc-agent .cc-card { padding: 20px; } .cc-agent .cc-customer-name { font-size: 32px; }
 .cc-agent .cc-phone, .cc-contact-email, .cc-contact-location { font-size: 18px; }
 .cc-customer-note { position: static; width: 100%; margin-top: 12px; padding: 12px; }
 .cc-agent .cc-phone-card :is(.cc-call,.cc-mute) { width: 106px; height: 106px; font-size: 14px; }
 .cc-agent-tabs button { padding: 12px 16px; }
}
@media(max-width:1100px) {
 .cc-agent { grid-template-columns: 180px minmax(0,1fr); } .cc-agent .cc-agent-tabs { gap: 4px; } .cc-agent-tabs button { flex: 1; min-width: 0; padding: 12px 8px; gap: 8px; font-size: 14px; } .cc-agent .cc-topbar { grid-template-columns: 1fr 1fr; }
 .cc-agent .cc-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "customer" "phone" "tabs" "result"; }
 .cc-agent .cc-result-card, .cc-agent .cc-bottom { grid-template-columns: minmax(0,1fr); }
 .cc-result-form,.cc-receipt-card { min-height: auto; }
 .cc-agent .cc-sale-row { grid-template-columns: minmax(0,1fr) minmax(120px,.7fr); } .cc-sale-product-wrap { grid-column: 1 / -1; }
 .cc-agent .cc-customer-name { max-width: none; } .cc-agent .cc-navigation .cc-wordmark strong { display: block; } .cc-agent .cc-nav-item span { display: inline; }
 .cc-agent .cc-phone-card { min-height: 260px; }
}
@media(max-width:600px) {
 .cc-agent { display: block; } .cc-agent-main { padding: 14px 14px 140px; }
 .cc-agent .cc-navigation { position: relative; display: grid; grid-template-columns: 1fr auto; padding: 14px 20px; height: auto; width: 100%; transform: none; visibility: visible; }
 .cc-agent .cc-wordmark { display: flex; gap: 10px; padding: 0; } .cc-agent .cc-wordmark strong { font-size: 22px; }
 .cc-agent-menu { display: block; min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--ps-dark-border); color: white; border-radius: 8px; }
 .cc-agent .cc-navigation nav, .cc-agent .cc-navigation .cc-nav-bottom { display: none; }
 .cc-agent .cc-navigation.is-open nav { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; }
 .cc-agent .cc-navigation.is-open .cc-nav-bottom { display: grid; grid-column: 1 / -1; }
 .cc-agent .cc-topbar { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
 .cc-agent .cc-topbar > div { padding: 10px; } .cc-agent .cc-topbar .cc-queue-stats { gap: 10px; }
 .cc-agent .cc-topbar .cc-agent-progress { display: none; } .cc-agent .cc-topbar .cc-agent-account { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; padding: 4px; }
 .cc-agent .cc-status-value { font-size: 16px; } .cc-agent .cc-queue-label { font-size: 12px; } .cc-agent .cc-queue-number { font-size: 22px; }
 .cc-agent .cc-card { padding: 16px; } .cc-agent .cc-customer-card { min-height: 0; } .cc-agent .cc-customer-name { font-size: 28px; margin-bottom: 12px; }
 .cc-customer-note { font-size: 13px; } .cc-agent .cc-phone, .cc-contact-email, .cc-contact-location { font-size: 16px; margin-top: 8px; }
 .cc-agent .cc-phone-card { min-height: 150px; } .cc-agent .cc-call-timer { font-size: 28px; }
 .cc-agent .cc-phone-card .cc-call { position: fixed; bottom: 12px; left: 14px; width: calc(100% - 28px); height: 48px; min-height: 48px; border-radius: 10px; z-index: 40; margin: 0; padding: 12px; }
 .cc-agent .cc-phone-card .cc-mute { position: fixed; bottom: 72px; left: 14px; width: calc(100% - 28px); height: 48px; min-height: 48px; border-radius: 10px; z-index: 40; margin: 0; padding: 12px; }
 .cc-agent .cc-call::before,.cc-agent .cc-mute::before { display: none; }
 .cc-agent:has(.cc-result-saved) .cc-phone-card .cc-call { display: none; }
 .cc-agent .cc-agent-tabs { gap: 0; } .cc-agent-tabs button svg { display: none; } .cc-agent-tabs button { min-width: 0; flex: 1; font-size: 14px; padding: 10px 6px; }
 .cc-agent-actionbar { padding: 12px; } .cc-agent .cc-save { font-size: 14px; }
 .cc-agent .cc-stats { grid-template-columns: 1fr 1fr; }
 .cc-agent .cc-sold-products td::before { content: attr(data-label); }
}

.cc-webphone-status { display: flex; align-items: center; gap: 8px; padding: 12px; margin-bottom: 20px; border-radius: 8px; background: var(--ps-shell-hover); color: var(--ps-muted-on-dark); font-size: 13px; }
.cc-webphone-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ps-muted-on-dark); }
.cc-webphone-ready .cc-webphone-dot, .cc-webphone-call .cc-webphone-dot { background: #7fa58b; }
.cc-webphone-ringing .cc-webphone-dot { background: var(--ps-accent); }
.cc-webphone-error .cc-webphone-dot { background: #bb6666; }


.cc-agent .cc-result-saved .cc-sale-box { margin-top: 0; }
.cc-agent .cc-result-saved .cc-sale-head { display: none; }
.cc-agent .cc-result-saved .cc-result-form > :is(.cc-notes-label,.cc-notes) { display: block; }
.cc-agent .cc-result-saved .cc-result-form:has(.cc-notes:placeholder-shown) > :is(.cc-notes,.cc-notes-label) { display: none; }
.cc-agent .cc-result-saved .cc-notes { color: var(--ps-muted); background: #fafbfb; opacity: 1; }
.cc-agent :focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 3px; }

.cc-audio-progress { width: 100%; min-height: 44px; accent-color: var(--ps-accent); }
.cc-audio-duration { display: block; font-variant-numeric: tabular-nums; }