/**
 * محمد الرقميّ — الإسقاطُ الهولوجراميّ.
 *
 * ══════════════════════════════════════════════════════════════════════
 * كيف تُصنَع «الدُّمية»
 * ══════════════════════════════════════════════════════════════════════
 * صورتان لا نموذجٌ ثلاثيُّ الأبعاد: `holo-body` جسمُه كاملًا، و`holo-head`
 * رأسُه مقصوصًا. تُركَّب الثانيةُ فوق الأولى بنسبٍ مئويّةٍ محسوبةٍ من
 * الأصل (يسار ٣٢٫١٤٪ · عرض ٥١٫٤٣٪ · ارتفاع ٤٠٫١٨٪) فتنطبق على مكانها.
 *
 * ثمّ نسخةٌ ثالثةٌ من الرأس **مقصوصةٌ عند الفكّ** (`inset(66% 26% 4% 26%)`)
 * تُخفى في السكون وتنزل بكسلين ونصفًا عند الكلام — فيبدو أنّه يتكلّم.
 * والرأسُ كلُّه يميل قليلًا، والصدرُ يُخرج حلقتَي صوت.
 *
 * واللونُ الهولوجراميُّ من مرشِّحٍ واحد: `sepia(1)` يوحّد الألوانَ ثمّ
 * `hue-rotate` يزيحها إلى الأزرق ثمّ `saturate` يشبعها — وهو أرخصُ من
 * صورةٍ ثانيةٍ ملوَّنةٍ سلفًا، ويتبدّل مع المزاج بمتغيّرٍ واحد.
 */

/**
 * نصٌّ لقارئ الشاشة وحدَه.
 *
 * صنفٌ خاصٌّ بالمساعد لأنّ `rw-sr` في الثيم **محجوزٌ لنتيجة بحث** — لا
 * لإخفاءٍ بصريّ. واستعمالُه هنا كان يُلبس الزرَّ حشوةً وتظليلَ تمرير.
 */
/* `.mg-sr` انتقلت إلى `tokens.css` — أداةٌ عامّةٌ لا تسكن ورقةً مشروطة. */

/* ══════════════════ ١) الحاوية والمزاج ══════════════════ */
.mg-dm {
  position:fixed; z-index:520; bottom:20px; inset-inline-end:20px;
  font-family:var(--mg-body);
  --mg-holo:168,85,247;                       /* بنفسجيّ — الافتراض */
}
.mg-dm[data-emo="excited"] { --mg-holo:255,77,28; }
.mg-dm[data-emo="think"]   { --mg-holo:96,140,255; }
.mg-dm[data-emo="wave"]    { --mg-holo:190,120,255; }
.mg-dm[hidden] { display:none; }

/* ══════════════════ ٢) الزرّ العائم ══════════════════ */
.mg-dm-launch {
  position:relative; display:block; width:64px; height:64px; padding:2.5px;
  border:0; border-radius:50%; cursor:pointer; background:var(--mg-grad);
  box-shadow:0 16px 40px -10px rgba(255,77,28,.6); transition:transform .25s;
}
.mg-dm-launch:hover { transform:scale(1.07); }
.mg-dm-launch:focus-visible { outline:3px solid var(--mg-acc); outline-offset:4px; }
.mg-dm-launch::after {
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid var(--mg-acc); opacity:.5; animation:mg-dm-pulse 2.2s ease-out infinite;
}
@keyframes mg-dm-pulse { 0% { transform:scale(.85); opacity:.6; } 100% { transform:scale(1.35); opacity:0; } }

.mg-dm-mini {
  position:relative; display:block; width:100%; height:100%;
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 62%,rgba(var(--mg-holo),.28),#0B0E1A 72%);
}
.mg-dm-mini .mg-holo-img { transform:translateY(6%) scale(1.12); }

.mg-dm-hint {
  position:absolute; bottom:74px; inset-inline-end:0;
  background:var(--mg-panel); border:1px solid var(--mg-line); color:var(--mg-ink);
  font-size:12.5px; padding:9px 14px; border-radius:12px; white-space:nowrap;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.5); animation:mg-dm-bob 2.6s ease-in-out infinite;
}
@keyframes mg-dm-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.mg-dm.is-open .mg-dm-hint { display:none; }

