/* Memi · Agente de ventas (web) — widget de chat flotante.
   Paleta de marca MemiPetShop: amarillo (#F5A623) + negro. Aislado con prefijo .memi-ag-. */

.memi-ag-root{
  --amber:#F5A623; --amber-d:#E08A0B; --ink:#1a1a1a; --muted:#6b7280;
  --line:#e9eaee; --bg:#f5f6f8; --panel:#fff; --user:#F5A623; --bot:#fff;
  position:fixed; right:18px; bottom:18px; z-index:2147482000;
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:15px; line-height:1.45;
}
@media (max-width:480px){ .memi-ag-root{ right:12px; bottom:12px; } }

/* Lanzador: etiqueta + burbuja juntas, para que se ENTIENDA que es un chat con IA sin abrirlo */
.memi-ag-launcher{ display:flex; align-items:center; gap:10px; }
.memi-ag-root.memi-ag-open .memi-ag-launcher{ display:none; }

/* Etiqueta ("globo") a la izquierda de la burbuja */
.memi-ag-tip{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:14px; padding:8px 13px; box-shadow:0 6px 20px rgba(0,0,0,.16);
  max-width:190px; cursor:pointer; user-select:none; animation:memiTipIn .4s ease both;
}
.memi-ag-tip b{ display:block; font-size:.82rem; font-weight:800; line-height:1.2; white-space:nowrap; }
.memi-ag-tip i{ display:block; font-style:normal; font-size:.7rem; color:var(--muted); margin-top:1px; }
@media (max-width:480px){ .memi-ag-tip{ max-width:150px; padding:7px 11px; } .memi-ag-tip i{ display:none; } }

/* Burbuja */
.memi-ag-bubble{
  position:relative; flex:0 0 auto;
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  background:var(--amber); color:#1a1a1a;
  display:flex; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  transition:transform .15s ease, box-shadow .15s ease;
  animation:memiPulse 2.6s ease-out infinite;
}
.memi-ag-bubble:hover{ transform:scale(1.06); }
/* Forzamos el tamaño del ícono: algunos temas (WooCommerce) aplastan el SVG a width:0 dentro del flex. */
.memi-ag-bubble .memi-ag-ico{ display:block; width:33px !important; height:33px !important; flex:0 0 auto; }
/* Puntito "en línea" (verde) sobre la burbuja */
.memi-ag-online{
  position:absolute; top:3px; right:3px; width:14px; height:14px; border-radius:50%;
  background:#16a34a; border:2.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
@keyframes memiPulse{
  0%{   box-shadow:0 8px 24px rgba(0,0,0,.24), 0 0 0 0 rgba(245,166,35,.55); }
  70%{  box-shadow:0 8px 24px rgba(0,0,0,.24), 0 0 0 15px rgba(245,166,35,0); }
  100%{ box-shadow:0 8px 24px rgba(0,0,0,.24), 0 0 0 0 rgba(245,166,35,0); }
}
@keyframes memiTipIn{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .memi-ag-bubble{ animation:none; } .memi-ag-tip{ animation:none; } }

/* Panel */
.memi-ag-panel{
  display:none; flex-direction:column; width:370px; max-width:calc(100vw - 24px);
  height:560px; max-height:calc(100dvh - 36px); background:var(--bg);
  border-radius:16px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.30);
}
.memi-ag-root.memi-ag-open .memi-ag-panel{ display:flex; }
@media (max-width:480px){
  .memi-ag-panel{ width:calc(100vw - 20px); height:calc(100dvh - 24px); }
}

.memi-ag-head{
  background:var(--ink); color:#fff; padding:12px 14px; display:flex; align-items:center; gap:10px;
}
.memi-ag-head .memi-ag-av{
  width:34px; height:34px; border-radius:50%; background:var(--amber); color:#1a1a1a;
  display:flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto;
}
.memi-ag-head .memi-ag-tt{ font-weight:800; }
.memi-ag-head .memi-ag-tt small{ display:block; font-weight:500; opacity:.7; font-size:.72rem; }
.memi-ag-head .memi-ag-x{ margin-left:auto; background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer; opacity:.85; line-height:1; }
.memi-ag-head .memi-ag-x:hover{ opacity:1; }

.memi-ag-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.memi-ag-msg{ max-width:84%; padding:9px 12px; border-radius:14px; white-space:pre-wrap; word-wrap:break-word; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.memi-ag-msg.u{ align-self:flex-end; background:var(--user); color:#1a1a1a; border-bottom-right-radius:4px; }
.memi-ag-msg.b{ align-self:flex-start; background:var(--bot); border:1px solid var(--line); border-bottom-left-radius:4px; }
.memi-ag-msg.b .memi-ag-who{ font-size:.68rem; color:var(--amber-d); font-weight:800; margin-bottom:2px; }
.memi-ag-typing{ align-self:flex-start; color:var(--muted); font-size:.85rem; padding:4px 6px; }

/* Tarjeta de producto con botón de carrito — compacta, para no estorbar la conversación */
.memi-ag-prods{ align-self:stretch; display:flex; flex-direction:column; gap:5px; margin:2px 0 2px; }
.memi-ag-prod{
  display:flex; align-items:center; gap:8px; background:#fafbfc; border:1px solid var(--line);
  border-radius:10px; padding:5px 8px;
}
.memi-ag-prod .memi-ag-pn{ flex:1; min-width:0; }
.memi-ag-prod .memi-ag-pn b{ display:block; font-size:.78rem; line-height:1.2; font-weight:700; }
.memi-ag-prod .memi-ag-pn span{ font-size:.72rem; color:var(--muted); }
.memi-ag-prod a.memi-ag-cart{
  flex:0 0 auto; background:var(--amber); color:#1a1a1a; text-decoration:none; font-weight:800;
  font-size:.72rem; padding:5px 10px; border-radius:8px; white-space:nowrap;
}
.memi-ag-prod button.memi-ag-cart{ border:0; cursor:pointer; font-family:inherit; line-height:1.2; }
.memi-ag-prod .memi-ag-cart:hover{ background:var(--amber-d); }
.memi-ag-prod .memi-ag-cart:disabled{ opacity:.8; cursor:default; }
.memi-ag-prod .memi-ag-cart.memi-ag-added{ background:#16a34a; color:#fff; }
.memi-ag-prod .memi-ag-nostock{ flex:0 0 auto; font-size:.7rem; color:#b91c1c; font-weight:700; }

.memi-ag-foot{ background:#fff; border-top:1px solid var(--line); padding:10px; }
.memi-ag-bar{ display:flex; gap:8px; align-items:flex-end; }
.memi-ag-bar textarea{
  flex:1; resize:none; border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  font:inherit; min-height:42px; max-height:110px; outline:none;
}
.memi-ag-bar textarea:focus{ border-color:var(--amber); }
.memi-ag-bar button{
  border:0; border-radius:12px; width:46px; height:42px; font-size:18px; cursor:pointer;
  background:var(--amber); color:#1a1a1a; font-weight:800;
}
.memi-ag-bar button:disabled{ opacity:.5; cursor:default; }
.memi-ag-note{ text-align:center; font-size:.68rem; color:var(--muted); margin-top:6px; }
.memi-ag-note a{ color:var(--amber-d); text-decoration:none; }