/* ===== Join Toast (يمين الشاشة) ===== */
#joinToast{
  position:fixed;
  right:16px;         /* يمين */
  top:22%;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  transform:translateX(12px);
  transition:opacity .25s ease, transform .25s ease;
  direction:rtl;      /* مهم */
  font-family:inherit;
}
#joinToast.show{ opacity:1; transform:translateX(0); }
#joinToast.hide{ opacity:0; transform:translateX(12px); }

#joinToast .jt-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  min-width:220px;
  max-width:min(90vw, 340px);
  border-radius:12px;
  background:linear-gradient(135deg,#6d28d9,#7c3aed); /* بنفسجي لطيف */
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
}

/* نجعل الصورة في أقصى اليمين */
#joinToast .jt-card{ flex-direction: row-reverse; }

/* الصورة */
#joinToast .jt-avatar{
  width:42px; height:42px; flex:0 0 42px;
  border-radius:10px; object-fit:cover;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}

/* النص */
#joinToast .jt-text{ display:flex; flex-direction:column; gap:2px; line-height:1.3; }
#joinToast .jt-title{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:6px; }
#joinToast .jt-sub{ font-size:13px; opacity:.95; }

/* شارة الرتبة (لو عندك ستايل سابق لها… تمام) */
#joinToast .rank-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; line-height:1;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.2);
}


/* =========================================================
   System join line — tidy, RTL, right-aligned, with owner FX
   ========================================================= */

