/* VR_ROOM_R65_R3_SHARED_MODE_COLOR_CONSUMER */
/* VR_ROOM_PRESENTATION_AUTHORITY_U4_CSS */
:root{
  --vr-u4-avatar-corner:22%;
  --vr-u4-pill-bg:rgba(4,4,8,.92);
  --vr-u4-pill-border:rgba(255,255,255,.16);
  --vr-u4-pill-active:var(--vr-mode-accent,var(--vr-social-1));
}
html[data-vr-presentation-u4="1"]{
  --vr-room-avatar-corner:var(--vr-u4-avatar-corner);
}

/* Human avatars: rounded-edge square everywhere this authority is loaded.
   Radar intentionally does not load U4. */
html[data-vr-presentation-u4="1"] .heroAvatar,
html[data-vr-presentation-u4="1"] #avatar.heroAvatar,
html[data-vr-presentation-u4="1"] #heroAvatar.heroAvatar,
html[data-vr-presentation-u4="1"] .postAvatar,
html[data-vr-presentation-u4="1"] .profileAvatar,
html[data-vr-presentation-u4="1"] .public-card-avatar,
html[data-vr-presentation-u4="1"] .vrMcQuickAvatar,
html[data-vr-presentation-u4="1"] .headerAvatar,
html[data-vr-presentation-u4="1"] .vrSearchAvatar,
html[data-vr-presentation-u4="1"] .pdAvatar,
html[data-vr-presentation-u4="1"] .ph-avatar,
html[data-vr-presentation-u4="1"] .vrSocialComposerAvatar,
html[data-vr-presentation-u4="1"] #channelFeed .avatar,
html[data-vr-presentation-u4="1"] #feedList .avatar,
html[data-vr-presentation-u4="1"] #topSpotlightSlot .avatar,
html[data-vr-presentation-u4="1"] body[data-vr-message-center-aligned="v1"] .avatar,
html[data-vr-presentation-u4="1"] body[data-vr-message-thread-aligned="v1"] .headerAvatar,
html[data-vr-presentation-u4="1"] body[data-vr-search-aligned="v1"] .vrSearchAvatar,
html[data-vr-presentation-u4="1"] .vr-avatar-xs,
html[data-vr-presentation-u4="1"] .vr-avatar-sm,
html[data-vr-presentation-u4="1"] .vr-avatar-md,
html[data-vr-presentation-u4="1"] .vr-avatar-lg,
html[data-vr-presentation-u4="1"] .vr-avatar-xl{
  border-radius:var(--vr-u4-avatar-corner) !important;
  overflow:hidden !important;
}
html[data-vr-presentation-u4="1"] .heroAvatar img,
html[data-vr-presentation-u4="1"] .postAvatar img,
html[data-vr-presentation-u4="1"] .profileAvatar img,
html[data-vr-presentation-u4="1"] .public-card-avatar img,
html[data-vr-presentation-u4="1"] .vrMcQuickAvatar img,
html[data-vr-presentation-u4="1"] .headerAvatar img,
html[data-vr-presentation-u4="1"] .vrSearchAvatar img,
html[data-vr-presentation-u4="1"] .pdAvatar img,
html[data-vr-presentation-u4="1"] .ph-avatar img,
html[data-vr-presentation-u4="1"] .vrSocialComposerAvatar img,
html[data-vr-presentation-u4="1"] #channelFeed .avatar img,
html[data-vr-presentation-u4="1"] #feedList .avatar img,
html[data-vr-presentation-u4="1"] #topSpotlightSlot .avatar img,
html[data-vr-presentation-u4="1"] body[data-vr-message-center-aligned="v1"] .avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:inherit !important;
}

/* Canonical bottom-dock Me identity is also a rounded square, not a circle. */
html[data-vr-presentation-u4="1"] #vrAppDock #vrDockMe .vrDockIcon{
  border-radius:22% !important;
  overflow:hidden !important;
}
html[data-vr-presentation-u4="1"] #vrAppDock #vrDockMe .vrDockIcon img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:inherit !important;
}

