/* ========== 图片预览 ========== */
.image-preview-area {
	display: none;
	/* 可收缩（flex:0 1 auto + min-height:0）：极矮视口下优先压缩图片条并内部滚动，
	   把完整高度留给输入栏，避免输入栏被顶出可视区 */
	flex: 0 1 auto;
	min-height: 0;
	/* 横屏平板这类矮视口下，图片条最多占 45%，其余留给输入栏与消息区 */
	max-height: 45%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-xl) var(--space-md);
}

.image-preview-area.visible {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-primary);
	border-top: 1px solid var(--color-border);
}

.preview-container {
	position: relative;
	display: inline-block;
	align-self: flex-start;
	/* 图片条内部可滚动时，缩略图与提示文字都不许被 flex 压缩 */
	flex: none;
	/* 解码完成前先把行高占住，避免图片一加载就撑高页面、引起一次输入栏跳动 */
	height: var(--qa-thumb-size);
}

.preview-container img {
	/* 固定 height 而非 max-height：解码前后高度恒定，不再产生 reflow。
	   宽图被 max-width 收成方形，竖图按比例缩窄，行高始终等于 --qa-thumb-size */
	width: auto;
	height: var(--qa-thumb-size);
	max-width: var(--qa-thumb-size);
	border-radius: var(--radius-md);
	border: 2px solid var(--color-border);
	object-fit: cover;
	cursor: pointer;
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.preview-container img:hover {
	transform: scale(1.03);
	box-shadow: 0 8px 20px var(--color-black-shadow);
}

.remove-image-btn {
	/* 关闭按钮尺寸唯一取值处：图标按比例跟随，避免 base.css 里 20px 的图标撑破按钮 */
	--qa-close-size: 10px;
	position: absolute;
	top: calc(var(--qa-close-size) / -2);
	right: calc(var(--qa-close-size) / -2);
	width: var(--qa-close-size);
	height: var(--qa-close-size);
	border-radius: 50%;
	background: var(--color-danger);
	color: var(--color-text-inverse);
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px var(--color-black-shadow-strong);
	z-index: 2;
}

/* base.css 给的是 20px 固定图标，这里按按钮实际尺寸等比缩放 */
.remove-image-btn svg {
	width: calc(var(--qa-close-size) * 0.72);
	height: calc(var(--qa-close-size) * 0.72);
}

.remove-image-btn:hover {
	background: #CC0000;
	transform: scale(1.1);
}

.image-preview-hint {
	flex: none;
	font-size: var(--font-size-md);
	color: var(--color-primary-light);
	margin-top: var(--space-sm);
	font-weight: 500;
}

/* ========== 输入区域 ========== */
.input-area {
	/* flex:none —— 输入栏高度由内容决定，绝不被压缩或裁切 */
	flex: none;
	padding: var(--space-xl);
	background: var(--color-bg-primary);
	border-top: 1px solid var(--color-border);
}

.input-container {
	display: flex;
	align-items: flex-start; /* 【优化】改为 flex-start，适配多行 textarea 自动增长 */
	gap: var(--space-sm);
	background: var(--color-bg-primary);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 10px var(--space-md);
	transition: border-color var(--transition-normal);
}

.input-container:focus-within {
	border-color: var(--color-primary);
}

.input-actions-left {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	padding-top: 4px; /* 【优化】与多行 textarea 对齐 */
}

.action-btn {
	background: none;
	border: none;
	cursor: pointer;
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	z-index: 1;
}

.action-btn:hover {
	color: var(--color-primary);
}

/* 图片按钮 + 弹出菜单 */
.image-btn-wrapper {
	position: relative;
	z-index: 200;
}

/* 图片菜单全屏遮罩 — 确保移动端点击可捕获 */
.image-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 199;
	background: rgba(0, 0, 0, 0.01);
	display: none;
}

.image-menu-overlay.show {
	display: block;
}

.image-menu {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
	padding: var(--space-sm);
	min-width: 140px;
	z-index: 200;
	animation: menuFadeIn var(--transition-fast) ease;
}

.image-menu.visible {
	display: block;
}

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

