/* --- Favorites Modal/Section (Often part of user-specific views) --- */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px; /* Consider var(--spacing-unit) * 2 */
    padding: 8px; /* Consider var(--spacing-unit) */
    margin-top: 16px; /* Consider var(--spacing-unit) * 2 */
}

.favorite-item {
    position: relative;
    border-radius: var(--border-radius); /* Updated to use variable */
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.favorite-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.favorite-item h3 {
    margin: 0;
    padding: 10px; /* Consider calc(var(--spacing-unit) * 1.25) */
    font-size: 0.9rem;
    text-align: center;
    background-color: #f5f5f5; /* Consider var(--color-bg-section) or var(--color-bg) */
    /* color: var(--color-text-main); */ /* Optional: ensure text color contrast */
}

.favorite-item img {
    width: 100%;
    aspect-ratio: 1; /* Keep image square or defined aspect */
    object-fit: cover;
    display: block; /* Remove extra space below image */
}

.delete-favorite { /* Button to remove a favorite item */
    position: absolute;
    top: 6px; /* Consider var(--spacing-unit) * 0.75 */
    right: 6px; /* Consider var(--spacing-unit) * 0.75 */
    width: 24px; /* Or use padding on an icon button */
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 16px; /* If using a text char like 'X' */
    line-height: 1; /* For text char */
    cursor: pointer;
    z-index: 2; /* Above image */
    display: flex; /* For centering icon if used */
    align-items: center; /* For centering icon if used */
    justify-content: center; /* For centering icon if used */
    /* Consider applying .icon-button common style if it's an icon */
}

.delete-favorite:hover {
    background-color: rgba(255, 0, 0, 0.1); /* Subtle hover for delete */
    /* color: var(--color-error); */ /* If icon color should change */
}

/* --- User Generated Content Gallery Section (e.g., saved images, history) --- */
#user-gallery-section { /* A distinct section on a page for user's gallery */
    margin-top: 30px; /* Consider calc(var(--spacing-unit) * 4) */
    padding: 20px; /* Consider calc(var(--spacing-unit) * 2.5) */
    background-color: var(--color-bg-section);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

#user-gallery-section h2 {
    margin-top: 0;
    margin-bottom: 20px; /* Consider calc(var(--spacing-unit) * 2.5) */
    color: var(--color-primary);
    text-align: center;
}

.gallery-grid { /* Grid layout for gallery items, distinct from .image-grid if different config */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust minmax as needed */
    gap: 16px; /* Consider calc(var(--spacing-unit) * 2) */
    margin-bottom: 20px; /* Consider calc(var(--spacing-unit) * 2.5) */
}

.gallery-item { /* Individual item in the user gallery */
    position: relative;
    border-radius: var(--border-radius); /* Updated to use variable */
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    aspect-ratio: 1; /* Maintain square aspect ratio */
    background-color: var(--color-bg); /* Ensure bg for items */
}

.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-item-favorite-button { /* Favorite button on a gallery item */
    position: absolute;
    top: 8px; /* Consider var(--spacing-unit) */
    right: 8px; /* Consider var(--spacing-unit) */
    z-index: 10; 
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 6px; /* calc(var(--spacing-unit) * 0.75) */
    font-size: 1.1rem; 
    color: var(--color-text-secondary);
    opacity: 0.7;
    transition: all 0.2s ease;
    /* This could also use .icon-button and be styled with specific placement */
}

.gallery-item-favorite-button:hover {
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 1;
    transform: scale(1.1);
    color: var(--color-primary);
}

.gallery-item-favorite-button.active {
    color: var(--color-error); 
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.9); 
}

.gallery-item-overlay { /* Overlay for showing info on hover */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white; /* Ensure text is readable */
    padding: var(--spacing-unit); /* Updated to use variable */
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-title {
    font-weight: bold;
    margin-bottom: 4px; /* Consider calc(var(--spacing-unit) / 2) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-item-date {
    font-size: 0.75rem;
    opacity: 0.8;
}

.loading-indicator { /* For loading more items in gallery */
    text-align: center;
    padding: var(--spacing-unit); /* Updated to use variable */
    color: var(--color-text-secondary);
    font-style: italic;
    grid-column: 1 / -1; /* Span all columns if inside a grid */
}

#load-more-images { /* Button to load more images */
    display: block;
    margin: 0 auto; /* Center the button */
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2.5); /* Updated */
    /* This can use .secondary-button or .primary-button from common.css */
    /* background-color: var(--color-bg); */
    /* border: 1px solid var(--color-border); */
    /* border-radius: var(--border-radius); */
    /* color: var(--color-text-secondary); */
    /* cursor: pointer; */
    /* transition: background-color 0.2s, color 0.2s; */
}

