/* =========================================================
IAI FLOW
Workflow Builder UI
Full Production Stylesheet
========================================================= */

:root{

--bg:#071018;
--panel:#0b1520;
--node:#0f1c2a;

--border:rgba(255,255,255,.08);
--border-strong:rgba(255,255,255,.18);

--text:#e9f1fb;
--muted:#9fb2c6;

--blue:#3aa6ff;
--green:#00ff99;
--orange:#ffaa00;
--red:#ff4444;

}



/* =========================================================
LAYOUT
========================================================= */

.builder-layout{

display:grid;

grid-template-columns:240px 1fr 320px;

gap:20px;

height:calc(100vh - 120px);

}



/* =========================================================
NODE LIBRARY PANEL
========================================================= */

.node-panel{

background:var(--panel);

border-right:1px solid var(--border);

padding:16px;

overflow-y:auto;

}

.node-panel h3{

font-size:15px;

margin-bottom:12px;

color:var(--text);

}

.node{

padding:10px 12px;

margin-bottom:10px;

border-radius:10px;

border:1px solid var(--border);

background:rgba(255,255,255,.02);

cursor:grab;

font-size:13px;

color:var(--text);

}

.node:hover{

border-color:var(--blue);

}



/* =========================================================
CANVAS
========================================================= */

#canvas{

position:relative;

border:1px solid var(--border);

background:

radial-gradient(circle at 1px 1px,
rgba(255,255,255,.05) 1px,
transparent 0);

background-size:20px 20px;

overflow:hidden;

}



/* =========================================================
CANVAS NODE
========================================================= */

.canvas-node{

position:absolute;

min-width:140px;

padding:12px 14px;

background:var(--node);

border-radius:12px;

border:1px solid var(--border);

color:var(--text);

font-size:13px;

cursor:move;

box-shadow:0 10px 30px rgba(0,0,0,.45);

transition:all .2s ease;

}

.canvas-node:hover{

border-color:var(--blue);

}



/* =========================================================
NODE TITLE
========================================================= */

.canvas-node .node-title{

font-weight:600;

margin-bottom:4px;

}



/* =========================================================
PORTS
========================================================= */

.port{

width:12px;
height:12px;

border-radius:50%;

background:var(--blue);

position:absolute;

}

.port.input{

left:-6px;

top:50%;

transform:translateY(-50%);

}

.port.output{

right:-6px;

top:50%;

transform:translateY(-50%);

}



/* =========================================================
CONNECTION SVG
========================================================= */

#canvas svg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

}



/* =========================================================
WORKFLOW TOOLBAR
========================================================= */

.workflow-toolbar{

display:flex;

gap:10px;

margin-bottom:14px;

}

.workflow-toolbar button{

padding:8px 14px;

border-radius:8px;

border:1px solid var(--border);

background:var(--node);

color:var(--text);

font-size:13px;

cursor:pointer;

transition:.15s;

}

.workflow-toolbar button:hover{

border-color:var(--blue);

}



/* =========================================================
NODE EXECUTION STATES
========================================================= */

.node-running{

border-color:var(--orange);

box-shadow:0 0 12px var(--orange);

}

.node-success{

border-color:var(--green);

box-shadow:0 0 12px var(--green);

}

.node-error{

border-color:var(--red);

box-shadow:0 0 12px var(--red);

}



/* =========================================================
LOG PANEL
========================================================= */

.workflow-log-panel{

background:var(--panel);

border-left:1px solid var(--border);

display:flex;

flex-direction:column;

}

.workflow-log-header{

padding:12px 16px;

border-bottom:1px solid var(--border);

font-size:14px;

font-weight:600;

color:var(--text);

}

#workflow-log{

flex:1;

overflow-y:auto;

padding:12px;

font-size:12px;

font-family:monospace;

color:var(--muted);

}

.workflow-log-line{

margin-bottom:6px;

}

.workflow-log-line.error{

color:var(--red);

}



/* =========================================================
EMPTY CANVAS MESSAGE
========================================================= */

.canvas-empty{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

color:var(--muted);

font-size:13px;

opacity:.6;

}



/* =========================================================
SCROLLBAR
========================================================= */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:rgba(255,255,255,.08);

border-radius:6px;

}



/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:1100px){

.builder-layout{

grid-template-columns:1fr;

}

.node-panel{

display:none;

}

.workflow-log-panel{

display:none;

}

}