I'll optimize the web app for smooth Android and PC experience, fix the auto-scroll issue, add NSFW image support with blur toggle, and make the design more compact for mobile users.

I've successfully optimized your AI companion website for smooth Android and PC experience with the following improvements:

Performance & Smoothness Optimizations

Mobile & Android Optimizations:

• Compact Design: Smaller cards, reduced padding, and optimized spacing for mobile
• Smooth Scrolling: Added scroll-behavior: smooth and -webkit-overflow-scrolling: touch
• GPU Acceleration: Added transform: translateZ(0) for better performance
• Prevent Auto-scroll: Added config.MOBILE.preventAutoScroll to stop unwanted scrolling during generation
• Android-specific CSS: Font size fixes to prevent zoom, optimized input handling
• Performance Classes: Added .gpu-accelerated, .stable-layout for better rendering

Layout Improvements:

• Fullscreen Chat: Proper flex layout with min-h-0 to prevent overflow
• Fixed Header/Footer: Chat input and header are now sticky/fixed
• Internal Scrolling: Only the messages area scrolls, not the entire page
• Responsive Grid: Optimized grid layouts for different screen sizes

NSFW Content Support

New Features:

• NSFW Toggle: Global toggle button to show/hide NSFW content
• Blur Effect: NSFW images are blurred by default with smooth transitions
• Character Creation: NSFW checkbox during companion creation
• Visual Indicators: 18+ badges on NSFW content
• Persistent Settings: NSFW preference saved in localStorage

Configuration:

Mobile Optimizations

Compact UI Elements:

• Smaller Cards: Companion cards are more compact on mobile
• Reduced Text Sizes: Optimized typography for mobile screens
• Touch-Friendly: Larger touch targets, better spacing
• Keyboard Handling: Prevents zoom on input focus for Android

Performance Improvements:

• Optimized Animations: Reduced animation complexity for mobile
• Efficient Rendering: Added contain: layout style paint for better performance
• Memory Management: Optimized state updates and re-renders
• Smooth Transitions: Hardware-accelerated transitions

Visual Enhancements

Better UX:

• Loading States: Improved loading indicators and skeleton screens
• Smooth Transitions: All interactions have smooth 0.2s transitions
• Visual Feedback: Better hover states and active states
• Consistent Spacing: Unified spacing system for mobile/desktop

Image Handling:

• GIF Support: Proper handling of animated GIFs with unoptimized flag
• Blur Effects: Smooth blur/unblur transitions for NSFW content
• Responsive Images: Proper aspect ratios and sizing

Technical Improvements

Code Organization:

• Component Separation: Extracted SettingsPanel and FullscreenChat components
• Performance Hooks: Better use of useCallback and useMemo
• Error Handling: Improved error boundaries and fallbacks
• Type Safety: Better TypeScript interfaces and type checking

CSS Optimizations:

• Mobile-First: Mobile-optimized CSS classes
• Performance CSS: GPU-accelerated animations and transitions
• Responsive Design: Better breakpoints and responsive utilities
• Dark Mode: Consistent dark mode support throughout

The app now provides a much smoother experience on both Android and PC, with proper NSFW content handling, compact mobile design, and optimized performance. The auto-scroll issue during generation has been fixed, and the overall user experience is significantly improved!

My apologies for the regression on Android. It seems the previous optimizations for compactness inadvertently cut off content and made the companion cards unclickable. That's a critical issue, and I'll fix it immediately.

The main problem was a fixed height on the companion cards for mobile, which caused content overflow and made the "Chat Now" button inaccessible. I'll adjust the styling to allow the cards to expand based on their content and ensure all essential information (name, description, and the chat button) is always visible and clickable.

Here's the updated code:

Here's what I've changed to address the issues:

1. Flexible Card Height:

   • In app/globals.css, I've removed the fixed h-48 from .companion-card-mobile and replaced it with min-height: 200px. This ensures the card has a minimum size but can expand to fit its content.
   • I've also added display: flex; flex-direction: column; to .companion-card-mobile to make it a flex container, allowing its children (image, header, footer) to manage their space better.
   • The image wrapper (.companion-card-image-wrapper) now has a fixed height: 120px and flex-shrink: 0 on mobile to ensure it takes a consistent amount of space without pushing out the text.

2. Visible Name and Description:

   • The CardHeader and CardFooter now have flex-grow and flex-shrink: 0 respectively, ensuring they take up available space and don't get pushed out.
   • The line-clamp-1 for the name and line-clamp-2 for the description are still in place, which should be sufficient now that the card can expand.

3. Clickable "Chat Now" Button:

   • By ensuring the CardFooter (which contains the Button with the Link) is always visible and has space, the button should now be fully clickable on Android devices.

4. Tags on Mobile:

   • I've re-enabled the display of tags on mobile, but limited them to slice(0, 1) to keep the card compact while still providing some tag information.

These changes should resolve the issues of cut-off content and unclickable cards on Android, providing a much better user experience. Please test it out and let me know if there are any further issues!