@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700;800&display=swap');

/* ===== Meatbot — "Warm Premium Butcher" ===== */
:root{
  --mb-red:#7a1c1c; --mb-red2:#a3282a; --mb-cream:#faf6f2; --mb-card:#ffffff;
  --mb-ink:#2b2622; --mb-muted:#8a7f76; --mb-line:#ece3db; --mb-wa:#25d366; --mb-ok:#2e7d32;
  --mb-font:'Assistant','Segoe UI',Arial,sans-serif;
}

/* Desktop + mobile: bubble on the LEFT side, raised above the site's accessibility (vee-crm) icon at bottom:20px */
html body #meatbot-bubble{
  position:fixed !important; inset-inline-start:auto !important; inset-inline-end:24px !important; inset-block-end:100px !important; z-index:2147483000 !important;
  width:68px !important; height:68px !important; padding:0 !important; margin:0 !important;
  border:none !important; border-radius:50% !important; cursor:pointer !important;
  background:radial-gradient(120% 120% at 30% 20%, var(--mb-red2), var(--mb-red)) !important;
  color:#fff !important; font-size:30px !important; line-height:1 !important;
  box-shadow:0 8px 22px rgba(43,38,34,.28), 0 3px 10px rgba(122,28,28,.35) !important;
  outline:none !important; -webkit-appearance:none !important; appearance:none !important;
  overflow:visible !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  transition:transform .18s ease, box-shadow .18s ease;
  animation:mb-pulse 2.4s ease-out infinite;
}
html body #meatbot-bubble:hover{ transform:translateY(-3px) scale(1.05) !important; animation:none; box-shadow:0 12px 28px rgba(43,38,34,.35), 0 4px 12px rgba(122,28,28,.45) !important; }
html body #meatbot-bubble:focus{ outline:none !important; }
html body #meatbot-bubble::before{ content:'' !important; position:absolute !important; inset:-6px !important; border-radius:50% !important; border:2px solid rgba(37,211,102,.75) !important; pointer-events:none !important; opacity:0; }
html body #meatbot-bubble::after{ content:'' !important; position:absolute !important; inset-block-start:4px !important; inset-inline-end:4px !important; inset-inline-start:auto !important; width:13px !important; height:13px !important; background:#22c55e !important; border:2px solid #fff !important; border-radius:50% !important; box-shadow:0 1px 3px rgba(0,0,0,.25) !important; }
@keyframes mb-pulse{ 0%{ box-shadow:0 8px 22px rgba(43,38,34,.28), 0 3px 10px rgba(122,28,28,.35), 0 0 0 0 rgba(37,211,102,.55); } 70%{ box-shadow:0 8px 22px rgba(43,38,34,.28), 0 3px 10px rgba(122,28,28,.35), 0 0 0 14px rgba(37,211,102,0); } 100%{ box-shadow:0 8px 22px rgba(43,38,34,.28), 0 3px 10px rgba(122,28,28,.35), 0 0 0 0 rgba(37,211,102,0); } }
#meatbot-bubble svg.mb-icon{ width:34px; height:34px; display:block; pointer-events:none; }

#meatbot-tooltip{
  position:fixed; inset-inline-start:auto; inset-inline-end:100px; inset-block-end:110px; z-index:2147482999;
  background:#fff; color:var(--mb-ink); font-family:var(--mb-font); font-size:13.5px;
  padding:13px 16px; border-radius:16px; border:1px solid var(--mb-line);
  box-shadow:0 12px 32px rgba(43,38,34,.22), 0 4px 12px rgba(122,28,28,.08);
  max-width:250px; line-height:1.4; direction:rtl; text-align:start; cursor:pointer;
  opacity:0; transform:translateY(6px) scale(.96); pointer-events:none;
  transition:opacity .32s ease, transform .32s ease;
  animation:none;
}
#meatbot-tooltip.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; animation:mb-tt-wiggle 2.4s ease-in-out .8s 2; }
@keyframes mb-tt-wiggle{ 0%,100%{ transform:translateY(0) rotate(0); } 15%{ transform:translateY(-3px) rotate(-1.5deg); } 30%{ transform:translateY(0) rotate(1.5deg); } 45%{ transform:translateY(-2px) rotate(-1deg); } 60%{ transform:translateY(0) rotate(0); } }
#meatbot-tooltip:hover{ box-shadow:0 14px 36px rgba(43,38,34,.28), 0 4px 14px rgba(122,28,28,.12); }
#meatbot-tooltip .mb-tt-title{ font-weight:800; font-size:15px; color:var(--mb-red); margin-bottom:3px; }
#meatbot-tooltip .mb-tt-body{ font-weight:600; color:var(--mb-ink); font-size:13px; opacity:.85; }
#meatbot-tooltip::after{
  content:''; position:absolute; inset-block-end:18px; inset-inline-start:auto; inset-inline-end:-7px;
  width:13px; height:13px; background:#fff; border-inline-end:1px solid var(--mb-line); border-block-end:1px solid var(--mb-line);
  transform:rotate(-45deg);
}
#meatbot-tooltip .mb-tt-close{
  position:absolute; inset-block-start:-9px; inset-inline-end:-9px; width:24px; height:24px;
  border-radius:50%; border:1px solid var(--mb-line); background:#fff; color:var(--mb-muted);
  font-size:15px; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(43,38,34,.14);
}
#meatbot-tooltip .mb-tt-close:hover{ color:var(--mb-red2); border-color:var(--mb-red2); }

