:root {
  --accent: #53fc18;
  --text: #fff;
  --muted: #b8b8c2;
  --panel: rgba(10, 10, 13, .82);
  --radius: 14px;
  --font-size: 28px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
body { font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: var(--text); }
#chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 18px; }
.message {
  width: fit-content; max-width: 100%; padding: 11px 15px 12px; border-left: 4px solid var(--user-color, var(--accent));
  border-radius: 4px var(--radius) var(--radius) 4px; background: var(--panel); box-shadow: 0 8px 25px rgba(0,0,0,.25);
  font-size: var(--font-size); line-height: 1.28; overflow-wrap: anywhere; animation: enter .28s cubic-bezier(.2,.8,.2,1) both;
}
.message.leaving { animation: leave .35s ease both; }
.meta { display: inline-flex; align-items: center; gap: 5px; margin-right: 7px; vertical-align: 2px; }
.name { color: var(--user-color, var(--accent)); font-weight: 800; font-size: .78em; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; background: #31313a; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.badge-moderator { background: #53fc18; color: #091006; }
.badge-subscriber { background: #7358ff; }
.badge-sub_gifter { background: #ffb800; color: #211600; }
.text { font-weight: 600; text-shadow: 0 2px 3px rgba(0,0,0,.45); }
.emote { height: 1.35em; width: auto; vertical-align: -.3em; margin: 0 2px; }
#status { position: absolute; left: 18px; bottom: 18px; padding: 8px 12px; border-radius: 9px; background: rgba(8,8,10,.88); color: var(--muted); font: 600 15px system-ui; }
#status:empty { display: none; }
@keyframes enter { from { opacity: 0; transform: translateX(-24px) scale(.97); } }
@keyframes leave { to { opacity: 0; transform: translateX(-16px); } }