/* Design tokens (reference theme: "Zorvia Field Force"). Names are shared by chat, dashboard and the HITL card;
   the light values below are redefined for dark under the OS preference and under data-theme. */
:root {
  --bg: #f7f6f9;
  --surface: #ffffff;
  --border: #e6e2ec;
  --grid: #efecf3;
  --chip: #f2eff6;
  --text: #1d1a24;
  --text-muted: #565062;
  --text-subtle: #6f6a7a;  /* reference #857f90 darkened to reach 4.5:1 on the light surfaces (WCAG AA) */
  --accent: #5b2a86;
  --accent-hover: #4a2270;
  --accent-soft: #efe7f7;
  --on-accent: #ffffff;
  --vodo-orange: #f0821e;
  --vodo-gold: #f5b942;
  --danger: #d03b3b;
  --radius: 6px;       /* controls */
  --radius-lg: 8px;    /* cards, tiles */
  --radius-xl: 14px;
  --transition-fast: 0.18s;

  /* Easing curves: entering/appearing UI uses --ease-out; moving/resizing uses --ease-in-out. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;

  --shadow-sm: 0 1px 2px rgba(29, 26, 36, 0.06);
  --shadow-md: 0 8px 24px rgba(29, 26, 36, 0.12);

  /* Status palette (pills, banners): fixed steps, distinct from the chart series. */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  --status-good-bg: #e5f5e5;
  --status-warning-bg: #fff4dc;
  --status-critical-bg: #fbe6e6;
  --warn-ink: #946400;
  --good-ink: #0a7a0a;
  --crit-ink: #b42f2f;

  --font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Categorical data-viz palette (colour-blind safe); series take slots in fixed order; the accent is never a
     series colour. --viz-muted is the de-emphasised comparison series. */
  --viz-series-1: #2a78d6;
  --viz-series-2: #eb6834;
  --viz-series-3: #1baf7a;
  --viz-series-4: #eda100;
  --viz-series-5: #e87ba4;
  --viz-series-6: #008300;
  --viz-series-7: #4a3aa7;
  --viz-series-8: #e34948;
  --viz-muted: #bdb7c6;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131118;
    --surface: #1c1922;
    --border: #2e2a36;
    --grid: #25212c;
    --chip: #26222d;
    --text: #eeebf3;
    --text-muted: #b7b0c3;
    --text-subtle: #8b8497;
    --accent: #b894e0;
    --accent-hover: #cbb0ea;
    --accent-soft: #2c2338;
    --on-accent: #1c1922;
    --shadow-sm: none;
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --status-good-bg: #12301a;
    --status-warning-bg: #3a2e0e;
    --status-critical-bg: #3b1718;
    --warn-ink: #fab219;
    --good-ink: #4cc94c;
    --crit-ink: #f07b7b;
    --viz-series-1: #3987e5;
    --viz-series-2: #d95926;
    --viz-series-3: #199e70;
    --viz-series-4: #c98500;
    --viz-series-5: #d55181;
    --viz-series-6: #008300;
    --viz-series-7: #9085e9;
    --viz-series-8: #e66767;
    --viz-muted: #4f4a58;
    color-scheme: dark;
  }
}

