/* ── UserAreaProfilePopout ───────────────────────────────────────────── */

.overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-index-contextmenu, 1000);
	pointer-events: none;
}

.card {
	position: fixed;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	background-color: var(--background-floating, var(--background-secondary));
	/* 3px border painted inline with the user's accent color — matches
	   the settings preview and the MemberProfileModal. box-shadow is
	   also set inline so we can layer an accent glow over the default
	   drop shadow. */
	border: 3px solid transparent;
	border-radius: 12px;
	overflow: hidden;
	animation: popoutIn 140ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes popoutIn {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ── Header (banner + avatar) ────────────────────────────────────────── */

.header {
	position: relative;
	height: 130px;
	flex-shrink: 0;
}

.banner {
	width: 100%;
	height: 90px;
	background-color: var(--brand-primary, #5865f2);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.avatarWrap {
	position: absolute;
	top: 50px;
	left: 16px;
	padding: 4px;
	background-color: var(--background-floating, var(--background-secondary));
	border-radius: 9999px;
	line-height: 0;
}

/* ── Identity block ──────────────────────────────────────────────────── */

.identity {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	padding: 0.25rem 1rem 0.75rem;
}

.displayName {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.375rem;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.handle {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1rem;
	color: var(--text-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: 'Consolas', 'Monaco', monospace;
}

.bio {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.125rem;
	color: var(--text-secondary);
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-height: 4.5rem;
	overflow: hidden;
}

/* ── Action group (Status / Copy User ID) ────────────────────────────── */

.actionGroup {
	display: flex;
	flex-direction: column;
	margin: 0 1rem;
	border-radius: 0.5rem;
	background-color: var(--background-tertiary, rgba(255, 255, 255, 0.04));
	overflow: hidden;
}

.statusRow {
	display: flex;
	flex-direction: column;
}

.actionButton {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: none;
	background: transparent;
	color: var(--text-primary);
	text-align: left;
	font: inherit;
	font-weight: 500;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.1s ease;
}

.actionButton:hover {
	background-color: var(--background-modifier-hover, rgba(255, 255, 255, 0.04));
}

.actionIcon {
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.actionLabel {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chevron {
	color: var(--text-tertiary);
	flex-shrink: 0;
	transition: transform 150ms ease;
}

.chevronOpen {
	transform: rotate(90deg);
}

.divider {
	height: 1px;
	margin: 0 0.75rem;
	background-color: var(--background-modifier-accent, rgba(255, 255, 255, 0.06));
}

/* ── Status dot (in the collapsed row) ───────────────────────────────── */

.statusDot {
	width: 10px;
	height: 10px;
	border-radius: 9999px;
	flex-shrink: 0;
	margin-left: 0.125rem;
	box-shadow: 0 0 0 2px var(--background-tertiary, rgba(0, 0, 0, 0.2));
}

.statusOnline {
	background-color: var(--status-positive, #23a55a);
	color: var(--status-positive, #23a55a);
}

.statusIdle {
	background-color: var(--status-warning, #f0b232);
	color: var(--status-warning, #f0b232);
}

.statusDnd {
	background-color: var(--status-danger, #f23f42);
	color: var(--status-danger, #f23f42);
}

.statusOffline {
	background-color: var(--text-tertiary, #80848e);
	color: var(--text-tertiary, #80848e);
}

/* ── Status submenu (expanded picker) ────────────────────────────────── */

.statusMenu {
	display: flex;
	flex-direction: column;
	padding: 0.25rem 0.25rem 0.5rem;
	border-top: 1px solid var(--background-modifier-accent, rgba(255, 255, 255, 0.06));
}

.statusMenuItem {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.5rem 0.625rem;
	border: none;
	background: transparent;
	color: var(--text-primary);
	text-align: left;
	font: inherit;
	font-size: 0.875rem;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: background-color 0.1s ease;
}

.statusMenuItem:hover {
	background-color: var(--background-modifier-hover, rgba(255, 255, 255, 0.06));
}

.statusMenuIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.statusMenuText {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.125rem;
}

.statusMenuLabel {
	font-weight: 500;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.statusMenuDescription {
	font-size: 0.6875rem;
	color: var(--text-tertiary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.statusMenuCheck {
	color: var(--brand-primary, #5865f2);
	flex-shrink: 0;
}

/* ── Footer (Edit Profile CTA) ───────────────────────────────────────── */

.footer {
	padding: 0.75rem 1rem 1rem;
}
