/* VR_ROOM_R65_R3_SHARED_MODE_COLOR_CONSUMER */
/*
 * VELVET ROOM — TOP TO BOTTOM SKIN AUTHORITY R5A
 *
 * This is the final late presentation authority for:
 *   Feed
 *   Channel
 *   Profile Preview
 *
 * The active persona/presentation atmosphere must run from the top edge
 * of the Velvet Room web app through the lower page.
 *
 * User cover/avatar media remains user-owned.
 * Postcards retain their own origin-mode identity skin.
 */

html[data-vr-top-skin="r5"],
body[data-vr-top-skin="r5"]{
  min-height:100%;
  background-color:#050507!important;
}

body[data-vr-top-skin="r5"]{
  background-image:var(--vr-r5-surface-image)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-mode="all"]{
  --vr-r5-surface-image:url("/assets/modes/all-bg.webp");
  --vr-r5-header-image:url("/assets/social-header.webp");
  --vr-r5-accent:#cbb8ff;
  --vr-r5-accent-rgb:203,184,255;
}
body[data-vr-top-skin="r5"][data-vr-r5-mode="social"]{
  --vr-r5-surface-image:url("/assets/radar/bg-social.webp");
  --vr-r5-header-image:url("/assets/social-header.webp");
  --vr-r5-accent:var(--vr-social-1);
  --vr-r5-accent-rgb:var(--vr-social-rgb);
}
body[data-vr-top-skin="r5"][data-vr-r5-mode="friends"]{
  --vr-r5-surface-image:url("/assets/radar/bg-friends.webp");
  --vr-r5-header-image:url("/assets/friends-header.webp");
  --vr-r5-accent:var(--vr-friends-1);
  --vr-r5-accent-rgb:var(--vr-friends-rgb);
}
body[data-vr-top-skin="r5"][data-vr-r5-mode="work"]{
  --vr-r5-surface-image:url("/assets/radar/bg-work.webp");
  --vr-r5-header-image:url("/assets/work-header.webp");
  --vr-r5-accent:var(--vr-work-1);
  --vr-r5-accent-rgb:var(--vr-work-rgb);
}

/* ============================================================
   SHARED APP HEADER
   The big black ceiling is removed.
   ============================================================ */

body[data-vr-top-skin="r5"] #vrEcosystemHeader{
  background-color:transparent!important;
  background-image:var(--vr-r5-surface-image)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  border-bottom:1px solid rgba(var(--vr-r5-accent-rgb),.44)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

body[data-vr-top-skin="r5"] #vrEcosystemHeader::before,
body[data-vr-top-skin="r5"] #vrEcosystemHeader::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

body[data-vr-top-skin="r5"] #vrEcosystemHeader :where(
  .vrEcosystemHeaderInner,
  .vrEcosystemHeaderBar,
  .vrEcosystemHeaderShell
){
  background:transparent!important;
  box-shadow:none!important;
}

body[data-vr-top-skin="r5"] #vrEcosystemHeader .vrEcosystemBack,
body[data-vr-top-skin="r5"] #vrEcosystemHeader .vrEcosystemHeaderAction{
  background:rgba(5,5,8,.20)!important;
  border-color:rgba(255,255,255,.18)!important;
  backdrop-filter:blur(4px)!important;
}

/* ============================================================
   CHANNEL
   ============================================================ */

body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] main{
  background:transparent!important;
}

/* Persona selector continues the exact same skin under the header. */
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] #vrOwnerPersonaRow,
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] .ownerModeSwitchRow{
  background-color:transparent!important;
  background-image:var(--vr-r5-surface-image)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  border-bottom-color:rgba(var(--vr-r5-accent-rgb),.34)!important;
  box-shadow:none!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] #vrOwnerPersonaRow::before,
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] #vrOwnerPersonaRow::after,
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] .ownerModeSwitchRow::before,
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] .ownerModeSwitchRow::after{
  content:none!important;
  display:none!important;
}