/* An explicit in-app theme choice (data-theme) overrides the OS preference. */
:root[data-theme="dark"] {
  --bg: #131118;
  --surface: #1c1922;
  --border: #2e2a36;
  --grid: #25212c;
  --chip: #26222d;
  --text: #eeebf3;
  --text-muted: #b7b0c3;
  --text-subtle: #8b8497;
  --accent: #b894e0;
  --accent-hover: #cbb0ea;
  --accent-soft: #2c2338;
  --on-accent: #1c1922;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --status-good-bg: #12301a;
  --status-warning-bg: #3a2e0e;
  --status-critical-bg: #3b1718;
  --warn-ink: #fab219;
  --good-ink: #4cc94c;
  --crit-ink: #f07b7b;
  --viz-series-1: #3987e5;
  --viz-series-2: #d95926;
  --viz-series-3: #199e70;
  --viz-series-4: #c98500;
  --viz-series-5: #d55181;
  --viz-series-6: #008300;
  --viz-series-7: #9085e9;
  --viz-series-8: #e66767;
  --viz-muted: #4f4a58;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Keyboard focus ring for every interactive element. */
:is(button, a[href], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------- Buttons ----------------
   .btn is the bordered base, .btn-primary the filled accent variant, and
   .btn-icon a square icon-only control. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast) var(--ease-out),
              background-color var(--transition-fast) var(--ease-out),
              transform var(--transition-fast) var(--ease-out);
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary { /* explicit alias of the base style, for clarity when paired with .btn-primary */ }

.btn-icon {
  padding: var(--space-2);
  border-radius: 50%;
  line-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active:not(:disabled) { transform: none; }
}

/* ---------------- Topbar ---------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Narrow phones: the topbar's three groups (brand, tabs, utility icons)
   don't wrap by design (it should always read as one line), so tighten
   spacing/sizing instead so the utility icons never get pushed past the
   viewport edge. */
@media (max-width: 480px) {
  .topbar { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .tabs { gap: 0; }
  .tab-btn { padding: var(--space-2) var(--space-2); font-size: 0.82rem; }
  .topbar-right { gap: var(--space-1); }
  #sidebar-toggle, #theme-toggle { padding: var(--space-2); }
  /* A dev-only tool, already the quietest control in the bar -- dropped
     first when space is tight rather than crowding the primary controls. */
  #debug-toggle { display: none; }
}

.tabs {
  display: flex;
  gap: var(--space-1);
  flex: 1;
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;
}

.tab-btn:hover { background: var(--accent-soft); color: var(--text); }
.tab-btn.active { background: var(--accent); color: var(--on-accent); }

/* Underline tabs (dashboard sections and drill-down tabs): muted until active; the active tab carries a 2px accent
   rule. The strip scrolls sideways inside itself, never the page. */
.subtab-strip {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.subtab-strip::-webkit-scrollbar { display: none; }
.subtab-btn {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 8px 12px 10px;
  cursor: pointer;
  font: 600 14px/1.3 var(--font);
  white-space: nowrap;
  transition: color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.subtab-btn:hover { color: var(--text); }
.subtab-btn.active { color: var(--text); border-bottom-color: var(--accent); }

.dash-sections {
  position: sticky;
  top: var(--topbar-h, 57px);
  z-index: 5;
  background: var(--bg);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Topbar icon buttons; the debug toggle is deliberately quieter. */
#sidebar-toggle,
#theme-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color var(--transition-fast) ease, color var(--transition-fast) ease;
}
#sidebar-toggle:hover,
#theme-toggle:hover { border-color: var(--accent); color: var(--text); }

#debug-toggle {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: 0.8rem;
  opacity: 0.7;
  transition: opacity var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
#debug-toggle:hover { opacity: 1; border-color: var(--border); }

/* ---------------- Layout ---------------- */

main {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-5) 20px 48px;
}

/* The chat tab holds a sidebar + conversation column now -- it earns a
   wider stage than the dashboard's card/chart grids, which already
   reflow well at the original width and aren't being restructured. */
main:has(#tab-chat.active) {
  max-width: 1400px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.panel-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-4);
}

.panel-header h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

/* Dashboard header: eyebrow (period), title, one muted line (scope · data as-of). */
.dash-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.dash-subtitle { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; }

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------------- Dashboard filter bar ----------------
   Date range, Division > Zone > State > HQ > MR, and Brand in one row. */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-2);
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 0;
}

.filter-field input,
.filter-field select {
  padding: 5px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  max-width: 100%;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color var(--transition-fast) ease;
}
.filter-field input:focus,
.filter-field select:focus { outline: none; border-color: var(--accent); }

.filter-actions { display: flex; gap: var(--space-2); align-items: end; }

#dash-filter-load,
#dash-filter-reset {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast) ease, background-color var(--transition-fast) ease;
}
#dash-filter-load {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
#dash-filter-load:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
#dash-filter-reset:hover { border-color: var(--accent); }

.freshness-badge {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
}
.freshness-badge.hidden { display: none; }

/* Shared empty/error-state PRIMITIVE -- .chat-empty-state (below) and
   .dashboard-empty-state/.dashboard-error-state both add this class
   alongside their own, so the base look (centered, muted, consistent
   padding) is defined once instead of independently in two places. The
   two JS render functions (web/app.js:renderEmptyState,
   renderDashboardEmptyState/renderDashboardErrorState) stay separate --
   their copy and actions genuinely differ -- only the CSS is shared. */
.empty-state,
.error-state {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-5) var(--space-4);
}
.error-state .value { color: var(--status-critical); }

