/* Identity-aware chat profile cards. Loaded after the legacy chat bundle. */
.layui-layer.pm-user-info {
	/* Layui positions its dialog with fixed top/left coordinates. Changing this
	 * to relative puts the card back in the page flow, often below the viewport. */
	position: fixed;
	overflow: hidden;
	border: 1px solid rgba(24, 46, 75, 0.1);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 22px 60px rgba(15, 33, 56, 0.24);
}

.layui-layer.pm-user-info > .layui-layer-setwin {
	top: 10px;
	right: 10px;
	z-index: 20;
	width: 30px;
	height: 30px;
	margin: 0;
}

.layui-layer.pm-user-info > .layui-layer-setwin .layui-layer-close {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	display: block;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.68);
	border-radius: 50%;
	background: rgba(12, 24, 42, 0.68) !important;
	background-image: none !important;
	box-shadow: 0 3px 12px rgba(8, 19, 34, 0.25);
	opacity: 1;
	transition: background-color .18s ease, box-shadow .18s ease;
}

.layui-layer.pm-user-info > .layui-layer-setwin .layui-layer-close::before,
.layui-layer.pm-user-info > .layui-layer-setwin .layui-layer-close::after {
	position: absolute;
	top: 13px;
	left: 7px;
	width: 14px;
	height: 2px;
	border-radius: 999px;
	background: #fff;
	content: "";
}

.layui-layer.pm-user-info > .layui-layer-setwin .layui-layer-close::before {
	transform: rotate(45deg);
}

.layui-layer.pm-user-info > .layui-layer-setwin .layui-layer-close::after {
	transform: rotate(-45deg);
}

.layui-layer.pm-user-info > .layui-layer-setwin .layui-layer-close:hover,
.layui-layer.pm-user-info > .layui-layer-setwin .layui-layer-close:focus-visible {
	background: rgba(19, 31, 48, 0.92) !important;
	box-shadow: 0 8px 20px rgba(8, 19, 34, 0.36);
	transform: none;
}

.pm-user-info .layui-layer-content {
	max-height: calc(100vh - 32px);
	overflow-x: hidden !important;
	overflow-y: auto !important;
	border-radius: inherit;
}

.pm-info-card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}

.pm-info-card .pm-info-card-bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
	background-color: #203a55;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.pm-info-card .pm-info-card-bg::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 18, 33, 0.06), rgba(7, 18, 33, 0.46));
	content: "";
	pointer-events: none;
}

.pm-info-card .pm-info-card-bg > * {
	position: relative;
	z-index: 1;
}

.pm-info-card .pm-info-card-avatar {
	box-sizing: content-box;
	width: 76px;
	padding-top: 14px;
}

.pm-info-card .pm-info-card-avatar .avatar--box {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
	margin: 0 auto;
	padding: 3px;
	border: 1px solid rgba(255, 255, 255, 0.78);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: 0 10px 24px rgba(5, 18, 34, 0.28);
	backdrop-filter: blur(8px);
}

.pm-info-card .pm-info-card-avatar img.avatar,
.pm-info-card .pm-info-card-avatar .avatar--box > img {
	display: block;
	box-sizing: border-box;
	width: 64px !important;
	height: 64px !important;
	border: 0;
	border-radius: 9px;
	object-fit: cover;
}

.pm-info-card .pm-info-card-avatar .tk-vip-icon,
.pm-info-card .pm-info-card-avatar .tk-m-icon {
	/* The shop's bundled badge rules use !important for its old overlay
	 * position; place the badge outside the portrait instead. */
	left: auto !important;
	top: auto !important;
	right: -13px !important;
	bottom: -5px !important;
	width: 21px !important;
	height: 21px !important;
	background-size: contain !important;
	filter: drop-shadow(0 4px 7px rgba(8, 18, 31, 0.32));
}

.pm-info-card .pm-info-card-bg .name {
	margin-top: 7px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.pm-info-card .pm-info-card-bg .desc {
	width: calc(100% - 44px);
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.88);
}

.pm-info-card .pm-info-card-identity {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: 0;
	right: 0;
	display: inline-flex;
	height: 23px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	box-sizing: border-box;
	width: max-content;
	min-width: 112px;
	margin: 0 auto;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	background: rgba(8, 20, 36, 0.36);
	box-shadow: 0 6px 16px rgba(7, 18, 31, 0.14);
	color: rgba(255, 255, 255, 0.94);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	backdrop-filter: blur(8px);
}

