/* ==========================================================================
   论坛内容页（帖子详情）· 视觉美化层
   --------------------------------------------------------------------------
   作用：仅覆盖 default bbs 样式中「帖子详情主体」的视觉表现，不改变 DOM 结构与
         JS 交互（点赞 / 赏钱 / 收藏 / 回复 / 打赏列表 / 评论加载均保持原样）。
   依赖：market.css 的主题变量（--brand / --surface / --border / --text ...）
         随 html[data-theme="dark"] 自动切换深浅色；
         侧栏样式复用同目录 bbs_index.css（本文件只管左栏帖子主体）。
   注意：本文件必须在 pc_show.css / bbs_index.css 之后加载；修改后请顶版本号。
   ========================================================================== */

/* ============================ 帖子主体卡片 ============================ */
.ShowContent {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 26px 26px;
  position: relative;
  transition: box-shadow .2s;
}
.ShowContent:hover { box-shadow: var(--shadow); }

/* ---------- 面包屑 + 分享/收藏/举报 行 ---------- */
.ShowContent .topinfo {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-3);
}
.ShowContent .topinfo .guide a { color: var(--text-2); margin-right: 2px; }
.ShowContent .topinfo .guide a:hover { color: var(--brand); }
.ShowContent .topinfo .guide i { font-style: normal; }
.ShowContent .SharBox dt { display: flex; gap: 18px; flex-wrap: wrap; }
.ShowContent .SharBox dt span,
.ShowContent .SharBox dt a {
  color: var(--text-2);
  cursor: pointer;
  transition: color .18s;
}
.ShowContent .SharBox dt span:hover,
.ShowContent .SharBox dt a:hover { color: var(--brand); }
.ShowContent .SharBox dt li { font-style: normal; }
/* 分享弹层（bshare）保持原交互，仅让定位不破坏卡片流 */
.ShowContent .SharBox dd {
  position: absolute;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
}

/* ---------- 标题 ---------- */
.ShowContent .title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  padding: 4px 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* ---------- 作者信息条（模板内联 background:#F9F9F9，需 !important 覆盖） ---------- */
.ShowContent .thebase {
  align-items: center;
  gap: 14px;
  background: var(--surface-2) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 18px;
}
.ShowContent .thebase ul ol {
    width: 60px;
    padding: inherit;
}
.ShowContent .thebase ul { display: flex; align-items: center; gap: 12px; }
.ShowContent .thebase ol { width: 48px; height: 48px; }
.ShowContent .thebase ol a {
  display: block;
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .18s;
}
.ShowContent .thebase ol a:hover { border-color: var(--brand); }
.ShowContent .thebase ol img { width: 100%; height: 100%; object-fit: cover; }
.ShowContent .thebase li { color: var(--text-3); font-size: 13px; line-height: 1.7; }
.ShowContent .thebase li > div:first-child span { color: var(--text); font-weight: 600; cursor: pointer; }
.ShowContent .thebase li > div:first-child span:hover { color: var(--brand); }
.ShowContent .thebase li a { color: var(--brand); }
.ShowContent .thebase dl { margin-left: auto; text-align: right; color: var(--text-3); font-size: 13px; }
.ShowContent .thebase dl dt { color: var(--text-3); }
.ShowContent .thebase dl dt i { color: var(--brand); padding-right: 3px; }
.ShowContent .thebase dl dd { display: inline-flex; align-items: center; gap: 6px; }
.ShowContent .thebase dl dd i { color: var(--text-2); }

/* ---------- 正文内容 ---------- */
.ShowContent .content_html {
  color: var(--text);
  font-size: 15px;
  line-height: 1.85;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ShowContent .content_html p { margin: 0 0 14px; }
.ShowContent .content_html img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 6px 0;
}
.ShowContent .content_html a { color: var(--brand); text-decoration: none; }
.ShowContent .content_html a:hover { text-decoration: underline; }
.ShowContent .content_html h1,
.ShowContent .content_html h2,
.ShowContent .content_html h3,
.ShowContent .content_html h4 { margin: 18px 0 10px; color: var(--text); line-height: 1.4; }
.ShowContent .content_html ul,
.ShowContent .content_html ol { padding-left: 22px; margin: 0 0 14px; }
.ShowContent .content_html li { margin: 4px 0; }
.ShowContent .content_html blockquote {
  border-left: 3px solid var(--brand);
  padding-left: 14px;
  color: var(--text-2);
  margin: 12px 0;
}
.ShowContent .content_html code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  color: var(--brand);
}
.ShowContent .content_html pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  overflow: auto;
  margin: 0 0 14px;
}
.ShowContent .content_html pre code { background: none; border: 0; padding: 0; color: var(--text); }

/* ---------- 互动操作条（点赞 / 赏钱 / 收藏 / 回复） ---------- */
.ShowContent .content_act {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: auto;    /* 覆盖 list.css 的 width:400px */
  height: auto;   /* 覆盖 list.css 的 height:160px */
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.ShowContent .content_act > div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;    /* 覆盖 list.css 的 width:50%，否则 50%+gap 导致竖排 */
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.ShowContent .content_act > div:hover {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-1px);
}
/* 重置 list.css 的 80px 白圆：.content_act div span 是图标外圈，需变回普通图标 */
.ShowContent .content_act > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 16px;
  line-height: 1;
  text-align: left;
}
.ShowContent .content_act > div > span:hover { background: none; color: inherit; }
.ShowContent .content_act > div span i { color: var(--brand); font-size: 16px; }
.ShowContent .content_act > div em { font-style: normal; }

