/* VR_ROOM_R65_R3_SHARED_MODE_COLOR_CONSUMER */
/*
 * VELVET ROOM — PLATFORM UNIFICATION AUTHORITY R2
 * One application grammar; mode atmosphere remains explicit.
 *
 * Presentation mode owns the surrounding page.
 * Identity-bearing post/profile objects retain their own mode skin.
 * This stylesheet intentionally does NOT rewrite .postcard mode classes.
 */

:root{
  --vr-u-bg:#050507;
  --vr-u-bg-2:#09080d;
  --vr-u-panel:#0b0a10;
  --vr-u-panel-2:#111018;
  --vr-u-line:rgba(255,255,255,.11);
  --vr-u-line-strong:rgba(255,255,255,.18);
  --vr-u-text:#f7f4fb;
  --vr-u-muted:#a7a2ad;
  --vr-u-dim:#77727d;
  --vr-u-accent:var(--vr-social-1);
  --vr-u-accent-2:var(--vr-social-2);
  --vr-u-accent-rgb:var(--vr-social-rgb);
  --vr-u-surface-image:url("/assets/radar/bg-social.png");
  --vr-u-header-image:url("/assets/social-header.webp");
  --vr-u-radius:14px;
  --vr-u-radius-small:10px;
  --vr-u-dock-h:84px;
  --vr-u-max:760px;
  --vr-u-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

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

/* Bridge all surviving Velvet Room token dialects into one live authority. */
body[data-vr-unified-ui="r2"]{
  --vr-mode-accent:var(--vr-u-accent)!important;
  --vr-mode-accent-2:var(--vr-u-accent-2)!important;
  --vr-shell-accent:var(--vr-u-accent)!important;
  --vr-shell-accent2:var(--vr-u-accent-2)!important;
  --vr-shell-accent-rgb:var(--vr-u-accent-rgb)!important;
  --vr-polish-accent:var(--vr-u-accent)!important;
  --vr-polish-accent-rgb:var(--vr-u-accent-rgb)!important;
  --vr-social-accent:var(--vr-u-accent)!important;
  --vr-social-accent-rgb:var(--vr-u-accent-rgb)!important;
  --ch-accent:var(--vr-u-accent)!important;
  --ch-accent2:var(--vr-u-accent-2)!important;
  --ch-rgb:var(--vr-u-accent-rgb)!important;
  color:var(--vr-u-text);
  font-family:var(--vr-u-font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body[data-vr-unified-ui="r2"] *,
body[data-vr-unified-ui="r2"] *::before,
body[data-vr-unified-ui="r2"] *::after{box-sizing:border-box}

/* R95 canonical Velvet Room mode contract: Work is sky blue. */
body[data-vr-presentation-mode="work"]{
  --vr-work-1:#67c6ff!important;
  --vr-work-2:#70a8ff!important;
  --vr-work-rgb:103,198,255!important;
}

/* Friends is warm sunset language, never teal. */
body[data-vr-presentation-mode="friends"]{
  --vr-friends-1:#f0b35e!important;
  --vr-friends-2:#ff8d5f!important;
}

/* Secondary utility surfaces use the mode atmosphere quietly, not as wallpaper noise. */
body[data-vr-unified-surface="settings"],
body[data-vr-unified-surface="dashboard"],
body[data-vr-unified-surface="profile-edit"],
body[data-vr-unified-surface="ama"],
body[data-vr-unified-surface="velvet-line"]{
  min-height:100dvh;
  background:
    linear-gradient(180deg,rgba(5,5,7,.88),rgba(5,5,7,.97) 34%,#050507 78%),
    var(--vr-u-surface-image) center top/cover fixed no-repeat!important;
  color:var(--vr-u-text)!important;
}

/* Native page chrome. Do not create a second page inside the app. */
body[data-vr-unified-ui="r2"] #vrEcosystemHeader{
  border-bottom-color:rgba(var(--vr-u-accent-rgb),.28)!important;
  background:rgba(5,5,8,.94)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(16px)!important;
}
body[data-vr-unified-ui="r2"] #vrEcosystemHeader .vrEcosystemTitle span{
  color:var(--vr-u-accent)!important;
}
body[data-vr-unified-ui="r2"] #vrEcosystemHeader .vrEcosystemBack,
body[data-vr-unified-ui="r2"] #vrEcosystemHeader .vrEcosystemHeaderAction{
  border-color:rgba(255,255,255,.13)!important;
  background:rgba(255,255,255,.035)!important;
}

/* Surface-native topbars should feel like the same app, not separate microsites. */
body[data-vr-unified-surface="radar"] .topbar,
body[data-vr-unified-surface="messages"] .topbar,
body[data-vr-unified-surface="message-center"] .topbar,
body[data-vr-unified-surface="post-edit"] .topBar,
body[data-vr-unified-surface="velvet-line"] .topbar{
  border-bottom-color:rgba(var(--vr-u-accent-rgb),.24)!important;
}

/* Mode controls share one active language without changing their layout. */
body[data-vr-unified-ui="r2"] :where(
  .moonItem.active,
  [data-vr-owner-mode].is-active,
  [data-owner-mode].is-active,
  [data-vr-mode-switch].is-active
){
  color:#fff!important;
  border-color:var(--vr-u-accent)!important;
}
body[data-vr-unified-ui="r2"] :where(
  .moonItem.active .moonDot,
  .vrPersonaMoon
){
  filter:drop-shadow(0 0 10px rgba(var(--vr-u-accent-rgb),.42));
}

/* Channel/Profile hero identity grammar: cover + overlap + identity, no bubble wrapper. */
body[data-vr-unified-surface="channel"] :where(#avatar,.heroAvatar),
body[data-vr-unified-surface="profile"] :where(#avatar,.heroAvatar){
  border-color:var(--vr-u-accent)!important;
  box-shadow:
    0 0 0 4px #050507,
    0 0 0 7px var(--vr-u-accent),
    0 10px 28px rgba(0,0,0,.35)!important;
}
body[data-vr-unified-surface="channel"] :where(#modeLine,.modeLine),
body[data-vr-unified-surface="profile"] :where(#modeLine,.modeLine){
  color:var(--vr-u-accent)!important;
}

/* Owner management is a tool strip / information hierarchy, not a bubble farm. */
body[data-vr-unified-surface="channel"] #vrChannelOwnerManagement{
  background:rgba(5,5,7,.96)!important;
  border-color:var(--vr-u-line)!important;
}
body[data-vr-unified-surface="channel"] #vrChannelOwnerManagement .vrOwnerManageAction{
  border-radius:0!important;
  box-shadow:none!important;
}
body[data-vr-unified-surface="channel"] #vrChannelOwnerManagement .vrOwnerDashboardAction{
  border-radius:0!important;
  box-shadow:none!important;
}

