/* Custom CSS from existing style.css, plus new styles */
body { font-family: Inter, sans-serif; }
@keyframes float { 0% { transform: translateY(20px) rotate(0deg) scale(0.8); opacity: 0; } 10% { opacity: 0.5; } 25% { opacity: 1; } 50% { transform: translateY(-40px) rotate(180deg) scale(1); opacity: 0.7; } 75% { opacity: 1; } 90% { opacity: 0.5; } 100% { transform: translateY(20px) rotate(360deg) scale(0.8); opacity: 0; } }
.animate-float { animation-name: float; animation-timing-function: linear; animation-iteration-count: infinite; }
.upload-container { transition: box-shadow 0.4s ease-out, border-color 0.4s ease-out; box-shadow: none; border-style: dashed !important; }
.group:hover .upload-container:not([aria-disabled='true']) { animation: neon-glow-pulse 1.5s ease-in-out infinite alternate; border-color: rgba(255, 159, 28, 0.3) !important; box-shadow: 0 0 8px rgba(255, 159, 28, 0.6), 0 0 16px rgba(255, 89, 94, 0.4), 0 0 24px rgba(255, 202, 58, 0.3); }
@keyframes neon-glow-pulse { from { box-shadow: 0 0 5px rgba(255, 159, 28, 0.5), 0 0 10px rgba(255, 159, 28, 0.4), 0 0 15px rgba(255, 89, 94, 0.3), 0 0 20px rgba(255, 89, 94, 0.2), 0 0 25px rgba(255, 202, 58, 0.1), 0 0 30px rgba(255, 202, 58, 0.1); } to { box-shadow: 0 0 8px rgba(255, 159, 28, 0.8), 0 0 16px rgba(255, 159, 28, 0.7), 0 0 24px rgba(255, 89, 94, 0.5), 0 0 32px rgba(255, 89, 94, 0.4), 0 0 40px rgba(255, 202, 58, 0.3), 0 0 48px rgba(255, 202, 58, 0.2); } }
#upload-area.drag-active { border-color: #4f46e5 !important; background-color: rgba(239, 246, 255, 0.7); transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.dark #upload-area.drag-active { background-color: rgba(49, 46, 129, 0.5); }

/* Shared hover style for action buttons like 3-dots and before/after */
.action-button-hover {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.action-button-hover:hover:not(:disabled) {
    background-color: rgba(59, 130, 246, 0.15); /* Light blueish background for the button itself */
    color: #2563eb; /* Tailwind indigo-600 for the icon */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(59, 130, 246, 0.2);
}
.dark .action-button-hover:hover:not(:disabled) {
    background-color: rgba(30, 58, 138, 0.4); /* Darker blueish background for the button */
    color: #2563eb; /* Tailwind blue-300 for the icon */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(93, 197, 253, 0.2);
}
.action-button-hover:hover:not(:disabled) svg {
    opacity: 1 !important;
    color: currentColor !important; /* Ensures SVG inherits the button's text color */
}


#notification-popup { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }
#notification-popup.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#notification-popup {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(209, 213, 219, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17);
}
.dark #notification-popup {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(71, 85, 105, 0.3);
}
#notification-popup.success { background-color: rgba(74, 222, 128, 0.5); color: #052e16; border-color: rgba(34, 197, 94,0.4); }
.dark #notification-popup.success { background-color: rgba(34, 197, 94, 0.6); color: #dcfce7; border-color: rgba(74, 222, 128,0.5); }
#notification-popup.error { background-color: rgba(248, 113, 113, 0.5); color: #450a0a; border-color: rgba(239, 68, 68,0.4); }
.dark #notification-popup.error { background-color: rgba(239, 68, 68, 0.6); color: #fee2e2; border-color: rgba(248, 113, 113,0.5); }
#notification-popup.info { background-color: rgba(96, 165, 250, 0.5); color: #1e3a8a; border-color: rgba(59, 130, 246,0.4); }
.dark #notification-popup.info { background-color: rgba(59, 130, 246, 0.6); color: #dbeafe; border-color: rgba(96, 165, 250,0.5); }
#notification-popup.warning { background-color: rgba(250, 204, 21, 0.5); color: #713f12; border-color: rgba(245, 158, 11,0.4); }
.dark #notification-popup.warning { background-color: rgba(245, 158, 11, 0.6); color: #fefce8; border-color: rgba(250, 204, 21,0.5); }

