docs: update arch doc to v2.4.0 and move maximize button to bottom-right

TIPITAKA_WEB_ARCHITECTURE_V2.md

@@ -1,10 +1,10 @@
 # Tipitaka Web Application Architecture V2
 ## Vite + FastAPI + Qdrant — "Book Sanctuary + Floating AI Consultant"
 
-> **Version:** 2.3.0
-> **Date:** 2026-05-17
+> **Version:** 2.4.0
+> **Date:** 2026-05-20
 > **Status:** Production (local dev, ready for HF Spaces)
-> **Based on:** Code at commit `b8531b2`
+> **Based on:** Code at commit `f11cd44`
 
 ---
 
@@ -15,6 +15,19 @@ Web Application สำหรับอ่านพระไตรปิฎก ม
 
 ### 1.2 Key Changes
 
+#### V2.4.0 (2026-05-20)
+
+| Layer | V2.3.0 | V2.4.0 |
+|-------|--------|--------|
+| **AI Assistant UI** | Simple round button | **Speed Dial Floating Menu** — 5 quick actions (`AIFloatingMenu.tsx`) with responsive font size |
+| **Response Display** | Text in chat window | **Translucent Answer Card** — frosted-glass overlay (`viewMode: 'answer'`) with full height/width resize support |
+| **Disclaimer Warning** | Bottom/separate block | **Centered Title Bar Disclaimer** — Kalama Sutta warning absolute-centered in header to save vertical space |
+| **Focus Mode (Zoom)** | Latest assistant message only | **Individual Message Zoom** — maximize button on each assistant message bubble, responsive opacity |
+| **Mobile UX** | Cutoff on status bar | **Safe Area Insets** — top padding support for Focus Mode Header and menu buttons |
+| **Reader Navigation** | Keep scroll state | **Scroll Reset** — resets reader view to top when a new page loads, direction-aware transitions |
+| **PWA & Offline** | None | **Full Progressive Web App** — manifest, high-res Dharma wheel icons, Safari-compatible apple-touch-icons, Cache-Control headers |
+| **Commit** | `b8531b2` | `f11cd44` |
+
 #### V2.3.0 (2026-05-17)
 
 | Layer | V2.2.0 | V2.3.0 |
@@ -86,12 +99,13 @@ graph TB
             RT[RightToolbar<br/>44px controls strip]
             AIP[AIPopup<br/>Draggable + resizable chat]
             SP[SelectionPopup<br/>AI from selection]
+            AIF[AIFloatingMenu<br/>Speed Dial Menu]
         end
         subgraph "State (Zustand)"
             RS[ReaderStore<br/>volume, page, content]
             TS[ThemeStore<br/>theme, fontSize]
             US[UIStore<br/>navOpen, activeTab]
-            AS[AIStore<br/>messages, mode, width, pos, panelSize]
+            AS[AIStore<br/>messages, mode, useRag, viewMode, width, height, pos]
             SS[SearchStore<br/>query, results, breakdown]
         end
     end
@@ -124,11 +138,12 @@ graph TB
     end
 
     UI --> APP
-    APP --> ND & RP & RT & AIP & SP
+    APP --> ND & RP & RT & AIP & SP & AIF
     RP --> RS
     ND --> SS & US
     RT --> TS & RS
     AIP --> AS
+    AIF --> AS
     R1 & R2 & R3 --> S1 --> DB
     R4 & R5 --> S2 --> DB
     R4 --> S3
