/* 在线聊天室与人工客服插件样式 - 黑金奢华主题 (Black & Gold) */
#chatroom-app, #chatroom-app * { box-sizing: border-box; }

#chatroom-app {
	position: fixed;
	right: 100px;
	bottom: 20px;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 避让 DUX 门户右下角快捷栏(karbar：回到顶部等)，由 JS 检测到 .karbar 时加上 */
#chatroom-app.cr-has-karbar { right: 100px; }

/* ------------------------------------------------------------------
 * 折叠状态启动图标 (50px 圆形；黑金 = 黑底金边金色图标)
 * ------------------------------------------------------------------ */
#chatroom-launcher {
	width: 50px;
	height: 50px;
	padding: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, #2c2518 0%, #181613 50%, #0e0d0b 100%);
	border: 1.5px solid rgba(220, 180, 75, 0.75);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 14px rgba(212, 175, 55, 0.35);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	user-select: none;
	touch-action: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

#chatroom-launcher:hover {
	background: linear-gradient(135deg, #372e1e 0%, #221f19 50%, #13110d 100%);
	border-color: #ffd966;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65), 0 0 20px rgba(245, 215, 127, 0.55);
	transform: translateY(-2px);
}

#chatroom-launcher svg {
	width: 26px;
	height: 26px;
	fill: #f5d77f;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* ------------------------------------------------------------------
 * 图标旁的文字提示气泡 (“点此展开聊天室或联系人工客服”)
 * 默认在图标左侧；图标被拖到屏幕左半边时 JS 加 .cr-tip-right 换到右侧。
 * 显示 8 秒后淡出；打开过面板或点 × 后永久不再显示；窄屏(<768px)不显示。
 * ------------------------------------------------------------------ */
.cr-launcher-tip {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	white-space: nowrap;
	border-radius: 18px;
	padding: 0 4px 0 0;
	background: #1f1d18;
	border: 1px solid rgba(212, 175, 55, 0.6);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}
.cr-launcher-tip.cr-tip-show { opacity: 1; pointer-events: auto; }
.cr-launcher-tip.cr-tip-gone { display: none; }
.cr-launcher-tip.cr-tip-right { right: auto; left: calc(100% + 12px); }
/* 指向图标的小尖角 */
.cr-launcher-tip::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -6px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: inherit;
	border-top: 1px solid rgba(212, 175, 55, 0.6);
	border-right: 1px solid rgba(212, 175, 55, 0.6);
	transform: rotate(45deg);
}
.cr-launcher-tip.cr-tip-right::after { right: auto; left: -6px; transform: rotate(-135deg); }
.cr-tip-text {
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.5px;
	padding: 10px 6px 10px 14px;
	color: #f5e6c4;
}
.cr-tip-text:hover { color: #ffd966; }
.cr-tip-close {
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #a49987;
	padding: 0;
}
.cr-tip-close:hover { color: #fae29c; background: rgba(212, 175, 55, 0.18); }
.cr-tip-text:focus-visible, .cr-tip-close:focus-visible { outline: 2px solid #fae29c; outline-offset: 1px; }
/* 面板展开时隐藏；窄屏不显示 */
#chatroom-app:not(.cr-collapsed) .cr-launcher-tip { display: none; }
@media (max-width: 767px) {
	.cr-launcher-tip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.cr-launcher-tip { transition: none; }
}

/* 折叠按钮角标 */
#chatroom-launcher .cr-badge {
	position: absolute;
	top: -6px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #ff4757;
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-weight: bold;
	border: 1.5px solid #d4af37;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------------
 * 主面板 (黑金质感面板)
 * ------------------------------------------------------------------ */
#chatroom-panel {
	position: relative;
	width: 340px;
	height: 480px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	background: #141414;
	border-radius: 12px;
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.75), 0 0 22px rgba(212, 175, 55, 0.18);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(212, 175, 55, 0.38);
}

/* 左上角拖拽改变大小手柄 */
#chatroom-resize {
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 22px;
	z-index: 10;
	cursor: nwse-resize;
	touch-action: none;
}
#chatroom-resize::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-top: 2px solid rgba(212, 175, 55, 0.75);
	border-left: 2px solid rgba(212, 175, 55, 0.75);
	border-top-left-radius: 3px;
	transition: border-color .15s ease;
}
#chatroom-resize:hover::before { border-color: #ffd966; }

/* 拖拽改变大小时禁止选中文字 */
body.cr-resizing { cursor: nwse-resize !important; }
body.cr-resizing, body.cr-resizing #chatroom-app * { user-select: none !important; }

/* 图标可拖拽移动：禁用触摸默认手势，拖动中禁止选中 */
body.cr-dragging { cursor: grabbing !important; }
body.cr-dragging, body.cr-dragging #chatroom-app * { user-select: none !important; }

#chatroom-app.cr-collapsed #chatroom-panel { display: none; }
#chatroom-app:not(.cr-collapsed) #chatroom-launcher { display: none; }

/* ------------------------------------------------------------------
 * 头部与顶部分段切换栏 (聊天室 / 人工客服 醒目切换)
 * ------------------------------------------------------------------ */
