/* ===== [ADDED] أيقونة "إضافة صديق" وحالاتها (زر واحد أيقونة بس، بدون أي
   نص) - نفس دائرة unot/ulike المجاورة ليها فوق الغلاف بالظبط، وبتاخد نفس
   تدرج ألوان تبويبات upro-tabs تحتها (#6a82fb → #a685e2) عشان تبقى متسقة
   بصريًا مع باقي أيقونات البروفايل. ===== */
#upro .fr-action-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.35);backdrop-filter:blur(2px);
  transition:transform .2s ease,background .2s ease;
}
#upro .fr-action-btn:hover{transform:translateY(-2px);}
#upro .fr-action-btn .fr-btn{
  width:100%;height:100%;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:#fff;font-size:14px;cursor:pointer;padding:0;
}
/* إضافة صديق: نفس تدرج التبويبات تحتها بالظبط */
#upro .fr-action-btn .fr-btn-add{
  background:linear-gradient(135deg,#6a82fb,#a685e2);
}
/* طلب مُرسل (لسه معلّق) - لوني تحذيري خفيف، أيقونة إلغاء الطلب فقط */
#upro .fr-action-btn .fr-btn-pending{
  background:linear-gradient(135deg,#f5b301,#f57c00);
}
/* أصدقاء بالفعل - أيقونة إلغاء الصداقة فقط، بلون مميز عشان تبان واضحة */
#upro .fr-action-btn .fr-btn-friends{
  background:linear-gradient(135deg,#43c46a,#2fa84f);
}
#upro .fr-action-btn .fr-btn-friends:hover{
  background:linear-gradient(135deg,#e64c66,#c62f4a);
}
/* طلب صداقة وارد - يفتح قائمة الطلبات */
#upro .fr-action-btn .fr-btn-accept{
  background:linear-gradient(135deg,#e91e8c,#6a3ee8);
}

/* ===== [CHANGED] أيقونة "محادثة خاصة" (upm) - اتنقلت من upro-head لجوه
   مشغل اغنية البروفايل مباشرة، جوه صف واحد (upro-toolbar-row تحت). أيقونة
   بس من غير نص، بنفس تدرج ألوان باقي أيقونات البروفايل (fr-action-btn/
   upro-tab-btn) عشان تبقى خفيفة وأنيقة ومتسقة بصريًا. بقت عنصر عادي جوه
   الصف (مش position:absolute تاني) عشان تقعد بجانب المشغل مباشرة. ===== */
#upro .upro-pm-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#6a82fb,#a685e2);
  color:#fff;font-size:14px;cursor:pointer;
  box-shadow:0 3px 10px rgba(106,130,251,.35);
  transition:transform .2s ease,box-shadow .2s ease;
}
#upro .upro-pm-btn:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 5px 14px rgba(106,130,251,.45);
}

/* ===== [ADDED] صف يجمع أيقونة "محادثة خاصة" + مشغل اغنية البروفايل جنب
   بعض بالظبط، مكان الحالة الكتابية القديمة فوق التبويبات. الصف نفسه ظاهر
   دايما (عشان أيقونة المحادثة تفضل بادية حتى لو مفيش أغنية للبروفايل)،
   والمشغل جواه هو بس اللي بيتحط له display:flex/none من x2.js. ===== */
#upro .upro-toolbar-row{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:2px auto 10px;
}

/* ===== [MOVED + CHANGED] مشغل اغنية البروفايل - بقى مصغّر ومركزي مكان
   الحالة الكتابية القديمة فوق التبويبات: زرار تشغيل/إيقاف صغير + أيقونة
   تأثر صوتي متحركة صغيرة بس، من غير عنوان/شريط تقدم/أيقونة صوت ظاهرين. ===== */
#upro .upro-song-compact{
  display:none; /* بيتحط flex فعليًا من x2.js (showProfileSong) لما يكون فيه أغنية */
  align-items:center;justify-content:center;gap:10px;
  padding:6px 14px;width:fit-content;
  border-radius:20px;background:#f7f7fb;border:1px solid #eee;
}
#upro .upro-song-compact .upro-song-play{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#6a82fb,#a685e2);
  color:#fff;font-size:11px;cursor:pointer;
}
#upro .upro-song-compact .upro-song-eq{
  display:flex;align-items:flex-end;gap:2px;height:14px;
}
#upro .upro-song-compact .upro-song-eq span{
  display:block;width:3px;border-radius:2px;background:#a685e2;
  height:4px;animation:none;
}
#upro .upro-song-compact.playing .upro-song-eq span{
  animation:uproEqBounce .9s ease-in-out infinite;
}
#upro .upro-song-compact .upro-song-eq span:nth-child(1){animation-delay:0s;}
#upro .upro-song-compact .upro-song-eq span:nth-child(2){animation-delay:.15s;}
#upro .upro-song-compact .upro-song-eq span:nth-child(3){animation-delay:.3s;}
#upro .upro-song-compact .upro-song-eq span:nth-child(4){animation-delay:.45s;}
@keyframes uproEqBounce{
  0%,100%{height:4px;}
  50%{height:14px;}
}

