.chat-container.data-v-b15798f7 { display: flex; flex-direction: column; min-height: 100vh; width: 100vw; } .chat-messages.data-v-b15798f7 { width: 100%; padding: 30rpx 20rpx; padding-bottom: calc(220rpx + env(safe-area-inset-bottom)); box-sizing: border-box; flex: 1; } .message-item.data-v-b15798f7 { display: flex; width: 100%; box-sizing: border-box; margin-bottom: 30rpx; animation: fadeIn-b15798f7 0.3s ease-in; } .ai-message.data-v-b15798f7 { align-items: flex-start; } .ai-message .message-content-wrapper.data-v-b15798f7 { align-items: flex-start; } .ai-message .message-content.data-v-b15798f7 { background-color: #f5f5f5; color: #333; margin-left: 12rpx; margin-right: 0; flex-shrink: 0; } .ai-message .message-time.data-v-b15798f7 { color: #999; font-size: 22rpx; min-width: 80rpx; } .ai-message .message-meta.data-v-b15798f7 { display: flex; align-items: center; justify-content: flex-start; margin-top: 6rpx; gap: 8rpx; margin-left: 12rpx; flex-direction: row; } .ai-message .message-avatar.data-v-b15798f7 { margin-right: 0; flex-shrink: 0; } .user-message.data-v-b15798f7 { justify-content: flex-end; align-items: flex-start; } .user-message .message-content-wrapper.data-v-b15798f7 { align-items: flex-end; } .user-message .message-content.data-v-b15798f7 { background-color: #1c64f2; color: #fff; margin-right: 0; flex-shrink: 0; } .user-message .message-content .message-images.data-v-b15798f7 { margin-bottom: 20rpx; } .user-message .message-content .message-images .message-image-item.data-v-b15798f7 { border-radius: 8rpx; } .user-message .message-time.data-v-b15798f7 { color: #999; font-size: 22rpx; margin-top: 6rpx; text-align: right; min-width: 80rpx; } .user-message .message-meta.data-v-b15798f7 { display: flex; align-items: center; justify-content: flex-end; margin-top: 6rpx; gap: 8rpx; flex-direction: row; } @keyframes fadeIn-b15798f7 { from { opacity: 0; transform: translateY(10rpx); } to { opacity: 1; transform: translateY(0); } } .message-avatar.data-v-b15798f7 { width: 80rpx; height: 80rpx; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .message-avatar image.data-v-b15798f7 { width: 100%; height: 100%; } .message-avatar .user-avatar-image.data-v-b15798f7 { width: 100%; height: 100%; border-radius: 50%; } .message-avatar .user-avatar.data-v-b15798f7 { width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24rpx; font-weight: 500; } .message-content-wrapper.data-v-b15798f7 { display: flex; flex-direction: column; max-width: calc(100vw - 100rpx); } .message-content.data-v-b15798f7 { padding: 20rpx 24rpx; border-radius: 16rpx; font-size: 28rpx; line-height: 1.5; word-wrap: break-word; word-break: break-all; box-sizing: border-box; background-color: #1c64f2; } .message-content.loading.data-v-b15798f7 { opacity: 0.7; } .message-content.data-v-b15798f7:has(.message-images) { padding: 12rpx; } .user-message .message-content.data-v-b15798f7:has(.message-images) { padding: 8rpx; } .message-content view.data-v-b15798f7 { display: block; width: 100%; word-wrap: break-word; word-break: break-all; } .message-content view.data-v-b15798f7:not(:last-child) { margin-bottom: 8rpx; } .message-content text.data-v-b15798f7 { display: inline; word-wrap: break-word; word-break: break-all; } .quick-questions.data-v-b15798f7 { margin-top: 16rpx; display: flex; flex-direction: column; gap: 12rpx; padding-left: 12rpx; } .question-btn.data-v-b15798f7 { background-color: #f0f7ff; border: 1px solid #d0e3ff; border-radius: 12rpx; padding: 16rpx 20rpx; font-size: 26rpx; color: #1c64f2; line-height: 1.4; transition: all 0.2s ease; } .question-btn.data-v-b15798f7:active { background-color: #e6f2ff; transform: scale(0.98); } .question-btn text.data-v-b15798f7 { display: block; word-wrap: break-word; word-break: break-all; } .confirmation-buttons.data-v-b15798f7 { margin-top: 16rpx; display: flex; gap: 16rpx; justify-content: flex-start; padding-left: 12rpx; } .confirmation-btn.data-v-b15798f7 { width: 38rpx; border-radius: 10rpx; padding: 16rpx 22rpx; font-size: 24rpx; line-height: 1.4; text-align: center; transition: all 0.2s ease; background-color: #fff; color: #000; border: 1px solid #e5e5e5; } .confirmation-btn.data-v-b15798f7:active:not(.disabled) { transform: scale(0.98); } .confirmation-btn.selected.data-v-b15798f7 { background-color: #1c64f2; color: #fff; border-color: #1c64f2; } .confirmation-btn.disabled.data-v-b15798f7 { opacity: 0.6; cursor: not-allowed; } .confirmation-btn text.data-v-b15798f7 { display: block; font-weight: 500; } .chat-input-area.data-v-b15798f7 { position: fixed; bottom: 0; left: 0; right: 0; background-color: #f8f8f8; border-top: 1px solid #eee; padding: 20rpx 20rpx; padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); z-index: 100; } .input-container.data-v-b15798f7 { display: flex; align-items: center; background-color: #fff; border-radius: 50rpx; padding: 10rpx 20rpx; } .message-input.data-v-b15798f7 { flex: 1; height: 70rpx; font-size: 28rpx; padding: 0 20rpx; background-color: transparent; } .send-button.data-v-b15798f7 { width: 70rpx; height: 70rpx; background: linear-gradient(135deg, #1c64f2 0%, #0e4aa7 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 20rpx; } .send-button.disabled.data-v-b15798f7 { opacity: 0.5; pointer-events: none; } .upload-button.data-v-b15798f7 { width: 70rpx; height: 70rpx; background-color: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 20rpx; } .image-preview-area.data-v-b15798f7 { margin-bottom: 20rpx; } .quick-actions-bar.data-v-b15798f7 { display: flex; flex-wrap: wrap; gap: 16rpx; padding: 0 0 16rpx 0; } .quick-action-btn.data-v-b15798f7 { height: 60rpx; padding: 0 24rpx; background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 100rpx; font-size: 23rpx; color: #333333; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; white-space: nowrap; } .quick-action-btn.data-v-b15798f7:active { transform: scale(0.98); background-color: #f8f8f8; } .quick-action-btn text.data-v-b15798f7 { display: block; } .image-preview-list.data-v-b15798f7 { display: flex; flex-wrap: wrap; gap: 16rpx; } .image-preview-item.data-v-b15798f7 { position: relative; width: 120rpx; height: 120rpx; border-radius: 12rpx; overflow: hidden; } .image-preview-item.add-more-button.data-v-b15798f7 { background-color: #f5f5f5; border: 2rpx dashed #ddd; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } .image-preview-item.add-more-button.data-v-b15798f7:active { background-color: #e8e8e8; } .preview-image.data-v-b15798f7 { width: 100%; height: 100%; } .add-more-text.data-v-b15798f7 { font-size: 22rpx; color: #999; margin-top: 8rpx; } .remove-image.data-v-b15798f7 { position: absolute; top: 8rpx; right: 8rpx; width: 40rpx; height: 40rpx; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .message-images.data-v-b15798f7 { display: flex; flex-wrap: wrap; gap: 12rpx; margin-bottom: 12rpx; max-width: 500rpx; } .user-message .message-images.data-v-b15798f7 { margin-bottom: 0; } .message-image-item.data-v-b15798f7 { border-radius: 12rpx; overflow: hidden; } .message-image-item.single-image.data-v-b15798f7 { max-width: 500rpx; width: 500rpx !important; height: auto !important; } .user-message .message-image-item.single-image.data-v-b15798f7 { max-width: 450rpx; width: 450rpx !important; } .message-image-item.data-v-b15798f7:not(.single-image) { width: 200rpx; height: 200rpx; } .message-image.data-v-b15798f7 { width: 100%; height: 100%; display: block; } .message-text-line.data-v-b15798f7 { margin-bottom: 4rpx; } .message-text-line.data-v-b15798f7:last-child { margin-bottom: 0; } .copy-button.data-v-b15798f7 { width: 32rpx; height: 32rpx; display: flex; align-items: center; justify-content: center; border-radius: 4rpx; transition: background-color 0.2s ease; } .copy-button.data-v-b15798f7:active { background-color: rgba(0, 0, 0, 0.05); } .copy-button .copy-icon.data-v-b15798f7 { width: 26rpx; height: 26rpx; opacity: 0.7; }