/*
 * SEO 站内优化 · AI 客服助手 前台样式
 *
 * 约定：
 *   - BEM 命名，块名 sdfj-chat（避免与主题/其它插件冲突）
 *   - 不使用 !important，用足够具体的类名覆盖
 *   - 移动优先，断点 480 / 768 / 1024
 *   - 颜色走 CSS 变量，品牌色由后台注入 --sdfj-chat-accent
 */

.sdfj-chat {
	/* 兜底主色 = 华健生物的品牌深蓝；实际值由后台「主色调」注入覆盖。
	 * 底座这里原本是珠宝时期的金棕 #b1925a。 */
	--sdfj-chat-accent: #17357f;
	--sdfj-chat-ink: #1f1c18;
	--sdfj-chat-muted: #6d655c;
	--sdfj-chat-line: #e8e3db;
	--sdfj-chat-bg: #fffdfa;
	--sdfj-chat-bot: #f4f0e9;
	--sdfj-chat-radius: 16px;
	--sdfj-chat-shadow: 0 18px 48px rgba(31, 28, 24, .18);
	--sdfj-chat-gap: 16px;

	position: fixed;
	z-index: 99990;
	bottom: max(var(--sdfj-chat-gap), env(safe-area-inset-bottom, 0px));
	font-family: inherit;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sdfj-chat-ink);
	-webkit-font-smoothing: antialiased;
}

.sdfj-chat--right { right: var(--sdfj-chat-gap); }
.sdfj-chat--left  { left: var(--sdfj-chat-gap); }

/* ── 悬浮按钮 ───────────────────────────────────────────── */

/*
 * 品牌圆钮：白底 + 徽标铺满。
 *
 * 设计取舍：底座原本是「品牌色实底 + 白色小图标」，观感上像一枚通用客服气泡。
 * 现在改成「白色圆底 + 徽标占满」，理由有三：
 *   1. 徽标本身是金色 + 深棕描边，压在深蓝实底上会糊成一片；白底才能看清细节；
 *   2. 白底圆钮在任何页面底色上都不抢眼，只有金色徽标露出来，品牌感更强；
 *   3. 去掉彩色外圈后，它与右下角其他浮动件（白底回顶按钮）形成同一套语言。
 */
.sdfj-chat__launcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--sdfj-chat-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	overflow: hidden;
	/* 白底在浅色页面上需要描边才立得住；用极淡的一圈 + 柔和投影，
	 * 而不是加粗色环 —— 色环就是用户说的"蓝圈"，会让圆钮显脏。 */
	box-shadow:
		0 0 0 1px rgba(18, 39, 92, .06),
		0 8px 24px rgba(18, 39, 92, .16);
	transition: transform .2s ease, box-shadow .2s ease;
}

/* 有文案时按钮从正圆变胶囊（宽度交给内容） */
.sdfj-chat__launcher:has(.sdfj-chat__launcher-text:not(:empty)) {
	width: auto;
	padding: 0 20px 0 8px;
	border-radius: 999px;
}

.sdfj-chat__launcher:hover,
.sdfj-chat__launcher:focus-visible {
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px rgba(18, 39, 92, .1),
		0 12px 30px rgba(18, 39, 92, .22);
}

.sdfj-chat__launcher:focus-visible {
	outline: 2px solid var(--sdfj-chat-accent);
	outline-offset: 3px;
}

/*
 * 图标容器铺满整枚圆钮。
 *
 * 原来是 32px 的小图标 + 一圈内边距，徽标在 60px 的钮里显得偏小、
 * 周围一圈白边浪费了位置。改成整枚铺满后，徽标直径接近 60px，
 * 在页面边缘也能一眼认出是谁。
 */
.sdfj-chat__launcher-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	flex: 1 1 auto;
}

/* 有文字时图标退回固定尺寸，避免把文字挤出去 */
.sdfj-chat__launcher:has(.sdfj-chat__launcher-text:not(:empty)) .sdfj-chat__launcher-icon {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
}

/*
 * 徽标图：铺满圆形，不再叠白底。
 *
 * 圆钮本身已经是白色，这里再加一层白底等于双层白，
 * 而且会把透明徽标的边缘压暗。直接 cover 铺满即可。
 */
.sdfj-chat__launcher-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* 有文案时才留文字位置，否则就是纯圆钮 */
.sdfj-chat__launcher-text:empty { display: none; }

