/* VYSHKA Cloud · ONE design chrome (2026-07-31)
 * Additive bridge across Voice / Messenger / Account / AI / Files / Store / Remote.
 * Load after ecosystem-2030-tokens.css + vyshka-unified.css.
 * Canon: Onest body · Unbounded display · light-first · cobalt brand (no purple AI-slop).
 * Wave-09 AFTER: AA mute · skip-link · accent lock · soft-purple kill.
 * ONE_TOP_CHROME: shared layout vars — coordinate with Messenger no-overlap
 * (messenger-pixel-polish / messenger-visual-x10000 must consume these, not fork).
 */
:root {
  --vy-font-display: "Unbounded", "Syne", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --vy-font-liquid: "Syne", "Unbounded", "Avenir Next", system-ui, sans-serif;
  --vy-font-body: "Onest", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --vy-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font: var(--vy-font-body);
  --font-display: var(--vy-font-display);
  --mono: var(--vy-font-mono);
  --vy-cobalt: #1d4ed8;
  --vy-brand: #1d4ed8;
  --vy-brand-hover: #1e40af;
  --vy-brand-deep: #1e3a8a;
  --vy-sky: #38bdf8;
  --vy-mint: #2ccf9b;
  --vy-bg: #eef4fb;
  --vy-surface: #ffffff;
  --vy-text: #111827;
  /* WCAG AA on #f3f6fb / white (≥4.5) — #475569 ≈ 7.0 */
  --vy-muted: #475569;
  --vy-line: #d8e1ec;
  --vy-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* ONE top chrome geometry + stacking (shared with Messenger no-overlap) */
  --vy-chrome-h: 52px;
  --vy-chrome-pad-x: 14px;
  --vy-services-fab: 52px;
  --vy-z-chrome: 1200;
  --vy-z-services: 1600;
  --vy-z-services-panel: 7000;
  --vy-z-assistant: 1850;
  --vy-z-overlay: 6000;
  --acc: var(--vy-brand);
  --accent: var(--vy-brand);
  --mute: var(--vy-muted);
  --muted: var(--vy-muted);
  --sub: #334155;
  --purple: var(--vy-cobalt);
  --indigo: var(--vy-cobalt);
  --violet: var(--vy-cobalt);
}

html {
  color-scheme: light;
}

html:not([data-theme="dark"]),
html[data-theme="light"],
:root[data-theme="light"] {
  color-scheme: light;
  --vy-muted: #475569;
  --mute: #475569;
  --muted: #475569;
  --acc: #1d4ed8;
  --accent: #1d4ed8;
  --brand: #1d4ed8;
}

body,
.vy-shell-body,
.vy-product-switcher,
.vy-product-launcher,
.vy-product-panel {
  font-family: var(--vy-font-body);
}

h1, h2, h3,
.vy-brand-name,
.vy-brand,
[data-vy-display],
.remote-hero h1,
.intro h2 {
  font-family: var(--vy-font-display);
  letter-spacing: -0.03em;
}

/* Soft-kill common per-page font forks without rewriting product layouts */
body[data-page],
body.vy-shell-body,
html.vy-os body {
  font-family: var(--vy-font-body) !important;
}

