/* =====================================================================
   蝉脉 · 功能子页内嵌历史区（fhist.css）
   ---------------------------------------------------------------------
   独立文件：不覆盖任何既有样式，全部类名以 .cmfhist 前缀隔离。
   配色取自 style.css 的 :root（品牌橙 --primary: #f95901），不换品牌色。
   布局安全：不使用 100vw；唯一的绝对定位是缩略图容器内部的居中播放角标，
   容器自带 position: relative 且 overflow: hidden，不会外溢。
   ===================================================================== */

/* 只在挂载成功后渲染，避免闪一帧空壳 */
.cmfhist {
  min-width: 0;               /* 极端窄容器下不撑宽父级 */
  grid-column: 1 / -1;        /* ≥1024px 时父级是两列 grid，本区整行通栏 */
  margin: 0 0 14px;
  color: #3a2a1e;
}

/* ---------- 折叠态：一条很窄的摘要栏 ---------- */
.cmfhist-bar {
  display: flex; align-items: center; gap: 9px;
  width: 100%; box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid #ffdcbf;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdfb 0%, #fffaf6 100%);
  box-shadow: 0 1px 6px rgba(249, 89, 1, 0.07);
  font-family: inherit; font-size: 13px; line-height: 1.2;
  color: #3a2a1e; text-align: left;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cmfhist-bar:hover { border-color: #f0c9a8; box-shadow: 0 3px 12px rgba(249, 89, 1, 0.13); }
.cmfhist-bar:focus-visible { outline: 2px solid rgba(249, 89, 1, 0.45); outline-offset: 2px; }
.cmfhist-bar.is-static { cursor: default; }

.cmfhist-bar-ico {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 7px;
  background: #fff1e7; color: #f95901;
  display: flex; align-items: center; justify-content: center;
}
.cmfhist-bar-ico svg { width: 13px; height: 13px; display: block; }

.cmfhist-bar-tx {
  flex: 1 1 auto; min-width: 0;
  font-weight: 700; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmfhist-bar-tx em {
  font-style: normal; font-weight: 800; color: #f95901;
}
.cmfhist-bar-tx .cmfhist-dim { font-weight: 600; color: #a08c7c; }

.cmfhist-bar-go {
  flex: 0 0 auto; width: 18px; height: 18px;
  color: #c9a68c; display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, color .15s;
}
.cmfhist-bar-go svg { width: 12px; height: 12px; display: block; }
.cmfhist.is-open .cmfhist-bar-go { transform: rotate(180deg); color: #f95901; }
.cmfhist.is-open .cmfhist-bar { border-color: #ffd9bd; background: #fffdfb; }

/* 匿名态：不可点，视觉更轻 */
.cmfhist-bar.is-static .cmfhist-bar-tx { font-weight: 600; color: #a08c7c; }
.cmfhist-bar.is-static .cmfhist-bar-ico { background: #f7f1eb; color: #b7a596; }

/* ---------- 展开态 ---------- */
.cmfhist-body { margin-top: 10px; }
.cmfhist-body[hidden] { display: none !important; }   /* [hidden] 会被 display:flex/grid 盖掉 */

.cmfhist-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 2px 8px;
}
.cmfhist-head-t {
  flex: 1 1 auto; min-width: 0;
  font-size: 11.5px; font-weight: 600; color: #a08c7c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmfhist-reload {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid #ffdcbf; background: #fff; color: #f95901;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  font-family: inherit; padding: 0;
}
.cmfhist-reload svg { width: 13px; height: 13px; display: block; }
.cmfhist-reload:hover { background: #fff2e8; }
.cmfhist-reload[disabled] { opacity: .55; cursor: default; }
.cmfhist-reload.is-spin svg { animation: cmfhistSpin .9s linear infinite; }
@keyframes cmfhistSpin { to { transform: rotate(360deg); } }

/* 横滑一排：overflow-x:auto 而非撑宽外层 */
.cmfhist-row {
  display: flex; align-items: flex-start; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.cmfhist-row::-webkit-scrollbar { height: 5px; }
.cmfhist-row::-webkit-scrollbar-thumb { background: #ffdcbf; border-radius: 99px; }
.cmfhist-row::-webkit-scrollbar-track { background: transparent; }

.cmfhist-item {
  flex: 0 0 auto;
  width: 104px;
  scroll-snap-align: start;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  border: 0; background: none; padding: 0; margin: 0;
  font-family: inherit; text-align: left; color: inherit;
}
.cmfhist-item:focus-visible { outline: 2px solid rgba(249, 89, 1, 0.45); outline-offset: 3px; border-radius: 14px; }

.cmfhist-th {
  position: relative;      /* 播放角标的定位基准 */
  overflow: hidden;        /* 角标不会跑出容器 */
  width: 104px; height: 104px;
  border-radius: 13px;
  background: #f7f1eb;
  border: 1px solid #f0e6dc;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cmfhist-item:hover .cmfhist-th { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(249, 89, 1, 0.16); border-color: #ffd9bd; }

.cmfhist-img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}
.cmfhist-vid { object-fit: cover; background: #2b1a10; }

.cmfhist-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #f95901;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(70, 30, 0, 0.22);
  pointer-events: none;
}
.cmfhist-play svg { width: 12px; height: 12px; display: block; margin-left: 1px; }

.cmfhist-ph { color: #c9a68c; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cmfhist-ph svg { width: 24px; height: 24px; display: block; }
.cmfhist-ph span { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; }

.cmfhist-tx {
  width: 100%; height: 100%; box-sizing: border-box;
  padding: 9px 9px 8px;
  background: linear-gradient(180deg, #fffdfb 0%, #fff4ec 100%);
  font-size: 11.5px; line-height: 1.45; color: #6b5546;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  word-break: break-word;
}

.cmfhist-meta { padding: 6px 2px 0; }
.cmfhist-t {
  font-size: 12px; font-weight: 700; color: #3a2a1e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmfhist-d { font-size: 11px; color: #a08c7c; margin-top: 1px; }

/* ---------- 骨架屏 / 空态 / 错误态 ---------- */
.cmfhist-sk .cmfhist-th { border: 0; background: #f3ece5; }
.cmfhist-sk .cmfhist-th::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
  animation: cmfhistShim 1.15s ease-in-out infinite;
}
@keyframes cmfhistShim { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.cmfhist-sk .cmfhist-t {
  height: 10px; border-radius: 5px; background: #f3ece5; margin-top: 7px;
}
.cmfhist-sk .cmfhist-d { height: 9px; width: 56%; border-radius: 5px; background: #f6f0ea; margin-top: 5px; }

@media (prefers-reduced-motion: reduce) {
  .cmfhist-sk .cmfhist-th::after { animation: none; }
  .cmfhist-reload.is-spin svg { animation: none; }
  .cmfhist-item:hover .cmfhist-th { transform: none; }
}

.cmfhist-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px;
  border: 1px dashed #ffdcbf; border-radius: 13px;
  background: #fffdfb;
  font-size: 12.5px; line-height: 1.55; color: #8a7365;
}
.cmfhist-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: #f95901; display: block; }

/* 真实读秒（不是百分比进度条） */
.cmfhist-ela {
  padding: 8px 2px 0;
  font-size: 11.5px; font-weight: 600; color: #a08c7c;
}
.cmfhist-note b { color: #6b5546; font-weight: 700; }
.cmfhist-note button {
  border: 0; background: none; padding: 0; margin-left: 2px;
  color: #f95901; font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---------- 预览弹层（点击某一条后打开） ---------- */
.cmfhist-modal {
  position: fixed; inset: 0; z-index: 420;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(46, 26, 12, 0.66);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: cmfhistFade .16s ease both;
}
.cmfhist-modal[hidden] { display: none !important; }
@keyframes cmfhistFade { from { opacity: 0; } to { opacity: 1; } }

.cmfhist-modal-in {
  width: 100%; max-width: 520px; max-height: 100%;
  min-width: 0;              /* 防止长内容把 flex 子项撑出视口 */
  box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px;
  box-shadow: 0 18px 50px rgba(60, 28, 6, 0.32);
  overflow: hidden;
  animation: cmfhistPop .2s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes cmfhistPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.cmfhist-modal-h {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid #f6ece3;
}
.cmfhist-modal-hb { flex: 1 1 auto; min-width: 0; }
.cmfhist-modal-t {
  font-size: 14.5px; font-weight: 800; color: #3a2a1e;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmfhist-modal-d { font-size: 11.5px; color: #a08c7c; margin-top: 2px; }
.cmfhist-x {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  border: 0; background: #fff2e8; color: #a08c7c;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-appearance: none; appearance: none; padding: 0;
}
.cmfhist-x svg { width: 13px; height: 13px; display: block; }
.cmfhist-x:hover { background: #ffe4d3; color: #f95901; }

.cmfhist-modal-b {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  padding: 14px;
  background: #fffdfb;
}
.cmfhist-modal-b img,
.cmfhist-modal-b video {
  display: block; width: 100%; height: auto;
  max-height: 60vh; object-fit: contain;
  border-radius: 12px; background: #2b1a10;
}
.cmfhist-modal-b audio { display: block; width: 100%; }
.cmfhist-modal-b pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 13px; line-height: 1.7; color: #4a382c;
}

.cmfhist-modal-f {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;              /* 窄屏时两个按钮换行，不挤不溢出 */
  padding: 10px 14px 14px;
  border-top: 1px solid #f6ece3;
}
.cmfhist-modal-f .cmfhist-btn { min-width: 0; }
.cmfhist-btn {
  flex: 1 1 auto; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 14px;
  border: 1px solid #ffdcbf; border-radius: 12px;
  background: #fff; color: #f95901;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.cmfhist-btn svg { width: 14px; height: 14px; display: block; }
.cmfhist-btn:hover { background: #fff2e8; }
.cmfhist-btn.cmfhist-btn-main {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #ff8845 0%, #f95901 100%);
  box-shadow: 0 6px 16px rgba(249, 89, 1, 0.28);
}
.cmfhist-btn.cmfhist-btn-main:hover { filter: brightness(1.05); background: linear-gradient(135deg, #ff8845 0%, #f95901 100%); }

/* 轻提示：层高与位置对齐站点既有 toast 惯例
   （style.css 里 .ir-toast / .ix-toast / .rp-toast / .ic-toast 等均为 bottom:82px + z-index:1200），
   否则激活 / 支付层（z-index 999 / 9999）弹出来时这句提示会被吞掉。
   这里用 max-width: min(84%, 360px) 而不是站点惯用的 80vw，避免带出滚动条宽度。 */
.cmfhist-toast {
  position: fixed; left: 50%; bottom: 82px; z-index: 1200;
  transform: translateX(-50%);
  max-width: min(84%, 360px);
  padding: 10px 18px; border-radius: 999px;
  background: rgba(28, 20, 14, 0.9); color: #fff;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  animation: cmfhistFade .16s ease both;
  pointer-events: none;
}

/* 390px 及更窄：缩略图略缩，保证不横向溢出 */
@media (max-width: 420px) {
  .cmfhist-item, .cmfhist-th { width: 92px; }
  .cmfhist-th { height: 92px; }
  .cmfhist-bar-tx { font-size: 12.5px; }
}