/* ============================================================
   1. 样式初始化：解绑所有阻碍滑动的限制
   ============================================================ */
/* 强制解除父级容器的溢出隐藏，这是 sticky 的死门 */
html, body, #layout, .main-inner-box, .side-grid {
    overflow: visible !important;
    height: auto !important; /* 确保高度由内容撑开 */
}

/* ============================================================
   2. 核心布局重构：建立侧边栏滑轨
   ============================================================ */
@media screen and (min-width: 1025px) {
    /* 强制父级使用 Flex 布局并允许子元素不对齐拉伸 */
    .main-inner-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* 关键：侧边栏不会被强制拉长，从而可以滑动 */
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* 正文区宽度锁定 */
    .main-inner {
        flex: 1 !important;
        max-width: calc(100% - 320px) !important;
        margin-right: 20px !important;
    }

    /* 侧边栏容器：必须保持相对定位作为 sticky 的参考 */
    .side-grid {
        width: 300px !important;
        position: relative !important;
        display: block !important;
    }

    /* 目录内部容器：实施粘性吸附 */
    .sidebar-inner {
        position: -webkit-sticky !important;
        position: sticky !important;
        /* 预留出顶部导航栏的高度 (Keep 默认约 70px) */
        top: 85px !important; 
        
        /* 保证在内容区之上 */
        z-index: 99 !important;
        
        /* 针对超长目录的处理 */
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        
        /* 强制显现 */
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   3. 移动端兼容 (修复你提到的点击失效问题)
   ============================================================ */
@media screen and (max-width: 1024px) {
    .side-grid { display: none !important; }
    
    /* 救回右侧悬浮按钮 */
    .side-button, .post-toc-indicator {
        display: flex !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
    }
}

/* ============================================================
   4. 字体、颜色与清理 (维持你最满意的质感)
   ============================================================ */
@font-face {
    font-family: 'TsangerJinKai';
    src: url('/font/TsangerJinKai03-6763.woff2') format('woff2');
    font-display: swap;
}

html, body, .post-content {
    font-family: 'TsangerJinKai', sans-serif !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

@media (prefers-color-scheme: dark), .dark-mode {
    html, body, .post-content { color: #f5f5f5 !important; }
}

/* 清理版权干扰 */
.copyright-bg, .fa-copyright, .post-copyright-info { display: none !important; }


/* ============================================================
   版权网址显示优化：补全域名并修正截断
   ============================================================ */

/* 1. 针对版权链接进行内容补偿 */
.post-copyright-info a[href^="/posts/"]::before,
.post-copyright-info a[href^="posts/"]::before {
    content: "https://www.myzjb.com/" !important;
    display: inline;
}

/* 2. 强制不换行，防止网址被切断 */
.post-copyright-info a {
    white-space: nowrap !important;
    word-break: keep-all !important;
    text-decoration: none !important;
    /* 配合你要求的 20px 大字号，稍微缩小一点网址字号防止溢出 */
    font-size: 16px !important; 
    color: #1a1a1a !important;
}

/* 暗黑模式下的网址颜色 */
@media (prefers-color-scheme: dark), .dark-mode {
    .post-copyright-info a {
        color: #f5f5f5 !important;
    }
}

/* 3. 如果你想彻底隐藏这个显示不全的“许可”和“网址”行 */
/* 如果补全后依然觉得丑，可以取消下面这段代码的注释 */
/*
.post-copyright-info {
    display: none !important;
}
*/

/* ============================================================
   工具页面标题专项重构（解决 20px 字号显示不全）
   ============================================================ */

/* 1. 强制释放文字容器宽度，取消截断 */
.tool-item-info, 
.tool-item-inner .info, 
.tool-item-content {
    flex: 1 !important;
    width: auto !important;
    min-width: 150px !important; /* 核心：给予文字区域至少 150px 宽度 */
    overflow: visible !important;
}


/* 2. 针对工具卡片标题的专项样式 */
.tool-item-title, 
.tool-item-name, 
.tool-card-title,
[class*="tool-item"] a strong,
[class*="tool-item"] .name {
    /* 彻底移除省略号和截断限制 */
    white-space: normal !important;      /* 允许换行 */
    overflow: visible !important;       /* 取消隐藏 */
    text-overflow: unset !important;    /* 移除 ... */
    
    /* 独立布局设置 */
    display: block !important;
    max-width: none !important;
    
    /* 独立字号微调：由于卡片较小，这里用 17px 或 18px 效果最好 */
    font-size: 18px !important; 
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #0066cc !important; /* 给标题一个独立的颜色区分 */
    margin-bottom: 4px !important;
}

/* 3. 强制卡片整体加宽，防止 20px 字号挤压 */
.tool-item {
    min-width: 260px !important; /* 增加每个工具卡片的最小宽度 */
    height: auto !important;
    padding: 15px !important;
}

/* 4. 防止图标挤占标题位置 */
.tool-item-icon {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    margin-right: 15px !important;
}

/* 确保欢迎屏打字容器及其动画可见 */
.home-right-iterm, .typed-cursor, .home-right-title {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}