:root {
  --canvas-w: 1671;
  --canvas-h: 941;
  --canvas-ratio: 1671 / 941;
  --time-transition-duration: 900ms;
  --axis-x: 50%; /* official x = 835.5 on a 1671px canvas */
  --window-mask: url("assets/window_openings_mask.png");
  --distant-skyline-far-mask: url("assets/distant_skyline_far_mask.svg");
  --distant-skyline-near-mask: url("assets/distant_skyline_near_mask.svg");

  /* v4: Pass 4 exterior cycle preserved; first static distant skyline added. */
  --glass-band-center-angle: 106deg;
  --glass-band-left-angle: 78deg;
  --glass-band-right-angle: 102deg;
  --glass-band-color-rgb: 208, 235, 250;
  --glass-band-side-color-rgb: 195, 228, 248;
  --glass-band-center-shoulder-opacity: 0.42;
  --glass-band-center-peak-opacity: 0.60;
  --glass-band-center-core-opacity: 0.72;
  --glass-band-center-trail-opacity: 0.31;
  --glass-band-left-peak-opacity: 0.29;
  --glass-band-left-core-opacity: 0.37;
  --glass-band-right-peak-opacity: 0.28;
  --glass-band-right-core-opacity: 0.36;
  --glass-highlight-opacity: 0.30;
  --glass-edge-opacity: 0.25;
  --glass-base-opacity: 0.19;
  --scene-shadow-rgb: 160, 210, 255;

  /* Interior values are frozen during Pass 4. */
  --stable-room-atmosphere-opacity: 0.10;
  --stable-room-atmosphere-rgb: 215, 240, 255;

  /* v7.1: when the Ceiling Disc Fill is active, the internal room
     atmosphere receives a broader white architectural wash. This is tied
     to the Ceiling Disc toggle and does not modify the shell asset. */
  --ceiling-room-atmosphere-white-opacity: 0.10;
  --ceiling-room-atmosphere-white-strength: 1;
  --ceiling-room-atmosphere-white-rgb: 252, 253, 255;

}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  background: #030712;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.showroom-viewport {
  width: 100dvw;
  min-width: 100dvw;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}

.showroom-canvas {
  position: relative;
  width: min(100dvw, calc(100dvh * var(--canvas-ratio)));
  max-width: 100dvw;
  aspect-ratio: var(--canvas-ratio);
  max-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #020711;
  border-radius: 0;
  box-shadow: 0 0 70px rgba(var(--scene-shadow-rgb), 0.18);
  transition: box-shadow 3s ease;
}

.showroom-canvas > * {
  position: absolute;
  inset: 0;
}

@media (max-aspect-ratio: 1671/941) {
  .showroom-canvas {
    width: 100dvw;
  }
}

@media (min-aspect-ratio: 1671/941) {
  .showroom-canvas {
    height: 100dvh;
  }
}

/* --------------------------------------------------------------------------
   TIME STATE PRESETS — Pass 4 exterior-only validation.
   Only glass calibration changes with time. Interior shell, ceiling, floor,
   frames, platform, and room atmosphere remain visually stable.
---------------------------------------------------------------------------- */
.showroom-canvas.time-day {
  --glass-band-color-rgb: 208, 235, 250;
  --glass-band-side-color-rgb: 195, 228, 248;
  --glass-band-center-shoulder-opacity: 0.42;
  --glass-band-center-peak-opacity: 0.60;
  --glass-band-center-core-opacity: 0.72;
  --glass-band-center-trail-opacity: 0.31;
  --glass-band-left-peak-opacity: 0.29;
  --glass-band-left-core-opacity: 0.37;
  --glass-band-right-peak-opacity: 0.28;
  --glass-band-right-core-opacity: 0.36;
  --glass-highlight-opacity: 0.30;
  --glass-edge-opacity: 0.25;
  --glass-base-opacity: 0.19;
}

.showroom-canvas.time-dawn {
  --glass-band-color-rgb: 255, 231, 218;
  --glass-band-side-color-rgb: 255, 235, 220;
  --glass-band-center-shoulder-opacity: 0.34;
  --glass-band-center-peak-opacity: 0.52;
  --glass-band-center-core-opacity: 0.64;
  --glass-band-center-trail-opacity: 0.27;
  --glass-band-left-peak-opacity: 0.24;
  --glass-band-left-core-opacity: 0.31;
  --glass-band-right-peak-opacity: 0.23;
  --glass-band-right-core-opacity: 0.30;
  --glass-highlight-opacity: 0.24;
  --glass-edge-opacity: 0.22;
  --glass-base-opacity: 0.16;
}

.showroom-canvas.time-sunset {
  --glass-band-color-rgb: 255, 214, 190;
  --glass-band-side-color-rgb: 255, 224, 205;
  --glass-band-center-shoulder-opacity: 0.32;
  --glass-band-center-peak-opacity: 0.48;
  --glass-band-center-core-opacity: 0.60;
  --glass-band-center-trail-opacity: 0.25;
  --glass-band-left-peak-opacity: 0.22;
  --glass-band-left-core-opacity: 0.29;
  --glass-band-right-peak-opacity: 0.22;
  --glass-band-right-core-opacity: 0.29;
  --glass-highlight-opacity: 0.22;
  --glass-edge-opacity: 0.24;
  --glass-base-opacity: 0.15;
}

.showroom-canvas.time-night {
  --glass-band-color-rgb: 196, 231, 255;
  --glass-band-side-color-rgb: 175, 225, 255;
  --glass-band-center-shoulder-opacity: 0.13;
  --glass-band-center-peak-opacity: 0.28;
  --glass-band-center-core-opacity: 0.44;
  --glass-band-center-trail-opacity: 0.10;
  --glass-band-left-peak-opacity: 0.13;
  --glass-band-left-core-opacity: 0.22;
  --glass-band-right-peak-opacity: 0.14;
  --glass-band-right-core-opacity: 0.24;
  --glass-highlight-opacity: 0.14;
  --glass-edge-opacity: 0.36;
  --glass-base-opacity: 0.12;
}

/* --------------------------------------------------------------------------
   SkyTimeLayer — PASS 1 retained; Day restored from original v3.

   PASS 2 keeps the accepted Dawn/Sunset/Night palettes and restores the
   previous Day preset. Glass and internal room response are tuned separately
   below; the two-layer opacity crossfade remains unchanged.

   Each sky uses the same deterministic geometry. Only its approved palette,
   glow position and atmospheric depth variables differ.
---------------------------------------------------------------------------- */
.sky-time-layer {
  z-index: 10;
  overflow: hidden;
  background: transparent;

  /* Explicit exterior-only boundary. The time cycle cannot leak through
     ceiling openings, shell transparency, floor, frames, or platform. */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.sky-state-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  will-change: opacity;
  transition: opacity var(--time-transition-duration) ease;
}

.sky-state-next {
  opacity: 0;
  pointer-events: none;
}

.sky-state-next.is-visible {
  opacity: 1;
}

.sky-layer {
  /* Shared defaults; each time-state class overrides these values. */
  --sky-top: #a9c9e5;
  --sky-upper-middle: #c7dff0;
  --sky-lower-middle: #e3eff7;
  --sky-horizon: #f5fafc;

  --sun-x: 56%;
  --sun-y: 14%;
  --sun-core: rgba(255, 255, 255, 0.50);
  --sun-halo: rgba(255, 255, 255, 0.20);
  --horizon-x: 50%;
  --horizon-glow: rgba(238, 249, 255, 0.34);
  --air-glow: rgba(255, 255, 255, 0.08);
  --upper-veil: rgba(210, 232, 250, 0.08);
  --lower-veil: rgba(255, 255, 255, 0.05);
  --edge-tint: rgba(90, 135, 178, 0.08);
  --lower-depth: rgba(42, 78, 110, 0.035);

  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(
      to bottom,
      var(--sky-top) 0%,
      var(--sky-upper-middle) 34%,
      var(--sky-lower-middle) 70%,
      var(--sky-horizon) 100%
    );
}

/* Localized light sources and horizon illumination. */
.sky-layer::before {
  content: "";
  position: absolute;
  inset: -2%;
  pointer-events: none;
  background:
    radial-gradient(
      circle at var(--sun-x) var(--sun-y),
      var(--sun-core) 0%,
      var(--sun-halo) 18%,
      transparent 43%
    ),
    radial-gradient(
      ellipse at var(--horizon-x) 96%,
      var(--horizon-glow) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 50% 54%,
      var(--air-glow) 0%,
      transparent 68%
    );
}

/* Very restrained atmospheric depth. This prevents the window view from
   reading as one flat rectangle while remaining free of skyline or weather. */
.sky-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      var(--upper-veil) 0%,
      transparent 31%,
      transparent 69%,
      var(--lower-veil) 100%
    ),
    radial-gradient(
      ellipse at 50% 58%,
      transparent 34%,
      var(--edge-tint) 100%
    ),
    linear-gradient(
      to bottom,
      transparent 56%,
      var(--lower-depth) 100%
    );
  mix-blend-mode: soft-light;
}


/* DAY — restored exactly from the previous v3 version at user request. */
.sky-day {
  background:
    radial-gradient(circle at 55% 12%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18) 18%, transparent 42%),
    radial-gradient(ellipse at 50% 72%, rgba(255, 255, 255, 0.55), transparent 52%),
    linear-gradient(to bottom, #ccecff 0%, #e9f8ff 56%, #ffffff 100%);
}

.sky-day::before,
.sky-day::after {
  opacity: 0;
}

/* DAWN — cold atmosphere still dominates while a localized warm horizon
   begins to emerge. It must not read as a pale sunset. */
.sky-dawn {
  --sky-top: #7891af;
  --sky-upper-middle: #a6adbf;
  --sky-lower-middle: #d4bec4;
  --sky-horizon: #f1d7bd;

  --sun-x: 34%;
  --sun-y: 72%;
  --sun-core: rgba(255, 218, 187, 0.38);
  --sun-halo: rgba(255, 218, 187, 0.14);
  --horizon-x: 36%;
  --horizon-glow: rgba(255, 224, 195, 0.32);
  --air-glow: rgba(211, 216, 236, 0.08);
  --upper-veil: rgba(132, 157, 190, 0.085);
  --lower-veil: rgba(255, 226, 204, 0.055);
  --edge-tint: rgba(72, 99, 139, 0.10);
  --lower-depth: rgba(83, 67, 91, 0.035);
}

/* SUNSET — warm-dominant and richer than dawn, but still restrained enough
   to remain an enterprise showroom background rather than a spectacle. */
.sky-sunset {
  --sky-top: #667a98;
  --sky-upper-middle: #9e8da4;
  --sky-lower-middle: #d3a093;
  --sky-horizon: #ecb17f;

  --sun-x: 76%;
  --sun-y: 64%;
  --sun-core: rgba(255, 188, 140, 0.46);
  --sun-halo: rgba(255, 188, 140, 0.16);
  --horizon-x: 72%;
  --horizon-glow: rgba(255, 194, 145, 0.34);
  --air-glow: rgba(228, 188, 184, 0.075);
  --upper-veil: rgba(111, 126, 159, 0.075);
  --lower-veil: rgba(255, 202, 163, 0.050);
  --edge-tint: rgba(79, 68, 105, 0.095);
  --lower-depth: rgba(83, 54, 73, 0.040);
}

/* NIGHT — deeper vertical separation and a slightly lighter horizon. No
   stars, skyline, or theatrical effects are introduced in this pass. */
.sky-night {
  --sky-top: #031022;
  --sky-upper-middle: #081d35;
  --sky-lower-middle: #16324d;
  --sky-horizon: #294b67;

  --sun-x: 48%;
  --sun-y: 18%;
  --sun-core: rgba(126, 178, 226, 0.075);
  --sun-halo: rgba(126, 178, 226, 0.035);
  --horizon-x: 50%;
  --horizon-glow: rgba(87, 139, 180, 0.16);
  --air-glow: rgba(91, 142, 190, 0.055);
  --upper-veil: rgba(26, 55, 87, 0.10);
  --lower-veil: rgba(95, 151, 194, 0.035);
  --edge-tint: rgba(0, 8, 22, 0.20);
  --lower-depth: rgba(0, 7, 18, 0.10);
}

/* ExteriorTimeLightingOverlay is crossfaded with the sky state and remains
   explicitly inside the validated window-opening mask. */
.exterior-time-lighting-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.exterior-day {
  opacity: 0.16;
  background:
    radial-gradient(ellipse at 52% 96%, rgba(236, 249, 255, 0.42), transparent 58%),
    linear-gradient(180deg, rgba(180, 225, 250, 0.05), transparent 52%);
}

.exterior-dawn {
  opacity: 0.20;
  background:
    radial-gradient(ellipse at 34% 96%, rgba(255, 221, 195, 0.38), transparent 56%),
    linear-gradient(180deg, rgba(120, 160, 205, 0.06), transparent 50%);
}

.exterior-sunset {
  opacity: 0.22;
  background:
    radial-gradient(ellipse at 74% 96%, rgba(255, 191, 145, 0.42), transparent 56%),
    linear-gradient(180deg, rgba(105, 125, 170, 0.05), transparent 48%);
}

.exterior-night {
  opacity: 0.28;
  background:
    radial-gradient(ellipse at 50% 98%, rgba(92, 154, 205, 0.34), transparent 60%),
    linear-gradient(180deg, rgba(4, 18, 38, 0.10), transparent 58%);
}


/* --------------------------------------------------------------------------
   DistantSkylineLayer — v4 first static integration.

   This is depth-only architecture, not the Living City. Both silhouette masks
   use one fixed geometry across Day, Dawn, Sunset, and Night. The current/next
   state layers crossfade with the validated SkyTimeLayer so tint, visibility,
   haze, and contrast can change without moving the skyline.
---------------------------------------------------------------------------- */
.distant-skyline-layer {
  z-index: 16;
  pointer-events: none;
  overflow: hidden;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.skyline-state-layer {
  position: absolute;
  inset: 0;
  opacity: 1;
  overflow: hidden;
  will-change: opacity;
  transition: opacity var(--time-transition-duration) ease;

  /* Conservative defaults; every approved time-state overrides them. */
  --skyline-far-rgb: 92, 126, 150;
  --skyline-near-rgb: 70, 104, 132;
  --skyline-haze-rgb: 230, 245, 255;
  --skyline-far-opacity: 0.14;
  --skyline-near-opacity: 0.20;
  --skyline-haze-opacity: 0.18;
  --skyline-far-blur: 1.4px;
  --skyline-near-blur: 0.45px;
  --skyline-contrast: 0.90;
  --skyline-saturation: 0.72;
}

.skyline-state-next {
  opacity: 0;
  pointer-events: none;
}

.skyline-state-next.is-visible {
  opacity: 1;
}

.skyline-day {
  --skyline-far-rgb: 104, 142, 166;
  --skyline-near-rgb: 76, 111, 139;
  --skyline-haze-rgb: 235, 248, 255;
  --skyline-far-opacity: 0.13;
  --skyline-near-opacity: 0.20;
  --skyline-haze-opacity: 0.18;
  --skyline-contrast: 0.88;
  --skyline-saturation: 0.68;
}

.skyline-dawn {
  --skyline-far-rgb: 116, 116, 137;
  --skyline-near-rgb: 80, 84, 106;
  --skyline-haze-rgb: 255, 225, 207;
  --skyline-far-opacity: 0.17;
  --skyline-near-opacity: 0.25;
  --skyline-haze-opacity: 0.22;
  --skyline-contrast: 0.92;
  --skyline-saturation: 0.70;
}

.skyline-sunset {
  --skyline-far-rgb: 118, 92, 103;
  --skyline-near-rgb: 77, 61, 79;
  --skyline-haze-rgb: 255, 195, 154;
  --skyline-far-opacity: 0.21;
  --skyline-near-opacity: 0.31;
  --skyline-haze-opacity: 0.25;
  --skyline-contrast: 0.96;
  --skyline-saturation: 0.74;
}

.skyline-night {
  --skyline-far-rgb: 48, 75, 99;
  --skyline-near-rgb: 7, 22, 39;
  --skyline-haze-rgb: 91, 151, 197;
  --skyline-far-opacity: 0.36;
  --skyline-near-opacity: 0.72;
  --skyline-haze-opacity: 0.24;
  --skyline-contrast: 1.02;
  --skyline-saturation: 0.78;
}

.skyline-horizon-haze,
.skyline-far-silhouette,
.skyline-near-silhouette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.skyline-horizon-haze {
  opacity: var(--skyline-haze-opacity);
  background:
    radial-gradient(
      ellipse at 50% 70%,
      rgba(var(--skyline-haze-rgb), 0.34) 0%,
      rgba(var(--skyline-haze-rgb), 0.12) 34%,
      transparent 68%
    ),
    linear-gradient(
      to top,
      rgba(var(--skyline-haze-rgb), 0.20) 0%,
      rgba(var(--skyline-haze-rgb), 0.05) 20%,
      transparent 48%
    );
  filter: blur(7px);
}

.skyline-far-silhouette {
  opacity: var(--skyline-far-opacity);
  background-color: rgb(var(--skyline-far-rgb));
  -webkit-mask-image: var(--distant-skyline-far-mask);
  mask-image: var(--distant-skyline-far-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter:
    blur(var(--skyline-far-blur))
    contrast(var(--skyline-contrast))
    saturate(var(--skyline-saturation));
}

.skyline-near-silhouette {
  opacity: var(--skyline-near-opacity);
  background-color: rgb(var(--skyline-near-rgb));
  -webkit-mask-image: var(--distant-skyline-near-mask);
  mask-image: var(--distant-skyline-near-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter:
    blur(var(--skyline-near-blur))
    contrast(var(--skyline-contrast))
    saturate(var(--skyline-saturation));
}

.showroom-canvas.debug-no-skyline .distant-skyline-layer {
  display: none;
}

.glass-surface-base-layer {
  z-index: 20;
  pointer-events: none;
  mix-blend-mode: screen;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  opacity: var(--glass-base-opacity);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.020) 0%,
      rgba(var(--glass-band-side-color-rgb), 0.014) 48%,
      rgba(110, 190, 240, 0.010) 100%
    );
  transition: opacity var(--time-transition-duration) ease, background var(--time-transition-duration) ease;
}

.rain-on-glass-layer {
  z-index: 30;
  pointer-events: none;
  opacity: 0;
}

.rain-on-glass-layer.is-off {
  display: none;
}

.interior-environment-shell {
  z-index: 40;
  pointer-events: none;
}

.interior-shell {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: none;
}

.shell-illumination-overlay {
  display: none;
}

/* Pass 4: internal shell/platform response is intentionally disabled so
   the interior remains visually stable while exterior time states are tested. */
.interior-environment-shell::before,
.interior-environment-shell::after {
  display: none;
}

.glass-surface-highlight-layer {
  z-index: 48;
  pointer-events: none;
  opacity: var(--glass-highlight-opacity);
  mix-blend-mode: screen;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;

  background:
    radial-gradient(ellipse at 50% 16%, rgba(var(--glass-band-color-rgb), 0.14) 0%, rgba(var(--glass-band-color-rgb), 0.04) 28%, transparent 62%),
    linear-gradient(180deg, rgba(var(--glass-band-side-color-rgb), 0.06) 0%, rgba(160, 220, 255, 0.025) 48%, transparent 100%);
  filter: blur(2.8px);
  transition: opacity var(--time-transition-duration) ease, background var(--time-transition-duration) ease;
}

.glass-inner-edge-layer {
  z-index: 49;
  pointer-events: none;
  opacity: var(--glass-edge-opacity);
  mix-blend-mode: screen;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;

  background:
    linear-gradient(90deg, rgba(var(--glass-band-color-rgb), 0.10), transparent 11%, transparent 89%, rgba(var(--glass-band-side-color-rgb), 0.10)),
    linear-gradient(180deg, rgba(var(--glass-band-color-rgb), 0.08), transparent 16%, transparent 82%, rgba(170, 220, 255, 0.04));
  filter: blur(1.6px);
  transition: opacity var(--time-transition-duration) ease, background var(--time-transition-duration) ease;
}

/* PASS 2.1 — pronounced glass presence.
   The validated geometry remains unchanged. A narrow luminous core is added
   inside each band and blur is reduced slightly, so the glass reads clearly
   without turning the reflections into opaque white decals. */
/* Validated glass band geometry is preserved from v2_5/v2_6. */
.glass-band-center-layer,
.glass-band-left-layer,
.glass-band-right-layer {
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  transition: background var(--time-transition-duration) ease, filter var(--time-transition-duration) ease;
}

.glass-band-center-layer {
  z-index: 51;
  clip-path: polygon(17% 12%, 83% 12%, 81.5% 70%, 18.5% 70%);
  background:
    linear-gradient(
      var(--glass-band-center-angle),
      transparent 0%,
      transparent 20%,
      rgba(var(--glass-band-color-rgb), 0.00) 26%,
      rgba(var(--glass-band-color-rgb), var(--glass-band-center-shoulder-opacity)) 33%,
      rgba(var(--glass-band-color-rgb), var(--glass-band-center-peak-opacity)) 38%,
      rgba(var(--glass-band-color-rgb), var(--glass-band-center-core-opacity)) 41%,
      rgba(var(--glass-band-color-rgb), var(--glass-band-center-peak-opacity)) 45%,
      rgba(var(--glass-band-color-rgb), var(--glass-band-center-trail-opacity)) 51%,
      rgba(var(--glass-band-color-rgb), 0.00) 60%,
      transparent 100%
    );
  filter: blur(1.25px);
}

.glass-band-left-layer {
  z-index: 52;
  clip-path: polygon(0% 18%, 8.5% 18%, 7.2% 72%, 0% 72%);
  background-image:
    linear-gradient(
      var(--glass-band-left-angle),
      transparent 0%,
      transparent 16%,
      rgba(var(--glass-band-color-rgb), 0.00) 28%,
      rgba(var(--glass-band-color-rgb), 0.12) 39%,
      rgba(var(--glass-band-color-rgb), var(--glass-band-left-peak-opacity)) 47%,
      rgba(var(--glass-band-color-rgb), var(--glass-band-left-core-opacity)) 51%,
      rgba(var(--glass-band-color-rgb), var(--glass-band-left-peak-opacity)) 55%,
      rgba(var(--glass-band-color-rgb), 0.14) 63%,
      rgba(var(--glass-band-color-rgb), 0.00) 76%,
      transparent 100%
    );
  background-size: 10.5% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  filter: blur(2.05px);
}

.glass-band-right-layer {
  z-index: 52;
  clip-path: polygon(91.5% 18%, 100% 18%, 100% 72%, 92.8% 72%);
  background-image:
    linear-gradient(
      var(--glass-band-right-angle),
      transparent 0%,
      transparent 16%,
      rgba(var(--glass-band-side-color-rgb), 0.00) 30%,
      rgba(var(--glass-band-side-color-rgb), 0.11) 41%,
      rgba(var(--glass-band-side-color-rgb), var(--glass-band-right-peak-opacity)) 49%,
      rgba(var(--glass-band-side-color-rgb), var(--glass-band-right-core-opacity)) 53%,
      rgba(var(--glass-band-side-color-rgb), var(--glass-band-right-peak-opacity)) 57%,
      rgba(var(--glass-band-side-color-rgb), 0.13) 65%,
      rgba(var(--glass-band-side-color-rgb), 0.00) 78%,
      transparent 100%
    );
  background-size: 10.5% 100%;
  background-position: right center;
  background-repeat: no-repeat;
  filter: blur(2.15px);
}

.room-atmosphere-layer {
  z-index: 60;
  pointer-events: none;
  opacity: calc(var(--stable-room-atmosphere-opacity) + var(--ceiling-room-atmosphere-white-opacity, 0));
  background:
    linear-gradient(
      180deg,
      rgba(var(--ceiling-room-atmosphere-white-rgb), calc(0.24 * var(--ceiling-room-atmosphere-white-strength, 0))) 0%,
      rgba(var(--ceiling-room-atmosphere-white-rgb), calc(0.17 * var(--ceiling-room-atmosphere-white-strength, 0))) 28%,
      rgba(246, 252, 255, calc(0.11 * var(--ceiling-room-atmosphere-white-strength, 0))) 56%,
      rgba(238, 248, 255, calc(0.060 * var(--ceiling-room-atmosphere-white-strength, 0))) 100%
    ),
    radial-gradient(
      ellipse at 50% 35%,
      rgba(255, 255, 255, calc(0.26 * var(--ceiling-room-atmosphere-white-strength, 0))) 0%,
      rgba(244, 251, 255, calc(0.14 * var(--ceiling-room-atmosphere-white-strength, 0))) 38%,
      transparent 72%
    ),
    radial-gradient(ellipse at 50% 18%, rgba(var(--stable-room-atmosphere-rgb), 0.075) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 82%, rgba(var(--stable-room-atmosphere-rgb), 0.025), transparent 58%);
  mix-blend-mode: screen;
}

.alignment-overlay.optional {
  z-index: 70;
  display: none;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(var(--axis-x) - 0.5px), rgba(255, 0, 0, 0.45) var(--axis-x), transparent calc(var(--axis-x) + 0.5px));
}

.showroom-canvas.debug-axis .alignment-overlay.optional {
  display: block;
}

.showroom-canvas.debug-no-band .glass-band-center-layer,
.showroom-canvas.debug-no-band .glass-band-left-layer,
.showroom-canvas.debug-no-band .glass-band-right-layer {
  display: none;
}

.showroom-canvas.debug-no-side-bands .glass-band-left-layer,
.showroom-canvas.debug-no-side-bands .glass-band-right-layer {
  display: none;
}

.dev-time-controls {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: clamp(14px, 2vw, 26px);
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 8px;
  border: 1px solid rgba(190, 225, 255, 0.22);
  border-radius: 999px;
  background: rgba(5, 12, 24, 0.66);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.dev-time-controls button {
  appearance: none;
  border: 1px solid rgba(200, 232, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(235, 248, 255, 0.88);
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.dev-time-controls button[aria-pressed="true"] {
  background: rgba(215, 240, 255, 0.24);
  border-color: rgba(235, 250, 255, 0.48);
  color: #ffffff;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dev-time-controls button:focus-visible {
  outline: 2px solid rgba(235, 250, 255, 0.92);
  outline-offset: 3px;
}

.showroom-canvas[data-transition-state="transitioning"] {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --time-transition-duration: 1ms;
  }

  .sky-state-layer,
  .skyline-state-layer,
  .showroom-canvas,
  .glass-surface-base-layer,
  .interior-shell,
  .glass-surface-highlight-layer,
  .glass-inner-edge-layer,
  .glass-band-center-layer,
  .glass-band-left-layer,
  .glass-band-right-layer {
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------------------
   V4.1 — REALISTIC CLEAN SKY TEST

   User-directed refinement based on the four supplied sky references.
   Purpose: validate realistic clean Day / Dawn / Sunset / Night skies before
   reintroducing DistantSkylineLayer or any weather content.

   Constraints:
   - no clouds;
   - no skyline;
   - no weather;
   - no sun disc;
   - preserve the validated exterior-only mask, shell, glass geometry, and
     current/next crossfade architecture.
---------------------------------------------------------------------------- */

/* Clean-sky-first isolation. The skyline code remains available in the base
   package but is intentionally hidden for this visual validation pass. */
.distant-skyline-layer {
  display: none;
}

/* Remove the earlier generic sky lighting model. Each time state below owns
   one restrained, realistic, cloud-free atmospheric gradient. */
.sky-layer,
.sky-layer::before,
.sky-layer::after {
  background: none;
}

.sky-layer::before,
.sky-layer::after {
  opacity: 1;
  mix-blend-mode: normal;
}

/* DAY — natural blue zenith with a clearer atmospheric horizon band.
   The horizon must read distinctly without turning milky. */
.sky-day {
  background:
    radial-gradient(
      ellipse at 50% 74%,
      rgba(243, 248, 252, 0.58) 0%,
      rgba(226, 239, 247, 0.18) 30%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #3b7eb8 0%,
      #5a9dce 26%,
      #84b8da 48%,
      #bfd9e8 66%,
      #eef3f6 78%,
      #9eb5c2 90%,
      #90a8b6 100%
    );
}

.sky-day::before {
  background:
    radial-gradient(
      ellipse at 50% 83%,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(243, 248, 251, 0.22) 24%,
      rgba(219, 231, 238, 0.06) 42%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 76%,
      rgba(255, 255, 255, 0.08) 82%,
      rgba(225, 236, 243, 0.16) 88%,
      transparent 100%
    );
}

.sky-day::after {
  background:
    radial-gradient(
      ellipse at 50% 48%,
      transparent 44%,
      rgba(44, 83, 118, 0.055) 100%
    ),
    linear-gradient(
      180deg,
      rgba(14, 49, 84, 0.035) 0%,
      transparent 38%,
      transparent 72%,
      rgba(39, 72, 98, 0.055) 100%
    );
}

/* DAWN — cool blue-grey sky with a more readable pearl horizon.
   The warm emergence stays restrained but becomes easier to perceive. */
.sky-dawn {
  background:
    radial-gradient(
      ellipse at 30% 74%,
      rgba(237, 218, 201, 0.34) 0%,
      rgba(219, 207, 199, 0.12) 30%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #27486b 0%,
      #3c5e80 28%,
      #63819b 50%,
      #95a7b4 66%,
      #dac8bc 78%,
      #9c9faa 90%,
      #788895 100%
    );
}

.sky-dawn::before {
  background:
    radial-gradient(
      ellipse at 28% 84%,
      rgba(255, 228, 205, 0.26) 0%,
      rgba(247, 222, 200, 0.10) 26%,
      transparent 56%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 76%,
      rgba(251, 227, 206, 0.08) 82%,
      rgba(236, 208, 187, 0.12) 88%,
      transparent 100%
    );
}

.sky-dawn::after {
  background:
    radial-gradient(
      ellipse at 50% 50%,
      transparent 42%,
      rgba(21, 46, 72, 0.085) 100%
    ),
    linear-gradient(
      180deg,
      rgba(10, 34, 59, 0.055) 0%,
      transparent 45%,
      transparent 72%,
      rgba(63, 69, 78, 0.070) 100%
    );
}

/* SUNSET — a more clearly articulated warm horizon under a steel-blue upper sky.
   The horizon band becomes readable while the sky remains clean. */
.sky-sunset {
  background:
    radial-gradient(
      ellipse at 24% 74%,
      rgba(255, 176, 91, 0.56) 0%,
      rgba(237, 146, 76, 0.18) 30%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #14324e 0%,
      #284965 28%,
      #526d82 50%,
      #8b7f79 66%,
      #d88743 77%,
      #f1aa62 83%,
      #6f5861 100%
    );
}

.sky-sunset::before {
  background:
    radial-gradient(
      ellipse at 22% 84%,
      rgba(255, 210, 138, 0.34) 0%,
      rgba(255, 186, 109, 0.12) 24%,
      transparent 54%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 76%,
      rgba(255, 199, 121, 0.10) 82%,
      rgba(246, 157, 80, 0.18) 88%,
      transparent 100%
    );
}

.sky-sunset::after {
  background:
    radial-gradient(
      ellipse at 50% 48%,
      transparent 40%,
      rgba(25, 40, 58, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 25, 46, 0.080) 0%,
      transparent 44%,
      transparent 74%,
      rgba(65, 41, 51, 0.100) 100%
    );
}

/* NIGHT — deep blue night with a more legible luminous horizon.
   The horizon must stay visible without looking like a sunrise. */
.sky-night {
  background:
    radial-gradient(
      ellipse at 50% 74%,
      rgba(43, 99, 166, 0.42) 0%,
      rgba(22, 61, 112, 0.14) 34%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #010512 0%,
      #020a1d 28%,
      #061833 50%,
      #0d315e 68%,
      #235d98 80%,
      #0a2748 100%
    );
}

.sky-night::before {
  background:
    radial-gradient(
      ellipse at 50% 84%,
      rgba(97, 159, 228, 0.22) 0%,
      rgba(57, 118, 183, 0.10) 24%,
      transparent 56%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 78%,
      rgba(92, 149, 214, 0.08) 84%,
      rgba(65, 122, 185, 0.16) 90%,
      transparent 100%
    );
}

.sky-night::after {
  background:
    radial-gradient(
      ellipse at 50% 44%,
      transparent 36%,
      rgba(0, 4, 14, 0.30) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 2, 9, 0.26) 0%,
      transparent 44%,
      transparent 70%,
      rgba(0, 10, 25, 0.18) 100%
    );
}

/* The clean-sky test needs only restrained horizon integration. */
.exterior-day {
  opacity: 0.16;
  background:
    linear-gradient(180deg, transparent 0%, transparent 82%, rgba(218, 230, 238, 0.10) 88%, transparent 100%),
    radial-gradient(ellipse at 50% 97%, rgba(237, 247, 252, 0.36), transparent 54%);
}

.exterior-dawn {
  opacity: 0.18;
  background:
    linear-gradient(180deg, transparent 0%, transparent 82%, rgba(236, 212, 195, 0.10) 88%, transparent 100%),
    radial-gradient(ellipse at 30% 97%, rgba(247, 223, 205, 0.34), transparent 54%);
}

.exterior-sunset {
  opacity: 0.22;
  background:
    linear-gradient(180deg, transparent 0%, transparent 82%, rgba(247, 170, 89, 0.14) 88%, transparent 100%),
    radial-gradient(ellipse at 24% 97%, rgba(255, 183, 102, 0.40), transparent 54%);
}

.exterior-night {
  opacity: 0.20;
  background:
    linear-gradient(180deg, transparent 0%, transparent 84%, rgba(73, 132, 194, 0.10) 90%, transparent 100%),
    radial-gradient(ellipse at 50% 98%, rgba(73, 134, 198, 0.34), transparent 56%);
}


/* ----------------------------------------------------------------------------
   v4.3 — Layered Atmospheric SkyTimeLayer Correction
   Source: NL 00 validation of SkyTimeLayer doctrine.

   Correction goal:
   - SkyTimeLayer must not read as a flat fill or one simple vertical gradient.
   - Each state is composed of:
     1. upper sky field,
     2. clear luminous low horizon,
     3. secondary low atmospheric glow,
     4. soft premium blending.
   - No clouds, rain, skyline, weather, city, HUD, UI or shell reaction is added.
---------------------------------------------------------------------------- */

.sky-layer,
.sky-layer::before,
.sky-layer::after {
  background: none;
}

.sky-layer::before,
.sky-layer::after {
  opacity: 1;
  mix-blend-mode: normal;
  pointer-events: none;
}

/* DAY — clean luminous blue sky with a clear composite horizon.
   The lower zone has two superposed readings:
   a bright horizon line + a cooler low atmospheric field below it. */
.sky-day {
  background:
    radial-gradient(
      ellipse at 50% 78%,
      rgba(244, 250, 254, 0.42) 0%,
      rgba(218, 235, 246, 0.14) 32%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      #3c82bc 0%,
      #5ca0d1 26%,
      #8fc0de 50%,
      #c8dde8 68%,
      #f7fbfd 81%,
      #d7e4ea 88%,
      #9fb8c5 100%
    );
}

.sky-day::before {
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 74%,
      rgba(255, 255, 255, 0.10) 78%,
      rgba(255, 255, 255, 0.36) 83%,
      rgba(232, 241, 246, 0.20) 88%,
      transparent 96%
    ),
    radial-gradient(
      ellipse at 50% 86%,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(232, 243, 249, 0.12) 28%,
      transparent 58%
    );
}

.sky-day::after {
  background:
    radial-gradient(
      ellipse at 50% 98%,
      rgba(126, 160, 180, 0.20) 0%,
      rgba(110, 144, 166, 0.08) 34%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(12, 47, 80, 0.030) 0%,
      transparent 42%,
      transparent 74%,
      rgba(55, 83, 103, 0.050) 100%
    );
}

/* DAWN — cool upper atmosphere with a pearl-warm horizon.
   The warm horizon is present but quieter than Sunset. */
.sky-dawn {
  background:
    radial-gradient(
      ellipse at 32% 78%,
      rgba(238, 219, 202, 0.34) 0%,
      rgba(220, 207, 198, 0.12) 30%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #274767 0%,
      #3e617f 28%,
      #6d879d 52%,
      #a9b2b5 68%,
      #f0d6bd 82%,
      #c9b7af 90%,
      #798a98 100%
    );
}

.sky-dawn::before {
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 74%,
      rgba(255, 237, 216, 0.08) 78%,
      rgba(255, 226, 201, 0.28) 83%,
      rgba(218, 198, 188, 0.16) 89%,
      transparent 96%
    ),
    radial-gradient(
      ellipse at 31% 87%,
      rgba(255, 229, 205, 0.30) 0%,
      rgba(243, 214, 193, 0.11) 28%,
      transparent 58%
    );
}

.sky-dawn::after {
  background:
    radial-gradient(
      ellipse at 38% 98%,
      rgba(130, 139, 150, 0.18) 0%,
      rgba(108, 124, 139, 0.08) 32%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(7, 30, 52, 0.055) 0%,
      transparent 42%,
      transparent 74%,
      rgba(68, 74, 84, 0.060) 100%
    );
}

/* SUNSET — steel-blue upper field with a clear warm low horizon and a
   secondary amber glow. It must feel richer than Dawn, not merely more saturated. */
.sky-sunset {
  background:
    radial-gradient(
      ellipse at 24% 78%,
      rgba(255, 179, 96, 0.48) 0%,
      rgba(232, 139, 72, 0.16) 30%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #14304b 0%,
      #2b4b65 30%,
      #617786 54%,
      #998276 68%,
      #ee9a4e 82%,
      #ca7450 91%,
      #615260 100%
    );
}

.sky-sunset::before {
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 73%,
      rgba(255, 220, 156, 0.08) 78%,
      rgba(255, 185, 93, 0.34) 83%,
      rgba(220, 118, 72, 0.18) 89%,
      transparent 96%
    ),
    radial-gradient(
      ellipse at 23% 87%,
      rgba(255, 205, 128, 0.36) 0%,
      rgba(255, 165, 92, 0.13) 26%,
      transparent 56%
    );
}