/* ══════════════════ ٣) اللوحة ══════════════════ */
.mg-dm-panel {
  position:absolute; bottom:78px; inset-inline-end:0;
  width:min(360px,calc(100vw - 40px));
  background:var(--mg-panel); border:1px solid var(--mg-line);
  border-radius:20px; overflow:hidden;
  box-shadow:0 34px 80px -20px rgba(0,0,0,.65);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .35s,transform .35s;
}
.mg-dm.is-open .mg-dm-panel { opacity:1; transform:none; pointer-events:auto; }

/* ══════════════════ ٤) الإسقاط ══════════════════ */
.mg-holo-img {
  width:100%; height:100%; object-fit:contain; object-position:bottom; opacity:.94;
  filter:saturate(.12) brightness(1.28) contrast(1.06) sepia(1) hue-rotate(212deg) saturate(3.4)
         drop-shadow(0 0 14px rgba(var(--mg-holo),.75))
         drop-shadow(0 0 34px rgba(var(--mg-holo),.35));
}

.mg-dm-holo {
  position:relative; height:182px; overflow:hidden;
  background:
    radial-gradient(140px 60px at 50% 108%,rgba(255,77,28,.28),transparent 70%),
    radial-gradient(240px 130px at 50% 0%,rgba(var(--mg-holo),.14),transparent 70%),
    linear-gradient(180deg,#0B0E1A,#0D1020);
}

.mg-holo-beam {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  width:150px; height:118px; filter:blur(1.5px);
  background:linear-gradient(180deg,rgba(var(--mg-holo),0),rgba(var(--mg-holo),.13) 55%,rgba(255,120,60,.4));
  clip-path:polygon(41% 0,59% 0,96% 100%,4% 100%);
  animation:mg-beam 4s ease-in-out infinite;
}
@keyframes mg-beam { 0%,100% { opacity:.85; } 47% { opacity:1; } 52% { opacity:.6; } 56% { opacity:.95; } }

.mg-holo-base {
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:120px; height:14px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,120,60,.9),rgba(255,77,28,.35) 55%,transparent);
  box-shadow:0 0 22px 6px rgba(255,77,28,.35);
}
.mg-holo-base::after {
  content:""; position:absolute; inset:3px 22px; border-radius:50%;
  border:1px solid rgba(255,190,150,.55);
}

.mg-holo-fig {
  position:absolute; bottom:12px; left:50%; height:152px;
  aspect-ratio:776/1034; transform:translateX(-50%);
  animation:mg-float 4.4s ease-in-out infinite, mg-glitch 7s infinite;
}
@keyframes mg-float {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(-4px); }
}
@keyframes mg-glitch {
  0%,90.5%,94.5%,100% { clip-path:none; }
  91%   { clip-path:inset(12% 0 64% 0); transform:translateX(-50.6%) translateY(-2px); }
  92.2% { clip-path:inset(58% 0 8% 0);  transform:translateX(-49.4%); }
  93.4% { clip-path:inset(30% 0 30% 0); transform:translateX(-50%); }
}

/* ---- الجسمُ يتنفّس ---- */
.mg-hp-body {
  position:absolute; inset:0; object-position:bottom; transform-origin:50% 100%;
  animation:mg-breath 4.4s ease-in-out infinite;
}
@keyframes mg-breath { 0%,100% { transform:scale(1); } 50% { transform:scale(1.012); } }

/* ---- الرأسُ: نسبٌ محسوبةٌ من الأصل، فينطبق على مكانه ---- */
.mg-hp-headwrap {
  position:absolute; left:32.14%; top:0; width:51.43%; height:40.18%;
  transform-origin:50% 96%; animation:mg-head-idle 5.6s ease-in-out infinite;
}
@keyframes mg-head-idle {
  0%,100% { transform:rotate(0); } 32% { transform:rotate(-1.7deg); } 68% { transform:rotate(1.4deg); }
}
.mg-dm.is-talking .mg-hp-headwrap { animation:mg-head-talk 1.15s ease-in-out infinite; }
@keyframes mg-head-talk {
  0%,100% { transform:rotate(-2.4deg) translateY(0); }
  28%     { transform:rotate(2.6deg) translateY(-2px); }
  62%     { transform:rotate(-1deg) translateY(1px); }
}
.mg-hp-head, .mg-hp-jaw { position:absolute; inset:0; object-position:top; }

