/* 替换原有的 body 样式，加入动态渐变 */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    /* 👇 彻底干掉移动端点击时讨厌的蓝色闪烁方块 */
    -webkit-tap-highlight-color: transparent; 
}
/* 👇 禁止头像、按钮等 UI 元素被长按拖拽或涂蓝选中，保持 App 般的沉浸感 */
img, button, .speech-bubble, .click-hint {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
/* 允许输入框可以正常长按复制粘贴 */
input, textarea {
    user-select: auto;
    -webkit-user-select: auto;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* 升级：动态流光渐变背景 */
    background: linear-gradient(-45deg, #fdfbfb, #ebedee, #e0c3fc, #8ec5fc);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    perspective: 1200px;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 保持原有布局代码不变... */
.wave-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; transform: translateZ(0); }
.container { text-align: center; max-width: 600px; width: 90%; display: flex; flex-direction: column; align-items: center; z-index: 10; }
.avatar-section { position: relative; margin-bottom: 50px; margin-top: 60px; z-index: 50; }
.avatar-wrapper { position: relative; animation: breathe 4s ease-in-out infinite; transform-style: preserve-3d; cursor: pointer; will-change: transform; }
.click-hint { position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); font-size: 13px; color: #a0aabf; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; white-space: nowrap; }
.avatar-wrapper:hover .click-hint { opacity: 1; }
.avatar-wrapper:active #avatar { transform: scale(0.93); }

/* 升级头像光影边缘 */
#avatar {
    width: 220px; height: 220px; border-radius: 50%; object-fit: cover;
    border: 6px solid rgba(255, 255, 255, 1);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2), inset 0 0 0 1px rgba(0,0,0,0.05);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}
.avatar-wrapper:hover #avatar {
    box-shadow: 0 25px 50px rgba(102, 126, 234, 0.35), inset 0 0 0 1px rgba(0,0,0,0.05);
}

@keyframes breathe { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-6px) translateZ(0); } }

/* 升级气泡动画，加入出现后的持续悬浮感 */
.speech-bubble {
    position: absolute; bottom: calc(100% + 20px); left: 70%;
    transform: translateX(-50%) scale(0.4) translateY(40px) translateZ(0);
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px);
    color: #2c3e50; padding: 16px 24px; border-radius: 24px; border-bottom-left-radius: 4px;
    font-size: 16px; line-height: 1.6; letter-spacing: 0.5px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    max-width: 320px; width: max-content;
    opacity: 0; pointer-events: none;
    will-change: transform, opacity;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
    z-index: 10;
}
.speech-bubble.active { 
    opacity: 1; 
    transform: translateX(-50%) scale(1) translateY(0) translateZ(0); 
    animation: floatBubble 4s ease-in-out infinite 0.6s; /* 新增悬浮 */
}
@keyframes floatBubble {
    0%, 100% { transform: translateX(-50%) scale(1) translateY(0) translateZ(0); }
    50% { transform: translateX(-50%) scale(1) translateY(-6px) translateZ(0); }
}

.bubble-tail { position: absolute; bottom: -13px; left: 20px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid rgba(255, 255, 255, 0.95); }
.typing-cursor::after { content: ''; display: inline-block; width: 6px; height: 18px; background-color: #667eea; vertical-align: middle; margin-left: 4px; animation: blink 1s step-end infinite; border-radius: 2px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* 增强输入框交互反馈 */
.input-area {
    display: flex; gap: 10px; background: rgba(255, 255, 255, 0.7);
    padding: 8px 10px; border-radius: 50px; backdrop-filter: blur(25px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255,255,255,1);
    width: 100%; max-width: 500px; border: 1px solid rgba(255, 255, 255, 0.9);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform, box-shadow;
}
.input-area:focus-within {
    background: rgba(255, 255, 255, 0.95); transform: translateY(-4px) translateZ(0);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2), 0 0 0 3px rgba(102, 126, 234, 0.1); 
    border-color: rgba(102, 126, 234, 0.5);
}
#commandInput { flex: 1; padding: 12px 18px; border: none; background: transparent; font-size: 16px; color: #333; outline: none; }
.send-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 0 22px; border-radius: 40px; cursor: pointer; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; }
.send-btn:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); }
.send-btn:active { transform: scale(0.92); }

