/* 棉花糖即时聊天工具 - 最终版本 */
/* 使用 mht- 前缀避免与任何现有样式冲突 */

/* 主容器 - 完全隔离的样式 */
.mht-live-chat-container {
    position: fixed !important;
    z-index: 2147483647 !important;
    bottom: 25px !important;
    right: 25px !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    direction: ltr !important;
    text-align: left !important;
    user-select: none !important;
}

/* 主聊天按钮 */
.mht-chat-main-button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: var(--mht-chat-theme-color, #25D366) !important;
    color: white !important;
    padding: 12px 16px !important;
    border-radius: 30px !important;
    padding: 12px 18px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: visible !important;
    min-width: 160px !important;
    max-width: 180px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    animation: mht-bounce 3s ease-in-out infinite !important;
}

.mht-chat-main-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
    background: linear-gradient(135deg, #25D366 0%, #0f6b5c 100%) !important;
}

.mht-chat-main-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 聊天图标 */
.mht-chat-icon {
    width: 24px !important;
    height: 24px !important;
    margin-right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    animation: mht-float 3s ease-in-out infinite !important;
}

.mht-chat-icon i {
    font-size: 18px !important;
    color: white !important;
    display: inline-block !important;
}

/* 聊天文本 */
.mht-chat-text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    text-align: left !important;
}

.mht-chat-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
}

.mht-chat-subtitle {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* 通知点 - 增强版 */
.mht-chat-notification-dot {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 20px !important;
    height: 20px !important;
    background: linear-gradient(135deg, #ff4444 0%, #ff6b6b 100%) !important;
    border-radius: 50% !important;
    animation: mht-pulse-enhanced 2s infinite !important;
    border: 3px solid white !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: white !important;
}

.mht-chat-notification-dot::after {
    content: "!" !important;
    display: block !important;
    animation: mht-shake 1s ease-in-out infinite !important;
}

/* 新消息提示气泡 */
.mht-chat-bubble {
    position: absolute !important;
    top: -35px !important;
    right: -10px !important;
    background: #ff4444 !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    animation: mht-bubble-bounce 2s ease-in-out infinite !important;
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3) !important;
}

.mht-chat-bubble::after {
    content: "" !important;
    position: absolute !important;
    bottom: -4px !important;
    right: 15px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid #ff4444 !important;
}

/* 聊天选项面板 */
.mht-chat-options-panel {
    position: absolute !important;
    bottom: 70px !important;
    right: 0 !important;
    width: 320px !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) scale(0.95) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    overflow: hidden !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
}

.mht-chat-options-panel.mht-show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* 面板头部 */
.mht-chat-options-header {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: white !important;
    padding: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mht-chat-options-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    flex: 1 !important;
}

.mht-chat-close-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: white !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.mht-chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: rotate(90deg) !important;
}

.mht-chat-close-btn i {
    font-size: 14px !important;
    color: white !important;
}

/* 面板内容 */
.mht-chat-options-content {
    padding: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 快速联系选项 */
.mht-quick-contact-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

/* 联系选项 */
.mht-contact-option {
    display: flex !important;
    align-items: center !important;
    padding: 16px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: 1px solid #f0f0f0 !important;
    background: #fafafa !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    color: inherit !important;
}

.mht-contact-option:hover {
    background: #f0f0f0 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* 选项图标 */
.mht-option-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.mht-email-option .mht-option-icon {
    background: linear-gradient(135deg, #ea4335 0%, #d33b2c 100%) !important;
}

.mht-whatsapp-option .mht-option-icon {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
}

.mht-form-option .mht-option-icon {
    background: linear-gradient(135deg, #4285f4 0%, #1a73e8 100%) !important;
}

.mht-option-icon i {
    font-size: 18px !important;
    color: white !important;
}

/* 选项内容 */
.mht-option-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    text-align: left !important;
}

.mht-option-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #333 !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
}

.mht-option-subtitle {
    font-size: 12px !important;
    color: #666 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* 在线状态 */
.mht-online-status {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    color: #666 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mht-status-indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.mht-status-indicator.mht-online {
    background: #4caf50 !important;
    animation: mht-pulse-green 2s infinite !important;
}

/* 动画 */
@keyframes mht-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes mht-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}

@keyframes mht-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes mht-pulse-enhanced {
    0% { 
        transform: scale(1); 
        opacity: 1; 
        box-shadow: 0 2px 8px rgba(255, 68, 68, 0.4), 0 0 0 0 rgba(255, 68, 68, 0.7);
    }
    50% { 
        transform: scale(1.3); 
        opacity: 0.8; 
        box-shadow: 0 4px 12px rgba(255, 68, 68, 0.6), 0 0 0 8px rgba(255, 68, 68, 0.3);
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
        box-shadow: 0 2px 8px rgba(255, 68, 68, 0.4), 0 0 0 0 rgba(255, 68, 68, 0);
    }
}

@keyframes mht-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

@keyframes mht-bubble-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.05); }
}

