/* 在线客服聊天组件样式 */
.chat-widget {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* 保证默认堆叠层级（计算器使用更高 z-index） */
    z-index: 100;
    position: fixed; /* 聊天组件也固定到视口，便于使用变量对齐 */
    right: var(--floating-right, 1.5rem);
    bottom: var(--chat-bottom-mobile, 1.5rem);
}

/* 最小化状态 */
#chatMinimized {
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 将最小化按钮设为 fixed，使用相同的变量确保与计算器对齐 */
    position: fixed;
    right: var(--floating-right, 1.5rem);
    bottom: var(--chat-bottom-mobile, 1.5rem);
    width: var(--touch-size, 56px);
    height: var(--touch-size, 56px);
    min-width: var(--touch-size, 56px);
    min-height: var(--touch-size, 56px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 100; /* 保证位于计算器下方 */
}

/* 触控目标和可访问性 */
#chatMinimized {
    /* 保持前面定义的尺寸与定位一致（重复声明以兼容不同浏览器解析顺序） */
    min-width: var(--touch-size, 56px);
    min-height: var(--touch-size, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#chatMinimized:focus,
#chatMinimized:focus-visible,
#chatWindow:focus,
#chatWindow:focus-visible {
    outline: 3px solid rgba(59,130,246,0.18);
    outline-offset: 3px;
}

#chatMinimized:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* 聊天窗口 */
#chatWindow {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    z-index: 100; /* 明确 window 的 z-index */
}

/* 消息区域 */
#chatMessages {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

#chatMessages::-webkit-scrollbar {
    width: 6px;
}

#chatMessages::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 3px;
}

#chatMessages::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

#chatMessages::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* 消息气泡 */
#chatMessages .bg-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

#chatMessages .bg-blue-100 {
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

/* 输入框 */
#chatInput:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 快捷问题按钮 */
.quick-question {
    transition: all 0.2s ease;
}

.quick-question:hover {
    transform: translateY(-1px);
}

/* 未读消息徽章 */
#unreadBadge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* 响应式设计 */
@media (max-width: 640px) {
    .chat-widget {
        /* 使用与计算器相同的变量（若已在全局 :root 定义） */
        right: var(--floating-right, 1.5rem) !important;
        bottom: var(--chat-bottom-mobile, 1.5rem) !important;
    }
    
    #chatWindow {
        width: calc(100vw - 2rem) !important;
        height: 80vh !important;
        max-height: 500px !important;
    }
}

/* 动画效果 */
.chat-widget {
    animation: slideInUp 0.5s ease-out;
}

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

/* 消息进入动画 */
#chatMessages > div:last-child {
    animation: messageSlideIn 0.3s ease-out;
}

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