/* Round the site's square WhatsApp float so it visually matches our bubble */
a.whatsapp-icon{ border-radius:50% !important; overflow:hidden; }

#meatbot-panel{
  position:fixed; inset-inline-start:auto; inset-inline-end:24px; inset-block-end:180px; z-index:2147483000;
  width:372px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 130px);
  background:var(--mb-cream); border-radius:20px; overflow:hidden;
  box-shadow:0 24px 60px rgba(43,38,34,.28); display:none; flex-direction:column;
  font-family:var(--mb-font); direction:rtl; color:var(--mb-ink);
  animation:mb-in .22s cubic-bezier(.2,.8,.2,1);
}
#meatbot-panel.open{ display:flex; }
@keyframes mb-in{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }

#meatbot-head{
  background:linear-gradient(135deg,var(--mb-red2),var(--mb-red));
  color:#fff; padding:15px 18px; display:flex; align-items:center; gap:11px;
}
#meatbot-head .mb-avatar{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto }
#meatbot-head .mb-title{ font-weight:800; font-size:16px; line-height:1.2 }
#meatbot-head .mb-sub{ font-size:12px; opacity:.85; font-weight:600 }
#meatbot-head .mb-close{ margin-inline-start:auto; background:none;border:none;color:#fff;font-size:22px;cursor:pointer;opacity:.85;line-height:1 }
#meatbot-head .mb-close:hover{ opacity:1 }

#meatbot-log{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:12px; }
#meatbot-log::-webkit-scrollbar{ width:7px } #meatbot-log::-webkit-scrollbar-thumb{ background:#dcd0c6;border-radius:8px }

