:root{font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;color:#edf0f7;background:#101219;--bg:#101219;--rail:#0d0e14;--side:#171923;--main:#1d202b;--card:#282b39;--line:#343747;--muted:#a7adbf;--accent:#776cff;--accent2:#9c87ff;--danger:#fa747b;--green:#56d6a5}
    *{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.45;cursor:not-allowed}input,textarea,select{color:inherit;background:#141620;border:1px solid #404456;border-radius:10px;padding:11px 13px;outline:none}input:focus,textarea:focus,select:focus,button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}textarea{resize:vertical}a{color:#b4aeff}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:.83rem}.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#b2b5c7}.accent{color:var(--accent2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;background:var(--card);padding:10px 14px;font-weight:650;min-height:42px;white-space:nowrap}.btn:hover,.navitem:hover,.iconbtn:hover,.servericon:hover{background:#383c4e}.btn.primary{background:var(--accent);color:white}.btn.primary:hover{background:#8a7fff}.btn.danger{background:#893e49}.btn.outline{background:transparent;border:1px solid var(--line)}.iconbtn{background:transparent;border-radius:11px;width:42px;height:42px;font-size:1.27rem;display:grid;place-items:center}.iconbtn.active{color:#fff;background:#393261}.avatar{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#353949;flex:none;font-size:1.25rem}.onlineDot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px #1b1d28;flex:none}.offlineDot{background:#6b7080}.pill{font-size:.76rem;font-weight:700;background:#393451;color:#c7baff;border-radius:6px;padding:2px 6px;white-space:nowrap}.app{height:100dvh;display:grid;grid-template-columns:70px 268px minmax(0,1fr) 234px;grid-template-rows:62px minmax(0,1fr);background:var(--main)}
    .top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--line);background:#11131b;min-width:0}.brand{font-weight:850;letter-spacing:-.045em;font-size:1.43rem;margin-right:auto;display:flex;align-items:center;gap:10px}.mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(140deg,#8377ff,#5347da);color:white;font-weight:900;box-shadow:0 0 23px #665aff55}.topnote{color:#a8a9ba;font-size:.85rem}.rail{background:var(--rail);border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;gap:12px;padding:16px 8px;overflow:auto}.servericon{background:#272b38;width:49px;height:49px;border-radius:17px;display:grid;place-items:center;font-size:1.44rem;flex:none;transition:border-radius .15s,background .15s;position:relative}.servericon:hover,.servericon.selected{border-radius:13px;background:#554bc3}.servericon.selected:before{content:"";position:absolute;left:-8px;width:4px;height:28px;background:#a69fff;border-radius:0 4px 4px 0}.railsep{width:27px;height:1px;background:var(--line);flex:none}.sidebar{background:var(--side);display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}.sidehead{padding:19px 18px 12px;display:flex;align-items:center;gap:8px;justify-content:space-between;min-height:70px}.sidehead h2{font-size:1.09rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.sidebody{overflow-y:auto;flex:1;padding:6px 10px 18px}.sectionhead{display:flex;align-items:center;justify-content:space-between;padding:18px 10px 8px}.navitem{width:100%;background:transparent;color:#b8bbca;border-radius:10px;text-align:left;display:flex;align-items:center;gap:10px;padding:10px 11px;min-height:42px;margin:2px 0}.row>.navitem{min-width:0;flex:1}.navitem.selected{background:#393452;color:white}.navitem .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.navitem .tiny{font-size:.76rem}.self{border-top:1px solid var(--line);padding:10px;display:flex;align-items:center;gap:9px;background:#14161f}.selfText{flex:1;min-width:0}.selfText strong,.selfText span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selfText span{color:var(--muted);font-size:.8rem}.center{min-width:0;display:flex;flex-direction:column;position:relative}.roomhead{height:70px;min-height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 22px}.roomhead h1{font-size:1.04rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roomhead .heading{flex:1;min-width:0}.roomhead small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}.messages{flex:1;overflow:auto;padding:24px max(20px,4vw) 12px;min-height:120px}.msg{display:flex;gap:12px;margin:0 0 18px}.msgContent{flex:1;min-width:0}.msgHead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.msgHead strong{font-size:.94rem}.msgHead time,.msgHead .expire{color:var(--muted);font-size:.76rem}.msgBody{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.97rem;margin-top:3px}.gif{display:block;max-width:min(340px,100%);max-height:250px;object-fit:contain;border-radius:11px;margin-top:8px}.deleteMsg{font-size:.8rem;background:none;color:#9e9fae;margin-left:auto;padding:3px 6px}.deleteMsg:hover{color:var(--danger)}.composeWrap{padding:12px 18px 19px;background:linear-gradient(transparent,#1d202b 23%)}.compose{display:flex;align-items:flex-end;gap:8px;padding:7px;background:#2a2d3a;border-radius:15px;border:1px solid #3a3d4c}.compose textarea{background:none;border:0;resize:none;flex:1;min-width:0;max-height:145px;min-height:42px;line-height:1.5;padding:9px 5px}.compose textarea:focus{outline:0}.expiry{font-size:.82rem;padding:5px 8px;margin:0 0 5px 7px;color:var(--muted)}.expiry select{font-size:.83rem;padding:5px;background:transparent;border:0}.empty{margin:auto;text-align:center;max-width:390px;padding:35px;color:var(--muted)}.empty .big{font-size:2.6rem;margin-bottom:14px}.empty strong{display:block;color:#f0f0fa;font-size:1.18rem;margin-bottom:5px}.friendsPanel{padding:25px max(22px,4vw);overflow:auto}.panelTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.panelTitle h1{margin:0;font-size:1.25rem}.friendGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.friendcard{background:#252936;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center}.friendcard .info{flex:1;min-width:0}.friendcard .info strong,.friendcard .info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friendcard .info span{color:var(--muted);font-size:.84rem}.friendcard .avatar{width:43px;height:43px}.friendcard .actions{display:flex;gap:3px}.callbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 18px;background:#322b56;border-top:1px solid #675aa4}.callbar>div:first-child{min-width:0}.callbar strong,.callbar small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.callControls{display:flex;align-items:center;gap:5px}.videos{display:flex;gap:8px;overflow:auto;max-height:220px;padding:8px 16px;background:#14141d}.videos video{width:260px;max-height:190px;object-fit:contain;background:black;border-radius:9px}.right{background:#1a1c27;border-left:1px solid var(--line);padding:20px 13px;overflow:auto}.right h3{margin:0 0 15px;font-size:.81rem;color:#adb0c2;letter-spacing:.1em;text-transform:uppercase}.right .navitem{font-size:.89rem}.right .miniInfo{margin-top:26px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:.83rem}.toast{position:fixed;right:23px;bottom:25px;z-index:30;background:#34334d;color:#fff;max-width:350px;border:1px solid #7b71bd;border-radius:12px;padding:13px 16px;box-shadow:0 12px 38px #0008}.ring{position:fixed;z-index:21;top:78px;right:20px;width:min(350px,calc(100vw - 30px));border-radius:16px;background:#322c4d;border:1px solid #8977c9;padding:18px;box-shadow:0 14px 38px #0009}.ring .row{display:flex;gap:10px;margin-top:14px}.tagemoji{max-height:18px;max-width:18px;vertical-align:middle}.hint{font-size:.82rem;color:var(--muted);margin:3px 0 12px}
    dialog{color:inherit;background:#20232f;border:1px solid #515266;border-radius:20px;padding:0;box-shadow:0 25px 90px #000c;max-height:min(91dvh,850px);max-width:calc(100vw - 22px)}dialog::backdrop{background:#080810bb;backdrop-filter:blur(4px)}.modal{padding:25px;width:min(430px,calc(100vw - 28px));max-height:85dvh;overflow:auto}.modal.wide{width:min(680px,calc(100vw - 28px))}.modalHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.modalHeader h2{font-size:1.24rem;margin:0}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:.85rem;color:#c2c4d5;font-weight:650}.field input,.field textarea,.field select{width:100%}.row{display:flex;align-items:center;gap:10px}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 22px}.tabs button{padding:9px 12px;border-radius:9px;background:#2b2e3d}.tabs button.active{background:#534c93}.range{width:100%;accent-color:var(--accent);cursor:pointer}.searchResult{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.searchResult .info{flex:1;min-width:0}.searchResult strong,.searchResult small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.searchResult small{color:var(--muted)}.authCover{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 75% 24%,#35306a 0%,transparent 38%),#101219;display:grid;place-items:center;padding:20px}.authCard{width:min(425px,100%);background:#1f2230;border:1px solid #44465b;border-radius:21px;padding:30px;box-shadow:0 20px 65px #0009}.authCard h1{font-size:1.65rem;margin:17px 0 4px}.authCard p{color:var(--muted);margin:0 0 24px}.authCard input{width:100%}.authCard .btn{width:100%;margin:8px 0}.authCard .tabs{justify-content:center}.authErr{color:#ff9fa5;min-height:24px;font-size:.89rem}.banner{background:#5a3341;border:1px solid #b56b78;padding:9px 15px;border-radius:9px;margin-bottom:14px;font-size:.88rem}.mobileMenu{display:none}.mobileBack{display:none}
    @media(max-width:1050px){.app{grid-template-columns:66px 254px minmax(0,1fr)}.right{display:none}}
    @media(max-width:700px){.app{grid-template-columns:58px minmax(0,1fr);grid-template-rows:56px minmax(0,1fr)}.top{padding:0 10px}.brand{font-size:1.24rem}.topnote{display:none}.rail{grid-column:1;grid-row:2}.sidebar{position:absolute;z-index:11;top:56px;bottom:0;left:58px;width:min(285px,calc(100vw - 58px));box-shadow:14px 0 35px #0006}.app:not(.showSide) .sidebar{display:none}.center{grid-column:2;grid-row:2}.roomhead{height:60px;min-height:60px;padding:0 10px;gap:5px}.roomhead .iconbtn{width:36px}.mobileMenu,.mobileBack{display:grid}.messages{padding:16px 12px}.composeWrap{padding:6px 7px 10px}.compose{gap:3px}.compose .iconbtn{width:33px;height:39px;font-size:1.1rem}.compose .btn{padding:8px}.callbar{flex-wrap:wrap}.callControls{flex-wrap:wrap}.friendsPanel{padding:18px 13px}.friendGrid{grid-template-columns:1fr}.ring{top:66px;right:8px}}
    body.lowPower *,body.lowPower *:before,body.lowPower *:after{animation:none!important;transition:none!important;backdrop-filter:none!important;box-shadow:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Compact graphite layout, based on the friend's view in the reference image. */
:root{--bg:#13141b;--rail:#111218;--side:#1d1f27;--main:#22242c;--card:#2b2e3a;--line:#3c3e4c;--accent:#7369f2;--accent2:#a69fff;--green:#65dfbc}
body{background:var(--main)}.app{background:var(--main);grid-template-rows:58px minmax(0,1fr)}
.top{position:relative;background:#14151c;border-top:2px solid #776bfd;padding:0 22px}.topnote{margin-right:auto;font-size:.72rem;letter-spacing:.12em;font-weight:750}.top .brand{position:absolute;left:50%;transform:translateX(-50%);margin:0;font-size:1.31rem;pointer-events:none;white-space:nowrap}.brandIcon{display:block;flex:none;width:36px;height:36px}.authCard .brandIcon{width:42px;height:42px}.authCard .brand{justify-content:center;margin:0}.top>.iconbtn{color:#d9d8e9}
.rail{background:#111218}.rail .servericon:first-child{font-size:1.7rem}.sidebar{background:#1b1d24}.sidehead{border-bottom:1px solid var(--line);min-height:62px}.sidebody{background:#1c1e25}.self{background:#111218;border:1px solid #343645;border-radius:14px;margin:8px;padding:9px}.selfText strong{font-size:.9rem}.navitem.selected{background:#514b7f}.center{background:#25272f}.roomhead{height:62px;min-height:62px;background:#292b33}.right{background:#1d1f27}.right h3{color:#e0dffa}.friendcard{background:#2b2d37;border-color:#3d3e49;transition:background .15s}.friendcard:hover{background:#343641}.friendcard .info strong{color:#f3f2fb}.friendcard .info .playing{color:#8eeacb;font-weight:650}.friendcard .info .topGame{color:#b9b6c9}.friendcard .actions .iconbtn{font-size:1.12rem}.friendsPanel{background:#25272f}.panelTitle{border-bottom:1px solid #434451;padding-bottom:16px}.panelTitle h1{font-size:1.55rem}.panelTitle .eyebrow{color:#a89fff}.activitySpotlight{margin:0 0 20px;background:#1b1d26;border:1px solid #424355;border-radius:17px;padding:17px 18px}.activitySpotlight h2{margin:0 0 10px;font-size:.84rem;text-transform:uppercase;letter-spacing:.09em;color:#c5c0ef}.activityTiles{display:flex;flex-wrap:wrap;gap:9px}.activityTile{border:1px solid #3f4351;background:#292c36;border-radius:11px;padding:9px 12px;font-size:.83rem;display:flex;gap:8px;align-items:center}.activityTile strong{color:#fff}.activityTile small{display:block;color:#a3a9bd}.activityTile.emptyTile{color:#aeb2c2}.friendsPanel .btn.primary{background:#7166ea}.composeWrap{background:linear-gradient(transparent,#25272f 23%)}.compose{background:#30333e}
.avatar{overflow:hidden;background:#3b3e4b;border:1px solid #555769;color:#f3f0ff}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.photoPreview{width:52px;height:52px;font-size:1.7rem}.privacy{font-size:.86rem;color:#d7d8e7;margin:10px 0 20px}.privacy input{width:auto!important}.right .activitySmall{display:block;font-size:.74rem;color:#80dbbe;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.right .topSmall{display:block;color:#aeb4c5;font-size:.72rem}.right .navitem{min-height:58px}.right .navitem .label{line-height:1.2}
.installBanner{position:fixed;z-index:80;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:13px;padding:9px 16px;background:#191927;border-bottom:2px solid #8177f7;box-shadow:0 6px 25px #0008}.installBanner>div{flex:1;max-width:450px}.installBanner strong,.installBanner small{display:block}.installBanner small{font-size:.75rem;color:#c1c2d2}.installBanner .btn{min-height:37px;font-size:.86rem}body.hasInstall .app{height:calc(100dvh - var(--install-h,58px));margin-top:var(--install-h,58px)}body.hasInstall .authCover{top:var(--install-h,58px)}
.homeDock{min-height:68px;background:#101116;border:1px solid #3e404d;border-radius:13px;margin:8px 14px 10px;padding:8px 12px;display:flex;align-items:center;gap:10px}.homeDock .avatar{width:46px;height:46px}.dockInfo{flex:1;min-width:0}.dockInfo strong,.dockInfo span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dockInfo span{font-size:.8rem;color:#a7aabe}.homeDock .iconbtn{border:1px solid #555668;border-radius:50%;font-size:1.13rem;width:39px;height:39px}
.authCover{overflow-y:auto;display:flex;align-items:flex-start;justify-content:center}.authCard{margin:auto 0}
.deviceStatus{border:1px solid #474958;border-radius:10px;background:#292b36;padding:10px 12px;font-size:.85rem;color:#d5d5e7;margin-bottom:10px}#audioSettings .row.wrap{margin:10px 0 19px}.micMeter{height:11px;background:#151822;border-radius:9px;overflow:hidden;margin:10px 0 16px}.micMeter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#6bdbbd,#a9e7cb);transition:width .08s}
.activityCurrent{border:1px solid #48495c;background:#282b38;border-radius:11px;padding:12px;margin:8px 0 14px}.activityCurrent strong{color:#94e7c9}.yearContent{margin:16px 0}.recapHero{padding:24px;border-radius:19px;background:linear-gradient(125deg,#40386e,#262939 61%,#18524c);border:1px solid #7d74b2}.recapHero .eyebrow{color:#cfcaff}.recapHero h3{font-size:2rem;margin:8px 0 4px}.recapHero p{margin:0;color:#d9d9ee}.recapStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}.recapStat{border-radius:12px;background:#30313e;padding:13px}.recapStat strong{display:block;font-size:1.2rem;color:#fff}.recapStat small{color:#c0c0d1}.recapGames{margin:14px 0 0}.recapGame{margin:12px 0}.recapGame .row{justify-content:space-between;font-size:.87rem}.recapTrack{height:8px;border-radius:5px;background:#3d3e4d;overflow:hidden}.recapTrack span{display:block;height:100%;background:linear-gradient(90deg,#786cf5,#69d6c8)}
@media(max-width:1050px){.app{grid-template-columns:66px 254px minmax(0,1fr)}}
@media(max-width:700px){.app{grid-template-rows:56px minmax(0,1fr)}.top{padding:0 7px}.top .brand{position:static;transform:none;flex:1;min-width:0;font-size:1.05rem}.top .brandIcon{width:29px;height:29px}.top>.iconbtn{width:38px}.sidebar{top:56px}.installBanner{justify-content:space-between;gap:8px;padding:8px}.installBanner img{width:29px;height:29px}.installBanner strong{font-size:.8rem}.installBanner small{font-size:.68rem}.installBanner .btn{font-size:.72rem;padding:5px 8px}.recapStats{grid-template-columns:1fr 1fr}.friendsPanel{padding:16px 12px}.panelTitle .btn{font-size:.82rem;padding:8px}.homeDock{margin:5px;padding:6px;gap:5px}.homeDock .avatar{width:37px;height:37px}.dockInfo strong{font-size:.85rem}.dockInfo span{font-size:.7rem}.homeDock .iconbtn{width:32px;height:32px}}
@media(max-width:700px){body.hasInstall .sidebar{top:calc(var(--install-h,58px) + 56px)}}

/* Talk: one layout for the in-app stage and its fullscreen view. */
.callStage {
  --talk-border:#494960;
  --talk-surface:#1a1d2a;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  flex:none;
  min-width:0;
  margin:12px 16px 0;
  overflow:hidden;
  border:1px solid var(--talk-border);
  border-radius:18px;
  background:radial-gradient(ellipse at 48% -65%,#514577 0%,transparent 72%),#20222e;
  box-shadow:0 14px 38px #090b1680;
}
.callStage::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(130deg,#ffffff06,transparent 56%);
}
.callStage .callbar {
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px 9px;
  background:transparent;
  border:0;
}
.callInfo {display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.callInfo strong {display:block; color:#faf8ff; font-size:1.04rem; letter-spacing:-.025em; line-height:1.25; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.callInfo small {color:#aaaec3; font-size:.73rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.callEyebrow {display:flex; align-items:center; gap:7px; color:#7ceac4; font-size:.63rem; font-weight:800; letter-spacing:.1em; white-space:nowrap}
.callLiveDot,.connectionDot {display:inline-block; width:7px; height:7px; flex:none; border-radius:50%; background:#6de6ba; box-shadow:0 0 0 3px #6de6ba18}
.callEyebrowLine {height:9px; width:1px; margin:0 3px; background:#72748e80}
.callActions {display:flex; align-items:center; gap:7px; flex:none}
.callConnection {display:none; align-items:center; gap:9px; height:35px; padding:0 11px; border:1px solid #5c706b88; border-radius:11px; background:#1e343055; color:#bdebdc; font-size:.75rem; white-space:nowrap}
.callConnection.connecting {background:#3b34295b; border-color:#91785778; color:#e1c79b}
.callConnection.connecting .connectionDot {background:#dfbc84; box-shadow:0 0 0 3px #dfbc8422}
.callConnection.alone {background:#ffffff0b; border-color:#ffffff20; color:#bfc1d1}
.callConnection.alone .connectionDot {background:#a6a9bb; box-shadow:0 0 0 3px #a6a9bb1b}
.callHeaderButton {display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:35px; height:35px; padding:0 8px; border:1px solid #ffffff20; border-radius:10px; background:#ffffff0c; color:#dcdded; font-size:.73rem; font-weight:650; white-space:nowrap}
.callHeaderButton:hover,.callControl:hover {background:#ffffff24; color:#fff}
.callHeaderButton span {display:none}
.callHeaderButton svg,.callControl svg,.callEnd svg,.speakerMuted svg {display:block; width:19px; height:19px; flex:none}
.callControls {display:flex; align-items:center; gap:5px; flex:none; justify-content:flex-end; margin-left:auto}
.callControl {display:inline-flex; align-items:center; justify-content:center; gap:7px; width:36px; height:36px; flex:none; padding:0; border:1px solid #ffffff20; border-radius:10px; background:#ffffff0c; color:#e6e6f4; transition:background .18s,border-color .18s,color .18s}
.callControl.active {background:#7f596433; border-color:#e97f8c66; color:#ffb4c0}
.callControl[data-action="camera"].active,.callControl[data-action="screen"].active {background:#28634b66; border-color:#63dcaa75; color:#a8f8d5}
.callControl[data-action="deafen"].active {background:#86475261; color:#ffc4c8}
.controlLabel,.controlDivider {display:none}
.callEnd {display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 12px; flex:none; border:1px solid #da708466; border-radius:10px; background:#a13f54; color:white; font-size:.8rem; font-weight:720; white-space:nowrap}
.callEnd:hover {background:#bf5066}
.speakerGrid {position:relative; z-index:1; display:flex; gap:8px; align-items:stretch; min-width:0; overflow-x:auto; padding:1px 16px 14px; scrollbar-width:thin}
.speakerTile {position:relative; display:flex; align-items:center; gap:9px; flex:1; min-width:155px; max-width:245px; padding:9px; border:1px solid #65687b80; border-radius:12px; background:#151925bb; transition:border-color .18s,background .18s,box-shadow .18s}
.speakerTop {display:none}
.speakerPortrait {position:relative; display:grid; place-items:center; flex:none}
.speakerPortrait .avatar {width:36px; height:36px; border-radius:11px}
.speakerFooter {display:flex; align-items:center; gap:7px; min-width:0; flex:1}
.speakerInfo {display:block; min-width:0; flex:1; line-height:1.22}
.speakerInfo strong,.speakerState {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.speakerInfo strong {color:#f5f5ff; font-size:.8rem; font-weight:750}
.speakerState {margin-top:3px; color:#adb2c6; font-size:.71rem}
.speakerTile.speaking {border-color:#74e6bc; background:#243d3b; box-shadow:inset 0 0 0 1px #79e4c033}
.speakerTile.speaking .speakerState {color:#95f2ce; font-weight:650}
.speakerTile.isMuted .avatar {filter:saturate(.6); opacity:.76}
.speechBars {display:flex; align-items:center; justify-content:center; gap:2px; height:18px; opacity:.38; flex:none}
.speechBars i {display:block; width:3px; height:6px; border-radius:8px; background:#8ce7bd; transition:height .16s}
.speechBars i:nth-child(2) {height:10px}
.speechBars i:nth-child(4) {height:8px}
.speakerTile.speaking .speechBars {opacity:1}
.speakerTile.speaking .speechBars i:nth-child(1) {height:14px}
.speakerTile.speaking .speechBars i:nth-child(2) {height:8px}
.speakerTile.speaking .speechBars i:nth-child(3) {height:17px}
.speakerTile.speaking .speechBars i:nth-child(4) {height:11px}
.callStage .videos {display:flex; align-items:flex-start; gap:9px; overflow:auto; max-height:min(35vh,300px); padding:8px 16px 14px; background:#121622a8}
.videoTile {position:relative; flex:none; width:min(300px,80vw); overflow:hidden; border:1px solid #62677d; border-radius:12px; background:#0d0f16; aspect-ratio:16/9}
.callStage .videos .videoTile video {display:block; width:100%; height:100%; max-height:none; border:0; border-radius:0; object-fit:contain}
.videoCaption {position:absolute; bottom:10px; left:10px; max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:6px 10px; border:1px solid #ffffff2a; border-radius:8px; background:#111622dc; font-size:.75rem; font-weight:650}
/* A server talk fills the app's center panel; fullscreen uses the same composition. */
.center.voiceFocus .content {display:none}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) {
  flex:1;
  min-height:0;
  margin:14px 16px 16px;
  border:1px solid #54526c;
  border-radius:22px;
  background:radial-gradient(ellipse at 50% 8%,#36324e 0%,transparent 53%),radial-gradient(ellipse at 94% 90%,#222b37 0%,transparent 48%),#1a1c28;
}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)::before {
  z-index:-1;
  opacity:.65;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(#0004,transparent 72%);
  mask-image:linear-gradient(#0004,transparent 72%);
}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callbar {position:static; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; flex:none; padding:clamp(19px,2.1vw,30px) clamp(19px,2.2vw,34px) 11px; background:linear-gradient(#181b2799,transparent)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callEyebrow {font-size:.69rem; letter-spacing:.15em; margin-bottom:5px}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callInfo strong {font-size:clamp(1.35rem,2.05vw,1.95rem)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callInfo small {margin-top:2px; font-size:.83rem}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callConnection {display:inline-flex}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callHeaderButton {height:39px; min-width:39px; border-radius:11px}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callHeaderButton span {display:inline}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControls {
  position:absolute; z-index:10; bottom:clamp(13px,2.2vh,24px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:calc(100% - 20px); justify-content:center; gap:6px; margin:0; padding:9px 10px;
  border:1px solid #77778e70; border-radius:19px; background:#171a26f2;
  box-shadow:0 22px 60px #0b0d17b8, inset 0 1px #ffffff16;
}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControl {flex-direction:column; gap:4px; width:70px; height:60px; border-color:transparent; border-radius:12px; background:transparent}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControl svg {width:21px; height:21px}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControl.active {background:#90495844; border-color:#e4839355}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControl[data-action="camera"].active,.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControl[data-action="screen"].active {background:#2a6b4c70; border-color:#66d7a677}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .controlLabel {display:block; color:inherit; font-size:.66rem; line-height:1; white-space:nowrap}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .controlDivider {display:block; width:1px; height:31px; margin:0 4px; background:#e5e7ff2a}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callEnd {height:59px; padding:0 17px; border-radius:12px; font-size:.84rem; box-shadow:0 8px 17px #420e2155}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerGrid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; flex:1; min-height:0; width:min(100%,1140px); max-width:none; margin:0 auto; gap:clamp(12px,1.6vw,20px); padding:12px clamp(16px,2.7vw,34px) 118px; overflow:auto}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="1"] .speakerGrid {width:min(100%,650px); grid-template-columns:minmax(0,1fr)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="3"] .speakerGrid,.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="5"] .speakerGrid,.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="6"] .speakerGrid {width:min(100%,1280px); grid-template-columns:repeat(3,minmax(0,1fr))}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile {--tile-halo:#8e7cd3; display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-width:0; max-width:none; min-height:clamp(230px,38vh,385px); padding:clamp(17px,1.8vw,25px); border:1px solid #68677d8c; border-radius:22px; background:radial-gradient(circle at 50% 43%,#71628c40 0%,transparent 47%),linear-gradient(145deg,#29283c,#1b1f2b 78%); box-shadow:inset 0 1px #ffffff16,0 16px 38px #0b0e1d55}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile:nth-child(2n) {--tile-halo:#68c2bb; background:radial-gradient(circle at 50% 43%,#4faaa243 0%,transparent 47%),linear-gradient(145deg,#24343d,#1c202c 78%)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile:nth-child(3n) {--tile-halo:#a08cd0; background:radial-gradient(circle at 50% 43%,#947bc647 0%,transparent 47%),linear-gradient(145deg,#302c44,#1d1e2c 78%)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile.speaking {border-color:#7ae9bb; box-shadow:inset 0 0 0 1px #7ae9bb66,0 0 30px #40bd9350,0 16px 38px #0b0e1d55}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTop {display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:22px}
.speakerNumber {color:#dbdaedb7; font-size:.67rem; font-weight:800; letter-spacing:.11em}
.speakerNumber span {color:#a5a4c0}
.speakerMuted {display:inline-flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid #ed91a355; border-radius:7px; color:#ffc0cd; background:#823f5661; font-size:.67rem; font-weight:650; white-space:nowrap}
.speakerMuted svg {width:13px; height:13px}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerPortrait {flex:1; min-height:0; margin:2px 0}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerPortrait::before {content:""; position:absolute; width:clamp(106px,13vh,142px); height:clamp(106px,13vh,142px); border:1px solid var(--tile-halo); border-radius:36px; opacity:.45; box-shadow:0 0 35px var(--tile-halo)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile.speaking .speakerPortrait::before {border:2px solid #71e8b9; opacity:1; box-shadow:0 0 0 6px #71e8b91b,0 0 36px #71e8b966}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerPortrait .avatar {position:relative; width:clamp(86px,10.7vh,116px); height:clamp(86px,10.7vh,116px); border:2px solid #ffffff4d; border-radius:29px; box-shadow:0 12px 30px #0a101c88; font-size:2.7rem}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerFooter {flex:none; justify-content:space-between; align-items:flex-end; gap:8px; width:100%; min-height:49px; padding:12px 0 0; border-top:1px solid #ffffff20}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerInfo strong {font-size:clamp(.98rem,1.35vw,1.2rem)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerState {font-size:.76rem; margin-top:5px}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerState::before {content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#72dcb1; vertical-align:1px}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile.isConnecting .speakerState::before {background:#e0bc88}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile.isMuted .speakerState::before {background:#e493a2}
/* When someone shares a screen, the stream gets the space and people remain visible. */
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .videos {order:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); flex:1; min-height:0; max-height:none; gap:12px; padding:4px clamp(14px,2.5vw,34px) 8px; overflow:auto; background:transparent}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .videoTile {width:100%; height:100%; min-height:160px; max-height:none; aspect-ratio:auto; border-radius:17px; border-color:#737489; box-shadow:0 10px 26px #090d1885}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerGrid {order:2; display:flex; flex:none; justify-content:center; align-content:stretch; width:100%; max-width:none; margin:0; gap:9px; padding:4px clamp(13px,2.5vw,32px) 102px; overflow-x:auto}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerTile {display:flex; flex-direction:row; align-items:center; flex:0 0 205px; min-width:0; max-width:205px; min-height:70px; padding:8px 11px; border-radius:12px; gap:9px}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerTop,.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerPortrait::before {display:none}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerPortrait {flex:none; margin:0}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerPortrait .avatar {width:42px; height:42px; border:1px solid #ffffff42; border-radius:11px; font-size:1.3rem; box-shadow:none}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerFooter {flex:1; min-width:0; border:0; padding:0; min-height:0; align-items:center}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerInfo strong {font-size:.78rem}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerState {font-size:.68rem}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speechBars {display:none}
/* Native fullscreen and the in-app fallback keep identical controls. */
.callStage:is(:fullscreen,.fullscreenFallback) {position:fixed; inset:0; width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; z-index:100}
@media(max-width:1050px) {
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="3"] .speakerGrid,.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="5"] .speakerGrid,.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="6"] .speakerGrid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile {min-height:clamp(215px,33vh,330px)}
}
@media(max-width:700px) {
  .callStage {margin:7px 7px 0; border-radius:14px}
  .callStage .callbar {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; padding:11px 11px 7px}
  .callEyebrow {font-size:.58rem}
  .callInfo strong {font-size:.95rem}
  .callActions {gap:4px}
  .callControls {grid-column:1 / -1; justify-content:flex-start; width:100%; overflow-x:auto; margin:0; scrollbar-width:thin}
  .speakerGrid {padding:1px 10px 9px}
  .speakerTile {min-width:138px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) {margin:7px; border-radius:15px}
  .callStage:is(:fullscreen,.fullscreenFallback) {margin:0; border-radius:0}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callbar {display:grid; grid-template-columns:minmax(0,1fr) auto; padding:15px 16px 8px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callConnection {display:none}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callHeaderButton {width:39px; padding:0}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callHeaderButton span {display:none}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControls {grid-column:auto; width:max-content; max-width:calc(100% - 12px); gap:3px; padding:6px; overflow-x:auto; justify-content:flex-start; scrollbar-width:thin; border-radius:15px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControl {width:41px; height:43px; gap:0; border-radius:10px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControl svg {width:20px; height:20px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .controlLabel,.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .controlDivider {display:none}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callEnd {width:46px; height:43px; padding:0; justify-content:center}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callEnd span {display:none}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerGrid {grid-template-columns:1fr; gap:9px; width:min(100%,500px); padding:10px 14px 82px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="3"] .speakerGrid,.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="5"] .speakerGrid,.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="6"] .speakerGrid {grid-template-columns:1fr}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile {min-height:clamp(158px,23vh,210px); padding:12px 16px; border-radius:16px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerPortrait .avatar {width:clamp(58px,10vh,82px); height:clamp(58px,10vh,82px); border-radius:21px; font-size:2rem}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerPortrait::before {width:clamp(74px,12vh,100px); height:clamp(74px,12vh,100px); border-radius:26px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTop {min-height:16px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerFooter {padding-top:7px; min-height:36px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .videos {grid-template-columns:1fr; padding:4px 10px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerGrid {display:flex; width:100%; padding:4px 10px 80px; justify-content:flex-start}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerTile {flex:0 0 150px; min-height:58px; padding:7px; border-radius:11px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerPortrait .avatar {width:34px; height:34px; border-radius:9px; font-size:1rem}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .speakerState {margin-top:2px}
}
@media(max-height:620px) and (min-width:701px) {
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile {min-height:165px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerGrid {padding-bottom:94px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControls {bottom:9px}
}

.voiceChannel{margin:2px 0 5px}.voiceChannel>.row>.navitem{margin:0}.voiceCount{flex:none;min-width:20px;text-align:center;font-size:.72rem;font-weight:750;color:#c9c3ff;background:#514b75;border-radius:7px;padding:1px 5px}.voiceMembers{padding:2px 6px 5px 31px;display:flex;flex-direction:column;gap:2px}.voicePerson{display:flex;align-items:center;gap:7px;min-height:29px;padding:3px 6px;color:#c5c8da;font-size:.8rem;border-radius:8px;overflow:hidden}.voicePerson:hover{background:#ffffff0b}.voicePerson .avatar{width:22px;height:22px;border-radius:7px;font-size:.8rem}.voicePerson span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selfMute{flex:none;border:1px solid #565774;background:#292b3b;border-radius:10px}.selfMute.active{color:#ffb6bc;background:#623845}.selfMute:disabled{opacity:.45;cursor:not-allowed}

.chatMedia{display:block;max-width:min(470px,100%);max-height:320px;object-fit:contain;margin-top:8px;border-radius:12px;background:#151821}.chatVideo{width:min(470px,100%);aspect-ratio:16/9}.mediaMeta{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 2px;font-size:.79rem;color:#b8bacb}.mediaMeta a{color:#b6aeff;text-decoration:underline}.mediaReveal{margin-top:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.mediaProgress{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:3px 8px 9px;color:#c7c4e2;font-size:.82rem}.mediaProgress progress{flex:1;min-width:110px;height:9px;accent-color:#8b80f3}
.gameHelper{margin:19px 0 12px;padding:15px;border-radius:13px;border:1px solid #4e4c74;background:#282a3a}.gameHelper>strong{font-size:.92rem}.gameHelper .hint{margin:7px 0 11px}.gameHelper .row{gap:6px}

/* Squad lobby and consent-based invitations. */
.rail .squadNew{font-size:1.22rem;background:#272538;color:#ebe4ff}
.squadSideIntro{margin:13px 8px 3px;padding:14px;border:1px solid #66618e77;border-radius:14px;background:linear-gradient(135deg,#393156,#222633);display:flex;flex-direction:column;gap:2px}
.squadSideIntro span{font-size:.66rem;letter-spacing:.14em;color:#c4b8ff;font-weight:800}
.squadSideIntro strong{font-size:.95rem;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.squadSideIntro small{font-size:.69rem;color:#b6b6ca}
.navitem.squadChannel{background:#383451;border:1px solid #625c8b;color:#f8f4ff}
.squadLobby{flex:none;margin:17px 20px 0;padding:20px 22px;border:1px solid #6d6a9477;border-radius:20px;background:radial-gradient(circle at 87% 14%,#75509b2e,transparent 42%),linear-gradient(132deg,#302b46,#232b35);box-shadow:0 12px 34px #10121b4d;max-height:350px;overflow:auto}
.squadLobbyIntro{display:flex;align-items:center;gap:15px}
.squadSymbol{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:18px;background:#7769c640;border:1px solid #9e8ee19c;font-size:1.55rem}
.squadLobby h2{font-size:1.35rem;margin:0 0 3px;letter-spacing:-.035em}
.squadLobby p{font-size:.84rem;line-height:1.4;color:#c4c4d3;max-width:680px;margin:0}
.squadMembers{margin:17px 0 13px}.squadMembers>.eyebrow{font-size:.65rem;color:#aeb5d5}
.squadFaces{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:8px 0}
.squadFace{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border:1px solid #ffffff25;border-radius:12px;background:#15192466;max-width:190px;font-size:.78rem}
.squadFace .avatar{width:27px;height:27px;border-radius:8px;font-size:.9rem}
.squadFace>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.squadLaunch{display:flex;gap:9px;margin-top:14px}.squadLaunch input{flex:1;min-width:0;background:#181b2a;border-color:#6e6888}.squadLaunch .btn{background:#7467e9;padding:10px 19px;box-shadow:0 7px 21px #38248270}
.squadFriendList{display:grid;gap:7px;max-height:250px;overflow-y:auto}.squadFriend{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid #45485c;border-radius:12px;background:#292b3a;cursor:pointer}.squadFriend .avatar{width:36px;height:36px}.squadFriend>span{display:flex;flex-direction:column;flex:1;min-width:0}.squadFriend strong,.squadFriend small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.squadFriend small{color:#aeb1c3}.squadFriend input{width:20px;height:20px;accent-color:#9182ff;flex:none}.squadFriend .btn{flex:none}
.squadNotices{position:fixed;top:76px;right:18px;z-index:22;width:min(395px,calc(100vw - 24px));max-height:70dvh;overflow-y:auto;display:grid;gap:8px;filter:drop-shadow(0 16px 26px #0b0e19aa)}
#ring:not(.hidden)+.squadNotices{top:245px}
.squadNotice{display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;padding:15px;border:1px solid #8176ba;border-radius:17px;background:linear-gradient(125deg,#302847,#202532);box-shadow:inset 0 1px #ffffff19}
.squadNotice.playNotice{border-color:#53b99c;background:linear-gradient(125deg,#1e3c39,#1e2835)}
.squadNoticeIcon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#7b67d655}
.playNotice .squadNoticeIcon{background:#3eaa8860;color:#b7ffe0}
.squadNoticeText{min-width:0}.squadNoticeText strong,.squadNoticeText span{display:block;overflow-wrap:anywhere}.squadNoticeText strong{font-size:.91rem}.squadNoticeText span{margin-top:3px;color:#c6c8d5;font-size:.78rem}
.squadNoticeActions{grid-column:2;display:flex;gap:7px;flex-wrap:wrap}.squadNoticeActions .btn{min-height:35px;padding:6px 11px;font-size:.78rem}

/* The author's chat bubbles use their saved color, with a distinct position. */
.msg.ownMsg{flex-direction:row-reverse;margin-left:auto;width:min(100%,800px);align-items:flex-start}
.msg.ownMsg .msgContent{flex:0 1 auto;width:fit-content;max-width:calc(100% - 52px);padding:11px 15px 12px;background:var(--own-bg,#373058);border:1px solid var(--own-border,#685a9b);border-radius:15px 5px 15px 15px;box-shadow:0 7px 21px #080a1552}
.msg.ownMsg .msgHead{justify-content:flex-end}.msg.ownMsg .msgHead strong{color:#fafaff}.msg.ownMsg .msgBody{line-height:1.5}
.msg.ownMsg .deleteMsg{margin-left:0}.msg.ownMsg[data-color="teal"],.colorPreview[data-color="teal"]{--own-bg:#1d4744;--own-border:#478b7b}
.msg.ownMsg[data-color="blue"],.colorPreview[data-color="blue"]{--own-bg:#243f60;--own-border:#5179b4}
.msg.ownMsg[data-color="rose"],.colorPreview[data-color="rose"]{--own-bg:#613647;--own-border:#af6782}
.msg.ownMsg[data-color="amber"],.colorPreview[data-color="amber"]{--own-bg:#5e482c;--own-border:#ac8751}
.msg.ownMsg[data-color="slate"],.colorPreview[data-color="slate"]{--own-bg:#363d4c;--own-border:#707989}
.msg.ownMsg[data-color="violet"],.colorPreview[data-color="violet"]{--own-bg:#373058;--own-border:#685a9b}
.colorPreview{align-self:flex-start;background:var(--own-bg,#373058);border:1px solid var(--own-border,#685a9b);border-radius:13px 4px 13px 13px;padding:10px 14px;color:white;font-size:.85rem}
.colorPreview[data-color="random"]{background:linear-gradient(105deg,#39315d,#24535b,#664255);border-color:#8e86bb}
.authCard .colorPreview{align-self:stretch;font-size:.78rem;padding:9px 12px}
#soundGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}
#soundGrid .soundButton{display:flex;min-width:0;min-height:65px;flex-direction:column;gap:2px;white-space:normal;line-height:1.15;background:#303242;border:1px solid #555775;transition:background .14s,border-color .14s}
#soundGrid .soundButton:hover{background:#45426a;border-color:#9d8ef2}
#soundGrid .soundButton span{font-size:1.35rem;color:#b9aaff}
.msg.ownMsg .mediaMeta{justify-content:flex-end}.msg.ownMsg .chatMedia,.msg.ownMsg .gif{max-width:100%}
.selfMute.deaf{color:#ffd2ac;background:#735035;border-color:#b68662}

/* More of the call stage is occupied by the people in the middle. */
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerGrid{width:min(100%,1490px);gap:clamp(13px,1.7vw,24px);padding-inline:clamp(12px,2.2vw,30px)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo)[data-people="1"] .speakerGrid{width:min(100%,790px)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerTile{min-height:clamp(275px,48vh,500px)}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerPortrait::before{width:clamp(130px,18vh,190px);height:clamp(130px,18vh,190px);border-radius:45px}
.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerPortrait .avatar{width:clamp(108px,15.5vh,164px);height:clamp(108px,15.5vh,164px);border-radius:38px;font-size:3.5rem}
@media(max-width:700px){
  #soundGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .squadLobby{margin:8px 8px 0;padding:13px;max-height:38dvh;border-radius:14px}.squadLobbyIntro{gap:9px}.squadSymbol{width:38px;height:38px;border-radius:12px;font-size:1.12rem}.squadLobby h2{font-size:1.06rem}.squadLobby p{font-size:.74rem}.squadMembers{margin:9px 0}.squadLaunch{flex-wrap:wrap;gap:6px;margin-top:8px}.squadLaunch input{width:100%;flex:auto}.squadLaunch .btn{width:100%}
  .squadNotices{top:65px;right:7px;width:min(350px,calc(100vw - 65px))}#ring:not(.hidden)+.squadNotices{top:210px}
  .panelTitle{flex-wrap:wrap}.panelTitle .row{width:100%}.panelTitle .btn{flex:1}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerGrid{width:min(100%,530px);padding:10px 13px 83px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerTile{min-height:clamp(158px,24vh,220px)}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerPortrait::before{width:clamp(77px,12vh,112px);height:clamp(77px,12vh,112px);border-radius:28px}
  .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerPortrait .avatar{width:clamp(62px,10vh,92px);height:clamp(62px,10vh,92px);border-radius:22px;font-size:2rem}
}
@media(max-height:620px) and (min-width:701px){.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerTile{min-height:170px}.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerPortrait::before{width:100px;height:100px;border-radius:29px}.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerPortrait .avatar{width:83px;height:83px;border-radius:21px;font-size:2rem}}

/* Compact voice-only layout. The ordinary quality slider remains a separate setting. */
.top .brand{position:static;left:auto;transform:none;flex:1;margin:0;pointer-events:auto}
.ultraToggle{flex:none;border:1px solid #555b6d;border-radius:999px;background:#222734;color:#e9edf6;padding:7px 12px;font-family:inherit;font-weight:700;font-size:.77rem;line-height:1.2;letter-spacing:0;white-space:nowrap;cursor:pointer}
.ultraToggle:hover,.ultraToggle:focus-visible{background:#313949;border-color:#93a1bb}
.ultraToggle[aria-pressed="true"]{background:#191e1b;border-color:#75d1a3;color:#b7efd0}
.ultraView,.mobileBottom,.mobileShade,.mobileHub{display:none}
body.ultraMode{background:#050505;color:#f4f4f4}
body.ultraMode .app{grid-template-columns:minmax(0,1fr);grid-template-rows:62px minmax(0,1fr);background:#050505}
body.ultraMode .top{background:#080808;border-color:#292929;gap:12px}
body.ultraMode .top .brand{position:static;transform:none;flex:1;margin:0;pointer-events:auto}
body.ultraMode .top [data-action="activity"],body.ultraMode .top [data-action="people"],body.ultraMode .mobileMenu{display:none}
body.ultraMode .app>.rail,body.ultraMode .app>.sidebar,body.ultraMode .app>.center,body.ultraMode .app>.right,body.ultraMode .mobileBottom,body.ultraMode .mobileShade{display:none!important}
body.ultraMode .ultraView{grid-column:1;grid-row:2;min-height:0;display:grid;grid-template-columns:minmax(240px,310px) minmax(0,1fr);background:#050505}
.ultraSidebar{min-height:0;display:flex;flex-direction:column;border-right:1px solid #242424;background:#0b0b0b}
.ultraTabs{display:flex;gap:6px;padding:15px;border-bottom:1px solid #222}
.ultraTabs button{flex:1;min-width:0;min-height:43px;border:1px solid transparent;border-radius:10px;background:transparent;color:#a4a4a4;font-family:inherit;font-weight:700;font-size:.82rem;line-height:1.2;cursor:pointer}
.ultraTabs button[aria-selected="true"]{background:#212121;border-color:#3e3e3e;color:#fff}
.ultraTabs button:hover,.ultraJoin:hover,.ultraServer:hover{background:#292929;color:#fff}
.ultraList{flex:1;min-height:0;overflow-y:auto;padding:13px;scrollbar-color:#444 transparent}
.ultraListHead{display:flex;align-items:center;justify-content:space-between;padding:4px 5px 12px;color:#b8b8b8;font-size:.77rem;letter-spacing:.07em;text-transform:uppercase}
.ultraSmallButton,.ultraJoin{display:grid;place-items:center;flex:none;min-width:37px;min-height:37px;border:1px solid #424242;border-radius:10px;background:#1a1a1a;color:#fff;font-family:inherit;font-weight:700;font-size:1rem;line-height:1;cursor:pointer}
.ultraServers{display:flex;gap:7px;overflow-x:auto;padding:0 2px 13px;scrollbar-width:thin}
.ultraServer{display:grid;place-items:center;flex:none;width:47px;height:47px;border:1px solid #353535;border-radius:13px;background:#1a1a1a;color:#eee;font-size:1.3rem;cursor:pointer}
.ultraServer.selected{border-color:#ddd;background:#262626}
.ultraServerTitle{font-size:1.07rem;font-weight:760;letter-spacing:-.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 5px 12px}
.ultraTalk,.ultraFriend{width:100%;min-height:62px;display:flex;align-items:center;gap:11px;margin:0 0 7px;padding:9px;border:1px solid #2b2b2b;border-radius:11px;background:#141414;color:#f4f4f4;text-align:left}
.ultraTalk{cursor:pointer}.ultraTalk:hover,.ultraTalk.active{background:#202823;border-color:#669e7b}
.ultraTalk>span:nth-child(2),.ultraFriend>span:nth-child(2){flex:1;min-width:0}
.ultraTalk strong,.ultraFriend strong{display:block;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ultraTalk small,.ultraFriend small{display:block;color:#aaa;font-size:.71rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.ultraTalkIcon{display:grid;place-items:center;width:37px;height:37px;border-radius:9px;background:#29302c;color:#afebc3;font-size:.84rem}
.ultraTalk .ultraJoin{min-width:27px;min-height:27px;border:0;background:transparent;color:#b8b8b8}
.ultraFriend .avatar{flex:none;width:37px;height:37px;border-radius:10px}
.ultraEmpty{font-size:.84rem;color:#a6a6a6;line-height:1.55;padding:8px 5px}
.ultraMain{min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ultraWelcome{margin:auto;text-align:center;padding:30px;color:#eee}
.ultraPulse{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 24px;border:1px solid #505c54;border-radius:22px;background:#1b241e;color:#99e4b0;font-size:1.6rem}
.ultraWelcome h1{font-size:clamp(1.6rem,3vw,2.45rem);letter-spacing:-.05em;margin:0 0 9px}
.ultraWelcome p{color:#a8a8a8;margin:0}.ultraWelcome small{display:block;margin-top:22px;color:#777}
.ultraCallMount{display:flex;flex:1;min-height:0;flex-direction:column}
body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback){margin:8px;min-height:0;border-radius:14px;background:#101010;border-color:#333;box-shadow:none}
body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)::before{display:none}
body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callbar{background:#101010}
body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControls{background:#151515;border-color:#3a3a3a;box-shadow:none}
body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile,body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile:nth-child(n){background:#1a1a1a;border-color:#383838;box-shadow:none}
body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile.speaking{border-color:#87d7a5;box-shadow:inset 0 0 0 1px #78b991}
body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerPortrait::before{box-shadow:none;opacity:.2}
body.ultraMode .callStage .videos{display:none!important}
body.ultraMode *,body.ultraMode *::before,body.ultraMode *::after{animation:none!important;transition:none!important;backdrop-filter:none!important}
body.ultraMode .callStage:is(:fullscreen,.fullscreenFallback){margin:0;border-radius:0}

/* Click any camera or screen-share tile to enlarge it within the conversation. */
.videoExpand{position:absolute;right:9px;top:9px;z-index:2;width:38px;height:38px;border:1px solid #ffffff75;border-radius:10px;background:#10151ee0;color:white;font-size:1.4rem;line-height:1;cursor:pointer}
.videoExpand:hover,.videoExpand:focus-visible{background:#353c51}
.callStage.videoFocusMode:not(.isExpanded):not(:fullscreen):not(.fullscreenFallback){min-height:min(70dvh,550px)}
.callStage.videoFocusMode .videos{overflow:visible}
.callStage.videoFocusMode .videoTile.isFocused{position:absolute;inset:clamp(66px,10vh,96px) 12px 84px;z-index:9;width:auto;height:auto;max-height:none;aspect-ratio:auto;border:2px solid #a8d4ff;border-radius:14px;background:#090c12;box-shadow:0 18px 45px #05070ddd}
.callStage.videoFocusMode .videoTile.isFocused video{width:100%;height:100%;object-fit:contain}
.callStage.videoFocusMode .videoTile.isFocused .videoExpand{right:12px;top:12px;width:44px;height:44px}

/* Phone navigation uses the entire width; server rail and channels share a drawer. */
@media(max-width:700px){
 .app{grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(0,1fr) calc(63px + env(safe-area-inset-bottom));min-height:0}
 .top{grid-column:1;grid-row:1;gap:7px;padding:0 10px}.top .brand{position:static;transform:none;flex:1;margin:0;font-size:1.08rem;pointer-events:auto}
 .top .brandIcon{width:28px;height:28px}.top .iconbtn{flex:none;width:38px;height:38px}.top [data-action="activity"],.top [data-action="people"],.top [data-action="settings"]{display:none}
 .top .ultraToggle{max-width:156px;padding:8px 10px;font-size:.73rem;overflow:hidden;text-overflow:ellipsis}
 .center{grid-column:1;grid-row:2;min-height:0;width:100%}.roomhead{min-height:56px;height:56px;padding:0 12px}.roomhead .heading{min-width:0}.roomhead h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.03rem}.roomhead small{font-size:.7rem}
 .mobileBottom{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;padding:4px 4px env(safe-area-inset-bottom);border-top:1px solid #373c4a;background:#12151e;z-index:26}
 .mobileBottom button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;border:0;border-radius:10px;background:transparent;color:#b3b8c6;font-family:inherit;font-weight:700;font-size:.67rem;line-height:1.2;cursor:pointer}
 .mobileBottom button[aria-current="page"]{background:#30354d;color:#fff}.mobileBottom button span{font-size:1.28rem;line-height:1.2}
 .mobileShade{position:fixed;inset:0;z-index:27;border:0;background:#02050bc9;cursor:pointer}
 .app.showSide .mobileShade{display:block}
 .rail{display:none;position:fixed;z-index:29;left:0;top:56px;bottom:calc(63px + env(safe-area-inset-bottom));width:62px;padding:10px 5px;gap:8px;box-shadow:8px 0 23px #0008}
 .sidebar{display:none;position:fixed;z-index:29;left:62px;top:56px;bottom:calc(63px + env(safe-area-inset-bottom));width:min(294px,calc(100vw - 62px));box-shadow:16px 0 35px #0008}
 .app.showSide .rail,.app.showSide .sidebar{display:flex}.app:not(.showSide) .sidebar{display:none}
 body.hasInstall .rail,body.hasInstall .sidebar{top:calc(var(--install-h,58px) + 56px)}
 .self{margin:6px;padding:7px}.self .avatar{width:34px;height:34px}.selfText strong{font-size:.78rem}.selfText span{font-size:.68rem}.self .iconbtn{width:32px;height:32px}
 .friendsPanel{padding:13px 11px 20px}.panelTitle{gap:10px}.panelTitle h1{font-size:1.4rem}.friendGrid{grid-template-columns:minmax(0,1fr);gap:8px}.friendcard{padding:11px;gap:9px;min-width:0}.friendcard .avatar{flex:none}.friendcard .info{min-width:0}.friendcard .actions{flex:none}
 .homeDock{margin:6px 9px 8px;padding:7px;min-height:55px}.dockInfo{min-width:0}.dockInfo span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.homeDock .iconbtn{width:29px;height:29px}
 .messages{padding:11px 9px}.msg{max-width:100%}.composeWrap{padding:5px 8px 7px}.compose{padding:5px}.compose textarea{min-width:0}.expiry{font-size:.72rem}
 .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback){margin:5px;border-radius:13px}.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callbar{padding:11px 12px 7px}.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControls{bottom:9px}
 .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerGrid{padding:8px 8px 75px;gap:7px}.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo) .speakerTile{min-height:clamp(148px,24vh,205px);padding:9px}
 .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback).hasVideo .videos{min-height:0}.callStage.videoFocusMode .videoTile.isFocused{inset:70px 6px 71px}
 .ring{top:63px;left:8px;right:8px;width:auto}.squadNotices{top:65px;left:8px;right:8px;width:auto;max-height:38dvh}
 .toast{bottom:calc(69px + env(safe-area-inset-bottom));left:8px;right:8px;max-width:none}
 body.ultraMode .app{grid-template-rows:56px minmax(0,1fr)}
 body.ultraMode .top [data-action="settings"]{display:grid}
 body.ultraMode .ultraView{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
 body.ultraMode .ultraMain{display:none}
 body.ultraMode.ultraInCall .ultraView{grid-template-rows:minmax(126px,28dvh) minmax(0,1fr)}
 body.ultraMode.ultraInCall .ultraMain{display:flex}
 body.ultraMode .ultraSidebar{border-right:0;border-bottom:1px solid #292929}
 body.ultraMode .ultraTabs{padding:7px 10px;gap:5px}.ultraTabs button{min-height:37px}
 body.ultraMode .ultraList{padding:6px 10px}.ultraListHead{padding:0 3px 5px}.ultraServers{padding-bottom:4px}.ultraServer{width:36px;height:36px;font-size:1rem;border-radius:9px}.ultraServerTitle{font-size:.86rem;padding:2px 4px 5px}
 body.ultraMode .ultraTalk,body.ultraMode .ultraFriend{min-height:46px;padding:5px 8px;margin-bottom:4px}.ultraTalkIcon,.ultraFriend .avatar{width:31px;height:31px}.ultraTalk strong,.ultraFriend strong{font-size:.79rem}.ultraTalk small,.ultraFriend small{font-size:.67rem}
 body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback){margin:4px;border-radius:9px}
 body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callbar{padding:9px 10px 5px}
 body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerGrid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;padding:6px 7px 72px;gap:6px}
 body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback)[data-people="1"] .speakerGrid{grid-template-columns:1fr}
 body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .speakerTile{min-height:clamp(130px,22vh,195px);padding:9px}
 body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControl{width:49px;height:46px}
 body.ultraMode .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callEnd{height:46px}
}
@media(min-width:360px) and (max-width:700px){
 .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo)[data-people] .speakerGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .callStage:is(.isExpanded,:fullscreen,.fullscreenFallback):not(.hasVideo)[data-people="1"] .speakerGrid{grid-template-columns:1fr}
}
@media(max-width:420px){.top .brand{font-size:0}.top .ultraToggle{max-width:145px}.callStage:is(.isExpanded,:fullscreen,.fullscreenFallback) .callControls{max-width:calc(100% - 12px)}}

/* Full-width Server and Talk pages on phones. */
@media(max-width:700px){
 .app.mobileHubActive .center{display:none}
 .mobileHub:not(.hidden){grid-column:1;grid-row:2;display:block;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 13px 28px;background:#20222a}
 .hubHeader{display:flex;align-items:center;justify-content:space-between;gap:13px;margin:0 3px 20px}
 .hubHeader .eyebrow{color:#a9a2ff;font-size:.69rem;letter-spacing:.16em}
 .hubHeader h1{margin:2px 0 1px;font-size:1.65rem;line-height:1.2;letter-spacing:-.04em}
 .hubHeader p{margin:0;color:#aaafbf;font-size:.78rem;line-height:1.4}
 .hubAdd{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #625a9b;border-radius:13px;background:#373251;color:#e4dcff;font-size:1.5rem}
 .hubServers{display:flex;gap:9px;overflow-x:auto;scrollbar-width:thin;padding:0 2px 16px;scroll-snap-type:x proximity}
 .hubServer{display:flex;align-items:center;gap:8px;flex:none;max-width:185px;min-height:47px;padding:5px 11px 5px 5px;border:1px solid #414450;border-radius:13px;background:#292c36;color:#c4c7d3;font-size:.8rem;font-weight:750;scroll-snap-align:start}
 .hubServer span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .hubServer.selected{border-color:#9b91ff;background:#393459;color:#fff}
 .hubServerIcon{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:9px;background:#1b1e27;font-size:1.12rem}
 .hubSectionTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;margin-bottom:17px;border:1px solid #464659;border-radius:13px;background:#292b37}
 .hubSectionTitle span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.94rem;font-weight:780}
 .hubSectionTitle button{flex:none;padding:6px 10px;border:1px solid #7066bb;border-radius:8px;background:#3a3657;color:#e6e0ff;font-size:.73rem;font-weight:700}
 .hubLabel{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:#b2b5c5;margin:18px 4px 9px}
 .hubChannel{display:flex;align-items:center;gap:11px;width:100%;min-height:67px;margin-bottom:8px;padding:10px;border:1px solid #444757;border-radius:14px;background:#2b2e3a;color:#f3f4fb;text-align:left}
 .hubChannel:active,.hubChannel:focus-visible{background:#3d3f51;border-color:#9b91ff}
 .hubChannelIcon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:11px;background:#3b3b53;color:#cbc4ff;font-size:1.1rem;font-weight:800}
 .hubTalk .hubChannelIcon{background:#294237;color:#a9eed1;font-size:.86rem}
 .hubChannelText{flex:1;min-width:0}.hubChannelText strong,.hubChannelText small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .hubChannelText strong{font-size:.88rem}.hubChannelText small{margin-top:3px;font-size:.7rem;color:#abb0bf}
 .hubChannelEnd{flex:none;color:#bcb7f2;font-size:.71rem;font-weight:750;white-space:nowrap}
 .hubTalk .hubChannelEnd{color:#a9e8c7}.hubFriend .avatar{width:42px;height:42px;border-radius:11px}
 .hubLive{display:flex;align-items:center;gap:11px;width:100%;padding:12px;margin:0 0 17px;border:1px solid #4a8c70;border-radius:14px;background:#1d3a31;color:#edfff5;text-align:left}
 .hubLiveDot{width:10px;height:10px;flex:none;border-radius:50%;background:#78e9ab;box-shadow:0 0 0 4px #78e9ab20}
 .hubLive span:nth-child(2){flex:1;min-width:0}.hubLive strong,.hubLive small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hubLive strong{font-size:.87rem}.hubLive small{font-size:.71rem;color:#c8e3d4}.hubLive b{flex:none;font-size:.75rem}
 .hubSquad{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;margin:19px 0 0;padding:12px 15px;border:1px dashed #736b99;border-radius:13px;background:#2d2a3c;color:#ebe6ff;font-size:.83rem;font-weight:750}
 .hubEmpty{margin:8px 4px 16px;color:#b3b6c4;font-size:.83rem;line-height:1.5}
 .hubEmptyCard{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid #464956;border-radius:15px;background:#292c36}.hubEmptyCard strong{color:white;font-size:1rem}.hubEmptyCard .btn{align-self:flex-start}
 .center.voiceFocus .composeWrap,.center.voiceFocus .homeDock{display:none}
}