:root{
  --bg:#10151b;
  --surface-1:#141a22;
  --surface-2:#19212b;
  --surface-3:#222c38;
  --stroke:rgba(145,171,201,.09);
  --stroke2:rgba(145,171,201,.15);
  --text:#edf3f9;
  --muted:#a0acbb;
  --muted2:#748194;
  --primary:#5c97da;
  --primary2:#4fa983;
  --accent-warm:#d3a661;
  --danger:#dc555c;
  --radius:12px;
  --font-ui:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Background image controls */
  --app-bg-image:none;
  --app-bg-blur:0px;
  --app-bg-zoom:1;

}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(980px 620px at -12% -8%, rgba(69,119,173,.24), transparent 64%),
    radial-gradient(820px 520px at 112% 108%, rgba(60,131,101,.16), transparent 66%),
    linear-gradient(145deg, #121821, #0e1319 58%, #111820);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App background image layer (fixed to viewport; survives scrolling) */
.bg-host{ position:relative; }

body[data-has-bg="1"]{
  overflow-x:hidden;
  position:relative;
  isolation:isolate;
}

body[data-has-bg="1"]::before{
  content:"";
  position:fixed;
  inset:-32px;
  background-image: var(--app-bg-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  transform:translateZ(0) scale(var(--app-bg-zoom));
  transform-origin:center;
  filter: blur(var(--app-bg-blur));
  will-change: filter, background-size;
  pointer-events:none;
  z-index:0;
}

body[data-has-bg="1"] .app{
  position:relative;
  z-index:1;
}

/* Global scrollbars */
*{scrollbar-color: rgba(255,255,255,.16) rgba(0,0,0,.18); scrollbar-width: thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;border:2px solid rgba(0,0,0,.35)}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20)}
*::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}

/* Home hero layout */
.edu-hero{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 860px){
  .edu-hero{ grid-template-columns: 1fr; }
}

.edu-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 560px){
  .edu-kpis{ grid-template-columns: 1fr; }
}
.edu-kpi{
  border:1px solid rgba(255,255,255,.10);
  background:#2b2d31;
  border-radius:8px;
  padding:12px 12px;
}
.edu-kpi-label{ font-size:12px; color:var(--muted); }
.edu-kpi-val{ font-size:24px; font-weight:820; letter-spacing:.2px; margin-top:4px; }
.edu-kpi-sub{ font-size:12px; color:var(--muted2); margin-top:2px; }

.edu-sorter{
  border:1px solid rgba(255,255,255,.10);
  background:#2b2d31;
  border-radius:8px;
  padding:12px 12px;
}
.edu-sorter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.edu-sorter-title{ font-weight:820; letter-spacing:.2px; }
.edu-badge{
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.85);
}
.edu-sorter-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.edu-sorter-name{ width:92px; font-size:12px; color: rgba(255,255,255,.82); }
.edu-sorter-val{ width:44px; text-align:right; font-size:12px; color: rgba(255,255,255,.78); }

.edu-bar{
  flex:1;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.edu-bar i{
  display:block;
  height:100%;
  width: var(--w, 50%);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--primary) 70%, transparent 30%),
    color-mix(in oklab, var(--primary2) 55%, transparent 45%)
  );
}
.edu-sorter-note{ margin-top:12px; }

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:28px 16px 60px;
  position:relative;
}

.topbar{
  width:min(1100px, 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 6px 20px;
}

.brand{display:flex; align-items:center; gap:12px}
.logo-dot{
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--primary));
  box-shadow: 0 0 22px rgba(110,168,255,.35);
}
.brand-title{font-weight:760; letter-spacing:.3px}
.brand-subtitle{font-size:12px; color:var(--muted2); margin-top:2px}

.card{
  width:min(1100px, 100%);
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(110,168,255,.14), rgba(255,255,255,0) 60%),
    radial-gradient(700px 420px at 90% 10%, rgba(178,130,255,.10), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid color-mix(in oklab, var(--stroke) 78%, white 22%);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 30px 85px rgba(0,0,0,.60);
  overflow:hidden;
  position:relative;
  transform: translateZ(0);
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 260px at 18% 0%, rgba(110,168,255,.18), rgba(255,255,255,0) 60%),
    radial-gradient(540px 260px at 90% 10%, rgba(255,216,77,.10), rgba(255,255,255,0) 60%);
  opacity:.55;
  pointer-events:none;
  filter: blur(14px);
}

.view{
  padding:28px 24px 26px;
  display:none;
}
.view[data-active="true"]{display:block}

/* Fullscreen when logged in (chat mode) */
body[data-mode="chat"] .app{
  padding:0;
  align-items:stretch;
  min-height:100vh;
  min-height:100dvh;
}
body[data-mode="chat"] .topbar{display:none}
body[data-mode="chat"] .card{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  border-radius:0;
  border:none;
  box-shadow:none;
  background:transparent;
}
body[data-mode="chat"] .view{padding:0}
body[data-mode="chat"] #view-chat{
  height:100vh;
  height:100dvh;
}

.h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px}
.h2{font-size:18px; font-weight:740; letter-spacing:.2px}
.muted{color:var(--muted); margin:0}
.small{font-size:12px}

.btn-row{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

.btn{
  appearance:none;
  border:1px solid color-mix(in oklab, var(--stroke2) 80%, var(--primary) 20%);
  background:
    radial-gradient(120px 80px at 20% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--text);
  padding:12px 14px;
  border-radius: 16px;
  font-weight:720;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  transform: translateZ(0);
  transition: transform .10s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{
  background:
    radial-gradient(140px 90px at 20% 10%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color: color-mix(in oklab, var(--primary) 45%, var(--stroke2) 55%);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.btn:active{transform: translateY(0) scale(.99); filter: brightness(.98)}
.btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent 78%), 0 16px 45px rgba(0,0,0,.35);
}
.btn[disabled]{opacity:.55; cursor:not-allowed; pointer-events:none}
.btn.primary{
  border-color: color-mix(in oklab, var(--primary) 55%, white 5%);
  background:
    radial-gradient(160px 110px at 30% 15%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--primary) 34%, transparent 66%), color-mix(in oklab, var(--primary2) 20%, transparent 80%));
}
.btn.primary:hover{border-color: color-mix(in oklab, var(--primary) 70%, white 10%)}
.btn.tiny{padding:8px 10px; border-radius: 14px; font-size:12px; font-weight:760}

.icon-btn{
  appearance:none;
  background: rgba(255,255,255,.03);
  border:1px solid var(--stroke2);
  color:var(--text);
  border-radius: 14px;
  padding:10px 10px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-btn:hover{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18)}
.icon-btn:active{transform: translateY(1px)}
.icon-btn.eye{min-width:44px}

.footnote{
  margin-top:18px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pill{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius:999px;
  padding:6px 10px;
}

.view-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px;
}

.form{margin-top:6px}
.label{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin:12px 0 7px;
}

.input, .input:focus{
  width:100%;
  border:1px solid color-mix(in oklab, var(--stroke2) 78%, var(--primary) 22%);
  background: linear-gradient(180deg, rgba(12,16,24,.34), rgba(6,10,18,.24));
  color:var(--text);
  border-radius: 16px;
  padding:12px 12px;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .16s ease, box-shadow .16s ease, transform .10s ease, background .16s ease;
}
.input::placeholder{color: color-mix(in oklab, var(--muted) 70%, transparent 30%)}
.input:focus{
  border-color: color-mix(in oklab, var(--primary) 70%, white 30%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent 78%), 0 10px 30px rgba(0,0,0,.35);
}

.input-wrap{display:flex; align-items:stretch; gap:10px}
.input-wrap .input{flex:1}

/* Settings: account code */
.mono-input{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.7px;
}
.cloak-input{
  pointer-events:none;
  user-select:none;
  caret-color: transparent;
}
.settings-code-editor{
  margin-top:10px;
}
.settings-code-row{gap:8px}
.settings-code-row .input{padding:10px 12px; font-size:13px}

/* Settings: animated toggle */

.settings-slider-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.settings-slider-row input[type="range"]{
  flex:1;
}
.settings-slider-val{
  width:56px;
  font-size:12px;
  color:var(--muted);
}

.settings-choice-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.settings-choice.is-active{
  border-color: color-mix(in oklab, var(--primary) 70%, white 10%);
  background:
    radial-gradient(160px 110px at 30% 15%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--primary) 34%, transparent 66%), color-mix(in oklab, var(--primary2) 20%, transparent 80%));
}

.toggle{
  width:56px;
  height:32px;
}

.toggle-track{
  width:56px;
  height:32px;
  background: rgba(255,255,255,08);
  border:1px solid rgba(255,255,255,14);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.toggle-track::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(110,168,255,45), rgba(110,168,255,0) 62%);
  opacity:0;
  filter: blur(8px);
  transition: opacity .18s ease;
  pointer-events:none;
}

.toggle-track::after{
  left:4px;
  width:24px;
  height:24px;
  transform: translate(0,-50%);
  background: rgba(255,255,255,86);
  box-shadow: 0 10px 26px rgba(0,0,0,35);
  transition: transform .20s cubic-bezier(.2,.85,.2,1), background .18s ease;
}

.toggle input:focus-visible + .toggle-track{
  box-shadow: 0 0 0 3px rgba(110,168,255,16);
}

.toggle input:checked + .toggle-track{
  background: rgba(110,168,255,22);
  border-color: rgba(110,168,255,52);
}

.toggle input:checked + .toggle-track::before{
  opacity:0; /* remove glow */
  animation:none;
}

.toggle input:checked + .toggle-track::after{
  transform: translate(24px,-50%);
  background: rgba(255,255,255,95);
}

.toggle:active .toggle-track{
  transform: scale(0.98);
}

.error{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid rgba(255,107,107,.35);
  background: rgba(255,107,107,.08);
  color: rgba(255,220,220,.95);
  border-radius: 14px;
  font-size:13px;
}

/* Upload */
.upload{
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  overflow:hidden;
  position:relative;
}
.create-avatar-upload{margin-top:8px}
.upload > input{position:absolute; inset:0; opacity:0; cursor:pointer}
.upload-ui{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
}
.upload-actions-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.upload-actions-row{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.upload-left{display:flex; align-items:center; gap:14px; min-width:0}
.upload-text{min-width:0}
.strong{font-weight:740}
.row{display:flex; align-items:center; gap:10px; margin-top:10px}
.split{align-items:flex-start}

.avatar-wrap{display:flex; align-items:center; justify-content:center}
.avatar-ring{
  width:84px; height:84px;
  border-radius:50%;
  padding:3px;
  background: linear-gradient(180deg, rgba(110,168,255,.55), rgba(255,255,255,.06));
}
.avatar-clip{
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  touch-action:none;
}
.avatar-clip img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform: translate(-50%,-50%) scale(1);
  transform-origin:center;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.crop-controls{
  margin-top:10px;
  padding:12px 12px 10px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
}
#zoom{width:100%}

/* Toast w/ animated timer */
.toast{
  position:fixed;
  top:max(18px, env(safe-area-inset-top));
  left:max(18px, env(safe-area-inset-left));
  right:auto;
  bottom:auto;
  z-index:2147483647;
  width:min(390px, calc(100vw - 36px));
  opacity:0;
  pointer-events:none;
  transform: translate3d(0,-10px,0) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
body[data-sidebar-position="left"] .toast{
  left:auto;
  right:max(18px, env(safe-area-inset-right));
}
body.slideshow-full .toast,
body.slideshow-full[data-sidebar-position="left"] .toast{
  left:max(18px, env(safe-area-inset-left));
  right:auto;
}
.toast.is-showing{
  opacity:1;
  pointer-events:auto;
  transform: translate3d(0,0,0) scale(1);
}
.toast.is-leaving{
  opacity:0;
  pointer-events:none;
  transform: translate3d(0,-8px,0) scale(.985);
}
.toast-inner{
  position:relative;
  width:100%;
  overflow:hidden;
  border:1px solid color-mix(in oklab, var(--primary) 34%, rgba(255,255,255,.14) 66%);
  background:
    radial-gradient(220px 120px at 12% 0%, rgba(123,182,255,.20), transparent 64%),
    radial-gradient(180px 120px at 100% 20%, rgba(106,125,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(15,20,34,.82), rgba(7,10,18,.74));
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.045) inset;
  padding:13px 12px 15px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:12px;
}
.toast-inner::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.06));
  pointer-events:none;
}
.toast-left{
  min-width:0;
  position:relative;
  padding-left:12px;
}
.toast-left::before{
  content:"";
  position:absolute;
  left:0;
  top:.42em;
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--primary);
  box-shadow: 0 0 16px color-mix(in oklab, var(--primary) 75%, transparent 25%);
}
.toast-title{
  font-size:14px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.2px;
}
.toast-body{
  margin-top:5px;
  color:rgba(255,255,255,.68);
  font-size:12.5px;
  line-height:1.35;
}
.toast-code{
  margin-top:10px;
  max-width:100%;
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  padding:8px 10px;
  border-radius: 12px;
  letter-spacing:.6px;
  width: fit-content;
}
.toast-right{
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.toast .icon-btn{
  width:34px;
  height:34px;
  padding:0;
  border-radius:12px;
  background: rgba(255,255,255,.055);
}
.toast .btn.tiny{
  padding:8px 10px;
  border-radius:12px;
}

.toast-timer{
  position:absolute;
  left:12px;
  right:12px;
  bottom:8px;
  height:3px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
}
.toast-timer-bar{
  height:100%;
  width:100%;
  transform-origin:left;
  background: linear-gradient(90deg, rgba(123,182,255,.98), rgba(106,125,255,.72), rgba(255,255,255,.74));
  box-shadow: 0 0 18px rgba(123,182,255,.42);
  transform: scaleX(1);
}
@keyframes toastbar{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}
@media (max-width: 560px){
  .toast,
  body[data-sidebar-position="left"] .toast{
    left:14px;
    right:14px;
    width:auto;
  }
}

/* Chat UI */
#view-chat{padding:0}
.chat-shell{
  --main-sidebar-w: 272px;
  --members-sidebar-w: 292px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) var(--main-sidebar-w);
  grid-template-rows:auto minmax(0, 1fr);
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
}

.chat-main{
  position:relative;
  --composer-h: 0px;
  --overlays-h: 0px;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  grid-row:2;
  order:2;
  background:#313338;
}

.members-sidebar{
  grid-row:2;
  order:1;
}

.sidebar:not(.members-sidebar){
  grid-row:2;
  order:3;
}

body[data-members-sidebar="0"] .chat-shell,
body:not([data-members-sidebar]) .chat-shell{
  grid-template-columns: minmax(0, 1fr) var(--main-sidebar-w);
}

body[data-members-sidebar="1"] .chat-shell{
  grid-template-columns: var(--members-sidebar-w) minmax(0, 1fr) var(--main-sidebar-w);
}

body[data-members-sidebar="1"] .chat-main{
  order:2;
  grid-column:2;
}

body[data-members-sidebar="1"] .members-sidebar{
  display:flex;
  order:1;
  grid-column:1;
  min-width:0;
}

body[data-members-sidebar="1"] .sidebar:not(.members-sidebar){
  order:3;
  grid-column:3;
}

body[data-members-sidebar="0"] .members-sidebar,
body:not([data-members-sidebar]) .members-sidebar{
  display:none;
}

body[data-sidebar-position="left"] .chat-shell{
  grid-template-columns: var(--main-sidebar-w) minmax(0, 1fr);
}

body[data-sidebar-position="left"][data-members-sidebar="1"] .chat-shell{
  grid-template-columns: var(--main-sidebar-w) minmax(0, 1fr) var(--members-sidebar-w);
}

body[data-sidebar-position="left"] .sidebar:not(.members-sidebar){
  order:1;
  grid-column:1;
}

body[data-sidebar-position="left"] .chat-main{
  order:2;
  grid-column:2;
}

body[data-sidebar-position="left"] .members-sidebar{
  order:3;
  grid-column:3;
  min-width:0;
}

body[data-room-view="1"] .chat-top{
  display:none;
}

.chat-top{
  display:none;
}

.room-title{font-size:18px; font-weight:900; letter-spacing:.2px}
.room-sub{margin-top:3px; font-size:12px; color:var(--muted2)}

.room-info{min-width:0}

.online-pill{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:8px 10px;
  border-radius: 999px;
  max-width: min(520px, 46vw);
  min-width: 120px;
  overflow: visible;
  position: relative;
}

.online-label{
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,.80);
  flex:0 0 auto;
}

.online-list{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 1 1 auto;
  min-width:0;
  flex-wrap: wrap;
  overflow: visible;
  padding:2px 0 2px 0;
}

.online-ava{
  position:relative;
  flex:0 0 auto;
}

.online-ava.can-jump{ cursor:pointer; }
.online-ava.no-jump{ cursor: default; }

.online-ava-img{
  width:28px;
  height:28px;
}

.online-ava.offline .online-ava-img{
  filter: grayscale(1);
  opacity:.72;
}

/* Hover username bubble */
.online-tooltip{
  position:absolute;
  z-index:2147483000;
  left:50%;
  top:100%;
  bottom:auto;
  transform: translate(-50%, 6px) scale(.98);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(12,16,24,.96), rgba(6,10,18,.92));
  border:1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.96);
  font-size:12px;
  font-weight:900;
  box-shadow: 0 18px 42px rgba(0,0,0,.68);
  transition: opacity .14s ease, transform .14s ease;
}

.online-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:10px;
  height:10px;
  background: linear-gradient(180deg, rgba(12,16,24,.56), rgba(6,10,18,.46));
  border-left:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  transform: translate(-50%, -50%) rotate(45deg);
}

.online-ava:hover .online-tooltip{
  opacity:1;
  transform: translate(-50%, 12px) scale(1);
}

/* Typing dots overlay */
.online-typing{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  border-radius:50%;
  background: rgba(12,14,18,.70);
  backdrop-filter: blur(6px);
  transition: opacity .12s ease;
}

.online-ava.typing .online-typing{opacity:1}
.online-ava.typing .online-ava-img img{opacity:0}

.online-typing .dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background: rgba(255,255,255,.88);
  margin:0 2px;
  animation: onlineDot 1s infinite ease-in-out;
}

.online-typing .dot:nth-child(2){animation-delay:.15s}
.online-typing .dot:nth-child(3){animation-delay:.3s}

@keyframes onlineDot{
  0%,80%,100%{transform: translateY(0); opacity:.55}
  40%{transform: translateY(-4px); opacity:1}
}

.me-pill{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:10px 12px;
  border-radius: 999px;
}

.me-pill-dock{
  padding:6px 8px;
  gap:8px;
}
.me-pill-dock .mini-avatar{ width:24px; height:24px; }
.me-pill-dock .me-name{ font-size:11px; }

.mini-avatar{
  width:32px; height:32px;
  border-radius:50%;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  position:relative;
}
.mini-avatar img{
  position:absolute; left:50%; top:50%;
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  transform: translate(-50%,-50%) scale(1);
  transform-origin:center;
}
.me-meta{display:flex; flex-direction:column; line-height:1.05}
.me-name{font-weight:860; font-size:12px}
.me-code{ display:none; }

/* Logged-in Home dashboard (inside chat message pane when no room is open) */
.home-dash{
  width:100%;
  max-width: none;
  margin:0;
  padding:18px clamp(18px, 3vw, 42px) 34px;
  min-height:100%;
  -webkit-user-select:none;
  user-select:none;
}

.home-overhaul{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap:18px;
}

.home-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.home-stat{
  position:relative;
  overflow:hidden;
  min-height:128px;
  border:1px solid rgba(255,255,255,.12);
  background:#2b2d31;
  border-radius:8px;
  padding:18px;
  box-shadow:none;
}

.home-stat-label{
  font-weight:950;
  font-size:11px;
  color:rgba(255,255,255,.58);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.home-stat-value{
  margin-top:16px;
  font-weight:980;
  font-size:clamp(38px, 5vw, 62px);
  letter-spacing:-.055em;
  line-height:.78;
}

.home-stat-note{
  margin-top:14px;
  color:rgba(255,255,255,.50);
  font-size:12px;
  font-weight:760;
}

.home-workspace{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:18px;
  align-items:start;
}

.home-primary-panel{
  border:1px solid rgba(255,255,255,.115);
  border-radius:8px;
  background:#2b2d31;
  box-shadow:none;
}

.home-primary-panel{
  min-width:0;
  padding:18px;
}

.home-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.home-section-title{
  font-size:18px;
  font-weight:960;
  letter-spacing:-.02em;
}

.home-section-sub{
  margin-top:4px;
  color:rgba(255,255,255,.52);
  font-size:13px;
  line-height:1.35;
}

.home-controls{
  display:grid;
  grid-template-columns:minmax(260px, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:#1e1f22;
}

.home-search{
  min-height:46px;
}

.home-filters{
  display:flex;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.home-filters .btn.tiny{
  border-radius:999px;
  padding:10px 13px;
}

.home-roomlist{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:12px;
}

.home-room-row{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:12px;
  min-height:0;
  border:1px solid rgba(255,255,255,.115);
  background:#313338;
  border-radius:8px;
  padding:16px;
  cursor:pointer;
  box-shadow:none;
  transition:background .14s ease, border-color .14s ease, transform .08s ease, box-shadow .14s ease;
}

.home-room-row:hover{
  background:#35373c;
  border-color:rgba(88,101,242,.55);
  box-shadow:none;
  transform:none;
}

.home-room-row:active{
  transform:translateY(0);
}

.home-room-row:focus-visible{
  outline:none;
  border-color:rgba(123,182,255,.48);
  box-shadow:0 0 0 3px rgba(123,182,255,.18), 0 24px 62px rgba(0,0,0,.30);
}

.home-room-left{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}

.home-room-left .room-avatar{
  width:48px;
  height:48px;
}

.home-room-main{
  min-width:0;
  width:100%;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}

.home-room-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.home-room-code-row{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.home-room-code{
  min-width:0;
  font-weight:970;
  font-size:18px;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.08;
  letter-spacing:-.02em;
}

.home-room-markers{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.room-pin-mark,
.room-lock-mark{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.95);
  flex:0 0 auto;
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
  line-height:0;
}

.room-pin-mark svg,
.room-lock-mark svg{
  width:14px;
  height:14px;
  display:block;
  margin:auto;
  overflow:visible;
}

.room-unread-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  bottom:auto;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ff4d5e;
  color:#fff;
  border:2px solid rgba(10,14,26,.96);
  box-shadow:0 8px 16px rgba(0,0,0,.28);
  font-size:10px;
  font-weight:950;
  line-height:1;
  z-index:3;
}

.room-unread-badge[hidden]{
  display:none !important;
}

.home-room-preview{
  display:-webkit-box;
  width:100%;
  min-width:0;
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,.58);
  white-space:normal;
  overflow:hidden;
  -webkit-box-orient:vertical;
}

.btn.danger{
  border-color:rgba(255,100,100,.40);
  color:rgba(255,160,160,.95);
}

.btn.danger:hover{
  background:rgba(255,100,100,.08);
}

.home-empty-block{
  grid-column:1 / -1;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(0,0,0,.16);
  border-radius:24px;
  padding:26px;
}

.home-foot{
  margin-top:14px;
}

@media (max-width: 1220px){
  .home-workspace{
    grid-template-columns:1fr;
  }
}

@media (max-width: 980px){
  .home-roomlist{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 720px){
  .home-dash{
    padding:14px 12px 24px;
  }

  .home-metrics,
  .home-roomlist{
    grid-template-columns:1fr;
  }

  .home-controls{
    grid-template-columns:1fr;
  }

  .home-filters{
    justify-content:flex-start;
  }
}

.messages{
  position:relative;
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px 16px 4px;
  scroll-padding-bottom:18px;
  scroll-behavior:auto;
}

.messages-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  width:100%;
  min-height:100%;
  contain: none;
}

/* Extra-visible custom scrollbar inside message pane */
.messages{scrollbar-color: rgba(110,168,255,.35) rgba(0,0,0,.25)}
.messages::-webkit-scrollbar{width:12px}
.messages::-webkit-scrollbar-track{background:rgba(0,0,0,.28)}
.messages::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(110,168,255,.45), rgba(255,255,255,.10));
  border-radius:999px;
  border:2px solid rgba(0,0,0,.40);
}
.messages::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(110,168,255,.60), rgba(255,255,255,.16));
}


/* Reusable chat-style scrollbar (same look as message pane) */
.scrollbar-chatlike{scrollbar-color: rgba(110,168,255,.35) rgba(0,0,0,.25)}
.scrollbar-chatlike::-webkit-scrollbar{width:12px;height:12px}
.scrollbar-chatlike::-webkit-scrollbar-track{background:rgba(0,0,0,.28)}
.scrollbar-chatlike::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(110,168,255,.45), rgba(255,255,255,.10));
  border-radius:999px;
  border:2px solid rgba(0,0,0,.40);
}
.scrollbar-chatlike::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(110,168,255,.60), rgba(255,255,255,.16));
}

.room-loading-state{
  align-self:stretch;
  position:sticky;
  top:0;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px 8px;
  pointer-events:none;
  user-select:none;
}

.room-loading-card{
  width:min(760px, 100%);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(320px 120px at 20% 0%, rgba(123,182,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(10,14,28,.92), rgba(8,11,22,.78));
  border-radius:18px;
  padding:12px 14px;
  box-shadow:0 18px 48px rgba(0,0,0,.30);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.room-loading-kicker{
  color:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.room-loading-title{
  margin-top:4px;
  font-size:16px;
  font-weight:950;
  letter-spacing:.2px;
  overflow-wrap:anywhere;
}

.room-loading-progress-row{
  margin-top:10px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.room-loading-percent{
  font-variant-numeric:tabular-nums;
  font-size:24px;
  font-weight:950;
  letter-spacing:.2px;
}

.room-loading-detail{
  color:var(--muted);
  font-size:12px;
  text-align:right;
}

.room-loading-track{
  margin-top:9px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  overflow:hidden;
}

.room-loading-bar{
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(123,182,255,.78), rgba(106,125,255,.82));
  transition:width .08s linear;
}

.msg-row{
  display:flex;
  margin:0;
  padding:0;
  align-items:flex-start;
  justify-content:flex-start;
  align-self:stretch;
  width:100%;
  max-width:100%;
  min-width:0;

  /* Paint message rows normally so attachment-heavy messages don't stay blank or glitch while scrolling. */
  content-visibility: visible;
  contain-intrinsic-size: none;
}
/* Keep your own messages on the LEFT too */
.msg-row.own{justify-content:flex-start}

/* Optimistic (sending) messages */
.msg-row.stub{ opacity:.72; }
.msg-row.stub .bubble{ border-style:dashed; }
.msg-row.stub .bubble-time{ color: rgba(255,255,255,.60); }

.msg-avatar{
  width:36px; height:36px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), rgba(255,255,255,0) 58%),
    rgba(255,255,255,.035);
  position:relative;
  flex: 0 0 auto;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  -webkit-user-select:none;
  user-select:none;
}
.msg-avatar img{
  position:absolute; left:50%; top:50%;
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  transform: translate(-50%,-50%) scale(1);
  transform-origin:center;
}

.bubble{
  display:inline-flex;
  flex-direction:column;
  gap:8px;
  align-self:flex-start;
  max-width:calc(100% - 52px);
  min-width:0;
  width:fit-content;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04)),
    rgba(8,12,22,.72);
  border-radius: 20px;
  padding:10px 12px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 34px rgba(0,0,0,.20);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  -webkit-user-select:none;
  user-select:none;
}
.bubble:has(.att-gallery){ display:inline-flex; }
.bubble.has-attachments{
  width:auto;
  max-width:min(calc(100% - 52px), 520px);
}

.msg-row.own .bubble{
  border-color: rgba(123,182,255,.22);
  background:
    linear-gradient(180deg, rgba(123,182,255,.16), rgba(255,255,255,.035)),
    rgba(10,15,30,.78);
}

.bubble-top{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0;
  flex-wrap:nowrap;
  width:auto;
  max-width:100%;
  min-width:0;
  line-height:1;
  -webkit-user-select:none;
  user-select:none;
}
.bubble-name{
  flex:0 1 auto;
  min-width:0;
  font-weight:900;
  font-size:13px;
  line-height:1.1;
  color: rgba(255,255,255,.96);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-user-select:none;
  user-select:none;
}
.bubble-time{
  position:relative;
  flex:0 0 auto;
  margin-left:4px;
  padding-left:0;
  margin-right:0;
  font-size:11px;
  color:rgba(255,255,255,.50);
  line-height:1;
  white-space:nowrap;
  letter-spacing:.01em;
  -webkit-user-select:none;
  user-select:none;
}

.bubble-time[data-tooltip]::before,
.bubble-time[data-tooltip]::after{
  content:none;
  display:none;
}

.timestamp-tooltip{
  position:fixed;
  z-index:100260;
  left:0;
  top:0;
  width:max-content;
  max-width:calc(100vw - 16px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
  padding:6px 9px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(12,16,24,.72), rgba(6,10,18,.62));
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.94);
  font-size:10px;
  font-weight:900;
  line-height:1;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity:0;
  transform: translateY(2px) scale(.98);
  transition: opacity .12s ease, transform .12s ease;
}

