:root {
	--text-black: #474241;
}

* {
	box-sizing: border-box;
}

html,
body {
	overflow: hidden;
	height: 100vh;
	padding: 0;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
		Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

[data-twitch-chat] {
	--chat-font-size: 16px;
	--chat-background-color: transparent;
	--chat-text-color: var(--text-black);

	background-color: var(--chat-background-color);
	color: var(--chat-text-color);
	font-size: var(--chat-font-size);
	width: 99vw;
	height: 98vh;
	filter: drop-shadow(0 3px 3px rgb(0 0 0 / 20%));
	padding: 0.5rem 1rem;
	border-radius: 20px;
	list-style: none;
	margin: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

[data-twitch-message] {
	margin: 0.25rem;
	position: relative;
	padding-left: 60px;
}

[data-twitch-message-reply] {
	display: none;
}

[data-twitch-emote] {
	display: inline-block;
	height: 1.5em;
	margin-bottom: -0.3em;
}

[data-twitch-emote] + [data-twitch-emote] {
	margin-left: -0.22em;
}

/* Speech Bubble */

.twitch-chat-message,
.twitch-chat-sender {
	background: white;
	padding-left: 12px;
	padding-right: 12px;
	opacity: 0;
	animation: bubble-enter 1500ms ease-in-out forwards 600ms;
}

.twitch-chat-message > :is(mark, img) {
	animation: content-enter 1500ms ease-in-out forwards 600ms;
}

[data-twitch-mentioned-user] {
	background-color: #ffe484;
	padding: 0 2px;
	border-radius: 3px;
}

.twitch-chat-command {
	background-color: #ffd4d4;
	padding: 0 2px;
	border-radius: 3px;
}

.twitch-chat-sender {
	font-weight: bold;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding-top: 4px;
	color: var(--twitch-sender-color, #c0392b);
}

.twitch-chat-message {
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding-bottom: 8px;
	padding-right: 12px;
	padding-top: 1px;
	position: relative;
	word-break: break-word;
}

.twitch-chat-message::before {
	content: url("data:image/svg+xml,%3Csvg width='11'  viewBox='0 0 13 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.19716C4.47225 9.69037 10.3948 9.42632 13 8.05104V0C8.34993 4.51061 5.55487 6.19716 0 6.19716Z' fill='white'/%3E%3C/svg%3E%0A");
	position: absolute;
	left: 0;
	bottom: 3px;
	transform: translateX(-100%);
}

/* Darken Light Text */
[data-twitch-sender-color-lightness='light'] > .twitch-chat-sender::after {
	content: attr(data-twitch-sender-inner);
	position: absolute;
	left: 72px;
	color: rgb(0 0 0 / 60%);
}

/*
* Sender Roles
*/

[data-twitch-sender-roles] .twitch-chat-sender {
	padding-left: 32px;
	padding-right: 4px;
}

[data-twitch-sender-roles][data-twitch-sender-color-lightness='light']
	> .twitch-chat-sender::after {
	padding-left: 20px;
}

[data-twitch-sender-roles] .twitch-chat-sender::before {
	top: 6px;
	margin-left: -20px;
	position: absolute;
}

/* VIPs */

[data-twitch-sender-roles~='vip'] .twitch-chat-sender::before {
	content: url('data:image/svg+xml; utf8, <svg stroke="%23f39c12" fill="%23f39c12" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="display: inline;"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm8 5.5v7h2v-7h-2zm-.285 0H8.601l-1.497 4.113L5.607 8.5H3.493l2.611 6.964h2L10.715 8.5zm5.285 5h1.5a2.5 2.5 0 1 0 0-5H14v7h2v-2zm0-2v-1h1.5a.5.5 0 1 1 0 1H16z"></path></g></svg>');
}

/* Subscribers */

[data-twitch-sender-roles~='subscriber'] .twitch-chat-sender::before {
	content: url('data:image/svg+xml; utf8, <svg stroke="%238e44ad" fill="%238e44ad" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="display: inline;"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z"></path></g></svg>');
}

/* Moderators */

[data-twitch-sender-roles~='mod'] .twitch-chat-sender::before {
	content: url('data:image/svg+xml; utf8, <svg stroke="%2327ae60" fill="%2327ae60" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="display: inline-block;"><g><path fill="none" d="M0 0h24v24H0z"></path><path fill-rule="nonzero" d="M7.05 13.406l3.534 3.536-1.413 1.414 1.415 1.415-1.414 1.414-2.475-2.475-2.829 2.829-1.414-1.414 2.829-2.83-2.475-2.474 1.414-1.414 1.414 1.413 1.413-1.414zM3 3l3.546.003 11.817 11.818 1.415-1.414 1.414 1.414-2.474 2.475 2.828 2.829-1.414 1.414-2.829-2.829-2.475 2.475-1.414-1.414 1.414-1.415L3.003 6.531 3 3zm14.457 0L21 3.003l.002 3.523-4.053 4.052-3.536-3.535L17.457 3z"></path></g></svg>');
}

/* Broadcasters + founders */

[data-twitch-sender-roles~='broadcaster'] .twitch-chat-sender::before,
[data-twitch-sender-roles~='founder'] .twitch-chat-sender::before {
	content: url('data:image/svg+xml; utf8, <svg stroke="%23c0392b" fill="%23c0392b" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="display: inline;"><path d="M509.8 332.5l-69.9-164.3c-14.9-41.2-50.4-71-93-79.2 18-10.6 46.3-35.9 34.2-82.3-1.3-5-7.1-7.9-12-6.1L166.9 76.3C35.9 123.4 0 238.9 0 398.8V480c0 17.7 14.3 32 32 32h236.2c23.8 0 39.3-25 28.6-46.3L256 384v-.7c-45.6-3.5-84.6-30.7-104.3-69.6-1.6-3.1-.9-6.9 1.6-9.3l12.1-12.1c3.9-3.9 10.6-2.7 12.9 2.4 14.8 33.7 48.2 57.4 87.4 57.4 17.2 0 33-5.1 46.8-13.2l46 63.9c6 8.4 15.7 13.3 26 13.3h50.3c8.5 0 16.6-3.4 22.6-9.4l45.3-39.8c8.9-9.1 11.7-22.6 7.1-34.4zM328 224c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24z"></path></svg>');
}

/* Horse SVG */

[data-twitch-message]::before,
[data-twitch-message]::after {
	position: absolute;
	bottom: -6px;
	left: 2px;
	height: 64px;
	width: 70px;
	animation: horse-enter forwards 500ms ease-in-out;
	transform-origin: 0 100%;
	opacity: 1;
}

[data-twitch-message]::before {
	/* Mask */
	content: '';
	clip-path: path(
		'M40.5939 1.10633C40.1619 0.501332 38.2559 -0.120668 38.0349 0.877332C37.9222 1.38553 37.813 1.87537 37.7074 2.34863L37.7071 2.34999C37.2282 4.49734 36.8255 6.30337 36.5263 7.93274C33.9678 8.11423 31.3228 8.93578 29.0395 10.2591C27.2564 7.83909 24.6789 5.69923 22.054 3.5982C21.474 3.1322 19.474 3.0462 19.53 4.0672H19.526C19.5542 4.58676 19.5807 5.08774 19.6063 5.57176C19.9074 11.2584 20.0845 14.604 21.3639 18.2347C10.187 31.8497 -0.118988 46.8733 -0.0289154 63.9944H39.1511C35.2574 57.1385 36.6476 47.5394 41.505 40.5088C42.3249 41.2467 43.1193 42.0243 43.9113 42.83C44.175 43.15 44.6013 43.7414 45.1155 44.4548C46.377 46.2051 48.1676 48.6895 49.3853 49.699C51.0983 51.12 51.7443 51.349 52.7623 51.312C53.7793 51.277 57.4343 49.935 59.2743 48.539C59.344 48.4954 59.416 48.4507 59.4898 48.405C60.8904 47.5363 62.941 46.2646 62.4623 43.789C61.9643 41.2172 50.7644 20.4877 46.3322 12.5771C45.8809 8.65199 43.2901 4.8551 40.5939 1.10633Z'
	);
	background: var(--twitch-sender-color, #c0392b);
}

[data-twitch-message]::after {
	/* Hair and shadows */
	content: url("data:image/svg+xml,%3Csvg width='70' height='64' viewBox='0 0 70 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48.4128 53.2737C52.124 55.1385 53.7734 51.8751 53.7734 48.1455L48.4128 45.8145C47.1757 47.6793 45.4438 51.7818 48.4128 53.2737Z' fill='%23FF9C9C'/%3E%3Cpath d='M48.7296 53.4078C49.655 53.7593 51.2731 47.3142 51.2731 47.3142L50.8313 47.127C50.3314 49.127 48.4681 53.3085 48.7296 53.4078Z' fill='%23C24D4D'/%3E%3Cpath d='M41.5076 40.5109C39.5266 38.7276 37.3964 37.1758 34.7893 36.0169C33.9718 35.6535 33.0812 35.3398 32.1755 35.0209C30.1774 34.3171 28.1057 33.5875 26.5823 32.2409C23.7976 29.7811 22.3122 26.7809 22.0332 23.5957C19.8639 26.7913 18.4231 30.6793 17.9962 34.0029C17.529 37.6283 21.6832 41.0567 24.6651 43.5176C25.1805 43.943 25.6608 44.3394 26.0762 44.7029C29.3642 47.5779 33.1042 50.1739 37.0362 52.5299C37.4734 48.3247 39.0417 44.0858 41.5076 40.5109Z' fill='black' fill-opacity='0.27'/%3E%3Cpath d='M58.3648 49.1396C56.3648 44.2996 53.8478 39.7366 51.4918 35.0396C49.0318 30.1386 46.6078 25.1826 43.2768 20.7926C39.3138 15.5696 35.3358 11.6466 30.0908 9.71265C35.8198 6.89565 43.2508 7.08765 46.1508 12.2516C50.4488 19.9016 61.9588 41.1816 62.4638 43.7896C62.9678 46.3956 60.6688 47.6676 59.2758 48.5396C59.0078 48.7406 58.6968 48.9426 58.3658 49.1406' fill='black' fill-opacity='0.18'/%3E%3Cpath d='M63.1374 45.2C63.1374 41.306 59.8244 41.379 55.3084 41.379C50.7874 41.379 46.7734 41.307 46.7734 45.2C46.7734 49.096 50.4384 52.25 54.9574 52.25C59.4734 52.25 63.1374 49.092 63.1374 45.2Z' fill='%23C2976B'/%3E%3Cpath d='M53.2946 44.4495C53.2946 42.4055 51.5546 42.4395 49.1836 42.4395C46.8106 42.4395 44.7046 42.4005 44.7046 44.4495C44.7046 46.4965 46.6256 48.1525 48.9986 48.1525C51.3716 48.1525 53.2946 46.4965 53.2946 44.4495Z' fill='%23C2976B'/%3E%3Cpath d='M53.9197 45.6322C53.9197 44.3012 52.7857 44.3262 51.2407 44.3262C49.6957 44.3262 48.3237 44.3012 48.3237 45.6322C48.3237 46.9652 49.5757 48.0472 51.1207 48.0472C52.6677 48.0472 53.9197 46.9652 53.9197 45.6322Z' fill='%23614832'/%3E%3Cpath d='M31.2832 21.686C31.2832 24.622 33.4412 26.995 36.1052 26.995C38.7692 26.995 40.9332 24.622 40.9332 21.686C40.9332 18.752 38.7692 16.377 36.1052 16.377C33.4412 16.377 31.2832 18.752 31.2832 21.686Z' fill='white'/%3E%3Cpath d='M32.9795 21.6853C32.9795 23.2203 34.3795 24.4673 36.1015 24.4673C37.8275 24.4673 39.2255 23.2203 39.2255 21.6853C39.2255 20.1493 37.8275 18.9023 36.1015 18.9023C34.3795 18.9023 32.9795 20.1493 32.9795 21.6853Z' fill='%2326333A'/%3E%3Cpath d='M0.640026 48.2992C0.589861 48.2416 0.555625 48.1719 0.540715 48.097C0.525804 48.0221 0.530739 47.9446 0.555027 47.8722C0.741395 47.2677 0.943462 46.6682 1.16103 46.0742C0.663026 44.2272 1.58403 42.4552 2.76303 40.8692C2.42203 40.7912 2.15903 40.5832 2.22603 40.1822C2.84103 36.6282 4.80702 33.9332 6.81502 31.1222C6.32902 31.2792 5.07803 31.1732 5.40203 30.4862C7.30703 26.4762 9.40202 24.4762 12.488 21.8782C12.457 21.7962 12.47 21.7062 12.521 21.6032C11.533 21.3882 10.569 21.1322 9.56703 20.7302C8.67903 20.3722 9.66003 19.6072 10.164 19.5512C13.298 19.2122 15.839 17.1702 17.731 14.7722C16.9654 14.8975 16.2136 15.0961 15.486 15.3652C15.035 15.5072 13.715 15.2432 14.264 14.5242C17.393 10.4212 21.509 9.24923 26.139 8.53923L25.069 8.23023C24.333 8.13123 23.978 7.50123 24.715 7.06623C27.706 5.29623 29.886 6.76223 32.829 6.56823C33.562 6.38223 34.31 6.25423 35.092 6.25723C35.125 6.25723 35.144 6.27723 35.175 6.28023C35.058 5.93123 35.306 5.49523 35.992 5.42623C38.926 5.12323 41.601 4.93123 44.324 6.21323C45.186 6.62023 44.254 7.32123 43.729 7.39223C43.682 7.39823 43.64 7.39623 43.595 7.40123C45.64 8.03323 47.451 8.88323 48.453 11.2402C48.764 11.9712 47.563 12.2972 47.059 12.1162C46.183 11.8042 45.357 11.3792 44.533 10.9612C45.132 12.2852 45.267 13.8482 45.33 15.5052C45.361 16.3522 43.748 16.5212 43.385 15.8702C42.3043 13.9258 40.7103 12.3156 38.777 11.2152C38.604 11.1842 38.436 11.1352 38.267 11.0972C38.067 11.1982 37.84 11.2652 37.607 11.2412C37.423 11.2212 37.247 11.1792 37.066 11.1542C37.4769 11.5267 37.863 11.9255 38.222 12.3482C38.86 13.1102 37.518 13.5292 36.947 13.3692C35.859 13.0692 34.822 12.6692 33.835 12.1692C33.934 12.4462 34.04 12.7062 34.127 12.9972C34.36 13.7652 32.841 13.8542 32.372 13.5502C31.954 13.6062 31.49 13.5642 31.298 13.4252C30.48 12.8422 29.887 12.2452 29.59 11.5152C27.744 12.1712 26.018 12.9312 24.406 13.9152C23.2958 14.6024 22.2623 15.4063 21.323 16.3132C21.179 16.4822 21.061 16.6702 20.921 16.8402C21.4 16.8222 21.906 17.0132 22.001 17.3072C22.353 17.4822 22.517 17.7882 22.095 18.1622C18.31 21.5302 15.572 25.7522 12.776 29.9292C7.75603 37.9022 3.51102 46.5292 1.76602 55.6332C1.62602 56.3552 0.198026 57.5752 0.211026 56.7562C0.251026 54.2472 0.127029 50.6962 0.643029 48.3012' fill='%231C0F06'/%3E%3C/svg%3E%0A");
}

@keyframes horse-enter {
	from {
		opacity: 0;
		transform: scale(0.7) translateY(10px) translateX(-30px) rotate(-20deg);
	}

	to {
		opacity: 1;
		transform: scale(0.7) translateY(-10px) translateX(5px);
	}
}

@keyframes bubble-enter {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}
