/* ── Campaign Manager refactor Phase 2 — Campaigns tab styles ──────────── */
  .cm-layout {
    display:grid; grid-template-columns: 340px 1fr; gap:18px;
    padding:18px; min-height:60vh;
  }
  .cm-toolbar { display:flex; gap:8px; margin-bottom:12px; align-items:center; }
  .cm-toolbar .btn-primary { flex:1; }
  .cm-filter {
    padding:6px 10px; border-radius:6px; background:var(--surface);
    color:var(--text); border:1px solid var(--border); font-size:12px;
  }
  .cm-list { display:flex; flex-direction:column; gap:6px; max-height:70vh; overflow-y:auto; }
  .cm-row {
    text-align:left; padding:10px 12px; border:1px solid var(--border);
    border-radius:8px; background:var(--surface); cursor:pointer;
    color:var(--text); display:flex; flex-direction:column; gap:6px;
  }
  .cm-row:hover { background:var(--surface-elev); }
  .cm-row-selected { border-color:var(--primary-bg); background:var(--surface-elev); }
  .cm-row-top { display:flex; justify-content:space-between; align-items:center; }
  .cm-row-meta { font-size:11px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; }
  .cm-row-vid { font-family:monospace; }

  .cm-pill { padding:2px 8px; border-radius:10px; font-size:10px;
    font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
  .cm-pill-gray  { background:var(--neutral-bg-tint); color:var(--text-label); }
  .cm-pill-amber { background:var(--warning-bg-tint); color:var(--warning); }
  .cm-pill-green { background:var(--success-bg-tint); color:var(--success); }
  .cm-pill-red   { background:var(--danger-bg-tint);  color:var(--danger); }

  .cm-detail { padding:6px 4px; }
  .cm-detail-head { display:flex; justify-content:space-between; align-items:flex-start;
    gap:12px; margin-bottom:14px; }
  .cm-detail-head h2 { font-size:18px; font-weight:700; margin:0; }
  .cm-detail-sub { display:flex; gap:10px; align-items:center; margin-top:6px;
    flex-wrap:wrap; font-size:12px; color:var(--muted); }
  .cm-detail-vid { font-family:monospace; }
  .cm-detail-actions { display:flex; gap:8px; }
  .cm-error-banner { padding:10px 12px; border-radius:6px; margin-bottom:12px;
    background:var(--danger-bg-tint); border:1px solid var(--danger-border);
    font-size:12px; color:var(--danger); }
  .cm-error-banner code { background:var(--bg-overlay); padding:1px 6px;
    border-radius:3px; font-family:monospace; }

  .cm-form { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;
    margin-bottom:18px; }
  .cm-field { display:flex; flex-direction:column; gap:4px; font-size:12px; }
  .cm-field > span { color:var(--label); font-weight:500; }
  .cm-field input, .cm-field select { padding:8px 10px; border-radius:6px;
    background:var(--surface); color:var(--text); border:1px solid var(--border);
    font-size:13px; }
  .cm-field input[readonly] { background:var(--border-subtle); color:var(--muted); }
  .cm-form-actions { grid-column:1 / -1; display:flex; gap:8px; align-items:center; }
  .cm-form-hint { font-size:12px; color:var(--muted); font-style:italic; }

  .cm-leads { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
  .cm-leads h3 { font-size:14px; font-weight:600; margin:0 0 8px; }
  .cm-leads-summary { font-size:13px; color:var(--text); }
  .cm-empty { font-size:13px; color:var(--muted); padding:24px;
    text-align:center; background:var(--surface); border-radius:6px;
    border:1px dashed var(--border); }

  @media (max-width: 920px) {
    .cm-layout { grid-template-columns:1fr; }
    .cm-form { grid-template-columns:1fr; }
  }

  /* "Used by N campaign(s)" indicator on AI Agents table */
  .cm-usage-pill { display:inline-block; padding:2px 8px; border-radius:10px;
    font-size:10px; font-weight:600; background:var(--info-bg-tint);
    color:var(--accent); cursor:pointer; border:none; }
  .cm-usage-pill:hover { background:var(--info-border); }

  /* Call-time window modal (per-day schedule) */
  .cm-field-row { display:flex; gap:8px; align-items:center; }
  .cm-modal-backdrop {
    position:fixed; inset:0; background:var(--bg-overlay); z-index:9999;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .cm-modal {
    background:var(--surface); color:var(--text); border:1px solid var(--border);
    border-radius:10px; padding:20px; width:560px; max-width:100%;
    max-height:90vh; overflow-y:auto; box-shadow:0 18px 40px var(--bg-overlay);
  }
  .cm-modal-head {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:6px;
  }
  .cm-modal-head h3 { margin:0; font-size:16px; font-weight:700; }
  .cm-modal-close {
    background:transparent; border:none; color:var(--muted);
    font-size:22px; line-height:1; cursor:pointer; padding:0 6px;
  }
  .cm-modal-close:hover { color:var(--text); }
  .cm-modal-sub {
    margin:0 0 14px; font-size:12px; color:var(--muted); line-height:1.5;
  }
  .cm-modal-status {
    grid-column:1 / -1; min-height:18px; font-size:12px; color:var(--muted);
  }
  .cm-modal-actions {
    grid-column:1 / -1; display:flex; gap:8px; justify-content:flex-end;
  }
  .cm-ctw-fieldset {
    grid-column:1 / -1; border:1px solid var(--border); border-radius:8px;
    padding:12px 14px; margin:0;
  }
  .cm-ctw-fieldset legend {
    padding:0 6px; font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .cm-ctw-row { display:flex; gap:14px; flex-wrap:wrap; }
  .cm-ctw-row label { display:flex; flex-direction:column; gap:4px;
    font-size:12px; color:var(--label); flex:1; min-width:120px; }
  .cm-ctw-row input[type="time"] {
    padding:6px 10px; border-radius:6px; background:var(--bg);
    color:var(--text); border:1px solid var(--border); font-size:13px;
  }
  .cm-ctw-day-row {
    display:grid; grid-template-columns: 130px 1fr auto; gap:10px;
    align-items:center; padding:6px 0; border-top:1px dashed var(--border);
  }
  .cm-ctw-day-row:first-of-type { border-top:none; }
  .cm-ctw-day-toggle {
    display:flex; gap:8px; align-items:center;
    font-size:12px; color:var(--text); cursor:pointer;
  }
  .cm-ctw-day-times { display:flex; gap:8px; align-items:center;
    font-size:12px; color:var(--muted); }
  .cm-ctw-day-times input[type="time"] {
    padding:5px 8px; border-radius:5px; background:var(--bg);
    color:var(--text); border:1px solid var(--border); font-size:12px;
  }
  .cm-ctw-day-disabled-note {
    font-size:11px; color:var(--muted); font-style:italic;
  }
  .cm-leads-upload {
    margin-top:14px; padding:12px; border:1px dashed var(--border);
    border-radius:8px; display:flex; flex-direction:column; gap:8px;
  }
  .cm-leads-upload .cm-form-actions { margin:0; }

  .cm-stats { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
  .cm-stats h3 { font-size:14px; font-weight:600; margin:0 0 8px; }
  .cm-stats-head { display:flex; align-items:baseline; gap:12px;
    justify-content:space-between; margin-bottom:8px; }
  .cm-stats-head h3 { margin:0; }
  @keyframes cm-spin-kf { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
  .cm-spin { display:inline-block; animation:cm-spin-kf 0.8s linear infinite; }
  .cm-stats-grid { display:grid; grid-template-columns:1fr 2fr; gap:14px; }
  .cm-stats-label { font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
  .cm-stats-body { font-size:13px; }
  .cm-stats-list { list-style:none; padding:0; margin:0; }
  .cm-stats-list li {
    display:flex; justify-content:space-between; padding:4px 8px;
    border-bottom:1px dashed var(--border);
  }
  .cm-stats-key { color:var(--text); }
  .cm-stats-val { font-family:monospace; color:var(--muted); }
  .cm-stats-table { width:100%; border-collapse:collapse; font-size:12px; }
  .cm-stats-table th, .cm-stats-table td {
    padding:5px 6px; text-align:left; border-bottom:1px solid var(--border);
  }
  .cm-stats-table th { color:var(--muted); font-weight:600; font-size:10px;
    text-transform:uppercase; letter-spacing:0.05em; }
  @media (max-width: 920px) {
    .cm-stats-grid { grid-template-columns:1fr; }
  }

  /* Vicidial lead_id chip — the dialler's primary key, surfaced in the
     campaign Leads grid so rows that share a phone are distinguishable. */
  .cm-vici-lead-id {
    font-family:monospace; font-size:11px;
    padding:1px 6px; border-radius:6px;
    background:var(--warning-bg-tint); color:var(--warning);
    border:1px solid var(--warning-border);
  }

  /* Sortable header on the leads grid. The active column is colored
     and bolded so the ▲/▼ indicator isn't the only visual cue. */
  .cm-th-sortable:hover { color:var(--text); }
  .cm-th-sort-active    { color:var(--text); font-weight:700; }

  /* Filter-bar inputs + buttons (cm-input-sm / cm-btn-sm). These also
     style the existing leads pagination buttons that were already using
     cm-btn-sm without a defined class. */
  .cm-input-sm {
    background:var(--bg); color:var(--text);
    border:1px solid var(--border); border-radius:6px;
    padding:4px 8px; font-size:12px; line-height:1.4;
  }
  .cm-input-sm:focus {
    outline:none; border-color:var(--accent);
  }
  .cm-btn-sm {
    background:var(--bg); color:var(--text);
    border:1px solid var(--border); border-radius:6px;
    padding:4px 10px; font-size:12px; cursor:pointer;
  }
  .cm-btn-sm:hover:not(:disabled) { background:var(--border-subtle); }
  .cm-btn-sm:disabled { opacity:0.5; cursor:not-allowed; }

  /* Recent calls source badge (AI vs Vicidial-only). */
  .cm-src-badge {
    display:inline-block; font-size:10px; font-weight:600;
    padding:2px 6px; border-radius:8px; letter-spacing:0.02em;
  }
  .cm-src-ai   { background:var(--info-bg-tint); color:var(--accent); }
  .cm-src-vici { background:var(--warning-bg-tint); color:var(--warning); }

  /* CSV column-mapping modal — pseudo-table laid out as a 4-col grid. */
  .cm-colmap-table {
    display:flex; flex-direction:column; gap:6px; margin:8px 0 12px;
  }
  .cm-colmap-row {
    display:grid; grid-template-columns:1fr 1fr 1.2fr 1.2fr;
    gap:8px; align-items:center; font-size:12px;
  }
  .cm-colmap-head-row {
    font-size:10px; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--muted); padding-bottom:4px;
    border-bottom:1px solid var(--border);
  }
  .cm-colmap-row code {
    font-family:monospace; color:var(--text); font-size:12px;
    word-break:break-all;
  }
  .cm-colmap-sample {
    font-family:monospace; color:var(--muted); font-size:11px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .cm-colmap-row select, .cm-colmap-row input[type="text"] {
    padding:6px 8px; border-radius:6px; background:var(--bg);
    border:1px solid var(--border); color:var(--text);
    font-size:12px; font-family:inherit; width:100%; box-sizing:border-box;
  }
  .cm-colmap-row input[type="text"]:disabled {
    opacity:0.4; cursor:not-allowed;
  }
  /* Fix F: badge for headers that match a metadata field already on the
     campaign. Same accent-tinted treatment as the dup-name badge but
     scoped to the mapping modal's column rows. */
  .cm-colmap-match-tag {
    display:inline-block; margin-top:4px;
    font-size:10px; font-weight:600;
    color:var(--accent); background:var(--info-bg-tint);
    border:1px solid var(--info-border);
    padding:1px 6px; border-radius:8px;
    letter-spacing:0.02em;
  }

  /* Fix E — generic single-field searchable combobox. Replaces the
     old two-field country picker (.cm-country-picker-wrap / -search /
     .cm-country-picker). Reusable across the dashboard. */
  .lk-combo {
    position:relative; width:100%; box-sizing:border-box;
  }
  .lk-combo-trigger {
    width:100%; box-sizing:border-box;
    padding:8px 30px 8px 10px;       /* right padding for the chevron */
    border-radius:6px; background:var(--surface);
    color:var(--text); border:1px solid var(--border);
    font-size:13px; font-family:inherit; cursor:pointer;
    transition:border-color 0.15s, background 0.15s;
  }
  .lk-combo-trigger:hover { border-color:var(--accent); }
  .lk-combo-trigger:focus, .lk-combo-trigger[aria-expanded="true"] {
    outline:none; border-color:var(--accent);
    background:var(--info-bg-tint);
  }
  .lk-combo-chev {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    pointer-events:none; color:var(--muted); font-size:11px;
  }
  .lk-combo-pop {
    position:absolute; top:calc(100% + 4px); left:0; right:0;
    z-index:9999;
    background:var(--bg-raised);
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 12px 36px var(--bg-overlay);
    overflow:hidden;
  }
  .lk-combo-search {
    width:100%; box-sizing:border-box;
    padding:8px 10px; border:0; border-bottom:1px solid var(--border);
    background:var(--bg); color:var(--text);
    font-size:12px; font-family:inherit;
  }
  .lk-combo-search:focus { outline:none; background:var(--info-bg-tint); }
  .lk-combo-list {
    list-style:none; margin:0; padding:4px 0;
    max-height:260px; overflow-y:auto;
  }
  .lk-combo-opt {
    padding:6px 12px; font-size:12px; cursor:pointer;
    color:var(--text);
  }
  .lk-combo-opt:hover,
  .lk-combo-opt.lk-combo-opt-active {
    background:var(--info-bg-tint);
    color:var(--text-inverted);
  }
  .lk-combo-opt[aria-selected="true"] {
    font-weight:700;
  }
  .lk-combo-opt[aria-selected="true"]::after {
    content:' ✓'; color:var(--accent); float:right;
  }
  .lk-combo-empty {
    padding:8px 12px; color:var(--muted); font-size:11px; text-align:center;
  }
  /* Optgroup header inside the combobox list. Non-clickable; styled as a
     sticky-looking section divider with uppercase tracking like the rest
     of the dashboard's section labels. */
  .lk-combo-group {
    padding:6px 12px 2px; color:var(--muted);
    font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.08em;
    cursor:default; user-select:none;
    background:var(--border-subtle);
    border-top:1px solid var(--border);
  }
  .lk-combo-group:first-child { border-top:0; }
  .lk-combo-group-blank { padding:2px 0; }
  .lk-combo-placeholder {
    padding:8px 10px; border-radius:6px;
    background:var(--border-subtle);
    border:1px solid var(--border);
    color:var(--muted); font-size:12px;
  }

  /* ── Refined Rail view ─────────────────────────────────────────────────
     Visual refresh aligning the campaign detail with the V1 mockup:
     left-rail search + status chips, tabbed detail header, KPI grid,
     dispositions panel, in-flight preview, and config strip. All new
     classes are prefixed cm-ov- (overview), cm-tab-, cm-kpi-, cm-disp-,
     and cm-cfg- so they don't clash with the existing form/stats classes
     that remain in use under the Settings / Leads tabs. */

  /* Left-rail search box (between New Campaign button and status chips). */
  .cm-search-wrap {
    position:relative; margin-bottom:8px;
  }
  .cm-search-wrap::before {
    content:'⌕'; position:absolute; left:9px; top:50%;
    transform:translateY(-50%); color:var(--muted); font-size:14px;
    pointer-events:none;
  }
  .cm-search {
    width:100%; box-sizing:border-box; padding:8px 10px 8px 28px;
    border-radius:8px; background:var(--surface); color:var(--text);
    border:1px solid var(--border); font-size:12px;
  }
  .cm-search:focus { outline:none; border-color:var(--primary-bg);
    background:var(--surface-elev); }

  /* Status-chip row replaces the old dropdown filter. */
  .cm-chips { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
  .cm-chip {
    padding:4px 10px; border-radius:999px; font-size:11px;
    font-weight:600; background:var(--surface); color:var(--muted);
    border:1px solid var(--border); cursor:pointer; line-height:1;
    display:inline-flex; gap:6px; align-items:center;
  }
  .cm-chip:hover { background:var(--surface-elev); color:var(--text); }
  .cm-chip.cm-chip-active {
    background:var(--info-bg-tint); color:var(--accent);
    border-color:var(--info-border);
  }
  .cm-chip-count {
    font-size:10px; padding:1px 5px; border-radius:6px;
    background:var(--border-subtle); color:var(--muted);
  }
  .cm-chip.cm-chip-active .cm-chip-count {
    background:var(--info-border); color:var(--text-inverted);
  }

  /* List row — LIVE dot on the running rows, plus a small numeric badge
     showing leads-so-far/total when present. */
  .cm-row-live-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--success); display:inline-block; margin-right:6px;
    box-shadow:0 0 0 0 var(--success-border);
    animation:cm-pulse 1.6s ease-out infinite;
  }
  @keyframes cm-pulse {
    0%   { box-shadow:0 0 0 0   var(--success-border); }
    70%  { box-shadow:0 0 0 6px transparent;            }
    100% { box-shadow:0 0 0 0   transparent;            }
  }
  .cm-row-stats {
    display:flex; gap:10px; font-size:11px; color:var(--muted);
    font-family:monospace;
  }
  .cm-row-stats strong { color:var(--text); font-weight:600; }

  /* Per-row progress bar: called / lead_count. Sits below the meta line. */
  .cm-row-progress {
    display:grid; grid-template-columns:1fr auto; gap:8px;
    align-items:center; margin-top:6px;
  }
  .cm-row-progress-bar {
    height:5px; border-radius:3px; overflow:hidden;
    background:var(--border-subtle);
  }
  .cm-row-progress-fill {
    display:block; height:100%; border-radius:3px;
    transition:width 0.3s;
  }
  .cm-row-progress-fill-live {
    background:linear-gradient(90deg,var(--success),var(--success-border));
  }
  .cm-row-progress-fill-idle {
    background:linear-gradient(90deg,var(--accent-bg),var(--accent-hover));
  }
  .cm-row-progress-text {
    font-size:11px; font-family:monospace; color:var(--muted);
    line-height:1; white-space:nowrap;
  }
  .cm-row-progress-sep { color:var(--text-muted); margin:0 1px; }
  .cm-row-progress-empty .cm-row-progress-text {
    font-style:italic; opacity:0.7;
  }

  /* ── Refined detail header ─────────────────────────────────────────── */
  .cm-detail-head { gap:18px; align-items:center; margin-bottom:10px; }
  .cm-detail-title {
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  }
  .cm-detail-title h2 { font-size:22px; }
  .cm-livedot {
    width:8px; height:8px; border-radius:50%; background:var(--success);
    box-shadow:0 0 8px var(--success);
    animation:cm-pulse 1.6s ease-out infinite;
  }
  .cm-detail-sub { gap:14px; font-size:12px; }
  .cm-detail-sub > span { display:inline-flex; gap:4px; align-items:center; }
  .cm-detail-sub b { color:var(--text); font-weight:600; }
  .cm-detail-actions .btn-primary,
  .cm-detail-actions .btn-danger,
  .cm-detail-actions .btn-secondary {
    font-size:13px; padding:7px 14px;
  }

  /* ── Tab bar (Overview / Live Calls / Leads / Call History / Settings) */
  .cm-tabs {
    display:flex; gap:0; margin:14px 0 18px; border-bottom:1px solid var(--border);
  }
  .cm-tab {
    background:transparent; border:0; border-bottom:2px solid transparent;
    color:var(--muted); padding:9px 16px; font-size:13px; font-weight:500;
    cursor:pointer; transition:color 0.15s, border-color 0.15s;
    display:inline-flex; gap:8px; align-items:center;
  }
  .cm-tab:hover { color:var(--text); }
  .cm-tab.cm-tab-active {
    color:var(--text); border-bottom-color:var(--primary-bg);
    font-weight:600;
  }
  .cm-tab-badge {
    font-size:11px; padding:1px 7px; border-radius:8px;
    background:var(--info-bg-tint); color:var(--accent);
  }

  /* ── KPI grid ──────────────────────────────────────────────────────── */
  .cm-kpi-grid {
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px; margin-bottom:18px;
  }
  .cm-kpi {
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px;
    display:flex; flex-direction:column; gap:4px;
    min-width:0;
  }
  .cm-kpi-label {
    font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .cm-kpi-value {
    font-size:24px; font-weight:700; color:var(--text);
    line-height:1.1; font-variant-numeric:tabular-nums;
  }
  .cm-kpi-sub {
    font-size:11px; color:var(--muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .cm-kpi-sub.cm-kpi-good { color:var(--success); }
  .cm-kpi-sub.cm-kpi-warn { color:var(--warning); }
  .cm-kpi-sub.cm-kpi-bad  { color:var(--danger); }

  /* Wide KPI (e.g. "Calls today" with hourly preview). */
  .cm-kpi-wide { grid-column:span 2; }

  @media (max-width:1200px) {
    .cm-kpi-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .cm-kpi-wide { grid-column:span 2; }
  }

  /* ── Charts row (hourly bar chart + dispositions donut) ────────────── */
  .cm-charts-row {
    display:grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
    gap:14px; margin-bottom:18px;
  }
  @media (max-width:1100px) {
    .cm-charts-row { grid-template-columns:1fr; }
  }
  .cm-chart-panel {
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px;
    display:flex; flex-direction:column; gap:10px; min-width:0;
  }
  .cm-chart-head {
    display:flex; justify-content:space-between; align-items:baseline;
  }
  .cm-chart-head h3 { margin:0; font-size:14px; font-weight:600; }
  .cm-chart-sub { font-size:11px; color:var(--muted); }

  /* Hourly volume — left-side three-stat header strip + chart below. */
  .cm-hourly-summary {
    display:flex; gap:24px; padding:6px 0 10px;
    border-bottom:1px solid var(--border-subtle);
  }
  .cm-hourly-stat { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .cm-hourly-stat-value {
    font-size:22px; font-weight:700; line-height:1.1;
    font-variant-numeric:tabular-nums;
  }
  .cm-hourly-stat-accent { color:var(--success); }
  .cm-hourly-stat-label { font-size:11px; color:var(--muted); }
  .cm-hourly-chart { width:100%; min-height:140px; color:var(--text); }
  .cm-hourly-chart svg { display:block; }

  /* Dispositions — donut + colour-coded list side by side. */
  .cm-disp-layout {
    display:grid; grid-template-columns: 150px 1fr; gap:14px;
    align-items:center;
  }
  @media (max-width:760px) {
    .cm-disp-layout { grid-template-columns:1fr; justify-items:center; }
  }
  .cm-disp-donut {
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
  }
  .cm-disp-donut svg { width:140px; height:140px; }
  .cm-disp-list {
    display:flex; flex-direction:column; gap:4px;
  }
  .cm-disp-row {
    display:grid; grid-template-columns:1fr 100px auto; gap:10px;
    align-items:center; padding:3px 0;
  }
  .cm-disp-key {
    font-size:12px; color:var(--text); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
  }
  .cm-disp-bar {
    height:6px; border-radius:3px;
    background:var(--border-subtle); overflow:hidden;
  }
  .cm-disp-bar-fill {
    display:block; height:100%; border-radius:3px;
    background:var(--accent-bg); transition:width 0.3s;
  }
  /* Disposition category colour palette — mirrors the mockup legend. */
  .cm-disp-cat-sale          { background:var(--disp-completed); }
  .cm-disp-cat-transfer      { background:var(--disp-transferred); }
  .cm-disp-cat-interest      { background:var(--disp-voicemail); }
  .cm-disp-cat-notinterested { background:var(--disp-silence); }
  .cm-disp-cat-noanswer      { background:var(--neutral); }
  .cm-disp-cat-amd           { background:var(--disp-unknown); }
  .cm-disp-cat-busy          { background:var(--disp-max-duration); }
  .cm-disp-cat-fail          { background:var(--disp-failed); }
  .cm-disp-cat-other         { background:var(--accent-bg); }
  .cm-disp-val {
    font-family:monospace; font-size:12px; color:var(--muted);
    min-width:32px; text-align:right;
  }

  /* ── In-flight calls preview ───────────────────────────────────────── */
  .cm-inflight {
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px; margin-bottom:18px;
  }
  .cm-inflight-head {
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:8px;
  }
  .cm-inflight-head h3 { margin:0; font-size:14px; font-weight:600; }
  .cm-inflight-link {
    background:transparent; border:0; color:var(--accent); cursor:pointer;
    font-size:12px; font-weight:500;
  }
  .cm-inflight-link:hover { color:var(--accent-hover); text-decoration:underline; }
  .cm-inflight-empty {
    font-size:13px; color:var(--muted); padding:18px;
    text-align:center; border-radius:6px;
    border:1px dashed var(--border);
  }
  /* Compact rows for the wired-up in-flight list (Issue E). */
  .cm-inflight-list {
    display:flex; flex-direction:column; gap:6px;
  }
  .cm-inflight .cm-inflight-row {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:6px;
    background:var(--bg); border:1px solid var(--border);
    font-size:12px;
  }
  .cm-inflight-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%;
    background:var(--border-subtle); font-size:13px; flex:0 0 auto;
  }
  .cm-inflight-name { flex:1 1 auto; color:var(--text); min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cm-inflight-dur  { color:var(--muted); font-family:monospace; font-size:11px; }
  .cm-inflight-more {
    background:transparent; border:0; color:var(--accent); cursor:pointer;
    font-size:12px; padding:6px 4px; text-align:left;
  }
  .cm-inflight-more:hover { color:var(--accent-hover); text-decoration:underline; }

  /* ── Per-Campaign Live Calls tab ───────────────────────────────────── */
  .cm-livecalls {
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px;
  }
  .cm-livecalls-head {
    display:flex; align-items:center; gap:12px; margin-bottom:12px;
    flex-wrap:wrap;
  }
  .cm-livecalls-head h3 { margin:0; font-size:14px; font-weight:600; flex:0 0 auto; }
  .cm-livecalls-meta { font-size:12px; color:var(--muted); flex:0 0 auto; }
  .cm-livecalls-meta .cm-mono { color:var(--text); }
  .cm-livecalls-status {
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:var(--muted); margin-left:auto;
  }
  .cm-livecalls-dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--muted); display:inline-block;
  }
  .cm-livecalls-dot.green { background:var(--success); box-shadow:0 0 6px var(--success); }
  .cm-livecalls-dot.red   { background:var(--danger); box-shadow:0 0 6px var(--danger); }
  .cm-livecalls-grid {
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 380px);
    gap:16px; align-items:start;
  }
  @media (max-width:920px) {
    .cm-livecalls-grid { grid-template-columns:1fr; }
  }
  .cm-livecalls-list {
    display:flex; flex-direction:column; gap:8px;
    max-height:560px; overflow-y:auto;
  }
  .cm-livecalls-detail {
    background:var(--bg); border:1px solid var(--border);
    border-radius:8px; padding:14px; min-height:280px;
  }
  .cm-livecalls-phone { font-size:11px; color:var(--muted); }
  .cm-empty-inline { padding:8px 0; text-align:left; }

  /* ── Config strip (List / Caller ID / Prefix / Window + Edit btn) ──── */
  .cm-cfg {
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px;
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) auto;
    gap:14px; align-items:center;
  }
  .cm-cfg-item { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .cm-cfg-label {
    font-size:10px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .cm-cfg-value {
    font-size:13px; color:var(--text); font-family:monospace;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  @media (max-width:920px) {
    .cm-cfg { grid-template-columns:repeat(2, minmax(0,1fr)); }
  }

  /* ── Call History tab — campaign-scoped /call-logs view ───────────── */
  .cm-history { display:flex; flex-direction:column; gap:14px; }
  .cm-history-toolbar {
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  }
  .cm-history-badge {
    font-size:11px; padding:2px 10px; border-radius:10px;
    background:var(--bg); color:var(--muted);
  }
  .cm-history-input {
    padding:6px 10px; border-radius:6px;
    background:var(--surface); color:var(--text);
    border:1px solid var(--border); font-size:12px;
  }
  .cm-history-search { width:220px; }
  .cm-history-sep { color:var(--muted); font-size:12px; }

  .cm-history-layout {
    display:grid; grid-template-columns:1fr; gap:14px;
    align-items:start;
  }
  .cm-history-layout:has(.cm-history-detail:not([style*="display:none"])) {
    grid-template-columns: 1fr 380px;
  }
  /* :has() fallback for browsers that don't support it — when the detail
     panel is visible, the .cm-history-detail is rendered alongside the
     table. The browsers we ship to (modern Chrome / Edge / Firefox 121+)
     all support :has(). */

  .cm-history-table-wrap {
    overflow-x:auto; background:var(--surface);
    border:1px solid var(--border); border-radius:10px;
    padding:6px 0 10px;
  }
  .cm-history-table {
    width:100%; border-collapse:collapse; font-size:12px;
  }
  .cm-history-table th {
    text-align:left; padding:9px 12px; color:var(--muted);
    font-size:10px; text-transform:uppercase; letter-spacing:0.05em;
    white-space:nowrap; border-bottom:1px solid var(--border);
  }
  .cm-history-row {
    cursor:pointer; transition:background 0.1s;
  }
  .cm-history-row:hover { background:var(--border-subtle); }
  /* Disabled leads grid row — present but unclickable (no AI call yet). */
  .cm-history-row-disabled { cursor:default; opacity:0.85; }
  .cm-history-row-disabled:hover { background:transparent; }
  .cm-history-row td {
    padding:9px 12px; border-bottom:1px solid var(--border-subtle);
    color:var(--text); vertical-align:middle;
  }
  .cm-history-id { color:var(--muted); font-size:11px; font-family:monospace; }
  .cm-history-center { text-align:center; }
  .cm-history-date {
    color:var(--muted); font-size:11px; white-space:nowrap;
  }
  .cm-history-empty {
    text-align:center; padding:40px 12px; color:var(--muted);
  }
  .cm-history-error { color:var(--danger); }

  .cm-history-pill {
    display:inline-block; font-size:10px; font-weight:600;
    padding:2px 8px; border-radius:10px; letter-spacing:0.02em;
  }
  .cm-sent-pos { background:var(--success-bg-tint); color:var(--success); }
  .cm-sent-neg { background:var(--danger-bg-tint);  color:var(--danger); }
  .cm-sent-neu { background:var(--warning-bg-tint); color:var(--warning); }
  .cm-history-ok   { color:var(--success); font-weight:700; }
  .cm-history-fail { color:var(--danger);  font-weight:700; }
  .cm-history-dim  { color:var(--muted); }

  .cm-history-pager {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px 0; font-size:12px;
  }
  .cm-history-info { color:var(--muted); }
  .cm-history-pager button {
    font-size:12px; padding:4px 14px; margin-left:4px;
  }

  /* Detail side panel */
  .cm-history-detail {
    background:var(--surface); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px;
    max-height:70vh; overflow-y:auto;
    position:sticky; top:12px;
  }
  .cm-history-detail-head {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:10px; font-size:13px; font-weight:600;
  }
  .cm-history-detail-close {
    background:transparent; border:0; color:var(--muted);
    font-size:20px; line-height:1; cursor:pointer; padding:0 4px;
  }
  .cm-history-detail-close:hover { color:var(--text); }
  .cm-history-field {
    padding:6px 0; border-bottom:1px solid var(--border-subtle);
  }
  .cm-history-field-label {
    font-size:10px; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--muted);
  }
  .cm-history-field-value {
    font-size:13px; margin-top:2px;
  }
  .cm-history-section-label {
    margin:12px 0 4px; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
  }
  .cm-history-transcript {
    background:var(--bg); border:1px solid var(--border);
    border-radius:6px; padding:10px;
    font-size:11px; line-height:1.7; max-height:260px; overflow-y:auto;
    white-space:pre-wrap;
  }
  /* Force the auth-loaded audio player to fill the detail panel width
     and stay visible. Older versions sometimes rendered as 0px tall on
     Chrome until metadata loaded — explicit min-height avoids that. */
  .cm-history-detail audio {
    display:block; width:100%; min-height:36px; margin-top:4px;
  }
  .cm-history-agent { font-weight:700; color:var(--accent); }
  .cm-history-user  { font-weight:700; }
  .cm-history-loading { padding:16px; text-align:center; color:var(--muted); }

  @media (max-width:1100px) {
    .cm-history-layout:has(.cm-history-detail:not([style*="display:none"])) {
      grid-template-columns:1fr;
    }
  }

  /* AI Agent edit view — referencing-Campaigns list */
  .aev-campaigns-empty { font-size:12px; color:var(--muted);
    padding:8px 4px; }
  .aev-campaigns-list { list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:6px; }
  .aev-campaign-link {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 10px; width:100%; background:var(--surface);
    border:1px solid var(--border); border-radius:6px;
    color:var(--text); font-size:12px; cursor:pointer;
  }
  .aev-campaign-link:hover { background:var(--surface-elev); }
  .aev-campaign-meta { color:var(--muted); font-size:11px; }