/* ===== Modern Profile Modal #upro ===== */
#upro.upro-modern .modal-dialog{margin-top:30px;}
#upro.upro-modern .modal-content{
  width:380px;max-width:96vw;border:none;border-radius:18px;overflow:hidden;
  background:#fff;border:1px solid rgba(0,0,0,.05);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  contain:layout paint;
}
/* [ADDED] خلفية البروفايل - تظهر مكان اللون الأبيض بشكل أنيق وخفيف */
#upro.upro-modern .modal-content.upro-has-bg{
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* [ADDED] لما يكون فيه خلفية بروفايل، عناصر الأزرار والصناديق تتحول من أبيض صريح لزجاجي شبه شفاف حتى تظهر الخلفية بوضوح خلفها.
   ملحوظة أداء: تم إزالة backdrop-filter من هنا عمداً — كان بيتفعّل على 6 عناصر منفصلة في نفس الوقت، وده بيسبب لاج شديد خصوصاً
   لما تكون خلفية البروفايل GIF متحركة (كل طبقة كانت بتعيد حساب البلور في كل فريم من فريمات الـ GIF)، ويتضاعف أكتر لما تتفتح
   لوحة الأدوات الإدارية (upro-admin-panel / upro-admin-grid) لأنها بتضيف طبقتين تانيين. زودنا نسبة الشفافية شوية بدل البلور
   عشان الخلفية تفضل واضحة من غيره. */
#upro.upro-modern .modal-content.upro-has-bg .upro-msg{
  background:rgba(255,255,255,.55);
}
#upro.upro-modern .modal-content.upro-has-bg .upro-reactions > a{
  background:rgba(255,255,255,.6);
  border-color:rgba(255,255,255,.5);
}
#upro.upro-modern .modal-content.upro-has-bg .upro-actions{
  background:rgba(255,255,255,.5);
  border-color:rgba(255,255,255,.3);
}
#upro.upro-modern .modal-content.upro-has-bg .upro-actions > span .fa{
  background:rgba(255,255,255,.75);
}
#upro.upro-modern .modal-content.upro-has-bg .upro-info-bar{
  background:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.4);
}
/* [ADDED] أدوات الإدارة اتفصلت خالص عن صورة/GIF الخلفية: مبقتش وارثة أي شفافية أو تعتمد على upro-has-bg،
   دلوقتي دايماً بخلفية صريحة (solid) زي ما هي أصلاً في القواعد الافتراضية تحت (#upro .upro-admin-panel و
   #upro .upro-admin-grid > span). ده معناه لما تفتح الأدوات الإدارية، مفيش أي حاجة محتاجة تتحسب فوق
   خلفية البروفايل المتحركة نهائياً — صفر تكلفة إضافية من الـ GIF وقت فتح اللوحة. */
