@layer legacy {
/*
 * AIOS Liquid Glass V2
 * Optical layer loaded after the canonical design system and legacy glass rules.
 * The material is built from five cues: a refractable ambient field, translucent
 * tint, local specular light, a chromatic edge and depth. Repeated rows keep blur
 * disabled so the interface remains responsive on large school dashboards.
 */

@property --aios-lg-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 18%;
}

@property --aios-lg-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --aios-lg-energy {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

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

  --aios-lg-surface: rgba(255, 255, 255, 0.56);
  --aios-lg-surface-strong: rgba(255, 255, 255, 0.72);
  --aios-lg-surface-control: rgba(255, 255, 255, 0.62);
  --aios-lg-surface-solid: rgba(255, 255, 255, 0.88);

  --aios-lg-specular: rgba(255, 255, 255, 0.82);
  --aios-lg-specular-soft: rgba(255, 255, 255, 0.34);
  --aios-lg-edge: rgba(255, 255, 255, 0.72);
  --aios-lg-edge-low: rgba(91, 155, 255, 0.18);
  --aios-lg-inner-dark: rgba(30, 45, 74, 0.07);
  --aios-lg-pointer: rgba(255, 255, 255, 0.5);
  --aios-lg-accent-light: rgba(47, 124, 246, 0.16);

  --aios-lg-filter-strong: blur(26px) saturate(178%) contrast(103%) brightness(102%);
  --aios-lg-filter-panel: blur(18px) saturate(158%) contrast(102%);
  --aios-lg-filter-mobile: blur(15px) saturate(150%) contrast(102%);

  --aios-lg-shadow-float:
    0 1px 1px rgba(17, 24, 39, 0.04),
    0 8px 24px rgba(22, 34, 58, 0.08),
    0 28px 70px rgba(22, 34, 58, 0.1);
  --aios-lg-shadow-panel:
    0 1px 1px rgba(17, 24, 39, 0.035),
    0 12px 34px rgba(22, 34, 58, 0.075);
  --aios-lg-shadow-control:
    0 1px 2px rgba(20, 31, 52, 0.06),
    0 7px 18px rgba(20, 31, 52, 0.06);
}

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

  --aios-lg-surface: rgba(31, 34, 43, 0.56);
  --aios-lg-surface-strong: rgba(34, 37, 47, 0.72);
  --aios-lg-surface-control: rgba(42, 45, 56, 0.68);
  --aios-lg-surface-solid: rgba(39, 42, 51, 0.9);

  --aios-lg-specular: rgba(255, 255, 255, 0.19);
  --aios-lg-specular-soft: rgba(255, 255, 255, 0.08);
  --aios-lg-edge: rgba(255, 255, 255, 0.18);
  --aios-lg-edge-low: rgba(100, 158, 255, 0.22);
  --aios-lg-inner-dark: rgba(0, 0, 0, 0.26);
  --aios-lg-pointer: rgba(255, 255, 255, 0.16);
  --aios-lg-accent-light: rgba(91, 155, 255, 0.2);

  --aios-lg-filter-strong: blur(28px) saturate(168%) contrast(106%) brightness(94%);
  --aios-lg-filter-panel: blur(19px) saturate(150%) contrast(105%) brightness(95%);

  --aios-lg-shadow-float:
    0 1px 1px rgba(0, 0, 0, 0.22),
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 34px 82px rgba(0, 0, 0, 0.36);
  --aios-lg-shadow-panel:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 16px 42px rgba(0, 0, 0, 0.26);
  --aios-lg-shadow-control:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 8px 22px rgba(0, 0, 0, 0.2);
}

/* A calm, low-contrast field gives the glass actual colour information to
   refract. It remains neutral enough for long reading and school dashboards. */
#app .app-shell > .main,
#app .app-shell > .main > .content {
  background-color: var(--aios-bg) !important;
  background-image:
    radial-gradient(70rem 48rem at 102% -8%, var(--aios-lg-canvas-blue), transparent 64%),
    radial-gradient(58rem 42rem at -12% 105%, var(--aios-lg-canvas-violet), transparent 67%),
    radial-gradient(42rem 30rem at 52% 108%, var(--aios-lg-canvas-cyan), transparent 70%) !important;
  background-attachment: fixed !important;
}

/* Shared optical paint. The pointer variables are updated by liquid-glass-v2.js;
   without JavaScript the highlight simply rests near the upper-left edge. */
