/* ====================================================
   Butterfly 5.7.1 · 玻璃拟态 (Glassmorphism) 美化
   配套：_config.butterfly.yml 中 nav.fixed: true
   ==================================================== */

/* ---------- 1. 页面渐变背景（亮色） ---------- */
body {
  background:
    radial-gradient(110% 55% at 50% -5%, rgba(73, 177, 245, 0.32), transparent 65%),
    radial-gradient(circle at 15% 12%, rgba(73, 177, 245, 0.25), transparent 45%),
    radial-gradient(circle at 85% 18%, rgba(168, 85, 247, 0.20), transparent 45%),
    radial-gradient(circle at 50% 95%, rgba(236, 72, 153, 0.18), transparent 55%),
    linear-gradient(135deg, #e9f5ff 0%, #f2ecff 45%, #ffeef7 100%);
  background-attachment: fixed;
}

/* 暗色模式渐变背景 */
[data-theme="dark"] body {
  background:
    radial-gradient(110% 55% at 50% -5%, rgba(73, 177, 245, 0.22), transparent 65%),
    radial-gradient(circle at 15% 12%, rgba(73, 177, 245, 0.18), transparent 45%),
    radial-gradient(circle at 85% 18%, rgba(168, 85, 247, 0.16), transparent 45%),
    radial-gradient(circle at 50% 95%, rgba(236, 72, 153, 0.12), transparent 55%),
    linear-gradient(135deg, #0f1430 0%, #191035 45%, #1c0f28 100%);
  background-attachment: fixed;
}

/* ---------- 2. 玻璃拟态配色变量 ---------- */
:root {
  --glass-bg: rgba(255, 255, 255, 0.48);
  --glass-bg-strong: rgba(255, 255, 255, 0.64);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 6px 24px rgba(31, 38, 135, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-hover: 0 14px 36px rgba(31, 38, 135, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

[data-theme="dark"] {
  --glass-bg: rgba(16, 21, 45, 0.55);
  --glass-bg-strong: rgba(16, 21, 45, 0.80);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-shadow: 0 6px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-hover: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- 3. 核心卡片毛玻璃化 ---------- */
#recent-posts .recent-post-item,
#post,
#page,
#archive,
#tag,
#category,
#aside-content .card-widget {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* 首页文章卡片悬停上浮 */
#recent-posts .recent-post-item:hover {
  transform: translateY(-6px);
  background: var(--glass-bg-strong) !important;
  box-shadow: var(--glass-hover) !important;
}

/* 侧栏卡片悬停 */
#aside-content .card-widget:hover {
  background: var(--glass-bg-strong) !important;
  box-shadow: var(--glass-hover) !important;
}

/* ---------- 4. 顶部导航：低白度渐变玻璃 + 彩色光晕（无顶部大图模式） ---------- */
#page-header.not-top-img {
  background: transparent !important;
}

/* 导航条：不再是纯白，而是左右泛蓝紫的渐变玻璃 */
#page-header.not-top-img #nav {
  background:
    radial-gradient(130% 220% at 4% -20%, rgba(73, 177, 245, 0.35), transparent 55%),
    radial-gradient(130% 220% at 96% -20%, rgba(236, 72, 153, 0.22), transparent 55%),
    radial-gradient(130% 220% at 55% -30%, rgba(168, 85, 247, 0.20), transparent 60%),
    rgba(255, 255, 255, 0.38) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(73, 177, 245, 0.35);
  box-shadow: 0 4px 24px rgba(73, 177, 245, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* 导航滚动固定后：底色略实一些，保证文字可读，光晕弱化 */
#page-header.not-top-img #nav.fixed,
#page-header.not-top-img #nav.nav-fixed,
#page-header.not-top-img.fixed #nav {
  background:
    radial-gradient(130% 220% at 4% -20%, rgba(73, 177, 245, 0.16), transparent 55%),
    radial-gradient(130% 220% at 96% -20%, rgba(236, 72, 153, 0.10), transparent 55%),
    rgba(244, 250, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

/* 暗色模式导航 */
[data-theme="dark"] #page-header.not-top-img #nav {
  background:
    radial-gradient(130% 220% at 4% -20%, rgba(73, 177, 245, 0.30), transparent 55%),
    radial-gradient(130% 220% at 96% -20%, rgba(236, 72, 153, 0.22), transparent 55%),
    radial-gradient(130% 220% at 55% -30%, rgba(168, 85, 247, 0.25), transparent 60%),
    rgba(16, 22, 48, 0.55) !important;
  border-bottom: 1px solid rgba(129, 140, 248, 0.35);
}

[data-theme="dark"] #page-header.not-top-img #nav.fixed,
[data-theme="dark"] #page-header.not-top-img #nav.nav-fixed,
[data-theme="dark"] #page-header.not-top-img.fixed #nav {
  background:
    radial-gradient(130% 220% at 4% -20%, rgba(73, 177, 245, 0.14), transparent 55%),
    radial-gradient(130% 220% at 96% -20%, rgba(236, 72, 153, 0.10), transparent 55%),
    rgba(13, 18, 40, 0.85) !important;
}

/* 站名文字：蓝紫渐变 */
#page-header.not-top-img #nav .site-name {
  background: linear-gradient(90deg, #2563eb, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] #page-header.not-top-img #nav .site-name {
  background: linear-gradient(90deg, #60a5fa, #e879f9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 导航菜单项 hover：柔和强调色 */
#page-header.not-top-img #nav .menus_item a.site-page:hover {
  color: #2563eb;
}

[data-theme="dark"] #page-header.not-top-img #nav .menus_item a.site-page:hover {
  color: #a5b4fc;
}

/* ---------- 5. 细节微调 ---------- */
/* 代码块圆角 */
#article-container .highlight,
#article-container figure.highlight {
  border-radius: 12px;
}

/* 图片圆角 */
#article-container img {
  border-radius: 10px;
}

/* 阅读区卡片内部不透明小元素（引用/提示块）保持清晰 */
#article-container blockquote {
  background: rgba(255, 255, 255, 0.35);
  border-left-color: #49b1f5;
}

