/* 现代简约动画系统 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

.animate-fade-in {
	animation: fadeIn 0.4s ease-out;
}

.animate-slide-up {
	animation: slideUp 0.5s ease-out;
}

.animate-scale-in {
	animation: scaleIn 0.4s ease-out;
}

.animate-pulse {
	animation: pulse 2s infinite;
}

.animate-float {
	animation: subtleFloat 3s ease-in-out infinite;
}

/* 现代简约容器效果 */
.glass-morphism {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(229, 231, 235, 0.8);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.glass-morphism-soft {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(229, 231, 235, 0.6);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 现代专业背景 */
.gradient-bg {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
	position: relative;
	overflow: hidden;
}

/* 简约消息气泡样式 */
.chat-message {
	animation: slideUp 0.4s ease-out;
	position: relative;
	margin: 0.75rem 0;
}

/* 消息项容器 */
.message-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
	position: relative;
}

.message-item.user-message {
	flex-direction: row-reverse;
}

/* 消息内容区域 */
.message-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 70%;
}

.message-item.user-message .message-content {
	align-items: flex-end;
}

/* 发送者名称 */
.message-meta-name {
	font-size: 0.75rem;
	color: #6b7280;
	margin-bottom: 0.25rem;
	font-weight: 500;
}

.message-item.user-message .message-meta-name {
	text-align: right;
}

/* 消息气泡基础样式 */
.message-bubble {
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 0.5rem 0.75rem !important;
	max-width: 28rem !important;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	backdrop-filter: blur(10px) saturate(1.2);
	cursor: pointer;
	box-sizing: border-box;
	min-width: 0;
}

/* 消息气泡内的引用消息样式优化 */
.message-bubble .reply-to-message {
	max-width: 100% !important;
	box-sizing: border-box;
	word-break: break-word;
	overflow-wrap: break-word;
}

.message-bubble .reply-content {
	max-width: 100% !important;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* 时间显示区域 - 居中显示在气泡下方 */
.message-meta-time {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: #9ca3af;
	position: relative;
}

.message-item.user-message .message-meta-time {
	justify-content: flex-end;
}

/* 简化时间显示 */
.message-meta-time .time {
	font-size: 0.75rem;
	color: #9ca3af;
	transition: opacity 0.2s ease;
}

/* 详细时间悬浮提示 */
.message-bubble[data-full-time]:hover::after {
	content: attr(data-full-time);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	white-space: nowrap;
	z-index: 1000;
	margin-bottom: 0.25rem;
	pointer-events: none;
	opacity: 0;
	animation: fadeIn 0.2s ease forwards;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateX(-50%) translateY(0.25rem); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 消息操作按钮区域 */
.message-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.message-item:hover .message-actions {
	opacity: 1;
}

.message-item.user-message .message-actions {
	justify-content: flex-end;
}

/* 消息操作按钮样式 */
.recall-message-btn,
.reply-message-btn {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #e5e7eb;
	border-radius: 0.25rem;
	padding: 0.125rem 0.375rem;
	font-size: 0.625rem;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.2s ease;
	backdrop-filter: blur(4px);
}

.recall-message-btn:hover,
.reply-message-btn:hover {
	background: #f3f4f6;
	color: #374151;
	border-color: #d1d5db;
}

.reply-message-btn:hover {
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
	border-color: #3b82f6;
}

/* 已读状态样式 */
.message-read-status {
	font-size: 0.625rem;
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	transition: all 0.2s ease;
}

/* 时间提示框样式 */
.time-tooltip {
	position: fixed;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 0.375rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 中等屏幕下的消息气泡优化 */
@media (min-width: 1024px) {
	.message-bubble {
		max-width: 32rem !important;
		padding: 0.5rem 0.75rem !important;
	}
}

@media (min-width: 1280px) {
	.message-bubble {
		max-width: 36rem !important;
	}
}

.message-bubble:hover {
	transform: translateY(-1px);
}

/* 用户消息气泡 - 现代简约设计 */
.message-bubble.user-message {
	background: #2563eb !important;
	color: white !important;
	border-radius: 18px 18px 6px 18px !important;
	box-shadow: 0 2px 12px rgba(37, 99, 235, 0.15);
	border: none !important;
}

.message-bubble.user-message:hover {
	background: #1d4ed8 !important;
	box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
	transform: translateY(-1px);
}

.message-bubble.user-message * {
	color: white !important;
}

/* 管理员消息气泡 - 现代专业风格 */
.message-bubble.admin-message {
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	color: #1f2937 !important;
	border-radius: 18px 18px 18px 6px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
	position: relative;
}

.message-bubble.admin-message:hover {
	background: #f9fafb !important;
	border-color: #d1d5db !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
	transform: translateY(-1px);
}

.message-bubble.admin-message * {
	color: #1f2937 !important;
}

/* 文件预览确认弹窗样式 */
#file-preview-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all 0.3s ease;
}

#file-preview-modal.hidden {
	display: none !important;
}

#file-preview-modal:not(.hidden) {
	display: flex !important;
}

#file-preview-modal .bg-white {
	position: relative;
	max-width: 28rem;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	background: white;
	border-radius: 1rem;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
	transform: scale(1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#file-preview-modal #preview-image {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
	border: 1px solid #e5e7eb;
}

/* 移动端文件预览弹窗优化 */
@media (max-width: 640px) {
	#file-preview-modal .bg-white {
		width: 95%;
		max-width: none;
		margin: 1rem;
	}
	
	#file-preview-modal #preview-image {
		max-width: 100%;
		height: auto;
	}
}

/* 管理员消息气泡指示器 - 简化设计 */
.message-bubble.admin-message::before {
	content: '客服';
	position: absolute;
	top: -8px;
	right: -8px;
	width: 28px;
	height: 20px;
	background: #059669;
	border: 2px solid white;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 600;
	color: white;
	box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
	z-index: 2;
}

/* 智能助手消息气泡 - 简洁设计 */
.message-bubble.ai-message {
	background: #f8fafc !important;
	color: #374151 !important;
	border: 2px solid #e0e7ff !important;
	border-radius: 16px 16px 16px 4px !important;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1) !important;
	position: relative;
}

