/* ==================================================================
   Kilo Webhook — Main Stylesheet
   Extracted from index.html inline styles
   ================================================================== */

/* --- Quick Wins: Global improvements --- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
button, .btn, [role="button"] { min-height: 28px; }

:root {
  --bg: #0d0d10;
  --surface: #131317;
  --surface2: #1a1a20;
  --surface3: #222229;
  --surface4: #2a2a33;
  --border: #2a2a35;
  --border2: #38383f;
  --text: #e2e2e8;
  --text2: #a0a0b0;
  --muted: #60607a;
  --accent: #c850f9;
  --accent-dim: rgba(200,80,249,.15);
  --accent-hover: #d966ff;
  --blue: #4da6ff;
  --blue-dim: rgba(77,166,255,.12);
  --green: #3dde8a;
  --green-dim: rgba(61,222,138,.12);
  --red: #f55;
  --red-dim: rgba(255,85,85,.12);
  --yellow: #ffc844;
  --yellow-dim: rgba(255,200,68,.1);
  --orange: #ff8c42;
  --tool-bg: #111118;
  --thinking-color: #a0a0ff;
  --radius: 6px;
  --radius-lg: 10px;
  --font-mono: 'Cascadia Code','JetBrains Mono','Fira Code','Consolas',monospace;
  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --sidebar-w: 280px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px}

/* ═══ GLOBAL LOADING BAR ═══════════════════════════════════════════════════ */
#loadingBar{
  position:fixed;top:0;left:0;z-index:9999;
  width:0;height:2.5px;
  background:linear-gradient(90deg,var(--accent),#7c3aed,var(--blue));
  box-shadow:0 0 8px rgba(200,80,249,.5);
  transition:width .25s ease-out;
  pointer-events:none;
}
#loadingBar.running{width:15%}
#loadingBar.done{width:100%;opacity:0;transition:width .35s ease-out,opacity .4s ease-out .2s}
#loadingBar.hidden{width:0;opacity:0;transition:none}

/* ═══ LAYOUT ════════════════════════════════════════════════════════════════ */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.main{display:flex;flex:1;min-height:0;overflow:hidden}

/* ═══ TOPBAR ════════════════════════════════════════════════════════════════ */
.topbar{
  display:flex;align-items:center;gap:8px;
  height:44px;padding:0 12px;
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;z-index:20;
}
.topbar-logo{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;color:#fff;letter-spacing:-.5px;
}
.topbar-title{font-weight:700;font-size:.85rem;letter-spacing:-.02em;color:var(--text)}
.topbar-badge{
  font-size:.75rem;font-weight:700;
  background:var(--accent);color:#fff;
  padding:1px 6px;border-radius:100px;
}
.topbar-spacer{flex:1}
.topbar-status{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--muted)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;transition:all .3s}
.status-dot.ok{background:var(--green);box-shadow:0 0 6px var(--green)}
.status-dot.error{background:var(--red);box-shadow:0 0 6px var(--red)}
.status-dot.busy{background:var(--yellow);box-shadow:0 0 6px var(--yellow);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.tb-btn{
  padding:4px 10px;border-radius:5px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);
  transition:all .15s;white-space:nowrap;
}
.tb-btn:hover{background:var(--surface3);border-color:var(--border2);color:var(--text)}
.tb-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.tb-btn.danger:hover{background:var(--red-dim);border-color:var(--red);color:var(--red)}

/* ═══ SIDEBAR ════════════════════════════════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--border);
  overflow:hidden;
}
.sidebar.collapsed{width:0}

/* Resize handle (sidebar / chat splitter) */
.resize-handle{
  width:4px;flex-shrink:0;cursor:col-resize;
  background:transparent;transition:background .15s;
  position:relative;z-index:10;
}
.resize-handle:hover,.resize-handle.dragging{
  background:var(--accent);
}
.resize-handle::after{
  content:'';position:absolute;inset:-3px -4px;
}
/* Preview panel resize handle (vertical) */
.resize-handle-v{
  height:4px;flex-shrink:0;cursor:row-resize;
  background:var(--border);transition:background .15s;
  position:relative;z-index:10;
  display:none; /* hidden until preview opens */
}
.resize-handle-v:hover,.resize-handle-v.dragging{
  background:var(--accent);
}
.resize-handle-v::after{
  content:'';position:absolute;inset:-4px -3px;
}

/* Download button on tree nodes */
.ws-dl-btn{
  width:18px;height:18px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;border-radius:3px;
  display:none;align-items:center;justify-content:center;
  font-size:.75rem;flex-shrink:0;transition:all .1s;
}
.ws-tree-node:hover .ws-dl-btn{display:inline-flex}
.ws-dl-btn:hover{background:var(--accent-dim);color:var(--accent)}
.ws-dl-btn.downloading{opacity:.6;pointer-events:none}

/* Drag & Drop overlay */
.drop-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.5);display:none;
  align-items:center;justify-content:center;
  flex-direction:column;gap:12px;
  border:3px dashed var(--accent);
  pointer-events:none;
}
.drop-overlay.active{
  display:flex;border-color:var(--accent);
}
.drop-overlay.hover{
  border-color:var(--green);background:rgba(0,0,0,.55);
}
.drop-overlay .drop-icon{font-size:3rem;opacity:.8}
.drop-overlay .drop-text{font-size:1rem;color:var(--text);font-weight:600}
.drop-overlay .drop-sub{font-size:.75rem;color:var(--muted)}
.drop-overlay .drop-progress{
  width:240px;height:4px;background:var(--surface3);
  border-radius:2px;overflow:hidden;display:none;
}
.drop-overlay .drop-progress-bar{
  height:100%;background:var(--accent);
  transition:width .2s;width:0%;
}

/* Drop target indicator on tree nodes */
.ws-tree-node.drop-target{
  outline:2px solid var(--accent);
  outline-offset:-2px;
  background:var(--accent-dim);
}

.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.sidebar-header h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.icon-btn{
  width:22px;height:22px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  transition:all .15s;flex-shrink:0;
}
.icon-btn:hover{background:var(--surface3);color:var(--text)}

.session-list{flex:1;overflow-y:auto;padding:6px}
.session-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;border-radius:var(--radius);
  cursor:pointer;transition:all .15s;margin-bottom:2px;
  border:1px solid transparent;
}
.session-item:hover{background:var(--surface2)}
.session-item.active{background:var(--accent-dim);border-color:var(--accent)}
.session-item-icon{font-size:.8rem;flex-shrink:0;opacity:.7}
.session-item-content{flex:1;min-width:0}
.session-item-title{font-size:.75rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-item-meta{font-size:.75rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-item-actions{display:none;gap:2px}
.session-item:hover .session-item-actions{display:flex}
.session-item:focus-within .session-item-actions{display:flex}
.session-item .icon-btn{width:18px;height:18px;font-size:.75rem}

/* Session status dot */
.session-status-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  display:inline-block;margin-right:3px;vertical-align:middle;
}
.session-status-dot.running{background:var(--yellow);box-shadow:0 0 4px var(--yellow);animation:pulse 1s infinite}
.session-status-dot.idle{background:var(--green);box-shadow:0 0 3px var(--green)}
.session-status-dot.archived{background:var(--muted)}
.session-status-dot.error{background:var(--red)}

/* Session message count badge */
.session-msg-badge{
  font-size:.75rem;font-weight:700;color:var(--muted);
  background:var(--surface3);border-radius:3px;
  padding:0 5px;white-space:nowrap;flex-shrink:0;
  display:inline-flex;align-items:center;gap:2px;
}
.session-msg-badge.has-msgs{color:var(--text2)}

/* Refresh & new-session buttons in sidebar header */
.sidebar-btn-group{display:flex;gap:3px}
.sidebar-btn{
  padding:4px 10px;border-radius:5px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);
  transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;
}
.sidebar-btn:hover{background:var(--surface3);border-color:var(--border2);color:var(--text)}
.sidebar-btn:active{transform:scale(.97)}
.sidebar-btn.loading{opacity:.6;pointer-events:none;cursor:wait}
.sidebar-btn.loading::after{content:'';display:inline-block;width:8px;height:8px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite;margin-left:2px}
.sidebar-btn.primary{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.sidebar-btn.primary:hover{background:var(--accent);color:#fff}
.sidebar-btn:disabled{opacity:.4;pointer-events:none;cursor:not-allowed}
@keyframes spin{to{transform:rotate(360deg)}}

/* Session detail panel (expandable under the list) */
.session-detail-panel{
  border-top:1px solid var(--border);background:var(--surface2);
  padding:10px 12px;display:none;flex-shrink:0;
  max-height:45%;overflow-y:auto;font-size:.75rem;
}
.session-detail-panel.open{display:block}
.session-detail-grid{
  display:grid;grid-template-columns:80px 1fr;gap:4px 8px;
  font-size:.75rem;line-height:1.6;
}
.session-detail-grid .slbl{color:var(--muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
.session-detail-grid .sval{color:var(--text);word-break:break-all}
.session-detail-actions{
  display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
}
.session-detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.session-detail-title{font-size:.78rem;font-weight:700;color:var(--text)}

/* Session list loading indicator */
.session-loading{
  display:flex;align-items:center;justify-content:center;
  gap:6px;padding:16px;color:var(--muted);font-size:.75rem;
}
.session-loading .spinner{
  width:12px;height:12px;border:2px solid var(--border2);
  border-right-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite;
}

/* Focus outline for session items */
.session-item:focus-visible{
  outline:2px solid var(--accent);outline-offset:-1px;
  border-radius:var(--radius);
}

/* ═══ Enhanced Session Panel: Tabs ═════════════════════════════════════════ */
.session-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--border);
  padding:0 8px;flex-shrink:0;
}
.session-tab-btn{
  padding:5px 12px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;font-size:.75rem;
  font-weight:600;font-family:var(--font-sans);
  border-bottom:2px solid transparent;
  transition:all .15s;white-space:nowrap;
}
.session-tab-btn:hover{color:var(--text2);background:var(--surface2)}
.session-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.session-tab-btn .tab-count{
  font-size:.75rem;color:var(--muted);
  background:var(--surface3);border-radius:3px;
  padding:0 4px;margin-left:4px;
}

/* ═══ Enhanced Session Panel: Search & Filter ══════════════════════════════ */
.session-search-wrap{
  display:flex;gap:4px;padding:6px 8px;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.session-search{
  flex:1;min-width:0;
  padding:5px 8px;border-radius:5px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text);font-size:.75rem;
  font-family:var(--font-sans);outline:none;
  transition:border-color .15s;
}
.session-search:focus{border-color:var(--accent)}
.session-search::placeholder{color:var(--muted)}
.session-filter-select{
  padding:5px 4px;border-radius:5px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);font-size:.75rem;
  font-family:var(--font-sans);cursor:pointer;max-width:95px;
}

/* ═══ Session Checkbox & Pin Toggle ════════════════════════════════════════ */
.session-checkbox{
  width:18px;height:18px;flex-shrink:0;
  border:1.5px solid var(--border2);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;font-size:.75rem;
}
.session-checkbox:hover{border-color:var(--accent);background:var(--accent-dim)}
.session-item.selected .session-checkbox{
  border-color:var(--accent);background:var(--accent-dim);color:var(--accent);
}
.checkbox-mark{color:var(--accent);font-weight:700;line-height:1}

.session-pin{
  width:16px;height:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.75rem;color:var(--muted);
  transition:all .15s;border-radius:2px;
}
.session-pin:hover{color:var(--yellow)}
.session-pin.active{color:var(--yellow);text-shadow:0 0 4px rgba(255,200,68,.4)}

/* Pinned session indicator (subtle left border accent) */
.session-item.pinned{border-left:2px solid var(--yellow)}

/* Selected session state */
.session-item.selected{background:var(--blue-dim);border-color:var(--blue)}

/* ═══ Tag Badge ═════════════════════════════════════════════════════════════ */
.tag-badge{
  display:inline-block;font-size:.75rem;font-weight:600;
  background:var(--surface3);color:var(--text2);
  border-radius:3px;padding:0 4px;margin-right:2px;
  white-space:nowrap;vertical-align:middle;
}

/* ═══ Batch Operations Bar ══════════════════════════════════════════════════ */
.batch-bar{
  display:none;align-items:center;gap:6px;padding:5px 8px;
  background:var(--blue-dim);border-bottom:1px solid var(--blue);
  flex-shrink:0;font-size:.75rem;font-weight:600;color:var(--blue);
}
.batch-bar .batch-count{flex:1}
.batch-bar .batch-btn{
  padding:3px 8px;border-radius:4px;border:1px solid var(--blue);
  background:transparent;color:var(--blue);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);
  transition:all .15s;white-space:nowrap;
}
.batch-bar .batch-btn:hover{background:var(--blue-dim)}
.batch-bar .batch-btn.danger{color:var(--red);border-color:var(--red-dim)}
.batch-bar .batch-btn.danger:hover{background:var(--red-dim)}

