/* css/modals.css — loaded in index.html cascade order. */
/* 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-hub-titlebar{
  width:100%;
  display:grid;
  grid-template-columns:max-content minmax(220px, 340px);
  align-items:center;
  gap:14px;
  min-width:0;
}

.html-hub-title-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.html-hub-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-hub-search-input::placeholder{color:var(--muted)}

.html-hub-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-hub-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-activities{
  margin-top:7px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
  min-width:0;
  width:100%;
}

.user-profile-activity{
  margin-top:0;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  width:100%;
  max-width:100%;
  color:#62c091;
  font-size:13px;
  font-weight:650;
}

.user-profile-activity .html-activity-icon{
  margin-right:-2px;
}

.user-profile-activity[data-activity-kind="schedule"]{
  color:#8dbce8;
}

.user-profile-activity-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.user-profile-activity[data-activity-kind="playing"] .user-profile-activity-text{
  white-space:normal;
  overflow-wrap:anywhere;
}

.html-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;
  width:18px;
  height:18px;
}

.html-activity-icon svg{
  display:block;
  width:100%;
  height:100%;
}

.schedule-activity-icon{
  flex:0 0 auto;
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#8dbce8;
  line-height:1;
}

.schedule-activity-icon svg{
  width:16px;
  height:16px;
  display:block;
}

.user-profile-classmates{
  margin-top:14px;
  border:1px solid rgba(145,171,201,.10);
  background:#19212b;
  border-radius:11px;
  padding:12px 13px;
  color:#dce6f0;
}

.user-profile-classmates-label{
  font-size:12px;
  font-weight:750;
  line-height:1.2;
  color:#dce6f0;
}

.user-profile-classmates-row{
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  gap:7px;
  margin-top:9px;
}

.user-profile-classmate{
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:block;
  cursor:default;
}

.user-profile-classmate-avatar{
  position:relative;
  width:34px;
  height:34px;
  display:block;
  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);
}

.user-profile-classmate-avatar img,
.call-viewer-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-classmate-username{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:calc(100% + 7px);
  width:max-content;
  max-width:180px;
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  background:#0d1319;
  color:#f1f6fb;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
  font-size:10.5px;
  font-weight:650;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,4px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}

.user-profile-classmate:hover > .user-profile-classmate-username{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.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,
.message-seen-avatar,
.sched-avatar,
.reply-preview-avatar,
.tip-ava,
.online-ava-img{
  cursor:pointer;
}

.msg-avatar,
.message-seen-avatar,
.sched-avatar,
.reply-preview-avatar,
.tip-ava,
.online-ava-img{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

.msg-avatar:hover,
.message-seen-avatar:hover,
.message-seen-avatar:focus-visible,
.sched-avatar:hover,
.reply-preview-avatar: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,
.message-seen-avatar:active,
.sched-avatar:active,
.reply-preview-avatar: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-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) */

.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; }