<template>
	<view class="mood-page page-enter theme-transition" :style="{ background: themeConfig.bgColor }">
		<PageHeader
			title="记录心情"
			subtitle="记录每一天的心情"
			:show-back="false"
			:show-right="true"
		>
			<template #right>
				<view
					class="header-calendar-btn"
					@click="goToCalendar"
					:style="{ background: themeConfig.cardBgColor, boxShadow: `0 4rpx 16rpx ${themeConfig.shadowLight}` }"
				>
					<FaIcon icon="calendar" :size="22" :color="themeConfig.primaryColor" />
				</view>
			</template>
		</PageHeader>

		<scroll-view
			class="main-content"
			scroll-y
			:show-scrollbar="false"
		>
			<view class="content-wrap">

				<!-- 心情录入卡片 -->
				<AppCard class="input-card card-enter" :padding="24" :radius="20">
					<view class="input-title" :style="{ color: themeConfig.textPrimary }">记录此刻心情</view>
					<view class="input-subtitle" :style="{ color: themeConfig.textSecondary }">选择表情并写下此刻的感受</view>

					<!-- 表情选择器 5 列网格 -->
					<view class="mood-selector">
						<view
							v-for="item in MOOD_LIST"
							:key="item.emoji"
							class="mood-emoji"
							:class="{ active: selectedMood === item.emoji }"
							@click="selectMood(item)"
						>
							<view class="mood-circle" :class="{ 'mood-circle--active': selectedMood === item.emoji }">
								<text class="emoji-text" :class="{ 'emoji-text--active': selectedMood === item.emoji }">{{ item.emoji }}</text>
							</view>
							<text class="mood-label" :style="{ color: themeConfig.textSecondary }">{{ item.label }}</text>
						</view>
					</view>

					<!-- 快捷短语 -->
					<view class="phrase-section" v-if="currentPhrases.length > 0">
						<text class="phrase-label" :style="{ color: themeConfig.textTertiary }">快捷短语</text>
						<view class="phrase-list">
						<view
							v-for="(phrase, idx) in currentPhrases"
							:key="idx"
							class="phrase-tag"
							:style="{ background: themeConfig.primaryColor + '15' }"
							@click="appendPhrase(phrase)"
						>
							<text class="phrase-text" :style="{ color: themeConfig.textSecondary }">{{ phrase }}</text>
						</view>
						</view>
					</view>

					<!-- 文本输入 -->
					<view class="textarea-wrap" :style="{ background: themeConfig.bgColor }">
						<textarea
							v-model="moodContent"
							class="mood-textarea"
							placeholder="今天发生了什么？有什么想记录的..."
							placeholder-class="input-placeholder"
							:maxlength="200"
							:style="{ color: themeConfig.textPrimary }"
						/>
						<text class="char-count" :style="{ color: themeConfig.textTertiary }">{{ moodContent.length }}/200</text>
					</view>

					<!-- 保存按钮 -->
					<view
						class="save-btn btn btn--block"
						:class="{ 'save-btn--disabled': !selectedMood || saving }"
						:style="saveBtnStyle"
						@click="handleSaveMood"
					>
						<text class="save-btn__text">{{ saving ? '保存中...' : '保存心情' }}</text>
					</view>
				</AppCard>

				<!-- 页面内平铺心语小笺（已有记录 + AI 内容时） -->
				<view class="ai-section card-enter" v-if="todayMood && todayMood.ai_text">
					<view class="ai-section-header">
				<FaIcon icon="leaf" :size="22" :color="themeConfig.primaryColor" />
				<text class="ai-section-title" :style="{ color: themeConfig.textPrimary }">心语小笺</text>
					</view>
					<AppCard :padding="28" :radius="20" :showShadow="true">
						<view class="ai-card-content">
							<view class="ai-card-header">
								<text class="ai-card-date">{{ todayStr }}</text>
								<text class="ai-card-mood">{{ todayMood.emoji }}</text>
							</view>
							<view class="ai-card-text">
								<text :style="{ color: themeConfig.textPrimary }">{{ todayMood.ai_text }}</text>
							</view>
							<view class="ai-card-footer">
								<text class="ai-card-hint">AI 创作</text>
							</view>
						</view>
					</AppCard>
					<view class="ai-section-actions">
						<view
							class="ai-inline-btn ai-inline-refresh"
							@click="refreshInlineAi"
						>
							<text class="inline-btn-text">换一换</text>
						</view>
						<view
							class="ai-inline-btn ai-inline-save"
							@click="saveAiCard(todayMood.ai_text)"
						>
							<text class="inline-btn-text inline-btn-text-save">保存图片</text>
						</view>
					</view>
				</view>

				<view class="bottom-spacer"></view>
			</view>
		</scroll-view>

		<!-- AI 心语小笺弹窗 -->
		<CenterModal
			:visible="showAiModal"
			title="心语小笺"
			:show-cancel="false"
			:show-confirm="false"
			@close="closeAiModal"
		>
			<view class="ai-modal-body">
				<!-- loading -->
				<view class="ai-loading" v-if="aiLoading">
					<view class="loading-spinner" :style="{ borderColor: themeConfig.primaryColor + '33', borderTopColor: themeConfig.primaryColor }"></view>
					<text class="loading-text" :style="{ color: themeConfig.textSecondary }">AI 正在为你创作中...</text>
				</view>

				<!-- 内容 -->
				<template v-else>
					<view class="ai-modal-card">
						<view class="ai-modal-bg"></view>
						<view class="ai-modal-inner">
							<view class="ai-modal-header">
								<text class="ai-modal-date">{{ todayStr }}</text>
								<text class="ai-modal-mood">{{ selectedMood || todayMood?.emoji || '😊' }}</text>
							</view>
							<view class="ai-modal-divider"></view>
							<view class="ai-modal-text">
								<text>{{ modalAiText }}</text>
							</view>
							<view class="ai-modal-footer">
								<text class="ai-modal-hint">AI 创作</text>
							</view>
						</view>
					</view>
				</template>
			</view>

			<!-- 弹窗底部按钮：移到 footer slot 保证可见 -->
			<template #footer>
				<view class="ai-modal-actions">
					<view
						class="ai-action-btn ai-action-secondary"
						:style="{ background: themeConfig.inputBgColor || 'rgba(0,0,0,0.06)', color: themeConfig.textPrimary }"
						@click="closeAiModal"
					>
						<text class="ai-action-btn__text" :style="{ color: themeConfig.textPrimary }">关闭</text>
					</view>
					<view
						class="ai-action-btn ai-action-primary"
						:style="aiRefreshBtnStyle"
						v-if="!aiLoading"
						@click="handleRefreshAi"
					>
						<text class="ai-action-btn__text">换一换</text>
					</view>
					<view
						class="ai-action-btn ai-action-primary"
						:style="aiSaveBtnStyle"
						v-if="!aiLoading"
						@click="saveAiCard(modalAiText)"
					>
						<text class="ai-action-btn__text">保存卡片</text>
					</view>
				</view>
			</template>
		</CenterModal>

		<GrowthModal ref="growthModal" />

		<canvas
			canvas-id="moodAiCanvas"
			id="moodAiCanvas"
			class="mood-canvas"
			style="width: 750px; height: 1000px;"
		></canvas>
	</view>
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import AppCard from '@/components/AppCard.vue'
import FaIcon from '@/components/FaIcon.vue'
import GrowthModal from '@/components/GrowthModal.vue'
import CenterModal from '@/components/CenterModal.vue'