#load-more-images:hover {
    /* background-color: var(--color-bg-section); */
    /* color: var(--color-text-main); */
}

#no-images-message { /* Message when gallery is empty */
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
    padding: 20px; /* calc(var(--spacing-unit) * 2.5) */
}

/* --- User Uploaded Gallery Page (Simulated or for a dedicated page/modal) --- */
/* Styles originally commented as "User Uploaded Gallery Page (gallery.html)" */

body.gallery-page { /* If there's a dedicated gallery.html */
    /* Styles for body if gallery page is different */
}

.gallery-container { /* Main container for the gallery page/modal content */
    width: 100%;
    max-width: 1200px; 
    margin: calc(var(--spacing-unit) * 2) auto;
    padding: calc(var(--spacing-unit) * 2);
    /* background-color: var(--color-bg); */ /* Optional: if page has different bg */
}

.gallery-container header nav { /* Navigation within the gallery page/modal */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.gallery-container header .logo-container a {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: none;
}

.gallery-container header nav a:not(.logo-container a) {
    text-decoration: none;
    color: var(--color-text-secondary);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.gallery-container header nav a:not(.logo-container a):hover {
    background-color: var(--color-bg-section);
    color: var(--color-primary);
}

.image-upload-section { /* Section for uploading new images */
    background-color: var(--color-bg); /* Or var(--color-bg-section) if distinct */
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.image-upload-section h2 {
    margin-top: 0;
    color: var(--color-text-main); /* Or var(--color-primary) */
    /* Consider border-bottom like other section titles */
}

#upload-form div { /* Grouping within the upload form */
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

#upload-form label { /* Labels within the upload form */
    font-weight: normal; /* Override common label if needed */
    color: var(--color-text-secondary);
    /* display: block; */ /* Already in common label */
    /* margin-bottom: calc(var(--spacing-unit) * 0.5); */ /* Adjust if needed */
}

#upload-form input[type="file"],
#upload-form input[type="text"] { /* Inputs in the upload form */
    width: 100%;
    padding: var(--spacing-unit);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    margin-top: calc(var(--spacing-unit) * 0.5);
    /* background-color: var(--color-bg); */ /* Already in common input */
    /* color: var(--color-text-main); */ /* Already in common input */
}

#upload-form input[type="file"] { /* Specific to file input if not using hidden version */
    /* Browser default is often used here unless custom styled label is preferred */
    /* The common input[type="file"] { display: none; } would hide this */
    /* So, if this is to be visible, that common rule needs to be overridden or this made more specific. */
    /* For now, assuming it's for a visible one if these styles are separate. */
}


#upload-form button[type="submit"] { /* Submit button for upload form */
    /* This can use .primary-button from common.css */
    /* background-color: var(--color-primary); */
    /* color: white; */
    padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2.5);
    /* border: none; */
    /* border-radius: var(--border-radius); */
    /* cursor: pointer; */
    font-size: 0.95rem; /* Slightly different from common .primary-button */
    /* transition: background-color 0.2s ease; */
    /* width: auto; */ /* Override width:100% from .primary-button if applied */
}

/* #upload-form button[type="submit"]:hover { */
    /* background-color: var(--color-primary-hover); */
/* } */

