feat(chat): Refactor chat input styling and remove compact mode

lib/features/chat/views/chat_page.dart

@@ -8,6 +8,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_animate/flutter_animate.dart';
 import 'dart:io' show Platform;
+import 'dart:ui' show ImageFilter;
 import '../../../shared/widgets/responsive_drawer_layout.dart';
 import '../../navigation/widgets/chats_drawer.dart';
 import 'dart:async';
@@ -968,6 +969,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
     // Use slivers to align with the actual messages view.
     // Do not attach the primary scroll controller here to avoid
     // AnimatedSwitcher attaching the same controller twice.
+    // Add bottom padding to account for floating input overlay.
+    final bottomPadding = Spacing.lg + _inputHeight;
     return CustomScrollView(
       key: const ValueKey('loading_messages'),
       controller: null,
@@ -976,11 +979,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
       cacheExtent: 300,
       slivers: [
         SliverPadding(
-          padding: const EdgeInsets.fromLTRB(
+          padding: EdgeInsets.fromLTRB(
             Spacing.lg,
             Spacing.md,
             Spacing.lg,
-            Spacing.lg,
+            bottomPadding,
           ),
           sliver: SliverList(
             delegate: SliverChildBuilderDelegate((context, index) {
@@ -1097,6 +1100,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
       });
     }
 
+    // Add bottom padding to account for floating input overlay.
+    final bottomPadding = Spacing.lg + _inputHeight;
     return CustomScrollView(
       key: const ValueKey('actual_messages'),
       controller: _scrollController,
@@ -1105,11 +1110,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
       cacheExtent: 600,
       slivers: [
         SliverPadding(
-          padding: const EdgeInsets.fromLTRB(
+          padding: EdgeInsets.fromLTRB(
             Spacing.lg,
             Spacing.md,
             Spacing.lg,
-            Spacing.lg,
+            bottomPadding,
           ),
           sliver: OptimizedSliverList<ChatMessage>(
             items: messages,
@@ -1349,6 +1354,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
     final greetingText = resolvedGreetingName != null
         ? l10n.onboardStartTitle(resolvedGreetingName)
         : null;
+    // Add bottom padding to account for floating input overlay.
+    final bottomPadding = _inputHeight;
     return LayoutBuilder(
       builder: (context, constraints) {
         final greetingDisplay = greetingText ?? '';
@@ -1360,7 +1367,12 @@ class _ChatPageState extends ConsumerState<ChatPage> {
             width: double.infinity,
             height: constraints.maxHeight,
             child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: Spacing.lg),
+              padding: EdgeInsets.fromLTRB(
+                Spacing.lg,
+                0,
+                Spacing.lg,
+                bottomPadding,
+              ),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 crossAxisAlignment: CrossAxisAlignment.center,
@@ -1964,26 +1976,20 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                   },
                   child: Stack(
                     children: [
-                      Column(
+                      // Messages Area fills entire space with pull-to-refresh
-                        children: [
+                      Positioned.fill(
-                          // Messages Area with pull-to-refresh
-                          Expanded(
                         child: ConduitRefreshIndicator(
                           onRefresh: () async {
                             // Reload active conversation messages from server
                             final api = ref.read(apiServiceProvider);
-                                final active = ref.read(
+                            final active = ref.read(activeConversationProvider);
-                                  activeConversationProvider,
-                                );
                             if (api != null && active != null) {
                               try {
                                 final full = await api.getConversation(
                                   active.id,
                                 );
                                 ref
-                                        .read(
+                                    .read(activeConversationProvider.notifier)
-                                          activeConversationProvider.notifier,
-                                        )
                                     .set(full);
                               } catch (e) {
                                 DebugLogger.log(
@@ -2023,12 +2029,12 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                         ),
                       ),
 
-                          // File attachments
+                      // Floating input area with attachments and blur background
-                          const FileAttachmentWidget(),
+                      Positioned(
-                          const ContextAttachmentWidget(),
+                        left: 0,
-
+                        right: 0,
-                          // Modern Input (root matches input background including safe area)
+                        bottom: 0,
-                          RepaintBoundary(
+                        child: RepaintBoundary(
                           child: MeasureSize(
                             onChange: (size) {
                               if (mounted) {
@@ -2037,7 +2043,34 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                 });
                               }
                             },
-                              child: ModernChatInput(
+                            child: Container(
+                              decoration: BoxDecoration(
+                                // Gradient fade from transparent to solid background
+                                gradient: LinearGradient(
+                                  begin: Alignment.topCenter,
+                                  end: Alignment.bottomCenter,
+                                  stops: const [0.0, 0.4, 1.0],
+                                  colors: [
+                                    theme.scaffoldBackgroundColor.withValues(
+                                      alpha: 0.0,
+                                    ),
+                                    theme.scaffoldBackgroundColor.withValues(
+                                      alpha: 0.85,
+                                    ),
+                                    theme.scaffoldBackgroundColor,
+                                  ],
+                                ),
+                              ),
+                              child: Column(
+                                mainAxisSize: MainAxisSize.min,
+                                children: [
+                                  // Top padding for gradient fade area
+                                  const SizedBox(height: Spacing.xl),
+                                  // File attachments
+                                  const FileAttachmentWidget(),
+                                  const ContextAttachmentWidget(),
+                                  // Modern Input
+                                  ModernChatInput(
                                     onSendMessage: (text) =>
                                         _handleMessageSend(text, selectedModel),
                                     onVoiceInput: null,
@@ -2045,14 +2078,19 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                     onFileAttachment: _handleFileAttachment,
                                     onImageAttachment: _handleImageAttachment,
                                     onCameraCapture: () =>
-                                    _handleImageAttachment(fromCamera: true),
+                                        _handleImageAttachment(
+                                          fromCamera: true,
+                                        ),
                                     onWebAttachment: _promptAttachWebpage,
-                                onPastedAttachments: _handlePastedAttachments,
+                                    onPastedAttachments:
-                              ),
+                                        _handlePastedAttachments,
-                            ),
                                   ),
                                 ],
                               ),
+                            ),
+                          ),
+                        ),
+                      ),
 
                       // Floating Scroll to Bottom Button with smooth appear/disappear
                       Positioned(
@@ -2093,16 +2131,37 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                     borderRadius: BorderRadius.circular(
                                       AppBorderRadius.floatingButton,
                                     ),
+                                    child: BackdropFilter(
+                                      filter: ImageFilter.blur(
+                                        sigmaX: 16,
+                                        sigmaY: 16,
+                                      ),
                                       child: Container(
                                         decoration: BoxDecoration(
+                                          // Use same high-contrast colors as floating input
+                                          color:
+                                              theme.brightness ==
+                                                  Brightness.dark
+                                              ? Color.lerp(
+                                                  context
+                                                      .conduitTheme
+                                                      .cardBackground,
+                                                  Colors.white,
+                                                  0.08,
+                                                )!.withValues(alpha: 0.85)
+                                              : Color.lerp(
+                                                  context
+                                                      .conduitTheme
+                                                      .inputBackground,
+                                                  Colors.black,
+                                                  0.06,
+                                                )!.withValues(alpha: 0.85),
+                                          border: Border.all(
                                             color: context
                                                 .conduitTheme
-                                            .surfaceContainerHighest
+                                                .cardBorder
-                                            .withValues(alpha: 0.75),
+                                                .withValues(alpha: 0.55),
-                                        border: Border.all(
+                                            width: BorderWidth.thin,
-                                          color: context.conduitTheme.cardBorder
-                                              .withValues(alpha: 0.3),
-                                          width: BorderWidth.regular,
                                           ),
                                           borderRadius: BorderRadius.circular(
                                             AppBorderRadius.floatingButton,
@@ -2131,6 +2190,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
                                         ),
                                       ),
                                     ),
+                                  ),
                                 )
                               : const SizedBox.shrink(
                                   key: ValueKey('scroll_to_bottom_hidden'),

lib/features/chat/widgets/modern_chat_input.dart

@@ -9,7 +9,6 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'dart:io' show Platform;
 import 'dart:async';
-import 'dart:ui';
 import 'dart:math' as math;
 import '../providers/chat_providers.dart';
 import '../services/clipboard_attachment_service.dart';
@@ -1073,10 +1072,10 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
 
     final Brightness brightness = Theme.of(context).brightness;
     final bool isActive = _focusNode.hasFocus || _hasText;
-    final Color composerSurface = context.conduitTheme.inputBackground;
+    // Use high-contrast background for floating input
     final Color composerBackground = brightness == Brightness.dark
-        ? composerSurface.withValues(alpha: 0.78)
+        ? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
-        : context.conduitTheme.surfaceContainerHighest;
+        : Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
     final Color placeholderBase = context.conduitTheme.inputText.withValues(
       alpha: 0.64,
     );
@@ -1087,7 +1086,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
       context.conduitTheme.inputBorder,
       context.conduitTheme.inputBorderFocused,
       isActive ? 1.0 : 0.0,
-    )!.withValues(alpha: brightness == Brightness.dark ? 0.55 : 0.45);
+    )!.withValues(alpha: brightness == Brightness.dark ? 0.65 : 0.55);
     final Color shellShadowColor = context.conduitTheme.cardShadow.withValues(
       alpha: brightness == Brightness.dark
           ? 0.22 + (isActive ? 0.08 : 0.0)
@@ -1209,14 +1208,10 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
     );
 
     final BoxDecoration shellDecoration = BoxDecoration(
-      color: showCompactComposer ? Colors.transparent : composerBackground,
+      color: composerBackground,
       borderRadius: shellRadius,
-      border: showCompactComposer
+      border: Border.all(color: outlineColor, width: BorderWidth.thin),
-          ? null
+      boxShadow: <BoxShadow>[
-          : Border.all(color: outlineColor, width: BorderWidth.thin),
-      boxShadow: showCompactComposer
-          ? const <BoxShadow>[]
-          : <BoxShadow>[
         BoxShadow(
           color: shellShadowColor,
           blurRadius: 12 + (isActive ? 4 : 0),
@@ -1238,82 +1233,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
           ),
           child: _buildPromptOverlay(context),
         ),
-      if (showCompactComposer)
+      if (!showCompactComposer) ...[
-        Padding(
-          key: const ValueKey('composer-compact'),
-          padding: const EdgeInsets.fromLTRB(
-            Spacing.screenPadding,
-            Spacing.xs,
-            Spacing.screenPadding,
-            Spacing.sm,
-          ),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.end,
-            children: [
-              _buildOverflowButton(
-                tooltip: AppLocalizations.of(context)!.more,
-                webSearchActive: webSearchEnabled,
-                imageGenerationActive: imageGenEnabled,
-                toolsActive: selectedToolIds.isNotEmpty,
-                filtersActive: selectedFilterIds.isNotEmpty,
-              ),
-              const SizedBox(width: Spacing.sm),
-              Expanded(
-                child: ConstrainedBox(
-                  constraints: BoxConstraints(
-                    maxHeight: MediaQuery.of(context).size.height * 0.25,
-                  ),
-                  child: AnimatedContainer(
-                    duration: const Duration(milliseconds: 180),
-                    curve: Curves.easeOutCubic,
-                    padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
-                    constraints: const BoxConstraints(
-                      minHeight: TouchTarget.input,
-                    ),
-                    decoration: BoxDecoration(
-                      color: composerSurface.withValues(
-                        alpha: brightness == Brightness.dark ? 0.9 : 0.2,
-                      ),
-                      borderRadius: BorderRadius.circular(_composerRadius),
-                      border: Border.all(
-                        color: outlineColor.withValues(
-                          alpha: brightness == Brightness.dark ? 0.32 : 0.2,
-                        ),
-                        width: BorderWidth.micro,
-                      ),
-                    ),
-                    child: Row(
-                      children: [
-                        Expanded(
-                          child: _buildComposerTextField(
-                            brightness: brightness,
-                            sendOnEnter: sendOnEnter,
-                            placeholderBase: placeholderBase,
-                            placeholderFocused: placeholderFocused,
-                            contentPadding: const EdgeInsets.symmetric(
-                              vertical: Spacing.xs,
-                            ),
-                            isActive: isActive,
-                          ),
-                        ),
-                        if (!_hasText && voiceAvailable && !isGenerating)
-                          _buildInlineMicIcon(voiceAvailable),
-                      ],
-                    ),
-                  ),
-                ),
-              ),
-              const SizedBox(width: Spacing.sm),
-              _buildPrimaryButton(
-                _hasText,
-                isGenerating,
-                stopGeneration,
-                voiceAvailable,
-              ),
-            ],
-          ),
-        )
-      else ...[
         Padding(
           key: const ValueKey('composer-expanded-input'),
           padding: const EdgeInsets.fromLTRB(
@@ -1405,14 +1325,77 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
       ],
     ];
 
+    // For compact mode, render text field shell with floating buttons on sides
+    if (showCompactComposer) {
+      // Build the text field shell
+      Widget textFieldShell = AnimatedContainer(
+        duration: const Duration(milliseconds: 180),
+        curve: Curves.easeOutCubic,
+        padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
+        constraints: const BoxConstraints(minHeight: TouchTarget.input),
+        decoration: shellDecoration,
+        child: ConstrainedBox(
+          constraints: BoxConstraints(
+            maxHeight: MediaQuery.of(context).size.height * 0.25,
+          ),
+          child: Row(
+            children: [
+              Expanded(
+                child: _buildComposerTextField(
+                  brightness: brightness,
+                  sendOnEnter: sendOnEnter,
+                  placeholderBase: placeholderBase,
+                  placeholderFocused: placeholderFocused,
+                  contentPadding: const EdgeInsets.symmetric(
+                    vertical: Spacing.xs,
+                  ),
+                  isActive: isActive,
+                ),
+              ),
+              if (!_hasText && voiceAvailable && !isGenerating)
+                _buildInlineMicIcon(voiceAvailable),
+            ],
+          ),
+        ),
+      );
+
+      final bottomPadding = MediaQuery.of(context).viewPadding.bottom;
+      return Padding(
+        padding: EdgeInsets.fromLTRB(
+          Spacing.screenPadding,
+          0,
+          Spacing.screenPadding,
+          bottomPadding + Spacing.md,
+        ),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            _buildOverflowButton(
+              tooltip: AppLocalizations.of(context)!.more,
+              webSearchActive: webSearchEnabled,
+              imageGenerationActive: imageGenEnabled,
+              toolsActive: selectedToolIds.isNotEmpty,
+              filtersActive: selectedFilterIds.isNotEmpty,
+            ),
+            const SizedBox(width: Spacing.sm),
+            Expanded(child: textFieldShell),
+            const SizedBox(width: Spacing.sm),
+            _buildPrimaryButton(
+              _hasText,
+              isGenerating,
+              stopGeneration,
+              voiceAvailable,
+            ),
+          ],
+        ),
+      );
+    }
+
+    // For expanded mode with quick pills, use the full shell
     Widget shell = AnimatedContainer(
       duration: const Duration(milliseconds: 180),
       curve: Curves.easeOutCubic,
       decoration: shellDecoration,
-      width: double.infinity,
-      child: SafeArea(
-        top: false,
-        bottom: true,
       child: ConstrainedBox(
         constraints: BoxConstraints(
           maxHeight: MediaQuery.of(context).size.height * 0.4,
@@ -1432,23 +1415,18 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
           ),
         ),
       ),
-      ),
     );
 
-    if (brightness == Brightness.dark && !showCompactComposer) {
+    // Wrap with padding for floating effect, accounting for safe area
-      shell = ClipRRect(
+    final bottomPadding = MediaQuery.of(context).viewPadding.bottom;
-        borderRadius: shellRadius,
+    return Padding(
-        child: BackdropFilter(
+      padding: EdgeInsets.fromLTRB(
-          filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
+        Spacing.sm,
+        0,
+        Spacing.sm,
+        bottomPadding + Spacing.md,
+      ),
       child: shell,
-        ),
-      );
-    }
-
-    return Container(
-      color: Colors.transparent,
-      padding: EdgeInsets.zero,
-      child: Column(mainAxisSize: MainAxisSize.min, children: [shell]),
     );
   }
 
@@ -1688,9 +1666,11 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
         : (activeColor ??
               context.conduitTheme.textPrimary.withValues(alpha: Alpha.strong));
 
+    // Use high-contrast background for floating button
     final Brightness brightness = Theme.of(context).brightness;
-    final Color baseBackground = context.conduitTheme.inputBackground
+    final Color baseBackground = brightness == Brightness.dark
-        .withValues(alpha: brightness == Brightness.dark ? 0.9 : 0.2);
+        ? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
+        : Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
     final Color backgroundColor = !enabled
         ? baseBackground.withValues(alpha: Alpha.disabled)
         : isActive