/* Winston V3 — floating "Ask Winston" chip + popover.
   Mounted on every screen except #manager. */

/* ── The chip itself ──────────────────────────────────────────────── */

.winston-chip {
  position: fixed;
  right: var(--space-5);
  /* Desktop default — clear last-action-footer + breathing gap. */
  bottom: calc(var(--last-action-footer-h) + var(--space-5));
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ai);
  border-radius: var(--radius-full);
  background: var(--ai);
  color: var(--ink-inverse);
  font-family: inherit;
  font-size: var(--type-sm);
  font-weight: var(--weight-semi);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
  transition: transform 120ms ease, box-shadow 120ms ease,
              background 120ms ease, right 160ms ease;
}
.winston-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12);
}
.winston-chip:active { transform: translateY(0); }
.winston-chip:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 2px;
}
.winston-chip-glyph {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.winston-chip-glyph svg, .winston-chip-glyph .lucide { width: 16px; height: 16px; }
.winston-chip-label {
  white-space: nowrap;
}
.winston-chip.is-open {
  background: var(--ink);
  border-color: var(--ink);
}

/* #167b — Hide the chip whenever the panel is open, on every viewport.
   Having both visible at once is redundant and visually noisy; the chip's
   only job is to OPEN the panel. The panel's own ✕ close button (wired
   to the same close() handler) becomes the close affordance once open.
   Previously the desktop variant shifted the chip left of the dock — that
   left two click targets doing almost the same thing. */
html.winston-chip-open .winston-chip { display: none !important; }

/* Below the inline-dock breakpoint the bottom-nav is present (sidebar is
   gone), so anchor the chip above it via the canonical token. Boundary
   matches the dock↔sheet gate in layout.css. Single source of truth so
   any future fixed bottom element reads the same value (build review
   B-H1 / B-M9). */
@media (max-width: 1023px) {
  .winston-chip {
    bottom: calc(var(--bottom-stack-h) + var(--space-3));
    right: var(--space-4);
    padding: var(--space-3);
  }
}
/* Tighten to icon-only on the narrowest viewports so the chip never
   dwarfs the visible content underneath. */
@media (max-width: 768px) {
  .winston-chip-label { display: none; }
}

/* ── Backdrop ─────────────────────────────────────────────────────── */

.winston-chip-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.0);
  pointer-events: auto;
}
/* The HTML `hidden` attribute has lower specificity than our class
   rules below, so an explicit override is required to keep the chip
   panel/backdrop offscreen until opened. */
.winston-chip-backdrop[hidden],
.winston-chip-panel[hidden],
.winston-chip[hidden] { display: none !important; }

/* H2: the inline dock floats freely — no backdrop, click-outside to
   close is wired in JS. Below the dock breakpoint (≤1023px) the panel is
   a bottom sheet, so it keeps the dim backdrop to read as modal. */
@media (min-width: 1024px) {
  .winston-chip-backdrop { display: none !important; }
}
/* Sheet viewports go fully opaque-ish so the sheet reads as modal. */
@media (max-width: 1023px) {
  .winston-chip-backdrop {
    background: rgba(0, 0, 0, 0.45);
  }
}

/* ── Panel — docked inline on desktop, bottom-sheet on mobile ─────── */

/* Desktop default: the panel fills the chat-dock grid cell that
   layout.css carves out when `html.winston-chip-open` is set. No
   position:fixed and no overlay — the content column reflows to make
   room (Slack / Teams style). */
