/* A paid video render's card (media.js): the quote, the person's Approve and
 * Decline, then its progress and the video. One quiet filled card in the
 * reading column, aligned with the tool rows; nothing floats or toasts. */

.transcript > .media-card { margin-left: 36px; }
.media-card {
  display: grid;
  gap: var(--sv-space-2);
  max-width: 34rem;
  padding: var(--sv-space-3) var(--sv-space-4);
  background: var(--sv-fill-2);
  border: 0;
  border-radius: calc(var(--sv-radius) * 1.5);
  font-size: var(--ui-text);
}
.media-title { font-weight: 500; }
.media-price { font-size: var(--sv-text-h4); font-weight: 600; font-variant-numeric: tabular-nums; }
.media-spec, .media-expiry { color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.media-status { margin: 0; color: var(--sv-ink); }
.media-card[hidden] { display: none; }
.media-card[data-state="failed"] .media-status { color: var(--sv-danger); }
.media-error { margin: 0; color: var(--sv-danger); }
.media-error:empty { display: none; }
.media-refs { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.media-refs:empty { display: none; }
.media-ref { margin: 0; display: grid; gap: 2px; justify-items: center; }
.media-ref img { width: 72px; height: auto; max-height: 128px; object-fit: contain; border-radius: var(--sv-radius); background: var(--sv-fill-2); }
.media-ref figcaption { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.media-prompt summary { cursor: pointer; color: var(--sv-ink-secondary); min-height: 32px; display: flex; align-items: center; }
.media-prompt pre { margin: var(--sv-space-1) 0 0; max-height: 14rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: var(--ui-meta); }
.media-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sv-space-2); }
.media-actions:empty { display: none; }
.media-actions .media-expiry { margin-right: auto; }
.media-actions button { min-height: 44px; }
.media-player { display: grid; gap: var(--sv-space-2); }
.media-player:empty { display: none; }
.media-player video { width: 100%; max-height: 70vh; border-radius: var(--sv-radius); background: #000; }
.media-save { justify-self: start; min-height: 36px; display: inline-flex; align-items: center; }

@media (max-width: 640px) {
  .transcript > .media-card { margin-left: 0; }
  .media-card { padding: var(--sv-space-3); }
  .media-actions button { flex: 1; }
}