<template>
	<view class="assistant-container">
		<view class="header">
			<text class="title">AI助手</text>
		</view>
		
		<view class="chat-area">
			<view class="welcome-message">
				<text class="welcome-text">您好！我是您的宠物AI助手</text>
				<text class="welcome-desc">可以为您解答宠物饲养、健康、训练等问题</text>
			</view>
		</view>
		
		<view class="input-area">
			<input class="message-input" placeholder="请输入您的问题..." />
			<view class="send-btn">
				<text class="send-text">发送</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	}
}
</script>

<style lang="scss" scoped>
.assistant-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f8f9fa;
}

.header {
	padding: 20rpx 30rpx;
	background-color: white;
	border-bottom: 1rpx solid #eee;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.chat-area {
	flex: 1;
	padding: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.welcome-message {
	text-align: center;
	
	.welcome-text {
		font-size: 32rpx;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.welcome-desc {
		font-size: 26rpx;
		color: #666;
		display: block;
	}
}

.input-area {
	background-color: white;
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #eee;
	display: flex;
	align-items: center;
	
	.message-input {
		flex: 1;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
	}
	
	.send-btn {
		background-color: #4ecdc4;
		padding: 20rpx 40rpx;
		border-radius: 30rpx;
		
		.send-text {
			color: white;
			font-size: 28rpx;
		}
	}
}
</style>
