/* VYSHKA Cloud product switcher — shared across public and authenticated HTML. */
.vy-product-switcher {
  position: fixed;
  /* Keep the floating product switcher below the public header.  A fixed
     top-right control used to cover the primary header CTA on desktop. */
  top: max(72px, calc(72px + env(safe-area-inset-top, 0px)));
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 1400;
  font: 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vy-product-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 13px 0 8px;
  border: 1px solid var(--vy-line, #e2e6ec);
  border-radius: 14px;
  background: color-mix(in srgb, var(--vy-surface, #fff) 92%, transparent);
  color: var(--vy-text, #10141c);
  box-shadow: var(--vy-sh-2, 0 6px 20px rgba(16,24,40,.1));
  backdrop-filter: blur(14px);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  transition: transform 220ms cubic-bezier(.16,1,.3,1), border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.vy-product-launcher::after { content: ""; position: absolute; inset: -5px; border: 1px solid color-mix(in srgb, var(--vy-brand, var(--vy-cobalt, #1d4ed8)) 34%, transparent); border-radius: 18px; opacity: 0; transform: scale(.86); pointer-events: none; }
.vy-product-launcher:hover { border-color: var(--vy-brand, var(--vy-cobalt, #1d4ed8)); transform: translateY(-2px); }
.vy-product-launcher:hover::after { animation: vy-switcher-ring 1.1s ease-out; }
.vy-product-launcher:focus-visible { outline: 3px solid var(--vy-focus-color, var(--vy-sky, #38bdf8)); outline-offset: 3px; }
.vy-product-launcher[aria-expanded="true"] { border-color: var(--vy-brand, var(--vy-cobalt, #1d4ed8)); box-shadow: var(--vy-sh-acc, 0 8px 22px rgba(29,78,216,.24)); }

.vy-product-launcher__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--vy-cobalt, #1d4ed8), var(--vy-sky, #38bdf8) 58%, var(--vy-mint, #2ccf9b));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(29,78,216,.24);
  overflow: hidden;
}
.vy-product-launcher__mark img, .vy-product-card__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

.vy-product-launcher__chevron { transition: transform var(--vy-dur, 200ms) var(--vy-ease, ease); }
.vy-product-launcher[aria-expanded="true"] .vy-product-launcher__chevron { transform: rotate(180deg); }

.vy-product-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(390px, calc(100vw - 28px));
  padding: 16px;
  border: 1px solid var(--vy-line, #e2e6ec);
  border-radius: 20px;
  background: var(--vy-surface, #fff);
  color: var(--vy-text, #10141c);
  box-shadow: var(--vy-sh-3, 0 20px 56px rgba(16,24,40,.14));
}

.vy-product-panel[hidden] { display: none; }
.vy-product-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vy-product-panel__head strong { display: block; font-size: 16px; }
.vy-product-panel__head small { display: block; margin-top: 3px; color: var(--vy-muted, #59616e); }
.vy-product-panel__close { width: 44px; height: 44px; border: 1px solid var(--vy-line, #e2e6ec); border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font-size: 20px; line-height: 1; }
.vy-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vy-product-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 66px; padding: 9px; border: 1px solid var(--vy-line, #e2e6ec); border-radius: 13px; background: var(--vy-surface-2, #f3f4fa); color: inherit; text-decoration: none; }
.vy-product-card { transition: transform 220ms cubic-bezier(.16,1,.3,1), border-color 220ms ease, box-shadow 220ms ease, background 220ms ease; }
.vy-product-card:hover { border-color: var(--vy-brand, var(--vy-cobalt, #1d4ed8)); text-decoration: none; transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 24px rgba(15, 47, 104, .12); }
.vy-product-card__icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 5px; border-radius: 10px; background: var(--vy-surface, #fff); color: var(--vy-brand, var(--vy-cobalt, #1d4ed8)); font-weight: 850; }
.vy-product-card b { display: block; font-size: 13px; }
.vy-product-card small { display: block; margin-top: 2px; color: var(--vy-muted, #59616e); font-size: 11px; line-height: 1.25; }
.vy-product-card[data-current="true"] { border-color: var(--vy-brand, var(--vy-cobalt, #1d4ed8)); box-shadow: inset 0 0 0 1px var(--vy-brand, var(--vy-cobalt, #1d4ed8)); }
.vy-product-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--vy-ok, #1f9d63); font-size: 10px; font-weight: 750; }
.vy-product-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vy-product-status[data-status="public-beta"] { color: var(--vy-warn, #c08a2a); }
.vy-product-status[data-status="development"], .vy-product-status[data-status="waitlist"] { color: var(--vy-brand, var(--vy-cobalt, #1d4ed8)); }
.vy-product-status[data-status="planned"] { color: var(--vy-muted, #667085); }
.vy-product-panel__legal { margin: 12px 2px 0; color: var(--vy-muted, #59616e); font-size: 11px; }
.vy-product-panel__legal a { color: var(--vy-brand, var(--vy-cobalt, #1d4ed8)); }

:root[data-theme="dark"] .vy-product-launcher { background: color-mix(in srgb, var(--vy-surface, #14181f) 92%, transparent); }
:root[data-theme="dark"] .vy-product-panel { background: var(--vy-surface, #14181f); }

@media (max-width: 640px) {
  /* One chrome band on phone: keep launcher fixed under sticky header
     (no full-width static row that doubles header height). Panel still
     opens as a full-viewport dialog. */
  .vy-product-switcher {
    position: fixed;
    top: max(72px, calc(64px + env(safe-area-inset-top, 0px)));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
    padding: 0;
  }
  .vy-product-launcher { width: 44px; padding: 0; justify-content: center; }
  .vy-product-launcher__label, .vy-product-launcher__chevron { display: none; }
  .vy-product-panel { position: fixed; z-index: 1401; top: max(10px, env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); width: auto; max-height: none; overflow: auto; }
  .vy-product-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vy-product-launcher, .vy-product-card, .vy-product-launcher__chevron { transition: none; }
  .vy-product-launcher:hover { transform: none; }
}

@keyframes vy-switcher-ring { 0% { opacity: .72; transform: scale(.86); } 100% { opacity: 0; transform: scale(1.16); } }
