/* VideoBatcher Agency demo: a generic AI chat (left) drives the desktop app replica (right).
   Scoped to .vba; app tokens mirror ui_theme COLORS. Markup defaults to the completed-job frame
   (step 6); the controller in _agency_demo.html toggles .on/.done from data-on/data-done lists. */
.vba{container-type:inline-size;position:relative;text-align:left;font-family:Poppins,system-ui,sans-serif}
.vba-ais{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.8rem;font-size:.75rem;color:#c7d2fe}
.vba-ais span{margin-right:.25rem}
.vba-ais i{font-style:normal;padding:.2rem .7rem;border-radius:9999px;border:1px solid rgba(129,140,248,.35);transition:background .35s,color .35s,border-color .35s}
.vba-ais i.on{background:#818cf8;border-color:#818cf8;color:#0b1020;font-weight:600}

.vba-stage{--bg:#0b0f17;--card:#121a28;--card2:#161f30;--bd:#1c2740;--acc:#5b87f5;--pur:#8b5cf6;--pink:#f1648a;--teal:#3ed6c2;--ok:#34d399;--tx:#e9edf5;--tx2:#aab3c5;--mut:#5d6677;--ai:#a5b4fc;
  display:flex;gap:1.1em;height:37em;font-size:clamp(7px,1.15cqw,12.5px);line-height:1.3;color:var(--tx)}
.vba-stage i,.vba-stage em{font-style:normal}

/* AI chat window (deliberately generic: any connected AI app) */
.vba-chat{flex:0 0 39%;min-width:0;display:flex;flex-direction:column;background:#141519;border:1px solid #2a2c34;border-radius:1em;overflow:hidden;box-shadow:0 2em 4em -2em rgba(0,0,0,.75)}
.vba-ct{display:flex;align-items:center;gap:.55em;padding:.7em .9em;border-bottom:1px solid #24262e;font-size:.82em;white-space:nowrap}
.vba-ct b{font-weight:600}
.vba-spark{display:grid;place-items:center;flex:none;width:1.8em;height:1.8em;border-radius:.55em;background:linear-gradient(135deg,#818cf8,#c084fc);color:#fff;font-size:.9em}
.vba-conn{margin-left:auto;display:flex;align-items:center;gap:.45em;min-width:0;overflow:hidden;font-size:.8em;color:#a3a8b8;border:1px solid #30323b;border-radius:1em;padding:.25em .7em}
.vba-conn::before{content:"";flex:none;width:.55em;height:.55em;border-radius:50%;background:var(--ok);box-shadow:0 0 0 .2em rgba(52,211,153,.18)}
.vba-conn small{font-size:1em;color:#6f7484}
.vba-msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:0 .9em .1em;font-size:.86em}
.vba-m{flex:none;max-height:0;opacity:0;overflow:hidden;transform:translateY(.7em);transition:max-height .5s ease,margin .5s ease,opacity .35s ease .1s,transform .35s ease .1s}
.vba-m.on{max-height:16em;margin-top:.75em;opacity:1;transform:none}
.vba-u{align-self:flex-end;max-width:88%}
.vba-u>div{background:#2c3040;color:#f0f2f8;border-radius:1.1em 1.1em .35em 1.1em;padding:.6em .85em}
.vba-link{display:inline-block;margin-top:.4em;font-size:.88em;color:#a5b4fc;background:rgba(129,140,248,.13);border-radius:.45em;padding:.15em .5em;text-decoration:underline;text-underline-offset:.15em}
.vba-a>div{color:#d3d7e2;padding:0 .1em}
.vba-a b{color:#fff;font-weight:600}
.vba-a u{text-decoration:none;color:var(--ai)}
.vba-who{display:block;font-size:.85em;font-weight:600;color:var(--ai);margin-bottom:.15em}
.vba-tool>div{display:flex;align-items:center;gap:.5em;background:#1b1c23;border:1px solid #2b2e38;border-radius:.7em;padding:.45em .6em;white-space:nowrap;font-size:.92em}
.vba-tool span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.vba-tool small{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:.85em;color:#868b9b}
.vba-tag{flex:none;font-size:.78em;font-weight:600;color:var(--ai);background:rgba(129,140,248,.13);border-radius:.4em;padding:.1em .45em}
.vba-st{flex:none;position:relative;width:1.15em;height:1.15em;border-radius:50%;border:.16em solid #3a3e4c;border-top-color:var(--ai);animation:vbaSpin .8s linear infinite}
.vba-st::after{content:"";position:absolute;left:30%;top:10%;width:30%;height:55%;border:solid #062016;border-width:0 .14em .14em 0;transform:rotate(45deg);opacity:0}
.vba-tool.done .vba-st{border-color:var(--ok);background:var(--ok);animation:vbaPop .4s ease-out}
.vba-tool.done .vba-st::after{opacity:1}
.vba-chips{display:flex;flex-wrap:wrap;gap:.35em;margin-top:.45em}
.vba-chips i{font-size:.9em;color:#e3e6ff;background:#22253a;border:1px solid #3c4272;border-radius:1em;padding:.2em .7em;opacity:0;transform:translateY(.4em) scale(.92);transition:opacity .3s,transform .3s}
.vba-m.on .vba-chips i{opacity:1;transform:none}
.vba-m.on .vba-chips i:nth-child(2){transition-delay:.3s}
.vba-m.on .vba-chips i:nth-child(3){transition-delay:.6s}
.vba-m.on .vba-chips i:nth-child(4){transition-delay:.9s}
.vba-m.on .vba-chips i:nth-child(5){transition-delay:1.2s}
.vba-in{display:flex;align-items:flex-end;gap:.5em;margin:.7em .9em .85em;background:#1d1f27;border:1px solid #31343f;border-radius:1.1em;padding:.5em .5em .5em .9em;font-size:.84em}
.vba-ty{flex:1;min-width:0;align-self:center;display:none;flex-direction:column;justify-content:flex-end;max-height:3.9em;overflow:hidden;color:#eef0f6}
.vba-in.full .vba-ty{display:flex}
.vba-in.typing .vba-ty span::after{content:"";display:inline-block;width:.08em;height:1.05em;margin-left:.06em;vertical-align:-.18em;background:currentColor;animation:vbaBlink 1s steps(1) infinite}
.vba-ph{flex:1;min-width:0;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6c7182}
.vba-in.full .vba-ph{display:none}
.vba-send{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:#353844;color:#9aa0b0;font-weight:700;transition:background .25s,color .25s,transform .2s}
.vba-in.full .vba-send,.vba-send.press{background:#818cf8;color:#0b1020}
.vba-send.press{transform:scale(.82)}

/* VideoBatcher desktop window (mirrors main_customtkinter.py + agency_ui.py) */
.vba-app{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;gap:.5em;background:var(--bg);border:1px solid var(--bd);border-radius:1em;padding:.6em;overflow:hidden;box-shadow:0 2em 4em -2em rgba(0,0,0,.75)}
.vba-top{display:flex;align-items:center;gap:.6em;padding:.1em .3em}
.vba-top img{width:2.1em;height:2.1em;border-radius:.5em}
.vba-top b{font-weight:700;white-space:nowrap}
.vba-mode{margin-left:auto;display:flex;align-items:center;gap:.45em;min-width:0;overflow:hidden;white-space:nowrap;font-size:.62em;font-weight:600;color:var(--teal);background:rgba(62,214,194,.07);border:1px solid rgba(62,214,194,.35);border-radius:1em;padding:.3em .8em}
.vba-mode::before{content:"";flex:none;width:.55em;height:.55em;border-radius:50%;background:var(--teal)}
.vba-tbar{position:relative;flex:none;height:2.3em}
.vba-tb{position:absolute;inset:0 .3em;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .3s}
.vba-tb.on{opacity:1}
.vba-tb b{font-size:.95em;font-weight:700}
.vba-tb small{font-size:.6em;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vba-body{flex:1;min-height:0;display:flex;gap:.6em}
.vba-card{background:var(--card);border:1px solid var(--bd);border-radius:.8em}
.vba-nav{width:9.6em;flex:none;padding:.6em 0;display:flex;flex-direction:column;gap:.15em}
.vba-nav small{font-size:.58em;letter-spacing:.1em;color:var(--mut);font-weight:700;padding:.4em 1.6em .8em}
.vba-nav i{font-size:.74em;font-weight:600;color:var(--tx2);padding:.62em .8em;margin:0 .45em;border-radius:.6em;display:flex;align-items:center;gap:.6em;white-space:nowrap;transition:background .3s,color .3s}
.vba-nav i::before{content:attr(data-i);width:1em;text-align:center;opacity:.9}
.vba-nav i.on{background:var(--acc);color:#fff}
.vba-pages{flex:1;min-width:0;position:relative}
.vba-page{position:absolute;inset:0;display:flex;flex-direction:column;gap:.5em;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.vba-page.on{opacity:1;visibility:visible;transition:opacity .35s}
.vba-sw>span{display:none}
.vba-sw>span.on{display:inline}

/* AI Automation → Jobs */
.vba-h{padding:.1em .2em 0}
.vba-h small{display:block;font-size:.58em;font-weight:700;letter-spacing:.08em;color:var(--teal);white-space:pre}
.vba-h b{display:block;font-size:1.02em;font-weight:700;margin-top:.1em;white-space:nowrap}
.vba-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.3em}
.vba-tabs i{font-size:.64em;text-align:center;padding:.5em .3em;border-radius:.55em;background:var(--card2);border:1px solid var(--bd);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vba-tabs i.on{background:var(--acc);border-color:var(--acc);color:#fff}
.vba-jobs{flex:none;padding:.55em;display:flex;flex-direction:column;gap:.4em}
.vba-cnt{position:relative;height:1.35em;font-size:.6em;color:var(--tx2)}
.vba-cnt span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transition:opacity .3s}
.vba-cnt span.on{opacity:1}
.vba-slot{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;margin-bottom:-.4em;transition:grid-template-rows .45s ease,margin .45s ease}
.vba-slot.on{grid-template-rows:minmax(0,1fr);margin-bottom:0}
.vba-job{min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--card2);border:1px solid var(--bd);border-radius:.6em;padding:.42em .7em;font-size:.62em;line-height:1.4;transition:background .4s,border-color .4s}
.vba-job b{font-weight:600}
.vba-job small{font-size:1em;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vba-job.sel{background:var(--acc);border-color:var(--acc)}
.vba-job.sel small{color:#dce6ff}
.vba-run{flex:1;min-height:0;padding:.55em .65em;display:flex;flex-direction:column;gap:.45em;opacity:0;transform:translateY(.6em);transition:opacity .4s,transform .4s}
.vba-run.on{opacity:1;transform:none}
.vba-rh{display:flex;align-items:center;gap:.5em;font-size:.64em;white-space:nowrap}
.vba-rh>b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vba-rh em{margin-left:auto;color:var(--tx2);font-variant-numeric:tabular-nums}
.vba-rh em b{color:var(--tx);font-weight:600}
.vba-bar{display:block;flex:none;height:.42em;border-radius:1em;background:#1b2436;overflow:hidden}
.vba-bar b{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--acc),var(--pur),var(--pink))}
.vba-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.35em}
.vba-th{position:relative;display:block;overflow:hidden;border-radius:.45em;aspect-ratio:9/16;background:#151d30;opacity:0;transform:scale(.8);transition:opacity .3s,transform .35s cubic-bezier(.3,1.5,.6,1);--fx:1;--zm:1;--b:1;--c:1;--s:1;--sp:0;--h:0deg}
.vba-th.on{opacity:1;transform:none}
/* Photo layer: the client's source frame (--p, else the demo-wide --vba-photo), mirrored/zoomed/graded per
   variation through variables so modifiers compose; captions sit above it, never over the face. */
.vba-th::before{content:"";position:absolute;inset:0;background:var(--p,var(--vba-photo,linear-gradient(165deg,#223a8a,#5b3a8f 48%,#f1648a))) 50% 30%/cover no-repeat;transform:scale(calc(var(--fx)*var(--zm)),var(--zm));filter:brightness(var(--b)) contrast(var(--c)) saturate(var(--s)) sepia(var(--sp)) hue-rotate(var(--h))}
.vba-th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 30%,transparent 72%,rgba(0,0,0,.35))}
/* Captions: per-caption styles like the app (box/outline/shadow/font/colour, 3x3 position). */
.vba-th i{position:absolute;z-index:1;left:50%;top:8%;transform:translateX(-50%);width:max-content;max-width:88%;font-size:.42em;font-weight:700;line-height:1.15;text-align:center;color:#fff;text-shadow:0 .06em .2em rgba(0,0,0,.6)}
.vba-th i.cb{top:auto;bottom:9%}.vba-th i.cm{top:auto;bottom:30%}.vba-th i.cl{left:7%;transform:none;text-align:left}
.vba-th i.w,.vba-th i.d,.vba-th i.p,.vba-th i.tw{text-shadow:none;padding:.25em .45em;border-radius:.35em}
.vba-th i.w{background:#fff;color:#111}.vba-th i.d{background:rgba(0,0,0,.72)}
.vba-th i.p{background:#ff3b6b;border-radius:1em;padding:.22em .6em}
.vba-th i.tw{background:rgba(255,255,255,.93);color:#111;font-family:'Courier New',Courier,monospace;border-radius:.15em}
.vba-th i.s{left:0;transform:none;width:100%;max-width:none;background:rgba(0,0,0,.52);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:500;padding:.4em .3em;text-shadow:none}
.vba-th i.o,.vba-th i.y{font-size:.5em;font-weight:800;text-shadow:.07em .07em 0 #000,-.07em .07em 0 #000,.07em -.07em 0 #000,-.07em -.07em 0 #000,0 .08em 0 #000,0 -.08em 0 #000,.08em 0 0 #000,-.08em 0 0 #000}
.vba-th i.y{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;color:#ffe14d}
.vba-th.f{--fx:-1}.vba-th.z{--zm:1.22}
.vba-th.k2{--sp:.3;--s:1.35}.vba-th.k3{--h:-12deg;--s:.88;--b:1.06}.vba-th.k4{--c:1.22;--s:1.3}
.vba-more{display:grid;place-items:center;background:var(--card2);border:1px dashed #33405e;color:var(--tx2);font-size:.62em;font-weight:600}
.vba-more::before,.vba-more::after{display:none}

/* Downloads */
.vba-sec{flex:1;min-height:0;padding:.6em .65em;display:flex;flex-direction:column;gap:.5em;overflow:hidden}
.vba-sec>b{font-size:.7em;font-weight:600}
.vba-dlr{display:flex;align-items:center;gap:.65em;padding:.4em;border:1px solid var(--bd);border-radius:.6em;background:var(--card2)}
.vba-dlr .vba-th{flex:none;width:2.5em}
.vba-hot{border-color:var(--acc)}
.vba-dli{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3em;font-size:.62em}
.vba-dli b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vba-dli small{font-size:1em;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vba-dli .vba-bar{height:.6em}
.vba-dl.on .vba-hot .vba-bar b{animation:vbaFill 2s ease-in-out both}
.vba-ok{color:var(--ok)}
.vba-btns{display:flex;gap:.4em;margin-top:auto}
.vba-btn{font-size:.6em;font-weight:600;color:#fff;background:var(--acc);border-radius:.5em;padding:.4em .9em;white-space:nowrap}
.vba-btn.vba-q{background:var(--card2);border:1px solid var(--bd);color:var(--tx2)}

/* Finale: several client batches, rendered locally (time-lapse) */
.vba-bh{display:flex;gap:.5em;flex:none}
.vba-kpi{flex:1;min-width:0;padding:.5em .75em;display:flex;flex-direction:column;justify-content:center}
.vba-kpi small{font-size:.55em;font-weight:700;letter-spacing:.08em;color:var(--mut);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vba-kpi>b{font-size:1.9em;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.vba-tot>b{background:linear-gradient(90deg,#8fb0ff,#c4a2ff,#ff8fb1);-webkit-background-clip:text;background-clip:text;color:transparent}
.vba-stage.fin .vba-tot{animation:vbaGlow 1.4s ease-out}
.vba-stage.fin .vba-tot>b{animation:vbaPop .5s ease-out}
.vba-clock>b{font-size:1.45em;line-height:1.35}
.vba-lanes{flex:1;min-height:0;padding:.5em .6em;display:flex;flex-direction:column;justify-content:space-around;gap:.3em}
.vba-lane{display:grid;grid-template-columns:minmax(0,12.5em) 1fr 4.4em;align-items:center;gap:.6em;font-size:.64em}
.vba-cl{display:flex;align-items:center;gap:.5em;min-width:0}
.vba-cl>i{flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--c);color:#0b0f17;font-weight:700}
.vba-cl>span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.vba-cl b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vba-cl small{font-size:.85em;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vba-lane .vba-bar{height:.55em}
.vba-ls{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--tx2)}
.vba-ls b{color:var(--tx);font-weight:600}
.vba-ls small{display:block;font-size:.85em}
.vba-lane.done .vba-ls small{color:var(--ok)}
.vba-lane.done .vba-cl>i{animation:vbaPop .4s ease-out}
.vba-allok{flex:none;display:flex;align-items:center;justify-content:center;gap:.6em;font-size:.64em;font-weight:600;color:var(--ok);padding:.5em;border-radius:.6em;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.3);opacity:0;transform:translateY(.5em);transition:opacity .4s,transform .4s}
.vba-allok.on{opacity:1;transform:none}
.vba-ill{font-size:.85em;font-weight:500;color:var(--mut);border:1px solid var(--bd);border-radius:1em;padding:.05em .6em}

.vba-foot{display:flex;align-items:flex-start;gap:1rem;margin-top:.8rem}
.vba-foot p{flex:1;margin:0;font-size:.75rem;line-height:1.5;color:#9ca3af}
.vba-replay{flex:none;font-size:.75rem;color:#9ca3af;border:1px solid #1f2937;border-radius:9999px;padding:.3rem .8rem;background:#0b0f17;cursor:pointer}
.vba-replay:hover,.vba-replay:focus-visible{color:#fff;border-color:#5b87f5;outline:none}

@keyframes vbaSpin{to{transform:rotate(360deg)}}
@keyframes vbaPop{0%{transform:scale(.5)}65%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes vbaBlink{50%{opacity:0}}
@keyframes vbaFill{from{width:0}to{width:100%}}
@keyframes vbaGlow{0%{box-shadow:0 0 0 0 rgba(139,92,246,.55)}100%{box-shadow:0 0 0 1.2em rgba(139,92,246,0)}}

/* Phones: stack the chat above the app so both stay readable */
@container (max-width:640px){
  .vba-stage{flex-direction:column;height:auto;gap:.9em;font-size:clamp(8px,2.5cqw,12px)}
  .vba-chat{flex:none;height:24em}
  .vba-ct{font-size:.9em}
  .vba-msgs{font-size:1em}
  .vba-in{font-size:.95em}
  .vba-app{flex:none;height:34em}
  .vba-nav{width:8.4em}
  .vba-nav i{padding:.6em;margin:0 .35em}
  .vba-foot{flex-direction:column;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){.vba-stage *,.vba-ais i{transition:none!important;animation:none!important}}