/**
 * Qing 侧边工具栏 + 右下角在线咨询样式。
 *
 * 结构：
 *  .qing-st（右侧固定容器）
 *    > .qing-st__bar（深蓝竖排按钮组：回顶/邮箱/电话/WhatsApp/到底部）
 *    > .qing-st__toggle（下方独立收缩按钮）
 *  .qing-st-chat（右下角）
 *    > .qing-st-chat__panel（WhatsApp 快捷询盘面板）
 *    > .qing-st-chat__avatar（圆形头像 + 蓝色描边 + 红色角标）
 *
 * 收缩交互：.qing-st--collapsed 时按钮组滑出右侧屏幕，仅保留收缩按钮，箭头翻转。
 */

.qing-st {
	position: fixed;
	right: 0;
	top: 50%;
	/* 在垂直居中（自定义位置）基础上整体再下移 50px。 */
	transform: translateY(calc(-50% + 50px));
	z-index: 9998;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 28px;
}

/* -------- 竖排按钮组 -------- */
.qing-st__bar {
	display: flex;
	flex-direction: column;
	background: #14387f;
	border-radius: 6px 0 0 6px;
	/* 不再裁剪溢出：悬停提示需要从按钮左侧滑出显示。首尾按钮用 border-radius 保持圆角。 */
	transform: translateX(0);
	opacity: 1;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

/* 首尾按钮圆角，替代 .qing-st__bar 原来的 overflow:hidden 裁剪效果。 */
.qing-st__bar .qing-st__btn:first-child {
	border-radius: 6px 0 0 0;
}
.qing-st__bar .qing-st__btn:last-child {
	border-radius: 0 0 0 6px;
}

.qing-st__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	transition: background 0.2s ease;
}

/* -------- 悬停提示气泡：从按钮左侧向左滑出 -------- */
.qing-st__tip {
	position: absolute;
	right: 100%;
	top: 50%;
	margin-right: 10px;
	padding: 8px 16px;
	white-space: nowrap;
	background: #14387f;
	color: #ffffff;
	font-size: 15px;
	line-height: 1.2;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.25);
	/* 初始态：贴近按钮、透明、隐藏，并向右偏移一点，配合悬停从左往右滑出。 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%) translateX(12px);
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.28s;
	pointer-events: none;
	z-index: 1;
}

/* 小三角，指向按钮。 */
.qing-st__tip::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-left-color: #14387f;
}

.qing-st__btn:hover .qing-st__tip,
.qing-st__btn:focus-visible .qing-st__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

/* 按钮之间的细分隔线（首个无）。 */
.qing-st__bar .qing-st__btn + .qing-st__btn {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.qing-st__btn:hover {
	background: #1e4aa0;
	color: #ffffff;
}

.qing-st__btn svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* 自定义按钮：上传的 SVG/图片图标，统一着为白色以匹配深蓝背景。 */
.qing-st__btn--custom img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	display: block;
	filter: brightness(0) invert(1);
}

/* -------- 收缩按钮（独立于按钮组下方） -------- */
.qing-st__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	background: #14387f;
	border-radius: 6px 0 0 6px;
	color: #ffffff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.qing-st__toggle:hover {
	background: #1e4aa0;
}

.qing-st__toggle svg {
	width: 18px;
	height: 18px;
	display: block;
	transition: transform 0.35s ease;
}

/* -------- 收缩态：按钮组滑出右侧，仅留收缩按钮，箭头翻转指向左 -------- */
.qing-st--collapsed .qing-st__bar {
	transform: translateX(110%);
	opacity: 0;
	pointer-events: none;
}

.qing-st--collapsed .qing-st__toggle svg {
	transform: rotate(180deg);
}