.gallery-controls { /* Controls for filtering/searching the gallery, e.g., search bar */
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.gallery-controls input[type="search"] {
    width: 100%;
    max-width: 400px; 
    padding: var(--spacing-unit);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.image-grid { /* Grid for displaying uploaded images - potentially reusable with .gallery-grid */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Or other column setup */
    gap: calc(var(--spacing-unit) * 2);
}

.image-card { /* Card for displaying an individual uploaded image */
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.image-card:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.image-card img {
    width: 100%;
    height: 200px; /* Fixed height for uniformity, or use aspect-ratio */
    object-fit: cover; 
    display: block;
}

.image-card-info { /* Info section of the image card */
    padding: var(--spacing-unit);
    flex-grow: 1; 
}

.image-card-info .image-description {
    font-size: 0.9rem;
    color: var(--color-text-main);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    min-height: 2.5em; /* Allow space for a couple of lines */
    /* text-overflow, etc. for longer descriptions if needed */
}

.image-card-info .image-tags {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    word-break: break-word; /* Prevent long tags from breaking layout */
}

.image-card-info .image-date {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    opacity: 0.8;
}

.image-card-actions { /* Action buttons (edit, delete) for an image card */
    padding: var(--spacing-unit);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end; 
    gap: var(--spacing-unit);
}

.image-card-actions .edit-button,
.image-card-actions .delete-button {
    /* These could use .secondary-button and .danger-button from common.css */
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    font-size: 0.8rem;
    /* border-radius: var(--border-radius); */
    /* cursor: pointer; */
    /* border: 1px solid transparent; */
    /* transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; */
}

.image-card-actions .edit-button {
    background-color: var(--color-bg-section); /* Or use .secondary-button */
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.image-card-actions .edit-button:hover {
    background-color: var(--color-border); /* Adjust hover */
    color: var(--color-text-main);
}

.image-card-actions .delete-button {
    background-color: var(--color-error); /* Or use .danger-button */
    color: white;
}
.image-card-actions .delete-button:hover {
    background-color: #B00020; /* Darker error color */
}

/* --- "My Uploads" Link in index.html header --- */
/* #my-uploads-link uses .icon-button styles from common.css */

/* --- "Insert from My Uploads" Button (on main page, opens gallery modal) --- */
#insert-from-gallery-button {
    background-color: var(--color-secondary-bg-panel);
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
    font-size: 0.9rem;
    /* Could also be a .secondary-button with specific color overrides */
    border-radius: var(--border-radius); /* Ensure consistency */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#insert-from-gallery-button:hover {
    background-color: var(--color-secondary);
    color: white;
}

/* --- Gallery Modal for Prompt (Modal to select an uploaded image for a prompt) --- */
/* This modal might use general .modal styles from settings.css for its frame */
#gallery-modal-for-prompt .modal-content { /* Override general modal content for this specific modal */
    max-width: 90%;
    width: 800px; /* Larger than default modal */
}

#gallery-modal-for-prompt .modal-content.large { /* Even larger variant if needed */
    max-width: 1000px; 
}

#gallery-modal-image-grid { /* Grid of images within this selection modal */
    max-height: 50vh; 
    overflow-y: auto;
    padding: var(--spacing-unit);
    background-color: var(--color-bg-section); 
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    margin-bottom: calc(var(--spacing-unit) * 2);
    /* Uses .image-grid or .gallery-grid for layout, specified below */
    display: grid; /* Assuming a grid here */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Smaller cards */
    gap: var(--spacing-unit);
}

/* Using .image-card styles for items within #gallery-modal-image-grid */
/* May need a .compact-card variant if significantly different */
#gallery-modal-image-grid .image-card.compact-card {
    cursor: pointer;
    /* any specific overrides for compact cards */
}
#gallery-modal-image-grid .image-card.compact-card img {
    height: 120px; 
}

#gallery-modal-image-grid .image-card .image-card-details-modal p { /* Typo? Should be image-card-info? */
    font-size: 0.8rem;
    margin: calc(var(--spacing-unit) * 0.25) 0;
    line-height: 1.3;
}

#gallery-modal-image-grid .image-card .image-card-details-modal .tags-modal { /* Typo? */
    font-size: 0.7rem;
    opacity: 0.8;
}

#gallery-modal-image-grid .image-card.selected { /* Style for selected image in modal */
    box-shadow: 0 0 0 3px var(--color-primary);
    border-color: var(--color-primary);
}

.gallery-modal-controls { /* Controls (e.g. search) for this specific modal */
    margin-bottom: var(--spacing-unit);
}

.gallery-modal-controls input[type="search"] {
    width: 100%;
    padding: var(--spacing-unit);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

.gallery-modal-actions { /* Actions section at the bottom of this modal */
    margin-top: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--color-border);
    text-align: right; /* Align buttons to right, or center */
}

.gallery-modal-actions h4 { /* Title for actions sub-section */
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-secondary);
    text-align: left; /* Reset text-align if parent is centered/right */
}

.gallery-modal-actions div { /* Grouping for options like checkboxes */
    margin-bottom: var(--spacing-unit);
    text-align: left; /* Reset text-align */
}

.gallery-modal-actions label {
    font-weight: normal;
    margin-left: calc(var(--spacing-unit) * 0.5);
}