.mb-msg{ max-width:86%; padding:10px 13px; border-radius:16px; font-size:14.5px; line-height:1.6; word-wrap:break-word; }
.mb-user{ background:var(--mb-red); color:#fff; margin-inline-start:auto; border-end-end-radius:5px; }
.mb-bot{ background:var(--mb-card); border:1px solid var(--mb-line); margin-inline-end:auto; border-end-start-radius:5px; box-shadow:0 2px 8px rgba(43,38,34,.05); }
.mb-bot a{ color:var(--mb-red2); font-weight:700; text-decoration:underline; }
.mb-bot strong{ font-weight:800; }

.mb-typing{ display:inline-flex; gap:4px; padding:4px 2px; }
.mb-typing i{ width:7px;height:7px;border-radius:50%;background:#c9bcb0;animation:mb-bounce 1s infinite; }
.mb-typing i:nth-child(2){ animation-delay:.15s } .mb-typing i:nth-child(3){ animation-delay:.3s }
@keyframes mb-bounce{ 0%,60%,100%{ transform:translateY(0);opacity:.5 } 30%{ transform:translateY(-5px);opacity:1 } }

/* product card */
.mb-cards{ display:flex; flex-direction:column; gap:9px; margin-inline-end:auto; max-width:100%; width:100%; }
.mb-card{ display:flex; gap:11px; background:var(--mb-card); border:1px solid var(--mb-line); border-radius:14px; padding:9px; align-items:center; box-shadow:0 2px 10px rgba(43,38,34,.06); }
.mb-card-img{ width:66px;height:66px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#f0e9e2 }
.mb-card-body{ flex:1; min-width:0 }
.mb-card-name{ font-weight:700; font-size:14px; line-height:1.3; margin-bottom:3px; }
.mb-card-name a{ color:var(--mb-ink); text-decoration:none } .mb-card-name a:hover{ color:var(--mb-red2) }
.mb-card-price{ color:var(--mb-red2); font-weight:800; font-size:15px; }
.mb-card-oos{ color:var(--mb-muted); font-size:12px; font-weight:600 }
.mb-card-branch{ color:#15803d; font-size:12px; font-weight:700; line-height:1.35 }
.mb-deal{ display:inline-block; margin-inline-start:7px; background:#fff2ec; color:#c2410c; font-size:11px; font-weight:800; padding:1px 7px; border-radius:20px; vertical-align:middle }
.mb-add{ flex:0 0 auto; display:flex; flex-direction:column; gap:5px; justify-content:center; }
.mb-add button{ background:var(--mb-red); color:#fff; border:none; border-radius:10px; padding:8px 12px; font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; transition:background .15s; }
.mb-btn-view{ background:#fff; color:var(--mb-red); border:1.5px solid var(--mb-line); border-radius:10px; padding:7px 12px; font-weight:700; font-size:12.5px; text-align:center; text-decoration:none; white-space:nowrap; }
.mb-btn-view:hover{ border-color:var(--mb-red2); color:var(--mb-red2); }
.mb-add button:hover{ background:var(--mb-red2) }
.mb-add button.added{ background:var(--mb-ok) }
.mb-add button:disabled{ opacity:.75; cursor:default }
.mb-carthint{ font-size:12px; color:var(--mb-muted); text-align:center; padding:5px 2px 1px; }
.mb-addall{ background:#2b2622; color:#fff; border:none; border-radius:12px; padding:11px; font-family:inherit; font-weight:800; font-size:14px; cursor:pointer; display:flex;align-items:center;justify-content:center;gap:7px; }
.mb-addall:hover{ background:#000 }
a.mb-addall,a.mb-cartcta{ text-decoration:none; color:#fff }
.mb-cartcta{ background:var(--mb-red) } .mb-cartcta:hover{ background:var(--mb-red2) }

/* recipe card */
.mb-recipe{ background:var(--mb-card); border:1px solid var(--mb-line); border-radius:16px; overflow:hidden; margin-inline-end:auto; width:100%; box-shadow:0 3px 12px rgba(43,38,34,.08); }
.mb-recipe-img{ width:100%; height:140px; object-fit:cover; display:block; background:#f0e9e2 }
.mb-recipe-body{ padding:12px 13px }
.mb-recipe-title{ font-weight:800; font-size:15.5px; margin-bottom:4px }
.mb-recipe-link{ display:inline-block; color:var(--mb-red2); font-weight:700; font-size:13.5px; text-decoration:none; margin-bottom:8px }
.mb-recipe-link:hover{ text-decoration:underline }
.mb-recipe .mb-prods-label{ font-size:12.5px; color:var(--mb-muted); font-weight:700; margin:6px 0 5px }

.mb-fb{ margin-top:7px; display:flex; gap:6px; font-size:11px; color:var(--mb-muted); }
.mb-fb-btn{ background:transparent; border:1px solid var(--mb-line); border-radius:8px; padding:2px 9px; cursor:pointer; font-size:13px; line-height:1.4; }
.mb-fb-btn:hover{ background:#f3ece6; }
.mb-wa{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; background:var(--mb-wa); color:#fff; padding:9px 14px; border-radius:11px; text-decoration:none; font-weight:800; font-size:14px; }

#meatbot-form{ display:flex; gap:8px; padding:11px; background:var(--mb-card); border-top:1px solid var(--mb-line); }
#meatbot-input{ flex:1; border:1.5px solid var(--mb-line); border-radius:12px; padding:11px 13px; font-size:16px; font-family:inherit; background:var(--mb-cream); color:var(--mb-ink); outline:none; }
#meatbot-input:focus{ border-color:var(--mb-red2) }
#meatbot-send{ background:var(--mb-red); color:#fff; border:none; border-radius:12px; width:46px; font-size:19px; cursor:pointer; flex:0 0 auto; }
#meatbot-send:hover{ background:var(--mb-red2) }

@media (max-width:640px){
  /* Anchor panel top+bottom so it always fits the viewport (incl. when the on-screen
     keyboard shrinks it). Height auto-derives from top/bottom — nothing gets clipped. */
  #meatbot-panel{
    inset-inline:10px !important;
    inset-block-start:14px !important;
    inset-block-end:14px !important;
    width:auto !important; height:auto !important; max-height:none !important;
  }
  html body #meatbot-bubble{ inset-inline-end:14px !important; inset-block-end:90px !important; width:62px !important; height:62px !important; font-size:28px !important; }
  #meatbot-bubble svg.mb-icon{ width:32px; height:32px; }
  #meatbot-tooltip{ inset-inline-end:84px; inset-block-end:108px; font-size:13px; max-width:190px; }
  /* When the chat is open on mobile, hide the bubble (it would overlap the panel
     and is redundant — user has a big × in the panel header) */
  body.meatbot-open #meatbot-bubble,
  body.meatbot-open #meatbot-tooltip{ display:none !important; }
  /* Bigger, unmistakable close button on mobile — always tappable (44+ px target) */
  #meatbot-head .mb-close{
    width:38px; height:38px; font-size:26px; opacity:1;
    background:rgba(255,255,255,.18); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;
  }
}
/* Lock body scroll while chat is open (prevents the page shift on tap/keyboard) */
body.meatbot-open{ overflow:hidden !important; touch-action:none; overscroll-behavior:contain; }
body.meatbot-open #meatbot-panel{ overscroll-behavior:contain; }
@media (prefers-reduced-motion:reduce){ #meatbot-panel{ animation:none } .mb-typing i{ animation:none } #meatbot-bubble{ transition:none; animation:none } #meatbot-tooltip{ transition:none } }