<template>
	<view class="learning-page">
		<view class="learning-shell">
			<view class="assistant-header">
				<view class="header-left">
					<button class="icon-button" aria-label="返回" @click="goHome">
						<view class="history-icon"></view>
					</button>
					<text class="page-title">AI 学习助手</text>
				</view>
				<view class="header-actions">
					<button class="director-chip" @click="modalVisible = true">
						<image class="director-thumb" src="/static/config-doctor.png" mode="aspectFill"></image>
						<text>咨询王主任</text>
					</button>
					<button class="icon-button muted" aria-label="更多" @click="showToast('更多功能即将开放')">
						<view class="more-icon"></view>
					</button>
				</view>
			</view>

			<scroll-view class="chat-canvas" scroll-y :scroll-top="scrollTop">
				<view class="time-row">
					<text>今天 10:42 AM</text>
				</view>

				<view
					v-for="message in messages"
					:key="message.id"
					class="message-block"
					:class="`message-${message.role}`"
				>
					<view v-if="message.role === 'user'" class="user-bubble">
						<text>{{ message.content }}</text>
					</view>

					<view v-else class="assistant-message">
						<view class="assistant-meta">
							<view class="robot-badge">
								<view class="robot-icon"></view>
							</view>
							<text>AI 临床助理</text>
						</view>

						<view v-if="message.variant === 'acs-pathway'" class="assistant-card">
							<text class="response-intro">急性冠脉综合征（ACS）临床路径：</text>

							<view class="pathway-card">
								<view
									v-for="step in pathwaySteps"
									:key="step.title"
									class="pathway-step"
								>
									<text class="step-index">{{ step.index }}</text>
									<view class="step-copy">
										<text class="step-title">{{ step.title }}</text>
										<text class="step-desc">{{ step.description }}</text>
									</view>
								</view>
							</view>

							<view class="evidence-box">
								<view class="evidence-heading">
									<view class="verified-icon"></view>
									<text>循证来源</text>
								</view>
								<text class="evidence-item">[1] 2023 AHA/ACC ACS 管理指南</text>
								<text class="evidence-item">[2] 《临床诊疗常规：心血管分册》</text>
							</view>
						</view>

						<view v-else class="assistant-card simple-card">
							<text>{{ message.content }}</text>
						</view>
					</view>
				</view>

				<view class="typing-row" :class="{ visible: typingVisible }">
					<view class="typing-dots">
						<view class="dot dot-one"></view>
						<view class="dot dot-two"></view>
						<view class="dot dot-three"></view>
					</view>
					<text>正在思考中...</text>
				</view>
			</scroll-view>

			<view class="input-panel">
				<scroll-view class="quick-actions" scroll-x>
					<view class="quick-row">
						<button
							class="quick-chip"
							:class="{ disabled: sending }"
							:disabled="sending"
							@click="handleClinicalBooks"
						>
							临床思维训练书籍
						</button>
					</view>
				</scroll-view>

				<view class="composer">
					<textarea
						class="message-input"
						v-model="draft"
						auto-height
						maxlength="1000"
						placeholder="请输入您的问题..."
						placeholder-class="input-placeholder"
						@confirm="handleSend"
					></textarea>
					<view class="composer-actions">
						<button class="attach-button" aria-label="附件" @click="showToast('附件上传即将开放')">
							<view class="attach-icon"></view>
						</button>
						<button
							class="send-button"
							:class="{ disabled: sending }"
							:disabled="sending"
							aria-label="发送"
							@click="handleSend"
						>
							<view class="send-icon"></view>
						</button>
					</view>
				</view>

				<text class="disclaimer">AI 生成内容仅供临床参考，最终医疗决策请咨询资深医师。</text>
			</view>

			<view v-if="modalVisible" class="modal-mask" @click="modalVisible = false">
				<view class="wang-modal" @click.stop>
					<view class="modal-header">
						<view class="modal-doctor">
							<image class="modal-avatar" src="/static/config-doctor.png" mode="aspectFill"></image>
							<view class="modal-title-group">
								<text class="modal-title">王主任</text>
								<text class="modal-subtitle">临床教育首席专家</text>
							</view>
						</view>
						<button class="icon-button muted" aria-label="关闭" @click="modalVisible = false">
							<view class="close-icon"></view>
						</button>
					</view>

					<view class="modal-body">
						<view class="quote-card">
							<text>“对于 ACS 患者，请务必牢记：时间就是心肌。虽然 AI 提供了标准的临床路径，但结合患者个体化风险特征的临床判断仍是您最关键的工具。”</text>
						</view>

						<view class="mentor-grid">
							<button class="mentor-card" @click="showToast('已选择查房带教')">
								<view class="school-small-icon"></view>
								<text>查房带教</text>
							</button>
							<button class="mentor-card" @click="showToast('已选择疑难会诊')">
								<view class="notes-small-icon"></view>
								<text>疑难会诊</text>
							</button>
						</view>

						<button class="guidance-button" @click="showToast('一对一指导即将开始')">
							开始一对一指导
						</button>
					</view>
				</view>
			</view>

			<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import {
	createLearningAssistantSession,
	runClinicalThinkingBooksWorkflow,
	streamLearningAssistantChat,
	type LearningAssistantSession
} from '../../api/learning-assistant'
import { createHomeNavigator } from '../../api/navigation'

