#main-container, body, html{
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
}

#messages-container{
	margin: 0;
	padding: 1em 1em 0 1em;
	position: absolute;
	top: 0;
	width: 100vw;
	overflow: auto;
}

#prompt-input-container{
	display: none;
}

.input-container{
	margin: 0;
	padding: 1em;
	position: absolute;
	bottom: 0;
	width: 100vw;
}

.input-container textarea{
	resize: none;
	border: 1px solid #212529;
	border-right: none;
}

.input-container textarea:focus {
	box-shadow: none;
	outline-color: transparent;
    outline: none !important;
	border: 1px solid #212529;
	border-right: none;
}

.input-container button{
	resize: none;
	border: 1px solid #212529;
	border-left: none;
}

.msg-bubble{
	width: 80%;
	border-radius: 0.375rem;
	padding: 0.375rem;
	word-wrap: break-word;
}

.msg-bubble a{
	text-decoration: none;
}

.msg-bubble table{
	max-width: 100%;
	overflow: auto;
	table-layout: fixed;
}

.msg-bubble> *:last-child{
	margin-bottom: 0;
}

.msg-rcvd{
	position: relative;
	background: rgb(228, 228, 228);
}

.msg-rcvd:after{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 15px 10px 0;
	border-color: transparent rgb(228, 228, 228);
	display: block;
	width: 0;
	z-index: 1;
	margin-top: -10px;
	left: -15px;
	top: 50%;
}

.msg-sent{
	position: relative;
	background: rgb(62, 129, 255);
}

.msg-sent:after{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 0 10px 15px;
	border-color: transparent rgb(62, 129, 255);
	display: block;
	width: 0;
	z-index: 1;
	margin-top: -10px;
	right: -15px;
	top: 50%;
}

.time-div{
	font-size: .8em;
	text-align: center;
}

.bouncing-dots>.dot {
	font-weight: bold;
	font-size: 1.5em;
	display: inline-block;
	animation-name: ai-bouncing;
	animation-duration: 700ms;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	&:nth-child(2) {
		animation-delay: 125ms;
	}
	&:nth-child(3) {
		animation-delay: 250ms;
	}
}

@keyframes ai-bouncing {
	0% {
		transform: none;
	}
	33% {
		transform: translateY(-.5em);
	}
	66% {
		transform: none;
	}
}