/* ==========================================================================
   【重制版】深色模式 (Dark Mode) - "玄夜/碑帖" 风格
   设计理念：不是纯黑，而是像在深夜看墨迹，背景是深沉的玄灰色，
   文字像碑帖上的白字，温润不刺眼。
   ========================================================================== */

body.dark-mode {
    /* --- 1. 核心变量重映射 (The Palette of Night) --- */
    --bg-body: #181818;          /* 玄色背景，不发灰，偏深沉 */
    --bg-card: #222222;          /* 卡片背景，稍微提亮一点点 */
    --bg-glass: rgba(34, 34, 34, 0.85); /* 深色毛玻璃 */

    --text-main: #d0d0d0;        /* 也就是所谓的“月白色”，不刺眼的白 */
    --text-sec: #999999;         /* 银灰 */
    --text-light: #666666;       /* 深灰 */

    --border-line: #333333;      /* 深色分割线 */
    --border-dashed: #3a3a3a;    /* 深色虚线 */

    /* 胭脂色在深色下需要稍微提亮，否则看不清 */
    --accent-color: #e69e9e;
    --accent-hover: #f0b4b4;

    /* 深色模式阴影：改为深邃的黑色阴影，增加立体感 */
    --shadow-card: 0 10px 30px -5px rgba(0,0,0,0.5);

    /* 组件特定 */
    --bg-input: rgba(255,255,255,0.03);
    --bg-code: #2b2b2b;          /* 像旧碑石的颜色 */
    --bg-quote: rgba(230, 158, 158, 0.08);
    --bg-tag: #2a2a2a;
    --bg-comment-nested: rgba(255,255,255,0.03);

    /* 强制背景色覆盖 */
    background-color: var(--bg-body);
    color: var(--text-main);
}

/* --- 2. 全局通用组件适配 --- */

/* 头部导航栏 */
body.dark-mode header {
    background-color: var(--bg-glass) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
body.dark-mode .nav-menu a { color: var(--text-sec); }
body.dark-mode .nav-menu a:hover, body.dark-mode .nav-menu a.current { color: var(--text-main); }
body.dark-mode .search-btn { color: var(--text-sec); }
body.dark-mode .mobile-menu-btn span { background-color: var(--text-main); }

/* 移动端下拉菜单 */
@media (max-width: 768px) {
    body.dark-mode .nav-menu {
        background-color: var(--bg-card); /* 必须不透明或深色 */
        border-bottom: 1px solid var(--border-dashed);
    }
}


/* 卡片系统 (文章卡片、侧边栏、详情页) */
body.dark-mode .post-card,
body.dark-mode .article-detail-card,
body.dark-mode .profile-card,
body.dark-mode .category-card-content,
body.dark-mode .comment-form-card,
body.dark-mode .blessing-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.05); /* 微弱的描边代替阴影 */
    box-shadow: var(--shadow-card);
}

/* 卡片悬停效果修正 */
body.dark-mode .post-card:hover {
    border-color: rgba(255,255,255,0.1);
}

/* 文字与链接 */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--text-main);
}

body.dark-mode .post-title a:hover { color: var(--text-main); }
body.dark-mode .post-excerpt { color: var(--text-sec); }


body.dark-mode .blessing-card-text {
    color: var(--text-main);
}


/* 顶部分类、作者、发布时间 */
@media screen and (max-width: 768px) {
    body.dark-mode .article-meta-row .meta-item {
        background: var(--border-line);
    }

}

/* --- 【新增】Hero 区域深度适配 --- */
/* 修复 Hero 在深色模式下的背景和光晕问题 */

body.dark-mode .hero {
    background-color: var(--bg-body); /* 替换宣纸白背景 */
    border-bottom-color: var(--border-dashed);
}

body.dark-mode .hero-title {
    color: var(--text-main);
    /* 关键：修复白色文字阴影造成的“脏光晕”，改为背景同色阴影 */
    text-shadow: 0 0 20px var(--bg-body);
}

body.dark-mode .hero-subtitle {
    color: var(--text-sec);
    text-shadow: 0 0 10px var(--bg-body);
}

