/* MSG_SWARM_07_MOBILE390 · 2026-07-31 · MSG_VIS_05 harden
 * @≤420 / 390 CSS px: every visible tap ≥44 · tabbar=0 · motion+ · no overlap · no dead overlays.
 * Cascade-LAST over personal-x1000 / telegram-visual / swarm01.
 * Cache: ?v=20260731-vis05
 */
:root {
  --ms7-hit: 44px;
  --ms7-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ms7-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  --ms7-cobalt: #1d4ed8;
}

/* ── Hard-kill tabbar (reinforce swarm16) ─────────────────────────────────── */
html body[data-page="messenger"] .vm-tabbar,
html body[data-page="messenger"] .mtabbar,
html body[data-page="messenger"] nav.mtabbar,
html body[data-page="messenger"] #vm-tabbar-premium,
html body[data-page="messenger"] .dsnav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* Call buttons must NOT pierce inactive thread (visibility:visible !important leak) */
html.vm-on body[data-page="messenger"] .app > [data-vm-panel]:not([data-vm-active]) .tg-call-btn,
html.vm-on body[data-page="messenger"] .app > .thread:not([data-vm-active]) .tg-call-btn,
body[data-page="messenger"]:not(.mthread) .thread .tg-call-btn,
body[data-page="messenger"]:not(.mthread) .tg-head .tg-call-btn,
body[data-page="messenger"]:not(.mthread) .th-head .tg-call-btn {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

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

  /* ── Every visible chrome tap ≥44 ──────────────────────────────────────── */
  body[data-page="messenger"] .cl-head-actions :where(button, a),
  body[data-page="messenger"] .vy-msg-newchat,
  body[data-page="messenger"] .vy-msg-account,
  body[data-page="messenger"] .tg-filter,
  body[data-page="messenger"] .tg-story,
  body[data-page="messenger"] .tg-head button,
  body[data-page="messenger"] .th-head .actions button,
  body[data-page="messenger"] .th-head .tg-call-btn,
  body[data-page="messenger"] .tg-head .tg-call-btn,
  body[data-page="messenger"] .tg-comp .ib,
  body[data-page="messenger"] .tg-comp .send,
  body[data-page="messenger"] .tg-comp #tgAttach,
  body[data-page="messenger"] .tg-comp #tgEmoji,
  body[data-page="messenger"] .tg-comp .tg-mic,
  body[data-page="messenger"] .composer .cbtns button,
  body[data-page="messenger"] .composer .cbtns .send,
  body[data-page="messenger"] .reply-bar .rb-close,
  body[data-page="messenger"] .vd-headbtn,
  body[data-page="messenger"] .m-back,
  body[data-page="messenger"] .tg-invite-mini,
  body[data-page="messenger"] .tg-invite-row-ctas button,
  body[data-page="messenger"] [data-tg-invite-accept],
  body[data-page="messenger"] [data-tg-invite-decline],
  body[data-page="messenger"] > .vy-product-switcher .vy-product-launcher {
    min-width: var(--ms7-hit) !important;
    min-height: var(--ms7-hit) !important;
  }
  body[data-page="messenger"] .tg-invite-mini,
  body[data-page="messenger"] .tg-invite-row-ctas button {
    height: var(--ms7-hit) !important;
    padding: 0 14px !important;
  }

  body[data-page="messenger"] .tg-call-btn,
  body[data-page="messenger"] .th-head .tg-call-btn,
  body[data-page="messenger"] .tg-head .tg-call-btn {
    width: var(--ms7-hit) !important;
    height: var(--ms7-hit) !important;
    min-width: var(--ms7-hit) !important;
    min-height: var(--ms7-hit) !important;
  }

  body[data-page="messenger"] .tg-filter {
    min-height: var(--ms7-hit) !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
  }
  body[data-page="messenger"] .tg-filter[data-tg-filter="saved"] {
    min-width: var(--ms7-hit) !important;
  }

  body[data-page="messenger"] .search,
  body[data-page="messenger"] .vy-msg-chrome__search,
  body[data-page="messenger"] .tg-comp textarea,
  body[data-page="messenger"] .composer textarea {
    min-height: var(--ms7-hit) !important;
  }

  /* ── Composer: full-width input (FAB already lifted above — drop 72px pad) ─ */
  body[data-page="messenger"] .composer,
  body[data-page="messenger"] .tg-comp {
    padding: 8px 10px max(10px, env(safe-area-inset-bottom, 0px)) 10px !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-end !important;
  }
  body[data-page="messenger"] .tg-comp textarea,
  body[data-page="messenger"] .composer textarea,
  body[data-page="messenger"] #tgInput {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    font-size: 16px !important; /* iOS no-zoom */
  }

  /* FAB: sit above composer / list thumb zone — never inside composer row */
  body[data-page="messenger"] > .vy-product-switcher {
    position: fixed !important;
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(96px, calc(88px + env(safe-area-inset-bottom, 0px))) !important;
    left: auto !important;
    top: auto !important;
    z-index: 1900 !important;
  }
  body[data-page="messenger"].mthread > .vy-product-switcher {
    /* Thread: park left of send, above composer — no right-pad tax */
    bottom: max(92px, calc(84px + env(safe-area-inset-bottom, 0px))) !important;
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }

  /* ── Restore .m-back (was killed with tabbar era) — ≥44, no overlap with head */
  html.vm-on body[data-page="messenger"].mthread .m-back,
  body[data-page="messenger"].mthread .m-back {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    z-index: 1400 !important;
    min-width: var(--ms7-hit) !important;
    min-height: var(--ms7-hit) !important;
    height: var(--ms7-hit) !important;
    padding: 0 12px 0 10px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #d5e0ee !important;
    box-shadow: 0 8px 20px -14px rgba(15, 47, 104, 0.35) !important;
    color: #0f172a !important;
    font: inherit;
    font-size: 13.5px !important;
    font-weight: 650 !important;
  }
  /* Make room in thread head for floating back */
  html.vm-on body[data-page="messenger"].mthread .tg-head,
  html.vm-on body[data-page="messenger"].mthread .thread > .th-head,
  body[data-page="messenger"].mthread .tg-head,
  body[data-page="messenger"].mthread .thread > .th-head {
    padding-left: max(72px, calc(64px + env(safe-area-inset-left, 0px))) !important;
  }

  /* Inactive panels: no peek / no hit targets */
  html.vm-on body[data-page="messenger"] .app > [data-vm-panel]:not([data-vm-active]) {
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Filters row: contain OX, no collide with stories */
  body[data-page="messenger"] .tg-filters {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 8px 10px !important;
    isolation: isolate;
  }
  body[data-page="messenger"] .tg-filters::-webkit-scrollbar { display: none; }
  body[data-page="messenger"] .tg-stories {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
  }

  /* List rows clear FAB */
  body[data-page="messenger"]:not(.mthread) .cl-scroll {
    padding-bottom: calc(var(--ms7-hit) + 88px) !important;
  }
}

