/* ========================================
   客服按钮 - 小蜜阅读现代化重新设计
   温暖金色主题，蜜蜂风格
   ======================================== */

/* ===== 1. 客服悬浮按钮 - 温暖金色主题 ===== */
.customer-service-btn {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 64px !important;
    height: 64px !important;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(255, 165, 0, 0.4), 0 0 0 0 rgba(255, 215, 0, 0.4) !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: honeycomb-pulse 2.5s ease-in-out infinite !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

.customer-service-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.customer-service-btn:hover::before {
    opacity: 1 !important;
}

.customer-service-btn:hover {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 6px 30px rgba(255, 165, 0, 0.6), 0 0 0 8px rgba(255, 215, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.customer-service-btn:active {
    transform: scale(0.95) !important;
}

/* 更换图标为蜜蜂emoji或headset图标 */
.customer-service-btn i {
    color: #ffffff !important;
    font-size: 28px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease !important;
}

.customer-service-btn:hover i {
    transform: scale(1.1) !important;
}

/* 如果要使用emoji蜜蜂图标 */
.customer-service-btn .bee-icon {
    font-size: 32px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* ===== 2. 蜂巢脉冲动画 - 更柔和 ===== */
@keyframes honeycomb-pulse {
    0% {
        box-shadow: 0 4px 20px rgba(255, 165, 0, 0.4), 0 0 0 0 rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 6px 25px rgba(255, 165, 0, 0.5), 0 0 0 12px rgba(255, 215, 0, 0.15);
    }
    100% {
        box-shadow: 0 4px 20px rgba(255, 165, 0, 0.4), 0 0 0 0 rgba(255, 215, 0, 0.4);
    }
}

/* ===== 3. 客服状态指示器 - 金色主题 ===== */
.service-status {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    animation: status-blink 2s ease-in-out infinite !important;
}

.service-status.online {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
}

.service-status.offline {
    background: linear-gradient(135deg, #FF6B6B 0%, #EE5A6F 100%) !important;
}

@keyframes status-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* ===== 4. 悬浮文字提示 ===== */
.customer-service-btn::after {
    content: '在线客服' !important;
    position: absolute !important;
    right: 75px !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(10px) !important;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.customer-service-btn:hover::after {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
}

/* ===== 5. 响应式设计 ===== */
@media (max-width: 768px) {
    .customer-service-btn {
        width: 56px !important;
        height: 56px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
    
    .customer-service-btn i {
        font-size: 24px !important;
    }
    
    .customer-service-btn .bee-icon {
        font-size: 28px !important;
    }
    
    .service-status {
        width: 16px !important;
        height: 16px !important;
        border-width: 2px !important;
    }
    
    /* 移动端不显示文字提示 */
    .customer-service-btn::after {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .customer-service-btn {
        width: 50px !important;
        height: 50px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
    
    .customer-service-btn i {
        font-size: 22px !important;
    }
    
    .customer-service-btn .bee-icon {
        font-size: 26px !important;
    }
}

/* ===== 6. 特殊效果 - 六边形蜂巢样式（可选） ===== */
.customer-service-btn.hexagon {
    border-radius: 0 !important;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%) !important;
}

/* ===== 7. 辅助功能 ===== */
.customer-service-btn:focus {
    outline: 3px solid rgba(255, 215, 0, 0.5) !important;
    outline-offset: 3px !important;
}

/* ===== 8. 暗色模式支持（预留） ===== */
@media (prefers-color-scheme: dark) {
    .customer-service-btn {
        background: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%) !important;
        box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4), 0 0 0 0 rgba(245, 158, 11, 0.4) !important;
    }
    
    .customer-service-btn:hover {
        box-shadow: 0 6px 30px rgba(245, 158, 11, 0.6), 0 0 0 8px rgba(245, 158, 11, 0.2) !important;
    }
}

/* ===== 9. 打印样式 ===== */
@media print {
    .customer-service-btn {
        display: none !important;
    }
}

/* ===== 10. 加载状态 ===== */
.customer-service-btn.loading {
    pointer-events: none !important;
}

.customer-service-btn.loading i {
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===== 11. 未读消息提示 ===== */
.customer-service-btn .unread-badge {
    position: absolute !important;
    top: -5px !important;
    left: -5px !important;
    background: #FF4444 !important;
    color: white !important;
    border-radius: 10px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    min-width: 20px !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(255, 68, 68, 0.4) !important;
    animation: badge-bounce 0.5s ease-in-out !important;
}

@keyframes badge-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}