/* Integration-only layout adjustments; product styles remain in css/. */
#room_mic_ui{position:relative;flex-shrink:0;min-width:0}
#private_typing{font-size:12px;padding:3px 8px}
#show_chat{margin:0;padding:0;list-style:none}
#chat_logs_container{margin:0;padding:0;list-style:none}
#container_call{display:none}
#vcall_streams video{width:100%;height:100%;object-fit:cover}
.control11-call-page{margin:0;height:100dvh;overflow:hidden}

/* Offscreen draggable panels must not increase the mobile document width. */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}

/* Place scrollbars on the right without reversing Arabic content. */
#right_panel_bar{direction:ltr!important;}
#show_chat,#private_content,#chat_right_data,#chat_left_data,
.modal_back,.story_comments_list,.story_modal_list,
.float_content,.emo_content,.clheight,.crheight{
    direction:ltr!important;
}
html[dir="rtl"] #show_chat > *,
html[dir="rtl"] #private_content > *,
html[dir="rtl"] #chat_right_data > *,
html[dir="rtl"] #chat_left_data > *,
html[dir="rtl"] .modal_back > *,
html[dir="rtl"] .story_comments_list > *,
html[dir="rtl"] .story_modal_list > *,
html[dir="rtl"] .float_content > *,
html[dir="rtl"] .emo_content > *{direction:rtl;}
#story_tray{
    direction:ltr!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
}
#story_tray .story_item{direction:rtl;flex-shrink:0;}

/* Header and footer navigation use the current native menu handlers. */
#chat_head .v11_head_named{width:44px;white-space:nowrap;}
#chat_head .v11_head_label{font-size:10px;line-height:14px;margin:2px 0 0;}
#my_menu .footer_item{width:55px;text-align:center;}
#my_menu .footer_item p{font-size:11px;line-height:14px;margin:2px 0 0;white-space:nowrap;}
.stk_panel{max-height:260px;overflow-y:auto;direction:ltr;padding:8px;}
.stk_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(65px,1fr));gap:6px;}
.stk_item{position:relative;min-height:65px;cursor:pointer;}
.stk_img{width:100%;height:65px;object-fit:contain;}
.stk_del_btn{position:absolute;top:0;right:0;}
.stk_add_tile{display:flex;align-items:center;justify-content:center;}
@media(max-width:600px){
 #chat_head .v11_head_named{width:36px;}
 #chat_head .head_option{font-size:16px;}
 #chat_head .v11_head_label{font-size:9px;}
 #my_menu .footer_item{width:48px;}
}

#my_menu{display:flex!important;direction:rtl;align-items:center;}
#my_menu > .footer_item{flex:0 0 52px;order:6;}
#my_menu > .bcell_mid{flex:1;order:5;}
#my_menu #footer_options{order:0;}
#my_menu #footer_friends{order:1;}
#my_menu #rlist_open{order:2;}
#my_menu #footer_rooms{order:3;}
#my_menu #footer_radio{order:4;}
.superstar-room-tools{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;direction:rtl;}
.superstar-room-tools .glob_rname{font-size:12px;overflow:hidden;text-overflow:ellipsis;}
.superstar-room-tools button{flex-shrink:0;cursor:pointer;padding:6px;}

/* Center footer buttons and define explicit desktop/mobile header variants. */
#my_menu{height:50px;align-items:stretch!important;}
#my_menu > .footer_item{display:flex!important;flex-direction:column;align-items:center;justify-content:center;height:50px;padding:0!important;box-sizing:border-box;}
#my_menu > .footer_item .i_btm{display:block;line-height:22px;margin:0;}
#my_menu > .footer_item p{margin:0!important;line-height:14px;}
#room_options_menu{position:fixed!important;left:8px!important;right:auto!important;top:100px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 120px);overflow-y:auto;}
@media(min-width:801px){#chat_head .superstar-mobile-nav{display:none!important;}#chat_head .superstar-desktop-logo{display:table-cell!important;}}
@media(max-width:800px){#chat_head .superstar-desktop-logo{display:none!important;}#chat_head .superstar-mobile-nav{display:table-cell!important;}}

/* Preserve the stream controls' hidden state after footer flex alignment. */
#my_menu > .footer_item.streamhide,
#my_menu > .footer_item.privhide,
#my_menu > .footer_item.fhide{display:none!important;}
#my_menu > .footer_item img{display:block;width:26px;height:26px;object-fit:contain;max-width:100%;}

/* Keep the microphone stage independent from room header colors. */
#story_tray .story_self_add{flex:0 0 64px!important;}
#story_tray .story_self_add .story_self:after{display:flex!important;visibility:visible!important;opacity:1!important;}

#my_menu #footer_radio{order:99!important;margin-inline-start:auto;}

/* Keep the supplied microphone UI, without a full-width header or reserved strip. */
#chat_toping{background:transparent!important;border:0!important;box-shadow:none!important;}
#room_mic_ui{position:relative;width:max-content!important;max-width:100%!important;margin:0 auto!important;pointer-events:auto;background:transparent!important;}
#room_mic_ui > .panel_top{width:max-content!important;max-width:100%!important;margin:0 auto!important;background:rgba(255,255,255,.20)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;}
#room_mic_ui #mic-container{width:max-content!important;max-width:100%!important;}

/* Keep folding deterministic, including after the mic seats are rebuilt. */
#room_mic_ui.mic-container-folded #mic-container{display:none!important;}
#room_mic_ui .mic-toggle-container{position:relative;z-index:102;pointer-events:auto;}
#room_mic_ui .mic-fold-btn{pointer-events:auto;touch-action:manipulation;}
#room_mic_ui > .panel_top{overflow:visible!important;}