/* Motore del flusso stile n8n con la scheda che viaggia.
   Tutte le regole sono sotto .ia-flow per non toccare il resto del sito.
   Usato da demo-dettaglio.html (sito) e da prototipi/flussi (prototipo). */
.ia-flow{--orange-lighter:#FBF1E7;--edge:#CFC7BA;--ease:cubic-bezier(.4,0,.2,1)}
.ia-flow button{font:inherit;color:inherit}
.ia-flow .legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--ink-light)}
.ia-flow .legend span{display:flex;align-items:center;gap:6px}
.ia-flow .legend i{display:block;width:14px;height:14px;border-radius:4px;border:2px solid}
.ia-flow .legend .k-in{border-color:var(--ink-light);border-radius:7px 3px 3px 7px}
.ia-flow .legend .k-rule{border-color:var(--green)}
.ia-flow .legend .k-ai{border-color:var(--orange);background:var(--orange-lighter)}
.ia-flow .legend .k-human{border-color:var(--ink);background:var(--ink)}
.ia-flow .flow-box{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:clip}
.ia-flow .flow-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--cream)}
.ia-flow .tb-left{display:flex;align-items:center;gap:8px}
.ia-flow .fbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--white);border-radius:10px;padding:8px 13px;font-size:14px;font-weight:600;cursor:pointer}
.ia-flow .fbtn:hover{border-color:var(--green);color:var(--green)}
.ia-flow .fbtn svg{width:16px;height:16px}
.ia-flow .fbtn-primary{background:var(--green);border-color:var(--green);color:#fff}
.ia-flow .fbtn-primary:hover{background:var(--green-dark);color:#fff}
.ia-flow .stepcount{font-size:13px;font-weight:600;color:var(--ink-lighter);font-variant-numeric:tabular-nums}

.ia-flow .canvas{position:relative;padding:22px 10px;background-color:#FBF9F5;background-image:radial-gradient(#DDD6CA 1px,transparent 1px);background-size:18px 18px}
.ia-flow .edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ia-flow .edges path{fill:none;stroke:var(--edge);stroke-width:2}
.ia-flow .edges path.branch{stroke-dasharray:5 5}
.ia-flow .edges path.done{stroke:var(--green)}
.ia-flow .edges path.run{stroke:var(--green);stroke-dasharray:6 6;animation:iaf-dash .6s linear infinite}
@keyframes iaf-dash{to{stroke-dashoffset:-12}}
.ia-flow .edges text{font-size:11.5px;font-weight:600;fill:var(--ink-lighter);paint-order:stroke;stroke:#FBF9F5;stroke-width:5px;stroke-linejoin:round}
.ia-flow .token{fill:var(--orange);filter:drop-shadow(0 0 6px rgba(180,91,26,.6))}

.ia-flow .stages{position:relative;display:grid;grid-auto-flow:row;gap:22px 0}
.ia-flow .stage{display:grid;grid-template-columns:96px 1fr;column-gap:10px;row-gap:14px;align-items:start;justify-items:start}
.ia-flow .node{grid-column:var(--rv);grid-row:var(--rr);display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;width:100%;max-width:120px;text-align:center}
.ia-flow .ico{position:relative;width:56px;height:56px;border-radius:14px;background:var(--white);border:2px solid var(--edge);display:grid;place-items:center;transition:transform .25s var(--ease),box-shadow .25s,background .25s;box-shadow:0 2px 6px rgba(20,20,43,.06)}
.ia-flow .ico svg{width:24px;height:24px}
.ia-flow .lbl{font-size:12.5px;font-weight:600;line-height:1.25;color:var(--ink-light)}
.ia-flow .node:hover .ico{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,20,43,.12)}
.ia-flow .node:focus-visible{outline:none}
.ia-flow .node:focus-visible .ico{outline:3px solid var(--green);outline-offset:3px}
.ia-flow .k-in .ico{border-color:var(--ink-light);border-radius:28px 14px 14px 28px;color:var(--ink-light)}
.ia-flow .k-rule .ico{border-color:var(--green);color:var(--green)}
.ia-flow .k-ai .ico{border-color:var(--orange);color:var(--orange);background:var(--orange-lighter)}
.ia-flow .k-human .ico{border-color:var(--ink);background:var(--ink);color:#fff}
.ia-flow .node.side .ico{width:46px;height:46px;opacity:.85}
.ia-flow .node.side .ico svg{width:20px;height:20px}
.ia-flow .node.side .lbl{font-weight:500;color:var(--ink-lighter)}
.ia-flow .when{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-light);background:var(--cream-dark);border:1px dashed var(--edge);border-radius:99px;padding:1px 8px;white-space:nowrap}
.ia-flow .node.done .ico::after{content:"";position:absolute;right:-6px;top:-6px;width:16px;height:16px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;border:2px solid #fff}
.ia-flow .node.active .ico{transform:scale(1.12);box-shadow:0 0 0 6px rgba(27,94,75,.16),0 8px 20px rgba(20,20,43,.16)}
.ia-flow .node.active .lbl{color:var(--ink)}
.ia-flow .node.sel .ico{box-shadow:0 0 0 3px var(--white),0 0 0 6px var(--green)}
.ia-flow .node.sel .lbl{color:var(--green)}
.ia-flow .node.flash .ico{animation:iaf-flash 1.1s var(--ease) 2}
@keyframes iaf-flash{50%{box-shadow:0 0 0 7px rgba(180,91,26,.22)}}
.ia-flow .canvas.playing .node:not(.active):not(.done) .ico{opacity:.55}

@media(min-width:760px){
  .ia-flow .poster{place-items:center;padding-top:0}
  .ia-flow .canvas{padding:290px 18px 24px;overflow-x:auto}
  .ia-flow .stages{grid-auto-flow:column;grid-auto-columns:minmax(104px,1fr);gap:0 8px}
  .ia-flow .stage{grid-template-columns:none;grid-template-rows:repeat(var(--rows),142px);align-items:start}
  .ia-flow .node{grid-column:auto;grid-row:var(--r)}
}

.ia-flow .poster{position:absolute;inset:0;display:grid;place-items:start center;padding-top:60px;background:rgba(251,249,245,.72);backdrop-filter:blur(1.5px);z-index:3}
.ia-flow .poster-in{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:16px}
.ia-flow .play-big{width:74px;height:74px;border-radius:50%;border:0;background:var(--green);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(27,94,75,.35);transition:transform .2s}
.ia-flow .play-big:hover{transform:scale(1.06)}
.ia-flow .play-big svg{width:30px;height:30px;margin-left:4px}
.ia-flow .poster-t{font-weight:700;font-size:16px}
.ia-flow .poster-s{font-size:14px;color:var(--ink-light)}
.ia-flow .linkbtn{background:none;border:0;padding:0;color:var(--green);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* loghi dei servizi */
.ia-flow .apps{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);display:flex;gap:3px;white-space:nowrap}
.ia-flow .app{width:22px;height:22px;border-radius:7px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 1px 3px rgba(20,20,43,.1)}
.ia-flow .app .logo{width:14px;height:14px;object-fit:contain;display:block}
.ia-flow .app.wide{width:auto;padding:0 6px}
.ia-flow .app.wide .logo{width:auto;height:11px}
.ia-flow .app.big .logo{width:19px;height:19px}
.ia-flow .node.has-apps{gap:17px}
.ia-flow .node.side .apps{bottom:-10px}
.ia-flow .m-from .logo{width:14px;height:14px;flex:none;object-fit:contain}
.ia-flow .d-apps{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ia-flow .d-app{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;background:var(--cream);border:1px solid var(--line);border-radius:99px;padding:4px 11px 4px 9px}
.ia-flow .d-app .logo{width:16px;height:16px;object-fit:contain}
.ia-flow .d-app .logo.wide{width:auto;height:14px}
.ia-flow .d-note{font-size:13px !important;color:var(--ink-lighter) !important;margin-top:6px !important}

/* scheda viva: il caso che viaggia sul flusso */
.ia-flow .live{position:absolute;z-index:4;width:300px;max-width:calc(100% - 16px);background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 34px rgba(20,20,43,.16);padding:12px 12px 10px;transform:translateY(-100%);opacity:0;pointer-events:none;transition:left 1s var(--ease),top 1s var(--ease),opacity .3s}
.ia-flow .live.show{opacity:1;pointer-events:auto}
.ia-flow .lv-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:var(--cream-dark);color:var(--ink-light);display:grid;place-items:center;cursor:pointer}
.ia-flow .lv-x:hover{background:var(--line);color:var(--ink)}
.ia-flow .lv-x svg{width:16px;height:16px}
.ia-flow .live.under{transform:none}
.ia-flow .live.right{transform:none;max-width:none}
.ia-flow .live.right .tail{left:-8px;top:24px;bottom:auto;transform:rotate(135deg)}
.ia-flow .lv-cap,.ia-flow .lv-more{display:none}
@media(max-width:759px){
  .ia-flow .lv-cap{display:block;font-size:13px;line-height:1.4;color:var(--ink);padding:0 30px 9px 0;margin-bottom:9px;border-bottom:1px solid var(--line)}
  .ia-flow .lv-cap b{display:block;font-size:11.5px;color:var(--green);margin-bottom:2px}
  .ia-flow .lv-more{display:block;width:100%;margin-top:8px;border:1px solid var(--line);background:var(--cream);border-radius:9px;padding:7px;font-size:12.5px;font-weight:700;color:var(--green);cursor:pointer}
  .ia-flow .live{padding:10px 10px 10px}
  .ia-flow .live .lv-head{padding-right:0}
  .ia-flow .canvas{padding-left:12px}
}
.ia-flow .live .tail{position:absolute;bottom:-8px;width:14px;height:14px;background:var(--white);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg);transition:left 1s var(--ease)}
.ia-flow .live.under .tail{bottom:auto;top:-8px;transform:translateX(-50%) rotate(225deg)}
.ia-flow .lv-head{display:flex;align-items:center;gap:9px;padding:0 36px 9px 0;border-bottom:1px solid var(--line)}
.ia-flow .lv-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--cream-dark);color:var(--ink-light);transition:background .4s,color .4s}
.ia-flow .lv-av svg{width:16px;height:16px}
.ia-flow .lv-av.known{background:var(--green);color:#fff}
.ia-flow .lv-name{font-size:14px;font-weight:700;line-height:1.2}
.ia-flow .lv-sub{font-size:11.5px;color:var(--ink-lighter)}
.ia-flow .lv-body{padding:10px 0 4px;min-height:44px}
.ia-flow .lv-body.enter{animation:iaf-pop .4s var(--ease)}
/* momenti */
.ia-flow .m-from{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-lighter);margin-bottom:5px}
.ia-flow .m-from svg{width:13px;height:13px}
.ia-flow .m-bubble{font-size:13.5px;line-height:1.45;background:var(--cream-dark);border-radius:4px 14px 14px 14px;padding:8px 11px;min-height:34px}
.ia-flow .m-bubble.out{background:var(--green-light);border-radius:14px 4px 14px 14px}
.ia-flow .m-bubble.wa{background:#DCF5D9}
.ia-flow .caret::after{content:"";display:inline-block;width:2px;height:1em;background:var(--ink);margin-left:1px;vertical-align:-2px;animation:iaf-blink .8s steps(1) infinite}
@keyframes iaf-blink{50%{opacity:0}}
.ia-flow .m-att{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;font-weight:600;color:var(--ink-light);background:var(--white);border:1px solid var(--line);border-radius:8px;padding:3px 8px}
.ia-flow .m-att svg{width:13px;height:13px;color:#C0392B}
.ia-flow .m-client{font-family:var(--font-h);font-size:21px;line-height:1.2}
.ia-flow .m-line{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-light);margin-top:4px}
.ia-flow .m-line svg{width:14px;height:14px;color:var(--green);flex:none}
.ia-flow .m-line.no svg{color:var(--orange)}
.ia-flow .m-tags{display:flex;flex-wrap:wrap;gap:6px}
.ia-flow .m-tag{font-size:13px;font-weight:700;padding:5px 10px;border-radius:9px;background:var(--orange-lighter);color:var(--orange);border:1px solid var(--orange-light);opacity:0;animation:iaf-tagin .35s var(--ease) forwards}
@keyframes iaf-tagin{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.ia-flow .m-opt{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 8px;border-radius:8px;color:var(--ink-lighter)}
.ia-flow .m-opt svg{width:15px;height:15px}
.ia-flow .m-opt.on{background:var(--green-light);color:var(--green);font-weight:700}
.ia-flow .m-file{display:flex;gap:10px;align-items:center}
.ia-flow .m-file .pdf{flex:none;width:38px;height:46px;border-radius:6px;background:#FDECEA;color:#C0392B;display:grid;place-items:center;font-size:10px;font-weight:800;border:1px solid #F5C6C0}
.ia-flow .m-file b{display:block;font-size:13px;word-break:break-all}
.ia-flow .m-file span{display:block;font-size:12.5px;color:var(--ink-light)}
.ia-flow .m-approve{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;padding:9px;font-size:14px;font-weight:700;background:var(--ink);color:#fff;animation:iaf-press 1.8s var(--ease) forwards}
.ia-flow .m-approve svg{width:16px;height:16px}
@keyframes iaf-press{0%,45%{background:var(--ink);transform:none}52%{transform:scale(.94)}60%,100%{background:var(--green);transform:none}}
.ia-flow .m-approve .a2{display:none}
.ia-flow .m-approve.static{animation:none;background:var(--green)}
.ia-flow .lv-body.static .m-tag{animation:none;opacity:1}
.ia-flow .m-approve.done .a1{display:none}.m-approve.done .a2{display:inline}
.ia-flow .m-big{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--green)}
.ia-flow .m-big svg{width:20px;height:20px}
.ia-flow .m-photo{display:flex;gap:9px;align-items:center}
.ia-flow .m-photo .ph{flex:none;width:46px;height:58px;border-radius:6px;background:repeating-linear-gradient(0deg,#fff 0 5px,#EEE9E1 5px 6px);border:1px solid var(--line);display:grid;place-items:center}
.ia-flow .m-photo .ph svg{width:16px;height:16px;color:var(--ink-lighter)}
.ia-flow .m-bar{height:8px;border-radius:8px;background:var(--cream-dark);overflow:hidden;margin-top:8px}
.ia-flow .m-bar i{display:block;height:100%;background:var(--green);border-radius:8px;transition:width 1.4s var(--ease)}

/* lower area: caption/detail + packet */
.ia-flow .below{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:760px){.ia-flow .below{grid-template-columns:1.45fr 1fr}}
.ia-flow .pane{padding:20px}
.ia-flow .pane + .pane{border-top:1px solid var(--line)}
@media(min-width:760px){.ia-flow .pane + .pane{border-top:0;border-left:1px solid var(--line)}}
.ia-flow .pane-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-lighter);margin:0 0 10px}
.ia-flow .cap-step{font-size:13px;font-weight:700;color:var(--green)}
.ia-flow .cap-text{font-family:var(--font-h);font-size:clamp(20px,2.3vw,25px);line-height:1.3;margin:6px 0 0}

.ia-flow .d-head{display:flex;align-items:center;gap:12px}
.ia-flow .d-head .ico{width:44px;height:44px;flex:none;border-radius:12px}
.ia-flow .d-head .ico svg{width:20px;height:20px}
.ia-flow .d-head.k-in .ico{border-radius:22px 12px 12px 22px}
.ia-flow .d-title{font-size:19px;font-weight:700;line-height:1.25;margin:0}
.ia-flow .who{display:inline-block;margin-top:3px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px}
.ia-flow .who.k-in{background:var(--cream-dark);color:var(--ink-light)}
.ia-flow .who.k-rule{background:var(--green-light);color:var(--green)}
.ia-flow .who.k-ai{background:var(--orange-lighter);color:var(--orange)}
.ia-flow .who.k-human{background:var(--ink);color:#fff}
.ia-flow .d-grid{display:grid;gap:14px;margin-top:16px}
.ia-flow .d-row h5{margin:0 0 3px;font-size:13px;font-weight:700;color:var(--ink)}
.ia-flow .d-row p{margin:0;font-size:15px;color:var(--ink-light)}
.ia-flow .d-warn{background:var(--orange-lighter);border:1px solid var(--orange-light);border-radius:12px;padding:12px 14px}
.ia-flow .d-warn h5{display:flex;align-items:center;gap:6px;color:var(--orange)}
.ia-flow .d-warn h5 svg{width:15px;height:15px}
.ia-flow .d-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.ia-flow .d-nav .fbtn[disabled]{opacity:.4;pointer-events:none}

.ia-flow .packet{display:flex;flex-direction:column;gap:6px}
.ia-flow .pk{margin:0;display:grid;grid-template-columns:118px 1fr;gap:10px;font-size:14px;padding:7px 10px;border-radius:9px;background:var(--cream);transition:background .6s}
.ia-flow .pk dt{color:var(--ink-lighter);font-weight:500}
.ia-flow .pk dd{margin:0;font-weight:600;color:var(--ink);word-break:break-word}
.ia-flow .pk.new{background:var(--green-light);animation:iaf-pop .45s var(--ease)}
@keyframes iaf-pop{from{transform:translateY(4px);opacity:0}}
.ia-flow .pk-empty{font-size:14px;color:var(--ink-lighter)}
.ia-flow .quote dd{font-weight:500;font-style:italic}

/* mobile: sticky caption + sheet */
.ia-flow .mcap{display:none}
@media(max-width:759px){
  .ia-flow .below{display:none}
  .ia-flow .mcap{display:none;position:sticky;bottom:12px;z-index:5;margin:12px 10px 0;gap:10px;align-items:center;background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 10px 28px rgba(20,20,43,.3)}
  .ia-flow .mcap .t{flex:1;font-size:14.5px;line-height:1.4}
  .ia-flow .mcap .t b{display:block;font-size:12px;color:#A9D5C6;margin-bottom:2px}
  .ia-flow .mcap .fbtn{background:transparent;border-color:rgba(255,255,255,.3);color:#fff;padding:7px 9px}
}
.ia-flow .sheet-bg{position:fixed;inset:0;background:rgba(20,20,43,.35);z-index:20;opacity:0;pointer-events:none;transition:opacity .25s}
.ia-flow .sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-height:82vh;overflow-y:auto;background:var(--white);border-radius:20px 20px 0 0;padding:10px 18px 24px;transform:translateY(100%);transition:transform .3s var(--ease)}
.ia-flow .sheet:not(.open){visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
.ia-flow .sheet.open{transform:none}.sheet-bg.open{opacity:1;pointer-events:auto}
.ia-flow .sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 12px}
.ia-flow .sheet-close{position:absolute;right:12px;top:12px;border:0;background:var(--cream-dark);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.ia-flow .sheet-close svg{width:18px;height:18px}
.ia-flow .sheet .packet{margin-top:6px}

/* video + guardrails */
.ia-flow .video-box{background:var(--ink);border-radius:20px;overflow:hidden;aspect-ratio:16/10;display:grid;place-items:center}
.ia-flow .video-box video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.ia-flow .video-todo{color:#fff;text-align:center;padding:24px;max-width:460px}
.ia-flow .video-todo svg{width:34px;height:34px;color:#A9D5C6}
.ia-flow .video-todo p{margin:8px 0 0;color:#C9C9D6;font-size:15px}
.ia-flow .video-todo strong{font-size:17px}
.ia-flow .guard{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.ia-flow .guard{grid-template-columns:1fr 1fr}}
.ia-flow .g{display:flex;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.ia-flow .g svg{flex:none;width:20px;height:20px;color:var(--green);margin-top:2px}
.ia-flow .g p{margin:0;font-size:15px;color:var(--ink-light)}
.ia-flow .g b{color:var(--ink)}
.ia-flow .sim{margin-top:16px;font-size:14px;color:var(--ink-lighter);background:var(--cream-dark);border-radius:12px;padding:12px 14px}