/**
 * ═══════════════════════════════════════════════════════════════════
 * LEXOR LUXURY REDESIGN - Part 4: Closing Animations & Fixes
 * ═══════════════════════════════════════════════════════════════════
 */

/* ==================== OPENING & CLOSING ANIMATIONS ==================== */

/* Modal OPENING animation - REMOVED duplicate, conflicts with part2 and part5 */
/* Moved to luxury-redesign-part2.css to avoid conflicts */

/* Modal CLOSING animation */
.modal-backdrop.closing {
    animation: fadeOut 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

.modal-backdrop.closing .modal {
    animation: modalSlideDown 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

/* Opening keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Closing keyframes */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes modalSlideDown {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
}

/* Document viewer OPENING */
.document-viewer-overlay,
.folder-explorer-overlay,
.file-editor-overlay {
    animation: fadeIn 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.document-viewer-overlay .document-viewer-window,
.folder-explorer-overlay .folder-explorer-window,
.file-editor-overlay .file-editor-window {
    animation: modalSlideUp 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Document viewer CLOSING */
.document-viewer-overlay.closing,
.folder-explorer-overlay.closing,
.file-editor-overlay.closing {
    animation: fadeOut 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.document-viewer-overlay.closing .document-viewer-window,
.folder-explorer-overlay.closing .folder-explorer-window,
.file-editor-overlay.closing .file-editor-window {
    animation: modalSlideDown 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Toast OPENING animation */
.toast {
    animation: toastSlideIn 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: pointer;
}

/* Toast CLOSING animation */
.toast.closing {
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }
}

/* ==================== CONTEXT LIBRARY PADDING FIX ==================== */
/* REVERTED - Was affecting translation UI width */
/* .left-panel .panel-content {
    padding: 12px 16px !important;
} */

.documents-list,
.summaries-list {
    padding: 0 4px;
    /* Additional padding for list items */
}

/* ==================== FILE EXPLORER HEADER FIX ==================== */
/* Revert to original layout - buttons stay at top right */
.folder-explorer-header {
    padding: 12px 16px !important;
    /* More padding to prevent button cutoff */
}

/* Scale buttons horizontally - prevent squeezing */
.folder-explorer-btn {
    min-width: 80px !important;
    padding: 6px 16px !important;
    /* More horizontal padding */
    font-size: 13px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.folder-explorer-btn.close-btn {
    min-width: 44px !important;
    /* X button stays square-ish */
    padding: 8px 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==================== FOLDER EXPLORER ICON FIXES ==================== */

/* Ensure folder/file icons are visible and properly styled */
.folder-item-icon-large {
    font-size: 32px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    opacity: 1 !important;
    filter: none !important;
}

/* File type icons in folder explorer */
.folder-item-card .folder-item-icon {
    font-size: 24px !important;
    opacity: 1 !important;
    filter: brightness(1.1);
}

/* Document icons in context library */
.doc-icon {
    font-size: 20px !important;
    opacity: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fix for any filter effects that might be hiding icons */
[data-theme="dark"] .folder-item-icon-large,
[data-theme="dark"] .folder-item-icon,
[data-theme="dark"] .doc-icon {
    filter: brightness(1.2) saturate(1.3);
}

[data-theme="light"] .folder-item-icon-large,
[data-theme="light"] .folder-item-icon,
[data-theme="light"] .doc-icon {
    filter: brightness(0.9) saturate(1.1);
}

/* Ensure emoji icons render properly */
.folder-item-icon-large::before,
.folder-item-icon::before,
.doc-icon::before {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* ==================== ADDITIONAL PANEL SPACING ==================== */

/* Context library documents need breathing room */
.document-card {
    margin: 0 2px;
    /* Small horizontal margin to prevent edge cutoff */
}

/* Card actions should be visible */
.card-actions,
.doc-actions {
    padding: 4px;
    gap: 6px;
}

.doc-action-btn {
    min-width: fit-content;
    white-space: nowrap;
    padding: 6px 10px;
}

/* ==================== ENSURE BUTTONS DON'T GET CUT OFF ==================== */
.document-card,
.summary-card {
    box-sizing: border-box;
    max-width: 100%;
}

.card-header {
    overflow: visible;
    /* Prevent button cutoff */
}

.card-actions {
    flex-shrink: 0;
    /* Prevent actions from shrinking */
}