.message-bubble.ai-message:hover {
	background: #f1f5f9 !important;
	border-color: #c7d2fe !important;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

.message-bubble.ai-message * {
	color: #374151 !important;
}

/* AI标识 - 右上角 */
.message-bubble.ai-message::after {
	content: 'AI';
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 18px;
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	border: 2px solid white;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	font-weight: 700;
	color: white;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
	z-index: 2;
	letter-spacing: 0.5px;
}

/* 系统消息样式 - 现代提示风格 */
.message-bubble.system-message,
.system-message {
	background: #f0f9ff !important;
	border: 1px solid #0ea5e9 !important;
	color: #0c4a6e !important;
	border-radius: 14px !important;
	box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1) !important;
	text-align: center;
	padding: 10px 18px !important;
	font-size: 0.9em;
}

.message-bubble.system-message:hover,
.system-message:hover {
	background: #e0f2fe !important;
	border-color: #0284c7 !important;
	box-shadow: 0 3px 10px rgba(14, 165, 233, 0.15) !important;
}

.message-bubble.system-message *,
.system-message * {
	color: #0c4a6e !important;
}



/* 自定义滚动条 - 浅色主题 */
#chat-messages::-webkit-scrollbar {
	width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
	background: rgba(148, 163, 184, 0.1);
	border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.3);
	border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
	background: rgba(148, 163, 184, 0.5);
}

/* 现代输入框系统 - 专业简约设计 */
.modern-input {
	background: #ffffff;
	border: 1.5px solid #d1d5db;
	border-radius: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.modern-input>* {
	pointer-events: auto;
	position: relative;
	z-index: 2;
}

.modern-input:focus-within {
	border-color: #2563eb;
	box-shadow:
		0 0 0 3px rgba(37, 99, 235, 0.08),
		0 4px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.modern-input textarea {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	resize: none !important;
	color: #1f2937 !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	padding: 14px 18px !important;
	margin: 0 !important;
	width: 100% !important;
	transition: all 0.25s ease;
	pointer-events: auto !important;
	z-index: 10 !important;
	position: relative;
	min-height: 80px;
	max-height: 200px;
	overflow-y: auto;
}

/* 宽屏下输入区域优化 */
@media (min-width: 1024px) {
	.modern-input {
		border-radius: 20px;
	}
	
	.modern-input textarea {
		font-size: 16px !important;
		padding: 16px 20px !important;
		min-height: 90px;
		max-height: 240px;
	}
}

@media (min-width: 1280px) {
	.modern-input textarea {
		padding: 18px 24px !important;
		min-height: 100px;
		max-height: 280px;
	}
}

.modern-input textarea::placeholder {
	color: #6b7280 !important;
	opacity: 1 !important;
	transition: opacity 0.3s ease;
	font-weight: 400;
}

.modern-input:focus-within textarea::placeholder {
	opacity: 0.7 !important;
}

/* Emoji选择器样式 */
emoji-picker {
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 8px;
	z-index: 1000;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.2);
}

/* 现代按钮系统 - 专业设计 */
.btn-primary {
	background: #2563eb;
	border: none;
	color: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	outline: none;
}

.btn-primary:hover {
	background: #1d4ed8;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

.btn-primary:active {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.btn-secondary {
	background: #ffffff;
	border: 1.5px solid #d1d5db;
	color: #1f2937;
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	outline: none;
}

.btn-secondary:hover {
	background: #f9fafb;
	border-color: #9ca3af;
	color: #1f2937;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* 现代图标按钮 - 简约设计 */
.modern-icon-btn {
	position: relative;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	color: #6b7280;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	user-select: none;
	outline: none;
}

.modern-icon-btn:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	color: #1f2937;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modern-icon-btn:active {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.modern-icon-btn img {
	transition: all 0.2s ease;
}

/* 按钮波纹效果 */
.btn-ripple {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	pointer-events: none;
	overflow: hidden;
}

.modern-icon-btn .btn-ripple::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.3s ease, height 0.3s ease;
}

.modern-icon-btn:active .btn-ripple::before {
	width: 100%;
	height: 100%;
}

/* 移动端按钮优化 */
@media (max-width: 640px) {
	.modern-icon-btn {
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
		touch-action: manipulation;
	}

	.modern-icon-btn:hover {
		background: #ffffff;
		border-color: #e5e7eb;
	}

	.modern-icon-btn:active {
		transform: scale(0.95);
		background: #f3f4f6;
	}
}

/* 简约点击效果 */
.ripple-effect {
	position: relative;
	transition: all 0.2s ease;
}

.ripple-effect:active {
	transform: scale(0.98);
}

/* 嵌入模式样式 - 简化版本，直接使用100%高度 */
html.embedded-mode,
body.embedded-mode {
	height: 100%;
	overflow: hidden;
}

/* 桌面端视口单位优化 - 支持新CSS视口单位 */
#chat-widget-container {
	/* 为桌面端添加新CSS视口单位支持，确保在各种浏览器环境下都能正确显示 */
	height: 650px;
}

@media (min-width: 1024px) {
	#chat-widget-container {
		/* 大屏幕使用新的CSS视口单位，优先使用lvh（大视口高度）获得最大可用空间 */
		height: 85lvh !important;
		height: 85dvh;
		/* 动态视口高度作为备用 */
		height: 85vh;
		/* 传统视口高度作为最后备用 */
	}
}

@media (min-width: 1280px) {
	#chat-widget-container {
		/* 超大屏幕使用新的CSS视口单位，优先使用lvh获得最大可用空间 */
		height: 90lvh !important;
		height: 90dvh;
		/* 动态视口高度作为备用 */
		height: 90vh;
		/* 传统视口高度作为最后备用 */
	}
}

/* 模态框视口单位优化 - 支持新CSS视口单位 */
#image-modal .relative {
	/* 图片预览模态框使用新的CSS视口单位，优先使用lvh获得最大可用空间 */
	max-height: 90lvh !important;
	max-height: 90dvh;
	/* 动态视口高度作为备用 */
	max-height: 90vh;
	/* 传统视口高度作为最后备用 */
}

#announcement-modal .announcement-container {
	/* 公告模态框使用新的CSS视口单位，优先使用lvh获得最大可用空间 */
	max-height: 90lvh !important;
	max-height: 90dvh;
	/* 动态视口高度作为备用 */
	max-height: 90vh;
	/* 传统视口高度作为最后备用 */
}