body.dark-mode .hero-decor-left {
    color: rgba(255, 255, 255, 0.05); /* 装饰字调淡 */
}

/* 降低静态背景图亮度，使其融入夜色，不刺眼 */
body.dark-mode .hero::before {
    opacity: 0.6;
}


/* --- 3. 细节组件深度适配 --- */

/* 装饰元素 (角落、分割线) */
body.dark-mode .corner-decor { border-color: var(--text-main); }
body.dark-mode .post-card::before { background-color: var(--text-sec); } /* 卡片左侧竖线 */
body.dark-mode .post-card:hover::before {
    background-color: var(--rouge);
}

body.dark-mode .post-footer { border-top-color: var(--border-dashed); }


/* 按钮与标签 */
body.dark-mode .read-more-btn {
    background-color: #333;
    color: #ccc;
    border: 1px solid #444;
    padding: 5px 15px; /* 由于加了边框，需要减少距离 */
}
body.dark-mode .read-more-btn:hover {
    background-color: var(--accent-color);
    color: #1a1a1a; /* 胭脂色背景配深色字更清晰 */
}

body.dark-mode .tag-item {
    border-color: #444;
    color: var(--text-sec);
}
body.dark-mode .tag-item:hover {
    background: #333;
    color: #fff;
}

body.dark-mode .tag-pill {
    background: var(--bg-tag) !important;
    border-color: #444;
    color: var(--text-sec);
}

body.dark-mode .article-tags {
    border-top: 1px dashed var(--border-dashed);
}

