/* =========================================================
   N8N Chat – Hoja de estilos breve y documentada por secciones
   Edita primero la sección "TEMA (variables)" para cambios rápidos
   ========================================================= */

/* =========================
   1) RESETS Y AJUSTES BASE
   ========================= */
#n8n-chat .chat-layout border { border-top: 1px solid red; }  /*  {box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}*/
#n8n-chat .chat-layout .chat-header h1,
#n8n-chat .chat-layout .chat-header p { margin: 0; }

/* #n8n-chat .chat-layout { box-shadow: none;} */
#n8n-chat .chat-layout .chat-header { gap: 0 !important; }

#n8n-chat .chat-layout .chat-footer { border-top: 1px solid #ededed; }
#n8n-chat .chat-layout .chat-footer {box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}
#n8n-chat textarea { box-shadow: none; }



/* =========================
   2) TEMA (VARIABLES)
   Cambia colores, radios y tamaños globales del widget
   ========================= */
#n8n-chat {
  /* -- Colores principales / botón flotante -- */
  --chat--color-primary: #1f93ff;
  --chat--toggle--background: #1f93ff;
  --chat--toggle--hover--background: #157ad8;
  --chat--toggle--active--background: #157ad8;
  --chat--color-primary-shade-50: #157ad8;
  --chat--color-primary-shade-100: #157ad8;

  /* -- Cabecera y superficies -- */
  --chat--header--background: linear-gradient(90deg, #0056b3, #007bff);
  --chat--header--color: #FFFFFF;
  --chat--body--background: #f9f9fb;
  --chat--footer--background: #f9f9fb;


  /* -- Burbujas y bordes -- */
  --chat--border-radius: 1rem;
  --chat--message--user--background: #d7eaff;
  --chat--message--user--color: #000000;
  --chat--message--bot--border: 1px solid #ededed;

  /* -- Tamaños y tipografía -- */
  --chat--toggle--size: 55px;
  --chat--heading--font-size: 1.1em;
  --chat--message--font-size: 0.9rem;
}