/* MSG_SWARM_20_FINAL_QA · 2026-07-31
 * Cascade-LAST: close mobile motion gaps (chrome-in + brand sheen @390),
 * keep collision=0 ladder, prefer-reduced-motion. Cache: ?v=20260731-swarm20
 */
:root {
  --ms20-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ms20-cobalt: #1d4ed8;
  --ms20-sky: #0ea5e9;
}

@keyframes ms20-chrome-in {
  from { opacity: 0; transform: translate3d(0, -5px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes ms20-brand-sheen {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ms20-composer-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Chrome enter — all viewports (desk1280 already has ms8; this covers ≤1099) */
  html body[data-page="messenger"] .vy-msg-chrome,
  html body[data-page="messenger"] .cl-head.vy-msg-chrome,
  html body[data-page="messenger"] .cl-head {
    animation: ms20-chrome-in 0.4s var(--ms20-ease) both !important;
  }

  /* Brand sheen — liquid cobalt identity on phone too (not flat black) */
  html body[data-page="messenger"] .vy-msg-chrome .vy-top-brand,
  html body[data-page="messenger"] .cl-head h2.vy-top-brand,
  html body[data-page="messenger"] .cl-head h2 {
    font-family: "Unbounded", "Syne", system-ui, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    background: linear-gradient(
      105deg,
      #1e3a8a 0%,
      #1d4ed8 38%,
      #0ea5e9 62%,
      #1d4ed8 100%
    ) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    animation: ms20-brand-sheen 7.5s var(--ms20-ease) infinite !important;
    filter: none !important;
  }

  /* Soft composer breathe when focused — intentional, not spam */
  html body[data-page="messenger"] .composer:focus-within,
  html body[data-page="messenger"] .th-compose:focus-within,
  html body[data-page="messenger"] .tg-composer:focus-within {
    animation: ms20-composer-glow 2.4s var(--ms20-ease) infinite !important;
  }
}

/* Keep z-ladder / no-overlap contract (reinforce after parallel swarm CSS) */
html body[data-page="messenger"] .vy-msg-chrome,
html body[data-page="messenger"] .cl-head {
  z-index: 30 !important;
  position: relative !important;
}
html body[data-page="messenger"] .tg-stories {
  z-index: 12 !important;
  position: relative !important;
}
html body[data-page="messenger"] .tg-filters {
  z-index: 14 !important;
  position: relative !important;
}
html body[data-page="messenger"] .cl-scroll {
  z-index: 1 !important;
  position: relative !important;
}

@media (prefers-reduced-motion: reduce) {
  html body[data-page="messenger"] .vy-msg-chrome,
  html body[data-page="messenger"] .cl-head,
  html body[data-page="messenger"] .vy-msg-chrome .vy-top-brand,
  html body[data-page="messenger"] .cl-head h2.vy-top-brand,
  html body[data-page="messenger"] .cl-head h2,
  html body[data-page="messenger"] .composer:focus-within,
  html body[data-page="messenger"] .th-compose:focus-within,
  html body[data-page="messenger"] .tg-composer:focus-within {
    animation: none !important;
  }
  html body[data-page="messenger"] .vy-msg-chrome .vy-top-brand,
  html body[data-page="messenger"] .cl-head h2.vy-top-brand,
  html body[data-page="messenger"] .cl-head h2 {
    color: var(--ms20-cobalt) !important;
    -webkit-text-fill-color: var(--ms20-cobalt) !important;
    background: none !important;
  }
}