/* A focused room with consistent surfaces, compact tools and readable lists. */
#communityPage{background:#0b1019;color:#e8edf5}
#communityPage>header{max-width:none;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;min-height:72px;background:#0e1520;border-bottom:1px solid #243044;gap:16px}
#communityPage>header>.brand{font-size:22px;justify-self:start}
#communityPage>main{max-width:none;padding:20px 24px 32px}
#communityPage .layout{align-items:start}
#communityPage .layout :is(.watch,.chat,.community-roles){background:#0f1722;border:1px solid #28364a;border-radius:14px}
#communityPage .watch{padding:12px;overflow:visible}
#communityPage .watch .player-controls{margin:0 0 12px;min-height:38px;gap:8px}
#communityPage .watch #creatorLink{background:transparent;border:0;padding:6px 2px;font-weight:700;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#communityPage .watch .player-btn,#communityPage .watch .community-join{border-radius:8px;background:#172231;border-color:#314159;font-weight:600}
#communityPage .watch .video-shell{border-radius:9px;background:#060a10;overflow:hidden}
#communityPage #watchCaption{margin:12px 3px 2px;font-size:12px;color:#9caec5;line-height:1.6}
#communityPage .conversation-column{gap:0}
#communityPage .chat{padding:0;overflow:visible;height:var(--chat-height,680px);min-height:440px}
#communityPage .chat-head{min-height:54px;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #28364a;background:#121b28;border-radius:14px 14px 0 0;position:relative;z-index:8;flex:none}
#communityPage .room-chat-label{white-space:nowrap;font-size:14px;margin-right:auto}
#communityPage .chat-options{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;width:auto}
#communityPage .chat-options label{font-size:11px;color:#9caec5;white-space:nowrap}
#communityPage #chatTextSize{max-width:100px;border-radius:7px;background:#0f1722;border:1px solid #314159;font-size:12px;min-height:30px}
#communityPage .room-social-menu{position:relative;margin:0;font-size:12px}
#communityPage .room-social-menu>summary{padding:5px 8px;color:#b4c3d8;border-radius:6px;list-style:none;white-space:nowrap;min-height:30px;display:flex;align-items:center;gap:6px}
#communityPage .room-social-menu>summary::after{content:'⌄';font-size:13px}
#communityPage .room-social-menu>summary:hover{background:#222f43;color:white}
#communityPage .room-social-links{position:absolute;right:0;top:calc(100% + 8px);width:190px;padding:6px;border:1px solid #34465e;background:#141e2d;border-radius:10px;box-shadow:0 12px 30px #0007;z-index:50}
#communityPage .room-social-links>a{display:flex;align-items:center;gap:10px;padding:9px;border-radius:6px;color:#c6d2e2;font-size:13px}
#communityPage .room-social-links>a:hover{background:#24354c;color:white}
#communityPage .room-social-links>a svg{flex:none}
#communityPage .chat-tabs{padding:4px 10px 0;margin:0;gap:0;border-bottom:1px solid #28364a;flex-wrap:wrap;flex:none}
#communityPage .chat-tabs button{padding:10px 7px;font-size:12px;min-height:40px;color:#a9bad0}
#communityPage .chat-tabs button:hover{color:#fff;background:#182436}
#communityPage .chat-tabs button[aria-selected=true]{color:#fff;border-bottom-color:#ef4444;background:#ef444409}
#communityPage .chat-tabs :is(.community-help-button,.community-settings-button){width:30px;padding:6px}
#communityPage :is(#messages,#modelsChatMessages){flex:1;min-height:0;height:auto;padding:14px;scrollbar-width:thin;scrollbar-color:#394d68 transparent;overscroll-behavior:contain}
#communityPage :is(#messages,#modelsChatMessages) .message{padding-top:7px;padding-bottom:7px}
#communityPage :is(#chat-form,#modelsChatForm){margin:0;padding:12px;border-top:1px solid #28364a;gap:7px;background:#121b28;border-radius:0 0 14px 14px;flex:none;align-items:center}
#communityPage :is(#chat-form,#modelsChatForm) input{margin:0;min-height:42px;border-radius:9px;background:#0c131e;border-color:#32435b}
#communityPage :is(#chat-form,#modelsChatForm)>button{min-height:42px;margin:0;border-radius:9px}
#communityPage :is(#notice,#modelsChatNotice):empty{display:none}
#communityPage #notice:not(:empty){margin:0;padding:8px 14px;font-size:12px}
#communityPage .chat-join-cta{margin:0;padding:15px;border:0;border-top:1px solid #28364a;border-radius:0 0 14px 14px;background:#121b28;flex:none;font-size:13px}
#communityPage .chat>.community-help-panel,#communityPage .chat>:is(#profileEditor,#adminTools,#moderationTools,#communityLeaderboard,#viewersPanel,.auth-tab-panel){padding:18px 14px;min-height:0;overflow:auto;flex:1}
#communityPage .community-roles{padding:12px!important;scrollbar-width:thin;scrollbar-color:#394d68 transparent}
#communityPage .community-roles .community-total{margin:0!important;padding:6px 0 12px;background:#0f1722;top:-12px;font-size:12px;gap:6px;border-bottom:0}
#communityPage .room-member-search{margin:0 0 14px!important;width:100%;padding:9px 10px!important;min-height:36px;background:#0c131e!important;border:1px solid #314159!important;border-radius:8px!important;font-size:12px!important}
#communityPage .community-roles .community-team{margin-top:10px;padding-top:12px;border-color:#26364a}
#communityPage .community-roles .role-directory>summary{font-size:11px;font-weight:700;letter-spacing:.35px;color:#aebed3}
#communityPage .community-roles .directory-count{font-size:10px;background:#25344a;color:#c1cee0}
#communityPage .community-roles .team-members{gap:4px}
#communityPage .community-roles .team-member{border-radius:9px;padding:6px 3px}
#communityPage .community-roles .team-member:hover{background:#182435}
#communityPage .community-roles .team-profile{gap:3px 9px}
#communityPage .community-roles .team-profile strong{font-size:12px}
#communityPage .community-roles .team-title{font-size:10px;color:#a4b3c8}
#communityPage .room-search-hidden{display:none!important}
#communityPage .room-member-empty{padding:10px 0}
#communityPage :is(#roomDivider,#chatHeightDivider,#memberHeightDivider)::after{opacity:0;transition:opacity .15s}
#communityPage :is(#roomDivider,#chatHeightDivider,#memberHeightDivider):hover::after,#communityPage :is(#roomDivider,#chatHeightDivider,#memberHeightDivider):focus-visible::after{opacity:.7}
#communityPage :is(button,a,input,select,summary):focus-visible{outline:2px solid #79b8ff;outline-offset:3px}
@media(min-width:1250px){
 #communityPage:not(.chat-popout):not(.members-popout):not(.video-popout) .layout:not(.has-room-width){grid-template-columns:minmax(0,1.15fr) 12px minmax(420px,1fr) 12px var(--member-width,240px)}
 #communityPage:not(.chat-popout):not(.members-popout):not(.video-popout) .layout>.community-roles{height:var(--member-height,680px)}
}
@media(min-width:801px) and (max-width:1249px){
 #communityPage:not(.chat-popout):not(.members-popout):not(.video-popout) .layout{grid-template-columns:minmax(0,var(--video-width,1fr)) 12px minmax(350px,1fr)}
 #communityPage .layout>.community-roles{grid-column:1/-1;grid-row:2;width:100%;margin:16px 0 0;height:auto;max-height:400px}
 #communityPage .community-roles .team-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
}
@media(max-width:800px){
 #communityPage>header{padding:12px 14px;min-height:62px;flex-wrap:wrap}
 #communityPage>header>.brand{font-size:20px}
 #communityPage>main{padding:12px}
 #communityPage .layout{gap:14px}
 #communityPage .chat{height:var(--chat-height,620px);min-height:440px}
 #communityPage .chat-head{padding:10px;flex-wrap:wrap}
 #communityPage .room-chat-label{font-size:13px}
 #communityPage .chat-options{gap:6px}
 #communityPage .chat-tabs{padding:4px 6px 0}
 #communityPage .chat-tabs button{font-size:12px;padding:9px 6px;min-height:42px}
 #communityPage .watch .player-controls{flex-wrap:wrap}
 #communityPage .watch #creatorLink{max-width:150px}
 #communityPage .community-roles{margin:0!important;max-height:450px;overflow:auto}
 #communityPage .community-roles .team-members{display:flex;flex-direction:column}
}
@media(max-width:420px){#communityPage .room-chat-label{width:100%}#communityPage .chat-options{width:100%;justify-content:space-between}#communityPage .chat-options label{margin-left:auto}#communityPage .account-menu>summary{font-size:12px}#communityPage .brand span{font-size:8px;letter-spacing:1px}}
/* Popout windows keep their dedicated single-panel layout. */
#communityPage.chat-popout .chat{height:calc(100dvh - 96px);min-height:400px}