/* 梦兽视频工厂 · 用户附件宫格（4 列 × N 行）
 * 作用域限定 .user-turn（已发送的用户消息），不影响助手消息与正文图片。
 * 只改样式：DOM 分组由 mengshou-attachment-tiles.js 完成（.hf-att-grid）。 */

:root {
  --hf-tile: 88px;
  --hf-gap: 8px;
}

/* ── 宫格容器：固定 4 列上限，第 5 个起自动换行 ──────────────────── */
/* 用 flex-wrap + max-content 宽度：只填了几个就只有几个格子宽，
   填到 5 个以上才换行（grid 的固定轨道即使空着也会占宽度，不用）。 */
.hf-att-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--hf-gap) !important;
  align-items: start;
  justify-content: flex-start;
  width: max-content;
  max-width: calc(4 * var(--hf-tile) + 3 * var(--hf-gap));
}

/* 单元格：无论原来是宽 chip 还是大图按钮，都压成方格 */
.hf-att-grid > * {
  flex: 0 0 var(--hf-tile) !important;
  width: var(--hf-tile) !important;
  max-width: var(--hf-tile) !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.hf-att-grid > * > button {
  width: 100% !important;
  max-width: 100% !important;
  height: var(--hf-tile) !important;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  display: block !important;
}

/* ── 图片：原 w-full max-w-lg 大图 → 方格缩略图 ───────────────────── */
.hf-att-grid > * > button > img,
.hf-att-grid > * > button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.hf-att-grid > * > button > div[aria-hidden="true"] {
  /* 图片加载骨架层：不要盖住方格圆角 */
  border-radius: 14px !important;
}

/* ── 视频/文件 chip：w-56 宽条 → 方格，隐藏文件名两行文字 ─────────── */
.hf-att-grid .w-56 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  height: 100% !important;
}
.hf-att-grid .w-56 > div {
  display: block !important;
  gap: 0 !important;
  height: 100% !important;
}
.hf-att-grid .w-56 .overflow-hidden:not(.size-10) {
  display: none !important; /* 文件名 + 类型两行文字，title 里仍有 */
}
.hf-att-grid .size-10 {
  width: 100% !important;
  max-width: 100% !important;
  height: var(--hf-tile) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(122, 122, 122, 0.12);
}
.hf-att-grid .size-10 > svg {
  width: 42% !important;
  height: 42% !important;
  opacity: 0.55;
}

/* ── JS 注入的视频首帧缩略图 ──────────────────────────────────────── */
.hf-video-thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: #000;
  pointer-events: none;
}
.hf-video-play {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* ── 视频封面：canvas 抓帧转成的 img（与图片格同渲染路径，必显示） ── */
.hf-video-cover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: #000;
  pointer-events: none;
}

/* ── 点击加载中的 spinner（盖在图标格上） ─────────────────────────── */
.hf-att-grid .size-10.hf-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: hf-spin 0.8s linear infinite;
  z-index: 3;
}
@keyframes hf-spin {
  to { transform: rotate(360deg); }
}

/* ── 自建 overlay 播放器（点播时弹层，一次下载、直接播） ───────────── */
.hf-player-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.hf-player-box {
  position: relative;
  max-width: min(480px, 86vw);
  width: 100%;
}
.hf-player-video {
  width: 100%;
  max-height: 78vh;
  border-radius: 14px;
  background: #000;
  display: block;
}
.hf-player-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 15px;
  line-height: 1;
  border: none;
  cursor: pointer;
  z-index: 2;
}
.hf-player-name {
  margin-top: 8px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 窄屏：整体缩小，仍然保持 4 列 */
@media (max-width: 640px) {
  :root {
    --hf-tile: 68px;
    --hf-gap: 6px;
  }
}