/* 聊天图标样式 */ .chat-icon-container { position: fixed; bottom: 30px; right: 30px; z-index: 9999; cursor: pointer; } .chat-icon { width: 60px; height: 60px; /* background-color: #165DFF; */ border-radius: 50%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; transition: all 0.3s ease; } .chat-icon:hover { transform: scale(1.05); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2); } /* 气泡提示动画 */ @keyframes bubble-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(22, 93, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0); } } .bubble-pulse { animation: bubble-pulse 1s infinite; } /* 聊天对话框样式 */ .chat-dialog { position: fixed; bottom: 100px; right: 50px; width: 550px; max-width: calc(100% - 60px); background-color: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); overflow: hidden; display: none; flex-direction: column; height: 600px; transform-origin: bottom right; transform: scale(0.8); opacity: 0; transition: all 0.3s ease; } .chat-dialog.open { display: flex; transform: scale(1); opacity: 1; } .chat-header { /* background: linear-gradient(135deg, #a8c0ff 0%, #3f87a6 100%);; */ background: linear-gradient(to top, #a1c4fd 0%, #c2e9fb 100%); color: white; padding: 16px; display: flex; justify-content: space-between; align-items: center; } .chat-title { font-size: 18px; font-weight: 500; } .close-chat { cursor: pointer; font-size: 20px; transition: transform 0.2s ease; } .close-chat:hover { transform: rotate(90deg); } .chat-content { flex: 1; padding: 16px; overflow-y: auto; background-color: #F5F7FA; } .chat-footer { padding: 12px 16px; border-top: 1px solid #E5E6EB; display: flex; justify-content: center; align-items: center; } /* 语音输入按钮 */ .voice-input-container { display: flex; justify-content: center; margin-top: 20px; } .voice-input-btn { width: 50px; height: 50px; /* background-color: #165DFF; */ /* background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); */ background: linear-gradient(to top, #a1c4fd 0%, #c2e9fb 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; cursor: pointer; box-shadow: 0 4px 10px rgba(22, 93, 255, 0.3); transition: all 0.3s ease; position: relative; } .voice-input-btn:hover { /* background: linear-gradient(135deg, #f5f7fa 0%, #e4ecff 100%); */ box-shadow: 0 6px 15px rgba(22, 93, 255, 0.4); } .voice-input-btn.active { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(22, 93, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0); } } /* 语音识别状态显示 */ .voice-status { margin-top: 10px; text-align: center; font-size: 14px; color: #666; min-height: 20px; } /* 聊天消息样式 */ .message { margin-bottom: 15px; display: flex; } .message.bot { justify-content: flex-start; } .message.user { justify-content: flex-end; } .message-content { padding: 10px 15px; border-radius: 18px; max-width: 80%; } .message.bot .message-content { background-color: white; border-radius: 18px 18px 18px 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .message.user .message-content { /* background-color: #165DFF; */ background: linear-gradient(to top, #a1c4fd 0%, #c2e9fb 100%); /* color: white; */ border-radius: 18px 18px 0 18px; } /* 打字动画 */ .typing-indicator { display: flex; align-items: center; padding: 10px 15px; } .typing-indicator span { height: 8px; width: 8px; margin: 0 2px; background-color: #9E9EA1; border-radius: 50%; display: inline-block; animation: typing-bounce 1.4s infinite ease-in-out both; } .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } @keyframes typing-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }