@layer legacy {
/* AIOS liquid glass — pronounced frosted-glass treatment layered on top of
   aios-design-system.css. Every value here reads the --aios-glass-* tokens
   defined in aios-design-system.css (which already flip with the active
   theme), so glass never drifts out of sync with the rest of the palette
   the way separate hand-tuned palettes used to.

   Every rule below is scoped under #app (the app's single mount point, see
   client-app.js `app()`), not just loaded last. aios-chatgpt-refine.css and
   aios-mobile-final.css are full of compound selectors like
   `.app-shell.chat-shell .claude-composer` (3 classes) that otherwise beat
   a plain `.claude-composer` on specificity regardless of file order. An ID
   prefix outranks any number of classes, so #app-scoped rules always win
   without having to chase every competing selector individually. */

/* ---------- Application field ---------- */
/* The shell must sit on one token-driven canvas. Body-level blooms made the
   exposed edges around navigation look like a separate page, especially when
   a sidebar was transitioning or a viewport ended below its content. Glass
   depth comes from the controls themselves, never from a competing page bg. */
html,
html[data-theme],
body,
body[data-theme],
body[data-theme="light"],
body[data-theme="dark"],
#app {
  min-height: 100%;
  background: var(--aios-bg) !important;
  background-image: none !important;
}

body,
body[data-theme],
body[data-theme="light"],
body[data-theme="dark"] {
  min-height: 100dvh;
}

/* Some legacy views supplied a blue page gradient on their own shell or
   content container. Keep the actual canvas token-only so an exposed edge
   around a rounded navigation rail is always the same page color. */
#app .app-shell,
#app .app-shell > .main,
#app .app-shell > .main > .content {
  background-color: var(--aios-bg) !important;
  background-image: none !important;
}

/* ---------- Core glass surfaces ---------- */
/* Large single containers get the full blur; small/repeated elements get
   the softer blur so many of them on one page stays cheap to composite. */

/* Elements inside .app-shell get an extra .app-shell in the selector: legacy
   files target them via compound selectors like `.app-shell > .sidebar` or
   `.app-shell.chat-shell .claude-composer` (2-3 classes), which otherwise
   tie or beat a plain `#app .sidebar` (ID + 1 class) on specificity. Adding
   .app-shell here matches or exceeds that, and liquid-glass.css loading
   last wins any remaining tie. */
#app .app-shell .sidebar,
#app .app-shell .desktop-sidebar,
#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 {
  border: 1px solid var(--aios-glass-border) !important;
  /* Diagonal sheen over the tint: light enters top-left, falls off bottom-right */
  background:
    linear-gradient(152deg,
      rgba(255, 255, 255, var(--aios-glass-sheen-a)) 0%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0) 82%,
      rgba(255, 255, 255, calc(var(--aios-glass-sheen-a) * 0.4)) 100%),
    rgba(var(--aios-glass-tint), var(--aios-glass-surface-a-strong)) !important;
  /* specular top edge + inner light rim + contact/ambient depth */
  box-shadow:
    inset 0 1px 0 var(--aios-glass-highlight),
    inset 0 0 0 1px var(--aios-glass-rim),
    var(--aios-glass-shadow) !important;
  backdrop-filter: var(--aios-glass-blur) !important;
  -webkit-backdrop-filter: var(--aios-glass-blur) !important;
}

/* Navigation keeps the established rounded right edge. Its exposed corners
   sit over the same tokenized canvas as the page, not a competing gradient. */
#app .app-shell > .sidebar,
#app .app-shell > .desktop-sidebar {
  border: 1px solid var(--aios-border) !important;
  border-right: 1px solid var(--aios-border) !important;
  border-radius: 0 var(--aios-radius-xl) var(--aios-radius-xl) 0 !important;
  background: var(--aios-sidebar-bg) !important;
  box-shadow: 8px 0 24px rgba(24, 32, 56, 0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (min-width: 821px) {
  #app .app-shell > .sidebar,
  #app .app-shell > .desktop-sidebar {
    top: 12px !important;
    height: calc(100dvh - 24px) !important;
  }
}

