/* AstroNumera — Shared galaxy dark base
   Apply body.g-dark + add .g-galaxy-bg and .g-stars divs to any page */

/* ---- Force galaxy variables (overrides light/dark theme toggle) ---- */
body.g-dark {
  /* landing.css vars */
  --bg: #07060f;
  --bg2: rgba(10, 8, 26, 0.78);
  --card: rgba(24, 22, 52, 0.58);
  --text: #ece7f5;
  --text-dim: #c2bbe0;
  --border: rgba(227, 200, 132, 0.16);
  --border-h: rgba(227, 200, 132, 0.42);
  --gold: #e3c884;
  --gold-light: #f6e8bd;
  --gold-glow: rgba(227, 200, 132, 0.22);
  /* style.css vars (app/chart page) */
  --bg-body: #07060f;
  --input-bg: rgba(12, 10, 30, 0.82);
  --text-color: #ece7f5;
  --text-secondary: #c2bbe0;
  --border-color: rgba(227, 200, 132, 0.18);
  --border-strong: rgba(227, 200, 132, 0.42);
  --accent: #e3c884;
  --nav-scrolled-bg: rgba(8, 7, 18, 0.92);
  background: #07060f;
  color: #ece7f5;
  overflow-x: hidden;
}

/* ---- App/Chart page ---- */
body.g-dark .page {
  background: transparent;
}

/* ---- Fixed galaxy background layers ---- */
.g-galaxy-bg {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 80% 26%, rgba(168, 85, 247, 0.30), transparent 60%),
    radial-gradient(ellipse 42% 38% at 93% 34%, rgba(236, 72, 153, 0.22), transparent 58%),
    radial-gradient(ellipse 55% 50% at 16% 18%, rgba(99, 91, 235, 0.26), transparent 62%),
    radial-gradient(ellipse 75% 55% at 50% 102%, rgba(79, 70, 199, 0.20), transparent 72%),
    linear-gradient(180deg, #0a0822 0%, #0b0a26 38%, #08070f 100%);
}

/* ---- Twinkling stars ---- */
.g-stars {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 74% 14%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 42% 38%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.6px 1.6px at 88% 52%, rgba(255,245,220,0.85), transparent),
    radial-gradient(1px 1px at 12% 64%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.3px 1.3px at 60% 72%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 30% 88%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 92% 82%, rgba(255,250,235,0.8), transparent),
    radial-gradient(1px 1px at 50% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.2px 1.2px at 6% 42%, rgba(255,255,255,0.6), transparent);
  background-repeat: repeat;
  background-size: 540px 540px, 620px 620px, 480px 480px, 700px 700px,
                   560px 560px, 600px 600px, 520px 520px, 660px 660px,
                   580px 580px, 500px 500px;
  animation: gTwinkle 6s ease-in-out infinite alternate;
}
@keyframes gTwinkle { from { opacity: 0.65; } to { opacity: 1; } }

