/* ========== Element 风格消息框样式 ========== */
/* 消息容器：固定在页面顶部中央 */
.message-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    /* 容器不阻挡点击，让内容可以点击 */
}

/* 单个消息框样式 */
.element-message {
    display: flex;
    align-items: center;
    padding: 14px 25px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    font-size: 34px;
    color: #303133;
    min-width: 300px;
    max-width: 80%;
    height: 60px;
    pointer-events: auto;
    /* 消息框自身可以点击 */
    animation: message-fade-in 0.3s ease;
    transition: all 0.3s ease;
    /* 统一基础边框 */
    border: 2px solid #ebeef5;
    line-height: 1.2;
}

/* 信息图标 */
.element-message .message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    line-height: 1;
}

/* 消息内容 */
.element-message .message-content {
    flex: 1;
    word-break: break-word;
}

/* 信息类型图标颜色 */
/* 主要 primary（新增 Element-Plus 主色） */
.element-message.primary {
    background-color: #ecf5ff;
    color: #409eff;
    border-color: #409eff;
}

.element-message.primary .message-icon {
    background-color: #409eff;
    color: #fff;
}

/* 成功 success */
.element-message.success {
    background-color: #f0f9eb;
    color: #67c23a;
    border-color: #67c23a;
}

.element-message.success .message-icon {
    background-color: #67c23a;
    color: #fff;
}

/* 警告 warning */
.element-message.warning {
    background-color: #fdf6ec;
    color: #e6a23c;
    border-color: #e6a23c;
}

.element-message.warning .message-icon {
    background-color: #e6a23c;
    color: #fff;
}

/* 信息 info */
.element-message.info {
    background-color: #f4f4f5;
    color: #909399;
    border-color: #909399;
}

.element-message.info .message-icon {
    background-color: #909399;
    color: #fff;
}

/* 错误 error */
.element-message.error {
    background-color: #fef0f0;
    color: #f56c6c;
    border-color: #f56c6c;
}

.element-message.error .message-icon {
    background-color: #f56c6c;
    color: #fff;
}


/* 关闭按钮 */
.element-message .message-close {
    cursor: pointer;
    color: #C0C4CC;
    font-size: 34px;
    margin-left: 14px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.element-message .message-close:hover {
    color: #909399;
}

/* 渐入动画 */
@keyframes message-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* 淡出动画 */
@keyframes message-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.element-message.fade-out {
    animation: message-fade-out 0.3s ease forwards;
}