/* ── Motion+ (respect reduce) ─────────────────────────────────────────────── */
@media (max-width: 420px) and (prefers-reduced-motion: no-preference) {
  @keyframes ms7-thread-in {
    from { opacity: 0; transform: translate3d(12px, 0, 0); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes ms7-filter-tap {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.96); }
    100% { transform: scale(1); }
  }
  @keyframes ms7-send-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(0.92); }
    100% { transform: scale(1); }
  }
  @keyframes ms7-back-in {
    from { opacity: 0; transform: translate3d(-8px, 0, 0); }
    to   { opacity: 1; transform: none; }
  }

  body[data-page="messenger"].mthread .app > .thread[data-vm-active],
  body[data-page="messenger"].mthread .tg-wrap {
    animation: ms7-thread-in 320ms var(--ms7-ease) both;
  }
  body[data-page="messenger"] .tg-filter[aria-selected="true"] {
    animation: ms7-filter-tap 280ms var(--ms7-spring) both;
  }
  body[data-page="messenger"] .tg-comp .send:active,
  body[data-page="messenger"] .composer .cbtns .send:active {
    animation: ms7-send-pop 220ms var(--ms7-spring) both;
  }
  body[data-page="messenger"].mthread .m-back {
    animation: ms7-back-in 280ms var(--ms7-ease) both;
  }
  body[data-page="messenger"] .tg-comp .ib,
  body[data-page="messenger"] .tg-head button,
  body[data-page="messenger"] .th-head .actions button {
    transition:
      transform 160ms var(--ms7-spring),
      background 160ms ease,
      color 160ms ease !important;
  }
  body[data-page="messenger"] .tg-comp .ib:active,
  body[data-page="messenger"] .tg-head button:active,
  body[data-page="messenger"] .th-head .actions button:active {
    transform: scale(0.94);
  }
  body[data-page="messenger"] .tg-comp textarea:focus {
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14) !important;
    border-color: color-mix(in srgb, var(--ms7-cobalt) 45%, #d5e0ee) !important;
    transition: box-shadow 180ms var(--ms7-ease), border-color 180ms ease !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="messenger"].mthread .app > .thread[data-vm-active],
  body[data-page="messenger"] .tg-filter[aria-selected="true"],
  body[data-page="messenger"] .tg-comp .send,
  body[data-page="messenger"].mthread .m-back {
    animation: none !important;
  }
  body[data-page="messenger"] .tg-comp .ib:active,
  body[data-page="messenger"] .tg-head button:active {
    transform: none !important;
  }
}