.dashboard-empty-state,
.dashboard-error-state {
  grid-column: 1 / -1;
}
.dashboard-retry-btn {
  margin-top: var(--space-2);
}

@media (max-width: 720px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-field input,
  .filter-field select { width: 100%; }
  .filter-actions > button { flex: 1; }
}

/* ---------------- Org-scope tree picker ----------------
   Shared "Excel-style" search + tri-state checkbox tree -- used by chat's
   HITL #1 interrupt bubble (web/app.js:renderOrgScopePicker /
   buildOrgScopeTree), rendered inline in the message, no popover wrapper
   of its own needed. The Dashboard's own scope selection now goes through
   the .filter-bar below instead. */

.org-scope-search {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  box-sizing: border-box;
  transition: border-color var(--transition-fast) ease;
}
.org-scope-search:focus {
  outline: none;
  border-color: var(--accent);
}

.org-scope-tree {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem;
  background: var(--bg);
}

.org-scope-node { margin: 0.1rem 0; }

.org-scope-node-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.25rem;
  border-radius: 6px;
  font-size: 0.82rem;
}

.org-scope-node-row:hover { background: var(--surface); }
.org-scope-node-row input { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.org-scope-node-row .org-scope-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-scope-node-row .org-scope-sublabel { color: var(--text-muted); font-size: 0.75rem; }

.org-scope-children { margin-left: 1.1rem; }
.org-scope-children.hidden { display: none; }

.panel-header button,
#dashboard-refresh {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color var(--transition-fast) ease;
}
.panel-header button:hover,
#dashboard-refresh:hover { border-color: var(--accent); }

/* ---------------- Chat layout: sidebar + main ---------------- */

.chat-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* Collapsing the sidebar (desktop) hands its column back to the chat --
   modern CSS already used elsewhere in this file (color-mix()), so :has()
   is consistent with the existing bar, not a new one. */
.chat-layout:has(.chat-sidebar.hidden) {
  grid-template-columns: 1fr;
}

/* No border -- a subtle background shift against the page (--surface vs
   --bg) plus generous internal spacing is enough to read as "a panel,"
   without adding another hard-edged box next to the conversation column. */
.chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  max-height: 78vh;
  overflow: hidden;
}
.chat-sidebar.hidden { display: none; }

.chat-sidebar-backdrop { display: none; }

/* Styled as the quiet, pinned first row of the list it sits above (same
   shape/hover language as .conversation-item just below), not as a
   distinct "button" competing with it -- no border, no fill; it should
   read as part of the sidebar's content, not chrome bolted onto it. */
.new-chat-btn {
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  flex-shrink: 0;
  text-align: left;
  transition: background-color var(--transition-fast) var(--ease-out), color var(--transition-fast) var(--ease-out);
}
.new-chat-btn:hover { background: var(--accent-soft); color: var(--accent); }

.conversation-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Quiet date-group header in the conversation list. */
.conversation-group-label {
  padding: 0.5rem 0.6rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.conversation-group-label:first-child { padding-top: 0.2rem; }

.conversation-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--ease-out);
}
.conversation-item:hover { background: var(--accent-soft); }
.conversation-item.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.conversation-item-body { flex: 1; min-width: 0; }
.conversation-item-title {
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversation-item-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.conversation-delete {
  opacity: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  flex-shrink: 0;
  transition: opacity var(--transition-fast) var(--ease-out), background-color var(--transition-fast) var(--ease-out), color var(--transition-fast) var(--ease-out);
}
.conversation-item:hover .conversation-delete { opacity: 1; }
.conversation-delete:hover { background: var(--danger); color: #fff; }
.conversation-delete:focus-visible { opacity: 1; }

.conversation-list-empty {
  padding: var(--space-3);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 720px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 82vw;
    max-height: none;
    z-index: 40;
    border-radius: 0;
    box-shadow: var(--shadow-md);
  }
  .chat-sidebar-backdrop:not(.hidden) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 39;
  }
}

/* Narrow screens: the chat column spans the viewport, so bubbles can use more of it. */
@media (max-width: 720px) {
  .msg.user { max-width: 88%; }
}

/* Phone-specific fine-tuning: iOS Safari auto-zooms the page on focusing
   any input/textarea with a computed font-size under 16px -- the
   composer's 0.92rem (~14.7px at a 16px root) triggers it. Also brings the
   send button and sidebar's touch targets (drawer is the only way to reach
   the conversation list at this width) up toward the ~44px minimum
   recommended touch-target size; desktop/tablet keep their existing
   sizing, this tier only. */
