/* MESSENGER_CSS_DENSITY · 2026-07-31
 * Cascade-last chrome for messenger app shell.
 * Goals: kill unused/faux menu paint, tighten density, tame z-index overlays.
 * Scope: body[data-page="messenger"] only. Additive — no JS/API changes.
 */

body[data-page="messenger"] {
  --vy-dens-pad-x: 12px;
  --vy-dens-pad-y: 8px;
  --vy-dens-row: 8px;
  --vy-dens-gap: 8px;
  --vy-z-noise: -1;
  --vy-z-chrome: 40;
  --vy-z-sheet: 1300;
  --vy-z-menu: 1600;
  --vy-z-modal: 1800;
  --vy-tabbar-h: 0px;
  --vy-composer-pad: max(10px, env(safe-area-inset-bottom, 0px));
}

/* ── 1) Unused / faux chrome: never paint as “extra menus” ───────────────── */
html body[data-page="messenger"] .vm-tabbar,
html.vm-on body[data-page="messenger"] .vm-tabbar,
html body[data-page="messenger"] .mtabbar,
html.vm-on body[data-page="messenger"] .mtabbar,
html body[data-page="messenger"] .dsnav,
html body[data-page="messenger"] .m-burger,
html body[data-page="messenger"] .m-chat,
html body[data-page="messenger"] .m-scrim,
html body[data-page="messenger"] #vyAiFab,
html body[data-page="messenger"] #vyBug,
html body[data-page="messenger"] #vyBugScrim,
html body[data-page="messenger"] #vyNews,
html body[data-page="messenger"] #vyNewsScrim,
html body[data-page="messenger"] #vyNewsPanel,
html body[data-page="messenger"] #vyfix-themetoggle,
html body[data-page="messenger"] .theme-toggle,
html body[data-page="messenger"] .theme-fixed,
html body[data-page="messenger"] .vyc-tab,
html body[data-page="messenger"] .vyc-panel,
html body[data-page="messenger"] .vyc-root {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  z-index: var(--vy-z-noise) !important;
}

/* Closed popovers/menus must not occupy a layer (looks like ghost menus) */
body[data-page="messenger"] .vpop:not(.open),
body[data-page="messenger"] .vctx:not(.open),
body[data-page="messenger"] .vd-menu:not(.open),
body[data-page="messenger"] .vd-emoji:not(.open),
body[data-page="messenger"] .vd-mentlist:not(.open),
body[data-page="messenger"] .vd-panel:not(.open),
body[data-page="messenger"] .vd-status:not(.open),
body[data-page="messenger"] .tg-pick:not(.open),
body[data-page="messenger"] .context-menu:not(.show),
body[data-page="messenger"] .f08-menu:not(.open),
body[data-page="messenger"] .usf-drop:not(.open):not([data-open="1"]),
body[data-page="messenger"] .vm-sheet-scrim:not(.vm-open),
body[data-page="messenger"] .cmdk-scrim:not(.show),
body[data-page="messenger"] .vycmdk-scrim:not(.vy-open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: var(--vy-z-noise) !important;
}

/* Open menus: one ladder, below int-max auth/cmdk gates */
body[data-page="messenger"] .vpop.open,
body[data-page="messenger"] .vctx.open,
body[data-page="messenger"] .vd-menu.open,
body[data-page="messenger"] .tg-pick.open,
body[data-page="messenger"] .context-menu.show,
body[data-page="messenger"] .f08-menu.open {
  z-index: var(--vy-z-menu) !important;
}
body[data-page="messenger"] .vm-sheet-scrim.vm-open {
  z-index: var(--vy-z-sheet) !important;
}
body[data-page="messenger"] .vm-sheet-scrim.vm-open .vm-sheet {
  z-index: calc(var(--vy-z-sheet) + 1) !important;
}
/* Desktop: floating orphan switcher hidden; header slot allowed.
 * Mobile WAVE07: body thumb FAB is the ONE switcher. */