.sky-sunset::after {
  background:
    radial-gradient(
      ellipse at 35% 98%,
      rgba(123, 79, 70, 0.22) 0%,
      rgba(94, 65, 76, 0.10) 34%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(4, 22, 40, 0.080) 0%,
      transparent 42%,
      transparent 76%,
      rgba(62, 38, 50, 0.090) 100%
    );
}

/* NIGHT — deep upper sky with a luminous blue horizon and residual low glow.
   The horizon is clear, but it must not become sunrise or a projector beam. */
.sky-night {
  background:
    radial-gradient(
      ellipse at 50% 80%,
      rgba(48, 105, 174, 0.34) 0%,
      rgba(24, 68, 124, 0.13) 34%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      #010510 0%,
      #020b1e 28%,
      #061b38 54%,
      #103866 70%,
      #2b68a0 83%,
      #103254 100%
    );
}

.sky-night::before {
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 75%,
      rgba(99, 161, 229, 0.06) 79%,
      rgba(96, 157, 224, 0.24) 84%,
      rgba(41, 105, 170, 0.14) 90%,
      transparent 97%
    ),
    radial-gradient(
      ellipse at 50% 88%,
      rgba(90, 152, 222, 0.24) 0%,
      rgba(43, 106, 176, 0.10) 30%,
      transparent 58%
    );
}

.sky-night::after {
  background:
    radial-gradient(
      ellipse at 50% 99%,
      rgba(10, 48, 92, 0.24) 0%,
      rgba(4, 25, 55, 0.12) 36%,
      transparent 66%
    ),
    linear-gradient(
      180deg,
      rgba(0, 2, 9, 0.24) 0%,
      transparent 42%,
      transparent 72%,
      rgba(0, 11, 28, 0.16) 100%
    );
}

/* Exterior lighting overlay: keep it subordinate to the sky itself.
   It reinforces the second low glow without becoming a separate weather layer. */
.exterior-day {
  opacity: 0.13;
  background:
    radial-gradient(ellipse at 50% 97%, rgba(235, 247, 252, 0.34), transparent 54%);
}

.exterior-dawn {
  opacity: 0.16;
  background:
    radial-gradient(ellipse at 31% 97%, rgba(246, 223, 206, 0.34), transparent 54%);
}

.exterior-sunset {
  opacity: 0.19;
  background:
    radial-gradient(ellipse at 24% 97%, rgba(255, 181, 101, 0.38), transparent 54%);
}

.exterior-night {
  opacity: 0.18;
  background:
    radial-gradient(ellipse at 50% 98%, rgba(73, 134, 198, 0.32), transparent 56%);
}

/* ----------------------------------------------------------------------------
   v4.4 — Day SkyTimeLayer Multi-layer Fidelity Correction
   Source: NL 01 recent visual diagnosis.

   Scope:
   - Rebuild DAY only as a richer layered atmospheric composition.
   - Keep Dawn / Sunset / Night unchanged from the previous patch.
   - Keep shell, glass-band geometry, mask logic, crossfade, skyline-off state,
     and local HTTP runtime rules unchanged.

   Visual target logic for Day:
   1. deeper upper blue field;
   2. soft luminous mid-atmosphere;
   3. clear bright low horizon;
   4. secondary low haze above/below the horizon;
   5. subtle atmospheric veil / cloud-vein texture;
   6. very soft vertical light-depth beams;
   7. global blend to keep a calm premium result.

   This remains SkyTimeLayer, not WeatherOutsideLayer:
   no rain, no storm, no animated clouds, no weather behaviour.
---------------------------------------------------------------------------- */

/* DAY — rebuilt as stacked atmospheric layers, not a single soft gradient. */
.sky-day {
  background:
    /* 2 — luminous mid atmosphere, not a flat white patch */
    radial-gradient(
      ellipse at 50% 55%,
      rgba(235, 247, 253, 0.38) 0%,
      rgba(204, 229, 244, 0.18) 32%,
      rgba(178, 210, 231, 0.06) 56%,
      transparent 74%
    ),

    /* 4 — secondary cool low glow below the main horizon */
    radial-gradient(
      ellipse at 50% 102%,
      rgba(130, 168, 190, 0.24) 0%,
      rgba(108, 146, 172, 0.10) 30%,
      transparent 62%
    ),

    /* 1 + 3 — upper sky mass and clear low horizon */
    linear-gradient(
      180deg,
      #2f73ad 0%,
      #4d94ca 24%,
      #74afd5 45%,
      #acd0e3 63%,
      #e2edf3 75%,
      #fbfdfe 82%,
      #d7e4eb 89%,
      #9fb7c4 100%
    );
}

/* DAY before — composite bright horizon + subtle cloud-vein / atmospheric veil. */
.sky-day::before {
  opacity: 0.92;
  mix-blend-mode: normal;
  background:
    /* 5 — ultra-soft high atmospheric streaks, not weather clouds */
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 18%,
      rgba(255, 255, 255, 0.055) 25%,
      transparent 34%,
      transparent 55%,
      rgba(255, 255, 255, 0.045) 63%,
      transparent 74%,
      transparent 100%
    ),
    linear-gradient(
      72deg,
      transparent 0%,
      transparent 42%,
      rgba(210, 232, 245, 0.055) 50%,
      transparent 60%,
      transparent 100%
    ),

    /* 3 — clear luminous low horizon, deliberately narrow but soft */
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 72%,
      rgba(255, 255, 255, 0.08) 76%,
      rgba(255, 255, 255, 0.30) 81%,
      rgba(255, 255, 255, 0.42) 84%,
      rgba(228, 239, 246, 0.18) 89%,
      transparent 96%
    ),

    /* 4 — secondary low haze, broader than the main horizon line */
    radial-gradient(
      ellipse at 50% 88%,
      rgba(248, 252, 254, 0.32) 0%,
      rgba(225, 240, 248, 0.15) 28%,
      rgba(187, 216, 233, 0.06) 48%,
      transparent 66%
    );
}

/* DAY after — soft vertical light-depth beams + global depth blend. */
.sky-day::after {
  opacity: 0.86;
  mix-blend-mode: normal;
  background:
    /* 6 — soft vertical light-depth beams descending from upper zone */
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 33%,
      rgba(255, 255, 255, 0.055) 41%,
      rgba(255, 255, 255, 0.025) 49%,
      transparent 59%,
      transparent 100%
    ),
    linear-gradient(
      80deg,
      transparent 0%,
      transparent 52%,
      rgba(230, 245, 252, 0.050) 59%,
      transparent 69%,
      transparent 100%
    ),

    /* 7 — global premium blending / upper depth */
    radial-gradient(
      ellipse at 50% 46%,
      transparent 34%,
      rgba(35, 80, 119, 0.055) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 39, 74, 0.050) 0%,
      transparent 34%,
      transparent 70%,
      rgba(49, 79, 101, 0.060) 100%
    );
}

/* Reinforce Day's low atmospheric glow without changing other states. */
.exterior-day {
  opacity: 0.15;
  background:
    radial-gradient(
      ellipse at 50% 97%,
      rgba(239, 249, 253, 0.38) 0%,
      rgba(203, 224, 237, 0.12) 32%,
      transparent 58%
    );
}

/* ----------------------------------------------------------------------------
   v4.5 — Aperture-aware Day SkyTimeLayer Mapping
   Source: NL 00 correction on visible window mapping.

   Problem fixed:
   The previous Day sky was built on the full 1671 × 941 canvas. Because the
   visitor sees only a vertical slice through the window openings, the upper
   sky and low horizon could be outside the visible aperture or too diluted.

   Correction:
   Add explicit visible-window boxes inside each sky-state layer and map the
   Day atmospheric structure locally inside those apertures.

   The global window_openings_mask.png remains the safety mask; it is no longer
   the only mechanism used to reveal a full-canvas sky.
---------------------------------------------------------------------------- */

/* Window-local sky boxes. These are approximate aperture boxes derived from
   the active shell/window geometry. The mask still provides final clipping. */
.sky-window {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  display: none;
  border-radius: 42px;
  isolation: isolate;
}

.sky-window::before,
.sky-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: normal;
}

.sky-window-central {
  left: 13.2%;
  top: 15.9%;
  width: 73.7%;
  height: 54.2%;
  border-radius: 44px;
}

.sky-window-left {
  left: -1.7%;
  top: 14.6%;
  width: 15.0%;
  height: 56.8%;
  border-radius: 58px;
}

.sky-window-right {
  left: 86.8%;
  top: 14.6%;
  width: 15.0%;
  height: 56.8%;
  border-radius: 58px;
}

/* Day now uses the local aperture boxes as the primary render. The full-canvas
   Day background remains only as a very soft fallback under the local windows. */
.sky-day {
  background:
    linear-gradient(
      180deg,
      rgba(55, 125, 184, 0.78) 0%,
      rgba(102, 170, 213, 0.58) 34%,
      rgba(191, 221, 237, 0.46) 62%,
      rgba(235, 244, 248, 0.42) 78%,
      rgba(152, 179, 193, 0.40) 100%
    );
}

.sky-day .sky-window {
  display: block;
}

/* Central aperture: its own mini-canvas. 0% is the top visible window edge,
   100% is the bottom visible window edge. */
.sky-day .sky-window-central {
  background:
    /* soft luminous mid-atmosphere */
    radial-gradient(
      ellipse at 50% 45%,
      rgba(236, 248, 254, 0.44) 0%,
      rgba(202, 229, 244, 0.22) 30%,
      rgba(160, 203, 229, 0.08) 58%,
      transparent 76%
    ),
    /* secondary low cool atmospheric glow */
    radial-gradient(
      ellipse at 50% 103%,
      rgba(123, 164, 190, 0.28) 0%,
      rgba(110, 151, 179, 0.12) 32%,
      transparent 66%
    ),
    /* aperture-local sky field + visible horizon */
    linear-gradient(
      180deg,
      #2f78b7 0%,
      #4c97cc 22%,
      #79b8dc 43%,
      #b7d9ec 62%,
      #eef8fc 78%,
      #ffffff 85%,
      #d9e8ee 92%,
      #9fb8c5 100%
    );
}

.sky-day .sky-window-central::before {
  opacity: 0.98;
  background:
    /* subtle atmospheric veil / cloud-vein without weather behaviour */
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 18%,
      rgba(255,255,255,0.065) 25%,
      transparent 34%,
      transparent 55%,
      rgba(255,255,255,0.052) 63%,
      transparent 73%,
      transparent 100%
    ),
    linear-gradient(
      73deg,
      transparent 0%,
      transparent 42%,
      rgba(210,232,245,0.06) 50%,
      transparent 61%,
      transparent 100%
    ),
    /* composite low horizon line inside the visible aperture */
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 72%,
      rgba(255,255,255,0.10) 76%,
      rgba(255,255,255,0.36) 81%,
      rgba(255,255,255,0.50) 84%,
      rgba(230,241,247,0.24) 90%,
      transparent 97%
    ),
    /* secondary broad horizon haze */
    radial-gradient(
      ellipse at 50% 88%,
      rgba(249,253,255,0.38) 0%,
      rgba(225,240,248,0.18) 28%,
      rgba(187,216,233,0.07) 50%,
      transparent 68%
    );
}

.sky-day .sky-window-central::after {
  opacity: 0.88;
  background:
    /* very soft vertical light-depth beams */
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 32%,
      rgba(255,255,255,0.065) 41%,
      rgba(255,255,255,0.028) 49%,
      transparent 60%,
      transparent 100%
    ),
    linear-gradient(
      80deg,
      transparent 0%,
      transparent 52%,
      rgba(230,245,252,0.058) 59%,
      transparent 70%,
      transparent 100%
    ),
    /* aperture-local global blend */
    radial-gradient(
      ellipse at 50% 42%,
      transparent 34%,
      rgba(35,80,119,0.055) 100%
    );
}

/* Side apertures: same time state but quieter, because they only provide
   peripheral sky continuity. Horizon remains visible but less dominant. */
.sky-day .sky-window-left,
.sky-day .sky-window-right {
  background:
    radial-gradient(
      ellipse at 50% 47%,
      rgba(230, 244, 252, 0.32) 0%,
      rgba(196, 223, 240, 0.14) 34%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #377fbb 0%,
      #5aa0ce 26%,
      #8dc1dd 52%,
      #d5e7f0 74%,
      #f7fbfd 84%,
      #a9bfca 100%
    );
}

.sky-day .sky-window-left::before,
.sky-day .sky-window-right::before {
  opacity: 0.70;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 74%,
      rgba(255,255,255,0.08) 78%,
      rgba(255,255,255,0.30) 84%,
      rgba(225,239,247,0.14) 90%,
      transparent 98%
    ),
    radial-gradient(
      ellipse at 50% 88%,
      rgba(248,252,254,0.26) 0%,
      transparent 62%
    );
}

.sky-day .sky-window-left::after,
.sky-day .sky-window-right::after {
  opacity: 0.55;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 36%,
      rgba(255,255,255,0.045) 46%,
      transparent 58%,
      transparent 100%
    );
}

/* The old full-canvas Day pseudo-layers are suppressed for Day only so the
   aperture-local boxes carry the visible composition. Other states keep their
   existing full-canvas presets for now. */
.sky-day::before,
.sky-day::after {
  background: none;
}

.exterior-day {
  opacity: 0.10;
  background:
    radial-gradient(
      ellipse at 50% 74%,
      rgba(239,249,253,0.26) 0%,
      rgba(203,224,237,0.08) 34%,
      transparent 62%
    );
}


/* ----------------------------------------------------------------------------
   v4.6 — Aperture-aware local sky composition extended to Dawn / Sunset / Night

   Day was validated by the user in the aperture-aware approach.
   This pass applies the same visible-window-box logic to the other time states.
   The sky is composed inside the real visible apertures, not only across the
   full 1671 × 941 canvas.
---------------------------------------------------------------------------- */

/* Dawn now uses the same local aperture architecture as Day.
   It must read as cool upper atmosphere + restrained pearl warm horizon. */
.sky-dawn {
  background:
    linear-gradient(
      180deg,
      rgba(31, 64, 96, 0.74) 0%,
      rgba(74, 103, 126, 0.58) 34%,
      rgba(155, 170, 176, 0.44) 66%,
      rgba(193, 187, 183, 0.36) 82%,
      rgba(121, 135, 147, 0.34) 100%
    );
}

.sky-dawn .sky-window {
  display: block;
}

.sky-dawn .sky-window-central {
  background:
    radial-gradient(
      ellipse at 34% 47%,
      rgba(239, 226, 214, 0.24) 0%,
      rgba(223, 214, 206, 0.10) 28%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 34% 103%,
      rgba(136, 143, 152, 0.22) 0%,
      rgba(116, 128, 140, 0.10) 32%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #274765 0%,
      #41627f 22%,
      #70899e 44%,
      #aab4b8 63%,
      #e6d4c7 79%,
      #f3e0cf 85%,
      #cdbbb3 92%,
      #7f909d 100%
    );
}

.sky-dawn .sky-window-central::before {
  opacity: 0.98;
  background:
    linear-gradient(
      108deg,
      transparent 0%,
      transparent 18%,
      rgba(255,255,255,0.05) 26%,
      transparent 36%,
      transparent 58%,
      rgba(241,231,222,0.040) 66%,
      transparent 76%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 72%,
      rgba(255,244,232,0.08) 76%,
      rgba(255,233,211,0.24) 81%,
      rgba(255,226,201,0.36) 84%,
      rgba(218,198,187,0.18) 90%,
      transparent 97%
    ),
    radial-gradient(
      ellipse at 33% 88%,
      rgba(249,235,223,0.28) 0%,
      rgba(233,214,198,0.14) 28%,
      rgba(188,183,183,0.06) 52%,
      transparent 70%
    );
}

.sky-dawn .sky-window-central::after {
  opacity: 0.84;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 34%,
      rgba(255,255,255,0.045) 43%,
      rgba(255,255,255,0.02) 51%,
      transparent 60%,
      transparent 100%
    ),
    linear-gradient(
      82deg,
      transparent 0%,
      transparent 56%,
      rgba(236,225,216,0.04) 63%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 50% 42%,
      transparent 34%,
      rgba(28,55,78,0.065) 100%
    );
}

.sky-dawn .sky-window-left,
.sky-dawn .sky-window-right {
  background:
    radial-gradient(
      ellipse at 40% 48%,
      rgba(235, 224, 214, 0.20) 0%,
      rgba(218, 209, 203, 0.08) 32%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #2f5271 0%,
      #56738b 28%,
      #8ea1ac 54%,
      #d9d2cd 78%,
      #f0e2d7 85%,
      #a6acb1 100%
    );
}

.sky-dawn .sky-window-left::before,
.sky-dawn .sky-window-right::before {
  opacity: 0.72;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 74%,
      rgba(255,241,227,0.06) 78%,
      rgba(255,228,205,0.22) 84%,
      rgba(225,213,204,0.10) 90%,
      transparent 98%
    ),
    radial-gradient(
      ellipse at 50% 89%,
      rgba(248,237,228,0.22) 0%,
      transparent 60%
    );
}

.sky-dawn .sky-window-left::after,
.sky-dawn .sky-window-right::after {
  opacity: 0.52;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,0.035) 47%,
      transparent 58%,
      transparent 100%
    );
}

.sky-dawn::before,
.sky-dawn::after {
  background: none;
}

.exterior-dawn {
  opacity: 0.12;
  background:
    radial-gradient(
      ellipse at 34% 76%,
      rgba(243,228,215,0.22) 0%,
      rgba(205,194,189,0.08) 36%,
      transparent 64%
    );
}

/* Sunset: warmer horizon, richer low light, but still calm and clean. */
.sky-sunset {
  background:
    linear-gradient(
      180deg,
      rgba(21, 49, 74, 0.76) 0%,
      rgba(75, 92, 107, 0.58) 34%,
      rgba(160, 132, 119, 0.42) 68%,
      rgba(208, 126, 86, 0.34) 86%,
      rgba(95, 82, 91, 0.34) 100%
    );
}

.sky-sunset .sky-window {
  display: block;
}

.sky-sunset .sky-window-central {
  background:
    radial-gradient(
      ellipse at 26% 47%,
      rgba(255, 193, 124, 0.28) 0%,
      rgba(230, 160, 104, 0.10) 28%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 35% 103%,
      rgba(126, 83, 75, 0.24) 0%,
      rgba(101, 70, 79, 0.10) 32%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #14314c 0%,
      #304f67 22%,
      #6d7f87 44%,
      #a68878 63%,
      #eb984c 79%,
      #f6ad66 85%,
      #d57a55 92%,
      #645362 100%
    );
}

.sky-sunset .sky-window-central::before {
  opacity: 0.98;
  background:
    linear-gradient(
      108deg,
      transparent 0%,
      transparent 18%,
      rgba(255,240,214,0.05) 26%,
      transparent 36%,
      transparent 58%,
      rgba(255,206,140,0.04) 66%,
      transparent 76%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 72%,
      rgba(255,224,169,0.08) 76%,
      rgba(255,191,106,0.24) 81%,
      rgba(255,174,86,0.40) 84%,
      rgba(223,122,76,0.18) 90%,
      transparent 97%
    ),
    radial-gradient(
      ellipse at 25% 88%,
      rgba(255,212,141,0.32) 0%,
      rgba(255,174,101,0.14) 28%,
      rgba(170,105,94,0.06) 52%,
      transparent 70%
    );
}

.sky-sunset .sky-window-central::after {
  opacity: 0.84;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 34%,
      rgba(255,248,236,0.05) 43%,
      rgba(255,255,255,0.02) 51%,
      transparent 60%,
      transparent 100%
    ),
    linear-gradient(
      82deg,
      transparent 0%,
      transparent 56%,
      rgba(255,210,151,0.04) 63%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 50% 42%,
      transparent 34%,
      rgba(29,41,57,0.075) 100%
    );
}

.sky-sunset .sky-window-left,
.sky-sunset .sky-window-right {
  background:
    radial-gradient(
      ellipse at 38% 48%,
      rgba(250, 201, 138, 0.22) 0%,
      rgba(225, 163, 114, 0.08) 32%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #20405a 0%,
      #566b79 28%,
      #937d76 54%,
      #e4b183 78%,
      #f6d0aa 85%,
      #a58d8f 100%
    );
}

.sky-sunset .sky-window-left::before,
.sky-sunset .sky-window-right::before {
  opacity: 0.72;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 74%,
      rgba(255,225,171,0.06) 78%,
      rgba(255,187,106,0.22) 84%,
      rgba(223,150,114,0.10) 90%,
      transparent 98%
    ),
    radial-gradient(
      ellipse at 50% 89%,
      rgba(255,212,156,0.24) 0%,
      transparent 60%
    );
}

.sky-sunset .sky-window-left::after,
.sky-sunset .sky-window-right::after {
  opacity: 0.52;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 38%,
      rgba(255,247,233,0.035) 47%,
      transparent 58%,
      transparent 100%
    );
}

.sky-sunset::before,
.sky-sunset::after {
  background: none;
}

.exterior-sunset {
  opacity: 0.14;
  background:
    radial-gradient(
      ellipse at 25% 76%,
      rgba(255,192,120,0.26) 0%,
      rgba(194,118,85,0.08) 36%,
      transparent 64%
    );
}

/* Night: deep blue upper field, luminous horizon, residual low glow.
   The local aperture mapping prevents the horizon from falling outside view. */
.sky-night {
  background:
    linear-gradient(
      180deg,
      rgba(2, 7, 18, 0.84) 0%,
      rgba(7, 24, 47, 0.62) 34%,
      rgba(20, 58, 98, 0.44) 68%,
      rgba(34, 85, 133, 0.32) 86%,
      rgba(12, 39, 66, 0.34) 100%
    );
}

.sky-night .sky-window {
  display: block;
}

.sky-night .sky-window-central {
  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(76, 132, 202, 0.16) 0%,
      rgba(33, 83, 145, 0.07) 32%,
      transparent 64%
    ),
    radial-gradient(
      ellipse at 50% 103%,
      rgba(8, 43, 80, 0.28) 0%,
      rgba(5, 28, 57, 0.12) 32%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #010510 0%,
      #031022 22%,
      #0b2b4d 46%,
      #1b4e7d 64%,
      #3976aa 79%,
      #5d95c1 85%,
      #234f7a 92%,
      #0a2948 100%
    );
}

.sky-night .sky-window-central::before {
  opacity: 0.96;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 18%,
      rgba(170,214,255,0.03) 26%,
      transparent 36%,
      transparent 58%,
      rgba(108,171,232,0.028) 66%,
      transparent 76%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 72%,
      rgba(120,181,241,0.05) 76%,
      rgba(104,168,235,0.18) 81%,
      rgba(96,160,226,0.28) 84%,
      rgba(42,100,164,0.14) 90%,
      transparent 97%
    ),
    radial-gradient(
      ellipse at 50% 88%,
      rgba(101,161,226,0.24) 0%,
      rgba(48,109,178,0.10) 28%,
      rgba(8,47,94,0.05) 52%,
      transparent 70%
    );
}

.sky-night .sky-window-central::after {
  opacity: 0.82;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 34%,
      rgba(219,239,255,0.032) 43%,
      rgba(255,255,255,0.012) 51%,
      transparent 60%,
      transparent 100%
    ),
    linear-gradient(
      82deg,
      transparent 0%,
      transparent 56%,
      rgba(120,184,244,0.03) 63%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 50% 42%,
      transparent 34%,
      rgba(0,0,8,0.16) 100%
    );
}

.sky-night .sky-window-left,
.sky-night .sky-window-right {
  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(70, 128, 197, 0.14) 0%,
      rgba(32, 80, 139, 0.06) 32%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #03101f 0%,
      #0e2946 28%,
      #285c8a 54%,
      #5c91bb 78%,
      #6fa6cf 85%,
      #20496f 100%
    );
}

.sky-night .sky-window-left::before,
.sky-night .sky-window-right::before {
  opacity: 0.68;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 74%,
      rgba(118,180,241,0.04) 78%,
      rgba(96,160,226,0.16) 84%,
      rgba(37,94,153,0.10) 90%,
      transparent 98%
    ),
    radial-gradient(
      ellipse at 50% 89%,
      rgba(108,169,231,0.20) 0%,
      transparent 60%
    );
}

.sky-night .sky-window-left::after,
.sky-night .sky-window-right::after {
  opacity: 0.48;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 38%,
      rgba(219,239,255,0.028) 47%,
      transparent 58%,
      transparent 100%
    );
}

.sky-night::before,
.sky-night::after {
  background: none;
}

.exterior-night {
  opacity: 0.12;
  background:
    radial-gradient(
      ellipse at 50% 77%,
      rgba(93,153,218,0.22) 0%,
      rgba(27,78,137,0.08) 36%,
      transparent 64%
    );
}


/* ----------------------------------------------------------------------------
   v4.7 — Day SkyTimeLayer refinement
   Goal: reinforce the distinction between atmospheric layers in the validated
   aperture-aware Day state while keeping the sky clean and premium.
---------------------------------------------------------------------------- */

/* Day fallback behind the visible aperture boxes: slightly clearer vertical
   structure so the Day state does not collapse into a single soft wash. */
.sky-day {
  background:
    linear-gradient(
      180deg,
      rgba(46, 116, 178, 0.82) 0%,
      rgba(88, 155, 204, 0.62) 24%,
      rgba(144, 194, 224, 0.52) 48%,
      rgba(212, 232, 243, 0.46) 68%,
      rgba(244, 249, 252, 0.44) 80%,
      rgba(188, 208, 221, 0.42) 90%,
      rgba(136, 160, 176, 0.40) 100%
    );
}

/* Central aperture: clearer stratification between upper sky, middle field,
   luminous horizon and lower atmospheric band. */
.sky-day .sky-window-central {
  background:
    /* luminous mid-atmosphere field */
    radial-gradient(
      ellipse at 50% 43%,
      rgba(240, 248, 253, 0.42) 0%,
      rgba(214, 234, 246, 0.21) 28%,
      rgba(171, 208, 230, 0.09) 52%,
      transparent 74%
    ),
    /* secondary low cool atmospheric glow */
    radial-gradient(
      ellipse at 50% 103%,
      rgba(142, 175, 195, 0.34) 0%,
      rgba(118, 156, 179, 0.14) 34%,
      transparent 68%
    ),
    /* distinct upper field -> lower field progression */
    linear-gradient(
      180deg,
      #2a71b0 0%,
      #4a96cb 20%,
      #72b3da 40%,
      #9bcae5 57%,
      #cbe3ef 69%,
      #eef8fc 78%,
      #ffffff 83.5%,
      #edf4f8 88%,
      #c6d9e2 93%,
      #8ea7b6 100%
    );
}

.sky-day .sky-window-central::before {
  opacity: 0.99;
  background:
    /* very subtle upper veils: atmospheric only, not cloud behavior */
    linear-gradient(
      108deg,
      transparent 0%,
      transparent 16%,
      rgba(255,255,255,0.055) 24%,
      transparent 34%,
      transparent 56%,
      rgba(255,255,255,0.045) 64%,
      transparent 74%,
      transparent 100%
    ),
    linear-gradient(
      74deg,
      transparent 0%,
      transparent 42%,
      rgba(214,235,246,0.05) 50%,
      transparent 60%,
      transparent 100%
    ),
    /* main luminous horizon strip */
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 73%,
      rgba(255,255,255,0.08) 76%,
      rgba(255,255,255,0.28) 79%,
      rgba(255,255,255,0.52) 82.5%,
      rgba(238,246,250,0.42) 85.5%,
      rgba(216,230,239,0.18) 90%,
      transparent 96.5%
    ),
    /* broad lower horizon haze */
    radial-gradient(
      ellipse at 50% 87.5%,
      rgba(248,252,254,0.36) 0%,
      rgba(230,242,248,0.19) 26%,
      rgba(194,220,233,0.08) 48%,
      transparent 67%
    );
}

.sky-day .sky-window-central::after {
  opacity: 0.9;
  background:
    /* faint vertical depth beams */
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 30%,
      rgba(255,255,255,0.055) 39%,
      rgba(255,255,255,0.024) 47%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      81deg,
      transparent 0%,
      transparent 54%,
      rgba(233,245,251,0.045) 61%,
      transparent 70%,
      transparent 100%
    ),
    /* lower-atmosphere definition */
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 84%,
      rgba(166,189,204,0.05) 90%,
      rgba(112,137,156,0.08) 100%
    ),
    radial-gradient(
      ellipse at 50% 42%,
      transparent 34%,
      rgba(34,82,122,0.055) 100%
    );
}

/* Side apertures keep the same reading, but quieter. */
.sky-day .sky-window-left,
.sky-day .sky-window-right {
  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(235, 246, 252, 0.30) 0%,
      rgba(204, 227, 241, 0.14) 30%,
      transparent 72%
    ),
    radial-gradient(
      ellipse at 50% 103%,
      rgba(138, 172, 194, 0.24) 0%,
      rgba(118, 152, 176, 0.10) 34%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #347cba 0%,
      #5fa4d1 24%,
      #8fc0dd 49%,
      #d6e7f0 72%,
      #fbfdfe 82.5%,
      #dbe8ee 89%,
      #a6bdc9 100%
    );
}

.sky-day .sky-window-left::before,
.sky-day .sky-window-right::before {
  opacity: 0.76;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 74%,
      rgba(255,255,255,0.06) 77%,
      rgba(255,255,255,0.24) 82.5%,
      rgba(232,242,248,0.14) 88%,
      transparent 97%
    ),
    radial-gradient(
      ellipse at 50% 88%,
      rgba(248,252,254,0.24) 0%,
      rgba(224,239,247,0.10) 30%,
      transparent 62%
    );
}

.sky-day .sky-window-left::after,
.sky-day .sky-window-right::after {
  opacity: 0.58;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 36%,
      rgba(255,255,255,0.04) 46%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 86%,
      rgba(120,145,164,0.05) 100%
    );
}

.sky-day::before,
.sky-day::after {
  background: none;
}

.exterior-day {
  opacity: 0.12;
  background:
    radial-gradient(
      ellipse at 50% 74%,
      rgba(241,249,253,0.24) 0%,
      rgba(208,227,239,0.09) 34%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 84%,
      rgba(221,235,243,0.05) 90%,
      transparent 100%
    );
}


/* ----------------------------------------------------------------------------
   v4.8 — Day SkyTimeLayer atmospheric texture refinement
   Source: NL 00 correction after v4.7.

   Diagnosis addressed:
   - aperture-aware mapping is correct;
   - horizon is visible;
   - but Day still reads too much like a clean CSS gradient plus pale band.

   Correction:
   Keep aperture-aware boxes, but enrich Day with controlled atmospheric matter:
   deeper upper sky, soft mid-body, composite low horizon, secondary lower haze,
   subtle cloud/veil texture, diagonal atmospheric streaks and light-depth beams.
   No weather logic, no rain, no storm, no skyline, no Living City.
---------------------------------------------------------------------------- */

/* Full-canvas fallback remains subordinate; the actual visible Day composition
   is carried by the local sky-window boxes. */
.sky-day {
  background:
    radial-gradient(
      ellipse at 50% 44%,
      rgba(210, 233, 246, 0.20) 0%,
      rgba(146, 197, 226, 0.08) 38%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(34, 105, 171, 0.86) 0%,
      rgba(67, 145, 199, 0.68) 23%,
      rgba(116, 184, 220, 0.54) 46%,
      rgba(188, 220, 238, 0.46) 66%,
      rgba(237, 246, 251, 0.44) 79%,
      rgba(204, 220, 230, 0.42) 90%,
      rgba(132, 157, 174, 0.40) 100%
    );
}

/* Central aperture: more natural, less band-like, with atmospheric matter
   concentrated inside the visible opening. */
.sky-day .sky-window-central {
  background:
    /* right-side high veil echoing the reference, very subtle */
    radial-gradient(
      ellipse at 86% 24%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(220, 239, 249, 0.07) 22%,
      transparent 48%
    ),
    /* left/lower horizon veil, broad and lactic */
    radial-gradient(
      ellipse at 24% 80%,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(231, 243, 249, 0.15) 30%,
      transparent 62%
    ),
    /* central airy body — avoids empty flat centre */
    radial-gradient(
      ellipse at 50% 44%,
      rgba(232, 246, 253, 0.36) 0%,
      rgba(199, 226, 242, 0.17) 31%,
      rgba(150, 202, 229, 0.06) 56%,
      transparent 78%
    ),
    /* lower cool atmospheric body below the bright horizon */
    radial-gradient(
      ellipse at 50% 103%,
      rgba(139, 176, 197, 0.36) 0%,
      rgba(111, 151, 177, 0.15) 34%,
      transparent 70%
    ),
    /* aperture-local clean sky field */
    linear-gradient(
      180deg,
      #246daf 0%,
      #408fc7 18%,
      #67add8 36%,
      #94c9e5 55%,
      #c3e0ee 68%,
      #e7f4fa 77%,
      #fbfdfe 82%,
      #eef5f8 87%,
      #c7dbe5 93%,
      #8aa6b7 100%
    );
}

/* Fine atmospheric matter: the horizon is now composite and uneven enough
   to avoid reading as one flat white strip. */
.sky-day .sky-window-central::before {
  opacity: 0.98;
  background:
    /* fine high-right atmospheric veil */
    linear-gradient(
      114deg,
      transparent 0%,
      transparent 54%,
      rgba(255,255,255,0.060) 60%,
      rgba(255,255,255,0.032) 65%,
      transparent 73%,
      transparent 100%
    ),
    linear-gradient(
      101deg,
      transparent 0%,
      transparent 62%,
      rgba(225,240,248,0.052) 69%,
      transparent 79%,
      transparent 100%
    ),
    /* low horizontal haze veils — thin but soft */
    linear-gradient(
      176deg,
      transparent 0%,
      transparent 69%,
      rgba(236,246,251,0.055) 72%,
      transparent 76%,
      transparent 100%
    ),
    linear-gradient(
      183deg,
      transparent 0%,
      transparent 73%,
      rgba(255,255,255,0.075) 75%,
      rgba(255,255,255,0.040) 78%,
      transparent 83%,
      transparent 100%
    ),
    /* composite luminous horizon — broken into several soft fields */
    radial-gradient(
      ellipse at 42% 83%,
      rgba(255,255,255,0.46) 0%,
      rgba(243,250,253,0.24) 20%,
      rgba(220,238,247,0.10) 42%,
      transparent 66%
    ),
    radial-gradient(
      ellipse at 76% 85%,
      rgba(255,255,255,0.30) 0%,
      rgba(232,243,249,0.13) 24%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 74%,
      rgba(255,255,255,0.06) 76.5%,
      rgba(255,255,255,0.24) 80%,
      rgba(255,255,255,0.40) 83%,
      rgba(239,247,251,0.30) 86%,
      rgba(208,226,237,0.13) 91%,
      transparent 97%
    );
}

/* Subtle light-depth and organic variation. Still deterministic CSS,
   but it should no longer read as a single flat gradient. */
.sky-day .sky-window-central::after {
  opacity: 0.88;
  background:
    /* soft vertical light-depth beams from upper field */
    linear-gradient(
      96deg,
      transparent 0%,
      transparent 27%,
      rgba(255,255,255,0.040) 36%,
      rgba(255,255,255,0.018) 45%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      82deg,
      transparent 0%,
      transparent 50%,
      rgba(230,244,251,0.045) 58%,
      rgba(255,255,255,0.020) 64%,
      transparent 73%,
      transparent 100%
    ),
    /* extremely soft texture grid/veil, not decorative and not weather */
    repeating-linear-gradient(
      172deg,
      transparent 0px,
      transparent 42px,
      rgba(255,255,255,0.018) 48px,
      transparent 64px
    ),
    /* deepen the upper corners lightly so the centre has air/depth */
    radial-gradient(
      ellipse at 50% 36%,
      transparent 30%,
      rgba(36, 85, 126, 0.050) 100%
    ),
    /* lower atmosphere is present but not a hard band */
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 83%,
      rgba(171,194,208,0.045) 90%,
      rgba(106,132,151,0.070) 100%
    );
}

/* Side apertures follow the same material logic, but remain peripheral and
   less detailed so the central bay remains the main visual reference. */
.sky-day .sky-window-left,
.sky-day .sky-window-right {
  background:
    radial-gradient(
      ellipse at 78% 25%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(225, 241, 249, 0.05) 28%,
      transparent 56%
    ),
    radial-gradient(
      ellipse at 38% 78%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(225, 240, 248, 0.10) 34%,
      transparent 68%
    ),
    radial-gradient(
      ellipse at 50% 103%,
      rgba(136, 171, 194, 0.24) 0%,
      rgba(114, 150, 174, 0.10) 34%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #3079b7 0%,
      #559ed0 23%,
      #82bee0 47%,
      #c4e0ee 69%,
      #f5fbfd 81%,
      #deebf0 89%,
      #9fb8c7 100%
    );
}

