/* ============================================================
   ✅ NUBOLAB CHAT - CSS SCOPED (ANTI OVERRIDE THEME)
   ============================================================ */

#nubolab-chat-root{
  position: relative !important;
  z-index: 999999 !important;
  isolation: isolate;
}

/* Variables SOLO dentro del chat (evita que otro :root cambie cosas) */
#nubolab-chat-root{
  --nubolab-primary:#111827;
  --nubolab-bg:#ffffff;
  --nubolab-user:#111827;
  --nubolab-agent:#f3f4f6;
  --nubolab-text:#111827;
  --nubolab-font:14px;
  --nubolab-title:14px;

  /* ECOM */
  --nubo-card-bg:#ffffff;
  --nubo-card-border:rgba(0,0,0,.10);
  --nubo-card-shadow:0 12px 34px rgba(0,0,0,.10);
  --nubo-accent:#1f3a8a;
  --nubo-muted:#6b7280;
  --nubo-radius:18px;
}

/* Mini reset solo para el chat */
#nubolab-chat-root,
#nubolab-chat-root *{
  box-sizing: border-box !important;
}

#nubolab-chat-root *{
  font-family: inherit;
  letter-spacing: normal !important;
  text-transform: none !important;
}

#nubolab-chat-root button,
#nubolab-chat-root input{
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: none;
}

#nubolab-chat-root a{
  text-decoration: none !important;
  color: inherit !important;
}

#nubolab-chat-root img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ============================================================
   FAB
   ============================================================ */

#nubolab-chat-root .nubolab-chat-fab{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  background: var(--nubolab-primary) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* ============================================================
   PANEL
   ============================================================ */

#nubolab-chat-root .nubolab-chat-panel{
  position: fixed !important;
  right: 18px !important;
  bottom: 86px !important;
  width: 360px !important;
  max-width: calc(100vw - 36px) !important;
  height: 520px !important;
  max-height: calc(100vh - 120px) !important;

  background: var(--nubolab-bg) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;

  display: none !important;
  overflow: hidden !important;

  font-size: var(--nubolab-font) !important;
  color: var(--nubolab-text) !important;

  /* Evita que layouts externos afecten el interior */
  contain: layout paint style;
}

#nubolab-chat-root .nubolab-chat-panel.open{
  display: flex !important;
  flex-direction: column !important;
}

/* ============================================================
   HEADER
   ============================================================ */

#nubolab-chat-root .nubolab-chat-header{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 12px !important;
  background: var(--nubolab-primary) !important;
  color: #fff !important;
  flex: 0 0 auto !important;
}

#nubolab-chat-root .nubolab-chat-icon{
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  background: #fff !important;
}

#nubolab-chat-root .nubolab-chat-title{
  font-size: var(--nubolab-title) !important;
  font-weight: 700 !important;
  flex: 1 !important;
  margin: 0 !important;
}

#nubolab-chat-root .nubolab-chat-close,
#nubolab-chat-root .nubolab-chat-menu-btn{
  color: #fff !important;
  font-size: 18px !important;
  cursor: pointer !important;
  opacity: .95 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  padding: 0 !important;
}

#nubolab-chat-root .nubolab-chat-close:hover,
#nubolab-chat-root .nubolab-chat-menu-btn:hover{
  background: rgba(255,255,255,.14) !important;
}

/* MENU */
#nubolab-chat-root .nubolab-chat-menu{ position: relative !important; }

#nubolab-chat-root .nubolab-chat-menu-pop{
  position: absolute !important;
  top: 40px !important;
  right: 0 !important;
  background: #fff !important;
  color: #111827 !important;
  min-width: 220px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
  display: none !important;
  z-index: 10 !important;
}

#nubolab-chat-root .nubolab-chat-menu-pop.open{ display:block !important; }

#nubolab-chat-root .nubolab-chat-menu-item{
  padding: 10px 12px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  display:flex !important;
  justify-content: space-between !important;
  align-items:center !important;
  background: transparent !important;
}

#nubolab-chat-root .nubolab-chat-menu-item:hover{
  background: rgba(0,0,0,.06) !important;
}

/* ============================================================
   BODY
   ============================================================ */

