/**
 * 梦市 · 客服咨询浮窗
 *
 * 配色**全部走 var(--jh-*)**，所以浅色模式自动跟随，不需要写第二份。
 * （令牌在 dark.css 的 :root 和 light.css 的 body.jh-light 上各定义一次，
 *   继承下来即可。）
 *
 * 本文件在 functions.php 里排在 jiuhao-light **之后**入队，
 * 所以万一要写浅色专用的覆盖，直接写 body.jh-light 的选择器就行，
 * 不用跟加载顺序较劲。
 *
 * ⚠️ 按钮选择器必须写到 `body.jh-dark .jh-support button` 这一级（≥ 0,2,1）。
 * dark.css 开头有一条通用按钮规则：
 *     body.jh-dark button, body.jh-dark input[type="submit"] { background: linear-gradient(...) !important }
 * 特异性 (0,1,2)。光写 `.jh-support button` (0,1,1) 会被它套上品牌渐变，
 * 圆形开合按钮会变成一个蓝紫小方块。这个坑在 .jh-theme-toggle 上踩过一次。
 */

/* =============================================================
   容器
   ============================================================= */

.jh-support {
	position: fixed;
	right: 20px;
	bottom: 20px;
	/* 9990：进度条 10000 / 右上角工具条 9999 / 验证提示条 9998 都在上面，
	   页面内容（z-index 1）在下面。见 dark.css 的层叠阶梯注释。 */
	z-index: 9990;
	font-size: 14px;
	line-height: 1.5;
}

/* =============================================================
   开合按钮
   ============================================================= */

/*
 * ⚠️ background / color / border / border-radius 四个都必须带 !important。
 *
 * dark.css 里那条通用按钮规则：
 *     body.jh-dark button, body.jh-dark input[type="submit"], body.jh-dark .button, … {
 *         background: linear-gradient(…) !important;
 *         color: #fff !important;
 *         border: none !important;
 *         border-radius: var(--jh-radius-sm) !important;
 *     }
 * 特异性 (0,1,2) 且全带 !important。我这边 (0,2,2) 只有在同样带 !important 时才赢。
 *
 * 漏掉 border-radius 的后果就是：按钮根本不是圆的，是个 56×56、圆角 9px 的
 * 圆角方块 —— 那才是最难看的地方。漏掉 background/border 则会让「不用了」
 * 那个中性按钮被套上品牌渐变。
 */
body.jh-dark .jh-support__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border-radius: 50% !important;

	/* 先给一条不透明的回退，再给半透明的。不支持 color-mix 的浏览器
	   会丢掉第二条、用第一条；支持的用第二条。两条都带 !important，
	   后者生效。 */
	background: linear-gradient(150deg, var(--jh-accent), var(--jh-accent-2)) !important;
	background: linear-gradient(
		150deg,
		color-mix(in srgb, var(--jh-accent) 84%, transparent),
		color-mix(in srgb, var(--jh-accent-2) 80%, transparent)
	) !important;

	/*
	 * 毛玻璃。跟站内其它浮层同一套语言 —— 顶栏胶囊 rgba(21,25,34,.9)、
	 * 手机底栏 .78、页头 .82，全都是半透明 + backdrop-filter。
	 * 饱和度调高一点，玻璃后面的颜色透出来时不会被冲淡成灰。
	 */
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);

	/* 一道浅色内描边，玻璃要有「边」才立得住 */
	border: 1px solid rgba(255, 255, 255, .26) !important;
	color: #fff !important;
	/* 不再用带颜色的辉光 —— 那是「廉价悬浮球」的典型特征。
	   半透明之后阴影也收一点，否则会显脏。 */
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 1px 4px rgba(0, 0, 0, .14);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		transform .24s cubic-bezier(.2, .8, .25, 1),
		box-shadow .24s ease;
}

body.jh-dark .jh-support__toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .36), 0 3px 8px rgba(0, 0, 0, .22);
}

body.jh-dark .jh-support__toggle:active {
	transform: scale(.93);
	transition-duration: .1s;
}

.jh-support__toggle svg {
	width: 26px;
	height: 26px;
	transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .25, 1);
}

/* 开合两态用两个图标叠着切，避免重绘 DOM */
.jh-support__icon-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.8); }
.jh-support.is-open .jh-support__icon-open { opacity: 0; transform: rotate(90deg) scale(.8); }
.jh-support.is-open .jh-support__icon-close { opacity: 1; transform: none; }

/* 未读红点 */
.jh-support__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	border: 2px solid var(--jh-bg);
	border-radius: 999px;
	background: var(--jh-sale);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* =============================================================
   面板
   ============================================================= */

