/* MSG_SWARM_14_GRAPHIC · 2026-07-31
 * Cascade-LAST graphic atmosphere ×1e7 — meshes · liquid titles · parallel soft anim.
 * Beats personal-x1000 flat ink titles / weak grain. Cobalt #1d4ed8 · no purple.
 * Cache: ?v=20260731-swarm14
 */
:root {
  --ms14-cobalt: #1d4ed8;
  --ms14-deep: #1e3a8a;
  --ms14-sky: #38bdf8;
  --ms14-mint: #2ccf9b;
  --ms14-ink: #0f172a;
  --ms14-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ms14-font-liquid: "Syne", "Unbounded", "Avenir Next", system-ui, sans-serif;
  --ms14-font-display: "Unbounded", "Syne", system-ui, sans-serif;
  --ms14-font-body: "Onest", "Segoe UI", system-ui, sans-serif;
}

@keyframes ms14-liquid {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes ms14-mesh-drift {
  0%   { background-position: 0% 0%, 100% 40%, 40% 100%; }
  33%  { background-position: 8% 12%, 88% 28%, 52% 92%; }
  66%  { background-position: 4% 22%, 94% 48%, 36% 86%; }
  100% { background-position: 0% 0%, 100% 40%, 40% 100%; }
}
@keyframes ms14-grain-breathe {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%      { opacity: 0.42; transform: scale(1.02); }
}
@keyframes ms14-orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
  40%      { transform: translate3d(2.5%, -1.8%, 0) scale(1.04); opacity: 0.72; }
  70%      { transform: translate3d(-1.6%, 2.2%, 0) scale(0.98); opacity: 0.48; }
}
@keyframes ms14-thread-mesh {
  0%   { background-position: 0 0, 18px 12px, 0% 40%, 100% 0%; }
  50%  { background-position: 14px 10px, 4px 22px, 10% 48%, 90% 8%; }
  100% { background-position: 0 0, 18px 12px, 0% 40%, 100% 0%; }
}
@keyframes ms14-ambient {
  0%, 100% { filter: saturate(1) brightness(1); }
  50%      { filter: saturate(1.1) brightness(1.025); }
}
@keyframes ms14-brand-mark {
  0%, 100% { background-position: 0% 50%; letter-spacing: 0.2em; }
  50%      { background-position: 100% 50%; letter-spacing: 0.26em; }
}
@keyframes ms14-presence {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.0), 0 6px 16px -8px rgba(29, 78, 216, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.14), 0 8px 20px -8px rgba(29, 78, 216, 0.55); }
}

/* ── Shell atmosphere: cobalt mesh wash (not plain cream slab) ───────────── */
html body[data-page="messenger"] {
  --ms14-shell:
    radial-gradient(1180px 560px at 2% -14%, rgba(56, 189, 248, 0.36), transparent 58%),
    radial-gradient(980px 520px at 100% -6%, rgba(29, 78, 216, 0.3), transparent 56%),
    radial-gradient(760px 540px at 78% 112%, rgba(44, 207, 155, 0.15), transparent 50%),
    linear-gradient(168deg, #cfe3f8 0%, #eef4fb 38%, #dceaf8 72%, #e8f0f9 100%);
  background: var(--ms14-shell) !important;
  background-image: var(--ms14-shell) !important;
  background-color: #d9e8f7 !important;
  background-attachment: fixed !important;
  animation: ms14-ambient 16s var(--ms14-ease) infinite;
}

/* Layer A — grain mesh (SVG noise), parallel soft breathe */
html body[data-page="messenger"]::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.34 !important;
  mix-blend-mode: soft-light !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E") !important;
  background-size: 220px 220px !important;
  animation: ms14-grain-breathe 11s var(--ms14-ease) infinite !important;
}

/* Layer B — soft cobalt/sky/mint mesh orbs (body::after free) */
html body[data-page="messenger"]::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: -8% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.62 !important;
  background:
    radial-gradient(42% 34% at 12% 18%, rgba(56, 189, 248, 0.28), transparent 70%),
    radial-gradient(38% 32% at 88% 14%, rgba(29, 78, 216, 0.26), transparent 68%),
    radial-gradient(36% 30% at 72% 88%, rgba(44, 207, 155, 0.16), transparent 70%),
    radial-gradient(28% 24% at 28% 78%, rgba(14, 165, 233, 0.12), transparent 72%) !important;
  background-size: 120% 120%, 130% 120%, 120% 130%, 110% 110% !important;
  animation:
    ms14-mesh-drift 22s var(--ms14-ease) infinite,
    ms14-orb-float 18s var(--ms14-ease) infinite !important;
  mix-blend-mode: multiply;
}

