/* MSG_SWARM_08_DESK1280 · 2026-07-31
 * Desktop ≥1100/1280: ONE cool chrome · richer soft motion · no stacked FAB ·
 * cobalt #1d4ed8 · Unbounded brand · Onest body · prefers-reduced-motion.
 * Cascade after personal + swarm01. Cache: ?v=20260731-swarm08
 */
:root {
  --ms8-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ms8-cobalt: #1d4ed8;
  --ms8-sky: #0ea5e9;
  --ms8-ink: #0b1220;
  --ms8-glass: rgba(244, 247, 251, 0.82);
  --ms8-line: color-mix(in srgb, #c9d7e8 78%, transparent);
}

@keyframes ms8-brand-sheen {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ms8-pane-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes ms8-chrome-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes ms8-empty-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
@keyframes ms8-empty-ring {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.06); }
}
@keyframes ms8-ambient {
  0%, 100% { filter: saturate(1) brightness(1); }
  50%      { filter: saturate(1.08) brightness(1.02); }
}
@keyframes ms8-thread-mesh {
  0%   { background-position: 0% 40%, 100% 0%, 50% 100%; }
  50%  { background-position: 12% 48%, 88% 8%, 46% 92%; }
  100% { background-position: 0% 40%, 100% 0%, 50% 100%; }
}

