/* =========================================
 * OmniAgent — 多智能体平台
 * ========================================= */
:root { --bg-dark:#312052; --bg-darker:#1a1030; --brand:#7e5adc; --brand-light:#a894df; --brand-dark:#6d28d9; --success:#4ade80; --danger:#f87171; --warning:#fbbf24; }
*{margin:0;padding:0;box-sizing:border-box}
body,html{background-color:var(--bg-dark);color:#e0e0e0;overflow-x:hidden;scroll-behavior:smooth}
::selection{background:var(--brand);color:white}

/* 背景 */
.ambient-mesh{position:fixed;inset:0;z-index:-5;pointer-events:none;background-image:radial-gradient(circle at 10% 20%,rgba(126,90,220,0.12) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(109,40,217,0.08) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(168,148,223,0.05) 0%,transparent 50%)}
.dot-matrix{position:fixed;inset:0;z-index:-4;pointer-events:none;background-image:radial-gradient(rgba(126,90,220,0.12) 1px,transparent 1px);background-size:24px 24px}

/* 主容器 */
.main-container{max-width:1200px;margin:0 auto;padding:50px 1.5rem 60px;min-height:100vh;display:flex;flex-direction:column}

/* Hero */
.hero{text-align:center;margin-bottom:1.5rem}
.hero-badge{display:inline-flex;align-items:center;gap:0.4rem;background:rgba(126,90,220,0.12);border:1px solid rgba(126,90,220,0.25);padding:0.35rem 1rem;border-radius:9999px;font-size:0.75rem;font-weight:600;color:var(--brand-light);font-family:'Space Mono',monospace;letter-spacing:0.05em;margin-bottom:0.75rem}
.hero-badge .material-symbols-outlined{font-size:16px}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:3.5rem;font-weight:900;background:linear-gradient(135deg,#fff 0%,var(--brand-light) 50%,var(--brand) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:0.75rem;letter-spacing:-0.03em}
.hero h1 span{background:linear-gradient(135deg,var(--brand-light),var(--brand));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-desc{color:rgba(255,255,255,0.45);font-size:0.9rem;font-weight:400;line-height:1.8;max-width:620px;margin:0 auto}
.hero-desc strong{color:rgba(255,255,255,0.65)}
.disclaimer{margin-top:1rem;display:inline-block;background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.2);border-radius:10px;padding:0.4rem 1.2rem;font-size:0.72rem;color:rgba(251,191,36,0.8);font-family:'Space Mono',monospace;letter-spacing:0.02em}

/* Tech Tags */
.tech-stack{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.tech-tag{background:rgba(255,255,255,0.06);backdrop-filter:blur(10px);border:1px solid rgba(126,90,220,0.15);border-radius:12px;padding:0.5rem 0.9rem;display:flex;align-items:center;gap:0.4rem;font-size:0.78rem;color:rgba(255,255,255,0.7);transition:all 0.3s;cursor:default}
.tech-tag:hover{background:rgba(126,90,220,0.15);border-color:rgba(126,90,220,0.3);transform:translateY(-2px)}
.tech-tag .material-symbols-outlined{font-size:16px;color:var(--brand-light)}

/* 聊天容器 */
.chat-container{position:relative;width:100%;flex:1;min-height:560px;height:calc(100vh - 300px);background:rgba(26,16,48,0.9);backdrop-filter:blur(20px);border:1px solid rgba(126,90,220,0.15);border-radius:1.5rem;overflow:hidden;display:flex;flex-direction:column}

/* 聊天头部 */
.chat-header{padding:0.85rem 1.25rem;border-bottom:1px solid rgba(126,90,220,0.1);display:flex;align-items:center;justify-content:space-between}
.chat-header-left{display:flex;align-items:center;gap:0.75rem}
.chat-avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 12px rgba(126,90,220,0.4);transition:all 0.3s}
.chat-info h3{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:#fff}
.chat-info p{font-size:0.68rem;color:rgba(255,255,255,0.4);font-family:'Space Mono',monospace}
.header-right{display:flex;align-items:center;gap:0.4rem}
.agent-selector-btn,.config-toggle-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(126,90,220,0.2);border-radius:10px;padding:0.45rem;cursor:pointer;color:var(--brand-light);transition:all 0.3s;display:flex;align-items:center}
.agent-selector-btn:hover,.config-toggle-btn:hover{background:rgba(126,90,220,0.2);border-color:var(--brand)}
.agent-selector-btn .material-symbols-outlined,.config-toggle-btn .material-symbols-outlined{font-size:20px}

/* Agent 侧边栏 */
.agent-sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(2px);z-index:150}
.agent-sidebar{position:absolute;top:0;left:0;bottom:0;width:260px;background:rgba(20,12,40,0.97);backdrop-filter:blur(30px);border-right:1px solid rgba(126,90,220,0.2);z-index:151;display:flex;flex-direction:column;border-radius:1.5rem 0 0 1.5rem;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.23,1,0.32,1);overflow:hidden}
.agent-sidebar.open{transform:translateX(0)}
.agent-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(126,90,220,0.15)}
.agent-sidebar-header h4{font-family:'Space Grotesk',sans-serif;font-size:0.95rem;color:#fff;font-weight:700}
.agent-sidebar-close{background:none;border:none;color:rgba(255,255,255,0.4);cursor:pointer;padding:0.25rem;border-radius:6px;transition:all 0.2s;display:flex}
.agent-sidebar-close:hover{color:#fff;background:rgba(255,255,255,0.08)}
.agent-sidebar-close .material-symbols-outlined{font-size:18px}
.agent-categories{flex:1;overflow-y:auto;padding:0.75rem}
.agent-categories::-webkit-scrollbar{width:4px}
.agent-categories::-webkit-scrollbar-thumb{background:rgba(126,90,220,0.3);border-radius:2px}
.agent-category-label{font-size:0.65rem;font-weight:700;color:rgba(255,255,255,0.3);font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:0.08em;padding:0.5rem 0.5rem 0.25rem}
.agent-option{display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.65rem;border-radius:10px;cursor:pointer;transition:all 0.2s;margin-bottom:2px}
.agent-option:hover{background:rgba(126,90,220,0.12)}
.agent-option.active{background:rgba(126,90,220,0.2);border:1px solid rgba(126,90,220,0.3)}
.agent-option-emoji{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:rgba(255,255,255,0.06);border:1px solid rgba(126,90,220,0.12)}
.agent-option.active .agent-option-emoji{background:rgba(126,90,220,0.2);border-color:rgba(126,90,220,0.3)}
.agent-option-info{flex:1;min-width:0}
.agent-option-name{font-weight:600;font-size:0.82rem;color:#fff}
.agent-option-brief{font-size:0.65rem;color:rgba(255,255,255,0.35);margin-top:1px}

/* 消息区域 */
.messages{flex:1;overflow-y:auto;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:0.75rem}
.messages::-webkit-scrollbar{width:6px}
.messages::-webkit-scrollbar-track{background:transparent}
.messages::-webkit-scrollbar-thumb{background:rgba(126,90,220,0.3);border-radius:3px}
.messages::-webkit-scrollbar-thumb:hover{background:rgba(126,90,220,0.5)}

/* 消息气泡 */
.message{display:flex;gap:1rem;max-width:90%;animation:messageIn 0.4s cubic-bezier(0.23,1,0.32,1);margin-bottom:1.5rem}
@keyframes messageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.message.user{align-self:flex-end;flex-direction:row-reverse}
.message.ai{align-self:flex-start;width:100%;max-width:100%}
.msg-avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.message.user .msg-avatar{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.message.ai .msg-avatar{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;box-shadow:0 4px 12px rgba(126,90,220,0.3)}
.msg-body{display:flex;flex-direction:column;gap:0.25rem;flex:1;min-width:0}
.bubble{padding:1rem 1.25rem;border-radius:16px;line-height:1.8;font-size:0.9rem;position:relative}
.message.user .bubble{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-bottom-right-radius:4px;box-shadow:0 4px 15px rgba(37,99,235,0.25);max-width:80%;margin-left:auto}
.message.ai .bubble{background:transparent;color:rgba(255,255,255,0.92);padding:0;border-radius:0}
.bubble code{background:rgba(126,90,220,0.15);padding:0.15em 0.4em;border-radius:4px;font-family:'Space Mono',monospace;font-size:0.85em;color:var(--brand-light)}
.bubble pre{background:rgba(0,0,0,0.4);border:1px solid rgba(126,90,220,0.2);border-radius:12px;margin:0.75rem 0;position:relative;overflow:hidden}
.bubble pre code{background:none;padding:0;color:#e0e0e0;display:block;overflow-x:auto;padding:1rem;font-size:0.82rem;line-height:1.6}
.bubble ul,.bubble ol{padding-left:1.5rem;margin:0.5rem 0}
.bubble li{margin:0.4rem 0;line-height:1.7}
.bubble strong{color:#fff;font-weight:600}
.bubble p{margin:0.5rem 0}
.bubble h1,.bubble h2,.bubble h3{margin:1rem 0 0.5rem;color:#fff}
.msg-meta{font-size:0.7rem;color:rgba(255,255,255,0.35);font-family:'Space Mono',monospace;padding:0.5rem 0 0;display:flex;align-items:center;gap:0.75rem}
.message.user .msg-meta{justify-content:flex-end}

/* 代码块复制按钮 */
.code-block-header{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 1rem;background:rgba(126,90,220,0.1);border-bottom:1px solid rgba(126,90,220,0.15);border-radius:12px 12px 0 0}
.code-block-lang{font-size:0.7rem;color:rgba(255,255,255,0.5);font-family:'Space Mono',monospace;text-transform:uppercase}
.code-copy-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(126,90,220,0.2);border-radius:6px;padding:0.25rem 0.5rem;color:rgba(255,255,255,0.6);font-size:0.7rem;cursor:pointer;display:flex;align-items:center;gap:0.3rem;transition:all 0.2s}
.code-copy-btn:hover{background:rgba(126,90,220,0.2);color:#fff}
.code-copy-btn.copied{background:rgba(74,222,128,0.2);color:#4ade80;border-color:rgba(74,222,128,0.3)}

/* 流式 */
.streaming-cursor{display:inline-block;width:2px;height:1.1em;background:var(--brand-light);margin-left:2px;vertical-align:text-bottom;animation:cursorBlink 0.8s step-end infinite}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.message.streaming .bubble{position:relative}
.message.streaming .bubble::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--brand-light),transparent);animation:shimmer 1.5s infinite;border-radius:0 0 16px 16px}
@keyframes shimmer{0%{opacity:0.3}50%{opacity:0.8}100%{opacity:0.3}}
/* 流式生成 glow 动画 */
.message.streaming .bubble{animation:subtleGlow 2s ease-in-out infinite}
@keyframes subtleGlow{0%,100%{box-shadow:0 0 0 rgba(126,90,220,0)}50%{box-shadow:0 0 12px rgba(126,90,220,0.15)}}
/* 流式文本层 */
.stream-text{white-space:pre-wrap;word-break:break-word;font-size:0.88rem;color:rgba(255,255,255,0.85)}
/* 生成状态 */
.meta-status.generating{color:var(--brand-light)}
.generating-dots{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.generating-dots i{width:4px;height:4px;background:var(--brand-light);border-radius:50%;animation:dotPulse 1.2s infinite}
.generating-dots i:nth-child(2){animation-delay:0.2s}
.generating-dots i:nth-child(3){animation-delay:0.4s}
@keyframes dotPulse{0%,80%,100%{opacity:0.3;transform:scale(0.8)}40%{opacity:1;transform:scale(1)}}

/* 消息操作 */
.msg-actions{display:flex;gap:0.5rem;margin-top:0.5rem;padding:0 0.25rem}
.action-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(126,90,220,0.15);border-radius:8px;padding:0.35rem 0.6rem;cursor:pointer;display:flex;align-items:center;gap:0.3rem;color:rgba(255,255,255,0.5);font-size:0.75rem;font-family:'Plus Jakarta Sans',sans-serif;transition:all 0.2s}
.action-btn:hover{background:rgba(126,90,220,0.2);color:var(--brand-light);border-color:var(--brand)}
.action-btn .material-symbols-outlined{font-size:16px}
/* 反馈按钮 */
.feedback-btn.active{background:rgba(126,90,220,0.25);color:var(--brand-light);border-color:var(--brand)}

/* =========================================
 * 输入区（Cursor/Claude 风格一体化）
 * ========================================= */
.input-area{padding:0.75rem 1.25rem;position:relative;flex-shrink:0;border-top:1px solid rgba(126,90,220,0.1);background:rgba(26,16,48,0.5)}

/* 主容器 */
.input-box{
    display:flex;align-items:flex-end;gap:0.5rem;
    background:rgba(255,255,255,0.05);border:1px solid rgba(126,90,220,0.2);
    border-radius:16px;padding:0.5rem;backdrop-filter:blur(12px);
    transition:border-color 0.25s,box-shadow 0.25s;position:relative;
}
.input-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(126,90,220,0.15)}

/* 左侧功能区 */
.input-left{display:flex;align-items:center;gap:0.4rem;flex-shrink:0}

/* 模型选择 */
.model-select{
    display:flex;align-items:center;gap:0.25rem;
    padding:0.35rem 0.6rem;
    background:rgba(126,90,220,0.15);border:1px solid rgba(126,90,220,0.3);
    border-radius:10px;font-size:0.72rem;font-family:'Space Mono',monospace;
    color:var(--brand-light);cursor:pointer;transition:all 0.2s;
    max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.model-select:hover{background:rgba(126,90,220,0.25);border-color:var(--brand)}
.model-select .material-symbols-outlined{font-size:14px;flex-shrink:0}
.model-select .dropdown-arrow{font-size:16px;transition:transform 0.3s}
.model-select.active .dropdown-arrow{transform:rotate(180deg)}

/* 模式切换 */
.mode-switch{display:flex;background:rgba(255,255,255,0.05);border-radius:8px;overflow:hidden;border:1px solid rgba(126,90,220,0.1)}
.mode-btn{
    padding:0.3rem 0.55rem;border:none;background:transparent;
    color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.68rem;
    font-family:'Space Mono',monospace;font-weight:600;
    transition:all 0.2s;letter-spacing:0.03em;
}
.mode-btn:hover{color:rgba(255,255,255,0.7)}
.mode-btn.active{background:var(--brand);color:#fff;border-radius:6px}

/* 输入框 */
.input-box textarea{
    flex:1;background:transparent;border:none;outline:none;
    color:#e0e0e0;font-size:0.9rem;font-family:'Plus Jakarta Sans',sans-serif;
    resize:none;min-height:36px;max-height:120px;line-height:1.5;padding:6px 4px;
}
.input-box textarea::placeholder{color:rgba(255,255,255,0.3)}

/* 右侧功能区 */
.input-right{display:flex;align-items:center;gap:0.3rem;flex-shrink:0}
.icon-btn{
    background:transparent;border:none;color:rgba(255,255,255,0.4);
    cursor:pointer;padding:0.35rem;border-radius:8px;transition:all 0.2s;
    display:flex;align-items:center;justify-content:center;
}
.icon-btn:hover{color:#fff;background:rgba(255,255,255,0.08)}
.icon-btn .material-symbols-outlined{font-size:20px}

/* 发送按钮 */
.send-btn{
    background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;
    border:none;border-radius:10px;padding:0 0.75rem;height:36px;min-height:36px;
    cursor:pointer;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;
    font-size:0.85rem;transition:all 0.3s;display:flex;align-items:center;
    justify-content:center;box-shadow:0 4px 12px rgba(126,90,220,0.25);flex-shrink:0;
}
.send-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(126,90,220,0.35)}
.send-btn .material-symbols-outlined{font-size:18px}
.send-btn.stop-btn{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 12px rgba(239,68,68,0.25)}

/* 模型下拉 */
.model-dropdown{
    position:absolute;bottom:100%;left:0.5rem;margin-bottom:0.5rem;
    background:rgba(26,16,48,0.97);backdrop-filter:blur(20px);
    border:1px solid rgba(126,90,220,0.25);border-radius:12px;padding:0.5rem;
    min-width:260px;box-shadow:0 10px 40px rgba(0,0,0,0.4);z-index:150;
    animation:dropdownIn 0.2s ease;
}
@keyframes dropdownIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.model-dropdown-header{padding:0.5rem 0.75rem;font-size:0.7rem;font-weight:600;color:rgba(255,255,255,0.4);font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:0.05em}
.model-option{display:flex;align-items:center;gap:0.5rem;padding:0.6rem 0.75rem;border-radius:8px;cursor:pointer;transition:all 0.2s;font-size:0.8rem}
.model-option:hover{background:rgba(126,90,220,0.15)}
.model-option.active{background:rgba(126,90,220,0.2);border:1px solid rgba(126,90,220,0.3)}
.model-option-icon{width:28px;height:28px;border-radius:8px;background:rgba(126,90,220,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.model-option-icon .material-symbols-outlined{font-size:16px;color:var(--brand-light)}
.model-option-info{flex:1;min-width:0}
.model-option-name{font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.model-option-provider{font-size:0.65rem;color:rgba(255,255,255,0.35);font-family:'Space Mono',monospace}
.model-option-check{color:var(--success);font-size:18px}
.model-dropdown-footer{border-top:1px solid rgba(126,90,220,0.15);margin-top:0.25rem;padding-top:0.25rem}
.model-add-btn{display:flex;align-items:center;gap:0.3rem;width:100%;padding:0.5rem 0.75rem;border:none;background:none;color:var(--brand-light);font-size:0.75rem;cursor:pointer;border-radius:6px;transition:background 0.2s}
.model-add-btn:hover{background:rgba(126,90,220,0.1)}
.model-add-btn .material-symbols-outlined{font-size:16px}

/* Slash 命令面板 */
.slash-panel{
    position:absolute;bottom:100%;left:1.25rem;margin-bottom:0.25rem;
    width:280px;background:rgba(26,16,48,0.97);backdrop-filter:blur(20px);
    border:1px solid rgba(126,90,220,0.25);border-radius:12px;padding:0.4rem;
    box-shadow:0 10px 40px rgba(0,0,0,0.4);z-index:160;display:none;
    animation:dropdownIn 0.15s ease;
}
.slash-item{
    display:flex;align-items:center;gap:0.6rem;padding:0.55rem 0.7rem;
    border-radius:8px;cursor:pointer;transition:all 0.15s;
}
.slash-item:hover{background:rgba(126,90,220,0.15)}
.slash-item .slash-cmd{font-family:'Space Mono',monospace;font-size:0.78rem;font-weight:700;color:var(--brand-light);min-width:80px}
.slash-item .slash-desc{font-size:0.75rem;color:rgba(255,255,255,0.5)}

/* 底部状态栏 */
.status-bar{margin-top:1.25rem;display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.status-item{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;color:rgba(255,255,255,0.4);font-family:'Space Mono',monospace}
.status-item .material-symbols-outlined{font-size:16px;color:var(--brand-light)}

/* 导航按钮 */
.scroll-nav{position:fixed;right:1.5rem;bottom:120px;z-index:90;display:flex;flex-direction:column;gap:0.5rem;opacity:0;visibility:hidden;transition:all 0.3s}
.scroll-nav.visible{opacity:1;visibility:visible}
.scroll-nav-btn{width:40px;height:40px;border-radius:12px;background:rgba(26,16,48,0.9);backdrop-filter:blur(10px);border:1px solid rgba(126,90,220,0.25);color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;box-shadow:0 4px 15px rgba(0,0,0,0.3)}
.scroll-nav-btn:hover{background:rgba(126,90,220,0.3);color:#fff;border-color:var(--brand);transform:translateY(-2px)}
.scroll-nav-btn .material-symbols-outlined{font-size:20px}

footer{text-align:center;padding:2rem 0;color:rgba(255,255,255,0.25);font-size:0.75rem;font-family:'Space Mono',monospace}
.gsap-reveal{opacity:0;visibility:hidden}

/* =========================================
 * 通用编辑模态框 (替代 prompt/confirm)
 * ========================================= */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);z-index:300;animation:fadeIn 0.2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:560px;max-height:85vh;background:rgba(22,14,42,0.97);backdrop-filter:blur(30px);border:1px solid rgba(126,90,220,0.25);border-radius:18px;z-index:301;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:panelIn 0.25s cubic-bezier(0.23,1,0.32,1)}
@keyframes panelIn{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;border-bottom:1px solid rgba(126,90,220,0.15)}
.modal-header h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;color:#fff}
.modal-close{background:none;border:none;color:rgba(255,255,255,0.4);cursor:pointer;padding:0.3rem;border-radius:6px;transition:all 0.2s;display:flex}
.modal-close:hover{color:#f87171;background:rgba(239,68,68,0.12)}
.modal-close .material-symbols-outlined{font-size:18px}
.modal-body{flex:1;overflow-y:auto;padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.modal-body::-webkit-scrollbar{width:4px}
.modal-body::-webkit-scrollbar-thumb{background:rgba(126,90,220,0.3);border-radius:2px}
.modal-field{display:flex;flex-direction:column;gap:0.35rem}
.modal-field label{font-size:0.78rem;font-weight:600;color:rgba(255,255,255,0.6);font-family:'Space Mono',monospace}
.modal-field input,.modal-field textarea,.modal-field select{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(126,90,220,0.18);border-radius:10px;padding:0.6rem 0.85rem;color:#e0e0e0;font-size:0.85rem;font-family:'Plus Jakarta Sans',sans-serif;outline:none;transition:all 0.2s}
.modal-field input:focus,.modal-field textarea:focus,.modal-field select:focus{border-color:var(--brand);background:rgba(255,255,255,0.09);box-shadow:0 0 0 2px rgba(126,90,220,0.1)}
.modal-field input::placeholder,.modal-field textarea::placeholder{color:rgba(255,255,255,0.25)}
.modal-field textarea{min-height:100px;resize:vertical;font-family:'Space Mono',monospace;font-size:0.8rem;line-height:1.6}
.modal-field select{cursor:pointer}
.modal-field select option{background:#1a1030;color:#e0e0e0}
.modal-field .field-hint{font-size:0.68rem;color:rgba(255,255,255,0.3);margin-top:-0.1rem}
.modal-footer{display:flex;gap:0.5rem;padding:1rem 1.5rem;border-top:1px solid rgba(126,90,220,0.15);justify-content:flex-end}
.modal-cancel{background:rgba(255,255,255,0.06);border:1px solid rgba(126,90,220,0.15);border-radius:10px;padding:0.55rem 1.25rem;color:rgba(255,255,255,0.6);font-size:0.82rem;font-weight:500;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all 0.2s}
.modal-cancel:hover{background:rgba(255,255,255,0.1);color:#fff}
.modal-save{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border:none;border-radius:10px;padding:0.55rem 1.5rem;font-size:0.82rem;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all 0.2s;box-shadow:0 4px 12px rgba(126,90,220,0.25)}
.modal-save:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(126,90,220,0.35)}

/* =========================================
 * 配置面板
 * ========================================= */
.config-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);z-index:200;animation:fadeIn 0.2s}
.config-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:700px;max-height:80vh;background:rgba(26,16,48,0.95);backdrop-filter:blur(30px);border:1px solid rgba(126,90,220,0.25);border-radius:20px;z-index:201;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:panelIn 0.3s cubic-bezier(0.23,1,0.32,1);overflow:hidden}
.config-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid rgba(126,90,220,0.15);flex-shrink:0}
.config-panel-header h3{display:flex;align-items:center;gap:0.5rem;font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:700;color:#fff}
.config-panel-header h3 .material-symbols-outlined{font-size:22px;color:var(--brand-light)}
.config-close-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(126,90,220,0.15);border-radius:8px;padding:0.4rem;cursor:pointer;color:rgba(255,255,255,0.5);transition:all 0.2s;display:flex}
.config-close-btn:hover{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.3);color:#f87171}
.config-close-btn .material-symbols-outlined{font-size:18px}
.config-tabs{display:flex;gap:0;padding:0 0.75rem;border-bottom:1px solid rgba(126,90,220,0.1);overflow-x:auto;flex-shrink:0}
.config-tab{display:flex;align-items:center;gap:0.4rem;padding:0.75rem 1rem;border:none;background:none;color:rgba(255,255,255,0.4);font-size:0.8rem;font-weight:500;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s;white-space:nowrap}
.config-tab:hover{color:rgba(255,255,255,0.7)}
.config-tab.active{color:var(--brand-light);border-bottom-color:var(--brand)}
.config-tab .material-symbols-outlined{font-size:18px}
.config-content{flex:1;overflow-y:auto;padding:1rem 1.25rem;min-height:0}
.config-content::-webkit-scrollbar{width:4px}
.config-content::-webkit-scrollbar-thumb{background:rgba(126,90,220,0.3);border-radius:2px}
.config-section{margin-bottom:1.5rem}
.config-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}
.config-section-header h4{font-family:'Space Grotesk',sans-serif;font-size:0.95rem;font-weight:600;color:#fff}
.config-hint{font-size:0.75rem;color:rgba(255,255,255,0.35);margin-bottom:1rem;line-height:1.5}
.add-btn{display:flex;align-items:center;gap:0.3rem;background:rgba(126,90,220,0.15);border:1px solid rgba(126,90,220,0.25);border-radius:8px;padding:0.35rem 0.75rem;color:var(--brand-light);font-size:0.75rem;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:'Plus Jakarta Sans',sans-serif}
.add-btn:hover{background:rgba(126,90,220,0.25);border-color:var(--brand)}
.add-btn .material-symbols-outlined{font-size:16px}

/* 配置项卡片 */
.config-item{background:rgba(255,255,255,0.04);border:1px solid rgba(126,90,220,0.12);border-radius:12px;padding:1rem;margin-bottom:0.75rem;transition:all 0.2s}
.config-item:hover{border-color:rgba(126,90,220,0.25)}
.config-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem}
.config-item-title{display:flex;align-items:center;gap:0.5rem;font-weight:600;font-size:0.85rem;color:#fff}
.config-item-title .material-symbols-outlined{font-size:18px;color:var(--brand-light)}
.config-item-actions{display:flex;gap:0.3rem}
.config-item-actions button{background:none;border:none;padding:0.3rem;cursor:pointer;color:rgba(255,255,255,0.3);border-radius:6px;transition:all 0.2s;display:flex}
.config-item-actions button:hover{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7)}
.config-item-actions button.delete-btn:hover{background:rgba(239,68,68,0.15);color:#f87171}
.config-item-actions .material-symbols-outlined{font-size:16px}
.config-item-meta{font-size:0.72rem;color:rgba(255,255,255,0.35);line-height:1.5}
.config-item-meta .tag{display:inline-block;font-size:0.62rem;padding:0.1rem 0.45rem;border-radius:4px;background:rgba(126,90,220,0.1);color:var(--brand-light);font-family:'Space Mono',monospace;margin-right:0.3rem;margin-top:0.2rem}

.save-btn{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border:none;border-radius:8px;padding:0.5rem 1rem;font-size:0.8rem;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all 0.2s;white-space:nowrap}
.save-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(126,90,220,0.3)}
.config-row{display:flex;gap:0.5rem;margin-bottom:0.5rem;align-items:center}
.config-input{flex:1;background:rgba(255,255,255,0.05);border:1px solid rgba(126,90,220,0.15);border-radius:8px;padding:0.5rem 0.75rem;color:#e0e0e0;font-size:0.8rem;font-family:'Plus Jakarta Sans',sans-serif;outline:none;transition:all 0.2s}
.config-input:focus{border-color:var(--brand);background:rgba(255,255,255,0.08);box-shadow:0 0 0 2px rgba(126,90,220,0.1)}
.config-panel-footer{display:flex;gap:0.5rem;padding:0.75rem 1.5rem;border-top:1px solid rgba(126,90,220,0.15);justify-content:flex-end;flex-shrink:0}
.export-btn,.import-btn{display:flex;align-items:center;gap:0.3rem;background:rgba(255,255,255,0.06);border:1px solid rgba(126,90,220,0.15);border-radius:8px;padding:0.5rem 1rem;color:rgba(255,255,255,0.6);font-size:0.75rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all 0.2s}
.export-btn:hover,.import-btn:hover{background:rgba(126,90,220,0.15);color:#fff}
.export-btn .material-symbols-outlined,.import-btn .material-symbols-outlined{font-size:16px}
.config-empty{text-align:center;padding:2rem;color:rgba(255,255,255,0.25);font-size:0.85rem}
.config-empty .material-symbols-outlined{font-size:48px;display:block;margin-bottom:0.75rem;color:rgba(126,90,220,0.2)}

/* Agent 卡片 */
.config-builtin-tag{font-size:0.55rem;padding:0.1rem 0.4rem;border-radius:4px;background:rgba(96,165,250,0.12);color:var(--info,#60a5fa);font-family:'Space Mono',monospace;margin-left:0.3rem;vertical-align:middle}

.agent-config-card{display:flex;align-items:center;gap:0.75rem}
.agent-config-emoji{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border-radius:10px;flex-shrink:0}
.agent-config-info{flex:1}
.agent-config-name{font-weight:600;font-size:0.85rem;color:#fff}
.agent-config-desc{font-size:0.7rem;color:rgba(255,255,255,0.35);margin-top:2px}
.agent-config-tags{display:flex;gap:0.3rem;margin-top:0.4rem;flex-wrap:wrap}
.agent-config-tag{font-size:0.6rem;padding:0.15rem 0.5rem;border-radius:4px;background:rgba(126,90,220,0.1);color:var(--brand-light);font-family:'Space Mono',monospace}

/* 响应式 */
@media(max-width:768px){
    .hero h1{font-size:2.2rem}
    .hero-desc{font-size:0.82rem}
    .main-container{padding:30px 1rem 40px}
    .message{max-width:92%}
    .chat-header{padding:0.75rem 1rem}
    .input-area{padding:0.5rem 0.75rem}
    .input-box{padding:0.4rem;gap:0.3rem}
    .mode-switch{display:none}
    .model-select{max-width:90px;font-size:0.65rem}
    .status-bar{gap:1rem}
    .config-panel,.modal-panel{width:95%;max-height:88vh}
    .config-tabs{padding:0 0.5rem}
    .config-tab{padding:0.6rem 0.75rem;font-size:0.75rem}
    .agent-sidebar{width:230px}
    /* 移动端关闭毛玻璃，降低 GPU 压力 */
    .chat-container{backdrop-filter:none;background:rgba(26,16,48,0.97)}
    .tech-tag{backdrop-filter:none}
    .scroll-nav{right:1rem;bottom:100px}
    .scroll-nav-btn{width:36px;height:36px}
}

/* Markdown 增强 */
.bubble h1,.bubble h2,.bubble h3{color:#fff;margin:0.8em 0 0.4em;font-family:'Space Grotesk',sans-serif}
.bubble h1{font-size:1.4em}.bubble h2{font-size:1.2em}.bubble h3{font-size:1.05em}
.bubble table{width:100%;border-collapse:collapse;margin:0.5rem 0;font-size:0.85em}
.bubble th,.bubble td{border:1px solid rgba(126,90,220,0.2);padding:0.4rem 0.6rem;text-align:left}
.bubble th{background:rgba(126,90,220,0.15);font-weight:600;color:#fff}
.bubble td{background:rgba(0,0,0,0.15)}
.bubble blockquote{border-left:3px solid var(--brand);padding:0.5rem 1rem;margin:0.5rem 0;background:rgba(126,90,220,0.08);border-radius:0 8px 8px 0;color:rgba(255,255,255,0.8)}
.bubble hr{border:none;border-top:1px solid rgba(126,90,220,0.2);margin:1rem 0}
.bubble .mermaid{background:rgba(255,255,255,0.95);border-radius:8px;padding:1rem;margin:0.5rem 0;text-align:center;overflow-x:auto}
.bubble .mermaid svg{max-width:100%;height:auto}