/* ==========================================================================
   VELVET ROOM - POST COMPOSER SURFACE UNIFICATION U1
   Canonical Create/Edit Post presentation authority.

   Doctrine:
   - one neutral platform surface across Social / Friends / Work
   - mode identity is accent, not wallpaper
   - shared Velvet Room panel, line, radius, typography and control grammar
   - no publish/upload/edit behavior changes
   ========================================================================== */

/* VR_COMPOSER_MODE_SKIN_BLACK_CARDS_U1E_EXACT
   Canonical composer relationship:
   - active mode artwork lives on the page
   - foreground composer surfaces stay neutral black
   - mode identity remains visible through background + restrained accents */
body[data-vr-ui="aligned-v1"]{
  --vr-composer-accent:var(--vr-social-1,var(--vr-shell-accent,#b45cff));
  --vr-composer-accent-rgb:180,92,255;
  --vr-composer-page:#050508;
  --vr-composer-panel:rgba(5,5,8,.965);
  --vr-composer-line:rgba(255,255,255,.075);
  --vr-composer-line-strong:rgba(255,255,255,.12);
  --vr-composer-text:#fff;
  --vr-composer-muted:rgba(255,255,255,.60);
  --vr-composer-radius-lg:22px;
  --vr-composer-shadow:0 14px 34px rgba(0,0,0,.34);

  color:var(--vr-composer-text) !important;
  background:
    linear-gradient(180deg,rgba(3,3,6,.44) 0%,rgba(3,3,6,.64) 50%,rgba(3,3,6,.78) 100%),
    #050508 !important;
  background-attachment:fixed !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

body[data-vr-ui="aligned-v1"].mode-social{
  --vr-composer-accent:var(--vr-social-1,var(--vr-shell-accent,#b45cff));
  --vr-composer-accent-rgb:180,92,255;
  background:
    linear-gradient(180deg,rgba(4,2,8,.42) 0%,rgba(4,2,8,.58) 48%,rgba(4,2,8,.72) 100%),
    url("/assets/radar/bg-social.png") center center / cover no-repeat fixed !important;
}
body[data-vr-ui="aligned-v1"].mode-friends{
  --vr-composer-accent:var(--vr-friends-1,#f0b35e);
  --vr-composer-accent-rgb:240,179,94;
  background:
    linear-gradient(180deg,rgba(7,5,4,.40) 0%,rgba(7,5,4,.56) 48%,rgba(7,5,4,.70) 100%),
    url("/assets/radar/bg-friends.png") center center / cover no-repeat fixed !important;
}
body[data-vr-ui="aligned-v1"].mode-work{
  --vr-composer-accent:var(--vr-work-1,#67c6ff);
  --vr-composer-accent-rgb:103,198,255;
  background:
    linear-gradient(180deg,rgba(3,6,9,.38) 0%,rgba(3,6,9,.54) 48%,rgba(3,6,9,.70) 100%),
    url("/assets/radar/bg-work.png") center center / cover no-repeat fixed !important;
}

body[data-vr-ui="aligned-v1"] .page{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:calc(env(safe-area-inset-top,0px) + 2px) 0
          calc(var(--vr-shell-h,76px) + env(safe-area-inset-bottom,0px) + 92px) !important;
}

body[data-vr-ui="aligned-v1"] .topBar{
  position:sticky !important;
  top:0 !important;
  z-index:8950 !important;
  background:rgba(0,0,0,.94) !important;
  background-image:none !important;
  border-bottom:1px solid var(--vr-composer-line) !important;
  box-shadow:none !important;
  backdrop-filter:blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.05) !important;
}

body[data-vr-ui="aligned-v1"] .topInner{
  width:100% !important;
  max-width:760px !important;
  min-height:62px !important;
  margin:0 auto !important;
  padding:10px 12px !important;
  gap:10px !important;
}

body[data-vr-ui="aligned-v1"] .pageTitle{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:19px !important;
  font-weight:850 !important;
  letter-spacing:-.025em !important;
  color:#fff !important;
}

body[data-vr-ui="aligned-v1"] .iconBtn{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  border-radius:14px !important;
  border:1px solid var(--vr-composer-line) !important;
  background:#0a0a0e !important;
  color:rgba(255,255,255,.88) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
  font-size:18px !important;
}

body[data-vr-ui="aligned-v1"] .postWrap{
  width:100% !important;
  max-width:760px !important;
  margin:0 auto !important;
  padding:14px 12px 28px !important;
}

body[data-vr-ui="aligned-v1"] .shell{
  display:grid !important;
  gap:12px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body[data-vr-ui="aligned-v1"] .head,
body[data-vr-ui="aligned-v1"] .editor,
body[data-vr-ui="aligned-v1"] .tools,
body[data-vr-ui="aligned-v1"] .options{
  position:relative !important;
  border:1px solid var(--vr-composer-line) !important;
  border-radius:var(--vr-composer-radius-lg) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 42%),
    var(--vr-composer-panel) !important;
  box-shadow:
    var(--vr-composer-shadow),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

body[data-vr-ui="aligned-v1"] .head{
  padding:13px 14px !important;
  border-bottom:1px solid var(--vr-composer-line) !important;
  gap:11px !important;
}

body[data-vr-ui="aligned-v1"] .avatar,
body[data-vr-ui="aligned-v1"] .avatarFallback{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
  border:1px solid rgba(var(--vr-composer-accent-rgb),.30) !important;
  box-shadow:0 0 0 3px rgba(var(--vr-composer-accent-rgb),.055) !important;
}

body[data-vr-ui="aligned-v1"] .name{
  font-size:14px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
}

body[data-vr-ui="aligned-v1"] .sub{
  margin-top:3px !important;
  color:var(--vr-composer-muted) !important;
  font-size:11px !important;
}

body[data-vr-ui="aligned-v1"] .modePill{
  min-height:28px !important;
  padding:0 11px !important;
  border-radius:999px !important;
  border:1px solid rgba(var(--vr-composer-accent-rgb),.26) !important;
  background:rgba(var(--vr-composer-accent-rgb),.08) !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:850 !important;
}

body[data-vr-ui="aligned-v1"] .editor{
  padding:16px !important;
  border-bottom:1px solid var(--vr-composer-line) !important;
}

body[data-vr-ui="aligned-v1"] .editorTitle{
  margin:0 0 8px !important;
  padding:0 !important;
  min-height:32px !important;
  font-size:21px !important;
  font-weight:850 !important;
  letter-spacing:-.025em !important;
  line-height:1.2 !important;
  color:#fff !important;
}

body[data-vr-ui="aligned-v1"] .editorBody{
  min-height:132px !important;
  padding:0 !important;
  color:rgba(255,255,255,.82) !important;
  font-size:16px !important;
  line-height:1.48 !important;
}

body[data-vr-ui="aligned-v1"] .editorTitle::placeholder,
body[data-vr-ui="aligned-v1"] .editorBody::placeholder,
body[data-vr-ui="aligned-v1"] .textInput::placeholder{
  color:rgba(255,255,255,.30) !important;
}

body[data-vr-ui="aligned-v1"] .previewWrap.show{
  display:block !important;
  padding:0 !important;
  border:1px solid var(--vr-composer-line) !important;
  border-radius:var(--vr-composer-radius-lg) !important;
  overflow:hidden !important;
  background:#050507 !important;
  box-shadow:var(--vr-composer-shadow) !important;
}

body[data-vr-ui="aligned-v1"] .previewGrid{
  gap:1px !important;
  background:var(--vr-composer-line) !important;
}

body[data-vr-ui="aligned-v1"] .previewItem{
  border:0 !important;
  border-radius:0 !important;
  background:#000 !important;
}

body[data-vr-ui="aligned-v1"] .previewRemove{
  width:32px !important;
  height:32px !important;
  top:10px !important;
  right:10px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(0,0,0,.82) !important;
}

body[data-vr-ui="aligned-v1"] .tools{
  padding:16px !important;
  column-gap:10px !important;
  row-gap:8px !important;
  border-bottom:1px solid var(--vr-composer-line) !important;
}

body[data-vr-ui="aligned-v1"] .tools::before{
  margin:0 0 7px !important;
  font-size:15px !important;
  font-weight:850 !important;
  letter-spacing:-.015em !important;
  color:#fff !important;
}

body[data-vr-ui="aligned-v1"] .toolRow{
  min-height:58px !important;
  padding:9px 8px !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  grid-template-columns:38px minmax(0,1fr) !important;
  gap:9px !important;
  align-items:center !important;
}

body[data-vr-ui="aligned-v1"] .toolRow:active{
  transform:scale(.988) !important;
  background:rgba(var(--vr-composer-accent-rgb),.055) !important;
  border-color:rgba(var(--vr-composer-accent-rgb),.14) !important;
}

body[data-vr-ui="aligned-v1"] .toolIcon{
  width:38px !important;
  height:38px !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  border:1px solid rgba(var(--vr-composer-accent-rgb),.13) !important;
  background:rgba(var(--vr-composer-accent-rgb),.055) !important;
  font-size:22px !important;
  line-height:1 !important;
}

body[data-vr-ui="aligned-v1"] .toolLabel{
  color:#fff !important;
  font-size:12px !important;
  font-weight:850 !important;
  line-height:1.15 !important;
}

body[data-vr-ui="aligned-v1"] .toolHint{
  margin-top:3px !important;
  color:var(--vr-composer-muted) !important;
  font-size:10px !important;
  line-height:1.2 !important;
}

body[data-vr-ui="aligned-v1"] .options{
  padding:16px !important;
}

body[data-vr-ui="aligned-v1"] .label{
  margin:0 0 7px !important;
  color:rgba(255,255,255,.62) !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.10em !important;
}

body[data-vr-ui="aligned-v1"] :where(.select,.textInput){
  min-height:50px !important;
  border:1px solid var(--vr-composer-line-strong) !important;
  border-radius:15px !important;
  background:#09090e !important;
  color:#fff !important;
  padding:0 13px !important;
  font-size:14px !important;
}

body[data-vr-ui="aligned-v1"] :where(.select,.textInput):focus{
  border-color:rgba(var(--vr-composer-accent-rgb),.38) !important;
  box-shadow:0 0 0 3px rgba(var(--vr-composer-accent-rgb),.065) !important;
}

body[data-vr-ui="aligned-v1"] .helper{
  color:var(--vr-composer-muted) !important;
  font-size:10px !important;
  line-height:1.35 !important;
}

body[data-vr-ui="aligned-v1"] .checkRow{
  min-height:62px !important;
  padding:10px 12px !important;
  border:1px solid var(--vr-composer-line) !important;
  border-radius:16px !important;
  background:#09090e !important;
}

body[data-vr-ui="aligned-v1"] .checkText{
  color:rgba(255,255,255,.79) !important;
  font-size:12px !important;
  line-height:1.3 !important;
}

body[data-vr-ui="aligned-v1"] .switch{
  width:50px !important;
  height:28px !important;
  background:rgba(255,255,255,.13) !important;
}

body[data-vr-ui="aligned-v1"] .switch::after{
  width:20px !important;
  height:20px !important;
}

body[data-vr-ui="aligned-v1"] .switch:checked{
  background:var(--vr-composer-accent) !important;
  box-shadow:0 0 16px rgba(var(--vr-composer-accent-rgb),.18) !important;
}

body[data-vr-ui="aligned-v1"] .switch:checked::after{
  left:26px !important;
}

body[data-vr-ui="aligned-v1"] .modalBackdrop{
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

body[data-vr-ui="aligned-v1"] .modalCard{
  border:1px solid var(--vr-composer-line-strong) !important;
  border-radius:24px !important;
  background:#0a090e !important;
  box-shadow:0 26px 72px rgba(0,0,0,.52) !important;
}

body[data-vr-ui="aligned-v1"] .modalHead{
  border-bottom:1px solid var(--vr-composer-line) !important;
}

body[data-vr-ui="aligned-v1"] .footerBar{
  left:0 !important;
  right:0 !important;
  bottom:calc(var(--vr-shell-h,76px) + env(safe-area-inset-bottom,0px)) !important;
  z-index:8990 !important;
  padding:9px 12px !important;
  border-top:1px solid var(--vr-composer-line) !important;
  background:rgba(0,0,0,.94) !important;
  backdrop-filter:blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.05) !important;
  box-shadow:0 -10px 28px rgba(0,0,0,.22) !important;
}

body[data-vr-ui="aligned-v1"] .footerInner{
  width:100% !important;
  max-width:760px !important;
  margin:0 auto !important;
  grid-template-columns:.92fr 1.08fr !important;
  gap:10px !important;
}

body[data-vr-ui="aligned-v1"] :where(.secondaryBtn,.primaryBtn){
  min-height:52px !important;
  height:52px !important;
  padding:0 16px !important;
  border-radius:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:15px !important;
  font-weight:850 !important;
  line-height:1 !important;
}

body[data-vr-ui="aligned-v1"] .secondaryBtn{
  border:1px solid var(--vr-composer-line-strong) !important;
  background:#0b0b10 !important;
  color:rgba(255,255,255,.88) !important;
}

body[data-vr-ui="aligned-v1"] .primaryBtn{
  border:1px solid rgba(var(--vr-composer-accent-rgb),.30) !important;
  background:
    linear-gradient(135deg,
      var(--vr-composer-accent),
      var(--vr-shell-accent2,#d657ff)
    ) !important;
  color:#fff !important;
  box-shadow:
    0 10px 26px rgba(var(--vr-composer-accent-rgb),.20),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

body[data-vr-ui="aligned-v1"] .uploadBanner{
  border:1px solid rgba(var(--vr-composer-accent-rgb),.22) !important;
  border-radius:16px !important;
  background:#0a090e !important;
  color:#fff !important;
}

body[data-vr-ui="aligned-v1"] .toast{
  border:1px solid var(--vr-composer-line) !important;
  background:rgba(5,5,8,.94) !important;
  color:#fff !important;
}

@media (max-width:620px){
  body[data-vr-ui="aligned-v1"] .postWrap{
    padding:12px 10px 24px !important;
  }

  body[data-vr-ui="aligned-v1"] .shell{
    gap:10px !important;
  }

  body[data-vr-ui="aligned-v1"] .head,
  body[data-vr-ui="aligned-v1"] .editor,
  body[data-vr-ui="aligned-v1"] .tools,
  body[data-vr-ui="aligned-v1"] .options{
    border-radius:18px !important;
  }

  body[data-vr-ui="aligned-v1"] .tools{
    grid-template-columns:1fr 1fr !important;
    column-gap:5px !important;
  }

  body[data-vr-ui="aligned-v1"] .toolRow{
    padding:8px 5px !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:7px !important;
  }

  body[data-vr-ui="aligned-v1"] .toolIcon{
    width:34px !important;
    height:34px !important;
    font-size:20px !important;
  }

  body[data-vr-ui="aligned-v1"] .footerBar{
    padding:8px 10px !important;
  }
}