.container { display: flex; flex-direction: column; height: 100vh; background-color: #f5f5f5; } .header { padding: 20rpx; background-color: #007AFF; text-align: center; } .title { color: #ffffff; font-size: 36rpx; font-weight: bold; } .chat-container { flex: 1; padding: 20rpx; overflow: hidden; } .chat-messages { height: 100%; } .message { margin-bottom: 20rpx; padding: 20rpx; border-radius: 10rpx; max-width: 80%; word-break: break-word; } .message.user { align-self: flex-end; background-color: #007AFF; color: white; margin-left: auto; } .message.assistant { align-self: flex-start; background-color: #E5E5EA; color: #333; } .controls { padding: 20rpx; background-color: #ffffff; border-top: 1px solid #e0e0e0; } .voice-btn { width: 100%; height: 80rpx; line-height: 80rpx; text-align: center; background-color: #007AFF; color: white; border-radius: 40rpx; } .voice-btn.recording { background-color: #FF3B30; }