.sky-day .sky-window-left::before,
.sky-day .sky-window-right::before {
  opacity: 0.72;
  background:
    linear-gradient(
      113deg,
      transparent 0%,
      transparent 55%,
      rgba(255,255,255,0.038) 63%,
      transparent 75%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 50% 85%,
      rgba(255,255,255,0.25) 0%,
      rgba(229,242,248,0.10) 30%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 75%,
      rgba(255,255,255,0.19) 83%,
      rgba(225,239,247,0.12) 89%,
      transparent 97%
    );
}

.sky-day .sky-window-left::after,
.sky-day .sky-window-right::after {
  opacity: 0.50;
  background:
    repeating-linear-gradient(
      173deg,
      transparent 0px,
      transparent 48px,
      rgba(255,255,255,0.014) 54px,
      transparent 70px
    ),
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 36%,
      rgba(255,255,255,0.030) 46%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 86%,
      rgba(120,145,164,0.045) 100%
    );
}

.sky-day::before,
.sky-day::after {
  background: none;
}

.exterior-day {
  opacity: 0.11;
  background:
    radial-gradient(
      ellipse at 44% 76%,
      rgba(243,250,253,0.22) 0%,
      rgba(215,232,241,0.08) 34%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 82%,
      rgba(223,236,243,0.045) 90%,
      transparent 100%
    );
}


/* ----------------------------------------------------------------------------
   v4.9 — GlassSurfaceBaseLayer diagnostic toggle

   Purpose:
   Temporarily disable only .glass-surface-base-layer to test whether the base
   glass veil is washing out the Day SkyTimeLayer atmospheric layers.

   This is a diagnostic switch, not a final visual decision.
   Glass highlight, inner edge and band layers remain active so the window still
   has some glass reading while the base veil is removed.
---------------------------------------------------------------------------- */

.showroom-canvas.debug-disable-glass-base .glass-surface-base-layer {
  display: none !important;
}

.debug-glass-toggle {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(26, 38, 56, 0.68);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 0.42rem 0.76rem;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.debug-glass-toggle[aria-pressed="true"] {
  background: rgba(88, 32, 40, 0.78);
  border-color: rgba(255, 180, 190, 0.52);
}

.debug-glass-toggle:focus-visible {
  outline: 2px solid rgba(160, 220, 255, 0.95);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   v4.10 — Time transition bugfix

   Previous diagnostic script added the .is-crossfading class on the scene,
   while the stylesheet actually reveals the next time-state layer through
   .sky-state-next.is-visible and .skyline-state-next.is-visible.

   This fallback keeps both mechanisms compatible.
---------------------------------------------------------------------------- */

.showroom-canvas.is-crossfading .sky-state-next,
.sky-state-next.is-visible {
  opacity: 1;
}

.showroom-canvas.is-crossfading .skyline-state-next,
.skyline-state-next.is-visible {
  opacity: 1;
}


/* ----------------------------------------------------------------------------
   v4.11 — Day higher-contrast atmospheric layer refinement

   NL 00 constraints kept:
   - keep aperture-aware window-local mapping;
   - keep stable shell and current glass architecture;
   - no weather logic, no skyline, no Living City;
   - avoid dramatic clouds and avoid a flat horizontal white band.

   Goal:
   Reinforce the contrast of Day so the atmospheric layers are clearly legible:
   1. deeper upper blue sky field
   2. clearer soft mid-atmosphere field
   3. more distinct luminous low horizon haze
   4. more visible secondary lower pale haze
   5. subtle veils and depth, still calm and premium
---------------------------------------------------------------------------- */

/* Full-canvas Day fallback stays subordinate. */
.sky-day {
  background:
    radial-gradient(
      ellipse at 50% 44%,
      rgba(214, 236, 248, 0.18) 0%,
      rgba(152, 200, 228, 0.08) 36%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(26, 92, 157, 0.92) 0%,
      rgba(56, 131, 190, 0.76) 23%,
      rgba(104, 176, 219, 0.58) 47%,
      rgba(184, 220, 239, 0.44) 67%,
      rgba(240, 247, 251, 0.40) 79%,
      rgba(201, 219, 229, 0.40) 90%,
      rgba(124, 149, 169, 0.42) 100%
    );
}

.sky-day .sky-window-central {
  background:
    /* subtle high-right airy veil */
    radial-gradient(
      ellipse at 87% 22%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(223, 240, 249, 0.06) 24%,
      transparent 48%
    ),
    /* milky left / lower-horizon veil */
    radial-gradient(
      ellipse at 22% 80%,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(233, 244, 249, 0.16) 32%,
      transparent 62%
    ),
    /* central airy atmospheric body */
    radial-gradient(
      ellipse at 50% 45%,
      rgba(236, 248, 253, 0.33) 0%,
      rgba(201, 228, 243, 0.16) 30%,
      rgba(146, 198, 226, 0.06) 56%,
      transparent 78%
    ),
    /* secondary low pale haze below horizon */
    radial-gradient(
      ellipse at 50% 104%,
      rgba(144, 180, 201, 0.38) 0%,
      rgba(111, 150, 176, 0.17) 34%,
      transparent 71%
    ),
    /* base Day field with stronger vertical separation */
    linear-gradient(
      180deg,
      #1f68ab 0%,
      #3382be 14%,
      #4f9dd0 28%,
      #75b7df 44%,
      #abd4e9 60%,
      #d8edf6 72%,
      #f4fbfe 79.5%,
      #ffffff 82.5%,
      #eef5f8 86.5%,
      #d2e2ea 92%,
      #8aa7b9 100%
    );
}

.sky-day .sky-window-central::before {
  opacity: 1;
  background:
    /* fine upper veils */
    linear-gradient(
      114deg,
      transparent 0%,
      transparent 53%,
      rgba(255,255,255,0.065) 60%,
      rgba(255,255,255,0.030) 66%,
      transparent 74%,
      transparent 100%
    ),
    linear-gradient(
      99deg,
      transparent 0%,
      transparent 63%,
      rgba(224,240,248,0.050) 70%,
      transparent 79%,
      transparent 100%
    ),
    /* faint horizontal atmospheric strates */
    linear-gradient(
      178deg,
      transparent 0%,
      transparent 66%,
      rgba(239,247,251,0.045) 69%,
      transparent 72.5%,
      transparent 100%
    ),
    linear-gradient(
      182deg,
      transparent 0%,
      transparent 71%,
      rgba(255,255,255,0.060) 74%,
      rgba(255,255,255,0.028) 77.5%,
      transparent 82.5%,
      transparent 100%
    ),
    /* composite horizon haze — distinct but still soft */
    radial-gradient(
      ellipse at 38% 82.5%,
      rgba(255,255,255,0.56) 0%,
      rgba(244,250,253,0.28) 18%,
      rgba(222,239,247,0.11) 42%,
      transparent 67%
    ),
    radial-gradient(
      ellipse at 72% 84.5%,
      rgba(255,255,255,0.36) 0%,
      rgba(236,245,250,0.15) 23%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 73.2%,
      rgba(255,255,255,0.05) 76%,
      rgba(255,255,255,0.22) 79%,
      rgba(255,255,255,0.48) 82.3%,
      rgba(240,247,251,0.34) 85.5%,
      rgba(209,227,238,0.13) 91%,
      transparent 97%
    );
}

.sky-day .sky-window-central::after {
  opacity: 0.92;
  background:
    /* more legible vertical depth beams */
    linear-gradient(
      95deg,
      transparent 0%,
      transparent 26%,
      rgba(255,255,255,0.050) 35%,
      rgba(255,255,255,0.020) 45%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      82deg,
      transparent 0%,
      transparent 48%,
      rgba(231,244,251,0.048) 57%,
      rgba(255,255,255,0.020) 63%,
      transparent 72%,
      transparent 100%
    ),
    repeating-linear-gradient(
      172deg,
      transparent 0px,
      transparent 40px,
      rgba(255,255,255,0.016) 47px,
      transparent 62px
    ),
    radial-gradient(
      ellipse at 50% 34%,
      transparent 28%,
      rgba(29, 77, 117, 0.065) 100%
    ),
    /* lower haze definition */
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 82%,
      rgba(171,194,208,0.05) 88.5%,
      rgba(100,127,147,0.085) 100%
    );
}

/* Side apertures follow the same structure, but remain quieter. */
.sky-day .sky-window-left,
.sky-day .sky-window-right {
  background:
    radial-gradient(
      ellipse at 80% 24%,
      rgba(255,255,255,0.12) 0%,
      rgba(225,241,249,0.05) 28%,
      transparent 56%
    ),
    radial-gradient(
      ellipse at 36% 79%,
      rgba(255,255,255,0.24) 0%,
      rgba(227,241,248,0.11) 34%,
      transparent 68%
    ),
    radial-gradient(
      ellipse at 50% 104%,
      rgba(139,174,196,0.27) 0%,
      rgba(113,149,173,0.11) 34%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #286fad 0%,
      #4a97ca 24%,
      #7bbce0 48%,
      #c5e1ef 70%,
      #f7fbfd 81.5%,
      #dceaf0 89%,
      #9eb8c8 100%
    );
}

.sky-day .sky-window-left::before,
.sky-day .sky-window-right::before {
  opacity: 0.76;
  background:
    linear-gradient(
      113deg,
      transparent 0%,
      transparent 55%,
      rgba(255,255,255,0.040) 63%,
      transparent 75%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 50% 84%,
      rgba(255,255,255,0.27) 0%,
      rgba(229,242,248,0.11) 30%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 75%,
      rgba(255,255,255,0.21) 82.5%,
      rgba(225,239,247,0.13) 88.5%,
      transparent 97%
    );
}

.sky-day .sky-window-left::after,
.sky-day .sky-window-right::after {
  opacity: 0.54;
  background:
    repeating-linear-gradient(
      173deg,
      transparent 0px,
      transparent 46px,
      rgba(255,255,255,0.014) 53px,
      transparent 69px
    ),
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,0.032) 45%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 85.5%,
      rgba(116,141,161,0.05) 100%
    );
}

.sky-day::before,
.sky-day::after {
  background: none;
}

.exterior-day {
  opacity: 0.10;
  background:
    radial-gradient(
      ellipse at 44% 76%,
      rgba(243,250,253,0.20) 0%,
      rgba(216,232,241,0.07) 34%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 82%,
      rgba(223,236,243,0.04) 90%,
      transparent 100%
    );
}


/* ----------------------------------------------------------------------------
   v4.12 — Day SkyTimeLayer rebuilt as explicit window-local stacked layers

   NL 00 correction implemented:
   The Day sky must no longer be one main gradient enriched by pseudo-elements.
   It must be built as distinct stacked layers inside the real visible window
   opening, in local aperture coordinates.

   Required layer model:
   1. Upper Sky Layer
   2. Atmospheric Mid Layer
   3. Horizon Haze Layer
   4. Cloud Veil Layer

   Added support layer:
   5. Light Depth Softener Layer

   This remains SkyTimeLayer work only:
   no weather logic, no skyline, no Living City, no shell reaction, no UI.
---------------------------------------------------------------------------- */

.sky-sublayer {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  transform: translateZ(0);
}

.sky-day .sky-window {
  display: block;
  background: none !important;
}

.sky-day .sky-window::before,
.sky-day .sky-window::after {
  background: none !important;
}

.sky-day .sky-window .sky-sublayer {
  display: block;
}

.sky-day .upper-sky-layer {
  z-index: 1;
}

.sky-day .atmospheric-mid-layer {
  z-index: 2;
}

.sky-day .horizon-haze-layer {
  z-index: 3;
}

.sky-day .cloud-veil-layer {
  z-index: 4;
}

.sky-day .light-depth-softener-layer {
  z-index: 5;
}

/* Full-canvas Day fallback becomes intentionally neutral.
   The visible sky is now carried by the window-local sublayers. */
.sky-day {
  background:
    linear-gradient(
      180deg,
      rgba(30, 101, 166, 0.38) 0%,
      rgba(84, 161, 207, 0.30) 45%,
      rgba(223, 239, 247, 0.22) 78%,
      rgba(130, 158, 176, 0.20) 100%
    );
}

/* --------------------------------------------------------------------------
   CENTRAL WINDOW — main visual calibration
-------------------------------------------------------------------------- */

/* 1. Upper Sky Layer
   Top 0–35% carries a stronger, cleaner blue field.
   Lower part fades progressively; it does not try to draw the horizon. */
.sky-day .sky-window-central .upper-sky-layer {
  background:
    linear-gradient(
      180deg,
      #1b61a1 0%,
      #2d79b8 13%,
      #4b99cb 29%,
      #72b6dc 45%,
      #a5d2e8 63%,
      #d5eaf5 79%,
      #edf7fb 100%
    );
}

/* 2. Atmospheric Mid Layer
   Wide luminous diffusion across the middle. It breaks the flat-panel reading
   without becoming a centered spotlight. */
.sky-day .sky-window-central .atmospheric-mid-layer {
  opacity: 0.82;
  background:
    radial-gradient(
      ellipse at 48% 46%,
      rgba(244, 251, 255, 0.42) 0%,
      rgba(216, 238, 249, 0.22) 24%,
      rgba(161, 207, 232, 0.08) 51%,
      transparent 74%
    ),
    radial-gradient(
      ellipse at 84% 30%,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(222, 241, 250, 0.055) 25%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(10, 76, 140, 0.035) 0%,
      transparent 28%,
      rgba(255, 255, 255, 0.025) 56%,
      transparent 74%,
      rgba(69, 116, 148, 0.035) 100%
    );
}

/* 3. Horizon Haze Layer
   Broad low luminous haze placed in the 70–85% region of the visible opening.
   It is deliberately not attached as a hard white bottom band. */
.sky-day .sky-window-central .horizon-haze-layer {
  opacity: 1;
  background:
    radial-gradient(
      ellipse at 42% 79%,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(247, 252, 255, 0.38) 17%,
      rgba(224, 240, 248, 0.18) 40%,
      transparent 67%
    ),
    radial-gradient(
      ellipse at 74% 82%,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(236, 246, 251, 0.18) 23%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 50% 104%,
      rgba(137, 173, 196, 0.40) 0%,
      rgba(114, 151, 176, 0.18) 34%,
      transparent 71%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 69%,
      rgba(255, 255, 255, 0.055) 72%,
      rgba(255, 255, 255, 0.20) 77%,
      rgba(255, 255, 255, 0.36) 82%,
      rgba(231, 243, 249, 0.23) 87%,
      rgba(191, 215, 229, 0.11) 93%,
      transparent 100%
    );
}

/* 4. Cloud Veil Layer
   Thin, controlled atmospheric veils. This is not weather:
   no storm, no rain, no heavy cloud mass. */
.sky-day .sky-window-central .cloud-veil-layer {
  opacity: 0.78;
  background:
    linear-gradient(
      113deg,
      transparent 0%,
      transparent 50%,
      rgba(255, 255, 255, 0.080) 58%,
      rgba(255, 255, 255, 0.030) 65%,
      transparent 75%,
      transparent 100%
    ),
    linear-gradient(
      101deg,
      transparent 0%,
      transparent 59%,
      rgba(225, 241, 249, 0.066) 67%,
      transparent 79%,
      transparent 100%
    ),
    linear-gradient(
      178deg,
      transparent 0%,
      transparent 66%,
      rgba(240, 248, 252, 0.060) 69%,
      transparent 73%,
      transparent 100%
    ),
    linear-gradient(
      183deg,
      transparent 0%,
      transparent 71%,
      rgba(255, 255, 255, 0.070) 74%,
      rgba(255, 255, 255, 0.032) 78%,
      transparent 84%,
      transparent 100%
    ),
    repeating-linear-gradient(
      172deg,
      transparent 0px,
      transparent 38px,
      rgba(255, 255, 255, 0.019) 46px,
      transparent 63px
    );
}

/* 5. Light Depth Softener Layer
   Very subtle vertical depth beams + top-corner depth.
   This gives layered air without making a spotlight or UI-like graphic. */
.sky-day .sky-window-central .light-depth-softener-layer {
  opacity: 0.80;
  background:
    linear-gradient(
      95deg,
      transparent 0%,
      transparent 26%,
      rgba(255, 255, 255, 0.055) 35%,
      rgba(255, 255, 255, 0.022) 45%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      82deg,
      transparent 0%,
      transparent 48%,
      rgba(231, 245, 252, 0.052) 57%,
      rgba(255, 255, 255, 0.021) 63%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 50% 34%,
      transparent 28%,
      rgba(25, 72, 112, 0.075) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 60, 119, 0.035) 0%,
      transparent 34%,
      transparent 80%,
      rgba(94, 122, 143, 0.085) 100%
    );
}

/* --------------------------------------------------------------------------
   SIDE WINDOWS — same layer model, quieter and less detailed
-------------------------------------------------------------------------- */

.sky-day .sky-window-left .upper-sky-layer,
.sky-day .sky-window-right .upper-sky-layer {
  background:
    linear-gradient(
      180deg,
      #286fad 0%,
      #4a97ca 24%,
      #7bbce0 48%,
      #c5e1ef 70%,
      #f7fbfd 82%,
      #dceaf0 89%,
      #9eb8c8 100%
    );
}

.sky-day .sky-window-left .atmospheric-mid-layer,
.sky-day .sky-window-right .atmospheric-mid-layer {
  opacity: 0.66;
  background:
    radial-gradient(
      ellipse at 52% 45%,
      rgba(236, 248, 253, 0.26) 0%,
      rgba(204, 228, 241, 0.13) 30%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at 78% 24%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(225, 241, 249, 0.05) 28%,
      transparent 56%
    );
}

.sky-day .sky-window-left .horizon-haze-layer,
.sky-day .sky-window-right .horizon-haze-layer {
  opacity: 0.78;
  background:
    radial-gradient(
      ellipse at 50% 82%,
      rgba(255, 255, 255, 0.31) 0%,
      rgba(229, 242, 248, 0.13) 30%,
      transparent 64%
    ),
    radial-gradient(
      ellipse at 50% 104%,
      rgba(139, 174, 196, 0.27) 0%,
      rgba(113, 149, 173, 0.11) 34%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 75%,
      rgba(255, 255, 255, 0.22) 82.5%,
      rgba(225, 239, 247, 0.13) 88.5%,
      transparent 97%
    );
}

.sky-day .sky-window-left .cloud-veil-layer,
.sky-day .sky-window-right .cloud-veil-layer {
  opacity: 0.46;
  background:
    linear-gradient(
      113deg,
      transparent 0%,
      transparent 55%,
      rgba(255, 255, 255, 0.042) 63%,
      transparent 75%,
      transparent 100%
    ),
    repeating-linear-gradient(
      173deg,
      transparent 0px,
      transparent 46px,
      rgba(255, 255, 255, 0.014) 53px,
      transparent 69px
    );
}

.sky-day .sky-window-left .light-depth-softener-layer,
.sky-day .sky-window-right .light-depth-softener-layer {
  opacity: 0.48;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 35%,
      rgba(255, 255, 255, 0.033) 45%,
      transparent 58%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 85.5%,
      rgba(116, 141, 161, 0.052) 100%
    );
}

/* Prevent older Day pseudo-element experiments from competing with the
   explicit sublayer model. */
.sky-day::before,
.sky-day::after,
.sky-day .sky-window::before,
.sky-day .sky-window::after {
  background: none !important;
}

.exterior-day {
  opacity: 0.08;
  background:
    radial-gradient(
      ellipse at 44% 76%,
      rgba(243, 250, 253, 0.18) 0%,
      rgba(216, 232, 241, 0.06) 34%,
      transparent 64%
    );
}


/* ----------------------------------------------------------------------------
   v4.15 — Day sky precision improvement from active project app

   Purpose:
   Make Day read less like one pale blue panel and more like a layered
   atmosphere within the real visible window openings.

   Priorities implemented:
   1. stronger saturated upper sky
   2. narrower softer atmospheric mid section
   3. clearer low horizon haze band
   4. subtle but readable cloud veils

   Constraint:
   All composition remains in window-local coordinates.
---------------------------------------------------------------------------- */

/* Keep full-canvas Day very quiet so the reading comes from the aperture-local
   layers and not from a global wash. */
.sky-day {
  background:
    linear-gradient(
      180deg,
      rgba(18, 85, 145, 0.18) 0%,
      rgba(74, 150, 198, 0.14) 47%,
      rgba(213, 233, 244, 0.10) 80%,
      rgba(132, 160, 178, 0.10) 100%
    );
}

/* CENTRAL OPENING --------------------------------------------------------- */

/* 1) Stronger top sky: make the 0–35% region read more decisively. */
.sky-day .sky-window-central .upper-sky-layer {
  background:
    linear-gradient(
      180deg,
      #0d4f88 0%,
      #16629d 10%,
      #2879b4 22%,
      #4293c4 36%,
      #67afd6 51%,
      #9ecfe6 68%,
      #d4eaf5 84%,
      #eef8fc 100%
    );
}

/* 2) Atmospheric mid: narrower and less flattening. */
.sky-day .sky-window-central .atmospheric-mid-layer {
  opacity: 0.66;
  background:
    radial-gradient(
      ellipse at 50% 48%,
      rgba(245, 251, 255, 0.28) 0%,
      rgba(220, 238, 248, 0.14) 17%,
      rgba(170, 212, 233, 0.05) 34%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 83% 31%,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(228, 243, 250, 0.028) 18%,
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(9, 76, 140, 0.020) 0%,
      transparent 30%,
      rgba(255, 255, 255, 0.018) 52%,
      transparent 70%,
      rgba(69, 116, 148, 0.020) 100%
    );
}

/* 3) Horizon haze: broad low luminous band in the lower visible part, not a
   thin stripe and not attached to the bottom border. */
.sky-day .sky-window-central .horizon-haze-layer {
  opacity: 1;
  background:
    radial-gradient(
      ellipse at 38% 77%,
      rgba(255, 255, 255, 0.74) 0%,
      rgba(247, 252, 255, 0.46) 15%,
      rgba(225, 240, 248, 0.20) 37%,
      transparent 61%
    ),
    radial-gradient(
      ellipse at 72% 79.5%,
      rgba(255, 255, 255, 0.44) 0%,
      rgba(236, 246, 251, 0.16) 24%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 50% 102%,
      rgba(145, 181, 203, 0.44) 0%,
      rgba(116, 153, 177, 0.18) 31%,
      transparent 67%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 63%,
      rgba(255, 255, 255, 0.00) 67%,
      rgba(255, 255, 255, 0.08) 71%,
      rgba(255, 255, 255, 0.26) 74.5%,
      rgba(255, 255, 255, 0.46) 79%,
      rgba(243, 249, 252, 0.32) 83.5%,
      rgba(210, 227, 237, 0.14) 89.5%,
      transparent 96%
    );
}

/* 4) Cloud veils: subtle, mostly lower half and slightly right-biased. */
.sky-day .sky-window-central .cloud-veil-layer {
  opacity: 0.70;
  background:
    radial-gradient(
      ellipse at 66% 66%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(241, 248, 252, 0.040) 18%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 78% 74%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(236, 246, 251, 0.036) 18%,
      transparent 43%
    ),
    radial-gradient(
      ellipse at 45% 71%,
      rgba(255, 255, 255, 0.065) 0%,
      rgba(234, 244, 250, 0.026) 18%,
      transparent 40%
    ),
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 52%,
      rgba(255, 255, 255, 0.055) 58%,
      rgba(255, 255, 255, 0.020) 64%,
      transparent 73%,
      transparent 100%
    ),
    linear-gradient(
      182deg,
      transparent 0%,
      transparent 68%,
      rgba(245, 250, 253, 0.045) 72%,
      rgba(255, 255, 255, 0.018) 76%,
      transparent 82%,
      transparent 100%
    );
}

/* Depth support reduced so it enhances depth without recreating a broad white
   center wash. */
.sky-day .sky-window-central .light-depth-softener-layer {
  opacity: 0.54;
  background:
    linear-gradient(
      96deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 255, 255, 0.032) 37%,
      rgba(255, 255, 255, 0.012) 44%,
      transparent 55%,
      transparent 100%
    ),
    linear-gradient(
      82deg,
      transparent 0%,
      transparent 54%,
      rgba(232, 245, 252, 0.032) 60%,
      rgba(255, 255, 255, 0.013) 65%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 50% 34%,
      transparent 24%,
      rgba(23, 69, 107, 0.064) 100%
    );
}

/* SIDE OPENINGS ----------------------------------------------------------- */

.sky-day .sky-window-left .upper-sky-layer,
.sky-day .sky-window-right .upper-sky-layer {
  background:
    linear-gradient(
      180deg,
      #1a5b94 0%,
      #2f78b0 20%,
      #56a2cf 43%,
      #a9d3e8 68%,
      #edf7fb 84%,
      #d8e8ef 91%,
      #9fb9c8 100%
    );
}

.sky-day .sky-window-left .atmospheric-mid-layer,
.sky-day .sky-window-right .atmospheric-mid-layer {
  opacity: 0.48;
  background:
    radial-gradient(
      ellipse at 52% 48%,
      rgba(239, 248, 253, 0.18) 0%,
      rgba(205, 229, 241, 0.08) 22%,
      transparent 46%
    );
}

.sky-day .sky-window-left .horizon-haze-layer,
.sky-day .sky-window-right .horizon-haze-layer {
  opacity: 0.76;
  background:
    radial-gradient(
      ellipse at 50% 79%,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(232, 243, 248, 0.10) 28%,
      transparent 56%
    ),
    radial-gradient(
      ellipse at 50% 101%,
      rgba(142, 176, 196, 0.27) 0%,
      rgba(113, 148, 171, 0.10) 31%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 74%,
      rgba(255, 255, 255, 0.14) 79%,
      rgba(226, 239, 247, 0.08) 86%,
      transparent 95%
    );
}

.sky-day .sky-window-left .cloud-veil-layer,
.sky-day .sky-window-right .cloud-veil-layer {
  opacity: 0.34;
  background:
    radial-gradient(
      ellipse at 69% 72%,
      rgba(255,255,255,0.065) 0%,
      rgba(238,247,252,0.022) 18%,
      transparent 40%
    );
}

.sky-day .sky-window-left .light-depth-softener-layer,
.sky-day .sky-window-right .light-depth-softener-layer {
  opacity: 0.34;
}

.exterior-day {
  opacity: 0.03;
  background:
    radial-gradient(
      ellipse at 44% 77%,
      rgba(243, 250, 253, 0.09) 0%,
      rgba(216, 232, 241, 0.03) 34%,
      transparent 64%
    );
}


/* ----------------------------------------------------------------------------
   v4.17 — Provisional SkyTimeLayer freeze + sober static DistantSkylineLayer

   NL 00 decision:
   - current SkyTimeLayer is accepted for now;
   - do not polish Day/Dawn/Sunset/Night further at this stage;
   - integrate a sober static DistantSkylineLayer behind glass and in front of
     SkyTimeLayer;
   - do not add Weather, Living City, HUD, UI or cards.

   Layer order preserved:
   SkyTimeLayer < DistantSkylineLayer < Glass base/rain OFF < Interior Shell
   < Glass highlights/bands < RoomAtmosphere.
---------------------------------------------------------------------------- */

/* Keep the skyline strictly secondary: low, distant, static, and masked to the
   existing window openings. This layer must never become the Living City. */