#gallery-modal-confirm-selection { /* Confirm button for this modal */
    /* Uses .primary-button styles from common.css */
    width: auto; /* Override width:100% from .primary-button if needed */
    /* float: right; */ /* If aligning to one side */
}

/* Preview items for images selected from gallery (shown on main page input area) */
.gallery-preview-item {
    display: flex;
    align-items: center;
    padding: calc(var(--spacing-unit) * 0.5);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 4px; /* From original .image-preview-container */
}

.gallery-preview-item img {
    width: 40px !important; 
    height: 40px !important;
    object-fit: cover;
    margin-right: var(--spacing-unit);
    border-radius: var(--border-radius_small, 2px); 
}

/* --- Full Page User Uploaded Gallery Modal (New) --- */
/* This is a distinct full-page modal experience for managing user uploads */
.full-page-modal {
    display: none; 
    position: fixed; 
    z-index: 1001; /* Ensure it's on top, adjust if other modals go higher */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); 
    animation: fadeIn 0.3s ease-out; /* Simple fade-in */
}

@keyframes fadeIn { /* Definition for fadeIn animation */
    from { opacity: 0; }
    to { opacity: 1; }
}

.full-page-modal-content {
    background-color: #1e1e1e; /* Dark background for the modal content area */
    color: #e0e0e0; /* Light text for dark background */
    margin: auto; 
    padding: 20px; /* calc(var(--spacing-unit) * 2.5) */
    border: 1px solid #444; /* Darker border */
    width: 95%; 
    max-width: 1200px; 
    height: 95vh; 
    max-height: 95vh;
    border-radius: var(--border-radius); /* Updated */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    position: relative; 
}

.full-page-modal .modal-header { /* Header specific to this full-page modal */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333; /* Darker border */
    padding-bottom: 10px; /* calc(var(--spacing-unit) * 1.25) */
    margin-bottom: 15px; /* calc(var(--spacing-unit) * 2) */
    flex-shrink: 0;
}

.full-page-modal .modal-header h2 {
    margin: 0;
    font-size: 1.8em;
    color: #e0e0e0; /* Light text */
}

.full-page-modal .close-button { /* Close button for this full-page modal */
    font-size: 1.8em; /* Larger close button */
    padding: 5px 10px; /* calc(var(--spacing-unit)*0.5) calc(var(--spacing-unit)) */
    color: #e0e0e0; /* Light color for 'X' */
    /* background: none; border: none; cursor: pointer; */ /* If using .icon-button this is covered */
}

.full-page-modal-body {
    flex-grow: 1; 
    overflow-y: auto; 
    padding-right: 10px; /* Space for scrollbar, adjust if using custom scrollbars */
}

.gallery-container-modal-content { /* Wrapper for content inside full-page modal body */
    display: flex;
    flex-direction: column;
    gap: 30px; /* calc(var(--spacing-unit) * 4) */
}

/* Sections within the full-page gallery modal */
.full-page-modal .image-upload-section,
.full-page-modal .image-display-section { /* Assuming .image-display-section is for the grid */
    background-color: #2a2a2a; 
    padding: 20px; /* calc(var(--spacing-unit) * 2.5) */
    border-radius: var(--border-radius_small, 6px); /* Updated, consider var(--border-radius) */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.full-page-modal .image-upload-section h3,
.full-page-modal .image-display-section h3 {
    margin-top: 0;
    margin-bottom: 15px; /* calc(var(--spacing-unit) * 2) */
    color: #cccccc; /* Lighter text */
    border-bottom: 1px solid #444; /* Darker border */
    padding-bottom: 8px; /* var(--spacing-unit) */
}

/* Form styling within the full-page modal's upload section */
#fp-gallery-upload-form { /* ID for the form in full-page modal */
    display: flex;
    flex-direction: column;
    gap: 15px; /* calc(var(--spacing-unit) * 2) */
}

#fp-gallery-upload-form div { /* Grouping within this specific form */
    display: flex;
    flex-direction: column;
    gap: 5px; /* calc(var(--spacing-unit) * 0.5) */
}

#fp-gallery-upload-form label {
    font-weight: bold;
    color: #bbb; /* Lighter label color */
}

#fp-gallery-upload-form input[type="file"],
#fp-gallery-upload-form input[type="text"] {
    padding: 10px; /* calc(var(--spacing-unit) * 1.25) */
    border: 1px solid #555; /* Darker border */
    background-color: #333; /* Dark input background */
    color: #ddd; /* Light input text */
    border-radius: var(--border-radius); /* Updated */
}

