/* VR_ROOM_R46_PROFILE_PRESENTATION_AUTHORITY_RECONCILIATION: canonical profile selectors removed; channel authority preserved. */
/*
 * VELVET ROOM — CHANNEL + PREVIEW SOCIAL PLATFORM LAYOUT V1 / BUILD R2
 *
 * Design doctrine:
 * - Velvet Wayz hero grammar: cover + overlapping circular avatar + identity.
 * - Familiar social-platform information flow without cloning another brand.
 * - Page is the surface. Cards are reserved for actual content.
 * - Mode imagery is atmosphere, not wallpaper behind every section.
 * - No behavior, permission, pricing, friendship, or ledger authority.
 */

:root{
  --vr-social-page:#050507;
  --vr-social-page-2:#09080d;
  --vr-social-ink:#fff;
  --vr-social-muted:rgba(255,255,255,.62);
  --vr-social-faint:rgba(255,255,255,.40);
  --vr-social-line:rgba(255,255,255,.10);
  --vr-social-line-strong:rgba(255,255,255,.17);
  --vr-social-accent:var(--vr-shell-accent,#c667ff);
  --vr-social-accent-rgb:var(--vr-shell-accent-rgb,198,103,255);
}/* ---------- global page rhythm ---------- */

body.vr-surface-channel{
  background:
    radial-gradient(90% 42% at 50% -10%,rgba(var(--vr-social-accent-rgb),.16),transparent 68%),
    var(--vr-social-page) !important;
  color:var(--vr-social-ink);
}body.vr-surface-channel main{
  background:transparent !important;
}

body[data-vr-social-layout="v1"]{
  --vr-wayz-avatar-size:126px;
}/* ---------- HERO: shared Wayz-derived structural grammar ---------- */

body.vr-surface-channel .hero{
  width:100% !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
}body.vr-surface-channel .heroBanner{
  width:100% !important;
  height:178px !important;
  min-height:178px !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  position:relative !important;
  background:var(--mode-header-fallback) center/cover no-repeat !important;
}body.vr-surface-channel .heroBannerMedia{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:transparent !important;
}body.vr-surface-channel .heroBannerMedia img,
body.vr-surface-channel .heroBannerMedia video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 28% !important;
  display:block !important;
}body.vr-surface-channel .heroBanner::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02) 32%,rgba(5,5,7,.18) 62%,rgba(5,5,7,.92) 100%) !important;
}body.vr-surface-channel .heroDock{
  position:relative !important;
  z-index:3 !important;
  margin:-42px 0 0 !important;
  padding:0 14px 12px !important;
  border:0 !important;
  border-radius:0 !important;
  background:
    linear-gradient(180deg,rgba(5,5,7,0),rgba(5,5,7,.94) 44px,var(--vr-social-page) 92px) !important;
  box-shadow:none !important;
  overflow:visible !important;
}body.vr-surface-channel .heroIdentityTop{
  display:grid !important;
  grid-template-columns:var(--vr-wayz-avatar-size) minmax(0,1fr) !important;
  gap:11px !important;
  align-items:end !important;
  width:100% !important;
  min-width:0 !important;
  padding:0 !important;
  background:transparent !important;
}body.vr-surface-channel .avatarDock{
  width:var(--vr-wayz-avatar-size) !important;
  height:var(--vr-wayz-avatar-size) !important;
  margin:0 !important;
  position:relative !important;
  z-index:4 !important;
  border-radius:22% !important;
  background:#0a0a0f !important;
  box-shadow:
    0 0 0 4px var(--vr-social-page),
    0 0 0 7px rgba(var(--vr-social-accent-rgb),.88),
    0 12px 34px rgba(0,0,0,.46) !important;
}body.vr-surface-channel .heroAvatar{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  border-radius:22% !important;
  object-fit:cover !important;
  display:block !important;
  background:#0a0a0f !important;
}body.vr-surface-channel .heroNameWrap{
  min-width:0 !important;
  padding:0 0 4px !important;
  background:transparent !important;
}body.vr-surface-channel .heroName{
  margin:0 !important;
  color:#fff !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:1.02 !important;
  letter-spacing:-.03em !important;
  white-space:normal !important;
  overflow:visible !important;
}body.vr-surface-channel .heroMode{
  margin-top:4px !important;
  color:var(--vr-social-accent) !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}body.vr-surface-channel .heroHeadline{
  width:100% !important;
  max-width:780px !important;
  margin:8px 0 0 !important;
  padding:0 !important;
  color:rgba(255,255,255,.86) !important;
  font-size:13px !important;
  line-height:1.38 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}/* ---------- META: text{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:0 !important;
  margin:12px 0 0 !important;
  padding:0 !important;
  background:transparent !important;
}/* ---------- ACTIONS: compact social action rail ---------- */

