/* ── UserArea — matches Fluxer's panel-control pattern ──────────────── */

.wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--panel-control-bg);
	position: relative;
	flex-shrink: 0;
	/* ChannelTextarea.mainWrapper ends up 2px taller than
	   --input-container-min-height because .uploadColumn's
	   --textarea-side-button-padding adds content that overflows the
	   intended min-height. Rather than fight that calculation (which
	   would shift the plus-button alignment with avatar rows), we
	   match the user area to the textarea's actual rendered height
	   so they're pixel-perfect identical on the same horizontal line. */
	min-height: calc(var(--input-container-min-height) + 2px);
	box-sizing: border-box;
	box-shadow: inset 0 1px 0 var(--user-area-divider-color);
}

.separator {
	display: none;
}

.container {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	padding: var(--user-area-padding-y) var(--user-area-padding-x);
	box-sizing: border-box;
	background-color: transparent;
	width: 100%;
	flex: 1;
}

.userInfo {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	flex: 1;
	min-width: 0;
	cursor: pointer;
	padding: 0 var(--spacing-2);
	margin: 0;
	border-radius: var(--radius-md);
	height: var(--user-area-content-height);
	position: relative;
	transition: color var(--transition-normal);
	outline: none;
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	text-align: left;
}

.userInfo::before {
	content: '';
	position: absolute;
	inset: calc(var(--spacing-1) * -1);
	border-radius: calc(var(--radius-md) + var(--spacing-1));
	background-color: transparent;
	z-index: -1;
	transition: background-color var(--transition-normal);
}

.userInfo:hover::before {
	background-color: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.nameBlock {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	user-select: text;
	-webkit-user-select: text;
	gap: 0.0625rem;
}

.displayName {
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.125rem;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.status {
	font-size: 0.6875rem;
	line-height: 1rem;
	color: var(--text-primary-muted);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	margin-top: -0.0625rem;
	opacity: 0.85;
}

.controls {
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
	flex-shrink: 0;
	padding-left: var(--spacing-3);
}

.controlButton {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	width: 32px;
	background-color: transparent;
	color: var(--control-button-normal-text);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	position: relative;
	padding: 0;
}

.controlButton:hover {
	background-color: color-mix(in srgb, var(--control-button-normal-text) 10%, transparent);
	color: var(--control-button-hover-text, var(--text-primary));
}

.controlButtonActive {
	background-color: color-mix(in srgb, var(--control-button-danger-text) 10%, transparent);
	color: var(--control-button-danger-text);
}

.controlButtonActive:hover {
	background-color: color-mix(in srgb, var(--control-button-danger-text) 20%, transparent);
	color: var(--control-button-danger-text);
}

.controlIcon {
	height: 20px;
	width: 20px;
}
