:root {
  /* Marca */
  --violet:#9d2fff; --orange:#ff5b00; --amber:#ffc86f;
  --graphite:#0a0a0e; --paper:#ffffff; --line:#e5e5ef;

  /* Widget base */
  --chat--font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  --chat--message--font-size: 15px;
  --chat--window--width: 392px;
  --chat--window--height: 560px;
  --chat--window--border-radius: 20px;
  --chat--window--box-shadow: 0 16px 44px rgba(10,10,14,.18);

  /* Colores de tema */
  --chat--color--primary: var(--orange);
  --chat--color--primary-shade-100: var(--violet);

  /* Botón flotante (launcher) */
  --chat--toggle--background: var(--orange);
  --chat--toggle--hover--background: var(--violet); /* 💜 hover morado */
  --chat--toggle--active--background: var(--violet);
  --chat--toggle--color: #fff;

  --chat--header--background: var(--graphite);
  --chat--header--color: #fff;
  --chat--button--hover--background: var(--violet);

  --chat--message--user--background: var(--orange);
  --chat--message--user--color: #fff;
  --chat--message--bot--background: #fff;
  --chat--message--bot--color: var(--graphite);
}

/* Caja del chat con borde de marca */
.chat-window{
  background: var(--paper) !important;
  border: 1.4px solid var(--line) !important;
  border-top: 4px solid var(--orange) !important;
  border-radius: 20px !important;
}