/* Shared component dimensions and semantic colors; company controls are the reference. */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --control-height: 40px; --control-radius: 8px; --panel-space: 24px;
  --primary-bg: #7564de; --primary-hover: #8271ec; --on-primary: #fff;
  --scrim: rgb(4 7 12 / .62); --soft-fill: rgb(255 255 255 / .025);
}
:root[data-theme="dark"] {
  color-scheme: dark; color: var(--text); background: var(--bg);
  --bg:#0d0f14; --sidebar:#111318; --surface:#15181f; --surface-2:#1a1e26; --surface-3:#212630;
  --line:#2b303b; --line-strong:#3c4351; --text:#f1f3f8; --text-soft:#d0d5df; --muted:#adb5c4; --faint:#a1aabb;
  --accent:#a598ff; --accent-soft:rgb(165 152 255 / .12); --accent-line:rgb(165 152 255 / .35);
  --green:#69d9a5; --green-soft:rgb(105 217 165 / .12); --amber:#f0c371; --amber-soft:rgb(240 195 113 / .12);
  --red:#ff8c99; --red-soft:rgb(255 140 153 / .12); --blue:#8ac4ff;
  --shadow:0 16px 48px rgb(0 0 0 / .32);
}
:root[data-theme="light"] {
  color-scheme: light; color: var(--text); background: var(--bg);
  --bg:#f5f6fa; --sidebar:#fff; --surface:#fff; --surface-2:#f7f8fb; --surface-3:#eef0f6;
  --line:#e0e4ed; --line-strong:#b9c1cf; --text:#202635; --text-soft:#414d61; --muted:#59677a; --faint:#5f6b7e;
  --accent:#6752cd; --accent-soft:#f0edff; --accent-line:#c9c0f2;
  --green:#15734c; --green-soft:#eaf7ef; --amber:#865409; --amber-soft:#fff5e4;
  --red:#b42f47; --red-soft:#fff0f2; --blue:#2469a6;
  --primary-bg:#6752cd; --primary-hover:#5742ba; --shadow:0 16px 48px rgb(34 44 67 / .12);
  --soft-fill:rgb(33 44 66 / .025); --scrim:rgb(24 33 51 / .38);
}
[hidden] { display:none !important; }
html { line-height:1.5; }
body { background:var(--bg); color:var(--text); }
h1 { font-size:24px; line-height:1.3; letter-spacing:-.025em; }
h2 { font-size:18px; line-height:1.4; }
h3 { font-size:15px; line-height:1.4; }
.sidebar { background:var(--sidebar); }
.page { padding:32px; max-width:1560px; }
.page-header, .editor-header, .call-header { gap:24px; margin-bottom:24px; }
.page-header p { font-size:14px; line-height:1.6; margin-top:8px; max-width:72ch; }
.button { min-height:var(--control-height); padding:8px 16px; border-radius:var(--control-radius); font-size:14px; line-height:20px; gap:8px; box-shadow:none; }
.button.small { min-height:36px; padding:6px 12px; font-size:13px; }
.button.primary { background:var(--primary-bg); border-color:var(--primary-bg); color:var(--on-primary); box-shadow:none; }
.button.primary:hover:not(:disabled) { background:var(--primary-hover); border-color:var(--primary-hover); box-shadow:none; }
.button.ghost { background:transparent; color:var(--text-soft); border-color:var(--line); }
.button.secondary { background:var(--surface-2); color:var(--text); }
.button.danger { background:var(--red-soft); color:var(--red); border-color:color-mix(in srgb,var(--red) 28%,var(--line)); }
.panel { border-radius:12px; background:var(--surface); }
.panel-heading { padding:24px; gap:16px; align-items:flex-start; }
.panel-heading p { font-size:13px; line-height:1.55; margin-top:4px; }
.panel-heading-actions { flex-direction:row; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.field, .field-grid { gap:8px; }
.field-grid { column-gap:16px; row-gap:24px; }
.field > span { font-size:13px; line-height:20px; color:var(--text-soft); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea {
  min-height:var(--control-height); padding:9px 12px; font-size:14px; line-height:20px;
  border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text);
}
input::placeholder, textarea::placeholder { color:var(--faint); opacity:1; }
textarea { line-height:1.6; }
.form-hint, .field-help, .field-error { font-size:12px; line-height:1.6; }
.badge { font-size:12px; line-height:18px; padding:3px 9px; font-weight:550; }
.data-table th { padding:12px 16px; font-size:12px; letter-spacing:.055em; background:var(--surface-2); }
.data-table td { padding:14px 16px; font-size:14px; line-height:1.5; }
.data-table td small { font-size:12px; line-height:1.5; margin-top:4px; }
.data-table th:first-child, .data-table td:first-child { padding-left:24px; }
.data-table th:last-child, .data-table td:last-child { padding-right:24px; }
html[data-table-density="comfortable"] .data-table td { padding-top:20px; padding-bottom:20px; }
.campaigns-filters, #campaignFilters { padding:24px; gap:16px; }
.campaign-extra-filters { margin-top:0; }
.campaign-extra-filters > summary { font-size:13px; padding:8px 0; }
.campaign-extra-fields { gap:16px; padding-top:16px; }
.campaign-pagination { padding:16px 24px; font-size:13px; }
.campaign-activity-popover { background:var(--surface); box-shadow:var(--shadow); padding:16px; }
.campaign-activity-tabs button { min-height:36px; font-size:13px; }
.campaign-activity-popover dt, .campaign-activity-popover dd { font-size:13px; }
.editor-page { padding-top:32px; }
.editor-title h1 { font-size:22px; line-height:1.35; }
.editor-layout { gap:24px; }
.editor-field { padding:16px; }
.editor-usage-note { padding:24px; line-height:1.6; }
.editor-usage-note p { max-width:70ch; font-size:14px; }
.editor-usage-note .button { margin-top:8px; }
.editor-usage-note summary { font-size:14px; padding:12px 0; }
.modal { padding:24px; border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.modal-layer { background:var(--scrim); }
.modal h2 { font-size:18px; }
.modal > p { font-size:14px; line-height:1.6; margin:8px 0 24px; }
.modal-actions { gap:12px; margin-top:24px; }
.settings-section-heading { margin:0 0 16px; gap:16px; align-items:center; }
.settings-section-heading p { font-size:14px; line-height:1.6; }
.company-card-grid { padding:24px; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.company-card { padding:24px; border-radius:12px; background:var(--surface); }
.company-card header strong { font-size:15px; }
.company-card .button { min-height:40px; font-size:13px; padding:8px 12px; }
.company-card > header { gap:16px; }
.company-card-actions { gap:8px; }
.company-summary, .shared-auth-warning { padding:16px 24px; }
.shared-auth-warning { margin:24px 24px 0; }
.theme-button { width:100%; margin:0 0 12px; justify-content:center; }
.dialing-status { display:grid; gap:4px; padding:12px; margin-top:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.dialing-status strong { color:var(--text-soft); font-size:13px; font-weight:600; }
.dialing-status span { color:var(--muted); font-size:12px; line-height:1.5; }
.dialing-status[data-tone="warning"] strong { color:var(--amber); }
.dialing-status[data-tone="success"] strong { color:var(--green); }
.dialing-status[data-tone="danger"] strong { color:var(--red); }
.settings-navigation { display:flex; gap:4px; flex-wrap:wrap; padding:6px; margin-bottom:24px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.settings-navigation a { padding:10px 14px; border-radius:8px; font-size:14px; color:var(--text-soft); }
.settings-navigation a[aria-current="page"] { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.settings-navigation a:hover { background:var(--surface-3); }
.settings-page > [data-settings-content] > * + * { margin-top:24px; }
.settings-load-state { padding:24px; display:grid; gap:12px; }
.settings-load-state p { color:var(--muted); }
.settings-load-state .button { justify-self:start; }
.settings-runtime-actions { gap:12px; }
.settings-runtime-panel, .settings-health-card, .settings-attention-card { padding:24px; }
.settings-health-card .panel-heading, .settings-attention-card .panel-heading { padding:0 0 24px; }
.settings-technical-panel { margin-top:24px; }
.settings-technical-content { padding:24px; }
.release-publish-form { gap:16px; padding:24px; }
.user-menu-modal .field { margin-top:16px; }
.login-intro { color:var(--muted); }
.login-mark { color:var(--accent); background:var(--accent-soft); }
.login-error { color:var(--red); }
.login-card { padding:32px; border:1px solid var(--line); border-radius:16px; background:var(--surface); width:min(100%,460px); }
.login-brand { margin-bottom:24px; }
.login-card input, .login-submit { min-height:44px; }
.login-theme { margin-top:24px; width:100%; }
.sidebar-bottom [data-theme-toggle] { color:var(--text-soft); min-height:40px; }
/* Cabinet uses its existing scoped UI, with the same appearance tokens. */
body > aside.sidebar + main { color:var(--text); }
body > aside.sidebar + main .card, body > aside.sidebar + main .empty, body > aside.sidebar + main .table-wrap,
body > aside.sidebar + main #notice, body > dialog { background:var(--surface); border-color:var(--line); color:var(--text); }
body > aside.sidebar + main th { background:var(--surface-2); }
body > aside.sidebar + main pre, body > aside.sidebar + main .transcript p { background:var(--surface-2); }
body > aside.sidebar + main .badge { background:var(--surface-3); color:var(--text-soft); }
body > aside.sidebar + main .badge.good { background:var(--green-soft); color:var(--green); }
body > aside.sidebar + main .badge.warn { background:var(--amber-soft); color:var(--amber); }
body > aside.sidebar + main .secret { background:var(--accent-soft); }
body > aside.sidebar .brand { color:var(--text); }
body > aside.sidebar nav button { color:var(--text-soft); }
body > aside.sidebar nav button.active { background:var(--accent-soft); color:var(--accent); }
body > aside.sidebar ~ main button, body > dialog button, body > aside.sidebar button { color:var(--text-soft); background:var(--surface); border-color:var(--line); min-height:40px; }
body > aside.sidebar ~ main button.primary, body > dialog button.primary { color:var(--on-primary); background:var(--primary-bg); border-color:var(--primary-bg); }
body > aside.sidebar ~ main button.danger { color:var(--red); }
body > aside.sidebar ~ main #notice.error, body > dialog #dialog-error { color:var(--red); }
@media (max-width:1000px) {
  .page { padding:24px; }
  .panel-heading-actions { justify-content:flex-start; }
}
@media (max-width:700px) {
  :root { --control-height:44px; --panel-space:16px; }
  .page, .editor-page { padding:24px 16px 104px; }
  h1, .editor-title h1 { font-size:22px; }
  .panel-heading, .campaigns-filters, #campaignFilters, .company-card-grid, .company-card, .editor-usage-note,
  .settings-runtime-panel, .settings-health-card, .settings-attention-card, .release-publish-form { padding:16px; }
  .button.small, .company-card .button { min-height:44px; }
  .panel-heading { flex-wrap:wrap; }
  .company-card-grid { grid-template-columns:1fr; }
  .company-summary { padding:16px; }
  .shared-auth-warning { margin:16px 16px 0; padding:12px; }
  .settings-navigation { flex-wrap:nowrap; overflow-x:auto; gap:4px; margin-bottom:24px; }
  .settings-navigation a { white-space:nowrap; min-height:44px; display:flex; align-items:center; padding:10px 12px; }
  .modal { padding:24px 16px; }
  .modal-actions { gap:8px; }
  .modal-actions .button { flex:1 1 auto; }
  .login-card { padding:24px; }
  .theme-button { margin:0; }
  .data-table th:first-child, .data-table td:first-child { padding-left:16px; }
  .data-table th:last-child, .data-table td:last-child { padding-right:16px; }
}

.sidebar { overflow-y:auto; }
/* VoiceOps: owner supplied headset mark in both navigation rails. */
.brand-mark, .cabinet-shell .sidebar .brand-mark { display:grid; place-items:center; box-sizing:border-box; width:36px; height:36px; background:rgba(139,115,240,.12); color:var(--on-primary); border:1px solid rgba(139,115,240,.30); border-radius:10px; box-shadow:none; }
html[data-theme="light"] .brand-mark, html[data-theme="light"] .cabinet-shell .sidebar .brand-mark { background:rgba(139,115,240,.08); border-color:rgba(139,115,240,.23); }
.brand-mark::before { content:''; width:30px; height:30px; background:url("/brand/mark.svg?v=3") center / contain no-repeat; }

.danger-text { color:var(--red); }
.company-settings-summary { padding:16px 24px; }
.company-settings-summary strong { font-size:14px; }
body > aside.sidebar + main .card { padding:24px; }
@media(min-width:701px) { .side-nav a { font-size:14px; min-height:40px; } }
@media(max-width:700px) {
  .sidebar { overflow:visible; }
  .company-settings-summary { padding:16px; }
  body > aside.sidebar .sidebar-bottom { flex-wrap:wrap; gap:8px; }
}

/* Keep the writing/test workspace proportional rather than viewport-height coupled. */
.studio { gap:24px; }
.identity-fields { padding:24px; gap:16px; margin-bottom:16px; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
.prompt-heading, .test-header { padding:16px 24px; }
#prompt { padding:24px; font-size:13px; line-height:1.65; min-height:360px; height:clamp(360px,calc(100dvh - 360px),620px); background:var(--surface); color:var(--text); }
.test-rail { height:clamp(480px,calc(100dvh - 180px),760px); min-height:480px; max-height:760px; background:var(--surface); box-shadow:none; }
.call-button { min-height:40px; height:40px; border-radius:8px; font-size:14px; background:var(--primary-bg); border-color:var(--primary-bg); color:var(--on-primary); }
.call-button:hover:not(:disabled) { background:var(--primary-hover); }
.call-button.active, .call-button.active:hover:not(:disabled) { background:var(--red-soft); color:var(--red); border-color:var(--red); }
.call-button.preparing, .call-button.ending, .call-button.ended, .call-button.error { background:var(--surface-2); color:var(--text-soft); border-color:var(--line-strong); }
.settings-navigation a[aria-current="page"]:hover { background:var(--accent-soft); }
.company-identifiers { margin:12px 0; }
.company-identifiers summary { color:var(--muted); font-size:12px; cursor:pointer; padding:4px 0; }
.company-identifiers small { display:block; margin-top:8px; overflow-wrap:anywhere; color:var(--faint); }
@media(max-width:700px) {
  .identity-fields { grid-template-columns:1fr; padding:16px; }
  .prompt-heading, .test-header, #prompt { padding:16px; }
  #prompt { min-height:360px; height:420px; }
  .test-rail { height:auto; min-height:0; max-height:none; grid-template-rows:auto auto auto minmax(200px,auto) auto; }
  .test-rail > .test-header { grid-row:1; }
  .test-rail > .test-scope-warning { grid-row:2; }
  .test-rail > .latency-live { grid-row:3; }
  .test-rail > .transcript { grid-row:4; min-height:200px; }
  .test-rail > .test-controls { grid-row:5; }
  .call-button { min-height:44px; }
  body > aside.sidebar ~ main button, body > dialog button, body > aside.sidebar button { min-height:44px; }
}

.editor-usage-note .button { min-height:40px; font-size:14px; }

/* Audit corrections: one inset per panel, concise activity and touch explanations. */
.overview-page .latency-panel, .overview-page .agents-summary, .overview-page .recent-panel { padding:0; }
.overview-page .panel-heading { margin:0; }
.overview-page > .kpi-grid, .overview-page > .recent-panel, .overview-page > .cost-statistics { margin-bottom:24px; }
.overview-page .latency-body, .latency-empty-copy { padding:0 var(--panel-space) var(--panel-space); }
.latency-empty-copy { color:var(--muted); font-size:14px; }
.latency-empty-copy details { margin-top:12px; }
.latency-empty-copy summary { cursor:pointer; color:var(--text-soft); }
.latency-empty-copy details p { margin-top:8px; }
.overview-page .compact-list { padding:0 var(--panel-space) var(--panel-space); }
.overview-page .compact-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
.overview-calls { padding:0 var(--panel-space) 8px; }
.overview-call, .overview-calls-heading { display:grid; grid-template-columns:minmax(160px,1.5fr) minmax(110px,1fr) minmax(150px,1.2fr) 100px 90px; gap:16px; align-items:center; padding:16px 0; border-top:1px solid var(--line); font-size:14px; }
.overview-calls-heading { padding:12px 0; border:0; color:var(--muted); font-size:12px; font-weight:600; }
.overview-call-main { display:grid; min-width:0; gap:4px; color:var(--text); }
.overview-call-main strong { overflow-wrap:anywhere; }
.overview-call-main span, .overview-call-context small { display:block; font-size:12px; color:var(--muted); }
.overview-call-recording { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.overview-call-recording .text-link { min-width:24px; min-height:40px; display:grid; place-items:center; }
.calls-table .date-cell strong { white-space:nowrap; overflow-wrap:normal; }
.calls-table .call-duration-cell strong { overflow-wrap:normal; word-break:normal; }
.calls-table .call-signal, .calls-table .call-signal .badge { overflow-wrap:normal; word-break:normal; }
.call-signal > summary { cursor:pointer; width:fit-content; }
.call-signal > summary { list-style:none; }
.call-signal > summary::-webkit-details-marker { display:none; }
.call-signal[open] > summary .icon { transform:rotate(180deg); }
.call-signal > .call-signal-explanation { display:block; margin-top:8px; line-height:1.55; font-size:12px; color:var(--muted); }
.call-signal > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.settings-section-picker, .mobile-test-jump { display:none; }
#agentDescription { resize:vertical; min-height:64px; }
#liveTestPanel, #prompt { scroll-margin-top:calc(var(--staging-notice-height,0px) + 16px); }
@media(max-width:1100px) and (min-width:701px) {
  .overview-call, .overview-calls-heading { grid-template-columns:minmax(140px,1.5fr) minmax(90px,1fr) minmax(120px,1fr) 80px 80px; gap:12px; }
}
@media(max-width:900px) {
  .overview-calls-heading { display:none; }
  .overview-call { grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; padding:16px 0; }
  .overview-call-main { grid-column:1 / -1; }
  .overview-call-context { grid-column:1; min-width:0; overflow-wrap:anywhere; }
  .overview-call-result { grid-column:1 / -1; }
  .overview-call-duration { grid-column:1; }
  .overview-call-recording { grid-column:2; grid-row:4; gap:16px; }
}
@media(max-width:700px) {
  .settings-navigation { display:block; overflow:visible; padding:0; border:0; background:transparent; }
  .settings-navigation > a { display:none; }
  .settings-section-picker { display:grid; gap:8px; font-size:13px; color:var(--text-soft); }
  .settings-section-picker select { width:100%; }
  .mobile-test-jump { display:inline-flex; }
  .overview-page .compact-kpis { grid-template-columns:1fr; }
}

/* A flex table cell loses native row height and paints its border through actions. */
.voice-clip-table td.voice-clip-actions { display:table-cell; }
.voice-clip-actions > audio, .voice-clip-actions > .clip-no-audio { display:block; margin-bottom:8px; }

.calls-search-footer { display:flex; align-items:center; gap:24px; padding:16px 24px; border-top:1px solid var(--line); }
.calls-search-footer > .calls-search-note { flex:1 1 auto; min-width:0; padding:0; }
.calls-search-footer > .calls-search-actions { flex:0 0 auto; margin-left:auto; }
#callFilters:not(:has(.calls-advanced[open])) .calls-search-footer > #callsPrivacy { display:none; }
@media(max-width:900px) {
  .calls-search-footer { flex-direction:column; align-items:stretch; gap:12px; padding:16px; }
}

/* Numeric/date journal ordering keeps the established compact table header. */
th button.table-sort[data-table-sort] {
  appearance: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; width: auto; max-width: 100%; margin: -6px 0;
  padding: 4px 0; border: 0; border-radius: 4px; background: transparent;
  box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit;
  text-transform: inherit; text-align: inherit; cursor: pointer;
}
th button.table-sort[data-table-sort] svg { flex: 0 0 14px; opacity: .6; }
th[aria-sort="ascending"] button.table-sort[data-table-sort],
th[aria-sort="descending"] button.table-sort[data-table-sort] { color: var(--accent, #6750d4); }
th[aria-sort="ascending"] button.table-sort[data-table-sort] svg,
th[aria-sort="descending"] button.table-sort[data-table-sort] svg { opacity: 1; }
th button.table-sort[data-table-sort]:hover { color: var(--accent, #6750d4); background: transparent; }
th button.table-sort[data-table-sort]:focus-visible { outline: 2px solid var(--accent, #6750d4); outline-offset: 4px; }
th button.table-sort[data-table-sort]:disabled { cursor: progress; opacity: .6; }
@media (pointer: coarse) { th button.table-sort[data-table-sort] { min-height: 44px; margin-block: -8px; } }