/* ================= 悬浮按钮 ================= */
.float-btn {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, 0); /* JS 会接管 */
    visibility: hidden; /* 初始化完成前先隐藏，避免闪烁 */
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
    cursor: grab;
    z-index: 9999;
    outline: none;
    /* 关键：避免拖拽过程中选中文字 / 触发浏览器原生拖拽 */
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
    /* 注意：这里不要给 transform 加 transition，否则拖拽会“拖影” */
    transition: box-shadow .2s ease, filter .2s ease;
}

    .float-btn.is-ready {
        visibility: visible;
    }

    .float-btn.is-dragging {
        cursor: grabbing;
        filter: brightness(1.06);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
    }

    .float-btn svg {
        display: block;
        width: 24px;
        height: 24px;
        pointer-events: none; /* 图标不参与事件，保证事件目标始终是按钮 */
    }

    .float-btn .hover {
        position: absolute;
        left: -160px;
        top: 3px;
        width: 150px;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        padding: 5px;
        text-align: center;
        color: #333;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s 0s, opacity 0s;
    }

    .float-btn.left .slide-animation {
        left: 60px;
    }

    .float-btn:hover .hover {
        visibility: visible;
        opacity: 1;
        transition: visibility 0s 0s, opacity 0s;
    }

    .float-btn:hover.right .slide-animation {
        -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    .float-btn:hover.left .slide-animation {
        -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    /* ----------------------------------------------
 * Generated by Animista on 2026-10-8 9:13:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
    /**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
    @-webkit-keyframes slide-left {
        0% {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slide-left {
    0% {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}