/* MSG_SWARM_17_A11Y · 2026-07-31
 * Rich motion when OS allows · hard kill when prefers-reduced-motion: reduce.
 * Focus rings · skip-link · hit ≥44 · live regions · cobalt #1d4ed8.
 * Cascade-LAST so reduce gate wins over earlier swarm layers.
 * Cache: ?v=20260731-swarm17
 */
:root {
  --ms17-cobalt: #1d4ed8;
  --ms17-ink: #0f172a;
  --ms17-mute: #475569;
  --ms17-hit: 44px;
  --ms17-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ms17-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ms17-focus: 0 0 0 3px rgba(29, 78, 216, 0.28);
}

@keyframes ms17-focus-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.22); }
}
@keyframes ms17-live-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes ms17-skip-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ms17-ring-breathe {
  0%, 100% { outline-color: rgba(29, 78, 216, 0.85); }
  50%      { outline-color: rgba(29, 78, 216, 0.45); }
}

/* Skip link above product switcher / sheets */
html body[data-page="messenger"] .skip-link {
  z-index: 1500 !important;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  left: max(12px, env(safe-area-inset-left, 0px)) !important;
  min-height: var(--ms17-hit) !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  background: var(--ms17-cobalt) !important;
  color: #fff !important;
  font-family: Onest, system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px -12px rgba(29, 78, 216, 0.55) !important;
}
html body[data-page="messenger"] .skip-link:focus,
html body[data-page="messenger"] .skip-link:focus-visible {
  transform: none !important;
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

/* Keyboard focus — never lose ring to outline:none forks */
html body[data-page="messenger"] :where(
  a, button, summary, [role="button"], [role="tab"], [role="menuitem"],
  [role="option"], [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--ms17-cobalt) !important;
  outline-offset: 2px !important;
  border-radius: 10px;
}
html body[data-page="messenger"] :where(
  .input, input[type="search"], input[type="text"], textarea, select
):focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--ms17-cobalt) !important;
}

/* Hit targets — icon chrome + list/composer */
html body[data-page="messenger"] .btn.icon,
html body[data-page="messenger"] .cl-head-actions button,
html body[data-page="messenger"] .vy-msg-newchat,
html body[data-page="messenger"] .tg-call-btn,
html body[data-page="messenger"] .tg-comp .ib,
html body[data-page="messenger"] .tg-comp .send,
html body[data-page="messenger"] .tg-comp .tg-mic,
html body[data-page="messenger"] .composer .cbtns button,
html body[data-page="messenger"] .vy-product-launcher,
html body[data-page="messenger"] .vy-msg-account,
html body[data-page="messenger"] .tg-story,
html body[data-page="messenger"] .tg-filter {
  min-width: var(--ms17-hit);
  min-height: var(--ms17-hit);
}

/* Contrast: mute copy readable on paper */
html body[data-page="messenger"] .cv-preview,
html body[data-page="messenger"] .cv-time,
html body[data-page="messenger"] .mute,
html body[data-page="messenger"] .th-head .st,
html body[data-page="messenger"] .tg-head .st {
  color: var(--ms17-mute) !important;
}

/* Live regions — polite status pops */
html body[data-page="messenger"] .toast-host,
html body[data-page="messenger"] [role="status"],
html body[data-page="messenger"] [aria-live="polite"] {
  position: relative;
}

/* Main landmark scroll margin for skip */
html body[data-page="messenger"] #main,
html body[data-page="messenger"] main,
html body[data-page="messenger"] .app {
  scroll-margin-top: 12px;
}

/* ── Rich motion (OS allows) ───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html body[data-page="messenger"] .skip-link:focus,
  html body[data-page="messenger"] .skip-link:focus-visible {
    animation: ms17-skip-in 220ms var(--ms17-ease) both;
  }

  html body[data-page="messenger"] :where(
    a, button, summary, [role="button"], [role="tab"]
  ):focus-visible {
    animation: ms17-ring-breathe 1.6s var(--ms17-ease) infinite;
  }

  html body[data-page="messenger"] .toast,
  html body[data-page="messenger"] .toast-host > *,
  html body[data-page="messenger"] .net-banner,
  html body[data-page="messenger"] .vy-nis-sheet,
  html body[data-page="messenger"] .tg-sheet,
  html body[data-page="messenger"] .vd-emoji.open,
  html body[data-page="messenger"] .ms2-emoji-fallback {
    animation: ms17-live-in 320ms var(--ms17-ease) both;
  }

  html body[data-page="messenger"] .cl-scroll .conv:focus-visible,
  html body[data-page="messenger"] .cl-saved:focus-visible {
    animation: ms17-focus-pulse 1.4s var(--ms17-ease) infinite;
  }

  html body[data-page="messenger"] .tg-body .msg,
  html body[data-page="messenger"] .th-body .msg,
  html body[data-page="messenger"] .tg-body .vd-b,
  html body[data-page="messenger"] .th-body .vd-b {
    transition:
      transform 180ms var(--ms17-spring),
      box-shadow 200ms var(--ms17-ease),
      background 180ms ease;
  }

  html body[data-page="messenger"] .composer .cbtns .send:active,
  html body[data-page="messenger"] .tg-comp .send:active,
  html body[data-page="messenger"] #tgSend:active {
    transform: scale(0.92);
  }

  /* Soft hover lift — personal, not purple glow */
  html body[data-page="messenger"] .btn.icon:hover,
  html body[data-page="messenger"] .vy-msg-newchat:hover,
  html body[data-page="messenger"] .tg-call-btn:hover {
    transform: translateY(-1px);
    transition: transform 160ms var(--ms17-spring), background 160ms ease, color 160ms ease;
  }
}

/* ── HARD reduce gate (wins over earlier swarm motion) ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-vy-reduce-motion="1"] body[data-page="messenger"] *,
  html[data-vy-reduce-motion="1"] body[data-page="messenger"] *::before,
  html[data-vy-reduce-motion="1"] body[data-page="messenger"] *::after,
  html body[data-page="messenger"] *,
  html body[data-page="messenger"] *::before,
  html body[data-page="messenger"] *::after {
    animation: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html body[data-page="messenger"] .cl-scroll .conv:hover,
  html body[data-page="messenger"] .cl-saved:hover,
  html body[data-page="messenger"] .tg-filter:hover,
  html body[data-page="messenger"] .tg-story:hover,
  html body[data-page="messenger"] .btn.icon:hover,
  html body[data-page="messenger"] .vy-msg-newchat:hover,
  html body[data-page="messenger"] .tg-call-btn:hover,
  html body[data-page="messenger"] .composer .cbtns .send:active,
  html body[data-page="messenger"] .tg-comp .send:active,
  html body[data-page="messenger"] #tgSend:active {
    transform: none !important;
  }

  /* Auth gate pulse (inline style in page) */
  html body[data-page="messenger"] .vy-auth-gate-mark::after,
  html[data-auth-state] .vy-auth-gate-mark::after {
    animation: none !important;
  }

  /* Keep focus visible without motion */
  html body[data-page="messenger"] :where(
    a, button, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: 3px solid var(--ms17-cobalt) !important;
    outline-offset: 2px !important;
  }
}

/* Mobile 390 — larger taps, no phantom pad */
@media (max-width: 640px) {
  html body[data-page="messenger"] .tg-filter,
  html body[data-page="messenger"] .btn.icon,
  html body[data-page="messenger"] .vy-msg-newchat,
  html body[data-page="messenger"] .tg-call-btn {
    min-width: 48px !important;
    min-height: 48px !important;
  }
}