/* ═══════════════════════════════════════════
   BASE — Reset, Layout, Animations
   ═══════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  background: #08080f;
  font-family: 'DM Sans', sans-serif;
  color: #fff;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 2px; }

input:focus, textarea:focus {
  border-color: rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.05) !important;
}

button:active { transform: scale(.97) !important; }

/* App shell */
#app { height: 100vh; width: 100vw; display: flex; flex-direction: column; position: relative; overflow: hidden; }

/* Particles & glows */
#particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particle { position: absolute; border-radius: 50%; }
.glow { position: fixed; border-radius: 50%; pointer-events: none; transition: background .8s ease; }
#glow-top { width: 280px; height: 280px; top: -60px; right: -60px; }
#glow-bot { width: 250px; height: 250px; bottom: 60px; left: -60px; background: radial-gradient(circle, rgba(124,77,255,.04) 0%, transparent 70%); }

/* Scrollable content */
#content { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 1; -webkit-overflow-scrolling: touch; padding-bottom: 90px; }
.content-inner { max-width: 480px; margin: 0 auto; padding: 20px 16px; }

/* Panels */
.panel { display: none; animation: fadeSlide .5s ease both; }
.panel.active { display: block; }

/* ─── Keyframes ─── */
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes floatParticle {
  0%,100% { transform: translate(0,0) scale(1); opacity: .3; }
  25% { transform: translate(20px,-30px) scale(1.2); opacity: .6; }
  50% { transform: translate(-10px,-50px) scale(.8); opacity: .2; }
  75% { transform: translate(15px,-20px) scale(1.1); opacity: .5; }
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.95); } }
@keyframes scanline { 0% { top: -10%; } 100% { top: 110%; } }
@keyframes chatFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes typingDot { 0%,60%,100% { transform: translateY(0); opacity: .3; } 30% { transform: translateY(-4px); opacity: .8; } }
@keyframes modalSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }