/* =====================================================================

   DOMIDELIS · Asistente IA (asistente-ia.css) v1.0 — 2026-10-22

   Usa las variables y tokens del proyecto (styles.css):

   Poppins · --primary #E63946 · --secondary #F4A261 · --accent #2A9D8F

   --dark #5D4037 · --light #FFF8E7 · radius 20/12/50px · Font Awesome 6.4

   ===================================================================== */



/* Botón flotante DOMIDELIS: diseño crema, rojo y mascota IA */
.ia-float {
  position: fixed;
  right: 16px;
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  width: min(458px, calc(100vw - 32px));
  min-width: 0;
  min-height: 96px;
  height: auto;
  padding: 9px 10px 9px 8px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  border-radius: 54px;
  background: linear-gradient(110deg, #fffdf8 0%, #fff8e7 100%);
  color: #3e241d;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(93, 64, 55, 0.18), 0 4px 9px rgba(230, 57, 70, 0.16), 0 0 0 1px rgba(230, 57, 70, 0.12);
  z-index: 9350;
  transition: transform 0.2s ease, opacity 0.25s ease, box-shadow 0.25s ease;
  font-family: inherit;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  text-align: left;
  overflow: hidden;
}
.ia-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 26px rgba(93, 64, 55, 0.22), 0 5px 12px rgba(230, 57, 70, 0.18);
}
.ia-float:active { transform: scale(0.99); }
.ia-float-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  width: 100px;
  height: 76px;
  border-radius: 42px;
  background: #fff5e8;
  overflow: hidden;
}
.ia-float-imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.ia-float-contenido {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 1px 0;
}
.ia-float-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 30px;
  background: #e9233b;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1;
  white-space: nowrap;
}
.ia-float-pregunta {
  display: block;
  max-width: 100%;
  color: #3b211b;
  font-size: clamp(0.95rem, 3.5vw, 1.23rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.ia-float-pregunta.ia-pregunta-cambiando { opacity: 0; transform: translateY(4px); }
.ia-float-subtitulo {
  display: block;
  max-width: 100%;
  color: #80675b;
  font-size: clamp(0.68rem, 2.5vw, 0.82rem);
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ia-float-flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f12d45, #d91f38);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 3px 8px rgba(230, 57, 70, 0.24);
}
.ia-float-tag { display: none; }

.ia-float-arrastrando,

.ia-float-arrastrando:hover,

.ia-float-arrastrando:active {

  cursor: grabbing;

  transform: scale(1.04);

  transition: none;

}

.ia-float:focus-visible {

  outline: 3px solid #fff;

  outline-offset: 3px;

}

.ia-float.oculto {

  opacity: 0;

  pointer-events: none;

  transform: scale(0.6);

}



/* pulso sutil hasta el primer uso */

@keyframes iaPulso {

  0%   { box-shadow: 0 6px 20px rgba(115, 20, 34, 0.38), 0 0 0 0 rgba(230, 57, 70, 0.42); }

  70%  { box-shadow: 0 6px 20px rgba(115, 20, 34, 0.38), 0 0 0 13px rgba(230, 57, 70, 0); }

  100% { box-shadow: 0 6px 20px rgba(115, 20, 34, 0.38), 0 0 0 0 rgba(230, 57, 70, 0); }

}

.ia-float.ia-pulso { animation: iaPulso 2.4s infinite; }



/* ---------- teaser (mensajitos sobre la burbuja) ---------- */



.ia-teaser {

  position: fixed;

  display: flex;

  align-items: center;

  gap: 0.6rem;

  width: max-content;

  max-width: min(300px, calc(100vw - 24px));

  background: #fff;

  color: var(--dark, #5D4037);

  border: 1px solid rgba(230, 57, 70, 0.25);

  border-left: 4px solid var(--primary, #E63946);

  border-radius: 28px;

  box-shadow: 0 8px 24px rgba(50, 23, 29, 0.2);

  padding: 0.65rem 2rem 0.65rem 0.75rem;

  font-size: 0.8rem;

  line-height: 1.35;

  font-weight: 500;

  opacity: 0;

  visibility: hidden;

  transform: translateY(7px) scale(0.98);

  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

  z-index: 9355;

  cursor: pointer;

  font-family: inherit;

}

.ia-teaser::after {

  position: absolute;

  bottom: -7px;

  left: var(--ia-tail-left, calc(100% - 34px));

  width: 13px;

  height: 13px;

  transform: rotate(45deg);

  border-right: 1px solid rgba(230, 57, 70, 0.25);

  border-bottom: 1px solid rgba(230, 57, 70, 0.25);

  background: #fff;

  content: "";

}

.ia-teaser.ia-teaser--below::after {

  top: -7px;

  bottom: auto;

  transform: rotate(225deg);

}

.ia-teaser.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.ia-teaser-badge {

  display: inline-flex;

  width: 26px;

  height: 26px;

  flex: 0 0 26px;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: var(--primary, #E63946);

  color: #fff;

  font-size: 0.82rem;

  font-weight: 800;

}

.ia-teaser-text {

  display: block;

  padding-right: 0.15rem;

}

.ia-teaser-x {

  position: absolute;

  top: 50%;

  right: 7px;

  display: flex;

  width: 23px;

  height: 23px;

  align-items: center;

  justify-content: center;

  transform: translateY(-50%);

  background: none;

  border: none;

  color: var(--dark, #5D4037);

  opacity: 0.45;

  font-size: 0.65rem;

  cursor: pointer;

  padding: 3px;

  font-family: inherit;

}

.ia-teaser-x:hover { opacity: 0.9; }



/* ---------- overlay y panel (patrón #cart-panel) ---------- */



.ia-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.45);

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s;

  z-index: 9390;

}

.ia-overlay.visible { opacity: 1; visibility: visible; }



.ia-panel {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  max-width: 480px;

  margin: 0 auto;

  height: 85vh;

  max-height: 85vh;

  background: var(--light, #FFF8E7);

  border-radius: 20px 20px 0 0;

  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);

  display: flex;

  flex-direction: column;

  transform: translateY(102%);

  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);

  z-index: 9400;

  font-family: inherit;

}

.ia-panel.abierta { transform: translateY(0); }



/* ---------- header ---------- */



.ia-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.85rem 1rem;

  background: linear-gradient(135deg, var(--primary, #E63946), var(--secondary, #F4A261));

  color: #fff;

  border-radius: 20px 20px 0 0;

  flex-shrink: 0;

}

.ia-header-titulo { display: flex; align-items: center; gap: 0.6rem; }

.ia-header-icono {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.95rem;

  overflow: hidden;

}

.ia-header-icono img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.ia-header-textos { display: flex; flex-direction: column; line-height: 1.2; }

.ia-header-textos strong { font-size: 0.95rem; }

.ia-cuota {

  font-size: 0.66rem;

  opacity: 0.9;

  font-weight: 600;

  letter-spacing: 0.03em;

}

.ia-cuota.alerta { color: #FFE9B8; opacity: 1; }

.ia-cuota.agotada { color: #FFD6D6; opacity: 1; }



.ia-header-acciones { display: flex; align-items: center; gap: 0.25rem; }

.ia-btn-icono {

  background: rgba(255, 255, 255, 0.14);

  border: none;

  color: #fff;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  cursor: pointer;

  font-size: 0.85rem;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.2s ease;

  font-family: inherit;

}

.ia-btn-icono:hover { background: rgba(255, 255, 255, 0.28); }



/* ---------- barra de confirmación (escoba) ---------- */



.ia-confirmar {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.55rem 1rem;

  background: #FDECEA;

  color: var(--dark, #5D4037);

  font-size: 0.8rem;

  font-weight: 600;

  border-bottom: 1px solid rgba(230, 57, 70, 0.15);

  flex-shrink: 0;

}

.ia-confirmar span { flex: 1; }

.ia-btn-mini {

  background: #fff;

  border: 1px solid rgba(93, 64, 55, 0.2);

  color: var(--dark, #5D4037);

  padding: 0.3rem 0.75rem;

  border-radius: 50px;

  font-size: 0.72rem;

  font-weight: 700;

  cursor: pointer;

  font-family: inherit;

}

.ia-btn-peligro {

  background: var(--primary, #E63946);

  border-color: var(--primary, #E63946);

  color: #fff;

}



/* ---------- mensajes ---------- */



.ia-mensajes {

  flex: 1;

  overflow-y: auto;

  padding: 1rem 0.9rem 0.5rem;

  display: flex;

  flex-direction: column;

  gap: 0.55rem;

  -webkit-overflow-scrolling: touch;

}



.ia-msg {

  max-width: 86%;

  padding: 0.6rem 0.85rem;

  font-size: 0.85rem;

  line-height: 1.45;

  animation: iaAparecer 0.25s ease;

}

@keyframes iaAparecer {

  from { opacity: 0; transform: translateY(6px); }

  to   { opacity: 1; transform: translateY(0); }

}

.ia-msg.user {

  align-self: flex-end;

  background: var(--primary, #E63946);

  color: #fff;

  border-radius: 16px 16px 4px 16px;

}

.ia-msg.ia {

  align-self: flex-start;

  background: #fff;

  color: var(--dark, #5D4037);

  border: 1px solid rgba(93, 64, 55, 0.12);

  border-radius: 16px 16px 16px 4px;

}

.ia-msg-texto { word-break: break-word; }



/* indicador "escribiendo..." */

.ia-typing { display: flex; gap: 4px; padding: 0.8rem 1rem; }

.ia-typing span {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--secondary, #F4A261);

  display: inline-block;

  animation: iaPunto 1.2s infinite;

}

.ia-typing span:nth-child(2) { animation-delay: 0.15s; }

.ia-typing span:nth-child(3) { animation-delay: 0.3s; }

.ia-typing .ia-typing-texto {

  width: auto;

  height: auto;

  margin-left: 6px;

  border-radius: 0;

  background: none;

  animation: none;

  color: var(--text-muted, #666);

  font-size: 0.88rem;

}

@keyframes iaPunto {

  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }

  30% { transform: translateY(-5px); opacity: 1; }

}



/* ---------- tarjetas de producto (IDs reales del catálogo) ---------- */



.ia-card {

  align-self: stretch;

  display: flex;

  align-items: center;

  gap: 0.6rem;

  background: #fff;

  border: 1px solid rgba(93, 64, 55, 0.12);

  border-radius: 12px;

  padding: 0.55rem 0.65rem;

  margin-left: 0.4rem;

  animation: iaAparecer 0.25s ease;

}

.ia-card-img {

  width: 52px;

  height: 52px;

  border-radius: 10px;

  overflow: hidden;

  flex-shrink: 0;

  background: linear-gradient(135deg, #FFF1E6, #FFE3E0);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--secondary, #F4A261);

  font-size: 1.1rem;

}

.ia-card-img img { width: 100%; height: 100%; object-fit: cover; }

.ia-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }

.ia-card-nombre {

  font-size: 0.82rem;

  color: var(--dark, #5D4037);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.ia-card-tienda { font-size: 0.68rem; color: var(--accent, #2A9D8F); font-weight: 600; }

.ia-card-precio { font-size: 0.85rem; color: var(--primary, #E63946); font-weight: 700; }

.ia-card-agregar {

  background: linear-gradient(135deg, var(--primary, #E63946), var(--secondary, #F4A261));

  color: #fff;

  border: none;

  border-radius: 50px;

  padding: 0.4rem 0.85rem;

  font-size: 0.72rem;

  font-weight: 700;

  cursor: pointer;

  flex-shrink: 0;

  transition: transform 0.15s ease, box-shadow 0.15s ease;

  font-family: inherit;

}

.ia-card-agregar:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(230, 57, 70, 0.35); }

.ia-card-agregar:active { transform: scale(0.94); }



/* ---------- chips de sugerencia ---------- */



.ia-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  padding: 0.4rem 0.9rem 0.5rem;

  flex-shrink: 0;

}

.ia-chip {

  background: #fff;

  border: 1.5px solid var(--primary, #E63946);

  color: var(--primary, #E63946);

  border-radius: 50px;

  padding: 0.35rem 0.8rem;

  font-size: 0.74rem;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.2s ease, color 0.2s ease;

  font-family: inherit;

}

.ia-chip:hover, .ia-chip:active { background: var(--primary, #E63946); color: #fff; }



/* ---------- entrada ---------- */



.ia-entrada {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));

  background: #fff;

  border-top: 1px solid rgba(93, 64, 55, 0.10);

  border-radius: 0 0 0 0;

  flex-shrink: 0;

}

.ia-input {

  flex: 1;

  min-width: 0;

  border: 1.5px solid rgba(93, 64, 55, 0.16);

  border-radius: 50px;

  padding: 0.55rem 0.95rem;

  font-size: 0.85rem;

  font-family: inherit;

  color: var(--dark, #5D4037);

  background: var(--light, #FFF8E7);

  outline: none;

  transition: border-color 0.2s ease;

}

.ia-input:focus { border-color: var(--primary, #E63946); }

.ia-contador {

  font-size: 0.62rem;

  color: var(--dark, #5D4037);

  opacity: 0.55;

  white-space: nowrap;

  flex-shrink: 0;

}

.ia-enviar {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: none;

  background: linear-gradient(135deg, var(--primary, #E63946), var(--secondary, #F4A261));

  color: #fff;

  font-size: 0.9rem;

  cursor: pointer;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.15s ease;

  font-family: inherit;

}

.ia-enviar:hover { transform: scale(1.08); }

.ia-enviar:active { transform: scale(0.92); }



.ia-checkout {

  flex-shrink: 0;

  width: calc(100% - 1.8rem);

  margin: 0.55rem 0.9rem 0;

  padding: 0.7rem 1rem;

  border: 0;

  border-radius: 50px;

  background: linear-gradient(135deg, var(--primary, #E63946), #C1121F);

  color: #fff;

  font: inherit;

  font-size: 0.84rem;

  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 4px 12px rgba(193, 18, 31, 0.22);

}

.ia-checkout:hover { filter: brightness(1.05); }

.ia-checkout:active { transform: scale(0.98); }

.ia-checkout:focus-visible { outline: 2px solid var(--accent, #2A9D8F); outline-offset: 2px; }



/* ---------- toast de respaldo (solo si toast.js no está) ---------- */



.ia-toast-fallback {

  position: fixed;

  left: 50%;

  bottom: 90px;

  transform: translateX(-50%) translateY(10px);

  background: rgba(93, 64, 55, 0.95);

  color: #fff;

  padding: 0.6rem 1.1rem;

  border-radius: 50px;

  font-size: 0.8rem;

  font-family: inherit;

  opacity: 0;

  transition: opacity 0.3s ease, transform 0.3s ease;

  z-index: 9500;

  pointer-events: none;

}

.ia-toast-fallback.visible { opacity: 1; transform: translateX(-50%) translateY(0); }



/* ---------- móvil ---------- */



@media (max-width: 480px) {

  .ia-panel { max-width: 100%; border-radius: 20px 20px 0 0; }

  .ia-msg { max-width: 90%; }

  .ia-card { margin-left: 0; }

  .ia-float {

    right: 12px;

    bottom: calc(96px + env(safe-area-inset-bottom, 0px));

    min-width: 118px;

    height: 54px;

    padding-right: 13px;

  }

  .ia-float-icon {

    width: 32px;

    height: 32px;

  }

}



/* accesibilidad */

.ia-float:focus-visible,

.ia-teaser-x:focus-visible,

.ia-btn-icono:focus-visible,

.ia-card-agregar:focus-visible,

.ia-chip:focus-visible,

.ia-enviar:focus-visible,

.ia-input:focus-visible {

  outline: 2px solid var(--accent, #2A9D8F);

  outline-offset: 2px;

}



@media (prefers-reduced-motion: reduce) {

  .ia-float.ia-pulso { animation: none; }

  .ia-panel, .ia-msg, .ia-card, .ia-teaser { transition: none; animation: none; }

}


/* =====================================================================
   REDISEÑO VISUAL · BOTÓN IA DOMIDELIS
   Conserva el panel y los componentes del asistente; solo actualiza
   el botón flotante, su icono y la etiqueta.
   ===================================================================== */

.ia-float {
  position: fixed;
  min-width: 218px;
  max-width: min(260px, calc(100vw - 24px));
  height: 62px;
  padding: 7px 14px 7px 8px;
  gap: 10px;
  justify-content: flex-start;
  border: 1px solid rgba(230, 57, 70, 0.22);
  border-radius: 24px;
  background: linear-gradient(135deg, #fffdf8 0%, #fff8e7 100%);
  color: #5D4037;
  box-shadow: 0 7px 22px rgba(93, 64, 55, 0.20),
              0 2px 0 rgba(230, 57, 70, 0.12);
  touch-action: manipulation;
}

.ia-float::before {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -55%;
  width: 38%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(255, 255, 255, 0.08) 70%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  animation: iaFloatShimmer 3.8s ease-in-out infinite;
}

@keyframes iaFloatShimmer {
  0%, 38% { left: -55%; }
  78%, 100% { left: 125%; }
}

.ia-float:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffffff 0%, #fff4df 100%);
  box-shadow: 0 10px 26px rgba(93, 64, 55, 0.24),
              0 0 0 3px rgba(230, 57, 70, 0.10);
}

.ia-float:active { transform: scale(0.98); }

.ia-float-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 2px solid rgba(230, 57, 70, 0.14);
  background: linear-gradient(145deg, #E63946, #C91F35);
  color: #fff;
  font-size: 1.08rem;
  box-shadow: 0 3px 9px rgba(230, 57, 70, 0.24);
}

.ia-float-tag {
  display: block;
  min-width: 0;
  color: #5D4037;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: normal;
}

.ia-float-tag::after {
  content: "¿Qué se te antoja hoy?";
  display: block;
  margin-top: 4px;
  color: #80685D;
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
  white-space: nowrap;
}

/* Destello azul discreto: aporta sensación tecnológica sin cambiar la marca. */
.ia-float::after {
  content: "✦";
  position: absolute;
  top: 5px;
  right: 9px;
  color: #38BDF8;
  font-size: 0.72rem;
  line-height: 1;
  pointer-events: none;
}

.ia-float.ia-pulso {
  animation: iaPulsoNuevo 2.8s infinite;
}

.ia-float.ia-float-arrastrando::before {
  animation-play-state: paused;
}

@keyframes iaPulsoNuevo {
  0% { box-shadow: 0 7px 22px rgba(93, 64, 55, 0.20), 0 0 0 0 rgba(230, 57, 70, 0.22); }
  70% { box-shadow: 0 7px 22px rgba(93, 64, 55, 0.20), 0 0 0 9px rgba(230, 57, 70, 0); }
  100% { box-shadow: 0 7px 22px rgba(93, 64, 55, 0.20), 0 0 0 0 rgba(230, 57, 70, 0); }
}

@media (max-width: 480px) {
  .ia-float {
    right: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    min-width: 205px;
    max-width: calc(100vw - 24px);
    height: 58px;
    padding: 6px 12px 6px 7px;
    gap: 8px;
    border-radius: 22px;
  }

  .ia-float-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .ia-float-tag { font-size: 0.72rem; }
  .ia-float-tag::after { font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ia-float.ia-pulso { animation: none; }
}

/* Evita que el botón tape demasiado contenido en móviles estrechos */
@media (max-width: 360px) {
  .ia-float { gap: 5px; min-height: 76px; }
  .ia-float-icon { flex-basis: 62px; width: 62px; height: 58px; }
  .ia-float-flecha { flex-basis: 32px; width: 32px; height: 32px; }
  .ia-float-subtitulo { max-width: 155px; }
}

.ia-float {
  width: min(458px, calc(100vw - 32px));
  min-width: 0;
  max-width: none;
  min-height: 96px;
  height: 96px;
  padding: 6px 12px 6px 8px;
  gap: 10px;
  border: 2px solid rgba(230, 57, 70, 0.2);
  border-radius: 54px;
  background: linear-gradient(110deg, #fffdf8 0%, #fff8e7 100%);
  box-shadow: 0 8px 22px rgba(93, 64, 55, 0.18), 0 4px 9px rgba(230, 57, 70, 0.16);
  touch-action: none;
}

.ia-float-icon {
  flex-basis: 82px;
  width: 82px;
  height: 82px;
  border: 2px solid rgba(230, 57, 70, 0.14);
  border-radius: 50%;
  background: #fff8e7;
}

.ia-float-imagen {
  border-radius: 50%;
  object-fit: cover;
}

.ia-float-contenido { gap: 3px; }

.ia-float-badge {
  padding: 4px 9px;
  font-size: 0.64rem;
}

.ia-float-pregunta {
  font-size: clamp(0.88rem, 3.4vw, 1.12rem);
  line-height: 1.12;
}

.ia-float-subtitulo { font-size: clamp(0.65rem, 2.4vw, 0.78rem); }

.ia-float-flecha {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}

@media (max-width: 480px) {
  .ia-float {
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: min(310px, calc(100vw - 32px));
    min-height: 64px;
    height: 64px;
    max-width: min(310px, calc(100vw - 32px));
    padding: 4px 8px 4px 5px;
    gap: 6px;
    border-radius: 36px;
  }

  .ia-float-icon {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
  }

  .ia-float-badge { padding: 3px 6px; font-size: 0.53rem; }
  .ia-float-pregunta { font-size: clamp(0.72rem, 3.4vw, 0.86rem); }
  .ia-float-subtitulo { font-size: clamp(0.54rem, 2.3vw, 0.64rem); }

  .ia-float-flecha {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    font-size: 0.88rem;
  }
}

@media (max-width: 360px) {
  .ia-float {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    gap: 5px;
  }
  .ia-float-icon { flex-basis: 46px; width: 46px; height: 46px; }
  .ia-float-flecha { flex-basis: 26px; width: 26px; height: 26px; }
  .ia-float-subtitulo { max-width: 155px; }
}

@media (prefers-reduced-motion: reduce) {
  .ia-float::before {
    animation: none;
    display: none;
  }
}

/* =====================================================================
   DOMI IA · Ocultar el botón mientras el carrito está abierto
   (el JS del botón pone/quita esta clase al detectar .cart-panel.active)
   ===================================================================== */
.ia-float.ia-float-oculto-carrito {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Sumamos visibility a la transición que ya tenía el botón */
.ia-float {
  transition: transform 0.2s ease, opacity 0.25s ease,
              box-shadow 0.25s ease, visibility 0.25s ease;
}

/* ---------- calificación 👍/👎 de las respuestas del asistente ---------- */
.ia-calificacion {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(93, 64, 55, 0.15);
}
.ia-cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 26px;
  border: 1px solid rgba(93, 64, 55, 0.18);
  border-radius: 50px;
  background: #fff;
  color: var(--dark, #5D4037);
  font-size: 0.78rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
  font-family: inherit;
}
.ia-cal-btn:hover { transform: scale(1.08); background: var(--light, #FFF8E7); }
.ia-cal-btn:focus-visible { outline: 2px solid var(--accent, #2A9D8F); outline-offset: 2px; }
.ia-cal-gracias {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent, #2A9D8F);
}