/* --- CONFIGURACIÓN FÁCIL --- */
:root {
  /* Color del botón flotante */
  --n8n-btn-bg: #007bff;        
  --n8n-btn-hover: #0056b3;
  
  /* Color del encabezado de la ventana (donde está el título) */
  --n8n-header-bg: #ffffff;
  --n8n-header-text: #333333;
  
  /* Tamaño de la ventana */
  --n8n-window-width: 400px;
  --n8n-window-height: 600px;
  
  /* Posición en pantalla */
  --n8n-pos-right: 20px;
  --n8n-pos-bottom: 20px;
}

/* --- ESTILOS DEL BOTÓN FLOTANTE --- */
#n8n-chat-launcher {
  position: fixed;
  bottom: var(--n8n-pos-bottom);
  right: var(--n8n-pos-right);
  width: 60px;
  height: 60px;
  background-color: var(--n8n-btn-bg);
  border-radius: 50%; /* 50% lo hace redondo, 12px lo haría cuadrado con bordes suaves */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s;
}

#n8n-chat-launcher:hover {
  transform: scale(1.1); /* Efecto de crecimiento al pasar el mouse */
  background-color: var(--n8n-btn-hover);
}

#n8n-chat-launcher img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Icono ? por defecto */
.n8n-chat-icon-default {
  color: white;
  font-size: 28px;
  font-weight: bold;
}

/* --- ESTILOS DE LA VENTANA --- */
#n8n-chat-window {
  position: fixed;
  bottom: calc(var(--n8n-pos-bottom) + 80px); /* Se coloca justo encima del botón */
  right: var(--n8n-pos-right);
  width: var(--n8n-window-width);
  height: var(--n8n-window-height);
  
  /* Límites para móviles */
  max-width: calc(100vw - 40px);
  max-height: 80vh;
  
  background: white;
  border-radius: 16px; /* Bordes redondeados de la ventana */
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  /* Animación de entrada */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#n8n-chat-window.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- ENCABEZADO DE LA VENTANA --- */
.n8n-chat-header {
  background-color: var(--n8n-header-bg);
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.n8n-chat-header-title {
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--n8n-header-text);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}

.n8n-chat-header-title img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.n8n-chat-close {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  line-height: 1;
  transition: color 0.2s;
}

.n8n-chat-close:hover {
  color: #333;
}

/* --- ÁREA DEL IFRAME --- */
#n8n-iframe-container {
  flex: 1;
  background-color: #f4f4f4; /* Fondo mientras carga */
  position: relative;
}

#n8n-chat-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}