/* ==================================================
   ASISTENTE DE CHAT (burbuja flotante con IA) · todo el sitio
   Prefijo bchat- (único: otras secciones del sitio usan bsc-, bq-, bn-, bs-…).
   Variables de marca: las mismas que header.css (:root).
   El HTML lo crea chat.js; aquí solo el aspecto y las animaciones.
   ================================================== */

.bchat-root {
  --bchat-dark: var(--bs-dark, #033a3f);
  --bchat-dark2: var(--bs-dark-2, #043233);
  --bchat-cream: var(--bs-cream, #f2f1d5);
  --bchat-mint: var(--bs-mint, #c4d9b8);
  --bchat-pink: var(--bs-pink, #e30052);
  --bchat-line: rgba(242, 241, 213, 0.16);
  --bchat-ex: -1.2;
  --bchat-ey: -0.8;
  /* Posición: a la derecha, justo encima del botón redondo del carrito (medidas en cart.css) */
  --bchat-size: 68px;
  --bchat-right: calc(var(--bs-cart-right, 11px) + (var(--bs-cart-size, 58px) - var(--bchat-size)) / 2);
  --bchat-bottom: calc(var(--bs-cart-bottom, 22px) + var(--bs-cart-size, 58px) + var(--bs-fab-gap, 12px));
  --bchat-fbase: drop-shadow(0 6px 10px rgba(2, 31, 34, 0.34)) drop-shadow(0 0 14px rgba(140, 199, 156, 0.42));
  font-family: 'Montserrat', sans-serif;
}
.bchat-root *, .bchat-root *::before, .bchat-root *::after { box-sizing: border-box; }
.bchat-root :is(h2, p, span, button, a, textarea, input, strong, small, del) { font-family: 'Montserrat', sans-serif; }

/* ---------- Burbuja: una esfera verde minimalista con dos ojitos ---------- */
.bchat-root .bchat-launcher {
  position: fixed;
  right: var(--bchat-right);
  bottom: var(--bchat-bottom);
  z-index: 99995;
  width: var(--bchat-size);
  height: var(--bchat-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: right 0.5s ease-out; /* acompaña al botón del carrito cuando se abre su panel */
}
/* Cuando se abre el panel del carrito, el botón redondo se corre 424 px a la izquierda: el asistente va con él */
.xoo-wsc-cart-active .bchat-root .bchat-launcher { right: calc(var(--bchat-right) + 424px); }
.xoo-wsc-cart-active .bchat-root .bchat-hello { display: none; }
.bchat-root .bchat-launcher:focus-visible { outline: 2px solid var(--bchat-cream); outline-offset: 4px; }
.bchat-float { display: block; width: 100%; height: 100%; animation: bchatFloat 3.8s ease-in-out infinite; }
.bchat-bot {
  display: block;
  width: 100%;
  height: 100%;
  filter: var(--bchat-fbase);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.bchat-launcher:hover .bchat-bot { transform: scale(1.1) rotate(-4deg); }
.bchat-launcher:active .bchat-bot { transform: scale(0.95); }
.bchat-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Ondas que salen de la esfera de vez en cuando */
.bchat-ping {
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(160, 214, 170, 0.75);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* Cuerpo que respira, parpadeo, ojos que siguen al cursor y brillo que se desplaza un poco */
.bchat-body { transform-box: fill-box; transform-origin: 50% 100%; animation: bchatBreath 3.8s ease-in-out infinite; }
.bchat-eye { transform-box: fill-box; transform-origin: center; animation: bchatBlink 5.4s infinite; }
.bchat-avatar .bchat-eye { animation-duration: 6.6s; animation-delay: 1.2s; }
.bchat-eyes {
  transform: translate(calc(var(--bchat-ex) * 1px), calc(var(--bchat-ey) * 1px));
  transition: transform 0.14s ease-out, opacity 0.2s ease;
}
.bchat-shine {
  transform: translate(calc(var(--bchat-ex) * -0.4px), calc(var(--bchat-ey) * -0.4px));
  transition: transform 0.2s ease-out;
}
.bchat-look { transition: transform 0.35s ease; }
.bchat-oval, .bchat-arc { transition: opacity 0.18s ease; }
.bchat-arc { opacity: 0; }
.bchat-launcher:hover .bchat-oval,
.bchat-root[data-anim="happy"] .bchat-oval,
.bchat-root[data-anim="spin"] .bchat-launcher .bchat-oval { opacity: 0; }
.bchat-launcher:hover .bchat-arc,
.bchat-root[data-anim="happy"] .bchat-arc,
.bchat-root[data-anim="spin"] .bchat-launcher .bchat-arc { opacity: 1; }

@keyframes bchatFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bchatBreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.975); } }
@keyframes bchatBlink {
  0%, 89%, 100% { transform: scaleY(1); }
  91.5% { transform: scaleY(0.08); }
  94% { transform: scaleY(1); }
  95.5% { transform: scaleY(0.08); }
  97.5% { transform: scaleY(1); }
}

/* Gestos cada tanto (los activa chat.js) */
.bchat-root[data-anim="wave"] .bchat-bot { animation: bchatWave 1.4s ease-in-out; }
.bchat-root[data-anim="hop"] .bchat-bot { animation: bchatHop 0.95s ease-in-out; }
.bchat-root[data-anim="look"] .bchat-look { animation: bchatLook 1.9s ease-in-out; }
.bchat-root[data-anim="ping"] .bchat-ping { animation: bchatPing 1.5s ease-out; }
.bchat-root[data-anim="wink"] .bchat-bot { animation: bchatTilt 1.1s ease-in-out; }
.bchat-root[data-anim="wink"] .bchat-eye--r { animation: bchatWink 1.1s ease-in-out; }
.bchat-root[data-anim="happy"] .bchat-bot { animation: bchatHappy 1.3s ease-in-out; }
@keyframes bchatWave {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-10deg); }
  35% { transform: rotate(9deg); }
  55% { transform: rotate(-6deg); }
  75% { transform: rotate(4deg); }
}
@keyframes bchatHop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(0) scale(1.08, 0.9); }
  45% { transform: translateY(-15px) scale(0.95, 1.08); }
  70% { transform: translateY(0) scale(1.06, 0.93); }
  85% { transform: translateY(-3px) scale(1, 1); }
}
@keyframes bchatLook {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  65% { transform: translateX(3px); }
}
@keyframes bchatPing {
  0% { transform: scale(0.85); opacity: 0.75; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes bchatTilt {
  0%, 100% { transform: rotate(0); }
  30%, 70% { transform: rotate(-6deg); }
}
@keyframes bchatWink {
  0%, 100% { transform: scaleY(1); }
  30%, 70% { transform: scaleY(0.08); }
}
@keyframes bchatHappy {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-5px) scale(1.08); }
  60% { transform: translateY(0) scale(0.98, 1.02); }
}

/* ---------- Gestos nuevos: "escribiendo…", esfumarse y volver, giro ---------- */

/* Tres puntitos en la cara, como cuando alguien escribe: invitan a tocar el bot para conversar */
.bchat-dots { opacity: 0; transition: opacity 0.2s ease; }
.bchat-dots circle { fill: #043233; transform-box: fill-box; transform-origin: center; }
.bchat-root[data-anim="typing"] .bchat-launcher .bchat-eyes { opacity: 0; }
.bchat-root[data-anim="typing"] .bchat-launcher .bchat-dots { opacity: 1; }
.bchat-root[data-anim="typing"] .bchat-launcher .bchat-dots circle { animation: bchatTypeDot 1.05s ease-in-out infinite; }
.bchat-root[data-anim="typing"] .bchat-launcher .bchat-dots circle:nth-child(2) { animation-delay: 0.17s; }
.bchat-root[data-anim="typing"] .bchat-launcher .bchat-dots circle:nth-child(3) { animation-delay: 0.34s; }
.bchat-root[data-anim="typing"] .bchat-bot { animation: bchatTypeBody 1.05s ease-in-out infinite; }
.bchat-root[data-anim="typing"] .bchat-ping { animation: bchatPing 1.7s ease-out 0.4s 2; }
@keyframes bchatTypeDot {
  0%, 72%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  32% { transform: translateY(-3.6px) scale(1.2); opacity: 1; }
}
@keyframes bchatTypeBody {
  0%, 100% { transform: translateY(0) scale(1); }
  32% { transform: translateY(-1.5px) scale(1.03); }
}

/* Giro rápido con ojos felices */
.bchat-root[data-anim="spin"] .bchat-bot { animation: bchatSpin 1.25s cubic-bezier(0.3, 1.25, 0.4, 1); }
@keyframes bchatSpin {
  0% { transform: rotate(0) scale(1); }
  45% { transform: rotate(200deg) scale(1.16) translateY(-6px); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Se esfuma en chispas, da "la vuelta al mundo" y reaparece por la izquierda cruzando la pantalla con una estela */
.bchat-sparks, .bchat-trail { position: absolute; pointer-events: none; }
.bchat-sparks { inset: 0; }
.bchat-sparks i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(184, 232, 190, 0.95) 45%, rgba(184, 232, 190, 0) 72%);
  opacity: 0;
}
.bchat-sparks i:nth-child(1) { --a: 0deg; --d: 52px; }
.bchat-sparks i:nth-child(2) { --a: 45deg; --d: 40px; }
.bchat-sparks i:nth-child(3) { --a: 90deg; --d: 56px; }
.bchat-sparks i:nth-child(4) { --a: 135deg; --d: 42px; }
.bchat-sparks i:nth-child(5) { --a: 180deg; --d: 54px; }
.bchat-sparks i:nth-child(6) { --a: 225deg; --d: 38px; }
.bchat-sparks i:nth-child(7) { --a: 270deg; --d: 58px; }
.bchat-sparks i:nth-child(8) { --a: 315deg; --d: 44px; }
.bchat-trail {
  right: 50%;
  top: 50%;
  width: 240px;
  height: 26px;
  margin-top: -13px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(160, 214, 170, 0), rgba(160, 214, 170, 0.42) 62%, rgba(236, 255, 238, 0.9));
  filter: blur(3px);
  opacity: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
}
.bchat-root[data-anim="world"] .bchat-launcher { animation: bchatWorldMove 3.8s linear both; }
.bchat-root[data-anim="world"] .bchat-bot { animation: bchatWorldFx 3.8s ease-in-out both; }
.bchat-root[data-anim="world"] .bchat-sparks i { animation: bchatWorldSpark 3.8s linear both; }
.bchat-root[data-anim="world"] .bchat-trail { animation: bchatWorldTrail 3.8s ease-out both; }
.bchat-root[data-anim="world"] .bchat-ping { animation: bchatWorldPing 3.8s ease-out both; }
@keyframes bchatWorldMove {
  0%, 24% { transform: translateX(0); }
  25%, 46% { transform: translateX(calc(-100vw - 90px)); animation-timing-function: cubic-bezier(0.14, 0.82, 0.28, 1); }
  84%, 100% { transform: translateX(0); }
}
@keyframes bchatWorldFx {
  0% { opacity: 1; transform: scale(1) rotate(0); filter: var(--bchat-fbase) blur(0px); }
  9% { opacity: 1; transform: scale(1.14) rotate(-6deg); filter: var(--bchat-fbase) blur(0px); }
  22%, 45% { opacity: 0; transform: scale(0.5) rotate(40deg); filter: var(--bchat-fbase) blur(8px); }
  46% { opacity: 0; transform: scale(0.6) rotate(-320deg); filter: var(--bchat-fbase) blur(4px); }
  52% { opacity: 1; transform: scale(0.8) rotate(-260deg); filter: var(--bchat-fbase) blur(3px); }
  84% { opacity: 1; transform: scale(1.14) rotate(0); filter: var(--bchat-fbase) blur(0px); }
  92% { opacity: 1; transform: scale(0.95) rotate(0); filter: var(--bchat-fbase) blur(0px); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: var(--bchat-fbase) blur(0px); }
}
@keyframes bchatWorldSpark {
  0%, 17% { opacity: 0; transform: rotate(var(--a)) translateX(6px) scale(1); }
  19% { opacity: 1; }
  34% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0.25); }
  35%, 82% { opacity: 0; transform: rotate(var(--a)) translateX(6px) scale(1); }
  84% { opacity: 1; }
  98%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0.25); }
}
@keyframes bchatWorldTrail {
  0%, 46% { opacity: 0; transform: scaleX(0); }
  52% { opacity: 1; transform: scaleX(1); }
  80% { opacity: 0.75; transform: scaleX(0.85); }
  90%, 100% { opacity: 0; transform: scaleX(0.1); }
}
@keyframes bchatWorldPing {
  0%, 82% { transform: scale(0.85); opacity: 0; }
  84% { opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Mensaje nuevo mientras el panel está cerrado */
.bchat-root[data-unread="1"] .bchat-launcher::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 15px;
  height: 15px;
  border: 2px solid var(--bchat-cream);
  border-radius: 50%;
  background: var(--bchat-pink);
  box-shadow: 0 2px 8px rgba(227, 0, 82, 0.5);
}

/* ---------- Aviso de saludo (una vez por visita) ---------- */
.bchat-root .bchat-hello {
  position: fixed;
  right: calc(var(--bchat-right) + var(--bchat-size) + 10px); /* a la izquierda del bot, con la colita hacia él */
  bottom: calc(var(--bchat-bottom) + 12px);
  z-index: 99994;
  max-width: 230px;
  margin: 0;
  padding: 11px 34px 11px 14px;
  border-radius: 18px 18px 5px 18px;
  background: var(--bchat-cream);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  color: var(--bchat-dark2);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  animation: bchatPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bchat-root .bchat-hello[hidden] { display: none; }
.bchat-root .bchat-hello-x {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(4, 50, 51, 0.55);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.bchat-root .bchat-hello-x:hover { background: rgba(4, 50, 51, 0.1); color: var(--bchat-dark2); }
@keyframes bchatPop {
  from { opacity: 0; transform: translateX(10px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Panel ---------- */
.bchat-root .bchat-panel {
  position: fixed;
  right: 18px;
  bottom: calc(var(--bchat-bottom) + var(--bchat-size) + 12px); /* se abre encima del bot */
  z-index: 998900; /* sobre el header, por debajo del pop-up de la oferta y del carrito */
  display: flex;
  flex-direction: column;
  width: 384px;
  max-width: calc(100vw - 24px);
  height: 600px;
  max-height: calc(100vh - var(--bchat-bottom) - var(--bchat-size) - 32px);
  max-height: calc(100dvh - var(--bchat-bottom) - var(--bchat-size) - 32px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--bchat-line);
  border-radius: 26px;
  background:
    radial-gradient(260px 220px at 100% 0%, rgba(196, 217, 184, 0.16), transparent),
    radial-gradient(300px 260px at 0% 100%, rgba(40, 110, 140, 0.26), transparent),
    linear-gradient(180deg, #043233 0%, #033a3f 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--bchat-cream);
  transform-origin: 100% 100%;
  animation: bchatOpen 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bchat-root .bchat-panel[hidden] { display: none; }
@keyframes bchatOpen {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Cabecera */
.bchat-root .bchat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 12px 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--bchat-line);
  background: rgba(2, 31, 34, 0.35);
}
.bchat-root .bchat-avatar { display: block; flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0; }
.bchat-avatar .bchat-svg { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.bchat-avatar .bchat-shadow { display: none; }
.bchat-root .bchat-head-text { flex: 1; min-width: 0; }
.bchat-root .bchat-title {
  margin: 0;
  padding: 0;
  color: var(--bchat-cream);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.1px;
  text-transform: none;
}
.bchat-root .bchat-title:focus { outline: none; }
.bchat-root .bchat-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  padding: 0;
  color: rgba(242, 241, 213, 0.72);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}
.bchat-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #7cf0a3;
  box-shadow: 0 0 8px #7cf0a3;
  animation: bchatPulse 2.4s ease-in-out infinite;
}
@keyframes bchatPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.75; } }
.bchat-root .bchat-icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(242, 241, 213, 0.82);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.bchat-root .bchat-icon-btn:hover { background: rgba(242, 241, 213, 0.12); color: var(--bchat-cream); }
.bchat-root .bchat-icon-btn svg { width: 18px; height: 18px; }

/* "Pensando": mientras llega la respuesta, la esfera mira hacia arriba y respira más rápido */
.bchat-root[data-busy="1"] .bchat-avatar .bchat-look { transform: translate(-1.6px, -2px); }
.bchat-root[data-busy="1"] .bchat-avatar .bchat-body { animation-duration: 1.4s; }

/* Mensajes */
.bchat-root .bchat-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px 14px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 217, 184, 0.4) transparent;
}
.bchat-log::-webkit-scrollbar { width: 6px; }
.bchat-log::-webkit-scrollbar-thumb { background: rgba(196, 217, 184, 0.4); border-radius: 6px; }
.bchat-root .bchat-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 92%;
  animation: bchatMsg 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bchat-root .bchat-msg--bot { align-self: flex-start; }
.bchat-root .bchat-msg--user { align-self: flex-end; align-items: flex-end; }
@keyframes bchatMsg {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.bchat-root .bchat-bubble {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bchat-root .bchat-msg--bot .bchat-bubble {
  border: 1px solid var(--bchat-line);
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(160deg, rgba(242, 241, 213, 0.13), rgba(242, 241, 213, 0.05));
  color: var(--bchat-cream);
}
.bchat-root .bchat-msg--user .bchat-bubble {
  border-radius: 18px 18px 6px 18px;
  background: var(--bchat-mint);
  color: var(--bchat-dark2);
  font-weight: 600;
}
.bchat-root .bchat-msg.is-error .bchat-bubble { border-color: rgba(227, 0, 82, 0.55); background: rgba(227, 0, 82, 0.1); }
.bchat-root .bchat-note { margin: 0; padding: 0 4px; color: rgba(242, 241, 213, 0.6); font-size: 0.72rem; line-height: 1.4; }

/* Escribiendo… */
.bchat-root .bchat-typing {
  display: inline-flex;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid var(--bchat-line);
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(160deg, rgba(242, 241, 213, 0.13), rgba(242, 241, 213, 0.05));
}
.bchat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--bchat-mint); opacity: 0.45; animation: bchatDot 1.2s infinite ease-in-out; }
.bchat-typing i:nth-child(2) { animation-delay: 0.15s; }
.bchat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bchatDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Tarjetas de producto: una fila compacta (foto, nombre y precio; botón a la derecha) */
.bchat-root .bchat-cards { display: flex; flex-direction: column; gap: 6px; }
.bchat-root .bchat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 8px 8px 8px 8px;
  border: 1px solid rgba(242, 241, 213, 0.12);
  border-radius: 16px;
  background: rgba(242, 241, 213, 0.06);
  box-shadow: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.bchat-root .bchat-card:hover { border-color: rgba(196, 217, 184, 0.4); background: rgba(242, 241, 213, 0.09); }
.bchat-root .bchat-card-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
}
.bchat-root .bchat-card-img {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  max-width: none;
  margin: 0;
  padding: 3px;
  border-radius: 12px;
  background: #ffffff;
  object-fit: contain;
}
.bchat-root .bchat-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 0; }
.bchat-root .bchat-card-name {
  display: -webkit-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--bchat-cream);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bchat-root .bchat-card-main:hover .bchat-card-name { color: var(--bchat-mint); }