/* One visual mode-rail component. Existing surface click engines stay intact. */
html[data-vr-presentation-u4="1"] .vrU4ModeRail{
  display:grid !important;
  grid-template-columns:repeat(var(--vr-u4-mode-count,4),minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:center !important;
  box-sizing:border-box !important;
}
html[data-vr-presentation-u4="1"] .vrU4ModeRail[hidden]{
  display:none !important;
}
html[data-vr-presentation-u4="1"] .vrU4ModeRail > .moonItem,
html[data-vr-presentation-u4="1"] .vrU4ModeRail > .vrSearchMode,
html[data-vr-presentation-u4="1"] .vrU4ModeRail > button[data-owner-mode],
html[data-vr-presentation-u4="1"] .vrU4ModeRail > button[data-vr-mode-switch]{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-width:0 !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 7px !important;
  margin:0 !important;
  border:1px solid var(--vr-u4-pill-border) !important;
  border-radius:999px !important;
  background:var(--vr-u4-pill-bg) !important;
  color:rgba(255,255,255,.88) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.26) !important;
  font:800 12px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  text-align:center !important;
  text-decoration:none !important;
}
html[data-vr-presentation-u4="1"] .vrU4ModeRail .moonDot,
html[data-vr-presentation-u4="1"] .vrU4ModeRail > button[data-owner-mode]::before,
html[data-vr-presentation-u4="1"] .vrU4ModeRail > button[data-vr-mode-switch]::before{
  display:none !important;
  content:none !important;
}
html[data-vr-presentation-u4="1"] .vrU4ModeRail .moonLabel,
html[data-vr-presentation-u4="1"] .vrU4ModeRail .vrUnifiedFilterLabel{
  display:block !important;
  width:auto !important;
  margin:0 !important;
  color:inherit !important;
  font:800 12px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  text-align:center !important;
}
html[data-vr-presentation-u4="1"] .vrU4ModeRail > .moonItem.active,
html[data-vr-presentation-u4="1"] .vrU4ModeRail > .moonItem.is-active,
html[data-vr-presentation-u4="1"] .vrU4ModeRail > .moonItem[aria-selected="true"],
html[data-vr-presentation-u4="1"] .vrU4ModeRail > .vrSearchMode.active,
html[data-vr-presentation-u4="1"] .vrU4ModeRail > .vrSearchMode.is-active,
html[data-vr-presentation-u4="1"] .vrU4ModeRail > button[data-owner-mode].is-active,
html[data-vr-presentation-u4="1"] .vrU4ModeRail > button[data-vr-mode-switch].is-active{
  color:#fff !important;
  background:rgba(11,7,15,.96) !important;
  border-color:var(--vr-u4-pill-active) !important;
  box-shadow:inset 0 0 0 1px rgba(255,79,184,.20),0 0 13px rgba(255,79,184,.48) !important;
}

/* Channel/profile mode rows keep existing placement and semantics, only presentation is unified. */
html[data-vr-presentation-u4="1"] #ownerModeSwitchRow.vrU4ModeRail{
  width:100% !important;
  flex-wrap:nowrap !important;
}

/* Owner self-context: visitor-only purchase CTA must not occupy space. */
html[data-vr-presentation-u4="1"] [data-vr-u4-owner-self-action="hidden"]{
  display:none !important;
}

/* VR_ROOM_PRESENTATION_AUTHORITY_U4A_CORRECTIVE */
/* The shared Room/Profile header is platform chrome. It is black, not mode wallpaper. */
html[data-vr-presentation-u4="1"] body.vr-surface-channel #vrEcosystemHeader,
html[data-vr-presentation-u4="1"] body.vr-surface-profile #vrEcosystemHeader,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit #vrEcosystemHeader{
  background:#000 !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

/* Large Room/Profile identity geometry: the image, its dock, and decorative ring
   must share the same rounded-square silhouette. */
html[data-vr-presentation-u4="1"] body.vr-surface-channel .avatarDock,
html[data-vr-presentation-u4="1"] body.vr-surface-profile .avatarDock,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit .avatarDock{
  border-radius:24px !important;
}
html[data-vr-presentation-u4="1"] body.vr-surface-channel .avatarDock::before,
html[data-vr-presentation-u4="1"] body.vr-surface-channel .avatarDock::after,
html[data-vr-presentation-u4="1"] body.vr-surface-profile .avatarDock::before,
html[data-vr-presentation-u4="1"] body.vr-surface-profile .avatarDock::after,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit .avatarDock::before,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit .avatarDock::after{
  border-radius:28px !important;
}
html[data-vr-presentation-u4="1"] body.vr-surface-channel .avatarDock > .heroAvatar,
html[data-vr-presentation-u4="1"] body.vr-surface-profile .avatarDock > .heroAvatar,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit .avatarDock > .heroAvatar,
html[data-vr-presentation-u4="1"] body.vr-surface-channel #avatar.heroAvatar,
html[data-vr-presentation-u4="1"] body.vr-surface-profile #heroAvatar.heroAvatar{
  border-radius:22% !important;
  clip-path:inset(0 round 22%) !important;
  -webkit-clip-path:inset(0 round 22%) !important;
}

