.chat {
height: calc(100vh - 68px);
	overflow-y: auto; 
}

textarea {
	position: relative;
	width: 310px!important;
	padding: 15px 15px;
	height: var(--button-height);
	border-radius: var(--radius-big);
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
	margin-right:2px;
}

.chat a {
	color: white;
	font-weight: 400;
	font-style: italic;
	text-decoration: none;
}

.chat-bubble a {
	color: black;
	text-decoration: underline;
}

.chat-bubble.blue a {
	color: white;
	text-decoration: underline;
}

.chat-bubble {
	position: relative;
	padding:10px 10px 25px 10px;
	width:max-content;
	min-width:100px;
	max-width:260px;
	word-wrap: break-word;
	margin:0px 0px 5px 0px;
	color: light-dark(var(--color-dark-grey), var(--color-light-bg));
	background: light-dark(var(--color-light-white), var(--color-mid-grey));
	border-radius: var(--radius-big);
	white-space: pre-wrap;
    word-break: break-word;
	will-change: transform, opacity;
}

.chat-bubble.blue {
	position: relative;
	margin-left: auto;
	right:0px;
	color: light-dark(var(--color-light-bg), var(--color-light-bg));
	background: light-dark(var(--color-blue), var(--color-blue));
}

.chat-user {
	padding-bottom: 5px;
}

.chat-time {
	position: absolute;
	bottom:5px;
	right:10px;
	font-size: smaller;
}

#inputChatMessage {
	border-radius: var(--radius-big);
	height:40px;
	padding:10px;
	width:100%;
	min-height:40px;
	max-height:150px;
	resize:none;
	overflow:auto;
	padding:10px;
	white-space: wrap;
}

.bubble-in {
	animation: bubbleIn 180ms ease-out;
}

@keyframes bubbleIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}