.winston-chip-panel {
  width: 100%;
  height: 100%;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: winston-chip-slide 160ms ease both;
}
@keyframes winston-chip-slide {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Below the dock breakpoint (≤1023px): the chat-dock <aside> is
   display:none (no inline grid column), so the panel is mounted into
   <body> instead and behaves as a bottom sheet — the only viable chat
   surface once the sidebar collapses. Boundary matches winston-chip.js
   `SHEET_MQ` + the dock gate in layout.css. */
@media (max-width: 1023px) {
  .winston-chip-panel {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    /* dvh fallback chain — see layout.css dock note. On a touch browser
       82vh is 82% of the *toolbar-hidden* viewport, taller than what's
       actually visible, so the sheet's bottom (composer) hides under the
       URL bar; dvh keeps it inside the live viewport. */
    height: 82vh;
    height: 82dvh;
    z-index: 68;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: winston-chip-sheet 180ms ease both;
  }
  @keyframes winston-chip-sheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* ── chat-panel module — base + compact (chip) variant styling ───── */

/* Base: any .chat-panel mount fills its parent and stacks its children
   vertically. The Manager screen wraps it in a flex-column .chat-wrap
   (see screens/manager.css), so the panel inherits the fixed height
   that lets the inner thread scroll independently of the page. */
.chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-panel.is-compact {
  background: var(--surface);
}

/* Chip variant — rearrange children so the conversation (thread) sits
   immediately under the head and the action chrome (composer + toolbar
   + suggestions) collects at the bottom. The HTML order is fixed
   (chat-panel.js renders one template for both variants), so the chip
   variant uses flex `order` to relocate the chrome without touching the
   Manager-screen layout. */
.chat-panel.is-compact .chat-panel-head    { order: 0; }
.chat-panel.is-compact .chat-thread        { order: 1; }
.chat-panel.is-compact .chat-history-list  { order: 2; }
.chat-panel.is-compact .chat-attachments   { order: 3; }
.chat-panel.is-compact .chat-composer      { order: 4; }
.chat-panel.is-compact .chat-toolbar       { order: 5; }
.chat-panel.is-compact .chat-suggestions   { order: 6; }

/* Header — kit-match persona identity (✦ avatar + "Winston") + close;
   Chat/History tabs only when showHistoryTab is set (chip uses the
   toolbar 🕘 picker instead, so its head is the clean kit shape). */
.chat-panel.is-compact .chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.chat-panel.is-compact .chat-panel-ident {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.chat-panel.is-compact .chat-ident-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ai);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-panel.is-compact .chat-ident-avatar svg,
.chat-panel.is-compact .chat-ident-avatar .lucide { width: 15px; height: 15px; }
.chat-panel.is-compact .chat-ident-name {
  font-weight: 700;
  font-size: var(--type-md);
}
.chat-panel.is-compact .chat-panel-close { margin-left: auto; }
.chat-panel.is-compact .chat-view-tabs {
  display: flex;
  gap: var(--space-1);
}
.chat-panel.is-compact .chat-view-tab {
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.chat-panel.is-compact .chat-view-tab:hover { color: var(--ink); }
.chat-panel.is-compact .chat-view-tab.is-active {
  color: var(--ai);
  border-bottom-color: var(--ai);
}
.chat-panel.is-compact .chat-panel-close {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.chat-panel.is-compact .chat-panel-close:hover {
  background: var(--surface);
  color: var(--ink);
}

/* Toolbar — chip variant collapses labels on narrow widths. */
.chat-panel.is-compact .chat-toolbar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  flex-wrap: wrap;
}
.chat-panel.is-compact .chat-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.chat-panel.is-compact .chat-tool-btn:hover {
  background: var(--bg);
  border-color: var(--ink-muted);
  color: var(--ink);
}
.chat-panel.is-compact .chat-tool-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.chat-panel.is-compact .chat-tool-btn-primary {
  background: var(--ai);
  border-color: var(--ai);
  color: #fff;
  font-weight: var(--weight-semi);
}
.chat-panel.is-compact .chat-tool-btn-primary:hover {
  background: var(--ai-2);
  border-color: var(--ai-2);
  color: #fff;
}
.chat-panel.is-compact .chat-tool-btn-primary .chat-tool-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  opacity: 0.85;
}
.chat-panel.is-compact .chat-tool-btn-primary.is-running .chat-tool-dot {
  animation: chat-tool-pulse 1s ease-in-out infinite;
}

/* System Test bubble — incrementally populated by runSystemTest() as
   the NDJSON stream lands. Scoped to .chat-panel so both Manager-tab
   and chip-dock variants render identically. */
.chat-panel .chat-system-test {
  align-self: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-2) 0;
  font-size: var(--type-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chat-panel .chat-system-test[data-state="pass"] { border-color: var(--status-ok); }
.chat-panel .chat-system-test[data-state="warn"] { border-color: var(--status-warn); }
.chat-panel .chat-system-test[data-state="fail"] { border-color: var(--status-err); }

.chat-panel .sys-test-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.chat-panel .sys-test-title {
  font-weight: var(--weight-semi);
  color: var(--ink);
  font-size: var(--type-sm);
}
.chat-panel .sys-test-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--type-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #fff;
  background: var(--status-idle);
}
.chat-panel .sys-test-badge[data-state="running"] { background: var(--ai); }
.chat-panel .sys-test-badge[data-state="pass"]    { background: var(--status-ok); }
.chat-panel .sys-test-badge[data-state="warn"]    { background: var(--status-warn); }
.chat-panel .sys-test-badge[data-state="fail"]    { background: var(--status-err); }

.chat-panel .sys-test-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-panel .sys-test-cat {
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--space-2);
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--border);
}
.chat-panel .sys-test-cat:first-child { margin-top: 0; }

