/* =========================================================
   解疑答惑：一问一答列表样式
   依赖：index.css 变量、message.css 的 .msg-hero / .msg-body
   ========================================================= */

/* ---------- 问答列表 ---------- */
.qa-list { display: grid; gap: 34px; }
.qa-row { display: flex; gap: 14px; align-items: flex-start; }
.qa-row + .qa-row { margin-top: 22px; }

/* 头像（纯 CSS 绘制，无版权问题） */
.qa-avatar { flex: 0 0 62px; text-align: center; }
.qa-avatar__pic {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; line-height: 1;
  overflow: hidden;
}
/* 人物图片头像：圆形裁剪填充 */
.qa-avatar__pic img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; display: block;
}
.qa-avatar--q .qa-avatar__pic { background: linear-gradient(135deg, #ffb066, #f5530a); font-size: 28px; }
.qa-avatar--a .qa-avatar__pic { background: linear-gradient(135deg, #a5d55e, #6faf1f); }
.qa-avatar__name {
  display: inline-block; margin-top: 5px; padding: 2px 8px;
  border-radius: 8px; font-size: 12px; color: #fff; line-height: 1.4;
}
.qa-avatar--q .qa-avatar__name { background: #f5530a; }
.qa-avatar--a .qa-avatar__name { background: #6faf1f; }

/* 气泡 */
.qa-bubble {
  flex: 1 1 auto; min-width: 0; padding: 20px 26px;
  border-radius: 18px; position: relative;
}
.qa-bubble--q { background: #fdf3dc; border-top-left-radius: 6px; }
.qa-bubble--a { background: #eef7e4; border-top-left-radius: 6px; }

/* 问题：标题，大字 */
.qa-q { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.65; color: #2b2f36; }
.qa-q .qa-no { margin-right: 6px; }

/* 回答：内容，大字 */
.qa-a { font-size: 18px; line-height: 1.95; color: #333; word-break: break-word; }
.qa-a p { margin: 0 0 12px; }
.qa-a p:last-child { margin-bottom: 0; }
.qa-a img { max-width: 100%; height: auto; border-radius: 8px; }

/* 分页 */
.qa-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-top: 44px;
}
.qa-pagination a, .qa-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: 15px; color: #3d4451; background: #f5f7fa; text-decoration: none;
  transition: all .2s;
}
.qa-pagination a:hover { background: #ffede0; color: var(--orange-deep); }
.qa-pagination .page-num-current,
.qa-pagination .current { background: linear-gradient(135deg, #ff9a3c, var(--orange-deep)); color: #fff; }
.qa-pagination .disabled { opacity: .5; }

@media (max-width: 680px) {
  .qa-avatar { flex-basis: 50px; }
  .qa-avatar__pic { width: 44px; height: 44px; font-size: 19px; }
  .qa-avatar--q .qa-avatar__pic { font-size: 22px; }
  .qa-bubble { padding: 14px 16px; }
  .qa-q { font-size: 18px; }
  .qa-a { font-size: 16px; }
}