/* ============================================================
   TLGAWY CHAT V138
   Mobile header + mobile readability + room list/gold room +
   room skin rendering + socket state helpers.
   Loaded last on purpose.
   ============================================================ */

:root{
    --tlg-header-h:58px;
    --tlg-mobile-font:'Tajawal','Cairo',Tahoma,Arial,sans-serif;
    --tlg-gold-1:#fff7d9;
    --tlg-gold-2:#f5d46b;
    --tlg-gold-3:#bf8b00;
    --tlg-gold-text:#b77a00;
}

/* Socket state is intentionally unobtrusive. */
html.tlg-socket-online #chat_head::after,
html.tlg-socket-offline #chat_head::after{
    content:'';
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    bottom:4px;
    left:4px;
    z-index:50;
    pointer-events:none;
}
html.tlg-socket-online #chat_head::after{ background:#35c759; box-shadow:0 0 0 2px rgba(255,255,255,.85); }
html.tlg-socket-offline #chat_head::after{ background:transparent; }

/* ------------------------------------------------------------
   1) MOBILE HEADER — show رسالة / طلب / إشعار / بلاغ
   ------------------------------------------------------------ */
@media screen and (max-width:768px){
    html,body,button,input,textarea,select,
    #show_chat,.chat_message,.chat_tmessage,.mbubble,.bubble,
    #chat_right_data,#chat_left_data,.modal_content{
        font-family:var(--tlg-mobile-font) !important;
    }

    #chat_head{
        position:relative !important;
        display:flex !important;
        direction:ltr !important;
        align-items:stretch !important;
        gap:0 !important;
        height:var(--tlg-header-h) !important;
        min-height:var(--tlg-header-h) !important;
        max-height:var(--tlg-header-h) !important;
        padding:0 4px !important;
        overflow:hidden !important;
        white-space:nowrap !important;
    }

    #chat_head #head_burger{
        order:1 !important;
        display:flex !important;
        flex:0 0 38px !important;
        width:38px !important;
        min-width:38px !important;
        height:58px !important;
        align-items:center !important;
        justify-content:center !important;
    }

    #chat_head .chat_head_logo{
        order:2 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        flex:1 1 auto !important;
        width:auto !important;
        min-width:66px !important;
        max-width:none !important;
        height:58px !important;
        padding:0 2px !important;
        overflow:hidden !important;
    }
    #chat_head .chat_head_logo #main_logo,
    #chat_head #main_logo{
        display:block !important;
        width:auto !important;
        height:40px !important;
        max-width:100% !important;
        max-height:40px !important;
        object-fit:contain !important;
        object-position:left center !important;
    }

    #chat_head #empty_top_mob{
        display:none !important;
        flex:0 0 0 !important;
        width:0 !important;
        min-width:0 !important;
        padding:0 !important;
    }

    #chat_head #get_private{ order:3 !important; }
    #chat_head .mobile_head_extra[onclick*="friendRequest"]{ order:4 !important; }
    #chat_head .mobile_head_extra[onclick*="getNotification"]{ order:5 !important; }
    #chat_head .mobile_head_extra[onclick*="getReport"]{ order:6 !important; }
    #chat_head #main_mob_menu{ order:7 !important; }

    /* The four requested icons are always visible on mobile. */
    #chat_head #get_private,
    #chat_head .mobile_head_extra[onclick*="friendRequest"],
    #chat_head .mobile_head_extra[onclick*="getNotification"],
    #chat_head .mobile_head_extra[onclick*="getReport"]{
        display:flex !important;
        flex:0 0 34px !important;
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        height:58px !important;
        padding:0 !important;
        margin:0 !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:visible !important;
    }

    #chat_head .mobile_head_extra[onclick*="showKobar"],
    #chat_head .mobile_head_extra[onclick*="showRichs"]{
        display:none !important;
    }

    #chat_head .head_option .btable,
    #chat_head .head_option .bcell_mid,
    #chat_head .head_option .notif_zone{
        display:flex !important;
        width:100% !important;
        height:100% !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        line-height:1 !important;
    }
    #chat_head .head_option i{
        display:block !important;
        font-size:18px !important;
        line-height:20px !important;
        margin:0 !important;
    }
    #chat_head .head_option p{
        display:block !important;
        max-width:34px !important;
        margin:2px 0 0 !important;
        padding:0 !important;
        overflow:hidden !important;
        text-overflow:clip !important;
        font-size:8px !important;
        font-weight:700 !important;
        line-height:9px !important;
        text-align:center !important;
    }

    #chat_head #main_mob_menu{
        display:flex !important;
        flex:0 0 40px !important;
        width:40px !important;
        min-width:40px !important;
        max-width:40px !important;
        height:58px !important;
        align-items:center !important;
        justify-content:center !important;
        position:relative !important;
        overflow:visible !important;
    }
    #chat_head #main_mob_menu .avatar_menu{
        display:block !important;
        width:36px !important;
        height:36px !important;
        border-radius:50% !important;
        object-fit:cover !important;
    }
    #chat_head #main_mob_menu .top_status{
        width:13px !important;
        height:13px !important;
        right:0 !important;
        bottom:6px !important;
    }

    /* Bigger and clearer chat text without making the layout bulky. */
    #show_chat .chat_log{
        min-height:48px !important;
        padding-top:5px !important;
        padding-bottom:5px !important;
    }
    #show_chat .chat_message,
    #show_chat .chat_tmessage,
    #show_chat .mbubble,
    #show_chat .bubble{
        font-family:var(--tlg-mobile-font) !important;
        font-size:15.5px !important;
        font-weight:700 !important;
        line-height:1.65 !important;
        letter-spacing:0 !important;
    }
    #show_chat .username{
        font-family:var(--tlg-mobile-font) !important;
        font-weight:800 !important;
        line-height:1.45 !important;
    }
    #show_chat .chat_avatar,
    #show_chat .chat_frame_avatar{
        flex:0 0 42px !important;
        width:42px !important;
        min-width:42px !important;
        height:42px !important;
    }
    #show_chat .chat_avatar .cavatar,
    #show_chat .chat_frame_avatar .cavatar{
        object-fit:cover !important;
    }

    #top_chat_container{
        min-height:58px !important;
    }
    #main_input_box input#content{
        height:48px !important;
        min-height:48px !important;
        padding-inline:16px 48px !important;
        border-radius:999px !important;
        font-size:16px !important;
        font-weight:700 !important;
    }
    #submit_button{
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
        border-radius:50% !important;
    }
    #submit_button i{ font-size:23px !important; }
    #ok_sub_item{ width:42px !important; min-width:42px !important; }

    /* Panels fill the usable screen and remain fast to scroll. */
    #chat_left,#chat_right{
        max-width:100vw !important;
        -webkit-overflow-scrolling:touch !important;
    }
    #chat_left_data,#chat_right_data,.clheight,.panel_data{
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior:contain !important;
    }
}