/* Settings was already converted to grouped rows; preserve that professional hierarchy. */
body[data-vr-unified-surface="settings"] :where(.settingsGroup,.vrSettingsGroup){
  background:transparent!important;
  box-shadow:none!important;
}
body[data-vr-unified-surface="settings"] :where(.settingsRow,.vrSettingsRow){
  border-bottom:1px solid var(--vr-u-line)!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Professional Dashboard joins the app without changing its real-data contract. */
body[data-vr-unified-surface="dashboard"]{
  padding-bottom:calc(var(--vr-u-dock-h) + env(safe-area-inset-bottom,0px) + 18px)!important;
}
body[data-vr-unified-surface="dashboard"] :where(header,.pdTopbar,.dashboardHeader){
  background:rgba(5,5,8,.94)!important;
  border-bottom-color:rgba(var(--vr-u-accent-rgb),.24)!important;
  backdrop-filter:blur(16px)!important;
}
body[data-vr-unified-surface="dashboard"] :where(.card,.metricCard,.panel,.insightCard){
  border-color:var(--vr-u-line)!important;
  box-shadow:none!important;
}
body[data-vr-unified-surface="dashboard"] :where(.active,.is-active,[aria-selected="true"]){
  --pd-accent:var(--vr-u-accent)!important;
}

/* Forms and secondary surfaces share density/typography, without inflating controls. */
body[data-vr-unified-surface="profile-edit"] :where(input,textarea,select),
body[data-vr-unified-surface="ama"] :where(input,textarea,select),
body[data-vr-unified-surface="settings"] :where(input,textarea,select),
body[data-vr-unified-surface="velvet-line"] :where(input,textarea,select){
  border-color:var(--vr-u-line-strong)!important;
  background:rgba(7,7,10,.86)!important;
  color:#fff!important;
}
body[data-vr-unified-surface="profile-edit"] :where(button,.btn),
body[data-vr-unified-surface="ama"] :where(button,.btn),
body[data-vr-unified-surface="velvet-line"] :where(button,.btn){
  font-family:var(--vr-u-font)!important;
}

/* Messaging stays capacity-aware while its chrome follows the current presentation mode. */
body[data-vr-unified-surface="messages"] .composerBar{
  border-top-color:rgba(var(--vr-u-accent-rgb),.18)!important;
}
body[data-vr-unified-surface="messages"] :where(.sendBtn,.composerSend,.callBtn.is-active){
  border-color:rgba(var(--vr-u-accent-rgb),.45)!important;
}
body[data-vr-unified-surface="message-center"] :where(.tabBtn.is-active,.moonItem.active){
  color:var(--vr-u-accent)!important;
}

/* Radar retains its unique function/visual metaphor; only shared chrome follows the app authority. */
body[data-vr-unified-surface="radar"] :where(.modeBtn.active,.tab.active,.public-action:focus-visible){
  outline-color:var(--vr-u-accent)!important;
}

/* Canonical bottom dock. Existing docks and fallback docks use the same rules. */
body[data-vr-unified-ui="r2"] #vrAppDock,
body[data-vr-unified-ui="r2"] #vrUnifiedFallbackDock{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:2147483000!important;
  min-height:var(--vr-u-dock-h)!important;
  padding:8px max(6px,env(safe-area-inset-right,0px))
          calc(8px + env(safe-area-inset-bottom,0px))
          max(6px,env(safe-area-inset-left,0px))!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:center!important;
  gap:2px!important;
  border-top:1px solid rgba(var(--vr-u-accent-rgb),.25)!important;
  background:rgba(4,4,7,.96)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 -12px 30px rgba(0,0,0,.24)!important;
}
body[data-vr-unified-ui="r2"] :where(#vrAppDock,#vrUnifiedFallbackDock) .vrDockItem{
  min-width:0!important;
  min-height:48px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#9b97a2!important;
  text-decoration:none!important;
  font:800 11px/1.1 var(--vr-u-font)!important;
}
body[data-vr-unified-ui="r2"] :where(#vrAppDock,#vrUnifiedFallbackDock) .vrDockItem.is-active{
  color:var(--vr-u-accent)!important;
  background:linear-gradient(180deg,rgba(var(--vr-u-accent-rgb),.11),rgba(var(--vr-u-accent-rgb),.025))!important;
}
body[data-vr-unified-ui="r2"] :where(#vrAppDock,#vrUnifiedFallbackDock) .vrDockIcon{
  display:grid!important;
  place-items:center!important;
  min-height:22px!important;
  font-size:21px!important;
  line-height:1!important;
}
body[data-vr-unified-ui="r2"] :where(#vrAppDock,#vrUnifiedFallbackDock) #vrDockCreate .vrDockIcon,
body[data-vr-unified-ui="r2"] :where(#vrAppDock,#vrUnifiedFallbackDock) .vrUnifiedCreate .vrDockIcon{
  width:50px!important;
  height:50px!important;
  margin-top:-17px!important;
  border:1px solid rgba(var(--vr-u-accent-rgb),.5)!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 38% 34%,var(--vr-u-accent),var(--vr-u-accent-2) 64%,#201029)!important;
  color:#fff!important;
  font-size:36px!important;
  font-weight:300!important;
  box-shadow:0 0 0 5px #050507,0 0 24px rgba(var(--vr-u-accent-rgb),.34)!important;
}
body[data-vr-unified-ui="r2"] :where(#vrAppDock,#vrUnifiedFallbackDock) .vrDockLabel{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:100%!important;
}
body[data-vr-unified-ui="r2"].vr-unified-has-dock{
  padding-bottom:max(82px,calc(var(--vr-u-dock-h) + env(safe-area-inset-bottom,0px) + 8px))!important;
}

/* Fallback create sheet exists only on surfaces where the older shared shell was absent. */
#vrUnifiedCreateSheet[hidden]{display:none!important}
#vrUnifiedCreateSheet{
  position:fixed!important;
  inset:0!important;
  z-index:2147483600!important;
}
#vrUnifiedCreateSheet .vrUnifiedSheetBackdrop{
  position:absolute!important;
  inset:0!important;
  border:0!important;
  background:rgba(0,0,0,.66)!important;
}
#vrUnifiedCreateSheet .vrUnifiedSheetPanel{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px))!important;
  border-radius:20px 20px 0 0!important;
  border-top:1px solid rgba(var(--vr-u-accent-rgb),.35)!important;
  background:#0b0910!important;
}
#vrUnifiedCreateSheet .vrUnifiedSheetTitle{
  margin:0 0 10px!important;
  font-size:17px!important;
  font-weight:900!important;
}
#vrUnifiedCreateSheet .vrUnifiedCreateAction{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:13px 2px!important;
  border-bottom:1px solid var(--vr-u-line)!important;
  color:#fff!important;
  text-decoration:none!important;
}
#vrUnifiedCreateSheet .vrUnifiedCreateAction:last-child{border-bottom:0!important}
#vrUnifiedCreateSheet .vrUnifiedCreateAction b{display:block!important;font-size:14px!important}
#vrUnifiedCreateSheet .vrUnifiedCreateAction small{display:block!important;margin-top:3px!important;color:var(--vr-u-muted)!important}

/* Desktop: keep the mobile app language centered rather than stretching controls endlessly. */
@media (min-width:900px){
  body[data-vr-unified-surface="profile-edit"] > main,
  body[data-vr-unified-surface="ama"] > main,
  body[data-vr-unified-surface="settings"] > main,
  body[data-vr-unified-surface="dashboard"] > main,
  body[data-vr-unified-surface="velvet-line"] > main{
    width:min(100%,var(--vr-u-max));
    margin-left:auto!important;
    margin-right:auto!important;
  }
}