/* Asistente de ArcaWebs: burbuja, panel y tema del widget @n8n/chat.
   El widget corre en modo "fullscreen" dentro de .ac-body; la burbuja, la
   cabecera y el aviso son propios (chat.js). Paleta y tipografia de la landing. */

#arca-chat {
  --ac-bg: #0A0C0F;
  --ac-panel: #0F1216;
  --ac-raised: #161A20;
  --ac-line: rgba(255, 255, 255, .09);
  --ac-text: #E8EAED;
  --ac-muted: #9AA3AD;
  --ac-acc: var(--acc, #74C0D6);
  --ac-acc-ink: #061216;

  --chat--font-family: "IBM Plex Sans", system-ui, sans-serif;
  --chat--font-family--monospace: "IBM Plex Mono", ui-monospace, monospace;
  --chat--color-primary: var(--ac-acc);
  --chat--color-primary-shade-50: #5FB0C8;
  --chat--color-primary--shade-100: #4C9DB5;
  --chat--color-secondary: var(--ac-acc);
  --chat--color-secondary-shade-50: #5FB0C8;
  --chat--color-white: var(--ac-text);
  --chat--color-light: var(--ac-panel);
  --chat--color-light-shade-50: var(--ac-raised);
  --chat--color-light-shade-100: #1E232A;
  --chat--color-medium: #2A3038;
  --chat--color-dark: var(--ac-text);
  --chat--color-disabled: #5B636C;
  --chat--color-typing: var(--ac-muted);
  --chat--spacing: 1rem;
  --chat--border-radius: 10px;
  --chat--body--background: var(--ac-panel);
  --chat--footer--background: var(--ac-panel);
  --chat--footer--color: var(--ac-text);
  --chat--footer--border-top: 1px solid var(--ac-line);
  --chat--message--font-size: 14.5px;
  --chat--message-line-height: 1.5;
  --chat--message--padding: 10px 14px;
  --chat--message--border-radius: 12px;
  --chat--message--margin-bottom: 10px;
  --chat--message--bot--background: var(--ac-raised);
  --chat--message--bot--color: var(--ac-text);
  --chat--message--bot--border: 1px solid var(--ac-line);
  --chat--message--user--background: var(--ac-acc);
  --chat--message--user--color: var(--ac-acc-ink);
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(255, 255, 255, .06);
  --chat--messages-list--padding: 16px;
  --chat--input--background: var(--ac-raised);
  --chat--input--text-color: var(--ac-text);
  --chat--input--border: 1px solid var(--ac-line);
  --chat--input--border-active: 1px solid var(--ac-acc);
  --chat--input--font-size: 15px;
  --chat--input--container--background: var(--ac-panel);
  --chat--input--send--button--background: transparent;
  --chat--input--send--button--color: var(--ac-acc);
  --chat--input--send--button--background-hover: transparent;
  --chat--input--send--button--color-hover: #A6DCEB;
  --chat--textarea--height: 46px;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

/* Burbuja con la mascota (PNG/WebP con fondo transparente, sin circulo) */
#arca-chat .ac-toggle {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(116, 192, 214, .28));
  transition: transform .25s ease, filter .25s ease;
  display: block;
  margin-left: auto;
}
#arca-chat .ac-toggle img {
  width: 100%;
  height: 100%;
  display: block;
}
#arca-chat .ac-toggle:hover { transform: translateY(-3px); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(116, 192, 214, .5)); }
#arca-chat .ac-toggle:focus-visible { outline: 2px solid var(--ac-acc); outline-offset: 4px; }
#arca-chat .ac-toggle .ac-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7FD3A8;
  box-shadow: 0 0 0 2px var(--ac-bg);
}
#arca-chat.is-open .ac-toggle { display: none; }

/* Mensaje de invitacion junto a la burbuja */
#arca-chat .ac-teaser {
  position: absolute;
  right: 0;
  bottom: 90px;
  width: max-content;
  max-width: min(270px, calc(100vw - 40px));
  padding: 12px 34px 12px 14px;
  background: var(--ac-raised);
  color: var(--ac-text);
  border: 1px solid var(--ac-line);
  border-radius: 12px 12px 4px 12px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  cursor: pointer;
  animation: ac-in .35s ease both;
}
#arca-chat .ac-teaser strong { color: var(--ac-acc); font-weight: 500; }
#arca-chat .ac-teaser-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ac-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
#arca-chat .ac-teaser-close:hover { color: var(--ac-text); background: rgba(255, 255, 255, .06); }

/* Panel */
#arca-chat .ac-panel {
  width: 380px;
  height: min(620px, calc(100vh - 40px));
  height: min(620px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--ac-panel);
  border: 1px solid var(--ac-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(116, 192, 214, .08);
  animation: ac-in .3s ease both;
}
#arca-chat .ac-panel[hidden], #arca-chat .ac-teaser[hidden] { display: none; }

#arca-chat .ac-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(180deg, rgba(116, 192, 214, .10), rgba(116, 192, 214, 0)), var(--ac-bg);
  border-bottom: 1px solid var(--ac-line);
}
#arca-chat .ac-head img {
  width: 46px;
  height: 46px;
  flex: none;
  filter: drop-shadow(0 0 8px rgba(116, 192, 214, .25));
}
#arca-chat .ac-title { flex: 1; min-width: 0; }
#arca-chat .ac-title strong {
  display: block;
  font-family: Archivo, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--ac-text);
}
#arca-chat .ac-title span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ac-muted);
}
#arca-chat .ac-title span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7FD3A8;
}
#arca-chat .ac-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ac-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
#arca-chat .ac-close:hover { background: rgba(255, 255, 255, .06); color: var(--ac-text); }
#arca-chat .ac-close:focus-visible { outline: 2px solid var(--ac-acc); outline-offset: 2px; }

#arca-chat .ac-body { flex: 1; min-height: 0; position: relative; }
#arca-chat .ac-estado {
  margin: 0;
  padding: 24px 20px;
  color: var(--ac-muted);
  font-size: 14px;
  line-height: 1.5;
}
#arca-chat .ac-estado a { color: var(--ac-acc); }

#arca-chat .ac-legal {
  margin: 0;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--ac-line);
  background: var(--ac-bg);
  color: var(--ac-muted);
  font-size: 11.5px;
  line-height: 1.4;
}
#arca-chat .ac-legal a { color: var(--ac-text); text-decoration: underline; text-underline-offset: 2px; }

/* Ajustes del widget de n8n dentro del panel */
#arca-chat .chat-layout .chat-header,
#arca-chat .chat-powered-by { display: none; }
#arca-chat .chat-layout { background: var(--ac-panel); }
#arca-chat .chat-message-markdown a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
#arca-chat .chat-message-from-bot .chat-message-markdown a { color: var(--ac-acc); }
#arca-chat .chat-message-markdown p { margin: 0 0 .6em; }
#arca-chat .chat-message-markdown p:last-child { margin-bottom: 0; }
#arca-chat .chat-input textarea::placeholder { color: #6E7781; }

@keyframes ac-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  #arca-chat { right: 16px; bottom: 16px; }
  #arca-chat.is-open { left: 0; right: 0; bottom: 0; top: 0; }
  #arca-chat .ac-panel {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
  }
  #arca-chat .ac-toggle { width: 68px; height: 68px; }
  #arca-chat .ac-teaser { bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  #arca-chat .ac-panel, #arca-chat .ac-teaser { animation: none; }
  #arca-chat .ac-toggle { transition: none; }
}

@media print {
  #arca-chat { display: none; }
}