/* ==========================================
   YZG STUDIO - MÁGICO GLOW NEÓN TRASERO
   ========================================== */

/* 1. Desactivar elementos antiguos */
.mega-input-glow,
.mega-input-wrapper::before,
.mega-input-wrapper::after,
.mega-input-box::before,
.mega-input-box::after {
  display: none !important;
  content: none !important;
}

/* 2. Subir un poquito la caja hacia arriba */
.mega-input-wrapper {
  position: relative !important;
  width: 100% !important;
  transform: translateY(-12px) !important; /* 🟢 Eleva la caja un poquito */
  transition: transform 0.3s ease !important;
}

/* 3. La caja oscura sólida + Sombras Neón Mágicas de Colores */
.mega-input-box {
  position: relative !important;
  z-index: 2 !important;
  background: #121218 !important; /* Fondo 100% negro opaco */
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  padding: 14px 20px !important;
  
  /* 🟢 LOS COLORES MÁGICOS MULTINIVEL (Índigo + Cían + Rosa Neón) */
  box-shadow: 0 8px 25px -4px rgba(99, 102, 241, 0.5),
              0 14px 35px -6px rgba(6, 182, 212, 0.45),
              0 20px 45px -8px rgba(236, 72, 153, 0.35) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* 4. Brillo mágico intenso al hacer clic o escribir */
.mega-input-box:focus-within {
  border-color: rgba(168, 199, 250, 0.6) !important;
  box-shadow: 0 10px 30px -2px rgba(99, 102, 241, 0.75),
              0 18px 42px -4px rgba(6, 182, 212, 0.65),
              0 24px 55px -6px rgba(236, 72, 153, 0.5) !important;
}

/* Textarea visible */
#agent-input {
  color: #f8fafc !important;
  background: transparent !important;
}