/* Call & Voicemail Hub dashboard. Scoped design tokens; dark-mode via app vars. */

/* ── Height chain (all viewports), scoped to CallHub only ──────────
   The list used to be capped with a hardcoded `max-height: calc(100vh - 360px)`
   (a guess at the chrome above it) — whenever real chrome != 360px (metric strip
   wrap, a short window, a collapsed sidebar) the list came up short, stranding
   rows behind empty space. The real fix is a definite-height flex chain from
   .app-main down to .ch-list, same proven pattern as .ia-main's fix in
   css/intake-assist-chat.css — every ancestor here is normally `height:auto`
   (.app-main only has `min-height:100dvh`, not definite for %), so a naive
   `height:100%` on #callHubTool would resolve to `auto` and do nothing.
   :has() keeps this scoped to CallHub so it can't affect any other tool's
   layout/scroll (see the intake-assist-chat.css comment for the incident that
   motivated scoping: an unscoped #pluginViewport overflow:hidden broke
   intake-v2's sticky rails). */
.app-shell:has(#callHubTool.active) .app-main {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    /* Strip the mobile-nav clearance padding the bare `main { padding: 16px;
       padding-bottom: calc(120px + safe-area) }` element rule (css/layout.css)
       applies to EVERY <main> at every width. Without this, that 120px of
       bottom padding (+ 16px top) eats into the 100dvh height above — the
       two-pane region computes correctly but stops ~136px short of the window
       bottom, leaving dead space below it. Same `padding: 0 !important` the
       intake-assist height chain uses for the identical reason. CallHub manages
       its own scroll (below), so it needs no bottom-nav clearance on desktop;
       the narrow/stacked revert re-adds natural page scroll + clearance. */
    padding: 0 !important;
}
.app-shell:has(#callHubTool.active) .app-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.app-shell:has(#callHubTool.active) #pluginViewport.plugin-viewport.active {
    display: flex !important; /* sidebar.css loads after us and keeps winning */
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}
#callHubTool.plugin-container.active {
    /* !important: App.navigateTo() (js/app-navigation.js) sets an inline
       style="display:block" on every plugin container when activating it —
       inline styles beat any non-!important external rule regardless of
       selector specificity, so without this the whole height chain above
       computes correctly but never applies (#callHubTool silently stays
       display:block, .ch-container/.ch-list grow to fit ALL content instead
       of being clipped to a scrollable region — the list looks fine but
       can't scroll to reveal rows past the fold). */
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

#callHubTool {
    /* Query container so the panel adapts to its OWN width, not the viewport —
       essential when embedded next to a sidebar or in a split-screen pane. */
    container-type: inline-size;
    container-name: chhub;
    /* Never let the panel itself produce a horizontal scrollbar. */
    max-width: 100%; overflow-x: clip;
    /* Spacing/radius/type scale — aliases the shared :root scale (css/variables.css)
       promoted from this file, the most mature scale in the app. Values are
       unchanged; only the source of truth moved, so nothing here visually shifts. */
    --ch-s1: var(--space-1); --ch-s2: var(--space-2); --ch-s3: var(--space-3); --ch-s4: var(--space-4); --ch-s6: var(--space-6);
    --ch-radius: var(--radius); --ch-radius-sm: var(--radius-sm); --ch-radius-pill: var(--radius-pill);
    --ch-fs-title: var(--fs-title); --ch-fs-body: var(--fs-body); --ch-fs-sm: var(--fs-sm); --ch-fs-meta: var(--fs-meta); --ch-fs-label: var(--fs-label);
    /* Accent keeps exactly 2 jobs: the primary button + the focus ring. Active/
       selected states use the calmer --ch-selected; hover affordances use the
       neutral --ch-hover. Status colors (amber/red/blue/green) stay semantic
       and untouched. */
    --ch-accent: var(--success, #32d74b);
    --ch-accent-ink: #08130b; /* readable text on the bright accent */
    --ch-selected: var(--apple-blue);
    --ch-hover: var(--border-strong);
    --ch-card-pad: var(--ch-s4);
}

/* Standardized section label — ALL-CAPS tracked, used for every card header. */
.ch-card h4 {
    margin: 0; font-size: var(--ch-fs-label); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-secondary);
}

/* Shared focus ring for keyboard accessibility (WCAG). */
#callHubTool button:focus-visible,
#callHubTool input:focus-visible,
#callHubTool select:focus-visible,
#callHubTool a:focus-visible,
#callHubTool summary:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; border-radius: var(--ch-radius-sm); }

/* ── Header ───────────────────────────────────────────────────── */
.ch-header { flex: 0 0 auto; padding: var(--ch-s4) var(--ch-s6) 0; }
.ch-titlebar { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-s3); flex-wrap: wrap; }
.ch-title-group { display: flex; align-items: baseline; gap: var(--ch-s3); min-width: 0; flex: 1 1 auto; }
/* Title stays on one line and truncates with ellipsis rather than wrapping. */
.ch-title { margin: 0; font-size: var(--ch-fs-title); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* One tidy action cluster — uniform icon buttons */
.ch-actions { display: inline-flex; align-items: center; gap: var(--ch-s2); flex-shrink: 0; }
.ch-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; cursor: pointer;
    background: var(--bg-input); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: var(--ch-radius-sm);
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ch-iconbtn:hover { color: var(--text); border-color: var(--ch-hover); }
.ch-iconbtn[aria-pressed="true"] { color: #fff; background: var(--ch-selected); border-color: var(--ch-selected); }

.ch-heartbeat { font-size: var(--ch-fs-meta); color: var(--text-secondary); white-space: nowrap; }
.ch-heartbeat[data-state="ok"] { color: var(--success, #32d74b); }
.ch-heartbeat[data-state="stale"] { color: var(--warning, #ff9f0a); }
.ch-heartbeat[data-state="none"] { color: var(--text-secondary); }

/* ── Metric strip — compact "at a glance", not four big buttons ──── */
.ch-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ch-s2); margin: var(--ch-s3) 0 0; }
.ch-tile {
    min-width: 0;
    display: flex; flex-direction: row; align-items: baseline; gap: var(--ch-s2); text-align: left;
    padding: var(--ch-s2) var(--ch-s3); cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--ch-radius-sm);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ch-tile:hover { border-color: var(--ch-hover); }
.ch-tile.is-active { border-color: var(--ch-selected); box-shadow: inset 0 0 0 1px var(--ch-selected); }
.ch-tile-count { font-size: 22px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ch-tile-label { font-size: var(--ch-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); line-height: 1.2; overflow-wrap: anywhere; }
/* Needs-review keeps a semantic amber number so it reads as the triage priority. */
.ch-tile-review .ch-tile-count { color: var(--warning, #ff9f0a); }

/* ── Toolbar — one calm row: search (grows) + Mine ───────────────── */
.ch-toolbar {
    display: flex; align-items: center; gap: var(--ch-s3);
    flex-wrap: wrap; padding: var(--ch-s3) 0 0;
}
.ch-check { display: inline-flex; align-items: center; gap: var(--ch-s2); font-size: var(--ch-fs-sm); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; }
.ch-check input { accent-color: var(--ch-selected); }

/* ── List-scoped status filter (sits at the top of the list rail) ── */
.ch-list-head { display: flex; flex-direction: column; gap: var(--ch-s1); margin-bottom: var(--ch-s2); }
/* Status chips: one tidy line that scrolls horizontally instead of wrapping
   into a tall block — most-used filters (All / Needs review) lead on the left. */
.ch-chips {
    display: flex; gap: var(--ch-s2); flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 2px; scroll-snap-type: x proximity;
}
.ch-chips::-webkit-scrollbar { display: none; }
.ch-chip {
    padding: 5px var(--ch-s3); border-radius: var(--ch-radius-pill);
    font-size: var(--ch-fs-meta); font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0;
    background: transparent; color: var(--text-secondary); border: 1px solid var(--border);
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ch-chip:hover { border-color: var(--ch-hover); color: var(--text); }
.ch-chip.is-active { background: var(--ch-selected); border-color: var(--ch-selected); color: #fff; font-weight: 600; }

/* Search grows to fill, shrinks freely — never a hard min that overflows.
   Basis 320px keeps the full "Search caller, number, topic…" placeholder
   visible at rest (the toolbar wraps, so narrow widths still degrade fine). */
.ch-search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 0; max-width: 100%; }
.ch-search-icon { position: absolute; left: 10px; color: var(--text-secondary); pointer-events: none; }
.ch-search {
    background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--ch-radius-sm); padding: 7px 10px 7px 30px; font-size: var(--ch-fs-sm);
    width: 100%; min-width: 0; box-sizing: border-box;
}
.ch-search:hover { border-color: var(--ch-hover); }

.ch-status-msg { font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-status-msg[data-error="1"] { color: var(--danger, #ff453a); }
.ch-hint { font-weight: 400; font-size: var(--ch-fs-label); color: var(--text-secondary); }
.ch-muted { color: var(--text-secondary); }

/* ── Shared button + select components ─────────────────────────── */
.ch-btn {
    background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--ch-radius-sm); padding: 7px var(--ch-s3); font-size: var(--ch-fs-sm); cursor: pointer;
    transition: border-color .12s ease;
}
.ch-btn:hover { border-color: var(--ch-hover); }
.ch-btn-primary { background: var(--ch-accent); color: var(--ch-accent-ink); border-color: var(--ch-accent); font-weight: 600; }
.ch-select {
    background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--ch-radius-sm); padding: 7px var(--ch-s2); font-size: var(--ch-fs-sm); font-family: inherit;
}
.ch-select:hover { border-color: var(--ch-hover); }
/* Real <select>s get a custom chevron instead of the raw native arrow.
   Scoped to select.ch-select ONLY — the class is reused as the input style on
   text fields/textareas (edit + settings forms), which must never get a
   chevron or appearance:none. The stroke is a mid-gray literal (#8e8e93):
   data URIs can't read CSS vars, and it stays legible on --bg-input in both
   dark (default) and light mode. */
select.ch-select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding: 7px 30px 7px var(--ch-s3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.ch-btn.is-active { border-color: var(--ch-selected); color: #fff; background: var(--ch-selected); font-weight: 600; }
/* Destructive button: quiet until hovered/armed, never shouty at rest. */
.ch-btn-danger { color: var(--danger, #ff453a); }
.ch-btn-danger:hover { border-color: var(--danger, #ff453a); }
.ch-btn-danger.is-armed { background: var(--danger, #ff453a); color: #fff; border-color: var(--danger, #ff453a); font-weight: 600; }
/* Borderless ghost button for in-card affordances (toggles, dismiss icons,
   show-more links) — calmer than .ch-btn's bordered look. New primitive; the
   existing bespoke borderless buttons (.ch-loop-*, .ch-modal-x, .ch-match-toggle)
   can migrate onto it over time rather than all at once. */
.ch-btn-ghost {
    background: transparent; border: 1px solid transparent; color: var(--text-secondary);
    border-radius: var(--ch-radius-sm); padding: 4px 8px; font-size: var(--ch-fs-sm); cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}
.ch-btn-ghost:hover { color: var(--text); border-color: var(--ch-hover); }

/* ── Inline edit form (detail pane) ───────────────────────────── */
.ch-edit-form { display: flex; flex-direction: column; gap: var(--ch-s3); }
/* An author rule for `display` always beats the UA default `[hidden] { display:
   none }` regardless of specificity (origin order, not specificity, decides), so
   the flex declaration above silently defeated the hidden attribute — the edit
   form rendered open on every call, permanently duplicating the summary below.
   Restore the intended behavior explicitly, same pattern as .vm-player[hidden]
   etc. elsewhere in this codebase. */
.ch-edit-form[hidden] { display: none; }
/* While editing, the form replaces the read-only Summary card instead of stacking
   on top of it (the same narrative/next-step/waiting-on fields would otherwise
   render twice — once as inputs, once as read-only text). */
#chEditForm:not([hidden]) ~ .ch-detail-cols .ch-summary-card { display: none; }
.ch-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ch-s3); }
.ch-edit-form label, .ch-edit-full { display: flex; flex-direction: column; gap: var(--ch-s1); font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-edit-form .ch-select { width: 100%; }
.ch-edit-form textarea.ch-select { resize: vertical; min-height: 64px; }

/* ── Panels (settings / running call log / discards) ──────────── */
/* The panels are flex children of #callHubTool's locked-height column (see the
   height chain at the top of this file) — without their own scroll a long
   Running-call-log was simply clipped with no way to reach older rows.
   flex: 0 1 auto + min-height: 0 lets a tall panel shrink and scroll while a
   short one takes only the space it needs. */
.ch-panel {
    padding: var(--ch-s3) var(--ch-s6) var(--ch-s3);
    overflow-y: auto; min-height: 0; flex: 0 1 auto;
    /* Cap so a long log scrolls INSIDE the panel and the calls area below
       always keeps meaningful height. */
    max-height: 60vh;
}
.ch-settings-hint { font-size: var(--ch-fs-sm); color: var(--text-secondary); margin: 0 0 var(--ch-s3); line-height: 1.5; }
.ch-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ch-s3); }
.ch-settings-grid label { display: flex; flex-direction: column; gap: var(--ch-s1); font-size: var(--ch-fs-sm); color: var(--text-secondary); }
.ch-settings-actions { margin-top: var(--ch-s4); }

/* Settings grouped into plainly-titled sections instead of one wall of inputs. */
.ch-settings-group + .ch-settings-group { margin-top: var(--ch-s4); padding-top: var(--ch-s4); border-top: 1px solid var(--border); }
.ch-settings-group-title { font-size: var(--ch-fs-body); font-weight: 700; color: var(--text); margin-bottom: var(--ch-s2); }
.ch-settings-sub { font-weight: 400; color: var(--text-secondary); font-size: var(--ch-fs-meta); }

/* ── Two-pane layout ──────────────────────────────────────────── */
/* minmax(0,…) on BOTH tracks lets the columns shrink instead of overflowing;
   min-width:0 on the panes lets their long content (transcripts, names) reflow. */
.ch-container { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--ch-s6); padding: var(--ch-s4) var(--ch-s6) var(--ch-s6); flex: 1 1 auto; min-height: 0; }
.ch-list-rail { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ch-detail { min-width: 0; min-height: 0; overflow-y: auto; }

/* ── List rows (zone 1) ───────────────────────────────────────── */
.ch-list { display: flex; flex-direction: column; gap: var(--ch-s2); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ch-row {
    text-align: left; width: 100%; cursor: pointer; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--border);
    border-radius: var(--ch-radius-sm); padding: var(--ch-s3); display: flex; flex-direction: column; gap: var(--ch-s2);
    transition: border-color .12s ease, box-shadow .12s ease;
}

/* Day / Done section headers (sticky so the day stays visible while scrolling). */
.ch-group-head {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--ch-s2);
    background: var(--bg-card); padding: var(--ch-s2) var(--ch-s1);
    font-size: var(--ch-fs-meta); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-secondary);
}
.ch-group-count {
    font-size: var(--ch-fs-label); font-weight: 600; color: var(--text-secondary);
    background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--ch-radius-pill); padding: 0 var(--ch-s2);
}

/* Collapsed Done group. */
.ch-done-group { border: none; }
.ch-done-head { cursor: pointer; list-style: none; }
.ch-done-head::-webkit-details-marker { display: none; }
.ch-done-head::after { content: '▸'; margin-left: auto; transition: transform .12s ease; }
.ch-done-group[open] .ch-done-head::after { transform: rotate(90deg); }
.ch-done-list { display: flex; flex-direction: column; gap: var(--ch-s2); margin-top: var(--ch-s2); }
.ch-done-list .ch-row { opacity: .72; }

/* One-click status actions per row (kept outside the row button). */
.ch-row-wrap { position: relative; }
/* Centered on the right edge (not the top corner) so the single ✓/↩ never sits on
   top of the status badge in the top-right of the row — the old top:8px overlap. */
.ch-row-actions {
    position: absolute; top: 50%; right: var(--ch-s2); transform: translateY(-50%);
    display: flex; gap: var(--ch-s1);
    opacity: 0; transition: opacity .12s ease;
}
.ch-row-wrap:hover .ch-row-actions, .ch-row-wrap:focus-within .ch-row-actions { opacity: 1; }
@media (hover: none) { .ch-row-actions { opacity: 1; } } /* always visible on touch */
.ch-rowact {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--ch-radius-sm);
    color: var(--text-secondary); font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
    transition: color .12s ease, border-color .12s ease;
}
.ch-rowact:hover { color: var(--text); border-color: var(--ch-hover); }
.ch-rowact-done:hover { color: var(--success, #32d74b); border-color: var(--success, #32d74b); }
.ch-row:hover { border-color: var(--ch-hover); }
.ch-row.is-active { border-color: var(--ch-selected); box-shadow: inset 0 0 0 1px var(--ch-selected); }
.ch-row.is-kbsel { box-shadow: inset 0 0 0 2px var(--ch-selected); }
/* Status semantics live in the thin left accent only (keeps the palette calm). */
.ch-row-needs-review { border-left-color: var(--warning, #ff9f0a); }
.ch-row-action-needed { border-left-color: var(--danger, #ff453a); }
.ch-row-new { border-left-color: var(--apple-blue); }
.ch-row-done { border-left-color: var(--success, #32d74b); }
.ch-row-top { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-s2); }
.ch-row-who { font-weight: 600; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.ch-row-topic { font-size: var(--ch-fs-sm); line-height: 1.45; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-row-meta { display: flex; gap: var(--ch-s3); flex-wrap: wrap; font-size: var(--ch-fs-meta); color: var(--text-secondary); align-items: center; }
/* Click-to-copy meta value (caller number) — reads as text, copies on click. */
.ch-meta-copy { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.ch-meta-copy:hover { color: var(--apple-blue); text-decoration: underline; }

/* ── Status pills ─────────────────────────────────────────────── */
.ch-pill { font-size: var(--ch-fs-label); padding: 2px var(--ch-s2); border-radius: var(--ch-radius-pill); border: 1px solid var(--border); white-space: nowrap; }
.ch-pill-new { background: rgba(0,122,255,.15); color: var(--apple-blue); border-color: transparent; }
.ch-pill-needs-review { background: rgba(255,159,10,.18); color: var(--warning, #ff9f0a); border-color: transparent; }
.ch-pill-action-needed { background: rgba(255,69,58,.16); color: var(--danger, #ff453a); border-color: transparent; }
.ch-pill-reviewed { background: rgba(127,127,127,.16); border-color: transparent; }
.ch-pill-done { background: rgba(52,199,89,.16); color: var(--success, #32d74b); border-color: transparent; }
.ch-dot.is-resolved { color: var(--success, #32d74b); }
.ch-dot.is-open { color: var(--text-secondary); }
.ch-warn { color: var(--danger, #ff453a); }

/* ── Call tags (line of business / intent / urgency) ──────────── */
.ch-row-badges { display: inline-flex; align-items: center; gap: var(--ch-s2); flex-shrink: 0; }
.ch-tags { display: flex; flex-wrap: wrap; gap: var(--ch-s1); margin-top: var(--ch-s2); }
.ch-tag {
    font-size: var(--ch-fs-label); padding: 2px var(--ch-s2); border-radius: var(--ch-radius-pill);
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap;
}
/* Descriptive tags (line of business / intent) are always neutral grey — color
   is reserved for status/urgency/confirmation, never plain metadata. */
.ch-tag-lob, .ch-tag-intent { color: var(--text-secondary); }
.ch-tag-at_risk, .ch-urgency-at_risk { background: rgba(255,69,58,.16); color: var(--danger, #ff453a); border-color: transparent; }
.ch-tag-callback, .ch-urgency-callback { background: rgba(255,159,10,.18); color: var(--warning, #ff9f0a); border-color: transparent; }
.ch-urgency {
    font-size: var(--ch-fs-label); font-weight: 600; padding: 2px var(--ch-s2);
    border-radius: var(--ch-radius-pill); white-space: nowrap;
}

/* ── Detail pane (zone 2 — primacy) ───────────────────────────── */
.ch-detail { display: flex; flex-direction: column; gap: var(--ch-s4); }
.ch-detail-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ch-s4); flex-wrap: wrap;
    padding-bottom: var(--ch-s3); border-bottom: 1px solid var(--border);
}
.ch-detail-id { min-width: 0; flex: 1 1 auto; }
.ch-detail-title-row { display: flex; align-items: center; gap: var(--ch-s3); flex-wrap: wrap; min-width: 0; margin-bottom: var(--ch-s1); }
/* Status pill + urgency promoted onto the H3 line — name first, then the two
   things that need a glance, ahead of anything else in the header. */
.ch-detail-badges { display: inline-flex; align-items: center; gap: var(--ch-s2); flex-shrink: 0; }
.ch-detail-head h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.ch-status-set { display: inline-flex; flex-direction: column; gap: var(--ch-s1); font-size: var(--ch-fs-meta); color: var(--text-secondary); flex-shrink: 0; }
.ch-detail-head-actions { display: flex; align-items: flex-start; gap: var(--ch-s2); flex-shrink: 0; }

/* Linked HawkSoft client chip — sits on the identity line, deep-links to record. */
.ch-match-inline {
    display: inline-flex; align-items: center; gap: var(--ch-s2); min-width: 0; max-width: 100%;
    padding: 3px var(--ch-s2) 3px var(--ch-s3); border-radius: var(--ch-radius-pill);
    background: var(--bg-input); border: 1px solid var(--border); font-size: var(--ch-fs-meta);
}
/* The unconditional `display` above would otherwise beat the UA [hidden] default
   (author rules win over UA rules regardless of specificity) and show an empty
   pill when there's no match — see the .ch-edit-form[hidden] note above. */
.ch-match-inline[hidden] { display: none; }
.ch-match-inline.is-confirmed { border-color: var(--success, #32d74b); background: rgba(52,199,89,.12); }
.ch-match-inline-tag { font-size: var(--ch-fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); white-space: nowrap; }
.ch-match-inline.is-confirmed .ch-match-inline-tag { color: var(--success, #32d74b); }
.ch-match-inline-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.ch-match-inline-meta { color: var(--text-secondary); white-space: nowrap; }
.ch-match-inline-open { color: var(--apple-blue); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ch-match-inline-open:hover { text-decoration: underline; }

/* Overflow (⋯) — Edit / Delete tucked behind a menu so the head stays calm. */
.ch-overflow { position: relative; flex-shrink: 0; }
.ch-overflow > summary { list-style: none; font-size: 18px; line-height: 1; }
.ch-overflow > summary::-webkit-details-marker { display: none; }
.ch-overflow-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    display: flex; flex-direction: column; gap: var(--ch-s2); min-width: 210px; padding: var(--ch-s2);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--ch-radius-sm);
    box-shadow: 0 12px 32px -10px rgba(0,0,0,.6);
}
.ch-overflow-menu .ch-btn { width: 100%; text-align: left; }
/* The action-bar "More ▾" reuses .ch-overflow's outside-click/Escape wiring but
   needs button-sized text, not the head ⋯ glyph's larger font. */
.ch-actionbar-more > summary { font-size: var(--ch-fs-sm); line-height: inherit; }

/* ── Action bar — the elevated focal zone (status / next / copy) ──── */
.ch-actionbar { display: flex; flex-direction: column; gap: var(--ch-s3); border-left: 3px solid var(--ch-selected); box-shadow: 0 6px 22px -12px rgba(0,0,0,.55); }
.ch-actionbar-row { display: flex; align-items: center; gap: var(--ch-s3); flex-wrap: wrap; }
.ch-actionbar .ch-status-set { flex-direction: row; align-items: center; gap: var(--ch-s2); font-size: var(--ch-fs-sm); color: var(--text-secondary); }
.ch-actionbar .ch-status-set .ch-select { font-size: var(--ch-fs-body); padding: 7px var(--ch-s3); }
.ch-resolved-pill { font-size: var(--ch-fs-sm); font-weight: 600; }
/* Output/action cluster (Copy note · Reminder · Start quote) pushed to the right. */
.ch-actionbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--ch-s2); flex-wrap: wrap; }
.ch-actionbar-actions .ch-btn.is-armed { border-color: var(--ch-selected); color: #fff; background: var(--ch-selected); font-weight: 600; }
.ch-actionbar-facts { display: flex; flex-wrap: wrap; gap: var(--ch-s2) var(--ch-s4); padding-top: var(--ch-s3); border-top: 1px solid var(--border); font-size: var(--ch-fs-sm); color: var(--text); }
.ch-fact { display: inline-flex; gap: var(--ch-s2); align-items: baseline; min-width: 0; overflow-wrap: anywhere; }

/* Note preview — exactly what "Copy note" puts on the clipboard. Collapsed at
   rest; Copy note / the 1st-3rd person toggle pop it open (js _refreshNotePreview). */
.ch-note-preview pre {
    white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--ch-s2) 0 0;
    font-family: inherit; font-size: var(--ch-fs-sm); line-height: 1.5; color: var(--text);
    background: var(--bg-input); border-radius: var(--ch-radius-sm); padding: var(--ch-s2) var(--ch-s3);
}
.ch-fact-k { font-size: var(--ch-fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); font-weight: 700; flex-shrink: 0; }

/* One unified card treatment for every section */
.ch-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--ch-radius); padding: var(--ch-card-pad); }
.ch-card > h4 { margin-bottom: var(--ch-s3); }
.ch-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-s2); margin-bottom: var(--ch-s3); }
.ch-card-head h4 { margin: 0; }

/* Collapsible card (details/summary) shares the exact card look */
details.ch-card { padding: 0; }
details.ch-card > summary {
    list-style: none; cursor: pointer; padding: var(--ch-card-pad);
    display: flex; align-items: center; justify-content: space-between; gap: var(--ch-s2);
    font-size: var(--ch-fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
}
details.ch-card > summary::-webkit-details-marker { display: none; }
details.ch-card > summary::after { content: '⌄'; font-size: 14px; transition: transform .15s ease; }
details.ch-card[open] > summary::after { transform: rotate(180deg); }
details.ch-card > summary + * { padding: 0 var(--ch-card-pad) var(--ch-card-pad); margin: 0; }

.ch-narrative { font-size: 15px; line-height: 1.55; margin: 0 0 var(--ch-s3); color: var(--text); overflow-wrap: anywhere; }
.ch-keypoints { margin: 0 0 var(--ch-s3); padding-left: 18px; }
.ch-keypoints li { font-size: var(--ch-fs-sm); color: var(--text-secondary); margin: var(--ch-s1) 0; }

/* "What the AI understood" — transcription insight (relationship read, name
   corrections, low-confidence ⚠ verify terms). Quiet, informational card with a
   subtle left accent so it reads as an AI note, not primary content. */
.ch-airead-card { border-left: 3px solid var(--border-strong, var(--border)); display: flex; flex-direction: column; gap: var(--ch-s1); }
.ch-airead-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ch-s2); font-size: var(--ch-fs-sm); margin-top: var(--ch-s2); }
.ch-airead-row:first-of-type { margin-top: 0; }
.ch-airead-k { flex: 0 0 auto; font-size: var(--ch-fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); font-weight: 700; }
.ch-airead-k.ch-airead-warn { color: var(--warning, #ff9f0a); }
.ch-airead-vals { display: flex; flex-wrap: wrap; gap: var(--ch-s1) var(--ch-s2); min-width: 0; }
.ch-airead-corr { color: var(--text); overflow-wrap: anywhere; }
.ch-airead-verify {
    font-size: var(--ch-fs-meta); padding: 1px var(--ch-s2); border-radius: var(--ch-radius-pill);
    background: rgba(255,159,10,.14); color: var(--warning, #ff9f0a); border: 1px solid transparent; overflow-wrap: anywhere;
}
.ch-airead-rel { font-weight: 600; }
.ch-airead-rel-existing_client { color: var(--success, #32d74b); }
.ch-airead-rel-new_prospect { color: var(--apple-blue); }
.ch-airead-rel-third_party { color: var(--text-secondary); }

/* Key details — click-to-copy cards */
.ch-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ch-s2); }
.ch-detail-copy { text-align: left; cursor: pointer; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--ch-radius-sm); padding: var(--ch-s2) var(--ch-s3); display: flex; flex-direction: column; gap: 3px; color: var(--text); transition: border-color .12s ease; }
.ch-detail-copy:hover { border-color: var(--ch-hover); }
.ch-detail-label { font-size: var(--ch-fs-label); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.ch-detail-value { font-size: var(--ch-fs-body); font-weight: 600; word-break: break-word; }
/* Digit-heavy fields flagged "confirm with caller" (transcription can mishear). */
.ch-detail-verify { border-color: rgba(255,159,10,.4); }
.ch-detail-verify:hover { border-color: var(--warning, #ff9f0a); }
.ch-verify-flag { color: var(--warning, #ff9f0a); font-weight: 700; letter-spacing: 0; text-transform: none; margin-left: var(--ch-s1); }
/* VIN-decoded vehicle: derived (not transcribed) — marked with the selected edge. */
.ch-vehicle-decoded { border-left: 3px solid var(--ch-selected); }

/* Open loops */
.ch-loops { display: flex; flex-direction: column; }
.ch-loop { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-s3); padding: var(--ch-s2) 0; border-bottom: 1px solid var(--border); }
.ch-loop:last-child { border-bottom: none; }
.ch-loop-main { display: flex; flex-direction: column; gap: 2px; font-size: var(--ch-fs-sm); flex: 1 1 auto; min-width: 0; }
.ch-loop-wait { font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-loop-del, .ch-loop-remind, .ch-loop-email {
    flex-shrink: 0; background: transparent; border: 1px solid transparent; color: var(--text-secondary);
    border-radius: var(--ch-radius-sm); padding: 4px 8px; font-size: var(--ch-fs-sm); line-height: 1; cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}
.ch-loop-del:hover { color: var(--danger, #ff453a); border-color: var(--danger, #ff453a); }
.ch-loop-remind:hover { color: var(--text); border-color: var(--ch-hover); }
.ch-loop-email:hover { color: var(--text); border-color: var(--ch-hover); }
/* Secondary follow-up actions (email/remind/delete) live behind a ⋯ overflow so each
   row reads as one line. Reuses .ch-overflow's menu + outside-click/Escape wiring; the
   items are the existing .ch-loop-email/remind/del buttons laid out as full-width rows. */
.ch-loop-more-btn {
    flex-shrink: 0; background: transparent; border: 1px solid transparent; color: var(--text-secondary);
    border-radius: var(--ch-radius-sm); padding: 4px 8px; font-size: var(--ch-fs-body); line-height: 1; cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}
.ch-loop-more-btn:hover, .ch-loop-more[open] > .ch-loop-more-btn { color: var(--text); border-color: var(--ch-hover); }
.ch-loop-more .ch-overflow-menu button { width: 100%; text-align: left; white-space: nowrap; padding: 6px 10px; }
/* One-tap done — the primary control, so it reads as an action, not a glyph. */
.ch-loop-done {
    flex-shrink: 0; background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
    border-radius: var(--ch-radius-sm); width: 30px; height: 30px; font-size: var(--ch-fs-sm); line-height: 1; cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ch-loop-done:hover { color: #30d158; border-color: #30d158; background: rgba(48, 209, 88, 0.08); }
.ch-loop-resolved { opacity: 0.55; }
.ch-loop-resolved .ch-loop-main strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.ch-loop-resolved .ch-loop-done { color: #30d158; border-color: #30d158; }
/* Aged backlog: an open follow-up past LOOP_STALE_DAYS sinks below fresh work
   and dims (not as far as resolved) so the top of the list stays current. */
.ch-loop-stale:not(.ch-loop-resolved) { opacity: 0.72; }
.ch-loop-age {
    flex-shrink: 0; font-size: var(--ch-fs-meta); color: var(--text-secondary);
    white-space: nowrap; align-self: center;
}
.ch-loop-age.is-stale { color: var(--warning, #ff9f0a); }
/* Resolve-all bar sits above the rows. */
.ch-loops-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--ch-s2); padding: 0 0 var(--ch-s2); }
.ch-loops-stale-note { font-size: var(--ch-fs-meta); color: var(--warning, #ff9f0a); white-space: nowrap; }
.ch-loops-resolve-all {
    background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
    border-radius: var(--ch-radius-sm); padding: 4px 10px; font-size: var(--ch-fs-meta); line-height: 1; cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ch-loops-resolve-all:hover { color: #30d158; border-color: #30d158; background: rgba(48, 209, 88, 0.08); }
.ch-loops-resolve-all:disabled { opacity: 0.5; cursor: default; }

/* ── Focus mode (one-card inbox-zero triage) ──────────────────── */
.ch-focus-strip {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ch-s3);
    flex-wrap: wrap; margin-bottom: var(--ch-s3); padding: var(--ch-s2) var(--ch-card-pad);
    background: var(--bg-card); border: 1px solid var(--ch-selected); border-radius: var(--ch-radius, 12px);
}
.ch-focus-progress { font-weight: 600; font-size: var(--ch-fs-sm); }
.ch-focus-nav { display: flex; flex-wrap: wrap; gap: var(--ch-s2); }
/* Dim the list rail so the single card is the focus, but keep it reachable. */
body.ch-focus-mode .ch-list-rail { opacity: .5; }
body.ch-focus-mode .ch-list-rail:hover { opacity: 1; }

/* ── Call reference + manual linking ──────────────────────────── */
.ch-callref { font-family: ui-monospace, monospace; letter-spacing: .02em; }
.ch-linked-list { display: flex; flex-direction: column; }
.ch-linked-row { display: flex; align-items: center; gap: var(--ch-s2); border-top: 1px solid var(--border); }
.ch-linked-row:first-child { border-top: none; }
.ch-linked-go {
    flex: 1 1 auto; min-width: 0; display: flex; gap: var(--ch-s2); align-items: baseline; text-align: left;
    background: transparent; border: none; padding: var(--ch-s2) 0; cursor: pointer; color: inherit; font: inherit;
}
.ch-linked-go:hover .ch-linked-who { color: var(--ch-selected); }
.ch-linked-when { flex: 0 0 auto; min-width: 104px; font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-linked-who { flex: 1 1 auto; min-width: 0; font-size: var(--ch-fs-sm); overflow-wrap: anywhere; }
.ch-linked-unlink {
    flex: 0 0 auto; background: transparent; border: 1px solid transparent; color: var(--text-secondary);
    border-radius: var(--ch-radius-sm); padding: 2px 6px; font-size: var(--ch-fs-meta); cursor: pointer;
}
.ch-linked-unlink:hover { color: var(--danger, #ff453a); border-color: var(--danger, #ff453a); }
.ch-linkpick-list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; gap: 2px; }
.ch-linkpick { display: flex; align-items: baseline; gap: var(--ch-s2); padding: var(--ch-s2); border-radius: var(--ch-radius-sm); cursor: pointer; }
.ch-linkpick:hover { background: var(--bg-input); }
.ch-linkpick-when { flex: 0 0 auto; min-width: 104px; font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-linkpick-who { flex: 1 1 auto; min-width: 0; font-size: var(--ch-fs-sm); overflow-wrap: anywhere; }
.ch-linkpick.is-disabled { opacity: .55; cursor: not-allowed; }
.ch-linkpick-badge { flex: 0 0 auto; font-size: var(--ch-fs-label); color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--ch-radius-pill); padding: 0 var(--ch-s2); }

/* ── Caller timeline (thread history) ─────────────────────────── */
.ch-timeline-list { display: flex; flex-direction: column; }
.ch-timeline-row {
    display: flex; gap: var(--ch-s2); align-items: baseline; width: 100%; text-align: left;
    background: transparent; border: none; border-top: 1px solid var(--border);
    padding: var(--ch-s2) 0; cursor: pointer; color: inherit; font: inherit;
}
.ch-timeline-row:first-child { border-top: none; }
.ch-timeline-row:hover .ch-timeline-topic { color: var(--ch-selected); }
.ch-timeline-when { flex: 0 0 auto; min-width: 104px; font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-timeline-topic { flex: 1 1 auto; min-width: 0; font-size: var(--ch-fs-sm); }
.ch-timeline-open { color: var(--warning, #ff9f0a); margin-left: var(--ch-s1); font-size: var(--ch-fs-meta); }

/* Shimmer stub shown in #chLinked/#chTimeline while their ?link=/?thread= fetch
   is in flight (only when the cached row already indicates one exists — see
   _renderDetail's sideSkel). Reuses skeleton-pulse from animations.css — no new
   keyframes (project rule). */
.ch-side-skel { display: flex; flex-direction: column; gap: var(--ch-s2); }
.ch-side-skel-bar { height: 14px; border-radius: var(--ch-radius-sm); background: var(--bg-input); animation: skeleton-pulse 1.2s ease-in-out infinite; }
.ch-side-skel-bar:last-child { width: 65%; }

/* ── Email draft modal ────────────────────────────────────────── */
.ch-modal-overlay {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    padding: var(--ch-s3);
}
/* Solid (opaque) panel in both themes — --bg-card is translucent in light mode,
   which made the modal see-through over the page. */
.ch-modal {
    background: #ffffff; color: var(--text); border: 1px solid var(--border);
    border-radius: var(--ch-radius, 12px); width: min(620px, 100%);
    /* Overlay has padding: var(--ch-s3) on all sides, so 90vh alone can still
       clip on short viewports; dvh also fixes iOS Safari's URL-bar overflow. */
    max-height: min(90vh, 100dvh - (2 * var(--ch-s3))); overflow-y: auto;
    padding: var(--ch-card-pad); display: flex; flex-direction: column; gap: var(--ch-s2);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
body.dark-mode .ch-modal { background: #1c1c1e; }
.ch-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-s2); }
.ch-modal-head h4 { margin: 0; }
.ch-modal-x {
    background: transparent; border: none; color: var(--text-secondary); font-size: 16px; line-height: 1;
    cursor: pointer; padding: 4px 8px; border-radius: var(--ch-radius-sm);
}
.ch-modal-x:hover { color: var(--text); }
.ch-modal-field { display: flex; flex-direction: column; gap: var(--ch-s1); font-size: var(--ch-fs-sm); color: var(--text-secondary); }
.ch-modal-field textarea.ch-select { width: 100%; resize: vertical; min-height: 180px; font-family: inherit; }
.ch-modal-hint { font-size: var(--ch-fs-meta); color: var(--text-secondary); margin: 0; }
.ch-modal-actions { display: flex; flex-wrap: wrap; gap: var(--ch-s2); margin-top: var(--ch-s1); }

/* ── Recording playback ───────────────────────────────────────── */
.ch-audio-card { display: flex; flex-direction: column; gap: var(--ch-s2); padding: var(--ch-s3) var(--ch-card-pad); }
.ch-audio-empty { flex-direction: row; align-items: center; gap: var(--ch-s2); color: var(--text-secondary); font-size: var(--ch-fs-sm); }
.ch-rec-loading { color: var(--text-secondary); font-size: var(--ch-fs-sm); }
.ch-rec-load { align-self: flex-start; }
.ch-rec-audio { width: 100%; height: 40px; }
.ch-rec-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--ch-s3); flex-wrap: wrap; }
.ch-rec-speed { display: inline-flex; align-items: center; gap: var(--ch-s1); font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-rec-speed .ch-select { padding: 2px var(--ch-s2); }
.ch-rec-dl { font-size: var(--ch-fs-meta); color: var(--text-secondary); }

/* ── Detail two-column layout (read-first): summary/details left, transcript/matches right ── */
.ch-detail-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--ch-s4); align-items: start; }
.ch-detail-col-main, .ch-detail-col-side { display: flex; flex-direction: column; gap: var(--ch-s4); min-width: 0; }
@media (max-width: 900px) { .ch-detail-cols { grid-template-columns: 1fr; } }

/* ── Edit hint ────────────────────────────────────────────────── */
.ch-edit-hint { font-size: var(--ch-fs-meta); color: var(--text-secondary); margin: 0; }

/* ── HawkSoft match: show-more for low-confidence suggestions ──── */
.ch-match-more { display: flex; flex-direction: column; gap: var(--ch-s2); margin-top: var(--ch-s2); }
.ch-match-more[hidden] { display: none; }
.ch-match-toggle {
    margin-top: var(--ch-s2); background: none; border: none; color: var(--ch-accent-ink, var(--apple-blue));
    font-size: var(--ch-fs-meta); cursor: pointer; padding: var(--ch-s1) 0; align-self: flex-start;
}
.ch-match-toggle:hover { text-decoration: underline; }

/* ── Settings: full-width style note ──────────────────────────── */
.ch-settings-full { display: flex; flex-direction: column; gap: var(--ch-s1); margin-top: var(--ch-s3); font-size: var(--ch-fs-sm); color: var(--text-secondary); }
.ch-settings-full textarea.ch-select { width: 100%; resize: vertical; min-height: 60px; }

/* HawkSoft match — suggest-only client matches. Promoted to a full-width
   identity band between the header and the action bar. Neutral by default
   (confirmed matches collapse into the quiet green chip on the H3 line
   instead); LOUD (amber) only while the top candidate is unconfirmed —
   that's the one thing on the pane worth a second look before acting. */
.ch-match-card { border-color: var(--border); }
.ch-match-hint { font-size: var(--ch-fs-sm); margin: 0 0 var(--ch-s2); }
.ch-match-card-loud {
    border-color: var(--warning, #ff9f0a);
    background: rgba(255, 159, 10, .08);
}

/* Compact one-line banner for the loud (unconfirmed) case — was a stacked
   <h4> + boxed row that read as a whole extra row in the pane; now a single
   wrapping flex line with real actions (Confirm / Not a match) instead of
   copy/open only. Tighter padding than the default .ch-card since the band
   IS the content, not a card wrapping a card. */
.ch-match-card-compact { padding: var(--ch-s2) var(--ch-s3); }
.ch-match-band { display: flex; align-items: center; gap: var(--ch-s2); flex-wrap: wrap; }
.ch-match-band-label {
    font-size: var(--ch-fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--warning, #ff9f0a); white-space: nowrap;
}
.ch-match-band-name { font-weight: 600; overflow-wrap: anywhere; }
.ch-match-band-meta { font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-match-band-actions { display: flex; align-items: center; gap: var(--ch-s2); flex-wrap: wrap; margin-left: auto; }
.ch-match-confirm, .ch-match-dismiss { white-space: nowrap; }
/* Green (not .ch-btn-primary teal) — the action bar's Copy note already owns
   "the one primary button"; Confirm reuses the same green the app already
   uses for a confirmed match (.ch-match-badge / is-confirmed) so it reads as
   "the positive action" without competing for primary-button attention. */
.ch-match-confirm { border-color: var(--success, #32d74b); color: var(--success, #32d74b); }
.ch-match-confirm:hover { background: rgba(52, 199, 89, .12); }

/* No-match (new caller) — collapsed, low-prominence one-liner */
.ch-match-card-collapsed { border-color: var(--ch-border, var(--border)); padding: var(--ch-s2) var(--ch-s3); }
.ch-match-collapse-sum {
    font-size: var(--ch-fs-sm); color: var(--text-secondary); cursor: pointer;
    list-style: none; display: flex; align-items: center; gap: var(--ch-s2);
}
.ch-match-collapse-sum::before { content: '🆕'; font-size: var(--ch-fs-meta); }
.ch-match-collapse-sum::-webkit-details-marker { display: none; }
.ch-match-collapse[open] .ch-match-collapse-sum { margin-bottom: var(--ch-s2); }
.ch-match-collapse .ch-match-hint { margin: 0; }
.ch-match-list { display: flex; flex-direction: column; gap: var(--ch-s2); }
.ch-match-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ch-s3); flex-wrap: wrap;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--ch-radius-sm); padding: var(--ch-s3);
}
.ch-match-row.is-confirmed { border-color: var(--success, #32d74b); }
/* Keep the name readable and let the actions wrap below when the column is tight. */
.ch-match-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 150px; }
.ch-match-name-row { display: flex; align-items: center; gap: var(--ch-s2); flex-wrap: wrap; }
.ch-match-name { font-weight: 600; font-size: var(--ch-fs-body); overflow-wrap: anywhere; }
.ch-match-badge { font-size: var(--ch-fs-label); padding: 2px var(--ch-s2); border-radius: var(--ch-radius-pill); background: rgba(52,199,89,.16); color: var(--success, #32d74b); white-space: nowrap; }
.ch-match-meta { font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-match-reason { font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-match-actions { display: flex; align-items: center; gap: var(--ch-s2); flex-shrink: 0; flex-wrap: wrap; }
.ch-match-open { text-decoration: none; }

/* Transcript — collapsed by default (uses the shared details.ch-card look) */
.ch-transcript { font-size: var(--ch-fs-sm); color: var(--text); background: var(--bg-input); border-radius: var(--ch-radius-sm); padding: var(--ch-s2) var(--ch-s3); max-height: 320px; overflow: auto; }
.ch-transcript-empty { color: var(--text-secondary); }
/* Diarized transcript lines: clickable [m:ss] timestamp · speaker · text */
.ch-tline { display: flex; gap: var(--ch-s2); align-items: baseline; padding: 3px 0; word-break: break-word; }
.ch-tline-plain { display: block; white-space: pre-wrap; }
.ch-tseek {
    flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: var(--ch-fs-label);
    background: transparent; border: none; padding: 0; cursor: pointer; color: var(--apple-blue);
}
.ch-tseek.is-static { color: var(--text-secondary); cursor: default; }
.ch-tseek:not(.is-static):hover { text-decoration: underline; }
.ch-tspeaker { flex-shrink: 0; font-weight: 700; color: var(--text-secondary); font-size: var(--ch-fs-label); text-transform: uppercase; letter-spacing: .03em; }
.ch-ttext { min-width: 0; }

/* Discards audit */
.ch-discards-list { display: flex; flex-direction: column; gap: var(--ch-s1); }
.ch-discard-row { display: flex; align-items: center; gap: var(--ch-s3); font-size: var(--ch-fs-sm); color: var(--text-secondary); padding: var(--ch-s2) 0; border-bottom: 1px solid var(--border); }
.ch-discard-row:last-child { border-bottom: none; }
.ch-discard-reason { font-size: var(--ch-fs-label); padding: 2px var(--ch-s2); border-radius: var(--ch-radius-pill); border: 1px solid var(--border); }
.ch-discard-personal { background: rgba(127,127,127,.14); }
.ch-discard-low_confidence { background: rgba(255,159,10,.18); color: var(--warning, #ff9f0a); }
.ch-discard-id { font-family: ui-monospace, monospace; font-size: var(--ch-fs-meta); }

/* ── Running call log (permanent, searchable) ─────────────────── */
.ch-log-search-wrap { margin-bottom: var(--ch-s3); }
.ch-log-list { display: flex; flex-direction: column; }
.ch-log-row { display: flex; gap: var(--ch-s3); padding: var(--ch-s2) 0; border-bottom: 1px solid var(--border); }
.ch-log-row:last-child { border-bottom: none; }
.ch-log-when { flex: 0 0 auto; min-width: 116px; font-size: var(--ch-fs-meta); color: var(--text-secondary); }
.ch-log-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-log-who { font-size: var(--ch-fs-sm); display: flex; flex-wrap: wrap; gap: var(--ch-s2); align-items: baseline; }
.ch-log-num { color: var(--text-secondary); font-size: var(--ch-fs-meta); font-family: ui-monospace, monospace; }
.ch-log-xfer { color: var(--ch-selected); font-size: var(--ch-fs-meta); }
.ch-log-recap { font-size: var(--ch-fs-sm); color: var(--text-secondary); }
.ch-log-del {
    flex: 0 0 auto; align-self: start; background: transparent; border: 1px solid transparent;
    color: var(--text-secondary); border-radius: var(--ch-radius-sm); padding: 2px 6px; font-size: var(--ch-fs-meta);
    line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.ch-log-row:hover .ch-log-del, .ch-log-del.is-armed { opacity: 1; }
.ch-log-del:hover { color: var(--danger, #ff453a); border-color: var(--danger, #ff453a); }
.ch-log-del.is-armed { color: var(--danger, #ff453a); border-color: var(--danger, #ff453a); }
@media (hover: none) { .ch-log-del { opacity: 1; } }
.ch-log-foot { display: flex; justify-content: center; padding: var(--ch-s3) 0 0; }
@media (max-width: 560px) {
    .ch-log-row { flex-direction: column; gap: 2px; }
    .ch-log-when { min-width: 0; }
}

/* Empty states */
.ch-empty { color: var(--text-secondary); font-size: var(--ch-fs-body); padding: var(--ch-s6) var(--ch-s3); text-align: center; }
/* Center the detail placeholder in the available space instead of leaving a gap. */
.ch-detail > .ch-empty { margin: auto; max-width: 320px; }
.ch-detail:has(> .ch-empty) { min-height: clamp(220px, 40vh, 420px); justify-content: center; }
.ch-empty[data-error="1"] { color: var(--danger, #ff453a); }
.ch-empty-title { font-weight: 600; color: var(--text); margin-bottom: var(--ch-s1); }
.ch-empty-sub { font-size: var(--ch-fs-sm); color: var(--text-secondary); }
.ch-empty .ch-btn { margin-top: var(--ch-s3); }
.ch-empty-inline { color: var(--text-secondary); font-size: var(--ch-fs-sm); padding: var(--ch-s2) 0; }

/* ── Responsive (container queries — adapt to the panel's own width) ── */

/* Collapse to a single column once the panel can't comfortably hold two.
   Also cancels the height-chain fill from the top of this file — a fixed-
   height two-pane scroll box would trap both panes once they stack, so
   narrow/stacked goes back to natural page scroll (the ancestor :has() locks
   live above this container query and can't be reached from in here; toggling
   #callHubTool back to block is what neutralizes them at this width). */
@container chhub (max-width: 820px) {
    #callHubTool.plugin-container.active { display: block; }
    .ch-container { display: block; grid-template-columns: minmax(0, 1fr); flex: none; min-height: 0; }
    /* List on top, capped so the detail below is always reachable. */
    .ch-list { flex: none; height: auto; max-height: 50vh; overflow-y: auto; }
    .ch-detail { height: auto; overflow: visible; }
}

/* Mid-narrow (split-screen ~560–820px): trim outer padding, stack the toolbar. */
@container chhub (max-width: 640px) {
    .ch-header, .ch-panel, .ch-container { padding-left: var(--ch-s4); padding-right: var(--ch-s4); }
    .ch-toolbar { gap: var(--ch-s3); }
    .ch-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Match + loop rows stack their actions below the text instead of clipping. */
    .ch-match-row { flex-direction: column; align-items: stretch; }
    .ch-match-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* Very narrow (~360–480px): tighten further; keep everything in flow. */
@container chhub (max-width: 420px) {
    .ch-header, .ch-panel, .ch-container { padding-left: var(--ch-s3); padding-right: var(--ch-s3); }
    .ch-loop { flex-wrap: wrap; }
    .ch-loop .ch-select { width: 100%; }
}

/* Fallback for engines without container queries: mirror the key collapse by
   viewport so the panel still stacks (slightly less precise next to a sidebar). */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        #callHubTool.plugin-container.active { display: block; }
        .ch-container { display: block; grid-template-columns: minmax(0, 1fr); flex: none; min-height: 0; }
        .ch-list { flex: none; height: auto; max-height: 50vh; overflow-y: auto; }
        .ch-detail { height: auto; overflow: visible; }
        .ch-toolbar { flex-direction: column; align-items: stretch; }
        .ch-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
}

/* Row quick-actions (.ch-rowact, 26×26) and loop-row icon buttons are sized
   for a mouse cursor; bump them to the 44px touch-target minimum on coarse
   (touch) pointers. Row actions are absolutely positioned (see .ch-row-actions
   above), so growing them doesn't reflow the row; loop-row buttons sit in a
   flex row that already wraps at the 420px container query above. */
@media (pointer: coarse) {
    .ch-rowact, .ch-loop-del, .ch-loop-remind, .ch-loop-email {
        min-width: 44px; min-height: 44px;
    }
}