/* ═══ Crawl Progress Indicator ═════════════════════════════════════════ */
.crawl-status{
  display:flex;align-items:center;gap:8px;padding:8px 16px;margin:0 16px 8px;
  background:var(--surface2);border:1px solid var(--border2);border-radius:8px;
  font-size:.75rem;color:var(--text2);animation:crawlPulse 1.5s ease-in-out infinite;
}
.crawl-status.done{animation:none;border-color:var(--green);color:var(--green)}
.crawl-status.error{animation:none;border-color:var(--red);color:var(--red);background:var(--red-dim)}
.crawl-status.browser{animation:none;border-color:#c850f9;color:#c850f9;background:rgba(200,80,249,.08)}
.crawl-spinner{
  width:14px;height:14px;border:2px solid var(--border2);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite;flex-shrink:0;
}
@keyframes crawlPulse{
  0%,100%{border-color:var(--border2)}
  50%{border-color:var(--accent-dim)}
}


/* ═══ CHAT AREA ══════════════════════════════════════════════════════════════ */
.chat-wrap{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}

.chat-header{
  display:flex;align-items:center;gap:8px;
  padding:0 14px;height:44px;
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.chat-header-title{font-size:.85rem;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-header-meta{font-size:.75rem;color:var(--muted);flex-shrink:0}

.chat-messages{
  flex:1;overflow-y:auto;padding:16px 0;
  scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ── Empty state ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:16px;color:var(--muted);text-align:center;padding:24px;
}
.empty-state-logo{
  width:64px;height:64px;border-radius:16px;
  background:linear-gradient(135deg,var(--accent),#7c3aed);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:900;color:#fff;
  box-shadow:0 8px 32px rgba(200,80,249,.3);
}
.empty-state h2{font-size:1.2rem;font-weight:700;color:var(--text);margin:0}
.empty-state p{font-size:.8rem;color:var(--text2);max-width:360px;line-height:1.6}
.quick-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.quick-action{
  padding:6px 14px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  font-size:.75rem;font-weight:500;transition:all .15s;font-family:var(--font-sans);
}
.quick-action:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}

/* ── Message bubbles ── */
.msg{padding:0 20px;margin-bottom:2px;max-width:100%}
.msg-inner{display:flex;gap:10px;align-items:flex-start}
.msg.assistant .msg-inner{flex-direction:row}
.msg.user .msg-inner{flex-direction:row-reverse}

.msg-avatar{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;margin-top:2px;
}
.msg.user .msg-avatar{background:var(--blue);color:#fff}
.msg.assistant .msg-avatar{background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff}

.msg-body{
  max-width:min(620px,80%);
  display:flex;flex-direction:column;gap:6px;
}
.msg.user .msg-body{align-items:flex-end}
.msg.assistant .msg-body{align-items:flex-start}

.msg-bubble{
  padding:10px 14px;border-radius:var(--radius-lg);
  font-size:.85rem;line-height:1.65;word-break:break-word;
}
.msg.user .msg-bubble{
  background:var(--blue);color:#fff;
  border-bottom-right-radius:3px;
}
.msg.assistant .msg-bubble{
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  border-bottom-left-radius:3px;
}
.msg.assistant .msg-bubble.streaming{
  border-color:var(--accent);
}

/* Attached files in user messages */
.msg-attachments{
  display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;
}
.msg-attach-pill{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:10px;
  background:var(--blue-dim);color:var(--blue);
  font-size:.7rem;font-family:var(--font-sans);
  border:1px solid var(--blue);
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Markdown inside assistant bubbles */
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3{
  font-size:1rem;font-weight:700;margin:.8em 0 .4em;color:var(--text)
}
.msg-bubble h4,.msg-bubble h5,.msg-bubble h6{font-size:.9rem;font-weight:600;margin:.6em 0 .3em}
.msg-bubble p{margin:.4em 0}
.msg-bubble p:first-child{margin-top:0}
.msg-bubble p:last-child{margin-bottom:0}
.msg-bubble ul,.msg-bubble ol{padding-left:1.4em;margin:.4em 0}
.msg-bubble li{margin:.2em 0}
.msg-bubble code{
  font-family:var(--font-mono);font-size:.8em;
  background:rgba(0,0,0,.3);padding:1px 5px;border-radius:3px;
}
.msg-bubble pre{
  background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:6px;
  padding:0;overflow-x:auto;margin:.6em 0;position:relative;
}
.msg-bubble pre code{background:none;padding:10px 12px;font-size:.78rem;display:block}
.msg-bubble .code-lang-label{
  display:flex;align-items:center;justify-content:space-between;
  padding:3px 12px;background:rgba(0,0,0,.3);border-bottom:1px solid var(--border);
  font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  font-family:var(--font-sans);user-select:none;
}
.msg-bubble .code-copy-btn{
  padding:2px 8px;border-radius:4px;border:1px solid var(--border);
  background:var(--surface3);color:var(--muted);cursor:pointer;
  font-size:.7rem;font-weight:600;font-family:var(--font-sans);
  transition:all .15s;white-space:nowrap;
  margin-left:8px;text-transform:none;letter-spacing:0;
}
.msg-bubble .code-copy-btn:hover{
  background:var(--surface4);border-color:var(--border2);color:var(--text);
}
.msg-bubble .code-copy-btn.copied{
  background:var(--green-dim);border-color:var(--green);color:var(--green);
}
.msg-bubble a{color:var(--blue);text-decoration:none}
.msg-bubble a:hover{text-decoration:underline}
.msg-bubble blockquote{
  border-left:3px solid var(--accent);padding-left:10px;
  color:var(--text2);margin:.4em 0;font-style:italic;
}
.msg-bubble table{border-collapse:collapse;width:100%;margin:.6em 0;font-size:.8rem}
.msg-bubble th,.msg-bubble td{border:1px solid var(--border);padding:5px 8px;text-align:left}
.msg-bubble th{background:var(--surface3);font-weight:600}

.msg-meta{
  font-size:.75rem;color:var(--muted);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 2px;
}
.msg.user .msg-meta{justify-content:flex-end}

/* ── Thinking block ── */
.thinking-block{
  background:rgba(160,160,255,.06);border:1px solid rgba(160,160,255,.15);
  border-radius:var(--radius);padding:8px 12px;margin-bottom:4px;
}
.thinking-label{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--thinking-color);margin-bottom:5px;display:flex;align-items:center;gap:5px;
}
.thinking-content{font-size:.78rem;color:var(--thinking-color);line-height:1.5;font-style:italic;white-space:pre-wrap}

/* ── Tool block ── */
.tool-block{
  background:var(--tool-bg);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;margin-bottom:4px;max-width:520px;
}
.tool-header{
  display:flex;align-items:center;gap:7px;padding:6px 10px;
  background:var(--surface2);cursor:pointer;
  font-size:.75rem;font-weight:600;color:var(--text2);
  transition:background .15s;user-select:none;
}
.tool-header:hover{background:var(--surface3)}
.tool-icon{font-size:.8rem;flex-shrink:0}
.tool-name{flex:1;font-family:var(--font-mono);color:var(--text)}
.tool-status{
  font-size:.75rem;padding:1px 6px;border-radius:4px;font-weight:600;
}
.tool-status.running{background:var(--yellow-dim);color:var(--yellow);animation:pulse 1s infinite}
.tool-status.done{background:var(--green-dim);color:var(--green)}
.tool-status.error{background:var(--red-dim);color:var(--red)}
.tool-time{font-size:.75rem;color:var(--muted)}
.tool-body{display:none;padding:8px 10px;border-top:1px solid var(--border)}
.tool-body.open{display:block}
.tool-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-weight:600}
.tool-code{
  font-family:var(--font-mono);font-size:.75rem;color:var(--text2);
  white-space:pre-wrap;word-break:break-all;line-height:1.5;
  max-height:200px;overflow-y:auto;background:rgba(0,0,0,.2);
  padding:6px 8px;border-radius:4px;
}

/* ── Agent switch ── */
.agent-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:100px;
  background:var(--accent-dim);border:1px solid var(--accent);
  font-size:.75rem;font-weight:700;color:var(--accent);
  margin-bottom:4px;
}

/* ── Todo list ── */
.todo-block{
  background:var(--surface3);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 10px;max-width:400px;margin-bottom:4px;
}
.todo-title{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-weight:600}
.todo-item{
  display:flex;align-items:center;gap:7px;font-size:.75rem;
  padding:2px 0;color:var(--text2);
}
.todo-item.done{color:var(--muted);text-decoration:line-through}
.todo-item.in_progress{color:var(--blue)}
.todo-checkbox{
  width:14px;height:14px;border-radius:3px;border:1px solid var(--border2);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;
}
.todo-item.done .todo-checkbox{background:var(--green);border-color:var(--green);color:#fff}
.todo-item.in_progress .todo-checkbox{border-color:var(--blue)}

/* ── Permission ── */
.perm-block{
  background:var(--yellow-dim);border:1px solid var(--yellow);
  border-radius:var(--radius);padding:10px 12px;max-width:400px;margin-bottom:4px;
}
.perm-title{font-size:.75rem;font-weight:600;color:var(--yellow);margin-bottom:4px}
.perm-meta{font-size:.75rem;color:var(--text2)}
.perm-approved{color:var(--green);font-size:.75rem;margin-top:4px;font-weight:600}

/* ── Typing indicator ── */
.typing-indicator{
  display:flex;align-items:center;gap:4px;padding:8px 12px;
}
.typing-dot{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:bounce .8s infinite;
}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ═══ INPUT AREA ═════════════════════════════════════════════════════════════ */
.input-area{
  padding:12px 16px 16px;background:var(--bg);
  border-top:1px solid var(--border);flex-shrink:0;
  position:relative;
}
.input-toolbar{
  display:flex;align-items:center;gap:6px;margin-bottom:8px;
}
.input-select{
  padding:3px 8px;border-radius:5px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);font-size:.75rem;
  font-family:var(--font-sans);cursor:pointer;outline:none;
  max-width:160px;
}
.input-select:focus{border-color:var(--accent)}
.input-spacer{flex:1}

/* Recent combo chips */
.recent-combos{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:2px 0;
}
.recent-combos-label{
  font-size:.68rem;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
  flex-shrink:0;margin-right:2px;
}
.recent-combo-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:4px;
  border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);
  font-size:.7rem;font-family:var(--font-sans);
  cursor:pointer;transition:all .12s;
  white-space:nowrap;max-width:260px;
  overflow:hidden;text-overflow:ellipsis;
}
.recent-combo-chip:hover{
  background:var(--surface3);border-color:var(--accent);
  color:var(--text);
}
.recent-combo-chip .rc-agent{color:var(--accent);font-weight:600}
.recent-combo-chip .rc-sep{color:var(--muted)}
.recent-combo-chip .rc-model{color:var(--text2);opacity:.8}

.input-box{
  display:flex;align-items:flex-end;gap:8px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:8px 10px;
  transition:border-color .15s;position:relative;
}
.input-box:focus-within{border-color:var(--accent)}
.input-textarea{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--font-sans);font-size:.85rem;
  line-height:1.5;resize:none;max-height:220px;min-height:22px;
  overflow-y:auto;
}
.input-textarea::placeholder{color:var(--muted)}
.input-textarea::-webkit-scrollbar{width:3px}
.input-textarea::-webkit-scrollbar-thumb{background:var(--border2)}

/* Autocomplete ghost text */
.autocomplete-ghost{
  position:absolute;top:0;left:0;right:0;bottom:0;
  pointer-events:none;overflow:hidden;
  font-family:var(--font-sans);font-size:.85rem;line-height:1.5;
  color:transparent;white-space:pre-wrap;word-wrap:break-word;
  padding:0 0 0 0;
}
.autocomplete-ghost span{color:var(--muted)}

.send-btn{
  width:34px;height:34px;border-radius:8px;border:none;
  background:var(--accent);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1rem;transition:all .15s;
}
.send-btn:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.05)}
.send-btn:disabled{background:var(--surface4);cursor:not-allowed;opacity:.6}
.send-btn.stop{background:var(--red);position:relative}
.send-btn.stop:hover:not(:disabled){background:#ff3333}

.input-hint{font-size:.75rem;color:var(--muted);text-align:center;margin-top:6px}
.input-hint kbd{
  font-family:var(--font-mono);font-size:.75rem;
  background:var(--surface3);border:1px solid var(--border);
  padding:0 4px;border-radius:3px;
}

/* ── Attachment pills ────────────────────────────────────────────────── */
.attach-pills{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:0 0 6px 0;min-height:0;
}
.attach-pills:empty{display:none}
.attach-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:12px;
  background:var(--accent-dim);color:var(--accent);
  font-size:.72rem;font-family:var(--font-sans);
  border:1px solid var(--accent);max-width:220px;
  animation:scaleIn .15s ease-out both;
}
.attach-pill .pill-icon{font-size:.7rem;flex-shrink:0}
.attach-pill .pill-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-pill .pill-remove{
  width:14px;height:14px;border-radius:50%;border:none;
  background:transparent;color:var(--accent);cursor:pointer;
  font-size:.6rem;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;opacity:.6;transition:opacity .1s;
}
.attach-pill .pill-remove:hover{opacity:1;background:var(--accent);color:#fff}

/* ── + Attach button ─────────────────────────────────────────────────── */
.attach-btn{
  width:34px;height:34px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface3);
  color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1.2rem;font-weight:700;
  transition:all .15s;position:relative;
}
.attach-btn:hover{background:var(--surface4);border-color:var(--border2);color:var(--text)}

/* ── Attach dropdown menu ────────────────────────────────────────────── */
.attach-menu{
  position:absolute;bottom:calc(100% + 6px);left:auto;right:76px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,.4);
  z-index:300;min-width:180px;overflow:hidden;
  animation:scaleIn .12s ease-out both;
}
.attach-menu-item{
  padding:8px 14px;font-size:.78rem;color:var(--text2);
  cursor:pointer;transition:background .1s;white-space:nowrap;
  font-family:var(--font-sans);
}
.attach-menu-item:hover{background:var(--accent-dim);color:var(--accent)}

