/**
 * 社区发帖框 · 多附件上传队列
 *
 * 一帖可带多个附件（额度见 inc/community-attach/quota.php）：图片 / 视频出方块
 * 缩略图，文档出文件卡；每张自己带进度条和撤销叉。
 *
 * 选择器带 #wpforo #wpforo-wrap，压过引擎的 div/button/figure reset。
 */

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue {
  margin: 4px 0 0 !important;
  padding: 8px 0 4px !important;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue[hidden] {
  display: none !important;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__list {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item {
  position: relative;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--myt-wpf-radius-card);
}

/* 图片 / 视频：统一方块缩略图，多张排起来才齐 */
#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item.is-image,
#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item.is-video {
  width: 96px;
  height: 96px;
  background: var(--myt-wpf-color-surface-muted);
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__media {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__media img,
#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__media video {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  vertical-align: top;
}

/* 文档卡：队列里按内容宽排，别跟已发布正文那张（固定半宽）混为一谈 */
#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item.is-file {
  max-width: min(320px, 100%);
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item.is-file .mytheme-wpf-attach-queue__card {
  width: 100%;
  padding-right: 44px !important;
  cursor: default;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__card:hover {
  border-color: #e8e8e8 !important;
  box-shadow: none;
}

/* 进度条：贴在卡底，传完就收起 */
#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.08);
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--myt-wpf-color-primary);
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item.is-done .mytheme-wpf-attach-queue__progress {
  display: none !important;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item.is-error .mytheme-wpf-attach-queue__bar {
  background: var(--myt-wpf-color-ink-disabled);
}

/* 状态字：只在排队 / 上传中 / 失败时有内容 */
#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__status {
  display: block;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: var(--myt-wpf-color-ink-tertiary);
  font-size: var(--myt-wpf-fs-footnote);
  line-height: 1.4;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item.is-error .mytheme-wpf-attach-queue__status {
  color: var(--myt-wpf-color-primary);
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item.is-image .mytheme-wpf-attach-queue__status,
#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__item.is-video .mytheme-wpf-attach-queue__status {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  margin: 0 !important;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 撤销叉：热区 24px 起步（DESIGN §2） */
#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: var(--myt-wpf-radius-pill);
  background: rgba(0, 0, 0, 0.55) !important;
  color: #ffffff !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__remove:hover {
  background: rgba(0, 0, 0, 0.72) !important;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--myt-wpf-focus);
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__remove svg {
  display: block;
  width: 14px;
  height: 14px;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__retry {
  position: absolute;
  left: 6px;
  top: 6px;
  margin: 0 !important;
  padding: 2px 8px !important;
  border: none !important;
  border-radius: var(--myt-wpf-radius-pill);
  background: var(--myt-wpf-color-primary) !important;
  color: #ffffff !important;
  font-size: var(--myt-wpf-fs-footnote);
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__retry[hidden] {
  display: none !important;
}

/* 「图片 3/9 · 附件 1/4」 */
#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__hint {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: var(--myt-wpf-color-ink-tertiary) !important;
  font-size: var(--myt-wpf-fs-footnote);
  line-height: 1.4;
}

#wpforo #wpforo-wrap .mytheme-wpf-attach-queue__hint[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  #wpforo #wpforo-wrap .mytheme-wpf-attach-queue__bar {
    transition: width 0.2s ease;
  }
  #wpforo #wpforo-wrap .mytheme-wpf-attach-queue__remove {
    transition: background-color 0.2s ease;
  }
}