/* ============================================================
   Luju, el asistente (botón flotante, panel y pestaña propia)
   ============================================================ */
.asis-fab {
  position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); z-index: 600;
  width: 56px; height: 56px; padding: 0; border-radius: var(--r-full);
  background: transparent; border: 0; box-shadow: var(--sh-3);
  cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease;
}
/* La bola de Luju sobre un disco blanco, también en el tema oscuro: sus
   líneas negras no se verían sobre un fondo oscuro. */
.luju-marca {
  width: 100%; height: 100%; display: block; box-sizing: border-box; padding: 9%;
  border-radius: var(--r-full); background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
  object-fit: contain; -webkit-user-select: none; user-select: none;
}
.asis-fab:hover { transform: translateY(-2px); }
.asis-fab:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.asis-fab[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--brand-ring), var(--sh-3); }

/* Que el botón no tape el final de las pantallas ni los avisos */
.con-asis .toasts { bottom: calc(var(--s-5) + 68px + env(safe-area-inset-bottom, 0px)); }
/* Con el panel abierto, los avisos salen a su lado y no encima */
.asis-abierto .toasts { right: calc(var(--s-5) + 400px); }
@media (min-width: 641px) and (max-width: 1000px) {
  .asis-abierto .toasts { right: var(--s-5); bottom: auto; top: calc(var(--topbar-h, 64px) + var(--s-2)); }
}

.asis {
  position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + 68px + env(safe-area-inset-bottom, 0px)); z-index: 610;
  width: 384px; max-width: calc(100vw - 32px);
  height: min(600px, calc(100dvh - 120px));
  display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  overflow: hidden; animation: popIn 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.asis[hidden] { display: none; }

.asis__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
.asis__logo { width: 36px; height: 36px; flex: 0 0 auto; display: block; }
.luju-por { margin-left: 4px; font-size: var(--fs-11); font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); white-space: nowrap; }
.asis__head h2 { font-size: var(--fs-15); font-weight: 700; line-height: 1.2; }
.asis__head p { font-size: var(--fs-12); color: var(--text-muted); margin-top: 1px; }

.asis__log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4);
  background: var(--bg-app);
}
.asis__msg { max-width: 90%; padding: 10px 12px; font-size: var(--fs-14); line-height: 1.45; overflow-wrap: anywhere; }
.asis__msg--bot { align-self: flex-start; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; }
.asis__msg--yo { align-self: flex-end; background: var(--brand); color: #fff; border-radius: 14px 14px 4px 14px; }
.asis__msg p + p, .asis__msg p + .asis__filas, .asis__filas + p { margin-top: 6px; }
.asis__msg b { font-weight: 700; }
.asis__nota { font-size: var(--fs-12); color: var(--text-secondary); }
.asis__nota--alerta { color: var(--warn-ink); }

.asis__filas { list-style: none; margin: 0; padding: 0; }
.asis__filas li {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3);
  padding: 7px 0; border-top: 1px solid var(--border); font-size: var(--fs-13);
}
.asis__filas li:first-child { border-top: 0; }
.asis__filas span { min-width: 0; }
.asis__filas small { display: block; font-size: var(--fs-12); color: var(--text-muted); margin-top: 1px; }
.asis__filas b { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.asis__filas li.is-link { cursor: pointer; margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: var(--r-sm); }
.asis__filas li.is-link:hover { background: var(--bg-muted); }
.asis__filas li.is-link:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: -2px; }
.asis__fecha { display: block; font-size: var(--fs-12); font-weight: 600; color: var(--text-brand); }

.asis__botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.asis__botones .btn svg { margin-left: 2px; margin-right: 0; }
.asis__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.asis__chip {
  padding: 6px 11px; border-radius: var(--r-full); border: 1px solid var(--border-strong);
  background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--fs-13); line-height: 1.3;
  text-align: left; cursor: pointer; transition: border-color 120ms ease, color 120ms ease;
}
.asis__chip:hover { border-color: var(--brand); color: var(--text-brand); }
.asis__chip:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 1px; }

.asis__puntos { display: inline-flex; gap: 4px; padding: 4px 2px; }
.asis__puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: asisPunto 900ms infinite ease-in-out; }
.asis__puntos i:nth-child(2) { animation-delay: 150ms; }
.asis__puntos i:nth-child(3) { animation-delay: 300ms; }
@keyframes asisPunto { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.asis__pie { display: flex; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--border); background: var(--bg-elevated); }
.asis__input {
  flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--fs-14);
}
.asis__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.asis__enviar {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-full); background: var(--brand); color: #fff; cursor: pointer;
}
.asis__enviar:hover { background: var(--brand-hover); }
.asis__enviar:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }

/* Teléfono: el panel ocupa toda la pantalla */
@media (max-width: 640px) {
  .asis-fab { right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  .con-asis .view__inner { padding-bottom: calc(var(--s-4) + 68px); }
  .con-asis .toasts { bottom: calc(var(--s-4) + 64px + env(safe-area-inset-bottom, 0px)); }
  .asis {
    inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh;
    border: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px);
  }
  .asis__pie { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
  .asis-abierto .asis-fab { display: none; }
  .asis-abierto .toasts { right: var(--s-2); left: var(--s-2); width: auto; bottom: auto; top: calc(var(--s-2) + env(safe-area-inset-top, 0px)); }
  .asis__msg { max-width: 94%; }
}

/* Pestaña Luju: la conversación ocupa la página y el botón redondo se esconde */
.luju-en-pagina .asis-fab, .luju-en-pagina .asis { display: none; }
/* la conversación llena la pantalla: mismo margen arriba y abajo */
.luju-en-pagina .view__inner { padding-bottom: var(--s-6); }
.luju-pagina {
  display: flex; flex-direction: column; gap: var(--s-4); max-width: 880px; margin: 0 auto;
  height: calc(100dvh - var(--topbar-h, 64px) - var(--s-6) - var(--s-6)); min-height: 440px;
}
.luju-pagina__head { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.luju-pagina__marca { width: 48px; height: 48px; flex: 0 0 auto; }
.luju-pagina__head h1 { font-size: var(--fs-24); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.luju-pagina__head .luju-por { font-size: var(--fs-12); }
.luju-pagina__head p { font-size: var(--fs-13); color: var(--text-secondary); margin-top: 2px; }
.luju-pagina__chat {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.luju-pagina .asis__msg { max-width: min(90%, 640px); }
@media (max-width: 860px) {
  .luju-en-pagina .view__inner { padding-bottom: var(--s-4); }
  .luju-pagina { height: calc(100dvh - var(--topbar-h, 64px) - var(--s-4) - var(--s-4)); }
}
@media (max-width: 640px) {
  .luju-en-pagina .toasts { bottom: calc(var(--s-4) + 64px + env(safe-area-inset-bottom, 0px)); }
  .luju-pagina { gap: var(--s-3); min-height: 360px; }
  .luju-pagina__marca { width: 40px; height: 40px; }
  .luju-pagina__head h1 { font-size: var(--fs-20); }
  .luju-pagina__chat { border-radius: var(--r-lg); }
  .luju-pagina .asis__pie { padding-bottom: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .asis, .asis__puntos i { animation: none; }
  .asis-fab { transition: none; }
  .asis-fab:hover { transform: none; }
}
@media print { .asis-fab, .asis { display: none !important; } }