
#chat_box.user {
  grid:
    ' back        user        close       ' auto
    ' room_name   room_name   room_name   ' auto
    ' panel_user  panel_user  panel_user  ' 1fr
    / auto        1fr         auto        ;
}
#chat_box.user .chat_item#chat_back,
#chat_box.user .chat_item#chat_user,
#chat_box.user .chat_item#chat_close,
#chat_box.user .chat_item#chat_panel_user {
	display: flex;
}


/* title "user" appearance
*/
#chat_box.user .chat_item.chat_user {
	text-align: center;
}


/* for line height
*/
#chat_box.user .chat_item.chat_panel_user {
	margin-top: -5px;
}


/* room_name appearance
*/
#chat_box.user button.chat_item#chat_room_name {
	background-color: transparent;
	border-top: 1px solid black;
}


/* back btn
*/
#chat_box.user      .chat_item.chat_back button.back_home     {display: flex;}
/* from settings */
#chat_box._settings .chat_item.chat_back button.btn           {display: none;}
#chat_box._settings .chat_item.chat_back button.back_settings {display: flex;}
/* from room settings */
#chat_box._room_set .chat_item.chat_back button.btn           {display: none;}
#chat_box._room_set .chat_item.chat_back button.back_room_set {display: flex;}


/* buttons appearance
*/
#chat_box.user .chat_item.chat_panel_user .chat_user_btn_wrapper {
	margin: 0px auto;
}
#chat_box.user .chat_item.chat_panel_user button {
	margin: 10px;
}
#chat_box.user #chat_user_admin {
	margin: 0px;
}


/* toggle buttons according to chat_box class
*/
/* block/unblock */
#chat_box.user                  #chat_user_unblock {display: none;}
#chat_box.user._blocked         #chat_user_block   {display: none;}
#chat_box.user._blocked         #chat_user_unblock {display: flex;}
/* admin if from room */
#chat_box.user                  #chat_user_admin   {display: none;}
#chat_box.user._room_set._admin #chat_user_admin   {display: flex;}
/* room_name if from room */
#chat_box.user                  #chat_room_name    {display: none;}
#chat_box.user._room_set        #chat_room_name    {display: flex;}
/* mute/unmute */
#chat_box.user                  #chat_user_unmute  {display: none;}
#chat_box.user._muted           #chat_user_mute    {display: none;}
#chat_box.user._muted           #chat_user_unmute  {display: flex;}


