/* ═══════════════════════════════════════════
   Space Background — galactic blackness with stars + shooting star
   .sg-space-bg          = stars + shooting star (detail, cancel modals, chat)
   .sg-space-bg.sg-space-alt-star = stars + different shooting star (modify modal)
   ═══════════════════════════════════════════ */

.sg-space-bg {
  --space-bg: #0a0e1a;
  background: var(--space-bg);
  position: relative;
  overflow: hidden;
}

/* ── Star Layer 1 — bright + medium, slow twinkle ── */
.sg-space-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 1px; height: 1px;
  background: transparent;
  box-shadow:
    42px 18px 0 0px rgba(255,255,255,0.9),
    310px 85px 0 0px rgba(200,220,255,0.8),
    155px 220px 0 0px rgba(255,240,200,0.75),
    85px 340px 0 0px rgba(255,255,255,0.85),
    360px 190px 0 0px rgba(180,200,255,0.7),
    270px 410px 0 0px rgba(255,255,255,0.65),
    190px 480px 0 0px rgba(200,220,255,0.8),
    430px 330px 0 0px rgba(255,255,255,0.75),
    15px 510px 0 0px rgba(255,240,200,0.7),
    480px 145px 0 0px rgba(200,220,255,0.85),
    22px 130px 0 0px rgba(255,255,255,0.5),
    120px 55px 0 0px rgba(255,255,255,0.45),
    290px 300px 0 0px rgba(255,255,255,0.55),
    380px 60px 0 0px rgba(255,255,255,0.4),
    65px 460px 0 0px rgba(255,255,255,0.5),
    240px 140px 0 0px rgba(255,255,255,0.35),
    410px 500px 0 0px rgba(255,255,255,0.5),
    170px 380px 0 0px rgba(200,220,255,0.45),
    520px 250px 0 0px rgba(255,255,255,0.4),
    60px 220px 0 0px rgba(255,255,255,0.5),
    345px 470px 0 0px rgba(255,240,200,0.4);
  pointer-events: none;
  z-index: 0;
  animation: sgTwinkle1 5s ease-in-out infinite;
}

/* ── Star Layer 2 — dim, faster twinkle (desynced) ── */
.sg-space-nebula::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 1px; height: 1px;
  background: transparent;
  box-shadow:
    50px 270px 0 0px rgba(255,255,255,0.35),
    175px 15px 0 0px rgba(255,255,255,0.3),
    330px 370px 0 0px rgba(255,255,255,0.25),
    100px 180px 0 0px rgba(200,220,255,0.3),
    400px 250px 0 0px rgba(255,255,255,0.2),
    215px 450px 0 0px rgba(255,240,200,0.3),
    25px 90px 0 0px rgba(255,255,255,0.25),
    460px 420px 0 0px rgba(255,255,255,0.3),
    530px 30px 0 0px rgba(200,220,255,0.25),
    280px 520px 0 0px rgba(255,255,255,0.2),
    140px 290px 0 0px rgba(255,255,255,0.3),
    490px 160px 0 0px rgba(255,240,200,0.25),
    /* faint nebula glow */
    200px 400px 20px 10px rgba(0,80,180,0.04),
    350px 100px 25px 12px rgba(100,0,120,0.03),
    180px 250px 30px 15px rgba(0,50,100,0.02);
  pointer-events: none;
  z-index: 0;
  animation: sgTwinkle2 3.7s ease-in-out infinite 1.2s;
}

/* ── Twinkle — two rhythms create per-star randomness ── */
@keyframes sgTwinkle1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes sgTwinkle2 {
  0%, 100% { opacity: 0.9; }
  40% { opacity: 0.2; }
  70% { opacity: 0.7; }
}

/* ═══════════════════════════════════════════
   Shooting Star — default (detail, cancel, chat)
   Top-left to bottom-right diagonal
   ═══════════════════════════════════════════ */
.sg-space-bg::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,220,255,0.3) 40%, rgba(255,255,255,0.7) 80%, #fff 100%);
  border-radius: 2px;
  transform: rotate(31deg);
  top: 8%;
  left: -55px;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    0 0 3px 1px rgba(255,255,255,0.8),
    0 0 6px 2px rgba(180,200,255,0.3);
  animation: sgShootingStar 10s ease-in infinite 5s;
  opacity: 0;
}

@keyframes sgShootingStar {
  0%   { left: -55px; top: 8%; opacity: 0; }
  1%   { opacity: 1; }
  5%   { left: 70%; top: 52%; opacity: 0.7; }
  7%   { left: 105%; top: 70%; opacity: 0; }
  100% { left: 105%; top: 70%; opacity: 0; }
}

/* ── Content sits above the starfield ── */
.sg-space-bg > * {
  position: relative;
  z-index: 1;
}