/* ========== 右下角漂浮 QQ 联系按钮 ========== */
.qq-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 14px;
    background: rgba(18, 183, 245, 0.92);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 12px 30px -8px rgba(18,183,245,0.5),
        0 4px 10px -2px rgba(0,0,0,0.1);
    text-decoration: none;
    transition: transform .25s, box-shadow .25s, background .25s;
    animation: qq-float-anim 3s ease-in-out infinite;
}
.qq-float:hover {
    background: #12B7F5;
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 18px 40px -8px rgba(18,183,245,0.65),
        0 6px 14px -2px rgba(0,0,0,0.15);
}

/* 模拟 QQ 图标（用纯 CSS 画一只小企鹅头） */
.qq-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}
.qq-icon::before {
    /* 左眼 */
    content: "";
    position: absolute;
    left: 5px; top: 8px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #12B7F5;
    box-shadow: 8px 0 0 #12B7F5; /* 右眼 */
}
.qq-icon::after {
    /* 小嘴 */
    content: "";
    position: absolute;
    left: 50%; bottom: 5px;
    width: 6px; height: 3px;
    border-radius: 0 0 6px 6px;
    background: #12B7F5;
    transform: translateX(-50%);
}

/* 上下漂浮动画 */
@keyframes qq-float-anim {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.qq-float:hover {
    animation: none; /* 鼠标悬停时停止漂浮 */
}

/* 响应式 */
@media (max-width: 600px) {
    .qq-float {
        right: 16px;
        bottom: 16px;
        padding: 9px 14px 9px 10px;
        font-size: 13px;
    }
    .qq-icon { width: 18px; height: 18px; }
    .qq-icon::before { left: 4px; top: 6px; width: 3px; height: 3px; box-shadow: 6px 0 0 #12B7F5; }
    .qq-icon::after { width: 5px; height: 2px; bottom: 4px; }
}