/* §W3-SAFEAREA · seal 20260805-w3safe1 · tips LOCKED · standalone Msg/Voice/Account */
:root, html {
  --vy-w3-sat: env(safe-area-inset-top, 0px);
  --vy-w3-sab: env(safe-area-inset-bottom, 0px);
  --vy-w3-sal: env(safe-area-inset-left, 0px);
  --vy-w3-sar: env(safe-area-inset-right, 0px);
}

/* Messenger — cascade-last reassert (msgpwa2 + display-mode) */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  body[data-page="messenger"] .cl-head,
  body[data-page="messenger"] .cl-head.vy-msg-chrome {
    padding-top: calc(10px + var(--vy-w3-sat)) !important;
  }
  body[data-page="messenger"] .tg-head,
  body[data-page="messenger"] .th-head {
    height: auto !important;
    min-height: calc(56px + var(--vy-w3-sat)) !important;
    padding-top: var(--vy-w3-sat) !important;
    box-sizing: border-box !important;
  }
  body[data-page="messenger"] .tg-comp,
  body[data-page="messenger"] .composer {
    padding-bottom: calc(8px + var(--vy-w3-sab)) !important;
  }
  body[data-page="messenger"] .app > [data-vm-panel] {
    padding-bottom: 0 !important;
  }
}
html[data-vy-pwa="standalone"] body[data-page="messenger"] .cl-head,
html[data-vy-pwa="standalone"] body[data-page="messenger"] .cl-head.vy-msg-chrome {
  padding-top: calc(10px + var(--vy-sat, var(--vy-w3-sat))) !important;
}
html[data-vy-pwa="standalone"] body[data-page="messenger"] .tg-head,
html[data-vy-pwa="standalone"] body[data-page="messenger"] .th-head {
  height: auto !important;
  min-height: calc(56px + var(--vy-sat, var(--vy-w3-sat))) !important;
  padding-top: var(--vy-sat, var(--vy-w3-sat)) !important;
  box-sizing: border-box !important;
}
html[data-vy-pwa="standalone"] body[data-page="messenger"] .tg-comp,
html[data-vy-pwa="standalone"] body[data-page="messenger"] .composer {
  padding-bottom: calc(8px + var(--vy-sab, var(--vy-w3-sab))) !important;
}
html[data-vy-pwa="standalone"] body[data-page="messenger"] .app > [data-vm-panel] {
  padding-bottom: 0 !important;
}

/* Voice — stage-head was height:56 with NO top inset → under Dynamic Island */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  body[data-page="voice"] .stage-head,
  body[data-page="voice"] .stage > .stage-head {
    height: auto !important;
    min-height: calc(56px + var(--vy-w3-sat)) !important;
    padding-top: var(--vy-w3-sat) !important;
    padding-left: max(12px, var(--vy-w3-sal)) !important;
    padding-right: max(12px, var(--vy-w3-sar)) !important;
    box-sizing: border-box !important;
  }
  body[data-page="voice"] .sidebar .sb-top {
    padding-top: calc(14px + var(--vy-w3-sat)) !important;
  }
}
html[data-vy-pwa="standalone"] body[data-page="voice"] .stage-head {
  height: auto !important;
  min-height: calc(56px + var(--vy-w3-sat)) !important;
  padding-top: var(--vy-w3-sat) !important;
  box-sizing: border-box !important;
}
html[data-vy-pwa="standalone"] body[data-page="voice"] .sidebar .sb-top {
  padding-top: calc(14px + var(--vy-w3-sat)) !important;
}

/* Account — kill ghost 56px bottom pad while mtabbar hidden */
html[data-vy-lkshell1] body.vm-on {
  padding-bottom: var(--vy-sab, var(--vy-w3-sab)) !important;
}
html[data-vy-lkshell1] .mtabbar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  html[data-vy-lkshell1] .topbar,
  html[data-vy-lkshell1] .topbar.shell,
  html[data-vy-lkshell1] header.topbar,
  html[data-vy-lkshell1] .mp-top {
    padding-top: max(10px, var(--vy-sat, var(--vy-w3-sat))) !important;
  }
  body[data-page="account"] .auth-shell,
  body[data-page="account"] .vy-auth-gate,
  body[data-page="account"] .auth-card {
    padding-top: max(16px, calc(8px + var(--vy-w3-sat))) !important;
    padding-bottom: max(24px, calc(16px + var(--vy-w3-sab))) !important;
  }
}

/* Legacy black-translucent installs: cobalt band under status glyphs */
html[data-vy-pwa="standalone"] body[data-page="voice"]::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--vy-w3-sat);
  background: #1d4ed8;
  z-index:1184;
  pointer-events: none;
}
html[data-vy-pwa="standalone"][data-vy-lkshell1] body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--vy-w3-sat);
  background: #1d4ed8;
  z-index:1184;
  pointer-events: none;
}