/* ---- الفكّ: نسخةُ الرأسِ مقصوصةً عند الفم، تنزل عند الكلام ---- */
.mg-hp-jaw { clip-path:inset(66% 26% 4% 26%); opacity:0; }
.mg-dm.is-talking .mg-hp-jaw { opacity:1; animation:mg-jaw .27s ease-in-out infinite alternate; }
@keyframes mg-jaw { from { transform:translateY(0); } to { transform:translateY(2.8px); } }

/* ---- حلقتا صوتٍ عند الصدر ---- */
.mg-hp-ring {
  position:absolute; left:50%; bottom:34%; width:26px; height:26px; border-radius:50%;
  border:1.5px solid rgba(var(--mg-holo),.85); transform:translateX(-50%) scale(.4); opacity:0;
}
.mg-dm.is-talking .mg-hp-ring    { animation:mg-ring 1.5s ease-out infinite; }
.mg-dm.is-talking .mg-hp-ring.r2 { animation-delay:.75s; }
@keyframes mg-ring {
  0%   { transform:translateX(-50%) scale(.35); opacity:.9; }
  100% { transform:translateX(-50%) scale(2.6); opacity:0; }
}

/* ---- شبحان ملوَّنان يومضان مع التشويش ---- */
.mg-ghost { position:absolute; inset:0; object-position:bottom; opacity:0; animation:mg-ghost 7s infinite; }
.mg-ghost.r { filter:saturate(.12) brightness(1.3) sepia(1) hue-rotate(160deg) saturate(4); }
.mg-ghost.b { filter:saturate(.12) brightness(1.3) sepia(1) hue-rotate(260deg) saturate(4); animation-delay:.04s; }
@keyframes mg-ghost {
  0%,90.5%,94.5%,100% { opacity:0; transform:none; }
  91.5% { opacity:.55; transform:translateX(3px); }
  93%   { opacity:.5;  transform:translateX(-3px); }
}

/* ---- خطوطُ المسح والجسيمات ---- */
.mg-holo-lines {
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,rgba(var(--mg-holo),.17) 0 1px,transparent 1px 3px);
}
.mg-holo-scan {
  position:absolute; inset-inline:0; top:-30%; height:26%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--mg-holo),.3),transparent);
  animation:mg-scan 3.4s linear infinite;
}
.mg-dm.is-talking .mg-holo-scan { animation-duration:1.2s; }
@keyframes mg-scan { to { top:110%; } }

.mg-dm.is-talking .mg-holo-fig {
  animation:mg-float 4.2s ease-in-out infinite, mg-glitch 7s infinite, mg-talk-pulse .5s ease-in-out infinite;
}
@keyframes mg-talk-pulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.18); } }

.mg-holo-p {
  position:absolute; bottom:14px; width:3px; height:3px; border-radius:50%;
  background:rgba(var(--mg-holo),.9); opacity:0; animation:mg-rise 3.6s linear infinite;
}
.mg-holo-p.p1 { left:32%; }
.mg-holo-p.p2 { left:50%; animation-delay:1.2s; }
.mg-holo-p.p3 { left:66%; animation-delay:2.3s; }
@keyframes mg-rise {
  0%   { transform:translateY(0);      opacity:0; }
  12%  { opacity:.9; }
  85%  { opacity:.4; }
  100% { transform:translateY(-110px); opacity:0; }
}

.mg-dm-emo {
  position:absolute; top:10px; inset-inline-end:12px; font-size:19px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); animation:mg-emo .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mg-emo { from { transform:scale(0); } to { transform:scale(1); } }

/* ══════════════════ ٥) الترويسة والجسم ══════════════════ */
.mg-dm-meta {
  display:flex; align-items:center; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--mg-line);
  background:linear-gradient(120deg,rgba(255,77,28,.12),rgba(124,58,237,.12));
}
.mg-dm-who { flex:1; min-width:0; }
.mg-dm-who .n { font-weight:700; font-size:13.5px; color:var(--mg-ink); }
.mg-dm-who .s { font-size:11px; color:var(--mg-muted); display:flex; align-items:center; gap:6px; }

