/*
 * shell.css — App shell layout: textures, sidebar, main area, drawer,
 * ticker, banner, shared components (cards, buttons, chips, toasts).
 * Depends on tokens.css for CSS custom properties.
 */

/* ── Textures ── */
.noise { position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dot-grid { position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px; }

/* ── App shell ── */
#app { position:relative;z-index:1;display:flex;flex-direction:row;height:100vh; }

/* ── Sidebar ── */
#sidebar { flex-shrink:0;width:var(--sidebar-w);height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--border);background:rgba(0,0,0,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:10;overflow:hidden; }
.sidebar-brand { display:flex;align-items:center;gap:10px;padding:16px 14px 14px;flex-shrink:0;border-bottom:1px solid var(--border); }
.brand-mark { width:13px;height:13px;border:1.5px solid var(--accent);transform:rotate(45deg);box-shadow:0 0 10px var(--accent-glow);flex-shrink:0; }
.brand-name { font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--text-main); }
.sidebar-workspace { padding:8px 14px 12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:2px;flex-shrink:0;min-height:44px; }
.sidebar-workspace .ws-repo { font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--text-main);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sidebar-workspace .ws-branch { font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sidebar-workspace .ws-branch::before { content:'⎇ ';opacity:.6; }
#tab-nav { flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0; }
.nav-group { padding:0; }
.nav-group+.nav-group { border-top:1px solid var(--border);margin-top:4px;padding-top:4px; }
.nav-group-label { font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);padding:8px 14px 3px; }
.nav-item { display:flex;align-items:center;width:100%;padding:6px 14px;font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.04em;text-align:left;color:var(--text-dim);border:none;border-radius:0;background:none;position:relative;transition:color .15s,background .15s;text-decoration:none;cursor:pointer; }
.nav-item:hover { color:var(--text-muted);background:rgba(255,255,255,.04); }
.nav-item.active { color:var(--accent);background:rgba(0,255,136,.07); }
.nav-item.active::before { content:'';position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--accent);border-radius:0 1px 1px 0; }
/* ── Command bar ── */
.cmd-bar-wrap { display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0; }
.cmd-input { flex:1;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:4px 8px;font-family:var(--font-mono);font-size:.78rem;color:var(--text-main);outline:none;min-width:0; }
.cmd-input:focus { border-color:rgba(0,255,136,.3); }
.cmd-input::placeholder { color:var(--text-dim); }

/* ── Runtime badges ── */
#runtime-badges { display:flex;flex-wrap:wrap;gap:4px; }

.sidebar-foot { flex-shrink:0;padding:10px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px; }
.sse-pill { display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim);border:1px solid var(--border);border-radius:20px;padding:3px 9px; }
.sse-pill .dot { width:6px;height:6px;border-radius:50%;background:var(--text-dim); }
.sse-pill.ok .dot { background:var(--accent);box-shadow:0 0 5px rgba(0,255,136,.6); }
.sse-pill.ok { color:var(--text-muted);border-color:rgba(0,255,136,.2); }
.sse-pill.err .dot { background:var(--warning); }
.version-badge { font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius);padding:2px 7px;align-self:flex-start; }
.chat-toggle-btn { display:flex;align-items:center;gap:5px;width:100%;background:none;border:1px solid var(--border);border-radius:var(--radius);padding:4px 9px;font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim);cursor:pointer;transition:color .15s,border-color .15s; }
.chat-toggle-btn:hover { color:var(--accent);border-color:rgba(0,255,136,.3); }

/* ── Main area ── */
#main-area { flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden; }
#content { flex:1;min-height:0;overflow-y:auto;overflow-x:hidden; }
.view-panel { display:none;padding:20px 24px;max-width:1440px;margin:0 auto; }
.view-panel.active { display:block; }

/* ── Context bar ── */
#context-bar { display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 24px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.5);flex-shrink:0;font-family:var(--font-mono);font-size:.78rem; }
.ctx-label { color:var(--text-dim);letter-spacing:.06em; }
.ctx-select { background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:3px 8px;color:var(--text-muted);font-family:var(--font-mono);font-size:.78rem;outline:none;cursor:pointer;transition:border-color .15s; }
.ctx-select:focus { border-color:rgba(0,255,136,.3); }
.ctx-sep { color:var(--border);padding:0 2px; }
.ctx-quick { margin-left:auto;display:flex;gap:6px; }

