/* =========================================================
   ChatGPT-like Article Style (v2)
   Target:
   - Article: #article-container (Butterfly)
   - Writer preview: #mw-system .mw-preview-body (你的写作器预览区)
   Renderer: hexo-renderer-marked / highlight.js / prism / hexo highlight
   ========================================================= */

/* ---- Shared palette (light) ---- */
:root {
    --gpt-text: #111111;
    --gpt-muted: #6b7280;
    --gpt-border: #e5e7eb;
    --gpt-bg-soft: #f7f7f8;

    --gpt-link: #111111;
    --gpt-link-underline: #d1d5db;

    --gpt-code-bg: #f6f7f9;
    --gpt-code-border: #e5e7eb;
    --gpt-code-text: #111111;

    /* hr 默认兜底色（真正随机会由 JS 写到每条 hr 上） */
    --gpt-hr-fallback-a: rgba(120, 190, 175, 0.70);
    --gpt-hr-fallback-b: rgba(110, 165, 210, 0.70);
}

/* ✅ 用主题的暗黑开关，不用 prefers-color-scheme
   这样跟 Butterfly 的深色模式一致 */
html[data-theme='dark'] {
    --gpt-text: #f3f4f6;
    --gpt-muted: #9ca3af;
    --gpt-border: #2b2f36;
    --gpt-bg-soft: #121826;

    --gpt-link: #f3f4f6;
    --gpt-link-underline: #4b5563;

    --gpt-code-bg: #121826;
    --gpt-code-border: #2b2f36;
    --gpt-code-text: #f3f4f6;

    --gpt-hr-fallback-a: rgba(150, 235, 210, 0.55);
    --gpt-hr-fallback-b: rgba(150, 205, 245, 0.55);
}

/* =========================================================
   Scope mapping:
   - Article content: #article-container
   - Writer preview: #mw-system .mw-preview-body
   ========================================================= */

#article-container,
#mw-system .mw-preview-body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC",
    Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--gpt-text);
    letter-spacing: -0.01em;
}

/* ===== 段落 ===== */
#article-container p,
#mw-system .mw-preview-body p {
    margin: 0.95em 0;
    font-size: 16px;
    line-height: 1.85;
    color: var(--gpt-text);
}

/* ===== 列表 ===== */
#article-container ul,
#article-container ol,
#mw-system .mw-preview-body ul,
#mw-system .mw-preview-body ol {
    padding-left: 1.25em;
    margin: 0.8em 0 1em;
}

#article-container li,
#mw-system .mw-preview-body li {
    margin: 0.4em 0;
    font-size: 16px;
    line-height: 1.8;
}

#article-container li::marker,
#mw-system .mw-preview-body li::marker {
    color: var(--gpt-muted);
}

/* ===== 标题 ===== */
#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#mw-system .mw-preview-body h1,
#mw-system .mw-preview-body h2,
#mw-system .mw-preview-body h3,
#mw-system .mw-preview-body h4 {
    color: var(--gpt-text);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

#article-container h1,
#mw-system .mw-preview-body h1 {
    font-size: 1.9rem;
    margin: 1em 0 0.6em;
}

#article-container h2,
#mw-system .mw-preview-body h2 {
    font-size: 1.35rem;
    margin: 1.6em 0 0.6em;
    padding-bottom: 0.35em;
    /* border-bottom: 1px solid var(--gpt-border); */
}

#article-container h3,
#mw-system .mw-preview-body h3 {
    font-size: 1.15rem;
    margin: 1.2em 0 0.5em;
}

#article-container h4,
#mw-system .mw-preview-body h4 {
    font-size: 1.05rem;
    margin: 1em 0 0.4em;
    font-weight: 600;
}

/* ===== 链接 ===== */
#article-container a,
#mw-system .mw-preview-body a {
    color: var(--gpt-link);
    text-decoration: underline;
    text-decoration-color: var(--gpt-link-underline);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

#article-container a:hover,
#mw-system .mw-preview-body a:hover {
    text-decoration-color: #9ca3af;
}

/* ===== 引用块 ===== */
#article-container blockquote,
#mw-system .mw-preview-body blockquote {
    margin: 1.2em 0;
    padding: 0.9em 1em;
    background: var(--gpt-bg-soft);
    border-left: 3px solid #d1d5db;
    border-radius: 10px;
    color: #374151;
}

html[data-theme='dark'] #article-container blockquote,
html[data-theme='dark'] #mw-system .mw-preview-body blockquote,
html[data-theme='dark'] #article-container blockquote p,
html[data-theme='dark'] #mw-system .mw-preview-body blockquote p {
    color: #d1d5db;
    border-left-color: rgba(255,255,255,.18);
}

#article-container blockquote p,
#mw-system .mw-preview-body blockquote p {
    margin: 0.4em 0;
    color: inherit;
}

/* =========================================================
   ✅ 分割线 hr：高度改为 2px
   - 颜色用 JS 随机注入为 linear-gradient
   - 没注入时用 fallback 渐变
   ========================================================= */
#article-container hr,
#mw-system .mw-preview-body hr {
    border: none;
    height: 2px;              /* ✅ 改为 2px */
    margin: 2em 0;            /* 间距不变 */
    background: linear-gradient(
            90deg,
            var(--hr-a, var(--gpt-hr-fallback-a)),
            var(--hr-b, var(--gpt-hr-fallback-b))
    );
    opacity: 1;
}

/* ===== 图片 ===== */
#article-container img,
#mw-system .mw-preview-body img {
    border-radius: 12px;
}

#article-container figcaption,
#mw-system .mw-preview-body figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--gpt-muted);
}