@media (min-width: 641px) {
  body[data-page="messenger"] > .vy-product-switcher,
  body[data-page="messenger"] .vy-messenger-product-slot:not(.vy-msg-switcher-slot) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body[data-page="messenger"] .vy-msg-switcher-slot,
  body[data-page="messenger"] .vy-msg-switcher-slot .vy-product-switcher {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body[data-page="messenger"] .vy-msg-switcher-slot .vy-product-switcher {
    display: block !important;
  }
}
@media (max-width: 640px) {
  body[data-page="messenger"] .vy-msg-switcher-slot,
  body[data-page="messenger"] .vy-messenger-product-slot {
    display: none !important;
  }
  body[data-page="messenger"] > .vy-product-switcher {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ── 2) Density: tighter list / thread / composer / details ──────────────── */
body[data-page="messenger"] .chatlist {
  width: min(300px, 38vw) !important;
}
body[data-page="messenger"] .cl-head {
  padding: 10px var(--vy-dens-pad-x) 8px !important;
}
body[data-page="messenger"] .cl-head .row {
  margin-bottom: 8px !important;
}
body[data-page="messenger"] .cl-head h2 {
  font-size: 17px !important;
}
body[data-page="messenger"] .cl-tabs {
  padding: 0 10px 6px !important;
}
body[data-page="messenger"] .cl-scroll {
  padding: 2px 6px !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
body[data-page="messenger"] .conv,
body[data-page="messenger"] .cl-saved {
  padding: var(--vy-dens-row) 10px !important;
  gap: 10px !important;
  border-radius: 10px !important;
}
body[data-page="messenger"] .cl-groups {
  margin: 4px 0 8px !important;
  padding: 6px 4px 2px !important;
}
body[data-page="messenger"] .cl-ch {
  min-height: 40px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}
body[data-page="messenger"] .vy-messenger-start {
  margin: 8px 10px 10px !important;
  padding: 11px 12px 10px !important;
}
body[data-page="messenger"] .vy-dev-workspace {
  margin: 0 10px 10px !important;
}
body[data-page="messenger"] .vy-dev-workspace > summary {
  padding: 10px 12px !important;
}

body[data-page="messenger"] .th-head,
body[data-page="messenger"] .tg-head {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 14px !important;
}
body[data-page="messenger"] .th-body,
body[data-page="messenger"] .tg-body,
body[data-page="messenger"] #tgBody {
  padding: 12px 14px 6px !important;
  gap: 10px !important;
}
body[data-page="messenger"] .th-body .wrapper {
  gap: 10px !important;
}
body[data-page="messenger"] .bubble,
body[data-page="messenger"] .vd-bub,
body[data-page="messenger"] .tg-bub {
  padding: 7px 11px !important;
}
body[data-page="messenger"] .composer {
  padding: 8px 14px 12px !important;
}
body[data-page="messenger"] .composer .cbox {
  padding: 6px 6px 6px 10px !important;
  gap: 6px !important;
}
body[data-page="messenger"] .tg-comp {
  padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: var(--vy-composer-pad) !important;
  padding-top: 8px !important;
}
body[data-page="messenger"] .details {
  width: min(280px, 32vw) !important;
}
body[data-page="messenger"] .det-hero {
  padding: 18px 14px 14px !important;
}
body[data-page="messenger"] .det-sec {
  padding: 12px 14px !important;
}
body[data-page="messenger"] .det-row {
  padding: 5px 0 !important;
}
body[data-page="messenger"] .g02-shell .g02-honest {
  margin: 0 12px 8px !important;
  padding: 7px 9px !important;
}

/* Rail: slightly denser without shrinking hit targets below 44 */
body[data-page="messenger"] .vshell-rail {
  padding: 10px 0 !important;
  gap: 6px !important;
}
body[data-page="messenger"] .rail {
  padding: 10px 0 !important;
  gap: 8px !important;
  width: 64px !important;
}

/* ── 3) Mobile ≤768 / @390: kill tabbar tax + inactive-panel peek overflow ─ */
@media (max-width: 768px) {
  body[data-page="messenger"] {
    --vy-tabbar-h: 0px;
    --vy-tabbar-content-h: 0px;
    --vy-tabbar-safe: 0px;
    --vy-composer-pad: max(10px, env(safe-area-inset-bottom, 0px));
  }
  body[data-page="messenger"] .chatlist {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body[data-page="messenger"] .thread,
  body[data-page="messenger"] .tg-wrap,
  body[data-page="messenger"] .app > [data-vm-panel] {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Dead .vm-tabbar left padding-bottom:56px on every panel — reclaim bottom chrome */
  html.vm-on body[data-page="messenger"] .app > [data-vm-panel],
  html.vm-on body[data-page="messenger"] .app > .chatlist,
  html.vm-on body[data-page="messenger"] .app > .thread {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* 8% translateX peek on inactive panels paints past 390 CSS px — clip hard */
  html.vm-on body[data-page="messenger"] .app > [data-vm-panel]:not([data-vm-active]),
  html.vm-on body[data-page="messenger"] .app > [data-vm-panel="conversation"]:not([data-vm-active]),
  html.vm-on body[data-page="messenger"] .app > [data-vm-panel="info"]:not([data-vm-active]),
  html.vm-on body[data-page="messenger"] .app > [data-vm-panel="chats"]:not([data-vm-active]) {
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html.vm-on body[data-page="messenger"] .app > [data-vm-panel][data-vm-active] {
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  body[data-page="messenger"] .composer,
  body[data-page="messenger"] .tg-comp {
    padding-bottom: var(--vy-composer-pad) !important;
  }
  body[data-page="messenger"] .cl-scroll {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body[data-page="messenger"] .net-banner {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body[data-page="messenger"] .th-body,
  body[data-page="messenger"] .tg-body,
  body[data-page="messenger"] #tgBody {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }
  /* Info/Ещё sheets = office chrome residue on mobile head */
  html.vm-on body[data-page="messenger"] .tg-head .vm-more,
  html.vm-on body[data-page="messenger"] .tg-head .vm-info,
  html.vm-on body[data-page="messenger"] .th-head .vm-more,
  html.vm-on body[data-page="messenger"] .th-head .vm-info {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 390px) {
  html, body[data-page="messenger"] {
    overflow-x: clip !important;
  }
  body[data-page="messenger"] .app {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }
}

/* ── 4) Kill decorative motion leftovers that read as UI chrome noise ────── */
body[data-page="messenger"] .presence.on,
body[data-page="messenger"] .presence.voice,
body[data-page="messenger"] .hand-badge {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="messenger"] .vpop,
  body[data-page="messenger"] .vctx,
  body[data-page="messenger"] .vm-sheet,
  body[data-page="messenger"] .vm-sheet-scrim {
    transition: none !important;
    animation: none !important;
  }
}