/* ========== 全局样式 ========== */

/* ===== CSS 设计令牌（Design Tokens）===== */
/* 修改主题色只需改以下变量 */
:root {
	/* 主色系列 */
	--color-primary: #3366CC;
	--color-primary-light: #3399FF;
	--color-primary-dark: #0033CC;
	--color-primary-deeper: #003366;

	/* 辅助色 */
	--color-success: #009900;
	--color-success-light: #33CC33;
	--color-danger: #FF3333;
	--color-warning: #FF9900;

	/* 文字色 */
	--color-text-primary: #333333;
	--color-text-secondary: #666666;
	--color-text-muted: #999999;
	--color-text-inverse: #FFFFFF;

	/* 背景色 */
	--color-bg-primary: #FFFFFF;
	--color-bg-secondary: #eeeeee;
	--color-bg-sidebar: #003366;
	--color-bg-overlay: #00000080;

	/* 边框色 */
	--color-border: #CCCCCC;
	--color-border-light: #E0E5EB;
	--color-border-sidebar: #336699;

	/* 特殊半透明色（统一写法，兼容旧浏览器）*/
	--color-border-subtle: rgba(204, 204, 204, 0.15);
	--color-border-subtle-mid: rgba(204, 204, 204, 0.4);
	--color-border-subtle-strong: rgba(204, 204, 204, 0.66);
	--color-black-subtle: rgba(0, 0, 0, 0.06);
	--color-black-shadow: rgba(0, 0, 0, 0.15);
	--color-black-shadow-strong: rgba(0, 0, 0, 0.3);

	/* 间距系统（4px 基准）*/
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-lg: 16px;
	--space-xl: 20px;
	--space-2xl: 24px;
	--space-3xl: 60px;

	/* 圆角 */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 9999px;

	/* 字号 */
	--font-size-xs: 11px;
	--font-size-sm: 13px;
	--font-size-md: 14px;
	--font-size-lg: 15px;
	--font-size-xl: 18px;
	--font-size-2xl: 24px;

	/* 过渡 */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.2s ease;
	--transition-slow: 0.3s ease;

	/* 图片尺寸：全项目唯一取值处。
	   缩略图=待发送区，题图=气泡内图片/卡片图。
	   移动端样式表不再另写一份，否则同优先级后加载者会盖掉这里 */
	--qa-thumb-size: 50px;
	--qa-message-image-max: 280px;
	--qa-head-image-max: 200px;
}

/* 通用工具类 */
/* 【修复】base.css 在其它样式表之前加载，.hidden 与 .send-btn/.stop-btn 等
   组件类特异性相同（均为单类名），后加载的 display:flex 会覆盖 display:none，
   导致「发送」和「停止」按钮同时显示。工具类需 !important 才能可靠生效。 */
.hidden {
	display: none !important;
}

/* div化按钮通用：点击时禁止选中文字 */
.new-chat-btn,
.menu-toggle,
.remove-image-btn,
.action-btn,
.image-menu-item,
.send-btn,
.stop-btn,
.msg-action-btn,
.conv-delete,
.teacher-entry-btn {
	user-select: none;
	-webkit-user-select: none; /* 兼容旧版 Safari */
}

/* 【优化】合并多个元素的 transition 为公共类，减少重复 */
.anim-transition {
	transition: background var(--transition-normal),
		color var(--transition-normal),
		border-color var(--transition-normal),
		transform var(--transition-fast),
		opacity var(--transition-normal);
}

.new-chat-btn,
.history-item,
.menu-toggle,
.action-btn,
.msg-action-btn,
.provider-tab,
.remove-image-btn,
.send-btn,
.stop-btn {
	transition: background var(--transition-normal),
		color var(--transition-normal),
		border-color var(--transition-normal),
		transform var(--transition-fast),
		opacity var(--transition-normal);
}

/* 图标尺寸由CSS统一控制（SVG标签内不写宽高） */
.new-chat-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.menu-toggle svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.remove-image-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.action-btn svg {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}

.image-menu-item svg {
	width: 18px;
	height: 18px;
}

.send-btn svg,
.stop-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.msg-action-btn svg {
	width: 14px;
	height: 14px;
}

.history-item svg {
	width: 16px;
	height: 16px;
}

.teacher-entry-btn svg {
	width: 16px;
	height: 16px;
}

/* 【优化】将 visible/invisible 定义移到最后（基础重置之后），保证优先级明确 */
.visible {
	display: block;
}

.invisible {
	visibility: hidden;
}

/* ===== 基础重置（置于样式表末尾，保证优先级最低）===== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	touch-action: manipulation;
}

body {
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	height: 100vh;
	/* --app-height 由 src/utils/viewport.js 按软键盘高度实时写入。
	   兜底值必须用 100vh：var() 的 fallback 里若写旧浏览器不支持的单位（如 dvh），
	   整条声明会按「computed-value 非法」失效，连上面那行 100vh 都不生效，flex 列直接塌掉 */
	height: var(--app-height, 100vh);
	overflow: hidden;
}

/* ===== 无障碍：减少动画偏好 ===== */
/* 【优化】适配 prefers-reduced-motion，避免眩晕 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}