:root {
	--twitch-gray: rgb(173 173 184);
	--twitch-light: rgb(239 239 241);
	--twitch-dark-background: rgb(24 24 27);
	--twitch-purple: rgb(180 84 255);
	--twitch-highlight-purple: #755ebc;
}

html,
body {
	overflow: hidden;
	height: 100vh;
	margin-top: 0;
}

body {
	background-color: var(--twitch-dark-background);
}

[data-twitch-chat] {
	background-color: var(--twitch-dark-background);
	color: var(--twitch-light);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
		Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	font-size: 14.625px;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

[data-twitch-message] {
	line-height: 22.5px;
	margin: 0;
	padding-bottom: 5.625px;
	padding-left: 22.5px;
	padding-right: 22.5px;
	padding-top: 5.625px;
}

[data-twitch-message-display-status='deleting'] {
	transition: 1s linear opacity;
	opacity: 0;
}

[data-twitch-message-reply] {
	color: var(--twitch-gray);
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

[data-twitch-message] .twitch-chat-sender {
	color: var(--twitch-sender-color, var(--twitch-purple));
	display: inline;
	font-weight: 700;
}

[data-twitch-message][data-twitch-sender-color-lightness='dark']
	.twitch-chat-sender {
	filter: brightness(1.3);
}

[data-twitch-message] .twitch-chat-sender::after {
	content: ': ';
	color: var(--twitch-light);
	font-weight: normal;
}

[data-twitch-message] .twitch-chat-message {
	display: inline;
	word-break: break-word;
}

[data-twitch-message-status~='highlighted'] .twitch-chat-message {
	background-color: var(--twitch-highlight-purple);
	border: 4px solid var(--twitch-highlight-purple);
	color: white;
}

[data-twitch-message-status~='action'] .twitch-chat-message {
	font-style: italic;
}

[data-twitch-emote] {
	width: 1.2em;
}

[data-twitch-mentioned-user] {
	background-color: #323239;
	color: inherit;
	padding: 0.2rem 0.4rem;
}

.twitch-chat-command {
	background-color: transparent;
	color: inherit;
}

[data-twitch-message-status*='highlighted'] [data-twitch-mentioned-user] {
	background-color: transparent;
}

[data-twitch-message] a {
	color: var(--twitch-purple);
	text-decoration: none;
}
