/*
 * 三个状态由 .swk-chat[data-state] 驱动：collapsed / greeting / open。
 * 不用 hidden 属性 —— 类选择器的 display 会压过它，面板会始终显示且不报错。
 */

.swk-chat *,
.swk-chat *::before,
.swk-chat *::after {
	/* 主题的全局样式未必统一，按钮的默认 padding 会把 width:52px 撑成 60px 的椭圆 */
	box-sizing: border-box;
}

.swk-chat {
	--swk-brand: #1b4d8f;
	--swk-brand-ink: #fff;
	--swk-surface: #fff;
	--swk-bot-bg: #eef1f6;
	--swk-ink: #16191d;
	--swk-line: #e3e6ea;
	/*
	 * 右侧有一排固定的联系图标（#swkFloatContact，贴着视口右缘约 46px 宽）。
	 * 展开的面板必须让开它，否则会把它盖住。
	 */
	--swk-rail-clear: 40px;

	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	font-size: 15px;
	line-height: 1.5;
}

/* ── 圆按钮 ───────────────────────────────── */
.swk-chat__toggle {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--swk-brand); color: var(--swk-brand-ink);
	font-size: 22px; line-height: 1; cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	transition: transform .15s ease;
}
.swk-chat__toggle:hover { transform: scale(1.06); }
.swk-chat[data-state="open"] .swk-chat__toggle { display: none; }

/* ── 招呼条（手机默认形态）─────────────────── */
.swk-chat__greet {
	display: none;
	position: absolute; right: 0; bottom: 64px;
	align-items: center; gap: 10px;
	/*
	 * 必须给 width: max-content —— 容器只有一个 52px 的圆按钮那么宽，
	 * 绝对定位子元素的可用宽度因此被限死，招呼条会被挤成每行一两个词。
	 */
	width: max-content;
	max-width: min(280px, calc(100vw - 100px));
	padding: 10px 8px 10px 14px;
	background: var(--swk-surface); color: var(--swk-ink);
	border-radius: 14px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
	cursor: pointer;
}
.swk-chat[data-state="greeting"] .swk-chat__greet { display: flex; }
.swk-chat__greet-text { font-size: 14px; }
.swk-chat__greet-close {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	border: 0; border-radius: 50%;
	background: transparent; color: #7a8290;
	font-size: 14px; line-height: 1; cursor: pointer;
}
.swk-chat__greet-close:hover { background: var(--swk-bot-bg); }

/* ── 展开的对话框 ─────────────────────────── */
.swk-chat__panel {
	display: none;
	position: absolute;
	right: var(--swk-rail-clear); bottom: 0;
	width: 360px; height: 520px;
	max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);
	flex-direction: column; overflow: hidden;
	background: var(--swk-surface);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.swk-chat[data-state="open"] .swk-chat__panel { display: flex; }

.swk-chat__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px; padding: 12px 10px 12px 16px;
	background: var(--swk-brand); color: var(--swk-brand-ink);
}
.swk-chat__title { font-weight: 600; }
.swk-chat__min {
	width: 30px; height: 30px;
	border: 0; border-radius: 6px;
	background: transparent; color: var(--swk-brand-ink);
	font-size: 17px; line-height: 1; cursor: pointer;
}
.swk-chat__min:hover { background: rgba(255, 255, 255, .18); }

.swk-chat__log {
	flex: 1; overflow-y: auto;
	padding: 14px;
	display: flex; flex-direction: column; gap: 10px;
	-webkit-overflow-scrolling: touch;
}
.swk-chat__msg {
	padding: 9px 13px; border-radius: 12px;
	max-width: 86%;
	word-break: break-word;   /* 换行改由 render() 用真实块级元素表达，不再靠 pre-wrap */
}
.swk-chat__line + .swk-chat__line,
.swk-chat__line + .swk-chat__list,
.swk-chat__list + .swk-chat__line { margin-top: 8px; }
.swk-chat__list { margin: 0; padding-left: 20px; }
.swk-chat__list li { margin: 2px 0; }
.swk-chat__msg strong { font-weight: 600; }
.swk-chat__msg--user { align-self: flex-end; background: var(--swk-brand); color: var(--swk-brand-ink); }
.swk-chat__msg--bot { align-self: flex-start; background: var(--swk-bot-bg); color: var(--swk-ink); }
.swk-chat__msg--bot a { color: var(--swk-brand); }

.swk-chat__form { display: flex; border-top: 1px solid var(--swk-line); }
.swk-chat__input {
	flex: 1; min-width: 0;
	border: 0; padding: 13px 14px;
	font-size: 16px;   /* 低于 16px 会让 iOS Safari 聚焦时自动放大页面 */
	color: var(--swk-ink); background: transparent; outline: none;
}
.swk-chat__send {
	border: 0; padding: 0 18px;
	background: var(--swk-brand); color: var(--swk-brand-ink);
	font-size: 15px; cursor: pointer;
}

/* ── 手机 ─────────────────────────────────── */
@media (max-width: 639px) {
	.swk-chat { right: 14px; bottom: 14px; }

	/*
	 * 展开时铺满除顶部一条之外的区域：浮动小框在手机上打字体验差、
	 * 还容易误触背景。留出顶部让页面露一条，暗示这是可以关掉的。
	 */
	.swk-chat__panel {
		position: fixed;
		left: 0; right: 0; bottom: 0; top: 7vh;
		width: auto; height: auto;
		max-width: none; max-height: none;
		border-radius: 16px 16px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.swk-chat__head { padding: 14px 10px 14px 16px; }
	.swk-chat__msg { max-width: 92%; }
}

/* ── 尊重系统的「减少动态效果」 ───────────── */
@media (prefers-reduced-motion: reduce) {
	.swk-chat__toggle { transition: none; }
	.swk-chat__toggle:hover { transform: none; }
}