@media (max-width: 400px) {
  .chat-form textarea { font-size: 16px; }
  .chat-form button { width: 2.75rem; height: 2.75rem; }
  .new-chat-btn { padding: var(--space-3); }
  .conversation-item { padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3); }
}

/* ---------------- Chat ---------------- */

/* A centered, readable column (classic chat-app pattern) rather than
   stretching messages across the full width of the now-wider chat tab --
   the sidebar already reads as its own panel via background alone, so
   .chat-main deliberately does NOT get a matching bordered box; it's just
   the page. */
.chat-main {
  max-width: 48rem;
  margin: 0 auto;
  width: 100%;
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 55vh;
  max-height: 68vh;
  overflow-y: auto;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-3);
}

/* ---------------- Chat empty state ---------------- */

.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  min-height: 40vh;
}
.chat-empty-state-icon { font-size: 2rem; }
.chat-empty-state-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.chat-empty-state-subtitle {
  font-size: 0.88rem;
  max-width: 26rem;
  line-height: 1.5;
}
.chat-empty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}
.chat-empty-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition-fast) var(--ease-out), color var(--transition-fast) var(--ease-out);
}
.chat-empty-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Suggested follow-up question chip, styled like the empty-state chips. */
.follow-up-chip { margin-top: var(--space-3); }

/* Regenerate button and version navigation under an assistant bubble; revealed on hover
   or keyboard focus. */
.msg-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  opacity: 0;
  transition: opacity var(--transition-fast) var(--ease-out);
}
.msg.assistant:hover .msg-actions,
.msg-actions:focus-within {
  opacity: 1;
}
.msg-version-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.msg-version-label {
  min-width: 2.5em;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .msg-actions { transition: none; }
}

/* Full-width content rows, not chat bubbles -- ChatGPT-style: no colored
   fill on assistant messages, a subtle tinted block for user messages
   (distinct but not a loud, tailed bubble). Children (tables, cards,
   badges) keep their own definition regardless of this background. */
.msg {
  max-width: 100%;
  padding: var(--space-3) 0;
  line-height: 1.6;
  font-size: 0.92rem;
  white-space: normal;
}

.msg.user {
  align-self: flex-end;
  max-width: 78%;
  background: var(--accent-soft);
  color: var(--text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
}

.msg.assistant {
  align-self: stretch;
  color: var(--text);
}

/* Tables: a bounded scroll area with a sticky uppercase header, row rules in --grid, hover in --chip, numbers in
   the mono face, right-aligned (cells marked .num by renderTableBody). */
.table-wrap {
  margin: var(--space-3) 0;
  min-width: 0;
}
.table-scroll {
  overflow: auto;
  max-height: 440px;
  border-top: 1px solid var(--border);
}
.table-wrap.table-tall .table-scroll { max-height: 360px; }

.msg.assistant table, .table-wrap table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-2) 0;
  font-size: 13px;
}
.table-wrap table { margin: 0; }

.msg.assistant th, .msg.assistant td, .table-wrap th, .table-wrap td {
  padding: 7px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--grid);
}

.msg.assistant th, .table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.msg.assistant td.align-right, .msg.assistant th.align-right,
.table-wrap td.num, .table-wrap th.num { text-align: right; }
.msg.assistant td.align-center, .msg.assistant th.align-center { text-align: center; }
.table-wrap td.num { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.msg.assistant tbody tr:hover td, .table-wrap tbody tr:hover td { background: var(--chip); }

/* Sortable headers: the whole label is a button; aria-sort on the th drives the arrow. */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.th-sort:hover { color: var(--text); }
.sort-mark::after { content: "↕"; opacity: 0.35; font-size: 10px; }
th[aria-sort="ascending"] .sort-mark::after { content: "▲"; opacity: 1; }
th[aria-sort="descending"] .sort-mark::after { content: "▼"; opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--text); }

.msg.assistant img { max-width: 100%; border-radius: 6px; margin-top: 0.4rem; }
.msg.assistant a { color: var(--accent); }
.msg.assistant code { background: rgba(127,127,127,0.15); padding: 0 0.25rem; border-radius: 4px; }

/* Fixed report section headings (Executive Summary, Key Findings, Supporting
   Data, Business Insights, Recommendations, Chart Metadata) — kept visually
   distinct from the coverage engine's raw <h3> HTML (Profile/Brands/Slides). */
