/*
  notif-toast.css — [ADDED - NOTIF TOAST]
  الإشعارات المنبثقة بتصميم الموقع (نفس ألوان/تدوير/ظلال شاشة الغرف: #6d6dfb / #212a45 / #e9edf7، خط الموقع، RTL).
  بتظهر من فوق (حاوية ثابتة #rk-toasts) وبتختفي بعد 7 ثواني مع شريط تقدّم رفيع.
  + لمسة تصميم خفيفة لرسايل حالة الاتصال (.message-box) من غير ما نغيّر توقيتها.
*/
#rk-toasts {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 0; right: 0;
  z-index: 2000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  pointer-events: none;
  direction: rtl;
}

.rk-toast {
  --c: #6d6dfb;
  --c-bg: #f0f0ff;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px 13px;
  background: #fff;
  border: 1px solid #e9edf7;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(33, 42, 69, .18);
  color: #212a45;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  direction: rtl;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  animation: rk-in .22s ease-out both;
}
/* شريط اللون على الحافة (يمين في الـRTL) */
.rk-toast::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--c);
}
.rk-toast.rk-bad     { --c: #dc2626; --c-bg: #fef2f2; }

/* أيقونة النوع */
.rk-toast .rk-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c);
  font-size: 15px;
}
/* صورة العضو + بادج النوع */
.rk-toast .rk-av {
  position: relative;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-bg);
}
.rk-toast .rk-av img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.rk-toast .rk-badge {
  position: absolute;
  bottom: -3px; inset-inline-end: -3px;
  width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 9px;
  box-shadow: 0 0 0 2px #fff;
}

.rk-toast .rk-body { flex: 1 1 auto; min-width: 0; }
.rk-toast .rk-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rk-toast .rk-title { font-size: 13px; font-weight: 700; color: var(--c); }
.rk-toast .rk-name {
  max-width: 62%;
  font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-toast .rk-id { font-size: 11px; color: #79809a; }
.rk-toast .rk-msg {
  margin-top: 2px;
  max-height: 120px;
  overflow: auto;
  color: #2d3553;
  word-break: break-word;
  white-space: pre-line;
}
.rk-toast .rk-msg img { max-height: 22px; vertical-align: middle; }

.rk-toast .rk-x {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: #79809a;
  font-size: 12px; line-height: 24px; text-align: center;
  cursor: pointer;
}
.rk-toast .rk-x:hover,
.rk-toast .rk-x:focus-visible { background: #f1f2f8; color: #212a45; outline: none; }

/* شريط الوقت المتبقي (المدة بتتحدد من الجافاسكريبت inline) */
.rk-toast .rk-prog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--c);
  opacity: .35;
  transform-origin: right center;
  animation-name: rk-prog;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.rk-toast:hover .rk-prog { animation-play-state: paused; }

.rk-toast.rk-out { animation: rk-out .2s ease-in both; pointer-events: none; }

@keyframes rk-in  { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rk-out { to   { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes rk-prog { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .rk-toast, .rk-toast.rk-out { animation-duration: .01s; }
}

/* ───── لمسة تصميم لرسايل حالة الاتصال (التوقيت والإظهار/الإخفاء من كودها الأصلي بدون تغيير) ───── */
.message-box .box {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(33, 42, 69, .16) !important;
  font-family: inherit;
  color: #212a45;
}