#resize-select-container { max-width: 320px; margin-left: auto; margin-right: auto; }

.image-wrapper { position: relative; }
.image-card {
    overflow: hidden;
}

.image-wrapper.processing-glow::before {
    content: "";
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 0.8rem;
    z-index: 5;
    pointer-events: none;
    animation: processingGlowRainbow 2s linear infinite;
}
@keyframes processingGlowRainbow {
    0% { box-shadow: 0 0 10px 2px #86efac, 0 0 18px 4px #34d399, 0 0 26px 6px #059669; opacity: 0.6; }
    25% { box-shadow: 0 0 12px 3px #6ee7b7, 0 0 22px 5px #10b981, 0 0 30px 7px #047857; opacity: 0.8; }
    50% { box-shadow: 0 0 10px 2px #a7f3d0, 0 0 18px 4px #34d399, 0 0 26px 6px #065f46; opacity: 0.6; }
    75% { box-shadow: 0 0 12px 3px #d1fae5, 0 0 22px 5px #10b981, 0 0 30px 7px #064e3b; opacity: 0.8; }
    100% { box-shadow: 0 0 10px 2px #86efac, 0 0 18px 4px #34d399, 0 0 26px 6px #059669; opacity: 0.6; }
}

.progress-indicator-container {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity 0.3s ease-in-out;
    padding: 8px;
    border-radius: 8px;
}

.progress-indicator-container .progress-text-standalone {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #374151;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.dark .progress-indicator-container .progress-text-standalone {
    color: #e5e7eb;
    background-color: rgba(31, 41, 55, 0.75);
     box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* --- Updated Spinner Colors --- */
.progress-spinner-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(
        #58a1fa, /* Tailwind Blue-400 */
        #2dd4bf, /* Tailwind Teal-400 */
        #33e1a1, /* Tailwind Emerald-400 */
        #9575f5, /* Tailwind Violet-400 */
        #569ff9  /* Loop back to Blue-400 */
    );
    animation: spinSmooth 1.2s linear infinite;
}

.progress-spinner-ring::before {
    content: ''; position: absolute;
    width: calc(100% - 8px); /* Creates a 4px thick ring */
    height: calc(100% - 8px);/* Creates a 4px thick ring */
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 1;
}
.dark .progress-spinner-ring::before {
    background-color: #1f2937; /* Dark mode background (Slate-800) */
}

.progress-spinner-text {
    position: absolute; font-size: 10px;
    font-weight: 600; color: #374151;
    z-index: 2; text-align: center; line-height: 1.1;
    max-width: calc(100% - 12px);
    word-wrap: break-word;
}
.dark .progress-spinner-text { color: #e5e7eb; }

@keyframes spinSmooth {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* --- End of Spinner --- */


/* --- Stylish Glassmorphism for Dropdown Menu (Main Panel) --- */
.dropdown-menu {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    background: rgba(243, 243, 243, 0.65); 
    backdrop-filter: blur(30px) saturate(125%); 
    -webkit-backdrop-filter: blur(30px) saturate(125%);
    border: 1px solid rgba(0, 0, 0, 0.05); 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0,0,0,0.05); 
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 0.5rem; 
    padding: 0.375rem; 
}

.dark .dropdown-menu {
    background: rgba(30, 30, 30, 0.70); 
    backdrop-filter: blur(30px) saturate(125%);
    -webkit-backdrop-filter: blur(30px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.07); 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0,0,0,0.1);
}
/* --- End of Main Dropdown Panel Glassmorphism --- */

/* --- Stylish Glassmorphism for Dropdown Menu Items --- */
.dropdown-menu-item {
    display: flex; align-items: center; gap: 0.75rem;
    position: relative; overflow: visible;
    padding: 0.5rem 0.75rem; 
    border-radius: 0.375rem; 
    margin: 2px; 
    font-size: 0.875rem; 

    background: transparent; /* Base is transparent */
    color: #1f2937; 
    transition: background-color 0.15s ease-out, color 0.15s ease-out, transform 0.1s ease-out, box-shadow 0.15s ease-out;
    text-shadow: none !important;
}

.dark .dropdown-menu-item {
    color: #e5e7eb; 
}

.dropdown-menu-item svg {
    flex-shrink: 0; width: 16px; height: 16px;
    opacity: 0.7;
    transition: opacity 0.15s ease-out;
}
.dark .dropdown-menu-item svg {
    opacity: 0.6;
}

.dropdown-menu-item span {
    white-space: nowrap;
    opacity: 1;
    max-width: 150px; 
}

/* Updated Light Blue Hover Effect for Dropdown Menu Items */
.dropdown-menu-item:hover:not(:disabled) {
    background-color: rgba(59, 130, 246, 0.15); /* Same as .action-button-hover */
    color: #2563eb; /* Same text color as .action-button-hover */
    transform: scale(1.01); 
    /* Optional: keep a subtle backdrop-filter if desired for glassiness, or remove for pure color */
    /* backdrop-filter: blur(2px); */
    /* -webkit-backdrop-filter: blur(2px); */
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1); /* Subtle shadow matching the hover color */
}
.dark .dropdown-menu-item:hover:not(:disabled) {
    background-color: rgba(30, 58, 138, 0.4); /* Same as .dark .action-button-hover */
    color: #2563eb; /* Same text color as .dark .action-button-hover */
    transform: scale(1.01);
    /* backdrop-filter: blur(2px); */
    /* -webkit-backdrop-filter: blur(2px); */
    box-shadow: 0 1px 3px rgba(93, 197, 253, 0.15);
}

.dropdown-menu-item:hover:not(:disabled) svg {
    opacity: 1; /* Ensure SVG is fully opaque on hover */
    color: currentColor; /* SVG inherits the item's text color */
}

.dropdown-menu-item:active:not(:disabled) {
    transform: scale(0.99);
    background-color: rgba(59, 130, 246, 0.25); /* Slightly darker/more opaque on active */
}
.dark .dropdown-menu-item:active:not(:disabled) {
    background-color: rgba(30, 58, 138, 0.5);
}

/* Delete button hover remains distinct red */
.dropdown-menu-item.delete-hover:hover:not(:disabled) {
    background-color: rgba(220, 38, 38, 0.15); 
    /* backdrop-filter: blur(4px); */ /* Optional: keep if desired */
    /* -webkit-backdrop-filter: blur(4px); */
    color: #b91c1c; 
    box-shadow: 0 2px 8px rgba(220,38,38,0.07);
}
.dark .dropdown-menu-item.delete-hover:hover:not(:disabled) {
    background-color: rgba(220, 38, 38, 0.2); 
    /* backdrop-filter: blur(4px); */
    /* -webkit-backdrop-filter: blur(4px); */
    color: #f87171; 
    box-shadow: 0 2px 8px rgba(220,38,38,0.1);
}
/* --- End of Dropdown Menu Item Styling --- */

.image-preview.processed { cursor: pointer; }

.image-card.expired .image-preview { filter: blur(8px) grayscale(80%); opacity: 0.6; }
.image-card.expired .action-buttons button:not([data-action="close"]):not([data-action="delete"]),
.image-card.expired .p-3 button:not([data-action="close"]):not([data-action="delete"]) {
    opacity: 0.5; pointer-events: none; cursor: not-allowed;
}
 .image-card.expired .dropdown-menu button:not([data-action="close"]):not([data-action="delete"]) {
     opacity: 0.5 !important; pointer-events: none !important; cursor: not-allowed !important;
 }