import {
	getMoodByDate,
	saveMood,
	getAiMoodResult,
	regenerateAiMood
} from '@/api'
import themeMixin from '@/mixins/themeMixin.js'
import growthModalMixin from '@/mixins/growthModalMixin.js'
import { MOOD_LIST } from '@/utils/constants'

const POLL_INTERVAL = 2000
const MAX_POLL_COUNT = 30

export default {
	name: 'MoodPage',
	components: {
		PageHeader,
		AppCard,
		FaIcon,
		GrowthModal,
		CenterModal
	},
	mixins: [themeMixin, growthModalMixin],
	data() {
		return {
			MOOD_LIST,
			todayMood: null,
			selectedMood: '',
			moodContent: '',
			currentPhrases: [],
			saving: false,
			loading: false,
			todayStr: '',
			showAiModal: false,
			aiLoading: false,
			modalAiText: '',
			currentMoodId: null,
			pollTimer: null,
			pollCount: 0
		}
	},
	computed: {
		/**
		 * 保存心情按钮样式：跟随主题渐变，禁用态半透明
		 */
		saveBtnStyle() {
			const disabled = !this.selectedMood || this.saving
			return {
				background: disabled ? 'rgba(0, 0, 0, 0.06)' : this.themeConfig.gradientSoft,
				color: disabled ? this.themeConfig.textTertiary : '#ffffff',
				boxShadow: disabled ? 'none' : `0 6rpx 20rpx ${this.themeConfig.shadowColor || 'rgba(198,142,63,0.35)'}`,
				pointerEvents: disabled ? 'none' : 'auto'
			}
		},
		/**
		 * AI 弹窗中"换一换"按钮：主题渐变
		 */
		aiRefreshBtnStyle() {
			return {
				background: this.themeConfig.gradientSoft,
				color: '#ffffff',
				boxShadow: `0 4rpx 12rpx ${this.themeConfig.shadowColor || 'rgba(198,142,63,0.35)'}`
			}
		},
		/**
		 * AI 弹窗中"保存卡片"按钮：纯主题色填充
		 */
		aiSaveBtnStyle() {
			return {
				background: this.themeConfig.primaryColor,
				color: '#ffffff',
				boxShadow: `0 4rpx 12rpx ${this.themeConfig.shadowColor || 'rgba(198,142,63,0.35)'}`
			}
		}
	},
	onLoad() {
		this.initToday()
		this.loadTodayMood()
	},
	onShow() {
		this.loadTodayMood()
	},
	onUnload() {
		this.clearPoll()
	},
	methods: {
		initToday() {
			const now = new Date()
			this.todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
		},
		async loadTodayMood() {
			this.loading = true
			try {
				const res = await getMoodByDate({ date: this.todayStr })
				const data = res?.data || res
				if (data && data.emoji) {
					this.todayMood = data
					this.selectedMood = data.emoji
					this.moodContent = data.content || ''
					// 用 ?? 而不是 ||，避免 mood_id=0 时被误判为 null
					this.currentMoodId = data.mood_id ?? data.id ?? null
					const moodItem = MOOD_LIST.find(m => m.emoji === data.emoji)
					this.currentPhrases = moodItem?.phrases || []
				} else {
					this.todayMood = null
					if (!this.selectedMood) {
						this.currentPhrases = []
					}
				}
			} catch (e) {
				console.error('加载今日心情失败:', e)
				this.todayMood = null
			} finally {
				this.loading = false
			}
		},
		selectMood(item) {
			this.selectedMood = item.emoji
			this.currentPhrases = item.phrases || []
		},
		appendPhrase(phrase) {
			if (!this.moodContent) {
				this.moodContent = phrase
			} else {
				this.moodContent = this.moodContent + '，' + phrase
			}
		},
		async handleSaveMood() {
			if (!this.selectedMood) {
				uni.showToast({ title: '请选择心情', icon: 'none' })
				return
			}
			this.saving = true
			try {
				const res = await saveMood({
					date: this.todayStr,
					emoji: this.selectedMood,
					content: this.moodContent.trim()
				})
				uni.showToast({ title: '保存成功', icon: 'success' })

				const data = res?.data || res
				// 用 ?? 而不是 ||，避免 mood_id=0 时被误判为 null
				const moodId = data?.mood_id ?? data?.id ?? null
				this.currentMoodId = moodId

				await this.loadTodayMood()

				// 打开 AI 弹窗
				this.showAiModal = true
				const aiText = data?.ai_text || this.todayMood?.ai_text
				if (aiText) {
					this.modalAiText = aiText
					this.aiLoading = false
				} else {
					// 没有 ai_text 时，根据逻辑查询接口（轮询 AI 结果）而不是直接显示"暂无内容"
					// 优先用保存返回的 moodId，否则用 todayMood 上的 ID，最后退回到主键 ID
					const pollId = (moodId != null)
						? moodId
						: (this.todayMood?.mood_id ?? this.todayMood?.id ?? this.todayMood?.ID ?? null)
					if (pollId != null) {
						this.aiLoading = true
						this.modalAiText = ''
						this.startPollAi(pollId)
					} else {
						this.aiLoading = false
						this.modalAiText = '暂无 AI 创作内容'
					}
				}

				if (res?.growth) {
					this.$nextTick(() => {
						this.showGrowthModal(res.growth)
					})
				}
			} catch (e) {
				console.error('保存心情失败:', e)
				uni.showToast({ title: '保存失败，请重试', icon: 'none' })
			} finally {
				this.saving = false
			}
		},
		goToCalendar() {
			uni.navigateTo({ url: '/pages/moodCalendar/moodCalendar' })
		},
		closeAiModal() {
			this.showAiModal = false
			this.clearPoll()
		},
		startPollAi(moodId) {
			this.clearPoll()
			this.pollCount = 0
			this.aiLoading = true
			this.modalAiText = ''

			const doPoll = async () => {
				if (!this.showAiModal) {
					this.clearPoll()
					return
				}
				this.pollCount++
				if (this.pollCount > MAX_POLL_COUNT) {
					this.aiLoading = false
					this.modalAiText = 'AI 创作超时，请稍后重试'
					this.clearPoll()
					return
				}
				try {
					const res = await getAiMoodResult(moodId)
					const data = res?.data || res
					if (data?.status === 1 && data?.ai_text) {
						this.modalAiText = data.ai_text
						this.aiLoading = false
						this.clearPoll()
						return
					}
					if (data?.status === -1) {
						this.aiLoading = false
						this.modalAiText = 'AI 创作失败，请重试'
						this.clearPoll()
						return
					}
				} catch (e) {
					console.error('轮询 AI 结果失败:', e)
				}
				this.pollTimer = setTimeout(doPoll, POLL_INTERVAL)
			}

			doPoll()
		},
		clearPoll() {
			if (this.pollTimer) {
				clearTimeout(this.pollTimer)
				this.pollTimer = null
			}
		},
		async handleRefreshAi() {
			if (this.currentMoodId == null) {
				uni.showToast({ title: '暂无心情记录', icon: 'none' })
				return
			}
			this.aiLoading = true
			this.modalAiText = ''
			try {
				await regenerateAiMood(this.currentMoodId)
				this.startPollAi(this.currentMoodId)
			} catch (e) {
				console.error('重新生成 AI 失败:', e)
				uni.showToast({ title: '重新生成失败', icon: 'none' })
				this.aiLoading = false
			}
		},
		saveAiCard(aiText) {
			const text = aiText || this.modalAiText
			if (!text) {
				uni.showToast({ title: '暂无卡片内容', icon: 'none' })
				return
			}
			uni.showLoading({ title: '生成中...' })

			const cardWidth = 750
			const cardHeight = 900
			const ctx = uni.createCanvasContext('moodAiCanvas')
			const padding = 50

			ctx.setFillStyle('#fefcf9')
			ctx.fillRect(0, 0, cardWidth, cardHeight)

			const topGrad = ctx.createLinearGradient(0, 0, 0, cardHeight * 0.35)
			topGrad.addColorStop(0, 'rgba(255, 248, 240, 0.7)')
			topGrad.addColorStop(1, 'rgba(255, 248, 240, 0)')
			ctx.setFillStyle(topGrad)
			ctx.fillRect(0, 0, cardWidth, cardHeight * 0.35)

			ctx.setFillStyle('rgba(196, 184, 173, 0.12)')
			ctx.fillRect(0, 0, 6, cardHeight)

			ctx.setFillStyle('#b8b0a8')
			ctx.setFontSize(22)
			ctx.setTextAlign('left')
			ctx.fillText(this.todayStr, padding, 80)

			ctx.setFontSize(64)
			ctx.setTextAlign('right')
			ctx.fillText(this.selectedMood || this.todayMood?.emoji || '😊', cardWidth - padding, 90)

			ctx.setStrokeStyle('rgba(0, 0, 0, 0.05)')
			ctx.setLineWidth(1)
			ctx.beginPath()
			ctx.moveTo(padding, 110)
			ctx.lineTo(cardWidth - padding, 110)
			ctx.stroke()

			const contentText = text
			const maxWidth = cardWidth - padding * 2
			const lineHeight = 48
			ctx.setFillStyle('#4a443e')
			ctx.setFontSize(28)
			ctx.setTextAlign('left')

			let y = 180
			let currentLine = ''
			for (let i = 0; i < text.length; i++) {
				const testLine = currentLine + text[i]
				const metrics = ctx.measureText(testLine)
				if (metrics.width > maxWidth && currentLine.length > 0) {
					ctx.fillText(currentLine, padding, y)
					currentLine = text[i]
					y += lineHeight
				} else {
					currentLine = testLine
				}
			}
			if (currentLine) {
				ctx.fillText(currentLine, padding, y)
			}

			const footerY = cardHeight - 100
			ctx.setStrokeStyle('rgba(0, 0, 0, 0.04)')
			ctx.setLineWidth(1)
			ctx.beginPath()
			ctx.moveTo(padding, footerY)
			ctx.lineTo(cardWidth - padding, footerY)
			ctx.stroke()

			ctx.setFillStyle('#c4b8ad')
			ctx.setFontSize(20)
			ctx.setTextAlign('center')
			ctx.fillText('AI 创作 · 简记 memo', cardWidth / 2, footerY + 40)

			ctx.draw(true, () => {
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'moodAiCanvas',
						fileType: 'png',
						quality: 1,
						success: (res) => {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading()
									uni.showToast({ title: '已保存到相册', icon: 'success' })
								},
								fail: (err) => {
									console.error('保存图片失败:', err)
									uni.hideLoading()
									if (err.errMsg?.includes('auth deny')) {
										uni.showModal({
											title: '保存失败',
											content: '请在设置中允许保存图片到相册',
											showCancel: false
										})
									} else {
										uni.showToast({ title: '保存失败', icon: 'none' })
									}
								}
							})
						},
						fail: (err) => {
							console.error('生成图片失败:', err)
							uni.hideLoading()
							uni.showToast({ title: '生成失败', icon: 'none' })
						}
					})
				}, 300)
			})
		},
		async refreshInlineAi() {
			if (this.currentMoodId == null) {
				uni.showToast({ title: '暂无心情记录', icon: 'none' })
				return
			}
			try {
				uni.showLoading({ title: '生成中...' })
				await regenerateAiMood(this.currentMoodId)
				// 轮询等待新结果
				const result = await this.pollAiOnce(this.currentMoodId)
				uni.hideLoading()
				if (result) {
					this.todayMood.ai_text = result
				} else {
					uni.showToast({ title: 'AI 生成失败', icon: 'none' })
				}
			} catch (e) {
				uni.hideLoading()
				console.error('重新生成 AI 失败:', e)
				uni.showToast({ title: '重新生成失败', icon: 'none' })
			}
		},
		pollAiOnce(moodId) {
			return new Promise((resolve) => {
				let count = 0
				const maxCount = 30
				const doPoll = async () => {
					count++
					if (count > maxCount) {
						resolve(null)
						return
					}
					try {
						const res = await getAiMoodResult(moodId)
						const data = res?.data || res
						if (data?.status === 1 && data?.ai_text) {
							resolve(data.ai_text)
							return
						}
						if (data?.status === -1) {
							resolve(null)
							return
						}
					} catch (e) {
						console.error('轮询 AI 失败:', e)
					}
					setTimeout(doPoll, POLL_INTERVAL)
				}
				doPoll()
			})
		}
	}
}
</script>