#chatroom-header {
	flex: 0 0 auto;
	background: linear-gradient(180deg, #24211a 0%, #161513 100%);
	border-bottom: 1px solid rgba(212, 175, 55, 0.35);
	color: #f5e6c4;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#chatroom-header .cr-header-left {
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* 单标题展示 */
#chatroom-header .cr-title {
	font-weight: bold;
	font-size: 14px;
	color: #fae29c;
	display: flex;
	align-items: center;
	gap: 6px;
}
#chatroom-header .cr-title .cr-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d4af37;
	box-shadow: 0 0 6px #fae29c;
}
#chatroom-header .cr-title.cr-title-kefu .cr-tab-icon {
	width: 17px;
	height: 17px;
	fill: #fae29c;
}

/* 顶部双标签分段控制器 (Segmented Control) */
.cr-tabs {
	display: inline-flex;
	align-items: center;
	background: #0d0c0a;
	border: 1.5px solid rgba(212, 175, 55, 0.5);
	border-radius: 20px;
	padding: 3px;
	gap: 4px;
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

.cr-tab {
	border: none;
	background: transparent;
	font-family: inherit;
	line-height: 1;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #c9bea9;
	cursor: pointer;
	border-radius: 16px;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	user-select: none;
	transition: all .2s ease;
}

/* 默认未激活状态下的悬停 */
.cr-tab:hover {
	color: #fff;
	background: rgba(212, 175, 55, 0.15);
}

/* 人工客服标签未激活时也保持高亮金黄色，确保第一眼可见 */
.cr-tab.cr-tab-kefu:not(.cr-active) {
	color: #f5d77f;
}
.cr-tab.cr-tab-kefu:not(.cr-active):hover {
	color: #ffd966;
	background: rgba(212, 175, 55, 0.22);
}

/* 激活状态：耀眼金光渐变背景与深黑反衬字 */
.cr-tab.cr-active {
	background: linear-gradient(135deg, #fae29c 0%, #d4af37 50%, #aa820a 100%);
	color: #171203 !important;
	font-weight: 700;
	box-shadow: 0 2px 10px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cr-tab-icon {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex-shrink: 0;
}

.cr-tab-text {
	display: inline-block;
}

/* 标签角标 */
.cr-tab-badge {
	margin-left: 3px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #ff4757;
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	font-weight: bold;
	display: inline-block;
	box-shadow: 0 0 0 1.5px #171203;
}

/* 右上角操作区 (最小化收起按钮) */
#chatroom-header .cr-actions {
	display: flex;
	align-items: center;
}
#chatroom-header .cr-min {
	background: transparent;
	border: none;
	color: #c9bea9;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 4px;
	transition: all .15s ease;
}
#chatroom-header .cr-min:hover {
	color: #fae29c;
	background: rgba(212, 175, 55, 0.18);
}

/* 聊天室与客服两套 Pane 容器 */
.cr-pane-chat, .cr-pane-kefu {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	background: #181818;
}
.cr-pane-chat.cr-hide, .cr-pane-kefu.cr-hide { display: none !important; }

/* ------------------------------------------------------------------
 * 聊天室板块 (.cr-pane-chat)
 * ------------------------------------------------------------------ */

/* 聊天室置顶公告 */
#chatroom-notice {
	flex: 0 0 auto;
	padding: 8px 12px;
	background: #231f17;
	color: #fae29c;
	font-size: 12px;
	border-bottom: 1px solid rgba(212, 175, 55, 0.25);
	word-break: break-word;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* 消息滚动区 */
#chatroom-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px;
	background: #181818;
}
#chatroom-messages::-webkit-scrollbar,
.kf-messages::-webkit-scrollbar,
.cr-emo-pages::-webkit-scrollbar,
.kf-emo-pages::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
#chatroom-messages::-webkit-scrollbar-track,
.kf-messages::-webkit-scrollbar-track,
.cr-emo-pages::-webkit-scrollbar-track,
.kf-emo-pages::-webkit-scrollbar-track {
	background: #141414;
}
#chatroom-messages::-webkit-scrollbar-thumb,
.kf-messages::-webkit-scrollbar-thumb,
.cr-emo-pages::-webkit-scrollbar-thumb,
.kf-emo-pages::-webkit-scrollbar-thumb {
	background: rgba(212, 175, 55, 0.3);
	border-radius: 3px;
}
#chatroom-messages::-webkit-scrollbar-thumb:hover,
.kf-messages::-webkit-scrollbar-thumb:hover,
.cr-emo-pages::-webkit-scrollbar-thumb:hover,
.kf-emo-pages::-webkit-scrollbar-thumb:hover {
	background: rgba(212, 175, 55, 0.65);
}