@media screen and (max-width:380px){
    #chat_head #head_burger{ flex-basis:34px !important; width:34px !important; min-width:34px !important; }
    #chat_head #get_private,
    #chat_head .mobile_head_extra[onclick*="friendRequest"],
    #chat_head .mobile_head_extra[onclick*="getNotification"],
    #chat_head .mobile_head_extra[onclick*="getReport"]{
        flex-basis:30px !important;
        width:30px !important;
        min-width:30px !important;
        max-width:30px !important;
    }
    #chat_head .head_option p{ font-size:7px !important; max-width:30px !important; }
    #chat_head .head_option i{ font-size:17px !important; }
    #chat_head #main_mob_menu{ flex-basis:36px !important; width:36px !important; min-width:36px !important; max-width:36px !important; }
    #chat_head #main_mob_menu .avatar_menu{ width:33px !important; height:33px !important; }
}

/* ------------------------------------------------------------
   2) ROOM LIST — exact compact list placement and Gold room
   ------------------------------------------------------------ */
.v90_room_list_panel,
.v90_room_list{
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
}
.v90_room_row{
    position:relative !important;
    display:flex !important;
    direction:rtl !important;
    align-items:center !important;
    width:100% !important;
    min-height:42px !important;
    margin:0 !important;
    padding:4px 8px !important;
    border:0 !important;
    border-bottom:1px solid rgba(0,0,0,.13) !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    cursor:pointer !important;
}
.v90_room_icon_wrap{
    order:1 !important;
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}
.v90_room_icon{
    width:34px !important;
    height:34px !important;
    border-radius:7px !important;
    object-fit:cover !important;
}
.v90_room_title_wrap{
    order:2 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    padding:0 6px !important;
}
.v90_room_title{
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    font-size:14px !important;
    font-weight:700 !important;
    color:#222 !important;
}
.v90_room_tags{
    display:flex !important;
    gap:3px !important;
    align-items:center !important;
}
.v90_room_count{
    order:3 !important;
    flex:0 0 48px !important;
    min-width:48px !important;
    display:flex !important;
    direction:ltr !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:4px !important;
    font-size:14px !important;
    font-weight:800 !important;
    color:#d31d76 !important;
}
.v90_room_count i{ color:#2f343a !important; font-size:14px !important; }
.v90_room_current{ background:#fffdf5 !important; }

/* Gold room: the row is gold like the sent reference, without recolouring the whole chat. */
.v90_room_row.v90_room_gold{
    background:linear-gradient(90deg,var(--tlg-gold-1),#fffaf0 56%,#fff1b8) !important;
    border-bottom-color:#e1bd53 !important;
}
.v90_room_row.v90_room_gold .v90_room_title{
    color:var(--tlg-gold-text) !important;
    font-weight:900 !important;
}
.v90_room_row.v90_room_gold .v90_room_count,
.v90_room_row.v90_room_gold .v90_room_count i{
    color:#c99800 !important;
}
.v90_room_vip{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:25px !important;
    height:17px !important;
    padding:0 4px !important;
    border-radius:5px !important;
    background:linear-gradient(#ffe98e,#d4a000) !important;
    color:#fff !important;
    font-size:8px !important;
    font-weight:900 !important;
    box-shadow:0 1px 2px rgba(111,74,0,.2) !important;
}

/* ------------------------------------------------------------
   3) USER LIST — effects never recenter avatar/name
   ------------------------------------------------------------ */
#chat_right_data .user_item,
#container_user .user_item,
.v122_ranked_user_list .user_item{
    display:flex !important;
    direction:rtl !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:48px !important;
    padding:4px 7px !important;
    text-align:right !important;
}
#chat_right_data .user_item > .user_item_avatar,
#chat_right_data .user_item > .user_item_frame_avatar_new,
#container_user .user_item > .user_item_avatar,
#container_user .user_item > .user_item_frame_avatar_new,
.v122_ranked_user_list .user_item > .user_item_avatar,
.v122_ranked_user_list .user_item > .user_item_frame_avatar_new{
    order:1 !important;
    position:relative !important;
    flex:0 0 46px !important;
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    margin:0 !important;
    transform:none !important;
    inset:auto !important;
    z-index:3 !important;
}
#chat_right_data .user_item > .user_item_data,
#container_user .user_item > .user_item_data,
.v122_ranked_user_list .user_item > .user_item_data{
    order:2 !important;
    position:relative !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 8px !important;
    transform:none !important;
    inset:auto !important;
    text-align:right !important;
    z-index:3 !important;
}
#chat_right_data .user_item .username,
#container_user .user_item .username,
.v122_ranked_user_list .user_item .username{
    display:inline-block !important;
    max-width:100% !important;
    margin:0 !important;
    transform:none !important;
    text-align:right !important;
}

/* ------------------------------------------------------------
   4) ROOM STYLE / BACKGROUND — generated room skin becomes visible
   ------------------------------------------------------------ */
#global_chat.tlg-room-skin-active #chat_center,
#global_chat.tlg-room-skin-active #container_chat,
#global_chat.tlg-room-skin-active #wrap_chat,
#global_chat.tlg-room-skin-active #warp_show_chat,
#global_chat.tlg-room-skin-active #container_show_chat,
#global_chat.tlg-room-skin-active #inside_wrap_chat,
#global_chat.tlg-room-skin-active #show_chat,
#global_chat.tlg-room-skin-active #show_chat > ul,
#global_chat.tlg-room-skin-active #chat_logs_container{
    background-color:transparent !important;
}
#global_chat.tlg-room-skin-active #show_chat .chat_log:not(.topic_log){
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

/* Fast paint: animations and effects cannot block clicking/scrolling. */
.v136_profile_effect_layer,
.v137_profile_effect_layer,
.v120_user_list_effect_layer,
.v123_chat_name_fx{
    pointer-events:none !important;
}

/* ------------------------------------------------------------
   V138 FINAL OVERRIDES — exact mobile quick actions + all room lists
   ------------------------------------------------------------ */
@media screen and (max-width:768px){
    #chat_head{ overflow:visible !important; }
    #chat_head .tlg_mobile_quick{
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
        position:relative !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        transform:none !important;
        z-index:20 !important;
    }
    #chat_head .tlg_mobile_quick .tlg_mobile_label{
        display:block !important;
        color:inherit !important;
        font-size:8px !important;
        font-weight:800 !important;
        line-height:9px !important;
        white-space:nowrap !important;
    }
    /* Do not let legacy responsive classes hide the four requested icons. */
    #chat_head .tlg_mobile_quick.mobile_head_extra,
    #chat_head #get_private.tlg_mobile_quick{
        display:flex !important;
    }

    /* Faster mobile paint: no expensive per-message blur. */
    #global_chat.tlg-room-skin-active #show_chat .chat_log:not(.topic_log){
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }
    #show_chat .chat_log{
        box-shadow:none !important;
    }
}