/* 移动端模态框优化 */
@media (max-width: 640px) {

	#image-modal .relative:not(.embedded-mode *),
	#announcement-modal .announcement-container:not(.embedded-mode *) {
		/* 移动端模态框使用svh确保不被浏览器工具栏遮挡 */
		max-height: 90svh !important;
		max-height: 90dvh;
		/* 动态视口高度作为备用 */
		max-height: 90vh;
		/* 传统视口高度作为最后备用 */
	}

	/* 嵌入模式下的模态框使用相对高度 */
	.embedded-mode #image-modal .relative,
	.embedded-mode #announcement-modal .announcement-container {
		max-height: 90% !important;
	}
}

/* 移动端优化 - 现代响应式设计 + 新CSS视口单位支持 */
@media (max-width: 768px) {
	.chat-widget {
		width: 100vw !important;
		height: 100vh !important;
		max-width: none !important;
		max-height: none !important;
		border-radius: 0 !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		transform: none !important;
		margin: 0 !important;
		z-index: 9999 !important;
		box-shadow: none !important;
	}

	.chat-header {
		padding: 20px 24px !important;
		border-radius: 0 !important;
		background: rgba(255, 255, 255, 0.98) !important;
		backdrop-filter: blur(20px) !important;
		border-bottom: 1px solid #e5e7eb !important;
	}

	.chat-messages {
		padding: 20px !important;
		height: calc(100vh - 160px) !important;
		gap: 16px !important;
	}

	.chat-input-area {
		padding: 20px 24px !important;
		border-radius: 0 !important;
		background: rgba(255, 255, 255, 0.98) !important;
		backdrop-filter: blur(20px) !important;
		border-top: 1px solid #e5e7eb !important;
	}

	.message-bubble {
		max-width: calc(100vw - 100px) !important;
		font-size: 16px !important;
		padding: 10px 14px !important;
		border-radius: 20px 20px 8px 20px !important;
	}

	.message-bubble .reply-to-message {
		max-width: calc(100vw - 140px) !important;
		padding: 6px 8px !important;
		font-size: 14px !important;
	}

	.message-bubble .reply-content {
		font-size: 12px !important;
		-webkit-line-clamp: 3 !important;
	}

	.message-bubble.admin-message {
		border-radius: 20px 20px 20px 8px !important;
	}

	.modern-input {
		border-radius: 20px !important;
	}

	.modern-input textarea {
		font-size: 16px !important;
		padding: 16px 20px !important;
		line-height: 1.6 !important;
	}

	.btn-primary,
	.btn-secondary {
		padding: 14px 24px !important;
		font-size: 16px !important;
		min-height: 48px !important;
		border-radius: 16px !important;
	}

	.icon-btn,
	.modern-icon-btn {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
		border-radius: 16px !important;
	}

	/* 移动端触摸优化 */
	.message-bubble:hover {
		transform: none !important;
	}

	.btn-primary:hover,
	.btn-secondary:hover,
	.icon-btn:hover,
	.modern-icon-btn:hover {
		transform: none !important;
	}
}

/* 平板端优化 - 现代适配 */
@media (min-width: 769px) and (max-width: 1024px) {
	.chat-widget {
		width: 85vw !important;
		height: 80vh !important;
		max-width: 680px !important;
		border-radius: 24px !important;
	}

	.message-bubble {
		max-width: 450px !important;
		font-size: 15px !important;
		padding: 6px 8px !important;
	}

	.chat-messages {
		padding: 24px !important;
		gap: 14px !important;
	}

	.chat-input-area {
		padding: 20px 24px !important;
	}

	.chat-header {
		padding: 18px 24px !important;
	}

	.modern-input textarea {
		font-size: 15px !important;
		padding: 14px 18px !important;
	}

	.btn-primary,
	.btn-secondary {
		padding: 12px 22px !important;
		font-size: 15px !important;
	}

	.icon-btn,
	.modern-icon-btn {
		width: 42px !important;
		height: 42px !important;
	}
}

