/* MESSENGER_PIXEL_POLISH · 2026-07-31
 * Cascade-last visual lock for Messenger app shell.
 * Canon: Onest/Unbounded · cobalt #1d4ed8 · light · list+thread+compose · no office chrome.
 * Scope: body[data-page="messenger"] only. Additive — no API/JS contract changes.
 * ONE_TOP_CHROME coord: --vy-chrome-h / --vy-z-* come from vyshka-ecosystem-one.css :root.
 * Do not fork those vars here — override only when Messenger layout truly needs a delta.
 */

body[data-page="messenger"] {
  --vy-font-display: "Unbounded", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --vy-font-body: "Onest", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --font: var(--vy-font-body) !important;
  --font-display: var(--vy-font-display) !important;
  --mute: #475569 !important;
  --muted: #475569 !important;
  --sub: #334155 !important;
  --acc: #1d4ed8 !important;
  --accent: #1d4ed8 !important;
  --vy-brand: #1d4ed8 !important;
  --vy-tabbar-h: 0px;
  --vy-composer-pad: max(10px, env(safe-area-inset-bottom, 0px));
  /* Inherit --vy-chrome-h from ecosystem-one; local dens pad only */
  --vy-dens-pad-x: 12px;
  --vy-dens-row: 8px;
  font-family: var(--vy-font-body) !important;
  color-scheme: light;
}

body[data-page="messenger"] .cl-head h2,
body[data-page="messenger"] .th-head .who .nm,
body[data-page="messenger"] .tg-head .nm .a,
body[data-page="messenger"] [data-vy-display] {
  font-family: var(--vy-font-display) !important;
  letter-spacing: -0.03em;
}

