/**
 * Tema @n8n/chat alineado con alejandroperellon.es
 * (acento #1e3a5f, ink #0f172a, teal interacción #0d9488, IBM Plex Sans)
 * Mismo bloque puedes pegarlo en n8n → Chat Trigger → Custom CSS (solo :root + overrides).
 */
:root {
  /* Colores marca (Tailwind: accent / slate / teal demo) */
  --chat--color--primary: #1e3a5f;
  --chat--color--primary-shade-50: #172d4c;
  --chat--color--primary--shade-100: #122338;
  --chat--color--secondary: #0d9488;
  --chat--color-secondary-shade-50: #0f766e;
  --chat--color-white: #ffffff;
  --chat--color-light: #f8fafc;
  --chat--color-light-shade-50: #f1f5f9;
  --chat--color-light-shade-100: #cbd5e1;
  --chat--color-medium: #e2e8f0;
  --chat--color-dark: #0f172a;
  --chat--color-disabled: #cbd5e1;
  --chat--color-typing: #475569;

  --chat--spacing: 1rem;
  --chat--border-radius: 0.5rem;
  --chat--transition-duration: 0.15s;
  --chat--font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --chat--window--width: min(100vw - 2rem, 400px);
  --chat--window--height: min(100dvh - 6rem, 600px);
  --chat--window--bottom: var(--chat--spacing);
  --chat--window--right: var(--chat--spacing);
  --chat--window--z-index: 9999;
  --chat--window--border: 1px solid var(--chat--color-medium);
  --chat--window--border-radius: 0.75rem;
  --chat--window--margin-bottom: var(--chat--spacing);

  --chat--header-height: auto;
  --chat--header--padding: 0.875rem 1rem;
  --chat--header--background: var(--chat--color--primary);
  --chat--header--color: var(--chat--color-light);
  --chat--header--border-top: none;
  --chat--header--border-bottom: none;
  --chat--header--border-left: none;
  --chat--header--border-right: none;
  --chat--heading--font-size: 1.125rem;
  --chat--subtitle--font-size: 0.8125rem;
  --chat--subtitle--line-height: 1.5;

  --chat--message--font-size: 0.9375rem;
  --chat--message--padding: 0.75rem 1rem;
  --chat--message--border-radius: 0.75rem;
  --chat--message-line-height: 1.55;
  --chat--message--margin-bottom: calc(var(--chat--spacing) * 0.75);
  --chat--message--bot--background: var(--chat--color-white);
  --chat--message--bot--color: var(--chat--color-dark);
  --chat--message--bot--border: 1px solid var(--chat--color-medium);
  --chat--message--user--background: var(--chat--color--secondary);
  --chat--message--user--color: var(--chat--color-white);
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(15, 23, 42, 0.06);
  --chat--messages-list--padding: var(--chat--spacing);

  --chat--toggle--size: 56px;
  --chat--toggle--width: var(--chat--toggle--size);
  --chat--toggle--height: var(--chat--toggle--size);
  --chat--toggle--border-radius: 50%;
  --chat--toggle--background: var(--chat--color--primary);
  --chat--toggle--hover--background: var(--chat--color--primary-shade-50);
  --chat--toggle--active--background: var(--chat--color--primary--shade-100);
  --chat--toggle--color: var(--chat--color-white);

  --chat--textarea--height: 48px;
  --chat--textarea--max-height: 30rem;
  --chat--input--font-size: 0.9375rem;
  --chat--input--border: 1px solid var(--chat--color-medium);
  --chat--input--border-radius: 0.5rem;
  --chat--input--padding: 0.65rem 0.85rem;
  --chat--input--background: var(--chat--color-white);
  --chat--input--text-color: var(--chat--color-dark);
  --chat--input--line-height: 1.5;
  --chat--input--placeholder--font-size: var(--chat--input--font-size);
  --chat--input--border-active: 1px solid var(--chat--color--secondary);
  --chat--input--left--panel--width: 2rem;

  --chat--button--padding: 0.5rem 1rem;
  --chat--button--border-radius: var(--chat--border-radius);
  --chat--button--font-size: 0.9375rem;
  --chat--button--line-height: 1.2;
  --chat--button--color--primary: #f8fafc;
  --chat--button--background--primary: var(--chat--color--secondary);
  --chat--button--border--primary: none;
  --chat--button--color--primary--hover: #f8fafc;
  --chat--button--background--primary--hover: var(--chat--color-secondary-shade-50);
  --chat--button--border--primary--hover: none;
  --chat--button--color--primary--disabled: #f8fafc;
  --chat--button--background--primary--disabled: #94a3b8;
  --chat--button--border--primary--disabled: none;
  --chat--button--color--secondary: #f8fafc;
  --chat--button--background--secondary: #64748b;
  --chat--button--border--secondary: none;
  --chat--button--color--secondary--hover: #f8fafc;
  --chat--button--background--secondary--hover: #475569;
  --chat--button--border--secondary--hover: none;
  --chat--button--color--secondary--disabled: #f8fafc;
  --chat--button--background--secondary--disabled: #cbd5e1;
  --chat--button--border--secondary--disabled: none;
  --chat--close--button--color-hover: var(--chat--color-light);

  --chat--input--send--button--background: transparent;
  --chat--input--send--button--color: var(--chat--color--secondary);
  --chat--input--send--button--background-hover: rgba(13, 148, 136, 0.08);
  --chat--input--send--button--color-hover: var(--chat--color-secondary-shade-50);
  --chat--input--file--button--background: transparent;
  --chat--input--file--button--color: var(--chat--color--secondary);
  --chat--input--file--button--background-hover: rgba(13, 148, 136, 0.06);
  --chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50);
  --chat--files-spacing: 0.25rem;

  --chat--body--background: var(--chat--color-light);
  --chat--footer--background: var(--chat--color-white);
  --chat--footer--color: var(--chat--color-dark);
}

