/* ── Lo-Fi Wireframe: dark (default) ── */
:root{
  --bg:#111;--surface:#1a1a1a;--surface2:#252525;
  --border-color:#555;--border-style:solid;--border-w:1px;
  --text:#f0f0f0;--muted:#adadad;--accent:#bbb;--accent-hover:#ddd;
  --user-bg:#1e1e1e;--user-border:#666;
  --ai-bg:#1a1a1a;--ai-border:#444;
  --code-bg:#0d0d0d;--scrollbar:#444;--danger:#cc4444;
  --radius:0px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Courier New',Courier,'SF Mono','Fira Code',monospace;
  --border:var(--border-w) var(--border-style) var(--border-color);
}
/* ── Lo-Fi Wireframe: light ── */
.light{
  --bg:#fafafa;--surface:#fff;--surface2:#f0f0f0;
  --border-color:#d0d0d0;--border-style:solid;--border-w:1px;
  --text:#111;--muted:#666;--accent:#333;--accent-hover:#000;
  --user-bg:#f5f5f5;--user-border:#bbb;
  --ai-bg:#fff;--ai-border:#ddd;
  --code-bg:#efefef;--scrollbar:#bbb;--danger:#aa2222;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.65}

/* ── SVG Icon base (Lucide via library) ── */
.ico{width:16px;height:16px;display:inline-block;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ico-xs{width:12px;height:12px}
.ico-sm{width:14px;height:14px}
.ico-logo{width:36px;height:36px;stroke-width:1.5}

/* ── Layout ── */
#app{display:flex;height:100%;overflow:hidden}

/* ── Sidebar ── */
#sidebar{
  width:240px;min-width:240px;background:var(--surface);
  border-right:var(--border);
  display:flex;flex-direction:column;
}
#sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-bottom:var(--border);min-height:44px;box-sizing:border-box;
}
#sidebar-header h1{font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
#sidebar-header .brand-icon{display:inline-flex;align-items:center;color:var(--muted)}
#sidebar-header .brand-icon .ico{width:18px;height:18px}

/* ── Sidebar Navigation Tabs ── */
.sidebar-nav{
  display:flex;flex-direction:column;padding:6px 6px 0;gap:2px;
  border-bottom:var(--border);padding-bottom:8px;
}
.nav-tab{
  background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;
  font-size:0.8rem;font-family:var(--mono);padding:7px 10px;text-align:left;
  text-transform:uppercase;letter-spacing:.06em;transition:all .15s;
  display:flex;align-items:center;gap:6px;
}
.ico-nav{width:14px;height:14px;flex-shrink:0;opacity:.7}
.nav-tab:hover{color:var(--text);background:var(--surface2)}
.nav-tab:hover .ico-nav{opacity:1}
.nav-tab.active{color:var(--text);border-color:var(--border-color);background:var(--surface2)}
.nav-tab.active .ico-nav{opacity:1}

/* ── Session list section (chat page only) ── */
#sidebar-chat-section{display:flex;flex-direction:column;flex:1;overflow:hidden}
#btn-theme{
  background:none;border:var(--border);color:var(--muted);cursor:pointer;
  padding:3px 7px;display:inline-flex;align-items:center;
  transition:color .15s,border-color .15s;
}
#btn-theme:hover{color:var(--text);border-color:var(--accent-hover)}
#btn-new{
  margin:10px;padding:7px 10px;background:none;color:var(--text);
  border:var(--border);cursor:pointer;font-size:0.867rem;font-weight:700;
  font-family:var(--font);text-transform:uppercase;letter-spacing:.08em;
  text-align:left;display:flex;align-items:center;gap:6px;
  transition:background .15s,border-color .15s;
}
#btn-new:hover{background:var(--surface2);border-color:var(--accent-hover)}
#session-list{flex:1;overflow-y:auto;padding:4px 6px}
#session-list::-webkit-scrollbar{width:4px}
#session-list::-webkit-scrollbar-thumb{background:var(--scrollbar)}
.sess-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 8px;cursor:pointer;margin-bottom:2px;
  border:1px solid transparent;transition:background .1s,border-color .1s;
}
.sess-item:hover{background:var(--surface2)}
.sess-item.active{background:var(--surface2);border-color:var(--border-color)}
.sess-name{font-size:0.867rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-family:var(--mono)}
.sess-del{
  background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.933rem;
  padding:2px 4px;opacity:0;transition:opacity .15s,color .15s;font-family:var(--font);
  line-height:1;
}
.sess-item:hover .sess-del{opacity:1}
.sess-del:hover{color:var(--danger)}
.sess-msgs{
  font-size:0.667rem;font-family:var(--mono);color:var(--muted);
  background:var(--surface2);padding:1px 5px;border-radius:8px;
  min-width:18px;text-align:center;flex-shrink:0;margin:0 4px;
}

/* ── Settings button (sidebar bottom) ── */
.sidebar-settings-btn{
  display:block;width:calc(100% - 20px);margin:8px 10px 12px;padding:7px 10px;
  background:none;color:var(--muted);border:var(--border);cursor:pointer;
  font-size:0.867rem;font-family:var(--mono);text-align:left;
  transition:color .15s,border-color .15s;
}
.sidebar-settings-btn:hover{color:var(--text);border-color:var(--accent-hover)}

/* ── Main ── */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#chat-header{
  padding:10px 16px;border-bottom:var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;min-height:44px;box-sizing:border-box;
}
#chat-title{font-size:0.867rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
#status-dot{width:8px;height:8px;background:var(--border-color);transition:background .2s,outline-color .2s,box-shadow .2s;outline:2px solid transparent;border-radius:50%}
#status-dot.live{background:#4caf50;outline-color:#4caf50;box-shadow: 0 0 12px 2px #00ff0a;}

/* ── Messages ── */
#messages{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
}
#messages::-webkit-scrollbar{width:4px}
#messages::-webkit-scrollbar-thumb{background:var(--scrollbar)}
.msg{max-width:84%;line-height:1.6;flex-shrink:0}
.msg.user{
  align-self:flex-end;background:var(--user-bg);
  border:1px solid var(--user-border);padding:9px 12px;
}
.msg.assistant{
  align-self:flex-start;background:var(--ai-bg);
  border:1px solid var(--ai-border);padding:9px 12px;
}
/* ── tool call + result (merged blob) ── */
.msg.tool-call{
  align-self:flex-start;max-width:88%;
  background:var(--surface);border:1px solid var(--border-color);
  border-radius:8px;overflow:hidden;
  padding:0;opacity:.9;font-family:var(--mono);
  margin:2px 0;
}
/* header bar — tool name + time + expand */
.tc-header{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;background:var(--code-bg);
  border-bottom:1px solid var(--border-color);
}
.tc-badge{flex-shrink:0;display:inline-flex;align-items:center;opacity:.7}
.tc-name{font-weight:700;font-size:0.867rem;letter-spacing:.02em}
.tc-time{font-size:0.733rem;opacity:.45;margin-left:auto}
.tc-expand,.tc-expand-result{
  background:none;border:none;color:var(--text);cursor:pointer;
  padding:2px 4px;transition:transform .15s;display:inline-flex;align-items:center;
}
.msg.open .tc-expand{transform:rotate(90deg)}
.msg.result-open .tc-expand-result{transform:rotate(90deg)}
/* args body */
.tc-body{padding:6px 12px}
.tc-args-preview,.tc-result-preview{
  font-size:0.8rem;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;opacity:.8;
}
.tc-args-full,.tc-result-full{
  display:none;background:var(--code-bg);border:1px solid var(--border-color);border-radius:4px;
  padding:8px 10px;margin:4px 0 0;max-height:220px;overflow:auto;
  font-size:0.8rem;line-height:1.5;
}
.tc-args-full code,.tc-result-full code{background:none;border:none;padding:0;font-size:0.8rem}
.msg.open .tc-args-full{display:block}
.msg.open .tc-args-preview{display:none}
.msg.result-open .tc-result-full{display:block}
.msg.result-open .tc-result-preview{display:none}
/* result section — visually distinct */
.tc-result-section{
  background:var(--code-bg);
  border-top:1px solid var(--accent);
}
/* rich-HTML media in tool result (e.g. browser screenshot) */
.tc-result-media{
  padding:8px 12px 4px;
  border-bottom:1px solid var(--border-color);
}
.tc-result-media img{
  max-width:100%;
  border-radius:4px;
  display:block;
}
.tc-result-header{
  display:flex;align-items:center;gap:8px;
  padding:5px 12px;
  opacity:.85;
}
.tc-result-body{
  padding:6px 12px 8px;
  background:var(--surface);
  border-top:1px solid var(--border-color);
}
.tc-result-label{font-size:0.733rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.6}
.tc-result-slot:empty{display:none}
/* collapsed skill card */
.msg.skill-loaded{opacity:.7}
.msg.skill-loaded .tc-header{background:var(--surface);border-bottom:1px solid var(--border-color)}
.msg.skill-loaded .tc-body{display:none}
.msg.skill-loaded.open .tc-body{display:block}
.msg.skill-loaded .skill-desc{font-size:0.733rem;opacity:.6;margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}

/* sub-agent progress banner & tool calls */
.msg.agent-banner{
  align-self:flex-start;max-width:88%;
  background:var(--surface);
  border:1px solid var(--accent);border-left:3px solid var(--accent);
  padding:6px 10px;margin:6px 0 2px;font-size:0.733rem;font-family:var(--mono);
  user-select:none;
}
.msg.agent-banner.agent-banner-done{border-color:var(--border-color);opacity:.7}
.agent-banner-row{display:flex;align-items:center;gap:6px;cursor:pointer}
.agent-banner-row:hover{opacity:.85}
.agent-banner-chevron{
  display:inline-flex;align-items:center;color:var(--muted);
  transition:transform .2s ease;
}
.agent-accordion-expanded .agent-banner-chevron{transform:rotate(90deg)}
.agent-banner-icon{display:inline-flex;align-items:center;color:var(--accent)}
.agent-banner-name{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:0.733rem}
.agent-banner-status{font-size:0.733rem;color:var(--muted);font-style:italic}
.agent-banner-status.agent-done{color:var(--accent);font-style:normal}
.agent-banner-count{font-size:0.733rem;color:var(--muted);opacity:.5}
.msg.agent-tool-call{
  border-left:3px solid var(--accent);margin-left:10px;opacity:.8;
}
.tc-agent-label{
  font-size:0.733rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);font-weight:700;padding:0 3px;
  border:1px solid var(--accent);border-radius:2px;line-height:1.3;
  flex-shrink:0;
}