/* ── File reference @ dropdown ───────────────────────────────────────── */
.file-ref-dropdown{
  position:absolute;bottom:100%;left:0;right:0;
  max-height:200px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);box-shadow:0 -4px 16px rgba(0,0,0,.4);
  z-index:300;display:none;
}
.file-ref-dropdown.open{display:block}
.file-ref-item{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;font-size:.75rem;color:var(--text2);
  cursor:pointer;font-family:var(--font-mono);
  transition:background .08s;
}
.file-ref-item:hover,.file-ref-item.active{background:var(--accent-dim);color:var(--accent)}
.file-ref-item .ref-icon{font-size:.8rem;flex-shrink:0}
.file-ref-item .ref-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Input-box drag-over state ───────────────────────────────────────── */
.input-box.drag-over{
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 12px rgba(200,80,249,.15);
}
.input-box.drag-over::after{
  content:'Drop file to attach';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(26,27,38,.92);color:var(--accent);
  font-size:.85rem;font-weight:600;font-family:var(--font-sans);
  border-radius:var(--radius-lg);z-index:50;pointer-events:none;
}

/* ═══ MESSAGE ACTION BUTTONS (Copy / Retry) ═══════════════════════════════════ */
.msg-actions{
  display:inline-flex;align-items:center;gap:3px;
  flex-shrink:0;vertical-align:middle;
  opacity:0;transition:opacity .15s;
}
.msg-bubble:hover .msg-actions{opacity:1}
.msg-copy-btn,.msg-retry-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);color:var(--muted);cursor:pointer;
  font-size:.75rem;flex-shrink:0;
  transition:background .15s,border-color .15s,color .15s;
}
.msg-copy-btn:hover,.msg-retry-btn:hover{
  background:var(--surface4);border-color:var(--border2);color:var(--text);
}
.msg-copy-btn.copied{
  background:var(--green-dim);border-color:var(--green);color:var(--green);
}
.msg-retry-btn:hover{
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
}

/* ═══ TEXT-TO-SPEECH (Read Aloud) ═════════════════════════════════════════════ */
.speak-msg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);color:var(--muted);cursor:pointer;
  font-size:.75rem;flex-shrink:0;
  opacity:0;transition:opacity .15s,background .15s,border-color .15s,color .15s;
  margin-left:4px;vertical-align:middle;
}
.msg-bubble:hover .speak-msg-btn,
.msg-bubble .speak-msg-btn.speaking{opacity:1}
.speak-msg-btn:hover{background:var(--surface4);border-color:var(--border2);color:var(--text)}
.speak-msg-btn.speaking{
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
  animation:speak-pulse .8s infinite;
}
@keyframes speak-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,80,249,.35)}
  50%{box-shadow:0 0 6px 2px rgba(200,80,249,.5)}
}

/* TTS button near input area (global speak/stop) */
.tts-float-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface3);color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.9rem;transition:all .2s;position:relative;
}
.tts-float-btn:hover:not(:disabled){background:var(--surface4);border-color:var(--border2);color:var(--text)}
.tts-float-btn:disabled{opacity:.5;cursor:not-allowed}
.tts-float-btn.speaking{
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
  animation:speak-pulse .8s infinite;
}
.tts-status{
  font-size:.75rem;color:var(--muted);
  display:flex;align-items:center;gap:4px;
  white-space:nowrap;transition:color .2s;
}
.tts-status.speaking{color:var(--accent)}

/* TTS auto-read toggle in the input toolbar */
.tts-auto-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:5px;border:1px solid var(--border);
  background:var(--surface2);color:var(--muted);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);
  transition:all .15s;white-space:nowrap;user-select:none;
}
.tts-auto-btn:hover{background:var(--surface3);border-color:var(--border2);color:var(--text)}
.tts-auto-btn.on{
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
}
.tts-auto-btn .tts-auto-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:currentColor;opacity:.4;transition:all .2s;
}
.tts-auto-btn.on .tts-auto-dot{
  opacity:1;box-shadow:0 0 4px currentColor;
  animation:speak-pulse 1.2s infinite;
}

/* ═══ VOICE ASSISTANT ═══════════════════════════════════════════════════════════ */
.voice-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface3);color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.85rem;transition:all .2s;position:relative;
}
.voice-btn:hover:not(:disabled){background:var(--surface4);border-color:var(--border2);color:var(--text)}
.voice-btn:disabled{opacity:.5;cursor:not-allowed}
.voice-btn.active{
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
}
.voice-btn.listening{
  background:var(--blue-dim);border-color:var(--blue);color:var(--blue);
  animation:voice-pulse 1.5s ease-in-out infinite;
}
.voice-btn.woken{
  background:var(--green-dim);border-color:var(--green);color:var(--green);
  animation:voice-pulse .6s ease-in-out infinite;
}
.voice-btn.processing{
  background:var(--yellow-dim);border-color:var(--yellow);color:var(--yellow);
}
.voice-btn .mic-ring{
  position:absolute;inset:-3px;border-radius:12px;
  border:2px solid transparent;transition:all .3s;
  opacity:0;
}
.voice-btn.listening .mic-ring{
  border-color:var(--blue);opacity:.5;animation:ring-expand 1.8s ease-out infinite;
}
@keyframes voice-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(77,166,255,0)}
  50%{box-shadow:0 0 8px 2px rgba(77,166,255,.35)}
}
@keyframes ring-expand{
  0%{inset:-3px;opacity:.6}
  100%{inset:-10px;opacity:0}
}

.voice-status{
  font-size:.75rem;color:var(--muted);
  display:flex;align-items:center;gap:4px;
  margin-left:4px;white-space:nowrap;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
  transition:color .2s;
}
.voice-status.inactive{color:var(--muted)}
.voice-status.listening{color:var(--blue)}
.voice-status.woken{color:var(--green)}
.voice-status.processing{color:var(--yellow)}
.voice-status.error{color:var(--red)}
.voice-status .vs-dot{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:currentColor;
}
.voice-status .vs-dot.pulse{animation:pulse 1s infinite}

/* ═══ SKILL FOLDERS ════════════════════════════════════════════════════════════ */
.folder-section{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.folder-section-title{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.folder-list{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.folder-item{
  display:flex;align-items:center;gap:6px;
  padding:5px 8px;border-radius:var(--radius);
  background:var(--surface3);font-size:.75rem;font-family:var(--font-mono);
}
.folder-item .folder-path{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.folder-item .folder-count{font-size:.75rem;color:var(--muted);white-space:nowrap}
.folder-item .folder-del{
  width:18px;height:18px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;
}
.folder-item .folder-del:hover{background:var(--red-dim);color:var(--red)}
.folder-add-row{display:flex;gap:6px}
.folder-add-row input{
  flex:1;padding:5px 8px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text);font-size:.75rem;font-family:var(--font-mono);outline:none;
}
.folder-add-row input:focus{border-color:var(--accent)}
.folder-add-row button{
  padding:4px 10px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--surface3);color:var(--text2);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);transition:all .15s;white-space:nowrap;
}
.folder-add-row button:hover{background:var(--surface4);color:var(--text)}
.folder-add-row button.browse-btn{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.folder-add-row button.browse-btn:hover{background:var(--accent);color:#fff}

/* Folder browser modal */
.folder-browser{max-height:400px;overflow-y:auto}
.folder-browser .browser-path{font-size:.75rem;font-family:var(--font-mono);color:var(--text2);margin-bottom:8px;padding:4px 8px;background:var(--surface3);border-radius:var(--radius);word-break:break-all}
.folder-browser .browser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px}
.folder-browser .browser-item{
  padding:6px 10px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--surface2);cursor:pointer;font-size:.75rem;
  display:flex;align-items:center;gap:6px;transition:all .1s;
}
.folder-browser .browser-item:hover{border-color:var(--accent);background:var(--accent-dim)}
.folder-browser .browser-item .dir-icon{flex-shrink:0}
.folder-browser .browser-item .dir-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-browser .browser-select-btn{margin-top:8px;text-align:right}

/* ═══ WORKSPACE EXPLORER (VS Code-style) ═══════════════════════════════════════ */
.workspace-explorer{
  display:flex;flex-direction:column;flex:1;min-height:0;
  overflow:hidden;user-select:none;
}
.workspace-explorer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 8px;height:28px;flex-shrink:0;
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);
  border-bottom:1px solid var(--border);
}
.workspace-explorer-header .ws-actions{display:flex;gap:3px}
.ws-action-btn{
  width:20px;height:20px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;
  transition:all .1s;
}
.ws-action-btn:hover{background:var(--surface3);color:var(--text2)}
.ws-action-btn.active{color:var(--accent)}

.workspace-tree-wrap{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 0;
}
.workspace-tree-wrap::-webkit-scrollbar{width:4px}
.workspace-tree-wrap::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* Tree root path breadcrumb */
.ws-path-bar{
  display:flex;align-items:center;gap:2px;
  padding:4px 8px;margin:0 4px 4px;
  background:var(--surface2);border-radius:var(--radius);
  font-size:.75rem;font-family:var(--font-mono);color:var(--text2);
  cursor:pointer;overflow:hidden;white-space:nowrap;
  flex-shrink:0;transition:background .1s;
}
.ws-path-bar:hover{background:var(--surface3);color:var(--text)}
.ws-path-bar .ws-path-text{flex:1;overflow:hidden;text-overflow:ellipsis}
.ws-path-bar .ws-path-icon{flex-shrink:0;font-size:.75rem}

/* Tree node */
.ws-tree-node{
  display:flex;align-items:center;gap:2px;
  padding:2px 0;cursor:pointer;height:22px;
  font-size:.73rem;white-space:nowrap;
  transition:background .08s;position:relative;
}
.ws-tree-node:hover{background:var(--surface2)}
.ws-tree-node.selected{background:var(--accent-dim);color:var(--text)}
.ws-tree-node.focused{background:var(--blue-dim)}
.ws-tree-node .ws-indent{padding-left:8px;flex-shrink:0}

/* Chevron arrow for expandable folders */
.ws-chevron{
  width:16px;height:16px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.75rem;color:var(--muted);transition:transform .15s;
  cursor:pointer;
}
.ws-chevron.expanded{transform:rotate(90deg)}
.ws-chevron.empty{visibility:hidden}

/* Icon for files/folders */
.ws-icon{width:16px;flex-shrink:0;text-align:center;font-size:.75rem;opacity:.85}
.ws-label{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ws-node-loading{opacity:.5;pointer-events:none}

/* Loading spinner for tree nodes */
.ws-spinner{
  width:10px;height:10px;border:1.5px solid var(--border2);
  border-right-color:var(--accent);border-radius:50%;
  animation:spin .6s linear infinite;flex-shrink:0;
}

/* File content preview panel */
.workspace-preview{
  border-top:1px solid var(--border);background:var(--surface2);
  display:none;flex-direction:column;min-height:80px;max-height:70%;
  flex-shrink:0;overflow:hidden;
}
.workspace-preview.open{display:flex}
.workspace-preview-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 8px;background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;font-size:.75rem;font-weight:600;color:var(--text2);
}
.workspace-preview-header .preview-filename{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:.75rem}
.workspace-preview-body{
  flex:1;overflow:auto;padding:8px;
  font-family:var(--font-mono);font-size:.75rem;line-height:1.55;
  color:var(--text2);white-space:pre;tab-size:2;
}
.workspace-preview-body::-webkit-scrollbar{width:4px;height:4px}
.workspace-preview-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ═══ FILE EDITOR PANEL (floating window) ═══════════════════════════════════ */
.editor-panel{
  position:fixed;z-index:200;
  top:60px;left:calc(50% - 300px);
  width:600px;height:500px;
  display:none;flex-direction:column;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 48px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3);
  overflow:hidden;
}
.editor-panel.open{display:flex;animation:scaleIn .2s ease-out both}
.editor-panel.minimized{height:34px;overflow:hidden}
.editor-panel.fullscreen{
  top:44px;left:0;right:0;bottom:22px;
  width:auto;height:auto;
  border-radius:0;border-left:none;border-right:none;
}

