/* ========== Badges Panel ========== */
.badge {
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(7, 10, 20, 0.96);
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.badge-panel {
	position: fixed;
	right: 16px;
	bottom: 16px;
	width: 260px;
	max-height: 60vh;
	padding: 12px;
	border-radius: 14px;
	background: rgba(10, 20, 16, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(10px);
	display: none;
	flex-direction: column;
	gap: 8px;
	z-index: 1200;
}

.badge-panel.open {
	display: flex;
}

.badge-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

.badge-panel-close {
	border: none;
	background: transparent;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	padding: 0 4px;
}

.badge-panel-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
}

.badge-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
}

.badge-icon {
	width: 24px;
	height: 24px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.badge-text-main {
	font-size: 12px;
	font-weight: 600;
}

.badge-text-sub {
	font-size: 11px;
	opacity: 0.75;
}

/* Badges button style tweak (optional) */
.pill-btn.subtle#badge-toggle {
	gap: 6px;
	font-size: 12px;
	padding-inline: 10px;
}

.feedback-detail {
	margin-top: 8px;
	font-size: 12px;
	opacity: 0.8;
}

.next-btn {
	margin-top: 16px;
	padding: 10px 24px;
	border-radius: 10px;
	border: 1px solid rgba(79, 140, 255, .5);
	background: rgba(79, 140, 255, .15);
	color: var(--ink);
	cursor: pointer;
	font-size: 13px;
}

.next-btn:hover {
	background: rgba(79, 140, 255, .25);
}