#app .modal-backdrop {
  background: color-mix(in srgb, var(--aios-bg) 55%, transparent) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Mid-tier glass: the handful of large content containers per page keep a
   soft real blur. Repeated small elements (list rows, chips, citations…)
   are handled in the next block WITHOUT backdrop-filter — each blur is a
   live compositing layer, and a dashboard can render hundreds of rows, so
   blurring them all brings the renderer to its knees. They keep the tint,
   sheen and rim, and since they sit on blurred panels they still read as
   part of the same glass. */
#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 {
  border: 1px solid var(--aios-glass-border) !important;
  background:
    linear-gradient(152deg,
      rgba(255, 255, 255, calc(var(--aios-glass-sheen-a) * 0.7)) 0%,
      rgba(255, 255, 255, 0) 42%),
    rgba(var(--aios-glass-tint), var(--aios-glass-surface-a)) !important;
  box-shadow:
    inset 0 1px 0 var(--aios-glass-highlight),
    inset 0 0 0 1px var(--aios-glass-rim),
    var(--aios-glass-shadow-tight) !important;
  backdrop-filter: var(--aios-glass-blur-soft) !important;
  -webkit-backdrop-filter: var(--aios-glass-blur-soft) !important;
  transition: box-shadow var(--aios-normal) ease, transform var(--aios-normal) cubic-bezier(.2,.8,.2,1), border-color var(--aios-normal) ease;
}

/* Repeated small glass elements: tint + sheen + rim, no blur (see above). */
#app .list-item,
#app .status-tile,
#app .hero-stat,
#app .school-chip,
#app .role-button,
#app .message-body,
#app .chat-message .message-body,
#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 {
  border: 1px solid var(--aios-glass-border) !important;
  background:
    linear-gradient(152deg,
      rgba(255, 255, 255, calc(var(--aios-glass-sheen-a) * 0.7)) 0%,
      rgba(255, 255, 255, 0) 42%),
    rgba(var(--aios-glass-tint), calc(var(--aios-glass-surface-a) + 0.14)) !important;
  box-shadow:
    inset 0 1px 0 var(--aios-glass-highlight),
    inset 0 0 0 1px var(--aios-glass-rim),
    var(--aios-glass-shadow-tight) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: box-shadow var(--aios-normal) ease, transform var(--aios-normal) cubic-bezier(.2,.8,.2,1), border-color var(--aios-normal) ease;
}

/* AI responses stay flush with the conversation surface. Outer glass shadows
   can be clipped into dark corner artifacts by the scrolling message rail. */
#app .chat-message.ai .message-body {
  box-shadow:
    inset 0 1px 0 var(--aios-glass-highlight),
    inset 0 0 0 1px var(--aios-glass-rim) !important;
  background-clip: padding-box !important;
}

/* Interactive glass cards lift toward the light on hover — the depth cue is
   what sells the material as a floating pane rather than a painted box. */
#app .metric:hover,
#app .mini-card:hover,
#app .role-button:hover,
#app .list-item:hover,
#app .aios-confirmation-card:hover,
#app .provider-circuit:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--aios-accent) 22%, var(--aios-glass-border)) !important;
  box-shadow:
    inset 0 1px 0 var(--aios-glass-highlight),
    inset 0 0 0 1px var(--aios-glass-rim),
    var(--aios-glass-shadow) !important;
}

#app .table-wrap {
  overflow: auto;
}

#app table {
  border-collapse: collapse;
}

#app th {
  background: rgba(var(--aios-glass-tint), 0.4) !important;
  color: var(--aios-text-muted) !important;
}

/* Interactive controls: glass instead of flat fill, so buttons read as the
   same material as the surfaces they sit on. .nav-item is deliberately
   excluded here — it must stay transparent at rest so .active is the one
   clearly highlighted item in the list (docs/design/components.md). */

