/* ==========================================================================
   Jz52_xtheme —— 极致·说说（Jz52_shuoshuo）主题模板配套样式
   作用：把插件自带的 --jz52-x-* 变量映射到主题的 --x-* 变量，让说说页
        与主题共用一套三档配色；再补齐说说卡片、标签胶囊、详情页、留言区。
   加载顺序：x.css → （插件）front.css → 本文件，因此这里的规则负责收口。
   ========================================================================== */

/* ---------- 1. 变量映射：插件组件跟随主题配色 ---------- */
/* 用 html:root 提高特异性，压过 front.css 里的 :root 与 prefers-color-scheme 分支 */
html:root {
  --jz52-x-bg: var(--x-bg);
  --jz52-x-card: var(--x-bg);
  --jz52-x-bg-hover: var(--x-bg-hover);
  --jz52-x-border: var(--x-border);
  --jz52-x-text: var(--x-text);
  --jz52-x-muted: var(--x-dim);
  --jz52-x-muted2: var(--x-dim);
  --jz52-x-accent: var(--x-accent);
  --jz52-x-accent-bg: var(--x-bg-active);
  --jz52-x-heart: #f91880;
  --jz52-x-heart-bg: rgba(249, 24, 128, 0.12);
  --jz52-x-shadow: var(--x-shadow);
  --jz52-x-pop-bg: var(--x-card);
}

/* front.css 的 body 规则会盖掉主题字号/字体，这里收回来 */
html body.x-body--moments {
  font-family: var(--x-font);
  font-size: var(--x-fs);
  line-height: 1.5;
  color: var(--x-text);
  background: var(--x-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 2. 说说卡片（复用主题 .x-post 结构） ---------- */
.x-moment__text {
  font-size: var(--x-fs);
  /* X 正文是 15px/20px（≈1.33），原来的 1.6 让每条说说都比文章卡片虚一截 */
  line-height: 1.4;
  color: var(--x-text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.x-moment__text > *:first-child { margin-top: 0; }
.x-moment__text > *:last-child { margin-bottom: 0; }
.x-moment__text img { border-radius: var(--x-radius); }
.x-moment__text a { color: var(--x-accent); }
.x-moment__text a:hover { text-decoration: underline; }

.x-moment__extra {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--x-border);
  border-radius: var(--x-radius);
  color: var(--x-dim);
  font-size: 14px;
}

/* 媒体：纯图片由主题的 X 多图布局渲染（Jz52_xtheme_MomentMedia，图片带 data-x-full 走主题灯箱）；
   混了视频/音频时回落插件的 MediaHtml，那时容器仍是 .jz52-shuoshuo-media，沿用插件自己的边框圆角 */
.x-moment__media { margin-top: 12px; }
.x-moment__media img { max-width: 100%; }
.x-moment__media .jz52-ss-video { margin-top: 0; }

.x-moment__media .jz52-shuoshuo-media img {
  border: 1px solid var(--x-border);
}

/* 置顶 / 私密 / 待审核徽标 */
.x-moment__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: 9999px;
  border: 1px solid var(--x-border);
  font-size: 12px;
  line-height: 18px;
  color: var(--x-dim);
  white-space: nowrap;
}
.x-moment__badge i { font-size: 12px; }
.x-moment__badge--warn {
  color: #ffd400;
  border-color: rgba(255, 212, 0, 0.4);
  background: rgba(255, 212, 0, 0.12);
}

/* ---------- 3. 点赞（双图标切换 + 心形配色） ---------- */
.x-like-ico { display: inline-grid; place-items: center; }
.x-like-ico > i { grid-area: 1 / 1; }
.x-like-ico .ri-heart-3-fill { display: none; }

.x-action.jz52-shuoshuo-like,
.x-moment__like.jz52-shuoshuo-like {
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  font-weight: 400;
  color: var(--x-dim);
}
.x-action.jz52-shuoshuo-like:hover,
.x-moment__like.jz52-shuoshuo-like:hover { color: #f91880; }
.x-action.jz52-shuoshuo-like:hover .x-action__icon { background: rgba(249, 24, 128, 0.12); }
.x-action.jz52-shuoshuo-like.is-liked,
.x-moment__like.jz52-shuoshuo-like.is-liked { color: #f91880; }

.jz52-shuoshuo-like.is-liked .x-like-ico .ri-heart-3-line { display: none; }
.jz52-shuoshuo-like.is-liked .x-like-ico .ri-heart-3-fill { display: block; }

/* ---------- 4. 标签筛选胶囊 ---------- */
.x-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--x-border);
  scrollbar-width: none;
}
.x-chips::-webkit-scrollbar { display: none; }

/* X 的筛选胶囊是「灰底无边」，选中才反相成黑底；
   原来的白底+细边在浅色页面上几乎看不出边界，选中项反而显得突兀 */
.x-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 0;
  background: var(--x-field);
  color: var(--x-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--x-dur) var(--x-ease), color var(--x-dur) var(--x-ease);
}
.x-chip:hover { background: var(--x-bg-active); }
.x-chip.is-active {
  background: var(--x-text);
  color: var(--x-bg);
}
.x-chip__num { font-weight: 400; opacity: 0.6; font-size: 12px; }

/* ---------- 5. 发布区（插件结构，仅做贴合主题的微调） ---------- */
/* 游客与无发布权限时走主题的 .x-composer 结构（见 x.css 第 8 节），这里只补状态差异 */
.x-composer--locked { align-items: flex-start; }
.x-composer--locked .x-composer__placeholder { cursor: default; }

.x-moment-composer {
  border-bottom: 1px solid var(--x-border);
  padding: 12px 16px;
}
.x-moment-composer .jz52-shuoshuo-composer-text { color: var(--x-text); }
.x-moment-composer .jz52-shuoshuo-composer-btn {
  /* 与「发帖/登录」统一成 X 的黑白实心按钮；未输入时半透明表示不可用 */
  background: var(--x-text);
  color: var(--x-bg);
  border-radius: 9999px;
}
.x-moment-composer .jz52-shuoshuo-composer-btn:hover:not(:disabled) {
  background: var(--x-text);
  opacity: 0.88;
}
.x-moment-composer .jz52-shuoshuo-composer-btn:disabled { opacity: 0.5; }
.x-moment-composer .jz52-ss-tool-btn {
  border-radius: 50%;
}
.x-moment-composer .jz52-ss-tool-btn i { font-size: 19px; }

/* ---------- 6. 详情页 ---------- */
.x-moment--single {
  padding: 16px;
  border-bottom: 1px solid var(--x-border);
}
.x-moment__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.x-avatar--48 {
  width: 48px;
  height: 48px;
  font-size: 19px;
  flex: none;
}
.x-moment__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* 名字与认证蓝标排在同一行 */
.x-moment__title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.x-moment__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--x-text);
}
.x-moment__name:hover { text-decoration: underline; }
.x-moment__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--x-dim);
}

