@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    width: 100vw;
    height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fafafa;
}
/* 工具栏 */
.工具栏 {
    height: 48px;
    border-bottom: 1px solid #000;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.工具按钮 {
    padding: 4px 4px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}   
        .工具按钮:hover {
            background: #5a6268;
            transform: translateY(-1px);
        }
        
        .工具按钮.主要 {
            background: #007bff;
        }
        
        .工具按钮.主要:hover {
            background: #0056b3;
        }
        
        .工具按钮.成功 {
            background: #28a745;
        }
        
        .工具按钮.成功:hover {
            background: #218838;
        }
        
        .工具按钮.危险 {
            background: #dc3545;
        }
        
        .工具按钮.危险:hover {
            background: #c82333;
        }
        
        .工具按钮.警告 {
            background: #ffc107;
            color: #212529;
        }
        
        .工具按钮.警告:hover {
            background: #e0a800;
        }
        
.工具按钮:hover {
    background: #f0f0f0;
}
.工具按钮:active {
    background: #e0e0e0;
}
.分隔符 {
    width: 1px;
    height: 24px;
    background: #000;
    opacity: 0.2;
}
.示例选择器 {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.示例下拉 {
    padding: 6px 12px;
    border: 1px solid #000;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    min-width: 200px;
}
.节点定义容器 {
    height: 50%;
}
#文 {
    height: calc(100% - 32px);
}
/* 主容器 */
.主容器 {
    flex: 1;
    display: flex;
    overflow: hidden;
}
/* 节点选择器 */
.节点选择器 {
    width: 200px;
    height: 50%;
    border-right: 1px solid #000;
    background: #fff;
    overflow-y: auto;
}
.节点搜索 {
    padding: 8px;
    border-bottom: 1px solid #000;
}
.搜索框 {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}
.节点类别 {
    border-bottom: 1px dashed #000;
}
.类别标题 {
    padding: 8px 12px;
    font-weight: 500;
    font-size: 13px;
    background: #f5f5f5;
    border-bottom: 1px solid #000;
    cursor: pointer;
    user-select: none;
}
.类别标题:hover {
    background: #e8e8e8;
}
.类别内容 {
    display: block;
}
.类别内容.折叠 {
    display: none;
}
.节点项 {
    padding: 8px 12px;
    cursor: move;
    font-size: 13px;
    border-bottom: 1px dotted #ddd;
    display: flex;
    align-items: center;
    gap: 6px;
}
.节点项:hover {
    background: #f0f0f0;
}
.节点项图标 {
    width: 16px;
    text-align: center;
}
/* 编辑器区域 */
.编辑器容器 {
    width: 400px;
    border-right: 1px solid #000;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.编辑器标题栏 {
    height: 36px;
    border-bottom: 1px dashed #000;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
}
.编辑器切换按钮 {
    margin-left: auto;
    padding: 4px 8px;
    border: 1px solid #666;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
}
#脑 {
    flex: 1;
}
/* 画布区域 */
.画布容器 {
    flex: 1;
    position: relative;
    overflow: auto;
    background: #fff;
}
.布 {
    position: relative;
    background-image: 
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    width: 5000px;
    height: 3000px;
}
/* 多选框 */
.选择框 {
    position: absolute;
    border: 1px dashed #0066ff;
    background: rgba(0, 102, 255, 0.1);
    pointer-events: none;
    display: none;
    z-index: 100;
}
/* 节点样式 */
.节点 {
    position: absolute;
    border: 1px solid #000;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    width: 96px;
    height: 96px;
    cursor: move;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    user-select: none;
    z-index: 10;
}
.节点:hover {
    box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
    z-index: 11;
}
.节点.选中 {
    border: 2px solid #0066ff;
    box-shadow: 0 0 0 3px rgba(0,102,255,0.1);
    z-index: 12;
}
.节点.多选中 {
    border: 2px solid #52c41a;
    box-shadow: 0 0 0 3px rgba(82,196,26,0.1);
    z-index: 12;
}
.节点.执行中 {
    background: #fffbe6;
    border-color: #faad14;
}
.节点.执行成功 {
    background: #f0f9ff;
    border-color: #52c41a;
}
.节点.执行失败 {
    background: #fff1f0;
    border-color: #ff4d4f;
}
.节点类型标签 {
    position: absolute;
    top: -10px;
    left: 12px;
    background: #fff;
    padding: 0 4px;
    font-size: 10px;
    color: #666;
}
.节点图标 {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    opacity: 0.6;
}
.节点名称 {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin-bottom: 8px;
    padding-right: 20px;
}
.节点描述 {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
.节点端口容器 {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.节点端口容器.输入端口容器 {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
}
.节点端口容器.输出端口容器 {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
}
.端口 {
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-radius: 50%;
    background: #fff;
    cursor: crosshair;
    position: relative;
}
.端口:hover {
    background: #0066ff;
    transform: scale(1.2);
}
.端口[data-port-type="input"] {
    border-radius: 0px;
    background: #a19e9e;
    left: -6px;
}
.端口[data-port-type="output"] {
    border-radius: 8px;
    background: #FFEB3B;
    right: -6px;
}
.端口.连接中 {
    background: #52c41a;
}
.端口标签 {
    position: absolute;
    font-size: 10px;
    white-space: nowrap;
    color: #666;
    pointer-events: none;
}
.输入端口容器 .端口标签 {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.输出端口容器 .端口标签 {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}
        /* 右侧面板 */
        .右侧面板 {
            width: 400px;
            background: white;
            border-left: 1px solid #dee2e6;
            display: flex;
            flex-direction: column;
        }
        .标签页头 {
            display: flex;
            border-bottom: 1px solid #dee2e6;
        }
        .标签页按钮 {
            flex: 1;
            padding: 12px;
            background: #f8f9fa;
            border: none;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .标签页按钮.活动 {
            background: white;
            border-bottom: 2px solid #007bff;
            font-weight: 500;
        }
        .标签页内容 {
            flex: 1;
            display: none;
            overflow-y: auto;
        }
        .标签页内容.显示 {
            display: block;
        }
        #脑 {
            height: 100%;
            min-height: 400px;
        }
        /* 聊天界面 */
        .聊天容器 {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .API密钥输入区 {
            padding: 10px;
            background: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }
        .API密钥输入区 input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ced4da;
            border-radius: 4px;
        }
        #聊 {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
            background: #f8f9fa;
        }
        .消息 {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 8px;
            max-width: 85%;
            word-wrap: break-word;
        }
        .用户消息 {
            background: #007bff;
            color: white;
            margin-left: auto;
            text-align: right;
        }
        .AI消息 {
            background: white;
            border: 1px solid #dee2e6;
        }
        .AI消息 pre {
            background: #f1f3f5;
            padding: 8px;
            border-radius: 4px;
            overflow-x: auto;
            margin: 5px 0;
        }
        .AI消息 code {
            background: #f1f3f5;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
        }
        .聊天输入区 {
            padding: 10px;
            background: white;
            border-top: 1px solid #dee2e6;
            display: flex;
            gap: 10px;
        }
        #聊天输入 {
            flex: 1;
            padding: 8px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            resize: vertical;
            min-height: 60px;
            max-height: 200px;
        }
        .发送按钮 {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            align-self: flex-end;
        }
        .发送按钮:hover {
            background: #0056b3;
        }
        .发送按钮:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }    