@media (max-width: 640px) {

	/* 移动端全屏显示，允许滚动以确保输入框可访问 */
	body:not(.embedded-mode) {
		padding: 0 !important;
		margin: 0 !important;
		overflow-x: hidden;
		/* 只隐藏横向滚动 */
		overflow-y: auto;
		/* 允许纵向滚动 */
		/* 使用新的CSS视口单位，优先使用svh（小视口高度），确保不被浏览器工具栏遮挡 */
		min-height: 100svh !important;
		min-height: 100dvh;
		/* 动态视口高度作为备用 */
		min-height: 100vh;
		/* 传统视口高度作为最后备用 */
	}

	/* 嵌入模式下使用100%高度，避免视口单位问题 */
	body.embedded-mode {
		padding: 0 !important;
		margin: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		height: 100% !important;
		min-height: 100% !important;
	}

	.relative.z-10:not(.embedded-mode *) {
		padding: 0 !important;
		margin: 0 !important;
		/* 使用新的CSS视口单位确保完整可见 */
		min-height: 100svh !important;
		min-height: 100dvh;
		/* 动态视口高度作为备用 */
		min-height: 100vh;
		/* 传统视口高度作为最后备用 */
		/* 移除固定高度，使用最小高度 */
		display: flex !important;
		align-items: stretch !important;
		justify-content: stretch !important;
	}

	/* 嵌入模式下的容器使用100%高度 */
	.embedded-mode .relative.z-10 {
		padding: 0 !important;
		margin: 0 !important;
		height: 100% !important;
		min-height: 100% !important;
		display: flex !important;
		align-items: stretch !important;
		justify-content: stretch !important;
	}

	#chat-widget-container:not(.embedded-mode *) {
		/* 使用新的CSS视口单位确保完整可见，不被浏览器工具栏遮挡 */
		min-height: 100svh !important;
		min-height: 100dvh;
		/* 动态视口高度作为备用 */
		min-height: 100vh;
		/* 传统视口高度作为最后备用 */
		/* 使用最小高度而不是固定高度 */
		width: 100vw !important;
		max-width: 100vw !important;
		border-radius: 0 !important;
		margin: 0 !important;
		/* 移动端使用更柔和的白色背景 */
		background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
		backdrop-filter: none !important;
		border: none !important;
		box-shadow: none !important;
		/* 确保flex布局正确 */
		display: flex !important;
		flex-direction: column !important;
	}

	/* 嵌入模式下的聊天容器使用100%高度 */
	.embedded-mode #chat-widget-container {
		height: 100% !important;
		min-height: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 0 !important;
		margin: 0 !important;
		background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
		backdrop-filter: none !important;
		border: none !important;
		box-shadow: none !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* 移动端头部优化 - 状态栏适配 */
	header {
		padding: calc(env(safe-area-inset-top) + 1rem) 1rem 1rem 1rem !important;
		position: sticky;
		top: 0;
		z-index: 10;
		background: rgba(255, 255, 255, 0.9) !important;
		backdrop-filter: blur(20px) !important;
		border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
	}

	/* 移动端消息区域优化 - 使用新CSS视口单位 */
	#chat-messages:not(.embedded-mode *) {
		padding: 0.75rem !important;
		/* 移除装饰背景，保持一致性 */
		background: transparent !important;
		/* 关键修复：限制消息区域最大高度，确保输入框始终可见 */
		/* 使用新的CSS视口单位，优先使用svh确保不被浏览器工具栏影响 */
		max-height: calc(100svh - 220px) !important;
		max-height: calc(100dvh - 220px);
		/* 动态视口高度作为备用 */
		max-height: calc(100vh - 220px);
		/* 传统视口高度作为最后备用 */
		/* 强制滚动当内容溢出时 */
		overflow-y: auto !important;
		/* 确保flex布局正确 */
		flex: 1 1 0 !important;
		min-height: 0 !important;
	}

	/* 嵌入模式下的消息区域使用相对高度 */
	.embedded-mode #chat-messages {
		padding: 0.75rem !important;
		background: transparent !important;
		/* 使用相对高度而不是视口单位 */
		max-height: calc(100% - 220px) !important;
		overflow-y: auto !important;
		flex: 1 1 0 !important;
		min-height: 0 !important;
	}

	/* 移动端输入区域优化 - 支持安全区域 */
	footer {
		padding: 1rem !important;
		padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
		position: sticky;
		bottom: 0;
		background: rgba(255, 255, 255, 0.9) !important;
		backdrop-filter: blur(20px) !important;
		border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
	}

	/* 移动端输入框优化 */
	#message-input {
		min-height: 3rem !important;
		background: rgba(255, 255, 255, 0.6) !important;
		border: 2px solid rgba(148, 163, 184, 0.2) !important;
		/* 确保输入框始终可点击 */
		pointer-events: auto !important;
		touch-action: manipulation !important;
		position: relative !important;
		z-index: 100 !important;
	}

	#message-text {
		font-size: 16px !important;
		/* 防止iOS缩放 */
		line-height: 1.5 !important;
		padding: 0.75rem !important;
		color: #374151 !important;
		/* 确保输入框可点击和聚焦 */
		pointer-events: auto !important;
		touch-action: manipulation !important;
		position: relative !important;
		z-index: 101 !important;
		/* 防止被其他元素遮挡 */
		background: transparent !important;
		border: none !important;
		outline: none !important;
	}

	#message-text::placeholder {
		color: #9ca3af !important;
	}

	/* 确保输入区域容器不被遮挡 */
	footer {
		position: relative !important;
		z-index: 9999 !important;
		/* 提高层级 */
		/* 强制在最底部 */
		margin-top: auto !important;
		/* 确保点击事件正常 */
		pointer-events: auto !important;
		/* 防止被覆盖 */
		isolation: isolate !important;
	}

	/* 嵌入模式下的特殊优化 */
	body.embedded-mode footer,
	iframe footer {
		z-index: 99999 !important;
		position: sticky !important;
		bottom: 0 !important;
		background: rgba(255, 255, 255, 0.95) !important;
		backdrop-filter: blur(20px) !important;
	}

	/* 防止消息区域的点击事件干扰输入框 */
	body.embedded-mode #chat-messages,
	iframe #chat-messages {
		pointer-events: auto !important;
		/* 消息气泡的点击事件不应该冒泡 */
	}

	body.embedded-mode .chat-message,
	iframe .chat-message {
		pointer-events: auto !important;
		/* 限制消息气泡的点击范围 */
		cursor: default !important;
	}

	/* 移动端嵌入模式的最终修复 */
	@media (max-width: 640px) {

		body.embedded-mode footer,
		iframe footer {
			z-index: 999999 !important;
			position: fixed !important;
			bottom: 0 !important;
			left: 0 !important;
			right: 0 !important;
			background: rgba(255, 255, 255, 0.98) !important;
			backdrop-filter: blur(20px) !important;
			border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
			/* 阻止事件穿透 */
			pointer-events: auto !important;
			/* 确保在最顶层 */
			isolation: isolate !important;
		}

		body.embedded-mode #message-input,
		iframe #message-input {
			z-index: 9999999 !important;
			pointer-events: auto !important;
			touch-action: manipulation !important;
			/* 确保输入框区域绝对可点击 */
			position: relative !important;
		}

		body.embedded-mode #message-text,
		iframe #message-text {
			z-index: 99999999 !important;
			pointer-events: auto !important;
			touch-action: manipulation !important;
			/* 防止被任何元素遮挡 */
			position: relative !important;
			background: transparent !important;
		}

		/* 确保发送和附件按钮也可点击 */
		body.embedded-mode #send-btn,
		body.embedded-mode #file-btn,
		iframe #send-btn,
		iframe #file-btn {
			z-index: 9999999 !important;
			pointer-events: auto !important;
			touch-action: manipulation !important;
		}

		/* 防止消息区域在移动端嵌入模式下覆盖输入框 */
		body.embedded-mode #chat-messages,
		iframe #chat-messages {
			/* 确保消息区域不会覆盖底部输入区域 */
			/* padding-bottom: 120px !important;
                    margin-bottom: 0 !important; */
		}
	}

	/* 移动端按钮优化 - 增加触摸目标 */
	#send-btn,
	#file-btn {
		min-width: 48px !important;
		min-height: 48px !important;
		touch-action: manipulation;
	}

	#close-chat {
		min-width: 44px !important;
		min-height: 44px !important;
		padding: 0.75rem !important;
	}

	/* 移动端消息气泡优化 */
	.chat-message .max-w-xs {
		max-width: 80% !important;
	}

	/* 头像大小优化 */
	.chat-message .w-8.h-8 {
		width: 2.5rem !important;
		height: 2.5rem !important;
	}

	/* 装饰性元素在移动端完全隐藏 */
	.animate-float {
		display: none !important;
	}

	/* 移动端状态指示器优化 */
	#status-indicator {
		width: 1rem !important;
		height: 1rem !important;
	}

	/* 移动端文件上传按钮优化 */
	.btn-hover {
		transform: none !important;
		box-shadow: none !important;
	}
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
	header h1 {
		font-size: 1rem !important;
	}

	header p {
		font-size: 0.75rem !important;
	}

	#message-text {
		padding: 0.75rem !important;
	}
}

