/* مرام AI — ويدجت محادثة | ألوان مرام هوست: رمادي #595959 · عنّابي #A8161A */
.mh-ai, .mh-ai * { box-sizing: border-box; }
.mh-ai {
  --g:   #595959;
  --red: #A8161A;
  --red-d: #8d1216;
  --ink: #23262b;
  --mut: #7b8189;
  --line:#e6e8eb;
  --bg:  #ffffff;
  --wall:#f3f4f6;
  --bot: #ffffff;
  --me:  #fdeced;
  --rad: 16px;
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  direction: rtl;
}

/* ── الزرّ العائم ── */
/* دائرة 58×58 مطابقة تماماً لزرّ واتساب في القالب، مركّبة فوقه مباشرة.
   نستعمل right/bottom الفيزيائيّين (لا inset-inline) لنطابق .whatsapp-float بالضبط. */
.mh-ai-fab{
  position:fixed; right:22px; bottom:92px; z-index:999999;
  width:58px; height:58px; padding:0; border:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--red); color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .18s ease, background .18s ease;
}
.mh-ai-fab:hover{ background:var(--red-d); transform:scale(1.1); }
.mh-ai-fab svg{ width:28px; height:28px; flex:none; }
.mh-ai-fab span{ display:none; }   /* أيقونة فقط — الاسم في aria-label */
.mh-ai-fab.is-hidden{ opacity:0; pointer-events:none; transform:scale(.9); }

/* ── اللوحة ── */
.mh-ai-panel{
  position:fixed; right:22px; bottom:22px; z-index:2147483001;
  width:380px; max-width:calc(100vw - 32px);
  height:600px; max-height:calc(100vh - 44px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--rad);
  box-shadow:0 18px 50px rgba(16,18,22,.20);
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.mh-ai-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }

