@memberjunction/ng-core-entity-forms 6.1.0-edge.4 → 6.1.0-edge.6

package/dist/lib/custom/ai-agent-run/flow/agent-run-flow.component.js

@@ -618,7 +618,7 @@ export class AIAgentRunFlowComponent {
             i0.ɵɵconditional(ctx.isAnimated ? 15 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.isAnimated ? 17 : 18);
-        } }, dependencies: [i1.NgClass, i2.LoadingComponent, i3.AIAgentRunStepDetailComponent, i4.FlameCascadeComponent, i5.SubwayLinesComponent, i6.ConstellationComponent, i7.FlowchartComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n.flow-cockpit[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n\n\n.flow-modes[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  padding: 10px 14px;\n  flex-wrap: wrap;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.flow-mode[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 999px;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  font-size: 12.5px;\n  cursor: pointer;\n  transition: 0.15s;\n}\n.flow-mode[_ngcontent-%COMP%]:hover:not(:disabled) { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n.flow-mode.on[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 14px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n.flow-mode.soon[_ngcontent-%COMP%] { cursor: not-allowed; opacity: 0.6; }\n.soon-tag[_ngcontent-%COMP%] {\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  padding: 2px 6px;\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n  color: var(--mj-text-muted);\n}\n\n\n\n.flow-main[_ngcontent-%COMP%] { flex: 1; display: flex; min-height: 0; }\n\n.flow-stage[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background:\n    radial-gradient(900px 520px at 72% -8%,\n      color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface-sunken)) 0%,\n      var(--mj-bg-surface-sunken) 60%);\n}\n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-flame[_ngcontent-%COMP%], \n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-subway[_ngcontent-%COMP%], \n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-constellation[_ngcontent-%COMP%] {\n  display: block;\n  position: absolute;\n  inset: 0;\n  padding: 10px 14px;\n}\n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-flowchart[_ngcontent-%COMP%] {\n  display: block;\n  position: absolute;\n  inset: 0;\n}\n.flow-hidden[_ngcontent-%COMP%] { display: none !important; }\n\n\n\n.flow-zoom[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 12px;\n  right: 14px;\n  z-index: 5;\n  display: flex;\n  gap: 6px;\n}\n.fz-btn[_ngcontent-%COMP%] {\n  width: 34px;\n  height: 34px;\n  border-radius: 9px;\n  border: 1px solid var(--mj-border-default);\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 88%, transparent);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  font-size: 13px;\n  backdrop-filter: blur(4px);\n}\n.fz-btn[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n\n\n\n.flow-resizer[_ngcontent-%COMP%] {\n  position: absolute;\n  left: -3px;\n  top: 0;\n  width: 7px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 6;\n}\n.flow-resizer[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent); }\n\n\n\n.flow-detail[_ngcontent-%COMP%] {\n  position: relative;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  display: flex;\n}\n\n\n\n.flow-detail[_ngcontent-%COMP%]    > mj-ai-agent-run-step-detail[_ngcontent-%COMP%] { flex: 1 1 auto; min-width: 0; }\n\n.flow-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 70%, transparent);\n}\n.flow-empty[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n.flow-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 34px; opacity: 0.5; }\n\n\n\n.flow-rail[_ngcontent-%COMP%] {\n  position: relative;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.now[_ngcontent-%COMP%] { padding: 16px; }\n.rail-lbl[_ngcontent-%COMP%] {\n  font-size: 10px;\n  letter-spacing: 1.4px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n}\n.breadcrumb[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin: 8px 0 12px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.breadcrumb[_ngcontent-%COMP%]   .sep[_ngcontent-%COMP%] { opacity: 0.5; }\n.nowcard[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n.nowcard[_ngcontent-%COMP%]   .ico[_ngcontent-%COMP%] { font-size: 26px; line-height: 1; }\n.nowcard[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 8px 0 2px; font-size: 17px; color: var(--mj-text-primary); }\n.nowcard[_ngcontent-%COMP%]   .type[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mj-text-secondary); }\n.nowcard[_ngcontent-%COMP%]   .meta[_ngcontent-%COMP%] { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--mj-text-secondary); }\n.nowcard[_ngcontent-%COMP%]   .meta[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { display: block; color: var(--mj-text-primary); font-size: 15px; font-variant-numeric: tabular-nums; }\n.barbg[_ngcontent-%COMP%] { height: 6px; border-radius: 6px; background: var(--mj-border-default); margin-top: 14px; overflow: hidden; }\n.barfg[_ngcontent-%COMP%] {\n  height: 100%;\n  width: 0;\n  background: linear-gradient(90deg, var(--mj-brand-primary), color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface)));\n}\n.log[_ngcontent-%COMP%] { flex: 1; overflow: auto; padding: 0 14px 16px; }\n.rail-lbl.sticky[_ngcontent-%COMP%] { position: sticky; top: 0; background: var(--mj-bg-surface); padding: 10px 0 8px; z-index: 1; }\n\n\n\n\n[_nghost-%COMP%]     .flogitem {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 9px;\n  border-radius: 8px;\n  margin-bottom: 3px;\n  font-size: 11.5px;\n  line-height: 1.25;\n  border: 1px solid transparent;\n}\n[_nghost-%COMP%]     .flogitem .flog-ico { flex: 0 0 auto; font-size: 11px; }\n[_nghost-%COMP%]     .flogitem .flog-name {\n  flex: 1 1 auto;\n  min-width: 0;\n  color: var(--mj-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n[_nghost-%COMP%]     .flogitem .flog-dur {\n  flex: 0 0 auto;\n  color: var(--mj-text-muted);\n  font-variant-numeric: tabular-nums;\n  font-size: 10.5px;\n}\n[_nghost-%COMP%]     .flogitem.heat {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n[_nghost-%COMP%]     .breadcrumb .sep { opacity: 0.5; margin: 0 1px; }\n\n\n\n[_nghost-%COMP%]     .ftree-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 5px 8px;\n  border-radius: 7px;\n  margin-bottom: 1px;\n  font-size: 11.5px;\n  line-height: 1.25;\n  cursor: pointer;\n  border-left: 2px solid transparent;\n}\n[_nghost-%COMP%]     .ftree-row:hover { background: var(--mj-bg-surface-hover); }\n[_nghost-%COMP%]     .ftree-ico { flex: 0 0 14px; width: 14px; text-align: center; font-size: 11px; }\n[_nghost-%COMP%]     .ftree-logo { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; object-fit: cover; }\n[_nghost-%COMP%]     .ftree-name {\n  flex: 1 1 auto; min-width: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n  color: var(--mj-text-secondary);\n}\n[_nghost-%COMP%]     .ftree-dur { flex: 0 0 auto; color: var(--mj-text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }\n[_nghost-%COMP%]     .ftree-row.ftree-pending { opacity: 0.5; }\n[_nghost-%COMP%]     .ftree-row.ftree-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border-left-color: var(--mj-brand-primary);\n}\n[_nghost-%COMP%]     .ftree-row.ftree-active .ftree-name { color: var(--mj-text-primary); font-weight: 600; }\n[_nghost-%COMP%]     .ftree-row.ftree-selected {\n  background: var(--mj-bg-surface-hover);\n  border-left-color: var(--mj-brand-primary);\n}\n[_nghost-%COMP%]     .ftree-row.ftree-selected .ftree-name { color: var(--mj-text-primary); }\n\n\n\n.flow-transport[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.pbtn[_ngcontent-%COMP%] {\n  width: 42px;\n  height: 42px;\n  border-radius: 50%;\n  border: none;\n  cursor: pointer;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 15px;\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transition: 0.15s;\n}\n.pbtn[_ngcontent-%COMP%]:hover:not(:disabled) { transform: translateY(-1px); }\n.pbtn[_ngcontent-%COMP%]:disabled, .ibtn[_ngcontent-%COMP%]:disabled { opacity: 0.45; cursor: not-allowed; }\n.ibtn[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 10px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n.ibtn[_ngcontent-%COMP%]:hover:not(:disabled) { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n\ninput[type=range].scrub[_ngcontent-%COMP%], input[type=range].speed[_ngcontent-%COMP%] {\n  -webkit-appearance: none;\n  appearance: none;\n  height: 6px;\n  border-radius: 6px;\n  background: var(--mj-border-default);\n  outline: none;\n  cursor: pointer;\n}\ninput[type=range].scrub[_ngcontent-%COMP%] { flex: 1; }\ninput[type=range].speed[_ngcontent-%COMP%] { width: 90px; }\ninput[type=range][_ngcontent-%COMP%]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-brand-primary);\n  cursor: pointer;\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 60%, transparent);\n}\ninput[type=range][_ngcontent-%COMP%]::-moz-range-thumb {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-brand-primary);\n  cursor: pointer;\n}\n.clock[_ngcontent-%COMP%] {\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  font-size: 14px;\n  min-width: 116px;\n  text-align: center;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 9px;\n  padding: 7px 10px;\n}\n.speedbox[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; color: var(--mj-text-muted); font-size: 12px; }\n.spdval[_ngcontent-%COMP%] { min-width: 34px; font-variant-numeric: tabular-nums; }\n\n\n\n.flow-legend[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 18px;\n  border-top: 1px solid var(--mj-border-subtle);\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.flow-legend[_ngcontent-%COMP%]   .lg[_ngcontent-%COMP%] { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }\n.legend-note[_ngcontent-%COMP%] { color: var(--mj-text-muted); }"], changeDetection: 0 }); }
+        } }, dependencies: [i1.NgClass, i2.LoadingComponent, i3.AIAgentRunStepDetailComponent, i4.FlameCascadeComponent, i5.SubwayLinesComponent, i6.ConstellationComponent, i7.FlowchartComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n.flow-cockpit[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n\n.flow-modes[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  padding: 10px 14px;\n  flex-wrap: wrap;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.flow-mode[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 999px;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  font-size: 12.5px;\n  cursor: pointer;\n  transition: 0.15s;\n}\n.flow-mode[_ngcontent-%COMP%]:hover:not(:disabled) { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n.flow-mode.on[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 14px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n.flow-mode.soon[_ngcontent-%COMP%] { cursor: not-allowed; opacity: 0.6; }\n.soon-tag[_ngcontent-%COMP%] {\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  padding: 2px 6px;\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n  color: var(--mj-text-muted);\n}\n\n\n.flow-main[_ngcontent-%COMP%] { flex: 1; display: flex; min-height: 0; }\n\n.flow-stage[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background:\n    radial-gradient(900px 520px at 72% -8%,\n      color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface-sunken)) 0%,\n      var(--mj-bg-surface-sunken) 60%);\n}\n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-flame[_ngcontent-%COMP%], \n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-subway[_ngcontent-%COMP%], \n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-constellation[_ngcontent-%COMP%] {\n  display: block;\n  position: absolute;\n  inset: 0;\n  padding: 10px 14px;\n}\n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-flowchart[_ngcontent-%COMP%] {\n  display: block;\n  position: absolute;\n  inset: 0;\n}\n.flow-hidden[_ngcontent-%COMP%] { display: none !important; }\n\n\n.flow-zoom[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 12px;\n  right: 14px;\n  z-index: 5;\n  display: flex;\n  gap: 6px;\n}\n.fz-btn[_ngcontent-%COMP%] {\n  width: 34px;\n  height: 34px;\n  border-radius: 9px;\n  border: 1px solid var(--mj-border-default);\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 88%, transparent);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  font-size: 13px;\n  backdrop-filter: blur(4px);\n}\n.fz-btn[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n\n\n.flow-resizer[_ngcontent-%COMP%] {\n  position: absolute;\n  left: -3px;\n  top: 0;\n  width: 7px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 6;\n}\n.flow-resizer[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent); }\n\n\n.flow-detail[_ngcontent-%COMP%] {\n  position: relative;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  display: flex;\n}\n\n\n.flow-detail[_ngcontent-%COMP%]    > mj-ai-agent-run-step-detail[_ngcontent-%COMP%] { flex: 1 1 auto; min-width: 0; }\n\n.flow-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 70%, transparent);\n}\n.flow-empty[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n.flow-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 34px; opacity: 0.5; }\n\n\n.flow-rail[_ngcontent-%COMP%] {\n  position: relative;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.now[_ngcontent-%COMP%] { padding: 16px; }\n.rail-lbl[_ngcontent-%COMP%] {\n  font-size: 10px;\n  letter-spacing: 1.4px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n}\n.breadcrumb[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin: 8px 0 12px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.breadcrumb[_ngcontent-%COMP%]   .sep[_ngcontent-%COMP%] { opacity: 0.5; }\n.nowcard[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n.nowcard[_ngcontent-%COMP%]   .ico[_ngcontent-%COMP%] { font-size: 26px; line-height: 1; }\n.nowcard[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 8px 0 2px; font-size: 17px; color: var(--mj-text-primary); }\n.nowcard[_ngcontent-%COMP%]   .type[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mj-text-secondary); }\n.nowcard[_ngcontent-%COMP%]   .meta[_ngcontent-%COMP%] { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--mj-text-secondary); }\n.nowcard[_ngcontent-%COMP%]   .meta[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { display: block; color: var(--mj-text-primary); font-size: 15px; font-variant-numeric: tabular-nums; }\n.barbg[_ngcontent-%COMP%] { height: 6px; border-radius: 6px; background: var(--mj-border-default); margin-top: 14px; overflow: hidden; }\n.barfg[_ngcontent-%COMP%] {\n  height: 100%;\n  width: 0;\n  background: linear-gradient(90deg, var(--mj-brand-primary), color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface)));\n}\n.log[_ngcontent-%COMP%] { flex: 1; overflow: auto; padding: 0 14px 16px; }\n.rail-lbl.sticky[_ngcontent-%COMP%] { position: sticky; top: 0; background: var(--mj-bg-surface); padding: 10px 0 8px; z-index: 1; }\n\n\n\n[_nghost-%COMP%]     .flogitem {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 9px;\n  border-radius: 8px;\n  margin-bottom: 3px;\n  font-size: 11.5px;\n  line-height: 1.25;\n  border: 1px solid transparent;\n}\n[_nghost-%COMP%]     .flogitem .flog-ico { flex: 0 0 auto; font-size: 11px; }\n[_nghost-%COMP%]     .flogitem .flog-name {\n  flex: 1 1 auto;\n  min-width: 0;\n  color: var(--mj-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n[_nghost-%COMP%]     .flogitem .flog-dur {\n  flex: 0 0 auto;\n  color: var(--mj-text-muted);\n  font-variant-numeric: tabular-nums;\n  font-size: 10.5px;\n}\n[_nghost-%COMP%]     .flogitem.heat {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n[_nghost-%COMP%]     .breadcrumb .sep { opacity: 0.5; margin: 0 1px; }\n\n\n[_nghost-%COMP%]     .ftree-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 5px 8px;\n  border-radius: 7px;\n  margin-bottom: 1px;\n  font-size: 11.5px;\n  line-height: 1.25;\n  cursor: pointer;\n  border-left: 2px solid transparent;\n}\n[_nghost-%COMP%]     .ftree-row:hover { background: var(--mj-bg-surface-hover); }\n[_nghost-%COMP%]     .ftree-ico { flex: 0 0 14px; width: 14px; text-align: center; font-size: 11px; }\n[_nghost-%COMP%]     .ftree-logo { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; object-fit: cover; }\n[_nghost-%COMP%]     .ftree-name {\n  flex: 1 1 auto; min-width: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n  color: var(--mj-text-secondary);\n}\n[_nghost-%COMP%]     .ftree-dur { flex: 0 0 auto; color: var(--mj-text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }\n[_nghost-%COMP%]     .ftree-row.ftree-pending { opacity: 0.5; }\n[_nghost-%COMP%]     .ftree-row.ftree-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border-left-color: var(--mj-brand-primary);\n}\n[_nghost-%COMP%]     .ftree-row.ftree-active .ftree-name { color: var(--mj-text-primary); font-weight: 600; }\n[_nghost-%COMP%]     .ftree-row.ftree-selected {\n  background: var(--mj-bg-surface-hover);\n  border-left-color: var(--mj-brand-primary);\n}\n[_nghost-%COMP%]     .ftree-row.ftree-selected .ftree-name { color: var(--mj-text-primary); }\n\n\n.flow-transport[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.pbtn[_ngcontent-%COMP%] {\n  width: 42px;\n  height: 42px;\n  border-radius: 50%;\n  border: none;\n  cursor: pointer;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 15px;\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transition: 0.15s;\n}\n.pbtn[_ngcontent-%COMP%]:hover:not(:disabled) { transform: translateY(-1px); }\n.pbtn[_ngcontent-%COMP%]:disabled, .ibtn[_ngcontent-%COMP%]:disabled { opacity: 0.45; cursor: not-allowed; }\n.ibtn[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 10px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n.ibtn[_ngcontent-%COMP%]:hover:not(:disabled) { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n\ninput[type=range].scrub[_ngcontent-%COMP%], input[type=range].speed[_ngcontent-%COMP%] {\n  -webkit-appearance: none;\n  appearance: none;\n  height: 6px;\n  border-radius: 6px;\n  background: var(--mj-border-default);\n  outline: none;\n  cursor: pointer;\n}\ninput[type=range].scrub[_ngcontent-%COMP%] { flex: 1; }\ninput[type=range].speed[_ngcontent-%COMP%] { width: 90px; }\ninput[type=range][_ngcontent-%COMP%]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-brand-primary);\n  cursor: pointer;\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 60%, transparent);\n}\ninput[type=range][_ngcontent-%COMP%]::-moz-range-thumb {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-brand-primary);\n  cursor: pointer;\n}\n.clock[_ngcontent-%COMP%] {\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  font-size: 14px;\n  min-width: 116px;\n  text-align: center;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 9px;\n  padding: 7px 10px;\n}\n.speedbox[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; color: var(--mj-text-muted); font-size: 12px; }\n.spdval[_ngcontent-%COMP%] { min-width: 34px; font-variant-numeric: tabular-nums; }\n\n\n.flow-legend[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 18px;\n  border-top: 1px solid var(--mj-border-subtle);\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.flow-legend[_ngcontent-%COMP%]   .lg[_ngcontent-%COMP%] { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }\n.legend-note[_ngcontent-%COMP%] { color: var(--mj-text-muted); }"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunFlowComponent, [{
         type: Component,