<style scoped>
.mood-page {
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

.header-calendar-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 18rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.header-calendar-btn:active {
	transform: scale(0.9);
}

.main-content {
	height: calc(100vh - 180rpx);
	position: relative;
	z-index: 5;
}

.content-wrap {
	padding: 0 32rpx;
	padding-bottom: 40rpx;
}

/* 心情录入卡片 */
.input-card {
	margin-top: 16rpx;
	margin-bottom: 24rpx;
}

.input-title {
	font-size: 32rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.input-subtitle {
	font-size: 26rpx;
	margin-bottom: 24rpx;
}

/* 表情选择器 5 列网格 */
.mood-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 16rpx;
}

.mood-emoji {
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 10rpx 0 14rpx 0;
}

.mood-circle {
	width: 96rpx;
	height: 96rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mood-circle--active {
	background: #ffffff;
	box-shadow: 0 0 0 4rpx rgba(0, 0, 0, 0.05), 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.emoji-text {
	font-size: 46rpx;
	line-height: 1;
	transition: font-size 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emoji-text--active {
	font-size: 56rpx;
}

.mood-emoji:active .mood-circle {
	transform: scale(0.9);
}

.mood-emoji:active .emoji-text {
	transform: scale(0.9);
}

.mood-label {
	font-size: 22rpx;
}

/* 快捷短语 */
.phrase-section {
	margin-bottom: 20rpx;
}

.phrase-label {
	font-size: 24rpx;
	margin-bottom: 12rpx;
	display: block;
}

.phrase-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

.phrase-tag {
	padding: 12rpx 24rpx;
	border-radius: 14rpx;
	transition: all 0.2s ease;
}

.phrase-tag:active {
	transform: scale(0.95);
}

.phrase-text {
	font-size: 26rpx;
	white-space: nowrap;
}

/* 文本输入 */
.textarea-wrap {
	position: relative;
	border-radius: 16rpx;
	padding: 20rpx 20rpx 50rpx 20rpx;
	margin-bottom: 24rpx;
}

.mood-textarea {
	width: 100%;
	height: 180rpx;
	font-size: 28rpx;
	line-height: 1.6;
}

.char-count {
	position: absolute;
	right: 20rpx;
	bottom: 16rpx;
	font-size: 22rpx;
}

/* 保存按钮：使用 <view> 时确保样式表现与 .btn 一致 */
.save-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 88rpx;
	border-radius: 14rpx;
	font-size: 30rpx;
	font-weight: 600;
	letter-spacing: 0.3rpx;
	margin: 16rpx 0 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.save-btn:active:not(.save-btn--disabled) {
	transform: scale(0.98);
	opacity: 0.92;
}

.save-btn--disabled {
	opacity: 1; /* 透明度由 inline style 控制 */
}

.save-btn__text {
	line-height: 1.2;
	color: inherit;
}

/* AI 弹窗 */
.ai-modal-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10rpx 0 20rpx;
}

.ai-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
	padding: 40rpx 0;
}

.loading-spinner {
	width: 48rpx;
	height: 48rpx;
	border: 4rpx solid;
	border-top: 4rpx solid;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	font-size: 28rpx;
}

.ai-modal-card {
	position: relative;
	width: 100%;
	border-radius: 16rpx;
	overflow: hidden;
	background: linear-gradient(135deg, #fff 0%, #fefcf9 100%);
	border: 1rpx solid rgba(0, 0, 0, 0.03);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
	margin-bottom: 20rpx;
}

.ai-modal-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(255, 249, 240, 0.5) 0%, transparent 100%);
	pointer-events: none;
}

.ai-modal-inner {
	position: relative;
	z-index: 1;
	padding: 28rpx;
}

.ai-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 16rpx;
}

