/* Independent right-hand community drawer. */
.header-community-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}.header-community-tools #connection{margin:0;white-space:nowrap}
#communityMenuButton{position:relative;display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;flex:0 0 39px;padding:9px;border:1px solid var(--line);background:var(--input);color:var(--accent);border-radius:12px}
#communityMenuButton[aria-expanded="true"]{background:#9580f020;border-color:var(--accent)}
#communityUnread{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--panel);border-radius:20px;background:var(--button);color:white;font-size:9px;font-weight:750}
#communityDrawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(430px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-left:1px solid var(--line);border-radius:22px 0 0 22px;padding:0;background:var(--panel);box-shadow:-20px 0 80px #0005;overflow:hidden;overscroll-behavior:contain}
#communityDrawer[open]{display:flex;flex-direction:column}
#communityDrawer::backdrop{background:#080b14a6;backdrop-filter:none}
#communityDrawer .community-drawer-header{display:flex;align-items:flex-start;gap:12px;margin:0;padding:calc(27px + env(safe-area-inset-top)) 25px 22px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#9580f00d,transparent)}
.community-drawer-header>div{flex:1;min-width:0}.community-kicker{font-size:9px;letter-spacing:1.8px;font-weight:750;color:var(--accent)}
#communityDrawerTitle{font-size:26px;letter-spacing:-.8px;margin:8px 0}.community-drawer-header p{font-size:12px;line-height:1.65;color:var(--muted);margin:0}
#closeCommunityDrawer{display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;padding:8px;border:1px solid var(--line);border-radius:11px;background:var(--input);color:var(--muted)}
#communitySections{display:flex;flex-shrink:0;gap:7px;overflow-x:auto;padding:17px 23px;border-bottom:1px solid var(--line)}
#communitySections .community-section{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;white-space:nowrap;padding:10px 13px;border:1px solid transparent;border-radius:11px;font-size:12px;background:transparent;color:var(--muted)}
#communitySections .community-section[aria-current="page"]{border-color:#9580f02d;background:#9580f014;color:var(--accent)}
.community-section-count{display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:7px;background:#9580f018;font-size:10px}
.community-content{flex:1;min-height:0;overflow-y:auto;padding:24px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain}
.community-section-heading{margin-bottom:22px}.community-section-heading h3{margin:9px 0 8px;font-size:19px;letter-spacing:-.4px}.community-section-heading p{color:var(--muted);font-size:12px;line-height:1.7;margin:0}
.community-announcement{border:1px solid var(--line);border-radius:16px;background:var(--input);padding:17px;margin-bottom:13px;overflow-wrap:anywhere}
.community-announcement-title{display:flex;align-items:center;gap:9px}.community-announcement-title strong{font-size:12px;flex:1}.community-announcement-title>small{font-size:8px;letter-spacing:.7px;color:var(--accent);border:1px solid #9580f030;padding:4px 5px;border-radius:6px}
.community-announcement-mark{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;background:#9580f014;color:var(--accent);border-radius:9px}.community-announcement-mark svg{width:16px;height:16px}
.community-announcement-body{font-size:13px;line-height:1.85;white-space:pre-wrap;margin:15px 0 0}.community-announcement-expiry{display:flex;align-items:center;gap:6px;margin:17px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.community-announcement-expiry svg{width:13px;height:13px;flex-basis:13px}
.community-announcements-empty{display:grid;justify-items:center;gap:12px;text-align:center;border:1px dashed var(--line);border-radius:17px;padding:35px 21px;color:var(--muted)}.community-announcements-empty>svg{width:44px;height:44px;padding:10px;border-radius:13px;background:#9580f014;color:var(--accent)}.community-announcements-empty strong{color:var(--text);font-size:15px}.community-announcements-empty p{margin:0;font-size:12px;line-height:1.8}
.community-drawer-footer{flex-shrink:0;padding:16px 24px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
#manageCommunityAnnouncements{width:100%;padding:11px;border:1px solid var(--line);font-size:12px;color:var(--accent);background:var(--input)}.community-drawer-footer>p{margin:12px 0 0;text-align:center;font-size:10px;line-height:1.7;color:var(--muted)}
#communityDrawer button:focus:not(:focus-visible),#communityMenuButton:focus:not(:focus-visible){outline:none;box-shadow:none}#communityDrawer button:focus-visible,#communityMenuButton:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:560px){.header-community-tools{gap:7px}#communityMenuButton{width:35px;height:35px;flex-basis:35px;padding:8px}.chat-header>.chat-room-emblem{display:none}.chat-header>div:not(.header-community-tools){min-width:0;flex:1}.chat-header h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-header p{max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-header #privateRoomDetails:not([hidden]){order:5;flex-basis:100%;font-size:10px}.chat-header:has(#privateRoomDetails:not([hidden])){flex-wrap:wrap}#communityDrawer{width:min(400px,calc(100vw - 15px));border-radius:18px 0 0 18px}#communityDrawer .community-drawer-header{padding-left:20px;padding-right:18px}.community-content{padding:20px}#communitySections{padding:15px 18px}}

#communityDrawer:focus{outline:none}
