/* ===== قائمة المتصلين: نفس أبعاد التصميم المرجعي (صورة 773px عرض) =====
   كل الأبعاد بوحدة --u = (عرض لوحة القايمة / 773). بيتظبط تلقائياً بـ JS
   (js/function_story.js) فالشكل بيطلع بنفس النسب على أي عرض شاشة. */
#container_user{padding-left:calc(var(--u,.53px)*5) !important;padding-right:calc(var(--u,.53px)*5) !important;padding-top:calc(var(--u,.53px)*10) !important;}

/* --- شريط Story List --- */
#container_user .story_box{margin:0 calc(var(--u,.53px)*22) calc(var(--u,.53px)*26) calc(var(--u,.53px)*22);}
#container_user .story_title{background:#8d44ad;color:#fff;font-weight:bold;font-size:max(13px,calc(var(--u,.53px)*37));line-height:calc(var(--u,.53px)*70);height:calc(var(--u,.53px)*70);border-radius:calc(var(--u,.53px)*16);margin-bottom:calc(var(--u,.53px)*22);padding:0;text-align:center;}
#container_user .story_strip{display:flex;gap:calc(var(--u,.53px)*50);padding:calc(var(--u,.53px)*13) calc(var(--u,.53px)*39);background:#cfb896;border-radius:calc(var(--u,.53px)*46);overflow-x:auto;overflow-y:hidden;}
#container_user .story_ring{width:calc(var(--u,.53px)*126);height:calc(var(--u,.53px)*126);padding:calc(var(--u,.53px)*4);}
#container_user .story_ring img{border-width:calc(var(--u,.53px)*3);}
#container_user .story_plus{font-size:max(14px,calc(var(--u,.53px)*44));}

/* --- شريط "متصلين الآن" الأخضر --- */
#container_user .user_count{background:#008000 !important;color:#fff;border-radius:calc(var(--u,.53px)*12) !important;height:calc(var(--u,.53px)*68);padding:0 !important;margin:0 0 calc(var(--u,.53px)*28) 0 !important;font-size:max(13px,calc(var(--u,.53px)*36)) !important;display:flex !important;align-items:center;justify-content:center;}
#container_user .user_count .bcell{display:flex;align-items:center;justify-content:center;gap:calc(var(--u,.53px)*12);width:auto;font-weight:bold;}
#container_user .user_count .ucount,#container_user .user_count .ucount.theme_btn{background:transparent !important;padding:0 !important;font-size:max(13px,calc(var(--u,.53px)*36)) !important;color:#fff !important;border-radius:0;}
#container_user .user_count .bcell .fa{font-size:max(13px,calc(var(--u,.53px)*38));}

/* --- كارت العضو --- */
#container_user .user_item{display:table;table-layout:fixed;width:100%;box-sizing:border-box;
/* [PERF] الصفوف اللي بره الشاشة بيتخطى تنسيقها ورسمها كليًا — فرق ضخم
   مع قايمات المتصلين الكبيرة (المتصفحات اللي مش بتدعمها بتتجاهلها ببساطة) */