type AssistantMessage = {
	id: string
	role: 'user' | 'assistant'
	content: string
	variant?: 'acs-pathway' | 'simple'
}

const emit = defineEmits<{
	(event: 'go-home'): void
	(event: 'open-settings'): void
	(event: 'open-profile'): void
}>()

const goHome = createHomeNavigator(emit)

const clinicalBooksAction = '临床思维训练书籍'

const pathwaySteps = [
	{ index: '1', title: '早期识别', description: '10分钟内完成12导联心电图。' },
	{ index: '2', title: '药物干预', description: '阿司匹林、氯吡格雷。' },
	{ index: '3', title: '再灌注策略', description: 'STEMI需紧急PCI。' }
]

const messages = ref<AssistantMessage[]>([])

const draft = ref('')
const modalVisible = ref(false)
const typingVisible = ref(false)
const toastMessage = ref('')
const toastVisible = ref(false)
const scrollTop = ref(0)
const assistantSession = ref<LearningAssistantSession | null>(null)
const sending = ref(false)

let toastTimer: ReturnType<typeof setTimeout> | null = null
let streamAbortController: AbortController | null = null
let workflowAbortController: AbortController | null = null

async function handleClinicalBooks() {
	if (sending.value) return

	messages.value.push({
		id: `user-${Date.now()}`,
		role: 'user',
		content: clinicalBooksAction
	})
	typingVisible.value = true
	sending.value = true
	scrollToBottom()

	const assistantMessageIndex = messages.value.length
	messages.value.push({
		id: `assistant-${Date.now()}`,
		role: 'assistant',
		variant: 'simple',
		content: ''
	})

	try {
		workflowAbortController?.abort()
		workflowAbortController = new AbortController()
		const output = await runClinicalThinkingBooksWorkflow(workflowAbortController.signal)
		messages.value[assistantMessageIndex].content = output
	} catch (error) {
		messages.value[assistantMessageIndex].content = error instanceof Error ? error.message : '临床思维训练书籍生成失败'
		showToast(messages.value[assistantMessageIndex].content)
	} finally {
		typingVisible.value = false
		sending.value = false
		scrollToBottom()
	}
}

