.dialog-message-box {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top:25px;
    padding: 12px 12px; /* 调整内边距 */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 120px;
    width: fit-content;
    max-width: 80vw;
    display: none;
    align-items: center;
    z-index: 99999;
    animation: fadeIn 0.3s ease-in-out;
}

/* 中间位置 */
.message-center {
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 不同状态的颜色 */
.dialog-success {
    background-color: #52c41a;
}

.dialog-warning {
    background-color: #faad14;
}

.dialog-error {
    background-color: #ff4d4f;
}

/* 消息内容 - 改为 flex 布局 */
.message-content {
    color: white;
    font-size: 14px;
    margin-right: 20px; /* 增加右边距 */
    word-break: break-word;
    flex-grow: 1; /* 占据剩余空间 */
}

/* 关闭按钮 - 靠右 */
.message-close {
    color: white;
    cursor: pointer;
    font-size: 16px;
    opacity:1;
    transition: opacity 0.2s;
    margin-left: auto; /* 自动推到最右侧 */
}

    .message-close:hover {
        opacity: 1;
    }

/* 动画效果 - 淡入 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

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

    to {
        opacity: 0;
    }
}

.dialog-fade-out {
    animation: fadeOut 1s ease forwards; /* 总时长 3s = 2.1s 显示 + 0.9s 淡出 */
}