/*Written by Ese Curtis
oct 2, 2020*/

*{
	box-sizing: border-box;
	padding:0;
	margin:0;
}
.chat-box{
	max-width:400px;
	max-height:700px;
	width:100vw;
	height:100vh;
	background:#eee;
	margin:auto;
}
.user-data{
	width:100%;
	height:10%;
	display:flex;
	padding:5px;
	display:flex;
	align-items: center;
	border-bottom:2px solid #aaa;
}
.user-picture{
	height:100%;
	width:50px;
	margin:0.5em;
	display:flex;
	justify-content:center;
	align-items: center;
	background:#fac000;
	border-radius:5px;
}
.main-conversation{
	padding:0.5em;
	height:70%;
	overflow-x:scroll;
}
.main-conversation>*{
	padding:0.5em;
	display:flex;
}
.bubble{
	max-width:60%;
	background:#fac000;
	color:#333;
	padding:0.5em;
	border-radius:5px;
	display: inline-block;
	overflow-wrap: break-word;
}
.user{
	justify-content:flex-end;
}
.user>.bubble{
	background:#aaa;
}
.message-panel{
	background:#fff;
	height:20%;
	padding:0.5em;
	display:flex;
}
.message-panel>*{
	margin:auto;
	padding:0.5em;
}
.message-panel>input{
	font-size:large;
	width:70%;
}
.message-panel>button{
	background:#000;
	color:#fff;
	border:none;
	outline:none;
	padding:1em;
}