.distant-skyline-layer {
  z-index: 16;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: normal;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.skyline-state-layer {
  /* Static geometry. Time states only tint/visibility; no movement, no windows. */
  --skyline-far-blur: 2.2px;
  --skyline-near-blur: 1.05px;
  --skyline-contrast: 0.78;
  --skyline-saturation: 0.58;
}

.skyline-day {
  --skyline-far-rgb: 112, 149, 171;
  --skyline-near-rgb: 88, 122, 146;
  --skyline-haze-rgb: 238, 249, 255;
  --skyline-far-opacity: 0.075;
  --skyline-near-opacity: 0.105;
  --skyline-haze-opacity: 0.115;
  --skyline-contrast: 0.72;
  --skyline-saturation: 0.52;
}

.skyline-dawn {
  --skyline-far-rgb: 116, 122, 144;
  --skyline-near-rgb: 90, 94, 116;
  --skyline-haze-rgb: 255, 226, 208;
  --skyline-far-opacity: 0.105;
  --skyline-near-opacity: 0.150;
  --skyline-haze-opacity: 0.155;
  --skyline-contrast: 0.78;
  --skyline-saturation: 0.56;
}

.skyline-sunset {
  --skyline-far-rgb: 119, 94, 105;
  --skyline-near-rgb: 82, 65, 83;
  --skyline-haze-rgb: 255, 195, 154;
  --skyline-far-opacity: 0.135;
  --skyline-near-opacity: 0.205;
  --skyline-haze-opacity: 0.185;
  --skyline-contrast: 0.82;
  --skyline-saturation: 0.62;
}

.skyline-night {
  --skyline-far-rgb: 47, 75, 101;
  --skyline-near-rgb: 13, 29, 50;
  --skyline-haze-rgb: 91, 151, 197;
  --skyline-far-opacity: 0.260;
  --skyline-near-opacity: 0.430;
  --skyline-haze-opacity: 0.185;
  --skyline-contrast: 0.92;
  --skyline-saturation: 0.66;
}

/* Place skyline in the lower visible aperture area and compress it slightly so
   it reads far away. This leaves room in front for the future Living City. */
.skyline-far-silhouette {
  transform: translateY(5.6%) scaleY(0.78);
  transform-origin: 50% 92%;
  opacity: var(--skyline-far-opacity);
  filter:
    blur(var(--skyline-far-blur))
    contrast(var(--skyline-contrast))
    saturate(var(--skyline-saturation));
}

.skyline-near-silhouette {
  transform: translateY(6.0%) scaleY(0.80);
  transform-origin: 50% 92%;
  opacity: var(--skyline-near-opacity);
  filter:
    blur(var(--skyline-near-blur))
    contrast(var(--skyline-contrast))
    saturate(var(--skyline-saturation));
}

/* Haze should integrate the skyline into the horizon; it is not fog/weather. */
.skyline-horizon-haze {
  opacity: var(--skyline-haze-opacity);
  transform: translateY(3.4%) scaleY(0.86);
  transform-origin: 50% 90%;
  background:
    radial-gradient(
      ellipse at 50% 73%,
      rgba(var(--skyline-haze-rgb), 0.30) 0%,
      rgba(var(--skyline-haze-rgb), 0.10) 32%,
      transparent 64%
    ),
    linear-gradient(
      to top,
      rgba(var(--skyline-haze-rgb), 0.16) 0%,
      rgba(var(--skyline-haze-rgb), 0.045) 20%,
      transparent 46%
    );
  filter: blur(8px);
}

/* Debug helper: lets us isolate skyline without changing HTML.
   Add .debug-hide-distant-skyline on #scene manually if needed. */
.showroom-canvas.debug-hide-distant-skyline .distant-skyline-layer {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   v5 — Static DistantSkylineLayer integration using distant_skyline_base.png

   NL 00 accepted the provided skyline asset as the first DistantSkylineLayer.
   This layer is depth only:
   - static image asset;
   - behind the Interior Environment Shell;
   - above / in front of the SkyTimeLayer;
   - masked to window openings;
   - no Living City towers;
   - no animated windows;
   - no weather;
   - no UI/HUD/cards/chatbot.

   Important implementation note:
   The provided transparent PNG is 1671 × 941 px, but its visible silhouette is
   low on the canvas. It is shifted upward inside the DistantSkylineLayer so the
   silhouette sits in the lower visible portion of the showroom apertures.
---------------------------------------------------------------------------- */

.distant-skyline-layer {
  z-index: 16;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: normal;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.skyline-state-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  will-change: opacity;
  transition: opacity var(--time-transition-duration) ease;

  --skyline-img-opacity: 0.16;
  --skyline-img-filter: grayscale(1) brightness(0.96) contrast(0.86) saturate(0.52);
  --skyline-img-blur: 0.75px;
  --skyline-img-shift-y: -13.4%;
  --skyline-img-scale-y: 1.00;
  --skyline-img-scale-x: 1.00;

  --skyline-haze-rgb: 235, 248, 255;
  --skyline-haze-opacity: 0.13;
}

.skyline-state-next {
  opacity: 0;
  pointer-events: none;
}

.skyline-state-next.is-visible {
  opacity: 1;
}

/* Hide older CSS-generated silhouette masks. v5 uses the real PNG asset. */
.skyline-far-silhouette,
.skyline-near-silhouette {
  display: none !important;
}

.distant-skyline-base-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--skyline-img-opacity);
  transform:
    translateY(var(--skyline-img-shift-y))
    scaleX(var(--skyline-img-scale-x))
    scaleY(var(--skyline-img-scale-y));
  transform-origin: 50% 92%;
  filter:
    var(--skyline-img-filter)
    blur(var(--skyline-img-blur));
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

/* Time-state calibration.
   The skyline must remain secondary, but should help the windows stop reading
   as flat color panels. */
.skyline-day {
  --skyline-img-opacity: 0.105;
  --skyline-img-filter: grayscale(1) brightness(1.08) contrast(0.70) saturate(0.42);
  --skyline-img-blur: 1.15px;
  --skyline-haze-rgb: 238, 249, 255;
  --skyline-haze-opacity: 0.11;
}

.skyline-dawn {
  --skyline-img-opacity: 0.145;
  --skyline-img-filter: grayscale(0.92) sepia(0.13) hue-rotate(344deg) brightness(1.00) contrast(0.76) saturate(0.55);
  --skyline-img-blur: 1.00px;
  --skyline-haze-rgb: 255, 226, 208;
  --skyline-haze-opacity: 0.15;
}

.skyline-sunset {
  --skyline-img-opacity: 0.205;
  --skyline-img-filter: grayscale(0.86) sepia(0.28) hue-rotate(336deg) brightness(0.92) contrast(0.86) saturate(0.72);
  --skyline-img-blur: 0.85px;
  --skyline-haze-rgb: 255, 197, 154;
  --skyline-haze-opacity: 0.18;
}

.skyline-night {
  --skyline-img-opacity: 0.390;
  --skyline-img-filter: grayscale(0.82) sepia(0.18) hue-rotate(174deg) brightness(0.58) contrast(1.02) saturate(0.86);
  --skyline-img-blur: 0.55px;
  --skyline-haze-rgb: 82, 139, 188;
  --skyline-haze-opacity: 0.19;
}

.skyline-horizon-haze {
  position: absolute;
  inset: 0;
  opacity: var(--skyline-haze-opacity);
  transform: translateY(-8.5%) scaleY(0.78);
  transform-origin: 50% 88%;
  background:
    radial-gradient(
      ellipse at 50% 76%,
      rgba(var(--skyline-haze-rgb), 0.34) 0%,
      rgba(var(--skyline-haze-rgb), 0.12) 30%,
      transparent 62%
    ),
    linear-gradient(
      to top,
      rgba(var(--skyline-haze-rgb), 0.16) 0%,
      rgba(var(--skyline-haze-rgb), 0.045) 19%,
      transparent 44%
    );
  filter: blur(8px);
  pointer-events: none;
}

/* Manual debug helper. Add this class to #scene if the skyline must be isolated. */
.showroom-canvas.debug-hide-distant-skyline .distant-skyline-layer {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   v5.2 — Raise the single global DistantSkylineLayer for debug validation

   Correction:
   The skyline must remain ONE global DistantSkylineLayer behind the Interior
   Environment Shell, not three separate local window skyline layers.

   Diagnosis:
   distant_skyline_base.png is a 1671 × 941 transparent image whose visible
   city band sits very low in the asset. With a full-scene placement, the useful
   band falls below the visible central bay.

   Debug goal:
   Raise the same global PNG enough so it becomes unmistakably visible around
   the horizon visible through the windows.

   Temporary debug settings:
   - stronger opacity
   - no blur
   - no horizon haze
   - no additional side-window copies
   - no Living City, no weather, no UI
---------------------------------------------------------------------------- */

/* Keep the single global layer. It remains masked by the global window mask and
   sits between SkyTimeLayer and GlassSurfaceLayer. */
.distant-skyline-layer {
  z-index: 16;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: normal;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

/* Debug position: lift the original full-canvas skyline image.
   The skyline asset's non-transparent band is roughly around y=656–770.
   Translating by about -31% places that band into the lower visible area
   of the central rear bay, instead of below it. */
.skyline-state-layer {
  --skyline-img-opacity: 0.82;
  --skyline-img-filter: none;
  --skyline-img-blur: 0px;
  --skyline-img-shift-y: -31%;
  --skyline-img-scale-x: 1.00;
  --skyline-img-scale-y: 1.00;
  --skyline-haze-opacity: 0;
}

.distant-skyline-base-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--skyline-img-opacity) !important;
  transform:
    translateY(var(--skyline-img-shift-y))
    scaleX(var(--skyline-img-scale-x))
    scaleY(var(--skyline-img-scale-y)) !important;
  transform-origin: 50% 92%;
  filter:
    var(--skyline-img-filter)
    blur(var(--skyline-img-blur)) !important;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

/* Disable haze for this specific debug pass. */
.skyline-horizon-haze {
  display: none !important;
}

/* Force all time states to use the same debug visibility.
   Time-state tint refinement comes later after spatial anchoring is validated. */
.skyline-day,
.skyline-dawn,
.skyline-sunset,
.skyline-night {
  --skyline-img-opacity: 0.82;
  --skyline-img-filter: none;
  --skyline-img-blur: 0px;
  --skyline-img-shift-y: -31%;
  --skyline-haze-opacity: 0;
}


/* ----------------------------------------------------------------------------
   v5.3 — InteriorEnvironmentShell diagnostic toggle

   Purpose:
   Temporarily hide only the Interior Environment Shell to inspect what is
   happening behind it: SkyTimeLayer, single raised DistantSkylineLayer,
   GlassSurfaceBaseLayer, and glass-band stack.

   This is a diagnostic developer control, not final showroom UI.
---------------------------------------------------------------------------- */

.showroom-canvas.debug-hide-interior-shell .interior-environment-shell {
  display: none !important;
}

/* The reserved shell illumination overlay is structurally tied to the shell.
   Keep it off with the shell to avoid misleading residual shell-light traces. */
.showroom-canvas.debug-hide-interior-shell .shell-illumination-overlay {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   v5.4 — Shell + window mask diagnostic toggle

   Correction requested:
   The same Shell toggle now removes the InteriorEnvironmentShell AND the
   window-opening masks at the same time.

   Why:
   Hiding only the shell still leaves the SkyTimeLayer / DistantSkylineLayer /
   Glass layers clipped by window_openings_mask.png. That does not reveal the
   full layer behavior behind the shell. This diagnostic mode shows the full
   behind-shell composition.
---------------------------------------------------------------------------- */

/* When Shell+Mask is OFF, remove the window mask from all exterior/glass layers
   that depend on window_openings_mask.png. */
.showroom-canvas.debug-hide-interior-shell .sky-time-layer,
.showroom-canvas.debug-hide-interior-shell .distant-skyline-layer,
.showroom-canvas.debug-hide-interior-shell .glass-surface-base-layer,
.showroom-canvas.debug-hide-interior-shell .glass-surface-highlight-layer,
.showroom-canvas.debug-hide-interior-shell .glass-inner-edge-layer,
.showroom-canvas.debug-hide-interior-shell .glass-band-center-layer,
.showroom-canvas.debug-hide-interior-shell .glass-band-left-layer,
.showroom-canvas.debug-hide-interior-shell .glass-band-right-layer {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Keep the shell itself hidden too. This duplicates v5.3 intentionally so the
   latest rule remains explicit and self-contained at the end of the cascade. */
.showroom-canvas.debug-hide-interior-shell .interior-environment-shell,
.showroom-canvas.debug-hide-interior-shell .shell-illumination-overlay {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   v5.5 — Grouped bottom-right diagnostic layer menu

   Purpose:
   Add buttons for successive layer isolation, move the menu to the bottom-right,
   and separate controls by function for faster testing.

   This is a temporary developer control panel, not final showroom UI.
---------------------------------------------------------------------------- */

.dev-time-controls {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  left: auto;
  bottom: clamp(12px, 2vw, 24px);
  transform: none;
  z-index: 140;
  display: grid;
  gap: 10px;
  width: min(370px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 12px;
  border: 1px solid rgba(190, 225, 255, 0.22);
  border-radius: 16px;
  background: rgba(5, 12, 24, 0.80);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.42);
}

.dev-control-group {
  display: grid;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(200, 232, 255, 0.11);
}

.dev-control-group:first-child {
  padding-top: 0;
  border-top: none;
}

.dev-group-title {
  margin: 0;
  color: rgba(198, 226, 245, 0.74);
  font: 600 11px/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dev-button-row,
.dev-button-grid {
  display: grid;
  gap: 8px;
}

.dev-button-row--time {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dev-button-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dev-time-controls button {
  appearance: none;
  min-height: 34px;
  border: 1px solid rgba(200, 232, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(235, 248, 255, 0.88);
  padding: 9px 10px;
  font: inherit;
  font-size: 12px;
  line-height: 1.1;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.dev-time-controls button[aria-pressed="true"] {
  background: rgba(215, 240, 255, 0.24);
  border-color: rgba(235, 250, 255, 0.48);
  color: #ffffff;
}

.debug-glass-toggle,
.debug-shell-toggle,
.dev-layer-toggle {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(24, 34, 50, 0.72);
}

.debug-glass-toggle[aria-pressed="true"],
.debug-shell-toggle[aria-pressed="true"],
.dev-layer-toggle[aria-pressed="true"] {
  background: rgba(88, 32, 40, 0.78);
  border-color: rgba(255, 180, 190, 0.52);
  color: #ffffff;
}

.dev-time-controls button:focus-visible {
  outline: 2px solid rgba(235, 250, 255, 0.92);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .dev-time-controls {
    right: 9px;
    bottom: 9px;
    width: min(340px, calc(100vw - 18px));
    padding: 10px;
  }

  .dev-button-row--time {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dev-button-grid {
    grid-template-columns: 1fr;
  }
}

/* Successive layer visibility toggles */
.showroom-canvas.debug-hide-sky-time .sky-time-layer {
  display: none !important;
}

.showroom-canvas.debug-hide-distant-skyline .distant-skyline-layer {
  display: none !important;
}

.showroom-canvas.debug-hide-glass-fx .glass-surface-highlight-layer,
.showroom-canvas.debug-hide-glass-fx .glass-inner-edge-layer {
  display: none !important;
}

.showroom-canvas.debug-hide-glass-bands .glass-band-center-layer,
.showroom-canvas.debug-hide-glass-bands .glass-band-left-layer,
.showroom-canvas.debug-hide-glass-bands .glass-band-right-layer {
  display: none !important;
}

.showroom-canvas.debug-hide-room-atmosphere .room-atmosphere-layer {
  display: none !important;
}

.showroom-canvas.debug-show-alignment .alignment-overlay.optional {
  display: block !important;
}


/* ----------------------------------------------------------------------------
   v5.6 — Mask diagnostics + scrollable bottom-right developer menu

   Request:
   Add controls for the masks as well, so it is possible to see what happens
   behind the dark/black clipped bands. Keep the developer menu bottom-right,
   separated by function, but make it scrollable so it does not grow further.

   This remains a temporary diagnostic panel, not final showroom UI.
---------------------------------------------------------------------------- */

/* Keep the menu compact even after adding more diagnostic controls. */
.dev-time-controls {
  max-height: min(680px, calc(100vh - 24px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.dev-time-controls::-webkit-scrollbar {
  width: 8px;
}

.dev-time-controls::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.dev-time-controls::-webkit-scrollbar-thumb {
  background: rgba(205, 232, 255, 0.24);
  border-radius: 999px;
}

.dev-time-controls::-webkit-scrollbar-thumb:hover {
  background: rgba(225, 244, 255, 0.36);
}

.dev-layer-toggle--wide {
  grid-column: 1 / -1;
}

@media (max-height: 760px) {
  .dev-time-controls {
    max-height: calc(100vh - 18px);
  }
}

/* Window-opening mask toggle.
   This removes the global window_openings_mask.png without hiding the shell.
   It is different from Shell+Mask OFF, which also hides the shell image. */
.showroom-canvas.debug-disable-window-mask .sky-time-layer,
.showroom-canvas.debug-disable-window-mask .distant-skyline-layer,
.showroom-canvas.debug-disable-window-mask .glass-surface-base-layer,
.showroom-canvas.debug-disable-window-mask .glass-surface-highlight-layer,
.showroom-canvas.debug-disable-window-mask .glass-inner-edge-layer,
.showroom-canvas.debug-disable-window-mask .glass-band-center-layer,
.showroom-canvas.debug-disable-window-mask .glass-band-left-layer,
.showroom-canvas.debug-disable-window-mask .glass-band-right-layer,
.showroom-canvas.debug-disable-all-masks .sky-time-layer,
.showroom-canvas.debug-disable-all-masks .distant-skyline-layer,
.showroom-canvas.debug-disable-all-masks .glass-surface-base-layer,
.showroom-canvas.debug-disable-all-masks .glass-surface-highlight-layer,
.showroom-canvas.debug-disable-all-masks .glass-inner-edge-layer,
.showroom-canvas.debug-disable-all-masks .glass-band-center-layer,
.showroom-canvas.debug-disable-all-masks .glass-band-left-layer,
.showroom-canvas.debug-disable-all-masks .glass-band-right-layer {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Legacy CSS skyline mask toggle.
   The current v5 PNG skyline is active, but the older SVG silhouettes are still
   present in the stylesheet. This lets us inspect them if they are re-enabled. */
.showroom-canvas.debug-disable-skyline-svg-masks .skyline-far-silhouette,
.showroom-canvas.debug-disable-skyline-svg-masks .skyline-near-silhouette,
.showroom-canvas.debug-disable-all-masks .skyline-far-silhouette,
.showroom-canvas.debug-disable-all-masks .skyline-near-silhouette {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Sky local frame diagnostic.
   Shows whether the aperture-aware local sky boxes are hiding information
   before the global window mask is even applied. */
.showroom-canvas.debug-disable-sky-local-frames .sky-window,
.showroom-canvas.debug-disable-all-masks .sky-window {
  overflow: visible !important;
  border-radius: 0 !important;
}

.showroom-canvas.debug-disable-sky-local-frames .sky-window::before,
.showroom-canvas.debug-disable-sky-local-frames .sky-window::after,
.showroom-canvas.debug-disable-all-masks .sky-window::before,
.showroom-canvas.debug-disable-all-masks .sky-window::after {
  border-radius: 0 !important;
}

/* Glass band clip diagnostic.
   Clip-paths are not image masks, but visually they behave like local masks.
   Removing them helps inspect what exists behind / outside the visible bands. */
.showroom-canvas.debug-disable-glass-band-clips .glass-band-center-layer,
.showroom-canvas.debug-disable-glass-band-clips .glass-band-left-layer,
.showroom-canvas.debug-disable-glass-band-clips .glass-band-right-layer,
.showroom-canvas.debug-disable-all-masks .glass-band-center-layer,
.showroom-canvas.debug-disable-all-masks .glass-band-left-layer,
.showroom-canvas.debug-disable-all-masks .glass-band-right-layer {
  clip-path: none !important;
}


/* ----------------------------------------------------------------------------
   v5.7 — Skyline position debug correction

   Diagnosis after user test:
   If SkyTime Day is ON and the skyline remains invisible, the PNG skyline is
   still not being read in the expected visible zone. For this diagnostic pass,
   we force the accepted single global DistantSkylineLayer into a clear position
   and remove visual factors that can hide it.

   Important:
   - still ONE global DistantSkylineLayer;
   - no skyline-window-central / left / right duplication;
   - no image generation;
   - no Living City;
   - no weather;
   - this is a debug placement pass, not final premium dosage.
---------------------------------------------------------------------------- */

/* The position debug is intentionally ON by default through script.js.
   It can be disabled from the bottom-right menu. */
.showroom-canvas.debug-force-skyline-position .distant-skyline-layer {
  display: block !important;
  opacity: 1 !important;
  z-index: 16 !important;
  mix-blend-mode: normal !important;
}

.showroom-canvas.debug-force-skyline-position .skyline-state-layer {
  --skyline-img-opacity: 1;
  --skyline-img-filter: none;
  --skyline-img-blur: 0px;

  /* The asset skyline band is around y=656–769 in the 941px canvas.
     -22.5% lifts it to approximately y=444–557, which sits in the lower
     visible bay/horizon zone instead of falling below the readable window. */
  --skyline-img-shift-y: -22.5%;
  --skyline-img-scale-x: 1.00;
  --skyline-img-scale-y: 1.00;
  --skyline-haze-opacity: 0;
}

.showroom-canvas.debug-force-skyline-position .distant-skyline-base-image {
  opacity: 1 !important;
  filter: none !important;
  transform:
    translateY(var(--skyline-img-shift-y))
    scaleX(var(--skyline-img-scale-x))
    scaleY(var(--skyline-img-scale-y)) !important;
  mix-blend-mode: normal !important;
}

.showroom-canvas.debug-force-skyline-position .skyline-horizon-haze {
  display: none !important;
}

/* In debug mode, make sure disabling window/all masks does not accidentally
   remove or neutralize the skyline itself. */
.showroom-canvas.debug-force-skyline-position.debug-disable-window-mask .distant-skyline-layer,
.showroom-canvas.debug-force-skyline-position.debug-disable-all-masks .distant-skyline-layer {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}


/* ----------------------------------------------------------------------------
   v5.8 — Compact bottom-right developer menu height only

   User request:
   Reduce only the visible height of the existing bottom-right developer menu
   and rely on vertical scroll to access the remaining buttons.

   No layer behavior, masks, skyline, shell, glass, time states, HTML structure,
   or JavaScript logic is changed in this pass.
---------------------------------------------------------------------------- */

.dev-time-controls {
  max-height: min(255px, calc(100vh - 24px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-height: 760px) {
  .dev-time-controls {
    max-height: min(255px, calc(100vh - 18px));
  }
}

/* ----------------------------------------------------------------------------
   v5.9 — Skyline ON/OFF priority fix only

   Correction:
   Skyline OFF must always win over Skyline Debug ON. The debug placement rule
   previously forced .distant-skyline-layer back to display:block, cancelling
   the Skyline ON/OFF button.
---------------------------------------------------------------------------- */

.showroom-canvas.debug-hide-distant-skyline.debug-force-skyline-position .distant-skyline-layer,
.showroom-canvas.debug-hide-distant-skyline .distant-skyline-layer {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   v6.1 — LivingCityLayer re-anchored to depart.png visual grammar

   Correction from NL 00:
   The Living City must not read as classical towers or a normal skyline.
   It must read as a sparse futuristic data-city: thin luminous vertical
   structures, transparent frames, low urban haze, and data-bar clusters.

   Stack position:
   SkyTimeLayer → DistantSkylineLayer → LivingCityLayer → Interior Shell → Glass.
---------------------------------------------------------------------------- */

.living-city-layer {
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: var(--lc-layer-opacity, 0.82);

  --lc-body-color: rgba(128, 224, 255, 0.34);
  --lc-line-color: rgba(184, 238, 255, 0.36);
  --lc-light-color: rgba(218, 248, 255, 0.38);
  --lc-haze-color: rgba(204, 238, 255, 0.20);

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.living-city-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.living-city-object {
  opacity: var(--lc-object-opacity, 0.24);
  transition: opacity var(--time-transition-duration) ease;
}

.lc-needle-core,
.lc-needle-glow,
.lc-frame-outline,
.lc-frame-inner,
.lc-data-bar,
.lc-mass-block,
.lc-haze-line,
.lc-signal-spire {
  vector-effect: non-scaling-stroke;
}

/* Needle Tower: thin luminous vertical line structure, not a block. */
.lc-needle-core {
  stroke: var(--lc-line-color);
  stroke-width: 1.15;
  stroke-linecap: round;
  opacity: var(--lc-line-opacity, 0.28);
}

.lc-needle-glow {
  stroke: var(--lc-line-color);
  stroke-width: 0.75;
  stroke-linecap: round;
  opacity: calc(var(--lc-line-opacity, 0.28) * 0.48);
  filter: blur(0.45px);
}

.lc-needle-tick {
  stroke: var(--lc-light-color);
  stroke-width: 1;
  stroke-linecap: round;
  transition: opacity var(--time-transition-duration) ease;
}

/* Data Bar Cluster: sparse analytics-like vertical bars, never a LED wall. */
.lc-data-bar {
  fill: var(--lc-line-color);
  opacity: calc(var(--lc-line-opacity, 0.28) * 0.44);
}

.lc-data-bar-cap {
  stroke: var(--lc-light-color);
  stroke-width: 1.05;
  stroke-linecap: round;
  transition: opacity var(--time-transition-duration) ease;
}

/* Glass Frame Tower: transparent rectangular frame and inner faint lines. */
.lc-frame-outline {
  fill: rgba(255, 255, 255, 0.015);
  stroke: var(--lc-line-color);
  stroke-width: 1.05;
  opacity: var(--lc-line-opacity, 0.28);
}

.lc-frame-inner {
  stroke: var(--lc-line-color);
  stroke-width: 0.7;
  opacity: calc(var(--lc-line-opacity, 0.28) * 0.42);
}

.lc-frame-node {
  fill: var(--lc-light-color);
  transition: opacity var(--time-transition-duration) ease;
}

/* Low Urban Mass Block: low, wide, misty horizon support, not a heavy building. */
.lc-mass-block {
  fill: var(--lc-body-color);
  opacity: calc(var(--lc-object-opacity, 0.24) * 0.34);
}

.lc-haze-line {
  fill: none;
  stroke: var(--lc-haze-color);
  stroke-width: 1.4;
  opacity: calc(var(--lc-object-opacity, 0.24) * 0.46);
  filter: blur(0.7px);
}

/* Disabled by default in the MVP. If enabled later, it must remain attached to
   a Needle Tower or Glass Frame Tower and must never flash. */
.lc-signal-spire {
  display: none;
  stroke: var(--lc-light-color);
  stroke-width: 0.9;
  opacity: 0.32;
  stroke-linecap: round;
}

.living-city-object[data-signal-spire-enabled="true"].debug-show-signal .lc-signal-spire {
  display: block;
}

.showroom-canvas.debug-hide-living-city .living-city-layer {
  display: none !important;
}

/* Existing mask diagnostics must also affect the LivingCityLayer. */
.showroom-canvas.debug-disable-window-mask .living-city-layer,
.showroom-canvas.debug-disable-all-masks .living-city-layer,
.showroom-canvas.debug-hide-interior-shell .living-city-layer {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Skyline OFF should not hide the Living City; they are separate layers. */
.showroom-canvas.debug-hide-distant-skyline .living-city-layer {
  display: block;
}

/* ----------------------------------------------------------------------------
   v6.2 — LivingCityBaseLayer composition validation test

   NL 00 validation scope:
   - use living_city_base_v2_alpha_corrected.png as the accepted base image;
   - test it in the real layer stack behind shell, glass and atmosphere;
   - do not redesign the city;
   - do not add CityWindowLightOverlay or CityReflectionLightOverlay;
   - do not add weather, HUD, UI, traffic or animation.

   This block intentionally overrides the previous v6.1 SVG/object styling while
   preserving the same layer position and the existing Living City ON/OFF toggle.
---------------------------------------------------------------------------- */

.living-city-base-layer {
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  mix-blend-mode: normal;
  opacity: var(--lc-base-layer-opacity, 0.54);

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.living-city-base-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  opacity: var(--lc-base-image-opacity, 0.72);
  filter:
    saturate(var(--lc-base-saturation, 1.00))
    contrast(var(--lc-base-contrast, 0.96))
    brightness(var(--lc-base-brightness, 0.99))
    blur(var(--lc-base-blur, 0.22px));
  transform: translateY(var(--lc-base-shift-y, 0px));
  transform-origin: center;
  transition:
    opacity var(--time-transition-duration) ease,
    filter var(--time-transition-duration) ease,
    transform var(--time-transition-duration) ease;
}

.living-city-base-softener,
.living-city-base-horizon-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Softens the accepted city image so it is evaluated as background intelligence,
   not as a competing hero illustration. */
.living-city-base-softener {
  opacity: var(--lc-base-softener-opacity, 0.12);
  background:
    linear-gradient(
      to bottom,
      rgba(230, 247, 255, 0.22) 0%,
      rgba(196, 226, 244, 0.18) 42%,
      rgba(210, 236, 248, 0.12) 64%,
      rgba(232, 248, 255, 0.22) 100%
    );
  mix-blend-mode: screen;
}

/* Slight horizon haze to bind city, water/reflection and glass. */
.living-city-base-horizon-veil {
  opacity: var(--lc-base-horizon-veil-opacity, 0.14);
  background:
    radial-gradient(
      ellipse at 50% 62%,
      rgba(233, 250, 255, 0.36) 0%,
      rgba(187, 224, 244, 0.18) 30%,
      transparent 62%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 44%,
      rgba(211, 239, 250, 0.18) 61%,
      rgba(235, 250, 255, 0.14) 100%
    );
  mix-blend-mode: screen;
}

.showroom-canvas.time-day {
  --lc-base-layer-opacity: 0.50;
  --lc-base-image-opacity: 0.68;
  --lc-base-saturation: 0.94;
  --lc-base-contrast: 0.92;
  --lc-base-brightness: 1.01;
  --lc-base-blur: 0.30px;
  --lc-base-softener-opacity: 0.14;
  --lc-base-horizon-veil-opacity: 0.16;
}

.showroom-canvas.time-dawn {
  --lc-base-layer-opacity: 0.54;
  --lc-base-image-opacity: 0.72;
  --lc-base-saturation: 0.98;
  --lc-base-contrast: 0.94;
  --lc-base-brightness: 1.00;
  --lc-base-blur: 0.25px;
  --lc-base-softener-opacity: 0.12;
  --lc-base-horizon-veil-opacity: 0.14;
}

.showroom-canvas.time-sunset {
  --lc-base-layer-opacity: 0.56;
  --lc-base-image-opacity: 0.74;
  --lc-base-saturation: 1.02;
  --lc-base-contrast: 0.96;
  --lc-base-brightness: 0.98;
  --lc-base-blur: 0.22px;
  --lc-base-softener-opacity: 0.11;
  --lc-base-horizon-veil-opacity: 0.13;
}

.showroom-canvas.time-night {
  --lc-base-layer-opacity: 0.58;
  --lc-base-image-opacity: 0.76;
  --lc-base-saturation: 1.05;
  --lc-base-contrast: 1.00;
  --lc-base-brightness: 0.96;
  --lc-base-blur: 0.18px;
  --lc-base-softener-opacity: 0.10;
  --lc-base-horizon-veil-opacity: 0.12;
}

.showroom-canvas.debug-hide-living-city .living-city-base-layer {
  display: none !important;
}

.showroom-canvas.debug-disable-window-mask .living-city-base-layer,
.showroom-canvas.debug-disable-all-masks .living-city-base-layer,
.showroom-canvas.debug-hide-interior-shell .living-city-base-layer {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ----------------------------------------------------------------------------
   v6.3 — LivingCityBaseLayer horizon alignment correction

   NL 00 correction:
   During debug review with SkyTimeLayer OFF and InteriorEnvironmentShell OFF,
   the LivingCityBaseLayer sat too low compared with the DistantSkylineLayer.

   This is only a vertical composition correction:
   - keep living_city_base_v2_alpha_corrected.png;
   - keep the 1671 × 941 canvas;
   - do not redesign, regenerate, rescale, animate, or add effects;
   - align the Living City perceived horizon / waterline with the raised
     DistantSkylineLayer debug horizon.

   Implementation note:
   The distant skyline debug band is lifted to the lower central bay zone. The
   accepted Living City alpha asset has its strong city/water horizon much lower
   in the full canvas, so the base image was first lifted by 172px.

   v6.5 correction:
   The review screenshot red arrow measured about 72 rendered px, equivalent to
   roughly 62 source-canvas px. The Living City was therefore lowered by 62px:
   -172px → -110px.

   v6.6 correction:
   A second review screenshot requested a small upward correction equal to the
   red arrow height. The arrow measures about 21 rendered px, so the Living City
   is raised by 21px: -110px → -131px. The horizon veil follows the same offset.
   The mask remains bound to the approved window openings; only the image
   content moves vertically.
---------------------------------------------------------------------------- */

.living-city-base-layer {
  --lc-base-shift-y: -131px;
}

/* Move the haze support with the city/water junction after the v6.6 vertical
   raise. This is not a new effect; it only follows the corrected alignment. */
.living-city-base-horizon-veil {
  transform: translateY(-13px);
}

/* ----------------------------------------------------------------------------
   v6.7 — LivingCityBaseLayer skytime readability curve

   User review across Day / Dawn / Sunset / Night shows that the Living City
   reads best when the SkyTimeLayer is darker. Night is already approved and
   intentionally remains unchanged. Brighter SkyTime states need a controlled
   per-time readability lift so the city does not become milky or disappear
   behind the bright sky/glass treatment.

   Scope:
   - CSS variables only;
   - no image generation;
   - no vertical position change;
   - no skyline, shell, glass, control UI, or asset change;
   - Night values remain exactly as approved in v6.6.
---------------------------------------------------------------------------- */

.showroom-canvas.time-day {
  --lc-base-layer-opacity: 0.54;
  --lc-base-image-opacity: 0.74;
  --lc-base-saturation: 1.00;
  --lc-base-contrast: 1.04;
  --lc-base-brightness: 0.98;
  --lc-base-blur: 0.24px;
  --lc-base-softener-opacity: 0.10;
  --lc-base-horizon-veil-opacity: 0.12;
}

.showroom-canvas.time-dawn {
  --lc-base-layer-opacity: 0.56;
  --lc-base-image-opacity: 0.75;
  --lc-base-saturation: 1.02;
  --lc-base-contrast: 1.01;
  --lc-base-brightness: 0.98;
  --lc-base-blur: 0.22px;
  --lc-base-softener-opacity: 0.10;
  --lc-base-horizon-veil-opacity: 0.12;
}

.showroom-canvas.time-sunset {
  --lc-base-layer-opacity: 0.57;
  --lc-base-image-opacity: 0.75;
  --lc-base-saturation: 1.04;
  --lc-base-contrast: 0.98;
  --lc-base-brightness: 0.97;
  --lc-base-blur: 0.20px;
  --lc-base-softener-opacity: 0.10;
  --lc-base-horizon-veil-opacity: 0.12;
}

/* ----------------------------------------------------------------------------
   v6.9 — NL 00 CSS composition refinement

   Scope:
   - CSS composition refinement only.
   - No Living City asset regeneration.
   - No shell redesign.
   - No CityWindowLightOverlay / CityReflectionLightOverlay.

   Goals:
   1. reduce rear-bay rectangular sky / atmosphere reading;
   2. improve SkyTimeLayer + LivingCityBaseLayer + GlassSurfaceLayer blending;
   3. recover a little structure in Day and Dawn central washout;
   4. keep Sunset premium while reducing orange saturation;
   5. keep Night available but not default;
   6. reserve a local right-side readability veil for the future chatbot/menu.
---------------------------------------------------------------------------- */

:root {
  --sky-aperture-edge-blend-opacity: 0.16;
  --sky-aperture-edge-blend-rgb: 21, 46, 73;
  --lc-edge-continuity-opacity: 0.10;
  --lc-center-depth-recovery-opacity: 0.08;
  --glass-world-blend-opacity: 1;
  --chatbot-readability-veil-opacity: 0.18;
}

/* Sky continuity veil: keeps the exterior from reading as a flat rectangle by
   softening the upper/lateral/bottom aperture edges inside the window mask. */
.sky-time-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: var(--sky-aperture-edge-blend-opacity);
  background:
    radial-gradient(
      ellipse at 50% 49%,
      transparent 0%,
      transparent 44%,
      rgba(var(--sky-aperture-edge-blend-rgb), 0.16) 78%,
      rgba(var(--sky-aperture-edge-blend-rgb), 0.28) 100%
    ),
    linear-gradient(
      90deg,
      rgba(var(--sky-aperture-edge-blend-rgb), 0.28) 0%,
      rgba(var(--sky-aperture-edge-blend-rgb), 0.08) 11%,
      transparent 25%,
      transparent 75%,
      rgba(var(--sky-aperture-edge-blend-rgb), 0.08) 89%,
      rgba(var(--sky-aperture-edge-blend-rgb), 0.28) 100%
    ),
    linear-gradient(
      180deg,
      rgba(var(--sky-aperture-edge-blend-rgb), 0.20) 0%,
      transparent 18%,
      transparent 73%,
      rgba(var(--sky-aperture-edge-blend-rgb), 0.18) 100%
    );
  mix-blend-mode: multiply;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

/* City continuity veil: binds the alpha city with the sky and glass without
   adding new city lights or reflection overlays. */
.living-city-base-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--lc-edge-continuity-opacity);
  background:
    radial-gradient(
      ellipse at 50% 51%,
      transparent 0%,
      transparent 46%,
      rgba(12, 34, 58, 0.22) 82%,
      rgba(8, 22, 40, 0.34) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 21, 39, 0.12) 0%,
      transparent 22%,
      transparent 72%,
      rgba(16, 40, 62, 0.16) 100%
    );
  mix-blend-mode: multiply;
}

.living-city-base-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--lc-center-depth-recovery-opacity);
  background:
    radial-gradient(
      ellipse at 50% 58%,
      rgba(11, 38, 64, 0.20) 0%,
      rgba(12, 42, 68, 0.10) 24%,
      transparent 54%
    );
  mix-blend-mode: multiply;
}

/* Glass world blend: adds a very soft non-rectangular glass continuity field
   above the exterior stack, while preserving the validated glass geometry. */
.glass-surface-base-layer {
  background:
    radial-gradient(
      ellipse at 50% 48%,
      transparent 0%,
      transparent 48%,
      rgba(var(--glass-band-side-color-rgb), calc(0.030 * var(--glass-world-blend-opacity))) 82%,
      rgba(var(--glass-band-side-color-rgb), calc(0.052 * var(--glass-world-blend-opacity))) 100%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, calc(0.030 * var(--glass-world-blend-opacity))) 0%,
      transparent 14%,
      transparent 86%,
      rgba(255, 255, 255, calc(0.026 * var(--glass-world-blend-opacity))) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(var(--glass-band-side-color-rgb), 0.012) 47%,
      rgba(110, 190, 240, 0.010) 100%
    );
}

/* Right-side future chatbot/menu readability reservation.
   This is not UI; it is a local background-control veil behind the future UI. */
.showroom-canvas::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 47%;
  z-index: 62;
  pointer-events: none;
  opacity: var(--chatbot-readability-veil-opacity);
  background:
    radial-gradient(
      ellipse at 72% 70%,
      rgba(3, 10, 22, 0.62) 0%,
      rgba(5, 15, 28, 0.40) 44%,
      rgba(5, 16, 30, 0.18) 67%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(3, 10, 22, 0.28) 35%,
      rgba(3, 10, 22, 0.54) 100%
    );
}

/* Day: reduce central washout while keeping the calm luminous read. */
.showroom-canvas.time-day {
  --sky-aperture-edge-blend-opacity: 0.18;
  --lc-edge-continuity-opacity: 0.12;
  --lc-center-depth-recovery-opacity: 0.12;
  --chatbot-readability-veil-opacity: 0.17;
  --lc-base-image-opacity: 0.75;
  --lc-base-contrast: 1.06;
  --lc-base-brightness: 0.965;
  --lc-base-softener-opacity: 0.085;
  --lc-base-horizon-veil-opacity: 0.105;
}

.showroom-canvas.time-day .sky-window-central .atmospheric-mid-layer {
  opacity: 0.58;
}

.showroom-canvas.time-day .sky-window-central .horizon-haze-layer {
  opacity: 0.88;
}

.showroom-canvas.time-day .sky-window-central .cloud-veil-layer {
  opacity: 0.58;
}

/* Dawn: similar recovery, but softer than Day and still pearl/cold. */
.showroom-canvas.time-dawn {
  --sky-aperture-edge-blend-opacity: 0.17;
  --lc-edge-continuity-opacity: 0.11;
  --lc-center-depth-recovery-opacity: 0.10;
  --chatbot-readability-veil-opacity: 0.18;
  --lc-base-image-opacity: 0.76;
  --lc-base-contrast: 1.035;
  --lc-base-brightness: 0.965;
  --lc-base-softener-opacity: 0.085;
  --lc-base-horizon-veil-opacity: 0.105;
}

.showroom-canvas.time-dawn .sky-dawn::before {
  opacity: 0.86;
}

.showroom-canvas.time-dawn .sky-dawn::after {
  opacity: 0.92;
}

/* Sunset: keep the premium candidate, but cool and desaturate the warm band. */
.showroom-canvas.time-sunset {
  --sky-aperture-edge-blend-opacity: 0.15;
  --lc-edge-continuity-opacity: 0.09;
  --lc-center-depth-recovery-opacity: 0.055;
  --chatbot-readability-veil-opacity: 0.19;
  --glass-band-color-rgb: 255, 218, 198;
  --glass-band-side-color-rgb: 246, 225, 211;
  --lc-base-saturation: 1.00;
  --lc-base-contrast: 1.00;
  --lc-base-brightness: 0.965;
}

.showroom-canvas.time-sunset .sky-sunset {
  filter: saturate(0.88) hue-rotate(-3deg) brightness(0.99);
}

.showroom-canvas.time-sunset .exterior-sunset {
  opacity: 0.15;
}

/* Night remains non-default and keeps its approved city/sky balance. Only the
   reserved right-side readability veil stays active for future UI planning. */
.showroom-canvas.time-night {
  --sky-aperture-edge-blend-opacity: 0.00;
  --lc-edge-continuity-opacity: 0.00;
  --lc-center-depth-recovery-opacity: 0.00;
  --chatbot-readability-veil-opacity: 0.18;
}


/* ----------------------------------------------------------------------------
   v7.0 — Ceiling Disc Fill controlled CSS overlay

   NL 04 / NL 00 correction:
   The ceiling must not read only as rim/edge illumination. The rim lines define
   architecture, while a broad Ceiling Disc Fill defines the premium room
   atmosphere. This layer is CSS-only and does not modify the shell asset,
   Living City, SkyTime, Glass, HUD, UI, canvas geometry or any production asset.

   Layer order:
   InteriorEnvironmentShell / GlassSurfaceLayer / validated rim lines
   < CeilingDiscFillLayer < RoomAtmosphereLayer < future PlatformHudLayer / UILayer.
---------------------------------------------------------------------------- */

:root {
  --ceiling-disc-fill-enabled: 1;
  --ceiling-disc-fill-intensity: 0.80;
  --ceiling-disc-fill-opacity: 0.80;
  --ceiling-disc-fill-spread: 1;
  --ceiling-disc-fill-temperature-rgb: 228, 246, 255;
  --ceiling-center-falloff: 0.42;
  --ceiling-ui-protection-fade: 0.68;
}

.ceiling-disc-fill-layer {
  z-index: 59;
  pointer-events: none;
  opacity: calc(var(--ceiling-disc-fill-enabled, 1) * var(--ceiling-disc-fill-opacity, 0.72));
  mix-blend-mode: normal;
  background:
    radial-gradient(
      ellipse calc(62% * var(--ceiling-disc-fill-spread, 1)) 28% at 50% -2%,
      rgba(255, 255, 255, calc(0.70 * var(--ceiling-disc-fill-intensity, 0.66))) 0%,
      rgba(var(--ceiling-disc-fill-temperature-rgb), calc(0.56 * var(--ceiling-disc-fill-intensity, 0.66))) 27%,
      rgba(188, 226, 252, calc(0.32 * var(--ceiling-disc-fill-intensity, 0.66))) 52%,
      rgba(148, 205, 246, calc(0.13 * var(--ceiling-disc-fill-intensity, 0.66))) 70%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 82% 30% at 50% 10%,
      rgba(245, 252, 255, calc(0.30 * var(--ceiling-disc-fill-intensity, 0.66))) 0%,
      rgba(211, 238, 255, calc(0.24 * var(--ceiling-disc-fill-intensity, 0.66))) 36%,
      rgba(176, 221, 252, calc(0.11 * var(--ceiling-disc-fill-intensity, 0.66))) 62%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, calc(0.18 * var(--ceiling-disc-fill-intensity, 0.66))) 0%,
      rgba(var(--ceiling-disc-fill-temperature-rgb), calc(0.11 * var(--ceiling-disc-fill-intensity, 0.66))) 18%,
      rgba(180, 225, 252, calc(0.070 * var(--ceiling-disc-fill-intensity, 0.66))) 34%,
      transparent calc(48% * var(--ceiling-ui-protection-fade, 0.68))
    );
  filter: blur(0.9px) saturate(1.02);

  /* Keep the fill architectural and ceiling-bound. It fades out before the
     future central logo/HUD and never becomes a full-canvas white wash. */
  -webkit-mask-image:
    radial-gradient(ellipse 82% 34% at 50% 2%, #000 0%, #000 52%, rgba(0, 0, 0, var(--ceiling-center-falloff, 0.42)) 70%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 24%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.20) 45%, transparent 56%);
  mask-image:
    radial-gradient(ellipse 82% 34% at 50% 2%, #000 0%, #000 52%, rgba(0, 0, 0, var(--ceiling-center-falloff, 0.42)) 70%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 24%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.20) 45%, transparent 56%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  transition:
    opacity var(--time-transition-duration) ease,
    filter var(--time-transition-duration) ease;
}

.showroom-canvas.time-day {
  --ceiling-disc-fill-intensity: 0.88;
  --ceiling-disc-fill-opacity: 0.86;
  --ceiling-disc-fill-temperature-rgb: 230, 247, 255;
  --ceiling-center-falloff: 0.38;
  --ceiling-ui-protection-fade: 0.72;
  --ceiling-room-atmosphere-white-opacity: 0.17;
  --ceiling-room-atmosphere-white-strength: 1.18;
  --ceiling-room-atmosphere-white-rgb: 255, 255, 255;
}

.showroom-canvas.time-dawn {
  --ceiling-disc-fill-intensity: 0.80;
  --ceiling-disc-fill-opacity: 0.80;
  --ceiling-disc-fill-temperature-rgb: 224, 244, 255;
  --ceiling-center-falloff: 0.40;
  --ceiling-ui-protection-fade: 0.70;
  --ceiling-room-atmosphere-white-opacity: 0.185;
  --ceiling-room-atmosphere-white-strength: 1.24;
  --ceiling-room-atmosphere-white-rgb: 255, 255, 255;
}

.showroom-canvas.time-sunset {
  --ceiling-disc-fill-intensity: 0.64;
  --ceiling-disc-fill-opacity: 0.68;
  --ceiling-disc-fill-temperature-rgb: 210, 238, 255;
  --ceiling-center-falloff: 0.36;
  --ceiling-ui-protection-fade: 0.72;
  --ceiling-room-atmosphere-white-opacity: 0.205;
  --ceiling-room-atmosphere-white-strength: 1.34;
  --ceiling-room-atmosphere-white-rgb: 255, 255, 255;
}

.showroom-canvas.time-night {
  --ceiling-disc-fill-intensity: 0.44;
  --ceiling-disc-fill-opacity: 0.56;
  --ceiling-disc-fill-temperature-rgb: 188, 225, 255;
  --ceiling-center-falloff: 0.32;
  --ceiling-ui-protection-fade: 0.76;
  --ceiling-room-atmosphere-white-opacity: 0.225;
  --ceiling-room-atmosphere-white-strength: 1.46;
  --ceiling-room-atmosphere-white-rgb: 255, 255, 255;
}

.showroom-canvas.scene-mode-welcome {
  --ceiling-disc-fill-intensity: 0.62;
}

.showroom-canvas.scene-mode-analyzing {
  --ceiling-disc-fill-intensity: 0.44;
}

.showroom-canvas.scene-mode-reading,
.showroom-canvas.scene-mode-cta {
  --ceiling-disc-fill-intensity: 0.46;
  --ceiling-disc-fill-opacity: 0.50;
}

.showroom-canvas.debug-hide-ceiling-disc-fill {
  --ceiling-disc-fill-enabled: 0;
  --ceiling-room-atmosphere-white-opacity: 0;
  --ceiling-room-atmosphere-white-strength: 0;
}

.showroom-canvas.debug-hide-ceiling-disc-fill .ceiling-disc-fill-layer {
  display: none !important;
}

/* --------------------------------------------------------------------------
   v9.2 — NL00 emissive mist doctrine refinement.
   Scope: CSS-only center balance from v9.1. Restores the intended misty
   logo-emission feeling while keeping the logo readable and the HUD ring
   structurally perceptible. No asset or geometry change.
---------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   v8.5 — Central HUD Ring volumetric white/cyan light distribution.
   Scope: visual-only CSS composition. CSS volumetric white/cyan field = luminous support,
   PNG = passive crystal material, SVG = dynamic HUD structure,
   logo = separate layer above the ring.
---------------------------------------------------------------------------- */
:root {
  --central-hud-ring-opacity: 1;
  --central-hud-texture-opacity: 0.54;
  --central-hud-overlay-opacity: 0.43;
  --central-hud-glow-opacity: 0.145;
  --central-hud-white-field-opacity: 0.66;
  --central-hud-white-field-strength: 1.15;
  --central-hud-white-field-rgb: 255, 255, 255;
  --central-hud-white-field-cyan-rgb: 210, 247, 255;
  --central-hud-white-field-column-opacity: 0.90;
  --central-hud-white-field-halo-opacity: 0.92;
  --central-hud-white-field-ring-opacity: 1.00;
  --central-hud-white-field-arc-opacity: 0.90;
  --central-hud-white-field-inner-clear: 26%;
  --central-hud-white-field-inner-edge: 31%;
  --central-hud-white-field-core: 40%;
  --central-hud-white-field-outer-edge: 55%;
  --central-hud-white-field-outer-clear: 70%;
  --central-hud-scale: 1;
  --central-hud-blend-mode: screen;
  --central-hud-motion-factor: 1;
  --central-hud-contrast-support: 1.14;
  --central-hud-overlay-rotation-duration: 180s;
  --central-hud-x: 50%;
  --central-hud-y: 14.35%;
  --central-hud-w: 37.70%;
  --central-hud-h: 56.32%;
  --central-hud-glow-rgb: 118, 232, 255;
  --logo-focus-intensity: 0.84;
  --logo-focus-opacity: 0.96;
  --logo-focus-scale: 0.74;
}

.platform-hud-layer {
  z-index: 64;
  pointer-events: none;
  opacity: var(--central-hud-ring-opacity);
  mix-blend-mode: normal;
  isolation: isolate;
  transform: translateZ(0);
}

.central-hud-white-field,
.central-hud-ring-texture,
.central-hud-ring-overlay,
.central-hud-local-glow,
.logo-focus-node {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.central-hud-white-field {
  z-index: 0;
  left: var(--central-hud-x);
  top: var(--central-hud-y);
  width: var(--central-hud-w);
  height: var(--central-hud-h);
  transform: translateX(-50%) scale(var(--central-hud-scale));
  transform-origin: 50% 50%;
  border-radius: 999px;
  opacity: var(--central-hud-white-field-opacity);
  mix-blend-mode: screen;
  /* v8.5: the luminous support is volumetric, not a flat annular lamp.
     It follows the reference distribution: a soft vertical white column through
     the ring, a broad white/cyan halo, subtle ring-body reinforcement, and
     restrained arc highlights. The center remains misty and calm, not erased. */
  background:
    radial-gradient(
      ellipse 25% 86% at 50% 55%,
      rgba(var(--central-hud-white-field-rgb), calc(0.42 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-column-opacity))) 0%,
      rgba(246, 253, 255, calc(0.31 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-column-opacity))) 31%,
      rgba(var(--central-hud-white-field-cyan-rgb), calc(0.15 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-column-opacity))) 58%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 56% 48% at 50% 44%,
      rgba(255, 255, 255, calc(0.29 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-halo-opacity))) 0%,
      rgba(248, 253, 255, calc(0.23 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-halo-opacity))) 29%,
      rgba(var(--central-hud-white-field-cyan-rgb), calc(0.12 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-halo-opacity))) 56%,
      transparent 78%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 255, 255, calc(0.045 * var(--central-hud-white-field-strength))) 0%,
      rgba(255, 255, 255, calc(0.055 * var(--central-hud-white-field-strength))) var(--central-hud-white-field-inner-clear),
      rgba(255, 255, 255, calc(0.18 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-ring-opacity))) var(--central-hud-white-field-inner-edge),
      rgba(255, 255, 255, calc(0.50 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-ring-opacity))) var(--central-hud-white-field-core),
      rgba(var(--central-hud-white-field-cyan-rgb), calc(0.31 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-ring-opacity))) var(--central-hud-white-field-outer-edge),
      rgba(145, 230, 255, calc(0.10 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-ring-opacity))) 65%,
      transparent var(--central-hud-white-field-outer-clear),
      transparent 100%
    ),
    conic-gradient(
      from -72deg at 50% 50%,
      transparent 0deg,
      rgba(255, 255, 255, calc(0.16 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-arc-opacity))) 24deg,
      transparent 56deg,
      transparent 112deg,
      rgba(var(--central-hud-white-field-cyan-rgb), calc(0.13 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-arc-opacity))) 148deg,
      rgba(255, 255, 255, calc(0.11 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-arc-opacity))) 174deg,
      transparent 204deg,
      transparent 246deg,
      rgba(255, 255, 255, calc(0.14 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-arc-opacity))) 292deg,
      rgba(var(--central-hud-white-field-cyan-rgb), calc(0.11 * var(--central-hud-white-field-strength) * var(--central-hud-white-field-arc-opacity))) 318deg,
      transparent 360deg
    ),
    radial-gradient(
      ellipse 64% 18% at 50% 88%,
      rgba(255, 255, 255, calc(0.18 * var(--central-hud-white-field-strength))) 0%,
      rgba(var(--central-hud-white-field-cyan-rgb), calc(0.075 * var(--central-hud-white-field-strength))) 44%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 62% 18% at 50% 11%,
      rgba(255, 255, 255, calc(0.21 * var(--central-hud-white-field-strength))) 0%,
      rgba(var(--central-hud-white-field-cyan-rgb), calc(0.08 * var(--central-hud-white-field-strength))) 46%,
      transparent 80%
    );
  background-blend-mode: screen;
  mask-image: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0.76) 0%,
    #000 32%,
    #000 66%,
    rgba(0, 0, 0, 0.48) 76%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0.76) 0%,
    #000 32%,
    #000 66%,
    rgba(0, 0, 0, 0.48) 76%,
    transparent 100%
  );
  filter:
    blur(6.8px)
    saturate(0.92)
    brightness(1.06);
  transition: opacity 900ms ease, filter 900ms ease, transform 900ms ease;
}

