<!-- 右侧悬浮导航 -->
<style>
:root {
    --footer-text-size: 14px;
    --transition-standard: all 0.3s ease;
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --text-primary: #334155;
    --text-secondary: #64748b;
    --bg-light: #f8fafc;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
    --shadow-md: 0 5px 15px rgba(0,0,0,.08);
    --btn-gradient: linear-gradient(145deg, #ffffff, #f5f5f5);
    --btn-hover-gradient: linear-gradient(145deg, #f8fafc, #eff6ff);
}

/* 核心修改：默认隐藏移动端导航 */
.comfortable-nav{
    position:fixed;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:9999;
    display:none; /* 默认隐藏 */
    flex-direction:column;
    gap:12px; /* 增加间距更舒适 */
    padding:10px 0;
}

/* 仅在电脑端显示导航 (屏幕宽度>767px) */
@media (min-width:768px) {
    .comfortable-nav {
        display:flex; /* 电脑端显示 */
    }
}

/* 导航按钮统一美化 - 核心修改：所有按钮统一圆角+渐变背景 */
.nav-item{
    width:52px;
    height:52px;
    border-radius:18px; /* 强制统一圆角，包括在线客服按钮 */
    background: var(--btn-gradient); /* 所有按钮统一渐变背景 */
    box-shadow:var(--shadow-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f0f0f0; /* 细边框更精致 */
    /* 增加背景纹理，提升质感 */
    background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.8) 0%, rgba(245,245,245,0.1) 100%);
}

.nav-item:hover{
    background: var(--btn-hover-gradient); /* 悬浮渐变背景 */
    transform:translateX(-6px) translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.1);
    border-color: rgba(59, 130, 246, 0.2);
}

/* 重点：强制在线客服按钮容器样式（最高优先级） */
.comfortable-nav .nav-item.service-item {
    width:52px !important;
    height:52px !important;
    border-radius:18px !important; /* 强制圆角 */
    background: linear-gradient(145deg, #ffffff, #f5f5f5) !important;
    background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.8) 0%, rgba(245,245,245,0.1) 100%) !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow:0 2px 8px rgba(0,0,0,.05) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 在线客服按钮悬浮样式统一 */