.image-menu-item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	width: 100%;
	padding: 10px 14px;
	border: none;
	background: none;
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	font-size: var(--font-size-md);
	cursor: pointer;
	transition: background var(--transition-fast);
	white-space: nowrap;
	text-align: left;
}

.image-menu-item:hover {
	background: rgba(51, 153, 255, 0.12);
	color: var(--color-primary-dark);
}

.image-menu-item svg {
	flex-shrink: 0;
	color: var(--color-text-secondary);
}

.image-menu-item:hover svg {
	color: var(--color-primary-dark);
}

#messageInput {
	flex: 1;
	border: none;
	background: none;
	resize: none;
	font-size: var(--font-size-md);
	font-family: inherit;
	color: var(--color-text-primary);
	outline: none;
	padding: var(--space-sm) 0;
	/* 行数增长上限同时受可用高度约束：矮屏 + 键盘时最多占 22%，
	   保证输入栏自身不会把消息区挤没（vh/dvh 在 iOS 键盘弹起时不变，故用 --app-height） */
	max-height: 120px;
	max-height: min(120px, calc(var(--app-height, 100vh) * 0.22));
	line-height: 1.5;
}

#messageInput::placeholder {
	color: var(--color-text-muted);
}

/* 【优化】发送/停止按钮共享基础样式，减少重复 */
.send-btn,
.stop-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	color: var(--color-text-inverse);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.send-btn {
	background: var(--color-primary);
}

.send-btn:hover:not(.disabled) {
	background: var(--color-primary-dark);
	transform: scale(1.05);
}

.send-btn.disabled {
	background: var(--color-border);
	cursor: not-allowed;
}

/* 停止按钮 */
.stop-btn {
	background: var(--color-danger);
	animation: pulse-stop 1.5s ease-in-out infinite;
}

.stop-btn:hover {
	background: #CC0000;
	transform: scale(1.05);
}

@keyframes pulse-stop {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,51,51,0.4); }
	50% { box-shadow: 0 0 0 8px rgba(255,51,51,0); }
}


/* ========== KaTeX 公式左对齐 ========== */
/* 提高优先级覆盖KaTeX自带的text-align:center */
.message-content .katex-display,
.message-content .katex-display > .katex {
	text-align: left;
}

.katex-display > .katex {
	display: block;
}

/* 长公式/长内容换行：不允许超出气泡 */
.message-content img,
.message-content .katex-display,
.message-content .katex {
	max-width: 100%;
}

.message-content .katex-display > .katex {
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* 公式整体字号略缩小，减少超长公式的溢出概率 */
.message-content .katex {
	font-size: 0.92em;
}

/* ========== 化学结构式（SmilesDrawer） ========== */
.smiles-container {
	display: inline-block;
	margin: var(--space-md) 0;
	padding: var(--space-md);
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-align: center;
}

.smiles-container canvas {
	max-width: 100%;
	height: auto;
}

/* ========== Toast ========== */
.toast {
	position: fixed;
	top: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	padding: 12px 24px;
	background: var(--color-primary-deeper);
	color: var(--color-text-inverse);
	border-radius: var(--radius-md);
	font-size: var(--font-size-md);
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-normal);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

.toast.show {
	opacity: 1;
}

.toast.warning {
	background: var(--color-warning);
	color: var(--color-text-primary);
}

.toast.error {
	background: var(--color-danger);
}


/* ========== 题库视频播放器 ========== */
.db-video-card {
	background: var(--color-bg-primary);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: var(--space-md) 0;
}

/* 题库搜索提示 */
.db-search-hint {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--font-size-md);
	animation: fadeInUp var(--transition-normal) ease;
}

.db-search-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--color-primary);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* ===== OCR 流式识别卡片 ===== */
.ocr-stream-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 6px 0;
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-lg);
	background: var(--msg-bg, #f4f6fa);
	border: 1px solid rgba(51, 102, 204, 0.18);
	animation: fadeInUp var(--transition-normal) ease;
	/* 旧内核（Chromium < 84）不认识 min()，整条会失效退化成 max-width:none，故先给兜底值 */
	max-width: 92%;
	max-width: min(520px, 92%);
}

