html, body { margin: 0; background: transparent; overflow: hidden; }
:root { --fs: 18px; --ff: "Inter", system-ui, sans-serif; }
.chat {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px; gap: 4px;
  font-family: var(--ff); font-size: var(--fs);
  color: #fff;
}
.chat.shadow .row { text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000; }
.row { animation: in .18s ease-out; line-height: 1.4; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.row.leaving { animation: out .4s ease-in forwards; }
@keyframes out { to { opacity: 0; } }

.ic { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: .16em; flex: none; }
.nm { font-weight: 800; }
.badge { width: .95em; height: .95em; vertical-align: -0.12em; margin-right: .05em; }
.emote { height: 1.2em; vertical-align: middle; }

/* A · compacto (default) */
.chat.a .row { }
/* B · bolha por plataforma */
.chat.b .row { padding: 5px 8px; border-radius: 8px; border-left: 3px solid; }
.chat.b .row.youtube { background: rgba(255,0,51,.14); border-color: #ff0033; }
.chat.b .row.kick { background: rgba(83,252,24,.12); border-color: #53fc18; }
/* C · duas linhas */
.chat.c .head { display: block; margin-bottom: 1px; }
.chat.c .body { display: block; padding-left: 1.4em; }