/* ============================================================
   NYVARIS FLOATING WORKSPACE
   Dashboard visuals only. App behavior remains in app.html.
   ============================================================ */

/* ------------------------------------------------------------
   AUTH: two floating docks (brand | form) instead of one card
   ------------------------------------------------------------ */
#screenAuth{
  --float-line:rgba(170,146,255,.22);
  --float-pink:#f0abfc;
  --float-cyan:#67e8f9;
  padding:24px!important;
}
#screenAuth .auth-wrap{max-width:980px!important;padding:0!important}
#screenAuth .auth-card{
  display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;gap:22px!important;
  padding:0!important;background:none!important;border:none!important;box-shadow:none!important;
  border-radius:0!important;overflow:visible!important;align-items:stretch!important;
}
#screenAuth .auth-card::before{display:none!important}
#screenAuth .auth-logo,
#screenAuth .auth-body{
  position:relative!important;margin:0!important;border-radius:30px!important;
  border:1px solid var(--float-line)!important;
  background:linear-gradient(155deg,rgba(20,18,38,.74),rgba(8,8,20,.8))!important;
  box-shadow:0 18px 44px rgba(2,2,10,.46),inset 0 1px rgba(255,255,255,.08)!important;
  overflow:hidden!important;isolation:isolate!important;
}
/* Pink→cyan hairline across the top of each dock, same as the dashboard panels. */
#screenAuth .auth-logo::after,
#screenAuth .auth-body::after{
  content:""!important;position:absolute!important;left:22px!important;right:22px!important;top:0!important;height:1px!important;
  background:linear-gradient(90deg,transparent,var(--float-pink),var(--float-cyan),transparent)!important;
  opacity:.7!important;pointer-events:none!important;
}
#screenAuth .auth-logo{
  padding:44px 36px!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;text-align:center!important;
}
/* Soft glow pooled behind the wave mark. */
#screenAuth .auth-logo::before{
  content:""!important;position:absolute!important;inset:auto!important;left:50%!important;top:34%!important;
  width:320px!important;height:320px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;
  background:radial-gradient(circle,rgba(167,139,250,.28),rgba(240,171,252,.1) 42%,transparent 70%)!important;
  filter:blur(6px)!important;pointer-events:none!important;z-index:-1!important;
}
#screenAuth .auth-mark{width:min(250px,84%)!important;margin:0 auto 18px!important}
#screenAuth .auth-logo h1{
  font-family:'Newsreader','Times New Roman',serif!important;font-style:italic!important;font-weight:450!important;
  font-size:44px!important;letter-spacing:-.025em!important;line-height:1!important;color:#fff6ea!important;
}
#screenAuth .auth-logo p{margin-top:12px!important;font-size:14.5px!important;line-height:1.5!important;color:#b6b3cc!important;max-width:30ch!important}
#screenAuth #aiStatus{margin-top:22px!important}
#screenAuth .auth-body{padding:36px 34px 30px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
#screenAuth .auth-tabs{margin-bottom:20px!important;padding:4px!important;background:rgba(0,0,0,.36)!important;border-color:rgba(255,255,255,.08)!important}
#screenAuth .auth-tab{padding:10px 8px!important;font-size:13px!important}
#screenAuth .auth-tab.active{background:linear-gradient(135deg,var(--float-pink),#ddd6fe)!important;color:#0d0b16!important;box-shadow:0 7px 20px rgba(167,139,250,.28)!important}
#screenAuth .auth-body input{
  background:rgba(0,0,0,.3)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:16px!important;
}
#screenAuth .auth-body input:focus{border-color:rgba(183,151,255,.5)!important;box-shadow:0 0 0 3px rgba(167,139,250,.14)!important}
#screenAuth .auth-body .btn{border-radius:16px!important}
#screenAuth .auth-or{margin:16px 0 12px!important}
#screenAuth .auth-or::before,#screenAuth .auth-or::after{background:rgba(255,255,255,.08)!important}
@media(max-width:899px){
  #screenAuth{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important}
  #screenAuth .auth-wrap{max-width:520px!important}
  #screenAuth .auth-card{grid-template-columns:1fr!important;gap:12px!important}
  #screenAuth .auth-logo{padding:26px 22px 22px!important;border-radius:24px!important}
  #screenAuth .auth-body{padding:22px 18px 20px!important;border-radius:24px!important}
  #screenAuth .auth-mark{width:min(180px,66%)!important;margin-bottom:10px!important}
  #screenAuth .auth-logo h1{font-size:34px!important}
  #screenAuth .auth-logo p{font-size:13px!important;margin-top:8px!important}
  #screenAuth #aiStatus{margin-top:12px!important}
}

#screenApp{
  --float-bg:rgba(13,12,25,.72);
  --float-deep:rgba(8,8,18,.86);
  --float-line:rgba(170,146,255,.22);
  --float-line-hi:rgba(211,183,255,.42);
  --float-purple:#a78bfa;
  --float-pink:#f0abfc;
  --float-cyan:#67e8f9;
  --float-green:#65e6b4;
  --float-shadow:0 12px 32px rgba(2,2,10,.38);
  --dock-edge:18px;
  /* Every floating panel is 62.5% of the viewport tall (half height + 25%) and centred vertically. */
  --panel-inset:calc(18.75dvh + 11.25px);
  width:100dvw!important;height:100dvh!important;
  max-width:100dvw!important;max-height:100dvh!important;
  position:relative!important;display:block!important;
  padding:0!important;gap:0!important;overflow:hidden!important;
  isolation:isolate!important;
  background:
    linear-gradient(180deg,rgba(5,6,18,.06),rgba(5,5,16,.28)),
    var(--scene,url("/site/img/scene-lounge.jpg")) center/cover no-repeat!important;
  transform:none!important;
}
#screenApp.hidden{display:none!important}
#screenApp::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;
  background:
    radial-gradient(54% 42% at 54% 44%,rgba(111,76,255,.1),transparent 70%),
    linear-gradient(90deg,rgba(5,6,18,.24),transparent 34%,transparent 70%,rgba(5,6,18,.2))!important;
  pointer-events:none!important;animation:none!important;
}
#screenApp::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;
  opacity:.035!important;pointer-events:none!important;
  background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px)!important;
  background-size:46px 46px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 72%)!important;
}