/* Controls: translucent glass tint without per-element blur (perf — dozens
   of buttons/badges per page; they sit on blurred panes anyway). */
#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 {
  border: 1px solid var(--aios-glass-border) !important;
  background: rgba(var(--aios-glass-tint), calc(var(--aios-glass-surface-a) + 0.14)) !important;
  color: var(--aios-text) !important;
  box-shadow: inset 0 1px 0 var(--aios-glass-rim) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* .suggestion-card sits directly on the flat page background on the welcome
   screen (not over a blurred pane like the rest of this glass-tint group),
   so the shared translucent-white-on-white treatment above is invisible in
   light theme. Give it its own self-sufficient contrast. */
#app .suggestion-card {
  border-color: var(--aios-border) !important;
  background: var(--aios-surface) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

#app .nav-item {
  border-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#app .nav-item:hover {
  background: rgba(var(--aios-glass-tint), var(--aios-glass-surface-a)) !important;
}

#app .secondary:hover,
#app .ghost:hover,
#app .icon-button:hover,
#app .tool-menu-action:hover {
  background: rgba(var(--aios-glass-tint), var(--aios-glass-surface-a-strong)) !important;
}

#app .nav-item.active,
#app .mobile-menu-item.active {
  border-color: transparent !important;
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, var(--aios-accent), var(--aios-accent-strong)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#app .primary {
  border: 1px solid transparent;
  /* Glossy accent glass: same specular-top treatment as the tinted panes */
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 48%),
    linear-gradient(135deg, var(--aios-accent), var(--aios-accent-strong)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 1px 3px color-mix(in srgb, var(--aios-accent) 40%, transparent),
    0 10px 24px color-mix(in srgb, var(--aios-accent) 30%, transparent);
}

#app .primary:hover {
  filter: brightness(1.05);
}

#app .primary:active {
  filter: brightness(0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 12px color-mix(in srgb, var(--aios-accent) 28%, transparent) !important;
}

#app .badge.ok,
#app .cloud-sync.ok {
  color: var(--aios-success) !important;
  background: color-mix(in srgb, var(--aios-success) 16%, rgba(var(--aios-glass-tint), var(--aios-glass-surface-a))) !important;
  border-color: color-mix(in srgb, var(--aios-success) 40%, var(--aios-glass-border)) !important;
}

#app .badge.warn,
#app .cloud-sync.warn {
  color: var(--aios-warning) !important;
  background: color-mix(in srgb, var(--aios-warning) 16%, rgba(var(--aios-glass-tint), var(--aios-glass-surface-a))) !important;
  border-color: color-mix(in srgb, var(--aios-warning) 40%, var(--aios-glass-border)) !important;
}

#app .badge.hot {
  color: var(--aios-danger) !important;
  background: color-mix(in srgb, var(--aios-danger) 16%, rgba(var(--aios-glass-tint), var(--aios-glass-surface-a))) !important;
  border-color: color-mix(in srgb, var(--aios-danger) 40%, var(--aios-glass-border)) !important;
}

#app .hero-panel {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--aios-accent) 94%, transparent), color-mix(in srgb, var(--aios-accent-strong) 86%, transparent)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 18px 44px color-mix(in srgb, var(--aios-accent) 26%, transparent) !important;
}

#app input,
#app select,
#app textarea {
  background: rgba(var(--aios-glass-tint), calc(var(--aios-glass-surface-a) + 0.14)) !important;
  border-color: var(--aios-glass-border) !important;
  box-shadow: inset 0 1px 0 var(--aios-glass-rim) !important;
}

#app input:focus,
#app select:focus,
#app textarea:focus {
  background: rgba(var(--aios-glass-tint), var(--aios-glass-surface-a-strong)) !important;
  border-color: color-mix(in srgb, var(--aios-accent) 55%, var(--aios-glass-border)) !important;
  box-shadow: 0 0 0 4px var(--aios-accent-soft) !important;
  outline: none;
}

