@keyframes fullIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


@keyframes fullOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(30px); opacity: 0; }
}


@keyframes bottomSheetIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


@keyframes bottomSheetOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}



@media (max-width: 768px) {

    
    .modal-overlay {
        padding: 0 !important;
        background: #0d1117 !important;
    }

    
    .modal-overlay .modal,
    .modal-overlay .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        overflow: hidden;
        animation: fullIn 0.25s ease;
        margin: 0 !important;
    }

    
    .modal-overlay .modal::before,
    .modal-overlay .modal-content::before {
        display: none !important;
    }

    
    .modal-overlay .modal-header {
        padding-top: calc(12px + env(safe-area-inset-top, 0));
    }

    
    .modal-overlay .modal-body {
        padding: 16px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    
    .modal-overlay .modal-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }

    
    .modal-overlay .form-group input,
    .modal-overlay .form-group select {
        padding: 14px 12px;
        font-size: 16px;
    }
    .modal-overlay .form-group textarea {
        padding: 14px 12px;
        font-size: 16px;
        min-height: 120px;
    }

    
    .modal-overlay.closing .modal,
    .modal-overlay.closing .modal-content {
        animation: fullOut 0.2s ease forwards;
    }

    
    .notification-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh;
        animation: bottomSheetIn 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .notification-panel.closing {
        animation: bottomSheetOut 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }
}




body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}



@media (display-mode: standalone) and (max-width: 768px) {
    .modal-overlay .modal,
    .modal-overlay .modal-content {
        
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 20px));
    }

    .modal-overlay .modal-footer {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 20px));
    }
}



@media (min-width: 769px) {
    
    .modal-overlay .modal,
    .modal-overlay .modal-content {
        animation: fadeIn 0.2s ease;
    }

    .modal-overlay.closing .modal,
    .modal-overlay.closing .modal-content {
        animation: fadeOut 0.2s ease forwards;
    }
}