.editor-header{
  display:flex;align-items:center;gap:8px;
  padding:0 8px;height:32px;flex-shrink:0;
  background:var(--surface);border-bottom:1px solid var(--border);
  cursor:move;user-select:none;
}
.editor-header .window-actions{
  display:flex;align-items:center;gap:2px;
  margin-left:auto;flex-shrink:0;
}
.editor-header .win-btn{
  width:20px;height:20px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;transition:all .1s;
}
.editor-header .win-btn:hover{background:var(--surface3);color:var(--text)}
.editor-header .win-btn.close-btn:hover{background:var(--red-dim);color:var(--red)}
.editor-tab{
  display:flex;align-items:center;gap:6px;
  padding:4px 12px;height:100%;font-size:.75rem;color:var(--text2);
  background:var(--surface2);border-right:1px solid var(--border);
  font-family:var(--font-mono);max-width:320px;overflow:hidden;white-space:nowrap;
  cursor:default;flex-shrink:1;
}
.editor-tab .tab-name{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.editor-toolbar{
  display:flex;align-items:center;gap:4px;
  padding:5px 8px;flex-shrink:0;
  background:var(--surface);border-bottom:1px solid var(--border);
}
.editor-toolbar .edt-path{
  flex:1;font-size:.75rem;font-family:var(--font-mono);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.editor-toolbar button{
  padding:3px 10px;border-radius:4px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);
  transition:all .1s;white-space:nowrap;
}
.editor-toolbar button:hover{background:var(--surface3);border-color:var(--border2)}
.editor-toolbar button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.editor-toolbar button.primary:hover{background:var(--accent-hover)}
.editor-toolbar button:disabled{opacity:.4;cursor:not-allowed}

.editor-body-wrap{
  flex:1;overflow:hidden;display:flex;flex-direction:column;
}
.editor-view-tabs{
  display:flex;align-items:center;gap:0;padding:0 8px;
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;height:28px;
}
.editor-view-tab{
  padding:3px 14px;font-size:.7rem;font-weight:600;color:var(--muted);
  background:transparent;border:none;cursor:pointer;
  font-family:var(--font-sans);transition:all .15s;
  border-bottom:2px solid transparent;height:100%;
  letter-spacing:.03em;text-transform:uppercase;
}
.editor-view-tab:hover{color:var(--text);background:var(--surface2)}
.editor-view-tab.active{
  color:var(--accent);border-bottom-color:var(--accent);
  background:var(--surface2);
}
.editor-view-tab .tab-count{
  font-size:.65rem;color:var(--muted);margin-left:4px;font-weight:400;
}

/* ── Editor Panes Container ─────────────────────────────────────────── */
.editor-panes{
  flex:1;overflow:hidden;display:flex;
  background:#1a1b26;
}
.editor-panes.split .editor-code-pane{
  width:50%;min-width:200px;border-right:2px solid var(--border);
}
.editor-panes.split .editor-preview-pane{
  flex:1;min-width:200px;
}
.editor-panes.preview .editor-code-pane{display:none}
.editor-panes.preview .editor-preview-pane{flex:1}
.editor-panes.code .editor-preview-pane{display:none}
.editor-panes.code .editor-code-pane{flex:1}

.editor-code-pane{
  overflow:hidden;display:flex;position:relative;
  background:#1a1b26;
}
.editor-preview-pane{
  overflow:hidden;display:flex;flex-direction:column;
  background:#0d1117;
}

/* ── Line Numbers Gutter ────────────────────────────────────────────── */
.editor-gutter{
  width:52px;flex-shrink:0;overflow:hidden;
  background:#161720;border-right:1px solid rgba(255,255,255,.06);
  font-family:var(--font-mono);font-size:.82rem;
  line-height:21px;color:rgba(255,255,255,.18);
  text-align:right;padding:10px 8px 10px 4px;
  user-select:none;pointer-events:none;
  white-space:pre;
  box-sizing:border-box;
}
.editor-gutter .gutter-active{
  color:rgba(255,255,255,.45);
}
.editor-gutter span{line-height:inherit}

/* ── Editor Code Area ───────────────────────────────────────────────── */
.editor-code-wrap{
  flex:1;overflow:hidden;position:relative;
  background:#1a1b26;
}
.editor-textarea{
  position:absolute;inset:0;z-index:2;
  display:block;
  -webkit-appearance:none;
  background:transparent;color:transparent;
  caret-color:var(--accent);
  border:none;outline:none;resize:none;
  font-family:var(--font-mono);font-size:.82rem;
  line-height:21px;padding:10px 14px;tab-size:2;
  overflow:auto;white-space:pre;word-wrap:normal;
  letter-spacing:normal;word-spacing:normal;
  text-indent:0;text-transform:none;
  box-sizing:border-box;
}
.editor-textarea:focus{outline:none}
.editor-textarea::placeholder{color:rgba(255,255,255,.15);font-style:italic}
.editor-textarea::-webkit-scrollbar{width:6px;height:6px}
.editor-textarea::-webkit-scrollbar-track{background:transparent}
.editor-textarea::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.editor-textarea::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)}
.editor-textarea::selection{background:rgba(130,170,255,.25)}

.editor-highlight{
  position:absolute;inset:0;z-index:1;
  display:block;
  margin:0;padding:10px 14px;
  font-family:var(--font-mono);font-size:.82rem;
  line-height:21px;tab-size:2;
  overflow:auto;white-space:pre;word-wrap:normal;
  pointer-events:none;border:none;
  background:transparent;color:rgba(255,255,255,.85);
  letter-spacing:normal;word-spacing:normal;
  text-indent:0;text-transform:none;
  box-sizing:border-box;
}
.editor-highlight::-webkit-scrollbar{display:none}
.editor-highlight .hljs, .editor-highlight code{
  display:block;
  font-family:inherit;font-size:inherit;
  line-height:inherit;tab-size:inherit;
  color:inherit;
  padding:0 !important;margin:0;
  letter-spacing:inherit;word-spacing:inherit;
  background:transparent;
}

.editor-preview-iframe{
  flex:1;border:none;background:#0d1117;
  width:100%;display:none;
}
.editor-preview-iframe.active{display:block}

/* Preview pane toolbar */
.editor-preview-toolbar{
  display:flex;align-items:center;gap:6px;padding:4px 10px;
  background:#161b22;border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;font-size:.7rem;color:var(--muted);
}
.editor-preview-toolbar .pv-label{
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:rgba(255,255,255,.35);
}
.editor-preview-toolbar .pv-refresh{
  margin-left:auto;padding:2px 8px;border-radius:3px;
  border:1px solid rgba(255,255,255,.1);background:transparent;
  color:var(--muted);cursor:pointer;font-size:.65rem;
  font-family:var(--font-sans);transition:all .15s;
}
.editor-preview-toolbar .pv-refresh:hover{
  background:rgba(255,255,255,.05);color:var(--text);
}
.editor-preview-toolbar .pv-auto{
  display:flex;align-items:center;gap:4px;
  font-size:.65rem;color:var(--muted);
}
.editor-preview-toolbar .pv-auto input{accent-color:var(--accent)}

.editor-toolbar button.active-view{
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
}

/* Floating panel resize handle (bottom-right corner) */
.editor-resize-grip{
  position:absolute;bottom:0;right:0;
  width:16px;height:16px;cursor:nwse-resize;
  z-index:10;
  background:linear-gradient(135deg,transparent 50%,var(--border2) 50%);
  opacity:.5;transition:opacity .15s;
}
.editor-resize-grip:hover{opacity:1;background:linear-gradient(135deg,transparent 50%,var(--accent) 50%)}

.editor-status{
  display:flex;align-items:center;gap:6px;
  padding:3px 10px;font-size:.75rem;color:var(--muted);
  border-top:1px solid var(--border);flex-shrink:0;
  background:var(--surface);
}
.editor-status.saved{color:var(--green)}
.editor-status.modified{color:var(--yellow)}
.editor-status .edt-stat-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.editor-status.saved .edt-stat-dot{background:var(--green)}
.editor-status.modified .edt-stat-dot{background:var(--yellow)}

/* Workspace switcher dropdown */
.ws-switcher{
  position:relative;display:flex;flex-shrink:0;
}
.ws-switcher-btn{
  display:flex;align-items:center;gap:4px;flex:1;
  padding:4px 8px;margin:4px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text2);cursor:pointer;font-size:.75rem;
  font-family:var(--font-mono);transition:all .1s;overflow:hidden;
}
.ws-switcher-btn:hover{border-color:var(--border2);color:var(--text);background:var(--surface3)}
.ws-switcher-btn .ws-current{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ws-switcher-btn .ws-drop-icon{flex-shrink:0;font-size:.75rem;opacity:.6}
.ws-switcher-menu{
  position:absolute;top:100%;left:4px;right:4px;z-index:40;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.45);
  max-height:200px;overflow-y:auto;display:none;
}
.ws-switcher-menu.open{display:block}
.ws-switcher-item{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;cursor:pointer;font-size:.75rem;color:var(--text2);
  transition:background .1s;font-family:var(--font-mono);
}
.ws-switcher-item:hover{background:var(--accent-dim);color:var(--text)}
.ws-switcher-item.active{background:var(--accent-dim);color:var(--accent);font-weight:600}
.ws-switcher-item .ws-sw-icon{flex-shrink:0;font-size:.75rem}
.ws-switcher-item .ws-sw-path{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-switcher-item .ws-sw-check{color:var(--accent);font-size:.75rem;flex-shrink:0}

/* Workspace info card */
.ws-info-card{
  padding:6px 8px;margin:4px 8px;border-radius:var(--radius);
  background:var(--surface2);border:1px solid var(--border);
  font-size:.75rem;color:var(--muted);flex-shrink:0;
  display:flex;align-items:center;gap:6px;
}
.ws-info-card .ws-info-icon{font-size:.8rem;flex-shrink:0}
.ws-info-card .ws-info-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tab bar for explorer / sessions */
.sidebar-tab-bar{
  display:flex;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--surface);
}
.sidebar-tab-btn{
  flex:1;padding:7px 4px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;font-size:.75rem;
  font-weight:600;font-family:var(--font-sans);
  border-bottom:2px solid transparent;transition:all .12s;
  display:flex;align-items:center;justify-content:center;gap:3px;
}
.sidebar-tab-btn:hover{color:var(--text2);background:var(--surface2)}
.sidebar-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.sidebar-tab-btn .tab-icon{font-size:.75rem}

/* Sidebar panels (explorer & sessions share the sidebar) */
.sidebar-panel{display:none;flex:1;flex-direction:column;overflow:hidden}
.sidebar-panel.active{display:flex}

/* VS Code-like status bar for explorer */
.explorer-status{
  display:flex;align-items:center;gap:4px;
  padding:2px 8px;font-size:.75rem;color:var(--muted);
  border-top:1px solid var(--border);flex-shrink:0;
  background:var(--surface);
}
.explorer-status .exp-stat-item{display:flex;align-items:center;gap:3px}

/* File type icons color coding */
.f-icon-folder{color:var(--yellow);opacity:.9}
.f-icon-file{color:var(--text2)}
.f-icon-code{color:var(--blue)}
.f-icon-config{color:var(--muted)}
.f-icon-image{color:var(--green)}
.f-icon-markdown{color:var(--accent)}
.f-icon-json{color:var(--yellow)}

/* ═══ SKILLS — Dropdown + Tags ═══════════════════════════════════════════════ */
.skill-row{
  display:flex;align-items:flex-start;gap:6px;min-height:24px;
  padding:3px 0 5px;flex-wrap:wrap;
}
/* Dropdown trigger button */
.skill-dropdown-btn{
  padding:6px 10px;border-radius:5px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);
  display:flex;align-items:center;gap:5px;transition:all .15s;
  white-space:nowrap;
}
.skill-dropdown-btn:hover{border-color:var(--border2);color:var(--text)}
.skill-dropdown-btn.skills-active{
  border-color:var(--accent);background:var(--accent-dim);
  box-shadow:0 0 6px rgba(200,80,249,.15);
}
.skill-dropdown-btn .arrow{font-size:.75rem;opacity:.6;margin-left:2px}
.skill-dropdown-btn .badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;border-radius:100px;
  background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;
  padding:0 5px;margin-left:2px;
}
.skill-dropdown-btn:hover{border-color:var(--border2);color:var(--text)}
.skill-dropdown-btn .arrow{font-size:.75rem;opacity:.6;margin-left:2px}
.skill-dropdown-btn .badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;border-radius:100px;
  background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;
  margin-left:2px;padding:0 4px;
}
/* Skill count badge on button */
.skill-dropdown-btn .count{color:var(--accent);font-weight:700;font-size:.75rem}

/* Dropdown menu (popup) */
.skill-dropdown-menu{
  position:absolute;bottom:calc(100% + 4px);left:0;z-index:50;
  min-width:240px;max-width:320px;max-height:60vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.4);
  padding:4px;display:none;
}
.skill-dropdown-menu.open{display:block}
.skill-dd-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:var(--radius);cursor:pointer;
  transition:background .1s;user-select:none;
}
.skill-dd-item:hover{background:var(--surface3)}
.skill-dd-item input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:14px;height:14px;border-radius:3px;border:1.5px solid var(--border2);
  background:var(--surface3);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;margin:0;
}
.skill-dd-item input[type=checkbox]:checked{
  background:var(--accent);border-color:var(--accent);
}
.skill-dd-item input[type=checkbox]:checked::after{
  content:'✓';color:#fff;font-size:.75rem;font-weight:700;
}
.skill-dd-item .dd-icon{font-size:.75rem;flex-shrink:0}
.skill-dd-item .dd-name{font-size:.75rem;font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skill-dd-item .dd-desc{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.skill-dd-item .dd-checked{color:var(--accent);font-size:.75rem;font-weight:700}
.skill-dd-footer{
  display:flex;align-items:center;gap:4px;
  padding:6px 8px;border-top:1px solid var(--border);margin-top:2px;
}
.skill-dd-footer button{
  border:none;background:transparent;color:var(--muted);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);padding:3px 6px;border-radius:4px;
}
.skill-dd-footer button:hover{background:var(--surface3);color:var(--text)}

/* Active skill tags (shown when skills are selected) */
.skill-tags{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.skill-tag{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 6px 1px 8px;border-radius:100px;border:1px solid;
  font-size:.75rem;font-weight:600;color:#fff;
  animation:skillTagIn .15s ease-out;
}
@keyframes skillTagIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.skill-tag .tag-icon{font-size:.75rem}
.skill-tag .tag-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;border:none;
  background:rgba(0,0,0,.2);color:rgba(255,255,255,.7);cursor:pointer;
  font-size:.75rem;font-weight:700;transition:all .1s;margin-left:1px;
}
.skill-tag .tag-x:hover{background:rgba(0,0,0,.35);color:#fff}
.skill-no-skills{font-size:.75rem;color:var(--muted);padding:3px 0}

/* Skills Manager — table / card layout */
.skills-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.skills-header h3{font-size:1rem;font-weight:700}
.skills-grid{display:flex;flex-direction:column;gap:8px}
.skill-card{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface2);
  transition:border-color .15s;
}
.skill-card:hover{border-color:var(--border2)}
.skill-card-icon{
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
}
.skill-card-body{flex:1;min-width:0}
.skill-card-title{
  font-size:.82rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:6px;
}
.skill-card-badge{
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  padding:0 5px;border-radius:3px;background:var(--surface4);
  color:var(--muted);letter-spacing:.04em;
}
.skill-card-desc{font-size:.75rem;color:var(--text2);margin:2px 0 4px;line-height:1.4}
.skill-card-actions{display:flex;gap:4px;margin-top:4px}
.skill-card-actions button{
  padding:2px 8px;border-radius:4px;border:1px solid var(--border);
  background:var(--surface3);color:var(--text2);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);
  transition:all .15s;
}
.skill-card-actions button:hover{background:var(--surface4);color:var(--text)}
.skill-card-actions button.danger:hover{background:var(--red-dim);border-color:var(--red);color:var(--red)}
.skill-card-actions button.primary:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.skill-card-toggle{
  width:32px;height:32px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface3);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;transition:all .15s;
}
.skill-card-toggle.on{background:var(--green-dim);border-color:var(--green);color:var(--green)}
.skill-card-toggle.off{background:var(--surface4);color:var(--muted)}
.skill-card-toggle:hover{opacity:.8}

