/* ===========================================================================
   StudyFlow — Glass Morphism layer
   Loaded AFTER redesign.css. Reintroduces a consistent frosted-glass treatment
   across app chrome and surfaces. Built for the "Midnight Aurora" palette:
   vivid indigo / violet / cyan glows bloom behind soft frosted panes so the
   glass reads as depth, not flat colour.

   Principles applied (typeui fundamentals):
     - Depth & layering: glass surfaces sit above the ambient gradient body.
     - Contrast: text stays on solid ink/muted over tinted glass; no text is
       placed on the heaviest blur where opacity could drop below AA.
     - Nested radius: inner controls keep outer-gap radii; glass only wraps.
     - Motion safety: prefers-reduced-motion disables the ambient animation
       and leaves blur untouched (blur is static, not animated).
     - Focus preserved: never touches :focus-visible; glass rings still show.
   =========================================================================== */

/* --- Aurora ambient background (vivid colour for the glass to blur) --- */
body {
  background:
    radial-gradient(56% 42% at 9% -6%, rgba(139, 92, 246, 0.20), transparent 60%),
    radial-gradient(46% 38% at 104% 4%, rgba(20, 184, 166, 0.18), transparent 62%),
    radial-gradient(60% 48% at 55% 118%, rgba(74, 91, 212, 0.16), transparent 62%),
    radial-gradient(40% 34% at 92% 88%, rgba(229, 87, 107, 0.08), transparent 60%),
    var(--paper) !important;
  background-attachment: fixed !important;
}

[data-theme="dark"] body {
  background:
    radial-gradient(58% 44% at 9% -6%, rgba(139, 92, 246, 0.30), transparent 62%),
    radial-gradient(48% 40% at 104% 4%, rgba(34, 211, 198, 0.24), transparent 62%),
    radial-gradient(60% 50% at 55% 118%, rgba(124, 92, 246, 0.24), transparent 62%),
    radial-gradient(42% 36% at 90% 86%, rgba(229, 87, 107, 0.12), transparent 60%),
    var(--paper) !important;
  background-attachment: fixed !important;
}

/* ===========================================================================
   Glass tokens (Midnight Aurora, light + dark)
   =========================================================================== */
:root {
  --gm-bg: rgba(250, 251, 255, 0.46);          /* frosted, lighter tint */
  --gm-bg-strong: rgba(250, 251, 255, 0.70);   /* frosted, more opaque */
  --gm-border: rgba(255, 255, 255, 0.70);
  --gm-blur: 28px;
  --gm-blur-soft: 22px;
  --gm-saturate: 1.7;
  --gm-saturate-soft: 1.5;
  --gm-shadow: 0 1px 0 rgba(255,255,255,0.75) inset,
               0 12px 36px rgba(53, 67, 168, 0.16);
}
[data-theme="dark"] {
  --gm-bg: rgba(22, 26, 46, 0.42);
  --gm-bg-strong: rgba(22, 26, 46, 0.68);
  --gm-border: rgba(255, 255, 255, 0.12);
  --gm-blur: 30px;
  --gm-blur-soft: 24px;
  --gm-saturate: 1.7;
  --gm-saturate-soft: 1.5;
  --gm-shadow: 0 1px 0 rgba(255,255,255,0.08) inset,
               0 14px 42px rgba(0, 0, 0, 0.52);
}