.msg.assistant h2.report-section {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1rem 0 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.msg.assistant h2.report-section:first-child { margin-top: 0; }

/* ---------------- HITL: chart-type picker ---------------- */

.chart-picker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}

.chart-result { margin-top: 0.5rem; }

/* ---------------- Chart marks: legend + tooltip + transitions ---------------- */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.chart-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.chart-legend-swatch.line {
  width: 14px;
  height: 0;
  border-radius: 0;
  border-top: 2px solid;
}
.chart-legend-swatch.line.forecast-dashed {
  border-top-style: dashed;
}

.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--text);
  color: var(--surface);
  font-size: 0.76rem;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  z-index: 20;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 0.1s ease;
  max-width: 220px;
  white-space: nowrap;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip .tt-value { font-weight: 700; }
.chart-tooltip .tt-context { color: var(--border); font-size: 0.7rem; }

.chart-box canvas:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chart-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  font-style: italic;
}

@keyframes chart-cross-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.chart-enter { animation: chart-cross-fade-in 0.16s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .chart-enter { animation: none; }
}

.reveal-block {
  animation: reveal-fade-in 0.28s cubic-bezier(.22,.61,.36,1);
}
@keyframes reveal-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Table rows stagger in after the table block itself has faded in — capped
   so a very long table doesn't keep visibly animating for seconds. */

.chart-picker { animation: reveal-fade-in 0.28s cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion: reduce) {
  .reveal-block, .chart-picker {
    animation: none;
  }
}

/* Catch-all for the two infinite-loop animations that predate a
   prefers-reduced-motion guard: .thinking-spinner (chat's "thinking…"
   indicator) and .skeleton-bar (Dashboard's loading shimmer). Both keep
   their static appearance -- a border/gradient still reads as "loading,"
   it just stops spinning/shimmering -- rather than disappearing outright. */
@media (prefers-reduced-motion: reduce) {
  .thinking-spinner, .skeleton-bar {
    animation: none;
  }
}

.thinking-indicator {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.thinking-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: thinking-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes thinking-spin {
  to { transform: rotate(360deg); }
}

.chat-form { display: flex; }

/* Pill-shaped elevated composer -- the textarea sits borderless inside it
   and grows in height via JS (autosizeChatInput), the send button is a
   circular icon button pinned to the trailing edge. The focus ring lives
   on this wrapper (via :focus-within) rather than the bare textarea so the
   whole surface reads as one control. */
.chat-composer {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: border-color var(--transition-fast) var(--ease-out), box-shadow var(--transition-fast) var(--ease-out);
}
.chat-composer:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-soft);
}

.chat-form textarea {
  flex: 1;
  resize: none;
  overflow-y: auto;
  max-height: 160px;
  padding: var(--space-2) 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
}
.chat-form textarea:focus { outline: none; }

.chat-form button {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--ease-out),
              transform var(--transition-fast) var(--ease-out);
}
.chat-form button:hover:not(:disabled) { background: var(--accent-hover); }
.chat-form button:active:not(:disabled) { transform: scale(0.97); }
.chat-form button:disabled { opacity: 0.5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .chat-form button { transition: background-color var(--transition-fast) var(--ease-out); }
  .chat-form button:active:not(:disabled) { transform: none; }
}

/* ---------------- Chat context chip (dashboard->chat entity link) ---------------- */

.context-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.5rem 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
}
.context-chip.hidden { display: none; }

/* ---------------- Dashboard ---------------- */

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: var(--space-5);
}

/* Cards and KPI tiles: panel surface, 1px border, 8px radius, the light shadow (none in dark). */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.card .label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.card .value {
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.card .sublabel {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .card .value { font-size: 21px; }
}

/* Skeleton shimmer shown in place of KPI cards while dashboard data is in
   flight, instead of a static "Loading…" card. */
.card.loading { display: flex; flex-direction: column; gap: var(--space-2); }
.skeleton-bar {
  height: 0.7rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, var(--accent-soft) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-bar-label { width: 45%; }
.skeleton-bar-value { width: 65%; height: 1.1rem; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 16px;
}

/* Drill-down: the detail tabs and their table share one card below the charts. */
.drilldown-card { margin-top: var(--space-5); padding: 4px 18px 8px; }
.drilldown-card.hidden { display: none; }
.drilldown-strip { margin-bottom: 0; }

/* "What needs attention": pill, what and why, and a link to the section holding the detail. */
.flags { list-style: none; margin: 0; padding: 0; }
.flags li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--grid);
}
.flags li:last-child { border-bottom: 0; }
.flag-title { font-weight: 600; }
.flag-detail { color: var(--text-muted); font-size: 13.5px; }
.flag-link {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--accent);
  font: 500 12px/1.4 var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.flag-link:hover { border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 480px) {
  .flags li { grid-template-columns: auto minmax(0, 1fr); }
  .flag-link { grid-column: 2; justify-self: start; }
}