/* tool toggle button — floating in chat */
#chat-fab-bar{
  position:absolute;top:50px;right:12px;z-index:50;
  display:flex;gap:4px;
}
.btn-tool-toggle,.btn-export-chat{
  background:var(--surface);border:1px solid var(--border-color);color:var(--muted);
  font-family:var(--mono);font-size:0.733rem;padding:2px 8px;cursor:pointer;
  letter-spacing:.04em;white-space:nowrap;
  transition:opacity .15s,color .15s,border-color .15s;
  display:inline-flex;align-items:center;gap:3px;
}
.btn-tool-toggle:hover,.btn-export-chat:hover{opacity:1;color:var(--text);border-color:var(--accent)}
.msg-role{
  font-size:0.733rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);font-family:var(--mono);
}
.msg.user .msg-role{color:var(--accent-hover)}
.msg-meta{
  display:flex;align-items:center;gap:8px;
  margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border-color);
}
.msg-time{font-size:0.733rem;color:var(--muted);font-family:var(--mono);opacity:.6;letter-spacing:.04em}
/* copy button on message header */
.btn-copy-msg{
  margin-left:auto;background:none;border:1px solid var(--border-color);
  color:var(--muted);font-family:var(--mono);font-size:0.733rem;padding:1px 6px;
  cursor:pointer;opacity:0;transition:opacity .15s;letter-spacing:.04em;
}
.msg:hover .btn-copy-msg{opacity:.7}
.btn-copy-msg:hover{opacity:1!important;color:var(--text)}
.btn-copy-msg.copied{color:var(--muted);opacity:1!important}
.msg-body{word-break:break-word;font-size:0.933rem;line-height:1.65}
.msg-body p{margin:0 0 6px}
.msg-body p:last-child{margin-bottom:0}
.msg.user .msg-body{white-space:pre-wrap}
/* inline code */
.msg-body code{
  background:var(--code-bg);border:1px solid var(--border-color);
  padding:1px 5px;font-family:var(--mono);font-size:.87em;
}
/* code block */
.code-block-wrapper{position:relative;margin:6px 0}
.code-block-header{
  display:flex;align-items:center;justify-content:flex-end;
  background:var(--code-bg);border:1px solid var(--border-color);border-bottom:none;
  padding:3px 8px;gap:8px;
}
.code-lang{font-family:var(--mono);font-size:0.733rem;color:var(--muted);opacity:.7;margin-right:auto;letter-spacing:.04em}
.btn-copy-code{
  background:none;border:1px solid var(--border-color);color:var(--muted);
  font-family:var(--mono);font-size:0.733rem;padding:1px 6px;cursor:pointer;
  opacity:.6;transition:opacity .15s;letter-spacing:.04em;
}
.btn-copy-code:hover{opacity:1;color:var(--text)}
.btn-copy-code.copied{color:var(--muted);opacity:1}
.msg-body pre{
  background:var(--code-bg);border:1px solid var(--border-color);
  padding:10px 12px;overflow-x:auto;margin:6px 0;
}
.code-block-wrapper pre{margin:0;border-top:none}
.msg-body pre code{background:none;border:none;padding:0;font-size:.9em}
/* blockquote */
.msg-body blockquote{
  border-left:2px solid var(--accent);padding-left:10px;margin:5px 0;color:var(--muted);
}
/* lists */
.msg-body ul,.msg-body ol{padding-left:18px;margin:4px 0}
/* headings — larger margin above than below so heading binds to following content */
.msg-body h1,.msg-body h2,.msg-body h3,.msg-body h4,.msg-body h5,.msg-body h6{margin:14px 0 3px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.msg-body h1+*,.msg-body h2+*,.msg-body h3+*{margin-top:0}
.msg-body :first-child{margin-top:0}
.msg-body h1{font-size:1.15em}
.msg-body h2{font-size:1.05em}
.msg-body h3{font-size:1em}
.msg-body h4,.msg-body h5,.msg-body h6{font-size:.92em}
/* links */
.msg-body a{color:var(--accent-hover);text-decoration:underline}
.msg-body a:hover{color:var(--text)}
/* table */
.msg-body table{border-collapse:collapse;margin:6px 0;width:100%}
.msg-body th,.msg-body td{border:1px solid var(--border-color);padding:4px 8px;text-align:left}
.msg-body th{background:var(--surface2);font-weight:700;text-transform:uppercase;font-size:.85em;letter-spacing:.06em}

/* ── OTA Artifacts ── */
.ota-artifact{margin:8px 0;display:flex}
.ota-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border:1px solid var(--accent);color:var(--accent-hover);
  background:transparent;font-family:var(--mono);font-size:0.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
}
.ota-btn:hover{background:var(--accent);color:var(--bg)}
.ota-btn-file{border-color:var(--accent-hover)}
.ota-btn-file:hover{background:var(--accent-hover);color:var(--bg)}
.ota-btn-inert{border-color:var(--border-color);color:var(--muted);cursor:default}
.ota-file-path{font-size:0.733rem;color:var(--muted);margin-left:4px;opacity:.7}
/* alert */
.ota-alert{
  display:flex;align-items:flex-start;gap:8px;padding:8px 14px;font-size:0.867rem;
  font-family:var(--mono);border-left:3px solid var(--muted);background:var(--surface2);
  width:100%;
}
.ota-alert-icon{flex-shrink:0;margin-top:1px}
.ota-alert-msg{line-height:1.5}
.ota-alert-info{border-left-color:#58a6ff;color:#58a6ff}
.ota-alert-info .ota-alert-icon{color:#58a6ff}
.ota-alert-success{border-left-color:#3fb950;color:#3fb950}
.ota-alert-success .ota-alert-icon{color:#3fb950}
.ota-alert-warning{border-left-color:#d29922;color:#d29922}
.ota-alert-warning .ota-alert-icon{color:#d29922}
.ota-alert-error{border-left-color:#f85149;color:#f85149}
.ota-alert-error .ota-alert-icon{color:#f85149}
/* progress */
.ota-progress{width:100%;font-family:var(--mono);font-size:0.733rem}
.ota-progress-label{margin-bottom:4px;color:var(--muted);font-size:0.8rem}
.ota-progress-track{height:6px;background:var(--surface2);overflow:hidden;border:1px solid var(--border-color)}
.ota-progress-bar{height:100%;background:var(--accent);transition:width .3s ease}
.ota-progress-value{text-align:right;color:var(--muted);margin-top:2px}
/* thinking indicator */
#thinking{
  align-self:flex-start;padding:7px 12px;background:var(--ai-bg);
  border:1px solid var(--ai-border);display:none;gap:8px;align-items:center;flex-shrink:0;
}
#thinking.show{display:flex}
.thinking-dots{display:flex;gap:5px;align-items:center}
.dot{width:6px;height:6px;background:var(--muted);animation:bounce .9s infinite}
.dot:nth-child(2){animation-delay:.15s}
.dot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}

/* tool label in thinking indicator */
#tool-label-wrap{
  overflow:hidden;height:1.3em;position:relative;min-width:0;
}
#tool-label{
  display:block;font-size:0.733rem;color:var(--muted);font-family:var(--mono);
  white-space:nowrap;opacity:0;transform:translateY(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1);
}
#tool-label.visible{opacity:1;transform:translateY(0)}
#tool-label.exit{opacity:0;transform:translateY(-100%)}

/* ── Input bar ── */
#input-bar{
  padding:12px 16px;border-top:var(--border);background:var(--surface);
  display:flex;gap:8px;align-items:flex-end;position:relative;flex-wrap:wrap;
}
.bg-task-indicator{
  width:100%;
  border:1px solid var(--border-color);
  background:var(--surface2);
  padding:6px 10px;
  font-family:var(--mono);
  font-size:0.733rem;
  color:var(--muted);
}
.bg-task-line{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-task-dot{width:6px;height:6px;border-radius:50%;background:#f6c34e;display:inline-block;flex-shrink:0}
#input{
  flex:1;background:var(--surface2);border:1px solid var(--border-color);
  color:var(--text);font-family:var(--mono);font-size:0.867rem;padding:9px 12px;
  resize:none;max-height:200px;min-height:40px;line-height:1.5;outline:none;
  transition:border-color .15s;
}
#input:focus{border-color:var(--accent-hover);}
#input::placeholder{color:var(--muted)}
#btn-send{
  background:none;border:var(--border);color:var(--text);
  cursor:pointer;font-size:0.933rem;font-family:var(--font);font-weight:700;
  padding:0 14px;height:40px;display:flex;flex-shrink:0;
  align-items:center;justify-content:center;gap:6px;
  text-transform:uppercase;letter-spacing:.06em;
  transition:background .15s,border-color .15s;
}
#btn-send .ico-send{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#btn-send:hover{background:var(--surface2);border-color:var(--accent-hover)}
#btn-send:disabled{opacity:.35;cursor:not-allowed}
#input:disabled{opacity:.5;cursor:not-allowed;background:var(--surface)}

/* ── Attach button ─────────────────────────────────────────────────────── */
#btn-attach{
  background:none;border:var(--border);color:var(--muted);
  cursor:pointer;padding:0;width:40px;height:40px;display:flex;flex-shrink:0;
  align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s;
}
#btn-attach:hover{background:var(--surface2);border-color:var(--accent-hover);color:var(--text)}
#btn-attach .ico-attach{width:18px;height:18px}

/* ── File preview ──────────────────────────────────────────────────────── */
.file-preview{
  width:100%;display:flex;flex-wrap:wrap;gap:6px;padding:0 0 6px 0;
}
.file-chip{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--surface2);border:1px solid var(--border-color);
  padding:4px 8px;font-size:0.767rem;font-family:var(--mono);
  color:var(--text);max-width:200px;
}
.file-chip .file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip .file-remove{
  cursor:pointer;color:var(--muted);font-weight:bold;font-size:0.867rem;line-height:1;
  margin-left:2px;padding:0 2px;
}
.file-chip .file-remove:hover{color:var(--danger,#e55)}
.file-chip-img{width:32px;height:32px;object-fit:cover;border-radius:2px}
.file-chip .file-icon{font-size:0.933rem;line-height:1}
#input-bar.drag-over{border-color:var(--accent-hover);background:color-mix(in srgb, var(--accent-hover) 8%, var(--surface))}

/* Media previews inside user chat bubbles */
.msg-media{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.msg-media-img{max-width:200px;max-height:180px;border-radius:6px;object-fit:cover;cursor:pointer;border:1px solid var(--border);transition:transform .15s}
.msg-media-img:hover{transform:scale(1.03)}
.msg-media-file{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--surface-alt,rgba(255,255,255,.06));border:1px solid var(--border);border-radius:4px;font-size:.85rem;color:var(--text-secondary)}

/* Upload progress bar */
.upload-progress{padding:8px 16px;display:none}
.upload-progress-bar{height:4px;background:var(--surface-alt,rgba(255,255,255,.1));border-radius:2px;overflow:hidden}
.upload-progress-fill{height:100%;background:var(--accent-hover);width:0%;transition:width .2s ease}
.upload-progress-text{font-size:.75rem;color:var(--text-secondary);margin-top:3px;text-align:right}

.chat-agent-suggestions{
  display:none;
  position:absolute;
  left:16px;
  right:96px;
  bottom:58px;
  max-height:200px;
  overflow-y:auto;
  background:var(--bg);
  border:var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  z-index:30;
}
.chat-agent-suggestions.show{display:block}
.chat-agent-item{
  padding:7px 10px;
  font-family:var(--mono);
  font-size:0.8rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.chat-agent-item:hover,.chat-agent-item.highlighted{background:var(--surface2);color:var(--accent-hover)}
.chat-agent-id{opacity:.95}
.chat-agent-name{font-size:0.733rem;color:var(--muted)}

/* ── Empty state ── */
#empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--muted);text-align:center;padding:40px;
}
#empty .logo{margin-bottom:4px;color:var(--muted);display:flex;justify-content:center}
#empty h2{font-size:1.067rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.1em}
#empty p{font-size:0.8rem;max-width:320px;font-family:var(--mono)}
#empty .wire-box{
  margin-top:12px;border:1px solid var(--border-color);padding:12px 24px;
  font-size:0.733rem;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;
}

/* ── Settings page ── */
#settings-page{
  flex:1;display:none;flex-direction:column;overflow:hidden;min-width:0;
}
#settings-page.active{display:flex}
#settings-header{
  padding:10px 16px;border-bottom:var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
#settings-header span{font-size:0.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);flex:1}
#btn-back-settings{
  background:none;border:var(--border);color:var(--muted);cursor:pointer;
  font-family:var(--mono);font-size:0.733rem;padding:4px 10px;
  text-transform:uppercase;letter-spacing:.06em;transition:color .15s,border-color .15s;
}
#btn-back-settings:hover{color:var(--text);border-color:var(--accent-hover)}
#cfg-mode-btn{
  font-size:0.733rem;font-family:var(--mono);background:none;border:1px solid var(--border-color);
  color:var(--muted);cursor:pointer;padding:3px 8px;letter-spacing:.06em;
  text-transform:uppercase;transition:color .15s;
}
#cfg-mode-btn:hover{color:var(--text)}
#settings-body{
  flex:1;overflow-y:auto;padding:0;display:flex;flex-direction:column;min-height:0;
}
#settings-body::-webkit-scrollbar{width:4px}
#settings-body::-webkit-scrollbar-thumb{background:var(--scrollbar)}