/* ── 1) Office chrome stay purged (density must NOT resurrect switcher) ───── */
html body[data-page="messenger"] .rail,
html body[data-page="messenger"] .vshell-rail,
html body[data-page="messenger"] .vshell-ch,
html body[data-page="messenger"] .vshell-burger,
html body[data-page="messenger"] .vshell-scrim,
html body[data-page="messenger"] .vm-tabbar,
html 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,
html body[data-page="messenger"] .vy-messenger-product-slot,
html body[data-page="messenger"] .vy-messenger-services,
html body[data-page="messenger"] .vy-ai-chat,
html body[data-page="messenger"] .vy-messenger-start,
html body[data-page="messenger"] .vy-dev-workspace,
html body[data-page="messenger"] .vy-plan-cta,
html body[data-page="messenger"] .vy-ai-action,
html body[data-page="messenger"] .cl-folders,
html body[data-page="messenger"] .g03-th-call,
html body[data-page="messenger"] .g03-th-video,
html body[data-page="messenger"] .g03-th-members,
html body[data-page="messenger"] .g02-honest,
html body[data-page="messenger"] .vm-sheet-scrim,
html body[data-page="messenger"] .vm-sheet,
html body[data-page="messenger"] .vm-more,
html body[data-page="messenger"] .vm-info,
html body[data-page="messenger"] [data-vy-call]:not(.tg-call-btn) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Desktop: header icon switcher. Mobile WAVE07: body thumb FAB. */
@media (min-width: 641px) {
  html body[data-page="messenger"] > .vy-product-switcher {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html body[data-page="messenger"] .tg-call-btn,
  html body[data-page="messenger"] .vy-msg-switcher-slot,
  html body[data-page="messenger"] .vy-msg-switcher-slot .vy-product-switcher {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  html body[data-page="messenger"] .vy-msg-switcher-slot .vy-product-switcher {
    display: block !important;
  }
}
@media (max-width: 640px) {
  html body[data-page="messenger"] .vy-msg-switcher-slot {
    display: none !important;
  }
  html body[data-page="messenger"] > .vy-product-switcher,
  html body[data-page="messenger"] .tg-call-btn {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  html body[data-page="messenger"] .tg-call-btn {
    display: inline-flex !important;
  }
}

/* Decorative / duplicate badges */
body[data-page="messenger"] .role-badge,
body[data-page="messenger"] .vy-ai-verified,
body[data-page="messenger"] .vy-dw-badge,
body[data-page="messenger"] .cl-ch-sub,
body[data-page="messenger"] .hand-badge {
  display: none !important;
}

/* Closed overlays must not paint as ghost chrome */
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"] .f08-menu:not(.open),
body[data-page="messenger"] .context-menu:not(.show) {
  display: none !important;
  pointer-events: none !important;
}

/* ── 2) Sidebar ↔ thread chrome parity ───────────────────────────────────── */
body[data-page="messenger"] .app {
  display: flex !important;
  width: 100% !important;
  background: #f4f7fb !important;
}
body[data-page="messenger"] .app > .chatlist {
  flex: none;
  width: min(320px, 36vw) !important;
  background: #fff !important;
  border-right: 1px solid var(--bd, #d8e1ec) !important;
}
body[data-page="messenger"] .app > .thread {
  flex: 1;
  min-width: 0;
  background: #f4f7fb !important;
}

body[data-page="messenger"] .cl-head {
  min-height: var(--vy-chrome-h) !important;
  height: auto !important;
  padding: 10px var(--vy-dens-pad-x) 8px !important;
  border-bottom: 1px solid var(--bd, #d8e1ec) !important;
  background: #fff !important;
  box-sizing: border-box;
}
body[data-page="messenger"] .cl-head .row {
  margin-bottom: 8px !important;
  min-height: 36px;
  align-items: center;
}
body[data-page="messenger"] .cl-head h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--txt, #111827) !important;
}
body[data-page="messenger"] .cl-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-page="messenger"] .th-head,
body[data-page="messenger"] .tg-head {
  height: var(--vy-chrome-h) !important;
  min-height: var(--vy-chrome-h) !important;
  padding: 0 14px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--bd, #d8e1ec) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-page="messenger"] .vy-msg-account {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--bd, #d8e1ec);
  background: #fff;
  color: var(--txt, #111827);
  font: 600 12.5px/1.2 var(--vy-font-body);
  text-decoration: none;
  flex: none;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
body[data-page="messenger"] .vy-msg-account:hover {
  border-color: #1d4ed8;
  color: #1d4ed8;
}

/* ── 3) Density + overflow ───────────────────────────────────────────────── */
body[data-page="messenger"] .search {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  background: #f7f9fc !important;
  border: 1px solid var(--bd, #d8e1ec) !important;
  box-shadow: none !important;
}
body[data-page="messenger"] .cl-scroll {
  padding: 4px 6px 12px !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
body[data-page="messenger"] .conv,
body[data-page="messenger"] .cl-saved {
  min-height: 56px !important;
  padding: 8px 10px !important;
  gap: 10px !important;
  border-radius: 12px !important;
  border: 0 !important;
  margin: 0 !important;
}
body[data-page="messenger"] .conv .cv-msg,
body[data-page="messenger"] .cl-saved .b,
body[data-page="messenger"] .conv .cv-nm,
body[data-page="messenger"] .cl-saved .a {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100%;
}
body[data-page="messenger"] .conv .cv-bot,
body[data-page="messenger"] .conv .cv-msg {
  min-width: 0 !important;
}
body[data-page="messenger"] .th-body,
body[data-page="messenger"] .tg-body,
body[data-page="messenger"] #tgBody {
  padding: 12px 14px 8px !important;
  gap: 8px !important;
  background: transparent !important;
}
body[data-page="messenger"] .composer,
body[data-page="messenger"] .tg-comp {
  padding: 8px 14px var(--vy-composer-pad) !important;
  background: #fff !important;
  border-top: 1px solid var(--bd, #d8e1ec) !important;
}
body[data-page="messenger"] .composer .cbox,
body[data-page="messenger"] .tg-comp textarea {
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Groups block: denser, no peach role chip */
body[data-page="messenger"] .cl-groups {
  margin: 4px 0 6px !important;
  padding: 6px 4px 2px !important;
}
body[data-page="messenger"] .cl-groups-hd .cl-g-title {
  color: #475569 !important;
  font-weight: 700 !important;
}
body[data-page="messenger"] .cl-groups-hd button {
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
}
body[data-page="messenger"] .cl-ch {
  min-height: 40px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}
body[data-page="messenger"] .cl-groups-srv {
  gap: 6px !important;
  padding: 2px 6px 6px !important;
}

/* ── 4) Purple / glow kill · flat cobalt icons ───────────────────────────── */
body[data-page="messenger"] .cl-saved .sv,
body[data-page="messenger"] .cl-saved .av,
body[data-page="messenger"] .rail .logo,
body[data-page="messenger"] .composer .cbtns .send,
body[data-page="messenger"] .tg-comp .send,
body[data-page="messenger"] .msg.me .bubble,
body[data-page="messenger"] .tg-msg.me .tg-bub,
body[data-page="messenger"] .vd-msg.vd-me .vd-bub,
body[data-page="messenger"] .dm-empty-act,
body[data-page="messenger"] .btn.grad,
body[data-page="messenger"] .f08-card .f08-foot button.ok {
  background: #1d4ed8 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
body[data-page="messenger"] .cl-saved .sv {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  color: #fff !important;
}
body[data-page="messenger"] .cl-saved .sv svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}
body[data-page="messenger"] .msg.me .bubble,
body[data-page="messenger"] .tg-msg.me .tg-bub,
body[data-page="messenger"] .vd-msg.vd-me .vd-bub {
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.14) !important;
}

/* Broken / empty icon glyphs → consistent box */
body[data-page="messenger"] .ic:empty,
body[data-page="messenger"] svg.ic:not(:has(*)):not([viewBox]) {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  opacity: 0.35;
  border-radius: 3px;
  -webkit-mask: none;
}
body[data-page="messenger"] .btn.icon svg,
body[data-page="messenger"] .cl-head-actions button svg,
body[data-page="messenger"] .th-head button svg,
body[data-page="messenger"] .tg-head button svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex: none;
}
body[data-page="messenger"] .cl-head-actions button.btn,
body[data-page="messenger"] .cl-head-actions button {
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ── 5) 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 reserved 56px padding on every panel — reclaim bottom */
  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 bleeds past 390 CSS px */
  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"] .cl-scroll {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body[data-page="messenger"] .composer,
  body[data-page="messenger"] .tg-comp {
    padding-bottom: var(--vy-composer-pad) !important;
  }
  body[data-page="messenger"] .net-banner {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body[data-page="messenger"] .cl-head-actions :where(button, a),
  body[data-page="messenger"] .th-head .actions button,
  body[data-page="messenger"] .tg-head button,
  body[data-page="messenger"] .tg-comp .send,
  body[data-page="messenger"] .composer .cbtns .send {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  body[data-page="messenger"] .search {
    height: 44px !important;
    min-height: 44px !important;
  }
  body[data-page="messenger"] .tg-comp textarea,
  body[data-page="messenger"] .composer textarea {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  body[data-page="messenger"].mthread .thread > .th-head,
  body[data-page="messenger"].mthread .tg-head {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  }
  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;
  }
}

@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;
  }
}

/* ── 6) Composer chrome — attach/emoji visible (DM/saved no longer strip .ib) ─ */
body[data-page="messenger"] .tg-comp #tgAttach,
body[data-page="messenger"] .tg-comp #tgEmoji,
body[data-page="messenger"].vy-dm-active .tg-comp #tgAttach,
body[data-page="messenger"].vy-dm-active .tg-comp #tgEmoji,
body[data-page="messenger"].vy-saved-active .tg-comp #tgAttach,
body[data-page="messenger"].vy-saved-active .tg-comp #tgEmoji {
  display: flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ── 7) Desktop 1280 — calm empty thread, no void gradient spam ──────────── */
@media (min-width: 1280px) {
  body[data-page="messenger"] .app > .chatlist {
    width: 340px !important;
  }
  body[data-page="messenger"] .th-body .wrapper,
  body[data-page="messenger"] .composer .wrapper,
  body[data-page="messenger"] .tg-comp {
    max-width: 760px !important;
  }
  body[data-page="messenger"] .dm-empty,
  body[data-page="messenger"] .vd-dm-empty,
  body[data-page="messenger"] .vyes {
    min-height: 240px;
  }
}

/* Focus AA */
body[data-page="messenger"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #1d4ed8 !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="messenger"] .presence.on,
  body[data-page="messenger"] .presence.voice,
  body[data-page="messenger"] .conv,
  body[data-page="messenger"] .cl-saved {
    animation: none !important;
    transition: none !important;
  }
}