/* Generated images' card (imagegen.js): the previews of one image_generate
 * call in the reading column, aligned with the tool rows like a video card.
 * One image reads large; two to four sit in a two-column grid. */

.transcript > .imagegen-card { margin-left: 36px; }
.imagegen-card {
  display: grid;
  gap: var(--sv-space-2);
  max-width: 40rem;
  padding: var(--sv-space-3);
  background: var(--sv-fill-2);
  border: 0;
  border-radius: calc(var(--sv-radius) * 1.5);
  font-size: var(--ui-text);
}
.imagegen-head { color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.imagegen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-space-2); }
.imagegen-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.imagegen-item { margin: 0; display: grid; gap: var(--sv-space-1); min-width: 0; }
.imagegen-open {
  display: block;
  padding: 0;
  border: 0;
  background: var(--sv-surface-sunken);
  border-radius: var(--sv-radius);
  overflow: hidden;
  cursor: zoom-in;
}
.imagegen-open:disabled { cursor: default; }
.imagegen-open:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.imagegen-open img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.imagegen-item figcaption { display: flex; align-items: center; gap: var(--sv-space-2); min-width: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.imagegen-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.imagegen-size { flex: none; font-variant-numeric: tabular-nums; }
.imagegen-save { margin-left: auto; flex: none; min-height: 32px; }
.imagegen-note { margin: 0; color: var(--sv-danger); }
.imagegen-note:empty { display: none; }

@media (max-width: 640px) {
  .transcript > .imagegen-card { margin-left: 0; }
  .imagegen-grid { grid-template-columns: minmax(0, 1fr); }
}