/*
 * Agent Chat — shared stylesheet
 * Extracted from Agent-OS public/index.html
 * Part of the Agent App shared chat module (v0.1.0)
 * Do not edit directly; source of truth is .agent-chat-extraction/CONTRACT.md
 */

/* === CSS variable fallbacks ===
 * Host should define these on :root; these fallbacks ensure the module still renders
 * if the host forgets. Host values override automatically.
 */
:root {
  --bg:        var(--bg,        #0d1117);
  --bg1:       var(--bg1,       #0a0f14);
  --bg2:       var(--bg2,       #161b22);
  --bg3:       var(--bg3,       #21262d);
  --hover:     var(--hover,     #1b2129);
  --border:    var(--border,    #30363d);
  --text:      var(--text,      #e6edf3);
  --text2:     var(--text2,     #8b949e);
  --accent:    var(--accent,    #58a6ff);
  --accent-rgb:var(--accent-rgb,88, 166, 255);
  --green:     var(--green,     #3fb950);
  --yellow:    var(--yellow,    #d29922);
  --orange:    var(--orange,    #f0883e);
  --red:       var(--red,       #f85149);
  --purple:    var(--purple,    #a371f7);
  --blue:      var(--blue,      #79c0ff);
  --cyan:      var(--cyan,      #5ccfe6);
  --header-h:  var(--header-h,  32px);
  --panel-shadow: var(--panel-shadow, -8px 0 26px rgba(0,0,0,0.32));
  /* v0.2.8: typography tokens joined the contract. 24 rules below already said
     font-family:var(--font); with no fallback that is invalid-at-computed-value,
     which silently inherits instead of resolving. Matrix defines --sans, not
     --font, so it was relying on that accident. Declaring fallbacks here changes
     nothing for hosts that set --font (VLC, agent-os) and makes the widget
     self-sufficient for hosts that don't. */
  --font:      var(--font,      -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
  --font-mono: var(--font-mono, ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace);
}

/* === Chat module owns these === */
:root {
  --chat-default-w: 400px;
  --detail-panel-w: clamp(320px, 28vw, 380px);
}

/* === CORE: chat-panel container ================================== */
/* Chat panel — fixed floating, draggable, collapsible on the right */
/* §0.1: chat is a floating overlay anchored bottom-right. Default height is
   capped so it doesn't cover the host's typical top-bar / toolbar area
   (~280px reserved at top). Host can override --chat-top-reserve to tune. */
.chat-panel { position:fixed; right:12px; top:auto; bottom:12px; width:var(--chat-default-w); height:min(720px, calc(100vh - var(--chat-top-reserve, 280px))); z-index:120; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--border); box-shadow:var(--panel-shadow); border-radius:8px; transition:none; overflow:hidden; }
.chat-panel.detail-open { border-top-left-radius:0; border-bottom-left-radius:0; }
.chat-panel.floating { border-radius:8px; height:auto; bottom:auto; resize:both; overflow:hidden; min-height:300px; min-width:300px; max-width:min(96vw, 1400px); max-height:96vh; }
/* v0.2.4 maximize: near-fullscreen pin. Stylesheet !important beats the inline
   left/top a drag wrote, so the pre-maximize spot survives untouched underneath
   — restore = remove the class. Drag & CSS-resize disabled while maximized. */
.chat-panel.maximized { position:fixed; inset:16px !important; width:auto !important; height:auto !important;
  max-width:none !important; max-height:none !important; min-width:0; min-height:0; resize:none !important; z-index:10021; }
.chat-max-btn { font-size:13px; line-height:1; }
.chat-panel.collapsed .chat-max-btn { display:none !important; }
.chat-resize-handle { position:absolute; left:-3px; top:0; bottom:0; width:6px; cursor:col-resize; z-index:121; }
.chat-resize-handle:hover, .chat-resize-handle.dragging { background:var(--accent); opacity:0.3; }
.chat-panel.collapsed { width:150px !important; min-width:150px; height:52px !important; min-height:52px; max-height:52px; background:linear-gradient(135deg, rgba(19,26,37,0.98) 0%, rgba(12,18,27,0.98) 58%, rgba(16,34,48,0.96) 100%); border:1px solid rgba(88,166,255,0.42); box-shadow:0 18px 44px rgba(0,0,0,0.46), 0 0 0 1px rgba(88,166,255,0.08), 0 0 24px rgba(88,166,255,0.12); overflow:visible; resize:none; border-radius:18px; z-index:10020; }
.chat-panel.collapsed .chat-messages, .chat-panel.collapsed .chat-input-area, .chat-panel.collapsed .conv-tabs, .chat-panel.collapsed .chat-search, .chat-panel.collapsed .chat-resize-handle, .chat-panel.collapsed .chat-actions, .chat-panel.collapsed .chat-context-strip, .chat-panel.collapsed .runtime-chat-card-stack { display:none !important; }
.chat-panel.collapsed .chat-header { writing-mode:horizontal-tb; text-orientation:initial; width:150px; height:52px; padding:0; cursor:pointer; justify-content:center; align-items:center; border-bottom:none; background:transparent; }
.chat-panel.collapsed .chat-header>*:not(.chat-collapse-btn) { display:none; }
.chat-panel.collapsed .chat-collapse-btn { position:relative; writing-mode:horizontal-tb; width:150px; height:52px; padding:0 16px; justify-content:flex-start; gap:10px; border-radius:18px; border:0; background:transparent; box-shadow:none; color:#dff4ff; font-size:13px; font-weight:800; letter-spacing:0; overflow:hidden; backdrop-filter:blur(10px); transition:transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.chat-panel.collapsed .chat-collapse-btn:hover { transform:translateY(-1px); box-shadow:0 0 26px rgba(88,166,255,0.18); color:#f2fbff; }
.chat-panel.collapsed .chat-collapse-arrow { display:none; }
.chat-panel.collapsed .chat-collapse-badge { display:inline-flex; align-items:center; gap:10px; }
.chat-panel.collapsed .chat-collapse-mark { position:relative; width:20px; height:20px; border-radius:999px; background:linear-gradient(135deg, rgba(80,180,255,0.96), rgba(87,232,214,0.88)); box-shadow:0 0 0 5px rgba(88,166,255,0.14); flex-shrink:0; }
.chat-panel.collapsed .chat-collapse-mark::after { content:''; position:absolute; top:50%; left:50%; width:7px; height:7px; border-radius:999px; transform:translate(-50%, -50%); background:rgba(255,255,255,0.98); box-shadow:0 0 10px rgba(255,255,255,0.45); }
.chat-panel.collapsed .chat-collapse-label { display:inline-flex; align-items:center; color:#e6f7ff; font-size:12px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
.chat-panel.collapsed .chat-collapse-label::after { content:' Assistant'; letter-spacing:0.02em; text-transform:none; margin-left:3px; opacity:0.92; }
.chat-collapse-btn { margin-left:auto; background:none; border:none; color:var(--text2); cursor:pointer; font-size:12px; padding:2px 4px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; gap:0; min-width:24px; min-height:24px; }
.chat-collapse-btn:hover { color:var(--text); background:var(--bg3); }
.chat-collapse-arrow { display:inline-flex; }
.chat-collapse-badge { display:none; position:relative; z-index:1; font-weight:800; text-transform:uppercase; }

/* === CORE: restructure gate ======================================= */
/* Gating: hide old elements when restructured */
.chat-panel.ai-restructured:not(.collapsed)>.chat-header { display:none !important; }
.chat-panel.ai-restructured>.chat-actions { display:none !important; }
.chat-panel.ai-restructured>.chat-context-strip { display:none !important; }
.chat-panel.ai-restructured>.runtime-chat-card-stack { display:none !important; }
.chat-panel.ai-restructured>.app-runtime-strip { display:none !important; }
.chat-panel.ai-restructured>.conv-tabs { display:none !important; }
.chat-panel.ai-restructured>.chat-search { display:none !important; }
.chat-panel.ai-restructured>.chat-messages { display:none !important; }

/* Collapsed state hides new layers too */
.chat-panel.collapsed .ai-header,
.chat-panel.collapsed .agent-status-strip,
.chat-panel.collapsed .live-rail,
.chat-panel.collapsed .ai-tabs { display:none !important; }

/* === HEADER: ai-header + ai-tabs + live-rail ====================== */
/* ================================================================
   AI Panel Restructure — Phase 1
   4-layer layout: Header / Live Rail / 5-Tab / Composer
   Gated by .chat-panel.ai-restructured
   ================================================================ */

/* Layer 1 — Assistant Header */
.ai-header { flex:0 0 auto; background:var(--bg2); border-bottom:1px solid var(--border); cursor:grab; user-select:none; }
.ai-header:active { cursor:grabbing; }
.ai-header-top { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; }
.ai-header-title { font-size:11px; font-weight:600; color:var(--text); }
.ai-header-controls { display:flex; align-items:center; gap:4px; }
/* Host action slot (setHeaderAction). Empty by default so existing hosts render
   byte-identically; :empty keeps it from eating the controls-row gap. */
.ai-header-slot { display:inline-flex; align-items:center; gap:4px; }
.ai-header-slot:empty { display:none; }
/* Generic active state — the host decides what "on" means. */
.ai-header-slot .ca-btn[aria-pressed="true"] { color:#d6f5e2; background:rgba(63,185,80,0.16); border-color:rgba(63,185,80,0.42); }
.ai-header-slot .ca-btn[aria-pressed="true"]:hover { background:rgba(63,185,80,0.24); border-color:rgba(63,185,80,0.58); }
.ai-header-slot .ca-btn[disabled] { opacity:0.55; cursor:progress; }
/* VLC parity: no model/ctx-bar row in the chat header — model + context live at
   the bottom (host bottom bar, or .chat-bottom-meta in the composer). Elements
   stay in the DOM so existing JS writes keep working. */
.ai-header-meta { display:none !important; }
.ai-meta-chips { display:flex; gap:4px; flex-shrink:0; }
.ai-chip { display:inline-flex; align-items:center; padding:2px 6px; border-radius:999px; font-size:8px; border:1px solid var(--border); color:var(--text2); background:var(--bg); cursor:default; }
.ai-chip-model { color:var(--accent); border-color:rgba(88,166,255,0.3); }
.ai-chip-ctx { min-width:28px; text-align:center; }

/* Layer 1a' — Host status strip (workspace / brain / version; api.status).
   display toggled by chat.js: none until the status endpoint answers. */
.agent-status-strip { display:none; flex:0 0 auto; flex-direction:column; align-items:stretch; gap:3px; padding:5px 12px 6px; font-size:9px; color:var(--text2); background:var(--bg2); border-bottom:1px solid var(--border); }
.agent-status-strip .ass-row { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.agent-status-strip .ass-item { display:inline-flex; align-items:center; gap:4px; min-width:0; }
.agent-status-strip .ass-workspace { flex:1 1 100%; overflow:visible; }
.agent-status-strip .ass-workspace-path { display:block; white-space:normal; word-break:break-all; color:var(--text); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; line-height:1.35; }
.agent-status-strip .ass-k { flex:0 0 auto; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--text2); }
.agent-status-strip .ass-cast { flex-wrap:wrap; }
.agent-status-strip .ass-chip { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:999px; border:1px solid var(--border); background:var(--bg); color:var(--text); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-status-strip .ass-chip.is-talking { border-color:rgba(88,166,255,0.45); color:var(--accent); }
.agent-status-strip .ass-chip.is-online { border-color:rgba(63,185,80,0.4); }
.agent-status-strip .ass-chip.is-offline { opacity:0.55; }
.agent-status-strip .ass-version { flex:0 0 auto; margin-left:auto; }
.agent-status-strip select { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:4px; font-size:9px; padding:1px 2px; max-width:180px; cursor:pointer; }
.agent-status-strip select:disabled { opacity:0.5; cursor:default; }

/* Layer 2 — Sticky Live Rail */
.live-rail { display:none; flex:0 0 auto; flex-direction:column; gap:6px; padding:6px 8px; max-height:clamp(180px,30vh,360px); overflow-y:auto; overscroll-behavior:contain; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 94%, var(--border)); }
.live-rail:not(:empty) { display:flex; }

/* Layer 3 — 5-Tab Container */
.ai-tabs { flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.ai-tab-bar { display:flex; background:var(--bg2); border-bottom:1px solid var(--border); overflow-x:auto; min-height:26px; align-items:center; flex:0 0 auto; }
.ai-tab-btn { padding:4px 10px; cursor:pointer; color:var(--text2); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; border:none; background:none; border-bottom:2px solid transparent; white-space:nowrap; font-family:var(--font); }
.ai-tab-btn.active { color:var(--text); border-bottom-color:var(--accent); }
.ai-tab-btn:hover:not(.active) { color:var(--text); background:rgba(255,255,255,0.03); }
.ai-tab-btn[data-badge]::after { content:attr(data-badge); display:inline-flex; align-items:center; justify-content:center; min-width:14px; height:14px; margin-left:4px; padding:0 3px; border-radius:999px; font-size:8px; font-weight:700; background:var(--orange); color:#fff; }
.ai-tab-pane { flex:1 1 auto; overflow-y:auto; display:none; min-height:0; }
.ai-tab-pane.active { display:flex; flex-direction:column; }
#aiTabChat .conv-tabs { flex:0 0 auto; }
#aiTabChat .chat-messages { flex:1 1 auto; overflow-y:auto; min-height:0; }
#aiTabChat .chat-search { flex:0 0 auto; }
.runs-body,.context-body,.resources-body,.tasks-body,.sessions-body { flex:1; overflow-y:auto; padding:8px; font-size:10px; }
/* v0.2.1 — host-rendered custom tab pane body (features.aiTabs object entries) */
.custom-tab-body { flex:1; overflow-y:auto; min-height:0; padding:8px; font-size:10px; }
.runs-empty,.context-empty,.resources-empty,.tasks-empty { padding:20px 10px; color:var(--text2); font-size:10px; text-align:center; opacity:0.7; }

/* === HEADER: chat-header + runtime-chat cards ===================== */
.chat-header { padding:7px 12px; background:var(--bg2); border-bottom:1px solid var(--border); font-size:11px; color:var(--text2); display:flex; align-items:center; gap:6px; cursor:grab; user-select:none; }
.chat-header:active { cursor:grabbing; }
/* v0.2.9: was a hardcoded rgba(13,18,26)→rgba(11,16,24) near-black gradient.
   pushRuntimeCard() writes display:flex inline, so on any host that pushes a
   runtime card (Matrix pushes 🕹 驾驶模式) this strip sits directly under the
   conversation tabs — on a light host it read as a black band across the panel. */
.runtime-chat-card-stack { display:none; flex:0 1 auto; flex-direction:column; gap:10px; padding:10px; max-height:clamp(220px, 34vh, 480px); overflow-y:auto; overscroll-behavior:contain; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 94%, var(--border)); }
body.runtime-shell .runtime-chat-card-stack { display:flex; }
/* v0.2.9: the white/black alpha overlays below assumed a dark base — a white
   veil lightens a dark panel but is invisible on a light one, and rgba(0,0,0,.14)
   turns a light surface muddy grey. Mixing against --bg/--text tracks the host. */
.runtime-chat-card { padding:12px; border-radius:16px; border:1px solid var(--border); background:var(--bg2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.02); }
.runtime-chat-card.context { border-color:rgba(var(--accent-rgb),0.22); background:color-mix(in srgb, var(--accent) 7%, var(--bg2)); }
.runtime-chat-card.artifacts { border-color:color-mix(in srgb, var(--green) 32%, transparent); background:color-mix(in srgb, var(--green) 7%, var(--bg2)); }
.runtime-chat-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.runtime-chat-card-head strong { display:block; font-size:12px; color:var(--text); line-height:1.45; }
.runtime-chat-card-head span { display:block; font-size:9px; color:var(--text2); line-height:1.6; }
/* v0.2.10: pushRuntimeCard() always emits .runtime-chat-card-body around the
   host's markup, but this stylesheet had NO rule for it. The card head styled
   fine while the body inherited nothing — Matrix's 驾驶模式 card rendered as a
   bare title with its toggle row collapsed. The host styles what it puts INSIDE
   (Matrix owns .dmode-row/.dmode-switch); the widget owns this container. */
.runtime-chat-card-body { font-size:11px; color:var(--text); line-height:1.6; }
.runtime-chat-card-body:empty { display:none; }
.rc-close { flex:0 0 auto; width:20px; height:20px; padding:0; border:1px solid var(--border); border-radius:999px; background:var(--bg3); color:var(--text2); font-family:var(--font); font-size:12px; line-height:1; cursor:pointer; }
.rc-close:hover { background:var(--border); color:var(--text); }
.runtime-chat-card-kicker { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:var(--bg3); color:var(--text2); font-size:8px; text-transform:uppercase; letter-spacing:0.55px; }
.runtime-chat-card.context .runtime-chat-card-kicker { color:color-mix(in srgb, var(--accent) 62%, var(--text)); border-color:rgba(88,166,255,0.24); background:rgba(88,166,255,0.1); }
.runtime-chat-card.artifacts .runtime-chat-card-kicker { color:color-mix(in srgb, var(--green) 62%, var(--text)); border-color:rgba(63,185,80,0.24); background:rgba(63,185,80,0.1); }
.runtime-chat-card-pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.runtime-chat-pill { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:var(--bg3); color:var(--text2); font-size:9px; }
.runtime-chat-card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:8px; margin-bottom:10px; }
.runtime-chat-card-kv { padding:10px 11px; border-radius:12px; border:1px solid var(--border); background:var(--bg); }
/* 8px accent label: raw --accent measured 4.35:1 on a light card. */
.runtime-chat-card-kv span { display:block; font-size:8px; color:color-mix(in srgb, var(--accent) 80%, var(--text)); text-transform:uppercase; letter-spacing:0.45px; margin-bottom:4px; }
.runtime-chat-card-kv strong { display:block; font-size:10px; color:var(--text); line-height:1.6; word-break:break-word; }
.runtime-chat-card-list { display:flex; flex-direction:column; gap:8px; }
.runtime-chat-card-item { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:10px 11px; border-radius:12px; border:1px solid var(--border); background:var(--bg); }
.runtime-chat-card-item-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.runtime-chat-card-item-copy strong { font-size:10px; color:var(--text); line-height:1.55; word-break:break-word; }
.runtime-chat-card-item-copy span { font-size:9px; color:var(--text2); line-height:1.6; word-break:break-word; }
.runtime-chat-card-actions { display:flex; flex-wrap:wrap; gap:6px; }
.runtime-chat-btn { border:1px solid var(--border); border-radius:10px; background:var(--bg2); color:var(--text2); font-size:9px; font-family:var(--font); padding:6px 8px; cursor:pointer; white-space:nowrap; }
.runtime-chat-btn:hover { background:var(--bg3); color:var(--text); }
.runtime-chat-btn.primary { color:color-mix(in srgb, var(--accent) 62%, var(--text)); border-color:rgba(88,166,255,0.34); background:rgba(88,166,255,0.1); }
.runtime-chat-btn.success { color:color-mix(in srgb, var(--green) 62%, var(--text)); border-color:rgba(63,185,80,0.34); background:rgba(63,185,80,0.1); }
.runtime-chat-empty { padding:11px 12px; border-radius:12px; border:1px dashed rgba(255,255,255,0.08); color:var(--text2); font-size:10px; line-height:1.7; background:rgba(255,255,255,0.02); }
.chat-messages { flex:1; overflow-y:auto; padding:10px; }
.chat-messages:empty::before {
  content:'Describe a task, inspect the workspace, or use the quick actions above.';
  display:block;
  margin:12px 2px;
  padding:12px 14px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  color:var(--text2);
  font-size:11px;
  line-height:1.65;
}

/* === TABS: conv-tabs ============================================== */
/* Conversation tabs */
.conv-tabs { display:flex; background:var(--bg2); border-bottom:1px solid var(--border); overflow-x:auto; min-height:28px; align-items:center; position:relative; }
.conv-tab { padding:5px 12px; cursor:pointer; color:var(--text2); font-size:10px; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.conv-tab.active { color:var(--text); border-bottom-color:var(--accent); }
.conv-tab .conv-close { font-size:8px; opacity:0.5; cursor:pointer; margin-left:4px; }
.conv-tab .conv-close:hover { opacity:1; color:var(--red); }
.conv-new { padding:5px 8px; cursor:pointer; color:var(--text2); font-size:12px; border:none; background:none; }
.conv-new:hover { color:var(--accent); }
/* History dropdown */
.conv-tabs .tab-spacer { flex:1; min-width:8px; }
.conv-history-btn { padding:4px 8px; cursor:pointer; color:var(--text2); font-size:10px; border:none; background:none; opacity:0.7; }
.conv-history-btn:hover { opacity:1; color:var(--accent); }

/* === COMPOSER: chat-input-area + attachments + plan-mode ========== */
/* Legacy chat input (kept for completeness) */
.chat-input { display:flex; border-top:1px solid var(--border); background:var(--bg2); }
.chat-input input { flex:1; background:transparent; border:none; color:var(--text); padding:10px 14px; font-family:var(--font); font-size:12px; outline:none; }
.chat-input button { background:var(--accent); color:#fff; border:none; padding:6px 14px; cursor:pointer; font-family:var(--font); font-size:11px; font-weight:600; }
.chat-input button:disabled { opacity:0.4; cursor:default; }

/* Chat input area (enhanced with image + mention) */
/* v0.2.8: the composer chrome was three hardcoded near-black gradients
   (rgba(13,17,23) / #121922 / #0f151d / #2a3441). On a light host that produced a
   black slab across the panel's bottom edge. color-mix keeps the same layered
   depth cue — a shade darker than the panel on dark themes, a shade deeper than
   the surface on light ones — while tracking whatever palette the host supplies. */
.chat-input-area { border-top:1px solid var(--border); background:color-mix(in srgb, var(--bg) 92%, var(--border)); padding:8px 10px 10px; }
.chat-attachments { display:flex; gap:6px; padding:0 0 6px; flex-wrap:wrap; }
.chat-attachments:empty { display:none; }
.chat-attach-item { background:rgba(88,166,255,0.08); border:1px solid rgba(88,166,255,0.22); border-radius:999px; padding:4px 8px; font-size:10px; display:flex; align-items:center; gap:6px; }
.chat-attach-item img { width:24px; height:24px; object-fit:cover; border-radius:2px; }
.chat-attach-item .remove { cursor:pointer; color:var(--red); font-size:10px; }
/* DAG/tree node selection → chat context chips */
.dag-selection-strip { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:4px 0 6px; }
.dag-selection-strip .dag-sel-label { font-size:9px; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
.dag-sel-chip { background:rgba(88,166,255,0.12); border:1px solid rgba(88,166,255,0.35); border-radius:999px; padding:3px 8px; font-size:10px; color:var(--text); display:inline-flex; align-items:center; gap:5px; }
.dag-sel-chip .dag-sel-type { font-size:8px; color:var(--text2); border:1px solid var(--border); border-radius:999px; padding:0 5px; }
.dag-sel-chip .remove { cursor:pointer; color:var(--red); font-size:10px; }
.dag-sel-clear { background:none; border:none; color:var(--text2); font-size:9px; cursor:pointer; text-decoration:underline; padding:0 2px; }
.dag-sel-clear:hover { color:var(--text); }
.plan-mode-bar { display:flex; align-items:center; gap:8px; padding:6px 10px; margin-bottom:6px; background:var(--bg2); border:1px solid var(--border); border-radius:9px; font-size:11px; }
.plan-mode-label { color:var(--yellow, #e2b714); font-weight:600; flex:1; }
.plan-approve-btn { background:var(--green, #3fb950); color:#fff; border:none; padding:4px 12px; cursor:pointer; font-family:var(--font); font-size:11px; font-weight:600; border-radius:3px; }
.plan-approve-btn:hover { opacity:0.85; }
.plan-cancel-btn { background:var(--red, #f85149); color:#fff; border:none; padding:4px 12px; cursor:pointer; font-family:var(--font); font-size:11px; font-weight:600; border-radius:3px; }
.plan-cancel-btn:hover { opacity:0.85; }
#planModeToggle.active { color:var(--yellow, #e2b714); }

/* Input row (textarea + send/stop buttons) */
.chat-input-row { display:flex; align-items:flex-end; gap:6px; background:var(--bg); border:1px solid color-mix(in srgb, var(--border) 82%, var(--text)); border-radius:12px; padding:6px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 24px rgba(0,0,0,0.10); }
.chat-input-row:focus-within { border-color:rgba(88,166,255,0.75); box-shadow:0 0 0 1px rgba(88,166,255,0.2), 0 12px 28px rgba(0,0,0,0.22); }
.chat-input-row textarea { flex:1; background:transparent; border:none; color:var(--text); padding:8px 2px 8px 0; font-family:var(--font); font-size:12.5px; outline:none; min-height:42px; max-height:180px; resize:none; overflow-y:auto; line-height:1.55; }
/* Placeholder was #778291 — a mid-slate that washed out on light surfaces.
   --text2 is the palette's own secondary ink and reads on both. */
.chat-input-row textarea::placeholder { color:var(--text2); opacity:0.85; }
.chat-input-row .input-btn { width:34px; height:34px; background:none; border:none; color:var(--text2); cursor:pointer; border-radius:8px; padding:0; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-input-row .input-btn:hover { color:var(--text); background:rgba(255,255,255,0.05); }
/* v0.2.8: was a hardcoded #58a6ff→#3e8ae0 gradient, so the primary action ignored
   the host accent entirely. Mixing toward black (not toward --text, which flips
   direction per theme) deepens the accent identically on every palette and lifts
   the white label from 2.53:1 to AA for the 12px bold text it carries. */
.chat-input-row button.send-btn { background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 68%, #000) 0%, color-mix(in srgb, var(--accent) 54%, #000) 100%); color:#fff; border:none; min-width:74px; padding:10px 16px; cursor:pointer; font-family:var(--font); font-size:12px; font-weight:700; border-radius:10px; margin:0; align-self:stretch; box-shadow:0 8px 20px rgba(var(--accent-rgb), 0.22); }
.chat-input-row button.send-btn:hover:not(:disabled) { background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #000) 0%, color-mix(in srgb, var(--accent) 64%, #000) 100%); }
.chat-input-row button.send-btn:disabled { opacity:0.4; cursor:default; }
.chat-input-row button.stop-btn { background:linear-gradient(180deg, #f85149 0%, #d83b34 100%); color:#fff; border:none; min-width:74px; padding:8px 14px; cursor:pointer; font-family:var(--font); font-size:11px; font-weight:700; border-radius:10px; align-self:stretch; }
/* Bottom meta strip (VLC parity): model + context shown below the composer. */
.chat-bottom-meta { display:flex; align-items:center; gap:8px; padding:4px 2px 0; font-size:9px; color:var(--text2); }
.chat-bottom-meta:empty { display:none; }
/* 9px accent-on-surface: raw --accent measured 4.28:1 on Matrix's light panel.
   Same mix-toward-ink treatment as the todo hues. */
.chat-bottom-meta .cbm-model { color:color-mix(in srgb, var(--accent) 80%, var(--text)); }
.chat-bottom-meta .cbm-ctx { margin-left:auto; }
.chat-input-row button.stop-btn:hover { opacity:0.85; }

/* Status bar */
.chat-status-bar { display:flex; align-items:center; gap:6px; padding:4px 10px; margin-bottom:6px; background:var(--bg2); border:1px solid var(--border); border-radius:9px; font-size:9px; color:var(--text2); min-height:24px; }
.chat-status-bar .cs-dot { width:6px; height:6px; border-radius:50%; background:var(--orange); animation:csPulse 1.2s ease-in-out infinite; flex-shrink:0; }
@keyframes csPulse { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
.chat-status-bar .cs-phase { color:var(--text); font-weight:500; }
.chat-status-bar .cs-detail { color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; }
.chat-status-bar .cs-elapsed { margin-left:auto; color:var(--text2); }
.chat-status-bar .cs-kill { background:var(--red); color:#fff; border:none; padding:1px 6px; border-radius:3px; cursor:pointer; font-family:var(--font); font-size:8px; font-weight:700; margin-left:4px; }
.chat-status-bar .cs-kill:hover { opacity:0.8; }

/* Search bar in chat */
.chat-search { display:none; padding:4px 10px; background:var(--bg3); border-bottom:1px solid var(--border); }
.chat-search.open { display:flex; gap:6px; align-items:center; }
.chat-search input { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text); padding:4px 8px; font-family:var(--font); font-size:10px; outline:none; }
.chat-search .search-count { font-size:10px; color:var(--text2); }

/* === OVERLAYS: mention + skill + ctx-menu + step-ctx-menu ========= */
/* @-mention autocomplete dropdown */
.mention-dropdown { display:none; position:absolute; bottom:100%; left:0; right:0; background:var(--bg2); border:1px solid var(--border); border-radius:6px 6px 0 0; max-height:200px; overflow-y:auto; z-index:60; }
.mention-dropdown.open { display:block; }
.mention-item { padding:5px 12px; cursor:pointer; font-size:11px; display:flex; align-items:center; gap:6px; }
.mention-item:hover,.mention-item.selected { background:var(--bg3); }
.mention-item .m-type { font-size:8px; padding:1px 3px; border-radius:2px; font-weight:600; }

/* Skill command palette */
.skill-palette { display:none; position:absolute; bottom:100%; left:0; right:0; background:var(--bg2); border:1px solid var(--border); border-radius:6px 6px 0 0; max-height:220px; overflow-y:auto; z-index:65; }
.skill-palette.open { display:block; }
.skill-item { padding:6px 12px; cursor:pointer; font-size:11px; display:flex; align-items:center; gap:8px; }
.skill-item:hover,.skill-item.selected { background:var(--bg3); }
.skill-item .sk-name { color:var(--accent); font-weight:600; }
.skill-item .sk-desc { color:var(--text2); font-size:10px; }
/* v0.5 — command entries the host reports as unavailable stay listed with
   their reason; they are dimmed, not hidden. */
.skill-item.command-unavailable .sk-name { color:var(--text2); font-weight:500; text-decoration:line-through; }
.skill-item.command-unavailable .sk-desc { font-style:italic; }

/* Chat context menu (generic ctx-menu used by chat surfaces) */
.ctx-menu { display:none; position:fixed; z-index:200; background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:4px 0; min-width:140px; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.ctx-menu.open { display:block; }
.ctx-menu-item { padding:5px 14px; font-size:11px; cursor:pointer; color:var(--text2); }
.ctx-menu-item:hover { background:var(--bg3); color:var(--text); }
.ctx-menu-item.danger { color:var(--red); }
.ctx-menu-item.danger:hover { background:var(--red); color:#fff; }
.ctx-menu-sep { height:1px; background:var(--border); margin:3px 0; }

/* Step card context menu */
.step-ctx-menu { display:none; position:fixed; z-index:300; background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:4px 0; min-width:180px; box-shadow:0 6px 20px rgba(0,0,0,0.5); }
.step-ctx-menu.open { display:block; }
.step-ctx-item { padding:5px 14px; font-size:11px; cursor:pointer; color:var(--text2); display:flex; align-items:center; gap:8px; }
.step-ctx-item:hover { background:var(--bg3); color:var(--text); }
.step-ctx-item .sci-icon { width:16px; text-align:center; font-size:12px; }
.step-ctx-item .sci-label { flex:1; }
.step-ctx-item .sci-hint { font-size:9px; color:var(--text2); opacity:0.6; }
.step-ctx-sep { height:1px; background:var(--border); margin:3px 0; }

/* === CONTEXT-BAR =================================================== */
/* Chip version (used in chat header) */
.ctx-bar { display:flex; align-items:center; gap:6px; }
.ctx-bar .bar { width:100px; height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.ctx-bar .bar-fill { height:100%; background:var(--green); border-radius:3px; transition:width 0.3s; }

/* Strip version (inside chat panel) */
.chat-context-strip { padding:6px 10px; background:var(--bg2); border-bottom:1px solid var(--border); }
.chat-ctx-bar { width:100%; }
.chat-ctx-bar .info { min-width:34px; font-size:10px; color:var(--text2); }
.chat-ctx-bar .bar { flex:1; width:auto; height:6px; }

/* Tooltip version */
.ctx-tooltip { position:relative; cursor:help; }
.ctx-detail { display:none; position:absolute; bottom:20px; right:0; background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:8px 12px; font-size:10px; white-space:nowrap; z-index:50; min-width:180px; }
.ctx-tooltip:hover .ctx-detail { display:block; }

/* === CARDS: messages ============================================== */
.msg { margin-bottom:8px; padding:6px 10px; border-radius:8px; line-height:1.5; white-space:pre-wrap; word-break:break-word; font-size:12px; position:relative; color:var(--text); }
.msg.user { background:var(--bg3); border:1px solid var(--border); }
/* v0.2.8: was hardcoded #161b22/#30363d. On a light host that painted GitHub-dark
   under the host's dark ink — measured contrast 1.0, i.e. unreadable assistant
   replies. --bg2 is the same #161b22 on the dark hosts, so their pixels are
   unchanged; light hosts now get a surface that tracks their palette. */
.msg.assistant { background:var(--bg2); border:1px solid var(--border); }
.msg .label { font-size:9px; color:var(--text2); margin-bottom:3px; text-transform:uppercase; letter-spacing:0.5px; }
.msg .msg-time { font-size:9px; color:var(--text2); opacity:0.7; text-transform:none; letter-spacing:0; margin-left:6px; }
.msg .msg-meta-footer { margin-top:6px; padding-top:4px; border-top:1px solid rgba(255,255,255,0.06); font-size:9px; color:var(--text2); opacity:0.75; }

/* Claude Code-style compact tool indicators */
.tool-group { margin:4px 0; background:var(--bg2); border-radius:6px; border:1px solid var(--border); overflow:hidden; }
.tool-header { display:flex; align-items:center; gap:6px; padding:6px 10px; cursor:pointer; font-size:11px; color:var(--text2); }
.tool-header:hover { background:var(--bg3); }
.tool-header .tool-icon { width:16px; text-align:center; font-size:12px; flex-shrink:0; }
.tool-header .tool-name { color:var(--accent); font-weight:600; min-width:50px; }
.tool-header .tool-desc { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.tool-header .tool-time { font-size:9px; color:var(--text2); opacity:0.6; min-width:28px; text-align:right; flex-shrink:0; }
.tool-header .tool-toggle { font-size:8px; color:var(--text2); transition:transform 0.2s; flex-shrink:0; }
.tool-header .tool-toggle.open { transform:rotate(90deg); }
.tool-body { display:none; padding:6px 10px 8px; font-size:10px; color:var(--text2); border-top:1px solid var(--border); max-height:200px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; }
.tool-body.open { display:block; }
.tool-detail { font-size:10px; color:var(--text2); padding:2px 0; display:flex; gap:6px; }
.tool-detail .td-label { color:var(--text2); opacity:0.7; min-width:50px; }
.tool-detail .td-val { color:var(--text); flex:1; }
.tool-diff { margin:3px 0; font-family:var(--font); font-size:11px; }
.tool-diff .td-old { color:var(--red); opacity:0.8; padding:1px 4px; background:rgba(248,81,73,0.08); border-radius:2px; }
.tool-diff .td-new { color:var(--green); padding:1px 4px; background:rgba(63,185,80,0.08); border-radius:2px; }

/* === v0.2.10: rules for markup chat.js emits that this stylesheet never had ===
   A class-by-class audit of chat.js/chat.html against chat.css found 49 emitted
   classes with no rule here. The ones below are the load-bearing ones; ported
   verbatim from the VLC/agent-os inline originals (which are already token-based)
   so widget-only hosts stop rendering unstyled fragments. Purely inline-styled
   structures (.interact-popup*, .agent-dot) are intentionally NOT duplicated. */

/* Tool status + spinner (VLC index.html:2882-2889) */
.tool-status-icon { font-size:12px; flex-shrink:0; }
.tool-status-icon.running { color:var(--accent); }
.tool-status-icon.done { color:var(--green); }
.tool-status-icon.error { color:var(--red); }
.tool-spinner { width:12px; height:12px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:acSpin 0.8s linear infinite; flex-shrink:0; }

/* Retry notice (VLC index.html:2927) */
.retry-msg { margin:4px 0; padding:4px 10px; font-size:10px; color:color-mix(in srgb, var(--yellow) 76%, var(--text)); display:flex; align-items:center; gap:5px; }

/* Detail step cards (VLC index.html:2673-2690) */
.dsc-header { display:flex; align-items:center; gap:6px; padding:5px 8px; cursor:pointer; font-size:10px; }
.dsc-header:hover { background:var(--bg3); }
.dsc-icon { font-size:12px; width:16px; text-align:center; }
.dsc-title { color:var(--text); font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsc-type { color:color-mix(in srgb, var(--accent) 80%, var(--text)); font-size:8px; background:var(--bg); padding:1px 5px; border-radius:8px; }
.dsc-duration { color:var(--text2); font-size:8px; }
.dsc-body { padding:0 8px 6px; display:none; }
.dsc-body.open { display:block; }
.dsc-section { margin:4px 0; }
.dsc-section-header { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--text2); cursor:pointer; padding:2px 0; }
.dsc-section-header:hover { color:var(--accent); }
.dsc-section-header .dsc-arrow { font-size:8px; transition:transform 0.15s; }
.dsc-section-header .dsc-arrow.open { transform:rotate(90deg); }
.dsc-section-content { display:none; max-height:300px; overflow-y:auto; background:var(--bg); padding:4px 6px; border-radius:3px; font-size:9px; color:var(--text2); white-space:pre-wrap; word-break:break-word; margin-top:2px; }
.dsc-section-content.open { display:block; }
.dsc-section-content.truncated::after { content:'(truncated)'; color:var(--orange); font-style:italic; }

/* Detail-panel stream box header (VLC index.html:2727-2731) */
.de-stream-header { display:flex; align-items:center; gap:6px; padding:4px 6px; cursor:pointer; background:var(--bg2); border-radius:3px 3px 0 0; }
.de-stream-header:hover { background:var(--hover); }
.de-stream-size { color:var(--text2); font-size:8px; margin-left:auto; }
.de-stream-toggle { color:var(--text2); font-size:8px; transition:transform .2s; }

/* Inline diff preview (VLC index.html:3448-3453). The ::before markers mean a
   colour-blind reader still sees +/- without relying on hue alone. */
.edit-diff-preview { margin:4px 0; border:1px solid var(--border); border-radius:4px; overflow:hidden; font-size:10px; }
.diff-line { padding:0 8px; font-family:var(--font-mono); white-space:pre; }
.diff-add { background:color-mix(in srgb, var(--green) 12%, transparent); color:color-mix(in srgb, var(--green) 76%, var(--text)); }
.diff-add::before { content:'+'; margin-right:6px; }
.diff-del { background:color-mix(in srgb, var(--red) 12%, transparent); color:color-mix(in srgb, var(--red) 76%, var(--text)); text-decoration:line-through; }
.diff-del::before { content:'-'; margin-right:6px; }
.diff-ctx { color:var(--text2); }

/* Search hit marker — searchConversation() wraps matches in .search-highlight
   and unwraps them on clear. Without a rule the "found it" feedback was silent. */
.search-highlight { background:color-mix(in srgb, var(--yellow) 34%, transparent); color:var(--text); border-radius:2px; padding:0 1px; }
.search-highlight.current { background:var(--yellow); color:#000; }

/* Collapsed-file / sub-agent summary groups */
.tool-files-summary, .tool-agents-summary { margin:4px 0; }
.file-count-desc, .agent-count-desc { color:var(--text2); font-size:10px; }
.file-list-body, .agent-list-body { font-size:10px; color:var(--text2); }
.agent-step { display:flex; align-items:center; gap:4px; padding:2px 0; line-height:1.5; }
.agent-step[data-done] { opacity:0.65; }
.agent-timer { margin-left:auto; font-size:9px; color:var(--text2); font-variant-numeric:tabular-nums; }

/* Workflow step chip + view-DAG button rendered into the chat stream */
.wf-chat-step { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--text2); padding:2px 0; }
.wf-viewdag-btn { border:1px solid var(--border); border-radius:999px; background:var(--bg3); color:color-mix(in srgb, var(--accent) 80%, var(--text)); font-family:var(--font); font-size:9px; padding:3px 9px; cursor:pointer; }
.wf-viewdag-btn:hover { background:var(--border); color:var(--text); }

/* Legacy collapsed-pill title + status-strip brain slot */
.chat-header-title { font-size:11px; font-weight:600; color:var(--text); }
.agent-status-strip .ass-brain { flex:0 1 auto; min-width:0; }

/* Auto-linked URLs */
.msg.assistant .content-text a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.msg.assistant .content-text a:hover { color:#79b8ff; }

/* Message context toggle */
.msg-ctx-toggle { position:absolute; top:4px; right:4px; background:none; border:none; color:var(--text2); cursor:pointer; font-size:10px; opacity:0; padding:2px 5px; border-radius:3px; transition:opacity 0.15s; }
.msg:hover .msg-ctx-toggle { opacity:0.6; }
.msg-ctx-toggle:hover { opacity:1 !important; background:var(--bg3); }
.msg-ctx-toggle.excluded { color:var(--red); opacity:0.8 !important; }
.msg.excluded-msg { opacity:0.4; border-left:2px solid var(--red); }
.msg.excluded-msg .label::after { content:' (excluded from context)'; color:var(--red); font-size:8px; }

/* Message truncation + show more — only for extremely long messages */
.msg .content-text.is-overflowing { display:block; position:relative; }
.msg .content-text.is-overflowing.is-collapsed { max-height:260px; overflow:hidden; }
.msg .content-text.is-overflowing.is-collapsed::after { content:''; position:absolute; bottom:0; left:0; right:0; height:64px; background:linear-gradient(transparent, var(--bg)); pointer-events:none; }
.msg-toggle { display:block; width:100%; color:var(--accent); font-size:11px; cursor:pointer; margin-top:8px; border:1px solid rgba(88,166,255,0.35); background:rgba(88,166,255,0.08); font-family:var(--font); padding:5px 10px; border-radius:8px; text-align:center; }
.msg-toggle:hover { background:var(--accent); color:#fff; }

/* Markdown in assistant messages */
.msg.assistant .content-text { white-space:normal; }
.msg.assistant .content-text p { margin:4px 0; }
.msg.assistant .content-text code { background:var(--bg3); padding:1px 4px; border-radius:3px; font-size:11px; }
.msg.assistant .content-text pre { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:8px; margin:6px 0; overflow-x:auto; }
.msg.assistant .content-text pre code { background:none; padding:0; }
.msg.assistant .content-text h1,.msg.assistant .content-text h2,.msg.assistant .content-text h3 { margin:8px 0 4px; font-size:13px; color:var(--accent); }
.msg.assistant .content-text ul,.msg.assistant .content-text ol { padding-left:18px; margin:4px 0; }
.msg.assistant .content-text li { margin:2px 0; }
.msg.assistant .content-text strong { color:var(--text); }
.msg.assistant .content-text a { color:var(--accent); text-decoration:none; }
.msg.assistant .content-text blockquote { border-left:2px solid var(--border); padding-left:8px; color:var(--text2); margin:4px 0; }

/* === CARDS: thinking block + todo list ============================ */
/* v0.2.8 — chat.js emits .thinking-block (addThinkingIndicator, ~L1942) and
   .todo-item (~L1999) but this stylesheet shipped ZERO rules for either, so a
   host that loads only chat.css rendered an unstyled 16px thinking box and a
   spinner that never span (no @keyframes spin existed here at all). Ported from
   the VLC/agent-os inline originals, with the two hardcoded literals
   (#1a1e2e→#161b22 fill, #30365d border) tokenized. */
.thinking-block { margin:4px 0; padding:6px 10px; background:var(--bg2); border-radius:6px; border:1px solid color-mix(in srgb, var(--border) 70%, var(--purple)); font-size:11px; }
.thinking-header { width:100%; padding:0; border:0; background:transparent; font:inherit; text-align:left; display:flex; align-items:center; gap:6px; color:var(--purple); cursor:pointer; }
.thinking-header .think-icon { animation:acPulse 1.5s ease-in-out infinite; }
@keyframes acPulse { 0%,100% { opacity:0.5; } 50% { opacity:1; } }
.thinking-body { display:none; margin-top:4px; color:var(--text2); font-size:10px; max-height:100px; overflow-y:auto; white-space:pre-wrap; word-break:break-word; }
.thinking-body.open { display:block; }
.thinking-block.done .think-icon { animation:none; opacity:0.5; }
.thinking-block.done .thinking-header { color:var(--text2); }

/* addTodoList (chat.js ~L1990) tags the card `msg todo-list`, so without this
   rule it inherited .msg's 12px/pre-wrap and rendered as bare, over-spaced text
   with no card at all. */
.msg.todo-list { background:var(--bg2); font-size:11px; padding:6px 10px; border-radius:6px; border:1px solid var(--border); white-space:normal; }
.todo-item { display:flex; align-items:center; gap:5px; padding:2px 0; }
.todo-icon { width:12px; text-align:center; font-size:10px; }
/* Semantic hues carry 12px body text here, and a host's --green/--yellow is
   tuned as an accent, not as ink: Matrix's --yellow measured 4.32:1 on its light
   surface. Mixing toward --text raises contrast in BOTH theme directions, since
   --text is by definition the palette's high-contrast ink against --bg. */
.todo-done { color:color-mix(in srgb, var(--green) 76%, var(--text)); }
.todo-active { color:color-mix(in srgb, var(--yellow) 76%, var(--text)); }
.todo-pending { color:var(--text2); }
.todo-subtask { padding-left:20px; font-size:10px; }
.todo-timing { margin-left:auto; font-size:9px; opacity:0.6; font-variant-numeric:tabular-nums; }
.todo-spinner { width:10px; height:10px; border:2px solid var(--border); border-top-color:var(--yellow); border-radius:50%; animation:acSpin 0.8s linear infinite; flex-shrink:0; margin-right:2px; }
@keyframes acSpin { to { transform:rotate(360deg); } }
.todo-text { flex:1; }
@media (prefers-reduced-motion: reduce) {
  .thinking-header .think-icon, .todo-spinner { animation:none !important; }
}

/* Image in user message */
.msg-images { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.msg-images img { max-width:120px; max-height:80px; border-radius:4px; border:1px solid var(--border); cursor:pointer; }
/* Auto-screenshots from tests */
.msg-screenshots { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; padding:6px; background:var(--bg2); border-radius:6px; border:1px solid var(--border); }
.msg-screenshots .ss-item { position:relative; }
.msg-screenshots img { max-width:200px; max-height:140px; border-radius:4px; border:1px solid var(--border); cursor:pointer; }
.msg-screenshots img:hover { border-color:var(--accent); }
.msg-screenshots .ss-label { position:absolute; bottom:4px; left:4px; background:rgba(0,0,0,0.7); color:#fff; font-size:9px; padding:1px 5px; border-radius:3px; }

/* === CARDS: tools / agent groups / step cards (tool palette) ====== */
.tool-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:12px; }
.tool-card summary { list-style:none; cursor:pointer; }
.tool-card summary::-webkit-details-marker { display:none; }
.tool-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.tool-card-name { color:var(--text); font-size:12px; font-weight:600; }
.tool-card-badges { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.tool-card-badge { font-size:9px; border-radius:999px; padding:2px 7px; border:1px solid var(--border); color:var(--text2); white-space:nowrap; }
.tool-card-badge.deferred { color:var(--yellow); border-color:rgba(210,153,34,0.35); background:rgba(210,153,34,0.08); }
.tool-card-badge.user { color:var(--purple); border-color:rgba(163,113,247,0.35); background:rgba(163,113,247,0.08); }
.tool-card-desc { color:var(--text2); font-size:10px; line-height:1.6; }
.tool-card-fields { margin-top:10px; padding-top:10px; border-top:1px solid rgba(48,54,61,0.72); font-size:10px; color:var(--text2); }
.tool-card-fields code { background:var(--bg3); padding:1px 5px; border-radius:999px; margin:0 4px 4px 0; display:inline-block; }
.tool-card-demo { margin-top:10px; padding-top:10px; border-top:1px solid rgba(48,54,61,0.72); }
.tool-demo-label { font-size:9px; color:var(--text2); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.tool-demo-copy { color:var(--text2); font-size:10px; line-height:1.6; margin-bottom:8px; }
.tool-demo-box { background:var(--bg1); border:1px solid rgba(48,54,61,0.72); border-radius:8px; padding:8px 10px; font-size:10px; color:var(--text); line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.tool-demo-box.expected { color:var(--text2); margin-top:6px; }
.tool-demo-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.tool-demo-btn { background:var(--bg3); border:1px solid var(--border); color:var(--text2); border-radius:999px; font-size:9px; padding:4px 9px; cursor:pointer; font-family:var(--font); }
.tool-demo-btn:hover { background:var(--border); color:var(--text); }
.tool-demo-btn.primary { color:var(--accent); border-color:rgba(88,166,255,0.3); background:rgba(88,166,255,0.08); }
.tool-demo-btn.primary:hover { background:rgba(88,166,255,0.16); color:color-mix(in srgb, var(--accent) 62%, var(--text)); }
.tool-demo-btn.safe { color:var(--green); border-color:rgba(63,185,80,0.32); background:rgba(63,185,80,0.08); }
.tool-demo-btn.safe:hover { background:rgba(63,185,80,0.16); color:color-mix(in srgb, var(--green) 62%, var(--text)); }
.tool-demo-note { margin-top:8px; font-size:9px; color:var(--text2); line-height:1.6; }
.tool-guide-list { margin:8px 0 0 16px; color:var(--text2); font-size:10px; line-height:1.7; }
.tool-upload-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:8px; margin-top:10px; }
.tool-upload-field label { display:block; margin-bottom:4px; font-size:9px; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
.tool-upload-field input { width:100%; background:var(--bg1); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:7px 9px; font-family:var(--font); font-size:10px; outline:none; }
.tool-upload-field input:focus { border-color:var(--accent); }
.tool-upload-status { margin-top:10px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,0.03); font-size:10px; color:var(--text2); line-height:1.6; }
.tool-upload-status.ok { color:color-mix(in srgb, var(--green) 62%, var(--text)); border-color:rgba(63,185,80,0.35); background:rgba(63,185,80,0.08); }
.tool-upload-status.error { color:#ffd3d1; border-color:rgba(248,81,73,0.35); background:rgba(248,81,73,0.08); }
.tool-upload-meta { margin-top:8px; font-size:9px; color:var(--text2); line-height:1.7; }
.tool-upload-meta code { background:var(--bg3); padding:1px 4px; border-radius:4px; }
.tool-card-empty { color:var(--text2); font-size:10px; padding:10px 12px; border:1px dashed var(--border); border-radius:10px; background:rgba(255,255,255,0.02); }

/* === DETAIL-PANEL ================================================== */
/* §0.6 — Detail Log is anchored to the LEFT of the chat panel by JS
   (syncDetailPanelToChat in chat.js). It tracks chat position/height
   exactly. Base style sets size, look, and default visibility only.
   The right:calc(...) here is a fallback for the moment before JS runs. */
.detail-panel { position:fixed; right:calc(var(--chat-default-w) + 20px); top:auto; bottom:12px; width:var(--detail-panel-w); height:min(980px, calc(100vh - var(--header-h) - 24px)); z-index:119; display:none; flex-direction:column; background:var(--bg); border:1px solid var(--border); box-shadow:var(--panel-shadow); border-radius:8px 0 0 8px; overflow:hidden; }
.detail-panel.open { display:flex; }
.detail-panel.floating { border-radius:8px 0 0 8px; }
/* VLC parity: collapsed = fully hidden — no leftover vertical strip. */
.detail-panel.collapsed { display:none !important; width:0 !important; min-width:0 !important; border:none; box-shadow:none; pointer-events:none; }
.detail-panel.collapsed .detail-body,
.detail-panel.collapsed .detail-header { display:none !important; }
.detail-header { padding:6px 10px; background:var(--bg2); border-bottom:1px solid var(--border); font-size:10px; color:var(--text2); display:flex; align-items:center; gap:6px; border-radius:0; cursor:grab; user-select:none; }
.detail-header:active { cursor:grabbing; }
/* --orange is tuned as an accent, not as ink: 4.38:1 on Matrix's light panel. */
.detail-header .dh-title { font-weight:600; color:color-mix(in srgb, var(--orange) 78%, var(--text)); }
.detail-count { margin-left:auto; font-size:8px; color:var(--text2); }
.detail-collapse-btn,
.detail-clear-btn,
.detail-close-btn { background:none; border:none; color:var(--text2); cursor:pointer; border-radius:3px; }
.detail-collapse-btn { font-size:12px; padding:2px 4px; }
.detail-clear-btn { font-size:10px; padding:0; }
.detail-close-btn { font-size:12px; padding:0; }
.detail-collapse-btn:hover,
.detail-clear-btn:hover,
.detail-close-btn:hover { color:var(--text); background:var(--bg3); }
.detail-body { flex:1; overflow-y:auto; padding:8px; font-size:10px; font-family:var(--font); }
.detail-empty { padding:20px 10px; color:var(--text2); font-size:10px; text-align:center; opacity:0.7; }
.detail-entry { margin-bottom:6px; padding:4px 6px; border-left:2px solid var(--border); }
.detail-entry.info { border-left-color:var(--accent); }
.detail-entry.success { border-left-color:var(--green); }
.detail-entry.error { border-left-color:var(--red); }
.detail-entry.warn { border-left-color:var(--orange); }
.detail-entry.depth-1 { margin-left:14px; border-left-style:dashed; }
.detail-entry.depth-2 { margin-left:28px; border-left-style:dotted; }
.detail-entry.depth-3 { margin-left:42px; border-left-style:dotted; opacity:0.85; }
.detail-entry .de-time { color:var(--text2); font-size:8px; }
.detail-entry .de-phase { color:var(--orange); font-weight:600; margin-left:4px; font-size:9px; }
.detail-entry .de-agent { color:var(--purple); font-weight:600; margin-left:4px; font-size:9px; }
.detail-entry .de-msg { color:var(--text); margin-top:2px; white-space:pre-wrap; word-break:break-word; }
.detail-entry .de-data { color:var(--text2); margin-top:2px; white-space:pre-wrap; word-break:break-word; font-size:9px; max-height:300px; overflow-y:auto; background:var(--bg2); padding:4px; border-radius:3px; cursor:pointer; }
.detail-entry .de-data.collapsed { max-height:40px; overflow:hidden; position:relative; }
.detail-entry .de-data.collapsed::after { content:'... click to expand'; position:absolute; bottom:0; right:4px; background:var(--bg2); padding:0 4px; color:var(--accent); font-size:8px; }
/* Step card in detail panel — enhanced workflow step display */
.detail-step-card { margin:6px 0; background:var(--bg2); border-radius:5px; border:1px solid var(--border); overflow:hidden; }
.detail-step-card.running { border-color:var(--orange); }
.detail-step-card.done { border-color:var(--green); }
.detail-step-card.error { border-color:var(--red); }
.detail-step-card.skipped { border-color:var(--text2); opacity:0.7; }

/* Agent group in detail panel */
.detail-agent-group { margin:4px 0; background:var(--bg2); border-radius:4px; border:1px solid var(--border); overflow:hidden; }
.detail-agent-header { display:flex; align-items:center; gap:6px; padding:4px 8px; cursor:pointer; font-size:10px; }
.detail-agent-header:hover { background:var(--bg3); }
.detail-agent-header .dag-icon { color:var(--purple); font-size:11px; }
.detail-agent-header .dag-name { color:var(--accent); font-weight:600; }
.detail-agent-header .dag-desc { flex:1; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-agent-header .dag-status { font-size:9px; }
.detail-agent-children { padding:0 4px 4px; }
.detail-agent-children.collapsed { display:none; }

/* LLM communication phase colors */
.detail-entry .de-phase[data-phase="llm"] { color:var(--purple); }
.detail-entry .de-phase[data-phase="tool-call"] { color:var(--blue); }
.detail-entry .de-phase[data-phase="tool-result"] { color:var(--green); }
.detail-entry .de-phase[data-phase="var"] { color:var(--cyan, #5ccfe6); }
.detail-entry .de-phase[data-phase="file"] { color:var(--yellow); }
.detail-entry .de-phase[data-phase="step"] { color:var(--accent); }
.detail-entry .de-phase[data-phase="node"] { color:var(--accent); font-weight:600; }
.detail-entry .de-phase[data-phase="tool"] { color:var(--blue); }
.detail-entry .de-phase[data-phase="result"] { color:var(--green); }
/* Thinking stream box: distinct purple accent */
.detail-entry.stream-box.thinking-stream { border-left-color:var(--purple); }
.thinking-stream .de-stream-label { color:var(--purple); }
.thinking-stream .de-stream-content { color:var(--text2); font-style:italic; }

/* === COMPOSER: actions (chat-actions, ca-btn, ca-menu) ============ */
/* Compact mode — collapse tool groups */
.chat-panel.compact .tool-group .tool-body { display:none !important; }
.chat-panel.compact .msg.assistant .content-text.auto-truncate { max-height:100px; overflow:hidden; }

.chat-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; background:var(--bg2); border-bottom:1px solid var(--border); }
.chat-action-group { display:flex; align-items:center; gap:6px; min-width:0; }
.chat-actions .ca-btn, .ai-header-controls .ca-btn { background:var(--bg3); color:var(--text2); border:1px solid var(--border); padding:4px 10px; border-radius:999px; cursor:pointer; font-family:var(--font); font-size:9px; line-height:1; white-space:nowrap; }
.chat-actions .ca-btn:hover, .ai-header-controls .ca-btn:hover { background:var(--border); color:var(--text); }
.chat-actions .ca-btn.ca-primary, .ai-header-controls .ca-btn.ca-primary { color:var(--text); background:rgba(88,166,255,0.09); border-color:rgba(88,166,255,0.22); }
.chat-actions .ca-btn.ca-primary:hover, .ai-header-controls .ca-btn.ca-primary:hover { background:rgba(88,166,255,0.16); border-color:rgba(88,166,255,0.38); }
.chat-actions .ca-btn.ca-log, .ai-header-controls .ca-btn.ca-log { color:var(--orange); border-color:rgba(240,136,62,0.24); background:rgba(240,136,62,0.08); }
.chat-actions .ca-btn.ca-log:hover, .ai-header-controls .ca-btn.ca-log:hover { background:rgba(240,136,62,0.14); color:#ffd4b6; }

/* Chat-action dropdown menu */
.ca-menu { position:relative; }
.ca-menu-panel { display:none; position:absolute; top:calc(100% + 6px); right:0; min-width:150px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:6px; box-shadow:0 12px 32px rgba(0,0,0,0.35); z-index:90; }
.ca-menu.open .ca-menu-panel { display:block; }
.ca-menu-item { display:block; width:100%; text-align:left; background:none; border:none; color:var(--text2); font-family:var(--font); font-size:10px; padding:7px 8px; border-radius:7px; cursor:pointer; }
.ca-menu-item:hover { background:var(--bg3); color:var(--text); }
.ca-menu-item.menu-accent { color:var(--accent); }
.ca-menu-item.menu-log { color:var(--orange); }

/* ================================================================
   v0.2 — capability-family styles (ported from VLCode-2.0 index.html)
   Family 1: .wf-progress approval / pause cards
   Family 2: .ic-card InteractiveCard framework (live/blocking/forms)
   Family 3: .url-result-card preview-URL cards
   ================================================================ */

/* --- Family 1: workflow progress / approval / pause --- */
.wf-progress { background:var(--bg2); border:1px solid var(--border); border-radius:6px; margin:6px 0; padding:8px 10px; font-size:10px; }
.wf-progress-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; font-weight:600; color:var(--text); font-size:11px; }
.wf-progress-header .wf-icon { font-size:12px; }
.wf-step { display:flex; align-items:center; gap:6px; padding:2px 0; color:var(--text2); }
.wf-step-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--border); transition:background 0.3s; }
.wf-step-dot.pending { background:var(--border); }
.wf-step-dot.running { background:var(--yellow); animation:wfpulse 1s ease-in-out infinite; }
.wf-step-dot.done { background:var(--green); }
.wf-step-dot.error { background:var(--red); }
.wf-step-dot.paused { background:var(--purple); animation:wfpulse 1.5s ease-in-out infinite; }
.wf-step-dot.skipped { background:var(--text2); opacity:0.4; }
@keyframes wfpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }
.wf-step.active { color:var(--text); font-weight:500; }
.wf-step.completed { color:var(--text2); opacity:0.6; }
.wf-progress-actions { margin-top:6px; display:flex; gap:4px; }
.wf-progress-actions button { background:var(--bg3); border:1px solid var(--border); color:var(--text2); padding:2px 8px; border-radius:3px; cursor:pointer; font-family:var(--font); font-size:9px; }
.wf-progress-actions button:hover { background:var(--border); color:var(--text); }
.wf-approve-btn { border-color:var(--green) !important; color:var(--green) !important; }
.wf-approve-btn:hover { background:var(--green) !important; color:#fff !important; }
.wf-cancel-btn:hover { background:var(--red) !important; color:#fff !important; border-color:var(--red) !important; }
.wf-step-type { font-size:8px; color:var(--text2); opacity:0.6; margin-left:auto; }

/* --- Family 3: preview URL result card --- */
.url-result-card .content-text { background:rgba(88,166,255,0.06); border:1px solid rgba(88,166,255,0.25); border-radius:8px; padding:10px; }
.urc-header { font-size:11px; font-weight:600; color:var(--accent); margin-bottom:8px; }
.urc-row { display:flex; align-items:center; gap:6px; margin-bottom:5px; flex-wrap:wrap; font-size:10px; }
.urc-label { color:var(--text2); min-width:40px; font-weight:600; }
.urc-link { color:var(--blue); text-decoration:underline; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.urc-copy, .urc-open { flex:0 0 auto; padding:2px 7px; border:1px solid var(--border); border-radius:4px; font-size:8px; cursor:pointer; font-family:var(--font); background:var(--bg3); color:var(--text2); }
.urc-copy:hover, .urc-open:hover { color:var(--text); border-color:var(--accent); }
.urc-open { color:var(--accent); border-color:rgba(88,166,255,0.35); background:rgba(88,166,255,0.1); }

/* --- Family 2: InteractiveCard framework / Card v1 presentation --- */
.ic-card { --ic-tone:var(--accent); position:relative; margin:10px 2px; overflow:hidden; border:1px solid color-mix(in srgb,var(--border) 80%,var(--ic-tone)); border-radius:14px; background:linear-gradient(145deg,color-mix(in srgb,var(--bg2) 96%,var(--ic-tone)),var(--bg2)); color:var(--text); box-shadow:0 10px 28px rgba(0,0,0,.14); transition:border-color .16s ease,box-shadow .16s ease,opacity .16s ease; }
.ic-card::after { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--ic-tone); opacity:.78; pointer-events:none; }
.ic-card[data-template="decision"],.ic-card[data-template="permission"] { --ic-tone:var(--orange); }
.ic-card[data-template="resource"],.ic-card[data-template="choice"] { --ic-tone:var(--purple); }
.ic-card[data-template="evidence"],.ic-card[data-template="receipt"] { --ic-tone:var(--green); }
.ic-card[data-template="exception"] { --ic-tone:var(--red); }
.ic-card.ic-running,.ic-card.ic-submitting { border-color:color-mix(in srgb,var(--orange) 62%,var(--border)); }
.ic-card.ic-done,.ic-card.ic-resolved { border-color:color-mix(in srgb,var(--green) 56%,var(--border)); }
.ic-card.ic-error,.ic-card.ic-rejected { border-color:color-mix(in srgb,var(--red) 64%,var(--border)); }
.ic-card.ic-waiting { border-color:color-mix(in srgb,var(--ic-tone) 58%,var(--border)); }
.ic-card.ic-unknown { --ic-tone:var(--orange); border-style:dashed; box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 10%,transparent); }
.ic-card.ic-archived { opacity:.82; box-shadow:none; }
.ic-card-header { appearance:none; width:100%; display:flex; align-items:center; gap:10px; min-height:48px; padding:9px 12px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; user-select:none; font-family:var(--font); }
.ic-card-header:hover { background:color-mix(in srgb,var(--ic-tone) 7%,transparent); }
.ic-card-header:focus-visible,.ic-card-action:focus-visible,.ic-form-file-btn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.ic-card-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:38px; height:24px; padding:0 7px; border:1px solid color-mix(in srgb,var(--ic-tone) 36%,var(--border)); border-radius:7px; background:color-mix(in srgb,var(--ic-tone) 10%,var(--bg)); color:color-mix(in srgb,var(--ic-tone) 72%,var(--text)); font-size:8px; font-weight:800; letter-spacing:.06em; }
.ic-card-title { min-width:0; flex:1; overflow:hidden; color:var(--text); font-size:12px; font-weight:680; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.ic-card-badge { flex:0 0 auto; padding:3px 7px; border:1px solid var(--border); border-radius:999px; color:var(--text2); background:color-mix(in srgb,var(--bg3) 72%,transparent); font-size:8px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
.ic-card-duration { flex:0 0 auto; color:var(--text2); font-size:8px; font-variant-numeric:tabular-nums; }
.ic-card-body { display:none; padding:2px 13px 12px 60px; color:var(--text2); font-size:10px; line-height:1.55; }
.ic-card-body.open { display:block; }
.ic-card-summary { margin:0 0 7px; color:var(--text); font-size:11px; font-weight:600; line-height:1.5; white-space:pre-wrap; }
.ic-card-description { margin:0 0 10px; color:var(--text2); font-size:10px; line-height:1.6; white-space:pre-wrap; }
.ic-card-kv { display:grid; grid-template-columns:minmax(72px,.42fr) minmax(0,1fr); gap:10px; padding:4px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 58%,transparent); }
.ic-card-kv:last-child { border-bottom:0; }
.ic-card-kv-k { min-width:0; color:var(--text2); }
.ic-card-kv-v { min-width:0; color:var(--text); word-break:break-word; }
.ic-card-display { display:grid; gap:8px; margin:9px 0; }
.ic-display-item { margin:0; padding:9px 10px; border:1px solid color-mix(in srgb,var(--border) 74%,transparent); border-radius:9px; background:color-mix(in srgb,var(--bg) 68%,transparent); }
.ic-display-label { margin-bottom:5px; color:var(--text2); font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.ic-display-value { margin:0; color:var(--text); font-size:10px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.ic-display-code { max-height:220px; overflow:auto; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.ic-display-table-wrap { max-width:100%; overflow:auto; }
.ic-display-table { width:100%; border-collapse:collapse; color:var(--text); font-size:9px; }
.ic-display-table th,.ic-display-table td { padding:5px 7px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.ic-display-table th { color:var(--text2); font-weight:650; }
.ic-display-kv { display:grid; gap:4px; }
.ic-display-kv-row { display:grid; grid-template-columns:minmax(70px,.5fr) minmax(0,1fr); gap:9px; }
.ic-display-kv-row span { color:var(--text2); }
.ic-display-kv-row strong { color:var(--text); font-weight:600; word-break:break-word; }
.ic-file-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:2px 6px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.04); }
.ic-file-chip-ext { font-size:8px; font-weight:700; letter-spacing:0.04em; color:var(--text2); }
.ic-file-chip-name { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.ic-file-chip.is-source { border-color:rgba(88,166,255,0.35); background:rgba(88,166,255,0.1); }
.ic-file-chip.is-artifact { border-color:rgba(210,153,34,0.35); background:rgba(210,153,34,0.1); }
.ic-file-chip.is-internal { border-color:rgba(163,113,247,0.35); background:rgba(163,113,247,0.1); }
.ic-card-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; padding:10px 13px 12px 60px; border-top:1px solid color-mix(in srgb,var(--border) 62%,transparent); }
.ic-card-action { min-height:31px; padding:6px 11px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); cursor:pointer; font-family:var(--font); font-size:9px; font-weight:650; }
.ic-card-action:hover:not(:disabled) { border-color:color-mix(in srgb,var(--accent) 52%,var(--border)); background:var(--bg3); }
.ic-card-action:disabled { opacity:.48; cursor:not-allowed; }
.ic-card-action.primary { border-color:color-mix(in srgb,var(--accent) 58%,var(--border)); background:color-mix(in srgb,var(--accent) 11%,var(--bg)); color:color-mix(in srgb,var(--accent) 70%,var(--text)); }
.ic-card-actions .ic-card-action.danger { border-color:var(--red); color:var(--red); }
.ic-card-actions .ic-card-action.success { border-color:var(--green); color:var(--green); }
.ic-card-action.ic-verify-action { border-style:dashed; border-color:var(--orange); color:color-mix(in srgb,var(--orange) 72%,var(--text)); }
.ic-card-action.is-confirming { border-color:var(--red); background:color-mix(in srgb,var(--red) 12%,var(--bg)); color:color-mix(in srgb,var(--red) 82%,var(--text)); box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 10%,transparent); }
.ic-card.ic-collapsed .ic-card-body,.ic-card.ic-collapsed .ic-card-actions { display:none !important; }
.ic-card.ic-collapsed .ic-card-header { min-height:38px; padding-top:5px; padding-bottom:5px; }

/* Cards rendered inline in the chat stream */
.chat-messages .ic-card,
#aiTabChat .chat-messages .ic-card { margin:10px 2px; }
/* Blocking cards stick to the top of the scroll container while waiting. */
.chat-messages .ic-card.ic-blocking,
#aiTabChat .chat-messages .ic-card.ic-blocking { position:relative; top:auto; z-index:auto; box-shadow:0 2px 12px rgba(0,0,0,0.35); }
.chat-messages .ic-card.ic-blocking::before,
#aiTabChat .chat-messages .ic-card.ic-blocking::before { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 1px rgba(210,153,34,0.45); }
.ic-card.ic-blocking { border-color:color-mix(in srgb,var(--ic-tone) 64%,var(--border)); border-width:1px; }
.ic-card.ic-blocking .ic-card-header { background:color-mix(in srgb,var(--ic-tone) 5%,transparent); }

/* InteractiveCard forms */
.ic-form { display:grid; gap:10px; padding:10px 0 2px; }
.ic-form-field { margin:0; }
.ic-form-label { display:block; margin-bottom:5px; color:var(--text); font-size:9px; font-weight:650; }
.ic-form-label .ic-req { color:var(--red); margin-left:2px; }
.ic-form-desc { margin-bottom:5px; color:var(--text2); font-size:8px; line-height:1.5; }
.ic-form-input,.ic-form-textarea,.ic-form-select { box-sizing:border-box; width:100%; padding:8px 9px; border:1px solid var(--border); border-radius:8px; outline:none; background:var(--bg); color:var(--text); font-family:var(--font); font-size:10px; transition:border-color .14s ease,box-shadow .14s ease; }
.ic-form-input:focus,.ic-form-textarea:focus,.ic-form-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
.ic-form-input[aria-invalid="true"],.ic-form-textarea[aria-invalid="true"],.ic-form-select[aria-invalid="true"] { border-color:var(--red); }
.ic-form-textarea { min-height:76px; resize:vertical; }
.ic-form-select { appearance:auto; }
.ic-form-checkbox { display:flex; align-items:flex-start; gap:8px; color:var(--text); font-size:10px; line-height:1.5; }
.ic-form-checkbox input { accent-color:var(--accent); }
.ic-form-radio-group,.ic-form-checklist { display:grid; gap:6px; }
.ic-form-radio-item,.ic-form-check-item { display:flex; align-items:flex-start; gap:8px; padding:7px 8px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:color-mix(in srgb,var(--bg) 66%,transparent); font-size:9px; line-height:1.45; cursor:pointer; }
.ic-form-radio-item:hover,.ic-form-check-item:hover { border-color:color-mix(in srgb,var(--accent) 48%,var(--border)); }
.ic-form-radio-item input,.ic-form-check-item input { accent-color:var(--accent); }
.ic-form-file { display:flex; align-items:center; gap:9px; min-height:42px; padding:7px; border:1px dashed var(--border); border-radius:9px; }
.ic-form-file-btn { padding:6px 9px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--accent); cursor:pointer; font-family:var(--font); font-size:9px; }
.ic-form-file-btn:hover { background:var(--bg2); }
.ic-form-file-list { min-width:0; color:var(--text2); font-size:8px; word-break:break-word; }
.ic-form-note { margin-top:2px; }
.ic-form-note textarea { box-sizing:border-box; width:100%; min-height:54px; padding:7px 9px; border:1px solid var(--border); border-radius:8px; outline:none; resize:vertical; background:var(--bg); color:var(--text); font-family:var(--font); font-size:10px; }
.ic-form-note textarea:focus { border-color:var(--accent); }
.ic-field-error { margin-top:4px; color:var(--red); font-size:8px; line-height:1.4; }
.ic-field-error[hidden] { display:none; }
.ic-card-status { padding:8px 13px 9px 60px; border-top:1px solid color-mix(in srgb,var(--border) 62%,transparent); color:var(--text2); font-size:9px; line-height:1.45; }
.ic-card-status:empty { display:none; }
.ic-card-status.is-error { color:var(--red); background:color-mix(in srgb,var(--red) 7%,transparent); }
.ic-card-status.is-unknown { color:color-mix(in srgb,var(--orange) 72%,var(--text)); background:color-mix(in srgb,var(--orange) 8%,transparent); }
.ic-card-status.is-success { color:color-mix(in srgb,var(--green) 72%,var(--text)); }
.ic-card-status.is-pending { color:color-mix(in srgb,var(--accent) 72%,var(--text)); }
.ic-submitted-banner { padding:8px 13px 9px 60px; border-top:1px solid color-mix(in srgb,var(--green) 28%,var(--border)); background:color-mix(in srgb,var(--green) 8%,transparent); color:color-mix(in srgb,var(--green) 72%,var(--text)); font-size:9px; }
.ic-receipt { margin-top:10px; padding:9px 10px; border:1px solid color-mix(in srgb,var(--green) 34%,var(--border)); border-radius:9px; background:color-mix(in srgb,var(--green) 6%,transparent); }
.ic-receipt-title { margin-bottom:6px; color:color-mix(in srgb,var(--green) 70%,var(--text)); font-size:8px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.ic-receipt-grid { display:grid; grid-template-columns:minmax(72px,.45fr) minmax(0,1fr); gap:4px 8px; }
.ic-receipt-grid span { color:var(--text2); }
.ic-receipt-grid strong { color:var(--text); font-weight:600; word-break:break-word; }
.ic-receipt-result { max-height:180px; margin:7px 0 0; overflow:auto; color:var(--text); white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:9px; }
.ic-opt-desc { display:block; margin-top:2px; color:var(--text2); font-size:8px; }
@media (max-width:560px) { .ic-card-body,.ic-card-actions,.ic-card-status,.ic-submitted-banner { padding-left:13px; } .ic-card-icon { min-width:32px; } }
@media (prefers-reduced-motion:reduce) { .ic-card,.ic-form-input,.ic-form-textarea,.ic-form-select { transition:none; } }
.tasks-badge { background:var(--orange); color:#fff; border-radius:999px; font-size:8px; min-width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; padding:0 3px; font-weight:700; }

/* Message controls must be styled before the first assistant response. */
.msg-hide-toggle { position:absolute; top:4px; right:6px; margin:0; border:0; border-radius:4px; background:var(--bg2, #161b22); color:var(--text2, #8b949e); font:10px/1.4 var(--font, sans-serif); padding:2px 5px; cursor:pointer; opacity:0; pointer-events:none; }
.msg:hover .msg-hide-toggle, .msg:focus-within .msg-hide-toggle { opacity:1; pointer-events:auto; }
.msg-hide-toggle:focus-visible, .hidden-chip:focus-visible, .thinking-header:focus-visible { outline:2px solid var(--accent, #58a6ff); outline-offset:2px; }
.msg-hide-toggle:hover { color:var(--text, #e6edf3); }
.msg .label { padding-right:36px; }
.msg-hidden { display:none !important; }
#chatMessages.show-hidden .msg-hidden { display:block !important; opacity:.65; outline:1px dashed var(--border); }
.hidden-chip { display:flex; width:100%; box-sizing:border-box; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 8px; padding:4px 8px; font:10px/1.5 var(--font, sans-serif); color:var(--text2); background:transparent; border:0; border-bottom:1px solid var(--border); cursor:pointer; }
.hidden-chip .hc-act { color:var(--accent); }
.thinking-header::before { content:'▸'; }
.thinking-header[aria-expanded="true"]::before { content:'▾'; }
@media (hover:none) { .msg-hide-toggle { opacity:1; pointer-events:auto; } }

/* Keep window placement separate from conversational actions. */
.ai-header-controls { flex:1; min-width:0; margin-left:10px; overflow:visible; }
.ai-window-controls { margin-left:auto; display:flex; align-items:center; gap:4px; }
.ai-window-controls .chat-collapse-btn { margin-left:0; }
.ai-header { position:relative; z-index:12; }
.ca-menu-panel { max-height:min(60vh,420px); overflow-y:auto; }

.assistant-scoped .ai-header .ca-menu { position:static; }
.assistant-scoped .ai-header .ca-menu-panel { top:100%; right:8px; width:min(320px,calc(100% - 16px)); min-width:0; }

#detailSearch{margin:6px 8px;padding:6px 8px;min-width:0;border:1px solid var(--border,#444);border-radius:5px;background:var(--bg,#17191e);color:inherit} #detailBody>[hidden]{display:none!important}
