/**
 * 现代化通知组件样式
 * 参考Element UI设计，支持四种类型和流畅动画
 */

/* 通知容器 */
.notification-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* 通知主体 */
.notification {
    min-width: 330px;
    max-width: 500px;
    background: #ffffff;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    padding: 16px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    pointer-events: auto;
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.notification:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* 显示状态 */
.notification.notification-show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* 隐藏状态 */
.notification.notification-hide {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
}

/* 弹性动画 */
.notification.notification-bounce {
    animation: notification-bounce-effect 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 缩放关闭动画 */
.notification.notification-scale-out {
    animation: notification-scale-out-effect 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 图标容器 */
.notification-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-top: 2px;
}

.notification-icon-symbol {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

/* 内容区域 */
.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
    line-height: 1.4;
}

.notification-message {
    color: #606266;
    line-height: 1.6;
    word-wrap: break-word;
}

/* 关闭按钮 */
.notification-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #909399;
    transition: color 0.2s ease;
    border-radius: 50%;
}

.notification-close:hover {
    color: #606266;
    background-color: #f5f7fa;
}

/* Success 类型 */
.notification-success {
    border-left: 4px solid #67c23a;
}

.notification-success .notification-icon {
    background: linear-gradient(135deg, #67c23a, #85ce61);
}

.notification-success .notification-title {
    color: #67c23a;
}

/* Warning 类型 */
.notification-warning {
    border-left: 4px solid #e6a23c;
}

.notification-warning .notification-icon {
    background: linear-gradient(135deg, #e6a23c, #ebb563);
}

.notification-warning .notification-title {
    color: #e6a23c;
}

/* Info 类型 */
.notification-info {
    border-left: 4px solid #409eff;
}

.notification-info .notification-icon {
    background: linear-gradient(135deg, #409eff, #66b1ff);
}

.notification-info .notification-title {
    color: #409eff;
}

/* Error 类型 */
.notification-error {
    border-left: 4px solid #f56c6c;
}

.notification-error .notification-icon {
    background: linear-gradient(135deg, #f56c6c, #f78989);
}

.notification-error .notification-title {
    color: #f56c6c;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .notification-container {
        top: 20px;
        transform: translateX(-50%);
        left: 50%;
    }
    
    .notification {
        min-width: 280px;
        max-width: calc(100vw - 40px);
        margin: 0 20px;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .notification {
        background: #2d2d30;
        border-color: #464649;
        color: #cccccc;
    }
    
    .notification-title {
        color: #ffffff;
    }
    
    .notification-message {
        color: #cccccc;
    }
    
    .notification-close {
        color: #969696;
    }
    
    .notification-close:hover {
        color: #cccccc;
        background-color: #3c3c3c;
    }
}

/* 动画关键帧 */
@keyframes notification-fade-in {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes notification-fade-out {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/* 缩放动画效果（可选） */
.notification-scale-enter {
    animation: notification-scale-in 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.notification-scale-leave {
    animation: notification-scale-out 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes notification-scale-in {
    0% {
        transform: scale(0.8) translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes notification-scale-out {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(0.8) translateY(-20px);
        opacity: 0;
    }
}

/* 弹性动画关键帧 */
@keyframes notification-bounce-effect {
    0% {
        transform: translateY(0) scale(0.8);
    }
    50% {
        transform: translateY(0) scale(1.05);
    }
    70% {
        transform: translateY(0) scale(0.98);
    }
    85% {
        transform: translateY(0) scale(1.02);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

/* 缩放关闭动画关键帧 */
@keyframes notification-scale-out-effect {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-10px) scale(0.3);
        opacity: 0;
    }
}

/* 目标元素高亮样式 */
.notification-target-highlight {
    position: relative;
    transition: all 0.3s ease;
    z-index: 999;
}

.notification-target-highlight::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 8px;
    z-index: -1;
    animation: notification-highlight-glow 1.5s infinite alternate;
}

.notification-target-highlight::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid;
    border-radius: 6px;
    z-index: -1;
    animation: notification-highlight-border 1s infinite;
}

/* Success 类型高亮 */
.notification-target-highlight-success {
    animation: notification-highlight-pulse-success 2s infinite;
}

.notification-target-highlight-success::before {
    background: linear-gradient(45deg, 
        rgba(103, 194, 58, 0.3), 
        rgba(133, 206, 97, 0.3), 
        rgba(103, 194, 58, 0.3));
}

.notification-target-highlight-success::after {
    border-color: #67c23a;
}

/* Warning 类型高亮 */
.notification-target-highlight-warning {
    animation: notification-highlight-pulse-warning 2s infinite;
}

.notification-target-highlight-warning::before {
    background: linear-gradient(45deg, 
        rgba(230, 162, 60, 0.3), 
        rgba(235, 181, 99, 0.3), 
        rgba(230, 162, 60, 0.3));
}

.notification-target-highlight-warning::after {
    border-color: #e6a23c;
}

/* Info 类型高亮 */
.notification-target-highlight-info {
    animation: notification-highlight-pulse-info 2s infinite;
}

.notification-target-highlight-info::before {
    background: linear-gradient(45deg, 
        rgba(64, 158, 255, 0.3), 
        rgba(102, 177, 255, 0.3), 
        rgba(64, 158, 255, 0.3));
}

.notification-target-highlight-info::after {
    border-color: #409eff;
}

/* Error 类型高亮 */
.notification-target-highlight-error {
    animation: notification-highlight-pulse-error 2s infinite;
}

.notification-target-highlight-error::before {
    background: linear-gradient(45deg, 
        rgba(245, 108, 108, 0.3), 
        rgba(247, 137, 137, 0.3), 
        rgba(245, 108, 108, 0.3));
}

.notification-target-highlight-error::after {
    border-color: #f56c6c;
}

/* 高亮脉动动画 - Success */
@keyframes notification-highlight-pulse-success {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(103, 194, 58, 0);
    }
}

/* 高亮脉动动画 - Warning */
@keyframes notification-highlight-pulse-warning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(230, 162, 60, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(230, 162, 60, 0);
    }
}

/* 高亮脉动动画 - Info */
@keyframes notification-highlight-pulse-info {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(64, 158, 255, 0);
    }
}

/* 高亮脉动动画 - Error */
@keyframes notification-highlight-pulse-error {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(245, 108, 108, 0);
    }
}

/* 高亮发光动画 */
@keyframes notification-highlight-glow {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    100% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

/* 高亮边框动画 */
@keyframes notification-highlight-border {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}