:root{
  --bg:#0a0b0d;
  --panel:#121316;
  --panel-2:#16181c;
  --line:#23262b;
  --txt:#e8eaed;
  --mut:#8b9098;
  --acc:#c6f24e;        /* acid lime accent */
  --acc-dim:#9fc23a;
  --user:#1f2937;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(198,242,78,.07), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:"Space Grotesk",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.app{height:100vh;display:flex;flex-direction:column;max-width:980px;margin:0 auto}

/* top bar */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 14px var(--acc)}
.name{font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.tag{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--mut);
  border:1px solid var(--line);padding:3px 8px;border-radius:999px}
.bar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.models{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);
  padding:4px;border-radius:12px}
.model{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--mut);
  background:transparent;border:0;padding:6px 12px;border-radius:9px;cursor:pointer;
  transition:.15s}
.model:hover{color:var(--txt)}
.model.on{background:var(--acc);color:#0a0b0d;font-weight:700}
.fresh{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--mut);
  background:var(--panel);border:1px solid var(--line);padding:8px 12px;border-radius:11px;
  cursor:pointer;transition:.15s}
.fresh:hover{color:var(--txt);border-color:#34383f}

/* stream */
.stream{flex:1;overflow-y:auto;padding:24px 18px;display:flex;flex-direction:column;gap:18px;
  scroll-behavior:smooth}
.stream::-webkit-scrollbar{width:9px}
.stream::-webkit-scrollbar-thumb{background:#22252a;border-radius:9px}

.empty{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:30px 10px}
.empty .big{font-size:2rem;font-weight:700;letter-spacing:-.03em}
.empty .sub{color:var(--mut);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;max-width:520px}
.chip{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--txt);
  background:var(--panel);border:1px solid var(--line);padding:9px 13px;border-radius:11px;
  cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--acc);color:var(--acc)}

/* messages */
.msg{display:flex;gap:12px;max-width:100%}
.msg .av{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.72rem}
.msg.user{flex-direction:row-reverse}
.msg.user .av{background:var(--acc);color:#0a0b0d}
.msg.bot .av{background:var(--panel-2);color:var(--acc);border:1px solid var(--line)}
.bubble{padding:13px 15px;border-radius:14px;line-height:1.55;font-size:.96rem;
  white-space:pre-wrap;word-break:break-word;max-width:78%}
.msg.user .bubble{background:var(--user);border:1px solid #2b3340;border-top-right-radius:4px}
.msg.bot .bubble{background:var(--panel);border:1px solid var(--line);border-top-left-radius:4px}
.bubble code{font-family:"JetBrains Mono",monospace;font-size:.85em;background:#0d0e10;
  padding:2px 5px;border-radius:5px;border:1px solid var(--line)}
.bubble pre{background:#0d0e10;border:1px solid var(--line);border-radius:10px;padding:12px;
  overflow-x:auto;margin:8px 0}
.bubble pre code{background:none;border:0;padding:0}
.bubble img{max-width:100%;border-radius:10px;margin-top:8px}

/* typing dots */
.dots{display:inline-flex;gap:4px;align-items:center;height:1em}
.dots span{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:bnc 1s infinite}
.dots span:nth-child(2){animation-delay:.15s}
.dots span:nth-child(3){animation-delay:.3s}
@keyframes bnc{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

/* composer */
.composer{padding:14px 18px 18px;border-top:1px solid var(--line)}
.box{display:flex;align-items:flex-end;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 10px 10px 16px;transition:.15s}
.box:focus-within{border-color:var(--acc-dim)}
#input{flex:1;background:transparent;border:0;outline:0;color:var(--txt);resize:none;
  font-family:inherit;font-size:1rem;line-height:1.5;max-height:160px}
#input::placeholder{color:#5c626b}
.send{flex:0 0 auto;width:42px;height:42px;border-radius:12px;border:0;cursor:pointer;
  background:var(--acc);color:#0a0b0d;display:grid;place-items:center;transition:.15s}
.send:hover{filter:brightness(1.08)}
.send:disabled{opacity:.35;cursor:not-allowed}
.hint{text-align:center;color:#4f555d;font-size:.72rem;margin-top:8px;
  font-family:"JetBrains Mono",monospace}

@media(max-width:640px){
  .empty .big{font-size:1.5rem}
  .bubble{max-width:86%}
  .tag{display:none}
}