Social Stream Ninja 可以把 YouTube、Twitch、TikTok 等平台的聊天统一到一个浏览器源里。如果你想用 Doodlekuma 的 Social Stream 版本 CSS，需要把 CSS 放到 Social Stream 的 dock/overlay 页面，而不是 YouTube 原生弹出聊天室。
官方入口在这里：socialstream.ninja/landing
先搞清楚两个版本
Doodlekuma 的主题通常会提供两种 CSS：
- Social Stream：用于 Social Stream Ninja 的 dock / output DOM，选择器通常是
.highlight-chat、.hl-name、.hl-message。 - YouTube：用于 YouTube 原生弹出聊天室，选择器通常是
yt-live-chat-text-message-renderer。
如果把 Social Stream CSS 粘到 YouTube 弹出聊天室里，样式不会正确生效。反过来也一样。
准备工作
你需要：
- OBS Studio 或 Streamlabs OBS。
- Social Stream Ninja 的页面或扩展，按官方说明完成初始设置。
- 一个你要接入的聊天平台，比如 YouTube Live。
- 从 直播弹幕样式库 下载的 Social Stream 版本 CSS。
第一步：打开 Social Stream Ninja
访问 Social Stream Ninja 官方页面，根据你的使用方式打开或安装 Social Stream。
完成后，找到 Social Stream 提供给 OBS 使用的 dock / output 页面。这个页面才是后面要放进 OBS 浏览器源的 URL。
第二步：连接你的直播聊天
在 Social Stream 里添加你要使用的平台，例如 YouTube。
连接完成后，先确认 Social Stream 页面里能看到真实聊天消息。建议先不要急着加 CSS，先用默认样式确认消息进来了。
第三步：在 OBS 添加浏览器源
在 OBS 里：
- 点击「来源」里的
+。 - 选择「浏览器」。
- URL 填入 Social Stream 的 dock / output 页面地址。
- 设置宽高，例如
500 x 700或与你的直播布局一致的尺寸。 - 勾选透明背景相关选项，如果你的 OBS 版本提供这个选项。
第四步：粘贴 CSS
回到 Doodlekuma 的主题页面，下载时选择 Social Stream 版本。
然后在 OBS 浏览器源的「自定义 CSS」区域粘贴完整 CSS。
如果你下载的是 .css 文件，可以打开文件后复制全部内容；也可以把文件内容整理进自己的 OBS 预设。
常见问题
下载后没效果
先确认你下载的是 Social Stream 版本，并且 OBS 的 URL 是 Social Stream 页面，不是 YouTube 的 live_chat 页面。
YouTube 图标不显示
新版主题会尽量使用内联 SVG 图标，不依赖 /sources/images/youtube.png。如果你使用的是旧 CSS，建议重新下载一次。
消息 DOM 看起来不一样
这是正常的。Social Stream 和 YouTube 原生聊天室的 DOM 结构不同，所以 CSS 版本不能混用。
推荐流程
- 先在 Social Stream 官方页面完成连接。
- 在 OBS 里确认默认聊天可以显示。
- 再从 Doodlekuma 下载 Social Stream 版本 CSS。
- 最后调整主题参数并重新下载。
这样排查问题会简单很多：先确认消息源，再确认样式。