.timestamp-tooltip.visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

.bubble-time[data-tooltip]:focus-visible{
  outline:none;
}

.bubble-text{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
  font-size:14px;
  color: rgba(255,255,255,.94);
  -webkit-user-select:text;
  user-select:text;
}
.mention-link{
  appearance:none;
  border:0;
  background:transparent;
  color:color-mix(in oklab, var(--primary) 78%, white 22%);
  padding:0;
  margin:0;
  font:inherit;
  font-weight:850;
  cursor:text;
  text-decoration:none;
}
.mention-link:hover{color:color-mix(in oklab, var(--primary) 78%, white 22%);text-decoration:none}
.mention-broadcast{
  display:inline;
  padding:1px 3px;
  border-radius:4px;
  background:color-mix(in oklab, var(--primary) 24%, transparent 76%);
  color:color-mix(in oklab, var(--primary) 62%, white 38%);
  font-weight:700;
  cursor:text;
}

/* Unified attachments gallery */
.att-gallery{
  display:grid;
  gap:8px;
  margin-top:0;
  width:100%;
  max-width:100%;
  align-items:stretch;
  grid-auto-flow:row;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.att-gallery[data-count="1"]{
  width:100%;
  grid-template-columns:minmax(0, 1fr);
}

.att-item{
  position:relative;
  display:flex;
  min-width:0;
  min-height:0;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  align-self:stretch;
  grid-row-end:auto !important;
}

.att-item[data-kind="image"],
.att-item[data-kind="gif"]{
  aspect-ratio: 1 / 1;
}

.att-item[data-kind="video"]{
  aspect-ratio: 16 / 9;
}

.att-item[data-kind="audio"],
.att-item[data-kind="html"],
.att-item[data-kind="code"]{
  aspect-ratio:auto;
  min-height:72px;
}

.att-media{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background: rgba(0,0,0,.30);
  cursor:pointer;
}

.att-media-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(220px 140px at 20% 10%, rgba(123,182,255,.16), transparent 60%),
    rgba(0,0,0,.24);
}

.att-media-card-art{
  flex:1;
  min-height:140px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.01)),
    radial-gradient(160px 110px at 50% 35%, rgba(123,182,255,.18), transparent 70%);
}

.att-media-card-meta{
  padding:12px;
}

.att-media-card-title{
  font-weight:900;
  letter-spacing:.2px;
}

.att-media-card-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.att-video-card{
  appearance:none;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.att-video-thumb{
  position:relative;
  aspect-ratio:16 / 9;
  background:#000;
  overflow:hidden;
}

.att-video-poster{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.att-video-fallback{
  width:100%;
  height:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    radial-gradient(240px 160px at 50% 30%, rgba(123,182,255,.18), transparent 70%),
    rgba(0,0,0,.40);
}

.att-video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(0,0,0,.58);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  pointer-events:none;
}

.att-video-meta{
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.att-video-name{
  font-weight:900;
  letter-spacing:.2px;
}

.att-video-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.att-file{
  appearance:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  width:100%;
  height:100%;
  min-height:100%;
  text-align:left;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  padding:12px 12px;
  cursor:pointer;
}
.att-file:hover{ background: rgba(255,255,255,.03); }
.att-file:disabled,
.att-video-card:disabled{
  cursor:default;
}
.att-file-name{ font-weight:900; letter-spacing:.2px; }
.att-file-sub{ margin-top:4px; font-size:12px; color: var(--muted); }

.icon-btn.att-dl{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  width:40px;
  height:40px;
  padding:0;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#dce6f0;
  background:#202a35;
  border:1px solid rgba(145,171,201,.16);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:none;
  transition:none;
}
.icon-btn.att-dl:hover{
  color:#f1f6fb;
  background:#293643;
  border-color:rgba(92,151,218,.36);
  transform:none;
}
.icon-btn.att-dl:active{ transform:none; }
.icon-btn.att-dl svg{ transform: none; }

.att-item:hover .icon-btn.att-dl{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body:has(.msg-menu.open) .icon-btn.att-dl,
body:has(.user-profile-popover.is-open) .icon-btn.att-dl,
body:has(.modal:not([hidden])) .icon-btn.att-dl{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.att-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.34);
  color:#fff;
  font-size: clamp(24px, 4vw, 38px);
  font-weight:900;
  letter-spacing:.3px;
  text-align:center;
  z-index:4;
  pointer-events:none;
  user-select:none;
  backdrop-filter: blur(1px);
}

.slide-upload-shell{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(180px 120px at 30% 20%, rgba(255,255,255,.16), transparent 64%),
    rgba(0,0,0,.28);
}

.slide-upload-progress{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:9;
  border-radius:inherit;
  background:rgba(0,0,0,.42);
  color:#fff;
  font-size: clamp(22px, 4vw, 38px);
  font-weight:950;
  letter-spacing:.3px;
  text-align:center;
  pointer-events:none;
  user-select:none;
  backdrop-filter: blur(1px);
}

.att-item[data-loading="1"] .att-media,
.att-item[data-loading="1"] .att-file,
.att-item[data-loading="1"] .att-video-card,
.att-item[data-loading="1"] .att-media-card,
.att-item[data-loading="1"] .chat-audio{
  filter: brightness(.56) saturate(.8);
}

.att-item[data-loading="1"] .att-dl{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Blurred video preview (click to watch -> opens modal custom player) */

/* -------------------- Message menu + replies -------------------- */
.msg-menu{
  position:fixed;
  z-index:100220;
  display:flex;
  flex-direction:column;
  gap:4px;
  width:max-content;
  min-width:154px;
  max-width:min(260px, calc(100vw - 20px));
  max-height:calc(100dvh - 20px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(120px 90px at 18% 0%, rgba(255,255,255,.10), transparent 58%),
    linear-gradient(145deg, rgba(17,22,36,.92), rgba(7,10,20,.86) 56%, rgba(13,17,29,.94));
  box-shadow:
    0 18px 46px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  transform-origin:top left;
  opacity:0;
  transform:translateY(8px) scale(.965);
}
.msg-menu,
.msg-menu *{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}
.msg-menu.open{ animation:msgMenuIn .14s cubic-bezier(.16,.9,.22,1) forwards; }
.msg-menu.closing{ animation:msgMenuOut .14s cubic-bezier(.16,.9,.22,1) forwards; }
@keyframes msgMenuIn{
  from{ opacity:0; transform:translateY(8px) scale(.965); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes msgMenuOut{
  from{ opacity:1; transform:translateY(0) scale(1); }
  to{ opacity:0; transform:translateY(8px) scale(.965); }
}
.msg-menu-user{
  min-width:0;
  max-width:220px;
  padding:5px 9px 4px;
  color:rgba(255,255,255,.56);
  font-size:11px;
  font-weight:850;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}
.msg-menu-btn{
  width:100%;
  min-height:36px;
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  white-space:nowrap;
  padding:7px 9px;
  border-radius:11px;
  cursor:pointer;
  font-weight:820;
  font-size:12.5px;
  letter-spacing:.05px;
  display:grid;
  grid-template-columns:20px minmax(0, 1fr);
  align-items:center;
  gap:8px;
  box-shadow:none;
  transform:translateZ(0);
  transition:
    background .18s ease,
    color .18s ease,
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease;
}
.msg-menu-btn:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(0,0,0,.20);
}
.msg-menu-btn:active{ transform:translateY(0) scale(.992); }
.msg-menu-btn:focus-visible{
  outline:none;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}
.msg-menu-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  color:#fff;
  opacity:.96;
}
.msg-menu-icon svg{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
}
.msg-menu-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
}
.msg-text-menu{
  min-width:180px;
  max-width:min(420px, calc(100vw - 20px));
}
.msg-text-menu-definition{
  width:min(380px, calc(100vw - 36px));
  max-height:min(52dvh, 420px);
  overflow:auto;
  margin-top:4px;
  padding:10px 11px;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}
.msg-text-menu-definition,
.msg-text-menu-definition *{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
.msg-text-menu-definition-title{
  font-size:12px;
  font-weight:900;
  margin-bottom:8px;
  color:rgba(255,255,255,.96);
}
.msg-text-menu-definition-row{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:8px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.msg-text-menu-definition-row:first-of-type{
  border-top:0;
  padding-top:0;
}
.msg-text-menu-definition-num{
  color:rgba(255,255,255,.48);
  font-size:12px;
  font-weight:900;
}
.msg-text-menu-definition-copy{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  color:rgba(255,255,255,.90);
  font-size:12px;
  line-height:1.38;
}
.msg-text-menu-part{
  display:inline-block;
  margin-bottom:3px;
  color:color-mix(in oklab, var(--primary) 65%, white 35%);
  font-weight:900;
}
.msg-text-menu-example{
  margin-top:4px;
  color:rgba(255,255,255,.62);
  font-style:italic;
}

/* Overlays inside chat (reply + ping + files) */
.chat-overlays{
  position:absolute;
  left:50%;
  right:auto;
  bottom: calc(var(--composer-h, 0px) + clamp(7px, 1dvh, 12px));
  width:min(1120px, calc(100% - clamp(18px, 4vw, 42px)));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:min(58dvh, 520px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:2px 3px;
  pointer-events:none;
  z-index:40;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}
.chat-overlays > *{ pointer-events:auto; }
.chat-overlays,
.chat-overlays *{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}

.overlay-box,
.reply-bar,
.files-bar{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:
    radial-gradient(360px 110px at 0% 0%, rgba(123,182,255,.14), transparent 58%),
    linear-gradient(180deg, rgba(13,18,32,.90), rgba(8,11,19,.82));
  box-shadow:
    0 12px 34px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(18px) saturate(128%);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
}
.overlay-box::before,
.reply-bar::before,
.files-bar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.08), transparent 34%, rgba(255,255,255,.045));
  opacity:.75;
}
.overlay-box-kicker{
  color:rgba(255,255,255,.48);
  font-size:10px;
  font-weight:950;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
}
.overlay-box-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.overlay-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.overlay-status-pill{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  max-width:170px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  padding:4px 8px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.66);
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.reply-bar{
  display:grid;
  grid-template-columns:4px minmax(0, 1fr) auto;
  align-items:stretch;
  gap:10px;
  min-height:62px;
  padding:9px 10px;
  opacity:0;
  transform:translateY(8px) scale(.99);
  pointer-events:none;
}
.reply-bar.open{ animation: replyBarIn .18s cubic-bezier(.2,.8,.2,1) forwards; pointer-events:auto; }
.reply-bar.closing{ animation: replyBarOut .14s ease forwards; pointer-events:none; }

@keyframes replyBarIn{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes replyBarOut{
  from{ opacity:1; transform:translateY(0) scale(1); }
  to{ opacity:0; transform:translateY(10px) scale(.985); }
}
.overlay-box-accent{
  position:relative;
  z-index:1;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(123,182,255,.95), rgba(106,125,255,.78));
  box-shadow:0 0 18px rgba(123,182,255,.24);
}
.reply-card-main{
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.reply-target-row{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.reply-target-avatar{
  width:34px;
  height:34px;
  flex:0 0 34px;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.reply-target-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.reply-target-name,
.reply-bar-text{
  min-width:0;
  color:rgba(255,255,255,.95);
  font-size:14px;
  font-weight:950;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.reply-bar-username{
  margin-left:6px;
  color:rgba(255,255,255,.48);
  font-size:12px;
  font-weight:760;
  letter-spacing:.01em;
}
.reply-target-message{
  min-width:0;
  display:-webkit-box;
  -webkit-line-clamp:1;
  line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.reply-bar-close,
.file-remove,
.overlay-close{
  position:relative;
  z-index:2;
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.26);
  color:rgba(255,255,255,.86);
  cursor:pointer;
  font-weight:900;
  line-height:1;
  transition:background .16s ease, border-color .16s ease, transform .08s ease;
}
.reply-bar-close:hover,
.file-remove:hover,
.overlay-close:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
}
.reply-bar-close:active,
.file-remove:active,
.overlay-close:active{ transform:translateY(1px); }

.files-bar{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  max-height:0;
  opacity:0;
  transform:translateY(8px) scale(.99);
  pointer-events:none;
}
.files-bar.open{ animation: filesBarIn .18s cubic-bezier(.2,.8,.2,1) forwards; pointer-events:auto; }
.files-bar.closing{ animation: filesBarOut .14s ease forwards; pointer-events:none; }

@keyframes filesBarIn{
  from{ max-height:0; opacity:0; transform:translateY(8px) scale(.99); }
  to{ max-height:232px; opacity:1; transform:translateY(0) scale(1); }
}
@keyframes filesBarOut{
  from{ max-height:232px; opacity:1; transform:translateY(0) scale(1); }
  to{ max-height:0; opacity:0; transform:translateY(8px) scale(.99); }
}
.files-bar-title{
  margin-top:4px;
  color:rgba(255,255,255,.94);
  font-size:15px;
  font-weight:960;
  letter-spacing:-.01em;
}
.files-list{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:6px;
  overflow:auto;
  max-height:150px;
  padding:1px 2px 1px 0;
}
.file-item{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:7px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.024)),
    rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.file-item[data-voice="1"]{
  border-color:rgba(123,182,255,.22);
  background:
    linear-gradient(180deg, rgba(123,182,255,.14), rgba(123,182,255,.045)),
    rgba(0,0,0,.20);
}
.file-item.ping-item{
  appearance:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  justify-content:flex-start;
  color:inherit;
  font:inherit;
}
.file-item.ping-item:hover,
.file-item.ping-item.is-active{
  background:
    linear-gradient(180deg, rgba(123,182,255,.16), rgba(123,182,255,.05)),
    rgba(0,0,0,.22);
  border-color:rgba(123,182,255,.30);
  box-shadow:
    inset 0 0 0 1px rgba(123,182,255,.12),
    0 12px 30px rgba(0,0,0,.18);
}
.ping-item-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
}
.ping-item-meta{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ping-item-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:850;
  font-size:13px;
  color:rgba(255,255,255,.94);
}
.ping-item-username{
  flex:0 0 auto;
  max-width:42%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
  font-weight:750;
  color:rgba(255,255,255,.52);
  white-space:nowrap;
}
.ping-bar .files-list{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  max-height:154px;
}
.ping-bar .files-list.ping-scroll{ overflow-y:auto; }
.ping-bar .file-item{ min-height:46px; }

.file-thumb{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 62%),
    rgba(255,255,255,.04);
  overflow:hidden;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:950;
  color:rgba(255,255,255,.88);
}
.file-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.file-meta{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.file-name{
  min-width:0;
  font-size:13px;
  font-weight:900;
  color:rgba(255,255,255,.91);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.file-sub{
  font-size:11px;
  font-weight:780;
  letter-spacing:.02em;
  color:rgba(255,255,255,.52);
}
.overlay-empty{
  grid-column:1 / -1;
  min-height:52px;
  display:grid;
  place-items:center;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:17px;
  background:rgba(255,255,255,.028);
  color:rgba(255,255,255,.56);
  font-size:13px;
  font-weight:760;
}

@media (max-width: 720px){
  .chat-overlays{
    width:calc(100% - 14px);
    bottom:calc(var(--composer-h, 0px) + 7px);
    max-height:58dvh;
    gap:6px;
  }
  .reply-bar{
    grid-template-columns:4px minmax(0, 1fr) auto;
    min-height:58px;
    padding:8px;
    border-radius:16px;
  }
  .reply-target-avatar{
    width:30px;
    height:30px;
    flex-basis:30px;
  }
  .files-bar{ padding:9px; border-radius:16px; gap:7px; }
  .overlay-box-head{ align-items:center; gap:8px; }
  .overlay-head-actions{ gap:6px; }
  .overlay-status-pill{ min-height:24px; padding:4px 8px; font-size:10px; }
  .files-list,
  .ping-bar .files-list{ grid-template-columns:1fr; max-height:132px; }
}

/* Compact Discord-style reply context line */
.reply-preview{
  appearance:none;
  position:relative;
  min-width:0;
  max-width:min(720px, 100%);
  height:24px;
  margin:0 0 1px;
  padding:0;
  display:flex;
  align-items:center;
  align-self:flex-start;
  gap:6px;
  overflow:visible;
  border:0;
  border-radius:5px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.reply-preview::before{
  content:"";
  position:absolute;
  left:-42px;
  top:10px;
  width:32px;
  height:13px;
  border-top:2px solid rgba(142,157,174,.42);
  border-left:2px solid rgba(142,157,174,.42);
  border-radius:9px 0 0 0;
  pointer-events:none;
}
.reply-preview:hover .reply-preview-snippet{color:var(--text)}
.reply-preview:focus-visible{
  outline:2px solid rgba(92,151,218,.62);
  outline-offset:3px;
}
.reply-preview-avatar{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:var(--surface-3);
  position:relative;
}
.reply-preview-avatar img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform: translate(-50%,-50%) scale(1);
  transform-origin:center;
}
.reply-preview-author{
  flex:0 0 auto;
  max-width:160px;
  overflow:hidden;
  color:#cbd8e7;
  font-size:12px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reply-preview-snippet{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  color:#8f9aaa;
  font-size: 12px;
  font-weight:450;
  white-space:nowrap;
  text-overflow:ellipsis;
  transition:color .12s ease;
}
.reply-preview-attachment-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  color:#b7c4d4;
}

/* Reply flash (scroll-to-replied-message): stable ring around the full bubble (no clipping) */
.reply-flash{
  position:relative;
  isolation:isolate;
}
.reply-flash::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  box-shadow:none;
  animation: replyFlashRing 650ms ease-out;
}
@keyframes replyFlashRing{
  0%{
    opacity:0;
    box-shadow:
      inset 0 0 0 0 rgba(110,168,255,0),
      inset 0 0 0 0 rgba(110,168,255,0);
  }
  35%{
    opacity:1;
    box-shadow:
      inset 0 0 0 2px rgba(110,168,255,.55),
      inset 0 0 22px rgba(110,168,255,.22);
  }
  100%{
    opacity:0;
    box-shadow:
      inset 0 0 0 0 rgba(110,168,255,0),
      inset 0 0 0 0 rgba(110,168,255,0);
  }
}

.messages.scroll-locked{
  overscroll-behavior: none;
}

.bubble .chat-audio{
  height:auto;
}

.composer{
  position:relative;
  z-index:45;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 14px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(9,11,16,.24), rgba(9,11,16,.14));
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  overflow:visible;
}
.composer.composer-previewing{ z-index:50; }
.composer-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  min-height:52px;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background: linear-gradient(180deg, rgba(46,48,54,.52), rgba(38,40,45,.42));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.16);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.composer-actions{
  display:flex;
  align-items:flex-end;
  gap:4px;
  flex:0 0 auto;
}
.composer-actions--left{ padding-right:1px; }
.composer-actions--right{ padding-left:1px; }
.composer-row{
  cursor:text;
}
.composer-row .icon-btn{
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
  border:1px solid transparent;
  border-radius:19px;
  background:transparent;
  color:rgba(255,255,255,.78);
  box-shadow:none;
  cursor:pointer;
}
.composer-row .icon-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.08);
  color:rgba(255,255,255,.96);
}
.composer-row .icon-btn:active{ transform:translateY(1px); }
.composer-input{
  flex:1 1 auto;
  min-width:0;
  min-height:38px;
  height:38px;
  max-height:min(42vh, 42dvh);
  align-self:flex-end;
  margin:0;
  padding:8px 6px;
  resize:none;
  overflow-y:hidden;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.375;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:rgba(220,221,222,.98);
  font:inherit;
  display:block;
  box-sizing:border-box;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  -webkit-appearance:none;
  appearance:none;
  -webkit-user-select:text;
  user-select:text;
  cursor:text;
}
.composer-input::placeholder{ color:rgba(185,187,190,.72); }
.composer-input:focus{
  outline:none;
  box-shadow:none;
}
.composer-row:focus-within,
.composer.composer-previewing .composer-row{
  border-color:rgba(88,101,242,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(88,101,242,.14),
    0 12px 28px rgba(0,0,0,.18);
}
.composer-input{ transition: height .14s ease; }
.composer .btn{ min-width:0; }
.typing-bar{
  position:absolute;
  left:16px;
  right:16px;
  bottom:calc(var(--composer-h, 0px) + 8px);
  min-height:16px;
  display:flex;
  align-items:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(0) scale(1);
  transform-origin:left bottom;
  transition:
    opacity .18s cubic-bezier(.2,.9,.2,1),
    filter .18s cubic-bezier(.2,.9,.2,1);
  filter: blur(5px);
  z-index:44;
  margin:0;
}

.typing-bar[hidden]{
  display:none !important;
}

.typing-bar.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter: blur(0);
}

.typing-bar.is-hiding{
  opacity:0;
  transform:translateY(0) scale(1);
  filter: blur(4px);
}

.typing-bar-text{
  position:relative;
  max-width:min(100%, 430px);
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(46,48,54,.52), rgba(38,40,45,.42));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.16);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  color:rgba(220,221,222,.98);
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.36;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  will-change:transform, opacity;
}

.typing-bar-users{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:none;
}

.typing-bar-users-inner{
  display:inline-block;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  animation: typingBarUsersSwap .2s cubic-bezier(.2,.9,.2,1);
}

.typing-bar-users strong{
  font-weight:800;
  color:#fff;
}

.typing-bar-suffix{
  flex:0 0 auto;
  display:inline-flex;
  align-items:flex-end;
  min-width:18px;
  padding-bottom:1px;
  justify-content:flex-start;
}

.typing-bar-dot{
  display:inline-block;
  opacity:.24;
  transform:translateY(0) scale(.96);
  animation: typingBarDot 1s infinite cubic-bezier(.22,.61,.36,1);
}

.typing-bar-dot:nth-child(2){ animation-delay:.12s; }
.typing-bar-dot:nth-child(3){ animation-delay:.24s; }

body[data-has-bg="1"] .typing-bar-text{
  background: linear-gradient(180deg, rgba(46,48,54,.52), rgba(38,40,45,.42));
  border-color:rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.16);
}

body[data-typing-indicator-mode="member-list"] .typing-bar{
  opacity:0;
  transform:translateY(8px) scale(.985);
  filter: blur(6px);
}

.missed-banner{
  position:sticky;
  top:0;
  z-index:8;
  margin:0 12px 10px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(150,184,255,.28);
  border-radius:14px;
  background: linear-gradient(90deg, rgba(88,101,242,.58), rgba(104,93,255,.48));
  box-shadow: 0 16px 34px rgba(18,22,44,.22);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
  will-change: opacity, transform;
  transition: opacity .16s ease, transform .16s ease;
}
.missed-banner[hidden]{
  display:none !important;
}
.missed-banner.open{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.missed-banner.closing{
  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
}
.missed-banner-main{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
}
.missed-banner-title{
  font-size:13px;
  font-weight:900;
  color:#fff;
}
.missed-banner-sub{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.86);
}
.missed-banner-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.missed-banner .btn.tiny{
  border-color: rgba(255,255,255,.22);
  background: rgba(8,12,24,.16);
  color:#fff;
  box-shadow:none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.missed-banner .btn.tiny:hover{
  background: rgba(8,12,24,.24);
  border-color: rgba(255,255,255,.32);
}
.missed-banner .reply-bar-close{
  background: rgba(8,12,24,.16);
  border-color: rgba(255,255,255,.22);
  color:#fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.missed-banner .reply-bar-close:hover{
  background: rgba(8,12,24,.24);
}
@media (max-width: 720px){
  .missed-banner{
    flex-direction:column;
    align-items:stretch;
  }
  .missed-banner-actions{
    justify-content:space-between;
  }
}

@keyframes typingBarDot{
  0%, 100%{
    opacity:.22;
    transform:translateY(0) scale(.95);
  }
  35%{
    opacity:1;
    transform:translateY(-1px) scale(1);
  }
}

@keyframes typingBarUsersSwap{
  0%{
    opacity:0;
    transform:translateY(4px) scale(.985);
    filter:blur(3px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}
#btn-send{
  width:42px;
  min-width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  background:#5865f2;
  color:#fff;
  box-shadow:0 10px 22px rgba(88,101,242,.24);
}
#btn-send:hover{
  background:#6d78f7;
  box-shadow:0 12px 26px rgba(88,101,242,.34);
}
#btn-send:disabled{
  background:rgba(88,101,242,.38);
  box-shadow:none;
}
#btn-send[data-action="cancel"]{
  background:#4f545c;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
#btn-send[data-action="cancel"]:hover{ background:#5d6269; }
#btn-send[data-action="change"]{
  background:#3ba55d;
  box-shadow:0 10px 24px rgba(59,165,93,.24);
}
#btn-send[data-action="change"]:hover{ background:#44b96a; }
#btn-send .composer-send-icon{
  width:18px;
  height:18px;
  display:block;
  line-height:0;
}
#btn-send .composer-send-icon svg{
  width:100%;
  height:100%;
  display:block;
}
#btn-send[data-action="send"] .composer-send-icon{
  transform:translateX(1px);
}

/* Emoji / GIF / Voice picker popovers */
.emoji-popover,
.gif-popover,
.voice-popover{
  position:absolute;
  right:12px;
  bottom: calc(100% + 10px);
  z-index:99998;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(18,18,18,.90);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
  opacity:0;
  transform:translateY(10px) scale(.985);
  transform-origin:bottom right;
  pointer-events:none;
  transition:opacity 200ms cubic-bezier(.2,.9,.2,1), transform 200ms cubic-bezier(.2,.9,.2,1);
}

.emoji-popover{
  width:min(380px, calc(100vw - 34px));
  height:410px;
}
.gif-popover{
  width:min(420px, calc(100vw - 34px));
  height:430px;
}
.voice-popover{
  width:min(480px, calc(100vw - 34px));
  min-height:286px;
}

.emoji-popover.open,
.gif-popover.open,
.voice-popover.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.emoji-popover.closing,
.gif-popover.closing,
.voice-popover.closing{
  opacity:0;
  transform:translateY(10px) scale(.985);
  pointer-events:none;
}

.emoji-popover-inner,
.gif-popover-inner,
.voice-popover-inner{
  width:100%;
  height:100%;
}

emoji-picker{
  width:100%;
  height:100%;
  --background: rgba(18,18,18,.94);
  --border-color: rgba(255,255,255,.10);
  --input-border-color: rgba(255,255,255,.14);
  --input-font-color: rgba(255,255,255,.92);
  --input-placeholder-color: rgba(255,255,255,.40);
  --outline-color: rgba(110,168,255,.28);
  --category-button-color: rgba(255,255,255,.62);
  --category-button-active-color: rgba(255,255,255,.92);
  --button-hover-background: rgba(255,255,255,.06);
}

.gif-btn-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:18px;
  padding:0 1px;
  font-weight:800;
  font-size:11px;
  line-height:1;
  letter-spacing:.04em;
  color:currentColor;
}

.voice-btn-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:17px;
}

.gif-popover-inner{
  display:flex;
  flex-direction:column;
}
.gif-head,
.voice-head{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.gif-search{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.gif-search::placeholder{ color:rgba(255,255,255,.40); }
.gif-search:focus{ border-color:rgba(110,168,255,.6); box-shadow:0 0 0 3px rgba(110,168,255,.12); }

.gif-grid{
  flex:1;
  padding:12px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:160px;
  gap:10px;
}
@media (max-width:460px){
  .gif-grid{ grid-auto-rows:140px; }
}

.voice-popover-inner{
  display:flex;
  flex-direction:column;
}
.voice-title{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.94);
}
.voice-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px;
}
.voice-actions-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:560px){
  .voice-actions-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.voice-btn{
  appearance:none;
  width:100%;
  min-width:0;
  border:1px solid rgba(110,168,255,.24);
  background:linear-gradient(180deg, rgba(106,125,255,.92), rgba(123,182,255,.78));
  color:#fff;
  padding:14px 16px;
  border-radius:12px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 14px 26px rgba(71,88,255,.22);
}
.voice-btn.secondary{
  background:linear-gradient(180deg, rgba(82,88,148,.92), rgba(66,72,126,.88));
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
}
.voice-btn.ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.voice-btn[hidden]{ display:none !important; }

.voice-preview-label{
  font-size:14px;
  font-weight:800;
  color:rgba(255,255,255,.80);
}
.voice-preview-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  padding:14px 16px;
  border-radius:24px;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.08);
}
.voice-preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.voice-preview-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.voice-preview-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 6px rgba(255,255,255,.04);
}
.voice-popover[data-recording="1"] .voice-preview-dot{
  background:rgba(255,88,88,.98);
  box-shadow:0 0 0 6px rgba(255,88,88,.14), 0 0 18px rgba(255,88,88,.45);
  animation:voice-recording-pulse 1s ease-in-out infinite;
}
.voice-popover[data-paused="1"] .voice-preview-dot{
  animation:none;
  background:rgba(255,197,92,.95);
  box-shadow:0 0 0 6px rgba(255,197,92,.12);
}
@keyframes voice-recording-pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}
.voice-preview-time{
  font-variant-numeric:tabular-nums;
  font-size:22px;
  color:rgba(255,255,255,.88);
}
.voice-preview-status{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:.08em;
  color:rgba(255,255,255,.78);
  text-align:right;
}
.voice-preview-audio{
  width:100%;
}
.voice-preview-audio[hidden]{
  display:none;
}
.voice-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.62);
  font-size:13px;
}