/* The composer textarea lives inside the glass pill, so the generic glass
   input frame above draws a second box around the field. Keep it frameless —
   the pill is the only surface. ID-scoped to outrank `#app textarea`. */
#app .app-shell .claude-composer textarea,
#app .app-shell .claude-composer textarea:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Radius scale — keeps every glass surface on the same rounding rhythm
   instead of a different value per selector. */

#app .panel,
#app .metric,
#app .mini-card,
#app .table-wrap,
#app .list-item,
#app .role-button,
#app .status-tile,
#app .lane,
#app .auth-card,
#app .hero-panel,
#app .studio-card,
#app .quiz-studio .quiz-question-card {
  border-radius: var(--aios-radius-lg) !important;
}

#app .modal,
#app .app-shell .aios-chat-sidebar,
#app .app-shell .claude-composer,
#app .composer-tools-popover,
#app .resource-mention-menu,
#app .mobile-menu-sheet,
#app .simple-login-card {
  border-radius: var(--aios-radius-xl) !important;
}

#app .badge,
#app .status-pill,
#app .cloud-sync,
#app .suggestion-card,
#app .attachment-chip,
#app .aios-quality {
  border-radius: var(--aios-radius-pill) !important;
}

#app .app-shell .claude-composer {
  backdrop-filter: var(--aios-glass-blur) !important;
  -webkit-backdrop-filter: var(--aios-glass-blur) !important;
}

#app .app-shell .claude-composer:focus-within {
  background: rgba(var(--aios-glass-tint), var(--aios-glass-surface-a-strong)) !important;
}

#app .aios-chat-messages {
  background:
    linear-gradient(180deg, rgba(var(--aios-glass-tint), 0.16), transparent 140px) !important;
}

#app .brand-mark.aios-logo-mark,
#app .mobile-shell-brand .brand-mark.aios-logo-mark {
  /* Was a blue drop-shadow that rendered as a soft glowing background box behind
     the logo. Removed so the wordmark colours match the surface exactly. */
  filter: none;
}

/* ---------- No-backdrop-filter fallback ---------- */
/* Keeps every surface legible (opaque) on engines without backdrop-filter,
   instead of leaving a translucent panel with no blur underneath it. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #app .sidebar,
  #app .desktop-sidebar,
  #app .aios-chat-sidebar,
  #app .aios-chat-topbar,
  #app .topbar,
  #app .modal,
  #app .claude-composer,
  #app .composer-tools-popover,
  #app .resource-mention-menu,
  #app .mobile-menu-sheet,
  #app .mobile-shell-header,
  #app .simple-login-card,
  #app .panel,
  #app .card,
  #app .metric,
  #app .mini-card,
  #app .table-wrap,
  #app .list-item,
  #app .status-tile,
  #app .role-button,
  #app .lane,
  #app .auth-card,
  #app .secondary,
  #app .ghost,
  #app .icon-button,
  #app .nav-item,
  #app .suggestion-card,
  #app input,
  #app select,
  #app textarea {
    background: var(--aios-surface) !important;
  }

  body {
    background: var(--aios-bg) !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  #app .metric-grid,
  #app .card-grid,
  #app .split,
  #app .ai-control-grid,
  #app .advanced-grid,
  #app .status-strip {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  #app .simple-login-card {
    border-radius: var(--aios-radius-lg) !important;
  }

  #app .app-shell.chat-shell .content:has(.aios-chat-app) {
    padding: 0 !important;
  }

  #app .app-shell.chat-shell .aios-chat-app,
  #app .app-shell.chat-shell .aios-chat-app.chat-roomy {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #app .app-shell.chat-shell .aios-chat-main,
  #app .app-shell.chat-shell .aios-chat-sidebar,
  #app .app-shell.chat-shell .claude-composer {
    border-radius: 0 !important;
  }

  #app .app-shell.chat-shell .claude-composer {
    border-radius: var(--aios-radius-xl) !important;
  }
}
}