/* Account / auth identity surfaces share the same type + cobalt */
body[data-page="auth"],
body[data-page="account"],
html[data-page="account"] body {
  font-family: var(--vy-font-body);
  --muted: var(--vy-muted, #475569);
  --mute: var(--vy-muted, #475569);
}

/* Placeholder / helper text: keep muted ≥ AA on light chrome */
::placeholder {
  color: color-mix(in srgb, var(--vy-muted, #475569) 88%, #111827);
  opacity: 1;
}

/* Product switcher: keep chrome above app chrome, below modals */
.vy-product-switcher {
  font: 14px/1.35 var(--vy-font-body);
  z-index: var(--vy-z-services);
}

/* ── ONE_TOP_CHROME_ALL_HOSTS — one logo · one Сервисы · no stacked switchers ─ */
html body[data-vy-top-chrome="1"] [data-vy-products],
html body[data-vy-top-chrome="1"] .product-popover,
html body[data-vy-top-chrome="1"] [data-vy-products-trigger],
html body[data-landing-v2] [data-vy-products],
html body[data-landing-v2] .product-popover,
html body[data-landing-v2] [data-vy-products-trigger],
html body[data-landing-v2] .nav-products-compact,
html body[data-landing-v2] .brand-chevron {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Logo word: always «ВЫШКА» (product name lives in subtitle / hero, not chrome) */
[data-vy-header] .brand-word,
[data-vy-header] .brand > span:not(.mark):not(.brand-mark):not(.brand-sub):not(.brand-chevron),
.vv-brand strong,
.vy-top-brand {
  font-family: var(--vy-font-display) !important;
  letter-spacing: -0.03em;
}

/* Desktop: single Сервисы control top-right — never a second floating switcher */
@media (min-width: 641px) {
  html body > .vy-product-switcher,
  html body[data-page] > .vy-product-switcher,
  html body.vy-shell-body > .vy-product-switcher,
  html body[data-vy-top-chrome="1"] > .vy-product-switcher {
    top: max(10px, calc((var(--vy-chrome-h) - var(--vy-services-fab)) / 2 + env(safe-area-inset-top, 0px))) !important;
    right: max(var(--vy-chrome-pad-x), env(safe-area-inset-right, 0px)) !important;
    z-index: var(--vy-z-services) !important;
  }
  /* Landings with sticky nav: pad right so CTA/Войти never collide with Сервисы */
  html body[data-landing-v2] .nav-cta,
  html body[data-page="ecosystem"] .actions,
  html body[data-messenger-public-landing] .nav-cta {
    padding-right: calc(var(--vy-services-fab) + 72px);
  }
}

/* WAVE07 — ONE mobile shell: thumb FAB only (enforced vs page forks) */
@media (max-width: 640px) {
  html body .vy-product-switcher,
  html body > .vy-product-switcher {
    position: fixed !important;
    inset: unset !important;
    top: unset !important;
    left: unset !important;
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(18px, calc(18px + env(safe-area-inset-bottom, 0px))) !important;
    width: fit-content !important;
    max-width: 56px !important;
    height: fit-content !important;
    min-height: 0 !important;
    padding: 0 !important;
    z-index: 1900 !important;
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
  }
  html body:has(.vm-tabbar) > .vy-product-switcher {
    bottom: max(86px, calc(72px + env(safe-area-inset-bottom, 0px))) !important;
  }
  /* Divergent messenger leads chip fights ONE shell on 390 */
  html body[data-page="messenger"] .vy-biz-leads-chip {
    display: none !important;
  }
}

/* Shared focus chrome */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--vy-brand, #1d4ed8);
  outline-offset: 3px;
}

/* Shared skip-link (pages may omit local CSS; this guarantees visibility) */
.skip-link,
a.skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 10000;
  padding: 10px 13px;
  border: 1px solid var(--vy-line, #d8e1ec);
  border-radius: 12px;
  background: var(--vy-surface, #fff);
  color: var(--vy-text, #111827);
  font: 600 14px/1.2 var(--vy-font-body);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible,
a.skip:focus,
a.skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--vy-brand, #1d4ed8);
  outline-offset: 3px;
}

/* Soft-kill purple AI-slop + soft-violet orbit atmosphere (Account) */
body[data-page="account"] .halo::after,
body[data-page="account"] .halo::before {
  background: var(--vy-sky, #38bdf8) !important;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.55) !important;
}
body[data-page="account"] .halo::after {
  background: var(--vy-brand, #1d4ed8) !important;
  box-shadow: 0 0 22px rgba(29, 78, 216, 0.55) !important;
}
body[data-page="account"] .button.primary {
  box-shadow: 0 17px 36px rgba(29, 78, 216, 0.28) !important;
}
body[data-page="account"] .microcopy,
body[data-page="account"] footer {
  color: var(--vy-muted, #475569) !important;
}
body[data-page="account"] .eyebrow {
  color: var(--vy-brand, #1d4ed8) !important;
}

/* Remote soft-lilac pill → cobalt soft */
.remote-pill[data-state="pending_approval"],
.remote-pill[data-state="pairing"] {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
}

/* Accent drift soft-kill on common forks */
[data-theme="light"] {
  --ai: #1d4ed8;
  --ai-hover: #1e40af;
}

@media (prefers-reduced-motion: reduce) {
  .vy-product-launcher,
  .vy-product-card,
  .skip-link,
  a.skip {
    transition: none !important;
  }
  /* ROLE_A11Y_BRAND_2030 — global motion kill on shared chrome */
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ROLE_A11Y_BRAND_2030 — contrast / focus / purple alias soft-kill (cascade) */
html:not([data-theme="dark"]),
html[data-theme="light"],
[data-theme="light"] {
  --mute: #475569 !important;
  --muted: #475569 !important;
  --vy-muted: #475569 !important;
  --offline: #66707e !important;
  --warn: #94600c !important;
  --vy-warn: #94600c !important;
  --vy-indigo: #1e3a8a !important;
  --purple: #1d4ed8 !important;
  --indigo: #1d4ed8 !important;
  --violet: #1d4ed8 !important;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--vy-brand, #1d4ed8) !important;
  outline-offset: 3px !important;
}
.input:focus-visible,
.search input:focus-visible,
.cmdk-input:focus-visible,
.vycmdk-input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--vy-brand, #1d4ed8) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18) !important;
}

/* Mobile 390: reduce remote first-screen overflow risk */
@media (max-width: 420px) {
  .remote-hero {
    grid-template-columns: 1fr !important;
  }
  .remote-hero h1 {
    font-size: clamp(28px, 9vw, 42px) !important;
    letter-spacing: -0.04em !important;
  }
}

  /* Ecosystem hub: hide waitlist/planned card spam; keep live + beta */
#products .grid > .card[data-product="legal"],
#products .grid > .card[data-product="creator"] {
  display: none !important;
}

/* WAVE07: ecosystem «Меню» clips @390 — keep Войти + theme; menu is redundant with thumb FAB */
@media (max-width: 420px) {
  body[data-page="ecosystem"] .btn.mobile-menu,
  body[data-page="ecosystem"] #menu {
    display: none !important;
  }
  body[data-page="ecosystem"] .nav-in {
    gap: 8px !important;
  }
  body[data-page="ecosystem"] .links {
    display: none !important;
  }
}

/* Shared chrome atmosphere (Messenger / Voice / Account — no purple slop) */
body.vy-shell-body,
body[data-page="account"],
body[data-page="voice"],
html[data-page="account"] body {
  background:
    radial-gradient(820px 380px at 6% -8%, rgba(56, 189, 248, 0.14), transparent 55%),
    radial-gradient(680px 320px at 98% 0%, rgba(29, 78, 216, 0.10), transparent 52%),
    var(--vy-bg, #eef4fb);
}
.vy-product-launcher__mark {
  background: linear-gradient(135deg, #1d4ed8, #38bdf8 55%, #2ccf9b) !important;
}
.vy-brand-name,
[data-vy-display] {
  font-family: var(--vy-font-liquid, var(--vy-font-display)) !important;
  letter-spacing: -0.03em;
}

/* WAVE08 / ONE_TOP_CHROME desktop — ONE switcher slot (top-right) on landings + apps */
@media (min-width: 641px) {
  html body > .vy-product-switcher,
  html body[data-page] > .vy-product-switcher,
  html body.vy-shell-body > .vy-product-switcher {
    position: fixed !important;
    top: max(10px, calc((var(--vy-chrome-h) - var(--vy-services-fab)) / 2 + env(safe-area-inset-top, 0px))) !important;
    right: max(var(--vy-chrome-pad-x), env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: var(--vy-z-services) !important;
    width: auto !important;
    padding: 0 !important;
  }
  /* Messenger in-chrome slot owns the switcher on desktop — no second body FAB */
  html body[data-page="messenger"] .vy-msg-switcher-slot .vy-product-switcher,
  html body[data-page="messenger"] .vy-messenger-product-slot .vy-product-switcher {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    z-index: var(--vy-z-chrome) !important;
  }
  /* When switcher lives in slot, hide orphan body FAB (no stacked switchers) */
  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;
  }
}