/* ==========================================================================
   Less 在线咨询 —— 前端悬浮按钮 + 聊天框样式
   v2：与 Less 主题视觉统一（主题蓝 #3b5dce，去除彩虹流光）
   层级约定（与主题对齐）：
     移动端底部联系栏 z-40 ＜ 客服 45/46 ＜ 搜索弹窗 z-60 ＜ 二维码弹窗 z-70 ＜ Toast z-80
   ========================================================================== */

.less-chat {
	--lc-primary: #3b5dce;
	--lc-primary-light: #6b8afc;
	--lc-primary-dark: #2c469c;
	--lc-bg: #ffffff;
	--lc-border: #e5e7eb;
	--lc-text: #374151;
	--lc-muted: #9ca3af;
	--lc-mine: #3b5dce;
	--lc-mine-text: #ffffff;
	--lc-theirs: #f3f4f6;
	--lc-theirs-text: #1f2937;
	--lc-msgs-bg: #f9fafb;
	--lc-input-bg: #f9fafb;
	/* 与主题底部联系栏高度一致（style.css 中 --less-mobile-bar-h） */
	--lc-mobile-bar-h: 60px;
}

/* 深色模式变量（主题用 .dark 类切换） */
.dark .less-chat {
	--lc-bg: #1f2937;
	--lc-border: #374151;
	--lc-text: #d1d5db;
	--lc-muted: #6b7280;
	--lc-mine: #4a6ee0;
	--lc-theirs: #374151;
	--lc-theirs-text: #e5e7eb;
	--lc-msgs-bg: #111827;
	--lc-input-bg: #111827;
}

/* ---------- 悬浮按钮（主题蓝胶囊） ---------- */
.less-chat-fab {
	position: fixed;
	z-index: 45;
	border: none;
	cursor: pointer;
	color: #fff;
	border-radius: 999px;
	padding: 0;
	background: linear-gradient(135deg, var(--lc-primary), var(--lc-primary-light));
	box-shadow: 0 4px 14px rgba(59, 93, 206, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}
.less-chat-fab-inner {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 12px 18px;
	line-height: 1;
}
.less-chat-fab-icon,
.less-chat-fab-close {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.less-chat-fab-text {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	white-space: nowrap;
}
.less-chat-fab .less-chat-fab-close {
	display: none;
}
.less-chat.less-chat-open .less-chat-fab .less-chat-fab-icon {
	display: none;
}
.less-chat.less-chat-open .less-chat-fab .less-chat-fab-close {
	display: block;
}
@media (hover: hover) {
	.less-chat-fab:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(59, 93, 206, 0.45);
	}
}
.less-chat-fab:active {
	transform: scale(0.96);
}
/* 键盘可达性焦点环 */
.less-chat-fab:focus-visible {
	outline: 3px solid rgba(59, 93, 206, 0.5);
	outline-offset: 2px;
}

/* PC 位置 */
.less-chat-pos-br .less-chat-fab { bottom: 24px; right: 24px; }
.less-chat-pos-bl .less-chat-fab { bottom: 24px; left: 24px; }

/* ---------- 聊天窗口 ---------- */
.less-chat-window {
	position: fixed;
	z-index: 46;
	display: flex;
	flex-direction: column;
	width: 360px;
	max-width: calc(100vw - 24px);
	height: 500px;
	max-height: calc(100vh - 120px);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
	overflow: hidden;
	transform-origin: bottom right;
	animation: less-chat-pop 0.22s ease;
}
.dark .less-chat-window {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.less-chat-pos-br .less-chat-window { bottom: 92px; right: 24px; }
.less-chat-pos-bl .less-chat-window { bottom: 92px; left: 24px; transform-origin: bottom left; }

@keyframes less-chat-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.less-chat-window[hidden] { display: none; }

/* 头部 */
.less-chat-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--lc-primary), var(--lc-primary-light));
	color: #fff;
}
.less-chat-title { font-size: 15px; font-weight: 600; }
.less-chat-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	opacity: 0.92;
	margin-left: auto;
}
.less-chat-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}
.less-chat-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
	opacity: 0.85;
	transition: opacity 0.2s;
}
.less-chat-close:hover { opacity: 1; }

/* 消息区 */
.less-chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.less-chat-msgs {
	flex: 1;
	overflow-y: auto;
	padding: 14px 14px 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--lc-msgs-bg);
}
.less-chat-msg {
	max-width: 82%;
	padding: 9px 12px;
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	word-break: break-word;
	position: relative;
	animation: less-chat-msg-in 0.18s ease;
}
@keyframes less-chat-msg-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.less-chat-msg-visitor {
	align-self: flex-end;
	background: var(--lc-mine);
	color: var(--lc-mine-text);
	border-bottom-right-radius: 4px;
}
.less-chat-msg-admin {
	align-self: flex-start;
	background: var(--lc-theirs);
	color: var(--lc-theirs-text);
	border-bottom-left-radius: 4px;
}
.less-chat-msg-system {
	align-self: center;
	background: transparent;
	color: var(--lc-muted);
	font-size: 12px;
	text-align: center;
	max-width: 92%;
}
.less-chat-msg-time {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	opacity: 0.6;
	text-align: right;
}

