/* =========================
   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.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); } }

/* =========================
   شارة الرتبة (عام)
   ========================= */
.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);
}
.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; }

/* =========================================================
   System join line — RTL ويمين دائمًا
   ========================================================= */
.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; }

/* =========================================================
   Owner (rank=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(0); 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; }

/* =========================================================
   قائمة المستخدمين / صور / شارات
   ========================================================= */
.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 .u-badge,
.user_item_name .u-badge{ width:16px; height:16px; margin-inline:3px; }
.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; }
}

/* =========================================================
   أفاتار داخل الدردشة
   ========================================================= */
#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.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; }
}

/* =========================================================
   شارات بجانب الأسماء
   ========================================================= */
#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;
}
.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); }

/* =========================================================
   صندوق الكتابة
   ========================================================= */
#main_input_box #content{
  width:100%;
  min-height:40px;
  max-height:20px; /* زدها لو تحب 140 */
  line-height:1.4;
  overflow:auto;
  resize:none;
  white-space:pre-wrap;
  word-break:break-word;
  scrollbar-gutter:stable;
}

/* =========================================================
   إلغاء الفقاعة — نص فقط
   ========================================================= */
.bubble,
.mbubble,
.mbubble.bubble{
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  display:inline !important;
  unicode-bidi: plaintext;  /* يحترم اتجاه أول حرف */
  text-align:start;
}
.bubble span,
.bubble p{ unicode-bidi: plaintext; text-align:start; }
.bubble::after{ content:'\200F'; display:inline; } /* مساعد عرض فقط */

/* منع أي فراغات غير لازمة حول الرسالة */
#show_chat li, .msg{ margin:0 !important; padding:0 !important; }

/* =========================================================
   إصلاحات عرض الاسم والنص
   ========================================================= */
#show_chat .row_main,
#show_chat .chat_user_name,
#show_chat .chat_user_name .username{ overflow:visible !important; }

