/* ── thumbnail base (160x160 image container) ───────────────── */
.thumbnail-grid { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1rem; }
.thumbnail-base { width: 160px; height: 160px; object-fit: cover; border-radius: 8px;
                  box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: block;
                  transition: box-shadow 0.2s ease; }
.thumbnail-base:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.thumbnail-base.model { object-fit: contain; background: #f3f4f6; }

/* ── display-only thumbnails ────────────────────────────────── */
.video-thumbnail,
.image-thumbnail { display: flex; flex-direction: column; position: relative; z-index: 10; }
.video-thumbnail > span { font-size: 0.85rem; color: #555; }
.video-thumbnail img,
.video-thumbnail video,
.image-thumbnail img,
.image-thumbnail video { width: 160px; height: 160px; object-fit: cover; border-radius: 8px;
                       box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: block; }
.video-thumbnail:hover img,
.video-thumbnail:hover video,
.image-thumbnail:hover img,
.image-thumbnail:hover video { box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.video-thumbnail.model img { object-fit: contain; background: #f3f4f6; }


/* ── zoom hint ──────────────────────────────────────────────── */
@keyframes zoom-hint-pulse {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; }
}

.zoom-hint { position: fixed; left: 0; top: 0; padding: 0.4rem 0.8rem; background: rgba(128,128,128,0.3); color: #fff;
             text-shadow: 0 1px 3px rgba(0,0,0,0.5); border-radius: 4px; font-size: 0.75rem;
             pointer-events: none; z-index: 99; opacity: 0; white-space: nowrap; margin: 0; }

.zoom-hint.active { animation: zoom-hint-pulse 1.8s ease-in-out; }


/* ── selectable thumbnail (interactive with radio) ─────────────── */
.zoomable-thumbnail { position: relative; cursor: pointer; z-index: 10; }
.media-thumbnail { position: relative; display: block; transition: transform 0.2s ease; }
.media-thumbnail input[type="radio"] { position: absolute; top: 8px; left: 8px; z-index: 11; display: none; width: 1rem; height: 1rem; accent-color: var(--color-accent); outline: none; border: none; box-shadow: none; }
.media-thumbnail input[type="radio"]:focus,
.media-thumbnail input[type="radio"]:focus-visible,
.media-thumbnail input[type="radio"]:active { outline: none; box-shadow: none; }
.media-thumbnail input[type="radio"]:checked { display: block; }
.media-thumbnail img,
.media-thumbnail video { display: block; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); transition: box-shadow 0.2s ease; width: 160px; height: 160px; object-fit: cover; }
.media-thumbnail img:hover,
.media-thumbnail video:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.media-thumbnail.model img { object-fit: contain; background: #f3f4f6; }
.zoomable-thumbnail:has(input:checked) .media-thumbnail img,
.zoomable-thumbnail:has(input:checked) .media-thumbnail video { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

.media-thumbnail:has(video)::after {
  content: '🎥';
  position: absolute;
  top: 6px;
  right: 7px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
}

.media-thumbnail:has(img[data-testid="result-photo"])::after {
  content: '📷';
  position: absolute;
  top: 6px;
  right: 7px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.40);
  pointer-events: none;
}

.media-thumbnail[data-operator-generated="true"]::before {
  content: '🛟';
  position: absolute;
  bottom: 6px;
  right: 7px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.40);
  pointer-events: none;
}

/* ── garment upload zone (drag-and-drop / click; first upload and every later change) ─── */
#garmentUploadZone { cursor: pointer; }
#garmentUploadZone.drag-over .media-thumbnail img { box-shadow: 0 0 0 3px var(--color-accent); }
#garmentUploadZone.uploading { opacity: 0.5; pointer-events: none; }

#garmentUploadPlaceholder {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  border: 2px dashed #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  color: #aaa;
  font-size: 0.82rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
#garmentUploadZone:hover #garmentUploadPlaceholder,
#garmentUploadZone.drag-over #garmentUploadPlaceholder { border-color: var(--color-accent); background: #f5f3ff; }
#garmentUploadZone.invalid #garmentUploadPlaceholder { border-color: #dc2626; }
#garmentUploadPlaceholderIcon { font-size: 1.75rem; color: #c4b5fd; line-height: 1; margin-bottom: 0.2rem; }

/* ── media metadata (model, action, environment) ──────────── */
.media-meta { font-size: 0.72rem; color: #555; margin-top: 0.35rem; line-height: 1.4; text-align: center; }
.media-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }