feat: 优化列表滚动和输入框交互体验

- 纪念日/提醒列表添加动态底部填充，避免被 AI 输入框遮挡
- AI 输入框在弹窗和右键菜单打开时自动隐藏
- 优化输入框样式，提升在浅色背景上的可见度

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

src/components/ai/FloatingAIChat.tsx

@@ -27,9 +27,10 @@ import { notifications } from '@mantine/notifications';
 
 interface FloatingAIChatProps {
   onEventCreated?: () => void;
+  hidden?: boolean;
 }
 
-export function FloatingAIChat({ onEventCreated }: FloatingAIChatProps) {
+export function FloatingAIChat({ onEventCreated, hidden = false }: FloatingAIChatProps) {
   const [isFocused, setIsFocused] = useState(false);
   const [message, setMessage] = useState('');
   const [loading, setLoading] = useState(false);
@@ -212,6 +213,11 @@ export function FloatingAIChat({ onEventCreated }: FloatingAIChatProps) {
     return editForm.type === 'anniversary' ? '纪念日' : '提醒';
   };
 
+  // 当 hidden 为 true 时，不渲染组件
+  if (hidden) {
+    return null;
+  }
+
   return (
     <>
       {/* 遮罩层 */}
@@ -246,13 +252,13 @@ export function FloatingAIChat({ onEventCreated }: FloatingAIChatProps) {
         <Paper
           style={{
             width: '100%',
-            background: isFocused ? 'var(--mantine-color-body)' : 'rgba(255, 255, 255, 0.4)',
+            background: isFocused ? 'var(--mantine-color-body)' : 'rgba(255, 255, 255, 0.75)',
-            backdropFilter: isFocused ? 'none' : 'blur(8px)',
+            backdropFilter: isFocused ? 'none' : 'blur(12px)',
             borderRadius: 16,
             boxShadow: isFocused
               ? '0 8px 32px rgba(0, 0, 0, 0.12)'
-              : '0 2px 12px rgba(0, 0, 0, 0.06)',
+              : '0 2px 12px rgba(0, 0, 0, 0.08)',
-            border: '1px solid var(--mantine-color-gray-2)',
+            border: '1px solid rgba(0, 0, 0, 0.08)',
             transition: 'all 0.3s ease',
             overflow: 'visible',
           }}
@@ -523,8 +529,9 @@ export function FloatingAIChat({ onEventCreated }: FloatingAIChatProps) {
                 styles={{
                   input: {
                     borderRadius: 12,
-                    borderColor: 'var(--mantine-color-gray-2)',
+                    borderColor: 'var(--mantine-color-gray-3)',
-                    background: isFocused ? 'rgba(255, 255, 255, 0.95)' : 'rgba(255, 255, 255, 0.6)',
+                    background: isFocused ? 'rgba(255, 255, 255, 0.95)' : 'rgba(0, 0, 0, 0.06)',
+                    color: '#1a1a1a',
                     paddingLeft: 12,
                     paddingRight: 12,
                     transition: 'all 0.3s ease',

src/components/anniversary/AnniversaryList.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { useMemo, useRef, useState, useEffect } from 'react';
 import { Stack, Text, Paper, Group, Button, Box } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
 import { AnniversaryCard } from './AnniversaryCard';
@@ -29,6 +29,35 @@ export function AnniversaryList({ events, onEventClick, onAddClick }: Anniversar
   const anniversaries = events.filter((e) => e.type === 'anniversary');
   const showHolidays = useAppStore((state) => state.settings?.showHolidays ?? true);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [bottomPadding, setBottomPadding] = useState(0);
+
+  // 检测列表是否可滚动，如果是则添加底部填充避免被 AI 输入框遮挡
+  useEffect(() => {
+    const updatePadding = () => {
+      const container = scrollContainerRef.current;
+      if (!container) return;
+
+      // 判断是否可滚动（内容高度 > 容器高度）
+      const isScrollable = container.scrollHeight > container.clientHeight;
+      // 底部填充高度：AI 输入框高度(约50px) + 底部间距(48px) + 额外缓冲(20px)
+      setBottomPadding(isScrollable ? 120 : 0);
+    };
+
+    // 延迟执行确保 DOM 完全渲染
+    const timer = setTimeout(updatePadding, 100);
+
+    // 监听容器和内容变化
+    const container = scrollContainerRef.current;
+    if (container) {
+      const observer = new ResizeObserver(updatePadding);
+      observer.observe(container);
+      return () => {
+        observer.disconnect();
+        clearTimeout(timer);
+      };
+    }
+    return () => clearTimeout(timer);
+  }, [events]);
 
   // 滚动条样式 - 仅在悬停时显示
   const scrollbarStyle = `
@@ -179,7 +208,7 @@ export function AnniversaryList({ events, onEventClick, onAddClick }: Anniversar
         ref={scrollContainerRef}
         onWheel={handleWheel}
         className="anniversary-scroll"
-        style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}
+        style={{ flex: 1, overflowY: 'auto', minHeight: 0, paddingBottom: bottomPadding }}
       >
         <Stack gap="xs">
         {/* 内置节假日 */}

src/components/reminder/ReminderList.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState, useEffect } from 'react';
 import {
   Stack,
   Text,
@@ -43,6 +43,35 @@ export function ReminderList({
 }: ReminderListProps) {
   const navigate = useNavigate();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [bottomPadding, setBottomPadding] = useState(0);
+
+  // 检测列表是否可滚动，如果是则添加底部填充避免被 AI 输入框遮挡
+  useEffect(() => {
+    const updatePadding = () => {
+      const container = scrollContainerRef.current;
+      if (!container) return;
+
+      // 判断是否可滚动（内容高度 > 容器高度）
+      const isScrollable = container.scrollHeight > container.clientHeight;
+      // 底部填充高度：AI 输入框高度(约50px) + 底部间距(48px) + 额外缓冲(20px)
+      setBottomPadding(isScrollable ? 120 : 0);
+    };
+
+    // 延迟执行确保 DOM 完全渲染
+    const timer = setTimeout(updatePadding, 100);
+
+    // 监听容器和内容变化
+    const container = scrollContainerRef.current;
+    if (container) {
+      const observer = new ResizeObserver(updatePadding);
+      observer.observe(container);
+      return () => {
+        observer.disconnect();
+        clearTimeout(timer);
+      };
+    }
+    return () => clearTimeout(timer);
+  }, [events]);
 
   // 分类折叠状态
   const [collapsed, setCollapsed] = useState({
@@ -278,6 +307,7 @@ export function ReminderList({
             flex: 1,
             overflowY: 'auto',
             minHeight: 0,
+            paddingBottom: bottomPadding,
           }}
         >
           <Stack gap="xs">

src/pages/HomePage.tsx

@@ -22,6 +22,7 @@ import { FixedCalendar } from '../components/common/FixedCalendar';
 import { TimePicker } from '../components/common/TimePicker';
 import { useNavigate } from 'react-router-dom';
 import { useAppStore } from '../stores';
+import { useContextMenuStore } from '../stores/contextMenu';
 import { AnniversaryList } from '../components/anniversary/AnniversaryList';
 import { ReminderList } from '../components/reminder/ReminderList';
 import { NoteEditor } from '../components/note/NoteEditor';
@@ -34,6 +35,7 @@ export function HomePage() {
   const navigate = useNavigate();
   const user = useAppStore((state) => state.user);
   const logout = useAppStore((state) => state.logout);
+  const openEventId = useContextMenuStore((state) => state.openEventId);
   const checkAuth = useAppStore((state) => state.checkAuth);
   const events = useAppStore((state) => state.events);
   const fetchEvents = useAppStore((state) => state.fetchEvents);
@@ -391,8 +393,6 @@ export function HomePage() {
               onDateChange={handleDateChange}
               onPriorityChange={handlePriorityChange}
             />
-            {/* 底部空白区域 - 避免被 AI 输入框遮挡 */}
-            <Box style={{ height: 120 }} />
           </div>
 
           {/* Right column - Note */}
@@ -402,7 +402,7 @@ export function HomePage() {
         </div>
 
         {/* AI Chat - Floating */}
-        <FloatingAIChat onEventCreated={handleAIEventCreated} />
+        <FloatingAIChat onEventCreated={handleAIEventCreated} hidden={opened || !!openEventId} />
 
         {/* Add/Edit Event Modal */}
         <Modal