/* Upscale and background remover. The checkerboard shows transparent pixels. */
.tool[data-mode] > * { min-width: 0; }

.ai-view {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg);
  line-height: 0;
}

.ai-view:not(.is-flat) {
  background-color: #f4f4f4;
  background-image:
    linear-gradient(45deg, #d5d5d5 25%, transparent 25%),
    linear-gradient(-45deg, #d5d5d5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d5d5d5 75%),
    linear-gradient(-45deg, transparent 75%, #d5d5d5 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.ai-view canvas { display: block; max-width: 100%; height: auto; }

.ai-progress { display: grid; gap: 0.35rem; }
.ai-track {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--border);
}
.ai-track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent, #2f6fed);
}
.ai-progress.is-busy .ai-track span {
  width: 35%;
  animation: ai-slide 1.1s ease-in-out infinite;
}
@keyframes ai-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.ai-meta { margin: 0; min-height: 0; color: var(--text-2); font-size: 0.92rem; }
.ai-meta:empty { display: none; }
.ai-credit { margin: 0; font-size: 0.8rem; color: var(--text-3, var(--text-2)); }

.tool[data-mode] input[type="color"] { padding: 0.25rem; min-height: 44px; }

@media (max-width: 520px) {
  .tool[data-mode] .wt-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .tool[data-mode] .wt-btns .btn-primary,
  .tool[data-mode] .wt-btns [data-stop] { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-progress.is-busy .ai-track span { animation: none; width: 100%; opacity: 0.45; }
}