/* Aether — Theme System */
[data-theme="dark"] {
  --bg: #0f1117; --bg2: #171b24; --surface: #1e2330; --card: #252b3b;
  --border: #2d3348; --border2: #383f56;
  --accent: #5b8def; --accent2: #4a7adc; --accent-bg: rgba(91,141,239,0.1);
  --green: #4ade80; --red: #f87171; --yellow: #fbbf24; --purple: #a78bfa; --orange: #fb923c;
  --text: #e4e8f1; --text2: #8990a5; --text3: #5c6378;
}
[data-theme="light"] {
  --bg: #f5f6f8; --bg2: #ffffff; --surface: #f0f1f5; --card: #e8eaf0;
  --border: #d4d8e0; --border2: #c4c8d2;
  --accent: #3b6fd4; --accent2: #2d5db8; --accent-bg: rgba(59,111,212,0.08);
  --green: #16a34a; --red: #dc2626; --yellow: #d97706; --purple: #7c3aed; --orange: #ea580c;
  --text: #1a1d27; --text2: #5c6378; --text3: #8990a5;
}
:root {
  --radius: 10px; --radius-sm: 6px;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sidebar-w: 272px; --chat-max: 720px;
}
*,*::before,*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased;overflow:hidden; }

/* Auth */
.auth-overlay { position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center; }
.auth-card { width:100%;max-width:360px;padding:40px 32px;text-align:center; }
.auth-logo { margin-bottom:16px; }
.auth-title { font-size:28px;font-weight:700;margin:0 0 4px;letter-spacing:-0.5px; }
.auth-subtitle { color:var(--text2);font-size:14px;margin:0 0 28px; }
.auth-form { display:flex;flex-direction:column;gap:12px; }
.auth-form input { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:12px 14px;font-size:15px;font-family:var(--font);outline:none; }
.auth-form input:focus { border-color:var(--accent); }
.auth-error { color:var(--red);font-size:13px;min-height:20px; }

/* Buttons */
.btn-primary { background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:11px 20px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font); }
.btn-primary:hover { background:var(--accent2); }
.btn-secondary { background:var(--surface);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 18px;font-size:14px;cursor:pointer;font-family:var(--font); }
.btn-secondary:hover { color:var(--text); }
.icon-btn { background:none;border:1px solid transparent;color:var(--text2);width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;padding:0; }
.icon-btn:hover { color:var(--text);background:var(--surface); }
.icon-btn svg { width:16px;height:16px; }
.icon-btn-sm { width:28px;height:28px; }
.icon-btn-sm svg { width:14px;height:14px; }

/* App shell */
.app { display:flex;height:100vh;height:100dvh;position:relative; }

/* Sidebar */
.sidebar { width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;z-index:30; }
.sidebar-header { display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--border);flex-shrink:0; }
.sidebar-brand { display:flex;align-items:center;gap:8px; }
.sidebar-title { font-size:15px;font-weight:600; }
.status-dot { width:8px;height:8px;border-radius:50%;background:var(--text3);flex-shrink:0; }
.status-dot.ok { background:var(--green); }
.status-dot.warn { background:var(--yellow); }
.status-dot.error { background:var(--red); }
.status-dot.connecting { background:var(--yellow);animation:pulse 1.5s ease-in-out infinite; }
.sidebar-actions { display:flex;gap:3px; }
.sidebar-new-btn { background:var(--accent) !important;color:#fff !important; }
.sidebar-new-btn:hover { background:var(--accent2) !important; }
.sidebar-sessions { flex:1;overflow-y:auto;padding:8px; }
.sidebar-sessions::-webkit-scrollbar { width:4px; }
.sidebar-sessions::-webkit-scrollbar-thumb { background:var(--text3);border-radius:2px; }
.sidebar-empty { text-align:center;color:var(--text3);font-size:13px;padding:24px 8px; }
.sidebar-footer { padding:8px 14px;border-top:1px solid var(--border); }
.sidebar-logout { background:none;border:none;color:var(--text3);font-size:13px;cursor:pointer;padding:6px 0;display:flex;align-items:center;gap:6px;font-family:var(--font); }
.sidebar-logout:hover { color:var(--text); }
.sidebar-logout svg { width:14px;height:14px; }

/* Session items */
.session-item { display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);cursor:pointer;transition:background .12s;position:relative;margin-bottom:2px;border:1px solid transparent; }
.session-item:hover { background:var(--surface); }
.session-item.active { background:var(--surface);border-color:var(--accent); }
.session-item-avatar { width:34px;height:34px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border); }
.session-item-avatar svg { width:16px;height:16px;color:var(--accent); }
.session-item.active .session-item-avatar { border-color:var(--accent);background:var(--accent-bg); }
.session-item-body { flex:1;min-width:0; }
.session-item-top { display:flex;justify-content:space-between;align-items:baseline;gap:6px; }
.session-item-title { font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1; }
.session-item-time { font-size:10px;color:var(--text3);flex-shrink:0; }
.session-item-subtitle { font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;font-family:var(--mono); }
.session-item-preview { font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px; }
.session-item-status { display:flex;align-items:center;gap:4px;margin-top:3px; }
.session-item-status-dot { width:6px;height:6px;border-radius:50%;background:var(--text3); }
.session-item-status-dot.running { background:var(--green);animation:pulse 1.5s ease-in-out infinite; }
.session-item-delete { position:absolute;top:6px;right:6px;width:20px;height:20px;border:none;background:var(--red);color:#fff;border-radius:4px;font-size:10px;cursor:pointer;display:none;align-items:center;justify-content:center; }
.session-item:hover .session-item-delete { display:flex; }
.session-item-rename { background:none;border:none;color:var(--text);font-size:13px;font-weight:500;padding:0;outline:none;width:100%;font-family:var(--font);cursor:text;border-bottom:1px solid var(--accent); }
.sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25; }
.sidebar-overlay.visible { display:block; }