.chat_user_name{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  line-height:1.3 !important;
  vertical-align:middle !important;
}
.chat_user_name .username{
  display:inline-block !important;
  white-space:nowrap !important;
  line-height:1.35 !important;
  padding:2px 0 3px !important;
  max-height:none !important;
  text-overflow:clip !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.name_sep{ display:inline-block; line-height:1.2 !important; margin:0 4px !important; }

.row_main{
  display:flex !important;
  align-items:baseline !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;
}

/* عندك خطوط GIF للأسماء (karar1..20) تبقى كما هي */
.karar1,.karar2,.karar3,.karar4,.karar5,
.karar6,.karar7,.karar8,.karar9,.karar10,
.karar11,.karar12,.karar13,.karar14,.karar15,
.karar16,.karar17,.karar18,.karar19,.karar20{
  font-size:15px; font-weight:bold; font-style:normal; font-family:sans-serif;
  -webkit-background-clip:text; background-size:100% 100%; color:transparent;
  background-repeat:no-repeat;
}
.karar1{ background-image:url(https://shilah.site/images_nik_flash/karar1.gif); }
.karar2{ background-image:url(https://shilah.site/images_nik_flash/karar2.gif); }
.karar3{ background-image:url(https://shilah.site/images_nik_flash/karar3.gif); }
.karar4{ background-image:url(https://shilah.site/images_nik_flash/karar4.gif); }
.karar5{ background-image:url(https://shilah.site/images_nik_flash/karar5.gif); }
.karar6{ background-image:url(https://shilah.site/images_nik_flash/karar6.gif); }
.karar7{ background-image:url(https://shilah.site/images_nik_flash/karar7.gif); }
.karar8{ background-image:url(https://shilah.site/images_nik_flash/karar8.gif); }
.karar9{ background-image:url(https://shilah.site/images_nik_flash/karar9.gif); }
.karar10{ background-image:url(https://shilah.site/images_nik_flash/karar10.gif); }
.karar11{ background-image:url(https://shilah.site/images_nik_flash/karar11.gif); }
.karar12{ background-image:url(https://shilah.site/images_nik_flash/karar12.gif); }
.karar13{ background-image:url(https://shilah.site/images_nik_flash/karar13.gif); }
.karar14{ background-image:url(https://shilah.site/images_nik_flash/karar14.gif); }
.karar15{ background-image:url(https://shilah.site/images_nik_flash/karar15.gif); }
.karar16{ background-image:url(https://shilah.site/images_nik_flash/karar16.gif); }
.karar17{ background-image:url(https://shilah.site/images_nik_flash/karar17.gif); }
.karar18{ background-image:url(https://shilah.site/images_nik_flash/karar18.gif); }
.karar19{ background-image:url(https://shilah.site/images_nik_flash/karar19.gif); }
.karar20{ background-image:url(https://shilah.site/images_nik_flash/karar20.gif); }

/* دعم كليب تدريجي لأسماء bgrad.. */
.bgrad1,.bgrad2,.bgrad3,.bgrad4,.bgrad5,.bgrad6,.bgrad7,.bgrad8,.bgrad9,.bgrad10,
.bgrad11,.bgrad12,.bgrad13,.bgrad14,.bgrad15,.bgrad16,.bgrad17,.bgrad18,.bgrad19,.bgrad20,
.bgrad21,.bgrad22,.bgrad23,.bgrad24,.bgrad25,.bgrad26,.bgrad27,.bgrad28,.bgrad29,.bgrad30,
.bgrad31,.bgrad32,.bgrad33,.bgrad34,.bgrad35,.bgrad36,.bgrad37,.bgrad38,.bgrad39,.bgrad40{
  color:transparent; -webkit-background-clip:text; background-clip:text;
}


/* ====== إصلاح قصّ الحروف العربية + إبقاء الاسم بسطر واحد ====== */

/* مهم: خليه يتغلب على ستايلات قديمة */
#show_chat .row_main,
#show_chat .chat_user_name,
#show_chat .chat_user_name .username{
  overflow: visible !important;
}

/* سطر الاسم + الشارات */
.chat_user_name{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.3 !important;           /* مساحة رأس/ذيل كافية */
  vertical-align: middle !important;
}

/* الاسم نفسه */
.chat_user_name .username{
  display: inline-block !important;
  white-space: nowrap !important;         /* يمنع الالتفاف */
  line-height: 1.35 !important;           /* عالج القصّ تحت النقاط */
  padding: 2px 0 3px !important;          /* هامش سفلي بسيط للنقاط/التشكيل */
  max-height: none !important;
  text-overflow: clip !important;         /* بدون … لأنك تريد الاسم كامل */
}

/* لو تحب قصّ بالنقاط بدل كامل الاسم، استبدل السطرين فوق بـ: */
/* max-width: 160px; overflow: hidden; text-overflow: ellipsis; */

/* الفاصل ":" لا يأكل ارتفاع */
.name_sep{
  display:inline-block;
  line-height:1.2 !important;
  margin: 0 4px !important;
}

/* شارة الرتبة (rank-chip) تكون على السطر كويس */
.rank-chip{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.1 !important;
  padding-bottom: 2px !important;         /* نفس فكرة النقاط */
}

/* صف السطر الأساسي لرسالة الشات */
.row_main{
  display: flex !important;
  align-items: baseline !important;       /* يضبط خط الأساس مع النص */
  gap: 6px !important;
  flex-wrap: nowrap !important;           /* يمنع نزول عناصر للسطر الثاني */
  overflow: visible !important;
}

/* فقاعة النص، نرفع line-height شوي للنص العربي */
.mbubble.bubble{
  line-height: 1.45 !important;
}

/* تأكد ماكو قصّ حول الصور/الفريم */
.cavatar, .av-frame{
  overflow: visible !important;
}

/* تحسين عرض النص العربي (اختياري) */
.chat_user_name .username{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* gold-tag */
.gold-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0 3px;
  border-radius:4px;
  background:transparent !important;
  color:#3b82f6 !important;
  font-size:11px;
  font-weight:700;
}
/* mention highlight */
.mention_highlight {
  color: #ff4d4d !important;
  font-weight: 900 !important;
  background: rgba(255, 0, 0, 0.12);
  padding: 2px 5px;
  border-radius: 6px;
}

.mention_you {
  color: #ff4d4d;
  font-weight: 700;
  margin-right: 4px;
  font-size: 13px;
}
/* رد صغير جداً ومحاصر حول النص فقط */
.cquote{
    display: inline-block;
    background: #e8f1ff;
    border-left: 3px solid #3b82f6;
    padding: 4px 6px !important;
    border-radius: 4px;

    margin: 3px 0 3px 35px !important;
    max-width: 55% !important;
    width: auto !important;

    color: #0f172a;
    font-size: 12px;
    line-height: 1.3;
}

/* إزالة مسافات داخل العناصر */
.cquote *{
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/* اسم المستخدم */
.cquote .username{
    font-weight: bold;
    color: #1d4ed8 !important;
    font-size: 12px;
    margin-bottom: 2px !important;
}

/* صورة صغيرة */
.cquote img{
    max-width: 28px;
    max-height: 28px;
    border-radius: 4px;
    margin-top: 4px;
}

/* "ردًا على" صغيرة جداً */
.cquote::before{
    content: "ردًا على";
    font-size: 10px;
    color: #2563eb;
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
}
/* ================== الشكل العام ================== */
#profile_posts_root{
    margin-top:8px;
    border-radius:18px;
    background:radial-gradient(circle at top,#111827,#020617);
    padding:12px;
    color:#e5e7eb;
    box-shadow:0 18px 45px rgba(15,23,42,.75);
    overflow:hidden;
    border:1px solid rgba(148,163,184,.16);
}
.pf_section_title{
    font-weight:600;
    font-size:14px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:6px;
}
.pf_section_title i{
    color:#f97316;
    font-size:16px;
}

/* ================== فورم إنشاء منشور ================== */
.pf_new_post_box{
    margin-bottom:12px;
    padding:10px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(15,23,42,.97),rgba(17,24,39,.98));
    border:1px solid rgba(148,163,184,.35);
}
.pf_new_form{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.pf_file_label{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background:rgba(15,23,42,.9);
    border:1px dashed rgba(148,163,184,.6);
    cursor:pointer;
    font-size:12px;
    color:#cbd5f5;
    transition:.15s;
}
.pf_file_label i{
    background:linear-gradient(135deg,#f97316,#ec4899);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:15px;
}
.pf_file_label:hover{
    border-color:#f97316;
    box-shadow:0 0 0 1px rgba(249,115,22,.6);
}
#pf_caption{
    min-height:55px;
    resize:vertical;
    border-radius:12px;
    border:1px solid #1f2937;
    background:rgba(15,23,42,.92);
    padding:6px 8px;
    font-size:12px;
    color:#e5e7eb;
}
#pf_caption::placeholder{
    color:#6b7280;
}
#pf_caption:focus{
    outline:none;
    border-color:#6366f1;
    box-shadow:0 0 0 1px rgba(99,102,241,.4);
}

.pf_new_actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

/* زر النشر */
#pf_upload_btn{
    border:none;
    border-radius:999px;
    padding:6px 16px;
    font-size:12px;
    cursor:pointer;
    background:linear-gradient(135deg,#f97316,#ec4899,#8b5cf6);
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:6px;
    position:relative;
    overflow:hidden;
    min-width:80px;
    justify-content:center;
}
#pf_upload_btn:disabled{
    opacity:.55;
    cursor:default;
}
.pf_upload_btn_loader{
    display:none;
    width:14px;
    height:14px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,.3);
    border-top-color:#fff;
    animation:pf_spin .7s linear infinite;
}
#pf_upload_btn.uploading .pf_upload_btn_loader{display:inline-block;}
#pf_upload_btn.uploading .pf_upload_btn_text{opacity:.7;}

/* لودر دائري ستايل تيك توك */
.pf_progress{
    display:none;
    align-items:center;
    gap:8px;
    font-size:11px;
    color:#9ca3af;
}
.pf_progress_circle{
    width:32px;
    height:32px;
    border-radius:50%;
    background:conic-gradient(#22c55e 0deg, rgba(31,41,55,.9) 0deg);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.pf_progress_circle::before{
    content:'';
    position:absolute;
    inset:4px;
    border-radius:50%;
    background:#020617;
}
.pf_progress_inner{
    position:relative;
    font-size:10px;
    color:#e5e7eb;
}
.pf_progress_label{
    white-space:nowrap;
}

.pf_status{
    font-size:11px;
    min-height:14px;
    color:#94a3b8;
    margin-top:2px;
}

/* ================== شبكة المصغرات ================== */
.pf_posts_list{margin-top:4px;}
.pf_loading{
    font-size:12px;
    opacity:.9;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:18px 0;
}
.pf_spinner{
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid rgba(148,163,184,.5);
    border-top-color:#f97316;
    animation:pf_spin .8s linear infinite;
}
@keyframes pf_spin{to{transform:rotate(360deg);}}

/* شبكة مثل إنستغرام / تيك توك */
.pf_grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
    gap:6px;
}
.pf_grid_item{
    position:relative;
    width:100%;
    padding-bottom:130%;
    overflow:hidden;
    border-radius:16px;
    background:#020617;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(15,23,42,.75);
    transition:.18s;
    border:1px solid rgba(31,41,55,.95);
}
.pf_grid_item::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.0));
    opacity:.85;
    pointer-events:none;
}
.pf_grid_item:hover{
    transform:translateY(-2px) scale(1.01);
    box-shadow:0 10px 26px rgba(15,23,42,.9);
    border-color:rgba(59,130,246,.75);
}
.pf_grid_item_inner{
    position:absolute;
    inset:0;
}
.pf_grid_item_inner img,
.pf_grid_item_inner video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* فيديو الشبكة المصغرة */
.pf_grid_video{
    filter:saturate(1.05) contrast(1.02);
}

/* شارة معلومات أسفل المصغرة */
.pf_grid_badge{
    position:absolute;
    left:6px;
    bottom:6px;
    padding:2px 7px;
    border-radius:999px;
    font-size:9px;
    background:rgba(15,23,42,.85);
    color:#e5e7eb;
    backdrop-filter:blur(5px);
    z-index:2;
}
.pf_grid_icon_vid{
    position:absolute;
    right:6px;
    top:6px;
    font-size:11px;
    background:rgba(15,23,42,.85);
    padding:3px 7px;
    border-radius:999px;
    color:#fff;
    z-index:2;
}

/* ================== عارض كامل ================== */
#pf_viewer_overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.94);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
}
#pf_viewer_overlay.pf_show{
    display:flex;
    animation:pf_fade_in .18s ease-out;
}
@keyframes pf_fade_in{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
}
.pf_fs_panel{
    width:100%;
    max-width:460px;
    max-height:90vh;
    background:#020617;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 18px 40px rgba(0,0,0,.85);
}
.pf_fs_header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 10px;
    background:rgba(15,23,42,.96);
    border-bottom:1px solid rgba(148,163,184,.25);
}
.pf_fs_header_left{
    display:flex;
    align-items:center;
    gap:4px;
}

/* 🔥 إخفاء أزرار السابق / التالي نهائياً من الواجهة */
.pf_fs_nav_btn{
    display:none !important;
    /* بقية الخصائص لو حبيت ترجعها مستقبلاً */
    border:none;
    background:transparent;
    color:#e5e7eb;
    font-size:12px;
    cursor:pointer;
    margin:0 3px;
    padding:4px 8px;
    border-radius:999px;
}

.pf_fs_close{
    border:none;
    background:#0f172a;
    color:#e5e7eb;
    border-radius:999px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:15px;
}

/* زر حذف المنشور في العارض */
.pf_delete_btn{
    background:rgba(239,68,68,.15);
}
.pf_delete_btn i{
    font-size:16px;
    margin-bottom:1px;
}
.pf_delete_btn span{
    font-size:10px;
}

/* باقي العارض */
.pf_fs_main{
    position:relative;
    flex:1;
    display:flex;
    background:#000;
}
.pf_fs_media{
    flex:1;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
    touch-action:none;
}
.pf_fs_media img,
.pf_fs_media video{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    background:#000;
}

/* أيقونة Play */
.pf_play_icon{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:72px;
    height:72px;
    border-radius:999px;
    background:rgba(15,23,42,.8);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    color:#f97316;
    pointer-events:none;
    transition:opacity .15s;
    z-index:3;
}
.pf_play_icon.pf_hidden{opacity:0;}

/* زر تفعيل الصوت */
.pf_sound_gate{
    position:absolute;
    right:10px;
    top:10px;
    z-index:6;
    border:none;
    border-radius:999px;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    font-size:12px;
    padding:6px 10px;
    display:none;
}
.pf_sound_gate.pf_show{display:inline-flex;}

/* أزرار لايك وتعليق – نفس TikTok (بدون إطار) */
/* عمود الأزرار الجانبية يبقى كما هو */
.pf_fs_side{
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    z-index:5;
}

/* زر جانبي: بدون حدود، بدون ظل، بدون خلفية – فقط أيقونة + رقم */
.pf_icon_btn{
    border:none;
    background:transparent !important;
    box-shadow:none;
    backdrop-filter:none;
    width:auto;
    height:auto;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:22px; /* حجم الأيقونة */
    color:#ffffff;
}

/* رقم الإعجاب / التعليقات تحت الأيقونة مباشرة */
.pf_icon_btn span{
    font-size:12px;
    margin-top:2px;
    color:#f9fafb;
}

/* لما يكون لايك مفعّل: فقط نلوّن الأيقونة */
.pf_like_active{
    background:transparent !important;
    color:#f97316 !important; /* قلب برتقالي/أحمر */
}

/* زر الحذف: أيقونة سلة حمراء بدون خلفية */
.pf_delete_btn{
    background:transparent !important;
    box-shadow:none !important;
    color:#f87171 !important;
}

.pf_delete_btn i{
    font-size:20px;
    margin-bottom:2px;
}

.pf_delete_btn span{
    font-size:11px;
    margin-top:2px;
    color:#fecaca;
}

/* كابشن + ميتا (إعجابات / تعليقات / مشاهدات) */
.pf_fs_caption_block{
    padding:8px 10px 10px;
    background:#020617;
    border-top:1px solid rgba(15,23,42,.95);
}
.pf_fs_caption{font-size:13px;margin-bottom:2px;}
.pf_fs_meta{font-size:11px;opacity:.9;}

/* ================= نافذة التعليقات ستايل TikTok ================= */
#pf_comments_overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
#pf_comments_overlay.pf_show{
    display: flex;
}
#pf_comments_overlay_panel{
    width: 100%;
    max-width: 480px;
    height: 85vh;
    max-height: 85vh;
    background: #020617;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0,0,0,.7);
}

/* هيدر التعليقات */
.pf_co_header{
    padding: 12px 14px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #020617;
    border-bottom: 1px solid rgba(31,41,55,.9);
    color: #e5e7eb;
    flex-shrink: 0; /* يمنع تقلص الهيدر */
}
.pf_co_title{
    font-size: 15px;
    font-weight: 600;
}
.pf_co_count{
    font-size: 12px;
    opacity: .8;
}
.pf_co_close{
    border: none;
    background: #0f172a;
    color: #e5e7eb;
    border-radius: 999px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* جسم النافذة - محتوى التعليقات + شريط الرد */
.pf_co_body{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* مهم: يمنع تجاوز المحتوى */
}

/* شريط "ترد على فلان" */
.pf_reply_info{
    font-size: 11px;
    color: #e5e7eb;
    padding: 6px 14px;
    display: none;
    align-items: center;
    justify-content: space-between;
    background: rgba(15,23,42,.95);
    border-bottom: 1px solid rgba(31,41,55,.9);
    flex-shrink: 0; /* يمنع تقلصه */
}
.pf_reply_info span strong{color:#f97316;}
.pf_reply_cancel{
    border:none;
    background:transparent;
    color:#9ca3af;
    font-size:11px;
    cursor:pointer;
}

/* قائمة التعليقات مع سكرول مستقل */
.pf_comments_box{
    flex: 1;
    overflow-y: auto;  /* السكرول هنا فقط */
    background: #020617;
    padding: 8px 0 4px;
    font-size: 13px;
    color: #e5e7eb;
    scroll-behavior: smooth;
}

/* شريط الإدخال ثابت في الأسفل */
.pf_add_comment_row{
    padding: 10px 12px;
    background: #020617;
    border-top: 1px solid rgba(31,41,55,.9);
    flex-shrink: 0; /* يمنع تقلصه */
    position: sticky;
    bottom: 0;
    z-index: 10;
}
.pf_add_comment_inner{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #020617;
}
.pf_add_comment_inner input{
    flex: 1;
    border-radius: 999px;
    border: 1px solid #374151;
    background: #111827;
    color: #e5e7eb;
    font-size: 13px;
    padding: 8px 14px;
    transition: border-color .15s;
}
.pf_add_comment_inner input:focus{
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99,102,241,.4);
}
.pf_add_comment_send{
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    transition: opacity .15s;
}
.pf_add_comment_send:disabled{
    opacity: .6;
    cursor: not-allowed;
}

/* صف تعليق واحد */
.pf_cmt_row{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    transition: background .15s;
}
.pf_cmt_row:hover{
    background: rgba(15,23,42,.3);
}
.pf_cmt_avatar{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #111827;
}
.pf_cmt_avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pf_cmt_main{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pf_cmt_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pf_cmt_user{
    font-size: 13px;
    font-weight: 600;
    color: #f97316;
}
.pf_cmt_like_btn{
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color .15s;
}
.pf_cmt_like_btn:hover{
    color: #f43f5e;
}
.pf_cmt_like_btn i{
    font-size: 13px;
}
.pf_cmt_like_btn.pf_cmt_liked{
    color: #fb7185;
}
.pf_cmt_text{
    font-size: 14px;
    color: #e5e7eb;
    line-height: 1.4;
}
.pf_cmt_meta{
    font-size: 11px;
    opacity: .85;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}
.pf_cmt_reply_btn,
.pf_cmt_show_replies{
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 11px;
    cursor: pointer;
    transition: color .15s;
}
.pf_cmt_reply_btn:hover{
    color: #6366f1;
}
.pf_cmt_show_replies:hover{
    color: #f97316;
}
.pf_cmt_time{
    color: #6b7280;
}

/* زر حذف تعليق */
.pf_cmt_delete_btn{
    border:none;
    background:transparent;
    color:#f97373;
    font-size:11px;
    cursor:pointer;
    transition:color .15s;
}
.pf_cmt_delete_btn:hover{
    color:#ef4444;
}

/* حقل الردود */
.pf_cmt_replies{
    margin-top: 6px;
    margin-right: 32px;
    border-right: 1px solid rgba(55,65,81,.7);
    padding-right: 8px;
}

/* ================= نوافذ التأكيد داخل العارض ================= */
.pf_viewer_modal_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(12px);
    z-index: 11000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pf_viewer_modal_overlay.pf_show {
    display: flex;
    animation: pf_viewer_modal_fade_in .2s ease-out;
}
@keyframes pf_viewer_modal_fade_in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.pf_viewer_modal {
    width: 100%;
    max-width: 380px;
    background: linear-gradient(145deg, #111827, #020617);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0,0,0,.95);
    border: 1px solid rgba(59,130,246,.3);
    transform: translateZ(0);
}
.pf_viewer_modal_header {
    padding: 20px 24px;
    background: rgba(15,23,42,.97);
    border-bottom: 1px solid rgba(148,163,184,.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pf_viewer_modal_title {
    font-size: 17px;
    font-weight: 600;
    color: #f97316;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pf_viewer_modal_title i {
    font-size: 20px;
}
.pf_viewer_modal_close {
    border: none;
    background: rgba(239,68,68,.2);
    color: #f97316;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all .2s;
}
.pf_viewer_modal_close:hover {
    background: rgba(239,68,68,.35);
    transform: rotate(90deg);
}
.pf_viewer_modal_body {
    padding: 28px 24px;
    text-align: center;
}
.pf_viewer_modal_icon {
    font-size: 56px;
    margin-bottom: 20px;
    background: linear-gradient(145deg, #f97316, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pf_viewer_modal_message {
    font-size: 15.5px;
    line-height: 1.6;
    color: #e5e7eb;
    margin-bottom: 28px;
}
.pf_viewer_modal_actions {
    display: flex;
    gap: 14px;
    justify-content: center;
}
.pf_viewer_modal_btn {
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s;
    min-width: 110px;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
}
.pf_viewer_modal_btn_confirm {
    background: linear-gradient(145deg, #ef4444, #dc2626);
    color: white;
}
.pf_viewer_modal_btn_confirm:hover {
    background: linear-gradient(145deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239,68,68,.5);
}
.pf_viewer_modal_btn_cancel {
    background: rgba(148,163,184,.2);
    color: #e5e7eb;
    border: 1px solid rgba(148,163,184,.3);
}
.pf_viewer_modal_btn_cancel:hover {
    background: rgba(148,163,184,.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(148,163,184,.3);
}

/* نافذة النجاح داخل العارض */
.pf_viewer_success_modal .pf_viewer_modal_icon {
    background: linear-gradient(145deg, #22c55e, #16a34a);
}
.pf_viewer_success_modal .pf_viewer_modal_btn_confirm {
    background: linear-gradient(145deg, #22c55e, #16a34a);
}
.pf_viewer_success_modal .pf_viewer_modal_btn_confirm:hover {
    background: linear-gradient(145deg, #16a34a, #15803d);
    box-shadow: 0 6px 20px rgba(34,197,94,.5);
}

/* موبايل */
@media (max-width:768px){
    .pf_fs_panel{
        max-width:100%;
        max-height:100%;
        border-radius:0;
    }
    #pf_comments_overlay_panel{
        max-width:100%;
        height: 90vh;
        max-height: 90vh;
        border-radius: 18px 18px 0 0;
    }
    .pf_cmt_row{
        padding: 10px 12px;
    }
    .pf_viewer_modal {
        max-width: 90%;
    }
    .pf_viewer_modal_body {
        padding: 24px 20px;
    }
}

/* تخصيص شريط السكرول */
.pf_comments_box::-webkit-scrollbar {
    width: 5px;
}
.pf_comments_box::-webkit-scrollbar-track {
    background: rgba(15,23,42,.5);
}
.pf_comments_box::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.6);
    border-radius: 10px;
}
.pf_comments_box::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,.8);
}
/* === زر الترجمة — بدون خلفية، بدون حدود، صغير جداً === */
.translate_msg_btn {
    background: none !important;      /* بدون خلفية */
    border: none !important;          /* بدون إطار */
    padding: 0 !important;
    margin-left: 4px;
    margin-right: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.translate_msg_btn i {
    font-size: 12px !important;        /* حجم صغير جداً */
    color: #1e90ff !important;         /* أزرق جميل */
    opacity: 0.9;
}

.translate_msg_btn:hover i {
    opacity: 1;
    color: #3399ff !important;         /* أزرق أفتح عند المرور */
}
.translated_msg_text {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 3px;
    display: none;
}