/* 帮助中心文章页（view.html / :id.html）专属样式
 * 从 view.html 内嵌 <style> 迁出，加载顺序须保持在所有公共样式之后 */

/* ===== 三栏布局：左导航(280) + 正文(紧贴导航、宽度随屏幕自适应) + 右目录(220, ≥1280px)
   正文不再限宽居中，直接填满左导航右侧的可用空间 ===== */
.wiki-main {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

.wiki-content {
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: var(--space-4) var(--space-5) var(--space-5);
    /* 覆盖主样式的 overflow-y:auto——它会抢走 sticky 目录的滚动参照，
       实际滚动容器是外层 .wiki-main */
    overflow: visible;
}

.wiki-article {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.wiki-article .ql-editor {
    padding: 0;
    width: 100%;
    max-width: 100%;
    /* 主样式的 overflow-x:hidden 会裁掉宽表格负 margin 的溢出部分 */
    overflow: visible;
}

/* 右侧 sticky 目录：宽屏显示，中屏回落左栏 */
.article-toc-aside {
    display: none;
}

@media (min-width: 1280px) {
    .wiki-content {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: var(--space-6);
    }

    /* 左栏目录隐藏，让位给右侧 */
    #toc-nav-section {
        display: none;
    }

    .article-toc-aside {
        display: block;
        position: sticky;
        top: calc(var(--header-height) + var(--space-5));
        max-height: calc(100vh - var(--header-height) - 96px);
        overflow-y: auto;
        font-size: 13px;
    }
}

.article-toc-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: var(--space-2);
    padding-left: 12px;
}

.article-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--border-content);
}

.article-toc-list li a {
    display: block;
    padding: 4px 12px;
    color: var(--text-nav);
    text-decoration: none;
    line-height: 1.5;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.article-toc-list li a:hover {
    color: var(--accent);
    border-left-color: var(--accent);
}

/* ===== 标题区：面包屑 + h1 + 元信息行 ===== */
.article-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: var(--space-4);
}

.article-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-breadcrumb a:hover {
    color: var(--accent);
}

/* 分类 crumb 高亮，承担 eyebrow 职能 */
.article-breadcrumb #breadcrumb-category {
    color: var(--accent);
    font-weight: 500;
}

.article-breadcrumb .sep {
    opacity: 0.5;
    user-select: none;
}

.wiki-article h1 {
    margin-bottom: var(--space-3);
}

/* 元信息行：pill 分类 + 日期 + 阅读量 + 阅读时长 */
.wiki-metadata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    width: 100%;
    font-size: 13px;
    color: var(--text-light);
    margin: 0 0 var(--space-5);
}

.wiki-metadata span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 0;
}

/* 小屏不再把 Markdown 徽标推到最右（inline style 的 margin-left:auto
   在窄容器里会把徽标顶出右边界），改为随元信息自然排布 */
@media (max-width: 480px) {
    .wiki-metadata .wiki-skill {
        margin-left: 0 !important;
    }
}

/* ===== 摘要引导块（绿色 tip） ===== */
.wiki-article .wiki-summary {
    position: relative;
    font-size: 15px;
    line-height: 1.8;
    padding: 14px 18px 14px 46px;
    margin-bottom: var(--space-6);
    color: var(--text-content);
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: var(--radius-md);
}

.wiki-article .wiki-summary::before {
    content: '\f0eb';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 16px;
    font-size: 14px;
    color: #16a34a;
}

.dark-theme .wiki-article .wiki-summary {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(74, 222, 128, 0.30);
}

.dark-theme .wiki-article .wiki-summary::before {
    color: #4ade80;
}

/* ===== 正文提醒块：blockquote 统一为橙黄 warning ===== */
.wiki-article .ql-editor blockquote,
.wiki-article #tutorial-content blockquote {
    position: relative;
    margin: 1.5em 0;
    padding: 13px 18px 13px 46px;
    font-style: normal;
    color: var(--text-content);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-md);
}

.wiki-article .ql-editor blockquote::before,
.wiki-article #tutorial-content blockquote::before {
    content: '\f071';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 15px;
    font-size: 13px;
    color: #d97706;
}

.dark-theme .wiki-article .ql-editor blockquote,
.dark-theme .wiki-article #tutorial-content blockquote {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(251, 191, 36, 0.30);
}

.dark-theme .wiki-article .ql-editor blockquote::before,
.dark-theme .wiki-article #tutorial-content blockquote::before {
    color: #fbbf24;
}

/* ===== 配图相框：边框 + 圆角 + 衬底 ===== */
.wiki-article .ql-editor img {
    border: 1px solid var(--border-content);
    border-radius: var(--radius-md);
    padding: 4px;
    background: var(--bg-card);
    box-sizing: border-box;
}

/* ===== 正文层次节奏：区块标题上方留白拉开===== */
.wiki-article .ql-editor h2 {
    margin-top: 2.4em !important;
}

.wiki-article .ql-editor h3 {
    margin-top: 1.8em !important;
}

.wiki-article .ql-editor > h1:first-child,
.wiki-article .ql-editor > h2:first-child,
.wiki-article .ql-editor > h3:first-child {
    margin-top: 0.4em !important;
}

/* ===== 行内代码：中性灰 chip ===== */
.wiki-article .ql-editor code {
    background-color: var(--bg-input);
    border: 1px solid var(--border-input);
    color: var(--text-title);
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 13px;
}

/* 代码块内部的 <code> 维持原样，不套 chip */
.wiki-article .ql-editor pre code,
.wiki-article .ql-editor .ql-code-block-container code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Quill 打回车产生的空段落 <p><br></p> = 一行高 + 双重 margin，
   造成段落间距不均匀的大空洞，折叠为无操作（段距统一由 p margin 控制）。
   纯文本为空无法用 CSS 判断（:only-child 不数文本节点），由 JS 打 .ql-empty-line 标记 */
