/* 29-oct-2026 — chat de preguntas de MALIK SHOP. Botón cromado abajo a la derecha (mismo acabado que la bolsa). */
.mvc-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1450;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#fff;border:2px solid transparent;
  background:linear-gradient(180deg,#2b2f36 0%,#0b0c0e 48%,#000 52%,#1b1e23 100%) padding-box,linear-gradient(180deg,#ffffff 0%,#9aa0a8 48%,#3b4047 52%,#d6dade 100%) border-box;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .2s cubic-bezier(.2,.9,.2,1),bottom .25s cubic-bezier(.2,.9,.2,1)}
.mvc-fab:hover{transform:translateY(-2px)}
/* algo tocable pasa por debajo (bandeja, botón de comprar, prenda, aviso de la bolsa): el botón se aparta */
.mvc-fab.mvc-aparte{opacity:0;pointer-events:none;transform:scale(.6)}
.mvc-fab{transition:transform .2s cubic-bezier(.2,.9,.2,1),opacity .2s,bottom .25s cubic-bezier(.2,.9,.2,1)}
.mvc-fab:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}
.mvc-fab svg,.mvc-panel svg{width:22px;height:22px;flex:none}
/* si está el botón de la bolsa (solo existe en el teléfono/tableta), el chat se pone encima (nunca lo tapa) */
@media (max-width:860px){body:has(.bolsa-fab:not([hidden])) .mvc-fab{bottom:calc(86px + env(safe-area-inset-bottom))}}
/* el pago, el visor y la intro van por encima: el chat no estorba */
body:has(.mk-modal) .mvc-fab,body:has(.zv.on) .mvc-fab,body:has(.intro:not(.out)) .mvc-fab{display:none}

.mvc-panel{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1600;width:min(370px,calc(100vw - 32px));
  height:min(560px,calc(100svh - 40px));display:flex;flex-direction:column;background:#fff;color:#0a0a0a;border:1.5px solid #0a0a0a;border-radius:4px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.45);font-family:'Michroma','Eurostile','Helvetica Neue',Arial,sans-serif;letter-spacing:.01em;overflow:hidden}
.mvc-panel[hidden]{display:none}
body.mvc-abierto .mvc-fab{display:none}
.mvc-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid #e2e2e0;
  background:linear-gradient(180deg,#fafafa,#efefee)}
.mvc-hd b{display:block;font-weight:400;font-size:13px;letter-spacing:.08em}
.mvc-hd span{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#6b6b6b;margin-top:3px}
.mvc-x{width:40px;height:40px;display:grid;place-items:center;border:1px solid #e2e2e0;border-radius:50%;background:#fff;color:#0a0a0a;cursor:pointer}
.mvc-x svg{width:18px;height:18px}
.mvc-log{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:9px;overscroll-behavior:contain}
.mvc-b{margin:0;max-width:86%;padding:10px 12px;font-size:11.5px;line-height:1.6;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.mvc-a{align-self:flex-start;background:#f2f2f1;border:1px solid #e6e6e4;border-bottom-left-radius:3px}
.mvc-u{align-self:flex-end;background:#0a0a0a;color:#fff;border-bottom-right-radius:3px}
.mvc-pts{display:flex;gap:5px;padding:14px 14px}
.mvc-pts i{width:6px;height:6px;border-radius:50%;background:#8a8a8a;animation:mvcPt 1s infinite ease-in-out}
.mvc-pts i:nth-child(2){animation-delay:.15s}.mvc-pts i:nth-child(3){animation-delay:.3s}
@keyframes mvcPt{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.mvc-sug{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px 4px}
.mvc-sug button{font:inherit;font-size:10px;letter-spacing:.03em;padding:8px 11px;min-height:34px;border:1px solid #cfcfcd;border-radius:999px;background:#fff;color:#0a0a0a;cursor:pointer;text-align:left}
.mvc-sug button:hover{border-color:#0a0a0a}
.mvc-ir{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 14px 8px}
.mvc-ir a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#0a0a0a;
  text-decoration:none;border:1px solid #0a0a0a;border-radius:3px;background:#fff}
.mvc-ir a svg{width:16px;height:16px}
.mvc-ir a:hover{background:#0a0a0a;color:#fff}
.mvc-f{display:flex;gap:8px;padding:8px 12px 6px;border-top:1px solid #e2e2e0}
.mvc-in{flex:1;min-width:0;font:inherit;font-size:12px;padding:11px 12px;border:1px solid #cfcfcd;border-radius:3px;background:#fff;color:#0a0a0a}
.mvc-in:focus{outline:none;border-color:#0a0a0a}
.mvc-go{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:3px;background:#0a0a0a;color:#fff;cursor:pointer}
.mvc-esperando .mvc-go{opacity:.4;pointer-events:none}
.mvc-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 10px}
.mvc-nota{margin:0;font-size:8.5px;letter-spacing:.04em;color:#8a8a8a;line-height:1.4}
/* «Powered by» + logo de iVot (imagen), chico y gris: no compite con el chat */
.mvc-ivot{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:8.5px;letter-spacing:.04em;color:#8a8a8a;text-decoration:none;opacity:.75}
.mvc-ivot:hover{opacity:1}
.mvc-ivot img{display:block;height:13px;width:auto;filter:grayscale(1)}

@media (max-width:860px){
  .mvc-panel{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;height:min(600px,calc(100svh - 70px))}
  .mvc-in{font-size:16px}  /* iOS no acerca la página al escribir */
  .mvc-usado .mvc-sug{display:none}  /* después de la 1.ª pregunta, más espacio para la conversación */
}
@media (prefers-reduced-motion:reduce){.mvc-fab{transition:none}.mvc-pts i{animation:none;opacity:.6}}