:root{
  --bg:#0b1020; --surface:#141b2f; --surface2:#1b2440; --line:#26304d;
  --text:#e8ecf5; --muted:#93a0bd; --dim:#66739850;
  --accent:#4c8dff; --accent-dim:#1e3a6b; --ok:#3ddc97; --warn:#ffb454; --bad:#ff6b6b;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:15px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
input,select{font:inherit}

/* ---------- login ---------- */
#login{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden}
#login::before{content:"";position:absolute;inset:-30%;z-index:0;
  background:
    radial-gradient(38% 45% at 20% 25%,#1b4dff33,transparent 60%),
    radial-gradient(32% 40% at 80% 20%,#00d4a033,transparent 60%),
    radial-gradient(45% 50% at 60% 85%,#7c3aed33,transparent 60%),
    radial-gradient(30% 35% at 15% 80%,#ff6b6b22,transparent 60%);
  filter:blur(28px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(2%,-2%,0) scale(1.08) rotate(4deg)}
  100%{transform:translate3d(-2%,2%,0) scale(1.04) rotate(-3deg)}
}
#login::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 75%)}
@media (prefers-reduced-motion:reduce){#login::before{animation:none}}
.login-card{position:relative;z-index:1;width:min(560px,92vw);background:#131a2ecc;backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:18px;padding:2rem 2.25rem}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:.35rem}
.brand-mark{width:36px;height:36px}
.brand h1{font-size:26px;font-weight:600;letter-spacing:-.02em}
.brand .chip{margin-left:auto}
.chip{background:var(--accent-dim);color:#a8c8ff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;letter-spacing:.02em}
.sub{color:var(--muted);font-size:13.5px;margin-bottom:1.4rem}
.users{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:1.1rem}
.user{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;text-align:left;color:var(--text);transition:border-color .15s,background .15s}
.user:hover{border-color:#3c4a70;background:var(--surface2)}
.user[aria-pressed="true"]{border-color:var(--accent);background:#16224a}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;color:#04122e}
.user-n{font-size:13px;font-weight:500;line-height:1.2}
.user-r{font-size:11px;color:var(--muted)}
.notice{background:#3a2d0e;border:1px solid #6b5416;color:#ffd68a;font-size:12.5px;
  border-radius:8px;padding:9px 12px;margin-bottom:1rem;display:flex;gap:8px;align-items:flex-start}
.btn{background:var(--accent);color:#04122e;border:0;border-radius:9px;padding:11px 18px;font-weight:600;font-size:14px;width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 13px;font-size:13px;font-weight:500;width:auto}
.btn-ghost:hover{border-color:#46567f;background:var(--surface2)}
.err{color:var(--bad);font-size:13px;margin-top:.7rem;min-height:1.1em}

/* ---------- app shell ---------- */
#app{display:none;max-width:1220px;margin:0 auto;padding:1.1rem 1.5rem 3rem}
header.top{display:flex;align-items:center;gap:12px;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:1.4rem}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.tabs{display:flex;gap:6px;margin-bottom:1.3rem}
.tab{background:transparent;border:1px solid transparent;color:var(--muted);border-radius:8px;padding:7px 14px;font-size:13.5px;font-weight:500}
.tab:hover{color:var(--text)}
.tab.on{background:var(--surface2);border-color:var(--line);color:var(--text)}
.view{display:none}
.view.on{display:block}
h2.sec{font-size:16px;font-weight:600;margin:0 0 .8rem;letter-spacing:-.01em}
.muted{color:var(--muted)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;text-align:left;color:var(--text);transition:border-color .15s,transform .15s}
.tile:hover{border-color:#46567f;transform:translateY(-2px)}
.tile h3{font-size:16px;font-weight:600;margin-bottom:3px}
.tile p{font-size:13px;color:var(--muted);margin-bottom:10px}
.tile .meta{font-size:12px;color:var(--muted);display:flex;gap:10px;align-items:center}
.pill{background:var(--accent-dim);color:#a8c8ff;font-size:11px;padding:3px 9px;border-radius:99px;font-weight:600}

/* ---------- app grid ---------- */
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:.9rem}
.crumb button{background:none;border:0;color:var(--muted);font-size:13px;padding:0}
.crumb button:hover{color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px;text-align:left;color:var(--text);transition:border-color .15s}
.card:hover{border-color:#46567f}
.card.sel{border-color:var(--accent);background:#16224a}
.card h4{font-size:14px;font-weight:600;margin-top:9px}
.card .v{font-size:12px;color:var(--muted)}
.card .d{font-size:11.5px;color:#7b88a6;margin-top:5px;line-height:1.4}
.star{position:absolute;top:9px;right:9px;background:none;border:0;font-size:15px;line-height:1;padding:2px;color:#4a5779}
.star.on{color:var(--warn)}
.bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.9rem}

/* ---------- summary ---------- */
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-top:14px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px;margin-bottom:1rem}
.metric .l{font-size:11.5px;color:var(--muted);text-transform:none}
.metric .n{font-size:19px;font-weight:600;margin-top:2px}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:.9rem;border-top:1px solid var(--line)}
select{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13.5px}
input[type=text]{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13.5px}
.go{background:var(--accent);color:#04122e;border:0;border-radius:9px;padding:9px 20px;font-weight:600;font-size:14px}
.go:disabled{opacity:.4;cursor:not-allowed}

/* ---------- instances ---------- */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.chip-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px}
.chip-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.st-provisioning{background:var(--warn)} .st-installing{background:var(--accent)}
.st-running{background:var(--ok)} .st-stopped{background:#7b88a6}
.st-terminated{background:#4a5779} .st-failed{background:var(--bad)}
.chip-name{font-size:13.5px;font-weight:600;font-family:ui-monospace,Consolas,monospace}
.chip-meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.lane{font-size:10.5px;background:var(--surface2);border:1px solid var(--line);padding:2px 8px;border-radius:99px;color:var(--muted);margin-left:auto}

/* ---------- assistant ---------- */
.ai{background:linear-gradient(180deg,#16203c,#131a2e);border:1px solid #2b3a63;border-radius:var(--radius);padding:1.1rem 1.25rem;margin-top:14px}
.ai-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ai-body{font-size:13.5px;color:#c4cee5;line-height:1.65}
.ai-body b{color:var(--text);font-weight:600}
table.inv{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13px}
table.inv th{background:var(--surface2);color:var(--muted);text-align:left;padding:8px 12px;font-weight:600;font-size:12px}
table.inv td{padding:8px 12px;border-top:1px solid var(--line)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}

/* ---------- branding / confidentiality ---------- */
.confid{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.confid .cvx{height:26px;flex:none;opacity:.95}
.confid p{font-size:11.5px;line-height:1.5;color:#7b88a6}
.foot{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.foot span{font-size:11.5px;color:#7b88a6}
.homebtn{display:flex;align-items:center;gap:9px;background:none;border:0;color:var(--text);padding:0;border-radius:8px}
.homebtn:hover{opacity:.82}

/* ---------- instance detail ---------- */
.chip-card.clickable{cursor:pointer;transition:border-color .15s}
.chip-card.clickable:hover{border-color:#46567f}
.detail{background:var(--surface);border:1px solid #2b3a63;border-radius:var(--radius);padding:1.1rem 1.25rem;margin-top:14px}
.detail-head{display:flex;align-items:center;gap:10px;margin-bottom:.7rem}
.detail-head h3{font-size:15px;font-weight:600;font-family:ui-monospace,Consolas,monospace}
h4.dh{font-size:12px;font-weight:600;color:var(--muted);margin:1rem 0 .45rem;letter-spacing:.02em}
ul.proof{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:5px}
ul.proof li{background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:6px 10px;
  font-size:12.5px;font-family:ui-monospace,Consolas,monospace;color:#c4cee5}
ul.proof li::before{content:"✓ ";color:var(--ok);font-weight:600}
.cmd{display:flex;align-items:center;gap:9px;background:#0d1424;border:1px solid var(--line);border-radius:8px;padding:8px 11px}
.cmd code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#c4cee5;flex:1;overflow-x:auto;white-space:nowrap}
.link{color:var(--accent);text-decoration:none;font-size:13px}
.link:hover{text-decoration:underline}

/* ---------- remote desktop ---------- */
.rdtoggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer}
.rdtoggle input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.rdbox{background:#10203a;border:1px solid #2b4a6b;border-radius:9px;padding:11px 13px;margin-bottom:.7rem}
.rdhead{display:flex;align-items:center;gap:9px;margin-bottom:.6rem;font-size:13px}
.rdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.rdl{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.rdgrid code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#c4cee5;
  background:#0d1424;border:1px solid var(--line);border-radius:6px;padding:3px 8px;display:inline-block}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.35fr .9fr;gap:22px;align-items:center;
  background:linear-gradient(115deg,#1b3a8f 0%,#245ec4 45%,#1a86b8 100%);
  border-radius:16px;padding:1.7rem 1.9rem;margin-bottom:1.6rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);
  background-size:38px 38px;mask-image:radial-gradient(90% 80% at 20% 30%,#000,transparent 78%)}
.hero-l{position:relative;z-index:1}
.eyebrow{display:inline-block;background:#ffffff26;color:#eaf2ff;font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;border-radius:99px;margin-bottom:.75rem}
.hero h1{font-size:31px;line-height:1.13;font-weight:600;letter-spacing:-.025em;color:#fff;margin-bottom:.55rem}
.hero p{font-size:14px;line-height:1.6;color:#d3e2ff;max-width:47ch;margin-bottom:1.15rem}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:#0b1a3d66;border:1px solid #ffffff1f;border-radius:11px;padding:10px 15px;min-width:96px}
.stat b{display:block;font-size:23px;font-weight:600;color:#fff;line-height:1.1}
.stat span{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#b9cdf0}
.hero-r{position:relative;z-index:1;display:flex;justify-content:center}
.hero-art{width:100%;max-width:300px;height:auto;border-radius:12px;background:#0b1a3d55;border:1px solid #ffffff1f}
.hero-badge{position:absolute;background:#0b1a3dd9;border:1px solid #ffffff2b;color:#eaf2ff;
  font-size:11px;font-weight:500;padding:5px 11px;border-radius:99px;white-space:nowrap}
.hero-badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#3ddc97;margin-right:6px;vertical-align:1px}
.hero-badge.b1{top:10px;left:2px}
.hero-badge.b2{top:10px;right:2px}
.hero-badge.b3{bottom:12px;left:8px}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-r{display:none}.hero h1{font-size:25px}}

/* ---------- instance actions ---------- */
.acts{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.btn-ghost.danger{border-color:#6b2222;color:#ff9b9b}
.btn-ghost.danger:hover{background:#3a1414;border-color:#8c2c2c}
.actmsg{font-size:12.5px;min-height:1.15em;margin-bottom:.5rem}

/* ---------- sticky footer + clickable stats ---------- */
/* #app is a flex column so the confidentiality footer sits at the bottom of the
   page even when a view is short, rather than floating under the content. */
#app{flex-direction:column;min-height:100vh}
#app > .view{flex:0 0 auto}
.foot{margin-top:auto}
button.stat{text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
button.stat:hover{border-color:#ffffff4d;background:#0b1a3d99}

/* ---------- install progress ---------- */
.prog{display:flex;align-items:center;gap:10px;background:#16224a;border:1px solid #2b3a63;
  border-radius:9px;padding:9px 12px;font-size:12.5px;color:#c4cee5;margin-top:6px}
.spin{width:13px;height:13px;flex:none;border:2px solid #3a4a78;border-top-color:var(--accent);
  border-radius:50%;animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* ---------- lifecycle groups ---------- */
.group{margin-bottom:1.5rem}
.group-head{display:flex;align-items:center;gap:9px;margin-bottom:.65rem}
.group-head h3{font-size:13.5px;font-weight:600;letter-spacing:.01em}
.gdot{width:9px;height:9px;border-radius:50%;flex:none}
.gcount{font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;
  background:var(--surface2);border:1px solid var(--line);color:var(--muted)}
.ghint{font-size:11.5px;color:#6b7896;margin-left:4px}
.gdot.st-initializing{background:var(--accent)}
.gdot.st-running{background:var(--ok)}
.gdot.st-stopped{background:#e05252}

/* Colour the card by lifecycle so state reads at a glance, not from the label. */
.chip-card.g-initializing{border-color:#2b4a8c;background:#111c38}
.chip-card.g-running{border-color:#1f5c46;background:#101f1b}
.chip-card.g-stopped{border-color:#5e2626;background:#1f1214}
.chip-card.g-initializing:hover{border-color:#3f66b8}
.chip-card.g-running:hover{border-color:#2c8264}
.chip-card.g-stopped:hover{border-color:#8a3838}
.dot.st-installing{background:var(--accent)}
.dot.st-failed{background:#e05252}
.miniprog{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:8px;
  border-top:1px solid #ffffff12;font-size:11.5px;color:#9fb4dd}

/* ---------- licence + cluster advice ---------- */
.lic{display:inline-block;background:#3a2d0e;border:1px solid #6b5416;color:#ffd68a;
  font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;margin-top:7px}
.advice{margin-top:.75rem;border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.55}
.advice.warning{background:#3a2416;border:1px solid #7a4a1e;color:#ffd0a6}
.advice.good{background:#10291f;border:1px solid #1f5c46;color:#a8e8cd}
.advice .fix{display:inline-block;margin-top:6px;opacity:.92}

/* ---------- sectioned tile view ---------- */
.appsec{margin-bottom:1.5rem}
.appsec-head{display:flex;align-items:center;gap:11px;margin-bottom:.7rem;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.appsec-head h3{font-size:14px;font-weight:600}
.appsec-head p{font-size:12px;color:var(--muted);margin-top:1px}
.appsec-head .gcount{margin-left:auto}

/* ---------- home category cards ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:1.5rem}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.4rem;
  text-align:left;color:var(--text);transition:border-color .15s,transform .15s}
.cat:hover{border-color:#46567f;transform:translateY(-2px)}
.cat h3{font-size:16px;font-weight:600;margin-bottom:4px}
.cat p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:1rem;min-height:2.6em}
.cat-ico{display:block;width:38px;height:38px;border-radius:10px;margin-bottom:.85rem;
  background:linear-gradient(135deg,#2b5bd7,#12b3e3)}
.cat-ico.infra{background:linear-gradient(135deg,#6b4ed8,#a78bfa)}
.cat-ico.inst{background:linear-gradient(135deg,#1f8f66,#3ddc97)}
.cat-foot{display:flex;align-items:center;font-size:12px;color:var(--muted);
  padding-top:.8rem;border-top:1px solid var(--line)}
.cat-foot .arrow{margin-left:auto;color:var(--accent);font-size:15px}
.appsec-head.toggle{cursor:pointer}
.appsec-head h3::before{content:"\25B8 ";color:var(--muted);font-size:11px}
.appsec.open .appsec-head h3::before{content:"\25BE ";}
.appsec:not(.open) .grid{display:none}

.cat-note{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:11.5px;color:#9fb4dd;line-height:1.5}

/* ---------- remote desktop guidance ---------- */
.rdwarn{background:#3a2416;border:1px solid #7a4a1e;color:#ffd0a6;border-radius:8px;
  padding:9px 11px;font-size:12px;line-height:1.5;margin-bottom:.7rem}
.rdactions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:.75rem}
.rdbtn{background:var(--accent);color:#04122e;text-decoration:none;font-weight:600;
  font-size:13px;padding:8px 15px;border-radius:8px;display:inline-block}
.rdbtn:hover{filter:brightness(1.08)}

/* ---------- environment banner ---------- */
.envbanner{display:flex;align-items:center;gap:14px;margin-bottom:.9rem;
  background:linear-gradient(100deg,#7a1330,#a8203f 55%,#c02a4c);
  border:1px solid #c8365c;border-radius:12px;padding:1rem 1.2rem}
.envbanner h3{font-size:15.5px;font-weight:600;color:#fff}
.envbanner p{font-size:12.5px;color:#ffd7e0;margin-top:2px;line-height:1.5}
.envbanner p b{color:#fff}
.env-ico{background:#ffffff1f;border-radius:9px;padding:6px;display:flex;flex:none}
.envbanner .envhelp{margin-left:auto;border-color:#ffffff59;color:#fff;flex:none}
.envbanner .envhelp:hover{background:#ffffff1f;border-color:#fff}
.envhelp-body{display:none;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:1rem 1.2rem;margin-bottom:1rem;font-size:13px;line-height:1.65;color:#c4cee5}
.envhelp-body.open{display:block}
.envhelp-body p+p{margin-top:.7rem}
.envhelp-body b{color:var(--text);font-weight:600}

/* ---------- compact catalog tiles ---------- */
.catbar{display:flex;align-items:center;gap:14px;margin-bottom:.9rem;flex-wrap:wrap}
#tilesearch{margin-left:auto;width:min(300px,60vw)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;align-items:start}
.tile2{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px;
  text-align:left;color:var(--text);transition:border-color .15s,transform .15s;display:block;width:100%}
.tile2:hover{border-color:#46567f;transform:translateY(-2px)}
.tile2 h3{font-size:14px;font-weight:600;margin:9px 0 8px;line-height:1.3}
.t2-ico{display:inline-flex;background:var(--surface2);border:1px solid var(--line);
  border-radius:8px;padding:5px}
.t2-list{list-style:none;margin-bottom:11px}
.t2-list li{font-size:12px;color:var(--muted);line-height:1.65;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.t2-list li.more{color:#6b7896;font-style:italic}
.t2-foot{display:flex;align-items:center;font-size:11.5px;color:var(--accent);
  font-weight:500;padding-top:9px;border-top:1px solid var(--line)}
.t2-foot .arrow{margin-left:auto}
.tile2.shared{border-style:dashed}

/* ---------- assistant panel (right third) ---------- */
#app{position:relative}
#agent{position:fixed;top:0;right:0;width:min(34vw,460px);height:100vh;z-index:40;
  background:#0d1424;border-left:1px solid var(--line);display:flex;flex-direction:column}
#agent.hidden{transform:translateX(calc(100% - 42px))}
#agent{transition:transform .18s ease}
body.has-agent #app{max-width:none;margin:0;padding-right:calc(min(34vw,460px) + 1.5rem);padding-left:1.5rem}
.agent-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.agent-head strong{display:block;font-size:14px;font-weight:600}
.agent-sub{display:block;font-size:11px;color:var(--muted)}
#agent-toggle{margin-left:auto;padding:3px 10px;font-size:15px;line-height:1}
.agent-log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.msg{font-size:13.5px;line-height:1.6;max-width:100%}
.msg.user{background:var(--surface2);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;align-self:flex-end;max-width:88%}
.msg.bot{color:#c4cee5}
.msg.bot b{color:var(--text);font-weight:600}
.msg.err{color:var(--bad);font-size:12.5px}
.tools{font-size:11px;color:#6b7896;margin-top:5px;font-family:ui-monospace,Consolas,monospace}
.agent-suggest{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.sug{background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:5px 11px;font-size:11.5px;color:var(--muted);cursor:pointer}
.sug:hover{border-color:var(--accent);color:var(--text)}
.agent-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);align-items:flex-end}
#agent-input{flex:1;background:var(--surface2);color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;font-size:13.5px;font-family:inherit;resize:none}
.typing{display:inline-flex;gap:3px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (max-width:1100px){#agent{display:none} body.has-agent #app{padding-right:1.5rem}}