/* ============================================================
   KRONOS ZHOU · 对话游戏助手 · 上传与审核 样式
   路径：helper/game-helper-upload.css
   ------------------------------------------------------------
   只负责「上传给开发者」这一块：
     .helper-review*     审核状态横幅（待审核 / 已驳回 / 已通过）
     .gh-upload-*        上传弹层里的摘要、错误提示、按钮排布

   配色与结构刻意和建库助手的 .kb-review 保持一致 —— 两边是同一套
   审核流程，用户看到的应该是同一种东西。变量仍走 main-page.css。
   ============================================================ */

/* ============================================================
   1. 审核状态横幅
   ============================================================ */
.helper-review {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--border-medium, #333c4d);
  background: var(--bg-panel, rgba(22, 26, 34, .85);
  line-height: 1.75;
}

.helper-review-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #eef2f8);
}

.helper-review-body {
  font-size: 0.88rem;
  color: var(--text-secondary, #9aa8bc);
  white-space: pre-wrap;
}

.helper-review-note {
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border-left: 3px solid var(--border-medium, #333c4d);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary, #eef2f8);
  font-size: 0.88rem;
  white-space: pre-wrap;
}

.helper-review-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

/* ---- 三种状态的配色 ---- */
.helper-review.is-pending {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(180deg, var(--warn-soft, rgba(245, 158, 11, .15)), var(--bg-panel, rgba(22, 26, 34, .85)));
}
.helper-review.is-pending .helper-review-head { color: #ffd79a; }

.helper-review.is-rejected {
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(180deg, var(--danger-soft, rgba(239, 68, 68, .15)), var(--bg-panel, rgba(22, 26, 34, .85)));
}
.helper-review.is-rejected .helper-review-head { color: #ffb4b4; }
.helper-review.is-rejected .helper-review-note { border-left-color: var(--danger, #ef4444); }

.helper-review.is-approved {
  border-color: rgba(74, 222, 128, 0.5);
  background: linear-gradient(180deg, var(--success-soft, rgba(74, 222, 128, .15)), var(--bg-panel, rgba(22, 26, 34, .85)));
}
.helper-review.is-approved .helper-review-head { color: #b6f5cd; }

/* ============================================================
   2. 上传弹层
   ============================================================ */
.gh-upload-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border-soft, #2a3242);
  background: var(--bg-block, #161b23);
}

.gh-upload-target-icon { font-size: 1.4rem; }

.gh-upload-target-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.gh-upload-target-name {
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gh-upload-target-sub {
  font-size: 0.74rem;
  opacity: 0.65;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* 提交前的「会被提交什么」清单 */
.gh-upload-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.gh-upload-agree {
  margin: 0.6rem 0 0.2rem;
  align-items: flex-start;
  line-height: 1.7;
}

.gh-upload-agree input { margin-top: 0.28rem; flex: none; }

/* data-up-error 的提示只有在有内容时才显得刺眼 */
.helper-hint[data-up-error]:empty {
  display: none;
}

/* 上传按钮（草稿卡片上的那个） */
.helper-btn-upload:hover {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

/* 草稿卡片上的「已提交」小标签 */
.helper-tag-submitted {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.helper-tag-approved {
  border-color: #3ecf8e;
  background: rgba(62, 207, 142, 0.12);
}

.helper-tag-rejected {
  border-color: #e5484d;
  background: rgba(229, 72, 77, 0.12);
}

/* 弹层里的提交反馈 */
.gh-upload-feedback {
  font-size: 0.78rem;
  opacity: 0.8;
  flex: 1;
  min-width: 10rem;
}
.gh-upload-feedback.is-ok { color: #3ecf8e; opacity: 1; }
.gh-upload-feedback.is-bad { color: #e5484d; opacity: 1; }

@media (max-width: 720px) {
  .gh-upload-target { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   3. 素材（上传模式）
   ------------------------------------------------------------
   .gh-asset-box*   编辑器里那块「素材」总览
   .gh-asset-*      每个素材字段里的缩略图 / 按钮 / 路径输入
   ============================================================ */

/* ---- 总览 ---- */
.gh-asset-box {
  margin: 0 0 1rem;
  border: 1px solid var(--border-soft, #2a3242);
  border-radius: 12px;
  background: var(--bg-block, #161b23);
  overflow: hidden;
}

.gh-asset-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
}

.gh-asset-title { font-weight: 600; font-size: 0.9rem; }

.gh-asset-note { font-size: 0.78rem; opacity: 0.72; flex: 1; min-width: 10rem; }

.gh-asset-budget {
  font-size: 0.74rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-medium, #333c4d);
  opacity: 0.9;
}
.gh-asset-budget.is-warn { border-color: #f0b429; color: #f0b429; }
.gh-asset-budget.is-bad { border-color: #e5484d; color: #e5484d; }

.gh-asset-body {
  padding: 0 0.8rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gh-asset-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.2);
  overflow: hidden;
}
.gh-asset-progress i { display: block; height: 100%; background: var(--accent, #5b8def); }

.gh-asset-alert {
  font-size: 0.78rem;
  line-height: 1.7;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border-left: 3px solid #f0b429;
  background: rgba(240, 180, 41, 0.1);
}

.gh-asset-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-soft, #2a3242);
  background: var(--bg-elevated, #1b212b);
}

.gh-asset-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gh-asset-item-name {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gh-asset-item-sub { font-size: 0.72rem; opacity: 0.65; }
.gh-asset-item-sub .is-warn { color: #f0b429; }

/* ---- 字段里的上传控件 ---- */
.gh-asset-field { gap: 0.3rem; }

.gh-asset-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.gh-asset-thumb {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-medium, #333c4d);
  background: rgba(127, 127, 127, 0.12);
}

.gh-asset-thumb-audio {
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: var(--accent, #5b8def);
}

.gh-asset-play {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: var(--accent, #5b8def);
  border: 1px solid var(--border-medium, #333c4d);
  background: rgba(127, 127, 127, 0.12);
}
.gh-asset-play:hover { border-color: var(--accent, #5b8def); }

.gh-asset-missing {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  font-size: 0.72rem;
  color: #e5484d;
  border: 1px dashed #e5484d;
}

.gh-asset-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }

.gh-asset-acts {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.gh-asset-status { font-size: 0.72rem; opacity: 0.7; }
.gh-asset-status.is-ok { color: #3ecf8e; opacity: 1; }
.gh-asset-status.is-bad { color: #e5484d; opacity: 1; }
.gh-asset-status.is-busy { color: #f0b429; opacity: 1; }

.gh-asset-path { width: 100%; }