/* ===== 行内代码（注意：排除 pre 内的 code） ===== */
#article-container :not(pre) > code,
#mw-system .mw-preview-body :not(pre) > code {
    background: var(--gpt-code-bg);
    border: 1px solid var(--gpt-code-border);
    color: var(--gpt-code-text);
    padding: 0.15em 0.4em;
    border-radius: 8px;
    font-size: 0.92em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* =========================================================
   ✅ 代码块：只包裹内容，不要“多余高度”
   - 文章页：仅做外框/布局（不做 token 颜色渲染，避免双重渲染）
   - 写作器预览：保留统一容器样式（如需 token 风格，可在下方开启）
   ========================================================= */

/* 1) 外层容器（唯一的框） */
#article-container figure.highlight,
#article-container .highlight,
#article-container pre,
#mw-system .mw-preview-body pre {
    background: var(--gpt-code-bg) !important;
    border: 1px solid var(--gpt-code-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* 文章里建议用 figure.highlight / .highlight 做外框 */
#article-container figure.highlight,
#article-container .highlight {
    overflow: hidden !important;
    margin: 1.2em 0 !important;
}

/* 2) pre：取消第二层框 */
#article-container figure.highlight pre,
#article-container figure.highlight .code pre,
#article-container .highlight pre,
#article-container .highlight > pre,
#article-container pre,
#mw-system .mw-preview-body pre {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    margin: 0 !important;
    padding: 12px 14px !important;
    overflow: auto !important;

    height: auto !important;
    min-height: 0 !important;
}

/* 3) code：透明、无边框 */
#article-container figure.highlight pre code,
#article-container .highlight pre code,
#article-container pre code,
#mw-system .mw-preview-body pre code {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--gpt-code-text) !important;
}

/* 4) 去掉行号栏（Hexo highlight/prism/hj） */
#article-container figure.highlight table td.gutter,
#article-container figure.highlight table td.gutter pre,
#article-container .highlight .gutter,
#article-container .highlight .gutter pre,
#article-container .highlight .line-numbers,
#article-container .highlight .line-number,
#article-container pre.line-numbers,
#article-container pre[class*="language-"].line-numbers,
#article-container .line-numbers-rows {
    display: none !important;
}

/* 5) Hexo highlight 的 table 结构：去掉 table 额外 padding */
#article-container figure.highlight table {
    width: 100% !important;
    border-collapse: collapse !important;
}
#article-container figure.highlight table td {
    border: none !important;
    padding: 0 !important;
}

/* 6) Butterfly 工具栏对齐（语言标签靠左，复制按钮靠右） */
#article-container figure.highlight .highlight-tools,
#article-container .highlight .highlight-tools {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
}

#article-container figure.highlight .highlight-tools .code-lang,
#article-container figure.highlight .highlight-tools .highlight-lang,
#article-container .highlight .highlight-tools .code-lang,
#article-container .highlight .highlight-tools .highlight-lang {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    left: 14px !important;
    right: auto !important;
}

#article-container figure.highlight .highlight-tools .copy-button,
#article-container figure.highlight .highlight-tools .copy-btn,
#article-container .highlight .highlight-tools .copy-button,
#article-container .highlight .highlight-tools .copy-btn {
    margin-left: auto !important;
}

/* =========================================================
   ✅ 重要：文章页不再做 token 强制上色（避免双重渲染）
   - 也不再对 #article-container .highlight * 强制 background 透明
   ========================================================= */

/* =========================================================
   （可选）如果你想“写作器预览”继续低饱和 token 风格，
   把下面这段取消注释即可。默认先不启用，避免你之后换库冲突。
   ========================================================= */
/*
#mw-system .mw-preview-body .hljs,
#mw-system .mw-preview-body .highlight * {
    background: transparent !important;
}

#mw-system .mw-preview-body .hljs-comment,
#mw-system .mw-preview-body .token.comment,
#mw-system .mw-preview-body .highlight .comment {
    color: #9ca3af !important;
    font-style: normal !important;
}
*/

/* 8) 滚动条（低存在感） */
#article-container pre::-webkit-scrollbar,
#article-container figure.highlight::-webkit-scrollbar,
#mw-system .mw-preview-body pre::-webkit-scrollbar {
    height: 10px;
}
#article-container pre::-webkit-scrollbar-thumb,
#article-container figure.highlight::-webkit-scrollbar-thumb,
#mw-system .mw-preview-body pre::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}
html[data-theme='dark'] #article-container pre::-webkit-scrollbar-thumb,
html[data-theme='dark'] #article-container figure.highlight::-webkit-scrollbar-thumb,
html[data-theme='dark'] #mw-system .mw-preview-body pre::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
}
#article-container pre::-webkit-scrollbar-track,
#article-container figure.highlight::-webkit-scrollbar-track,
#mw-system .mw-preview-body pre::-webkit-scrollbar-track {
    background: transparent;
}

/* ===== 表格 ===== */
#article-container table,
#mw-system .mw-preview-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 14.5px;
}

#article-container th,
#article-container td,
#mw-system .mw-preview-body th,
#mw-system .mw-preview-body td {
    border: 1px solid var(--gpt-border);
    padding: 10px 12px;
}

#article-container th,
#mw-system .mw-preview-body th {
    background: rgba(0,0,0,.02);
    font-weight: 650;
}
html[data-theme='dark'] #article-container th,
html[data-theme='dark'] #mw-system .mw-preview-body th {
    background: rgba(255,255,255,.06);
}

/* ===== 文章 meta 弱化 ===== */
.post-meta,
.post-meta *,
#post-meta,
#post-meta * {
    color: var(--gpt-muted) !important;
}