.chat {
	display: flex;
	flex-direction: column;
	padding: 0 10px;
	min-height: 550px;
	max-height: 550px;

	&::-webkit-scrollbar {
		display: none;
	}

	p {
		font-size: 1rem;
	}

	a {
		text-decoration: underline;
	}
}

.messages {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	overflow-y: scroll !important;
	overflow-x: hidden !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.message {

	border-radius: 20px;
	padding: 8px 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	left: -6px; /* Fixes issue where I have to overflow .messages */

	font-size: 15px;

	animation-duration: 0.2s !important;

	&.media {

		padding: 0;
		background: none !important;
		border: 1px solid var(--accent-lighter);
		max-width: 250px !important;

		&::before,
		&::after {
			display: none;
		}
	}

	img {
		border-radius: 20px;
		/* margin-top: 10px; */
		/* margin-bottom: 10px; */
		width: 100%;
		/* border: 1px solid white; */
	}
}

.yours {
	align-items: flex-start;
}

.yours .message {
	margin-right: 25%;
	background-color: #eee;
	position: relative;
}

.yours .message.last:before {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: -7px;
	height: 20px;
	width: 20px;
	background: #eee;
	border-bottom-right-radius: 15px;
}
.yours .message.last:after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: -10px;
	width: 10px;
	height: 20px;
	background: white;
	border-bottom-right-radius: 10px;
}

.mine {
	align-items: flex-end;
}

.mine .message {
	color: white;
	margin-left: 5%;
	background: #198cff;
	background-attachment: fixed;
	position: relative;
}

.mine .message.last:before {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 0;
	right: -8px;
	height: 20px;
	width: 20px;
	background: #198cff;
	background-attachment: fixed;
	border-bottom-left-radius: 15px;
}

.mine .message.last:after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: -10px;
	width: 10px;
	height: 20px;
	background: white;
	border-bottom-left-radius: 10px;
}