body.vr-surface-channel .heroActionRow{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  margin:9px -14px 0 !important;
  padding:0 14px 4px !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
  background:transparent !important;
}body.vr-surface-channel .heroActionRow::-webkit-scrollbar{
  display:none;
}body.vr-surface-channel .heroActionRow .heroBtn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:92px !important;
  min-height:36px !important;
  padding:0 10px !important;
  border:1px solid var(--vr-social-line-strong) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}body.vr-surface-channel .heroActionRow .heroBtn.primary{
  border-color:rgba(var(--vr-social-accent-rgb),.48) !important;
  background:rgba(var(--vr-social-accent-rgb),.15) !important;
  color:#fff !important;
}

/* ---------- SOCIAL CONTENT NAV ---------- */

.vrSocialContentNav{
  display:flex;
  align-items:center;
  gap:22px;
  width:100%;
  min-height:52px;
  padding:0 18px;
  overflow-x:auto;
  scrollbar-width:none;
  border-top:1px solid var(--vr-social-line);
  border-bottom:1px solid var(--vr-social-line);
  background:rgba(5,5,7,.96);
}

.vrSocialContentNav::-webkit-scrollbar{display:none}

.vrSocialContentNav button{
  appearance:none;
  flex:0 0 auto;
  height:52px;
  padding:0 2px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--vr-social-muted);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.vrSocialContentNav button.is-active{
  color:#fff;
  border-bottom-color:var(--vr-social-accent);
}

/* ---------- OWNER COMPOSER ---------- */

#vrChannelSocialComposer{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--vr-social-line);
  background:var(--vr-social-page);
}

#vrChannelSocialComposer .vrSocialComposerAvatar{
  width:44px;
  height:44px;
  border-radius:22%;
  object-fit:cover;
  background:#15151b;
  border:1px solid rgba(var(--vr-social-accent-rgb),.45);
}

#vrChannelSocialComposer .vrSocialComposerPrompt{
  appearance:none;
  min-width:0;
  min-height:42px;
  border:1px solid var(--vr-social-line-strong);
  border-radius:22px;
  padding:0 15px;
  text-align:left;
  color:rgba(255,255,255,.70);
  background:rgba(255,255,255,.045);
  font-size:13px;
}

#vrChannelSocialComposer .vrSocialComposerQuick{
  display:flex;
  gap:4px;
}

#vrChannelSocialComposer .vrSocialComposerQuick a{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:10px;
  text-decoration:none;
  color:var(--vr-social-accent);
  background:transparent;
  font-size:20px;
}

/* ---------- CHANNEL: flatten old section-card system ---------- */

body.vr-surface-channel .section{
  width:100% !important;
  margin:0 !important;
  padding:20px 18px 22px !important;
  border:0 !important;
  border-bottom:1px solid var(--vr-social-line) !important;
  border-radius:0 !important;
  background:var(--vr-social-page) !important;
  box-shadow:none !important;
}

body.vr-surface-channel .sectionHead{
  margin:0 0 13px !important;
  align-items:flex-start !important;
}

