/*
 * 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));
}

/* === 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; }
/* 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; align-items:center; gap:8px; padding:4px 12px; font-size:9px; color:var(--text2); background:var(--bg2); border-bottom:1px solid var(--border); white-space:nowrap; }
.agent-status-strip .ass-item { display:inline-flex; align-items:center; gap:3px; min-width:0; }
.agent-status-strip .ass-workspace { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.agent-status-strip .ass-version { flex:0 0 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:150px; 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:linear-gradient(180deg,rgba(13,18,26,0.96) 0%,rgba(11,16,24,0.98) 100%); }
.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; }
.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:linear-gradient(180deg, rgba(13,18,26,0.96) 0%, rgba(11,16,24,0.98) 100%); }
body.runtime-shell .runtime-chat-card-stack { display:flex; }
.runtime-chat-card { padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.03); box-shadow:inset 0 1px 0 rgba(255,255,255,0.02); }
.runtime-chat-card.context { border-color:rgba(88,166,255,0.22); background:linear-gradient(180deg, rgba(88,166,255,0.08) 0%, rgba(24,34,48,0.16) 100%); }
.runtime-chat-card.artifacts { border-color:rgba(63,185,80,0.2); background:linear-gradient(180deg, rgba(63,185,80,0.08) 0%, rgba(20,32,25,0.18) 100%); }
.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; }
.runtime-chat-card-kicker { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); color:var(--text2); font-size:8px; text-transform:uppercase; letter-spacing:0.55px; }
.runtime-chat-card.context .runtime-chat-card-kicker { color:#dcebff; border-color:rgba(88,166,255,0.24); background:rgba(88,166,255,0.1); }
.runtime-chat-card.artifacts .runtime-chat-card-kicker { color:#d7ffe0; 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 rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); 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 rgba(255,255,255,0.05); background:rgba(0,0,0,0.14); }
.runtime-chat-card-kv span { display:block; font-size:8px; color:var(--accent); 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 rgba(255,255,255,0.05); background:rgba(0,0,0,0.14); }
.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:#dcebff; border-color:rgba(88,166,255,0.34); background:rgba(88,166,255,0.1); }
.runtime-chat-btn.success { color:#d7ffe0; 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) */
.chat-input-area { border-top:1px solid var(--border); background:linear-gradient(180deg, rgba(13,17,23,0.98) 0%, rgba(20,25,33,0.98) 100%); 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:rgba(28,34,44,0.95); 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:linear-gradient(180deg, #121922 0%, #0f151d 100%); border:1px solid #2a3441; 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.18); }
.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; }
.chat-input-row textarea::placeholder { color:#778291; }
.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); }
.chat-input-row button.send-btn { background:linear-gradient(180deg, #58a6ff 0%, #3e8ae0 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(32,96,176,0.25); }
.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; }
.chat-bottom-meta .cbm-model { color:var(--accent); }
.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:rgba(20,27,35,0.95); 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; }