/* ---------------- Table pagination ---------------- */

.table-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.table-pager button {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.82rem;
  transition: border-color var(--transition-fast) ease;
}
.table-pager button:hover:not(:disabled) { border-color: var(--accent); }
.table-pager button:disabled { opacity: 0.4; cursor: not-allowed; }

.chart-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  position: relative; /* anchors .chart-tooltip */
}

.chart-box h3 {
  margin: 0 0 var(--space-3);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  text-wrap: balance;
}

/* The card's one-sentence takeaway, from the report's deterministic findings (never the LLM). */
.chart-read { margin: -6px 0 12px; font-size: 14px; color: var(--text-muted); }
.chart-read b { color: var(--text); font-weight: 600; }

.chart-box canvas { width: 100%; height: 290px; display: block; }
@media (max-width: 640px) { .chart-box canvas { height: 250px; } }

/* ---------------- Debug panel ---------------- */

.debug-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  height: 45vh;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius) 0 0 0;
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: -2px -2px 12px rgba(0,0,0,0.15);
}

.debug-panel.hidden { display: none; }

.debug-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
}

.debug-header span { flex: 1; }
.debug-header button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
}

.debug-log {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  font-family: "SF Mono", Consolas, Monaco, monospace;
  font-size: 0.72rem;
}

.debug-entry {
  border-bottom: 1px dashed var(--border);
  padding: 0.35rem 0;
}

.debug-entry .meta {
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

.debug-entry pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0.2rem 0 0;
}

.debug-entry.error .meta { color: var(--danger); }

/* Structured analytical report */
.kpi-cards { margin: 0.6rem 0 1rem; }

.table-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.export-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  white-space: nowrap;
}
.export-link:hover { text-decoration: underline; }

.report-paragraph { line-height: 1.5; margin: 0.4rem 0 0.8rem; }

.report-bullet-list {
  margin: 0.3rem 0 0.9rem;
  padding-left: 1.3rem;
}
.report-bullet-list li { margin: 0.25rem 0; line-height: 1.45; }

.status-notice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0;
  font-size: 0.88rem;
}

/* Live per-step progress panel (streamed chat responses) -- see
   dispatchChatEvent/renderLiveStep/collapseLiveSteps in app.js. */
