/* Xyloch - n8n chat theme (paleta del sitio) */
.n8n-chat,
.n8n-chat * { font-family: inherit; }

/* Sobrescribir variables CSS raíz del paquete (por defecto rosa #e74266) */
.n8n-chat,
.chat-window-wrapper,
.chat-window {
  --chat--color--primary: #00A693 !important;
  --chat--color--primary-shade-50: #018877 !important;
  --chat--color--primary--shade-100: #016B5E !important;
  --chat--color--secondary: #00BFFF !important;
  --chat--color-secondary-shade-50: #0099CC !important;
  --chat--toggle--background: #00A693 !important;
  --chat--toggle--hover--background: #018877 !important;
  --chat--toggle--active--background: #016B5E !important;
  --chat--toggle--color: #FFFFFF !important;
  --chat--header--background: transparent !important;
  --chat--header--color: #FFFFFF !important;
  --chat--body--background: #FFFFFF !important;
  --chat--message--bot--background: #F8FAFC !important;
  --chat--message--bot--color: #1E293B !important;
  --chat--message--bot--border: 1px solid #E2E8F0 !important;
  --chat--message--user--background: #00A693 !important;
  --chat--message--user--color: #FFFFFF !important;
  --chat--input--send--button--background: transparent !important;
  --chat--input--send--button--color: #00A693 !important;
  --chat--input--send--button--background-hover: #018877 !important;
  --chat--input--send--button--color-hover: #FFFFFF !important;
  --chat--close--button--color-hover: #00A693 !important;
  --chat--message--actions--color: #00A693 !important;
  --chat--button--color--primary: #FFFFFF !important;
  --chat--button--background--primary: #00A693 !important;
  --chat--button--background--primary--hover: #018877 !important;
  --chat--footer--background: #FFFFFF !important;
  --chat--footer--color: #64748B !important;
  --color--primary: #00A693 !important;
}

/* Botón flotante */
.n8n-chat__toggle-button,
.n8n-chat-toggle,
.chat-window-toggle {
  background-color: #00A693 !important;
  color: #fff !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
  transition: background-color .2s ease, transform .2s ease !important;
}
.n8n-chat__toggle-button svg,
.n8n-chat-toggle svg,
.chat-window-toggle svg { fill: #fff !important; }
.n8n-chat__toggle-button:hover,
.n8n-chat-toggle:hover,
.chat-window-toggle:hover,
.chat-window-toggle:focus {
  background-color: #018877 !important;
  transform: scale(1.05);
}

/* Ventana */
.n8n-chat__window,
.n8n-chat-window {
  border-radius: 1rem !important;
  overflow: hidden !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 25px -5px rgba(30,41,59,0.15), 0 8px 10px -6px rgba(30,41,59,0.1) !important;
  font-family: inherit !important;
  background: #FFFFFF !important;
}

/* Header con degradado teal -> sky */
.n8n-chat__header,
.n8n-chat-header,
.chat-header {
  background: linear-gradient(135deg, #00A693 0%, #00BFFF 100%) !important;
  color: #fff !important;
}
.n8n-chat__header h1,
.n8n-chat__header p,
.n8n-chat-header h1,
.n8n-chat-header p,
.chat-header h1,
.chat-header p { color: #fff !important; }

/* Mensajes usuario */
.n8n-chat__message--user,
.n8n-chat-message-user {
  background-color: #00A693 !important;
  color: #fff !important;
  border-radius: 1rem 1rem 0.25rem 1rem !important;
}

/* Mensajes bot */
.n8n-chat__message--bot,
.n8n-chat-message-bot {
  background-color: #F8FAFC !important;
  color: #1E293B !important;
  border-radius: 1rem 1rem 1rem 0.25rem !important;
  border: 1px solid #E2E8F0 !important;
}

/* Input */
.n8n-chat__input,
.n8n-chat-input {
  border-radius: 9999px !important;
  border: 1px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  color: #1E293B !important;
}
.n8n-chat__input:focus,
.n8n-chat-input:focus {
  border-color: #00A693 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,166,147,0.2) !important;
}

/* Botón enviar */
.n8n-chat__send-button,
.n8n-chat-send-button,
.chat-input-send-button {
  background-color: transparent !important;
  color: #00A693 !important;
  border-radius: 9999px !important;
  transition: background-color .2s ease, color .2s ease !important;
}
.n8n-chat__send-button svg,
.n8n-chat-send-button svg,
.chat-input-send-button svg { fill: #00A693 !important; }
.n8n-chat__send-button:hover,
.n8n-chat-send-button:hover,
.chat-input-send-button:hover:not([disabled]) {
  background-color: #00A693 !important;
  color: #fff !important;
}
.n8n-chat__send-button:hover svg,
.n8n-chat-send-button:hover svg,
.chat-input-send-button:hover:not([disabled]) svg { fill: #fff !important; }

/* Footer */
.n8n-chat__footer,
.n8n-chat-footer {
  color: #64748B !important;
  font-size: .75rem !important;
}

/* Botón "Nueva conversación" / get started */
.n8n-chat__get-started,
.n8n-chat-get-started {
  background-color: #00A693 !important;
  color: #fff !important;
  border-radius: 9999px !important;
}
.n8n-chat__get-started:hover,
.n8n-chat-get-started:hover { background-color: #018877 !important; }

/* Quitar outline azul por defecto de los botones */
.chat-button:focus { box-shadow: 0 0 0 .2rem rgba(0,166,147,.35) !important; }