.gif-tile{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  height:100%;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.gif-tile:hover{background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18)}
.gif-tile:active{transform: translateY(1px)}
.gif-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gif-empty{
  grid-column: 1 / -1;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  padding: 10px 4px;
}

.slideshow-composer-top{
  display:flex;
  gap:8px;
  align-items:center;
  overflow-x:auto;
  padding:2px 6px 4px;
  min-height:44px;
  scrollbar-width: thin;
}
.slideshow-composer-top .btn{
  flex:0 0 auto;
  min-height:34px;
  border-radius:14px;
  padding:8px 11px;
  white-space:nowrap;
}
.slideshow-composer-group{
  display:flex;
  align-items:center;
  gap:8px;
  padding-right:8px;
  margin-right:2px;
  border-right:1px solid rgba(255,255,255,.10);
}
.slideshow-composer-group:last-child{
  border-right:none;
  padding-right:0;
  margin-right:0;
}

body.slideshow-full .composer{
  padding-top: 10px;
  border-top:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(420px 140px at 22% 0%, rgba(123,182,255,.10), rgba(255,255,255,0) 70%),
    rgba(7,9,20,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sidebar,
.members-sidebar{
  padding:16px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}

.sidebar:not(.members-sidebar){
  border-left:1px solid var(--stroke);
}

.members-sidebar{
  width:292px;
  flex:0 0 292px;
  border-right:1px solid var(--stroke);
}

body[data-sidebar-position="left"] .sidebar:not(.members-sidebar){
  border-right:1px solid var(--stroke);
}

body[data-sidebar-position="left"] .members-sidebar{
  border-right:none;
  border-left:1px solid var(--stroke);
}

.members-sidebar .side-scroll{
  padding-bottom:0;
}

.members-sidebar .online-pill{
  display:block;
  min-width:0;
  max-width:none;
  border:none;
  background:transparent;
  padding:0;
  overflow:visible;
}

.members-sidebar .online-label{
  display:block;
  width:100%;
  padding:0 2px 10px;
  font-size:13px;
  font-weight:850;
  letter-spacing:.2px;
  color: rgba(255,255,255,.62);
}

.members-sidebar .online-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:0;
}

.members-sidebar .online-ava{
  width:100%;
  grid-row:1;
}

.members-sidebar .online-ava.member-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-radius:14px;
}

.members-sidebar .online-ava.member-row:hover{
  background: rgba(255,255,255,.03);
}

.members-sidebar .online-ava-img{
  width:40px;
  height:40px;
}

.member-avatar-wrap{
  position:relative;
  width:40px;
  height:40px;
  flex:0 0 40px;
  overflow:visible;
}

.member-status-dot{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid rgba(10,14,24,.96);
  background:#43b581;
  z-index:3;
}

.member-status-dot[data-state="offline"]{
  background:#747f8d;
}
.member-status-dot[data-state="idle"]{
  background:rgb(255, 192, 78);
}

.member-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.member-name-row{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.member-name{
  min-width:0;
  flex:1 1 auto;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.member-activity-indicator{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  line-height:1;
}
.member-activity-icon{
  font-size:12px;
}
.member-activity-icon.slideshow-activity-icon svg{
  width:15px;
  height:15px;
}

.member-activity-indicator[hidden]{
  display:none !important;
}

.member-sub{
  font-size:12px;
  color:var(--muted);
}
.member-sub[hidden]{
  display:none !important;
}

.members-sidebar .online-tooltip{
  display:none;
}

.members-sidebar .online-typing{
  inset:0;
  border-radius:999px;
  z-index:2;
  pointer-events:none;
  transition: opacity .16s ease;
}

body[data-typing-indicator-mode="bar"] .members-sidebar .online-ava.typing .online-typing{
  opacity:0;
}

body[data-typing-indicator-mode="bar"] .members-sidebar .online-ava.typing .online-ava-img img{
  opacity:1;
}

/* Active call panel */
.call-menu{
  position:relative;
  z-index:80;
  grid-column:1;
  grid-row:1;
  min-width:0;
  padding:8px 10px 9px;
  background:#111720;
  border-bottom:1px solid rgba(135,164,197,.11);
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
body[data-members-sidebar="1"] .call-menu{grid-column:1 / 3}
body[data-sidebar-position="left"] .call-menu{grid-column:2}
body[data-sidebar-position="left"][data-members-sidebar="1"] .call-menu{grid-column:2 / 4}
.call-menu[hidden]{display:none}
.call-menu.is-open{display:block}

.call-menu-card{
  position:relative;
  width:100%;
  height:clamp(218px, 27dvh, 282px);
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  overflow:hidden;
  border:1px solid rgba(135,164,197,.13);
  border-radius:16px;
  background:
    radial-gradient(620px 220px at 50% -45%, rgba(76,139,205,.13), transparent 68%),
    #151b23;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}
.call-menu-card:has(.call-menu-list.has-shares){
  height:clamp(260px, 36dvh, 374px);
}

.call-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:8px 10px 8px 14px;
  border-bottom:1px solid rgba(135,164,197,.10);
  background:#121820;
}
.call-menu-head-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.call-menu-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:#eff5fb;
  font-size:14px;
  font-weight:700;
}
.call-menu-live-dot{
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:999px;
  background:#55b98a;
  box-shadow:0 0 0 3px rgba(85,185,138,.13);
}
.call-menu-live-dot.fair{background:#d7a85c;box-shadow:0 0 0 3px rgba(215,168,92,.13)}
.call-menu-live-dot.poor,
.call-menu-live-dot.reconnecting{background:#e16b71;box-shadow:0 0 0 3px rgba(225,107,113,.13)}
.call-menu-live-dot.idle{background:#778392;box-shadow:none}
.call-menu-room{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.call-menu-meta{
  color:#8e9aaa;
  font-size:12px;
  white-space:nowrap;
}

.call-menu-close{
  width:36px;
  height:36px;
  flex:0 0 36px;
  padding:0;
  border:0;
  border-radius:11px;
  background:#202833;
}
.call-menu-close:hover{background:#2a3542}

.call-menu-list{
  min-height:0;
  overflow:hidden;
  padding:10px 12px;
}
.call-stage{
  width:100%;
  height:100%;
  min-height:100%;
  min-width:0;
  gap:10px;
}
.call-stage-avatars{
  display:flex;
  align-items:center;
  justify-content:center;
  align-content:center;
  flex-wrap:wrap;
}
.call-stage-shares{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  grid-auto-rows:minmax(112px, 1fr);
  align-items:stretch;
  place-content:center;
}
.call-participant{
  min-width:0;
  display:grid;
  place-items:center;
  padding:8px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
}
.call-stage-avatars .call-participant{
  width:clamp(88px, 9vw, 126px);
}
.call-stage-shares .call-participant{
  background:#202832;
  border-color:rgba(135,164,197,.12);
}
.call-participant-avatar-shell{
  position:relative;
  display:grid;
  place-items:center;
}
.call-user-avatar{
  position:relative;
  width:84px;
  height:84px;
  overflow:hidden;
  border:3px solid #293340;
  border-radius:999px;
  background:#0e1319;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.call-stage-shares .call-user-avatar{width:72px;height:72px}
.call-menu-list[data-participants="1"]:not(.has-shares) .call-user-avatar{
  width:112px;
  height:112px;
}
.call-menu-list.many-participants .call-user-avatar{width:62px;height:62px}
.call-user-avatar img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center;
}
.call-user-avatar.speaking{
  border-color:#55b98a;
  box-shadow:0 0 0 4px rgba(85,185,138,.16), 0 10px 24px rgba(0,0,0,.34);
  transform:scale(1.025);
}
.call-participant-states{
  position:absolute;
  right:-8px;
  bottom:-5px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  z-index:2;
}
.call-participant-state{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  margin-left:-7px;
  border:2px solid #151b23;
  border-radius:999px;
  background:#293340;
  color:#ef8c91;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
}
.call-participant-state:first-child{margin-left:0}
.call-participant-state.sharing{color:#69c898}
.call-participant-state.reconnecting{color:#e0b36c}
.call-participant-state svg{width:14px;height:14px}
.call-share-card{
  position:relative;
  grid-column:span 2;
  min-width:0;
  min-height:112px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(135,164,197,.13);
  border-radius:13px;
  background:
    radial-gradient(260px 150px at 50% 18%, rgba(76,139,205,.13), transparent 68%),
    #202832;
  color:#eef5fb;
  cursor:pointer;
  padding:0;
  text-align:left;
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.call-share-card:hover{
  border-color:rgba(92,151,218,.48);
  transform:translateY(-1px);
}
.call-share-preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#080c10;
}
.call-share-poster{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(80,170,134,.12), transparent 38%),
    #1a212a;
}
.call-share-avatar{
  position:relative;
  width:76px;
  height:76px;
  overflow:hidden;
  border:3px solid #303b49;
  border-radius:50%;
  opacity:.64;
}
.call-share-avatar img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:translate(-50%,-50%);
}
.call-share-art{
  position:absolute;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  background:rgba(16,22,29,.88);
  color:#73c79f;
}
.call-share-art svg{width:24px;height:24px}
.call-share-copy{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  z-index:2;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 9px;
  border-radius:9px;
  background:rgba(8,12,16,.84);
  box-shadow:0 8px 22px rgba(0,0,0,.24);
  backdrop-filter:blur(10px);
}
.call-share-name{
  min-width:0;
  overflow:hidden;
  font-size:12px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.call-share-action{
  flex:0 0 auto;
  color:#8ed1b1;
  font-size:11px;
  font-weight:700;
}
.call-share-card.is-remote .call-share-action{
  padding:4px 7px;
  border-radius:999px;
  background:rgba(79,169,131,.15);
}
.call-menu-empty{
  min-height:100%;
  display:grid;
  place-items:center;
  color:#929991;
  font-size:13px;
}

.call-menu-foot{
  padding:8px 12px 9px;
  border-top:1px solid rgba(135,164,197,.10);
  background:#121820;
}
.call-menu-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.call-control{
  position:relative;
  width:48px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(135,164,197,.14);
  border-radius:14px;
  background:#222b36;
  color:#eef5fb;
  cursor:pointer;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease, transform .12s ease;
}
.call-control:hover{
  background:#2d3946;
  border-color:rgba(135,164,197,.24);
  transform:translateY(-1px);
}
.call-control:active{transform:translateY(0) scale(.97)}
.call-control:disabled{opacity:.42;cursor:not-allowed;transform:none}
.call-control.is-active{
  border-color:rgba(231,139,142,.24);
  background:#4a292b;
  color:#ffd8d8;
}
.call-control-share.is-active{
  border-color:rgba(79,169,131,.40);
  background:#244c3b;
  color:#e4f7ee;
}
.call-control.is-pending .call-control-icon{animation:callControlPulse .8s ease-in-out infinite alternate}
.call-control-leave{
  width:54px;
  background:#b83b40;
  border-color:#c84a4f;
  color:#fff;
}
.call-control-leave:hover{background:#cc4449;border-color:#d45358}
.call-control-icon{display:grid;place-items:center}
.call-control-icon svg{width:21px;height:21px;display:block}
.call-control::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  z-index:10;
  max-width:180px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:#0d1319;
  color:#f1f6fb;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,4px);
  transition:opacity .12s ease, transform .12s ease;
}
.call-control:hover::after,
.call-control:focus-visible::after{
  opacity:1;
  transform:translate(-50%,0);
}
@keyframes callControlPulse{
  from{opacity:.45;transform:rotate(-8deg)}
  to{opacity:1;transform:rotate(8deg)}
}

@media (max-width:780px){
  .call-menu-card,
  .call-menu-card:has(.call-menu-list.has-shares){
    height:clamp(250px, 42dvh, 360px);
  }
  .call-stage-shares{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (max-width:520px){
  .call-menu{padding:6px}
  .call-menu-card{border-radius:14px}
  .call-menu-list{padding:8px}
  .call-stage-shares{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .call-user-avatar{width:62px;height:62px}
  .call-menu-list[data-participants="1"]:not(.has-shares) .call-user-avatar{width:88px;height:88px}
}

/* Screen Share viewer modal */
.share-menu{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:clamp(12px, 2.6vw, 30px);
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.share-menu[hidden]{display:none}
.share-menu.is-open{
  opacity:1;
  pointer-events:auto;
}

.share-menu-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,8,12,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.share-menu-card{
  position:relative;
  z-index:1;
  width:min(1240px, calc(100vw - 28px));
  height:min(780px, calc(100dvh - 28px));
  background:#121820;
  border:1px solid rgba(135,164,197,.16);
  border-radius:18px;
  box-shadow:0 26px 80px rgba(0,0,0,.62);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform: translateY(10px) scale(.985);
  opacity:0;
  transition: transform 180ms ease, opacity 180ms ease;
}
.share-menu.is-open .share-menu-card{
  transform: translateY(0) scale(1);
  opacity:1;
}

.share-menu-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:54px;
  padding:10px 12px 10px 16px;
  border-bottom:1px solid rgba(135,164,197,.11);
  background:#161d26;
}
.share-menu-heading{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}
.share-menu-live-dot{
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:#55b98a;
  box-shadow:0 0 0 3px rgba(85,185,138,.13);
}
.share-menu-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#edf4fb;
  font-size:14px;
  font-weight:700;
}
.share-menu-close{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(135,164,197,.13);
  border-radius:12px;
  background:#222b36;
  color:#dce7f2;
  cursor:pointer;
}
.share-menu-close:hover{
  border-color:rgba(135,164,197,.24);
  background:#2b3744;
}

.share-menu-body{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  margin:12px;
  border:1px solid rgba(135,164,197,.10);
  border-radius:14px;
  background:#06090c;
}

.share-video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.share-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9ba8b8;
  font-weight:600;
  padding:18px;
  text-align:center;
  background:
    radial-gradient(480px 260px at 50% 42%, rgba(76,139,205,.13), transparent 64%),
    #070b0f;
}

.side-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-bottom:10px;
}

/* Call button states */
#btn-side-call{ color: rgba(255,255,255,.92); }
#btn-side-call.call-active{ color: rgba(58, 220, 120, .95); border-color: rgba(58, 220, 120, .35); background: rgba(58, 220, 120, .08); }
#btn-side-call.call-in{ color: rgba(58, 220, 120, .95); border-color: rgba(58, 220, 120, .45); background: rgba(58, 220, 120, .10); }

#btn-side-call .call-ico{ display:none; }
#btn-side-call[data-call-state="none"] .call-ico-default{ display:block; }
#btn-side-call[data-call-state="active"] .call-ico-default{ display:block; }
#btn-side-call[data-call-state="in"] .call-ico-in{ display:block; }

.rooms-block{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.rooms-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rooms-title{ letter-spacing:.2px}
.rooms-add{
  appearance:none;
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(123,182,255,.22), rgba(106,125,255,.10));
  color: rgba(255,255,255,.96);
  font-size:18px;
  font-weight:900;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.rooms-add:hover{
  transform: translateY(-1px);
  border-color: rgba(123,182,255,.42);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.rooms-add:active{transform: translateY(0) scale(.98)}
.rooms-add:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(123,182,255,.20);
}
.rooms-mini{
  font-size:12px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:999px;
}
.rooms-list{
  --rooms-row-h: 60px;
  max-height: calc((var(--rooms-row-h) * 4) + (8px * 3) + 20px);
  overflow:auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  contain: layout paint;
  overscroll-behavior: contain;
}
.room-row{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
  border-radius: 16px;
  padding:8px 10px;
  cursor:pointer;
  transition: background .14s ease, border-color .14s ease, transform .08s ease, box-shadow .14s ease;
  content-visibility:auto;
  contain-intrinsic-size: 60px 520px;
}
.room-row:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 32px rgba(0,0,0,.20);
}
.room-row:active{transform: translateY(1px)}
.room-row:focus-visible{
  outline:none;
  border-color: rgba(123,182,255,.34);
  box-shadow: 0 0 0 3px rgba(123,182,255,.16);
}
.room-row.active{
  border-color: rgba(123,182,255,.28);
  background: linear-gradient(180deg, rgba(123,182,255,.12), rgba(255,255,255,.025));
}
.room-left{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
}
.room-avatar{
  position:relative;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:999px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(123,182,255,.34);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.28);
}
.room-avatar-image{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  display:block;
  border-radius:999px;
  object-fit:contain;
  object-position:center;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transform-origin:center;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  z-index:1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  image-rendering:auto;
}
.room-content{
  min-width:0;
  flex:1;
  overflow:hidden;
}
.room-name-row{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.room-name{
  min-width:0;
  font-weight:900;
  font-size:13px;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.18;
}
.room-markers{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex:0 0 auto;
}
.room-meta{
  margin-top:1px;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.room-preview{
  display:block;
  width:100%;
  min-width:0;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.room-modal-switch{
  display:flex;
  gap:8px;
  width:100%;
}
.room-mode-btn{
  appearance:none;
  flex:1;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.82);
  border-radius:12px;
  padding:9px 12px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.15px;
  cursor:pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.room-mode-btn:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
.room-mode-btn:active{transform: scale(.99)}
.room-mode-btn.is-active{
  border-color: rgba(123,182,255,.42);
  background: linear-gradient(180deg, rgba(123,182,255,.22), rgba(106,125,255,.12));
  color: rgba(255,255,255,.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.18);
}
.room-create-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Clock block */
.clock-body{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  container-type: inline-size;
}
.clock-time{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  padding:2px 0;
  font-size: clamp(22px, 15cqw, 52px);
  line-height:1;
  font-weight:950;
  letter-spacing:.2px;
  font-variant-numeric: tabular-nums;
}

/* Revamped full sidebar */
.sidebar:not(.members-sidebar){
  width:272px;
  padding:0;
  border-left:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(520px 280px at 50% 0%, rgba(123,182,255,.08), transparent 65%),
    linear-gradient(180deg, rgba(15,19,35,.78), rgba(6,8,18,.92));
}

body[data-sidebar-position="left"] .sidebar:not(.members-sidebar){
  border-left:none;
  border-right:1px solid rgba(255,255,255,.08);
}

.sidebar:not(.members-sidebar) .side-scroll{
  height:100%;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scroll-padding:14px;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:0 0 auto;
}

.side-btn,
.side-menu-btn,
.sidebar .icon-btn.side-menu-btn,
.sidebar .rooms-add{
  appearance:none;
  width:100%;
  min-height:50px;
  height:auto;
  border:0;
  border-radius:15px;
  background:transparent;
  color:rgba(255,255,255,.92);
  display:grid;
  grid-template-columns:34px minmax(0, 1fr);
  align-items:center;
  justify-items:stretch;
  column-gap:11px;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  user-select:none;
  box-shadow:none;
  transform:translateZ(0);
  transition:
    background .18s ease,
    color .18s ease,
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease;
}

.side-btn:hover,
.side-menu-btn:hover,
.sidebar .icon-btn.side-menu-btn:hover,
.sidebar .rooms-add:hover,
.room-row:hover,
.me-pill-dock:hover,
.rooms-block.rooms-toggleable:hover,
.time-display-card:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(0,0,0,.20);
}

.side-btn:active,
.side-menu-btn:active,
.sidebar .icon-btn.side-menu-btn:active,
.sidebar .rooms-add:active,
.room-row:active{
  transform:translateY(0) scale(.992);
}

.side-btn:focus-visible,
.side-menu-btn:focus-visible,
.sidebar .icon-btn.side-menu-btn:focus-visible,
.sidebar .rooms-add:focus-visible{
  outline:none;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}

.side-btn.is-selected,
.side-menu-btn.is-selected{
  background:rgba(255,255,255,.13);
  color:#fff;
}

.side-ico{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:#fff;
  justify-self:center;
  align-self:center;
}

.side-ico svg{
  width:24px;
  height:24px;
  display:block;
  stroke:currentColor;
}

.side-label,
#call-label{
  min-width:0;
  justify-self:start;
  text-align:left;
  color:inherit;
  font-size:15px;
  font-weight:850;
  line-height:1.22;
  letter-spacing:.05px;
  white-space:normal;
  overflow-wrap:anywhere;
}

.side-section{
  flex:0 0 auto;
}

.rooms-block{
  margin-top:0;
  border:0;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
  transition:
    background .18s ease,
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease;
}

.rooms-head{
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.rooms-title{
  font-size:15px;
  font-weight:950;
  letter-spacing:.1px;
}

.rooms-block.rooms-toggleable .rooms-head{
  cursor:pointer;
}

.rooms-block.rooms-toggleable .rooms-title::after{
  content:"";
  width:6px;
  height:6px;
  display:inline-block;
  margin-left:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.72;
}

.rooms-block:not(.rooms-toggleable) .rooms-head{
  cursor:default;
}

.rooms-mini{
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.07);
  border:0;
  padding:4px 9px;
}

.rooms-list{
  --rooms-row-h:68px;
  max-height:none;
  overflow:visible;
  padding:8px;
  gap:6px;
}

.room-row{
  border:0;
  background:transparent;
  border-radius:15px;
  padding:9px 10px;
  min-height:var(--rooms-row-h);
  transition:
    background .18s ease,
    color .18s ease,
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease;
}

.room-row.active{
  border-color:transparent;
  background:rgba(123,182,255,.14);
}

.room-avatar{
  width:44px;
  height:44px;
  flex-basis:44px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}

.room-name{
  font-size:14px;
}

.room-preview{
  font-size:12px;
  color:rgba(255,255,255,.58);
}

.time-display-card{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  padding:0;
  border:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.time-display-card:focus-visible{
  outline:none;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}

.clock-body{
  padding:8px 10px 10px;
  gap:6px;
}

.clock-time{
  justify-content:flex-start;
  text-align:left;
  font-size:clamp(30px, 14cqw, 50px);
  line-height:.98;
}

.time-display-modal-ui{
  display:grid;
  gap:14px;
}
.time-display-modal-clock{
  display:grid;
  place-items:center;
  text-align:center;
  padding:26px 18px 24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:
    radial-gradient(420px 180px at 50% 0%, rgba(123,182,255,.18), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}
.time-display-modal-label{
  color:var(--muted2);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.time-display-modal-time{
  margin-top:12px;
  font-size:clamp(72px, 16vw, 132px);
  font-weight:950;
  letter-spacing:-3px;
  line-height:.88;
}
.time-display-modal-class{
  margin-top:12px;
  color:rgba(255,255,255,.78);
  font-size:15px;
  font-weight:800;
}
.time-display-modal-timer{
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:rgba(255,255,255,.035);
}
.time-display-modal-timer-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
}
.time-display-modal-timer-metrics{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}
.time-display-modal-timer-remaining{
  font-variant-numeric:tabular-nums;
  font-size:clamp(28px, 7vw, 48px);
  font-weight:950;
  line-height:1;
  text-align:left;
}
.time-display-modal-timer-percent{
  font-variant-numeric:tabular-nums;
  font-size:15px;
  font-weight:900;
  color:rgba(255,255,255,.70);
  text-align:left;
}
.time-display-modal-timer-remaining[hidden],
.time-display-modal-timer-percent[hidden]{
  display:none !important;
}
.time-display-modal-progress{
  height:10px;
  margin-top:15px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.time-display-modal-progress-bar{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--primary), var(--primary2));
  transition:width .12s linear;
}
.time-display-modal-timer-detail{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}
@media (max-width: 560px){
  .time-display-modal-timer-head{
    flex-direction:column;
  }
  .time-display-modal-timer-metrics,
  .time-display-modal-timer-remaining,
  .time-display-modal-timer-percent{
    text-align:left;
  }
}

.me-pill-dock{
  width:100%;
  margin-top:2px;
  border:0;
  border-radius:17px;
  background:rgba(255,255,255,.035);
  padding:10px 12px;
  display:grid;
  grid-template-columns:38px minmax(0, 1fr);
  align-items:center;
  gap:11px;
  transition:
    background .18s ease,
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease;
}

.me-pill-dock .mini-avatar{
  width:38px;
  height:38px;
}

.me-pill-dock .me-name{
  font-size:16px;
  font-weight:950;
  line-height:1.02;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.me-pill-dock .me-code{
  display:block;
  margin-top:3px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.58);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#btn-side-call.call-active,
#btn-side-call.call-in{
  background:rgba(58,220,120,.12);
  color:#fff;
}

.html-side-glyph{
  color:#fff;
  font-weight:950;
}

@media (max-width: 650px){
  .sidebar:not(.members-sidebar){
    width:100%;
  }

  .sidebar:not(.members-sidebar) .side-scroll{
    padding:12px;
  }
}
/* Timer modal */
.timer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
.timer-field{display:flex; flex-direction:column; gap:6px; min-width:0}
.timer-label{font-size:12px; color:var(--muted2); font-weight:800}
.timer-ampm{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.timer-ampm .btn{flex:1}
.timer-hint{margin-top:10px}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  z-index:100180;
  display:grid;
  place-items:center;
  padding:clamp(18px, 3vw, 34px);
  padding:
    max(clamp(18px, 3vw, 34px), env(safe-area-inset-top))
    max(clamp(18px, 3vw, 34px), env(safe-area-inset-right))
    max(clamp(18px, 3vw, 34px), env(safe-area-inset-bottom))
    max(clamp(18px, 3vw, 34px), env(safe-area-inset-left));
  overflow:hidden;
  overscroll-behavior:contain;
  opacity:0;
  pointer-events:none;
  transition:opacity 140ms ease;
  will-change:opacity;
  contain:layout paint style;
  -webkit-user-select:none;
  user-select:none;
}

.modal input,
.modal textarea,
.modal select{
  -webkit-user-select:auto;
  user-select:auto;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 620px at 20% 8%, rgba(123,182,255,.18), transparent 58%),
    radial-gradient(760px 560px at 85% 18%, rgba(106,125,255,.16), transparent 62%),
    rgba(2,4,12,.74);
  opacity:0;
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  transition:opacity 170ms ease;
  will-change:opacity;
  transform:translateZ(0);
}

.modal-card{
  position:relative;
  z-index:1;
  width:min(1060px, 100%);
  max-width:100%;
  min-height:min(260px, calc(100dvh - 68px));
  max-height:calc(100vh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:calc(100dvh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;
  background:
    linear-gradient(145deg, rgba(17,23,38,.96), rgba(7,10,18,.94) 58%, rgba(5,7,13,.98)),
    rgba(10,14,24,.98);
  box-shadow:
    0 36px 110px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.10);
  opacity:0;
  transform:translate3d(0, 22px, 0) scale(.965);
  transition:
    transform 210ms cubic-bezier(.16, 1, .3, 1),
    opacity 150ms ease;
  will-change:transform, opacity;
  backface-visibility:hidden;
  contain:layout paint style;
}

.modal-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 34%),
    radial-gradient(720px 260px at 18% 0%, rgba(123,182,255,.18), transparent 62%);
  opacity:.72;
}

.modal-main{
  position:relative;
  z-index:1;
  min-width:0;
  min-height:0;
  max-height:inherit;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.modal-head{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:18px;
  padding:24px 24px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  transform:translateZ(0);
}

.modal-heading{
  min-width:0;
  display:grid;
  gap:7px;
}

.modal-title{
  min-width:0;
  color:rgba(255,255,255,.95);
  font-size:clamp(24px, 2.6vw, 34px);
  line-height:1.04;
  font-weight:980;
  letter-spacing:-.04em;
}

.modal-subtitle{
  max-width:64ch;
  color:rgba(255,255,255,.56);
  font-size:13px;
  line-height:1.45;
}
.modal-subtitle:empty{display:none}

.modal-close{
  appearance:none;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.88);
  background:
    radial-gradient(70px 54px at 30% 12%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow:0 16px 38px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
  cursor:pointer;
  transition:transform .12s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.modal-close:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.24);
  background:
    radial-gradient(70px 54px at 30% 12%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.052));
  box-shadow:0 20px 44px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
}
.modal-close:active{transform:translateY(0) scale(.98)}
.modal-close:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(123,182,255,.20), 0 20px 44px rgba(0,0,0,.38);
}
.modal-close svg{display:block}

.html-library-titlebar{
  width:100%;
  display:grid;
  grid-template-columns:max-content minmax(220px, 340px);
  align-items:center;
  gap:14px;
  min-width:0;
}
.html-library-title-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.html-library-search-input{
  width:100%;
  min-width:0;
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(3,7,14,.44);
  color:var(--text);
  border-radius:999px;
  padding:11px 13px;
  font:inherit;
  font-size:14px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.html-library-search-input::placeholder{color:var(--muted)}
.html-library-search-input:focus{
  border-color:rgba(123,182,255,.56);
  box-shadow:0 0 0 4px rgba(123,182,255,.16), inset 0 1px 0 rgba(255,255,255,.06);
}

.modal-body{
  flex:1 1 auto;
  min-height:0;
  padding:24px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(760px 280px at 100% 0%, rgba(255,255,255,.045), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.016), rgba(0,0,0,.07));
  scrollbar-color:rgba(123,182,255,.42) rgba(0,0,0,.24);
  scrollbar-gutter:stable;
  transform:translateZ(0);
  contain:layout paint style;
}
.modal-body::-webkit-scrollbar{width:12px}
.modal-body::-webkit-scrollbar-track{background:rgba(0,0,0,.22)}
.modal-body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(123,182,255,.52), rgba(255,255,255,.14));
  border-radius:999px;
  border:2px solid rgba(0,0,0,.34);
}
.modal-body::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(123,182,255,.68), rgba(255,255,255,.20));
}

.modal-body-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
}
.modal-body-actions .btn{min-width:128px}
.modal-actions{display:none !important}

