/* drawer.css —— 左侧悬浮侧边栏
   日期：2026-11-02 */

/* 遮罩层 */
.mobile-menu-overlay { 
    position: fixed; inset: 0; 
    background: rgba(0,0,0,0.3); 
    backdrop-filter: blur(4px); 
    z-index: 9998; 
    opacity: 0; visibility: hidden; 
    transition: all 0.3s; 
}
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

/* 侧边悬浮面板 */
.sidebar-drawer {
    position: fixed; 
    top: 50%; 
    left: 20px; 
    /* 宽度由内容撑开（版权信息最宽），加上左右呼吸边距 */
    width: fit-content; 
    min-width: 180px;
    max-height: 85vh;
    overflow-y: auto;
    
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px; /* 四角大圆角悬浮感 */
    z-index: 9999; 
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    
    display: flex;
    flex-direction: column;
    
    /* 默认向左滑出屏幕，且Y轴居中 */
    transform: translate(-150%, -50%); 
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sidebar-drawer::-webkit-scrollbar { display: none; }

body.dark-theme .sidebar-drawer { 
    background: rgba(30, 34, 41, 0.85); 
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.sidebar-drawer.active { 
    /* 滑入到原位（距左侧20px），且Y轴保持居中 */
    transform: translate(0, -50%); 
}

/* 导航列表 */
.drawer-nav { 
    flex: 1;
    padding: 24px 16px 16px; 
}
.drawer-nav ul { 
    list-style: none; padding: 0; margin: 0; 
    display: flex;
    flex-direction: column;
    align-items: center; /* 让所有 a 标签水平居中 */
}
.drawer-nav li { 
    width: 100%;
    opacity: 0; 
    transform: translateX(-15px); 
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); 
}
.sidebar-drawer.active .drawer-nav li { 
    opacity: 1; 
    transform: translateX(0); 
}

/* 链接本身居中 */
.drawer-nav a { 
    display: flex; 
    align-items: center; 
    justify-content: center; /* 图标+文字整体居中 */
    gap: 10px;
    padding: 14px 20px; 
    border-radius: 12px; 
    color: var(--text-primary); 
    text-decoration: none; 
    transition: background 0.2s, color 0.2s; 
    white-space: nowrap; /* 防止文字换行 */
}
.drawer-nav a .icon { font-size: 1.25rem; flex-shrink: 0; }
.drawer-nav a .nav-title { font-weight: 500; font-size: 1.05rem; }

.drawer-nav a:hover, .drawer-nav a:active { 
    background: rgba(37, 99, 235, 0.08); 
    color: #2563eb; 
}
body.dark-theme .drawer-nav a:hover { 
    background: rgba(37, 99, 235, 0.15); 
}

/* 底部版权信息（充当宽度基准） */
.drawer-footer {
    padding: 16px 24px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    white-space: nowrap; /* 强制不换行，撑开宽度 */
}
body.dark-theme .drawer-footer {
    border-top-color: rgba(255, 255, 255, 0.05);
}