/*
 * AllOfUs Chat — Global Shared Styles
 * Shared across all pages: font, reset, space background, light-theme base.
 */

/* ── Font ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Space background layers (shared across most pages) ── */
#space-bg,
#sf-space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(22, 60, 140, .55), transparent 65%),
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(60, 20, 120, .45), transparent 60%),
    radial-gradient(ellipse 60% 70% at 70% 80%, rgba(10, 40, 100, .40), transparent 60%),
    radial-gradient(ellipse 50% 40% at 30% 70%, rgba(30, 10, 80, .35), transparent 55%),
    linear-gradient(180deg, #020818 0%, #040d24 50%, #020c1e 100%);
}

#nebula-layer,
#sf-nebula {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .6;
  background:
    radial-gradient(ellipse 45% 35% at 20% 35%, rgba(96, 165, 250, .12), transparent 55%),
    radial-gradient(ellipse 55% 40% at 80% 60%, rgba(167, 139, 250, .10), transparent 55%),
    radial-gradient(ellipse 40% 30% at 55% 20%, rgba(94, 234, 212, .07), transparent 50%);
  animation: nebulaDrift 25s ease-in-out infinite alternate;
}

@keyframes nebulaDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-12px, 8px) scale(1.02); }
  66%  { transform: translate(10px, -6px) scale(.98); }
  100% { transform: translate(-5px, 12px) scale(1.01); }
}

#star-canvas,
#sf-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Toast notification (shared component) ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: rgba(10, 20, 50, .92);
  color: #eef4ff;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid rgba(96, 165, 250, .3);
  font-size: .88rem;
  font-weight: 600;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  backdrop-filter: blur(12px);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Scrollbar (shared) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, .25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, .45);
}

/* ── Light theme space bg override ── */
body.light #space-bg,
body.light #sf-space-bg,
body.light #nebula-layer,
body.light #sf-nebula,
body.light #star-canvas,
body.light #sf-canvas {
  opacity: .08;
}