.check-layout { flex: 1; overflow-y: auto; padding: 20px 24px; }

/* Two columns side by side; they stack on a narrow screen rather than
   squeezing the filenames into nothing. */
/* Two columns of stacked blocks, so nothing runs the full width of the screen
   while its neighbours sit at half. */
.check-columns {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
}
.check-col-left, .check-col-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.check-column {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--border);
  padding: 16px 16px 8px;
}
.check-column header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.check-column h2 {
  margin: 0; font-size: 16px; color: var(--text-strong);
  display: flex; align-items: center; gap: 8px;
}
.check-column .pill {
  font-size: 12px; padding: 1px 8px; border-radius: 999px;
  background: var(--accent); color: #fff;
}
.check-column.trials .pill { background: #d98324; }
.check-column .open-tag { font-size: 12px; color: #ffb26b; margin-left: auto; }

/*
 * Ten videos, then the list scrolls on its own.
 *
 * Both columns grow with their contents, so a long list pushed the other one
 * off the bottom of the page and there was no way to see both at once. Ten
 * rows is a screenful; past that the column keeps its height and the list
 * inside it moves.
 *
 * The height is `10 × row` rather than a round number of pixels, so it stays
 * right if a row ever changes size.
 */
.check-list {
  list-style: none; margin: 0; padding: 0;
  --check-row: 58px;
  max-height: calc(var(--check-row) * 10);
  overflow-y: auto;
  /* Room for the scrollbar, so the last column of text is not under it. */
  padding-right: 2px;
}

.check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}
.check-item + .check-item { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.check-item:hover { background: var(--surface-2); }

/* Same colour language as the Videos tab: green judged good, red not good. */
.check-item.is-good { border-left-color: var(--success); }
.check-item.is-not-good { border-left-color: var(--danger); }
.check-item.is-open { border-left-color: var(--muted); }

.check-thumb {
  width: 76px; height: 46px; flex: none; position: relative;
  border-radius: 4px; overflow: hidden; cursor: pointer;
  background: var(--bg-deep); display: grid; place-items: center; font-size: 17px;
}
.check-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.check-thumb .dur {
  position: absolute; right: 3px; bottom: 3px;
  background: rgba(0, 0, 0, 0.75); color: #fff;
  font-size: 10px; padding: 1px 4px; border-radius: 3px;
}

.check-text { flex: 1; min-width: 0; }
.check-name {
  font-size: 13px; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.check-sub { font-size: 11px; color: var(--muted); }

.check-verdict {
  flex: none; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.check-item.is-good .check-verdict { background: rgba(35, 165, 90, 0.2); color: #5fd894; }
.check-item.is-not-good .check-verdict { background: rgba(242, 63, 67, 0.2); color: #ff9093; }
.check-item.is-open .check-verdict { background: var(--surface-3); color: var(--muted); }

.check-list .empty.small { padding: 16px 8px; color: var(--muted); font-size: 13px; }

.check-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.check-head h2 { margin: 0; font-size: 17px; color: var(--text-strong); }
.check-head .spacer { flex: 1; }
.check-head .cost-tag {
  font-size: 12px; color: var(--muted);
  background: var(--surface-2); padding: 3px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.ask-box { margin-top: 0; }

/* A fix you can judge on its own. */
.fix-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fix {
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--bg-deep); border-left: 3px solid var(--border);
}
.fix-good { border-left-color: var(--success); }
.fix-not-good { border-left-color: var(--danger); opacity: 0.6; }
.fix-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fix-at {
  font-size: 11px; color: #ffcc4d; font-variant-numeric: tabular-nums;
  background: rgba(240, 178, 50, 0.15); padding: 1px 6px; border-radius: 4px;
}
.fix-label { flex: 1; min-width: 0; font-size: 12px; color: var(--text-strong); }
.fix-body { font-size: 12px; color: var(--text); margin-top: 4px; white-space: pre-wrap; line-height: 1.5; }

.fix-vote {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--muted);
}
.fix-vote.good:hover { color: #5fd894; box-shadow: inset 0 0 0 1px var(--success); }
.fix-vote.bad:hover { color: #ff9093; box-shadow: inset 0 0 0 1px var(--danger); }
.fix-good .fix-vote.good { background: var(--success); color: #fff; box-shadow: none; }
.fix-not-good .fix-vote.bad { background: var(--danger); color: #fff; box-shadow: none; }

.stop-check {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: transparent; color: #ff9093; box-shadow: inset 0 0 0 1px var(--danger);
}
.stop-check:hover:not(:disabled) { background: var(--danger); color: #fff; }

.queue-tag {
  font-size: 12px; color: #ffcc4d;
  background: rgba(240, 178, 50, 0.15); padding: 3px 10px; border-radius: 999px;
}

.review {
  padding: 9px 8px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--muted);
}
.review + .review { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.review.ai { border-left-color: #a5b0ff; }
.review.is-good { border-left-color: var(--success); }
.review.is-not-good { border-left-color: var(--danger); }

.review-head { display: flex; align-items: center; gap: 8px; }
.review-name {
  flex: 1; min-width: 0; font-size: 13px; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.review-error { font-size: 12px; color: #ff9093; margin-top: 5px; }

.review-toggle {
  margin-top: 6px; font-size: 12px; padding: 3px 8px;
  background: transparent; color: #a5b0ff;
  box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--radius-sm);
}
.review-toggle:hover { background: var(--surface-2); }

/* The report keeps the model's own line breaks and timestamps. */
.review-report {
  margin: 8px 0 0; padding: 10px 12px;
  background: var(--bg-deep); border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow-y: auto;
}

.review-progress { margin: 7px 0 4px; }
.review-progress .progress { height: 5px; }
.review-stage { font-size: 11px; color: #ffcc4d; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* The title and hashtags the review wrote, ready to copy into a post. */
.review-title { font-size: 13px; color: var(--text-strong); margin: 6px 0 2px; }
.review-tags { font-size: 12px; color: #a5b0ff; word-break: break-word; }

.ask-box {
  margin-top: 18px; padding: 16px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ask-box header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ask-box h2 { margin: 0; font-size: 15px; color: var(--text-strong); }
.ask-hint { font-size: 12px; color: var(--muted); }
.ask-form { display: flex; gap: 8px; }
.ask-form input { flex: 1; }
.ask-answer {
  margin-top: 10px; padding: 12px 14px;
  background: var(--bg-deep); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow-y: auto;
}

@media (max-width: 720px) {
  .check-layout { padding: 12px; }
  .check-columns { grid-template-columns: 1fr; gap: 12px; }
  .check-column { padding: 12px 12px 6px; }
}

/* Who gave the verdict, on the line under the video it belongs to. */
.check-by { font-size: 10px; color: var(--muted); font-style: italic; margin-top: 1px; }

/*
 * Sending a video to the reviewer from the tab that judges videos. It used to
 * mean going back to the chat and finding the message it arrived on.
 */
.run-check {
  flex: none; font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  background: #d8ac54; color: #241a05;
}
.run-check:hover:not(:disabled) { background: #f0b232; }