/* ===== [ADDED] تبويبات البروفايل: الأصدقاء / الهدايا / التفاعلات =====
   شريط صغير أنيق تحت الحالة الكتابية مباشرة (upro-msg)، فيه 3 أزرار تبويب
   بتفتح كل واحدة نافذة منبثقة خفيفة لوحدها (تحميل غير مسبق بالكامل). */
#upro .upro-tabs{
  display:flex;justify-content:center;gap:8px;
  margin:0 16px 12px;padding:0;
}
#upro .upro-tab-btn{
  flex:1 1 0;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 6px;border-radius:12px;
  background:#f3f4f6;border:1px solid #e5e7eb;color:#374151;
  font-size:12px;font-weight:700;cursor:pointer;
  transition:all .22s ease;
}
#upro .upro-tab-btn .fa{font-size:13px;color:#6a82fb;transition:color .22s ease;}
#upro .upro-tab-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#upro .upro-tab-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#6a82fb,#a685e2);color:#fff;
  border-color:transparent;box-shadow:0 6px 14px rgba(106,130,251,.32);
}
#upro .upro-tab-btn:hover .fa{color:#fff;}
/* [ADDED] لما البروفايل بيكون ليه خلفية مخصصة (upro-has-bg بتتحط على
   modal-content من x2.js لما u.p_bg موجودة)، التبويبات (في حالتها العادية
   الغير مفتوحة/غير hover) بتبقى شبه شفافة بدل الخلفية الرمادية الصلبة، عشان
   تتماشى بصريًا مع خلفية البروفايل بدل ما تبان كطبقة منفصلة فوقها. حالة
   hover/active فضلت بنفس التدرج الملوّن زي ما هي عشان تفضل واضحة. */
#upro .modal-content.upro-has-bg .upro-tab-btn{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.35);
  color:#fff;
  backdrop-filter:blur(3px);
}
#upro .modal-content.upro-has-bg .upro-tab-btn .fa{color:#fff;}
#upro .modal-content.upro-has-bg .upro-tab-btn.upro-tab-gifts .fa,
#upro .modal-content.upro-has-bg .upro-tab-btn.upro-tab-reactions .fa{
  color:#fff;
}
/* [ADDED] حالة "التبويب المفتوح حاليًا" - نفس شكل الـhover بالظبط، عشان
   يبقى واضح لوحة مين اللي فاتحة تحت دلوقتي (أكورديون ثابت مش نافذة منبثقة) */
#upro .upro-tab-btn.active{
  background:linear-gradient(135deg,#6a82fb,#a685e2);color:#fff;
  border-color:transparent;box-shadow:0 6px 14px rgba(106,130,251,.32);
}
#upro .upro-tab-btn.active .fa{color:#fff;}
#upro .upro-tab-btn.upro-tab-gifts .fa{color:#e91e8c;}
#upro .upro-tab-btn.upro-tab-reactions .fa{color:#f5b301;}
@media (max-width:400px){
  #upro .upro-tabs{gap:6px;margin:0 12px 10px;}
  #upro .upro-tab-btn{font-size:11px;padding:8px 4px;}
}

/* ===== [ADDED] لوحات "نبذة عني" / "الهدايا" / "التفاعلات" (upro-panel):
   لما البروفايل يكون ليه خلفية مخصصة (upro-has-bg بتتحط على modal-content
   من x2.js لما u.p_bg موجودة)، اللوحات كانت لسه بتفضل بخلفية بيضة صلدة
   (#fff) بتغطي على خلفية البروفايل بالكامل - وده اللي بيبان كأن اللوحة
   "بيضة/مخفية" فوق الخلفية. هنا بنطبّق عليها بالظبط نفس معالجة الشفافية
   اللي upro-tab-btn بياخدها فوق (rgba شفاف + blur)، عشان خلفية البروفايل
   تفضل ظاهرة وراها، وبنفتّح ألوان النصوص جواها عشان تفضل مقروءة فوق أي
   خلفية. في الوضع العادي (من غير خلفية مخصصة) اللوحات بتفضل زي ما هي
   بالظبط (خلفية بيضة عادية) - التغيير هنا بيتفعّل بس تحت upro-has-bg. */
#upro .modal-content.upro-has-bg .upro-panel{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.35);
  backdrop-filter:blur(3px);
}
#upro .modal-content.upro-has-bg .upro-panel-body{color:#fff;}
#upro .modal-content.upro-has-bg .upro-gifts-panel .upro-gifts-loading{color:#ff6fb0;}

