chat: the copy buttons sit on the code block, bottom right

they were sticky at the top, which put them over the first line — and on a
one-line block, which is most of them in a chat, over the whole thing.

absolute bottom-right inside the surface now, with `.code-surface` given the
`position: relative` it never had. that omission is why a control could end up
escaping to the nearest positioned ancestor and floating below the block it
belongs to.

`padding-bottom` on the pre to go with the existing `padding-right`: the last
line is the one they overlap now, and it needs its own room the same way the
first line needed it before.

the trade the old comment was worried about is real but smaller than it reads:
a block taller than the viewport now has its controls at the bottom rather
than the top. that is where you end up after reading it anyway, and it is a
worse place to be only for a block you never scroll — which is exactly the
block whose first line the old position was covering.

src/apps/officer-web/styles/prose.css

@@ -169,8 +169,11 @@
 .code-surface pre {
   margin: 0;
   padding: 0.75em 1em;
-  /* Room for the two copy buttons, so a long first line scrolls up to them rather than under them. */
+  /* Room for the copy controls, which sit absolutely at the bottom-right of the block. Horizontal so a
+     long line scrolls past them rather than under them; vertical so the LAST line — the one they now
+     overlap — keeps its own space. */
   padding-right: 5.5em;
+  padding-bottom: 2em;
   border-radius: 0.5rem;
   background: #0d1117;
   /* Scroll, never wrap: wrapping folds `ls -la`, `git log --oneline` and any other columnar output into
@@ -186,6 +189,12 @@
   padding-right: 10em;
 }
 
+/* The positioning context for those controls. Without it they escape to the nearest positioned ancestor,
+   which is how a copy button ends up floating below the block it belongs to. */
+.code-surface {
+  position: relative;
+}
+
 .code-surface pre code {
   padding: 0;
   border-radius: 0;