/* Conversation workspace. Scoped to the app so public pages keep their own layout. */
.app-body[data-theme=light]{--bg:#f2f4f8;--surface:#fff;--surface-2:#f5f6fa;--surface-3:#eaeefb;--text:#242b40;--muted:#6e778c;--line:#e5e8f0;--accent:#5856d6;--accent-strong:#4543b8;--teal:#5856d6;--chat-bg:#f5f6fa;--own-bubble:#eeedff;--shadow:0 18px 60px #18223d18;--soft-shadow:0 3px 12px #18223d05}
.app-body[data-theme=dark]{--bg:#111521;--surface:#191f2f;--surface-2:#1e2638;--surface-3:#2c3153;--text:#eef0fa;--muted:#a0abc1;--line:#2b3449;--accent:#aaa8ff;--accent-strong:#c2c0ff;--teal:#aaa8ff;--chat-bg:#141a29;--own-bubble:#2c2d50;--shadow:0 18px 60px #0005;--soft-shadow:none}
.app-body{font-size:14px;--workspace-radius:12px}
.app-body button:active{transform:none}
.app-body .button{border-radius:10px;box-shadow:none;font-size:.82rem}
.app-body[data-theme=dark] .button:not(.secondary):not(.ghost){color:#181b31}
.app-body .icon-button{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);width:36px;height:36px;display:grid;place-items:center;flex:none}
.app-body :is(.main-area,.sidebar,.people-panel){scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.app-body .shell,.app-body:not(.show-panel) .shell{grid-template-columns:64px 248px minmax(0,1fr);height:100dvh;overflow:hidden}
.app-body.show-panel .shell{grid-template-columns:64px 248px minmax(0,1fr) 248px}
.app-body .rail,.app-body[data-theme=light] .rail{background:#161b2c;border:0;padding:16px 8px;gap:8px}
.app-body .rail-logo{width:44px;height:44px;margin:0 0 18px;background:#ffffff0c;border-radius:14px;color:#bab8ff;font-size:29px}
.app-body .rail-item{width:44px;height:44px;border-radius:12px;color:#8d99b1;position:relative}
.app-body .rail-item:is(.active,:hover){color:#fff;background:#5856d6}
.app-body .rail-item.active:before{content:'';position:absolute;left:-8px;height:20px;width:3px;border-radius:0 3px 3px 0;background:#bab8ff}
.app-body .rail-avatar{width:40px;height:40px;border-radius:13px;background:#30374e;color:#e4e7ff;border:1px solid #4a5270}
.app-body .nav-svg{width:21px;height:21px}
.app-body .sidebar{background:var(--surface);position:relative}
.app-body .sidebar-top{height:81px;min-height:81px;padding:18px;gap:10px;border-bottom:1px solid var(--line)}
.sidebar-top .brand{font-size:1.65rem;line-height:1;flex:1;color:var(--text)}
.sidebar-top .brand small{display:block;margin-top:8px;color:var(--muted);font-size:.48rem;letter-spacing:.12em;font-weight:700}
.app-body .sidebar-content{padding:22px 12px;min-height:0;overflow:auto}
.app-body .section-heading{padding:0 7px;margin-bottom:16px}
.app-body .section-heading .eyebrow{font-size:.58rem;letter-spacing:.14em}
.app-body .section-heading h2{font-size:1rem;margin:6px 0 0;letter-spacing:-.035em}
.app-body .soft-pill{font-size:.6rem;padding:5px 7px;border-radius:6px;background:var(--surface-2)}
.app-body .search-wrap{height:38px;box-shadow:none;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);margin:0 6px}
.app-body .search-wrap input{font-size:.74rem;min-width:0}
.app-body .category-tabs{padding:14px 6px;gap:6px;flex-wrap:wrap}
.app-body .category-tab{min-height:28px;border-radius:7px;padding:5px 8px;font-size:.63rem;background:transparent;border-color:transparent}
.app-body .category-tab.active{background:var(--surface-3);border-color:transparent;color:var(--accent)}
.app-body .room-list{gap:4px}
.app-body .room-card{min-height:66px;border:1px solid transparent;border-radius:10px;padding:11px 8px;gap:10px;background:transparent;box-shadow:none;position:relative}
.app-body .room-card:is(:hover,.selected){background:var(--surface-2);border-color:transparent;box-shadow:none}
.app-body .room-card.selected{background:var(--surface-3);border:1px solid color-mix(in srgb,var(--accent) 15%,transparent)}
.app-body .room-card.selected:before{content:'';position:absolute;left:-1px;top:18px;bottom:18px;width:3px;background:var(--accent);border-radius:3px}
.app-body .room-icon{width:38px;height:38px;flex:none;border-radius:11px;font-size:1.1rem;background:color-mix(in srgb,var(--accent) 11%,var(--surface));color:var(--accent)}
.app-body .room-card-text{min-width:0;flex:1}
.app-body .room-card-text strong{font-size:.79rem;font-weight:800;letter-spacing:-.02em}
.app-body .room-card-text small{font-size:.65rem;line-height:1.45;margin-top:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.app-body .room-card-end{min-width:16px}.app-body .room-card-end .arrow{font-size:.85rem;color:var(--muted)}
.app-body .sidebar-tip,.app-body[data-theme=light] .sidebar-tip{margin:26px 6px 0;padding:17px 13px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.app-body .sidebar-tip>span{font-size:1.2rem;margin-bottom:8px;display:block}
.app-body .sidebar-tip strong{font-size:.73rem;line-height:1.5}.app-body .sidebar-tip p,.app-body .sidebar-tip a{font-size:.65rem;line-height:1.6}
.app-body .sidebar-user{height:74px;min-height:74px;padding:12px 18px;gap:10px;background:var(--surface);border-top:1px solid var(--line)}
.app-body .sidebar-user strong{font-size:.77rem}.app-body .sidebar-user small{font-size:.65rem}
.app-body .avatar{border-radius:11px;background:var(--surface-3);color:var(--accent)}
.app-body .avatar.small{width:32px;height:32px;font-size:.7rem;flex:none}
.app-body .chat-header{height:81px;min-height:81px;padding:15px 24px;gap:12px;border-bottom:1px solid var(--line);background:var(--surface);z-index:2}
.app-body .chat-heading{min-width:0;flex:1}.app-body .chat-heading h1{font-size:1.03rem;letter-spacing:-.035em;font-weight:800}
.app-body .chat-heading p{font-size:.71rem;max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-tools{display:flex;align-items:center;gap:8px;flex:none}.app-body .chat-shortcut{font-size:1.5rem}
.app-body .people-button{min-height:36px;border-radius:9px;padding:8px 10px;background:var(--surface);color:var(--text);font-size:.67rem;white-space:nowrap}
.app-body #call-join{background:var(--surface-3);color:var(--accent);border-color:transparent;font-weight:800}
.app-body .room-drawer-toggle{display:none}
.app-body .messages{padding:24px 26px;gap:15px;background-color:var(--chat-bg);background-image:radial-gradient(color-mix(in srgb,var(--muted) 14%,transparent) .7px,transparent .7px);background-size:18px 18px;min-height:0;overflow-y:auto}
.app-body .message-row{gap:10px;max-width:100%;position:relative}
.app-body .message-content{max-width:min(78%,680px);min-width:0}
.app-body .message-meta{gap:7px;margin:0 0 5px;flex-wrap:wrap}.app-body .message-meta button{font-size:.74rem;font-weight:800}
.app-body .message-meta time{font-size:.6rem;color:var(--muted)}
.app-body .bubble{border:1px solid var(--line);background:var(--surface);border-radius:0 12px 12px 12px;padding:9px 12px;font-size:.83rem;line-height:1.65;box-shadow:0 2px 2px #10182c02;overflow-wrap:anywhere}
.app-body .message-row.own .bubble{background:var(--own-bubble);border-color:color-mix(in srgb,var(--accent) 15%,var(--line));color:var(--text)}
.app-body .message-actions{flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:0;margin-top:20px;max-width:72px;opacity:0;transition:opacity .15s}
.app-body .message-row:is(:hover,:focus-within) .message-actions{opacity:1}
.app-body .message-actions button{min-width:26px;min-height:28px;padding:3px;font-size:.86rem;border-radius:6px}
.app-body .message-actions button:hover{background:var(--surface-3)}
.app-body .message-reply-quote{padding:7px 10px;margin-bottom:5px;border-radius:5px;background:var(--surface-3)}
.app-body .composer-wrap{padding:14px 24px 13px;border-top:1px solid var(--line);background:var(--surface);flex:none}
.app-body .composer{max-width:none;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);box-shadow:none;padding:7px;gap:7px}
.app-body .composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)}
.app-body .composer input{padding:7px 9px;min-width:0;font-size:.82rem}
.app-body .composer button{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:9px;flex:none}
.app-body .composer>button[type=button]{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.app-body .composer-wrap>small{display:block;margin-top:8px;font-size:.59rem;color:var(--muted)}
.app-body .reply-preview{max-width:none}.app-body .typing-indicator{padding:5px 24px;background:var(--surface);font-size:.68rem}
.app-body .people-panel{display:flex;flex-direction:column;background:var(--surface);padding:24px 15px;overflow:auto;position:static;width:auto;box-shadow:none;z-index:1}
.app-body .people-title{margin-bottom:16px;gap:10px}.app-body .people-title .eyebrow{font-size:.57rem}.app-body .people-title h2{font-size:.88rem;margin-top:7px}
.app-body .people-summary{font-size:.66rem;margin:7px 0 0;color:var(--muted)}
.app-body .people-search{margin:0 0 15px;flex:none}.app-body .people-search input{width:100%}
.app-body .person-row{min-height:61px;padding:10px 3px;border-bottom:1px solid var(--line);gap:10px;border-radius:0}
.app-body .person-row:hover{border-radius:8px}.app-body .person-identity{gap:5px;flex-wrap:wrap}.app-body .person-detail strong{font-size:.74rem}.app-body .person-detail small,.app-body .person-bio{font-size:.62rem}
.app-body .person-online{font-size:.62rem;color:#27a98a}.app-body .person-open{font-size:1rem}.app-body .people-note{margin-top:auto;padding-top:22px;font-size:.64rem;line-height:1.6;color:var(--muted)}
.app-body .role-badge{font-size:.53rem;line-height:1.4;gap:4px;padding:3px 6px;border-radius:5px;display:inline-flex;align-items:center;max-width:100%;white-space:normal;background:var(--surface-3);color:var(--accent);border:0}
.role-symbol{font-size:.67rem;line-height:1}.app-body .role-badge.admin{color:#986211;background:#fff1d4}.app-body[data-theme=dark] .role-badge.admin{background:#4b3b21;color:#f5ce81}
.app-body .role-badge.moderator{background:#e8f5f1;color:#177c63}.app-body[data-theme=dark] .role-badge.moderator{background:#203f38;color:#8cdbc5}
.app-body .room-welcome{width:min(100%,590px);margin:auto;border:0;box-shadow:none;border-radius:0;background:none;padding:30px 15px}
.app-body .room-welcome-mark{width:62px;height:62px;background:var(--surface-3);border-radius:20px;margin-bottom:24px}
.app-body .room-welcome h2{font-size:clamp(1.6rem,2.6vw,2.35rem);line-height:1.2}.app-body .room-welcome p{font-size:.86rem;line-height:1.8}
.app-body .room-welcome-actions{margin:22px 0 28px}.app-body .room-prompt{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 13px;font-size:.74rem}
.app-body .panel-view{padding:34px clamp(22px,3vw,50px);background:var(--bg)}
.app-body .panel-header h1{font-size:clamp(1.7rem,3vw,2.45rem)}.app-body .panel-header p{font-size:.82rem}
.app-body :is(.settings-card,.profile-card,.feature-card,.empty-card,.notification-card,.dm-list-row){border-radius:14px;box-shadow:none}
.app-body .settings-card{max-width:760px}.app-body .dialog-card{border-radius:18px}
.app-body .dm-messages{background:var(--chat-bg);border:1px solid var(--line);border-radius:12px}.app-body .dm-bubble.own{background:var(--own-bubble);color:var(--text)}
.app-body .call-panel{background:var(--surface);border:1px solid var(--line);margin:12px 20px;border-radius:12px;padding:14px;max-height:45dvh;overflow:auto;flex:none}
.app-body .call-panel-head strong{font-size:.85rem}.app-body .call-panel-head small{font-size:.65rem}.app-body .call-actions button{border-radius:8px;min-height:36px;padding:8px 10px;font-size:.68rem}
.app-body .call-devices{margin-top:0}.app-body .call-devices label{font-size:.65rem}.app-body .call-devices select{min-width:140px;max-width:210px;font-size:.67rem}
.app-body .call-theater-mode{grid-template-columns:minmax(0,1fr) minmax(280px,32%)}
.app-body .call-theater-mode>.call-panel{max-height:none;margin:12px}.app-body .call-theater-mode>.messages{padding:16px 12px}.app-body .call-theater-mode>.composer-wrap{padding:12px}
.app-body .call-theater-mode .message-actions{max-width:28px}.app-body .call-theater-mode .message-content{max-width:calc(100% - 70px)}
.app-body .auth-art{background:radial-gradient(ellipse at 20% 10%,#363960 0,transparent 60%),#161b2c;color:#f1f2fc}
.app-body .auth-art h1{font-size:clamp(3rem,5vw,5.5rem)}.app-body .auth-art h1 em{color:#b2afff}
.app-body .auth-art .eyebrow,.app-body .brand-mark{color:#b2afff}.app-body .auth-art>p:not(.eyebrow),.app-body .auth-art small{color:#b6bed4}
.app-body .auth-orbit span{background:#ffffff08;border-color:#ffffff25;color:#e0e2f5}.app-body .auth-tabs button{border-radius:9px}.app-body .auth-tabs button.active{background:var(--surface-3);color:var(--accent);border-color:var(--accent)}
.drawer-scrim,#room-drawer-close{display:none}
@media(min-width:1181px){.app-body .people-title #close-people{display:none}.app-body.show-panel .shell:has(#people-toggle[aria-expanded="false"]){grid-template-columns:64px 248px minmax(0,1fr)}.app-body.show-panel .shell:has(#people-toggle[aria-expanded="false"]) .people-panel{display:none}}
@media(min-width:981px) and (max-width:1180px){.app-body .shell,.app-body.show-panel .shell,.app-body:not(.show-panel) .shell{grid-template-columns:64px 236px minmax(0,1fr)}.app-body .people-panel{display:none}.app-body.people-open .people-panel{display:flex;position:fixed;right:0;top:0;bottom:0;width:280px;z-index:40;box-shadow:var(--shadow)}.app-body .people-title #close-people{display:grid}.app-body .chat-header{padding:15px 18px}.app-body .call-theater-mode{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(200px,40dvh) minmax(0,1fr) auto;grid-template-areas:"header" "banner" "stage" "chat" "composer"}}
@media(max-width:980px){
 .app-body .shell,.app-body.show-panel .shell,.app-body:not(.show-panel) .shell{display:grid;grid-template-columns:64px minmax(0,1fr);padding-bottom:0}
 .app-body .sidebar{display:none}.app-body.rooms-open .sidebar{display:flex;position:fixed;left:64px;top:0;bottom:0;width:290px;max-width:calc(100vw - 64px);z-index:61;box-shadow:var(--shadow)}
 .app-body .room-drawer-toggle,.app-body #room-drawer-close{display:grid}.app-body .drawer-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:60;border:0;background:#10162488;backdrop-filter:blur(3px)}
 .app-body .people-panel{display:none}.app-body.people-open .people-panel{display:flex;position:fixed;right:0;top:0;bottom:0;width:290px;max-width:90vw;z-index:55;box-shadow:var(--shadow)}
 .app-body .people-title #close-people{display:grid}.app-body .messages{padding:22px}.app-body .mobile-discover{display:block}.app-body .call-theater-mode{grid-template-columns:1fr;grid-template-rows:auto auto minmax(180px,35dvh) minmax(0,1fr) auto;grid-template-areas:"header" "banner" "stage" "chat" "composer"}
}
@media(max-width:680px){
 .app-body .shell,.app-body.show-panel .shell,.app-body:not(.show-panel) .shell{display:block;padding-bottom:calc(60px + env(safe-area-inset-bottom));height:100dvh}
 .app-body .rail{display:none}.app-body .main-area{height:100%}.app-body.show-chat .chat-view{height:100%}.app-body .bottom-nav,.app-body.show-chat .bottom-nav{display:flex;height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);box-shadow:none;z-index:20}
 .app-body .bottom-nav button{min-height:55px;font-size:.58rem;gap:4px;font-weight:700}.app-body .bottom-nav .nav-svg{width:20px;height:20px}.app-body .bottom-nav button.active{color:var(--accent);background:var(--surface-2)}
 .app-body.rooms-open .sidebar{left:0;width:300px;max-width:88vw}.app-body .sidebar-top{height:76px;min-height:76px}.app-body .sidebar-content{padding-top:20px}
 .app-body .chat-header{height:72px;min-height:72px;padding:10px 12px;gap:8px}.app-body .chat-header>#back-rooms{display:none}.app-body .chat-header>.room-icon{display:none}
 .app-body .chat-heading h1{font-size:.88rem}.app-body .chat-heading p{font-size:.61rem;max-width:23ch}.app-body .chat-tools{gap:5px}.app-body .chat-shortcut{display:none}
 .app-body .people-button{min-height:34px;padding:7px;font-size:.6rem}.app-body .people-button .online-dot{display:none}.app-body #call-join{max-width:80px;white-space:normal;line-height:1.25;font-size:.58rem}
 .app-body .room-drawer-toggle{width:32px;height:34px;font-size:1rem}.app-body .messages{padding:18px 12px;gap:16px}.app-body .message-row{gap:7px}.app-body .message-row>.avatar.small{width:27px;height:27px;font-size:.62rem}
 .app-body .message-content{max-width:calc(100% - 66px)}.app-body .message-meta{gap:5px}.app-body .message-meta button{font-size:.71rem}.app-body .message-meta time{font-size:.56rem}.app-body .bubble{font-size:.81rem;padding:8px 10px}
 .app-body .message-actions{opacity:1;max-width:27px;gap:1px;margin-top:19px}.app-body .message-actions button{min-width:27px;min-height:29px}.app-body .message-attachment-image,.app-body .message-attachment-audio{max-width:100%}
 .app-body .composer-wrap{padding:10px 12px 9px}.app-body .composer-wrap>small{font-size:.52rem;line-height:1.5}.app-body .composer{padding:5px;gap:4px}.app-body .composer input{font-size:16px;padding:6px}.app-body .composer button{min-width:34px;min-height:34px;width:34px;height:34px}.app-body .typing-indicator{padding:4px 12px;font-size:.62rem}
 .app-body .mobile-discover{padding:30px 18px}.app-body .mobile-discover h1{font-size:2rem;line-height:1.15;letter-spacing:-.06em}.app-body .mobile-discover .eyebrow{font-size:.6rem}.app-body .mobile-discover p{font-size:.82rem;line-height:1.7}
 .app-body .mobile-discover .room-card{padding:14px 12px;min-height:80px;border:1px solid var(--line);background:var(--surface);margin-bottom:10px}.app-body .mobile-discover .room-card strong{font-size:.88rem}.app-body .mobile-discover .room-card small{font-size:.7rem;-webkit-line-clamp:2}
 .app-body .room-welcome{padding:12px 2px}.app-body .room-welcome h2{font-size:1.65rem}.app-body .room-welcome p{font-size:.79rem}.app-body .room-welcome-actions{margin:18px 0 24px;gap:12px}.app-body .room-prompt{font-size:.68rem;padding:9px 10px}
 .app-body .panel-view{padding:26px 18px 30px}.app-body .panel-header h1{font-size:1.85rem}.app-body.dm-open .shell{padding-bottom:0}.app-body.dm-open .bottom-nav{display:none}
 .app-body .call-panel{margin:8px 10px;padding:11px;max-height:40dvh}.app-body .call-panel-head{gap:10px}.app-body .call-actions{gap:5px}.app-body .call-devices{display:none}.app-body .call-theater-mode>.call-panel{margin:6px;max-height:none}.app-body .call-theater-mode .message-actions{max-width:24px}.app-body .call-theater-mode .message-content{max-width:calc(100% - 60px)}
 .app-body .auth-panel{padding:26px 22px}.app-body .auth-box h2{font-size:2.1rem}.app-body .auth-tabs{gap:6px}.app-body .auth-tabs button{font-size:.69rem;min-height:44px;padding:10px 4px}
}
@media(hover:none){.app-body .message-actions{opacity:1}}

.app-body .chat-header>#back-rooms{display:none}
.discovery-filter{float:right;margin:0 0 16px 12px}
@media(min-width:981px){.discovery-filter{display:none}}
@media(max-width:680px){.discovery-filter{float:none;margin:0 0 22px;padding:9px 13px;min-height:38px;font-size:.7rem}}

.app-body .message-actions{max-width:28px;margin-top:14px}
.app-body .message-actions>button:not(.message-menu-toggle){display:none}
.app-body .message-actions.actions-open{position:absolute;right:0;top:5px;margin:0;padding:4px;max-width:220px;gap:2px;flex-wrap:nowrap;z-index:8;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);opacity:1}
.app-body .message-actions.actions-open>button{display:grid;place-items:center}
.app-body .message-actions.actions-open>.reaction-picker{top:36px;right:0}
.app-body .message-actions .message-menu-toggle{font-size:1.15rem}
@media(max-width:680px){.app-body .message-actions{margin-top:14px}.app-body .message-actions.actions-open{max-width:calc(100vw - 30px)}.app-body .message-actions.actions-open>button{min-width:33px;min-height:34px}}

.app-body[data-theme=dark] .messages{background-color:var(--chat-bg);background-image:radial-gradient(#ffffff0b .7px,transparent .7px);background-size:18px 18px}
.app-body[data-theme=dark] .message-row.own .bubble,.app-body[data-theme=dark] .dm-bubble.own{background:var(--own-bubble);border-color:#44436b;color:var(--text)}
.app-body[data-theme=dark] .auth-art{background:radial-gradient(ellipse at 20% 10%,#363960 0,transparent 60%),#161b2c}
.app-body .composer input:focus-visible{outline:none}

.app-body #rooms-view:has(#chat-view[hidden]) .mobile-discover{display:block;max-width:920px;margin:auto;padding:38px 28px;height:100%;overflow:auto}
@media(min-width:681px){.app-body #mobile-room-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.app-body #mobile-room-list .room-card{background:var(--surface);border:1px solid var(--line);padding:15px;min-height:86px}.app-body #mobile-room-list .room-card small{-webkit-line-clamp:2}}
@media(max-width:680px){.app-body #rooms-view:has(#chat-view[hidden]) .mobile-discover{padding:28px 18px}}
.profile-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}.avatar-upload{font-size:.65rem;color:var(--accent);cursor:pointer;font-weight:800}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

.avatar-file-input{display:block;width:100%;max-width:220px;font-size:.75rem;color:var(--text-muted);cursor:pointer}.avatar-file-input::file-selector-button{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:7px 10px;margin-right:8px;font:inherit;font-weight:700;cursor:pointer}.avatar-file-input::file-selector-button:hover{border-color:var(--accent)}

.avatar-upload-button{margin-top:6px;padding:7px 12px;font-size:.75rem}

/* Keep uploaded portraits inside every avatar, including navigation buttons. */
.app-body .avatar,.app-body .rail-avatar{overflow:hidden;position:relative;min-width:0}
.app-body .avatar>img,.app-body .rail-avatar>img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:cover;border-radius:inherit}
.profile-avatar-wrap{flex:0 0 180px;max-width:180px;min-width:0;align-items:flex-start}
.profile-avatar-wrap .avatar-upload{width:100%;color:var(--muted)}
.profile-avatar-wrap .avatar-file-input{max-width:100%;color:var(--muted)}
.profile-identity>div:last-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:680px){.profile-identity{flex-wrap:wrap}.profile-avatar-wrap{flex-basis:150px;max-width:150px}}

/* Portraits stay circular in profiles, navigation and the online list. */
.app-body .avatar,.app-body .avatar.small,.app-body .avatar.big,.app-body .rail-avatar,.profile-identity .avatar.big{border-radius:50%}
.app-body .person-row .avatar.small{width:40px;height:40px;flex:0 0 40px}

/* Inline disclosure replaces the floating vendor badge in the sign-in flow. */
.grecaptcha-badge{visibility:hidden!important}
.recaptcha-notice{font-size:.68rem;line-height:1.5;color:var(--muted);margin:12px 0}.recaptcha-notice a{text-decoration:underline}
.mobile-nav-controls{display:none}
@media(max-width:680px){
 .app-body .bottom-nav,.app-body.show-chat .bottom-nav,.app-body.dm-open .bottom-nav{display:flex;flex-wrap:wrap;position:fixed;left:8px;right:auto;bottom:calc(8px + env(safe-area-inset-bottom));width:min(340px,calc(100% - 16px));max-width:440px;height:auto;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 5px 24px #0002;z-index:45;overflow:hidden}
 .app-body .bottom-nav .mobile-nav-controls{display:flex;justify-content:space-between;align-items:center;width:100%;height:26px;background:var(--surface-2);border-bottom:1px solid var(--line)}
 .app-body .bottom-nav .mobile-nav-controls button{min-height:26px;height:26px;flex:none;margin:0;padding:0 12px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.72rem}
 .app-body .bottom-nav .mobile-nav-grip{flex:1!important;cursor:grab;touch-action:none;user-select:none;text-align:left}
 .app-body .bottom-nav.dragging .mobile-nav-grip{cursor:grabbing}
 .app-body .bottom-nav>button[data-view]{flex:1;min-width:0;min-height:52px;padding:5px 2px}
 .app-body .bottom-nav.nav-collapsed{width:116px;border-radius:16px}
 .app-body .bottom-nav.nav-collapsed>button[data-view]{display:none}
 .app-body .bottom-nav.nav-collapsed .mobile-nav-controls{height:36px;border:0}
 .app-body .bottom-nav.nav-collapsed .mobile-nav-controls button{height:36px;min-height:36px}
 .app-body .shell{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
 .app-body.nav-minimized .shell{padding-bottom:0}
}

.room-music-panel{flex:none;min-width:0;border-bottom:1px solid var(--line);background:var(--surface);font-size:.8rem}.room-music-panel>summary{cursor:pointer;padding:10px 20px;font-weight:750;color:var(--accent)}.room-music-content{max-height:35dvh;overflow:auto;padding:0 20px 14px;display:grid;gap:10px}.music-guide{color:var(--muted);line-height:1.5;margin:0}.song-request-form{display:flex;gap:8px;flex-wrap:wrap}.song-request-form input,.room-role-search input{min-width:0;flex:1;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text)}.song-request-form button,.song-request-actions button{padding:7px 10px;font-size:.75rem}.song-request-row{display:flex;gap:12px;justify-content:space-between;border-top:1px solid var(--line);padding:10px 0;overflow-wrap:anywhere}.song-request-row small{display:block;margin-top:4px;color:var(--muted)}.song-request-row p{margin:4px 0}.song-request-actions{display:flex;gap:6px;flex-wrap:wrap;align-content:start}.room-roles-dialog{max-width:650px;width:calc(100vw - 30px);max-height:85dvh}.room-role-row,.room-role-search{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}.room-role-row strong{flex:1}.room-role-row select{max-width:170px;padding:8px}.app-body .call-theater-mode>.room-music-panel{display:none}
@media(max-width:680px){.room-music-content{padding:0 12px 12px;max-height:32dvh}.song-request-row{flex-direction:column}.song-request-form input{flex-basis:100%}.room-role-row .button{padding:7px;font-size:.75rem}}