.bchat-root .bchat-card-price { margin: 0; padding: 0; color: var(--bchat-mint); font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.bchat-root .bchat-card-price del { margin-right: 5px; color: rgba(242, 241, 213, 0.45); font-size: 0.7rem; font-weight: 500; }

/* Botones del chat */
.bchat-root .bchat-add,
.bchat-root .bchat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 50px;
  background: var(--bchat-mint);
  color: var(--bchat-dark2);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.bchat-root .bchat-add { flex: 0 0 auto; min-width: 82px; min-height: 34px; padding: 0 14px; font-size: 0.76rem; }
.bchat-root .bchat-btn { min-height: 36px; padding: 0 16px; font-size: 0.8rem; }
.bchat-root .bchat-add:hover,
.bchat-root .bchat-btn:hover { background: var(--bchat-cream); color: var(--bchat-dark2); transform: translateY(-1px); }
.bchat-root .bchat-btn--ghost { background: transparent; border-color: var(--bchat-mint); color: var(--bchat-mint); }
.bchat-root .bchat-btn--ghost:hover { background: var(--bchat-mint); color: var(--bchat-dark2); }
.bchat-root .bchat-add.is-loading { opacity: 0.7; pointer-events: none; }
.bchat-root .bchat-add.is-done { background: var(--bs-mint-2, #d1ddbc); }
.bchat-root .bchat-add:disabled { cursor: default; }
.bchat-root .bchat-wa { align-self: flex-start; }

/* Sugerencias para tocar */
.bchat-root .bchat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 2px 0 6px; animation: bchatMsg 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bchat-root .bchat-chip {
  display: inline-block;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(196, 217, 184, 0.55);
  border-radius: 999px;
  background: rgba(196, 217, 184, 0.08);
  color: var(--bchat-mint);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.bchat-root .bchat-chip:hover { background: var(--bchat-mint); color: var(--bchat-dark2); }

/* Escribir */
.bchat-root .bchat-form {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 8px;
  border-top: 1px solid var(--bchat-line);
  background: rgba(2, 31, 34, 0.35);
}
.bchat-root .bchat-input {
  flex: 1;
  display: block;
  min-height: 44px;
  max-height: 110px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(196, 217, 184, 0.4);
  border-radius: 22px;
  background: rgba(4, 50, 51, 0.6);
  box-shadow: none;
  color: var(--bchat-cream);
  font-size: 0.9rem;
  line-height: 1.4;
  resize: none;
  outline: none;
  transition: border-color 0.25s ease;
}
.bchat-root .bchat-input::placeholder { color: rgba(242, 241, 213, 0.5); }
.bchat-root .bchat-input:focus { border-color: var(--bchat-mint); }
.bchat-root .bchat-send {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bchat-mint);
  color: var(--bchat-dark2);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
}
.bchat-root .bchat-send svg { width: 20px; height: 20px; }
.bchat-root .bchat-send:hover { background: var(--bchat-cream); transform: translateY(-1px); }
.bchat-root .bchat-send:disabled { opacity: 0.45; cursor: default; transform: none; }
.bchat-root .bchat-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.bchat-root .bchat-count {
  position: absolute;
  right: 72px;
  bottom: 16px;
  color: rgba(242, 241, 213, 0.6);
  font-size: 0.68rem;
  pointer-events: none;
}
.bchat-root .bchat-foot {
  margin: 0;
  padding: 0 16px 12px;
  background: rgba(2, 31, 34, 0.35);
  color: rgba(242, 241, 213, 0.55);
  font-size: 0.68rem;
  line-height: 1.45;
  text-align: center;
}
.bchat-root .bchat-foot a { color: var(--bchat-mint); text-decoration: underline; text-underline-offset: 2px; }
.bchat-root .bchat-foot a:hover { color: var(--bchat-cream); }
.bchat-root .bchat-input:focus-visible,
.bchat-root :is(.bchat-btn, .bchat-add, .bchat-chip, .bchat-send, .bchat-icon-btn, .bchat-card-main):focus-visible { outline: 2px solid var(--bchat-cream); outline-offset: 2px; }

/* ---------- Móvil: el panel ocupa toda la pantalla ---------- */
@media (max-width: 560px) {
  .bchat-root { --bchat-size: 58px; --bs-fab-gap: 10px; }
  .bchat-root .bchat-hello { max-width: 200px; }
  .bchat-root .bchat-panel {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    transform-origin: 50% 100%;
  }
  .bchat-root[data-open="1"] .bchat-launcher,
  .bchat-root[data-open="1"] .bchat-hello { display: none; }
  .bchat-root .bchat-input { font-size: 16px; } /* evita el acercamiento automático de iOS al escribir */
  .bchat-root .bchat-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  html.bchat-lock { overflow: hidden; }
  /* Con el chat a pantalla completa, el botón redondo del carrito no debe quedar encima del botón de enviar */
  html.bchat-lock .xoo-wsc-basket { display: none !important; }
}

/* Quien desactiva animaciones en su sistema */
@media (prefers-reduced-motion: reduce) {
  .bchat-float, .bchat-body, .bchat-eye, .bchat-dot, .bchat-typing i,
  .bchat-root[data-anim] .bchat-bot, .bchat-root[data-anim] .bchat-look, .bchat-root[data-anim] .bchat-ping,
  .bchat-root[data-anim] .bchat-eye--r, .bchat-root[data-anim] .bchat-launcher,
  .bchat-root[data-anim] .bchat-sparks i, .bchat-root[data-anim] .bchat-trail,
  .bchat-root[data-anim] .bchat-dots circle { animation: none !important; }
  .bchat-root .bchat-launcher { transition: none !important; }
  .bchat-root .bchat-panel, .bchat-root .bchat-msg, .bchat-root .bchat-chips, .bchat-root .bchat-hello { animation: none !important; }
  .bchat-bot, .bchat-eyes, .bchat-shine, .bchat-look, .bchat-oval, .bchat-arc,
  .bchat-root .bchat-btn, .bchat-root .bchat-add, .bchat-root .bchat-chip, .bchat-root .bchat-card { transition: none !important; }
}

@media print { .bchat-root { display: none !important; } }