.chat_container_linear_gradient { position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100vh; background: linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, rgba(255, 255, 255, 0) 300rpx), linear-gradient(159deg, #d3d7ff 0%, rgba(255, 255, 255, 0) 150rpx), linear-gradient(188deg, #dffff3 -8%, #f7f7f7 300rpx); background-repeat: no-repeat; } .chat_messages_body { position: relative; z-index: 100; } .chat_messages_body .login_btn { padding: 0 50rpx; } .chat-container { display: flex; flex-direction: column; min-height: 100vh; width: 100vw; } .chat-messages { width: 100%; padding: 0 30rpx; padding-top: 314rpx; padding-bottom: calc(260rpx + env(safe-area-inset-bottom)); box-sizing: border-box; flex: 1; } .chat-messages-chat { padding-bottom: calc(160rpx + env(safe-area-inset-bottom)); } .message-item { display: flex; width: 100%; box-sizing: border-box; margin-bottom: 30rpx; animation: fadeIn 0.3s ease-in; } .ai-message { align-items: flex-start; } .ai-message .message-content-wrapper { align-items: flex-start; } .ai-message .message-content { background-color: #fff; color: #333; margin-left: 12rpx; margin-right: 0; flex-shrink: 0; } .ai-message .message-time { color: #999; font-size: 22rpx; min-width: 80rpx; } .ai-message .message-meta { display: flex; align-items: center; justify-content: flex-start; margin-top: 6rpx; gap: 8rpx; margin-left: 12rpx; flex-direction: row; } .ai-message .message-avatar { margin-right: 0; flex-shrink: 0; } .user-message { justify-content: flex-end; align-items: flex-start; } .user-message .message-content-wrapper { align-items: flex-end; } .user-message .message-content { background-color: #1c64f2; color: #fff; margin-right: 0; flex-shrink: 0; } .user-message .message-content .message-images { margin-bottom: 20rpx; } .user-message .message-content .message-images .message-image-item { border-radius: 8rpx; } .user-message .message-time { color: #999; font-size: 22rpx; margin-top: 6rpx; text-align: right; min-width: 80rpx; } .user-message .message-meta { display: flex; align-items: center; justify-content: flex-end; margin-top: 6rpx; gap: 8rpx; flex-direction: row; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10rpx); } to { opacity: 1; transform: translateY(0); } } .message-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .message-avatar image { width: 100%; height: 100%; } .message-avatar .user-avatar-image { width: 100%; height: 100%; border-radius: 50%; } .message-avatar .user-avatar { 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 { display: flex; flex-direction: column; max-width: calc(100vw - 100rpx); } .message-content { 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 { opacity: 0.7; } .message-content:has(.message-images) { padding: 12rpx; } .user-message .message-content:has(.message-images) { padding: 8rpx; } .message-content view { display: block; width: 100%; word-wrap: break-word; word-break: break-all; } .message-content view:not(:last-child) { margin-bottom: 8rpx; } .message-content text { display: inline; word-wrap: break-word; word-break: break-all; } .quick-questions { margin-top: 16rpx; display: flex; flex-direction: column; gap: 12rpx; padding-left: 12rpx; } .question-btn { 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:active { background-color: #e6f2ff; transform: scale(0.98); } .question-btn text { display: block; word-wrap: break-word; word-break: break-all; } .confirmation-buttons { margin-top: 16rpx; display: flex; gap: 16rpx; justify-content: flex-start; padding-left: 12rpx; } .confirmation-btn { 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:active:not(.disabled) { transform: scale(0.98); } .confirmation-btn.selected { background-color: #1c64f2; color: #fff; border-color: #1c64f2; } .confirmation-btn.disabled { opacity: 0.6; cursor: not-allowed; } .confirmation-btn text { display: block; font-weight: 500; } .chat-input-area { position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; border-top: 1px solid #f8f8f8; padding: 20rpx 20rpx; padding-bottom: calc(155rpx + env(safe-area-inset-bottom)); z-index: 100; } .chat-input-area-chat { padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); } .input-container { display: flex; align-items: center; background-color: #f7f7f7; border-radius: 50rpx; padding: 10rpx 20rpx; } .message-input { flex: 1; height: 70rpx; font-size: 28rpx; padding: 0 20rpx; background-color: transparent; } .send-button { 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 { opacity: 0.5; pointer-events: none; } .upload-button { width: 70rpx; height: 70rpx; background-color: #f7f7f7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 20rpx; } .image-preview-area { margin-bottom: 20rpx; } .quick-actions-bar { display: flex; flex-wrap: wrap; gap: 16rpx; padding: 0 0 16rpx 0; } .quick-action-btn { 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:active { transform: scale(0.98); background-color: #f8f8f8; } .quick-action-btn text { display: block; } .image-preview-list { display: flex; flex-wrap: wrap; gap: 16rpx; } .image-preview-item { position: relative; width: 120rpx; height: 120rpx; border-radius: 12rpx; overflow: hidden; } .image-preview-item.add-more-button { 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:active { background-color: #e8e8e8; } .preview-image { width: 100%; height: 100%; } .add-more-text { font-size: 22rpx; color: #999; margin-top: 8rpx; } .remove-image { 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 { display: flex; flex-wrap: wrap; gap: 12rpx; margin-bottom: 12rpx; max-width: 500rpx; } .user-message .message-images { margin-bottom: 0; } .message-image-item { border-radius: 12rpx; overflow: hidden; } .message-image-item.single-image { max-width: 500rpx; width: 500rpx !important; height: auto !important; } .user-message .message-image-item.single-image { max-width: 450rpx; width: 450rpx !important; } .message-image-item:not(.single-image) { width: 200rpx; height: 200rpx; } .message-image { width: 100%; height: 100%; display: block; } .message-text-line { margin-bottom: 4rpx; } .message-text-line:last-child { margin-bottom: 0; } .copy-button { width: 32rpx; height: 32rpx; display: flex; align-items: center; justify-content: center; border-radius: 4rpx; transition: background-color 0.2s ease; } .copy-button:active { background-color: rgba(0, 0, 0, 0.05); } .copy-button .copy-icon { width: 26rpx; height: 26rpx; opacity: 0.7; } .opening_remarks { padding: 30rpx 30rpx 10rpx 30rpx; z-index: 1000; position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, rgba(255, 255, 255, 0) 300rpx), linear-gradient(159deg, #d3d7ff 0%, rgba(255, 255, 255, 0) 150rpx), linear-gradient(188deg, #dffff3 -8%, #f7f7f7 300rpx); background-repeat: no-repeat; } .opening_remarks .opening_remarks_body { height: 254rpx; border-radius: 20rpx; border: 1px solid #ffffff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; background: linear-gradient(58deg, #e3faff 1%, rgba(255, 255, 255, 0) 24%), linear-gradient(221deg, #dbe3ff 0%, rgba(255, 255, 255, 0) 19%), rgba(255, 255, 255, 0.5); } .opening_remarks .opening_remarks_body .opening_remarks_server_img { width: 56rpx; height: 224rpx; margin: 0 40rpx; } .opening_remarks .opening_remarks_body .opening_remarks_server_img image { width: 56rpx; height: 224rpx; } .opening_remarks .opening_remarks_body .opening_remarks_server_info { flex: 1; padding-right: 30rpx; } .opening_remarks .opening_remarks_body .label { font-size: 28rpx; color: #333; overflow: hidden; white-space: nowrap; width: 0; display: inline-block; animation: typing 3s steps(30, end) forwards, blink 0.75s step-end infinite; } .opening_remarks .opening_remarks_body .group_btn { display: flex; align-items: center; flex-wrap: wrap; overflow: hidden; height: 160rpx; } .opening_remarks .opening_remarks_body .group_btn_item { background-color: #fff; border-radius: 100rpx; font-size: 24rpx; color: #333333; padding: 15rpx 25rpx; margin-top: 15rpx; margin-right: 30rpx; } .opening_remarks .opening_remarks_body .group_btn_item:nth-child(3n) { margin-right: 0; } @keyframes typing { from { width: 0; } to { width: 100%; } }