.pm-info-card .pm-info-card-identity i {
	font-size: 10px;
}

.pm-info-card--vip .pm-info-card-bg {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 170px;
	aspect-ratio: var(--pm-card-cover-ratio, 576 / 365);
	padding-bottom: 20px;
	background-color: #0c1726;
	background-position: var(--pm-card-cover-position, center center);
	background-size: var(--pm-card-cover-fit, contain);
}

.pm-info-card--vip .pm-info-card-avatar,
.pm-info-card--admin .pm-info-card-avatar {
	padding-top: 29px;
}

.pm-info-card--admin .pm-info-card-bg {
	height: 145px;
}

.pm-info-card--vip .pm-info-card-identity,
.pm-info-card--admin .pm-info-card-identity {
	top: 6px;
	height: 19px;
}

.pm-info-card--vip .pm-info-card-bg .name,
.pm-info-card--admin .pm-info-card-bg .name {
	margin-top: 3px;
}

.pm-info-card--vip .pm-info-card-bg .desc,
.pm-info-card--admin .pm-info-card-bg .desc {
	margin-top: 3px;
}

.pm-info-card--vip .pm-info-card-bg::before {
	background:
		radial-gradient(circle at 82% 18%, rgba(250, 212, 126, 0.16), transparent 31%),
		linear-gradient(180deg, rgba(7, 18, 33, 0.02), rgba(5, 15, 28, 0.4));
}

.pm-info-card--vip .pm-info-card-avatar .avatar--box {
	width: 66px;
	height: 66px;
	padding: 3px;
	border: 1px solid rgba(255, 220, 143, 0.92);
	background: linear-gradient(145deg, rgba(255, 232, 172, 0.32), rgba(132, 96, 33, 0.18));
	box-shadow:
		0 0 0 4px rgba(208, 166, 82, 0.18),
		0 0 22px rgba(244, 202, 112, 0.32),
		0 12px 26px rgba(3, 12, 25, 0.32);
}

.pm-info-card--vip .pm-info-card-avatar img.avatar,
.pm-info-card--vip .pm-info-card-avatar .avatar--box > img {
	width: 58px !important;
	height: 58px !important;
	border: 1px solid rgba(255, 245, 214, 0.92);
}

.pm-info-card--vip .pm-info-card-identity {
	border-color: rgba(250, 211, 125, 0.48);
	background: linear-gradient(135deg, rgba(72, 54, 25, 0.72), rgba(25, 35, 52, 0.68));
	color: #ffe3a0;
}

.pm-info-card--vip .bar span i {
	color: #8c611e;
}

/* A light member credential: etched gold lines instead of an empty white base. */
/* Stable rows keep public, private-location and owner cards the same height. */
.pm-info-card-body {
	--pm-card-self-ink: #63758c;
	--pm-card-self-soft: #eff4fa;
	--pm-card-self-line: #e1e8f0;
	position: relative;
	display: grid;
	grid-template-rows: 22px 20px 30px;
	row-gap: 10px;
	box-sizing: border-box;
	padding: 10px 16px;
}

.pm-info-card .bar {
	box-sizing: border-box;
	width: 100%;
	max-width: 210px;
	justify-self: center;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 22px;
}

.pm-info-card .bar span + span {
	border-left: 0;
}

.pm-info-card .city,
.pm-info-card .pm-info-card-location-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	height: 20px;
	margin: 0;
	color: #475669;
	font-size: 14px;
	line-height: 20px;
}

.pm-info-card .city span {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pm-info-card .pm-info-card-location-placeholder::after {
	width: 28px;
	height: 1px;
	background: var(--pm-card-self-line);
	content: "";
}

.pm-info-card .infobtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 35px;
	margin: 0;
}

.pm-info-card .infobtn span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	width: 94px;
	height: 30px;
	min-width: 0;
	min-height: 30px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 8px;
	font-size: 14px;
	line-height: 20px;
}

/* An ornamental signature replaces actions only on the viewer's own card. */
.pm-info-card-self {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	color: var(--pm-card-self-ink);
}