/* User cover remains untouched and fully vivid. */
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] .heroBanner,
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] .heroBannerMedia,
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] .heroBannerMedia img,
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] .heroBannerMedia video{
  background-image:none!important;
  filter:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] .heroBanner::after{
  background:linear-gradient(
    180deg,
    transparent 0%,
    transparent 72%,
    rgba(5,5,8,.12) 90%,
    rgba(5,5,8,.20) 100%
  )!important;
}

/* Identity and owner page areas carry mode imagery instead of black panels. */
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] :where(
  .heroDock,
  .vrChannelCanonicalTabs,
  #vrChannelAboutPanel
){
  background-color:transparent!important;
  background-image:
    linear-gradient(rgba(5,5,8,.08),rgba(5,5,8,.08)),
    var(--vr-r5-surface-image)!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] .vrChannelPostsSection,
body[data-vr-top-skin="r5"][data-vr-r5-surface="channel"] #channelFeed{
  background:transparent!important;
}

/* ============================================================
   PROFILE PREVIEW
   Preview is a gateway, but it must share the same atmosphere.
   ============================================================ */

body[data-vr-top-skin="r5"][data-vr-r5-surface="profile"]{
  background-image:var(--vr-r5-surface-image)!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="profile"] :where(
  main,
  .page,
  .shell,
  .app,
  #app,
  #profileRoot,
  #profileShell
){
  background:transparent!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="profile"] :where(
  .topbar,
  .ownerModeSwitchRow
){
  background-color:transparent!important;
  background-image:var(--vr-r5-surface-image)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  border-bottom-color:rgba(var(--vr-r5-accent-rgb),.34)!important;
  box-shadow:none!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="profile"] :where(
  .heroDock,
  .heroMetaRow,
  .heroActionRow,
  #postsCard,
  #amaCard,
  #channelCard
){
  background-color:transparent!important;
  background-image:
    linear-gradient(rgba(5,5,8,.08),rgba(5,5,8,.08)),
    var(--vr-r5-surface-image)!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="profile"] .heroBannerMedia img,
body[data-vr-top-skin="r5"][data-vr-r5-surface="profile"] .heroBannerMedia video{
  filter:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}

/* ============================================================
   PUBLIC FEED
   Remove every artificial dark veil introduced by convergence.
   ============================================================ */

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"]{
  background-image:var(--vr-r5-surface-image)!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] :where(
  .page,
  .topStack
){
  background:transparent!important;
}

/* Public Feed masthead artwork must render at native brightness. */
body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] .hero{
  background:transparent!important;
  filter:none!important;
  opacity:1!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] .hero::before,
body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] .hero::after{
  content:none!important;
  display:none!important;
  background:none!important;
  opacity:0!important;
  filter:none!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] .heroBanner{
  filter:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  background-color:transparent!important;
}

/* Keep controls readable, but do not place a black sheet over the page. */
body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] .moonRow{
  background:rgba(5,5,8,.05)!important;
  backdrop-filter:none!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] .headerActionRows{
  background:
    linear-gradient(
      90deg,
      rgba(var(--vr-r5-accent-rgb),.07),
      rgba(var(--vr-r5-accent-rgb),.025)
    )!important;
  backdrop-filter:none!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] .controlBar{
  background:rgba(5,5,8,.30)!important;
  backdrop-filter:blur(4px)!important;
}

/* Pinned and Clips use the current presentation artwork at full strength. */
body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] #pinnedSection,
body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] #clipsSection{
  background:transparent!important;
  filter:none!important;
  backdrop-filter:none!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] #pinnedSection::before,
body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] #clipsSection::before{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] #pinnedSection::after,
body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] #clipsSection::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] #pinnedSection .section-head,
body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] #clipsSection .section-head{
  background:rgba(5,5,8,.08)!important;
  backdrop-filter:none!important;
  text-shadow:0 2px 6px rgba(0,0,0,.55)!important;
}

body[data-vr-top-skin="r5"][data-vr-r5-surface="feed"] :where(
  #pinsRow,
  #clipsRow,
  #topSpotlightSlot,
  #feedList
){
  background:transparent!important;
}

/*
 * Deliberately no .postcard.mode-social / friends / work rules.
 * Identity-bearing posts keep origin-mode skin authority.
 */