/* Detached floating surfaces */
#screenApp .server-bar,
#screenApp .channel-bar,
#screenApp .chat-sidebar,
#screenApp .main-area{
  position:absolute!important;margin:0!important;
  min-width:0!important;min-height:0!important;
  border:1px solid var(--float-line)!important;
  background:linear-gradient(155deg,rgba(20,18,38,.68),rgba(8,8,20,.72))!important;
  box-shadow:var(--float-shadow),inset 0 1px rgba(255,255,255,.08)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  contain:none!important;overflow:hidden!important;
}
#screenApp .server-bar::before,
#screenApp .channel-bar::before,
#screenApp .chat-sidebar::before,
#screenApp .main-area::before{
  content:""!important;display:block!important;position:absolute!important;
  inset:0!important;border-radius:inherit!important;z-index:0!important;pointer-events:none!important;
  background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 24%,transparent 78%,rgba(103,232,249,.04))!important;
}
#screenApp .server-bar::after,
#screenApp .channel-bar::after,
#screenApp .chat-sidebar::after,
#screenApp .main-area::after{
  content:""!important;display:block!important;position:absolute!important;
  left:18px!important;right:18px!important;top:0!important;height:1px!important;z-index:5!important;
  background:linear-gradient(90deg,transparent,var(--float-pink),var(--float-cyan),transparent)!important;
  opacity:.65!important;pointer-events:none!important;
}

/* Floating server capsule: a horizontal pill hovering above the stage, centred on it,
   about 58% of the stage's width. Stage spans --stage-left → (100vw - --stage-right). */
#screenApp{
  /* The whole workspace sits on a centred canvas instead of spanning the full screen,
     so the eye never has to travel to the far corners of a wide monitor. */
  --canvas-w:min(100vw,1280px);
  --canvas-x:calc((100vw - var(--canvas-w)) / 2);
  --stage-left:calc(var(--canvas-x) + 296px);
  --stage-right:calc(var(--canvas-x) + 354px);
  --stage-w:calc(100vw - var(--stage-left) - var(--stage-right));
  --capsule-h:56px;
  /* One shared band just above / below the panels where all chrome pills live. */
  --chrome-gap:calc(100dvh - var(--panel-inset) + 12px);
}
#screenApp .server-bar{
  left:calc(var(--stage-left) + var(--stage-w) / 2)!important;right:auto!important;
  top:auto!important;bottom:calc(100dvh - var(--panel-inset) + 12px)!important;
  width:max-content!important;min-width:0!important;max-width:calc(var(--stage-w) - 24px)!important;
  height:var(--capsule-h)!important;
  transform:translateX(-50%)!important;border-radius:999px!important;
  padding:0 10px!important;gap:8px!important;z-index:40!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:center!important;
  overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;
}
#screenApp .server-bar::-webkit-scrollbar{display:none!important}
#screenApp .server-bar::after{left:28px!important;right:28px!important}
#screenApp #serverList{
  width:auto!important;display:flex!important;flex-direction:row!important;
  align-items:center!important;gap:8px!important;overflow:visible!important;flex:0 1 auto!important;
}
#screenApp .srv-icon{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  border-radius:14px!important;border:1px solid rgba(255,255,255,.08)!important;font-size:18px!important;
  background:rgba(255,255,255,.055)!important;color:#a9a8c1!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05)!important;
  transition:color .12s linear,background-color .12s linear,border-color .12s linear!important;
}
#screenApp .srv-icon:hover{
  color:#fff!important;transform:none!important;
  background:rgba(167,139,250,.16)!important;
  box-shadow:0 10px 24px rgba(81,50,190,.3)!important;
}
#screenApp .srv-icon.active{
  color:#0d0b16!important;border-color:transparent!important;
  background:linear-gradient(135deg,var(--float-pink),var(--float-cyan))!important;
  box-shadow:0 8px 24px rgba(167,139,250,.44),0 0 0 4px rgba(167,139,250,.08)!important;
}
#screenApp .srv-icon.active::before{display:none!important}
#screenApp .srv-sep{width:1px!important;height:24px!important;background:rgba(255,255,255,.1)!important;margin:0 2px!important;flex:0 0 1px!important}
/* No dangling divider when the user has no servers yet. */
#screenApp .server-bar > .srv-sep:has(+ #serverList:empty){display:none!important}

