/* Community windows use the host's controls, surfaces and motion tokens. */
.social-content{min-width:0;overflow-wrap:anywhere}
.social-content form{margin-block:12px}
.social-content fieldset{display:flex;align-items:end;gap:8px;padding:0;border:0;margin:0;min-width:0}
.social-content .field{min-width:0;margin:0 0 16px;gap:6px}
.social-content fieldset>.field{flex:1;margin:0}
.social-content .field>label,.social-content .field>span:first-child:not(.username-editor){font-size:13px;font-weight:700}
.social-content input,.social-content select{width:100%;min-width:0}
.social-content :is(ul,h3){margin:16px 0 0;padding:0;list-style:none}
.social-content h3{font-size:16px}
.social-content :is(li,.social-person){display:flex;align-items:center;gap:8px;padding:12px 0;margin:0;border-bottom:1px solid var(--line)}
.social-content :is(li,.social-person)>span{flex:1;min-width:0}
.social-content :is(li,.social-person):last-child{border-bottom:0}
.social-content small{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:3px}
.social-content p{font-size:14px;line-height:1.5}
.social-content [role=status]:empty{display:none}
.social-code{user-select:text}
.username-editor{display:flex;align-items:center;gap:0;border:1px solid var(--color-border-subtle,#d2d8c7);border-radius:13px;background:var(--color-surface-panel,#fffcf5);padding-inline:13px;min-width:0;box-shadow:0 3px 0 #dce2d1}
.field>.username-editor{font-size:16px;font-weight:400}
.username-editor>span{flex:0 0 auto;user-select:none}
.field .username-editor>input:not([type=radio]):not([type=checkbox]){border:0;box-shadow:none;background:transparent;padding-inline:0;width:100%;min-width:0}
.username-editor:focus-within{outline:2px solid var(--ui-focus);outline-offset:2px}
:is(#app,#modal-root) .username-editor>input:focus-visible{outline:none}
.social-content .community-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 12px}
.social-content .community-tabs::before{width:calc((100% - 8px)/2)}
.social-content .community-tabs>button{min-height:40px;padding:6px 2px;font:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer}
.community-actions{display:flex;justify-content:flex-end;gap:8px}
.presence-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:5px}
.presence-dot.online{background:var(--green)}
.online-password-row,.online-link-row{display:flex;align-items:center;gap:8px;min-width:0}
.online-password-row .room-password{flex:1;min-width:0;font-size:28px;font-weight:750;letter-spacing:.1em;user-select:text;line-height:1.3}
.online-link-row>input{flex:1;min-width:0}
.social-content .icon-btn{flex:0 0 auto}

.social-content .community-tabs>button{display:flex;align-items:center;justify-content:center;white-space:nowrap}
.community-tab-icon{display:none}
@media(max-width:420px){.community-tab-label{display:none}.community-tab-icon{display:flex}.social-content .community-tabs{margin-inline:0}}

/* Fixed controls surround the independently scrollable list. */
#modal-root :is(.community-modal,.lobby-invites-modal)>.modal-body{display:flex;flex-direction:column;overflow:hidden;scrollbar-gutter:auto}
:is(.community-modal,.lobby-invites-modal) .social-content{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}
.social-content .community-tabs,.social-content .community-actions{flex:none;margin:0}
.social-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:auto;background:var(--color-surface-raised,#e3e8d8);border:1px solid var(--line);border-radius:18px;padding:4px 12px;outline-offset:-3px}
.social-list>ul{margin:0}
.social-empty{display:grid;place-content:center;text-align:center;color:var(--muted)}
.social-content [role=status]{flex:none;margin:0}
.online-room-controls{flex:none;min-width:0}
.online-room-controls .field:last-child{margin-bottom:0}
.online-friends{display:flex;flex-direction:column;flex:1;min-height:0;gap:8px}
.social-content .online-friends>h3{margin:0}
@media(orientation:landscape) and (max-height:500px){
 .lobby-invites-modal .social-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px}
 .lobby-invites-modal .online-room-controls{overflow:auto;min-height:0}
 .lobby-invites-modal [data-online-message]{grid-column:1/-1}
 .online-room-controls .field{margin-bottom:8px;gap:4px}
}

:where(:root[data-ui-compact="true"]) .online-password-row .room-password{font-size:24px}

.social-content .online-permission{flex:none;margin:0;padding:4px 0 12px;gap:12px;font-size:14px}
.online-permission>span{flex:1}
.social-content .online-permission input{width:23px;min-width:23px}

.social-content li.community-friend{padding:6px;margin:8px 0;border:1px solid var(--color-border-subtle,#d4ddc7);border-radius:15px;background:var(--color-surface-panel,#fffcf5);gap:6px}
.social-content li.community-friend:last-child{border-bottom:1px solid var(--color-border-subtle,#d4ddc7)}
.community-friend .friend-card{width:100%;min-height:58px;margin:0;padding:4px;border:0;background:transparent;box-shadow:none;gap:10px;font:inherit;transition:background var(--motion-duration-fast,150ms)}
.community-friend:hover{background:var(--color-surface-hover)}
.friend-card>.avatar,.chat-person>.avatar{flex:none;width:40px;height:40px;font-size:20px}
.friend-card>span:last-child{flex:1;text-align:left}
.friend-card strong{font-size:15px;line-height:1.3}
.friend-card small{font-size:13px}
.chat-person{width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;flex:none}
.chat-person>span:last-child{min-width:0}
.chat-tools:not(:has(>button:not([hidden]))){display:none}
#modal-root .chat-modal>.modal-head>[data-chat-refresh]{order:1;flex:none}
.chat-tools{display:flex;gap:8px;justify-content:flex-end;flex:none}
.chat-messages{display:flex;flex-direction:column;gap:8px;padding:12px}
.chat-message{align-self:flex-start;max-width:88%;background:var(--color-surface-panel);border:1px solid var(--line);border-radius:14px;padding:8px 12px;flex:none}
.chat-message.mine{align-self:flex-end;background:var(--color-surface-turn)}
.chat-message p{margin:0;white-space:pre-wrap;user-select:text;overflow-wrap:anywhere}
.chat-message time{display:block;margin-top:4px;font-size:11px;color:var(--muted);text-align:right}
.social-content form.chat-composer{position:relative;margin:0;flex:none;border:1px solid var(--color-border-subtle);border-radius:15px;background:var(--color-surface-panel);box-shadow:0 3px 0 var(--color-border-subtle)}
.social-content .chat-composer [data-chat-editor]{display:block;box-sizing:border-box;width:100%;resize:none;min-height:44px;max-height:min(160px,25dvh);font:inherit;font-size:16px;line-height:1.4;padding:10px 48px 10px 12px;border:0;border-radius:15px;background:transparent;color:var(--ink);box-shadow:none;overflow-y:hidden}
#modal-root .chat-modal .chat-composer>.icon-btn{position:absolute;right:6px;bottom:6px;width:32px;min-width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:10px;background:var(--green);color:var(--color-action-on-primary,#fffdf4);box-shadow:none}
#modal-root .chat-modal .chat-composer>.icon-btn svg{width:18px;height:18px}
[data-chat-error]:empty{display:none}
.chat-tools>[hidden]{display:none!important}

.friend-card small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.friend-profile-identity{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.friend-profile-identity>.avatar{width:64px;height:64px;flex:none;font-size:28px}
.friend-profile-identity>div{min-width:0;overflow-wrap:anywhere}
.friend-profile-identity strong{font-size:20px}
.friend-profile-identity p{margin:4px 0 0;color:var(--muted)}
.friend-profile-account{user-select:text}
.friend-profile-actions{display:flex;flex-wrap:wrap;gap:10px}
.friend-profile-actions>.btn{flex:1;justify-content:center;gap:6px;text-align:center;min-width:0;padding-inline:10px}
.friend-profile-modal [data-profile-message]{margin-bottom:0}

.community-header-actions{display:flex;align-items:center;gap:8px;flex:none}
#modal-root .community-modal:not(.chat-modal)>.modal-head{gap:8px}
#modal-root .community-modal:not(.chat-modal)>.modal-head h2{font-size:clamp(20px,6vw,24px);overflow-wrap:normal}

.chat-date{align-self:center;flex:none;margin:6px 0;padding:4px 10px;border-radius:999px;background:var(--paper);color:var(--muted);font-size:12px;line-height:1.3}
.chat-invitation{display:grid;gap:8px;min-width:0;width:min(100%,260px)}
.chat-invitation-heading{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.chat-invitation-heading svg{width:18px;height:18px;flex:none}
.chat-invitation strong{overflow-wrap:anywhere}
.chat-invitation .btn{width:100%;min-width:0}
.chat-invitation-state{font-size:13px;color:var(--muted)}
.chat-add-friend{align-self:flex-start;flex:none}

.chat-add-friend[hidden]{display:none!important}

.chat-contact-row{display:flex;align-items:center;gap:8px;min-width:0;flex:none}
.chat-contact-row>.chat-person{flex:1;min-width:0;width:auto}
.chat-contact-row>.chat-add-friend{flex:none;align-self:center;padding:8px;min-height:40px;font-size:13px;gap:5px;box-shadow:none}
.chat-add-friend svg{width:18px;height:18px}
.chat-invitation-actions{display:flex;align-items:stretch;gap:8px}
.chat-invitation-actions>.btn{flex:1;width:auto;padding:10px 8px;gap:5px;font-size:13px}
.chat-invitation-room{font-size:13px;color:var(--muted);overflow-wrap:anywhere}

.chat-notifications{position:fixed;z-index:1200;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 24px));display:grid;gap:8px;pointer-events:none}
.chat-notification{display:flex;align-items:center;gap:8px;padding:10px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 24px #172d3533;pointer-events:auto}
.chat-notification-open{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;padding:0;background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.chat-notification-open>.avatar{width:40px;height:40px;flex:none}
.chat-notification-open>span{min-width:0}
.chat-notification-open strong{display:block;font-size:14px}
.chat-notification-open>span>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4;color:var(--muted)}
.chat-notification>.icon-btn{width:36px;min-width:36px;height:36px;padding:0;border:0;flex:none}
.chat-notification>.icon-btn svg{width:18px;height:18px}

#modal-root .chat-invitation-actions>.chat-invitation-decline{flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;background:var(--ui-danger);color:#fff;border-color:var(--ui-danger)}
.chat-invitation-actions>.btn{min-height:44px}

/* Conversation identity replaces the title; only the message area scrolls. */
#modal-root .chat-modal>.modal-head{gap:10px;min-width:0}
#modal-root .chat-modal>.modal-head>.chat-header-person{flex:1;min-width:0;margin:0}
.chat-header-person{gap:8px}
.chat-header-person strong{display:block;font-size:16px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-header-person small{display:block;font-size:12px;line-height:1.25;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.chat-header-person .avatar,.room-chat-game>.pack-art{flex:none;width:38px;height:38px;min-width:38px;border-radius:11px;overflow:hidden}
.room-chat-game>.pack-art svg{display:block;width:100%;height:100%}
.chat-scroll-zone{position:relative;display:flex;flex:1;min-height:0;min-width:0}
.chat-scroll-zone>.chat-messages{margin:0;width:100%}
.chat-add-banner{position:absolute;top:8px;left:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;min-height:32px;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:12px;background:var(--color-surface-panel);color:var(--green);box-shadow:0 2px 6px #0002}
.chat-add-banner svg{width:16px;height:16px}.chat-add-banner[hidden]{display:none!important}
.chat-scroll-zone:has(.chat-add-banner:not([hidden]))>.chat-messages{scroll-padding-top:48px}
.room-chat-author{display:flex;align-items:center;gap:6px;margin-bottom:5px;min-width:0}.room-chat-author .avatar{width:22px;height:22px;font-size:12px;flex:none}.room-chat-author strong{font-size:12px;overflow-wrap:anywhere}
.room-chat-older{position:absolute;top:8px;right:8px;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;z-index:2}.room-chat-older[hidden]{display:none!important}
.room-chat-tabs{flex:none!important;width:100%;margin:0!important}.room-chat-tabs[hidden]{display:none!important}.room-chat-tabs>button{flex:1;min-height:42px;font-size:15px}
[data-room-chat-content] .chat-messages,[data-room-chat-content] .chat-message{transition:background-color .25s,border-color .25s}
[data-room-chat-content][data-channel=team] .chat-messages{background:color-mix(in srgb,var(--room-team-color) 10%,var(--color-surface-panel));border-color:color-mix(in srgb,var(--room-team-color) 35%,var(--line))}
[data-room-chat-content][data-channel=team] .chat-message{background:color-mix(in srgb,var(--room-team-color) 20%,var(--color-surface-panel));border-color:color-mix(in srgb,var(--room-team-color) 40%,var(--line))}
#modal-root [data-room-chat-content] .room-chat-tabs::before{transition:transform .25s,background-color .25s;background:var(--color-surface-raised)}
#modal-root [data-room-chat-content][data-channel=team] .room-chat-tabs::before{background:color-mix(in srgb,var(--room-team-color) 40%,var(--color-surface-panel))}
.chat-message .message-receipt{display:inline-flex;vertical-align:middle;margin-right:5px;color:var(--muted)}.message-receipt svg{width:16px;height:12px}.chat-message .message-receipt.is-read{color:var(--color-interaction-target)}
@media(prefers-reduced-motion:reduce){#modal-root [data-room-chat-content] .room-chat-tabs::before,[data-room-chat-content] .chat-message,[data-room-chat-content] .chat-messages{transition:none}}
#modal-root .room-chat-modal>.modal-head>[data-room-chat-refresh]{order:1;flex:none}

/* Paired invitation actions have identical face height and bottom depth. */
#modal-root .chat-invitation-actions>:is(.btn,.icon-btn){height:44px;min-height:44px;max-height:44px;box-sizing:border-box;align-self:center;box-shadow:0 3px 0 color-mix(in srgb,var(--green),black 25%)}
#modal-root .chat-invitation-actions>.chat-invitation-decline{box-shadow:0 3px 0 color-mix(in srgb,var(--ui-danger),black 25%)}
.group-avatar{display:inline-grid;place-items:center;width:38px;height:38px;min-width:38px;border-radius:12px;background:var(--color-surface-tile-blue);color:var(--ink);flex:none}.group-avatar svg{width:24px;height:24px}
.group-card>span:last-child{flex:1;min-width:0}.group-card strong{display:block;overflow-wrap:anywhere}.group-profile-identity>.group-avatar{width:56px;height:56px}.group-profile-identity>span:last-child{min-width:0}
.group-profile-identity strong{font-size:20px}.group-profile-modal .social-list ul{margin:0}
#modal-root .community-tabs::before{width:calc((100% - 8px)/2)}

#modal-root .community-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}

:where(:root[data-ui-compact="true"]) .friend-profile-actions>.btn{font-size:13px;padding-inline:8px;white-space:nowrap}:where(:root[data-ui-compact="true"]) .friend-profile-actions>.btn svg{width:18px;height:18px}

.group-create-row{padding-top:4px}.group-create-row>.btn{min-height:44px;font-size:14px;width:100%}

.friend-profile-play{flex:none}.friend-profile-play>.btn{min-height:44px;padding:10px 16px;font-size:14px}

.community-navigation{display:flex;align-items:center;gap:10px;flex:none}.community-navigation>.community-tabs{flex:1;min-width:0}.community-navigation>.icon-btn{flex:none}
.community-order-tools{display:flex;align-items:center;gap:4px}.community-order-tools .icon-btn{width:32px;min-width:32px;height:36px;min-height:36px;padding:5px}.community-order-tools .icon-btn svg{width:18px;height:18px}.community-drag-handle{cursor:grab;touch-action:none;padding:8px 4px;font-size:22px}.community-friend.is-ordering{gap:5px}.community-friend.is-ordering>.friend-card:disabled{opacity:1}.community-friend.is-dragging{opacity:.55}.community-friend.is-ordering>.friend-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.community-friend.is-ordering>.friend-card{pointer-events:none}#modal-root .community-order-tools .icon-btn{width:34px;min-width:34px;height:36px;min-height:36px;padding:4px}.community-drag-handle{-webkit-user-drag:none}

:where(:root[data-ui-compact="true"]) #modal-root .community-modal:has([data-community-content])>.modal-head{gap:4px}:where(:root[data-ui-compact="true"]) #modal-root .community-modal:has([data-community-content])>.modal-head h2{font-size:18px;min-width:0}:where(:root[data-ui-compact="true"]) #modal-root .community-modal:has([data-community-content]) .community-header-actions{gap:4px}:where(:root[data-ui-compact="true"]) #modal-root .community-modal:has([data-community-content]) .community-header-actions .icon-btn{width:36px;min-width:36px;height:40px;min-height:40px;padding:7px}

.profile-icon-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:none}.profile-icon-actions>:first-child{margin-right:auto}#modal-root .profile-icon-actions .profile-play{background:var(--green);color:var(--color-action-on-primary,var(--paper))}

.community-header-actions [hidden]{display:none!important}

/* Shared unread counters. Avatar size and list geometry stay unchanged. */
.chat-avatar{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}
.chat-badged-button{position:relative;overflow:visible}
.chat-counter{position:absolute;z-index:3;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--color-action-primary,#376c55);color:var(--color-action-on-primary,#fff);font-size:11px;font-weight:700;line-height:1;border:1.5px solid var(--color-surface-panel);pointer-events:none;font-variant-numeric:tabular-nums}
.topbar .chat-counter-messages{top:0;right:0}
.chat-counter-invitations{top:auto;bottom:-7px;left:50%;right:auto;transform:translateX(-50%);gap:2px;white-space:nowrap;background:var(--color-surface-tile-blue,#c5dade);color:var(--ink)}
.chat-counter-invitations svg{width:12px!important;height:12px!important}
.chat-counter-team{top:auto;bottom:-5px;background:var(--chat-team-color,#668fad)}
.chat-unread{display:flex;align-items:center;gap:8px;width:100%;font-size:12px;color:var(--muted);margin:10px 0;white-space:nowrap}
.chat-unread:before,.chat-unread:after{content:'';height:1px;background:var(--line);flex:1}
.chat-messages{overflow-anchor:none}
.chat-header-person .chat-avatar{overflow:visible}

.friend-card>.chat-avatar>.avatar{width:40px;height:40px;font-size:20px}.room-chat-game .chat-avatar>.pack-art{width:38px;height:38px;min-width:38px;border-radius:11px;overflow:hidden}

.chat-composer textarea[hidden]{display:none}
.chat-composer [data-chat-editor]{white-space:pre-wrap;overflow-wrap:anywhere;overflow-y:auto;outline:none}
.chat-composer [data-chat-editor]:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}
.chat-composer:focus-within{border-color:var(--green)}

.online-password-row{gap:4px;min-height:44px}
.online-password-row .room-password{min-width:6.4ch;font-family:ui-monospace,monospace;letter-spacing:.03em;white-space:nowrap}
.online-password-row>.icon-btn{width:44px;min-width:44px;height:44px;flex:none}
:where(:root[data-ui-compact="true"]) .online-password-row .room-password{font-size:22px}
/* Compact online entry: one action per row; only available rooms scroll. */
.lobby-incoming-modal [data-lobby-join-code]{flex:none;margin:0}
.lobby-incoming-modal [data-lobby-join-code] fieldset{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;border:0;padding:0;margin:0;min-width:0}
.lobby-incoming-modal [data-lobby-join-code] input{min-width:0;width:100%;margin:0}
.lobby-incoming-modal [data-lobby-join-code] .btn{width:auto;white-space:nowrap}
.lobby-incoming-modal h3{flex:none;font-size:16px;margin:4px 0}
.lobby-incoming-modal .incoming-rooms{flex:1;min-height:96px;margin:0}
.incoming-room{display:flex;align-items:center;gap:12px}.incoming-room-meta{flex:1;min-width:0}.incoming-room-meta strong,.incoming-room-meta small{display:block;overflow-wrap:anywhere}.incoming-room-meta small{color:var(--muted);font-size:12px}
.social-content .incoming-room>.btn{flex:none;width:auto;white-space:nowrap}.incoming-empty{color:var(--muted)}
#modal-root .chat-scroll-zone:has(.chat-add-banner:not([hidden]))>.chat-messages{padding-top:56px}
.online-connecting-modal [hidden]{display:none!important}

#modal-root .lobby-incoming-modal .modal-head>[data-lobby-online=manual]{order:1}
.lobby-incoming-modal .social-content{display:flex;flex-direction:column;gap:12px;min-height:0}
.lobby-incoming-modal .incoming-code{margin:0;min-width:0}
.lobby-incoming-modal .incoming-rooms{max-height:min(42dvh,360px)}

.room-password-entry{position:relative;display:block;width:100%;min-width:0;direction:ltr}
.room-password-entry input[data-room-password-input]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:text;font-size:24px}
.room-password-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;pointer-events:none}
.room-password-cell{display:flex;align-items:center;justify-content:center;min-width:0;height:clamp(44px,12vw,62px);border:1px solid var(--line,var(--muted));border-radius:12px;background:var(--panel,var(--surface));font-family:ui-monospace,monospace;font-size:28px;font-weight:750;line-height:1.3;box-shadow:0 3px 0 color-mix(in srgb,currentColor 12%,transparent)}
.room-password-entry:focus-within .room-password-cell.is-current{outline:2px solid var(--green);outline-offset:2px}
.room-password-entry:focus-within .room-password-cell.is-selected{background:color-mix(in srgb,var(--green) 30%,transparent);outline:1px solid var(--green)}
:where(:root[data-ui-compact="true"]) .room-password-cells{gap:6px}:where(:root[data-ui-compact="true"]) .room-password-cell{font-size:22px;border-radius:10px}

#modal-root .modal.online-password-modal{padding-block:10px}
#modal-root .modal.online-password-modal>.modal-head{padding-block:6px 10px}
#modal-root .modal.online-password-modal>.modal-body{padding-block:0 8px}
.online-password-modal [data-room-password]>.field{width:100%;max-width:352px;margin:4px auto 12px;gap:6px}
.room-password-entry{max-width:352px;margin-inline:auto}
.online-password-modal [data-password-message]:empty{display:none}

.social-content .field>.room-number-editor{font-size:16px;font-weight:400}

/* Off-screen game invitations and explicit scroll-to-bottom stay inside the timeline. */
#modal-root .chat-scroll-bubble{position:absolute;z-index:3;width:38px;min-width:38px;height:38px;min-height:38px;padding:7px;border:1px solid var(--line);border-radius:50%;background:var(--color-surface-raised);color:var(--ink);box-shadow:0 2px 6px #0004;display:grid;place-items:center;cursor:pointer}
#modal-root .chat-scroll-bubble[hidden]{display:none!important}
.chat-scroll-bubble svg{width:23px;height:23px}.chat-scroll-up{top:6px;left:calc(50% - 19px)}.chat-scroll-down{bottom:6px;left:calc(50% - 19px)}.chat-scroll-latest{bottom:8px;right:8px;font-size:17px}
.chat-messages{overflow-anchor:none}

.lobby-seat-row:not(:has(.slot-edit)){grid-template-columns:minmax(0,1fr)}
.lobby-observer>.chat-person{width:100%;text-align:left;min-width:0}

.friend-profile-actions.participant-profile-actions{justify-content:flex-start;gap:10px}.friend-profile-actions.participant-profile-actions>button{margin:0}

.connection-method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5em;padding:.4em 0}.connection-method>span{min-width:0;overflow-wrap:anywhere}.connection-method>span:last-child{display:flex;justify-content:flex-end;text-align:right;align-items:center;gap:.3em}.connection-success{display:flex;align-items:center;gap:.5em;color:var(--accent)}.connection-method svg,.connection-success svg{width:1.2em;height:1.2em;flex-shrink:0}