/* 提示框容器 */
#messageContainer {
    z-index: 20241224;
    position: fixed;

    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    max-width: 100%;
    display: flex;
    flex-direction: column-reverse;
    /* 新的提示框显示在最上面 */
    gap: 10px;
    /* 提示框之间的间距 */
}

/* 提示框样式 */
#messageContainer .message {
    display: none;
    /* 默认隐藏 */
    background-color: #26a17b;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    opacity: 0;
    animation: fadeInOut 3s forwards;
    /* 渐入渐出动画 */
}

#messageContainer .message.error {
    background: #f65a5a;
    color: #ffffff;
}

#messageContainer .message.danger {
    background: #f65a5a;
    color: #ffffff;
}

#messageContainer .message.success {
    background: #26a17b;
    color: #ffffff;
}

#messageContainer .message.warning {
    background: #c40e0d;
    color: #ffffff;
}

/* 动画定义 */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.5);
    }

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

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

    100% {
        opacity: 0;
        transform: translateY(20px) scale(0.5);
    }
}