.user-card-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
	background-color: rgba(0, 0, 0, 0.08);
	transition: opacity 0.15s ease;
	opacity: 0;

	&.active {
		display: block;
		opacity: 1;
	}
}

.user-card {
	position: absolute;
	width: 320px;
	color: var(--text);
	border-radius: var(--border1);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	pointer-events: none;
	opacity: 0;
	z-index: 1000;
	will-change: transform, opacity;
	transition: background var(--transition), border var(--transition),
		opacity var(--transition), box-shadow var(--transition),
		transform var(--transition);
	background: var(--dynamic-bg, var(--background));
	border: 1px solid var(--dynamic-border, var(--transp-2));
	overflow: hidden;
	max-width: 90vw;

	&::before {
		display: none;
	}

	@media (max-width: 480px) {
		width: calc(100vw - 40px);
		max-width: 100vw;
	}

	&.from-left {
		transform: none;
	}
	&.from-right {
		transform: none;
	}
	&.from-top {
		transform: none;
	}
	&.from-bottom {
		transform: none;
	}
}

.user-card-content.enhanced {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0;
	isolation: isolate;
}

.user-card-header {
	position: relative;
	height: 108px;

	.user-card-banner {
		position: absolute;
		inset: 0;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform: none;
			filter: none;
		}
		&::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 28px;
			background: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0) 0%,
				var(--background) 100%
			);
			pointer-events: none;
		}
	}

	.user-card-actions {
		position: absolute;
		top: 10px;
		right: 10px;
		display: flex;
		gap: 4px;
		z-index: 2;

		.user-card-social {
			width: 26px;
			height: 26px;
			display: grid;
			place-items: center;
			border-radius: 6px;
			color: var(--muted);
			transition: color 0.12s ease;
			pointer-events: auto;
			svg {
				width: 16px;
				height: 16px;
			}
			&:hover {
				color: var(--text);
			}
		}
	}

	.user-card-avatar {
		position: absolute;
		left: 14px;
		bottom: -28px;
		width: 72px;
		height: 72px;
		border-radius: 14px;
		overflow: hidden;
		border: 1px solid var(--dynamic-border, var(--transp-2));
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		background: var(--background);
		z-index: 2;
		pointer-events: auto;
		transform: translateZ(0);
		transition: transform 0.12s ease, box-shadow 0.12s ease,
			border var(--transition);

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
		}

		.uc-status-dot {
			position: absolute;
			right: 6px;
			bottom: 6px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			box-shadow: 0 0 0 2px var(--background);
			background-color: var(--muted);
		}
		.uc-status-dot.online {
			background-color: #2ecc71;
		}
		.uc-status-dot.offline {
			background-color: #9aa0a6;
		}
	}
}

.user-card-body {
	padding: 42px 16px 14px 16px;
	display: grid;
	grid-auto-rows: min-content;
	gap: 8px;
	background: var(--background);
	border-top: 1px solid var(--dynamic-border, var(--transp-2));
}

.user-card-info {
	display: flex;
	align-items: baseline;
	gap: 8px;

	.user-card-name {
		margin: 0;
		font-size: 17px;
		font-weight: 600;
		letter-spacing: 0.2px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.user-card-offline {
		font-size: 12px;
	}
}

.user-card-roles {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;

	.role-pill {
		--pill-color: var(--role-color);
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 5px 10px;
		border-radius: 999px;
		border: 1px solid var(--role-color);
        position: relative;
        background-color: var(--blurred-background);
        backdrop-filter: blur(10px);
        overflow: hidden;

        &::after {
            content: "";
            position: absolute;
            border-radius: 999px;
            background-color: var(--role-color);
            width: 50px;
            height: 50px;
            right: -10px;
            top: -20px;
            opacity: .7;
            z-index: -1;
            filter: blur(20px);
        }

		.role-swatch {
			width: 9px;
			height: 9px;
			border-radius: 3px;
		}

		.role-name {
			font-size: 12px;
			font-weight: 700;
		}
	}

	.roles-extra {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
        margin-left: var(--space-2xs);

		.role-dot {
			width: 18px;
			height: 18px;
			border-radius: 999px;
			border: 1px solid var(--dynamic-border, var(--transp-2));
			background: var(--dot-color, var(--transp-2));
			box-shadow: inset 0 0 0 1px
				color-mix(in srgb, var(--dot-color, #000) 18%, transparent);
            opacity: .8;
            transition: opacity 0.12s ease;

            &:hover {
                opacity: 1;
            }
		}
		.role-dot.more {
			display: grid;
			place-items: center;
			min-width: 24px;
			height: 24px;
			padding: 0 7px;
			font-size: 11px;
			font-weight: 700;
			color: var(--muted);
			background: transparent;
			border: 1px solid var(--dynamic-border, var(--transp-2));
			border-radius: 999px;
		}
	}
}

.user-card-goto {
	display: flex;
	justify-content: flex-end;
	margin-top: 2px;
}

.user-card .uc-sk-banner {
	height: 96px;
	width: 100%;
	border-radius: 0;
}
.user-card .uc-sk-avatar {
	width: 72px;
	height: 72px;
	border-radius: var(--border1);
}
.user-card .uc-sk-name {
	width: 60%;
	height: 14px;
	border-radius: var(--border05);
}
.user-card .uc-sk-sub {
	width: 40%;
	height: 12px;
	border-radius: var(--border05);
	margin-top: 6px;
}
.user-card .uc-sk-roles {
	gap: 6px;
}
.user-card .uc-sk-role-pill {
	width: 80px;
	height: 20px;
	border-radius: 999px;
}
.user-card .uc-sk-role-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
}
.user-card .uc-sk-button {
	width: 94px;
	height: 28px;
	border-radius: 8px;
}

@keyframes uc-in-right {
	from {
		opacity: 0;
		transform: translateX(8px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes uc-in-left {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes uc-in-top {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes uc-in-bottom {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes uc-out-right {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(6px);
	}
}
@keyframes uc-out-left {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(-6px);
	}
}
@keyframes uc-out-top {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(6px);
	}
}
@keyframes uc-out-bottom {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.user-card.active {
	opacity: 1;
	pointer-events: auto;
}

.user-card.active.from-right {
	animation: uc-in-right 0.14s ease-out both;
}
.user-card.active.from-left {
	animation: uc-in-left 0.14s ease-out both;
}
.user-card.active.from-top {
	animation: uc-in-top 0.14s ease-out both;
}
.user-card.active.from-bottom {
	animation: uc-in-bottom 0.14s ease-out both;
}

.user-card.hide.from-right {
	animation: uc-out-right 0.12s ease-in both;
}
.user-card.hide.from-left {
	animation: uc-out-left 0.12s ease-in both;
}
.user-card.hide.from-top {
	animation: uc-out-top 0.12s ease-in both;
}
.user-card.hide.from-bottom {
	animation: uc-out-bottom 0.12s ease-in both;
}

@media (max-width: 480px) {
	.user-card-header {
		height: 88px;
		.user-card-avatar {
			left: 12px;
			bottom: -24px;
			width: 56px;
			height: 56px;
			border-radius: 12px;
		}
	}
	.user-card-body {
		padding: 34px 12px 12px 12px;
	}
	.user-card-info .user-card-name {
		font-size: 15px;
	}
}
