/* YouTube-style app bar, navigation, video shelf and inline watch page. */
:root[data-ui-style="youtube"]{--social-bg:#fff;--social-card:#fff;--social-accent:#c00;--site-head:var(--social-card);--site-chat:var(--social-bg);--site-text:var(--social-text)}
:root[data-ui-style="youtube"][data-theme="dark"]{--social-bg:#0f0f0f;--social-card:#0f0f0f;--social-text:#f1f1f1;--social-line:#303030}
:root[data-ui-style="youtube"] #socialTopbar{border:0;height:60px;padding:8px 22px;gap:14px}
:root[data-ui-style="youtube"] #socialTopbar .social-brand{font-size:23px;letter-spacing:-1px;color:var(--social-text);display:flex;align-items:center;gap:6px}
:root[data-ui-style="youtube"] #socialTopbar .social-brand:before{content:'▶';display:grid;place-items:center;background:#f03;color:#fff;font-size:14px;width:32px;height:23px;border-radius:7px;flex:none}
:root[data-ui-style="youtube"] #socialTopbar form{margin:0 auto;max-width:680px}
:root[data-ui-style="youtube"] #socialTopbar input{background:var(--social-card);font-size:16px;border-color:var(--social-line);padding:10px 20px}
:root[data-ui-style="youtube"] .social-top-nav{display:none}
:root[data-ui-style="youtube"] :is(.social-top-create,.social-top-notifications){border:0;background:none;color:var(--social-text);font-size:24px;min-width:40px;min-height:40px;border-radius:50%}
:root[data-ui-style="youtube"] #socialAccount{background:none;border:1px solid var(--social-line);border-radius:22px;color:#065fd4;font-weight:600;white-space:nowrap}
:root[data-ui-style="youtube"] #rail{background:var(--social-bg);border:0;padding:12px}
:root[data-ui-style="youtube"] #rail>nav{margin-top:0;gap:0}
:root[data-ui-style="youtube"] #rail .nav{display:flex;align-items:center;gap:18px;font-size:14px;font-weight:500;min-height:44px;border-radius:10px;padding:10px 12px}
:root[data-ui-style="youtube"] #rail .nav.active{color:var(--social-text);background:var(--social-line);font-weight:700}
:root[data-ui-style="youtube"] #rail .service-menu-group{background:none;border:0;border-bottom:1px solid var(--social-line);border-radius:0;margin-top:12px}
:root[data-ui-style="youtube"] #rail :is(summary,.service-link){color:var(--social-text);background:none;border:0;box-shadow:none;font-size:14px}
:root[data-ui-style="youtube"] #rail .service-link{border-radius:10px;min-height:42px}
:root[data-ui-style="youtube"] #rail .service-link:hover{background:var(--social-line)}
:root[data-ui-style="youtube"] .social-home{padding:12px 26px 32px}
:root[data-ui-style="youtube"] .social-feed-heading{display:none}
:root[data-ui-style="youtube"] .social-feed-scopes{display:flex;gap:12px;margin:0 0 24px;overflow-x:auto;white-space:nowrap;padding:4px 0}
:root[data-ui-style="youtube"] .social-feed-scopes button{border:0;border-radius:8px;background:var(--social-line);color:var(--social-text);padding:8px 14px;min-height:34px}
:root[data-ui-style="youtube"] .social-feed-scopes button.selected{background:var(--social-text);color:var(--social-bg)}
:root[data-ui-style="youtube"] #blogPosts{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:32px 20px}
:root[data-ui-style="youtube"] .social-play{opacity:0;transition:opacity .15s}
:root[data-ui-style="youtube"] .social-video-open:hover .social-play{opacity:1}
:root[data-ui-style="youtube"] .social-video-card .social-channel-link{color:var(--social-muted);font-weight:400;font-size:14px}
:root[data-ui-style="youtube"] .social-video-card small{font-size:12px}
:root[data-ui-style="youtube"][data-social-watch="true"] #app{grid-template-columns:200px minmax(0,1fr) 320px}
:root[data-ui-style="youtube"][data-social-watch="true"] #chat{grid-column:2;overflow-y:auto;display:block;min-height:0;padding:0 24px 20px;background:var(--social-bg)}
:root[data-ui-style="youtube"][data-social-watch="true"] #listPane{grid-column:3;border:0;background:var(--social-bg)}
:root[data-ui-style="youtube"][data-social-watch="true"] #chat .chat-head{position:sticky;top:0;z-index:2;background:var(--social-bg);border:0;color:var(--social-text);min-height:52px;height:auto}
#youtubeWatch{color:var(--social-text);padding-top:8px}
.youtube-player{width:100%;aspect-ratio:16/9;max-height:70dvh;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:#000}
.youtube-player video{width:100%;height:100%;max-height:70dvh;object-fit:contain}
#youtubeWatch h1{font-size:20px;line-height:1.4;margin:14px 0 10px;overflow-wrap:anywhere}
.youtube-watch-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.youtube-watch-actions .social-channel-link{margin-right:auto;font-size:16px}
.youtube-watch-actions .secondary{border:0;border-radius:20px;color:var(--social-text);background:var(--social-line);min-height:40px}
.youtube-watch-actions #youtubeWatchJoin{background:var(--social-text);color:var(--social-bg)}
.youtube-description{border-radius:12px;padding:14px;background:var(--social-line);font-size:14px;line-height:1.5;white-space:pre-wrap}
.youtube-description small{display:block;margin-top:8px;color:var(--social-muted)}
#youtubeWatch h2{font-size:18px;margin:24px 0 12px}
:root[data-ui-style="youtube"][data-social-watch="true"] #messageScroll{overflow:visible;flex:none;min-height:0}
:root[data-ui-style="youtube"][data-social-watch="true"] .messages{padding:10px 0;gap:16px}
:root[data-ui-style="youtube"][data-social-watch="true"] .bubble{background:none!important;border:0;color:var(--social-text);box-shadow:none;padding:6px 0;border-radius:0}
:root[data-ui-style="youtube"][data-social-watch="true"] .bubble-wrap{max-width:100%;width:100%;align-self:flex-start}
:root[data-ui-style="youtube"][data-social-watch="true"] .composer-wrap{position:sticky;bottom:0;background:var(--social-bg);border-top:1px solid var(--social-line);padding:12px 0}
:root[data-ui-style="youtube"] :is(.modal-box,.panel){background:var(--social-card);color:var(--social-text);border-color:var(--social-line);border-radius:12px}
:root[data-ui-style="youtube"] .modal-box :is(p,label,h2,h3){color:var(--social-text)}
:root[data-ui-style="youtube"] .modal-box :is(input,select,textarea){background:var(--social-bg);color:var(--social-text);border-color:var(--social-line)}
@media(max-width:1100px){:root[data-ui-style="youtube"][data-social-watch="true"] #app{grid-template-columns:180px minmax(0,1fr)}:root[data-ui-style="youtube"][data-social-watch="true"] #listPane{display:none}}
@media(max-width:720px){
 :root[data-ui-style="youtube"] #socialTopbar{padding:8px;height:auto;gap:6px}
 :root[data-ui-style="youtube"] #socialTopbar .social-brand{font-size:20px}
 :root[data-ui-style="youtube"] .social-top-notifications{display:none}
 :root[data-ui-style="youtube"] #socialTopbar form{order:4;flex-basis:100%}
 :root[data-ui-style="youtube"] .social-home{padding:10px 0}
 :root[data-ui-style="youtube"] .social-feed-scopes{padding:4px 12px;margin-bottom:16px}
 :root[data-ui-style="youtube"] #blogPosts{grid-template-columns:minmax(0,1fr);gap:24px}
 :root[data-ui-style="youtube"] .social-video-thumbnail{border-radius:0}
 :root[data-ui-style="youtube"] .social-video-title,:root[data-ui-style="youtube"] .social-video-card>.social-channel-link,:root[data-ui-style="youtube"] .social-video-card>small{margin-inline:12px}
 :root[data-ui-style="youtube"][data-social-watch="true"] #app{grid-template-columns:minmax(0,1fr)}
 :root[data-ui-style="youtube"][data-social-watch="true"] #chat{grid-column:1;padding:0 12px 12px;height:100%}
 .youtube-player{border-radius:0;margin-inline:-12px;width:calc(100% + 24px)}
 #youtubeWatch h1{font-size:18px}
 .youtube-watch-actions{gap:8px}
 .youtube-watch-actions .secondary{font-size:12px}
}
/* Every space opens as a playlist, not a chat album. */
:root[data-ui-style="youtube"][data-space-presentation="playlist"] #app{grid-template-columns:200px minmax(0,1fr)}
:root[data-ui-style="youtube"][data-space-presentation="playlist"] #listPane{display:none}
:root[data-ui-style="youtube"][data-space-presentation="playlist"] #chat{grid-column:2;display:flex;flex-direction:column;background:var(--social-bg);min-height:0}
:root[data-ui-style="youtube"] #spacePresentationTabs{display:flex;gap:20px;flex:none;padding:0 24px;border-bottom:1px solid var(--social-line);overflow-x:auto;white-space:nowrap}
#spacePresentationTabs button{border:0;background:none;color:var(--social-muted);padding:14px 4px;min-height:44px;font-size:14px;font-weight:600;border-bottom:3px solid transparent}
#spacePresentationTabs button.selected{color:var(--social-text);border-bottom-color:var(--social-text)}
:root[data-ui-style="youtube"] .chat-head{background:var(--social-bg);color:var(--social-text);border-color:var(--social-line)}
.youtube-space-playlist{background:var(--social-bg);color:var(--social-text);min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px;flex:1}
.playlist-heading h2{font-size:24px;line-height:1.3;margin:0 0 6px;overflow-wrap:anywhere}
.playlist-heading p{font-size:13px;color:var(--social-muted);margin:0 0 20px}
.playlist-items{display:grid;gap:4px}
.playlist-item{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px;min-width:0}
.playlist-item:hover,.playlist-item.current{background:var(--social-line)}
.playlist-index{font-size:13px;color:var(--social-muted);min-width:22px;text-align:center;flex:none}
.playlist-open{display:flex;align-items:flex-start;gap:16px;flex:1;min-width:0;text-align:left;border:0;background:none;color:inherit;padding:0}
.playlist-thumb{flex:none;width:180px;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:var(--social-line)}
.playlist-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.playlist-placeholder{height:100%;display:grid;place-items:center;font-size:28px}
.playlist-meta{min-width:0;padding:4px 0}
.playlist-meta strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:1.4;font-weight:600}
.playlist-meta small{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:var(--social-muted);overflow-wrap:anywhere}
.playlist-more{flex:none;width:36px;height:44px;background:none;border:0;color:inherit;font-size:24px;border-radius:20px}
.playlist-empty{padding:18px;font-size:14px;color:var(--social-muted)}
:root[data-ui-style="youtube"][data-space-presentation="playlist"] #chat>:is(#messageScroll,.composer-wrap,.pinned-message,.moderate){display:none}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #chat>:is(#messageScroll,.composer-wrap,.pinned-message,.moderate){display:none}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #youtubeWatch>h2{display:none}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #listPane>:not(#youtubeSpacePlaylist){display:none}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #listPane .youtube-space-playlist{height:100%;padding:16px 8px}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #listPane .playlist-heading h2{font-size:17px}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #listPane .playlist-thumb{width:110px}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #listPane .playlist-meta strong{font-size:13px}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #listPane .playlist-item{gap:4px;padding:8px 2px}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #listPane .playlist-open{gap:8px}
:root[data-ui-style="youtube"][data-space-presentation="watch"] #listPane .playlist-index{display:none}
:root[data-ui-style="youtube"][data-space-presentation="discussion"] #chat{display:flex;padding:0;overflow:hidden;grid-column:3}
:root[data-ui-style="youtube"][data-space-presentation="discussion"] #app{grid-template-columns:200px 280px minmax(0,1fr)}
:root[data-ui-style="youtube"][data-space-presentation="discussion"] #listPane{display:block;grid-column:2}
:root[data-ui-style="youtube"][data-space-presentation="discussion"] :is(#youtubeWatch,#youtubeSpacePlaylist){display:none}
:root[data-ui-style="youtube"][data-space-presentation="discussion"] #messageScroll{overflow-y:auto;flex:1;min-height:0}
:root[data-ui-style="youtube"][data-space-presentation="discussion"] .bubble{background:var(--social-line)!important;color:var(--social-text);border:0;border-radius:10px}
@media(max-width:1100px){:root[data-ui-style="youtube"][data-space-presentation="watch"] #chat>.youtube-space-playlist{display:block}}
@media(max-width:720px){
 :root[data-ui-style="youtube"][data-space-presentation="playlist"] #app,:root[data-ui-style="youtube"][data-space-presentation="discussion"] #app{grid-template-columns:minmax(0,1fr)}
 :root[data-ui-style="youtube"][data-space-presentation="playlist"] #chat,:root[data-ui-style="youtube"][data-space-presentation="discussion"] #chat{grid-column:1;height:100%}
 :root[data-ui-style="youtube"][data-space-presentation="discussion"] #listPane{display:none}
 :root[data-ui-style="youtube"] #spacePresentationTabs{padding:0 12px;gap:16px}
 .youtube-space-playlist{padding:18px 8px}
 .playlist-heading{padding:0 8px}
 .playlist-heading h2{font-size:21px}
 .playlist-item{padding:8px 0;gap:4px}
 .playlist-index{min-width:18px;font-size:11px}
 .playlist-thumb{width:120px}
 .playlist-open{gap:10px}
 .playlist-meta strong{font-size:14px}
 .playlist-meta small{font-size:11px}
 .playlist-more{width:28px}
}
:root[data-ui-style="youtube"] :is(.user-profile-card,.wallet-summary,.storage-list,.service-card-grid,.community-grid,.community-line){color:var(--social-text)}
:root[data-ui-style="youtube"] .service-card-grid .service-link{background:var(--social-bg);color:var(--social-text);border:1px solid var(--social-line);border-radius:12px;padding:12px}
:root[data-ui-style="youtube"] .modal-box .secondary{background:var(--social-line);color:var(--social-text);border:0;border-radius:22px;font-size:14px;padding:10px 14px;min-height:40px}
:root[data-ui-style="youtube"] .modal-box .primary{background:var(--social-text);color:var(--social-bg);border:0;border-radius:22px;min-height:40px}
:root[data-ui-style="youtube"] .detail-tabs button{background:none;color:var(--social-muted);border:0;border-radius:0;border-bottom:3px solid transparent}
:root[data-ui-style="youtube"] .detail-tabs button.active{color:var(--social-text);border-bottom-color:var(--social-text)}