:root {
  --chat--color-primary: #07966d;
  --chat--color-primary-shade-50: #43e97b;
  --chat--color-primary-shade-100: #7fffd4;
  --chat--color-secondary: #3B81F6;
  --chat--color-secondary-shade-50: #2563eb;
  --chat--color-white: #ffffff;
  --chat--color-light: #f7fbfb;
  --chat--color-light-shade-50: #e9ecef;
  --chat--color-light-shade-100: #cbe2dd;
  --chat--color-medium: #dee2e6;
  --chat--color-dark: #19252b;
  --chat--color-disabled: #97a9aa;
  --chat--color-typing: #404040;

  --chat--spacing: 1rem;
  --chat--border-radius: 1rem;
  --chat--transition-duration: 0.3s;

  --chat--window--width: 400px;
  --chat--window--height: 600px;

  --chat--header-height: auto;
  --chat--header--padding: var(--chat--spacing);
  --chat--header--background: var(--chat--color-white);
  --chat--header--color: var(--chat--color-dark);
  --chat--header--border-top: none;
  --chat--header--border-bottom: 1px solid var(--chat--color-light-shade-50);
  --chat--heading--font-size: 1.3em;
  --chat--subtitle--font-size: 1em;
  --chat--subtitle--line-height: 1.8;

  --chat--textarea--height: 50px;

  --chat--message--font-size: 1rem;
  --chat--message--padding: 0.85rem 1.2rem;
  --chat--message--border-radius: 1.2rem;
  --chat--message-line-height: 1.8;
  --chat--message--bot--background: #f7f8ff;
  --chat--message--bot--color: #303235;
  --chat--message--bot--border: none;
  --chat--message--user--background: #3B81F6;
  --chat--message--user--color: #ffffff;
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(0, 0, 0, 0.05);

  --chat--toggle--background: linear-gradient(135deg, #7fffd4 0%, #43e97b 100%);
  --chat--toggle--hover--background: linear-gradient(135deg, #43e97b 0%, #07966d 100%);
  --chat--toggle--active--background: #07966d;
  --chat--toggle--color: #fff;
  --chat--toggle--size: 60px;
}


/* Botón flotante estilo flowsie (solo ajustes visuales, sin forzar icono ni posición) */
.n8n-chat__toggle {
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.25);
  border-radius: 50% !important;
  transition: transform 0.2s;
}
.n8n-chat__toggle:hover {
  background: var(--chat--toggle--hover--background) !important;
  transform: scale(1.08);
}


.n8n-chat__bubble {
  position: fixed;
  right: 90px;
  bottom: 70px;
  z-index: 9999;
  background: rgba(255,255,255,0.95);
  color: #222;
  font-size: 1rem;
  border-radius: 1.1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  padding: 0.8rem 1.2rem;
  max-width: 320px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.5s, transform 0.5s;
}
.n8n-chat__bubble--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.n8n-chat__bubble-arrow {
  position: absolute;
  right: -18px;
  bottom: 18px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid rgba(255,255,255,0.95);
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.08));
}
.n8n-chat__toggle:hover {
  background: var(--chat--toggle--hover--background) !important;
  transform: scale(1.08);
}

/* Tooltip de bienvenida */
.n8n-chat__tooltip {
  background: rgba(255,255,255,0.92) !important;
  color: #222 !important;
  font-size: 1rem !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  max-width: 400px;
  left: 90px !important;
  top: 10px !important;
}

/* Ventana de chat flowsie */
.n8n-chat__window {
  background: var(--chat--color-white) !important;
  border-radius: 1.2rem !important;
  box-shadow: 0 8px 32px rgba(25,37,43,0.18) !important;
  border: 1px solid var(--chat--color-light-shade-50) !important;
  font-family: 'Inter', sans-serif !important;
  overflow: hidden !important;
  animation: chatOpen 0.5s cubic-bezier(.4,2,.6,1) !important;
}
@keyframes chatOpen {
  0% { transform: scale(0.8) translateY(40px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.n8n-chat__header {
  background: var(--chat--header--background) !important;
  color: var(--chat--header--color) !important;
  border-bottom: var(--chat--header--border-bottom) !important;
  font-size: var(--chat--heading--font-size) !important;
  font-weight: 700;
  padding: 1.2rem 1.5rem !important;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.n8n-chat__header img, .n8n-chat__header-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #fff;
  object-fit: cover;
  margin-right: 0.7rem;
}

/* Mensajes */
.n8n-chat__message {
  font-size: var(--chat--message--font-size) !important;
  line-height: var(--chat--message-line-height) !important;
  border-radius: var(--chat--message--border-radius) !important;
  margin-bottom: 0.7rem !important;
  box-shadow: none !important;
}
.n8n-chat__message--bot {
  background: var(--chat--message--bot--background) !important;
  color: var(--chat--message--bot--color) !important;
  border: 1px solid #e9ecef !important;
  align-items: flex-start !important;
}
.n8n-chat__message--user {
  background: var(--chat--message--user--background) !important;
  color: var(--chat--message--user--color) !important;
  border: none !important;
  align-items: flex-end !important;
}
.n8n-chat__message .n8n-chat__avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover;
  margin-right: 0.5rem;
}
.n8n-chat__message--bot .n8n-chat__avatar {
  background: #fff url('logo.png') center/cover no-repeat !important;
}
.n8n-chat__message--user .n8n-chat__avatar {
  background: #3B81F6 url('https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png') center/cover no-repeat !important;
}

/* Input y botón enviar */
.n8n-chat__input {
  background: #fff !important;
  border-radius: 0 0 1.2rem 1.2rem !important;
  border-top: 1px solid #e9ecef !important;
  padding: 1rem 1.2rem !important;
  font-size: 1rem !important;
  color: #303235 !important;
  box-shadow: none !important;
}
.n8n-chat__input input {
  background: transparent !important;
  border: none !important;
  font-size: 1rem !important;
  color: #303235 !important;
  outline: none !important;
}
.n8n-chat__input button {
  background: var(--chat--color-primary) !important;
  color: #fff !important;
  border-radius: 0.7rem !important;
  border: none !important;
  padding: 0.5rem 1.2rem !important;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s;
}
.n8n-chat__input button:hover {
  background: var(--chat--color-primary-shade-50) !important;
}