* {
	box-sizing:border-box;
}
.self-bubble {
	text-align:right;
}
.chat-bubble p,
.self-bubble p {
	display: inline-block;
	max-width: 500px;
	margin: 0 0 0.3em 0;
	padding: 0.3em 0.6em;
	animation: bubble 0.5s 0s 1 forwards;
}
.chat-bubble p {
	background: linear-gradient(whitesmoke, aliceblue);
	color: black;
	border-radius: 1em 1em 1em 0;
}
.self-bubble p {
	background: linear-gradient(mediumpurple, rebeccapurple);
	color: white;
	border-radius: 1em 1em 0 1em;
}

@keyframes bubble {
	0%  { transform: scale(0); }
	50% { transform: scale(1.1); }
	100%{ transform: scale(1); }
}

.chatbox {
	font: inherit;
	width: 99%;
	padding: 0.3em;
	border-radius: 0.5em;
}
.little-name {
	font-size: 0.7em;
	font-weight: bold;
	color: #666;
}
.little-id {
	font-weight: normal;
	margin-left: 0.5em;
	color: #aaa;
}
.chat-info {
	text-align: center;
	color: #666;
	padding-top: 10px;
	font-size: 14px;
}
.paneButton .headshot {
	display: inline-block;
	vertical-align: middle;
	width: 2rem;
	height: 2rem;
	object-fit: cover;
	border-radius: 50%; /* necessary for VOS */
	font-size: 0.6rem;
	line-height: 2rem;
	border: none;
	box-shadow: none;
}
.unread {
	display: inline-block;
	vertical-align: middle;
	background: red;
	color: white;
	text-align: center;
	height: 1.3em;
	width: 1.3em;
	border-radius: 50%;
	font-weight: bold;
}