.ai-modal-date {
	font-size: 22rpx;
	color: #b8b0a8;
}

.ai-modal-mood {
	font-size: 44rpx;
}

.ai-modal-divider {
	height: 1rpx;
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
	margin: 12rpx 0;
}

.ai-modal-text {
	min-height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.ai-modal-text text {
	font-size: 28rpx;
	color: #4a443e;
	line-height: 1.8;
	letter-spacing: 1rpx;
	text-align: left;
	display: block;
	white-space: pre-wrap;
	word-break: break-word;
}

.ai-modal-footer {
	margin-top: 16rpx;
	text-align: center;
}

.ai-modal-hint {
	font-size: 20rpx;
	color: #c4b8ad;
}

/* AI 弹窗内的底部三个按钮（在 footer slot 内） */
.ai-modal-actions {
	display: flex;
	gap: 16rpx;
	width: 100%;
	justify-content: center;
}

.ai-action-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80rpx;
	padding: 0 12rpx;
	border-radius: 14rpx;
	font-size: 28rpx;
	font-weight: 600;
	border: none;
	outline: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
}

.ai-action-btn:active {
	transform: scale(0.97);
	opacity: 0.92;
}

.ai-action-btn__text {
	color: inherit;
	line-height: 1.2;
}

.ai-action-secondary {
	background: rgba(0, 0, 0, 0.06);
	color: var(--textPrimary, #3D3630);
}

.refresh-icon {
	font-size: 24rpx;
	margin-right: 4rpx;
}

/* 页面内平铺心语小笺 */
.ai-section {
	margin-bottom: 24rpx;
}

.ai-section-header {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 16rpx;
}

.ai-section-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ai-section-title {
	font-size: 28rpx;
	font-weight: 500;
	letter-spacing: 2rpx;
}

.ai-card-content {
	display: flex;
	flex-direction: column;
}

.ai-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 16rpx;
}