/* ── MSG_VIS_05 · 390 dead overlays = 0 ───────────────────────────────────── */
@media (max-width: 420px) {
  /* Hidden / closed overlays must never steal hits */
  html body[data-page="messenger"] #tgCallUi[hidden],
  html body[data-page="messenger"] .tg-call-ui[hidden],
  html body[data-page="messenger"] .vmatt-lb:not(.show),
  html body[data-page="messenger"] .vymsgx-dz:not(.on),
  html body[data-page="messenger"] .modal-backdrop:not(.show):not(.open),
  html body[data-page="messenger"] .overlay:not(.show):not(.open),
  html body[data-page="messenger"] [data-overlay][hidden],
  html body[data-page="messenger"] dialog:not([open]) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Inactive thread pane must not cover chatlist taps */
  html body[data-page="messenger"]:not(.mthread) .app > .thread,
  html body[data-page="messenger"]:not(.mthread) .app > [data-vm-panel="thread"],
  html.vm-on body[data-page="messenger"] .app > .thread:not([data-vm-active]),
  html.vm-on body[data-page="messenger"] .app > [data-vm-panel]:not([data-vm-active]) {
    pointer-events: none !important;
  }
  html body[data-page="messenger"]:not(.mthread) .app > .chatlist,
  html body[data-page="messenger"]:not(.mthread) .app > [data-vm-panel="chatlist"],
  html.vm-on body[data-page="messenger"] .app > .chatlist[data-vm-active],
  html.vm-on body[data-page="messenger"] .app > [data-vm-panel="chatlist"][data-vm-active] {
    pointer-events: auto !important;
    z-index: 2 !important;
  }

  /* Eco-assist closed / story viewer closed */
  html body[data-page="messenger"] .vy-eco-assist:not(.open):not(.on),
  html body[data-page="messenger"] #ecoAssistPanel:not(.open):not([aria-hidden="false"]),
  html body[data-page="messenger"] .tg-story-viewer[hidden],
  html body[data-page="messenger"] .tg-story-viewer:not(.open):not(.show) {
    pointer-events: none !important;
  }
}