An admin area a phone could reach and not navigate

Administration has a nav of its own rather than the chat sidebar, and 1.1.0
gave every `.sidebar` the drawer behaviour -- starts closed, slides in --
without giving that one any of the drawer's furniture. No id for the toggle to
resolve, no toggle, no close, no scrim: it sat at left:-280 with nothing in the
application able to open it. The close button and the scrim are partials now,
used by both, and the test that guards it *finds* sidebars by scanning the
templates rather than working from a list, which is exactly why this one was
missed.

The chat, measured at 390px, spent forty pixels of side padding and a
forty-four pixel avatar column before drawing a word -- close to a quarter of
the screen on margin, so anything that could not wrap had to be reached
sideways. Padding halved and the avatar moved above the turn; a code block
gained about sixty pixels.

Worse in the same row: `.topbar__actions` asked for 317px of a 390px bar,
because the control that used to give in that row is display:none below a
tablet width, so the group went rigid and the title -- flex: 1 -- was squeezed
to exactly zero. And `.btn--icon` sets a width with no `flex: none`, so the row
shrank the button instead of the text: the sidebar toggle measured eighteen
pixels across. The picker gives now, and shows its avatar rather than its name
on a phone.

Also the instrument, which lied twice more: it could not see horizontal
overflow at all, because `.shell` is overflow:hidden and its "is this
contained" test therefore answered yes for everything on the page; and run from
a copy it resolved `STATIC` to a directory that did not exist, rewrote every
asset URL to a dead file:// path and reported the whole application overflowing
by thirty thousand pixels. It resolves from the imported package now and
asserts that what it rewrote to is really there.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/lembas/web/static/css/chat.css

@@ -1726,3 +1726,52 @@
 .thread__intro > * { animation: intro-rise var(--dur-3) var(--ease-out) both; }
 .thread__intro > *:nth-child(2) { animation-delay: 60ms; }
 .thread__intro > *:nth-child(3) { animation-delay: 120ms; }
+
+/*
+  --- A phone ----------------------------------------------------------------
+
+  The one width-aware block in this file, and the reason the blanket ban on
+  `@media` here was lifted: everything below is a *size*, and there is no
+  intrinsic-sizing trick that makes 24px of thread padding the right amount on
+  a 390px screen. The ban existed to stop the composer toolbar being "fixed"
+  with a breakpoint instead of by saying which child gives, and that guarantee
+  is asserted directly now (`tests/test_chat.py`) -- so this block may not touch
+  `.composer__toolbar` or `.composer__actions`, and a test refuses it if it
+  does.
+
+  What was wrong: a 390px screen spent 40px of its width on thread padding and
+  another 44 on the avatar gutter before a single word was drawn, which is
+  nearly a quarter of the screen given over to margin -- so anything that could
+  not wrap had to be scrolled to sideways.
+*/
+@media (max-width: 48rem) {
+  /* Half the horizontal padding. The vertical stays: it is what separates one
+     turn from the next, and turns are no closer together on a phone. */
+  .thread {
+    padding-left: var(--sp-3);
+    padding-right: var(--sp-3);
+  }
+
+  /* The avatar goes to the top of the turn rather than beside it, so the body
+     gets the whole width. The gutter is what identifies the speaker and it
+     still does; it simply stops costing 44px of every line. */
+  .msg {
+    grid-template-columns: 1fr;
+    gap: var(--sp-2);
+  }
+  .msg__gutter {
+    width: var(--control-h-sm);
+    height: var(--control-h-sm);
+  }
+  .msg__meta { gap: var(--sp-2); }
+
+  /* A bubble against the edge of the screen wants less inside it. */
+  .msg--user .msg__body--plain { padding: var(--sp-2) var(--sp-3); }
+
+  /* The composer is the other thing pressed against both edges. */
+  .composer { padding-left: var(--sp-2); padding-right: var(--sp-2); }
+
+  /* A hint that runs to four lines on a phone is a hint nobody reads, and it
+     sits directly under the thing a thumb is reaching for. */
+  .composer__hint { font-size: var(--text-xs); }
+}