/* widget.css */
html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: #000; overflow: hidden; font-family: 'Roboto', Arial, sans-serif;
}
.rl-yt-wrapper { display: flex; flex-direction: row; width: 100%; height: 100vh; background: #0f0f0f; color: #fff; }
.rl-yt-video-section { flex: 1; display: flex; flex-direction: column; background: #000; position: relative; }
#rl-video-player { width: 100%; height: calc(100% - 60px); object-fit: contain; outline: none; background: #000; }
.rl-yt-controls { height: 60px; display: flex; justify-content: space-between; padding: 0 20px; align-items: center; background: #0f0f0f; border-top: 1px solid #272727; box-sizing: border-box; }
.rl-metrics { display: flex; align-items: center; gap: 15px; font-size: 14px; font-weight: 500; }
.rl-live-badge { background: #cc0000; padding: 3px 8px; border-radius: 4px; font-weight: bold; font-size: 12px; letter-spacing: 0.5px;}
.rl-yt-btn { background: transparent; color: white; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 5px; transition: background 0.2s; }
.rl-yt-btn:hover { background: #272727; }
.rl-yt-chat-section { width: 350px; display: flex; flex-direction: column; border-left: 1px solid #272727; background: #0f0f0f; }
.rl-chat-header { padding: 15px; border-bottom: 1px solid #272727; font-weight: bold; font-size: 16px; }
.rl-yt-chat-messages { flex: 1; padding: 15px; overflow-y: auto; font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.rl-yt-chat-messages::-webkit-scrollbar { width: 8px; }
.rl-yt-chat-messages::-webkit-scrollbar-thumb { background: #717171; border-radius: 4px; }
.rl-yt-msg { line-height: 1.4; word-wrap: break-word; }
.rl-yt-msg-time { color: #aaa; font-size: 12px; margin-right: 5px; }
.rl-yt-msg-user { color: #3ea6ff; font-weight: 500; margin-right: 5px; }
.rl-yt-msg-text { color: #f1f1f1; }
.rl-yt-chat-input { display: flex; padding: 15px; border-top: 1px solid #272727; }
.rl-yt-chat-input input { flex: 1; background: #272727; border: none; color: white; padding: 10px 15px; outline: none; border-radius: 20px; font-size: 14px; }
@media (max-width: 768px) {
    .rl-yt-wrapper { flex-direction: column; overflow-y: auto; }
    #rl-video-player { height: 35vh; }
    .rl-yt-chat-section { width: 100%; border-left: none; height: 65vh; }
}