content-visibility:auto;contain-intrinsic-size:auto 72px;}
/* من غير خلفية للكارت: صف مسطح بخط فاصل (الشكل الافتراضي) */
#container_user .user_item:not(.ucard_bg):not(.ucard_color){padding:calc(var(--u,.53px)*14) calc(var(--u,.53px)*14) calc(var(--u,.53px)*14) calc(var(--u,.53px)*28) !important;margin-bottom:0 !important;border-radius:0 !important;border-bottom:1px solid rgba(127,127,127,.25) !important;box-shadow:none;background-color:transparent;}
/* لو العضو حاطط خلفية/لون للكارت: كارت مدوّر منفصل */
#container_user .user_item.ucard_bg,#container_user .user_item.ucard_color{padding:calc(var(--u,.53px)*10) calc(var(--u,.53px)*14) calc(var(--u,.53px)*10) calc(var(--u,.53px)*28) !important;margin-bottom:calc(var(--u,.53px)*14) !important;border-radius:calc(var(--u,.53px)*20) !important;box-shadow:0 calc(var(--u,.53px)*4) calc(var(--u,.53px)*12) rgba(0,0,0,.20);}
/* الصورة العادية (من غير إطار): 100 */
#container_user .user_item .user_item_avatar{width:calc(var(--u,.53px)*100);}
#container_user .user_item .user_item_avatar .acav{width:calc(var(--u,.53px)*100);height:calc(var(--u,.53px)*100);border-width:calc(var(--u,.53px)*4);border-style:solid;box-sizing:border-box;object-fit:cover;}
/* الصورة بإطار متحرك: الإطار 126 والصورة جواه 94 والكارت بيطلع ~155 */
#container_user .user_item .user_item_frame_avatar_new{width:calc(var(--u,.53px)*135) !important;height:calc(var(--u,.53px)*135) !important;}
#container_user .user_item .user_item_frame_avatar_new > img.ul_fr_av{width:calc(var(--u,.53px)*94) !important;height:calc(var(--u,.53px)*94) !important;}
#container_user .user_item .user_item_frame_avatar_new > img.ul_fr_bg{width:calc(var(--u,.53px)*126) !important;height:calc(var(--u,.53px)*126) !important;}
/* إطار الجراديانت (av_border) */
#container_user .user_item .grad_bigger_border{width:calc(var(--u,.53px)*100) !important;height:calc(var(--u,.53px)*100) !important;padding:calc(var(--u,.53px)*4);}
#container_user .user_item .grad_bigger_border > img{width:calc(var(--u,.53px)*92) !important;height:calc(var(--u,.53px)*92) !important;}
#container_user .user_item .list_status{width:calc(var(--u,.53px)*28);height:calc(var(--u,.53px)*28);}

/* الاسم والحالة */
#container_user .user_item .user_item_data{padding:0 calc(var(--u,.53px)*18);}
#container_user .user_item .username{font-size:max(13px,calc(var(--u,.53px)*38));line-height:1.25;}
#container_user .user_item .list_mood{font-size:max(10px,calc(var(--u,.53px)*27));line-height:1.3;}

/* التاج (الرتبة) والعلم */
#container_user .user_item .user_item_icon{width:auto;padding:0 calc(var(--u,.53px)*8);}
#container_user .user_item .icrank{width:calc(var(--u,.53px)*70);}
#container_user .user_item .list_rank,#container_user .user_item .list_xprank_icon{height:calc(var(--u,.53px)*44);width:auto;}
#container_user .user_item .icflag{width:calc(var(--u,.53px)*70);}
#container_user .user_item .list_flag{width:calc(var(--u,.53px)*58);height:calc(var(--u,.53px)*38);border-radius:calc(var(--u,.53px)*4);object-fit:cover;}

/* ===== قائمة الغرف: نفس مقاسات التصميم المرجعي (لوحة 293px) ===== */
#chat_left_data .chat_rlist{padding:0 !important;}
#chat_left_data .chat_rlist > .vpad5{padding:6px 8px !important;}
#chat_left_data .room_filters{padding:0 8px 6px 8px !important;}
#container_room{padding-top:0 !important;}
#container_room .rc_row{display:flex !important;flex-direction:row;direction:rtl;align-items:center;gap:8px;padding:5px 8px !important;min-height:42px;box-sizing:border-box;border-bottom:1px solid rgba(127,127,127,.3);}
#container_room .rc_icon{flex:0 0 31px;width:31px;height:31px;}
#container_room .rc_icon img.room_cicon{width:31px;height:31px;border-radius:4px;object-fit:cover;display:block;}
#container_room .rc_name{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#container_room .rc_meta{flex:0 0 auto;direction:ltr;display:flex;align-items:center;gap:4px;}
#container_room .rc_tag{display:inline-flex;}
#container_room .rc_tag img,#container_room .rc_tag .room_ctag{width:15px;height:15px;}
#container_room .rc_users{width:15px;height:15px;opacity:.75;}
#container_room .rc_count{font-size:14px;font-weight:700;opacity:.65;min-width:16px;}