/* Skill form in modal */
.skill-form label{display:block;font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;margin-top:10px}
.skill-form label:first-child{margin-top:0}
.skill-form input,.skill-form select,.skill-form textarea{
  width:100%;padding:7px 9px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text);font-size:.8rem;font-family:var(--font-sans);outline:none;
  box-sizing:border-box;
}
.skill-form input:focus,.skill-form select:focus,.skill-form textarea:focus{border-color:var(--accent)}
.skill-form textarea{min-height:100px;resize:vertical;font-family:var(--font-mono);font-size:.75rem}
.skill-form .form-row{display:flex;gap:10px}
.skill-form .form-row>*{flex:1}

/* Empty state */
.skills-empty{
  text-align:center;padding:30px 20px;color:var(--muted);
  font-size:.75rem;line-height:1.6;
}

/* ═══ MODAL ══════════════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  z-index:100;opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;width:480px;max-width:95vw;max-height:80vh;overflow-y:auto;
  transform:translateY(-10px);transition:transform .2s;box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-header h3{font-size:.95rem;font-weight:700}
.modal-section{margin-bottom:16px}
.modal-section label{display:block;font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.modal-input{
  width:100%;padding:8px 10px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text);font-size:.82rem;font-family:var(--font-sans);outline:none;
}
.modal-input:focus{border-color:var(--accent)}
.modal-select{
  width:100%;padding:8px 10px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text);font-size:.82rem;font-family:var(--font-sans);outline:none;cursor:pointer;
}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.modal-btn{
  padding:7px 16px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--surface3);color:var(--text2);cursor:pointer;
  font-size:.8rem;font-weight:600;font-family:var(--font-sans);transition:all .15s;
}
.modal-btn:hover{background:var(--surface4);color:var(--text)}
.modal-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.modal-btn.primary:hover{background:var(--accent-hover)}

/* ═══ STAT BADGES ════════════════════════════════════════════════════════════ */
.stat-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.75rem;padding:2px 7px;border-radius:4px;
  font-weight:600;
}
.stat-badge.tokens{background:var(--blue-dim);color:var(--blue)}
.stat-badge.cost{background:var(--green-dim);color:var(--green)}
.stat-badge.time{background:rgba(255,255,255,.05);color:var(--muted)}
.stat-badge.model{background:var(--accent-dim);color:var(--accent)}

/* ═══ STATUS BAR ══════════════════════════════════════════════════════════════ */
.statusbar{
  height:22px;background:var(--surface);border-top:1px solid var(--border);
  display:flex;align-items:center;padding:0 10px;gap:10px;
  font-size:.75rem;color:var(--muted);flex-shrink:0;
}
.statusbar-item{display:flex;align-items:center;gap:4px;white-space:nowrap}
.statusbar-sep{opacity:.3}

/* ═══ SCROLLBAR GLOBAL ════════════════════════════════════════════════════════ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ═══ DOCS MODAL ══════════════════════════════════════════════════════════════ */
.docs-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:14px;padding-bottom:0;flex-shrink:0}
.docs-tab{padding:5px 12px;border-radius:5px 5px 0 0;border:1px solid transparent;border-bottom:none;cursor:pointer;font-size:.71rem;font-weight:600;color:var(--text2);background:transparent;font-family:var(--font-sans);transition:all .15s;margin-bottom:-1px;white-space:nowrap}
.docs-tab:hover{background:var(--surface2);color:var(--text)}
.docs-tab.active{background:var(--surface);border-color:var(--border);color:var(--accent)}
.docs-pane{display:none}.docs-pane.active{display:block}
.dcs{margin-bottom:20px}
.dcs h4{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:6px}
.dcs p{font-size:.78rem;color:var(--text2);line-height:1.65;margin-bottom:5px}
.dcs ul,.dcs ol{font-size:.78rem;color:var(--text2);line-height:1.8;padding-left:1.3em;margin:.2em 0}
.dcs li{margin:.15em 0}
.dcw{position:relative;margin:.4em 0 1em}
.dpre{display:block;background:rgba(0,0,0,.45);border:1px solid var(--border);border-radius:6px;padding:10px 44px 10px 12px;font-family:var(--font-mono);font-size:.71rem;color:#b0c4de;white-space:pre;overflow-x:auto;line-height:1.55;tab-size:2}
.cpb{position:absolute;top:6px;right:6px;background:var(--surface3);border:1px solid var(--border);color:var(--muted);border-radius:4px;padding:2px 8px;font-size:.75rem;cursor:pointer;font-family:var(--font-sans);font-weight:600;transition:all .15s}
.cpb:hover{background:var(--surface4);color:var(--text)}
.dtbl{width:100%;border-collapse:collapse;font-size:.73rem;margin:.4em 0 .8em}
.dtbl th{background:var(--surface3);color:var(--muted);font-weight:700;text-align:left;padding:5px 9px;border:1px solid var(--border);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
.dtbl td{padding:5px 9px;border:1px solid var(--border);color:var(--text2);vertical-align:top;line-height:1.5}
.dtbl td:first-child{white-space:nowrap}
.dtbl code{font-size:.8em;background:rgba(0,0,0,.25);padding:1px 4px;border-radius:3px;font-family:var(--font-mono)}
.mb{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.75rem;font-weight:700;font-family:var(--font-mono);margin-right:3px}
.mb-post{background:var(--green-dim);color:var(--green)}
.mb-get{background:var(--blue-dim);color:var(--blue)}
.mb-del{background:var(--red-dim);color:var(--red)}
.mb-pat{background:var(--yellow-dim);color:var(--yellow)}
.dtip{background:var(--blue-dim);border-left:3px solid var(--blue);padding:8px 12px;font-size:.76rem;color:var(--text2);margin:.6em 0 1em;line-height:1.6;border-radius:0 4px 4px 0}
.dtip b,.dtip code{color:var(--blue)}
.dtip code{background:rgba(77,166,255,.1);padding:1px 4px;border-radius:3px;font-family:var(--font-mono);font-size:.85em}
.rq{font-size:.75rem;background:var(--red-dim);color:var(--red);padding:0 4px;border-radius:3px;font-weight:700;vertical-align:middle;margin-left:3px}
.docs-step{display:flex;gap:10px;margin-bottom:10px;font-size:.78rem;color:var(--text2);line-height:1.6}
.docs-step-n{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.docs-step code{background:rgba(0,0,0,.25);padding:1px 5px;border-radius:3px;font-family:var(--font-mono);font-size:.85em;color:var(--text)}

/* ═══ API TESTER ══════════════════════════════════════════════════════════════ */
#chatView{flex:1;display:flex;min-height:0;overflow:hidden}
#apiView{flex:1;display:none;min-height:0;overflow:hidden}
/* sidebar */
.api-sb{width:230px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.api-sb-hdr{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.api-sb-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.api-filter-inp{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text);font-size:.75rem;font-family:var(--font-sans);outline:none;width:100%;transition:border-color .15s}
.api-filter-inp:focus{border-color:var(--accent)}
.api-sb-list{flex:1;overflow-y:auto;padding:4px 0}
.api-grp-label{padding:6px 12px 2px;font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.api-ep-row{display:flex;align-items:center;gap:7px;padding:5px 12px;cursor:pointer;border-left:2px solid transparent;transition:all .12s}
.api-ep-row:hover{background:var(--surface2)}
.api-ep-row.sel{background:var(--accent-dim);border-left-color:var(--accent)}
.api-ep-row .em{font-size:.57rem;font-weight:800;font-family:var(--font-mono);padding:1px 5px;border-radius:3px;min-width:42px;text-align:center;flex-shrink:0}
.api-ep-row .ep{font-size:.75rem;color:var(--text2);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.api-ep-row.sel .ep{color:var(--text)}
.em-get{background:var(--blue-dim);color:var(--blue)}
.em-post{background:var(--green-dim);color:var(--green)}
.em-delete{background:var(--red-dim);color:var(--red)}
.em-patch{background:var(--yellow-dim);color:var(--yellow)}
.em-put{background:rgba(255,140,66,.15);color:var(--orange)}
/* main request/response split */
.api-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.api-req-panel{flex-shrink:0;padding:12px 14px 10px;border-bottom:1px solid var(--border);background:var(--surface)}
.api-ep-desc{font-size:.71rem;color:var(--muted);margin-bottom:8px;min-height:14px;font-style:italic}
.api-url-bar{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.api-method-sel{padding:5px 8px;border-radius:5px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:.75rem;font-weight:700;font-family:var(--font-mono);cursor:pointer;outline:none;min-width:78px;transition:border-color .15s,color .15s}
.api-url-inp{flex:1;padding:5px 10px;border-radius:5px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:.75rem;font-family:var(--font-mono);outline:none;transition:border-color .15s}
.api-url-inp:focus{border-color:var(--accent)}
.api-send-btn{padding:5px 16px;border-radius:5px;border:none;background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;cursor:pointer;white-space:nowrap;font-family:var(--font-sans);transition:all .15s;flex-shrink:0}
.api-send-btn:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.03)}
.api-send-btn:disabled{opacity:.5;cursor:not-allowed}
.api-send-btn.stop{background:var(--red)}
/* path params */
.api-pp-box{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:7px 10px;margin-bottom:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.api-pp-title{font-size:.75rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-basis:100%}
.api-pp-group{display:flex;align-items:center;gap:5px}
.api-pp-key{font-family:var(--font-mono);color:var(--accent);font-size:.75rem;font-weight:700}
.api-pp-inp{background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:3px 8px;color:var(--text);font-size:.75rem;font-family:var(--font-mono);outline:none;width:160px;transition:border-color .15s}
.api-pp-inp:focus{border-color:var(--accent)}
/* tabs */
.api-tabs-bar{display:flex;border-bottom:1px solid var(--border);margin-bottom:8px}
.api-tab{padding:4px 12px;font-size:.75rem;font-weight:600;color:var(--text2);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;transition:all .12s;font-family:var(--font-sans)}
.api-tab:hover{color:var(--text)}
.api-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.api-pane{display:none}
.api-pane-active{display:block}
.api-pane-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.api-pane-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.api-body-ed{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:7px 9px;color:var(--text);font-family:var(--font-mono);font-size:.73rem;resize:vertical;outline:none;min-height:72px;max-height:160px;line-height:1.5}
.api-body-ed:focus{border-color:var(--accent)}
.api-kv-tbl{border-collapse:collapse;font-size:.73rem}
.api-kv-tbl th{background:var(--surface3);color:var(--muted);font-weight:600;padding:3px 8px;border:1px solid var(--border);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;text-align:left}
.api-kv-tbl td{padding:1px 3px;border:1px solid var(--border)}
.api-kv-inp{width:100%;background:transparent;border:none;color:var(--text);font-size:.73rem;font-family:var(--font-mono);padding:3px 5px;outline:none}
.api-kv-inp::placeholder{color:var(--muted)}
.api-add-btn{font-size:.75rem;color:var(--muted);background:transparent;border:none;cursor:pointer;padding:5px 4px;transition:color .12s;font-family:var(--font-sans)}
.api-add-btn:hover{color:var(--text)}
.api-rm-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:0 4px;line-height:1;transition:color .12s}
.api-rm-btn:hover{color:var(--red)}
/* response */
.api-resp-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:12px 14px;gap:0;min-height:0}
.api-resp-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);font-size:.76rem;gap:8px}
.api-resp-empty .big{font-size:2.8rem;opacity:.25}
.api-status-bdg{padding:2px 10px;border-radius:100px;font-size:.75rem;font-weight:700;font-family:var(--font-mono);flex-shrink:0}
.s2{background:var(--green-dim);color:var(--green)}
.s3{background:var(--blue-dim);color:var(--blue)}
.s4{background:var(--yellow-dim);color:var(--yellow)}
.s5{background:var(--red-dim);color:var(--red)}
.api-resp-meta{font-size:.67rem;color:var(--muted)}
.api-sse-dot{font-size:.67rem;background:var(--yellow-dim);color:var(--yellow);padding:1px 8px;border-radius:3px;animation:pulse 1s infinite}
.api-resp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;margin-bottom:8px}
.api-resp-body{flex:1;background:rgba(0,0,0,.38);border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-family:var(--font-mono);font-size:.75rem;color:#b0c4de;overflow:auto;white-space:pre-wrap;word-break:break-all;line-height:1.55;min-height:0}
/* credentials override panel */
.api-cred-wrap{border:1px solid var(--border);border-radius:6px;margin-bottom:10px;overflow:hidden;background:var(--surface2)}
.api-cred-hdr{display:flex;align-items:center;gap:7px;padding:6px 10px;cursor:pointer;font-size:.75rem;font-weight:600;color:var(--text2);transition:background .12s;user-select:none}
.api-cred-hdr:hover{background:var(--surface3)}
.api-cred-hdr .key-icon{color:var(--yellow);font-size:.85rem}
.api-cred-hdr .cred-chevron{margin-left:auto;font-size:.75rem;color:var(--muted);transition:transform .2s}
.api-cred-hdr.open .cred-chevron{transform:rotate(180deg)}
.api-cred-body{display:none;padding:10px;border-top:1px solid var(--border)}
.api-cred-body.open{display:block}
.api-cred-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;align-items:flex-end}
.api-cred-col{display:flex;flex-direction:column;gap:3px}
.api-cred-col label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.api-cred-col select,.api-cred-col input{background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:4px 8px;color:var(--text);font-size:.73rem;font-family:var(--font-mono);outline:none;transition:border-color .15s}
.api-cred-col select:focus,.api-cred-col input:focus{border-color:var(--accent)}
.api-cred-col input[type=password]{letter-spacing:.08em}
.api-cred-status{font-size:.75rem;color:var(--muted);min-height:14px;display:flex;align-items:center;gap:5px}
.cred-ok{color:var(--green)} .cred-warn{color:var(--yellow)} .cred-err{color:var(--red)}
.eye-btn{background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:4px 7px;cursor:pointer;font-size:.75rem;color:var(--muted);transition:all .12s;line-height:1}
.eye-btn:hover{background:var(--surface4);color:var(--text)}

/* ═══ TASK MANAGER ════════════════════════════════════════════════════════════ */
.tm-table{
  width:100%;border-collapse:collapse;font-size:.73rem;
  margin-top:8px;table-layout:fixed;
}
.tm-table thead th{
  position:sticky;top:0;z-index:5;
  background:var(--surface);color:var(--muted);
  font-weight:700;text-align:left;padding:8px 10px;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:2px solid var(--border);
}
.tm-table tbody td{
  padding:10px;border-bottom:1px solid var(--border);
  vertical-align:middle;white-space:nowrap;
}
.tm-table tbody tr{
  cursor:default;transition:background .12s;
}
.tm-table tbody tr:hover{background:var(--surface2)}
.tm-table tbody tr.selected{background:var(--accent-dim)}
.tm-table td.title-cell{
  max-width:180px;overflow:hidden;text-overflow:ellipsis;
  color:var(--text);font-weight:500;
}
.tm-table td.mono-cell{
  font-family:var(--font-mono);font-size:.75rem;color:var(--text2);
  max-width:100px;overflow:hidden;text-overflow:ellipsis;
}

/* Session status badge */
.tm-status{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:100px;font-size:.75rem;font-weight:700;
}
.tm-status.running{background:var(--yellow-dim);color:var(--yellow)}
.tm-status.idle{background:var(--green-dim);color:var(--green)}
.tm-status.archived{background:rgba(255,255,255,.05);color:var(--muted)}
.tm-status.error{background:var(--red-dim);color:var(--red)}
.tm-status-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.tm-status.running .tm-status-dot{
  background:var(--yellow);animation:pulse 1s infinite;
}
.tm-status.idle .tm-status-dot{background:var(--green)}
.tm-status.archived .tm-status-dot{background:var(--muted)}
.tm-status.error .tm-status-dot{background:var(--red)}

.tm-action-btn{
  padding:3px 8px;border-radius:4px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:var(--font-sans);
  transition:all .12s;line-height:1.4;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;
}
.tm-action-btn:hover{background:var(--surface3);border-color:var(--border2);color:var(--text)}
.tm-action-btn.danger:hover{background:var(--red-dim);border-color:var(--red);color:var(--red)}
.tm-action-btn.accent:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.tm-action-btn + .tm-action-btn{margin-left:3px}

/* Auto-refresh indicator */
.tm-auto-refresh{
  font-size:.75rem;color:var(--muted);
  display:flex;align-items:center;gap:4px;
}
.tm-auto-refresh.active{color:var(--green)}

/* ═══ SCHEDULER ════════════════════════════════════════════════════════════════ */
.sch-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
.sch-table-wrap{flex:1;overflow:auto;min-width:0}
.sch-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:4px;min-width:840px}
.sch-table th{text-align:left;padding:7px 10px;border-bottom:2px solid var(--border);color:var(--muted);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;background:var(--bg);z-index:1;white-space:nowrap}
.sch-table td{padding:6px 10px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:.78rem}
.sch-table tr{cursor:pointer;transition:background .1s}
.sch-table tr:hover td{background:var(--surface2)}
.sch-table tr.selected td{background:var(--accent-dim)}
.sch-table .sch-name{font-weight:600;color:var(--text);cursor:pointer;font-size:.85rem;transition:color .1s}
.sch-table .sch-name:hover{color:var(--accent)}
.sch-tag{display:inline-block;background:var(--surface3);color:var(--muted);padding:1px 6px;border-radius:3px;font-size:.75rem;margin-right:2px;line-height:1.6;transition:all .1s}
.sch-tag:hover{background:var(--accent-dim);color:var(--accent)}
.sch-tag.sch-tag-link{cursor:pointer}
.sch-hook-url{font-family:var(--font-mono);font-size:.75rem;color:var(--blue);background:var(--blue-dim);padding:1px 5px;border-radius:3px;cursor:pointer;white-space:nowrap}
.sch-hook-url:hover{background:var(--accent-dim);color:var(--accent)}
.sch-prompt-preview{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);font-size:.75rem}
.sch-detail-grid{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;font-size:.78rem;padding:10px;background:var(--surface2);border-radius:6px;margin-bottom:8px}
.sch-detail-grid .lbl{color:var(--muted);font-weight:600;font-size:.75rem}
.sch-detail-grid .val{color:var(--text);word-break:break-all;font-size:.75rem}
.sch-status{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600}
.sch-status .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.sch-status.running{color:var(--green)}
.sch-status.running .dot{background:var(--green)}
.sch-status.disabled{color:var(--muted)}
.sch-status.disabled .dot{background:var(--muted)}
.sch-status.failed{color:var(--red)}
.sch-status.failed .dot{background:var(--red)}
.sch-status.webhook-mode{color:var(--blue)}
.sch-status.webhook-mode .dot{background:var(--blue)}
.sch-chips{display:flex;gap:4px;flex-wrap:wrap}