/* 连接线 */
.连接线容器 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}
.连接线 {
    stroke: #666;
    stroke-width: 2px;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
}
.连接线:hover {
    stroke: #0066ff;
    stroke-width: 3px;
}
.连接线.选中 {
    stroke: #ff4d4f;
    stroke-width: 3px;
}
.临时连接线 {
    stroke: #52c41a;
    stroke-width: 2px;
    stroke-dasharray: 5,5;
    fill: none;
    pointer-events: none;
}
/* 状态栏 */
.状态栏 {
    height: 32px;
    border-top: 1px solid #000;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 12px;
    color: #666;
    gap: 16px;
}
.状态项 {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* 控制台 */
.控制台容器 {
    position: fixed;
    bottom: 32px;
    right: 600px;
    width: 400px;
    height: 200px;
    background: #fff;
    border: 1px solid #000;
    display: none;
    flex-direction: column;
    z-index: 500;
}
.控制台容器.显示 {
    display: flex;
}
.控制台标题栏 {
    height: 30px;
    background: #f0f0f0;
    border-bottom: 1px solid #000;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
}
.控制台关闭 {
    margin-left: auto;
    cursor: pointer;
    padding: 4px 8px;
}
.控制台内容 {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    font-family: monospace;
    font-size: 12px;
}
.控制台日志 {
    margin-bottom: 4px;
}
.控制台日志.信息 {
    color: #333;
}
.控制台日志.警告 {
    color: #faad14;
}
.控制台日志.错误 {
    color: #ff4d4f;
}
.控制台日志.成功 {
    color: #52c41a;
}
/* 右键菜单 */
.右键菜单 {
    position: absolute;
    background: #fff;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 4px 0;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    display: none;
    z-index: 1000;
    min-width: 180px;
}
.菜单项 {
    padding: 6px 16px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.菜单项:hover {
    background: #f0f0f0;
}
.菜单项.禁用 {
    color: #ccc;
    cursor: not-allowed;
}
.菜单项.禁用:hover {
    background: transparent;
}
.菜单分隔线 {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}
/* 节点编辑对话框 */
.对话框背景 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.对话框 {
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    padding: 24px;
    min-width: 600px;
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
}
.对话框标题 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}
.表单组 {
    margin-bottom: 16px;
}
.表单标签 {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: #333;
    font-weight: 500;
}
.表单输入 {
    width: 100%;
    padding: 8px;
    border: 1px solid #000;
    border-radius: 4px;
    font-size: 14px;
}
.表单选择 {
    width: 100%;
    padding: 8px;
    border: 1px solid #000;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}
.表单文本域 {
    width: 100%;
    padding: 8px;
    border: 1px solid #000;
    border-radius: 4px;
    font-size: 14px;
    min-height: 100px;
    font-family: monospace;
    resize: vertical;
}
.代码编辑器 {
    width: 100%;
    height: 300px;
    border: 1px solid #000;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 8px;
    background: #f8f8f8;
}
.表单复选框 {
    margin-right: 8px;
}
.对话框按钮组 {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}
.主按钮 {
    padding: 8px 16px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.主按钮:hover {
    background: #333;
}
.次按钮 {
    padding: 8px 16px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.次按钮:hover {
    background: #f0f0f0;
}
.危险按钮 {
    padding: 8px 16px;
    border: 1px solid #ff4d4f;
    background: #ff4d4f;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.危险按钮:hover {
    background: #ff7875;
}
/* 参数编辑区域 */
.参数区域 {
    border: 1px dashed #000;
    border-radius: 4px;
    padding: 12px;
    background: #fafafa;
    margin-top: 16px;
}
.参数标题 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #666;
}
.参数组 {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: flex-start;
}
.参数输入 {
    flex: 1;
    padding: 6px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 13px;
}
.删除参数按钮 {
    padding: 6px 12px;
    border: 1px solid #ff4d4f;
    color: #ff4d4f;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.添加参数按钮 {
    padding: 6px 12px;
    border: 1px dashed #000;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    margin-top: 8px;
}
/* 快捷键提示 */
.快捷键提示 {
    position: fixed;
    bottom: 40px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 100;
    display: none;
}

        /* 执行结果面板 */
        .执行结果面板 {
            position: fixed;
            bottom: 230px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            border: 2px solid #007bff;
            border-radius: 8px;
            width: 600px;
            max-height: 400px;
            display: none;
            flex-direction: column;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            z-index: 1500;
            resize: both;
            overflow: auto;
        }
        
        .执行结果面板.显示 {
            display: flex;
        }
        
        .执行结果头 {
            padding: 10px 15px;
            background: #007bff;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: move;
        }
        
        .执行结果格式选择 {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .格式按钮 {
            padding: 4px 8px;
            background: rgba(255,255,255,0.2);
            border: 1px solid white;
            color: white;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .格式按钮.活动 {
            background: white;
            color: #007bff;
        }
        
        .执行结果内容 {
            flex: 1;
            padding: 15px;
            overflow: auto;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            white-space: pre-wrap;
            word-break: break-all;
        }
        
        .数据类型标签 {
            display: inline-block;
            padding: 2px 6px;
            background: #e9ecef;
            border-radius: 3px;
            font-size: 11px;
            margin-bottom: 10px;
            color: #495057;
        }
        .代码编辑器容器 {
            height: 250px;
        }

          /* 设置面板 */
        .设置组 {
            padding: 1px;
        }
        
        .设置项 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .设置标签 {
            font-size: 14px;
            color: #495057;
        }
        
        .开关 {
            position: relative;
            width: 44px;
            height: 24px;
            background: #dee2e6;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .开关.开启 {
            background: #28a745;
        }
        
        .开关滑块 {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transition: left 0.3s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .开关.开启 .开关滑块 {
            left: 22px;
        }
       /* 缩放控制 */
        .缩放控制 {
            position: absolute;
            bottom: 50px; 
            right: 420px;
            background: white;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 50;
        }
        
        .缩放按钮 {
            width: 30px;
            height: 30px;
            border: 1px solid #dee2e6;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .缩放按钮:hover {
            background: #f8f9fa;
        }
        
        .缩放值 {
            font-size: 14px;
            min-width: 50px;
            text-align: center;
            color: #495057;
        }