body.vr-surface-channel .sectionTitle{
  color:#fff !important;
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

body.vr-surface-channel .sectionSub{
  color:var(--vr-social-muted) !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

body.vr-surface-channel #creatorLibrary,
body.vr-surface-channel #viewerLibrary,
body.vr-surface-channel #channelFeed{
  background:transparent !important;
}

body.vr-surface-channel .libraryRow{
  gap:10px !important;
}

body.vr-surface-channel .libraryTile{
  flex-basis:128px !important;
  height:168px !important;
  border-radius:12px !important;
  border:1px solid var(--vr-social-line) !important;
  background:#0d0d12 !important;
}

body.vr-surface-channel .feedList{
  gap:0 !important;
  margin:0 -18px !important;
}

body.vr-surface-channel .channelPost{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-top:1px solid var(--vr-social-line) !important;
  border-radius:0 !important;
  background:#07070a !important;
  box-shadow:none !important;
}

body.vr-surface-channel .channelPost:first-child{
  border-top:0 !important;
}

body.vr-surface-channel .postHead{
  padding:13px 18px 8px !important;
  background:transparent !important;
}

body.vr-surface-channel .postAuthor{
  font-size:15px !important;
  font-weight:900 !important;
}

body.vr-surface-channel .postMeta{
  color:var(--vr-social-muted) !important;
  font-size:11px !important;
}

body.vr-surface-channel .postBody{
  padding:0 18px 13px !important;
  font-size:15px !important;
  line-height:1.45 !important;
}

body.vr-surface-channel .postMedia img,
body.vr-surface-channel .postMedia video{
  width:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  border-radius:0 !important;
}

/* ---------- CHANNEL OWNER TOOLS: useful controls, not a bubble farm ---------- */

body.vr-surface-channel #vrChannelOwnerTools{
  width:100% !important;
  margin:0 !important;
  padding:18px !important;
  border-bottom:1px solid var(--vr-social-line);
  background:var(--vr-social-page) !important;
}

body.vr-surface-channel #vrChannelOwnerTools .vrChannelOwnerHeading{
  margin:0 0 10px !important;
  color:var(--vr-social-muted) !important;
  font-size:11px !important;
  letter-spacing:.13em !important;
}

body.vr-surface-channel #vrChannelOwnerTools .vrChannelOwnerGrid{
  display:flex !important;
  gap:0 !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}

body.vr-surface-channel #vrChannelOwnerTools .vrChannelOwnerGrid::-webkit-scrollbar{
  display:none;
}

body.vr-surface-channel #vrChannelOwnerTools .vrChannelOwnerAction{
  flex:0 0 112px !important;
  min-height:74px !important;
  padding:10px 8px !important;
  border:0 !important;
  border-right:1px solid var(--vr-social-line) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:5px !important;
}

body.vr-surface-channel #vrChannelOwnerTools .vrChannelOwnerAction:last-child{
  border-right:0 !important;
}

body.vr-surface-channel #vrChannelOwnerTools .vrChannelOwnerIcon{
  width:auto !important;
  height:auto !important;
  flex:0 0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--vr-social-accent) !important;
  font-size:19px !important;
}

body.vr-surface-channel #vrChannelOwnerTools .vrChannelOwnerCopy b{
  font-size:11px !important;
}

body.vr-surface-channel #vrChannelOwnerTools .vrChannelOwnerCopy span{
  display:none !important;
}/* ---------- PREVIEW: gateway{
  width:100% !important;
  max-width:760px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:block !important;
  background:transparent !important;
}

/* ---------- RESPONSIVE ---------- */

@media(min-width:760px){body.vr-surface-channel .heroBanner{
    height:220px !important;
    min-height:220px !important;
  }body.vr-surface-channel .heroDock{
    max-width:860px !important;
    margin:-48px auto 0 !important;
  }

  .vrSocialContentNav,
  #vrChannelSocialComposer,
  body.vr-surface-channel .section,
  body.vr-surface-channel #vrChannelOwnerTools{
    max-width:860px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media(max-width:420px){
  body.vr-surface-channel .heroHeadline{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;
    overflow:hidden !important;
  }

  body[data-vr-social-layout="v1"]{
    --vr-wayz-avatar-size:76px;
  }body.vr-surface-channel .heroBanner{
    height:154px !important;
    min-height:154px !important;
  }body.vr-surface-channel .heroName{
    font-size:23px !important;
  }

  #vrChannelSocialComposer{
    grid-template-columns:40px minmax(0,1fr) auto;
    padding-left:14px;
    padding-right:14px;
  }

  #vrChannelSocialComposer .vrSocialComposerAvatar{
    width:40px;
    height:40px;
  }
}