/* Gold styling in the classic/lobby room list too. Never recolour the active chat. */
.room_element.room_elem.v100_room_gold,
.v90_room_list .room_element.v100_room_gold{
    background:linear-gradient(90deg,var(--tlg-gold-1),#fffaf0 56%,#fff1b8) !important;
    border-bottom:1px solid #e1bd53 !important;
    box-shadow:none !important;
}
.room_element.room_elem.v100_room_gold .roomtitle,
.v90_room_list .room_element.v100_room_gold .roomtitle{
    color:var(--tlg-gold-text) !important;
    font-weight:900 !important;
}
.room_element.room_elem.v100_room_gold .room_count,
.v90_room_list .room_element.v100_room_gold .room_count{
    color:#c99800 !important;
    font-weight:900 !important;
}
.room_element.room_elem.v100_room_gold .v100_room_gold_badge,
.v90_room_list .room_element.v100_room_gold .v100_room_gold_badge{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:25px !important;
    height:17px !important;
    margin-inline-start:4px !important;
    padding:0 4px !important;
    border-radius:5px !important;
    background:linear-gradient(#ffe98e,#d4a000) !important;
    color:#fff !important;
    font-size:8px !important;
    font-weight:900 !important;
}

/* Keep room backgrounds smooth on phones: transparency without costly blur. */
@media screen and (max-width:768px){
    #global_chat.tlg-room-skin-active #chat_right,
    #global_chat.tlg-room-skin-active #chat_left{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }
}