@media (max-width: 760px){
  .modal{
    padding:10px;
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  .modal-card{
    width:100%;
    min-height:min(260px, calc(100dvh - 20px));
    max-height:calc(100dvh - 20px);
    border-radius:22px;
  }
  .modal-head{padding:18px 18px 14px; gap:12px}
  .modal-body{padding:18px}
  .modal-body-actions{margin-top:18px; padding-top:14px}
  .html-library-titlebar{grid-template-columns:minmax(0, 1fr)}
}

/* Bare media viewer mode */
.modal[data-size="media"]{
  overflow:hidden;
  overscroll-behavior:none;
  padding:0;
}
.modal[data-size="media"] .modal-backdrop{
  background:rgba(0,0,0,.92);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.modal[data-size="media"] .modal-card{
  width:100vw;
  max-width:100vw;
  height:100vh;
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  min-height:0;
  margin:0;
  border:0 !important;
  border-radius:0;
  outline:none;
  background:none !important;
  box-shadow:none !important;
  overflow:hidden;
  display:flex;
  justify-content:center;
  pointer-events:none;
  transform:translate3d(0, 0, 0) scale(.992);
}
.modal[data-size="media"] .modal-card::before{
  display:none;
}
.modal[data-size="media"] .modal-main{
  width:100%;
  height:100%;
  min-height:0;
  pointer-events:none;
}
.modal[data-size="media"] .modal-head{
  position:fixed;
  inset:0;
  z-index:2147483646;
  padding:0;
  border:0;
  background:transparent;
  pointer-events:none;
}
.modal[data-size="media"] .modal-heading{
  display:none;
}
.modal[data-size="media"] #btn-modal-close{
  position:fixed;
  top:max(12px, env(safe-area-inset-top));
  right:max(12px, env(safe-area-inset-right));
  width:48px;
  height:48px;
  border-radius:999px;
  background:rgba(20,24,34,.86);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  pointer-events:auto;
}
.modal[data-size="media"] .modal-body{
  width:100%;
  height:100%;
  padding:0;
  box-sizing:border-box;
  flex:0 0 auto;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  background:transparent;
  pointer-events:none;
  contain:strict;
}
.modal[data-size="media"] .modal-actions{
  display:none;
}
.modal[data-size="media"] .media-viewer{
  pointer-events:none;
  transform:translateZ(0);
  contain:strict;
}
.modal[data-size="media"] .media-modal-loading,
.modal[data-size="media"] .media-img,
.modal[data-size="media"] .media-zoom-shell,
.modal[data-size="media"] .media-zoom-viewport,
.modal[data-size="media"] .media-zoom-surface,
.modal[data-size="media"] .media-zoom-controls,
.modal[data-size="media"] .vpu{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.modal[data-size="media"] .media-modal-loading{
  pointer-events:none;
}
.modal[data-size="media"] .media-zoom-shell,
.modal[data-size="media"] .media-zoom-viewport,
.modal[data-size="media"] .media-zoom-controls,
.modal[data-size="media"] .media-zoom-btn,
.modal[data-size="media"] .media-zoom-readout,
.modal[data-size="media"] .vpu-stage,
.modal[data-size="media"] .vpu-controls,
.modal[data-size="media"] .vpu-pop,
.modal[data-size="media"] .vpu-btn,
.modal[data-size="media"] .vpu-seek,
.modal[data-size="media"] .vpu-volrange,
.modal[data-size="media"] .vpu-speedcustom,
.modal[data-size="media"] .vpu-rate{
  pointer-events:auto;
}
.modal[data-size="media"] .media-zoom-target{
  pointer-events:auto;
}
.modal[data-size="media"] .vpu-video{
  pointer-events:none;
}
.modal[data-size="media"] .vpu{
  pointer-events:none;
}

.modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.modal.is-open .modal-backdrop{opacity:1}
.modal.is-open .modal-card{
  opacity:1;
  transform:translate3d(0, 0, 0) scale(1);
}
.modal[data-size="media"].is-open .modal-card{
  transform:translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .modal,
  .modal-backdrop,
  .modal-card,
  .modal-close{
    transition:none !important;
  }
  .modal-card,
  .modal-close{
    transform:none !important;
    filter:none !important;
  }
}

.user-profile-popover{
  position:fixed;
  z-index:100120;
  width:min(340px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:min(680px, calc(100dvh - 24px));
  opacity:0;
  pointer-events:none;
  transform:translateY(18px) scale(.94);
  transform-origin:top center;
  filter:none;
  transition:
    transform 90ms cubic-bezier(.22, 1, .36, 1),
    opacity 90ms cubic-bezier(.22, 1, .36, 1);
  will-change:transform, opacity, filter;
}
.user-profile-popover.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  filter:none;
}
.user-profile-popover.is-closing{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.97);
  filter:none;
}
.user-profile-card{
  width:100%;
  max-height:min(680px, calc(100dvh - 24px));
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid rgba(145,171,201,.15);
  border-radius:16px;
  background:#151b23;
  box-shadow:0 24px 70px rgba(0,0,0,.58);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.user-profile-card::-webkit-scrollbar{width:10px}
.user-profile-shell{
  display:flex;
  flex-direction:column;
  min-width:0;
  color:var(--text);
  user-select:none;
  -webkit-user-select:none;
}
.user-profile-banner{
  position:relative;
  height:120px;
  overflow:hidden;
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(76,139,205,.28), transparent 58%),
    radial-gradient(360px 180px at 85% 8%, rgba(79,169,131,.16), transparent 58%),
    #202a35;
}
.user-profile-banner-img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.user-profile-banner-fallback{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%) scale(1);
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(76,139,205,.28), transparent 58%),
    radial-gradient(360px 180px at 85% 8%, rgba(79,169,131,.16), transparent 58%),
    #202a35;
}
.user-profile-more{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(0,0,0,.38);
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.user-profile-more:hover{ background:rgba(0,0,0,.5); }
.user-profile-body{
  position:relative;
  padding:0 16px 16px;
  color:inherit;
  user-select:none;
  -webkit-user-select:none;
}
.user-profile-avatar-wrap{
  margin-top:-46px;
  margin-bottom:10px;
}
.user-profile-avatar{
  width:92px;
  height:92px;
  border-radius:50%;
  overflow:hidden;
  border:5px solid #151b23;
  background:#10161d;
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.user-profile-avatar img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.user-profile-names{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.user-profile-display{
  font-size:24px;
  font-weight:750;
  letter-spacing:-.015em;
  line-height:1.1;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.user-profile-username{
  font-size:14px;
  color:var(--muted);
  font-weight:550;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.user-profile-activity{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:#62c091;
  font-size:13px;
  font-weight:650;
}
.user-profile-activity[data-activity-kinds="slideshow"]{
  color:#58a6ff;
}
.user-profile-activity .html-activity-icon,
.user-profile-activity .slideshow-activity-icon{
  margin-right:-2px;
}
.user-profile-activity-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.html-activity-icon,
.slideshow-activity-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:-.35px;
  line-height:1;
}
.html-activity-icon{
  color:#62c091;
}
.slideshow-activity-icon{
  color:#58a6ff;
}
.slideshow-activity-icon svg{
  width:16px;
  height:16px;
  display:block;
}
.user-profile-bio{
  margin-top:14px;
  border:1px solid rgba(145,171,201,.10);
  background:#19212b;
  border-radius:11px;
  padding:12px 13px;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.42;
  color:#dce6f0;
}
.settings-profile-preview{
  display:block;
  width:min(340px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  padding:0;
  border:0;
  outline:none;
  appearance:none;
  background:transparent;
  color:var(--text);
  cursor:default;
  text-align:left;
}
.settings-profile-preview .user-profile-card{
  width:100%;
  overflow:hidden;
  pointer-events:auto;
}
.settings-bio-input{
  resize:vertical;
  min-height:92px;
}
.settings-banner-editor{
  margin-top:8px;
  max-width:calc(100vw - 24px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px 18px 0 0;
  box-shadow:0 18px 48px rgba(0,0,0,.26);
}
.msg-avatar,
.sched-avatar,
.reply-preview-avatar,
.slideshow-loc-ava,
.tip-ava,
.online-ava-img{
  cursor:pointer;
}
.msg-avatar,
.sched-avatar,
.reply-preview-avatar,
.slideshow-loc-ava,
.tip-ava,
.online-ava-img{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}
.msg-avatar:hover,
.sched-avatar:hover,
.reply-preview-avatar:hover,
.slideshow-loc-ava:hover,
.tip-ava:hover,
.online-ava-img:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(123,182,255,.30), 0 10px 24px rgba(0,0,0,.24);
  filter:brightness(1.04);
}
.msg-avatar:active,
.sched-avatar:active,
.reply-preview-avatar:active,
.slideshow-loc-ava:active,
.tip-ava:active,
.online-ava-img:active{
  transform:translateY(0) scale(.985);
}
@media (prefers-reduced-motion: reduce){
  .user-profile-popover{
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
}

/* Admin Panel (Vinny only) */
.panel-rooms{
  display:block;
}

.panel-room-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}

.panel-room{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:18px;
  padding:18px;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(260px 150px at 0% 0%, rgba(123,182,255,.13), transparent 64%),
    radial-gradient(220px 140px at 100% 0%, rgba(106,125,255,.09), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
  border-radius:22px;
  box-shadow:0 18px 52px rgba(0,0,0,.24);
}

.panel-room::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.10), transparent 34%, rgba(255,255,255,.035));
  opacity:.65;
}

.panel-room.ghost-active{
  border-color:rgba(123,182,255,.32);
  box-shadow:0 20px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(123,182,255,.10) inset;
}

.panel-room-card-main{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.panel-room-name{
  font-weight:950;
  font-size:22px;
  line-height:1.05;
  letter-spacing:.16px;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.panel-room-actions{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.panel-room-actions .btn.tiny{
  width:100%;
  justify-content:center;
  padding:9px 10px;
  border-radius:14px;
}

@media (max-width: 720px){
  .panel-room-grid{
    grid-template-columns:1fr;
  }
}

/* Media modal content (Discord-style viewer) */
.media-viewer{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  justify-content:center;
  contain:content;
}
.media-viewer-video{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  min-height:0;
}
.media-modal-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:220px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.82);
  font-weight:800;
  letter-spacing:.2px;
}
.media-zoom-shell{
  position:relative;
  width:min(1200px, 100%);
  max-width:100%;
  max-height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.media-zoom-shell-image{
  height:100%;
}
.media-zoom-shell-video{
  width:100%;
  height:100%;
}
.media-zoom-controls{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(7,10,18,.72);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.media-zoom-controls-video{
  top:10px;
  right:10px;
}
.media-zoom-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.92);
  width:30px;
  height:30px;
  padding:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:15px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.media-zoom-btn[data-media-zoom="reset"]{
  width:auto;
  min-width:48px;
  padding:0 10px;
  font-size:11px;
  letter-spacing:.2px;
}
.media-zoom-btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}
.media-zoom-btn:active{
  transform:translateY(1px);
}
.media-zoom-readout{
  min-width:42px;
  text-align:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(255,255,255,.84);
}
.media-zoom-viewport{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:none;
  cursor:default;
  outline:none;
}
.media-zoom-viewport.is-zoomed{
  cursor:grab;
}
.media-zoom-viewport.is-dragging{
  cursor:grabbing;
}
.media-zoom-surface{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.media-img,
.media-zoom-target{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  transform-origin:center center;
  will-change:transform;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.media-zoom-shell-image .media-zoom-viewport{
  max-width:min(92vw, 1400px);
  max-height:min(82vh, 82dvh);
}
.media-zoom-shell-image .media-zoom-surface{
  max-width:min(92vw, 1400px);
  max-height:min(82vh, 82dvh);
}
.vpu{
  width:min(1100px, 100%);
  max-width:100%;
  max-height:100%;
}
.vpu.vpu-slideshow{
  width:min(980px, 95vw);
  max-width:95vw;
}
.vpu.vpu-chat{
  width:min(860px, 94vw);
  max-width:94vw;
}
.vpu.vpu-chat .vpu-video{
  max-height:62vh;
  max-height:62dvh;
}
@media (min-width: 850px) and (max-width: 1400px) and (max-height: 900px){
  .vpu.vpu-chat{
    width:min(740px, 90vw);
  }
  .vpu.vpu-chat .vpu-video{
    max-height:52vh;
    max-height:52dvh;
  }
  .vpu.vpu-chat .vpu-controls{
    padding:10px 10px 10px;
  }
}
.vpu-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
  padding:0;
}
.vpu-stage .media-zoom-viewport{
  width:100%;
  min-height:0;
  max-height:min(70vh, 70dvh);
}
.vpu-controls{
  z-index:2;
}
.vpu[data-loop="1"] .vpu-loop{
  border-color: color-mix(in oklab, var(--primary) 60%, rgba(255,255,255,.12) 40%);
  background: color-mix(in oklab, var(--primary) 18%, rgba(255,255,255,.03) 82%);
}
.vpu-pop{
  margin-top:10px;
  background: rgba(0,0,0,.22);
}

/* Custom Video Player UI (inline chat/slideshow) */
.vpu{
  width: min(980px, 95vw);
  max-width: 95vw;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  border-radius: 18px;
  overflow:hidden;
}
.vpu-stage{
  position:relative;
  background:#000;
}
.vpu-video{
  width:100%;
  height:auto;
  max-height: 70vh;
  max-height: 70dvh;
  display:block;
  object-fit:contain;
}
.vpu-controls{
  position:relative; /* anchor popup */
  padding:12px 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border-top:1px solid rgba(255,255,255,.10);
}
.vpu-row{display:flex; align-items:center; gap:10px}
.vpu-row1{gap:12px}
.vpu-time{font-size:12px; font-weight:800; color:rgba(255,255,255,.82); white-space:nowrap}
.vpu-seek{
  flex:1;
  height: 6px;
  accent-color: color-mix(in oklab, var(--primary) 80%, white 20%);
}
.vpu-row2{
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  flex-wrap:wrap;
}
.vpu-left,.vpu-mid,.vpu-right{display:flex; align-items:center; gap:8px}
.vpu-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color:rgba(255,255,255,.88);
  border-radius: 14px;
  padding:10px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, filter .15s ease;
}
.vpu-btn:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18)}
.vpu-btn:active{transform: translateY(1px)}
.vpu-volrange{
  width: min(240px, 42vw);
  height: 6px;
  accent-color: color-mix(in oklab, var(--primary) 80%, white 20%);
}
.vpu-volpct{font-size:12px; color: rgba(255,255,255,.75); min-width:44px; text-align:right}

/* Blue toggles */
.vpu[data-loop="1"] .vpu-loop,
.vpu[data-menu="1"] .vpu-menu{
  border-color: color-mix(in oklab, var(--primary) 60%, rgba(255,255,255,.12) 40%);
  background: color-mix(in oklab, var(--primary) 18%, rgba(255,255,255,.03) 82%);
}

/* More menu popup (does NOT expand layout) */
.vpu-pop{
  position:absolute;
  right:12px;
  bottom:58px;
  width: min(420px, calc(100% - 24px));
  z-index: 20;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  border-radius: 16px;
  padding:12px 12px;
  backdrop-filter: blur(10px);
}
.vpu-pop-head{display:flex; flex-direction:column; gap:4px; margin-bottom:10px}
.vpu-pop-title{font-weight:860; letter-spacing:.2px}
.vpu-pop-sub{font-size:12px; color: rgba(255,255,255,.70)}
.vpu-speedwrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.vpu-speedwrap .vpu-rate{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  border-radius: 999px;
  padding:8px 10px;
  font-weight:820;
  font-size:12px;
  cursor:pointer;
}
.vpu-speedwrap .vpu-rate[data-active="1"]{
  border-color: color-mix(in oklab, var(--primary) 65%, white 10%);
  background: color-mix(in oklab, var(--primary) 16%, rgba(255,255,255,.03) 84%);
}
.vpu-custom{margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.vpu-custom-label{font-size:12px; color: rgba(255,255,255,.78); font-weight:800}
.vpu-speedcustom{
  width: 140px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.90);
  border-radius: 14px;
  padding:10px 10px;
  outline:none;
}
@media (max-width: 520px){
  .vpu-volrange{width: min(200px, 56vw);}
  .vpu-btn{padding:9px 9px}
}

/* Responsive */
@media (max-width: 980px){
  .chat-shell,
  body[data-members-sidebar="1"] .chat-shell,
  body[data-sidebar-position="left"][data-members-sidebar="1"] .chat-shell{
    grid-template-columns: 1fr;
  }
  .chat-main{border-left:none; border-right:none}
  .sidebar,
  .members-sidebar{
    border-top:1px solid var(--stroke);
    border-left:none;
    border-right:none;
  }
  .members-sidebar{
    display:none !important;
  }
}

/* Ensure the HTML [hidden] attribute always hides elements */
[hidden]{ display:none !important; }

/* -------------------- Schedules (School) -------------------- */
.sched-page{
  width:100%;
  max-width:none;
  display:flex;
  flex-direction:column;
  gap:14px;

  /* Prevent drag-to-select highlight on Schedules page */
  -webkit-user-select:none;
  user-select:none;
}

.sched-topcard{
  border:1px solid rgba(255,255,255,.10);
  background:#2b2d31;
  border-radius:8px;
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.sched-top-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.sched-top-ico{
  width:44px;
  height:44px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(110,168,255,.28);
  background:#383a40;
  box-shadow:none;
}

.sched-title{
  font-weight:900;
  letter-spacing:.2px;
  font-size:18px;
  line-height:1.15;
}

.sched-sub{
  margin-top:2px;
  color: rgba(255,255,255,.62);
  font-size:12.5px;
}

.sched-top-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sched-preview-days{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sched-preview-btn{
  appearance:none;
  min-width:42px;
  height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-weight:850;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .10s ease, color .16s ease;
}
.sched-preview-btn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
}
.sched-preview-btn:active{ transform: translateY(1px); }
.sched-preview-btn.is-active{
  border-color: rgba(110,168,255,.42);
  background: linear-gradient(180deg, rgba(110,168,255,.18), rgba(255,255,255,.04));
  color: rgba(255,255,255,.96);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.sched-type-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(110,168,255,.34);
  background: linear-gradient(180deg, rgba(110,168,255,.16), rgba(255,255,255,.03));
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  user-select:none;
}

.sched-type-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

.sched-type-text{
  font-weight:850;
  letter-spacing:.2px;
  font-size:13px;
}

/* Layout */
.sched-split{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:14px;
  align-items:start;
}

@media (max-width: 980px){
  .sched-split{ grid-template-columns: 1fr; }
}

/* Cards */
.sched-card{
  border:1px solid rgba(255,255,255,.10);
  background:#2b2d31;
  border-radius:8px;
  padding:14px;
}

.sched-card-title{
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:10px;
}

/* People grid */
.sched-people-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:10px;
}

.sched-person-card{
  appearance:none;
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  background:#313338;
  color:var(--text);
  border-radius:8px;
  padding:12px 12px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  transition: transform .10s ease, border-color .16s ease, background .16s ease;
  text-align:left;
}

.sched-person-card:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.sched-avatar{
  width:42px;
  height:42px;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(110,168,255,.28);
  background: rgba(255,255,255,.03);
  position:relative;
  flex: 0 0 auto;
}

.sched-avatar img{
  position:absolute; left:50%; top:50%;
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  transform: translate(-50%,-50%) scale(1);
  transform-origin:center;
  user-select:none;
  -webkit-user-drag:none;
}

.sched-person-meta{min-width:0}
.sched-person-name{
  font-weight:900;
  font-size:13.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sched-person-go{
  margin-left:auto;
  opacity:.8;
}

/* Person view head */
.sched-view-head{
  width:100%;
  max-width:none;
  display:flex;
  align-items:center;
  gap:10px;
}

.sched-person-title{
  font-weight:900;
  font-size: 14px;
  opacity: .95;
}

/* Tables: make them look like native cards (not raw text) */
.sched-times,
.sched-grid{
  width:100%;
  overflow:auto;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  border-radius:18px;
}

/* Times table (3 columns) */
.sched-times-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display:grid;
  grid-template-columns: 1.35fr 1fr .75fr;
  gap:10px;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(12,16,24,.40), rgba(6,10,18,.28));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size:12px;
  font-weight:850;
  letter-spacing:.2px;
  color: rgba(255,255,255,.62);
}

.sched-times-row{
  display:grid;
  grid-template-columns: 1.35fr 1fr .75fr;
  gap:10px;
  padding:10px 12px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.08);
}
.sched-times-row:hover{ background: rgba(255,255,255,.03); }

.sched-times-row.is-active{
  background: rgba(255,216,77,.06);
}
.sched-times-row.is-active .sched-times-period{
  color:#ffd84d;
}

.sched-times-period{
  font-weight:900;
  letter-spacing:.15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sched-times-time,
.sched-times-dur{
  color: rgba(255,255,255,.78);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Schedule grid (6 columns) */
.sched-grid-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display:grid;
  grid-template-columns: 1.05fr 1fr .75fr 1.55fr 1.25fr .8fr;
  gap:12px;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(12,16,24,.40), rgba(6,10,18,.28));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size:12px;
  font-weight:850;
  letter-spacing:.2px;
  color: rgba(255,255,255,.62);
  min-width: 860px;
}

.sched-grid-row{
  display:grid;
  grid-template-columns: 1.05fr 1fr .75fr 1.55fr 1.25fr .8fr;
  gap:12px;
  padding:10px 12px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.08);
  min-width: 860px;
}
.sched-grid-row:hover{ background: rgba(255,255,255,.03); }

.sched-grid-row.is-active{
  background: rgba(255,216,77,.06);
}
.sched-grid-row.is-active .sched-cell-period{
  color:#ffd84d;
}

/* Generic cell styling (works for both tables) */
.sched-cell{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: rgba(255,255,255,.82);
}
.sched-cell-period{ font-weight:900; }
.sched-cell-time,
.sched-cell-duration{ color: rgba(255,255,255,.78); }
.sched-cell-teacher,
.sched-cell-room{ color: rgba(255,255,255,.76); }

.sched-grid-row.sched-grid-empty{
  background: rgba(255,255,255,.02);
}
.sched-grid-row.sched-grid-empty:hover{ background: rgba(255,255,255,.02); }

.sched-cell-empty{
  grid-column: 1 / -1;
  white-space: normal;
  text-align: center;
  padding: 14px 6px;
  color: rgba(255,255,255,.70);
}

/* -------------------- Slideshow (full-width) -------------------- */
body.slideshow-full{
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 18% 0%, rgba(123,182,255,.14), transparent 58%),
    radial-gradient(900px 640px at 98% 20%, rgba(178,130,255,.14), transparent 52%),
    #070914;
}
body.slideshow-full .chat-shell,
body.slideshow-full[data-sidebar-position="left"] .chat-shell,
body.slideshow-full[data-sidebar-position="left"][data-members-sidebar="1"] .chat-shell{
  grid-template-columns: minmax(0, 1fr) !important;
}

body.slideshow-full .sidebar,
body.slideshow-full .members-sidebar{
  display:none !important;
}

body.slideshow-full .chat-main,
body.slideshow-full[data-sidebar-position="left"] .chat-main,
body.slideshow-full[data-members-sidebar="1"] .chat-main{
  order:1 !important;
  grid-column:1 !important;
  border-right:none;
  border-left:none;
}
body.slideshow-full .chat-top{
  display:none;
}
body.slideshow-full .room-info{display:none}

/* Slideshow page should not scroll; only the picker scrolls */
body.slideshow-full .messages{
  overflow:hidden;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    radial-gradient(900px 520px at 75% 12%, rgba(123,182,255,.12), transparent 60%);
}
body.slideshow-full .messages-inner{
  height: 100%;
  min-height: 0;
}

/* Slideshow editing indicator */
body.slideshow-full .online-pill{
  width:100%;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-rows:40px minmax(0, 1fr);
  align-items:center;
  column-gap:10px;
  min-width:0;
  max-width:none;
  min-height:40px;
  border:none;
  background:transparent;
  padding:0;
  overflow:visible;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  position:relative;
  z-index:90;
  isolation:isolate;
}
body.slideshow-full .online-label{
  display:block;
  width:100%;
  padding:0 2px;
  font-size:13px;
  line-height:32px;
  font-weight:850;
  letter-spacing:.2px;
  color:rgba(255,255,255,.78);
  text-align:left;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;
  z-index:6;
  pointer-events:none;
}
body.slideshow-full .slideshow-editors-toggle{
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  color:rgba(255,255,255,.94);
  border-radius:999px;
  padding:6px 12px;
  margin:0;
  min-width:58px;
  height:30px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.15px;
  cursor:pointer;
  position:relative;
  z-index:7;
  pointer-events:auto;
}
body.slideshow-full .slideshow-editors-toggle:hover{
  border-color:rgba(123,182,255,.50);
  background:linear-gradient(180deg, rgba(123,182,255,.18), rgba(255,255,255,.055));
}
body.slideshow-full .online-list{
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  align-self:stretch;
  gap:4px;
  min-width:0;
  min-height:0;
  height:auto;
  max-height:0;
  padding:0;
  flex-wrap:nowrap;
  overflow:hidden;
  position:relative;
  z-index:1;
}
body.slideshow-full .online-list[hidden]{
  display:none!important;
}
body.slideshow-full .slideshow-side.editors-open{
  gap:12px;
}
body.slideshow-full .slideshow-side.editors-open .slideshow-inspector{
  display:none!important;
}
body.slideshow-full .slideshow-side.editors-open .slideshow-side-topbar{
  flex:0 0 auto;
  min-height:0;
  height:auto;
  overflow:visible;
}
body.slideshow-full .slideshow-side.editors-open .online-pill{
  height:auto;
  min-height:40px;
  grid-template-rows:42px auto;
  overflow:visible;
}
body.slideshow-full .slideshow-side.editors-open .online-list{
  max-height:min(190px, 34dvh);
  overflow:auto;
  padding:8px 0 0;
}
body.slideshow-full .online-ava.member-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-radius:14px;
  position:relative;
  z-index:1;
  background:transparent;
  box-shadow:none;
  transform:none;
  overflow:visible;
}
body.slideshow-full .online-ava.member-row:hover{
  background:rgba(255,255,255,.035);
}
body.slideshow-full .online-ava-img{
  width:40px;
  height:40px;
}
body.slideshow-full .online-ava.can-jump{
  cursor:pointer;
}
body.slideshow-full .online-ava.no-jump{
  cursor:default;
}
body.slideshow-full .online-tooltip{
  display:none;
}
body.slideshow-full .online-typing{
  inset:0;
  border-radius:999px;
  z-index:2;
  pointer-events:none;
}