#upro.upro-modern .modal-content > .modal-body{display:none;}
/* Cover (blurry bg) */
#upro .upro-cover{
  position:relative;height:140px;width:100%;overflow:hidden;background:#222;
}
#upro .upro-cover .u-pic2{
position: absolute;
    inset: -24px;
    background-size: cover;
    background-position: center;
}
#upro .upro-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 60%,rgba(255,255,255,.92) 100%);
}
#upro .upro-close{
  position:absolute;top:10px;left:10px;z-index:5;width:34px;height:34px;border-radius:50%;
  border:none;background:rgba(0,0,0,.45);color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .28s ease;
}
#upro .upro-close:hover{background:rgba(220,53,69,.95);transform:rotate(90deg) scale(1.08);}
#upro .upro-yt-badge{
  position:absolute;top:10px;right:10px;z-index:5;display:none;
  padding:4px 10px;border-radius:14px;background:rgba(255,0,0,.85);color:#fff;
  font-size:11px;font-weight:bold;align-items:center;gap:4px;
}
#upro .upro-yt-badge .fa{font-size:12px;}
/* Head: avatar (left) + name (middle) */
#upro .upro-head{
  position:relative;margin-top:-52px;padding:0 16px 8px;z-index:2;
  display:flex;align-items:center;gap:14px;
}
#upro .upro-avatar-wrap{
  flex-shrink:0;width:96px;height:96px;border-radius:50%;padding:4px;
  background:linear-gradient(135deg,#ffffff,#e8eaf3);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
#upro .upro-avatar{
  width:100%;height:100%;border-radius:50%;
  background-size:cover;background-position:center;background-color:#393939;
  cursor:pointer;border:3px solid #fff;transition:transform .3s ease;
}
#upro .upro-avatar:hover{transform:scale(1.06);}
#upro .upro-id{flex:1;min-width:0;padding-top:50px;}
#upro .upro-id .modal-title{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:17px;font-weight:700;color:#1f2937;max-width:100%;padding:0;margin:0;
  line-height:1.35;word-break:break-word;
}
#upro .upro-id .modal-title img:first-child{display:none;}
#upro .upro-id .modal-title .u-ico{width:18px;height:18px;}
#upro .upro-stars{display:flex;gap:1px;color:#ddd;font-size:11px;margin-top:3px;}
#upro .upro-stars .star{display:inline-flex;gap:1px;}
#upro .upro-stars .star i{color:#f5b301;}
#upro .upro-meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:11px;color:#6b7280;align-items:center;
}
#upro .upro-meta .u-co{
  display:inline-flex;align-items:center;gap:4px;background:#f3f4f6;
  padding:2px 8px;border-radius:10px;
}
#upro .upro-meta .u-room{display:inline-flex;align-items:center;}
#upro .upro-meta .timetoday,#upro .upro-meta .pointtop{font-size:10px;color:#9ca3af;}
/* Status message */
#upro .upro-msg{
  margin:4px 16px 12px;padding:10px 12px;
  background:linear-gradient(135deg,#f9fafb,#f3f4f6);border-right:3px solid #6a82fb;
  border-radius:8px;color:#374151;font-size:13px;text-align:center;min-height:18px;
}
/* Reactions row */
#upro .upro-reactions{
  display:flex;justify-content:center;gap:6px;padding:0 12px 10px;flex-wrap:wrap;
}
#upro .upro-reactions > a{
  padding:6px 12px;border-radius:18px;font-size:12px;font-weight:600;
  border:1px solid #e5e7eb;background:#fff;cursor:pointer;
  transition:all .25s ease;text-decoration:none;color:#374151;
}
#upro .upro-reactions > a:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12);border-color:#cbd5e1;}
#upro .upro-reactions .ilove{color:#e74c3c;}
#upro .upro-reactions .giryo{color:#444;}
#upro .upro-reactions .abucu{color:#ec407a;}
#upro .upro-reactions .ariyor{color:#2196f3;}
/* Main actions row - icons spread: first far right, last far left */
#upro .upro-actions{
  display:flex;justify-content:space-between;padding:14px 22px;gap:8px;
  background:#f9fafb;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;
}
#upro .upro-actions > span{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#374151;
  cursor:pointer;
  /* padding:6px 4px; */
  border-radius:10px;
  transition:all .25s ease;
  flex:0 0 auto;
}
#upro .upro-actions > span .fa{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:#f0f2f5;box-shadow:0 2px 6px rgba(0,0,0,.10);color:#6a82fb;
  border:1px solid rgba(0,0,0,.06);transition:all .25s ease;
}
#upro .upro-actions > span:hover{transform:translateY(-2px);}
#upro .upro-actions > span:hover .fa{
  background:linear-gradient(135deg,#6a82fb,#a685e2);color:#fff;
  border-color:transparent;box-shadow:0 6px 14px rgba(106,130,251,.38);
}
@keyframes ulike-pop{0%{transform:scale(1);}40%{transform:scale(1.25);}100%{transform:scale(1);}}
/* [MOVED] أيقونة التنبيه (unot) + أيقونة الإعجاب/القلب (ulike) - كانوا جوه
   صف upro-actions، دلوقتي منقولين لغلاف البروفايل (upro-cover) تحت شارة
   اليوتيوب مباشرة، كدوائر زجاجية خفيفة عائمة فوق الغلاف بدل صف تحتي منفصل */
#upro .upro-cover-actions{
  position:absolute;top:48px;right:10px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