[data-theme="dark"] #article-container blockquote {
  background: rgba(255, 255, 255, 0.04);
}

/* ====================================================
   6. 首页文章 → 多列小卡片（一行多张）
   ==================================================== */
#recent-posts.recent-posts .recent-post-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

#recent-posts .recent-post-item {
  display: flex !important;
  flex-direction: column;
  margin-bottom: 0 !important;
  height: auto !important;
  overflow: hidden;
}

/* 封面压成顶部细色带，不再占半张卡 */
#recent-posts .recent-post-item .post_cover,
#recent-posts .recent-post-item .post_cover.left,
#recent-posts .recent-post-item .post_cover.right {
  width: 100% !important;
  height: 50px !important;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
}

#recent-posts .recent-post-item .post_cover .post-bg {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* 信息区堆叠在封面下方 */
#recent-posts .recent-post-item .recent-post-info {
  padding: 16px 18px 20px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 标题最多两行 */
#recent-posts .recent-post-item .recent-post-info .article-title {
  font-size: 1.08em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-bottom: 6px;
}

/* 摘要最多三行 */
#recent-posts .recent-post-item .recent-post-info .content {
  margin-top: 8px;
  font-size: 0.9em;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* 分类标签显示在封面左下角：选中作者时的标签改造成 info 上边距即可，保持简洁 */
#recent-posts .recent-post-item .recent-post-info .article-meta-wrap {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.82em;
}

/* 窄屏回退：一行一张但保持卡片感 */
@media screen and (max-width: 767px) {
  #recent-posts.recent-posts .recent-post-items {
    grid-template-columns: 1fr;
  }
}

