.account-profile .name {
	position: relative;
}

.profile-mood-control {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 5px;
	vertical-align: middle;
}

.profile-mood-badge {
	display: inline-grid;
	width: 25px;
	height: 25px;
	place-items: center;
	border: 1px solid rgba(102, 88, 219, .17);
	border-radius: 9px;
	background: linear-gradient(145deg, rgba(102, 88, 219, .12), rgba(53, 210, 173, .12));
	font-size: 15px;
	line-height: 1;
}

.profile-mood-picker > summary {
	display: grid;
	width: 25px;
	height: 25px;
	place-items: center;
	border: 1px solid var(--social-border, #e6e8f0);
	border-radius: 9px;
	color: var(--social-muted, #737d90);
	cursor: pointer;
	list-style: none;
}

.profile-mood-picker > summary::-webkit-details-marker {
	display: none;
}

.profile-mood-picker > summary:hover,
.profile-mood-picker[open] > summary {
	border-color: rgba(102, 88, 219, .35);
	background: rgba(102, 88, 219, .08);
	color: var(--social-accent, #6658db);
}

.profile-mood-options {
	position: absolute;
	z-index: 1032;
	top: calc(100% + 8px);
	right: 0;
	display: grid;
	width: 192px;
	grid-template-columns: repeat(5, 1fr);
	gap: 5px;
	padding: 9px;
	border: 1px solid var(--social-border, #e6e8f0);
	border-radius: 13px;
	background: var(--social-surface, #fff);
	box-shadow: 0 12px 32px rgba(31, 41, 61, .16);
}

.profile-mood-options button {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-size: 18px;
}

.profile-mood-options button:hover,
.profile-mood-options button:focus-visible {
	outline: 0;
	background: rgba(102, 88, 219, .11);
}

html[data-bs-theme="dark"] .profile-mood-badge,
html[data-bs-theme="dark"] .profile-mood-picker > summary {
	border-color: rgba(157, 169, 191, .22);
	background-color: rgba(157, 169, 191, .08);
}

html[data-bs-theme="dark"] .profile-mood-options {
	border-color: rgba(157, 169, 191, .22);
	background: #191d26;
}