#upro .upro-cover-actions > span{
  position:relative;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);
  box-shadow:0 3px 10px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.6);
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
#upro .upro-cover-actions > span:hover{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
#upro .upro-cover-actions > span:active{transform:scale(.94);}
#upro .upro-cover-actions .fa{font-size:14px;transition:color .25s ease;}
#upro .upro-cover-actions .unot .fa{color:var(--theme-btcolor,#6a82fb);}
#upro .upro-cover-actions .unot:hover{background:var(--theme-btcolor,#6a82fb);}
#upro .upro-cover-actions .unot:hover .fa{color:#fff;}
#upro .upro-cover-actions .ulike .fa{color:#e74c3c;}
#upro .upro-cover-actions .ulike:hover,
#upro .upro-cover-actions .ulike.liked{
  background:linear-gradient(135deg,#e74c3c,#c0392b);
}
#upro .upro-cover-actions .ulike:hover .fa,
#upro .upro-cover-actions .ulike.liked .fa{color:#fff;animation:ulike-pop .35s ease;}
/* عداد الإعجابات - فقاعة صغيرة عند طرف الدائرة */
#upro .upro-cover-actions .ulike-count{
  position:absolute;top:-4px;left:-4px;min-width:16px;height:16px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  background:#e0a100;color:#fff;font-size:9px;font-weight:700;
  border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.25);border:2px solid #fff;
  line-height:1;
}
#upro .upro-cover-actions .ulike-count:empty,
#upro .upro-cover-actions .ulike-count[data-count="0"]{display:none;}
@media (max-width:400px){
  #upro .upro-cover-actions{top:44px;right:8px;gap:6px;}
  #upro .upro-cover-actions > span{width:30px;height:30px;}
  #upro .upro-cover-actions .fa{font-size:12px;}
}
/* Info bar above admin toggle */
#upro .upro-info-bar{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:10px 14px 4px;padding:8px 12px;
  background:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px;font-size:12px;
}
#upro .upro-info-bar:empty{display:none;}
#upro .upro-info-bar .u-co{
  display:inline-flex;align-items:center;gap:5px;color:#374151;font-weight:600;
}
#upro .upro-info-bar .u-room{
  display:inline-flex;align-items:center;color:#0d6efd;font-weight:600;
}
#upro .upro-info-bar .u-room:empty{display:none;}
#upro .upro-info-bar .u-co:empty{display:none;}
#upro .upro-actions .upm .fa{color:#0d6efd;}
#upro .upro-actions .ugift .fa{color:#9b59b6;}
/* Social icons */
#upro .upro-social{
  padding:12px 14px;display:none;flex-direction:row;justify-content:center;align-items:center;gap:12px;
  border-bottom:1px solid #f0f0f0;
}
/* Force horizontal layout even when jQuery .show() sets display:block */
#upro .upro-social[style*="display: block"],
#upro .upro-social[style*="display:block"]{
  display:flex !important;flex-direction:row !important;
}
#upro .upro-social a{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;text-decoration:none;
  transition:all .3s cubic-bezier(.2,.9,.3,1.2);
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}
#upro .upro-social a:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 8px 18px rgba(0,0,0,.22);}
#upro .upro-social .social-fb-link{background:#1877f2;}
#upro .upro-social .social-tg-link{background:#2196f3;}
#upro .upro-social .social-wa-link{background:#25d366;}
/* [ADDED] مشغل اغنية البروفايل - أنيق وخفيف */
#upro .upro-song-player{
  display:none;align-items:center;gap:10px;
  margin:0 14px 10px;padding:8px 10px;border-radius:14px;
  background:linear-gradient(135deg,#6a11cb 0%,#2575fc 100%);
  box-shadow:0 4px 14px rgba(37,117,252,.28);
}
#upro .upro-song-player.playing{display:flex;}
#upro .upro-song-eq{display:flex;align-items:flex-end;gap:2px;width:16px;height:16px;flex-shrink:0;}
#upro .upro-song-eq span{
  display:block;width:3px;height:100%;background:#fff;border-radius:2px;
  transform-origin:bottom center;
  animation:upro-eq 0.9s ease-in-out infinite;opacity:.9;
}
/* [ADDED] الأداء: بدل ما نغير height (بيعمل reflow/layout كل فريم طول ما الأغنية شغالة)، بقينا نغير
   transform:scaleY بس (ده بيتعالج على الـ GPU مباشرة من غير أي reflow ولا repaint للعناصر اللي حواليه) */