async function handleSend() {
	const value = draft.value.trim()
	if (!value) {
		showToast('请输入问题')
		return
	}
	if (sending.value) return

	messages.value.push({
		id: `user-${Date.now()}`,
		role: 'user',
		content: value
	})
	draft.value = ''
	typingVisible.value = true
	sending.value = true
	scrollToBottom()

	const assistantMessageIndex = messages.value.length
	messages.value.push({
		id: `assistant-${Date.now()}`,
		role: 'assistant',
		variant: 'simple',
		content: ''
	})

	try {
		const session = await ensureAssistantSession(value)
		streamAbortController?.abort()
		streamAbortController = new AbortController()
		await streamLearningAssistantChat(
			session.assistant_session_id,
			{ question: value },
			{
				onDelta: delta => {
					messages.value[assistantMessageIndex].content += delta
					scrollToBottom()
				}
			},
			streamAbortController.signal
		)
		if (!messages.value[assistantMessageIndex].content.trim()) {
			messages.value[assistantMessageIndex].content = '暂未生成回复，请稍后重试。'
		}
	} catch (error) {
		messages.value[assistantMessageIndex].content = error instanceof Error ? error.message : 'AI 学习助手回复失败'
		showToast(messages.value[assistantMessageIndex].content)
	} finally {
		typingVisible.value = false
		sending.value = false
		scrollToBottom()
	}
}

async function ensureAssistantSession(title: string) {
	if (assistantSession.value) return assistantSession.value
	const session = await createLearningAssistantSession(title)
	assistantSession.value = session
	uni.setStorageSync('clinical-thinking-learning-assistant-session', session)
	return session
}

async function initializeAssistantSession() {
	try {
		const storedSession = uni.getStorageSync('clinical-thinking-learning-assistant-session')
		if (storedSession && typeof storedSession === 'object') {
			assistantSession.value = storedSession as LearningAssistantSession
			return
		}
		assistantSession.value = await createLearningAssistantSession('AI 学习助手')
		uni.setStorageSync('clinical-thinking-learning-assistant-session', assistantSession.value)
	} catch (error) {
		showToast(error instanceof Error ? error.message : '新建会话失败')
	}
}

function scrollToBottom() {
	nextTick(() => {
		scrollTop.value += 1000
	})
}

function showToast(message: string) {
	if (toastTimer) clearTimeout(toastTimer)
	toastMessage.value = message
	toastVisible.value = true
	toastTimer = setTimeout(() => {
		toastVisible.value = false
	}, 1800)
}

onMounted(() => {
	void initializeAssistantSession()
})

onUnmounted(() => {
	streamAbortController?.abort()
	workflowAbortController?.abort()
	if (toastTimer) clearTimeout(toastTimer)
})
</script>

<style>
page {
	min-height: 100%;
	background: #f2f3fb;
}

