/* ============================================
   SONIC PULSE — App CSS
   Sistema de diseño "Neon Pulse"
   Chat 4 — Frontend
   ============================================ */

/* ---- CUSTOM PROPERTIES ---- */
:root {
  --surface-lowest: #000000;
  --surface: #0e0e0e;
  --surface-low: #131313;
  --surface-container: #1a1a1a;
  --surface-high: #20201f;
  --surface-highest: #262626;
  --surface-variant: #262626;
  --surface-bright: #2c2c2c;
  --primary: #81ecff;
  --primary-dim: #00d4ec;
  --primary-container: #00e3fd;
  --secondary: #c47fff;
  --secondary-dim: #a533ff;
  --secondary-container: #8c00e5;
  --tertiary: #a7ffb3;
  --tertiary-dim: #00ee70;
  --tertiary-container: #2efd7c;
  --error: #ff6e84;
  --error-dim: #d73357;
  --on-surface: #ffffff;
  --on-surface-variant: #adaaaa;
  --on-primary: #005762;
  --on-primary-fixed: #003840;
  --outline: #767575;
  --outline-variant: #484847;
}

/* ---- NEON GLOWS ---- */
.neon-glow-primary { box-shadow: 0 0 20px rgba(129, 236, 255, 0.15); }
.neon-glow-secondary { box-shadow: 0 0 20px rgba(196, 127, 255, 0.15); }
.neon-glow-tertiary { box-shadow: 0 0 20px rgba(167, 255, 179, 0.15); }
.neon-glow-error { box-shadow: 0 0 20px rgba(255, 110, 132, 0.15); }

/* ---- GLASS PANEL ---- */
.glass-panel {
  background: rgba(38, 38, 38, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ---- RADIAL PULSE BACKGROUND ---- */
.bg-pulse-radial {
  background: radial-gradient(circle at 50% 50%, rgba(129, 236, 255, 0.05) 0%, rgba(14, 14, 14, 1) 70%);
}

/* ---- GHOST BORDER ---- */
.ghost-border { border: 1px solid rgba(72, 72, 71, 0.2); }

/* ---- GRADIENT CTAs ---- */
.btn-primary-gradient {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary-fixed);
}
.btn-primary-gradient:hover { box-shadow: 0 0 30px rgba(129, 236, 255, 0.25); }
.btn-primary-gradient:active { transform: scale(0.95); }

/* ---- AMBIENT SHADOW ---- */
.ambient-shadow { box-shadow: 0 8px 40px rgba(196, 127, 255, 0.08); }

/* ---- SCREEN TRANSITIONS ---- */
.screen { display: none; opacity: 0; transition: opacity 0.3s ease; }
.screen.active { display: block; opacity: 1; }

/* ---- ANIMATIONS ---- */
@keyframes pulseBreath {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(129, 236, 255, 0.15); }
  50% { box-shadow: 0 0 40px rgba(129, 236, 255, 0.3); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bounceBar1 { 0%,100% { height: 12px; } 50% { height: 24px; } }
@keyframes bounceBar2 { 0%,100% { height: 24px; } 50% { height: 8px; } }
@keyframes bounceBar3 { 0%,100% { height: 16px; } 50% { height: 28px; } }
@keyframes bounceBar4 { 0%,100% { height: 8px; } 50% { height: 20px; } }
@keyframes victoryGlow {
  0%, 100% { text-shadow: 0 0 15px rgba(129, 236, 255, 0.6), 0 0 30px rgba(129, 236, 255, 0.3); }
  50% { text-shadow: 0 0 30px rgba(129, 236, 255, 0.9), 0 0 60px rgba(129, 236, 255, 0.5); }
}

.animate-pulse-breath { animation: pulseBreath 2s ease-in-out infinite; }
.animate-slide-up { animation: slideUp 0.4s ease-out forwards; }
.animate-slide-in { animation: slideIn 0.3s ease-out forwards; }
.animate-glow-pulse { animation: glowPulse 2s ease-in-out infinite; }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-victory-glow { animation: victoryGlow 2s ease-in-out infinite; }

/* ---- AUDIO BARS ---- */
.audio-bars { display: flex; gap: 3px; height: 32px; align-items: flex-end; }
.audio-bars .bar { width: 4px; border-radius: 2px; background: var(--secondary); }
.audio-bars .bar:nth-child(1) { animation: bounceBar1 0.8s infinite; }
.audio-bars .bar:nth-child(2) { animation: bounceBar2 0.6s infinite; }
.audio-bars .bar:nth-child(3) { animation: bounceBar3 1s infinite; }
.audio-bars .bar:nth-child(4) { animation: bounceBar4 0.5s infinite; }
.audio-bars.paused .bar { animation-play-state: paused; height: 4px; }

/* ---- TIMELINE ---- */
.timeline-dropzone {
  min-width: 48px;
  min-height: 180px;
  border: 2px dashed rgba(129, 236, 255, 0.15);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}
.timeline-dropzone:hover {
  border-color: rgba(129, 236, 255, 0.4);
  background: rgba(129, 236, 255, 0.05);
}
.timeline-dropzone.active {
  border-color: var(--primary);
  background: rgba(129, 236, 255, 0.1);
  box-shadow: 0 0 20px rgba(129, 236, 255, 0.15);
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--outline); }

/* ---- MISC ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---- LOADING SPINNER ---- */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--surface-highest);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- MOBILE RESPONSIVE ---- */
@media (max-width: 640px) {
  /* Sidebar oculto en móvil */
  .lg\:ml-64 { margin-left: 0 !important; }
  /* Padding reducido */
  main { padding-left: 1rem !important; padding-right: 1rem !important; }
  /* Scoreboard compacto */
  #scoreboard { gap: 0.5rem !important; }
  #scoreboard > div { padding: 0.5rem !important; }
  #scoreboard .text-2xl { font-size: 1rem !important; }
  #scoreboard .text-xs { font-size: 0.55rem !important; }
  /* Timeline dropzone más pequeña */
  .timeline-dropzone { min-height: 120px; min-width: 36px; }
  /* Prompt texto reducido */
  .text-3xl { font-size: 1.4rem !important; }
  .text-4xl { font-size: 1.6rem !important; }
  /* Bottom nav padding */
  #bottom-nav { padding-left: 1rem !important; padding-right: 1rem !important; }
  /* Now playing bar */
  #now-playing-bar { padding: 0.75rem 1rem !important; }
  /* Scroll buttons */
  #timeline-scroll-left, #timeline-scroll-right { width: 2rem; height: 2rem; }
}

/* ---- TOAST NOTIFICATIONS ---- */
.toast {
  position: fixed; top: 100px; right: 20px; z-index: 9999;
  padding: 12px 24px; border-radius: 1rem;
  font-size: 14px; font-weight: 600;
  animation: slideIn 0.3s ease-out, fadeIn 0.3s ease-out;
  max-width: 360px;
}
.toast.success { background: rgba(0, 238, 112, 0.15); color: var(--tertiary); border: 1px solid rgba(167, 255, 179, 0.2); }
.toast.error { background: rgba(255, 110, 132, 0.15); color: var(--error); border: 1px solid rgba(255, 110, 132, 0.2); }
.toast.info { background: rgba(129, 236, 255, 0.15); color: var(--primary); border: 1px solid rgba(129, 236, 255, 0.2); }