* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: transparent; font-family: 'Segoe UI', system-ui, sans-serif; color: #fff; overflow: hidden; }

/* Správy plnia okno zdola nahor — nové pribúdajú dole (ako bežný chat).
   Ukotvené vľavo dole; veľkosť sa dá obmedziť cez ?w= a ?h= (inak vyplní rám). */
.list {
  position: absolute; left: 0; bottom: 0; max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px; padding: 10px; overflow: hidden;
}

.msg {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: 10px; line-height: 1.35;
  background: rgba(18,14,38,.72); border: 1px solid rgba(160,120,255,.22);
  animation: in .22s ease-out both;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.msg .pf { flex: none; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center;
  font-size: 10px; font-weight: 900; color: #0b0b12; }
.msg.kick .pf { background: #53fc18; }
.msg.youtube .pf { background: #ff2d2d; color: #fff; }

.msg .who { flex: none; font-weight: 800; color: #b9a8ff; }
.msg.kick .who { color: #7dff9b; }
.msg.youtube .who { color: #ff9b9b; }
.msg .who .tag { font-size: 10px; font-weight: 800; color: #9b8fd0; margin-left: 3px; }
/* dlhý text sa zalomí v rámci správy a nevytečie von z rámu */
.msg .txt { flex: 1 1 auto; min-width: 0; color: #f0ecff; overflow-wrap: anywhere; word-break: break-word; }
.msg .txt .em { height: 1.35em; vertical-align: -0.28em; margin: 0 1px; }

.msg.test { border-style: dashed; }

@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }