✨ Scroll gradiant to think as well

lib/screens/chat/room.dart

@@ -1,4 +1,5 @@
 import "dart:async";
+import "dart:math" as math;
 import "package:easy_localization/easy_localization.dart";
 import "package:file_picker/file_picker.dart";
 import "package:flutter/material.dart";
@@ -140,6 +141,9 @@ class ChatRoomScreen extends HookConsumerWidget {
     final messageController = useTextEditingController();
     final scrollController = useScrollController();
 
+    // Scroll animation notifiers
+    final bottomGradientNotifier = useState(ValueNotifier<double>(0.0));
+
     final messageReplyingTo = useState<SnChatMessage?>(null);
     final messageForwardingTo = useState<SnChatMessage?>(null);
     final messageEditingTo = useState<SnChatMessage?>(null);
@@ -164,6 +168,12 @@ class ChatRoomScreen extends HookConsumerWidget {
           isLoading = true;
           messagesNotifier.loadMore().then((_) => isLoading = false);
         }
+
+        // Update gradient animations
+        final pixels = scrollController.position.pixels;
+
+        // Bottom gradient: appears when not at bottom (pixels > 0)
+        bottomGradientNotifier.value.value = (pixels / 500.0).clamp(0.0, 1.0);
       }
 
       scrollController.addListener(onScroll);
@@ -589,7 +599,9 @@ class ChatRoomScreen extends HookConsumerWidget {
       listController: listController,
       padding: EdgeInsets.only(
         top: 16,
-        bottom: MediaQuery.of(context).padding.bottom + 16,
+        bottom:
+            MediaQuery.of(context).padding.bottom +
+            80, // Leave space for chat input
       ),
       controller: scrollController,
       reverse: true, // Show newest messages at the bottom
@@ -828,7 +840,7 @@ class ChatRoomScreen extends HookConsumerWidget {
       ),
       body: Stack(
         children: [
-          // Messages and Input in Column
+          // Messages only in Column
           Positioned.fill(
             child: Column(
               children: [
@@ -872,73 +884,6 @@ class ChatRoomScreen extends HookConsumerWidget {
                     ),
                   ),
                 ),
-                if (!isSelectionMode.value)
-                  chatRoom.when(
-                    data:
-                        (room) => Column(
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            ChatInput(
-                              messageController: messageController,
-                              chatRoom: room!,
-                              onSend: sendMessage,
-                              onClear: () {
-                                if (messageEditingTo.value != null) {
-                                  attachments.value.clear();
-                                  messageController.clear();
-                                }
-                                messageEditingTo.value = null;
-                                messageReplyingTo.value = null;
-                                messageForwardingTo.value = null;
-                              },
-                              messageEditingTo: messageEditingTo.value,
-                              messageReplyingTo: messageReplyingTo.value,
-                              messageForwardingTo: messageForwardingTo.value,
-                              onPickFile: (bool isPhoto) {
-                                if (isPhoto) {
-                                  pickPhotoMedia();
-                                } else {
-                                  pickVideoMedia();
-                                }
-                              },
-                              onPickAudio: pickAudioMedia,
-                              onPickGeneralFile: pickGeneralFile,
-                              onLinkAttachment: linkAttachment,
-                              attachments: attachments.value,
-                              onUploadAttachment: uploadAttachment,
-                              onDeleteAttachment: (index) async {
-                                final attachment = attachments.value[index];
-                                if (attachment.isOnCloud &&
-                                    !attachment.isLink) {
-                                  final client = ref.watch(apiClientProvider);
-                                  await client.delete(
-                                    '/drive/files/${attachment.data.id}',
-                                  );
-                                }
-                                final clone = List.of(attachments.value);
-                                clone.removeAt(index);
-                                attachments.value = clone;
-                              },
-                              onMoveAttachment: (idx, delta) {
-                                if (idx + delta < 0 ||
-                                    idx + delta >= attachments.value.length) {
-                                  return;
-                                }
-                                final clone = List.of(attachments.value);
-                                clone.insert(idx + delta, clone.removeAt(idx));
-                                attachments.value = clone;
-                              },
-                              onAttachmentsChanged: (newAttachments) {
-                                attachments.value = newAttachments;
-                              },
-                              attachmentProgress: attachmentProgress.value,
-                            ),
-                            Gap(MediaQuery.of(context).padding.bottom),
-                          ],
-                        ),
-                    error: (_, _) => const SizedBox.shrink(),
-                    loading: () => const SizedBox.shrink(),
-                  ),
               ],
             ),
           ),
