/* ============================================================
   LIMONNI — Widget de chat universal
   Plegable, persistente entre páginas, consciente del contexto.
   Usa los tokens de style.css (--linen, --gold, --ink…) con
   fallbacks para que funcione aunque se cargue aislado.
   ============================================================ */

:root {
  --lmw-w: 384px;
  --lmw-h: 620px;
  --lmw-radius: 3px;
}

/* ── Burbuja flotante ─────────────────────────────────────── */
.lmw-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9998;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 18px 9px 9px;
  background: var(--black, #0D0D0D);
  color: var(--linen, #FAF8F5);
  border: none; border-radius: 999px;
  cursor: pointer; font-family: var(--font-body, sans-serif);
  box-shadow: 0 8px 30px rgba(13,13,13,.26);
  transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .2s, box-shadow .2s;
}
.lmw-fab:hover  { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(13,13,13,.32); }
.lmw-fab.is-gone{ opacity: 0; pointer-events: none; transform: scale(.85) translateY(10px); }

/* 8-oct-2026 (mejora aprobada "Burbuja de Sofía sin tapar el
   corazón/título"): mientras el título+corazón de producto.php estén
   realmente a la vista (ver limonni-chat.js, IntersectionObserver sobre
   .pdp-heart), la burbuja se corre fuera de pantalla hacia la derecha en
   vez de ocultarse del todo — así no desaparece de golpe (lo que se
   sentiría como un parpadeo) y vuelve suavemente a su sitio en cuanto la
   clienta hace scroll. */
.lmw-fab--yield  { transform: translateX(120px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .2s; }
.lmw-nudge--yield{ transform: translateX(120px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .2s; }

.lmw-fab-avatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--gold, #C4984A); color: #0D0D0D;
  font-family: var(--font-display, Georgia, serif); font-style: italic;
  font-size: 17px; line-height: 1;
}
.lmw-fab-text  { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.lmw-fab-name  { font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.lmw-fab-sub   { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }

.lmw-fab-badge {
  position: absolute; top: 2px; right: 6px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold, #C4984A); color: #0D0D0D;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  box-shadow: 0 0 0 2px var(--black, #0D0D0D);
}

/* ── Globo proactivo ──────────────────────────────────────── */
.lmw-nudge {
  position: fixed; right: 22px; bottom: 84px; z-index: 9998;
  width: 272px; padding: 16px 18px 14px;
  background: var(--paper, #fff); color: var(--ink, #2A2420);
  border: 1px solid var(--stone, #E8E4DE); border-radius: var(--lmw-radius);
  box-shadow: 0 16px 48px rgba(13,13,13,.16);
  font-family: var(--font-body, sans-serif);
  animation: lmwPop .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes lmwPop { from { opacity:0; transform: translateY(10px) scale(.96); } }
.lmw-nudge::after {
  content: ''; position: absolute; right: 30px; bottom: -7px;
  width: 12px; height: 12px; background: var(--paper, #fff);
  border-right: 1px solid var(--stone, #E8E4DE);
  border-bottom: 1px solid var(--stone, #E8E4DE);
  transform: rotate(45deg);
}
.lmw-nudge-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--muted, #8C847A);
}
.lmw-nudge-text { font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; padding-right: 12px; }
.lmw-nudge-actions { display: flex; gap: 8px; }
.lmw-nudge-yes, .lmw-nudge-no {
  flex: 1; padding: 8px 10px; font-size: 12px; cursor: pointer;
  border-radius: 2px; font-family: inherit; letter-spacing: .02em;
  transition: opacity .15s;
}
.lmw-nudge-yes { background: var(--black, #0D0D0D); color: var(--linen, #FAF8F5); border: none; }
.lmw-nudge-no  { background: none; color: var(--muted, #8C847A); border: 1px solid var(--stone, #E8E4DE); }
.lmw-nudge-yes:hover, .lmw-nudge-no:hover { opacity: .8; }

/* ── Panel ────────────────────────────────────────────────── */
.lmw-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 9999;
  width: var(--lmw-w); height: min(var(--lmw-h), calc(100vh - 44px));
  display: flex; flex-direction: column;
  background: var(--linen, #FAF8F5);
  border: 1px solid var(--stone, #E8E4DE);
  border-radius: var(--lmw-radius); overflow: hidden;
  box-shadow: 0 30px 80px rgba(13,13,13,.24);
  font-family: var(--font-body, sans-serif);
  animation: lmwOpen .26s cubic-bezier(.2,.8,.3,1);
}
/* BUG CORREGIDO: [hidden] empataba en especificidad con ".lmw-panel"
   (ambos 0,1,0) y esta regla, al cargar después en la hoja de estilos,
   ganaba — el botón minimizar SÍ ponía hidden=true por JS, pero el
   panel seguía viéndose. Esta regla desempata explícitamente.
   MISMO BUG en .lmw-thread, .lmw-chips y .lmw-input (los 3 tienen
   "display: flex" como regla base) — se usa hidden=true/false en JS
   para alternar el formulario de nombre/correo con el hilo normal del
   chat, y sin esto, ambos se veían superpuestos al mismo tiempo. */
.lmw-panel[hidden], .lmw-thread[hidden], .lmw-chips[hidden], .lmw-input[hidden] { display: none !important; }
@keyframes lmwOpen { from { opacity: 0; transform: translateY(18px) scale(.98); } }

/* ── Cabecera ─────────────────────────────────────────────── */
.lmw-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 12px 13px 15px;
  background: var(--black, #0D0D0D); color: var(--linen, #FAF8F5);
  flex: 0 0 auto;
}
.lmw-head-avatar {
  position: relative; width: 36px; height: 36px; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--gold, #C4984A); color: #0D0D0D;
  font-family: var(--font-display, Georgia, serif); font-style: italic; font-size: 18px;
}
.lmw-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #35C759; box-shadow: 0 0 0 2px var(--black, #0D0D0D);
}
.lmw-head-id { flex: 1; min-width: 0; }
.lmw-head-name   { font-size: 14.5px; font-weight: 600; letter-spacing: .01em; }
.lmw-head-status { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; opacity: .5; margin-top: 2px; }
.lmw-head-actions { display: flex; gap: 2px; }
.lmw-icon {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: inherit;
  border-radius: 2px; opacity: .6; transition: opacity .15s, background .15s;
}
.lmw-icon:hover { opacity: 1; background: rgba(255,255,255,.09); }

/* ── Píldora de contexto ──────────────────────────────────── */
.lmw-ctx {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; flex: 0 0 auto;
  background: #14130F; color: rgba(250,248,245,.62);
  font-size: 11.5px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.lmw-ctx-eye  { display: flex; color: var(--gold, #C4984A); flex: 0 0 auto; }
#lmw-ctx-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmw-ctx-ask {
  flex: 0 0 auto; background: none; border: 1px solid rgba(196,152,74,.4);
  color: var(--gold, #C4984A); font-size: 10.5px; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 2px; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.lmw-ctx-ask:hover { background: rgba(196,152,74,.14); }

/* ── Hilo ─────────────────────────────────────────────────── */
.lmw-thread {
  flex: 1; overflow-y: auto; padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
}
.lmw-thread::-webkit-scrollbar { width: 4px; }
.lmw-thread::-webkit-scrollbar-thumb { background: var(--stone-2, #CCC6BC); border-radius: 4px; }

.lmw-msg {
  max-width: 82%; padding: 10px 14px; font-size: 14px; line-height: 1.58;
  border-radius: 3px; white-space: pre-wrap; word-wrap: break-word;
  animation: lmwIn .22s ease-out;
}
@keyframes lmwIn { from { opacity: 0; transform: translateY(6px); } }
.lmw-msg-ai   { align-self: flex-start; background: var(--paper, #fff); border: 1px solid var(--stone, #E8E4DE); color: var(--ink, #2A2420); }
.lmw-msg-user { align-self: flex-end;   background: var(--black, #0D0D0D); color: var(--linen, #FAF8F5); }
.lmw-msg-sys  { align-self: center; background: none; border: none; color: var(--muted, #8C847A);
                font-size: 11px; letter-spacing: .06em; text-transform: uppercase; max-width: 100%; text-align: center; }

/* Escribiendo… */
.lmw-typing { align-self: flex-start; display: flex; gap: 4px; padding: 13px 15px;
              background: var(--paper, #fff); border: 1px solid var(--stone, #E8E4DE); border-radius: 3px; }
.lmw-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--stone-2, #CCC6BC); animation: lmwBounce 1.2s infinite; }
.lmw-typing i:nth-child(2) { animation-delay: .18s; }
.lmw-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes lmwBounce { 0%,60%,100% { transform: translateY(0); opacity:.4; } 30% { transform: translateY(-4px); opacity:1; } }

/* ── Tarjetas de producto ─────────────────────────────────── */
.lmw-prods { display: flex; gap: 9px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.lmw-prods::-webkit-scrollbar { display: none; }
.lmw-prod {
  flex: 0 0 132px; background: var(--paper, #fff);
  border: 1px solid var(--stone, #E8E4DE); border-radius: 2px;
  overflow: hidden; cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.lmw-prod:hover { border-color: var(--gold, #C4984A); transform: translateY(-2px); }
.lmw-prod img   { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--stone, #E8E4DE); }
.lmw-prod-body  { padding: 8px 9px 10px; }
.lmw-prod-name  { font-size: 11.5px; line-height: 1.35; margin-bottom: 4px;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lmw-prod-price { font-family: var(--font-data, monospace); font-size: 11px; color: var(--gold-2, #A07A34); }

/* ── Bolitas de color ─────────────────────────────────────── */
.lmw-colors { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; }
.lmw-color  { display: flex; flex-direction: column; align-items: center; gap: 4px;
              background: none; border: none; cursor: pointer; width: 54px; font-family: inherit; }
.lmw-color-dot  { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--stone-2, #CCC6BC); transition: transform .15s; }
.lmw-color:hover .lmw-color-dot { transform: scale(1.12); }
.lmw-color-name { font-size: 9.5px; color: var(--muted, #8C847A); text-align: center; line-height: 1.2; }

.lmw-link-categoria {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-body, sans-serif); font-size: 13px; font-weight: 600;
  padding: 10px 16px; margin: 2px 0 6px; border-radius: 999px;
  background: var(--black, #0D0D0D); color: var(--linen, #FAF8F5);
  text-decoration: none; transition: opacity .15s;
}
.lmw-link-categoria:hover { opacity: .85; }

/* ── Tarjeta de resumen ───────────────────────────────────── */
.lmw-card {
  background: var(--black, #0D0D0D); color: var(--linen, #FAF8F5);
  padding: 16px 17px; border-radius: 3px; align-self: stretch;
  animation: lmwIn .24s ease-out;
}
.lmw-card-title { font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
                  color: var(--gold, #C4984A); margin-bottom: 12px; }
.lmw-card-item  { display: flex; justify-content: space-between; gap: 10px;
                  font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.lmw-card-item:last-of-type { border-bottom: none; }
.lmw-card-rows  { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.lmw-card-row   { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; }
.lmw-card-row span:first-child { opacity: .6; }
.lmw-card-total { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16);
                  font-size: 16px; font-weight: 600; }
.lmw-card-total span:last-child { color: var(--gold, #C4984A); font-family: var(--font-data, monospace); }
.lmw-card-note  { font-size: 10px; letter-spacing: .05em; opacity: .42; margin-top: 10px; }

/* ── Formulario de datos de entrega ───────────────────────── */
.lmw-form-card {
  background: var(--paper, #fff); border: 1px solid var(--stone, #E8E4DE);
  padding: 16px; border-radius: 3px; align-self: stretch;
}
.lmw-form-card h4 { font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
                    color: var(--gold-2, #A07A34); margin-bottom: 4px; font-weight: 600; }
.lmw-form-card p.lmw-form-sub { font-size: 12px; color: var(--muted, #8C847A); margin-bottom: 12px; line-height: 1.5; }
.lmw-field { margin-bottom: 9px; }
.lmw-field label { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
                   color: var(--muted, #8C847A); margin-bottom: 4px; }
.lmw-field input {
  width: 100%; padding: 9px 11px; font-size: 13.5px; font-family: inherit;
  background: var(--linen, #FAF8F5); border: 1px solid var(--stone, #E8E4DE);
  border-radius: 2px; color: var(--ink, #2A2420);
}
.lmw-field input:focus { outline: none; border-color: var(--gold, #C4984A); }
.lmw-form-card button {
  width: 100%; margin-top: 6px; padding: 11px; cursor: pointer;
  background: var(--black, #0D0D0D); color: var(--linen, #FAF8F5);
  border: none; border-radius: 2px; font-family: inherit;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.lmw-form-card button:disabled { opacity: .5; cursor: default; }
.lmw-form-err { color: var(--error, #8B1A0F); font-size: 11.5px; margin-top: 8px; }

/* ── Tarjeta de pago ──────────────────────────────────────── */
.lmw-pay {
  background: var(--paper, #fff); border: 1px solid var(--gold, #C4984A);
  padding: 18px 17px; border-radius: 3px; text-align: center; align-self: stretch;
}
.lmw-pay-title { font-family: var(--font-display, Georgia, serif); font-style: italic;
                 font-size: 19px; color: var(--ink, #2A2420); margin-bottom: 5px; }
.lmw-pay-sub   { font-size: 12.5px; color: var(--muted, #8C847A); line-height: 1.5; margin-bottom: 14px; }
.lmw-pay-btn {
  display: block; width: 100%; padding: 13px; text-decoration: none;
  background: var(--black, #0D0D0D); color: var(--linen, #FAF8F5);
  border-radius: 2px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s;
}
.lmw-pay-btn:hover { background: var(--gold-2, #A07A34); }
.lmw-pay-trust { font-size: 10px; letter-spacing: .06em; color: var(--muted, #8C847A); margin-top: 11px; }

/* ── Chips de sugerencia ──────────────────────────────────── */
.lmw-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; flex: 0 0 auto; }
.lmw-chips:empty { padding: 0; }
.lmw-chip {
  padding: 7px 13px; font-size: 12px; cursor: pointer; font-family: inherit;
  background: var(--paper, #fff); border: 1px solid var(--stone, #E8E4DE);
  border-radius: 999px; color: var(--ink, #2A2420); transition: all .15s;
}
.lmw-chip:hover { border-color: var(--gold, #C4984A); color: var(--gold-2, #A07A34); }
.lmw-chip:disabled { opacity: .45; cursor: default; }

/* ── Barra de entrada ─────────────────────────────────────── */
.lmw-input {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper, #fff); border-top: 1px solid var(--stone, #E8E4DE);
}
.lmw-input .lmw-icon { color: var(--muted, #8C847A); opacity: .8; }
.lmw-input .lmw-icon:hover { background: var(--linen, #FAF8F5); opacity: 1; }
#lmw-text {
  flex: 1; min-width: 0; padding: 10px 13px; font-size: 14px; font-family: inherit;
  background: var(--linen, #FAF8F5); border: 1px solid var(--stone, #E8E4DE);
  border-radius: 999px; color: var(--ink, #2A2420);
}
#lmw-text:focus { outline: none; border-color: var(--stone-2, #CCC6BC); }
.lmw-send {
  width: 38px; height: 38px; flex: 0 0 38px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--black, #0D0D0D); color: var(--linen, #FAF8F5);
  border: none; border-radius: 50%; transition: background .15s;
}
.lmw-send:hover:not(:disabled) { background: var(--gold-2, #A07A34); }
.lmw-send:disabled { opacity: .4; cursor: default; }

/* ── Móvil: el panel ocupa la pantalla ────────────────────── */
@media (max-width: 560px) {
  .lmw-panel {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; height: 100%; max-height: none;
    border: none; border-radius: 0;
  }
  .lmw-fab { right: 14px; bottom: 14px; padding: 8px 15px 8px 8px; }
  .lmw-fab-sub { display: none; }
  .lmw-nudge { right: 14px; left: 14px; width: auto; bottom: 72px; }
}

/* Bloquea el scroll del body solo cuando el chat es pantalla completa */
body.lmw-locked { overflow: hidden; }
@media (min-width: 561px) { body.lmw-locked { overflow: auto; } }

@media (prefers-reduced-motion: reduce) {
  .lmw-panel, .lmw-nudge, .lmw-msg, .lmw-card { animation: none; }
  .lmw-fab, .lmw-prod { transition: none; }
}

/* ── Modo oscuro (sigue la preferencia del sistema de quien navega) ──────
   El sitio siempre usa el tema claro de marca (--linen), pero el chat
   respeta prefers-color-scheme para no deslumbrar a quien navega de noche.
   Solo toca superficies del propio widget, nunca el sitio detrás. ──────── */
@media (prefers-color-scheme: dark) {
  .lmw-panel   { background: #17160F; border-color: #2B2A22; }
  .lmw-thread  { }
  .lmw-msg-ai  { background: #1F1E17; border-color: #2B2A22; color: #EDEAE2; }
  .lmw-msg-user{ background: var(--gold, #C4984A); color: #14130F; }
  .lmw-msg-sys { color: #8C8676; }
  .lmw-typing  { background: #1F1E17; border-color: #2B2A22; }
  .lmw-typing i{ background: #4A4838; }
  .lmw-input   { background: #17160F; border-top-color: #2B2A22; }
  #lmw-text    { background: #1F1E17; border-color: #2B2A22; color: #EDEAE2; }
  .lmw-chip    { background: #1F1E17; border-color: #2B2A22; color: #EDEAE2; }
  .lmw-prod    { background: #1F1E17; border-color: #2B2A22; }
  .lmw-prod-name { color: #EDEAE2; }
  .lmw-form-card, .lmw-pay { background: #1F1E17; border-color: #2B2A22; }
  .lmw-form-card h4 { color: var(--gold, #C4984A); }
  .lmw-field input { background: #17160F; border-color: #2B2A22; color: #EDEAE2; }
  .lmw-pay-title, .lmw-pay-sub { color: #EDEAE2; }
  .lmw-nudge   { background: #1F1E17; border-color: #2B2A22; color: #EDEAE2; }
  .lmw-nudge::after { background: #1F1E17; border-color: #2B2A22; }
}