*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0c0d10;--surface:#13151a;--border:#1e2128;--border2:#2a2f3a;
  --accent:#4fffb0;--adim:#1a3d2a;--text:#d4dae8;--muted:#5a6478;
  --ubg:#161b27;--abg:#0f1117;--r:12px;
  --mono:"DM Mono",monospace;--sans:"Sora",sans-serif;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6}
#app{display:flex;height:100vh;overflow:hidden}
#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#topbar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
.logo{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.06em;display:flex;align-items:center;gap:8px;flex:1}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:p 2.5s ease-in-out infinite}
@keyframes p{0%,100%{box-shadow:0 0 6px var(--accent)}50%{opacity:.5;box-shadow:0 0 18px var(--accent)}}
#nbtn{border:1px solid var(--border2);border-radius:8px;background:none;color:var(--muted);font-family:var(--sans);font-size:12px;padding:6px 12px;cursor:pointer;transition:all .2s;white-space:nowrap}
#nbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--adim)}
.badge{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--border);border:1px solid var(--border2);padding:3px 10px;border-radius:99px;white-space:nowrap}
#msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
#msgs::-webkit-scrollbar{width:5px}
#msgs::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px;text-align:center}
.ei{font-size:36px;opacity:.2}
.et{font-size:20px;font-weight:600;opacity:.6}
.es{font-size:13px;color:var(--muted);max-width:340px;line-height:1.7}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.chip{font-size:12px;color:var(--muted);border:1px solid var(--border2);border-radius:99px;padding:6px 14px;cursor:pointer;background:none;font-family:var(--sans);transition:all .2s}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--adim)}
.msg{display:flex;gap:14px;padding:20px 24px;border-bottom:1px solid var(--border)}
.msg.u{background:var(--ubg)}
.msg.a{background:var(--abg)}
.av{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:500;flex-shrink:0;margin-top:2px}
.msg.u .av{background:var(--border);color:var(--muted)}
.msg.a .av{background:var(--adim);color:var(--accent);border:1px solid rgba(79,255,176,.2)}
.bub{flex:1;min-width:0}
.rl{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px;font-family:var(--mono)}
.msg.u .rl{color:var(--muted)}
.msg.a .rl{color:var(--accent)}
.ct{color:var(--text);white-space:pre-wrap;word-break:break-word;line-height:1.75}
.ct.typing::after{content:"▋";animation:bl .7s step-end infinite;color:var(--accent);margin-left:2px}
@keyframes bl{0%,100%{opacity:1}50%{opacity:0}}
.err-msg{color:#ff6b6b;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.2);border-radius:8px;padding:10px 14px;font-size:13px;font-family:var(--mono)}
#bar{flex-shrink:0;padding:12px 18px 16px;border-top:1px solid var(--border);background:var(--surface)}
#box{display:flex;gap:10px;align-items:flex-end;max-width:800px;margin:0 auto;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);padding:10px 12px;transition:border-color .2s}
#box:focus-within{border-color:var(--accent)}
#inp{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--sans);font-size:15px;resize:none;min-height:26px;max-height:160px;overflow-y:auto;line-height:1.5}
#inp::placeholder{color:var(--muted)}
#sbtn{width:34px;height:34px;border-radius:9px;border:none;cursor:pointer;background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .1s}
#sbtn:hover:not(:disabled){opacity:.8}
#sbtn:active{transform:scale(.9)}
#sbtn:disabled{opacity:.25;cursor:not-allowed}
.hint{text-align:center;font-size:11px;color:var(--muted);margin-top:8px;font-family:var(--mono)}
#info{flex-shrink:0;border-bottom:1px solid var(--border);background:#0d1117;padding:8px 18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.pill{font-family:var(--mono);font-size:10px;color:var(--muted);border:1px solid var(--border2);border-radius:99px;padding:3px 10px;white-space:nowrap;display:flex;align-items:center;gap:5px}
.pill b{color:#d4dae8;font-weight:500}
.pill.warn{border-color:rgba(255,180,50,.2);color:rgba(255,180,50,.6)}
.pill.warn b{color:rgba(255,200,80,.9)}
@media(max-width:640px){
  .badge{display:none}
  .msg{padding:14px 16px}
}