/* ===== [ADDED] نافذة "الأصدقاء" المنبثقة - نفس أسلوب upro-reactions-overlay/
   upro-admin-overlay بالظبط. المحتوى جواها (fr-card/fr-pager/fr-empty...)
   ياخد تنسيقه من css/friends-ui.css الموجود أصلا في الموقع - إحنا بس بنظبط
   شكل "الكادر" الخارجي (الهيد + الجسم) هنا. ===== */
#upro .upro-friends-overlay{
  position:fixed;inset:0;z-index:2200;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;
}
#upro .upro-friends-modal{
  width:min(92vw,380px);max-height:82vh;background:#fff;border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.35);
}
#upro .upro-friends-modal-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;flex-shrink:0;
  background:linear-gradient(135deg,#6a82fb,#a685e2);color:#fff;font-size:14px;font-weight:700;
}
#upro .upro-friends-modal-title .fa{margin-left:6px;}
#upro .upro-friends-modal-title b{font-weight:700;}
#upro .upro-friends-modal-close{cursor:pointer;font-size:20px;line-height:1;padding:0 4px;}
#upro .upro-friends-modal-sub{
  padding:8px 14px;font-size:12px;color:#6b7280;background:#f9fafb;
  border-bottom:1px solid #f0f0f0;flex-shrink:0;
}
#upro .upro-friends-modal-body{overflow-y:auto;padding:10px;flex:1;min-height:120px;}
#upro .upro-friends-modal .fr-pager{padding:8px 10px;flex-shrink:0;}

/* ===== [ADDED] معاينة "نبذة عني" الثابتة (upro-about-preview) - العنصر
   الوحيد اللي فضل ظاهر دايمًا فوق تبويبات upro-tabs مباشرة (مش أكورديون
   بيتقفل ومش نافذة منبثقة) - بيرجع نفس المساحة اللي كانت موجودة قبل كده
   لما "نبذة عني" كانت مفتوحة دايمًا بالأول، عشان البروفايل يفضل متناسق في
   طوله ("مطوي" صح) بدل فراغ فجائي. مقاسها ثابت (min-height) مهما كان طول
   النص جواها، وبتاخد نفس معاملة الشفافية بتاعت upro-tab-btn بالظبط لما
   البروفايل يكون ليه خلفية مخصصة (upro-has-bg) عشان الخلفية تظهر وراها. */
#upro .upro-about-preview{cursor:pointer;}
#upro .upro-about-preview .upro-about-quote{
  min-height:52px;max-height:90px;overflow-y:auto;
  margin-bottom:12px;box-sizing:border-box;
  transition:transform .2s ease,box-shadow .2s ease;
}
#upro .upro-about-preview:hover .upro-about-quote{
  transform:translateY(-2px);box-shadow:0 6px 14px rgba(106,130,251,.22);
}
#upro .modal-content.upro-has-bg .upro-about-preview .upro-about-quote{
  background:rgba(255,255,255,.16);
  border-right-color:rgba(255,255,255,.6);
  color:#fff;backdrop-filter:blur(3px);
}
#upro .modal-content.upro-has-bg .upro-about-preview .upro-about-quote .fa{color:#fff;}

/* ===== [ADDED] نافذة "نبذة عني" المنبثقة - رجعت Popup تاني (مش لوحة
   ثابتة/أكورديون جوه البروفايل) بنفس أسلوب upro-friends-overlay بالظبط.
   الحالة الكتابية (upro-about-quote) اتنقلت لمعاينة upro-about-preview
   الثابتة فوق upro-tabs (شوف فوق)، فالنافذة دي بقت شايلة بس التفاصيل
   الإضافية (تاريخ الإنشاء/آخر تواجد/اللغة/الدولة/الغرفة). ارتفاعها لسه
   ثابت (height مش max-height) عشان مساحتها متتغيرش وهي بتحمّل (سبينر) ولما
   البيانات توصل، من غير ما الكارت "يقفز"/يتمطط. ===== */
#upro .upro-about-overlay{
  position:fixed;inset:0;z-index:2200;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;
}
#upro .upro-about-modal{
  width:min(92vw,380px);height:360px;background:#fff;border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.35);
}
#upro .upro-about-modal-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;flex-shrink:0;
  background:linear-gradient(135deg,#6a82fb,#a685e2);color:#fff;font-size:14px;font-weight:700;
}
#upro .upro-about-modal-head .fa{margin-left:6px;}
#upro .upro-about-modal-close{cursor:pointer;font-size:20px;line-height:1;padding:0 4px;}
/* flex:1 + الأب بارتفاع ثابت (height:360px فوق) = مساحة البيانات دايمًا
   بنفس الحجم بالظبط أيًا كان طول المحتوى جواها؛ overflow-y:auto بس
   للاحتياط لو محتوى إضافي حصل مستقبلا يبقى أطول من المساحة المتاحة. */