/* 横屏模式优化 */
@media (max-height: 500px) and (orientation: landscape) {
	header {
		padding: 0.75rem 1rem !important;
	}

	header h1 {
		font-size: 1rem !important;
	}

	#chat-messages {
		padding: 0.75rem 1rem !important;
	}

	footer {
		padding: 0.75rem 1rem !important;
	}
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
	.btn-hover:hover {
		transform: none;
		box-shadow: none;
	}

	.btn-hover:active {
		transform: scale(0.95);
	}

	button:active {
		background-color: rgba(59, 130, 246, 0.1) !important;
	}
}

/* 键盘弹出时的优化 - 更全面的适配 */
@media (max-height: 600px) {
	#chat-widget-container {
		min-height: 100svh !important;
		min-height: 100dvh;
		/* 动态视口高度作为备用 */
		min-height: 100vh;
		/* 传统视口高度作为最后备用 */
		/* 虚拟键盘弹出时的高度自适应 */
		height: auto !important;
	}

	#chat-messages {
		flex: 1 1 0 !important;
		min-height: 0 !important;
		/* 虚拟键盘弹出时进一步限制消息区域高度 */
		max-height: calc(100svh - 280px) !important;
		max-height: calc(100dvh - 280px);
		max-height: calc(100vh - 280px);
		overflow-y: auto !important;
	}

	/* 确保输入区域始终可见 */
	footer {
		flex-shrink: 0 !important;
		position: sticky !important;
		bottom: 0 !important;
		z-index: 10 !important;
	}
}

/* 更小屏幕或横屏时的额外优化 */
@media (max-height: 500px) {
	#chat-messages {
		max-height: calc(100svh - 240px) !important;
		max-height: calc(100dvh - 240px);
		max-height: calc(100vh - 240px);
	}

	header {
		padding: 0.75rem 1rem !important;
	}

	footer {
		padding: 0.75rem 1rem !important;
	}
}

/* 超小屏幕优化 */
@media (max-height: 400px) {
	#chat-messages {
		max-height: calc(100svh - 200px) !important;
		max-height: calc(100dvh - 200px);
		max-height: calc(100vh - 200px);
	}

	header {
		padding: 0.5rem 1rem !important;
	}

	footer {
		padding: 0.5rem 1rem !important;
	}
}

/* 🖼️ 移动端图片预览全面优化 */
@media (max-width: 640px) {
	#image-modal {
		padding: 0 !important;
		background: rgba(0, 0, 0, 0.95) !important;
	}

	#image-modal .relative {
		padding: 1rem !important;
		max-width: 100vw !important;
		/* 使用新的CSS视口单位，优先使用svh确保不被浏览器工具栏遮挡 */
		max-height: calc(100svh - 10rem) !important;
		max-height: calc(100dvh - 10rem);
		/* 动态视口高度作为备用 */
		max-height: calc(100vh - 10rem);
		/* 传统视口高度作为最后备用 */
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}

	#image-modal img {
		border-radius: 0.5rem !important;
		max-width: calc(100vw - 2rem) !important;
		/* 使用新的CSS视口单位，优先使用svh确保不被浏览器工具栏遮挡 */
		max-height: calc(100svh - 12rem) !important;
		max-height: calc(100dvh - 12rem);
		/* 动态视口高度作为备用 */
		max-height: calc(100svh - 2rem) !important;
		max-height: calc(100dvh - 2rem);
		max-height: calc(100vh - 2rem);
		/* 传统视口高度作为最后备用 */
		object-fit: contain !important;
		width: auto !important;
		height: auto !important;
	}

	/* 移动端关闭按钮特大化 */
	#close-modal-btn {
		width: 3.5rem !important;
		/* 从2.5rem增大到3.5rem */
		height: 3.5rem !important;
		background: rgba(255, 255, 255, 0.95) !important;
		backdrop-filter: blur(10px) !important;
		border: 2px solid rgba(255, 255, 255, 0.8) !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
		top: 1rem !important;
		right: 1rem !important;
		z-index: 1000 !important;
		position: fixed !important;
		/* 确保始终可见 */
	}

	#close-modal-btn img {
		width: 1.5rem !important;
		/* 从1rem增大到1.5rem */
		height: 1.5rem !important;
		filter: none !important;
		color: #374151 !important;
	}

	/* 移动端图片消息优化 */
	.chat-message img {
		max-width: 70vw !important;
		border-radius: 1rem !important;
	}
}

/* 小屏设备进一步优化 - 使用新CSS视口单位 */
@media (max-width: 500px) {
	#image-modal .relative {
		/* 使用新的CSS视口单位，优先使用svh确保不被浏览器工具栏遮挡 */
		max-height: calc(100svh - 14rem) !important;
		max-height: calc(100dvh - 14rem);
		/* 动态视口高度作为备用 */
		max-height: calc(100vh - 14rem);
		/* 传统视口高度作为最后备用 */
	}

	#image-modal img {
		/* 使用新的CSS视口单位，优先使用svh确保不被浏览器工具栏遮挡 */
		max-height: calc(100svh - 16rem) !important;
		max-height: calc(100dvh - 16rem);
		/* 动态视口高度作为备用 */
		max-height: calc(100vh - 16rem);
		/* 传统视口高度作为最后备用 */
	}

	#close-modal-btn {
		width: 4rem !important;
		height: 4rem !important;
		top: 0.5rem !important;
		right: 0.5rem !important;
	}

	#close-modal-btn img {
		width: 1.75rem !important;
		height: 1.75rem !important;
	}
}

/* iOS安全区域兼容 - 使用新CSS视口单位 */
@supports (padding: env(safe-area-inset-bottom)) {
	@media (max-width: 640px) {
		#image-modal .relative {
			/* 使用新的CSS视口单位，优先使用svh确保不被浏览器工具栏遮挡 */
			max-height: calc(100svh - 10rem - env(safe-area-inset-bottom)) !important;
			max-height: calc(100dvh - 10rem - env(safe-area-inset-bottom));
			/* 动态视口高度作为备用 */
			max-height: calc(100vh - 10rem - env(safe-area-inset-bottom));
			/* 传统视口高度作为最后备用 */
		}

		#image-modal img {
			/* 使用新的CSS视口单位，优先使用svh确保不被浏览器工具栏遮挡 */
			max-height: calc(100svh - 12rem - env(safe-area-inset-bottom)) !important;
			max-height: calc(100dvh - 12rem - env(safe-area-inset-bottom));
			/* 动态视口高度作为备用 */
			max-height: calc(100vh - 12rem - env(safe-area-inset-bottom));
			/* 传统视口高度作为最后备用 */
		}
	}
}

