/* Velvet Room R307: interactive Media library + three-column video gallery.
   All mode gutters use existing authenticated Room presentation variables. */

/* The old Media cards are retired. The canonical paginated M2 grid owns tiles. */
body.vr-surface-channel [data-vr-media-library="m2"]{
  background:var(--mode-surface-image,url("/assets/radar/bg-social.webp")) center/cover no-repeat!important;
  overflow:visible!important;
}
body.vr-surface-channel #creatorLibrary.vrM2Grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:4px!important;
  background:var(--mode-surface-image,url("/assets/radar/bg-social.webp")) center/cover no-repeat!important;
  padding:0!important;
}
body.vr-surface-channel #creatorLibrary.vrM2Grid .vrM2Tile{
  min-height:95px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--mode-surface-image,url("/assets/radar/bg-social.webp")) center/cover no-repeat!important;
  touch-action:manipulation!important;
  cursor:pointer!important;
}
body.vr-surface-channel #creatorLibrary.vrM2Grid .vrM2Tile .vrM2Thumb{
  background:transparent!important;
}
body.vr-surface-channel #creatorLibrary.vrM2Grid .vrM2Thumb>img{
  object-fit:contain!important;
  background:transparent!important;
}
body.vr-surface-channel #creatorLibrary.vrM2Grid .vrM2Tile:focus-visible{
  outline:3px solid #e2b2ff!important;
  outline-offset:-3px!important;
  z-index:2;
}
body.vr-surface-channel #creatorLibrary.vrM2Grid .vrM2Tile:active{
  filter:brightness(1.13)!important;
}
.vrM2MissingVideoR307{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#fff;
  font-size:28px;
  background:rgba(24,13,37,.55);
}
/* Accessible controls inside the shared Room media viewer. */
#vrRoomBrowseViewerR295 .vrRoomViewerActionsR307{
  display:flex;align-items:center;gap:8px;min-width:0;
}
#vrRoomBrowseViewerR295 #vrRoomViewPostR307{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:41px;padding:8px 12px;white-space:nowrap;
  color:#f1d3ff;border:1px solid rgba(186,105,251,.55);
  background:rgba(112,35,166,.28);text-decoration:none;
  border-radius:11px;font:800 12px/1 system-ui,sans-serif;
}
#vrRoomBrowseViewerR295 #vrRoomViewPostR307[hidden]{
  display:none!important;
}
#vrRoomBrowseViewerR295 #vrRoomViewPostR307:focus-visible{
  outline:2px solid #e0b9ff;outline-offset:2px;
}
#vrRoomBrowseViewerR295 .vrRoomMediaStatusR307{
  padding:34px 20px;text-align:center;color:#e5d6ed;
  font:750 14px/1.5 system-ui,sans-serif;
}
#vrRoomBrowseViewerR295 .vrRoomAudioViewerR307{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:min(100%,520px);gap:20px;padding:18px 14px;color:#f1caff;
}
#vrRoomBrowseViewerR295 .vrRoomAudioViewerR307 img{
  width:min(75vw,240px);height:auto;max-height:35dvh;
  object-fit:contain;background:transparent;
}
#vrRoomBrowseViewerR295 .vrRoomAudioViewerR307 >span{
  font:900 72px/1 system-ui;
}
#vrRoomBrowseViewerR295 .vrRoomAudioViewerR307 audio{
  display:block;width:100%;max-width:480px;
}

/* Three portrait-video columns, with a full-width row for wide-format clips.
   Prevents the two-large-lanes look without cropping posters. */
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307,
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307[data-vr-gallery-size]{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  gap:4px!important;
  align-items:start!important;
  justify-items:stretch!important;
  width:100%!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  background-image:var(--mode-surface-image,url("/assets/radar/bg-social.webp"))!important;
  background-size:cover!important;
  background-position:center!important;
}
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307 .vrMosaicTileR299[data-vr-gallery-kind="video"],
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307[data-vr-gallery-size="many"] .vrMosaicTileR299[data-vr-gallery-kind="video"]{
  display:block!important;
  grid-column:span 1!important;
  grid-row:auto!important;
  aspect-ratio:9 / 16!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:var(--mode-surface-image,url("/assets/radar/bg-social.webp")) center/cover no-repeat!important;
  box-shadow:none!important;
}
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307 .vrMosaicTileR299[data-vr-r307-video-shape="wide"],
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307[data-vr-gallery-size="many"] .vrMosaicTileR299[data-vr-r307-video-shape="wide"]{
  grid-column:1 / -1!important;
  aspect-ratio:var(--vr-r307-aspect,16/9)!important;
}
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307 .vrMosaicTileR299 .vrRoomBrowseVisualR295{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  background:transparent!important;
}
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307 .vrMosaicTileR299 .vrRoomBrowseVisualR295>img,
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307 .vrMosaicTileR299 .vrRoomBrowseVisualR295>video{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
}
#vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307 .vrMosaicTileR299:focus-visible{
  outline:3px solid #e1acff!important;
  outline-offset:-3px!important;
}
@media(max-width:345px){
  #vrRoomGalleryR295 .vrRoomMosaicGridR299.vrRoomVideoGridR307,
  body.vr-surface-channel #creatorLibrary.vrM2Grid{
    gap:3px!important;
  }
}