/* Slideshow layout */
.slideshow-page{
  width:100%;
  height: 100%;
  min-height: 0;
  padding: 14px 16px 14px;
  display:flex;
  flex-direction:column;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.slideshow-grid{
  width:100%;
  flex: 1 1 auto;
  min-height: 0;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 16px;
}

.slideshow-canvas-wrap{
  display:flex;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(800px 420px at 16% 8%, rgba(255,255,255,.08), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow: 0 30px 90px rgba(0,0,0,.44);
}

.slideshow-canvas{
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: 0;
  background: transparent;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  overflow:hidden;
  position:relative;
}

.slideshow-canvas-inner{
  position:absolute;
  inset: 0;
  display:block;
  overflow:hidden;
}

.slideshow-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 18px;
  text-align:center;
  color: rgba(0,0,0,.70);
}

.slideshow-empty-title{
  font-weight: 900;
  font-size: 18px;
}

.slideshow-empty-sub{
  font-size: 13px;
  opacity: .72;
}

.slideshow-side{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(260px 160px at 20% 0%, rgba(123,182,255,.12), rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.026));
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.slideshow-side-topbar{
  min-height:38px;
  display:flex;
  align-items:flex-start;
  justify-content:stretch;
  width:100%;
  flex:0 0 auto;
  position:relative;
  z-index:80;
  overflow:visible;
  isolation:isolate;
}

.slideshow-side-head{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items:center;
  gap: 7px;
  position:relative;
  z-index:10;
}
.slideshow-side-head .btn{
  min-height: 32px;
  padding: 8px 9px;
  border-radius: 13px;
}

.slideshow-inspector{
  position:absolute;
  left: 12px;
  right: 12px;
  top: calc(var(--ss-head-h, 40px) + 24px);
  bottom: 12px;
  z-index: 50;
  overflow-y:auto;
  overflow-x:hidden;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(260px 160px at 10% 0%, rgba(123,182,255,.12), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(10,14,26,.86), rgba(6,8,16,.78));
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.slideshow-inspector .slide-menu-card{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.slideshow-thumbs{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  padding: 2px 2px 2px 0;
  display:flex;
  flex-direction:column;
  gap: 9px;
  scroll-behavior:smooth;
  overscroll-behavior: contain;
}

.slideshow-thumb-wrap{
  display:flex;
  flex-direction:column;
  gap: 7px;
}

.slideshow-divider-wrap{
  position: relative;
  flex: 0 0 auto;
  margin: 2px 6px;
  z-index: 2;
  cursor: pointer;
}

.slideshow-divider{
  display:block;
  width: 100%;
  height: 4px;
  min-height: 4px;
  flex: 0 0 auto;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(123,182,255,.18), rgba(255,255,255,.46), rgba(178,130,255,.18));
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  margin: 0;
  opacity: .95;
}

.slideshow-divider-wrap.is-selected .slideshow-divider{
  background:
    linear-gradient(90deg, rgba(123,182,255,.48), rgba(255,255,255,.72), rgba(178,130,255,.48));
  opacity: 1;
}

.slideshow-divider-tooltip,
.slideshow-title-tooltip{
  position:absolute;
  z-index: 4;
  left: 50%;
  top: 0;
  transform: translate(-50%, -10px) scale(.98);
  opacity:0;
  pointer-events:none;
  padding:6px 8px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(12,16,24,.88), rgba(6,10,18,.78));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 36px rgba(0,0,0,.58);
  transition: opacity .14s ease, transform .14s ease;
}
.slideshow-title-tooltip{
  display:flex;
  gap:8px;
}
.slideshow-divider-tooltip::after,
.slideshow-title-tooltip::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -1px;
  width:10px;
  height:10px;
  background: linear-gradient(180deg, rgba(12,16,24,.88), rgba(6,10,18,.78));
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  transform: translate(-50%, 50%) rotate(45deg);
}
.slideshow-divider-wrap.is-selected .slideshow-divider-tooltip,
.slideshow-title-wrap.is-selected .slideshow-title-tooltip{
  opacity:1;
  pointer-events:auto;
  transform: translate(-50%, -16px) scale(1);
}

.slideshow-title-wrap:focus{ outline:none; }

.slideshow-divider-del{
  position: static;
  top:auto;
  right:auto;
  z-index:auto;
  padding: 8px 10px;
  border-radius: 14px;
}

.slideshow-title-wrap{
  position: relative;
  margin: 4px 4px 2px;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  z-index: 3;
  cursor: pointer;
  touch-action: manipulation;
  font-family: inherit;
}
.slideshow-divider-wrap + .slideshow-title-wrap{
  margin-top: 5px;
}
.slideshow-thumbs > .slideshow-title-wrap{
  margin-left: 4px;
  margin-right: 4px;
}
.slideshow-title-wrap:hover{
  border-color: rgba(255,255,255,.12);
  background: transparent;
}
.slideshow-title-wrap.is-selected{
  border-color: rgba(123,182,255,.42);
  background: transparent;
}
.slideshow-title-wrap.is-editing{
  cursor: default;
  border-color: rgba(123,182,255,.72);
  background: transparent;
  box-shadow: 0 0 0 3px rgba(123,182,255,.16);
}
.slideshow-title-text{
  font-family: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.18;
  letter-spacing: .05px;
  color: rgba(255,255,255,.96);
  white-space: pre-wrap;
  word-break: break-word;
}
.slideshow-title-editrow{
  display:flex;
  align-items:center;
  gap:8px;
}
.slideshow-title-input{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .05px;
  color: rgba(255,255,255,.96);
  background: transparent;
  border: 1px solid rgba(123,182,255,.38);
  border-radius: 10px;
  padding: 7px 8px;
  outline: none;
  resize: none;
  overflow: hidden;
  -webkit-user-select:text;
  user-select:text;
}
.slideshow-title-input:focus{
  border-color: rgba(123,182,255,.70);
  background: transparent;
  box-shadow: 0 0 0 3px rgba(123,182,255,.16);
}
.slideshow-title-del{
  position: static;
  top:auto;
  right:auto;
  z-index:auto;
  flex: 0 0 auto;
}

.slideshow-side.is-inspecting #slideshow-add-divider,
.slideshow-side.is-inspecting #slideshow-add-title{
  display:none;
}

.slideshow-thumb{
  width: 100%;
  text-align:left;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  padding: 9px;
  cursor:pointer;
  position:relative;
  transition: transform .10s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.slideshow-thumb:hover{
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  border-color: rgba(255,255,255,.20);
}

.slideshow-thumb.is-active{
  border-color: rgba(123,182,255,.62);
  box-shadow: 0 0 0 3px rgba(123,182,255,.14), 0 18px 46px rgba(0,0,0,.28);
}

.slideshow-thumb.is-reorder{
  cursor:grab;
}
.slideshow-thumb.is-dragging{
  opacity:.56;
  cursor:grabbing;
}
.slideshow-thumb.is-drag-over{
  border-color: rgba(123,182,255,.72);
}
.slideshow-thumb.is-drop-before::before,
.slideshow-thumb.is-drop-after::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  box-shadow: 0 0 18px rgba(123,182,255,.36);
  z-index:10;
}
.slideshow-thumb.is-drop-before::before{ top:-8px; }
.slideshow-thumb.is-drop-after::after{ bottom:-8px; }

.slideshow-thumb-box{
  height: clamp(82px, 14dvh, 128px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.035);
  position:relative;
  overflow:hidden;
}

.slideshow-thumb-preview{
  position:absolute;
  inset: 0;
  z-index: 1;
  pointer-events:none;
}

.slideshow-thumb-preview-stage{
  position:absolute;
  width:1600px;
  height:900px;
  pointer-events:none;
  overflow:hidden;
  border-radius:0;
}

.slideshow-thumb-preview-stage .slide-obj{
  pointer-events:none;
}

.slideshow-thumb-preview-stage video,
.slideshow-thumb-preview-stage audio,
.slideshow-thumb-preview-stage button{
  pointer-events:none;
}

.slideshow-thumb-num{
  position:absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  pointer-events:none;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.90);
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.16);
  padding: 4px 8px;
  border-radius: 999px;
}

.slideshow-thumb-locs{
  position:absolute;
  inset:0;
  z-index: 6;
  pointer-events:none;
}

.slideshow-thumb-locs-left{
  position:absolute;
  left: 8px;
  top: 38px;
  display:grid;
  grid-template-columns: repeat(2, 18px);
  grid-auto-rows: 18px;
  gap:4px;
}

.mini-avatar.slideshow-loc-ava{
  width:18px;
  height:18px;
  border-color: rgba(255,255,255,.20);
  background: rgba(0,0,0,.24);
}

.slideshow-actions{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: auto;
}
.slideshow-actions .btn{
  min-height: 42px;
  border-radius: 16px;
}

@media (max-width: 900px){
  .slideshow-page{
    padding: 8px;
  }
  .slideshow-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .slideshow-side{
    flex-direction:row;
    align-items:flex-start;
    gap: 8px;
    padding: 8px;
    max-height: clamp(170px, 30dvh, 210px);
  }
  .slideshow-side-topbar{
    display:none;
  }
  .slideshow-side-head{
    width: 128px;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .slideshow-side-head .btn{
    min-height: 30px;
    padding: 7px 8px;
    border-radius: 12px;
    font-size: 11px;
  }
  .slideshow-thumbs{
    flex: 1 1 auto;
    max-height: none;
    min-width: 0;
    gap: 8px;
  }
  .slideshow-actions{
    width: 128px;
    margin-top: 0;
    gap: 6px;
  }
  .slideshow-actions .btn{
    min-height: 34px;
    padding: 8px 9px;
    border-radius: 12px;
  }
  .slideshow-thumb{
    padding: 6px;
    border-radius: 14px;
  }
  .slideshow-thumb-box{
    height: clamp(72px, 18dvh, 112px);
    border-radius: 11px;
  }
}

/* -------------------- Slideshow editor objects -------------------- */
.slideshow-stage{
  position:absolute;
  left:50%;
  top:50%;
  width:1600px;
  height:900px;
  max-width:none;
  max-height:none;
  background:#ffffff;
  border-radius:0;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}
.slideshow-stage *{
  user-select:none;
  -webkit-user-select:none;
}
.slide-obj{
  position:absolute;
  transform-origin:center;
  cursor:pointer;
  will-change: transform;
  touch-action:none;
}

/* Slideshow video objects: static thumbnail with decorative play overlay */
.slide-obj-video .slide-video-thumb{
  width:100%;
  height:100%;
  position:relative;
  display:block;
  background:#000;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
}
.slide-obj-video .slide-video-poster{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.slide-obj-video .slide-video-fallback{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    radial-gradient(240px 160px at 50% 30%, rgba(123,182,255,.18), transparent 70%),
    rgba(0,0,0,.40);
}
.slide-obj-video .slide-video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(0,0,0,.58);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  pointer-events:none;
}
.slide-obj.is-selected{outline:none; z-index: 99999 !important}
.slide-obj.is-selected::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:2px solid rgba(59,130,246,.90);
  border-radius:14px;
  pointer-events:none;
  z-index:20;
}

.slide-text{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  white-space:pre-wrap;
  word-break:break-word;
  padding:6px;
}

.slide-url-ico{
  width:14px;
  height:14px;
  flex:0 0 auto;
  display:inline-block;
  opacity:.75;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M10%2013a5%205%200%200%201%200-7l1-1a5%205%200%200%201%207%207l-1%201'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3Cpath%20d%3D'M14%2011a5%205%200%200%201%200%207l-1%201a5%205%200%200%201-7-7l1-1'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M10%2013a5%205%200%200%201%200-7l1-1a5%205%200%200%201%207%207l-1%201'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3Cpath%20d%3D'M14%2011a5%205%200%200%201%200%207l-1%201a5%205%200%200%201-7-7l1-1'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.slide-media{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}

.slide-audio{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  justify-content:center;
  padding:12px 14px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    rgba(17,24,39,.96);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 38px rgba(0,0,0,.24);
}

.slide-audio-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.slide-audio-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}
.slide-audio-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.slide-audio-title{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}
.slide-audio-sub{
  font-size:12px;
  opacity:.72;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.slide-audio-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:inherit;
  font-weight:800;
  font-size:12px;
  padding:7px 12px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
}
.slide-audio-btn:hover{ background:rgba(255,255,255,.16); }
.slide-audio-btn.secondary{
  background:rgba(255,255,255,.06);
}

.slide-audio-mid{ display:flex; align-items:center; gap:10px; }
.slide-audio-range{ flex:1; width:100%; }
.slide-audio-time{ font-size:12px; opacity:.84; white-space:nowrap; }

.slide-audio-opts{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.slide-audio-loop,
.slide-audio-speed{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  opacity:.9;
  user-select:none;
}
.slide-audio-loop{
  cursor:pointer;
}
.slide-audio-loop input[type="checkbox"]{
  --toggle-w:28px;
  --toggle-h:16px;
  --toggle-knob:12px;
  --toggle-pad:2px;
  --toggle-shift:12px;
}
.slide-audio-vol{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  opacity:.9;
}
.slide-audio-vol-range{ width:120px; }
select.custom-select-native:not(.font-native){
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}
select:not(.font-native):not(.custom-select-native){
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(10,12,16,.96);
  color:rgba(255,255,255,.92);
  border-radius:14px;
  padding:8px 30px 8px 10px;
  cursor:pointer;
  color-scheme:dark;
}
.slide-audio-speed select{
  min-width:88px;
}
.slide-audio-speed .custom-select-dd{
  flex:0 0 auto;
  width:auto;
  min-width:88px;
}

.slide-audio-range{ --range-h:8px; --range-thumb:14px; }
.slide-audio-vol-range{ --range-h:7px; --range-thumb:13px; }
.slide-audio input[type="range"]{ min-width:0; }

.slide-menu{
  position:absolute;
  transform: translate(-50%,-100%);
  z-index: 250;
  pointer-events:auto;
  max-width: calc(100vw - 24px);
  overflow-x:hidden;
}

.slide-menu-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  background: rgba(10,12,16,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  width: min(420px, 100%);
  max-width: 100%;
  min-width: 0;
  overflow-x:hidden;
}

.slide-menu-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
}
.slide-menu-label{opacity:.8; font-size:12px; min-width:44px}
.slide-menu-actions{display:flex; gap:8px; flex-wrap:wrap}

.slide-select{width:100%; min-width:0; max-width:100%}

/* Hide native select (we keep it for logic + accessibility) */
.slide-select.font-native{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.font-dd,
.custom-select-dd{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  width:100%;
}
.custom-select-dd{
  display:block;
}

.font-dd-btn{
  width:100%;
  text-align:left;
  cursor:pointer;
  padding-right:34px;
  position:relative;
}

.font-dd-btn::after{
  content:"▾";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  opacity:.8;
  font-size:12px;
}

.font-dd.open .font-dd-btn::after{content:"▴";}

/* Menu looks like a normal Chrome dropdown: separate floating menu below the control */
.font-dd-pop{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 6px);
  z-index:400;
  max-height:204px; /* ~6 items then scroll */
  overflow:auto;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,16,.96);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

/* When opened, the popup is moved to <body> so it does not get trapped in any scroll container */
.font-dd-pop.portal{
  position:fixed;
  left:0;
  top:0;
  right:auto;
  z-index:5000;
}

.font-dd-opt{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color: rgba(255,255,255,.92);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}

.font-dd-opt:hover{background: rgba(255,255,255,.08);}
.font-dd-opt.is-selected{background: rgba(59,130,246,.22);}

.slide-num{width:86px}

.slide-check{
  display:flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  user-select:none;
}
.slide-check input[type="checkbox"]{
  --toggle-w:30px;
  --toggle-h:16px;
  --toggle-knob:12px;
  --toggle-pad:2px;
  --toggle-shift:14px;
}

.slideshow-center-guide{
  position:absolute;
  z-index:24;
  pointer-events:none;
  opacity:0;
  transition: opacity .08s ease;
}
.slideshow-center-guide[data-active="1"]{ opacity:1; }
.slideshow-center-guide-x{
  left:0;
  right:0;
  top:50%;
  height:0;
  border-top:2px dashed rgba(59,130,246,.92);
  box-shadow:0 0 18px rgba(59,130,246,.35);
}
.slideshow-center-guide-y{
  top:0;
  bottom:0;
  left:50%;
  width:0;
  border-left:2px dashed rgba(59,130,246,.92);
  box-shadow:0 0 18px rgba(59,130,246,.35);
}

.slide-handles{position:absolute; inset:0; pointer-events:none; z-index:30}
.slide-handle{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:999px;
  background: rgba(59,130,246,.95);
  border:2px solid rgba(0,0,0,.35);
  pointer-events:auto;
  box-shadow:0 0 0 4px rgba(59,130,246,.16);
}

.slide-handle-resize{right:-8px; bottom:-8px; cursor:nwse-resize}
.slide-handle-rotate{left:50%; top:-18px; transform: translateX(-50%); cursor:grab}
.slide-remote-selectors{
  position:absolute;
  inset:-6px;
  border:2px solid rgba(34,197,94,.92);
  border-radius:14px;
  pointer-events:none;
  z-index:25;
}
.slide-remote-avatars{
  position:absolute;
  left:-2px;
  top:-34px;
  display:flex;
  align-items:center;
  gap:4px;
  pointer-events:none;
}
.slide-remote-avatar{
  position:relative;
  width:26px;
  height:26px;
  border-radius:999px;
  overflow:hidden;
  background:#111827;
  border:2px solid rgba(34,197,94,.95);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.slide-remote-avatar img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform-origin:center;
}

body.slideshow-full #btn-upload[disabled]{opacity:.55; cursor:not-allowed}

/* -------------------- Slideshow: object menus + custom color picker -------------------- */
.slide-layer-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size:12px;
}

.slide-menu-row-end{justify-content:flex-end}

.color-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.color-btn[disabled]{opacity:.55; cursor:not-allowed}
.color-swatch{
  width:18px;
  height:18px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.color-name{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
  font-size:12px;
  opacity:.9;
}

.color-picker{display:flex; flex-direction:column; gap:12px}
.color-picker .cp-top{display:flex; align-items:center; gap:10px}
.color-picker .cp-swatch{width:34px; height:34px; border-radius:12px}
.color-picker .cp-hex{
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
}
.color-picker .cp-preset{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:8px;
}
.color-picker .cp-chip{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.35);
  cursor:pointer;
}
.color-picker .cp-advanced{display:flex; flex-direction:column; gap:10px}
.color-picker .cp-sv{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  touch-action:none;
}
.color-picker .cp-hue{width:100%}
.color-picker .cp-actions{display:flex; justify-content:flex-end; gap:10px}

/* -------------------- Slideshow shapes -------------------- */

/* SVG-backed shapes (accurate geometry + proper stroke rendering) */
.slide-shape-svg{
  width:100%;
  height:100%;
  display:block;
}

/* Shape picker grid */
.shape-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.bg-row{gap:10px}

/* -------------------- HTML Library -------------------- */
.html-side-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:15px;
  letter-spacing:-.6px;
  line-height:1;
}

.modal[data-size="html-library"] .modal-card{
  width:min(1060px, calc(100vw - 32px));
  min-height:min(640px, calc(100dvh - 48px));
  border-radius:18px;
  border:1px solid rgba(135,164,197,.15);
  background:#151b23;
  box-shadow:0 26px 80px rgba(0,0,0,.58);
}
.modal[data-size="html-library"] .modal-card::before{display:none}
.modal[data-size="html-library"] .modal-head{
  padding:16px 18px;
  border-bottom:1px solid rgba(135,164,197,.11);
  background:#18202a;
}
.modal[data-size="html-library"] .modal-title{
  font-size:20px;
  letter-spacing:-.015em;
}
.modal[data-size="html-library"] .modal-body{
  padding:0;
  background:#131920;
}
.modal[data-size="html-library"] .html-library-titlebar{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:14px;
}
.modal[data-size="html-library"] .html-library-title-stack{
  min-width:0;
  display:grid;
  gap:4px;
}
.modal[data-size="html-library"] .html-library-title-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.modal[data-size="html-library"] .html-library-title-sub{
  color:#8e9aaa;
  font-size:12px;
  font-weight:500;
}
.modal[data-size="html-library"] .html-library-search-input{
  width:min(320px, 34vw);
  min-width:190px;
  appearance:none;
  border:1px solid rgba(135,164,197,.15);
  background:#10161d;
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
  font:inherit;
  font-size:13px;
  outline:none;
  box-shadow:none;
}
.modal[data-size="html-library"] .html-library-search-input::placeholder{color:#697686}
.modal[data-size="html-library"] .html-library-search-input:focus{
  border-color:rgba(92,151,218,.66);
  box-shadow:0 0 0 3px rgba(92,151,218,.13);
}
.html-library-layout{
  min-height:100%;
  display:grid;
  grid-template-columns:210px minmax(0, 1fr);
}
.html-library-sidebar{
  min-width:0;
  padding:16px 10px;
  border-right:1px solid rgba(135,164,197,.10);
  background:#11171e;
}
.html-library-sidebar-title{
  padding:0 10px 9px;
  color:#728093;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.html-library-nav-item{
  appearance:none;
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#9da9b8;
  font:inherit;
  font-size:13px;
  font-weight:550;
  text-align:left;
  cursor:pointer;
}
.html-library-nav-item:hover{background:#1b2430;color:#edf4fb}
.html-library-nav-item.is-active{
  background:linear-gradient(90deg, rgba(76,139,205,.22), rgba(79,169,131,.12));
  color:#eff6fc;
  font-weight:700;
}
.html-library-nav-count{
  min-width:22px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#aebaca;
  font-size:11px;
  text-align:center;
}
.html-library-content{
  min-width:0;
  padding:20px;
}
.html-library-content-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.html-library-content-head h3{
  margin:0;
  color:#edf4fb;
  font-size:16px;
  font-weight:700;
}
.html-library-content-head p{
  margin:5px 0 0;
  color:#8794a4;
  font-size:12px;
  line-height:1.45;
}
.html-library-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:10px;
}
.html-library-card{
  position:relative;
  min-height:74px;
  border-radius:12px;
  outline:none;
}
.html-library-card-main{
  appearance:none;
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:74px;
  height:100%;
  border:1px solid rgba(135,164,197,.11);
  border-radius:12px;
  background:#1a222c;
  color:var(--text);
  text-align:left;
  padding:11px;
  margin:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:11px;
  box-shadow:none;
  transition:border-color .14s ease, background .14s ease, transform .12s ease;
}
.html-library-card:hover .html-library-card-main,
.html-library-card:focus-visible .html-library-card-main{
  transform:translateY(-1px);
  border-color:rgba(92,151,218,.45);
  background:#202b37;
  box-shadow:none;
}
.html-library-card-mark{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid rgba(92,151,218,.20);
  background:linear-gradient(135deg, rgba(76,139,205,.24), rgba(79,169,131,.16));
  color:#dceafa;
  font-size:13px;
  font-weight:750;
  box-shadow:none;
}
.html-library-card-copy{
  min-width:0;
  flex:1 1 auto;
  display:grid;
  gap:4px;
}
.html-library-card-title{
  min-width:0;
  max-width:100%;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  word-break:break-word;
}
.html-library-card-meta{color:#7f8c9d;font-size:11px;font-weight:450}
.html-library-card-open{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  color:#7f8ea1;
}
.html-library-paused-pill{
  flex:0 0 auto;
  border:1px solid rgba(79,169,131,.28);
  background:rgba(79,169,131,.12);
  color:#9ed7bd;
  border-radius:999px;
  padding:4px 7px;
  font-size:11px;
  font-weight:650;
}
.html-library-menu{
  min-width:150px;
  z-index:100240;
  transform-origin:top left;
}
.html-library-menu .msg-menu-btn{
  color:#fff;
}
.html-library-form-card{
  width:min(600px, 100%);
  display:grid;
  gap:12px;
  padding:16px;
  border:1px solid rgba(135,164,197,.11);
  border-radius:13px;
  background:#1a222c;
  box-shadow:none;
}
.html-library-label{
  font-size:12px;
  font-weight:650;
  color:#aeb9c7;
}
.html-library-file-drop{
  min-height:70px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px;
  border:1px dashed rgba(135,164,197,.22);
  border-radius:11px;
  background:#151c24;
}
.html-library-file-name{
  min-width:0;
  color:#8592a2;
  font-size:12px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.html-library-upload-status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:28px;
  padding:6px 10px;
  border:1px solid rgba(79,169,131,.24);
  border-radius:999px;
  background:rgba(79,169,131,.11);
  font-size:12px;
  font-weight:650;
  color:#a7dbc2;
}
.html-library-save-wide{
  width:max-content;
  min-width:150px;
}
.html-library-empty{
  min-height:170px;
  padding:22px;
  border:1px dashed rgba(135,164,197,.18);
  border-radius:13px;
  background:#171e27;
  color:#8794a4;
  font-size:13px;
  font-weight:550;
  display:grid;
  place-items:center;
  text-align:center;
}
@media (max-width: 820px){
  .modal[data-size="html-library"] .modal-card{
    width:100%;
    min-height:min(620px, calc(100dvh - 20px));
    border-radius:16px;
  }
  .modal[data-size="html-library"] .html-library-titlebar{
    grid-template-columns:minmax(0, 1fr);
  }
  .modal[data-size="html-library"] .html-library-search-input{
    width:min(100%, 420px);
    min-width:min(100%, 210px);
  }
  .html-library-layout{grid-template-columns:1fr}
  .html-library-sidebar{
    display:flex;
    gap:5px;
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid rgba(135,164,197,.10);
    padding:9px;
  }
  .html-library-sidebar-title{display:none}
  .html-library-nav-item{width:auto;flex:0 0 auto}
  .html-library-content{padding:16px}
  .html-library-grid{grid-template-columns:1fr}
  .html-library-form-card{width:100%}
}

/* Maps modal */
.maps-modal{
  display:grid;
  gap:12px;
}

.maps-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.maps-title{
  font-weight:900;
  letter-spacing:.2px;
}

.maps-count{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:850;
  color:rgba(255,255,255,.88);
}

.maps-frame-wrap{
  height:min(52vh, 420px);
  min-height:280px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,.28);
  position:relative;
}

.maps-canvas{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#101827;
  cursor:grab;
  user-select:none;
  touch-action:none;
}

.maps-canvas.is-dragging{
  cursor:grabbing;
}

.maps-tile-layer{
  position:absolute;
  inset:0;
  z-index:1;
}

.maps-tile{
  position:absolute;
  width:256px;
  height:256px;
  user-select:none;
  -webkit-user-drag:none;
  max-width:none;
}

.maps-marker-layer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.maps-map-controls{
  position:absolute;
  right:12px;
  top:12px;
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.maps-map-control{
  appearance:none;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(5,7,14,.78);
  color:rgba(255,255,255,.94);
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  backdrop-filter:blur(10px);
}

.maps-map-control.wide{
  font-size:16px;
}

.maps-map-marker{
  position:absolute;
  transform:translate(-50%, -100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  appearance:none;
  border:0;
  background:transparent;
  color:var(--text);
  padding:0;
  margin:0;
  cursor:pointer;
  pointer-events:auto;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.58));
  transition:left .18s linear, top .18s linear, opacity .18s ease;
}

.maps-map-marker-avatar{
  width:46px;
  height:46px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.94);
  background:rgba(12,16,32,.92);
  overflow:hidden;
  position:relative;
  box-shadow:0 0 0 3px rgba(123,182,255,.24);
}

.maps-map-marker.self .maps-map-marker-avatar{
  border-color:rgba(123,182,255,.98);
  box-shadow:0 0 0 4px rgba(123,182,255,.28), 0 0 28px rgba(123,182,255,.42);
}

.maps-map-marker.stale{
  opacity:.62;
}

.maps-map-marker-avatar img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center;
}

.maps-map-marker-label{
  max-width:120px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(5,7,14,.78);
  color:rgba(255,255,255,.94);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  backdrop-filter:blur(10px);
}

.maps-note{
  font-size:12px;
  color:var(--muted);
}

.maps-users-list{
  display:grid;
  gap:10px;
}

.maps-user-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.maps-user-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.maps-user-avatar{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
}

.maps-user-avatar img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center;
}

.maps-user-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.maps-user-name{
  font-weight:900;
  font-size:13px;
  color:rgba(255,255,255,.92);
}

.maps-user-sub,
.maps-user-coords{
  font-size:12px;
  color:var(--muted);
}

.maps-self-badge{
  display:inline-flex;
  margin-left:5px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(123,182,255,.14);
  color:rgba(220,238,255,.95);
  font-size:11px;
  font-weight:900;
}

.maps-open-link{
  text-decoration:none;
}

.maps-empty{
  padding:14px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:13px;
}

.games-stage-splash-copy b{font-weight:900}

/* Settings modal redesign + custom controls */
:where(a, button, input, textarea, select, [tabindex]):focus{
  outline:none !important;
}
:where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

