/* 聊天窗口样式 */
.chat-widget {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: all 0.3s ease;
}

/* 聊天头部样式 */
.chat-header {
    user-select: none;
}

.chat-header:hover {
    background-color: #2563eb;
}

/* 聊天消息区域样式 */
.chat-messages {
    font-size: 14px;
    line-height: 1.4;
}

/* 消息样式 */
.message {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 用户消息样式 */
.user-message .bg-blue-600 {
    background-color: #2563eb;
}

.user-message .bg-blue-600:hover {
    background-color: #1d4ed8;
}

/* 其他消息样式 */
.other-message .bg-gray-200 {
    background-color: #e5e7eb;
}

.other-message .bg-gray-200:hover {
    background-color: #d1d5db;
}

/* 输入框样式 */
.chat-input input {
    font-size: 14px;
    color: #1D2129; /* 明确设置文字颜色 */
    background-color: white; /* 明确设置背景颜色 */
}

.chat-input input:focus {
    border-color: #2563eb;
    color: #1D2129; /* 确保聚焦时文字颜色保持可见 */
}

/* 发送按钮样式 */
#send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

#send-btn:not(:disabled):hover {
    background-color: #1d4ed8;
}

/* 浮动按钮样式 */
.chat-floating-btn {
    animation: pulse 2s infinite;
    transition: all 0.3s ease;
}

.chat-floating-btn:hover {
    animation: none;
    transform: scale(1.1);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 640px) {
    .chat-widget {
        width: 90vw !important;
        max-width: none !important;
        bottom: 2px !important;
        right: 2px !important;
        left: 2px !important;
    }
    
    .chat-floating-btn {
        width: 12vw !important;
        height: 12vw !important;
        bottom: 4vw !important;
        right: 4vw !important;
    }
    
    .chat-messages {
        height: 60vh !important;
    }
}

@media (max-width: 480px) {
    .chat-floating-btn {
        width: 15vw !important;
        height: 15vw !important;
    }
}