:root {
  --bg: #0a0710;
  --panel: #140d1c;
  --ink: #f3e9ff;
  --muted: #8a7a9a;
  --accent: #ff3df0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  font-family: "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.topbar {
  position: sticky; top: 0; z-index: 5;
  padding: 14px 18px 10px;
  background: linear-gradient(180deg, #1a0f24, #0a0710);
  border-bottom: 1px solid #2a1838;
}
.topbar h1 {
  margin: 0; font-size: 18px; letter-spacing: 3px;
  color: var(--accent); text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255,61,240,.5);
}
.syshdr { color: var(--muted); font-size: 12px; margin-top: 4px; }
.live { position: absolute; right: 18px; top: 16px; font-size: 11px; color: var(--muted); }
.live .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #3dff9e; box-shadow: 0 0 8px #3dff9e; margin-right: 5px;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.chat {
  flex: 1; padding: 16px 18px 60px; max-width: 820px; width: 100%;
  margin: 0 auto; overflow-y: auto;
}
.msg {
  padding: 6px 10px; margin: 4px 0; border-left: 2px solid #2a1838;
  border-radius: 0 8px 8px 0; background: rgba(255,255,255,.015);
  line-height: 1.5; font-size: 14px; word-wrap: break-word;
}
.msg.dm { border-left-color: #ffd23d; background: rgba(255,210,61,.05); }
.who { font-weight: 700; }
.txt { color: var(--ink); }