/* ======== 右下角在线咨询 ======== */
.qing-st-chat {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

/* -------- 圆形头像：蓝色描边 + 红色角标 -------- */
/* 头像 hidden 时必须真正隐藏：span 上显式 display:block 会覆盖 [hidden] 默认的
   display:none，导致弹窗打开后头像仍显示，故显式声明 hidden 优先。 */
.qing-st-chat__avatar[hidden] {
	display: none !important;
}

.qing-st-chat__avatar {
	position: relative;
	/* 头像由 <button> 改为 <span>（role="button"）：span 是行内元素，
	   需显式 block 才能让宽高生效，并去掉行内元素默认基线间隙。 */
	display: block;
	width: 64px;
	height: 64px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	/* 双层描边：外圈蓝色 + 内圈白色间隙，贴合设计稿圆环效果。 */
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1e50c8, 0 6px 18px rgba(0, 0, 0, 0.2);
	transition: transform 0.25s ease;
}

.qing-st-chat__avatar:hover {
	transform: scale(1.05);
}

.qing-st-chat__avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.qing-st-chat__badge {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: #f04438;
	color: #ffffff;
	font-size: 12px;
	line-height: 20px;
	font-weight: 600;
	text-align: center;
	box-sizing: border-box;
	box-shadow: 0 2px 6px rgba(240, 68, 56, 0.5);
}

/* -------- WhatsApp 快捷询盘面板 -------- */
.qing-st-chat__panel {
	/* 绝对定位：以 .qing-st-chat 为基准，弹窗右下角锚定到「头像原来的位置」，
	   向上、向左展开。打开时头像隐藏、弹窗占据该位置；关闭时头像恢复。 */
	/* 直接相对视口右下角定位，避免外层或第三方样式改变定位基准。 */
	position: fixed !important;
	right: 20px !important;
	bottom: 0 !important;
	width: 360px !important;
	height: 240px;
	max-width: calc(100vw - 16px) !important;
	background: #f7f8fa;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(16, 24, 40, 0.22);
	/* 关闭态：从底部向上滑出动画的初始状态（下移 + 透明 + 隐藏）。
	   以底部为变换原点，配合 .is-open 实现「从底部往上」展开。 */
	transform: translateY(16px);
	opacity: 0;
	visibility: hidden;
	transform-origin: bottom right;
	will-change: transform, opacity;
	backface-visibility: hidden;
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0s linear 0.32s;
}

/* 打开态：滑到原位、显现。 */
.qing-st-chat__panel.is-open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0s;
}

/* 蓝色标题栏：右侧收起箭头。 */
.qing-st-chat__head {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background: #005c9f;
	height: 40px;
	padding: 0 14px;
}

.qing-st-chat__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
}

.qing-st-chat__close svg {
	width: 18px;
	height: 18px;
	display: block;
}

.qing-st-chat__form {
	padding: 28px 30px 20px;
	font-family: Arial, "Helvetica Neue", sans-serif;
	font-weight: 400;
}

.qing-st-chat__label {
	display: block;
	margin: 0 0 10px;
	color: #005c9f;
	font-size: 15px;
	font-weight: 400 !important;
	line-height: 20px;
}

.qing-st-chat__star {
	color: #005c9f;
	margin-right: 4px;
	font-weight: 400;
}

.qing-st-chat__input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #d0d5dd !important;
	border-radius: 5px;
	background: #ffffff;
	color: #1a2233;
	font-family: Arial, "Helvetica Neue", sans-serif;
	font-size: 15px;
	font-weight: 400 !important;
	line-height: 42px;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s ease;
}

.qing-st-chat__input:focus {
	border-color: #1e50c8;
}

.qing-st-chat__feedback {
	display: block;
	height: 0;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	font-family: Arial, "Helvetica Neue", sans-serif;
	font-size: 12px;
	font-weight: 400 !important;
	line-height: 18px;
	color: #667085;
}

.qing-st-chat__feedback.is-error {
	height: 18px;
	margin-top: 5px;
	color: #f04438;
}

.qing-st-chat__feedback.is-success {
	height: 18px;
	margin-top: 5px;
	color: #12b76a;
}

.qing-st-chat__submit {
	display: block;
	width: 100%;
	margin-top: 15px;
	height: 42px;
	padding: 0;
	border: none;
	border-radius: 5px;
	background: #005c9f;
	color: #ffffff;
	font-family: Arial, "Helvetica Neue", sans-serif;
	font-size: 15px;
	font-weight: 400 !important;
	line-height: 42px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.qing-st-chat__submit:hover {
	background: #006ebd;
}

.qing-st-chat__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* -------- 移动端适配 -------- */
@media (max-width: 767px) {
	.qing-st__btn,
	.qing-st__toggle {
		width: 40px;
		height: 40px;
	}

	/* 移动端无悬停，隐藏提示气泡，避免误触展示。 */
	.qing-st__tip {
		display: none;
	}

	.qing-st-chat__avatar {
		width: 54px;
		height: 54px;
	}

	.qing-st-chat__panel {
		width: calc(100vw - 36px);
	}

}

/* iPhone（含横屏）Safari 聚焦小于 16px 的输入框会自动缩放整页。 */
@media (max-width: 1024px) {
	@supports (-webkit-touch-callout: none) {
		.qing-st-chat__input {
			font-size: 16px;
		}
	}
}

/* 键盘弹出期间由 visualViewport 写入键盘遮挡高度，动态抬高面板 bottom，
   使整个面板完整停在键盘上方。
   该类只会由 JS 在 iOS 且输入框聚焦时添加，安卓布局完全不变。 */
.qing-st-chat.qing-st-chat--ios-keyboard .qing-st-chat__panel.is-open {
	top: auto !important;
	bottom: var(--qing-st-chat-keyboard-bottom, 8px) !important;
}