:root {
  --mcn-accent: #ff3b30;
  --mcn-panel-bg: #ffffff;
  --mcn-overlay-bg: rgba(0,0,0,.6);
  --mcn-offset-top: 20px;
  --mcn-panel-width: 420px;
  --mcn-z: 9999;
  
  /* -- [تعديل] -- إضافة متغيرات افتراضية (سيتم تجاوزها من PHP) */
  --mcn-color-info: #5bc0de;
  --mcn-color-success: #5cb85c;
  --mcn-color-warning: #f0ad4e;
  --mcn-color-danger: #d9534f;
}

/* قفل السكرول عند فتح البوب أب */
.mcn-lock { overflow: hidden !important; }

/* جذر الإضافة */
.mcn-nm-root {
  position: relative;
  z-index: var(--mcn-z);
}

/* زر الجرس */
.mcn-bell {
  position: fixed;
  top: var(--mcn-offset-top);
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  z-index: calc(var(--mcn-z) );
  background-color: transparent !important;
}
.mcn-bell:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.mcn-bell:focus { outline: 2px solid var(--mcn-accent); outline-offset: 2px; }
.mcn-bell .mcn-bell__icon svg { fill: var(--mcn-accent); }
.mcn-bell.mcn-side-right { right: 16px; left: auto; }

.mcn-bell__count {
  position: absolute;
  top: -6px; inset-inline-end: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--mcn-accent);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  border: 2px solid #fff;
  font-weight: 700;
}

/* أنيميشن رنين */
@keyframes mcn-ring {
  0% { transform: rotate(0); }
  10% { transform: rotate(20deg); }
  20% { transform: rotate(-18deg); }
  30% { transform: rotate(16deg); }
  40% { transform: rotate(-14deg); }
  50% { transform: rotate(12deg); }
  60% { transform: rotate(-10deg); }
  70% { transform: rotate(8deg); }
  80% { transform: rotate(-6deg); }
  90% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}
.mcn-anim-ring .mcn-bell__icon { display: inline-block; animation: mcn-ring 1.4s ease-in-out infinite; transform-origin: 50% 0; }
.mcn-anim-none .mcn-bell__icon { animation: none; }

/* الأوفرلاي */
.mcn-overlay {
  position: fixed;
  inset: 0;
  background: var(--mcn-overlay-bg);
  display: grid;
  place-items: stretch;
  z-index: var(--mcn-z);
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* لا تحجب نقرات الخلفية وهي مغلقة */
  transition: opacity .25s ease, visibility .25s ease;
  overscroll-behavior: contain;
  touch-action: none;
}
.mcn-overlay[aria-hidden="false"],
.mcn-overlay.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* اللوحة */
.mcn-panel {
  position: absolute;
  top: 0; bottom: 0; /* ارتفاع كامل */
  width: min(100%, var(--mcn-panel-width));
  background: var(--mcn-panel-bg);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transform: translateX(-102%);
  transition: transform .28s ease;
  display: grid;
  grid-template-rows: auto 1fr; /* هيدر ثابت + جسم قابل للتمدد */
  height: 100vh; /* للتأكد على الديسكتوب */
}
.mcn-panel.mcn-side-right { right: 0; left: auto; transform: translateX(102%); }
.mcn-overlay.is-open .mcn-panel.mcn-side-left { transform: translateX(0); }
.mcn-overlay.is-open .mcn-panel.mcn-side-right { transform: translateX(0); }

/* الهيدر (عنوان واضح وثابت بالأعلى) */
.mcn-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: sticky; top: 0; z-index: 2;
  background: var(--mcn-panel-bg);
}
.mcn-panel__header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #111; }
.mcn-close { background: transparent; border: 0; font-size: 26px; line-height: 1; cursor: pointer; }

/* جسم اللوحة: هنا يصير السحب */
.mcn-panel__body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 16px;
  min-height: 0;   /* مهم جدًا مع CSS Grid ليشتغل السحب على الديسكتوب */
}

/* قائمة الإشعارات */
.mcn-list { display: grid; gap: 10px; }
.mcn-item {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  /* -- [تعديل] -- إضافة شريط جانبي ملون احترافي */
  border-left-width: 5px;
  /* -- [تعديل] -- استخدام المتغير (الذي يأتي من PHP) كلون افتراضي */
  border-left-color: var(--mcn-color-info); 
}
.mcn-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
  color: #111;            /* تأكيد ظهور العنوان على الديسكتوب */
}
.mcn-item summary::-webkit-details-marker { display: none; }
.mcn-item__title { color: #111; } /* عنوان العنصر */
.mcn-item__arrow { transform: rotate(0deg); transition: transform .2s ease; opacity: .6; }
.mcn-item[open] .mcn-item__arrow { transform: rotate(90deg); opacity: 1; }

.mcn-item__body { padding: 0 14px 14px; display: grid; gap: 10px; }
.mcn-item__image { max-height: 40vh; overflow: hidden; }
.mcn-item__image img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: contain; max-height: 40vh; }
.mcn-item__text { color: #333; line-height: 1.6; }

/* زر الرابط */
.mcn-item__link a {
  display: inline-block;
  padding: 8px 12px;
  background: var(--mcn-accent);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

/* -- [تعديل] -- استبدال الألوان الثابتة بالمتغيرات */
.mcn-item.mcn-item--info {
  border-left-color: var(--mcn-color-info);
}
.mcn-item.mcn-item--success {
  border-left-color: var(--mcn-color-success);
}
.mcn-item.mcn-item--warning {
  border-left-color: var(--mcn-color-warning);
}
.mcn-item.mcn-item--danger {
  border-left-color: var(--mcn-color-danger);
}
/* -- [نهاية التعديل] -- */


/* موبايل فول-سكرين */
@media (max-width: 768px) {
  .mcn-panel { 
    width: 100%; 
    /* -- [تعديل] -- ضمان ارتفاع كامل الشاشة للسكرول الداخلي */
    height: 100vh; /* Fallback */
    height: 100dvh; /* ارتفاع الشاشة الديناميكي (الأفضل للموبايل) */
    max-height: 100vh; /* Fallback */
    max-height: 100dvh;
    border-radius: 0;
    /* -- [نهاية التعديل] -- */
  }
}

/* حالة عدم وجود عناصر */
.mcn-empty { opacity: .65; text-align: center; padding: 24px 8px; }