.dialogue {
	width: 100%;
}

.user {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	.avatar {
		width: 60px;
		text-align: center;
		flex-shrink: 0;
	}
	.name {
		color: #333;
	}
	.text {
		background-color: #aaa;
		padding: 16px;
		border-radius: 10px;
		position: relative;
	}
}

.remote {
	.text {
		margin-left: 20px;
		margin-right: 20px;
		color: #eee;
		background-color: #222222;
		&::before {
			border-right: 10px solid #222222;
			left: -10px;
		}
	}
}
.local {
	justify-content: flex-end;
	.text {
		margin-right: 20px;
		margin-left: 20px;
		order: -1;
		background-color: #fff;
		color: #333;
		&::before {
			border-left: 10px solid #fff;
			right: -10px;
		}
	}
}

.remote,
.local {
	& .text::before {
		content: "";
		position: absolute;
		top: 20px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}
	.text {
		font-weight: 300;
		box-shadow: 0 0 10px #888;
	}
}