.x-moment__body { margin-top: 14px; }
.x-moment__text--single {
  font-size: 19px;
  line-height: 1.55;
}
.x-moment__text--single img { border-radius: var(--x-radius); }

.x-moment__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--x-border);
}
.x-moment__stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--x-dim);
}
.x-moment__stats > span,
.x-moment__like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.x-moment__stats i { font-size: 18px; }

/* 详情页分享：与点赞同排，样式也保持一致（只有图标 + 文字，无底色） */
.x-moment__share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: var(--x-dim);
  transition: color var(--x-dur) var(--x-ease);
}
.x-moment__share:hover { color: var(--x-accent); }

.x-moment__back {
  padding: 16px;
  border-bottom: 1px solid var(--x-border);
}
.x-moment__back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--x-accent);
}
.x-moment__back a:hover { text-decoration: underline; }

/* ---------- 7. 留言区（结构沿用插件，仅做配色收口） ---------- */
/* 留言的 DOM 由插件的 Jz52_shuoshuo_CommentItemHtml() 统一生成（首屏与 AJAX 共用），
   主题模板结构与之对齐，因此这里不重写布局，只补几处颜色与图标尺寸。 */
.x-replies { padding: 8px 16px 20px; }
.x-replies__title { font-size: 18px; }

/* 首字头像用主题的品牌色，覆盖插件里的黑底 */
.jz52-ss-comment-avatar.jz52-ss-avatar-text {
  background: var(--x-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* 回复按钮用主题的字体图标，与插件里的 svg 尺寸对齐 */
.jz52-ss-cmt-reply i { font-size: 15px; }

/* 提交按钮：front.css 的 .jz52-ss-cmt-btn 是深色底，这里改回主题强调色 */
.jz52-ss-cmt-btn,
button.jz52-ss-cmt-btn {
  min-width: 88px;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 9999px;
  background: var(--x-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--x-dur) var(--x-ease);
}
.jz52-ss-cmt-btn:hover { background: var(--x-blue-hover); }
.jz52-ss-cmt-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.x-pagebar__gap {
  padding: 0 4px;
  color: var(--x-dim);
}

/* ---------- 8. 响应式 ---------- */
@media (max-width: 700px) {
  .x-chips { padding: 8px 12px; }
  .x-moment-composer { padding: 10px 12px; }
  .x-moment--single { padding: 12px; }
  .x-moment__text--single { font-size: 17px; }
  .x-replies { padding: 6px 12px 16px; }
  .jz52-ss-cmt-fields { grid-template-columns: 1fr; }
  .x-moment__back { padding: 12px; }
}