/*
 * VELVET ROOM — PROFILE PREVIEW SCROLL CONTINUITY R7
 *
 * Vertical scroll authority belongs to the document.
 * Preview tiles may swipe horizontally, but may not trap vertical gestures.
 * The single R6 header and R5 top-to-bottom skin remain authoritative.
 */

html[data-vr-profile-scroll="r7"],
body[data-vr-profile-scroll="r7"]{
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y pinch-zoom!important;
  -webkit-overflow-scrolling:touch!important;
}

/* Remove viewport-height / internal-scroll traps from the page shell. */
body[data-vr-profile-scroll="r7"] :where(
  .page,
  .shell,
  #mainGrid,
  #mainGrid > .stack
){
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  overscroll-behavior:auto!important;
}

/* Fixed app dock stays fixed, but the document must be able to scroll above it. */
body[data-vr-profile-scroll="r7"] .page{
  padding-bottom:
    max(
      118px,
      calc(var(--vr-u-dock-h,84px) + env(safe-area-inset-bottom,0px) + 28px)
    )!important;
}

/* -------------------------------------------------------------
   PREVIEW RAIL
   Retire the later vertical nested-scroll experiment.
   Horizontal swipe survives; vertical gestures belong to page.
   ------------------------------------------------------------- */

body[data-vr-profile-scroll="r7"] #postsCard{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

body[data-vr-profile-scroll="r7"] #postsCard .sectionPad,
body[data-vr-profile-scroll="r7"] #postsWrap{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

body[data-vr-profile-scroll="r7"] #postsCard .previewTrack{
  display:flex!important;
  gap:10px!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  overflow-x:auto!important;
  overflow-y:hidden!important;

  scroll-snap-type:x proximity!important;
  scroll-behavior:smooth!important;
  overscroll-behavior-x:auto!important;
  overscroll-behavior-y:auto!important;

  touch-action:pan-x pan-y pinch-zoom!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
}

body[data-vr-profile-scroll="r7"] #postsCard .previewTrack::-webkit-scrollbar{
  display:none!important;
}

body[data-vr-profile-scroll="r7"] #postsCard .previewTrack > .postCard,
body[data-vr-profile-scroll="r7"] #postsCard .previewTrack > [data-preview-card]{
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  scroll-snap-align:start!important;
  scroll-snap-stop:normal!important;
}

/* AMA and lower content remain in normal document flow. */
body[data-vr-profile-scroll="r7"] #amaCard,
body[data-vr-profile-scroll="r7"] #amaCard .sectionPad,
body[data-vr-profile-scroll="r7"] #amaList{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  overscroll-behavior:auto!important;
}

/* -------------------------------------------------------------
   HERO FALLBACK
   A missing user cover must never become a giant black spacer.
   Actual img/video children render over this fallback unchanged.
   ------------------------------------------------------------- */

body[data-vr-profile-scroll="r7"] #hero,
body[data-vr-profile-scroll="r7"] .hero{
  overflow:visible!important;
}

body[data-vr-profile-scroll="r7"] .heroBanner{
  background-color:transparent!important;
  background-image:var(--vr-r5-header-image,var(--mode-header-fallback))!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

body[data-vr-profile-scroll="r7"] .heroBannerMedia{
  background:transparent!important;
}

body[data-vr-profile-scroll="r7"] .heroBannerMedia img,
body[data-vr-profile-scroll="r7"] .heroBannerMedia video{
  background:transparent!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* R6 remains sole header authority. */
body[data-vr-profile-scroll="r7"] .topbar{
  display:none!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/*
 * Modal scroll locks are intentionally NOT overridden in CSS.
 * R7 runtime clears stale body/html locks only when no modal is open.
 */