.sdfj-chat[data-open="1"] .sdfj-chat__launcher {
	opacity: 0;
	visibility: hidden;
	transform: scale(.85);
}

/* ── 面板 ───────────────────────────────────────────────── */

.sdfj-chat__panel {
	position: absolute;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(384px, calc(100vw - 32px));
	height: min(620px, calc(100vh - 120px));
	background: var(--sdfj-chat-bg);
	border: 1px solid var(--sdfj-chat-line);
	border-radius: var(--sdfj-chat-radius);
	box-shadow: var(--sdfj-chat-shadow);
	overflow: hidden;
	transform-origin: bottom right;
	animation: sdfj-chat-in .22s ease-out both;
}

.sdfj-chat--right .sdfj-chat__panel { right: 0; }
.sdfj-chat--left  .sdfj-chat__panel { left: 0; transform-origin: bottom left; }

.sdfj-chat__panel[hidden] { display: none; }

@keyframes sdfj-chat-in {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.sdfj-chat__panel { animation: none; }
	.sdfj-chat__launcher { transition: none; }
}

/* 头部 */

.sdfj-chat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--sdfj-chat-accent);
	color: #fff;
}

.sdfj-chat__head-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sdfj-chat__head-text strong {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}

.sdfj-chat__head-text span {
	font-size: 12px;
	opacity: .88;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * 关闭按钮。
 *
 * 必须自己把内容居中，不能指望浏览器：
 * 很多主题（含本站 Astra 子主题）会给 `button { text-align: inherit }`，
 * 这会盖掉 UA 默认的 `text-align: center`。文字字形一旦变成左对齐，
 * 在 30px 的圆里就是偏左 9px —— 圆框看着没问题，叉号却贴着左边。
 * flex 居中的好处是它只依赖盒模型，不受字体度量与 text-align 影响。
 */
.sdfj-chat__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	/* line-height 归零：SVG 是块级替换元素，留着行高只会多出一个行盒缝隙 */
	line-height: 0;
	cursor: pointer;
	transition: background .2s ease;
}

.sdfj-chat__close svg {
	display: block;
	flex: 0 0 auto;
}

.sdfj-chat__close:hover { background: rgba(255, 255, 255, .3); }

/* 消息区 */

