/* 容器：基础定位 */
.float-btn-container {
    position: fixed;
    z-index: 9999;
    display: block;
}

/* 新增：仅移动端显示控制（核心样式） */
/* 默认全设备显示，若有float-btn-only-mobile类，则PC端隐藏 */
@media (min-width: 768px) { /* 768px以上视为PC端 */
    .float-btn-only-mobile {
        display: none !important; /* PC端强制隐藏 */
    }
}
/* 移动端正常显示（768px以下） */
@media (max-width: 767px) {
    .float-btn-only-mobile {
        display: block !important;
    }
}

/* 仅保留左下/右下位置 */
.float-btn-right-bottom {
    right: 30px;
    bottom: 30px;
}
.float-btn-left-bottom {
    left: 30px;
    bottom: 30px;
}

/* 主按钮：纯透明背景 */
.float-main-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative; /* 为子按钮提供定位上下文 */
    z-index: 2;
}
.float-icon-main {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background-color: transparent;
}
.float-main-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: scale(1.05);
}
.float-main-btn.active {
    transform: rotate(45deg);
}

/* 子按钮：纯透明背景+均匀环绕 */
.float-sub-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 
     * 核心改动：统一所有子按钮的初始定位基准点为主按钮中心
     * 1. position: absolute 相对于 .float-main-btn (因为它是相对定位的父元素)
     * 2. top: 50%, left: 50% 将子按钮的左上角移动到主按钮中心
     * 3. transform: translate(-50%, -50%) 将子按钮自身中心对齐到主按钮中心
    */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.float-icon-sub {
    width: 36px;
    height: 36px;
    object-fit: contain;
    background-color: transparent;
}
.float-sub-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 激活状态：子按钮环绕 */
.float-btn-container.active .float-sub-btn {
    opacity: 1;
    visibility: visible;
}

/* --- 核心改动：环绕布局 --- */

/* 定义一个变量来控制弧形的半径，方便调整 */
:root {
    --float-btn-radius: 70px; /* 子按钮中心到主按钮中心的距离 */
}

/* 1. 右下角布局（主按钮在右，子按钮向左上环绕） */
.float-btn-right-bottom.active .float-sub-btn-1 {
    /* 子按钮1：正上方 */
    transform: translate(-50%, -50%) translateY(calc(-1 * var(--float-btn-radius)));
}
.float-btn-right-bottom.active .float-sub-btn-2 {
    /* 子按钮2：左上方，约45度角 */
    transform: translate(-50%, -50%) translate(calc(-0.707 * var(--float-btn-radius)), calc(-0.707 * var(--float-btn-radius)));
}
.float-btn-right-bottom.active .float-sub-btn-3 {
    /* 子按钮3：正左方 */
    transform: translate(-50%, -50%) translateX(calc(-1 * var(--float-btn-radius)));
}

/* 2. 左下角布局（主按钮在左，子按钮向右上环绕） */
.float-btn-left-bottom.active .float-sub-btn-1 {
    /* 子按钮1：正上方 */
    transform: translate(-50%, -50%) translateY(calc(-1 * var(--float-btn-radius)));
}
.float-btn-left-bottom.active .float-sub-btn-2 {
    /* 子按钮2：右上方，约45度角 */
    transform: translate(-50%, -50%) translate(calc(0.707 * var(--float-btn-radius)), calc(-0.707 * var(--float-btn-radius)));
}
.float-btn-left-bottom.active .float-sub-btn-3 {
    /* 子按钮3：正右方 */
    transform: translate(-50%, -50%) translateX(calc(1 * var(--float-btn-radius)));
}