/* ============================================================
   Momentos Artesanales — Widget de chat de ventas (IA)
   ------------------------------------------------------------
   Basado en MA Catalogo/widgetsnippet.html. Debe cargarse junto con
   js/chat-widget.js (ver ese archivo). No depende de css/style.css.
   ============================================================ */
#ma-chat-bubble{
  /* Único botón flotante del sitio (el de WhatsApp quedó solo en el
     header, arriba a la derecha). Verde flúor para que se note que es
     el asistente con IA; ícono oscuro encima para que contraste bien
     (un ícono blanco casi no se ve sobre un verde tan claro/brillante). */
  position:fixed; bottom:22px; right:22px; width:58px; height:58px;
  border-radius:50%; background:#39FF14; color:#123B12; border:none;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.4); cursor:pointer;
  z-index:998000; display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease;
}
#ma-chat-bubble:hover{ transform: scale(1.07); }
#ma-chat-bubble svg{ width:28px; height:28px; }
#ma-chat-panel{
  position:fixed; bottom:90px; right:20px; width:340px; max-width:calc(100vw - 40px);
  height:460px; max-height:calc(100vh - 140px); background:#fff; border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.25); display:none; flex-direction:column;
  overflow:hidden; z-index:999999; font-family:system-ui,-apple-system,sans-serif;
}
#ma-chat-panel.open{ display:flex; }
#ma-chat-header{
  background:#5C8A5B; color:#fff; padding:14px 16px; font-weight:600;
  display:flex; justify-content:space-between; align-items:center;
}
#ma-chat-header button{ background:none; border:none; color:#fff; font-size:20px; cursor:pointer; line-height:1; }
#ma-chat-messages{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; background:#f6f8f5; }
.ma-msg{ padding:8px 12px; border-radius:12px; max-width:85%; font-size:14px; line-height:1.4; white-space:pre-wrap; }
.ma-msg.user{ background:#5C8A5B; color:#fff; align-self:flex-end; border-bottom-right-radius:2px; }
.ma-msg.bot{ background:#fff; color:#333; align-self:flex-start; border:1px solid #eee; border-bottom-left-radius:2px; }
.ma-pay-btn{
  display:inline-block; margin-top:8px; background:#009ee3; color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:20px; font-size:14px; font-weight:600; align-self:flex-start;
}
#ma-chat-form{ display:flex; border-top:1px solid #eee; padding:8px; gap:8px; }
#ma-chat-input{ flex:1; border:1px solid #ddd; border-radius:20px; padding:8px 14px; font-size:14px; outline:none; }
#ma-chat-send{ background:#5C8A5B; color:#fff; border:none; border-radius:20px; padding:8px 16px; cursor:pointer; font-size:14px; }
#ma-chat-send:disabled{ opacity:.6; cursor:default; }

@media (max-width:520px){
  #ma-chat-panel{ width:calc(100vw - 24px); right:12px; bottom:78px; }
  #ma-chat-bubble{ right:14px; bottom:14px; width:52px; height:52px; }
  #ma-chat-bubble svg{ width:26px; height:26px; }
}

/* Aviso flotante que invita a usar el chat (una vez por sesión). */
#ma-chat-tip{
  position:fixed; bottom:38px; right:88px; background:#fff; color:#222;
  padding:10px 16px; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.18);
  font-size:14px; font-weight:600; max-width:200px; cursor:pointer;
  z-index:997999; opacity:0; transform:translateY(6px) scale(.95);
  transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
#ma-chat-tip.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#ma-chat-tip::after{
  content:''; position:absolute; right:14px; bottom:-6px; width:12px; height:12px;
  background:#fff; transform:rotate(45deg);
}
@media (max-width:520px){
  #ma-chat-tip{ right:70px; bottom:24px; }
}