/* Main */
.main-ui { flex:1;display:flex;flex-direction:column;height:100vh;height:100dvh;min-width:0;position:relative; }
.header { display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--border);gap:8px;flex-shrink:0;flex-wrap:wrap;z-index:10; }
.header-left { display:flex;align-items:center;gap:8px; }
.hamburger-btn { display:none; }
.header-session-title { margin:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px; }
.badge { font-size:10px;padding:2px 8px;border-radius:999px;background:var(--text3);color:var(--bg);font-weight:600;text-transform:uppercase;letter-spacing:.5px; }
.badge.ok { background:var(--green); }
.badge.warn { background:var(--yellow);color:var(--bg); }
.badge.error { background:var(--red); }
.header-right { display:flex;align-items:center;gap:6px; }
.select-pill { background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px;font-size:12px;font-family:var(--font);outline:none;cursor:pointer;max-width:160px; }
.select-pill:focus { border-color:var(--accent); }
.yolo-pill { max-width:120px; }
.mode-tabs { display:flex;gap:2px;background:var(--surface);border-radius:var(--radius);padding:2px; }
.mode-tab { border:none;background:transparent;color:var(--text2);font-size:12px;padding:4px 12px;border-radius:8px;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap; }
.mode-tab:hover { color:var(--text); }
.mode-tab.active { background:var(--accent2);color:#fff; }

/* CWD */
.cwd-bar { display:flex;align-items:center;gap:6px;padding:4px 16px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0; }
.cwd-display { font-size:12px;color:var(--text3);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1; }
.cwd-browse { background:none;border:none;color:var(--text3);cursor:pointer;padding:2px;display:flex; }
.cwd-browse:hover { color:var(--text); }
.cwd-browse svg { width:14px;height:14px; }

/* Settings */
.settings-panel { position:absolute;top:48px;right:8px;width:320px;max-height:60vh;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);z-index:100;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.3); }
.settings-header { display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border); }
.settings-header h3 { margin:0;font-size:14px; }
.settings-body { padding:12px 16px;overflow-y:auto;flex:1; }
.config-item { display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);gap:8px; }
.config-item:last-child { border-bottom:none; }
.config-label { font-size:13px;color:var(--text2);flex:1; }
.config-toggle { position:relative;width:36px;height:20px;border:none;border-radius:10px;background:var(--text3);cursor:pointer;transition:background .2s; }
.config-toggle.on { background:var(--green); }
.config-toggle::after { content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s; }
.config-toggle.on::after { transform:translateX(16px); }
.config-select { background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;font-size:12px;max-width:140px; }

/* Plan */
.plan-panel { background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0; }
.plan-header { display:flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer; }
.plan-body { padding:0 16px 10px; }
.plan-entry { display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:13px;color:var(--text2); }
.plan-icon { flex-shrink:0;width:18px;text-align:center; }
.plan-entry.completed { color:var(--green);text-decoration:line-through;opacity:.7; }
.plan-entry.in_progress { color:var(--accent); }