@@ -977,6 +922,112 @@ class ChatRoomScreen extends HookConsumerWidget {
                 ),
               ),
             ),
+          // Bottom gradient - appears when scrolling towards newer messages (behind chat input)
+          if (!isSelectionMode.value)
+            AnimatedBuilder(
+              animation: bottomGradientNotifier.value,
+              builder:
+                  (context, child) => Positioned(
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    child: Opacity(
+                      opacity: bottomGradientNotifier.value.value,
+                      child: Container(
+                        height: math.min(
+                          MediaQuery.of(context).size.height * 0.1,
+                          128,
+                        ),
+                        decoration: BoxDecoration(
+                          gradient: LinearGradient(
+                            begin: Alignment.bottomCenter,
+                            end: Alignment.topCenter,
+                            colors: [
+                              Theme.of(
+                                context,
+                              ).colorScheme.surfaceContainer.withOpacity(0.8),
+                              Theme.of(
+                                context,
+                              ).colorScheme.surfaceContainer.withOpacity(0.0),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+            ),
+          // Chat Input positioned above gradient (higher z-index)
+          if (!isSelectionMode.value)
+            Positioned(
+              left: 0,
+              right: 0,
+              bottom: 0, // At the very bottom, above gradient
+              child: chatRoom.when(
+                data:
+                    (room) => Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        ChatInput(
+                          messageController: messageController,
+                          chatRoom: room!,
+                          onSend: sendMessage,
+                          onClear: () {
+                            if (messageEditingTo.value != null) {
+                              attachments.value.clear();
+                              messageController.clear();
+                            }
+                            messageEditingTo.value = null;
+                            messageReplyingTo.value = null;
+                            messageForwardingTo.value = null;
+                          },
+                          messageEditingTo: messageEditingTo.value,
+                          messageReplyingTo: messageReplyingTo.value,
+                          messageForwardingTo: messageForwardingTo.value,
+                          onPickFile: (bool isPhoto) {
+                            if (isPhoto) {
+                              pickPhotoMedia();
+                            } else {
+                              pickVideoMedia();
+                            }
+                          },
+                          onPickAudio: pickAudioMedia,
+                          onPickGeneralFile: pickGeneralFile,
+                          onLinkAttachment: linkAttachment,
+                          attachments: attachments.value,
+                          onUploadAttachment: uploadAttachment,
+                          onDeleteAttachment: (index) async {
+                            final attachment = attachments.value[index];
+                            if (attachment.isOnCloud && !attachment.isLink) {
+                              final client = ref.watch(apiClientProvider);
+                              await client.delete(
+                                '/drive/files/${attachment.data.id}',
+                              );
+                            }
+                            final clone = List.of(attachments.value);
+                            clone.removeAt(index);
+                            attachments.value = clone;
+                          },
+                          onMoveAttachment: (idx, delta) {
+                            if (idx + delta < 0 ||
+                                idx + delta >= attachments.value.length) {
+                              return;
+                            }
+                            final clone = List.of(attachments.value);
+                            clone.insert(idx + delta, clone.removeAt(idx));
+                            attachments.value = clone;
+                          },
+                          onAttachmentsChanged: (newAttachments) {
+                            attachments.value = newAttachments;
+                          },
+                          attachmentProgress: attachmentProgress.value,
+                        ),
+                        Gap(MediaQuery.of(context).padding.bottom),
+                      ],
+                    ),
+                error: (_, _) => const SizedBox.shrink(),
+                loading: () => const SizedBox.shrink(),
+              ),
+            ),
           // Selection mode toolbar
           if (isSelectionMode.value)
             Positioned(

lib/screens/posts/post_category_detail.dart

@@ -201,7 +201,7 @@ class PostCategoryDetailScreen extends HookConsumerWidget {
                                                   );
                                                 },
                                                 icon: const Icon(
-                                                  Symbols.add_circle,
+                                                  Symbols.remove_circle,
                                                 ),
                                                 label: Text('unsubscribe'.tr()),
                                               )
@@ -214,7 +214,7 @@ class PostCategoryDetailScreen extends HookConsumerWidget {
                                                   );
                                                 },
                                                 icon: const Icon(
-                                                  Symbols.remove_circle,
+                                                  Symbols.add_circle,
                                                 ),
                                                 label: Text('subscribe'.tr()),
                                               ),

lib/screens/thought/think.dart

@@ -1,4 +1,5 @@
 import "dart:convert";
+import "dart:math" as math;
 import "package:dio/dio.dart";
 import "package:easy_localization/easy_localization.dart";
 import "package:flutter/material.dart";
@@ -57,6 +58,9 @@ class ThoughtScreen extends HookConsumerWidget {
 
     final listController = useMemoized(() => ListController(), []);
 
+    // Scroll animation notifiers
+    final bottomGradientNotifier = useState(ValueNotifier<double>(0.0));
+
     // Update local thoughts when provider data changes
     useEffect(() {
       thoughts.whenData((data) {
@@ -86,6 +90,20 @@ class ThoughtScreen extends HookConsumerWidget {
       return null;
     }, [localThoughts.value.length, isStreaming.value]);
 
+    // Add scroll listener for gradient animations
+    useEffect(() {
+      void onScroll() {
+        // Update gradient animations
+        final pixels = scrollController.position.pixels;
+
+        // Bottom gradient: appears when not at bottom (pixels > 0)
+        bottomGradientNotifier.value.value = (pixels / 500.0).clamp(0.0, 1.0);
+      }
+
+      scrollController.addListener(onScroll);
+      return () => scrollController.removeListener(onScroll);
+    }, [scrollController]);
+
     void sendMessage() async {
       if (messageController.text.trim().isEmpty) return;
 
@@ -258,65 +276,120 @@ class ThoughtScreen extends HookConsumerWidget {
           const Gap(8),
         ],
       ),
-      body: Center(
-        child: Container(
-          constraints: BoxConstraints(maxWidth: 640),
-          child: Column(
-            children: [
-              Expanded(
-                child: thoughts.when(
-                  data:
-                      (thoughtList) => SuperListView.builder(
-                        listController: listController,
-                        controller: scrollController,
-                        padding: const EdgeInsets.only(top: 16, bottom: 16),
-                        reverse: true,
-                        itemCount:
-                            localThoughts.value.length +
-                            (isStreaming.value ? 1 : 0),
-                        itemBuilder: (context, index) {
-                          if (isStreaming.value && index == 0) {
-                            return ThoughtItem(
-                              isStreaming: true,
-                              streamingText: streamingText.value,
-                              reasoningChunks: reasoningChunks.value,
-                              streamingFunctionCalls: functionCalls.value,
-                            );
-                          }
-                          final thoughtIndex =
-                              isStreaming.value ? index - 1 : index;
-                          final thought = localThoughts.value[thoughtIndex];
-                          return ThoughtItem(
-                            thought: thought,
-                            thoughtIndex: thoughtIndex,
-                          );
-                        },
+      body: Stack(
+        children: [
+          // Thoughts list
+          Center(
+            child: Container(
+              constraints: BoxConstraints(maxWidth: 640),
+              child: Column(
+                children: [
+                  Expanded(
+                    child: thoughts.when(
+                      data:
+                          (thoughtList) => SuperListView.builder(
+                            listController: listController,
+                            controller: scrollController,
+                            padding: EdgeInsets.only(
+                              top: 16,
+                              bottom:
+                                  MediaQuery.of(context).padding.bottom +
+                                  80, // Leave space for thought input
+                            ),
+                            reverse: true,
+                            itemCount:
+                                localThoughts.value.length +
+                                (isStreaming.value ? 1 : 0),
+                            itemBuilder: (context, index) {
+                              if (isStreaming.value && index == 0) {
+                                return ThoughtItem(
+                                  isStreaming: true,
+                                  streamingText: streamingText.value,
+                                  reasoningChunks: reasoningChunks.value,
+                                  streamingFunctionCalls: functionCalls.value,
+                                );
+                              }
+                              final thoughtIndex =
+                                  isStreaming.value ? index - 1 : index;
+                              final thought = localThoughts.value[thoughtIndex];
+                              return ThoughtItem(
+                                thought: thought,
+                                thoughtIndex: thoughtIndex,
+                              );
+                            },
+                          ),
+                      loading:
+                          () =>
+                              const Center(child: CircularProgressIndicator()),
+                      error:
+                          (error, _) => ResponseErrorWidget(
+                            error: error,
+                            onRetry:
+                                () =>
+                                    selectedSequenceId.value != null
+                                        ? ref.invalidate(
+                                          thoughtSequenceProvider(
+                                            selectedSequenceId.value!,
+                                          ),
+                                        )
+                                        : null,
+                          ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          // Bottom gradient - appears when scrolling towards newer thoughts (behind thought input)
+          AnimatedBuilder(
+            animation: bottomGradientNotifier.value,
+            builder:
+                (context, child) => Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: Opacity(
+                    opacity: bottomGradientNotifier.value.value,
+                    child: Container(
+                      height: math.min(
+                        MediaQuery.of(context).size.height * 0.1,
+                        128,
                       ),
-                  loading:
-                      () => const Center(child: CircularProgressIndicator()),
-                  error:
-                      (error, _) => ResponseErrorWidget(
-                        error: error,
-                        onRetry:
-                            () =>
-                                selectedSequenceId.value != null
-                                    ? ref.invalidate(
-                                      thoughtSequenceProvider(
-                                        selectedSequenceId.value!,
-                                      ),
-                                    )
-                                    : null,
+                      decoration: BoxDecoration(
+                        gradient: LinearGradient(
+                          begin: Alignment.bottomCenter,
+                          end: Alignment.topCenter,
+                          colors: [
+                            Theme.of(
+                              context,
+                            ).colorScheme.surfaceContainer.withOpacity(0.8),
+                            Theme.of(
+                              context,
+                            ).colorScheme.surfaceContainer.withOpacity(0.0),
+                          ],
+                        ),
                       ),
+                    ),
+                  ),
+                ),
+          ),
+          // Thought Input positioned above gradient (higher z-index)
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0, // At the very bottom, above gradient
+            child: Center(
+              child: Container(
+                constraints: BoxConstraints(maxWidth: 640),
+                child: ThoughtInput(
+                  messageController: messageController,
+                  isStreaming: isStreaming.value,
+                  onSend: sendMessage,
                 ),
               ),
-              ThoughtInput(
-                messageController: messageController,
-                isStreaming: isStreaming.value,
-                onSend: sendMessage,
-              ),
-            ],
+            ),
           ),
-        ),
+        ],
       ),
     );
   }

lib/screens/thought/think_sheet.dart

@@ -1,4 +1,5 @@
 import "dart:convert";
+import "dart:math" as math;
 import "package:dio/dio.dart";
 import "package:easy_localization/easy_localization.dart";
 import "package:flutter/material.dart";
@@ -54,6 +55,9 @@ class ThoughtSheet extends HookConsumerWidget {
 
     final listController = useMemoized(() => ListController(), []);
 
+    // Scroll animation notifiers
+    final bottomGradientNotifier = useState(ValueNotifier<double>(0.0));
+
     // Scroll to bottom when thoughts change or streaming state changes
     useEffect(() {
       if (localThoughts.value.isNotEmpty || isStreaming.value) {
@@ -68,6 +72,20 @@ class ThoughtSheet extends HookConsumerWidget {
       return null;
     }, [localThoughts.value.length, isStreaming.value]);
 
+    // Add scroll listener for gradient animations
+    useEffect(() {
+      void onScroll() {
+        // Update gradient animations
+        final pixels = scrollController.position.pixels;
+
+        // Bottom gradient: appears when not at bottom (pixels > 0)
+        bottomGradientNotifier.value.value = (pixels / 500.0).clamp(0.0, 1.0);
+      }
+
+      scrollController.addListener(onScroll);
+      return () => scrollController.removeListener(onScroll);
+    }, [scrollController]);
+
     void sendMessage() async {
       if (messageController.text.trim().isEmpty) return;
 
@@ -196,47 +214,103 @@ class ThoughtSheet extends HookConsumerWidget {
 
     return SheetScaffold(
       titleText: currentTopic.value ?? 'aiThought'.tr(),
-      child: Center(
-        child: Container(
-          constraints: BoxConstraints(maxWidth: 640),
-          child: Column(
-            children: [
-              Expanded(
-                child: SuperListView.builder(
-                  listController: listController,
-                  controller: scrollController,
-                  padding: const EdgeInsets.only(top: 16, bottom: 16),
-                  reverse: true,
-                  itemCount:
-                      localThoughts.value.length + (isStreaming.value ? 1 : 0),
-                  itemBuilder: (context, index) {
-                    if (isStreaming.value && index == 0) {
-                      return ThoughtItem(
-                        isStreaming: true,
-                        streamingText: streamingText.value,
-                        reasoningChunks: reasoningChunks.value,
-                        streamingFunctionCalls: functionCalls.value,
-                      );
-                    }
-                    final thoughtIndex = isStreaming.value ? index - 1 : index;
-                    final thought = localThoughts.value[thoughtIndex];
-                    return ThoughtItem(
-                      thought: thought,
-                      thoughtIndex: thoughtIndex,
-                    );
-                  },
+      child: Stack(
+        children: [
+          // Thoughts list
+          Center(
+            child: Container(
+              constraints: BoxConstraints(maxWidth: 640),
+              child: Column(
+                children: [
+                  Expanded(
+                    child: SuperListView.builder(
+                      listController: listController,
+                      controller: scrollController,
+                      padding: EdgeInsets.only(
+                        top: 16,
+                        bottom:
+                            MediaQuery.of(context).padding.bottom +
+                            80, // Leave space for thought input
+                      ),
+                      reverse: true,
+                      itemCount:
+                          localThoughts.value.length +
+                          (isStreaming.value ? 1 : 0),
+                      itemBuilder: (context, index) {
+                        if (isStreaming.value && index == 0) {
+                          return ThoughtItem(
+                            isStreaming: true,
+                            streamingText: streamingText.value,
+                            reasoningChunks: reasoningChunks.value,
+                            streamingFunctionCalls: functionCalls.value,
+                          );
+                        }
+                        final thoughtIndex =
+                            isStreaming.value ? index - 1 : index;
+                        final thought = localThoughts.value[thoughtIndex];
+                        return ThoughtItem(
+                          thought: thought,
+                          thoughtIndex: thoughtIndex,
+                        );
+                      },
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          // Bottom gradient - appears when scrolling towards newer thoughts (behind thought input)
+          AnimatedBuilder(
+            animation: bottomGradientNotifier.value,
+            builder:
+                (context, child) => Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: Opacity(
+                    opacity: bottomGradientNotifier.value.value,
+                    child: Container(
+                      height: math.min(
+                        MediaQuery.of(context).size.height * 0.1,
+                        128,
+                      ),
+                      decoration: BoxDecoration(
+                        gradient: LinearGradient(
+                          begin: Alignment.bottomCenter,
+                          end: Alignment.topCenter,
+                          colors: [
+                            Theme.of(
+                              context,
+                            ).colorScheme.surfaceContainer.withOpacity(0.8),
+                            Theme.of(
+                              context,
+                            ).colorScheme.surfaceContainer.withOpacity(0.0),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+          ),
+          // Thought Input positioned above gradient (higher z-index)
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0, // At the very bottom, above gradient
+            child: Center(
+              child: Container(
+                constraints: BoxConstraints(maxWidth: 640),
+                child: ThoughtInput(
+                  messageController: messageController,
+                  isStreaming: isStreaming.value,
+                  onSend: sendMessage,
+                  attachedMessages: attachedMessages,
+                  attachedPosts: attachedPosts,
                 ),
               ),
-              ThoughtInput(
-                messageController: messageController,
-                isStreaming: isStreaming.value,
-                onSend: sendMessage,
-                attachedMessages: attachedMessages,
-                attachedPosts: attachedPosts,
-              ),
-            ],
+            ),
           ),
-        ),
+        ],
       ),
     );
   }