/* ── Scheduler form ── */
.sch-sect{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:5px}
.sch-sect h4{font-size:.92rem;font-weight:700;color:var(--text);margin:0 0 8px;cursor:pointer;user-select:none;transition:color .12s;display:flex;align-items:center;gap:6px}
.sch-sect h4::after{content:'▾';font-size:.9rem;opacity:.4;transition:transform .15s;flex-shrink:0}
.sch-sect.collapsed h4::after{content:'▸';transform:rotate(0)}
.sch-sect h4:hover{color:var(--accent)}
.sch-sect h4:hover::after{opacity:.7}
.sch-sect.collapsed .sch-sect-body{display:none}
.sch-sect.no-collapse h4{cursor:default}
.sch-sect.no-collapse h4::after{display:none}
.sch-sect.no-collapse h4:hover{color:var(--text)}
.sch-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.sch-row+.sch-row{margin-top:6px}
.sch-field{display:flex;flex-direction:column;gap:3px;min-width:0}
.sch-field label{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sch-inp,.sch-sel,.sch-txa{background:var(--surface3);border:1px solid var(--border);border-radius:5px;padding:8px 10px;color:var(--text);font-size:.88rem;font-family:var(--font-sans);outline:none;transition:border-color .12s;width:100%}
.sch-inp:focus,.sch-sel:focus,.sch-txa:focus{border-color:var(--accent)}
.sch-sel{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%2360607a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
/* ═══ Combo box (searchable select) ══════════════════════════════════════════ */
.sch-combo{position:relative;min-width:0;width:100%}
.sch-combo-input{cursor:pointer;background:var(--surface3);border:1px solid var(--border);border-radius:5px;padding:8px 30px 8px 10px;color:var(--text);font-size:.88rem;font-family:var(--font-sans);outline:none;width:100%;transition:border-color .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%2360607a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.sch-combo-input:focus{border-color:var(--accent)}
.sch-combo-input.placeholder{color:var(--muted)}
.sch-combo-drop{display:none;position:absolute;top:100%;left:0;right:0;z-index:300;background:var(--surface2);border:1px solid var(--accent);border-radius:5px;margin-top:2px;overflow:hidden;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.sch-combo.open .sch-combo-drop{display:flex;flex-direction:column}
.sch-combo-drop .sch-combo-search{border:none;border-bottom:1px solid var(--border);border-radius:0;padding:7px 10px;font-size:.82rem;background:var(--surface3);color:var(--text);font-family:var(--font-sans);outline:none;flex-shrink:0}
.sch-combo-drop .sch-combo-search::placeholder{color:var(--muted)}
.sch-combo-list{max-height:220px;overflow-y:auto;padding:3px 0}
.sch-combo-opt{padding:6px 10px;font-size:.82rem;color:var(--text2);cursor:pointer;transition:background .08s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sch-combo-opt:hover,.sch-combo-opt.highlight{background:var(--accent-dim);color:var(--accent)}
.sch-combo-opt.selected{color:var(--accent);font-weight:600}
.sch-combo-opt.sch-combo-group{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px 3px;cursor:default;pointer-events:none}
.sch-combo-opt.sch-combo-group:hover,.sch-combo-opt.sch-combo-group.highlight{background:transparent;color:var(--muted)}
.sch-combo-noresults{padding:10px;text-align:center;font-size:.78rem;color:var(--muted)}
/* Combo inside input toolbar — match .input-select sizing */
.input-toolbar .sch-combo{width:auto;max-width:160px;flex-shrink:0}
.input-toolbar .sch-combo-input{padding:3px 8px;font-size:.75rem;background:var(--surface2);max-width:160px}
.input-toolbar .sch-combo-drop{font-size:.75rem}
.sch-txa{min-height:65px;resize:vertical}
.sch-preset{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.sch-preset span{padding:4px 11px;border-radius:100px;border:1px solid var(--border);background:var(--surface3);color:var(--text2);cursor:pointer;font-size:.75rem;transition:all .1s;white-space:nowrap}
.sch-preset span:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.sch-preset span.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:600}
.sch-mbtn{padding:4px 11px;border-radius:5px;border:1px solid var(--border);background:var(--surface3);color:var(--text2);cursor:pointer;font-size:.75rem;font-family:var(--font-sans);transition:all .1s}
.sch-mbtn:hover{background:var(--surface4);color:var(--text)}
.sch-mbtn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sch-add{padding:6px 0;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.78rem;font-weight:600;font-family:var(--font-sans);width:100%;text-align:center;border-radius:6px;border:1px dashed var(--border);transition:all .1s}
.sch-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.sch-step{background:var(--surface3);border:1px solid var(--border);border-radius:6px;padding:9px 12px;margin-bottom:5px}
.sch-step-head{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.sch-step-n{width:26px;height:26px;border-radius:50%;background:var(--accent-dim);color:var(--accent);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sch-step-x{width:26px;height:26px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:4px;font-size:.88rem;display:flex;align-items:center;justify-content:center;transition:all .1s}
.sch-step-x:hover{background:var(--red-dim);color:var(--red)}
.sch-step-eng{display:none;margin-top:5px;padding-top:5px;border-top:1px dashed var(--border)}
.sch-step-eng.sch-step-eng-open{display:block}
.sch-step-eng .sch-row{gap:5px}
.sch-alert-row{display:flex;align-items:center;gap:7px;padding:6px 10px;background:var(--surface3);border:1px solid var(--border);border-radius:6px;margin-bottom:4px;flex-wrap:wrap;font-size:.75rem}
.sch-tag-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:100px;border:1px solid var(--border);background:var(--surface3);color:var(--text2);font-size:.75rem;font-weight:600;cursor:default}
.sch-tag-chip.clickable{cursor:pointer;transition:all .1s}
.sch-tag-chip.clickable:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.sch-tag-chip button{width:18px;height:18px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:50%;font-size:.75rem;display:flex;align-items:center;justify-content:center}
.sch-tag-chip button:hover{background:var(--red-dim);color:var(--red)}

/* Filter chips & clickable elements */
.sch-filter-chip{padding:3px 10px;border-radius:100px;border:1px solid var(--border);background:var(--surface3);color:var(--text2);cursor:pointer;font-size:.75rem;font-weight:600;font-family:var(--font-sans);transition:all .12s;white-space:nowrap}
.sch-filter-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.sch-filter-chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.sch-table th[data-sort]{cursor:pointer;user-select:none;transition:color .12s}
.sch-table th[data-sort]:hover{color:var(--accent)}
.sch-table th.sorted{color:var(--accent)}
.sch-table .sch-sort-arrow{font-size:.7rem;margin-left:3px}

/* Detail panel action buttons */
.sch-detail-actions button{cursor:pointer;transition:all .1s}
.sch-detail-actions button:hover{opacity:.85}

/* Alert event toggle hover */
.sch-alert-row span[onclick]{cursor:pointer;transition:all .1s}
.sch-alert-row span[onclick]:hover{opacity:.85!important}

/* Step enabled checkbox cursor */
.sch-step-head input[type=checkbox]{cursor:pointer}

/* ═══ LLM LEADERBOARD ═════════════════════════════════════════════════════════ */
#llmView{flex:1;display:none;flex-direction:column;overflow:hidden;background:var(--bg)}
.llm-toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.llm-toolbar-title{font-size:.92rem;font-weight:700;color:var(--text);white-space:nowrap}
.llm-toolbar-meta{font-size:.75rem;color:var(--muted)}
.llm-search{width:180px;background:var(--surface3);border:1px solid var(--border);border-radius:5px;padding:5px 8px;color:var(--text);font-size:.75rem;outline:none}
.llm-search:focus{border-color:var(--accent)}
.llm-select{background:var(--surface3);border:1px solid var(--border);border-radius:5px;padding:5px 6px;color:var(--text2);font-size:.75rem;cursor:pointer;outline:none}
.llm-select:focus{border-color:var(--accent)}
.llm-chips{display:flex;gap:4px;flex-wrap:wrap}
.llm-chip{padding:3px 10px;border-radius:100px;border:1px solid var(--border);background:var(--surface3);color:var(--text2);cursor:pointer;font-size:.75rem;font-weight:600;transition:all .12s;white-space:nowrap}
.llm-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.llm-chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.llm-body{flex:1;display:flex;overflow:hidden;min-height:0}
/* ── Sidebar: model list ── */
.llm-sidebar{width:280px;min-width:200px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border-right:1px solid var(--border)}
.llm-sidebar-list{flex:1;overflow-y:auto;padding:4px}
.llm-model-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--radius);cursor:pointer;transition:all .12s;border:1px solid transparent}
.llm-model-row:hover{background:var(--surface2)}
.llm-model-row.selected{background:var(--accent-dim);border-color:var(--accent)}
.llm-model-rank{width:22px;text-align:center;font-size:.75rem;font-weight:700;color:var(--muted);flex-shrink:0}
.llm-model-info{flex:1;min-width:0}
.llm-model-name{font-size:.75rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.llm-model-org{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.llm-model-score{font-size:.75rem;font-weight:700;color:var(--accent);flex-shrink:0}
.llm-model-badge{font-size:.75rem;padding:1px 5px;border-radius:3px;font-weight:600;flex-shrink:0}
.llm-badge-open{background:var(--green-dim);color:var(--green)}
.llm-badge-closed{background:var(--yellow-dim);color:var(--yellow)}
/* ── Detail panel ── */
.llm-detail{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.llm-detail-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.82rem}
.llm-detail-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.llm-detail-name{font-size:1rem;font-weight:700;color:var(--text)}
.llm-detail-org{font-size:.78rem;color:var(--text2)}
.llm-detail-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
/* ── Radar chart container ── */
.llm-radar-wrap{width:320px;height:320px;flex-shrink:0;position:relative}
.llm-radar-wrap canvas{width:100%!important;height:100%!important}
/* ── Stats cards ── */
.llm-stats-grid{flex:1;min-width:280px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.llm-stat-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;text-align:center}
.llm-stat-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.llm-stat-value{font-size:1.1rem;font-weight:700;color:var(--text)}
.llm-stat-value.high{color:var(--green)}
.llm-stat-value.mid{color:var(--yellow)}
.llm-stat-value.low{color:var(--red)}
/* ── Table view ── */
.llm-table-wrap{flex:1;overflow:auto;padding:0 14px 14px}
.llm-table{width:100%;border-collapse:collapse;font-size:.73rem;min-width:900px}
.llm-table thead th{position:sticky;top:0;z-index:5;background:var(--bg);color:var(--muted);font-weight:700;text-align:left;padding:7px 8px;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none}
.llm-table thead th:hover{color:var(--accent)}
.llm-table thead th.sorted{color:var(--accent)}
.llm-table tbody td{padding:6px 8px;border-bottom:1px solid var(--border);white-space:nowrap;font-size:.73rem}
.llm-table tbody tr{cursor:pointer;transition:background .1s}
.llm-table tbody tr:hover{background:var(--surface2)}
.llm-table tbody tr.selected{background:var(--accent-dim)}
.llm-table .llm-td-name{font-weight:600;color:var(--text)}
.llm-table .llm-td-score{font-family:var(--font-mono);text-align:center}
.llm-table .llm-td-high{color:var(--green);font-weight:700}
.llm-table .llm-td-mid{color:var(--yellow);font-weight:700}
.llm-table .llm-td-low{color:var(--text2)}
.llm-table .llm-td-price{font-family:var(--font-mono);color:var(--green);text-align:right}
.llm-table .llm-td-speed{font-family:var(--font-mono);text-align:right}
.llm-table .llm-td-org{color:var(--muted);max-width:120px;overflow:hidden;text-overflow:ellipsis}
.llm-table .llm-sort-arrow{font-size:.65rem;margin-left:2px}
/* ── Tabs ── */
.llm-tabs{display:flex;gap:0;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.llm-tab-btn{padding:8px 16px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.75rem;font-weight:600;font-family:var(--font-sans);border-bottom:2px solid transparent;transition:all .12s;white-space:nowrap}
.llm-tab-btn:hover{color:var(--text2)}
.llm-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.llm-tab-pane{display:none;flex:1;flex-direction:column;overflow:hidden}
.llm-tab-pane.active{display:flex}
/* ── Compare panel (2-4 models) ── */
.llm-compare-wrap{padding:14px;overflow-y:auto}
.llm-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.llm-compare-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;overflow:hidden}
.llm-compare-name{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:2px}
.llm-compare-org{font-size:.75rem;color:var(--muted);margin-bottom:8px}
.llm-compare-scores{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:.73rem}
.llm-cs-lbl{color:var(--muted)}
.llm-cs-val{text-align:right;font-weight:600;color:var(--text)}
.llm-compare-actions{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
/* ── Responsive quick-filters bar ── */
.llm-quick-filters{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--surface2);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.llm-qf-label{font-size:.75rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-right:2px}

/* ── Message context toggle (skill injection expand/collapse) ─────────────── */
.msg-context-toggle{margin-top:6px}
.msg-ctx-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:4px;border:1px solid var(--border);
  background:var(--surface3);color:var(--muted);cursor:pointer;
  font-size:.68rem;font-family:var(--font-sans);
  transition:all .15s;
}
.msg-ctx-btn:hover{border-color:var(--accent);color:var(--accent)}
.msg-ctx-btn .ctx-icon{font-size:.75rem}
.msg-ctx-body{
  display:none;margin-top:6px;padding:8px 10px;
  border-radius:6px;border:1px solid var(--border);background:var(--surface);
  font-size:.68rem;font-family:var(--font-mono);color:var(--muted);
  white-space:pre-wrap;word-break:break-word;max-height:300px;overflow-y:auto;
  line-height:1.5;
}
.msg-context-toggle.open .msg-ctx-body{display:block}
.msg-context-toggle.open .ctx-label::before{content:'Hide context'}
.msg-context-toggle:not(.open) .ctx-label::before{content:'Show context'}
.msg-context-toggle .ctx-label{font-size:0;line-height:0}
.msg-context-toggle .ctx-label::before{font-size:.68rem;line-height:1}

/* ═══ DATA CRAWLER ════════════════════════════════════════════════════════════ */
#dataCrawlerView{background:var(--bg)}
.dc-engine-chip{
  display:inline-flex;align-items:center;
  padding:5px 10px;border-radius:100px;
  border:1px solid var(--border);background:var(--surface3);
  color:var(--muted);cursor:pointer;font-size:.72rem;
  font-weight:600;font-family:var(--font-sans);
  transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;user-select:none;
}
.dc-engine-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.dc-engine-chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.dc-engine-chip.dc-live{animation:dcPulseGreen 1.2s ease-in-out infinite}
.dc-quick{
  padding:5px 12px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);cursor:pointer;
  font-size:.72rem;transition:all .15s cubic-bezier(.4,0,.2,1);font-family:var(--font-sans);
}
.dc-quick:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);transform:translateY(-1px)}
/* ── Result cards ── */
.dc-result-card{
  display:flex;flex-direction:column;gap:4px;
  padding:10px 12px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface2);
  cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);
  opacity:0;transform:translateY(12px);
  will-change:transform,opacity;
}
.dc-result-card.dc-visible{opacity:1;transform:translateY(0);transition:all .35s cubic-bezier(.16,1,.3,1)}
.dc-result-card:hover{border-color:var(--accent);background:var(--accent-dim);transform:translateY(-1px)}
.dc-result-card.selected{border-color:var(--accent);background:var(--accent-dim)}
.dc-result-card.error{border-color:var(--red-dim);opacity:.5}
.dc-result-url{font-size:.68rem;font-family:var(--font-mono);color:var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-result-title{font-size:.8rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-result-snippet{font-size:.73rem;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dc-result-meta{display:flex;gap:8px;align-items:center;font-size:.68rem;color:var(--muted)}
.dc-engine-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 6px;border-radius:3px;font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.dc-engine-badge.google{background:var(--blue-dim);color:var(--blue)}
.dc-engine-badge.duckduckgo{background:var(--green-dim);color:var(--green)}
.dc-engine-badge.bing{background:var(--yellow-dim);color:var(--yellow)}
.dc-engine-badge.brave{background:rgba(255,140,66,.12);color:var(--orange)}
.dc-engine-badge.datacrawler{background:var(--accent-dim);color:var(--accent)}
/* ── Sidebar engine items ── */
.dc-engine-summary{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;border-radius:var(--radius);
  background:var(--surface2);border:1px solid var(--border);
  font-size:.73rem;transition:all .2s cubic-bezier(.4,0,.2,1);
  opacity:0;transform:translateX(-8px);
}
.dc-engine-summary.dc-visible{opacity:1;transform:translateX(0)}
.dc-engine-summary:hover{background:var(--surface3)}
.dc-engine-summary .dc-eng-name{font-weight:600;color:var(--text);flex:1}
.dc-engine-summary .dc-eng-count{font-weight:700;font-family:var(--font-mono)}
.dc-engine-summary .dc-eng-time{color:var(--muted);font-family:var(--font-mono);font-size:.68rem}
.dc-engine-summary.error{border-color:var(--red-dim)}
.dc-engine-summary.error .dc-eng-name{color:var(--red)}
/* ── Progress bar ── */
.dc-progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;flex-shrink:0}
.dc-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s cubic-bezier(.4,0,.2,1);width:0}
.dc-progress-fill.dc-indeterminate{width:30%!important;animation:dcSlide 1.2s ease-in-out infinite}
/* ── Shimmer skeleton ── */
.dc-skeleton{
  background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);
  background-size:200% 100%;animation:dcShimmer 1.5s ease-in-out infinite;border-radius:var(--radius);
}
/* ── Live activity dot ── */
.dc-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:dcPulseGreen 1s ease-in-out infinite;flex-shrink:0}
/* ── Step timeline ── */
.dc-step{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:.72rem;color:var(--muted);transition:all .2s}
.dc-step.active{color:var(--accent)}
.dc-step.active .dc-step-dot{background:var(--accent);box-shadow:0 0 6px var(--accent)}
.dc-step.done{color:var(--green)}
.dc-step.done .dc-step-dot{background:var(--green)}
.dc-step-dot{width:5px;height:5px;border-radius:50%;background:var(--border);transition:all .2s;flex-shrink:0}
/* ── Animations ── */
@keyframes dcShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes dcSlide{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
@keyframes dcPulseGreen{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes dcFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════════════════════════════════════
   ANIMATIONS & TRANSITIONS — Enhanced UI animations throughout the app
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Keyframe Definitions ────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-8px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-14px) }
  to   { opacity:1; transform:translateX(0) }
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(14px) }
  to   { opacity:1; transform:translateX(0) }
}
@keyframes fadeIn {
  from { opacity:0 }
  to   { opacity:1 }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.92) }
  to   { opacity:1; transform:scale(1) }
}
@keyframes scaleInBounce {
  0%   { opacity:0; transform:scale(.85) }
  60%  { opacity:1; transform:scale(1.03) }
  100% { opacity:1; transform:scale(1) }
}
@keyframes shimmer {
  0%   { background-position:-200% 0 }
  100% { background-position:200% 0 }
}
@keyframes glowPulse {
  0%,100% { box-shadow:0 0 4px rgba(200,80,249,.2),0 0 8px rgba(200,80,249,.08) }
  50%     { box-shadow:0 0 12px rgba(200,80,249,.35),0 0 24px rgba(200,80,249,.12) }
}
@keyframes borderGlow {
  0%,100% { border-color:var(--accent); box-shadow:0 0 4px rgba(200,80,249,.15) }
  50%     { border-color:var(--accent-hover); box-shadow:0 0 12px rgba(200,80,249,.3) }
}
@keyframes pulseStrong {
  0%,100% { opacity:1; transform:scale(1) }
  50%     { opacity:.5; transform:scale(1.06) }
}
@keyframes processingRipple {
  0%   { box-shadow:0 0 0 0 rgba(200,80,249,.4) }
  70%  { box-shadow:0 0 0 10px rgba(200,80,249,0) }
  100% { box-shadow:0 0 0 0 rgba(200,80,249,0) }
}
@keyframes floatUpDown {
  0%,100% { transform:translateY(0) }
  50%     { transform:translateY(-6px) }
}
@keyframes typewriterCursor {
  0%,100% { border-right-color:var(--accent) }
  50%     { border-right-color:transparent }
}
@keyframes slideDown {
  from { opacity:0; max-height:0; transform:translateY(-6px) }
  to   { opacity:1; max-height:500px; transform:translateY(0) }
}
@keyframes completeCelebrate {
  0%   { transform:scale(1); box-shadow:0 0 0 0 rgba(61,222,138,.5) }
  40%  { transform:scale(1.02); box-shadow:0 0 0 8px rgba(61,222,138,.25) }
  100% { transform:scale(1); box-shadow:0 0 0 0 rgba(61,222,138,0) }
}
@keyframes dotWave {
  0%,100% { transform:translateY(0); opacity:.4 }
  40%     { transform:translateY(-6px); opacity:1 }
  80%     { transform:translateY(0); opacity:.4 }
}
@keyframes skeletonWave {
  0%   { background-position:-200px 0 }
  100% { background-position:calc(200px + 100%) 0 }
}

