feat: Redesign UI with consistent card styling and mobile header

- Updated track page cards to match home page styling with vibrant colors
- Applied consistent 140px height cards across track and insights pages
- Added mobile header bar with connection status and user menu
- Moved user menu from floating top-left to fixed header top-right
- Updated insights dashboard with home page color palette (#E91E63, #1976D2, etc.)
- Centered cards with minWidth constraints (200px for stats, 400px for charts)
- Fixed hydration mismatch by replacing JS media queries with CSS breakpoints
- Improved accessibility with viewport settings (removed zoom restrictions)
- Added UI improvements documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

maternal-web/components/features/ai-chat/AIChatInterface.tsx

@@ -408,7 +408,13 @@ export const AIChatInterface: React.FC = () => {
           variant="contained"
           startIcon={<Add />}
           onClick={handleNewConversation}
-          sx={{ borderRadius: 2 }}
+          sx={{
+            borderRadius: 2,
+            textTransform: 'none',
+            bgcolor: 'primary.light',
+            color: 'primary.main',
+            '&:hover': { bgcolor: 'primary.main', color: 'white' }
+          }}
         >
           {t('chat.newChat')}
         </Button>
@@ -621,10 +627,15 @@ export const AIChatInterface: React.FC = () => {
                     label={question}
                     onClick={() => handleSuggestedQuestion(question)}
                     sx={{
-                      borderRadius: 3,
+                      py: 2,
+                      borderRadius: 2,
+                      fontSize: '0.875rem',
+                      bgcolor: 'background.paper',
+                      border: 1,
+                      borderColor: 'divider',
                       '&:hover': {
                         bgcolor: 'primary.light',
-                        color: 'white',
+                        borderColor: 'primary.main',
                       },
                     }}
                   />
@@ -776,6 +787,9 @@ export const AIChatInterface: React.FC = () => {
               sx={{
                 '& .MuiOutlinedInput-root': {
                   borderRadius: 3,
+                  bgcolor: 'background.default',
+                  '&:hover fieldset': { borderColor: 'primary.main' },
+                  '&.Mui-focused fieldset': { borderColor: 'primary.main' }
                 },
               }}
             />