/*
 * VELVET ROOM - OPEN ROOM MIDDLE ZONE R2
 * Permanent Channel interaction band between identity and Channel management/content.
 * UI-only / coming-soon state. No live media authority.
 */

#vrChannelMiddleZone{
  width:100%;
  margin:0;
  padding:0;
  position:relative;
  z-index:7;
  border-top:1px solid rgba(var(--vr-u-accent-rgb,199,96,255),.16);
  border-bottom:1px solid rgba(var(--vr-u-accent-rgb,199,96,255),.26);
  background:
    linear-gradient(90deg,
      rgba(var(--vr-u-accent-rgb,199,96,255),.075),
      rgba(7,7,11,.90) 48%,
      rgba(7,7,11,.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 30px rgba(0,0,0,.16);
}

#vrOpenRoomComingSoon{
  width:100%;
  max-width:860px;
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
}

#vrOpenRoomComingSoon .vrOpenRoomEntry{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:112px;
  margin:0;
  padding:20px 22px;
  border:0;
  background:transparent;
  color:#fff;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  text-align:left;
  cursor:pointer;
}

#vrOpenRoomComingSoon .vrOpenRoomEntry:active{
  background:rgba(var(--vr-u-accent-rgb,199,96,255),.055);
}

#vrOpenRoomComingSoon .vrOpenRoomIcon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--vr-u-accent-rgb,199,96,255),.35);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 20%,rgba(var(--vr-u-accent-rgb,199,96,255),.18),transparent 65%),
    rgba(255,255,255,.025);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 10px 28px rgba(0,0,0,.30);
  font-size:28px;
}

#vrOpenRoomComingSoon .vrOpenRoomCopy{
  min-width:0;
}

#vrOpenRoomComingSoon .vrOpenRoomTitle{
  display:block;
  color:#fff;
  font-size:20px;
  font-weight:950;
  line-height:1.08;
  letter-spacing:-.018em;
}

#vrOpenRoomComingSoon .vrOpenRoomSub{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.66);
  font-size:13px;
  line-height:1.38;
}

#vrOpenRoomComingSoon .vrOpenRoomBadge{
  align-self:center;
  padding:8px 11px;
  border:1px solid rgba(var(--vr-u-accent-rgb,199,96,255),.44);
  border-radius:999px;
  background:rgba(var(--vr-u-accent-rgb,199,96,255),.10);
  color:#fff;
  font-size:9px;
  font-weight:950;
  letter-spacing:.15em;
  white-space:nowrap;
}

/* Mode-aware accent remains owned by the active Channel persona. */
body.mode-social #vrChannelMiddleZone,
body.vr-mode-social #vrChannelMiddleZone{
  --vr-open-room-zone-accent:var(--vr-u-accent,#ff4fb8);
}
body.mode-friends #vrChannelMiddleZone,
body.vr-mode-friends #vrChannelMiddleZone{
  --vr-open-room-zone-accent:var(--vr-u-accent,#ffb86a);
}
body.mode-work #vrChannelMiddleZone,
body.vr-mode-work #vrChannelMiddleZone{
  --vr-open-room-zone-accent:var(--vr-u-accent,#d6b86a);
}