/* accordion */
.cfg-accordion{border-bottom:1px solid var(--border-color)}
.cfg-accordion-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;cursor:pointer;
  font-size:0.733rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-family:var(--mono);
  transition:color .15s,background .15s;user-select:none;
}
.cfg-accordion-header:hover{color:var(--text);background:var(--surface2)}
.cfg-accordion-chevron{display:inline-flex;align-items:center;transition:transform .2s}
.cfg-accordion.open > .cfg-accordion-header > .cfg-accordion-chevron{transform:rotate(90deg)}
.cfg-accordion-body{display:none;padding:4px 16px 14px}
.cfg-accordion.open > .cfg-accordion-body{display:block}
/* nested (level 2) accordion */
.cfg-accordion-nested{border-bottom:none;margin:4px 0;border-left:1px solid var(--border-color)}
.cfg-accordion-nested>.cfg-accordion-header{padding:8px 12px;font-size:0.733rem}
.cfg-accordion-nested>.cfg-accordion-body{padding:4px 12px 10px}
/* flat sub-sections (level 3+) */
.cfg-sub-section{margin:8px 0 4px;padding-left:10px;border-left:1px solid var(--border-color)}
.cfg-sub-header{
  font-size:0.733rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:0 0 8px;font-family:var(--mono);
}

