/* 基础通知容器样式 */
#notification-message-container {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 1000;
    width: 90%; /* 减小宽度适配移动视图 */
    max-width: 400px; /* 保持在小屏幕下的适当宽度 */
}

/* 通知消息基础样式 */
.notification-message {
    background-color: #444;
    color: white;
    padding: 12px 15px; /* 缩小内边距 */
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 减小阴影强度 */
    opacity: 0.95;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: translateY(0);
}

/* 成功通知 */
.notification-message.success {
    background: linear-gradient(135deg, #66bb6a, #43a047);
    color: #fff;
}

/* 错误通知 */
.notification-message.error {
    background: linear-gradient(135deg, #e57373, #d32f2f);
    color: #fff;
}

/* 淡出效果 */
.notification-message.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

/* 关闭按钮（适配移动视图） */
.notification-wrapper .close-button {
    top: -20px;
    right: -15px;
    font-size: 25px;
    padding: 4px;
    color: white;
    background-color: transparent;
}

/* 确认对话框 */
.notification-message.confirm {
    background: linear-gradient(135deg, #ffeb3b, #fbc02d);
    color: #333;
    padding: 20px 10px 10px;
}

/* 按钮容器样式 */
.notification-message.confirm div {
    margin-top:10px;
}

/* 确认按钮 */
.notification-message.confirm .confirm-btn {
    background-color: #4CAF50;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.notification-message.confirm .confirm-btn:hover {
    background-color: #45a049;
}

/* 取消按钮 */
.notification-message.confirm .cancel-btn {
    background-color: #f44336;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.notification-message.confirm .cancel-btn:hover {
    background-color: #d32f2f;
}



/* 移动视图样式 */
@media (max-width: 768px) {
    #notification-message-container {
        width: 90%; /* 占据更大比例以适应小屏幕 */
        top: 10px;
        right: 5%;
    }

    .notification-message {
        padding: 10px 12px; /* 减少内边距，避免占据太多空间 */
        font-size: 14px; /* 调整字体大小 */
        margin-bottom: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 减少阴影强度 */
    }

    .notification-message.confirm {
        padding: 18px 10px 8px;
    }

    .notification-message.confirm button {
        padding: 4px 10px;
        font-size: 14px; /* 调整按钮字体大小 */
    }

    .notification-wrapper .close-button {
        font-size: 16px; /* 缩小关闭按钮 */
        padding: 3px;
        top: -10px;
        right: -10px;
    }
}