/* Personalización del Chatbot FG-IA */

/* Fondo negro del chat */
#bp-web-widget {
  background-color: #000000 !important;
}

.bpw-layout {
  background-color: #000000 !important;
}

.bpw-chat-container {
  background-color: #000000 !important;
}

/* Cabecera personalizada */
.bpw-header {
  background: linear-gradient(135deg, #ff6600 0%, #00ccff 100%) !important;
  padding: 20px !important;
  text-align: center !important;
}

.bpw-header-container {
  flex-direction: column !important;
  align-items: center !important;
}

.bpw-header-icon img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  margin-bottom: 10px !important;
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.5) !important;
}

.bpw-header-title {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  margin-bottom: 5px !important;
}

.bpw-header-subtitle::after {
  content: "Soy tu asistente virtual" !important;
  display: block !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Burbujas del bot - Azul neón */
.bpw-from-bot .bpw-chat-bubble {
  background: linear-gradient(135deg, #00ccff 0%, #0099cc 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 204, 255, 0.3) !important;
  border: 1px solid rgba(0, 204, 255, 0.2) !important;
}

.bpw-from-bot .bpw-chat-bubble-content {
  color: #ffffff !important;
}

/* Burbujas del usuario - Naranja neón */
.bpw-from-user .bpw-chat-bubble {
  background: linear-gradient(135deg, #ff6600 0%, #ff4400 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3) !important;
  border: 1px solid rgba(255, 102, 0, 0.2) !important;
}

.bpw-from-user .bpw-chat-bubble-content {
  color: #ffffff !important;
}

/* Animación estilo Siri - Bola energética */
@keyframes siri-pulse {
  0% { 
    transform: scale(0.9) rotate(0deg);
    opacity: 0.7;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.4), 0 0 40px rgba(0, 204, 255, 0.4);
  }
  50% { 
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
    box-shadow: 0 0 30px rgba(255, 102, 0, 0.6), 0 0 60px rgba(0, 204, 255, 0.6);
  }
  100% { 
    transform: scale(0.9) rotate(360deg);
    opacity: 0.7;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.4), 0 0 40px rgba(0, 204, 255, 0.4);
  }
}

@keyframes siri-glow {
  0%, 100% {
    background: radial-gradient(circle, #ff6600 0%, #ff4400 30%, #00ccff 70%, #0099cc 100%);
  }
  50% {
    background: radial-gradient(circle, #00ccff 0%, #0099cc 30%, #ff6600 70%, #ff4400 100%);
  }
}

/* Ocultar los puntos de carga por defecto */
.bpw-typing-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.bpw-typing-bubble .bpw-typing-group {
  display: none !important;
}

/* Crear la animación Siri personalizada */
.bpw-typing-bubble::before {
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  margin: 20px auto !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #ff6600 0%, #ff4400 30%, #00ccff 70%, #0099cc 100%) !important;
  animation: siri-pulse 2s infinite ease-in-out, siri-glow 4s infinite ease-in-out !important;
}

/* Input del chat */
.bpw-composer {
  background-color: #1a1a1a !important;
  border-top: 1px solid rgba(0, 204, 255, 0.2) !important;
}

.bpw-composer-inner {
  background-color: #2a2a2a !important;
  border: 1px solid rgba(0, 204, 255, 0.3) !important;
  border-radius: 25px !important;
}

.bpw-composer textarea {
  background-color: transparent !important;
  color: #ffffff !important;
}

.bpw-composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Botón de enviar */
.bpw-send-button {
  background: linear-gradient(135deg, #ff6600 0%, #00ccff 100%) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(255, 102, 0, 0.3) !important;
}

.bpw-send-button:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 20px rgba(255, 102, 0, 0.5) !important;
}

/* Botón flotante del chat */
.bpw-widget-btn {
  background: linear-gradient(135deg, #ff6600 0%, #00ccff 100%) !important;
  box-shadow: 0 4px 20px rgba(255, 102, 0, 0.4) !important;
}

.bpw-widget-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 30px rgba(255, 102, 0, 0.6) !important;
}

/* Fondo de estrellas sutil */
.bpw-chat-container::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(0, 204, 255, 0.3), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 60px 70px, rgba(255, 102, 0, 0.3), rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 50px 50px, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 90px 10px, rgba(0, 204, 255, 0.3), rgba(0, 0, 0, 0)) !important;
  background-size: 200px 200px !important;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, 150px 30px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.bpw-chat-container > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Scrollbar personalizado */
.bpw-chat-container ::-webkit-scrollbar {
  width: 8px !important;
}

.bpw-chat-container ::-webkit-scrollbar-track {
  background: #1a1a1a !important;
}

.bpw-chat-container ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff6600 0%, #00ccff 100%) !important;
  border-radius: 4px !important;
}

.bpw-chat-container ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff8833 0%, #33ddff 100%) !important;
}