#nubolab-chat-root .nubolab-chat-body{
  flex: 1 1 auto !important;
  padding: 12px !important;
  overflow: auto !important;
  background: rgba(0,0,0,.02) !important;
}

#nubolab-chat-root .nubolab-msg{
  display: flex !important;
  margin: 8px 0 !important;
}

#nubolab-chat-root .nubolab-msg.user{ justify-content: flex-end !important; }
#nubolab-chat-root .nubolab-msg.agent{ justify-content: flex-start !important; }

#nubolab-chat-root .nubolab-bubble{
  max-width: 86% !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  line-height: 1.35 !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

#nubolab-chat-root .nubolab-msg.user .nubolab-bubble{
  background: var(--nubolab-user) !important;
  color: #fff !important;
  border-bottom-right-radius: 6px !important;
  white-space: pre-wrap !important;
}

#nubolab-chat-root .nubolab-msg.agent .nubolab-bubble{
  background: var(--nubolab-agent) !important;
  color: var(--nubolab-text) !important;
  border-bottom-left-radius: 6px !important;
  white-space: normal !important;
}

/* Typing bubble (3 dots) */
#nubolab-chat-root .nubolab-typing{
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 2px !important;
}

#nubolab-chat-root .nubolab-typing span{
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(17,24,39,.55) !important;
  display: inline-block !important;
  animation: nubolabDot 1.1s infinite ease-in-out !important;
}

#nubolab-chat-root .nubolab-typing span:nth-child(2){ animation-delay: .12s !important; }
#nubolab-chat-root .nubolab-typing span:nth-child(3){ animation-delay: .24s !important; }

@keyframes nubolabDot{
  0%, 80%, 100%{ transform: translateY(0); opacity: .45; }
  40%{ transform: translateY(-3px); opacity: 1; }
}

/* Cuando el agente manda HTML ecommerce, que use “ancho total” de la burbuja */
#nubolab-chat-root .nubolab-msg.agent .nubolab-bubble:has(.nubo-ecom),
#nubolab-chat-root .nubolab-msg.agent .nubolab-bubble:has(.nubo-product),
#nubolab-chat-root .nubolab-msg.agent .nubolab-bubble:has(.nubo-products){
  padding: 8px !important;
  max-width: 100% !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

#nubolab-chat-root .nubolab-chat-footer{
  display: flex !important;
  gap: 8px !important;
  padding: 10px !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  background: #fff !important;
  flex: 0 0 auto !important;
}

#nubolab-chat-root .nubolab-chat-input{
  flex: 1 !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 10px !important;
  padding: 10px 10px !important;
  background: #fff !important;
  color: var(--nubolab-text) !important;
  font-size: var(--nubolab-font) !important;
  line-height: 1.2 !important;
}

#nubolab-chat-root .nubolab-chat-send,
#nubolab-chat-root .nubolab-chat-rec{
  border-radius: 10px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  background: var(--nubolab-primary) !important;
  color: #fff !important;
  font-size: var(--nubolab-font) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================================
   ✅ ECOM SCOPE (dentro del chat)
   ============================================================ */

#nubolab-chat-root .nubo-ecom,
#nubolab-chat-root .nubo-ecom *{
  box-sizing: border-box !important;
}

#nubolab-chat-root .nubo-ecom{
  width: 100% !important;
  max-width: 100% !important;
  font-family: inherit !important;
}

#nubolab-chat-root .nubo-ecom img{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

#nubolab-chat-root .nubo-ecom a{
  text-decoration: none !important;
  color: inherit !important;
}

#nubolab-chat-root .nubo-ecom p,
#nubolab-chat-root .nubo-ecom h1,
#nubolab-chat-root .nubo-ecom h2,
#nubolab-chat-root .nubo-ecom h3,
#nubolab-chat-root .nubo-ecom h4{
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   ✅ ECOMMERCE CARDS
   ============================================================ */

#nubolab-chat-root .nubo-products{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

#nubolab-chat-root .nubo-product{
  background: var(--nubo-card-bg) !important;
  border: 1px solid var(--nubo-card-border) !important;
  border-radius: var(--nubo-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--nubo-card-shadow) !important;
}