/* Burbujas: ancho cómodo en móvil (similar a la demo del sitio) */
.chat-message {
  max-width: min(100%, 28rem);
}

/* Respuestas del bot: respetar saltos de línea del texto (tras JSON normalizado) */
#n8n-chat .chat-message-markdown {
  word-break: break-word;
}
#n8n-chat .chat-message-markdown p {
  white-space: pre-wrap;
}

/* Enlaces en mensajes del bot: chips con icono (script n8n-chat-link-enhance.js) */
#n8n-chat .ap-chat-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
  margin: 0.2rem 0.35rem 0.2rem 0;
  padding: 0.35rem 0.75rem;
  max-width: 100%;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none !important;
  border: 1px solid var(--chat--color-medium);
  background: var(--chat--color-white);
  color: var(--chat--color-dark);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#n8n-chat .ap-chat-link:hover {
  border-color: var(--chat--color--secondary);
  color: var(--chat--color-secondary-shade-50);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
#n8n-chat .ap-chat-link__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
#n8n-chat .ap-chat-link__icon svg {
  display: block;
}
#n8n-chat .ap-chat-link--icon-only {
  padding: 0.4rem;
  justify-content: center;
}
#n8n-chat .ap-chat-link--linkedin {
  border-color: rgba(10, 102, 194, 0.45);
  color: #0a66c2;
}
#n8n-chat .ap-chat-link--linkedin:hover {
  background: rgba(10, 102, 194, 0.06);
  border-color: #0a66c2;
  color: #084d94;
}
/* LinkedIn / GitHub: aspecto botón (icono + texto) */
#n8n-chat .ap-chat-link--btn.ap-chat-link--linkedin,
#n8n-chat .ap-chat-link--btn.ap-chat-link--github {
  min-height: 2.375rem;
  padding: 0.5rem 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
#n8n-chat .ap-chat-link--btn.ap-chat-link--linkedin:active,
#n8n-chat .ap-chat-link--btn.ap-chat-link--github:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}
#n8n-chat .ap-chat-link--btn.ap-chat-link--linkedin:focus-visible,
#n8n-chat .ap-chat-link--btn.ap-chat-link--github:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
#n8n-chat .ap-chat-link--github {
  border-color: rgba(36, 41, 47, 0.35);
  color: #24292f;
}
#n8n-chat .ap-chat-link--github:hover {
  background: rgba(36, 41, 47, 0.06);
}
#n8n-chat .ap-chat-link--whatsapp {
  border-color: rgba(37, 211, 102, 0.5);
  color: #128c7e;
}
#n8n-chat .ap-chat-link--mail,
#n8n-chat .ap-chat-link--phone {
  border-color: rgba(13, 148, 136, 0.45);
  color: var(--chat--color--secondary);
}
#n8n-chat .ap-chat-link__text--vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#n8n-chat .ap-chat-link--icon-only {
  position: relative;
}
#n8n-chat .ap-chat-link--pdf {
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}
#n8n-chat .ap-chat-link--pdf:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: #dc2626;
}