/* extra.css */

/* 1. 强制锁定背景色，防止深色模式下闪白屏 */
html, body {
  background-color: var(--md-default-bg-color);
  transition: background-color 0s; /* 禁用背景色的过渡动画，防止切换时闪烁 */
}

/* 2. 优化页面切换时的内容闪烁 */
.md-content {
  /* 保持内容区域的背景一致 */
  background-color: var(--md-default-bg-color);
}



/* 引入 Noto Serif SC 字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');

/* 应用到正文 */
body, .md-typeset {
  /* 优先使用宋体风格，备用系统字体 */
  font-family: "Noto Serif SC", "Merriweather", "Times New Roman", serif;
}

/* 标题保持无衬线，显得现代一点 (可选) */
h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}




/* ==============================================
   1. Logo 设置 
   ============================================== */
.md-header__button.md-logo img {
    background-color: transparent !important;
    height: 32px;
    width: auto;
    margin-top: 2px;
}
.md-nav__source .md-icon img {
    background-color: transparent !important;
    height: 48px;
    width: auto;
}

/* ==============================================
   2. Waline 评论区美化 (最终审美优化版)
   ============================================== */
#waline {
    margin-top: 0; 
    padding: 0;
    --waline-theme-color: var(--md-primary-fg-color);
}

.wl-editor {
    border-radius: 16px !important;
    border: 1px solid var(--md-default-fg-color--lightest) !important;
    padding: 16px !important;
    min-height: 80px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
    transition: all 0.3s ease;
}
.wl-editor:focus-within {
    border-color: var(--md-primary-fg-color) !important;
    box-shadow: 0 4px 16px rgba(var(--md-primary-fg-color--rgb), 0.15) !important;
}

/* --- Reaction 容器：居中与间距 --- */
.wl-reaction {
    display: flex !important;
    justify-content: center !important; 
    flex-wrap: wrap !important;
    
    gap: 18px !important; 
    
    margin-bottom: 24px !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* 隐藏 Ref 标题 */
.wl-reaction-title { display: none !important; }

/* --- 胶囊按钮样式 --- */
.wl-reaction-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background: rgba(128, 128, 128, 0.08) !important;
    border: 1px solid transparent !important;
    border-radius: 50px !important;
    
    padding: 6px 18px !important;
    margin: 0 !important; 
    height: 38px !important; 
    
    flex: none !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; 
}

/* 悬停 */
.wl-reaction-item:hover {
    transform: translateY(-4px); 
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}
[data-md-color-scheme="slate"] .wl-reaction-item:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* --- Active 状态 (实心高亮) --- */

/* 左侧3个 (积极)：主题色 */
.wl-reaction-item:nth-of-type(-n+3).active {
    background: var(--md-primary-fg-color) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(var(--md-primary-fg-color--rgb), 0.4) !important;
    transform: scale(1.08);
}

/* 右侧3个 (消极)：警示红 */
.wl-reaction-item:nth-of-type(n+4).active {
    background: #ff5252 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255, 82, 82, 0.4) !important;
    transform: scale(1.08);
}

/* 图标 */
.wl-reaction-img {
    display: inline-block !important;
    height: 19px !important;
    width: 19px !important;
    margin-right: 7px !important; 
    vertical-align: middle !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

.wl-reaction-text {
    font-size: 13px !important;
    font-weight: bold !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.wl-power { display: none !important; }
.wl-btn.primary { 
    border-radius: 50px !important; 
    padding: 8px 26px !important;
    border: none !important; 
    font-weight: bold;
}

/* ----------------------------------------------------
 * 1. 【丝滑浮出】内容动画效果 (Fade-in Slide-up)
 * ---------------------------------------------------- */

/* 定义动画关键帧 */
@keyframes content-fade-in {
  0% {
    /* 初始状态：完全隐藏 */
    opacity: 0;
    /* 初始状态：向上移动 15px (准备从底部浮出) */
    transform: translateY(15px);
  }
  100% {
    /* 结束状态：完全显示 */
    opacity: 1;
    /* 结束状态：回到原始位置 */
    transform: translateY(0);
  }
}

/* 针对主要的文档内容容器 (文章正文) */
.md-content__inner {
  /* 初始时隐藏 */
  opacity: 0;
  
  /* 应用动画效果 */
  animation-name: content-fade-in;
  /* 动画持续时间：0.6 秒 */
  animation-duration: 0.6s; 
  /* 动画曲线：平滑 */
  animation-timing-function: ease-in-out;
  /* 动画延迟：0.1 秒 */
  animation-delay: 0.1s; 
  /* 动画结束后，保持结束状态 */
  animation-fill-mode: forwards;
}

/* 【新增/修复】右侧目录 (文章目录) 同步浮出 */
.md-sidebar--secondary {
  /* 初始时隐藏 */
  opacity: 0;

  /* 应用相同的动画效果，实现同步 */
  animation-name: content-fade-in;
  animation-duration: 0.6s; 
  animation-timing-function: ease-in-out;
  animation-delay: 0.1s; /* 与正文内容相同的延迟 */
  animation-fill-mode: forwards;
}

/* 左侧目录 (主导航) 不添加任何动画代码，保持即时显示。*/


/* 代码块 Mac 风格窗口化 */
.md-typeset pre > code {
  /* 给代码块增加圆角 */
  border-radius: 8px; 
}

/* 伪造 Mac 窗口的三个小圆点 */
.md-typeset pre::before {
  content: "";
  display: block;
  background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="%23FF5F56" stroke="%23E0443E" stroke-width=".5"/><circle cx="26" cy="6" r="6" fill="%23FFBD2E" stroke="%23DEA123" stroke-width=".5"/><circle cx="46" cy="6" r="6" fill="%2327C93F" stroke="%231AAB29" stroke-width=".5"/></g></svg>') no-repeat;
  height: 20px;
  margin-bottom: 8px; /* 圆点和代码的距离 */
  margin-left: 8px;   /* 左边距 */
}

/* extra.css */
/* 让页面顶部显示一个跟随阅读进度的细条 */
.md-header {
  border-bottom: 2px solid var(--md-primary-fg-color); /* 简单版：加个底边框 */
}



/* Webkit 浏览器 (Chrome, Edge, Safari) 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent; 
}
::-webkit-scrollbar-thumb {
  background-color: #b0bec5; /* 滚动条颜色，对应你的 blue grey */
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #78909c; /* 鼠标悬停变深 */
}


/* 阅读进度条样式 */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0%;        /* 初始宽度为 0 */
  height: 3px;      /* 进度条厚度 */
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); /* 漂亮的渐变蓝 */
  transition: width 0.1s; /* 让变化丝滑一点 */
  pointer-events: none; /* 让鼠标可以穿透它点击下面的内容 */
}