:root{
  --bg:#0b0f19; --surface:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.12);
  --txt:#e8ecf6; --muted:#96a0b8; --a1:#7c5cff; --a2:#00d4ff; --radius:18px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="light"]{
  --bg:#f4f6fb; --surface:rgba(255,255,255,.75); --stroke:rgba(15,20,40,.1);
  --txt:#111827; --muted:#5b6478;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--txt); font:16px/1.6 "Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  transition:background .5s var(--ease), color .3s;
}
.aurora{
  position:fixed; inset:-20%; z-index:-1; filter:blur(90px); opacity:.5;
  background:
    radial-gradient(40vw 40vw at 20% 20%, var(--a1), transparent 60%),
    radial-gradient(35vw 35vw at 80% 70%, var(--a2), transparent 60%);
  animation:float 18s ease-in-out infinite alternate;
}
@keyframes float{to{transform:translate3d(4%,-4%,0) scale(1.15)}}

.glass{
  background:var(--surface); backdrop-filter:blur(18px);
  border:1px solid var(--stroke);
}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-radius:0 0 var(--radius) var(--radius)}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{font-size:1.15rem;letter-spacing:.5px;font-weight:600}
.brand em{background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;color:transparent;font-style:normal}
.orb{width:28px;height:28px;border-radius:50%;background:conic-gradient(var(--a1),var(--a2),var(--a1));animation:spin 6s linear infinite;box-shadow:0 0 18px var(--a1)}
@keyframes spin{to{transform:rotate(360deg)}}

.icon-btn{
  width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:1.1rem;
  background:transparent;border:1px solid var(--stroke);color:var(--txt);
  transition:transform .25s var(--ease),background .25s,box-shadow .25s;
}
.icon-btn:hover{transform:translateY(-2px) rotate(-8deg);background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.25)}

.chat{flex:1;overflow-y:auto;padding:26px 18px 120px;max-width:860px;width:100%;margin:0 auto;scroll-behavior:smooth}
.chat::-webkit-scrollbar{width:8px}
.chat::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:8px}

.msg{display:flex;gap:12px;margin-bottom:22px;animation:slideIn .45s var(--ease) both}
.msg .avatar{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.msg.user{flex-direction:row-reverse}
.msg.user .avatar{background:linear-gradient(135deg,var(--a2),var(--a1));color:#fff}
.msg.bot .avatar{background:var(--surface);border:1px solid var(--stroke)}
.bubble{
  padding:14px 18px;border-radius:var(--radius);max-width:78%;
  background:var(--surface);border:1px solid var(--stroke);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.bubble:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.msg.user .bubble{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;border:none}
.bubble pre{background:rgba(0,0,0,.45);padding:12px;border-radius:12px;overflow-x:auto;margin:10px 0}
.bubble code{font-family:ui-monospace,Consolas,monospace;font-size:.9em}

@keyframes slideIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.fade-up{animation:slideIn .6s var(--ease) both}

.typing{display:flex;gap:6px;padding:16px 20px}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--a2);animation:bounce 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-8px);opacity:1}}

.welcome{text-align:center;margin:8vh auto}
.welcome h2{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:600;margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{
  padding:10px 16px;border-radius:99px;cursor:pointer;color:var(--txt);
  background:var(--surface);border:1px solid var(--stroke);
  transition:transform .25s var(--ease),border-color .25s;
}
.chip:hover{transform:translateY(-3px);border-color:var(--a2)}

.composer{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  width:min(860px,92%);display:flex;align-items:flex-end;gap:10px;
  padding:10px;border-radius:22px;transition:box-shadow .3s;
}
.composer:focus-within{box-shadow:0 0 0 2px var(--a1),0 18px 40px rgba(0,0,0,.35)}
#input{
  flex:1;resize:none;max-height:160px;padding:12px;border:none;outline:none;
  background:transparent;color:var(--txt);font:inherit;
}
.send{
  width:46px;height:46px;border:none;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--a1),var(--a2));display:grid;place-items:center;
  transition:transform .25s var(--ease),filter .25s;
}
.send svg{width:22px;fill:#fff}
.send:hover{transform:scale(1.08) rotate(8deg)}
.send:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed;transform:none}

@media(max-width:600px){
  .bubble{max-width:88%}
  .chat{padding-bottom:110px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}