#fp-gallery-upload-form input[type="file"]::file-selector-button {
    /* Assuming --primary-color and --primary-color-dark are defined in :root or this modal's scope */
    /* For now, using fallback or existing CSS vars */
    background-color: var(--color-primary); 
    color: white;
    border: none;
    padding: 8px 12px; /* var(--spacing-unit) calc(var(--spacing-unit)*1.5) */
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#fp-gallery-upload-form input[type="file"]::file-selector-button:hover {
    background-color: var(--color-primary-hover); /* Fallback to existing hover */
}

#fp-gallery-upload-form button[type="submit"] {
    /* This button can use .primary-button and have dark mode adaptations if needed */
    align-self: flex-start; /* Don't take full width */
    padding: 10px 20px; /* calc(var(--spacing-unit)*1.25) calc(var(--spacing-unit)*2.5) */
    /* color: white; background-color: var(--color-primary); etc. */
}

/* Status messages within the full-page modal */
#fp-gallery-upload-status,
#fp-gallery-status-message { /* IDs for status messages in this modal */
    margin-top: 10px; /* var(--spacing-unit) */
    padding: 10px; /* var(--spacing-unit) */
    border-radius: var(--border-radius);
    text-align: center;
    /* Add specific .error, .success styles if different from global ones in common.css */
    /* e.g., #fp-gallery-upload-status.error { background-color: var(--color-error-bg-dark); } */
}

/* Gallery controls within the full-page modal */
.full-page-modal .gallery-controls {
    margin-bottom: 15px; /* calc(var(--spacing-unit) * 2) */
}

#fp-gallery-search-tags { /* Search input in this modal */
    width: 100%;
    padding: 10px; /* calc(var(--spacing-unit) * 1.25) */
    border: 1px solid #555;
    background-color: #333;
    color: #ddd;
    border-radius: var(--border-radius);
    box-sizing: border-box;
}

#fp-gallery-image-grid { /* Image grid specific to full-page modal */
    /* Can inherit from .image-grid or .gallery-grid if selectors are general enough */
    /* Example: display: grid; grid-template-columns: ...; gap: ...; */
}

/* Image card adjustments for dark background of full-page modal */
.full-page-modal .image-card {
    background-color: #333; 
    border: 1px solid #4a4a4a;
    /* color for text inside card needs to be light */
}

.full-page-modal .image-card-info p, /* General text in card info */
.full-page-modal .image-card .image-description,
.full-page-modal .image-card .image-tags,
.full-page-modal .image-card .image-date {
    color: #b0b0b0; /* Lighter text for readability on dark card */
}
.full-page-modal .image-card-info .image-description { color: #ccc; } /* Slightly brighter for desc */


/* Responsive adjustments for full page modal */
@media (max-width: 768px) {
    .full-page-modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        border: none;
    }

    .full-page-modal-body {
        padding-right: 0; /* No extra space for scrollbar if it's overlaying */
    }
}

/* Z-index for gallery related modals to ensure they are above general modals if needed */
#gallery-modal-for-prompt {
    z-index: 1001; 
}
/* .full-page-modal already has z-index: 1001 */

/* My Uploads Sidebar Module Styles */
.my-uploads-container {
    padding: var(--spacing-unit);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.my-uploads-container h2 {
    margin: 0 0 var(--spacing-unit) 0;
    font-size: 1.2rem;
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: calc(var(--spacing-unit) * 0.5);
}

.my-uploads-container h3 {
    margin: 0 0 calc(var(--spacing-unit) * 0.75) 0;
    font-size: 1rem;
    color: var(--color-text-main);
}

.my-uploads-container .auth-message {
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
    padding: calc(var(--spacing-unit) * 2);
}

.my-uploads-container .image-upload-section {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    padding-bottom: calc(var(--spacing-unit) * 1.5);
    border-bottom: 1px solid var(--color-border-light);
}

.my-uploads-container .image-display-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.my-uploads-container .form-group {
    margin-bottom: var(--spacing-unit);
}

.my-uploads-container .form-group label {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.25);
    font-size: 0.9rem;
    color: var(--color-text-main);
    font-weight: 500;
}

.my-uploads-container .form-group input[type="file"],
.my-uploads-container .form-group input[type="text"] {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    background-color: var(--color-bg);
    color: var(--color-text-main);
}

