body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;height:100vh;background:#f0f2f5}#root{display:flex;width:100%;height:100%}.sidebar{width:320px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;transition:width .3s ease;position:relative;z-index:10}.sidebar.collapsed{width:60px}.sidebar-header{position:relative;padding:15px;border-bottom:1px solid #eee;background:#fafafa;display:flex;justify-content:space-between;align-items:center;height:56px;box-sizing:border-box}.sidebar.collapsed .sidebar-header{padding:10px 0;height:auto;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid #eee}.sidebar-header h3{margin:0;color:#333;font-size:16px;white-space:nowrap;overflow:hidden}.sidebar.collapsed .sidebar-header h3{display:none}.sidebar-actions{display:flex;gap:10px;align-items:center}.sidebar.collapsed .sidebar-actions{display:flex;justify-content:center;align-items:center;width:100%}.new-graph-btn{background:#2196f3;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px;white-space:nowrap;transition:background .2s ease}.new-graph-btn:hover{background:#1976d2}.sidebar.collapsed .new-graph-btn{width:40px;height:28px;min-width:40px;min-height:28px;padding:0;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.toggle-btn{background:none;border:none;cursor:pointer;font-size:20px;color:#999;padding:0 5px;transition:color .2s ease}.toggle-btn:hover{color:#2196f3}.sidebar.collapsed .toggle-btn{position:absolute;right:-38px;top:50%;transform:translateY(-50%);z-index:100;background:none;border:none;box-shadow:none;border-radius:0;padding:8px 12px;font-size:20px;color:#999;cursor:pointer;display:flex;align-items:center;justify-content:center}.sidebar.collapsed .toggle-btn:hover{color:#2196f3}.balance-section{transition:padding .3s ease,gap .3s ease,background .3s ease}.sidebar.collapsed .balance-section{background:transparent!important;border-bottom:none!important;flex-direction:column;justify-content:center;padding:8px 5px;gap:2px}.sidebar.collapsed .balance-label{display:none}.sidebar.collapsed .balance-value{background:transparent!important;border:none!important;box-shadow:none!important;padding:0;font-size:11px;font-weight:700;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.graph-list{flex-grow:1;overflow-y:auto;overflow-x:hidden}.graph-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;cursor:pointer;border-bottom:1px solid #f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.graph-item:hover{background:#f5f5f5}.graph-item.active{background:#e3f2fd;border-left:4px solid #2196f3}.sidebar.collapsed .graph-item{padding:10px 8px;justify-content:flex-start;cursor:pointer}.sidebar.collapsed .graph-info{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:0}.graph-item .name{font-weight:600;color:#333;font-size:13px}.sidebar.collapsed .graph-item .name{font-size:11px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.graph-item .meta{font-size:10px;color:#888;margin-top:2px}.sidebar.collapsed .graph-item .meta{display:none}.graph-actions{display:flex;gap:5px;align-items:center}.sidebar.collapsed .graph-actions{display:none!important}.graph-icon-mini{display:none;width:8px;height:8px;border-radius:50%;background:#2196f3}.sidebar.collapsed .graph-icon-mini{display:none}.edit-btn{background:transparent;border:1px solid #2196f3;color:#2196f3;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:10px;font-weight:700}.delete-btn{background:transparent;border:1px solid #e0e0e0;color:#999;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:10px}.sidebar.collapsed .delete-btn{display:none}.delete-btn:hover{background:#ffebee;color:#c62828}.main-area{flex-grow:1;display:flex;flex-direction:column;height:100%;position:relative}.canvas-container{flex-grow:1;position:relative;background:#fff;border-bottom:1px solid #ddd}.react-flow__node{font-size:12px;border-radius:8px;padding:0;width:220px;text-align:left;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 6px #0000001a;background:#fff;transition:box-shadow .2s,border-color .2s}.react-flow__node.node-start{background:#e8f5e9;border-color:#c8e6c9}.react-flow__node.node-end{background:#ffebee;border-color:#ffcdd2}.react-flow__node.node-action{background:#e3f2fd;border-color:#bbdefb}.react-flow__node.node-human{background:#fff3e0;border-color:#ffe0b2}.react-flow__node.node-graph{background:#f3e5f5;border-color:#e1bee7;border-style:dashed}.react-flow__node.node-tool{background:#e0f2f1;border-color:#80cbc4}.react-flow__node.node-active-path{border-color:#4caf50!important;box-shadow:0 0 0 2px #4caf504d,0 4px 12px #4caf5033}.react-flow__node.node-rewind-origin{border-color:#9c27b0!important;border-width:2px!important;box-shadow:0 0 0 2px #9c27b040}.react-flow__node{transition:border-color .2s ease,box-shadow .2s ease,border-width .2s ease}.react-flow__node.node-selected{border-color:#2196f3!important;border-width:2px!important;box-shadow:0 0 0 3px #2196f34d,0 4px 12px #2196f333!important;z-index:10!important;transition:border-color .2s ease,box-shadow .2s ease,border-width .2s ease}.react-flow__edge.edge-selected .react-flow__edge-path{stroke:#2196f3!important;stroke-width:3px!important;filter:drop-shadow(0 0 4px rgba(33,150,243,.5));transition:stroke .2s ease,stroke-width .2s ease}.react-flow__edge.edge-selected .react-flow__edge-textbg{fill:#2196f3!important}.react-flow__edge.edge-selected .react-flow__edge-text{fill:#fff!important;font-weight:700}.node-header{padding:8px 12px;border-bottom:1px solid rgba(0,0,0,.05);font-weight:700;font-size:12px;display:flex;justify-content:space-between;align-items:center}.node-start .node-header{color:#2e7d32}.node-end .node-header{color:#c62828}.node-action .node-header{color:#1565c0}.node-human .node-header{color:#ef6c00}.node-graph .node-header{color:#7b1fa2}.node-tool .node-header{color:#00695c}.node-type-badge{font-size:9px;background:#fff9;padding:2px 6px;border-radius:4px;text-transform:uppercase;font-weight:400}.node-body{padding:8px 12px;max-height:80px;overflow-y:auto;background:#ffffff4d}.node-body:empty{display:none}.node-prompt{font-size:10px;color:#444;line-height:1.4}.subgraph-link{display:block;margin-top:8px;font-size:10px;color:#7b1fa2;background:#ffffff80;padding:4px 8px;border-radius:4px;text-decoration:none;text-align:center;border:1px solid #ce93d8;cursor:pointer}.subgraph-link:hover{background:#e1bee7;color:#4a148c}.chat-panel{min-height:150px;background:#fafafa;display:flex;flex-direction:column;border-top:1px solid #ddd}.resizer{height:6px;background:#eee;cursor:ns-resize;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:center;flex-shrink:0}.resizer:after{content:"";width:30px;height:3px;background:#ccc;border-radius:2px}.resizer:hover{background:#e0e0e0}.chat-tabs{display:flex;background:#fff;border-bottom:1px solid #eee;flex-shrink:0}.chat-tab{padding:10px 20px;cursor:pointer;font-size:12px;font-weight:600;color:#666;border-bottom:2px solid transparent}.chat-tab.active{color:#2196f3;border-bottom-color:#2196f3}.chat-tab:hover{background:#f5f5f5}.chat-messages{flex-grow:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:10px}.msg{max-width:80%;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.4;box-shadow:0 1px 2px #0000000d}.msg-user{align-self:flex-end;background:#2196f3;color:#fff}.msg-bot{align-self:flex-start;background:#fff;border:1px solid #e0e0e0;color:#333}.msg-error{background:#ffebee;color:#c62828;border:1px solid #ffcdd2;font-size:11px}.history-list{flex-grow:1;overflow-y:auto;padding:10px}.history-item{background:#fff;border:1px solid #e0e0e0;padding:10px;margin-bottom:8px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.history-item:hover{background:#f5f5f5;border-color:#bdbdbd}.history-node-name{font-weight:700;font-size:13px;color:#333}.history-timestamp{font-size:10px;color:#999}.history-actions{display:flex;gap:5px;align-items:center}.chat-input-area{padding:10px;background:#fff;display:flex;gap:10px;border-top:1px solid #eee;flex-shrink:0}.chat-input{flex-grow:1;border:1px solid #ddd;border-radius:4px;padding:8px 12px;font-size:13px;outline:none}.chat-input:focus{border-color:#2196f3}.send-btn{background:#2196f3;color:#fff;border:none;padding:0 20px;border-radius:4px;cursor:pointer;font-weight:700}.send-btn:disabled{background:#ccc}.save-layout-btn{position:absolute;top:10px;right:10px;z-index:5;background:#fff;border:1px solid #ccc;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px}.copy-btn-icon{margin-left:5px;cursor:pointer;opacity:.7;font-size:12px}.copy-btn-icon:hover{opacity:1}.icon-btn{background:transparent;border:none;cursor:pointer;font-size:14px;padding:0 5px;opacity:.6}.icon-btn:hover{opacity:1}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center}.modal-content{background:#fff;padding:20px;border-radius:8px;width:80%;height:80%;display:flex;flex-direction:column;box-shadow:0 4px 20px #00000026}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;border-bottom:1px solid #eee;padding-bottom:10px}.modal-title{font-size:16px;font-weight:700}.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:#666}.modal-body{flex-grow:1;overflow:auto;background:#f8f9fa;border-radius:4px;padding:10px;position:relative}.json-viewer{white-space:pre-wrap;font-family:Consolas,Monaco,monospace;font-size:12px;color:#333}.btn-rewind{background:#ff9800;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;margin-right:10px}.btn-rewind:hover{background:#f57c00}