/* حاوية رسالة النظام لليمين دائمًا */
.chat_log.sys_log{
  direction: rtl;
  text-align: right;
}
.chat_log.sys_log .chat_system{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  direction: rtl;
  font-weight: 600;
  font-size: 14px;
  color: #555;
  background: #fffdf5;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 8px 0 8px auto;          /* تلصقها يمين */
  max-width: 85%;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  animation: fadeInRight .45s ease-out;
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* اسم المستخدم */
.chat_log.sys_log .chat_system .username{
  color: #000;
  font-weight: 700;
  font-style: italic;
}

/* شارة الرتبة + الأقواس */
.rank-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:#222;
  background: linear-gradient(180deg,#ffb44d,#ff9800);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  margin-inline-start:6px;
}
.rank-parens{
  display:inline-flex;
  align-items:center;
  gap:6px;
  direction:ltr;               /* حتى لا تنعكس الأقواس */
  unicode-bidi:isolate;
  margin-inline-start:6px;
}
.rank-parens::before{ content:"("; }
.rank-parens::after { content:")"; }

/* ألوان بحسب الرتبة (اختياري) */
.rank-100{ background:linear-gradient(135deg,#f59e0b,#d97706); color:#222; } /* مالك */
.rank-90 { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }
.rank-80 { background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; }
.rank-70 { background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; }
.rank-50 { background:linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; }
.rank-0  { background:linear-gradient(135deg,#6b7280,#4b5563); color:#fff; }

/* =========================================================
   Owner (rank=100) — special entrance FX on join
   ========================================================= */

/* أضِف class="owner-join" على <li.chat_log.sys_log> عندما تكون رتبة المنضم 100 */
.chat_log.sys_log.owner-join{ position:relative; overflow:visible; }

.chat_log.sys_log.owner-join .chat_system{
  background:#fff7e6;
  box-shadow:0 0 0 2px #ffb200 inset, 0 0 18px rgba(255,179,0,.55);
  animation: ownerPulseGlow 1.5s ease-out 2, fadeInRight .45s ease-out;
}
@keyframes ownerPulseGlow{
  0%   { box-shadow:0 0 0 0 rgba(255,179,0,.9), 0 0 18px rgba(255,179,0,.55); }
  70%  { box-shadow:0 0 0 14px rgba(255,179,0,0), 0 0 8px rgba(255,179,0,.35); }
  100% { box-shadow:0 0 0 0 rgba(255,179,0,0), 0 0 0 rgba(255,179,0,0); }
}

/* قصاصات بسيطة */
.chat_log.sys_log.owner-join .confetti{
  position:absolute; left:0; right:0; top:-8px; height:64px;
  pointer-events:none; overflow:visible;
}
.chat_log.sys_log.owner-join .confetti i{
  position:absolute; width:7px; height:11px; border-radius:2px;
  transform: translateY(-22px) rotate(0deg);
  opacity:0; animation: confettiDrop 1.2s ease-out forwards;
}
@keyframes confettiDrop{
  0%   { transform:translateY(-22px) rotate(0deg);   opacity:0; }
  20%  { opacity:1; }
  100% { transform:translateY(66px) rotate(240deg);  opacity:0; }
}
.confetti i.c1{ background:#ff4757; }
.confetti i.c2{ background:#ffa502; }
.confetti i.c3{ background:#2ed573; }
.confetti i.c4{ background:#1e90ff; }
.confetti i.c5{ background:#a55eea; }

/* =========================================================
   Chat items — soft borders (كما طلبت)
   ========================================================= */
.chat_log.ch_logs{
  border:1px solid rgba(0,0,0,.25);
  border-radius:10px;
  background:#fffdf3;
  margin:2px 0;
  padding:5px 8px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.chat_log.ch_logs:hover{
  border-color:rgba(0,0,0,.4);
  background:#fffbe6;
}
.chat_log.ch_logs:last-child{ margin-bottom:0; }

.dark .chat_log.ch_logs{
  border:1px solid rgba(255,255,255,.2);
  background:#1f1f1f;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* =========================================================
   User list / avatars / badges (بدون تكرار)
   ========================================================= */
.user_item{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center;
  padding:8px 10px; background:#fff; border-bottom:1px solid #e1e1e1;
}
.user_item:last-child{ border-bottom:none; }

.user_item_avatar{ position:relative; width:44px; height:44px; border-radius:6px; overflow:hidden; flex-shrink:0; }
.user_item_avatar img.avav{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.user_item_avatar .av-frame{
  position:absolute; inset:-1.5px; border-radius:50%;
  background-image:var(--av-frame, none);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  pointer-events:none;
}

.user_item_data{ display:flex; flex-direction:column; justify-content:center; margin-inline-start:10px; min-width:0; }
.user_item_data .username{ font-weight:700; font-size:16px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user_item_data .list_mood{ font-size:13px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }

.u-badge{ width:18px; height:18px; vertical-align:middle; margin-inline-start:4px; display:inline-block; }
.user_item_icon.icrank,
.user_item .user_item_flag{ display:inline-flex; align-items:center; justify-content:center; margin-inline-start:8px; }
.user_item_icon.icrank img,
.user_item .user_item_flag img{ width:22px; height:22px; display:block; }
.user_item:hover{ background:#fdfdfd; }
.user_item.offline{ opacity:.7; }

@media (max-width:480px){
  .user_item{ grid-template-columns:40px 1fr auto; padding:7px 8px; }
  .user_item_avatar{ width:40px; height:40px; }
  .user_item_data .username{ font-size:15px; }
  .user_item_data .list_mood{ font-size:12px; }
}

/* Avatar (في الدردشة) */
#show_chat .chat_avatar{ position:relative; width:clamp(32px,8vw,48px); aspect-ratio:1/1; flex:0 0 auto; overflow:visible!important; background:transparent!important; }
#show_chat .chat_avatar .cavatar{ display:block; width:100%; height:100%; border-radius:8px; object-fit:cover; position:relative; z-index:1; }
#show_chat .chat_avatar .av-frame{
  position:absolute; inset:-6%; pointer-events:none; z-index:2;
  transition:transform .12s ease, filter .12s ease;
  background-image:var(--av-frame, none); background-position:center; background-size:contain; background-repeat:no-repeat;
}
#show_chat .chat_avatar::before,
#show_chat .chat_avatar::after{ content:none!important; background:none!important; border:0!important; box-shadow:none!important; }

/* جعل الصورة دائرة تلقائيًا إذا وُجد إطار */
#show_chat .chat_avatar.has-frame .cavatar,
.user_item_avatar.has-frame .avav{ border-radius:50%!important; }
#show_chat .chat_avatar.has-frame .av-frame,
.user_item_avatar.has-frame .av-frame{ border-radius:50%!important; display:block!important; }

.avat24{ width:24px; height:24px; aspect-ratio:1/1; }
.avat32{ width:32px; height:32px; aspect-ratio:1/1; }
.avat40{ width:40px; height:40px; aspect-ratio:1/1; }

@media (max-width:480px){
  #show_chat .chat_avatar{ width:clamp(28px,10vw,42px); }
  .user_item_avatar{ width:clamp(24px,9vw,36px); }
  .user_item_avatar .av-frame{ top:-1.5px; left:-1.5px; right:-1.5px; bottom:-1.5px; }
}

/* Badges beside names */
#show_chat .row_main .u-badge,
.user_item .u-badge,
.user_item_name .u-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; vertical-align:middle; margin-inline:4px; line-height:0;
  transition: transform .25s ease, filter .25s ease;
}
.user_item .u-badge,
.user_item_name .u-badge{ width:16px; height:16px; margin-inline:3px; }
.u-badge img, .u-badge svg{ width:100%; height:100%; display:block; }
.u-badge:hover{ transform:scale(1.15); filter:brightness(1.2); }
@media (max-width:480px){ #show_chat .row_main .u-badge{ width:16px; height:16px; } }
.u-badge.gold{ filter: drop-shadow(0 0 4px gold); }
.u-badge.silver{ filter: drop-shadow(0 0 3px #cfcfcf); }
.u-badge.diamond{ filter: drop-shadow(0 0 5px deepskyblue); }

/* =========================================================
   Group Call layout (كما هو)
   ========================================================= */
.gc-wrap{ display:flex; flex-direction:column; width:100%; height:100%; }
/* === Join Toast (يمين، منتصف الشاشة) === */
#joinToast {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 9999;
  min-width: 240px;
  max-width: min(90vw, 420px);
  padding: 12px 14px;
  border-radius: 14px;
  direction: rtl;
  background: #fffdf5;
  color: #333;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 0 0 2px #ffe8b3;
  border: 1px solid rgba(0,0,0,.06);
  display: none;
  opacity: 0;
}

#joinToast .jt-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; font-size:15px; }
#joinToast .jt-username{ color:#000; font-weight:800; font-style:italic; }

#joinToast .rank-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; line-height:1;
  background: linear-gradient(180deg,#ffb44d,#ff9800); color:#222;
  border:1px solid rgba(0,0,0,.05); box-shadow:0 1px 3px rgba(0,0,0,.1);
}
#joinToast .rank-100{ background:linear-gradient(135deg,#f59e0b,#d97706); color:#222; }

#joinToast.show { display:block; animation: jtIn .28s ease-out forwards; }
#joinToast.hide { animation: jtOut .22s ease-in forwards; }
@keyframes jtIn  { from { opacity:0; transform: translateY(-50%) translateX(24px); } to { opacity:1; transform: translateY(-50%) translateX(0); } }
@keyframes jtOut { from { opacity:1; transform: translateY(-50%) translateX(0); } to { opacity:0; transform: translateY(-50%) translateX(24px); } }

  /* صندوق الكتابة: يكبر حتى حد أقصى ثم يفعّل التمرير */
  #main_input_box #content{
    width:100%;
    min-height:40px;
    max-height:20px;   /* زِدها لو تحب: 140/160 */
    line-height:1.4;
    overflow:auto;
    resize:none;
    white-space:pre-wrap;
    word-break:break-word;
    scrollbar-gutter:stable;
  }
  
  /* النص داخل فقاعات الدردشة فقط */
.bubble{
  /* اجعل المتصفح يحدد الاتجاه من أول حرف قوي في كل فقرة */
  unicode-bidi: plaintext;
  /* محاذاة تلقائية حسب الاتجاه الفعلي للنص */
  text-align: start;
  /* لا نفرض RTL أو LTR عالمياً حتى لا نقلب الإنجليزي */
  /* direction: unset;  ← الافتراضي يكفي مع plaintext */
}

/* لو في عناصر داخلية (span/p) خليها تتبع نفس السلوك */
.bubble span,
.bubble p{
  unicode-bidi: plaintext;
  text-align: start;
}

/* حيلة بصرية تمنع الإيموجي والرموز المحايدة من الانسحاب للبداية.
   لا تغيّر النص الفعلي ولا تؤثر على النسخ، فقط العرض. */
.bubble::after{
  content: '\200F'; /* RLM */
  display: inline;
}
.my_text .username {
  white-space: nowrap;          /* الاسم بسطر واحد */
  overflow: hidden;             /* يخفي الزائد */
  text-overflow: ellipsis;      /* يضيف ... عند الطول الزائد */
  display: inline-block;        /* لتجنب تمدد الكتلة */
  line-height: normal;          /* ارتفاع تلقائي بدون ضغط */
  transform: none;              /* إزالة أي إزاحة */
  vertical-align: middle;       /* توازن عمودي جميل */
}

/* تأكد أن حاوية النص لا تقص أسفل الحروف */
.ch_logs .my_text {
  overflow: visible;            /* السماح بعرض كل النقاط والحروف */
}

.karar1 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar1.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar2 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar2.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar3 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar3.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar4 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar4.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar5 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar5.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar6 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar6.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar7 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar7.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar8 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar8.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar9 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar9.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar10 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar10.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar11 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar11.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar12 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar12.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar13 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar13.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar14 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar14.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar15 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar15.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar16 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar16.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar17 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar17.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar18 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar18.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar19 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar19.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}

.karar20 {
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    font-family: sans-serif;
    background-image: url(https://shilah.site/images_nik_flash/karar20.gif);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 100%;
}