#vrOpenRoomInfoSheet[hidden]{display:none!important}
#vrOpenRoomInfoSheet{position:fixed;inset:0;z-index:2147483647}
#vrOpenRoomInfoSheet .vrOpenRoomBackdrop{
  position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.72)
}
#vrOpenRoomInfoSheet .vrOpenRoomPanel{
  position:absolute;
  left:0;right:0;bottom:0;
  width:min(100%,720px);
  max-height:min(80vh,700px);
  margin:0 auto;
  padding:18px 20px calc(22px + env(safe-area-inset-bottom,0px));
  overflow:auto;
  border:1px solid rgba(var(--vr-u-accent-rgb,199,96,255),.30);
  border-bottom:0;
  border-radius:24px 24px 0 0;
  background:
    linear-gradient(180deg,rgba(var(--vr-u-accent-rgb,199,96,255),.11),rgba(9,8,13,.985) 28%),
    #09080d;
  color:#fff;
  box-shadow:0 -22px 64px rgba(0,0,0,.48);
}
#vrOpenRoomInfoSheet .vrOpenRoomSheetHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
#vrOpenRoomInfoSheet .vrOpenRoomSheetKicker{color:var(--vr-u-accent,#c760ff);font-size:10px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
#vrOpenRoomInfoSheet h2{margin:5px 0 0;font-size:24px;line-height:1.05}
#vrOpenRoomInfoSheet .vrOpenRoomClose{width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:25px}
#vrOpenRoomInfoSheet .vrOpenRoomLead{margin:16px 0 0;color:rgba(255,255,255,.82);font-size:15px;line-height:1.52}
#vrOpenRoomInfoSheet .vrOpenRoomFacts{display:grid;gap:9px;margin-top:16px}
#vrOpenRoomInfoSheet .vrOpenRoomFact{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:11px 0;border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.76);font-size:13px;line-height:1.45}
#vrOpenRoomInfoSheet .vrOpenRoomStatus{margin-top:17px;padding:11px 13px;border:1px solid rgba(var(--vr-u-accent-rgb,199,96,255),.24);border-radius:14px;background:rgba(var(--vr-u-accent-rgb,199,96,255),.08);color:rgba(255,255,255,.78);font-size:12px;line-height:1.4}
body.vr-open-room-sheet-open{overflow:hidden!important}

@media(max-width:430px){
  #vrOpenRoomComingSoon .vrOpenRoomEntry{
    min-height:104px;
    padding:17px 16px;
    grid-template-columns:50px minmax(0,1fr);
    gap:13px;
  }
  #vrOpenRoomComingSoon .vrOpenRoomIcon{
    width:50px;height:50px;border-radius:15px;font-size:25px;
  }
  #vrOpenRoomComingSoon .vrOpenRoomTitle{font-size:19px}
  #vrOpenRoomComingSoon .vrOpenRoomBadge{
    grid-column:2;
    justify-self:start;
    margin-top:-2px;
  }
}