.cr-msg {
	display: flex;
	margin-bottom: 12px;
	align-items: flex-start;
}
.cr-msg .cr-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex: 0 0 32px;
	margin-right: 8px;
	overflow: hidden;
	background: #262626;
	border: 1px solid rgba(212, 175, 55, 0.35);
}
.cr-msg .cr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-msg .cr-body { flex: 1 1 auto; min-width: 0; }
.cr-msg .cr-meta { font-size: 11px; color: #8e8574; margin-bottom: 3px; }
.cr-msg .cr-meta .cr-name { color: #fae29c; font-weight: 600; }
.cr-msg .cr-meta .cr-name.cr-name-me { color: #ffd966; font-weight: bold; }
/* 原 #787062 在 #181818 背景上对比度约 3.6:1，小字偏暗看不清；改为与 meta 同色(约 4.9:1) */
.cr-msg .cr-meta .cr-time { margin-left: 6px; color: #8e8574; }
.cr-msg .cr-text {
	display: inline-block;
	background: #242424;
	padding: 8px 12px;
	border-radius: 0 10px 10px 10px;
	color: #eee7db;
	word-break: break-word;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	max-width: 100%;
}
.cr-msg .cr-text a { color: #fae29c; text-decoration: none; word-break: break-all; }
.cr-msg .cr-text a:hover { text-decoration: underline; }

/* 引用(回复)块 */
.cr-msg .cr-quote {
	background: rgba(212, 175, 55, 0.1);
	border-left: 3px solid #d4af37;
	padding: 4px 8px;
	border-radius: 4px;
	margin-bottom: 5px;
	font-size: 12px;
	color: #cfc5b4;
	max-width: 100%;
	word-break: break-word;
}
.cr-msg .cr-quote .cr-qname { color: #fae29c; font-weight: 600; }

/* 消息操作行(回复 / 删除 / 禁言) */
.cr-msg .cr-acts { margin-top: 3px; font-size: 11px; }
.cr-msg .cr-acts a { cursor: pointer; margin-right: 12px; text-decoration: none; }
.cr-msg .cr-acts a:hover { text-decoration: underline; }
.cr-msg .cr-acts .cr-reply { color: #fae29c; }
.cr-msg .cr-acts .cr-del, .cr-msg .cr-acts .cr-mute { color: #ff6b6b; }
@media (hover: hover) {
	.cr-msg .cr-acts { opacity: 0; transition: opacity .15s ease; }
	.cr-msg:hover .cr-acts { opacity: 1; }
}
.cr-sys { text-align: center; color: #8f8574; font-size: 12px; margin: 10px 0; }

/* 回复提示条(输入框上方) */
#chatroom-replybar {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 6px 12px;
	background: #211e18;
	border-top: 1px solid rgba(212, 175, 55, 0.25);
	font-size: 12px;
	color: #fae29c;
}
#chatroom-replybar.cr-show { display: flex; }
#chatroom-replybar .cr-rb-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chatroom-replybar .cr-rb-x { cursor: pointer; margin-left: 8px; color: #a49987; font-size: 16px; line-height: 1; }
#chatroom-replybar .cr-rb-x:hover { color: #ffd966; }

/* 输入区 */
#chatroom-input { flex: 0 0 auto; border-top: 1px solid rgba(212, 175, 55, 0.22); background: #1c1c1c; }
#chatroom-emojis {
	display: none;
	flex-direction: column;
	padding: 0;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
	max-height: 260px;
	overflow: hidden;
	background: #1f1d18;
}
#chatroom-emojis.cr-show { display: flex; }
.cr-emo-tip { padding: 16px; text-align: center; color: #9c9281; font-size: 12px; }
.cr-emo-retry { cursor: pointer; color: #fae29c; }

/* 分组标签行 */
.cr-emo-tabs {
	flex: 0 0 auto;
	display: flex;
	overflow-x: auto;
	background: #171612;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.cr-emo-tabs::-webkit-scrollbar { height: 0; }
.cr-emo-tab {
	flex: 0 0 auto;
	padding: 7px 12px;
	font-size: 12px;
	color: #a49987;
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .15s ease;
}
.cr-emo-tab:hover { color: #fae29c; }
.cr-emo-tab.cr-on { color: #fae29c; border-bottom-color: #d4af37; font-weight: bold; }

/* 表情网格 */
.cr-emo-pages { flex: 1 1 auto; overflow-y: auto; max-height: 218px; background: #1c1a16; }
.cr-emo-page { display: none; flex-wrap: wrap; padding: 6px; }
.cr-emo-page.cr-on { display: flex; }
.cr-emo-i {
	width: 36px;
	height: 36px;
	object-fit: contain;
	margin: 2px;
	cursor: pointer;
	border-radius: 5px;
	padding: 2px;
	transition: background .15s ease;
}
.cr-emo-i:hover { background: rgba(212, 175, 55, 0.2); }
/* 消息气泡内的表情图(chatroom.js 渲染 [img]表情URL[/img] 时使用) */
img.cr-emoji { display: inline-block; height: 40px; width: auto; vertical-align: text-bottom; }

#chatroom-inputbar { display: flex; align-items: flex-end; padding: 8px 10px; }
#chatroom-inputbar .cr-emoji-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	padding: 0 6px;
	line-height: 1;
	flex: 0 0 auto;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .85;
	transition: opacity .15s ease;
}
#chatroom-inputbar .cr-emoji-btn:hover { opacity: 1; }

#chatroom-inputbar textarea {
	flex: 1 1 auto;
	resize: none;
	border: 1px solid #3d372b;
	border-radius: 6px;
	padding: 7px 9px;
	font-size: 13px;
	height: 36px;
	max-height: 90px;
	outline: none;
	font-family: inherit;
	line-height: 1.4;
	color: #eee;
	background: #262626;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#chatroom-inputbar textarea:focus {
	border-color: #d4af37;
	box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

#chatroom-inputbar .cr-send {
	flex: 0 0 auto;
	margin-left: 8px;
	height: 36px;
	padding: 0 16px;
	background: linear-gradient(135deg, #fae29c 0%, #d4af37 50%, #aa820a 100%);
	color: #171203;
	font-weight: bold;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
	transition: all .15s ease;
}
#chatroom-inputbar .cr-send:hover {
	background: linear-gradient(135deg, #fff0ba 0%, #e2b847 50%, #c6992b 100%);
	box-shadow: 0 2px 12px rgba(212, 175, 55, 0.55);
}
#chatroom-inputbar .cr-send:disabled {
	background: #363228;
	color: #726857;
	cursor: not-allowed;
	box-shadow: none;
}

#chatroom-guest {
	padding: 14px 12px;
	text-align: center;
	color: #9c9281;
	font-size: 13px;
}
#chatroom-guest a { color: #fae29c; text-decoration: none; font-weight: bold; }
#chatroom-guest a:hover { text-decoration: underline; }

#chatroom-tip {
	padding: 6px 12px;
	font-size: 12px;
	color: #ff7675;
	display: none;
	background: #2b1717;
	border-top: 1px solid #4a2222;
}
#chatroom-tip.cr-show { display: block; }

/* ------------------------------------------------------------------
 * 人工客服模块样式 (前缀 kf-*，黑金奢华主题)
 * ------------------------------------------------------------------ */
.kf-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	overflow: hidden;
	background: #181818;
	position: relative;
}

/* 离线留言提示条 */
.kf-offline-bar {
	flex: 0 0 auto;
	padding: 8px 12px;
	background: rgba(212, 175, 55, 0.12);
	color: #fae29c;
	font-size: 12px;
	border-bottom: 1px solid rgba(212, 175, 55, 0.3);
	text-align: center;
	word-break: break-word;
}

/* 消息列表区 */
.kf-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px;
	background: #181818;
	display: flex;
	flex-direction: column;
}

.kf-welcome-bubble, .kf-msg-row {
	display: flex;
	margin-bottom: 12px;
	align-items: flex-start;
}
.kf-msg-row.kf-from-user { justify-content: flex-end; }

.kf-msg-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex: 0 0 32px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
}

/* 客服头像：金色渐变背景 + 深黑耳机图标 */
.kf-kefu-avatar {
	background: linear-gradient(135deg, #fae29c 0%, #d4af37 100%);
	color: #171203;
	margin-right: 8px;
	box-shadow: 0 2px 6px rgba(212, 175, 55, 0.35);
}
.kf-kefu-avatar svg { width: 18px; height: 18px; fill: #171203; }

/* 用户头像：黑金边框 */
.kf-user-avatar {
	background: #2a251b;
	color: #fae29c;
	border: 1.5px solid #d4af37;
	margin-left: 8px;
}

.kf-msg-body { max-width: calc(100% - 48px); display: flex; flex-direction: column; }
.kf-from-user .kf-msg-body { align-items: flex-end; }
.kf-msg-meta { font-size: 11px; color: #8e8574; margin-bottom: 3px; }
.kf-kefu-name { color: #fae29c; font-weight: bold; font-size: 11px; }

/* 气泡样式 */
.kf-msg-bubble {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 0 10px 10px 10px;
	word-break: break-word;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	max-width: 100%;
	white-space: pre-wrap; /* 客服消息允许换行，入库保留 \n，这里按原样显示 */
}

/* 客服发送的气泡与欢迎语气泡：暗夜炭黑 + 细致金边 */
.kf-welcome-bubble .kf-msg-bubble,
.kf-from-kefu .kf-msg-bubble {
	background: #262626;
	color: #f0ede6;
	border: 1px solid rgba(212, 175, 55, 0.28);
}
.kf-from-kefu .kf-msg-bubble a { color: #fae29c; text-decoration: none; word-break: break-all; }
.kf-from-kefu .kf-msg-bubble a:hover { text-decoration: underline; }

/* 用户发送的气泡：奢华流金背景 + 深黑字 */
.kf-from-user .kf-msg-bubble {
	background: linear-gradient(135deg, #fae29c 0%, #d4af37 60%, #b8860b 100%);
	color: #171203;
	font-weight: 500;
	border-radius: 10px 0 10px 10px;
	box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
}
.kf-from-user .kf-msg-bubble a { color: #171203; text-decoration: underline; font-weight: bold; }

/* 系统提示条 */
.kf-sys-tip {
	text-align: center;
	color: #fae29c;
	background: rgba(212, 175, 55, 0.1);
	border: 1px solid rgba(212, 175, 55, 0.28);
	border-radius: 4px;
	font-size: 11px;
	margin: 8px auto;
	padding: 5px 12px;
	display: inline-block;
	max-width: 90%;
	align-self: center;
}
.kf-tip {
	padding: 6px 12px;
	font-size: 12px;
	color: #ff7675;
	display: none;
	background: #2b1717;
	border-top: 1px solid #4a2222;
}
.kf-tip.kf-show { display: block; }

/* 客服底部输入区 */
.kf-input-area {
	flex: 0 0 auto;
	border-top: 1px solid rgba(212, 175, 55, 0.22);
	background: #1c1c1c;
}
.kf-inputbar { display: flex; align-items: flex-end; padding: 8px 10px; }
.kf-emoji-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	padding: 0 6px;
	line-height: 1;
	flex: 0 0 auto;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .85;
	transition: opacity .15s ease;
}
.kf-emoji-btn:hover { opacity: 1; }

.kf-inputbar textarea {
	flex: 1 1 auto;
	resize: none;
	border: 1px solid #3d372b;
	border-radius: 6px;
	padding: 7px 9px;
	font-size: 13px;
	height: 36px;
	max-height: 90px;
	outline: none;
	font-family: inherit;
	line-height: 1.4;
	color: #eee;
	background: #262626;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.kf-inputbar textarea:focus {
	border-color: #d4af37;
	box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.kf-send-btn {
	flex: 0 0 auto;
	margin-left: 8px;
	height: 36px;
	padding: 0 16px;
	background: linear-gradient(135deg, #fae29c 0%, #d4af37 50%, #aa820a 100%);
	color: #171203;
	font-weight: bold;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
	transition: all .15s ease;
}
.kf-send-btn:hover {
	background: linear-gradient(135deg, #fff0ba 0%, #e2b847 50%, #c6992b 100%);
	box-shadow: 0 2px 12px rgba(212, 175, 55, 0.55);
}
.kf-send-btn:disabled {
	background: #363228;
	color: #726857;
	cursor: not-allowed;
	box-shadow: none;
}

/* 管理员提示卡片 */
.kf-admin-box {
	padding: 16px 14px;
	text-align: center;
	color: #cfc5b4;
	font-size: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: #1c1c1c;
	border-top: 1px solid rgba(212, 175, 55, 0.22);
}
.kf-admin-btn {
	display: inline-block;
	padding: 7px 18px;
	background: linear-gradient(135deg, #fae29c, #d4af37);
	color: #171203;
	border-radius: 6px;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
	box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
	transition: all .15s ease;
}
.kf-admin-btn:hover {
	background: linear-gradient(135deg, #fff0ba, #e2b847);
	color: #171203;
	box-shadow: 0 2px 12px rgba(212, 175, 55, 0.55);
}

/* 游客登录提示卡片 */
.kf-guest-box {
	padding: 14px 12px;
	text-align: center;
	color: #9c9281;
	font-size: 13px;
	background: #1c1c1c;
	border-top: 1px solid rgba(212, 175, 55, 0.22);
}
.kf-guest-box a { color: #fae29c; text-decoration: none; font-weight: bold; }
.kf-guest-box a:hover { text-decoration: underline; }

/* 客服表情面板 */
.kf-emojis {
	display: none;
	flex-direction: column;
	padding: 0;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
	max-height: 260px;
	overflow: hidden;
	background: #1f1d18;
}
.kf-emojis.kf-show { display: flex; }
.kf-emo-tip { padding: 16px; text-align: center; color: #9c9281; font-size: 12px; }
.kf-emo-retry { cursor: pointer; color: #fae29c; }
.kf-emo-tabs {
	flex: 0 0 auto;
	display: flex;
	overflow-x: auto;
	background: #171612;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.kf-emo-tabs::-webkit-scrollbar { height: 0; }
.kf-emo-tab {
	flex: 0 0 auto;
	padding: 7px 12px;
	font-size: 12px;
	color: #a49987;
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .15s ease;
}
.kf-emo-tab:hover { color: #fae29c; }
.kf-emo-tab.kf-on { color: #fae29c; border-bottom-color: #d4af37; font-weight: bold; }
.kf-emo-pages { flex: 1 1 auto; overflow-y: auto; max-height: 218px; background: #1c1a16; }
.kf-emo-page { display: none; flex-wrap: wrap; padding: 6px; }
.kf-emo-page.kf-on { display: flex; }
.kf-emo-i {
	width: 36px;
	height: 36px;
	object-fit: contain;
	margin: 2px;
	cursor: pointer;
	border-radius: 5px;
	padding: 2px;
	transition: background .15s ease;
}
.kf-emo-i:hover { background: rgba(212, 175, 55, 0.2); }
/* 客服消息气泡内的表情图(kefu.js 渲染 [img]表情URL[/img] 时使用) */
img.kf-emoji { display: inline-block; height: 40px; width: auto; vertical-align: text-bottom; }

/* ------------------------------------------------------------------
 * 独立 H5 全屏页样式 (黑金奢华设计)
 * ------------------------------------------------------------------ */
body.kf-h5-body {
	margin: 0;
	padding: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
	background: #141414;
	color: #eee;
}
.kf-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	width: 100vw;
	overflow: hidden;
	background: #141414;
}
.kf-page-header {
	flex: 0 0 46px;
	height: 46px;
	background: linear-gradient(180deg, #24211a 0%, #161513 100%);
	border-bottom: 1px solid rgba(212, 175, 55, 0.35);
	color: #fae29c;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
}
.kf-back-btn {
	background: none;
	border: none;
	color: #fae29c;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background .15s ease;
}
.kf-back-btn:hover { background: rgba(212, 175, 55, 0.15); }

.kf-page-title {
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	text-align: center;
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fae29c;
}
.kf-header-spacer { width: 36px; flex: 0 0 36px; }
.kf-page-content { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.kf-mode-page .kf-input-area {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* iOS 输入框字号 < 16px 时聚焦会自动放大页面，H5 页统一 16px(保留手动缩放) */
.kf-mode-page .kf-inputbar textarea { font-size: 16px; }

/* ------------------------------------------------------------------
 * 移动端自适应
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	#chatroom-panel {
		max-width: calc(100vw - 24px);
		max-height: calc(100vh - 100px);
	}
}
@media (max-width: 480px) {
	#chatroom-app, #chatroom-app.cr-has-karbar { right: 12px; bottom: 12px; }
	#chatroom-panel { width: calc(100vw - 24px); height: 75vh; }
	#chatroom-resize { display: none; }
}

/* ==================================================================
 * 主题切换 (浅色 / 黑金 / 跟随网站) —— 由 static/theme.js 控制
 *   - 悬浮面板：class 挂在 #chatroom-app 上(cr-theme-light / cr-theme-gold)
 *   - H5 客服页：class 挂在 <html> 上
 * 上面的全部规则是“黑金”主题本体；下面 .cr-theme-light 开头的规则把它覆盖成蓝白浅色。
 * 新增带颜色的样式时，记得在浅色区补一条对应覆盖。
 * ================================================================== */

/* 切换时 0.2 秒颜色渐变(只在切换瞬间生效，不影响平时的 hover 动效) */
.cr-theme-switching, .cr-theme-switching * {
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, fill .2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
	.cr-theme-switching, .cr-theme-switching * { transition: none !important; }
}

/* ---- 切换按钮与下拉菜单(两套主题通用结构) ---- */
.cr-theme-slot { display: inline-flex; align-items: center; margin-right: 2px; }
.cr-theme-wrap { position: relative; display: inline-flex; }
.cr-theme-btn {
	background: transparent; border: none; cursor: pointer; padding: 4px 5px; border-radius: 4px;
	display: inline-flex; align-items: center; justify-content: center; line-height: 1;
	color: #c9bea9; transition: color .15s ease, background .15s ease;
}
.cr-theme-btn svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.cr-theme-btn:hover, .cr-theme-wrap.cr-open .cr-theme-btn { color: #fae29c; background: rgba(212, 175, 55, 0.18); }
.cr-theme-menu {
	display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
	min-width: 142px; padding: 5px; border-radius: 8px;
	background: #1f1d18; border: 1px solid rgba(212, 175, 55, 0.45);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.cr-theme-wrap.cr-open .cr-theme-menu { display: block; }
.cr-theme-item {
	display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px;
	background: transparent; border: none; border-radius: 6px; cursor: pointer;
	font-family: inherit; font-size: 13px; line-height: 1.2; text-align: left; color: #e6dcc6;
}
.cr-theme-item:hover, .cr-theme-item:focus { background: rgba(212, 175, 55, 0.16); outline: none; }
.cr-theme-item.cr-on { color: #fae29c; font-weight: 600; }
.cr-theme-label { flex: 1 1 auto; }
.cr-theme-check { visibility: hidden; font-size: 12px; }
.cr-theme-item.cr-on .cr-theme-check { visibility: visible; }
/* 色块预览：浅色 = 白 + 蓝，黑金 = 黑 + 金，跟随网站 = 左右各半 */
.cr-theme-swatch {
	width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px;
	border: 1px solid rgba(128, 128, 128, 0.45);
}
.cr-swatch-light { background: linear-gradient(135deg, #ffffff 0 50%, #428bca 50% 100%); }
.cr-swatch-gold  { background: linear-gradient(135deg, #141414 0 50%, #d4af37 50% 100%); }
.cr-swatch-auto  { background: linear-gradient(90deg, #ffffff 0 50%, #141414 50% 100%); }
/* 键盘聚焦可见 */
.cr-theme-btn:focus-visible, .cr-theme-item:focus-visible, .cr-tab:focus-visible, #chatroom-header .cr-min:focus-visible {
	outline: 2px solid #fae29c; outline-offset: 1px;
}
/* H5 页头部右侧：按钮放在原占位里 */
.kf-page-header .cr-theme-btn { color: #fae29c; padding: 6px; }
.kf-page-header .cr-theme-btn svg { width: 20px; height: 20px; }

/* ==================================================================
 * 浅色主题(蓝白) —— 覆盖上面的黑金样式
 * ================================================================== */

/* 启动栏 */
/* 原来的蓝色圆形图标 */
.cr-theme-light #chatroom-launcher {
	background: #428bca;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.cr-theme-light #chatroom-launcher:hover {
	background: #3071a9;
	border-color: transparent;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.cr-theme-light #chatroom-launcher svg { fill: #fff; filter: none; }
.cr-theme-light #chatroom-launcher .cr-badge { border-color: #fff; }
/* 文字提示气泡：白底深色字 */
.cr-theme-light .cr-launcher-tip { background: #fff; border-color: #e3e8ee; box-shadow: 0 4px 16px rgba(20, 40, 70, 0.16); }
.cr-theme-light .cr-launcher-tip::after { border-top-color: #e3e8ee; border-right-color: #e3e8ee; }
.cr-theme-light .cr-tip-text { color: #333; }
.cr-theme-light .cr-tip-text:hover { color: #2f6fa8; }
.cr-theme-light .cr-tip-close { color: #8a94a3; }
.cr-theme-light .cr-tip-close:hover { color: #333; background: #eef3f8; }
.cr-theme-light .cr-tip-text:focus-visible, .cr-theme-light .cr-tip-close:focus-visible { outline-color: #428bca; }

/* 面板与缩放手柄 */
.cr-theme-light #chatroom-panel {
	background: #fff;
	border-color: #e3e8ee;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
}
.cr-theme-light #chatroom-resize::before { border-color: rgba(255, 255, 255, 0.85); }
.cr-theme-light #chatroom-resize:hover::before { border-color: #fff; }

/* 头部与标签 */
.cr-theme-light #chatroom-header { background: #428bca; border-bottom-color: #3a7dba; color: #fff; }
.cr-theme-light #chatroom-header .cr-title { color: #fff; }
.cr-theme-light #chatroom-header .cr-title .cr-dot { background: #7CFC00; box-shadow: 0 0 4px #7CFC00; }
.cr-theme-light #chatroom-header .cr-title.cr-title-kefu .cr-tab-icon { fill: #fff; }
.cr-theme-light .cr-tabs { background: rgba(0, 0, 0, 0.14); border-color: rgba(255, 255, 255, 0.35); box-shadow: none; }
.cr-theme-light .cr-tab { color: rgba(255, 255, 255, 0.85); }
.cr-theme-light .cr-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
.cr-theme-light .cr-tab.cr-tab-kefu:not(.cr-active) { color: #fff; }
.cr-theme-light .cr-tab.cr-tab-kefu:not(.cr-active):hover { color: #fff; background: rgba(255, 255, 255, 0.2); }
.cr-theme-light .cr-tab.cr-active {
	background: #fff;
	color: #2f6fa8 !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.cr-theme-light .cr-tab-badge { box-shadow: 0 0 0 1.5px #fff; }
.cr-theme-light #chatroom-header .cr-min { color: rgba(255, 255, 255, 0.9); }
.cr-theme-light #chatroom-header .cr-min:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
.cr-theme-light .cr-theme-btn { color: rgba(255, 255, 255, 0.9); }
.cr-theme-light .cr-theme-btn:hover, .cr-theme-light .cr-theme-wrap.cr-open .cr-theme-btn { color: #fff; background: rgba(255, 255, 255, 0.18); }
.cr-theme-light .cr-theme-btn:focus-visible, .cr-theme-light .cr-tab:focus-visible, .cr-theme-light #chatroom-header .cr-min:focus-visible { outline-color: #fff; }
.cr-theme-light .cr-theme-menu { background: #fff; border-color: #dfe5ec; box-shadow: 0 8px 24px rgba(20, 40, 70, 0.18); }
.cr-theme-light .cr-theme-item { color: #333; }
.cr-theme-light .cr-theme-item:hover, .cr-theme-light .cr-theme-item:focus { background: #eef3f8; }
.cr-theme-light .cr-theme-item.cr-on { color: #2f6fa8; }
.cr-theme-light .cr-theme-item:focus-visible { outline-color: #428bca; }

/* 面板内容区 */
.cr-theme-light .cr-pane-chat, .cr-theme-light .cr-pane-kefu { background: #f5f7fa; }
.cr-theme-light #chatroom-notice { background: #fff8e1; color: #8a6d3b; border-bottom-color: #f3e7c5; box-shadow: none; }
.cr-theme-light #chatroom-messages { background: #f5f7fa; }
.cr-theme-light #chatroom-messages::-webkit-scrollbar-track,
.cr-theme-light .kf-messages::-webkit-scrollbar-track,
.cr-theme-light .cr-emo-pages::-webkit-scrollbar-track,
.cr-theme-light .kf-emo-pages::-webkit-scrollbar-track { background: transparent; }
.cr-theme-light #chatroom-messages::-webkit-scrollbar-thumb,
.cr-theme-light .kf-messages::-webkit-scrollbar-thumb,
.cr-theme-light .cr-emo-pages::-webkit-scrollbar-thumb,
.cr-theme-light .kf-emo-pages::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); }
.cr-theme-light #chatroom-messages::-webkit-scrollbar-thumb:hover,
.cr-theme-light .kf-messages::-webkit-scrollbar-thumb:hover,
.cr-theme-light .cr-emo-pages::-webkit-scrollbar-thumb:hover,
.cr-theme-light .kf-emo-pages::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.32); }

/* 聊天室消息 */
.cr-theme-light .cr-msg .cr-avatar { background: #ddd; border-color: transparent; }
.cr-theme-light .cr-msg .cr-meta { color: #646a73; }  /* 对比度约 5:1 */
.cr-theme-light .cr-msg .cr-meta .cr-name { color: #2f6fa8; }
.cr-theme-light .cr-msg .cr-meta .cr-name.cr-name-me { color: #3d8b3d; }
.cr-theme-light .cr-msg .cr-meta .cr-time { color: #646a73; }
.cr-theme-light .cr-msg .cr-text { background: #fff; color: #333; border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.cr-theme-light .cr-msg .cr-text a { color: #2f6fa8; }
.cr-theme-light .cr-msg .cr-quote { background: rgba(66, 139, 202, 0.08); border-left-color: #428bca; color: #5a6477; }
.cr-theme-light .cr-msg .cr-quote .cr-qname { color: #2f6fa8; }
.cr-theme-light .cr-msg .cr-acts .cr-reply { color: #2f6fa8; }
.cr-theme-light .cr-msg .cr-acts .cr-del, .cr-theme-light .cr-msg .cr-acts .cr-mute { color: #c0392b; }
.cr-theme-light .cr-sys { color: #6b7280; }
.cr-theme-light #chatroom-replybar { background: #eef3f8; border-top-color: #e3e9f0; color: #5a6477; }
.cr-theme-light #chatroom-replybar .cr-rb-x { color: #8a94a3; }
.cr-theme-light #chatroom-replybar .cr-rb-x:hover { color: #555; }

/* 输入区(聊天室 + 客服) */
.cr-theme-light #chatroom-input, .cr-theme-light .kf-input-area { background: #fff; border-top-color: #eee; }
.cr-theme-light #chatroom-inputbar textarea, .cr-theme-light .kf-inputbar textarea { background: #fff; color: #333; border-color: #dcdfe6; }
.cr-theme-light #chatroom-inputbar textarea:focus, .cr-theme-light .kf-inputbar textarea:focus { border-color: #428bca; box-shadow: 0 0 0 2px rgba(66, 139, 202, 0.15); }
.cr-theme-light #chatroom-inputbar .cr-send, .cr-theme-light .kf-send-btn { background: #428bca; color: #fff; box-shadow: none; }
.cr-theme-light #chatroom-inputbar .cr-send:hover, .cr-theme-light .kf-send-btn:hover { background: #3071a9; box-shadow: none; }
.cr-theme-light #chatroom-inputbar .cr-send:disabled, .cr-theme-light .kf-send-btn:disabled { background: #b9c6d2; color: #fff; }
.cr-theme-light #chatroom-guest, .cr-theme-light .kf-guest-box { color: #666; background: #fff; border-top-color: #eee; }
.cr-theme-light #chatroom-guest a, .cr-theme-light .kf-guest-box a { color: #2f6fa8; }
.cr-theme-light #chatroom-tip, .cr-theme-light .kf-tip { color: #c0392b; background: #fdf0ef; border-top-color: #f5d5d2; }

/* 表情面板(聊天室 + 客服) */
.cr-theme-light #chatroom-emojis, .cr-theme-light .kf-emojis { background: #fff; border-bottom-color: #f0f0f0; }
.cr-theme-light .cr-emo-tip, .cr-theme-light .kf-emo-tip { color: #888; }
.cr-theme-light .cr-emo-retry, .cr-theme-light .kf-emo-retry { color: #2f6fa8; }
.cr-theme-light .cr-emo-tabs, .cr-theme-light .kf-emo-tabs { background: #fafbfc; border-bottom-color: #f0f0f0; }
.cr-theme-light .cr-emo-tab, .cr-theme-light .kf-emo-tab { color: #5a6477; }
.cr-theme-light .cr-emo-tab:hover, .cr-theme-light .kf-emo-tab:hover { color: #2f6fa8; }
.cr-theme-light .cr-emo-tab.cr-on, .cr-theme-light .kf-emo-tab.kf-on { color: #2f6fa8; border-bottom-color: #428bca; }
.cr-theme-light .cr-emo-pages, .cr-theme-light .kf-emo-pages { background: #fff; }
.cr-theme-light .cr-emo-i:hover, .cr-theme-light .kf-emo-i:hover { background: #eef3f8; }

/* 人工客服 */
.cr-theme-light .kf-container, .cr-theme-light .kf-messages { background: #f5f7fa; }
.cr-theme-light .kf-offline-bar { background: #fffbe6; color: #8a5a00; border-bottom-color: #ffe58f; }
.cr-theme-light .kf-kefu-avatar { background: #428bca; color: #fff; box-shadow: none; }
.cr-theme-light .kf-kefu-avatar svg { fill: #fff; }
.cr-theme-light .kf-user-avatar { background: #5cb85c; color: #fff; border-color: transparent; }
.cr-theme-light .kf-msg-meta { color: #646a73; }
.cr-theme-light .kf-kefu-name { color: #2f6fa8; }
.cr-theme-light .kf-welcome-bubble .kf-msg-bubble,
.cr-theme-light .kf-from-kefu .kf-msg-bubble { background: #fff; color: #333; border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.cr-theme-light .kf-from-kefu .kf-msg-bubble a { color: #2f6fa8; }
.cr-theme-light .kf-from-user .kf-msg-bubble { background: #428bca; color: #fff; font-weight: normal; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.cr-theme-light .kf-from-user .kf-msg-bubble a { color: #fff; }
.cr-theme-light .kf-sys-tip { background: #fff8e1; color: #8a6d3b; border-color: #f3e7c5; }
.cr-theme-light .kf-admin-box { background: #fff; color: #555; border-top-color: #eee; }
.cr-theme-light .kf-admin-btn { background: #2080f0; color: #fff; box-shadow: none; }
.cr-theme-light .kf-admin-btn:hover { background: #186bd6; color: #fff; box-shadow: none; }

/* H5 客服页 */
.cr-theme-light body.kf-h5-body, .cr-theme-light .kf-page { background: #f5f7fa; color: #333; }
.cr-theme-light .kf-page-header { background: #428bca; border-bottom-color: #3a7dba; color: #fff; }
.cr-theme-light .kf-back-btn { color: #fff; }
.cr-theme-light .kf-back-btn:hover { background: rgba(255, 255, 255, 0.16); }
.cr-theme-light .kf-page-title { color: #fff; }
.cr-theme-light .kf-page-header .cr-theme-btn { color: #fff; }

/* 头部多了主题按钮，超窄屏(≤360px)下隐藏标签图标，给两个标签 + 红点留出位置 */
@media (max-width: 360px) {
	#chatroom-header .cr-tab .cr-tab-icon { display: none; }
	.cr-tab { padding: 6px 10px; }
}