#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,
#app .simple-login-card,
#app .simple-login-theme {
  --aios-lg-x: 18%;
  --aios-lg-y: 0%;
  --aios-lg-energy: 0;
  border: 1px solid transparent !important;
  background:
    radial-gradient(
      280px circle at var(--aios-lg-x) var(--aios-lg-y),
      color-mix(in srgb, var(--aios-lg-pointer) calc(38% + var(--aios-lg-energy) * 42%), transparent),
      transparent 68%
    ) padding-box,
    linear-gradient(118deg, var(--aios-lg-specular-soft), transparent 34%, var(--aios-lg-accent-light) 70%, transparent) padding-box,
    linear-gradient(180deg, var(--aios-lg-surface-strong), var(--aios-lg-surface)) padding-box,
    linear-gradient(145deg, var(--aios-lg-edge), rgba(255,255,255,0.05) 38%, var(--aios-lg-edge-low) 100%) border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px 0 var(--aios-lg-specular),
    inset 0 -1px 0 var(--aios-lg-inner-dark),
    inset 1px 0 0 var(--aios-lg-specular-soft),
    var(--aios-lg-shadow-float) !important;
  backdrop-filter: var(--aios-lg-filter-strong) !important;
  -webkit-backdrop-filter: var(--aios-lg-filter-strong) !important;
  transition:
    --aios-lg-x 220ms cubic-bezier(.2,.8,.2,1),
    --aios-lg-y 220ms cubic-bezier(.2,.8,.2,1),
    --aios-lg-energy 220ms ease,
    border-color var(--aios-normal) ease,
    box-shadow var(--aios-normal) ease,
    transform var(--aios-normal) cubic-bezier(.2,.8,.2,1) !important;
}

/* Mid-depth surfaces: one blur layer per meaningful region, not per row. */
#app .panel,
#app .card,
#app .metric,
#app .mini-card,
#app .table-wrap,
#app .section-band,
#app .lane,
#app .auth-card,
#app .studio-hero,
#app .quiz-student-preview {
  --aios-lg-x: 14%;
  --aios-lg-y: -8%;
  --aios-lg-energy: 0;
  border: 1px solid transparent !important;
  background:
    radial-gradient(
      240px circle at var(--aios-lg-x) var(--aios-lg-y),
      color-mix(in srgb, var(--aios-lg-pointer) calc(26% + var(--aios-lg-energy) * 34%), transparent),
      transparent 72%
    ) padding-box,
    linear-gradient(124deg, var(--aios-lg-specular-soft), transparent 38%, var(--aios-lg-accent-light) 82%) padding-box,
    var(--aios-lg-surface) padding-box,
    linear-gradient(146deg, var(--aios-lg-edge), rgba(255,255,255,0.035) 42%, var(--aios-lg-edge-low)) border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px 0 var(--aios-lg-specular),
    inset 0 -1px 0 var(--aios-lg-inner-dark),
    var(--aios-lg-shadow-panel) !important;
  backdrop-filter: var(--aios-lg-filter-panel) !important;
  -webkit-backdrop-filter: var(--aios-lg-filter-panel) !important;
  transition:
    --aios-lg-x 200ms cubic-bezier(.2,.8,.2,1),
    --aios-lg-y 200ms cubic-bezier(.2,.8,.2,1),
    --aios-lg-energy 180ms ease,
    transform var(--aios-normal) cubic-bezier(.2,.8,.2,1),
    box-shadow var(--aios-normal) ease !important;
}

/* Repeated elements use the same optical language without becoming individual
   GPU backdrop layers. */
#app .list-item,
#app .status-tile,
#app .hero-stat,
#app .school-chip,
#app .role-button,
#app .attachment-chip,
#app .aios-citations,
#app .aios-citation,
#app .aios-confirmation-card,
#app .aios-memory-item,
#app .aios-memory-control,
#app .provider-circuit,
#app .studio-card,
#app .quiz-studio .quiz-question-card,
#app .secondary,
#app .ghost,
#app .icon-button,
#app .mobile-shell-pill,
#app .mobile-menu-button,
#app .tool-menu-action,
#app .suggestion-card,
#app .badge,
#app .status-pill,
#app .cloud-sync {
  --aios-lg-x: 18%;
  --aios-lg-y: 0%;
  --aios-lg-energy: 0;
  border: 1px solid transparent !important;
  background:
    radial-gradient(
      170px circle at var(--aios-lg-x) var(--aios-lg-y),
      color-mix(in srgb, var(--aios-lg-pointer) calc(18% + var(--aios-lg-energy) * 28%), transparent),
      transparent 70%
    ) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--aios-lg-surface-control) 92%, transparent), var(--aios-lg-surface-control)) padding-box,
    linear-gradient(145deg, var(--aios-lg-edge), rgba(255,255,255,0.03) 48%, var(--aios-lg-edge-low)) border-box !important;
  background-clip: padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px 0 var(--aios-lg-specular-soft),
    inset 0 -1px 0 var(--aios-lg-inner-dark),
    var(--aios-lg-shadow-control) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    --aios-lg-x 180ms cubic-bezier(.2,.8,.2,1),
    --aios-lg-y 180ms cubic-bezier(.2,.8,.2,1),
    --aios-lg-energy 160ms ease,
    transform var(--aios-fast) cubic-bezier(.2,.8,.2,1),
    box-shadow var(--aios-fast) ease !important;
}