.comfortable-nav .nav-item.service-item:hover {
    background: var(--btn-hover-gradient) !important;
    transform:translateX(-6px) translateY(-2px) !important;
    box-shadow:0 6px 16px rgba(0,0,0,.1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

.nav-icon{
    font-size:22px;
    color:var(--text-secondary);
    transition:all .2s ease;
}

.nav-item:hover .nav-icon{
    color:var(--primary-color);
}

/* 提示框美化增强 */
.nav-tooltip{
    position:absolute;
    right:60px;
    top:50%;
    transform:translateY(-50%);
    background-color:var(--text-primary);
    color:#fff;
    padding:8px 16px;
    border-radius:10px;
    font-size:13px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:all .25s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* 提示框小三角优化 */
.nav-tooltip::after{
    content:'';
    position:absolute;
    top:50%;
    right:-4px;
    transform:translateY(-50%);
    width:8px;
    height:8px;
    background-color:var(--text-primary);
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 2px -2px 4px rgba(0,0,0,.05);
}

.nav-item:hover .nav-tooltip{
    opacity:1;
    right:58px;
}

/* VIP项美化增强 - 保持渐变但统一圆角 */
.vip-item-right{
    width:56px;
    height:56px;
    border-radius:18px; /* 和其他按钮完全统一的圆角 */
    background: linear-gradient(135deg, var(--primary-color), #60a5fa);
    position:relative;
    box-shadow:0 8px 20px rgba(59,130,246,.35);
    z-index:2;
    border:none;
    background-image: none; /* 取消纹理，保持纯色渐变 */
}

.vip-item-right .nav-icon{
    color:#fff;
    font-size:24px;
    position:relative;
    z-index:2;
}

.vip-pulse{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:18px; /* 匹配VIP按钮圆角 */
    background-color:rgba(59,130,246,.4);
    animation:pulse 2s infinite ease-in-out;
    z-index:1;
}

@keyframes pulse{
    0%{transform:scale(1);opacity:1}
    100%{transform:scale(2);opacity:0}
}

/* VIP面板美化增强 */
.vip-panel{
    position:absolute;
    right:75px;
    top:50%;
    transform:translateY(-50%);
    background-color:#fff;
    border-radius:14px;
    box-shadow:var(--shadow-md);
    width:290px;
    padding:22px;
    opacity:0;
    pointer-events:none;
    transition:all .3s cubic-bezier(.4,0,.2,1);
}

.vip-panel::after{
    content:'';
    position:absolute;
    top:50%;
    right:-8px;
    transform:translateY(-50%) rotate(45deg);
    width:16px;
    height:16px;
    background-color:#fff;
    box-shadow:3px -3px 8px rgba(0,0,0,.08);
    z-index:-1;
}

.vip-item-right:hover .vip-panel{
    opacity:1;
    pointer-events:all;
    transform: translateY(-50%) translateX(-8px);
}

.vip-panel h4{
    color:var(--text-primary);
    font-size:17px;
    margin-bottom:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
}

.vip-benefits{
    margin-bottom:20px
}

.vip-benefit{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:var(--text-secondary);
    margin-bottom:10px;
    padding:4px 0;
}

.vip-benefit i{
    color:var(--primary-color);
    font-size:16px;
}

.vip-pricing{
    background-color:var(--bg-light);
    border-radius:12px;
    padding:16px;
    margin-bottom:20px;
    border:1px solid rgba(59,130,246,0.1);
}

.vip-price .current{
    font-size:24px;
    font-weight:700;
    color:var(--primary-color);
}

.vip-cta{
    width:100%;
    padding:12px 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:all .2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    box-shadow:0 4px 12px rgba(59,130,246,.2);
}

.vip-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(59,130,246,.3);
    color:#fff;
}

/* 二维码面板美化增强 */
.qrcode-panel{
    position:absolute;
    right:70px;
    top:50%;
    transform:translateY(-50%);
    background-color:#fff;
    border-radius:14px;
    box-shadow:var(--shadow-md);
    width:230px;
    padding:22px;
    text-align:center;
    opacity:0;
    pointer-events:none;
    transition:all .3s cubic-bezier(.4,0,.2,1);
}

.qrcode-panel::after{
    content:'';
    position:absolute;
    top:50%;
    right:-8px;
    transform:translateY(-50%) rotate(45deg);
    width:16px;
    height:16px;
    background-color:#fff;
    box-shadow:3px -3px 8px rgba(0,0,0,.08);
    z-index:-1;
}

.nav-item:hover .qrcode-panel{
    opacity:1;
    pointer-events:all;
    transform: translateY(-50%) translateX(-8px);
}

.qrcode-container{
    background-color:#fff;
    border-radius:12px;
    padding:14px;
    display:inline-block;
    box-shadow:var(--shadow-sm);
    margin-bottom:16px;
    border:1px solid rgba(0,0,0,0.05);
}

.qrcode-img{
    width:140px;
    height:140px;
    border-radius:8px;
}

.qrcode-title{
    color:var(--text-primary);
    font-size:15px;
    font-weight:600;
    margin-bottom:8px;
}

/* 在线状态样式 - 圆角优化 */
.service-item{
    position:relative
}

.service-status{
    position:absolute;
    top:-4px !important; /* 微调位置，避免挤压按钮 */
    right:-4px !important;
    background-color:#10b981;
    color:#fff;
    font-size:11px;
    padding:2px 6px !important; /* 减小内边距，避免过大 */
    border-radius:14px; /* 圆角标签 */
    font-weight:600;
    white-space:nowrap;
    z-index:2;
    animation:pulseOnline 2s infinite;
    box-shadow:0 2px 6px rgba(16,185,129,.2);
}

@keyframes pulseOnline{
    0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
    70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}
    100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}

/* 返回顶部按钮美化增强 - 统一风格 */
.backtop-item{
    border-radius:18px; /* 和其他按钮统一圆角 */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    opacity:0;
    visibility:hidden;
    transition:all .3s ease;
    border-color:transparent;
    background-image: none; /* 取消纹理 */
}

.backtop-item .nav-icon{
    color:#fff;
}

.backtop-item:hover{
    background: linear-gradient(135deg, var(--primary-hover), #1d4ed8);
    border-color:transparent;
}

.backtop-item.visible{
    opacity:1;
    visibility:visible;
}

.checkin-link,.service-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    position:relative;
    text-decoration:none;
    /* 确保按钮内部元素不影响圆角 */
    border-radius: inherit;
    /* 修复在线客服按钮圆角 - 关键样式 */
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 全屏按钮激活状态美化 */
.fullscreen-item.active{
    background: var(--btn-hover-gradient);
    border-color: rgba(59, 130, 246, 0.3);
}

/* 移动端完全隐藏导航（优先级最高） */
@media (max-width:767px){
    .comfortable-nav {
        display:none !important; /* 强制隐藏 */
    }
}

/* 底部导航链接样式（补充） */
#footer-bar .footer-bar-link {
    font-size: var(--footer-text-size);
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 16px;
    margin-left: 5px;
    border-radius: 31px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-standard);
    text-decoration: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    touch-action: manipulation;
    outline: none;
}
</style>

<!-- 导航HTML -->
<div class="comfortable-nav">
    <!-- 右侧悬浮导航核心HTML -->
    <div class="nav-item vip-item-right">
        <div class="vip-pulse"></div>
        <div class="vip-pulse"></div>
        <div class="vip-pulse"></div>
        <i class="fa fa-diamond nav-icon"></i>
        <div class="vip-panel">
            <h4><i class="fa fa-diamond"></i> 永久会员新春钜惠</h4>
            <div class="vip-benefits">
                <div class="vip-benefit">
                    <i class="fa fa-check-circle"></i>
                    <span>微信QQ客服一对一</span>
                </div>
                <div class="vip-benefit">
                    <i class="fa fa-check-circle"></i>
                    <span>源码永久免费升级</span>
                </div>
                <div class="vip-benefit">
                    <i class="fa fa-check-circle"></i>
                    <span>大量专属精品源码</span>
                </div>
                <div class="vip-benefit">
                    <i class="fa fa-check-circle"></i>
                    <span>免费下载全站资源</span>
                </div>
            </div>
            <div class="vip-pricing">
                <div class="vip-price">
                    <span class="current">¥118</span>
                    <span class="original">¥298</span>
                </div>
                <div class="vip-period">永久会员 · 立省180元</div>
            </div>
            <a href="/vip-2" class="vip-cta">
                <i class="fa fa-rocket"></i> 立即开通
            </a>
        </div>
    </div>

    <div class="nav-item">
        <a class="initiate-checkin my-custom-checkin checkin-link" href="javascript:;" form-action="user_checkin" ed-text="每日签到">
            <i class="fa fa-calendar-check-o nav-icon"></i>
            <span class="nav-tooltip">每日签到</span>
        </a>
    </div>

    <!-- 在线客服按钮 - 确保继承nav-item的圆角和背景样式 -->
    <div class="nav-item service-item">
        <button data-height="550" 
                data-remote="/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=1"
                class="service-button" 
                data-toggle="RefreshModal">
            <i class="fa fa-comments-o nav-icon"></i>
            <span class="service-status">在线</span>
            <span class="nav-tooltip">在线客服</span>
        </button>
    </div>

    <div class="nav-item">
        <a href="/dashang" 
           class="service-button" 
           target="_blank" 
           rel="noopener noreferrer"
           title="打赏我们">
            <i class="fa fa-gift nav-icon"></i>
            <span class="nav-tooltip">打赏我们</span>
        </a>
    </div>

    <div class="nav-item">
        <i class="fa fa-qrcode nav-icon"></i>
        <div class="qrcode-panel">
            <div class="qrcode-container">
                <img src="https://cs.yykbk.com/wp-content/uploads/2025/03/35.jpg" alt="公众号二维码" class="qrcode-img">
            </div>
            <div class="qrcode-title">扫码关注公众号</div>
            <div class="qrcode-desc">获取更多最新源码或模板</div>
        </div>
    </div>

    <div class="nav-item fullscreen-item">
        <i class="fa fa-expand nav-icon" id="fullscreen-icon"></i>
        <span class="nav-tooltip" id="fullscreen-tooltip">展开全屏</span>
    </div>

    <div class="nav-item backtop-item">
        <i class="fa fa-arrow-up nav-icon"></i>
        <span class="nav-tooltip">返回顶部</span>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 返回顶部功能
    const backtopBtn = document.querySelector('.backtop-item');

    function checkScroll() {
        if (window.scrollY > 300) {
            backtopBtn.classList.add('visible');
        } else {
            backtopBtn.classList.remove('visible');
        }
    }

    checkScroll();
    window.addEventListener('scroll', checkScroll);

    backtopBtn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // VIP会员跳转
    const vipItem = document.querySelector('.vip-item-right');
    const vipUrl = '/svip'; 
    if (vipItem && vipUrl) {
        vipItem.addEventListener('click', function() {
            window.location.href = vipUrl;
        });
    }

    // 全屏功能（优化兼容性）
    const fullscreenBtn = document.querySelector('.fullscreen-item');
    const fullscreenIcon = document.getElementById('fullscreen-icon');
    const fullscreenTooltip = document.getElementById('fullscreen-tooltip');

    // 兼容不同浏览器的全屏API
    function requestFullscreen(element) {
        if (element.requestFullscreen) {
            return element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) { // Chrome/Safari
            return element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) { // IE/Edge
            return element.msRequestFullscreen();
        }
    }

    function exitFullscreen() {
        if (document.exitFullscreen) {
            return document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            return document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            return document.msExitFullscreen();
        }
    }

    function getFullscreenElement() {
        return document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
    }

    function updateFullscreenState() {
        if (getFullscreenElement()) {
            fullscreenIcon.classList.remove('fa-expand');
            fullscreenIcon.classList.add('fa-compress');
            fullscreenTooltip.textContent = '退出全屏';
            fullscreenBtn.classList.add('active');
        } else {
            fullscreenIcon.classList.remove('fa-compress');
            fullscreenIcon.classList.add('fa-expand');
            fullscreenTooltip.textContent = '展开全屏';
            fullscreenBtn.classList.remove('active');
        }
    }

    updateFullscreenState();

    fullscreenBtn.addEventListener('click', function() {
        if (!getFullscreenElement()) {
            requestFullscreen(document.documentElement).catch(err => {
                console.error(`无法进入全屏模式: ${err.message}`);
            });
        } else {
            exitFullscreen();
        }
    });

    // 监听全屏状态变化（兼容不同浏览器）
    document.addEventListener('fullscreenchange', updateFullscreenState);
    document.addEventListener('webkitfullscreenchange', updateFullscreenState);
    document.addEventListener('MSFullscreenChange', updateFullscreenState);
});
</script>
<!-- 右侧悬浮导航结束 -->