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-clipper.html ADDED Viewed

@@ -0,0 +1,3991 @@
+<!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>Clipper · VidFarm</title>
+<meta name="description" content="Clip long videos into reusable raws and bring them back into your VidFarm workflow.">
+<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/clipper">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="VidFarm">
+<meta property="og:title" content="Clipper · VidFarm">
+<meta property="og:description" content="Clip long videos into reusable raws and bring them back into your VidFarm workflow.">
+<meta property="og:url" content="https://vidfarm.cc/tools/clipper">
+<meta property="og:image" content="https://vidfarmprodstack-vidfarmbucket335ee12f-0vsvtd5earqy.s3.us-east-1.amazonaws.com/primitives/marketing/meta-previews/tools-clipper-ea05c67602.jpg">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Clipper · VidFarm">
+<meta name="twitter:description" content="Clip long videos into reusable raws and bring them back into your VidFarm workflow.">
+<meta name="twitter:image" content="https://vidfarmprodstack-vidfarmbucket335ee12f-0vsvtd5earqy.s3.us-east-1.amazonaws.com/primitives/marketing/meta-previews/tools-clipper-ea05c67602.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-clp-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter);padding-bottom:44px}
+/* shared page-head toolbar (Start New + gear + history) — top-right, like /tools/image */
+.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 340px}
+.rk-inpaint-toolbar{flex:none;display:flex;align-items:center;gap:8px;padding-top:2px}
+.rk-inpaint-startnew{gap:6px}
+.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;margin:0}
+/* shared icon buttons */
+.rk-ip-iconbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600);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-iconbtn:disabled{opacity:.45;cursor:not-allowed;background:var(--rk-n-50);color:var(--rk-n-400);border-color:var(--rk-border)}
+.rk-ip-iconbtn-sm{width:28px;height:28px}
+/* workbench grid — one big left column + right history card */
+.rk-clp-workbench{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
+.rk-clp-main{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card);padding:18px;display:grid;gap:16px;align-content:start}
+/* source bar (above the preview) */
+.rk-clp-sourcebar{display:grid;gap:8px}
+.rk-clp-urlrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+.rk-clp-urlrow .rk-input{flex:1 1 240px;min-width:0}
+.rk-clp-loadbtn{flex:none}
+.rk-clp-or{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--rk-text-faint)}
+.rk-clp-ingestbtn{flex:none}
+.rk-clp-sourcehint{line-height:1.4}
+.rk-clp-loadbtn[data-loading="true"]{opacity:.7;pointer-events:none}
+.rk-clp-sourcebar.is-loading .rk-clp-ingestbtn,.rk-clp-sourcebar.is-loading .rk-input{opacity:.5;pointer-events:none}
+/* preview stage */
+.rk-clp-stage{min-height:300px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
+.rk-clp-empty{padding:44px 24px;text-align:center;color:var(--rk-text-muted)}
+.rk-clp-empty[hidden]{display:none}
+.rk-clp-empty-ic{display:inline-grid;place-items:center;color:var(--rk-n-400);margin-bottom:10px}
+.rk-clp-empty-ic svg{width:30px;height:30px}
+.rk-clp-empty p{font-size:15px;font-weight:800;color:var(--rk-ink);margin:0 0 4px}
+.rk-clp-empty span{font-size:12.5px}
+.rk-clp-player{width:100%}
+.rk-clp-player[hidden]{display:none}
+.rk-clp-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:rgba(20,17,14,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#fff}
+.rk-clp-overlay[hidden]{display:none}
+.rk-clp-overlay-title{margin:0;font-size:15px;font-weight:800}
+.rk-clp-overlay-sub{font-size:12.5px;color:rgba(255,255,255,.72);max-width:340px;line-height:1.45}
+.rk-clp-overlay-sub:empty{display:none}
+.rk-clp-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:rk-clp-spin .8s linear infinite}
+@keyframes rk-clp-spin{to{transform:rotate(360deg)}}
+.rk-clp-videowrap{width:100%;background:#000;display:flex;align-items:center;justify-content:center;position:relative;min-height:300px;max-height:58vh}
+.rk-clp-videowrap video{width:100%;max-height:58vh;display:block}
+.rk-clp-audioposter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(135deg,#2a2622,#1b1815)}
+.rk-clp-audioposter[hidden]{display:none}
+.rk-clp-audioposter-ic{display:grid;place-items:center;color:var(--rk-gold-500,#f0b429)}
+.rk-clp-audioposter-ic svg{width:34px;height:34px}
+.rk-clp-audioposter span{font-size:13px;font-weight:700;letter-spacing:.02em}
+/* transport row */
+.rk-clp-controls[hidden]{display:none}
+.rk-clp-controls{display:grid;gap:13px}
+.rk-clp-transport{display:flex;align-items:center;gap:10px}
+.rk-clp-spacer{flex:1}
+.rk-clp-tc{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:700}
+.rk-clp-tc-now{width:132px;padding:6px 9px;font-size:12.5px}
+.rk-clp-duration{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12.5px;color:var(--rk-text-muted)}
+.rk-btn-xs{padding:4px 11px;font-size:11.5px}
+/* unified timeline */
+.rk-clp-timeline{padding:16px 12px 8px}
+.rk-clp-tl-track{position:relative;height:12px;border-radius:999px;background:var(--rk-n-200,#e7e2da);cursor:pointer;touch-action:none}
+.rk-clp-tl-sel{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--rk-gold-500,#f0b429);border-radius:999px;box-shadow:inset 0 0 0 1px var(--rk-gold-600,#dd9a1f)}
+.rk-clp-tl-playhead{position:absolute;top:-4px;bottom:-4px;left:0;width:2px;background:var(--rk-ink);border-radius:2px;transform:translateX(-1px);pointer-events:none;z-index:3}
+.rk-clp-tl-playhead::after{content:"";position:absolute;top:-3px;left:50%;width:9px;height:9px;background:var(--rk-ink);border:2px solid #fff;border-radius:50%;transform:translateX(-50%)}
+.rk-clp-tl-handle{position:absolute;top:50%;width:16px;height:26px;padding:0;border:0;background:transparent;cursor:ew-resize;transform:translate(-50%,-50%);z-index:4;touch-action:none}
+.rk-clp-tl-handle span{display:block;width:14px;height:26px;margin:0 auto;border-radius:5px;background:#fff;border:2px solid var(--rk-gold-600,#dd9a1f);box-shadow:var(--rk-shadow-sm),0 0 0 1px rgba(0,0,0,.04)}
+.rk-clp-tl-handle:hover span,.rk-clp-tl-handle.is-drag span{border-color:var(--rk-gold-700);background:var(--rk-gold-tint)}
+.rk-clp-tl-handle::before{content:"";position:absolute;top:50%;left:50%;width:2px;height:12px;background:var(--rk-gold-700,#c98a1a);border-radius:2px;transform:translate(-50%,-50%);opacity:.7}
+/* in / out inputs */
+.rk-clp-inout{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
+.rk-clp-field{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;min-width:130px}
+.rk-clp-field-label{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--rk-text-muted)}
+.rk-clp-tinybtn{align-self:flex-start;border:0;background:transparent;color:var(--rk-gold-ink,#9a6b12);font-size:11px;font-weight:700;cursor:pointer;padding:1px 2px;border-radius:6px}
+.rk-clp-tinybtn:hover{text-decoration:underline}
+.rk-clp-lenbox{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;padding-bottom:2px}
+.rk-clp-lenbox strong{font-size:14px;color:var(--rk-ink);font-variant-numeric:tabular-nums}
+.rk-clp-rangenote{font-size:12px;font-weight:600;color:#b42318}
+.rk-clp-rangenote[hidden]{display:none}
+/* advanced */
+.rk-clp-advanced{border-top:1px solid var(--rk-border);padding-top:12px}
+.rk-clp-adv-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:2px;border:0;background:transparent;cursor:pointer;font:inherit;font-size:13px;font-weight:800;color:var(--rk-ink);text-align:left}
+.rk-clp-adv-chev{display:grid;place-items:center;color:var(--rk-text-muted);transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-clp-adv-toggle[aria-expanded="true"] .rk-clp-adv-chev{transform:rotate(180deg)}
+.rk-clp-adv-hint{font-weight:600;margin-left:auto}
+.rk-clp-adv-body{margin-top:12px}
+.rk-clp-adv-body[hidden]{display:none}
+.rk-clp-notes{min-height:52px;resize:vertical;line-height:1.45}
+.rk-clp-audio-toggle{display:flex;gap:9px;align-items:flex-start;margin-top:14px;cursor:pointer}
+.rk-clp-audio-toggle input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--rk-gold-700);cursor:pointer}
+.rk-clp-audio-text{display:flex;flex-direction:column;gap:2px;line-height:1.35}
+.rk-clp-audio-text strong{font-size:13px;color:var(--rk-ink);font-weight:800}
+.rk-clp-audio-text .rk-hint{font-size:11.5px}
+/* clip button + status */
+.rk-clp-savebtn{width:100%;justify-content:center;gap:8px;padding:13px}
+.rk-clp-savebtn[data-loading="true"]{opacity:.7;pointer-events:none}
+.rk-clp-savebtn:disabled{opacity:.5;cursor:not-allowed}
+.rk-clp-status{font-size:12.5px;font-weight:600;min-height:16px;line-height:1.5}
+.rk-clp-status[data-tone="error"]{color:#b42318}
+.rk-clp-status[data-tone="success"]{color:#1f7a44}
+/* right: this-session history card (matches /tools/image) */
+.rk-clp-side{position:sticky;top:16px}
+.rk-clp-side-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card);padding:18px;display:grid;gap:12px;align-content:start}
+.rk-clp-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
+.rk-clp-session-list{display:flex;flex-direction:column;gap:9px;max-height:62vh;overflow:auto}
+.rk-clp-session-empty{font-size:12.5px;color:var(--rk-text-faint);padding:14px 4px;line-height:1.5;text-align:center}
+.rk-clp-clip{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);background:var(--rk-n-50);text-decoration:none}
+.rk-clp-clip:hover{border-color:var(--rk-gold-600)}
+.rk-clp-clip-thumb{flex:none;width:60px;height:40px;border-radius:var(--rk-r-lg);object-fit:cover;background:var(--rk-n-200,#e7e2da)}
+.rk-clp-clip-meta{min-width:0;flex:1;display:grid;gap:3px}
+.rk-clp-clip-title{font-size:12.5px;font-weight:700;color:var(--rk-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-clp-clip-sub{font-size:11px;color:var(--rk-text-muted);font-variant-numeric:tabular-nums}
+.rk-clp-librarylink{font-size:12.5px;font-weight:700;color:var(--rk-gold-ink,#9a6b12);text-decoration:none}
+.rk-clp-librarylink:hover{text-decoration:underline}
+/* settings modal (shared look with /tools/image) */
+.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;animation:rk-clp-fade .16s var(--rk-ease)}
+.rk-ip-settingsmodal[hidden]{display:none}
+.rk-ip-settingsmodal-panel{width:min(440px,100%);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:10px}
+.rk-ip-setting{display:grid;gap:6px}
+.rk-ip-setting-note{font-weight:600;color:var(--rk-text-faint)}
+.rk-ip-input{width:100%;padding:9px 11px;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)}
+@keyframes rk-clp-fade{from{opacity:0}to{opacity:1}}
+/* past-sessions left slide-in panel (shared look with /tools/image) */
+.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}
+@media(max-width:960px){.rk-clp-workbench{grid-template-columns:1fr}.rk-clp-side{position:static}}
+</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-clp-page">
+  <div class="rk-page-head rk-inpaint-head rk-clp-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" href="/tools/video" 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="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 is-active" href="/tools/clipper" 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"><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">Clip Media</h1>
+      <p class="rk-sub">Browse externally, pick the exact video yourself, then paste (or upload) the source here. We resolve direct media from page metadata when possible, then you scrub to the exact moment and drag the <strong>in</strong> and <strong>out</strong> edges on the timeline (HH:MM:SS:NNNN). Only the selected subrange is saved to your raws — grab as many clips as you like from the same source.</p>
+    </div>
+    <div class="rk-inpaint-toolbar">
+      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-inpaint-startnew" data-clp-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-clp-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-clp-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-clp-workbench">
+    <!-- LEFT: source (top) → preview → timeline + advanced (bottom) -->
+    <section class="rk-clp-main" aria-label="Clip controls">
+      <!-- Source, above the preview -->
+      <div class="rk-clp-sourcebar">
+        <label class="rk-label" for="rkClpUrl">Source URL <span class="rk-hint">video or audio</span></label>
+        <div class="rk-clp-urlrow">
+          <input class="rk-input" id="rkClpUrl" data-clp-url-input type="url" placeholder="https://youtube.com/watch?v=… or https://…/media.mp4" autocomplete="off" spellcheck="false" />
+          <button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-clp-loadbtn" data-clp-url-load>Load</button>
+          <span class="rk-clp-or">or</span>
+          <button type="button" class="rk-ip-iconbtn rk-clp-ingestbtn" data-clp-upload title="Upload from your computer" aria-label="Upload"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
+          <button type="button" class="rk-ip-iconbtn rk-clp-ingestbtn" data-clp-attach title="Attach from your Files" aria-label="From Files"><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="M2.5 5.5A1.5 1.5 0 0 1 4 4h3.2l1.4 1.6H16a1.5 1.5 0 0 1 1.5 1.5v7A1.5 1.5 0 0 1 16 15.6H4a1.5 1.5 0 0 1-1.5-1.5Z"/></svg></button>
+        </div>
+        <input data-clp-file type="file" accept="video/*,audio/*" hidden />
+        <span class="rk-hint rk-clp-sourcehint">Paste a page URL or direct media link — we try JSON-LD / player metadata first and only save anything once you clip. For bulk, curated, high-reliability feeds and cloud rendering at scale, use vidfarm.cc.</span>
+      </div>
+      <!-- Preview -->
+      <div class="rk-clp-stage" data-clp-stage>
+        <div class="rk-clp-empty" data-clp-empty>
+          <span class="rk-clp-empty-ic" aria-hidden="true"><svg width="16" height="16" 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>
+          <p>Load media to start clipping.</p>
+          <span>Paste a URL and hit <strong>Load</strong>, or upload a file.</span>
+        </div>
+        <div class="rk-clp-player" data-clp-player hidden>
+          <div class="rk-clp-videowrap" data-clp-videowrap>
+            <video data-clp-video playsinline preload="auto"></video>
+            <div class="rk-clp-audioposter" data-clp-audio-poster hidden>
+              <span class="rk-clp-audioposter-ic" aria-hidden="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"><path d="M4 10v4"/><path d="M8 6v12"/><path d="M12 3v18"/><path d="M16 7v10"/><path d="M20 10v4"/></svg></span>
+              <span>Audio source</span>
+            </div>
+          </div>
+        </div>
+        <!-- Blocking overlay while a source resolves or a clip is being cut -->
+        <div class="rk-clp-overlay" data-clp-overlay hidden>
+          <span class="rk-clp-spinner" aria-hidden="true"></span>
+          <p class="rk-clp-overlay-title" data-clp-overlay-title>Loading…</p>
+          <span class="rk-clp-overlay-sub" data-clp-overlay-sub></span>
+        </div>
+      </div>
+      <!-- Transport + unified timeline (only when a source is loaded) -->
+      <div class="rk-clp-controls" data-clp-controls hidden>
+        <div class="rk-clp-transport">
+          <button type="button" class="rk-ip-iconbtn rk-clp-playpause" data-clp-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 class="rk-clp-tc rk-clp-tc-now" data-clp-timecode type="text" inputmode="numeric" value="00:00:00:0000" aria-label="Current time" />
+          <span class="rk-clp-duration" data-clp-duration>/ 00:00:00:0000</span>
+          <div class="rk-clp-spacer"></div>
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-xs" data-clp-whole title="Select the whole source">Whole</button>
+        </div>
+        <!-- ONE timeline: playhead + draggable in/out edges + selected subrange -->
+        <div class="rk-clp-timeline" data-clp-timeline>
+          <div class="rk-clp-tl-track" data-clp-tl-track>
+            <div class="rk-clp-tl-sel" data-clp-tl-sel></div>
+            <div class="rk-clp-tl-playhead" data-clp-tl-playhead aria-hidden="true"></div>
+            <button type="button" class="rk-clp-tl-handle rk-clp-tl-handle-in" data-clp-tl-in aria-label="In point"><span></span></button>
+            <button type="button" class="rk-clp-tl-handle rk-clp-tl-handle-out" data-clp-tl-out aria-label="Out point"><span></span></button>
+          </div>
+        </div>
+        <div class="rk-clp-inout">
+          <label class="rk-clp-field">
+            <span class="rk-clp-field-label">In</span>
+            <input class="rk-input rk-clp-tc" data-clp-start-input type="text" inputmode="numeric" value="00:00:00:0000" />
+            <button type="button" class="rk-clp-tinybtn" data-clp-set-start title="Set in-point to the playhead">Set to playhead</button>
+          </label>
+          <label class="rk-clp-field">
+            <span class="rk-clp-field-label">Out</span>
+            <input class="rk-input rk-clp-tc" data-clp-end-input type="text" inputmode="numeric" value="00:00:00:0000" />
+            <button type="button" class="rk-clp-tinybtn" data-clp-set-end title="Set out-point to the playhead">Set to playhead</button>
+          </label>
+          <div class="rk-clp-lenbox">
+            <span class="rk-clp-field-label">Length</span>
+            <strong data-clp-length>0:00.0</strong>
+          </div>
+        </div>
+        <div class="rk-clp-rangenote" data-clp-range-note hidden></div>
+        <!-- Advanced (collapsed) -->
+        <div class="rk-clp-advanced" data-clp-advanced>
+          <button type="button" class="rk-clp-adv-toggle" data-clp-adv-toggle aria-expanded="false">
+            <span class="rk-clp-adv-chev" aria-hidden="true"><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="m6 8 4 4 4-4"/></svg></span>
+            <span>Advanced</span>
+            <span class="rk-hint rk-clp-adv-hint">name · notes · audio only</span>
+          </button>
+          <div class="rk-clp-adv-body" data-clp-adv-body hidden>
+            <label class="rk-label" for="rkClpName">Filename <span class="rk-hint">optional</span></label>
+            <input class="rk-input" id="rkClpName" data-clp-name type="text" placeholder="hook-01" autocomplete="off" />
+            <label class="rk-label" for="rkClpNotes" style="margin-top:11px">Notes <span class="rk-hint">helps you find this clip later by search</span></label>
+            <textarea class="rk-input rk-clp-notes" id="rkClpNotes" data-clp-notes rows="2" placeholder="What's in this clip / how you'll use it — indexed for search."></textarea>
+            <label class="rk-label" for="rkClpFolder" style="margin-top:11px">Save to raws folder <span class="rk-hint">optional</span></label>
+            <input class="rk-input" id="rkClpFolder" data-clp-folder type="text" placeholder="defaults to the session tracer" autocomplete="off" spellcheck="false" />
+            <label class="rk-clp-audio-toggle">
+              <input type="checkbox" data-clp-audio-only />
+              <span class="rk-clp-audio-text">
+                <strong>Clip audio only</strong>
+                <span class="rk-hint">Save just the sound (no video) — e.g. grab a track from a copyright-free sound video. Your choice is remembered.</span>
+              </span>
+            </label>
+          </div>
+        </div>
+        <button type="button" class="rk-btn rk-btn-gold rk-clp-savebtn" data-clp-save>
+          <svg width="16" height="16" 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 data-clp-save-label>Clip Media</span>
+        </button>
+        <div class="rk-clp-status" data-clp-status role="status"></div>
+      </div>
+    </section>
+    <!-- RIGHT: this-session history card -->
+    <aside class="rk-clp-side" aria-label="Clips this session">
+      <div class="rk-clp-side-card">
+        <div class="rk-clp-side-head">
+          <h2 class="rk-inpaint-h2">This session</h2>
+          <button type="button" class="rk-ip-iconbtn rk-ip-iconbtn-sm" data-clp-session-refresh aria-label="Refresh" title="Refresh"><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 class="rk-clp-session-list" data-clp-session-list>
+          <div class="rk-clp-session-empty">No clips yet — set an in/out point and clip your first media.</div>
+        </div>
+        <a class="rk-clp-librarylink" href="/library/raws">Open your raws library →</a>
+      </div>
+    </aside>
+  </div>
+  <!-- Settings modal -->
+  <div class="rk-ip-settingsmodal" data-clp-settings hidden>
+    <div class="rk-ip-settingsmodal-panel" role="dialog" aria-modal="true" aria-label="Clipper settings">
+      <div class="rk-ip-settingsmodal-head">
+        <span class="rk-ip-settingsmodal-title">Settings</span>
+        <button type="button" class="rk-ip-iconbtn" data-clp-settings-close aria-label="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">
+          <span class="rk-label">Session name <span class="rk-ip-setting-note">(tracer — groups this session's clips)</span></span>
+          <input class="rk-ip-input" id="rkClpTracer" data-clp-tracer type="text" placeholder="auto — named from the source" autocomplete="off" spellcheck="false" />
+        </label>
+        <span class="rk-hint">Every clip you save in this session is grouped under this tracer — and lands in a matching <code>/raws</code> folder.</span>
+      </div>
+    </div>
+  </div>
+  <!-- Past sessions slide-in -->
+  <aside class="rk-ip-sessions rk-clp-sessions" data-clp-sessions aria-label="Past clipping sessions">
+    <div class="rk-ip-sessions-head">
+      <span class="rk-ip-sessions-title">Past sessions</span>
+      <button type="button" class="rk-ip-iconbtn" data-clp-sessions-close aria-label="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-clp-sessions-list></div>
+  </aside>
+  <div class="rk-ip-sessions-backdrop" data-clp-sessions-backdrop hidden></div>
+  <script type="application/json" data-clp-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 bootEl = document.querySelector("[data-clp-boot]");
+  var boot = {}; try { boot = JSON.parse(bootEl && bootEl.textContent || "{}"); } catch(_){}
+  var AUDIO_ONLY_KEY = "vf_clipper_audio_only";
+  var sourceBar = document.querySelector(".rk-clp-sourcebar");
+  var urlInput = document.querySelector("[data-clp-url-input]");
+  var loadBtn = document.querySelector("[data-clp-url-load]");
+  var uploadBtn = document.querySelector("[data-clp-upload]");
+  var attachBtn = document.querySelector("[data-clp-attach]");
+  var fileInput = document.querySelector("[data-clp-file]");
+  var emptyState = document.querySelector("[data-clp-empty]");
+  var player = document.querySelector("[data-clp-player]");
+  var overlay = document.querySelector("[data-clp-overlay]");
+  var overlayTitle = document.querySelector("[data-clp-overlay-title]");
+  var overlaySub = document.querySelector("[data-clp-overlay-sub]");
+  var video = document.querySelector("[data-clp-video]");
+  var audioPoster = document.querySelector("[data-clp-audio-poster]");
+  var controls = document.querySelector("[data-clp-controls]");
+  var playpause = document.querySelector("[data-clp-playpause]");
+  var timecodeNow = document.querySelector("[data-clp-timecode]");
+  var durationEl = document.querySelector("[data-clp-duration]");
+  var track = document.querySelector("[data-clp-tl-track]");
+  var selEl = document.querySelector("[data-clp-tl-sel]");
+  var playhead = document.querySelector("[data-clp-tl-playhead]");
+  var handleIn = document.querySelector("[data-clp-tl-in]");
+  var handleOut = document.querySelector("[data-clp-tl-out]");
+  var startInput = document.querySelector("[data-clp-start-input]");
+  var endInput = document.querySelector("[data-clp-end-input]");
+  var setStartBtn = document.querySelector("[data-clp-set-start]");
+  var setEndBtn = document.querySelector("[data-clp-set-end]");
+  var wholeBtn = document.querySelector("[data-clp-whole]");
+  var lengthEl = document.querySelector("[data-clp-length]");
+  var rangeNote = document.querySelector("[data-clp-range-note]");
+  var advToggle = document.querySelector("[data-clp-adv-toggle]");
+  var advBody = document.querySelector("[data-clp-adv-body]");
+  var nameInput = document.querySelector("[data-clp-name]");
+  var notesInput = document.querySelector("[data-clp-notes]");
+  var folderInput = document.querySelector("[data-clp-folder]");
+  var audioOnlyInput = document.querySelector("[data-clp-audio-only]");
+  var saveBtn = document.querySelector("[data-clp-save]");
+  var saveLabel = document.querySelector("[data-clp-save-label]");
+  var statusEl = document.querySelector("[data-clp-status]");
+  var sessionList = document.querySelector("[data-clp-session-list]");
+  var sessionRefresh = document.querySelector("[data-clp-session-refresh]");
+  var startNewBtn = document.querySelector("[data-clp-start-new]");
+  var settingsBtn = document.querySelector("[data-clp-settings-button]");
+  var settingsModal = document.querySelector("[data-clp-settings]");
+  var settingsCloses = document.querySelectorAll("[data-clp-settings-close]");
+  var tracerInput = document.querySelector("[data-clp-tracer]");
+  var sessionsToggle = document.querySelector("[data-clp-history-toggle]");
+  var sessionsPanel = document.querySelector("[data-clp-sessions]");
+  var sessionsList = document.querySelector("[data-clp-sessions-list]");
+  var sessionsClose = document.querySelector("[data-clp-sessions-close]");
+  var sessionsBackdrop = document.querySelector("[data-clp-sessions-backdrop]");
+  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>";
+  // ── state ──
+  var sourceUrl = "";          // the original pasted/handoff URL
+  var previewUrl = "";         // resolved direct media URL (what <video> plays)
+  var sourceName = "";
+  var sourceObjectUrl = "";     // object URL for a local upload
+  var uploadTempFileId = "";    // temp_file_id when the source was uploaded
+  var isAudioSource = false;    // heuristic: source looks like audio
+  var durationSec = 0;
+  var resolvedDurationSec = 0;  // authoritative length from /raws/resolve-source
+  var startSec = 0;
+  var endSec = 0;
+  var sessionTracer = "";
+  var tracerAutoPending = true;
+  var dragging = null;          // "in" | "out" | null
+  function esc(t){ var d=document.createElement("div"); d.textContent=(t==null?"":String(t)); return d.innerHTML; }
+  function pad(n, w){ n=String(Math.max(0, Math.floor(n))); while(n.length<w) n="0"+n; return n; }
+  function absoluteUrl(u){ try { return new URL(u, window.location.origin).toString(); } catch(_){ return u; } }
+  function parseJson(r){ return r.text().then(function(t){ try { return t?JSON.parse(t):{}; } catch(_){ return {}; } }); }
+  // HH:MM:SS:NNNN where NNNN = ten-thousandths of a second (4 digits).
+  function fmtTC(sec){
+    if(!isFinite(sec) || sec < 0) sec = 0;
+    var whole = Math.floor(sec);
+    var frac = Math.round((sec - whole) * 10000);
+    if(frac >= 10000){ frac -= 10000; whole += 1; }
+    var h = Math.floor(whole / 3600);
+    var m = Math.floor((whole % 3600) / 60);
+    var s = whole % 60;
+    return pad(h,2)+":"+pad(m,2)+":"+pad(s,2)+":"+pad(frac,4);
+  }
+  function parseTC(str){
+    if(str == null) return NaN;
+    var parts = String(str).trim().split(":").map(function(p){ return p.trim(); });
+    if(!parts.length) return NaN;
+    var h=0,m=0,s=0,frac=0;
+    if(parts.length === 4){ h=+parts[0]; m=+parts[1]; s=+parts[2]; }
+    else if(parts.length === 3){ m=+parts[0]; s=+parts[1]; }
+    else if(parts.length === 2){ s=+parts[0]; }
+    else { s=+parts[0]; }
+    if([h,m,s].some(function(n){ return isNaN(n); })) return NaN;
+    if(parts.length >= 2){ var last = parts[parts.length-1]||""; var div = Math.pow(10, last.length||4); frac = (+last)/div; if(isNaN(frac)) frac=0; }
+    return h*3600 + m*60 + s + frac;
+  }
+  function fmtLen(sec){
+    if(!isFinite(sec) || sec < 0) sec = 0;
+    var m = Math.floor(sec/60);
+    var s = sec - m*60;
+    return m+":"+pad(Math.floor(s),2)+"."+pad(Math.round((s-Math.floor(s))*10),1);
+  }
+  function slug(v){ return String(v||"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"").slice(0,60); }
+  function looksAudio(u){ return /\.(mp3|m4a|aac|wav|ogg|oga|flac|opus)(\?|#|$)/i.test(String(u||"")); }
+  function setStatus(msg, tone){ if(!statusEl) return; statusEl.textContent = msg||""; if(tone) statusEl.setAttribute("data-tone", tone); else statusEl.removeAttribute("data-tone"); }
+  // Blocking overlay over the preview stage while a source resolves / a clip cuts.
+  function showOverlay(title, sub){
+    if(!overlay) return;
+    if(overlayTitle) overlayTitle.textContent = title || "Working\u2026";
+    if(overlaySub) overlaySub.textContent = sub || "";
+    if(emptyState) emptyState.hidden = true;
+    overlay.hidden = false;
+  }
+  function hideOverlay(){ if(overlay) overlay.hidden = true; }
+  function setRangeNote(msg){ if(!rangeNote) return; if(msg){ rangeNote.textContent = msg; rangeNote.hidden = false; } else { rangeNote.hidden = true; } }
+  // ── tracer / session id ──
+  function tracerSuffix(){ return Math.random().toString(36).slice(2, 6); }
+  function nameTracerFromSeed(seed){
+    var base = slug(seed) || "clipper";
+    var t = base + "-" + tracerSuffix();
+    sessionTracer = t; tracerAutoPending = false;
+    if(tracerInput) tracerInput.value = t;
+    return t;
+  }
+  function resolveTracer(){
+    if(tracerInput && tracerInput.value.trim()){ sessionTracer = tracerInput.value.trim(); tracerAutoPending = false; return sessionTracer; }
+    return sessionTracer;
+  }
+  // Always return a concrete session id — never leave the tracer unset at save time.
+  function ensureTracer(){
+    var t = resolveTracer();
+    if(tracerAutoPending || !t){ t = nameTracerFromSeed(sourceName || "clip"); }
+    return t;
+  }
+  function currentFolder(){
+    var f = (folderInput && folderInput.value.trim()) || "";
+    return f || slug(resolveTracer() || sessionTracer || "");
+  }
+  // ── source loading ──
+  function revealPlayer(){ if(emptyState) emptyState.hidden = true; if(player) player.hidden = false; if(controls) controls.hidden = false; }
+  function clearSourceObjectUrl(){ if(sourceObjectUrl){ try { URL.revokeObjectURL(sourceObjectUrl); } catch(_){} sourceObjectUrl=""; } }
+  function applyAudioPoster(){
+    // Once a frame is decoded (readyState>=2) a real video reports videoWidth>0;
+    // a frameless source (audio) never does → treat it as audio and force the
+    // audio-only clip mode (a "video" trim of a frameless source is meaningless).
+    if(video && video.readyState >= 2 && (!video.videoWidth || !video.videoHeight)){
+      isAudioSource = true;
+      if(audioOnlyInput && !audioOnlyInput.checked){ audioOnlyInput.checked = true; refreshSaveLabel(); }
+    }
+    var showPoster = isAudioSource || (video && video.readyState >= 1 && (!video.videoWidth || !video.videoHeight));
+    if(audioPoster) audioPoster.hidden = !showPoster;
+  }
+  function playSrc(url){
+    if(!video) return;
+    try { video.pause(); } catch(_){}
+    video.src = url;
+    video.load();
+    revealPlayer();
+    applyAudioPoster();
+  }
+  // Toggle the ingest controls off while a URL is resolving.
+  function setSourceLoading(on){
+    if(sourceBar) sourceBar.classList.toggle("is-loading", !!on);
+    if(loadBtn){ loadBtn.setAttribute("data-loading", on?"true":"false"); loadBtn.disabled = !!on; loadBtn.textContent = on ? "Loading\u2026" : "Load"; }
+    if(uploadBtn) uploadBtn.disabled = !!on;
+    if(attachBtn) attachBtn.disabled = !!on;
+  }
+  // Resolve a pasted/handoff URL to a direct preview media URL, then play it.
+  function loadSourceUrl(rawUrl, name){
+    var u = String(rawUrl||"").trim();
+    if(!u){ setStatus("Enter a media URL.", "error"); return; }
+    if(!/^https?:\/\//i.test(u)){ setStatus("That doesn't look like a valid URL.", "error"); return; }
+    sourceUrl = u; sourceName = name || ""; uploadTempFileId = ""; resolvedDurationSec = 0; clearSourceObjectUrl();
+    isAudioSource = looksAudio(u);
+    setSourceLoading(true);
+    showOverlay("Loading source\u2026", "Fetching the video from its source. YouTube and other social links can take a few seconds \u2014 the timeline appears once it\u2019s ready.");
+    setStatus("Resolving source\u2026");
+    fetch("/raws/resolve-source", { method:"POST", credentials:"same-origin", headers:{ "content-type":"application/json" }, body: JSON.stringify({ source_url: u }) })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        if(!res.ok || !res.p.preview_url) throw new Error(res.p.error || "Could not load that source.");
+        previewUrl = res.p.preview_url;
+        var d = Number(res.p.duration_sec);
+        resolvedDurationSec = (isFinite(d) && d > 0) ? d : 0;
+        if(res.p.title && !sourceName) sourceName = res.p.title;
+        if(looksAudio(previewUrl)) isAudioSource = true;
+        if(tracerAutoPending) nameTracerFromSeed(sourceName || "clip");
+        overlayTitle && (overlayTitle.textContent = "Buffering preview\u2026");
+        overlaySub && (overlaySub.textContent = "Almost there \u2014 loading the player.");
+        playSrc(previewUrl);
+        setStatus("Loaded \u2014 drag the in/out edges on the timeline.", "success");
+      })
+      .catch(function(err){ hideOverlay(); setStatus(err && err.message ? err.message : "Could not load that source.", "error"); })
+      .then(function(){ setSourceLoading(false); });
+  }
+  function loadLocalFile(file){
+    if(!file) return;
+    clearSourceObjectUrl();
+    sourceObjectUrl = URL.createObjectURL(file);
+    previewUrl = ""; sourceName = file.name || "upload.mp4"; sourceUrl = ""; uploadTempFileId = "";
+    isAudioSource = /^audio\//i.test(file.type||"") || looksAudio(file.name);
+    if(tracerAutoPending) nameTracerFromSeed(sourceName);
+    playSrc(sourceObjectUrl);
+    setStatus("Uploading source in the background\u2026");
+    // The <video> plays the local object URL immediately; in parallel push the
+    // file to /temp so /raws/clip-range has a server-side source to trim.
+    var fd = new FormData();
+    fd.append("file", file);
+    fetch("/api/v1/user/me/temporary-files/upload", { method:"POST", credentials:"same-origin", body: fd })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        var id = res.p && (res.p.id || res.p.file_id || (res.p.file && res.p.file.id));
+        if(res.ok && id){ uploadTempFileId = String(id); setStatus("Source ready \u2014 drag the in/out edges on the timeline.", "success"); }
+        else { setStatus("Preview ready, but the upload failed \u2014 saving a clip may not work. " + ((res.p && res.p.error)||""), "error"); }
+      })
+      .catch(function(){ setStatus("Preview ready, but the upload failed \u2014 saving a clip may not work.", "error"); });
+  }
+  function openAttach(){
+    if(window.__vidfarmDirectory && typeof window.__vidfarmDirectory.pick === "function"){
+      window.__vidfarmDirectory.pick({ select:"file" }).then(function(picked){
+        if(!picked) return;
+        var url = picked.view_url || picked.url || picked.path;
+        if(url){ loadSourceUrl(absoluteUrl(url), picked.name || picked.file_name || ""); }
+      }).catch(function(){});
+    } else {
+      setStatus("File browser unavailable here \u2014 paste a URL or upload instead.", "error");
+    }
+  }
+  // ── range + timeline sync ──
+  function clamp(v, lo, hi){ return Math.max(lo, Math.min(hi, v)); }
+  function pctOf(sec){ return durationSec > 0 ? clamp(sec/durationSec, 0, 1) : 0; }
+  function renderTimeline(){
+    if(!durationSec || durationSec <= 0){
+      if(selEl){ selEl.style.left="0"; selEl.style.width="100%"; }
+      if(handleIn) handleIn.style.left="0%";
+      if(handleOut) handleOut.style.left="100%";
+      return;
+    }
+    var a = pctOf(startSec)*100, b = pctOf(endSec)*100;
+    if(selEl){ selEl.style.left = a+"%"; selEl.style.width = Math.max(0, b-a)+"%"; }
+    if(handleIn) handleIn.style.left = a+"%";
+    if(handleOut) handleOut.style.left = b+"%";
+  }
+  function renderPlayhead(){
+    if(!playhead) return;
+    playhead.style.left = (pctOf(video ? (video.currentTime||0) : 0)*100)+"%";
+  }
+  function refreshRangeUI(sync){
+    if(sync !== "start" && startInput && document.activeElement !== startInput) startInput.value = fmtTC(startSec);
+    if(sync !== "end" && endInput && document.activeElement !== endInput) endInput.value = fmtTC(endSec);
+    var len = endSec - startSec;
+    if(lengthEl) lengthEl.textContent = fmtLen(Math.max(0, len)) + " (" + Math.max(0, len).toFixed(2) + "s)";
+    renderTimeline();
+    var valid = len > 0.02 && (durationSec <= 0 || (startSec >= 0 && endSec <= durationSec + 0.01));
+    if(!valid){ setRangeNote(len <= 0 ? "Out point must be after the in point." : "Range is outside the source."); }
+    else setRangeNote("");
+    if(saveBtn) saveBtn.disabled = !valid;
+  }
+  function setStart(sec){ startSec = clamp(sec, 0, durationSec>0?durationSec:sec); if(endSec < startSec) endSec = Math.min(durationSec>0?durationSec:startSec, startSec + 0.1); refreshRangeUI(); }
+  function setEnd(sec){ endSec = clamp(sec, 0, durationSec>0?durationSec:sec); if(startSec > endSec) startSec = Math.max(0, endSec - 0.1); refreshRangeUI(); }
+  // Seek to a time and reflect the playhead / timecode.
+  function seekTo(sec){ if(!video || durationSec<=0) return; video.currentTime = clamp(sec, 0, durationSec); syncNow(); }
+  function secFromPointer(clientX){
+    if(!track || durationSec<=0) return 0;
+    var r = track.getBoundingClientRect();
+    var pct = r.width>0 ? clamp((clientX - r.left)/r.width, 0, 1) : 0;
+    return pct * durationSec;
+  }
+  // Timeline pointer interactions: click track = seek; drag handle = set in/out.
+  function onTrackPointerDown(e){
+    if(durationSec<=0) return;
+    var t = e.target;
+    if(t === handleIn || (handleIn && handleIn.contains(t))){ beginDrag("in", e); return; }
+    if(t === handleOut || (handleOut && handleOut.contains(t))){ beginDrag("out", e); return; }
+    seekTo(secFromPointer(e.clientX));
+  }
+  function beginDrag(which, e){
+    dragging = which;
+    var h = which==="in" ? handleIn : handleOut;
+    if(h) h.classList.add("is-drag");
+    e.preventDefault();
+    window.addEventListener("pointermove", onDragMove);
+    window.addEventListener("pointerup", onDragEnd);
+  }
+  function onDragMove(e){
+    if(!dragging) return;
+    var sec = secFromPointer(e.clientX);
+    if(dragging==="in"){ setStart(sec); seekTo(sec); }
+    else { setEnd(sec); seekTo(sec); }
+  }
+  function onDragEnd(){
+    if(handleIn) handleIn.classList.remove("is-drag");
+    if(handleOut) handleOut.classList.remove("is-drag");
+    dragging = null;
+    window.removeEventListener("pointermove", onDragMove);
+    window.removeEventListener("pointerup", onDragEnd);
+  }
+  // ── playback ──
+  function syncNow(){
+    if(timecodeNow && document.activeElement !== timecodeNow) timecodeNow.value = fmtTC(video ? (video.currentTime||0) : 0);
+    renderPlayhead();
+  }
+  function tick(){ if(video && !video.paused && !video.ended){ syncNow(); requestAnimationFrame(tick); } }
+  function setPlayIcon(){ if(playpause) playpause.innerHTML = (video && !video.paused) ? PAUSE_SVG : PLAY_SVG; }
+  if(video){
+    video.addEventListener("loadedmetadata", function(){
+      hideOverlay();
+      // Some social renditions (esp. YouTube googlevideo progressive URLs) report
+      // a truncated or non-finite duration, which collapses the timeline to a few
+      // seconds. Prefer the authoritative length from /raws/resolve-source when
+      // the browser's number looks unreliable so the whole clip is scrubbable.
+      var vd = Number(video.duration);
+      durationSec = (isFinite(vd) && vd > 0) ? vd : 0;
+      if(resolvedDurationSec > 0 && (!isFinite(vd) || vd <= 0 || resolvedDurationSec > durationSec + 1)){
+        durationSec = resolvedDurationSec;
+      }
+      startSec = 0; endSec = durationSec || 0;
+      if(durationEl) durationEl.textContent = "/ " + fmtTC(durationSec);
+      applyAudioPoster();
+      refreshRangeUI(); renderPlayhead();
+    });
+    video.addEventListener("loadeddata", function(){ hideOverlay(); applyAudioPoster(); });
+    video.addEventListener("canplay", hideOverlay);
+    video.addEventListener("timeupdate", syncNow);
+    video.addEventListener("play", function(){ setPlayIcon(); tick(); });
+    video.addEventListener("pause", setPlayIcon);
+    video.addEventListener("ended", setPlayIcon);
+    video.addEventListener("error", function(){ hideOverlay(); setStatus("The browser couldn't play this source. Try a direct file URL or upload it.", "error"); });
+  }
+  // ── wire controls ──
+  if(loadBtn) loadBtn.addEventListener("click", function(){ loadSourceUrl(urlInput && urlInput.value, ""); });
+  if(urlInput) urlInput.addEventListener("keydown", function(e){ if(e.key === "Enter"){ e.preventDefault(); loadSourceUrl(urlInput.value, ""); } });
+  if(uploadBtn && fileInput){ uploadBtn.addEventListener("click", function(){ if(!uploadBtn.disabled) fileInput.click(); }); fileInput.addEventListener("change", function(){ if(fileInput.files && fileInput.files[0]) loadLocalFile(fileInput.files[0]); }); }
+  if(attachBtn) attachBtn.addEventListener("click", function(){ if(!attachBtn.disabled) openAttach(); });
+  if(playpause) playpause.addEventListener("click", function(){ if(!video) return; if(video.paused) video.play(); else video.pause(); });
+  if(timecodeNow) timecodeNow.addEventListener("change", function(){ var t = parseTC(timecodeNow.value); if(isFinite(t)) seekTo(t); });
+  if(track) track.addEventListener("pointerdown", onTrackPointerDown);
+  if(startInput) startInput.addEventListener("change", function(){ var t = parseTC(startInput.value); if(isFinite(t)) setStart(t); else refreshRangeUI(); });
+  if(endInput) endInput.addEventListener("change", function(){ var t = parseTC(endInput.value); if(isFinite(t)) setEnd(t); else refreshRangeUI(); });
+  if(setStartBtn) setStartBtn.addEventListener("click", function(){ setStart(video ? (video.currentTime||0) : 0); });
+  if(setEndBtn) setEndBtn.addEventListener("click", function(){ setEnd(video ? (video.currentTime||0) : 0); });
+  if(wholeBtn) wholeBtn.addEventListener("click", function(){ startSec = 0; endSec = durationSec || 0; refreshRangeUI(); });
+  // ── advanced toggle + sticky audio-only ──
+  if(advToggle && advBody){
+    advToggle.addEventListener("click", function(){
+      var open = advBody.hidden;
+      advBody.hidden = !open;
+      advToggle.setAttribute("aria-expanded", open ? "true" : "false");
+    });
+  }
+  function loadStickyAudioOnly(){
+    var v = false; try { v = localStorage.getItem(AUDIO_ONLY_KEY) === "1"; } catch(_){}
+    if(audioOnlyInput) audioOnlyInput.checked = v;
+    // If it was previously enabled, reveal Advanced so the choice is visible.
+    if(v && advBody && advToggle && advBody.hidden){ advBody.hidden = false; advToggle.setAttribute("aria-expanded","true"); }
+  }
+  if(audioOnlyInput){
+    audioOnlyInput.addEventListener("change", function(){
+      try { localStorage.setItem(AUDIO_ONLY_KEY, audioOnlyInput.checked ? "1" : "0"); } catch(_){}
+      refreshSaveLabel();
+    });
+  }
+  // ── clip media ──
+  function isAudioOnly(){ return !!(audioOnlyInput && audioOnlyInput.checked); }
+  function restingSaveLabel(){ return isAudioOnly() ? "Clip Audio" : "Clip Media"; }
+  function refreshSaveLabel(){ if(saveLabel && saveBtn && saveBtn.getAttribute("data-loading") !== "true") saveLabel.textContent = restingSaveLabel(); }
+  function setSaving(on){ if(saveBtn){ saveBtn.setAttribute("data-loading", on?"true":"false"); saveBtn.disabled = on; } if(saveLabel) saveLabel.textContent = on ? "Saving\u2026" : restingSaveLabel(); }
+  function saveClip(){
+    if(!video){ return; }
+    var len = endSec - startSec;
+    if(!(len > 0.02)){ setStatus("Set an in point and a later out point first.", "error"); return; }
+    if(!previewUrl && !sourceUrl && !uploadTempFileId){ setStatus("Load a source first.", "error"); return; }
+    var tracer = ensureTracer();
+    var folder = currentFolder();
+    var payload = { start_sec: Number(startSec.toFixed(3)), end_sec: Number(endSec.toFixed(3)), tracer: tracer, session_id: tracer };
+    if(isAudioOnly()) payload.audio_only = true;
+    if(folder) payload.folder_path = folder;
+    if(nameInput && nameInput.value.trim()) payload.name = nameInput.value.trim();
+    if(notesInput && notesInput.value.trim()) payload.notes = notesInput.value.trim();
+    // Prefer the already-resolved direct URL (no re-resolve); else the uploaded
+    // temp file; else the raw source URL (server resolves + bills).
+    if(previewUrl) payload.preview_url = previewUrl;
+    if(uploadTempFileId) payload.temp_file_id = uploadTempFileId;
+    if(sourceUrl) payload.source_url = sourceUrl;
+    var audioOnly = isAudioOnly();
+    setSaving(true);
+    showOverlay(audioOnly ? "Extracting audio\u2026" : "Cutting your clip\u2026", "Downloading the source and trimming your selection on the server. This can take a moment for longer or social videos \u2014 hang tight.");
+    setStatus(audioOnly ? "Extracting and saving the audio\u2026" : "Trimming and saving your clip\u2026");
+    fetch("/raws/clip-range", { method:"POST", credentials:"same-origin", headers:{ "content-type":"application/json" }, body: JSON.stringify(payload) })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        if(!res.ok || !res.p.clip_id) throw new Error(res.p.error || "Could not save that clip.");
+        setStatus("Saved \u2014 " + (audioOnly ? "audio" : "clip") + " added to your raws (" + (res.p.folder_path||folder) + ").", "success");
+        // Clear only the per-clip name so the next clip starts fresh; keep notes
+        // and folder sticky across clips in the same session.
+        if(nameInput) nameInput.value = "";
+        prependSessionClip(res.p);
+        loadSession();
+      })
+      .catch(function(err){ setStatus(err && err.message ? err.message : "Could not save that clip.", "error"); })
+      .then(function(){ hideOverlay(); setSaving(false); });
+  }
+  if(saveBtn) saveBtn.addEventListener("click", saveClip);
+  // ── this-session clip list ──
+  function clipRow(clip){
+    var a = document.createElement("a");
+    a.className = "rk-clp-clip"; a.href = clip.view_url ? absoluteUrl(clip.view_url) : "/library/raws"; a.target = "_blank"; a.rel = "noopener";
+    var thumb;
+    if(clip.thumbnail_url){ thumb = document.createElement("img"); thumb.className = "rk-clp-clip-thumb"; thumb.loading = "lazy"; thumb.src = absoluteUrl(clip.thumbnail_url); thumb.alt = ""; }
+    else { thumb = document.createElement("span"); thumb.className = "rk-clp-clip-thumb"; }
+    var meta = document.createElement("div"); meta.className = "rk-clp-clip-meta";
+    var title = document.createElement("div"); title.className = "rk-clp-clip-title"; title.textContent = clip.description || clip.name || clip.clip_id || "clip";
+    var sub = document.createElement("div"); sub.className = "rk-clp-clip-sub";
+    var d = Number(clip.duration_sec || 0);
+    var kind = clip.media_kind === "audio" ? "audio" : "clip";
+    sub.textContent = (d>0 ? d.toFixed(2)+"s" : "") + (d>0 ? " · " : "") + kind;
+    meta.appendChild(title); meta.appendChild(sub); a.appendChild(thumb); a.appendChild(meta);
+    return a;
+  }
+  function prependSessionClip(clip){
+    if(!sessionList) return;
+    var empty = sessionList.querySelector(".rk-clp-session-empty"); if(empty) empty.remove();
+    sessionList.insertBefore(clipRow(clip), sessionList.firstChild);
+  }
+  function loadSession(){
+    if(!sessionList) return;
+    var folder = currentFolder();
+    if(!folder){ return; }
+    var endpoint = new URL("/raws/feed", window.location.origin);
+    endpoint.searchParams.set("folder", folder); endpoint.searchParams.set("limit", "200");
+    fetch(endpoint, { credentials:"same-origin", headers:{ Accept:"application/json" } })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        if(!res.ok) return;
+        var clips = (res.p && res.p.clips) || [];
+        sessionList.innerHTML = "";
+        if(!clips.length){ var e=document.createElement("div"); e.className="rk-clp-session-empty"; e.textContent="No clips yet — set an in/out point and clip your first media."; sessionList.appendChild(e); return; }
+        clips.forEach(function(c){ sessionList.appendChild(clipRow(c)); });
+      }).catch(function(){});
+  }
+  if(sessionRefresh) sessionRefresh.addEventListener("click", loadSession);
+  // ── past sessions (grouped by folder/tracer) ──
+  function openSessions(){ if(sessionsPanel) sessionsPanel.classList.add("is-open"); if(sessionsBackdrop) sessionsBackdrop.hidden = false; loadPastSessions(); }
+  function closeSessions(){ if(sessionsPanel) sessionsPanel.classList.remove("is-open"); if(sessionsBackdrop) sessionsBackdrop.hidden = true; }
+  function relTime(v){ var then=Date.parse(v||0); if(!then) return ""; var s=Math.max(0,Math.floor((Date.now()-then)/1000)); if(s<60) return "just now"; var m=Math.floor(s/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(); }
+  function loadPastSessions(){
+    if(!sessionsList) return;
+    sessionsList.innerHTML = "<div class=\"rk-ip-sessions-empty\">Loading\u2026</div>";
+    var endpoint = new URL("/raws/feed", window.location.origin); endpoint.searchParams.set("limit", "200");
+    fetch(endpoint, { credentials:"same-origin", headers:{ Accept:"application/json" } })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        var clips = (res.p && res.p.clips) || [];
+        var groups = {}, order = [];
+        clips.forEach(function(c){
+          var key = (c.folder_path || c.tracer || "").trim(); if(!key) return;
+          if(!groups[key]){ groups[key] = { key:key, thumb:"", count:0, createdAt:c.created_at||"" }; order.push(key); }
+          var g = groups[key]; g.count++;
+          if(!g.thumb && c.thumbnail_url) g.thumb = absoluteUrl(c.thumbnail_url);
+          if(Date.parse(c.created_at||0) > Date.parse(g.createdAt||0)) g.createdAt = c.created_at;
+        });
+        var list = order.map(function(k){ return groups[k]; }).sort(function(a,b){ return Date.parse(b.createdAt||0) - Date.parse(a.createdAt||0); });
+        sessionsList.innerHTML = "";
+        if(!list.length){ sessionsList.innerHTML = "<div class=\"rk-ip-sessions-empty\">No past clipping sessions yet.</div>"; return; }
+        list.forEach(function(g){
+          var row = document.createElement("button"); row.type="button"; row.className="rk-ip-session" + (g.key === currentFolder() ? " is-active" : "");
+          if(g.thumb){ var im=document.createElement("img"); im.className="rk-ip-session-thumb"; im.src=g.thumb; im.alt=""; row.appendChild(im); }
+          else { var ph=document.createElement("span"); ph.className="rk-ip-session-thumb is-empty"; 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=g.key;
+          var sub=document.createElement("div"); sub.className="rk-ip-session-sub"; sub.textContent = g.count + " clip" + (g.count===1?"":"s") + (relTime(g.createdAt)?" \u00b7 "+relTime(g.createdAt):"");
+          meta.appendChild(title); meta.appendChild(sub); row.appendChild(meta);
+          row.addEventListener("click", function(){ switchToSession(g.key); });
+          sessionsList.appendChild(row);
+        });
+      }).catch(function(){ if(sessionsList) sessionsList.innerHTML = "<div class=\"rk-ip-sessions-empty\">Unable to load sessions.</div>"; });
+  }
+  function switchToSession(key){
+    if(!key) return;
+    sessionTracer = key; tracerAutoPending = false;
+    if(tracerInput) tracerInput.value = key;
+    if(folderInput) folderInput.value = key;
+    closeSessions(); loadSession();
+    setStatus("Opened session " + key + " \u2014 load a source to add more clips.", "");
+  }
+  // ── settings / sessions open-close ──
+  if(settingsBtn) settingsBtn.addEventListener("click", function(){ if(settingsModal) settingsModal.hidden = false; });
+  Array.prototype.forEach.call(settingsCloses, function(el){ el.addEventListener("click", function(){ if(settingsModal) settingsModal.hidden = true; }); });
+  if(sessionsToggle) sessionsToggle.addEventListener("click", openSessions);
+  if(sessionsClose) sessionsClose.addEventListener("click", closeSessions);
+  if(sessionsBackdrop) sessionsBackdrop.addEventListener("click", closeSessions);
+  if(settingsModal) settingsModal.addEventListener("click", function(e){ if(e.target === settingsModal) settingsModal.hidden = true; });
+  document.addEventListener("keydown", function(e){ if(e.key === "Escape"){ if(settingsModal && !settingsModal.hidden) settingsModal.hidden = true; closeSessions(); } });
+  // ── start new ──
+  function resetWorkspace(){
+    clearSourceObjectUrl();
+    sourceUrl=""; previewUrl=""; sourceName=""; uploadTempFileId=""; isAudioSource=false; durationSec=0; startSec=0; endSec=0;
+    try { video.pause(); } catch(_){} if(video){ video.removeAttribute("src"); video.load(); }
+    if(emptyState) emptyState.hidden = false; if(player) player.hidden = true;
+    if(controls) controls.hidden = true; if(audioPoster) audioPoster.hidden = true;
+    if(urlInput) urlInput.value=""; if(nameInput) nameInput.value=""; if(notesInput) notesInput.value=""; if(folderInput) folderInput.value="";
+    setSourceLoading(false);
+    refreshSaveLabel();
+    if(sessionList) sessionList.innerHTML = "<div class=\"rk-clp-session-empty\">No clips yet — set an in/out point and clip your first media.</div>";
+    setStatus(""); setRangeNote("");
+  }
+  if(startNewBtn) startNewBtn.addEventListener("click", function(){
+    sessionTracer=""; tracerAutoPending=true; if(tracerInput) tracerInput.value="";
+    clearUrlParams(); resetWorkspace();
+    setStatus("Started a new session.", "");
+  });
+  // ── URL param preload ──
+  function firstParam(names){ var p=new URLSearchParams(window.location.search); for(var i=0;i<names.length;i++){ var v=p.get(names[i]); if(v && v.trim()) return v.trim(); } return ""; }
+  function clearUrlParams(){ var u=new URL(window.location.href); ["source_url","source_video_url","video_url","url","source_video_name","video_name","file_name","tracer","tracer_id","trace"].forEach(function(k){ u.searchParams.delete(k); }); window.history.replaceState({}, "", u.toString()); }
+  function initFromUrl(){
+    var t = firstParam(["tracer","tracer_id","trace"]);
+    if(t){ sessionTracer=t; tracerAutoPending=false; if(tracerInput) tracerInput.value=t; if(folderInput && !folderInput.value) folderInput.value=slug(t); }
+    var src = firstParam(["source_url","source_video_url","video_url","url"]);
+    if(src){ if(urlInput) urlInput.value = src; loadSourceUrl(src, firstParam(["source_video_name","video_name","file_name"])); }
+    if(t) loadSession();
+  }
+  loadStickyAudioOnly();
+  refreshSaveLabel();
+  initFromUrl();
+})();</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>