.chat-panel .sys-test-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  font-size: var(--type-xs);
  line-height: 1.35;
}
.chat-panel .sys-test-row-main {
  display: grid;
  grid-template-columns: 16px auto 1fr auto;
  align-items: baseline;
  gap: 6px;
}
.chat-panel .sys-test-icon {
  font-weight: bold;
  text-align: center;
}

/* Detail block — always rendered under non-OK rows so the operator can
   see exactly what's broken without leaving the bubble. Keyed by the
   detail dict from system_test.py's check results. */
.chat-panel .sys-test-detail {
  margin-left: 22px;
  padding: 6px 10px;
  background: var(--bg-soft);
  border-left: 2px solid var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--ink-muted);
}
.chat-panel .sys-test-detail-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
  align-items: baseline;
}
.chat-panel .sys-test-detail-key {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 10px;
  color: var(--ink-muted);
}
.chat-panel .sys-test-detail-val {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.chat-panel .sys-test-row.is-critical .sys-test-detail {
  border-left-color: var(--status-err);
}
.chat-panel .sys-test-row.is-warning  .sys-test-detail {
  border-left-color: var(--status-warn);
}
.chat-panel .sys-test-row.is-unknown  .sys-test-detail {
  border-left-color: var(--status-idle);
}

/* Per-unit drill-down inside systemd_units detail */
.chat-panel .sys-test-detail-unit {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 10px;
  padding: 1px 0;
}
.chat-panel .sys-test-detail-unit-name {
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.chat-panel .sys-test-detail-unit-state {
  color: var(--ink-muted);
}
.chat-panel .sys-test-detail-unit-state.is-red    { color: var(--status-err); }
.chat-panel .sys-test-detail-unit-state.is-amber  { color: var(--status-warn); }
.chat-panel .sys-test-detail-unit-group {
  font-size: 9px;
}
.chat-panel .sys-test-row.is-ok       .sys-test-icon { color: var(--status-ok); }
.chat-panel .sys-test-row.is-warning  .sys-test-icon { color: var(--status-warn); }
.chat-panel .sys-test-row.is-critical .sys-test-icon { color: var(--status-err); }
.chat-panel .sys-test-row.is-skipped  .sys-test-icon { color: var(--status-idle); }
.chat-panel .sys-test-row.is-unknown  .sys-test-icon { color: var(--status-idle); }

.chat-panel .sys-test-name {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: 11px;
}
.chat-panel .sys-test-summary-text {
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.chat-panel .sys-test-row.is-critical .sys-test-summary-text { color: var(--status-err); }
.chat-panel .sys-test-row.is-warning  .sys-test-summary-text { color: var(--ink); }
.chat-panel .sys-test-elapsed {
  color: var(--ink-muted);
  font-size: 10px;
  white-space: nowrap;
}

.chat-panel .sys-test-summary {
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.chat-panel .sys-test-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--type-xs);
}
.chat-panel .sys-test-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}
.chat-panel .sys-test-count.is-pass    { color: var(--status-ok); }
.chat-panel .sys-test-count.is-warn    { color: var(--status-warn); }
.chat-panel .sys-test-count.is-fail    { color: var(--status-err); }
.chat-panel .sys-test-count.is-unknown { color: var(--ink-muted); }
.chat-panel .sys-test-count.is-skip    { color: var(--ink-muted); }
.chat-panel .sys-test-count.is-meta    { color: var(--ink-muted); margin-left: auto; }
.chat-panel .sys-test-paused {
  color: var(--warn);
  font-size: var(--type-xs);
  font-style: italic;
}

/* Suggested-prompts strip. */
.chat-panel .chat-suggestions {
  padding: var(--space-3) var(--space-3) 0;
  border-bottom: 1px dashed var(--border);
  padding-bottom: var(--space-3);
  background: var(--bg-soft);
}
/* Chip variant places suggestions at the bottom (see flex `order`
   block below), so the divider sits above the chips, not below. */
.chat-panel.is-compact .chat-suggestions {
  border-bottom: 0;
  border-top: 1px dashed var(--border);
}
.chat-panel .chat-suggestions-label {
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.chat-panel .chat-suggestions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chat-panel .chat-suggestion-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-xs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  line-height: 1.3;
}
.chat-panel .chat-suggestion-chip:hover {
  border-color: var(--ai);
  color: var(--ai);
}

/* Thread + composer for the chip variant — re-use the shape established
   by #screen-manager .chat-* rules but scope under .chat-panel.is-compact
   so the chip can size independently of the Manager-screen card. */
.chat-panel.is-compact .chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}
.chat-panel.is-compact .chat-bubble {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--type-sm);
  line-height: var(--leading-snug);
  word-wrap: break-word;
}
.chat-panel.is-compact .chat-bubble[data-from="user"] {
  align-self: flex-end;
  background: var(--ai);
  color: var(--ink-inverse);
  border-bottom-right-radius: var(--radius-xs);
}
.chat-panel.is-compact .chat-bubble[data-from="winston"] {
  align-self: flex-start;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-xs);
}
.chat-panel.is-compact .chat-bubble[data-from="system"] {
  align-self: center;
  font-size: var(--type-xs);
  color: var(--ink-muted);
  background: transparent;
}
.chat-panel.is-compact .chat-time {
  display: block;
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* #167a — Copy button on Winston bubbles. Hover-revealed on desktop so
   the bubble stays clean when the operator is reading; always visible on
   mobile since hover doesn't exist there. */
.chat-bubble[data-from="winston"] { position: relative; }
.chat-bubble-copy {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.chat-bubble[data-from="winston"]:hover .chat-bubble-copy,
.chat-bubble-copy:focus-visible {
  opacity: 0.8;
}
.chat-bubble-copy:hover {
  background: var(--surface);
  color: var(--ink);
  opacity: 1;
}
.chat-bubble-copy.is-copied {
  opacity: 1;
  color: var(--money-up);
}
.chat-bubble-copy.is-copied::after {
  content: " ✓";
}
@media (max-width: 768px), (hover: none) {
  .chat-bubble-copy { opacity: 0.6; }
}

/* #160 M10 — "from memory" trust badge on Winston bubbles that cite Brain.
   Always visible (not hover-revealed): the badge IS the trust signal.
   `◈` glyph reuses the Winston Brain mark from architecture/brain.md. */
.chat-brain-badge {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ai);
  background: var(--ai-soft);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  cursor: help;
}

.chat-panel.is-compact .chat-composer {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--surface);
  align-items: flex-end;
}
.chat-panel.is-compact .chat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--type-sm);
  background: var(--surface);
  color: var(--ink);
  line-height: var(--leading-snug);
  max-height: 120px;
}
.chat-panel.is-compact .chat-input:focus {
  outline: 2px solid var(--ai);
  outline-offset: -1px;
}
.chat-panel.is-compact .chat-send {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-sm);
}
.chat-panel.is-compact .chat-send-kbd {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.7;
}