/* Chat */
.chat { flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:4px;scroll-behavior:smooth; }
.chat-inner { width:100%;max-width:var(--chat-max);margin:0 auto;display:flex;flex-direction:column;gap:4px; }
.session-chat { display:flex;flex-direction:column;gap:4px;flex:1;width:100%;max-width:var(--chat-max);margin:0 auto; }
.msg { max-width:100%;line-height:1.6;word-break:break-word; }
.msg-user { align-self:flex-end;background:var(--accent);color:#fff;padding:10px 14px;border-radius:var(--radius) var(--radius) 4px var(--radius);max-width:85%;font-size:15px;margin-top:10px; }
.msg-agent { padding:6px 0; }
.msg-agent .md-content { font-size:15px;line-height:1.7; }
.msg-agent .md-content p { margin:6px 0; }
.msg-agent .md-content pre { background:var(--surface);padding:12px;border-radius:var(--radius-sm);overflow-x:auto;font-size:13px;font-family:var(--mono);border:1px solid var(--border);margin:8px 0; }
.msg-agent .md-content code { background:var(--surface);padding:2px 6px;border-radius:3px;font-size:13px;font-family:var(--mono); }
.msg-agent .md-content pre code { background:none;padding:0; }
.msg-agent .md-content ul,.msg-agent .md-content ol { padding-left:20px;margin:6px 0; }
.msg-agent .md-content h1,.msg-agent .md-content h2,.msg-agent .md-content h3,.msg-agent .md-content h4 { margin:12px 0 6px;color:var(--text); }
.msg-agent .md-content table { border-collapse:collapse;width:100%;margin:8px 0; }
.msg-agent .md-content th,.msg-agent .md-content td { border:1px solid var(--border);padding:6px 10px;text-align:left;font-size:13px; }
.msg-agent .md-content th { background:var(--surface); }
.msg-agent .md-content blockquote { border-left:3px solid var(--accent);margin:6px 0;padding:2px 14px;color:var(--text2); }
.msg-agent .md-content a { color:var(--accent); }

.msg-thought { border-left:2px solid var(--purple);padding:4px 0 4px 12px;color:var(--text3);font-size:13px;font-style:italic; }
.thought-toggle { background:none;border:none;color:var(--purple);font-size:12px;cursor:pointer;padding:2px 6px;font-family:var(--font);display:flex;align-items:center;gap:4px; }
.thought-toggle svg { width:14px;height:14px; }

/* Tool cards */
.tool-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin:4px 0;font-size:13px; }
.tool-header { display:flex;align-items:center;gap:8px; }
.tool-icon { display:flex;color:var(--text2); }
.tool-icon svg { width:16px;height:16px; }
.tool-title { flex:1;font-weight:500;color:var(--text); }
.tool-badge { font-size:10px;padding:2px 7px;border-radius:999px;font-weight:600;text-transform:uppercase; }
.tool-badge.pending { background:rgba(139,148,158,.15);color:var(--text2); }
.tool-badge.in_progress { background:var(--accent-bg);color:var(--accent); }
.tool-badge.completed { background:rgba(74,222,128,.12);color:var(--green); }
.tool-badge.failed { background:rgba(248,113,113,.12);color:var(--red); }
.tool-content { margin-top:6px;color:var(--text2);font-family:var(--mono);font-size:12px;white-space:pre-wrap;max-height:200px;overflow-y:auto; }
.tool-content-toggle { background:none;border:none;color:var(--accent);font-size:11px;cursor:pointer;padding:4px 0;font-family:var(--font); }
.tool-diff { margin-top:6px;font-family:var(--mono);font-size:12px;background:var(--bg);border-radius:var(--radius-sm);padding:8px;overflow-x:auto; }
.diff-add { color:var(--green); }
.diff-del { color:var(--red); }
.diff-path { color:var(--accent);font-weight:600;margin-bottom:4px; }
.tool-locations { margin-top:4px;display:flex;gap:6px;flex-wrap:wrap; }
.tool-loc { font-size:11px;background:var(--accent-bg);color:var(--accent);padding:2px 7px;border-radius:3px; }

/* Permission */
.permission-overlay { position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px); }
.permission-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;width:100%;max-width:500px;max-height:80vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.4); }
.perm-title { font-size:15px;font-weight:600;margin-bottom:10px; }
.perm-detail { font-size:12px;color:var(--text2);margin-bottom:12px;font-family:var(--mono);background:var(--surface);padding:10px;border-radius:var(--radius-sm);max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all; }
.perm-options { display:flex;flex-direction:column;gap:6px;margin-bottom:12px; }
.perm-btn { border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;background:var(--surface);color:var(--text);font-size:14px;cursor:pointer;text-align:left;font-family:var(--font);transition:all .15s; }
.perm-btn:hover { background:var(--bg);border-color:var(--accent); }
.perm-btn.allow { border-color:var(--green); }
.perm-btn.reject { border-color:var(--red); }
.perm-feedback { display:flex;gap:6px; }
.perm-feedback input { flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:8px;font-size:13px;font-family:var(--font); }
.perm-feedback input:focus { border-color:var(--accent);outline:none; }
.perm-feedback button { background:var(--red);color:#fff;border:none;border-radius:var(--radius-sm);padding:8px 14px;font-size:13px;cursor:pointer; }

/* Command palette */
.command-palette { position:absolute;bottom:80px;left:16px;right:16px;max-width:var(--chat-max);margin:0 auto;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);max-height:240px;overflow-y:auto;z-index:50;box-shadow:0 -4px 16px rgba(0,0,0,.2); }
.cmd-item { padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:13px;border-bottom:1px solid var(--border); }
.cmd-item:last-child { border-bottom:none; }
.cmd-item:hover,.cmd-item.selected { background:var(--surface); }
.cmd-name { color:var(--accent);font-weight:500; }
.cmd-desc { color:var(--text3);font-size:12px;max-width:60%;text-align:right; }