.mg-dm-eq { display:inline-flex; gap:2.5px; align-items:flex-end; height:12px; }
.mg-dm-eq i { width:3px; height:4px; border-radius:99px; background:var(--mg-acc); }
.mg-dm.is-talking .mg-dm-eq i              { animation:mg-eq-bar .7s ease-in-out infinite; }
.mg-dm.is-talking .mg-dm-eq i:nth-child(2) { animation-delay:.15s; }
.mg-dm.is-talking .mg-dm-eq i:nth-child(3) { animation-delay:.3s; }
@keyframes mg-eq-bar { 0%,100% { height:4px; } 50% { height:12px; } }

.mg-dm-x {
  width:30px; height:30px; flex:none; cursor:pointer;
  border:1px solid var(--mg-line); border-radius:50%; background:none;
  color:var(--mg-muted); display:flex; align-items:center; justify-content:center; font-size:13px;
}
.mg-dm-x:hover { color:var(--mg-ink); border-color:var(--mg-acc); }

.mg-dm-body { padding:16px; max-height:46vh; overflow-y:auto; }
.mg-dm-bubble {
  margin:0; background:var(--mg-bg); border:1px solid var(--mg-line);
  border-radius:14px; border-start-start-radius:4px; padding:13px 15px;
  font-size:14px; line-height:1.75; color:var(--mg-ink); min-height:52px;
}
.mg-dm-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.mg-dm-btn {
  border:1px solid var(--mg-line); border-radius:999px; padding:8px 15px;
  font:inherit; font-size:12.5px; color:var(--mg-ink); cursor:pointer;
  background:var(--mg-bg); transition:border-color .2s,color .2s;
}
.mg-dm-btn:hover { border-color:var(--mg-acc); color:var(--mg-acc); }
.mg-dm-btn.is-accent { background:var(--mg-grad); border:0; color:var(--mg-on-acc); font-weight:700; }

.mg-dm-foot {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 16px; border-top:1px solid var(--mg-line);
}
.mg-dm-voice {
  display:flex; align-items:center; gap:6px; cursor:pointer; font:inherit; font-size:11.5px;
  border:1px solid var(--mg-line); border-radius:999px; padding:6px 12px;
  color:var(--mg-ink); background:var(--mg-bg);
}
.mg-dm-voice.is-on { border-color:var(--mg-acc); color:var(--mg-acc); }
.mg-dm-voice-pick {
  max-width:140px; font:inherit; font-size:10.5px; padding:5px 8px;
  background:var(--mg-bg); color:var(--mg-ink);
  border:1px solid var(--mg-line); border-radius:999px;
}
.mg-dm-voice-pick:empty { display:none; }

/**
 * تعليمُ القسم المزار أثناء الجولة.
 *
 * إطارٌ لا تعتيمُ ما حوله: التعتيمُ يمنع القراءةَ والتمرير، والجولةُ
 * غايتُها أن **يُقرَأ** القسم لا أن يُشار إليه.
 */
.mg-dm-focus { outline:2px solid var(--mg-acc); outline-offset:8px; border-radius:8px; }

/**
 * فوق شريطِ التنقّل السفليّ، لا عليه.
 *
 * الشريطُ يظهر تحت ٧٨٠ بكسل ويحجز ٧٠ بكسلًا من أسفل الجسم
 * (`body{padding-bottom:70px}` في `style.css`). فبقاءُ الزرِّ عند
 * `bottom:20px` يضعه **فوق وجهتين** من الشريط فيحجبهما — ومَن أراد
 * «تواصل» ضغط المساعد.
 *
 * ولا نحسب ٧٠ يدويًّا هنا: نضيف إليها المنطقةَ الآمنة في هواتف الحوافّ.
 */
@media (max-width:780px) {
  .mg-dm {
    bottom:calc(70px + 14px + env(safe-area-inset-bottom));
    inset-inline-end:14px;
  }
  .mg-dm-panel { bottom:74px; }
  .mg-dm-body { max-height:38vh; }
  .mg-dm-hint { display:none; }   /* لا مساحةَ لفقاعةٍ فوق شريطٍ محجوز */
}

/**
 * السكون: تبقى الدُّميةُ ظاهرةً وتتوقّف كلُّ حركة.
 *
 * ولا نخفيها — فالمساعدُ ما زال يعمل، والحركةُ وحدَها هي ما لم يُطلَب.
 */
@media (prefers-reduced-motion:reduce) {
  .mg-dm *, .mg-dm *::before, .mg-dm *::after { animation:none !important; }
  .mg-dm-panel { transition:none; }
}