/* Every desktop surface shares one clean top/bottom rhythm. */
#screenApp .channel-bar{
  left:calc(var(--canvas-x) + var(--dock-edge))!important;top:var(--panel-inset)!important;bottom:var(--panel-inset)!important;
  width:262px!important;height:auto!important;border-radius:28px!important;
  z-index:30!important;display:flex!important;flex-direction:column!important;
}
#screenApp .chan-header{
  min-height:52px!important;padding:10px 14px!important;
  background:transparent!important;border-bottom:1px solid rgba(255,255,255,.06)!important;
}
#screenApp .chan-header h3{font-size:15px!important;letter-spacing:-.02em!important}
#screenApp .chan-list{padding:10px!important}
#screenApp .chan-item{
  min-height:46px!important;margin:3px 0!important;padding:0 12px!important;
  border:1px solid transparent!important;border-radius:14px!important;
  color:#aaa9bf!important;background:transparent!important;
}
#screenApp .chan-item:hover{
  color:#fff!important;background:rgba(255,255,255,.05)!important;
  transform:none!important;
}
#screenApp .chan-item.active{
  color:#fff!important;border-color:rgba(180,139,255,.35)!important;
  background:linear-gradient(90deg,rgba(156,91,255,.24),rgba(103,232,249,.06))!important;
  box-shadow:0 10px 28px rgba(55,30,130,.25),inset 3px 0 var(--float-pink)!important;
}
/* ---- Page-level chrome (lives outside the four floating panels) ---- */
#screenApp .app-brand{
  /* Docked just above the channel panel, in the same band as the server capsule. */
  position:fixed!important;top:auto!important;bottom:var(--chrome-gap)!important;
  left:calc(var(--canvas-x) + var(--dock-edge))!important;z-index:60!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:6px 14px 6px 8px!important;border-radius:999px!important;text-decoration:none!important;
  border:1px solid rgba(255,255,255,.08)!important;background:rgba(7,7,18,.62)!important;
  box-shadow:0 8px 20px rgba(3,3,10,.22)!important;color:#fff6ea!important;
}
#screenApp .app-brand-mark{
  height:34px!important;width:auto!important;max-width:88px!important;display:block!important;
  object-fit:contain!important;filter:drop-shadow(0 6px 14px rgba(90,30,140,.45))!important;
}
#screenApp .app-brand-name{
  font-family:'Newsreader','Times New Roman',serif!important;font-style:italic!important;font-weight:450!important;
  font-size:24px!important;letter-spacing:-.02em!important;line-height:1!important;color:#fff6ea!important;
}

#screenApp .user-panel,
#screenApp #userPanel{
  /* Docked just above the chat panel, mirroring the wordmark on the left. */
  position:fixed!important;top:auto!important;bottom:var(--chrome-gap)!important;
  right:calc(var(--canvas-x) + var(--dock-edge))!important;left:auto!important;
  z-index:60!important;width:max-content!important;max-width:min(320px,calc(100vw - 36px))!important;
  margin:0!important;padding:6px 6px 6px 8px!important;min-height:50px!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:999px!important;
  background:rgba(7,7,18,.62)!important;box-shadow:0 8px 20px rgba(3,3,10,.22),inset 0 1px rgba(255,255,255,.04)!important;
}
#screenApp .user-panel .user-avatar{width:38px!important;height:38px!important;border-radius:50%!important}
#screenApp .user-panel .user-avatar .twemoji.is-avatar{border-radius:50%!important}
#screenApp .user-panel .user-info{flex:0 1 auto!important;max-width:150px!important}
#screenApp .user-panel .u-name{font-size:14px!important}
#screenApp .user-panel .u-status{font-size:11.5px!important}
#screenApp .user-panel .user-btns{gap:0!important}
#screenApp .user-panel .user-btns button{
  width:34px!important;height:34px!important;padding:0!important;border-radius:50%!important;
  color:#aaa9bf!important;
}
#screenApp .user-panel .user-btns button:hover{color:#fff!important;background:rgba(255,255,255,.08)!important}
#screenApp .user-panel .user-pick i{font-size:16px!important;font-weight:700!important;transition:transform .15s ease!important}
#screenApp .user-panel .user-pick:hover i{transform:translateY(1px)!important}

#screenApp .app-signout{
  /* Docked just below the chat panel so it stays inside the centred cluster. */
  position:fixed!important;right:calc(var(--canvas-x) + var(--dock-edge))!important;
  bottom:auto!important;top:var(--chrome-gap)!important;z-index:60!important;
  width:50px!important;height:50px!important;padding:0!important;border-radius:50%!important;cursor:pointer!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid rgba(255,120,140,.45)!important;
  background:linear-gradient(135deg,#ff5f7a,#e0304f)!important;color:#fff!important;
  box-shadow:0 10px 24px rgba(224,48,79,.38),inset 0 1px rgba(255,255,255,.22)!important;
  transition:filter .12s linear,box-shadow .12s linear!important;
}
#screenApp .app-signout i{font-size:20px!important}
#screenApp .app-signout:hover{
  filter:brightness(1.1)!important;box-shadow:0 12px 30px rgba(224,48,79,.5),inset 0 1px rgba(255,255,255,.22)!important;
}
#screenApp .app-clock{
  /* Docked just below the channel panel, mirroring the sign-out button on the right. */
  position:fixed!important;left:calc(var(--canvas-x) + var(--dock-edge))!important;
  bottom:auto!important;top:var(--chrome-gap)!important;z-index:60!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;
  text-align:center!important;min-width:196px!important;
  padding:9px 18px 10px!important;border-radius:20px!important;
  border:1px solid rgba(255,255,255,.08)!important;background:rgba(7,7,18,.62)!important;
  box-shadow:0 8px 20px rgba(3,3,10,.22)!important;pointer-events:none!important;
}
#screenApp .app-clock-time{
  display:flex!important;align-items:baseline!important;justify-content:center!important;gap:4px!important;
  font-size:32px!important;font-weight:600!important;letter-spacing:-.03em!important;line-height:1!important;
  color:#fff!important;font-variant-numeric:tabular-nums!important;
}
#screenApp .app-clock-time small{
  font-size:12px!important;font-weight:600!important;letter-spacing:.04em!important;color:#aaa9bf!important;
}
#screenApp .app-clock-meta{
  font-family:'Newsreader','Times New Roman',serif!important;font-style:italic!important;font-weight:450!important;
  font-size:15px!important;letter-spacing:-.01em!important;text-transform:none!important;line-height:1.15!important;
  color:#e6dccd!important;
}