#upro .upro-about-modal-body{flex:1;min-height:0;overflow-y:auto;padding:14px;}
@media (max-width:400px){
  #upro .upro-about-modal{height:min(70vh,360px);}
}

/* ===== [CHANGED] لوحات "نبذة عني" / "الهدايا" / "التفاعلات" بقت أكورديون
   ثابت جوه البروفايل (upro-inline-panels) تحت upro-tabs مباشرة، بدل نوافذ
   منبثقة (مفيش position:fixed ولا خلفية غامقة تاني). لوحة واحدة بس مفتوحة
   في نفس الوقت - upro-panel-open هي اللي بتظهرها (شوف profile-tabs.js).
   [ADDED] min-height بنفس مقاس معاينة "نبذة عني" فوق (upro-about-preview
   .upro-about-quote: min-height:52px) - عشان لما مفيش أي لوحة مفتوحة (زي
   لحظة فتح البروفايل الأول قبل ما تدوس على "الهدايا"/"التفاعلات") يفضل فيه
   فراغ ظاهر بنفس الحجم تحت التابات بدل ما المساحة تتصفّر خالص، فالبروفايل
   يفضل متناسق الطول. ===== */
#upro .upro-inline-panels{
  margin: 0 16px 12px;
  min-height: 150px;
}
#upro .upro-panel{
  display:none;
  background:#fff;border:1px solid #eee;border-radius:12px;
  overflow:hidden;margin-bottom:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
#upro .upro-panel.upro-panel-open{
  display:block;
  animation:uproPanelOpen .22s ease;
}
@keyframes uproPanelOpen{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}
#upro .upro-panel-head{
  display:flex;align-items:center;padding:10px 14px;
  background:linear-gradient(135deg,#6a82fb,#a685e2);color:#fff;
  font-size:13px;font-weight:700;
}
#upro .upro-panel-head .fa{margin-left:6px;}
#upro .upro-panel-body{
  overflow-y:auto;padding:14px;max-height:60vh;min-height:80px;
}

/* لوحة "التفاعلات" - نفس تنسيق الأزرار القديم (ilove/giryo/abucu/ariyor) */
#upro .upro-reactions-panel .upro-reactions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;
}

/* لوحة "الهدايا" - محتواها الفعلي (gift-history-box) بيتنقل هنا من
   profile-tabs.js من غير ما نلمس gift-client.js. بنلغي هنا بس مقاسات/شكل
   النافذة المنبثقة القديمة بتاعته (عرض ثابت وmax-height وظل) عشان يترسم
   كلوحة عادية جوه البروفايل مش كنافذة عايمة، وبنخفي هيدره الداخلي القديم
   لأن اللوحة بتاعتنا فوق (upro-panel-head) بقت هي العنوان. */
#upro .upro-gifts-panel .upro-gifts-loading{
  text-align:center;color:#e91e8c;font-size:18px;padding:20px 0;
}
#uproGiftsPanelBody .gift-history-box{
  width:100% !important;max-height:none !important;
  border-radius:0 !important;box-shadow:none !important;background:transparent !important;
}
#uproGiftsPanelBody .gift-history-head{display:none !important;}
#uproGiftsPanelBody .gift-history-grid{padding:0 0 6px !important;}
#uproGiftsPanelBody .gift-history-pagination{padding:10px 0 4px !important;}

/* الحالة الكتابية - عرض أنيق وخفيف بشكل اقتباس */
#upro .upro-about-quote{
  display:flex;align-items:flex-start;gap:8px;
  padding:10px 12px;margin-bottom:12px;border-radius:10px;
  background:#f7f7fb;border-right:3px solid #a685e2;
  color:#5a5a66;font-size:13px;font-style:italic;line-height:1.7;
}
#upro .upro-about-quote .fa{color:#a685e2;font-size:12px;margin-top:2px;}
#upro .upro-about-quote-text{word-break:break-word;}

/* قائمة المعلومات: تاريخ الإنشاء / آخر تواجد / اللغة / الدولة / الغرفة */
#upro .upro-about-list{display:flex;flex-direction:column;gap:2px;}
#upro .upro-about-row{
  display:flex;align-items:center;gap:8px;
  padding:9px 4px;font-size:12.5px;color:#444;
  border-bottom:1px solid #f0f0f0;
}
#upro .upro-about-row:last-child{border-bottom:none;}
#upro .upro-about-row .fa{width:16px;text-align:center;color:#6a82fb;font-size:13px;}
#upro .upro-about-label{color:#8a8a93;}
#upro .upro-about-value{margin-right:auto;font-weight:700;color:#333;display:flex;align-items:center;}