/* ==========================================================
   说说（Talks）样式
   基于 Qexo 官方 qexo-static@1.6.0 的 talks.css 改造。
   原始文件：https://registry.npmmirror.com/qexo-static/1.6.0/files/hexo/talks.css

   改造要点：
     1. 官方默认样式很简陋，这里复用本站custom.css 的毛玻璃参数
        亮色 rgba(255,255,255,.85) + blur(2px) + 白边 .85
        暗色 rgba(30,30,30,.6)   + blur(2px) + 白边 .08
        与 reference 站 luotian.cyou 的卡片观感保持一致
     2. 补暗色模式变体，否则夜间会白底白字
     3. 补移动端响应式断点，375px 下不横向溢出
     4. 所有选择器都带 .qexot 前缀，避免污染其他页面
        （本文件全站加载，所以作用域必须严格限定）

   ⚠️ 不要删掉任何 .qexot-* 类名 —— talks.js 靠这些类名生成 DOM。
   ========================================================== */

/* ---------- 容器 ---------- */

.qexot {
  margin: 0 0 1rem;
}

/* ---------- 加载动画（沿用官方 class） ---------- */

.qexo_loading {
  min-height: 200px;
}

.qexo_part {
  min-height: 100px;
}

.qexo_loader,
.qexo_inner {
  border-radius: 50%;
  position: absolute;
}

/* ---------- 说说卡片 ---------- */

.qexot .qexot-item {
  /* 毛玻璃底 —— 与站点其他卡片一致 */
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  box-shadow: 0 8px 16px -4px rgba(138, 138, 138, 0.15);
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 悬停时轻微上浮，给一点互动感 */
.qexot .qexot-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(138, 138, 138, 0.22);
}

/* ---------- 顶部：标签 ---------- */

.qexot .qexot-top {
  margin-bottom: 0.5rem;
}

.qexot .qexot-tags {
  color: #7a90a8;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  word-break: break-word;
}

/* 标签为空时不占位 */
.qexot .qexot-tags:empty {
  display: none;
}

/* ---------- 中部：正文 ---------- */

.qexot .qexot-content {
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1.7;
  word-break: break-word;
}

.qexot .qexot-content .datacont > *:last-child {
  margin-bottom: 0;
}

/* 说说正文里若含图片，做个圆角并限制最大宽度，避免撑破卡片 */
.qexot .qexot-content img {
  border-radius: 6px;
  display: block;
  height: auto;
  margin: 0.5rem 0;
  max-width: 100%;
}

/* ---------- 底部：时间 + 点赞 ---------- */

.qexot .qexot-bottom {
  align-items: center;
  color: #7a90a8;
  display: flex;
  font-size: 0.8125rem;
  justify-content: space-between;
  margin-top: 0.75rem;
}

.qexot .qexot-info {
  flex: 0 0 auto;
}

.qexot .qexot-datatime {
  color: inherit;
}

/* 点赞按钮 */
.qexot .qexot-like {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 0.35rem;
  transition: transform 0.2s ease;
}

/* QQ 空间「赞」图标
   ---------------------------------------------
   用 PNG + CSS mask 实现，而不是 SVG path。
   原因：这个图标形态特殊（左侧中空竖条 + 右侧中空手掌 + 拇指根部左倾），
   手绘路径试了四轮都对不上（先后出现像字母 b、像字母 L、竖条与手掌粘连、
   右侧多出台阶等问题）。mask 直接使用图形本身，形状100% 精确。

   资源：/img/qzone-like.png（396×400，白色形状 + 透明背景的 alpha 遮罩）

   换色原理：mask 只取图形的 alpha 通道，显示什么颜色由 background-color 决定，
             所以「点赞前后的形状和大小完全一致，只有颜色变化」是天然成立的。
   ------------------------------------------------ */
.qexot .qexot-like-icon {
  background-color: #7a90a8;          /* 未点赞：灰蓝 */
  display: inline-block;
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
  -webkit-mask: url("/img/qzone-like.png") no-repeat center / contain;
  mask: url("/img/qzone-like.png") no-repeat center / contain;
  transition: background-color 0.2s ease;
}

