diff --git a/.cursor/plans/ui_design_modern_ai_chat.plan.md b/.cursor/plans/ui_design_modern_ai_chat.plan.md
new file mode 100644
index 00000000..1a10759f
--- /dev/null
+++ b/.cursor/plans/ui_design_modern_ai_chat.plan.md
@@ -0,0 +1,2285 @@
+# Plan: Modern AI Chat UI Design
+
+## Tổng quan kiến trúc UI
+
+Dự án sẽ có 2 ứng dụng web chính với design language thống nhất:
+
+### Web Client (User-facing)
+
+- **Mục đích**: Chat interface cho end users tương tác với AI
+- **Design inspiration**: x.ai Grok, OpenAI ChatGPT
+- **Key features**:
+ - Minimalistic và intuitive
+ - Dark mode as default với light mode option
+ - Real-time chat với typing indicators
+ - Message history và conversation management
+ - Multi-modal input (text, voice future)
+
+### Web Admin (Admin-facing)
+
+- **Mục đích**: Dashboard quản lý users, analytics, system settings
+- **Design inspiration**: Modern admin dashboards với AI-powered insights
+- **Key features**:
+ - Analytics dashboard với charts/graphs
+ - User management với advanced filtering
+ - System monitoring và health checks
+ - Content moderation tools
+ - Configuration management
+```mermaid
+graph TB
+ subgraph Design System
+ Colors[Color Palette
Dark + Light Mode]
+ Typo[Typography
System Fonts]
+ Comp[Components
Radix UI]
+ Icons[Icons
Lucide React]
+ end
+
+ subgraph Web Client
+ Auth1[Authentication]
+ Chat[Chat Interface]
+ History[Conversation History]
+ Settings1[User Settings]
+ end
+
+ subgraph Web Admin
+ Dashboard[Analytics Dashboard]
+ Users[User Management]
+ Monitor[System Monitoring]
+ Settings2[Admin Settings]
+ end
+
+ Colors --> Web Client
+ Colors --> Web Admin
+ Typo --> Web Client
+ Typo --> Web Admin
+ Comp --> Web Client
+ Comp --> Web Admin
+ Icons --> Web Client
+ Icons --> Web Admin
+```
+
+
+## I. Design System Foundation
+
+### 1.1 Color Palette
+
+#### Dark Mode (Primary Theme)
+
+Dựa trên research, dark mode giảm eye strain 67% và là xu hướng chính cho AI chat interfaces.
+
+**Background Colors:**
+
+```css
+--bg-primary: #0A0A0A /* Main background - Almost black */
+--bg-secondary: #121212 /* Card/Panel background - Dark grey (better depth) */
+--bg-tertiary: #1A1A1A /* Hover states */
+--bg-elevated: #242424 /* Elevated surfaces (modals, dropdowns) */
+```
+
+**Text Colors (WCAG Compliant):**
+
+```css
+--text-primary: #FAFAFA /* Primary text - Off-white (4.5:1 contrast) */
+--text-secondary: #E0E0E0 /* Secondary text - Light grey */
+--text-tertiary: #A0A0A0 /* Tertiary/disabled text */
+--text-inverse: #1A1A1A /* Text on light backgrounds */
+```
+
+**Brand/Accent Colors:**
+
+```css
+--accent-primary: #3B82F6 /* Primary blue - CTAs, links */
+--accent-secondary: #8B5CF6 /* Purple - Highlights */
+--accent-success: #10B981 /* Green - Success states */
+--accent-warning: #F59E0B /* Amber - Warnings */
+--accent-error: #EF4444 /* Red - Errors */
+--accent-info: #06B6D4 /* Cyan - Info */
+```
+
+**Chat Specific Colors:**
+
+```css
+--chat-user-bubble: #2563EB /* User message - Deep blue */
+--chat-ai-bubble: #374151 /* AI message - Dark grey */
+--chat-user-text: #FFFFFF /* White text on blue */
+--chat-ai-text: #F3F4F6 /* Light text on grey */
+--chat-timestamp: #9CA3AF /* Timestamp grey */
+--chat-divider: #1F2937 /* Divider between messages */
+```
+
+**Border Colors:**
+
+```css
+--border-primary: #2A2A2A /* Default borders */
+--border-secondary: #3A3A3A /* Hover borders */
+--border-focus: #3B82F6 /* Focus state - Blue */
+```
+
+#### Light Mode (Secondary Theme)
+
+```css
+/* Light mode variants */
+--bg-primary-light: #FFFFFF
+--bg-secondary-light: #F9FAFB
+--bg-tertiary-light: #F3F4F6
+--text-primary-light: #111827
+--text-secondary-light: #4B5563
+--border-primary-light: #E5E7EB
+```
+
+**Semantic Color Usage:**
+
+- Primary blue (#3B82F6): CTAs, primary buttons, active states
+- Purple (#8B5CF6): Premium features, AI-related highlights
+- Success green (#10B981): Confirmations, success messages
+- Warning amber (#F59E0B): Warnings, caution states
+- Error red (#EF4444): Errors, destructive actions
+
+### 1.2 Typography
+
+Theo OpenAI guidelines, sử dụng **system fonts** để ensure readability và accessibility.
+
+**Font Stack:**
+
+```css
+--font-sans:
+ -apple-system,
+ BlinkMacSystemFont,
+ "SF Pro Display", /* iOS/macOS */
+ "Segoe UI", /* Windows */
+ Roboto, /* Android */
+ "Helvetica Neue",
+ Arial,
+ sans-serif;
+
+--font-mono:
+ "SF Mono",
+ Consolas,
+ "Liberation Mono",
+ Menlo,
+ monospace;
+```
+
+**Type Scale (Tailwind-based):**
+
+```css
+/* Display - Headers */
+--text-6xl: 3.75rem / 1 /* 60px - Hero titles */
+--text-5xl: 3rem / 1 /* 48px - Page titles */
+--text-4xl: 2.25rem / 1.1 /* 36px - Section headers */
+--text-3xl: 1.875rem / 1.2 /* 30px - Card headers */
+
+/* Body */
+--text-2xl: 1.5rem / 1.3 /* 24px - Large body */
+--text-xl: 1.25rem / 1.4 /* 20px - Emphasized text */
+--text-lg: 1.125rem / 1.5 /* 18px - Large body */
+--text-base: 1rem / 1.5 /* 16px - Default body */
+--text-sm: 0.875rem / 1.5 /* 14px - Small text */
+--text-xs: 0.75rem / 1.5 /* 12px - Captions */
+```
+
+**Font Weights:**
+
+```css
+--font-light: 300 /* Light text */
+--font-normal: 400 /* Body text */
+--font-medium: 500 /* Emphasized */
+--font-semibold: 600 /* Headings */
+--font-bold: 700 /* Strong emphasis */
+```
+
+**Chat Typography:**
+
+- Message text: 16px (text-base), regular weight
+- Timestamps: 12px (text-xs), light weight
+- User names: 14px (text-sm), medium weight
+- System messages: 14px (text-sm), italic
+
+### 1.3 Spacing & Layout
+
+**Base Unit: 4px (0.25rem)**
+
+**Spacing Scale:**
+
+```css
+--space-0: 0 /* 0px */
+--space-1: 0.25rem /* 4px */
+--space-2: 0.5rem /* 8px */
+--space-3: 0.75rem /* 12px */
+--space-4: 1rem /* 16px */
+--space-5: 1.25rem /* 20px */
+--space-6: 1.5rem /* 24px */
+--space-8: 2rem /* 32px */
+--space-10: 2.5rem /* 40px */
+--space-12: 3rem /* 48px */
+--space-16: 4rem /* 64px */
+--space-20: 5rem /* 80px */
+```
+
+**Container Widths:**
+
+```css
+--container-sm: 640px /* Small devices */
+--container-md: 768px /* Medium devices */
+--container-lg: 1024px /* Large devices */
+--container-xl: 1280px /* Extra large */
+--container-2xl: 1536px /* 2X large */
+
+/* Chat specific */
+--chat-max-width: 768px /* Max width for chat messages */
+--sidebar-width: 280px /* Conversation history sidebar */
+```
+
+**Border Radius:**
+
+```css
+--radius-sm: 0.25rem /* 4px - Small elements */
+--radius-md: 0.5rem /* 8px - Buttons, inputs */
+--radius-lg: 0.75rem /* 12px - Cards */
+--radius-xl: 1rem /* 16px - Large cards */
+--radius-2xl: 1.5rem /* 24px - Modals */
+--radius-full: 9999px /* Full round - Avatars, pills */
+```
+
+**Shadows (Dark Mode Optimized):**
+
+```css
+--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
+--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
+--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
+--shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3); /* Blue glow for focus */
+```
+
+### 1.4 Grid System
+
+**Responsive Breakpoints:**
+
+```css
+--screen-sm: 640px /* Mobile landscape */
+--screen-md: 768px /* Tablet */
+--screen-lg: 1024px /* Desktop */
+--screen-xl: 1280px /* Large desktop */
+--screen-2xl: 1536px /* Extra large desktop */
+```
+
+**Layout Patterns:**
+
+- **Single Column (Mobile)**: < 768px - Full width content
+- **Two Column (Tablet)**: 768px - 1024px - Sidebar + Main
+- **Three Column (Desktop)**: > 1024px - Sidebar + Main + Panel
+
+### 1.5 Animation & Transitions
+
+**Timing Functions:**
+
+```css
+--ease-in: cubic-bezier(0.4, 0, 1, 1);
+--ease-out: cubic-bezier(0, 0, 0.2, 1);
+--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+```
+
+**Duration:**
+
+```css
+--duration-fast: 150ms /* Hover effects */
+--duration-normal: 250ms /* Default transitions */
+--duration-slow: 350ms /* Complex animations */
+--duration-slower: 500ms /* Page transitions */
+```
+
+**Common Transitions:**
+
+```css
+/* Smooth hover */
+transition: all var(--duration-fast) var(--ease-out);
+
+/* Button press */
+transition: transform var(--duration-fast) var(--ease-in-out);
+
+/* Modal open */
+transition: opacity var(--duration-normal) var(--ease-in-out),
+ transform var(--duration-normal) var(--ease-spring);
+```
+
+**Micro-interactions (2026 Trend):**
+
+- Button hover: Subtle scale (1.02) + brightness
+- Card hover: Lift effect (translateY -2px) + shadow
+- Input focus: Glow effect (box-shadow) + border color
+- Message send: Slide up + fade in
+- Typing indicator: Pulsing dots animation
+
+## II. Component Library
+
+### 2.1 Core Components (Radix UI based)
+
+#### Button
+
+**Variants:**
+
+```typescript
+// Primary - Main CTAs
+
+
+// Secondary - Less emphasis
+
+
+// Ghost - Minimal
+
+
+// Danger - Destructive actions
+
+```
+
+**Sizes:**
+
+- `xs`: 28px height, 12px text, 12px padding
+- `sm`: 32px height, 14px text, 16px padding
+- `md`: 40px height, 16px text, 20px padding (default)
+- `lg`: 48px height, 18px text, 24px padding
+- `xl`: 56px height, 20px text, 28px padding
+
+**States:**
+
+- Default: Normal appearance
+- Hover: Brightness 110%, slight scale (1.02)
+- Active: Brightness 90%, scale (0.98)
+- Focus: Blue glow shadow
+- Disabled: Opacity 50%, cursor not-allowed
+- Loading: Spinner icon, disabled state
+
+**Implementation:**
+
+```css
+/* Primary Button */
+.btn-primary {
+ background: var(--accent-primary);
+ color: white;
+ border-radius: var(--radius-md);
+ padding: var(--space-3) var(--space-5);
+ font-weight: var(--font-medium);
+ transition: all var(--duration-fast) var(--ease-out);
+}
+
+.btn-primary:hover {
+ filter: brightness(1.1);
+ transform: scale(1.02);
+}
+
+.btn-primary:focus-visible {
+ outline: none;
+ box-shadow: var(--shadow-glow);
+}
+```
+
+#### Input Fields
+
+**Types:**
+
+- Text Input
+- Textarea
+- Select
+- Multi-select
+- Date Picker
+- Search (with icon)
+
+**Structure:**
+
+```tsx
+
+
+
+ We'll never share your email
+
+```
+
+**Styles:**
+
+```css
+.input {
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-primary);
+ color: var(--text-primary);
+ border-radius: var(--radius-md);
+ padding: var(--space-3) var(--space-4);
+ font-size: var(--text-base);
+ transition: all var(--duration-fast) var(--ease-out);
+}
+
+.input:focus {
+ border-color: var(--accent-primary);
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+ outline: none;
+}
+
+.input::placeholder {
+ color: var(--text-tertiary);
+}
+
+.input-hint {
+ color: var(--text-tertiary);
+ font-size: var(--text-sm);
+ margin-top: var(--space-1);
+}
+```
+
+**States:**
+
+- Default
+- Focus (blue border + glow)
+- Error (red border + error message)
+- Success (green border + checkmark)
+- Disabled (grey + cursor not-allowed)
+
+#### Card
+
+**Variants:**
+
+```tsx
+// Default Card
+
+
+ Card Title
+ Card description
+
+
+ Content goes here
+
+
+ Footer actions
+
+
+
+// Interactive Card (hover effect)
+
+ ...
+
+
+// Bordered Card
+
+ ...
+
+```
+
+**Styles:**
+
+```css
+.card {
+ background: var(--bg-secondary);
+ border-radius: var(--radius-lg);
+ padding: var(--space-6);
+ transition: all var(--duration-normal) var(--ease-out);
+}
+
+.card.hover:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-lg);
+}
+
+.card-header {
+ margin-bottom: var(--space-4);
+}
+
+.card-title {
+ font-size: var(--text-xl);
+ font-weight: var(--font-semibold);
+ color: var(--text-primary);
+}
+
+.card-description {
+ font-size: var(--text-sm);
+ color: var(--text-secondary);
+ margin-top: var(--space-1);
+}
+```
+
+#### Modal/Dialog
+
+**Structure:**
+
+```tsx
+
+```
+
+**Animation:**
+
+```css
+/* Overlay fade in */
+@keyframes overlay-fade {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Content scale + fade */
+@keyframes content-show {
+ from {
+ opacity: 0;
+ transform: translate(-50%, -48%) scale(0.96);
+ }
+ to {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(1);
+ }
+}
+
+.dialog-overlay {
+ background: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(8px);
+ animation: overlay-fade var(--duration-normal) var(--ease-out);
+}
+
+.dialog-content {
+ background: var(--bg-elevated);
+ border-radius: var(--radius-2xl);
+ box-shadow: var(--shadow-xl);
+ animation: content-show var(--duration-normal) var(--ease-spring);
+}
+```
+
+#### Avatar
+
+**Sizes:**
+
+- `xs`: 24px
+- `sm`: 32px
+- `md`: 40px (default)
+- `lg`: 48px
+- `xl`: 64px
+
+**States:**
+
+- Image loaded
+- Fallback (initials)
+- Loading (skeleton)
+- Status indicator (online/offline/away)
+```tsx
+
+
+ JD
+
+```
+
+
+### 2.2 Chat-Specific Components
+
+#### Message Bubble
+
+**Structure:**
+
+```tsx
+
+
+ You
+ 2:30 PM
+
+
+
Hello, how can I help you?
+
+
+
+
+
+
+
+ AI Assistant
+ 2:31 PM
+
+
+
I can help you with...
+
+
+
+```
+
+**Styles:**
+
+```css
+/* User Message (Right aligned, blue) */
+.message.user {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ margin-bottom: var(--space-4);
+}
+
+.message.user .message-bubble {
+ background: var(--chat-user-bubble);
+ color: var(--chat-user-text);
+ border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
+ padding: var(--space-3) var(--space-4);
+ max-width: 70%;
+ word-wrap: break-word;
+}
+
+/* AI Message (Left aligned, grey) */
+.message.ai {
+ display: flex;
+ gap: var(--space-3);
+ margin-bottom: var(--space-4);
+}
+
+.message.ai .message-bubble {
+ background: var(--chat-ai-bubble);
+ color: var(--chat-ai-text);
+ border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
+ padding: var(--space-3) var(--space-4);
+ max-width: 70%;
+}
+
+/* Message Header */
+.message-header {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ margin-bottom: var(--space-1);
+}
+
+.message-author {
+ font-size: var(--text-sm);
+ font-weight: var(--font-medium);
+ color: var(--text-secondary);
+}
+
+.message-time {
+ font-size: var(--text-xs);
+ color: var(--chat-timestamp);
+}
+```
+
+**Message Animations:**
+
+```css
+/* Slide up + fade in */
+@keyframes message-in {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.message {
+ animation: message-in var(--duration-normal) var(--ease-out);
+}
+```
+
+#### Typing Indicator
+
+```tsx
+
+```
+```css
+.typing-indicator {
+ display: flex;
+ gap: 4px;
+ padding: var(--space-3);
+}
+
+.typing-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--text-tertiary);
+ animation: typing 1.4s infinite;
+}
+
+.typing-dot:nth-child(2) {
+ animation-delay: 0.2s;
+}
+
+.typing-dot:nth-child(3) {
+ animation-delay: 0.4s;
+}
+
+@keyframes typing {
+ 0%, 60%, 100% {
+ opacity: 0.3;
+ transform: scale(0.8);
+ }
+ 30% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+```
+
+#### Chat Input
+
+```tsx
+
+
+
+
+ Press Enter to send, Shift+Enter for new line
+
+
+```
+```css
+.chat-input-container {
+ position: sticky;
+ bottom: 0;
+ background: var(--bg-primary);
+ border-top: 1px solid var(--border-primary);
+ padding: var(--space-4);
+}
+
+.chat-input-wrapper {
+ display: flex;
+ align-items: flex-end;
+ gap: var(--space-2);
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-primary);
+ border-radius: var(--radius-xl);
+ padding: var(--space-2);
+ transition: border-color var(--duration-fast) var(--ease-out);
+}
+
+.chat-input-wrapper:focus-within {
+ border-color: var(--accent-primary);
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.chat-input {
+ flex: 1;
+ background: transparent;
+ border: none;
+ color: var(--text-primary);
+ font-size: var(--text-base);
+ resize: none;
+ max-height: 120px;
+ padding: var(--space-2);
+}
+
+.chat-input:focus {
+ outline: none;
+}
+
+.chat-input-action,
+.chat-input-send {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ border-radius: var(--radius-md);
+ background: transparent;
+ border: none;
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all var(--duration-fast) var(--ease-out);
+}
+
+.chat-input-action:hover {
+ background: var(--bg-tertiary);
+ color: var(--text-primary);
+}
+
+.chat-input-send {
+ background: var(--accent-primary);
+ color: white;
+}
+
+.chat-input-send:hover {
+ filter: brightness(1.1);
+ transform: scale(1.05);
+}
+
+.chat-input-send:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.chat-input-hint {
+ font-size: var(--text-xs);
+ color: var(--text-tertiary);
+ margin-top: var(--space-2);
+ text-align: center;
+}
+```
+
+#### Conversation Sidebar
+
+```tsx
+
+```
+```css
+.conversation-sidebar {
+ width: var(--sidebar-width);
+ height: 100vh;
+ background: var(--bg-secondary);
+ border-right: 1px solid var(--border-primary);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.sidebar-header {
+ padding: var(--space-4);
+ border-bottom: 1px solid var(--border-primary);
+}
+
+.sidebar-header h2 {
+ font-size: var(--text-lg);
+ font-weight: var(--font-semibold);
+ margin-bottom: var(--space-3);
+}
+
+.new-chat-btn {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-3);
+ background: var(--accent-primary);
+ color: white;
+ border: none;
+ border-radius: var(--radius-md);
+ font-weight: var(--font-medium);
+ cursor: pointer;
+ transition: all var(--duration-fast) var(--ease-out);
+}
+
+.new-chat-btn:hover {
+ filter: brightness(1.1);
+}
+
+.sidebar-search {
+ padding: var(--space-4);
+ border-bottom: 1px solid var(--border-primary);
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+}
+
+.sidebar-search input {
+ flex: 1;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-primary);
+ border-radius: var(--radius-md);
+ padding: var(--space-2) var(--space-3);
+ color: var(--text-primary);
+ font-size: var(--text-sm);
+}
+
+.conversation-list {
+ flex: 1;
+ overflow-y: auto;
+ padding: var(--space-2);
+}
+
+.conversation-item {
+ width: 100%;
+ padding: var(--space-3);
+ background: transparent;
+ border: none;
+ border-radius: var(--radius-md);
+ text-align: left;
+ cursor: pointer;
+ transition: background var(--duration-fast) var(--ease-out);
+ margin-bottom: var(--space-1);
+}
+
+.conversation-item:hover {
+ background: var(--bg-tertiary);
+}
+
+.conversation-item.active {
+ background: var(--bg-tertiary);
+ border-left: 3px solid var(--accent-primary);
+}
+
+.conversation-title {
+ font-size: var(--text-sm);
+ font-weight: var(--font-medium);
+ color: var(--text-primary);
+ margin-bottom: var(--space-1);
+}
+
+.conversation-preview {
+ font-size: var(--text-xs);
+ color: var(--text-tertiary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.conversation-time {
+ font-size: var(--text-xs);
+ color: var(--text-tertiary);
+ margin-top: var(--space-1);
+}
+```
+
+### 2.3 Admin Components
+
+#### Data Table
+
+```tsx
+
+```
+
+**Features:**
+
+- Column sorting
+- Global search
+- Column filters
+- Pagination
+- Row selection
+- Bulk actions
+- Export to CSV/Excel
+- Column visibility toggle
+
+#### Analytics Card
+
+```tsx
+}
+/>
+```
+
+**Variants:**
+
+- Metric card (single value)
+- Chart card (with graph)
+- Progress card (with progress bar)
+- Comparison card (multiple metrics)
+
+#### Charts
+
+Using Recharts or Tremor library:
+
+- Line Chart (Trends over time)
+- Bar Chart (Comparisons)
+- Pie/Donut Chart (Distributions)
+- Area Chart (Cumulative data)
+- Heatmap (Activity patterns)
+
+## III. Web Client - Detailed Screens
+
+### 3.1 Authentication Pages
+
+#### Login Page
+
+**Layout:**
+
+```
+┌─────────────────────────────────────┐
+│ │
+│ [Logo] │
+│ │
+│ Sign in to GoodGo │
+│ │
+│ ┌───────────────────────────┐ │
+│ │ Email │ │
+│ │ [ ] │ │
+│ └───────────────────────────┘ │
+│ │
+│ ┌───────────────────────────┐ │
+│ │ Password │ │
+│ │ [ ] │ │
+│ └───────────────────────────┘ │
+│ │
+│ [ ] Remember me Forgot password? │
+│ │
+│ ┌───────────────────────────┐ │
+│ │ Sign in │ │
+│ └───────────────────────────┘ │
+│ │
+│ ─────── OR ─────── │
+│ │
+│ ┌───────────────────────────┐ │
+│ │ 🔵 Continue with Google │ │
+│ └───────────────────────────┘ │
+│ │
+│ Don't have an account? Sign up │
+│ │
+└─────────────────────────────────────┘
+```
+
+**Key Elements:**
+
+- Centered card (max-width: 400px)
+- Logo at top
+- H1: "Sign in to GoodGo"
+- Email input (with validation)
+- Password input (with show/hide toggle)
+- Remember me checkbox
+- Forgot password link
+- Primary button: "Sign in"
+- Divider: "OR"
+- OAuth buttons (Google, optionally GitHub)
+- Sign up link at bottom
+
+**Validation:**
+
+- Real-time email format validation
+- Password strength indicator (on sign up)
+- Error messages below inputs
+- Success message on successful login
+- Loading state on button during auth
+
+#### Register Page
+
+Similar to login with additional fields:
+
+- Full Name
+- Email
+- Password
+- Confirm Password
+- Terms & Conditions checkbox
+- Password strength meter
+- Sign up button
+- Already have account? Sign in link
+
+**Password Strength Indicator:**
+
+```tsx
+
+```
+
+Levels:
+
+- Weak (0-25%): Red
+- Fair (26-50%): Orange
+- Good (51-75%): Yellow
+- Strong (76-100%): Green
+
+#### Forgot Password Page
+
+**Flow:**
+
+1. Enter email → Send reset link
+2. Check email → Click link
+3. Enter new password → Confirm
+4. Success → Redirect to login
+
+### 3.2 Main Chat Interface
+
+**Layout (Desktop):**
+
+```
+┌──────────┬─────────────────────────────────────────┬────────────┐
+│ │ │ │
+│ SIDEBAR │ MAIN CHAT AREA │ PANEL │
+│ │ │ (optional) │
+│ Convos │ │ │
+│ │ ┌─────────────────────────────────┐ │ Settings │
+│ [+New] │ │ AI: How can I help you? │ │ or │
+│ │ └─────────────────────────────┘ │ Info │
+│ • Chat1 │ │ │
+│ • Chat2 │ ┌─────────────────────────────────┐ │ │
+│ • Chat3 │ │ You: Hello │ │ │
+│ │ └─────────────────────────────────┘ │ │
+│ │ │ │
+│ │ ┌─────────────────────────────────┐ │ │
+│ │ │ AI: Hi! I'm here to help... │ │ │
+│ │ └─────────────────────────────────┘ │ │
+│ │ │ │
+│ [User] │ ┌─────────────────────────────────┐ │ │
+│ Avatar │ │ [Type a message...] [Send]│ │ │
+│ Settings│ └─────────────────────────────────┘ │ │
+│ │ │ │
+└──────────┴─────────────────────────────────────────┴────────────┘
+```
+
+**Components Breakdown:**
+
+1. **Left Sidebar** (280px wide)
+
+ - New Chat button (sticky top)
+ - Search conversations
+ - Conversation list (scrollable)
+ - User profile (sticky bottom)
+
+2. **Main Chat Area** (flex-1, max 768px centered)
+
+ - Header (conversation title, options)
+ - Messages container (scrollable, auto-scroll to bottom)
+ - Typing indicator
+ - Input area (sticky bottom)
+
+3. **Right Panel** (320px, optional, collapsible)
+
+ - Conversation settings
+ - Participants
+ - Shared files
+ - Quick actions
+
+**Message Types:**
+
+1. **Text Message**
+
+ - Plain text with markdown support
+ - Code blocks with syntax highlighting
+ - Links with preview cards
+
+2. **System Message**
+
+ - Centered, grey text
+ - Used for timestamps, status updates
+
+3. **Error Message**
+
+ - Red border, error icon
+ - Retry button
+
+4. **Loading Message**
+
+ - Skeleton or typing indicator
+ - Shown while AI is generating
+
+**Message Actions (on hover):**
+
+- Copy message
+- Edit (user messages only)
+- Delete (user messages only)
+- Regenerate (AI messages)
+- Like/Dislike (feedback)
+- Share
+
+### 3.3 User Settings
+
+**Navigation Tabs:**
+
+- Profile
+- Preferences
+- Security
+- Notifications
+- Billing (if applicable)
+- API Keys (for developers)
+
+**Profile Tab:**
+
+```
+Avatar Upload
+┌──────────┐
+│ [👤] │ Change avatar
+└──────────┘
+
+Full Name: [John Doe ]
+Email: [john@example.com ] (verified ✓)
+Username: [@johndoe ]
+Bio: [Software developer... ]
+ [ ]
+
+[Save Changes] [Cancel]
+```
+
+**Preferences Tab:**
+
+- Language selection
+- Theme (Dark/Light/Auto)
+- Chat settings
+ - Auto-scroll to new messages
+ - Show timestamps
+ - Message grouping
+ - Font size
+- Accessibility
+ - High contrast mode
+ - Screen reader optimizations
+
+**Security Tab:**
+
+- Change password
+- Two-factor authentication (2FA)
+ - Enable/Disable
+ - QR code for setup
+- Active sessions
+ - List of devices
+ - Revoke access option
+- Delete account (danger zone)
+
+## IV. Web Admin - Detailed Screens
+
+### 4.1 Dashboard (Overview)
+
+**Layout:**
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ HEADER: Dashboard [User] [Settings] │
+├────────────┬────────────────────────────────────────────────┤
+│ │ │
+│ SIDEBAR │ METRICS ROW │
+│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
+│ • Dashboard│ │ Users │ │Messages│ │ Active │ │Revenue │ │
+│ • Users │ │ 12.3K │ │ 45K │ │ 892 │ │ $1.2K │ │
+│ • Analytics│ │ +12% │ │ +8% │ │ +5% │ │ +15% │ │
+│ • Messages │ └────────┘ └────────┘ └────────┘ └────────┘ │
+│ • Settings │ │
+│ │ CHARTS ROW │
+│ Admin │ ┌─────────────────────┐ ┌──────────────────┐ │
+│ │ │ │ │ │ │
+│ [Logout] │ │ User Growth Chart │ │ Revenue Chart │ │
+│ │ │ │ │ │ │
+│ │ └─────────────────────┘ └──────────────────┘ │
+│ │ │
+│ │ RECENT ACTIVITY TABLE │
+│ │ ┌──────────────────────────────────────────┐ │
+│ │ │ User │ Action │ Time │ Status │ │
+│ │ ├──────────────────────────────────────────┤ │
+│ │ │ John │ Signed │ 2m ago │ Success │ │
+│ │ │ Jane │ Message │ 5m ago │ Completed │ │
+│ │ └──────────────────────────────────────────┘ │
+│ │ │
+└────────────┴────────────────────────────────────────────────┘
+```
+
+**Metric Cards (Top Row):**
+
+Each card shows:
+
+- Icon (relevant to metric)
+- Label (e.g., "Total Users")
+- Large number value
+- Percentage change (with trend arrow)
+- Sparkline chart (mini trend)
+- Time period (e.g., "vs last month")
+
+**Charts:**
+
+1. **User Growth Chart** (Line Chart)
+
+ - X-axis: Time (days/weeks/months)
+ - Y-axis: User count
+ - Multiple lines (total, active, new)
+ - Interactive tooltip on hover
+
+2. **Revenue Chart** (Area Chart)
+
+ - Cumulative revenue over time
+ - Color gradient fill
+ - Comparison to previous period
+
+3. **Message Activity Heatmap**
+
+ - Days of week vs hours
+ - Color intensity = activity level
+
+**Recent Activity Table:**
+
+- User avatar + name
+- Action performed
+- Timestamp (relative)
+- Status badge
+- Quick actions (view, edit)
+- Pagination at bottom
+
+### 4.2 User Management
+
+**Features:**
+
+- User list with search/filter
+- User details modal
+- Bulk actions (activate, deactivate, delete)
+- User roles management
+- Activity logs
+
+**User List Table:**
+
+```
+┌────────────────────────────────────────────────────────────┐
+│ Users [+ Add User] │
+├────────────────────────────────────────────────────────────┤
+│ 🔍 Search users... 🔽 Filter 📊 Export │
+├────────────────────────────────────────────────────────────┤
+│ ☐ │Avatar│ Name │ Email │ Role │ Status │ │
+├────────────────────────────────────────────────────────────┤
+│ ☐ │ [👤] │ John Doe │ john@mail.com │ Admin │ Active │ │
+│ ☐ │ [👤] │ Jane Doe │ jane@mail.com │ User │ Active │ │
+│ ☐ │ [👤] │ Bob Smith │ bob@mail.com │ User │ Inactive│ │
+├────────────────────────────────────────────────────────────┤
+│ Showing 1-10 of 150 [< 1 2 3 4 5 >] │
+└────────────────────────────────────────────────────────────┘
+```
+
+**Filters:**
+
+- Role (Admin, User, Moderator)
+- Status (Active, Inactive, Banned)
+- Date range (Created, Last active)
+- Sort by (Name, Email, Date, Activity)
+
+**User Details Modal:**
+
+- Profile information
+- Activity timeline
+- Message history
+- Edit user button
+- Deactivate/Delete buttons
+
+### 4.3 Analytics
+
+**Tabs:**
+
+- Overview
+- Users
+- Messages
+- Performance
+- Custom Reports
+
+**Overview Tab:**
+
+- Key metrics summary
+- Trends visualization
+- Comparison charts (day/week/month/year)
+- Export to PDF/CSV
+
+**Users Tab:**
+
+- User acquisition funnel
+- Retention chart
+- Cohort analysis
+- Geographic distribution map
+- Device/browser breakdown
+
+**Messages Tab:**
+
+- Total messages sent
+- Average messages per user
+- Peak activity times
+- Popular topics/keywords
+- Sentiment analysis
+
+**Performance Tab:**
+
+- API response times
+- Error rates
+- Uptime statistics
+- Server resources (CPU, Memory, Disk)
+
+### 4.4 System Settings
+
+**Categories:**
+
+- General
+- Email
+- Security
+- API
+- Advanced
+
+**General Settings:**
+
+- Site name
+- Site logo
+- Default language
+- Timezone
+- Maintenance mode toggle
+
+**Email Settings:**
+
+- SMTP configuration
+- Email templates
+- Test email function
+
+**Security Settings:**
+
+- Password policy
+- Session timeout
+- IP whitelist/blacklist
+- Rate limiting
+- CORS settings
+
+**API Settings:**
+
+- API keys management
+- Webhooks configuration
+- Rate limits
+- Documentation link
+
+## V. Responsive Design
+
+### 5.1 Breakpoints Strategy
+
+**Mobile First Approach:**
+
+```css
+/* Mobile (default) */
+/* < 640px */
+
+/* Tablet */
+@media (min-width: 768px) {
+ /* Tablet styles */
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+ /* Desktop styles */
+}
+
+/* Large Desktop */
+@media (min-width: 1280px) {
+ /* Large desktop styles */
+}
+```
+
+### 5.2 Mobile Layout (< 768px)
+
+**Web Client Mobile:**
+
+```
+┌──────────────────┐
+│ [☰] GoodGo [⚙] │ ← Header (fixed)
+├──────────────────┤
+│ │
+│ ┌────────────┐ │
+│ │ AI: Hello │ │
+│ └────────────┘ │
+│ │
+│ ┌────────────┐ │
+│ │ You: Hi │ │
+│ └────────────┘ │
+│ │
+│ │
+│ │ ← Messages (scrollable)
+│ │
+├──────────────────┤
+│ [Type...] [Send] │ ← Input (fixed)
+└──────────────────┘
+```
+
+**Mobile Adaptations:**
+
+- Hide sidebar by default (hamburger menu)
+- Full-width messages
+- Sticky header + input
+- Swipe gestures (back, delete)
+- Bottom tab navigation (optional)
+
+**Web Admin Mobile:**
+
+```
+┌──────────────────┐
+│ [☰] Dashboard │ ← Header with menu
+├──────────────────┤
+│ │
+│ ┌──────────────┐ │
+│ │ Users: 12.3K │ │
+│ │ +12% ↗ │ │
+│ └──────────────┘ │
+│ │
+│ ┌──────────────┐ │ ← Stacked metrics
+│ │ Messages:45K │ │
+│ │ +8% ↗ │ │
+│ └──────────────┘ │
+│ │
+│ [View Details] │
+│ │
+└──────────────────┘
+```
+
+**Admin Mobile Adaptations:**
+
+- Collapsible sidebar
+- Stacked metric cards
+- Horizontal scroll for tables
+- Simplified charts
+- Touch-friendly buttons (min 44px)
+
+### 5.3 Tablet Layout (768px - 1024px)
+
+**Two-column layout:**
+
+- Show sidebar (toggleable)
+- Medium-width messages (60%)
+- Side-by-side charts (admin)
+
+### 5.4 Touch Interactions
+
+**Touch Targets:**
+
+- Minimum size: 44x44px (iOS HIG)
+- Spacing between: 8px minimum
+- Active state feedback (scale down on press)
+
+**Gestures:**
+
+- Swipe left: Delete message/conversation
+- Swipe right: Archive/mark as read
+- Pull down: Refresh
+- Long press: Context menu
+
+## VI. Accessibility (WCAG 2.1 AA)
+
+### 6.1 Color Contrast
+
+**Requirements:**
+
+- Normal text (< 18px): 4.5:1 minimum
+- Large text (≥ 18px): 3:1 minimum
+- UI components: 3:1 minimum
+
+**Testing Tools:**
+
+- WebAIM Contrast Checker
+- Chrome DevTools Accessibility tab
+- WAVE browser extension
+
+### 6.2 Keyboard Navigation
+
+**Focus Indicators:**
+
+```css
+*:focus-visible {
+ outline: 2px solid var(--accent-primary);
+ outline-offset: 2px;
+}
+```
+
+**Tab Order:**
+
+Logical flow:
+
+1. Skip to main content link
+2. Header navigation
+3. Main content
+4. Sidebar
+5. Footer
+
+**Keyboard Shortcuts:**
+
+- `Tab`: Next element
+- `Shift + Tab`: Previous element
+- `Enter`: Activate button/link
+- `Space`: Toggle checkbox/select
+- `Escape`: Close modal/dropdown
+- `Arrow keys`: Navigate lists/menus
+
+**Custom Shortcuts (Chat):**
+
+- `Ctrl/Cmd + K`: Open search
+- `Ctrl/Cmd + N`: New conversation
+- `Ctrl/Cmd + /`: Show shortcuts help
+- `Alt + ↑/↓`: Navigate conversations
+
+### 6.3 Screen Reader Support
+
+**Semantic HTML:**
+
+```html
+