input[type="checkbox"]:not(.toggle input){
  --toggle-w:32px;
  --toggle-h:18px;
  --toggle-knob:14px;
  --toggle-pad:2px;
  --toggle-shift:14px;
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  width:var(--toggle-w);
  height:var(--toggle-h);
  flex:0 0 var(--toggle-w);
  margin:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -6px 12px rgba(0,0,0,.18);
  cursor:pointer;
  vertical-align:middle;
  display:inline-block;
  transition:background .12s linear, border-color .12s linear, transform .08s linear, box-shadow .12s linear;
}
input[type="checkbox"]:not(.toggle input)::after{
  content:"";
  position:absolute;
  top:50%;
  left:var(--toggle-pad);
  width:var(--toggle-knob);
  height:var(--toggle-knob);
  border-radius:999px;
  transform:translate3d(0,-50%,0);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(219,228,242,.92));
  box-shadow:0 5px 12px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.70);
  transition:transform .14s cubic-bezier(.2,.9,.2,1), background .12s linear, box-shadow .12s linear;
  will-change:transform;
}
input[type="checkbox"]:not(.toggle input):checked{
  border-color:rgba(205,226,255,.44);
  background:linear-gradient(135deg, rgba(123,182,255,.88), rgba(106,125,255,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px rgba(39,95,190,.16);
}
input[type="checkbox"]:not(.toggle input):checked::after{
  transform:translate3d(var(--toggle-shift),-50%,0);
}
input[type="checkbox"]:not(.toggle input):active{
  transform:scale(.97);
}
input[type="checkbox"]:not(.toggle input):disabled{
  cursor:not-allowed;
  opacity:.55;
}

.toggle{
  --toggle-w:54px;
  --toggle-h:30px;
  --toggle-knob:22px;
  --toggle-pad:4px;
  --toggle-shift:24px;
  position:relative;
  display:inline-flex;
  align-items:center;
  width:var(--toggle-w);
  height:var(--toggle-h);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.toggle input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  appearance:none;
  -webkit-appearance:none;
  pointer-events:none;
}
.toggle-track{
  position:relative;
  width:var(--toggle-w);
  height:var(--toggle-h);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -7px 14px rgba(0,0,0,.18);
  transition:background .12s linear, border-color .12s linear, box-shadow .12s linear, transform .08s linear;
}
.toggle-track::before{
  display:none;
}
.toggle-track::after{
  content:"";
  position:absolute;
  top:50%;
  left:var(--toggle-pad);
  width:var(--toggle-knob);
  height:var(--toggle-knob);
  border-radius:999px;
  transform:translate3d(0,-50%,0);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(219,228,242,.92));
  box-shadow:0 6px 16px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.72);
  transition:transform .15s cubic-bezier(.2,.9,.2,1), background .12s linear, box-shadow .12s linear;
  will-change:transform;
}
.toggle input:checked + .toggle-track{
  border-color:rgba(205,226,255,.44);
  background:linear-gradient(135deg, rgba(123,182,255,.88), rgba(106,125,255,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px rgba(39,95,190,.16);
}
.toggle input:checked + .toggle-track::after{
  transform:translate3d(var(--toggle-shift),-50%,0);
}
.toggle input:disabled + .toggle-track{
  cursor:not-allowed;
  opacity:.55;
}
.toggle:active .toggle-track{
  transform:scale(.985);
}

.modal[data-size="settings"]{
  padding:clamp(14px, 2vw, 28px);
}
.modal[data-size="settings"] .modal-card{
  width:min(1180px, 100%);
  border-radius:30px;
  border:1px solid rgba(123,182,255,.22);
  background:
    radial-gradient(880px 420px at 5% -10%, rgba(123,182,255,.16), transparent 62%),
    radial-gradient(760px 420px at 105% 0%, rgba(106,125,255,.12), transparent 62%),
    linear-gradient(145deg, rgba(9,13,26,.98), rgba(5,8,16,.96));
  box-shadow:0 34px 130px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.10);
}
.modal[data-size="settings"] .modal-head{
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(123,182,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.018));
}
.modal[data-size="settings"] .modal-title{
  line-height:1.18;
  overflow:visible;
  padding-block:3px;
}
.modal[data-size="settings"] .html-library-title-text{
  line-height:1.18;
  overflow:visible;
  text-overflow:clip;
  padding-block:3px;
}
.modal[data-size="settings"] .modal-body{
  padding:20px;
  background:
    radial-gradient(740px 320px at 100% 0%, rgba(123,182,255,.055), transparent 62%),
    rgba(2,5,12,.28);
}
.settings-shell{
  display:grid;
  gap:18px;
}
.settings-layout{
  display:grid;
  grid-template-columns:minmax(300px, .75fr) minmax(0, 1.25fr);
  gap:18px;
  align-items:start;
}
.settings-layout > .settings-panel{
  height:auto;
}
.settings-layout[hidden],
.settings-panel[hidden]{
  display:none !important;
}
.settings-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;
  padding:18px;
  background:
    radial-gradient(520px 240px at 0% 0%, rgba(123,182,255,.08), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.022));
  box-shadow:0 18px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}
.settings-panel-wide{
  grid-column:1 / -1;
}
.settings-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.settings-panel-title{
  font-size:16px;
  font-weight:950;
  letter-spacing:-.01em;
  line-height:1.25;
}
.settings-panel-sub{
  margin-top:3px;
  color:rgba(255,255,255,.54);
  font-size:12px;
  line-height:1.4;
}
.settings-field-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:16px;
  row-gap:16px;
  margin-top:0;
  align-items:stretch;
}
.settings-panel-head + .settings-field-grid,
.settings-panel-head + .settings-field{
  margin-top:0;
}
.settings-field{
  min-width:0;
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
}
.settings-field > :is(input.input, textarea.input, div.input){
  min-height:46px;
}
.settings-field > div.input{
  display:flex;
  align-items:center;
}
.settings-field .settings-choice-row{
  min-height:46px;
  align-items:center;
}
.settings-inline-button{
  justify-self:start;
  align-self:start;
  width:auto;
  margin-top:10px;
}
.settings-field-grid + .settings-field,
.settings-field + .settings-field,
.settings-field + .settings-field-grid{
  margin-top:14px;
}
.settings-panel .label{
  margin:0 0 7px;
  min-height:17px;
  display:flex;
  align-items:flex-end;
  color:rgba(255,255,255,.60);
  font-weight:850;
  line-height:1.2;
  letter-spacing:.02em;
}
.settings-panel-preview .settings-profile-preview{
  width:100%;
  max-width:none;
}
.settings-profile-preview{
  height:334px;
  min-height:334px;
  max-height:334px;
}
.settings-profile-preview .user-profile-card{
  height:334px;
  min-height:334px;
  max-height:334px;
}
.settings-profile-preview .user-profile-shell{
  height:100%;
  min-height:0;
}
.settings-profile-preview .user-profile-body{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
}
.settings-profile-preview .user-profile-bio{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
}
.settings-media-upload{
  margin-top:0;
  border-radius:22px;
  background:rgba(0,0,0,.18);
}
.settings-bio-input{
  resize:none !important;
  min-height:150px;
  height:150px;
  max-height:none;
  overflow:auto;
}
.settings-banner-editor{
  margin-top:0;
  width:min(340px, calc(100vw - 24px));
  max-width:100%;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg, rgba(12,16,24,.94), rgba(8,12,20,.96));
}
.settings-banner-clip{
  position:relative;
  height:120px;
  overflow:hidden;
  touch-action:none;
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(110,168,255,.28), transparent 58%),
    radial-gradient(360px 180px at 85% 8%, rgba(255,255,255,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.settings-banner-clip img{
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.settings-control-card{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  padding:14px;
  background:#1e1f22;
}
.settings-control-note{
  color:rgba(255,255,255,.58);
  font-size:12px;
  margin-bottom:10px;
}
.settings-action-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.settings-slider-row{
  display:grid;
  grid-template-columns:minmax(96px, 150px) minmax(140px, 1fr) minmax(48px, auto);
  align-items:center;
  gap:12px;
  width:100%;
  margin-top:12px;
}
.settings-slider-row:first-child{
  margin-top:0;
}
.settings-slider-label{
  color:rgba(255,255,255,.66);
  font-size:12px;
  font-weight:850;
}
.settings-slider-val{
  min-width:52px;
  width:auto;
  text-align:right;
  color:rgba(255,255,255,.72);
  font-weight:850;
}
input[type="range"]{
  --range-h:10px;
  --range-thumb:16px;
  --range-pct:0%;
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:24px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  touch-action:none;
  vertical-align:middle;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:var(--range-h);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--primary) 82%, white 18%) 0%,
      color-mix(in oklab, var(--primary2) 76%, white 8%) var(--range-pct, 0%),
      rgba(255,255,255,.105) var(--range-pct, 0%),
      rgba(255,255,255,.045) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -8px 14px rgba(0,0,0,.18);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:var(--range-thumb);
  height:var(--range-thumb);
  margin-top:calc((var(--range-h) - var(--range-thumb)) / 2);
  border-radius:999px;
  border:1px solid rgba(205,226,255,.42);
  background:linear-gradient(180deg, rgba(236,246,255,.98), rgba(123,182,255,.94));
  box-shadow:0 6px 16px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.70);
  transition:transform .12s cubic-bezier(.2,.9,.2,1), box-shadow .12s linear, border-color .12s linear;
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb{
  transform:scale(1.08);
  border-color:rgba(255,255,255,.58);
  box-shadow:0 8px 20px rgba(0,0,0,.44), 0 0 0 4px rgba(123,182,255,.10), inset 0 1px 0 rgba(255,255,255,.78);
}
input[type="range"]::-moz-range-track{
  height:var(--range-h);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -8px 14px rgba(0,0,0,.18);
}
input[type="range"]::-moz-range-progress{
  height:var(--range-h);
  border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--primary) 82%, white 18%),
    color-mix(in oklab, var(--primary2) 76%, white 8%));
}
input[type="range"]::-moz-range-thumb{
  width:var(--range-thumb);
  height:var(--range-thumb);
  border-radius:999px;
  border:1px solid rgba(205,226,255,.42);
  background:linear-gradient(180deg, rgba(236,246,255,.98), rgba(123,182,255,.94));
  box-shadow:0 6px 16px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.70);
  transition:transform .12s cubic-bezier(.2,.9,.2,1), box-shadow .12s linear, border-color .12s linear;
}
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb{
  transform:scale(1.08);
  border-color:rgba(255,255,255,.58);
  box-shadow:0 8px 20px rgba(0,0,0,.44), 0 0 0 4px rgba(123,182,255,.10), inset 0 1px 0 rgba(255,255,255,.78);
}
input[type="range"]:disabled{
  cursor:not-allowed;
  opacity:.55;
}
.settings-background-preview{
  position:relative;
  width:min(620px, 100%);
  max-width:100%;
  min-height:0;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  background:
    radial-gradient(800px 420px at 20% 0%, rgba(110,168,255,.16), transparent 55%),
    radial-gradient(640px 380px at 95% 20%, rgba(91,124,250,.12), transparent 50%),
    radial-gradient(520px 300px at 55% 85%, rgba(178,130,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 46px rgba(0,0,0,.30);
  isolation:isolate;
}
.settings-background-preview-layer{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  transform:translateZ(0);
  pointer-events:none;
  z-index:1;
}
.settings-background-preview-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:3;
  color:rgba(255,255,255,.58);
  font-size:13px;
  font-weight:850;
}
.settings-background-preview[data-has-image="1"] .settings-background-preview-empty{
  display:none;
}
.settings-toggle-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.settings-toggle-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  border:1px solid rgba(255,255,255,.105);
  border-radius:8px;
  padding:15px;
  background:#313338;
}
.settings-toggle-copy{
  min-width:0;
}
.settings-toggle-title{
  color:rgba(255,255,255,.92);
  font-size:14px;
  font-weight:930;
}
.settings-toggle-desc{
  margin-top:4px;
  color:rgba(255,255,255,.55);
  font-size:12px;
  line-height:1.35;
}
.settings-modern-toggle.toggle{
  --toggle-w:56px;
  --toggle-h:30px;
  --toggle-knob:22px;
  --toggle-pad:4px;
  --toggle-shift:26px;
  flex:0 0 auto;
}
.settings-modern-toggle .toggle-track{
  width:var(--toggle-w);
  height:var(--toggle-h);
}
.settings-search-empty{
  margin:0;
}
@media (max-width: 860px){
  .settings-layout,
  .settings-field-grid,
  .settings-toggle-grid{
    grid-template-columns:1fr;
  }
  .settings-slider-row{
    grid-template-columns:1fr;
  }
  .settings-slider-val{
    text-align:left;
  }
}

