/* LA PRINCESA AI — DARK CHAT V1 (prueba). Oscuro en todas sus superficies: nunca fondos blancos. */
.lp-chat {
  position: fixed; inset: 0; top: var(--vv-t, 0px); width: 100vw; height: var(--vv-h, 100dvh); max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--lp-ivory, #F4EFE6); overflow: hidden;
}
.lp-chat::backdrop { background: rgba(8, 7, 6, .62); }
.lp-chat__panel {
  position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 2 * max(10px, env(safe-area-inset-left))), 520px); height: min(calc(100% - 24px - env(safe-area-inset-top)), 720px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #11100F; border: 1px solid rgba(207, 165, 80, .38); border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-chat[open] .lp-chat__panel { animation: lp-chat-entra .26s cubic-bezier(.2, .7, .2, 1); }
  @keyframes lp-chat-entra { from { opacity: 0; transform: translate(-50%, 18px); } }
}

/* Encabezado: esfera aprobada, «La Princesa AI» y cierre */
.lp-chat__cab { display: flex; align-items: center; gap: 12px; padding: 14px 10px 12px 16px; border-bottom: 1px solid rgba(207, 165, 80, .18); }
.lp-chat__esfera { flex: none; width: 40px; height: 40px; position: relative; }
.lp-chat__titulos { flex: 1; min-width: 0; }
.lp-chat__t { margin: 0; font: 500 1.3rem/1.1 var(--display, "Cormorant Garamond", serif); color: var(--lp-gold-light, #E1C17B); }
.lp-chat__st { margin: 2px 0 0; font: 400 .8125rem/1.2 var(--ui, "DM Sans", sans-serif); color: var(--lp-stone, #AAA198); }
.lp-chat__cerrar {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--lp-gold-light, #E1C17B); cursor: pointer;
}
.lp-chat__cerrar svg { width: 22px; height: 22px; }

/* Conversación */
.lp-chat__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px;
}
.lp-chat__msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font: 400 .9375rem/1.45 var(--ui, "DM Sans", sans-serif); }
.lp-chat__msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.lp-chat__msg--ia { align-self: flex-start; background: #1C1917; border: 1px solid rgba(244, 239, 230, .07); border-bottom-left-radius: 6px; }
.lp-chat__msg--yo {
  align-self: flex-end; background: rgba(207, 165, 80, .2); border: 1px solid rgba(207, 165, 80, .38);
  border-bottom-right-radius: 6px; color: #F4EFE6;
}
.lp-chat__sug { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; }
.lp-chat__chip {
  min-height: 40px; padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(207, 165, 80, .45);
  background: #1C1917; color: #F4EFE6; font: 400 .875rem/1.2 var(--ui, "DM Sans", sans-serif); cursor: pointer;
}

/* Tarjetas de producto: foto, nombre, descripción breve y precio CLP. Todo el botón abre el producto en la carta. */
.lp-chat__cards { list-style: none; margin: 10px 0 2px; padding: 0; display: grid; gap: 8px; }
.lp-chat__card {
  width: 100%; display: flex; gap: 11px; align-items: stretch; padding: 8px; margin: 0; text-align: left; cursor: pointer;
  background: #26211E; border: 1px solid rgba(207, 165, 80, .3); border-radius: 12px; color: inherit; font: inherit;
}
.lp-chat__card img, .lp-chat__sinfoto { flex: none; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #11100F; }
.lp-chat__sinfoto { display: grid; place-items: center; font: 500 1.6rem/1 var(--display, serif); color: var(--lp-gold, #CFA550); border: 1px solid rgba(207, 165, 80, .25); }
.lp-chat__card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lp-chat__card-n { font: 500 1.0625rem/1.15 var(--display, "Cormorant Garamond", serif); color: var(--lp-gold-light, #E1C17B); }
.lp-chat__card-d {
  font: 400 .8125rem/1.35 var(--ui, sans-serif); color: rgba(244, 239, 230, .78);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lp-chat__card-p { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 500 .9375rem/1.2 var(--display, serif); color: #F4EFE6; font-variant-numeric: lining-nums tabular-nums; }
.lp-chat__ver { font: 500 .75rem/1 var(--ui, sans-serif); color: var(--lp-gold, #CFA550); letter-spacing: .02em; }

/* Pensando: tres puntos (mismo lenguaje que la esfera) */
.lp-chat__pensando { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.lp-chat__pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-gold, #CFA550); opacity: .45; animation: lp-chat-punto 1.2s ease-in-out infinite; }
.lp-chat__pensando i:nth-of-type(2) { animation-delay: .2s; }
.lp-chat__pensando i:nth-of-type(3) { animation-delay: .4s; }
@keyframes lp-chat-punto { 30% { opacity: 1; transform: translateY(-2px); } }
.lp-chat__error { border-color: rgba(207, 165, 80, .3); }
.lp-chat__reintentar {
  margin-top: 8px; min-height: 36px; padding: 6px 14px; border-radius: 18px; border: 1px solid rgba(207, 165, 80, .55);
  background: none; color: var(--lp-gold-light, #E1C17B); font: 500 .8125rem var(--ui, sans-serif); cursor: pointer;
}

/* Campo de escritura y botón dorado */
.lp-chat__form { display: flex; gap: 8px; align-items: center; padding: 10px 10px 12px 14px; border-top: 1px solid rgba(207, 165, 80, .18); }
.lp-chat__in {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 23px; border: 1px solid rgba(207, 165, 80, .35);
  background: #1C1917; color: #F4EFE6; font: 400 16px/1.2 var(--ui, "DM Sans", sans-serif);   /* 16 px: Safari no hace zoom */
}
.lp-chat__in::placeholder { color: rgba(244, 239, 230, .5); }
.lp-chat__in:focus { outline: none; border-color: var(--lp-gold, #CFA550); }
.lp-chat__enviar {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--lp-gold, #CFA550); color: #11100F; cursor: pointer;
}
.lp-chat__enviar svg { width: 22px; height: 22px; }
.lp-chat__enviar:disabled { opacity: .45; cursor: default; }
.lp-chat button:focus-visible, .lp-chat__in:focus-visible { outline: 2px solid var(--lp-gold, #CFA550); outline-offset: 2px; }
@media (hover: hover) {
  .lp-chat__card:hover, .lp-chat__chip:hover { border-color: rgba(207, 165, 80, .7); }
}
@media (prefers-reduced-motion: reduce) { .lp-chat__pensando i { animation: none; opacity: .8; } }