.ocr-stream-head {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.ocr-stream-img {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	object-fit: cover;
	flex-shrink: 0;
	background: #e6e9f0;
}

.ocr-stream-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.ocr-stream-title {
	font-size: var(--font-size-sm);
	color: var(--color-primary);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 【优化】光标闪烁用伪元素替代额外 DOM，animation 适配 reduced-motion */
.ocr-stream-title::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 14px;
	background: var(--color-primary);
	margin-left: 4px;
	vertical-align: -2px;
	animation: blink 0.9s steps(2) infinite;
}

@keyframes blink {
	50% { opacity: 0; }
}

.ocr-stream-engines {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.ocr-engine-badge {
	font-size: 11px;
	padding: 1px 6px;
	border-radius: var(--radius-full);
	background: #e8edf7;
	color: #5a6b8c;
	transition: background var(--transition-normal), color var(--transition-normal);
}

.ocr-engine-badge.active {
	background: var(--color-primary);
	color: #fff;
}

.ocr-engine-badge.done {
	background: #e1f3e4;
	color: #1a7f37;
}

.ocr-engine-badge.done::after {
	content: ' ✓';
}

.ocr-engine-badge.fail {
	background: #fde8e8;
	color: #c0392b;
}

.ocr-engine-badge.fail::after {
	content: ' ✕';
}

.ocr-stream-text {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-primary);
	white-space: pre-wrap;
	word-break: break-all;
	max-height: 200px;
	overflow-y: auto;
	-webkit-user-select: text;
	user-select: text;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

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

.db-video-header {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: 12px var(--space-lg);
	background: #000;
	color: #fff;
	font-size: var(--font-size-sm);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.db-video-title {
	font-weight: 600;
	flex: 1;
}

.db-video-meta {
	font-size: 11px;
	opacity: 0.7;
	background: rgba(255,255,255,0.1);
	padding: 2px 8px;
	border-radius: var(--radius-full);
}

/* ===== 视频大小：PC原生尺寸 + 移动端全宽等比 ===== */
.db-video-player {
	display: block;
	background: #000;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	outline: none;
	width: auto;
	max-width: 100%;
}

/* 【优化】减少 !important 使用，只在必要时覆盖 */
.message.message-video.message-video-active {
	max-width: fit-content;
}

.message.message-video.message-video-active .message-bubble-wrapper {
	flex: 0 1 auto;
}

.message.message-video.message-video-active .provider-panel-video .message-content {
	width: fit-content;
	min-width: 0;
	max-width: calc(var(--video-width, 680px) + 30px);
}

/* 移动端：视频全宽，高度等比缩放 */
@media (max-width: 768px) {
	.db-video-player {
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: none;
	}

	.message.message-video {
		max-width: 100%;
	}

	.message.message-video.message-video-active {
		max-width: 100%;
	}

	.message.message-video.message-video-active .message-bubble-wrapper {
		flex: 1;
	}

	.message.message-video.message-video-active .provider-panel-video .message-content {
		width: auto;
		max-width: 100%;
	}
}


/* ========== 图片查看器（全屏弹窗） ========== */
.image-viewer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.image-viewer-img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
	border-radius: var(--radius-md);
}


/* ========================================================================
   移动端总覆盖层（必须放在所有样式表最后：媒体查询不提升选择器优先级，
   同名单类选择器由「后加载者」胜出，故统一收拢到此处，避免被
   chat.css / tabs.css / media.css 前面的规则反向覆盖）
   ======================================================================== */
@media (max-width: 768px) {

	/* ---------- 顶部栏 ---------- */
	.chat-header {
		padding: 10px var(--space-md);
	}

	.header-title h1 {
		font-size: 16px;
	}

	.header-subtitle {
		font-size: 11px;
	}

	.teacher-entry-btn {
		padding: 6px 12px;
		font-size: 13px;
	}

	/* ---------- 消息区：去掉横向留白，让气泡真正 100% 占满 ---------- */
	.chat-messages {
		padding: var(--space-sm) 0;
		gap: var(--space-sm);
	}

	.message {
		max-width: 100%;
	}

	/* AI 气泡整行铺满视口。.chat-messages 为纵向 flex，横向由 width/align-self 控制 */
	.message.assistant {
		width: 100%;
		align-self: stretch;
	}

	/* .message 自身是横向 flex：内层容器（单气泡 div / 多AI外壳）需 flex:1 才会撑满 */
	.message.assistant > div,
	.message.assistant .message-bubble-wrapper,
	.message.assistant .provider-tab-content,
	.message.assistant .provider-panel {
		flex: 1;
		width: 100%;
		min-width: 0;
	}

	/* 用户气泡靠右、贴合内容，与屏幕右边留一点间距 */
	.message.user {
		max-width: 94%;
		margin-right: var(--space-sm);
	}

	.message.user .message-content {
		width: fit-content;
		max-width: 100%;
	}

	.message-content {
		font-size: var(--font-size-md);
		max-width: 100%;
		padding: var(--space-md);
		word-break: break-word;
		overflow-wrap: break-word;
	}

	/* ---------- 图片：任何比例都不超出宽度，且不裁切 ---------- */
	/* 只按视口高度收一次上限，具体数值仍取自 :root，
	   否则这里写死 max-height 会盖掉桌面端设过的尺寸（移动端同优先级、后加载者胜） */
	.message-content .message-image {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: var(--qa-message-image-max);
		max-height: min(var(--qa-message-image-max), 60vh);
		object-fit: contain;
	}

	.bubble-head-image {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: var(--qa-head-image-max);
		max-height: min(var(--qa-head-image-max), 60vh);
		object-fit: contain;
	}

	/* 题图卡片：桌面端 margin:0 auto 会让卡片收缩，移动端需去掉 auto 才能占满 */
	.bubble-head {
		width: 100%;
		margin: 0 0 var(--space-md);
		padding: var(--space-md);
	}

	.ocr-stream-card {
		max-width: 100%;
	}

	/* ---------- 欢迎页 ---------- */
	.welcome-screen {
		padding: var(--space-2xl) var(--space-md);
	}

	.welcome-icon {
		width: 120px;
		height: 120px;
		margin-bottom: var(--space-lg);
	}

	.welcome-screen h2 {
		font-size: 18px;
	}

	.welcome-screen p {
		font-size: var(--font-size-sm);
	}

	/* ---------- 输入区 ---------- */
	.input-area {
		padding: 10px var(--space-md);
		/* viewport-fit=cover 下避开 iOS 底部横条；键盘弹起时 JS 把 --safe-bottom 置 0 */
		padding-bottom: calc(10px + var(--safe-bottom, env(safe-area-inset-bottom)));
	}

	.input-container {
		padding: 10px var(--space-md);
	}

	#messageInput {
		font-size: var(--font-size-md);
	}

	.send-btn,
	.stop-btn {
		width: 36px;
		height: 36px;
	}

	.image-preview-area {
		padding: 12px var(--space-md);
	}

	.toast {
		font-size: 13px;
		padding: 10px 18px;
		top: 16px;
	}
}

/* ========== 矮视口：横屏平板 + 原生按键盘高度压缩后的弹窗 ========== */
/* 这类设备宽度常有 1000px+，走不到上面的移动端块，但高度被键盘压到只剩两三百 px。
   此时每 1px 纵向留白都是从输入栏身上扣的，所以按「高度」再收一次：
   头部副标题、图片条改横向排布、各处上下内边距压到最小，保证输入栏完整可见 */
@media (max-height: 480px) {
	.chat-header {
		padding: 4px var(--space-md);
		gap: var(--space-sm);
	}

	.chat-header .header-subtitle {
		display: none;
	}

	.chat-messages {
		padding: var(--space-sm) var(--space-md);
		gap: var(--space-sm);
	}

	/* 选择器需带上 .visible：.image-preview-area.visible 特异性更高，
	   只写单类名的 flex-direction 会被它盖掉 */
	.image-preview-area.visible {
		flex-direction: row;
		align-items: center;
		gap: var(--space-sm);
	}

	.image-preview-area {
		padding: 4px var(--space-md);
		max-height: 22%;
	}

	.image-preview-hint {
		margin-top: 0;
	}

	.input-area {
		padding: 4px var(--space-md);
		padding-bottom: calc(4px + var(--safe-bottom, env(safe-area-inset-bottom)));
	}

	.input-container {
		padding: 6px var(--space-sm);
	}
}