/* Private image preview; all surfaces follow the active application theme. */
body:has(.image-export-dialog[open]) { overflow: hidden; }
.image-export-dialog {
  box-sizing: border-box; width: min(540px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto; padding: 20px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: var(--feedback-radius, 20px);
  background: var(--card); color: var(--text); font: inherit;
  box-shadow: var(--feedback-shadow); animation: image-export-enter 180ms ease-out;
}
.image-export-dialog::backdrop { background: var(--feedback-scrim, rgb(9 9 11 / .46)); }
.image-export-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.image-export-dialog h2 { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 600; }
.image-export-dialog p { margin: 8px 0 16px; color: var(--muted-strong, var(--muted)); font-size: 14px; line-height: 1.65; }
.image-export-dialog img {
  display: block; width: 100%; max-height: 60dvh; object-fit: contain;
  border-radius: 10px; background: var(--field); -webkit-touch-callout: default;
  user-select: auto; -webkit-user-select: auto;
}
.image-export-dialog button {
  flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  touch-action: manipulation; transition: opacity 150ms ease;
}
.image-export-dialog .image-export-download {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 16px; border-color: transparent;
  background: var(--action, var(--accent)); color: var(--on-action, var(--card));
}
.image-export-dialog button:active { opacity: .78; }
.image-export-dialog button:disabled { opacity: .65; cursor: wait; }
.image-export-dialog :focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
button.image-export-pending { cursor: wait; }
.image-export-spinner {
  display: inline-block; flex: 0 0 16px; width: 16px; height: 16px;
  box-sizing: border-box; vertical-align: middle; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: image-export-spin .8s linear infinite;
}
@keyframes image-export-spin { to { transform: rotate(360deg); } }
@keyframes image-export-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .image-export-dialog, .image-export-spinner { animation: none; }
  .image-export-dialog button { transition: none; }
}