@font-face {
    font-family: 'Message IconFont';
    src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.icon-info:before {
    content: "\e62c";
}

.icon-error:before {
    content: "\e62b";
}

.icon-warning:before {
    content: "\e683";
}

.icon-success:before {
    content: "\e73c";
}

/* ========== Message 核心样式（仿Element Plus） ========== */
.msg-container {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999; /* 最高层级，避免被遮挡 */
    display: flex;
    flex-direction: column;
    gap: 12px; /* 弹窗之间的间距 */
}

.msg-item {
    padding: 12px 16px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666666;
    border-left: 4px solid #909399;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(-20px);
}

/* 弹窗显示动画 */
.msg-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* 弹窗隐藏动画 */
.msg-item.hide {
    opacity: 0;
    transform: translateY(-20px);
}

/* 不同类型样式（对应Element Plus） */
.msg-item.success {
    border-left-color: #67c23a;
    background: #f0f9eb;
    color: #67c23a;
}

.msg-item.warning {
    border-left-color: #e6a23c;
    background: #fdf6ec;
    color: #e6a23c;
}

.msg-item.error {
    border-left-color: #f56c6c;
    background: #fef0f0;
    color: #f56c6c;
}

.msg-item.info {
    border-left-color: #409eff;
    background: #f0f7ff;
    color: #409eff;
}

/* 提示图标（纯CSS实现，无需图标库） */
.msg-icon {
    position: relative;
    flex-shrink: 0;
    font-family: "Message IconFont" !important;
}

.msg-icon.success::before, .msg-icon.success::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 2px;
}

.msg-icon.success::before {
    width: 4px;
    height: 10px;
    top: 1px;
    left: 6px;
    transform: rotate(45deg);
}

.msg-icon.success::after {
    width: 8px;
    height: 4px;
    bottom: 3px;
    left: 2px;
    transform: rotate(45deg);
}

.msg-icon.warning::before {
    content: '!';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
}

.msg-icon.error::before {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
}

.msg-icon.info::before {
    content: 'i';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
}