/* ── Utility Animation Classes ───────────────────────────────────────────── */
.anim-fade-in-up    { animation:fadeInUp .35s ease-out both }
.anim-fade-in-down  { animation:fadeInDown .3s ease-out both }
.anim-fade-in-left  { animation:fadeInLeft .3s ease-out both }
.anim-fade-in-right { animation:fadeInRight .3s ease-out both }
.anim-fade-in       { animation:fadeIn .25s ease-out both }
.anim-scale-in      { animation:scaleIn .25s ease-out both }
.anim-scale-bounce  { animation:scaleInBounce .4s ease-out both }

/* Staggered children — each child animates with a delay */
.anim-stagger-children > * {
  opacity:0;
  animation:fadeInUp .35s ease-out forwards;
}
.anim-stagger-children > *:nth-child(1)  { animation-delay:.03s }
.anim-stagger-children > *:nth-child(2)  { animation-delay:.08s }
.anim-stagger-children > *:nth-child(3)  { animation-delay:.13s }
.anim-stagger-children > *:nth-child(4)  { animation-delay:.18s }
.anim-stagger-children > *:nth-child(5)  { animation-delay:.23s }
.anim-stagger-children > *:nth-child(6)  { animation-delay:.28s }
.anim-stagger-children > *:nth-child(7)  { animation-delay:.33s }
.anim-stagger-children > *:nth-child(8)  { animation-delay:.38s }
.anim-stagger-children > *:nth-child(9)  { animation-delay:.43s }
.anim-stagger-children > *:nth-child(10) { animation-delay:.48s }
.anim-stagger-children > *:nth-child(n+11) { animation-delay:.5s }