/* ── Desktop 1280+ · ONE shell atmosphere (cool cobalt, not cream-only) ─── */
@media (min-width: 1100px) {
  html body[data-page="messenger"] {
    --vy-shell-ambient:
      radial-gradient(1180px 560px at 2% -12%, rgba(56, 189, 248, 0.38), transparent 58%),
      radial-gradient(980px 520px at 100% -8%, rgba(29, 78, 216, 0.32), transparent 56%),
      radial-gradient(760px 540px at 78% 112%, rgba(44, 207, 155, 0.16), transparent 50%),
      linear-gradient(168deg, #cfe3f8 0%, #eef4fb 42%, #d9e8f7 100%) !important;
    background: var(--vy-shell-ambient) !important;
    background-image: var(--vy-shell-ambient) !important;
    background-color: #d9e8f7 !important;
    background-attachment: fixed !important;
    animation: ms8-ambient 18s var(--ms8-ease) infinite;
  }

  html body[data-page="messenger"] .app {
    animation: ms8-pane-in 0.55s var(--ms8-ease) both;
  }

  /* 3-pane density @1280 — list readable, thread breathes */
  html body[data-page="messenger"] .app > .chatlist {
    width: min(380px, 29.5vw) !important;
    max-width: 400px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(244, 247, 251, 0.55) 100%) !important;
    border-right: 1px solid var(--ms8-line) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
    animation: ms8-pane-in 0.48s var(--ms8-ease) both;
  }
  html body[data-page="messenger"] .app > .thread {
    background:
      radial-gradient(820px 420px at 18% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
      radial-gradient(700px 480px at 92% 8%, rgba(29, 78, 216, 0.12), transparent 52%),
      radial-gradient(640px 400px at 60% 100%, rgba(44, 207, 155, 0.08), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(244, 247, 251, 0.28)) !important;
    background-size: 120% 120%, 130% 130%, 110% 110%, 100% 100% !important;
    animation:
      ms8-pane-in 0.62s var(--ms8-ease) 0.05s both,
      ms8-thread-mesh 22s var(--ms8-ease) infinite !important;
  }

  /* ONE cool chrome bar — beat warm personal cream on desktop */
  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 {
    background: var(--ms8-glass) !important;
    border-bottom: 1px solid var(--ms8-line) !important;
    backdrop-filter: blur(18px) saturate(1.28) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.28) !important;
    box-shadow: 0 10px 28px -22px rgba(29, 78, 216, 0.45) !important;
    animation: ms8-chrome-in 0.42s var(--ms8-ease) both;
  }

  /* Liquid brand — ONE identity signal @1280 */
  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-size: 1.12rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;
    max-width: 8rem !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: ms8-brand-sheen 7.5s var(--ms8-ease) infinite !important;
    filter: none !important;
  }
  html body[data-page="messenger"] .cl-head h2::after,
  html body[data-page="messenger"] .vy-msg-chrome h2::after {
    display: none !important;
    content: none !important;
  }

  /* Account + services: ONE chrome actions, cool surface */
  html body[data-page="messenger"] .vy-msg-chrome a[href*="account"],
  html body[data-page="messenger"] .cl-head a[href*="account"],
  html body[data-page="messenger"] .vy-msg-account {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid var(--ms8-line) !important;
    color: var(--ms8-ink) !important;
    border-radius: 12px !important;
    transition:
      transform 160ms var(--ms8-ease),
      box-shadow 180ms var(--ms8-ease),
      border-color 160ms var(--ms8-ease) !important;
  }
  html body[data-page="messenger"] .vy-msg-chrome a[href*="account"]:hover,
  html body[data-page="messenger"] .cl-head a[href*="account"]:hover {
    border-color: color-mix(in srgb, var(--ms8-cobalt) 45%, transparent) !important;
    box-shadow: 0 8px 18px -12px rgba(29, 78, 216, 0.55) !important;
    transform: translateY(-1px);
  }

  /* ONE switcher in chrome slot — hide orphan body FAB @desktop */
  html body[data-page="messenger"] .vy-msg-switcher-slot {
    display: flex !important;
    align-items: center !important;
    flex: none !important;
  }
  html body[data-page="messenger"] .vy-msg-switcher-slot .vy-product-switcher {
    position: relative !important;
    inset: auto !important;
    display: block !important;
  }
  html body[data-page="messenger"]:has(.vy-msg-switcher-slot .vy-product-switcher) > .vy-product-switcher,
  html body[data-page="messenger"]:has([data-vy-product-slot] .vy-product-switcher) > .vy-product-switcher {
    display: none !important;
  }

  /* Thread head — same cool chrome language */
  html body[data-page="messenger"] .th-head,
  html body[data-page="messenger"] .tg-head {
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 1px solid var(--ms8-line) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  }

  /* Composer — cool glass, not cream */
  html body[data-page="messenger"] .composer,
  html body[data-page="messenger"] .tg-comp {
    background: rgba(255, 255, 255, 0.8) !important;
    border-top: 1px solid var(--ms8-line) !important;
    backdrop-filter: blur(16px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  }

  /* Empty / pick states — motion + atmosphere, not plain void */
  html body[data-page="messenger"] .vyfx-empty,
  html body[data-page="messenger"] .vempty,
  html body[data-page="messenger"] .empty-state,
  html body[data-page="messenger"] .tg-body .vyfx-empty {
    position: relative !important;
    animation: ms8-empty-float 5.5s var(--ms8-ease) infinite !important;
  }
  html body[data-page="messenger"] .vyfx-empty::before,
  html body[data-page="messenger"] .vempty::before {
    content: "" !important;
    position: absolute !important;
    inset: auto !important;
    width: 160px !important;
    height: 160px !important;
    left: 50% !important;
    top: 42% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle, rgba(29, 78, 216, 0.16), transparent 68%) !important;
    animation: ms8-empty-ring 4.2s var(--ms8-ease) infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  html body[data-page="messenger"] .vyfx-empty > *,
  html body[data-page="messenger"] .vempty > * {
    position: relative !important;
    z-index: 1 !important;
  }
  html body[data-page="messenger"] .vyfx-empty .t,
  html body[data-page="messenger"] .vempty .et,
  html body[data-page="messenger"] .empty-state .es-t {
    font-family: Onest, system-ui, sans-serif !important;
    color: var(--ms8-ink) !important;
    font-weight: 650 !important;
  }

  /* Center thread content width comfort @1280 */
  html body[data-page="messenger"] .composer .wrapper,
  html body[data-page="messenger"] .th-body .wrapper,
  html body[data-page="messenger"] .tg-wrap .tg-body {
    max-width: 880px;
    margin-inline: auto;
  }

  /* Kill bottom junk on desktop too */
  html body[data-page="messenger"] .vm-tabbar,
  html body[data-page="messenger"] .mtabbar,
  html body[data-page="messenger"] [data-tabbar],
  html body[data-page="messenger"] .vshell-rail,
  html body[data-page="messenger"] nav.rail {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (min-width: 1280px) {
  html body[data-page="messenger"] .app > .chatlist {
    width: min(392px, 30.5vw) !important;
  }
  html body[data-page="messenger"] .vy-msg-chrome .vy-top-brand,
  html body[data-page="messenger"] .cl-head h2.vy-top-brand {
    font-size: 1.18rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-page="messenger"],
  html body[data-page="messenger"] .app,
  html body[data-page="messenger"] .app > .chatlist,
  html body[data-page="messenger"] .app > .thread,
  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,
  html body[data-page="messenger"] .vyfx-empty,
  html body[data-page="messenger"] .vempty,
  html body[data-page="messenger"] .vyfx-empty::before,
  html body[data-page="messenger"] .vempty::before {
    animation: none !important;
  }
}