/* Keep bottom Me avatar consistent with the same rounded-square doctrine. */
html[data-vr-presentation-u4="1"] #vrAppDock #vrDockMe .vrDockIcon,
html[data-vr-presentation-u4="1"] #vrAppDock #vrDockMe .vrDockIcon img{
  border-radius:22% !important;
  clip-path:inset(0 round 22%) !important;
  -webkit-clip-path:inset(0 round 22%) !important;
}

/* ==========================================================================
   VR_ROOM_PRESENTATION_AUTHORITY_U4B_HEADER_MODE_UNIFICATION
   Shared app chrome for Profile / Room / Channel preview surfaces.

   Locked doctrine:
   - platform header is black chrome, never mode wallpaper
   - surface name + mode remain semantic, but visual grammar matches Feed
   - persona/mode selectors use one pill component
   - Social / Friends / Work retain their existing click/privacy engines
   - user cover/avatar and page-mode atmosphere remain untouched
   ========================================================================== */

html[data-vr-presentation-u4="1"] body.vr-surface-channel,
html[data-vr-presentation-u4="1"] body.vr-surface-profile,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit{
  --vr-u4b-header-bg:#000;
  --vr-u4b-header-line:rgba(var(--vr-u-accent-rgb,199,96,255),.28);
  --vr-u4b-control-bg:#09090d;
  --vr-u4b-control-line:rgba(255,255,255,.12);
  --vr-u4b-muted:rgba(255,255,255,.58);
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel #vrEcosystemHeader,
html[data-vr-presentation-u4="1"] body.vr-surface-profile #vrEcosystemHeader,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit #vrEcosystemHeader{
  min-height:72px !important;
  padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px !important;
  grid-template-columns:44px minmax(0,1fr) auto !important;
  gap:9px !important;
  background:#000 !important;
  background-image:none !important;
  border-bottom:1px solid var(--vr-u4b-header-line) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel #vrEcosystemHeader :where(.vrEcosystemBack,.vrEcosystemHeaderAction,.vrProfileMigratedHeaderAction),
html[data-vr-presentation-u4="1"] body.vr-surface-profile #vrEcosystemHeader :where(.vrEcosystemBack,.vrEcosystemHeaderAction,.vrProfileMigratedHeaderAction),
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit #vrEcosystemHeader :where(.vrEcosystemBack,.vrEcosystemHeaderAction,.vrProfileMigratedHeaderAction){
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid var(--vr-u4b-control-line) !important;
  border-radius:14px !important;
  background:var(--vr-u4b-control-bg) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel #vrEcosystemHeader .vrEcosystemTitle,
html[data-vr-presentation-u4="1"] body.vr-surface-profile #vrEcosystemHeader .vrEcosystemTitle,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit #vrEcosystemHeader .vrEcosystemTitle{
  text-align:center !important;
  min-width:0 !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel #vrEcosystemHeader .vrEcosystemTitle strong,
html[data-vr-presentation-u4="1"] body.vr-surface-profile #vrEcosystemHeader .vrEcosystemTitle strong,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit #vrEcosystemHeader .vrEcosystemTitle strong{
  display:block !important;
  color:#fff !important;
  font:900 20px/1.05 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  letter-spacing:-.025em !important;
  text-transform:none !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel #vrEcosystemHeader .vrEcosystemTitle span,
html[data-vr-presentation-u4="1"] body.vr-surface-profile #vrEcosystemHeader .vrEcosystemTitle span,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit #vrEcosystemHeader .vrEcosystemTitle span{
  display:block !important;
  margin-top:5px !important;
  color:var(--vr-u-accent,var(--vr-shell-accent,var(--vr-social-1))) !important;
  font:850 10px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  letter-spacing:.17em !important;
  text-transform:uppercase !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel #vrEcosystemHeader .vrEcosystemHeaderTools,
html[data-vr-presentation-u4="1"] body.vr-surface-profile #vrEcosystemHeader .vrEcosystemHeaderTools,
html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit #vrEcosystemHeader .vrEcosystemHeaderTools{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow).vrU4ModeRail,
html[data-vr-presentation-u4="1"] body.vr-surface-profile :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow).vrU4ModeRail{
  width:100% !important;
  min-height:64px !important;
  height:auto !important;
  margin:0 !important;
  padding:9px 12px !important;
  display:grid !important;
  grid-template-columns:repeat(var(--vr-u4-mode-count,3),minmax(0,1fr)) !important;
  gap:10px !important;
  align-items:center !important;
  border:0 !important;
  border-bottom:1px solid rgba(var(--vr-u-accent-rgb,199,96,255),.24) !important;
  background:#000 !important;
  background-image:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow) .vrOwnerPersonaLabel,