.my-uploads-container .form-group input[type="file"]:focus,
.my-uploads-container .form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.my-uploads-container .upload-status {
    margin-top: calc(var(--spacing-unit) * 0.5);
    min-height: 20px;
}

.my-uploads-container .success-message {
    color: var(--color-success, #28a745);
    font-size: 0.9rem;
    padding: calc(var(--spacing-unit) * 0.5);
    background-color: rgba(40, 167, 69, 0.1);
    border-radius: var(--border-radius);
}

.my-uploads-container .error-message {
    color: var(--color-error, #dc3545);
    font-size: 0.9rem;
    padding: calc(var(--spacing-unit) * 0.5);
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: var(--border-radius);
}

.my-uploads-container .gallery-controls {
    margin-bottom: var(--spacing-unit);
}

.my-uploads-container .gallery-controls input[type="search"] {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    background-color: var(--color-bg);
    color: var(--color-text-main);
}

.my-uploads-container #my-uploads-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-unit);
    padding: calc(var(--spacing-unit) * 0.5) 0;
}

.my-uploads-container .loading-indicator,
.my-uploads-container .no-images-message {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
    padding: calc(var(--spacing-unit) * 2);
}

.my-uploads-container .image-card {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    aspect-ratio: 1;
    background-color: var(--color-bg);
}

.my-uploads-container .image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.my-uploads-container .image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.my-uploads-container .image-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: calc(var(--spacing-unit) * 0.5);
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
}

.my-uploads-container .image-card:hover .image-card-info {
    opacity: 1;
}

.my-uploads-container .image-card-info p {
    margin: 0 0 calc(var(--spacing-unit) * 0.25) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-uploads-container .image-card-info .image-description {
    font-weight: 500;
}

.my-uploads-container .image-card-info .image-tags {
    opacity: 0.8;
}

.my-uploads-container .image-card-info .image-date {
    opacity: 0.6;
    font-size: 0.7rem;
}

.my-uploads-container .image-card-actions {
    position: absolute;
    top: calc(var(--spacing-unit) * 0.5);
    right: calc(var(--spacing-unit) * 0.5);
    display: flex;
    gap: calc(var(--spacing-unit) * 0.25);
    opacity: 0;
    transition: opacity 0.2s;
}

.my-uploads-container .image-card:hover .image-card-actions {
    opacity: 1;
}

.my-uploads-container .image-card-actions button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-text-main);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
}

.my-uploads-container .image-card-actions button:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.my-uploads-container .image-card-actions .delete-button:hover {
    background-color: rgba(220, 53, 69, 0.9);
    color: white;
}

/* Gallery sidebar container styles */
.gallery-sidebar-container {
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.gallery-sidebar-container h3 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    padding-bottom: 8px;
    border-bottom: 2px solid #6366f1;
}

.gallery-option {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-option:hover {
    background: #f1f5f9;
    border-color: #6366f1;
    color: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.gallery-option.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

/* Mobile responsiveness for My Uploads */
@media (max-width: 768px) {
    .my-uploads-container #my-uploads-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
    
    .my-uploads-container .image-card-actions button {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    .my-uploads-container .form-group input[type="file"],
    .my-uploads-container .form-group input[type="text"] {
        padding: 12px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .gallery-sidebar-container {
        padding: 12px;
    }
    
    .gallery-sidebar-container h3 {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .gallery-option {
        padding: 10px 12px;
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .gallery-option:hover {
        transform: none; /* Disable hover transform on mobile */
    }
}

@media (max-width: 480px) {
    .gallery-sidebar-container {
        padding: 8px;
    }
    
    .gallery-option {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    
    .gallery-sidebar-container h3 {
        font-size: 0.95rem;
    }
}

/* Templates sidebar container styles */
.templates-sidebar-container {
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.templates-sidebar-container h3 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    padding-bottom: 8px;
    border-bottom: 2px solid #6366f1;
}

.templates-option {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.templates-option:hover {
    background: #f1f5f9;
    border-color: #6366f1;
    color: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.templates-option.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

@media (max-width: 768px) {
    .templates-sidebar-container {
        padding: 12px;
    }
    
    .templates-sidebar-container h3 {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .templates-option {
        padding: 10px 12px;
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .templates-option:hover {
        transform: none; /* Disable hover transform on mobile */
    }
}

@media (max-width: 480px) {
    .templates-sidebar-container {
        padding: 8px;
    }
    
    .templates-option {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    
    .templates-sidebar-container h3 {
        font-size: 0.95rem;
    }
}