.learning-page {
	min-height: 100vh;
	background: #f2f3fb;
	color: #191c21;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

.learning-shell {
	position: relative;
	min-height: 100vh;
	background: #ffffff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.assistant-header {
	position: relative;
	z-index: 10;
	box-sizing: border-box;
	height: 56px;
	padding: 0 16px;
	border-bottom: 1px solid #c2c6d4;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
}

.header-left,
.header-actions,
.director-chip,
.assistant-meta,
.evidence-heading,
.composer-actions,
.modal-doctor {
	display: flex;
	align-items: center;
}

.header-left,
.header-actions {
	gap: 12px;
}

.page-title {
	color: #191c21;
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: 0;
}

.icon-button,
.director-chip,
.quick-chip,
.attach-button,
.send-button,
.mentor-card,
.guidance-button {
	padding: 0;
	border: 0;
	background: transparent;
}

.icon-button::after,
.director-chip::after,
.quick-chip::after,
.attach-button::after,
.send-button::after,
.mentor-card::after,
.guidance-button::after {
	border: 0;
}

.icon-button {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.icon-button:active {
	background: rgba(25, 28, 33, 0.05);
}

.director-chip {
	box-sizing: border-box;
	min-height: 32px;
	padding: 4px 8px;
	border: 1px solid #c2c6d4;
	border-radius: 12px;
	background: #f2f3fb;
	gap: 8px;
	color: #00478d;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

.director-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.history-icon,
.more-icon,
.robot-icon,
.verified-icon,
.attach-icon,
.send-icon,
.close-icon,
.school-small-icon,
.notes-small-icon {
	background: #424752;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.history-icon {
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%203a9%209%200%201%201-8.95%2010H2l3-3%203%203H6.07A7%207%200%201%200%208.1%208.05L6.68%206.63A8.96%208.96%200%200%201%2013%203zm-1%205h1.5v5l4%202-.75%201.23L12%2013.75V8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13%203a9%209%200%201%201-8.95%2010H2l3-3%203%203H6.07A7%207%200%201%200%208.1%208.05L6.68%206.63A8.96%208.96%200%200%201%2013%203zm-1%205h1.5v5l4%202-.75%201.23L12%2013.75V8z'/%3E%3C/svg%3E");
}

.more-icon {
	width: 24px;
	height: 24px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%208a2%202%200%201%200%200-4%202%202%200%200%200%200%204zm0%202a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%208a2%202%200%201%200%200-4%202%202%200%200%200%200%204zm0%202a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4z'/%3E%3C/svg%3E");
}

.chat-canvas {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px;
	background: #ffffff;
}

.time-row {
	display: flex;
	justify-content: center;
	margin-bottom: 32px;
}

.time-row text {
	padding: 4px 16px;
	border-radius: 12px;
	background: #f2f3fb;
	color: #727783;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0;
}

.message-block {
	margin-bottom: 16px;
}

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

.user-bubble {
	box-sizing: border-box;
	max-width: 85%;
	padding: 12px 16px;
	border-radius: 8px 8px 0 8px;
	background: #00478d;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	color: #ffffff;
	font-size: 16px;
	line-height: 24px;
}

.assistant-message {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.assistant-meta {
	gap: 8px;
	color: #00478d;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.robot-badge {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #00478d;
	display: flex;
	align-items: center;
	justify-content: center;
}

.robot-icon {
	width: 18px;
	height: 18px;
	background: #ffffff;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a2%202%200%200%201%201%203.73V7h4a3%203%200%200%201%203%203v7a3%203%200%200%201-3%203H7a3%203%200%200%201-3-3v-7a3%203%200%200%201%203-3h4V5.73A2%202%200%200%201%2012%202zM7%2010a1%201%200%200%200-1%201v6a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1v-6a1%201%200%200%200-1-1H7zm2.5%203.5a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203zm5%200a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a2%202%200%200%201%201%203.73V7h4a3%203%200%200%201%203%203v7a3%203%200%200%201-3%203H7a3%203%200%200%201-3-3v-7a3%203%200%200%201%203-3h4V5.73A2%202%200%200%201%2012%202zM7%2010a1%201%200%200%200-1%201v6a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1v-6a1%201%200%200%200-1-1H7zm2.5%203.5a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203zm5%200a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203z'/%3E%3C/svg%3E");
}

.assistant-card {
	box-sizing: border-box;
	max-width: 90%;
	padding: 16px;
	border: 1px solid #c2c6d4;
	border-radius: 0 8px 8px 8px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.response-intro,
.simple-card {
	color: #191c21;
	font-size: 16px;
	line-height: 24px;
}

.pathway-card {
	box-sizing: border-box;
	padding: 16px;
	border: 1px solid rgba(194, 198, 212, 0.3);
	border-radius: 8px;
	background: #f2f3fb;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pathway-step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.step-index {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #00478d;
	color: #ffffff;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
	font-weight: 600;
	flex: 0 0 auto;
	margin-top: 2px;
}

.step-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.step-title {
	color: #00478d;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.step-desc {
	color: #424752;
	font-size: 14px;
	line-height: 20px;
}

.evidence-box {
	padding-top: 16px;
	border-top: 1px solid #c2c6d4;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.evidence-heading {
	gap: 8px;
	margin-bottom: 4px;
	color: #006970;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0;
}

.verified-icon {
	width: 16px;
	height: 16px;
	background: #006970;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202l2.39%202.42%203.37-.49.6%203.35%203.02%201.57-1.55%203.03%201.55%203.03-3.02%201.57-.6%203.35-3.37-.49L12%2022l-2.39-2.42-3.37.49-.6-3.35-3.02-1.57%201.55-3.03-1.55-3.03%203.02-1.57.6-3.35%203.37.49L12%202zm-1.1%2013.2l5.66-5.66-1.42-1.42-4.24%204.24-2.12-2.12-1.42%201.42%203.54%203.54z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202l2.39%202.42%203.37-.49.6%203.35%203.02%201.57-1.55%203.03%201.55%203.03-3.02%201.57-.6%203.35-3.37-.49L12%2022l-2.39-2.42-3.37.49-.6-3.35-3.02-1.57%201.55-3.03-1.55-3.03%203.02-1.57.6-3.35%203.37.49L12%202zm-1.1%2013.2l5.66-5.66-1.42-1.42-4.24%204.24-2.12-2.12-1.42%201.42%203.54%203.54z'/%3E%3C/svg%3E");
}

.evidence-item {
	color: #424752;
	font-size: 13px;
	line-height: 20px;
	font-style: italic;
}

.typing-row {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #727783;
	font-size: 12px;
	line-height: 16px;
	font-style: italic;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.typing-row.visible {
	opacity: 1;
}

.typing-dots {
	display: flex;
	gap: 4px;
}

.dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #727783;
	animation: typing-bounce 1s ease-in-out infinite;
}

.dot-two {
	animation-delay: 0.12s;
}

.dot-three {
	animation-delay: 0.24s;
}

.input-panel {
	box-sizing: border-box;
	padding: 12px 16px 16px;
	border-top: 1px solid #c2c6d4;
	background: #ffffff;
	flex: 0 0 auto;
}

.quick-actions {
	width: 100%;
	margin-bottom: 12px;
	white-space: nowrap;
}

.quick-row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
}

.quick-chip {
	box-sizing: border-box;
	width: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 36px;
	padding: 8px 18px;
	border: 1px solid rgba(0, 71, 141, 0.28);
	border-radius: 8px;
	background: #eef5ff;
	color: #00478d;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
}

.quick-chip.disabled {
	opacity: 0.55;
}

.quick-chip:active {
	background: #dcecff;
}

.composer {
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid #c2c6d4;
	border-radius: 8px;
	background: #f2f3fb;
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.composer:focus-within {
	border-color: #00478d;
}

.message-input {
	flex: 1;
	min-height: 44px;
	max-height: 128px;
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: #191c21;
	font-size: 16px;
	line-height: 24px;
}

.input-placeholder {
	color: #727783;
}

.composer-actions {
	gap: 4px;
	flex: 0 0 auto;
	margin-bottom: 4px;
}

.attach-button,
.send-button {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.attach-icon {
	width: 22px;
	height: 22px;
	background: #727783;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M16.5%206.5v9a4.5%204.5%200%200%201-9%200v-10a3%203%200%200%201%206%200v9a1.5%201.5%200%200%201-3%200v-8h2v8a.5.5%200%200%200%201%200v-9a2%202%200%200%200-4%200v10a2.5%202.5%200%200%200%205%200v-9h2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M16.5%206.5v9a4.5%204.5%200%200%201-9%200v-10a3%203%200%200%201%206%200v9a1.5%201.5%200%200%201-3%200v-8h2v8a.5.5%200%200%200%201%200v-9a2%202%200%200%200-4%200v10a2.5%202.5%200%200%200%205%200v-9h2z'/%3E%3C/svg%3E");
}

.send-button {
	background: #00478d;
}

.send-button.disabled {
	opacity: 0.5;
}

.send-button:active {
	transform: scale(0.95);
}

.send-icon {
	width: 20px;
	height: 20px;
	background: #ffffff;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%2021l21-9L2%203v7l15%202-15%202v7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2%2021l21-9L2%203v7l15%202-15%202v7z'/%3E%3C/svg%3E");
}

.disclaimer {
	display: block;
	margin-top: 8px;
	text-align: center;
	color: #727783;
	font-size: 11px;
	line-height: 16px;
}

.modal-mask {
	position: absolute;
	inset: 0;
	z-index: 60;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.wang-modal {
	width: 100%;
	max-width: 340px;
	border: 1px solid #c2c6d4;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 18px 48px rgba(25, 28, 33, 0.2);
	overflow: hidden;
	animation: fade-in 0.2s ease-out forwards;
}

.modal-header {
	box-sizing: border-box;
	padding: 24px;
	border-bottom: 1px solid #c2c6d4;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal-doctor {
	gap: 16px;
}

.modal-avatar {
	width: 56px;
	height: 56px;
	border: 2px solid #00478d;
	border-radius: 50%;
}

.modal-title-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.modal-title {
	color: #191c21;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

.modal-subtitle {
	color: #727783;
	font-size: 14px;
	line-height: 20px;
}

.close-icon {
	width: 22px;
	height: 22px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M18.3%205.71L12%2012l6.3%206.29-1.41%201.41L10.59%2013.41%204.29%2019.7%202.88%2018.29%209.17%2012%202.88%205.71%204.29%204.3l6.3%206.29%206.3-6.29%201.41%201.41z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M18.3%205.71L12%2012l6.3%206.29-1.41%201.41L10.59%2013.41%204.29%2019.7%202.88%2018.29%209.17%2012%202.88%205.71%204.29%204.3l6.3%206.29%206.3-6.29%201.41%201.41z'/%3E%3C/svg%3E");
}

.modal-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.quote-card {
	padding: 16px;
	border: 1px solid rgba(0, 71, 141, 0.1);
	border-radius: 8px;
	background: rgba(0, 94, 184, 0.06);
	text-align: center;
	color: #191c21;
	font-size: 16px;
	line-height: 24px;
	font-style: italic;
}

.mentor-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.mentor-card {
	box-sizing: border-box;
	min-height: 96px;
	padding: 16px;
	border: 1px solid rgba(194, 198, 212, 0.3);
	border-radius: 8px;
	background: #f2f3fb;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #191c21;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.school-small-icon,
.notes-small-icon {
	width: 24px;
	height: 24px;
	background: #00478d;
}

.school-small-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%203L1%209l11%206%209-4.91V17h2V9L12%203zm0%2014L5%2013.18V17l7%204%207-4v-3.82L12%2017z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%203L1%209l11%206%209-4.91V17h2V9L12%203zm0%2014L5%2013.18V17l7%204%207-4v-3.82L12%2017z'/%3E%3C/svg%3E");
}

.notes-small-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6%202h9l5%205v15H6a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2zm8%201.5V8h4.5L14%203.5zM8%2011v2h8v-2H8zm0%204v2h8v-2H8zm0%204h5v-2H8v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M6%202h9l5%205v15H6a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2zm8%201.5V8h4.5L14%203.5zM8%2011v2h8v-2H8zm0%204v2h8v-2H8zm0%204h5v-2H8v2z'/%3E%3C/svg%3E");
}

.guidance-button {
	width: 100%;
	min-height: 44px;
	border-radius: 8px;
	background: #00478d;
	color: #ffffff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.guidance-button:active {
	transform: scale(0.98);
}

.toast {
	position: absolute;
	left: 50%;
	bottom: 96px;
	z-index: 100;
	max-width: 300px;
	padding: 10px 18px;
	border-radius: 12px;
	background: #2e3037;
	color: #eff0f8;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@keyframes typing-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (min-width: 768px) {
	.learning-page {
		display: flex;
		justify-content: center;
		background: #d8dae2;
	}

	.learning-shell {
		width: 390px;
		min-height: 100vh;
		box-shadow: 0 24px 64px rgba(25, 28, 33, 0.18);
	}
}

@media (max-height: 760px) {
	.chat-canvas {
		padding: 12px 16px;
	}

	.time-row {
		margin-bottom: 20px;
	}

	.input-panel {
		padding-bottom: 12px;
	}
}
</style>
