/* ===== 统一固定按钮组件 ===== */

/* 固定按钮容器 */
.fixed-buttons-container {
    position: fixed;
    right: 20px;
    bottom: 200px; /* 向上移动20px */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    /* 确保容器不会裁剪徽章 */
    overflow: visible;
    padding: 15px; /* 为徽章留出空间 */
    margin: -15px; /* 抵消padding对布局的影响 */
}

/* 按钮基础样式 */
.fixed-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
    /* 移除overflow: hidden，避免遮挡徽章 */
}

.fixed-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.fixed-btn:active {
    transform: translateY(0);
}

/* 回到顶部按钮 */
.back-to-top-btn {
    background: linear-gradient(135deg, #EB6630, #ff7f50);
    color: white;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background: linear-gradient(135deg, #D45520, #e6693d);
}

/* 客服按钮 */
.chat-btn {
    background: linear-gradient(135deg, #f58220, #ff9447);
    color: white;
    animation: pulse 2s infinite;
}

.chat-btn:hover {
    background: linear-gradient(135deg, #e57310, #f48033);
    animation: none;
}

.chat-btn.flash {
    animation: flash 0.8s ease-in-out;
}

/* 按钮图标包装器 */
.btn-icon-wrapper {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* SVG图标样式 */
.btn-icon {
    width: 26px;
    height: 26px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* 悬停时的图标效果 */
.fixed-btn:hover .btn-icon-wrapper {
    transform: scale(1.1) rotate(3deg);
}

.fixed-btn:hover .btn-icon {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 客服图标特殊效果 */
.chat-btn:hover .chat-icon {
    animation: wiggle 0.6s ease-in-out;
}

/* 回到顶部图标特殊效果 */
.back-to-top-btn:hover .top-icon {
    transform: translateY(-2px);
}

/* 摇摆动画 */
@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}

/* 提示标签 */
.btn-tooltip {
    position: absolute;
    right: 65px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

.btn-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.8);
}

.fixed-btn:hover .btn-tooltip {
    opacity: 1;
    visibility: visible;
}

/* 聊天徽章 - 确保不被遮挡 */
.chat-badge {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    background: linear-gradient(135deg, #ff4757, #ff3742) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10000 !important; /* 极高的层级确保显示 */
    border: 3px solid white !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    pointer-events: none; /* 避免阻挡按钮点击 */
}

.chat-badge.active {
    opacity: 1 !important;
    transform: scale(1) !important;
    visibility: visible !important;
    display: flex !important;
}

/* 徽章额外保障规则已整合到主要样式中 */

/* 动画效果 */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(245, 130, 32, 0.4);
    }
    50% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 10px rgba(245, 130, 32, 0);
    }
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .fixed-buttons-container {
        right: 15px;
        bottom: 35px; /* 向上调整 */
        gap: 12px;
    }
    
    .fixed-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .btn-tooltip {
        right: 60px;
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .btn-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .fixed-buttons-container {
        right: 12px;
        bottom: 25px; /* 向上调整 */
        gap: 10px;
    }
    
    .fixed-btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
    
    .btn-tooltip {
        right: 55px;
        font-size: 10px;
        padding: 5px 8px;
    }
    
    .chat-badge {
        width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
        top: -8px !important;
        right: -8px !important;
        border-width: 2px !important;
        z-index: 10000 !important;
    }
    
    .btn-icon {
        width: 18px;
        height: 18px;
    }
}

/* 聊天窗口打开时的按钮状态 */
.chat-btn.active {
    background: linear-gradient(135deg, #e57310, #d6670f);
    transform: scale(0.95);
}

/* 按钮进入动画 */
.fixed-btn {
    animation: slideInRight 0.6s ease-out;
}

.chat-btn {
    animation-delay: 0.1s; /* 客服按钮先出现 */
}

.back-to-top-btn {
    animation-delay: 0.2s; /* 回到顶部按钮稍后出现 */
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 深色模式适配（如果需要） */
@media (prefers-color-scheme: dark) {
    .btn-tooltip {
        background: rgba(255, 255, 255, 0.9);
        color: #333;
    }
    
    .btn-tooltip::after {
        border-left-color: rgba(255, 255, 255, 0.9);
    }
}