*{box-sizing:border-box}
:root{
  --bg:#0b0c10;
  --panel:#11131a;
  --text:#e5e7eb;
  --muted:#9aa0a6;
  --accent:#7c3aed;
  --accent-2:#22d3ee;
  --danger:#ef4444;
  --radius:16px;
  --shadow:0 8px 30px rgba(0,0,0,.25);
}
:root.light{
  --bg:#f8fafc;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --accent:#7c3aed;
  --accent-2:#0ea5e9;
  --danger:#dc2626;
}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.15), transparent 60%),
                     radial-gradient(1200px 600px at 90% 110%, rgba(34,211,238,.15), transparent 60%),
                     var(--bg);
  color:var(--text); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}

.app{max-width:900px;margin:0 auto;min-height:100%;display:grid;grid-template-rows:auto 1fr auto auto;gap:16px;padding:16px}

.topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  box-shadow: var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px}
.logo{font-size:20px}
.topbar h1{font-size:18px;margin:0}
.actions{display:flex;gap:8px}
.actions button{
  border:none; background:var(--panel); color:var(--text);
  padding:8px 10px;border-radius:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
}
.actions button.danger{background:transparent;color:var(--danger)}

.chat{
  display:flex; flex-direction:column; gap:12px; padding:8px;
  overflow:auto; scroll-behavior:smooth;
}
.msg{display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:flex-start}
.msg .avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.msg.user .avatar{background:linear-gradient(135deg,#16a34a,#84cc16)}
.bubble{
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  padding:12px 14px; border-radius:16px; box-shadow: var(--shadow);
  white-space:pre-wrap; word-wrap:break-word;
}

.composer{
  display:flex; gap:10px; align-items:center; background:var(--panel);
  border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding:8px; box-shadow: var(--shadow);
}
#prompt{
  flex:1; resize:none; border:none; outline:none; background:transparent; color:var(--text);
  font:16px/1.5 inherit; padding:10px;
}
button.primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white; border:none; padding:10px 14px; border-radius:12px; cursor:pointer;
  font-weight:600;
}

.foot{opacity:.75; text-align:center; margin-bottom:8px}
.small{color:var(--muted)}

/* scrollbar */
.chat::-webkit-scrollbar{width:10px}
.chat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:8px}