/* ====================================================
   7. 文章页顶部 banner 压缩（不再留 400px 大片空白）
   ==================================================== */
/* 原高度 400px（移动端 360px）→ 150px 紧凑头图 */
#page-header.post-bg {
  height: 200px !important;
}

/* 标题/日期信息区下移到底部贴边 */
#page-header.post-bg #post-info {
  bottom: 16px !important;
}

#page-header.post-bg #post-info .post-title {
  font-size: 1.5em !important;
  margin-bottom: 4px;
  line-height: 1.35;
}

#page-header.post-bg #post-info #post-meta {
  font-size: 0.85em;
  opacity: 0.9;
}

/* 移动端再矮一点 */
@media screen and (max-width: 768px) {
  #page-header.post-bg {
    height: 130px !important;
  }

  #page-header.post-bg #post-info .post-title {
    font-size: 1.25em !important;
  }
}

/* ====================================================
   8. 页脚深色玻璃（保证底部文字清晰可读）
   ==================================================== */
#footer {
  background:
    radial-gradient(120% 200% at 10% -30%, rgba(73, 177, 245, 0.25), transparent 60%),
    radial-gradient(120% 200% at 90% -30%, rgba(236, 72, 153, 0.18), transparent 60%),
    rgba(20, 26, 58, 0.88) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9) !important;
}

#footer>*,
#footer a {
  color: rgba(255, 255, 255, 0.88) !important;
}

#footer .footer-separator {
  color: rgba(255, 255, 255, 0.45) !important;
}

#footer a:hover {
  color: #7dd3fc !important;
  text-shadow: 0 0 12px rgba(125, 211, 252, 0.5);
}

/* ====================================================
   9. Live2D 看板娘（stevenjoezhang/live2d-widget）玻璃适配
   ==================================================== */
#waifu {
  z-index: 999 !important;
}

/* 模型限宽，避免太大遮挡正文 */
#waifu canvas {
  max-width: 240px;
  height: auto !important;
}

/* 鼠标移开时轻微半透明，不打扰阅读 */
#waifu {
  opacity: 0.95;
  transition: opacity 0.3s;
}

#waifu:hover {
  opacity: 1;
}

/* 说话气泡玻璃化 */
#waifu #waifu-tips {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  color: #334155 !important;
}

/* 工具按钮列圆角 + hover 主题色 */
#waifu #waifu-tool {
  border-radius: 8px;
  overflow: hidden;
}

#waifu #waifu-tool span:hover {
  background: #49b1f5;
  color: #fff;
}

/* 暗色模式适配 */
[data-theme="dark"] #waifu #waifu-tips {
  background: rgba(16, 21, 45, 0.78) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ====================================================
   9.2 看板娘固定到右下角（官方默认锚定在左下角）
   原则：右下角落 + 缩小高度 + 平时半透明，不挡正文；
   右下悬浮按钮组 #rightside 整体上移，互不遮挡。
   ==================================================== */
#waifu {
  left: auto !important;
  right: 10px !important;
}

/* 画布整体缩小（200x240），避免占太高挡住阅读区 */
#waifu canvas {
  width: 200px !important;
  height: 240px !important;
}

/* 平时略透明不打扰阅读，鼠标靠近恢复全显 */
#waifu {
  opacity: 0.85;
}

/* 悬停工具菜单移到看板娘左侧弹出，不超出右屏 */
#waifu #waifu-tool {
  left: -46px !important;
  right: auto !important;
}

/* 气泡右对齐画布（浮在头顶），避免超出右屏被裁剪 */
#waifu #waifu-tips {
  left: auto !important;
  right: 0 !important;
  margin: -34px 0 0 !important;
}

/* 右下悬浮按钮组上移到看板娘头顶高度之上，互不遮挡（桌面端） */
@media screen and (min-width: 768px) {
  #rightside {
    bottom: 300px !important;
  }
}