youtube-chat.css

#items { overflow: hidden !important; }
*:not(.yt-chat-badge):not(.yt-emoji-icon) { background: transparent !important; }
.gaming-promo, #live-comments-controls, ::-webkit-scrollbar, wbr, .is-deleted, [is-deleted], #panel-pages, yt-live-chat-header-renderer { display: none !important; }
#author-name, #message { color: white !important; text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px 0.5px 0 black !important; }
#message { display: block !important; }
#author-name::after { content: ":"; font-weight: 900; }
#message a {color: skyblue !important; font-size: 0 !important; line-height: 9px !important;}
#message a::after { content: attr(href); font-size: 10px !important; }
@keyframes chat-fade { 0% { opacity: 1; position: relative; } 99% { opacity: 0; position: relative; } 100% { opacity: 0; position: absolute; }}
yt-live-chat-text-message-renderer { animation: chat-fade 5s 30s forwards; }
/* #author-photo { border-radius: 10px !important; } */

https://www.youtube.com/live_chat?is_popout=1&v=<video_id>

yt-live-chat-legacy-paid-message-renderer is the class for sticky donation messages
yt-live-chat-paid-message-renderer is the class for regular non-sticky super chats.

If there is a scrollbar on the right side of chat, right click on the browser source in OBS Studio and choose "Interact", and then click on the triple dots menu of any chat message. If you crop out the scrollbar, it might disappear on its own and then chat would start getting cut off.

Seems that youtube added a reminder that won't go away

Seems that youtube added a reminder that won't go away

Just ad yt-live-chat-viewer-engagement-message-renderer { visibility: hidden; } and it will go away