/*
Image generation demo styles
*/

.dropzone.compact {
  min-height: 84px;
}

.ref-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ref-previews img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.cost-hint {
  margin: -4px 0 20px;
}

/* Checkerboard behind the result so transparent backgrounds are visible */
.image-result {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--bg) 0 50%) 0 0 / 20px 20px;
}

.image-result img {
  max-width: 100%;
  border-radius: 6px;
  box-shadow: var(--shadow);
}