.central-hud-ring-texture,
.central-hud-ring-overlay {
  left: var(--central-hud-x);
  top: var(--central-hud-y);
  width: var(--central-hud-w);
  height: var(--central-hud-h);
  object-fit: contain;
  transform: translateX(-50%) scale(var(--central-hud-scale));
  transform-origin: 50% 50%;
}

.central-hud-ring-texture {
  z-index: 1;
  opacity: var(--central-hud-texture-opacity);
  mix-blend-mode: screen;
  filter:
    saturate(0.96)
    contrast(calc(1.04 * var(--central-hud-contrast-support)))
    brightness(1.03)
    drop-shadow(0 0 9px rgba(95, 226, 255, 0.16));
  transition: opacity 1200ms ease, filter 1200ms ease, transform 1200ms ease;
}

.central-hud-ring-overlay {
  z-index: 2;
  opacity: var(--central-hud-overlay-opacity);
  mix-blend-mode: var(--central-hud-blend-mode);
  filter:
    saturate(0.90)
    contrast(calc(1.04 * var(--central-hud-contrast-support)))
    brightness(1.02)
    drop-shadow(0 0 8px rgba(104, 236, 255, 0.29));
  animation: centralHudOverlaySlowTurn var(--central-hud-overlay-rotation-duration) linear infinite;
  transition: opacity 1000ms ease, filter 1000ms ease, transform 1000ms ease;
}

.central-hud-local-glow {
  z-index: 3;
  left: var(--central-hud-x);
  top: calc(var(--central-hud-y) + 4.7%);
  width: calc(var(--central-hud-w) * 0.88);
  height: calc(var(--central-hud-h) * 0.78);
  transform: translateX(-50%) scale(var(--central-hud-scale));
  border-radius: 999px;
  opacity: var(--central-hud-glow-opacity);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.20) 0%, rgba(var(--central-hud-glow-rgb), 0.14) 24%, rgba(76, 202, 255, 0.075) 50%, transparent 72%),
    radial-gradient(ellipse at 50% 50%, transparent 0%, transparent 33%, rgba(var(--central-hud-glow-rgb), 0.18) 45%, transparent 67%);
  filter: blur(16px);
  transition: opacity 1100ms ease, filter 1100ms ease, transform 1100ms ease;
}

.logo-focus-node {
  z-index: 4;
  left: 50%;
  top: 42.6%;
  width: 21.4%;
  aspect-ratio: 416 / 475;
  transform: translate(-50%, -50%) scale(var(--logo-focus-scale));
  opacity: 1;
  mix-blend-mode: normal;
  filter:
    saturate(1.02)
    contrast(1.02)
    drop-shadow(0 0 calc(8px * var(--logo-focus-intensity)) rgba(255, 255, 255, 0.20))
    drop-shadow(0 0 calc(11px * var(--logo-focus-intensity)) rgba(160, 238, 255, 0.12));
  transition: opacity 1000ms ease, filter 1000ms ease, transform 1000ms ease;
}

.neo-lens-logo-focus {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: var(--logo-focus-opacity);
  mix-blend-mode: normal;
  image-rendering: auto;
}

@keyframes centralHudOverlaySlowTurn {
  from { transform: translateX(-50%) scale(var(--central-hud-scale)) rotate(0deg); }
  to { transform: translateX(-50%) scale(var(--central-hud-scale)) rotate(360deg); }
}

.showroom-canvas.time-day {
  --central-hud-texture-opacity: 0.48;
  --central-hud-overlay-opacity: 0.36;
  --central-hud-glow-opacity: 0.11;
  --central-hud-white-field-opacity: 0.66;
  --central-hud-white-field-strength: 1.15;
  --logo-focus-opacity: 0.90;
}

.showroom-canvas.time-dawn {
  --central-hud-texture-opacity: 0.50;
  --central-hud-overlay-opacity: 0.40;
  --central-hud-glow-opacity: 0.17;
  --central-hud-white-field-opacity: 0.70;
  --central-hud-white-field-strength: 1.24;
  --central-hud-white-field-column-opacity: 0.98;
  --central-hud-white-field-halo-opacity: 1.02;
  --logo-focus-opacity: 0.94;
}

.showroom-canvas.time-sunset {
  --central-hud-texture-opacity: 0.54;
  --central-hud-overlay-opacity: 0.44;
  --central-hud-glow-opacity: 0.20;
  --central-hud-white-field-opacity: 0.74;
  --central-hud-white-field-strength: 1.34;
  --central-hud-white-field-column-opacity: 1.08;
  --central-hud-white-field-halo-opacity: 1.14;
  --logo-focus-opacity: 0.96;
}

.showroom-canvas.time-night {
  --central-hud-texture-opacity: 0.60;
  --central-hud-overlay-opacity: 0.49;
  --central-hud-glow-opacity: 0.23;
  --central-hud-white-field-opacity: 0.80;
  --central-hud-white-field-strength: 1.48;
  --central-hud-white-field-column-opacity: 1.20;
  --central-hud-white-field-halo-opacity: 1.30;
  --logo-focus-opacity: 0.97;
}

.showroom-canvas.scene--idle,
.showroom-canvas.scene-mode-idle {
  --central-hud-texture-opacity: 0.54;
  --central-hud-overlay-opacity: 0.37;
  --central-hud-glow-opacity: 0.10;
  --central-hud-white-field-opacity: 0.61;
  --central-hud-white-field-strength: 1.11;
  --central-hud-overlay-rotation-duration: 220s;
}

.showroom-canvas.scene--welcome,
.showroom-canvas.scene-mode-welcome {
  --central-hud-texture-opacity: 0.58;
  --central-hud-overlay-opacity: 0.42;
  --central-hud-glow-opacity: 0.13;
  --central-hud-white-field-opacity: 0.64;
  --central-hud-white-field-strength: 1.16;
  --central-hud-overlay-rotation-duration: 170s;
  --logo-focus-intensity: 0.92;
}

.showroom-canvas.scene--listening,
.showroom-canvas.scene-mode-listening {
  --central-hud-texture-opacity: 0.52;
  --central-hud-overlay-opacity: 0.35;
  --central-hud-glow-opacity: 0.09;
  --central-hud-white-field-opacity: 0.58;
  --central-hud-white-field-strength: 1.06;
  --central-hud-overlay-rotation-duration: 210s;
}

.showroom-canvas.scene--analyzing,
.showroom-canvas.scene-mode-analyzing {
  --central-hud-texture-opacity: 0.62;
  --central-hud-overlay-opacity: 0.50;
  --central-hud-glow-opacity: 0.14;
  --central-hud-white-field-opacity: 0.66;
  --central-hud-white-field-strength: 1.20;
  --central-hud-contrast-support: 1.14;
  --central-hud-overlay-rotation-duration: 135s;
  --logo-focus-intensity: 0.88;
}

.showroom-canvas.scene--explaining,
.showroom-canvas.scene-mode-explaining {
  --central-hud-texture-opacity: 0.56;
  --central-hud-overlay-opacity: 0.40;
  --central-hud-glow-opacity: 0.11;
  --central-hud-white-field-opacity: 0.61;
  --central-hud-white-field-strength: 1.11;
  --central-hud-overlay-rotation-duration: 190s;
}

.showroom-canvas.scene--reading,
.showroom-canvas.scene-mode-reading {
  --central-hud-texture-opacity: 0.32;
  --central-hud-overlay-opacity: 0.18;
  --central-hud-glow-opacity: 0.03;
  --central-hud-white-field-opacity: 0.54;
  --central-hud-white-field-strength: 0.98;
  --central-hud-overlay-rotation-duration: 260s;
  --logo-focus-opacity: 0.84;
}

.showroom-canvas.scene--cta,
.showroom-canvas.scene-mode-cta {
  --central-hud-texture-opacity: 0.34;
  --central-hud-overlay-opacity: 0.20;
  --central-hud-glow-opacity: 0.035;
  --central-hud-white-field-opacity: 0.55;
  --central-hud-white-field-strength: 1.00;
  --central-hud-overlay-rotation-duration: 260s;
  --logo-focus-opacity: 0.90;
}


/* v9.3 — Time-state progressive emissive mist hierarchy for the default idle review state.
   NL00 update: Day remains the baseline; Dawn/Sunset/Night progressively increase
   central luminous mist as the exterior gets darker.

   v9.2 — Time-state aware emissive center balance for the default idle review state.
   These combined selectors are intentionally placed after generic scene-mode
   presets so Day/Dawn/Sunset/Night keep distinct central emission behaviour. */
.showroom-canvas.scene-mode-idle.time-day,
.showroom-canvas.scene--idle.time-day {
  --central-hud-white-field-opacity: 0.66;
  --central-hud-white-field-strength: 1.15;
  --central-hud-white-field-column-opacity: 0.90;
  --central-hud-white-field-halo-opacity: 0.92;
  --central-hud-glow-opacity: 0.13;
  --central-hud-overlay-opacity: 0.40;
  --central-hud-contrast-support: 1.13;
  --logo-focus-opacity: 0.94;
}

.showroom-canvas.scene-mode-idle.time-dawn,
.showroom-canvas.scene--idle.time-dawn {
  --central-hud-white-field-opacity: 0.72;
  --central-hud-white-field-strength: 1.27;
  --central-hud-white-field-column-opacity: 1.02;
  --central-hud-white-field-halo-opacity: 1.06;
  --central-hud-glow-opacity: 0.19;
  --central-hud-overlay-opacity: 0.44;
  --central-hud-contrast-support: 1.15;
  --logo-focus-opacity: 0.96;
}

.showroom-canvas.scene-mode-idle.time-sunset,
.showroom-canvas.scene--idle.time-sunset {
  --central-hud-white-field-opacity: 0.77;
  --central-hud-white-field-strength: 1.38;
  --central-hud-white-field-column-opacity: 1.14;
  --central-hud-white-field-halo-opacity: 1.20;
  --central-hud-glow-opacity: 0.23;
  --central-hud-overlay-opacity: 0.49;
  --central-hud-contrast-support: 1.17;
  --logo-focus-opacity: 0.97;
}

.showroom-canvas.scene-mode-idle.time-night,
.showroom-canvas.scene--idle.time-night {
  --central-hud-white-field-opacity: 0.82;
  --central-hud-white-field-strength: 1.55;
  --central-hud-white-field-column-opacity: 1.26;
  --central-hud-white-field-halo-opacity: 1.36;
  --central-hud-glow-opacity: 0.29;
  --central-hud-overlay-opacity: 0.54;
  --central-hud-contrast-support: 1.20;
  --logo-focus-opacity: 0.98;
}

.showroom-canvas.debug-hide-central-hud-ring .platform-hud-layer,
.showroom-canvas.debug-hide-central-hud-white-field .central-hud-white-field,
.showroom-canvas.debug-hide-central-hud-texture .central-hud-ring-texture,
.showroom-canvas.debug-hide-central-hud-overlay .central-hud-ring-overlay,
.showroom-canvas.debug-hide-central-hud-glow .central-hud-local-glow,
.showroom-canvas.debug-hide-central-logo-layer .logo-focus-node {
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .central-hud-ring-overlay {
    animation: none !important;
  }

  .central-hud-white-field,
  .central-hud-ring-texture,
  .central-hud-ring-overlay,
  .central-hud-local-glow,
  .logo-focus-node {
    transition-duration: 250ms;
  }
}

/* ----------------------------------------------------------------------------
   v9.4 — Move temporary developer controls to the left

   NL00 instruction: keep the technical control/menu panel temporary and internal,
   move it to the left so the right side remains protected for the upcoming
   Neo Lens Orchestrator Interface / main commercial menu. No layer behaviour,
   center HUD/logo/mist, assets, or validated scene composition are changed.
---------------------------------------------------------------------------- */
.dev-time-controls {
  left: clamp(12px, 2vw, 24px) !important;
  right: auto !important;
  bottom: clamp(12px, 2vw, 24px);
  transform: none !important;
  width: min(330px, calc(100vw - 24px));
  max-width: min(330px, calc(46vw - 12px));
  z-index: 140;
}

@media (max-width: 920px) {
  .dev-time-controls {
    left: 10px !important;
    right: auto !important;
    width: min(310px, calc(100vw - 20px));
    max-width: min(310px, calc(52vw - 10px));
  }
}

@media (max-width: 620px) {
  .dev-time-controls {
    left: 9px !important;
    right: auto !important;
    width: min(285px, calc(100vw - 18px));
    max-width: calc(100vw - 18px);
  }
}

/* ----------------------------------------------------------------------------
   V10.1 — UI Static Composition v1 Glass Material Correction

   Scope: visitor-facing UILayer material correction only.
   Scene geometry, validated 1671 × 941 canvas, layer stack, central HUD/logo/mist,
   platform, sky, city, shell and glass-surface layers remain untouched.
---------------------------------------------------------------------------- */
.showroom-canvas {
  --glass-fill: rgba(238, 248, 255, 0.34);
  --glass-fill-strong: rgba(244, 250, 255, 0.54);
  --glass-fill-soft: rgba(229, 243, 255, 0.22);
  --glass-surface-sheen: rgba(255, 255, 255, 0.42);
  --glass-border-cyan: rgba(128, 230, 255, 0.58);
  --glass-border-blue: rgba(92, 170, 255, 0.46);
  --glass-border-violet: rgba(172, 142, 255, 0.34);
  --glass-inner-glow: inset 0 1px 24px rgba(255, 255, 255, 0.28), inset 0 -18px 42px rgba(70, 154, 220, 0.10);
  --glass-outer-shadow: 0 28px 76px rgba(4, 20, 48, 0.35), 0 0 44px rgba(81, 210, 255, 0.14);
  --glass-hover-glow: 0 0 28px rgba(102, 220, 255, 0.34);
  --glass-backdrop-blur: 18px;
  --glass-backdrop-blur-strong: 26px;
  --glass-radius-card: 26px;
  --glass-radius-panel: 34px;
  --glass-radius-pill: 999px;
  --glass-text-primary: rgba(8, 32, 62, 0.94);
  --glass-text-secondary: rgba(26, 64, 105, 0.76);
  --glass-text-inverse: rgba(244, 250, 255, 0.96);
  --glass-status-active: rgba(116, 228, 255, 0.92);
  --glass-status-warning: rgba(255, 214, 138, 0.86);
  --glass-cta-gradient: linear-gradient(135deg, rgba(74, 201, 255, 0.82), rgba(98, 138, 255, 0.74) 52%, rgba(188, 154, 255, 0.64));
  --glass-focus-ring: 0 0 0 2px rgba(248, 252, 255, 0.86), 0 0 0 5px rgba(90, 215, 255, 0.42);
  --glass-ui-scale: 1;
}

.showroom-canvas.time-day {
  --glass-fill: rgba(246, 252, 255, 0.50);
  --glass-fill-strong: rgba(250, 253, 255, 0.70);
  --glass-fill-soft: rgba(238, 248, 255, 0.32);
  --glass-text-primary: rgba(5, 28, 55, 0.96);
  --glass-text-secondary: rgba(22, 61, 99, 0.84);
  --glass-border-cyan: rgba(87, 190, 225, 0.66);
  --glass-border-blue: rgba(64, 132, 215, 0.48);
  --glass-outer-shadow: 0 26px 70px rgba(18, 53, 92, 0.26), 0 0 36px rgba(78, 188, 230, 0.12);
}

.showroom-canvas.time-dawn {
  --glass-fill: rgba(239, 248, 255, 0.52);
  --glass-fill-strong: rgba(247, 252, 255, 0.72);
  --glass-fill-soft: rgba(236, 247, 255, 0.31);
  --glass-border-violet: rgba(185, 154, 255, 0.40);
  --glass-text-primary: rgba(7, 31, 60, 0.96);
  --glass-text-secondary: rgba(30, 67, 105, 0.80);
}

.showroom-canvas.time-sunset {
  --glass-fill: rgba(225, 240, 255, 0.58);
  --glass-fill-strong: rgba(235, 246, 255, 0.76);
  --glass-fill-soft: rgba(222, 238, 255, 0.36);
  --glass-text-primary: rgba(6, 26, 54, 0.98);
  --glass-text-secondary: rgba(24, 54, 94, 0.84);
  --glass-border-violet: rgba(202, 164, 255, 0.46);
  --glass-border-cyan: rgba(126, 223, 255, 0.58);
}

.showroom-canvas.time-night {
  --glass-fill: rgba(20, 44, 78, 0.56);
  --glass-fill-strong: rgba(28, 58, 96, 0.76);
  --glass-fill-soft: rgba(18, 43, 78, 0.36);
  --glass-surface-sheen: rgba(227, 248, 255, 0.24);
  --glass-text-primary: rgba(244, 250, 255, 0.98);
  --glass-text-secondary: rgba(205, 228, 248, 0.84);
  --glass-border-cyan: rgba(120, 230, 255, 0.72);
  --glass-border-blue: rgba(92, 168, 255, 0.58);
  --glass-border-violet: rgba(182, 150, 255, 0.48);
  --glass-inner-glow: inset 0 1px 26px rgba(255, 255, 255, 0.16), inset 0 -18px 44px rgba(64, 180, 255, 0.16);
  --glass-outer-shadow: 0 30px 86px rgba(0, 12, 35, 0.58), 0 0 54px rgba(88, 218, 255, 0.20);
}

.showroom-ui-layer {
  z-index: 120;
  pointer-events: none;
  overflow: hidden;
}

.showroom-ui-layer * {
  pointer-events: auto;
}

.showroom-header {
  position: absolute;
  left: clamp(32px, 4.2vw, 70px);
  right: clamp(32px, 4.2vw, 70px);
  top: clamp(22px, 3vw, 40px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(236, 249, 255, 0.88);
  text-shadow: 0 2px 16px rgba(2, 14, 34, 0.34);
  pointer-events: none;
}

.showroom-header__brand,
.showroom-header__signal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 7px 14px;
  border-radius: var(--glass-radius-pill);
  font-size: clamp(11px, 0.86vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(238, 249, 255, 0.18), rgba(116, 211, 255, 0.07));
  border: 1px solid rgba(196, 239, 255, 0.28);
  box-shadow: inset 0 1px 18px rgba(255, 255, 255, 0.12), 0 10px 28px rgba(1, 17, 42, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.showroom-header__brand-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(137, 234, 255, 0.92);
  box-shadow: 0 0 12px rgba(137, 234, 255, 0.75), 0 0 28px rgba(168, 150, 255, 0.24);
}

.showroom-header__signal {
  opacity: 0.68;
}

.hero-microcopy {
  position: absolute;
  left: clamp(54px, 7.1vw, 116px);
  top: clamp(112px, 14.4vw, 156px);
  z-index: 2;
  width: min(335px, 24vw);
  color: rgba(235, 249, 255, 0.94);
  text-shadow: 0 2px 22px rgba(2, 14, 34, 0.50);
  pointer-events: none;
}

.hero-microcopy__kicker {
  margin: 0 0 8px;
  font-size: clamp(10px, 0.84vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(127, 232, 255, 0.88);
}

.hero-microcopy h1 {
  margin: 0;
  font-size: clamp(18px, 1.72vw, 28px);
  line-height: 1.15;
  font-weight: 550;
  letter-spacing: -0.025em;
  max-width: 12.5em;
}

.showroom-canvas.time-day .hero-microcopy,
.showroom-canvas.time-dawn .hero-microcopy,
.showroom-canvas.time-day .showroom-header,
.showroom-canvas.time-dawn .showroom-header {
  color: rgba(15, 45, 78, 0.94);
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.62), 0 4px 18px rgba(3, 22, 45, 0.12);
}

.showroom-canvas.time-day .hero-microcopy__kicker,
.showroom-canvas.time-dawn .hero-microcopy__kicker {
  color: rgba(20, 110, 150, 0.90);
}

.glass-shell,
.glass-chatbox-menu,
.glass-option-row,
.glass-cta-button,
.glass-input-field,
.glass-badge,
.glass-floating-control,
.glass-trust-badge {
  border-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

.glass-chatbox-menu {
  position: absolute;
  top: clamp(128px, 15.8vw, 175px);
  right: clamp(46px, 5.2vw, 86px);
  width: clamp(318px, 25.3vw, 405px);
  max-height: min(650px, 76%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.15vw, 16px);
  padding: clamp(18px, 1.75vw, 25px);
  color: var(--glass-text-primary);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.62), transparent 34%),
    radial-gradient(circle at 100% 14%, rgba(133, 222, 255, 0.20), transparent 34%),
    linear-gradient(145deg, var(--glass-fill-strong), var(--glass-fill) 42%, rgba(189, 224, 255, 0.22));
  border: 1px solid rgba(190, 238, 255, 0.54);
  border-radius: var(--glass-radius-panel);
  box-shadow: var(--glass-inner-glow), var(--glass-outer-shadow);
  backdrop-filter: blur(var(--glass-backdrop-blur-strong)) saturate(1.22);
  -webkit-backdrop-filter: blur(var(--glass-backdrop-blur-strong)) saturate(1.22);
  transform: translateZ(0);
  isolation: isolate;
  overflow: hidden;
  animation: glassChatboxEntrance 720ms cubic-bezier(.2,.8,.2,1) both, glassChatboxBreath 8s ease-in-out 900ms infinite;
}

.glass-chatbox-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--glass-border-cyan), var(--glass-border-blue) 47%, var(--glass-border-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.86;
  pointer-events: none;
  z-index: 2;
}

.glass-chatbox-menu::after {
  content: "";
  position: absolute;
  inset: auto -18% -30% 14%;
  height: 46%;
  background: radial-gradient(ellipse at center, rgba(68, 211, 255, 0.20), transparent 62%);
  filter: blur(16px);
  opacity: 0.78;
  pointer-events: none;
  z-index: -1;
}

.glass-chatbox-menu__reflection {
  position: absolute;
  top: -1px;
  left: 10%;
  right: 20%;
  height: 46%;
  border-radius: 0 0 48% 48%;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.12) 46%, transparent 68%);
  opacity: 0.45;
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 0;
}

.glass-chatbox-menu > *:not(.glass-chatbox-menu__reflection) {
  position: relative;
  z-index: 3;
}

.glass-chatbox-menu__topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.orchestrator-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.glass-icon-orb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.92), rgba(142, 231, 255, 0.50) 30%, rgba(72, 115, 214, 0.42) 61%, rgba(56, 38, 120, 0.26)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(100, 211, 255, 0.12));
  border: 1px solid rgba(198, 245, 255, 0.68);
  box-shadow: inset 0 1px 16px rgba(255, 255, 255, 0.38), 0 0 24px rgba(87, 222, 255, 0.30), 0 10px 24px rgba(4, 22, 54, 0.18);
}

.glass-icon-orb span {
  width: 15px;
  height: 15px;
  border-radius: 45% 55% 52% 48%;
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.74), inset 0 0 10px rgba(123, 231, 255, 0.58);
}

.orchestrator-identity__eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glass-text-secondary);
}

.orchestrator-identity h2 {
  margin: 0;
  font-size: clamp(17px, 1.26vw, 21px);
  line-height: 1.05;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.glass-floating-control-group {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.glass-floating-control {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(196, 239, 255, 0.48);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--glass-text-primary);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(118, 205, 255, 0.16));
  box-shadow: inset 0 1px 10px rgba(255, 255, 255, 0.24), 0 8px 18px rgba(2, 20, 48, 0.14);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.glass-floating-control:hover,
.glass-floating-control:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--glass-hover-glow), inset 0 1px 14px rgba(255, 255, 255, 0.30);
}

.glass-chatbox-menu__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  padding: 6px 10px;
  border-radius: var(--glass-radius-pill);
  color: var(--glass-text-primary);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.40), rgba(118, 211, 255, 0.12));
  border: 1px solid rgba(174, 232, 255, 0.42);
  box-shadow: inset 0 1px 10px rgba(255, 255, 255, 0.20), 0 4px 16px rgba(3, 21, 48, 0.09);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.glass-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glass-status-active);
  box-shadow: 0 0 10px rgba(116, 228, 255, 0.80);
}

.glass-badge--core .glass-badge__dot {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.76), 0 0 20px rgba(138, 222, 255, 0.38);
}

.glass-badge--welcome .glass-badge__dot {
  background: rgba(185, 158, 255, 0.90);
  box-shadow: 0 0 12px rgba(185, 158, 255, 0.58);
}

.glass-chatbox-menu__message {
  padding: 15px 16px 16px;
  border: 1px solid rgba(182, 232, 255, 0.32);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(127, 205, 255, 0.10));
  box-shadow: inset 0 1px 18px rgba(255, 255, 255, 0.16), inset 0 -12px 26px rgba(44, 134, 210, 0.06);
}

.glass-chatbox-menu__label {
  margin: 0 0 6px;
  color: var(--glass-text-secondary);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.glass-chatbox-menu__message p:last-child {
  margin: 0;
  color: var(--glass-text-primary);
  font-size: clamp(13px, 0.94vw, 15px);
  line-height: 1.42;
}

.glass-option-list {
  display: grid;
  gap: 9px;
}

.glass-option-row {
  min-height: 44px;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(169, 226, 255, 0.34);
  border-radius: 18px;
  color: var(--glass-text-primary);
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(134, 212, 255, 0.12)),
    radial-gradient(circle at 0% 50%, rgba(118, 228, 255, 0.13), transparent 58%);
  box-shadow: inset 0 1px 12px rgba(255, 255, 255, 0.16), 0 8px 18px rgba(5, 24, 56, 0.08);
  cursor: pointer;
  font: inherit;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease, background 170ms ease;
}

.glass-option-row:hover,
.glass-option-row:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(132, 231, 255, 0.66);
  box-shadow: var(--glass-hover-glow), inset 0 1px 14px rgba(255, 255, 255, 0.24), 0 10px 24px rgba(5, 24, 56, 0.12);
}

.glass-option-row__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(120, 222, 255, 0.64);
  box-shadow: 0 0 13px rgba(120, 222, 255, 0.58);
}

.glass-option-row__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(13px, 0.91vw, 15px);
  line-height: 1.25;
  font-weight: 520;
}

.glass-option-row__chevron {
  color: var(--glass-text-secondary);
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}

.glass-cta-button {
  min-height: 52px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid rgba(230, 251, 255, 0.72);
  border-radius: var(--glass-radius-pill);
  color: rgba(248, 252, 255, 0.98);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.58), transparent 28%),
    var(--glass-cta-gradient);
  box-shadow: inset 0 1px 18px rgba(255, 255, 255, 0.32), 0 0 32px rgba(78, 213, 255, 0.32), 0 16px 34px rgba(5, 26, 70, 0.24);
  cursor: pointer;
  font: inherit;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 720;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0, 15, 44, 0.44);
  position: relative;
  overflow: hidden;
  transition: transform 170ms ease, box-shadow 170ms ease, filter 170ms ease;
}

.glass-cta-button::after {
  content: "";
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 48%, transparent 61%);
  transform: translateX(-44%);
  opacity: 0.36;
  animation: glassCtaShimmer 5.8s ease-in-out infinite;
  pointer-events: none;
}

.glass-cta-button:hover,
.glass-cta-button:focus-visible {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow: inset 0 1px 20px rgba(255, 255, 255, 0.40), 0 0 42px rgba(88, 223, 255, 0.40), 0 18px 38px rgba(5, 26, 70, 0.28);
}

.glass-cta-button__signal {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 9px rgba(255, 255, 255, 0.24);
  font-size: 12px;
}

.glass-input-field {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border: 1px solid rgba(178, 232, 255, 0.42);
  border-radius: var(--glass-radius-pill);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(113, 198, 255, 0.13));
  box-shadow: inset 0 1px 18px rgba(255, 255, 255, 0.18), inset 0 -10px 22px rgba(40, 116, 196, 0.06), 0 8px 22px rgba(4, 20, 50, 0.10);
}

.glass-input-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--glass-text-primary);
  font: inherit;
  font-size: clamp(13px, 0.93vw, 15px);
}

.glass-input-field input::placeholder {
  color: var(--glass-text-secondary);
  opacity: 0.82;
}

.glass-input-field:focus-within {
  box-shadow: var(--glass-focus-ring), inset 0 1px 18px rgba(255, 255, 255, 0.20);
}

