#input-control,
#input-container {
    display: flex;
    flex-direction: column;
    width: 300px;
    align-content: center;
    align-items: center;
}

.dynamic-input {
    padding: 8px;
    font-size: 16px;
    border-radius: 4px;
    margin-top: 10px;
}

.dynamic-input:focus {
    outline: none;
}

/* Smooth transition for reordering */
.dynamic-input {
    transition: margin 0.3s ease, transform 0.3s ease;
}

/* Slide-in animation */
@keyframes slideInFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
        z-index: -1;
    }
    to {
        transform: translateY(0);
        opacity: 1;
        z-index: inherit;
    }
}

/* Slide-out animation */
@keyframes slideOutToTop {
    from {
        transform: translateY(0);
        opacity: 1;
        z-index: inherit;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
        z-index: -1;
    }
}

.slide-in {
    animation: slideInFromTop 0.5s ease-out forwards;
}

.slide-out {
    animation: slideOutToTop 0.3s ease-in forwards;
    pointer-events: none; /* Prevent interaction during animation */
}

.error {
    border-color: #f87171;
    border-style: dashed;
}