#upro .upro-song-eq span:nth-child(1){animation-delay:0s;}
#upro .upro-song-eq span:nth-child(2){animation-delay:.15s;}
#upro .upro-song-eq span:nth-child(3){animation-delay:.3s;}
#upro .upro-song-eq span:nth-child(4){animation-delay:.45s;}
#upro .upro-song-player:not(.playing) .upro-song-eq span{animation-play-state:paused;transform:scaleY(.2);}
@keyframes upro-eq{0%,100%{transform:scaleY(.2);}50%{transform:scaleY(1);}}
#upro .upro-song-play{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;
  cursor:pointer;flex-shrink:0;transition:background .2s;
}
#upro .upro-song-play:hover{background:rgba(255,255,255,.35);}
#upro .upro-song-info{flex:1;min-width:0;}
#upro .upro-song-title{
  color:#fff;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-bottom:4px;
}
#upro .upro-song-progress{width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;}
#upro .upro-song-progress-fill{height:100%;width:0%;background:#fff;border-radius:2px;transition:width .2s linear;}
#upro .upro-song-mute{color:#fff;font-size:13px;cursor:pointer;opacity:.85;flex-shrink:0;}
#upro .upro-song-mute:hover{opacity:1;}
/* [ADDED] زر الثلاث نقط (بديل زرار "أدوات إدارية" الثابت + مكان زرار متجر
   الهدايا اللي كانوا ظاهرين دايما) - دائرة خفيفة زجاجية جنب زرار الإغلاق */
#upro .upro-more-btn{
  position:absolute;top:10px;left:52px;z-index:5;width:34px;height:34px;border-radius:50%;
  border:none;background:rgba(0,0,0,.45);color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s ease;
}
#upro .upro-more-btn:hover{background:rgba(106,130,251,.9);transform:scale(1.06);}
/* [ADDED] القائمة المنبثقة الصغيرة (متجر الهدايا / أدوات إدارية) - خفيفة، مفيش
   فيها أي تحميل بيانات، مجرد روابط بتفتح النوافذ المنبثقة الفعلية */
#upro .upro-more-menu{
  position:absolute;top:48px;left:10px;z-index:20;min-width:168px;
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.22);border:1px solid rgba(0,0,0,.06);
  animation:uproMoreMenuIn .16s ease;
}
@keyframes uproMoreMenuIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
#upro .upro-more-item{
  display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:13px;font-weight:600;
  color:#374151;cursor:pointer;transition:background .18s ease;white-space:nowrap;
}
#upro .upro-more-item + .upro-more-item{border-top:1px solid #f0f0f0;}
#upro .upro-more-item:hover{background:#f5f6fb;color:#6a82fb;}
#upro .upro-more-item .fa{width:16px;text-align:center;color:#6a82fb;}
#upro .upro-more-item.upro-more-admin .fa{color:#dc3545;}
#upro .upro-more-item.upro-more-admin:hover{background:#fdf2f3;color:#dc3545;}

/* [CHANGED] أدوات الإدارة بقت نافذة منبثقة (Popup) مستقلة بدل لوحة منسدلة -
   نفس أسلوب gift-shop-overlay/box بالظبط عشان الاتساق البصري مع باقي نوافذ الموقع.
   المحتوى جواها (upro-admin-panel وما فيها) بيتحقن أول مرة بس تتفتح فعليا
   (injectAdminOnlyPanelDom في x2.js) - صفر تكلفة لو المستخدم مفتحهاش خالص. */
