/* Image Details Modal Styles */

.modal-content.expanded {
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
}

#detailsImagePreview {
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#imageDetailsModal .copy-btn {
    transition: all 0.2s ease;
}

#imageDetailsModal .copy-btn:hover {
    transform: scale(1.05);
}

#imageDetailsModal .copy-btn:active {
    transform: scale(0.95);
}

/* Content containers */
#detailsTitle,
#detailsSmartFilename,
#detailsDescription,
#detailsPrompt {
    font-family: 'Nunito', sans-serif;
    line-height: 1.5;
    transition: background-color 0.2s ease;
}

#detailsTitle:hover,
#detailsSmartFilename:hover,
#detailsDescription:hover,
#detailsPrompt:hover {
    background-color: #e9f5ff;
}

/* Scrollbar styling for description and prompt */
#detailsDescription,
#detailsPrompt {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

#detailsDescription::-webkit-scrollbar,
#detailsPrompt::-webkit-scrollbar {
    width: 8px;
}

#detailsDescription::-webkit-scrollbar-track,
#detailsPrompt::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 4px;
}

#detailsDescription::-webkit-scrollbar-thumb,
#detailsPrompt::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 4px;
}

/* Animation for copy success */
@keyframes copy-success {
    0% { background-color: #4299e1; }
    50% { background-color: #48bb78; }
    100% { background-color: #4299e1; }
}

.copy-success {
    animation: copy-success 1s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content.expanded {
        width: 95%;
        max-width: none;
    }
}