.sdfj-chat__log {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sdfj-chat__msg {
	display: flex;
	max-width: 100%;
}

.sdfj-chat__msg--bot { justify-content: flex-start; }
.sdfj-chat__msg--user { justify-content: flex-end; }

/* 人工客服：和 AI 助手是两种视觉。
 * 客户必须一眼看出「现在跟我说话的是人」——
 * 这决定了他是继续追问还是愿意等，也决定了这段对话算不算数。 */
.sdfj-chat__msg--agent { justify-content: flex-start; }

.sdfj-chat__msg--agent .sdfj-chat__bubble {
	background: #fff;
	border: 1px solid var(--sdfj-chat-accent);
	border-bottom-left-radius: 4px;
	box-shadow: 0 2px 10px rgba(31, 28, 24, .06);
}

.sdfj-chat__from {
	display: block;
	/* 占满一整行，把气泡挤到下一行 —— 标签永远在气泡上方 */
	width: 100%;
	margin-bottom: 4px;
	font-size: 11px;
	font-style: normal;
	letter-spacing: .02em;
	color: var(--sdfj-chat-accent);
}

/* 让上面那条「标签独占一行」生效 */
.sdfj-chat__msg--agent { flex-wrap: wrap; }

.sdfj-chat__img {
	display: block;
	max-width: 100%;
	max-height: 240px;
	margin: 0 0 6px;
	border-radius: 10px;
}

/* 面板没开时收到客服回复：按钮上点一个红点 */
.sdfj-chat--unread .sdfj-chat__launcher::after {
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #e0393e;
	border: 2px solid #fff;
	animation: sdfj-chat-pop .5s ease;
}

.sdfj-chat__launcher { position: relative; }

@keyframes sdfj-chat-pop {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

.sdfj-chat__bubble {
	max-width: 84%;
	padding: 10px 13px;
	border-radius: 14px;
	white-space: pre-wrap;
	word-break: break-word;
	background: var(--sdfj-chat-bot);
	color: var(--sdfj-chat-ink);
}

.sdfj-chat__msg--user .sdfj-chat__bubble {
	background: var(--sdfj-chat-accent);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.sdfj-chat__msg--bot .sdfj-chat__bubble { border-bottom-left-radius: 4px; }

/* 开场问题与追问建议 */

.sdfj-chat__starters,
.sdfj-chat__followups {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.sdfj-chat__starter,
.sdfj-chat__followup {
	padding: 7px 11px;
	border: 1px solid var(--sdfj-chat-line);
	border-radius: 999px;
	background: transparent;
	color: var(--sdfj-chat-muted);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.sdfj-chat__starter:hover,
.sdfj-chat__followup:hover {
	border-color: var(--sdfj-chat-accent);
	color: var(--sdfj-chat-accent);
	background: rgba(0, 0, 0, .015);
}

/* 输入中 */

.sdfj-chat__typing {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px 10px;
	color: var(--sdfj-chat-muted);
	font-size: 13px;
}

.sdfj-chat__typing[hidden] { display: none; }
.sdfj-chat__typing em { font-style: normal; }

.sdfj-chat__dots { display: inline-flex; gap: 3px; }

.sdfj-chat__dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sdfj-chat-accent);
	opacity: .45;
	animation: sdfj-chat-dot 1.1s infinite ease-in-out;
}

.sdfj-chat__dots i:nth-child(2) { animation-delay: .16s; }
.sdfj-chat__dots i:nth-child(3) { animation-delay: .32s; }

@keyframes sdfj-chat-dot {
	0%, 80%, 100% { transform: translateY(0); opacity: .35; }
	40%           { transform: translateY(-3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.sdfj-chat__dots i { animation: none; opacity: .6; }
}

/* 输入区 */

.sdfj-chat__form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--sdfj-chat-line);
	background: #fff;
}

.sdfj-chat__input {
	flex: 1 1 auto;
	min-height: 38px;
	max-height: 120px;
	padding: 9px 11px;
	border: 1px solid var(--sdfj-chat-line);
	border-radius: 10px;
	background: #fff;
	color: var(--sdfj-chat-ink);
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	resize: none;
	overflow-y: auto;
}

.sdfj-chat__input:focus {
	outline: none;
	border-color: var(--sdfj-chat-accent);
	box-shadow: 0 0 0 2px rgba(177, 146, 90, .16);
}

.sdfj-chat__send {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--sdfj-chat-accent);
	color: #fff;
	cursor: pointer;
	transition: opacity .2s ease;
}

.sdfj-chat__send:disabled { opacity: .45; cursor: not-allowed; }

.sdfj-chat__foot {
	margin: 0;
	padding: 8px 14px 4px;
	background: #fff;
	color: var(--sdfj-chat-muted);
	font-size: 11px;
	line-height: 1.45;
	text-align: center;
}

/* 开发方署名：常驻面板底部，颜色比功能说明更淡，不与客服内容争夺注意力 */
.sdfj-chat__credit {
	margin: 0;
	padding: 0 14px 10px;
	background: #fff;
	color: #9aa3af;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: .02em;
	text-align: center;
}

.sdfj-chat__credit a {
	color: #7b8794;
	text-decoration: none;
	border-bottom: 1px solid rgba(123, 135, 148, .4);
}

.sdfj-chat__credit a:hover {
	color: var(--sdfj-chat-accent);
	border-color: var(--sdfj-chat-accent);
}

/* ── 响应式 ─────────────────────────────────────────────── */

/* 小屏：接近全屏的底部抽屉，避免键盘弹起后输入框被挤出视口 */
@media (max-width: 480px) {
	.sdfj-chat {
		--sdfj-chat-gap: 12px;
	}

	.sdfj-chat__panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 82vh;
		max-height: calc(100vh - 56px);
		border-radius: 18px 18px 0 0;
		border-bottom: 0;
	}

	.sdfj-chat--right .sdfj-chat__panel,
	.sdfj-chat--left .sdfj-chat__panel {
		left: 0;
		right: 0;
	}

	.sdfj-chat__bubble { max-width: 90%; }
	.sdfj-chat__log { padding: 14px 12px; }
}

@media (min-width: 768px) {
	.sdfj-chat { font-size: 15px; }
}

/* 打印时不输出挂件 */
@media print {
	.sdfj-chat { display: none; }
}