/* 移动端和嵌入模式公告模态框优化 */
@media (max-width: 640px) {
	.announcement-container {
		margin: 1rem !important;
		max-height: calc(100svh - 2rem) !important;
		max-height: calc(100dvh - 2rem);
		max-height: calc(100vh - 2rem);
		max-width: calc(100vw - 2rem) !important;
		animation: announcementSlideInMobile 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
	}

	.announcement-card {
		border-radius: 1rem !important;
		max-height: calc(100svh - 2rem) !important;
		max-height: calc(100dvh - 2rem);
		max-height: calc(100vh - 2rem);
		display: flex !important;
		flex-direction: column !important;
	}

	.announcement-header {
		padding: 1rem !important;
		border-radius: 1rem 1rem 0 0 !important;
		flex-shrink: 0 !important;
	}

	.announcement-content {
		padding: 1rem !important;
		flex: 1 !important;
		min-height: 0 !important;
		overflow-y: auto !important;
		max-height: none !important;
	}

	.announcement-footer {
		padding: 1rem !important;
		border-radius: 0 0 1rem 1rem !important;
		flex-shrink: 0 !important;
	}

	.announcement-title {
		font-size: 1.125rem !important;
		font-weight: 600 !important;
		color: white !important;
	}

	.confirm-btn {
		padding: 0.75rem 1.5rem !important;
		font-size: 0.875rem !important;
		font-weight: 600 !important;
		border-radius: 0.75rem !important;
	}

	/* 移动端内容区域滚动优化 */
	#announcement-content {
		font-size: 0.875rem !important;
		line-height: 1.6 !important;
	}

	/* 移动端关闭按钮优化 */
	.close-btn {
		width: 2.25rem !important;
		height: 2.25rem !important;
	}

	.close-btn img {
		width: 1rem !important;
		height: 1rem !important;
	}

	.announcement-icon {
		padding: 0.5rem !important;
	}

	.announcement-icon img {
		width: 1.25rem !important;
		height: 1.25rem !important;
	}

	/* 移动端粒子效果减少 */
	.announcement-particles .particle {
		width: 2px !important;
		height: 2px !important;
	}

	.particle-4,
	.particle-5,
	.particle-6 {
		display: none;
		/* 在移动端隐藏更多粒子以提升性能 */
	}

	/* 移动端加载器优化 */
	.loading-container {
		width: 32px !important;
		height: 32px !important;
	}

	/* 移动端状态指示器 */
	.status-indicator {
		width: 0.5rem !important;
		height: 0.5rem !important;
	}

	/* 移动端装饰球简化 */
	.floating-orb,
	.floating-orb-2 {
		display: none;
		/* 移动端隐藏装饰球以简化界面 */
	}

	/* 移动端动画优化 */
	.tech-grid {
		animation: none;
		/* 移动端关闭网格动画以节省性能 */
	}

	.twinkling,
	.twinkling-delayed {
		display: none;
		/* 移动端隐藏闪烁星星 */
	}

	/* 移动端简化渐变 */
	.text-gradient {
		background: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
		animation: none !important;
	}
}

/* 嵌入模式特殊优化 */
.embedded-mode .announcement-container {
	margin: 0.75rem !important;
	max-height: calc(100% - 1.5rem) !important;
	max-width: calc(100% - 1.5rem) !important;
}

.embedded-mode .announcement-card {
	max-height: calc(100% - 1.5rem) !important;
	border-radius: 0.75rem !important;
}

.embedded-mode .announcement-content {
	max-height: calc(100% - 200px) !important;
}

/* 嵌入模式下简化特效 */
.embedded-mode .announcement-particles {
	display: none !important;
}

.embedded-mode .tech-grid {
	animation: none !important;
	opacity: 0.05 !important;
}

.embedded-mode .floating-orb,
.embedded-mode .floating-orb-2 {
	display: none !important;
}

/* 移动端专用弹窗动画 */
@keyframes announcementSlideInMobile {
	0% {
		opacity: 0;
		transform: translateY(100px) scale(0.95);
		filter: blur(5px);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
	#announcement-modal .relative {
		margin: 0.5rem !important;
		max-height: calc(100svh - 1rem) !important;
		max-height: calc(100dvh - 1rem);
		max-height: calc(100vh - 1rem);
	}

	#announcement-modal .bg-gradient-to-r {
		padding: 1rem 0.75rem !important;
	}

	#announcement-modal .p-6 {
		padding: 0.75rem !important;
		max-height: calc(100vh - 180px) !important;
	}

	#announcement-modal h2 {
		font-size: 1rem !important;
	}

	#announcement-content {
		font-size: 0.8125rem !important;
	}
}

