<template>
	<view class="live-chat-panel" :class="{ 'live-chat-panel--horizontal': liveItem.showType == 1 }">
		<view class="chat-area-container" :class="{
			'chat-area-container2': liveItem.showType == 1,
			'chat-area-container3': liveItem.status == 1 && !liveItem.previewUrl && liveItem.showType == 1,
			'chat-area-container4': liveItem.status == 1 && liveItem.previewUrl && liveItem.showType == 1,
			'chat-area-focused': isFocus && liveItem.showType == 1
		}" :style="{ display: isFullscreen ? 'none' : '' }">
			<view class="tabs_bg" v-if="liveItem.showType == 1">
				<u-tabs :list="listTabs" @click="clickTabs" lineColor="#FF233C"
					:activeStyle="{ color: '#FF233C', fontWeight: 'bold', fontSize: '32rpx', transform: 'scale(1.05)' }">
				</u-tabs>
				<view v-if="liveItem.showType == 1" class="complaint-box" @click="goComplaint">
					<image class="image w32 h32 mr10" src="/static/images/complaint2.png" mode="widthFix" />
					<view class="fs26">投诉</view>
				</view>
			</view>
			<view class="chat-content-wrapper"
				:class="{
					'chat-content-vertical': liveItem.showType == 2,
					'chat-content-trailer': liveItem.status == 1 && !liveItem.previewUrl && liveItem.showType == 2
				}">
				<view class="notice-message" v-if="isShowNotice"
					:class="liveItem.showType == 1 ? 'horizontal-notice' : 'horizontal-notice2'">
					<view class="official-header">
						<view class="official-icon">
							<image class="w40 h40" src="/static/logo.jpg" mode="widthFix" />
						</view>
						<text class="official-label">官方留言</text>
					</view>
					<view class="message-body">
						<text class="notice-text">{{ notice.msg }}</text>
					</view>
					<view class="message-time" v-if="formatMessageTime(notice)">{{ formatMessageTime(notice) }}</view>
				</view>
				<scroll-view id="msgScroll" v-if="Array.isArray(talklist)" enable-flex scroll-y="true"
					:class="[
						'message-scroll-view',
						liveItem.showType == 1 ? 'message-scroll-horizontal' : 'message-scroll-vertical'
					]"
					:style="messageScrollStyle"
					:enhanced="true" :bounces="false" :show-scrollbar="false" :fast-deceleration="false"
					:enable-back-to-top="false" :scroll-top="scrollTop"
					:scroll-into-view="scrollIntoView" @scroll="onScroll" ref="scrollView">
					<view class="message-list" v-for="item in (talklist || [])" :key="item.uniqueId"
						:id="`list_${item.uniqueId}`" v-show="item.cmd != 'red' && item.cmd != 'entry'">
						<view v-if="item.cmd == 'replyUser'" class="message-item message-reply-official">
							<view class="official-reply-card">
								<view class="official-header">
									<view class="official-icon">
										<image class="w40 h40" src="/static/logo.jpg" mode="widthFix" />
									</view>
									<text class="official-label">官方回复</text>
								</view>
								<view class="message-body">
									<text class="reply-content">{{ getReplyUserContent(item) }}</text>
								</view>
								<view class="original-message-quote" v-if="getReplyUserQuote(item)">
									<text class="quote-text">{{ getReplyUserQuote(item) }}</text>
								</view>
							</view>
						</view>
						<view v-else class="message-item message-user">
							<view class="message-content"
								:class="liveItem.showType == 1 ? 'message-content-horizontal' : 'message-content-vertical'">
								<view class="message-header user-header">
									<text class="user-nickname">{{ item.nickName || '未命名' }}</text>
								</view>
								<view class="message-body">
									<text class="message-text">{{ item.msg }}</text>
								</view>
								<view class="message-time">{{ formatMessageTime(item) }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="input-actions-container" v-show="!isFocus">
				<view class="input-bar-normal"
					:style="{ justifyContent: liveItem.status != 3 && !isPlayback ? '' : 'flex-end' }">
					<view class="input-trigger" v-if="liveItem.status != 3 && !isPlayback" @tap.stop="openChatInput">
						<text class="trigger-text" :style="{ color: liveItem.showType == 2 ? '#fff' : '' }"
							:class="{ 'has-value': !!value }">{{ value || placeholderText }}</text>
					</view>
					<view class="action-buttons">
						<view class="action-item" @tap.stop="$emit('open-more')">
							<image
								:src="liveItem.showType == 1 ? '/static/images/more2.png' : 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png'"
								class="action-icon-img" mode="aspectFit" />
							<text class="action-label">更多</text>
						</view>
						<view class="action-item" @tap.stop="$emit('open-cart')">
							<image
								src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/fs/20251231/8376c769d7154f04b13cbec4a76bacf0.png"
								class="cart-icon-img" mode="aspectFit" />
							<text class="action-label">去下单</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="input-keyboard-bar"
			v-if="isFocus && liveItem.status != 3 && !isPlayback && !isFullscreen"
			:style="{ bottom: keyboardHeightPx + 'px' }">
			<view class="keyboard-input-wrap">
				<input type="text" class="keyboard-chat-input" :placeholder="placeholderText" v-model="value"
					:focus="inputFocusActive"
					:placeholder-style="liveItem.showType == 1 ? 'color:#999999;' : 'color:#e7e7e7;'"
					placeholder-class="placeholder-style" @focus="inputFocus" @blur="inputBlur" cursor-spacing="20"
					:adjust-position="false" :disabled="isEnd" @confirm="sendMsg"
					:confirm-type="value ? 'send' : 'done'" />
				<view class="keyboard-send-button" :class="liveItem.showType == 1 ? 'send-horizontal' : ''"
					@tap.stop="sendMsg()">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
import { appendTalkMessage, removeTalkMessageByMsgId, loadHistoryMessages } from '../services/liveMessageService.js'

export default {
	name: 'LiveChatPanel',
	props: {
		liveId: {
			type: [String, Number],
			default: ''
		},
		liveItem: {
			type: Object,
			default: () => ({})
		},
		userInfo: {
			type: Object,
			default: () => ({})
		},
		myselfFlag: {
			type: Boolean,
			default: false
		},
		isFullscreen: {
			type: Boolean,
			default: false
		},
		isEnd: {
			type: Boolean,
			default: false
		},
		isPlayback: {
			type: Boolean,
			default: false
		},
		notice: {
			type: Object,
			default: () => ({})
		},
		isShowNotice: {
			type: Boolean,
			default: false
		},
		isIOS: {
			type: Boolean,
			default: false
		},
		socketConnected: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			talklist: [],
			value: '',
			placeholderText: '给老师留言...',
			scrollTop: 0,
			scrollIntoView: '',
			messageIdCounter: 0,
			isSending: false,
			scrollTimer: null,
			lastScrollTime: 0,
			currentScrollTop: 0,
			scrollDebounceDelay: 200,
			listTabs: [{ name: '讨论' }],
			isFocus: false,
			inputFocusActive: false,
			keyboardHeightPx: 0,
			commonViewHeight: '',
			chatInputBlurTimer: null,
			systemInfo: {}
		}
	},
	watch: {
		isShowNotice: {
			handler() {
				setTimeout(() => this.measureNoticeHeight(), 800)
			},
			immediate: true
		},
		'notice.msg': {
			handler(newVal, oldVal) {
				const newLength = newVal ? newVal.length : 0
				const oldLength = oldVal ? oldVal.length : 0
				if (newLength !== oldLength) {
					setTimeout(() => this.measureNoticeHeight(), 800)
				}
			},
			deep: true
		},
		isFocus(val) {
			this.$emit('focus-change', val)
		}
	},
	computed: {
		messageScrollStyle() {
			if (!this.isShowNotice || !this.commonViewHeight) {
				return {}
			}
			const margin = typeof this.commonViewHeight === 'number'
				? `${this.commonViewHeight}px`
				: this.commonViewHeight
			return { marginTop: margin }
		}
	},
	mounted() {
		this.systemInfo = uni.getSystemInfoSync()
		uni.onKeyboardHeightChange((res) => {
			if (res.height > 0) {
				this.keyboardHeightPx = res.height
				this.$emit('keyboard-show')
			} else {
				this.resetChatInputState()
			}
		})
	},
	beforeDestroy() {
		if (this.chatInputBlurTimer) {
			clearTimeout(this.chatInputBlurTimer)
			this.chatInputBlurTimer = null
		}
		if (this.scrollTimer) {
			clearTimeout(this.scrollTimer)
			this.scrollTimer = null
		}
	},
	methods: {
		requestSendMessage(data) {
			return new Promise((resolve, reject) => {
				this.$emit('chat-send', { data, resolve, reject })
			})
		},

		filterTalklistByUserId(rows) {
			if (!Array.isArray(rows) || !this.userInfo?.userId) return []
			const currentUserId = String(this.userInfo.userId)
			return rows.filter(item => String(item.userId) === currentUserId)
		},

		async loadHistory(liveItem, refresh = false) {
			const item = liveItem || this.liveItem
			if (!item || !this.liveId) {
				console.error('loadHistory 错误：无效的 liveItem')
				return
			}
			try {
				let rows = await loadHistoryMessages(this.liveId, 30, 1, refresh)
				rows = this.filterTalklistByUserId(rows)
				rows.forEach((row) => {
					if (!row.uniqueId) {
						row.uniqueId = ++this.messageIdCounter
					}
				})
				this.talklist = rows
				this.$nextTick(() => {
					this.scrollToBottom(true)
				})
			} catch (error) {
				this.talklist = []
				console.error('获取聊天记录失败:', error)
			}
		},

		appendMessage(message) {
			let msgId = message.msgId
			if (!msgId && message.data) {
				try {
					const msgdata = typeof message.data === 'string' ? JSON.parse(message.data) : message.data
					msgId = msgdata?.msgId
				} catch (e) {}
			}
			if (msgId && this.talklist.some(item => item.msgId === msgId)) {
				return
			}
			const last = this.talklist[this.talklist.length - 1]
			if (last && last.msg === message.msg && String(last.userId) === String(message.userId)) {
				const age = Date.now() - (last.ts || 0)
				if (age < 3000) {
					if (message.data && !last.msgId) {
						try {
							const msgdata = typeof message.data === 'string' ? JSON.parse(message.data) : message.data
							if (msgdata?.msgId) {
								last.msgId = msgdata.msgId
							}
						} catch (e) {}
					}
					this.$nextTick(() => this.scrollToBottom(true))
					return
				}
			}
			const result = appendTalkMessage(this.talklist, message, this.messageIdCounter)
			this.talklist = result.talklist
			this.messageIdCounter = result.messageIdCounter
			if (this.isIOS) {
				this.$nextTick(() => {
					setTimeout(() => this.scrollToBottom(true), 100)
				})
			} else {
				this.$nextTick(() => {
					this.scrollToBottom(true)
				})
			}
		},

		removeMessageByMsgId(msgId) {
			this.talklist = removeTalkMessageByMsgId(this.talklist, msgId)
		},

		clearMessages() {
			this.talklist = []
			this.messageIdCounter = 0
		},

		trimTalklist(maxCount) {
			if (this.talklist && this.talklist.length > maxCount) {
				this.talklist = this.talklist.slice(-maxCount)
			}
		},

		shouldAppendSocketMessage(socketMessage) {
			return socketMessage.cmd === 'replyUser' ||
				String(socketMessage.userId) === String(this.userInfo?.userId)
		},

		formatMessageTime(item) {
			if (!item) return ''
			const time = item.createTime || item.create_time || item.msgTime || item.time || item.ts
			if (!time) return ''
			if (typeof time === 'number') {
				const date = new Date(time)
				if (Number.isNaN(date.getTime())) return ''
				return this.formatDateTime(date)
			}
			if (typeof time === 'string') {
				const normalized = time.replace('T', ' ').replace(/\.\d+/, '')
				return normalized.length > 19 ? normalized.slice(0, 19) : normalized
			}
			return ''
		},

		parseReplyUserData(item) {
			if (!item) return {}
			if (item.data) {
				try {
					return typeof item.data === 'string' ? JSON.parse(item.data) : item.data
				} catch (e) {
					return {}
				}
			}
			return {}
		},

		getReplyUserContent(item) {
			if (!item) return ''
			const data = this.parseReplyUserData(item)
			return item.replyContent || data.replyContent || item.msg || ''
		},

		getReplyUserQuote(item) {
			if (!item?.userId || !this.talklist?.length) return ''
			for (let i = this.talklist.length - 1; i >= 0; i--) {
				const msg = this.talklist[i]
				if (msg.cmd !== 'replyUser' && String(msg.userId) === String(item.userId)) {
					return `${msg.nickName || '未命名'}：${msg.msg || ''}`
				}
			}
			return ''
		},

		formatDateTime(date) {
			const pad = (n) => String(n).padStart(2, '0')
			return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
		},

		scrollToBottom(force = false) {
			const now = Date.now()
			if (!force && now - this.lastScrollTime < this.scrollDebounceDelay) {
				return
			}
			this.lastScrollTime = now
			if (this.scrollTimer) {
				clearTimeout(this.scrollTimer)
				this.scrollTimer = null
			}
			this.$nextTick(() => {
				if (!this.talklist.length) {
					return
				}
				const lastMessage = this.talklist[this.talklist.length - 1]
				if (!lastMessage?.uniqueId) {
					return
				}
				this.scrollIntoView = ''
				this.$nextTick(() => {
					this.scrollIntoView = `list_${lastMessage.uniqueId}`
					this.scrollTop = (this._scrollTopSeed = (this._scrollTopSeed || 0) + 1) + 9999
					setTimeout(() => {
						this.scrollIntoView = ''
					}, 200)
				})
			})
		},

		forceScrollToBottomOnSend() {
			this.scrollToBottom(true)
		},

		onScroll(e) {
			this.currentScrollTop = e.detail.scrollTop
		},

		measureNoticeHeight() {
			const query = uni.createSelectorQuery().in(this)
			query.select('.notice-message').boundingClientRect(rect => {
				if (rect) {
					this.commonViewHeight = rect.height
					this.scrollToBottom(true)
				} else {
					this.commonViewHeight = ''
				}
			}).exec()
		},

		resetChatInputState() {
			if (this.chatInputBlurTimer) {
				clearTimeout(this.chatInputBlurTimer)
				this.chatInputBlurTimer = null
			}
			this.isFocus = false
			this.inputFocusActive = false
			this.keyboardHeightPx = 0
			this.$emit('keyboard-hide')
		},

		openChatInput() {
			if (this.isEnd) return
			if (this.chatInputBlurTimer) {
				clearTimeout(this.chatInputBlurTimer)
				this.chatInputBlurTimer = null
			}
			this.isFocus = true
			this.inputFocusActive = false
			this.$nextTick(() => {
				this.inputFocusActive = true
			})
			this.scrollToBottom(true)
		},

		inputFocus() {
			if (this.chatInputBlurTimer) {
				clearTimeout(this.chatInputBlurTimer)
				this.chatInputBlurTimer = null
			}
			this.$emit('keyboard-show')
			this.isFocus = true
			this.inputFocusActive = true
			this.scrollToBottom(true)
		},

		inputBlur() {
			if (this.chatInputBlurTimer) {
				clearTimeout(this.chatInputBlurTimer)
			}
			this.chatInputBlurTimer = setTimeout(() => {
				this.resetChatInputState()
				this.chatInputBlurTimer = null
			}, 200)
		},

		closeChatInput() {
			this.inputFocusActive = false
			uni.hideKeyboard()
			this.resetChatInputState()
		},

		async sendMsg(retries = 1) {
			if (this.isSending) return
			this.isSending = true
			setTimeout(() => {
				this.isSending = false
			}, 800)

			const text = (this.value || '').trim()
			if (!text) {
				uni.showToast({ title: '不能发送空消息', icon: 'none' })
				return
			}

			const socketReady = this.socketConnected
			if (!socketReady) {
				if (retries > 0) {
					uni.showToast({ title: `连接不稳定，正在重试（${retries}次）...`, icon: 'none' })
					await new Promise(r => setTimeout(r, 800))
					return this.sendMsg(retries - 1)
				} else {
					uni.showToast({ title: '连接已断开，发送失败', icon: 'none' })
					this.value = text
				}
				return
			}

			const data = {
				liveId: this.liveId,
				userId: this.userInfo?.userId,
				userType: 0,
				cmd: 'sendMsg',
				msg: text,
				nickName: this.userInfo?.nickname || '未命名',
				avatar: this.userInfo?.avatar ||
					'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/avatar.png'
			}
			this.value = ''

			try {
				if (this.myselfFlag) {
					this.appendMessage(data)
					this.closeChatInput()
				} else {
					await this.requestSendMessage(data)
					if (this.shouldAppendSocketMessage(data)) {
						this.appendMessage({ ...data, ts: Date.now() })
					}
					this.forceScrollToBottomOnSend()
					this.closeChatInput()
				}
			} catch (err) {
				console.error('消息发送失败:', err)
				if (retries > 0) {
					uni.showToast({ title: `发送失败，正在重试（${retries}次）`, icon: 'none' })
					setTimeout(() => this.sendMsg(retries - 1), 500)
				} else {
					uni.showToast({ title: '发送失败，请稍后再试', icon: 'none' })
					this.value = text
				}
			}
		},

		clickTabs(item) {
			this.$emit('click-tabs', item)
		},

		goComplaint() {
			uni.navigateTo({ url: '/pages_shopping/live/complaintList' })
		}
	}
}
</script>