.jh-support__panel {
	position: absolute;
	right: 0;
	bottom: 70px;
	display: flex;
	flex-direction: column;
	width: min(360px, calc(100vw - 40px));
	max-height: min(520px, calc(100vh - 140px));
	border: 1px solid var(--jh-border);
	border-radius: 18px;

	/*
	 * 面板做成「很轻」的半透明 —— 只有 8% 的透光。
	 *
	 * 按钮透了之后面板要是完全不透，两个部件就不像一套东西。
	 * 但也不能像按钮那样透到 80%：面板里是**要读的正文**，
	 * 底下的图片和文字透上来会直接伤可读性。
	 * 8% + 20px 模糊是「看得出是玻璃、但读起来跟实色没区别」的位置。
	 *
	 * 同样先给不透明回退，再给半透明。
	 */
	background: var(--jh-card);
	background: color-mix(in srgb, var(--jh-card) 92%, transparent);
	backdrop-filter: blur(20px) saturate(170%);
	-webkit-backdrop-filter: blur(20px) saturate(170%);
	box-shadow: var(--jh-shadow-lg);
	overflow: hidden;
	transform-origin: 100% 100%;
	/* 收起态 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(.96);
	transition:
		opacity .2s cubic-bezier(.16, .84, .32, 1),
		transform .26s cubic-bezier(.16, .84, .32, 1),
		visibility 0s linear .26s;
}

/*
 * ⚠️ 显隐靠 visibility + opacity，不靠 display。
 * display 不可过渡，从 none 切到 block 时元素还没参与渲染，
 * 过渡根本不会触发，结果是「啪」地一下出现。手机菜单也踩过这个。
 */
.jh-support.is-open .jh-support__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity .2s cubic-bezier(.16, .84, .32, 1),
		transform .26s cubic-bezier(.16, .84, .32, 1),
		visibility 0s;
}

.jh-support__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--jh-border-soft);
	background: linear-gradient(160deg, rgba(77, 141, 255, .10), transparent 70%);
}

.jh-support__title {
	color: var(--jh-text);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
}

.jh-support__sub {
	color: var(--jh-text-faint);
	font-size: 12px;
}

/* ---------- 消息区 ---------- */

.jh-support__body {
	flex: 1 1 auto;
	min-height: 140px;
	overflow-y: auto;
	overscroll-behavior: contain;   /* 别把滚动传给页面 */
}

.jh-support__messages {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
}

.jh-support__msg {
	display: flex;
	flex-direction: column;
	max-width: 86%;
	animation: jh-support-in .3s cubic-bezier(.16, .84, .32, 1) both;
}

@keyframes jh-support-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.jh-support__msg--customer { align-self: flex-end; align-items: flex-end; }
.jh-support__msg--admin { align-self: flex-start; align-items: flex-start; }

