npm - @officexapp/vidfarm-devcli - Versions diffs - 0.21.10 - Mend

@officexapp/vidfarm-devcli 0.21.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (516) hide show

package/public/serve-shells/tools-video.html ADDED Viewed

@@ -0,0 +1,4404 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="/assets/favicon.ico" sizes="any">
+<link rel="apple-touch-icon" href="/assets/logo-vidfarm.png">
+<title>Video Tools · VidFarm</title>
+<meta name="description" content="Use VidFarm video tools for editing, enhancement, and asset preparation.">
+<meta name="theme-color" content="#f8f4eb">
+<meta name="robots" content="index, follow">
+<meta name="application-name" content="VidFarm">
+<link rel="canonical" href="https://vidfarm.cc/tools/video">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="VidFarm">
+<meta property="og:title" content="Video Tools · VidFarm">
+<meta property="og:description" content="Use VidFarm video tools for editing, enhancement, and asset preparation.">
+<meta property="og:url" content="https://vidfarm.cc/tools/video">
+<meta property="og:image" content="https://vidfarmprodstack-vidfarmbucket335ee12f-0vsvtd5earqy.s3.us-east-1.amazonaws.com/primitives/marketing/meta-previews/tools-video-46f8e999af.jpg">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Video Tools · VidFarm">
+<meta name="twitter:description" content="Use VidFarm video tools for editing, enhancement, and asset preparation.">
+<meta name="twitter:image" content="https://vidfarmprodstack-vidfarmbucket335ee12f-0vsvtd5earqy.s3.us-east-1.amazonaws.com/primitives/marketing/meta-previews/tools-video-46f8e999af.jpg">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+:root{
+  --rk-font-display:"Hanken Grotesk","blMelody",ui-sans-serif,system-ui,sans-serif;
+  --rk-font-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
+  --rk-font-mono:ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,monospace;
+  /* honey gold — the one joy accent */
+  --rk-gold-500:#ffc738;--rk-gold-600:#f6c744;--rk-gold-700:#fcb900;--rk-gold-tint:#fff5e4;--rk-gold-tint2:#ffe9cc;
+  /* ink + neutral scale */
+  --rk-ink:#171717;--rk-n-800:#262626;--rk-n-700:#404040;--rk-n-600:#525252;--rk-n-500:#737373;--rk-n-400:#a3a3a3;
+  --rk-n-300:#d4d4d4;--rk-n-200:#ededed;--rk-n-100:#f5f5f5;--rk-n-50:#fbfbfb;--rk-white:#fff;
+  /* support pastels */
+  --rk-sky:#3f9fe0;--rk-sky-tint:#e2effd;--rk-violet:#9f5bde;--rk-violet-tint:#e4ddfd;
+  --rk-green:#22c55e;--rk-green-tint:#dcfce7;--rk-coral:#f97316;--rk-coral-tint:#ffe9cc;
+  --rk-red:#ef4444;--rk-red-tint:#fee2e2;
+  /* semantic */
+  --rk-bg:var(--rk-n-50);--rk-bg-section:var(--rk-n-100);--rk-surface:var(--rk-white);
+  --rk-border:var(--rk-n-200);--rk-border-strong:var(--rk-n-300);
+  --rk-text:var(--rk-n-700);--rk-text-muted:var(--rk-n-500);--rk-text-faint:var(--rk-n-400);
+  /* radius */
+  --rk-r-sm:6px;--rk-r-md:8px;--rk-r-lg:10px;--rk-r-xl:12px;--rk-r-2xl:16px;--rk-r-3xl:24px;--rk-r-full:9999px;
+  /* shadow — diffuse soft sunlight, never harsh */
+  --rk-shadow-xs:0 1px 2px 0 #0000000d;
+  --rk-shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
+  --rk-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
+  --rk-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
+  --rk-shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
+  --rk-shadow-card:0 1px 2px #0000000d,0 8px 24px -12px #00000014;
+  --rk-shadow-nav:0 4px 24px -8px #00000026,0 1px 2px #0000000d;
+  --rk-ring-gold:0 0 0 3px var(--rk-gold-600),0 0 14px rgba(246,199,68,.4);
+  /* type scale */
+  --rk-text-xs:.75rem;--rk-text-sm:.875rem;--rk-text-base:1rem;--rk-text-lg:1.125rem;
+  --rk-text-xl:1.25rem;--rk-text-2xl:1.5rem;--rk-text-3xl:1.875rem;--rk-text-4xl:2.25rem;--rk-text-5xl:3rem;
+  /* space + motion */
+  --rk-container:75rem;--rk-gutter:clamp(1rem,4vw,2rem);--rk-section-y:clamp(3rem,6vw,5rem);
+  --rk-glass-blur:16px;--rk-ease:cubic-bezier(.22,1,.36,1);--rk-dur:200ms;
+}
+*,*::before,*::after{box-sizing:border-box}
+.rk-root{margin:0;font-family:var(--rk-font-body);color:var(--rk-text);background:var(--rk-bg);
+  -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh}
+.rk-root a{text-decoration:none;color:inherit}
+/* buttons define their own text color; don't let the inherit rule above override it */
+.rk-root a.rk-btn-ink{color:#fff}
+.rk-root a.rk-btn-gold{color:var(--rk-ink)}
+.rk-root a.rk-btn-ghost{color:var(--rk-ink)}
+.rk-root a.rk-btn-danger{color:var(--rk-red)}
+.rk-root h1,.rk-root h2,.rk-root h3,.rk-root h4{font-family:var(--rk-font-display);font-weight:800;
+  letter-spacing:-.025em;line-height:1.1;color:var(--rk-ink);margin:0}
+.rk-root p{margin:0}
+.rk-root code{font-family:var(--rk-font-mono);font-size:.9em;background:var(--rk-n-100);
+  padding:2px 6px;border-radius:6px;color:var(--rk-n-700)}
+/* layout */
+.rk-container{width:min(var(--rk-container),100%);margin:0 auto;padding:0 var(--rk-gutter)}
+.rk-container-wide{width:min(85rem,100%);margin:0 auto;padding:0 var(--rk-gutter)}
+/* vertical-only so it never clobbers the horizontal gutter that .rk-container
+   / .rk-container-wide set via padding-left/right (a full padding shorthand
+   here would zero the side gutter, leaving content flush to the viewport
+   edges, most visible on mobile) */
+.rk-page{padding-top:24px;padding-bottom:80px}
+.rk-page-head{display:grid;gap:4px;margin-bottom:18px}
+.rk-h1{font-size:var(--rk-text-3xl);letter-spacing:-.03em}
+.rk-sub{font-size:var(--rk-text-base);color:var(--rk-text-muted)}
+.rk-stack{display:grid;gap:16px}
+.rk-row{display:flex;align-items:center;gap:12px}
+.rk-spread{display:flex;align-items:center;justify-content:space-between;gap:16px}
+.rk-wrap{flex-wrap:wrap}
+.rk-grid{display:grid;gap:20px}
+.rk-grid-2{grid-template-columns:repeat(2,1fr)}
+.rk-grid-3{grid-template-columns:repeat(3,1fr)}
+.rk-grid-4{grid-template-columns:repeat(4,1fr)}
+@media(max-width:900px){.rk-grid-3,.rk-grid-4{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:620px){.rk-grid-2,.rk-grid-3,.rk-grid-4{grid-template-columns:1fr}}
+.rk-muted{color:var(--rk-text-muted)}.rk-faint{color:var(--rk-text-faint)}
+.rk-mono{font-family:var(--rk-font-mono)}
+/* app chrome — fixed LEFT sidebar nav + content column */
+.rk-app{min-height:100vh}
+.rk-sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:50;display:flex;flex-direction:column;gap:4px;
+  padding:20px 14px 16px;background:#fff;border-right:1px solid var(--rk-border);overflow-y:auto}
+.rk-content{margin-left:248px;min-height:100vh;background:var(--rk-bg)}
+.rk-sidebar-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;font-family:var(--rk-font-display);
+  font-weight:800;font-size:20px;color:var(--rk-ink);letter-spacing:-.02em}
+.rk-sidebar-brand .rk-brand-mark{width:36px;height:36px;border-radius:10px}
+.rk-sidebar-nav{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0}
+.rk-sidebar-sep{height:1px;background:var(--rk-border);margin:8px}
+.rk-sidebar-item{display:flex;align-items:center;padding:9px 13px;border-radius:var(--rk-r-lg);
+  font-size:14px;font-weight:600;color:var(--rk-n-600);white-space:nowrap;
+  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-sidebar-item:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-sidebar-item.is-active{background:var(--rk-gold-tint);color:var(--rk-ink)}
+/* signed-in identity — subtle, small, pinned to the very bottom of the sidebar
+ * so you can tell which account you're in at a glance. The chat FAB hovers
+ * ABOVE this block (see .rk-signed-in .rk-fab) rather than sharing the spot. */
+.rk-sidebar-account{margin-top:8px;padding:8px 13px 2px;border-top:1px solid var(--rk-border);
+  color:var(--rk-n-500);line-height:1.3;overflow:hidden}
+.rk-sidebar-account-name{font-size:12px;font-weight:600;color:var(--rk-n-600);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-sidebar-account-email{font-size:11px;font-weight:500;color:var(--rk-n-400);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* subtle "cloud status" line under the nav (above the account footer) — a quiet
+   always-on indicator that opens the Cloud Status drawer on click. Indented past
+   the chat FAB's default resting spot (x 16–72px) so the label is never hidden
+   behind it. */
+.rk-sidebar-cloud{margin:2px 8px 4px 70px;display:flex;align-items:center;gap:7px;padding:6px 8px;
+  border:0;border-radius:var(--rk-r-lg);background:transparent;cursor:pointer;color:var(--rk-n-400);
+  font:inherit;font-size:11.5px;font-weight:600;text-align:left;width:calc(100% - 78px);
+  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-sidebar-cloud[hidden]{display:none}
+.rk-sidebar-cloud:hover{background:var(--rk-n-100);color:var(--rk-n-600)}
+.rk-sidebar-cloud svg{width:14px;height:14px;flex:none;opacity:.85}
+.rk-sidebar-cloud-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-sidebar-cloud.is-running{color:var(--rk-gold-700)}
+.rk-sidebar-cloud-spin{flex:none;width:12px;height:12px;border-radius:999px;
+  border:2px solid var(--rk-gold-tint2);border-top-color:var(--rk-gold-600);
+  animation:rk-sidebar-cloud-spin .7s linear infinite}
+@keyframes rk-sidebar-cloud-spin{to{transform:rotate(360deg)}}
+/* AI chat dock — draggable FAB (defaults to the old sidebar-foot spot) + popup panel.
+ * The panel is 2x the sidebar width and, when it opens on the left, visually
+ * REPLACES the nav (sidebar goes visibility:hidden via body.rk-chat-left so the
+ * layout never jumps). If the FAB was dragged to the right half of the viewport
+ * the panel anchors right instead, so it is never cut off. */
+.rk-fab{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;width:56px;height:56px;border-radius:var(--rk-r-full);
+  border:0;cursor:grab;background:var(--rk-gold-500);color:var(--rk-ink);display:grid;place-items:center;
+  box-shadow:var(--rk-shadow-lg);touch-action:none;user-select:none;-webkit-user-select:none;
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),opacity var(--rk-dur) var(--rk-ease)}
+/* signed in: the name/email block sits at the sidebar foot, so lift the FAB's
+ * default resting spot to hover just above it (never overlapping the identity).
+ * Only applies to the CSS default — a dragged FAB uses its saved inline top. */
+.rk-signed-in .rk-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
+.rk-fab:hover{transform:translateY(-2px);box-shadow:0 6px 18px -6px rgba(252,185,0,.6),var(--rk-shadow-lg)}
+.rk-fab.is-dragging{cursor:grabbing;transition:none;transform:scale(1.08)}
+.rk-fab.is-open{opacity:0;pointer-events:none;transform:scale(.6)}
+.rk-fab svg{width:26px;height:26px}
+.rk-aichat{position:fixed;z-index:95;top:12px;bottom:12px;left:12px;width:min(440px,calc(100vw - 24px));
+  display:flex;flex-direction:row;background:var(--rk-surface);border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-xl);overflow:hidden;
+  animation:rk-aichat-in .22s var(--rk-ease)}
+.rk-aichat.has-files,.rk-aichat.has-history,.rk-aichat.has-cloud{width:min(772px,calc(100vw - 24px))}
+.rk-aichat.is-right{left:auto;right:12px}
+.rk-aichat[hidden]{display:none}
+@keyframes rk-aichat-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
+.rk-chat-left .rk-sidebar{visibility:hidden}
+/* left Files pane — baked into the panel; My Files + Temp as root folders of
+   one virtual root + directory nav. Also reused inline by /reskin/settings. */
+.rk-aichat-files{flex:none;width:266px;display:none;flex-direction:column;min-height:0;
+  border-right:1px solid var(--rk-border);background:var(--rk-n-50)}
+.rk-aichat.has-files .rk-aichat-files{display:flex}
+.rk-aichat-files .rk-aichat-crumbs{padding-top:2px}
+/* files-only mode — opened from the /chat composer's attach button. Shows ONLY
+   the file explorer (no chat column / history), as a slim right-hand drawer. */
+/* Narrow panels can't hold a left drawer AND a usable chat column side-by-side
+   (266px files + a crushed ~150px chat — the classic "can't get to the chat"
+   trap). Below this width the OPEN drawer takes the full panel and the chat
+   column steps aside; each drawer's own close/back button (Files/History/Cloud)
+   restores the chat. Above it they sit side-by-side as usual. */
+@media (max-width:640px){
+  .rk-aichat.has-files .rk-aichat-main,
+  .rk-aichat.has-history .rk-aichat-main,
+  .rk-aichat.has-cloud .rk-aichat-main{display:none}
+  .rk-aichat.has-files .rk-aichat-files,
+  .rk-aichat.has-history .rk-aichat-history,
+  .rk-aichat.has-cloud .rk-aichat-cloud{flex:1 1 auto;width:auto;border-right:0}
+}
+.rk-aichat.is-files-only{width:min(384px,calc(100vw - 24px))}
+.rk-aichat.is-files-only .rk-aichat-main,
+.rk-aichat.is-files-only .rk-aichat-history,
+.rk-aichat.is-files-only .rk-aichat-cloud{display:none}
+.rk-aichat.is-files-only .rk-aichat-files{display:flex;flex:1;border-right:0}
+.rk-aichat.is-files-only .rk-aichat-files .rk-aichat-crumbs{padding-top:2px}
+.rk-aichat-files-head{display:flex;align-items:center;gap:8px;
+  padding:14px 14px 10px;flex:none}
+.rk-aichat-files-title{flex:1;min-width:0;font-family:var(--rk-font-display);font-weight:800;
+  font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
+/* left Chat-history pane — shares the same left slot as Files (only one shows
+   at a time); reuses the rk-aichat-frow row visuals for each past chat. */
+.rk-aichat-history{flex:none;width:266px;display:none;flex-direction:column;min-height:0;
+  border-right:1px solid var(--rk-border);background:var(--rk-n-50)}
+.rk-aichat.has-history .rk-aichat-history{display:flex}
+.rk-aichat-hist-head{display:flex;align-items:center;gap:8px;padding:18px 12px 8px;flex:none}
+.rk-aichat-hist-title{flex:1;min-width:0;font-family:var(--rk-font-display);font-weight:800;
+  font-size:13px;color:var(--rk-ink);letter-spacing:-.01em}
+.rk-aichat-hist-body{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 12px;display:grid;gap:2px;align-content:start}
+.rk-aichat-hist-body .rk-aichat-frow.is-active{background:#fff;box-shadow:var(--rk-shadow-xs);
+  outline:1.5px solid var(--rk-gold-600);outline-offset:-1.5px}
+.rk-aichat-hist-body .rk-aichat-frow.is-active .rk-aichat-fic{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
+/* left Cloud-status pane — shares the same left slot as Files/History. Lists the
+   customer's long-lived async work (imports, forks, renders, jobs) with All /
+   Running / Done / Error filters, live status, and open-in-new-tab links. */
+.rk-aichat-cloud{flex:none;width:300px;display:none;flex-direction:column;min-height:0;
+  border-right:1px solid var(--rk-border);background:var(--rk-n-50)}
+.rk-aichat.has-cloud .rk-aichat-cloud{display:flex}
+.rk-aichat-cloud-head{display:flex;align-items:center;gap:8px;padding:18px 12px 8px;flex:none}
+.rk-aichat-cloud-title{flex:1;min-width:0;font-family:var(--rk-font-display);font-weight:800;
+  font-size:13px;color:var(--rk-ink);letter-spacing:-.01em}
+.rk-aichat-cloud-refresh{width:26px;height:26px}
+.rk-aichat-cloud-refresh svg{width:14px;height:14px}
+.rk-aichat-cloud-filters{display:flex;gap:4px;padding:0 12px 8px;flex:none;flex-wrap:wrap}
+.rk-cloud-fbtn{padding:3px 9px;border-radius:999px;border:1px solid var(--rk-border);background:#fff;
+  cursor:pointer;color:var(--rk-n-600);font:inherit;font-size:11.5px;font-weight:600;line-height:1.4;
+  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-cloud-fbtn:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-cloud-fbtn.is-on{background:var(--rk-gold-tint);border-color:var(--rk-gold-600);color:var(--rk-ink)}
+.rk-aichat-cloud-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 8px 12px;
+  display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-content:start}
+.rk-cloud-row{display:flex;align-items:center;gap:9px;min-width:0;max-width:100%;padding:8px 9px;border-radius:var(--rk-r-lg);
+  background:#fff;border:1px solid var(--rk-border);text-align:left}
+.rk-cloud-row.is-highlight{outline:2px solid var(--rk-gold-600);outline-offset:-1px;
+  background:var(--rk-gold-tint);animation:rk-cloud-flash 1.1s var(--rk-ease)}
+@keyframes rk-cloud-flash{0%{box-shadow:0 0 0 0 rgba(252,185,0,.55)}100%{box-shadow:0 0 0 8px rgba(252,185,0,0)}}
+.rk-cloud-ic{flex:none;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
+  font-size:11px;line-height:1;background:var(--rk-n-100);color:var(--rk-n-600)}
+.rk-cloud-ic.is-running{background:var(--rk-gold-tint2);color:var(--rk-gold-700);animation:rk-cloud-pulse 1.5s ease-in-out infinite}
+.rk-cloud-ic.is-queued{background:var(--rk-n-100);color:var(--rk-n-500)}
+.rk-cloud-ic.is-done{background:#e7f6ec;color:#1a7f43}
+.rk-cloud-ic.is-error{background:#fdeaea;color:#c0362c}
+@keyframes rk-cloud-pulse{0%,100%{opacity:1}50%{opacity:.35}}
+.rk-cloud-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
+.rk-cloud-name{font-size:12.5px;font-weight:700;color:var(--rk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-cloud-sub{font-size:11px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-cloud-right{flex:none;display:flex;align-items:center;gap:6px}
+.rk-cloud-pill{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--rk-n-100);color:var(--rk-n-600)}
+.rk-cloud-pill.is-running{background:var(--rk-gold-tint);color:var(--rk-gold-700)}
+.rk-cloud-pill.is-done{background:#e7f6ec;color:#1a7f43}
+.rk-cloud-pill.is-error{background:#fdeaea;color:#c0362c}
+.rk-cloud-open{flex:none;width:24px;height:24px;border-radius:var(--rk-r-md);display:grid;place-items:center;
+  color:var(--rk-n-500);border:1px solid transparent}
+.rk-cloud-open:hover{background:var(--rk-n-100);color:var(--rk-ink);border-color:var(--rk-border)}
+/* the toggle-button running dot */
+.rk-cloud-dot{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:999px;
+  background:var(--rk-gold-600);box-shadow:0 0 0 2px #fff;animation:rk-cloud-pulse 1.5s ease-in-out infinite}
+#rkCloudToggle{position:relative}
+.rk-aichat-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:0 12px 8px;flex:none}
+.rk-aichat-crumb{padding:2px 6px;border-radius:var(--rk-r-sm);cursor:pointer;background:transparent;border:0;
+  color:var(--rk-text-muted);font-size:12px;font-weight:600;font-family:inherit;max-width:120px;overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap}
+.rk-aichat-crumb:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-aichat-crumb.is-current{color:var(--rk-ink)}
+.rk-aichat-crumb-sep{color:var(--rk-n-300);font-size:12px}
+.rk-aichat-files-body{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 12px;display:grid;gap:2px;align-content:start}
+.rk-aichat-frow{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:var(--rk-r-lg);
+  border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;min-width:0;
+  transition:background var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-aichat-frow:hover{background:#fff;box-shadow:var(--rk-shadow-xs)}
+/* preview trigger fills the row; attach button sits to its right */
+.rk-aichat-fmainbtn{flex:1;min-width:0;display:flex;align-items:center;gap:9px;border:0;background:transparent;
+  padding:0;cursor:pointer;text-align:left;font-family:inherit}
+.rk-aichat-fic{width:30px;height:30px;border-radius:var(--rk-r-md);flex:none;display:grid;place-items:center;
+  font-size:11px;font-weight:700;overflow:hidden}
+.rk-aichat-fic-folder{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
+.rk-aichat-fic-file{background:var(--rk-n-100);color:var(--rk-n-600)}
+.rk-aichat-fic img,.rk-aichat-fic video{width:100%;height:100%;object-fit:cover}
+.rk-aichat-fmain{flex:1;min-width:0;display:grid;gap:1px}
+.rk-aichat-fname{font-size:12.5px;font-weight:600;color:var(--rk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-aichat-fmeta{font-size:11px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-aichat-fadd{flex:none;font-size:11px;font-weight:700;color:var(--rk-gold-700);opacity:0;cursor:pointer;
+  border:1px solid transparent;border-radius:var(--rk-r-full);background:transparent;padding:3px 9px;font-family:inherit;
+  transition:opacity var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-aichat-frow:hover .rk-aichat-fadd{opacity:1}
+.rk-aichat-fadd:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-aichat-fadd:focus-visible{opacity:1}
+.rk-aichat-fstate{padding:22px 14px;text-align:center;font-size:12.5px;color:var(--rk-text-muted);line-height:1.5;display:grid;gap:8px;justify-items:center}
+.rk-aichat-fstate a{color:var(--rk-gold-700);font-weight:600}
+.rk-aichat-fstate button{font-family:inherit;font-size:12px;font-weight:600;color:var(--rk-ink);cursor:pointer;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:5px 12px}
+.rk-aichat-fstate button:hover{background:var(--rk-n-100)}
+/* upload dropzone footer (shown when inside My Files / Temp) */
+.rk-aichat-drop{flex:none;margin:2px 10px 12px;padding:13px 12px;border:1.5px dashed var(--rk-border-strong);
+  border-radius:var(--rk-r-xl);background:#fff;display:grid;gap:9px;justify-items:center;text-align:center;
+  transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-aichat-drop[hidden]{display:none}
+.rk-aichat-drop.is-drag{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-aichat-drop-text{font-size:11.5px;color:var(--rk-text-muted);line-height:1.4;overflow-wrap:anywhere}
+.rk-aichat-drop-btn{font-family:inherit;font-size:12px;font-weight:700;color:var(--rk-ink);cursor:pointer;
+  background:var(--rk-gold-tint);border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-full);padding:6px 15px;
+  transition:background var(--rk-dur) var(--rk-ease)}
+.rk-aichat-drop-btn:hover{background:var(--rk-gold-tint2)}
+.rk-aichat-drop-btn:disabled{opacity:.6;cursor:default}
+/* ── reusable directory explorer (createDirectoryExplorer) ──
+   Shares the .rk-aichat-frow/-fic/-fmain row look; adds search, multi-select,
+   a folder Open button, a per-row "…" kebab menu, and a copy-path toast.
+   Reused verbatim by the chat dock (attach mode) and /library/raws (standalone). */
+.rk-dir{display:flex;flex-direction:column;min-height:0;flex:1}
+.rk-dir-space{flex:none;display:inline-flex;gap:2px;margin:2px 12px 8px;padding:2px;
+  background:var(--rk-n-100,#f1ede6);border:1px solid var(--rk-border);border-radius:var(--rk-r-full);align-self:flex-start}
+.rk-dir-space-btn{font-family:inherit;font-size:12px;font-weight:600;color:var(--rk-n-500,#7a7266);
+  background:transparent;border:0;border-radius:var(--rk-r-full);padding:4px 14px;cursor:pointer;
+  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-dir-space-btn.is-on{background:var(--rk-surface,#fff);color:var(--rk-ink);box-shadow:var(--rk-shadow-sm,0 1px 2px rgba(0,0,0,.06))}
+.rk-dir-search{flex:none;padding:0 12px 8px}
+.rk-dir-search-input{width:100%;font-family:inherit;font-size:12.5px;color:var(--rk-ink);
+  background:var(--rk-surface,#fff);border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:7px 12px;
+  transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-dir-search-input:focus{outline:none;border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
+.rk-dir-search-input::placeholder{color:var(--rk-n-400)}
+.rk-dir-body{flex:1 1 auto;min-height:0}
+.rk-dir-crumbs{align-items:center}
+.rk-dir-newfolder{margin-left:auto;flex:none;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
+  color:var(--rk-gold-700);background:transparent;border:1px solid transparent;border-radius:var(--rk-r-full);padding:3px 10px;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-dir-newfolder:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-dir-uploadbtn{flex:none;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
+  color:var(--rk-gold-700);background:transparent;border:1px solid transparent;border-radius:var(--rk-r-full);padding:3px 10px;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-dir-uploadbtn:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-dir-uploadbtn:disabled{opacity:.6;cursor:default}
+.rk-dir-uploadbtn.is-drag{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+/* selection toolbar (shown when 1+ rows are selected) */
+.rk-dir-selbar{flex:none;display:flex;align-items:center;gap:8px;margin:0 10px 8px;padding:7px 10px;
+  background:var(--rk-gold-tint);border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-xl)}
+.rk-dir-selbar[hidden]{display:none}
+.rk-dir-selcount{flex:1;font-size:12px;font-weight:700;color:var(--rk-gold-700)}
+.rk-dir-selbtn{flex:none;font-family:inherit;font-size:12px;font-weight:800;color:var(--rk-ink);cursor:pointer;
+  background:transparent;border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-full);padding:5px 14px;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-dir-selbtn.is-primary{background:var(--rk-gold-500);border-color:var(--rk-gold-600);color:var(--rk-ink)}
+.rk-dir-selbtn.is-primary:hover{background:var(--rk-gold-600)}
+.rk-dir-selbtn.is-ghost{border-color:var(--rk-border);color:var(--rk-text-muted);background:transparent}
+.rk-dir-selbtn.is-ghost:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600);color:var(--rk-ink)}
+.rk-dir-selmore{padding:5px 10px;font-size:15px;line-height:1;font-weight:700}
+/* per-row select checkbox — discoverable on hover, sticky when selected */
+.rk-dir-check{flex:none;width:15px;height:15px;margin:0;accent-color:var(--rk-gold-600);cursor:pointer;opacity:0;
+  transition:opacity var(--rk-dur) var(--rk-ease)}
+.rk-aichat-frow:hover .rk-dir-check,.rk-dir-row.is-selected .rk-dir-check,.rk-dir-check:focus-visible{opacity:1}
+.rk-dir-row.is-selected{background:var(--rk-gold-tint);outline:1.5px solid var(--rk-gold-600);outline-offset:-1.5px}
+/* folder Open button — always visible (it's the navigation affordance) */
+.rk-dir-open{opacity:1;color:var(--rk-text-muted)}
+.rk-aichat-frow:hover .rk-dir-open{color:var(--rk-gold-700)}
+/* per-row "…" kebab */
+.rk-dir-kebab{flex:none;width:26px;height:26px;border-radius:var(--rk-r-md);border:1px solid transparent;background:transparent;
+  cursor:pointer;color:var(--rk-n-500);font-size:16px;line-height:1;display:grid;place-items:center;opacity:0;
+  transition:opacity var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-aichat-frow:hover .rk-dir-kebab,.rk-dir-kebab:focus-visible{opacity:1}
+.rk-dir-kebab:hover{background:var(--rk-n-100);color:var(--rk-ink);border-color:var(--rk-border)}
+/* kebab popup + copy toast (appended to <body>, so plain colors not tokens for
+   portability onto any host page) */
+.rk-dir-menu{position:fixed;z-index:2147483000;min-width:150px;background:#fff;border:1px solid var(--rk-border,#e6e1d8);
+  border-radius:var(--rk-r-lg,12px);box-shadow:var(--rk-shadow-md,0 10px 30px rgba(40,30,10,.16));padding:5px;display:grid;gap:1px}
+.rk-dir-menuitem{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--rk-ink,#2b2620);cursor:pointer;
+  text-align:left;background:transparent;border:0;border-radius:var(--rk-r-md,8px);padding:7px 10px}
+.rk-dir-menuitem:hover{background:var(--rk-n-100,#f2efe9)}
+.rk-dir-menuitem.is-danger{color:#b4341f}
+.rk-dir-menuitem.is-danger:hover{background:#fbeae6}
+.rk-dir-toast{position:fixed;z-index:2147483001;left:50%;bottom:26px;transform:translate(-50%,12px);
+  background:#2b2620;color:#fff;font-family:var(--rk-font-body,inherit);font-size:12.5px;font-weight:600;
+  padding:9px 15px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:80vw;overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none;
+  transition:opacity .18s ease,transform .18s ease}
+.rk-dir-toast.is-on{opacity:1;transform:translate(-50%,0)}
+/* chat column */
+.rk-aichat-main{flex:1;min-width:0;display:flex;flex-direction:column}
+.rk-aichat-head{display:flex;align-items:center;gap:8px;padding:14px 14px;border-bottom:1px solid var(--rk-border);flex:none}
+.rk-aichat-head-main{flex:1;min-width:0;display:grid;gap:1px}
+.rk-aichat-title{font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
+.rk-aichat-sub{font-size:11.5px;color:var(--rk-text-muted)}
+.rk-aichat-back{flex:1;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;
+  border-radius:999px;border:1px solid var(--rk-border);background:#fff;cursor:pointer;text-decoration:none;
+  font-family:var(--rk-font-display);font-weight:700;font-size:13.5px;color:var(--rk-ink);letter-spacing:-.01em;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-aichat-back:hover{background:var(--rk-n-100);border-color:var(--rk-n-300)}
+.rk-aichat-back svg{width:17px;height:17px;flex:none;color:var(--rk-n-600)}
+.rk-aichat-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* SKILL.md pill riding to the right of "Back to Library" in the editor dock head */
+.rk-aichat-head:has(.rk-aichat-skill) .rk-aichat-back{flex:0 1 auto}
+.rk-aichat-skill{flex:1;min-width:0;display:flex}
+.rk-aichat-skill .vf-skill-install{width:100%;background:transparent;box-shadow:none;border-color:var(--rk-border);backdrop-filter:none;-webkit-backdrop-filter:none}
+.rk-aichat-skill .vf-skill-install-main{flex:1;justify-content:flex-start}
+.rk-aichat-skill .vf-skill-install-menu{border-left-color:var(--rk-border)}
+.rk-aichat-skill .vf-skill-install-popover{right:0;left:auto}
+.rk-aichat-tool{width:30px;height:30px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#fff;
+  cursor:pointer;color:var(--rk-n-600);display:grid;place-items:center;font-size:13px;flex:none;
+  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-aichat-tool:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-aichat-tool svg{width:15px;height:15px}
+.rk-aichat-tool.is-on{background:var(--rk-gold-tint);border-color:var(--rk-gold-600);color:var(--rk-ink)}
+/* overflow-x:hidden + a capped single column (minmax(0,1fr), NOT the default
+   auto track which grows to content) keep the log scrolling ONLY vertically —
+   a wide child (long tool note / URL / file path) can no longer widen the grid
+   and force a horizontal scrollbar in the narrow dock column. */
+.rk-aichat-log{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;background:var(--rk-n-50)}
+.rk-aichat-msg{max-width:85%;min-width:0;padding:10px 14px;border-radius:var(--rk-r-2xl);font-size:13.5px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}
+.rk-aichat-msg.is-ai{background:#fff;border:1px solid var(--rk-border);color:var(--rk-text);justify-self:start;
+  border-bottom-left-radius:var(--rk-r-sm);box-shadow:var(--rk-shadow-xs)}
+.rk-aichat-msg.is-user{background:var(--rk-gold-tint2);color:var(--rk-ink);justify-self:end;border-bottom-right-radius:var(--rk-r-sm)}
+/* rendered markdown inside assistant replies (bold / italic / links) */
+.rk-aichat-msg.is-ai a,.rk-aichat-stream a{color:var(--rk-gold-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
+.rk-aichat-msg.is-ai strong,.rk-aichat-stream strong{color:var(--rk-ink);font-weight:700}
+.rk-aichat-msg.is-ai em,.rk-aichat-stream em{font-style:italic}
+.rk-aichat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0;flex:none}
+.rk-aichat-chips:empty{display:none}
+.rk-aichat-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:var(--rk-r-full);
+  background:var(--rk-gold-tint2);color:var(--rk-gold-700);font-size:11.5px;font-weight:600;max-width:190px}
+.rk-aichat-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-aichat-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
+.rk-aichat-chip-label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit;
+  font-size:11.5px;font-weight:600;text-align:left;text-decoration:underline;text-underline-offset:2px;text-decoration-color:transparent}
+.rk-aichat-chip-label:hover{text-decoration-color:currentColor}
+.rk-aichat-chip.is-pending{opacity:.75}
+.rk-aichat-chip.is-pending .rk-aichat-chip-label{text-decoration:none;cursor:default}
+.rk-aichat-chip-spin{width:11px;height:11px;flex:none;border-radius:50%;border:2px solid currentColor;
+  border-top-color:transparent;animation:rk-aichat-chip-spin .7s linear infinite}
+@keyframes rk-aichat-chip-spin{to{transform:rotate(360deg)}}
+/* composer = one bordered "text area" box: the textarea fills the top and the
+   attach + send controls sit inside it along the bottom row. */
+.rk-aichat-composer{display:flex;flex-direction:column;gap:8px;margin:12px;padding:10px 10px 9px;flex:none;background:#fff;
+  border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xs);
+  transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-aichat-composer:focus-within{border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
+.rk-aichat-field{width:100%;min-height:70px;max-height:210px;resize:none;border:0;background:transparent;
+  color:var(--rk-ink);font-family:var(--rk-font-body);font-size:14px;line-height:1.5;padding:4px 4px 0}
+.rk-aichat-field:focus{outline:none;box-shadow:none}
+.rk-aichat-field::placeholder{color:var(--rk-n-400)}
+.rk-aichat-composer-actions{display:flex;align-items:center;gap:8px}
+.rk-aichat-composer-actions .rk-btn{margin-left:auto}
+/* composer paperclip — opens the folder directory nav to browse + attach files
+   (tokens so it re-themes on the dark editor dock automatically) */
+.rk-aichat-attach{flex:none;width:38px;height:38px;border-radius:var(--rk-r-full);border:1px solid var(--rk-border);
+  background:var(--rk-surface);color:var(--rk-n-500);cursor:pointer;display:grid;place-items:center;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-aichat-attach:hover,.rk-aichat-attach.is-on{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);color:var(--rk-ink)}
+.rk-aichat-attach svg{width:18px;height:18px}
+/* ── live agentic turn: status → actions (tool notes + HTTP cards) → text ── */
+.rk-aichat-turn{display:grid;gap:8px;justify-items:start;width:100%;min-width:0}
+.rk-aichat-stream{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
+.rk-aichat-stream[hidden]{display:none}
+.rk-aichat-actions{display:grid;gap:6px;width:100%}
+.rk-aichat-actions:empty{display:none}
+.rk-aichat-status{display:flex;align-items:center;padding:2px 2px}
+.rk-aichat-status[hidden]{display:none}
+.rk-aichat-typing{display:inline-flex;gap:4px;align-items:center}
+.rk-aichat-typing span{width:6px;height:6px;border-radius:50%;background:var(--rk-n-400);
+  animation:rk-aichat-blink 1.2s var(--rk-ease) infinite}
+.rk-aichat-typing span:nth-child(2){animation-delay:.18s}
+.rk-aichat-typing span:nth-child(3){animation-delay:.36s}
+@keyframes rk-aichat-blink{0%,80%,100%{opacity:.28;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
+.rk-aichat-toolnote{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--rk-text-muted);
+  font-family:var(--rk-font-mono);background:#fff;border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-lg);padding:5px 10px;width:fit-content;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
+.rk-aichat-toolnote::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rk-gold-500);flex:none}
+.rk-aichat-loadmore{width:100%;margin-top:6px;padding:9px 12px;font-size:12.5px;font-weight:600;
+  color:var(--rk-text);background:var(--rk-white);border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-lg);cursor:pointer;font-family:var(--rk-font-mono)}
+.rk-aichat-loadmore:hover{background:var(--rk-n-50);border-color:var(--rk-border-strong)}
+.rk-aichat-loadmore:disabled{opacity:.6;cursor:default}
+.rk-aichat-toolnote.is-ok{color:#0a7c3f}
+.rk-aichat-toolnote.is-ok::before{background:#12a150}
+.rk-aichat-toolnote.is-err{color:#b42318}
+.rk-aichat-toolnote.is-err::before{background:#d92d20}
+.rk-aichat-err{font-size:12.5px;color:#b42318;background:#fff;border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-lg);padding:9px 11px;white-space:pre-wrap;width:100%}
+/* first-class HTTP action card (chip → modal) */
+.rk-aichat-http{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;cursor:pointer;text-align:left;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);box-shadow:var(--rk-shadow-xs);
+  transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-aichat-http:hover{border-color:var(--rk-gold-600);box-shadow:var(--rk-shadow-sm)}
+.rk-aichat-http-method{flex:none;font-family:var(--rk-font-mono);font-size:10.5px;font-weight:700;letter-spacing:.03em;
+  color:var(--rk-gold-700);background:var(--rk-gold-tint);border-radius:var(--rk-r-sm);padding:2px 7px}
+.rk-aichat-http-url{flex:1;min-width:0;font-family:var(--rk-font-mono);font-size:11.5px;color:var(--rk-n-700);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-aichat-http-status{flex:none;font-family:var(--rk-font-mono);font-size:11px;font-weight:700;color:var(--rk-green);
+  background:var(--rk-green-tint);border-radius:var(--rk-r-sm);padding:2px 7px}
+.rk-aichat-http-status[data-error="true"]{color:var(--rk-red);background:var(--rk-red-tint)}
+/* HTTP request/response modal (portalled to body, above the fixed panel) */
+.rk-aichat-modal-back{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
+  background:rgba(23,23,23,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
+  animation:rk-aichat-in .16s var(--rk-ease)}
+.rk-aichat-modal{width:min(720px,100%);max-height:min(82vh,calc(100vh - 24px));display:flex;flex-direction:column;background:var(--rk-surface);
+  border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xl);overflow:hidden}
+.rk-aichat-modal-head{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--rk-border);flex:none}
+.rk-aichat-modal-head .rk-aichat-http-url{font-size:12.5px}
+.rk-aichat-modal-x{flex:none;margin-left:2px;width:28px;height:28px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);
+  background:#fff;color:var(--rk-n-500);cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
+.rk-aichat-modal-x:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-aichat-modal-body{padding:14px 16px;overflow-y:auto;display:grid;gap:14px}
+.rk-aichat-http-note{font-size:12.5px;color:var(--rk-text-muted);line-height:1.5}
+.rk-aichat-http-block{display:grid;gap:5px}
+.rk-aichat-http-blabel{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rk-text-faint)}
+.rk-aichat-http-pre{margin:0;font-family:var(--rk-font-mono);font-size:11.5px;line-height:1.55;color:var(--rk-n-700);
+  background:var(--rk-n-50);border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);padding:10px 12px;
+  max-height:220px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
+/* collapsible JSON tree (request/response/headers inspection in the modal) */
+.rk-aichat-json{border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:#fff;overflow:hidden}
+.rk-aichat-json-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--rk-border);
+  background:var(--rk-n-50)}
+.rk-aichat-json-all{font-family:var(--rk-font-body);font-size:11px;font-weight:700;color:var(--rk-n-600);cursor:pointer;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:3px 10px}
+.rk-aichat-json-all:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600);color:var(--rk-ink)}
+.rk-aichat-json-scroll{max-height:300px;overflow:auto;padding:8px 0}
+.rk-aichat-json-line{position:relative;display:flex;align-items:flex-start;width:100%;min-height:22px;padding-right:34px}
+.rk-aichat-json-line:hover{background:var(--rk-gold-tint)}
+.rk-aichat-json-line.is-toggle{padding-left:0}
+.rk-aichat-json-caret{flex:none;width:20px;height:20px;margin-top:1px;display:grid;place-items:center;border:0;
+  background:transparent;color:var(--rk-n-500);cursor:pointer}
+.rk-aichat-json-caret svg{transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-aichat-json-caret[data-open="true"] svg{transform:rotate(90deg)}
+.rk-aichat-json-text{display:block;width:100%;font-family:var(--rk-font-mono);font-size:11.5px;line-height:1.5;
+  color:var(--rk-n-700);white-space:pre-wrap;word-break:break-word}
+.rk-aichat-json-copy{position:absolute;right:8px;top:2px;width:20px;height:20px;border-radius:var(--rk-r-sm);
+  display:grid;place-items:center;border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-500);cursor:pointer;
+  opacity:0;box-shadow:var(--rk-shadow-xs);transition:opacity var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-aichat-json-line:hover .rk-aichat-json-copy,.rk-aichat-json-copy:focus-visible{opacity:1}
+.rk-aichat-json-copy:hover{color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+/* ── file preview modal (images carousel, video, audio, pdf, md/txt/json) ── */
+.rk-aichat-preview{width:min(880px,100%);max-height:min(88vh,calc(100vh - 24px))}
+.rk-aichat-preview-name{flex:1;min-width:0;font-family:var(--rk-font-body);font-weight:700;font-size:13px;color:var(--rk-ink);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-aichat-preview-open{flex:none;font-size:11.5px;font-weight:700;color:var(--rk-gold-700);text-decoration:none;
+  border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:4px 11px}
+.rk-aichat-preview-open:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-aichat-preview-body{padding:0;display:block;min-height:120px;background:var(--rk-n-50)}
+.rk-aichat-preview-img{display:block;max-width:100%;max-height:70vh;margin:0 auto;object-fit:contain;background:var(--rk-n-100)}
+.rk-aichat-preview-media{display:block;width:100%;max-height:70vh;background:#000}
+.rk-aichat-preview-audiowrap{padding:34px 20px;display:grid;place-items:center}
+.rk-aichat-preview-audio{width:100%;max-width:460px}
+.rk-aichat-preview-frame{display:block;width:100%;height:70vh;border:0;background:#fff}
+.rk-aichat-preview-loading{padding:34px 16px;text-align:center;font-size:12.5px;color:var(--rk-text-muted)}
+.rk-aichat-preview-text{margin:0;border:0;border-radius:0;max-height:70vh;background:#fff}
+.rk-aichat-preview .rk-aichat-json{border:0;border-radius:0}
+.rk-aichat-preview .rk-aichat-json-scroll{max-height:70vh}
+.rk-aichat-preview-md{padding:18px 22px;max-height:70vh;overflow:auto;background:#fff;font-size:13.5px;line-height:1.6;color:var(--rk-n-700)}
+.rk-aichat-preview-md h1,.rk-aichat-preview-md h2,.rk-aichat-preview-md h3,.rk-aichat-preview-md h4,.rk-aichat-preview-md h5,.rk-aichat-preview-md h6{
+  font-family:var(--rk-font-display);color:var(--rk-ink);font-weight:800;line-height:1.25;margin:16px 0 8px}
+.rk-aichat-preview-md h1{font-size:20px}.rk-aichat-preview-md h2{font-size:17px}.rk-aichat-preview-md h3{font-size:15px}
+.rk-aichat-preview-md h4,.rk-aichat-preview-md h5,.rk-aichat-preview-md h6{font-size:13.5px}
+.rk-aichat-preview-md p{margin:0 0 10px}
+.rk-aichat-preview-md ul,.rk-aichat-preview-md ol{margin:0 0 10px;padding-left:22px}
+.rk-aichat-preview-md li{margin:3px 0}
+.rk-aichat-preview-md a{color:var(--rk-gold-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
+.rk-aichat-preview-md strong{color:var(--rk-ink);font-weight:700}.rk-aichat-preview-md em{font-style:italic}
+.rk-aichat-preview-md code{font-family:var(--rk-font-mono);font-size:12px;background:var(--rk-n-100);border-radius:5px;padding:1px 5px;color:var(--rk-n-700)}
+.rk-aichat-preview-md blockquote{margin:0 0 10px;padding:2px 0 2px 12px;border-left:3px solid var(--rk-border-strong);color:var(--rk-text-muted)}
+.rk-aichat-preview-md hr{border:0;border-top:1px solid var(--rk-border);margin:14px 0}
+.rk-aichat-preview-code{margin:0 0 10px;font-family:var(--rk-font-mono);font-size:11.5px;line-height:1.5;color:var(--rk-n-700);
+  background:var(--rk-n-50);border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);padding:10px 12px;overflow:auto;white-space:pre}
+.rk-aichat-preview-code code{background:transparent;padding:0}
+.rk-aichat-preview-empty{padding:40px 16px;display:grid;gap:12px;justify-items:center;text-align:center;font-size:12.5px;color:var(--rk-text-muted)}
+.rk-aichat-preview-dl{font-size:12.5px;font-weight:700;color:var(--rk-ink);cursor:pointer;background:var(--rk-gold-tint);
+  border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-full);padding:7px 15px;text-decoration:none}
+.rk-aichat-preview-dl:hover{background:var(--rk-gold-tint2)}
+.rk-aichat-preview-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:11px 16px;
+  border-top:1px solid var(--rk-border);flex:none;background:var(--rk-surface)}
+.rk-aichat-preview-nav[hidden]{display:none}
+.rk-aichat-preview-btn{font-family:inherit;font-size:12px;font-weight:700;color:var(--rk-ink);cursor:pointer;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:6px 14px;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-aichat-preview-btn:hover:not(:disabled){background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-aichat-preview-btn:disabled{opacity:.4;cursor:default}
+.rk-aichat-preview-count{font-size:11.5px;font-weight:600;color:var(--rk-text-muted);font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
+/* modal header action buttons (copy / download / copy link) */
+.rk-aichat-preview-act{flex:none;font-family:var(--rk-font-body);font-size:11.5px;font-weight:700;color:var(--rk-ink);cursor:pointer;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:4px 11px;text-decoration:none;line-height:1.4;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-aichat-preview-act:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+/* ── markdown pipe tables (assistant messages + .md previews) ── */
+.rk-md-tablewrap{max-width:100%;overflow-x:auto;margin:8px 0;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg)}
+.rk-md-table{border-collapse:collapse;width:100%;font-size:12.5px;line-height:1.45;background:#fff}
+.rk-md-table th,.rk-md-table td{padding:7px 11px;text-align:left;border-bottom:1px solid var(--rk-border);border-right:1px solid var(--rk-border);vertical-align:top;white-space:normal;overflow-wrap:anywhere}
+.rk-md-table th:last-child,.rk-md-table td:last-child{border-right:0}
+.rk-md-table tr:last-child td{border-bottom:0}
+.rk-md-table thead th{background:var(--rk-n-50);font-weight:700;color:var(--rk-ink);white-space:nowrap}
+.rk-md-table tbody tr:nth-child(even){background:var(--rk-n-50)}
+.rk-md-table code{font-family:var(--rk-font-mono);font-size:11px;background:var(--rk-n-100);border-radius:4px;padding:1px 4px;color:var(--rk-n-700)}
+/* inline code inside dock assistant messages */
+.rk-aichat-msg.is-ai code,.rk-aichat-stream code{font-family:var(--rk-font-mono);font-size:12px;background:var(--rk-n-100);border-radius:5px;padding:1px 5px;color:var(--rk-n-700)}
+/* ── finished job / tool output as file-preview thumbnails (in-transcript) ──
+   NOTE: distinct class from the LEFT files drawer (.rk-aichat-files). They used
+   to share the name, and this rule's display:grid clobbered the drawer's
+   display:none base — so the drawer could never be minimized (permanently open,
+   crushing the chat column). Keep these namespaced apart. */
+.rk-aichat-filepreview{margin-top:10px;display:grid;gap:7px}
+.rk-aichat-files-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rk-text-faint)}
+.rk-aichat-files-grid{display:flex;flex-wrap:wrap;gap:9px}
+.rk-aichat-file{display:flex;flex-direction:column;gap:6px;width:112px;padding:0;cursor:pointer;background:transparent;border:0;text-align:left;font-family:inherit}
+.rk-aichat-file-thumb{position:relative;width:112px;height:84px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:var(--rk-n-100);
+  overflow:hidden;display:grid;place-items:center;transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-aichat-file:hover .rk-aichat-file-thumb{border-color:var(--rk-gold-600);box-shadow:var(--rk-shadow-sm)}
+.rk-aichat-file-thumb img,.rk-aichat-file-thumb video{width:100%;height:100%;object-fit:cover;display:block}
+.rk-aichat-file-ic{font-family:var(--rk-font-mono);font-size:20px;font-weight:700;color:var(--rk-n-500)}
+.rk-aichat-file-thumb--pdf{background:var(--rk-red-tint)}.rk-aichat-file-thumb--json{background:var(--rk-gold-tint)}
+.rk-aichat-file-thumb--markdown,.rk-aichat-file-thumb--text{background:var(--rk-n-50)}.rk-aichat-file-thumb--audio{background:var(--rk-gold-tint2)}
+.rk-aichat-file-play{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none}
+.rk-aichat-file-name{font-size:11px;font-weight:600;color:var(--rk-n-600);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:112px}
+/* create_video pipeline: live status row + clickable result links */
+.rk-aichat-flow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--rk-text-muted);padding:2px 2px}
+.rk-aichat-flow[hidden]{display:none}
+.rk-aichat-flow-label{line-height:1.4}
+.rk-aichat-msg a,.rk-aichat-stream a{color:var(--rk-gold-700);font-weight:700;text-decoration:underline;
+  text-underline-offset:2px;overflow-wrap:anywhere}
+.rk-aichat-msg a:hover,.rk-aichat-stream a:hover{color:var(--rk-ink)}
+/* narrow: stack the left drawer above the chat so neither pane is cut off.
+   Cap the drawer to a fraction of the *viewport* (not 44% of the panel) and
+   floor the chat log so the composer is never crushed on short/landscape phones. */
+@media(max-width:700px){
+  .rk-aichat.has-files,.rk-aichat.has-history,.rk-aichat.has-cloud{flex-direction:column}
+  .rk-aichat.has-files .rk-aichat-files,
+  .rk-aichat.has-history .rk-aichat-history,
+  .rk-aichat.has-cloud .rk-aichat-cloud{width:auto;max-height:min(44%,34vh);border-right:0;border-bottom:1px solid var(--rk-border)}
+  .rk-aichat-log{min-height:60px}
+}
+/* touch devices have no hover, so controls that reveal on :hover would stay
+   invisible. Un-hide them on coarse pointers: the row kebab "…" (Copy path /
+   Delete), the multi-select checkbox, the folder Open chevron, the chat +Attach
+   button, and the JSON copy button. (Hover-only decorative states stay as-is.) */
+@media(hover:none){
+  .rk-dir-kebab,.rk-dir-check,.rk-dir-open,.rk-aichat-fadd,.rk-aichat-json-copy{opacity:1}
+}
+/* brand + glass helpers (kept — reused by the sidebar brand + the login page) */
+.rk-glass{background:rgba(255,255,255,.72);backdrop-filter:blur(var(--rk-glass-blur));
+  -webkit-backdrop-filter:blur(var(--rk-glass-blur));border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-nav)}
+.rk-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--rk-font-display);
+  font-weight:800;font-size:20px;color:var(--rk-ink);letter-spacing:-.02em;flex:none}
+.rk-brand-mark{display:inline-block;vertical-align:middle;width:26px;height:26px;border-radius:8px;
+  background:center/contain no-repeat url("/assets/logo-vidfarm.png");
+  font-size:0;color:transparent;flex:none;text-indent:-9999px;overflow:hidden}
+.rk-brand-tag{font-family:var(--rk-font-body);font-size:11px;font-weight:600;color:var(--rk-gold-700);
+  background:var(--rk-gold-tint2);padding:2px 8px;border-radius:var(--rk-r-full);letter-spacing:.02em}
+/* narrow: sidebar collapses to a horizontal top strip */
+@media(max-width:900px){
+  .rk-sidebar{position:static;width:auto;flex-direction:row;align-items:center;gap:6px;
+    padding:10px 14px;border-right:0;border-bottom:1px solid var(--rk-border);overflow-x:auto}
+  .rk-sidebar-brand{padding:6px 8px;flex:none}
+  .rk-sidebar-nav{flex-direction:row;gap:4px;flex:1}
+  .rk-sidebar-sep{display:none}
+  .rk-sidebar-item{padding:8px 12px}
+  /* horizontal strip: FAB no longer collides with the foot, drop the reserve */
+  /* horizontal strip: kill the foot border + top offset so the account block
+     sits centered in the row instead of showing a stray hairline above it */
+  .rk-sidebar-account{padding:8px 13px 2px;border-top:0;margin-top:0}
+  /* strip/burger layout: the account block is no longer at the sidebar foot,
+     so drop the FAB back to its normal bottom-left resting spot */
+  .rk-signed-in .rk-fab{bottom:calc(16px + env(safe-area-inset-bottom))}
+  .rk-content{margin-left:0}
+  .rk-chat-left .rk-sidebar{visibility:visible}
+}
+/* hamburger button — hidden except on phones (see ≤640 block below) */
+.rk-nav-burger{display:none;margin-left:auto;flex:none;width:40px;height:40px;border-radius:var(--rk-r-lg);
+  border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-700);cursor:pointer;place-items:center;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-nav-burger:hover{background:var(--rk-n-100);border-color:var(--rk-border-strong)}
+/* phones: swap the horizontal-scroll strip for a real hamburger dropdown so all
+   nav items + the account block are reachable (the strip pushes them off-screen). */
+@media(max-width:640px){
+  .rk-sidebar{flex-wrap:wrap;overflow:visible;position:sticky;top:0;z-index:60;gap:8px;
+    background:#fff;border-bottom:1px solid var(--rk-border)}
+  .rk-nav-burger{display:grid}
+  .rk-sidebar-nav{order:3;flex-basis:100%;flex-direction:column;gap:3px;display:none;padding-bottom:4px}
+  .rk-nav-toggle-cb:checked~.rk-sidebar-nav{display:flex}
+  .rk-sidebar-item{width:100%;padding:11px 13px}
+  /* account block + cloud line only inside the open dropdown (just noise in the collapsed bar) */
+  .rk-sidebar-account{display:none;order:4;flex-basis:100%;border-top:1px solid var(--rk-border);
+    margin-top:2px;padding-top:8px}
+  .rk-nav-toggle-cb:checked~.rk-sidebar-account{display:block}
+  .rk-sidebar-cloud{display:none;order:4;flex-basis:100%;margin-left:8px;width:calc(100% - 16px)}
+  .rk-nav-toggle-cb:checked~.rk-sidebar-cloud{display:flex}
+}
+/* buttons */
+.rk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;
+  border-radius:var(--rk-r-full);font-family:var(--rk-font-body);font-size:14px;font-weight:600;
+  border:1px solid transparent;cursor:pointer;white-space:nowrap;text-align:center;
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-btn .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-btn:hover .rk-arrow{transform:translateX(3px)}
+.rk-btn-ink{background:var(--rk-ink);color:#fff;box-shadow:var(--rk-shadow-sm)}
+.rk-btn-ink:hover{background:#000;box-shadow:var(--rk-shadow-md);transform:translateY(-1px)}
+.rk-btn-gold{background:var(--rk-gold-500);color:var(--rk-ink);font-weight:700;box-shadow:var(--rk-shadow-sm)}
+.rk-btn-gold:hover{background:var(--rk-gold-700);box-shadow:0 6px 18px -6px rgba(252,185,0,.6);transform:translateY(-1px)}
+/* interruptive Stop — the composer send button while a reply is streaming.
+   Fixed charcoal (not token-based) so it reads on both the light /chat page
+   and the dark editor dock. */
+.rk-btn.is-stop{background:#2f2f2f;color:#fff;box-shadow:var(--rk-shadow-sm)}
+.rk-btn.is-stop:hover{background:#1a1a1a;box-shadow:var(--rk-shadow-md);transform:none}
+.rk-btn.is-stop svg{width:14px;height:14px}
+.rk-btn-ghost{background:#fff;color:var(--rk-ink);border-color:var(--rk-border);box-shadow:var(--rk-shadow-xs)}
+.rk-btn-ghost:hover{border-color:var(--rk-border-strong);box-shadow:var(--rk-shadow-sm)}
+.rk-btn-danger{background:#fff;color:var(--rk-red);border-color:var(--rk-red-tint)}
+.rk-btn-danger:hover{background:var(--rk-red-tint)}
+.rk-btn-sm{padding:7px 13px;font-size:13px}
+.rk-btn-lg{padding:14px 24px;font-size:15px}
+.rk-btn-block{width:100%}
+/* touch: guarantee a comfortable tap size on the small pill buttons */
+@media(hover:none){.rk-btn-sm{min-height:40px}}
+/* badges + pills */
+.rk-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--rk-r-full);
+  background:#fff;border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xs);
+  font-size:13px;font-weight:500;color:var(--rk-n-700);justify-self:start;width:fit-content}
+.rk-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--rk-r-full);
+  font-size:12px;font-weight:600;background:var(--rk-n-100);color:var(--rk-n-600)}
+.rk-pill-gold{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
+.rk-pill-green{background:var(--rk-green-tint);color:#15803d}
+.rk-pill-sky{background:var(--rk-sky-tint);color:#1d6fb8}
+.rk-pill-violet{background:var(--rk-violet-tint);color:#7c3aed}
+.rk-pill-red{background:var(--rk-red-tint);color:#b91c1c}
+/* cards */
+.rk-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);
+  padding:28px;box-shadow:var(--rk-shadow-card)}
+.rk-card-hover{transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-card-hover:hover{transform:translateY(-2px);box-shadow:var(--rk-shadow-lg)}
+/* subtle loading spinner injected over any <video> that is still buffering (see document.ts) */
+.rk-vspin{position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2.5px solid rgba(255,255,255,.28);border-top-color:rgba(255,255,255,.92);box-shadow:0 1px 5px rgba(0,0,0,.28);animation:rk-vspin-rot .72s linear infinite;pointer-events:none;opacity:0;transition:opacity .2s var(--rk-ease);z-index:4}
+.rk-vspin.is-on{opacity:1}
+@keyframes rk-vspin-rot{to{transform:rotate(360deg)}}
+@media(prefers-reduced-motion:reduce){.rk-vspin{animation-duration:1.5s}}
+.rk-card-pad-sm{padding:20px}
+.rk-card h2{font-size:var(--rk-text-2xl);letter-spacing:-.02em}
+.rk-card h3{font-size:var(--rk-text-lg);font-weight:700;font-family:var(--rk-font-display)}
+.rk-card-head{display:grid;gap:6px;margin-bottom:20px}
+.rk-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
+  color:var(--rk-gold-700);text-transform:uppercase;letter-spacing:.04em;justify-self:start;width:fit-content}
+/* icon tiles */
+.rk-tile{width:40px;height:40px;border-radius:var(--rk-r-xl);display:grid;place-items:center;font-size:18px;flex:none}
+.rk-tile-sm{width:32px;height:32px;font-size:15px;border-radius:var(--rk-r-lg)}
+.rk-tile-lg{width:52px;height:52px;font-size:24px}
+.rk-tile-gold{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
+.rk-tile-sky{background:var(--rk-sky-tint);color:var(--rk-sky)}
+.rk-tile-violet{background:var(--rk-violet-tint);color:var(--rk-violet)}
+.rk-tile-green{background:var(--rk-green-tint);color:#16a34a}
+.rk-tile-amber{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
+.rk-tile-coral{background:var(--rk-coral-tint);color:var(--rk-coral)}
+.rk-tile-ink{background:var(--rk-n-100);color:var(--rk-ink)}
+/* forms */
+.rk-field{display:grid;gap:7px}
+.rk-label{font-size:13px;font-weight:600;color:var(--rk-n-700)}
+.rk-hint{font-size:12px;color:var(--rk-text-muted)}
+.rk-input,.rk-textarea,.rk-select{width:100%;font-family:var(--rk-font-body);font-size:14px;
+  color:var(--rk-ink);background:#fff;border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-xl);
+  padding:11px 14px;transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-input::placeholder,.rk-textarea::placeholder{color:var(--rk-n-400)}
+.rk-textarea{min-height:110px;resize:vertical;line-height:1.5}
+.rk-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23737373' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
+.rk-input:focus,.rk-textarea:focus,.rk-select:focus{outline:none;border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
+.rk-input-group{display:flex;align-items:stretch;gap:8px}
+.rk-input-group .rk-input{flex:1}
+/* notice / flash */
+.rk-notice{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--rk-r-2xl);
+  font-size:14px;font-weight:500;border:1px solid transparent}
+.rk-notice-ok{background:var(--rk-green-tint);color:#15803d;border-color:#bbf7d0}
+.rk-notice-err{background:var(--rk-red-tint);color:#b91c1c;border-color:#fecaca}
+/* two-column shell with sticky side rail (settings, etc.) */
+.rk-shell{display:grid;grid-template-columns:248px minmax(0,1fr);gap:32px;align-items:start}
+@media(max-width:900px){.rk-shell{grid-template-columns:1fr}}
+.rk-side{position:sticky;top:88px;display:grid;gap:4px;background:#fff;border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-2xl);padding:12px;box-shadow:var(--rk-shadow-card)}
+@media(max-width:900px){.rk-side{position:static;grid-auto-flow:column;overflow:auto}}
+.rk-side-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--rk-r-xl);
+  font-size:14px;font-weight:600;color:var(--rk-n-600);cursor:pointer;border:0;background:transparent;
+  box-sizing:border-box;text-decoration:none;
+  width:100%;text-align:left;white-space:nowrap;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-side-item:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-side-item.is-active{background:var(--rk-gold-tint);color:var(--rk-ink)}
+.rk-side-item.is-active .rk-side-ic{background:var(--rk-gold-500)}
+.rk-side-ic{width:26px;height:26px;border-radius:8px;background:var(--rk-n-100);display:grid;place-items:center;font-size:14px;flex:none}
+/* simple list rows */
+.rk-list{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
+.rk-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;min-width:0;
+  border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xs)}
+.rk-item-main{flex:1;min-width:0}
+.rk-item-title{font-weight:600;color:var(--rk-ink);font-size:14px}
+.rk-item-sub{font-size:13px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* stat tiles */
+.rk-stat{display:grid;gap:6px}
+.rk-stat-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--rk-text-muted)}
+.rk-stat-num{font-family:var(--rk-font-display);font-size:var(--rk-text-4xl);font-weight:800;letter-spacing:-.02em;color:var(--rk-ink)}
+/* footer — warm-dark charcoal */
+.rk-footer{background:var(--rk-ink);color:var(--rk-n-400);padding:56px var(--rk-gutter) 40px;margin-top:64px}
+.rk-footer-inner{width:min(var(--rk-container),100%);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
+.rk-footer-brand{font-family:var(--rk-font-display);font-weight:800;font-size:22px;color:var(--rk-gold-500);display:inline-flex;align-items:center;gap:8px}
+.rk-footer a{color:var(--rk-n-300)}.rk-footer a:hover{color:#fff}
+.rk-footer-links{display:flex;gap:8px;flex-wrap:wrap}
+.rk-trust-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--rk-r-full);background:#ffffff0d;color:var(--rk-n-400);font-size:13px}
+/* hero band (sunny sky) — sits flush at the top of the content column */
+.rk-hero-band{position:relative;overflow:hidden;margin-top:0}
+.rk-hero-art{position:absolute;inset:0;z-index:0;background:
+  radial-gradient(58% 46% at 78% 20%,rgba(255,241,204,.9),transparent 60%),
+  linear-gradient(180deg,#3f9fe0 0%,#6cc0f5 55%,#a9dbfb 100%)}
+.rk-hero{position:relative;z-index:1;text-align:center;padding:clamp(56px,12vh,119px) var(--rk-gutter) clamp(44px,8vh,72px)}
+:where(.rk-root a,.rk-root button,.rk-root input,.rk-root textarea,.rk-root select):focus-visible{outline:none;box-shadow:var(--rk-ring-gold)}
+.rk-reveal[hidden]{display:none}
+/* ── Desktop-agents nudge banner ─────────────────────────────────────────────
+ * A full-width alert pinned to the very top of the /editor and /chat surfaces,
+ * pointing to the "Desktop AI Agents" setup guide. Injected by the shared chrome
+ * script (RESKIN_CHROME_SCRIPT) only on those two paths; body.vf-has-topbanner
+ * offsets each surface's content so the bar never covers the app controls. */
+.vf-topbanner{position:fixed;top:0;left:0;right:0;z-index:2147483000;height:var(--vf-topbanner-h,44px);
+  display:flex;align-items:center;justify-content:center;gap:12px;padding:0 44px 0 16px;box-sizing:border-box;
+  background:linear-gradient(90deg,#1b1305 0%,#3a2708 48%,#1b1305 100%);color:#fdf3d8;
+  font-family:var(--rk-font-body,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
+  font-size:13.5px;line-height:1.35;border-bottom:1px solid rgba(240,193,90,.32);
+  box-shadow:0 2px 14px rgba(0,0,0,.28);text-align:center}
+.vf-topbanner-ico{flex:none;font-size:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
+.vf-topbanner-msg{max-width:900px}
+.vf-topbanner-msg strong{color:#ffd977;font-weight:800}
+.vf-topbanner-cta{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
+  background:linear-gradient(180deg,#ffcf5f,#f0b429);color:#221602;font-weight:800;font-size:12.5px;line-height:1;
+  text-decoration:none;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 8px rgba(240,180,41,.35);
+  transition:transform .16s ease,box-shadow .16s ease}
+.vf-topbanner-cta:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 4px 12px rgba(240,180,41,.5)}
+.vf-topbanner-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;
+  display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;cursor:pointer;
+  background:transparent;color:#e7cf9a;font-size:17px;line-height:1;transition:background .16s ease,color .16s ease}
+.vf-topbanner-close:hover{background:rgba(255,255,255,.1);color:#fff}
+@media(max-width:720px){
+  .vf-topbanner{--vf-topbanner-h:auto;min-height:56px;flex-wrap:wrap;gap:6px 12px;padding:8px 40px;font-size:12.5px}
+  .vf-topbanner-msg{flex:1 1 100%;order:1}
+  .vf-topbanner-ico{order:0}
+  .vf-topbanner-cta{order:2}
+}
+/* Per-surface content offset so nothing hides beneath the fixed bar. */
+body.vf-has-topbanner[data-rk-editor-dock] #root{margin-top:var(--vf-topbanner-h,44px);height:calc(100dvh - var(--vf-topbanner-h,44px))}
+body.vf-has-topbanner.rk-has-sidebar .rk-sidebar{top:var(--vf-topbanner-h,44px)}
+body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-h,44px)}
+.vf-skill-install{
+  --vf-skill-surface:var(--rk-surface,var(--surface,#fff));
+  --vf-skill-surface-strong:var(--rk-n-50,var(--n-50,#fbfbfb));
+  --vf-skill-border:var(--rk-border,var(--border,#ededed));
+  --vf-skill-border-strong:var(--rk-border-strong,var(--border-strong,#d4d4d4));
+  --vf-skill-text:var(--rk-ink,var(--ink,#171717));
+  --vf-skill-muted:var(--rk-text-muted,var(--text-muted,#737373));
+  --vf-skill-accent:var(--rk-gold-500,var(--gold-500,#ffc738));
+  --vf-skill-accent-deep:var(--rk-gold-700,var(--gold-700,#fcb900));
+  --vf-skill-shadow:var(--rk-shadow-nav,var(--shadow-nav,0 4px 24px -8px #00000026,0 1px 2px #0000000d));
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  border:1px solid var(--vf-skill-border);
+  border-radius:999px;
+  background:rgba(255,255,255,.86);
+  backdrop-filter:blur(16px);
+  -webkit-backdrop-filter:blur(16px);
+  box-shadow:0 4px 14px -10px rgba(15,23,42,.35);
+  color:var(--vf-skill-text);
+}
+.vf-skill-install-main,
+.vf-skill-install-menu,
+.vf-skill-install-copy{
+  border:0;
+  background:transparent;
+  color:inherit;
+  cursor:pointer;
+}
+.vf-skill-install-main{
+  display:inline-flex;
+  align-items:center;
+  gap:6px;
+  min-height:32px;
+  padding:0 9px 0 11px;
+  border-radius:999px 0 0 999px;
+  font:600 13px/1 var(--rk-font-body,var(--font-body,ui-sans-serif,system-ui,sans-serif));
+  letter-spacing:-.01em;
+  transition:background 180ms ease,color 180ms ease;
+}
+.vf-skill-install-main:hover,
+.vf-skill-install-main:focus-visible{
+  background:#0000000a;
+  outline:none;
+}
+.vf-skill-install-main-icon,
+.vf-skill-install-copy,
+.vf-skill-install-link-icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+}
+.vf-skill-install-main-icon{
+  width:15px;
+  height:15px;
+}
+.vf-skill-install-main-icon svg,
+.vf-skill-install-copy svg,
+.vf-skill-install-link-icon svg,
+.vf-skill-install-menu svg{
+  width:15px;
+  height:15px;
+}
+.vf-skill-install-main-label{
+  white-space:nowrap;
+}
+.vf-skill-install-menu{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:32px;
+  min-height:32px;
+  border-left:1px solid var(--vf-skill-border);
+  border-radius:0 999px 999px 0;
+  transition:background 180ms ease,color 180ms ease;
+}
+.vf-skill-install-menu:hover,
+.vf-skill-install-menu:focus-visible{
+  background:#0000000a;
+  outline:none;
+}
+.vf-skill-install-popover{
+  position:absolute;
+  right:0;
+  top:calc(100% + 10px);
+  z-index:40;
+  width:min(320px,calc(100vw - 28px));
+  display:grid;
+  gap:10px;
+  padding:14px;
+  border:1px solid var(--vf-skill-border);
+  border-radius:var(--rk-r-2xl,var(--r-2xl,16px));
+  background:var(--vf-skill-surface);
+  box-shadow:var(--vf-skill-shadow);
+}
+.vf-skill-install-popover[hidden]{
+  display:none;
+}
+.vf-skill-install-popover-kicker{
+  font:600 12px/1.2 var(--rk-font-body,var(--font-body,ui-sans-serif,system-ui,sans-serif));
+  color:var(--vf-skill-muted);
+  letter-spacing:.02em;
+  text-transform:uppercase;
+}
+.vf-skill-install-command{
+  display:grid;
+  grid-template-columns:minmax(0,1fr) 44px;
+  gap:8px;
+  align-items:stretch;
+}
+.vf-skill-install-input{
+  width:100%;
+  min-width:0;
+  height:36px;
+  padding:0 12px;
+  border:1px solid var(--vf-skill-border);
+  border-radius:var(--rk-r-xl,var(--r-xl,12px));
+  background:var(--vf-skill-surface-strong);
+  color:var(--vf-skill-text);
+  font:500 13px/1.2 var(--rk-font-mono,var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace));
+  letter-spacing:-.02em;
+}
+.vf-skill-install-copy{
+  height:36px;
+  border:1px solid color-mix(in srgb,var(--vf-skill-accent) 55%, white);
+  border-radius:var(--rk-r-xl,var(--r-xl,12px));
+  background:var(--rk-gold-tint,var(--gold-tint,#fff5e4));
+  color:var(--vf-skill-accent-deep);
+  transition:transform 180ms ease,background 180ms ease,border-color 180ms ease,color 180ms ease;
+}
+.vf-skill-install-copy:hover,
+.vf-skill-install-copy:focus-visible{
+  background:var(--vf-skill-accent);
+  border-color:var(--vf-skill-accent);
+  color:var(--vf-skill-text);
+  outline:none;
+  transform:translateY(-1px);
+}
+.vf-skill-install-copy[data-copied="true"]{
+  background:color-mix(in srgb,#22c55e 14%, white);
+  border-color:color-mix(in srgb,#22c55e 36%, white);
+  color:#15803d;
+}
+.vf-skill-install-link{
+  display:inline-flex;
+  align-items:center;
+  gap:7px;
+  width:max-content;
+  color:var(--vf-skill-accent-deep);
+  font:600 13px/1.2 var(--rk-font-body,var(--font-body,ui-sans-serif,system-ui,sans-serif));
+}
+.vf-skill-install-link-icon{
+  width:14px;
+  height:14px;
+}
+.vf-skill-install-link-icon svg{
+  width:14px;
+  height:14px;
+}
+.vf-skill-install-link:hover{
+  text-decoration:underline;
+}
+.vf-skill-install-nav{
+  flex:none;
+}
+.vf-skill-install-panel{
+  align-self:flex-start;
+}
+.vf-skill-install-panel .vf-skill-install-main{
+  min-height:32px;
+}
+@media(max-width:560px){
+  .vf-skill-install-main-label{
+    font-size:13px;
+  }
+  .vf-skill-install-popover{
+    width:min(300px,calc(100vw - 18px));
+    right:-4px;
+  }
+}
+.rk-sidebar-skill{margin:4px 6px 10px;display:flex}
+.rk-sidebar-skill .vf-skill-install{width:100%;background:transparent;box-shadow:none;border-color:var(--rk-border);backdrop-filter:none;-webkit-backdrop-filter:none}
+.rk-sidebar-skill .vf-skill-install-main{flex:1;justify-content:flex-start}
+.rk-sidebar-skill .vf-skill-install-menu{border-left-color:var(--rk-border)}
+/* The sidebar rail is a fixed 248px column with overflow-y:auto (which forces
+   overflow-x to clip too), so the default right-anchored 320px popover spills off
+   the left edge and gets cut. Anchor it left and fit it to the rail width. */
+.rk-sidebar-skill .vf-skill-install-popover{left:0;right:auto;width:100%;min-width:0}
+/* Marketplace — the sidebar's PRIMARY action, pinned directly under the brand and
+   above the SKILL.md pill. Gold "joy" accent so it reads as the headline CTA of
+   the whole rail; the little live dot hints at an active exchange. */
+.rk-sidebar-market{display:flex;align-items:center;gap:9px;margin:2px 6px 8px;padding:11px 12px;border-radius:12px;
+  background:var(--rk-gold-500);color:var(--rk-ink);font-family:var(--rk-font-display);font-weight:800;
+  font-size:.95rem;text-decoration:none;box-shadow:var(--rk-shadow-sm);transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-sidebar-market[hidden]{display:none}
+.rk-sidebar-market:hover{transform:translateY(-1px);box-shadow:var(--rk-shadow-md)}
+.rk-sidebar-market.is-active{outline:2px solid var(--rk-gold-700);outline-offset:1px}
+.rk-sidebar-market svg{width:17px;height:17px;flex:none}
+.rk-sidebar-market-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--rk-green);
+  box-shadow:0 0 0 3px #ffffff66;animation:rk-market-pulse 1.6s ease-in-out infinite;flex:none}
+@keyframes rk-market-pulse{0%,100%{opacity:1}50%{opacity:.45}}
+@media (prefers-reduced-motion:reduce){.rk-sidebar-market-dot{animation:none}}
+/* page-scoped */
+.rk-ip-tabs{display:inline-flex;gap:3px;padding:3px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:999px;margin-bottom:12px}
+.rk-ip-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 15px;border-radius:999px;font-size:13px;font-weight:700;color:var(--rk-text-muted);text-decoration:none;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-ip-tab:hover{color:var(--rk-ink)}
+.rk-ip-tab.is-active{background:var(--rk-surface);color:var(--rk-ink);box-shadow:var(--rk-shadow-sm)}
+.rk-ip-tab svg{flex:none}
+.rk-inpaint-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter)}
+.rk-inpaint-workbench{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:20px;align-items:start}
+@media(max-width:1200px){.rk-inpaint-workbench{grid-template-columns:320px minmax(0,1fr)}.rk-inpaint-output{grid-column:1 / -1;grid-row:2}}
+@media(max-width:820px){.rk-inpaint-workbench{grid-template-columns:1fr}.rk-inpaint-output,.rk-inpaint-stage,.rk-inpaint-panel{grid-column:auto}.rk-inpaint-stage{order:-1}}
+.rk-inpaint-panel,.rk-inpaint-stage,.rk-inpaint-output{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card)}
+.rk-inpaint-panel{padding:18px;display:grid;gap:16px;align-content:start}
+.rk-inpaint-block{display:grid;gap:9px}
+.rk-inpaint-h2{font-family:var(--rk-font-display);font-size:var(--rk-text-lg);font-weight:800;color:var(--rk-ink);letter-spacing:-.01em}
+.rk-inpaint-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
+.rk-inpaint-head-text{min-width:0;flex:1 1 320px}
+.rk-inpaint-toolbar{flex:none;display:flex;align-items:center;gap:8px;padding-top:2px}
+.rk-inpaint-startnew{gap:6px}
+.rk-ip-iconbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-700);cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-ip-iconbtn:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ip-toolbtns{display:flex;align-items:center;gap:6px}
+/* start/end frames */
+.rk-ipv-frames{display:grid;grid-template-columns:1fr 1fr;gap:10px}
+.rk-ipv-frame{display:grid;gap:6px;justify-items:center}
+.rk-ipv-frame-thumb{position:relative;width:100%;aspect-ratio:16/10;padding:0;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-xl);background:var(--rk-n-50);color:var(--rk-text-faint);cursor:pointer;overflow:hidden;display:grid;place-items:center}
+.rk-ipv-frame-thumb:hover{border-color:var(--rk-gold-600)}
+.rk-ipv-frame-ph{font-size:24px;line-height:1}
+.rk-ipv-frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.rk-ipv-frame-name{font-size:12px;font-weight:700;color:var(--rk-ink)}
+.rk-ipv-frame-actions{display:flex;gap:6px}
+.rk-ipv-frame-btn{padding:3px 8px;font:inherit;font-size:11px;font-weight:700;color:var(--rk-n-700);background:#fff;border:1px solid var(--rk-border);border-radius:999px;cursor:pointer}
+.rk-ipv-frame-btn:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+/* prompt field + attachments */
+.rk-ip-promptfield{position:relative}
+.rk-ip-global{min-height:74px;width:100%;padding-right:44px}
+.rk-ip-attach{position:absolute;right:7px;bottom:7px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;cursor:pointer;border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600)}
+.rk-ip-attach:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ip-attach-chips{display:flex;flex-wrap:wrap;gap:6px}
+.editor-inpaint-attachment-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-50);font-size:11.5px;color:var(--rk-n-700);max-width:170px}
+.editor-inpaint-attachment-chip img{width:22px;height:22px;border-radius:4px;object-fit:cover;flex:none}
+.editor-inpaint-attachment-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.editor-inpaint-attachment-chip button{flex:none;border:0;background:transparent;cursor:pointer;color:var(--rk-text-faint);font-size:15px;line-height:1;padding:0 2px}
+.rk-ip-setting-note{font-weight:600;color:var(--rk-text-faint)}
+/* mask color picker + timed mask rows */
+.rk-inpaint-brushrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
+.rk-ip-colorpicker{width:42px;height:32px;padding:2px;border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);background:#fff;cursor:pointer}
+.rk-inpaint-range{width:100%}
+.rk-ipv-masks{display:grid;gap:8px}
+.rk-ipv-mask{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;padding:8px;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);background:var(--rk-n-50)}
+.rk-ipv-mask[data-active="true"]{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-ipv-mask-dot{width:24px;height:24px;padding:0;border:2px solid #fff;border-radius:50%;cursor:pointer;background:var(--ipv-c,#ff2d55);box-shadow:0 0 0 1px var(--rk-border-strong)}
+.rk-ipv-mask[data-active="true"] .rk-ipv-mask-dot{box-shadow:0 0 0 2px var(--rk-gold-700)}
+.rk-ipv-mask-body{min-width:0;display:grid;gap:6px}
+.rk-ipv-mask-row{display:flex;align-items:center;gap:6px}
+.rk-ipv-mask-time{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 9px;font:inherit;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--rk-ink);background:#fff;border:1px solid var(--rk-border);border-radius:999px;cursor:pointer}
+.rk-ipv-mask-time:hover{border-color:var(--rk-gold-600);color:var(--rk-gold-700)}
+.rk-ipv-mask-time svg{flex:none;color:var(--rk-text-muted)}
+.rk-ipv-mask-mini{display:grid;place-items:center;width:24px;height:24px;flex:none;border:1px solid var(--rk-border);border-radius:50%;background:#fff;color:var(--rk-n-600);cursor:pointer}
+.rk-ipv-mask-mini:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ipv-mask-mini.is-danger:hover{color:#b42318;border-color:#e6a8a0;background:#fff}
+.rk-ipv-mask-prompt{width:100%;min-height:44px;resize:vertical;padding:8px 10px;font:inherit;font-size:12.5px;line-height:1.4;color:var(--rk-ink);border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);background:#fff;outline:0}
+.rk-ipv-mask-prompt:focus{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+.rk-ipv-masks-empty{font-size:12px;color:var(--rk-text-faint);padding:8px 2px;line-height:1.4}
+.rk-ip-addcolor{justify-self:start}
+/* provider select */
+.rk-ip-provider{display:none;gap:6px}
+.rk-ip-provider[data-visible="true"]{display:grid}
+.rk-ip-setting{display:grid;gap:6px}
+.rk-ipv-audio-row{grid-template-columns:1fr auto;align-items:center}
+.rk-inpaint-select{width:100%}
+.rk-ip-input{width:100%;padding:8px 10px;font:inherit;font-size:13px;color:var(--rk-ink);border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);background:#fff;outline:0}
+.rk-ip-input:focus{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+/* generate + status */
+.rk-inpaint-generate{width:100%;justify-content:center;gap:8px;padding:13px}
+.rk-inpaint-generate[data-loading="true"]{opacity:.7;cursor:wait}
+.rk-inpaint-status{font-size:12.5px;font-weight:600;line-height:1.5;min-height:18px;color:var(--rk-text-muted)}
+.rk-inpaint-status[data-tone="error"]{color:#b42318}
+.rk-inpaint-status[data-tone="success"]{color:#1f7a44}
+/* center video stage */
+.rk-inpaint-stage{min-height:420px;display:grid;place-items:center;padding:20px;overflow:hidden}
+.rk-ipv-stage{align-content:center}
+.rk-inpaint-empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--rk-text-muted);padding:30px 20px}
+.rk-inpaint-empty[hidden]{display:none}
+.rk-inpaint-empty-ic{color:var(--rk-n-400)}
+.rk-inpaint-empty-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-lg);color:var(--rk-ink)}
+.rk-inpaint-empty-sub{font-size:13px}
+.rk-ipv-upload{margin-top:6px;gap:6px}
+.rk-ipv-player{width:100%;display:grid;gap:12px;justify-items:center}
+.rk-ipv-player[hidden]{display:none}
+.rk-ipv-canvaswrap{position:relative;display:inline-block;line-height:0;max-width:100%;border-radius:var(--rk-r-2xl);overflow:hidden;box-shadow:var(--rk-shadow-md);
+  --inpaint-brush-cursor-size:70px;--inpaint-brush-cursor-x:0px;--inpaint-brush-cursor-y:0px;background:#000}
+.rk-ipv-video{display:block;max-width:100%;max-height:min(58vh,560px);width:auto;height:auto;object-fit:contain;user-select:none}
+.rk-ipv-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.82;cursor:crosshair;touch-action:none}
+.editor-inpaint-brush-cursor{position:absolute;z-index:2;left:0;top:0;width:var(--inpaint-brush-cursor-size);height:var(--inpaint-brush-cursor-size);
+  border:2px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 0 0 1px rgba(28,25,23,.7),0 0 18px rgba(28,25,23,.25);opacity:0;pointer-events:none;
+  transform:translate(var(--inpaint-brush-cursor-x),var(--inpaint-brush-cursor-y)) translate(-50%,-50%)}
+.editor-inpaint-brush-cursor[data-visible="true"]{opacity:1}
+.rk-ipv-controls{width:100%;max-width:640px;display:flex;align-items:center;gap:10px}
+.rk-ipv-playpause{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:var(--rk-ink);color:#fff;cursor:pointer}
+.rk-ipv-playpause:hover{background:var(--rk-n-800,#333)}
+.rk-ipv-scrub{flex:1;min-width:0;accent-color:var(--rk-gold-600)}
+.rk-ipv-timecode{flex:none;display:flex;align-items:center;gap:6px}
+.rk-ipv-timecode-input{width:96px;padding:5px 8px;font:inherit;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;color:var(--rk-ink);border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);background:#fff;outline:0}
+.rk-ipv-timecode-input:focus{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+.rk-ipv-timecode-copy{width:30px;height:30px}
+.rk-ipv-duration{font-size:11.5px;font-weight:700;color:var(--rk-text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
+/* text-to-video composer (empty state) */
+.rk-ip-gen{width:100%;max-width:460px;margin-top:16px;display:grid;gap:10px;justify-items:stretch}
+.rk-ip-gen-or{position:relative;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rk-text-faint)}
+.rk-ip-gen-or::before,.rk-ip-gen-or::after{content:"";position:absolute;top:50%;width:calc(50% - 26px);height:1px;background:var(--rk-border)}
+.rk-ip-gen-or::before{left:0}.rk-ip-gen-or::after{right:0}
+.rk-ip-gen-box{background:#fff;border:1.5px solid var(--rk-border-strong);border-radius:var(--rk-r-2xl);padding:10px 10px 8px;display:grid;gap:8px;box-shadow:var(--rk-shadow-sm);text-align:left}
+.rk-ip-gen-box:focus-within{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+.rk-ip-gen.is-busy .rk-ip-gen-box{opacity:.75}
+.rk-ip-gen-input{width:100%;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:14px;line-height:1.45;color:var(--rk-ink);min-height:44px;padding:2px 4px}
+.rk-ip-gen-input::placeholder{color:var(--rk-text-faint)}
+.rk-ip-gen-refs{display:flex;flex-wrap:wrap;gap:6px}
+.rk-ip-gen-refs[hidden]{display:none}
+.rk-ip-gen-ref{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-50);font-size:11.5px;color:var(--rk-n-700);max-width:180px}
+.rk-ip-gen-ref img{width:22px;height:22px;border-radius:4px;object-fit:cover;flex:none}
+.rk-ip-gen-ref span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-ip-gen-ref button{flex:none;border:0;background:transparent;cursor:pointer;color:var(--rk-text-faint);font-size:15px;line-height:1;padding:0 2px}
+.rk-ip-gen-bar{display:flex;align-items:center;gap:8px}
+.rk-ip-gen-hint{flex:1;font-size:11.5px;color:var(--rk-text-faint);line-height:1.35}
+.rk-ip-gen-clip,.rk-ip-gen-send{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;cursor:pointer}
+.rk-ip-gen-clip{border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600)}
+.rk-ip-gen-clip:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ip-gen-send{border:0;background:var(--rk-gold-500,var(--rk-gold-600));color:var(--rk-ink)}
+.rk-ip-gen-send:hover:not(:disabled){background:var(--rk-gold-600)}
+.rk-ip-gen-send:disabled{opacity:.5;cursor:default}
+.rk-ip-gen-send.is-busy{background:var(--rk-gold-tint);pointer-events:none}
+.rk-ip-gen-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--rk-gold-tint2,rgba(252,185,0,.35));border-top-color:var(--rk-gold-700);animation:rk-ip-spin .8s linear infinite}
+.rk-ip-gen-status{font-size:12px;font-weight:600;min-height:16px;color:var(--rk-text-muted);text-align:left;padding-left:2px}
+.rk-ip-gen-status[data-tone="error"]{color:#b42318}
+.rk-ip-gen-status[data-tone="success"]{color:#1f7a44}
+/* file-directory pop panel (reference picker) */
+.rk-ip-filemodal{position:fixed;inset:0;z-index:60;background:rgba(28,25,23,.44);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px}
+.rk-ip-filemodal-panel{width:min(560px,100%);max-height:min(80vh,680px);display:flex;flex-direction:column;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card));overflow:hidden}
+.rk-ip-filemodal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rk-border)}
+.rk-ip-filemodal-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-md,15px);color:var(--rk-ink)}
+.rk-ip-filemodal-close{border:0;background:transparent;font-size:22px;line-height:1;color:var(--rk-text-muted);cursor:pointer;padding:0 4px}
+.rk-ip-filemodal-mount{padding:12px 14px;overflow:auto;flex:1;min-height:0}
+/* right: result + history */
+.rk-inpaint-output{padding:18px;display:grid;gap:18px;align-content:start}
+.rk-inpaint-result[hidden]{display:none}
+.rk-inpaint-result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
+.rk-ipv-result-video{display:block;width:100%;border-radius:var(--rk-r-2xl);background:#000;box-shadow:var(--rk-shadow-sm)}
+.rk-inpaint-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
+.rk-ip-histtools{display:flex;align-items:center;gap:8px}
+.rk-inpaint-historylist{display:grid;gap:10px}
+.custom-inpaint-history-empty{font-size:12.5px;color:var(--rk-text-faint);padding:14px 4px;text-align:center;line-height:1.4}
+.custom-inpaint-history-item{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:10px;padding:8px;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);background:var(--rk-n-50)}
+.custom-inpaint-history-thumb-button{position:relative;width:54px;height:54px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--rk-r-lg);background:var(--rk-n-200);cursor:zoom-in;overflow:hidden}
+.custom-inpaint-history-thumb{width:54px;height:54px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);object-fit:cover;background:#000}
+.custom-inpaint-history-thumb-badge{position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}
+.custom-inpaint-history-generating{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-100)}
+.custom-inpaint-history-generating::before{content:"";width:22px;height:22px;border-radius:50%;border:2.5px solid var(--rk-gold-tint2,rgba(252,185,0,.35));border-top-color:var(--rk-gold-700);animation:rk-ip-spin .8s linear infinite}
+.custom-inpaint-history-meta{min-width:0;display:grid;gap:5px}
+.custom-inpaint-history-title{min-width:0;color:var(--rk-ink);font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.custom-inpaint-history-subtitle{min-width:0;color:var(--rk-text-muted);font-size:11.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.custom-inpaint-history-actions{display:flex;align-items:center;gap:5px}
+.custom-inpaint-history-icon{width:26px;height:26px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--rk-border);border-radius:50%;background:#fff;color:var(--rk-n-700);cursor:pointer;text-decoration:none}
+.custom-inpaint-history-icon:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.custom-inpaint-history-icon svg{width:13px;height:13px}
+.custom-inpaint-history-check{min-height:26px;padding:0 10px;border:1px solid var(--rk-border);border-radius:999px;background:#fff;color:var(--rk-ink);font:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
+.custom-inpaint-history-check[disabled]{cursor:wait;opacity:.6}
+.custom-inpaint-history-popconfirm{position:absolute;right:6px;top:6px;z-index:6;width:160px;display:grid;gap:7px;padding:9px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-surface);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card))}
+.custom-inpaint-history-popconfirm[hidden]{display:none}
+.custom-inpaint-history-popconfirm p{margin:0;color:var(--rk-ink);font-size:12px;font-weight:700;line-height:1.3}
+.custom-inpaint-history-popconfirm-actions{display:flex;gap:6px}
+.custom-inpaint-history-popconfirm-actions button{flex:1 1 0;min-height:26px;padding:0 8px;border-radius:var(--rk-r-md,8px);border:1px solid var(--rk-border);background:#fff;color:var(--rk-ink);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
+.custom-inpaint-history-popconfirm-actions button[data-danger="true"]{border-color:#e6a8a0;color:#b42318}
+/* lightbox */
+.rk-ip-lightbox{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:22px;background:rgba(28,25,23,.66);backdrop-filter:blur(8px)}
+.rk-ip-lightbox[data-open="true"]{display:grid}
+.rk-ip-lightbox[hidden]{display:none}
+.rk-ipv-lightbox-dialog{width:min(1100px,calc(100vw - 44px));max-height:94svh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:14px;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);background:var(--rk-surface);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card))}
+.custom-inpaint-lightbox-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
+.custom-inpaint-lightbox-title{min-width:0;margin:0;color:var(--rk-ink);font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.custom-inpaint-lightbox-actions{display:flex;align-items:center;gap:8px}
+.rk-ipv-lightbox-stage{min-height:0;display:grid;place-items:center;overflow:auto}
+.rk-ipv-lightbox-stage video{max-width:100%;max-height:calc(94svh - 92px);border-radius:var(--rk-r-xl);background:#000}
+@keyframes rk-ip-spin{to{transform:rotate(360deg)}}
+/* settings modal */
+.rk-ip-settingsmodal{position:fixed;inset:0;z-index:70;background:rgba(28,25,23,.44);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px}
+.rk-ip-settingsmodal[hidden]{display:none}
+.rk-ip-settingsmodal-panel{width:min(440px,100%);display:flex;flex-direction:column;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card));overflow:hidden}
+.rk-ip-settingsmodal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rk-border)}
+.rk-ip-settingsmodal-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-md,15px);color:var(--rk-ink)}
+.rk-ip-settingsmodal-body{padding:16px 18px;display:grid;gap:14px}
+/* past-sessions panel */
+.rk-ip-sessions{position:fixed;left:0;top:0;bottom:0;z-index:96;width:min(320px,86vw);display:flex;flex-direction:column;background:var(--rk-surface);border-right:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xl,var(--rk-shadow-card));transform:translateX(-100%);transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-ip-sessions.is-open{transform:none}
+.rk-ip-sessions-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 14px 10px;border-bottom:1px solid var(--rk-border)}
+.rk-ip-sessions-title{font-family:var(--rk-font-display);font-weight:800;font-size:14px;color:var(--rk-ink)}
+.rk-ip-sessions-list{flex:1;min-height:0;overflow-y:auto;padding:8px;display:grid;gap:4px;align-content:start}
+.rk-ip-sessions-empty{font-size:12.5px;color:var(--rk-text-faint);padding:16px 8px;text-align:center;line-height:1.4}
+.rk-ip-session{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;padding:7px;border:1px solid transparent;border-radius:var(--rk-r-lg);background:transparent;cursor:pointer;text-align:left;font:inherit;width:100%}
+.rk-ip-session:hover{background:var(--rk-n-50)}
+.rk-ip-session.is-active{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-ip-session-thumb{width:44px;height:44px;border:1px solid var(--rk-border);border-radius:var(--rk-r-md,8px);object-fit:cover;background:var(--rk-n-200)}
+.rk-ip-session-thumb.is-empty{display:grid;place-items:center;color:var(--rk-text-faint)}
+.rk-ip-session-meta{min-width:0;display:grid;gap:3px}
+.rk-ip-session-title{min-width:0;color:var(--rk-ink);font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-ip-session-sub{min-width:0;color:var(--rk-text-muted);font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-ip-sessions-backdrop{position:fixed;inset:0;z-index:95;background:rgba(28,25,23,.34)}
+.rk-ip-sessions-backdrop[hidden]{display:none}
+</style>
+</head>
+<body class="rk-root rk-has-sidebar rk-signed-in">
+<div class="rk-app">
+<aside class="rk-sidebar">
+  <a class="rk-sidebar-brand" href="/discover"><span class="rk-brand-mark">V</span>VidFarm</a>
+  <a class="rk-sidebar-market" href="/marketplace" hidden>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9l1-5h16l1 5"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></svg>
+    Marketplace
+    <span class="rk-sidebar-market-dot" aria-hidden="true"></span>
+  </a>
+  <script>(function(){try{var p=new URLSearchParams(location.search);if(p.get('show_marketplace')==='true')localStorage.setItem('vf_show_marketplace','1');if(p.get('show_marketplace')==='true'||localStorage.getItem('vf_show_marketplace')==='1'){var el=document.querySelector('.rk-sidebar-market');if(el)el.hidden=false;}}catch(e){}})();</script>
+  <div class="rk-sidebar-skill"><div class="vf-skill-install vf-skill-install-nav" data-skill-install>
+    <button
+      class="vf-skill-install-main"
+      type="button"
+      data-skill-copy
+      data-default-label="SKILL.md"
+      data-skill-content="Read https://vidfarm.cc/skill.md to get started with Vidfarm (agentic video editing). Start by installing the vidfarm devcli (npm i -g @officexapp/vidfarm-devcli) and logging in (vidfarm login)."
+      aria-label="Copy SKILL.md"
+      title="Copy SKILL.md"
+    >
+      <span class="vf-skill-install-main-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span>
+      <span class="vf-skill-install-main-label">SKILL.md</span>
+    </button>
+    <button
+      class="vf-skill-install-menu"
+      type="button"
+      data-skill-menu-toggle
+      aria-haspopup="dialog"
+      aria-expanded="false"
+      aria-label="Open skill install options"
+      title="Open skill install options"
+    >
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5.5" r="1.75"></circle><circle cx="12" cy="12" r="1.75"></circle><circle cx="12" cy="18.5" r="1.75"></circle></svg>
+    </button>
+    <div class="vf-skill-install-popover" data-skill-menu hidden>
+      <div class="vf-skill-install-popover-kicker">Install Command</div>
+      <div class="vf-skill-install-command">
+        <input class="vf-skill-install-input" type="text" readonly value="npx skills add https://github.com/officexapp/vidfarm-director" data-skill-command-input aria-label="Skill install command">
+        <button class="vf-skill-install-copy" type="button" data-skill-command-copy aria-label="Copy install command" title="Copy install command">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+        </button>
+      </div>
+      <a class="vf-skill-install-link" href="https://github.com/officexapp/vidfarm-director" target="_blank" rel="noopener noreferrer">
+        <span class="vf-skill-install-link-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6"></path><path d="M10 14 20 4"></path><path d="M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5"></path></svg></span>
+        <span>View GitHub</span>
+      </a>
+    </div>
+  </div></div>
+  <input type="checkbox" id="rk-navtoggle" class="rk-nav-toggle-cb" hidden>
+  <label for="rk-navtoggle" class="rk-nav-burger" aria-label="Toggle navigation" aria-controls="rk-navtoggle">
+    <svg viewBox="0 0 20 20" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3 6h14M3 10h14M3 14h14"/></svg>
+  </label>
+  <nav class="rk-sidebar-nav" aria-label="Reskin pages">
+    <a class="rk-sidebar-item" href="/discover">Discover</a><a class="rk-sidebar-item" href="/chat">Create</a><a class="rk-sidebar-item" href="/library">Library</a><a class="rk-sidebar-item" href="/calendar">Calendar</a><a class="rk-sidebar-item" href="/guides">Guides</a><a class="rk-sidebar-item" href="/settings">Settings</a>
+  </nav>
+  <button class="rk-sidebar-cloud" id="rkSidebarCloud" type="button" title="Open cloud status" hidden>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19a4.5 4.5 0 0 0 .5-8.98A6 6 0 0 0 6.34 9.5 4 4 0 0 0 7 19h10.5z"/></svg>
+    <span class="rk-sidebar-cloud-label">Cloud status</span>
+  </button>
+  <div class="rk-sidebar-account" title="Signed in as staging@vidfarm.local">
+    <div class="rk-sidebar-account-name">Staging</div>
+    <div class="rk-sidebar-account-email">staging@vidfarm.local</div>
+  </div>
+</aside>
+<div class="rk-content">
+<main class="rk-container-wide rk-page rk-inpaint-page rk-ipv-page">
+  <div class="rk-page-head rk-inpaint-head">
+    <div class="rk-inpaint-head-text">
+      <div class="rk-ip-tabs" role="tablist" aria-label="Editor mode"><a class="rk-ip-tab" href="/tools/image" role="tab" aria-selected="false"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9" r="1.5"/><path d="m4 17 4.5-4.5 3 3L16 11l4 4"/></svg><span>Image</span></a><a class="rk-ip-tab is-active" href="/tools/video" role="tab" aria-selected="true"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="14" height="14" rx="2"/><path d="m17 9 4-2v10l-4-2"/></svg><span>Video</span></a><a class="rk-ip-tab" href="/tools/clipper" role="tab" aria-selected="false"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.1 8.1 20 18M8.1 15.9 20 6"/></svg><span>Clipper</span></a></div>
+      <h1 class="rk-h1">Create Video</h1>
+      <p class="rk-sub">Load a video (or set a start &amp; end frame), scrub the timeline, and paint <strong>time-scoped</strong> mask regions — each mask carries its own moment (MM:SS:mmm) and instruction. Generate and the masks + timecodes + frames become one precise editing prompt for your AI video model.</p>
+    </div>
+    <div class="rk-inpaint-toolbar">
+      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-inpaint-startnew" data-ipv-start-new><svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12"/><path d="M4 10h12"/></svg> Start New</button>
+      <button type="button" class="rk-ip-iconbtn" data-ipv-settings-button aria-label="Settings" title="Settings"><svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8.8 3.4 9.4 2h1.2l.6 1.4 1.2.5 1.4-.6.9.9-.6 1.4.5 1.2 1.4.6v1.2l-1.4.6-.5 1.2.6 1.4-.9.9-1.4-.6-1.2.5-.6 1.4H9.4l-.6-1.4-1.2-.5-1.4.6-.9-.9.6-1.4-.5-1.2L4 8.6V7.4l1.4-.6.5-1.2-.6-1.4.9-.9 1.4.6 1.2-.5Z"/><circle cx="10" cy="8" r="2.4"/></svg></button>
+      <button type="button" class="rk-ip-iconbtn" data-ipv-history-toggle aria-label="Past sessions" title="Past sessions"><svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 10a6.8 6.8 0 1 1 2 4.8"/><path d="M3.2 14.4v-3.6h3.6"/><path d="M10 6.2V10l2.6 1.6"/></svg></button>
+    </div>
+  </div>
+  <div class="rk-inpaint-workbench rk-ipv-workbench">
+    <!-- LEFT: frames + prompt + brush + timed masks -->
+    <section class="rk-inpaint-panel" aria-label="Controls">
+      <div class="rk-inpaint-block">
+        <label class="rk-label">Start &amp; end frames <span class="rk-ip-setting-note">(for full regenerate)</span></label>
+        <div class="rk-ipv-frames">
+          <div class="rk-ipv-frame" data-ipv-frame="first">
+            <button type="button" class="rk-ipv-frame-thumb" data-ipv-frame-open="first" aria-label="Preview Start frame">
+              <span class="rk-ipv-frame-ph" data-ipv-frame-ph="first" aria-hidden="true">◧</span>
+              <img class="rk-ipv-frame-img" data-ipv-frame-img="first" alt="" hidden />
+            </button>
+            <span class="rk-ipv-frame-name">Start</span>
+            <div class="rk-ipv-frame-actions">
+              <button type="button" class="rk-ipv-frame-btn" data-ipv-frame-upload="first" title="Upload an image for the start frame">Replace</button>
+              <button type="button" class="rk-ipv-frame-btn" data-ipv-frame-capture="first" title="Grab the current playhead frame">Use current</button>
+            </div>
+          </div>
+          <div class="rk-ipv-frame" data-ipv-frame="last">
+            <button type="button" class="rk-ipv-frame-thumb" data-ipv-frame-open="last" aria-label="Preview End frame">
+              <span class="rk-ipv-frame-ph" data-ipv-frame-ph="last" aria-hidden="true">◨</span>
+              <img class="rk-ipv-frame-img" data-ipv-frame-img="last" alt="" hidden />
+            </button>
+            <span class="rk-ipv-frame-name">End</span>
+            <div class="rk-ipv-frame-actions">
+              <button type="button" class="rk-ipv-frame-btn" data-ipv-frame-upload="last" title="Upload an image for the end frame">Replace</button>
+              <button type="button" class="rk-ipv-frame-btn" data-ipv-frame-capture="last" title="Grab the current playhead frame">Use current</button>
+            </div>
+          </div>
+        </div>
+        <input data-ipv-frame-input type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" hidden />
+        <span class="rk-hint">Optional. Provide a start and/or end frame to steer the regenerated clip. <strong>Use current</strong> grabs the frame at the playhead.</span>
+      </div>
+      <div class="rk-inpaint-block">
+        <label class="rk-label">Video prompt</label>
+        <div class="rk-ip-promptfield">
+          <textarea class="rk-textarea rk-ip-global" data-ipv-global-prompt placeholder="Describe the overall motion, style, and outcome for the whole clip."></textarea>
+          <button type="button" class="rk-ip-attach" data-ipv-attach aria-label="Attach reference image" title="Attach reference image"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.1 10.7 4.8-4.8a2.5 2.5 0 0 1 3.5 3.5l-6.1 6.1a4 4 0 0 1-5.7-5.7l6.3-6.3"/><path d="m10 8.8-4.1 4.1a1.6 1.6 0 0 0 2.3 2.3l5.6-5.6"/></svg></button>
+        </div>
+        <span class="rk-ip-attach-chips" data-ipv-attachments></span>
+        <input data-ipv-attachment-input type="file" accept="image/jpeg,image/png,image/webp" multiple hidden />
+        <span class="rk-hint">Guidance for the whole video and for consistency across the timed edits below.</span>
+      </div>
+      <div class="rk-inpaint-block">
+        <div class="rk-inpaint-brushrow">
+          <label class="rk-label">Brush <span data-ipv-brush-label>70</span>&nbsp;px</label>
+          <div class="rk-ip-toolbtns">
+            <button type="button" class="rk-ip-iconbtn" data-ipv-undo aria-label="Undo stroke" title="Undo"><svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.2 7H3.8V3.6"/><path d="M4 7a7 7 0 1 1 1.9 6.6"/></svg></button>
+            <button type="button" class="rk-ip-iconbtn" data-ipv-redo aria-label="Redo stroke" title="Redo"><svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12.8 7h3.4V3.6"/><path d="M16 7a7 7 0 1 0-1.9 6.6"/></svg></button>
+            <button type="button" class="rk-ip-iconbtn" data-ipv-clear aria-label="Clear active mask" title="Clear active mask"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"/></svg></button>
+          </div>
+        </div>
+        <input data-ipv-brush class="rk-inpaint-range" type="range" min="6" max="180" step="1" value="70" />
+      </div>
+      <div class="rk-inpaint-block">
+        <div class="rk-inpaint-brushrow">
+          <label class="rk-label">Timed masks</label>
+          <input class="rk-ip-colorpicker" data-ipv-color-picker type="color" value="#ff2d55" aria-label="Next mask color" />
+        </div>
+        <span class="rk-hint">Each mask marks a region <strong>and</strong> a moment. Paint on the video, set the timecode + instruction, then add another mask for a different spot or time. Click a mask to jump the video to its moment.</span>
+        <div class="rk-ipv-masks" data-ipv-masks></div>
+        <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-ip-addcolor" data-ipv-add-mask>+ Add timed mask</button>
+      </div>
+      <div class="rk-inpaint-block">
+        <button type="button" class="rk-btn rk-btn-gold rk-inpaint-generate" data-ipv-submit><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l1.9 5.1 5.1 1.9-5.1 1.9L12 16.5l-1.9-5.1L5 9.5l5.1-1.9z"/></svg> <span data-ipv-submit-label>Generate video</span></button>
+        <p class="rk-inpaint-status" data-ipv-status data-tone="" aria-live="polite"></p>
+      </div>
+    </section>
+    <!-- CENTER: scrubbable video stage -->
+    <section class="rk-inpaint-stage rk-ipv-stage" aria-label="Video canvas">
+      <div class="rk-inpaint-empty" data-ipv-empty>
+        <span class="rk-inpaint-empty-ic" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg></span>
+        <p class="rk-inpaint-empty-title">Load a video to edit</p>
+        <p class="rk-inpaint-empty-sub">Drop a video here, or set a start &amp; end frame and a prompt to generate one.</p>
+        <button type="button" class="rk-btn rk-btn-ink rk-btn-sm rk-ipv-upload" data-ipv-upload><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg> Upload video</button>
+        <input data-ipv-file type="file" accept="video/mp4,video/webm,video/quicktime,video/*" hidden />
+        <div class="rk-ip-gen" id="rk-ipv-gen">
+          <span class="rk-ip-gen-or">or</span>
+          <div class="rk-ip-gen-box">
+            <textarea id="rk-ipv-genprompt" class="rk-ip-gen-input" rows="2" placeholder="Or describe the video you want"></textarea>
+            <div class="rk-ip-gen-refs" id="rk-ipv-genrefs" hidden></div>
+            <div class="rk-ip-gen-bar">
+              <button type="button" class="rk-ip-gen-clip" id="rk-ipv-genclip" aria-label="Attach reference images from your files" title="Attach reference images from your files"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.1 10.7 4.8-4.8a2.5 2.5 0 0 1 3.5 3.5l-6.1 6.1a4 4 0 0 1-5.7-5.7l6.3-6.3"/><path d="m10 8.8-4.1 4.1a1.6 1.6 0 0 0 2.3 2.3l5.6-5.6"/></svg></button>
+              <span class="rk-ip-gen-hint">Generate a brand-new clip from a prompt (+ optional frames).</span>
+              <button type="button" class="rk-ip-gen-send" id="rk-ipv-gensend" aria-label="Generate video"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg></button>
+            </div>
+          </div>
+          <p class="rk-ip-gen-status" id="rk-ipv-genstatus" data-tone="" aria-live="polite"></p>
+        </div>
+      </div>
+      <div class="rk-ipv-player" data-ipv-player hidden>
+        <div class="rk-ipv-canvaswrap" data-ipv-canvaswrap>
+          <video data-ipv-video class="rk-ipv-video" playsinline></video>
+          <canvas data-ipv-canvas class="rk-ipv-canvas"></canvas>
+          <div class="editor-inpaint-brush-cursor" data-ipv-brush-cursor aria-hidden="true"></div>
+        </div>
+        <div class="rk-ipv-controls">
+          <button type="button" class="rk-ipv-playpause" data-ipv-playpause aria-label="Play/pause"><svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5.5v13a1 1 0 0 0 1.5.87l11-6.5a1 1 0 0 0 0-1.74l-11-6.5A1 1 0 0 0 7 5.5Z"/></svg></button>
+          <input type="range" class="rk-ipv-scrub" data-ipv-scrub min="0" max="1000" step="1" value="0" aria-label="Seek" />
+          <div class="rk-ipv-timecode">
+            <input class="rk-ipv-timecode-input" data-ipv-timecode-input type="text" inputmode="numeric" spellcheck="false" value="00:00:000" aria-label="Current time MM:SS:mmm" />
+            <button type="button" class="rk-ip-iconbtn rk-ipv-timecode-copy" data-ipv-timecode-copy aria-label="Copy current timecode" title="Copy timecode"><svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1"/><path d="M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2"/></svg></button>
+            <span class="rk-ipv-duration" data-ipv-duration>/ 00:00:000</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- RIGHT: result + tracer-grouped history -->
+    <section class="rk-inpaint-output" aria-label="Result and history">
+      <div class="rk-inpaint-result" data-ipv-output hidden>
+        <div class="rk-inpaint-result-head">
+          <h2 class="rk-inpaint-h2">Result</h2>
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-ipv-save>Save to Files</button>
+        </div>
+        <video class="rk-ipv-result-video" data-ipv-result controls playsinline></video>
+      </div>
+      <div class="rk-inpaint-history">
+        <div class="rk-inpaint-history-head">
+          <h2 class="rk-inpaint-h2">This session</h2>
+          <div class="rk-ip-histtools">
+            <button type="button" class="rk-ip-iconbtn" data-ipv-history-refresh aria-label="Refresh history" title="Refresh history"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-1.9-4.6"/><path d="M16.5 4.2v4.2h-4.2"/></svg></button>
+          </div>
+        </div>
+        <div class="rk-inpaint-historylist" data-ipv-history-list>
+          <div class="custom-inpaint-history-empty">Loading history…</div>
+        </div>
+      </div>
+    </section>
+  </div>
+  <!-- settings modal (provider + duration + aspect + audio + tracer) -->
+  <div class="rk-ip-settingsmodal" data-ipv-settings hidden>
+    <div class="rk-ip-settingsmodal-panel" role="dialog" aria-modal="true" aria-label="Video generation settings">
+      <div class="rk-ip-settingsmodal-head">
+        <span class="rk-ip-settingsmodal-title">Settings</span>
+        <button type="button" class="rk-ip-iconbtn" data-ipv-settings-close aria-label="Close settings" title="Close"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10"/><path d="M15 5 5 15"/></svg></button>
+      </div>
+      <div class="rk-ip-settingsmodal-body">
+        <label class="rk-ip-setting rk-ip-provider" data-ipv-provider-wrap>
+          <span class="rk-label">AI model</span>
+          <select data-ipv-provider class="rk-select rk-inpaint-select"></select>
+        </label>
+        <label class="rk-ip-setting">
+          <span class="rk-label">Duration</span>
+          <select data-ipv-duration class="rk-select rk-inpaint-select">
+            <option value="">Auto</option>
+            <option value="4">4 seconds</option>
+            <option value="6">6 seconds</option>
+            <option value="8">8 seconds</option>
+            <option value="10">10 seconds</option>
+          </select>
+        </label>
+        <label class="rk-ip-setting rk-ipv-audio-row">
+          <span class="rk-label">Generate audio</span>
+          <input type="checkbox" data-ipv-audio class="rk-ipv-audio" />
+        </label>
+        <label class="rk-ip-setting">
+          <span class="rk-label">Session name <span class="rk-ip-setting-note">(tracer — groups this session's History)</span></span>
+          <input data-ipv-tracer class="rk-ip-input" type="text" autocomplete="off" spellcheck="false" placeholder="Auto-named from your first prompt" />
+        </label>
+      </div>
+    </div>
+  </div>
+  <!-- past-sessions left slide-in panel -->
+  <aside class="rk-ip-sessions" data-ipv-sessions aria-label="Past sessions">
+    <div class="rk-ip-sessions-head">
+      <span class="rk-ip-sessions-title">Past sessions</span>
+      <button type="button" class="rk-ip-iconbtn" data-ipv-sessions-close aria-label="Close past sessions" title="Close"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10"/><path d="M15 5 5 15"/></svg></button>
+    </div>
+    <div class="rk-ip-sessions-list" data-ipv-sessions-list>
+      <div class="rk-ip-sessions-empty">Loading…</div>
+    </div>
+  </aside>
+  <div class="rk-ip-sessions-backdrop" data-ipv-sessions-backdrop hidden></div>
+  <!-- video preview lightbox (result + history) -->
+  <div class="rk-ip-lightbox rk-ipv-lightbox" data-ipv-lightbox data-open="false" hidden>
+    <div class="rk-ipv-lightbox-dialog" role="dialog" aria-modal="true" aria-label="Video output">
+      <div class="custom-inpaint-lightbox-head">
+        <p class="custom-inpaint-lightbox-title" data-ipv-lightbox-title>Video output</p>
+        <div class="custom-inpaint-lightbox-actions">
+          <button type="button" class="rk-ip-iconbtn" data-ipv-lightbox-copy aria-label="Copy video URL" title="Copy URL"><svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1"/><path d="M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2"/></svg></button>
+          <a class="rk-btn rk-btn-ink rk-btn-sm" data-ipv-lightbox-download href="#" target="_blank" rel="noopener noreferrer" download><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3v9"/><path d="m6.5 8.5 3.5 3.5 3.5-3.5"/><path d="M4 16h12"/></svg> Download</a>
+          <button type="button" class="rk-ip-iconbtn" data-ipv-lightbox-close aria-label="Close preview" title="Close"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10"/><path d="M15 5 5 15"/></svg></button>
+        </div>
+      </div>
+      <div class="rk-ipv-lightbox-stage">
+        <video data-ipv-lightbox-video controls playsinline></video>
+      </div>
+    </div>
+  </div>
+  <script type="application/json" data-rk-inpaint-video-boot>{"accountId":"{{ACCOUNT_ID}}","isLoggedIn":true}</script>
+</main>
+</div>
+<button class="rk-fab" id="rkFab" type="button" aria-label="Open AI chat" aria-expanded="false" aria-controls="rkAichat" title="Chat with vidfarm AI — drag to move">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
+</button>
+<aside class="rk-aichat has-files" id="rkAichat" hidden aria-label="AI chat panel">
+  <div class="rk-aichat-files" id="rkAichatFiles" aria-label="Files">
+    <div class="rk-aichat-files-head">
+      <span class="rk-aichat-files-title">Your files</span>
+      <button class="rk-aichat-tool" id="rkFilesClose" type="button" title="Minimize files" aria-label="Minimize files">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
+      </button>
+    </div>
+    <div class="rk-aichat-files-mount" id="rkAichatFilesMount" data-rk-directory data-mode="attach" data-primary-click="preview"></div>
+  </div>
+  <div class="rk-aichat-history" id="rkAichatHistory" aria-label="Chat history">
+    <div class="rk-aichat-hist-head">
+      <span class="rk-aichat-hist-title">Chat history</span>
+      <button class="rk-aichat-tool" id="rkHistoryClose" type="button" title="Back to chat" aria-label="Back to chat">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
+      </button>
+    </div>
+    <div class="rk-aichat-hist-body" id="rkAichatHistBody"></div>
+  </div>
+  <div class="rk-aichat-cloud" id="rkAichatCloud" aria-label="Cloud status">
+    <div class="rk-aichat-cloud-head">
+      <span class="rk-aichat-cloud-title">Cloud status</span>
+      <button class="rk-aichat-tool rk-aichat-cloud-refresh" id="rkCloudRefresh" type="button" title="Refresh" aria-label="Refresh cloud tasks">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></svg>
+      </button>
+      <button class="rk-aichat-tool" id="rkCloudClose" type="button" title="Back to chat" aria-label="Back to chat">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
+      </button>
+    </div>
+    <div class="rk-aichat-cloud-filters" id="rkCloudFilters">
+      <button type="button" class="rk-cloud-fbtn is-on" data-f="all">All</button>
+      <button type="button" class="rk-cloud-fbtn" data-f="running">Running</button>
+      <button type="button" class="rk-cloud-fbtn" data-f="done">Done</button>
+      <button type="button" class="rk-cloud-fbtn" data-f="error">Error</button>
+    </div>
+    <div class="rk-aichat-cloud-body" id="rkCloudBody"></div>
+  </div>
+  <div class="rk-aichat-main">
+    <header class="rk-aichat-head">
+      <span class="rk-brand-mark">V</span>
+      <div class="rk-aichat-head-main">
+        <div class="rk-aichat-title">VidFarm AI</div>
+        <div class="rk-aichat-sub">on your own AI keys</div>
+      </div>
+      <button class="rk-aichat-tool" id="rkHistoryToggle" type="button" title="Chat history" aria-label="Toggle chat history" aria-pressed="false">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>
+      </button>
+      <button class="rk-aichat-tool" id="rkCloudToggle" type="button" title="Cloud status" aria-label="Toggle cloud status" aria-pressed="false">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19a4.5 4.5 0 0 0 .5-8.98A6 6 0 0 0 6.34 9.5 4 4 0 0 0 7 19h10.5z"/></svg>
+        <span class="rk-cloud-dot" id="rkCloudDot" hidden></span>
+      </button>
+      <button class="rk-aichat-tool" id="rkCopyThread" type="button" title="Copy chat ID" aria-label="Copy chat ID">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+      </button>
+      <button class="rk-aichat-tool" id="rkNewChat" type="button" title="New chat" aria-label="Start a new chat">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
+      </button>
+      <button class="rk-aichat-tool" id="rkAichatMin" type="button" title="Minimize" aria-label="Minimize chat">—</button>
+    </header>
+    <div class="rk-aichat-log" id="rkAichatLog">
+      <div class="rk-aichat-msg is-ai">Hi! I'm the vidfarm assistant. I can take real actions on your account — browse your files, hit vidfarm APIs, kick off renders. Ask me anything, or attach a file from the panel on the left.</div>
+    </div>
+    <div class="rk-aichat-chips" id="rkAichatChips"></div>
+    <form class="rk-aichat-composer" id="rkAichatForm">
+      <textarea class="rk-aichat-field" id="rkAichatInput" rows="3" placeholder="Ask the vidfarm AI…" autocomplete="off"></textarea>
+      <div class="rk-aichat-composer-actions">
+        <button class="rk-aichat-attach" id="rkAichatAttach" type="button" title="Attach a file" aria-label="Attach a file">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+        </button>
+        <button class="rk-btn rk-btn-gold rk-btn-sm" type="submit">Send</button>
+      </div>
+    </form>
+  </div>
+</aside>
+</div>
+<script>
+(function(){
+  var videoEl = document.querySelector("[data-ipv-video]");
+  var canvas = document.querySelector("[data-ipv-canvas]");
+  var brushCursor = document.querySelector("[data-ipv-brush-cursor]");
+  var player = document.querySelector("[data-ipv-player]");
+  var emptyState = document.querySelector("[data-ipv-empty]");
+  var canvasWrap = document.querySelector("[data-ipv-canvaswrap]");
+  var uploadBtn = document.querySelector("[data-ipv-upload]");
+  var fileInput = document.querySelector("[data-ipv-file]");
+  var startNewBtn = document.querySelector("[data-ipv-start-new]");
+  var statusEl = document.querySelector("[data-ipv-status]");
+  var submitBtn = document.querySelector("[data-ipv-submit]");
+  var submitLabel = document.querySelector("[data-ipv-submit-label]");
+  var globalPrompt = document.querySelector("[data-ipv-global-prompt]");
+  var attachBtn = document.querySelector("[data-ipv-attach]");
+  var attachChips = document.querySelector("[data-ipv-attachments]");
+  var attachInput = document.querySelector("[data-ipv-attachment-input]");
+  var brushInput = document.querySelector("[data-ipv-brush]");
+  var brushLabel = document.querySelector("[data-ipv-brush-label]");
+  var colorPicker = document.querySelector("[data-ipv-color-picker]");
+  var addMaskBtn = document.querySelector("[data-ipv-add-mask]");
+  var masksList = document.querySelector("[data-ipv-masks]");
+  var undoBtn = document.querySelector("[data-ipv-undo]");
+  var redoBtn = document.querySelector("[data-ipv-redo]");
+  var clearBtn = document.querySelector("[data-ipv-clear]");
+  var frameInput = document.querySelector("[data-ipv-frame-input]");
+  var playpause = document.querySelector("[data-ipv-playpause]");
+  var scrub = document.querySelector("[data-ipv-scrub]");
+  var timecodeInput = document.querySelector("[data-ipv-timecode-input]");
+  var timecodeCopy = document.querySelector("[data-ipv-timecode-copy]");
+  var durationEl = document.querySelector("[data-ipv-duration]");
+  var outputPanel = document.querySelector("[data-ipv-output]");
+  var resultVideo = document.querySelector("[data-ipv-result]");
+  var saveBtn = document.querySelector("[data-ipv-save]");
+  var historyList = document.querySelector("[data-ipv-history-list]");
+  var historyRefresh = document.querySelector("[data-ipv-history-refresh]");
+  var settingsBtn = document.querySelector("[data-ipv-settings-button]");
+  var settingsModal = document.querySelector("[data-ipv-settings]");
+  var settingsClose = document.querySelector("[data-ipv-settings-close]");
+  var providerWrap = document.querySelector("[data-ipv-provider-wrap]");
+  var providerSelect = document.querySelector("[data-ipv-provider]");
+  var durationSelect = document.querySelector("[data-ipv-duration]");
+  var audioToggle = document.querySelector("[data-ipv-audio]");
+  var tracerInput = document.querySelector("[data-ipv-tracer]");
+  var sessionsToggle = document.querySelector("[data-ipv-history-toggle]");
+  var sessionsPanel = document.querySelector("[data-ipv-sessions]");
+  var sessionsList = document.querySelector("[data-ipv-sessions-list]");
+  var sessionsClose = document.querySelector("[data-ipv-sessions-close]");
+  var sessionsBackdrop = document.querySelector("[data-ipv-sessions-backdrop]");
+  var lightbox = document.querySelector("[data-ipv-lightbox]");
+  var lightboxTitle = document.querySelector("[data-ipv-lightbox-title]");
+  var lightboxVideo = document.querySelector("[data-ipv-lightbox-video]");
+  var lightboxCopy = document.querySelector("[data-ipv-lightbox-copy]");
+  var lightboxDownload = document.querySelector("[data-ipv-lightbox-download]");
+  var lightboxClose = document.querySelector("[data-ipv-lightbox-close]");
+  if(!videoEl || !canvas || !masksList || !submitBtn) return;
+  var PLAY_SVG = "<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M7 5.5v13a1 1 0 0 0 1.5.87l11-6.5a1 1 0 0 0 0-1.74l-11-6.5A1 1 0 0 0 7 5.5Z\"/></svg>";
+  var PAUSE_SVG = "<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/><rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/></svg>";
+  var CLOCK_SVG = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M10 6v4l2.6 1.6\"/></svg>";
+  // ===== state =====
+  var sourceVideoUrl = "";        // playable URL (may be a blob: object URL for uploads)
+  var sourceVideoName = "";
+  var sourceObjectUrl = "";       // revoke on reset
+  var masks = [];                 // { id, color, prompt, timeSec, strokes:[], redo:[] }
+  var activeMaskId = "";
+  var isPainting = false;
+  var frames = { first: null, last: null }; // { url, name }
+  var attachments = [];           // { id, fileName, url }
+  var maxAttachments = 8;
+  var allowedAttachTypes = { "image/jpeg":1, "image/png":1, "image/webp":1 };
+  var historyItems = [];
+  var hiddenHistoryKeys = {};
+  var sourceHistoryItems = [];
+  var sessionTracer = "";
+  var tracerAutoPending = true;
+  var maskSeq = 0;
+  var isSeekingFor = null;        // pending frame-capture continuation
+  // ===== small helpers =====
+  function pad(n, w){ n = String(Math.max(0, Math.floor(n))); while(n.length < w) n = "0" + n; return n; }
+  function formatTimecode(sec){
+    var s = Math.max(0, Number(sec) || 0);
+    var mm = Math.floor(s / 60);
+    var ss = Math.floor(s % 60);
+    var ms = Math.round((s - Math.floor(s)) * 1000);
+    if(ms >= 1000){ ms -= 1000; ss += 1; }
+    if(ss >= 60){ ss -= 60; mm += 1; }
+    return pad(mm, 2) + ":" + pad(ss, 2) + ":" + pad(ms, 3);
+  }
+  function parseTimecode(str){
+    var parts = String(str || "").trim().split(":");
+    if(!parts.length) return NaN;
+    var mm = 0, ss = 0, ms = 0;
+    if(parts.length >= 3){ mm = parseInt(parts[0], 10) || 0; ss = parseInt(parts[1], 10) || 0; ms = parseInt(parts[2], 10) || 0; }
+    else if(parts.length === 2){ mm = parseInt(parts[0], 10) || 0; ss = parseInt(parts[1], 10) || 0; }
+    else { ss = parseInt(parts[0], 10) || 0; }
+    return mm * 60 + ss + ms / 1000;
+  }
+  function absoluteUrl(value){ return new URL(value, window.location.href).toString(); }
+  function parseJsonResponse(response){ return response.json().catch(function(){ return {}; }); }
+  function setStatus(message, tone){ if(!statusEl) return; statusEl.textContent = message || ""; statusEl.setAttribute("data-tone", tone || ""); }
+  function nowIso(){ return new Date().toISOString(); }
+  function uid(prefix){
+    if(globalThis.crypto && globalThis.crypto.randomUUID) return prefix + globalThis.crypto.randomUUID().replace(/-/g, "").slice(0, 8);
+    return prefix + Math.random().toString(16).slice(2, 10);
+  }
+  // ===== tracer =====
+  function tracerSuffix(){
+    return (globalThis.crypto && globalThis.crypto.randomUUID)
+      ? globalThis.crypto.randomUUID().replace(/-/g, "").slice(0, 6)
+      : Math.random().toString(16).slice(2, 8);
+  }
+  function slugifyTracer(value){
+    var normalized = String(value || "").trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32);
+    return normalized || "video-edit";
+  }
+  function nameTracerFromSeed(seed){
+    var value = "video-edit-" + slugifyTracer(seed) + "-" + tracerSuffix();
+    sessionTracer = value; tracerAutoPending = false; if(tracerInput) tracerInput.value = value; return value;
+  }
+  function resolveTracer(){ if(sessionTracer) return sessionTracer; var v = tracerInput ? tracerInput.value.trim() : ""; return v; }
+  function getTracerValue(){ if(sessionTracer) return sessionTracer; var v = tracerInput ? tracerInput.value.trim() : ""; if(v){ sessionTracer = v; tracerAutoPending = false; return v; } return nameTracerFromSeed("video-edit"); }
+  // ===== provider list =====
+  function loadProviders(){
+    fetch("/api/v1/user/me/provider-keys", { credentials: "same-origin" }).then(parseJsonResponse).then(function(payload){
+      var supported = { openai:1, gemini:1, openrouter:1 };
+      var providers = []; var seen = {};
+      var keys = (payload && payload.provider_keys) || [];
+      for(var i = 0; i < keys.length; i++){
+        var key = keys[i]; var provider = String(key.provider || ""); var stat = String(key.status || "active");
+        var cd = key.cooldown_until ? Date.parse(String(key.cooldown_until)) : 0;
+        if(!supported[provider] || stat !== "active" || (cd && cd > Date.now()) || seen[provider]) continue;
+        seen[provider] = 1; providers.push(provider);
+      }
+      if(providerSelect){
+        providerSelect.innerHTML = '<option value="">Auto</option>' + providers.map(function(p){ return '<option value="' + p + '">' + p.charAt(0).toUpperCase() + p.slice(1) + '</option>'; }).join("");
+      }
+      if(providerWrap) providerWrap.setAttribute("data-visible", providers.length > 1 ? "true" : "false");
+    }).catch(function(){});
+  }
+  // ===== upload / save =====
+  function uploadTemporaryBlob(blob, fileName, contentType, folderPath){
+    var folder = folderPath || "inpaints/_inputs";
+    return fetch("/api/v1/user/me/temporary-files/presign", {
+      method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" },
+      body: JSON.stringify({ file_name: fileName, content_type: contentType, size_bytes: blob.size, folder_path: folder })
+    }).then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); }).then(function(res){
+      var presign = res.p;
+      if(!res.ok || !presign || !presign.transport) throw new Error((presign && presign.error) || "Unable to prepare upload.");
+      if(presign.transport === "server"){
+        var formData = new FormData();
+        formData.append((presign.upload && presign.upload.form_field) || "file", new File([blob], fileName, { type: contentType }));
+        formData.append("folder_path", folder);
+        return fetch((presign.upload && presign.upload.url) || "/api/v1/user/me/temporary-files/upload", { method: (presign.upload && presign.upload.method) || "POST", credentials: "same-origin", body: formData })
+          .then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); })
+          .then(function(u){ if(!u.ok || !u.p.file) throw new Error(u.p.error || "Unable to upload file."); return u.p.file.viewUrl || u.p.file.view_url || u.p.file.s3Url || u.p.file.s3_url; });
+      }
+      return fetch(presign.upload.url, { method: presign.upload.method, headers: presign.upload.headers, body: blob }).then(function(r){
+        if(!r.ok) throw new Error("Upload failed with status " + r.status + ".");
+        return fetch("/api/v1/user/me/temporary-files", { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" },
+          body: JSON.stringify({ file_id: presign.file_id, file_name: presign.file_name, content_type: presign.content_type, size_bytes: blob.size, storage_key: presign.storage_key, folder_path: presign.folder_path || folder }) })
+          .then(function(r2){ return parseJsonResponse(r2).then(function(p){ return { ok: r2.ok, p: p }; }); })
+          .then(function(f){ if(!f.ok || !f.p.file) throw new Error(f.p.error || "Unable to save file."); return f.p.file.viewUrl || f.p.file.view_url || f.p.file.s3Url || f.p.file.s3_url; });
+      });
+    });
+  }
+  function saveMediaToFiles(mediaUrl, defaultName){
+    if(!mediaUrl) return;
+    var dir = window.__vidfarmDirectory;
+    if(!dir || !dir.pick){ setStatus("File browser isn't available right now.", "error"); return; }
+    dir.pick({ select: "folder", roots: ["files"], initialPath: "/files", title: "Save to My Files", hint: "Open a folder in your Files, then choose it to save this video there.", confirmLabel: "Save here",
+      onPick: function(folder){
+        setStatus("Saving to " + (folder && folder.path ? folder.path : "My Files") + "\u2026", "");
+        fetch("/api/v1/user/me/attachments/from-url", { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" },
+          body: JSON.stringify({ source_url: mediaUrl, folder_path: (folder && folder.folderPath) || "", file_name: defaultName || "" }) })
+          .then(function(r){ return r.json().then(function(j){ return { ok: r.ok, j: j }; }); })
+          .then(function(res){ if(!res.ok || !res.j || res.j.error) throw new Error((res.j && res.j.error) || "Couldn't save to My Files."); setStatus("Saved to " + (folder && folder.path ? folder.path : "My Files") + ".", "success"); })
+          .catch(function(err){ setStatus(err && err.message ? err.message : "Couldn't save to My Files.", "error"); });
+      } });
+  }
+  function copyText(value){
+    if(navigator.clipboard && window.isSecureContext){ return navigator.clipboard.writeText(value).then(function(){ return true; }).catch(function(){ return fallbackCopy(value); }); }
+    return Promise.resolve(fallbackCopy(value));
+  }
+  function fallbackCopy(value){
+    var field = document.createElement("textarea"); field.value = value; field.setAttribute("readonly", ""); field.style.position = "fixed"; field.style.opacity = "0";
+    document.body.appendChild(field); field.select(); var ok = false; try { ok = document.execCommand("copy"); } catch(_){} field.remove(); return ok;
+  }
+  // ===== masks =====
+  function activeMask(){ for(var i = 0; i < masks.length; i++){ if(masks[i].id === activeMaskId) return masks[i]; } return null; }
+  function normalizeHex(v){ v = String(v || "").trim(); if(/^#[0-9a-fA-F]{6}$/.test(v)) return v.toLowerCase(); if(/^#[0-9a-fA-F]{3}$/.test(v)){ return ("#" + v[1] + v[1] + v[2] + v[2] + v[3] + v[3]).toLowerCase(); } return "#ff2d55"; }
+  var PALETTE = ["#ff2d55","#0a84ff","#34c759","#ff9f0a","#bf5af2","#ff375f","#5ac8fa","#ffd60a"];
+  function nextColor(){ var used = {}; masks.forEach(function(m){ used[m.color] = 1; }); for(var i = 0; i < PALETTE.length; i++){ if(!used[PALETTE[i]]) return PALETTE[i]; } return PALETTE[masks.length % PALETTE.length]; }
+  function addMask(atTime, color){
+    var m = { id: uid("mask_"), color: normalizeHex(color || nextColor()), prompt: "", timeSec: (atTime != null ? atTime : (videoEl.currentTime || 0)), strokes: [], redo: [] };
+    masks.push(m); activeMaskId = m.id; if(colorPicker) colorPicker.value = m.color; renderMasks(); return m;
+  }
+  function removeMask(id){
+    masks = masks.filter(function(m){ return m.id !== id; });
+    if(activeMaskId === id) activeMaskId = masks.length ? masks[masks.length - 1].id : "";
+    renderMasks(); redraw();
+  }
+  function renderMasks(){
+    masksList.innerHTML = "";
+    if(!masks.length){
+      var empty = document.createElement("div"); empty.className = "rk-ipv-masks-empty";
+      empty.textContent = "No masks yet. Paint on the video, or use + Add timed mask, to mark a region at a moment.";
+      masksList.appendChild(empty); syncUndoRedo(); return;
+    }
+    masks.forEach(function(m){
+      var row = document.createElement("div"); row.className = "rk-ipv-mask"; row.dataset.maskId = m.id; row.setAttribute("data-active", m.id === activeMaskId ? "true" : "false");
+      var dot = document.createElement("button"); dot.type = "button"; dot.className = "rk-ipv-mask-dot"; dot.style.setProperty("--ipv-c", m.color); dot.dataset.maskSelect = m.id; dot.title = "Select this mask to paint";
+      var bodyEl = document.createElement("div"); bodyEl.className = "rk-ipv-mask-body";
+      var rowTop = document.createElement("div"); rowTop.className = "rk-ipv-mask-row";
+      var timeBtn = document.createElement("button"); timeBtn.type = "button"; timeBtn.className = "rk-ipv-mask-time"; timeBtn.dataset.maskSeek = m.id; timeBtn.title = "Jump the video to this moment"; timeBtn.innerHTML = CLOCK_SVG + "<span>" + formatTimecode(m.timeSec) + "</span>";
+      var setBtn = document.createElement("button"); setBtn.type = "button"; setBtn.className = "rk-ipv-mask-mini"; setBtn.dataset.maskSettime = m.id; setBtn.title = "Set this mask to the current playhead"; setBtn.innerHTML = "<svg width='13' height='13' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10 4v12'/><path d='m6 8 4-4 4 4'/></svg>";
+      var delBtn = document.createElement("button"); delBtn.type = "button"; delBtn.className = "rk-ipv-mask-mini is-danger"; delBtn.dataset.maskRemove = m.id; delBtn.title = "Remove this mask"; delBtn.innerHTML = "<svg width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 5l10 10M15 5 5 15'/></svg>";
+      rowTop.appendChild(timeBtn); rowTop.appendChild(setBtn); rowTop.appendChild(delBtn);
+      var ta = document.createElement("textarea"); ta.className = "rk-ipv-mask-prompt"; ta.dataset.maskPrompt = m.id; ta.placeholder = "What changes in this region at this moment?"; ta.value = m.prompt || "";
+      bodyEl.appendChild(rowTop); bodyEl.appendChild(ta);
+      row.appendChild(dot); row.appendChild(bodyEl); masksList.appendChild(row);
+    });
+    syncUndoRedo();
+  }
+  function selectMask(id){ activeMaskId = id; var m = activeMask(); if(m && colorPicker) colorPicker.value = m.color; renderMasks(); redraw(); }
+  function syncUndoRedo(){ var m = activeMask(); if(undoBtn) undoBtn.disabled = !m || !m.strokes.length; if(redoBtn) redoBtn.disabled = !m || !m.redo.length; }
+  // ===== canvas / painting =====
+  function syncCanvasSize(){
+    var w = Math.round(videoEl.clientWidth), h = Math.round(videoEl.clientHeight);
+    if(w > 0 && h > 0 && (canvas.width !== w || canvas.height !== h)){ canvas.width = w; canvas.height = h; }
+    updateBrushCursorSize();
+  }
+  function updateBrushCursorSize(){
+    if(!brushCursor) return; var size = Number(brushInput ? brushInput.value : 70) || 70;
+    var rect = canvas.getBoundingClientRect(); var scale = rect.width && canvas.width ? rect.width / canvas.width : 1;
+    canvasWrap.style.setProperty("--inpaint-brush-cursor-size", (size * scale) + "px");
+  }
+  function updateBrushCursorPos(event){
+    if(!brushCursor) return; var rect = canvasWrap.getBoundingClientRect();
+    canvasWrap.style.setProperty("--inpaint-brush-cursor-x", (event.clientX - rect.left) + "px");
+    canvasWrap.style.setProperty("--inpaint-brush-cursor-y", (event.clientY - rect.top) + "px");
+    brushCursor.setAttribute("data-visible", "true");
+  }
+  function hideBrushCursor(){ if(brushCursor) brushCursor.setAttribute("data-visible", "false"); }
+  function getPoint(event){
+    var rect = canvas.getBoundingClientRect();
+    return { x: Math.max(0, Math.min(1, (event.clientX - rect.left) / (rect.width || 1))), y: Math.max(0, Math.min(1, (event.clientY - rect.top) / (rect.height || 1))) };
+  }
+  var VISIBILITY_WINDOW = 0.4; // seconds either side of a mask's moment
+  function drawStrokes(strokes, color, alpha){
+    var ctx = canvas.getContext("2d"); if(!ctx) return;
+    ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.globalAlpha = alpha; ctx.strokeStyle = color;
+    for(var s = 0; s < strokes.length; s++){
+      var stroke = strokes[s]; if(!stroke.points || !stroke.points.length) continue;
+      ctx.lineWidth = stroke.size; ctx.beginPath();
+      ctx.moveTo(stroke.points[0].x * canvas.width, stroke.points[0].y * canvas.height);
+      if(stroke.points.length === 1) ctx.lineTo(stroke.points[0].x * canvas.width + 0.01, stroke.points[0].y * canvas.height + 0.01);
+      else for(var i = 1; i < stroke.points.length; i++) ctx.lineTo(stroke.points[i].x * canvas.width, stroke.points[i].y * canvas.height);
+      ctx.stroke();
+    }
+    ctx.globalAlpha = 1;
+  }
+  function redraw(){
+    var ctx = canvas.getContext("2d"); if(!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    var t = videoEl.currentTime || 0;
+    for(var i = 0; i < masks.length; i++){
+      var m = masks[i]; if(!m.strokes.length) continue;
+      var isActive = m.id === activeMaskId;
+      var inWindow = Math.abs(m.timeSec - t) <= VISIBILITY_WINDOW;
+      if(isActive || inWindow) drawStrokes(m.strokes, m.color, isActive ? 0.9 : 0.55);
+    }
+  }
+  function beginStroke(event){
+    if(!sourceVideoUrl || submitBtn.disabled) return;
+    event.preventDefault();
+    if(!videoEl.paused) videoEl.pause();
+    var m = activeMask();
+    if(!m) m = addMask(videoEl.currentTime || 0);
+    try { canvas.setPointerCapture(event.pointerId); } catch(_){}
+    isPainting = true;
+    var stroke = { size: Number(brushInput ? brushInput.value : 70) || 70, points: [getPoint(event)] };
+    m.strokes.push(stroke); m.redo = []; redraw(); syncUndoRedo();
+  }
+  function continueStroke(event){
+    updateBrushCursorPos(event);
+    if(!isPainting) return; event.preventDefault();
+    var m = activeMask(); if(!m || !m.strokes.length) return;
+    m.strokes[m.strokes.length - 1].points.push(getPoint(event)); redraw();
+  }
+  function endStroke(event){ if(!isPainting) return; isPainting = false; try { canvas.releasePointerCapture(event.pointerId); } catch(_){} }
+  // ===== source video =====
+  function clearSourceObjectUrl(){ if(sourceObjectUrl){ try { URL.revokeObjectURL(sourceObjectUrl); } catch(_){} sourceObjectUrl = ""; } }
+  function sourceNameFromUrl(value){ try { var p = new URL(value, window.location.href).pathname; return decodeURIComponent((p.split("/").filter(Boolean).pop()) || "") || "Source video"; } catch(_){ return "Source video"; } }
+  var crossOriginRetried = false;
+  function loadSourceUrl(value, name){
+    if(!value) return;
+    var url; try { url = absoluteUrl(value); } catch(_){ setStatus("That video URL is invalid.", "error"); return; }
+    clearSourceObjectUrl();
+    sourceVideoUrl = url; sourceVideoName = name || sourceNameFromUrl(url);
+    emptyState.hidden = true; if(player) player.hidden = false; outputPanel.hidden = true;
+    crossOriginRetried = false;
+    // A cross-origin source is opened with crossorigin=anonymous so "Use current"
+    // frame-capture can read pixels when the host sends CORS headers; if the load
+    // errors (no CORS), we retry once WITHOUT it so playback still works (frame
+    // capture then falls back to a manual upload).
+    var sameOrigin = false; try { sameOrigin = new URL(url).origin === window.location.origin; } catch(_){}
+    if(sameOrigin) videoEl.removeAttribute("crossorigin"); else videoEl.setAttribute("crossorigin", "anonymous");
+    videoEl.addEventListener("loadedmetadata", function(){ syncCanvasSize(); if(durationEl) durationEl.textContent = "/ " + formatTimecode(videoEl.duration || 0); redraw(); }, { once: true });
+    videoEl.onerror = function(){ if(!crossOriginRetried && videoEl.getAttribute("crossorigin")){ crossOriginRetried = true; videoEl.removeAttribute("crossorigin"); videoEl.src = url; videoEl.load(); } };
+    videoEl.src = url;
+    videoEl.load();
+    setStatus("Video ready. Scrub the timeline and paint timed masks.", "success");
+  }
+  function loadSourceFile(file){
+    if(!file) return;
+    clearSourceObjectUrl();
+    sourceObjectUrl = URL.createObjectURL(file);
+    sourceVideoUrl = sourceObjectUrl; sourceVideoName = file.name || "Uploaded video";
+    emptyState.hidden = true; if(player) player.hidden = false; outputPanel.hidden = true;
+    videoEl.removeAttribute("crossorigin"); // local blob doesn't need CORS and avoids taint
+    videoEl.src = sourceObjectUrl;
+    videoEl.addEventListener("loadedmetadata", function(){ syncCanvasSize(); if(durationEl) durationEl.textContent = "/ " + formatTimecode(videoEl.duration || 0); redraw(); }, { once: true });
+    videoEl.load();
+    setStatus("Video loaded. Scrub the timeline and paint timed masks.", "success");
+  }
+  // ===== start/end frame slots =====
+  var pendingFrameSlot = null;
+  function setFrame(which, url, name){
+    frames[which] = { url: url, name: name || "" };
+    var img = document.querySelector('[data-ipv-frame-img="' + which + '"]');
+    var ph = document.querySelector('[data-ipv-frame-ph="' + which + '"]');
+    if(img){ img.src = url; img.hidden = false; }
+    if(ph) ph.style.display = "none";
+  }
+  function captureCurrentFrame(which){
+    if(!sourceVideoUrl){ setStatus("Load a video first, then grab a frame.", "error"); return; }
+    var vw = videoEl.videoWidth, vh = videoEl.videoHeight;
+    if(!vw || !vh){ setStatus("The video isn't ready yet — try again in a moment.", "error"); return; }
+    var off = document.createElement("canvas"); off.width = vw; off.height = vh;
+    var ctx = off.getContext("2d"); if(!ctx) return;
+    try { ctx.drawImage(videoEl, 0, 0, vw, vh); } catch(err){ setStatus("Couldn't read this frame (the video blocks cross-origin capture). Upload a frame instead.", "error"); return; }
+    setStatus("Saving " + which + " frame\u2026", "");
+    off.toBlob(function(blob){
+      if(!blob){ setStatus("Couldn't capture that frame — upload a frame instead.", "error"); return; }
+      uploadTemporaryBlob(blob, which + "-frame-" + Date.now() + ".png", "image/png").then(function(uploaded){
+        setFrame(which, absoluteUrl(uploaded), which + " frame"); setStatus((which === "first" ? "Start" : "End") + " frame set from the current playhead.", "success");
+      }).catch(function(err){ setStatus(err && err.message ? err.message : "Couldn't save the frame.", "error"); });
+    }, "image/png");
+  }
+  function uploadFrameFile(which, file){
+    if(!file) return;
+    setStatus("Uploading " + which + " frame\u2026", "");
+    uploadTemporaryBlob(file, file.name || (which + "-frame.png"), file.type || "image/png").then(function(uploaded){
+      setFrame(which, absoluteUrl(uploaded), file.name || (which + " frame")); setStatus((which === "first" ? "Start" : "End") + " frame set.", "success");
+    }).catch(function(err){ setStatus(err && err.message ? err.message : "Couldn't upload the frame.", "error"); });
+  }
+  // ===== attachments (global prompt refs) =====
+  function renderAttachChips(){
+    if(!attachChips) return; attachChips.innerHTML = "";
+    attachments.forEach(function(att){
+      var chip = document.createElement("span"); chip.className = "editor-inpaint-attachment-chip";
+      var img = document.createElement("img"); img.src = att.url; img.alt = ""; chip.appendChild(img);
+      var label = document.createElement("span"); label.textContent = att.fileName || "reference"; chip.appendChild(label);
+      var x = document.createElement("button"); x.type = "button"; x.textContent = "\u00d7"; x.setAttribute("aria-label", "Remove reference"); x.addEventListener("click", function(){ attachments = attachments.filter(function(a){ return a.id !== att.id; }); renderAttachChips(); });
+      chip.appendChild(x); attachChips.appendChild(chip);
+    });
+  }
+  function addAttachmentFiles(files){
+    var selected = Array.prototype.slice.call(files || []); if(!selected.length) return;
+    if(attachments.length + selected.length > maxAttachments){ setStatus("Use up to " + maxAttachments + " reference images.", "error"); return; }
+    setStatus("Uploading reference image\u2026", "");
+    var chain = Promise.resolve();
+    selected.forEach(function(file){
+      chain = chain.then(function(){
+        if(!allowedAttachTypes[file.type]) throw new Error("Reference attachments must be JPEG, PNG, or WebP.");
+        return uploadTemporaryBlob(file, file.name || "reference.png", file.type || "image/png").then(function(uploaded){
+          attachments.push({ id: uid("att_"), fileName: file.name || "reference.png", url: absoluteUrl(uploaded) });
+        });
+      });
+    });
+    chain.then(function(){ renderAttachChips(); setStatus("Reference image ready.", "success"); }).catch(function(err){ setStatus(err && err.message ? err.message : "Unable to upload reference image.", "error"); });
+  }
+  // ===== instruction compiler =====
+  function regionLabel(mask){
+    if(!mask.strokes.length) return "";
+    var minX = 1, minY = 1, maxX = 0, maxY = 0, any = false;
+    mask.strokes.forEach(function(s){ s.points.forEach(function(p){ any = true; if(p.x < minX) minX = p.x; if(p.y < minY) minY = p.y; if(p.x > maxX) maxX = p.x; if(p.y > maxY) maxY = p.y; }); });
+    if(!any) return "";
+    var cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
+    var h = cx < 0.34 ? "left" : (cx > 0.66 ? "right" : "center");
+    var v = cy < 0.34 ? "top" : (cy > 0.66 ? "bottom" : "middle");
+    if(v === "middle" && h === "center") return "center";
+    if(v === "middle") return h;
+    if(h === "center") return v;
+    return v + "-" + h;
+  }
+  function buildVideoInstruction(){
+    var whole = globalPrompt ? globalPrompt.value.trim() : "";
+    var timed = masks.map(function(m){ return { time: m.timeSec, region: regionLabel(m), prompt: String(m.prompt || "").trim() }; }).filter(function(x){ return x.prompt; });
+    if(!whole && !timed.length) return "";
+    var attNotes = attachments.map(function(a, i){ return "reference image " + (i + 1) + " (" + (a.fileName || "attachment") + ")"; });
+    var lines = [
+      "VIDEO EDITING BRIEF:",
+      "You are producing an edited version of an existing clip. Preserve the overall subject, framing, style, pacing, and everything not explicitly changed below; apply only the described edits.",
+      whole ? ("Whole clip: " + whole + ".") : "",
+      timed.length ? ("Timed region edits: " + timed.map(function(x){ return "at " + formatTimecode(x.time) + (x.region ? (" in the " + x.region + " of the frame") : "") + ", " + x.prompt; }).join("; ") + ".") : "",
+      "Match the surrounding lighting, motion, grain, and perspective so each edit blends seamlessly across the given timecodes.",
+      attNotes.length ? ("Reference images: " + attNotes.join("; ") + ". Use each only as visual guidance.") : ""
+    ];
+    return lines.filter(Boolean).join(" ");
+  }
+  function getAspectRatio(){
+    var w = videoEl.videoWidth || 0, h = videoEl.videoHeight || 0;
+    if(!w || !h){
+      // fall back to a frame image's ratio isn't trivial; default to 16:9
+      return "16:9";
+    }
+    var r = w / h;
+    if(Math.abs(r - 1) < 0.08) return "1:1";
+    if(r > 1) return r >= 1.55 ? "16:9" : "4:3";
+    return r <= 0.65 ? "9:16" : "3:4";
+  }
+  // ===== output extraction / history =====
+  function extractVideoUrl(payload){
+    var result = (payload && payload.result) || {};
+    var out = result.output || {};
+    var candidate = (out.video && out.video.file_url) || out.primary_file_url || (result.video && result.video.file_url) || result.primary_file_url || (Array.isArray(out.files) ? out.files[0] : "") || (Array.isArray(result.files) ? result.files[0] : "");
+    return candidate || "";
+  }
+  function isPendingStatus(status){ return ["queued","running","waiting_for_provider","waiting_for_render","waiting_for_media","waiting_for_child","waiting_for_human"].indexOf(String(status || "")) >= 0; }
+  function pendingKey(jobId){ return "job:" + String(jobId || ""); }
+  function makePending(input){
+    var jobId = String((input && (input.jobId || input.job_id)) || ""); if(!jobId) return null;
+    return { key: pendingKey(jobId), kind: "pending", jobId: jobId, status: String((input && input.status) || "queued"), progress: Number((input && input.progress) || 0), createdAt: String((input && (input.createdAt || input.created_at)) || nowIso()) };
+  }
+  function upsertHistory(item){
+    if(!item || !item.key) return;
+    historyItems = historyItems.filter(function(e){ return e.key !== item.key && (!item.jobId || e.jobId !== item.jobId); });
+    historyItems.unshift(item);
+    historyItems.sort(function(a, b){ return Date.parse(b.createdAt || 0) - Date.parse(a.createdAt || 0); });
+    renderHistory();
+  }
+  function recordSourceHistoryItem(url, name){
+    if(!url) return; var abs; try { abs = absoluteUrl(url); } catch(_){ return; }
+    var key = "source:" + abs;
+    var item = null;
+    for(var i = 0; i < sourceHistoryItems.length; i++){ if(sourceHistoryItems[i].key === key){ item = sourceHistoryItems[i]; break; } }
+    if(!item){ item = { key: key, kind: "source", url: abs, name: name || sourceNameFromUrl(abs), createdAt: nowIso() }; sourceHistoryItems.push(item); }
+    upsertHistory(item);
+  }
+  function reinjectSources(){ sourceHistoryItems.forEach(function(item){ if(!historyItems.some(function(e){ return e.key === item.key; })) historyItems.push(item); }); historyItems.sort(function(a, b){ return Date.parse(b.createdAt || 0) - Date.parse(a.createdAt || 0); }); }
+  function videoDownloadName(prefix, createdAt){ var d = createdAt ? new Date(createdAt) : new Date(); return prefix + "-" + d.getTime() + ".mp4"; }
+  function setHistoryEmpty(message){ historyList.innerHTML = ""; var e = document.createElement("div"); e.className = "custom-inpaint-history-empty"; e.textContent = message; historyList.appendChild(e); }
+  function renderHistory(){
+    historyList.innerHTML = "";
+    var visible = historyItems.filter(function(item){ return !hiddenHistoryKeys[item.key]; });
+    if(!visible.length){ setHistoryEmpty("No generated videos yet."); return; }
+    visible.forEach(function(item){
+      var row = document.createElement("div"); row.className = "custom-inpaint-history-item"; row.dataset.kind = item.kind;
+      var thumb;
+      if(item.kind === "pending"){ thumb = document.createElement("div"); thumb.className = "custom-inpaint-history-generating"; thumb.setAttribute("role", "img"); thumb.setAttribute("aria-label", "Video generating"); }
+      else {
+        thumb = document.createElement("button"); thumb.type = "button"; thumb.className = "custom-inpaint-history-thumb-button"; thumb.dataset.historyPreview = item.key; thumb.setAttribute("aria-label", "Preview video");
+        var v = document.createElement("video"); v.className = "custom-inpaint-history-thumb"; v.src = item.url + "#t=0.1"; v.muted = true; v.preload = "metadata"; v.playsInline = true; thumb.appendChild(v);
+        var badge = document.createElement("span"); badge.className = "custom-inpaint-history-thumb-badge"; badge.innerHTML = PLAY_SVG; thumb.appendChild(badge);
+      }
+      var meta = document.createElement("div"); meta.className = "custom-inpaint-history-meta";
+      var title = document.createElement("div"); title.className = "custom-inpaint-history-title";
+      title.textContent = item.kind === "pending" ? "Generating video" : item.kind === "source" ? "Source video" : (item.createdAt ? new Date(item.createdAt).toLocaleString() : "Generated video");
+      meta.appendChild(title);
+      if(item.kind === "pending"){ var sub = document.createElement("div"); sub.className = "custom-inpaint-history-subtitle"; var pr = Number(item.progress || 0); sub.textContent = "Job " + (item.status || "queued") + (pr > 0 ? " \u00b7 " + Math.round(pr * 100) + "%" : ""); meta.appendChild(sub); }
+      else if(item.kind === "source"){ var sub2 = document.createElement("div"); sub2.className = "custom-inpaint-history-subtitle"; sub2.textContent = "Where you started" + (item.createdAt ? " \u00b7 " + new Date(item.createdAt).toLocaleString() : ""); meta.appendChild(sub2); }
+      var actions = document.createElement("div"); actions.className = "custom-inpaint-history-actions";
+      if(item.kind === "pending"){ var check = document.createElement("button"); check.type = "button"; check.className = "custom-inpaint-history-check"; check.dataset.historyCheck = item.jobId || ""; check.textContent = "Check Status"; actions.appendChild(check); }
+      else {
+        var dl = document.createElement("a"); dl.className = "custom-inpaint-history-icon"; dl.href = item.url; dl.target = "_blank"; dl.rel = "noopener noreferrer"; dl.download = videoDownloadName("video", item.createdAt); dl.title = "Download"; dl.innerHTML = "<svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 3v9\"/><path d=\"m6.5 8.5 3.5 3.5 3.5-3.5\"/><path d=\"M4 16h12\"/></svg>";
+        var cp = document.createElement("button"); cp.type = "button"; cp.className = "custom-inpaint-history-icon"; cp.dataset.historyCopy = item.key; cp.title = "Copy URL"; cp.innerHTML = "<svg width=\"13\" height=\"13\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1\"/><path d=\"M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2\"/></svg>";
+        var sv = document.createElement("button"); sv.type = "button"; sv.className = "custom-inpaint-history-icon"; sv.dataset.historySave = item.key; sv.title = "Save to Files"; sv.innerHTML = "<svg viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M5 4h8l2 2v10H5z'></path><path d='M8 4v4h4V4'></path><path d='M8 12h4'></path></svg>";
+        actions.appendChild(dl); actions.appendChild(cp); actions.appendChild(sv);
+      }
+      var rm = document.createElement("button"); rm.type = "button"; rm.className = "custom-inpaint-history-icon"; rm.dataset.historyRemove = item.key; rm.title = "Remove"; rm.innerHTML = "<svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 5l10 10\"/><path d=\"M15 5 5 15\"/></svg>"; actions.appendChild(rm);
+      meta.appendChild(actions);
+      var confirm = document.createElement("div"); confirm.className = "custom-inpaint-history-popconfirm"; confirm.hidden = true; confirm.dataset.historyConfirm = item.key;
+      var ctext = document.createElement("p"); ctext.textContent = "Remove from this history strip?";
+      var cacts = document.createElement("div"); cacts.className = "custom-inpaint-history-popconfirm-actions";
+      var cancel = document.createElement("button"); cancel.type = "button"; cancel.dataset.historyCancel = item.key; cancel.textContent = "Cancel";
+      var confirmRemove = document.createElement("button"); confirmRemove.type = "button"; confirmRemove.dataset.historyConfirmRemove = item.key; confirmRemove.dataset.danger = "true"; confirmRemove.textContent = "Remove";
+      cacts.appendChild(cancel); cacts.appendChild(confirmRemove); confirm.appendChild(ctext); confirm.appendChild(cacts);
+      row.appendChild(thumb); row.appendChild(meta); row.appendChild(confirm); historyList.appendChild(row);
+    });
+  }
+  function historyEntryUrls(entry){
+    var urls = (entry && entry.outputMediaUrls) || [];
+    return urls.filter(function(u){ return /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(String(u || "")); });
+  }
+  function isVideoEntry(entry){
+    var tid = String((entry && entry.linkedJob && (entry.linkedJob.template_id || entry.linkedJob.templateId)) || "").toLowerCase();
+    var path = String((entry && entry.path) || "").toLowerCase();
+    return tid === "primitive:video_generate" || path.indexOf("/primitives/videos/generate") >= 0 || path.indexOf("/primitives/video_generate") >= 0;
+  }
+  function extractHistoryItems(entries){
+    var items = []; var seen = {};
+    (entries || []).forEach(function(entry){
+      if(!isVideoEntry(entry)) return;
+      var linked = entry.linkedJob || null;
+      if(linked && isPendingStatus(linked.status)){
+        var p = makePending({ job_id: linked.job_id, status: linked.status, progress: linked.progress, created_at: linked.created_at || entry.createdAt });
+        if(p && !seen[p.key]){ seen[p.key] = 1; items.push(p); } return;
+      }
+      historyEntryUrls(entry).forEach(function(raw, index){
+        var url; try { url = absoluteUrl(raw); } catch(_){ return; }
+        var key = String(entry.jobId || entry.job_id || entry.id || "video") + ":" + index + ":" + url;
+        if(seen[key]) return; seen[key] = 1;
+        items.push({ key: key, kind: "output", jobId: String(entry.jobId || entry.job_id || (entry.linkedJob && entry.linkedJob.job_id) || ""), url: url, createdAt: String(entry.createdAt || nowIso()) });
+      });
+    });
+    return items;
+  }
+  function loadHistory(){
+    var tracer = resolveTracer();
+    if(!tracer){ historyItems = []; reinjectSources(); renderHistory(); return; }
+    if(historyRefresh) historyRefresh.disabled = true;
+    var endpoint = new URL("/job-runs/history", window.location.origin);
+    endpoint.searchParams.set("limit", "120"); endpoint.searchParams.set("template_id", "primitive:video_generate"); endpoint.searchParams.set("tracer", tracer);
+    fetch(endpoint, { credentials: "same-origin" }).then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); }).then(function(res){
+      if(!res.ok || (res.p && res.p.error)) throw new Error((res.p && res.p.error) || "Unable to load history.");
+      historyItems = extractHistoryItems(res.p.entries); reinjectSources(); renderHistory();
+    }).catch(function(err){ setHistoryEmpty(err && err.message ? err.message : "Unable to load history."); }).then(function(){ if(historyRefresh) historyRefresh.disabled = false; });
+  }
+  function applyCompletedJob(payload){
+    var out = extractVideoUrl(payload); if(!out) return "";
+    var url = absoluteUrl(out); var jobId = String((payload && (payload.job_id || payload.jobId)) || "");
+    resultVideo.src = url; outputPanel.hidden = false;
+    upsertHistory({ key: String(jobId || "video") + ":0:" + url, kind: "output", jobId: jobId, url: url, createdAt: String((payload && (payload.completed_at || payload.updated_at)) || nowIso()) });
+    return url;
+  }
+  // ===== job status / polling =====
+  function checkJobStatus(jobId, button){
+    if(!jobId) return;
+    if(button){ button.disabled = true; button.textContent = "Checking"; }
+    fetch("/api/v1/primitives/video_generate/jobs/" + encodeURIComponent(jobId), { credentials: "same-origin" }).then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); }).then(function(res){
+      var payload = res.p; if(!res.ok) throw new Error(payload.error || "Unable to check job.");
+      if(payload.status === "failed" || payload.status === "cancelled") throw new Error((payload.error && payload.error.message) || ("Video job " + payload.status + "."));
+      var out = extractVideoUrl(payload);
+      if(payload.status === "succeeded" || payload.status === "complete" || out){ if(!applyCompletedJob(payload)) throw new Error("Completed without an output URL."); setStatus("Video ready.", "success"); return; }
+      upsertHistory(makePending(payload)); setStatus("Video job " + jobId + " is " + (payload.status || "running") + ".", "");
+    }).catch(function(err){ setStatus(err && err.message ? err.message : "Unable to check job.", "error"); }).then(function(){ if(button){ button.disabled = false; button.textContent = "Check Status"; } });
+  }
+  function pollJob(jobId){
+    var attempt = 0;
+    function step(){
+      return fetch("/api/v1/primitives/video_generate/jobs/" + encodeURIComponent(jobId), { credentials: "same-origin" }).then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); }).then(function(res){
+        var payload = res.p; if(!res.ok) throw new Error(payload.error || "Unable to poll job.");
+        if(payload.status === "failed" || payload.status === "cancelled") throw new Error((payload.error && payload.error.message) || ("Video job " + payload.status + "."));
+        var out = extractVideoUrl(payload);
+        if(payload.status === "succeeded" || payload.status === "complete" || out){ if(!out) throw new Error("Completed without an output URL."); applyCompletedJob(payload); setStatus("Video ready.", "success"); return out; }
+        upsertHistory(makePending(payload)); setStatus("Video job " + jobId + " is " + (payload.status || "running") + " (this can take a few minutes)\u2026", "");
+        attempt++; if(attempt >= 120){ setStatus("Still running \u2014 use Check Status in History.", ""); return ""; }
+        return new Promise(function(res2){ setTimeout(res2, attempt < 8 ? 2000 : 4000); }).then(step);
+      });
+    }
+    return step();
+  }
+  function frameImagesPayload(){
+    var arr = [];
+    if(frames.first && frames.first.url) arr.push({ image_url: frames.first.url, frame_type: "first_frame" });
+    if(frames.last && frames.last.url) arr.push({ image_url: frames.last.url, frame_type: "last_frame" });
+    return arr;
+  }
+  function setSubmitLoading(loading){ submitBtn.setAttribute("data-loading", loading ? "true" : "false"); submitBtn.disabled = loading; if(submitLabel) submitLabel.textContent = loading ? "Generating\u2026" : "Generate video"; }
+  function submitGenerate(){
+    if(submitBtn.disabled) return;
+    var instruction = buildVideoInstruction();
+    if(!instruction){ setStatus("Add a video prompt or a mask instruction first.", "error"); return; }
+    var frameImgs = frameImagesPayload();
+    setSubmitLoading(true);
+    var seed = (globalPrompt && globalPrompt.value.trim()) || (masks.find(function(m){ return String(m.prompt || "").trim(); }) || {}).prompt || "video-edit";
+    var tracer = tracerAutoPending ? nameTracerFromSeed(seed) : getTracerValue();
+    var payload = { prompt: instruction, output_format: "mp4", aspect_ratio: getAspectRatio() };
+    if(frameImgs.length) payload.frame_images = frameImgs;
+    if(providerSelect && providerSelect.value) payload.provider = providerSelect.value;
+    if(durationSelect && durationSelect.value) payload.duration = Number(durationSelect.value);
+    if(audioToggle && audioToggle.checked) payload.generate_audio = true;
+    setStatus("Creating video job\u2026", "");
+    fetch("/api/v1/primitives/videos/generate", { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: JSON.stringify({ tracer: tracer, payload: payload }) })
+      .then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); })
+      .then(function(res){ if(!res.ok || !res.p.job_id) throw new Error(res.p.error || "Unable to create video job."); setStatus("Video job " + res.p.job_id + " started \u2014 generating\u2026", "success"); upsertHistory(makePending(res.p)); return pollJob(res.p.job_id); })
+      .then(function(){ loadHistory(); loadSessions(); })
+      .catch(function(err){ setStatus(err && err.message ? err.message : "Unable to create video.", "error"); })
+      .then(function(){ setSubmitLoading(false); });
+  }
+  // ===== lightbox =====
+  function openVideoPreview(url, label, downloadName){
+    if(!lightbox || !lightboxVideo) return;
+    lightboxVideo.src = url; if(lightboxTitle) lightboxTitle.textContent = label || "Video output";
+    if(lightboxDownload){ lightboxDownload.href = url; lightboxDownload.setAttribute("download", downloadName || "video.mp4"); }
+    lightbox.hidden = false; lightbox.setAttribute("data-open", "true");
+  }
+  function closeVideoPreview(){ if(!lightbox) return; lightbox.setAttribute("data-open", "false"); lightbox.hidden = true; if(lightboxVideo){ try { lightboxVideo.pause(); } catch(_){} lightboxVideo.removeAttribute("src"); lightboxVideo.load(); } }
+  // ===== settings / sessions =====
+  function openSettings(){ if(settingsModal) settingsModal.hidden = false; }
+  function closeSettings(){ if(settingsModal) settingsModal.hidden = true; }
+  function openSessions(){ if(sessionsPanel) sessionsPanel.classList.add("is-open"); if(sessionsBackdrop) sessionsBackdrop.hidden = false; loadSessions(); }
+  function closeSessions(){ if(sessionsPanel) sessionsPanel.classList.remove("is-open"); if(sessionsBackdrop) sessionsBackdrop.hidden = true; }
+  function relTimeShort(value){ var then = Date.parse(value || 0); if(!then) return ""; var secs = Math.max(0, Math.floor((Date.now() - then) / 1000)); if(secs < 60) return "just now"; var m = Math.floor(secs / 60); if(m < 60) return m + "m ago"; var h = Math.floor(m / 60); if(h < 24) return h + "h ago"; var d = Math.floor(h / 24); if(d < 7) return d + "d ago"; return new Date(then).toLocaleDateString(); }
+  var sessionsLoading = false;
+  function loadSessions(){
+    if(!sessionsList || sessionsLoading) return; sessionsLoading = true;
+    var endpoint = new URL("/job-runs/history", window.location.origin); endpoint.searchParams.set("limit", "500");
+    fetch(endpoint, { credentials: "same-origin" }).then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); }).then(function(res){
+      if(!res.ok || (res.p && res.p.error)) throw new Error((res.p && res.p.error) || "Unable to load sessions.");
+      var groups = {}; var order = [];
+      (res.p.entries || []).forEach(function(entry){
+        if(!isVideoEntry(entry)) return; var tracer = String(entry.tracer || "").trim(); if(!tracer) return;
+        var urls = historyEntryUrls(entry);
+        if(!groups[tracer]){ groups[tracer] = { tracer: tracer, thumb: "", count: 0, createdAt: entry.createdAt || "" }; order.push(tracer); }
+        var g = groups[tracer]; if(!g.thumb && urls[0]){ try { g.thumb = absoluteUrl(urls[0]); } catch(_){} } g.count += urls.length;
+        if(Date.parse(entry.createdAt || 0) > Date.parse(g.createdAt || 0)) g.createdAt = entry.createdAt;
+      });
+      var list = order.map(function(t){ return groups[t]; }).sort(function(a, b){ return Date.parse(b.createdAt || 0) - Date.parse(a.createdAt || 0); });
+      renderSessions(list);
+    }).catch(function(err){ renderSessions([], err && err.message ? err.message : "Unable to load sessions."); }).then(function(){ sessionsLoading = false; });
+  }
+  function renderSessions(groups, message){
+    if(!sessionsList) return; sessionsList.innerHTML = "";
+    if(message){ var n = document.createElement("div"); n.className = "rk-ip-sessions-empty"; n.textContent = message; sessionsList.appendChild(n); return; }
+    if(!groups.length){ var e = document.createElement("div"); e.className = "rk-ip-sessions-empty"; e.textContent = "No past sessions yet. Generate a video to start one."; sessionsList.appendChild(e); return; }
+    var active = resolveTracer();
+    groups.forEach(function(group){
+      var row = document.createElement("button"); row.type = "button"; row.className = "rk-ip-session" + (group.tracer === active ? " is-active" : ""); row.dataset.sessionTracer = group.tracer;
+      if(group.thumb){ var v = document.createElement("video"); v.className = "rk-ip-session-thumb"; v.src = group.thumb + "#t=0.1"; v.muted = true; v.preload = "metadata"; row.appendChild(v); }
+      else { var ph = document.createElement("span"); ph.className = "rk-ip-session-thumb is-empty"; ph.innerHTML = PLAY_SVG; row.appendChild(ph); }
+      var meta = document.createElement("div"); meta.className = "rk-ip-session-meta";
+      var title = document.createElement("div"); title.className = "rk-ip-session-title"; title.textContent = group.tracer;
+      var sub = document.createElement("div"); sub.className = "rk-ip-session-sub"; var when = relTimeShort(group.createdAt);
+      sub.textContent = (group.count ? group.count + " video" + (group.count === 1 ? "" : "s") : "session") + (when ? " \u00b7 " + when : "");
+      meta.appendChild(title); meta.appendChild(sub); row.appendChild(meta); sessionsList.appendChild(row);
+    });
+  }
+  function switchToTracer(tracer){
+    var value = String(tracer || "").trim(); if(!value) return;
+    sessionTracer = value; if(tracerInput) tracerInput.value = value; tracerAutoPending = false; closeSessions(); loadHistory(); loadSessions();
+    setStatus("Opened session " + value + ".", "");
+  }
+  // ===== reset =====
+  function resetWorkspace(){
+    clearSourceObjectUrl(); sourceVideoUrl = ""; sourceVideoName = "";
+    try { videoEl.pause(); } catch(_){} videoEl.removeAttribute("src"); videoEl.load();
+    masks = []; activeMaskId = ""; frames = { first: null, last: null };
+    ["first","last"].forEach(function(w){ var img = document.querySelector('[data-ipv-frame-img="' + w + '"]'); var ph = document.querySelector('[data-ipv-frame-ph="' + w + '"]'); if(img){ img.hidden = true; img.removeAttribute("src"); } if(ph) ph.style.display = ""; });
+    if(globalPrompt) globalPrompt.value = ""; attachments = []; renderAttachChips();
+    outputPanel.hidden = true; resultVideo.removeAttribute("src");
+    emptyState.hidden = false; if(player) player.hidden = true;
+    canvas.width = 1; canvas.height = 1; renderMasks();
+    if(scrub) scrub.value = "0"; if(timecodeInput) timecodeInput.value = "00:00:000"; if(durationEl) durationEl.textContent = "/ 00:00:000";
+  }
+  function startNew(){
+    sessionTracer = ""; tracerAutoPending = true; if(tracerInput) tracerInput.value = "";
+    clearUrlParams(); resetWorkspace(); loadHistory(); loadSessions();
+    setStatus("Started a new session.", "");
+  }
+  function clearUrlParams(){
+    var url = new URL(window.location.href);
+    ["tracer","tracer_id","trace","source_video_url","video_url","source_url","source_video_name","video_name","file_name","source_image_url"].forEach(function(k){ url.searchParams.delete(k); });
+    window.history.replaceState({}, "", url.toString());
+  }
+  function firstParam(names){ var params = new URLSearchParams(window.location.search); for(var i = 0; i < names.length; i++){ var v = params.get(names[i]); if(v && v.trim()) return v.trim(); } return ""; }
+  function initFromUrl(){
+    var urlTracer = firstParam(["tracer","tracer_id","trace"]);
+    if(urlTracer){ sessionTracer = urlTracer; if(tracerInput) tracerInput.value = urlTracer; tracerAutoPending = false; }
+    var src = firstParam(["source_video_url","video_url","source_url"]);
+    if(src){ var nm = firstParam(["source_video_name","video_name","file_name"]); loadSourceUrl(src, nm); recordSourceHistoryItem(src, nm); }
+  }
+  // ===== timeline sync =====
+  function syncTimeline(){
+    var d = videoEl.duration || 0; var t = videoEl.currentTime || 0;
+    if(scrub && document.activeElement !== scrub){ scrub.value = String(d > 0 ? Math.round((t / d) * 1000) : 0); }
+    if(timecodeInput && document.activeElement !== timecodeInput){ timecodeInput.value = formatTimecode(t); }
+  }
+  function tick(){ if(!videoEl.paused && !videoEl.ended){ syncTimeline(); redraw(); requestAnimationFrame(tick); } }
+  // ===== wire events =====
+  if(brushInput){ brushInput.addEventListener("input", function(){ if(brushLabel) brushLabel.textContent = brushInput.value; updateBrushCursorSize(); }); }
+  if(uploadBtn && fileInput){ uploadBtn.addEventListener("click", function(){ fileInput.click(); }); fileInput.addEventListener("change", function(){ if(fileInput.files && fileInput.files[0]) loadSourceFile(fileInput.files[0]); }); }
+  if(startNewBtn) startNewBtn.addEventListener("click", startNew);
+  if(addMaskBtn) addMaskBtn.addEventListener("click", function(){ addMask(videoEl.currentTime || 0, colorPicker ? colorPicker.value : null); });
+  if(colorPicker) colorPicker.addEventListener("input", function(){ var m = activeMask(); if(m){ m.color = normalizeHex(colorPicker.value); renderMasks(); redraw(); } });
+  if(undoBtn) undoBtn.addEventListener("click", function(){ var m = activeMask(); if(m && m.strokes.length){ m.redo.push(m.strokes.pop()); redraw(); syncUndoRedo(); } });
+  if(redoBtn) redoBtn.addEventListener("click", function(){ var m = activeMask(); if(m && m.redo.length){ m.strokes.push(m.redo.pop()); redraw(); syncUndoRedo(); } });
+  if(clearBtn) clearBtn.addEventListener("click", function(){ var m = activeMask(); if(m){ m.redo = m.strokes.concat(m.redo); m.strokes = []; redraw(); syncUndoRedo(); } });
+  if(attachBtn && attachInput){ attachBtn.addEventListener("click", function(){ attachInput.click(); }); attachInput.addEventListener("change", function(){ addAttachmentFiles(attachInput.files); attachInput.value = ""; }); }
+  if(submitBtn) submitBtn.addEventListener("click", submitGenerate);
+  masksList.addEventListener("click", function(event){
+    var t = event.target; if(!(t instanceof Element)) return;
+    var sel = t.closest("[data-mask-select]"); if(sel){ selectMask(sel.getAttribute("data-mask-select")); return; }
+    var seek = t.closest("[data-mask-seek]"); if(seek){ var id = seek.getAttribute("data-mask-seek"); var m = null; masks.forEach(function(x){ if(x.id === id) m = x; }); if(m){ selectMask(id); if(videoEl.duration) videoEl.currentTime = Math.min(videoEl.duration, m.timeSec); syncTimeline(); redraw(); } return; }
+    var setT = t.closest("[data-mask-settime]"); if(setT){ var id2 = setT.getAttribute("data-mask-settime"); masks.forEach(function(x){ if(x.id === id2) x.timeSec = videoEl.currentTime || 0; }); renderMasks(); redraw(); return; }
+    var rm = t.closest("[data-mask-remove]"); if(rm){ removeMask(rm.getAttribute("data-mask-remove")); return; }
+  });
+  masksList.addEventListener("input", function(event){
+    var t = event.target; if(!(t instanceof Element)) return;
+    var ta = t.closest("[data-mask-prompt]"); if(ta){ var id = ta.getAttribute("data-mask-prompt"); masks.forEach(function(m){ if(m.id === id) m.prompt = ta.value; }); }
+  });
+  masksList.addEventListener("focusin", function(event){
+    var t = event.target; if(!(t instanceof Element)) return;
+    var ta = t.closest("[data-mask-prompt]"); if(ta){ var id = ta.getAttribute("data-mask-prompt"); if(id !== activeMaskId){ activeMaskId = id; var m = activeMask(); if(m && colorPicker) colorPicker.value = m.color; masksList.querySelectorAll(".rk-ipv-mask").forEach(function(r){ r.setAttribute("data-active", r.dataset.maskId === id ? "true" : "false"); }); redraw(); } }
+  });
+  // frame slot buttons
+  document.querySelectorAll("[data-ipv-frame-upload]").forEach(function(btn){ btn.addEventListener("click", function(){ pendingFrameSlot = btn.getAttribute("data-ipv-frame-upload"); if(frameInput) frameInput.click(); }); });
+  document.querySelectorAll("[data-ipv-frame-capture]").forEach(function(btn){ btn.addEventListener("click", function(){ captureCurrentFrame(btn.getAttribute("data-ipv-frame-capture")); }); });
+  document.querySelectorAll("[data-ipv-frame-open]").forEach(function(btn){ btn.addEventListener("click", function(){ var w = btn.getAttribute("data-ipv-frame-open"); if(frames[w] && frames[w].url){ window.open(frames[w].url, "_blank", "noopener,noreferrer"); } }); });
+  if(frameInput) frameInput.addEventListener("change", function(){ if(pendingFrameSlot && frameInput.files && frameInput.files[0]) uploadFrameFile(pendingFrameSlot, frameInput.files[0]); pendingFrameSlot = null; frameInput.value = ""; });
+  // canvas painting
+  canvas.addEventListener("pointerdown", beginStroke);
+  canvas.addEventListener("pointermove", continueStroke);
+  canvas.addEventListener("pointerup", endStroke);
+  canvas.addEventListener("pointercancel", endStroke);
+  canvas.addEventListener("pointerleave", function(){ hideBrushCursor(); });
+  canvas.addEventListener("pointerenter", updateBrushCursorPos);
+  // player controls
+  if(playpause) playpause.addEventListener("click", function(){ if(videoEl.paused){ videoEl.play(); } else { videoEl.pause(); } });
+  videoEl.addEventListener("play", function(){ if(playpause) playpause.innerHTML = PAUSE_SVG; requestAnimationFrame(tick); });
+  videoEl.addEventListener("pause", function(){ if(playpause) playpause.innerHTML = PLAY_SVG; syncTimeline(); redraw(); });
+  videoEl.addEventListener("ended", function(){ if(playpause) playpause.innerHTML = PLAY_SVG; });
+  videoEl.addEventListener("timeupdate", function(){ if(videoEl.paused){ syncTimeline(); redraw(); } });
+  videoEl.addEventListener("seeked", function(){ syncTimeline(); redraw(); });
+  if(scrub) scrub.addEventListener("input", function(){ var d = videoEl.duration || 0; if(d > 0){ videoEl.currentTime = (Number(scrub.value) / 1000) * d; } });
+  if(timecodeInput){
+    timecodeInput.addEventListener("change", function(){ var t = parseTimecode(timecodeInput.value); if(!isNaN(t) && videoEl.duration){ videoEl.currentTime = Math.max(0, Math.min(videoEl.duration, t)); } });
+    timecodeInput.addEventListener("keydown", function(e){ if(e.key === "Enter"){ e.preventDefault(); timecodeInput.blur(); } });
+  }
+  if(timecodeCopy) timecodeCopy.addEventListener("click", function(){ copyText(timecodeInput ? timecodeInput.value : formatTimecode(videoEl.currentTime || 0)).then(function(ok){ timecodeCopy.setAttribute("title", ok ? "Copied" : "Copy failed"); setTimeout(function(){ timecodeCopy.setAttribute("title", "Copy timecode"); }, 1200); }); });
+  // history interactions
+  historyList.addEventListener("click", function(event){
+    var t = event.target; if(!(t instanceof Element)) return;
+    var prev = t.closest("[data-history-preview]"); if(prev){ var key = prev.getAttribute("data-history-preview"); var it = historyItems.find(function(e){ return e.key === key; }); if(it) openVideoPreview(it.url, it.createdAt ? new Date(it.createdAt).toLocaleString() : "Video output", videoDownloadName("video-history", it.createdAt)); return; }
+    var cp = t.closest("[data-history-copy]"); if(cp){ var k2 = cp.getAttribute("data-history-copy"); var it2 = historyItems.find(function(e){ return e.key === k2; }); if(it2) copyText(it2.url).then(function(ok){ cp.setAttribute("title", ok ? "Copied" : "Copy failed"); setTimeout(function(){ cp.setAttribute("title", "Copy URL"); }, 1200); }); return; }
+    var sv = t.closest("[data-history-save]"); if(sv){ var k3 = sv.getAttribute("data-history-save"); var it3 = historyItems.find(function(e){ return e.key === k3; }); if(it3 && it3.url) saveMediaToFiles(it3.url, videoDownloadName("video-output", it3.createdAt)); return; }
+    var ck = t.closest("[data-history-check]"); if(ck){ checkJobStatus(ck.getAttribute("data-history-check"), ck); return; }
+    var rm = t.closest("[data-history-remove]"); if(rm){ var key4 = rm.getAttribute("data-history-remove"); var confirm = historyList.querySelector('[data-history-confirm="' + (window.CSS && CSS.escape ? CSS.escape(key4) : key4) + '"]'); if(confirm){ confirm.hidden = !confirm.hidden; } return; }
+    var cancel = t.closest("[data-history-cancel]"); if(cancel){ var c = cancel.closest("[data-history-confirm]"); if(c) c.hidden = true; return; }
+    var conf = t.closest("[data-history-confirm-remove]"); if(conf){ var key5 = conf.getAttribute("data-history-confirm-remove"); if(key5){ hiddenHistoryKeys[key5] = 1; renderHistory(); } return; }
+  });
+  if(historyRefresh) historyRefresh.addEventListener("click", loadHistory);
+  // save result
+  if(saveBtn) saveBtn.addEventListener("click", function(){ if(resultVideo.src) saveMediaToFiles(resultVideo.currentSrc || resultVideo.src, videoDownloadName("video-result")); });
+  // settings + sessions
+  if(settingsBtn) settingsBtn.addEventListener("click", openSettings);
+  if(settingsClose) settingsClose.addEventListener("click", closeSettings);
+  if(settingsModal) settingsModal.addEventListener("click", function(e){ if(e.target === settingsModal) closeSettings(); });
+  if(sessionsToggle) sessionsToggle.addEventListener("click", function(){ if(sessionsPanel && sessionsPanel.classList.contains("is-open")) closeSessions(); else openSessions(); });
+  if(sessionsClose) sessionsClose.addEventListener("click", closeSessions);
+  if(sessionsBackdrop) sessionsBackdrop.addEventListener("click", closeSessions);
+  if(sessionsList) sessionsList.addEventListener("click", function(event){ var t = event.target; if(!(t instanceof Element)) return; var row = t.closest("[data-session-tracer]"); if(row) switchToTracer(row.getAttribute("data-session-tracer")); });
+  // lightbox close
+  if(lightboxClose) lightboxClose.addEventListener("click", closeVideoPreview);
+  if(lightbox) lightbox.addEventListener("click", function(e){ if(e.target === lightbox) closeVideoPreview(); });
+  if(lightboxCopy) lightboxCopy.addEventListener("click", function(){ if(lightboxVideo && lightboxVideo.src) copyText(lightboxVideo.src).then(function(ok){ lightboxCopy.setAttribute("title", ok ? "Copied" : "Copy failed"); setTimeout(function(){ lightboxCopy.setAttribute("title", "Copy URL"); }, 1200); }); });
+  window.addEventListener("resize", syncCanvasSize);
+  window.addEventListener("keydown", function(e){ if(e.key !== "Escape") return; if(lightbox && lightbox.getAttribute("data-open") === "true"){ closeVideoPreview(); return; } if(settingsModal && !settingsModal.hidden){ closeSettings(); return; } if(sessionsPanel && sessionsPanel.classList.contains("is-open")){ closeSessions(); return; } });
+  // drag-drop video onto empty state
+  if(emptyState){
+    ["dragenter","dragover"].forEach(function(ev){ emptyState.addEventListener(ev, function(e){ e.preventDefault(); }); });
+    emptyState.addEventListener("drop", function(e){ e.preventDefault(); var f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0]; if(f && /^video\//.test(f.type)) loadSourceFile(f); });
+  }
+  // ===== text-to-video composer =====
+  var genPrompt = document.getElementById("rk-ipv-genprompt");
+  var genClip = document.getElementById("rk-ipv-genclip");
+  var genSend = document.getElementById("rk-ipv-gensend");
+  var genRefsEl = document.getElementById("rk-ipv-genrefs");
+  var genStatusEl = document.getElementById("rk-ipv-genstatus");
+  var genWrap = document.getElementById("rk-ipv-gen");
+  var GEN_SEND_HTML = genSend ? genSend.innerHTML : "";
+  var genRefs = []; var genBusy = false; var genFileModal = null;
+  function setGenStatus(m, t){ if(!genStatusEl) return; genStatusEl.textContent = m || ""; genStatusEl.setAttribute("data-tone", t || ""); }
+  function syncGenSend(){ if(genPrompt) genPrompt.disabled = genBusy; if(genClip) genClip.disabled = genBusy; if(!genSend) return; if(genBusy){ genSend.classList.add("is-busy"); genSend.innerHTML = "<span class='rk-ip-gen-spin'></span>"; } else { genSend.classList.remove("is-busy"); genSend.innerHTML = GEN_SEND_HTML; } genSend.disabled = genBusy || !(genPrompt && genPrompt.value.trim()); }
+  function renderGenRefs(){ if(!genRefsEl) return; genRefsEl.innerHTML = ""; if(!genRefs.length){ genRefsEl.hidden = true; return; } genRefsEl.hidden = false; genRefs.forEach(function(url, idx){ var chip = document.createElement("span"); chip.className = "rk-ip-gen-ref"; var img = document.createElement("img"); img.src = url; img.alt = ""; chip.appendChild(img); var label = document.createElement("span"); label.textContent = sourceNameFromUrl(url); chip.appendChild(label); var x = document.createElement("button"); x.type = "button"; x.textContent = "\u00d7"; x.addEventListener("click", function(){ genRefs.splice(idx, 1); renderGenRefs(); }); chip.appendChild(x); genRefsEl.appendChild(chip); }); }
+  function closeGenFilePanel(){ if(genFileModal){ try { genFileModal._handle && genFileModal._handle.destroy && genFileModal._handle.destroy(); } catch(_){} genFileModal.remove(); genFileModal = null; document.removeEventListener("keydown", onGenFileEsc, true); } }
+  function onGenFileEsc(e){ if(e.key === "Escape") closeGenFilePanel(); }
+  function openGenFilePanel(){
+    var dir = window.__vidfarmDirectory; if(!dir || !dir.pick){ setGenStatus("File browser isn't available right now.", "error"); return; }
+    dir.pick({ select: "file", roots: ["files","temp","raws"], title: "Attach reference images", hint: "Pick one or more images to guide the generation.", confirmLabel: "Attach", multiple: true,
+      onPick: function(picked){ var arr = Array.isArray(picked) ? picked : [picked]; arr.forEach(function(f){ var url = f && (f.url || f.viewUrl); if(url){ try { genRefs.push(absoluteUrl(url)); } catch(_){} } }); renderGenRefs(); } });
+  }
+  function pollGenerateJob(jobId){
+    var attempt = 0;
+    function step(){
+      return fetch("/api/v1/primitives/video_generate/jobs/" + encodeURIComponent(jobId), { credentials: "same-origin" }).then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); }).then(function(res){
+        var payload = res.p; if(!res.ok) throw new Error(payload.error || "Unable to poll job.");
+        if(payload.status === "failed" || payload.status === "cancelled") throw new Error((payload.error && payload.error.message) || ("Video job " + payload.status + "."));
+        var out = extractVideoUrl(payload);
+        if(payload.status === "succeeded" || payload.status === "complete" || out){ if(!out) throw new Error("Completed without an output URL."); return absoluteUrl(out); }
+        setGenStatus("Generating video (" + (payload.status || "running") + ")\u2026 this can take a few minutes", "");
+        attempt++; if(attempt >= 120){ setGenStatus("Still running \u2014 check History shortly.", ""); return ""; }
+        return new Promise(function(res2){ setTimeout(res2, attempt < 8 ? 2000 : 4000); }).then(step);
+      });
+    }
+    return step();
+  }
+  function submitGenerateNew(){
+    var p = (genPrompt && genPrompt.value || "").trim();
+    if(!p){ setGenStatus("Describe the video to generate.", "error"); if(genPrompt) genPrompt.focus(); return; }
+    if(genBusy) return; genBusy = true; syncGenSend(); if(genWrap) genWrap.classList.add("is-busy");
+    setGenStatus("Creating video\u2026", "");
+    var payload = { prompt: p, output_format: "mp4" };
+    var frameImgs = frameImagesPayload(); if(frameImgs.length) payload.frame_images = frameImgs;
+    if(genRefs.length) payload.input_references = genRefs.slice();
+    if(providerSelect && providerSelect.value) payload.provider = providerSelect.value;
+    if(durationSelect && durationSelect.value) payload.duration = Number(durationSelect.value);
+    if(audioToggle && audioToggle.checked) payload.generate_audio = true;
+    var genTracer = tracerAutoPending ? nameTracerFromSeed(p) : getTracerValue();
+    fetch("/api/v1/primitives/videos/generate", { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: JSON.stringify({ tracer: genTracer, payload: payload }) })
+      .then(function(r){ return parseJsonResponse(r).then(function(j){ return { ok: r.ok, j: j }; }); })
+      .then(function(res){ if(!res.ok || !res.j.job_id) throw new Error(res.j.error || "Unable to start video generation."); upsertHistory(makePending(res.j)); return pollGenerateJob(res.j.job_id); })
+      .then(function(out){ if(out){ loadSourceUrl(out, "Generated video"); recordSourceHistoryItem(out, "Generated video"); setGenStatus("Video generated. Scrub and paint timed masks to refine.", "success"); setStatus("Generated video loaded.", "success"); loadHistory(); } })
+      .catch(function(err){ var msg = (err && err.message) ? err.message : "Unable to generate video."; if(/401|403|sign in|unauth/i.test(msg)) msg = "Sign in to generate videos."; setGenStatus(msg, "error"); })
+      .then(function(){ genBusy = false; if(genWrap) genWrap.classList.remove("is-busy"); syncGenSend(); });
+  }
+  if(genPrompt){ genPrompt.addEventListener("input", syncGenSend); genPrompt.addEventListener("keydown", function(e){ if(e.key === "Enter" && !e.shiftKey){ e.preventDefault(); submitGenerateNew(); } }); }
+  if(genClip) genClip.addEventListener("click", openGenFilePanel);
+  if(genSend) genSend.addEventListener("click", submitGenerateNew);
+  renderGenRefs(); syncGenSend();
+  // ===== boot =====
+  renderMasks();
+  loadProviders();
+  initFromUrl();
+  loadHistory();
+})();
+</script>
+<script>(() => {
+  // Desktop-agents nudge banner: a full-width alert pinned to the top of the
+  // /editor and /chat surfaces pointing to the setup guide. Both surfaces embed
+  // this chrome script, so gate strictly by pathname. Dismissible per session.
+  (function mountDesktopAgentsBanner() {
+    try {
+      var path = location.pathname;
+      var onEditor = path === '/editor' || path.indexOf('/editor/') === 0;
+      var onChat = path === '/chat' || path.indexOf('/chat/') === 0;
+      if (!onEditor && !onChat) return;
+      if (document.querySelector('.vf-topbanner')) return;
+      if (sessionStorage.getItem('vf-topbanner-dismissed') === '1') return;
+      var GUIDE = '/blog/desktop-ai-agents';
+      var bar = document.createElement('div');
+      bar.className = 'vf-topbanner';
+      bar.setAttribute('role', 'alert');
+      bar.innerHTML =
+        '<span class="vf-topbanner-ico" aria-hidden="true">🖥️</span>' +
+        '<span class="vf-topbanner-msg"><strong>VidFarm.cc is best using desktop AI Agents</strong> such as OpenAI Codex &amp; Claude Code. Follow the guide to set up.</span>' +
+        '<a class="vf-topbanner-cta" href="' + GUIDE + '" target="_blank" rel="noopener">Follow the guide →</a>' +
+        '<button type="button" class="vf-topbanner-close" aria-label="Dismiss">×</button>';
+      function sizeBanner() {
+        document.body.style.setProperty('--vf-topbanner-h', bar.offsetHeight + 'px');
+      }
+      bar.querySelector('.vf-topbanner-close').addEventListener('click', function () {
+        try { sessionStorage.setItem('vf-topbanner-dismissed', '1'); } catch (e) {}
+        bar.remove();
+        document.body.classList.remove('vf-has-topbanner');
+        document.body.style.removeProperty('--vf-topbanner-h');
+      });
+      document.body.insertBefore(bar, document.body.firstChild);
+      document.body.classList.add('vf-has-topbanner');
+      sizeBanner();
+      window.addEventListener('resize', sizeBanner);
+    } catch (e) {}
+  })();
+  var fab = document.getElementById('rkFab');
+  var panel = document.getElementById('rkAichat');
+  if (!fab || !panel) return;
+  // Editor dock mode: the /editor shell reuses this exact pop panel + draggable
+  // FAB, dark-themed via .rk-aichat--editor and wired to the editor chat surface
+  // (?surface=editor boot + editor_context snapshots). Same open/close/drag UX
+  // as every other page.
+  var isEditorDock = !!document.querySelector('[data-rk-editor-dock]');
+  if (isEditorDock) panel.classList.add('rk-aichat--editor');
+  var minBtn = document.getElementById('rkAichatMin');
+  var form = document.getElementById('rkAichatForm');
+  var input = document.getElementById('rkAichatInput');
+  var log = document.getElementById('rkAichatLog');
+  var MARGIN = 10;
+  // On the dedicated /chat page the panel's chat column is redundant (the page
+  // IS the chat), so we hide the floating FAB and instead let the composer's
+  // attach button open the panel in FILES-ONLY mode (just the file explorer).
+  var isChatPage = !!document.querySelector('.rk-chat-page');
+  if (isChatPage) fab.hidden = true;
+  function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
+  // offsetWidth/offsetLeft (not getBoundingClientRect) so the hover/drag/open
+  // transforms never skew the clamp math
+  function placeFab(x, y) {
+    x = clamp(x, MARGIN, window.innerWidth - fab.offsetWidth - MARGIN);
+    y = clamp(y, MARGIN, window.innerHeight - fab.offsetHeight - MARGIN);
+    fab.style.left = x + 'px';
+    fab.style.top = y + 'px';
+    fab.style.bottom = 'auto';
+    return { x: x, y: y };
+  }
+  try {
+    var saved = JSON.parse(localStorage.getItem('rk-fab-pos') || 'null');
+    if (saved && typeof saved.x === 'number') placeFab(saved.x, saved.y);
+  } catch (e) {}
+  function anchorPanel() {
+    var r = fab.getBoundingClientRect();
+    var onRight = r.left + r.width / 2 > window.innerWidth / 2;
+    panel.classList.toggle('is-right', onRight);
+    document.body.classList.toggle('rk-chat-left', !panel.hidden && !onRight);
+  }
+  function openPanel(filesOnly) {
+    panel.hidden = false;
+    panel.classList.toggle('is-files-only', !!filesOnly);
+    fab.classList.add('is-open');
+    fab.setAttribute('aria-expanded', 'true');
+    if (filesOnly) {
+      // slim left-hand drawer that replaces the sidebar (like the normal dock),
+      // so it never covers the centered chat column's composer / Send button
+      setLeftMode('files');
+      panel.classList.remove('is-right');
+      document.body.classList.add('rk-chat-left');
+    } else {
+      anchorPanel();
+      // On short / narrow screens the left drawer stacks ABOVE the chat and
+      // crushes the log + composer. Start collapsed to the chat column there;
+      // the user can still open Files/History from the header toggles.
+      try {
+        if (window.matchMedia && window.matchMedia('(max-width:700px)').matches) setLeftMode('');
+      } catch (e) {}
+    }
+    try { sessionStorage.setItem('rk-chat-open', filesOnly ? 'files' : '1'); } catch (e) {}
+    if (!filesOnly) loadBoot();
+    refreshFilesOnOpen();
+    if (!filesOnly && input) input.focus();
+  }
+  function closePanel() {
+    panel.hidden = true;
+    panel.classList.remove('is-files-only');
+    fab.classList.remove('is-open');
+    fab.setAttribute('aria-expanded', 'false');
+    document.body.classList.remove('rk-chat-left');
+    try { sessionStorage.removeItem('rk-chat-open'); } catch (e) {}
+  }
+  var drag = null;
+  fab.addEventListener('pointerdown', function (e) {
+    drag = { sx: e.clientX, sy: e.clientY, ox: fab.offsetLeft, oy: fab.offsetTop, moved: false, last: null };
+    fab.setPointerCapture(e.pointerId);
+  });
+  fab.addEventListener('pointermove', function (e) {
+    if (!drag) return;
+    var dx = e.clientX - drag.sx;
+    var dy = e.clientY - drag.sy;
+    if (!drag.moved && Math.hypot(dx, dy) < 6) return;
+    drag.moved = true;
+    fab.classList.add('is-dragging');
+    drag.last = placeFab(drag.ox + dx, drag.oy + dy);
+  });
+  fab.addEventListener('pointerup', function () {
+    if (!drag) return;
+    var moved = drag.moved;
+    if (drag.last) {
+      try { localStorage.setItem('rk-fab-pos', JSON.stringify(drag.last)); } catch (e) {}
+    }
+    fab.classList.remove('is-dragging');
+    drag = null;
+    if (!moved) openPanel();
+  });
+  fab.addEventListener('pointercancel', function () {
+    fab.classList.remove('is-dragging');
+    drag = null;
+  });
+  fab.addEventListener('click', function (e) {
+    if (e.detail === 0 && panel.hidden) openPanel();
+  });
+  if (minBtn) minBtn.addEventListener('click', closePanel);
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !panel.hidden) closePanel();
+  });
+  window.addEventListener('resize', function () {
+    if (fab.style.top) {
+      var pos = placeFab(fab.offsetLeft, fab.offsetTop);
+      try { localStorage.setItem('rk-fab-pos', JSON.stringify(pos)); } catch (e) {}
+    }
+    if (!panel.hidden) anchorPanel();
+  });
+  function bubble(kind, text) {
+    var el = document.createElement('div');
+    el.className = 'rk-aichat-msg ' + kind;
+    el.textContent = text;
+    log.appendChild(el);
+    log.scrollTop = log.scrollHeight;
+    return el;
+  }
+  function logBottom() { if (log) log.scrollTop = log.scrollHeight; }
+  // Remember the opening greeting so "New chat" can restore a fresh thread.
+  var GREETING = (function () {
+    var first = log && log.querySelector('.rk-aichat-msg.is-ai');
+    return first ? first.textContent : "Hi! I'm the vidfarm assistant — ask me anything about your videos, clips, and posts.";
+  })();
+  // ─── real agentic chat: wired to the live editor-chat backend ──────────────
+  // Boot (endpoint + api key + brainstorm template) is fetched lazily on first
+  // open from /chat-dock/boot (cookie-authed). Tool calls surface as first-class
+  // actions: every http_request becomes a clickable card that opens a modal with
+  // the exact request + response, exactly like the /editor chat.
+  var BOOT = null, BOOT_STATE = 'idle'; // idle|loading|ready|anon|error
+  var ENDPOINT = '/api/v1/editor-chat', API_KEY = null, TEMPLATE = null, CACHED = null;
+  var THREADS_URL = '/api/v1/editor-chat/threads', TEMPLATE_ID = 'chat-brainstorm';
+  var convo = [];      // [{role,text}] running conversation
+  // Minted up-front so the "Copy chat ID" tool always has something to copy
+  // (even before the first message) and so the id we copy is the SAME one the
+  // first send persists under. Reset to a fresh id on New chat, replaced by the
+  // real id when a saved thread is opened.
+  var threadId = genId('thread');
+  // Cross-page hand-off: /chat (or a future AI-driven page nav) can pass
+  // ?rk_chat=<threadId> to continue that EXACT conversation in this dock. Read it
+  // once, strip it from the URL (so reload / back-button doesn't re-trigger), and
+  // replay the thread as soon as boot is ready (see consumeHandoff, called from
+  // loadBoot's ready path). Also opens the panel below so the jump is seamless.
+  var handoffThread = null;
+  try {
+    var _hq = new URLSearchParams(window.location.search);
+    handoffThread = _hq.get('rk_chat') || null;
+    if (handoffThread) {
+      _hq.delete('rk_chat');
+      var _hqs = _hq.toString();
+      window.history.replaceState(window.history.state, '', window.location.pathname + (_hqs ? '?' + _hqs : '') + window.location.hash);
+    }
+  } catch (e) { handoffThread = null; }
+  // Replay a handed-off thread once the dock is authed + booted. openThread needs
+  // API_KEY (set by loadBoot), so this only fires from the boot-ready path.
+  function consumeHandoff() {
+    if (!handoffThread || BOOT_STATE !== 'ready') return;
+    var id = handoffThread; handoffThread = null;
+    setLeftMode('');   // show the conversation, not the Files/History drawer
+    openThread(id);
+  }
+  var busy = false;
+  var pendingAbort = null; // AbortController for the in-flight reply (Stop button)
+  // On the /editor dock the chat MUST be scoped to the OPEN composition, not the
+  // generic brainstorm boot — otherwise the agent has no fork id and can't run
+  // video_context / editor_action (it guesses "chat-brainstorm" and gives up).
+  // The editor page already embeds the composition identity in #hf-boot; use it
+  // as the template context (exactly like the SPA chat's body.template) so
+  // thread_template_id is the real template_… id and create_video is dropped in
+  // favor of the edit tools. Set eagerly so the very first send is correct even
+  // before /chat-dock/boot resolves (that fetch still supplies the api key).
+  var EDITOR_TEMPLATE = null;
+  if (isEditorDock) {
+    try {
+      var hfBootEl = document.getElementById('hf-boot');
+      var hfBoot = hfBootEl ? JSON.parse(hfBootEl.textContent || '{}') : null;
+      var editorTplId = hfBoot && (hfBoot.templateId || hfBoot.compositionId);
+      if (editorTplId) {
+        EDITOR_TEMPLATE = {
+          page: 'docs', tracerId: null, tracers: [], defaultRequestTracer: null,
+          templateId: editorTplId,
+          templateSlug: (hfBoot && (hfBoot.slugId || hfBoot.templateId)) || editorTplId,
+          templateTitle: (hfBoot && hfBoot.title) || 'Studio',
+          templateDescription: '', docsRoutes: []
+        };
+        TEMPLATE = EDITOR_TEMPLATE;
+        TEMPLATE_ID = editorTplId;
+      }
+    } catch (e) {}
+  }
+  function genId(p) { return p + '-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8); }
+  function setBusy(v) {
+    busy = v;
+    // While a reply streams, the Send button becomes an interruptive Stop
+    // (stays clickable so the user can abort); it flips back to Send when done.
+    if (form) { var b = form.querySelector('button[type=submit]'); if (b) { b.textContent = v ? 'Stop' : 'Send'; b.classList.toggle('is-stop', v); } }
+    if (newChatBtn) newChatBtn.disabled = v;
+  }
+  function clientContext() {
+    var now = new Date(), local = null, tz = null;
+    try { local = new Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(now); } catch (e) { local = now.toString(); }
+    try { tz = (Intl.DateTimeFormat().resolvedOptions().timeZone) || null; } catch (e) { tz = null; }
+    return { currentDateTime: now.toISOString(), localDateTime: local, timeZone: tz };
+  }
+  // The live composition snapshot (fork id, layers, DNA) the SPA editor bundle
+  // exposes on window.__vidfarmEditorAction.getSnapshot(). Injected into the
+  // outgoing user turn — verbatim to what the SPA's own chat sends — so the agent
+  // knows which fork to read (video_context) and mutate (editor_action). Only the
+  // /editor dock has this bridge; elsewhere it returns ''.
+  function editorContextBlock() {
+    if (!isEditorDock) return '';
+    var bridge = (typeof window !== 'undefined') ? window.__vidfarmEditorAction : null;
+    if (!bridge || typeof bridge.getSnapshot !== 'function') return '';
+    var snap; try { snap = bridge.getSnapshot(); } catch (e) { snap = null; }
+    if (!snap) return '';
+    try { return '\n\n<editor_context>\n' + JSON.stringify(snap, null, 2) + '\n</editor_context>'; }
+    catch (e) { return ''; }
+  }
+  function loadBoot() {
+    if (BOOT_STATE === 'ready' || BOOT_STATE === 'loading') return;
+    BOOT_STATE = 'loading';
+    fetch('/chat-dock/boot' + (isEditorDock ? '?surface=editor' : ''), { credentials: 'same-origin', headers: { accept: 'application/json' } })
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (j) {
+        var b = j && j.editorChat;
+        if (!b) { BOOT_STATE = 'anon'; if (leftMode() === 'cloud') loadTasks(); return; }
+        BOOT = b;
+        ENDPOINT = b.apiUrl || ENDPOINT;
+        API_KEY = b.vidfarmApiKey || null;
+        // On the editor dock keep the composition-scoped template from #hf-boot —
+        // the generic brainstorm boot would strand the agent without a fork id.
+        if (EDITOR_TEMPLATE) { TEMPLATE = EDITOR_TEMPLATE; TEMPLATE_ID = EDITOR_TEMPLATE.templateId; }
+        else { TEMPLATE = b.template || null; TEMPLATE_ID = (TEMPLATE && TEMPLATE.templateId) || TEMPLATE_ID; }
+        CACHED = b.cachedContext || null;
+        THREADS_URL = b.threadsUrl || THREADS_URL;
+        BOOT_STATE = 'ready';
+        loadThreads();
+        if (leftMode() === 'cloud') loadTasks();
+        consumeHandoff();
+      })
+      .catch(function () { BOOT_STATE = 'error'; });
+  }
+  // ── first-class HTTP action card + request/response modal ──
+  function fmtBody(v) {
+    if (v === null || v === undefined) return '';
+    if (typeof v === 'string') { try { return JSON.stringify(JSON.parse(v), null, 2); } catch (e) { return v; } }
+    try { return JSON.stringify(v, null, 2); } catch (e) { return String(v); }
+  }
+  function copyText(t) {
+    try { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(t); return; } } catch (e) {}
+    try { var ta = document.createElement('textarea'); ta.value = t; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); } catch (e) {}
+  }
+  var COPY_SVG = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+  var CARET_SVG = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 4 6 6-6 6"/></svg>';
+  // Expandable/collapsible JSON tree — a recursive walk of the value with a
+  // per-path collapsed set (re-rendered on toggle). Mirrors the /editor chat's
+  // JsonViewer: indent depth*16+10px, quoted-key + colon, [ … ]/{ … } collapsed
+  // previews, per-line hover copy button.
+  function jsonViewer(value) {
+    var collapsed = {};
+    var wrap = document.createElement('div'); wrap.className = 'rk-aichat-json';
+    var bar = document.createElement('div'); bar.className = 'rk-aichat-json-bar';
+    var expand = document.createElement('button'); expand.type = 'button'; expand.className = 'rk-aichat-json-all'; expand.textContent = 'Collapse all';
+    var copyAll = document.createElement('button'); copyAll.type = 'button'; copyAll.className = 'rk-aichat-json-all'; copyAll.textContent = 'Copy all';
+    bar.appendChild(expand); bar.appendChild(copyAll);
+    var scroll = document.createElement('div'); scroll.className = 'rk-aichat-json-scroll';
+    wrap.appendChild(bar); wrap.appendChild(scroll);
+    function fmt(v) { if (typeof v === 'string') return JSON.stringify(v); if (typeof v === 'number' || typeof v === 'boolean') return String(v); if (v === null) return 'null'; return JSON.stringify(v); }
+    function lineRow(text, depth) {
+      var row = document.createElement('div'); row.className = 'rk-aichat-json-line'; row.style.paddingLeft = (depth * 16 + 10) + 'px';
+      var cp = document.createElement('button'); cp.type = 'button'; cp.className = 'rk-aichat-json-copy'; cp.setAttribute('aria-label', 'Copy line'); cp.innerHTML = COPY_SVG;
+      cp.addEventListener('click', function () { copyText(text); });
+      var sp = document.createElement('span'); sp.className = 'rk-aichat-json-text'; sp.textContent = text;
+      row.appendChild(cp); row.appendChild(sp); return row;
+    }
+    function toggleRow(text, depth, path, open) {
+      var row = document.createElement('div'); row.className = 'rk-aichat-json-line is-toggle'; row.style.paddingLeft = (depth * 16 + 10) + 'px';
+      var t = document.createElement('button'); t.type = 'button'; t.className = 'rk-aichat-json-caret'; t.setAttribute('data-open', open ? 'true' : 'false'); t.innerHTML = CARET_SVG;
+      t.addEventListener('click', function () { if (open) collapsed[path] = true; else delete collapsed[path]; render(); });
+      var sp = document.createElement('span'); sp.className = 'rk-aichat-json-text'; sp.textContent = text;
+      row.appendChild(t); row.appendChild(sp); return row;
+    }
+    function walk(v, depth, prefix, isLast, path) {
+      var comma = isLast ? '' : ',';
+      if (Array.isArray(v)) {
+        if (!v.length) { scroll.appendChild(lineRow(prefix + '[]' + comma, depth)); return; }
+        if (collapsed[path]) { scroll.appendChild(toggleRow(prefix + '[ … ]' + comma, depth, path, false)); return; }
+        scroll.appendChild(toggleRow(prefix + '[', depth, path, true));
+        for (var i = 0; i < v.length; i++) walk(v[i], depth + 1, '', i === v.length - 1, path + '.' + i);
+        scroll.appendChild(lineRow(']' + comma, depth));
+      } else if (v && typeof v === 'object') {
+        var keys = Object.keys(v);
+        if (!keys.length) { scroll.appendChild(lineRow(prefix + '{}' + comma, depth)); return; }
+        if (collapsed[path]) { scroll.appendChild(toggleRow(prefix + '{ … }' + comma, depth, path, false)); return; }
+        scroll.appendChild(toggleRow(prefix + '{', depth, path, true));
+        for (var k = 0; k < keys.length; k++) {
+          var key = keys[k], cp = JSON.stringify(key) + ': ', last = k === keys.length - 1, child = v[key];
+          if (child && typeof child === 'object') walk(child, depth + 1, cp, last, path + '.' + key);
+          else scroll.appendChild(lineRow(cp + fmt(child) + (last ? '' : ','), depth + 1));
+        }
+        scroll.appendChild(lineRow('}' + comma, depth));
+      } else {
+        scroll.appendChild(lineRow(prefix + fmt(v) + comma, depth));
+      }
+    }
+    function render() { scroll.innerHTML = ''; walk(value, 0, '', true, 'root'); }
+    var allCollapsed = false;
+    function markAll(v, path) {
+      if (Array.isArray(v)) { if (v.length) { collapsed[path] = true; for (var i = 0; i < v.length; i++) markAll(v[i], path + '.' + i); } }
+      else if (v && typeof v === 'object') { var ks = Object.keys(v); if (ks.length) { collapsed[path] = true; for (var k = 0; k < ks.length; k++) markAll(v[ks[k]], path + '.' + ks[k]); } }
+    }
+    expand.addEventListener('click', function () {
+      allCollapsed = !allCollapsed;
+      if (allCollapsed) { markAll(value, 'root'); delete collapsed['root']; expand.textContent = 'Expand all'; }
+      else { collapsed = {}; expand.textContent = 'Collapse all'; }
+      render();
+    });
+    copyAll.addEventListener('click', function () { copyText(fmtBody(value)); });
+    render();
+    return wrap;
+  }
+  function escapeHtml(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+  // Render inline markdown in assistant text: bold, italic, markdown links and
+  // bare absolute URLs → HTML (mirrors the /editor chat's renderInlineMarkdown).
+  // Order matters: **bold** before *italic*; links before bare-URL autolinking
+  // (an href="…" is never preceded by whitespace/'(' so it won't double-link).
+  function linkify(text) {
+    var BT = String.fromCharCode(96);
+    var html = escapeHtml(text);
+    html = html.replace(new RegExp(BT + '([^' + BT + ']+)' + BT, 'g'), '<code>$1</code>');
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/(^|[^\w*])\*([^*\n]+)\*/g, '$1<em>$2</em>');
+    html = html.replace(/(^|[^\w_])_([^_\n]+)_/g, '$1<em>$2</em>');
+    html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    html = html.replace(/(^|[\s(])(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g, '$1<a href="$2" target="_blank" rel="noopener noreferrer">$2</a>');
+    return html;
+  }
+  // ── GitHub-style pipe tables ──────────────────────────────────────────────
+  // A table = a header row containing '|', a separator row of dashes/pipes, then
+  // 0+ body rows. Used both by assistant-message rendering and .md previews so
+  // the model's markdown tables (job registers, comparisons) render as tables.
+  function rkTableCells(line) { var s = String(line).trim().replace(/^\|/, '').replace(/\|$/, ''); return s.split('|').map(function (c) { return c.trim(); }); }
+  function rkIsTableSep(line) { return /^\s*\|?\s*:?-{1,}:?\s*(\|\s*:?-{1,}:?\s*)+\|?\s*$/.test(String(line || '')); }
+  function rkBuildTable(header, rows, fmt) {
+    var thead = '<thead><tr>' + header.map(function (c) { return '<th>' + fmt(c) + '</th>'; }).join('') + '</tr></thead>';
+    var tbody = '<tbody>' + rows.map(function (r) {
+      var cells = ''; for (var i = 0; i < header.length; i++) { cells += '<td>' + fmt(r[i] != null ? r[i] : '') + '</td>'; }
+      return '<tr>' + cells + '</tr>';
+    }).join('') + '</tbody>';
+    return '<div class="rk-md-tablewrap"><table class="rk-md-table">' + thead + tbody + '</table></div>';
+  }
+  // Assistant message → HTML: pipe tables become real <table>s; everything else
+  // keeps its inline (linkify) formatting under the bubble's pre-wrap whitespace.
+  function formatAssistantMarkdown(text) {
+    var lines = String(text).replace(/\r\n?/g, '\n').split('\n');
+    var out = [], buf = [], i = 0;
+    function flush() { if (buf.length) { out.push(linkify(buf.join('\n'))); buf = []; } }
+    while (i < lines.length) {
+      var ln = lines[i], nxt = (i + 1 < lines.length) ? lines[i + 1] : null;
+      if (ln.indexOf('|') >= 0 && nxt != null && rkIsTableSep(nxt) && rkTableCells(ln).length >= 2) {
+        flush();
+        var header = rkTableCells(ln), rows = [], j = i + 2;
+        while (j < lines.length && lines[j].indexOf('|') >= 0 && lines[j].trim() !== '') { rows.push(rkTableCells(lines[j])); j++; }
+        out.push(rkBuildTable(header, rows, linkify)); i = j; continue;
+      }
+      buf.push(ln); i++;
+    }
+    flush();
+    return out.join('');
+  }
+  function openHttpModal(ex) {
+    var req = ex.request || {}, res = ex.response || {};
+    var status = typeof res.status === 'number' ? res.status : 0;
+    var isErr = status >= 400 || res.error;
+    var back = document.createElement('div');
+    back.className = 'rk-aichat-modal-back';
+    var modal = document.createElement('div');
+    modal.className = 'rk-aichat-modal';
+    var head = document.createElement('div');
+    head.className = 'rk-aichat-modal-head';
+    head.innerHTML = '<span class="rk-aichat-http-method">' + (req.method || 'GET') + '</span>'
+      + '<span class="rk-aichat-http-url"></span>'
+      + '<span class="rk-aichat-http-status" data-error="' + (isErr ? 'true' : 'false') + '">' + (status || '—') + (res.statusText ? ' ' + res.statusText : '') + '</span>'
+      + '<button type="button" class="rk-aichat-modal-x" aria-label="Close">&times;</button>';
+    head.querySelector('.rk-aichat-http-url').textContent = req.url || req.path || '';
+    var body = document.createElement('div');
+    body.className = 'rk-aichat-modal-body';
+    // A raw string block (URL, error text). Always plain <pre>.
+    function textBlock(label, text) {
+      if (!text) return;
+      var wrap = document.createElement('div'); wrap.className = 'rk-aichat-http-block';
+      var l = document.createElement('div'); l.className = 'rk-aichat-http-blabel'; l.textContent = label;
+      var pre = document.createElement('pre'); pre.className = 'rk-aichat-http-pre'; pre.textContent = text;
+      wrap.appendChild(l); wrap.appendChild(pre); body.appendChild(wrap);
+    }
+    // A body/headers block: collapsible JSON tree when structured, else <pre>.
+    function dataBlock(label, value) {
+      if (value === null || value === undefined || value === '') return;
+      var data = value;
+      if (typeof value === 'string') { try { var p = JSON.parse(value); if (p && typeof p === 'object') data = p; } catch (e) {} }
+      var wrap = document.createElement('div'); wrap.className = 'rk-aichat-http-block';
+      var l = document.createElement('div'); l.className = 'rk-aichat-http-blabel'; l.textContent = label;
+      wrap.appendChild(l);
+      if (data && typeof data === 'object') { wrap.appendChild(jsonViewer(data)); }
+      else { var pre = document.createElement('pre'); pre.className = 'rk-aichat-http-pre'; pre.textContent = (typeof value === 'string') ? value : fmtBody(value); wrap.appendChild(pre); }
+      body.appendChild(wrap);
+    }
+    function hasKeys(o) { return o && typeof o === 'object' && Object.keys(o).length > 0; }
+    if (ex.explanation) { var note = document.createElement('div'); note.className = 'rk-aichat-http-note'; note.textContent = ex.explanation; body.appendChild(note); }
+    textBlock('URL', req.url || req.path || '');
+    if (req.body !== undefined && req.body !== null && req.body !== '') dataBlock('Request', req.body);
+    if (res.error) textBlock('Response', res.error);
+    else dataBlock('Response', (res.body === undefined || res.body === null || res.body === '') ? '(empty)' : res.body);
+    if (hasKeys(res.headers)) dataBlock('Response headers', res.headers);
+    modal.appendChild(head); modal.appendChild(body); back.appendChild(modal);
+    function close() { if (back.parentNode) back.parentNode.removeChild(back); document.removeEventListener('keydown', onKey); }
+    function onKey(e) { if (e.key === 'Escape') { e.stopPropagation(); close(); } }
+    back.addEventListener('click', function (e) { if (e.target === back) close(); });
+    head.querySelector('.rk-aichat-modal-x').addEventListener('click', close);
+    document.addEventListener('keydown', onKey);
+    document.body.appendChild(back);
+  }
+  function httpCard(ex) {
+    var req = ex.request || {}, res = ex.response || {};
+    var status = typeof res.status === 'number' ? res.status : 0;
+    var isErr = status >= 400 || res.error;
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'rk-aichat-http';
+    var m = document.createElement('span'); m.className = 'rk-aichat-http-method'; m.textContent = req.method || 'GET';
+    var u = document.createElement('span'); u.className = 'rk-aichat-http-url';
+    var url = req.url || req.path || '';
+    u.textContent = url.replace(/^https?:\/\/[^/]+/, ''); u.title = url;
+    var s = document.createElement('span'); s.className = 'rk-aichat-http-status';
+    s.setAttribute('data-error', isErr ? 'true' : 'false'); s.textContent = status || '—';
+    b.appendChild(m); b.appendChild(u); b.appendChild(s);
+    b.addEventListener('click', function () { openHttpModal(ex); });
+    return b;
+  }
+  // ── file preview: classify a file by content-type + extension ──
+  function fileKind(name, ct) {
+    ct = (ct || '').toLowerCase();
+    var ext = ((name || '').split('.').pop() || '').toLowerCase();
+    if (ct.indexOf('image/') === 0 || /^(png|jpe?g|gif|webp|svg|avif|bmp|heic|ico)$/.test(ext)) return 'image';
+    if (ct.indexOf('video/') === 0 || /^(mp4|mov|webm|m4v|mkv|ogv)$/.test(ext)) return 'video';
+    if (ct.indexOf('audio/') === 0 || /^(mp3|wav|m4a|aac|ogg|oga|flac|opus)$/.test(ext)) return 'audio';
+    if (ct.indexOf('application/pdf') === 0 || ext === 'pdf') return 'pdf';
+    if (ct.indexOf('json') >= 0 || ext === 'json') return 'json';
+    if (ext === 'md' || ext === 'markdown' || ct.indexOf('markdown') >= 0) return 'markdown';
+    if (ct.indexOf('text/') === 0 || /^(txt|csv|tsv|srt|vtt|log|xml|yaml|yml|ini|conf|html?)$/.test(ext)) return 'text';
+    return 'other';
+  }
+  function fileIcon(kind) { return kind === 'pdf' ? '📕' : kind === 'json' ? '{ }' : kind === 'markdown' ? '📝' : kind === 'audio' ? '🎵' : kind === 'text' ? '📄' : '📄'; }
+  // Compact markdown → HTML for .md previews (headings, lists, quotes, rules,
+  // fenced + inline code, bold/italic/links). Escapes first, then injects tags
+  // (same order as linkify). Backticks are built via char codes to avoid
+  // escaping issues inside this template literal.
+  function renderMarkdown(src) {
+    var BT = String.fromCharCode(96), FENCE = BT + BT + BT;
+    function inline(s) {
+      s = escapeHtml(s);
+      s = s.replace(new RegExp(BT + '([^' + BT + ']+)' + BT, 'g'), '<code>$1</code>');
+      s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+      s = s.replace(/(^|[^\w*])\*([^*\n]+)\*/g, '$1<em>$2</em>');
+      s = s.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+      s = s.replace(/(^|[\s(])(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g, '$1<a href="$2" target="_blank" rel="noopener noreferrer">$2</a>');
+      return s;
+    }
+    var lines = String(src).replace(/\r\n?/g, '\n').split('\n');
+    var out = [], inCode = false, code = [], listType = null, listItems = [];
+    function flushList() { if (!listType) return; out.push('<' + listType + '>' + listItems.join('') + '</' + listType + '>'); listType = null; listItems = []; }
+    function flushCode() { out.push('<pre class="rk-aichat-preview-code"><code>' + escapeHtml(code.join('\n')) + '</code></pre>'); code = []; }
+    for (var i = 0; i < lines.length; i++) {
+      var ln = lines[i];
+      if (ln.trim().indexOf(FENCE) === 0) { if (inCode) { flushCode(); inCode = false; } else { flushList(); inCode = true; } continue; }
+      if (inCode) { code.push(ln); continue; }
+      if (ln.indexOf('|') >= 0 && (i + 1) < lines.length && rkIsTableSep(lines[i + 1]) && rkTableCells(ln).length >= 2) {
+        flushList();
+        var thead = rkTableCells(ln), trows = [], jj = i + 2;
+        while (jj < lines.length && lines[jj].indexOf('|') >= 0 && lines[jj].trim() !== '') { trows.push(rkTableCells(lines[jj])); jj++; }
+        out.push(rkBuildTable(thead, trows, inline)); i = jj - 1; continue;
+      }
+      var h = ln.match(/^(#{1,6})\s+(.*)$/);
+      if (h) { flushList(); var lvl = h[1].length; out.push('<h' + lvl + '>' + inline(h[2]) + '</h' + lvl + '>'); continue; }
+      if (/^\s*([-*+])\s+/.test(ln)) { if (listType !== 'ul') { flushList(); listType = 'ul'; } listItems.push('<li>' + inline(ln.replace(/^\s*[-*+]\s+/, '')) + '</li>'); continue; }
+      var om = ln.match(/^\s*\d+\.\s+(.*)$/);
+      if (om) { if (listType !== 'ol') { flushList(); listType = 'ol'; } listItems.push('<li>' + inline(om[1]) + '</li>'); continue; }
+      if (/^\s*>\s?/.test(ln)) { flushList(); out.push('<blockquote>' + inline(ln.replace(/^\s*>\s?/, '')) + '</blockquote>'); continue; }
+      if (/^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(ln)) { flushList(); out.push('<hr>'); continue; }
+      if (!ln.trim()) { flushList(); continue; }
+      flushList();
+      out.push('<p>' + inline(ln) + '</p>');
+    }
+    if (inCode) flushCode();
+    flushList();
+    return out.join('');
+  }
+  // ── file preview modal: images (carousel), video, audio, pdf, and text
+  // (json → collapsible tree, md → rendered, txt/csv/srt/vtt → <pre>) ──
+  function openFilePreview(items, index) {
+    items = (items || []).filter(function (f) { return f && f.viewUrl; });
+    if (!items.length) return;
+    var idx = Math.max(0, Math.min(index || 0, items.length - 1));
+    var back = document.createElement('div'); back.className = 'rk-aichat-modal-back';
+    var modal = document.createElement('div'); modal.className = 'rk-aichat-modal rk-aichat-preview';
+    var head = document.createElement('div'); head.className = 'rk-aichat-modal-head';
+    var nameEl = document.createElement('span'); nameEl.className = 'rk-aichat-http-url rk-aichat-preview-name';
+    var copyBtn = document.createElement('button'); copyBtn.type = 'button'; copyBtn.className = 'rk-aichat-preview-act'; copyBtn.textContent = 'Copy';
+    var dlBtn = document.createElement('a'); dlBtn.className = 'rk-aichat-preview-act'; dlBtn.target = '_blank'; dlBtn.rel = 'noopener noreferrer'; dlBtn.textContent = 'Download';
+    var linkBtn = document.createElement('button'); linkBtn.type = 'button'; linkBtn.className = 'rk-aichat-preview-act'; linkBtn.textContent = 'Copy link';
+    var xBtn = document.createElement('button'); xBtn.type = 'button'; xBtn.className = 'rk-aichat-modal-x'; xBtn.setAttribute('aria-label', 'Close'); xBtn.innerHTML = '&times;';
+    head.appendChild(nameEl); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
+    function flashAct(btn, label) { var o = btn.getAttribute('data-label') || btn.textContent; btn.setAttribute('data-label', o); btn.textContent = label; setTimeout(function () { btn.textContent = o; }, 1400); }
+    // Copy = file text (json/md/txt) or its URL for binaries. Copy link = the
+    // durable public S3 URL. Download opens in a new tab when the browser can't
+    // force a same-origin download (cross-origin S3).
+    copyBtn.addEventListener('click', function () {
+      var it = items[idx], k = fileKind(it.name, it.contentType);
+      if (k === 'json' || k === 'markdown' || k === 'text') {
+        fetch(it.viewUrl, { credentials: 'same-origin' }).then(function (r) { return r.text(); })
+          .then(function (t) { copyText(t); flashAct(copyBtn, 'Copied'); })
+          .catch(function () { copyText(it.publicUrl || it.viewUrl); flashAct(copyBtn, 'Copied'); });
+      } else { copyText(it.publicUrl || it.viewUrl); flashAct(copyBtn, 'Copied'); }
+    });
+    linkBtn.addEventListener('click', function () { var it = items[idx]; copyText(it.publicUrl || it.viewUrl); flashAct(linkBtn, 'Copied'); });
+    var body = document.createElement('div'); body.className = 'rk-aichat-modal-body rk-aichat-preview-body';
+    var nav = document.createElement('div'); nav.className = 'rk-aichat-preview-nav';
+    var prev = document.createElement('button'); prev.type = 'button'; prev.className = 'rk-aichat-preview-btn'; prev.innerHTML = '‹ Prev';
+    var counter = document.createElement('span'); counter.className = 'rk-aichat-preview-count';
+    var next = document.createElement('button'); next.type = 'button'; next.className = 'rk-aichat-preview-btn'; next.innerHTML = 'Next ›';
+    nav.appendChild(prev); nav.appendChild(counter); nav.appendChild(next);
+    function renderUnknown(container, it, msg) {
+      var wrap = document.createElement('div'); wrap.className = 'rk-aichat-preview-empty';
+      var p = document.createElement('div'); p.textContent = msg || 'No inline preview for this file type.'; wrap.appendChild(p);
+      var a = document.createElement('a'); a.href = it.viewUrl; a.target = '_blank'; a.rel = 'noopener noreferrer'; a.className = 'rk-aichat-preview-dl'; a.textContent = 'Open / download ↗'; wrap.appendChild(a);
+      container.appendChild(wrap);
+    }
+    function renderText(container, it, kind) {
+      var loading = document.createElement('div'); loading.className = 'rk-aichat-preview-loading'; loading.textContent = 'Loading…'; container.appendChild(loading);
+      fetch(it.viewUrl, { credentials: 'same-origin' })
+        .then(function (r) { if (!r.ok) throw new Error('http ' + r.status); return r.text(); })
+        .then(function (txt) {
+          container.innerHTML = '';
+          if (kind === 'json') {
+            var parsed; try { parsed = JSON.parse(txt); } catch (e) { parsed = undefined; }
+            if (parsed && typeof parsed === 'object') { container.appendChild(jsonViewer(parsed)); return; }
+            var pj = document.createElement('pre'); pj.className = 'rk-aichat-http-pre rk-aichat-preview-text'; pj.textContent = txt; container.appendChild(pj); return;
+          }
+          if (kind === 'markdown') { var md = document.createElement('div'); md.className = 'rk-aichat-preview-md'; md.innerHTML = renderMarkdown(txt); container.appendChild(md); return; }
+          var pre = document.createElement('pre'); pre.className = 'rk-aichat-http-pre rk-aichat-preview-text'; pre.textContent = txt; container.appendChild(pre);
+        })
+        .catch(function () { container.innerHTML = ''; renderUnknown(container, it, 'Couldn’t load this file.'); });
+    }
+    function render() {
+      var it = items[idx];
+      nameEl.textContent = it.name || 'file'; nameEl.title = it.name || '';
+      dlBtn.href = it.viewUrl; dlBtn.setAttribute('download', it.name || '');
+      linkBtn.style.display = it.publicUrl ? '' : 'none';
+      body.innerHTML = '';
+      var kind = fileKind(it.name, it.contentType);
+      if (kind === 'image') { var im = document.createElement('img'); im.className = 'rk-aichat-preview-img'; im.src = it.viewUrl; im.alt = it.name || ''; body.appendChild(im); }
+      else if (kind === 'video') { var v = document.createElement('video'); v.className = 'rk-aichat-preview-media'; v.src = it.viewUrl; v.controls = true; v.playsInline = true; body.appendChild(v); }
+      else if (kind === 'audio') { var wrap = document.createElement('div'); wrap.className = 'rk-aichat-preview-audiowrap'; var a = document.createElement('audio'); a.className = 'rk-aichat-preview-audio'; a.src = it.viewUrl; a.controls = true; wrap.appendChild(a); body.appendChild(wrap); }
+      else if (kind === 'pdf') { var f = document.createElement('iframe'); f.className = 'rk-aichat-preview-frame'; f.src = it.viewUrl; body.appendChild(f); }
+      else if (kind === 'json' || kind === 'markdown' || kind === 'text') { renderText(body, it, kind); }
+      else { renderUnknown(body, it); }
+      counter.textContent = (idx + 1) + ' / ' + items.length;
+      prev.disabled = idx <= 0; next.disabled = idx >= items.length - 1;
+      nav.hidden = items.length < 2;
+    }
+    prev.addEventListener('click', function () { if (idx > 0) { idx--; render(); } });
+    next.addEventListener('click', function () { if (idx < items.length - 1) { idx++; render(); } });
+    modal.appendChild(head); modal.appendChild(body); modal.appendChild(nav); back.appendChild(modal);
+    function close() { if (back.parentNode) back.parentNode.removeChild(back); document.removeEventListener('keydown', onKey); }
+    function onKey(e) { if (e.key === 'Escape') { e.stopPropagation(); close(); } else if (e.key === 'ArrowLeft') { if (idx > 0) { idx--; render(); } } else if (e.key === 'ArrowRight') { if (idx < items.length - 1) { idx++; render(); } } }
+    back.addEventListener('click', function (e) { if (e.target === back) close(); });
+    xBtn.addEventListener('click', close);
+    document.addEventListener('keydown', onKey);
+    document.body.appendChild(back);
+    render();
+  }
+  // ── job auto-poll → render finished output as file previews in chat ────────
+  // Jobs the agent starts (brainstorm, generation, render) are async. We watch
+  // every job id we see in assistant text or tool results, and when it finishes
+  // we drop its output (media + JSON artifact) into the chat as file-preview
+  // thumbnails — WITHOUT persisting them to the transcript (keeps context lean).
+  var rkPolledJobs = {};
+  function rkJobHeaders() { var h = { accept: 'application/json' }; if (API_KEY) h['vidfarm-api-key'] = API_KEY; return h; }
+  function rkExtractJobIds(text) { var ids = {}, re = /job_[0-9a-f]{16,}/g, m; while ((m = re.exec(String(text || '')))) { ids[m[0]] = true; } return Object.keys(ids); }
+  function rkJobIdsFromExchange(ex) { try { var body = ex && ex.response && ex.response.body; if (body == null) return []; var txt = (typeof body === 'string') ? body : JSON.stringify(body); return rkExtractJobIds(txt); } catch (e) { return []; } }
+  function rkResultMediaUrl(job) {
+    function s(v) { return (typeof v === 'string' && v.trim()) ? v.trim() : null; }
+    var result = (job && job.result && typeof job.result === 'object') ? job.result : {};
+    var out = (result.output && typeof result.output === 'object') ? result.output : result;
+    var direct = s(out.primary_file_url) || s(out.video && out.video.file_url) || s(out.image && out.image.file_url) || s(out.render && out.render.output_url);
+    if (direct) return direct;
+    if (out.files && out.files.length) { for (var i = 0; i < out.files.length; i++) { var f = out.files[i]; var u = s(typeof f === 'string' ? f : (f && (f.file_url || f.url))); if (u) return u; } }
+    return null;
+  }
+  function rkFileFromArtifact(a) {
+    var url = a && (a.public_url || a.publicUrl); if (!url) return null;
+    var meta = (a && a.metadata) || {}; var name = meta.file_name || meta.filename || '';
+    if (!name) { var seg = String(url).split('?')[0].split('/').pop(); name = seg || (a.kind ? String(a.kind) : 'artifact'); }
+    return { name: name, contentType: meta.content_type || meta.contentType || '', viewUrl: url, publicUrl: url };
+  }
+  function rkJobOutputFiles(job) {
+    var files = [], seen = {};
+    var arts = (job && job.artifacts) || [];
+    for (var i = 0; i < arts.length; i++) { var f = rkFileFromArtifact(arts[i]); if (f && !seen[f.viewUrl]) { seen[f.viewUrl] = true; files.push(f); } }
+    var mu = rkResultMediaUrl(job); if (mu && !seen[mu]) { seen[mu] = true; files.push({ name: (job.tracer || 'output'), contentType: '', viewUrl: mu, publicUrl: mu }); }
+    var res = job && job.result;
+    if (res && typeof res === 'object' && !Array.isArray(res) && Object.keys(res).length) {
+      try { var blob = new Blob([JSON.stringify(res, null, 2)], { type: 'application/json' }); files.push({ name: (job.tracer || 'result') + '.json', contentType: 'application/json', viewUrl: URL.createObjectURL(blob), publicUrl: null }); } catch (e) {}
+    }
+    return files;
+  }
+  function rkPollJob(view, jobId) {
+    if (!jobId || rkPolledJobs[jobId]) return; rkPolledJobs[jobId] = true;
+    var origin = window.location.origin, deadline = Date.now() + 12 * 60 * 1000;
+    function step() {
+      fetch(origin + '/api/v1/user/me/jobs/' + encodeURIComponent(jobId), { headers: rkJobHeaders(), credentials: 'same-origin' })
+        .then(function (r) { return r.ok ? r.json() : null; })
+        .then(function (job) {
+          if (!job) return;
+          var st = String(job.status || '');
+          if (st === 'succeeded') { var files = rkJobOutputFiles(job); if (files.length) view.addFiles(files, 'Output · ' + (job.tracer || jobId)); return; }
+          if (st === 'failed' || st === 'cancelled') return;
+          if (Date.now() > deadline) return;
+          setTimeout(step, 5000);
+        })
+        .catch(function () {});
+    }
+    step();
+  }
+  // ── assistant turn controller (status → actions → streamed text) ──
+  function appendAssistant() {
+    var turn = document.createElement('div'); turn.className = 'rk-aichat-turn';
+    var actions = document.createElement('div'); actions.className = 'rk-aichat-actions';
+    var status = document.createElement('div'); status.className = 'rk-aichat-status';
+    status.innerHTML = '<span class="rk-aichat-typing"><span></span><span></span><span></span></span>';
+    var textEl = document.createElement('div'); textEl.className = 'rk-aichat-msg is-ai rk-aichat-stream'; textEl.hidden = true;
+    turn.appendChild(actions); turn.appendChild(status); turn.appendChild(textEl);
+    log.appendChild(turn); logBottom();
+    var lastText = '', flowEl = null;
+    return {
+      hideStatus: function () { status.hidden = true; },
+      showText: function () { status.hidden = true; textEl.hidden = false; },
+      setText: function (t) { lastText = t; textEl.textContent = t; },
+      // After streaming completes, re-render the text as markdown (tables,
+      // bold/italic/links/code) — pipe tables become real <table>s.
+      renderMd: function () { if (lastText) textEl.innerHTML = formatAssistantMarkdown(lastText); },
+      // Attach finished job/tool output as clickable file-preview thumbnails.
+      // Kept OUT of the persisted transcript (convo) so context stays lean.
+      addFiles: function (files, label) {
+        var list = (files || []).filter(function (f) { return f && f.viewUrl; });
+        if (!list.length) return;
+        var wrap = document.createElement('div'); wrap.className = 'rk-aichat-filepreview';
+        if (label) { var lb = document.createElement('div'); lb.className = 'rk-aichat-files-label'; lb.textContent = label; wrap.appendChild(lb); }
+        var grid = document.createElement('div'); grid.className = 'rk-aichat-files-grid';
+        list.forEach(function (f, ix) {
+          var k = fileKind(f.name, f.contentType);
+          var card = document.createElement('button'); card.type = 'button'; card.className = 'rk-aichat-file';
+          var thumb = document.createElement('div'); thumb.className = 'rk-aichat-file-thumb rk-aichat-file-thumb--' + k;
+          if (k === 'image') { var im = document.createElement('img'); im.src = f.viewUrl; im.alt = ''; im.loading = 'lazy'; thumb.appendChild(im); }
+          else if (k === 'video') { var v = document.createElement('video'); v.src = f.viewUrl; v.muted = true; v.preload = 'metadata'; v.playsInline = true; thumb.appendChild(v); var pl = document.createElement('span'); pl.className = 'rk-aichat-file-play'; pl.textContent = '▶'; thumb.appendChild(pl); }
+          else { var ic = document.createElement('span'); ic.className = 'rk-aichat-file-ic'; ic.textContent = fileIcon(k); thumb.appendChild(ic); }
+          var nm = document.createElement('div'); nm.className = 'rk-aichat-file-name'; nm.textContent = f.name || 'file'; nm.title = f.name || '';
+          card.appendChild(thumb); card.appendChild(nm);
+          card.addEventListener('click', function () { openFilePreview(list, ix); });
+          grid.appendChild(card);
+        });
+        wrap.appendChild(grid); turn.appendChild(wrap); logBottom();
+      },
+      addNote: function (name) {
+        var n = document.createElement('div'); n.className = 'rk-aichat-toolnote';
+        n.textContent = 'Running ' + name + '…'; actions.appendChild(n); logBottom();
+        return n;
+      },
+      // Terminal one-line note (kind 'ok' | 'err' | undefined) — e.g. the real
+      // browser-side outcome of an editor_action apply.
+      note: function (text, kind) {
+        var n = document.createElement('div');
+        n.className = 'rk-aichat-toolnote' + (kind === 'err' ? ' is-err' : (kind === 'ok' ? ' is-ok' : ''));
+        n.textContent = text; actions.appendChild(n); logBottom();
+        return n;
+      },
+      addHttp: function (ex) { actions.appendChild(httpCard(ex)); logBottom(); },
+      // create_video pipeline progress (persistent status row, distinct from the
+      // thinking dots which hide once agent text streams).
+      flowStatus: function (s) {
+        if (!flowEl) { flowEl = document.createElement('div'); flowEl.className = 'rk-aichat-flow'; flowEl.innerHTML = '<span class="rk-aichat-typing"><span></span><span></span><span></span></span><span class="rk-aichat-flow-label"></span>'; turn.appendChild(flowEl); }
+        flowEl.hidden = false; flowEl.querySelector('.rk-aichat-flow-label').textContent = s || ''; logBottom();
+      },
+      // Final pipeline message (markdown-linkified, e.g. "Open it in the editor").
+      flowResult: function (md) {
+        if (flowEl) flowEl.hidden = true;
+        var b = document.createElement('div'); b.className = 'rk-aichat-msg is-ai'; b.innerHTML = linkify(md); turn.appendChild(b); logBottom();
+      },
+      fail: function (msg) {
+        status.hidden = true;
+        var er = document.createElement('div'); er.className = 'rk-aichat-err';
+        er.textContent = msg || 'Something went wrong.'; turn.appendChild(er); logBottom();
+      }
+    };
+  }
+  // ── SSE reader (mirrors the live editor-chat client) ──
+  function handleEvent(raw, h) {
+    var lines = raw.split('\n'), dataLine = null;
+    for (var j = 0; j < lines.length; j++) { var t = lines[j].trim(); if (t.indexOf('data:') === 0) { dataLine = t; break; } }
+    if (!dataLine) return;
+    var payload = dataLine.slice(5).trim();
+    if (payload === '[DONE]' || !payload) return;
+    var chunk; try { chunk = JSON.parse(payload); } catch (e) { return; }
+    if (!chunk || typeof chunk !== 'object') return;
+    if (chunk.type === 'text-delta' && typeof chunk.delta === 'string') h.onDelta(chunk.delta);
+    else if (chunk.type === 'tool-call' && typeof chunk.toolName === 'string') h.onToolCall(chunk.toolName, chunk.toolCallId);
+    else if (chunk.type === 'tool-result') h.onToolResult(chunk.toolName, chunk.result, chunk.toolCallId);
+    else if (chunk.type === 'error') h.onError((typeof chunk.errorText === 'string') ? chunk.errorText : ((chunk.error && chunk.error.message) || 'Unable to read assistant response.'));
+  }
+  function readStream(response, h) {
+    if (!response.body || !response.body.getReader) return response.text().then(function (t) { t.split('\n\n').forEach(function (ev) { handleEvent(ev, h); }); });
+    var reader = response.body.getReader(), decoder = new TextDecoder(), buffer = '';
+    function pump() {
+      return reader.read().then(function (res) {
+        if (res.done) { if (buffer) handleEvent(buffer, h); return; }
+        buffer += decoder.decode(res.value, { stream: true });
+        var events = buffer.split('\n\n');
+        buffer = events.pop() || '';
+        for (var i = 0; i < events.length; i++) handleEvent(events[i], h);
+        return pump();
+      });
+    }
+    return pump();
+  }
+  // Turn this turn's attachments into a text line the model can quote back as
+  // REST payload URLs (prompt_attachments / source_image_url / media_url), in
+  // addition to the binary file content parts. Mirrors the /editor React dock
+  // (buildAttachmentTransportText). Double-backslash-n = a browser-side newline
+  // (we live inside a script template literal, so a bare newline escape breaks it).
+  function buildAttachmentUrlText(atts) {
+    if (!atts || !atts.length) return '';
+    var lines = atts.map(function (a) { return '- ' + (a.fileName || 'file') + ' (' + (a.contentType || '') + '): ' + a.viewUrl; });
+    return '\n\nAttached file URLs for REST payloads:\n' + lines.join('\n') + '\nUse these exact URLs as prompt_attachments for image generation, source_image_url for image edits, media_url for video slides, or reference attachment URLs when calling template routes.';
+  }
+  function sendMessage(text) {
+    if (busy) return;
+    text = (text || '').trim();
+    var picked = (typeof selected !== 'undefined' ? selected : []).slice();
+    // A pasted file may still be uploading to /temp — wait for it rather than
+    // silently dropping the attachment. Flash the in-flight chips as a hint.
+    if (picked.some(function (f) { return f && f.pending; })) {
+      picked.forEach(function (f) { if (f.pending) flashChip(f.id); });
+      return;
+    }
+    var atts = picked.filter(function (f) { return f && f.viewUrl; }).map(function (f) {
+      return { id: String(f.id), fileName: f.name || 'file', contentType: f.contentType || 'application/octet-stream', viewUrl: f.viewUrl };
+    });
+    if (!text && !atts.length) return;
+    if (BOOT_STATE === 'idle' || BOOT_STATE === 'error') loadBoot();
+    var line = text;
+    if (picked.length) { line = (text ? text + '  ' : '') + '(attached: ' + picked.map(function (f) { return f.name; }).join(', ') + ')'; }
+    bubble('is-user', line);
+    convo.push({ role: 'user', text: text || line });
+    if (input) { input.value = ''; if (typeof autosizeInput === 'function') autosizeInput(); }
+    if (typeof clearChips === 'function') clearChips();
+    if (BOOT_STATE === 'anon') {
+      var v = appendAssistant(); v.showText();
+      v.setText('Sign in to chat with the vidfarm AI on your own provider keys.');
+      return;
+    }
+    var view = appendAssistant();
+    setBusy(true);
+    if (!threadId) threadId = genId('thread');
+    // Attach a fresh <editor_context> to the current (last) user turn only, so the
+    // model sees the composition state without bloating persisted history.
+    var ctxBlock = editorContextBlock();
+    // Attachments (pasted files OR files picked from the directory explorer) must
+    // ride in the model messages as file content parts + a URL text line — the
+    // backend only feeds the model messages[].content, NOT user_message.attachments
+    // (which is persistence-only). Without this the AI never saw attached files.
+    var attUrlText = atts.length ? buildAttachmentUrlText(atts) : '';
+    var outMessages = convo.map(function (m, i) {
+      var isLast = i === convo.length - 1;
+      var isLastUser = isLast && m.role === 'user';
+      var t = m.text;
+      if (isLastUser && attUrlText) t = t + attUrlText;
+      if (ctxBlock && isLastUser) t = t + ctxBlock;
+      var content = [{ type: 'text', text: t }];
+      if (isLastUser && atts.length) {
+        atts.forEach(function (a) { content.push({ type: 'file', data: a.viewUrl, mediaType: a.contentType || 'application/octet-stream' }); });
+      }
+      return { role: m.role, content: content };
+    });
+    var body = {
+      messages: outMessages,
+      thread_id: threadId,
+      thread_template_id: TEMPLATE_ID,
+      thread_title: (text || line).slice(0, 42),
+      thread_tracers: (TEMPLATE && TEMPLATE.tracers) || [],
+      client_context: clientContext(),
+      user_message: { id: genId('user'), role: 'user', text: text || line, attachments: atts },
+      assistant_message: { id: genId('assistant') }
+    };
+    if (TEMPLATE) body.template = TEMPLATE;
+    if (CACHED) body.cached_context = CACHED;
+    var headers = { 'content-type': 'application/json' };
+    if (API_KEY) headers['vidfarm-api-key'] = API_KEY;
+    var acc = '', sawText = false, errored = false;
+    var handlers = {
+      onDelta: function (d) { if (!sawText) { sawText = true; view.showText(); } acc += d; view.setText(acc); logBottom(); },
+      onToolCall: function (name) { if (name !== 'http_request' && name !== 'create_video') view.addNote(name); },
+      onToolResult: function (name, result) {
+        if (name === 'create_video') { runCreateVideoFlow(view, result); return; }
+        // editor_action only mutates the composition browser-side. On /editor the
+        // SPA bundle exposes window.__vidfarmEditorAction; apply the tool result
+        // through it and surface the REAL outcome. Without this the dock ignored
+        // editor_action entirely, so the model's edits were pure no-ops even
+        // though its reply claimed success. (Only wired on the editor dock — the
+        // bridge is absent on /discover, /library, etc.)
+        if (name === 'editor_action') { applyEditorActionFromChat(view, result); return; }
+        if (result && result.request && result.response) { view.addHttp(result); rkJobIdsFromExchange(result).forEach(function (id) { rkPollJob(view, id); }); }
+      },
+      onError: function (m) { errored = true; view.fail(m); }
+    };
+    var controller = (typeof AbortController !== 'undefined') ? new AbortController() : null;
+    pendingAbort = controller;
+    var req;
+    try { req = fetch(ENDPOINT, { method: 'POST', headers: headers, credentials: 'same-origin', body: JSON.stringify(body), signal: controller ? controller.signal : undefined }); }
+    catch (err) { req = Promise.reject(err); }
+    req.then(function (resp) {
+      if (!resp.ok) return resp.json().catch(function () { return {}; }).then(function (j) { throw new Error((j && j.error) || ('Chat request failed (' + resp.status + ').')); });
+      return readStream(resp, handlers);
+    }).then(function () {
+      pendingAbort = null;
+      view.hideStatus();
+      if (sawText) { convo.push({ role: 'assistant', text: acc }); view.renderMd(); rkExtractJobIds(acc).forEach(function (id) { rkPollJob(view, id); }); }
+      else if (!errored) { view.showText(); view.setText('Done.'); }
+      setBusy(false);
+      if (input) input.focus();
+      loadThreads();
+    }).catch(function (err) {
+      pendingAbort = null;
+      // User hit Stop mid-reply — keep whatever streamed so far, no error.
+      if (err && (err.name === 'AbortError' || (controller && controller.signal && controller.signal.aborted))) {
+        view.hideStatus();
+        if (sawText) { convo.push({ role: 'assistant', text: acc }); view.renderMd(); }
+        else { view.showText(); view.setText('Stopped.'); }
+        setBusy(false); if (input) input.focus();
+        return;
+      }
+      var msg = (err && err.message) ? err.message : String(err);
+      if (!API_KEY) msg = msg + '\n\nAdd an AI provider key in Settings to chat on your own keys.';
+      view.fail(msg); setBusy(false); if (input) input.focus();
+    });
+  }
+  function resetConversation() {
+    convo = []; threadId = genId('thread'); rkPolledJobs = {};
+    if (log) { log.innerHTML = ''; bubble('is-ai', GREETING); }
+    if (typeof clearChips === 'function') clearChips();
+  }
+  function newChat() {
+    resetConversation();
+    setActiveThread(null);
+    if (input) { input.value = ''; if (typeof autosizeInput === 'function') autosizeInput(); input.focus(); }
+  }
+  // NOTE: the New-chat button element (rkNewChat) is resolved later (see the
+  // var block below), so bind its click handler there — binding here would run
+  // against an undefined newChatBtn (var hoisting) and silently never attach.
+  if (form) form.addEventListener('submit', function (e) {
+    e.preventDefault();
+    if (busy) { if (pendingAbort) pendingAbort.abort(); return; }
+    sendMessage(input ? input.value : '');
+  });
+  // The composer is now a multi-row textarea: grow with content (capped) and let
+  // Enter send (Shift+Enter inserts a newline, like every modern chat box).
+  function autosizeInput() {
+    if (!input || input.tagName !== 'TEXTAREA') return;
+    input.style.height = 'auto';
+    input.style.height = Math.min(input.scrollHeight, 210) + 'px';
+  }
+  if (input) {
+    input.addEventListener('input', autosizeInput);
+    input.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (form && form.requestSubmit) form.requestSubmit();
+        else { if (busy) { if (pendingAbort) pendingAbort.abort(); } else sendMessage(input.value); }
+      }
+    });
+  }
+  // ─── editor_action: apply a composition mutation through the SPA bridge that
+  // the editor bundle exposes on window (__vidfarmEditorAction). Only present on
+  // the /editor dock; elsewhere there is no composition to mutate. ───
+  function applyEditorActionFromChat(view, result) {
+    var label = (result && result.action_type) ? String(result.action_type) : 'editor_action';
+    var bridge = (typeof window !== 'undefined') ? window.__vidfarmEditorAction : null;
+    if (!bridge || typeof bridge.apply !== 'function') {
+      view.note('⚠ Editor not ready — reload the page, then ask again (' + label + ' was not applied).', 'err');
+      return;
+    }
+    // bridge.apply may be async (Option-B editor writes through the files API);
+    // normalize sync + promise return shapes.
+    var settle = function (outcome) {
+      if (outcome && outcome.ok) {
+        view.note('✓ ' + (outcome.summary || ('Applied ' + label + '.')), 'ok');
+      } else {
+        view.note('⚠ Couldn’t apply ' + label + ((outcome && outcome.error) ? ': ' + outcome.error : '.'), 'err');
+      }
+    };
+    try {
+      var outcome = bridge.apply(result);
+      if (outcome && typeof outcome.then === 'function') {
+        outcome.then(settle, function (e) { settle({ ok: false, error: (e && e.message) ? e.message : String(e) }); });
+      } else {
+        settle(outcome);
+      }
+    } catch (e) {
+      settle({ ok: false, error: (e && e.message) ? e.message : String(e) });
+    }
+  }
+  // ─── create_video: the browser-side pipeline behind the agent's create_video
+  // tool. The backend tool is a passthrough (returns the intent only); the
+  // frontend runs ingest → decompose → fork and posts a clickable "Open in the
+  // editor" link. Ported 1:1 from the /editor chat's runCreateVideoFlow. ───
+  function ivHeaders(json) { var h = { accept: 'application/json' }; if (json) h['content-type'] = 'application/json'; if (API_KEY) h['vidfarm-api-key'] = API_KEY; return h; }
+  function ivSleep(ms) { return new Promise(function (r) { setTimeout(r, ms); }); }
+  function ivJson(res) { return res.text().then(function (t) { try { return t ? JSON.parse(t) : null; } catch (e) { return null; } }); }
+  async function runCreateVideoFlow(view, intentRaw) {
+    var intent = intentRaw || {};
+    if (!API_KEY) { view.flowResult('⚠️ You need to be logged in to create a video.'); return; }
+    var origin = window.location.origin;
+    function pollInspirationReady(id) {
+      var deadline = Date.now() + 5 * 60 * 1000;
+      function step() {
+        return fetch(origin + '/api/v1/videos/' + encodeURIComponent(id), { headers: ivHeaders(false) }).then(ivJson).then(function (j) {
+          var st = String((j && j.status) || '');
+          if (st === 'ready') return j;
+          if (st === 'failed') throw new Error('source video download failed' + ((j && j.error) ? ': ' + j.error : '') + '.');
+          if (Date.now() > deadline) throw new Error('source video download timed out.');
+          return ivSleep(5000).then(step);
+        });
+      }
+      return step();
+    }
+    function jobMediaUrl(job) {
+      function s(v) { return (typeof v === 'string' && v.trim()) ? v.trim() : null; }
+      var result = (job && job.result && typeof job.result === 'object') ? job.result : {};
+      var out = (result.output && typeof result.output === 'object') ? result.output : result;
+      var direct = s(out.primary_file_url) || s(out.video && out.video.file_url) || s(out.image && out.image.file_url) || s(out.render && out.render.output_url);
+      if (direct) return direct;
+      if (out.files && out.files.length) { for (var i = 0; i < out.files.length; i++) { var f = out.files[i]; var u = s(typeof f === 'string' ? f : (f && (f.file_url || f.url))); if (u) return u; } }
+      if (job && job.artifacts && job.artifacts.length) { for (var k = 0; k < job.artifacts.length; k++) { var u2 = s(job.artifacts[k] && job.artifacts[k].public_url); if (u2) return u2; } }
+      return null;
+    }
+    function pollJobMedia(jobId) {
+      var deadline = Date.now() + 8 * 60 * 1000;
+      function step() {
+        return ivSleep(5000).then(function () {
+          return fetch(origin + '/api/v1/user/me/jobs/' + encodeURIComponent(jobId), { headers: ivHeaders(false) }).then(ivJson).then(function (j) {
+            var st = String((j && j.status) || '');
+            var url = jobMediaUrl(j);
+            if (url) return url;
+            if (st === 'failed' || st === 'cancelled') throw new Error('generation ' + st + '.');
+            if (Date.now() > deadline) throw new Error('generation timed out.');
+            return step();
+          });
+        });
+      }
+      return step();
+    }
+    async function ingestGeneratedVideo(mediaUrl, title) {
+      var blob = await (await fetch(mediaUrl)).blob();
+      var presignRes = await fetch(origin + '/discover/templates/upload/presign', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ file_name: 'generated.mp4', content_type: 'video/mp4', size_bytes: blob.size }) });
+      var presign = await ivJson(presignRes);
+      if (!presignRes.ok) throw new Error((presign && presign.error) || ('upload presign failed (' + presignRes.status + ')'));
+      var storageKey = presign && presign.storage_key;
+      var uploadedName = (presign && presign.file_name) || 'generated.mp4';
+      if (presign && presign.transport === 'presigned' && presign.upload && presign.upload.url) {
+        var put = await fetch(presign.upload.url, { method: (presign.upload.method || 'PUT'), headers: presign.upload.headers || {}, body: blob });
+        if (!put.ok) throw new Error('upload failed (' + put.status + ')');
+      } else {
+        var form = new FormData(); form.append('file', blob, 'generated.mp4');
+        var up = await fetch(origin + ((presign && presign.upload && presign.upload.url) || '/discover/templates/upload'), { method: 'POST', headers: ivHeaders(false), body: form });
+        var upJson = await ivJson(up);
+        if (!up.ok || !upJson || !upJson.storage_key) throw new Error((upJson && upJson.error) || ('upload failed (' + up.status + ')'));
+        storageKey = upJson.storage_key; uploadedName = upJson.file_name || 'generated.mp4';
+      }
+      if (!storageKey) throw new Error('upload did not return a storage key.');
+      var addRes = await fetch(origin + '/discover/templates', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ upload: { storage_key: storageKey, file_name: uploadedName }, title: title, origin: 'raw' }) });
+      var add = await ivJson(addRes);
+      if (!addRes.ok) throw new Error((add && add.error) || ('ingest failed (' + addRes.status + ')'));
+      return add;
+    }
+    try {
+      var mode = intent.mode === 'replicate' ? 'replicate' : (intent.mode === 'generate' ? 'generate' : null);
+      var inspiration, userPrompt;
+      if (mode === 'replicate') {
+        var sourceUrl = String(intent.source_url || '').trim();
+        if (!/^https?:\/\//i.test(sourceUrl)) { view.flowResult('⚠️ I need a video URL (TikTok/YouTube/Instagram/X) to replicate.'); return; }
+        userPrompt = String(intent.instructions || '').trim() || null;
+        view.flowStatus('Fetching the source video…');
+        var addRes = await fetch(origin + '/discover/templates', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ source_url: sourceUrl }) });
+        var add = await ivJson(addRes);
+        if (!addRes.ok) throw new Error((add && add.error) || ("couldn't fetch that URL (" + addRes.status + ')'));
+        inspiration = (add && add.status === 'ready') ? add : await pollInspirationReady(add && add.inspiration_id);
+      } else if (mode === 'generate') {
+        var prompt = String(intent.prompt || '').trim();
+        if (!prompt) { view.flowResult("⚠️ Tell me what the video should be about and I'll create it."); return; }
+        userPrompt = prompt;
+        view.flowStatus('Generating your video… (this can take a couple of minutes)');
+        var genRes = await fetch(origin + '/api/v1/primitives/videos/generate', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ tracer: 'chat-create-' + Date.now().toString(36), payload: { prompt: prompt } }) });
+        var gen = await ivJson(genRes);
+        if (!genRes.ok) throw new Error((gen && gen.error) || ("couldn't start generation (" + genRes.status + ')'));
+        var mediaUrl = await pollJobMedia(gen && gen.job_id);
+        view.flowStatus('Building an editable template from the generated video…');
+        var add2 = await ingestGeneratedVideo(mediaUrl, prompt.slice(0, 80));
+        inspiration = (add2 && add2.status === 'ready') ? add2 : await pollInspirationReady(add2 && add2.inspiration_id);
+      } else {
+        view.flowResult("⚠️ I couldn't tell whether to generate a new video or replicate a URL — try rephrasing.");
+        return;
+      }
+      var templateId = inspiration && inspiration.template_id;
+      var inspirationId = inspiration && inspiration.inspiration_id;
+      if (!templateId || !inspirationId) throw new Error("the template wasn't created from the video.");
+      view.flowStatus(mode === 'replicate' ? 'Recreating the scenes… (about a minute)' : 'Analyzing into an editable timeline…');
+      var decRes = await fetch(origin + '/api/v1/inspirations/' + encodeURIComponent(inspirationId) + '/decompose', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ user_prompt: userPrompt }) });
+      if (!decRes.ok) { var dec = await ivJson(decRes); throw new Error((dec && dec.error) || ('scene analysis failed (' + decRes.status + ')')); }
+      view.flowStatus('Finalizing your editable copy…');
+      var forkRes = await fetch(origin + '/api/v1/compositions', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ template_id: templateId }) });
+      var fork = await ivJson(forkRes);
+      if (!forkRes.ok) throw new Error((fork && fork.error) || ("couldn't create an editable copy (" + forkRes.status + ')'));
+      var forkId = fork && fork.fork_id;
+      var editorUrl = origin + '/editor/' + encodeURIComponent(templateId) + (forkId ? '/fork/' + encodeURIComponent(forkId) : '');
+      view.flowResult('✅ Your video is ready — [Open it in the editor](' + editorUrl + ').');
+    } catch (error) {
+      view.flowResult('⚠️ I couldn’t finish creating the video: ' + ((error && error.message) ? error.message : String(error)));
+    }
+  }
+  // ─── Files drawer ───
+  // Directory browsing lives in the reusable component (src/frontend/file-directory.ts),
+  // auto-mounted into #rkAichatFilesMount by /assets/file-directory-app.js. This
+  // inline script only owns the chat-side glue: the attach chips + preview modal.
+  // We expose those to the component as host hooks BEFORE the deferred module runs
+  // (this classic <script> executes during parse, ahead of the module).
+  var chipsEl = document.getElementById('rkAichatChips');
+  var filesToggle = document.getElementById('rkFilesToggle');
+  var historyToggle = document.getElementById('rkHistoryToggle');
+  var newChatBtn = document.getElementById('rkNewChat');
+  if (newChatBtn) newChatBtn.addEventListener('click', function () { if (!busy) newChat(); });
+  // Copy the current chat thread id (handy for support / linking a conversation).
+  // threadId is minted up-front, so this always has a real id to copy.
+  var copyThreadBtn = document.getElementById('rkCopyThread');
+  if (copyThreadBtn) copyThreadBtn.addEventListener('click', function () {
+    var prevTitle = copyThreadBtn.title;
+    copyText(String(threadId));
+    copyThreadBtn.title = 'Copied chat ID';
+    copyThreadBtn.classList.add('is-on');
+    setTimeout(function () { copyThreadBtn.title = prevTitle; copyThreadBtn.classList.remove('is-on'); }, 1400);
+  });
+  var histBody = document.getElementById('rkAichatHistBody');
+  var selected = [];
+  window.__rkDirectoryHost = {
+    onAttach: function (items) { (items || []).forEach(function (it) { attachFile(it); }); },
+    onPreview: function (items, i) { openFilePreview(items || [], i || 0); }
+  };
+  function refreshFiles() { if (window.__rkDirectoryInstance) window.__rkDirectoryInstance.refresh(); }
+  // Editor dock "Back to Library": leave the editor cleanly — clear the persisted
+  // open-state so the destination page loads with the chat panel closed and on a
+  // fresh chat, then navigate. (Real anchor href="/library" is the fallback.)
+  var backBtn = document.getElementById('rkAichatBack');
+  if (backBtn) backBtn.addEventListener('click', function (e) {
+    try { sessionStorage.removeItem('rk-chat-open'); } catch (err) {}
+    e.preventDefault();
+    window.location.assign('/library');
+  });
+  // Lightweight transient toast for editor-dock timeline placement feedback.
+  function editorPlaceToast(msg, isErr) {
+    try {
+      var t = document.createElement('div');
+      t.textContent = msg;
+      t.style.cssText = 'position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;'
+        + 'padding:9px 15px;border-radius:10px;font:600 13px/1.3 var(--rk-font-body,system-ui);'
+        + 'color:' + (isErr ? '#fff' : '#1a1500') + ';background:' + (isErr ? '#b23b3b' : 'var(--rk-gold-600,#e5a400)') + ';'
+        + 'box-shadow:0 6px 24px rgba(0,0,0,.28);max-width:min(420px,90vw);text-align:center;pointer-events:none;'
+        + 'opacity:0;transition:opacity .18s ease,transform .18s ease';
+      document.body.appendChild(t);
+      requestAnimationFrame(function () { t.style.opacity = '1'; t.style.transform = 'translateX(-50%) translateY(-4px)'; });
+      setTimeout(function () { t.style.opacity = '0'; setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 220); }, 2200);
+    } catch (e) {}
+  }
+  function attachFile(it) {
+    // In the /editor dock the "+"/Attach means "drop this file onto the timeline
+    // at the current playhead", NOT "attach to chat" (which is what it means
+    // everywhere else). Route placeable media through the SPA editor bridge; only
+    // fall through to chat-attach for folders / non-placeable files.
+    if (isEditorDock && it && it.viewUrl) {
+      var bridge = (typeof window !== 'undefined') ? window.__vidfarmEditorAction : null;
+      if (bridge && typeof bridge.placeMediaAtPlayhead === 'function') {
+        var res = bridge.placeMediaAtPlayhead({ url: it.viewUrl, name: it.name, contentType: it.contentType });
+        if (res && res.ok) { editorPlaceToast('Added \u201c' + (it.name || 'media') + '\u201d to the timeline'); return; }
+        // Non-placeable (folder / doc / not-ready): fall through to chat-attach.
+      }
+    }
+    // Files-only drawer (opened from the /chat page) has no chat composer of its
+    // own — hand the picked file to the /chat page's composer via a DOM event.
+    if (panel.classList.contains('is-files-only')) {
+      try {
+        document.dispatchEvent(new CustomEvent('rk-chat-attach-file', { detail: {
+          id: String(it.id), name: it.name || 'file',
+          contentType: it.contentType || 'application/octet-stream', viewUrl: it.viewUrl || ''
+        } }));
+      } catch (e) {}
+      return;
+    }
+    if (selected.some(function (f) { return f.id === it.id; })) { flashChip(it.id); return; }
+    selected.push(it);
+    renderChips();
+    if (input) input.focus();
+  }
+  function renderChips() {
+    if (!chipsEl) return;
+    chipsEl.innerHTML = '';
+    selected.forEach(function (f, i) {
+      var chip = document.createElement('span');
+      chip.className = 'rk-aichat-chip' + (f.pending ? ' is-pending' : '');
+      chip.setAttribute('data-id', f.id);
+      if (f.pending) { var sp = document.createElement('span'); sp.className = 'rk-aichat-chip-spin'; sp.setAttribute('aria-hidden', 'true'); chip.appendChild(sp); }
+      var label = document.createElement('button');
+      label.type = 'button';
+      label.className = 'rk-aichat-chip-label';
+      label.title = f.pending ? 'Uploading ' + f.name + '…' : 'Preview ' + f.name;
+      label.textContent = f.name;
+      if (f.viewUrl && !f.pending) label.addEventListener('click', function () { openFilePreview(selected.filter(function (s) { return !s.pending; }), selected.filter(function (s) { return !s.pending; }).indexOf(f)); });
+      var x = document.createElement('button');
+      x.type = 'button';
+      x.setAttribute('aria-label', 'Remove ' + f.name);
+      x.textContent = '×';
+      x.addEventListener('click', function () {
+        selected = selected.filter(function (s) { return s.id !== f.id; });
+        renderChips();
+      });
+      chip.appendChild(label); chip.appendChild(x);
+      chipsEl.appendChild(chip);
+    });
+  }
+  function flashChip(id) {
+    var chip = chipsEl && chipsEl.querySelector('[data-id="' + id + '"]');
+    if (!chip) return;
+    chip.style.transition = 'none';
+    chip.style.transform = 'scale(1.08)';
+    setTimeout(function () { chip.style.transition = 'transform .18s'; chip.style.transform = 'none'; }, 20);
+  }
+  function clearChips() { selected = []; renderChips(); }
+  // ─── left drawer mode: 'files' | 'history' | 'cloud' | '' (closed) ─────────
+  // Files, Chat history, and Cloud status share the one left slot, so only one
+  // shows at a time.
+  function leftMode() {
+    if (panel.classList.contains('has-history')) return 'history';
+    if (panel.classList.contains('has-cloud')) return 'cloud';
+    if (panel.classList.contains('has-files')) return 'files';
+    return '';
+  }
+  function filesOpen() { return leftMode() === 'files'; }
+  function setLeftMode(mode) {
+    panel.classList.toggle('has-files', mode === 'files');
+    panel.classList.toggle('has-history', mode === 'history');
+    panel.classList.toggle('has-cloud', mode === 'cloud');
+    if (filesToggle) {
+      filesToggle.classList.toggle('is-on', mode === 'files');
+      filesToggle.setAttribute('aria-pressed', mode === 'files' ? 'true' : 'false');
+    }
+    if (historyToggle) {
+      historyToggle.classList.toggle('is-on', mode === 'history');
+      historyToggle.setAttribute('aria-pressed', mode === 'history' ? 'true' : 'false');
+    }
+    if (cloudToggle) {
+      cloudToggle.classList.toggle('is-on', mode === 'cloud');
+      cloudToggle.setAttribute('aria-pressed', mode === 'cloud' ? 'true' : 'false');
+    }
+    var caBtn = document.getElementById('rkAichatAttach');
+    if (caBtn) {
+      caBtn.classList.toggle('is-on', mode === 'files');
+      caBtn.setAttribute('aria-pressed', mode === 'files' ? 'true' : 'false');
+    }
+    try { localStorage.setItem('rk-left-mode', mode); } catch (e) {}
+    if (mode === 'files') refreshFiles();
+    if (mode === 'history') loadThreads();
+    if (mode === 'cloud') loadTasks();
+    if (!panel.hidden) anchorPanel();
+  }
+  function refreshFilesOnOpen() {
+    // Re-fetch the current folder so listings are fresh when the drawer opens.
+    if (filesOpen()) refreshFiles();
+  }
+  // ─── Chat history — REAL editor-chat threads (past conversations) ──────────
+  var threads = [], threadsState = 'idle', loadingThread = false;
+  function authHeaders() { var h = { accept: 'application/json' }; if (API_KEY) h['vidfarm-api-key'] = API_KEY; return h; }
+  function relTime(iso) {
+    if (!iso) return '';
+    var t = Date.parse(iso); if (isNaN(t)) return '';
+    var s = Math.max(0, (Date.now() - t) / 1000);
+    if (s < 60) return 'just now';
+    if (s < 3600) return Math.floor(s / 60) + 'm ago';
+    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
+    if (s < 604800) return Math.floor(s / 86400) + 'd ago';
+    try { return new Date(t).toLocaleDateString([], { month: 'short', day: 'numeric' }); } catch (e) { return ''; }
+  }
+  function histNote(text, opts) {
+    var wrap = document.createElement('div'); wrap.className = 'rk-aichat-fstate';
+    var p = document.createElement('div'); p.textContent = text; wrap.appendChild(p);
+    if (opts && opts.href) { var a = document.createElement('a'); a.href = opts.href; a.textContent = opts.linkText || 'Open'; wrap.appendChild(a); }
+    if (opts && opts.retry) { var b = document.createElement('button'); b.type = 'button'; b.textContent = 'Try again'; b.addEventListener('click', function () { loadThreads(); }); wrap.appendChild(b); }
+    return wrap;
+  }
+  function setActiveThread(id) {
+    threadId = id;
+    if (!histBody) return;
+    var rows = histBody.querySelectorAll('.rk-aichat-frow');
+    for (var i = 0; i < rows.length; i++) rows[i].classList.toggle('is-active', rows[i].getAttribute('data-id') === id);
+  }
+  function threadRow(t) {
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'rk-aichat-frow' + (t.id === threadId ? ' is-active' : '');
+    b.setAttribute('data-id', t.id);
+    var ic = document.createElement('span');
+    ic.className = 'rk-aichat-fic rk-aichat-fic-file';
+    ic.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>';
+    var main = document.createElement('span'); main.className = 'rk-aichat-fmain';
+    var name = document.createElement('span'); name.className = 'rk-aichat-fname'; name.textContent = t.title || 'Untitled chat';
+    var count = (typeof t.messageCount === 'number') ? t.messageCount : 0;
+    var when = relTime(t.lastMessageAt || t.updatedAt);
+    var meta = document.createElement('span'); meta.className = 'rk-aichat-fmeta';
+    meta.textContent = (count ? count + ' message' + (count === 1 ? '' : 's') : '') + ((count && when) ? ' · ' : '') + (when || '');
+    main.appendChild(name); main.appendChild(meta);
+    var del = document.createElement('button');
+    del.type = 'button'; del.className = 'rk-aichat-fadd'; del.setAttribute('aria-label', 'Delete chat'); del.textContent = '×';
+    del.addEventListener('click', function (ev) { ev.stopPropagation(); deleteThread(t.id, b); });
+    b.appendChild(ic); b.appendChild(main); b.appendChild(del);
+    b.addEventListener('click', function () { openThread(t.id); });
+    return b;
+  }
+  function renderHistory() {
+    if (!histBody) return;
+    histBody.innerHTML = '';
+    if (BOOT_STATE === 'anon') { histBody.appendChild(histNote('Sign in to sync your saved chats.', { href: '/login', linkText: 'Sign in' })); return; }
+    if (threadsState === 'loading' && !threads.length) { histBody.appendChild(histNote('Loading your chats…')); return; }
+    if (threadsState === 'auth') { histBody.appendChild(histNote('Sign in to sync your saved chats.', { href: '/login', linkText: 'Sign in' })); return; }
+    if (threadsState === 'error') { histBody.appendChild(histNote('Couldn’t load your chats.', { retry: true })); return; }
+    if (!threads.length) { histBody.appendChild(histNote('No conversations yet. Start one below — it saves automatically.')); return; }
+    for (var i = 0; i < threads.length; i++) histBody.appendChild(threadRow(threads[i]));
+  }
+  function loadThreads() {
+    if (!histBody) return;
+    if (BOOT_STATE === 'anon') { renderHistory(); return; }
+    if (BOOT_STATE !== 'ready') { loadBoot(); return; } // loadBoot() calls back into loadThreads() when ready
+    threadsState = 'loading'; renderHistory();
+    var url = THREADS_URL + '?template_id=' + encodeURIComponent(TEMPLATE_ID) + '&limit=30&include_messages=false';
+    fetch(url, { headers: authHeaders(), credentials: 'same-origin' })
+      .then(function (r) {
+        if (r.status === 401 || r.status === 403) { threadsState = 'auth'; return null; }
+        if (!r.ok) throw new Error('http ' + r.status);
+        return r.json();
+      })
+      .then(function (j) {
+        if (!j) { renderHistory(); return; }
+        threads = (j && j.threads) || []; threadsState = 'ready'; renderHistory();
+      })
+      .catch(function () { threadsState = 'error'; renderHistory(); });
+  }
+  function openThread(id) {
+    if (busy || loadingThread) return;
+    loadingThread = true;
+    fetch(THREADS_URL + '/' + encodeURIComponent(id), { headers: authHeaders(), credentials: 'same-origin' })
+      .then(function (r) { if (!r.ok) throw new Error('http ' + r.status); return r.json(); })
+      .then(function (j) {
+        var t = j && j.thread; if (!t) throw new Error('missing thread');
+        convo = []; rkPolledJobs = {}; if (log) log.innerHTML = '';
+        var msgs = t.messages || [];
+        for (var i = 0; i < msgs.length; i++) {
+          var m = msgs[i], role = (m.role === 'assistant') ? 'assistant' : 'user', txt = m.text || '';
+          convo.push({ role: role, text: txt });
+          if (role === 'user') { bubble('is-user', txt); }
+          else {
+            var v = appendAssistant();
+            var ex = m.httpExchanges || [];
+            for (var k = 0; k < ex.length; k++) { if (ex[k] && ex[k].request && ex[k].response) v.addHttp(ex[k]); }
+            v.showText(); v.setText(txt); v.hideStatus(); v.renderMd();
+            // Re-hydrate finished job output (not stored in the transcript) by
+            // scanning this turn's text + tool calls for job ids and polling them.
+            var jids = rkExtractJobIds(txt);
+            for (var e2 = 0; e2 < ex.length; e2++) { rkJobIdsFromExchange(ex[e2]).forEach(function (id) { if (jids.indexOf(id) < 0) jids.push(id); }); }
+            (function (view) { jids.forEach(function (id) { rkPollJob(view, id); }); })(v);
+          }
+        }
+        setActiveThread(id);
+        loadingThread = false;
+        logBottom();
+        if (input) input.focus();
+      })
+      .catch(function () { loadingThread = false; });
+  }
+  function deleteThread(id, row) {
+    if (!API_KEY) return;
+    fetch(THREADS_URL + '/' + encodeURIComponent(id), { method: 'DELETE', headers: authHeaders(), credentials: 'same-origin' })
+      .then(function (r) {
+        if (!r.ok && r.status !== 404) throw new Error('http ' + r.status);
+        threads = threads.filter(function (t) { return t.id !== id; });
+        if (id === threadId) resetConversation();
+        renderHistory();
+      })
+      .catch(function () {});
+  }
+  // ─── Cloud status — the customer's long-lived async work (imports, forks,
+  // renders, jobs). Read from /me/tasks; polled every 4s while the drawer is open
+  // and anything is still running. Exposed as window.__vidfarmCloudStatus so any
+  // page (e.g. a raws import) can pop it open and highlight the fresh task. ──────
+  var cloudToggle = document.getElementById('rkCloudToggle');
+  var cloudBody = document.getElementById('rkCloudBody');
+  var cloudFilters = document.getElementById('rkCloudFilters');
+  var cloudDot = document.getElementById('rkCloudDot');
+  var cloudRefresh = document.getElementById('rkCloudRefresh');
+  var TASKS_URL = '/api/v1/user/me/tasks';
+  var tasks = [], tasksState = 'idle', taskFilter = 'all';
+  var taskCounts = { all: 0, running: 0, done: 0, error: 0, queued: 0 };
+  var highlightTaskId = null, tasksTimer = null, tasksLoadSeq = 0;
+  var sidebarCloud = document.getElementById('rkSidebarCloud');
+  var sidebarTimer = null, sidebarStarted = false;
+  function taskStatusMeta(status) {
+    if (status === 'running') return { label: 'Running', cls: 'is-running', glyph: '●' };
+    if (status === 'queued') return { label: 'Queued', cls: 'is-queued', glyph: '○' };
+    if (status === 'done') return { label: 'Done', cls: 'is-done', glyph: '✓' };
+    if (status === 'error') return { label: 'Error', cls: 'is-error', glyph: '⚠' };
+    return { label: status || '', cls: '', glyph: '' };
+  }
+  function taskKindLabel(kind) {
+    if (kind === 'render') return 'Render';
+    if (kind === 'import') return 'Import';
+    if (kind === 'fork') return 'Fork';
+    return 'Job';
+  }
+  function renderCloudFilters() {
+    if (!cloudFilters) return;
+    var btns = cloudFilters.querySelectorAll('.rk-cloud-fbtn');
+    for (var i = 0; i < btns.length; i++) {
+      var f = btns[i].getAttribute('data-f');
+      var base = f === 'all' ? 'All' : f === 'running' ? 'Running' : f === 'done' ? 'Done' : 'Error';
+      var n = (f === 'all') ? (taskCounts.all || 0) : (taskCounts[f] || 0);
+      btns[i].textContent = base + (n ? ' ' + n : '');
+      btns[i].classList.toggle('is-on', f === taskFilter);
+    }
+  }
+  function cloudNote(text, opts) {
+    var wrap = document.createElement('div'); wrap.className = 'rk-aichat-fstate';
+    var p = document.createElement('div'); p.textContent = text; wrap.appendChild(p);
+    if (opts && opts.href) { var a = document.createElement('a'); a.href = opts.href; a.textContent = opts.linkText || 'Open'; wrap.appendChild(a); }
+    if (opts && opts.retry) { var b = document.createElement('button'); b.type = 'button'; b.textContent = 'Try again'; b.addEventListener('click', function () { loadTasks(); }); wrap.appendChild(b); }
+    return wrap;
+  }
+  function taskRow(t) {
+    var row = document.createElement('div');
+    row.className = 'rk-cloud-row rk-cloud-' + (t.status || '');
+    row.setAttribute('data-id', t.id || '');
+    if (t.id && t.id === highlightTaskId) row.classList.add('is-highlight');
+    var meta = taskStatusMeta(t.status);
+    var ic = document.createElement('span');
+    ic.className = 'rk-cloud-ic ' + meta.cls;
+    ic.textContent = meta.glyph;
+    var main = document.createElement('span'); main.className = 'rk-cloud-main';
+    var name = document.createElement('span'); name.className = 'rk-cloud-name';
+    name.textContent = t.label || taskKindLabel(t.kind);
+    var sub = document.createElement('span'); sub.className = 'rk-cloud-sub';
+    var when = relTime(t.updated_at || t.created_at);
+    var bits = [taskKindLabel(t.kind)];
+    if (t.detail) bits.push(t.detail);
+    if (when) bits.push(when);
+    sub.textContent = bits.join(' · ');
+    main.appendChild(name); main.appendChild(sub);
+    var right = document.createElement('span'); right.className = 'rk-cloud-right';
+    var pill = document.createElement('span'); pill.className = 'rk-cloud-pill ' + meta.cls; pill.textContent = meta.label;
+    right.appendChild(pill);
+    if (t.id) {
+      // Arrow now opens the Cloud Task Status page (details / error / result link)
+      // rather than jumping straight to the raw output.
+      var open = document.createElement('a');
+      open.className = 'rk-cloud-open'; open.href = '/cloud/task/' + encodeURIComponent(t.id);
+      open.title = 'View task details'; open.setAttribute('aria-label', 'View task details');
+      open.innerHTML = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>';
+      open.addEventListener('click', function (e) { e.stopPropagation(); });
+      right.appendChild(open);
+    }
+    if (t.error) { row.title = t.error; }
+    row.appendChild(ic); row.appendChild(main); row.appendChild(right);
+    return row;
+  }
+  function renderTasks() {
+    if (!cloudBody) return;
+    renderCloudFilters();
+    cloudBody.innerHTML = '';
+    if (BOOT_STATE === 'anon' || tasksState === 'anon') { cloudBody.appendChild(cloudNote('Sign in to see your cloud tasks.', { href: '/login', linkText: 'Sign in' })); return; }
+    if (tasksState === 'loading' && !tasks.length) { cloudBody.appendChild(cloudNote('Loading your cloud tasks…')); return; }
+    if (tasksState === 'auth') { cloudBody.appendChild(cloudNote('Sign in to see your cloud tasks.', { href: '/login', linkText: 'Sign in' })); return; }
+    if (tasksState === 'error') { cloudBody.appendChild(cloudNote('Couldn’t load your cloud tasks.', { retry: true })); return; }
+    var list = tasks.filter(function (t) { return taskFilter === 'all' || t.status === taskFilter; });
+    if (!list.length) {
+      cloudBody.appendChild(cloudNote(taskFilter === 'all' ? 'No cloud tasks yet. Imports, forks, and renders show up here.' : 'No ' + taskFilter + ' tasks.'));
+      return;
+    }
+    var hi = null;
+    for (var i = 0; i < list.length; i++) { var r = taskRow(list[i]); cloudBody.appendChild(r); if (r.classList.contains('is-highlight')) hi = r; }
+    if (hi && hi.scrollIntoView) { try { hi.scrollIntoView({ block: 'nearest' }); } catch (e) {} }
+  }
+  function updateCloudDot() { if (cloudDot) cloudDot.hidden = (taskCounts.running || 0) <= 0; }
+  function scheduleTaskPoll() {
+    if (tasksTimer) { clearTimeout(tasksTimer); tasksTimer = null; }
+    // Keep polling only while there's live work AND the drawer is showing.
+    if ((taskCounts.running || taskCounts.queued) && leftMode() === 'cloud' && !panel.hidden) {
+      tasksTimer = setTimeout(function () { loadTasks({ silent: true }); }, 4000);
+    }
+  }
+  function loadTasks(opts) {
+    opts = opts || {};
+    if (!cloudBody) return;
+    if (BOOT_STATE === 'anon') { tasksState = 'anon'; renderTasks(); return; }
+    if (BOOT_STATE !== 'ready') { loadBoot(); return; } // loadBoot() calls back into loadTasks() when ready
+    if (!opts.silent) { tasksState = 'loading'; renderTasks(); }
+    var seq = ++tasksLoadSeq;
+    fetch(TASKS_URL + '?limit=80', { headers: authHeaders(), credentials: 'same-origin' })
+      .then(function (r) {
+        if (r.status === 401 || r.status === 403) { tasksState = 'auth'; return null; }
+        if (!r.ok) throw new Error('http ' + r.status);
+        return r.json();
+      })
+      .then(function (j) {
+        if (seq !== tasksLoadSeq) return; // a newer load superseded us
+        if (!j) { renderTasks(); return; }
+        tasks = (j && j.tasks) || [];
+        taskCounts = (j && j.counts) || taskCounts;
+        tasksState = 'ready';
+        renderTasks(); updateCloudDot(); renderSidebarCloud(); scheduleTaskPoll();
+      })
+      .catch(function () { if (seq === tasksLoadSeq) { tasksState = 'error'; renderTasks(); } });
+  }
+  if (cloudToggle) cloudToggle.addEventListener('click', function () { setLeftMode(leftMode() === 'cloud' ? '' : 'cloud'); });
+  if (cloudRefresh) cloudRefresh.addEventListener('click', function () { loadTasks(); });
+  if (cloudFilters) cloudFilters.addEventListener('click', function (e) {
+    var b = (e.target && e.target.closest) ? e.target.closest('.rk-cloud-fbtn') : null;
+    if (!b) return;
+    taskFilter = b.getAttribute('data-f') || 'all';
+    renderTasks();
+  });
+  // Global control surface so any page can pop the Cloud Status drawer open and
+  // highlight the newest task (e.g. right after kicking off a raws import).
+  window.__vidfarmCloudStatus = {
+    open: function (o) {
+      o = o || {};
+      taskFilter = o.filter || 'running';
+      if (typeof o.highlightId !== 'undefined') highlightTaskId = o.highlightId;
+      if (panel.hidden) openPanel();
+      setLeftMode('cloud');
+      loadTasks();
+    },
+    refresh: function () { loadTasks(); },
+    highlight: function (id) { highlightTaskId = id; if (leftMode() === 'cloud') renderTasks(); },
+    isOpen: function () { return leftMode() === 'cloud'; }
+  };
+  // ─── Sidebar status line (under Settings) — a subtle always-on indicator of
+  // cloud work: "N tasks running…" with a spinner, or "All tasks done" with a
+  // static cloud icon. Polls /me/tasks independently of the drawer (cookie-authed,
+  // so it works before the chat boot loads); backs off when nothing is running.
+  var CLOUD_ICON_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19a4.5 4.5 0 0 0 .5-8.98A6 6 0 0 0 6.34 9.5 4 4 0 0 0 7 19h10.5z"/></svg>';
+  function renderSidebarCloud() {
+    if (!sidebarCloud) return;
+    var running = (taskCounts && taskCounts.running) || 0;
+    sidebarCloud.hidden = false;
+    if (running > 0) {
+      sidebarCloud.classList.add('is-running');
+      sidebarCloud.innerHTML = '<span class="rk-sidebar-cloud-spin" aria-hidden="true"></span><span class="rk-sidebar-cloud-label">' + running + ' task' + (running === 1 ? '' : 's') + ' running…</span>';
+    } else {
+      sidebarCloud.classList.remove('is-running');
+      sidebarCloud.innerHTML = CLOUD_ICON_SVG + '<span class="rk-sidebar-cloud-label">All tasks done</span>';
+    }
+  }
+  function scheduleSidebarPoll() {
+    if (sidebarTimer) { clearTimeout(sidebarTimer); sidebarTimer = null; }
+    var running = (taskCounts && taskCounts.running) || 0;
+    sidebarTimer = setTimeout(pollSidebar, running > 0 ? 6000 : 30000);
+  }
+  function pollSidebar() {
+    if (!sidebarCloud) return;
+    fetch(TASKS_URL + '?limit=1', { headers: authHeaders(), credentials: 'same-origin' })
+      .then(function (r) {
+        if (r.status === 401 || r.status === 403) { sidebarCloud.hidden = true; return null; } // signed out — hide the line
+        if (!r.ok) throw new Error('http ' + r.status);
+        return r.json();
+      })
+      .then(function (j) {
+        if (!j) return; // auth-hidden; stop polling
+        taskCounts = j.counts || taskCounts;
+        renderSidebarCloud(); updateCloudDot(); scheduleSidebarPoll();
+      })
+      .catch(function () { scheduleSidebarPoll(); }); // transient error — try again on the normal cadence
+  }
+  if (sidebarCloud) {
+    sidebarCloud.addEventListener('click', function () {
+      if (window.__vidfarmCloudStatus) window.__vidfarmCloudStatus.open({ filter: 'all' });
+    });
+    sidebarStarted = true;
+    pollSidebar();
+  }
+  if (filesToggle) {
+    filesToggle.addEventListener('click', function () { setLeftMode(leftMode() === 'files' ? '' : 'files'); });
+  }
+  // Composer paperclip — opens the folder directory nav (Files drawer) so the
+  // user can browse + attach a file, mirroring the header Files toggle. Works
+  // in both the editor dock and the floating pop-panel.
+  var composerAttach = document.getElementById('rkAichatAttach');
+  if (composerAttach) {
+    composerAttach.addEventListener('click', function () { setLeftMode(leftMode() === 'files' ? '' : 'files'); });
+  }
+  // ─── paste-to-attach: drop a copied image/file straight into the composer ───
+  // Clipboard files (screenshot, copied image, "Copy image") get auto-uploaded
+  // to the user's /temp folder, then attached as a chip just like a picked file.
+  // We show a spinner chip immediately and swap it for the real file on success.
+  function extNameFor(blob, idx) {
+    var ct = (blob && blob.type) || '';
+    var base = ct.indexOf('image/') === 0 ? 'pasted-image' : ct.indexOf('video/') === 0 ? 'pasted-video' : ct.indexOf('audio/') === 0 ? 'pasted-audio' : 'pasted-file';
+    var ext = ct && ct.indexOf('/') > -1 ? ct.split('/')[1].split('+')[0].split(';')[0] : 'bin';
+    if (ext === 'jpeg') ext = 'jpg';
+    var stamp = Date.now().toString(36) + (idx ? '-' + idx : '');
+    return base + '-' + stamp + '.' + ext;
+  }
+  function uploadPastedBlob(blob, fileName, pendingId) {
+    var fd = new FormData();
+    fd.append('file', blob, fileName);
+    var headers = {}; if (API_KEY) headers['vidfarm-api-key'] = API_KEY;
+    fetch(window.location.origin + '/api/v1/user/me/temporary-files/upload', {
+      method: 'POST', credentials: 'same-origin', headers: headers, body: fd
+    }).then(function (r) { return r.json().catch(function () { return {}; }).then(function (j) { if (!r.ok) throw new Error((j && j.error) || ('upload failed (' + r.status + ')')); return j; }); })
+      .then(function (j) {
+        var f = j && j.file;
+        if (!f || !f.viewUrl) throw new Error('upload returned no file');
+        var idx = selected.map(function (s) { return s.id; }).indexOf(pendingId);
+        var item = { id: String(f.id), name: f.fileName || fileName, contentType: f.contentType || (blob && blob.type) || 'application/octet-stream', viewUrl: f.viewUrl };
+        if (idx > -1) selected[idx] = item; else selected.push(item);
+        renderChips();
+      })
+      .catch(function () {
+        // A failed paste-upload just drops its chip — keep the chat log clean.
+        selected = selected.filter(function (s) { return s.id !== pendingId; });
+        renderChips();
+      });
+  }
+  function handlePasteFiles(e) {
+    // Files-only drawer (on /chat) has no composer of its own — let that page's
+    // composer own paste; here we only handle the dock's real chat composer.
+    if (panel.classList.contains('is-files-only')) return;
+    var dt = e.clipboardData || (window.clipboardData);
+    if (!dt) return;
+    var blobs = [];
+    var items = dt.items;
+    if (items && items.length) {
+      for (var i = 0; i < items.length; i++) {
+        if (items[i] && items[i].kind === 'file') { var b = items[i].getAsFile(); if (b) blobs.push(b); }
+      }
+    }
+    if (!blobs.length && dt.files && dt.files.length) { for (var k = 0; k < dt.files.length; k++) blobs.push(dt.files[k]); }
+    if (!blobs.length) return; // plain-text paste → let the textarea handle it
+    e.preventDefault();
+    blobs.forEach(function (blob, idx) {
+      var name = (blob && blob.name) || extNameFor(blob, idx);
+      var pendingId = 'paste-' + Date.now().toString(36) + '-' + idx + '-' + Math.random().toString(36).slice(2, 6);
+      selected.push({ id: pendingId, name: name, contentType: (blob && blob.type) || 'application/octet-stream', pending: true });
+      renderChips();
+      uploadPastedBlob(blob, name, pendingId);
+    });
+    if (input) input.focus();
+  }
+  if (input) input.addEventListener('paste', handlePasteFiles);
+  if (historyToggle) {
+    historyToggle.addEventListener('click', function () { setLeftMode(leftMode() === 'history' ? '' : 'history'); });
+  }
+  // /chat composer's attach button ⇄ files-only drawer (open ↔ close toggle).
+  var chatAttachBtn = document.getElementById('rk-chat-attach');
+  if (chatAttachBtn) {
+    chatAttachBtn.addEventListener('click', function () {
+      if (!panel.hidden && panel.classList.contains('is-files-only')) closePanel();
+      else openPanel(true);
+    });
+  }
+  var filesCloseBtn = document.getElementById('rkFilesClose');
+  if (filesCloseBtn) filesCloseBtn.addEventListener('click', function () {
+    // In the /chat files-only drawer this is the only close affordance → shut the
+    // panel. In the full pop-panel it just collapses the Files drawer back to chat.
+    if (panel.classList.contains('is-files-only')) closePanel();
+    else setLeftMode('');
+  });
+  // History / Cloud drawers get the same "back to chat" affordance as Files — on
+  // narrow panels the drawer takes the whole panel (chat steps aside), so the
+  // header toggles that would normally close it are hidden; this in-drawer button
+  // is the reliable way back to the conversation.
+  var historyCloseBtn = document.getElementById('rkHistoryClose');
+  if (historyCloseBtn) historyCloseBtn.addEventListener('click', function () { setLeftMode(''); });
+  var cloudCloseBtn = document.getElementById('rkCloudClose');
+  if (cloudCloseBtn) cloudCloseBtn.addEventListener('click', function () { setLeftMode(''); });
+  // Honor the saved drawer mode (default: files open).
+  try {
+    var savedMode = localStorage.getItem('rk-left-mode');
+    setLeftMode(savedMode === null ? 'files' : savedMode);
+  } catch (e) { setLeftMode('files'); }
+  renderHistory();
+  try {
+    var reopen = sessionStorage.getItem('rk-chat-open');
+    if (isChatPage) { if (reopen === 'files') openPanel(true); }
+    else if (reopen === '1') openPanel();
+  } catch (e) {}
+  // A handed-off thread (?rk_chat=…) always opens the dock so the conversation
+  // reappears immediately (openPanel → loadBoot → consumeHandoff replays it).
+  if (handoffThread && !isChatPage) openPanel();
+})();
+// ── subtle per-video loading indicators ──────────────────────────────────────
+// A small spinner appears over ANY <video> while it is actively fetching data
+// (initial buffer OR a mid-playback rebuffer) and fades out the moment the video
+// has enough data to paint/play. Self-contained so it works on every reskin page
+// regardless of the chat dock. It only shows while the browser is genuinely
+// LOADING (networkState === 2), so idle preload="none" videos never spin.
+(function () {
+  function host(v) { return v.parentElement; }
+  function spinner(v, make) {
+    var p = host(v);
+    if (!p) return null;
+    var s = p.querySelector(':scope > .rk-vspin');
+    if (!s && make) {
+      s = document.createElement('span');
+      s.className = 'rk-vspin';
+      s.setAttribute('aria-hidden', 'true');
+      p.appendChild(s);
+    }
+    return s || null;
+  }
+  // NETWORK_LOADING === 2 && readyState < HAVE_FUTURE_DATA (3)
+  function loading(v) { return v.networkState === 2 && v.readyState < 3; }
+  function show(v) { var s = spinner(v, true); if (s) s.classList.add('is-on'); }
+  function hide(v) { var s = spinner(v, false); if (s) s.classList.remove('is-on'); }
+  function sync(v) { if (loading(v)) show(v); else hide(v); }
+  function wire(v) {
+    if (v.__rkVload) return;
+    v.__rkVload = true;
+    // ready / has-data events → definitely stop spinning
+    ['loadeddata', 'canplay', 'canplaythrough', 'playing', 'error', 'abort', 'suspend', 'emptied']
+      .forEach(function (ev) { v.addEventListener(ev, function () { hide(v); }); });
+    // fetch / rebuffer events → spin only if actually loading
+    ['loadstart', 'progress', 'waiting', 'stalled', 'seeking']
+      .forEach(function (ev) { v.addEventListener(ev, function () { sync(v); }); });
+    sync(v);
+  }
+  function scan(root) { (root || document).querySelectorAll('video').forEach(wire); }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { scan(); });
+  } else { scan(); }
+  // catch lazily-inserted (TikTok viewer) and lazily-hydrated (data-vsrc → src) videos
+  if ('MutationObserver' in window) {
+    new MutationObserver(function (muts) {
+      for (var i = 0; i < muts.length; i++) {
+        var m = muts[i];
+        if (m.type === 'attributes') {
+          if (m.target && m.target.tagName === 'VIDEO') { wire(m.target); sync(m.target); }
+          continue;
+        }
+        if (!m.addedNodes) continue;
+        for (var j = 0; j < m.addedNodes.length; j++) {
+          var n = m.addedNodes[j];
+          if (!n || n.nodeType !== 1) continue;
+          if (n.tagName === 'VIDEO') wire(n);
+          else if (n.querySelectorAll) scan(n);
+        }
+      }
+    }).observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] });
+  }
+})();</script>
+<script>(() => {
+  const copiedTimers = new WeakMap();
+  const copyText = async (value) => {
+    if (!value) return false;
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(value);
+        return true;
+      }
+    } catch {}
+    try {
+      const area = document.createElement("textarea");
+      area.value = value;
+      area.setAttribute("readonly", "readonly");
+      area.style.position = "fixed";
+      area.style.opacity = "0";
+      document.body.appendChild(area);
+      area.select();
+      const ok = document.execCommand("copy");
+      document.body.removeChild(area);
+      return ok;
+    } catch {
+      return false;
+    }
+  };
+  const flashButtonLabel = (button, labelNode, nextLabel, resetDelay = 1400) => {
+    if (!button || !labelNode) return;
+    const defaultLabel = button.getAttribute("data-default-label") || labelNode.textContent || "";
+    labelNode.textContent = nextLabel;
+    if (copiedTimers.has(button)) {
+      clearTimeout(copiedTimers.get(button));
+    }
+    const timer = window.setTimeout(() => {
+      labelNode.textContent = defaultLabel;
+      copiedTimers.delete(button);
+    }, resetDelay);
+    copiedTimers.set(button, timer);
+  };
+  const closeOthers = (current) => {
+    document.querySelectorAll("[data-skill-install]").forEach((node) => {
+      if (node === current) return;
+      const panel = node.querySelector("[data-skill-menu]");
+      const toggle = node.querySelector("[data-skill-menu-toggle]");
+      if (panel) panel.hidden = true;
+      if (toggle) toggle.setAttribute("aria-expanded", "false");
+    });
+  };
+  document.querySelectorAll("[data-skill-install]").forEach((control) => {
+    const mainButton = control.querySelector("[data-skill-copy]");
+    const mainLabel = control.querySelector(".vf-skill-install-main-label");
+    const menuToggle = control.querySelector("[data-skill-menu-toggle]");
+    const menu = control.querySelector("[data-skill-menu]");
+    const commandInput = control.querySelector("[data-skill-command-input]");
+    const commandCopy = control.querySelector("[data-skill-command-copy]");
+    if (mainButton && mainLabel) {
+      mainButton.addEventListener("click", async () => {
+        const ok = await copyText(mainButton.getAttribute("data-skill-content") || "");
+        flashButtonLabel(mainButton, mainLabel, ok ? "Copied" : "Copy failed");
+      });
+    }
+    if (menuToggle && menu) {
+      menuToggle.addEventListener("click", (event) => {
+        event.stopPropagation();
+        const willOpen = menu.hidden;
+        closeOthers(control);
+        menu.hidden = !willOpen;
+        menuToggle.setAttribute("aria-expanded", willOpen ? "true" : "false");
+      });
+    }
+    if (commandCopy && commandInput) {
+      commandCopy.addEventListener("click", async () => {
+        const ok = await copyText(commandInput.value || "");
+        commandCopy.setAttribute("data-copied", ok ? "true" : "false");
+        commandCopy.setAttribute("aria-label", ok ? "Install command copied" : "Unable to copy install command");
+        window.setTimeout(() => {
+          commandCopy.removeAttribute("data-copied");
+          commandCopy.setAttribute("aria-label", "Copy install command");
+        }, 1400);
+      });
+    }
+  });
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    document.querySelectorAll("[data-skill-install]").forEach((control) => {
+      if (control.contains(target)) return;
+      const panel = control.querySelector("[data-skill-menu]");
+      const toggle = control.querySelector("[data-skill-menu-toggle]");
+      if (panel) panel.hidden = true;
+      if (toggle) toggle.setAttribute("aria-expanded", "false");
+    });
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") return;
+    document.querySelectorAll("[data-skill-menu-toggle]").forEach((toggle) => toggle.setAttribute("aria-expanded", "false"));
+    document.querySelectorAll("[data-skill-menu]").forEach((panel) => { panel.hidden = true; });
+  });
+})();</script>
+<script type="module" src="/assets/file-directory-app.js"></script>
+</body>
+</html>