/* Large open stage */
#screenApp .main-area{
  left:var(--stage-left)!important;right:var(--stage-right)!important;top:var(--panel-inset)!important;bottom:var(--panel-inset)!important;
  width:auto!important;height:auto!important;border-radius:34px!important;z-index:10!important;
  display:flex!important;flex-direction:column!important;
  background:
    linear-gradient(180deg,rgba(8,9,24,.38),rgba(7,7,18,.08) 36%,rgba(7,7,18,.42)),
    radial-gradient(ellipse at 50% 54%,rgba(126,78,255,.1),transparent 58%)!important;
}
#screenApp .main-header{
  min-height:0!important;height:auto!important;margin:10px 12px 0!important;padding:6px 12px!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:20px!important;
  background:rgba(7,7,18,.66)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 8px 20px rgba(3,3,10,.2)!important;
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 10px!important;
  overflow:visible!important;
}
#screenApp .main-header h2{
  font-size:17px!important;flex:0 1 auto!important;max-width:100%!important;
  overflow:visible!important;text-overflow:unset!important;white-space:nowrap!important;
}
#screenApp .header-meta{
  margin-left:auto!important;flex:1 1 240px!important;min-width:0!important;
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  justify-content:flex-end!important;gap:7px!important;overflow:visible!important;
}
#screenApp .member-chip,
#screenApp .room-code-chip,
#screenApp .admin-chip{
  min-height:28px!important;padding:3px 10px!important;border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:none!important;font-size:11px!important;
}
#screenApp .admin-chip{
  color:#ffe3a3!important;border-color:rgba(255,210,118,.3)!important;
  background:rgba(255,197,85,.08)!important;
}
#screenApp .debug-line{
  position:relative!important;inset:auto!important;z-index:1!important;
  flex:0 1 auto!important;width:fit-content!important;max-width:100%!important;min-width:0!important;
  min-height:28px!important;height:auto!important;
  padding:4px 10px!important;border:1px solid rgba(101,230,180,.2)!important;
  border-radius:14px!important;background:rgba(5,8,15,.58)!important;color:var(--float-green)!important;
  backdrop-filter:none!important;white-space:normal!important;overflow:visible!important;
  text-overflow:unset!important;word-break:break-word!important;
  font-size:9.5px!important;line-height:1.4!important;
}
#screenApp #latencyBadge{display:none!important}
#screenApp .main-content,
#screenApp .voice-chat-area{
  flex:1 1 0%!important;min-height:0!important;height:auto!important;overflow:hidden!important;
  display:flex!important;flex-direction:column!important;
}
#screenApp #lobbyView:not(.hidden){
  flex:1 1 0%!important;min-height:0!important;
}
#screenApp #voiceView{
  position:relative!important;min-height:0!important;
}
#screenApp #voiceView:not(.hidden){
  display:flex!important;flex-direction:column!important;
  flex:1 1 0%!important;height:auto!important;
}
#screenApp #voiceView.hidden{display:none!important}
/* The tile area centres a small group and scrolls a large one. `margin:auto`
   on the grid (instead of align-items:center on the wrapper) is what keeps the
   top row reachable once the tiles overflow. */
#screenApp .participants-wrap{
  flex:1 1 0%!important;display:flex!important;flex-direction:column!important;
  align-items:stretch!important;justify-content:flex-start!important;
  min-height:0!important;padding:10px 16px 76px!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:thin!important;scrollbar-color:rgba(167,139,250,.35) transparent!important;
}
#screenApp .participants-wrap::-webkit-scrollbar{width:6px!important}
#screenApp .participants-wrap::-webkit-scrollbar-thumb{background:rgba(167,139,250,.35)!important;border-radius:99px!important}
#screenApp .part-grid{
  width:100%!important;margin:auto!important;
  display:flex!important;align-items:flex-start!important;justify-content:center!important;
  flex-wrap:wrap!important;gap:14px!important;
}
/* Every tile is the exact same box as your own tile. Whisper, volume, message
   and admin tools live in a hover/tap overlay so they never stretch a card. */
