/* 1. 背景与纹理 */
/* 动态极光背景 - 移除了body选择器，改为通用类 */
.ambient-light {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2;
    /* 四角静态渐变作为基础背景 */
    background: 
        radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
    filter: blur(40px);
}

/* 噪点纹理 - 增加实体质感 */
.noise-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* 2. 玻璃拟态容器 - 完全复制CRM的边框样式 */
.glass-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 聊天区域专用玻璃效果 - 完全复制CRM的边框样式 */
.glass-chat {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* 移除顶部光泽效果，保持完全透明统一 */

/* 暗黑模式下的玻璃 */
@media (prefers-color-scheme: dark) {
    .glass-panel {
        background: rgba(30, 41, 59, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
    
    .glass-chat {
        background: rgba(30, 41, 59, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
}

/* 3. 自定义滚动条 */
.smooth-scroll::-webkit-scrollbar {
    width: 4px;
}
.smooth-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.smooth-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2); /* 更浅的颜色，更协调 */
    border-radius: 10px;
}
.smooth-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3); /* hover时稍微深一点 */
}

    /* 4. 交互动画 */
    .hover-card {
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .hover-card:hover {
        transform: translateY(-2px) scale(1.01);
        background: rgba(255, 255, 255, 0.3); /* 增加hover时的白底透明度 */
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    }
    .active-card {
        background: rgba(255, 255, 255, 0.9) !important; /* 激活态更白 */
        box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.15); /* 黑色阴影 */
        border: 1px solid rgba(255, 255, 255, 0.8);
        position: relative;
        z-index: 10;
    }
    /* 激活光条 - 改为黑色 */
    .active-card::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 12px;
        bottom: 12px;
        width: 3px;
        background: #111827; /* slate-900 纯黑风格 */
        border-radius: 4px;
    }

    /* 5. 头像光环 - 改为黑白 */
    .avatar-glow::after {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 24%;
        background: linear-gradient(45deg, #333, #666); /* 黑灰渐变 */
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .group:hover .avatar-glow::after {
        opacity: 0.3; /* 降低不透明度 */
    }

    /* 高亮文字 - 改为黑底白字风格 */
    .highlight-neon {
        color: #111827;
        background: rgba(0, 0, 0, 0.05);
        padding: 0 2px;
        border-radius: 4px;
        font-weight: 700;
    }

/* 动画关键帧 */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes enter {
    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-blob {
    animation: blob 10s infinite;
}
.animate-enter {
    animation: enter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 阴影扩展 */
.shadow-neon {
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4), 0 0 20px rgba(99, 102, 241, 0.2);
}