/* Attachments tray. */
.chat-panel.is-compact .chat-attachments {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.chat-panel.is-compact .chat-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 4px 2px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--type-xs);
  max-width: 200px;
}
.chat-panel.is-compact .chat-attach-thumb {
  width: 24px; height: 24px; object-fit: cover; border-radius: var(--radius-sm); display: block;
}
.chat-panel.is-compact .chat-attach-fileicon {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--surface-2, var(--surface)); font-size: 14px;
}
.chat-panel.is-compact .chat-attach-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-panel.is-compact .chat-attach-remove {
  border: 0; background: transparent; color: var(--ink-muted);
  font-size: 14px; line-height: 1; padding: 0 4px; cursor: pointer;
}

/* History list — replaces the chat thread when the History tab is active. */
.chat-panel.is-compact .chat-history-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
  min-height: 0;
}

/* Action cards in the chip — keep them tidy in the narrower width. */
.chat-panel.is-compact .action-card {
  align-self: stretch;
  margin: var(--space-1) 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ai);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chat-panel.is-compact .action-card[data-resolved] { border-left-color: var(--border); }
.chat-panel.is-compact .action-card[data-resolved="applied"]  { border-left-color: var(--money-up); }
.chat-panel.is-compact .action-card[data-resolved="rejected"] { border-left-color: var(--money-down); opacity: 0.7; }
.chat-panel.is-compact .action-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.chat-panel.is-compact .action-verb {
  font-size: var(--type-xs); font-weight: var(--weight-semi); color: var(--ink-2);
}
.chat-panel.is-compact .action-risk,
.chat-panel.is-compact .action-resolved {
  font-size: 10px; font-weight: var(--weight-semi); letter-spacing: var(--tracking-wide);
  padding: 2px 8px; border-radius: var(--radius-full);
}
.chat-panel.is-compact .action-risk[data-risk="loading"]  { background: var(--surface-3); color: var(--ink-muted); }
.chat-panel.is-compact .action-risk[data-risk="low"]      { background: var(--money-up-soft); color: var(--money-up); }
.chat-panel.is-compact .action-risk[data-risk="medium"]   { background: var(--warn-soft); color: var(--warn); }
.chat-panel.is-compact .action-risk[data-risk="high"]     { background: var(--money-down-soft); color: var(--money-down); }
.chat-panel.is-compact .action-risk[data-risk="unknown"]  { background: var(--surface-3); color: var(--ink-muted); }
.chat-panel.is-compact .action-resolved[data-tone="applied"]  { background: var(--money-up-soft);   color: var(--money-up); }
.chat-panel.is-compact .action-resolved[data-tone="rejected"] { background: var(--money-down-soft); color: var(--money-down); }
.chat-panel.is-compact .action-resolved[data-tone="deferred"] { background: var(--surface-3);       color: var(--ink-muted); }
.chat-panel.is-compact .action-card-rationale { font-size: var(--type-xs); color: var(--ink); }
.chat-panel.is-compact .action-card-preview {
  font-size: var(--type-xs); color: var(--ink-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-soft); border-radius: var(--radius-sm);
}
.chat-panel.is-compact .action-card-actions {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.chat-panel.is-compact .action-card-actions .btn { padding: 4px 10px; font-size: var(--type-xs); }