/* 输入区 */
.less-chat-form {
	padding: 10px 12px 12px;
	border-top: 1px solid var(--lc-border);
	background: var(--lc-bg);
}
.less-chat-fields { display: flex; gap: 8px; margin-bottom: 8px; }
.less-chat-fields .less-chat-input { flex: 1; min-width: 0; }
.less-chat-input {
	width: 100%;
	border: 1px solid var(--lc-border);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13px;
	background: var(--lc-input-bg);
	color: var(--lc-text);
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.less-chat-input::placeholder {
	color: var(--lc-muted);
}
.less-chat-input:focus {
	border-color: var(--lc-primary);
	box-shadow: 0 0 0 3px rgba(59, 93, 206, 0.15);
	background: var(--lc-bg);
}
.less-chat-send { display: flex; gap: 8px; }
.less-chat-message { flex: 1; min-width: 0; }
.less-chat-submit {
	flex-shrink: 0;
	border: none;
	border-radius: 8px;
	background: var(--lc-primary);
	color: #fff;
	padding: 0 18px;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}
.less-chat-submit:hover { background: var(--lc-primary-dark); }
.less-chat-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.less-chat-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* 提示态 */
.less-chat-msg-tip {
	align-self: center;
	color: #d97706;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 8px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	animation: less-chat-msg-in 0.18s ease;
}
.dark .less-chat-msg-tip {
	color: #fbbf24;
	background: rgba(120, 90, 20, 0.2);
	border-color: #92400e;
}

/* ---------- 移动端 / 平板（与主题底部联系栏同断点 <1024px） ---------- */
@media (max-width: 1023px) {
	/*
	 * 站点已启用移动端底部联系栏（含"咨询"入口）时：
	 * 隐藏悬浮胶囊，避免与底部栏/返回顶部堆叠、遮挡正文。
	 * 功能不丢失 —— 底部栏"咨询"按钮（data-less-chat-open）同样打开聊天窗。
	 */
	body.less-has-mobile-bar .less-chat-fab {
		display: none;
	}

	/* 未启用底部栏的站点：紧凑圆形按钮，侧边中段，不挡底栏 */
	body:not(.less-has-mobile-bar) .less-chat-fab-inner {
		padding: 12px;
	}
	body:not(.less-has-mobile-bar) .less-chat-fab-text {
		display: none;
	}
	.less-chat-pos-mr .less-chat-fab { top: auto; bottom: 88px; right: 14px; }
	.less-chat-pos-ml .less-chat-fab { top: auto; bottom: 88px; left: 14px; }

	/* 聊天窗：全宽留白 12px，底部精确让出联系栏 + 安全区 */
	.less-chat-pos-mr .less-chat-window,
	.less-chat-pos-ml .less-chat-window,
	.less-chat-pos-br .less-chat-window,
	.less-chat-pos-bl .less-chat-window {
		left: 12px;
		right: 12px;
		bottom: calc(var(--lc-mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 10px);
		width: auto;
		height: min(62vh, 520px);
		transform-origin: bottom center;
	}
	/* 无底部栏时窗口可靠近屏幕底部 */
	body:not(.less-has-mobile-bar) .less-chat-window {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		height: min(70vh, 560px);
	}
}

/* 与主题"返回顶部"按钮错开：
   仅当悬浮按钮位于右下角（pos-br）且可见时（PC），返回顶部才需要上移 */
@media (min-width: 1024px) {
	.less-chat-pos-br ~ .less-back-to-top {
		bottom: 96px;
	}
}

/* ---------- 无障碍 / 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
	.less-chat-fab, .less-chat-window, .less-chat-msg {
		animation: none !important;
		transition: none !important;
	}
}

/* 打印时隐藏 */
@media print {
	.less-chat-fab,
	.less-chat-window {
		display: none !important;
	}
}

/* ==========================================================================
   后台收件箱样式
   ========================================================================== */
.less-chat-admin-toolbar { margin: 12px 0 16px; }
.less-chat-conv {
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid #dcdcde;
	border-radius: 6px;
	margin-bottom: 16px;
}
.less-chat-conv-unread { border-left-color: #3b5dce; }
.less-chat-conv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid #f0f0f1;
	flex-wrap: wrap;
}
.less-chat-conv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.less-chat-conv-contact { color: #2271b1; font-size: 12px; }
.less-chat-conv-unread-badge {
	background: #d63638;
	color: #fff;
	border-radius: 10px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 600;
}
.less-chat-conv-actions { display: flex; align-items: center; gap: 10px; }
.less-chat-conv-time { color: #787c82; font-size: 12px; }
.less-chat-conv-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.less-chat-admin-msg {
	background: #f0f0f1;
	border-radius: 8px;
	padding: 7px 11px;
	font-size: 13px;
	line-height: 1.5;
	align-self: flex-start;
	max-width: 80%;
}
.less-chat-admin-msg-mine {
	background: #e7edfb;
	align-self: flex-end;
}
.less-chat-admin-msg-label { font-weight: 600; font-size: 11px; color: #3b5dce; margin-right: 6px; }
.less-chat-admin-msg-time { color: #a7aaad; font-size: 10px; margin-left: 8px; }
.less-chat-admin-reply {
	display: flex;
	gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid #f0f0f1;
}
.less-chat-admin-reply input.regular-text { flex: 1; min-width: 0; }