/* ============ إشعار المكالمة الخاصة (وارد/صادر) - كارت عائم فوق الشاشة
   كلها من برا أي نافذة أو تبويب، مش جوه شات الخاص. المنطق في x2.js (case
   "calling") بقى بيضيفه على document.body بدل ما يحصره جوه #d2+id (شات
   الطرف التاني)، فالتنسيق هنا بيفترض دايمًا إنه فوق كل حاجة، مستقل تمامًا
   عن أي نافذة تانية مفتوحة أو مقفولة. ============ */

.callnot{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  position:fixed!important;
  top:14px!important;
  right:auto!important;
  left:50%!important;
  margin:0!important;
  transform:translate(-50%,-16px);
  opacity:0;
  width:290px!important;
  max-width:calc(100vw - 24px);
  padding:16px 16px 14px!important;
  background:#fff!important;
  border:none!important;
  border-radius:20px!important;
  box-shadow:0 16px 36px rgba(20,30,50,.24),0 3px 10px rgba(20,30,50,.10)!important;
  z-index:99999!important;
  direction:rtl;
  text-align:center;
  animation:callnotIn .4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes callnotIn{to{transform:translate(-50%,0);opacity:1;}}

/* -------- صف العضو (الصورة + الاسم) - بنلغي تخطيط قايمة uhtml الأفقي
   العادي (المستخدم في قايمة المتصلين/الخاص) ونرتبه عمودي في النص، الصورة
   كبيرة وواضحة فوق والاسم تحتها -------- */
.callnot .uzer{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  margin-bottom:6px;width:100%;
}
.callnot .uzer .uzr.uhtml{
  float:none!important;width:auto!important;max-width:100%;margin:0!important;
  border:none!important;background:transparent!important;box-shadow:none!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
}
.callnot .uzer .di1{
  float:none!important;display:flex!important;justify-content:center!important;
  position:relative;padding:0!important;
}
.callnot .uzer .u-pic{
  width:66px!important;height:66px!important;min-width:66px!important;min-height:66px!important;
  max-height:66px!important;border-radius:50%!important;
  border:3px solid #fff!important;
  box-shadow:0 0 0 3px var(--theme-btcolor),0 6px 16px rgba(20,30,50,.18)!important;
  animation:callnotPulse 1.7s ease-out infinite;
}
/* [UPDATED - THEME LINK] حلقة النبض كانت بلون واحد بس (--theme-btcolor)
   لكل الأنيميشن. بنضيف حلقة تانية خارجية بلون المحتوى (--theme-hicolor)
   بتتوسع مع النبض، فبيبقى شكل النبضة نفسها مبنية من لوني الأزرار والمحتوى
   مع بعض بدل ما تفضل بلون واحد جامد - أوضح إنها "هوية الموقع" مش لون عشوائي. */
@keyframes callnotPulse{
  0%{box-shadow:0 0 0 3px var(--theme-btcolor),0 0 0 0 var(--theme-hicolor),0 6px 16px rgba(20,30,50,.18);}
  100%{box-shadow:0 0 0 3px var(--theme-btcolor),0 0 0 14px rgba(0,0,0,0),0 6px 16px rgba(20,30,50,.18);}
}
.callnot.ringing .uzer .u-pic{animation:none;box-shadow:0 0 0 3px var(--theme-btcolor),0 6px 16px rgba(20,30,50,.18)!important;}
.callnot .uzer .di2{float:none!important;padding:0!important;margin-top:8px;width:100%;}
.callnot .uzer .d-flex.dots{justify-content:center!important;}
.callnot .uzer .u-topic{
  font-size:15px!important;font-weight:800!important;color:#242c3a!important;
  background:transparent!important;padding:0!important;
}
.callnot .uzer .di3{display:none!important;} /* الهاشتاج مش لازم في إشعار مكالمة */

/* -------- سطر الحالة (".. / جاري الاتصال.. / مكالمة واردة.. / متصل .!") -------- */
.callnot .callstat{
  position:static!important;display:block!important;
  background:transparent!important;color:#8a92a1!important;
  font-size:12px!important;font-weight:700!important;
  padding:0!important;margin:0 0 12px!important;border-radius:0!important;
}
.callnot .callstat:empty{display:none!important;}
.callnot video{display:none!important;} /* فيديو المكالمة الصوتية مش مطلوب هنا أصلًا */

/* -------- أزرار قبول/رفض - دائرتين واضحتين، أخضر/أحمر -------- */
.callnot-actions{
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:16px;width:100%;
}
.callnot .callaccept,
.callnot .calldeny{
  width:52px!important;height:52px!important;
  border-radius:50%!important;border:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:19px!important;text-indent:-9999px!important;overflow:hidden!important;
  margin:0!important;padding:0!important;
  box-shadow:0 6px 14px rgba(20,30,50,.18)!important;
  transition:transform .15s ease,box-shadow .15s ease!important;
}
.callnot .callaccept:before,.callnot .calldeny:before{text-indent:0!important;}
.callnot .callaccept{background:#2ecc71!important;color:#fff!important;}
.callnot .calldeny{background:#e74c3c!important;color:#fff!important;transform:rotate(135deg);}
.callnot .callaccept:hover{transform:translateY(-2px)!important;}
.callnot .calldeny:hover{transform:rotate(135deg) translateY(-2px)!important;}
.callnot .callaccept:active{transform:scale(.92)!important;}
.callnot .calldeny:active{transform:rotate(135deg) scale(.92)!important;}

/* -------- أزرار الكتم/الصوت - تظهر بعد ما المكالمة تتوصل بس (مش وقت
   الرنين، لإنها مالهاش معنى قبل قبول المكالمة) -------- */
.callnot-mediabtns{
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:8px;width:100%;margin-top:10px;
}
.callnot.ringing .callnot-mediabtns{display:none!important;}
.callnot .meutee,.callnot .vulomeup{
  width:36px!important;height:36px!important;border-radius:50%!important;border:none!important;
  background:rgba(20,30,50,.06)!important;color:#4a5568!important;
  margin:0!important;padding:0!important;font-size:13px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  transition:background .15s ease!important;
}
.callnot .meutee:hover,.callnot .vulomeup:hover{background:rgba(20,30,50,.12)!important;color:#4a5568!important;}
/* [ADDED - THEME LINK] فوق اللون الرمادي العام (fallback)، بنحط تلميحة
   خفيفة من لون الأزرار على الخلفية + النص وقت الـhover لو المتصفح بيدعم
   color-mix (لو مش بيدعمها، السطر بيتجاهل والقيمة اللي فوق فاضلة شغالة). */
.callnot .meutee:hover,.callnot .vulomeup:hover{
  background:color-mix(in srgb,var(--theme-btcolor) 16%,rgba(20,30,50,.08))!important;
  color:var(--theme-btcolor)!important;
}

@media (max-width:420px){
  .callnot{width:calc(100vw - 24px)!important;}
}