:root {
  --bg: #0f1222;
  --panel: #151935;
  --muted: #a7b0d0;
  --text: #e9ecff;
  --accent: #7c5cff;
  --accent-2: #21d4fd;
  --line: #23284b;
  --user: #2a9d8f;
  --bot: #222a52;
}
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0; background:linear-gradient(180deg,#0c0f1d,#111537);
  color:var(--text); font:500 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.chat-wrap {
  max-width:900px; margin:0 auto; min-height:100dvh;
  display:flex; flex-direction:column; gap:0;
}
.chat-header {
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(10px);
  background:rgba(15,18,34,.75); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
}
.brand { display:flex; gap:10px; align-items:center; }
.brand .dot { width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
  box-shadow:0 0 16px var(--accent-2);
}
.brand h1 { font-size:18px; margin:0; letter-spacing:.3px; }
.status { color:var(--muted); font-size:13px; }

.chat {
  padding:22px 14px 100px; display:flex; flex-direction:column; gap:14px;
}
.row { display:flex; gap:12px; }
.right { justify-content:flex-end; }
.avatar {
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
  color:#0c0f1d; font-weight:800; text-transform:lowercase;
}
.bubble { width:100%; }
.msg {
  max-width:75%;
  padding:12px 14px; border-radius:14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  border:1px solid var(--line);
  white-space:pre-wrap; word-wrap:break-word;
}
.user { background:linear-gradient(145deg,#2fb39f,#2a9d8f); color:#071216; border-color:transparent; }
.bot { background:linear-gradient(145deg,#171e46,#1a224e); }
.typing { display:inline-flex; gap:6px; align-items:center; }
.typing span {
  width:6px; height:6px; border-radius:50%; background:#9fb0ff; opacity:.6;
  animation: b 1.2s infinite;
}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes b { 0%,80%,100%{transform:scale(0.6)} 40%{transform:scale(1)} }

.chat-input {
  position:fixed; left:0; right:0; bottom:0; background:rgba(15,18,34,.9);
  border-top:1px solid var(--line); display:flex; gap:10px; padding:12px; align-items:center;
}
#msg {
  flex:1; resize:none; border:1px solid var(--line); border-radius:12px; outline:none;
  background:var(--panel); color:var(--text); padding:12px 14px; max-height:30dvh;
}
#sendBtn {
  border:none; background:linear-gradient(145deg,var(--accent-2),var(--accent));
  color:#0b0e1e; font-weight:700; padding:12px 16px; border-radius:12px; cursor:pointer;
  transition:.2s transform;
}
#sendBtn:active { transform:translateY(1px) }
a { color:#9bc6ff }
code, pre {
  background:#0e132c; border:1px solid #1f2550; border-radius:10px; padding:.2em .4em;
}
pre { padding:12px; overflow:auto; }