/* ===================================
   右侧悬浮工具栏样式
   =================================== */

/* 悬浮工具栏容器 */
.side-toolbar {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 单个工具按钮 */
.side-tool {
    position: relative;
    width: 48px;
    height: 48px;
    background: #10B981;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    font-size: 20px;
    border: none;
    outline: none;
}

.side-tool:hover {
    background: #059669;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

/* 企业微信按钮使用科技蓝 */
.side-tool.tool-wecom {
    background: #0EA5E9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.side-tool.tool-wecom:hover {
    background: #0284C7;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}

/* 返回顶部按钮（默认隐藏，滚动后显示） */
.side-tool.tool-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}
.side-tool.tool-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 弹出面板（电话、二维码） */
.side-popup {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
}

/* 三角箭头 */
.side-popup::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
}

/* 鼠标悬浮时显示弹出面板 */
.side-tool:hover .side-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

/* 电话号码样式 */
.side-popup .phone-text {
    color: #10B981;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
}

/* 二维码容器 */
.side-popup .qrcode-box {
    text-align: center;
}
.side-popup .qrcode-box img {
    max-width: 130px;
    max-height: 130px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto 8px;
    border-radius: 8px;
}
.side-popup .qrcode-box p {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .side-toolbar {
        right: 12px;
        bottom: 70px;
        gap: 8px;
    }
    .side-tool {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .side-popup {
        right: 56px;
        padding: 10px 12px;
    }
    .side-popup .qrcode-box img {
        width: 110px;
        height: 110px;
    }
}