<style lang="scss" scoped>
/* 横屏模式下需占满 .content 剩余高度，否则内部 flex 无法把输入框推到底 */
.live-chat-panel {
	width: 100%;

	&--horizontal {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;

		.chat-area-container {
			flex: 1;
			min-height: 0;
		}

		.chat-content-wrapper {
			flex: 1;
			height: 0;
			min-height: 120rpx;
		}
	}
}

.chat-area-container {
	background: var(--chat-bg);
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 999;
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	height: var(--chat-height, 32vh);
	max-height: var(--chat-height, 32vh);

	&.chat-area-container2 {
		flex: 1;
		min-height: 0;
		max-height: none;
		position: relative;
		transform: none;
		will-change: auto;
		overflow: hidden;
	}

	&.chat-area-container3 {
		height: calc(100% - 540rpx);
		flex: 1;
		max-height: none;
		transform: none;
		will-change: auto;
		position: absolute;
	}

	&.chat-area-container4 {
		height: calc(100% - 720rpx);
		flex: 1;
		max-height: none;
		transform: none;
		will-change: auto;
		position: absolute;
	}

	&.chat-area-focused {
		transform: translateY(calc(-1 * var(--keyboard-height, 0rpx))) translateZ(0);
		z-index: 1000;
	}

	.tabs_bg {
		background-color: #fff;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		flex-shrink: 0;

		.complaint-box {
			width: 120rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 2rpx solid #EEEEEE;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.chat-content-wrapper {
		flex: 1;
		min-height: 0;
		height: 0;
		position: relative;
		padding: 20rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;

		&.chat-content-trailer {
			min-height: 48vh;
		}

		.notice-message {
			position: absolute;
			bottom: 388rpx;
			width: calc(100% - 40rpx);
			padding: 20rpx 24rpx;
			margin: 10rpx 0 20rpx 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			background: #FFF1F2;
			border: 2rpx solid #FF233C;

			&.horizontal-notice,
			&.horizontal-notice2 {
				top: 12rpx;
				height: fit-content;
				z-index: 2;
			}

			.official-header {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;
			}

			.official-icon {
				border-radius: 50%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 12rpx;
				flex-shrink: 0;
			}

			.official-label {
				font-weight: 600;
				font-size: 36rpx;
				color: #FF233C;
				line-height: 50rpx;
			}

			.notice-text {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
			}

			.message-body {
				margin-bottom: 20rpx;
			}

			.message-time {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}
		}

		.message-scroll-view {
			width: calc(100% - 40rpx);
			height: 100%;
			min-height: 0;
			padding-left: 20rpx;
			box-sizing: border-box;
			-webkit-overflow-scrolling: touch;
		}

		.message-list {
			width: 100%;
			margin-bottom: 20rpx;
			animation: simpleFade 0.2s;

			.message-item {
				display: flex;
				justify-content: flex-start;

				.message-content {
					border-radius: 20rpx;
					padding: 20rpx 24rpx;
					display: flex;
					flex-direction: column;
					word-break: break-all;
					word-wrap: break-word;
					overflow-wrap: break-word;
				}

				.message-content-horizontal {
					width: 100%;
					background: #FFFFFF;
				}

				.message-content-vertical {
					width: 100%;
					background: var(--normal-bg);
				}
			}

			.message-user {
				.user-header {
					margin-bottom: 12rpx;
				}

				.user-nickname {
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
				}
			}

			.message-reply-official {
				.official-reply-card {
					width: 100%;
					padding: 20rpx 24rpx;
					border-radius: 20rpx;
					background: #FFF1F1;
					border: 2rpx solid #FF4D4F;
					display: flex;
					flex-direction: column;
					word-break: break-all;
					word-wrap: break-word;
					overflow-wrap: break-word;
				}

				.official-header {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;
				}

				.official-icon {
					border-radius: 50%;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 12rpx;
					flex-shrink: 0;
				}

				.official-label {
					font-weight: 600;
					font-size: 36rpx;
					color: #FF4D4F;
					line-height: 50rpx;
				}

				.message-body {
					margin-bottom: 16rpx;
				}

				.reply-content {
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
				}

				.original-message-quote {
					background: #FFFFFF;
					border-radius: 999rpx;
					padding: 16rpx 20rpx;
				}

				.quote-text {
					font-weight: 400;
					font-size: 32rpx;
					color: #666666;
					line-height: 44rpx;
				}
			}

			.message-body {
				margin-bottom: 20rpx;
			}

			.message-text {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
			}

			.message-time {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}
		}

		&.chat-content-vertical {
			.message-user {

				.user-nickname,
				.message-text,
				.message-time {
					color: #FFFFFF;
				}
			}
		}
	}

	.input-actions-container {
		flex-shrink: 0;
		flex-grow: 0;
		margin-top: auto;
		position: relative;
		z-index: 2;
		width: 100%;
		background-color: var(--bottom-color);
		padding: 30rpx 30rpx 68rpx 30rpx;
		box-sizing: border-box;

		.input-bar-normal {
			display: flex;
			align-items: center;
			gap: 24rpx;
			height: 100rpx;
			max-height: 100rpx;
		}

		.input-trigger {
			flex: 1;
			min-width: 0;
			height: 96rpx;
			max-height: 96rpx;
			background: var(--input-bg);
			border-radius: 36rpx;
			padding: 0 28rpx;
			display: flex;
			align-items: center;
		}

		.trigger-text {
			font-size: 32rpx;
			color: #999999;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;

			&.has-value {
				color: var(--text-color);
			}
		}

		.action-buttons {
			display: flex;
			align-items: center;
			gap: 32rpx;
			flex-shrink: 0;
		}

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-width: 80rpx;
		}

		.action-icon-img,
		.cart-icon-img {
			width: 80rpx;
			height: 80rpx;
		}

		.action-label {
			font-weight: 600;
			margin-top: 4rpx;
			font-size: 32rpx;
			color: var(--text-color);
			line-height: 44rpx;
		}
	}

	.input-keyboard-bar {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 1000000;
		background-color: var(--bottom-color);
		padding: 16rpx 24rpx;
		padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);

		.keyboard-input-wrap {
			display: flex;
			align-items: center;
			background: var(--input-bg);
			border-radius: 36rpx;
			padding: 8rpx 8rpx 8rpx 24rpx;
			gap: 16rpx;
		}

		.keyboard-chat-input {
			flex: 1;
			min-width: 0;
			height: 64rpx;
			font-size: 28rpx;
			color: var(--text-color);
			background: transparent;
		}

		.keyboard-send-button {
			flex-shrink: 0;
			padding: 12rpx 28rpx;
			background: #FF233C;
			color: #ffffff;
			border-radius: 28rpx;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 1.4;

			&.send-horizontal {
				background: #FF233C;
				color: #ffffff;
			}
		}
	}
}

@keyframes simpleFade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
</style>