/* 弹窗容器动画 */
@keyframes announcementSlideIn {
	0% {
		opacity: 0;
		transform: translateY(-30px) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.announcement-container {
	animation: announcementSlideIn 0.3s ease-out both;
}

/* 背景遮罩动画 */
@keyframes backdropFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.announcement-modal-backdrop {
	animation: backdropFadeIn 0.3s ease-out both;
}

/* 引导提示气泡样式已移除 */

/* 超小屏幕图片适配 */
@media (max-width: 375px) {
	.chat-message img {
		max-width: 75vw !important;
	}
}

/* 防止iOS Safari底部栏遮挡 */
@supports (padding: env(safe-area-inset-bottom)) {
	@media (max-width: 640px) {
		footer {
			padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
		}
	}
}

/* PC端专用样式优化 */
@media (min-width: 1024px) {

	#chat-widget-container {
		max-width: 48rem;
		/* 更大的聊天窗口 */
		height: 800px;
		/* 更高的聊天窗口 */
	}

	/* PC端头部padding优化 */
	.modern-header {
		padding: 1.25rem 1.5rem;
	}

	/* PC端聊天容器阴影增强 */
	#chat-widget-container {
		box-shadow:
			0 25px 50px -12px rgba(0, 0, 0, 0.25),
			0 0 0 1px rgba(255, 255, 255, 0.05),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}

	/* PC端消息气泡优化 */
	.chat-message {
		transition: all 0.3s ease;
	}

	.chat-message:hover {
		transform: translateY(-1px);
	}

	/* PC端消息最大宽度优化 */
	.chat-message .max-w-xs {
		max-width: 80% !important;
	}

	/* PC端头像优化 */
	.chat-message .w-8.h-8 {
		width: 2rem !important;
		height: 2rem !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* PC端输入框自动调整高度 */
	#message-text {
		transition: all 0.3s ease;
		line-height: 1.5;
		color: #374151;
	}

	#message-text::placeholder {
		color: #9ca3af;
	}

	#message-text:focus {
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
		transform: translateY(-1px);
	}

	/* PC端按钮悬停效果增强 */
	#send-btn:hover {
		transform: translateY(-2px) scale(1.05);
		box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
	}

	#file-btn:hover,
	#emoji-btn:hover {
		transform: translateY(-1px);
		background: rgba(59, 130, 246, 0.1) !important;
		color: #3b82f6 !important;
	}

	/* PC端滚动条美化 */
	#chat-messages {
		scrollbar-width: thin;
		scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
	}

	#chat-messages::-webkit-scrollbar {
		width: 8px;
	}

	#chat-messages::-webkit-scrollbar-track {
		background: rgba(148, 163, 184, 0.1);
		border-radius: 4px;
		margin: 8px 0;
	}

	#chat-messages::-webkit-scrollbar-thumb {
		background: linear-gradient(to bottom, rgba(148, 163, 184, 0.3), rgba(148, 163, 184, 0.2));
		border-radius: 4px;
		border: 1px solid rgba(148, 163, 184, 0.1);
	}

	#chat-messages::-webkit-scrollbar-thumb:hover {
		background: linear-gradient(to bottom, rgba(148, 163, 184, 0.4), rgba(148, 163, 184, 0.3));
	}

	/* PC端键盘快捷键提示 */
	kbd {
		font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
		font-size: 0.75rem;
		font-weight: 600;
		border: 1px solid rgba(148, 163, 184, 0.3);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
		background: rgba(248, 250, 252, 0.8);
		color: #475569;
	}

	/* PC端状态指示器增强 */
	#status-indicator {
		box-shadow: 0 0 12px currentColor;
	}

	/* PC端玻璃拟态效果增强 */
	.glass-morphism {
		backdrop-filter: blur(25px);
		-webkit-backdrop-filter: blur(25px);
		background: rgba(255, 255, 255, 0.3);
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	/* PC端头部背景增强 */
	header {
		background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(248, 250, 252, 0.3));
		backdrop-filter: blur(20px);
		border-bottom: 1px solid rgba(148, 163, 184, 0.2);
	}

	/* PC端底部背景增强 */
	footer {
		background: linear-gradient(to right, rgba(248, 250, 252, 0.3), rgba(255, 255, 255, 0.4));
		backdrop-filter: blur(20px);
		border-top: 1px solid rgba(148, 163, 184, 0.2);
	}
}

/* 超大屏幕优化 */
@media (min-width: 1536px) {
	#chat-widget-container {
		max-width: 48rem;
		/* 更大的聊天窗口 */
		height: 800px;
		/* 更高的聊天窗口 */
	}

	.chat-message .max-w-xs {
		max-width: 75% !important;
	}

	/* 更大的字体 */
	#message-text {
		font-size: 1.125rem;
		line-height: 1.6;
	}

	.chat-message {
		font-size: 1rem;
	}
}

/* 字符计数器动画 */
#char-count {
	transition: color 0.3s ease;
	color: #64748b;
}

#char-count.warning {
	color: #f59e0b !important;
}

#char-count.danger {
	color: #ef4444 !important;
	animation: pulse 1s infinite;
}

/* 打字状态指示器 */
#typing-status {
	animation: fadeInOut 2s infinite;
	color: #64748b;
}

@keyframes fadeInOut {

	0%,
	100% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}
}

/* 功能面板样式 */
.function-panel-item {
	width: 100%;
	text-align: left;
	padding: 0.75rem;
	border-radius: 0.5rem;
	transition: all 0.2s ease;
	border: none;
	background: transparent;
}

.function-panel-item:hover {
	background-color: #f3f4f6;
	transform: translateY(-1px);
}

/* 动画效果 */
.animate-slide-up {
	animation: slideUp 0.3s ease-out;
}

.animate-scale-in {
	animation: scaleIn 0.3s ease-out;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* 聊天消息中的链接样式 */
.chat-message a:not(.url-link),
.chat-message .url-link {
	color: #3b82f6 !important;
	/* 蓝色链接 */
	text-decoration: none !important;
	font-weight: 600 !important;
	display: inline-block !important;
	background: #3b82f6 !important;
	color: white !important;
	padding: 2px 8px !important;
	border-radius: 6px !important;
	margin: 0 2px !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
	word-break: break-all;
}

.chat-message a:not(.url-link):hover,
.chat-message .url-link:hover {
	background: #1d4ed8 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4) !important;
}

/* 在白色背景的客服消息中，链接保持蓝色背景以确保可见性 */
.chat-message .from-white a:not(.url-link),
.chat-message .from-white .url-link,
.chat-message .from-gray-50 a:not(.url-link),
.chat-message .from-gray-50 .url-link {
	background: #3b82f6 !important;
	color: white !important;
}

/* 在橙色系统消息中的链接样式 */
.chat-message .from-orange-100 a:not(.url-link),
.chat-message .from-orange-100 .url-link,
.chat-message .from-amber-100 a:not(.url-link),
.chat-message .from-amber-100 .url-link {
	background: #dc2626 !important;
	color: white !important;
}

.chat-message .from-orange-100 a:not(.url-link):hover,
.chat-message .from-orange-100 .url-link:hover,
.chat-message .from-amber-100 a:not(.url-link):hover,
.chat-message .from-amber-100 .url-link:hover {
	background: #b91c1c !important;
}

/* 移动端链接样式优化 */
@media (max-width: 640px) {

	.chat-message a:not(.url-link),
	.chat-message .url-link {
		font-size: 0.875rem !important;
		padding: 4px 8px !important;
		margin: 2px 1px !important;
	}
}

/* 高端装饰元素 */
.decoration-shape {
	position: absolute;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.05);
	filter: blur(2px);
	animation: float 6s ease-in-out infinite;
	box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}

