/* AlgoLab — connect-nodes page (algo_page.py + agx_editor.js).
   Loaded globally by Dash from /assets: every rule is scoped under .agx-page.
   Shared node look: panels rgba(0,0,0,0.6), chips rgba(255,255,255,0.06),
   radius 10px, text #e8e8e8, muted #9fb3c8, headings #cfefff, accent #f0a030. */

.agx-page { color: #e8e8e8; font-size: 13px; height: calc(100vh - 84px); padding: 6px 1.2vw 8px; box-sizing: border-box; }
.agx-page * { box-sizing: border-box; }
.agx-main { display: flex; gap: 10px; height: 100%; }
.agx-root { flex: 1; min-width: 0; height: 100%; }
.agx-side { width: 27vw; min-width: 340px; flex: 0 0 auto; height: 100%; overflow-y: auto; padding-right: 2px; }

.agx { display: flex; gap: 10px; height: 100%; user-select: none; }

/* ---------- palette ---------------------------------------------------------- */
.agx-pal { width: 236px; flex: 0 0 236px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07);
           border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.agx-ptabs { display: flex; gap: 4px; padding: 8px 8px 4px; }
.agx-ptab { flex: 1; background: rgba(255,255,255,0.05); color: #9fb3c8; border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px; font-size: .78rem; padding: 4px 0; }
.agx-ptab.on { color: #cfefff; border-color: rgba(240,160,48,0.7); background: rgba(240,160,48,0.10); font-weight: 600; }
.agx-page input.agx-search, .agx-page input.agx-in { background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12);
            border-radius: 8px; padding: 4px 8px; font-size: .8rem; outline: none; width: 100%; }
.agx-search { margin: 4px 8px 6px; width: calc(100% - 16px) !important; }
.agx-page input:focus { border-color: #f0a030; }
.agx-pal-list { overflow-y: auto; flex: 1; padding: 0 6px 10px; }
.agx-cat { display: flex; align-items: center; gap: 7px; padding: 6px; cursor: pointer; border-radius: 8px; font-size: .78rem; color: #cfefff; }
.agx-cat:hover { background: rgba(255,255,255,0.05); }
.agx-cl { flex: 1; }
.agx-cn, .agx-chev { color: #6f8295; font-size: .68rem; }
.agx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; margin-right: 5px; }
.agx-items { padding: 0 0 6px 8px; }
.agx-item { display: flex; align-items: center; gap: 7px; padding: 3px 6px; margin: 2px 0; border-radius: 7px; cursor: pointer;
            font-size: .76rem; background: rgba(255,255,255,0.035); color: #e8e8e8; }
.agx-item.pal { cursor: grab; }
.agx-item:hover { background: rgba(255,255,255,0.09); }
.agx-item.on { background: rgba(240,160,48,0.12); outline: 1px solid rgba(240,160,48,0.5); }
.agx-it { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agx-iid { color: #6f8295; font-family: Consolas, monospace; font-size: .7rem; min-width: 16px; }
.agx-sdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.agx-bar { width: 3px; height: 14px; border-radius: 2px; flex: 0 0 3px; }
.agx-add { color: #6f8295; font-weight: 700; padding: 0 3px; cursor: pointer; }
.agx-add:hover { color: #f0a030; }
.agx-tag { font-size: .58rem; color: #9fb3c8; border: 1px solid rgba(159,179,200,.4); border-radius: 5px; padding: 0 3px; }
.agx-datacard { background: rgba(91,141,239,0.10); border: 1px solid rgba(91,141,239,0.35); border-radius: 10px; padding: 8px 9px;
                font-size: .74rem; color: #cfdcf5; margin: 2px 2px 8px; }
.agx-datacard .agx-btn { margin-top: 6px; width: 100%; }
.agx-note { color: #9fb3c8; font-size: .74rem; line-height: 1.45; padding: 6px; }
.agx-note b { color: #cfefff; }

/* ---------- canvas ------------------------------------------------------------ */
.agx-centre { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.agx-bar2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding-bottom: 4px; }
.agx-algo { color: #cfefff; font-weight: 600; font-size: .95rem; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agx-tools { display: flex; gap: 4px; align-items: center; }
.agx-tb { background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 2px 9px; font-size: .74rem; }
.agx-tb:hover { border-color: #f0a030; }
.agx-tb:disabled { opacity: .35; }
.agx-zoom { color: #9fb3c8; font-size: .72rem; min-width: 36px; text-align: center; }
.agx-canvas { flex: 1; position: relative; overflow: hidden; border-radius: 10px; outline: none; background-color: rgba(0,0,0,0.6);
              border: 1px solid rgba(255,255,255,0.07); background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px); }
.agx-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.agx-svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.agx-edge { fill: none; stroke-width: 2.2; opacity: .8; pointer-events: none; }
.agx-edge.loose { stroke-dasharray: 6 5; opacity: .7; }
.agx-edge.pending { stroke-dasharray: 4 4; opacity: .9; }
.agx-edge.sel { stroke-width: 3.4; opacity: 1; }
.agx-edge.temp { stroke-dasharray: 5 4; opacity: 1; }
.agx-elabel { fill: #9fb3c8; font-size: 10px; text-anchor: middle; pointer-events: none; }
.agx-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.agx-nodes { position: absolute; left: 0; top: 0; }
.agx-node { position: absolute; background: #141b23; border: 1px solid rgba(255,255,255,0.12); border-left: 4px solid;
            border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,.5); cursor: move; }
.agx-node.sel { box-shadow: 0 0 0 2px #f0a030, 0 3px 14px rgba(0,0,0,.55); }
.agx-node.busy { animation: agx-pulse 1.2s ease-in-out infinite; }
@keyframes agx-pulse { 50% { box-shadow: 0 0 0 3px rgba(240,160,48,.55), 0 3px 12px rgba(0,0,0,.5); } }
.agx-nh { display: flex; align-items: center; gap: 7px; padding: 6px 9px 0 8px; }
.agx-idc { color: #0b1016; font-weight: 700; font-size: .66rem; border-radius: 6px; padding: 0 5px; line-height: 1.5; }
.agx-nt { flex: 1; font-weight: 600; color: #e8f4ff; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agx-st { font-size: .8rem; }
.agx-ns { padding: 1px 9px 0 8px; color: #9fb3c8; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agx-nsn { color: #6f8295; }
.agx-warn { color: #f0c080; margin-left: 6px; }
.agx-row { position: absolute; left: 0; right: 0; height: 21px; display: flex; justify-content: space-between; align-items: center;
           padding: 0 12px; font-size: .7rem; border-top: 1px solid rgba(255,255,255,0.04); }
.agx-rl { color: #cfdcea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.agx-rl.empty { color: #f0c080; }
.agx-rr { color: #9fb3c8; white-space: nowrap; }
.agx-port { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #0c1116; border: 2px solid #9fb3c8; }
.agx-port.in { left: -8px; border-color: #f0c080; }
.agx-port.in.on { border-color: #9fb3c8; background: #3a4b5c; }
.agx-port.in.multi { border-radius: 3px; }
.agx-port.out { right: -8px; border-color: #f0a030; cursor: crosshair; }
.agx-port:hover { background: #f0a030; }
.agx-emptyhint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #45596d; font-size: 1rem; pointer-events: none; }
.agx-flash { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(240,160,48,.16); color: #f5d6a3;
             border-radius: 10px; padding: 5px 14px; font-size: .78rem; opacity: 0; transition: opacity .3s; pointer-events: none; max-width: 80%; text-align: center; }
.agx-flash.show { opacity: 1; }
.agx-flash.bad { background: rgba(255,90,80,.18); color: #ffb4ac; }
.agx-legend { position: absolute; left: 10px; bottom: 8px; display: flex; gap: 12px; font-size: .68rem; color: #9fb3c8; pointer-events: none; }
.agx-legend > span { display: inline-flex; align-items: center; }

/* ---------- side panel -------------------------------------------------------- */
.agx-card { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.agx-card-title { color: #cfefff; font-weight: 600; font-size: .86rem; margin-bottom: 4px; }
.agx-card-sub { color: #9fb3c8; font-size: .72rem; margin: 2px 0 6px; line-height: 1.4; }
.agx-chips { display: flex; gap: 6px; align-items: center; margin-bottom: 7px; flex-wrap: wrap; }
.agx-chip { font-size: .66rem; border: 1px solid; border-radius: 8px; padding: 0 7px; line-height: 1.6; }
.agx-chip.soft { border-color: rgba(255,255,255,0.15); color: #cfdcea; background: rgba(255,255,255,0.05); }
.agx-nid { color: #6f8295; font-size: .7rem; margin-left: auto; }
.agx-page input.agx-title-in { font-weight: 600; font-size: .95rem; color: #cfefff; }
.agx-code { font-family: Consolas, monospace; font-size: .7rem; color: #f0a030; margin: 4px 0 2px; word-break: break-word; }
.agx-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.agx-btn { flex: 1 1 auto; background: rgba(255,255,255,0.06); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
           padding: 4px 8px; font-size: .76rem; white-space: nowrap; }
.agx-btn:hover { border-color: #f0a030; }
.agx-btn.acc { border-color: rgba(240,160,48,0.6); color: #f5d6a3; }
.agx-btn.danger:hover, .agx-btn.armed { border-color: #ff7b72; color: #ffb4ac; }
.agx-btn.armed { background: rgba(255,90,80,0.14); }
.agx-slot { padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.agx-slot:first-of-type { border-top: none; }
.agx-slot-t { color: #9fb3c8; font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.agx-feed { display: flex; align-items: center; gap: 4px; font-size: .76rem; background: rgba(255,255,255,0.04); border-radius: 7px;
            padding: 2px 7px; margin: 2px 0; }
.agx-feed > span:nth-child(2) { flex: 1; }
.agx-x { color: #6f8295; cursor: pointer; padding: 0 3px; }
.agx-x:hover { color: #ff9b92; }
.agx-empty { color: #6f8295; font-size: .72rem; font-style: italic; }
.agx-outs { display: flex; gap: 5px; flex-wrap: wrap; margin: 2px 0 4px; }
.agx-edgedesc { font-size: .78rem; line-height: 1.6; color: #cfdcea; }
.agx-edgedesc b { color: #e8f4ff; }
.agx-kpis { display: flex; gap: 6px; }
.agx-kpi { flex: 1; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 5px 4px; text-align: center; }
.agx-kv { font-size: 1.05rem; font-weight: 600; color: #cfefff; }
.agx-kl { font-size: .62rem; color: #9fb3c8; }
.agx-statrow { display: flex; align-items: center; gap: 7px; font-size: .76rem; padding: 3px 5px; border-radius: 7px; cursor: pointer; }
.agx-statrow:hover { background: rgba(255,255,255,0.06); }
.agx-stl { font-size: .68rem; }
.agx-help { color: #9fb3c8; font-size: .73rem; line-height: 1.6; }
.agx-help b { color: #cfefff; font-weight: 600; }
.agx-help i { color: #cfdcea; }

/* the node modules' own input controls, rendered inside the "Input mapping" card */
#ag_inputs_card #input_controls > div { margin-left: 0 !important; margin-top: 4px !important; }
#ag_inputs_card .div-hyperpar { border-color: rgba(255,255,255,0.08); border-radius: 10px; background-color: rgba(255,255,255,0.03) !important; }