@@ -225,12 +240,18 @@ sequenceDiagram
 
 ```
 tipitaka-web/
-├── index.html                     # Vite entry
+├── index.html                     # Vite entry with PWA viewport & iOS meta tags
 ├── vite.config.ts                 # Vite + proxy config
 ├── tsconfig.json / .app.json / .node.json
 ├── package.json
 ├── eslint.config.js
 │
+├── public/                        # PWA Assets
+│   ├── manifest.json              # Web app manifest for installability
+│   ├── favicon.ico / favicon.svg  # App icons
+│   ├── icon-192.png / icon-512.png # High-res Dharma wheel icons
+│   └── apple-touch-icon*.png      # Safari touch icons (precomposed & sized)
+│
 └── src/
     ├── main.tsx                   # React entry
     ├── App.tsx                    # <AppShell /> only
@@ -240,7 +261,7 @@ tipitaka-web/
     │   ├── layout/
     │   │   ├── AppShell.tsx       # flex h-screen: NavDrawer + Reader + RightToolbar
     │   │   ├── NavDrawer.tsx      # 320px sidebar: TOC / Search / Overview tabs
-    │   │   ├── ReaderPanel.tsx    # Main content area with swipe nav
+    │   │   ├── ReaderPanel.tsx    # Main content area with swipe & vertical scroll nav
     │   │   └── MobileBottomBar.tsx # Mobile page nav
     │   │
     │   ├── reader/
@@ -250,7 +271,8 @@ tipitaka-web/
     │   │   └── RightToolbar.tsx   # 44px fixed right: page nav, font size, theme
     │   │
     │   └── ai/
-    │       └── AIPopup.tsx        # Draggable + vertically/diagonally resizable chat
+    │       ├── AIPopup.tsx        # Draggable + resizable chat & translucent answer card
+    │       └── AIFloatingMenu.tsx # Floating speed dial menu with 5 quick actions
     │
     ├── hooks/
     │   ├── useKeyboardNav.ts      # ← → PgUp PgDown Space
@@ -258,7 +280,7 @@ tipitaka-web/
     │
     ├── stores/
     │   ├── appStore.ts            # readerStore + themeStore + uiStore
-    │   ├── aiStore.ts             # AI messages, streaming, drag+resize state, panelSize
+    │   ├── aiStore.ts             # AI messages, streaming, drag+resize state, viewMode, panelSize
     │   └── searchStore.ts         # Search queries, results, suggestions
     │
     └── lib/
@@ -271,7 +293,7 @@ tipitaka-web/
 ```tsx
 // Layout: flex h-screen overflow-hidden
 // Structure: NavDrawer | Reader (flex-1) | RightToolbar (fixed 44px)
-// Overlays: AI Popup (fixed), Selection Popup (fixed), Mobile Bottom Bar
+// Overlays: AI Popup (fixed), Selection Popup (fixed), AIFloatingMenu (fixed), Mobile Bottom Bar
 // Theme: dynamic SHELL_BG per theme (dark/light/classic)
 ```
 
@@ -288,10 +310,37 @@ tipitaka-web/
 // Line height: 2.1
 // Theme-aware styles (3 themes: dark/light/classic)
 // End markers: extracted from raw <B> tags containing "จบ" — rendered as --- marker text ---
-// AnimatePresence for page transitions
+// AnimatePresence for page transitions (direction-aware)
+// Scroll reset: automatic scroll-to-top when navigating to a new page
 // Swipe support: ← next, → prev (mobile)
 ```
 
