/* Estilos del Widget de Chatbot de IAinsane */

.ia-bot-widget {
  width: 420px !important;
}

@media (max-width: 576px) {
  .ia-bot-widget {
    width: 100% !important;
  }
}

/* Estilos de las burbujas de mensaje */
.user-bubble {
  background: var(--ia-surface);
  border: 1px solid rgba(34, 211, 238, 0.25) !important;
  color: var(--ia-text);
  max-width: 85%;
  word-wrap: break-word;
  box-shadow: var(--ia-shadow);
}

.ai-bubble {
  background: rgba(26, 34, 54, 0.6) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  color: var(--ia-text-soft);
  max-width: 85%;
  word-wrap: break-word;
  box-shadow: var(--ia-shadow);
  backdrop-filter: blur(5px);
}

.ai-bubble p:last-child {
  margin-bottom: 0;
}

.ai-bubble ul, .ai-bubble ol {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.ai-bubble li {
  margin-bottom: 0.25rem;
}

.ai-bubble h1, .ai-bubble h2, .ai-bubble h3, .ai-bubble h4 {
  color: #white;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Efecto de pulsación del botón flotante */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(34, 211, 238, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
  }
}

#botToggle {
  animation: pulse-glow 2.5s infinite;
  transition: transform 0.2s ease;
}

#botToggle:hover {
  transform: scale(1.08);
}

/* Estilo de la barra de desplazamiento */
#chat-messages::-webkit-scrollbar {
  width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
  background: rgba(10, 14, 26, 0.1);
}

#chat-messages::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.25);
  border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}