/* base.css ──────────────────────────────────────────────── */
/* Shared foundation: reset, colors, typography, grain */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: #0a0a0a;
  color: #e0e0e0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.58;
  font-size: 15px;
  overflow-x: hidden;
}

body {
  background: #050505;
  position: relative;
}

/* subtle grain/noise */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUcmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuNzUiIG51bU9jdGF2ZXM9IjMiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjZikiIG9wYWNpdHk9IjAuMDIyIi8+PC9zdmc+');
  pointer-events: none;
  z-index: 1;
  opacity: 0.13;
}

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

.hidden { display: none !important; }

.container,
.article-container,
#adminPanel {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 20px;
  position: relative;
  z-index: 2;
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: 2.4rem; margin-bottom: 0.7em; color: #ffffff; }
h2 { font-size: 1.65rem; margin: 1.4em 0 0.6em; color: #e0e0ff; }
h3 { font-size: 1.32rem; margin: 1.3em 0 0.5em; }

/* Responsive base */
@media (max-width: 768px) {
  .container, .article-container, #adminPanel { padding: 16px 14px; }
  h1 { font-size: 2rem; }
}

/* Extra small devices */
@media (max-width: 480px) {
  html { font-size: 14px; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
}
    /* Premium locked UI */
.premium-locked {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}
.premium-locked::after {
  content: '🔒';
  position: absolute;
  right: 4px;
  top: 4px;
  font-size: 12px;
}

/* Premium success overlay */
.premium-success {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
}
.premium-success-card {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid #4a4a8a;
  border-radius: 24px;
  padding: 40px;
  text-align: center;
  color: white;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  animation: fadeInScale 0.3s ease;
}
.premium-success .success-icon {
  width: 80px;
  height: 80px;
  background: #4caf50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 20px;
  box-shadow: 0 0 20px #4caf50;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Subscription section in settings */
.subscription-section {
  margin: 20px 0;
  padding: 15px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
}
.subscription-section h3 {
  margin-top: 0;
  color: #ffd700;
}
#subscriptionStatusBox button {
  margin-top: 10px;
}
    /* additional minimal styles for new features */
    /* ===== WELCOME CHIPS V2 ===== */
    .suggested-prompts {
      margin-top: 30px;
      gap: 14px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .prompt-chip {
      position: relative;
      padding: 12px 22px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 500;
      color: white;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.08);
      cursor: pointer;
      transition: all 0.25s ease;
      overflow: hidden;
    }
    .prompt-chip::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: linear-gradient(
        120deg,
        rgba(120,80,255,0.3),
        rgba(0,200,255,0.2),
        transparent
      );
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .prompt-chip:hover {
      transform: translateY(-3px);
      border-color: rgba(255,255,255,0.2);
      box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    }
    .prompt-chip:hover::before {
      opacity: 1;
    }
        @media (max-width: 768px) {
      .prompt-chip {
        font-size: 13px;
        padding: 10px 16px;
      }
    }
    
    .file-upload-label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      color: #ccc;
      transition: 0.2s;
      margin-right: 6px;
    }
    .file-upload-label:hover {
      background: rgba(255,255,255,0.2);
      color: white;
    }
    
    .action-group {
      display: flex;
      align-items: center;
      gap: 8px;
      order: 2;
    }
    /* fade transition for messages */
    .message {
      transition: opacity 0.3s ease;
    }
    /* file preview chip */
    .file-preview {
      background: rgba(0,200,255,0.1);
      border: 1px solid rgba(0,200,255,0.3);
      border-radius: 20px;
      padding: 4px 16px 4px 12px;
      margin: 8px 0 4px 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
      color: #8cf;
      backdrop-filter: blur(4px);
    }
    .file-preview i {
      font-size: 1rem;
    }
    .file-preview .remove-file {
      cursor: pointer;
      color: #f88;
      margin-left: 8px;
    }

    .welcome-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
}

.welcome-content h1 {
  font-size: 28px;
  font-weight: 600;
}

.welcome-content p {
  margin-top: 8px;
  opacity: 0.7;
}

.hidden {
  display: none !important;
}
#astro-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  overflow: hidden;
}

#astro-background.active {
  opacity: 1;
}

.stars-layer {
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(white 1px, transparent 1px);
  background-size: 3px 3px;
  animation: moveStars 120s linear infinite;
  opacity: 0.15;
}

@keyframes moveStars {
  from { transform: translate(0,0); }
  to { transform: translate(-500px,-500px); }
}

.galaxy-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(80,0,120,0.4), transparent 70%);
  filter: blur(80px);
}

.real-planet {
  position: absolute;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 40px rgba(255,255,255,0.3);
  animation: floatPlanet 20s ease-in-out infinite alternate;
}

@keyframes floatPlanet {
  from { transform: translateY(-20px); }
  to { transform: translateY(20px); }
}

#astro-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#astro-3d.active {
  opacity: 1;
}

.constellation-layer {
  position: absolute;
  inset: 0;
  background: url('https://i.imgur.com/8K6YwqP.png') center/cover;
  opacity: 0.08;
  mix-blend-mode: screen;
  pointer-events: none;
}
    
    /* ✅ B. Status indicator style */
    .status-indicator {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4caf50;
      margin: 0 10px;
      box-shadow: 0 0 8px #4caf50;
      vertical-align: middle;
    }

    /* ✅ C. Visual effects wrapper */
    #visualEffects {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }
    #visualEffects canvas,
    #visualEffects #astro-3d {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .effects-disabled {
      opacity: 0.3; /* or display: none; toggled by JS later */
    }