/* ── Ticker ── */
#ticker { flex-shrink:0;height:var(--ticker-h);display:flex;align-items:center;border-top:1px solid var(--border);background:rgba(0,0,0,.7);overflow:hidden; }
.ticker-label { flex-shrink:0;font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:0 12px;border-right:1px solid var(--border);height:100%;display:flex;align-items:center; }
.ticker-scroll { flex:1;overflow:hidden;position:relative;height:100%; }
.ticker-track { display:flex;align-items:center;gap:36px;height:100%;white-space:nowrap;animation:ticker 60s linear infinite; }
.ticker-track:hover { animation-play-state:paused; }
.ticker-item { display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim); }
.t-dot { width:4px;height:4px;border-radius:50%;flex-shrink:0; }
.cat-memory .t-dot  { background:var(--secondary); }
.cat-tokens .t-dot  { background:var(--accent); }
.cat-runtime .t-dot { background:var(--amber); }
.cat-pod .t-dot     { background:var(--violet); }
.cat-shield .t-dot  { background:var(--warning); }
.cat-mcp .t-dot, .cat-system .t-dot { background:var(--text-dim); }
.cat-clients .t-dot { background:var(--text-muted); }

/* ── Drawer ── */
#drawer-overlay { position:fixed;inset:0;z-index:90;background:oklch(0% 0 0/.55);opacity:0;pointer-events:none;transition:opacity .22s var(--ease); }
#drawer-overlay.visible { opacity:1;pointer-events:auto; }
#drawer { position:fixed;top:0;right:calc(var(--drawer-w)*-1.1);bottom:0;width:var(--drawer-w);z-index:95;background:var(--surface-1);border-left:1px solid var(--border);display:flex;flex-direction:column;transition:right .26s var(--ease); }
#drawer.open { right:0; }
.drawer-hd { display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);flex-shrink:0;min-height:48px; }
.drawer-title { font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.drawer-close { min-height:32px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;flex-shrink:0;transition:color .15s,border-color .15s; }
.drawer-close:hover { color:var(--text-primary);border-color:var(--text-muted); }
.drawer-body { flex:1;overflow-y:auto;padding:var(--space-4); }
.dsec { margin-bottom:var(--space-6); }
.dsec-title { font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px; }
.drow { display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-1) 0;border-bottom:1px solid var(--border);font-size:var(--text-sm); }
.drow:last-child { border-bottom:none; }
.drow-k { color:var(--text-muted);flex-shrink:0;padding-right:var(--space-3); }
.drow-v { font-family:var(--font-mono);color:var(--text-primary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%; }
.dcontent { font-size:var(--text-sm);color:var(--text-muted);line-height:1.6;padding:9px 11px;border-radius:var(--radius);background:var(--bg-panel);border:1px solid var(--border); }
.dtags { display:flex;flex-wrap:wrap;gap:4px; }

/* ── Banner ── */
#banner { display:none;margin:14px 24px 0;padding:9px 13px;border-radius:var(--radius);font-size:.78rem;border:1px solid var(--border); }
#banner.warn { background:rgba(255,209,77,.07);border-color:rgba(255,209,77,.3);color:var(--amber); }
#banner.err  { background:rgba(255,95,87,.07);border-color:rgba(255,95,87,.3);color:var(--warning); }
#banner.info { background:rgba(0,255,136,.05);border-color:rgba(0,255,136,.2);color:var(--accent); }

/* ── Shared components ── */
.card { background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s; }
.card:hover { border-color:rgba(255,255,255,.1); }
.shd { display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px; }
.shd::after { content:'';flex:1;height:1px;background:var(--border); }
.chip { display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;border-radius:3px;border:1px solid var(--border);background:var(--bg-panel);color:var(--text-muted); }
.chip.good  { border-color:rgba(0,255,136,.3); background:rgba(0,255,136,.07); color:var(--accent); }
.chip.warn  { border-color:rgba(255,209,77,.3);background:rgba(255,209,77,.07);color:var(--amber); }
.chip.bad   { border-color:rgba(255,95,87,.3); background:rgba(255,95,87,.07); color:var(--warning); }
.chip.info  { border-color:rgba(0,212,255,.3); background:rgba(0,212,255,.07); color:var(--secondary); }
.chip.violet{ border-color:rgba(176,92,255,.3);background:rgba(176,92,255,.07);color:var(--violet); }
.metric-val { font-family:var(--font-mono);font-size:1.9rem;font-weight:var(--weight-semibold);letter-spacing:-.04em;color:var(--text-primary);line-height:1; }
.metric-val sup { font-size:.9rem;color:var(--text-muted);vertical-align:super; }
.metric-lbl { font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-regular);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-top:var(--space-1); }
.sparkline { display:block;margin-top:var(--space-2);opacity:.7; }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:var(--radius);border:1px solid var(--border);transition:all .15s; }
.btn-primary { background:var(--accent);color:#000;border-color:var(--accent); }
.btn-primary:hover { background:#00e07b; }
.btn-ghost { color:var(--text-muted); }
.btn-ghost:hover { border-color:rgba(255,255,255,.2);color:var(--text); }
.btn-ok    { border-color:rgba(0,255,136,.3);color:var(--accent); }
.btn-ok:hover { background:rgba(0,255,136,.1); }
.btn-danger { border-color:rgba(255,95,87,.3);color:var(--warning); }
.btn-danger:hover { background:rgba(255,95,87,.1); }
.btn-sm { font-size:.78rem;padding:3px 8px; }
.empty { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:6px; }
.empty-icon  { font-size:1.4rem;opacity:.25; }
.empty-title { font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-dim); }
.empty-sub   { font-size:var(--text-sm);color:var(--text-dim);max-width:220px;line-height:1.5; }
.empty-cta { margin-top:var(--space-3);padding:var(--space-1) var(--space-3);min-height:32px;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--accent);border:1px solid oklch(87% 0.19 152/.35);border-radius:var(--radius);background:oklch(87% 0.19 152/.07);cursor:pointer;transition:background .15s,border-color .15s; }
.empty-cta:hover { background:oklch(87% 0.19 152/.14);border-color:oklch(87% 0.19 152/.6); }
.row { display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:.78rem; }
.row:last-child { border-bottom:none; }
.row-k { color:var(--text-muted); }
.row-v { font-family:var(--font-mono);color:var(--text-main); }
.sub-tabs { display:flex;gap:2px;margin-bottom:14px;flex-wrap:wrap; }
.sub-tab { padding:4px 12px;font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);border:1px solid transparent;border-radius:var(--radius);transition:all .15s;cursor:pointer;background:none; }
.sub-tab:hover { color:var(--text-muted); }
.sub-tab.active { color:var(--accent);border-color:rgba(0,255,136,.25);background:rgba(0,255,136,.06); }
.sub-panel { display:none; }
.sub-panel.active { display:block; }
.pbar-wrap { margin-bottom:10px; }
.pbar-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:4px; }
.pbar-label { font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted); }
.pbar-value { font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim); }
.pbar-track { height:4px;background:var(--border);border-radius:2px;overflow:hidden; }
.pbar-fill  { height:100%;border-radius:2px;transition:width .6s var(--ease); }
.pbar-fill.ok   { background:var(--accent); }
.pbar-fill.warn { background:var(--amber); }
.pbar-fill.bad  { background:var(--warning); }