#nubolab-chat-root .nubo-product__media{
  display: block !important;
  background: #f6f7fb !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}

#nubolab-chat-root .nubo-product__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 10px !important;
}

#nubolab-chat-root .nubo-product__body{
  padding: 14px 14px 16px !important;
  text-align: center !important;
}

#nubolab-chat-root .nubo-product__title{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  margin: 0 auto !important;
  max-width: 95% !important;
}

#nubolab-chat-root .nubo-product__price{
  margin-top: 10px !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  color: var(--nubo-accent) !important;
}

#nubolab-chat-root .nubo-product__desc{
  margin-top: 10px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: var(--nubo-muted) !important;
  max-width: 95% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#nubolab-chat-root .nubo-product__actions{
  margin-top: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
}

#nubolab-chat-root .nubo-btn{
  border: 0 !important;
  cursor: pointer !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  user-select: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 240px !important;
  transition: transform .06s ease, opacity .2s ease !important;
}

#nubolab-chat-root .nubo-btn--primary{
  background: var(--nubolab-primary) !important;
  color: #fff !important;
}

#nubolab-chat-root .nubo-btn--ghost{
  background: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

#nubolab-chat-root .nubo-btn:active{ transform: translateY(1px) !important; }
#nubolab-chat-root .nubo-btn[disabled]{ opacity: .7 !important; cursor: not-allowed !important; }













/* ============================================================
   ✅ FIX ECOM para el HTML REAL que devuelve el agente
   (nubo-product__link / __img / __info / __title / __price / __btn)
   PÉGALO AL FINAL para que sobreescriba lo anterior
   ============================================================ */

#nubolab-chat-root .nubo-products{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* Card */
#nubolab-chat-root .nubo-product{
  background: var(--nubo-card-bg) !important;
  border: 1px solid var(--nubo-card-border) !important;
  border-radius: var(--nubo-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--nubo-card-shadow) !important;
}

/* El <a> envuelve TODO: lo convertimos en layout vertical */
#nubolab-chat-root .nubo-product__link{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: transparent !important;
}

/* Imagen estilo “hero” */
#nubolab-chat-root .nubo-product__img{
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  background: #f6f7fb !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  padding: 12px !important;
}

/* Contenido */
#nubolab-chat-root .nubo-product__info{
  padding: 14px 14px 16px !important;
  text-align: center !important;
}

/* Título 2 líneas, sin romper el card */
#nubolab-chat-root .nubo-product__title{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  margin: 0 auto !important;
  max-width: 95% !important;
}

/* Precio: más limpio y consistente */
#nubolab-chat-root .nubo-product__price{
  margin-top: 10px !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  color: var(--nubo-accent) !important;
  letter-spacing: -0.2px !important;
}

/* Botón “Ver” */
#nubolab-chat-root .nubo-product__btn{
  margin-top: 14px !important;

  width: 100% !important;
  max-width: 240px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 16px !important;
  border-radius: 999px !important;
  background: var(--nubolab-primary) !important;
  color: #fff !important;

  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer !important;

  transition: transform .06s ease, opacity .2s ease !important;
}

/* Pequeño feedback táctil */
#nubolab-chat-root .nubo-product__btn:active{
  transform: translateY(1px) !important;
}

/* Si el theme mete estilos raros a botones */
#nubolab-chat-root .nubo-product__btn,
#nubolab-chat-root .nubo-product__btn *{
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Evita subrayados/colores raros dentro del <a> */
#nubolab-chat-root .nubo-product__link:hover{
  opacity: .98 !important;
}


/* ===== Imagen grande sin recorte ===== */
#nubolab-chat-root .nubo-product__img{
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  min-height: 200px !important;

  padding: 0 !important;               /* <-- clave */
  background: #f6f7fb !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;

  object-fit: contain !important;      /* no recorta */
  object-position: center !important;
  display: block !important;
}


#nubolab-chat-root .nubo-product{
  overflow: hidden !important;
}

#nubolab-chat-root .nubo-product__img{
  transition: transform .25s ease !important;
}

#nubolab-chat-root .nubo-product:hover .nubo-product__img{
  transform: scale(1.02) !important;
}