fix(chat): align the message column with the input box

The input sat a few pixels right of the messages above it. `scrollbar-on-scroll`
reserves the scrollbar gutter with `scrollbar-gutter: stable`, which puts the
whole 8px on the end edge, so the scroller's content box is asymmetric and the
centered message column lands half a scrollbar to the left. The input is
centered in the full width, outside that scroller, so the two never matched.

Reserving the gutter on both edges makes the box symmetric again and the two
columns share a centre. Applied inline rather than as a utility class:
`.scrollbar-on-scroll` is plain CSS declared after `@tailwind utilities`, so at
equal specificity it wins on source order and the class form had no effect.

src/frontend/client/src/components/Chat/AiChatMessages.tsx

@@ -371,6 +371,16 @@ export default function AiChatMessages({
                     scrollRef.current = el;
                     messagesScrollRevealRef(el);
                 }}
+                // `scrollbar-on-scroll` reserves the scrollbar gutter with
+                // `scrollbar-gutter: stable`, i.e. entirely on the end edge. That
+                // makes this box asymmetric, so the centered message column sits
+                // half a scrollbar left of the input below it — the input is
+                // centered in the full width, outside this scroller. Reserving on
+                // both edges restores a symmetric box and the two columns line up.
+                // Set inline, not as a utility class: `.scrollbar-on-scroll` is
+                // plain CSS declared after `@tailwind utilities`, so at equal
+                // specificity it would win on source order.
+                style={{ scrollbarGutter: "stable both-edges" }}
                 className={cn(
                     "min-h-0 flex-1 overflow-y-auto scrollbar-on-scroll",
                     hideHeaderTitle