.decoration-shape:nth-child(2) {
	animation-delay: -2s;
	background: rgba(168, 85, 247, 0.05);
}

.decoration-shape:nth-child(3) {
	animation-delay: -4s;
	background: rgba(16, 185, 129, 0.05);
}

/* 现代头部设计 - 简约专业 */
.modern-header {
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: none;
	border-bottom: 1px solid #e5e7eb;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	position: relative;
}

.modern-header .avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.modern-header .avatar:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modern-header .site-name {
	font-weight: 600;
	color: #1f2937;
	font-size: 16px;
}

.modern-header .connection-status {
	font-size: 13px;
	color: #6b7280;
	font-weight: 500;
}

/* 移除过度装饰性动画 */

/* 头像简约样式 */
.avatar-enhanced {
	position: relative;
	background: #2563eb;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
	overflow: hidden;
	transition: all 0.25s ease;
}

.avatar-enhanced:hover {
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* 状态点动画 - 现代简约效果 */
.status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	margin-right: 8px;
}

.status-dot.online {
	background: #059669;
	box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
	animation: pulse-online 2s infinite;
}

.status-dot.offline {
	background: #dc2626;
	box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
	animation: pulse-offline 2s infinite;
}

.status-dot.connecting {
	background: #d97706;
	box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
	animation: pulse-connecting 1.5s infinite;
}

@keyframes pulse-online {
	0%, 100% {
		box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
	}
}

@keyframes pulse-offline {
	0%, 100% {
		box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
	}
}

@keyframes pulse-connecting {
	0%, 100% {
		box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.1);
	}
}

/* 🐛 调试面板专用样式 */
#debug-btn {
	z-index: 9999;
	animation: debugPulse 2s infinite;
}

@keyframes debugPulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
	}

	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
	}
}

#debug-panel {
	z-index: 9999 !important;
	backdrop-filter: blur(10px);
	/* 强制样式确保可见性 */
	position: fixed !important;
	background: white !important;
	border: 1px solid #ccc !important;
	border-radius: 8px !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

#debug-panel.flex {
	display: flex !important;
	flex-direction: column !important;
}

#debug-panel.hidden {
	display: none !important;
}

.debug-tab.active {
	border-bottom: 2px solid #3b82f6;
}

.debug-tab-content {
	animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 移动端调试面板优化 */
@media (max-width: 640px) {
	#debug-panel {
		inset: 0.5rem;
		max-height: calc(100vh - 1rem);
	}

	.debug-tab {
		padding: 0.5rem 0.75rem;
		font-size: 0.75rem;
	}

	#debug-logs {
		font-size: 0.625rem;
		line-height: 1.3;
	}

	.debug-tab-content .grid-cols-2 {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.debug-tab-content button {
		padding: 0.5rem;
		font-size: 0.75rem;
	}
}

/* 调试日志高亮 */
.debug-log-error {
	background: rgba(239, 68, 68, 0.1);
	border-left: 3px solid #ef4444;
	padding-left: 0.5rem;
}

.debug-log-warn {
	background: rgba(245, 158, 11, 0.1);
	border-left: 3px solid #f59e0b;
	padding-left: 0.5rem;
}

.debug-log-info {
	background: rgba(59, 130, 246, 0.1);
	border-left: 3px solid #3b82f6;
	padding-left: 0.5rem;
}

.debug-log-network {
	background: rgba(16, 185, 129, 0.1);
	border-left: 3px solid #10b981;
	padding-left: 0.5rem;
	margin: 0.25rem 0;
}

/* 复制成功提示动画 */
.copy-success-animation {
	animation: copySuccess 0.6s ease-out;
}

@keyframes copySuccess {
	0% {
		background-color: rgba(5, 150, 105, 0.1);
	}
	50% {
		background-color: rgba(5, 150, 105, 0.2);
	}
	100% {
		background-color: transparent;
	}
}

/* 超宽屏幕优化 - 更好地利用空间 */
@media (min-width: 1536px) {
	/* 2xl屏幕及以上 */
	#chat-widget-container {
		max-width: 1280px !important;
	}
	
	.chat-messages {
		padding: 2rem 3rem !important;
		gap: 1.5rem !important;
	}
	
	.message-bubble {
		max-width: 45rem !important;
		font-size: 1rem !important;
		line-height: 1.6 !important;
	}
	
	.chat-input-area {
		padding: 1.5rem 3rem !important;
	}
	
	.modern-input textarea {
		font-size: 1rem !important;
		padding: 1rem 1.5rem !important;
		min-height: 3.5rem !important;
	}
	
	.chat-header {
		padding: 1.5rem 3rem !important;
	}
}

@media (min-width: 1920px) {
	/* 超大屏幕 1920px+ */
	#chat-widget-container {
		max-width: 1400px !important;
	}
	
	.chat-messages {
		padding: 2.5rem 4rem !important;
		gap: 2rem !important;
	}
	
	.message-bubble {
		max-width: 50rem !important;
		font-size: 1.1rem !important;
		padding: 1rem 1.6rem !important;
	}
	
	.chat-input-area {
		padding: 2rem 4rem !important;
	}
	
	.modern-input textarea {
		font-size: 1.1rem !important;
		padding: 1.25rem 2rem !important;
		min-height: 4rem !important;
	}
	
	.chat-header {
		padding: 2rem 4rem !important;
	}
}

@media (min-width: 2560px) {
	/* 4K及超高分辨率屏幕 */
	#chat-widget-container {
		max-width: 1600px !important;
	}
	
	.chat-messages {
		padding: 3rem 5rem !important;
		gap: 2.5rem !important;
	}
	
	.message-bubble {
		max-width: 55rem !important;
		font-size: 1.2rem !important;
		padding: 1rem 2rem !important;
		line-height: 1.7 !important;
	}
	
	.chat-input-area {
		padding: 2.5rem 5rem !important;
	}
	
	.modern-input textarea {
		font-size: 1.2rem !important;
		padding: 1.5rem 2.5rem !important;
		min-height: 4.5rem !important;
	}
	
	.chat-header {
		padding: 2.5rem 5rem !important;
	}
	
	.btn-primary,
	.btn-secondary {
		padding: 1rem 2rem !important;
		font-size: 1.1rem !important;
	}
	
	.icon-btn,
	.modern-icon-btn {
		width: 3rem !important;
		height: 3rem !important;
	}
}