@layer legacy {
/*
 * AIOS Liquid Glass V2 — transparency calibration
 * Loaded last so the optical system reads as clear glass rather than an
 * opaque frosted card. The lower tint and blur values reveal the ambient
 * field and nearby content while keeping text contrast and GPU cost stable.
 */

:root {
  --aios-lg-canvas-blue: rgba(66, 132, 255, 0.18);
  --aios-lg-canvas-violet: rgba(142, 92, 246, 0.12);
  --aios-lg-canvas-cyan: rgba(62, 214, 255, 0.10);

  --aios-lg-surface: rgba(255, 255, 255, 0.28);
  --aios-lg-surface-strong: rgba(255, 255, 255, 0.40);
  --aios-lg-surface-control: rgba(255, 255, 255, 0.34);
  --aios-lg-surface-solid: rgba(255, 255, 255, 0.88);

  --aios-lg-specular: rgba(255, 255, 255, 0.72);
  --aios-lg-specular-soft: rgba(255, 255, 255, 0.18);
  --aios-lg-edge: rgba(255, 255, 255, 0.54);
  --aios-lg-edge-low: rgba(91, 155, 255, 0.20);
  --aios-lg-pointer: rgba(255, 255, 255, 0.34);
  --aios-lg-accent-light: rgba(47, 124, 246, 0.12);

  --aios-lg-filter-strong: blur(16px) saturate(152%) contrast(102%) brightness(102%);
  --aios-lg-filter-panel: blur(11px) saturate(145%) contrast(101%);
  --aios-lg-filter-mobile: blur(10px) saturate(142%) contrast(101%);
}

[data-theme="dark"],
body.dark-mode,
.dark-mode {
  --aios-lg-canvas-blue: rgba(68, 129, 255, 0.24);
  --aios-lg-canvas-violet: rgba(151, 94, 255, 0.16);
  --aios-lg-canvas-cyan: rgba(56, 205, 255, 0.11);

  --aios-lg-surface: rgba(25, 28, 36, 0.30);
  --aios-lg-surface-strong: rgba(28, 31, 40, 0.43);
  --aios-lg-surface-control: rgba(35, 38, 48, 0.40);
  --aios-lg-surface-solid: rgba(39, 42, 51, 0.88);

  --aios-lg-specular: rgba(255, 255, 255, 0.16);
  --aios-lg-specular-soft: rgba(255, 255, 255, 0.055);
  --aios-lg-edge: rgba(255, 255, 255, 0.15);
  --aios-lg-edge-low: rgba(100, 158, 255, 0.24);
  --aios-lg-inner-dark: rgba(0, 0, 0, 0.20);
  --aios-lg-pointer: rgba(255, 255, 255, 0.12);
  --aios-lg-accent-light: rgba(91, 155, 255, 0.16);

  --aios-lg-filter-strong: blur(17px) saturate(150%) contrast(104%) brightness(96%);
  --aios-lg-filter-panel: blur(12px) saturate(142%) contrast(103%) brightness(97%);
  --aios-lg-filter-mobile: blur(10px) saturate(138%) contrast(102%) brightness(97%);
}

/* The navigation rail was still effectively opaque because 88% of the old
   sidebar colour was mixed into it. Keep enough tint for readability, but let
   the ambient field and content genuinely pass through. */
#app .app-shell > .sidebar,
#app .app-shell > .desktop-sidebar {
  background:
    linear-gradient(105deg, var(--aios-lg-specular-soft), transparent 38%),
    color-mix(in srgb, var(--aios-sidebar-bg) 54%, transparent) !important;
  backdrop-filter: blur(15px) saturate(142%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(142%) !important;
}

/* Floating shells should feel clearer than content panels. */
#app .app-shell .aios-chat-sidebar,
#app .app-shell .aios-chat-topbar,
#app .app-shell .topbar,
#app .app-shell .claude-composer,
#app .app-shell .mobile-shell-header,
#app .modal,
#app .composer-tools-popover,
#app .resource-mention-menu,
#app .mobile-menu-sheet {
  backdrop-filter: var(--aios-lg-filter-strong) !important;
  -webkit-backdrop-filter: var(--aios-lg-filter-strong) !important;
}

/* Inputs and controls retain a slightly denser tint than large panes, but no
   longer look like solid white or charcoal blocks. */
#app input,
#app select,
#app textarea {
  background:
    linear-gradient(180deg, var(--aios-lg-specular-soft), transparent 34%),
    var(--aios-lg-surface-control) !important;
}

@media (max-width: 820px) {
  #app .app-shell > .sidebar,
  #app .app-shell > .desktop-sidebar {
    backdrop-filter: blur(10px) saturate(136%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(136%) !important;
  }
}
}