/* ================================================= */
/* CHATBOT - AJUSTE DE POSICIÓN Y CERCANÍA           */
/* ================================================= */

:root {
  /* Verde institucional */
  --cb-primary: #00897b; 
  --cb-secondary: #00bcd4; 
  --cb-bg: #ffffff;
  --cb-text: #1f2937;
  --cb-muted: #6b7280;
  --cb-border: #e5e7eb;
  --cb-shadow: 0 10px 30px rgba(0,0,0,.15);
  
  /* Variables de posición vertical */
  --cb-mascot-shift: 70px; 
}

/* Wrapper: Contenedor principal */
.chatbot-toggle-wrapper {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  
  /* Mantiene al venado a la IZQUIERDA y el botón a la DERECHA */
  flex-direction: row-reverse; 
  
  align-items: flex-end; 
  gap: 0; /* Quitamos el espacio por defecto */
  z-index: 1000;
  
  /* Permite hacer clic a través de la imagen (Ghost Mode) */
  pointer-events: none; 
}

/* El botón redondo del chat */
.chatbot-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cb-primary), var(--cb-secondary));
  background-size: 200% 200%;
  animation: cb-gradient 6s ease infinite;
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  box-shadow: var(--cb-shadow);
  cursor: pointer;
  z-index: 1000;
  overflow: visible;
  pointer-events: auto; /* Clic habilitado */
}

.chatbot-toggle i { font-size: 20px; }
.chatbot-toggle:hover { filter: brightness(0.95); }
.chatbot-toggle::after { content: none !important; }

/* --- AQUÍ ESTÁ EL AJUSTE DE LA MASCOTA --- */
.chatbot-mascot {
  position: relative;
  width: 235px; 
  height: auto;
  pointer-events: none; /* Clic fantasma */
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.30));
  animation: cb-mascot-float 5s ease-in-out infinite;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 1000;
  
  transform: translateY(var(--cb-mascot-shift)); 

  /* 👇👇👇 MODIFICA ESTE NÚMERO PARA JUNTARLO MÁS O MENOS 👇👇👇 */
  /* -25px lo acerca al botón. Si quieres más cerca pon -40px, si quieres lejos pon 0px */
  margin-right: -60px; 
  margin-bottom: 0;
}

@keyframes cb-mascot-float {
  0%,100% { transform: translateY(var(--cb-mascot-shift)); }
  50% { transform: translateY(calc(var(--cb-mascot-shift) - 6px)); }
}

/* Ocultar mascota al abrir chat */
body.chatbot-open .chatbot-mascot {
  opacity: 0;
  transform: translateY(10px) scale(.92);
}

/* VENTANA DEL CHAT */
.chatbot-window[aria-hidden="true"] { display: none; }

.chatbot-window {
  position: fixed;
  right: 20px;
  bottom: 88px;
  width: 360px;
  max-height: 70vh;
  background: var(--cb-bg);
  color: var(--cb-text);
  border: 1px solid var(--cb-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--cb-shadow);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  pointer-events: auto; 
}

/* Cabecera */
.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(135deg, var(--cb-primary), var(--cb-secondary));
  background-size: 200% 200%;
  animation: cb-gradient 8s ease infinite;
  color: #fff;
  padding: 10px 12px;
}

.chatbot-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.chatbot-actions { display:flex; align-items:center; gap:6px; }

.chatbot-close, .chatbot-minimize {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  backdrop-filter: blur(2px);
}
.chatbot-close:hover, .chatbot-minimize:hover { background: rgba(255,255,255,.22); }
.chatbot-minimize i, .chatbot-close i { font-size: 14px; }

/* Cuerpo */
.chatbot-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }

.chatbot-messages {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 42vh;
  padding-right: 6px;
}

.msg { max-width: 85%; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.msg.bot { background: #f3f4f6; color: var(--cb-text); align-self: flex-start; border: 1px solid var(--cb-border); }
.msg.user {
  background: linear-gradient(135deg, var(--cb-primary), var(--cb-secondary));
  background-size: 200% 200%;
  animation: cb-gradient 10s ease infinite;
  color: #fff; align-self: flex-end;
}

.chatbot-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-chip {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: #fff;
  color: var(--cb-text);
  cursor: pointer;
}
.quick-chip:hover { background: #f9fafb; }

.chatbot-form { display: flex; gap: 8px; margin-top: 4px; }
.chatbot-input {
  flex: 1;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.chatbot-send {
  background: linear-gradient(135deg, var(--cb-primary), var(--cb-secondary));
  background-size: 200% 200%;
  animation: cb-gradient 8s ease infinite;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 14px;
  cursor: pointer;
}
.chatbot-send i { font-size: 14px; }

@keyframes cb-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes cb-title-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsivo Móvil */
@media (max-width: 520px) {
  .chatbot-window { right: 10px; left: 10px; width: auto; bottom: 80px; }
  .chatbot-toggle-wrapper { right:12px; bottom:12px; gap:0; }
  
  /* Ajuste específico para móvil si la imagen es más pequeña */
  .chatbot-mascot { 
      width:150px; 
      transform: translateY(0); 
      margin-right: -40px; /* Ajusta este también si en móvil se ve separado */
  }
}