Accessibility
SystemMessage from @prepared911/ui/system-message.
div or li and adds no role. Inside a list the caller passes as="li" and owns the list.aria-hidden: a screen reader user needs to know someone joined as much as a sighted one.dateTime.log role, aria-live, or aria-atomic. The scroll container that holds the transcript is the role="log" region (ChatScroll). A per-line live region would announce every event twice.
The line is centered, but its meaning does not depend on where it sits. The event is its text, so it reads the same without the layout.
The caption is at the subtle foreground tier, which clears WCAG 2.2 AA at 12px in light and dark (checked with axe in both). It draws no color other than text, so under forced-colors: active it takes the system text color and loses nothing.
animated fades and slides the line in with the glide enter tokens. Under reduced motion the slide collapses and the fade remains; the text is already in place.