#screenApp .p-card{
  width:220px!important;min-width:220px!important;max-width:220px!important;
  height:210px!important;min-height:210px!important;max-height:210px!important;
  padding:16px 14px!important;border-radius:28px!important;
  border:1px solid rgba(255,255,255,.1)!important;
  background:linear-gradient(165deg,rgba(29,24,51,.62),rgba(8,8,20,.58))!important;
  box-shadow:0 10px 26px rgba(2,2,10,.3),inset 0 1px rgba(255,255,255,.07)!important;
  overflow:hidden!important;position:relative!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
  transform:none!important;
}
#screenApp .p-card:hover{transform:none!important}
#screenApp .p-card .p-hit{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  flex:0 0 auto!important;width:100%!important;min-height:0!important;
}
#screenApp .p-card .p-nm{
  margin:0 0 4px!important;padding:0 6px!important;line-height:1.2!important;
}
#screenApp .p-card .p-st{padding:0 6px!important;line-height:1.2!important}
#screenApp .p-whisp,
#screenApp .p-move,
#screenApp .p-controls{
  position:absolute!important;left:12px!important;right:12px!important;
  margin:0!important;opacity:0!important;pointer-events:none!important;
  transition:opacity .12s linear!important;z-index:6!important;
}
#screenApp .p-whisp{
  top:auto!important;bottom:58px!important;min-height:32px!important;
  padding:5px 10px!important;font-size:9.5px!important;
  background:rgba(5,5,16,.9)!important;border-color:rgba(183,151,255,.4)!important;
  width:auto!important;
}
#screenApp .p-move{
  top:12px!important;right:12px!important;left:auto!important;bottom:auto!important;
  min-height:28px!important;padding:4px 9px!important;font-size:9px!important;
  background:rgba(5,5,16,.9)!important;width:auto!important;
}
#screenApp .p-controls{
  bottom:10px!important;top:auto!important;width:auto!important;
  padding:8px 10px 6px!important;border:1px solid rgba(255,255,255,.1)!important;
  border-top:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important;
  background:rgba(5,5,16,.92)!important;
  display:flex!important;align-items:center!important;gap:8px!important;
}
#screenApp .p-controls .vol-wrap{flex:1 1 auto!important;padding:0!important;margin:0!important;min-width:0!important}
#screenApp .p-controls .vol-slider{height:20px!important}
#screenApp .p-controls .vol-val{top:-22px!important}
#screenApp .p-controls .p-actions{margin:0!important;gap:4px!important;flex:0 0 auto!important}
#screenApp .p-controls .btn-icon{width:28px!important;height:28px!important;min-width:28px!important;border-radius:9px!important}
#screenApp .p-card:hover .p-whisp,
#screenApp .p-card:hover .p-move,
#screenApp .p-card:hover .p-controls,
#screenApp .p-card:focus-within .p-whisp,
#screenApp .p-card:focus-within .p-move,
#screenApp .p-card:focus-within .p-controls,
#screenApp .p-card.whisper-out .p-whisp{
  opacity:1!important;pointer-events:auto!important;
}
#screenApp .p-card:not([data-pid="self"]):hover .p-nm,
#screenApp .p-card:not([data-pid="self"]):hover .p-st,
#screenApp .p-card:not([data-pid="self"]):focus-within .p-nm,
#screenApp .p-card:not([data-pid="self"]):focus-within .p-st{opacity:0!important}
#screenApp .p-card:not([data-pid="self"]):hover .p-avatar,
#screenApp .p-card:not([data-pid="self"]):focus-within .p-avatar{opacity:.55!important}
#screenApp .p-card .p-admin{top:12px!important;left:12px!important}
#screenApp .p-avatar{
  width:116px!important;height:116px!important;min-height:116px!important;flex:0 0 116px!important;
  margin:4px auto 12px!important;border-radius:50%!important;border:2px solid transparent!important;
  background:linear-gradient(#141226,#141226) padding-box,linear-gradient(135deg,var(--float-pink),var(--float-cyan)) border-box!important;
  box-shadow:0 0 0 6px rgba(150,102,255,.06),0 0 22px rgba(145,86,255,.2)!important;
  overflow:hidden!important;
}
#screenApp .p-avatar .twemoji.is-avatar{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  border-radius:50%!important;object-fit:cover!important;filter:none!important;
}
#screenApp .p-card .p-nm{font-size:15px!important}
#screenApp .p-card .p-st{font-size:10px!important;color:#b8b7ca!important}
#screenApp .p-card.speaking{
  border-color:rgba(101,230,180,.48)!important;
  box-shadow:0 0 0 1px rgba(101,230,180,.18),0 0 42px rgba(101,230,180,.16),0 24px 58px rgba(2,2,10,.4)!important;
}

#screenApp #controlsDock{display:none!important}
#screenApp:has(#voiceView:not(.hidden)) #controlsDock{display:flex!important}
#screenApp .controls-dock,
#screenApp #controlsDock{
  position:absolute!important;left:50%!important;right:auto!important;
  bottom:10px!important;top:auto!important;
  transform:translateX(-50%)!important;z-index:50!important;
  width:max-content!important;max-width:calc(100% - 28px)!important;min-height:0!important;
  margin:0!important;padding:6px 10px!important;gap:6px!important;
  border:1px solid rgba(183,151,255,.38)!important;border-radius:999px!important;
  background:linear-gradient(135deg,rgba(22,18,42,.86),rgba(7,8,20,.84))!important;
  box-shadow:0 12px 32px rgba(2,2,10,.45),0 0 20px rgba(123,77,255,.12),inset 0 1px rgba(255,255,255,.1)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important;
}
#screenApp .ctrl-btn{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  border-radius:50%!important;border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(255,255,255,.055)!important;color:#aaaac0!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05)!important;
}
#screenApp .ctrl-btn:hover{
  color:#fff!important;transform:none!important;
  border-color:rgba(167,139,250,.42)!important;background:rgba(167,139,250,.14)!important;
  box-shadow:0 12px 25px rgba(68,42,155,.3)!important;
}
#screenApp .ctrl-btn.active{
  color:#10101b!important;border-color:transparent!important;
  background:linear-gradient(135deg,var(--float-pink),var(--float-cyan))!important;
  box-shadow:0 8px 24px rgba(103,232,249,.28)!important;
}
#screenApp .ctrl-btn.danger{
  color:#fff!important;border-color:transparent!important;background:#ff5576!important;
  box-shadow:0 9px 25px rgba(255,70,110,.35)!important;
}
#screenApp .hangup-btn{
  width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;
  background:linear-gradient(145deg,#ff6684,#ed3158)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 10px 24px rgba(237,49,88,.38),inset 0 1px rgba(255,255,255,.3)!important;
}
#screenApp .hangup-btn i{font-size:20px!important}
#screenApp .ctrl-sep{height:20px!important;margin:0 2px!important}
#screenApp .hangup-btn:hover{
  background:linear-gradient(145deg,#ff7892,#f03d62)!important;
  box-shadow:0 12px 28px rgba(237,49,88,.5)!important;
}
#screenApp .call-more{
  bottom:90px!important;border-radius:22px!important;
  background:rgba(13,12,27,.96)!important;border-color:var(--float-line-hi)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.6)!important;
}

