
/*
*/

@import 'chat__global.css';

@import 'layout_close.css';
@import 'layout_home.css';
@import 'layout_room.css';
@import 'layout_new.css';
@import 'layout_settings.css';
@import 'layout_room_set.css';
@import 'layout_protected.css';
@import 'layout_create.css';
@import 'layout_user.css';
@import 'layout_mute.css';

@import 'chat_panels.css';
@import 'chat_buttons.css';
@import 'chat_back.css';
@import 'chat_close.css';
@import 'chat_write.css';
@import 'chat_msg.css';
@import 'chat_blocked.css';
@import 'chat_form.css';


/*
   GRID
 */

#chat_box * {
	display: flex;
	flex-direction: column;
  position: relative;
	box-sizing: border-box;
	padding: 0px;
	margin: auto;
}
#chat_box .chat_item {
	display: none;
	/*
	border: 1px solid black;
	*/
	width: 100%;
	height: 100%;
}

.chat_item#chat_chat            { grid-area: chat;}
.chat_item#chat_close           { grid-area: close;}
.chat_item#chat_new             { grid-area: new;}
.chat_item#chat_settings        { grid-area: settings;}
.chat_item#chat_room_name       { grid-area: room_name;}
.chat_item#chat_send            { grid-area: send;}
.chat_item#chat_create          { grid-area: create;}
.chat_item#chat_user            { grid-area: user;}
.chat_item#chat_back            { grid-area: back;}
.chat_item#chat_panel_home      { grid-area: panel_home;}
.chat_item#chat_panel_new       { grid-area: panel_new;}
.chat_item#chat_panel_msg       { grid-area: panel_msg;}
.chat_item#chat_panel_write     { grid-area: panel_write;}
.chat_item#chat_panel_settings  { grid-area: panel_settings;}
.chat_item#chat_panel_room_set  { grid-area: panel_room_set;}
.chat_item#chat_panel_protected { grid-area: panel_protected;}
.chat_item#chat_panel_create    { grid-area: panel_create;}
.chat_item#chat_panel_user      { grid-area: panel_user;}
.chat_item#chat_panel_mute      { grid-area: panel_mute;}

#chat_box {
  display: grid;
  position: fixed;
  bottom: 20px;
  right: 20px;

  gap: 5px;
  padding: 5px;
  width: 300px;
  height: 400px;

  border: 1px solid black;
}