/* ---- Nav galaxy override ---- */
body.g-dark .l-nav {
  background: rgba(8, 7, 18, 0.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(227, 200, 132, 0.12) !important;
}
body.g-dark .l-nav.scrolled {
  background: rgba(8, 7, 18, 0.92) !important;
}
body.g-dark .l-mobile-menu {
  background: rgba(8, 7, 22, 0.97);
  border-bottom: 1px solid rgba(227, 200, 132, 0.12);
}

/* ---- About page ---- */
body.g-dark .ab-hero {
  border-bottom-color: rgba(227, 200, 132, 0.10);
  background: transparent;
}
body.g-dark .ab-body {
  background: rgba(8, 7, 22, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(227, 200, 132, 0.10);
}
body.g-dark .ab-input,
body.g-dark .ab-textarea {
  background: rgba(255,255,255,0.04);
  border-color: rgba(227, 200, 132, 0.18);
  color: #ece7f5;
}
body.g-dark .ab-input:focus,
body.g-dark .ab-textarea:focus {
  border-color: rgba(227, 200, 132, 0.50);
}
body.g-dark .l-footer {
  background: rgba(7, 6, 14, 0.75);
  border-top: 1px solid rgba(227, 200, 132, 0.10);
}

/* ---- Chat page ---- */
body.g-dark .ch-main {
  background: transparent;
}
body.g-dark .ch-sidebar {
  background: rgba(8, 7, 22, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right-color: rgba(227, 200, 132, 0.12);
}
body.g-dark .ch-footer {
  background: rgba(8, 7, 22, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top-color: rgba(227, 200, 132, 0.12);
}
body.g-dark .ch-mobile-top {
  background: rgba(8, 7, 22, 0.90);
  border-bottom-color: rgba(227, 200, 132, 0.10);
}
body.g-dark .ch-sidebar-top {
  border-bottom-color: rgba(227, 200, 132, 0.10);
}
body.g-dark .ch-new-chat {
  border-color: rgba(227, 200, 132, 0.20);
  color: #ece7f5;
}
body.g-dark .ch-new-chat:hover {
  background: rgba(227, 200, 132, 0.08);
  border-color: rgba(227, 200, 132, 0.40);
}
body.g-dark .ch-input-bar {
  background: rgba(255,255,255,0.04);
  border-color: rgba(227, 200, 132, 0.18);
}
body.g-dark .ch-input-bar:focus-within {
  border-color: rgba(227, 200, 132, 0.48);
}
body.g-dark .ch-sidebar-overlay {
  background: rgba(0, 0, 0, 0.60);
}

/* ---- Profile page ---- */
body.g-dark .pf-card {
  background: rgba(14, 12, 36, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(227, 200, 132, 0.18);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(168, 85, 247, 0.08);
}
body.g-dark .pf-divider {
  border-top-color: rgba(227, 200, 132, 0.14);
}
body.g-dark .pf-btn-secondary {
  border-color: rgba(227, 200, 132, 0.20);
  color: #c2bbe0;
}
body.g-dark .pf-btn-secondary:hover {
  border-color: #e3c884;
  color: #e3c884;
}

/* ===========================================================
   LIGHT MODE — "Dawn Celestial"
   Active when user toggles theme (no data-theme="dark").
   =========================================================== */
html:not([data-theme="dark"]) body.g-dark {
  /* landing.css vars — cards/inputs pushed to near-solid white so they read as distinct
     surfaces against the cream page background, not blend into it. */
  --bg: #f7f0e2;
  --bg2: rgba(251, 246, 234, 0.92);
  --card: #fbf6ea;
  --text: #2a2114;
  --text-dim: #5a4d37;
  --border: rgba(154, 123, 30, 0.38);
  --border-h: rgba(154, 123, 30, 0.58);
  --gold: #9a7b1e;
  --gold-light: #b8902a;
  --gold-glow: rgba(154, 123, 30, 0.22);
  /* style.css vars (app/chart page) */
  --bg-body: #f7f0e2;
  --input-bg: #fbf6ea;
  --text-color: #2a2114;
  --text-secondary: #5a4d37;
  --border-color: rgba(154, 123, 30, 0.38);
  --border-strong: rgba(154, 123, 30, 0.58);
  --accent: #9a7b1e;
  --nav-scrolled-bg: rgba(251, 246, 234, 0.95);
  background: #f7f0e2;
  color: #2a2114;
}

/* Dawn sky background — warm gold/amber wash (matches the site's actual brand palette)
   with just a faint hint of the celestial purple, instead of the cool purple/pink/blue
   blend that read as muddy against a warm cream page. */
html:not([data-theme="dark"]) .g-galaxy-bg {
  background:
    radial-gradient(ellipse 55% 45% at 80% 26%, rgba(201, 162, 39, 0.16), transparent 60%),
    radial-gradient(ellipse 42% 38% at 93% 34%, rgba(226, 156, 88, 0.13), transparent 58%),
    radial-gradient(ellipse 55% 50% at 16% 18%, rgba(168, 130, 225, 0.07), transparent 62%),
    radial-gradient(ellipse 75% 55% at 50% 102%, rgba(201, 162, 39, 0.18), transparent 72%),
    linear-gradient(180deg, #fdfaf3 0%, #f8f1e2 42%, #f2e7d2 100%);
}
html:not([data-theme="dark"]) .g-stars { display: none; }

/* App/Chart page — give .page back a visible card. app.html has its own inline
   `.page { border: none; border-radius: 0; box-shadow: none; background: var(--bg-body); }`
   (a deliberate "transparent centering wrapper" so the fixed nebula background reads as
   full-bleed) which dark mode gets away with because the vivid nebula background reads as
   "contained" on its own; light mode's flatter background exposed the missing wrapper.
   Must set border/border-radius explicitly (not just border-color) to win the cascade over
   that inline rule for those specific sub-properties. */
html:not([data-theme="dark"]) body.g-dark .page {
  background: rgba(251, 246, 234, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(154, 123, 30, 0.30);
  border-radius: 16px;
  box-shadow: 0 8px 48px rgba(120, 90, 30, 0.16), 0 0 0 1px rgba(168, 130, 225, 0.06);
}

/* Nav — light translucent + dark medallion behind emblem */
html:not([data-theme="dark"]) body.g-dark .l-nav {
  background: rgba(251, 246, 234, 0.82) !important;
  border-bottom: 1px solid rgba(154, 123, 30, 0.24) !important;
}
html:not([data-theme="dark"]) body.g-dark .l-nav.scrolled {
  background: rgba(251, 246, 234, 0.96) !important;
}
html:not([data-theme="dark"]) body.g-dark .l-mobile-menu {
  background: rgba(251, 246, 234, 0.99);
  border-bottom: 1px solid rgba(154, 123, 30, 0.20);
}
html:not([data-theme="dark"]) body.g-dark .l-nav-emblem {
  mix-blend-mode: normal;
  background: #0e0b24;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(40, 30, 80, 0.22);
}

/* About page — light surfaces */
html:not([data-theme="dark"]) body.g-dark .ab-hero {
  border-bottom-color: rgba(154, 123, 30, 0.20);
}
html:not([data-theme="dark"]) body.g-dark .ab-body {
  background: rgba(251, 246, 234, 0.85);
  border-bottom: 1px solid rgba(154, 123, 30, 0.20);
}
html:not([data-theme="dark"]) body.g-dark .ab-input,
html:not([data-theme="dark"]) body.g-dark .ab-textarea {
  background: #fbf6ea;
  border-color: rgba(154, 123, 30, 0.38);
  color: #2a2114;
}
html:not([data-theme="dark"]) body.g-dark .ab-input:focus,
html:not([data-theme="dark"]) body.g-dark .ab-textarea:focus {
  border-color: rgba(154, 123, 30, 0.60);
}
html:not([data-theme="dark"]) body.g-dark .l-footer {
  background: rgba(251, 246, 234, 0.90);
  border-top: 1px solid rgba(154, 123, 30, 0.20);
}

/* Chat page — light surfaces */
html:not([data-theme="dark"]) body.g-dark .ch-sidebar {
  background: rgba(251, 246, 234, 0.94);
  border-right-color: rgba(154, 123, 30, 0.22);
}
html:not([data-theme="dark"]) body.g-dark .ch-footer {
  background: rgba(251, 246, 234, 0.95);
  border-top-color: rgba(154, 123, 30, 0.22);
}
html:not([data-theme="dark"]) body.g-dark .ch-mobile-top {
  background: rgba(251, 246, 234, 0.97);
  border-bottom-color: rgba(154, 123, 30, 0.20);
}
html:not([data-theme="dark"]) body.g-dark .ch-sidebar-top {
  border-bottom-color: rgba(154, 123, 30, 0.20);
}
html:not([data-theme="dark"]) body.g-dark .ch-new-chat {
  border-color: rgba(154, 123, 30, 0.36);
  color: #2a2114;
}
html:not([data-theme="dark"]) body.g-dark .ch-new-chat:hover {
  background: rgba(154, 123, 30, 0.10);
  border-color: rgba(154, 123, 30, 0.50);
}
html:not([data-theme="dark"]) body.g-dark .ch-input-bar {
  background: #fbf6ea;
  border-color: rgba(154, 123, 30, 0.38);
}
html:not([data-theme="dark"]) body.g-dark .ch-input-bar:focus-within {
  border-color: rgba(154, 123, 30, 0.60);
}
html:not([data-theme="dark"]) body.g-dark .ch-conv-item:hover {
  background: rgba(154, 123, 30, 0.08);
}
html:not([data-theme="dark"]) body.g-dark .ch-msg-bot {
  background: rgba(154, 123, 30, 0.08);
}
html:not([data-theme="dark"]) body.g-dark .ch-sidebar-overlay {
  background: rgba(40, 30, 20, 0.35);
}

/* Profile page — light glass card */
html:not([data-theme="dark"]) body.g-dark .pf-card {
  background: rgba(251, 246, 234, 0.96);
  border-color: rgba(154, 123, 30, 0.28);
  box-shadow: 0 8px 44px rgba(120, 90, 30, 0.18), 0 0 0 1px rgba(168, 130, 225, 0.06);
}
html:not([data-theme="dark"]) body.g-dark .pf-divider {
  border-top-color: rgba(154, 123, 30, 0.24);
}
html:not([data-theme="dark"]) body.g-dark .pf-btn-secondary {
  border-color: rgba(154, 123, 30, 0.36);
  color: #5a4d37;
}
html:not([data-theme="dark"]) body.g-dark .pf-btn-secondary:hover {
  border-color: #9a7b1e;
  color: #9a7b1e;
}