+#### AIFloatingMenu [NEW]
+```tsx
+// Floating Speed Dial menu collapsing into a single Sparkles/X icon
+// Expands upward to reveal 5 action buttons with tooltips (อธิบาย, สรุป, วิเคราะห์ธรรม, ประยุกต์ใช้, แชทสอบถาม)
+// Label font size: text-[13px] md:text-sm font-bold for high readability on all screens
+// Radial stagger animation using framer-motion
+// Actions 1-4 automatically send current page context and trigger 'answer' viewMode (Translucent Answer Card)
+// Action 5 switches to 'chat' viewMode (opens the main chat window)
+```
+
+#### AIPopup
+```tsx
+// Floating, draggable assistant panel supporting two modes:
+//   1. 'chat' viewMode (full conversational interface)
+//   2. 'answer' viewMode (translucent glassmorphism card for quick AI summaries)
+// Three resize modes: right-edge (horizontal), bottom-edge (vertical), corner (diagonal)
+// Panel size (width, height) and coordinates (pos) are fully resizable and persisted in localStorage
+// Two AI models: fast (deepseek-chat) / reasoner (deepseek-reasoner)
+// RAG toggle pill (green/yellow/red dot readiness indicator)
+// Title Bar Disclaimer: Kalama Sutta warning is absolute-centered in Row 1 of header to save vertical space
+// Individual Message Fullscreen: Maximize button on each assistant message bubble, enabling focus mode on any previous message in the chat log. Oppacity is responsive (always visible on mobile, hover-only on desktop)
+// Safe Area Support: paddingTop calculation in Focus Mode Header preventing notched phones from cutting off buttons
+// Input + Send button
+// Width: 300px–80vw, default 400px
+```
+
 #### NavDrawer (320px)
 ```tsx
 // 3 tabs: TOC | Search | Overview
@@ -648,10 +697,10 @@ Config intelligently resolves paths based on environment:
 - **Navigation**: Clear page markers, prev/next predictable
 - **Swipe**: Mobile gesture ← → works naturally with page boundaries
 
-### 7.5 Why No PWA/Offline?
-- **Content is dynamic**: Pages rendered with AI context and search results
-- **Token-based auth**: Not applicable (public content, but still server-dependant)
-- **Snapshot data too large**: 250MB+ not practical for offline storage
+### 7.5 Why Progressive Web App (PWA) Implementation?
+- **Immersive View (จิตวิเวก)**: Standalone display mode removes browser address bars and controls, creating an clean, distraction-free environment for scripture reading.
+- **Platform Integration**: Custom Dharma wheel icons and manifest settings provide native-like installability on mobile (iOS/Android) and desktop, including proper theme coloring matching the midnight dark mode.
+- **Safe Area Insets**: Safe area environment variables (`env(safe-area-inset-top)`) are utilized in headers to handle physical phone notches and overlays on mobile when installed.
 
 ### 7.6 Why Split First Page at "ขอนอบน้อม"?
 - **Universal**: Works for all 45 volumes — the homage line is the only consistent structural element on page 1
@@ -663,6 +712,22 @@ Config intelligently resolves paths based on environment:
 - **CSS**: `text-justify: inter-character` ensures even spacing in Thai script (where inter-word gaps would look uneven due to lack of explicit word boundaries in Thai)
 - **User preference**: ผู้ใช้ request ให้จัด justify (2026-05-07)
 
+### 7.8 Why Speed Dial Floating Menu & Translucent Answer Card?
+- **Cleaner Interface**: Replaced the permanent floating AI block/button with a single collapsible Sparkles icon to preserve the Book Sanctuary theme when the AI is not needed.
+- **Frosted Glass Card (Answer Card)**: Triggers only when executing quick functions (Explain, Summarize, Analyze, Apply). The frosted glass background blends naturally into the reader background without full-screen distraction.
+- **Complete Freedom of Resizing**: The panel size constraint was lifted (allowing full height/width expansion) to prevent text overflow issues and allow comfortable reading of long AI responses.
+
+### 7.9 Why Centered Title Bar Disclaimer (Kalama Sutta)?
+- **Saves Vertical Screen Real Estate**: Instead of having a dedicated banner occupying vertical space in the reader or popup layout, the Kalama Sutta warning is absolute-centered in the top title bar of the AIPopup.
+- **Safety Reference**: Constantly reminds readers of the Kalama Sutta guidelines when interpreting AI output, without affecting content readability.
+
+### 7.10 Why Zoom Button on Individual History Bubbles?
+- **Focus Mode Flexibility**: Instead of only allowing the latest AI response to be opened in full-screen Focus Mode, a zoom button was added to *every* assistant response bubble in the history. Users can now zoom into any past answer.
+- **Responsive Opacity**: Always visible (semi-transparent) on mobile devices for ease of touch interaction, and only visible on hover on desktops to keep the interface clean.
+
+### 7.11 Why Resetting Scroll Position to Top on Page Load?
+- **Consistent Reading Position**: Previously, when navigating to the next/prev page, the scroll position did not reset, starting the reader mid-way down the page. Resetting it to `0` ensures a natural reading flow from the top header downwards.
+
 ---
 
 ## 8. Test Coverage

webapp/tipitaka-web/src/components/ai/AIPopup.tsx

@@ -582,7 +582,7 @@ const AIPopup: React.FC = () => {
                             <button
                               onClick={() => setExpandedIndex(i)}
                               onMouseDown={e => e.stopPropagation()}
-                              className="absolute top-2.5 right-2.5 p-1 rounded-lg bg-black/5 hover:bg-[#c8860a]/20 text-[#c8860a] transition-all opacity-60 md:opacity-0 md:group-hover:opacity-100"
+                              className="absolute bottom-2 right-2 p-1 rounded-lg bg-black/5 hover:bg-[#c8860a]/20 text-[#c8860a] transition-all opacity-60 md:opacity-0 md:group-hover:opacity-100"
                               title="อ่านข้อความนี้เต็มจอ"
                             >
                               <Maximize2 size={13} />