feat(ui): responsive + WCAG AA polish pass across chat and sources — v1 feature complete

frontend/assets/styles.css

@@ -172,6 +172,10 @@ body {
 }
 .msg-body {
   max-width: 85%;
+  /* min-width: 0 — as a flex item this overrides min-width:auto so a
+     long unbroken token can wrap (overflow-wrap: anywhere) instead of
+     widening the bubble past the column (AC7, phase 07). */
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
@@ -235,6 +239,8 @@ body {
   padding: 0.15rem 0.6rem;
   text-decoration: none;
   max-width: 100%;
+  /* min-width: 0 so the nowrap pill ellipsizes instead of widening its row */
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -252,6 +258,13 @@ body {
   gap: 0.45rem;
   padding-inline: 0.25rem;
 }
+/* As flex items these chips must be allowed to shrink (min-width:auto
+   would let a long title-derived chip exceed the column on phones —
+   phase 07 overflow fix); the label text then wraps inside the pill. */
+.maybe-try .suggestion-chip {
+  min-width: 0;
+  max-width: 100%;
+}
 
 /* typing indicator */
 .typing { display: inline-flex; gap: 5px; padding: 0.9rem 1rem; }
@@ -334,8 +347,6 @@ body {
   padding: 0.55rem 0.5rem;
   background: transparent;
 }
-.composer textarea:focus { outline: none; }
-
 .send-btn {
   display: inline-flex;
   align-items: center;