fix(ai-chat): fit full role-card description text in new-chat empty state

The colored role cards in the AI chat empty state truncated their
admin-configured description with an ellipsis and could clip the top row
when the cards overflowed. Make the full text fit:

- drop the description lineClamp so the whole text renders
- add overflow-wrap: anywhere so long unbreakable tokens (URLs) wrap
- switch the cards container to align-content: flex-start so an
  overflowing top row stays reachable while scrolling (the parent
  Mantine Center still vertically centers the block when it fits)
- widen the card max-width 180px -> 200px for more text room

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

apps/client/src/features/ai-chat/components/role-cards.module.css

@@ -4,7 +4,11 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  align-content: center;
+  /* flex-start keeps the first row reachable when the wrapped cards overflow and
+     the container scrolls. With align-content: center, an overflowing top row is
+     pushed out of the scrollable area and becomes unreachable. The parent Mantine
+     Center still vertically centers the whole block when it fits. */
+  align-content: flex-start;
   gap: 10px;
   /* Cap the height so a large number of roles scrolls instead of blowing out
      the empty chat area. */
@@ -21,7 +25,7 @@
   justify-content: center;
   gap: 4px;
   min-width: 140px;
-  max-width: 180px;
+  max-width: 200px;
   min-height: 90px;
   padding: 12px 10px;
   border-radius: var(--mantine-radius-md);
@@ -50,4 +54,8 @@
 .description {
   opacity: 0.8;
   line-height: 1.3;
+  /* Break long unbreakable tokens (URLs, long foreign words) in the
+     admin-configured description so they wrap instead of overflowing the card
+     width now that the line clamp no longer caps the text. */
+  overflow-wrap: anywhere;
 }

apps/client/src/features/ai-chat/components/role-cards.tsx

@@ -45,7 +45,7 @@ function RoleCard({
         {name}
       </Text>
       {description && (
-        <Text size="xs" lineClamp={3} className={classes.description}>
+        <Text size="xs" className={classes.description}>
           {description}
         </Text>
       )}