:root{
  --bg:#0d1322;
  --bg2:#131b30;
  --panel:#161e33;
  --panel2:#1b2440;
  --line:#263150;
  --line2:#33406a;
  --ink:#eceef6;
  --muted:#9aa3bd;
  --dim:#6b7592;
  --amber:#ffb224;
  --amber-ink:#201400;
  --mint:#7ef0c6;
  --rose:#ff7aa8;
  --sky:#8ab4ff;
  --radius:16px;
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:
    radial-gradient(1100px 500px at 70% -10%, #22305c 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 110%, #1a2547 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  overflow:hidden;
}
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5;z-index:0;animation:drift 16s ease-in-out infinite alternate}
.orb-a{width:520px;height:520px;left:-140px;top:-160px;background:radial-gradient(circle,#3b5bff55,transparent 65%)}
.orb-b{width:460px;height:460px;right:-120px;bottom:-140px;background:radial-gradient(circle,#ffb22433,transparent 65%);animation-delay:-6s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.12)}}
.app,.grain{position:relative;z-index:1}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");}

.app{display:grid;grid-template-columns:300px 1fr;height:100dvh;gap:0}

/* rail */
.rail{
  background:linear-gradient(180deg, #111832 0%, #0e1430 100%);
  border-right:1px solid var(--line);
  padding:18px 16px 14px;
  display:flex;flex-direction:column;gap:12px;min-height:0;
}
.brand{display:flex;gap:12px;align-items:center}
.brand-mark{display:grid;gap:5px;background:#0a0f22;border:1px solid var(--line2);border-radius:12px;padding:10px}
.brand-mark span{display:block;height:5px;border-radius:99px}
.brand-mark span:nth-child(1){width:34px;background:var(--amber)}
.brand-mark span:nth-child(2){width:22px;background:var(--mint)}
.brand-mark span:nth-child(3){width:28px;background:var(--sky)}
.brand-name{margin:0;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.2px}
.brand-sub{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.new-chat{
  border:0;border-radius:12px;padding:12px;font:600 14px var(--font-display);
  background:var(--amber);color:var(--amber-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.new-chat:hover{filter:brightness(1.06)}
.new-chat .plus{font-size:18px;line-height:1}
.rail-label{font-family:var(--font-mono);font-size:11.5px;color:var(--dim);letter-spacing:.06em;margin:6px 2px -2px}
.rail-label.row{display:flex;justify-content:space-between;align-items:center}
.count{background:#0b1124;border:1px solid var(--line);border-radius:99px;padding:1px 8px;color:var(--muted)}
.providers{display:grid;gap:8px}
.prov{
  display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:#121a33;cursor:pointer;text-align:left;color:inherit;width:100%;
}
.prov.active{border-color:var(--amber);background:#1a2140;box-shadow:0 0 0 1px var(--amber) inset}
.prov .dot{width:9px;height:9px;border-radius:99px;background:#3a4468}
.prov.has-key .dot{background:var(--mint);box-shadow:0 0 10px #7ef0c688}
.prov b{font-size:13.5px;display:block}
.prov small{color:var(--muted);font-size:11.5px;font-family:var(--font-mono)}
.prov .go{font-family:var(--font-mono);font-size:11px;color:var(--dim);border:1px solid var(--line);padding:3px 7px;border-radius:99px}
.prov.active .go{color:var(--amber-ink);background:var(--amber);border-color:var(--amber)}
.sessions{overflow:auto;display:flex;flex-direction:column;gap:7px;min-height:80px;scrollbar-width:thin}
.sess{
  border:1px solid transparent;background:transparent;color:var(--ink);
  text-align:left;border-radius:11px;padding:9px 10px;cursor:pointer;display:grid;gap:2px;
}
.sess:hover{background:#ffffff10}
.sess.active{background:#ffffff12;border-color:var(--line2)}
.sess b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sess small{color:var(--muted);font-size:11.5px;font-family:var(--font-mono)}
.sess .del{float:right;color:var(--dim)}
.rail-foot{margin-top:auto;border-top:1px dashed var(--line2);padding-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rail-foot p{width:100%;margin:0;color:var(--dim);font-size:11.8px;line-height:1.45}
.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:7px 10px;font-size:12.5px;cursor:pointer}
.ghost:hover{border-color:var(--sky)}
.ghost.danger:hover{border-color:var(--rose);color:var(--rose)}

/* stage */
.stage{display:flex;flex-direction:column;min-width:0;min-height:0}
.patchbar{
  display:flex;justify-content:space-between;gap:14px;align-items:end;
  padding:14px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #141c38cc, #10162bcc);
  backdrop-filter:blur(8px);
  flex-wrap:wrap;
}
.patch-group{display:flex;gap:14px;align-items:end;flex-wrap:wrap}
.field{display:grid;gap:6px;font-size:12px;color:var(--muted)}
.field span{display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono)}
.field b{color:var(--amber)}
select,input[type=text],input:not([type]),input[type=password],textarea{
  background:#0b1126;border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:9px 10px;font-size:13.5px;font-family:var(--font-body);
}
select{min-width:150px}
.model-row{display:flex;gap:8px}
.model-row select{min-width:230px}
.model-row input{width:190px;font-family:var(--font-mono);font-size:12.5px}
input[type=range]{accent-color:var(--amber);width:130px}
.patch-actions{display:flex;gap:10px;align-items:center}
.key-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:99px;padding:7px 12px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.key-pill i{width:8px;height:8px;border-radius:99px;background:var(--rose);display:block}
.key-pill.ok{color:var(--mint);border-color:#2f5b4c}
.key-pill.ok i{background:var(--mint);box-shadow:0 0 8px var(--mint)}
.primary{background:var(--ink);color:#0c1226;border:0;border-radius:11px;padding:10px 16px;font-weight:700;cursor:pointer}
.primary:hover{background:#fff}

.transcript{flex:1;overflow:auto;padding:22px 18px 12px;display:flex;flex-direction:column;gap:14px;max-width:980px;width:100%;margin:0 auto;scrollbar-width:thin}
.msg{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;animation:rise .25s ease}
@keyframes rise{from{transform:translateY(5px);opacity:0}to{transform:none;opacity:1}}
.avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:13px;border:1px solid var(--line2)}
.msg.user .avatar{background:var(--sky);color:#0b1330;border-color:transparent}
.msg.assistant .avatar{background:#0b1126;color:var(--amber)}
.msg.system .avatar{background:#241a08;color:var(--amber)}
.bubble{background:var(--panel);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:12px 14px;line-height:1.6;font-size:14.2px;min-width:0}
.msg.user .bubble{background:#1d2a55;border-color:#35478a;border-radius:16px 4px 16px 16px}
.meta{display:flex;gap:8px;align-items:center;color:var(--dim);font-family:var(--font-mono);font-size:11px;margin-bottom:6px}
.meta button{margin-left:auto;background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;font-size:11px;padding:3px 8px;cursor:pointer}
.bubble pre{background:#070b1a;border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;font-family:var(--font-mono);font-size:12.5px}
.bubble code{font-family:var(--font-mono);font-size:.92em;background:#ffffff14;padding:1px 5px;border-radius:6px}
.bubble pre code{background:none;padding:0}
.bubble p{margin:.45em 0;max-width:72ch}
.typing{display:inline-flex;gap:4px}
.typing i{width:7px;height:7px;border-radius:99px;background:var(--amber);animation:b 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,100%{opacity:.3}50%{opacity:1}}
.error{border:1px solid #6e2b44;background:#2a1220;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5}
.error b{color:var(--rose)}

.empty{max-width:720px;margin:6px auto 0;text-align:center;padding:10px 20px 4px;color:var(--muted)}
.empty-cable{color:var(--amber);opacity:.9}
.empty-cable svg{width:220px;height:auto}
.empty h1{font-family:var(--font-display);color:var(--ink);font-size:clamp(28px,4vw,42px);margin:10px 0 8px;letter-spacing:-.02em}
.empty p{line-height:1.6;margin:0 auto;max-width:58ch}
.empty-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.empty-cards button{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:14px;padding:12px;cursor:pointer;font-weight:700;font-family:var(--font-display);display:grid;gap:6px;text-align:left}
.empty-cards button span{font-weight:400;font-family:var(--font-body);color:var(--muted);font-size:12.5px;line-height:1.45}
.empty-cards button:hover{border-color:var(--amber);transform:translateY(-1px)}

.composer-wrap{max-width:980px;width:100%;margin:0 auto;padding:10px 18px 14px}
.system{border:1px solid var(--line);border-radius:12px;background:#101736;margin-bottom:8px}
.system summary{cursor:pointer;padding:9px 12px;font-size:12.5px;color:var(--muted);font-family:var(--font-mono)}
.system textarea{width:100%;background:transparent;border:0;border-top:1px solid var(--line);resize:vertical;min-height:52px}
.composer{display:grid;grid-template-columns:1fr auto;gap:10px;background:#0e1530;border:1px solid var(--line2);border-radius:16px;padding:10px}
.composer:focus-within{border-color:var(--amber)}
.composer textarea{background:transparent;border:0;resize:none;max-height:160px;font-size:14.5px;line-height:1.5}
.composer textarea:focus{outline:none}
.composer-btns{display:flex;gap:8px;align-items:end}
.send{background:var(--amber);border:0;color:var(--amber-ink);font-weight:800;border-radius:11px;padding:11px 18px;cursor:pointer;font-family:var(--font-display)}
.send:disabled{opacity:.5}
.stop{background:transparent;border:1px solid var(--line2);color:var(--ink);border-radius:11px;padding:10px 14px;cursor:pointer}
.stop:not(:disabled){border-color:var(--rose);color:var(--rose)}
.hint{color:var(--dim);font-size:11.8px;font-family:var(--font-mono);margin:8px 2px 0}

.keys-dialog{border:1px solid var(--line2);background:var(--bg2);color:var(--ink);border-radius:18px;padding:0;max-width:760px;width:calc(100vw - 32px)}
.keys-dialog::backdrop{background:#050814cc;backdrop-filter:blur(4px)}
.keys-head{display:flex;justify-content:space-between;gap:12px;padding:18px 18px 6px;align-items:start}
.keys-head h2{margin:0;font-family:var(--font-display)}
.keys-head p{margin:6px 0 0;color:var(--muted);font-size:13px}
.keys-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 18px}
.key-card{border:1px solid var(--line);border-radius:14px;padding:12px;background:#101736;display:grid;gap:8px}
.key-card h4{margin:0;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.key-card h4 a{font-size:11px;color:var(--sky);font-weight:400}
.key-card input{width:100%;font-family:var(--font-mono);font-size:12px}
.key-card small{color:var(--dim);font-family:var(--font-mono);font-size:11px;word-break:break-all}
.keys-custom{border-top:1px dashed var(--line2);padding:12px 18px}
.keys-custom h3{margin:0 0 8px;font-size:13px;font-family:var(--font-mono);color:var(--muted)}
.custom-row{display:grid;grid-template-columns:1fr 1.4fr 1fr 1fr;gap:8px}
.custom-row label{display:grid;gap:5px;font-size:11px;color:var(--dim)}
.custom-actions{display:flex;gap:12px;align-items:center;margin-top:10px}
.tiny{color:var(--dim);font-size:11.5px}
.keys-foot{padding:12px 18px 18px;display:flex;justify-content:end}

@media (max-width:980px){
  body{overflow:auto}
  .app{grid-template-columns:1fr;height:auto;min-height:100dvh}
  .rail{order:2}
  .transcript{min-height:52vh}
  .empty-cards{grid-template-columns:1fr}
  .keys-grid{grid-template-columns:1fr}
  .custom-row{grid-template-columns:1fr 1fr}
  .model-row select{min-width:0;flex:1}
  .model-row input{flex:1}
}
.mini-link{background:none;border:none;color:var(--amber);font:inherit;font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.icon-btn{background:#0b1126;border:1px solid var(--line2);color:var(--ink);border-radius:10px;min-width:38px;height:38px;cursor:pointer;font-size:16px;transition:transform .35s ease,border-color .2s}
.icon-btn:hover{border-color:var(--amber)}
.icon-btn.spinning{animation:spin 0.9s linear infinite;border-color:var(--amber)}
@keyframes spin{to{transform:rotate(360deg)}}
.field-note{font-family:var(--font-mono);font-size:11px;color:var(--dim)}
.model-dialog{border:1px solid var(--line2);background:var(--bg2);color:var(--ink);border-radius:18px;padding:18px;max-width:640px;width:calc(100vw - 32px);max-height:80vh}
.model-dialog::backdrop{background:#050814cc;backdrop-filter:blur(4px)}
.model-head{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-bottom:12px}
.model-head h2{margin:0;font-family:var(--font-display)}
.model-head p{margin:6px 0 0;color:var(--muted);font-size:13px}
#modelSearch{width:100%;margin-bottom:12px;font-family:var(--font-mono)}
.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:auto;max-height:50vh}
.model-opt{border:1px solid var(--line);background:#101736;border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;color:var(--ink);font-family:var(--font-mono);font-size:12px;transition:transform .18s ease,border-color .18s,background .18s;animation:pop .25s ease backwards}
.model-opt:nth-child(2n){animation-delay:.03s}.model-opt:nth-child(3n){animation-delay:.06s}
.model-opt:hover{border-color:var(--amber);transform:translateY(-2px);background:#16204a}
.model-opt.current{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint) inset}
.model-opt small{display:block;color:var(--dim);margin-top:4px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.prov{transition:transform .18s ease,border-color .18s,box-shadow .18s}
.prov:hover{transform:translateX(3px);border-color:var(--line2)}
.send{position:relative;overflow:hidden;transition:transform .15s ease,filter .15s}
.send:hover{filter:brightness(1.07)}
.send:active{transform:scale(.96)}
.msg{animation:rise .35s cubic-bezier(.2,.9,.25,1.2)}
.bubble{transition:border-color .25s,box-shadow .25s}
.msg.streaming .bubble{border-color:var(--amber);box-shadow:0 0 0 1px #ffb22444,0 8px 32px -12px #ffb22455}
.new-chat,.empty-cards button{transition:transform .18s ease,box-shadow .18s,border-color .18s}
.new-chat:hover{transform:translateY(-1px);box-shadow:0 10px 28px -10px #ffb22488}
.composer{transition:border-color .2s,box-shadow .25s}
.composer.typing-glow{border-color:var(--amber);box-shadow:0 0 0 1px #ffb22455,0 12px 40px -16px #ffb22466}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}