Chat {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-weight: bolder;
	flex-direction: column;
	align-items: stretch;
	font-size: 18px;
	font-family: Poppins;
	z-index: 101;
	padding: 12px;

	.output {
		position: absolute;
		bottom: 254px;
		width: 300px;
		max-height: 300px;
		min-height: 110px;
		flex-grow: 1;
		flex-direction: column;
		align-items: stretch;
		overflow-x: hidden;
		overflow-y: scroll;
		border-radius: 10 10 0 0px;
		justify-content: flex-end;
	}

	.chat_entry {
		flex-shrink: 0;
		filter: drop-shadow(0 0 10px rgba(black, 0.7));
		flex-direction: column;
		opacity: 0;
		border-top: 3px rgba(61, 129, 63, 0.7);

		.header {
			align-items: center;
			gap: 10px;
			padding: 10 0 0 10;

			.avatar {
				width: 32px;
				height: 32px;
				background-position: center;
				background-size: cover;
				border-radius: 4px;
				flex-shrink: 0;
			}

			.author {
				white-space: nowrap;
				flex-shrink: 0;
				text-shadow: 1px 1px 2px black;
				height: 32px;
			}
		}

		.message {
			color: #fff;
			text-shadow: 1px 1px 2px black;
			padding: 0 10 10 50;
			font-size: 14px;
		}
	}

	.input {
		position: absolute;
		height: 32px;
		color: white;
		border-radius: 0 0 10 10;
		flex-shrink: 0;
		bottom: 222px;

		.textentry {
			white-space: normal;
		}
	}

	&.open {
		.output {
			background-color: hsl(0, 2%, 10%);
			border-color: rgba(61, 129, 63, 0.7);
			border-width: 4;
			border-bottom: 3px;
		}

		.input {
			background-color: hsl(0, 0%, 0%);
			border-color: hsl(0, 0%, 15%);
			border-width: 4;
			border-bottom: 4px hsl(0, 0%, 15%);
			width: 300px;
		}

		.output .chat_entry {
			opacity: 1;
		}

		pointer-events: all;
	}
}

.system-messages {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 300px;
	max-height: 400px;
	color: white;
	z-index: 101;
	overflow-y: scroll;
	font-family: Poppins;
	font-size: 14px;
	flex-direction: column;
	justify-content: flex-end;
	flex-shrink: 0;
	background: linear-gradient(180deg, #ffffff00, #00000042);
	border-radius: 10 0 0 10;

	.system_entry {
		align-items: center;
		filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
		flex-shrink: 0;
		background: linear-gradient(#ffffff00, #00000069);
		padding-left: 10px;

		.author {
			margin-right: 5px;
			font-size: 20px;
			flex-direction: column;
			text-shadow: 1px 1px 2px black;
		}

		.message {
			text-shadow: 1px 1px 2px black;
			color: rgb(255, 255, 255);
			flex-direction: column;
			font-size: 14px;
			padding-bottom: 10px;
		}
	}
}

.chat-messages {
	position: absolute;
	left: 12px;
	bottom: 560px;
	width: 300px;
	max-height: 400px;
	color: white;
	z-index: 101;
	overflow-y: scroll;
	font-family: Poppins;
	font-size: 14px;
	flex-direction: column;
	justify-content: flex-end;
	flex-shrink: 0;
	background: linear-gradient(180deg, #ffffff00, #00000042);
	border-radius: 0 10 10 0;

	.chat_overlay {
		align-items: center;
		filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
		flex-shrink: 0;
		background: linear-gradient(#ffffff00, #00000069);
		padding-left: 10px;

		.chatauthor {
			margin-right: 5px;
			font-size: 20px;
			flex-direction: column;
			text-shadow: 1px 1px 2px black;
		}

		.chatmessage {
			text-shadow: 1px 1px 2px black;
			color: rgb(255, 255, 255);
			flex-direction: column;
			font-size: 14px;
			padding-bottom: 10px;
		}
	}
}