/* ===== 自定义悬浮按钮样式 ===== */
/* 这个文件控制按钮的所有外观效果 */

/* 按钮容器 - 整个浮动区域的框框 */
.custom-floating-buttons {
    position: fixed;        /* 固定定位，不随页面滚动 */
    /* 初始位置 - 会被JS拖拽修改 */
    right: 20px;            /* 离右侧距离，单位像素 */
    top: 200px;             /* 离顶部距离，单位像素 */
    
    z-index: 999999;        /* 确保在最上层，不被其他元素遮挡 */
    display: flex;          /* 使用flex布局，让里面的按钮排成一行 */
    flex-direction: row;    /* 水平排列（一行显示） */
    gap: 8px;               /* 按钮之间的间距，单位像素 */
    align-items: center;    /* 垂直方向居中对齐 */
    
    /* 拖拽相关样式 */
    cursor: move;           /* 鼠标变成移动图标（四向箭头） */
    cursor: grab;           /* 更现代的拖拽光标（手形抓取） */
    user-select: none;      /* 防止拖拽时选中页面文字 */
    
    /* 动画效果 */
    transition: transform 0.5s ease;  /* 缩回/展开时的平滑动画 */
}

/* 正在拖拽时的状态 */
.custom-floating-buttons:active {
    cursor: grabbing;       /* 鼠标变成抓取中的手势 */
    opacity: 0.8;           /* 稍微变透明，提示正在拖拽 */
}

/* 按钮容器 - 缩回状态（只显示三个点） */
.custom-floating-buttons.retracted {
    transform: translateX(calc(100% - 50px));  /* 往右缩，只露出50px宽的三点区域 */
}

/* 所有按钮的通用样式 */
.custom-btn {
    display: inline-block;   /* 行内块元素，可以设置宽高 */
    padding: 8px 16px;       /* 内边距：上下8px，左右16px，控制按钮大小 */
    background-color: #1890ff; /* 默认背景色（会被单个按钮覆盖） */
    color: white;            /* 文字颜色 */
    text-decoration: none;   /* 去掉链接的下划线 */
    
    /* 圆角调整区域 - 修改这个数值改变按钮的圆润程度 */
    border-radius: 5px;     /* 10px是半圆，0是直角，50%是正圆 */
    
    font-size: 14px;         /* 文字大小 */
    font-weight: 500;        /* 文字粗细，500是中等 */
    
    /* 透明度调整区域 - 1不透明，0.5半透明，0完全透明 */
    opacity: 1;              
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* 按钮阴影，立体感 */
    cursor: pointer;         /* 鼠标变成小手，表示可点击 */
    border: none;            /* 去掉边框 */
    text-align: center;      /* 文字居中 */
    min-width: 70px;         /* 按钮最小宽度，防止文字太少时太窄 */
    transition: all 0.3s ease;  /* 所有变化都有0.3秒过渡动画 */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;  /* 字体 */
    letter-spacing: 0.5px;   /* 字间距 */
    border: 1px solid rgba(255,255,255,0.2);  /* 半透明白色边框，增加质感 */
}

/* 缩回状态下，隐藏所有普通按钮 */
.retracted .custom-btn {
    display: none;           /* 隐藏不显示 */
}

/* 三点图标容器 - 只在缩回时显示 */
.retracted .dots-container {
    display: flex !important;  /* 强制显示，覆盖下面的display:none */
}

/* 三点容器的默认样式（隐藏状态） */
.dots-container {
    display: none;           /* 默认隐藏（展开时隐藏） */
    width: 40px;             /* 容器宽度，也是缩回时露出的宽度 */
    height: 40px;            /* 容器高度 */
    background-color: #1890ff; /* 背景色，和按钮颜色匹配 */
    border-radius: 30px;     /* 圆角，做成椭圆形胶囊 */
    justify-content: center;  /* 水平居中（三个点） */
    align-items: center;     /* 垂直居中（三个点） */
    gap: 3px;                /* 三个点之间的间距 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* 阴影 */
    transition: all 0.3s ease;  /* 动画 */
    cursor: pointer;         /* 鼠标变成小手，表示可点击展开 */
}

/* 单个点的样式 */
.dot {
    width: 5px;              /* 点的宽度 */
    height: 5px;             /* 点的高度（正圆所以宽高相等） */
    background-color: white;  /* 点的颜色 */
    border-radius: 50%;       /* 50%圆角变成正圆 */
    opacity: 0.9;            /* 稍微半透明，更柔和 */
}

/* 鼠标划过三点容器时的效果 */
.retracted .dots-container:hover {
    transform: scale(1.1);            /* 放大10% */
    background-color: #40a9ff;        /* 变亮一点的蓝色 */
}

/* 鼠标划过整个缩回区域时 - 展开 */
.retracted:hover {
    transform: translateX(0);  /* 移回原位，完全显示 */
}

/* 展开时，隐藏三点容器 */
.retracted:hover .dots-container {
    display: none;            /* 隐藏三点 */
}

/* 展开时，显示普通按钮 */
.retracted:hover .custom-btn {
    display: inline-block;     /* 显示按钮 */
}

/* 第一个按钮的单独颜色 */
.custom-btn.btn-1 {
    background-color: #1890ff;  /* 蓝色，可以改成你喜欢的颜色 */
}

/* 第一个按钮的鼠标悬停效果 */
.custom-btn.btn-1:hover {
    background-color: #40a9ff;  /* 更亮的蓝色 */
    transform: translateY(-2px); /* 向上微微抬起 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);  /* 阴影加深 */
}

/* 第二个按钮的单独颜色 */
.custom-btn.btn-2 {
    background-color: #ff4d4f;  /* 红色，可以改成你喜欢的颜色 */
}

/* 第二个按钮的鼠标悬停效果 */
.custom-btn.btn-2:hover {
    background-color: #ff7875;  /* 更亮的红色 */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* 所有按钮通用的悬停效果（上面的单独设置会覆盖这个） */
.custom-btn:hover {
    transform: translateY(-2px);    /* 向上微微抬起 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);  /* 阴影加深 */
}