/* Calm blue-green application theme */
.card,
.modal-card,
.room-loading-card{
  border:1px solid rgba(145,171,201,.12);
  border-radius:18px;
  background:var(--surface-2);
  box-shadow:0 18px 52px rgba(0,0,0,.34);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.card::before,
.modal-card::before{display:none}

.btn{
  min-height:38px;
  padding:9px 13px;
  border:1px solid rgba(145,171,201,.15);
  border-radius:11px;
  background:#222c38;
  color:var(--text);
  box-shadow:none;
  font-weight:650;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.btn:hover{
  border-color:rgba(145,171,201,.25);
  background:#2b3745;
  box-shadow:none;
  transform:translateY(-1px);
}
.btn:active{transform:translateY(0) scale(.985)}
.btn.primary{
  border-color:rgba(105,159,219,.58);
  background:linear-gradient(135deg,#5c97da,#5189ca);
  color:#f7fbff;
}
.btn.primary:hover{
  border-color:rgba(125,178,233,.66);
  background:linear-gradient(135deg,#6aa4e4,#5a94d5);
}
.btn.danger{
  border-color:rgba(217,76,81,.38);
  background:rgba(217,76,81,.14);
  color:#f4a2a5;
}
.btn.danger:hover{background:rgba(217,76,81,.22)}
.btn.tiny{min-height:34px;padding:7px 11px;border-radius:11px}

.icon-btn{
  border-color:rgba(145,171,201,.13);
  border-radius:11px;
  background:#222b36;
}
.icon-btn:hover{
  border-color:rgba(145,171,201,.23);
  background:#2b3744;
}

.input,
.input:focus,
textarea.input{
  border:1px solid rgba(145,171,201,.14);
  border-radius:10px;
  background:#10161d;
  color:var(--text);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.input:focus,
textarea.input:focus{
  border-color:rgba(92,151,218,.66);
  box-shadow:0 0 0 3px rgba(92,151,218,.13);
}

.modal-backdrop{background:rgba(5,8,12,.76)}
.modal-card{
  overflow:hidden;
  border-radius:18px;
  background:#151b23;
}
.modal-head{
  padding:16px 18px;
  border-bottom:1px solid rgba(145,171,201,.11);
  background:#19212b;
}
.modal-title{color:#edf4fb;font-size:clamp(21px,2.2vw,30px);font-weight:750;letter-spacing:-.025em}
.modal-body{background:#131920}
.modal-body-actions{
  border-top-color:rgba(145,171,201,.10);
  background:transparent;
}
#btn-modal-close{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#222c38;
}
#btn-modal-close:hover{background:#2c3947}

/* Main chat surfaces keep the existing message layout. */
.chat-main{
  background:
    radial-gradient(820px 440px at 15% -12%, rgba(69,119,173,.11), transparent 62%),
    radial-gradient(720px 420px at 105% 108%, rgba(60,131,101,.07), transparent 66%),
    #151b22;
}
.messages{
  padding:10px 12px 4px;
  background:transparent;
  scrollbar-color:#26313e #151b22;
}
.messages::-webkit-scrollbar-track,
.scrollbar-chatlike::-webkit-scrollbar-track{background:#151b22}
.messages::-webkit-scrollbar-thumb,
.scrollbar-chatlike::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb:hover,
.scrollbar-chatlike::-webkit-scrollbar-thumb:hover{
  border-color:#151b22;
  background:#2a3542;
}
.msg-row{
  gap:10px;
  padding:2px 4px;
  border-radius:8px;
}
.msg-row:hover{background:rgba(145,171,201,.04)}
.msg-avatar{
  background:#10161d;
  box-shadow:none;
}
.bubble,
.msg-row.own .bubble{
  gap:6px;
  padding:4px 6px 6px;
  border:0;
  border-radius:7px;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.bubble-name{font-weight:650}
.composer{
  padding:10px 14px 14px;
  border-top:0;
  background:#151b22;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.composer-row{
  min-height:50px;
  padding:5px 7px;
  border:1px solid rgba(145,171,201,.10);
  border-radius:13px;
  background:#202a35;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.composer-row:focus-within,
.composer.composer-previewing .composer-row{
  border-color:rgba(92,151,218,.58);
  box-shadow:0 0 0 3px rgba(92,151,218,.11);
}
.composer-row .icon-btn{border-radius:11px}
.overlay-box,
.reply-bar,
.files-bar{
  border-radius:12px;
  background:#1a222c;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Custom backgrounds replace the default canvas and remain visible through UI surfaces. */
body[data-has-bg="1"]{background:#0b1015}
body[data-has-bg="1"] .chat-main{
  background:rgba(10,15,21,.58);
}
body[data-has-bg="1"] .messages{background:rgba(9,14,19,.24)}
body[data-has-bg="1"] .composer{background:rgba(12,18,24,.70)}
body[data-has-bg="1"] .sidebar,
body[data-has-bg="1"] .members-sidebar,
body[data-has-bg="1"] .sidebar:not(.members-sidebar){
  background:rgba(13,19,26,.78);
}
body[data-has-bg="1"] .rooms-block,
body[data-has-bg="1"] .me-pill-dock,
body[data-has-bg="1"] .online-pill{
  background:rgba(18,25,33,.72);
}
body[data-has-bg="1"] .members-sidebar .online-pill{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Navigation sidebar */
.chat-shell{
  --main-sidebar-w:272px;
  --members-sidebar-w:252px;
}
.sidebar,
.members-sidebar,
.sidebar:not(.members-sidebar){
  height:100%;
  min-height:0;
  overflow:hidden;
  padding:0;
  background:#11171e;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.sidebar:not(.members-sidebar){
  width:272px;
  grid-row:1 / -1;
  border-left:1px solid rgba(145,171,201,.09);
}
body[data-sidebar-position="left"] .sidebar:not(.members-sidebar){
  border-right:1px solid rgba(145,171,201,.09);
  border-left:0;
}
.sidebar:not(.members-sidebar) .side-scroll{
  height:100%;
  padding:11px 10px;
  gap:9px;
}
.sidebar-nav{gap:3px}
.side-btn,
.side-menu-btn,
.sidebar .icon-btn.side-menu-btn,
.sidebar .rooms-add{
  min-height:43px;
  grid-template-columns:30px minmax(0,1fr);
  column-gap:9px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#aeb9c7;
  box-shadow:none;
  transform:none;
  transition:background-color .13s ease, border-color .13s ease, color .13s ease;
}
.side-btn:hover,
.side-menu-btn:hover,
.sidebar .icon-btn.side-menu-btn:hover,
.sidebar .rooms-add:hover,
.room-row:hover,
.me-pill-dock:hover,
.rooms-block.rooms-toggleable:hover,
.time-display-card:hover{
  border-color:rgba(145,171,201,.08);
  background:#1c2530;
  color:#edf4fb;
  box-shadow:none;
  transform:none;
}
.side-btn:focus-visible,
.side-menu-btn:focus-visible,
.sidebar .icon-btn.side-menu-btn:focus-visible,
.sidebar .rooms-add:focus-visible{
  border-color:rgba(92,151,218,.42);
  background:rgba(76,139,205,.13);
  box-shadow:0 0 0 3px rgba(92,151,218,.10);
}
.side-btn.is-selected,
.side-menu-btn.is-selected,
.side-btn.active{
  border-color:rgba(92,151,218,.20);
  background:linear-gradient(90deg, rgba(76,139,205,.20), rgba(79,169,131,.10));
  color:#eff6fc;
}
.side-ico{color:#7f8c9c}
.side-btn:hover .side-ico,
.side-menu-btn:hover .side-ico,
.side-btn.is-selected .side-ico,
.side-menu-btn.is-selected .side-ico{color:#7db2e8}
.side-label,
#call-label{
  font-size:14px;
  font-weight:600;
  color:inherit;
}

.rooms-block{
  overflow:hidden;
  border:0;
  border-radius:11px;
  background:transparent;
}
.rooms-block.rooms-toggleable:hover{
  background:#151d26;
}
.rooms-head{
  min-height:36px;
  padding:9px 9px 7px;
  border-bottom:0;
}
.rooms-title{
  color:#728093;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rooms-mini{
  border:0;
  border-radius:999px;
  background:#202a35;
  color:#92a0b0;
}
.rooms-list{
  --rooms-row-h:62px;
  padding:3px;
  gap:2px;
}
.room-row{
  min-height:var(--rooms-row-h);
  padding:8px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
  transform:none;
}
.room-row:hover{
  border-color:rgba(145,171,201,.07);
  background:#1c2530;
}
.room-row.active{
  border-color:rgba(92,151,218,.18);
  background:linear-gradient(90deg, rgba(76,139,205,.19), rgba(79,169,131,.10));
}
.room-avatar{
  width:42px;
  height:42px;
  flex-basis:42px;
  border-color:rgba(145,171,201,.12);
  box-shadow:none;
}
.room-name{font-size:13px;font-weight:650}
.room-preview{color:#738092;font-size:11.5px}

.time-display-card{
  border:1px solid rgba(145,171,201,.09);
  border-radius:12px;
  background:#171f28;
}
.time-display-card .rooms-head{border-bottom:0}
.clock-body{padding:4px 12px 12px}
.clock-time{
  color:#dce8f4;
  font-size:clamp(28px, 12cqw, 44px);
  letter-spacing:-.045em;
}
.me-pill-dock{
  margin-top:0;
  padding:9px 10px;
  border:1px solid rgba(145,171,201,.09);
  border-radius:12px;
  background:#171f28;
}
.me-pill-dock .mini-avatar{width:36px;height:36px}
.me-pill-dock .me-name{font-size:14px;font-weight:650}

/* Compact member sidebar */
.members-sidebar{
  width:252px;
  flex:0 0 252px;
  border-right:1px solid rgba(145,171,201,.09);
  background:#11171e;
}
body[data-sidebar-position="left"] .members-sidebar{
  border-right:0;
  border-left:1px solid rgba(145,171,201,.09);
}
.members-sidebar .side-scroll{
  height:100%;
  padding:12px 9px;
  overscroll-behavior:contain;
  overflow-anchor:none;
}
.members-sidebar .online-pill{
  display:block;
  min-width:0;
  max-width:none;
  padding:0;
  border:0;
  background:transparent;
}
.members-sidebar .online-label{
  margin:0 0 6px;
  padding:4px 8px 9px;
  border-bottom:1px solid rgba(145,171,201,.08);
  color:#718094;
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.members-sidebar .online-list{gap:3px;overflow-anchor:none}
.members-sidebar .online-ava.member-row{
  min-height:54px;
  gap:11px;
  padding:7px 8px;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
  touch-action:manipulation;
}
.members-sidebar .online-ava.member-row:hover{
  border-color:rgba(145,171,201,.07);
  background:#1b2430;
}
.members-sidebar .online-ava-img,
.member-avatar-wrap{
  width:38px;
  height:38px;
  flex-basis:38px;
}
.member-status-dot{
  width:12px;
  height:12px;
  border:3px solid #11171e;
  background:#55b98a;
}
.member-status-dot[data-state="offline"]{background:#566273}
.member-status-dot[data-state="idle"]{background:#d3a661}
.member-name{color:#dce6f0;font-size:13px;font-weight:650}
.member-sub{color:#748194;font-size:11px}

/* Context and right-click menus */
.msg-menu{
  gap:3px;
  padding:7px;
  border:1px solid rgba(145,171,201,.14);
  border-radius:12px;
  background:#171f28;
  box-shadow:0 18px 48px rgba(0,0,0,.46);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.msg-menu-user{
  padding:6px 9px;
  color:#7c8999;
  font-weight:650;
}
.msg-menu-btn{
  min-height:38px;
  padding:8px 9px;
  border-radius:10px;
  color:#dce6f0;
  font-weight:600;
}
.msg-menu-btn:hover{
  background:linear-gradient(90deg, rgba(76,139,205,.17), rgba(79,169,131,.09));
  color:#eff6fc;
  box-shadow:none;
  transform:none;
}
.msg-menu-btn:focus-visible{
  background:rgba(76,139,205,.18);
  box-shadow:0 0 0 2px rgba(92,151,218,.12);
}
.msg-menu-icon{color:#91a0b1}
.msg-menu-label{color:inherit}

/* Settings modal */
.modal[data-size="settings"]{padding:clamp(12px,2vw,24px)}
.modal[data-size="settings"] .modal-card{
  width:min(1180px,100%);
  border:1px solid rgba(145,171,201,.13);
  border-radius:18px;
  background:#121820;
  box-shadow:0 28px 90px rgba(0,0,0,.64);
}
.modal[data-size="settings"] .modal-head{
  padding:16px 18px;
  border-bottom:1px solid rgba(145,171,201,.10);
  background:#19212b;
}
.modal[data-size="settings"] .modal-body{
  padding:20px;
  background:#121820;
}
.modal[data-size="settings"] .html-library-search-input{
  border-color:rgba(145,171,201,.13);
  border-radius:10px;
  background:#10161d;
}
.modal:has(#notepad-search-input) .html-library-search-input{
  border-color:rgba(145,171,201,.13);
  border-radius:10px;
  background:#10161d;
}
.settings-shell{gap:16px}
.settings-layout{gap:16px}
.settings-panel{
  border:1px solid rgba(145,171,201,.11);
  border-radius:14px;
  padding:17px;
  background:#19212b;
  box-shadow:none;
}
.settings-panel-title{color:#edf4fb;font-size:15px;font-weight:700}
.settings-panel-sub{color:#8290a2}
.settings-panel .label{color:#a0acbb}
.settings-media-upload,
.settings-control-card,
.settings-toggle-card{
  border:1px solid rgba(145,171,201,.10);
  border-radius:12px;
  background:#141b23;
}
.settings-banner-editor{
  border-color:rgba(145,171,201,.12);
  border-radius:13px;
  background:#10161d;
}
.settings-banner-clip{
  background:
    radial-gradient(420px 180px at 18% 0%, rgba(76,139,205,.22), transparent 60%),
    radial-gradient(360px 180px at 86% 100%, rgba(79,169,131,.13), transparent 62%),
    #151c24;
}
.settings-background-preview{
  border-color:rgba(145,171,201,.13);
  border-radius:15px;
  background:
    radial-gradient(760px 380px at 12% 0%, rgba(76,139,205,.21), transparent 60%),
    radial-gradient(620px 360px at 96% 100%, rgba(79,169,131,.13), transparent 62%),
    linear-gradient(145deg,#18212b,#10161d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.settings-background-preview-layer{transform-origin:center}
.settings-toggle-card{border-radius:12px;background:#161e27}
.toggle input:checked + .toggle-track,
input[type="checkbox"]:not(.toggle input):checked{
  border-color:rgba(96,165,136,.48);
  background:linear-gradient(135deg,#5c97da,#4fa983);
  box-shadow:0 7px 18px rgba(48,104,89,.22);
}
input[type="range"]::-webkit-slider-runnable-track{
  background:
    linear-gradient(90deg,
      #6aa4e4 0%,
      #4fa983 var(--range-pct,0%),
      rgba(145,171,201,.12) var(--range-pct,0%),
      rgba(145,171,201,.05) 100%);
}
input[type="range"]::-moz-range-progress{background:linear-gradient(90deg,#6aa4e4,#4fa983)}
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb{
  border-color:rgba(222,235,248,.44);
  background:linear-gradient(180deg,#edf5fc,#9dc1e7);
}

/* Time display */
.modal-card:has(.time-display-modal-ui){
  border-radius:18px;
  background:#141b23;
}
.time-display-modal-ui{gap:16px}
.time-display-modal-clock{
  padding:28px 20px 25px;
  border:1px solid rgba(145,171,201,.12);
  border-radius:16px;
  background:
    radial-gradient(580px 250px at 50% -24%, rgba(76,139,205,.20), transparent 66%),
    radial-gradient(420px 220px at 100% 120%, rgba(79,169,131,.11), transparent 68%),
    #19212b;
}
.time-display-modal-label{color:#8391a3}
.time-display-modal-time{
  color:#edf5fc;
  text-shadow:0 0 32px rgba(76,139,205,.15);
}
.time-display-modal-class{color:#aebac8}
.time-display-modal-timer{
  border-color:rgba(145,171,201,.11);
  border-radius:14px;
  background:#19212b;
}
.time-display-modal-progress{
  border-color:rgba(145,171,201,.10);
  background:#10161d;
}
.time-display-modal-progress-bar{background:linear-gradient(90deg,#5c97da,#4fa983)}

/* GIF provider attribution */
.gif-popover-inner{border-color:rgba(145,171,201,.12);background:#151b23}
.gif-head{display:flex;align-items:center;gap:8px;border-bottom-color:rgba(145,171,201,.10);background:#18202a}
.gif-search:focus{
  border-color:rgba(92,151,218,.62);
  box-shadow:0 0 0 3px rgba(92,151,218,.12);
}
.gif-key-button{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(145,171,201,.14);
  border-radius:10px;
  background:#222c38;
  color:#9fb0c3;
  cursor:pointer;
}
.gif-key-button:hover{border-color:rgba(92,151,218,.34);background:#2a3745;color:#dceafa}
.gif-attribution{
  padding:7px 10px 8px;
  border-top:1px solid rgba(145,171,201,.09);
  color:#748194;
  font-size:10px;
  font-weight:650;
  letter-spacing:.06em;
  text-align:right;
}
.gif-empty{
  min-height:140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#8290a2;
  text-align:center;
}
.gif-empty strong{color:#dce7f2}

/* Official KLIPY key setup */
.modal[data-size="klipy-setup"] .modal-card{width:min(620px,100%)}
.klipy-setup{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px 16px;align-items:start}
.klipy-setup-mark{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(92,151,218,.22);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(76,139,205,.24),rgba(79,169,131,.17));
  color:#dceafa;
  font-size:13px;
  font-weight:750;
}
.klipy-setup-copy h3{margin:2px 0 6px;color:#edf4fb;font-size:16px;font-weight:700}
.klipy-setup-copy p{margin:0;color:#8e9aaa;font-size:13px;line-height:1.5}
.klipy-setup > .label,
.klipy-key-input,
.klipy-setup-links{grid-column:1 / -1}
.klipy-setup-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.klipy-setup-links span{color:#758294;font-size:11px;line-height:1.4}

@media (max-width:980px){
  .call-menu{grid-column:1}
  .chat-main,
  body[data-sidebar-position="left"] .chat-main,
  body[data-members-sidebar="1"] .chat-main{
    grid-column:1;
    grid-row:2;
  }
}
@media (max-width:860px){
  .settings-layout,
  .settings-field-grid,
  .settings-toggle-grid{grid-template-columns:1fr}
}

.boot-error{
  position:fixed;
  inset:auto 16px 16px;
  z-index:2147483000;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:620px;
  margin:auto;
  padding:12px 14px;
  border:1px solid rgba(236,241,234,.11);
  border-radius:15px;
  background:#1a1d1f;
  color:var(--text);
  box-shadow:0 16px 42px rgba(0,0,0,.42);
}
.boot-error span{color:var(--muted);font-size:13px}
.boot-error button{
  margin-left:auto;
  border:0;
  border-radius:11px;
  padding:8px 11px;
  background:var(--primary);
  color:#07110b;
  font:inherit;
  font-weight:750;
  cursor:pointer;
}

/* ========================================================================== */
/* Unified responsive UI refresh (Home, Schedules, Rooms, Replies, and Calls) */
/* ========================================================================== */

:root{
  --ui-canvas:#151b22;
  --ui-panel:#19212b;
  --ui-panel-2:#202a35;
  --ui-panel-3:#11171e;
  --ui-border:rgba(145,171,201,.12);
  --ui-border-strong:rgba(145,171,201,.20);
  --ui-text:#edf4fb;
  --ui-muted:#8b99aa;
  --ui-blue:#5c97da;
  --ui-green:#55b98a;
}

.composer-hidden-page .composer,
.composer-hidden-page .typing-bar,
.composer-hidden-page .chat-overlays{
  display:none !important;
}
.composer-hidden-page .messages{
  padding:0;
  scroll-padding-bottom:0;
}
.messages{
  container-type:inline-size;
  container-name:content-pane;
}

/* Home */
.home-dash,
.home-dash.home-overhaul{
  width:min(100%, 1320px);
  max-width:1320px;
  min-height:100%;
  margin:0 auto;
  padding:clamp(18px, 3cqi, 34px);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.home-welcome{
  position:relative;
  overflow:hidden;
  min-height:136px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:clamp(20px, 3cqi, 34px);
  border:1px solid var(--ui-border);
  border-radius:18px;
  background:
    radial-gradient(560px 220px at 88% 0%, rgba(79,169,131,.15), transparent 70%),
    radial-gradient(500px 240px at 0% 0%, rgba(76,139,205,.20), transparent 68%),
    var(--ui-panel);
  box-shadow:0 14px 38px rgba(0,0,0,.18);
}
.home-welcome::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-90px;
  bottom:-140px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  pointer-events:none;
}
.home-welcome-copy{position:relative;z-index:1;min-width:0}
.home-eyebrow{
  margin-bottom:7px;
  color:#82b8ee;
  font-size:11px;
  font-weight:750;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.home-welcome-title{
  margin:0;
  color:var(--ui-text);
  font-size:clamp(23px, 3.2cqi, 35px);
  font-weight:750;
  line-height:1.12;
  letter-spacing:-.035em;
}
.home-welcome-sub{
  margin:8px 0 0;
  color:var(--ui-muted);
  font-size:13px;
  line-height:1.45;
}
.home-new-room{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 15px;
  border:1px solid rgba(107,166,225,.38);
  border-radius:12px;
  background:#4e8bca;
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(42,92,145,.24);
  transition:background .14s ease, transform .12s ease, box-shadow .14s ease;
}
.home-new-room:hover{background:#5a98d9;transform:translateY(-1px);box-shadow:0 14px 30px rgba(42,92,145,.30)}
.home-new-room:active{transform:translateY(0)}
.home-new-room:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(92,151,218,.20),0 12px 28px rgba(42,92,145,.26)}

.home-metrics{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.home-stat{
  min-width:0;
  min-height:0;
  flex:0 1 150px;
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:10px 13px;
  overflow:visible;
  border:1px solid var(--ui-border);
  border-radius:12px;
  background:var(--ui-panel);
  box-shadow:none;
}
.home-stat-value{
  margin:0;
  color:var(--ui-text);
  font-size:22px;
  font-weight:760;
  line-height:1;
  letter-spacing:-.035em;
}
.home-stat-label{
  color:var(--ui-muted);
  font-size:11px;
  font-weight:680;
  letter-spacing:.01em;
  text-transform:none;
}
.home-stat-note{display:none}
.home-workspace{display:block;width:100%}
.home-primary-panel{
  min-width:0;
  padding:18px;
  border:1px solid var(--ui-border);
  border-radius:18px;
  background:var(--ui-panel);
  box-shadow:0 14px 38px rgba(0,0,0,.14);
}
.home-panel-head{align-items:center;margin-bottom:13px}
.home-section-title{color:var(--ui-text);font-size:17px;font-weight:720;letter-spacing:-.015em}
.home-section-sub{margin-top:3px;color:var(--ui-muted);font-size:12px}
.home-controls{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid var(--ui-border);
  border-radius:14px;
  background:var(--ui-panel-3);
}
.home-search-wrap{
  min-width:220px;
  flex:1 1 320px;
  display:flex;
  align-items:center;
  gap:9px;
  padding-left:11px;
  color:#728297;
  border:1px solid transparent;
  border-radius:11px;
  background:#0f151c;
}
.home-search-wrap:focus-within{
  color:#8dbce8;
  border-color:rgba(92,151,218,.46);
  box-shadow:0 0 0 3px rgba(92,151,218,.10);
}
.home-search,
.home-search.input{
  min-height:40px;
  height:40px;
  padding:0 10px 0 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.home-search:focus{outline:0;box-shadow:none}
.home-filters{
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-end;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.home-filters::-webkit-scrollbar{display:none}
.home-filters .btn.tiny{
  min-height:34px;
  flex:0 0 auto;
  padding:7px 11px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#8d9aaa;
  font-size:11px;
  font-weight:680;
  box-shadow:none;
}
.home-filters .btn.tiny:hover{background:#202a35;color:#dfe9f3}
.home-filters .btn.tiny.primary{
  border-color:rgba(92,151,218,.22);
  background:rgba(76,139,205,.18);
  color:#dcecff;
}
.home-roomlist{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap:8px;
}
.home-room-row{
  min-width:0;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 11px;
  border:1px solid var(--ui-border);
  border-radius:13px;
  background:var(--ui-panel-2);
  box-shadow:none;
  transition:background .13s ease, border-color .13s ease, transform .13s ease;
}
.home-room-row:hover{
  border-color:rgba(92,151,218,.32);
  background:#263240;
  transform:translateY(-1px);
}
.home-room-row:active{transform:translateY(0)}
.home-room-left{
  min-width:0;
  flex:1 1 auto;
  flex-direction:row;
  align-items:center;
  gap:11px;
}
.home-room-left .room-avatar{width:42px;height:42px;flex:0 0 42px}
.home-room-main{min-width:0;justify-content:center}
.home-room-code{font-size:13.5px;font-weight:720;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-room-preview{
  width:100%;
  margin-top:4px;
  display:block;
  overflow:hidden;
  color:#7f8d9f;
  font-size:11.5px;
  line-height:1.25;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.home-room-preview-author{color:#a8b7c7;font-weight:680}
.home-room-preview-text{color:#7f8d9f}
.home-room-open{flex:0 0 auto;display:grid;place-items:center;color:#667588;transition:color .13s ease,transform .13s ease}
.home-room-row:hover .home-room-open{color:#91bde7;transform:translateX(2px)}
.home-empty-block{border-radius:13px;background:#141b23}
.home-foot{margin-top:10px;min-height:16px}

/* Schedules */
.sched-page{
  width:min(100%, 1360px);
  max-width:1360px;
  min-height:100%;
  margin:0 auto;
  padding:clamp(16px, 2.6cqi, 30px);
  gap:14px;
}
.sched-topcard{
  min-height:82px;
  padding:15px 17px;
  border:1px solid var(--ui-border);
  border-radius:16px;
  background:
    radial-gradient(440px 180px at 0% 0%, rgba(76,139,205,.13), transparent 72%),
    var(--ui-panel);
  box-shadow:0 12px 32px rgba(0,0,0,.16);
}
.sched-top-ico{
  width:42px;
  height:42px;
  border:1px solid rgba(92,151,218,.25);
  border-radius:11px;
  background:rgba(76,139,205,.13);
  color:#8dbce8;
}
.sched-title{color:var(--ui-text);font-size:17px;font-weight:730;letter-spacing:-.01em}
.sched-sub{color:var(--ui-muted);font-size:11.5px}
.sched-top-right{gap:12px;flex-wrap:nowrap}
.sched-preview-group{min-width:0;display:flex;align-items:center;gap:8px}
.sched-control-label{flex:0 0 auto;color:#788699;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sched-preview-days{
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  padding:3px;
  overflow-x:auto;
  border:1px solid var(--ui-border);
  border-radius:11px;
  background:#11171e;
  scrollbar-width:none;
}
.sched-preview-days::-webkit-scrollbar{display:none}
.sched-preview-btn{
  min-width:32px;
  height:32px;
  padding:0 9px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#8492a3;
  font-size:11px;
  font-weight:700;
  box-shadow:none;
}
.sched-preview-btn:hover{border-color:transparent;background:#202a35;color:#dce7f2}
.sched-preview-btn.is-active{
  border-color:rgba(92,151,218,.24);
  background:rgba(76,139,205,.20);
  color:#e3f0fd;
  box-shadow:none;
}
.sched-type-badge{
  flex:0 0 auto;
  gap:7px;
  min-height:40px;
  padding:5px 10px 5px 6px;
  border:1px solid rgba(79,169,131,.24);
  border-radius:11px;
  background:rgba(79,169,131,.11);
  box-shadow:none;
}
.sched-type-ico{width:28px;height:28px;border:0;background:rgba(7,15,12,.24);color:#72c99e}
.sched-type-text{color:#d9eee4;font-size:11.5px;font-weight:700}
.sched-split{
  display:grid;
  grid-template-columns:minmax(280px, 340px) minmax(0, 1fr);
  gap:14px;
  align-items:start;
}
.sched-card{
  min-width:0;
  padding:14px;
  border:1px solid var(--ui-border);
  border-radius:16px;
  background:var(--ui-panel);
  box-shadow:0 12px 32px rgba(0,0,0,.13);
}
.sched-card-title{
  margin:0 0 10px;
  color:#dce7f2;
  font-size:12px;
  font-weight:720;
  letter-spacing:.035em;
}
.sched-people-grid{grid-template-columns:1fr;gap:5px}
.sched-person-card{
  min-height:52px;
  padding:7px 8px;
  gap:10px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
}
.sched-person-card:hover{
  border-color:rgba(145,171,201,.10);
  background:var(--ui-panel-2);
  transform:none;
}
.sched-avatar{width:36px;height:36px;border-radius:50%;border:1px solid var(--ui-border-strong)}
.sched-person-name{color:#dfe9f3;font-size:12.5px;font-weight:680}
.sched-person-go{color:#69788b}
.sched-person-card:hover .sched-person-go{color:#8dbce8}
.sched-times,
.sched-grid{
  border:1px solid var(--ui-border);
  border-radius:12px;
  background:#141b23;
  scrollbar-color:#324050 #141b23;
}
.sched-times-head,
.sched-grid-head{
  padding:9px 11px;
  border-bottom:1px solid var(--ui-border);
  background:#11171e;
  color:#728094;
  font-size:10.5px;
  font-weight:700;
  backdrop-filter:none;
}
.sched-times-row,
.sched-grid-row{
  min-height:42px;
  padding:8px 11px;
  border-top:1px solid rgba(145,171,201,.08);
  color:#cdd8e3;
  font-size:12px;
}
.sched-times-row:first-of-type,
.sched-grid-row:first-of-type{border-top:0}
.sched-times-row:hover,
.sched-grid-row:hover{background:rgba(145,171,201,.04)}
.sched-times-row.is-active,
.sched-grid-row.is-active{background:linear-gradient(90deg,rgba(79,169,131,.12),rgba(76,139,205,.07))}
.sched-times-row.is-active .sched-times-period,
.sched-grid-row.is-active .sched-cell-period{color:#7dd1a8}
.sched-times-period,.sched-cell-period{font-weight:680}
.sched-times-time,.sched-times-dur,.sched-cell-time,.sched-cell-duration,.sched-cell-teacher,.sched-cell-room{color:#91a0b1}
.sched-view-head{
  min-height:42px;
  padding:4px;
  border:1px solid var(--ui-border);
  border-radius:12px;
  background:var(--ui-panel);
}
.sched-view-head .btn.tiny{border-radius:9px}
.sched-person-title{font-size:13px;font-weight:700}

/* Sidebar navigation and compact room list */
#btn-side-games .side-ico svg,
#btn-side-call .side-ico svg{width:23px;height:23px;display:block}
#btn-side-call{
  border-color:transparent;
  background:transparent;
  color:#aeb9c7;
}
#btn-side-call[data-call-state="none"]:hover{
  border-color:rgba(145,171,201,.08);
  background:#1c2530;
  color:#edf4fb;
}
#btn-side-call[data-call-state="none"]:focus-visible{
  border-color:rgba(92,151,218,.42);
  background:rgba(76,139,205,.13);
  color:#edf4fb;
}
#btn-side-call.call-active,
#btn-side-call.call-in{
  border-color:rgba(79,169,131,.20);
  background:rgba(79,169,131,.11);
  color:#dff4e9;
}
#btn-side-call.call-active .side-ico,
#btn-side-call.call-in .side-ico{color:#69d49e}
#btn-side-call .side-ico{position:relative}
#btn-side-call.call-active .side-ico::after,
#btn-side-call.call-in .side-ico::after{
  content:"";
  position:absolute;
  right:-2px;
  bottom:0;
  width:8px;
  height:8px;
  border:2px solid #11171e;
  border-radius:50%;
  background:var(--ui-green);
}
.rooms-block,
.rooms-block.rooms-toggleable{
  overflow:hidden;
  border:1px solid rgba(145,171,201,.07);
  border-radius:12px;
  background:rgba(17,23,30,.46);
  transform:none;
  box-shadow:none;
}
.rooms-block.rooms-toggleable:hover{background:rgba(17,23,30,.46);transform:none;box-shadow:none}
.rooms-head{
  min-height:42px;
  padding:8px 7px 6px 9px;
  border-bottom:0;
}
.rooms-head-copy{min-width:0;display:flex;flex-direction:column;gap:1px}
.rooms-title{
  color:#8795a7;
  font-size:10.5px;
  font-weight:730;
  line-height:1.15;
  letter-spacing:.085em;
  text-transform:uppercase;
}
.rooms-title::after{display:none !important}
.rooms-subtitle{
  overflow:hidden;
  color:#59687b;
  font-size:9.5px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.rooms-head-actions{display:flex;align-items:center;gap:3px}
.rooms-mini{
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0 6px;
  border:0;
  background:#202a35;
  color:#8997a8;
  font-size:10px;
  font-weight:680;
}
.rooms-mode-toggle{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#77879a;
  cursor:pointer;
  transition:background .13s ease,color .13s ease,transform .13s ease;
}
.rooms-mode-toggle:hover{background:#202a35;color:#b9c7d6}
.rooms-mode-toggle[aria-pressed="true"] svg{transform:rotate(180deg)}
.rooms-mode-toggle:focus-visible{outline:0;border-color:rgba(92,151,218,.35);box-shadow:0 0 0 3px rgba(92,151,218,.10)}
.rooms-list{
  --rooms-row-h:52px;
  max-height:min(36dvh, calc((var(--rooms-row-h) * 5) + 14px));
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 3px 5px;
  gap:2px;
  contain:none;
  scrollbar-width:thin;
  scrollbar-color:#2a3745 transparent;
}
.room-row{
  min-height:var(--rooms-row-h);
  padding:6px 7px;
  gap:8px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  contain:none;
  content-visibility:visible;
}
.room-row:hover{border-color:rgba(145,171,201,.07);background:#1c2530;box-shadow:none;transform:none}
.room-row.active{border-color:rgba(92,151,218,.18);background:linear-gradient(90deg,rgba(76,139,205,.18),rgba(79,169,131,.08))}
.room-left{gap:8px}
.room-avatar{width:36px;height:36px;flex:0 0 36px;border-color:rgba(145,171,201,.11)}
.room-content{display:flex;flex-direction:column;justify-content:center}
.room-name-row{gap:5px}
.room-name{
  font-size:12.5px;
  font-weight:680;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:normal;
  word-break:normal;
}
.room-markers{gap:3px}
.room-markers .room-pin-mark,.room-markers .room-lock-mark{width:14px;height:14px}
.room-markers svg{width:11px;height:11px}
.room-meta{margin-top:3px;display:block}
.room-preview{
  display:block;
  overflow:hidden;
  color:#6f7d90;
  font-size:10.5px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.room-preview-author{color:#9cabbc;font-weight:680}
.room-preview-text{color:#6f7d90}
.room-unread-badge{top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;font-size:9px}

/* Replies */
.msg-row.has-reply > .msg-avatar{margin-top:23px}
.reply-preview{
  isolation:isolate;
  min-height:22px;
  height:auto;
  max-width:min(720px,100%);
  margin-bottom:2px;
  gap:6px;
  overflow:visible;
}
.reply-preview > *{position:relative;z-index:2}
.reply-preview::before{
  left:-30px;
  top:9px;
  width:23px;
  height:9px;
  z-index:0;
  border-color:rgba(126,145,167,.40);
  border-radius:8px 0 0 0;
}

.time-display-rail-icon{display:none}
.time-display-rail-icon svg{width:24px;height:24px;display:block}
.reply-preview-avatar{
  z-index:3;
  isolation:isolate;
  flex:0 0 18px;
  overflow:hidden;
  background:#11171e;
  transform:none !important;
}
.reply-preview-avatar:hover,.reply-preview-avatar:active{transform:none !important}
.reply-preview-author{max-width:180px;color:#b9c9d9;font-size:11.5px;font-weight:700}
.reply-preview-snippet{color:#748296;font-size:11.5px}

/* Call panel and embedded screen sharing */
.share-menu{display:none !important}
.call-menu{
  padding:8px 10px 10px;
  background:#11171e;
}
.call-menu-card{
  width:min(100%, 1320px);
  height:clamp(280px, 36dvh, 420px);
  margin:0 auto;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid var(--ui-border);
  border-radius:16px;
  background:var(--ui-panel);
  box-shadow:0 16px 44px rgba(0,0,0,.27);
  container-type:inline-size;
  container-name:call-panel;
}
.call-menu-card:has(.call-menu-list.has-shares){height:clamp(340px, 52dvh, 620px)}
.call-menu-list:not(.has-shares) + .call-menu-foot{}
.call-menu-head{
  min-height:52px;
  padding:8px 9px 8px 14px;
  border-bottom:1px solid var(--ui-border);
  background:#151d26;
}
.call-menu-head-main{min-width:0;align-items:flex-start;flex-direction:column;gap:3px}
.call-menu-title{gap:8px;font-size:13px;font-weight:720}
.call-menu-status{color:#e4edf6}
.call-menu-meta{display:flex;align-items:center;gap:6px;color:#8290a2;font-size:10.5px}
.call-menu-meta-separator{color:#465568}
.call-menu-room{max-width:min(42cqi,340px);overflow:hidden;color:#6f7f92;text-overflow:ellipsis;white-space:nowrap}
.call-menu-head-actions{display:flex;align-items:center;gap:4px}
.call-menu-expand,
.call-menu-close{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#202a35;color:#a9b7c5}
.call-menu-expand:hover,.call-menu-close:hover{background:#2a3745;color:#edf4fb}
.call-expand-exit{display:none}
.call-menu-list{
  min-height:0;
  overflow:auto;
  padding:12px;
  scrollbar-width:thin;
  scrollbar-color:#334151 transparent;
}
.call-stage,
.call-stage-shares,
.call-stage-avatars{
  width:min(100%, 1180px);
  min-height:100%;
  height:auto;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.call-section-label{
  margin:0 0 6px 2px;
  color:#6f7e90;
  font-size:9.5px;
  font-weight:730;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.call-view-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:9px;
  place-content:center;
}
.call-view-grid[data-views="1"]{grid-template-columns:minmax(0,1fr);max-width:1040px;margin:auto}
.call-view-tile{
  min-width:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border:1px solid rgba(145,171,201,.16);
  border-radius:13px;
  background:#0c1117;
  box-shadow:0 12px 30px rgba(0,0,0,.20);
}
.call-view-head{
  min-width:0;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5px 6px 5px 10px;
  border-bottom:1px solid rgba(145,171,201,.10);
  background:#171f28;
}
.call-view-title{min-width:0;display:flex;align-items:center;gap:7px;color:#dbe6f0;font-size:11px;font-weight:680}
.call-view-title > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.call-view-live-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--ui-green);box-shadow:0 0 0 3px rgba(85,185,138,.12)}
.call-view-actions{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.call-view-action{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#8d9cad;
  cursor:pointer;
}
.call-view-action:hover{background:#263240;color:#edf4fb}
.call-view-action.call-view-close:hover{background:rgba(197,70,76,.18);color:#ffb2b5}
.call-view-action svg{width:15px;height:15px}
.call-view-body{
  position:relative;
  min-height:170px;
  aspect-ratio:16 / 9;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#070b0f;
}
.call-view-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#05080b}
.call-view-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#7d8b9b;
  font-size:11px;
}
.call-view-spinner{width:24px;height:24px;border:2px solid #2b3948;border-top-color:#69a7e4;border-radius:50%;animation:callViewSpin .8s linear infinite}
@keyframes callViewSpin{to{transform:rotate(360deg)}}
.call-share-offers,
.call-participants-section{width:100%}
.call-share-offer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),280px));
  justify-content:center;
  gap:8px;
}
.call-share-offer{
  position:relative;
  min-width:0;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid rgba(145,171,201,.12);
  border-radius:12px;
  background:#121922;
}
.call-share-offer .call-share-poster{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(76,139,205,.12),transparent 44%),#121922}
.call-share-offer .call-share-avatar{width:58px;height:58px;border:2px solid #334151;opacity:.58}
.call-share-offer .call-share-art{width:36px;height:36px;border-radius:10px;background:rgba(12,17,23,.90)}
.call-share-offer .call-share-art svg{width:19px;height:19px}
.call-share-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:12px;
  background:linear-gradient(180deg,transparent 28%,rgba(5,8,12,.88));
}
.call-share-offer .call-share-name{max-width:100%;color:#e3edf6;font-size:11px;font-weight:680;text-align:center}
.call-share-offer-actions{display:flex;align-items:center;justify-content:center;gap:5px}
.call-share-watch,
.call-share-multi{
  min-height:31px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(145,171,201,.18);
  border-radius:9px;
  background:#263240;
  color:#e7f0f8;
  font:inherit;
  font-size:10.5px;
  font-weight:700;
  cursor:pointer;
}
.call-share-watch{padding:0 12px;background:#4c8bcd;border-color:#5c9add;color:#fff}
.call-share-watch:hover{background:#5a99d9}
.call-share-multi{width:31px;padding:0;color:#a8c8e8}
.call-share-multi:hover{background:#314052;color:#e2f0fd}
.call-share-multi svg{width:16px;height:16px}
.call-participants-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(88px,112px));
  justify-content:center;
  gap:7px;
}
.call-participant{
  min-width:0;
  width:auto;
  min-height:106px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 6px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
}
.call-participant:hover{border-color:rgba(145,171,201,.09);background:rgba(145,171,201,.035)}
.call-user-avatar,
.call-stage-shares .call-user-avatar,
.call-menu-list.many-participants .call-user-avatar{
  width:68px;
  height:68px;
  border:3px solid #2b3745;
  box-shadow:0 8px 20px rgba(0,0,0,.24);
}
.call-menu-list[data-participants="1"]:not(.has-shares) .call-user-avatar{width:96px;height:96px}
.call-participant-name{width:100%;overflow:hidden;color:#aab8c7;font-size:10.5px;font-weight:650;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.call-participant-states{right:0;bottom:0;gap:2px}
.call-participant-state{width:21px;height:21px;margin-left:-5px;border:2px solid #19212b;background:#2a3745}
.call-participant-state svg{width:12px;height:12px}
.call-menu-foot{padding:8px 12px 9px;border-top:1px solid var(--ui-border);background:#151d26}
.call-audio-actions{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 7px}
.call-audio-actions:not(:has(.call-audio-action:not([hidden]))){display:none}
.call-audio-action{
  min-height:32px;
  padding:6px 11px;
  border:1px solid rgba(114,190,241,.34);
  border-radius:9px;
  background:rgba(62,132,179,.20);
  color:#d8edfb;
  font:700 11px/1.2 inherit;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.call-audio-action:hover{transform:translateY(-1px);border-color:rgba(114,190,241,.56);background:rgba(62,132,179,.31)}
.call-audio-action:focus-visible{outline:2px solid #79c7f4;outline-offset:2px}
.call-audio-resume{border-color:rgba(92,211,157,.40);background:rgba(43,153,105,.23);color:#ddfff0}
.call-audio-resume:hover{border-color:rgba(92,211,157,.62);background:rgba(43,153,105,.34)}
.call-menu-controls{gap:7px}
.call-control{
  width:44px;
  height:40px;
  border:1px solid rgba(145,171,201,.13);
  border-radius:12px;
  background:#222d39;
}
.call-control:hover{background:#2b3947}
.call-control-leave{width:50px;background:#b83f45;border-color:#c74a50}
.call-control-icon svg{width:19px;height:19px}

.call-menu.is-expanded{
  position:fixed;
  inset:0;
  z-index:2147482000;
  display:block;
  padding:12px;
  background:rgba(8,12,17,.96);
}
.call-menu.is-expanded .call-menu-card,
.call-menu.is-expanded .call-menu-card:has(.call-menu-list.has-shares){
  width:100%;
  max-width:1680px;
  height:100%;
  max-height:none;
  border-radius:18px;
}
.call-menu.is-expanded .call-expand-enter{display:none}
.call-menu.is-expanded .call-expand-exit{display:block}
.call-menu.is-expanded .call-view-grid[data-views="1"]{max-width:1450px}
.call-menu.is-expanded .call-view-body{max-height:calc(100dvh - 190px)}
.call-menu-list.is-focused .call-stage{height:100%;justify-content:stretch}
.call-menu-list.is-focused .call-view-grid{height:100%;max-width:none}
.call-menu-list.is-focused .call-view-tile{height:100%}
.call-menu-list.is-focused .call-view-body{aspect-ratio:auto;min-height:220px}
.call-menu-list.is-focused .call-share-offers,
.call-menu-list.is-focused .call-participants-section{display:none}

@container content-pane (max-width: 900px){
  .home-dash,.home-dash.home-overhaul,.sched-page{padding:16px}
  .sched-split{grid-template-columns:1fr}
  .sched-people-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .sched-topcard{align-items:flex-start;flex-direction:column}
  .sched-top-right{width:100%;justify-content:space-between}
}

@container content-pane (max-width: 620px){
  .home-welcome{min-height:0;align-items:flex-start;flex-direction:column;padding:20px}
  .home-new-room{width:100%}
  .home-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .home-stat{min-width:0;justify-content:center;padding:9px 7px}
  .home-stat-value{font-size:19px}
  .home-controls{align-items:stretch;flex-direction:column}
  .home-search-wrap{min-width:0;flex:0 0 auto}
  .home-filters{justify-content:flex-start}
  .home-primary-panel{padding:13px}
  .home-roomlist{grid-template-columns:1fr}
  .sched-top-right{align-items:stretch;flex-direction:column}
  .sched-preview-group{align-items:flex-start;flex-direction:column;gap:5px}
  .sched-preview-days{width:100%}
  .sched-type-badge{align-self:flex-start}
  .sched-people-grid{grid-template-columns:1fr}
  .sched-times{min-width:560px}
  .sched-card-times{overflow-x:auto}
}

@container call-panel (max-width: 720px){
  .call-menu-list{padding:8px}
  .call-view-grid{grid-template-columns:1fr}
  .call-share-offer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
  .call-participants-grid{grid-template-columns:repeat(auto-fit,minmax(74px,92px))}
  .call-user-avatar,.call-stage-shares .call-user-avatar,.call-menu-list.many-participants .call-user-avatar{width:58px;height:58px}
  .call-participant{min-height:92px}
}

@container call-panel (max-width: 470px){
  .call-menu-head{align-items:flex-start}
  .call-menu-room{max-width:42cqi}
  .call-view-head{align-items:flex-start}
  .call-view-title{padding-top:7px}
  .call-view-action{width:26px;height:26px}
  .call-menu-foot{padding:7px 5px 8px}
  .call-audio-actions{gap:4px;margin-bottom:6px}
  .call-audio-action{min-height:44px;padding:8px 10px;font-size:10px}
  .call-menu-controls{gap:3px}
  .call-control{width:44px;height:44px;border-radius:11px}
  .call-control-leave{width:48px}
}

@media (max-width:650px){
  .chat-shell,
  body[data-sidebar-position="left"] .chat-shell,
  body[data-sidebar-position="left"][data-members-sidebar="1"] .chat-shell,
  body[data-members-sidebar="1"] .chat-shell{
    --main-sidebar-w:72px;
    grid-template-columns:72px minmax(0,1fr) !important;
  }
  .sidebar:not(.members-sidebar),
  body[data-sidebar-position="left"] .sidebar:not(.members-sidebar){
    width:72px !important;
    grid-column:1 !important;
    grid-row:1 / -1 !important;
    border-right:1px solid rgba(145,171,201,.09);
    border-left:0;
  }
  .members-sidebar{display:none !important}
  .chat-main,
  body[data-sidebar-position="left"] .chat-main,
  body[data-members-sidebar="1"] .chat-main{
    grid-column:2 !important;
    grid-row:2 !important;
  }
  .call-menu,
  body[data-sidebar-position="left"] .call-menu,
  body[data-members-sidebar="1"] .call-menu,
  body[data-sidebar-position="left"][data-members-sidebar="1"] .call-menu{
    grid-column:2 !important;
    grid-row:1 !important;
  }
  .sidebar:not(.members-sidebar) .side-scroll{
    width:100%;
    padding:8px 6px;
    gap:7px;
    overflow-x:hidden;
  }
  .side-btn,
  .side-menu-btn,
  .sidebar .icon-btn.side-menu-btn,
  .sidebar .rooms-add{
    min-height:46px;
    grid-template-columns:1fr;
    padding:7px;
    border-radius:10px;
  }
  .side-label,#call-label{display:none}
  .side-ico{width:28px;height:28px;justify-self:center}
  .rooms-block,.rooms-block.rooms-toggleable{border:0;background:transparent}
  .rooms-block.rooms-toggleable:hover{background:transparent}
  .rooms-head{min-height:28px;justify-content:center;padding:2px}
  .rooms-head-copy,.rooms-mini{display:none}
  .rooms-mode-toggle{width:28px;height:28px}
  .rooms-list{max-height:min(34dvh,270px);align-items:center;padding:2px 0;gap:4px}
  .room-row{width:48px;min-height:48px;padding:5px;justify-content:center}
  .room-left{flex:0 0 auto}
  .room-avatar{width:38px;height:38px;flex-basis:38px}
  .room-content{display:none}
  .sidebar:not(.members-sidebar) .time-display-card{
    width:48px;
    min-height:48px;
    margin-inline:auto;
    padding:0;
    display:grid;
    place-items:center;
    color:#7f8c9c;
  }
  .sidebar:not(.members-sidebar) .time-display-card .rooms-head,
  .sidebar:not(.members-sidebar) .time-display-card .clock-body{display:none}
  .sidebar:not(.members-sidebar) .time-display-rail-icon{display:grid;place-items:center}
  .sidebar:not(.members-sidebar) .me-pill-dock{
    width:48px;
    min-width:0;
    height:48px;
    margin-inline:auto;
    padding:5px;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .sidebar:not(.members-sidebar) .me-pill-dock .me-meta{display:none}
  .sidebar:not(.members-sidebar) .me-pill-dock .mini-avatar{width:36px;height:36px}
  .call-menu{padding:6px}
  .call-menu.is-expanded{padding:6px}
  .call-menu-card,.call-menu-card:has(.call-menu-list.has-shares){height:clamp(300px,55dvh,590px);border-radius:13px}
}

/* Call roster refinement: screen tiles first, then every participant. */
.call-menu-card{
  --call-stage-tile-width:clamp(160px,17.5cqi,240px);
}
.call-menu-card:has(.call-menu-list.has-shares){height:clamp(300px,42dvh,480px)}
.call-menu-list{
  overflow:hidden;
  padding:12px;
}
.call-menu-list.is-crowded{overflow:auto}
.call-menu-list.is-crowded .call-roster-grid{
  --call-stage-tile-width:clamp(132px,12.5cqi,176px);
  align-content:safe center;
}
.call-stage.call-roster-grid{
  width:100%;
  max-width:100%;
  min-height:0;
  height:100%;
  margin:0;
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  align-content:center;
  justify-content:center;
  gap:clamp(8px,1cqi,14px);
}
.call-roster-grid[data-items="5"],
.call-roster-grid[data-items="6"],
.call-roster-grid[data-items="7"],
.call-roster-grid[data-items="8"]{--call-stage-tile-width:clamp(150px,15cqi,205px)}
.call-roster-grid[data-items="9"],
.call-roster-grid[data-items="10"],
.call-roster-grid[data-items="11"],
.call-roster-grid[data-items="12"]{--call-stage-tile-width:clamp(132px,12.5cqi,176px)}
.call-stage-tile{
  flex:0 1 var(--call-stage-tile-width);
  width:var(--call-stage-tile-width);
  max-width:100%;
  min-width:0;
  min-height:0;
  aspect-ratio:16 / 9;
}
.call-roster-grid .call-section-label{display:none}
.call-roster-grid .call-view-tile{
  position:relative;
  display:block;
  min-height:0;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:12px;
}
.call-roster-grid .call-view-head{
  position:absolute;
  z-index:4;
  inset:0 0 auto;
  min-height:36px;
  padding:4px 5px 4px 9px;
  border:0;
  background:linear-gradient(180deg,rgba(9,14,20,.96),rgba(9,14,20,.76) 72%,transparent);
}
.call-roster-grid .call-view-body{
  position:absolute;
  inset:0;
  min-height:0;
  aspect-ratio:auto;
}
.call-roster-grid .call-view-placeholder{padding-top:30px}
.call-roster-grid .call-share-offer{
  height:auto;
  aspect-ratio:16 / 9;
}
.call-roster-grid .call-participant{
  width:var(--call-stage-tile-width);
  min-height:0;
  aspect-ratio:16 / 9;
  gap:6px;
  padding:9px;
  border:1px solid rgba(145,171,201,.12);
  border-radius:12px;
  background:#202832;
}
.call-roster-grid .call-participant:hover{
  border-color:rgba(125,178,232,.24);
  background:#25303b;
}
.call-roster-grid .call-user-avatar,
.call-roster-grid.call-stage-shares .call-user-avatar,
.call-menu-list.many-participants .call-roster-grid .call-user-avatar{
  width:68px;
  height:68px;
}
.call-roster-grid .call-participant-name{max-width:90%}

/* The enlarged call scales the complete interface, not only its shell. */
.call-menu.is-expanded .call-menu-head{
  min-height:70px;
  padding:12px 14px 12px 20px;
}
.call-menu.is-expanded .call-menu-title{font-size:16px}
.call-menu.is-expanded .call-menu-meta{gap:8px;font-size:12.5px}
.call-menu.is-expanded .call-menu-expand,
.call-menu.is-expanded .call-menu-close{width:42px;height:42px;flex-basis:42px;border-radius:12px}
.call-menu.is-expanded .call-menu-expand svg,
.call-menu.is-expanded .call-menu-close svg{width:21px;height:21px}
.call-menu.is-expanded .call-menu-list{overflow:auto;padding:clamp(18px,2cqi,30px)}
.call-menu.is-expanded .call-stage.call-roster-grid{
  --call-stage-tile-width:clamp(260px,21cqi,390px);
  width:min(100%,1600px);
  max-width:1600px;
  gap:clamp(14px,1.4cqi,24px);
}
.call-menu.is-expanded .call-menu-list.is-crowded .call-roster-grid{
  --call-stage-tile-width:clamp(200px,15cqi,270px);
}
.call-menu.is-expanded .call-roster-grid[data-items="5"],
.call-menu.is-expanded .call-roster-grid[data-items="6"],
.call-menu.is-expanded .call-roster-grid[data-items="7"],
.call-menu.is-expanded .call-roster-grid[data-items="8"]{--call-stage-tile-width:clamp(230px,18cqi,320px)}
.call-menu.is-expanded .call-roster-grid[data-items="9"],
.call-menu.is-expanded .call-roster-grid[data-items="10"],
.call-menu.is-expanded .call-roster-grid[data-items="11"],
.call-menu.is-expanded .call-roster-grid[data-items="12"]{--call-stage-tile-width:clamp(200px,15cqi,270px)}
.call-menu.is-expanded .call-roster-grid .call-participant{gap:11px;padding:16px;border-radius:16px}
.call-menu.is-expanded .call-roster-grid .call-user-avatar,
.call-menu.is-expanded .call-roster-grid.call-stage-shares .call-user-avatar,
.call-menu.is-expanded .call-menu-list.many-participants .call-roster-grid .call-user-avatar{
  width:clamp(92px,8cqi,132px);
  height:clamp(92px,8cqi,132px);
  border-width:4px;
}
.call-menu.is-expanded .call-participant-name{font-size:13px}
.call-menu.is-expanded .call-participant-state{width:28px;height:28px;border-width:3px}
.call-menu.is-expanded .call-participant-state svg{width:15px;height:15px}
.call-menu.is-expanded .call-share-offer .call-share-avatar{width:82px;height:82px}
.call-menu.is-expanded .call-share-offer .call-share-art{width:48px;height:48px;border-radius:13px}
.call-menu.is-expanded .call-share-offer .call-share-art svg{width:24px;height:24px}
.call-menu.is-expanded .call-share-offer .call-share-name{font-size:13px}
.call-menu.is-expanded .call-share-watch,
.call-menu.is-expanded .call-share-multi{min-height:38px;font-size:12px;border-radius:10px}
.call-menu.is-expanded .call-share-multi{width:38px}
.call-menu.is-expanded .call-roster-grid .call-view-head{min-height:48px;padding:7px 8px 7px 13px}
.call-menu.is-expanded .call-view-title{font-size:13px}
.call-menu.is-expanded .call-view-action{width:36px;height:36px;border-radius:10px}
.call-menu.is-expanded .call-view-action svg{width:18px;height:18px}
.call-menu.is-expanded .call-menu-foot{padding:12px 16px 14px}
.call-menu.is-expanded .call-menu-controls{gap:10px}
.call-menu.is-expanded .call-control{width:54px;height:50px;border-radius:14px}
.call-menu.is-expanded .call-control-leave{width:62px}
.call-menu.is-expanded .call-control-icon svg{width:23px;height:23px}

@container call-panel (max-width:720px){
  .call-stage.call-roster-grid{
    --call-stage-tile-width:clamp(142px,31cqi,200px);
    gap:8px;
  }
  .call-roster-grid .call-participant{gap:4px;padding:7px}
  .call-roster-grid .call-user-avatar,
  .call-roster-grid.call-stage-shares .call-user-avatar,
  .call-menu-list.many-participants .call-roster-grid .call-user-avatar{width:54px;height:54px}
  .call-menu-list[data-participants="1"]:not(.has-shares) .call-roster-grid .call-user-avatar{width:54px;height:54px}
  .call-menu.is-expanded .call-menu-list[data-participants="1"]:not(.has-shares) .call-roster-grid .call-user-avatar{width:82px;height:82px}
}

@container call-panel (max-width:470px){
  .call-menu-list{padding:8px}
  .call-stage.call-roster-grid{--call-stage-tile-width:max(128px,calc((100% - 7px)/2));gap:7px}
  .call-roster-grid .call-view-head{min-height:32px;padding:3px 4px 3px 7px}
  .call-roster-grid .call-view-title{gap:4px;font-size:9px}
  .call-roster-grid .call-view-action{width:24px;height:24px;border-radius:7px}
  .call-roster-grid .call-view-action svg{width:13px;height:13px}
  .call-roster-grid .call-user-avatar,
  .call-roster-grid.call-stage-shares .call-user-avatar,
  .call-menu-list.many-participants .call-roster-grid .call-user-avatar{width:46px;height:46px;border-width:2px}
  .call-menu-list[data-participants="1"]:not(.has-shares) .call-roster-grid .call-user-avatar{width:46px;height:46px}
  .call-roster-grid .call-participant-name{font-size:9px}
  .call-roster-grid .call-share-overlay{gap:4px;padding:7px}
  .call-roster-grid .call-share-watch,
  .call-roster-grid .call-share-multi{min-height:27px;font-size:9px}
  .call-roster-grid .call-share-multi{width:27px}
}

/* Focus replaces the call contents while remaining inside the call card. */
.call-menu-card:has(.call-menu-list.is-focused){
  max-height:calc(100dvh - 16px);
  grid-template-rows:minmax(0,1fr);
}
.call-menu-card:has(.call-menu-list.is-focused) > .call-menu-head,
.call-menu-card:has(.call-menu-list.is-focused) > .call-menu-foot{display:none}
.call-menu-list.is-focused{padding:0;overflow:hidden}
.call-menu-list.is-focused .call-stage.call-roster-grid{
  width:100%;
  max-width:none;
  height:100%;
  display:block;
}
.call-menu-list.is-focused .call-stage-tile.call-view-tile.is-focused{
  width:100%;
  max-width:none;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  border:0;
  border-radius:15px;
  box-shadow:none;
}
.call-menu-list.is-focused .call-view-body{
  position:absolute;
  inset:0;
  min-height:0;
  aspect-ratio:auto;
}
.call-menu-list.is-focused .call-view-head{
  min-height:50px;
  padding:8px 10px 8px 14px;
  border:0;
  background:transparent;
  box-shadow:none;
}
.call-menu-list.is-focused .call-view-title{font-size:12px}
.call-menu-list.is-focused .call-view-action{width:34px;height:34px}
.call-menu.is-expanded .call-menu-card:has(.call-menu-list.is-focused){height:100%}
.call-menu.is-expanded .call-menu-list.is-focused{padding:0;overflow:hidden}
.call-menu.is-expanded .call-menu-list.is-focused .call-view-body{
  width:100%;
  height:100%;
  max-height:none;
  inset:0;
}
.call-menu.is-expanded .call-menu-list.is-focused .call-view-video{object-position:center center}
.call-menu.is-expanded .call-menu-list.is-focused .call-view-head{min-height:58px;padding:10px 13px 10px 18px}
.call-menu.is-expanded .call-menu-list.is-focused .call-view-title{font-size:14px}
.call-menu.is-expanded .call-menu-list.is-focused .call-view-action{width:40px;height:40px}

@container call-panel (max-width:470px){
  .call-menu.is-expanded .call-menu-foot{padding:7px 5px 8px}
  .call-menu.is-expanded .call-menu-controls{gap:3px}
  .call-menu.is-expanded .call-control{width:44px;height:44px;border-radius:11px}
  .call-menu.is-expanded .call-control-leave{width:48px}
  .call-menu.is-expanded .call-control-icon svg{width:18px;height:18px}
  .call-menu .call-menu-list.is-focused .call-view-action{width:44px;height:44px}
  .call-menu.is-expanded .call-roster-grid .call-participant{gap:5px;padding:9px}
  .call-menu.is-expanded .call-roster-grid .call-user-avatar,
  .call-menu.is-expanded .call-roster-grid.call-stage-shares .call-user-avatar,
  .call-menu.is-expanded .call-menu-list.many-participants .call-roster-grid .call-user-avatar{width:64px;height:64px;border-width:3px}
  .call-menu.is-expanded .call-menu-list[data-participants="1"]:not(.has-shares) .call-roster-grid .call-user-avatar{width:64px;height:64px}
}

/* Preserve text descenders in compact, clipped labels throughout the UI. */
body{line-height:1.35}
:is(
  .bubble-name,
  .member-name,
  .sched-person-name,
  .sched-person-title,
  .room-name,
  .room-preview,
  .rooms-subtitle,
  .reply-preview-author,
  .reply-preview-snippet,
  .reply-target-message,
  .me-name,
  .me-code,
  .me-pill-dock .me-name,
  .me-pill-dock .me-code,
  .home-room-code,
  .home-room-preview,
  .call-participant-name,
  [data-display-name-usercode]
){
  min-height:1.35em;
  line-height:1.35;
}

/* Participant tiles may grow just enough to keep their full name visible. */
.call-roster-grid .call-participant{min-height:max-content}
.call-participant-name{flex:0 0 auto}

/* Sharing must not override the speaking ring later in the cascade. */
.call-roster-grid.call-stage-shares .call-user-avatar.speaking,
.call-menu-list.many-participants .call-roster-grid .call-user-avatar.speaking{
  border-color:#55b98a;
  box-shadow:0 0 0 4px rgba(85,185,138,.16),0 10px 24px rgba(0,0,0,.34);
  transform:scale(1.025);
}

/* One crop coordinate system for every user avatar, independent of frame size. */
[data-avatar-usercode]{position:relative;overflow:hidden}
[data-avatar-usercode] > img,
img[data-avatar-usercode]{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform-origin:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* Live screen-viewer indicator and rich tooltip. */
.call-view-title-block{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.call-view-title-block .call-view-title{max-width:100%}
.call-viewers-eye{
  position:relative;
  flex:0 0 auto;
  cursor:default;
}
.call-viewers-eye svg{width:15px;height:15px}
.call-viewers-eye:hover,
.call-viewers-eye:focus-visible{
  outline:none;
  background:#263240;
  color:#edf4fb;
}
.call-viewers-tooltip{
  position:absolute;
  z-index:12;
  left:0;
  top:calc(100% + 6px);
  width:max-content;
  min-width:92px;
  max-width:320px;
  max-width:min(320px,calc(100cqi - 20px));
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:#0d1319;
  color:#f1f6fb;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.call-viewers-eye:hover > .call-viewers-tooltip,
.call-viewers-eye:focus-visible > .call-viewers-tooltip{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.call-viewers-label{
  margin-bottom:6px;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}
.call-viewers-row{
  max-width:100%;
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  gap:5px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:1px 0 3px;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(145,171,201,.34) transparent;
}
.call-viewers-row::-webkit-scrollbar{height:4px}
.call-viewers-row::-webkit-scrollbar-track{background:transparent}
.call-viewers-row::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(145,171,201,.34)}
.call-viewer-avatar{
  position:relative;
  width:28px;
  height:28px;
  flex:0 0 28px;
  overflow:hidden;
  border:1px solid rgba(145,171,201,.24);
  border-radius:50%;
  background:#202a35;
  box-shadow:0 3px 10px rgba(0,0,0,.24);
  cursor:default;
}
.call-viewers-empty{color:#8f9dac;font-size:10.5px;white-space:nowrap}
.call-viewers-floating{
  position:fixed;
  z-index:10020;
  width:max-content;
  max-width:calc(100vw - 16px);
  pointer-events:none;
}
.call-viewers-floating[hidden]{display:none}
.call-viewers-floating .call-viewers-tooltip{
  position:relative;
  inset:auto;
  width:max-content;
  max-width:min(520px,calc(100vw - 16px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.call-viewers-floating.is-visible .call-viewers-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.call-menu-list.is-focused .call-view-title-block{gap:3px}
.call-menu-list.is-focused .call-view-head{z-index:9;align-items:flex-start}
.call-menu-list.is-focused .call-viewers-tooltip{max-width:340px;max-width:min(340px,calc(100cqi - 32px))}

@container call-panel (max-width:470px){
  .call-viewer-avatar{width:24px;height:24px;flex-basis:24px}
  .call-viewers-tooltip{padding:7px}
}

/* ========================================================================== */
/* Automatic iOS / Android UI                                                 */
/* ========================================================================== */

.mobile-nav-toggle,
.mobile-drawer-scrim{display:none}

body[data-mobile-ui="1"]{
  min-width:0;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}

body[data-mobile-ui="1"] .chat-shell,
body[data-mobile-ui="1"][data-sidebar-position="left"] .chat-shell,
body[data-mobile-ui="1"][data-members-sidebar="1"] .chat-shell,
body[data-mobile-ui="1"][data-sidebar-position="left"][data-members-sidebar="1"] .chat-shell{
  width:100%;
  height:var(--mobile-viewport-height, 100dvh);
  min-height:0;
  grid-template-columns:minmax(0, 1fr) !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
}

body[data-mobile-ui="1"] .chat-main,
body[data-mobile-ui="1"][data-sidebar-position="left"] .chat-main,
body[data-mobile-ui="1"][data-members-sidebar="1"] .chat-main{
  width:100%;
  min-width:0;
  grid-column:1 !important;
  grid-row:2 !important;
}

body[data-mobile-ui="1"] .call-menu,
body[data-mobile-ui="1"][data-sidebar-position="left"] .call-menu,
body[data-mobile-ui="1"][data-members-sidebar="1"] .call-menu{
  grid-column:1 !important;
  grid-row:1 !important;
}

body[data-mobile-ui="1"] .chat-top,
body[data-mobile-ui="1"][data-room-view="1"] .chat-top{
  flex:0 0 auto;
  min-height:calc(56px + env(safe-area-inset-top));
  display:flex;
  align-items:center;
  gap:10px;
  padding:calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  border-bottom:1px solid rgba(145,171,201,.10);
  background:#151d26;
}

body[data-mobile-ui="1"] .mobile-nav-toggle{
  display:grid;
  place-items:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  padding:0;
  border-radius:11px;
}

body[data-mobile-ui="1"] .room-info{min-width:0}
body[data-mobile-ui="1"] .room-title,
body[data-mobile-ui="1"] .room-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

body[data-mobile-ui="1"] .sidebar:not(.members-sidebar),
body[data-mobile-ui="1"][data-sidebar-position="left"] .sidebar:not(.members-sidebar){
  position:fixed;
  z-index:100130;
  inset:0 auto 0 0;
  width:min(86vw, 320px) !important;
  height:var(--mobile-viewport-height, 100dvh);
  display:flex !important;
  grid-column:auto !important;
  grid-row:auto !important;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  border:0;
  border-right:1px solid rgba(145,171,201,.16);
  box-shadow:20px 0 60px rgba(0,0,0,.48);
  transform:translate3d(-105%,0,0);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

body[data-mobile-ui="1"][data-mobile-nav="1"] .sidebar:not(.members-sidebar){transform:translate3d(0,0,0)}

body[data-mobile-ui="1"] .sidebar:not(.members-sidebar) .side-scroll{
  width:100%;
  height:100%;
  padding:12px !important;
  gap:9px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}

body[data-mobile-ui="1"] .side-btn,
body[data-mobile-ui="1"] .side-menu-btn,
body[data-mobile-ui="1"] .sidebar .icon-btn.side-menu-btn,
body[data-mobile-ui="1"] .sidebar .rooms-add{
  width:100%;
  min-height:48px;
  grid-template-columns:34px minmax(0,1fr);
  justify-content:start;
  padding:7px 10px;
}

body[data-mobile-ui="1"] .side-label{display:inline !important}
body[data-mobile-ui="1"] #call-label{display:inline !important}
body[data-mobile-ui="1"] .side-ico{width:30px;height:30px;justify-self:start}
body[data-mobile-ui="1"] .rooms-block,
body[data-mobile-ui="1"] .rooms-block.rooms-toggleable{border:1px solid rgba(145,171,201,.09);background:#171f28}
body[data-mobile-ui="1"] .rooms-head{min-height:40px;justify-content:space-between;padding:6px 8px}
body[data-mobile-ui="1"] .rooms-head-copy,
body[data-mobile-ui="1"] .rooms-mini{display:flex !important}
body[data-mobile-ui="1"] .rooms-list{width:100%;max-height:min(36dvh,320px);align-items:stretch;padding:4px;gap:4px}
body[data-mobile-ui="1"] .room-row{width:100%;min-height:50px;padding:6px 8px;justify-content:flex-start}
body[data-mobile-ui="1"] .room-left{flex:1 1 auto;min-width:0}
body[data-mobile-ui="1"] .room-content{display:block !important}
body[data-mobile-ui="1"] .sidebar:not(.members-sidebar) .me-pill-dock{width:100%;height:auto;display:grid;grid-template-columns:38px minmax(0,1fr);justify-items:start;padding:9px 10px}
body[data-mobile-ui="1"] .sidebar:not(.members-sidebar) .me-pill-dock .me-meta{display:block !important}

body[data-mobile-ui="1"] .members-sidebar,
body[data-mobile-ui="1"][data-sidebar-position="left"] .members-sidebar{
  position:fixed;
  z-index:100140;
  inset:0 0 0 auto;
  width:min(86vw, 320px) !important;
  height:var(--mobile-viewport-height, 100dvh);
  flex:0 0 auto;
  grid-column:auto !important;
  grid-row:auto !important;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  border:0;
  border-left:1px solid rgba(145,171,201,.16);
  background:#11171e;
  box-shadow:-20px 0 60px rgba(0,0,0,.48);
  animation:mobile-drawer-in .18s cubic-bezier(.2,.8,.2,1) both;
}

body[data-mobile-ui="1"][data-members-sidebar="1"] .members-sidebar{display:flex !important}

@keyframes mobile-drawer-in{
  from{transform:translate3d(105%,0,0)}
  to{transform:translate3d(0,0,0)}
}

body[data-mobile-ui="1"] .mobile-drawer-scrim{
  position:fixed;
  z-index:100120;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:rgba(2,6,10,.62);
  -webkit-tap-highlight-color:transparent;
}

body[data-mobile-ui="1"][data-mobile-nav="1"] .mobile-drawer-scrim,
body[data-mobile-ui="1"][data-members-sidebar="1"] .mobile-drawer-scrim{display:block}

body[data-mobile-ui="1"] .messages{
  padding:8px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body[data-mobile-ui="1"] .msg-row{gap:8px;padding:6px 2px;scroll-margin-block:8px}
body[data-mobile-ui="1"] .msg-avatar{width:34px;height:34px}
body[data-mobile-ui="1"] .bubble,
body[data-mobile-ui="1"] .bubble.has-attachments{max-width:calc(100% - 42px)}
body[data-mobile-ui="1"] .bubble-text{font-size:15px;line-height:1.48}

body[data-mobile-ui="1"] .composer{
  gap:7px;
  padding:8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
body[data-mobile-ui="1"] .composer-row{min-height:52px;gap:3px;padding:5px}
body[data-mobile-ui="1"] .composer-row .icon-btn{width:40px;min-width:40px;height:40px}
body[data-mobile-ui="1"] .composer-input,
body[data-mobile-ui="1"] input,
body[data-mobile-ui="1"] textarea,
body[data-mobile-ui="1"] select{font-size:16px}
body[data-mobile-ui="1"] #btn-send{min-width:42px;height:42px;padding:0 12px}

body[data-mobile-ui="1"] .emoji-popover,
body[data-mobile-ui="1"] .gif-popover,
body[data-mobile-ui="1"] .voice-popover{
  right:max(4px, env(safe-area-inset-right));
  left:max(4px, env(safe-area-inset-left));
  width:auto;
  max-width:none;
  height:min(430px, calc(var(--mobile-viewport-height, 100dvh) - 150px));
}

body[data-mobile-ui="1"] .icon-btn.att-dl{opacity:1;visibility:visible;pointer-events:auto}

body[data-mobile-ui="1"] .msg-menu{
  min-width:min(230px, calc(100vw - 20px));
  max-height:calc(var(--mobile-viewport-height, 100dvh) - 20px);
}
body[data-mobile-ui="1"] .msg-menu-btn{min-height:46px;font-size:15px}

body[data-mobile-ui="1"] .modal{
  height:var(--mobile-viewport-height, 100dvh);
  padding:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}
body[data-mobile-ui="1"] .modal-card,
body[data-mobile-ui="1"] .modal[data-size="settings"] .modal-card{
  width:100%;
  min-height:0;
  max-height:100%;
  border-radius:14px;
}
body[data-mobile-ui="1"] .modal-head{gap:8px;padding:12px}
body[data-mobile-ui="1"] .modal-body,
body[data-mobile-ui="1"] .modal[data-size="settings"] .modal-body{padding:12px}
body[data-mobile-ui="1"] .html-library-titlebar{grid-template-columns:minmax(0,1fr);gap:8px}
body[data-mobile-ui="1"] .html-library-search-input,
body[data-mobile-ui="1"] .modal[data-size="html-library"] .html-library-search-input{width:100%;min-width:0;font-size:16px}
body[data-mobile-ui="1"] .modal:has(#notepad-editor) .modal-body > div > div:first-child{grid-template-columns:1fr 1fr !important}
body[data-mobile-ui="1"] #notepad-filename{grid-column:1 / -1}
body[data-mobile-ui="1"] #notepad-editor-wrap,
body[data-mobile-ui="1"] #notepad-editor,
body[data-mobile-ui="1"] #notepad-search-overlay{min-height:260px !important}

body[data-mobile-ui="1"] .user-profile-popover{
  max-width:calc(100vw - 16px);
  max-height:calc(var(--mobile-viewport-height, 100dvh) - 16px);
}

@media (max-width:420px){
  body[data-mobile-ui="1"] .composer-row .icon-btn{width:36px;min-width:36px;height:40px}
  body[data-mobile-ui="1"] .composer-row{gap:1px}
  body[data-mobile-ui="1"] #btn-send{min-width:38px;padding:0 9px}
  body[data-mobile-ui="1"] .room-title{font-size:16px}
}

@media (orientation:landscape) and (max-height:520px){
  body[data-mobile-ui="1"] .chat-top,
  body[data-mobile-ui="1"][data-room-view="1"] .chat-top{min-height:48px;padding-top:max(4px, env(safe-area-inset-top));padding-bottom:4px}
  body[data-mobile-ui="1"] .mobile-nav-toggle{width:40px;height:40px;flex-basis:40px}
  body[data-mobile-ui="1"] .composer{padding-top:5px;padding-bottom:max(5px, env(safe-area-inset-bottom))}
}