/* 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:rgba(15,20,27,0.95); 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; }
.msg.user { background:var(--bg3); border:1px solid var(--border); }
.msg.assistant { background:#161b22; border:1px solid #30363d; }
.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; }

/* 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; }

/* 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:linear-gradient(180deg, rgba(22,27,34,0.95) 0%, rgba(16,21,28,0.95) 100%); 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:#dcebff; }
.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:#d7ffe0; }
.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:#d7ffe0; 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; }
.detail-header .dh-title { font-weight:600; color:var(--orange); }
.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:linear-gradient(180deg, #161c25 0%, #131922 100%); 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 --- */
.ic-card { margin:4px 0; border-radius:6px; border:1px solid var(--border); background:var(--bg2); overflow:hidden; transition:border-color 0.15s ease; }
.ic-card.ic-running { border-color:var(--orange); }
.ic-card.ic-done,.ic-card.ic-resolved { border-color:var(--green); }
.ic-card.ic-error,.ic-card.ic-rejected { border-color:var(--red); }
.ic-card.ic-waiting { border-color:var(--yellow,#d29922); }
.ic-card.ic-archived { opacity:0.8; }
.ic-card-header { display:flex; align-items:center; gap:6px; padding:6px 8px; cursor:pointer; user-select:none; }
.ic-card-header:hover { background:rgba(255,255,255,0.03); }
.ic-card-icon { font-size:12px; flex-shrink:0; }
.ic-card-title { font-size:10px; font-weight:600; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ic-card-badge { font-size:8px; color:var(--text2); text-transform:uppercase; }
.ic-card-duration { font-size:8px; color:var(--text2); font-variant-numeric:tabular-nums; }
.ic-card-body { display:none; padding:4px 8px 6px; font-size:9px; color:var(--text2); }
.ic-card-body.open { display:block; }
.ic-card-kv { display:flex; gap:4px; padding:2px 0; }
.ic-card-kv-k { color:var(--text2); min-width:60px; }
.ic-card-kv-v { color:var(--text); 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; gap:4px; padding:4px 8px 6px; }
.ic-card-action { font-size:9px; padding:3px 8px; border-radius:3px; border:1px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer; font-family:var(--font); }
.ic-card-action:hover { background:var(--bg3); }
.ic-card-action.primary { border-color:var(--accent); color:var(--accent); }
.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.ic-collapsed .ic-card-body,.ic-card.ic-collapsed .ic-card-actions { display:none !important; }
.ic-card.ic-collapsed .ic-card-header { padding:4px 8px; }

/* Cards rendered inline in the chat stream */
.chat-messages .ic-card,
#aiTabChat .chat-messages .ic-card { margin:6px 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:sticky; top:0; z-index:5; 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:var(--yellow,#d29922); border-width:2px; }
.ic-card.ic-blocking .ic-card-header { background:rgba(210,153,34,0.06); }

/* InteractiveCard forms */
.ic-form { padding:6px 8px 8px; }
.ic-form-field { margin:6px 0; }
.ic-form-label { display:block; font-size:9px; font-weight:600; color:var(--text); margin-bottom:3px; }
.ic-form-label .ic-req { color:var(--red); margin-left:2px; }
.ic-form-desc { font-size:8px; color:var(--text2); margin-bottom:3px; }
.ic-form-input,.ic-form-textarea,.ic-form-select { width:100%; box-sizing:border-box; font-family:var(--font); font-size:10px; padding:5px 7px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); outline:none; }
.ic-form-input:focus,.ic-form-textarea:focus,.ic-form-select:focus { border-color:var(--accent); }
.ic-form-textarea { min-height:48px; resize:vertical; }
.ic-form-select { appearance:auto; }
.ic-form-checkbox { display:flex; align-items:center; gap:6px; }
.ic-form-checkbox input { accent-color:var(--accent); }
.ic-form-radio-group,.ic-form-checklist { display:flex; flex-direction:column; gap:4px; }
.ic-form-radio-item,.ic-form-check-item { display:flex; align-items:center; gap:6px; font-size:9px; color:var(--text); }
.ic-form-radio-item input,.ic-form-check-item input { accent-color:var(--accent); }
.ic-form-file { display:flex; align-items:center; gap:6px; }
.ic-form-file-btn { font-size:9px; padding:3px 8px; border:1px dashed var(--border); border-radius:4px; background:var(--bg); color:var(--accent); cursor:pointer; font-family:var(--font); }
.ic-form-file-btn:hover { background:var(--bg2); }
.ic-form-file-list { font-size:8px; color:var(--text2); }
.ic-form-note { margin:8px 0 4px; }
.ic-form-note textarea { width:100%; box-sizing:border-box; font-family:var(--font); font-size:10px; padding:5px 7px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); min-height:36px; resize:vertical; outline:none; }
.ic-form-note textarea:focus { border-color:var(--accent); }
.ic-submitted-banner { padding:6px 8px; font-size:9px; color:var(--green); background:rgba(63,185,80,0.08); border-top:1px solid rgba(63,185,80,0.2); }
.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; }