/* الترويسة */
.mh-ai-head{
  display:flex; align-items:center; gap:11px; padding:13px 15px;
  background:var(--g); color:#fff; flex:none;
}
.mh-ai-ava{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--red); display:grid; place-items:center;
  font:700 15px/1 "IBM Plex Sans Arabic", sans-serif; color:#fff;
}
.mh-ai-t{ flex:1; min-width:0; }
.mh-ai-t b{ display:block; font-size:14.5px; font-weight:600; }
.mh-ai-t span{ display:flex; align-items:center; gap:5px; font-size:11.5px; opacity:.82; margin-top:2px; }
.mh-ai-dot{ width:6px; height:6px; border-radius:50%; background:#4ade80; flex:none; }
.mh-ai-x{
  width:30px; height:30px; border:0; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:17px; line-height:1;
  display:grid; place-items:center; transition:background .15s;
}
.mh-ai-x:hover{ background:rgba(255,255,255,.24); }

/* مجرى الرسائل */
.mh-ai-log{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 14px; background:var(--wall);
  display:flex; flex-direction:column; gap:9px;
  scrollbar-width:thin; scrollbar-color:#cfd3d8 transparent;
}
.mh-ai-log::-webkit-scrollbar{ width:7px; }
.mh-ai-log::-webkit-scrollbar-thumb{ background:#cfd3d8; border-radius:99px; }

/* المجرى عمود مرن بارتفاع ثابت: بلا flex:none ينكمش الأبناء عند الفيض */
.mh-ai-log > *{ flex:none; }

.mh-ai-row{ display:flex; }
.mh-ai-row.me{ justify-content:flex-start; }
.mh-ai-row.bot{ justify-content:flex-end; }

.mh-ai-b{
  max-width:87%; padding:10px 13px; border-radius:14px;
  font-size:13.7px; line-height:1.75; color:var(--ink);
  white-space:pre-wrap; word-break:break-word; unicode-bidi:plaintext;
  box-shadow:0 1px 2px rgba(16,18,22,.06);
}
.mh-ai-row.bot .mh-ai-b{ background:var(--bot); border-start-end-radius:5px; }
.mh-ai-row.me  .mh-ai-b{ background:var(--me);  border-start-start-radius:5px; }
.mh-ai-b b{ font-weight:600; }
.mh-ai-b.err{ background:#fff4f4; color:var(--red-d); border:1px solid #f6d6d7; }

/* مؤشّر الكتابة */
.mh-ai-typing{ display:flex; gap:4px; padding:13px 15px; }
.mh-ai-typing i{
  width:7px; height:7px; border-radius:50%; background:#b9bec5;
  animation:mh-bounce 1.3s infinite ease-in-out;
}
.mh-ai-typing i:nth-child(2){ animation-delay:.16s; }
.mh-ai-typing i:nth-child(3){ animation-delay:.32s; }
@keyframes mh-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.45 } 30%{ transform:translateY(-5px); opacity:1 } }

/* بطاقة خطّة — تُبنى من الكتالوغ لا من النموذج */
.mh-ai-card{
  align-self:flex-end; width:87%;
  background:var(--bot); border:1px solid var(--line); border-radius:14px;
  border-start-end-radius:5px; overflow:hidden;
  box-shadow:0 1px 2px rgba(16,18,22,.06);
}
.mh-ai-card-h{ padding:11px 13px 9px; border-bottom:1px solid var(--line); }
.mh-ai-cat{ font-size:10.5px; color:var(--mut); display:block; margin-bottom:3px; }
.mh-ai-name{ font-size:14px; font-weight:600; color:var(--ink); display:block; unicode-bidi:plaintext; }
.mh-ai-price{ display:flex; align-items:baseline; gap:7px; margin-top:7px; flex-wrap:wrap; }
.mh-ai-price em{ font-style:normal; font-size:17px; font-weight:700; color:var(--red); }
.mh-ai-price s{ font-size:11.5px; color:var(--mut); }
.mh-ai-price i{ font-style:normal; font-size:11px; color:var(--mut); }
.mh-ai-specs{ list-style:none; margin:0; padding:9px 13px; display:grid; gap:5px; }
.mh-ai-specs li{ font-size:12px; color:#4d525a; display:flex; gap:6px; align-items:flex-start; line-height:1.6;
  unicode-bidi:plaintext; }  /* كل سطر يأخذ اتجاه أوّل حرف قويّ فيه */
.mh-ai-specs li::before{ content:"—"; color:var(--red); flex:none; }
/* سطر عتاد السيرفر تحت المواصفات */
.mh-ai-hw{
  margin:0 13px 9px; padding-top:8px; border-top:1px dashed var(--line);
  font-size:10.5px; color:var(--mut); line-height:1.6;
  unicode-bidi:plaintext; direction:ltr; text-align:right;
}
.mh-ai-go{
  display:block; margin:2px 11px 11px; padding:9px; text-align:center;
  background:var(--red); color:#fff; text-decoration:none; border-radius:9px;
  font-size:12.5px; font-weight:600; transition:background .15s;
}
.mh-ai-go:hover{ background:var(--red-d); }

/* زر واتساب */
.mh-ai-wa{
  align-self:flex-end; display:flex; align-items:center; gap:8px;
  padding:10px 15px; background:#25D366; color:#fff; text-decoration:none;
  border-radius:12px; font-size:13px; font-weight:600;
  box-shadow:0 2px 8px rgba(37,211,102,.28);
}
.mh-ai-wa svg{ width:17px; height:17px; }

/* اقتراحات البداية */
.mh-ai-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 1px 4px; }
.mh-ai-chip{
  border:1px solid var(--line); background:#fff; color:#4d525a;
  padding:7px 12px; border-radius:999px; font:inherit; font-size:12px;
  cursor:pointer; transition:all .15s;
}
.mh-ai-chip:hover{ border-color:var(--red); color:var(--red); background:#fdf5f5; }

/* التحرير */
.mh-ai-foot{ flex:none; border-top:1px solid var(--line); background:var(--bg); padding:10px 12px 8px; }
.mh-ai-form{ display:flex; align-items:flex-end; gap:8px; }
.mh-ai-in{
  flex:1; resize:none; border:1px solid var(--line); border-radius:11px;
  padding:10px 12px; font:inherit; font-size:13.5px; color:var(--ink);
  max-height:104px; line-height:1.6; outline:0; transition:border-color .15s;
}
.mh-ai-in:focus{ border-color:var(--red); }
.mh-ai-send{
  width:40px; height:40px; flex:none; border:0; border-radius:11px; cursor:pointer;
  background:var(--red); color:#fff; display:grid; place-items:center; transition:background .15s;
}
.mh-ai-send:hover:not(:disabled){ background:var(--red-d); }
.mh-ai-send:disabled{ background:#c9ced4; cursor:default; }
.mh-ai-send svg{ width:17px; height:17px; }
.mh-ai-note{ text-align:center; font-size:10.5px; color:var(--mut); margin-top:7px; }
.mh-ai-note a{ color:var(--g); text-decoration:none; border-bottom:1px dotted #b9bec5; }
.mh-ai-note a:hover{ color:var(--red); border-color:var(--red); }

@media (max-width:480px){
  .mh-ai-panel{ inset:0; width:100%; height:100%; max-height:100%; border-radius:0; border:0; }
  .mh-ai-fab{ right:16px; bottom:86px; }
}
@media (prefers-reduced-motion:reduce){ .mh-ai *{ animation:none !important; transition:none !important; } }