.ai-card-date {
	font-size: 22rpx;
	color: #b8b0a8;
}

.ai-card-mood {
	font-size: 44rpx;
}

.ai-card-divider {
	height: 1rpx;
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
	margin: 12rpx 0;
}

.ai-card-text {
	min-height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.ai-card-text text {
	font-size: 28rpx;
	line-height: 1.8;
	letter-spacing: 1rpx;
	text-align: left;
	display: block;
	white-space: pre-wrap;
	word-break: break-word;
}

.ai-card-footer {
	margin-top: 16rpx;
	text-align: center;
}

.ai-card-hint {
	font-size: 20rpx;
	color: #c4b8ad;
}

.ai-section-actions {
	margin-top: 20rpx;
	display: flex;
	gap: 20rpx;
	justify-content: center;
}

.ai-inline-btn {
	flex: 1;
	min-height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16rpx;
	border-radius: 14rpx;
	font-size: 28rpx;
	font-weight: 600;
	border: none;
	outline: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ai-inline-btn:active {
	transform: scale(0.96);
	opacity: 0.9;
}

.ai-inline-refresh {
	background: rgba(0, 0, 0, 0.06);
	color: var(--textPrimary, #3D3630);
}

.ai-inline-save {
	background: var(--gradientSoft, linear-gradient(135deg, #B85C3A 0%, #C68E3F 100%));
	color: #fff;
	border: none;
}

.inline-btn-text {
	font-size: 26rpx;
	font-weight: 500;
}

.inline-btn-text-save {
	font-size: 26rpx;
	font-weight: 500;
	color: #fff;
}

.refresh-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.save-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bottom-spacer {
	height: 100rpx;
}

.mood-canvas {
	position: fixed;
	left: -9999px;
	top: -9999px;
	pointer-events: none;
}
</style>
