/* ===== 说说时间流样式（独立文件，不合并进整体样式） ===== */
.mowen-ss-wrap { padding: 4px 0 8px; }
.mowen-ss-timeline { position: relative; padding-left: 4px; }
.mowen-ss-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  padding-bottom: 26px;
}
.mowen-ss-time {
  flex: 0 0 auto;   /* 宽度按日期内容自适应，多长占多宽，绝不固定 */
  min-width: 0;
  text-align: right;
  padding-top: 0;
}
.mowen-ss-date { font-size: 22px; font-weight: 700; color: var(--mowen-primary, #16a34a); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.mowen-ss-clock { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--mowen-text-muted, #6b7280); white-space: nowrap; }
.mowen-ss-dot {
  position: relative;   /* 作为竖线定位基准 */
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 8px;
  background: #fff;
  border: 3px solid var(--mowen-primary, #16a34a);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
  z-index: 1;
}
/* 竖线挂在圆点上：横向永远居中于圆点中心，纵向从圆点往下，高度由 JS 设为到下一条圆点的距离 */
.mowen-ss-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  width: 2px;
  height: var(--ss-line-h, 0);
  background: linear-gradient(180deg, var(--mowen-primary, #16a34a) 0%, rgba(0,0,0,.08) 100%);
  transform: translateX(-50%);
}
.mowen-ss-card {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--mowen-card, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--mowen-radius, 10px);
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.mowen-ss-content { font-size: 15px; line-height: 1.75; color: var(--mowen-text, #1f2937); word-break: break-word; }
.mowen-ss-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.mowen-ss-content video { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; display: block; }
.mowen-ss-content audio { width: 100%; height: 54px; margin: 8px 0; }
.mowen-ss-content p { margin: 4px 0; }
/* 说说内音频/附件复用文章正文样式（作用域限定） */
.mowen-ss-content .mowen-audio-wrap {
  width: 100%; max-width: 100%; box-sizing: border-box; margin: 10px 0; padding: 12px 14px;
  background: #f7f8fa; border: 1px solid rgba(0,0,0,.08); border-radius: 8px;
}
.mowen-ss-content .mowen-audio-wrap audio { display: none; }
.mowen-ss-content .ma-title { font-size: 14px; font-weight: 600; color: var(--mowen-text, #1f2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
.mowen-ss-content .ma-bar { display: flex; align-items: center; gap: 10px; }
.mowen-ss-content .ma-btn {
  flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%;
  background: var(--mowen-primary, #16a34a); color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mowen-ss-content .ma-progress { flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(0,0,0,.12); cursor: pointer; position: relative; }
.mowen-ss-content .ma-progress .ma-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 3px; background: var(--mowen-primary, #16a34a); }
.mowen-ss-content .ma-time { flex: 0 0 auto; font-size: 12px; color: var(--mowen-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
/* 说说内下载卡片 */
.mowen-ss-content .mowen-file {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box;
  padding: 12px 14px; margin: 10px 0; background: #f7f8fa; border: 1px solid rgba(0,0,0,.08); border-radius: 8px;
}
.mowen-ss-content .mowen-file .mf-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px; background: var(--mowen-primary, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.mowen-ss-content .mowen-file .mf-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mowen-ss-content .mowen-file .mf-name { font-size: 14px; font-weight: 500; color: var(--mowen-text, #1f2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mowen-ss-content .mowen-file .mf-size { font-size: 12px; color: var(--mowen-text-muted, #6b7280); }
.mowen-ss-content .mowen-file .mf-download { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; background: var(--mowen-primary, #16a34a); color: #fff; font-size: 13px; text-decoration: none; }
.mowen-ss-empty { text-align: center; color: var(--mowen-text-muted, #999); padding: 60px 0; }
/* 分页 */
.mowen-ss-pager { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 20px 0 4px; }
.mowen-ss-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px; box-sizing: border-box;
  border-radius: 6px; border: 1px solid rgba(0,0,0,.08);
  background: var(--mowen-card, #fff); color: var(--mowen-text, #333);
  font-size: 14px; text-decoration: none;
}
.mowen-ss-page:hover { border-color: var(--mowen-primary, #16a34a); color: var(--mowen-primary, #16a34a); }
.mowen-ss-page.current { background: var(--mowen-primary, #16a34a); color: #fff; border-color: var(--mowen-primary, #16a34a); }
.mowen-ss-page.disabled { opacity: .5; pointer-events: none; }
@media (max-width: 640px) {
  /* 手机端：上下布局，时间在上、内容在下，不显示圆点和竖线，让内容区更宽 */
  .mowen-ss-timeline { padding-left: 0; }
  .mowen-ss-item {
    flex-direction: column;
    gap: 6px;
    padding-bottom: 20px;
  }
  .mowen-ss-time {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .mowen-ss-date { font-size: 16px; }
  .mowen-ss-clock { margin-top: 0; }
  .mowen-ss-dot { display: none; }          /* 隐藏圆点 */
  .mowen-ss-dot::after { display: none; }   /* 隐藏竖线 */
  .mowen-ss-card {
    width: 100%;
    padding: 12px 14px;
  }
}
