studio-chat: keep renders reachable on mobile (library becomes a bottom strip)

On a phone (<=820px) the library rail was display:none, so a user could chat and
dispatch renders but never see them. Now the body stacks (chat fills, library
drops under it) and the rail shows as a compact scrollable bottom strip — but only
when there is something to show (jobs or assets set the `active` class), so the
empty chat state stays clean. Verified with Playwright at iPhone 14 (390x844):
empty = clean chat; with renders = 4-col strip under the composer, no overflow.

web/src/App.tsx

@@ -92,7 +92,7 @@ export function App() {
           </div>
         </section>
 
-        <aside className="rail">
+        <aside className={`rail${assets.length || jobs.length ? ' active' : ''}`}>
           {jobs.length > 0 && (
             <div className="queue">
               <div className="rail-h">Rendering ({jobs.length})</div>

web/src/styles.css

@@ -42,7 +42,13 @@ body { background: var(--bg); color: var(--text); font: 15px/1.5 -apple-system,
 .empty { color: var(--dim); font-size: 13px; }
 
 @media (max-width: 820px) {
-  .body { grid-template-columns: 1fr; }
-  .rail { display: none; }
+  /* Chat fills; the library drops UNDER it as a compact strip so renders stay
+     reachable on a phone. Empty (no jobs, no assets) it hides entirely — the
+     `active` class is set only when there is something to show — so the empty
+     chat state stays clean. */
+  .body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
   .chat { border-right: 0; }
+  .rail { display: none; }
+  .rail.active { display: block; border-top: 1px solid var(--line); max-height: 42vh; overflow-y: auto; }
+  .rail.active .grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
 }