.glass-send-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(222, 250, 255, 0.68);
  border-radius: 50%;
  color: rgba(248, 252, 255, 0.98);
  background: linear-gradient(135deg, rgba(74, 201, 255, 0.86), rgba(119, 126, 255, 0.72));
  box-shadow: inset 0 1px 12px rgba(255, 255, 255, 0.34), 0 0 20px rgba(82, 220, 255, 0.26);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.glass-trust-badge {
  position: absolute;
  left: clamp(56px, 7.5vw, 122px);
  bottom: clamp(42px, 5.2vw, 74px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: var(--glass-radius-pill);
  color: var(--glass-text-primary);
  background: linear-gradient(135deg, var(--glass-fill), rgba(117, 205, 255, 0.10));
  border: 1px solid rgba(176, 232, 255, 0.38);
  box-shadow: inset 0 1px 14px rgba(255, 255, 255, 0.16), 0 14px 34px rgba(2, 18, 44, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: clamp(11px, 0.82vw, 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.glass-trust-badge__icon {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(115, 224, 255, 0.96);
  text-shadow: 0 0 12px rgba(115, 224, 255, 0.72);
}

.showroom-canvas.time-night .glass-chatbox-menu,
.showroom-canvas.time-night .glass-option-row,
.showroom-canvas.time-night .glass-input-field,
.showroom-canvas.time-night .glass-badge,
.showroom-canvas.time-night .glass-trust-badge {
  color: var(--glass-text-primary);
  border-color: rgba(153, 229, 255, 0.48);
}

.showroom-canvas.time-night .glass-option-row,
.showroom-canvas.time-night .glass-chatbox-menu__message,
.showroom-canvas.time-night .glass-input-field {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(73, 178, 255, 0.14));
}

.showroom-canvas.time-night .glass-floating-control,
.showroom-canvas.time-night .glass-option-row__chevron,
.showroom-canvas.time-night .glass-input-field input,
.showroom-canvas.time-night .glass-chatbox-menu__message p:last-child {
  color: var(--glass-text-primary);
}

.showroom-canvas.time-night .glass-input-field input::placeholder,
.showroom-canvas.time-night .glass-chatbox-menu__label,
.showroom-canvas.time-night .orchestrator-identity__eyebrow {
  color: var(--glass-text-secondary);
}

.showroom-canvas.time-sunset .glass-chatbox-menu {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.64), transparent 34%),
    radial-gradient(circle at 100% 14%, rgba(130, 219, 255, 0.18), transparent 34%),
    linear-gradient(145deg, var(--glass-fill-strong), var(--glass-fill) 42%, rgba(196, 224, 255, 0.24));
}

/* The left panel remains an internal diagnostic tool, not a second commercial menu. */
.dev-time-controls {
  z-index: 110 !important;
  opacity: 0.64;
  filter: saturate(0.80) brightness(0.92);
  transform: scale(0.94) !important;
  transform-origin: left bottom;
  border-color: rgba(114, 177, 214, 0.26) !important;
  box-shadow: 0 18px 42px rgba(0, 11, 28, 0.22) !important;
}

.dev-time-controls:hover,
.dev-time-controls:focus-within {
  opacity: 0.88;
  filter: saturate(0.92) brightness(0.98);
}

.dev-time-controls .dev-group-title {
  opacity: 0.74;
}

.dev-time-controls button {
  min-height: 27px;
}

.showroom-canvas :is(button, input):focus-visible {
  outline: none;
  box-shadow: var(--glass-focus-ring), var(--glass-hover-glow);
}

@keyframes glassChatboxEntrance {
  from { opacity: 0; transform: translate3d(16px, 12px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes glassChatboxBreath {
  0%, 100% { box-shadow: var(--glass-inner-glow), var(--glass-outer-shadow); }
  50% { box-shadow: var(--glass-inner-glow), 0 28px 78px rgba(4, 20, 48, 0.36), 0 0 54px rgba(96, 218, 255, 0.18); }
}

@keyframes glassCtaShimmer {
  0%, 68%, 100% { transform: translateX(-58%); opacity: 0; }
  75% { opacity: 0.34; }
  90% { transform: translateX(58%); opacity: 0; }
}

@media (max-width: 1180px) {
  .glass-chatbox-menu {
    right: clamp(28px, 4vw, 54px);
    width: clamp(300px, 29vw, 365px);
  }

  .hero-microcopy {
    width: min(290px, 27vw);
  }
}

@media (max-width: 920px) {
  .showroom-header__signal,
  .hero-microcopy,
  .glass-trust-badge {
    display: none;
  }

  .glass-chatbox-menu {
    top: auto;
    right: 18px;
    bottom: 20px;
    width: min(360px, calc(100% - 36px));
    max-height: 70%;
  }
}

@media (max-width: 620px) {
  .showroom-header {
    left: 14px;
    right: 14px;
    top: 12px;
  }

  .glass-chatbox-menu {
    gap: 10px;
    padding: 15px;
    border-radius: 26px;
  }

  .glass-chatbox-menu__message {
    display: none;
  }

  .glass-option-row:nth-of-type(n+4) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-chatbox-menu,
  .glass-cta-button::after {
    animation: none !important;
  }

  .glass-chatbox-menu,
  .glass-option-row,
  .glass-cta-button,
  .glass-floating-control {
    transition-duration: 1ms !important;
  }

  .glass-option-row:hover,
  .glass-option-row:focus-visible,
  .glass-cta-button:hover,
  .glass-cta-button:focus-visible,
  .glass-floating-control:hover,
  .glass-floating-control:focus-visible {
    transform: none;
  }
}

/* V10.1 adjustment: trust badge is kept above the temporary debug panel so the
   internal control panel never reads as a second visitor-facing commercial menu. */
.glass-trust-badge {
  top: clamp(300px, 34vw, 392px);
  bottom: auto;
}

/* Prepared but not displayed in V10.1: contextual card families for future UI
   modes. No permanent catalogue is introduced in this pass. */
.glass-agent-card,
.glass-feature-card {
  border-radius: var(--glass-radius-card);
  background: linear-gradient(145deg, var(--glass-fill), rgba(120, 205, 255, 0.10));
  border: 1px solid rgba(177, 232, 255, 0.38);
  box-shadow: var(--glass-inner-glow), 0 18px 46px rgba(3, 20, 48, 0.20);
  backdrop-filter: blur(var(--glass-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
  color: var(--glass-text-primary);
}

.glass-agent-card {
  --glass-card-priority-glow: rgba(102, 220, 255, 0.26);
}

.glass-feature-card {
  --glass-card-priority-glow: rgba(115, 185, 230, 0.14);
}

.glass-micro-hud-line {
  position: relative;
}

.glass-micro-hud-line::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 230, 255, 0.42), transparent);
  opacity: 0.42;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   V10.1.1 — Crystal Material Correction

   NL 00 review: V10.1 was readable and glass-like, but still too close to
   frosted SaaS glass. This pass increases the crystal-object reading by adding
   faceted internal planes, prismatic bevels, sharper luminous rim edges,
   spectral corner highlights and subtle HUD engravings. Scene stack and layout
   remain unchanged.
---------------------------------------------------------------------------- */
.showroom-canvas {
  --crystal-white-core: rgba(255, 255, 255, 0.74);
  --crystal-white-soft: rgba(255, 255, 255, 0.36);
  --crystal-cyan-edge: rgba(112, 235, 255, 0.86);
  --crystal-blue-edge: rgba(58, 143, 255, 0.64);
  --crystal-violet-edge: rgba(184, 136, 255, 0.56);
  --crystal-magenta-edge: rgba(236, 142, 255, 0.32);
  --crystal-engraving: rgba(35, 105, 170, 0.18);
  --crystal-shadow-deep: rgba(2, 14, 42, 0.42);
  --crystal-panel-alpha: 0.52;
  --crystal-panel-alpha-strong: 0.72;
  --crystal-edge-glow: 0 0 18px rgba(92, 224, 255, 0.42), 0 0 36px rgba(154, 142, 255, 0.22);
}

.showroom-canvas.time-day {
  --crystal-panel-alpha: 0.58;
  --crystal-panel-alpha-strong: 0.78;
  --crystal-engraving: rgba(22, 80, 145, 0.24);
  --crystal-shadow-deep: rgba(10, 44, 82, 0.26);
}

.showroom-canvas.time-dawn {
  --crystal-panel-alpha: 0.57;
  --crystal-panel-alpha-strong: 0.76;
  --crystal-violet-edge: rgba(190, 146, 255, 0.62);
}

.showroom-canvas.time-sunset {
  --crystal-panel-alpha: 0.60;
  --crystal-panel-alpha-strong: 0.79;
  --crystal-violet-edge: rgba(206, 152, 255, 0.66);
  --crystal-magenta-edge: rgba(240, 152, 255, 0.38);
}

.showroom-canvas.time-night {
  --crystal-panel-alpha: 0.46;
  --crystal-panel-alpha-strong: 0.66;
  --crystal-white-soft: rgba(255, 255, 255, 0.22);
  --crystal-engraving: rgba(161, 230, 255, 0.15);
  --crystal-shadow-deep: rgba(0, 8, 30, 0.64);
}

/* Main object: less frosted-card, more polished crystal slab. */
.glass-chatbox-menu {
  border-radius: 38px;
  border: 1px solid rgba(222, 250, 255, 0.72);
  background:
    linear-gradient(117deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.30) 10%, transparent 22%),
    linear-gradient(154deg, transparent 0%, transparent 48%, rgba(112, 232, 255, 0.16) 49%, rgba(255, 255, 255, 0.06) 55%, transparent 67%),
    linear-gradient(28deg, transparent 0%, transparent 63%, rgba(184, 136, 255, 0.13) 64%, rgba(255, 255, 255, 0.10) 70%, transparent 82%),
    radial-gradient(circle at 9% 9%, rgba(255, 255, 255, 0.88), rgba(154, 238, 255, 0.24) 16%, transparent 30%),
    radial-gradient(circle at 96% 4%, rgba(127, 225, 255, 0.32), transparent 25%),
    radial-gradient(circle at 4% 96%, rgba(113, 225, 255, 0.22), transparent 28%),
    linear-gradient(145deg,
      rgba(250, 254, 255, var(--crystal-panel-alpha-strong)),
      rgba(232, 246, 255, var(--crystal-panel-alpha)) 41%,
      rgba(202, 222, 255, 0.31) 67%,
      rgba(248, 253, 255, 0.56)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 18px 0 28px rgba(255, 255, 255, 0.16),
    inset -18px 0 30px rgba(99, 181, 255, 0.12),
    inset 0 -24px 48px rgba(88, 147, 238, 0.10),
    0 26px 76px var(--crystal-shadow-deep),
    var(--crystal-edge-glow);
  backdrop-filter: blur(30px) saturate(1.38) brightness(1.04);
  -webkit-backdrop-filter: blur(30px) saturate(1.38) brightness(1.04);
}

/* Prismatic bevel: stronger than V10.1, still controlled. */
.glass-chatbox-menu::before {
  padding: 2px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.98) 0%,
      var(--crystal-cyan-edge) 12%,
      rgba(92,170,255,0.42) 38%,
      var(--crystal-violet-edge) 68%,
      rgba(255,255,255,0.72) 100%
    );
  opacity: 0.96;
  filter: drop-shadow(0 0 10px rgba(119, 231, 255, 0.34));
}

/* Outer aura is now corner/edge-biased, not an even SaaS shadow. */
.glass-chatbox-menu::after {
  inset: -2px;
  height: auto;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--crystal-cyan-edge), transparent 16%, transparent 82%, var(--crystal-violet-edge)),
    radial-gradient(circle at 0% 0%, rgba(91, 226, 255, 0.46), transparent 19%),
    radial-gradient(circle at 100% 9%, rgba(186, 146, 255, 0.34), transparent 20%),
    radial-gradient(circle at 7% 100%, rgba(92, 219, 255, 0.26), transparent 24%);
  filter: blur(16px);
  opacity: 0.42;
  z-index: -1;
}

.glass-chatbox-menu__reflection {
  top: -7px;
  left: 7%;
  right: 11%;
  height: 58%;
  border-radius: 36px 36px 54% 54%;
  background:
    linear-gradient(104deg, rgba(255,255,255,0.72), rgba(255,255,255,0.26) 22%, transparent 43%),
    linear-gradient(22deg, transparent 52%, rgba(111, 235, 255, 0.20) 53%, rgba(255,255,255,0.20) 57%, transparent 64%);
  opacity: 0.58;
  transform: skewX(-10deg);
  mix-blend-mode: screen;
}

.glass-chatbox-menu__reflection::before,
.glass-chatbox-menu__reflection::after {
  content: "";
  position: absolute;
  pointer-events: none;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.86), rgba(111,234,255,0.84), transparent);
  box-shadow: 0 0 12px rgba(120, 232, 255, 0.48);
  opacity: 0.72;
}

.glass-chatbox-menu__reflection::before {
  width: 72%;
  left: 4%;
  top: 39%;
  transform: rotate(-8deg);
}

.glass-chatbox-menu__reflection::after {
  width: 46%;
  right: -4%;
  top: 20%;
  transform: rotate(15deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), rgba(205,152,255,0.72), transparent);
}

.glass-chatbox-menu__topbar {
  position: relative;
  padding-bottom: 10px;
}

.glass-chatbox-menu__topbar::after {
  content: "";
  position: absolute;
  left: 58px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(81, 198, 255, 0.38), rgba(255, 255, 255, 0.56), rgba(180, 138, 255, 0.24), transparent);
  box-shadow: 0 0 12px rgba(99, 222, 255, 0.18);
}

.glass-icon-orb {
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.84) 12%, rgba(133,235,255,0.48) 30%, transparent 45%),
    conic-gradient(from 210deg, rgba(87, 219, 255, 0.88), rgba(255,255,255,0.50), rgba(95,133,255,0.54), rgba(202,134,255,0.42), rgba(87,219,255,0.88)),
    radial-gradient(circle at 50% 50%, rgba(33, 92, 202, 0.48), rgba(24, 38, 106, 0.10) 72%);
  border-color: rgba(236, 253, 255, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 0 18px rgba(255,255,255,0.42),
    0 0 26px rgba(76, 224, 255, 0.38),
    0 9px 22px rgba(5, 22, 56, 0.22);
}

/* Interior panes become etched crystal plates rather than soft message boxes. */
.glass-chatbox-menu__message,
.glass-option-row,
.glass-input-field,
.glass-badge,
.glass-floating-control,
.glass-trust-badge {
  position: relative;
  overflow: hidden;
  border-color: rgba(211, 247, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 -12px 22px rgba(63, 146, 226, 0.08),
    0 8px 22px rgba(2, 18, 46, 0.10);
}

.glass-chatbox-menu__message {
  border-radius: 24px;
  background:
    linear-gradient(128deg, rgba(255,255,255,0.44), rgba(255,255,255,0.10) 28%, transparent 48%),
    linear-gradient(22deg, transparent 0%, transparent 62%, rgba(116, 227, 255, 0.14) 63%, transparent 78%),
    linear-gradient(145deg, rgba(255,255,255,0.28), rgba(123,205,255,0.11));
}

.glass-chatbox-menu__message::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0%, transparent 8%, var(--crystal-engraving) 8.3%, transparent 8.7%, transparent 100%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(77, 188, 244, 0.055) 35px 36px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(77, 188, 244, 0.045) 24px 25px);
  opacity: 0.58;
  pointer-events: none;
}

.glass-option-row {
  border-radius: 20px;
  border-color: rgba(201, 244, 255, 0.52);
  background:
    linear-gradient(108deg, rgba(255,255,255,0.46), rgba(255,255,255,0.13) 28%, transparent 46%),
    linear-gradient(19deg, transparent 0%, transparent 55%, rgba(94, 219, 255, 0.14) 56%, rgba(255,255,255,0.10) 61%, transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,0.25), rgba(112, 198, 255, 0.12));
}

.glass-option-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.74), rgba(114,232,255,0.34) 42%, rgba(190,142,255,0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.78;
  pointer-events: none;
}

.glass-option-row::after {
  content: "";
  position: absolute;
  left: 18%;
  right: -18%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.80), rgba(116,232,255,0.52), transparent);
  opacity: 0.72;
  pointer-events: none;
}

.glass-option-row__dot {
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.96), rgba(120,222,255,0.72) 42%, rgba(93,121,255,0.36));
  box-shadow: 0 0 12px rgba(120, 222, 255, 0.72), 0 0 22px rgba(190, 142, 255, 0.24);
}

.glass-cta-button {
  min-height: 54px;
  border-width: 1px;
  border-color: rgba(244, 254, 255, 0.88);
  background:
    linear-gradient(118deg, rgba(255,255,255,0.76), rgba(255,255,255,0.20) 22%, transparent 38%),
    linear-gradient(23deg, transparent 0%, transparent 51%, rgba(255,255,255,0.22) 52%, rgba(197, 151, 255, 0.20) 57%, transparent 68%),
    linear-gradient(135deg, rgba(74, 205, 255, 0.90), rgba(70, 133, 255, 0.82) 50%, rgba(184, 133, 255, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 0 0 1px rgba(255,255,255,0.25),
    inset 0 -16px 28px rgba(34, 74, 220, 0.14),
    0 0 22px rgba(84, 224, 255, 0.42),
    0 0 48px rgba(188, 136, 255, 0.26),
    0 16px 34px rgba(5, 26, 70, 0.28);
}

.glass-cta-button::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.36);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  pointer-events: none;
}

.glass-cta-button::after {
  background: linear-gradient(104deg, transparent 28%, rgba(255,255,255,0.70) 46%, rgba(124,238,255,0.42) 52%, transparent 66%);
  opacity: 0.42;
}

.glass-input-field {
  border-color: rgba(221, 250, 255, 0.58);
  background:
    linear-gradient(118deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12) 24%, transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,0.30), rgba(116, 200, 255, 0.13));
}

.glass-input-field::before {
  content: "";
  position: absolute;
  inset: 1px 48px 1px 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent 70%);
  pointer-events: none;
}

.glass-send-button {
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,0.78), transparent 33%),
    linear-gradient(135deg, rgba(74, 201, 255, 0.90), rgba(121, 120, 255, 0.78));
  border-color: rgba(240, 254, 255, 0.78);
  box-shadow: inset 0 1px 14px rgba(255,255,255,0.40), 0 0 24px rgba(82, 220, 255, 0.34), 0 0 36px rgba(184, 136, 255, 0.14);
}

.glass-badge {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.55), rgba(255,255,255,0.16) 32%, transparent 56%),
    linear-gradient(145deg, rgba(255,255,255,0.24), rgba(116,211,255,0.13));
  border-color: rgba(215, 250, 255, 0.52);
}

.glass-floating-control {
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,0.76), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,0.36), rgba(107,198,255,0.18));
  border-color: rgba(222, 250, 255, 0.58);
}

.glass-trust-badge {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.56), rgba(255,255,255,0.14) 30%, transparent 52%),
    linear-gradient(145deg, var(--glass-fill), rgba(117, 205, 255, 0.12));
  border-color: rgba(213, 248, 255, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.80),
    inset 0 0 0 1px rgba(255,255,255,0.16),
    0 14px 34px rgba(2, 18, 44, 0.18),
    0 0 20px rgba(100, 221, 255, 0.18);
}

/* Night readability: preserve crystal edges without turning into cockpit neon. */
.showroom-canvas.time-night .glass-chatbox-menu {
  background:
    linear-gradient(117deg, rgba(255,255,255,0.30), rgba(255,255,255,0.10) 14%, transparent 24%),
    linear-gradient(154deg, transparent 0%, transparent 48%, rgba(112,232,255,0.17) 49%, rgba(255,255,255,0.06) 55%, transparent 67%),
    linear-gradient(28deg, transparent 0%, transparent 63%, rgba(184,136,255,0.18) 64%, rgba(255,255,255,0.08) 70%, transparent 82%),
    radial-gradient(circle at 10% 9%, rgba(200,245,255,0.28), rgba(104,222,255,0.14) 16%, transparent 30%),
    linear-gradient(145deg, rgba(34,68,105,0.70), rgba(17,43,82,0.55) 42%, rgba(28,49,96,0.48));
}

.showroom-canvas.time-night .glass-chatbox-menu__message,
.showroom-canvas.time-night .glass-option-row,
.showroom-canvas.time-night .glass-input-field {
  background:
    linear-gradient(112deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06) 32%, transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(73,178,255,0.14));
}

/* Day readability: crystal still reads even over the bright showroom. */
.showroom-canvas.time-day .glass-chatbox-menu,
.showroom-canvas.time-dawn .glass-chatbox-menu {
  border-color: rgba(224, 250, 255, 0.78);
}

.showroom-canvas.time-day .glass-option-row,
.showroom-canvas.time-dawn .glass-option-row,
.showroom-canvas.time-day .glass-input-field,
.showroom-canvas.time-dawn .glass-input-field,
.showroom-canvas.time-day .glass-chatbox-menu__message,
.showroom-canvas.time-dawn .glass-chatbox-menu__message {
  background:
    linear-gradient(112deg, rgba(255,255,255,0.54), rgba(255,255,255,0.15) 32%, transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,0.30), rgba(111,190,255,0.13));
}


/* ----------------------------------------------------------------------------
   V10.1.2 — Target Chatbox Material Correction

   Purpose: match the approved target reference image more closely. The UI is no
   longer treated as an Orchestrator dashboard. It becomes a simple luminous
   Neo Lens glass menu: soft milky crystal, centered logo, welcome copy, five
   rows, input capsule, floating Menu orb. Scene geometry remains untouched.
---------------------------------------------------------------------------- */
.showroom-canvas {
  --target-glass-text: rgba(24, 47, 91, 0.96);
  --target-glass-muted: rgba(61, 83, 129, 0.72);
  --target-blue: rgba(87, 118, 255, 0.92);
  --target-edge: rgba(255, 255, 255, 0.92);
  --target-edge-blue: rgba(159, 214, 255, 0.70);
  --target-milk: rgba(248, 251, 255, 0.72);
  --target-milk-soft: rgba(244, 249, 255, 0.54);
  --target-row: rgba(246, 250, 255, 0.42);
  --target-shadow: 0 30px 90px rgba(36, 75, 128, 0.22), 0 0 46px rgba(255,255,255,0.32);
}

/* The target reference does not use a separate hero/header/trust visual block. */
.showroom-header,
.hero-microcopy,
.glass-trust-badge {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.glass-menu-orb {
  position: absolute;
  top: clamp(82px, 10.4vw, 112px);
  right: clamp(62px, 7.1vw, 112px);
  z-index: 8;
  width: clamp(86px, 7.1vw, 116px);
  height: clamp(86px, 7.1vw, 116px);
  border: 1px solid rgba(255,255,255,0.80);
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: rgba(66, 79, 178, 0.92);
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,0.92), rgba(255,255,255,0.34) 27%, transparent 48%),
    radial-gradient(circle at 70% 78%, rgba(137,171,255,0.18), transparent 48%),
    linear-gradient(145deg, rgba(250,253,255,0.60), rgba(226,239,255,0.34));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 0 30px rgba(255,255,255,0.40),
    0 0 0 1px rgba(163, 210, 255, 0.22),
    0 18px 54px rgba(32, 69, 126, 0.18),
    0 0 38px rgba(255,255,255,0.36);
  backdrop-filter: blur(20px) saturate(1.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.06);
  pointer-events: auto;
}

.glass-menu-orb::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.56);
  box-shadow: inset 0 0 20px rgba(125,173,255,0.10);
  pointer-events: none;
}

.glass-menu-orb__icon {
  width: 32px;
  height: 24px;
  display: grid;
  gap: 5px;
  place-items: center;
}

.glass-menu-orb__icon span {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(80,111,255,0.82), rgba(119,92,255,0.92));
  box-shadow: 0 0 8px rgba(102, 117, 255, 0.28);
}

.glass-menu-orb__label {
  font-size: clamp(16px, 1.24vw, 22px);
  line-height: 1;
  font-weight: 520;
  letter-spacing: -0.03em;
}

.glass-chatbox-menu.glass-chatbox-menu--welcome {
  top: clamp(154px, 15.3vw, 184px);
  right: clamp(64px, 6.8vw, 106px);
  width: clamp(342px, 24.3vw, 392px);
  min-height: clamp(560px, 67vw, 650px);
  max-height: min(694px, 81%);
  padding: clamp(46px, 3.5vw, 58px) clamp(26px, 2.2vw, 34px) clamp(25px, 2vw, 32px);
  gap: 0;
  align-items: stretch;
  color: var(--target-glass-text);
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: clamp(34px, 3vw, 48px);
  background:
    linear-gradient(117deg, rgba(255,255,255,0.58), rgba(255,255,255,0.24) 24%, transparent 40%),
    radial-gradient(ellipse at 50% 8%, rgba(255,255,255,0.72), rgba(247,251,255,0.34) 30%, transparent 56%),
    radial-gradient(ellipse at 50% 108%, rgba(255,255,255,0.60), rgba(212,229,255,0.22) 32%, transparent 65%),
    linear-gradient(145deg, rgba(250,253,255,0.72), rgba(236,244,255,0.54) 46%, rgba(226,238,255,0.46));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,0.28),
    inset 0 -34px 80px rgba(210, 228, 255, 0.24),
    var(--target-shadow),
    0 0 0 1px rgba(141, 194, 255, 0.14);
  backdrop-filter: blur(24px) saturate(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.04);
  animation: glassChatboxEntrance 600ms cubic-bezier(.2,.8,.2,1) both;
}

.glass-chatbox-menu.glass-chatbox-menu--welcome::before {
  padding: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(208,235,255,0.72) 34%, rgba(172,190,255,0.36) 63%, rgba(255,255,255,0.82));
  opacity: 0.92;
}

.glass-chatbox-menu.glass-chatbox-menu--welcome::after {
  inset: -5px;
  height: auto;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.82), transparent),
    radial-gradient(circle at 5% 12%, rgba(255,255,255,0.55), transparent 25%),
    radial-gradient(circle at 98% 90%, rgba(148, 183, 255, 0.22), transparent 31%);
  filter: blur(13px);
  opacity: 0.34;
  z-index: 0;
}

.glass-chatbox-menu.glass-chatbox-menu--welcome .glass-chatbox-menu__reflection {
  top: -10px;
  left: 10%;
  right: 16%;
  height: 47%;
  border-radius: 44px 44px 52% 52%;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.76), rgba(255,255,255,0.26) 20%, rgba(255,255,255,0.06) 38%, transparent 60%),
    radial-gradient(ellipse at 24% 7%, rgba(255,255,255,0.62), transparent 38%);
  opacity: 0.42;
  mix-blend-mode: screen;
}

.glass-chatbox-menu.glass-chatbox-menu--welcome > *:not(.glass-chatbox-menu__reflection) {
  position: relative;
  z-index: 3;
}

.glass-close-control {
  position: absolute !important;
  top: clamp(22px, 1.8vw, 30px);
  right: clamp(20px, 1.7vw, 28px);
  width: clamp(38px, 3.1vw, 48px);
  height: clamp(38px, 3.1vw, 48px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.76);
  color: rgba(28, 51, 96, 0.88);
  font-size: clamp(28px, 2vw, 34px);
  line-height: 0.8;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,0.82), transparent 39%),
    linear-gradient(145deg, rgba(250,253,255,0.42), rgba(218,232,255,0.25));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 0 15px rgba(255,255,255,0.34),
    0 6px 18px rgba(34,72,130,0.10);
  pointer-events: auto;
}

.neo-lens-mini-logo {
  width: clamp(58px, 4.2vw, 72px);
  height: clamp(58px, 4.2vw, 72px);
  margin: 0 auto clamp(22px, 2vw, 31px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 26%, rgba(255,255,255,0.82), rgba(244,249,255,0.26) 47%, transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,0.26), rgba(203,222,255,0.14));
  border: 1px solid rgba(143, 171, 219, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.80), 0 4px 22px rgba(53,86,145,0.08);
  overflow: hidden;
}

.neo-lens-mini-logo img {
  width: 104%;
  height: 104%;
  object-fit: contain;
  opacity: 0.83;
  filter: saturate(.88) contrast(.94) drop-shadow(0 1px 5px rgba(8,31,72,0.10));
}

.glass-welcome-copy {
  text-align: center;
  margin-bottom: clamp(28px, 2.4vw, 36px);
}

.glass-welcome-copy h2 {
  margin: 0 0 clamp(13px, 1.1vw, 18px);
  color: rgba(33, 53, 94, 0.98);
  font-size: clamp(23px, 2.05vw, 34px);
  line-height: 1.08;
  font-weight: 640;
  letter-spacing: -0.065em;
  text-shadow: 0 1px 14px rgba(255,255,255,0.60);
}

.glass-welcome-copy p {
  margin: 0;
  color: rgba(38, 58, 101, 0.94);
  font-size: clamp(18px, 1.56vw, 26px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.glass-option-list.glass-option-list--target {
  display: grid;
  gap: clamp(10px, .88vw, 13px);
  margin: 0 0 clamp(38px, 3vw, 50px);
}

.glass-option-row.glass-option-row--target {
  min-height: clamp(54px, 4.1vw, 62px);
  padding: 0 clamp(19px, 1.4vw, 24px) 0 clamp(18px, 1.45vw, 24px);
  border-radius: clamp(14px, 1.3vw, 20px);
  border: 1px solid rgba(139, 167, 214, 0.28);
  background:
    linear-gradient(115deg, rgba(255,255,255,0.46), rgba(255,255,255,0.12) 34%, transparent 60%),
    linear-gradient(145deg, rgba(247,250,255,0.44), rgba(227,237,255,0.30));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    inset 0 -11px 24px rgba(160, 188, 234, 0.08),
    0 5px 16px rgba(43, 80, 142, 0.05);
  color: rgba(29, 50, 93, 0.96);
}

.glass-option-row.glass-option-row--target::before {
  display: none;
}

.glass-option-row.glass-option-row--target::after {
  left: 5%;
  right: 5%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.68), transparent);
  opacity: 0.54;
}

.glass-option-row.glass-option-row--target:hover,
.glass-option-row.glass-option-row--target:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(122, 148, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 10px 22px rgba(61, 93, 160, 0.10),
    0 0 20px rgba(126, 151, 255, 0.12);
}

.glass-option-row__icon {
  width: clamp(24px, 2vw, 30px);
  height: clamp(24px, 2vw, 30px);
  flex: 0 0 auto;
  margin-right: clamp(14px, 1.12vw, 18px);
  display: grid;
  place-items: center;
  color: rgba(90, 113, 255, 0.78);
  filter: drop-shadow(0 0 6px rgba(103, 133, 255, 0.15));
}

.glass-option-row__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glass-option-row.glass-option-row--target .glass-option-row__text {
  font-size: clamp(15px, 1.22vw, 20px);
  font-weight: 560;
  letter-spacing: -0.025em;
}

.glass-option-row.glass-option-row--target .glass-option-row__chevron {
  margin-left: auto;
  font-size: clamp(28px, 2.1vw, 36px);
  line-height: 1;
  color: rgba(43, 68, 128, 0.84);
  opacity: 0.78;
}

.glass-input-field.glass-input-field--target {
  min-height: clamp(58px, 4.7vw, 72px);
  padding: 0 clamp(10px, .8vw, 12px) 0 clamp(23px, 1.7vw, 31px);
  margin-top: auto;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.60);
  background:
    linear-gradient(115deg, rgba(255,255,255,0.54), rgba(255,255,255,0.12) 36%, transparent 64%),
    linear-gradient(145deg, rgba(247,250,255,0.40), rgba(226,237,255,0.26));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -10px 26px rgba(152, 181, 230, 0.09),
    0 8px 22px rgba(46, 78, 133, 0.08);
}

.glass-input-field.glass-input-field--target::before {
  display: none;
}

.glass-input-field.glass-input-field--target input {
  font-size: clamp(15px, 1.2vw, 20px);
  color: rgba(29, 52, 96, 0.94);
  font-weight: 450;
  letter-spacing: -0.025em;
}

.glass-input-field.glass-input-field--target input::placeholder {
  color: rgba(82, 110, 163, 0.62);
}

.glass-input-field.glass-input-field--target .glass-send-button {
  width: clamp(42px, 3.4vw, 54px);
  height: clamp(42px, 3.4vw, 54px);
  display: grid;
  place-items: center;
  color: rgba(94, 116, 255, 0.78);
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,0.88), transparent 36%),
    linear-gradient(145deg, rgba(247,251,255,0.58), rgba(196,218,255,0.34));
  border-color: rgba(255,255,255,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 0 16px rgba(255,255,255,0.34),
    0 0 15px rgba(126, 151, 255, 0.18),
    0 5px 15px rgba(46, 78, 133, 0.10);
}

.glass-input-field.glass-input-field--target .glass-send-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep the temporary debug panel secondary while the commercial target is reviewed. */
.dev-time-controls {
  opacity: 0.50;
  transform: scale(0.92);
  transform-origin: bottom left;
}
.dev-time-controls:hover,
.dev-time-controls:focus-within {
  opacity: 0.86;
  transform: scale(1);
}

.showroom-canvas.time-night .glass-chatbox-menu.glass-chatbox-menu--welcome {
  --target-glass-text: rgba(239, 247, 255, 0.98);
  --target-glass-muted: rgba(210, 225, 248, 0.78);
  color: rgba(239, 247, 255, 0.98);
  border-color: rgba(226, 246, 255, 0.80);
  background:
    linear-gradient(117deg, rgba(255,255,255,0.26), rgba(255,255,255,0.10) 24%, transparent 43%),
    radial-gradient(ellipse at 50% 8%, rgba(255,255,255,0.28), rgba(164,205,255,0.14) 32%, transparent 58%),
    linear-gradient(145deg, rgba(44,69,113,0.70), rgba(35,58,102,0.56) 46%, rgba(28,48,92,0.48));
}

.showroom-canvas.time-night .glass-welcome-copy h2,
.showroom-canvas.time-night .glass-welcome-copy p,
.showroom-canvas.time-night .glass-option-row.glass-option-row--target,
.showroom-canvas.time-night .glass-input-field.glass-input-field--target input {
  color: rgba(239, 247, 255, 0.96);
}

.showroom-canvas.time-night .glass-option-row.glass-option-row--target,
.showroom-canvas.time-night .glass-input-field.glass-input-field--target {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.22), rgba(255,255,255,0.07) 38%, transparent 62%),
    linear-gradient(145deg, rgba(245,250,255,0.14), rgba(126,174,255,0.12));
  border-color: rgba(226, 246, 255, 0.28);
}

.showroom-canvas.time-night .glass-option-row.glass-option-row--target .glass-option-row__chevron,
.showroom-canvas.time-night .glass-input-field.glass-input-field--target .glass-send-button {
  color: rgba(205, 220, 255, 0.90);
}

@media (max-width: 980px) {
  .glass-menu-orb { display: none; }
  .glass-chatbox-menu.glass-chatbox-menu--welcome {
    top: 118px;
    right: 18px;
    width: min(390px, calc(100vw - 36px));
    min-height: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-chatbox-menu.glass-chatbox-menu--welcome,
  .glass-menu-orb { animation: none !important; }
}


/* V10.1.2 refinement — closer to the provided target crop. */
.glass-chatbox-menu.glass-chatbox-menu--welcome {
  top: 176px;
  right: 78px;
  width: 426px;
  height: 642px;
  min-height: 0;
  max-height: none;
  padding: 42px 30px 26px;
  border-radius: 42px;
}
.glass-menu-orb {
  top: 112px;
  right: 84px;
  width: 112px;
  height: 112px;
}
.neo-lens-mini-logo {
  width: 62px;
  height: 62px;
  margin-bottom: 24px;
}
.neo-lens-mini-logo img { display: none !important; }
.neo-mini-logo-svg {
  width: 62px;
  height: 62px;
  overflow: visible;
}
.neo-mini-logo-face {
  fill: none;
  stroke: rgba(42, 63, 111, 0.58);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.neo-mini-logo-svg text {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: rgba(42, 63, 111, 0.72);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.06em;
  text-anchor: middle;
}
.glass-welcome-copy {
  margin-bottom: 31px;
}
.glass-welcome-copy h2 {
  font-size: 25px;
  line-height: 1.08;
  margin-bottom: 14px;
  letter-spacing: -0.055em;
  white-space: nowrap;
}
.glass-welcome-copy p {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.glass-option-list.glass-option-list--target {
  gap: 11px;
  margin-bottom: 36px;
}
.glass-option-row.glass-option-row--target {
  min-height: 56px;
  padding: 0 20px 0 21px;
  border-radius: 17px;
}
.glass-option-row__icon {
  width: 27px;
  height: 27px;
  margin-right: 17px;
}
.glass-option-row.glass-option-row--target .glass-option-row__text {
  font-size: 16px;
  font-weight: 560;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.glass-option-row.glass-option-row--target .glass-option-row__chevron {
  font-size: 31px;
}
.glass-input-field.glass-input-field--target {
  min-height: 64px;
  padding-left: 28px;
  padding-right: 9px;
}
.glass-input-field.glass-input-field--target input {
  font-size: 17px;
}
.glass-input-field.glass-input-field--target .glass-send-button {
  width: 50px;
  height: 50px;
}
.glass-close-control {
  top: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
}
@media (max-width: 980px) {
  .glass-chatbox-menu.glass-chatbox-menu--welcome {
    top: 116px;
    right: 18px;
    width: min(426px, calc(100vw - 36px));
    height: min(642px, calc(100vh - 136px));
    padding: 38px 26px 24px;
  }
  .glass-welcome-copy h2 { white-space: normal; }
}


/* --------------------------------------------------------------------------
   V10.1.3 — Compact Floating Chatbox Correction
   Focus: scale, lower-right placement, lighter opacity, refined border,
   compact row/input density. Scene layers and center assets are untouched.
---------------------------------------------------------------------------- */
:root {
  --nl-chatbox-width-compact: 324px;
  --nl-chatbox-height-compact: 456px;
  --nl-chatbox-top-compact: 418px;
  --nl-chatbox-right-compact: 28px;
  --nl-chatbox-padding-x-compact: 20px;
  --nl-chatbox-padding-top-compact: 24px;
  --nl-chatbox-padding-bottom-compact: 18px;
  --nl-chatbox-radius-compact: 27px;
  --nl-chatbox-fill-compact: rgba(241, 248, 255, 0.335);
  --nl-chatbox-fill-compact-strong: rgba(250, 253, 255, 0.455);
  --nl-chatbox-border-compact: rgba(226, 248, 255, 0.82);
  --nl-chatbox-row-height-compact: 42px;
  --nl-chatbox-row-gap-compact: 6px;
  --nl-chatbox-input-height-compact: 45px;
  --nl-menu-orb-size-compact: 72px;
  --nl-menu-orb-top-compact: 342px;
  --nl-menu-orb-right-compact: 46px;
}

/* Right interface becomes a compact lower-right glass object, not a sidebar. */
.glass-chatbox-menu.glass-chatbox-menu--welcome {
  top: var(--nl-chatbox-top-compact) !important;
  right: var(--nl-chatbox-right-compact) !important;
  width: var(--nl-chatbox-width-compact) !important;
  height: var(--nl-chatbox-height-compact) !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 0 !important;
  padding: var(--nl-chatbox-padding-top-compact) var(--nl-chatbox-padding-x-compact) var(--nl-chatbox-padding-bottom-compact) !important;
  border-radius: var(--nl-chatbox-radius-compact) !important;
  color: rgba(24, 43, 86, 0.95) !important;
  background:
    linear-gradient(118deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14) 23%, rgba(255,255,255,0.025) 43%),
    radial-gradient(ellipse at 48% 6%, rgba(255,255,255,0.52), rgba(199,228,255,0.15) 38%, transparent 62%),
    radial-gradient(circle at 96% 82%, rgba(126,156,255,0.10), transparent 34%),
    linear-gradient(145deg, var(--nl-chatbox-fill-compact-strong), var(--nl-chatbox-fill-compact) 47%, rgba(210,231,255,0.18)) !important;
  border: 1px solid rgba(223, 247, 255, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 0 22px rgba(255,255,255,0.18),
    inset 0 -22px 54px rgba(210, 228, 255, 0.13),
    0 13px 34px rgba(32, 68, 126, 0.14),
    0 0 22px rgba(206, 239, 255, 0.22),
    0 0 0 1px rgba(111, 176, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.03) !important;
  animation: glassChatboxEntrance 520ms cubic-bezier(.2,.8,.2,1) both !important;
}

.glass-chatbox-menu.glass-chatbox-menu--welcome::before {
  padding: 1px !important;
  background:
    linear-gradient(136deg,
      rgba(255,255,255,0.96),
      rgba(202,237,255,0.72) 32%,
      rgba(135,194,255,0.32) 55%,
      rgba(180,154,255,0.20) 70%,
      rgba(255,255,255,0.78)) !important;
  opacity: 0.80 !important;
}

.glass-chatbox-menu.glass-chatbox-menu--welcome::after {
  inset: -3px !important;
  height: auto !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.48), transparent 22%),
    radial-gradient(circle at 98% 92%, rgba(136, 174, 255, 0.15), transparent 30%),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.44), transparent) !important;
  filter: blur(10px) !important;
  opacity: 0.22 !important;
}

