/*
 * Dex — tema SMARDIG para el widget @n8n/chat (v1.42.1).
 * Se carga DESPUÉS de style.css del CDN para sobrescribir sus variables.
 */
:root{
  /* Paleta */
  --chat--color--primary:#C6FF3A;
  --chat--color--primary-shade-50:#D8FF6B;
  --chat--color--primary--shade-100:#B3EC27;
  --chat--color--secondary:#C6FF3A;
  --chat--color-secondary-shade-50:#D8FF6B;
  --chat--color-white:#131310;
  --chat--color-light:#F5F5F0;
  --chat--color-light-shade-50:#232320;
  --chat--color-light-shade-100:#2E2E2A;
  --chat--color-medium:#3A3A35;
  --chat--color-dark:#0A0A0A;
  --chat--color-disabled:#5A5A55;
  --chat--color-typing:#8C8C86;

  /* Base */
  --chat--spacing:1rem;
  --chat--border-radius:12px;
  --chat--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Ventana */
  --chat--window--width:380px;
  --chat--window--height:560px;
  --chat--window--bottom:20px;
  --chat--window--right:20px;
  --chat--window--z-index:9999;
  --chat--window--border:1px solid #2E2E2A;
  --chat--window--border-radius:16px;
  --chat--window--margin-bottom:12px;

  /* Cabecera */
  --chat--header--padding:16px 18px;
  --chat--header--background:#131310;
  --chat--header--color:#F5F5F0;
  --chat--header--border-bottom:1px solid #232320;
  --chat--heading--font-size:1.2em;
  --chat--subtitle--font-size:13px;
  --chat--subtitle--line-height:1.5;

  /* Mensajes */
  --chat--body--background:#0A0A0A;
  --chat--message--font-size:14.5px;
  --chat--message--padding:12px 14px;
  --chat--message--border-radius:14px;
  --chat--message-line-height:1.55;
  --chat--message--bot--background:#1A1A16;
  --chat--message--bot--color:#F5F5F0;
  --chat--message--bot--border:1px solid #2A2A25;
  --chat--message--user--background:#C6FF3A;
  --chat--message--user--color:#0F1400;
  --chat--message--user--border:none;
  --chat--message--pre--background:rgba(245,245,240,.06);

  /* Burbuja (toggle) */
  --chat--toggle--size:60px;
  --chat--toggle--background:#C6FF3A;
  --chat--toggle--hover--background:#D8FF6B;
  --chat--toggle--active--background:#B3EC27;
  --chat--toggle--color:#0F1400;

  /* Entrada de texto */
  --chat--textarea--height:50px;
  --chat--input--font-size:14.5px;
  --chat--input--border:0;
  --chat--input--border-radius:0;
  --chat--input--background:#131310;
  --chat--input--text-color:#F5F5F0;
  --chat--input--border-active:0;
  --chat--input--send--button--background:transparent;
  --chat--input--send--button--color:#C6FF3A;
  --chat--input--send--button--background-hover:rgba(198,255,58,.12);
  --chat--input--send--button--color-hover:#D8FF6B;
  --chat--input--file--button--background:transparent;
  --chat--input--file--button--color:#C6FF3A;
  --chat--input--file--button--color-hover:#D8FF6B;

  /* Botones */
  --chat--button--border-radius:999px;
  --chat--button--color--primary:#0F1400;
  --chat--button--background--primary:#C6FF3A;
  --chat--button--color--primary--hover:#0F1400;
  --chat--button--background--primary--hover:#D8FF6B;
  --chat--button--color--primary--disabled:#0F1400;
  --chat--button--background--primary--disabled:#7C9A2A;
  --chat--button--color--secondary:#F5F5F0;
  --chat--button--background--secondary:#232320;
  --chat--button--color--secondary--hover:#F5F5F0;
  --chat--button--background--secondary--hover:#2E2E2A;
  --chat--close--button--color-hover:#C6FF3A;

  /* Pie */
  --chat--footer--background:#131310;
  --chat--footer--color:#8C8C86;
}

/* Título con la tipografía de títulos del sitio */
#n8n-chat .chat-header h1{
  font-family:'Clash Display','Inter',sans-serif;
  font-weight:600;
  letter-spacing:.01em;
}
#n8n-chat .chat-header p{color:#8C8C86;}

/* Área de escritura: separador y placeholder legible sobre fondo oscuro */
#n8n-chat .chat-footer{border-top:1px solid #232320;}
#n8n-chat .chat-inputs textarea::placeholder{color:#8C8C86;opacity:1;}
#n8n-chat .chat-inputs textarea:focus{outline:none;}

/* Pie sin "Powered by n8n": en v1.42.1 ese texto está fijo en el widget (i18n.footer no lo controla).
   Si el pie queda vacío, se oculta también su contenedor para no dejar una franja en blanco. */
#n8n-chat .chat-powered-by{display:none;}
#n8n-chat .chat-get-started-footer:not(:has(> :not(.chat-powered-by))){display:none;}

/* Enlaces dentro de las respuestas de Dex */
#n8n-chat .chat-message-from-bot a{color:#C6FF3A;text-decoration:underline;text-underline-offset:2px;}

/* Burbuja: sombra sutil y foco visible para teclado */
#n8n-chat .chat-window-toggle{box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 6px rgba(198,255,58,.10);}
#n8n-chat .chat-window-toggle:focus-visible,
#n8n-chat button:focus-visible{outline:2px solid #C6FF3A;outline-offset:3px;}

/* En index.html, en escritorio hay un riel fijo de 28px en el borde derecho:
   la burbuja se desplaza para no quedar encima. */
@media (min-width:821px){
  :root:has(.rail.right){--chat--window--right:48px;}
}

/* Móvil: burbuja más compacta y ventana casi a pantalla completa */
@media (max-width:600px){
  :root{
    --chat--window--right:14px;
    --chat--window--bottom:14px;
    --chat--toggle--size:54px;
    --chat--window--width:100vw;
    --chat--window--height:calc(100dvh - 110px);
  }
}