/**
 * AI 聊聊助手 - 前台样式
 * 右下角悬浮头像 + 聊天面板，浅色界面，适配移动端，兼容子比主题。
 */

#acb-chat-root {
	all: initial;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.acb-wrap {
	position: fixed;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

/* ---------- 悬浮头像 ---------- */

.acb-bubble {
	position: relative;
	width: 58px;
	height: 58px;
	border: none;
	padding: 0;
	cursor: pointer;
	background: transparent;
	transition: transform .25s ease;
}

.acb-bubble:hover {
	transform: scale(1.08);
}

.acb-bubble-ring {
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid rgba(99, 102, 241, .45);
	animation: acb-pulse 2.2s ease-out infinite;
	pointer-events: none;
}

@keyframes acb-pulse {
	0%   { transform: scale(.85); opacity: 1; }
	70%  { transform: scale(1.25); opacity: 0; }
	100% { transform: scale(1.25); opacity: 0; }
}

.acb-bubble-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
	box-shadow: 0 6px 20px rgba(99, 102, 241, .45);
}

.acb-bubble-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* ---------- 聊天面板 ---------- */

.acb-panel {
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: min(72vh, 560px);
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 16px 48px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	animation: acb-pop .22s ease;
}

.acb-hidden {
	display: none !important;
}

@keyframes acb-pop {
	from { opacity: 0; transform: scale(.92) translateY(8px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 头部 */
.acb-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
	color: #ffffff;
	flex-shrink: 0;
}

.acb-header-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, .6);
	flex-shrink: 0;
}

.acb-header-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.acb-header-meta {
	flex: 1;
	min-width: 0;
}

.acb-header-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.acb-header-status {
	font-size: 12px;
	opacity: .85;
	display: flex;
	align-items: center;
	gap: 5px;
}

.acb-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	display: inline-block;
}

.acb-header-close {
	width: 30px;
	height: 30px;
	border: none;
	background: rgba(255, 255, 255, .18);
	color: #ffffff;
	font-size: 18px;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .2s;
}

.acb-header-close:hover {
	background: rgba(255, 255, 255, .32);
}

/* 消息区 */
.acb-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px;
	background: #f6f7fb;
	display: flex;
	flex-direction: column;
	gap: 14px;
	scrollbar-width: thin;
}

.acb-msg {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.acb-msg-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
	flex-shrink: 0;
}

.acb-msg-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.acb-msg-bubble {
	max-width: 78%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.65;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.acb-msg-assistant .acb-msg-bubble {
	background: #ffffff;
	color: #1f2937;
	border: 1px solid #eceef3;
	border-top-left-radius: 4px;
}

.acb-msg-user {
	flex-direction: row-reverse;
}

.acb-msg-user .acb-msg-avatar {
	display: none;
}

.acb-msg-user .acb-msg-bubble {
	background: linear-gradient(135deg, #6366f1 0%, #7c5cf5 100%);
	color: #ffffff;
	border-top-right-radius: 4px;
}

.acb-msg-bubble a {
	color: #6366f1;
	text-decoration: underline;
}

.acb-msg-user .acb-msg-bubble a {
	color: #ffe9a8;
}

.acb-msg-bubble code {
	background: rgba(99, 102, 241, .1);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 13px;
}

.acb-msg-in {
	animation: acb-slide .25s ease;
}

@keyframes acb-slide {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* 正在输入动画 */
.acb-typing {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 18px;
}

.acb-typing i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #9ca3af;
	display: inline-block;
	animation: acb-blink 1.2s infinite;
}

.acb-typing i:nth-child(2) { animation-delay: .2s; }
.acb-typing i:nth-child(3) { animation-delay: .4s; }

@keyframes acb-blink {
	0%, 60%, 100% { opacity: .3; transform: translateY(0); }
	30%           { opacity: 1; transform: translateY(-3px); }
}

/* 输入区 */
.acb-input-bar {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	background: #ffffff;
	border-top: 1px solid #eceef3;
	flex-shrink: 0;
}

.acb-input {
	flex: 1;
	resize: none;
	border: 1px solid #e2e5ec;
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 14px;
	line-height: 1.5;
	font-family: inherit;
	max-height: 110px;
	background: #f9fafc;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}

.acb-input:focus {
	border-color: #8b8ff8;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
	background: #ffffff;
}

.acb-send {
	border: none;
	background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	padding: 9px 16px;
	border-radius: 12px;
	cursor: pointer;
	flex-shrink: 0;
	transition: opacity .2s, transform .2s;
}

.acb-send:hover { opacity: .9; }
.acb-send:active { transform: scale(.96); }
.acb-send:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- 移动端 ---------- */

@media (max-width: 480px) {
	.acb-panel {
		width: calc(100vw - 24px);
		height: 66vh;
	}

	.acb-bubble {
		width: 52px;
		height: 52px;
	}

	.acb-bubble-avatar {
		width: 52px;
		height: 52px;
	}
}