/* 消息容器 - 固定在右上角 */
#message-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

/* 消息项基础样式 */
.message-item {
    pointer-events: all;
    min-width: 280px;
    max-width: 400px;
    padding: 15px 20px;
    border-radius: 8px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    transform: translateX(100%);
    opacity: 0;
    animation: slideIn 0.3s ease forwards;
    position: relative;
    transition: all 0.3s ease;
}

/* 不同类型消息的颜色 */
.message-success {
    background-color: #f6ffed;
    border: 1px solid #b7eb8f;
}

.message-error {
    background-color: #fff2f0;
    border: 1px solid #ffccc7;
}

.message-warning {
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
}

.message-info {
    background-color: #e6f4ff;
    border: 1px solid #91caff;
}

/* 消息内容区 */
.message-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 图标样式 */
.message-icon {
    font-size: 18px;
    font-weight: bold;
}

/* 关闭按钮 */
.message-close {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

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

/* 滑入动画 */
@keyframes slideIn {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 滑出动画 */
@keyframes slideOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.message-item.hide {
    animation: slideOut 0.3s ease forwards;
}