.glass-chatbox-menu.glass-chatbox-menu--welcome .glass-chatbox-menu__reflection {
  top: -8px !important;
  left: 13% !important;
  right: 20% !important;
  height: 40% !important;
  border-radius: 26px 26px 48% 48% !important;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.55), rgba(255,255,255,0.16) 26%, rgba(255,255,255,0.04) 45%, transparent 63%),
    radial-gradient(ellipse at 25% 9%, rgba(255,255,255,0.42), transparent 36%) !important;
  opacity: 0.34 !important;
}

/* Floating Menu orb: secondary, smaller, right/lower aligned with final.png. */
.glass-menu-orb {
  top: var(--nl-menu-orb-top-compact) !important;
  right: var(--nl-menu-orb-right-compact) !important;
  width: var(--nl-menu-orb-size-compact) !important;
  height: var(--nl-menu-orb-size-compact) !important;
  border-width: 1px !important;
  background:
    radial-gradient(circle at 34% 23%, rgba(255,255,255,0.74), rgba(255,255,255,0.18) 35%, transparent 60%),
    linear-gradient(145deg, rgba(247,252,255,0.34), rgba(210,229,255,0.18)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 0 16px rgba(255,255,255,0.20),
    0 7px 22px rgba(35,73,130,0.12),
    0 0 18px rgba(199,238,255,0.16) !important;
  opacity: 0.92 !important;
}

.glass-menu-orb__icon {
  gap: 3px !important;
  margin-bottom: 5px !important;
}
.glass-menu-orb__icon span {
  width: 17px !important;
  height: 2px !important;
  background: rgba(76, 105, 255, 0.74) !important;
  box-shadow: 0 0 6px rgba(104, 130, 255, 0.16) !important;
}
.glass-menu-orb__label {
  font-size: 13px !important;
  letter-spacing: -0.02em !important;
  color: rgba(54, 75, 139, 0.88) !important;
}

/* Close button becomes a small integrated glass control. */
.glass-close-control {
  top: 20px !important;
  right: 19px !important;
  width: 27px !important;
  height: 27px !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  color: rgba(24, 43, 86, 0.70) !important;
  font-size: 22px !important;
  line-height: .8 !important;
  background:
    radial-gradient(circle at 35% 23%, rgba(255,255,255,0.74), transparent 38%),
    linear-gradient(145deg, rgba(250,253,255,0.34), rgba(218,232,255,0.16)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 0 8px rgba(255,255,255,0.20),
    0 4px 11px rgba(34,72,130,0.08) !important;
  opacity: 0.82 !important;
}

.neo-lens-mini-logo {
  width: 42px !important;
  height: 42px !important;
  margin: 0 auto 13px !important;
  background:
    radial-gradient(circle at 35% 26%, rgba(255,255,255,0.70), rgba(244,249,255,0.18) 48%, transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(203,222,255,0.10)) !important;
  border-color: rgba(143, 171, 219, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.66), 0 3px 13px rgba(53,86,145,0.05) !important;
}
.neo-mini-logo-svg {
  width: 43px !important;
  height: 43px !important;
}
.neo-mini-logo-face {
  stroke-width: 2.0 !important;
  stroke: rgba(42, 63, 111, 0.50) !important;
}
.neo-mini-logo-svg text {
  font-size: 13px !important;
  fill: rgba(42, 63, 111, 0.64) !important;
}

.glass-welcome-copy {
  margin-bottom: 17px !important;
  padding: 0 12px !important;
}
.glass-welcome-copy h2 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.08 !important;
  font-weight: 640 !important;
  letter-spacing: -0.048em !important;
  color: rgba(27, 46, 89, 0.96) !important;
  white-space: nowrap !important;
}
.glass-welcome-copy p {
  font-size: 14px !important;
  line-height: 1.14 !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  color: rgba(38, 58, 101, 0.88) !important;
}

.glass-option-list.glass-option-list--target {
  gap: var(--nl-chatbox-row-gap-compact) !important;
  margin: 0 0 18px !important;
}
.glass-option-row.glass-option-row--target {
  min-height: var(--nl-chatbox-row-height-compact) !important;
  padding: 0 13px 0 14px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(139, 167, 214, 0.23) !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08) 34%, transparent 60%),
    linear-gradient(145deg, rgba(247,250,255,0.31), rgba(227,237,255,0.20)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -8px 18px rgba(160, 188, 234, 0.045),
    0 3px 9px rgba(43, 80, 142, 0.035) !important;
}
.glass-option-row.glass-option-row--target::after {
  opacity: 0.38 !important;
}
.glass-option-row.glass-option-row--target:hover,
.glass-option-row.glass-option-row--target:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(122, 148, 255, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 7px 15px rgba(61, 93, 160, 0.08),
    0 0 14px rgba(126, 151, 255, 0.08) !important;
}
.glass-option-row__icon {
  width: 19px !important;
  height: 19px !important;
  margin-right: 10px !important;
  color: rgba(87, 112, 255, 0.70) !important;
  filter: drop-shadow(0 0 4px rgba(103, 133, 255, 0.09)) !important;
}
.glass-option-row__icon svg {
  stroke-width: 1.75 !important;
}
.glass-option-row.glass-option-row--target .glass-option-row__text {
  font-size: 13px !important;
  font-weight: 560 !important;
  letter-spacing: -0.018em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.glass-option-row.glass-option-row--target .glass-option-row__chevron {
  font-size: 23px !important;
  color: rgba(43, 68, 128, 0.72) !important;
  opacity: 0.72 !important;
}

.glass-input-field.glass-input-field--target {
  min-height: var(--nl-chatbox-input-height-compact) !important;
  padding: 0 7px 0 16px !important;
  margin-top: auto !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.50) !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.38), rgba(255,255,255,0.075) 36%, transparent 64%),
    linear-gradient(145deg, rgba(247,250,255,0.28), rgba(226,237,255,0.17)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -8px 18px rgba(152, 181, 230, 0.055),
    0 4px 13px rgba(46, 78, 133, 0.052) !important;
}
.glass-input-field.glass-input-field--target input {
  font-size: 13px !important;
  color: rgba(29, 52, 96, 0.82) !important;
  font-weight: 440 !important;
  letter-spacing: -0.018em !important;
}
.glass-input-field.glass-input-field--target input::placeholder {
  color: rgba(82, 110, 163, 0.52) !important;
}
.glass-input-field.glass-input-field--target .glass-send-button {
  width: 35px !important;
  height: 35px !important;
  color: rgba(93, 116, 255, 0.64) !important;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,0.78), transparent 36%),
    linear-gradient(145deg, rgba(247,251,255,0.42), rgba(196,218,255,0.22)) !important;
  border-color: rgba(255,255,255,0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 0 10px rgba(255,255,255,0.22),
    0 0 9px rgba(126, 151, 255, 0.10),
    0 3px 9px rgba(46, 78, 133, 0.07) !important;
}
.glass-input-field.glass-input-field--target .glass-send-button svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.0 !important;
}

/* Time-state readability: maintain compactness while adjusting density only as needed. */
.showroom-canvas.time-day .glass-chatbox-menu.glass-chatbox-menu--welcome,
.showroom-canvas.time-dawn .glass-chatbox-menu.glass-chatbox-menu--welcome {
  background:
    linear-gradient(118deg, rgba(255,255,255,0.46), rgba(255,255,255,0.16) 23%, rgba(255,255,255,0.035) 43%),
    radial-gradient(ellipse at 48% 6%, rgba(255,255,255,0.56), rgba(199,228,255,0.17) 38%, transparent 62%),
    radial-gradient(circle at 96% 82%, rgba(126,156,255,0.10), transparent 34%),
    linear-gradient(145deg, rgba(250,253,255,0.47), rgba(241,248,255,0.35) 47%, rgba(210,231,255,0.20)) !important;
}
.showroom-canvas.time-sunset .glass-chatbox-menu.glass-chatbox-menu--welcome {
  background:
    linear-gradient(118deg, rgba(255,255,255,0.46), rgba(255,255,255,0.14) 23%, rgba(255,255,255,0.03) 43%),
    radial-gradient(ellipse at 48% 6%, rgba(255,255,255,0.50), rgba(210,224,255,0.18) 38%, transparent 62%),
    radial-gradient(circle at 96% 82%, rgba(170,142,255,0.12), transparent 34%),
    linear-gradient(145deg, rgba(244,250,255,0.47), rgba(230,242,255,0.36) 47%, rgba(223,224,255,0.18)) !important;
}
.showroom-canvas.time-night .glass-chatbox-menu.glass-chatbox-menu--welcome {
  color: rgba(239, 247, 255, 0.96) !important;
  border-color: rgba(226, 246, 255, 0.50) !important;
  background:
    linear-gradient(118deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08) 24%, transparent 43%),
    radial-gradient(ellipse at 48% 8%, rgba(255,255,255,0.22), rgba(164,205,255,0.11) 34%, transparent 59%),
    linear-gradient(145deg, rgba(39,62,104,0.56), rgba(32,54,96,0.45) 48%, rgba(26,45,86,0.38)) !important;
}
.showroom-canvas.time-night .glass-welcome-copy h2,
.showroom-canvas.time-night .glass-welcome-copy p,
.showroom-canvas.time-night .glass-option-row.glass-option-row--target,
.showroom-canvas.time-night .glass-input-field.glass-input-field--target input {
  color: rgba(239, 247, 255, 0.95) !important;
}
.showroom-canvas.time-night .glass-option-row.glass-option-row--target,
.showroom-canvas.time-night .glass-input-field.glass-input-field--target {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.18), rgba(255,255,255,0.055) 38%, transparent 62%),
    linear-gradient(145deg, rgba(245,250,255,0.105), rgba(126,174,255,0.085)) !important;
  border-color: rgba(226, 246, 255, 0.22) !important;
}

/* Debug remains visibly temporary and secondary. */
.dev-time-controls {
  opacity: 0.42 !important;
}

@media (max-width: 980px) {
  .glass-chatbox-menu.glass-chatbox-menu--welcome {
    top: auto !important;
    right: 16px !important;
    bottom: 22px !important;
    width: min(324px, calc(100vw - 32px)) !important;
    height: min(456px, calc(100vh - 48px)) !important;
    padding: 24px 18px 17px !important;
  }
  .glass-welcome-copy h2 { white-space: normal !important; }
  .glass-menu-orb { display: none !important; }
}

/* --------------------------------------------------------------------------
   V10.1.4 — Optical Edge / Rim Transparency Refinement
   Focus-only pass: no layout, flow, content, scene or scale changes.
   Adds a 3-layer glass reading to the chatbox, option rows and Menu orb:
   A. readable milky center body;
   B. clearer, more transmissive peripheral edge band;
   C. thin reflective rim highlight.
---------------------------------------------------------------------------- */
:root {
  --nl-optic-body-center: rgba(248, 252, 255, 0.41);
  --nl-optic-body-mid: rgba(237, 246, 255, 0.265);
  --nl-optic-edge-band: rgba(255, 255, 255, 0.105);
  --nl-optic-edge-band-blue: rgba(172, 220, 255, 0.115);
  --nl-optic-rim-white: rgba(255, 255, 255, 0.88);
  --nl-optic-rim-cyan: rgba(191, 239, 255, 0.58);
  --nl-optic-rim-blue: rgba(132, 187, 255, 0.28);
  --nl-optic-rim-violet: rgba(174, 154, 255, 0.16);
  --nl-optic-row-center: rgba(249, 252, 255, 0.345);
  --nl-optic-row-edge: rgba(255, 255, 255, 0.075);
  --nl-optic-edge-band-size: 11px;
  --nl-optic-row-edge-band-size: 5px;
  --nl-optic-rim-glow: 0 0 12px rgba(218, 247, 255, 0.30), 0 0 26px rgba(147, 204, 255, 0.12);
}

/* Main chatbox: center stays readable; perimeter becomes clearer and glassier. */
.glass-chatbox-menu.glass-chatbox-menu--welcome {
  /* Same size and placement as V10.1.3. Only the optical material is refined. */
  border-color: rgba(255, 255, 255, 0.46) !important;
  background:
    /* A — denser, readable milky center body */
    radial-gradient(ellipse at 50% 50%,
      var(--nl-optic-body-center) 0%,
      rgba(246, 251, 255, 0.35) 43%,
      var(--nl-optic-body-mid) 63%,
      rgba(239, 248, 255, 0.12) 76%,
      rgba(255, 255, 255, 0.045) 100%),
    /* B — clearer transmissive edge band */
    linear-gradient(90deg,
      rgba(255,255,255,0.055) 0%,
      rgba(255,255,255,0.010) 7%,
      transparent 17%,
      transparent 83%,
      rgba(173,220,255,0.030) 93%,
      rgba(255,255,255,0.070) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,0.105) 0%,
      rgba(255,255,255,0.020) 8%,
      transparent 18%,
      transparent 80%,
      rgba(181,214,255,0.040) 92%,
      rgba(255,255,255,0.075) 100%),
    /* subtle reflective planes retained from the previous crystal direction */
    linear-gradient(118deg, rgba(255,255,255,0.34), rgba(255,255,255,0.10) 23%, rgba(255,255,255,0.018) 43%),
    radial-gradient(ellipse at 48% 6%, rgba(255,255,255,0.38), rgba(199,228,255,0.12) 38%, transparent 62%),
    radial-gradient(circle at 96% 82%, rgba(126,156,255,0.08), transparent 34%) !important;
  box-shadow:
    /* C — contained polished rim, not a neon line */
    inset 0 1px 0 rgba(255,255,255,0.84),
    inset 0 -1px 0 rgba(166, 215, 255, 0.22),
    inset 1px 0 0 rgba(255,255,255,0.40),
    inset -1px 0 0 rgba(145, 198, 255, 0.18),
    /* B — material thickness at the perimeter */
    inset 0 0 0 var(--nl-optic-edge-band-size) rgba(255,255,255,0.055),
    inset 0 0 22px 5px rgba(255,255,255,0.135),
    inset 0 -20px 42px rgba(210, 228, 255, 0.105),
    0 13px 34px rgba(32, 68, 126, 0.13),
    var(--nl-optic-rim-glow),
    0 0 0 1px rgba(255,255,255,0.18) !important;
}

/* The pseudo border is no longer a simple stroke: it is a clear glass perimeter band. */
.glass-chatbox-menu.glass-chatbox-menu--welcome::before {
  padding: var(--nl-optic-edge-band-size) !important;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.56),
      rgba(210,241,255,0.36) 26%,
      rgba(132,198,255,0.16) 52%,
      rgba(174,154,255,0.10) 72%,
      rgba(255,255,255,0.42)) !important;
  opacity: 0.54 !important;
  filter: none !important;
}

/* Thin rim highlight stays at the outermost edge and catches light selectively. */
.glass-chatbox-menu.glass-chatbox-menu--welcome::after {
  inset: -1px !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg,
      var(--nl-optic-rim-white) 0%,
      var(--nl-optic-rim-cyan) 12%,
      transparent 30%,
      transparent 68%,
      var(--nl-optic-rim-violet) 82%,
      rgba(255,255,255,0.50) 100%),
    radial-gradient(circle at 7% 8%, rgba(255,255,255,0.42), transparent 20%),
    radial-gradient(circle at 96% 94%, rgba(161,198,255,0.16), transparent 26%) !important;
  opacity: 0.32 !important;
  filter: blur(5px) !important;
  z-index: 0 !important;
}

/* Reflections are restrained so the transparent edge band remains readable. */
.glass-chatbox-menu.glass-chatbox-menu--welcome .glass-chatbox-menu__reflection {
  background:
    linear-gradient(105deg, rgba(255,255,255,0.44), rgba(255,255,255,0.12) 26%, rgba(255,255,255,0.03) 45%, transparent 63%),
    linear-gradient(18deg, transparent 56%, rgba(197, 237, 255, 0.10) 58%, transparent 66%) !important;
  opacity: 0.27 !important;
}

/* Option rows: mini glass trays, not filled capsules with a stroke. */
.glass-option-row.glass-option-row--target {
  position: relative !important;
  isolation: isolate !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  background:
    radial-gradient(ellipse at 50% 50%,
      var(--nl-optic-row-center) 0%,
      rgba(244,249,255,0.275) 50%,
      rgba(232,242,255,0.105) 75%,
      rgba(255,255,255,0.035) 100%),
    linear-gradient(90deg,
      rgba(255,255,255,0.070) 0%,
      transparent 15%,
      transparent 85%,
      rgba(178,220,255,0.050) 100%),
    linear-gradient(115deg, rgba(255,255,255,0.245), rgba(255,255,255,0.060) 34%, transparent 60%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 -1px 0 rgba(160,205,255,0.16),
    inset 0 0 0 var(--nl-optic-row-edge-band-size) var(--nl-optic-row-edge),
    inset 0 -7px 14px rgba(160,188,234,0.040),
    0 3px 9px rgba(43,80,142,0.030) !important;
}

.glass-option-row.glass-option-row--target::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: var(--nl-optic-row-edge-band-size) !important;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.44),
      rgba(211,243,255,0.24) 32%,
      rgba(131,192,255,0.10) 58%,
      rgba(255,255,255,0.30) 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.52 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.glass-option-row.glass-option-row--target::after {
  left: 8% !important;
  right: 8% !important;
  top: 0 !important;
  height: 1px !important;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.72), rgba(203,240,255,0.42), transparent) !important;
  opacity: 0.62 !important;
  box-shadow: 0 0 7px rgba(220, 248, 255, 0.22) !important;
  z-index: 1 !important;
}

.glass-option-row.glass-option-row--target > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Input inherits the same readable-center / clearer-edge behavior, but gently. */
.glass-input-field.glass-input-field--target {
  border-color: rgba(255,255,255,0.34) !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(249,252,255,0.34), rgba(236,246,255,0.20) 56%, rgba(255,255,255,0.05) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.070), transparent 16%, transparent 84%, rgba(179,220,255,0.045)),
    linear-gradient(115deg, rgba(255,255,255,0.265), rgba(255,255,255,0.050) 36%, transparent 64%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(160,205,255,0.15),
    inset 0 0 0 5px rgba(255,255,255,0.052),
    inset 0 -8px 18px rgba(152,181,230,0.045),
    0 4px 13px rgba(46,78,133,0.048) !important;
}

/* Menu orb: polished glass sphere with clearer rim and denser center. */
.glass-menu-orb {
  position: absolute !important;
  isolation: isolate !important;
  border-color: rgba(255,255,255,0.36) !important;
  background:
    radial-gradient(circle at 50% 52%,
      rgba(248,252,255,0.34) 0%,
      rgba(236,246,255,0.24) 42%,
      rgba(255,255,255,0.060) 66%,
      rgba(255,255,255,0.025) 100%),
    radial-gradient(circle at 34% 23%, rgba(255,255,255,0.50), rgba(255,255,255,0.12) 35%, transparent 60%),
    conic-gradient(from 225deg,
      rgba(255,255,255,0.24),
      rgba(178,229,255,0.12),
      rgba(158,178,255,0.06),
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.24)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(149,201,255,0.18),
    inset 0 0 0 8px rgba(255,255,255,0.045),
    inset 0 0 15px rgba(255,255,255,0.145),
    0 7px 22px rgba(35,73,130,0.105),
    0 0 15px rgba(209,240,255,0.15) !important;
}

.glass-menu-orb::before {
  inset: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.50),
      rgba(211,244,255,0.26) 34%,
      rgba(135,194,255,0.10) 60%,
      rgba(255,255,255,0.32) 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0.58 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.glass-menu-orb::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.70), rgba(204,241,255,0.34) 27%, transparent 48%, rgba(151,176,255,0.12) 72%, rgba(255,255,255,0.46));
  opacity: 0.42;
  filter: blur(3px);
  pointer-events: none;
  z-index: 0;
}

.glass-menu-orb > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Close and send controls are not part of the scope, but receive only a subtle rim consistency. */
.glass-close-control,
.glass-input-field.glass-input-field--target .glass-send-button {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(154,204,255,0.15),
    inset 0 0 0 4px rgba(255,255,255,0.038),
    0 3px 9px rgba(46,78,133,0.060) !important;
}

/* Time states: keep the optics visible without changing the component geometry. */
.showroom-canvas.time-day .glass-chatbox-menu.glass-chatbox-menu--welcome,
.showroom-canvas.time-dawn .glass-chatbox-menu.glass-chatbox-menu--welcome {
  --nl-optic-body-center: rgba(250, 253, 255, 0.45);
  --nl-optic-body-mid: rgba(240, 248, 255, 0.285);
  --nl-optic-edge-band: rgba(255, 255, 255, 0.095);
}

.showroom-canvas.time-sunset .glass-chatbox-menu.glass-chatbox-menu--welcome {
  --nl-optic-body-center: rgba(248, 252, 255, 0.43);
  --nl-optic-body-mid: rgba(234, 245, 255, 0.275);
  --nl-optic-rim-violet: rgba(190, 154, 255, 0.18);
}

.showroom-canvas.time-night .glass-chatbox-menu.glass-chatbox-menu--welcome {
  --nl-optic-body-center: rgba(62, 86, 126, 0.34);
  --nl-optic-body-mid: rgba(38, 66, 110, 0.25);
  --nl-optic-edge-band: rgba(255, 255, 255, 0.055);
  --nl-optic-row-center: rgba(95, 125, 168, 0.18);
  --nl-optic-row-edge: rgba(255,255,255,0.040);
  border-color: rgba(226,246,255,0.38) !important;
}

.showroom-canvas.time-night .glass-option-row.glass-option-row--target,
.showroom-canvas.time-night .glass-input-field.glass-input-field--target {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(95,125,168,0.18), rgba(72,105,151,0.12) 54%, rgba(255,255,255,0.028) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.045), transparent 16%, transparent 84%, rgba(179,220,255,0.035)),
    linear-gradient(115deg, rgba(255,255,255,0.13), rgba(255,255,255,0.042) 38%, transparent 62%) !important;
}

/* --------------------------------------------------------------------------
   V10.1.5 — PNG Edge Optics Overlay Integration

   Focus-only pass:
   - integrate NL 02.4 PNG edge optics overlays ABOVE the CSS glass body;
   - do not replace the CSS panel/rows/orb with PNG surfaces;
   - reduce CSS border/rim strokes to avoid double-border effects;
   - keep content, icons and text above the overlays;
   - expose separate opacity variables for panel, option rows, Menu orb and
     close control so NL 00 / NL 02.01 can tune each family independently.
---------------------------------------------------------------------------- */
:root {
  --edge-optics-panel-overlay-opacity: 0.74;
  --edge-optics-row-overlay-opacity: 0.68;
  --edge-optics-orb-overlay-opacity: 0.76;
  --edge-optics-close-overlay-opacity: 0.56;

  --edge-optics-panel-body-opacity: 0.34;
  --edge-optics-row-body-opacity: 0.30;
  --edge-optics-orb-body-opacity: 0.26;

  --edge-optics-panel-css-border-opacity: 0.10;
  --edge-optics-row-css-border-opacity: 0.08;
  --edge-optics-orb-css-border-opacity: 0.08;
}

/* Day/dawn need slightly stronger overlays because the background is bright. */
.showroom-canvas.time-day,
.showroom-canvas.time-dawn {
  --edge-optics-panel-overlay-opacity: 0.78;
  --edge-optics-row-overlay-opacity: 0.71;
  --edge-optics-orb-overlay-opacity: 0.80;
  --edge-optics-panel-body-opacity: 0.38;
  --edge-optics-row-body-opacity: 0.33;
}

/* Night needs lower white overlay opacity so it does not become neon. */
.showroom-canvas.time-night {
  --edge-optics-panel-overlay-opacity: 0.64;
  --edge-optics-row-overlay-opacity: 0.58;
  --edge-optics-orb-overlay-opacity: 0.66;
  --edge-optics-panel-body-opacity: 0.29;
  --edge-optics-row-body-opacity: 0.22;
}

/* Main chatbox: CSS keeps the milky readable body; PNG provides the optical edge. */
.glass-chatbox-menu.glass-chatbox-menu--welcome {
  border-color: rgba(255, 255, 255, var(--edge-optics-panel-css-border-opacity)) !important;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(250, 253, 255, var(--edge-optics-panel-body-opacity)) 0%,
      rgba(245, 250, 255, calc(var(--edge-optics-panel-body-opacity) * 0.82)) 47%,
      rgba(232, 243, 255, calc(var(--edge-optics-panel-body-opacity) * 0.34)) 74%,
      rgba(255, 255, 255, 0.035) 100%),
    linear-gradient(118deg, rgba(255,255,255,0.18), rgba(255,255,255,0.045) 26%, transparent 52%),
    radial-gradient(ellipse at 48% 6%, rgba(255,255,255,0.16), rgba(199,228,255,0.06) 38%, transparent 62%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -14px 30px rgba(205, 226, 255, 0.055),
    0 13px 34px rgba(32, 68, 126, 0.11),
    0 0 18px rgba(213, 242, 255, 0.11) !important;
}

/* PNG overlay above the CSS body, below all content. No mask/border stroke. */
.glass-chatbox-menu.glass-chatbox-menu--welcome::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 0 !important;
  background-image: url("assets/edge_optics/chatbox_menu_edge_optics_overlay_v1.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: var(--edge-optics-panel-overlay-opacity) !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-composite: initial !important;
  mask-composite: initial !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Existing CSS rim glow reduced to a soft external atmosphere only. */
.glass-chatbox-menu.glass-chatbox-menu--welcome::after {
  inset: -2px !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 8% 9%, rgba(255,255,255,0.18), transparent 22%),
    radial-gradient(circle at 98% 94%, rgba(151,198,255,0.08), transparent 28%) !important;
  opacity: 0.12 !important;
  filter: blur(9px) !important;
  z-index: 0 !important;
}

.glass-chatbox-menu.glass-chatbox-menu--welcome .glass-chatbox-menu__reflection {
  z-index: 1 !important;
  opacity: 0.20 !important;
}

/* Preserve the required layer order: body < overlay/reflection < content. */
.glass-chatbox-menu.glass-chatbox-menu--welcome > *:not(.glass-chatbox-menu__reflection) {
  position: relative !important;
  z-index: 4 !important;
}

/* Option rows: CSS center remains readable; PNG overlay supplies edge band/rim. */
.glass-option-row.glass-option-row--target {
  border-color: rgba(255,255,255,var(--edge-optics-row-css-border-opacity)) !important;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(249,252,255,var(--edge-optics-row-body-opacity)) 0%,
      rgba(242,249,255,calc(var(--edge-optics-row-body-opacity) * 0.66)) 55%,
      rgba(255,255,255,0.025) 100%),
    linear-gradient(115deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 36%, transparent 64%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -6px 12px rgba(156,186,235,0.026),
    0 3px 8px rgba(43,80,142,0.026) !important;
}

.glass-option-row.glass-option-row--target::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 0 !important;
  background-image: url("assets/edge_optics/option_row_edge_optics_overlay_v1.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: var(--edge-optics-row-overlay-opacity) !important;
  mix-blend-mode: normal !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-composite: initial !important;
  mask-composite: initial !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Existing CSS highlight reduced to avoid a second row border. */
.glass-option-row.glass-option-row--target::after {
  opacity: 0.10 !important;
  box-shadow: none !important;
  z-index: 1 !important;
}

.glass-option-row.glass-option-row--target > * {
  position: relative !important;
  z-index: 3 !important;
}

/* Menu orb: CSS keeps the readable center; PNG overlay creates polished perimeter. */
.glass-menu-orb {
  border-color: rgba(255,255,255,var(--edge-optics-orb-css-border-opacity)) !important;
  background:
    radial-gradient(circle at 50% 52%,
      rgba(248,252,255,var(--edge-optics-orb-body-opacity)) 0%,
      rgba(236,246,255,calc(var(--edge-optics-orb-body-opacity) * 0.74)) 44%,
      rgba(255,255,255,0.035) 72%,
      rgba(255,255,255,0.018) 100%),
    radial-gradient(circle at 34% 23%, rgba(255,255,255,0.24), rgba(255,255,255,0.055) 35%, transparent 60%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 0 10px rgba(255,255,255,0.07),
    0 7px 20px rgba(35,73,130,0.09),
    0 0 12px rgba(209,240,255,0.08) !important;
}

.glass-menu-orb::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 0 !important;
  border: 0 !important;
  background-image: url("assets/edge_optics/menu_orb_edge_optics_overlay_v1.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: var(--edge-optics-orb-overlay-opacity) !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-composite: initial !important;
  mask-composite: initial !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.glass-menu-orb::after {
  opacity: 0.05 !important;
  filter: blur(7px) !important;
}

.glass-menu-orb > * {
  position: relative !important;
  z-index: 3 !important;
}

/* Close control receives the supplied overlay lightly, but remains secondary. */
.glass-close-control {
  isolation: isolate !important;
  border-color: rgba(255,255,255,0.09) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(248,252,255,0.18), rgba(235,245,255,0.08) 60%, transparent 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 3px 8px rgba(46,78,133,0.045) !important;
}

.glass-close-control::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("assets/edge_optics/close_button_edge_optics_overlay_v1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: var(--edge-optics-close-overlay-opacity);
  pointer-events: none;
  z-index: 0;
}

/* Keep the X glyph above the close overlay. */
.glass-close-control {
  position: absolute !important;
  z-index: 4 !important;
}

/* Opacity test presets retained as non-active utility hooks for quick NL 00 review. */
.showroom-canvas.edge-optics-test-soft {
  --edge-optics-panel-overlay-opacity: 0.58;
  --edge-optics-row-overlay-opacity: 0.52;
  --edge-optics-orb-overlay-opacity: 0.58;
}

.showroom-canvas.edge-optics-test-strong {
  --edge-optics-panel-overlay-opacity: 0.86;
  --edge-optics-row-overlay-opacity: 0.78;
  --edge-optics-orb-overlay-opacity: 0.88;
}

/* V10.1.5 hotfix: the generic content-above-overlay selector must not convert
   the close control from absolute to relative. Keep the control integrated in
   the upper-right of the panel while still above the overlay layer. */
.glass-chatbox-menu.glass-chatbox-menu--welcome > .glass-close-control {
  position: absolute !important;
  top: 20px !important;
  right: 19px !important;
  left: auto !important;
  z-index: 5 !important;
}

/* --------------------------------------------------------------------------
   V10.1.6 — Soft Luminous Target Match

   Correction after NL 00 / NL 02.01 review of V10.1.5.
   The target reference is not a hard crystal/faceted component. It is a soft,
   luminous, milky glass menu: translucent body, diffused white rim, very light
   rows, low internal contrast, calm integration into the showroom.

   This pass deliberately reduces the visible PNG edge overlay and blue/cyan
   drawing effect. PNG overlays remain integrated above the CSS body, but they
   are now used as subtle optical support, not as visible border graphics.
---------------------------------------------------------------------------- */
:root {
  /* Separate tuning hooks retained for NL 00 review. */
  --soft-target-panel-overlay-opacity: 0.18;
  --soft-target-row-overlay-opacity: 0.20;
  --soft-target-orb-overlay-opacity: 0.22;
  --soft-target-close-overlay-opacity: 0.18;

  --soft-target-panel-body-opacity: 0.235;
  --soft-target-panel-center-opacity: 0.34;
  --soft-target-row-body-opacity: 0.165;
  --soft-target-input-body-opacity: 0.155;
  --soft-target-orb-body-opacity: 0.165;

  --soft-target-white-rim: rgba(255, 255, 255, 0.72);
  --soft-target-white-rim-soft: rgba(255, 255, 255, 0.34);
  --soft-target-blue-rim-soft: rgba(196, 226, 255, 0.18);
  --soft-target-text: rgba(24, 43, 86, 0.96);
  --soft-target-text-soft: rgba(38, 58, 101, 0.86);
  --soft-target-icon: rgba(84, 110, 255, 0.70);
}

/* Day and dawn need a slightly denser readable center, not a stronger outline. */
.showroom-canvas.time-day,
.showroom-canvas.time-dawn {
  --soft-target-panel-overlay-opacity: 0.16;
  --soft-target-row-overlay-opacity: 0.18;
  --soft-target-orb-overlay-opacity: 0.20;
  --soft-target-panel-body-opacity: 0.255;
  --soft-target-panel-center-opacity: 0.375;
  --soft-target-row-body-opacity: 0.185;
  --soft-target-input-body-opacity: 0.175;
}

/* Sunset keeps readability but avoids violet border emphasis. */
.showroom-canvas.time-sunset {
  --soft-target-panel-overlay-opacity: 0.15;
  --soft-target-row-overlay-opacity: 0.18;
  --soft-target-orb-overlay-opacity: 0.20;
  --soft-target-panel-body-opacity: 0.265;
  --soft-target-panel-center-opacity: 0.38;
  --soft-target-blue-rim-soft: rgba(208, 216, 255, 0.16);
}

/* Night preserves legibility but still avoids cockpit/neon edges. */
.showroom-canvas.time-night {
  --soft-target-panel-overlay-opacity: 0.13;
  --soft-target-row-overlay-opacity: 0.14;
  --soft-target-orb-overlay-opacity: 0.16;
  --soft-target-panel-body-opacity: 0.28;
  --soft-target-panel-center-opacity: 0.36;
  --soft-target-row-body-opacity: 0.18;
  --soft-target-input-body-opacity: 0.17;
  --soft-target-text: rgba(236, 246, 255, 0.96);
  --soft-target-text-soft: rgba(214, 229, 249, 0.84);
  --soft-target-icon: rgba(181, 204, 255, 0.82);
}

/* Main panel: soft luminous bubble, not a white block and not a drawn crystal frame. */
.glass-chatbox-menu.glass-chatbox-menu--welcome {
  color: var(--soft-target-text) !important;
  border-color: rgba(255,255,255,0.20) !important;
  background:
    /* readable central milk */
    radial-gradient(ellipse at 50% 48%,
      rgba(251,253,255,var(--soft-target-panel-center-opacity)) 0%,
      rgba(246,251,255,var(--soft-target-panel-body-opacity)) 46%,
      rgba(238,247,255,0.105) 74%,
      rgba(255,255,255,0.030) 100%),
    /* soft vertical luminous wash visible in target */
    linear-gradient(90deg,
      rgba(255,255,255,0.070) 0%,
      rgba(255,255,255,0.020) 17%,
      transparent 34%,
      transparent 66%,
      rgba(201,225,255,0.030) 84%,
      rgba(255,255,255,0.075) 100%),
    /* quiet top-left reflection, not a faceted plane */
    linear-gradient(118deg,
      rgba(255,255,255,0.215),
      rgba(255,255,255,0.060) 28%,
      transparent 56%),
    radial-gradient(ellipse at 50% 105%, rgba(255,255,255,0.115), transparent 47%) !important;
  box-shadow:
    /* luminous white rim + bottom/corner bloom */
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -1px 0 rgba(255,255,255,0.26),
    inset 1px 0 0 rgba(255,255,255,0.22),
    inset -1px 0 0 rgba(255,255,255,0.16),
    inset 0 0 18px rgba(255,255,255,0.10),
    0 0 0 1px rgba(255,255,255,0.42),
    0 0 22px rgba(255,255,255,0.22),
    0 20px 46px rgba(30, 70, 130, 0.090),
    0 0 38px rgba(217, 242, 255, 0.13),
    0 12px 44px rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(20px) saturate(1.02) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.02) brightness(1.02) !important;
}

/* The supplied overlay stays above the CSS body, but no longer reads as a drawn rim. */
.glass-chatbox-menu.glass-chatbox-menu--welcome::before {
  opacity: var(--soft-target-panel-overlay-opacity) !important;
  filter: blur(.15px) !important;
  mix-blend-mode: screen !important;
}

/* Replace strong CSS edge graphics with the target's white air glow. */
.glass-chatbox-menu.glass-chatbox-menu--welcome::after {
  inset: -6px !important;
  background:
    radial-gradient(ellipse at 50% 103%, rgba(255,255,255,0.54), rgba(255,255,255,0.18) 24%, transparent 55%),
    radial-gradient(circle at 4% 11%, rgba(255,255,255,0.30), transparent 26%),
    radial-gradient(circle at 98% 12%, rgba(255,255,255,0.22), transparent 24%),
    linear-gradient(90deg, transparent 4%, rgba(255,255,255,0.18) 10%, transparent 21%, transparent 79%, rgba(255,255,255,0.15) 91%, transparent 98%) !important;
  opacity: 0.42 !important;
  filter: blur(9px) !important;
  z-index: 0 !important;
}

/* Very soft internal reflection only. */
.glass-chatbox-menu.glass-chatbox-menu--welcome .glass-chatbox-menu__reflection {
  opacity: 0.14 !important;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.28), rgba(255,255,255,0.07) 28%, transparent 62%),
    radial-gradient(ellipse at 26% 8%, rgba(255,255,255,0.20), transparent 40%) !important;
}

