/* Liquid Glass chrome for site_v2 projects. The lower toolbar is deliberately
   excluded: it has its own independent toolbar_style setting. Mobile keeps
   the established ViziaFlow treatment until its layout is designed. */

@media (min-width: 721px) {
  .vf-site-viewer[data-interface-style="liquid_glass"] {
    --vf-lgi-stage: #e9edf4;
    --vf-lgi-surface: rgb(236 241 248 / .78);
    --vf-lgi-surface-strong: rgb(247 249 252 / .92);
    --vf-lgi-ink: #151922;
    /* 4.61:1 through the glass over a black scene; #475164 gave 4.19:1.
       Light glass is 0.78 alpha, so a dark render shows through enough to
       drag the muted layer — section headings, counts, captions at 12px —
       under AA. Darkening the ink is the cheaper half of the fix: the glass
       keeps its density and the light-scene case still has 8x headroom. */
    --vf-lgi-ink-soft: #414b5c;
    --vf-lgi-control: rgb(255 255 255 / .58);
    --vf-lgi-control-hover: rgb(255 255 255 / .82);
    --vf-lgi-selected: rgb(92 126 186 / .28);
    --vf-lgi-selected-border: rgb(56 85 138 / .62);
    --vf-lgi-selected-ink: #101827;
    --vf-lgi-highlight: rgb(255 255 255 / .50);
    --vf-lgi-rim-high: rgb(255 255 255 / .84);
    --vf-lgi-rim-low: rgb(83 96 121 / .24);
    --vf-lgi-rim-shade: rgb(24 28 44 / .16);
    --vf-lgi-shadow: 0 22px 48px -24px rgb(24 28 44 / .42), 0 7px 20px -14px rgb(24 28 44 / .24);
  }

  .vf-site-viewer[data-theme="dark"][data-interface-style="liquid_glass"] {
    --vf-lgi-stage: #0b1018;
    --vf-lgi-surface: rgb(16 22 33 / .74);
    --vf-lgi-surface-strong: rgb(20 27 40 / .90);
    --vf-lgi-ink: #f6f8fc;
    --vf-lgi-ink-soft: #c6cfde;
    --vf-lgi-control: rgb(224 235 255 / .10);
    --vf-lgi-control-hover: rgb(224 235 255 / .18);
    --vf-lgi-selected: rgb(150 184 244 / .25);
    --vf-lgi-selected-border: rgb(200 220 255 / .62);
    --vf-lgi-selected-ink: #f5f7fc;
    --vf-lgi-highlight: rgb(255 255 255 / .14);
    --vf-lgi-rim-high: rgb(255 255 255 / .32);
    --vf-lgi-rim-low: rgb(255 255 255 / .10);
    --vf-lgi-rim-shade: rgb(0 0 0 / .42);
    --vf-lgi-shadow: 0 24px 54px -22px rgb(0 0 0 / .68), 0 8px 22px -14px rgb(0 0 0 / .62);
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] :is(
    .vf-site-overview,
    .vf-floor-render-view,
    .vf-photo-gallery
  ) {
    background: var(--vf-lgi-stage);
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] :is(
    .vf-chrome-card,
    .vf-chrome-utilities,
    .vf-chrome-help,
    .vf-site-panel,
    .vf-site-building-panel,
    .vf-floor-render-meta,
    .vf-site-panorama-nav,
    .vf-gallery-plan .vf-plan-panel,
    .vf-gallery-plan .vf-plan-tab,
    .vf-gallery-zoom,
    .vf-apartment-minimap,
    .vf-scene-caption,
    .vf-gallery-hint,
    .vf-gallery-image-status,
    .vf-site-model-status,
    .vf-site-loading,
    .vf-site-admin-panel,
    .vf-site-admin-login,
    .vf-project-status-card
  ) {
    --vf-panel: var(--vf-lgi-surface);
    --vf-raised: var(--vf-lgi-control);
    --vf-text: var(--vf-lgi-ink);
    --vf-text-muted: var(--vf-lgi-ink-soft);
    --vf-border: var(--vf-lgi-rim-low);
    --vf-action: var(--vf-lgi-selected);
    --vf-on-action: var(--vf-lgi-selected-ink);
    --vf-accent-soft: var(--vf-lgi-control-hover);
    background:
      linear-gradient(145deg, var(--vf-lgi-highlight), transparent 34%) padding-box,
      linear-gradient(160deg, var(--vf-lgi-surface-strong), var(--vf-lgi-surface)) padding-box,
      linear-gradient(150deg, var(--vf-lgi-rim-high), var(--vf-lgi-rim-low) 38%, var(--vf-lgi-rim-shade) 68%, var(--vf-lgi-rim-high)) border-box;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 var(--vf-lgi-rim-shade), var(--vf-lgi-shadow);
    color: var(--vf-lgi-ink);
    backdrop-filter: blur(22px) saturate(170%) brightness(1.03);
    -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.03);
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] .vf-chrome-route {
    background: color-mix(in srgb, var(--vf-lgi-control) 62%, transparent);
    border-color: var(--vf-lgi-rim-low);
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] :is(
    .vf-chrome-heading h1,
    .vf-chrome-route [aria-current],
    .vf-site-building-list button,
    .vf-floor-list button,
    .vf-site-loading,
    .vf-site-model-status,
    .vf-site-empty
  ) { color: var(--vf-lgi-ink); }

  .vf-site-viewer[data-interface-style="liquid_glass"] :is(
    .vf-chrome-heading > span,
    .vf-chrome-route button,
    .vf-route-label,
    .vf-site-panel h2,
    .vf-site-building-panel h2,
    .vf-floor-panel h2,
    .vf-scene-caption > span,
    .vf-gallery-hint,
    .vf-gallery-image-status
  ) { color: var(--vf-lgi-ink-soft); }

  .vf-site-viewer[data-interface-style="liquid_glass"] :is(
    .vf-site-loading,
    .vf-site-model-status,
    .vf-gallery-image-status,
    .vf-gallery-hint
  ) {
    background: var(--vf-lgi-surface-strong);
    border-color: var(--vf-lgi-selected-border);
    color: var(--vf-lgi-ink);
    text-shadow: none;
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] :is(
    .vf-chrome-utilities button,
    .vf-site-building-list button,
    .vf-floor-list button,
    .vf-gallery-zoom button,
    .vf-gallery-plan-heading button,
    .vf-plan-download-button,
    .vf-floor-render-meta .vf-float-btn,
    .vf-site-panorama-nav button,
    .vf-gallery-slideshow-nav button,
    .vf-gallery-dots button,
    .vf-site-admin-tool button,
    .vf-site-admin-highlight-actions button,
    .vf-site-admin-actions button
  ) {
    background: linear-gradient(145deg, rgb(255 255 255 / .18), var(--vf-lgi-control));
    border-color: var(--vf-lgi-rim-low);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .20);
    color: var(--vf-lgi-ink);
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] :is(
    .vf-chrome-utilities button,
    .vf-site-building-list button,
    .vf-floor-list button,
    .vf-gallery-zoom button,
    .vf-gallery-plan-heading button,
    .vf-plan-download-button,
    .vf-floor-render-meta .vf-float-btn,
    .vf-site-panorama-nav button,
    .vf-gallery-slideshow-nav button
  ):is(:hover, :focus-visible) {
    background: var(--vf-lgi-control-hover);
    border-color: var(--vf-lgi-rim-high);
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] :is(
    .vf-chrome-route [aria-current] .vf-chrome-step,
    .vf-floor-list button[aria-pressed="true"] .vf-entry-icon,
    .vf-site-panorama-nav button[aria-pressed="true"],
    .vf-gallery-dots button[aria-pressed="true"]
  ) {
    background: linear-gradient(145deg, rgb(255 255 255 / .38), var(--vf-lgi-selected));
    border-color: var(--vf-lgi-selected-border);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .52), 0 7px 16px -12px rgb(0 0 0 / .44);
    color: var(--vf-lgi-selected-ink);
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] .vf-entry-icon,
  .vf-site-viewer[data-interface-style="liquid_glass"] .vf-minimap-image,
  .vf-site-viewer[data-interface-style="liquid_glass"] .vf-gallery-plan .vf-plan-figure {
    background: var(--vf-lgi-control);
    border-color: var(--vf-lgi-rim-low);
    color: var(--vf-lgi-ink-soft);
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] .vf-site-building-list button:hover,
  .vf-site-viewer[data-interface-style="liquid_glass"] .vf-floor-list button:hover {
    background: var(--vf-lgi-control-hover);
    border-color: var(--vf-lgi-rim-high);
  }

  .vf-site-viewer[data-interface-style="liquid_glass"] .vf-floor-list button[aria-pressed="true"] {
    background: linear-gradient(145deg, var(--vf-lgi-highlight), var(--vf-lgi-selected));
    border-color: var(--vf-lgi-selected-border);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 8px 18px -14px rgb(24 28 44 / .55);
    color: var(--vf-lgi-selected-ink);
  }
}

@media (min-width: 721px) and (prefers-reduced-transparency: reduce) {
  .vf-site-viewer[data-interface-style="liquid_glass"] :is(
    .vf-chrome-card,
    .vf-chrome-utilities,
    .vf-chrome-help,
    .vf-site-panel,
    .vf-site-building-panel,
    .vf-floor-render-meta,
    .vf-site-panorama-nav,
    .vf-gallery-plan .vf-plan-panel,
    .vf-gallery-plan .vf-plan-tab,
    .vf-gallery-zoom,
    .vf-apartment-minimap,
    .vf-scene-caption,
    .vf-gallery-hint,
    .vf-gallery-image-status,
    .vf-site-model-status,
    .vf-site-loading,
    .vf-site-admin-panel,
    .vf-site-admin-login,
    .vf-project-status-card
  ) {
    background: var(--vf-lgi-surface-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}