/* ===== 迈之高智能AGENT 增强样式 ===== */
:root{
    --ai-primary:#0d6efd;
    --ai-bg:#f4f6fa;
    --ai-panel:#ffffff;
    --ai-border:#e2e6ee;
    --ai-sidebar:#f8f9fc;
    --ai-text:#1f2430;
    --ai-muted:#7a8194;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
    font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
    background:var(--ai-bg);
    color:var(--ai-text);
    overflow:hidden;
}

/* 顶部 */
.app-header{
    height:52px;
    background:linear-gradient(90deg,#0d2b5e,#123a7a 60%,#1a4f9e);
    color:#fff;
    gap:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.app-logo{font-size:26px;line-height:1;}
.app-title{font-size:17px;font-weight:700;letter-spacing:.5px;}
.app-subtitle{font-size:12px;opacity:.85;}
#init-badge{background:rgba(255,255,255,.18);font-size:12px;padding:6px 10px;}
#init-badge.done{background:rgba(40,167,69,.75);}
#init-badge.err{background:rgba(220,53,69,.8);}

/* Tabs */
.app-tabs{background:var(--ai-bg);border-bottom:1px solid var(--ai-border);}
.app-tabs .nav-link{
    color:var(--ai-muted);border:none;border-bottom:3px solid transparent;
    font-weight:500;padding:9px 18px;border-radius:0;
}
.app-tabs .nav-link.active{color:var(--ai-primary);border-bottom-color:var(--ai-primary);background:transparent;}
.app-tabs .nav-link i{margin-right:5px;}

/* 面板切换 */
.app-panel{display:none;height:calc(100vh - 108px);}
.app-panel.active{display:block;}

/* ===== 对话面板 ===== */
.chat-container{height:100%;display:flex;}
.contacts{
    width:26%;min-width:220px;background:var(--ai-sidebar);
    overflow-y:auto;padding:12px;border-right:1px solid var(--ai-border);
}
.contacts-title{font-size:13px;color:var(--ai-muted);margin:8px 0 8px;}
#AI-list .list-group-item{
    cursor:pointer;border:1px solid var(--ai-border);border-radius:8px!important;
    margin-bottom:6px;display:flex;align-items:center;gap:8px;padding:9px 12px;
}
#AI-list .list-group-item:hover{background:#eef2fb;}
#AI-list .list-group-item.active{background:var(--ai-primary);border-color:var(--ai-primary);color:#fff;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--ai-primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.status-dot{position:absolute;width:10px;height:10px;border-radius:50%;bottom:0;right:0;border:2px solid #fff;}
.avatar-wrapper{position:relative;display:inline-block;}
.online{background:#28a745;}
.offline{background:#dc3545;}

.cap-overview{font-size:12px;}
.cap-item{padding:5px 8px;margin-bottom:4px;background:#fff;border:1px solid var(--ai-border);border-radius:6px;display:flex;align-items:center;gap:6px;}
.cap-item i{color:var(--ai-primary);}
.cap-dot{width:8px;height:8px;border-radius:50%;background:#adb5bd;margin-left:auto;display:inline-block;}
.cap-dot.on{background:#28a745;}

.chat-window{width:74%;display:flex;flex-direction:column;background:var(--ai-panel);}
.chat-header{padding:10px 16px;border-bottom:1px solid var(--ai-border);background:#fff;display:flex;align-items:center;justify-content:space-between;}
.chat-header h5{margin:0;font-size:16px;font-weight:600;}
.chat-mode-tag{font-size:11px;background:#eef2fb;color:var(--ai-primary);padding:3px 10px;border-radius:20px;}
.chat-box{flex-grow:1;padding:14px 16px;overflow-y:auto;background:var(--ai-bg);display:flex;flex-direction:column;gap:10px;}
.message{max-width:88%;padding:10px 14px;border-radius:12px;line-height:1.6;word-wrap:break-word;position:relative;}
.message.sent{align-self:flex-end;background:var(--ai-primary);color:#fff;border-bottom-right-radius:2px;}
.message.received{align-self:flex-start;background:#fff;color:var(--ai-text);border:1px solid var(--ai-border);border-bottom-left-radius:2px;}
.message.error-message{background:#ffe0e0;color:#b30000;border-color:#f0a0a0;}
.message-time{font-size:11px;color:var(--ai-muted);margin-bottom:3px;}
.message.sent .message-time{color:rgba(255,255,255,.75);text-align:right;}
.message-wrapper{display:flex;align-items:flex-start;gap:8px;}
.message.sent .message-wrapper{flex-direction:row-reverse;}
.message-content{flex:1;}
.chat-image{max-width:180px;border-radius:8px;cursor:pointer;margin:3px;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.file-download{display:inline-block;color:var(--ai-primary);font-weight:600;text-decoration:none;margin:2px 0;word-break:break-all;}
.btn-link-quick{display:inline-block;margin:3px;font-size:12px;}
.loading-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.2);border-top-color:var(--ai-primary);border-radius:50%;animation:spin 1s linear infinite;margin-right:8px;}
@keyframes spin{to{transform:rotate(360deg);}}

.chat-input{padding:10px 14px;border-top:1px solid var(--ai-border);background:#fff;}
.input-hint{font-size:11px;color:var(--ai-muted);margin-top:4px;min-height:14px;}

/* ===== 工作流画布 ===== */
.wf-toolbar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#fff;border-bottom:1px solid var(--ai-border);flex-wrap:wrap;}
.wf-label{font-weight:600;font-size:14px;color:var(--ai-text);}
.wf-label i{color:var(--ai-primary);}
.wf-node-palette{display:flex;gap:6px;flex-wrap:wrap;}
.palette-node{
    background:#eef2fb;border:1px solid var(--ai-border);border-radius:6px;color:#34527a;
    padding:5px 10px;font-size:12px;cursor:grab;user-select:none;transition:all .15s;
}
.palette-node:hover{background:var(--ai-primary);color:#fff;border-color:var(--ai-primary);}
.palette-node i{margin-right:4px;}
.wf-body{display:flex;height:calc(100% - 92px);}
.wf-canvas-wrap{flex:1;position:relative;background:
    radial-gradient(circle, #dde3ee 1px, transparent 1px);
    background-size:22px 22px;overflow:auto;}
.wf-canvas{position:relative;width:2000px;height:1200px;min-width:100%;min-height:100%;}
.wf-canvas-hint{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);color:#aab3c4;text-align:center;font-size:14px;line-height:2;pointer-events:none;}
.wf-links{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.wf-node{
    position:absolute;min-width:150px;background:#fff;border:2px solid #c6d0e0;border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);z-index:2;cursor:move;
}
.wf-node.selected{border-color:var(--ai-primary);box-shadow:0 0 0 3px rgba(13,110,253,.15);}
.wf-node-head{padding:7px 12px;color:#fff;border-radius:8px 8px 0 0;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;justify-content:space-between;}
.wf-node-head .n-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wf-node-head .n-del{cursor:pointer;opacity:.85;font-size:14px;}
.wf-node-head .n-del:hover{opacity:1;}
.wf-node[data-type="start"] .wf-node-head{background:#198754;}
.wf-node[data-type="file"] .wf-node-head{background:#0d6efd;}
.wf-node[data-type="parse"] .wf-node-head{background:#6610f2;}
.wf-node[data-type="api"] .wf-node-head{background:#fd7e14;}
.wf-node[data-type="skill"] .wf-node-head{background:#d63384;}
.wf-node[data-type="text"] .wf-node-head{background:#0dcaf0;color:#083;}
.wf-node[data-type="cond"] .wf-node-head{background:#6c757d;}
.wf-node[data-type="end"] .wf-node-head{background:#dc3545;}
.wf-node-body{padding:8px 12px;font-size:12px;color:var(--ai-muted);}
.wf-node-body .np{white-space:pre-wrap;word-break:break-all;max-height:70px;overflow:hidden;}
.wf-node.cond-node{background:#fff8e1;border-color:#f0d47a;}
.wf-node.outputs{margin-top:6px;}
.wf-port{
    position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #9aa7bd;
    cursor:crosshair;z-index:3;display:flex;align-items:center;justify-content:center;font-size:9px;color:#9aa7bd;
}
.wf-port.out{right:-8px;top:50%;transform:translateY(-50%);}
.wf-port.in{left:-8px;top:50%;transform:translateY(-50%);}
.wf-port:hover{background:var(--ai-primary);border-color:var(--ai-primary);color:#fff;}

.wf-props{width:290px;background:#fff;border-left:1px solid var(--ai-border);padding:14px;overflow-y:auto;}
.wf-props h6{font-size:14px;color:var(--ai-text);margin-bottom:12px;border-bottom:1px solid var(--ai-border);padding-bottom:8px;}
.wf-props-empty{color:var(--ai-muted);font-size:13px;}
.wf-runlog{padding:6px 14px;background:#f1f3f7;border-top:1px solid var(--ai-border);font-size:12px;color:var(--ai-muted);height:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.wf-runlog.ok{color:#198754;}
.wf-runlog.err{color:#dc3545;}

/* ===== Skills 面板 ===== */
.skills-toolbar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#fff;border-bottom:1px solid var(--ai-border);}
.skills-body{display:flex;height:calc(100% - 50px);}
.skills-list-wrap{width:44%;overflow-y:auto;padding:12px;border-right:1px solid var(--ai-border);background:var(--ai-bg);}
.skill-card{background:#fff;border:1px solid var(--ai-border);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:all .15s;}
.skill-card:hover{border-color:var(--ai-primary);}
.skill-card.active{border-color:var(--ai-primary);box-shadow:0 0 0 2px rgba(13,110,253,.12);}
.skill-card .sk-name{font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px;}
.skill-card .sk-trigger{font-size:11px;color:var(--ai-muted);margin-top:4px;word-break:break-all;}
.skill-card .sk-desc{font-size:12px;color:var(--ai-muted);margin-top:4px;}
.skill-card .sk-badge{margin-left:auto;}
.skills-editor{flex:1;padding:16px;overflow-y:auto;}
.skills-editor h6{font-size:14px;color:var(--ai-text);border-bottom:1px solid var(--ai-border);padding-bottom:8px;margin-bottom:14px;}
.skill-form .form-group{margin-bottom:12px;}
.skill-form label{font-size:12px;color:var(--ai-muted);margin-bottom:4px;display:block;}
.skill-actions{margin-top:12px;display:flex;gap:8px;}
.skill-import-box{padding:12px 14px;border-bottom:1px solid var(--ai-border);background:#f8faff;}
.skill-import-box textarea{font-size:12px;font-family:ui-monospace,Consolas,monospace;}
.skill-import-preview{background:#fff;border:1px solid var(--ai-border);border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.7;}
.skill-import-preview b{color:var(--ai-text);}
.skill-import-preview .imp-preview div{word-break:break-all;}

/* ===== 初始化面板 ===== */
.init-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;height:100%;overflow-y:auto;}
.init-card-wide{grid-column:span 2;}
.init-card .card-header{font-weight:600;font-size:14px;}
.workload-levels{display:flex;gap:10px;}
.wl-level{flex:1;border:2px solid var(--ai-border);border-radius:10px;padding:12px;cursor:pointer;text-align:center;transition:all .15s;}
.wl-level:hover{border-color:#b8c6e0;}
.wl-level.active{border-color:var(--ai-primary);background:#eef2fb;}
.wl-name{font-weight:700;font-size:14px;margin-bottom:4px;}
.wl-desc{font-size:11px;color:var(--ai-muted);line-height:1.4;}
.todo-list{list-style:none;padding:0;margin:0;}
.todo-list li{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--ai-border);border-radius:6px;padding:7px 10px;margin-bottom:6px;font-size:13px;}
.todo-list li .todo-status{font-size:11px;}
.todo-status.pending{color:#fd7e14;}
.todo-status.done{color:#198754;}
.todo-status.err{color:#dc3545;}
.init-log{font-family:Consolas,Menlo,monospace;font-size:12px;background:#111827;color:#7ee787;border-radius:8px;padding:12px;height:180px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;}
.init-log .log-line{margin-bottom:3px;}
.init-log .lg-err{color:#ff7b72;}
.init-log .lg-ok{color:#7ee787;}

/* ===== 已解析文件 ===== */
.files-toolbar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#fff;border-bottom:1px solid var(--ai-border);}
.files-body{padding:14px;overflow-y:auto;height:calc(100% - 50px);}
#files-table thead th{background:#f1f3f7;font-size:12px;color:var(--ai-muted);}
#files-table td{font-size:13px;vertical-align:middle;}
.file-status{font-size:11px;padding:2px 8px;border-radius:12px;}
.file-status.done{background:#d4edda;color:#155724;}
.file-status.err{background:#f8d7da;color:#721c24;}
.file-status.pending{background:#fff3cd;color:#856404;}

/* 模态框 */
#image-modal{position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;justify-content:center;align-items:center;}
#modal-img{max-width:85%;max-height:85%;border-radius:6px;}
#close-btn{position:absolute;top:14px;right:24px;font-size:32px;color:#fff;cursor:pointer;}

/* 滚动条 */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#c4ccda;border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:#aab4c6;}

/* ===== MCP 数据库查询结果 ===== */
.mcp-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px;background:#fff;}
.mcp-table th,.mcp-table td{border:1px solid var(--ai-border);padding:5px 8px;text-align:left;vertical-align:top;}
.mcp-table thead th{background:#f1f3f7;color:var(--ai-muted);font-weight:600;position:sticky;top:0;}
.mcp-table tbody tr:nth-child(even){background:#fafbfd;}
.mcp-table tbody tr:hover{background:#eef3fc;}
.tool-raw{background:#f8fafc;border:1px solid var(--ai-border);border-left:3px solid var(--ai-primary);border-radius:4px;padding:8px 10px;margin:6px 0;max-height:320px;overflow:auto;font-size:13px;}
.text-muted{color:var(--ai-muted);font-size:12px;}
.text-warning{color:#b8860b;font-size:13px;}
.text-danger{color:#c0392b;font-size:13px;}

/* ===== 响应式适配：PC 与移动端同时适应 ===== */
@media (max-width: 992px) and (min-width: 769px){
    .contacts{width:22%;min-width:170px;}
}
@media (max-width: 768px){
    .app-header{padding:8px 12px;flex-wrap:nowrap;}
    .app-logo{font-size:22px;}
    .app-title{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .app-subtitle{display:none;}
    .app-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
    .app-tabs .nav-link{padding:7px 10px;font-size:13px;white-space:nowrap;}
    .app-panel{height:calc(100dvh - 100px);}
    .chat-container{display:block;height:100%;}
    .contacts{display:none;}
    .chat-window{width:100%;height:100%;}
    .chat-header{padding:8px 10px;flex-wrap:wrap;gap:6px;}
    .chat-header h5{font-size:14px;}
    .ctx-control{margin-left:0;width:100%;flex-wrap:wrap;gap:4px;}
    .ctx-label{display:none;}
    .ctx-input{width:74px!important;}
    .ctx-usage{font-size:10px;}
    .chat-box{padding:10px 8px;}
    .message{max-width:94%;padding:9px 12px;}
    .chat-input{padding:8px 8px;}
    .input-group{flex-wrap:nowrap;}
    #message-input{min-width:0;}
}
@media (max-width: 480px){
    .app-title{font-size:14px;}
    .app-tabs .nav-link i{display:none;}
    .message{max-width:96%;}
}