/* The AI response itself must stay visually light and should not look like a
   card inside a card. Only retain its inner optical edge. */
#app .chat-message.ai .message-body {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#app [data-aios-liquid-active="true"] {
  --aios-lg-energy: 1;
}

#app .metric:hover,
#app .mini-card:hover,
#app .role-button:hover,
#app .list-item:hover,
#app .aios-confirmation-card:hover,
#app .provider-circuit:hover,
#app .suggestion-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 var(--aios-lg-specular),
    inset 0 -1px 0 var(--aios-lg-inner-dark),
    0 2px 5px rgba(20, 31, 52, 0.08),
    0 18px 38px color-mix(in srgb, var(--aios-accent) 10%, transparent) !important;
}

/* Accent glass remains saturated but gains an optical top edge and a small
   moving highlight rather than a flat glossy gradient. */
#app .primary,
#app .nav-item.active,
#app .mobile-menu-item.active,
#app .chat-message.user .message-body,
#app .hero-panel {
  --aios-lg-x: 18%;
  --aios-lg-y: 0%;
  --aios-lg-energy: 0;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background:
    radial-gradient(
      190px circle at var(--aios-lg-x) var(--aios-lg-y),
      rgba(255,255,255,calc(.16 + var(--aios-lg-energy) * .18)),
      transparent 68%
    ) padding-box,
    linear-gradient(155deg, rgba(255,255,255,.2), transparent 42%) padding-box,
    linear-gradient(135deg, var(--aios-accent), var(--aios-accent-strong)) padding-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,40,112,.18),
    0 8px 22px color-mix(in srgb, var(--aios-accent) 22%, transparent) !important;
}

#app .primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.035) saturate(1.04);
}

#app .primary:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.98);
}

#app input,
#app select,
#app textarea {
  border: 1px solid color-mix(in srgb, var(--aios-lg-edge) 66%, var(--aios-border)) !important;
  background:
    linear-gradient(180deg, var(--aios-lg-specular-soft), transparent 38%),
    var(--aios-lg-surface-control) !important;
  box-shadow:
    inset 0 1px 0 var(--aios-lg-specular-soft),
    inset 0 -1px 0 var(--aios-lg-inner-dark) !important;
}

#app input:focus,
#app select:focus,
#app textarea:focus {
  border-color: color-mix(in srgb, var(--aios-accent) 58%, var(--aios-lg-edge)) !important;
  background: var(--aios-lg-surface-strong) !important;
  box-shadow:
    inset 0 1px 0 var(--aios-lg-specular),
    0 0 0 4px var(--aios-accent-soft),
    0 12px 30px color-mix(in srgb, var(--aios-accent) 10%, transparent) !important;
}

/* Sidebar remains calmer than floating content. It receives only a translucent
   body and right-edge optical separation, avoiding a large permanently blurred
   layer during chat scrolling. */
#app .app-shell > .sidebar,
#app .app-shell > .desktop-sidebar {
  border-color: transparent !important;
  border-right-color: var(--aios-lg-edge) !important;
  background:
    linear-gradient(105deg, var(--aios-lg-specular-soft), transparent 36%),
    color-mix(in srgb, var(--aios-sidebar-bg) 88%, transparent) !important;
  box-shadow:
    inset -1px 0 0 var(--aios-lg-edge-low),
    10px 0 32px rgba(22,34,58,.07) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}

/* Unsupported engines get an opaque but still polished surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #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,
  #app .simple-login-card,
  #app .panel,
  #app .card,
  #app .metric,
  #app .mini-card,
  #app .table-wrap,
  #app .section-band,
  #app .lane,
  #app .auth-card {
    background: var(--aios-lg-surface-solid) !important;
  }
}

@media (max-width: 820px) {
  #app .app-shell > .main,
  #app .app-shell > .main > .content {
    background-attachment: scroll !important;
  }

  #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,
  #app .simple-login-card,
  #app .panel,
  #app .card,
  #app .metric,
  #app .mini-card,
  #app .table-wrap,
  #app .section-band,
  #app .lane,
  #app .auth-card {
    backdrop-filter: var(--aios-lg-filter-mobile) !important;
    -webkit-backdrop-filter: var(--aios-lg-filter-mobile) !important;
  }

  #app .app-shell > .sidebar,
  #app .app-shell > .desktop-sidebar {
    backdrop-filter: blur(15px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(140%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app * {
    --aios-lg-energy: 0 !important;
  }

  #app .panel,
  #app .card,
  #app .metric,
  #app .mini-card,
  #app .list-item,
  #app .role-button,
  #app .suggestion-card,
  #app .primary {
    transition: none !important;
    transform: none !important;
  }
}
}