/* Hydraluz — Asistente IA · widget de chat.
   Usa los hex de la marca directamente para funcionar con cualquier tema. */
.hzai {
  --hzai-forest: #35452C;
  --hzai-sage: #6E7C58;
  --hzai-agua: #3F6E7D;
  --hzai-clay: #A5663B;
  --hzai-ink: #242A1E;
  --hzai-ink-soft: #5E5A48;
  --hzai-surface: #F8F8F5;
  --hzai-white: #FFFFFF;
  --hzai-line: rgba(36, 42, 30, 0.13);
  --hzai-grotesk: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --hzai-body: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hzai-display: "Fraunces", "Palatino Linotype", Georgia, serif;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
}
.hzai *, .hzai *::before, .hzai *::after { box-sizing: border-box; }

/* Botón flotante */
.hzai__toggle {
  width: 60px; height: 60px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--hzai-forest); color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(36,42,30,.5);
  transition: transform .15s ease;
}
.hzai__toggle:hover { transform: translateY(-2px); }
.hzai__toggle svg { width: 26px; height: 26px; }

/* Panel */
.hzai__panel {
  position: absolute; right: 0; bottom: 74px;
  width: min(370px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  background: var(--hzai-white); border: 1px solid var(--hzai-line);
  border-radius: 20px; overflow: hidden; display: none;
  flex-direction: column; box-shadow: 0 24px 60px -20px rgba(36,42,30,.45);
}
.hzai.is-open .hzai__panel { display: flex; }
.hzai.is-open .hzai__toggle { background: var(--hzai-sage); }

/* Cabecera: avatar + nombre + estado "En línea" */
.hzai__head { background: var(--hzai-forest); color: #fff; padding: 13px 16px; display: flex; align-items: center; gap: 11px; }
.hzai__avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.hzai__avatar svg, .hzai__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hzai__brand { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hzai__name { font-family: var(--hzai-display); font-size: 1.1rem; line-height: 1; }
.hzai__role { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hzai-grotesk); font-size: .66rem; letter-spacing: .03em; color: #CBD1B9; }
.hzai__on { width: 7px; height: 7px; border-radius: 50%; background: #7BC47F; flex: none; animation: hzai-pulse 1.8s ease-in-out infinite; }
@keyframes hzai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123, 196, 127, .55); }
  50% { box-shadow: 0 0 0 5px rgba(123, 196, 127, 0); }
}

/* Mensajes */
.hzai__log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--hzai-surface); }
.hzai__msg { max-width: 82%; padding: 11px 14px; border-radius: 16px; font-family: var(--hzai-body); font-size: .92rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.hzai__msg--bot { background: #fff; border: 1px solid var(--hzai-line); color: var(--hzai-ink); align-self: flex-start; border-bottom-left-radius: 5px; }
.hzai__msg--user { background: var(--hzai-forest); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.hzai__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--hzai-line); border-radius: 16px; }
.hzai__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--hzai-sage); animation: hzai-b 1s infinite; }
.hzai__typing span:nth-child(2) { animation-delay: .15s; }
.hzai__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hzai-b { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Entrada */
.hzai__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--hzai-line); background: #fff; }
.hzai__input { flex: 1; border: 1px solid var(--hzai-line); border-radius: 999px; padding: 11px 16px; font-family: var(--hzai-body); font-size: .92rem; resize: none; max-height: 90px; }
.hzai__input:focus { outline: 2px solid var(--hzai-agua); outline-offset: 1px; }
.hzai__send { flex: none; width: 42px; height: 42px; border: 0; border-radius: 999px; background: var(--hzai-forest); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hzai__send:disabled { opacity: .5; cursor: default; }
.hzai__send svg { width: 18px; height: 18px; }
.hzai__foot { text-align: center; font-family: var(--hzai-grotesk); font-size: .6rem; letter-spacing: .06em; color: var(--hzai-ink-soft); padding: 6px; background: #fff; }

@media (prefers-reduced-motion: reduce) { .hzai__typing span, .hzai__on { animation: none; } }