.image-thumbnail-shared {
	width: 180px; /* Or a size that matches your library/original image display */
	height: 180px; /* Maintain aspect ratio or set fixed size */
	object-fit: cover;
	border-radius: 0.5rem; /* Tailwind: rounded-lg */
	margin-bottom: 0.5rem; /* Tailwind: mb-2 */
	position: relative; /* For positioning the pill */
	cursor: pointer; /* Indicate it's clickable */
}

/* New Status Pill System */
.status-pill-base {
	position: absolute; /* Pills are absolutely positioned relative to their container */
	/* top: 8px; /* REMOVE - Specific pills will position */
	/* right: 8px; /* REMOVE - Specific pills will position */
	background-color: rgba(0, 0, 0, 0.65); /* Default, can be overridden */
	color: white;
	padding: 4px 10px;
	border-radius: 9999px;
	font-size: 0.75rem; /* Slightly larger for single letter, adjust as needed */
	line-height: 1;
	border: 1px solid rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.025em;
	min-width: 28px; /* Ensure a minimum width for the pill for aesthetics with single letter */
	text-align: center;
}

.status-pill-original {
	background-color: #3b82f6; /* Tailwind: bg-blue-500 */
	top: 8px; /* Position top-right */
	right: 8px;
}

.status-pill-generated {
	background-color: #ec4899; /* Tailwind: bg-pink-500 */
	top: 8px; /* Position top-right */
	right: 8px;
}

/* Basic Image Viewer Modal Styles */
.image-viewer-modal {
	display: none; /* Hidden by default, will be shown via JS */
	position: fixed;
	z-index: 1055; /* Ensure it's on top, adjust if needed based on other modals */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.85); /* Darker overlay */
	justify-content: center;
	align-items: center;
	padding: 20px; /* Add some padding for smaller screens */
}

.image-viewer-modal-content {
	position: relative;
	margin: auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 0.5rem;
	max-width: 80vw; /* Max width for the content area */
	max-height: 90vh; /* Max height */
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.image-viewer-modal-content img {
	max-width: 100%;
	max-height: calc(90vh - 120px); /* Adjusted for close and action buttons */
	object-fit: contain;
	border-radius: 0.25rem;
	margin-bottom: 15px; /* Space before action buttons */
}

.image-viewer-modal-close {
	position: absolute;
	top: -10px; /* Position slightly outside the top right */
	right: -10px;
	background-color: #fff;
	color: #333;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid #ddd;
	line-height: 1;
}
.image-viewer-modal-close:hover,
.image-viewer-modal-close:focus {
	background-color: #f0f0f0;
	color: #000;
	text-decoration: none;
}

.image-viewer-modal-actions {
	margin-top: 15px;
	display: flex;
	gap: 10px;
}

/* Reusing Bootstrap button styles for consistency, or define custom ones */
.image-viewer-modal-actions .btn {
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	border-radius: 0.375rem; /* Tailwind: rounded-md */
}

/* Variant History Strip Styling */
#variant-history {
	display: flex;
	flex-wrap: wrap; /* Allow items to wrap to the next line */
	gap: 0.75rem; /* Tailwind: gap-3. Adjust as needed for spacing between thumbnails */
	justify-content: flex-start; /* Align items to the start of the container */
	padding-top: 0.5rem; /* Add some padding at the top */
}

/* Individual thumbnail container within the history strip */
/* The .image-thumbnail-shared class already defines width/height for the image itself. */
/* If thumbContainer divs (created in renderVariantThumbnail) need specific sizing or flex properties, add them here. */
/* For a two-per-row layout, assuming image-thumbnail-shared width is ~180px and gap is ~0.75rem (12px), 
   the #variant-history container width would need to be around 372px + padding for two to fit snugly.
   Alternatively, we can make the thumbnail containers themselves take up ~48-50% of the #variant-history width to force two per row. */

#variant-history > div {
	/* Targeting the thumbContainer divs */
	flex-basis: calc(50% - 0.375rem); /* (50% of container width) - (half of the gap) to fit two per row */
	/* Ensure box-sizing is border-box if padding/borders are added to thumbContainer itself */
	/* max-width: calc(50% - 0.375rem); */ /* Optional: to prevent them from growing larger if only one item */
}

/* Ensure the image inside the container scales correctly if a fixed width isn't desired for the container */
#variant-history > div .image-thumbnail-shared {
	width: 100%; /* Make image fill its flex container parent */
	/* height: auto; */ /* Allow height to adjust based on aspect ratio, or keep fixed from .image-thumbnail-shared */
	/* The .image-thumbnail-shared already has object-fit: cover, which is good. */
}

/* Status Pills for Variant History (small thumbs) */
.status-pill-variant-history {
	/* position: absolute; /* Already in status-pill-base if used */
	bottom: 10px; /* Override for specific bottom centering */
	left: 50%;
	transform: translateX(-50%);
	top: auto; /* Ensure top is not set from base */
	right: auto; /* Ensure right is not set from base */
	font-size: 9px;
	padding: 1px 8px;
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
}