/* Chat uses the same exact vertical edge as every other surface. */
#screenApp .chat-sidebar{
  right:calc(var(--canvas-x) + var(--dock-edge))!important;left:auto!important;top:var(--panel-inset)!important;bottom:var(--panel-inset)!important;
  width:318px!important;height:auto!important;border-radius:30px!important;z-index:30!important;
  display:flex!important;flex-direction:column!important;
}
#screenApp .chat-header{
  min-height:50px!important;padding:6px 10px!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;background:transparent!important;
}
#screenApp .chat-tabs{
  padding:3px!important;border-radius:999px!important;background:rgba(3,3,10,.35)!important;
  border:1px solid rgba(255,255,255,.07)!important;
}
#screenApp .chat-tabs{display:flex!important;align-items:stretch!important}
#screenApp .chat-tab{
  border-radius:999px!important;padding:0 11px!important;min-height:30px!important;line-height:1!important;
  color:#aaa9bf!important;font-size:12px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  transform:none!important;will-change:auto!important;
}
#screenApp .chat-tab.active{
  color:#0d0b16!important;background:linear-gradient(135deg,var(--float-pink),#ddd6fe)!important;
  box-shadow:0 7px 20px rgba(167,139,250,.26)!important;transform:none!important;
}
#screenApp .tr-bar{
  margin:6px 10px 0!important;padding:4px 8px!important;border:1px solid rgba(255,255,255,.06)!important;
  border-radius:14px!important;background:rgba(3,3,10,.24)!important;
}
#screenApp .chat-msgs{padding:16px!important}
#screenApp .chat-input-wrap{
  margin:6px 10px 10px!important;padding:4px!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:999px!important;background:rgba(3,3,10,.38)!important;
}
#screenApp .chat-input-wrap input{background:transparent!important;border:0!important;min-height:32px!important;padding:6px 10px!important}
#screenApp .chat-input-wrap .btn-p{
  width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;border-radius:50%!important;
  background:linear-gradient(135deg,var(--float-pink),var(--float-cyan))!important;color:#11101b!important;
}

/* Lobby keeps the same floating composition */
#screenApp #lobbyView{
  justify-content:center!important;padding:20px 28px 24px!important;overflow:auto!important;
}
#screenApp .quick-join{width:min(390px,100%)!important}
#screenApp .quick-join input{
  min-height:48px!important;border-radius:15px!important;
  background:rgba(5,5,16,.5)!important;border-color:rgba(255,255,255,.1)!important;
}

html[data-scene="nyvaris"] #screenApp #voiceView > #controlsDock,
html[data-scene="nyvaris"] #screenApp #controlsDock{
  position:absolute!important;bottom:10px!important;top:auto!important;z-index:50!important;
}

/* Performance pass: avoid full-screen blur, continuous animation and
   compositor layers. Keep feedback quick and limited to cheap properties. */
#screenApp *,
#screenApp *::before,
#screenApp *::after{
  animation:none!important;
  will-change:auto!important;
  transition-duration:.12s!important;
  transition-timing-function:linear!important;
}
/* No backdrop blur anywhere (modals, toasts, phone drawers, auth). Chrome without GPU
   acceleration re-blurs the whole photo background on every repaint, which is the main
   reason some PCs felt sluggish. Surfaces are already ~.85-.99 opaque so nothing looks off. */
body *,body *::before,body *::after{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* Full-screen grain / grid overlays are extra composited layers for a barely visible effect. */
body::after,#screenApp::after{content:none!important;display:none!important}
#screenAuth .auth-logo::before{filter:none!important}
/* The base sheet force-promotes ~20 element types (every chat bubble, button, chip, tab…) to
   its own GPU layer with translateZ(0). Nothing animates them any more, and on Chrome with
   weak or disabled GPU acceleration each layer is rasterised in software and re-composited
   every frame, so a busy room could stutter on its own. Let them paint normally. */
#screenApp .p-card,#screenApp .p-avatar,#screenApp .srv-icon,#screenApp .chan-item,
#screenApp .c-bubble,#screenApp .c-msg,#screenApp .btn,#screenApp .btn-p,#screenApp .btn-g,
#screenApp .btn-icon,#screenApp .ctrl-btn,#screenApp .room-code-chip,#screenApp .member-chip,
#screenApp .chat-tab,#screenApp .app-dock button,#screenApp .auth-tab,#screenApp .admin-chip{
  transform:none;backface-visibility:visible;
}
/* A peer whose presence blipped: still here, still heard, just waiting for Firebase to catch up. */
#screenApp .p-card.reconnecting{opacity:.62!important}
#screenApp .p-card.reconnecting .p-avatar{filter:saturate(.4)!important}
/* CSS filters on every avatar/emoji image re-render on each tile update; a box-shadow on the
   round avatar gives the same lift for free. */
#screenApp .twemoji,#screenApp .p-avatar .twemoji,#screenApp .emoji-grid .twemoji{filter:none!important}
#screenApp .p-avatar .twemoji.is-avatar{box-shadow:0 12px 22px rgba(0,0,0,.45)!important}

@media(max-width:1180px) and (min-width:901px){
  #screenApp{--stage-left:258px;--stage-right:300px}
  #screenApp .channel-bar{width:226px!important}
  #screenApp .chat-sidebar{width:276px!important}
  #screenApp .room-code-chip{font-size:0!important;padding:0!important;width:34px!important;justify-content:center!important}
  #screenApp .room-code-chip i{font-size:14px!important}
}