/* Input */
.input-area { padding:10px 16px;padding-bottom:calc(10px + var(--safe-bottom));background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0; }
.input-attachments { display:flex;gap:6px;padding:6px 0;flex-wrap:wrap;max-width:var(--chat-max);margin:0 auto; }
.input-attach-item { position:relative;width:56px;height:56px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border); }
.input-attach-item img { width:100%;height:100%;object-fit:cover; }
.input-attach-remove { position:absolute;top:2px;right:2px;width:18px;height:18px;background:var(--red);color:#fff;border:none;border-radius:50%;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.input-row { display:flex;gap:8px;align-items:flex-end;max-width:var(--chat-max);margin:0 auto; }
.attach-btn svg { width:18px;height:18px; }
.input-area textarea { flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:10px 14px;font-size:15px;font-family:var(--font);resize:none;outline:none;max-height:120px;line-height:1.5; }
.input-area textarea:focus { border-color:var(--accent); }
.send-btn,.cancel-btn { width:42px;height:42px;border:none;border-radius:var(--radius);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.send-btn { background:var(--accent);color:#fff; }
.send-btn:hover { background:var(--accent2); }
.send-btn svg { width:18px;height:18px; }
.cancel-btn { background:var(--red);color:#fff; }
.cancel-btn svg { width:16px;height:16px; }
.input-hint { font-size:11px;color:var(--text3);margin-top:4px;padding:0 4px;max-width:var(--chat-max);margin-left:auto;margin-right:auto; }

/* Status messages */
.msg-status { font-size:12px;color:var(--text3);text-align:center;padding:4px 0; }
.msg-error { font-size:13px;color:var(--red);padding:6px 10px;background:rgba(248,113,113,.08);border-radius:var(--radius-sm); }
.msg-done { font-size:12px;color:var(--green);text-align:center;padding:6px 0;border-top:1px solid var(--border);margin-top:6px; }
.msg-auto-approved { font-size:12px;color:var(--yellow);padding:2px 0;text-align:center;opacity:.8; }

/* Dialogs */
.dialog-overlay { position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px); }
.dialog-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;width:100%;max-width:400px; }
.dialog-card.dialog-wide { max-width:520px; }
.dialog-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; }
.dialog-card h3 { margin:0 0 16px;font-size:16px; }
.dialog-card label { display:block;font-size:12px;color:var(--text2);margin:10px 0 4px; }
.dialog-card input { width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);font-size:14px;font-family:var(--mono);outline:none; }
.dialog-card input:focus { border-color:var(--accent); }
.dialog-actions { display:flex;gap:8px;margin-top:20px;justify-content:flex-end; }

/* File browser */
.file-browser-path { font-family:var(--mono);font-size:12px;color:var(--text2);padding:8px 0;border-bottom:1px solid var(--border);margin-bottom:8px; }
.file-browser-list { max-height:300px;overflow-y:auto; }
.file-item { display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px; }
.file-item:hover { background:var(--surface); }
.file-item.selected { background:var(--accent-bg);border:1px solid var(--accent); }
.file-item svg { width:16px;height:16px;color:var(--text2);flex-shrink:0; }
.file-item-name { flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.file-item-size { font-size:11px;color:var(--text3); }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--text3);border-radius:3px; }

/* Animations */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.thinking { animation:pulse 1.5s ease-in-out infinite; }
@keyframes slideUp { from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1} }
.msg { animation:slideUp .15s ease-out; }

/* Responsive */
@media (max-width:768px) {
  .sidebar { position:fixed;top:0;left:0;bottom:0;transform:translateX(-100%);transition:transform .25s ease;z-index:30;box-shadow:4px 0 16px rgba(0,0,0,.3); }
  .sidebar.open { transform:translateX(0); }
  .hamburger-btn { display:flex; }
  .header-right { flex-wrap:wrap; }
  .select-pill { max-width:110px;font-size:11px; }
  .mode-tab { font-size:11px;padding:3px 8px; }
  .chat { padding:10px; }
  .msg-user { max-width:90%; }
  .settings-panel { width:calc(100% - 16px);right:8px;left:8px; }
  .yolo-pill { max-width:100px; }
}