/* CodeNSM — dagre-based flow renderer (flow-render.js) styling.
   Loaded after product.css / demo.css; only touches the flow canvas so it
   doesn't disturb the mermaid-pool card chrome those files already define. */

.mermaid-canvas.flow-canvas{
  overflow:auto;
  min-height:160px;
  max-height:70vh;
  cursor:grab;
  background:#0a0c11;
  border-radius:10px;
}
.mermaid-canvas.flow-canvas.flow-dragging{cursor:grabbing}
.mermaid-canvas.flow-canvas svg{
  display:block;
  margin:0 auto;
  width:100%;
  height:auto;
  min-height:160px;
  max-width:100%;
  touch-action:none;
}

.flow-fallback-list{padding:4px 0}
.flow-fallback-steps{
  list-style:none;margin:10px 0 0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.flow-fallback-step{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:.78rem;padding:8px 12px;border-radius:8px;
  background:#11151d;border:1px solid rgba(255,255,255,.07);
  color:#e7ebf3;
}
.flow-fallback-type{
  flex:0 0 auto;text-transform:uppercase;letter-spacing:.04em;
  font-size:.62rem;padding:2px 7px;border-radius:5px;
  color:#9fb0d0;background:rgba(255,255,255,.06);
}
.flow-fallback-step.type-start .flow-fallback-type,
.flow-fallback-step.type-end .flow-fallback-type{color:#b7f2d9;background:rgba(126,240,201,.14)}
.flow-fallback-step.type-decision .flow-fallback-type{color:#ffe6bd;background:rgba(255,217,160,.14)}
.flow-fallback-step.type-loop .flow-fallback-type{color:#e4dcfb;background:rgba(198,184,242,.14)}
.flow-fallback-step.type-guard .flow-fallback-type{color:#a9dfc7;background:rgba(91,169,140,.14)}
.flow-fallback-step.type-error .flow-fallback-type{color:#ffd0da;background:rgba(255,176,192,.14)}
.flow-fallback-label{color:#dcf1ff;word-break:break-word}