.wiki-article .ql-editor p.ql-empty-line,
.wiki-article #tutorial-content p.ql-empty-line,
.wiki-article .ql-editor p:empty,
.wiki-article #tutorial-content p:empty {
    margin: 0 !important;
    height: 0;
    overflow: hidden;
}

/* ===== 文章日期隐藏（信息价值低，结构化数据仍保留日期供 SEO） ===== */
.wiki-metadata .wiki-date {
    display: none;
}

/* ===== prev/next 卡片化（标签用伪元素生成，JS 结构不变） ===== */
.wiki-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-content);
}

.wiki-prev {
    grid-column: 1;
}

.wiki-next {
    grid-column: 2;
}

.wiki-footer-nav a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-content);
    border-radius: var(--radius-md);
    color: var(--text-title);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wiki-footer-nav a:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-hover);
    text-decoration: none;
}

.wiki-footer-nav a i {
    display: none;
}

.wiki-prev a::before {
    content: '上一篇';
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
}

.wiki-next a {
    align-items: flex-end;
    text-align: right;
}

.wiki-next a::before {
    content: '下一篇';
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
}

@media (max-width: 576px) {
    .wiki-footer {
        grid-template-columns: 1fr;
    }

    .wiki-prev,
    .wiki-next {
        grid-column: 1;
    }

    .wiki-next a {
        align-items: flex-start;
        text-align: left;
    }
}

/* 为标题添加滚动锚点样式，防止被header遮挡 */
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.wiki-article>h1 {
    scroll-margin-top: 60px;
    /* header高度值；负上边距抵消内边距对布局的影响 */
    padding-top: 15px;
    margin-top: -15px;
}

/* Video.js样式（边框驱动，无静态阴影） */
.video-js-container {
    position: relative;
    margin: 20px 0;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-content, #e5e7eb);
    overflow: hidden;
    max-width: 100%;
}

/* 视频宽度类，与后台对应 */
.ql-video-width-25 {
    width: 25% !important;
    margin-left: auto;
    margin-right: auto;
}

.ql-video-width-50 {
    width: 50% !important;
    margin-left: auto;
    margin-right: auto;
}

.ql-video-width-75 {
    width: 75% !important;
    margin-left: auto;
    margin-right: auto;
}

.ql-video-width-100 {
    width: 100% !important;
}

.video-js {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.vjs-default-skin {
    color: #fff;
}

.vjs-default-skin .vjs-big-play-button {
    font-size: 3em;
    line-height: 1.5em;
    height: 1.5em;
    width: 1.5em;
    border-radius: 0.75em;
    background-color: rgba(43, 51, 63, 0.7);
    border: 0.06em solid #fff;
    left: 50%;
    top: 50%;
    margin-left: -0.75em;
    margin-top: -0.75em;
}

.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
    background-color: rgba(0, 102, 204, 0.9);
}

.ql-videojs {
    position: relative;
    width: 100%;
    margin: 20px 0;
}

/* 确保顶部搜索框和主题切换按钮在一行 - 强化样式 */
.wiki-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 60px !important;
    width: 100% !important;
    background-color: var(--bg-header) !important;
    padding: 0 15px;
}

.wiki-search {
    flex: 0 0 auto;
    margin-right: 15px;
    position: relative;
    max-width: 200px;
}

.wiki-controls {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 40px !important;
}

/* 响应式调整 */
@media (max-width: 996px) {
    .wiki-sidebar {
        display: none !important;
    }

    .wiki-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    /* 重新设置小屏幕上的头部，确保在一行显示 */
    .wiki-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: auto !important;
        min-height: 50px !important;
        padding: 10px 15px !important;
    }

    .wiki-search {
        flex: 1 !important;
        max-width: none !important;
        width: auto !important;
        margin-right: 10px !important;
    }

}

@media (max-width: 480px) {
    .wiki-header {
        padding: 8px 10px !important;
    }

    .wiki-search {
        flex: 1 !important;
        margin-right: 8px !important;
    }

    .wiki-search input {
        width: 100% !important;
        font-size: 13px !important;
    }
}

/* 文章分类列表样式（不缩进，与分类行对齐） */
.category-articles {
    padding-left: 0;
    display: none;
}

.category-articles.expanded {
    display: block;
}

.category-articles li {
    margin: 5px 0;
}

.wiki-nav-item .category-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-nav);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wiki-nav-item .category-toggle:hover {
    background-color: var(--bg-nav-hover);
    color: var(--accent);
}

.wiki-nav-item .category-toggle i {
    margin-right: 8px;
    transition: transform 0.3s ease;
    font-size: 12px;
    color: var(--text-light);
}

.wiki-nav-item.expanded .category-toggle i {
    transform: rotate(90deg);
}

/* 侧栏骨架屏（导航数据加载前的占位） */
.nav-skeleton {
    list-style: none;
    padding: 8px 4px;
}

.skeleton-bar {
    display: block;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.light-theme .skeleton-bar {
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.10) 50%,
            rgba(0, 0, 0, 0.05) 100%);
    background-size: 200% 100%;
}

.skeleton-bar.w-80 { width: 80%; }
.skeleton-bar.w-70 { width: 70%; }
.skeleton-bar.w-60 { width: 60%; }

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* SPA 切换文章：仅正文区轻微过渡，侧栏保持不动 */
.wiki-article.article-transition {
    transition: opacity 0.15s ease;
}

.wiki-article.is-loading {
    opacity: 0.55;
    pointer-events: none;
}