html[data-vr-presentation-u4="1"] body.vr-surface-profile :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow) .vrOwnerPersonaLabel,
html[data-vr-presentation-u4="1"] body.vr-surface-channel :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow) .vrPersonaMoon,
html[data-vr-presentation-u4="1"] body.vr-surface-profile :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow) .vrPersonaMoon{
  display:none !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow).vrU4ModeRail > button,
html[data-vr-presentation-u4="1"] body.vr-surface-profile :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow).vrU4ModeRail > button{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-width:0 !important;
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  padding:0 10px !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:999px !important;
  background:rgba(10,10,14,.96) !important;
  background-image:none !important;
  color:rgba(255,255,255,.82) !important;
  box-shadow:none !important;
  filter:none !important;
  text-decoration:none !important;
  text-transform:none !important;
  font:850 13px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow).vrU4ModeRail > button:is(.active,.is-active,[aria-selected="true"],[data-vr-u4b-active="1"]),
html[data-vr-presentation-u4="1"] body.vr-surface-profile :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow).vrU4ModeRail > button:is(.active,.is-active,[aria-selected="true"],[data-vr-u4b-active="1"]){
  color:#fff !important;
  border-color:var(--vr-u-accent,var(--vr-shell-accent,var(--vr-social-1))) !important;
  background:rgba(8,8,12,.98) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--vr-u-accent-rgb,199,96,255),.18),
    0 0 14px rgba(var(--vr-u-accent-rgb,199,96,255),.34) !important;
}

html[data-vr-presentation-u4="1"] :where(.vrProfilePreviewCard,.vrChannelPreviewCard,[data-vr-profile-preview-card]) :where(.vrProfilePreviewTop,.vrProfilePreviewHeader,.vrChannelPreviewHeader){
  background:#000 !important;
  background-image:none !important;
  border-bottom:1px solid rgba(var(--vr-u-accent-rgb,199,96,255),.22) !important;
  box-shadow:none !important;
}

@media(max-width:430px){
  html[data-vr-presentation-u4="1"] body.vr-surface-channel #vrEcosystemHeader,
  html[data-vr-presentation-u4="1"] body.vr-surface-profile #vrEcosystemHeader,
  html[data-vr-presentation-u4="1"] body.vr-surface-profile-edit #vrEcosystemHeader{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  html[data-vr-presentation-u4="1"] body.vr-surface-channel :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow).vrU4ModeRail,
  html[data-vr-presentation-u4="1"] body.vr-surface-profile :where(#vrOwnerPersonaRow,#ownerModeSwitchRow,.ownerModeSwitchRow).vrU4ModeRail{
    padding-left:10px !important;
    padding-right:10px !important;
    gap:8px !important;
  }
}

/* VR_ROOM_PRESENTATION_AUTHORITY_U4C_MODE_SWITCH_AND_DUPLICATE_ROW_FIX */

html[data-vr-presentation-u4="1"] body.vr-surface-channel
#vrOwnerPersonaRow[data-vr-u4c-duplicate-top-hidden="1"],
html[data-vr-presentation-u4="1"] body.vr-surface-profile
#vrOwnerPersonaRow[data-vr-u4c-duplicate-top-hidden="1"]{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel
:where(#ownerModeSwitchRow,.ownerModeSwitchRow)[data-vr-u4b-mode-rail="1"],
html[data-vr-presentation-u4="1"] body.vr-surface-profile
:where(#ownerModeSwitchRow,.ownerModeSwitchRow)[data-vr-u4b-mode-rail="1"]{
  position:relative !important;
  z-index:18 !important;
  pointer-events:auto !important;
}

html[data-vr-presentation-u4="1"] body.vr-surface-channel
:where(#ownerModeSwitchRow,.ownerModeSwitchRow)[data-vr-u4b-mode-rail="1"] > button,
html[data-vr-presentation-u4="1"] body.vr-surface-profile
:where(#ownerModeSwitchRow,.ownerModeSwitchRow)[data-vr-u4b-mode-rail="1"] > button{
  position:relative !important;
  z-index:2 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}