/* form rows */
.cfg-row{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.cfg-row:last-child{margin-bottom:0}
.cfg-row label{font-size:0.8rem;color:var(--muted);font-family:var(--mono);letter-spacing:.04em}
.cfg-row input[type=text],.cfg-row input[type=number],.cfg-row input[type=password],.cfg-row select{
  background:var(--surface2);border:1px solid var(--border-color);color:var(--text);
  font-family:var(--mono);font-size:0.867rem;padding:7px 10px;outline:none;
  transition:border-color .15s;width:100%;
}
.cfg-row input:focus,.cfg-row select:focus{border-style:solid;border-color:var(--accent-hover)}
/* Toggle switch — standard rounded pill style */
.cfg-toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.cfg-toggle input{opacity:0;width:0;height:0;position:absolute}
.cfg-toggle-track{
  position:absolute;inset:0;cursor:pointer;border-radius:11px;
  background:var(--surface2);border:1px solid var(--border-color);
  transition:background .2s,border-color .2s;
}
.cfg-toggle-track::after{
  content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform .2s,background .2s;
}
.cfg-toggle input:checked + .cfg-toggle-track{background:#4caf50;border-color:#4caf50}
.cfg-toggle input:checked + .cfg-toggle-track::after{transform:translateX(18px);background:#fff}
.cfg-row-toggle{display:flex;flex-direction:row;align-items:center;gap:10px;margin-bottom:12px}
.cfg-row-toggle label{font-size:0.8rem;color:var(--muted);font-family:var(--mono);letter-spacing:.04em}
.cfg-footer{
  padding:12px 16px;display:flex;gap:8px;justify-content:flex-end;
  border-top:var(--border);background:var(--surface);
}
.cfg-footer button{
  background:none;border:var(--border);color:var(--text);cursor:pointer;
  font-family:var(--font);font-size:0.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:6px 16px;
  transition:background .15s;
}
.cfg-footer button:hover{background:var(--surface2)}
#cfg-save{border-color:var(--accent-hover)}
#cfg-status{font-size:0.8rem;font-family:var(--mono);color:var(--muted);align-self:center;flex:1;font-weight:700;letter-spacing:.04em}

/* raw editor (highlight overlay) */
#cfg-raw-wrapper{
  display:none;position:relative;width:100%;flex:1;min-height:0;
  box-sizing:border-box;background:var(--code-bg);overflow:hidden;
  border:2px solid transparent;transition:border-color .25s;
}
#cfg-raw-wrapper.active{display:flex;flex-direction:column}
#cfg-raw-highlight{
  position:absolute;inset:0;padding:14px 16px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-family:var(--mono);font-size:0.8rem;line-height:1.6;color:var(--text);pointer-events:none;margin:0;
}
#cfg-raw{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:14px 16px;
  background:transparent;border:none;color:transparent;caret-color:var(--text);outline:none;
  resize:none;font-family:var(--mono);font-size:0.8rem;line-height:1.6;overflow:auto;
  -webkit-text-fill-color:transparent;
}
#cfg-raw:focus{outline:none}
/* dark mode highlight colors (default) */
.json-key{color:#9dd6ff}
.json-string{color:#b6f2c6}
.json-number{color:#ffd6a5}
.json-literal{color:#ffb3b3}
.json-punct{color:var(--muted)}
/* light mode highlight colors */
.light .json-key{color:#0550ae}
.light .json-string{color:#116329}
.light .json-number{color:#953800}
.light .json-literal{color:#cf222e}

/* top-level non-object fields */
.cfg-top-row{padding:10px 16px;border-bottom:1px solid var(--border-color)}

/* ── Pages (multi-page routing) ── */
.page{flex:1;display:none;flex-direction:column;overflow:hidden;min-width:0}
.page.active{display:flex}
.page-header{
  padding:10px 16px;border-bottom:var(--border);background:var(--surface);
  display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;flex-wrap: wrap;align-items: center;
}
.page-header span{font-size:0.8rem;line-height: normal;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);width: max-content;}
.page-body{flex:1;overflow-y:auto;padding:16px}
.page-body::-webkit-scrollbar{width:4px}
.page-body::-webkit-scrollbar-thumb{background:var(--scrollbar)}
.btn-menu-mobile{background:none;border:none;color:var(--text);cursor:pointer;padding:4px;display:none;align-items:center}

/* ── Channels page ── */
.channel-card{border:var(--border);margin-bottom:12px;background:var(--surface)}
.channel-card-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border-color);cursor:pointer;user-select:none}
.channel-card-header:hover{background:var(--surface2)}
.channel-icon{font-size:1.2rem;flex-shrink:0;display:inline-flex;align-items:center}
.channel-icon svg{width:20px;height:20px}
.channel-name{flex:1;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);color:var(--text)}
.channel-card-body{padding:12px 14px;display:none}
.channel-card.open .channel-card-body{display:block}
.channel-hint,.conn-hint{font-size:0.733rem;color:var(--muted);font-family:var(--mono);margin-top:4px}
.channel-hint a,.conn-hint a{color:var(--accent-hover);text-decoration:underline}
.channel-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color)}
.cfg-status-text{font-size:0.733rem;font-family:var(--mono);color:var(--muted);flex:1}

/* ── Connections Wizard ── */
.wizard-tabs{display:flex;border-bottom:var(--border);background:var(--surface);padding:0 12px;gap:0;flex-shrink:0}
.wizard-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;font-size:0.733rem;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:10px 14px;transition:color .15s,border-color .15s}
.wizard-tab:hover{color:var(--text)}
.wizard-tab.active{color:var(--text);border-bottom-color:var(--accent-hover)}
.wizard-pane{display:none;padding:16px}
.wizard-pane.active{display:block}
.wizard-pane::-webkit-scrollbar{width:4px}
.wizard-pane::-webkit-scrollbar-thumb{background:var(--scrollbar)}
#page-channels{overflow-y:auto}

/* Provider card grid — wider cards for better readability */
.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:10px;align-items:start}
.conn-card{border:var(--border);background:var(--surface);transition:border-color .2s}
.conn-card.configured{border-left:2px solid #4caf50;order:-1}
.conn-card-head{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;user-select:none;border-bottom:1px solid transparent;transition:background .15s}
.conn-card.open .conn-card-head{border-bottom-color:var(--border-color)}
.conn-card-head:hover{background:var(--surface2)}
.conn-icon{display:inline-flex;align-items:center;color:var(--muted);flex-shrink:0}
.conn-icon svg{width:15px;height:15px}
.conn-icon .ico{width:14px;height:14px;opacity:.7}
.conn-name{flex:1;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.conn-badge{font-size:0.733rem;font-family:var(--mono);padding:2px 8px;border:1px solid var(--border-color);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.conn-badge.ok{border-color:#4caf50;color:#4caf50;border-style:solid}
.conn-fields{padding:12px 14px;display:none}
.conn-card.open .conn-fields{display:block}
.conn-field{margin-bottom:10px}
.conn-field:last-child{margin-bottom:0}
.conn-field>label{display:block;font-size:0.733rem;font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.conn-hint{font-size:0.733rem;color:var(--muted);font-family:var(--mono);margin-top:4px;line-height:1.5}
.conn-hint a{color:var(--accent)}
.conn-hint-inline{text-transform:none;letter-spacing:0;font-size:0.733rem;color:var(--muted);opacity:.7}
.conn-field input:not(.model-picker-search){width:100%;box-sizing:border-box;background:var(--bg);border:var(--border);color:var(--text);font-family:var(--mono);font-size:0.8rem;padding:6px 10px;outline:none;transition:border-color .15s}
.conn-field input:not(.model-picker-search):focus{border-color:var(--accent-hover)}
.conn-field input.conn-field-error{border-color:#e74c3c!important;background:rgba(231,76,60,.06)!important}
.conn-field input.conn-field-error:focus{border-color:#e74c3c!important}
.conn-field select{width:100%;box-sizing:border-box;background:var(--bg);border:var(--border);color:var(--text);font-family:var(--mono);font-size:0.8rem;padding:6px 10px;outline:none;cursor:pointer;transition:border-color .15s}
.conn-field select:focus{border-color:var(--accent-hover)}
.conn-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:var(--border);background:var(--surface);flex-shrink:0}

/* ── Model Picker (autocomplete tag input for enabled models) ── */
.model-picker{border:var(--border);background:var(--bg);padding:6px 8px;position:relative;transition:border-color .15s}
.model-picker:focus-within{border-color:var(--accent-hover)}
.model-picker-tags{display:flex;flex-wrap:wrap;gap:4px}
.model-picker-tags:empty{display:none}
.model-tag{display:inline-flex;align-items:center;gap:3px;background:var(--surface2);border:1px solid var(--border-color);padding:2px 4px 2px 8px;font-family:var(--mono);font-size:0.733rem;color:var(--text);transition:border-color .15s}
.model-tag:hover{border-color:var(--accent)}
.model-tag-text{white-space:nowrap}
.model-tag-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.933rem;padding:0 2px;line-height:1;transition:color .15s}
.model-tag-remove:hover{color:var(--danger)}
.model-picker-search-row{display:flex;align-items:center;gap:4px;margin-top:4px}
.model-picker-tags:empty+.model-picker-search-row{margin-top:0}
.model-picker-search{flex:1;background:transparent;border:none;color:var(--text);font-family:var(--mono);font-size:0.8rem;padding:3px 0;outline:none;min-width:120px}
.model-picker-search::placeholder{color:var(--muted);opacity:.6}
.model-picker-fetch{background:var(--surface2);border:1px solid var(--border-color);color:var(--text);cursor:pointer;padding:3px 10px;font-size:0.733rem;font-family:var(--font);font-weight:700;text-transform:uppercase;letter-spacing:.04em;transition:color .15s,border-color .15s,background .15s;flex-shrink:0}
.model-picker-fetch:hover{color:var(--accent-hover);border-color:var(--accent-hover);background:var(--surface)}
.model-picker-dropdown{display:none;position:absolute;left:-1px;right:-1px;top:calc(100% + 2px);background:var(--bg);border:var(--border);max-height:220px;overflow-y:auto;z-index:20;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.model-picker-dropdown.show{display:block}
.model-picker-dropdown::-webkit-scrollbar{width:4px}
.model-picker-dropdown::-webkit-scrollbar-thumb{background:var(--scrollbar)}
.model-picker-item{padding:6px 10px;font-family:var(--mono);font-size:0.8rem;cursor:pointer;color:var(--text);transition:background .1s}
.model-picker-item:hover{background:var(--surface2);color:var(--accent-hover)}
.model-picker-item.highlighted{background:var(--surface2)}
.model-picker-status{padding:8px 10px;font-family:var(--mono);font-size:0.733rem;color:var(--muted);font-style:italic}

/* ── Add Provider Card ── */
.conn-card.conn-card-add{border:1px solid var(--muted);background:transparent;cursor:pointer;min-height:100px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.conn-card.conn-card-add:hover{border-color:var(--accent);background:rgba(255,255,255,.02)}
.conn-card-add-inner{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);transition:color .2s}
.conn-card.conn-card-add:hover .conn-card-add-inner{color:var(--accent)}
.conn-add-icon{font-size:1.867rem;font-weight:300;line-height:1}
.conn-add-text{font-family:var(--mono);font-size:0.733rem;letter-spacing:.05em;text-transform:uppercase}

/* ── Per-card action buttons ── */
.conn-card-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--surface2)}
.btn-provider-save,.btn-provider-delete{font-family:var(--mono);font-size:0.733rem;padding:5px 14px;border:1px solid var(--muted);background:none;color:var(--text);cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:all .15s}
.btn-provider-save:hover{border-color:var(--accent);color:var(--accent)}
.btn-provider-save:disabled{opacity:.5;cursor:not-allowed}
.btn-provider-delete{border-color:transparent;color:var(--muted)}
.btn-provider-delete:hover{border-color:#e57373;color:#e57373}

/* ── Provider Selection Modal ── */
.provider-modal{display:none;position:fixed;inset:0;z-index:100}
.provider-modal.show{display:flex;align-items:center;justify-content:center}
.provider-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.provider-modal-content{position:relative;z-index:101;background:var(--bg);border:var(--border);width:90%;max-width:440px;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.provider-modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--surface2);font-family:var(--mono);font-size:0.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.provider-modal-close{background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:0 4px;line-height:1}
.provider-modal-close:hover{color:var(--text)}
.provider-modal-list{display:flex;flex-direction:column}
.provider-modal-item{display:flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--surface2)}
.provider-modal-item:last-child{border-bottom:none}
.provider-modal-item:hover{background:var(--surface2)}
.provider-modal-icon{display:flex;align-items:center;color:var(--accent)}
.provider-modal-icon .ico{width:18px;height:18px}
.provider-modal-name{font-family:var(--font);font-size:0.867rem;color:var(--text)}
.provider-modal-empty{padding:20px 18px;text-align:center;font-family:var(--mono);font-size:0.8rem;color:var(--muted)}

/* ── Sidebar overlay (mobile) ── */
#sidebar-overlay{display:none;position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer}
.btn-primary{
  background:none;border:1px solid var(--accent-hover);color:var(--text);
  cursor:pointer;font-family:var(--font);font-size:0.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:7px 18px;
  transition:background .15s;
}
.btn-primary:hover{background:var(--surface2)}

/* ── System page ── */
.system-card{
  border:var(--border);margin-bottom:12px;background:var(--surface);
}
.system-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--border-color);
  font-size:0.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-family:var(--mono);color:var(--muted);
}
.system-card-body{padding:14px}
.sys-info{font-size:0.8rem;font-family:var(--mono);color:var(--muted);margin-bottom:12px;line-height:1.6}
.btn-danger{
  background:none;border:1px solid var(--danger);color:var(--danger);
  cursor:pointer;font-family:var(--font);font-size:0.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:7px 18px;
  transition:background .15s,color .15s;
}
.btn-danger:hover{background:var(--danger);color:var(--bg)}
.btn-warning{
  background:none;border:1px solid #e0a030;color:#e0a030;
  cursor:pointer;font-family:var(--font);font-size:0.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:7px 18px;
  transition:background .15s,color .15s;
}
.btn-warning:hover{background:#e0a030;color:var(--bg)}
.btn-small{
  background:none;border:1px solid var(--border-color);color:var(--muted);
  cursor:pointer;font-family:var(--mono);font-size:0.733rem;padding:3px 8px;
  letter-spacing:.06em;text-transform:uppercase;transition:color .15s;
}
.btn-small:hover{color:var(--text);border-color:var(--accent-hover)}
.sys-log-output{
  background:var(--code-bg);border:1px solid var(--border-color);
  padding:12px;font-family:var(--mono);font-size:0.733rem;line-height:1.5;
  color:var(--muted);overflow:auto;max-height:60vh;min-height:200px;
  white-space:pre-wrap;word-break:break-all;
}
.system-card-logs{flex:1;display:flex;flex-direction:column}
.system-card-logs .system-card-body{flex:1;display:flex;flex-direction:column}
.system-card-logs .sys-log-output{flex:1}

/* ── Sidebar chat controls (mobile only) ── */
#sidebar-chat-controls{display:none}

/* ── Mobile ── */
#btn-menu{background:none;border:none;color:var(--text);cursor:pointer;display:none;padding:4px;align-items:center}
@media(max-width:600px){
  #sidebar{position:absolute;z-index:10;height:100%;transform:translateX(-100%);transition:transform .2s}
  #sidebar.open{transform:translateX(0)}
  #sidebar.open+#sidebar-overlay{display:block}
  #btn-menu{display:flex}
  .btn-menu-mobile{display:flex}
  /* Move chat controls into sidebar on mobile */
  #sidebar-chat-controls{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-bottom:var(--border)}
  #sidebar-chat-controls #model-selector{position:static;margin:0}
  #sidebar-chat-controls #model-btn{width:100%;justify-content:space-between}
  #sidebar-chat-controls .model-dropdown{position:static;min-width:unset;box-shadow:none;border:var(--border);margin-top:6px}
  #sidebar-chat-controls #chat-fab-bar{position:static;display:flex;gap:6px}
  #sidebar-chat-controls .btn-tool-toggle,#sidebar-chat-controls .btn-export-chat{flex:1;justify-content:center}
  .sess-del{opacity:1!important}
}

/* ── Toast Notifications ── */
#toast-container{
  position:fixed;top:16px;right:16px;z-index:9999;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;max-width:420px;width:calc(100% - 32px);
}
.toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  background:var(--surface);border:1px solid var(--border-color);
  font-family:var(--mono);font-size:0.8rem;line-height:1.5;
  color:var(--text);
  animation:toast-in .25s ease-out;
  transition:opacity .2s,transform .2s;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.toast.removing{opacity:0;transform:translateX(30px)}
.toast-icon{display:inline-flex;align-items:center;flex-shrink:0}
.toast-body{flex:1;min-width:0}
.toast-title{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:0.733rem;margin-bottom:2px}
.toast-msg{color:var(--muted);word-break:break-word}
.toast-close{
  background:none;border:none;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;padding:0 2px;
  flex-shrink:0;transition:color .15s;
}
.toast-close:hover{color:var(--text)}
/* toast variants */
.toast.toast-success{border-color:#4caf50}
.toast.toast-success .toast-icon{color:#4caf50}
.toast.toast-success .toast-title{color:#4caf50}
.toast.toast-error{border-color:var(--danger)}
.toast.toast-error .toast-icon{color:var(--danger)}
.toast.toast-error .toast-title{color:var(--danger)}
.toast.toast-warning{border-color:#f0ad4e}
.toast.toast-warning .toast-icon{color:#f0ad4e}
.toast.toast-warning .toast-title{color:#f0ad4e}
.toast.toast-info{border-color:var(--muted)}
.toast.toast-info .toast-icon{color:var(--muted)}
@keyframes toast-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* ── Model Selector ── */
#model-selector{position:relative;margin-left:auto;margin-right:8px}
#model-btn{
  background:none;border:1px solid var(--border-color);color:var(--muted);
  cursor:pointer;font-family:var(--mono);font-size:0.733rem;padding:4px 10px;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  transition:color .15s,border-color .15s;letter-spacing:.04em;
}
#model-btn:hover{color:var(--text);border-color:var(--accent-hover)}
.model-chevron{display:inline-flex;align-items:center;transition:transform .2s}
.model-chevron .ico{width:10px;height:10px}
.model-dropdown.open .model-chevron{transform:rotate(90deg)}
.model-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:var(--surface);border:var(--border);padding:12px;
  min-width:280px;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.model-dropdown.open{display:block}
.model-current{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.model-current label{font-size:0.733rem;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.model-current select,.model-current input{
  background:var(--surface2);border:1px solid var(--border-color);color:var(--text);
  font-family:var(--mono);font-size:0.8rem;padding:6px 8px;outline:none;width:100%;
  transition:border-color .15s;
}
.model-current select:focus,.model-current input:focus{border-color:var(--accent-hover);border-style:solid}
.model-dropdown .btn-primary{width:100%;font-size:0.733rem;padding:6px 12px}

/* model suggestions list */
.model-suggestions{
  display:none;max-height:0;overflow-y:auto;
  border:1px solid var(--border-color);background:var(--surface2);
  margin-top:4px;transition:max-height .2s;
}
.model-suggestions.show{display:block;max-height:160px}
.model-suggestion-item{
  padding:5px 8px;font-family:var(--mono);font-size:0.733rem;color:var(--text);
  cursor:pointer;transition:background .1s;
}
.model-suggestion-item:hover{background:var(--accent);color:var(--bg)}
.model-suggestions-loading{
  padding:6px 8px;font-family:var(--mono);font-size:0.733rem;color:var(--muted);
  letter-spacing:.06em;
}

/* ── Tools & Skills page ── */
.tools-section{margin-bottom:24px}
.tools-section-title{
  font-size:0.733rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-family:var(--mono);margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid var(--border-color);
}
.tools-grid{display:flex;flex-direction:column;gap:6px}
.tool-card{
  border:1px solid var(--border-color);padding:10px 12px;
  background:var(--surface);transition:border-color .15s,background .15s;
}
.tool-card:hover{border-color:var(--accent-hover);background:var(--surface2)}
.tool-name{
  font-size:0.867rem;font-weight:700;color:var(--text);font-family:var(--mono);
  margin-bottom:3px;
}
.tool-source{
  font-size:0.733rem;font-weight:400;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;
}
.tool-desc{font-size:0.8rem;color:var(--muted);font-family:var(--mono);line-height:1.5}

/* ── Session History page ── */
.history-layout{display:flex;gap:0;padding:0 !important;flex:1;min-height:0}
.history-list{
  width:280px;min-width:240px;max-width:320px;overflow-y:auto;
  border-right:var(--border);padding:8px 0;flex-shrink:0;
}
.history-list::-webkit-scrollbar{width:4px}
.history-list::-webkit-scrollbar-thumb{background:var(--scrollbar)}
.history-detail{flex:1;overflow-y:auto;}
.history-detail::-webkit-scrollbar{width:4px}
.history-detail::-webkit-scrollbar-thumb{background:var(--scrollbar)}
.history-placeholder{
  padding:20px;font-size:0.8rem;color:var(--muted);font-family:var(--mono);
  text-align:center;
}
.history-item{
  padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border-color);
  transition:background .1s;
}
.history-item:hover{background:var(--surface2)}
.history-item.active{background:var(--surface2);border-left:2px solid var(--accent-hover)}
.history-item-header{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px}
.history-channel{
  font-size:0.733rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-family:var(--mono);
  background:var(--surface2);padding:1px 6px;border:1px solid var(--border-color);
}
.history-msgs{font-size:0.733rem;color:var(--muted);font-family:var(--mono)}
.history-item-label{
  font-size:0.8rem;color:var(--text);font-family:var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-item-date{font-size:0.733rem;color:var(--muted);font-family:var(--mono);margin-top:2px}
.history-item{position:relative}
.history-del{position:absolute;bottom:6px;right:6px;background:none;border:1px solid var(--border);color:var(--muted);width:22px;height:22px;font-size:0.933rem;line-height:1;cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.history-item:hover .history-del{opacity:1}
.history-del:hover{color:var(--accent);border-color:var(--accent)}
.history-detail-header{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:var(--border);background:var(--bg);
  position:sticky;top:0;z-index:10;
}
.zap-icon {width: 40px;height: 40px;filter: drop-shadow(0 0 12px rgba(255, 154, 0, .5));}
.history-detail-label{
  font-size:0.867rem;font-weight:700;color:var(--text);font-family:var(--mono);
  flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-messages{display:flex;flex-direction:column;gap:10px;padding: 16px;}
.history-messages .msg{max-width:100%}
/* History refresh overlay */
.history-refresh-overlay{
  position:sticky;width: 100%;height: 100%; top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:20;
}
.history-refresh-spinner{
  font-family:var(--mono);font-size:0.8rem;color:var(--text);
  background:var(--surface2);padding:12px 24px;border-radius:8px;
  border:1px solid var(--border-color);display:flex;align-items:center;gap:8px;
}
.history-refresh-spinner svg{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* History list accordion (mirrors workspace-tree-wrap pattern) */
.history-list-wrap{display:contents}

/* ── Mobile adjustments for history ── */
@media(max-width:600px){
  .history-layout{flex-direction:column}
  .history-list-wrap{display:flex;flex-direction:column;border-bottom:var(--border);overflow:hidden}
  .history-list-wrap .ws-tree-toggle{display:flex;align-items:center;gap:3px}
  .history-list{width:100%;max-width:100%;border-right:none;border-bottom:none;max-height:40vh;transition:max-height .2s ease,padding .2s ease}
  .history-list-wrap.collapsed .history-list{max-height:0;padding:0;overflow:hidden;border-bottom:none}
  .history-list-wrap.collapsed .ws-tree-toggle-icon{transform:rotate(-90deg)}
  .history-detail{min-height:0}
  .history-del{opacity:1!important}
}

/* ── Chat page relative (for floating fab bar) ── */
#page-chat{position:relative}

/* ── Workspace Explorer page ── */
.workspace-layout{display:flex;gap:0;padding:0 !important;flex:1;min-height:0}
.workspace-tree{
  width:320px;min-width:260px;max-width:400px;overflow-y:auto;
  border-right:var(--border);padding:8px 0;flex-shrink:0;
}
.workspace-tree::-webkit-scrollbar{width:4px}
.workspace-tree::-webkit-scrollbar-thumb{background:var(--scrollbar)}
.workspace-viewer{flex:1;overflow-y:auto;padding:12px}
.workspace-viewer::-webkit-scrollbar{width:4px}
.workspace-viewer::-webkit-scrollbar-thumb{background:var(--scrollbar)}
.ws-breadcrumb{
  padding:6px 12px;font-size:0.733rem;font-family:var(--mono);color:var(--muted);
  border-bottom:1px solid var(--border-color);margin-bottom:4px;
}
.ws-bc-item{cursor:pointer;color:var(--accent);transition:color .15s}
.ws-bc-item:hover{color:var(--text)}
.ws-entry{
  display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;
  font-family:var(--mono);font-size:0.8rem;transition:background .1s;
  border-bottom:1px solid transparent;
}
.ws-entry:hover{background:var(--surface2)}
.ws-icon{display:inline-flex;align-items:center;flex-shrink:0;width:18px;justify-content:center}
.ws-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.ws-dir .ws-name{font-weight:700}
.ws-entry-del{flex-shrink:0;opacity:0;background:transparent;border:none;cursor:pointer;color:var(--danger);padding:2px 4px;line-height:1;transition:opacity .15s}
.ws-entry:hover .ws-entry-del{opacity:1}
/* workspace tree action buttons (shown in accordion header on mobile) */
.ws-tree-actions{display:none;margin-left:auto;gap:5px;align-items:center;flex-shrink:0}
.ws-scope-wrap{display:flex;align-items:center;gap:6px;margin-left:12px}
.ws-scope-label{font-family:var(--mono);font-size:0.733rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ws-scope-select{background:var(--surface2);text-transform: capitalize;border:var(--border);color:var(--text);font-family:var(--mono);font-size:0.733rem;padding:3px 6px;outline:none;cursor:pointer;border-radius:2px}
.ws-scope-select:focus{border-color:var(--accent-hover)}
/* ── Password eye toggle ── */
.pw-wrap{position:relative;display:flex;align-items:center;width:100%}
.pw-wrap input{flex:1;min-width:0;padding-right:28px!important}
.pw-eye{position:absolute;right:4px;background:transparent;border:none;cursor:pointer;color:var(--muted);padding:2px 3px;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.pw-eye:hover{color:var(--text)}
/* icon-only button variant */
.icon-btn{padding:4px 6px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.ws-create-row{display:flex;align-items:center;gap:4px;padding:5px 8px;border-bottom:1px solid var(--border-color);background:var(--surface2)}
.ws-create-input{flex:1;background:var(--surface);border:var(--border);color:var(--text);font-family:var(--mono);font-size:0.8rem;padding:3px 6px;outline:none;min-width:0}
.ws-create-input:focus{border-color:var(--accent-hover)}
.ws-create-ok,.ws-create-cancel{flex-shrink:0;padding:2px 6px}
.ws-size{font-size:0.733rem;color:var(--muted);flex-shrink:0}
.ws-file-header{
  display:flex;align-items:center;gap:8px;padding-bottom:8px;flex-wrap:wrap;
  margin-bottom:8px;border-bottom:1px solid var(--border-color);
}
.ws-file-path{font-size:0.8rem;font-weight:700;font-family:var(--mono);color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-file-size{font-size:0.733rem;color:var(--muted);font-family:var(--mono)}
.ws-file-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ws-file-pre{
  background:var(--code-bg);border:1px solid var(--border-color);
  padding:10px 12px;font-family:var(--mono);font-size:0.733rem;line-height:1.5;
  overflow:auto;max-height:calc(100vh - 140px);white-space:pre-wrap;word-break:break-word;
  color:var(--text);
}
/* Zip archive viewer — tree view */
.ws-zip-viewer{padding:8px 0;max-height:calc(100vh - 140px);overflow:auto}
.ws-zip-row{display:flex;align-items:center;gap:0;padding:0 4px;font-family:var(--mono);font-size:0.733rem;color:var(--text);cursor:default;min-height:24px}
.ws-zip-row:hover{background:var(--surface2)}
.ws-zip-dir{color:var(--accent)}
.ws-zip-dir .ws-zip-name{font-weight:700}
.ws-zip-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--muted);margin:0 4px}
.ws-zip-dir .ws-zip-icon{color:var(--accent)}
.ws-zip-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-zip-size{font-size:0.667rem;color:var(--muted);flex-shrink:0;margin-left:6px}
.ws-zip-summary{padding:8px 12px;font-size:0.733rem;color:var(--muted);font-family:var(--mono);border-top:1px solid var(--border-color);margin-top:4px}
/* Tree guide: vertical line for active ancestor levels */
.ws-zip-guide{display:inline-block;width:16px;flex-shrink:0;position:relative;align-self:stretch}
.ws-zip-guide-active::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:1px;background:var(--border-color)}
/* Tree connector: ├── (branch) or └── (last) */
.ws-zip-connector{display:inline-block;width:16px;flex-shrink:0;position:relative;align-self:stretch}
.ws-zip-connector::before{content:'';position:absolute;left:7px;top:0;height:50%;width:1px;background:var(--border-color)}
.ws-zip-connector::after{content:'';position:absolute;left:7px;top:50%;width:9px;height:1px;background:var(--border-color)}
.ws-zip-connector:not(.ws-zip-last)::before{height:100%}
/* Markdown rendered view */
.ws-md-rendered{
  padding:10px 16px;font-size:0.867rem;line-height:1.7;color:var(--text);
  max-height:calc(100vh - 140px);overflow:auto;
}
.ws-md-rendered h1,.ws-md-rendered h2,.ws-md-rendered h3{margin:16px 0 8px;color:var(--text)}
.ws-md-rendered h1{font-size:1.333rem;border-bottom:1px solid var(--border-color);padding-bottom:6px}
.ws-md-rendered h2{font-size:1.067rem}
.ws-md-rendered h3{font-size:0.933rem}
.ws-md-rendered p{margin:6px 0}
.ws-md-rendered ul,.ws-md-rendered ol{margin:6px 0;padding-left:24px}
.ws-md-rendered li{margin:3px 0}
.ws-md-rendered code{background:var(--code-bg);padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:0.8rem}
.ws-md-rendered pre{background:var(--code-bg);border:1px solid var(--border-color);padding:10px 12px;overflow:auto;margin:8px 0;margin-top:0;}
.ws-md-rendered pre code{background:none;padding:0}
.ws-md-rendered blockquote{border-left:3px solid var(--accent);padding-left:12px;margin:8px 0;color:var(--muted)}
.ws-md-rendered a{color:var(--accent)}
.ws-md-rendered hr{border:none;border-top:1px solid var(--border-color);margin:12px 0}
.ws-md-rendered table{border-collapse:collapse;margin:8px 0;width:100%}
.ws-md-rendered th,.ws-md-rendered td{border:1px solid var(--border-color);padding:5px 8px;font-size:0.8rem;text-align:left}
.ws-md-rendered th{background:var(--surface2);font-weight:700}
/* Edit textarea */
.ws-edit-area{
  width:100%;min-height:300px;height:calc(100vh - 180px);resize:vertical;
  background:var(--code-bg);border:1px solid var(--accent);
  padding:10px 12px;font-family:var(--mono);font-size:0.733rem;line-height:1.5;
  color:var(--text);outline:none;box-sizing:border-box;
}
.ws-edit-area:focus{border-color:var(--accent)}
.ws-btn-save{color:var(--accent) !important;border-color:var(--accent) !important}
.ws-btn-cancel{color:var(--muted) !important}
.ws-btn-delete{color:var(--danger) !important;border-color:var(--danger) !important;opacity:.7}
.ws-btn-delete:hover{opacity:1;background:var(--danger);color:var(--bg) !important}

/* ── Login overlay ── */
#login-overlay{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center}
.login-box{text-align:center;max-width:320px;width:90%;font-family:var(--mono)}
.login-logo{margin-bottom:16px}
.login-logo svg{width:48px;height:48px;stroke:var(--muted);stroke-width:1.5}
.login-box h2{font-size:1.067rem;font-weight:400;color:var(--text);margin-bottom:4px;letter-spacing:.08em;text-transform:uppercase}
.login-hint{font-size:0.733rem;color:var(--muted);margin-bottom:20px;display:block}
#login-password{width:100%;background:var(--surface);border:var(--border);color:var(--text);font-family:var(--mono);font-size:0.867rem;padding:10px 12px;outline:none;margin-bottom:10px;text-align:center;letter-spacing:.15em}
#login-password:focus{border-color:var(--accent)}
#login-password::placeholder{letter-spacing:normal;color:var(--muted)}
.login-error{color:var(--danger);font-size:0.733rem;min-height:16px;margin-bottom:8px}
#login-submit{width:100%;padding:10px;font-size:0.8rem;text-transform:uppercase;letter-spacing:.08em}
/* Workspace tree accordion toggle (visible on mobile) */
.ws-tree-toggle{
  display:none;padding:8px 12px;cursor:pointer;
  font-family:var(--mono);font-size:0.733rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  border-bottom:1px solid var(--border-color);user-select:none;
  transition:color .15s;
}
.ws-tree-toggle:hover{color:var(--text)}
.ws-tree-toggle-icon{display:inline-flex;align-items:center;transition:transform .15s}
.workspace-tree-wrap.collapsed .ws-tree-toggle-icon{transform:rotate(-90deg)}
.workspace-tree-wrap{display:contents}
@media(max-width:600px){
  .workspace-layout{flex-direction:column}
  .workspace-tree-wrap{display:flex;flex-direction:column;border-bottom:var(--border);overflow:hidden}
  .ws-tree-toggle{display:flex;align-items: center;gap: 3px;}
  .workspace-tree{width:100%;max-width:100%;border-right:none;max-height:50vh;transition:max-height .2s ease,padding .2s ease}
  .workspace-tree-wrap.collapsed .workspace-tree{max-height:0;padding:0;overflow:hidden;border-bottom:none}
  /* Workspace file header: buttons below heading */
  .ws-file-header{flex-wrap:wrap}
  .ws-file-actions{width:100%;order:3;border-top:1px solid var(--border-color);padding-top:6px;margin-top:2px}
  .ws-file-pre,.ws-md-rendered{margin-top:4px}
  /* Move workspace action buttons into the files accordion on mobile */
  #workspace-new-file,#workspace-new-folder,#workspace-refresh{display:none!important}
  .ws-tree-actions{display:flex}
  /* Delete button always visible on touch screens */
  .ws-entry-del{opacity:1!important}
}

/* ── Cron page ── */

/* ── Agents page (orchestrator mode) ── */
.agents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:10px;align-items:start}
.agent-card{border:var(--border);background:var(--surface);transition:border-color .2s}
.agent-card:hover{border-color:var(--accent)}
.agent-card-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-color)}
.agent-card-icon{display:inline-flex;align-items:center;color:var(--muted);flex-shrink:0}
.agent-card-icon .ico{width:16px;height:16px;opacity:.7}
.agent-card-name{flex:1;font-size:0.933rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.agent-badge{font-size:0.733rem;font-family:var(--mono);padding:3px 10px;border:1px solid var(--border-color);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.agent-badge.local{border-color:var(--accent);color:var(--accent)}
.agent-badge.remote{border-color:#e8a000;color:#e8a000}
.agent-card-body{padding:14px 16px}
.agent-card-id{font-size:0.8rem;font-family:var(--mono);color:var(--muted);margin-bottom:6px;letter-spacing:.04em}
.agent-card-desc{font-size:0.867rem;font-family:var(--mono);color:var(--muted);line-height:1.5;margin-bottom:10px}
.agent-card-model{font-size:0.8rem;font-family:var(--mono);color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:4px}
.agent-card-model .ico{width:14px;height:14px;opacity:.5}
.agent-card-tools{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px}
.agent-tool-tag{display:inline-flex;align-items:center;background:var(--surface2);border:1px solid var(--border-color);padding:3px 10px;font-family:var(--mono);font-size:0.8rem;color:var(--text);letter-spacing:.02em;transition:border-color .15s}
.agent-tool-tag:hover{border-color:var(--accent)}
.agent-tool-tag.all-tools{color:var(--muted);border-style:dashed}
.agent-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:var(--border)}
.agent-btn{font-family:var(--mono);font-size:0.8rem;padding:5px 14px;border:1px solid var(--muted);background:none;color:var(--text);cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:all .15s}
.agent-btn:hover{border-color:var(--accent);color:var(--accent)}
.agent-btn-delete{color:var(--muted)}
.agent-btn-delete:hover{color:#c44;border-color:#c44}
.agent-card.agent-disabled{opacity:.5;filter:grayscale(.5)}
.agent-badge.disabled{border-color:var(--muted);color:var(--muted)}
.agent-badge.builtin{border-color:#8a8;color:#8a8}
.builtin-agents-banner{display:flex;align-items:center;gap:10px;background:rgba(255,200,50,.04);border-bottom:1px solid var(--border-color);padding:8px 16px;font-size:0.8rem;font-family:var(--mono);color:var(--muted);flex-shrink:0}
.builtin-banner-link{color:var(--accent);cursor:pointer;text-decoration:none;white-space:nowrap}
.builtin-banner-link:hover{text-decoration:underline}
.builtin-banner-dismiss{background:none;border:none;color:var(--muted);cursor:pointer;margin-left:auto;font-size:1.067rem;line-height:1;padding:0 4px;flex-shrink:0}
.builtin-banner-dismiss:hover{color:var(--text)}
.agent-toggle-row{display:flex;align-items:center;gap:12px;margin:12px 0 4px}
.agent-toggle-text{font-size:0.8rem;font-family:var(--mono);color:var(--muted);letter-spacing:.02em}
/* Add-agent card */
.agent-card.agent-card-add{border:1px dashed var(--muted);background:transparent;cursor:pointer;min-height:120px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.agent-card.agent-card-add:hover{border-color:var(--accent);background:rgba(255,255,255,.02)}
.agent-card-add-inner{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);transition:color .2s}
.agent-card.agent-card-add:hover .agent-card-add-inner{color:var(--accent)}
.agent-add-icon{font-size:2.133rem;font-weight:300;line-height:1}
.agent-add-text{font-family:var(--mono);font-size:0.8rem;letter-spacing:.05em;text-transform:uppercase}
/* Form */
.agent-form{border:var(--border);padding:20px;margin-top:16px;background:var(--surface)}
.agent-form h3{font-family:var(--mono);font-size:0.8rem;font-weight:700;margin-bottom:14px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.agent-form label{display:block;font-family:var(--mono);font-size:0.733rem;color:var(--muted);margin:10px 0 4px;text-transform:uppercase;letter-spacing:.06em}
.agent-form label:first-of-type{margin-top:0}
.agent-form input,.agent-form textarea,.agent-form select{width:100%;box-sizing:border-box;background:var(--bg);border:var(--border);color:var(--text);font-family:var(--mono);font-size:0.8rem;padding:6px 10px;outline:none;transition:border-color .15s;cursor:pointer}
.agent-form input:focus,.agent-form textarea:focus,.agent-form select:focus{border-color:var(--accent-hover)}
.agent-form-actions{display:flex;gap:10px;margin-top:14px}
/* Suggestion picker (model + tools) */
.agent-suggest-wrap{position:relative;background:var(--bg);border:var(--border);padding:4px 6px;transition:border-color .15s}
.agent-suggest-wrap:focus-within{border-color:var(--accent-hover)}
.agent-suggest-wrap input{border:none!important;padding:4px 4px!important;background:transparent!important;width:100%}
.agent-suggest-wrap input:focus{border:none!important}
.agent-suggest-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:2px}
.agent-suggest-tags:empty{display:none;margin:0}
.agent-suggest-tag{display:inline-flex;align-items:center;gap:3px;background:var(--surface2);border:1px solid var(--border-color);padding:2px 4px 2px 8px;font-family:var(--mono);font-size:0.733rem;color:var(--text);transition:border-color .15s}
.agent-suggest-tag:hover{border-color:var(--accent)}
.agent-suggest-tag-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.933rem;padding:0 2px;line-height:1;transition:color .15s}
.agent-suggest-tag-remove:hover{color:var(--danger)}
.agent-suggest-dropdown{display:none;position:absolute;left:-1px;right:-1px;top:calc(100% + 2px);background:var(--bg);border:var(--border);max-height:200px;overflow-y:auto;z-index:20;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.agent-suggest-dropdown.show{display:block}
.agent-suggest-dropdown::-webkit-scrollbar{width:4px}
.agent-suggest-dropdown::-webkit-scrollbar-thumb{background:var(--scrollbar)}
.agent-suggest-item{padding:6px 10px;font-family:var(--mono);font-size:0.8rem;cursor:pointer;color:var(--text);transition:background .1s;display:flex;align-items:center;gap:8px}
.agent-suggest-item:hover,.agent-suggest-item.highlighted{background:var(--surface2);color:var(--accent-hover)}
.agent-suggest-item-provider{font-size:0.733rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
.agent-suggest-hint{padding:8px 10px;font-family:var(--mono);font-size:0.733rem;color:var(--muted);font-style:italic}
.agent-suggest-hint-link{color:var(--accent);text-decoration:none;font-style:normal}
.agent-suggest-hint-link:hover{text-decoration:underline}
.agent-form-hint{font-size:0.733rem;color:var(--muted);font-family:var(--mono);margin-top:3px;opacity:.7}

/* ── Browser live view page ── */
.browser-body{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:0}
.browser-viewport-wrap{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0}
.browser-vnc-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.browser-vnc-container canvas{max-width:100%;max-height:100%;object-fit:contain}
.browser-stream{max-width:100%;max-height:100%;object-fit:contain;display:block;cursor:crosshair;user-select:none;-webkit-user-select:none}
.browser-no-signal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-family:var(--mono);font-size:0.867rem;text-align:center;padding:40px}
.browser-no-signal .ico-xl{width:48px;height:48px;opacity:.3}
.browser-hint{font-size:0.733rem;color:var(--muted);opacity:.6;max-width:320px;line-height:1.5}
.browser-url-label{font-size:0.733rem;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.browser-status-badge{font-size:0.733rem;font-family:var(--mono);padding:2px 7px;border-radius:3px;border:1px solid var(--border);color:var(--muted);text-transform:lowercase}
.badge-live{border-color:#4a4;color:#4a4}
.badge-warn{border-color:#e8a000;color:#e8a000;animation:blink-badge .8s infinite}
@keyframes blink-badge{0%,100%{opacity:1}50%{opacity:.4}}
.browser-control-panel{padding:14px 18px;border-top:1px solid var(--border);background:var(--sidebar-bg);display:flex;flex-direction:column;gap:8px}
.browser-control-header{display:flex;align-items:center;gap:10px;color:#e8a000;font-weight:bold;font-family:var(--mono);font-size:1rem}
.browser-control-timer{margin-left:auto;font-family:var(--mono);font-size:1.25rem;font-weight:700;color:#e8a000;background:rgba(232,160,0,0.12);border:2px solid rgba(232,160,0,0.4);border-radius:6px;padding:4px 12px;white-space:nowrap;letter-spacing:0.05em;min-width:60px;text-align:center}
.browser-control-timer.timer-urgent{color:#e84040;background:rgba(232,64,64,0.15);border-color:#e84040;animation:timerPulse 1s ease-in-out infinite;font-size:1.35rem}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:0.5}}
.browser-control-reason{color:var(--text);font-family:var(--mono);font-size:0.8rem;line-height:1.5;margin:0}
.browser-control-hint{color:var(--muted);font-size:0.733rem;line-height:1.5}
.browser-done-btn{align-self:flex-start;margin-top:4px}
/* ── User Take Control button ── */
.btn-user-takeover{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:0.75rem;font-family:var(--mono);border:1px solid var(--border);border-radius:5px;background:var(--sidebar-bg);color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;margin-left:auto}
.btn-user-takeover:hover{background:var(--hover-bg);color:var(--text)}
.btn-user-takeover.active{background:rgba(232,160,0,0.12);color:#e8a000;border-color:#e8a000}
.btn-user-takeover .ico-sm{width:13px;height:13px;flex-shrink:0}

/* ── VNC Live View button + expiry dropdown ── */
.vnc-live-view-wrap{display:inline-flex;align-items:center;gap:4px;margin-left:4px}
.vnc-start-group{position:relative;display:inline-flex;align-items:center}
.btn-vnc-start{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:0.75rem;font-family:var(--mono);border:1px solid var(--border);border-radius:5px;background:var(--sidebar-bg);color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn-vnc-start:hover{background:var(--hover-bg);color:var(--text);border-color:var(--accent)}
.vnc-expiry-menu{position:absolute;top:calc(100% + 5px);right:0;background:var(--sidebar-bg);border:1px solid var(--border);border-radius:6px;padding:4px;display:flex;flex-direction:column;gap:2px;z-index:200;min-width:6.5rem;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.vnc-expiry-opt{padding:6px 11px;font-family:var(--mono);font-size:0.75rem;color:var(--text);background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left;white-space:nowrap}
.vnc-expiry-opt:hover{background:var(--hover-bg);color:var(--accent)}
.vnc-active-group{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid rgba(94,220,100,.5);border-radius:5px;background:rgba(94,220,100,.07)}
.vnc-countdown{font-family:var(--mono);font-size:0.75rem;color:#5edc64;min-width:34px}
.btn-vnc-stop{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-family:var(--mono);font-size:0.73rem;color:#e84040;border:1px solid rgba(232,64,64,.45);border-radius:4px;background:transparent;cursor:pointer;transition:background .15s}
.btn-vnc-stop:hover{background:rgba(232,64,64,.12);border-color:#e84040}
.btn-vnc-stop .ico-sm,.btn-vnc-start .ico-sm{width:13px;height:13px;flex-shrink:0}

/* ── Browser takeover split-screen (sidebar | browser | chat) ── */
.browser-takeover-panel{display:none;flex-direction:column;border-right:1px solid var(--border);background:var(--bg);overflow:hidden;width:0;min-width:0;transition:width .3s ease,min-width .3s ease}
#app.takeover-active .browser-takeover-panel{display:flex;width:50%;min-width:360px;max-width:60%}
#app.takeover-active #page-chat{flex:1;min-width:280px}
.browser-takeover-header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:0.8rem}
.browser-takeover-icon{color:var(--accent)}
.browser-takeover-title{font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.browser-takeover-url{flex:1;color:var(--muted);font-size:0.733rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.browser-takeover-viewport{flex:1;position:relative;overflow:hidden;background:#0a0a0a;display:flex;align-items:center;justify-content:center;min-height:0}
.browser-takeover-viewport .browser-vnc-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.browser-takeover-viewport canvas{max-width:100%;max-height:100%;object-fit:contain}
.browser-takeover-viewport .browser-stream{max-width:100%;max-height:100%;object-fit:contain;cursor:crosshair;user-select:none;-webkit-user-select:none}
.browser-takeover-control{padding:12px 16px;border-top:1px solid var(--border);background:var(--sidebar-bg);display:flex;flex-direction:column;gap:6px}

/* ── Floating draggable browser preview ── */
#browser-live-preview{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);width:420px;min-width:280px;min-height:200px;max-width:calc(100vw - 16px);z-index:1000;border-radius:10px;border:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.2);background:var(--bg);overflow:visible;transition:box-shadow .15s ease;display:flex;flex-direction:column}
#browser-live-preview:hover{box-shadow:0 12px 40px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.25)}
#browser-live-preview.blp-dragged{transform:none;transition:none}
/* Resize handles — invisible hit areas on edges & corners */
.blp-rz{position:absolute;z-index:10}
.blp-rz-n{top:-4px;left:8px;right:8px;height:8px;cursor:n-resize}
.blp-rz-s{bottom:-4px;left:8px;right:8px;height:8px;cursor:s-resize}
.blp-rz-e{right:-4px;top:8px;bottom:8px;width:8px;cursor:e-resize}
.blp-rz-w{left:-4px;top:8px;bottom:8px;width:8px;cursor:w-resize}
.blp-rz-ne{top:-4px;right:-4px;width:12px;height:12px;cursor:ne-resize}
.blp-rz-nw{top:-4px;left:-4px;width:12px;height:12px;cursor:nw-resize}
.blp-rz-se{bottom:-4px;right:-4px;width:12px;height:12px;cursor:se-resize}
.blp-rz-sw{bottom:-4px;left:-4px;width:12px;height:12px;cursor:sw-resize}
/* Resize grip indicator (bottom-right) */
.blp-resize-grip{position:absolute;bottom:4px;right:4px;width:12px;height:12px;pointer-events:none;opacity:.35}
.blp-resize-grip svg{width:100%;height:100%;color:var(--muted)}
.blp-header{display:flex;align-items:center;gap:6px;padding:6px 10px;font-family:var(--mono);font-size:0.733rem;color:var(--muted);border-bottom:1px solid var(--border);background:var(--sidebar-bg);cursor:grab;user-select:none;-webkit-user-select:none;border-radius:10px 10px 0 0}
.blp-header:active{cursor:grabbing}
.blp-header .ico{width:14px;height:14px;flex-shrink:0}
.blp-temp-badge{font-size:0.733rem;font-family:var(--mono);padding:2px 6px;border-radius:3px;background:var(--accent);color:var(--bg);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-left:auto;white-space:nowrap}
.blp-close{background:none;border:none;color:var(--muted);font-size:1.067rem;cursor:pointer;padding:0 4px;margin-left:6px;line-height:1;flex-shrink:0}
.blp-close:hover{color:var(--text)}
.blp-viewport{position:relative;width:100%;flex:1 1 auto;min-height:120px;background:#0a0a0a;overflow:hidden;border-radius:0 0 10px 10px}
.blp-viewport canvas{width:100%;height:100%;object-fit:contain}
.blp-viewport img{width:100%;height:100%;object-fit:contain}
.blp-viewport .browser-vnc-container{width:100%;height:100%}
.blp-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:6px;z-index:2;background:#0a0a0a}
.blp-loading .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.2s infinite both}
.blp-loading .dot:nth-child(2){animation-delay:.2s}
.blp-loading .dot:nth-child(3){animation-delay:.4s}
@media(max-width:480px){#browser-live-preview{width:calc(100vw - 16px);bottom:70px}}

/* ── Mobile: hide takeover panel ── */
@media(max-width:768px){
  #app.takeover-active .browser-takeover-panel{display:none !important}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* No LLM Provider Warning                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */
#no-provider-warning{
  display:flex;align-items:center;justify-content:center;
  flex:1;padding:32px;
}
.no-provider-box{
  text-align:center;max-width:440px;
  border:2px solid var(--danger);padding:40px 32px;
  background:var(--surface);
}
.no-provider-icon{color:var(--danger);margin-bottom:16px}
.no-provider-icon .ico{width:48px;height:48px;stroke-width:1.5}
.no-provider-box h2{font-size:1.2rem;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;color:var(--danger)}
.no-provider-box p{font-size:0.867rem;color:var(--muted);margin-bottom:8px;line-height:1.6}
.no-provider-hint{font-size:0.8rem !important;opacity:.7}
.no-provider-btn{
  margin-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-size:0.867rem;padding:10px 24px;text-transform:uppercase;letter-spacing:.06em;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Provider Configured — Start Chatting banner                               */
/* ═══════════════════════════════════════════════════════════════════════════ */
#provider-ready-banner{
  display:flex;align-items:center;justify-content:center;
  flex:1;padding:32px;
}
.provider-ready-box{
  text-align:center;max-width:440px;
  border:2px solid #4caf50;padding:40px 32px;
  background:var(--surface);
}
.provider-ready-icon{color:#4caf50;margin-bottom:16px}
.provider-ready-icon .ico{width:48px;height:48px;stroke-width:1.5}
.provider-ready-box h2{font-size:1.2rem;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;color:#4caf50}
.provider-ready-box p{font-size:0.867rem;color:var(--muted);margin-bottom:8px;line-height:1.6}
.provider-ready-btn{
  margin-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-size:0.867rem;padding:10px 24px;text-transform:uppercase;letter-spacing:.06em;
  border-color:#4caf50;
}
.provider-ready-btn:hover{background:#4caf50;color:var(--bg)}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* UI Clarity — thick/thin border hierarchy                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Major structural borders: solid + thicker for clear separation */
#sidebar{border-right:2px solid var(--border-color)}
#chat-header,
.page-header{border-bottom:2px solid var(--border-color)}
#input-bar{border-top:2px solid var(--border-color)}
.sidebar-nav{border-bottom:2px solid var(--border-color)}
#sidebar-header{border-bottom:2px solid var(--border-color)}

/* Wizard tabs — solid separator */
.wizard-tabs{border-bottom:2px solid var(--border-color)}

/* System cards — solid border */
.system-card{border:2px solid var(--border-color)}
.system-card-header{border-bottom:2px solid var(--border-color)}

/* Connection cards — solid border for configured, dashed for unconfigured */
.conn-card.configured{border:2px solid var(--border-color)}

/* Settings footer — solid top */
.cfg-footer{border-top:2px solid var(--border-color)}
.conn-footer{border-top:2px solid var(--border-color)}

/* Page body areas */
.workspace-tree-wrap{border-right:2px solid var(--border-color)}
.history-list{border-right:2px solid var(--border-color)}
/* ── Tabs ── */
.tab-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.tab-btn:hover {
  color: var(--text);
}
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* ── Cron Jobs Redesign ── */
.cron-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
}
.cron-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.cron-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.cron-disabled {
  opacity: 0.6;
  filter: grayscale(0.5);
}
.cron-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}
.cron-name {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font);
}
.cron-id {
  color: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
  background: var(--surface2);
  padding: 2px 6px;
  border-radius: 4px;
}
.cron-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cron-message {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  background: var(--code-bg);
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}
.cron-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cron-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.cron-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--surface2);
  color: var(--muted);
}
.cron-status-ok {
  background: rgba(68, 170, 68, 0.1);
  color: #4a4;
}
.cron-status-err {
  background: rgba(204, 68, 68, 0.1);
  color: #c44;
}
.cron-error {
  color: #c44;
  font-size: 12px;
  background: rgba(204, 68, 68, 0.05);
  border: 1px solid rgba(204, 68, 68, 0.2);
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cron-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.cron-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border-color);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}
.cron-btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.cron-btn-delete:hover {
  background: #c44;
  color: #fff;
  border-color: #c44;
}

/* ── Modals ── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  overflow: hidden;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.btn-close-modal {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-close-modal:hover {
  background: var(--surface2);
  color: var(--text);
}
.modal-body {
  padding: 20px;
}

/* ── Custom Dialog (replaces native confirm/alert) ── */
.dlg-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.dlg-box{background:var(--surface);border:1px solid var(--border-color);min-width:280px;max-width:460px;width:100%;font-family:var(--mono)}
.dlg-head{padding:14px 16px 10px;border-bottom:1px solid var(--border-color)}
.dlg-title{font-size:0.867rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.08em}
.dlg-body{padding:14px 16px}
.dlg-msg{font-size:0.867rem;color:var(--text);margin:0 0 8px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.dlg-body > .dlg-msg:only-child{margin-bottom:0}
.dlg-items{border:1px solid var(--border-color);overflow:hidden;max-height:180px;overflow-y:auto;margin-top:8px}
.dlg-item{font-size:0.8rem;color:var(--muted);padding:5px 8px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border-color)}
.dlg-item:last-child{border-bottom:none}
.dlg-item-more{font-style:italic;opacity:.7;justify-content:center}
.dlg-footer{padding:10px 16px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--border-color)}
.dlg-btn{font-family:var(--mono);font-size:0.8rem;padding:6px 16px;border:1px solid var(--border-color);cursor:pointer;background:transparent;color:var(--text);letter-spacing:.04em;transition:background .15s,color .15s,border-color .15s;outline:none}
.dlg-btn:hover{border-color:var(--accent)}
.dlg-btn-cancel{color:var(--muted)}
.dlg-btn-cancel:hover{border-color:var(--muted)}
.dlg-btn-type-danger{color:var(--danger);border-color:var(--danger)}
.dlg-btn-type-danger:hover{background:var(--danger);color:#fff}
.dlg-btn-type-info,.dlg-btn-type-confirm{color:var(--accent);border-color:var(--accent)}
.dlg-btn-type-info:hover,.dlg-btn-type-confirm:hover{background:var(--accent);color:var(--bg)}
.dlg-btn-type-alert{color:var(--text);border-color:var(--border-color)}
.dlg-btn-type-alert:hover{border-color:var(--accent)}