/* --- Top bar: keep the portal on scroll, strengthen the frosted edge --- */
.topbar {
  background: var(--gm-bg-strong) !important;
  backdrop-filter: blur(var(--gm-blur)) saturate(var(--gm-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--gm-blur)) saturate(var(--gm-saturate)) !important;
  border-bottom: 1px solid var(--gm-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,
              0 6px 24px rgba(53, 67, 168, 0.10);
}
[data-theme="dark"] .topbar {
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
              0 6px 26px rgba(0,0,0,0.34);
}

/* --- Centred nav pill: frosted instead of solid --- */
.topnav {
  background: var(--gm-bg) !important;
  border-color: var(--gm-border) !important;
  backdrop-filter: blur(var(--gm-blur-soft)) saturate(var(--gm-saturate-soft)) !important;
  -webkit-backdrop-filter: blur(var(--gm-blur-soft)) saturate(var(--gm-saturate-soft)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
              0 8px 26px rgba(53, 67, 168, 0.12);
}
[data-theme="dark"] .topnav {
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset,
              0 8px 28px rgba(0,0,0,0.38);
}

/* --- Side rail: reintroduce frosted glass over the ambient gradient --- */
.side {
  background: color-mix(in srgb, var(--gm-bg) 96%, var(--paper)) !important;
  backdrop-filter: blur(var(--gm-blur)) saturate(var(--gm-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--gm-blur)) saturate(var(--gm-saturate)) !important;
  border-right: 1px solid var(--gm-border) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,0.35) inset;
}
[data-theme="dark"] .side {
  background: var(--gm-bg) !important;
  border-right-color: var(--gm-border) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,0.04) inset;
}

/* --- Content surfaces redesign.css had flattened back to solid ---
       Re-introduce glass so the layered surfaces read as one frosted system. --- */
.study-subjects article,
.attention,
.recommend,
.study-intro,
.panel,
.calendar,
.toolbar,
.tabs,
.gemini-ask,
.event-row button,
.metrics article,
.card,
.ring-card,
.history-card,
.chart-card,
.streak-card,
.plan article,
.weekly-review,
.gemini-dock,
.install-card,
.account-summary {
  background: var(--gm-bg) !important;
  border-color: var(--gm-border) !important;
  backdrop-filter: blur(var(--gm-blur-soft)) saturate(var(--gm-saturate-soft)) !important;
  -webkit-backdrop-filter: blur(var(--gm-blur-soft)) saturate(var(--gm-saturate-soft)) !important;
  box-shadow: var(--gm-shadow) !important;
}
[data-theme="dark"] .study-subjects article,
[data-theme="dark"] .attention,
[data-theme="dark"] .recommend,
[data-theme="dark"] .study-intro,
[data-theme="dark"] .panel,
[data-theme="dark"] .calendar,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .tabs,
[data-theme="dark"] .gemini-ask,
[data-theme="dark"] .event-row button,
[data-theme="dark"] .metrics article,
[data-theme="dark"] .card,
[data-theme="dark"] .ring-card,
[data-theme="dark"] .history-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .streak-card,
[data-theme="dark"] .plan article,
[data-theme="dark"] .weekly-review,
[data-theme="dark"] .gemini-dock,
[data-theme="dark"] .install-card,
[data-theme="dark"] .account-summary {
  background: var(--gm-bg) !important;
  border-color: var(--gm-border) !important;
  box-shadow: var(--gm-shadow) !important;
}

/* --- Modals & sheets: float above the page on frosted glass --- */
dialog,
.modal,
[class$="-modal"] {
  background: var(--gm-bg-strong) !important;
  backdrop-filter: blur(var(--gm-blur)) saturate(var(--gm-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--gm-blur)) saturate(var(--gm-saturate)) !important;
  border: 1px solid var(--gm-border) !important;
  box-shadow: var(--gm-shadow);
}
[data-theme="dark"] dialog,
[data-theme="dark"] .modal,
[data-theme="dark"] [class$="-modal"] {
  background: var(--gm-bg-strong) !important;
  border-color: var(--gm-border) !important;
}

/* --- Feather inputs into the frosted system so they don't look pasted on --- */
input,
select,
textarea {
  background: color-mix(in srgb, var(--gm-bg-strong) 55%, transparent) !important;
  border-color: var(--gm-border) !important;
  backdrop-filter: blur(6px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.3) !important;
}

/* --- Hover lift keeps the glass feeling alive --- */
.study-subjects article:hover,
.recommend:hover,
.metric-card:hover,
.panel:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset,
              0 18px 44px rgba(53, 67, 168, 0.22) !important;
}
[data-theme="dark"] .study-subjects article:hover,
[data-theme="dark"] .recommend:hover,
[data-theme="dark"] .metric-card:hover,
[data-theme="dark"] .panel:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset,
              0 20px 48px rgba(0,0,0,0.6) !important;
}

/* --- Accessibility / motion safety --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}