.pm-info-card-self::before,
.pm-info-card-self::after {
	width: 32px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--pm-card-self-line));
	content: "";
}

.pm-info-card-self::after {
	transform: rotate(180deg);
}

.pm-info-card-self-icon {
	display: inline-flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid var(--pm-card-self-line);
	border-radius: 50%;
	background: var(--pm-card-self-soft);
	font-size: 12px;
}

.pm-info-card-self-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: left;
}

.pm-info-card-self-copy strong {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

.pm-info-card-self-copy small {
	font-size: 10px;
	line-height: 13px;
	letter-spacing: .08em;
}

.pm-info-card--vip .pm-info-card-body {
	--pm-card-self-ink: #80602e;
	--pm-card-self-soft: #f6ecd7;
	--pm-card-self-line: #dfcea9;
	grid-template-rows: 22px 20px 30px auto;
	isolation: isolate;
	overflow: hidden;
	padding: 21px 22px 17px;
	border-top: 1px solid rgba(184, 145, 76, .4);
	background:
		radial-gradient(ellipse at 100% 100%, rgba(218, 189, 125, .19), transparent 60%),
		radial-gradient(ellipse at 0 0, rgba(255, 255, 255, .85), transparent 60%),
		linear-gradient(135deg, #fcf9f1, #f6efdf);
	color: #413b30;
}

.pm-info-card--vip .pm-info-card-body::before {
	position: absolute;
	z-index: -1;
	right: -72px;
	bottom: -102px;
	width: 218px;
	height: 218px;
	border: 1px solid rgba(167, 125, 51, .14);
	border-radius: 50%;
	box-shadow: 0 0 0 13px rgba(167, 125, 51, .035), 0 0 0 29px rgba(167, 125, 51, .025);
	content: "";
	pointer-events: none;
}

.pm-info-card--vip .pm-info-card-body::after {
	position: absolute;
	z-index: -1;
	inset: 8px;
	border: 1px solid rgba(167, 125, 51, .13);
	border-radius: 0 0 7px 7px;
	content: "";
	pointer-events: none;
}

.pm-info-card--vip .pm-info-card-avatar {
	flex-shrink: 0;
	margin: 0 auto;
}

.pm-info-card--vip .pm-info-card-bg .desc {
	flex-shrink: 0;
}

.pm-info-card--vip .bar {
	max-width: none;
	gap: 0;
	margin: 0;
	padding: 0 24px;
	color: #504737;
	font-size: 13px;
	line-height: 22px;
}

.pm-info-card--vip .bar span + span {
	border-left: 1px solid rgba(162, 128, 66, .22);
}

.pm-info-card--vip .bar span i {
	margin-left: 8px;
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pm-info-card--vip .city {
	height: 20px;
	min-height: 0;
	margin: 0;
	color: #6d624e;
	font-size: 14px;
	line-height: 20px;
}

.pm-info-card--vip .infobtn {
	display: flex;
	justify-content: center;
	gap: 35px;
	margin: 0;
}

.pm-info-card--vip .infobtn span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	min-width: 0;
	min-height: 30px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 8px;
	border: 1px solid #d7c29a;
	border-radius: 6px;
	background: rgba(255, 253, 247, .88);
	color: #65502d;
	font-size: 13px;
	line-height: 18px;
	box-shadow: 0 3px 8px rgba(109, 84, 40, .04);
	transition: background-color .18s ease, box-shadow .18s ease;
}

.pm-info-card--vip .infobtn .follow {
	border-color: #3d3740;
	background: linear-gradient(135deg, #393744, #242936);
	color: #f5dfae;
	box-shadow: 0 4px 10px rgba(42, 36, 30, .1);
}

.pm-info-card--vip .infobtn .follow.has {
	border-color: #d7c29a;
	background: #ece3d0;
	color: #635136;
}

.pm-info-card--vip .infobtn span:hover,
.pm-info-card--vip .infobtn span:focus-visible {
	box-shadow: 0 4px 12px rgba(92, 65, 22, .16);
}

.pm-info-card-membership {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid rgba(167, 125, 51, .2);
	color: #80602e;
	font-size: 9px;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: .13em;
}

.pm-info-card-membership i {
	font-size: 10px;
}

.pm-info-card-membership-label {
	margin-left: 3px;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .04em;
}

/* The uploader follows the real cover bounds at every configured ratio. */
.pm-info-card .pm-info-card-bg > .tk-upload-infocard-bg,
.pm-info-card .pm-info-card-bg > .pm-info-card-upload-hint {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.pm-info-card .pm-info-card-bg > .tk-upload-infocard-bg {
	z-index: 4;
}

.pm-info-card .pm-info-card-upload-hint {
	display: none;
	z-index: 3;
	align-items: center;
	justify-content: center;
	background: rgba(13, 22, 36, .65);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	pointer-events: none;
}

.pm-info-card .pm-info-card-bg:hover > .pm-info-card-upload-hint {
	display: flex;
}

.pm-info-card--admin .pm-info-card-bg {
	background-image:
		radial-gradient(circle at 84% 18%, rgba(117, 136, 255, 0.42), transparent 33%),
		radial-gradient(circle at 10% 92%, rgba(35, 190, 229, 0.28), transparent 34%),
		linear-gradient(135deg, #101b36 0%, #243d78 53%, #503779 100%);
}

.pm-info-card--admin .pm-info-card-bg::before {
	background: linear-gradient(180deg, rgba(10, 18, 44, 0.03), rgba(9, 17, 39, 0.34));
}

.pm-info-card--admin .pm-info-card-avatar .avatar--box {
	width: 66px;
	height: 66px;
	padding: 3px;
	border-color: rgba(165, 203, 255, 0.94);
	background: linear-gradient(145deg, rgba(98, 186, 255, 0.34), rgba(120, 82, 221, 0.28));
	box-shadow:
		0 0 0 4px rgba(93, 147, 255, 0.17),
		0 0 22px rgba(109, 143, 255, 0.34),
		0 12px 26px rgba(5, 11, 30, 0.34);
}

.pm-info-card--admin .pm-info-card-avatar img.avatar,
.pm-info-card--admin .pm-info-card-avatar .avatar--box > img {
	width: 58px !important;
	height: 58px !important;
	border: 1px solid rgba(225, 238, 255, 0.92);
}

.pm-info-card--admin .pm-info-card-identity {
	border-color: rgba(164, 199, 255, 0.45);
	background: linear-gradient(135deg, rgba(26, 63, 122, 0.72), rgba(71, 39, 116, 0.7));
	color: #d8eaff;
}

.pm-info-card--admin .bar span i {
	color: #557fe7;
}

.pm-info-card--missing {
	display: flex;
	min-height: 160px;
	align-items: center;
	justify-content: center;
	color: #8492a6;
}

body.night .pm-info-card-body {
	--pm-card-self-ink: #b4c4d9;
	--pm-card-self-soft: #2b3d54;
	--pm-card-self-line: #43566f;
}

body.night .pm-info-card .city { color: #b4c4d9; }
body.night .pm-info-card .bar span + span { border-left-color: #43566f; }

body.night .pm-info-card--vip .pm-info-card-body {
	--pm-card-self-ink: #e4c58a;
	--pm-card-self-soft: #302e34;
	--pm-card-self-line: #756343;
	border-top-color: rgba(218, 184, 115, .28);
	background: radial-gradient(ellipse at 100% 100%, rgba(160, 124, 61, .12), transparent 65%), linear-gradient(135deg, #272630, #20232d);
	color: #e9dec6;
}

body.night .pm-info-card--vip .bar,
body.night .pm-info-card--vip .city {
	color: #ddd2be;
}

body.night .pm-info-card--vip .bar span i,
body.night .pm-info-card--vip .pm-info-card-membership {
	color: #e4c58a;
}

body.night .pm-info-card--vip .infobtn span {
	border-color: #756343;
	background: #302e34;
	color: #e4c58a;
}

body.night .layui-layer.pm-user-info,
body.night .pm-info-card {
	border-color: rgba(154, 184, 224, 0.14);
	background: #253347;
}

@media (max-width: 480px) {
	.layui-layer.pm-user-info {
		max-width: calc(100vw - 28px);
	}

	.layui-layer.pm-user-info > .layui-layer-setwin {
		top: 8px;
		right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.layui-layer.pm-user-info,
	.pm-info-card *,
	.pm-info-card *::before,
	.pm-info-card *::after {
		animation: none !important;
		transition: none !important;
	}
}