/* ---------- 打赏列表 ---------- */
.ShowContent .showdsBox { margin-top: 18px; }
.ShowContent .showdsBox dl { border-top: 1px dashed var(--border); padding-top: 14px; }
.ShowContent .showdsBox dl dt a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 12px 4px 0;
  color: var(--text-2);
}
.ShowContent .showdsBox dl dt a span {
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  display: inline-block;
}
.ShowContent .showdsBox dl dt a span img { width: 100%; height: 100%; object-fit: cover; }
.ShowContent .showdsBox dl dt a em { font-style: normal; color: var(--free); font-weight: 600; }
.ShowContent .showdsBox dl dt a label { font-size: 12px; color: var(--text-3); }

/* ============================ 评论区 ============================ */
/* 注意：.ShowComment / #PostComment 是 .ShowContent 的【兄弟节点】（同在 .LeftCnt 内，
   由 content/pc_model/reply_list.htm 与 reply.htm 渲染），不能用 .ShowContent 前缀，
   否则不命中而沿用 list.css 的 background:#FFF → 深色下发白。故直接命中。 */
.ShowComment {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.ShowComment .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: auto;
  line-height: 1.4;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 14px;
  font-size: 17px;
}
.ShowComment .head ol { float: none; font-size: 17px; font-weight: 600; color: var(--text); font-style: normal; }
.ShowComment .head li { float: none; font-size: 13px; color: var(--text-3); }

/* 评论条目（list.css 用 table 布局：头像 ol + 内容 li） */
.ShowComment .ListComment .lists {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.ShowComment .ListComment .lists:hover { background: var(--surface-2); }
.ShowComment .ListComment .lists ul > ol { width: 50px; padding-right: 16px; }
.ShowComment .ListComment .lists ul > ol a {
  width: 50px; height: 50px;
  box-shadow: 0 0 0 2px var(--border);   /* 覆盖 list.css 的 0 0 8px #000 黑影 */
}
.ShowComment .ListComment .lists ul li .info { color: var(--text-2); height: auto; line-height: 1.7; }
.ShowComment .ListComment .lists ul li .info a { color: var(--brand); font-weight: 600; }
.ShowComment .ListComment .lists ul li .info em,
.ShowComment .ListComment .lists ul li .info i { color: var(--text-3); }
.ShowComment .ListComment .lists ul li .cnt {
  color: var(--text-2);
  line-height: 1.8;
  padding-top: 8px;
}
.ShowComment .ListComment .lists ul li .cnt img { max-width: 100%; border-radius: 8px; margin: 4px 0; }
.ShowComment .ListComment .lists .other { color: var(--text-3); font-size: 15px; }
.ShowComment .ListComment .lists .other a { color: var(--text-2); }
.ShowComment .ListComment .lists .other i { color: var(--text-2); padding-left: 10px; padding-right: 3px; }
.ShowComment .ListComment .lists .other i:hover { color: var(--brand); }

/* 楼中楼 / 子回复：覆盖 list.css 的 #F5F5F5 浅灰底 */
.ShowComment .replaycomment .r_dl {
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-top: 8px;
  padding: 8px 14px 14px;
  border-radius: var(--radius);
  line-height: 1.8;
}
.ShowComment .replaycomment .r_dl .r_dt,
.ShowComment .replaycomment .r_dl .replycontent { color: var(--text-2); float: none; padding-left: 0; }

/* 评论正文 & 引用里的代码块：覆盖 list.css 的 #f8f8f8 浅底 + 009688 左边 */
.ShowComment .replycontent { max-width: 100%; overflow: hidden; color: var(--text-2); }
.ShowComment .replycontent img { max-width: 100%; border-radius: 8px; }
.ShowComment pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 6px solid var(--brand);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  max-width: 100%;
  overflow-x: auto;
  margin: 10px 0;
}

/* “更多回复” */
.ShowMoreComment { text-align: center; padding: 16px 0; }
.ShowMoreComment span { font-size: 15px; color: var(--text-2); cursor: pointer; }
.ShowMoreComment span:hover { color: var(--brand); }

/* ============================ 回复编辑器 ============================ */
#PostComment {
  margin-top: 18px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
#PostComment > a { color: var(--text-2); }
#PostComment > a:hover { color: var(--brand); }
#PostComment .ueditor { width: 100%; position: relative; }
#PostComment .ueditor textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px 14px !important;   /* 覆盖模板内联 padding:3px */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
#PostComment .ueditor textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
#PostComment .replayBox_upfile { padding: 10px 0; color: var(--text-2); }
#PostComment .replayBox_upfile i {
  cursor: pointer;
  margin-right: 16px;
  font-size: 16px;
  color: var(--text-2);
  transition: color .18s;
}
#PostComment .replayBox_upfile i:hover { color: var(--brand); }
#PostComment .submit { text-align: right; margin-top: 10px; }
#PostComment .submit button {
  padding: 0 28px;
  line-height: 42px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
#PostComment .submit button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .3);
}

/* ============================ 窄屏适配 ============================ */
@media (max-width: 768px) {
  .ShowContent { padding: 16px 16px 20px; }
  .ShowContent .title { font-size: 21px; }
  .ShowContent .thebase { flex-wrap: wrap; }
  .ShowContent .thebase dl { margin-left: 0; text-align: left; width: 100%; }
}