html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.chat-container {
	zoom: 1.2;
	position: fixed;
	inset: 0;
	overflow: hidden;
}

.chat-window {
	font-family: "Poppins", sans-serif;
	height: 100%;
	width: calc(100% + 30px);
	padding-right: 30px;
	padding-bottom: 2px;
	box-sizing: border-box;
	overflow-y: auto;
	scroll-behavior: auto;
}
/*
.chat-window {

	display: flex;
	/*flex-direction: column-reverse; /* anchors the scroll position to the bottom
	overflow-y: auto;
	height: 100vh;
	scroll-behavior: auto;
}*/

/* Hide scrollbars on every element */
* {
	scrollbar-width: none !important;
}

*::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* Normal block flow inside, so messages stay in natural order */
.chat-messages {
	display: flex;
	flex-direction: column;
}

.jump-to-bottom {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	color: #FFF;
	border: 2px solid rgb(255, 255, 255);
	padding: 5px 15px;
	background-color: rgb(0 0 0 / 0.76);
	border-radius: 15px;
	box-shadow: 0 0 2px rgb(0 0 0 / 0.3);
}

.message {
	text-shadow: 1px 1px 4px rgb(0 0 0 / 0.75);
	color: #FFF;
	padding: 0 0 0 21px;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-position: 1px 3px;
	border-left: 2px solid transparent;
}

.message.platform-youtube {
	background-image: url(/images/youtube.svg);
}

.message.platform-twitch {
	background-image: url(/images/twitch.svg);
}

.message-decorator {
	display: block;
}

.message.raid {
	background-color: rgb(122 186 214 / 0.25);
	border: 2px solid #7ab3d6;
	border-radius: 10px;
}

.message.sub,
.message.sub-gift,
.message.cheer {
	background-color: rgb(90 72 124 / 0.15);
	border: 2px solid #9C7AD6;
	border-radius: 10px;
}

.message.sub .message-decorator,
.message.cheer .message-decorator {
	color: #faf7ff;
}

.message.super-chat,
.message.super-sticker,
.message.gift,
.message.membership,
.message.membership-milestone,
.message.membership-gifting {
	background-color: rgb(124 72 72 / 0.15);
	border: 2px solid #d67a7a;
	border-radius: 10px;
}

.message.super-chat .message-decorator,
.message.membership-milestone .message-decorator {
	color: #fff7f7;
}

.message.watch-streak {
	background-color: rgb(110 110 110 / 0.15);
	border: 2px solid #dadada;
	border-radius: 10px;
}

.message.watch-streak .message-decorator {
	color: #fff;
}

.message.timeout,
.message.ban {
	font-style: italic;
}

.message.deleted {
	opacity: .65;
	text-decoration: line-through;
}

.message-platform {
	margin-right: 1px;
}

.message-message img {
	vertical-align: middle;
	max-height: 28px;
}

.message-badges img,
.message-platform img {
	margin-right: 1px;
	vertical-align: -3px;
}

.message-user + .message-message:not(:empty)::before {
	content: ': ';
	color: #FFF;
	font-weight: 400;
}

.message-user {
	--color: '#FFF';
	color: var(--color);
}