#upro .upro-admin-overlay{
  position:fixed;inset:0;z-index:2200;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;
}
#upro .upro-admin-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-admin-modal-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;flex-shrink:0;
  background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff;font-size:14px;font-weight:700;
}
#upro .upro-admin-modal-title .fa{margin-left:6px;}
#upro .upro-admin-modal-close{cursor:pointer;font-size:20px;line-height:1;padding:0 4px;}
#upro .upro-admin-modal-body{overflow-y:auto;padding:10px;flex:1;contain:layout paint;}
/* لوحة الأدوات نفسها بقت دايما ظاهرة جوه النافذة المنبثقة - التحكم في
   الظهور/الاختفاء بقى على مستوى upro-admin-overlay مش عليها هي */
#upro .upro-admin-panel{display:block;padding:0;margin:0;border:none;background:transparent;}
#upro .upro-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
#upro .upro-admin-grid > span{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 6px;font-size:11px;font-weight:600;border-radius:8px;
  background:#fff;border:1px solid #e5e7eb;cursor:pointer;color:#374151;
  transition:all .2s ease;text-align:center;
}
#upro .upro-admin-grid > span:hover{background:#f3f4f6;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.06);}
#upro .upro-admin-grid > span .fa{font-size:13px;}
#upro .upro-admin-grid .ukick,#upro .upro-admin-grid .uban,#upro .upro-admin-grid .udelpic{color:#dc3545;}
#upro .upro-admin-grid .meiut,#upro .upro-admin-grid .meiutbc{color:#f39c12;}
#upro .upro-admin-grid .uh,#upro .upro-admin-grid .ureport{color:#0d6efd;}
#upro .upro-admin-grid .umute{color:#6c757d;}
#upro .upro-admin-grid .uunmute{color:#198754;}
#upro .upro-admin-grid .ubnr{color:#e83e8c;}
#upro .upro-admin-grid .urkick{color:#6f42c1;}
#upro .upro-admin-grid .umod{display:none;}
#upro .upro-admin-sections{margin-top:8px;}
#upro .upro-admin-sections > div{
  background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:8px;margin-bottom:6px;font-size:11px;
}
#upro .upro-admin-sections label{font-weight:700;color:#374151;display:block;margin-bottom:4px;}
#upro .upro-admin-sections input,
#upro .upro-admin-sections select,
#upro .upro-admin-sections textarea{
  width:100%;padding:5px 8px;border:1px solid #d1d5db;border-radius:6px;font-size:11px;
  box-sizing:border-box;
}
#upro .upro-admin-sections .btn{padding:5px 10px;font-size:11px;border-radius:6px;cursor:pointer;margin-top:4px;}
#upro .upro-admin-sections .nickbox .u-topic{height:32px;resize:none;}
#upro .upro-admin-sections .powerbox #upsearch{margin-bottom:4px;}
#upro .upro-admin-sections .powerbox .userpower,
#upro .upro-admin-sections .roomzbox .roomz{margin-bottom:4px;}
#upro .upro-admin-sections .roomzbox .rpwd{margin-bottom:4px;}
@media (max-width:400px){
  #upro.upro-modern .modal-content{width:96vw;}
  #upro .upro-head{gap:10px;padding:0 12px 6px;}
  #upro .upro-avatar-wrap{width:80px;height:80px;}
  #upro .upro-id .modal-title{font-size:15px;}
  #upro .upro-admin-grid{grid-template-columns:1fr;}
}

/* ===== [ADDED] الحائط (Wall) - نفس روح تصميم البروفايل المودرن =====
   ملحوظة مهمة: كل القواعد هنا متحصورة جوه #wall / #d2bc عشان ما تأثرش على رسائل الغرف أو
   الخاص، لأنهم بيستخدموا نفس قالب الرسالة (.uzr) اللي بيستخدمه الحائط. */
