:root{
  --bg:#0e0e10; --panel:#18181b; --panel2:#1f1f23;
  --text:#efeff1; --muted:#adadb8; --border:#2b2b31;
  --accent:#9147ff; --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px; --font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  --msg-gap:10px;
}
html[data-theme="light"]{
  --bg:#f7f7fb; --panel:#fff; --panel2:#f1f1f6;
  --text:#0e0e10; --muted:#4b4b57; --border:#e2e2ea;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font)}
.app{min-height:100%;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,var(--panel),rgba(0,0,0,0));
  backdrop-filter: blur(10px);
  padding:14px 14px 10px;border-bottom:1px solid var(--border);
}
.brand{font-weight:800;letter-spacing:.2px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.brand::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 4px rgba(145,71,255,.18)}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.field input,.field select{
  height:38px;padding:0 10px;border:1px solid var(--border);
  border-radius:10px;background:var(--panel2);color:var(--text);outline:none;min-width:180px
}
.field input[type="number"]{min-width:110px;width:110px}
.field select{min-width:120px;width:120px}

.btn{
  height:38px;padding:0 12px;border-radius:10px;cursor:pointer;font-weight:700;
  border:1px solid rgba(145,71,255,.45);background:rgba(145,71,255,.20);color:var(--text);
}
.btn:hover{filter:brightness(1.06)}
.btn.secondary{border:1px solid var(--border);background:var(--panel2)}
.btn.tiny{height:30px;padding:0 10px;font-size:12px}

.shareline{
  margin-top:10px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.sharelabel{color:var(--muted);font-size:12px;font-weight:700}
.shareurl{
  width:min(900px,100%);
  height:34px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
}

.main{flex:1;padding:14px;display:flex;justify-content:center}
.chatcard{
  width:min(980px,100%);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;flex-direction:column;min-height:60vh
}
.chathead{
  display:flex;align-items:center;gap:10px;
  padding:12px;background:var(--panel2);border-bottom:1px solid var(--border)
}
.status{width:10px;height:10px;border-radius:999px;background:#777}
.status.live{background:#00d37e}
.statusText{font-weight:700}
.spacer{flex:1}

.chat{
  padding:12px;display:flex;flex-direction:column;gap:var(--msg-gap);
  overflow:auto;flex:1;line-height:1.28
}
.msg{display:flex;gap:10px;align-items:flex-start}
.badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:1px}
.badge-pill{
  font-size:11px;font-weight:800;padding:2px 6px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--muted)
}
.user{font-weight:800;white-space:nowrap}
.user .colon{opacity:.7;margin-left:2px}
.text{word-break:break-word;flex:1}
.emote{height:28px;vertical-align:-7px}

.chatfoot{padding:10px 12px;border-top:1px solid var(--border);background:var(--panel2);color:var(--muted);font-size:12px}