/* ── Toasts ── */
#toast-stack { position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none; }
.toast { background:var(--bg-elevated);border:1px solid var(--border);border-left:3px solid var(--text-muted);border-radius:var(--radius);padding:10px 14px;font-size:.78rem;color:var(--text-main);max-width:360px;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:fadeUp .2s var(--ease) forwards;pointer-events:auto; }
.toast-good { border-left-color:var(--accent); }
.toast-bad  { border-left-color:var(--warning); }
.toast-info { border-left-color:var(--secondary); }

/* ── Chat float ── */
.chat-float { position:fixed;bottom:20px;right:20px;width:320px;display:flex;flex-direction:column;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.6);z-index:200;transition:opacity .15s,transform .15s; }
.chat-float.hidden { opacity:0;pointer-events:none;transform:translateY(10px); }
.chat-float-hd { display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-panel);border-radius:var(--radius) var(--radius) 0 0;flex-shrink:0; }
.chat-float-title { font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase; }
.chat-close-btn { background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;padding:0 2px;line-height:1; }
.chat-close-btn:hover { color:var(--text-main); }
.chat-messages { flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;max-height:260px;min-height:80px; }
.chat-msg { font-size:.78rem;line-height:1.5;padding:6px 9px;border-radius:var(--radius);max-width:88%;word-break:break-word; }
.chat-msg.user  { background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.18);color:var(--accent);align-self:flex-end; }
.chat-msg.agent { background:var(--bg-panel);border:1px solid var(--border);color:var(--text-main);align-self:flex-start; }
.chat-input-row { display:flex;gap:6px;padding:8px;border-top:1px solid var(--border);flex-shrink:0; }
.chat-input { flex:1;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:5px 8px;font-size:.78rem;color:var(--text-main);resize:none;outline:none;min-height:36px;font-family:var(--font-mono); }
.chat-input:focus { border-color:rgba(0,255,136,.3); }