/* 已点赞：只改颜色，形状与尺寸完全不变 */
.qexot .qexot-like-on .qexot-like-icon {
  background-color: #ff4d6a;
}

.qexot .qexot-like:hover .qexot-like-icon {
  background-color: #ff4d6a;
}

.qexot .qexot-like:hover {
  transform: scale(1.08);
}

/* 点赞时的轻震动反馈 */
@keyframes qexot-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.qexot .qexot-like.qexot-pop {
  animation: qexot-pop 0.32s ease;
}

.qexot .qexot-like-num {
  color: #7a90a8;
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
  text-align: left;
  transition: color 0.2s ease;
}

.qexot .qexot-like-on .qexot-like-num {
  color: #ff4d6a;
}

/* ---------- 「加载更多」按钮 ---------- */

.qexot-more {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  box-shadow: 0 8px 16px -4px rgba(138, 138, 138, 0.15);
  color: #7a90a8;
  cursor: pointer;
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.5rem 1.5rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.qexot-more:hover {
  border-color: #7a90a8;
  color: #5c6c7f;
}

.qexot-more.qexot-loading-text {
  cursor: default;
  opacity: 0.6;
}

.qexot-more.qexot-loading-text:hover {
  border-color: rgba(255, 255, 255, 0.85);
  color: #7a90a8;
}

/* ---------- 错误 / 空状态（新增） ---------- */

.qexot .qexot-error {
  text-align: center;
}

.qexot .qexot-error-msg {
  color: #7a90a8;
  font-size: 0.9375rem;
  margin: 0.5rem 0;
}

.qexot-retry {
  background: transparent;
  border: 1px solid rgba(122, 144, 168, 0.5);
  border-radius: 6px;
  color: #7a90a8;
  cursor: pointer;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  padding: 0.35rem 1.1rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.qexot-retry:hover {
  border-color: #7a90a8;
  color: #5c6c7f;
}

/* ==========================================================
   夜间模式
   数值与 custom.css 第 55-68 行的卡片参数保持一致
   ========================================================== */

html[data-theme="dark"] .qexot .qexot-item,
html[data-theme="dark"] .qexot-more {
  background: rgba(30, 30, 30, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .qexot .qexot-item:hover {
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .qexot .qexot-tags,
html[data-theme="dark"] .qexot .qexot-bottom,
html[data-theme="dark"] .qexot-more,
html[data-theme="dark"] .qexot .qexot-error-msg {
  color: #8da4bb;
}

/* 夜间模式的点赞配色
   注意：图标现在是 mask + background-color，不再用 currentColor，
   所以要单独给 .qexot-like-icon 设background-color。 */
html[data-theme="dark"] .qexot .qexot-like-icon {
  background-color: #8da4bb;         /* 未点赞：暗色主题下的灰蓝 */
}

html[data-theme="dark"] .qexot .qexot-like:hover .qexot-like-icon,
html[data-theme="dark"] .qexot .qexot-like-on .qexot-like-icon {
  background-color: #ff6b81;
}

html[data-theme="dark"] .qexot .qexot-like-num {
  color: #8da4bb;
}

html[data-theme="dark"] .qexot .qexot-like-on .qexot-like-num {
  color: #ff6b81;
}

html[data-theme="dark"] .qexot-more:hover,
html[data-theme="dark"] .qexot-retry:hover {
  border-color: #8da4bb;
  color: #c8d6e5;
}

html[data-theme="dark"] .qexot-retry {
  border-color: rgba(141, 164, 187, 0.5);
  color: #8da4bb;
}

/* ==========================================================
   移动端（375px 常见宽度）
   ========================================================== */

@media screen and (max-width: 768px) {
  .qexot .qexot-item {
    border-radius: 8px;
    padding: 0.875rem 1rem;
  }

  .qexot .qexot-content {
    font-size: 0.90625rem;
  }

  .qexot .qexot-bottom {
    font-size: 0.78125rem;
  }

  .qexot-more {
    display: block;
    width: 100%;
  }
}