chat-box {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: clip;
}
chat-box > :not(:first-child):not(.infoBar) {
	border-top: 2px var(--theme-border-color) solid;
}
chat-box > header {
	text-align: center;
}
.chatMessageArea {
	position: relative;
	flex-grow: 1;
	height: 0;
	overflow-y: scroll;
	font-size: .75em;
	white-space: pre-wrap;
	word-wrap: break-word;
	background-color: #0003;
}
.chatMessageArea > .msg {
	padding: 0 .4em;
	margin: 3px 0px;
}
.chatMessageArea > .notice {
	background-color: #2a4882;
	color: #eee;
}
.chatMessageArea > .warning {
	background-color: #796a1c;
	color: #eee;
}
.chatMessageArea > .error {
	background-color: #802929;
	color: #eee;
}
.chatMessageArea > .success {
	background-color: #298030;
	color: #eee;
}
.chatMessageArea > img {
	max-height: 5em;
}
.emoji {
	height: 32px;
	transform: translateY(.3em);

	image-rendering: crisp-edges;
	image-rendering: pixelated;
}
.chatInfoBar {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	padding: .25em .65em;
	font-size: .75em;
	font-weight: bold;
	background-color: #2a4882;
	border-bottom-left-radius: .75em;
	border-bottom-right-radius: .75em;

	animation: infoGlow alternate 2s infinite;
}
.chatInfoBar:empty {
	display: none;
}
@keyframes infoGlow {
	from {color: #888};
	to {color: #eee};
}

chat-box > input {
	width: 100%;
	background: none;
	border: none;
	margin: 0;
	padding: .5em;
	color: inherit;
	outline: none;
	font-size: .75em;
}

.uninteractable chat-box > input {
	display: none;
}

.chatImage {
	max-width: min(100%, 15em);
}

.chatDeck {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
}
.chatDeck > img {
	width: 100%;
}