@keyframes mht-pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .mht-live-chat-container {
        bottom: 20px !important;
        right: 20px !important;
    }
    
    .mht-chat-main-button {
        min-width: 180px !important;
        padding: 12px 16px !important;
    }
    
    .mht-chat-options-panel {
        width: 280px !important;
        bottom: 60px !important;
    }
    
    .mht-chat-options-content {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .mht-live-chat-container {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .mht-chat-main-button {
        min-width: 160px !important;
        padding: 10px 14px !important;
    }
    
    .mht-chat-options-panel {
        width: calc(100vw - 30px) !important;
        max-width: 300px !important;
        right: 0 !important;
        bottom: 55px !important;
    }
}

/* 询价表单模态框 */
.mht-inquiry-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483646 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.mht-inquiry-modal.mht-modal-show {
    display: flex !important;
}

.mht-modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    animation: mht-fade-in 0.3s ease-out !important;
}

.mht-modal-container {
    position: relative !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    max-width: 650px !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    animation: mht-slide-up 0.3s ease-out !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.mht-modal-header {
    background: linear-gradient(135deg, var(--mht-chat-theme-color, #25D366) 0%, #128C7E 100%) !important;
    color: white !important;
    padding: 12px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: none !important;
    flex-shrink: 0 !important;
}

.mht-modal-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: white !important;
}

.mht-modal-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: white !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-size: 16px !important;
}

.mht-modal-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: rotate(90deg) !important;
}

.mht-modal-content {
    padding: 12px 16px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* 营销文案区域 */
.mht-modal-marketing {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.mht-modal-marketing p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

.mht-modal-marketing .mht-highlight {
    color: #25D366 !important;
    font-weight: 700 !important;
}

/* 重置表单样式以避免冲突 */
.mht-modal-content form {
    margin: 0 !important;
    padding: 0 !important;
}

.mht-modal-content input,
.mht-modal-content textarea,
.mht-modal-content select {
    width: 100% !important;
    padding: 8px 10px !important;
    border: 2px solid #e1e5e9 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
}

.mht-modal-content input:focus,
.mht-modal-content textarea:focus,
.mht-modal-content select:focus {
    outline: none !important;
    border-color: #25D366 !important;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
}

.mht-modal-content label {
    display: block !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 13px !important;
}

.mht-modal-content button[type="submit"] {
    background: linear-gradient(135deg, var(--mht-chat-theme-color, #25D366) 0%, #128C7E 100%) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    margin-top: 8px !important;
}

.mht-modal-content button[type="submit"]:hover {
    background: linear-gradient(135deg, #22c55e 0%, #0f6b5c 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
}

/* 模态框动画 */
@keyframes mht-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mht-slide-up {
    from { 
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 响应式设计 - 模态框 */
@media (max-width: 768px) {
    .mht-modal-container {
        width: 95% !important;
        max-height: 95vh !important;
        margin: 10px !important;
    }
    
    .mht-modal-header {
        padding: 16px 20px !important;
    }
    
    .mht-modal-marketing {
        padding: 12px 20px !important;
    }
    
    .mht-modal-content {
        padding: 20px !important;
    }
}