/* Mobile: one open stage, floating pill navigation, sliding glass drawers */
@media(max-width:900px){
  #screenApp{display:block!important}
  #screenApp .server-bar{
    /* The nav pill hugs its content and floats centred under the stage instead of
       stretching across the whole screen. It still scrolls if it ever outgrows it. */
    /* Sits back at the bottom edge as the single bottom bar on phones. */
    left:50%!important;right:auto!important;top:auto!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    width:max-content!important;min-width:0!important;max-width:calc(100vw - 16px)!important;height:58px!important;
    transform:translateX(-50%)!important;
    flex-direction:row!important;justify-content:center!important;padding:7px 10px!important;
    border-radius:999px!important;overflow-x:auto!important;overflow-y:hidden!important;z-index:420!important;
  }
  #screenApp #serverList{width:auto!important;flex-direction:row!important;overflow:visible!important;gap:0!important;display:contents!important}
  /* Equal spacing: every icon and separator is spaced identically via the pill's gap. */
  #screenApp .server-bar{gap:10px!important}
  #screenApp .srv-sep{width:1px!important;height:24px!important;margin:0!important;flex:0 0 1px!important}
  /* keep the vertical divider before the chat button */
  #screenApp .srv-icon{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
  #screenApp .channel-bar{
    left:10px!important;right:10px!important;top:10px!important;bottom:78px!important;
    width:auto!important;height:auto!important;border-radius:26px!important;z-index:410!important;
    transform:translateY(110%)!important;visibility:hidden!important;pointer-events:none!important;
    transition:transform .16s ease,visibility .16s!important;
  }
  #screenApp .channel-bar.open{
    transform:none!important;visibility:visible!important;pointer-events:auto!important;
  }
  #screenApp .main-area{
    /* The stage starts below a dedicated 56px strip that belongs to the profile pill and
       sign-out button, so nothing floats over the room header any more. */
    left:8px!important;right:8px!important;top:64px!important;bottom:78px!important;
    width:auto!important;height:auto!important;border-radius:26px!important;padding-bottom:0!important;
  }
  #screenApp .chat-sidebar{
    left:10px!important;right:10px!important;top:10px!important;bottom:78px!important;
    width:auto!important;height:auto!important;border-radius:26px!important;z-index:415!important;
    transform:translateY(110%)!important;visibility:hidden!important;pointer-events:none!important;
    transition:transform .16s ease,visibility .16s!important;
  }
  #screenApp .chat-sidebar.open{
    transform:none!important;visibility:visible!important;pointer-events:auto!important;
  }
  #screenApp .controls-dock,
  #screenApp #controlsDock{
    /* Anchored INSIDE the stage panel (main-area): absolute against its bottom edge. */
    position:absolute!important;left:50%!important;right:auto!important;top:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;min-height:0!important;padding:5px 8px!important;gap:4px!important;
    /* Never clip buttons on narrow phones: the pill caps at the screen width and
       scrolls sideways if a device is too small to show every control at once. */
    max-width:calc(100vw - 12px)!important;flex-wrap:nowrap!important;
    overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;
  }
  #screenApp #controlsDock::-webkit-scrollbar{display:none!important}
  #screenApp .ctrl-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;flex:0 0 auto!important}
  #screenApp .hangup-btn{flex:0 0 auto!important}
  #screenApp .ctrl-sep{flex:0 0 1px!important}
  #screenApp .participants-wrap{padding:44px 12px 84px!important}
  #screenApp .p-card{
    width:min(190px,44vw)!important;min-width:150px!important;max-width:190px!important;
    height:190px!important;min-height:190px!important;max-height:190px!important;
  }
  #screenApp .p-avatar{width:96px!important;height:96px!important;min-height:96px!important;flex:0 0 96px!important}
  /* Header owns its full width now - no reserved gap for floating buttons.
     Title, member count and connection status all share one dynamic row. */
  #screenApp .main-header{
    margin:8px!important;padding:7px 12px!important;
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;
  }
  #screenApp .main-header h2{
    /* The title never gets squeezed out: it keeps up to a third of the screen and only
       then ellipsizes; the status pill is the flexible part since it can scroll. */
    flex:0 0 auto!important;max-width:34vw!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  /* Phones: no room for a wordmark or clock; keep a compact profile pill over the header. */
  #screenApp .app-brand,#screenApp .app-clock{display:none!important}
  /* Phones: the bottom edge belongs to the nav pill, so sign-out sits beside the profile pill. */
  #screenApp .app-signout{
    top:12px!important;right:12px!important;bottom:auto!important;z-index:430!important;
    width:40px!important;height:40px!important;
  }
  #screenApp .app-signout i{font-size:17px!important}
  #screenApp .user-panel,#screenApp #userPanel{
    /* The desktop rule anchors this pill by its bottom edge; on phones it is anchored
       by its top, so the bottom anchor must be released or the pill stretches. */
    top:12px!important;right:60px!important;bottom:auto!important;left:auto!important;z-index:430!important;
    min-height:40px!important;max-height:46px!important;padding:3px!important;gap:0!important;
  }
  #screenApp .user-panel .user-info{display:none!important}
  #screenApp .user-panel .user-avatar{width:34px!important;height:34px!important;border-radius:50%!important}
  /* Avatar image must fill the round pill on phones — same as desktop, never the
     tiny 22px emoji size or the bare initials fallback. */
  #screenApp .user-panel .user-avatar .twemoji{width:22px!important;height:22px!important}
  #screenApp .user-panel .user-avatar .twemoji.is-avatar{
    width:100%!important;height:100%!important;object-fit:cover!important;
    border-radius:50%!important;display:block!important;
  }
  #screenApp .user-panel .user-avatar.has-avatar{background:transparent!important;padding:0!important}
  #screenApp .user-panel .user-btns button{width:30px!important;height:30px!important}
  /* Member count and connection status sit on the title's row, hugging their content. */
  #screenApp .header-meta{
    flex:1 1 auto!important;min-width:0!important;
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
    justify-content:flex-start!important;gap:6px!important;
  }
  #screenApp .header-meta .member-chip{flex:0 0 auto!important;white-space:nowrap!important}
  #screenApp .debug-line:not(.hidden){
    /* Hugs its text on one line and shrinks with the row; scrolls sideways if the
       room key is too long for the screen instead of wrapping or getting clipped. */
    display:block!important;flex:0 1 auto!important;
    width:fit-content!important;max-width:100%!important;min-width:0!important;margin:0!important;
    white-space:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important;
    min-height:0!important;padding:3px 10px!important;
    font-size:9px!important;line-height:1.5!important;text-align:left!important;
  }
  #screenApp .debug-line::-webkit-scrollbar{display:none!important}
  /* Phones: the floating server pill is the ONLY bottom bar — chat button lives
     inside it now, so the separate app dock is gone. */
  #screenApp .app-dock{display:none!important}
  
  /* Chat button inside the server pill */
  #screenApp .server-bar .srv-chat{
    position:relative!important;background:rgba(196,181,253,.08)!important;color:var(--ink,#f6f3ff)!important;
    font-family:inherit!important;padding:0!important;
  }
  #screenApp .server-bar .srv-chat.active{background:linear-gradient(135deg,#c4b5fd,#f0c4a0)!important;color:#1b1030!important}
  #screenApp .server-bar .srv-chat .badge{
    position:absolute!important;top:-4px!important;right:-4px!important;border:2px solid rgba(12,8,14,.95)!important;
    height:18px!important;min-width:18px!important;line-height:14px!important;font-size:10px!important;padding:0 3px!important;
  }
