/* 消息提示框基础样式 */
.msg-notification {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    padding: 12px 20px;
    border-radius: 8px;
    color: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    max-width: 80%;
    word-break: break-all;
}

/* 显示状态（滑入效果） */
.msg-notification.show {
    transform: translateX(-50%) translateY(20px); /* 距离视口顶部20px */
    opacity: 1;
}

/* 图标样式 */
.msg-notification .msg-icon {
    font-size: 18px;
}

/* 不同类型颜色 */
.msg-notification.info {
    background: var(--bg-info);
    border:1px solid var(--info);
    color:var(--info);
}
.msg-notification.success {
    background: var(--bg-success);
    border:1px solid var(--success);
    color:var(--success);
}
.msg-notification.warn {
    background: var(--bg-warn);
    border:1px solid var(--warn);
    color:var(--warn);
}
.msg-notification.error {
    background: var(--bg-error);
    border:1px solid var(--error);
    color:var(--error);
}

/* 确认框样式 */
.msg-confirm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    background: var(--bg);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    overflow: hidden;
}

.msg-confirm-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background-color:var(--bg-title);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-title);
}

.msg-confirm-body {
    padding: 20px;
    display: flex;
    align-items: center;
}

.msg-confirm-content {
    padding: 10px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
    flex:1;
}

.msg-confirm-icon {
    padding: 0px;
}

.msg-confirm-icon.error {
    color:var(--error);
}

.msg-confirm-icon.warn {
    color:var(--warn);
}

.msg-confirm-icon.confirm {
    color:var(--warn);
}

.msg-confirm-icon.success {
    color:var(--success);
}

.msg-confirm-icon.info {
    color:var(--info);
}

.msg-confirm-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.msg-confirm-btn {
    padding: 6px 16px;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.msg-confirm-btn.cancel {
    background: var(--bg-100);
    color: var(--bg-100-text);
}

.msg-confirm-btn.cancel:hover {
    background: var(--bg-50);
}

.msg-confirm-btn.confirm {
    background: var(--primary);
    color:var(--primary-text);
}

.msg-confirm-btn.confirm:hover {
    background: var(--primary-400);
}

/* 遮罩层 */
.msg-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999;
}