/* Typography: target is calm but crisp. */
.glass-welcome-copy h2 {
  color: var(--soft-target-text) !important;
  text-shadow: 0 1px 12px rgba(255,255,255,0.42) !important;
}
.glass-welcome-copy p {
  color: var(--soft-target-text-soft) !important;
  text-shadow: 0 1px 10px rgba(255,255,255,0.34) !important;
}

/* Mini logo: discrete and slightly translucent like target. */
.neo-lens-mini-logo {
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,0.32), rgba(245,250,255,0.06) 54%, transparent 78%) !important;
  border-color: rgba(54, 82, 132, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 2px 10px rgba(53,86,145,0.035) !important;
}
.neo-mini-logo-face { stroke: rgba(39, 60, 108, 0.42) !important; }
.neo-mini-logo-svg text { fill: rgba(39, 60, 108, 0.54) !important; }
.showroom-canvas.time-night .neo-mini-logo-face { stroke: rgba(230,242,255,0.52) !important; }
.showroom-canvas.time-night .neo-mini-logo-svg text { fill: rgba(230,242,255,0.62) !important; }

/* Rows: target rows are simple low-contrast trays, not optically busy capsules. */
.glass-option-row.glass-option-row--target {
  border-color: rgba(112, 139, 190, 0.165) !important;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(251,253,255,var(--soft-target-row-body-opacity)) 0%,
      rgba(244,249,255,calc(var(--soft-target-row-body-opacity) * .72)) 56%,
      rgba(255,255,255,0.020) 100%),
    linear-gradient(115deg, rgba(255,255,255,0.15), rgba(255,255,255,0.035) 38%, transparent 66%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(130, 168, 216, 0.08),
    0 2px 7px rgba(43,80,142,0.020) !important;
}
.glass-option-row.glass-option-row--target::before {
  opacity: var(--soft-target-row-overlay-opacity) !important;
  mix-blend-mode: screen !important;
  filter: blur(.1px) !important;
}
.glass-option-row.glass-option-row--target::after {
  opacity: 0.16 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent) !important;
}
.glass-option-row__icon {
  color: var(--soft-target-icon) !important;
  filter: none !important;
}
.glass-option-row.glass-option-row--target .glass-option-row__text {
  color: var(--soft-target-text) !important;
}
.glass-option-row.glass-option-row--target .glass-option-row__chevron {
  color: rgba(43, 68, 128, 0.62) !important;
  opacity: 0.66 !important;
}
.showroom-canvas.time-night .glass-option-row.glass-option-row--target .glass-option-row__chevron {
  color: rgba(220,235,255,0.72) !important;
}

/* Input: lighter capsule, subtle placeholder, send button less heavy. */
.glass-input-field.glass-input-field--target {
  border-color: rgba(112, 139, 190, 0.13) !important;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(251,253,255,var(--soft-target-input-body-opacity)) 0%,
      rgba(244,249,255,calc(var(--soft-target-input-body-opacity) * .62)) 58%,
      rgba(255,255,255,0.018) 100%),
    linear-gradient(115deg, rgba(255,255,255,0.13), rgba(255,255,255,0.026) 42%, transparent 68%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(130, 168, 216, 0.07),
    0 2px 8px rgba(43,80,142,0.018) !important;
}
.glass-input-field.glass-input-field--target input {
  color: rgba(34, 60, 107, 0.75) !important;
}
.glass-input-field.glass-input-field--target input::placeholder {
  color: rgba(83, 113, 166, 0.42) !important;
}
.glass-input-field.glass-input-field--target .glass-send-button {
  color: rgba(92, 116, 255, 0.60) !important;
  background:
    radial-gradient(circle at 36% 24%, rgba(255,255,255,0.40), transparent 38%),
    linear-gradient(145deg, rgba(248,252,255,0.18), rgba(196,218,255,0.11)) !important;
  border-color: rgba(255,255,255,0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 0 8px rgba(130, 154, 255, 0.070),
    0 2px 7px rgba(46,78,133,0.036) !important;
}

/* Menu orb: soft separate bubble with white rim, not a strong button. */
.glass-menu-orb {
  border-color: rgba(255,255,255,0.22) !important;
  background:
    radial-gradient(circle at 50% 52%,
      rgba(250,253,255,var(--soft-target-orb-body-opacity)) 0%,
      rgba(236,246,255,calc(var(--soft-target-orb-body-opacity) * .74)) 42%,
      rgba(255,255,255,0.035) 72%,
      transparent 100%),
    radial-gradient(circle at 34% 23%, rgba(255,255,255,0.27), rgba(255,255,255,0.055) 35%, transparent 60%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(255,255,255,0.14),
    0 0 0 1px rgba(255,255,255,0.26),
    0 9px 22px rgba(35,73,130,0.07),
    0 0 24px rgba(255,255,255,0.18) !important;
}
.glass-menu-orb::before {
  opacity: var(--soft-target-orb-overlay-opacity) !important;
  mix-blend-mode: screen !important;
}
.glass-menu-orb::after {
  opacity: 0.22 !important;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.28), transparent 64%) !important;
  filter: blur(6px) !important;
}
.glass-menu-orb__icon span {
  background: rgba(79, 106, 255, 0.68) !important;
  box-shadow: none !important;
}
.glass-menu-orb__label {
  color: rgba(55, 75, 140, 0.78) !important;
}

/* Close button: integrated, lower contrast like target. */
.glass-close-control {
  color: rgba(24, 43, 86, 0.60) !important;
  border-color: rgba(255,255,255,0.18) !important;
  background: radial-gradient(circle at 50% 50%, rgba(248,252,255,0.14), rgba(235,245,255,0.045) 70%, transparent 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 2px 6px rgba(46,78,133,0.025) !important;
}
.glass-close-control::before {
  opacity: var(--soft-target-close-overlay-opacity) !important;
  mix-blend-mode: screen !important;
}

/* Night-specific content colors after the general target overrides. */
.showroom-canvas.time-night .glass-welcome-copy h2,
.showroom-canvas.time-night .glass-welcome-copy p,
.showroom-canvas.time-night .glass-option-row.glass-option-row--target,
.showroom-canvas.time-night .glass-option-row.glass-option-row--target .glass-option-row__text,
.showroom-canvas.time-night .glass-input-field.glass-input-field--target input {
  color: var(--soft-target-text) !important;
}
.showroom-canvas.time-night .glass-input-field.glass-input-field--target input::placeholder {
  color: rgba(210, 226, 248, 0.50) !important;
}

/* Utility hooks to quickly test the softness balance. */
.showroom-canvas.soft-target-test-airiest {
  --soft-target-panel-overlay-opacity: 0.08;
  --soft-target-row-overlay-opacity: 0.10;
  --soft-target-orb-overlay-opacity: 0.12;
  --soft-target-panel-center-opacity: 0.28;
  --soft-target-panel-body-opacity: 0.18;
}
.showroom-canvas.soft-target-test-denser {
  --soft-target-panel-overlay-opacity: 0.24;
  --soft-target-row-overlay-opacity: 0.25;
  --soft-target-orb-overlay-opacity: 0.28;
  --soft-target-panel-center-opacity: 0.42;
  --soft-target-panel-body-opacity: 0.30;
}


/* -------------------------------------------------------------------------
   V10.1.7 — Menu orb icon-only reduction

   Focused correction requested after V10.1.6:
   - remove visible "Menu" text from the floating orb;
   - reduce orb diameter so the object reads as a lighter floating control;
   - preserve the same material family and accessibility label.
---------------------------------------------------------------------------- */
.glass-menu-orb {
  top: clamp(96px, 10.8vw, 124px) !important;
  right: clamp(70px, 7.5vw, 118px) !important;
  width: clamp(58px, 5.1vw, 74px) !important;
  height: clamp(58px, 5.1vw, 74px) !important;
  gap: 0 !important;
}

.glass-menu-orb__icon {
  width: 20px !important;
  height: 16px !important;
  gap: 3px !important;
}

.glass-menu-orb__icon span {
  width: 18px !important;
  height: 2.5px !important;
  border-radius: 999px !important;
}

.glass-menu-orb__label {
  display: none !important;
}


/* -------------------------------------------------------------------------
   V10.1.8 — Menu orb size alignment to send button

   Focused correction requested by NL 00 / user review:
   - the floating round menu orb is still too large;
   - it sits too far from the panel;
   - target is the same scale family as the bottom send/validation button.

   This pass keeps the icon-only orb but reduces it to the send-button scale
   and moves it closer to the top-right corner of the chatbox panel.
---------------------------------------------------------------------------- */
.glass-menu-orb {
  top: clamp(118px, 12.2vw, 144px) !important;
  right: clamp(78px, 7.2vw, 108px) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  gap: 0 !important;
  border-width: 1px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(255,255,255,0.16),
    0 4px 12px rgba(35,73,130,0.055),
    0 0 10px rgba(255,255,255,0.12) !important;
}

.glass-menu-orb::before {
  opacity: 0.12 !important;
}

.glass-menu-orb::after {
  opacity: 0.10 !important;
  filter: blur(4px) !important;
}

.glass-menu-orb__icon {
  width: 14px !important;
  height: 12px !important;
  gap: 2px !important;
}

.glass-menu-orb__icon span {
  width: 12px !important;
  height: 2px !important;
}


/* -------------------------------------------------------------------------
   V10.1.9 — Menu orb near-panel positioning

   Focused correction from screenshot markup:
   - red square = previous/original high position;
   - red circle = desired position close to the panel top-right area.

   Only the floating menu orb position is changed.
   Size and icon-only treatment from V10.1.8 are preserved.
---------------------------------------------------------------------------- */
.glass-menu-orb {
  top: clamp(352px, 22.9vw, 378px) !important;
  right: clamp(44px, 3.0vw, 52px) !important;
}


/* -------------------------------------------------------------------------
   V10.1.10 — Vortex menu toggle animation

   On close, the chatbox is absorbed toward the small menu orb. The motion is
   inspired by the iterative visual idea behind z = z² + c: each phase bends,
   shrinks and rotates the panel closer to the orb, without turning the UI into
   a cyberpunk effect. Content remains a normal DOM layer above the glass while
   visible.
---------------------------------------------------------------------------- */
.glass-chatbox-menu {
  --nl-menu-vortex-origin-x: 100%;
  --nl-menu-vortex-origin-y: 0%;
  --nl-menu-vortex-pull-x: 54px;
  --nl-menu-vortex-pull-y: -136px;
  transform-origin: var(--nl-menu-vortex-origin-x) var(--nl-menu-vortex-origin-y) !important;
  will-change: transform, opacity, filter, clip-path;
}

.showroom-canvas.glass-menu-is-open .glass-chatbox-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform-origin: var(--nl-menu-vortex-origin-x) var(--nl-menu-vortex-origin-y) !important;
  animation: nlMenuVortexOpen 520ms cubic-bezier(.16,.86,.22,1) both, glassChatboxBreath 8s ease-in-out 760ms infinite !important;
}

.showroom-canvas.glass-menu-is-opening .glass-chatbox-menu {
  animation: nlMenuVortexOpen 520ms cubic-bezier(.16,.86,.22,1) both !important;
}

.showroom-canvas.glass-menu-is-closing .glass-chatbox-menu {
  pointer-events: none !important;
  transform-origin: var(--nl-menu-vortex-origin-x) var(--nl-menu-vortex-origin-y) !important;
  animation: nlMenuVortexClose 620ms cubic-bezier(.72,-0.02,.24,1) both !important;
}

.showroom-canvas.glass-menu-is-closed .glass-chatbox-menu {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(var(--nl-menu-vortex-pull-x), var(--nl-menu-vortex-pull-y), 0) scale(0.035) rotate(92deg) !important;
  filter: blur(14px) saturate(0.88) brightness(1.16) !important;
}

.glass-menu-orb {
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease !important;
}

.glass-menu-orb.is-vortex-active,
.showroom-canvas.glass-menu-is-closing .glass-menu-orb {
  transform: scale(1.08) rotate(9deg) !important;
  filter: brightness(1.10) saturate(1.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(255,255,255,0.16),
    0 0 0 1px rgba(255,255,255,0.22),
    0 4px 12px rgba(35,73,130,0.065),
    0 0 22px rgba(255,255,255,0.28),
    0 0 34px rgba(112,132,255,0.13) !important;
}

.showroom-canvas.glass-menu-is-closing .glass-menu-orb::after {
  opacity: 0.22 !important;
  filter: blur(5px) !important;
  background:
    conic-gradient(from 90deg,
      rgba(98,115,255,0.00),
      rgba(98,115,255,0.34),
      rgba(255,255,255,0.24),
      rgba(98,115,255,0.00),
      rgba(98,115,255,0.28),
      rgba(255,255,255,0.00)) !important;
  animation: nlMenuOrbVortexSpin 620ms cubic-bezier(.66,.02,.22,1) both !important;
}

@keyframes nlMenuVortexClose {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1) rotate(0deg);
    filter: blur(0) saturate(1) brightness(1);
    clip-path: inset(0 0 0 0 round var(--glass-radius-panel));
  }
  24% {
    opacity: 0.94;
    transform: translate3d(calc(var(--nl-menu-vortex-pull-x) * 0.08), calc(var(--nl-menu-vortex-pull-y) * 0.08), 0) scale(0.92) rotate(4deg);
    filter: blur(0.7px) saturate(1.04) brightness(1.03);
    clip-path: inset(1% 1% 1% 1% round var(--glass-radius-panel));
  }
  48% {
    opacity: 0.72;
    transform: translate3d(calc(var(--nl-menu-vortex-pull-x) * 0.34), calc(var(--nl-menu-vortex-pull-y) * 0.34), 0) scale(0.58) rotate(18deg);
    filter: blur(3px) saturate(1.08) brightness(1.10);
    clip-path: inset(7% 9% 10% 9% round 34px);
  }
  72% {
    opacity: 0.36;
    transform: translate3d(calc(var(--nl-menu-vortex-pull-x) * 0.74), calc(var(--nl-menu-vortex-pull-y) * 0.74), 0) scale(0.22) rotate(48deg);
    filter: blur(8px) saturate(0.95) brightness(1.18);
    clip-path: inset(22% 25% 28% 25% round 999px);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--nl-menu-vortex-pull-x), var(--nl-menu-vortex-pull-y), 0) scale(0.035) rotate(96deg);
    filter: blur(14px) saturate(0.86) brightness(1.25);
    clip-path: inset(48% 48% 48% 48% round 999px);
  }
}

@keyframes nlMenuVortexOpen {
  0% {
    opacity: 0;
    transform: translate3d(var(--nl-menu-vortex-pull-x), var(--nl-menu-vortex-pull-y), 0) scale(0.035) rotate(-80deg);
    filter: blur(12px) saturate(0.88) brightness(1.18);
    clip-path: inset(48% 48% 48% 48% round 999px);
  }
  34% {
    opacity: 0.42;
    transform: translate3d(calc(var(--nl-menu-vortex-pull-x) * 0.62), calc(var(--nl-menu-vortex-pull-y) * 0.62), 0) scale(0.34) rotate(-28deg);
    filter: blur(6px) saturate(1.02) brightness(1.12);
    clip-path: inset(22% 25% 28% 25% round 999px);
  }
  72% {
    opacity: 0.92;
    transform: translate3d(calc(var(--nl-menu-vortex-pull-x) * 0.08), calc(var(--nl-menu-vortex-pull-y) * 0.08), 0) scale(1.015) rotate(1.5deg);
    filter: blur(0.5px) saturate(1.04) brightness(1.03);
    clip-path: inset(0 0 0 0 round var(--glass-radius-panel));
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1) rotate(0deg);
    filter: blur(0) saturate(1) brightness(1);
    clip-path: inset(0 0 0 0 round var(--glass-radius-panel));
  }
}

@keyframes nlMenuOrbVortexSpin {
  0% { transform: rotate(0deg) scale(0.92); opacity: 0.05; }
  35% { opacity: 0.26; }
  100% { transform: rotate(210deg) scale(1.16); opacity: 0.12; }
}

@media (prefers-reduced-motion: reduce) {
  .showroom-canvas.glass-menu-is-open .glass-chatbox-menu,
  .showroom-canvas.glass-menu-is-opening .glass-chatbox-menu,
  .showroom-canvas.glass-menu-is-closing .glass-chatbox-menu {
    animation: none !important;
    transition: opacity 1ms linear !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .showroom-canvas.glass-menu-is-closed .glass-chatbox-menu {
    opacity: 0 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* -------------------------------------------------------------------------
   V10.1.19 — Simple Orb Fold Toggle

   Reset after the over-complex black-hole/canvas attempts.
   The menu remains a DOM glass object and closes with a simple readable motion:
   top-right fold origin, slight anti-clockwise pivot, soft blur, scale toward
   the orb, then a calm orb pulse. No canvas, no mesh, no event-horizon masks.
---------------------------------------------------------------------------- */
.glass-chatbox-menu {
  --nl-menu-vortex-origin-x: calc(100% - 18px);
  --nl-menu-vortex-origin-y: 18px;
  --nl-menu-vortex-pull-x: 0px;
  --nl-menu-vortex-pull-y: 0px;
  transform-origin: var(--nl-menu-vortex-origin-x) var(--nl-menu-vortex-origin-y) !important;
  will-change: transform, opacity, filter !important;
  overflow: visible !important;
}

.showroom-canvas.glass-menu-is-open .glass-chatbox-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform-origin: var(--nl-menu-vortex-origin-x) var(--nl-menu-vortex-origin-y) !important;
  animation: nlMenuSimpleFoldOpen 520ms cubic-bezier(.16,.84,.22,1) both, glassChatboxBreath 8s ease-in-out 760ms infinite !important;
  filter: none !important;
  clip-path: none !important;
}

.showroom-canvas.glass-menu-is-opening .glass-chatbox-menu {
  animation: nlMenuSimpleFoldOpen 520ms cubic-bezier(.16,.84,.22,1) both !important;
  clip-path: none !important;
}

.showroom-canvas.glass-menu-is-closing .glass-chatbox-menu {
  pointer-events: none !important;
  transform-origin: var(--nl-menu-vortex-origin-x) var(--nl-menu-vortex-origin-y) !important;
  animation: nlMenuSimpleFoldClose 620ms cubic-bezier(.52,.02,.22,1) both !important;
  clip-path: none !important;
}

.showroom-canvas.glass-menu-is-closed .glass-chatbox-menu {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(var(--nl-menu-vortex-pull-x), var(--nl-menu-vortex-pull-y), 0) scale(0.055) rotate(-18deg) !important;
  filter: blur(12px) saturate(0.92) brightness(1.10) !important;
  clip-path: none !important;
}

.showroom-canvas.glass-menu-is-closing .glass-chatbox-menu > * {
  animation: nlMenuSimpleContentFade 620ms cubic-bezier(.52,.02,.22,1) both !important;
}

.glass-menu-orb {
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.showroom-canvas.glass-menu-is-closing .glass-menu-orb,
.glass-menu-orb.is-vortex-active {
  animation: nlSimpleOrbPulse 620ms cubic-bezier(.52,.02,.22,1) both !important;
  filter: brightness(1.08) saturate(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(255,255,255,0.16),
    0 0 0 1px rgba(255,255,255,0.22),
    0 4px 12px rgba(35,73,130,0.075),
    0 0 20px rgba(255,255,255,0.26),
    0 0 30px rgba(118,140,255,0.12) !important;
}

.showroom-canvas.glass-menu-is-closing .glass-menu-orb::after {
  opacity: 0.18 !important;
  filter: blur(5px) !important;
  animation: nlSimpleOrbRing 620ms ease both !important;
}

@keyframes nlMenuSimpleFoldClose {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1) rotate(0deg);
    filter: blur(0) saturate(1) brightness(1);
  }
  32% {
    opacity: 0.96;
    transform:
      translate3d(calc(var(--nl-menu-vortex-pull-x) * 0.14), calc(var(--nl-menu-vortex-pull-y) * 0.14), 0)
      scale(0.90)
      rotate(-5deg);
    filter: blur(0.7px) saturate(1.02) brightness(1.02);
  }
  68% {
    opacity: 0.58;
    transform:
      translate3d(calc(var(--nl-menu-vortex-pull-x) * 0.62), calc(var(--nl-menu-vortex-pull-y) * 0.62), 0)
      scale(0.36)
      rotate(-13deg);
    filter: blur(5px) saturate(0.96) brightness(1.08);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--nl-menu-vortex-pull-x), var(--nl-menu-vortex-pull-y), 0)
      scale(0.055)
      rotate(-18deg);
    filter: blur(12px) saturate(0.92) brightness(1.12);
  }
}

@keyframes nlMenuSimpleFoldOpen {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--nl-menu-vortex-pull-x), var(--nl-menu-vortex-pull-y), 0)
      scale(0.055)
      rotate(-18deg);
    filter: blur(12px) saturate(0.92) brightness(1.12);
  }
  54% {
    opacity: 0.88;
    transform:
      translate3d(calc(var(--nl-menu-vortex-pull-x) * 0.16), calc(var(--nl-menu-vortex-pull-y) * 0.16), 0)
      scale(0.93)
      rotate(-3deg);
    filter: blur(1px) saturate(1.02) brightness(1.03);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1) rotate(0deg);
    filter: blur(0) saturate(1) brightness(1);
  }
}

@keyframes nlMenuSimpleContentFade {
  0%, 30% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0.12;
    transform: translate3d(4px,-4px,0) scale(0.96);
    filter: blur(2px);
  }
}

@keyframes nlSimpleOrbPulse {
  0% { transform: scale(1) rotate(0deg); }
  42% { transform: scale(1.12) rotate(-8deg); }
  100% { transform: scale(1.02) rotate(0deg); }
}

@keyframes nlSimpleOrbRing {
  0% { opacity: 0.06; transform: rotate(0deg) scale(0.92); }
  44% { opacity: 0.26; transform: rotate(-80deg) scale(1.18); }
  100% { opacity: 0.12; transform: rotate(-120deg) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .showroom-canvas.glass-menu-is-open .glass-chatbox-menu,
  .showroom-canvas.glass-menu-is-opening .glass-chatbox-menu,
  .showroom-canvas.glass-menu-is-closing .glass-chatbox-menu,
  .showroom-canvas.glass-menu-is-closing .glass-chatbox-menu > *,
  .showroom-canvas.glass-menu-is-closing .glass-menu-orb,
  .showroom-canvas.glass-menu-is-closing .glass-menu-orb::after {
    animation: none !important;
    transition: opacity 1ms linear !important;
  }
}


/* -------------------------------------------------------------------------
   NL03.3 — LEFT Card Shell Two-Layer Integration Test
   Variants:
   A: combined FINAL v4 asset
   B: body haze only, highlight overlay unavailable in supplied files
   C: previous corrected alpha comparison
   The right-side menu/orb animation is preserved from V10.1.19.
---------------------------------------------------------------------------- */
.left-shell-layer-test {
  position: absolute;
  inset: 0;
  z-index: 48;
  pointer-events: none;
}

.left-shell-test-card-stage {
  position: absolute;
  left: clamp(70px, 4.7vw, 90px);
  top: clamp(166px, 18.4vh, 194px);
  width: clamp(520px, 36.4vw, 612px);
  aspect-ratio: 2048 / 1150;
  margin: 0;
  transform: translate3d(0,0,0);
  transform-origin: 64% 49%;
  isolation: isolate;
  pointer-events: none;
}

.left-shell-test-shell-stack,
.left-shell-test-image,
.left-shell-test-content {
  position: absolute;
  inset: 0;
}

.left-shell-test-shell-stack { z-index: 1; pointer-events: none; }

.left-shell-test-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 16px 24px rgba(18, 50, 92, 0.12)) drop-shadow(0 0 11px rgba(70, 184, 255, 0.08));
}

body[data-shell-variant="final"] .left-shell-test-image--final,
body[data-shell-variant="body"] .left-shell-test-image--body,
body[data-shell-variant="corrected"] .left-shell-test-image--corrected { opacity: 1; }

body[data-shell-variant="body"] .left-shell-test-image--body {
  filter: drop-shadow(0 12px 18px rgba(18, 50, 92, 0.08));
}

.left-shell-test-content {
  z-index: 2;
  pointer-events: none;
  color: rgba(17, 39, 92, 0.92);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: geometricPrecision;
}

.left-shell-test-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(7.2px, .58vw, 9.8px);
  line-height: 1;
  letter-spacing: .12em;
  font-weight: 650;
  text-transform: uppercase;
  color: rgba(27, 70, 139, 0.80);
  text-shadow: 0 1px 4px rgba(255,255,255,0.45), 0 0 9px rgba(255,255,255,0.24);
}
.left-shell-test-label span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(70,238,147,.92);
  box-shadow: 0 0 8px rgba(70,238,147,.45);
  flex: 0 0 auto;
}
.left-shell-test-label--agent { left: 26.8%; top: 12.0%; }
.left-shell-test-label--active { right: 19.9%; top: 12.1%; color: rgba(18, 140, 115, 0.80); }

.left-shell-test-title {
  position: absolute;
  left: 26.7%;
  top: 17.2%;
  margin: 0;
  font-size: clamp(17px, 1.38vw, 24px);
  line-height: 1;
  letter-spacing: .115em;
  font-weight: 680;
  color: rgba(24, 48, 122, 0.96);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(255,255,255,0.42), 0 0 10px rgba(255,255,255,0.22);
}
.left-shell-test-description {
  position: absolute;
  left: 57.5%;
  top: 37.3%;
  width: 25.2%;
  margin: 0;
  color: rgba(18, 42, 82, 0.84);
  font-size: clamp(9px, .72vw, 12.8px);
  line-height: 1.46;
  font-weight: 475;
  text-shadow: 0 1px 5px rgba(255,255,255,0.62), 0 0 8px rgba(228,247,255,0.28);
}

/* Slightly stronger text support only when the very faint body-haze layer is tested. */
body[data-shell-variant="body"] .left-shell-test-title,
body[data-shell-variant="body"] .left-shell-test-description,
body[data-shell-variant="body"] .left-shell-test-label {
  text-shadow: 0 1px 6px rgba(255,255,255,0.72), 0 0 10px rgba(232,248,255,0.44);
}

.left-shell-test-micrograph {
  position: absolute;
  right: 19.4%;
  top: 20.2%;
  width: 13.5%;
  height: 8.8%;
  opacity: .68;
}
.left-shell-test-micrograph::before {
  content: "";
  position: absolute;
  inset: 18% 0 0 0;
  background: linear-gradient(90deg, rgba(82,176,229,.20) 1px, transparent 1px) 0 0 / 12% 100%, linear-gradient(180deg, rgba(82,176,229,.15) 1px, transparent 1px) 0 0 / 100% 22%;
  border-radius: 5px;
}
.left-shell-test-micrograph i {
  position: absolute;
  bottom: 18%;
  left: 0;
  width: 100%;
  height: 42%;
  border-bottom: 1px solid rgba(97,190,232,.52);
  transform-origin: left bottom;
  clip-path: polygon(0 78%, 10% 69%, 20% 72%, 31% 52%, 45% 60%, 56% 35%, 70% 44%, 84% 22%, 100% 30%, 100% 100%, 0 100%);
  opacity: .55;
}
.left-shell-test-micrograph i:nth-child(2) { transform: translateY(-2px) scaleY(.64); opacity: .24; }
.left-shell-test-micrograph i:nth-child(3) { transform: translateY(3px) scaleY(.38); opacity: .18; }

.left-shell-test-icon-layer {
  position: absolute;
  left: 28.1%;
  top: 33.6%;
  width: 22.5%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.left-shell-test-robot {
  width: 76%;
  height: 76%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(72, 185, 255, 0.24));
}
.left-shell-test-orbit path {
  stroke: rgba(69, 171, 255, 0.72);
  stroke-width: 2.15;
  stroke-dasharray: 34 18 6 15;
  opacity: .68;
}
.left-shell-test-arm-part,
.left-shell-test-arm-tool { fill: url(#leftShellTestArm); }
.left-shell-test-arm-shadow { fill: rgba(39, 91, 170, 0.27); }
.left-shell-test-arm-joint { fill: url(#leftShellTestJoint); stroke: rgba(255,255,255,.72); stroke-width: 2; }
.left-shell-test-arm-core { fill: #f8feff; opacity: .92; }

.left-shell-test-cta-visual {
  position: absolute;
  left: 61.0%;
  top: 72.3%;
  width: 19.8%;
  height: 7.4%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(35, 76, 190, 0.94);
  font-size: clamp(10px, .86vw, 14px);
  font-weight: 610;
  letter-spacing: .01em;
  text-shadow: 0 1px 5px rgba(255,255,255,.40);
}
.left-shell-test-cta-visual b { font-size: 1.18em; font-weight: 560; line-height: 1; }

.left-shell-test-cta-hitbox {
  position: absolute;
  left: 60.1%;
  top: 71.1%;
  width: 21.6%;
  height: 9.4%;
  border-radius: 16px;
  pointer-events: auto;
  opacity: 0;
  background: transparent;
  outline-offset: 4px;
}
.left-shell-test-cta-hitbox:focus-visible {
  opacity: 1;
  outline: 2px solid rgba(62, 127, 255, .65);
  background: rgba(92, 168, 255, .05);
}

body[data-devtools="off"] .dev-time-controls {
  display: none !important;
  visibility: hidden !important;
}

/* Clean screenshot mode hides only internal validation controls, not the menu animation. */
body.clean-screenshot .dev-time-controls,
body.clean-screenshot .scene-debug-panel,
body.clean-screenshot .debug-panel,
body.clean-screenshot .layer-debug-panel,
body.clean-screenshot [data-debug-panel],
body.clean-screenshot [data-layer-debug],
body.clean-screenshot .debug-controls {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 1180px) {
  .left-shell-test-card-stage { left: 68px; top: 184px; width: 510px; }
}


/* --------------------------------------------------------------------------
   NL03.3 — Frame-only LEFT shell integration test
   Asset: neo_lens_glass_card_SHELL_ALPHA.png
   Purpose: use PNG only as the optical frame layer and test separate HTML/CSS
   placeholders for internal HUD circle, CTA, labels, and readable content.
---------------------------------------------------------------------------- */
body[data-shell-variant="frame"] .left-shell-test-image--final,
body[data-shell-variant="frame"] .left-shell-test-image--body,
body[data-shell-variant="frame"] .left-shell-test-image--corrected { opacity: 0 !important; }

body[data-shell-variant="frame"] .left-shell-test-image--frame {
  opacity: 1 !important;
  filter:
    drop-shadow(0 12px 22px rgba(10, 38, 82, 0.10))
    drop-shadow(0 0 8px rgba(80, 210, 255, 0.10));
}

body.frame-only-shell-test .left-shell-test-card-stage {
  width: clamp(600px, 38.3vw, 650px);
}

body[data-frame-placement="top-left"] .left-shell-test-card-stage {
  left: clamp(58px, 4.0vw, 80px);
  top: clamp(118px, 13.0vh, 142px);
}

body[data-frame-placement="back-left"] .left-shell-test-card-stage {
  left: clamp(70px, 4.6vw, 92px);
  top: clamp(370px, 39.6vh, 410px);
  width: clamp(560px, 35.0vw, 610px);
}

body[data-shell-variant="frame"] .left-shell-test-content {
  color: rgba(12, 33, 82, 0.92);
}

/* Re-map content to the true transparent center of the frame-only asset. */
body[data-shell-variant="frame"] .left-shell-test-label--agent { left: 16.4%; top: 19.3%; }
body[data-shell-variant="frame"] .left-shell-test-label--active { right: 18.7%; top: 19.3%; }
body[data-shell-variant="frame"] .left-shell-test-title {
  left: 16.3%;
  top: 25.3%;
  font-size: clamp(15px, 1.20vw, 22px);
  letter-spacing: .118em;
  color: rgba(18, 46, 124, 0.95);
  text-shadow: 0 1px 4px rgba(255,255,255,.68), 0 0 7px rgba(235,250,255,.34);
}
body[data-shell-variant="frame"] .left-shell-test-description {
  left: 50.7%;
  top: 39.0%;
  width: 28.5%;
  color: rgba(17, 42, 86, 0.86);
  font-size: clamp(9px, .68vw, 12.4px);
  line-height: 1.46;
  text-shadow: 0 1px 5px rgba(255,255,255,.76), 0 0 9px rgba(230,248,255,.34);
}
body[data-frame-placement="back-left"] .left-shell-test-title {
  font-size: clamp(13px, 1.02vw, 19px);
}
body[data-frame-placement="back-left"] .left-shell-test-description {
  font-size: clamp(8px, .62vw, 11.2px);
}

body[data-shell-variant="frame"] .left-shell-test-micrograph {
  right: 17.8%;
  top: 27.0%;
  width: 12.7%;
  height: 7.2%;
  opacity: .42;
}

/* The PNG has no HUD chamber; this is intentionally a temporary CSS placeholder. */
body[data-shell-variant="frame"] .left-shell-test-icon-layer {
  left: 18.0%;
  top: 38.0%;
  width: 18.6%;
}
body[data-shell-variant="frame"] .left-shell-test-robot { display: none !important; }
body[data-shell-variant="frame"] .left-shell-frame-hud-placeholder {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 1px solid rgba(63, 181, 232, .42);
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,.028),
    inset 0 0 0 23px rgba(61,181,255,.035),
    0 0 12px rgba(72,198,255,.10);
  background:
    radial-gradient(circle at 48% 45%, rgba(255,255,255,.16), transparent 41%),
    repeating-conic-gradient(from 10deg, rgba(55,170,255,.36) 0 7deg, transparent 7deg 19deg);
  -webkit-mask: radial-gradient(circle, transparent 0 50%, #000 51% 53%, transparent 54% 63%, #000 64% 66%, transparent 67% 100%);
          mask: radial-gradient(circle, transparent 0 50%, #000 51% 53%, transparent 54% 63%, #000 64% 66%, transparent 67% 100%);
  opacity: .64;
}
body[data-shell-variant="frame"] .left-shell-frame-hud-placeholder::after {
  content: "";
  position: absolute;
  inset: 29%;
  border-radius: 50%;
  border: 1px solid rgba(18, 58, 128, .18);
  background: rgba(230, 249, 255, .035);
}

/* The PNG has no CTA capsule; this is a temporary CSS placeholder and hitbox alignment proof. */
body[data-shell-variant="frame"] .left-shell-test-cta-visual {
  left: 56.4%;
  top: 68.3%;
  width: 21.5%;
  height: 9.2%;
  border: 1px solid rgba(77, 172, 235, .36);
  border-radius: 999px;
  background: rgba(238, 250, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 8px rgba(67,181,236,.08);
  color: rgba(33, 77, 190, 0.90);
}
body[data-shell-variant="frame"] .left-shell-test-cta-hitbox {
  left: 56.0%;
  top: 67.8%;
  width: 22.4%;
  height: 10.4%;
}

body[data-shell-variant="frame"] .left-shell-test-label {
  font-size: clamp(7px, .52vw, 9px);
  text-shadow: 0 1px 5px rgba(255,255,255,.64);
}

/* Reduce the placeholder layer slightly for back-left so it reads as secondary. */
body[data-frame-placement="back-left"] .left-shell-test-content {
  transform: scale(.94);
  transform-origin: 48% 48%;
}

@media (max-width: 1180px) {
  body.frame-only-shell-test .left-shell-test-card-stage { width: 570px; }
  body[data-frame-placement="top-left"] .left-shell-test-card-stage { left: 54px; top: 126px; }
  body[data-frame-placement="back-left"] .left-shell-test-card-stage { left: 64px; top: 370px; width: 540px; }
}