.jh-support__bubble {
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

body.jh-dark .jh-support__msg--customer .jh-support__bubble {
	background: linear-gradient(135deg, var(--jh-accent), var(--jh-accent-2));
	color: #fff;
	border-bottom-right-radius: 5px;
}

body.jh-dark .jh-support__msg--admin .jh-support__bubble {
	background: var(--jh-bg-elev);
	border: 1px solid var(--jh-border-soft);
	color: var(--jh-text);
	border-bottom-left-radius: 5px;
}

/* 乐观渲染那条：半透明表示还在发送中 */
.jh-support__msg--pending { opacity: .55; }

.jh-support__meta {
	margin-top: 4px;
	color: var(--jh-text-faint);
	font-size: 11px;
}

/* ---------- 系统提示（软提示留邮箱） ---------- */

.jh-support__sys {
	align-self: stretch;
	max-width: none;
	padding: 11px 13px;
	border: 1px dashed var(--jh-border);
	border-radius: 12px;
	background: var(--jh-bg-elev);
	color: var(--jh-text-dim);
	font-size: 12.5px;
	line-height: 1.55;
	animation: jh-support-in .3s cubic-bezier(.16, .84, .32, 1) both;
}

.jh-support__sys-form {
	display: flex;
	gap: 6px;
	margin-top: 9px;
	flex-wrap: wrap;
}

.jh-support__email {
	flex: 1 1 140px;
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid var(--jh-border);
	border-radius: 9px;
	background: var(--jh-card);
	color: var(--jh-text);
	font-size: 13px;
}

.jh-support__email:focus {
	outline: 2px solid var(--jh-accent);
	outline-offset: 1px;
}

/*
 * 软提示里那两个小按钮（保存 / 不用了）
 *
 * 这四个属性之前没带 !important，被通用按钮规则盖成了品牌渐变 ——
 * 于是「不用了」这个本该是中性的次要按钮，渲染出来是蓝紫色实心块，
 * 跟「保存」长得一模一样，用户分不出主次。
 */
body.jh-dark .jh-support__mini {
	padding: 8px 14px;
	border: 1px solid var(--jh-border) !important;
	border-radius: 10px !important;
	background: var(--jh-card) !important;
	color: var(--jh-text-dim) !important;
	font-size: 12.5px;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}

body.jh-dark .jh-support__mini:hover { color: var(--jh-accent) !important; border-color: var(--jh-accent) !important; }

body.jh-dark .jh-support__mini--primary {
	background: linear-gradient(135deg, var(--jh-accent), var(--jh-accent-2)) !important;
	border-color: transparent !important;
	color: #fff !important;
}

body.jh-dark .jh-support__mini--primary:hover { color: #fff; filter: brightness(1.06); }

/* ---------- 输入区 ---------- */

.jh-support__form {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	padding: 12px 14px;
	border-top: 1px solid var(--jh-border-soft);
}

.jh-support__input {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 120px;
	padding: 9px 12px;
	border: 1px solid var(--jh-border);
	border-radius: 11px;
	background: var(--jh-bg-elev);
	color: var(--jh-text);
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	resize: none;
}

.jh-support__input::placeholder { color: var(--jh-text-faint); }

.jh-support__input:focus {
	outline: 2px solid var(--jh-accent);
	outline-offset: 1px;
	border-color: transparent;
}

/* 同样要四个 !important —— 见上面通用按钮规则的说明 */
body.jh-dark .jh-support__send {
	flex: none;
	padding: 10px 18px;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, var(--jh-accent), var(--jh-accent-2)) !important;
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: filter .18s ease, transform .18s cubic-bezier(.2, .8, .25, 1);
}

body.jh-dark .jh-support__send:hover { filter: brightness(1.08); }
body.jh-dark .jh-support__send:active { transform: scale(.96); }
body.jh-dark .jh-support__send:disabled { opacity: .5; cursor: not-allowed; }

.jh-support__form.is-sending .jh-support__send { opacity: .5; pointer-events: none; }

.jh-support__foot {
	padding: 0 14px 12px;
	color: var(--jh-text-faint);
	font-size: 11px;
	line-height: 1.5;
}

/* =============================================================
   手机端
   -------------------------------------------------------------
   底部工具栏是**满宽**的 fixed 元素、z-index 9999 ——
   浮窗赢不了它，只能靠 bottom 让位。
   ============================================================= */

@media (max-width: 767px) {
	/* 底栏真的渲染了才抬（购物车/结算页 Storefront 会主动不渲染那三个入口） */
	body.jh-dark:has(.storefront-handheld-footer-bar li) .jh-support {
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}

	.jh-support {
		right: 14px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.jh-support__panel {
		/* 手机上占满可用宽度，贴着浮球往上长 */
		width: calc(100vw - 28px);
		max-height: calc(100vh - 200px);
		bottom: 66px;
	}

	.jh-support__toggle {
		width: 52px;
		height: 52px;
	}
}

/* 系统开了「减弱动态效果」时不做位移，只保留淡入
   （motion.css 里那条全局兜底会把时长压到 0.001ms，
   这里把浮窗自己的两个 keyframe 排除掉，免得连淡入都没了） */
@media (prefers-reduced-motion: reduce) {
	@keyframes jh-support-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	body.jh-dark .jh-support__toggle:hover { transform: none; }
}

/* =============================================================
   浅色模式的收尾
   -------------------------------------------------------------
   上面所有选择器都写 body.jh-dark —— 那是「主题已启用」的标记，
   两种配色下都挂着，配色靠 var(--jh-*) 自动跟随，所以大部分不用重写。
   只有阴影是「硬编码的颜色」，浅色下必须换掉：
   深色底上 0.30 的黑影是自然的，浅色底上就显脏。
   ============================================================= */

body.jh-light .jh-support__toggle {
	box-shadow: 0 8px 22px rgba(23, 32, 56, .16), 0 2px 6px rgba(23, 32, 56, .08);
}
body.jh-light .jh-support__toggle:hover {
	box-shadow: 0 12px 30px rgba(23, 32, 56, .20), 0 3px 8px rgba(23, 32, 56, .10);
}
body.jh-light .jh-support__panel {
	box-shadow: 0 18px 44px rgba(23, 32, 56, .16), 0 2px 8px rgba(16, 20, 29, .05);
}
body.jh-light .jh-support__badge {
	border-color: var(--jh-bg);
}