/* R73 device-live capture/player */
.vrLiveStage{position:relative;margin-top:14px;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:9/16;max-height:58vh}
.vrLiveStage video{width:100%;height:100%;object-fit:cover;background:#000}
#vrLiveOverlay{position:absolute;left:10px;top:10px;padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.68);color:#fff;font-size:11px;font-weight:900}
.vrLiveActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.vrLiveActions button,.vrLiveActions a{min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#151219;color:#fff;text-decoration:none;font-weight:850;display:inline-flex;align-items:center;justify-content:center}
#vrLivePrimary{background:linear-gradient(135deg,#ff3b83,#a83cff)}
.vrLiveMeta{display:flex;justify-content:space-between;gap:10px;margin-top:10px;color:rgba(255,255,255,.66);font-size:11px}
.vrLiveFeed{max-height:180px;overflow:auto;margin-top:12px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.28)}
.vrLiveEvent{padding:5px 4px;color:#fff;font-size:12px;line-height:1.35}.vrLiveEvent.reaction{display:inline-block;font-size:18px;padding:3px}
.vrLiveComposer{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:6px;margin-top:10px}
.vrLiveComposer input{min-width:0;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:#09090c;color:#fff;padding:0 10px}
.vrLiveComposer button{height:42px;min-width:42px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:#141218;color:#fff}

/* R73B — full-screen Velvet Live. This is a dominant live surface, not a popup sheet. */
#vrOpenRoomInfoSheet[hidden]{display:none!important}
#vrOpenRoomInfoSheet{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:2147483647!important;
  background:#000!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
#vrOpenRoomInfoSheet .vrOpenRoomBackdrop{display:none!important}
#vrOpenRoomInfoSheet .vrOpenRoomPanel.vrLiveFullscreen{
  position:absolute!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#000!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
#vrOpenRoomInfoSheet .vrLiveStage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  border-radius:0!important;
  background:#000!important;
}
#vrOpenRoomInfoSheet .vrLiveStage video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  background:#000!important;
}
#vrOpenRoomInfoSheet .vrLiveStage video.vrLiveMirror{
  transform:scaleX(-1)!important;
  -webkit-transform:scaleX(-1)!important;
}
#vrOpenRoomInfoSheet .vrLiveShade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.56) 0,rgba(0,0,0,.08) 24%,rgba(0,0,0,0) 48%,rgba(0,0,0,.72) 100%);
}
#vrOpenRoomInfoSheet .vrLiveTop{
  position:absolute;
  top:0;left:0;right:0;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px 12px;
}
#vrOpenRoomInfoSheet .vrLiveTitle{font-size:26px;font-weight:950;line-height:1;color:#fff}
#vrOpenRoomInfoSheet .vrOpenRoomSheetKicker{font-size:10px;letter-spacing:.18em;color:#ff64cf}
#vrOpenRoomInfoSheet .vrOpenRoomClose{
  width:46px!important;height:46px!important;flex:0 0 46px!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.22)!important;
  background:rgba(0,0,0,.44)!important;
  color:#fff!important;font-size:29px!important;
  backdrop-filter:blur(10px);
}
#vrOpenRoomInfoSheet .vrLiveState{
  position:absolute;
  top:calc(76px + env(safe-area-inset-top,0px));
  left:16px;
  z-index:5;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:12px;
  font-weight:900;
  backdrop-filter:blur(8px);
}
#vrOpenRoomInfoSheet .vrLiveHud{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:5;
  display:grid;
  gap:8px;
  padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px));
}
#vrOpenRoomInfoSheet .vrLiveMeta{
  display:flex;
  justify-content:space-between;
  color:#fff;
  font-size:12px;
  text-shadow:0 1px 3px #000;
  padding:0 2px;
}
#vrOpenRoomInfoSheet .vrLiveFeed{
  max-height:22vh;
  overflow:hidden;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  -webkit-mask-image:linear-gradient(transparent,#000 28%);
  mask-image:linear-gradient(transparent,#000 28%);
}
#vrOpenRoomInfoSheet .vrLiveEvent{
  width:max-content;
  max-width:82%;
  margin-top:4px;
  padding:5px 8px;
  border-radius:12px;
  background:rgba(0,0,0,.42);
  color:#fff;
  font-size:12px;
  line-height:1.35;
  backdrop-filter:blur(6px);
}
#vrOpenRoomInfoSheet .vrLiveEvent.reaction{
  display:inline-block;
  background:transparent;
  font-size:24px;
  padding:2px 4px;
}
#vrOpenRoomInfoSheet .vrLiveActions{
  display:flex;
  gap:8px;
  margin:0;
}
#vrOpenRoomInfoSheet .vrLiveActions button,
#vrOpenRoomInfoSheet .vrLiveActions a{
  min-height:48px;
  padding:0 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(8,8,12,.62);
  color:#fff;
  font-weight:900;
  backdrop-filter:blur(12px);
}
#vrOpenRoomInfoSheet #vrLivePrimary{flex:1;background:linear-gradient(135deg,#ff3b83,#a83cff)}
#vrOpenRoomInfoSheet #vrLiveFlip,
#vrOpenRoomInfoSheet #vrLiveGift{flex:0 0 auto}
#vrOpenRoomInfoSheet .vrLiveActions [hidden],
#vrOpenRoomInfoSheet .vrLiveComposer[hidden],
#vrOpenRoomInfoSheet #vrLiveFlip[hidden],
#vrOpenRoomInfoSheet #vrLiveGift[hidden]{display:none!important}
#vrOpenRoomInfoSheet .vrLiveComposer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto auto;
  gap:6px;
  margin:0;
}
#vrOpenRoomInfoSheet .vrLiveComposer input{
  min-width:0;height:46px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  background:rgba(8,8,12,.58);
  color:#fff;
  padding:0 12px;
  backdrop-filter:blur(12px);
}
#vrOpenRoomInfoSheet .vrLiveComposer button{
  height:46px;min-width:46px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:15px;
  background:rgba(8,8,12,.62);
  color:#fff;
  backdrop-filter:blur(12px);
}
body.vr-open-room-sheet-open{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  overflow:hidden!important;
  touch-action:none;
}
body.vr-open-room-sheet-open #vrOpenRoomInfoSheet{touch-action:auto}
@media(max-width:430px){
  #vrOpenRoomInfoSheet .vrLiveHud{padding-left:10px;padding-right:10px}
  #vrOpenRoomInfoSheet .vrLiveActions button,
  #vrOpenRoomInfoSheet .vrLiveActions a{min-height:46px;padding:0 13px;font-size:14px}
  #vrOpenRoomInfoSheet .vrLiveComposer{grid-template-columns:minmax(0,1fr) auto auto auto auto}
}