/* ── Page Load Entrance ──────────────────────────────────────────────────── */
.topbar.anim-loaded     { animation:fadeInDown .4s ease-out both }
.topbar-logo.anim-loaded { animation:scaleInBounce .5s ease-out .1s both }
.sidebar.anim-loaded     { animation:fadeInLeft .4s ease-out .15s both }
.empty-state.anim-loaded { animation:scaleIn .45s ease-out .2s both }
.chat-wrap.anim-loaded   { animation:fadeInRight .4s ease-out .1s both }

/* ── Chat Session Open ───────────────────────────────────────────────────── */
.chat-header.session-opening {
  animation:fadeInDown .3s ease-out both;
}
.chat-messages.session-opening {
  animation:fadeIn .3s ease-out both;
}

/* ── Message Entry ───────────────────────────────────────────────────────── */
.msg.msg-entering .msg-inner {
  animation:fadeInUp .3s ease-out both;
}
.msg.user.msg-entering .msg-bubble {
  animation:scaleIn .2s ease-out both;
}
.msg.assistant.msg-entering .msg-bubble {
  animation:fadeInLeft .25s ease-out both;
}

/* ── Message Streaming (processing) ──────────────────────────────────────── */
.msg.assistant .msg-bubble.streaming {
  animation:glowPulse 2s ease-in-out infinite;
  position:relative;
}
.msg.assistant .msg-bubble.streaming::after {
  content:'';
  display:inline-block;width:8px;height:14px;
  background:var(--accent);opacity:.8;
  margin-left:2px;vertical-align:text-bottom;
  animation:typewriterCursor .8s step-end infinite;
}
.msg.assistant .msg-bubble.streaming-final {
  animation:completeCelebrate .6s ease-out both;
}

/* ── Enhanced Typing Indicator ───────────────────────────────────────────── */
.typing-indicator.enhanced {
  padding:8px 14px;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  display:inline-flex;
  animation:fadeInUp .25s ease-out both;
}
.typing-indicator.enhanced .typing-dot {
  width:7px;height:7px;
  background:var(--accent);
}
.typing-indicator.enhanced .typing-dot:nth-child(1) { animation-delay:0s }
.typing-indicator.enhanced .typing-dot:nth-child(2) { animation-delay:.15s }
.typing-indicator.enhanced .typing-dot:nth-child(3) { animation-delay:.3s }

/* ── Thinking Block Animations ───────────────────────────────────────────── */
.thinking-block.anim-entering {
  animation:fadeInUp .25s ease-out both, glowPulse 3s ease-in-out infinite;
}
.thinking-label.streaming-label {
  animation:pulseStrong 1.5s ease-in-out infinite;
}

/* ── Tool Block Animations ───────────────────────────────────────────────── */
.tool-block.anim-entering {
  animation:fadeInUp .25s ease-out both;
}
.tool-status.running {
  animation:pulseStrong 1s ease-in-out infinite;
}

/* ── Processing Status Bar ───────────────────────────────────────────────── */
.streaming-status-bar {
  animation:fadeIn .25s ease-out both;
}
.streaming-status-bar .streaming-ping {
  animation:processingRipple 1.8s ease-out infinite;
}

/* ── Send Button Processing ──────────────────────────────────────────────── */
.send-btn.stop {
  animation:glowPulse 1.5s ease-in-out infinite;
}
.send-btn.stop::before {
  content:'';
  position:absolute;inset:-3px;border-radius:12px;
  border:2px solid var(--red);
  animation:processingRipple 1.5s ease-out infinite;
  pointer-events:none;
}

/* ── Chat Stop / Completion ──────────────────────────────────────────────── */
.msg-complete-indicator {
  text-align:center;padding:12px 20px;
  color:var(--green);font-size:.75rem;font-weight:600;
  animation:fadeInUp .3s ease-out both;
}
.msg-complete-indicator .complete-dot {
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-right:6px;
  animation:pulse 1.5s ease-in-out infinite;
}

/* ── View Transitions ────────────────────────────────────────────────────── */
/* Fade transition for view switching */
.view-fade-out {
  animation:fadeIn .2s ease-out reverse both;
}
.view-fade-in {
  animation:fadeIn .3s ease-out .05s both;
}
.view-slide-up-in {
  animation:fadeInUp .3s ease-out both;
}
.view-slide-down-in {
  animation:fadeInDown .3s ease-out both;
}

/* ── Scheduler / Task Manager Animations ─────────────────────────────────── */
.sch-table tbody tr.anim-row-enter {
  animation:fadeInUp .25s ease-out both;
}
.sch-table tbody tr.anim-row-enter:nth-child(1)  { animation-delay:.01s }
.sch-table tbody tr.anim-row-enter:nth-child(2)  { animation-delay:.04s }
.sch-table tbody tr.anim-row-enter:nth-child(3)  { animation-delay:.07s }
.sch-table tbody tr.anim-row-enter:nth-child(4)  { animation-delay:.10s }
.sch-table tbody tr.anim-row-enter:nth-child(5)  { animation-delay:.13s }
.sch-table tbody tr.anim-row-enter:nth-child(6)  { animation-delay:.16s }
.sch-table tbody tr.anim-row-enter:nth-child(7)  { animation-delay:.19s }
.sch-table tbody tr.anim-row-enter:nth-child(8)  { animation-delay:.22s }
.sch-table tbody tr.anim-row-enter:nth-child(9)  { animation-delay:.25s }
.sch-table tbody tr.anim-row-enter:nth-child(10) { animation-delay:.28s }
.sch-table tbody tr.anim-row-enter:nth-child(n+11) { animation-delay:.3s }

.tm-table tbody tr.anim-row-enter {
  animation:fadeInUp .25s ease-out both;
}
.tm-table tbody tr.anim-row-enter:nth-child(1)  { animation-delay:.01s }
.tm-table tbody tr.anim-row-enter:nth-child(2)  { animation-delay:.04s }
.tm-table tbody tr.anim-row-enter:nth-child(3)  { animation-delay:.07s }
.tm-table tbody tr.anim-row-enter:nth-child(4)  { animation-delay:.10s }
.tm-table tbody tr.anim-row-enter:nth-child(5)  { animation-delay:.13s }
.tm-table tbody tr.anim-row-enter:nth-child(6)  { animation-delay:.16s }
.tm-table tbody tr.anim-row-enter:nth-child(7)  { animation-delay:.19s }
.tm-table tbody tr.anim-row-enter:nth-child(8)  { animation-delay:.22s }
.tm-table tbody tr.anim-row-enter:nth-child(9)  { animation-delay:.25s }
.tm-table tbody tr.anim-row-enter:nth-child(10) { animation-delay:.28s }
.tm-table tbody tr.anim-row-enter:nth-child(n+11) { animation-delay:.3s }

/* ── Session List Item Animations ────────────────────────────────────────── */
.session-item.anim-entering {
  animation:fadeInLeft .22s ease-out both;
}
.session-item:nth-child(1).anim-entering  { animation-delay:.01s }
.session-item:nth-child(2).anim-entering  { animation-delay:.03s }
.session-item:nth-child(3).anim-entering  { animation-delay:.05s }
.session-item:nth-child(4).anim-entering  { animation-delay:.07s }
.session-item:nth-child(5).anim-entering  { animation-delay:.09s }
.session-item:nth-child(6).anim-entering  { animation-delay:.11s }
.session-item:nth-child(7).anim-entering  { animation-delay:.13s }
.session-item:nth-child(8).anim-entering  { animation-delay:.15s }
.session-item:nth-child(9).anim-entering  { animation-delay:.17s }
.session-item:nth-child(10).anim-entering { animation-delay:.19s }

/* ── Modal Enhancements ──────────────────────────────────────────────────── */
.modal-overlay.open .modal {
  animation:scaleIn .25s ease-out both;
}

/* ── Detail Panel Slide ──────────────────────────────────────────────────── */
.session-detail-panel.open {
  animation:slideDown .3s ease-out both;
  overflow:hidden;
}

/* ── Skimmer / Loading Skeleton ──────────────────────────────────────────── */
.skeleton-line {
  height:12px;border-radius:3px;margin-bottom:6px;
  background:linear-gradient(90deg,var(--surface3) 25%,var(--surface4) 50%,var(--surface3) 75%);
  background-size:200px 100%;
  animation:skeletonWave 1.5s ease-in-out infinite;
}
.skeleton-line.short { width:60% }
.skeleton-line.medium { width:80% }

/* ── Batch Bar Slide ─────────────────────────────────────────────────────── */
.batch-bar {
  animation:slideDown .25s ease-out both;
  overflow:hidden;
}

/* ── Session Status Dot Enhance ──────────────────────────────────────────── */
.session-status-dot.running {
  animation:pulse .8s ease-in-out infinite;
}
.status-dot.busy {
  animation:pulse .6s ease-in-out infinite;
}

/* ── Topbar Button Active Indicator ──────────────────────────────────────── */
.tb-btn.active {
  position:relative;
  animation:borderGlow 2s ease-in-out infinite;
}
.tb-btn.active::after {
  content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:2px;
  background:var(--accent);border-radius:1px;
  animation:glowPulse 2s ease-in-out infinite;
}

/* ── Empty State Logo Float ──────────────────────────────────────────────── */
.empty-state-logo {
  animation:floatUpDown 3s ease-in-out infinite;
}

/* ── Quick Action Cards Entrance ─────────────────────────────────────────── */
.quick-actions.anim-loaded > .quick-action {
  opacity:0;
  animation:fadeInUp .3s ease-out forwards;
}
.quick-actions.anim-loaded > .quick-action:nth-child(1) { animation-delay:.3s }
.quick-actions.anim-loaded > .quick-action:nth-child(2) { animation-delay:.38s }
.quick-actions.anim-loaded > .quick-action:nth-child(3) { animation-delay:.46s }
.quick-actions.anim-loaded > .quick-action:nth-child(4) { animation-delay:.54s }

/* ── Skills Dropdown Open ────────────────────────────────────────────────── */
.skill-dropdown-menu.open {
  animation:scaleIn .2s ease-out both;
}

/* ── Workspace Switcher Menu ─────────────────────────────────────────────── */
.ws-switcher-menu.open {
  animation:fadeInDown .2s ease-out both;
}

/* ── Combo Dropdown ──────────────────────────────────────────────────────── */
.sch-combo.open .sch-combo-drop {
  animation:fadeInDown .18s ease-out both;
}

/* ── LLM Leaderboard Transitions ─────────────────────────────────────────── */
.llm-model-row.anim-entering {
  animation:fadeInLeft .22s ease-out both;
}
.llm-model-row:nth-child(1).anim-entering  { animation-delay:.01s }
.llm-model-row:nth-child(2).anim-entering  { animation-delay:.03s }
.llm-model-row:nth-child(3).anim-entering  { animation-delay:.05s }
.llm-model-row:nth-child(4).anim-entering  { animation-delay:.07s }
.llm-model-row:nth-child(5).anim-entering  { animation-delay:.09s }
.llm-model-row:nth-child(6).anim-entering  { animation-delay:.11s }
.llm-model-row:nth-child(7).anim-entering  { animation-delay:.13s }
.llm-model-row:nth-child(8).anim-entering  { animation-delay:.15s }
.llm-model-row:nth-child(9).anim-entering  { animation-delay:.17s }
.llm-model-row:nth-child(10).anim-entering { animation-delay:.19s }