/* css/style.css */
/* 强制提升细小文字的可读性 */
[v-cloak] { display: none !important; }
body { background-color: #1f2223; } /* 确保白屏变黑屏，减少视觉冲击 */
.text-\[10px\] { font-size: 0.85rem !important; } /* 原本约10px -> 提升到约13.6px */
.text-xs { font-size: 0.9rem !important; }        /* 原本12px -> 提升到14.4px */
.text-sm { font-size: 1.1rem !important; }        /* 原本14px -> 提升到17.6px */

/* 1. 电脑端：保持最纯粹的布局，零额外 Padding */
#main-content {
    position: relative;
    padding-bottom: 0;
}

/* 2. 只有在【移动端触摸设备】上，才激活 Safari 补偿逻辑 */
@media (pointer: coarse) {
    /* 针对 iOS Safari 动态加高 */
    @supports (-webkit-touch-callout: none) {
        #main-content::after {
            content: "";
            display: block;
            height: calc(env(safe-area-inset-bottom, 20px) + 120px);
            width: 100%;
            pointer-events: none;
        }
    }
}

/* 优化字体粗细，大字号配合中等字重更好看 */
body {
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
}
/* 防止 Vue 加载前的花括号闪烁 */
[v-cloak] {
    display: none !important;
}

.grid > a,
.grid > div {
    content-visibility: auto;
    contain-intrinsic-size: 1px 320px; /* 预估高度，防止滚动条抖动 */
}

.archive-card img {
    will-change: transform, opacity; /* 提前告诉浏览器这货要变，让它开小灶缓存 */
    transform: translateZ(0); /* 强制开启 3D 硬件加速 */
}

/* 自定义滚动条 - Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* 横向滚动条高度 */
}

::-webkit-scrollbar-track {
    background: #1c1c1c;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #40B5AD; /* 你的 Brand 颜色 */
}

/* 防止 Vue 挂载前闪烁源码 */
[v-cloak] { display: none; }

/* --- OpenST 品牌色系统 (#40B5AD) --- */
.text-brand { color: #40B5AD; }
.bg-brand { background-color: #40B5AD; }
.border-brand { border-color: #40B5AD; }

/* --- Markdown 全功能美化 --- */
/* 给简介容器加固 */
.markdown-body {
    /* 1. 遇到超长单词或 URL 强制换行，不许超出边界 */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;

    /* 2. 避免图片或代码块太大撑开容器 */
    max-width: 100%;
}

/* 针对代码块，给它一个横向滚动条，而不是让它撑开整个页面 */
.markdown-body pre {
    overflow-x: auto;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 0.75rem;
}

/* 标题层级 */
.markdown-body h1 { font-size: 1.5rem; color: #fff; border-bottom: 2px solid #40B5AD; padding-bottom: 0.3rem; margin: 1.5rem 0 1rem; }
.markdown-body h2 { font-size: 1.25rem; border-left: 4px solid #40B5AD; padding-left: 0.75rem; margin: 1.2rem 0 0.8rem; }
.markdown-body h3 { font-size: 1.1rem; color: #40B5AD; margin: 1rem 0 0.5rem; font-weight: bold; }

/* 列表与任务 */
.markdown-body ul { list-style-type: disc; padding-left: 1.5rem; margin: 1rem 0; }
.markdown-body ol { list-style-type: decimal; padding-left: 1.5rem; margin: 1rem 0; }
.markdown-body input[type="checkbox"] {
    accent-color: #40B5AD;
    width: 1rem; height: 1rem;
    vertical-align: middle;
    margin-right: 4px;
}

/* 文本效果 */
.markdown-body strong { color: #fff; font-weight: bold; }
.markdown-body del { color: #555; text-decoration: line-through; } /* 横线/删除线 */
.markdown-body blockquote { border-left: 4px solid #2a6a65; padding-left: 1rem; color: #888; background: rgba(64,181,173,0.05); padding: 8px 16px; border-radius: 0 8px 8px 0; }

/* 超链接与行内代码 */
.markdown-body a { color: #40B5AD; text-decoration: underline; text-underline-offset: 4px; }
.markdown-body a:hover { filter: brightness(1.2); }
.markdown-body code { background: rgba(64,181,173,0.15); color: #40B5AD; padding: 0.2rem 0.4rem; border-radius: 4px; font-family: monospace; }

/* 1. 针对所有滚动条的通用定义 */
::-webkit-scrollbar {
    width: 6px;  /* 纵向滚动条宽度 */
    height: 6px; /* 横向滚动条高度 */
}

/* 2. 滚动条轨道 (背景) */
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02); /* 几乎透明的深色背景 */
    border-radius: 10px;
}

/* 3. 滚动条滑块 (滑块本身) */
::-webkit-scrollbar-thumb {
    background: rgba(64, 181, 173, 0.2); /* 品牌色 #40B5AD 的低透明度版 */
    border-radius: 10px;
    transition: background 0.3s ease;
}

/* 4. 鼠标悬停在滑块上时，颜色变亮 */
::-webkit-scrollbar-thumb:hover {
    background: #40B5AD; /* 变回完全的品牌色 */
    box-shadow: 0 0 8px rgba(64, 181, 173, 0.4); /* 增加一点点发光感 */
}

/* 5. 针对特定的预览容器添加平滑滚动 */
.markdown-body {
    scrollbar-gutter: stable; /* 防止滚动条出现时内容左右晃动 */
    scroll-behavior: smooth;
}

.markdown-body img {
    border-radius: 0.5rem;
    cursor: zoom-in;
    transition: transform 0.2s;
}
.markdown-body img:active {
    transform: scale(0.98);
}

/* 图片弹出的缩放动画 */
@keyframes imageZoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.animate-zoom {
    animation: imageZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 渐隐渐现 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* 全局图片悬停手势（排除掉图标） */
img:not(nav img):not(button img) {
    cursor: zoom-in;
}