@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

package/dist/src/reskin/theme.js

@@ -18,7 +18,7 @@
 // accent over a neutral base, heavy rounded display type, soft cards, glass
 // pill nav, warm-dark footer).
 export const RESKIN_PAGES = [
-    { slug: "settings", label: "Settings", emoji: "⚙️", blurb: "Profile, wallet, channels & developer keys", live: "/settings", done: true },
+    { slug: "settings", label: "Settings", emoji: "⚙️", blurb: "Profile, wallet, channels & developer keys", live: "/settings/profile", done: true },
     { slug: "library", label: "Library", emoji: "🎬", blurb: "Your projects, renders & mined clips (tabbed)", live: "/library", done: true },
     { slug: "discover", label: "Discover", emoji: "✨", blurb: "Template feed · swipe · categories", live: "/discover", done: true },
     { slug: "chat", label: "Brainstorm", emoji: "💬", blurb: "Full AI brainstorm chat", live: "/chat", done: true },
@@ -84,10 +84,10 @@ export const RESKIN_CSS = `
 /* 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)}
-.rk-page{padding:40px 0 96px}
-.rk-page-head{display:grid;gap:8px;margin-bottom:32px}
-.rk-h1{font-size:var(--rk-text-4xl);letter-spacing:-.03em}
-.rk-sub{font-size:var(--rk-text-lg);color:var(--rk-text-muted)}
+.rk-page{padding:24px 0 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}
@@ -106,8 +106,9 @@ export const RESKIN_CSS = `
 .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:8px;padding:6px 10px 18px;font-family:var(--rk-font-display);
+.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);
@@ -115,19 +116,396 @@ export const RESKIN_CSS = `
   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)}
-.rk-sidebar-foot{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--rk-border);margin-top:6px}
-.rk-sidebar-foot-link{font-size:12.5px;font-weight:500;color:var(--rk-text-muted);padding:4px 11px;border-radius:var(--rk-r-md)}
-.rk-sidebar-foot-link:hover{color:var(--rk-ink)}
-.rk-sidebar-cta{justify-content:center}
+/* signed-in identity — subtle, small, pinned to the sidebar foot so you can
+ * tell which account you're in at a glance */
+/* padding-bottom reserves room for the floating chat FAB (bottom-left,
+ * ~56px + 16px margin) so the name/email are never hidden behind it */
+.rk-sidebar-account{margin-top:8px;padding:8px 13px 80px;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}
+/* 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)}
+.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{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. */
+.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{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{padding:22px 14px 8px;font-family:var(--rk-font-display);font-weight:800;
+  font-size:13px;color:var(--rk-ink);letter-spacing:-.01em;flex:none}
+.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)}
+.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-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)}
+/* 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{font-family:inherit;font-size:12px;font-weight:700;color:var(--rk-ink);cursor:pointer;
+  background:#fff;border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-full);padding:4px 12px}
+.rk-dir-selbtn:hover{background:var(--rk-gold-tint2)}
+.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-n-100);color:var(--rk-ink)}
+/* 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}
+.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)}
+.rk-aichat-log{flex:1;min-height:0;overflow-y:auto;padding:16px;display:grid;gap:10px;align-content:start;background:var(--rk-n-50)}
+.rk-aichat-msg{max-width:85%;padding:10px 14px;border-radius:var(--rk-r-2xl);font-size:13.5px;line-height:1.5;overflow-wrap: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}
+/* 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%}
+.rk-aichat-stream{white-space:pre-wrap}
+.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}
+.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}
+
+/* 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{flex-direction:column}
+  .rk-aichat.has-files .rk-aichat-files,
+  .rk-aichat.has-history .rk-aichat-history{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{width:26px;height:26px;border-radius:8px;background:var(--rk-gold-500);
-  display:grid;place-items:center;font-family:var(--rk-font-display);font-weight:800;font-size:15px;
-  color:var(--rk-ink);box-shadow:var(--rk-shadow-xs);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}
 
@@ -139,8 +517,33 @@ export const RESKIN_CSS = `
   .rk-sidebar-nav{flex-direction:row;gap:4px;flex:1}
   .rk-sidebar-sep{display:none}
   .rk-sidebar-item{padding:8px 12px}
-  .rk-sidebar-foot{display:none}
+  /* 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}
   .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 only inside the open dropdown (it's 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}
 }
 
 /* buttons */
@@ -154,6 +557,12 @@ export const RESKIN_CSS = `
 .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)}
@@ -161,6 +570,8 @@ export const RESKIN_CSS = `
 .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);
@@ -179,6 +590,11 @@ export const RESKIN_CSS = `
   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)}
@@ -219,12 +635,13 @@ export const RESKIN_CSS = `
 
 /* 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:860px){.rk-shell{grid-template-columns:1fr}}
+@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:860px){.rk-side{position:static;grid-auto-flow:column;overflow:auto}}
+@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)}
@@ -257,7 +674,7 @@ export const RESKIN_CSS = `
 .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:119px var(--rk-gutter) 72px}
+.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}

package/dist/src/services/clip-curation/gemini.js

@@ -107,6 +107,7 @@ export class ClipModelClient {
         const cats = getTaxonomy(this.taxonomyVersion).categories;
         const enumArray = (values) => z.array(z.enum(values)).default([]);
         return z.object({
+            content_type: enumArray(cats.content_type),
             subject: enumArray(cats.subject),
             action: enumArray(cats.action),
             emotion: enumArray(cats.emotion),
@@ -161,6 +162,7 @@ export class ClipModelClient {
             console.warn(`[clips] tag failed (${this.provider}) @${input.scene.start_time_sec.toFixed(1)}s: ${message}`);
             return {
                 tags: {
+                    content_type: [],
                     subject: [],
                     action: [],
                     emotion: [],
@@ -238,6 +240,7 @@ export class ClipModelClient {
         const cats = getTaxonomy(this.taxonomyVersion).categories;
         const opt = (values) => z.array(z.enum(values)).optional();
         const schema = z.object({
+            content_type: opt(cats.content_type),
             subject: opt(cats.subject),
             action: opt(cats.action),
             emotion: opt(cats.emotion),
@@ -307,6 +310,7 @@ export function buildClipEmbeddingText(tags, description) {
     if (tags.transcript)
         parts.push(`Transcript: ${tags.transcript}`);
     const tagBits = [
+        ...(tags.content_type ?? []),
         ...tags.subject,
         ...tags.action,
         ...tags.emotion,
@@ -339,6 +343,7 @@ export function buildTaggingPrompt(transcript, version, hasAudio = false, guidan
         taxonomyForPrompt(version),
         "",
         "Rules:",
+        "- `content_type` is the single most important tag: what KIND of shot is this? Pick the 1-2 best from talking_head (a person speaking to camera), b_roll (supporting/cutaway footage with no one addressing the camera), product_shot (a product is the focus), screen_recording (a screen/app/UI capture), demo (showing how something works), reaction (someone reacting), interview (two+ people in conversation), establishing (a wide scene-setting shot), lifestyle (ambient real-life moment), text_graphic (text card / motion graphic). Always set at least one when you can tell.",
         "- Pick only tags you are confident about from the keyframes/audio. Omit a category (empty list) rather than guess.",
         "- If there is no clear person/subject, use subject: [\"no_subject\"].",
         "- If there is no speech, set audio_type appropriately (e.g. music/ambient/silence) and leave transcript empty.",