.chat-message {
	position: relative;
	margin: 1rem 0;
	opacity: 0;
	transform: translateX(-20%);
	transition: transform .3s ease-out,opacity .3s ease
}

.chat-message.shown {
	opacity: 1;
	transform: translateX(0)
}

.chat-message>.avatar {
	width: 3rem;
	height: 3rem;
	position: absolute;
	border-radius: 100%;
	transform: translateY(-1px);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	text-align: center;
	line-height: 3rem;
	font-size: 1.6rem;
	color: #fff;
	font-family: Comic Sans MS;
	background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

.chat-message>.nickname {
	position: relative;
	margin: 0 0 .5rem 0;
	font-weight: 700
}

.message-box {
	position: relative;
	margin-left: 2rem;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	line-height: 1.6;
	border-radius: .5rem;
	background-color: #f3f6f9;
	word-break: break-all
}

.chat-message:not(.no-padding) .message-box {
	padding: .6rem .8rem
}

.message-box>img {
	border-radius: .5rem
}

.message-box img {
	vertical-align: middle
}

.message-box p>img {
	margin: .2rem 0
}

.message-box:before {
	content: "";
	position: absolute;
	right: 100%;
	top: 0;
	width: 12px;
	height: 12px;
	border: 0 solid transparent;
	border-bottom: 8px solid;
	border-radius: 0 0 0 32px;
	color: #f3f6f9
}

.message-box p {
	margin: 0;
	line-height: 1.6
}

.chain {
	position: relative;
	border-radius: 6px;
	margin: 1rem 0;
	overflow-x: auto;
	background-color: #FFF;
}

.chain .controls {
	display: initial;
	position: absolute;
	top: .8rem;
	width: 100%
}

.chain .controls .circle {
	position: absolute;
	top: 1px;
	width: 14px;
	height: 14px;
	border-radius: 7px
}

.chain .controls .circle.red {
	left: 17px;
	background-color: #ff5f56
}

.chain .controls .circle.yellow {
	left: 39px;
	background-color: #ffbd2e
}

.chain .controls .circle.green {
	left: 61px;
	background-color: #27c93f
}

.chain .controls .title {
	text-align: center;
	width: 100%;
	font-size: .9rem;
	line-height: 1rem
}

.chain .content {
	padding: .2rem 1.2rem;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content
}

.chain.mini .controls {
	display: none
}

.chain:not(.mini) .content {
	padding-top: 2rem
}