/* 以下为原有的学习面板样式，保持不变... */
.status-wrap { display: flex; align-items: center; gap: 6px; color: #667eea; font-weight: bold; }
.dot { width: 6px; height: 6px; background: #667eea; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; } 40% { transform: scale(1.2); opacity: 1; } }
.learning-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(15px); z-index: 999; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.3s ease; }
.learning-panel.hidden { opacity: 0; pointer-events: none; }
.panel-content { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); width: 90%; max-width: 450px; border-radius: 24px; padding: 30px; box-shadow: 0 25px 50px rgba(0,0,0,0.2); position: relative; transform: scale(1) translateY(0) translateZ(0); transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1.15), opacity 0.5s ease; display: flex; flex-direction: column; gap: 15px; will-change: transform, opacity; }
.learning-panel.hidden .panel-content { transform: scale(0.85) translateY(40px) translateZ(0); opacity: 0; }
.close-btn { position: absolute; top: 20px; right: 20px; background: #f0f2f5; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; color: #666; transition: all 0.25s ease; }
.close-btn:hover { background: #ff758c; color: white; transform: rotate(90deg) scale(1.1); }
.panel-content h2 { font-size: 20px; color: #333; margin-bottom: -5px; }
.subtitle { font-size: 13px; color: #888; }
.knowledge-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 5px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.knowledge-list::-webkit-scrollbar { width: 4px; }
.knowledge-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.knowledge-item { background: #fdfdfd; padding: 12px 15px; border-radius: 12px; font-size: 13px; color: #444; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid #f0f0f0; transition: transform 0.2s; }
.knowledge-item:hover { transform: translateY(-2px); }
.delete-btn { background: #ffe3e8; color: #ff758c; border: none; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-weight: bold; transition: 0.2s; }
.delete-btn:hover { background: #ff758c; color: white; transform: scale(1.05); }
.add-knowledge textarea { width: 100%; height: 80px; padding: 15px; border-radius: 16px; border: 2px solid transparent; background: #f0f2f5; font-size: 14px; outline: none; resize: none; font-family: inherit; transition: 0.3s; }
.add-knowledge textarea:focus { background: white; border-color: #e0c3fc; box-shadow: 0 5px 15px rgba(224,195,252,0.3); }
.btn-group { display: flex; gap: 10px; margin-top: 10px; }
.btn-group button { flex: 1; padding: 12px; border: none; border-radius: 16px; color: white; font-weight: bold; font-size: 14px; cursor: pointer; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; }
.learn-btn { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.search-btn { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: #333 !important;}
.btn-group button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-group button:active { transform: scale(0.94); }
/* ========================================= */
/* 🔍 聚合搜索结果卡片 UI (动态生成) */
/* ========================================= */
.search-results {
    display: flex; flex-direction: column; gap: 10px; margin-top: 15px;
    max-height: 220px; overflow-y: auto; padding-right: 5px;
}
.search-results::-webkit-scrollbar { width: 4px; }
.search-results::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.result-card {
    background: white; border: 2px solid #f0f2f5; border-radius: 12px;
    padding: 12px 15px; cursor: pointer; text-align: left; font-size: 13px; color: #444;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: fadeIn 0.4s ease;
}
.result-card:hover {
    border-color: #a18cd1; transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(161, 140, 209, 0.25);
}
.result-title { font-weight: bold; margin-bottom: 6px; font-size: 14px; }
.loading-text { text-align: center; font-size: 13px; color: #888; padding: 10px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* ========================================= */
/* 📱 移动端完美适配与性能优化 (Mobile Responsive) */
/* ========================================= */
@media screen and (max-width: 768px) {
    /* 缩小整体间距 */
    .avatar-section { margin-top: 30px; margin-bottom: 35px; }
    
    /* 头像按比例缩小，避免占据太多垂直空间 */
    #avatar { width: 160px; height: 160px; border-width: 4px; }
    
    /* 修复气泡在手机端溢出屏幕的问题 */
    .speech-bubble {
        left: 50%; /* 居中对齐 */
        bottom: calc(100% + 15px);
        max-width: 85vw; /* 限制最大宽度 */
        padding: 12px 18px;
        font-size: 15px;
    }
    /* 将气泡的小尾巴移到中间 */
    .bubble-tail { left: 50%; transform: translateX(-50%); border-width: 10px; bottom: -9px; }
    
    /* ⚡ 性能优化核心：降低手机端的毛玻璃模糊半径，极大减轻 GPU 渲染卡顿 */
    .speech-bubble, .input-area, .panel-content, .learning-panel {
        backdrop-filter: blur(10px); 
    }

    /* 优化输入框区域，防止拥挤 */
    .input-area { padding: 6px 8px; border-radius: 30px; }
    #commandInput { font-size: 15px; padding: 10px 12px; }
    .send-btn { padding: 0 16px; font-size: 14px; }
    
    /* 优化学习面板在手机端的显示 */
    .learning-panel .panel-content { padding: 20px; width: 92%; }
    .add-knowledge textarea { height: 60px; padding: 10px; }
    .btn-group button { padding: 10px; font-size: 13px; }
    .search-results { max-height: 180px; }
}