/* Pictures ALY made (aly-image-result.js). Large, because a generated image is
   the answer rather than reference material — unlike the small chips a person's
   own attachments render as (aly-message-attachments.css). Tokens only. */
.aly-image-result {
  margin: 10px 0 4px;
  max-width: 520px;
}

.aly-image-frame {
  position: relative;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
  background: var(--glass-1, transparent);
}

.aly-image-full {
  display: block;
  width: 100%;
  height: auto;
}

/* The wait is 8-12s, so the space is reserved up front and the transcript does
   not jump when the picture lands. A square, because that is what ALY asks the
   provider for (1024x1024). */
.aly-image-result.is-pending .aly-image-frame { aspect-ratio: 1 / 1; cursor: default; }
.aly-image-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--glass-1, transparent) 20%, var(--glass-2) 40%, var(--glass-1, transparent) 60%);
  background-size: 250% 100%;
  animation: aly-image-sheen 1.5s linear infinite;
}

@keyframes aly-image-sheen {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

/* A moving gradient for 10 seconds is exactly the kind of thing that triggers
   vestibular discomfort, so it stops when the viewer has asked for less motion.
   The reserved space and the wording still say what is happening. */
@media (prefers-reduced-motion: reduce) {
  .aly-image-shimmer { animation: none; background-position: 0 0; }
}

.aly-image-result.is-gone .aly-image-frame {
  aspect-ratio: auto;
  padding: 18px;
  cursor: default;
  line-height: 1.4;
}

.aly-image-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px 0;
}

.aly-image-note {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aly-image-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

.aly-image-download,
.aly-image-open {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  background: var(--glass-2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-decoration: none;
  padding: 5px 11px;
  cursor: pointer;
}
.aly-image-download:hover,
.aly-image-open:hover { background: var(--glass-3, var(--glass-2)); }

@media (max-width: 520px) {
  .aly-image-result { max-width: 100%; }
  .aly-image-bar { flex-wrap: wrap; gap: 6px; }
}