html body[data-page="messenger"] .app {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

/* ── Liquid titles — restore after personal flat kill ────────────────────── */
html body[data-page="messenger"] .cl-head h2,
html body[data-page="messenger"] .cl-head h2.vy-top-brand,
html body[data-page="messenger"] .vy-msg-chrome h2,
html body[data-page="messenger"] .vy-msg-chrome .vy-top-brand {
  position: relative !important;
  font-family: var(--ms14-font-liquid) !important;
  font-weight: 800 !important;
  font-size: clamp(1.22rem, 1.85vw, 1.58rem) !important;
  letter-spacing: -0.052em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  background: linear-gradient(
    115deg,
    #082f9b 0%,
    #1d4ed8 20%,
    #38bdf8 46%,
    #2ccf9b 66%,
    #1d4ed8 86%,
    #082f9b 100%
  ) !important;
  background-size: 280% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: ms14-liquid 5.6s var(--ms14-ease) infinite !important;
  filter: drop-shadow(0 10px 18px rgba(29, 78, 216, 0.2)) !important;
}

html body[data-page="messenger"] .cl-head h2::after,
html body[data-page="messenger"] .cl-head h2.vy-top-brand::after,
html body[data-page="messenger"] .vy-msg-chrome h2::after {
  content: "ВЫШКА" !important;
  display: block !important;
  margin-top: 3px !important;
  font-family: var(--ms14-font-display) !important;
  font-size: 0.5em !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #1d4ed8, #38bdf8 38%, #2ccf9b 72%, #1d4ed8) !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: ms14-brand-mark 7.2s var(--ms14-ease) infinite reverse !important;
  filter: none !important;
}

/* Peer / thread names — liquid curve (body stays Onest readable) */
html body[data-page="messenger"] .conv .cv-nm,
html body[data-page="messenger"] .th-head .who .nm,
html body[data-page="messenger"] .tg-head .nm .a {
  font-family: var(--ms14-font-liquid) !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  background: linear-gradient(100deg, #0f172a 8%, #1e40af 42%, #0284c7 74%, #0f172a 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;
}

@media (prefers-reduced-motion: no-preference) {
  html body[data-page="messenger"] .conv.active .cv-nm,
  html body[data-page="messenger"] .th-head .who .nm,
  html body[data-page="messenger"] .tg-head .nm .a {
    animation: ms14-liquid 9.2s var(--ms14-ease) infinite !important;
  }
}

/* Message body — never liquid-fill */
html body[data-page="messenger"] .msg .bubble,
html body[data-page="messenger"] .tg-bub,
html body[data-page="messenger"] .vd-bub,
html body[data-page="messenger"] .composer textarea,
html body[data-page="messenger"] .conv .cv-msg {
  font-family: var(--ms14-font-body) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  letter-spacing: 0 !important;
}
html body[data-page="messenger"] .msg:not(.me) .bubble,
html body[data-page="messenger"] .tg-msg:not(.me) .tg-bub {
  color: var(--ms14-ink) !important;
  -webkit-text-fill-color: var(--ms14-ink) !important;
}
html body[data-page="messenger"] .msg.me .bubble,
html body[data-page="messenger"] .tg-msg.me .tg-bub {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ── Thread mesh plane (parallel soft anim) ──────────────────────────────── */
html body[data-page="messenger"] .app > .thread,
html body[data-page="messenger"] .thread {
  position: relative !important;
  isolation: isolate !important;
  background:
    radial-gradient(ellipse 80% 46% at 50% -8%, rgba(29, 78, 216, 0.16), transparent 58%),
    radial-gradient(ellipse 50% 40% at 100% 80%, rgba(56, 189, 248, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(226, 238, 250, 0.72), rgba(240, 246, 252, 0.42)) !important;
  background-image:
    radial-gradient(ellipse 80% 46% at 50% -8%, rgba(29, 78, 216, 0.16), transparent 58%),
    radial-gradient(ellipse 50% 40% at 100% 80%, rgba(56, 189, 248, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(226, 238, 250, 0.72), rgba(240, 246, 252, 0.42)) !important;
}

html body[data-page="messenger"] .app > .thread::before,
html body[data-page="messenger"] .thread::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.55 !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(29, 78, 216, 0.09) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 72% 48%, rgba(14, 165, 233, 0.08) 0 1.1px, transparent 1.6px),
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(29, 78, 216, 0.08), transparent 62%),
    radial-gradient(ellipse 60% 45% at 86% 70%, rgba(56, 189, 248, 0.07), transparent 60%) !important;
  background-size: 30px 30px, 38px 38px, 100% 100%, 100% 100% !important;
  animation: ms14-thread-mesh 24s var(--ms14-ease) infinite !important;
}

html body[data-page="messenger"] .app > .thread > *,
html body[data-page="messenger"] .thread > * {
  position: relative;
  z-index: 1;
}

/* Chat list — soft glass over mesh, not opaque paper slab */
html body[data-page="messenger"] .app > .chatlist {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(236, 244, 252, 0.7) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  border-right: 1px solid color-mix(in srgb, #b8cce4 75%, transparent) !important;
}

html body[data-page="messenger"] .cl-head,
html body[data-page="messenger"] .vy-msg-chrome {
  background: color-mix(in srgb, #fff 72%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  border-bottom: 1px solid color-mix(in srgb, #c5d6ea 70%, transparent) !important;
  overflow: visible !important;
}

/* Avatars — cobalt presence (parallel with liquid/mesh) */
@media (prefers-reduced-motion: no-preference) {
  html body[data-page="messenger"] .conv.active .av,
  html body[data-page="messenger"] .th-head .av,
  html body[data-page="messenger"] .tg-av {
    animation: ms14-presence 2.8s var(--ms14-ease) infinite !important;
  }
}

/* Empty / brand tile — soft mesh glow */
html body[data-page="messenger"] .empty-state .es-ic,
html body[data-page="messenger"] .dm-empty::before {
  box-shadow:
    0 16px 36px -18px rgba(29, 78, 216, 0.5),
    0 0 0 1px rgba(29, 78, 216, 0.12) !important;
}

html body[data-page="messenger"] .empty-state .es-t {
  font-family: var(--ms14-font-display) !important;
  background: linear-gradient(105deg, #1e3a8a, #1d4ed8 45%, #0ea5e9) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: ms14-liquid 8s var(--ms14-ease) infinite !important;
}

/* Composer glass over atmosphere */
html body[data-page="messenger"] .composer,
html body[data-page="messenger"] .tg-comp {
  background: color-mix(in srgb, #fff 80%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  border-top: 1px solid color-mix(in srgb, #c5d6ea 72%, transparent) !important;
}

/* Reduced motion — keep atmosphere static, kill parallel loops */
@media (prefers-reduced-motion: reduce) {
  html body[data-page="messenger"],
  html body[data-page="messenger"]::before,
  html body[data-page="messenger"]::after,
  html body[data-page="messenger"] .cl-head h2,
  html body[data-page="messenger"] .cl-head h2::after,
  html body[data-page="messenger"] .cl-head h2.vy-top-brand,
  html body[data-page="messenger"] .cl-head h2.vy-top-brand::after,
  html body[data-page="messenger"] .vy-msg-chrome h2,
  html body[data-page="messenger"] .vy-msg-chrome h2::after,
  html body[data-page="messenger"] .conv.active .cv-nm,
  html body[data-page="messenger"] .th-head .who .nm,
  html body[data-page="messenger"] .tg-head .nm .a,
  html body[data-page="messenger"] .app > .thread::before,
  html body[data-page="messenger"] .thread::before,
  html body[data-page="messenger"] .conv.active .av,
  html body[data-page="messenger"] .th-head .av,
  html body[data-page="messenger"] .tg-av,
  html body[data-page="messenger"] .empty-state .es-t {
    animation: none !important;
  }
  html body[data-page="messenger"]::before { opacity: 0.22 !important; }
  html body[data-page="messenger"]::after { opacity: 0.4 !important; }
}