/* 分页 */
body.dark-mode .pagination a,
body.dark-mode .pagination span {
    border-color: #444;
    color: var(--text-sec);
}
body.dark-mode .pagination .active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* 输入框 (搜索、评论) */
body.dark-mode .search-input,
body.dark-mode .ink-input,
body.dark-mode .newsletter-input {
    color: var(--text-main);
    border-bottom-color: #444;
    background: var(--bg-input);
}
body.dark-mode .search-input:focus,
body.dark-mode .ink-input:focus {
    border-bottom-color: var(--accent-color);
    background: rgba(255,255,255,0.05);
}
body.dark-mode textarea.ink-input { border-color: #444; }

/* 侧边栏小部件 */
body.dark-mode .widget-title { border-bottom-color: var(--text-main); color: var(--text-main); }
body.dark-mode .list-unstyled li { border-bottom-color: var(--border-dashed); }
body.dark-mode .list-unstyled a { color: var(--text-sec); }
body.dark-mode .list-unstyled a:hover { color: var(--text-main); }
body.dark-mode .avatar { background: var(--bg-card); border-color: #444; }
body.dark-mode .social-links a {
    border: 1px solid var(--text-main);
    color: var(--text-main);
}
body.dark-mode .social-links a:hover {
    background: var(--rouge-hover);
    color: #fff;
    border-color: var(--rouge-hover);
}

body.dark-mode .author-desc{
    color: var(--text-main);
}

body.dark-mode .author-desc-second{
    color: var(--text-sec);
}




/* --- 4. 文章详情页深度适配 --- */

body.dark-mode .article-header { border-bottom-color: var(--text-light); }
body.dark-mode .article-body { color: var(--text-main); }

/* 引用块 (Blockquote) - 变为暗红色背景 */
body.dark-mode .article-body blockquote {
    background-color: var(--bg-quote);
    border-left-color: var(--accent-color);
    color: var(--text-sec);
    box-shadow: none;
}
body.dark-mode .article-body blockquote::after { color: rgba(255,255,255,0.05); }

/* 代码块 (Pre/Code) - 变为“碑帖”黑底灰字 */
body.dark-mode .article-body pre,
body.dark-mode .comment-text pre {
    background-color: var(--bg-code);
    color: var(--text-main);
    border: 1px solid var(--border-dashed);
}
body.dark-mode .article-body code,
body.dark-mode .comment-text code {
    background-color: var(--bg-code);
    color: rgba(230, 158, 158, 0.9);
    border-color: rgba(230, 158, 158, 0.5);
}

body.dark-mode .location-quote{
    background-color: var(--border-dashed);
}
body.dark-mode .location-text { color: var(--text-main); }


/* 文章界面标签 */
body .tags-label {color: var(--text-main);}

/* 上下篇导航、链接 */
body.dark-mode .post-navigation {
    border-top: 1px dashed var(--border-dashed);
    border-bottom: 1px dashed var(--border-dashed);
}
body.dark-mode .nav-link { color: var(--text-main);}
body.dark-mode .nav-link:hover { color: var(--rouge); }

/* --- 5. 评论区深度适配 (重点优化) --- */

body.dark-mode .section-header::before { background-color: var(--text-main); }
body.dark-mode .comment-list > .comment-post-item { border-bottom-color: var(--border-dashed); }

body.dark-mode .comment-user { color: var(--text-main); }
body.dark-mode .comment-time { color: var(--text-light); }
body.dark-mode .comment-text { color: var(--text-sec); }

body.dark-mode .comment-avatar-large {
    background: #2a2a2a;
    color: #666;
}

/* 嵌套评论背景优化：不让它变黑洞 */
body.dark-mode .comment-children {
    border-left-color: rgba(255,255,255,0.1);
}
/* 侧边评论适配 */
body.dark-mode .sidebar-comment-item {
    background: var(--bg-card);
}

body.dark-mode .sidebar-comment-item .sidebar-comment-user{
    color: var(--text-light);
}

body.dark-mode .sidebar-comment-item .sidebar-comment-content{
    color: var(--text-sec);
}



body.dark-mode .cancel-comment-reply a { color: var(--text-sec); }
body.dark-mode .cancel-comment-reply a:hover { color: var(--accent-color); }
body.dark-mode label { color: var(--text-sec); }

/* --- 6. 时间轴 (Timeline) 适配 --- */

/* 时间线竖线 */
body.dark-mode .category-v-line { background-color: #333; }
body.dark-mode .category-post-item:last-of-type .category-v-line {
    background: linear-gradient(to bottom, #333, transparent);
}
body.dark-mode .category-card-content::before { background-color: #333; } /* 连接线 */

/* 日期文字 */
body.dark-mode .category-day { color: var(--text-main); }
body.dark-mode .category-month { color: var(--text-light); }

/* 节点 */
body.dark-mode .category-ink-dot {
    background-color: var(--bg-card);
    border-color: #555;
}
body.dark-mode .category-post-item:hover .category-ink-dot {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(230, 158, 158, 0.1);
}

/* 时间轴卡片 */
body.dark-mode .category-post-title a {
    color: var(--text-main);
    background-image: linear-gradient(to right, var(--accent-color) 0%, var(--accent-color) 100%);
}
body.dark-mode .category-post-excerpt { color: var(--text-sec); }
body.dark-mode .category-post-meta { border-top-color: var(--border-dashed); }
body.dark-mode .category-end-dot { background: #333; }

/* 年份分割 */
body.dark-mode .category-year-break .year-text {
    color: var(--accent-color);
    text-shadow: 1px 1px 0 var(--bg-body), -1px -1px 0 var(--bg-body); /* 修复描边背景色 */
}
body.dark-mode .category-year-break .year-line-decoration {
    background: linear-gradient(to right, #333 0%, transparent 100%);
}
body.dark-mode .category-year-break .year-line-decoration::before { background: #333; }

/* --- 7. 页脚与其它 --- */

body.dark-mode footer {
    background-color: #000; /* 页脚可以比背景更黑一点 */
    color: #777;
    border-top: 1px solid #222;
}
body.dark-mode .footer-decor { fill: var(--bg-body); /* 让山峰SVG颜色与Body背景一致 */ }
body.dark-mode .footer-title { color: #ccc; }
body.dark-mode .copyright { border-top-color: #222; }

/* 图片滤镜：防止深色模式下图片太刺眼 */
body.dark-mode .post-thumb img,
body.dark-mode .avatar img,
body.dark-mode .article-detail-card img,
body.dark-mode .article-detail-card video
{
    opacity: 0.70;
}

body.dark-mode .post-thumb{
    box-shadow: 3px 3px 0 var(--text-sec);
}


/* 视频背景 */
body.dark-mode .article-body video { background-color: #000; }

/* ==========================================================================
   【美化版】深色模式切换按钮 (Mobile Optimized)
   ========================================================================== */

#theme-toggle-btn {
    position: fixed;
    right: 43px;
    bottom: 120px; /* 默认位置 */
    width: 44px;
    height: 44px;

    /* 玻璃拟态背景 */
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    color: var(--text-main);
    border-radius: 50%;

    /* 阴影改为柔和的漫射光 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);

    cursor: pointer;
    z-index: 1001; /* 保证在大多数元素之上，但在移动端菜单之下 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;

    /* 动画 */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

    /* 禁止用户选择，防止点快了变蓝 */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 深色模式下的按钮样式 */
body.dark-mode #theme-toggle-btn {
    background: rgba(40, 40, 40, 0.7); /* 深色半透明 */
    color: #ffd700; /* 月亮变成金色 */
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* 悬停/点击效果 */
#theme-toggle-btn:active {
    transform: scale(0.9);
}

@media (hover: hover) {
    #theme-toggle-btn:hover {
        transform: translateY(-3px) rotate(15deg);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        background: #fff;
    }
    body.dark-mode #theme-toggle-btn:hover {
        background: #333;
        box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    }
}

/* --- 移动端位置优化 --- */
@media screen and (max-width: 768px) {
    #theme-toggle-btn {
        right: 20px;
        bottom: 70px; /* 提高位置，避开可能的底部导航栏或“返回顶部”按钮 */
        width: 38px;  /* 稍微缩小，不挡视线 */
        height: 38px;
        font-size: 18px;

        /* 移动端闲置时半透明，防打扰 */
        opacity: 0.6;
        background: var(--bg-card); /* 实色背景防止看不清内容 */
    }

    /* 激活/滚动时变为不透明 (可选，配合JS) */
    #theme-toggle-btn:hover,
    #theme-toggle-btn:active {
        opacity: 1;
    }

    /* 如果有“返回顶部”按钮，让切换按钮排在它上面或侧面 */
    /* 假设 back-to-top 是 bottom: 20px */
}


/* ==========================================================================
   【最终修正版】View Transitions 扩散动画配置
   使用 CSS 变量 + 纯 CSS 动画，解决 iOS 黑屏和 Chrome 闪烁问题
   ========================================================================== */

/* 定义关键帧：利用 JS 传入的变量 (--v-x, --v-y, --v-r) */
@keyframes clip-open {
    0% { clip-path: circle(0px at var(--v-x) var(--v-y)); }
    100% { clip-path: circle(var(--v-r) at var(--v-x) var(--v-y)); }
}

@keyframes clip-close {
    0% { clip-path: circle(var(--v-r) at var(--v-x) var(--v-y)); }
    100% { clip-path: circle(0px at var(--v-x) var(--v-y)); }
}

/* 1. 基础配置：关闭默认淡入淡出，确保层级正确 */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
    height: 100%;
}

/* 2. 场景一：变暗 (Light -> Dark)
   逻辑：New(深色) 在上层，执行扩散(open)动画
   z-index配置：New(999), Old(1)
*/
html.dark-mode::view-transition-new(root) {
    z-index: 999;
    /* forwards 确保动画结束后保持展开状态，虽然通常用不到，但为了稳健 */
    animation: clip-open 500ms ease-in forwards;
}
html.dark-mode::view-transition-old(root) {
    z-index: 1;
    /* 旧图层保持不动或淡出，这里让它保持不动被覆盖即可 */
    animation: none;
}

/* 3. 场景二：变亮 (Dark -> Light)
   逻辑：Old(深色) 在上层，执行收缩(close)动画
   z-index配置：Old(999), New(1)
   注意：变亮时 html 没有 dark-mode 类，所以用 :root:not(.dark-mode)
*/
:root:not(.dark-mode)::view-transition-old(root) {
    z-index: 999;
    /* 【核心】forwards 确保动画结束后，深色层保持收缩(0px)状态，防止 Chrome 闪烁 */
    animation: clip-close 500ms ease-in forwards;
}
:root:not(.dark-mode)::view-transition-new(root) {
    z-index: 1;
    animation: none;
}