/* 全站右下角联系浮层（px 固定尺寸，不随根字号缩放） */

.footer-contact-float {
	position: fixed;
	right: 4px;
	bottom: 10px;
	z-index: 120;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-family: s-regular, sans-serif;
}

.footer-contact-float__pill {
	width: 50px;
	background: #ffffff;
	border-radius: 25px;
	box-shadow: 0px 2px 8px 0px rgba(161,169,177,0.2);
	overflow: visible;
	display: flex;
	flex-direction: column;
}

.footer-contact-float__cell {
	position: relative;
	z-index: 0;
	--float-row-h: 50px;
	--float-icon-sm: 22px;
	--float-icon-lg: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--float-row-h);
	border-bottom: 1px solid #eeeeee;
}

.footer-contact-float__cell:hover,
.footer-contact-float__cell:focus-within {
	z-index: 2;
}

.footer-contact-float__cell:last-child {
	border-bottom: 0;
}

.footer-contact-float__trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--float-row-h);
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}

.footer-contact-float__trigger:focus-visible {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

.footer-contact-float__iconstack {
	position: relative;
	flex-shrink: 0;
}

.footer-contact-float__iconstack--sm {
	width: 22px;
	height: 22px;
}

.footer-contact-float__iconstack--backtop {
	width: 12px;
	height: 7px;
}

.footer-contact-float__icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.footer-contact-float__icon--active {
	opacity: 0;
}

.footer-contact-float__cell:hover .footer-contact-float__icon--normal,
.footer-contact-float__cell:focus-within .footer-contact-float__icon--normal {
	opacity: 0;
}

.footer-contact-float__cell:hover .footer-contact-float__icon--active,
.footer-contact-float__cell:focus-within .footer-contact-float__icon--active {
	opacity: 1;
}

.footer-contact-float__avatar-wrap {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.footer-contact-float__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.footer-contact-float__trigger--avatar {
	min-height: var(--float-row-h);
}

.footer-contact-float__trigger--placeholder {
	background: #e8e8e8;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	min-height: var(--float-row-h);
	margin: 0 auto;
}

.footer-contact-float__pop {
	position: absolute;
	right: 100%;
	/* 用 padding 代替 margin：避免移入弹窗时悬停断开 */
	padding-right: 12px;
	box-sizing: content-box;
	min-width: 160px;
	max-width: 240px;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
}

/* 电话、在线客服：弹层顶与 icon 顶对齐 */
.footer-contact-float__cell--phone .footer-contact-float__pop,
.footer-contact-float__cell--chat .footer-contact-float__pop {
	top: calc((var(--float-row-h) - var(--float-icon-sm)) / 2);
	bottom: auto;
	transform: translateX(4px);
}

/* 顾问二维码：弹层底与 icon 底对齐 */
.footer-contact-float__cell--consultant .footer-contact-float__pop {
	top: auto;
	bottom: calc((var(--float-row-h) - var(--float-icon-lg)) / 2);
	transform: translateX(4px);
}

.footer-contact-float__cell:hover .footer-contact-float__pop,
.footer-contact-float__cell:focus-within .footer-contact-float__pop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
}

/* 会话格：弹层仅随鼠标悬停；点击后 :focus-within 会拉住弹层，无悬停时强制收起 */
.footer-contact-float__cell--chat:focus-within:not(:hover) .footer-contact-float__pop {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(4px);
}

.footer-contact-float__pop-inner {
	position: relative;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0px 2px 8px 0px rgba(161, 169, 177, 0.2);
	padding: 9px 14px;
}

.footer-contact-float__pop-inner::after {
	content: '';
	position: absolute;
	left: 100%;
	/* 箭头约在 icon 高度 75% 处（自上向下），非竖直正中 */
	top: calc(var(--float-icon-sm) * 0.75);
	margin-top: 0;
	transform: translateY(-50%);
	border-width: 6px 0 6px 7px;
	border-style: solid;
	border-color: transparent transparent transparent #ffffff;
	/* box-shadow 不作用在 border 三角上，用与主卡片一致的 drop-shadow 连成一体 */
	filter: drop-shadow(0 2px 8px rgba(161, 169, 177, 0.2));
}

/* 二维码弹窗：白底底与 icon 底对齐，箭头约在 icon 高度 25% 处（自上向下） */
.footer-contact-float__cell--consultant .footer-contact-float__pop-inner::after {
	top: calc(100% - var(--float-icon-lg) * 0.75);
	transform: translateY(-50%);
}

.footer-contact-float__pop--wide {
	min-width: 200px;
	max-width: 280px;
}

.footer-contact-float__pop-title {
	font-size: 15px;
	color: #1D1D1F;
	line-height: 20px;
	margin-bottom: 2px;
	font-family: s-semibold;
}

.footer-contact-float__pop-sub {
	font-size: 14px;
	color: #616266;
	line-height: 19px;
	font-family: s-medium;
}

.footer-contact-float__chat-line {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 15px;
	color: #1D1D1F;
	line-height: 20px;
	margin-bottom: 2px;
	font-family: s-semibold;
}

.footer-contact-float__chat-line--hint {
	font-size: 14px;
	color: #616266;
	line-height: 19px;
	font-family: s-medium;
}

.footer-contact-float__chat-line--title:hover,
.footer-contact-float__chat-line--title:focus-visible {
	text-decoration: underline;
}

.footer-contact-float__pop-consult-title {
	font-size: 15px;
	color: #1D1D1F;
	line-height: 20px;
	margin-bottom: 2px;
	font-family: s-semibold;
}

.footer-contact-float__pop-consult-sub {
	font-size: 14px;
	color: #616266;
	line-height: 19px;
	font-family: s-medium;
	margin-bottom: 8px;
}

/* .footer-contact-float__qr-wrap {
	display: flex;
	justify-content: center;
} */

.footer-contact-float__qr {
	display: block;
	width: 68px;
	height: 68px;
	object-fit: contain;
}

.footer-contact-float__backtop {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-contact-float__backtop:hover,
.footer-contact-float__backtop:focus-visible {
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.footer-contact-float__backtop:focus-visible {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

.footer-contact-float__backtop:hover .footer-contact-float__icon--normal,
.footer-contact-float__backtop:focus-visible .footer-contact-float__icon--normal {
	opacity: 0;
}

.footer-contact-float__backtop:hover .footer-contact-float__icon--active,
.footer-contact-float__backtop:focus-visible .footer-contact-float__icon--active {
	opacity: 1;
}