#wall{
  background:linear-gradient(180deg,#f5f6fa 0%,#eef0f6 100%);
}
#wall.active{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
/* الشريط العلوي وشريط بحث اليوتيوب ثابتين وما بيتحركوش */
#wall > .top.wall{flex:0 0 auto!important;}
#wall > .youtubeSearch{flex:0 0 auto!important;}
/* منطقة الرسائل هي الوحيدة اللي بتعمل سكرول - وده اللي بيمنع نزول صندوق الكتابة */
#wall #d2bc{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  position:relative!important;
}
/* صندوق الكتابة ثابت في مكانه دايمًا في اخر العمود - مفيش absolute تاني يعمل انزلاق */
#wall .tablebox{
  flex:0 0 auto!important;
  position:static!important;
  width:100%!important;
}
#wall .top.wall{
  border-radius:0 0 12px 12px!important;
  box-shadow:0 3px 10px rgba(0,0,0,.10);
  background:linear-gradient(135deg,var(--theme-btcolor),var(--theme-btcolor))!important;
  display:flex!important;align-items:center;justify-content:center;gap:6px;
  font-size:12px!important;font-weight:800!important;
  height:34px!important;min-height:34px!important;
}
#wall .top.wall .fa{font-size:13px!important;}
#wall .youtubeSearch > div:first-child{
  border-radius:12px;margin:6px 8px;width:calc(100% - 16px);
  box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid #eee!important;
}
#wall .youtubeSearch .form-control.youtubeVal{
  border-radius:10px;background:#f5f6fa;border:1px solid #e5e7eb;
}
/* ===== [ADDED] صور الأعضاء في الغرفة العامة (#d2) - دائرية وأصغر حجمًا ===== */
#d2 .uzr.uhtml .u-pic,
#d2 .uzr .u-pic{
  border-radius:50%!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  background-size:cover!important;
  background-position:center!important;
}
#d2bc{padding:10px 8px 4px;box-sizing:border-box;}
/* بطاقة الرسالة */
#d2bc .uzr.d-flex{
  background:#fff!important;
  border:1px solid #eef0f4!important;
  border-radius:14px!important;
  margin:0 0 10px!important;
  padding:9px 10px 8px!important;
  box-shadow:0 3px 10px rgba(20,20,40,.05);
  transition:box-shadow .25s ease, transform .25s ease;
}
#d2bc .uzr.d-flex:hover{
  box-shadow:0 8px 20px rgba(20,20,40,.10);
  transform:translateY(-1px);
}
/* الصورة الشخصية */
#d2bc .uzr .u-pic{
  border-radius:50%!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 2px #eef0f6,0 4px 10px rgba(0,0,0,.08)!important;
  min-width:46px!important;width:46px!important;height:46px!important;
  margin-left:8px;
}
/* اسم العضو */
#d2bc .uzr .u-topic{
  border-radius:8px!important;
  font-weight:700!important;
  padding:2px 9px!important;
}
/* الوقت */
#d2bc .uzr .tago{
  background:#f3f4f7!important;border-radius:10px!important;
  padding:2px 8px!important;color:#9aa0ac!important;font-weight:600!important;
}
/* نص الرسالة */
#d2bc .uzr .u-msg{
  color:#333d4d!important;line-height:1.55!important;font-size:13.5px;padding-top:4px!important;
  overflow:visible!important;
}
#d2bc .uzr.flex-fill{overflow:visible!important;}
/* صندوق الرد المقتبس */
#d2bc .uzr .u-rply .grid-container{
  background:#f7f8fb!important;border-radius:10px!important;
  border-left:4px solid var(--theme-btcolor)!important;
  padding:8px 10px!important;box-shadow:none!important;
}
/* أزرار لايك / رد / حذف - أيقونات دائرية عصرية */
#d2bc .uzr .blike,#d2bc .uzr .breply,#d2bc .uzr .bdel{
  width:26px!important;height:26px!important;border-radius:50%!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  padding:0!important;font-size:11px!important;border:none!important;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
  transition:transform .2s ease, box-shadow .2s ease;
}
#d2bc .uzr .blike:hover,#d2bc .uzr .breply:hover,#d2bc .uzr .bdel:hover{
  transform:translateY(-2px) scale(1.08);
}
#d2bc .uzr .blike{background:#fde8ea!important;color:#e74c3c!important;}
#d2bc .uzr .breply{background:#e7f0ff!important;color:#2f6fed!important;}
#d2bc .uzr .bdel{background:#f2f2f4!important;color:#8a8f98!important;}
/* شريط كتابة الحائط موحّد الآن مع بقية الصناديق عبر #modernBottomToolbarDesign في أعلى الملف */