.live-steps-panel { margin: 0 0 0.4rem; }
.live-step {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.15rem 0;
}
.live-steps-collapsed {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.live-steps-collapsed summary {
  cursor: pointer;
  color: var(--accent);
  list-style: none;
}
.live-steps-collapsed summary::-webkit-details-marker { display: none; }
.live-steps-collapsed[open] summary { margin-bottom: 0.3rem; }
.live-steps-collapsed .live-step { padding-left: 0.2rem; }

/* Status pills: a dot plus text on the status background (never colour alone). */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.badge-good { background: var(--status-good-bg); color: var(--good-ink); }
.status-badge.badge-warn { background: var(--status-warning-bg); color: var(--warn-ink); }
.status-badge.badge-crit { background: var(--status-critical-bg); color: var(--crit-ink); }

/* ---------------------------------------------------------------------
   KPI evidence, freshness, drill-down.
   Built from the existing tokens and status-badge palette (docs/DESIGN.md).
   --------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.card { position: relative; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }

.kpi-info { flex: none; }
.kpi-info > summary {
  list-style: none; cursor: pointer; width: 1.25rem; height: 1.25rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted); font-size: 0.72rem; font-weight: 600;
  font-style: italic; display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.kpi-info > summary::-webkit-details-marker { display: none; }
.kpi-info > summary:hover, .kpi-info[open] > summary { color: var(--accent); border-color: var(--accent); }
.kpi-info > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-info-body {
  position: absolute; z-index: 20; top: calc(100% - var(--space-2)); left: 0; width: min(20rem, calc(100vw - 2rem));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-3); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16); font-size: 0.78rem; text-align: left;
}
.kpi-info-definition { margin: 0 0 var(--space-2); color: var(--text); line-height: 1.4; }
.kpi-info-body dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem var(--space-3); margin: 0; }
.kpi-info-body dt { color: var(--text-muted); }
.kpi-info-body dd { margin: 0; color: var(--text); overflow-wrap: break-word; }
.kpi-info-body.align-end { left: auto; right: 0; }

.freshness-badge.freshness-stale { color: var(--warn-ink); }
.freshness-badge.freshness-expired { color: var(--status-critical); font-weight: 600; }
.freshness-banner {
  margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  font-size: 0.85rem; border: 1px solid var(--status-warning); background: var(--status-warning-bg); color: var(--warn-ink);
}
.freshness-banner-expired { border-color: var(--status-critical); background: var(--status-critical-bg); color: var(--status-critical); }
.freshness-banner.hidden { display: none; }

.chart-hint, .forecast-meta p { font-size: 0.78rem; color: var(--text-muted); margin: var(--space-2) 0 0; }
.export-links { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.export-links .export-link { margin-left: var(--space-1); }
.kpi .sublabel::first-letter { text-transform: uppercase; }

/* ---------------------------------------------------------------------
   HITL decision card (web/hitl.js): one clean decision step inside the
   assistant bubble — title, context line, option groups, one primary action.
   --------------------------------------------------------------------- */

.hitl-card {
  max-width: 640px;
  margin: var(--space-2) 0 var(--space-3);
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.hitl-title { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--text); }
.hitl-context { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }
.hitl-groups { display: grid; gap: 14px; margin-top: 14px; }

.hitl-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.hitl-group[hidden] { display: none; }
.hitl-legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.hitl-hint { margin: -2px 0 6px; font-size: 12.5px; color: var(--text-subtle); }

.hitl-options { display: flex; flex-wrap: wrap; gap: 6px; }
.hitl-options-scroll { max-height: 220px; overflow-y: auto; padding: 2px; }
.hitl-search {
  width: 100%;
  margin-bottom: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.hitl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  max-width: 100%;
  padding: 5px 12px;
  font: 500 14px/1.3 var(--font);
  color: var(--text);
  background: var(--chip);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
  transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.hitl-chip:hover { border-color: var(--border); }
.hitl-chip[hidden] { display: none; }
.hitl-chip-mark {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--text-subtle);
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
}
.hitl-chip[role="radio"] .hitl-chip-mark { border-radius: 50%; }
.hitl-chip.is-selected { background: var(--accent-soft); border-color: var(--accent); }
.hitl-chip.is-selected .hitl-chip-mark { border-color: var(--accent); background: var(--accent); }
.hitl-chip.is-selected .hitl-chip-mark::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: inherit;
  background: var(--on-accent);
}
.hitl-chip[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.hitl-date-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hitl-date-field { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-muted); }
.hitl-date-field input {
  padding: 5px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.hitl-tree-host { max-height: 280px; overflow-y: auto; }
.hitl-loading, .hitl-error { margin: 0; font-size: 13px; color: var(--text-muted); }

.hitl-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.hitl-status { margin: 0; font-size: 13px; color: var(--text-muted); min-height: 1em; }
.hitl-card[data-state="error"] .hitl-status { color: var(--status-critical); }
.hitl-actions { display: flex; gap: 8px; margin-left: auto; }
.hitl-btn {
  min-height: 34px;
  padding: 6px 16px;
  font: 600 14px/1.2 var(--font);
  border-radius: var(--radius);
  cursor: pointer;
}
.hitl-btn-primary { color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); }
.hitl-btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.hitl-btn-secondary { color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.hitl-btn-secondary:hover:not(:disabled) { border-color: var(--accent); }
.hitl-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.hitl-btn[aria-busy="true"] { cursor: progress; }

.hitl-card.hitl-collapsed { padding: 8px 12px; box-shadow: none; background: var(--chip); border-color: transparent; }
.hitl-summary { margin: 0; font-size: 13px; color: var(--text-muted); }

@media (max-width: 720px) {
  .hitl-card { max-width: none; }
  .hitl-chip, .hitl-btn { min-height: 44px; }
  .hitl-actions { width: 100%; }
  .hitl-actions .hitl-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}