/* ============================================================================
   AIBT Agentic Console — app shell (layout, sidebar, topbar, primitives)
   Depends on theme.css tokens.
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:640;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent-wash)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--sunken);border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--line)}

/* ---- app grid: sidebar | main | (optional right panel via body class) ---- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}
.app.has-panel{grid-template-columns:248px minmax(0,1fr) 396px}
.app.has-panel.panel-closed{grid-template-columns:248px minmax(0,1fr) 0}
.app.narrow{grid-template-columns:70px minmax(0,1fr)}
.app.narrow.has-panel{grid-template-columns:70px minmax(0,1fr) 396px}

/* ---- sidebar ---- */
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;position:relative}
.side-collapse{position:absolute;top:18px;right:-12px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-3);display:grid;place-items:center;box-shadow:var(--shadow);z-index:20}
.side-collapse:hover{background:var(--sunken);color:var(--ink)}
.side-collapse svg{width:12px;height:12px;transition:transform .2s}
.app.narrow .side-collapse svg{transform:rotate(180deg)}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid var(--line-2)}
.brand .glyph{width:30px;height:30px;border-radius:8px;background:linear-gradient(150deg,var(--accent),var(--sky));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;box-shadow:var(--shadow);flex:none}
.brand b{font-size:var(--fs-md);letter-spacing:-.02em}
.brand span{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:500;letter-spacing:.02em}
.brand .ua{display:inline;font-size:inherit;color:var(--accent-ink);font-weight:inherit}
.app.narrow .brand-text{display:none}
.app.narrow .brand{justify-content:center;padding:16px 0 14px}

.nav{flex:1;overflow-y:auto;padding:10px 10px 20px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-sec{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:640;padding:12px 8px 4px}
.app.narrow .nav-sec{text-align:center;letter-spacing:0;font-size:9px;padding:10px 0 2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-sm);color:var(--ink-2);
  font-size:var(--fs-base);font-weight:500;position:relative;transition:background .12s,color .12s}
.nav-item:hover{background:var(--sunken);color:var(--ink)}
.nav-item .ic{width:18px;height:18px;flex:none;color:var(--ink-3)}
.nav-item.active{background:var(--accent-wash);color:var(--accent-ink);font-weight:600}
.nav-item.active .ic{color:var(--accent)}
.nav-item.active::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-item .tag{margin-left:auto;font-size:10px;font-weight:700;background:var(--accent);color:#fff;padding:1px 6px;border-radius:20px}
.app.narrow .nav-text,.app.narrow .nav-item .tag{display:none}
.app.narrow .nav-item{justify-content:center;padding:9px 0}

.side-foot{border-top:1px solid var(--line-2);padding:10px 12px;display:flex;align-items:center;gap:9px}
.side-foot .avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-wash);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.side-foot .who b{font-size:var(--fs-sm)}
.side-foot small{color:var(--ink-3);display:block;font-size:var(--fs-xs)}
.app.narrow .side-foot .who,.app.narrow .side-foot{justify-content:center}
.app.narrow .side-foot .who{display:none}

/* ---- main + topbar ---- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{height:54px;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(8px);flex:none}
.crumb{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:var(--fs-sm)}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sep{opacity:.5}
.spacer{flex:1}
.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);display:grid;place-items:center;font-size:15px}
.icon-btn:hover{background:var(--sunken);color:var(--ink)}
.icon-btn svg{width:16px;height:16px}

.scroll{flex:1;overflow-y:auto;padding:22px 26px 48px}
.wrap{margin:0 auto;display:flex;flex-direction:column;gap:18px}
.wrap.narrow{max-width:760px}

/* ---- primitives: buttons, chips, cards, forms ---- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;font-size:var(--fs-base);
  font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:background .12s,transform .06s}
.btn:hover{background:var(--sunken)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink)}
.btn.good{background:var(--good);border-color:var(--good);color:#fff}
.btn.good:hover{filter:brightness(.95)}
.btn.crit{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 32%,var(--line))}
.btn.crit:hover{background:var(--crit-wash)}
.btn.sm{padding:6px 11px;font-size:var(--fs-sm)}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:var(--fs-sm);
  font-weight:600;border:1px solid var(--line);background:var(--surface)}
.pill .dot{width:7px;height:7px;border-radius:50%}
.pill.cost b{color:var(--ink);font-family:var(--mono);font-weight:600}
.pill.live{color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,var(--line))}
.pill.live .dot{background:var(--good);animation:pulse 1.9s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}

.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:var(--fs-xs);
  background:var(--sunken);color:var(--ink-2);padding:2px 7px;border-radius:5px;font-weight:600}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em}
.badge.running{background:var(--sky-wash);color:var(--sky)}
.badge.running .dot{width:6px;height:6px;border-radius:50%;background:var(--sky);animation:pulse 1.9s infinite}
.badge.warn{background:var(--warn-wash);color:var(--warn)}
.badge.good{background:var(--good-wash);color:var(--good)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.card-h h3{font-size:var(--fs-base)}
.card-h .muted{color:var(--ink-3);font-size:var(--fs-sm);font-weight:500}
.card-b{padding:14px 16px}

.inp,select.inp{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
  padding:9px 11px;font-size:var(--fs-base);color:var(--ink);font-family:inherit;outline:none;transition:border-color .12s,box-shadow .12s}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.inp::placeholder{color:var(--ink-3)}
.fld-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:640;margin-bottom:6px}

.page-head h1{font-size:var(--fs-xl)}
.page-head p{margin:5px 0 0;color:var(--ink-2);font-size:var(--fs-sm);max-width:70ch}

.seg{display:inline-flex;background:var(--sunken);border-radius:9px;padding:3px;gap:2px}
.seg button{border:none;background:none;padding:6px 12px;border-radius:7px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-3)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* responsive */
@media (max-width:1180px){
  .app.has-panel,.app.has-panel.panel-closed{grid-template-columns:248px minmax(0,1fr)}
}
@media (max-width:820px){
  .app,.app.has-panel,.app.narrow{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:60;transform:translateX(-100%);transition:transform .2s}
  .app.side-open .side{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .scroll{padding:18px 14px 40px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}