/* ============================ צ'אט חי ============================ */
.mkchat { font-family: Arial, "Arial Hebrew", Helvetica, sans-serif; }

/* ---------- הכפתור: תמונת נציג, ובמעבר עכבר נפתחת לשונית "צ'אט עם נציג" ---------- */
.mkchat-fab {
  position: fixed; z-index: 125;
  bottom: 24px; inset-inline-end: 24px;
  display: flex; align-items: center;
  padding: 0; border: 0; background: none;
  cursor: pointer; color: #000;
  -webkit-tap-highlight-color: transparent;
}
.mkchat-fab:focus-visible { outline: none !important; }
.mkchat-fab:focus-visible .mkchat-fab-face { outline: 3px solid #000; outline-offset: 3px; }

.mkchat-fab-face {
  position: relative; z-index: 2; flex: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: #448e42;
  box-shadow: 0 0 0 3px #fff, 0 12px 28px -8px rgba(0,0,0,.5);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.mkchat-fab-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* גל ירוק שמתפשט מהתמונה — מושך את העין בעדינות */
.mkchat-fab-face::before, .mkchat-fab-face::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #448e42; opacity: 0; pointer-events: none;
  animation: mkchat-ripple 3.2s ease-out infinite;
}
.mkchat-fab-face::after { animation-delay: 1.1s; }
@keyframes mkchat-ripple {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}
.mkchat-fab-dot {
  position: absolute; bottom: 2px; inset-inline-start: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #9a9a9a; border: 3px solid #fff;
}
.mkchat.is-online .mkchat-fab-dot { background: #25d366; }

/* הלשונית שנפתחת מאחורי התמונה */
.mkchat-fab-label {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  height: 52px;
  max-width: 0; overflow: hidden; white-space: nowrap;
  margin-inline-end: -30px;
  padding-inline: 0;
  background: #fff; color: #000;
  border-radius: 26px 0 0 26px;
  border-start-start-radius: 26px; border-end-start-radius: 26px;
  border-start-end-radius: 0; border-end-end-radius: 0;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06);
  opacity: 0;
  transition: max-width .45s cubic-bezier(.22,1,.36,1), padding .45s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.mkchat-fab-label strong { font-size: 15px; font-weight: 700; line-height: 1.2; }
.mkchat-fab-label small { font-size: 12px; color: #448e42; line-height: 1.3; }
.mkchat-fab-label strong, .mkchat-fab-label small {
  transform: translateX(14px); opacity: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1) .08s, opacity .3s ease .08s;
}

.mkchat-fab:hover .mkchat-fab-label,
.mkchat-fab:focus-visible .mkchat-fab-label,
.mkchat.is-peek .mkchat-fab-label {
  max-width: 260px; opacity: 1;
  padding-inline-start: 20px; padding-inline-end: 44px;
}
.mkchat-fab:hover .mkchat-fab-label strong, .mkchat-fab:hover .mkchat-fab-label small,
.mkchat-fab:focus-visible .mkchat-fab-label strong, .mkchat-fab:focus-visible .mkchat-fab-label small,
.mkchat.is-peek .mkchat-fab-label strong, .mkchat.is-peek .mkchat-fab-label small { transform: none; opacity: 1; }
.mkchat-fab:hover .mkchat-fab-face { transform: rotate(-8deg) scale(1.06); }
.mkchat.is-peek .mkchat-fab-face { animation: mkchat-wave 1s ease .2s 1; }
@keyframes mkchat-wave {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }  80% { transform: rotate(3deg); }
}

/* כשהחלון פתוח — כפתור שחור עם X */
.mkchat-fab-x {
  display: none; z-index: 2;
  width: 58px; height: 58px; border-radius: 50%;
  place-items: center; background: #000; color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 12px 28px -8px rgba(0,0,0,.5);
}
.mkchat.is-open .mkchat-fab-face,
.mkchat.is-open .mkchat-fab-label { display: none; }
.mkchat.is-open .mkchat-fab-x { display: grid; animation: mkchat-spin .3s ease; }
@keyframes mkchat-spin { from { transform: rotate(-90deg) scale(.6); } to { transform: none; } }

.mkchat-badge {
  position: absolute; z-index: 3; top: -4px; inset-inline-end: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; border: 2px solid #fff;
  background: #e53935; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
  animation: mkchat-pop .3s ease;
}
.mkchat-badge[hidden] { display: none; }
@keyframes mkchat-pop { from { transform: scale(.4); } to { transform: scale(1); } }

/* ---------- החלון — בסגנון וואטסאפ ---------- */
.mkchat-panel {
  position: fixed; z-index: 126;
  bottom: 100px; inset-inline-end: 24px;
  width: 380px; height: min(580px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  background: #efeae2; color: #111;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08);
  transform-origin: bottom left;
  animation: mkchat-in .28s cubic-bezier(.22,1,.36,1);
}
.mkchat-panel[hidden] { display: none; }
@keyframes mkchat-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

.mkchat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #448e42; color: #fff;
}
.mkchat-avatar { position: relative; flex: none; width: 42px; height: 42px; }
.mkchat-avatar img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; background: #fff; }
.mkchat-dot {
  position: absolute; bottom: -1px; inset-inline-start: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #9a9a9a; border: 2px solid #448e42;
}
.mkchat-dot.is-on { background: #25d366; }
.mkchat-head-text { flex: 1; min-width: 0; }
.mkchat-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkchat-status { margin: 2px 0 0; font-size: 13px; color: rgba(255,255,255,.85); }
.mkchat-close {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: #fff; cursor: pointer;
}
.mkchat-close:hover { background: rgba(255,255,255,.15); }

/* רקע בסגנון וואטסאפ — נקודות עדינות */
.mkchat-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 12px 8px;
  background-color: #efeae2;
  background-image:
    radial-gradient(rgba(68,142,66,.07) 1.2px, transparent 1.3px),
    radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.1px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
  display: flex; flex-direction: column; gap: 4px;
}
.mkchat-loading { margin: auto; color: #666; font-size: 14px; }

.mkchat-msg { display: flex; flex-direction: column; max-width: 80%; margin-top: 2px; }
.mkchat-bubble {
  position: relative;
  padding: 7px 10px 6px;
  border-radius: 10px;
  font-size: 15px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
}
/* השעה בתוך הבועה, בפינה — כמו בוואטסאפ */
.mkchat-time {
  float: inline-end; margin-inline-start: 10px; margin-top: 6px; margin-bottom: -3px;
  font-size: 11px; line-height: 1; color: rgba(0,0,0,.45);
  white-space: nowrap; direction: ltr;
}
.mkchat-ticks { color: #53bdeb; margin-inline-start: 2px; letter-spacing: -3px; }

/* הלקוח — ירוק, בצד שמאל */
.mkchat-msg.is-customer { align-self: flex-end; }
.mkchat-msg.is-customer .mkchat-bubble { background: #d9fdd3; color: #111; border-end-end-radius: 10px; border-start-end-radius: 0; }
.mkchat-msg.is-customer .mkchat-bubble::before {
  content: ""; position: absolute; top: 0; inset-inline-end: -7px;
  border-top: 8px solid #d9fdd3; border-inline-end: 8px solid transparent;
}
/* הנציג — אפור, בצד ימין */
.mkchat-msg.is-admin { align-self: flex-start; }
.mkchat-msg.is-admin .mkchat-bubble { background: #ececec; color: #111; border-start-start-radius: 0; }
.mkchat-msg.is-admin .mkchat-bubble::before {
  content: ""; position: absolute; top: 0; inset-inline-start: -7px;
  border-top: 8px solid #ececec; border-inline-start: 8px solid transparent;
}
/* ברצף הודעות מאותו צד — בלי "זנב" ועם רווח קטן */
.mkchat-msg.is-cont { margin-top: 0; }
.mkchat-msg.is-cont .mkchat-bubble { border-radius: 10px; }
.mkchat-msg.is-cont .mkchat-bubble::before { display: none; }

/* הודעה מהנציג עם תמונה קטנה ושם (הראשונה ברצף) */
.mkchat-msg.is-admin.has-face { flex-direction: row; align-items: flex-start; gap: 6px; max-width: 86%; }
.mkchat-msg.has-face .mkchat-face { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-top: 1px; }
.mkchat-msg.has-face .mkchat-bubble { min-width: 0; }
.mkchat-msg.is-admin.is-cont { padding-inline-start: 34px; }

/* הודעה אוטומטית — באמצע, כמו הודעות מערכת בוואטסאפ */
.mkchat-msg.is-system { align-self: center; max-width: 90%; margin: 6px 0; }
.mkchat-msg.is-system .mkchat-bubble {
  background: #fff6c9; color: #54524a; font-size: 13px; text-align: center;
  border-radius: 8px; padding: 6px 12px;
}

/* תגית תאריך */
.mkchat-day { align-self: center; margin: 6px 0; padding: 4px 12px; border-radius: 8px; background: #fff; color: #54656f; font-size: 12px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }

.mkchat-contact {
  padding: 12px 14px; border-top: 1px solid #ddd; background: #fff;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mkchat-contact[hidden] { display: none; }
.mkchat-contact p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #333; }
.mkchat .mkchat-contact input {
  width: 100%; min-width: 0; min-height: 40px; padding: 8px 11px;
  border: 1px solid #ccc; border-radius: 10px;
  font: inherit; font-size: 16px; background: #fff; color: #000;
}
.mkchat-contact input[type="email"] { grid-column: 1 / -1; }
.mkchat-contact-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.mkchat-btn {
  padding: 8px 18px; border: 0; border-radius: 999px;
  background: #448e42; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.mkchat-btn:hover { background: #3a7b38; }
.mkchat-link { border: 0; background: none; padding: 4px; color: #555; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* שורת הכתיבה */
.mkchat-input {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px; background: #f0f2f5;
}
.mkchat .mkchat-input textarea {
  flex: 1; min-width: 0; resize: none;
  min-height: 44px; height: 44px; max-height: 110px;
  padding: 11px 16px; border: 0; border-radius: 22px;
  font: inherit; font-size: 16px; line-height: 1.35; color: #111; background: #fff;
  box-shadow: 0 1px .5px rgba(11,20,26,.1);
}
.mkchat-send {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: #448e42; color: #fff; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.mkchat-send:hover { background: #3a7b38; }
.mkchat-send:active { transform: scale(.92); }
.mkchat-send:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.mkchat-input.is-sending .mkchat-send { opacity: .5; }

.mkchat .mkchat-input textarea:focus,
.mkchat .mkchat-contact input:focus {
  outline: none; background: #fff;
  box-shadow: 0 0 0 2px rgba(68,142,66,.45);
}
.mkchat .mkchat-contact input:focus { border-color: #448e42; }
html:not(.a11y-contrast) .mkchat textarea:focus-visible,
html:not(.a11y-contrast) .mkchat input:focus-visible { outline: none !important; }

/* "רגע לפני שהולכים" עולה מעל הכפתור כדי לא להתנגש */
.stay-offer { bottom: 104px; }

@media (max-width: 760px) {
  .mkchat-fab { bottom: calc(74px + env(safe-area-inset-bottom)); inset-inline-end: 14px; }
  .mkchat-fab-face { width: 56px; height: 56px; }
  .mkchat-fab-label { height: 46px; }
  .mkchat-fab-x { width: 52px; height: 52px; }
  .mkchat-panel {
    inset-inline: 8px; width: auto;
    bottom: calc(66px + env(safe-area-inset-bottom));
    top: max(8px, env(safe-area-inset-top));
    height: auto; border-radius: 14px;
  }
  .mkchat.is-open .mkchat-fab { display: none; }
  .stay-offer { bottom: calc(144px + env(safe-area-inset-bottom)); }
  body:has(.mkchat.is-open) .a11y-toggle { display: none; }
}

@media print { .mkchat { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mkchat-panel, .mkchat-badge, .mkchat-fab-x, .mkchat.is-peek .mkchat-fab-face { animation: none; }
  .mkchat-fab-face::before, .mkchat-fab-face::after { display: none; }
  .mkchat-fab-label, .mkchat-fab-label * { transition: none; }
}

/* קישורים בתוך הודעה */
.mkchat-bubble a { color: #027eb5; text-decoration: underline; word-break: break-all; unicode-bidi: isolate; }
.mkchat-msg.is-system .mkchat-bubble a { color: #1d6b1b; font-weight: 700; }
.mkchat-bubble a.mkchat-linkbtn {
  display: block; width: fit-content; margin: 8px auto 2px;
  padding: 7px 16px; border-radius: 999px;
  background: #448e42; color: #fff; text-decoration: none; font-weight: 700; word-break: normal;
}
.mkchat-bubble a.mkchat-linkbtn:hover { background: #3a7b38; }
.mkchat-msg.is-system .mkchat-bubble a.mkchat-linkbtn { color: #fff; font-size: 14px; }