#screenApp .mobile-nav{display:none!important}
  /* While a drawer (chat or channels) covers the stage, the floating profile pill and
     sign-out button would sit on top of the drawer's own header - hide them until closed. */
  #screenApp:has(.chat-sidebar.open) .user-panel,
  #screenApp:has(.chat-sidebar.open) #userPanel,
  #screenApp:has(.chat-sidebar.open) .app-signout,
  #screenApp:has(.channel-bar.open) .user-panel,
  #screenApp:has(.channel-bar.open) #userPanel,
  #screenApp:has(.channel-bar.open) .app-signout{display:none!important}
  /* The drawers are translucent, so the call controls underneath showed through right
     behind the chat input. They are unusable while covered anyway - hide them. */
  #screenApp:has(.chat-sidebar.open) #controlsDock,
  #screenApp:has(.channel-bar.open) #controlsDock{display:none!important}
}

@media(max-width:560px){
  #screenApp .header-meta .room-code-chip,
  #screenApp .header-meta .admin-chip{display:none!important}
  #screenApp .main-header{padding:9px 12px!important;min-height:58px!important}
  #screenApp .main-header h2{font-size:17px!important}
  #screenApp .controls-dock{max-width:calc(100% - 20px)!important;overflow-x:auto!important;justify-content:flex-start!important}
}

/* Very narrow phones: slightly smaller control buttons so the whole dock fits. */
@media(max-width:380px){
  #screenApp .ctrl-btn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  #screenApp .controls-dock,#screenApp #controlsDock{gap:3px!important;padding:4px 6px!important}
  #screenApp .hangup-btn{min-width:52px!important}
}

@media(prefers-reduced-motion:reduce){
  #screenApp *,#screenApp *::before,#screenApp *::after{animation:none!important;transition:none!important}
}

/* Desktop (PC): no chat button in the server pill — chat opens from the sidebar there.
   Everything in the pill is evenly spaced by its gap; separators are 1px vertical lines. */
@media (min-width:901px){
  #screenApp .server-bar .srv-chat,
  #screenApp .server-bar .srv-sep-chat{display:none!important}
  /* Even spacing: one shared 10px rhythm; serverList flattened so its own gap
     doesn't double the space around server icons. */
  #screenApp .server-bar{gap:10px!important}
  #screenApp .server-bar #serverList{display:contents!important;gap:0!important}
  #screenApp .server-bar .srv-sep{width:1px!important;height:24px!important;margin:0!important;flex:0 0 1px!important}
}

/* ---------- background dim control (PC only) ----------
   Sits in the same top chrome band as the clock (left) and sign-out (right),
   centred on the canvas so the three read as one row. The veil darkens only
   the page background scene; panels/tiles/controls render above it. */
#screenApp .bg-dim-ctl{
  position:fixed!important;left:50%!important;top:calc(var(--chrome-gap) + 8px)!important;z-index:60!important;
  transform:translateX(-50%)!important;
  display:none!important;align-items:center!important;gap:10px!important;
  height:44px!important;padding:0 16px!important;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.08)!important;background:rgba(7,7,18,.62)!important;
  box-shadow:0 8px 20px rgba(3,3,10,.22)!important;
  color:#aaa9bf!important;pointer-events:auto!important;
}
@media(min-width:901px){
  #screenApp .bg-dim-ctl{display:flex!important}
}
#screenApp .bg-dim-ctl .ph,#screenApp .bg-dim-ctl .ph-fill{font-size:17px!important;width:17px!important;height:17px!important}
#screenApp .bg-dim-ctl .ph-fill{color:#c9c2e8!important}
#screenApp .bg-dim-range,#screenApp #bgDimRange{
  -webkit-appearance:none!important;appearance:none!important;
  width:170px!important;height:22px!important;background:transparent!important;cursor:pointer!important;margin:0!important;padding:0!important;
}
#screenApp #bgDimRange::-webkit-slider-runnable-track{height:5px!important;border-radius:99px!important;background:rgba(255,255,255,.14)!important}
#screenApp #bgDimRange::-moz-range-track{height:5px!important;border-radius:99px!important;background:rgba(255,255,255,.14)!important}
#screenApp #bgDimRange::-webkit-slider-thumb{-webkit-appearance:none!important;appearance:none!important;width:15px!important;height:15px!important;border-radius:50%!important;background:#fff!important;border:none!important;margin-top:-5px!important;box-shadow:0 2px 8px rgba(0,0,0,.55)!important}
#screenApp #bgDimRange::-moz-range-thumb{width:15px!important;height:15px!important;border-radius:50%!important;background:#fff!important;border:none!important;box-shadow:0 2px 8px rgba(0,0,0,.55)!important}
/* Real veil element as #screenApp's first child: #screenApp's own ::before/::after were
   taken, and a pseudo on .app-layout (the same element) collided with them. A child div at
   z-index 0 paints above the element's scene background and below every panel (z 1+). */
#screenApp #bgDimVeil{
  position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;
  background:#050308!important;opacity:var(--bg-dim,0)!important;
  transition:opacity .25s ease!important;
}
@media(max-width:900px){
  #screenApp .bg-dim-ctl{display:none!important}
  #screenApp #bgDimVeil{opacity:0!important}
}