/* ============================================================
   مساعد مناكب — Bubble + Panel Styles
   ⛔ CSS كله logical properties (inline-start/end) ⇒ RTL/LTR تلقائي.
   ⛔ لا يتداخل مع .mobile-tabbar ولا شريط الكوكيز — مواضع متجاوبة.
   ⛔ يتبع هوية الموقع (ألوان site-settings).
   ============================================================ */

#mnk-assistant-root { position: fixed; inset-block-end: 0; inset-inline-end: 0; z-index: 2147483000; }
#mnk-assistant-root[hidden] { display: none !important; }

.mnk-assistant {
  --mnk-bubble-size: 58px;
  --mnk-radius-lg: 22px;
  --mnk-radius-md: 16px;
  --mnk-radius-sm: 12px;
  --mnk-ink: var(--ink, #17233B);
  --mnk-ink-soft: var(--ink-soft, #6E778C);
  --mnk-line: var(--line, #ECE6DA);
  --mnk-card: var(--paper, #fff);
  --mnk-accent: var(--navy, #13203B);
  --mnk-gold: var(--gold, #C89B6B);
  --mnk-ok: #2F7D57;
  --mnk-warn: #9A6B1F;
  --mnk-shadow: 0 10px 40px rgba(11,19,36,.18), 0 2px 8px rgba(11,19,36,.08);
  --mnk-safe-b: env(safe-area-inset-bottom, 0px);
  --mnk-safe-i: env(safe-area-inset-end, 0px);
  font-family: inherit;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s var(--ease, cubic-bezier(.22,.85,.3,1)), transform .4s var(--ease, cubic-bezier(.22,.85,.3,1));
}
.mnk-assistant.is-ready { opacity: 1; transform: none; }

/* ---------- Bubble ---------- */
.mnka-bubble {
  position: fixed;
  inset-block-end: calc(20px + var(--mnk-safe-b));
  inset-inline-end: calc(20px + var(--mnk-safe-i));
  inline-size: var(--mnk-bubble-size);
  block-size: var(--mnk-bubble-size);
  border-radius: 50%;
  border: none;
  /* ⛔ التدرّج الموحّد */ background: var(--mnk-grad, linear-gradient(135deg,#1F3A33,#2A3C63 55%,#2E4A3B));
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 26px rgba(11,19,36,.28);
  transition: transform .2s var(--ease, cubic-bezier(.22,.85,.3,1)), box-shadow .2s;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.mnka-bubble:hover { transform: scale(1.06); box-shadow: 0 12px 34px rgba(11,19,36,.34); }
.mnka-bubble:active { transform: scale(.97); }
.mnka-bubble:focus-visible { outline: 3px solid var(--mnk-gold); outline-offset: 3px; }
.mnka-bubble-ico { display: grid; place-items: center; inline-size: 28px; block-size: 28px; }
.mnka-bubble-ico svg { inline-size: 100%; block-size: 100%; }
.mnk-assistant.is-open .mnka-bubble {
  /* ⛔ عند فتح النافذة تختفي الفقاعة تماماً: زر الإغلاق في الهيدر كافٍ،
     وبقاءها يطفو فوق النافذة ويترك فراغاً ~73px في الأعلى.
     ⛔ visibility يُقلب فوراً بلا transition حتى لا يترك فراغاً في أي إطار. */
  opacity: 0;
  visibility: hidden;
  transform: scale(.6);
  pointer-events: none;
  transition: none;
}
/* ⛔ نقطة التحول من الزاوية القريبة من الزر (أسفل يمين/يسار حسب الاتجاه) */
.mnk-assistant.is-open .mnka-panel { transform-origin: bottom var(--mnk-origin-x, right); }
[dir="rtl"] .mnk-assistant.is-open .mnka-panel { --mnk-origin-x: left; }
[dir="ltr"] .mnk-assistant.is-open .mnka-panel { --mnk-origin-x: right; }

/* Pulse when offline-hours/unavailable but still visible */
.mnka-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--mnk-gold);
  opacity: 0;
}
.mnka-assistant.is-pulse .mnka-bubble::after { animation: mnka-pulse 2.4s ease-out infinite; }
@keyframes mnka-pulse {
  0% { transform: scale(1); opacity: .7; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.mnka-badge {
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: -3px;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: #C4574C;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--mnk-card);
  line-height: 1;
}
.mnka-badge[hidden] { display: none !important; }
/* نبضة الشارة عند وصول رد جديد (نمط واتساب) */
.mnka-badge.is-new { animation: mnka-badge-pop .5s cubic-bezier(.2, 1.4, .4, 1) 1; }
@keyframes mnka-badge-pop {
  0%   { transform: scale(.35); opacity: 0; }
  55%  { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* زر كتم/تشغيل تنبيه الردود */
.mnka-mute .mnka-mute-off { display: none; }
.mnka-mute[aria-pressed="true"] .mnka-mute-on { display: none; }
.mnka-mute[aria-pressed="true"] .mnka-mute-off { display: block; }
.mnka-mute[aria-pressed="true"] { color: #F5D0A8; }

/* ---------- Panel ---------- */
/* ⛔ padding:0 صريح: الموقع فيه `section{padding:72px 0}` — لو رجع الوسم <section>
   في أي تعديل مستقبلي فراغ 72px يظهر فوق النافذة. الحماية هنا دائمة. */
.mnka-panel {
  padding: 0;
  position: fixed;
  inset-block-end: calc(20px + var(--mnk-safe-b));
  inset-inline-end: calc(20px + var(--mnk-safe-i));
  inline-size: 400px;
  block-size: min(640px, calc(100dvh - 120px));
  background: var(--mnk-card);
  border: 1px solid var(--mnk-line);
  border-radius: var(--mnk-radius-lg);
  box-shadow: var(--mnk-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .24s var(--ease, cubic-bezier(.22,.85,.3,1)), transform .24s var(--ease, cubic-bezier(.22,.85,.3,1));
}
.mnka-panel[hidden] { display: none !important; }
.mnk-assistant.is-open .mnka-panel { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.mnka-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  /* ⛔ التدرّج الموحّد */ background: var(--mnk-grad, linear-gradient(135deg,#1F3A33,#2A3C63 55%,#2E4A3B));
  color: #fff;
  flex: none;
}
.mnka-avatar {
  inline-size: 40px; block-size: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: grid; place-items: center;
  flex: none;
  overflow: hidden;
}
.mnka-avatar svg { inline-size: 24px; block-size: 24px; }
.mnka-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mnka-head-txt { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.mnka-title { font-size: 14.5px; font-weight: 800; }
.mnka-state { font-size: 11.5px; opacity: .92; margin-top: 1px; }
.mnka-state.is-off { color: #F5D0A8; }
.mnka-state.is-on { color: #B9E6CD; }
.mnka-state.is-wait { color: #F0D9A8; }
.mnka-state.is-human { color: #B9E6CD; }
.mnka-icon-btn {
  inline-size: 34px; block-size: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid; place-items: center;
  flex: none;
  transition: background .15s;
}
.mnka-icon-btn:hover { background: rgba(255,255,255,.14); }
.mnka-icon-btn:focus-visible { outline: 2px solid var(--mnk-gold); outline-offset: 2px; }
.mnka-icon-btn svg { inline-size: 19px; block-size: 19px; }

/* ---------- Banner ---------- */
.mnka-banner {
  padding: 9px 14px;
  background: #FBF2E0;
  color: var(--mnk-warn);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  border-block-end: 1px solid var(--mnk-line);
  flex: none;
}
.mnka-banner[hidden] { display: none !important; }

/* ---------- Body / Messages ---------- */
.mnka-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: linear-gradient(180deg, rgba(251,248,241,.5), rgba(255,255,255,0));
  scrollbar-width: thin;
}
.mnka-body::-webkit-scrollbar { inline-size: 6px; }
.mnka-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }

/* ⛔ في RTL: flex-end = اليسار و flex-start = اليمين (المفرق في RTL).
   الحل الصحيح: margin-inline بدل align-self — يتقلب مع الاتجاه تلقائياً. */
.mnka-msg { display: flex; gap: 7px; align-items: flex-end; max-inline-size: 86%; }
.mnka-msg.is-me { margin-inline-start: auto; flex-direction: row-reverse; }
.mnka-msg.is-ai, .mnka-msg.is-staff { margin-inline-end: auto; }
.mnka-ava {
  inline-size: 26px; block-size: 26px;
  border-radius: 50%;
  flex: none;
  display: grid; place-items: center;
  background: rgba(200,155,107,.16);
  color: var(--mnk-accent);
  margin-block-end: 2px;
}
.mnka-ava svg { inline-size: 16px; block-size: 16px; }
.mnka-bubble-msg {
  padding: 9px 13px;
  border-radius: var(--mnk-radius-md);
  background: #F5F3EE;
  font-size: 13.8px;
  line-height: 1.65;
  position: relative;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.mnka-msg.is-me .mnka-bubble-msg {
  background: var(--mnk-accent);
  color: #fff;
  border-start-end-radius: 5px;
}
.mnka-msg.is-ai .mnka-bubble-msg {
  background: #fff;
  border: 1px solid var(--mnk-line);
  border-start-start-radius: 5px;
}
.mnka-msg.is-staff .mnka-bubble-msg {
  background: #E7F4EC;
  border: 1px solid rgba(47,125,87,.25);
  border-start-start-radius: 5px;
}
.mnka-text { white-space: pre-wrap; }
/* ⛔ تباين الوقت: opacity .6 كان باهتاً على خلفية داكنة — نرفعه ليقرأ بوضوح */
.mnka-time { display: block; font-size: 10.5px; opacity: .78; margin-block-start: 4px; text-align: end; font-variant-numeric: tabular-nums; }
.mnka-status { display: block; font-size: 10.5px; opacity: .8; margin-block-start: 4px; }
.mnka-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  background: var(--mnk-ok);
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
  margin-block-end: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.mnka-retry {
  margin-block-start: 5px;
  background: #C4574C;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.mnka-retry:focus-visible { outline: 2px solid var(--mnk-gold); outline-offset: 2px; }
.mnka-msg.is-failed .mnka-bubble-msg { border: 1px solid #C4574C; }

/* System message (welcome) */
.mnka-sys {
  align-self: center;
  max-inline-size: 92%;
  background: rgba(200,155,107,.12);
  color: var(--mnk-ink-soft);
  border: 1px solid rgba(200,155,107,.3);
  border-radius: var(--mnk-radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
}

/* Typing */
.mnka-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.mnka-dots i {
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: var(--mnk-ink-soft);
  animation: mnka-bounce 1.3s infinite ease-in-out;
}
.mnka-dots i:nth-child(2) { animation-delay: .15s; }
.mnka-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mnka-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Jump-to-latest ---------- */
.mnka-jump {
  position: absolute;
  inset-block-end: 78px;
  inset-inline-end: 50%;
  transform: translateX(50%);
  inline-size: 34px; block-size: 34px;
  border-radius: 50%;
  border: 1px solid var(--mnk-line);
  background: var(--mnk-card);
  color: var(--mnk-ink);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11,19,36,.16);
  z-index: 3;
}
[dir="rtl"] .mnka-jump { transform: translateX(50%); }
.mnka-jump[hidden] { display: none !important; }
.mnka-jump svg { inline-size: 17px; block-size: 17px; }
.mnka-jump:focus-visible { outline: 2px solid var(--mnk-gold); outline-offset: 2px; }

/* ---------- Form ---------- */
.mnka-form {
  flex: none;
  border-block-start: 1px solid var(--mnk-line);
  background: var(--mnk-card);
  padding: 10px 12px calc(12px + var(--mnk-safe-b) * 0);
  position: relative;
}
.mnka-suggest {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-block-end: 8px;
  scrollbar-width: none;
}
.mnka-suggest::-webkit-scrollbar { display: none; }
.mnka-suggest[hidden] { display: none !important; }
.mnka-chip {
  flex: none;
  background: rgba(200,155,107,.12);
  border: 1px solid rgba(200,155,107,.35);
  color: var(--mnk-ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.mnka-chip:hover { background: rgba(200,155,107,.2); }
.mnka-chip:focus-visible { outline: 2px solid var(--mnk-gold); outline-offset: 2px; }

.mnka-input-row { display: flex; align-items: flex-end; gap: 7px; }
.mnka-input {
  flex: 1;
  border: 1px solid var(--mnk-line);
  border-radius: var(--mnk-radius-sm);
  padding: 9px 12px;
  font-size: 13.8px;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  max-block-size: 120px;
  background: var(--paper-2, #FFFCF6);
  color: inherit;
  min-block-size: 40px;
}
.mnka-input:focus { outline: 2px solid var(--mnk-gold); outline-offset: 0; border-color: var(--mnk-gold); }
.mnka-emoji { color: var(--mnk-ink-soft); }
.mnka-emoji[hidden] { display: none !important; }
.mnka-send {
  inline-size: 42px; block-size: 42px;
  border-radius: 50%;
  border: none;
  background: var(--mnk-accent);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
  transition: transform .15s, background .15s;
}
.mnka-send.is-alt { background: var(--mnk-gold); }
.mnka-send:hover { transform: scale(1.06); }
.mnka-send:active { transform: scale(.95); }
.mnka-send:focus-visible { outline: 2px solid var(--mnk-gold); outline-offset: 2px; }
.mnka-send svg { inline-size: 20px; block-size: 20px; }
/* RTL: mira la flecha */
[dir="rtl"] .mnka-send svg { transform: scaleX(-1); }

.mnka-emoji-pop {
  position: absolute;
  inset-block-end: calc(100% - 6px);
  inset-inline-end: 54px;
  background: var(--mnk-card);
  border: 1px solid var(--mnk-line);
  border-radius: var(--mnk-radius-sm);
  box-shadow: var(--mnk-shadow);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  z-index: 5;
}
.mnka-emoji-pop[hidden] { display: none !important; }
.mnka-emoji-pop button {
  border: none; background: transparent; font-size: 19px; cursor: pointer;
  padding: 3px; border-radius: 7px; line-height: 1;
}
.mnka-emoji-pop button:hover { background: rgba(0,0,0,.06); }
.mnka-emoji-pop button:focus-visible { outline: 2px solid var(--mnk-gold); }

/* ---------- Screen-reader only ---------- */
.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Responsive ---------- */
/* الموبايل: fullscreen-ish sheet */
@media (max-width: 640px) {
  .mnka-panel {
    inset-block-end: 0;
    inset-inline: 0;
    inline-size: auto;
    block-size: min(88dvh, 100dvh);
    border-radius: var(--mnk-radius-lg) var(--mnk-radius-lg) 0 0;
    border-block-end: none;
  }
  .mnka-bubble {
    inset-block-end: calc(74px + var(--mnk-safe-b));  /* فوق الشريط السفلي */
    inset-inline-end: calc(16px + var(--mnk-safe-i));
    --mnk-bubble-size: 54px;
  }
  .mnka-jump { inset-block-end: 74px; }
}

/* ⛔ فوق شريط التبويب السفلي مباشرة (≤ 768) نرفع الفقاعة */
@media (max-width: 768px) and (min-width: 641px) {
  .mnka-bubble { inset-block-end: calc(86px + var(--mnk-safe-b)); }
}

/* سطح المكتب: نأمني عدم التغطية لزر عائم إن وُجد */
@media (min-width: 1024px) {
  .mnka-panel { inline-size: 408px; block-size: min(660px, calc(100dvh - 140px)); }
}

/* ⛔ منع تعارض مع شريط الكوكيز — إن وُجد نرفع اللوحة */
body.has-cookie-banner .mnka-panel { inset-block-end: calc(20px + var(--mnk-safe-b) + 56px); }
body.has-cookie-banner .mnka-bubble { inset-block-end: calc(20px + var(--mnk-safe-b) + 56px); }
@media (max-width: 640px) {
  body.has-cookie-banner .mnka-panel { inset-block-end: 56px; block-size: calc(88dvh - 56px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mnk-assistant, .mnka-panel, .mnka-bubble, .mnka-bubble::after,
  .mnka-badge, .mnka-dots i, .mnka-send { transition: none !important; animation: none !important; }
}

/* Dark-mode-ish: نلتزم بلوحة الموقع إن كانت داكنة */
body[data-theme="dark"] .mnka-panel { --mnk-card: #16233C; --mnk-ink: #E9EEF7; --mnk-ink-soft: #9AA3B5; --mnk-line: #25324F; }
body[data-theme="dark"] .mnka-bubble-msg { background: #1E2A4A; color: #E9EEF7; }
body[data-theme="dark"] .mnka-input { background: #1E2A4A; color: #E9EEF7; }