:root{--bg:#0f101a;--shell:#171722;--panel:#1d1d2c;--panel2:#232235;--hover:#2b2940;--border:#34314c;--border2:#474062;--text:#ece9fa;--muted:#9995b4;--soft:#c5bee0;--purple:#a580ff;--purple2:#8863d9;--cyan:#71ded3;--green:#78d8b1;--red:#ff929d;--sh:0 18px 45px #0006}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:13px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Tahoma,Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}input,textarea{color:var(--text)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.hidden{display:none!important}a{color:var(--cyan)}.auth-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 16px;background:radial-gradient(ellipse 700px 420px at 50% 0%,#30244b 0%,transparent 90%),#0e0f19}.auth-masthead{display:flex;align-items:center;gap:12px;width:min(510px,100%);margin-bottom:20px}.logo-mark{height:40px;width:40px;display:grid;place-items:center;border:1px solid #ad8bfb99;border-radius:9px;background:linear-gradient(140deg,#8a61dd,#4d3c8b);box-shadow:0 3px 12px #9f78fc30;font-size:27px;font-weight:900;letter-spacing:-3px;padding-right:4px}.logo-mark span{color:var(--cyan)}.logo-mark.small{width:33px;height:33px;font-size:22px;border-radius:6px;flex:none}.auth-brand{font-size:23px;letter-spacing:-1px;font-weight:750}.auth-brand small{display:block;color:var(--cyan);font-size:9px;letter-spacing:2px}.auth-window{width:min(510px,100%);background:var(--shell);border:1px solid #51476a;border-radius:7px;overflow:hidden;box-shadow:var(--sh)}.window-heading{background:#262237;border-bottom:1px solid #544a6a;padding:12px 17px;display:flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:1.3px;color:#d5c9ee}.window-dot{width:8px;height:8px;background:var(--cyan);border-radius:50%;box-shadow:0 0 9px #71ded388}.window-path{margin-left:auto;color:#8d87a7;letter-spacing:0;font-weight:500}.auth-main{padding:30px 32px 26px}.auth-heading{display:flex;gap:18px;align-items:flex-start;margin-bottom:25px}.glyph{display:grid;place-items:center;width:52px;height:52px;border-radius:9px;background:#302849;color:#c6afff;flex:none}.auth-heading h1{font-size:22px;margin:0 0 7px;letter-spacing:-.5px;font-weight:730}.auth-heading p{margin:0;color:var(--muted)}.auth-stack{display:flex;flex-direction:column;gap:12px}.auth-stack label{display:block;font-weight:650;color:#d8d2e9;font-size:12px}.auth-stack label input{display:block;width:100%;margin-top:7px}.auth-stack input,.field,textarea{padding:11px 13px;border:1px solid #49425f;background:#11121d;border-radius:5px;outline:none}.auth-stack input:focus,.field:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 2px #a580ff25}.field-note{color:var(--muted);float:right;font-size:11px;font-weight:400}.input-prefix{display:flex;align-items:center;border:1px solid #49425f;background:#11121d;border-radius:5px;margin-top:7px}.input-prefix:focus-within{border-color:var(--purple)}.input-prefix span{padding-left:13px;color:var(--cyan);font-weight:800}.input-prefix input{border:0!important;margin:0!important;background:transparent!important;box-shadow:none!important;padding-left:4px!important}.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:10px 15px;border:1px solid var(--border2);background:var(--panel2);border-radius:5px;color:var(--text);font-weight:650;text-decoration:none}.btn:hover{filter:brightness(1.13)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:linear-gradient(#9570ed,#7753c9);border-color:#9f7cfe;color:white}.btn.outlined{color:var(--cyan);border-color:#4d5e70;background:#1b2030}.btn.big{width:100%;justify-content:space-between;font-size:13px;padding:13px 16px}.auth-note{margin-top:8px;text-align:center;color:#827d9d;font-size:11px}.helper{margin:-2px 0 0;color:var(--muted);font-size:11px}.step-label{font-weight:800;font-size:10px;letter-spacing:1.2px;color:var(--cyan);margin-bottom:3px}.valid-chip{float:right;color:#b7f6d3;letter-spacing:.5px;font-size:9px}.error{margin:0;color:var(--red);font-size:12px;min-height:1px}.availability{margin:-8px 0 1px;font-size:11px;color:var(--muted)}.availability.good{color:var(--green)}.availability.bad{color:var(--red)}.link-btn{border:0;color:var(--soft);background:transparent;padding:5px 0;text-align:left}.link-btn:hover{color:var(--cyan)}.auth-footer{border-top:1px solid var(--border);display:flex;justify-content:space-between;padding:12px 18px;background:#1b1928;font-size:10px;font-weight:700;letter-spacing:.7px;color:#9c93b8}.status-pip{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px}.auth-bottom{margin-top:20px;color:#66627d;font-size:11px}
.workspace{height:100dvh;display:flex;flex-direction:column}.masthead{height:57px;flex:none;background:#171522;border-bottom:1px solid var(--border2);display:flex;align-items:center;padding:0 18px;gap:28px}.head-brand{display:flex;align-items:center;gap:11px;min-width:234px}.head-brand strong{font-size:18px;letter-spacing:-.7px}.head-tag{font-size:9px;letter-spacing:1px;background:#372d54;border:1px solid #665589;border-radius:3px;color:#ccb9fb;padding:2px 5px}.head-tabs{display:flex;height:100%;gap:3px}.head-tab{background:none;border:0;border-bottom:2px solid transparent;color:#a7a1bd;padding:0 18px;font-weight:650}.head-tab:hover{background:#282437;color:white}.head-tab.selected{border-bottom-color:var(--cyan);color:#f1eaff;background:#282238}.head-tab span{color:var(--cyan)}.head-me{margin-left:auto;display:flex;align-items:center;gap:11px;padding:4px 6px;background:none;border:0;color:var(--text);text-align:left}.head-user b,.head-user small{display:block}.head-user b{font-size:12px}.head-user small{font-size:10px;color:var(--muted)}.chevron{color:var(--purple)}.workspace-body{flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr) 239px}.sidebar{background:#191825;border-right:1px solid var(--border);min-width:0;display:flex;flex-direction:column}.sidebar-top{height:43px;flex:none;border-bottom:1px solid #323047;padding:12px 17px;display:flex;justify-content:space-between;align-items:center}.section-label,.section-caption,.detail-heading{font-weight:780;letter-spacing:1.2px;font-size:10px;color:#a29ab8}.sidebar-scroll{padding:12px;overflow-y:auto;flex:1;min-height:0}.sidebar-link{width:100%;text-align:left;display:flex;align-items:center;gap:10px;background:none;color:#aaa5c0;border:0;border-radius:4px;padding:8px 12px;min-width:0}.sidebar-link:hover,.user-card:hover{background:var(--hover);color:var(--text)}.sidebar-link.selected{background:#392e56;color:#e1d3ff}.sidebar-link .label{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sidebar-link .hash{color:#9182b7;font-size:16px}.sidebar-link .avatar{flex:none}.sidebar-all{font-weight:800}.section-caption{margin:24px 9px 8px}.section-caption.with-action{display:flex;justify-content:space-between;align-items:center}.section-caption button{border:1px solid #514866;background:#2b263b;color:var(--cyan);width:24px;height:23px;border-radius:4px}.sidebar-empty,.sidebar-hint{margin:7px 11px;color:#79748f;font-size:11px}.sidebar-hint{margin-top:27px;line-height:1.7}.sidebar-profile{width:100%;background:#242134;border:0;border-top:1px solid var(--border);padding:10px 13px;display:flex;gap:10px;align-items:center;color:var(--text);text-align:left}.sidebar-profile>span:nth-child(2){min-width:0;flex:1}.sidebar-profile b,.sidebar-profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-profile small{color:var(--muted)}.settings-gear{color:var(--purple);font-size:18px}.avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:7px;background:linear-gradient(135deg,#6a4d9f,#4b647c);color:#fff;font-size:17px;font-weight:800;overflow:hidden;object-fit:cover}.avatar.small{width:32px;height:32px;font-size:13px}.avatar.tiny{width:26px;height:26px;font-size:11px}.content{display:flex;flex-direction:column;min-width:0;background:#20202e}.view-header{min-height:82px;background:#242334;border-bottom:1px solid var(--border);padding:15px 24px;display:flex;align-items:center;gap:15px}.view-head-text{min-width:0;flex:1}.view-eyebrow{font-size:10px;letter-spacing:1px;font-weight:750;color:var(--cyan)}.view-head-text h2{margin:1px 0 1px;font-size:21px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.4px}.view-head-text p{margin:0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;gap:8px}.icon-button{border:1px solid var(--border);border-radius:4px;background:#2a273b;color:var(--soft);width:32px;height:32px;font-size:19px}.icon-button:hover{color:white;background:#403659}.compact,.menu-toggle{display:none}.chat-view{display:flex;flex-direction:column;flex:1;min-height:0}.chat-messages{flex:1;overflow-y:auto;padding:20px 25px 14px}.message{display:flex;align-items:flex-start;gap:11px;padding:11px 6px;border-bottom:1px solid #ffffff09}.message:hover{background:#ffffff05}.message-content{min-width:0}.message-head{display:flex;align-items:baseline;gap:10px}.message-head strong{color:#d0bafa;cursor:pointer}.message-head .handle{font-size:10px;color:var(--muted)}.message-head time{font-size:10px;color:#817d9a;margin-left:3px}.message-body{white-space:pre-wrap;overflow-wrap:anywhere;color:#e3dfef;line-height:1.65;margin-top:3px}.empty-chat{text-align:center;max-width:420px;margin:7vh auto 0;color:var(--muted)}.empty-chat h3{font-size:18px;color:var(--text);margin:12px 0 2px}.empty-symbol{font-size:27px;border:1px solid #575073;border-radius:10px;background:#312b45;width:60px;height:60px;display:grid;place-items:center;margin:0 auto;color:var(--cyan)}.message-form{border-top:1px solid var(--border);padding:12px 22px 11px;background:#242233}.input-row{height:46px;border:1px solid #51466d;border-radius:5px;background:#13131e;display:flex;align-items:center;gap:11px;padding:0 7px 0 13px}.input-row:focus-within{border-color:var(--purple)}.compose-symbol{color:var(--purple);font-size:19px}.input-row input{min-width:0;flex:1;border:0;background:transparent;outline:none}.send-button{width:34px;height:32px;background:var(--purple2);border:0;border-radius:4px;color:white}.compose-info{display:block;color:#74708c;font-size:10px;text-align:right;margin-top:5px}.detail-sidebar{background:#191825;border-left:1px solid var(--border);overflow-y:auto}.detail-heading{padding:15px 16px;border-bottom:1px solid var(--border)}#detailContents{padding:17px 14px}.detail-muted{color:var(--muted);font-size:12px;line-height:1.6}.detail-card{border:1px solid var(--border);background:#222033;border-radius:6px;padding:12px;margin-bottom:13px}.detail-card strong{display:block}.detail-user{display:flex;align-items:center;gap:8px;padding:6px 0;border:0;background:none;color:var(--text);text-align:left;width:100%}.detail-user:hover{color:var(--cyan)}.detail-user small{color:var(--muted);display:block}.detail-user .avatar{width:29px;height:29px;font-size:12px}.page-view{padding:25px;overflow-y:auto;flex:1;min-height:0}.page-narrow{max-width:780px;margin:0 auto}.page-panel{border:1px solid var(--border);border-radius:6px;background:#252336;margin-bottom:16px;overflow:hidden}.page-panel-head{border-bottom:1px solid var(--border);padding:14px 18px;font-size:13px;font-weight:800;color:#e0d4f9}.page-panel-body{padding:18px}.page-section-title{color:var(--cyan);letter-spacing:1.2px;font-size:10px;margin-bottom:12px;font-weight:800}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}.group-card{border:1px solid #4a4164;background:#29263b;padding:17px;border-radius:6px;display:flex;flex-direction:column;gap:10px;min-height:158px}.group-card h3{margin:0;font-size:17px;color:#ece3ff}.group-card p{margin:0;color:var(--muted);font-size:12px;min-height:42px;overflow-wrap:anywhere}.group-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}.pill{border:1px solid #66588a;border-radius:3px;padding:2px 6px;font-size:10px;color:#d6c6ff}.pill.cyan{border-color:#4f807f;color:var(--cyan)}.btn.small-btn{padding:6px 10px;font-size:11px}.page-muted{color:var(--muted);font-size:12px;line-height:1.7}.empty-panel{padding:35px 22px;text-align:center;color:var(--muted)}.empty-panel strong{display:block;color:var(--text);font-size:16px;margin-bottom:6px}.form-row{display:flex;gap:12px;align-items:center}.form-row>*{flex:1}.stack{display:flex;flex-direction:column;gap:14px}.form-label{font-size:12px;color:#d4cce6;font-weight:750;display:block}.form-label input,.form-label textarea{width:100%;display:block;margin-top:7px}.form-label textarea{min-height:88px;resize:vertical}.subtle{color:var(--muted);font-size:11px}.tag-handle{color:var(--cyan);font-weight:600}.user-card{display:flex;align-items:center;gap:13px;border:1px solid var(--border);padding:12px;background:#242235;margin-bottom:8px;border-radius:5px}.user-card .info{flex:1;min-width:0}.user-card .info b,.user-card .info small{display:block;overflow:hidden;text-overflow:ellipsis}.user-card .info small{color:var(--muted)}.user-card .actions{display:flex;gap:7px;flex-wrap:wrap}.profile-hero{display:flex;gap:20px;align-items:center}.profile-hero .avatar{height:82px;width:82px;font-size:29px}.profile-hero h3{margin:0;font-size:22px}.profile-hero .bio{margin-top:7px;white-space:pre-wrap;color:var(--muted)}.separator{border:0;border-top:1px solid var(--border);margin:18px 0}.toggle-row{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #ffffff12}.toggle-row input{accent-color:var(--purple);width:18px;height:18px}.modal-layer{position:fixed;inset:0;background:#070712c9;z-index:100;display:grid;place-items:center;padding:16px}.modal{width:min(520px,100%);max-height:90dvh;overflow:auto;background:#232134;border:1px solid #67588b;box-shadow:var(--sh);border-radius:7px}.modal-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:11px 17px;background:#2b263e}.modal-top h2{margin:0;font-size:16px}.modal-body{padding:20px}.modal-body .form-label{margin-bottom:15px}.modal-body input,.modal-body textarea{background:#151421;border:1px solid #554967;border-radius:5px;padding:11px 12px;color:white}.modal-body input:focus,.modal-body textarea:focus{outline:1px solid var(--purple)}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:17px}.toast{position:fixed;bottom:19px;right:19px;z-index:200;background:#312944;border:1px solid #73609d;color:white;padding:12px 18px;max-width:350px;box-shadow:var(--sh);border-radius:5px}.footer-help{margin-top:12px;color:var(--muted);font-size:11px}.inline-status{font-size:12px;color:var(--cyan)}.danger{color:var(--red)!important}.danger-btn{border-color:#914b69!important;color:#ffc1c8!important}
@media(max-width:1120px){.workspace-body{grid-template-columns:238px minmax(0,1fr)}.detail-sidebar{display:none}.head-brand{min-width:210px}}@media(max-width:720px){.masthead{gap:8px;padding:0 10px;height:52px}.head-brand{min-width:0}.head-brand strong{font-size:15px}.head-tag{display:none}.head-tabs{margin-left:auto;gap:0}.head-tab{font-size:11px;padding:0 7px}.head-user{display:none}.head-me{margin:0}.chevron{display:none}.workspace-body{grid-template-columns:minmax(0,1fr)}.sidebar{position:fixed;top:52px;bottom:0;left:0;width:270px;z-index:20;box-shadow:var(--sh);transform:translateX(-110%);transition:transform .2s}.sidebar.open{transform:translateX(0)}.compact,.menu-toggle{display:block}.view-header{padding:12px 13px;min-height:76px}.page-view{padding:14px}.chat-messages{padding:11px}.message-form{padding:10px}.auth-main{padding:23px 19px}.auth-heading{gap:11px}.auth-heading h1{font-size:19px}}@media(max-width:390px){.head-tab{padding:0 5px}.head-brand strong{display:none}.head-tabs{margin:auto}.auth-brand{font-size:19px}}

/* V3: scroll containment and responsive personal chat layout */
html,body{width:100%;max-width:100%;overflow-x:hidden;overflow-y:hidden}
.workspace,.workspace-body,.content,.chat-view{min-height:0;min-width:0;overflow:hidden}
.workspace{height:100vh;height:100dvh;width:100%;max-width:100vw}
.workspace-body{flex:1;min-height:0;height:0}
.content{flex:1;max-width:100%;height:100%}
.chat-view{flex:1;height:0;display:flex;flex-direction:column}
.chat-messages{flex:1 1 0;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:auto;scrollbar-gutter:stable;max-width:100%}
#messageList{display:flex;flex-direction:column;min-width:0;max-width:100%;width:100%}
.message{max-width:100%;min-width:0;width:100%;flex-shrink:0}
.message-content{flex:1 1 0;min-width:0;max-width:100%}
.message-body,.message-head,.message-head strong,.embedded-link{overflow-wrap:anywhere;word-break:break-word;min-width:0;max-width:100%}
.message-head{flex-wrap:wrap;gap:5px 9px}
.message-head .handle{min-width:0}
.message-form{flex:0 0 auto;min-width:0;max-width:100%;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.input-row{min-width:0;max-width:100%}
.input-row input{min-width:0;width:100%;font-size:16px}
.compose-gif{border:1px solid #706397;color:var(--cyan);background:#312943;border-radius:4px;padding:5px 7px;font-weight:800;font-size:10px;flex:none}
.gif-preview{display:block;max-width:min(420px,100%);max-height:320px;width:auto;height:auto;margin:9px 0;border-radius:8px;border:1px solid var(--border);object-fit:contain}
.page-view{overflow-x:hidden;overflow-y:auto;min-width:0;max-width:100%;overscroll-behavior:contain}
.sidebar-scroll{overflow-x:hidden;overscroll-behavior:contain}
.sidebar-logout{width:100%;text-align:left;background:#201e30;border:0;border-top:1px solid var(--border);padding:10px 16px;color:#d9bad0;cursor:pointer}
.sidebar-logout:hover{background:#35283e;color:white}
.nav-shade{display:none}
.crop-holder{display:flex;justify-content:center;background:#151420;border:1px solid var(--border);padding:14px;border-radius:9px;max-width:100%;min-width:0}
.crop-canvas{width:min(100%,360px);height:auto;aspect-ratio:1;touch-action:none;cursor:grab;display:block;max-width:100%;border-radius:4px;user-select:none}
.crop-canvas:active{cursor:grabbing}
.crop-controls{display:flex;align-items:center;gap:16px;margin:15px 0;color:var(--muted)}
.crop-slider{flex:1;width:100%;accent-color:var(--purple)}
.modal-layer{overflow:hidden;min-width:0;max-width:100vw}
.modal{display:flex;flex-direction:column;max-height:min(90dvh,820px);width:min(580px,100%);min-width:0;overflow:hidden}
.modal-top{flex:0 0 auto}
#modalContents{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.modal-body{overflow-wrap:anywhere;min-width:0;max-width:100%}
.modal-body .user-card{flex-wrap:wrap;min-width:0}
.modal-body .user-card .actions{min-width:0}
.modal-body .user-card .actions .btn{white-space:normal}
.modal-body input,.modal-body textarea{max-width:100%;min-width:0}
.call-bar{position:fixed;z-index:60;left:50%;bottom:18px;transform:translateX(-50%);width:min(530px,calc(100vw - 24px));background:#211d33;border:1px solid #785bb5;box-shadow:0 10px 45px #0009;border-radius:11px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.call-meta{min-width:0}.call-meta strong,.call-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.call-meta small{color:var(--cyan)}.call-actions{display:flex;gap:8px;flex:none}
.remote-audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:900px){.workspace-body{grid-template-columns:220px minmax(0,1fr)}.detail-sidebar{display:none}}
@media(max-width:720px){
 .workspace{height:100dvh;max-height:100dvh}
 .workspace-body{height:0;grid-template-columns:minmax(0,1fr)}
 .sidebar{width:min(300px,84vw);top:52px;bottom:0;z-index:82}
 .sidebar.open{transform:translateX(0)}
 .nav-shade:not(.hidden){display:block;position:fixed;inset:52px 0 0;background:#0009;z-index:80}
 .content{height:100%;min-height:0;min-width:0}
 .chat-view{height:0;min-height:0;max-width:100vw}
 .chat-messages{padding:12px 9px 8px;scrollbar-gutter:auto}
 .message{padding:9px 1px;gap:7px}
 .message .avatar{width:30px;height:30px;font-size:13px}
 .message-head{gap:2px 7px}
 .message-head time{margin:0}
 .message-form{padding:8px 8px max(8px,env(safe-area-inset-bottom))}
 .compose-info{display:none}
 .view-header{gap:9px;min-height:67px;padding:9px 10px}
 .view-head-text h2{font-size:17px}
 .view-eyebrow{font-size:8px}
 .header-actions{flex:none;gap:5px}
 .header-actions .btn{font-size:10px;padding:6px 7px}
 .head-tabs{flex:1;justify-content:center;min-width:0}
 .head-tab{font-size:11px;padding:0 6px}
 .head-brand strong{display:none}
 .head-brand{gap:0}
 .head-brand .logo-mark{width:28px;height:28px;font-size:18px}
 .head-me{padding:1px}
 .page-view{padding:10px}
 .modal-layer{padding:10px;align-items:center}
 .modal{max-height:calc(100dvh - 20px)}
 .modal-body{padding:14px}
 .user-card{flex-wrap:wrap}
 .user-card .actions{margin-left:0;max-width:100%}
 .call-bar{bottom:max(7px,env(safe-area-inset-bottom));flex-wrap:wrap}
}
@media(max-width:390px){.head-tab{font-size:10px;padding:0 4px}.head-me .avatar{width:27px;height:27px}.view-header{flex-wrap:wrap}.header-actions{margin-left:auto}.profile-hero{gap:9px}.profile-hero .avatar{width:54px;height:54px}}
.message{position:relative}
.message-menu{margin-left:auto;align-self:flex-start;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:0 7px;font-size:17px;flex:none}
.message-menu:hover{background:var(--hover);color:white}
.edited-label{font-size:10px;color:var(--muted)}
.message-preview{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--border);background:#171724;border-radius:6px;padding:10px;margin:10px 0}
.auth-screen{height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;justify-content:safe center}
.workspace.in-call .message-form{margin-bottom:75px}
@media(max-width:720px){.workspace.in-call .message-form{margin-bottom:92px}}

/* V4: staff badges, presence, group avatars, calls and mobile controls */
.role-badge{display:inline-flex;align-items:center;gap:4px;border-radius:11px;padding:2px 7px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#dff9ff;border:1px solid #5da5bf;background:#224358;white-space:nowrap;vertical-align:middle}
.role-badge.admin{background:linear-gradient(125deg,#6d47ae,#285a72);border-color:#ab8cf6;color:#fff2ce}
.role-badge.staff{background:#194451;color:#bdfdff;border-color:#4baaba}
.role-badge.hidden{display:none}
.group-avatar{border-radius:50%!important;object-fit:cover;aspect-ratio:1;flex:none}
.group-avatar.big{width:68px;height:68px;font-size:26px}
.avatar.call-person{width:36px;height:36px;aspect-ratio:1;border-radius:50%;object-fit:cover;border:2px solid #7a62c1;margin-left:-7px}
.group-title-line,.group-upload-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.group-upload-row{flex-direction:column;align-items:flex-start;border:1px dashed #77708e;border-radius:10px;padding:13px}
.group-upload-row small{color:#aaa0c3}
.group-upload-row input{max-width:100%}
.member-line{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #ffffff10;min-width:0;cursor:pointer}
.member-name{min-width:0;flex:1;display:flex;flex-direction:column;overflow:hidden}
.member-name strong,.member-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-name small{color:#9b99b4}
.member-presence,.online-label,.moderation-status{font-size:11px;white-space:nowrap;color:#9a99ac}
.is-online{color:#61e7b2!important}.is-offline{color:#9290a4!important}
.roster-list{margin-top:18px}
.roster-list h4{font-size:10px;color:#bba5e2;letter-spacing:.11em;margin:16px 0 6px}
.member-row{flex-wrap:wrap}
.moderation-status{margin-left:auto}
.staff-log{padding:9px 3px;border-bottom:1px solid #ffffff12;font-size:12px;overflow-wrap:anywhere}
.incoming-call{position:fixed;z-index:210;top:15px;left:50%;transform:translateX(-50%);width:min(500px,calc(100vw - 24px));border:1px solid #8374ca;border-radius:14px;background:#232039;box-shadow:0 18px 65px #000c;display:flex;align-items:center;gap:13px;padding:14px;animation:call-slide .26s ease both}
.incoming-call.hidden{display:none}
.ring-avatar{animation:ring-pulse 1.4s ease-in-out infinite}
.ring-avatar .avatar{width:48px;height:48px;border-radius:50%}
.ring-info{flex:1;min-width:0}.ring-info strong,.ring-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ring-info small{color:#9af5ee;margin-top:4px}
.ring-actions{display:flex;align-items:center;gap:8px;flex:none}
.call-participants{display:flex;align-items:center;min-width:0;padding-left:8px}
.call-bar{border-color:#6ddfca!important;box-shadow:0 10px 48px #000a,0 0 22px #69d3c71d!important}
.call-person{transition:transform .2s}.call-person:hover{transform:scale(1.14)}
@keyframes ring-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.11)}}
@keyframes call-slide{from{opacity:0;translate:0 -15px}to{opacity:1;translate:0 0}}
@media(max-width:760px){.head-tab{font-size:10px;padding:0 5px}.head-tabs{overflow-x:auto;scrollbar-width:none}.head-tabs::-webkit-scrollbar{display:none}.incoming-call{top:max(8px,env(safe-area-inset-top));gap:8px;flex-wrap:wrap}.ring-info{min-width:calc(100% - 72px)}.ring-actions{width:100%;justify-content:stretch}.ring-actions .btn{flex:1}.call-bar{bottom:max(8px,env(safe-area-inset-bottom));padding:10px;gap:6px}.call-participants{order:3;width:100%}.call-actions .btn{font-size:12px}.member-line .role-badge{font-size:9px}}
@media(prefers-reduced-motion:reduce){.incoming-call,.ring-avatar,.call-person{animation:none!important;transition:none!important}}
.owner-badge{color:#ffdda1!important;font-weight:750}
.btn,.head-tab,.sidebar-link,.icon-button,.sidebar-profile,.send-button,.group-card,.user-card{transition:background-color .17s ease,border-color .17s ease,color .17s ease,transform .17s ease,box-shadow .17s ease}
.btn:active,.send-button:active{transform:scale(.97)}
.group-card:hover,.user-card:hover{border-color:#7861aa}
.avatar{transition:border-color .2s,box-shadow .2s}
.avatar:hover{box-shadow:0 0 0 2px #9172cf66}
@media(prefers-reduced-motion:reduce){.btn,.head-tab,.sidebar-link,.icon-button,.sidebar-profile,.send-button,.group-card,.user-card,.avatar{transition:none!important}}

/* V5 · classic moderator desk, privacy acknowledgement, compact call presence */
.consent-control{display:flex!important;align-items:flex-start;gap:10px;margin:9px 0;padding:12px;border:1px solid var(--border2);background:#211f32;border-radius:6px;color:var(--soft);font-size:12px;line-height:1.55;font-weight:500!important}
.consent-control input[type=checkbox]{display:inline-block!important;appearance:auto!important;width:17px!important;height:17px!important;flex:0 0 17px;min-width:17px;margin:2px 0 0!important;padding:0!important;accent-color:var(--purple)}
.consent-control span{min-width:0;flex:1}
.privacy-gate{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,5,13,.94);overflow-y:auto}
.privacy-dialog{width:min(590px,100%);border:1px solid #5b4a83;background:var(--shell);border-radius:9px;box-shadow:0 20px 70px #000b;overflow:hidden;max-height:calc(100dvh - 40px);overflow-y:auto}
.privacy-dialog-body{padding:24px 26px}.privacy-dialog-body h2{font-size:25px;margin:0 0 12px}.privacy-dialog-body p{color:var(--soft);line-height:1.65}
.privacy-dialog-body .modal-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:18px}
.request-state{border:1px solid #413955;background:#19182a;border-radius:6px;padding:14px;overflow-wrap:anywhere}
.request-state .stack{margin-top:10px}.request-state .form-label{display:block}
.approval-pending{color:#e8c38b;font-weight:700}.approval-approved{color:#83e4bc;font-weight:700}
.staff-desk{width:100%;max-width:920px!important}.staff-desk .page-panel,.staff-desk .page-panel-body{min-width:0;max-width:100%}
.approval-card{display:flex;flex-direction:column;gap:7px;padding:12px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.approval-card strong{color:var(--text)}.inline-actions{display:flex;gap:8px;flex-wrap:wrap}
.license-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:14px 0}.license-controls .form-label{max-width:160px}
.licenses-text{width:100%;max-width:100%;min-height:75px;resize:vertical;padding:10px;background:#11121d;border:1px solid var(--border2);border-radius:6px;color:#a9f4ea;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.redeemed-license{width:100%;min-width:0;overflow-wrap:anywhere;background:#171725;border:1px solid #38314c;border-radius:5px;padding:7px 9px;margin:5px 0;color:var(--muted);font-size:11px}
.redeemed-license code{color:#c9b5ff;white-space:normal;overflow-wrap:anywhere}
.redeemed-license small{display:block}
.room-call-banner{flex:none;border-bottom:1px solid #4c847c;background:#202d39;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;max-width:100%;overflow:hidden}
.room-call-left{display:flex;flex-direction:column;gap:6px;min-width:0}.room-call-left strong{color:#8defdf;font-size:12px;white-space:normal;overflow-wrap:anywhere}
.room-call-banner .call-participants{padding-left:4px;max-width:100%;overflow-x:auto;gap:5px}
.room-call-banner .avatar.call-person{height:28px;width:28px;margin:0;border-color:#69d2c7}
.room-call-banner .btn{flex:none;white-space:normal;text-align:center}
.privacy-page{height:auto;min-height:100dvh}.privacy-page main{width:min(830px,calc(100% - 24px));margin:24px auto 55px;padding:22px;background:var(--shell);border:1px solid var(--border2);border-radius:8px}.privacy-page h1{font-size:28px}.privacy-page h2{font-size:17px;margin-top:24px;color:var(--cyan)}.privacy-page p,.privacy-page li{color:var(--soft);line-height:1.75}
@media(max-width:720px){.privacy-gate{padding:10px;align-items:safe center}.privacy-dialog{max-height:calc(100dvh - 20px)}.privacy-dialog-body{padding:17px}.room-call-banner{padding:8px 10px;align-items:flex-start;flex-wrap:wrap;gap:8px}.room-call-banner .btn{margin-left:auto}.license-controls{align-items:stretch}.licenses-text{font-size:11px}.staff-desk .user-card{flex-wrap:wrap}.redeemed-license{flex-basis:100%}}
@media(max-width:390px){.room-call-banner .btn{width:100%}.privacy-dialog-body .modal-actions .btn{flex:1}.consent-control{padding:10px}}

/* V6: single race-safe roster, mobile, owner tools, discreet staff/official marks */
.role-badge.staff{padding:1px 3px;min-width:20px;justify-content:center;font-size:15px;letter-spacing:0;border:0;background:none;color:inherit;box-shadow:none!important;text-shadow:none!important;filter:none!important;border-radius:0}
.role-badge.staff:hover{background:none;box-shadow:none!important}
.official-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid #8a80bf;background:#292340;border-radius:5px;color:#dacdfa;font-size:11px;font-weight:700}
.roster-slot{width:100%;min-width:0}.detail-sidebar.hidden{display:none!important}
.staff-group-row{padding:10px 0;border-bottom:1px solid var(--border2);display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.staff-group-row span{min-width:0;overflow-wrap:anywhere;flex:1}
.detail-sidebar{overflow-y:auto;overscroll-behavior:contain}
@media(max-width:760px){.staff-group-row{align-items:stretch}.staff-group-row .btn{width:auto;flex-shrink:0}.roster-slot,.roster-list{overflow-wrap:anywhere}}

@media(min-width:901px){.workspace-body.no-details{grid-template-columns:250px minmax(0,1fr)}}

.official-mini{font-size:12px;color:#c0a3ff;flex:none}


/* V7 · HeroUI-inspired surfaces, image browser, attachment composer, experimental switches */
:root{--v7-surface:#1c1b29;--v7-outline:#454159;--v7-focus:#9e87e7}
.btn,.auth-window,.page-panel,.modal,.user-card,.input-row,.group-card{border-radius:10px}
.btn:focus-visible,.picker-tab:focus-visible,.gif-category:focus-visible,.gif-tile button:focus-visible,.compose-attach:focus-visible,.compose-image:focus-visible{outline:2px solid var(--v7-focus);outline-offset:2px}
.compose-attach,.compose-image{background:#242334;border:1px solid #59516e;color:#c7b3fa;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;font-size:22px;cursor:pointer;flex:none}
.compose-image{color:#9de8e0}.compose-attach:hover,.compose-image:hover{background:#352e4a;border-color:#9986d2}
.attached-file{max-width:100%;width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#d9cdfd;background:#2b2543;border:1px solid #7963ae;border-radius:9px;margin-bottom:7px;padding:7px 11px;font-size:12px;overflow-wrap:anywhere}
.attached-file span{min-width:0;overflow-wrap:anywhere}
.attached-file .icon-button{flex:none}
.file-attachment{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:min(425px,100%);min-width:0;padding:8px 10px;border-radius:12px;background:#24243a;border:1px solid #575176;margin:6px 0}
.file-action-row{display:flex;align-items:center;gap:9px;max-width:100%;min-width:0;flex-wrap:wrap}.file-download{color:#b7eae8;text-decoration:none;overflow-wrap:anywhere;font-size:12px}.file-download:hover{text-decoration:underline}
.file-image{display:block;max-width:100%}.file-image img{margin:0}
.embed-image{max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:6px 0}.embed-image img{margin:0;cursor:pointer}.embed-copy{border:0;background:transparent;color:#ad9cc5;font-size:10px;cursor:pointer;padding:3px 2px}.embed-copy:hover{color:white;text-decoration:underline}
.picker-tabs{display:flex;gap:4px;border:1px solid #484156;background:#171620;padding:5px;border-radius:14px;margin-bottom:14px}
.picker-tab{border:0;border-radius:10px;background:transparent;color:#aaa8bb;font-weight:700;font-size:14px;padding:10px;flex:1;cursor:pointer}.picker-tab.selected{background:#403957;color:white}
.gif-browser{max-width:100%;display:flex;flex-direction:column;gap:12px;min-width:0}.gif-browser h3{font-size:15px;margin:4px 0;color:#eae8f5}
.gif-search{display:flex;gap:8px;align-items:center}.gif-search input{min-width:0;flex:1;width:100%;border:1px solid #50485e;border-radius:11px;padding:12px;background:#101017;color:#f4f4fc;font-size:15px}
.gif-categories,.gif-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:100%;min-width:0}.gif-category{min-height:96px;border-radius:12px;border:1px solid #564d64;background:linear-gradient(142deg,#4e4459,#302c42);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:750;font-size:14px;overflow-wrap:anywhere;padding:8px}
.gif-category:nth-child(5n+2){background:linear-gradient(130deg,#555062,#394355)}.gif-category:nth-child(5n+3){background:linear-gradient(130deg,#493b57,#39405a)}.gif-category:nth-child(5n+4){background:linear-gradient(130deg,#3e4654,#524155)}.gif-category:hover{border-color:#a68bcf;filter:brightness(1.15)}
.gif-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gif-tile{position:relative;background:#11101a;border:1px solid #57506b;border-radius:10px;overflow:hidden;min-height:100px;max-height:240px}.gif-tile img{height:100%;width:100%;object-fit:cover;display:block}.gif-tile-send{position:absolute;inset:0;background:transparent;color:transparent;border:0;cursor:pointer;font-size:0}.gif-tile-send:focus-visible,.gif-tile:hover .gif-tile-send{background:#0005;color:white;font-size:13px}.gif-star{position:absolute;right:5px;top:5px;background:#13121ac9;border:1px solid #9d8cbb;border-radius:50%;color:#fff;width:27px;height:27px;cursor:pointer;font-size:17px}
.giphy-credit{align-self:flex-end;color:#bab2cf;font-size:11px;text-decoration:none}.giphy-credit:hover{text-decoration:underline}
.gif-api-notice{border:1px solid #8d6f50;background:#332a28;padding:10px;border-radius:9px;font-size:12px;color:#ffd9a8;line-height:1.5}
.experimental-row{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #494255}.experimental-row>div{min-width:0;flex:1}.experimental-row strong,.experimental-row small{display:block}.experimental-row small{color:#aba7c0;font-size:12px;line-height:1.5;margin-top:4px}
.switch-control{flex:none;position:relative;display:block;cursor:pointer}.switch-control input{position:absolute;opacity:0;width:1px;height:1px}.switch-track{display:block;width:48px;height:28px;background:#50465b;border-radius:20px;transition:background .2s}.switch-track:after{content:'';position:absolute;left:4px;top:4px;width:20px;height:20px;background:white;border-radius:50%;transition:transform .2s}.switch-control input:checked+.switch-track{background:#8263cf}.switch-control input:checked+.switch-track:after{transform:translateX(20px)}.switch-control input:focus-visible+.switch-track{outline:2px solid #a3eee4;outline-offset:3px}
@media(max-width:720px){.compose-attach,.compose-image{width:34px;min-width:34px;height:34px}.gif-categories{gap:7px}.gif-category{min-height:82px;font-size:13px}.gif-browser{gap:10px}.gif-search input{font-size:16px}.gif-grid{gap:7px}.experimental-row{gap:9px}.modal-body{padding:12px}.file-attachment{width:100%}}
@media(prefers-reduced-motion:reduce){.switch-track,.switch-track:after{transition:none}}

/* V8: Staff-only archive of removed message text; readable at mobile widths. */
.deleted-record{display:flex;flex-direction:column;gap:8px;margin:11px 0;padding:12px 14px;border:1px solid var(--border);border-radius:9px;background:rgba(12,13,25,.36);min-width:0}
.deleted-record strong{font-size:12px;color:var(--soft);overflow-wrap:anywhere}
.deleted-record small{font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.deleted-text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%;max-height:240px;overflow:auto;border-radius:6px;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:12px/1.5 ui-monospace,Consolas,monospace}
@media(max-width:720px){.deleted-record{padding:10px}.deleted-text{font-size:11px;max-height:180px}}

/* V9: independent scrolling panels. Always keep the composer inside the viewport. */
html,body{width:100%;height:100%;overflow:hidden}
.workspace{height:100dvh;max-height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.workspace-body{flex:1 1 auto;height:auto;min-height:0;max-height:100%;overflow:hidden;display:grid}
.content{height:auto;min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}
.view-header{flex:0 0 auto;min-height:0;min-width:0;max-width:100%;overflow:hidden}
.header-actions{min-width:0;max-width:55%;overflow-x:auto;flex-shrink:0}
.chat-view{height:auto;min-height:0;min-width:0;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}
.chat-messages{height:auto;min-height:0;min-width:0;flex:1 1 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.message-form{display:block;flex:0 0 auto;min-height:0;position:relative;z-index:2;max-width:100%;margin-bottom:0!important;box-sizing:border-box}
.input-row{min-width:0;max-width:100%;box-sizing:border-box}.input-row input{min-width:0;flex:1 1 0}
.workspace.in-call .chat-view{padding-bottom:90px}
.embedded-video{display:block;max-width:100%;width:min(580px,100%);max-height:min(48vh,440px);object-fit:contain;background:#101018;border:1px solid #4d425f;border-radius:9px;margin:8px 0}
.file-attachment{max-width:100%;min-width:0;overflow-wrap:anywhere}
/* Signup and login must scroll even with a small desktop window, high zoom or keyboard. */
#auth.auth-screen{position:fixed;inset:0;height:auto;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;justify-content:flex-start;align-items:center;padding:clamp(16px,3vh,36px) 16px 48px;box-sizing:border-box;overscroll-behavior-y:contain}
#auth .auth-window{flex:0 0 auto;margin:12px auto 0;width:min(510px,100%);overflow:visible}
#auth .auth-masthead{flex:0 0 auto;margin:0 auto}
#auth .auth-bottom{flex:0 0 auto;margin:16px auto 0;text-align:center}
#auth #finishForm .btn[type=submit]{min-height:46px;flex-shrink:0}
@media(max-width:720px){
 .workspace.in-call .chat-view{padding-bottom:108px}
 .view-header{padding:9px 11px}
 .header-actions{max-width:52%}
 .message-form{padding-bottom:max(9px,env(safe-area-inset-bottom))}
 #auth.auth-screen{padding:12px 10px 48px}
 #auth .auth-window{margin-top:8px}
}
/* Constrain the GRID ROW as well as its flex children: fixes desktop composer clipping. */
.workspace-body{grid-template-rows:minmax(0,1fr)!important}
.workspace-body>.content{height:100%;max-height:100%;min-height:0;min-width:0;align-self:stretch}

/* V9.1: Direct Message sidebar is removable without removing any relationship or history. */
.dm-sidebar-row{display:flex;align-items:center;min-width:0;gap:1px;border-radius:5px}
.dm-sidebar-row .sidebar-link{flex:1;min-width:0;width:auto;padding-right:3px}
.dm-hide-button{flex:0 0 28px;height:30px;margin-right:3px;border:0;border-radius:5px;background:transparent;color:#aba1c2;font-size:20px;line-height:1;cursor:pointer}
.dm-hide-button:hover,.dm-hide-button:focus-visible{background:#45314c;color:#fff;outline:1px solid #9277ba}
@media(max-width:760px){.dm-hide-button{width:34px;height:38px;flex-basis:34px}}

/* V10: compact voice room and advanced audio controls. No chat layout overflow. */
.call-bar{width:min(665px,calc(100vw - 20px));bottom:max(10px,env(safe-area-inset-bottom));
 flex-direction:column;align-items:stretch;gap:9px;padding:11px 13px;background:#171724;
 border-color:#594c79;box-shadow:0 14px 42px #000b;border-radius:14px;max-height:78dvh;}
.call-topline{display:flex;align-items:center;gap:13px;justify-content:space-between;min-width:0;max-width:100%}
.call-meta{flex:0 1 auto;min-width:0}.call-meta strong{font-size:12px}.call-meta small{font-size:11px;color:#8de5d6;margin-top:3px}
.call-participants{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;overflow-x:auto;overflow-y:hidden;padding:6px 3px}
.call-avatar-shell{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:2px solid #6e6583;background:#2f2a41;transition:border-color .1s,box-shadow .1s}
.call-avatar-shell .avatar.call-person{width:32px;height:32px;margin:0;border:none;border-radius:50%;object-fit:cover;aspect-ratio:1}
.call-avatar-shell.voice-avatar-local{border-color:#9276d6}
.call-avatar-shell.voice-talking{border-color:#45ed94;box-shadow:0 0 calc(4px + var(--voice-intensity,0)*11px) #21e98e99,0 0 0 2px #29b77760}
.call-actions{width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:9px}
.call-actions .btn{padding:8px 12px;border-radius:8px;min-height:36px}
.call-actions .btn:disabled{opacity:.5;cursor:not-allowed}
.call-device-panel{position:absolute;right:12px;bottom:calc(100% + 9px);width:min(335px,calc(100vw - 30px));padding:15px;display:flex;flex-direction:column;gap:12px;
 border:1px solid #716391;border-radius:13px;background:#201d2d;box-shadow:0 16px 40px #000c;
 max-height:min(65dvh,470px);overflow-y:auto;overscroll-behavior:contain;z-index:1}
.call-device-panel.hidden{display:none!important}.call-device-title{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #65577855;padding-bottom:8px}
.call-device-title strong{font-size:14px;color:white}.call-device-title button{color:#d5c8e8}
.device-field{display:flex;flex-wrap:wrap;gap:7px;font-size:12px;color:#e1d9f1;align-items:center;justify-content:space-between}
.device-field>select{width:100%;min-width:0;background:#13111d;color:white;border:1px solid #60577c;border-radius:7px;padding:9px;min-height:39px}
.device-field>input[type=range]{width:100%;min-width:0;accent-color:#9272ea;cursor:pointer}
.device-field>span{color:#dbd0f8}.device-field>span:last-child{margin-left:auto}
.voice-meter{width:100%;height:13px;background:repeating-linear-gradient(90deg,#3d384f 0 6px,#191723 6px 9px);border:1px solid #4f4667;border-radius:5px;overflow:hidden}
.voice-meter-fill{width:0%;height:100%;background:linear-gradient(90deg,#52e8a7,#35f0c3);border-radius:4px;transition:width .08s linear}
.call-device-hint{margin:0;font-size:11px;line-height:1.5;color:#afa4c1}
@media(max-width:720px){
 .call-bar{bottom:max(5px,env(safe-area-inset-bottom));padding:9px 10px;gap:6px;width:calc(100vw - 12px);}
 .call-topline{gap:4px;min-width:0}
 .call-participants{order:initial;width:auto;max-width:56%;justify-content:flex-end;padding:5px 0}
 .call-avatar-shell{width:34px;height:34px}
 .call-avatar-shell .avatar.call-person{width:26px;height:26px}
 .call-actions{order:initial;width:100%;gap:6px}
 .call-actions .btn{flex:1 0 auto;font-size:12px;padding:7px 10px}
 .call-device-panel{left:5px;right:5px;width:auto;max-height:54dvh;padding:11px;}
 .workspace.in-call .message-form{margin-bottom:118px}
}
@media(max-height:550px){.call-device-panel{max-height:55dvh}.call-bar{padding:6px 10px}.workspace.in-call .message-form{margin-bottom:115px}}

/* MP Rooms V10.1: connection-in-progress controls remain visible and usable. */
.call-bar.call-connecting { border-top: 2px solid rgba(142,108,219,.6); }
#callEnableSound:not(.hidden) { background:#63528f;color:white;border:1px solid #8f78cb; }