/* public/assets/css/chatbot.css - Estilos modulares del chatbot */

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --chatbot-primary: linear-gradient(135deg, #065136, #0a6d48);
  --chatbot-shadow: 0 6px 16px rgba(0,0,0,0.18);
  --chatbot-shadow-hover: 0 8px 18px rgba(0,0,0,0.22);
  --chatbot-border-radius: 15px;
  --chatbot-transition: 0.25s ease;
}

/* Contenedor del chatbot (visible solo al abrir) */
#chatContainer {
  position: fixed;
  bottom: calc(100px + var(--safe-bottom));
  right: 20px;
  z-index: 9997;
  display: none;
  transition: bottom var(--chatbot-transition), transform var(--chatbot-transition);
  will-change: bottom, transform;
}

#chatContainer zapier-interfaces-chatbot-embed {
  height: 600px;
  width: 400px;
  border-radius: var(--chatbot-border-radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Botón toggle (PagaTuRifa – Adrián) */
.custom-chat-toggle {
  position: fixed;
  bottom: calc(20px + var(--safe-bottom));
  right: 20px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--chatbot-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: var(--chatbot-shadow);
  transition: transform var(--chatbot-transition), box-shadow var(--chatbot-transition), bottom var(--chatbot-transition);
  will-change: transform, bottom;
}

.custom-chat-toggle:hover {
  box-shadow: var(--chatbot-shadow-hover);
}

.custom-chat-toggle img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.custom-chat-toggle.chat-open {
  transform: scale(0.85) translateY(40px);
}

/* Burbuja emergente */
.chat-greeting {
  position: fixed;
  bottom: calc(95px + var(--safe-bottom));
  right: 90px;
  background: linear-gradient(135deg, #ffffff, #f7f9fc);
  padding: 10px 16px;
  border-radius: 50px;
  box-shadow: 0px 6px 20px rgba(0,0,0,0.15);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.35;
  max-width: 240px;
  z-index: 9998;
  display: none;
  align-items: center;
  gap: 10px;
  animation: chatbotFadeIn 0.3s ease;
  border: 1px solid rgba(6, 81, 54, 0.35);
  transition: bottom var(--chatbot-transition);
  will-change: bottom;
}

.chat-greeting::before {
  content: "💬";
  font-size: 16px;
  flex-shrink: 0;
}

.chat-greeting button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #888;
  margin-left: auto;
  line-height: 1;
}

@keyframes chatbotFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SOLO móvil: altura 400px, ancho completo */
@media (max-width: 768px) {
  #chatContainer {
    right: 0;
    left: 0;
    bottom: calc(90px + var(--safe-bottom));
    padding: 0 15px;
  }

  #chatContainer zapier-interfaces-chatbot-embed {
    height: 400px !important;
    width: 100% !important;
  }
}

/* Ocultar popup nativo de Zapier */
zapier-interfaces-chatbot-embed[is-popup="true"] {
  display: none !important;
}

/* Bloquear scroll cuando chat está abierto en móvil */
body.chat-locked {
  overflow: hidden;
  touch-action: none;
}

/* Soporte para tema oscuro (opcional) */
@media (prefers-color-scheme: dark) {
  .chat-greeting {
    background: linear-gradient(135deg, #2d3748, #1a202c);
    color: #e2e8f0;
    border-color: rgba(6, 81, 54, 0.5);
  }

  .chat-greeting button {
    color: #a0aec0;
  }
}