Deploy DASS-21 app to Hugging Face Space

.dockerignore

@@ -0,0 +1,13 @@
+node_modules
+.venv
+.git
+.gitignore
+trained_bert_model.zip
+Untitled diagram-2026-06-22-073022.png
+Đồ án tốt nghiệp.pdf
+Đồ án tốt nghiệp.md
+chuong2.md
+chuong3.md
+dass21_dataset.csv
+dist
+README.md

.gitattributes

@@ -0,0 +1,3 @@
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,40 @@
+# OS / IDE
+.DS_Store
+Thumbs.db
+.vscode/
+.idea/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+*.local
+
+# Node / Frontend (Vite)
+node_modules/
+dist/
+dist-ssr/
+*.local
+*.tsbuildinfo
+
+# Python
+.venv/
+venv/
+env/
+ENV/
+__pycache__/
+*.py[cod]
+*$py.class
+.pytest_cache/
+.mypy_cache/
+.ruff_cache/
+.ipynb_checkpoints/
+
+# Machine Learning & Large Files
+trained_bert_model/
+trained_bert_model.zip
+*.zip
+*.tar.gz
+*.tgz

Dockerfile

@@ -0,0 +1,43 @@
+# --- Stage 1: Build React Frontend ---
+FROM node:20-alpine AS frontend-builder
+WORKDIR /app
+COPY package*.json tsconfig*.json vite.config.* ./
+RUN npm ci
+COPY src/ ./src
+COPY index.html ./
+RUN npm run build
+
+# --- Stage 2: Build FastAPI Backend ---
+FROM python:3.11-slim
+WORKDIR /app
+
+# Install build essentials if needed
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install python dependencies directly
+RUN pip install --no-cache-dir \
+    "fastapi>=0.115.0" \
+    "python-dotenv>=1.0.1" \
+    "uvicorn>=0.30.0" \
+    "transformers>=4.45.0" \
+    "safetensors>=0.4.0" \
+    https://download.pytorch.org/whl/cpu/torch-2.5.1%2Bcpu-cp311-cp311-linux_x86_64.whl
+
+# Copy backend files
+COPY app.py ./
+
+# Copy built frontend assets from Stage 1 to the dist folder
+COPY --from=frontend-builder /app/dist ./dist
+
+# Set environment variables
+ENV HOST=0.0.0.0
+ENV PORT=7860
+ENV BERT_MODEL_DIR=brianhuster/dass_bert
+
+# Expose the default port (Hugging Face Spaces uses 7860 by default)
+EXPOSE 7860
+
+# Run FastAPI app
+CMD ["python", "-m", "uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,18 @@
+---
+title: Dassbot
+emoji: 🧠
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# Dassbot - DASS-21 Screening App
+
+Mental health screening chatbot combining DASS-21, BERT, and Gemini API.
+
+## Features
+- **Stateless Architecture**: Chat sessions and scores are processed completely in RAM client-side and dynamically on memory, preserving absolute student privacy.
+- **BERT Classifier**: Evaluates natural language responses locally or dynamically to compute Likert scale scores (0-3).
+- **Gemini Assistant**: Delivers empathetic conversational turn guidance and final advice.

app.py

@@ -0,0 +1,308 @@
+from __future__ import annotations
+
+import json
+import os
+import urllib.error
+import urllib.request
+from pathlib import Path
+
+import torch
+from dotenv import load_dotenv
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel, Field
+from transformers import AutoModelForSequenceClassification, AutoTokenizer
+
+
+load_dotenv()
+
+ROOT_DIR = Path(__file__).resolve().parent
+DIST_DIR = ROOT_DIR / "dist"
+
+# Determine the model path or Hugging Face Hub repo ID
+BERT_MODEL_DIR_ENV = os.getenv("BERT_MODEL_DIR")
+if BERT_MODEL_DIR_ENV:
+    MODEL_PATH_STR = BERT_MODEL_DIR_ENV
+else:
+    local_model_path = ROOT_DIR / "trained_bert_model"
+    if local_model_path.exists():
+        MODEL_PATH_STR = str(local_model_path)
+    else:
+        MODEL_PATH_STR = "brianhuster/dass_bert"
+GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
+PRIMARY_MODEL = os.getenv("GEMINI_MODEL", "gemini-3.1-flash-lite")
+FALLBACK_MODELS = [
+    value.strip()
+    for value in os.getenv("GEMINI_FALLBACK_MODELS", "").split(",")
+    if value.strip()
+]
+LABELS = {0: "0", 1: "1", 2: "2", 3: "3", 4: "w"}
+
+app = FastAPI(title="DASS-21 Screening App")
+
+
+class AnalyzeRequest(BaseModel):
+    question: str = Field(min_length=1)
+    answer: str = Field(min_length=1)
+
+
+class AnalyzeResponse(BaseModel):
+    label: int
+    score: int | None
+    confidence: float
+    needsClarification: bool
+    reply: str
+    model: str | None = None
+
+
+class AdviceRequest(BaseModel):
+    assessment: dict = Field(default_factory=dict)
+    messages: list[dict] = Field(default_factory=list)
+
+
+class AdviceResponse(BaseModel):
+    reply: str
+    riskLevel: str
+    model: str | None = None
+
+
+# Check if model exists locally. If not, assume it's a Hugging Face Hub repo ID
+if os.path.exists(MODEL_PATH_STR):
+    print(f"[MODEL] Loading model from local directory: {MODEL_PATH_STR}")
+    MODEL_TARGET = Path(MODEL_PATH_STR)
+else:
+    # If path has separators or starts with dot/slash, it was meant to be local but is missing
+    if MODEL_PATH_STR.startswith("/") or MODEL_PATH_STR.startswith("./") or MODEL_PATH_STR.startswith("../"):
+        raise FileNotFoundError(f"Local model directory not found: {MODEL_PATH_STR}")
+    print(f"[MODEL] Local directory not found. Loading model from Hugging Face Hub: {MODEL_PATH_STR}")
+    MODEL_TARGET = MODEL_PATH_STR  # type: ignore
+
+MODEL_DIR = MODEL_TARGET
+print(f"\n[MODEL] Bắt đầu nạp mô hình từ nguồn: {MODEL_TARGET}")
+print("[MODEL] Lưu ý: Nếu chạy lần đầu, quá trình tải tự động mô hình (~1.1GB) từ Hugging Face Hub sẽ chạy ngầm. Vui lòng giữ kết nối Internet và chờ đợi từ 1-5 phút...\n")
+
+tokenizer = AutoTokenizer.from_pretrained(MODEL_TARGET)
+print("[MODEL] Nạp thành công Tokenizer!")
+
+model = AutoModelForSequenceClassification.from_pretrained(MODEL_TARGET)
+print("[MODEL] Nạp thành công Model weights! Đang khởi động web server...\n")
+
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+model.to(device)
+model.eval()
+
+
+def gemini_json_reply(prompt: str, fallback_reply: str, fallback_risk: str = "low") -> dict[str, str]:
+    if not GEMINI_API_KEY:
+        print("[GEMINI] Không tìm thấy GEMINI_API_KEY. Sử dụng câu trả lời dự phòng (fallback).")
+        return {"reply": fallback_reply, "riskLevel": fallback_risk, "model": "fallback"}
+
+    for candidate_model in [PRIMARY_MODEL, *FALLBACK_MODELS]:
+        url = (
+            f"https://generativelanguage.googleapis.com/v1beta/models/"
+            f"{candidate_model}:generateContent?key={GEMINI_API_KEY}"
+        )
+        body = {
+            "contents": [{"parts": [{"text": prompt}]}],
+            "generationConfig": {
+                "temperature": 0.6,
+                "responseMimeType": "application/json",
+            },
+        }
+        request = urllib.request.Request(
+            url,
+            data=json.dumps(body).encode("utf-8"),
+            headers={"Content-Type": "application/json"},
+            method="POST",
+        )
+
+        try:
+            print(f"[GEMINI] Đang gọi mô hình '{candidate_model}'...")
+            with urllib.request.urlopen(request, timeout=45) as response:
+                raw = json.loads(response.read().decode("utf-8"))
+            text = (
+                raw.get("candidates", [{}])[0]
+                .get("content", {})
+                .get("parts", [{}])[0]
+                .get("text", "")
+            )
+            parsed = json.loads(text)
+            if isinstance(parsed, dict) and isinstance(parsed.get("reply"), str):
+                print(f"[GEMINI] Gọi mô hình '{candidate_model}' thành công!")
+                print(f"[GEMINI] Phản hồi nhận được: {parsed['reply']}")
+                return {
+                    "reply": parsed["reply"],
+                    "riskLevel": parsed.get("riskLevel", "low"),
+                    "model": candidate_model,
+                }
+        except Exception as e:
+            print(f"[GEMINI] Lỗi khi gọi mô hình '{candidate_model}': {type(e).__name__} - {e}")
+            continue
+
+    print("[GEMINI] Tất cả các mô hình Gemini đều thất bại hoặc trả về dữ liệu sai định dạng. Sử dụng câu trả lời dự phòng (fallback).")
+    return {"reply": fallback_reply, "riskLevel": fallback_risk, "model": "fallback"}
+
+
+def build_turn_prompt(question: str, answer: str, label: str, confidence: float) -> str:
+    tone_guidelines = ""
+    if label == "0":
+        tone_guidelines = "- Tình trạng sinh viên đang tốt (nhãn 0): Khen ngợi nhẹ nhàng, ngắn gọn trong 1 câu ấm áp."
+    elif label == "1":
+        tone_guidelines = "- Tình trạng sinh viên bình thường (nhãn 1): An ủi và khích lệ nhẹ nhàng trong 1-2 câu."
+    elif label == "2":
+        tone_guidelines = "- Tình trạng sinh viên không tốt lắm (nhãn 2): Thể hiện sự đồng cảm sâu sắc, trấn an, giải thích nguyên nhân theo hướng tích cực, đề xuất giải pháp ngắn gọn và lời động viên trong 3-4 câu."
+    elif label == "3":
+        tone_guidelines = "- Tình trạng sinh viên khá tệ (nhãn 3): Thể hiện sự đồng cảm cao nhất, xoa dịu tinh thần, định hướng suy nghĩ tích cực hơn, khuyên nghỉ ngơi/chia sẻ với người thân và đưa ra lời khuyên thực tế trong 3-4 câu."
+    else:
+        tone_guidelines = "- Câu trả lời có thể mơ hồ hoặc chưa rõ ràng. Hãy nhẹ nhàng khuyến khích sinh viên chia sẻ chi tiết hơn một cách tinh tế."
+
+    return f"""
+Hãy đóng vai như thể bạn là một trợ lý ảo tư vấn tâm lý học của Đại học Bách khoa Hà Nội (HUST). Bạn có phong cách nói chuyện vô cùng tích cực, ấm áp và đồng cảm cao với sinh viên.
+
+Nhiệm vụ & Nguyên tắc hội thoại:
+- Xưng hô thân thiện, gần gũi (dùng "mình" và "bạn").
+- Bạn TUYỆT ĐỐI không được hỏi thêm bất kỳ câu hỏi nào. Chỉ đưa ra lời khuyên, sự an ủi, thấu hiểu hoặc khen ngợi.
+- Không chẩn đoán bệnh lý hay nói giọng bác sĩ lâm sàng.
+- Hướng dẫn phong cách phản hồi theo nhãn điểm được phân loại:
+{tone_guidelines}
+
+Ngữ cảnh hiện tại:
+- Câu hỏi khảo sát DASS-21: {question}
+- Câu trả lời của sinh viên: '{answer}'
+
+Hãy trả về JSON hợp lệ theo cấu trúc chính xác:
+{{"reply": "nội dung phản hồi ấm áp của bạn"}}
+""".strip()
+
+
+def build_final_advice_prompt(assessment: dict, conversation: str) -> str:
+    top_concern = assessment.get("topConcernLabel", "n/a")
+    return f"""
+Hãy đóng vai như thể bạn là một trợ lý ảo tư vấn tâm lý học của Đại học Bách khoa Hà Nội (HUST). Bạn đang đưa ra những lời khuyên tổng kết và lời tạm biệt sau khi sinh viên đã hoàn thành cuộc khảo sát DASS-21.
+
+Nhiệm vụ & Nguyên tắc hội thoại:
+- Chúc mừng sinh viên đã kiên nhẫn cùng bạn hoàn thành tất cả các câu hỏi đánh giá.
+- Thể hiện sự đồng cảm, cảm ơn sinh viên đã dành thời gian chia sẻ chân thành.
+- Nhận xét kết quả sàng lọc tinh thần bằng những lời lẽ tích cực, mang tính khích lệ:
+  + Stress: {assessment.get("stress", "n/a")}
+  + Lo âu: {assessment.get("anxiety", "n/a")}
+  + Trầm cảm: {assessment.get("depression", "n/a")}
+  + Yếu tố nổi bật nhất: {top_concern}
+- Đưa ra lời khuyên thiết thực (chế độ nghỉ ngơi, gặp gỡ bạn bè, quản lý thời gian học tập tại Bách khoa).
+- Nhấn mạnh rằng nhà trường và các trợ lý ảo/thầy cô sẽ luôn đồng hành, sẵn sàng lắng nghe và hỗ trợ bạn bất cứ lúc nào.
+- Tạm biệt sinh viên bằng lời chúc ấm áp (dùng xưng hô "mình" và "bạn").
+- Độ dài khoảng 8-10 câu.
+
+Hãy trả về JSON hợp lệ theo cấu trúc chính xác:
+{{"reply": "nội dung lời khuyên và lời chào tạm biệt đầy đủ của bạn", "riskLevel": "low" | "moderate" | "high"}}
+""".strip()
+
+
+@app.get("/api/health")
+def health() -> dict[str, object]:
+    return {
+        "ok": True,
+        "bert": {
+            "status": "ok",
+            "device": str(device),
+            "model_dir": str(MODEL_DIR),
+        },
+        "gemini": bool(GEMINI_API_KEY),
+    }
+
+
+@app.post("/api/dass/analyze", response_model=AnalyzeResponse)
+def analyze(payload: AnalyzeRequest) -> AnalyzeResponse:
+    print(f"\n--- [API /api/dass/analyze] Nhận yêu cầu ---")
+    print(f"Câu hỏi: {payload.question}")
+    print(f"Câu trả lời của sinh viên: '{payload.answer}'")
+
+    inputs = tokenizer(
+        payload.question,
+        payload.answer,
+        return_tensors="pt",
+        truncation=True,
+        padding=True,
+        max_length=192,
+    )
+    inputs = {key: value.to(device) for key, value in inputs.items()}
+
+    with torch.no_grad():
+        outputs = model(**inputs)
+        probabilities = torch.softmax(outputs.logits, dim=-1)[0]
+        label = int(torch.argmax(probabilities).item())
+        confidence = float(probabilities[label].item())
+
+    print(f"[BERT] Kết quả phân loại: nhãn={label} (Điểm quy đổi={label if label in {0, 1, 2, 3} else 'N/A'})")
+    print(f"[BERT] Độ tin cậy (Confidence): {confidence:.4f}")
+
+    if label == 4 or confidence < 0.45:
+        reason = "nhãn = 4 (lạc đề/off-topic)" if label == 4 else f"độ tin cậy {confidence:.4f} thấp hơn ngưỡng 0.45"
+        print(f"[BERT] Yêu cầu làm rõ (Clarification Needed): {reason}")
+        return AnalyzeResponse(
+            label=label,
+            score=None,
+            confidence=confidence,
+            needsClarification=True,
+            reply="Mình chưa chắc mình hiểu đúng ý bạn. Bạn có thể trả lời lại ngắn gọn và trực tiếp hơn theo đúng câu hỏi này không?",
+            model="bert",
+        )
+
+    fallback_reply = (
+        "Cảm ơn bạn đã chia sẻ. Nghe như điều này đang ảnh hưởng bạn khá nhiều; mình sẽ ghi nhận để xem tổng thể sau."
+        if label == 3
+        else "Cảm ơn bạn đã chia sẻ, mình đã hiểu hơn rồi."
+    )
+    
+    print("[BERT] Đủ độ tin cậy. Đang chuyển tiếp sang Gemini để tạo phản hồi đồng cảm...")
+    reply = gemini_json_reply(
+        build_turn_prompt(payload.question, payload.answer, LABELS.get(label, str(label)), confidence),
+        fallback_reply,
+    )
+
+    print(f"--- Kết quả phản hồi gửi về FE ---")
+    print(f"Nhãn điểm: {label if label in {0, 1, 2, 3} else None}")
+    print(f"Phản hồi: {reply['reply']}")
+    print(f"Mô hình thực tế sử dụng: {reply.get('model')}\n")
+
+    return AnalyzeResponse(
+        label=label,
+        score=label if label in {0, 1, 2, 3} else None,
+        confidence=confidence,
+        needsClarification=False,
+        reply=reply["reply"],
+        model=reply.get("model"),
+    )
+
+
+@app.post("/api/chat", response_model=AdviceResponse)
+def chat(payload: AdviceRequest) -> AdviceResponse:
+    print(f"\n--- [API /api/chat] Nhận yêu cầu tư vấn ---")
+    print(f"Kết quả phân tích: {payload.assessment}")
+    conversation = "\n".join(
+        f"{message.get('role', 'user')}: {message.get('content', '')}"
+        for message in payload.messages[-10:]
+        if isinstance(message, dict) and isinstance(message.get("content"), str)
+    )
+    print(f"Lịch sử hội thoại gửi lên:\n{conversation}")
+
+    reply = gemini_json_reply(
+        build_final_advice_prompt(payload.assessment, conversation),
+        "Mình nghe thấy bạn đang cần được hỗ trợ thêm. Nếu cảm thấy quá tải, hãy nói với người thân hoặc một chuyên gia nhé.",
+        "moderate",
+    )
+
+    print(f"--- Phản hồi tư vấn gửi về FE ---")
+    print(f"Tư vấn: {reply['reply']}")
+    print(f"Mức độ rủi ro: {reply.get('riskLevel')}")
+    print(f"Mô hình thực tế sử dụng: {reply.get('model')}\n")
+
+    return AdviceResponse(
+        reply=reply["reply"],
+        riskLevel=reply.get("riskLevel", "low"),
+        model=reply.get("model"),
+    )
+
+
+if DIST_DIR.exists():
+    app.mount("/", StaticFiles(directory=DIST_DIR, html=True), name="dist")

index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="vi">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Ứng dụng sàng lọc stress, lo âu, trầm cảm bằng DASS-21."
+    />
+    <title>DASS-21 Screening</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "dass21-screening-app",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently -k \"uv run uvicorn app:app --host 127.0.0.1 --port 3001\" \"vite\"",
+    "dev:client": "vite",
+    "dev:server": "uv run uvicorn app:app --host 127.0.0.1 --port 3001",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "start": "uv run uvicorn app:app --host 127.0.0.1 --port 3001"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.8",
+    "@vitejs/plugin-react": "^5.0.1",
+    "concurrently": "^9.2.1",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.4"
+  }
+}

src/App.tsx

@@ -0,0 +1,701 @@
+import { useEffect, useMemo, useState, useRef, type FormEvent } from 'react';
+import {
+  getSeverity,
+  questions,
+  scaleDescriptions,
+  scaleLabels,
+  scoreScale,
+  answerOptions,
+  type AnswerValue,
+  type Scale,
+} from './dass';
+
+type Stage = 'home' | 'questionnaire' | 'results' | 'chat';
+
+type Message = {
+  id: string;
+  role: 'assistant' | 'user';
+  content: string;
+};
+
+type AnalyzeResponse = {
+  label: number;
+  score: AnswerValue | null;
+  confidence: number;
+  needsClarification: boolean;
+  reply: string;
+};
+
+type AdviceResponse = {
+  reply: string;
+  riskLevel: 'low' | 'moderate' | 'high';
+};
+
+const initialAnswers: (AnswerValue | null)[] = Array.from({ length: questions.length }, () => null);
+const maxScaleScore = 42;
+
+function App() {
+  const [stage, setStage] = useState<Stage>('home');
+  const [answers, setAnswers] = useState<(AnswerValue | null)[]>(initialAnswers);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [adviceRiskLevel, setAdviceRiskLevel] = useState<'low' | 'moderate' | 'high'>('low');
+  const [showPrivacyModal, setShowPrivacyModal] = useState(false);
+  const [consentChecked, setConsentChecked] = useState(false);
+
+  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
+    const saved = localStorage.getItem('theme');
+    if (saved === 'light' || saved === 'dark') return saved;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const renderThemeToggle = () => (
+    <button
+      className="theme-toggle-btn"
+      onClick={() => setTheme((prev) => (prev === 'light' ? 'dark' : 'light'))}
+      type="button"
+      aria-label="Toggle theme"
+    >
+      {theme === 'light' ? (
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      )}
+    </button>
+  );
+
+  const handleDeclineConsent = () => {
+    setShowPrivacyModal(false);
+    setConsentChecked(false);
+  };
+
+  const handleAcceptConsent = () => {
+    if (consentChecked) {
+      setShowPrivacyModal(false);
+      startQuestionnaire();
+    }
+  };
+
+  const chatThreadRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (chatThreadRef.current) {
+      chatThreadRef.current.scrollTop = chatThreadRef.current.scrollHeight;
+    }
+  }, [messages, loading]);
+
+  const currentQuestion = questions[currentIndex];
+  const selectedAnswer = answers[currentIndex];
+  const answeredCount = answers.filter((answer) => answer !== null).length;
+  const progress = Math.round((answeredCount / questions.length) * 100);
+
+  const scores = useMemo(() => scoreScale(answers), [answers]);
+  const orderedScales: Scale[] = ['stress', 'anxiety', 'depression'];
+  const resultCards = orderedScales.map((scale) => {
+    const score = scores[scale];
+    const severity = getSeverity(scale, score);
+    return {
+      scale,
+      score,
+      severity,
+      percent: Math.min(100, Math.round((score / maxScaleScore) * 100)),
+    };
+  });
+
+  const topConcern = [...resultCards].sort((a, b) => b.score - a.score)[0];
+  const assessmentSummary = useMemo(
+    () => ({
+      stress: scores.stress,
+      anxiety: scores.anxiety,
+      depression: scores.depression,
+      topConcernLabel: `${scaleLabels[topConcern.scale]} · ${topConcern.severity.label}`,
+    }),
+    [scores, topConcern],
+  );
+
+  const isCompleted = answers.every((answer) => answer !== null);
+
+  const restart = () => {
+    setStage('home');
+    setAnswers(initialAnswers);
+    setCurrentIndex(0);
+    setMessages([]);
+    setInput('');
+    setLoading(false);
+    setError(null);
+    setAdviceRiskLevel('low');
+    setConsentChecked(false);
+    setShowPrivacyModal(false);
+  };
+
+  const startQuestionnaire = () => {
+    setStage('questionnaire');
+    setAnswers(initialAnswers);
+    setCurrentIndex(0);
+    setMessages([
+      {
+        id: `assistant-${Date.now()}`,
+        role: 'assistant',
+        content:
+          'Chào bạn! Mình là trợ lý ảo hỗ trợ sàng lọc sức khỏe tinh thần của Đại học Bách khoa Hà Nội (HUST). Mình sẽ đồng hành cùng bạn thực hiện bài đánh giá cảm nhận qua bộ câu hỏi DASS-21. Bạn cứ chia sẻ tự nhiên theo cảm nhận của mình nhé.',
+      },
+      {
+        id: `assistant-q-${Date.now()}`,
+        role: 'assistant',
+        content: `Câu 1/${questions.length}: ${questions[0].text}\n\nBạn có thể chia sẻ cảm nhận của mình về câu hỏi này không?`,
+      },
+    ]);
+    setInput('');
+    setError(null);
+    setLoading(false);
+  };
+
+  const callAnalyze = async (question: string, answer: string) => {
+    const response = await fetch('/api/dass/analyze', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ question, answer }),
+    });
+
+    const payload = (await response.json().catch(() => null)) as AnalyzeResponse | null;
+    if (!response.ok) {
+      throw new Error(payload?.reply || 'Không thể chấm điểm câu trả lời lúc này.');
+    }
+    return payload;
+  };
+
+  const callAdvice = async (messagesToSend: Message[]) => {
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        assessment: assessmentSummary,
+        messages: messagesToSend,
+      }),
+    });
+
+    const payload = (await response.json().catch(() => null)) as AdviceResponse | null;
+    if (!response.ok) {
+      throw new Error(payload?.reply || 'Không thể kết nối phần tư vấn.');
+    }
+    return payload;
+  };
+
+  const bootstrapAdvice = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const payload = await callAdvice([]);
+      if (!payload) {
+        throw new Error('Không thể khởi tạo phần tư vấn.');
+      }
+      setMessages([
+        {
+          id: `assistant-${Date.now()}`,
+          role: 'assistant',
+          content:
+            payload.reply ||
+            'Mình ở đây để lắng nghe bạn. Nếu muốn, bạn có thể kể thêm điều gì đang làm bạn nặng lòng nhất.',
+        },
+      ]);
+      setAdviceRiskLevel(payload.riskLevel || 'low');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Không thể khởi tạo phần tư vấn.');
+      setMessages([
+        {
+          id: `assistant-${Date.now()}`,
+          role: 'assistant',
+          content:
+            'Mình chưa thể kết nối phần tư vấn lúc này. Hãy kiểm tra GEMINI_API_KEY rồi thử lại sau.',
+        },
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const submitQuestionnaireAnswer = async (text: string) => {
+    if (loading) return;
+
+    const questionIndex = currentIndex;
+    const question = questions[questionIndex];
+    const userMessage: Message = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: text,
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInput('');
+    setLoading(true);
+    setError(null);
+
+    try {
+      const payload = await callAnalyze(question.text, text);
+      if (!payload) {
+        throw new Error('Không thể chấm điểm câu trả lời lúc này.');
+      }
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `assistant-${Date.now()}`,
+          role: 'assistant',
+          content: payload.reply,
+        },
+      ]);
+
+      if (payload.needsClarification) {
+        return;
+      }
+
+      setAnswers((prev) => {
+        const next = [...prev];
+        next[questionIndex] = payload.score ?? 0;
+        return next;
+      });
+
+      const nextIndex = questionIndex + 1;
+      if (nextIndex >= questions.length) {
+        setStage('results');
+        return;
+      }
+
+      setCurrentIndex(nextIndex);
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `assistant-q-${Date.now()}`,
+          role: 'assistant',
+          content: `Câu ${nextIndex + 1}/${questions.length}: ${questions[nextIndex].text}\n\nBạn có thể chia sẻ cảm nhận của mình về câu hỏi này không?`,
+        },
+      ]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Không thể xử lý câu trả lời.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleQuestionnaireSend = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const text = input.trim();
+    if (!text) return;
+    await submitQuestionnaireAnswer(text);
+  };
+
+  const handleAdviceSend = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const text = input.trim();
+    if (!text || loading) return;
+
+    const userMessage: Message = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: text,
+    };
+
+    const nextMessages = [...messages, userMessage];
+    setMessages(nextMessages);
+    setInput('');
+    setLoading(true);
+    setError(null);
+
+    try {
+      const payload = await callAdvice(nextMessages);
+      if (!payload) {
+        throw new Error('Không thể kết nối phần tư vấn.');
+      }
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `assistant-${Date.now()}`,
+          role: 'assistant',
+          content: payload.reply,
+        },
+      ]);
+      setAdviceRiskLevel(payload.riskLevel || 'low');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Chatbot đang tạm gián đoạn.');
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `assistant-${Date.now()}`,
+          role: 'assistant',
+          content: 'Mình chưa trả lời được lúc này. Bạn có thể thử lại sau vài phút.',
+        },
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (stage === 'chat' && messages.length === 0 && !loading) {
+      void bootstrapAdvice();
+    }
+  }, [stage, messages.length, loading]);
+
+  if (stage === 'results') {
+    return (
+      <main className="app-shell">
+        {renderThemeToggle()}
+        <section className="hero-card results-card">
+          <div className="badge">Kết quả DASS-21</div>
+          <h1>Đây là bản tóm tắt sàng lọc của bạn</h1>
+          <p className="lead">
+            Kết quả này chỉ để tham khảo nhanh. Nếu bạn thấy khó chịu kéo dài, hãy cân nhắc tìm hỗ
+            trợ từ người thân, giảng viên cố vấn hoặc chuyên gia.
+          </p>
+
+          <div className="result-grid">
+            {resultCards.map(({ scale, score, severity, percent }) => (
+              <article key={scale} className={`score-card tone-${severity.tone}`}>
+                <div className="score-label">{scaleLabels[scale]}</div>
+                <div className="score-value">{score}</div>
+                <div className="score-meta">{severity.label}</div>
+                <div className="mini-bar" aria-hidden="true">
+                  <span style={{ width: `${percent}%` }} />
+                </div>
+                <p>{scaleDescriptions[scale]}</p>
+              </article>
+            ))}
+          </div>
+
+          <div className="result-dashboard">
+            <div className="highlight-panel">
+              <div>
+                <span className="panel-label">Mức nổi bật nhất</span>
+                <strong>
+                  {scaleLabels[topConcern.scale]} · {topConcern.severity.label}
+                </strong>
+              </div>
+              <p>
+                Nếu bạn thấy mất ngủ, kiệt sức hoặc ảnh hưởng việc học, nên cân nhắc trao đổi sớm
+                với người phù hợp.
+              </p>
+            </div>
+
+            {(topConcern.severity.tone === 'severe' || topConcern.severity.tone === 'extreme') && (
+              <div className="warning-banner">
+                Đây là mức cần chú ý. Hãy ưu tiên gặp người thân, cố vấn học tập hoặc chuyên gia tâm
+                lý sớm.
+              </div>
+            )}
+          </div>
+
+          <div className="result-actions">
+            <button className="secondary-button" onClick={restart} type="button">
+              Làm lại
+            </button>
+            <button
+              className="primary-button"
+              onClick={() => {
+                setMessages([]);
+                setStage('chat');
+              }}
+              type="button"
+            >
+              Nhận tư vấn từ Gemini
+            </button>
+          </div>
+
+          <div className="disclaimer">
+            BERT chỉ chấm điểm 0–3 cho từng câu; Gemini dùng để phản hồi thấu cảm và gợi ý bước tiếp
+            theo.
+          </div>
+        </section>
+      </main>
+    );
+  }
+
+  if (stage === 'chat') {
+    return (
+      <main className="app-shell">
+        {renderThemeToggle()}
+        <section className="hero-card chat-card">
+          <div className="messenger-header">
+            <div className="messenger-info">
+              <div className="messenger-avatar bg-gemini">G</div>
+              <div>
+                <h2>Trợ lý Gemini</h2>
+                <p className="messenger-status"><span className="status-dot"></span>Đang hoạt động</p>
+              </div>
+            </div>
+            <div className="messenger-actions">
+              <button className="action-icon-btn" type="button" onClick={() => setStage('results')}>
+                Xem kết quả DASS-21
+              </button>
+              <button className="action-icon-btn secondary" type="button" onClick={restart}>
+                Trang chủ
+              </button>
+            </div>
+          </div>
+
+          {adviceRiskLevel !== 'low' && (
+            <div className={`warning-banner risk-${adviceRiskLevel}`} style={{ margin: '12px 16px 0' }}>
+              {adviceRiskLevel === 'high'
+                ? 'Chatbot đang nhận thấy tín hiệu đáng chú ý. Nếu có ý nghĩ tự hại, hãy liên hệ người thân hoặc cơ sở y tế ngay.'
+                : 'Chatbot đang theo dõi thêm vì có dấu hiệu cần chú ý.'}
+            </div>
+          )}
+
+          {error && <div className="warning-banner" style={{ margin: '12px 16px 0' }}>{error}</div>}
+
+          <div className="chat-thread" ref={chatThreadRef} aria-live="polite">
+            {messages.map((message) => (
+              <div key={message.id} className={`chat-message ${message.role}`}>
+                {message.role === 'assistant' && (
+                  <div className="bubble-avatar bg-gemini">G</div>
+                )}
+                <div className="chat-bubble">
+                  {message.content}
+                </div>
+              </div>
+            ))}
+            {loading && (
+              <div className="chat-message assistant">
+                <div className="bubble-avatar bg-gemini">G</div>
+                <div className="chat-bubble typing">
+                  <span></span><span></span><span></span>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <form className="chat-input-area" onSubmit={handleAdviceSend}>
+            <input
+              type="text"
+              value={input}
+              onChange={(event) => setInput(event.target.value)}
+              placeholder="Nhập điều bạn muốn chia sẻ..."
+              disabled={loading}
+            />
+            <button className="send-icon-btn" type="submit" disabled={loading || !input.trim()}>
+              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+              </svg>
+            </button>
+          </form>
+        </section>
+      </main>
+    );
+  }
+
+  if (stage === 'questionnaire') {
+    return (
+      <main className="app-shell">
+        {renderThemeToggle()}
+        <section className="hero-card questionnaire-card">
+          <div className="messenger-header">
+            <div className="messenger-info">
+              <div className="messenger-avatar bg-dass">D</div>
+              <div>
+                <h2>Khảo sát DASS-21</h2>
+                <p className="messenger-status"><span className="status-dot"></span>Đang đánh giá</p>
+              </div>
+            </div>
+            <div className="progress-info">
+              <span>Câu hỏi {currentIndex + 1}/{questions.length}</span>
+              <div className="progress-bar-mini">
+                <div className="progress-fill-mini" style={{ width: `${progress}%` }} />
+              </div>
+            </div>
+          </div>
+
+          {error && <div className="warning-banner" style={{ margin: '12px 16px 0' }}>{error}</div>}
+
+          <div className="chat-thread" ref={chatThreadRef} aria-live="polite">
+            {messages.map((message) => (
+              <div key={message.id} className={`chat-message ${message.role}`}>
+                {message.role === 'assistant' && (
+                  <div className="bubble-avatar bg-dass">D</div>
+                )}
+                <div className="chat-bubble">
+                  {message.content}
+                </div>
+              </div>
+            ))}
+            {loading && (
+              <div className="chat-message assistant">
+                <div className="bubble-avatar bg-dass">D</div>
+                <div className="chat-bubble typing">
+                  <span></span><span></span><span></span>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="quick-replies">
+            {answerOptions.map((optionText, idx) => (
+              <button
+                key={idx}
+                type="button"
+                className="quick-reply-btn"
+                onClick={() => void submitQuestionnaireAnswer(optionText)}
+                disabled={loading}
+              >
+                {idx}. {optionText}
+              </button>
+            ))}
+          </div>
+
+          <form className="chat-input-area" onSubmit={handleQuestionnaireSend}>
+            <input
+              type="text"
+              value={input}
+              onChange={(event) => setInput(event.target.value)}
+              placeholder="Trả lời tự nhiên hoặc chọn nhanh nút phía trên..."
+              disabled={loading}
+            />
+            <button className="send-icon-btn" type="submit" disabled={loading || !input.trim()}>
+              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+              </svg>
+            </button>
+            <button className="cancel-pill-btn" type="button" onClick={restart}>
+              Hủy
+            </button>
+          </form>
+        </section>
+      </main>
+    );
+  }
+
+  return (
+    <>
+      <main className="app-shell">
+        {renderThemeToggle()}
+        <section className="hero-card landing-card">
+          <div className="badge">DASS-21 + BERT + Gemini</div>
+          <h1>Chatbot sàng lọc sức khỏe tinh thần bằng ngôn ngữ tự nhiên</h1>
+          <p className="lead">
+            Bạn trả lời tự nhiên như đang trò chuyện. BERT sẽ chấm điểm 0–3 cho từng câu DASS-21, rồi
+            Gemini phản hồi thấu cảm và tư vấn bước tiếp theo.
+          </p>
+
+          <div className="landing-grid">
+            <article className="landing-feature">
+              <strong>Trả lời bằng câu tự nhiên</strong>
+              <p>Không cần chọn số; chỉ cần mô tả cảm giác của bạn theo cách bình thường.</p>
+            </article>
+            <article className="landing-feature">
+              <strong>BERT chấm điểm tự động</strong>
+              <p>Mỗi câu trả lời được ánh xạ sang 0, 1, 2 hoặc 3 để tính điểm DASS-21.</p>
+            </article>
+            <article className="landing-feature">
+              <strong>Gemini phản hồi thấu cảm</strong>
+              <p>Chatbot sẽ nói lời nhẹ nhàng trong lúc làm bài và tư vấn sau khi có kết quả.</p>
+            </article>
+          </div>
+
+          <div className="landing-actions">
+            <button className="primary-button" onClick={() => setShowPrivacyModal(true)} type="button">
+              Bắt đầu sàng lọc
+            </button>
+            <button className="secondary-button" onClick={() => setStage('results')} type="button">
+              Xem mẫu kết quả
+            </button>
+          </div>
+
+          <div className="disclaimer">
+            Đây là công cụ hỗ trợ sàng lọc, không thay thế cho chẩn đoán chuyên môn.
+          </div>
+        </section>
+      </main>
+
+      {showPrivacyModal && (
+        <div className="modal-backdrop" onClick={handleDeclineConsent} aria-modal="true" role="dialog">
+          <div className="modal-container" onClick={(e) => e.stopPropagation()}>
+            <header className="modal-header">
+              <h2>ĐỒNG THUẬN TỰ NGUYỆN & QUYỀN RIÊNG TƯ</h2>
+              <button className="modal-close-btn" onClick={handleDeclineConsent} aria-label="Close modal">
+                &times;
+              </button>
+            </header>
+
+            <div className="modal-body">
+              <p className="modal-intro">
+                Chào bạn! Để đảm bảo an toàn thông tin và quyền riêng tư tuyệt đối của bạn khi tham gia sàng lọc sức khỏe tinh thần (DASS-21), vui lòng đọc và xác nhận các nội dung sau:
+              </p>
+
+              <section className="privacy-section">
+                <div className="privacy-section-title">
+                  <span className="privacy-icon" aria-hidden="true">🛡️</span>
+                  <span>1. Quyền riêng tư & Bảo mật (Stateless Architecture)</span>
+                </div>
+                <ul className="privacy-list">
+                  <li><strong>Ẩn danh tuyệt đối:</strong> Hệ thống không yêu cầu tài khoản, không lưu trữ MSSV, Họ tên, Email hay bất kỳ dữ liệu định danh nào của bạn.</li>
+                  <li><strong>Không lưu trữ ổ cứng (Stateless):</strong> Máy chủ hoàn toàn không lưu trữ cơ sở dữ liệu vật lý hay tệp tin nhật ký (log) về cuộc trò chuyện của bạn.</li>
+                  <li><strong>Lưu trữ tạm thời trong RAM:</strong> Toàn bộ câu trả lời và kết quả tính toán chỉ được lưu tạm thời trong bộ nhớ RAM của trình duyệt phía client.</li>
+                  <li><strong>Xóa sạch dấu vết:</strong> Ngay khi bạn đóng tab, làm mới trang (F5) hoặc nhấn nút "Làm lại", hàm <code>restart()</code> sẽ được kích hoạt để giải phóng và xóa sạch toàn bộ dữ liệu trên thiết bị.</li>
+                </ul>
+              </section>
+
+              <section className="privacy-section">
+                <div className="privacy-section-title">
+                  <span className="privacy-icon" aria-hidden="true">🤖</span>
+                  <span>2. Minh bạch thuật toán & Trách nhiệm (Explainability)</span>
+                </div>
+                <ul className="privacy-list">
+                  <li><strong>Thuật toán chấm điểm:</strong> Câu trả lời tự nhiên của bạn được mô hình BERT cục bộ phân tích để chấm điểm Likert (0–3) cho từng câu của thang đo tiêu chuẩn DASS-21.</li>
+                  <li><strong>Tư vấn từ AI:</strong> AI (Gemini) được sử dụng để phản hồi thấu cảm trong quá trình khảo sát và tư vấn các bước tiếp theo d��a trên điểm số của bạn.</li>
+                  <li><strong>Không thay thế chẩn đoán y khoa:</strong> Hệ thống chỉ có chức năng sàng lọc sơ bộ. Chatbot này <strong>không</strong> thay thế cho kết luận của bác sĩ y khoa hay chuyên gia tâm lý chuyên nghiệp.</li>
+                </ul>
+              </section>
+
+              <label className="consent-checkbox-wrapper">
+                <input
+                  type="checkbox"
+                  checked={consentChecked}
+                  onChange={(e) => setConsentChecked(e.target.checked)}
+                />
+                <span>Tôi xác nhận đã đọc, hiểu rõ cơ chế hoạt động ẩn danh của hệ thống và tự nguyện tham gia bài sàng lọc này.</span>
+              </label>
+            </div>
+
+            <footer className="modal-actions">
+              <button className="secondary-button" onClick={handleDeclineConsent} type="button">
+                Từ chối
+              </button>
+              <button
+                className="primary-button"
+                onClick={handleAcceptConsent}
+                disabled={!consentChecked}
+                type="button"
+              >
+                Đồng ý và Bắt đầu
+              </button>
+            </footer>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default App;

src/dass.ts

@@ -0,0 +1,119 @@
+export type Scale = 'stress' | 'anxiety' | 'depression';
+
+export type AnswerValue = 0 | 1 | 2 | 3;
+
+export type Question = {
+  id: number;
+  text: string;
+  scale: Scale;
+};
+
+export type SeverityBand = {
+  label: string;
+  min: number;
+  max: number;
+  tone: string;
+};
+
+export const answerOptions = [
+  'Không đúng với tôi chút nào cả',
+  'Đúng với tôi một phần, hoặc thỉnh thoảng mới đúng',
+  'Đúng với tôi phần nhiều, hoặc phần lớn thời gian là đúng',
+  'Hoàn toàn đúng với tôi, hoặc hầu hết thời gian là đúng',
+] as const;
+
+export const questions: Question[] = [
+  { id: 1, text: 'Tôi thấy khó mà thoải mái được', scale: 'stress' },
+  { id: 2, text: 'Tôi bị khô miệng', scale: 'anxiety' },
+  { id: 3, text: 'Tôi không thấy có chút cảm xúc tích cực nào', scale: 'depression' },
+  {
+    id: 4,
+    text: 'Tôi bị rối loạn nhịp thở (thở gấp, khó thở dù chẳng làm việc gì nặng)',
+    scale: 'anxiety',
+  },
+  { id: 5, text: 'Tôi thấy khó bắt tay vào công việc', scale: 'depression' },
+  { id: 6, text: 'Tôi đã phản ứng thái quá khi có những sự việc xảy ra', scale: 'stress' },
+  { id: 7, text: 'Tôi bị ra mồ hôi (chẳng hạn như mồ hôi tay...)', scale: 'anxiety' },
+  { id: 8, text: 'Tôi thấy mình đang suy nghĩ quá nhiều', scale: 'stress' },
+  {
+    id: 9,
+    text: 'Tôi lo lắng về những tình huống có thể khiến tôi hoảng sợ hoặc biến tôi thành trò cười',
+    scale: 'anxiety',
+  },
+  { id: 10, text: 'Tôi thấy mình chẳng có gì để mong đợi cả', scale: 'depression' },
+  { id: 11, text: 'Tôi thấy bản thân dễ bị kích động', scale: 'stress' },
+  { id: 12, text: 'Tôi thấy khó thư giãn được', scale: 'stress' },
+  { id: 13, text: 'Tôi cảm thấy chán nản, thất vọng', scale: 'depression' },
+  { id: 14, text: 'Tôi không chấp nhận được việc có cái gì đó xen vào cản trở việc tôi đang làm', scale: 'stress' },
+  { id: 15, text: 'Tôi thấy mình gần như hoảng loạn', scale: 'anxiety' },
+  { id: 16, text: 'Tôi không thấy hăng hái với bất kỳ việc gì nữa', scale: 'depression' },
+  { id: 17, text: 'Tôi cảm thấy mình chẳng đáng làm người', scale: 'depression' },
+  { id: 18, text: 'Tôi thấy mình khá dễ phật ý, tự ái', scale: 'stress' },
+  {
+    id: 19,
+    text: 'Tôi nghe thấy rõ tiếng nhịp tim dù chẳng làm việc gì cả (ví dụ, tiếng nhịp tim tăng, tiếng tim loạn nhịp)',
+    scale: 'anxiety',
+  },
+  { id: 20, text: 'Tôi hay sợ vô cớ', scale: 'anxiety' },
+  { id: 21, text: 'Tôi thấy cuộc sống vô nghĩa', scale: 'depression' },
+] as const;
+
+export const severityBands: Record<Scale, SeverityBand[]> = {
+  depression: [
+    { label: 'Bình thường', min: 0, max: 9, tone: 'normal' },
+    { label: 'Nhẹ', min: 10, max: 13, tone: 'mild' },
+    { label: 'Vừa', min: 14, max: 20, tone: 'moderate' },
+    { label: 'Nặng', min: 21, max: 27, tone: 'severe' },
+    { label: 'Rất nặng', min: 28, max: Infinity, tone: 'extreme' },
+  ],
+  anxiety: [
+    { label: 'Bình thường', min: 0, max: 7, tone: 'normal' },
+    { label: 'Nhẹ', min: 8, max: 9, tone: 'mild' },
+    { label: 'Vừa', min: 10, max: 14, tone: 'moderate' },
+    { label: 'Nặng', min: 15, max: 19, tone: 'severe' },
+    { label: 'Rất nặng', min: 20, max: Infinity, tone: 'extreme' },
+  ],
+  stress: [
+    { label: 'Bình thường', min: 0, max: 14, tone: 'normal' },
+    { label: 'Nhẹ', min: 15, max: 18, tone: 'mild' },
+    { label: 'Vừa', min: 19, max: 25, tone: 'moderate' },
+    { label: 'Nặng', min: 26, max: 33, tone: 'severe' },
+    { label: 'Rất nặng', min: 34, max: Infinity, tone: 'extreme' },
+  ],
+};
+
+export const scaleLabels: Record<Scale, string> = {
+  stress: 'Stress',
+  anxiety: 'Lo âu',
+  depression: 'Trầm cảm',
+};
+
+export const scaleDescriptions: Record<Scale, string> = {
+  stress: 'Căng thẳng, quá tải và khó thư giãn',
+  anxiety: 'Căng thẳng lo âu, hồi hộp và phản ứng sinh lý',
+  depression: 'Khí sắc thấp, mất hứng thú và tuyệt vọng',
+};
+
+export function getSeverity(scale: Scale, score: number) {
+  return (
+    severityBands[scale].find((band) => score >= band.min && score <= band.max) ??
+    severityBands[scale][severityBands[scale].length - 1]
+  );
+}
+
+export function scoreScale(answers: (AnswerValue | null)[]) {
+  const totals = questions.reduce<Record<Scale, number>>(
+    (acc, question, index) => {
+      const value = answers[index] ?? 0;
+      acc[question.scale] += value;
+      return acc;
+    },
+    { stress: 0, anxiety: 0, depression: 0 },
+  );
+
+  return {
+    stress: totals.stress * 2,
+    anxiety: totals.anxiety * 2,
+    depression: totals.depression * 2,
+  };
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

src/styles.css

@@ -0,0 +1,1419 @@
+:root {
+  color-scheme: light;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: #142033;
+  background:
+    radial-gradient(circle at top, rgba(84, 139, 255, 0.14), transparent 28%),
+    linear-gradient(180deg, #f7f9ff 0%, #eef4ff 45%, #eaf0fb 100%);
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  min-height: 100vh;
+}
+
+button {
+  font: inherit;
+}
+
+.app-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.hero-card {
+  width: min(960px, 100%);
+  border: 1px solid rgba(98, 128, 198, 0.14);
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 28px 80px rgba(61, 89, 145, 0.12);
+  backdrop-filter: blur(18px);
+  border-radius: 28px;
+  padding: 28px;
+}
+
+.landing-card {
+  display: grid;
+  gap: 18px;
+}
+
+.landing-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.landing-feature {
+  padding: 18px;
+  border-radius: 20px;
+  background: rgba(91, 123, 208, 0.06);
+  border: 1px solid rgba(91, 123, 208, 0.1);
+}
+
+.landing-feature strong {
+  display: block;
+  margin-bottom: 8px;
+  color: #16213a;
+}
+
+.landing-feature p {
+  margin: 0;
+  color: #5f6f8b;
+}
+
+.landing-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.top-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: flex-start;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(93, 131, 242, 0.12);
+  color: #3556a8;
+  font-size: 0.82rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 14px 0 10px;
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  line-height: 1.05;
+}
+
+.lead {
+  margin: 0;
+  max-width: 62ch;
+  color: #5f6f8b;
+}
+
+.progress-chip {
+  min-width: 110px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: rgba(91, 123, 208, 0.08);
+  border: 1px solid rgba(91, 123, 208, 0.1);
+  text-align: center;
+}
+
+.progress-chip span,
+.panel-label,
+.footer-note,
+.score-meta,
+.score-label,
+.helper-text,
+.disclaimer {
+  color: #63728b;
+}
+
+.progress-chip strong {
+  display: block;
+  font-size: 1.35rem;
+  color: #142033;
+}
+
+.progress-bar {
+  margin: 24px 0;
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(91, 123, 208, 0.12);
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #6ea8ff, #8b7dff, #70e0c8);
+}
+
+.question-card {
+  padding: 24px;
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 249, 255, 0.92));
+  border: 1px solid rgba(91, 123, 208, 0.12);
+}
+
+.question-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.chat-top {
+  align-items: flex-start;
+}
+
+.chat-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+h2 {
+  margin: 0 0 20px;
+  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
+  color: #16213a;
+}
+
+.options {
+  display: grid;
+  gap: 12px;
+}
+
+.option-button {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  gap: 14px;
+  align-items: center;
+  padding: 16px 18px;
+  border-radius: 18px;
+  border: 1px solid rgba(91, 123, 208, 0.14);
+  background: rgba(255, 255, 255, 0.9);
+  color: #183055;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    transform 0.18s ease,
+    border-color 0.18s ease,
+    background 0.18s ease;
+}
+
+.option-button:hover {
+  transform: translateY(-1px);
+  border-color: rgba(126, 170, 255, 0.42);
+  background: rgba(236, 243, 255, 0.98);
+}
+
+.option-button.selected {
+  border-color: rgba(110, 168, 255, 0.85);
+  background: rgba(221, 235, 255, 0.98);
+}
+
+.option-index {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: rgba(93, 131, 242, 0.12);
+  color: #3556a8;
+  font-weight: 700;
+}
+
+.option-text {
+  color: #183055;
+}
+
+.nav-row,
+.result-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 22px;
+}
+
+.helper-text {
+  text-align: center;
+  flex: 1;
+}
+
+.primary-button,
+.secondary-button,
+.ghost-button {
+  border: 0;
+  padding: 14px 18px;
+  border-radius: 14px;
+  cursor: pointer;
+  transition:
+    transform 0.18s ease,
+    opacity 0.18s ease;
+}
+
+.primary-button {
+  color: #ffffff;
+  background: linear-gradient(135deg, #5d83f2, #7b8ef6 55%, #50c7b0);
+  font-weight: 700;
+  min-width: 120px;
+}
+
+.secondary-button {
+  color: #27406f;
+  background: rgba(91, 123, 208, 0.08);
+  border: 1px solid rgba(91, 123, 208, 0.12);
+  min-width: 120px;
+}
+
+.ghost-button {
+  color: #4e658e;
+  background: transparent;
+  border: 1px solid rgba(91, 123, 208, 0.12);
+  min-width: 120px;
+}
+
+.primary-button:hover,
+.secondary-button:hover {
+  transform: translateY(-1px);
+}
+
+.primary-button:disabled,
+.secondary-button:disabled,
+.ghost-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  transform: none;
+}
+
+.footer-note {
+  margin-top: 18px;
+  font-size: 0.94rem;
+}
+
+.results-card h1 {
+  max-width: 14ch;
+}
+
+.result-grid {
+  margin-top: 24px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.score-card {
+  padding: 20px;
+  border-radius: 22px;
+  border: 1px solid rgba(91, 123, 208, 0.12);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.score-card p {
+  margin: 10px 0 0;
+  color: #5f6f8b;
+}
+
+.mini-bar {
+  margin-top: 12px;
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(91, 123, 208, 0.1);
+  overflow: hidden;
+}
+
+.mini-bar span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #5d83f2, #50c7b0);
+}
+
+.score-label {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.78rem;
+}
+
+.score-value {
+  margin-top: 8px;
+  font-size: 2.5rem;
+  font-weight: 800;
+}
+
+.highlight-panel {
+  margin-top: 18px;
+  padding: 18px 20px;
+  border-radius: 20px;
+  background: rgba(93, 131, 242, 0.08);
+  border: 1px solid rgba(93, 131, 242, 0.12);
+}
+
+.highlight-panel strong {
+  display: block;
+  margin-top: 6px;
+  font-size: 1.08rem;
+}
+
+.result-dashboard {
+  margin-top: 18px;
+  display: grid;
+  gap: 14px;
+}
+
+.warning-banner {
+  padding: 14px 16px;
+  border-radius: 16px;
+  background: rgba(255, 205, 96, 0.16);
+  border: 1px solid rgba(255, 205, 96, 0.28);
+  color: #6f4c00;
+}
+
+.risk-high {
+  background: rgba(255, 120, 120, 0.14);
+  border-color: rgba(255, 120, 120, 0.28);
+  color: #8c1e1e;
+}
+
+.risk-moderate {
+  background: rgba(255, 180, 80, 0.14);
+  border-color: rgba(255, 180, 80, 0.28);
+  color: #7b4a00;
+}
+
+.chat-card {
+  width: min(960px, 100%);
+  padding: 0 !important; /* Reset padding để header và input sát viền */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 680px;
+}
+
+.questionnaire-card {
+  padding: 0 !important;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 680px;
+}
+
+/* Header dạng Messenger/Zalo */
+.messenger-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  background: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid rgba(91, 123, 208, 0.12);
+  z-index: 10;
+}
+
+.messenger-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.messenger-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1.15rem;
+  box-shadow: 0 4px 12px rgba(91, 123, 208, 0.2);
+}
+
+.bg-gemini {
+  background: linear-gradient(135deg, #7f56da, #3f7bf6);
+}
+
+.bg-dass {
+  background: linear-gradient(135deg, #00b4db, #0083b0);
+}
+
+.messenger-info h2 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #1e293b;
+  line-height: 1.2;
+}
+
+.messenger-status {
+  margin: 4px 0 0;
+  font-size: 0.8rem;
+  color: #64748b;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background-color: #22c55e;
+  border-radius: 50%;
+  display: inline-block;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+}
+
+.messenger-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.progress-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  min-width: 140px;
+}
+
+.progress-info span {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #475569;
+}
+
+.progress-bar-mini {
+  width: 100%;
+  height: 6px;
+  border-radius: 99px;
+  background: rgba(91, 123, 208, 0.12);
+  overflow: hidden;
+}
+
+.progress-fill-mini {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #00b4db, #7f56da);
+  transition: width 0.3s ease;
+}
+
+.action-icon-btn {
+  border: 0;
+  background: rgba(91, 123, 208, 0.06);
+  border: 1px solid rgba(91, 123, 208, 0.1);
+  color: #3b5284;
+  padding: 8px 14px;
+  border-radius: 12px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-icon-btn:hover {
+  background: rgba(91, 123, 208, 0.12);
+  transform: translateY(-1px);
+}
+
+.action-icon-btn.secondary {
+  background: transparent;
+  color: #64748b;
+  border-color: transparent;
+}
+
+.action-icon-btn.secondary:hover {
+  background: rgba(91, 123, 208, 0.05);
+}
+
+/* Khung chat cố định */
+.chat-thread {
+  flex: 1;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  background: #f8fafc;
+}
+
+/* Custom Scrollbar cho Chat */
+.chat-thread::-webkit-scrollbar {
+  width: 6px;
+}
+.chat-thread::-webkit-scrollbar-track {
+  background: transparent;
+}
+.chat-thread::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.3);
+  border-radius: 99px;
+}
+.chat-thread::-webkit-scrollbar-thumb:hover {
+  background: rgba(148, 163, 184, 0.5);
+}
+
+/* Cấu trúc tin nhắn */
+.chat-message {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  max-width: 75%;
+  animation: messageSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes messageSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.chat-message.assistant {
+  align-self: flex-start;
+}
+
+.chat-message.user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+  max-width: 70%;
+}
+
+.bubble-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: white;
+  font-weight: 700;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+  margin-bottom: 2px;
+}
+
+/* Bong bóng chat tinh tế */
+.chat-bubble {
+  padding: 12px 16px;
+  border-radius: 18px;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+}
+
+.chat-message.assistant .chat-bubble {
+  background: #ffffff;
+  color: #0f172a;
+  border: 1px solid #e2e8f0;
+  border-bottom-left-radius: 4px;
+}
+
+.chat-message.user .chat-bubble {
+  background: linear-gradient(135deg, #0084ff, #00a2ff); /* Phong cách Messenger/Zalo */
+  color: #ffffff;
+  border-bottom-right-radius: 4px;
+}
+
+/* Thanh nhập tin nhắn dạng viên thuốc */
+.chat-input-area {
+  padding: 16px 24px;
+  background: #ffffff;
+  border-top: 1px solid rgba(91, 123, 208, 0.12);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-input-area input {
+  flex: 1;
+  height: 48px;
+  border-radius: 24px;
+  border: 1px solid #e2e8f0;
+  background: #f1f5f9;
+  color: #0f172a;
+  padding: 0 20px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  transition: all 0.2s ease;
+}
+
+.chat-input-area input:focus {
+  outline: none;
+  border-color: #0084ff;
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.15);
+}
+
+.chat-input-area input::placeholder {
+  color: #94a3b8;
+}
+
+/* Nút gửi Icon máy bay */
+.send-icon-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 0;
+  background: #0084ff;
+  color: white;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.send-icon-btn:hover {
+  background: #0074e0;
+  transform: scale(1.05);
+}
+
+.send-icon-btn:active {
+  transform: scale(0.95);
+}
+
+.send-icon-btn:disabled {
+  background: #cbd5e1;
+  color: #94a3b8;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.send-icon-btn svg {
+  margin-left: 2px; /* Lệch tâm nhẹ để cân bằng thị giác */
+}
+
+.cancel-pill-btn {
+  border: 0;
+  background: transparent;
+  color: #64748b;
+  font-weight: 600;
+  font-size: 0.9rem;
+  cursor: pointer;
+  padding: 0 8px;
+  transition: color 0.2s ease;
+}
+
+.cancel-pill-btn:hover {
+  color: #0f172a;
+}
+
+/* Các nút trả lời nhanh (Quick Replies) */
+.quick-replies {
+  display: flex;
+  gap: 8px;
+  padding: 12px 24px;
+  background: #f8fafc;
+  overflow-x: auto;
+  border-top: 1px solid rgba(91, 123, 208, 0.08);
+  flex-wrap: wrap;
+}
+
+.quick-replies::-webkit-scrollbar {
+  height: 4px;
+}
+.quick-replies::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.2);
+  border-radius: 99px;
+}
+
+.quick-reply-btn {
+  border: 1px solid #0084ff;
+  background: #ffffff;
+  color: #0084ff;
+  padding: 8px 16px;
+  border-radius: 18px;
+  font-size: 0.88rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+}
+
+.quick-reply-btn:hover:not(:disabled) {
+  background: #0084ff;
+  color: #ffffff;
+  transform: translateY(-1px);
+}
+
+.quick-reply-btn:disabled {
+  border-color: #cbd5e1;
+  color: #94a3b8;
+  cursor: not-allowed;
+}
+
+/* Hiệu ứng gõ chữ (Typing Animation) */
+.typing {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 20px;
+  padding: 12px 14px !important;
+}
+
+.typing span {
+  width: 6px;
+  height: 6px;
+  background-color: #94a3b8;
+  border-radius: 50%;
+  display: inline-block;
+  animation: typing-bounce 1.4s infinite ease-in-out both;
+}
+
+.typing span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.typing span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes typing-bounce {
+  0%, 80%, 100% { 
+    transform: scale(0);
+  } 40% { 
+    transform: scale(1.0);
+  }
+}
+
+@media (max-width: 800px) {
+  .chat-card,
+  .questionnaire-card {
+    height: calc(100vh - 48px);
+    border-radius: 16px;
+  }
+  
+  .messenger-header {
+    padding: 12px 16px;
+  }
+  
+  .progress-info {
+    min-width: auto;
+  }
+  
+  .chat-thread {
+    padding: 16px;
+  }
+  
+  .chat-message {
+    max-width: 85%;
+  }
+  
+  .chat-input-area {
+    padding: 12px 16px;
+  }
+  
+  .result-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .top-row,
+  .nav-row,
+  .result-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+}
+
+/* Modal Backdrop with Glassmorphism */
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(15, 23, 42, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.25s ease-out forwards;
+}
+
+/* Modal Box */
+.modal-container {
+  width: min(680px, 92%);
+  max-height: 85vh;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(91, 123, 208, 0.16);
+  border-radius: 24px;
+  box-shadow: 0 30px 100px rgba(15, 23, 42, 0.2);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Header */
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(91, 123, 208, 0.12);
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: #1e293b;
+  letter-spacing: -0.02em;
+}
+
+.modal-close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #64748b;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  line-height: 1;
+}
+
+.modal-close-btn:hover {
+  background: rgba(91, 123, 208, 0.08);
+  color: #0f172a;
+}
+
+/* Body Content */
+.modal-body {
+  padding: 24px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Scrollbar styling for modal body */
+.modal-body::-webkit-scrollbar {
+  width: 6px;
+}
+.modal-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+.modal-body::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.3);
+  border-radius: 99px;
+}
+
+.modal-intro {
+  margin: 0;
+  font-size: 0.95rem;
+  color: #475569;
+  line-height: 1.6;
+}
+
+/* Privacy sections */
+.privacy-section {
+  background: rgba(91, 123, 208, 0.04);
+  border: 1px solid rgba(91, 123, 208, 0.08);
+  border-radius: 16px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: transform 0.2s ease;
+}
+
+.privacy-section:hover {
+  transform: translateY(-1px);
+  border-color: rgba(91, 123, 208, 0.14);
+  background: rgba(91, 123, 208, 0.06);
+}
+
+.privacy-section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 700;
+  color: #0f172a;
+  font-size: 1rem;
+}
+
+.privacy-icon {
+  font-size: 1.2rem;
+}
+
+.privacy-list {
+  margin: 0;
+  padding-left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 0.9rem;
+  color: #334155;
+  line-height: 1.5;
+}
+
+.privacy-list li strong {
+  color: #0f172a;
+}
+
+/* Checkbox Opt-in */
+.consent-checkbox-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  background: rgba(34, 197, 94, 0.05);
+  border: 1px solid rgba(34, 197, 94, 0.12);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.consent-checkbox-wrapper:hover {
+  background: rgba(34, 197, 94, 0.08);
+  border-color: rgba(34, 197, 94, 0.2);
+}
+
+.consent-checkbox-wrapper input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  margin: 2px 0 0 0;
+  cursor: pointer;
+  accent-color: #22c55e;
+}
+
+.consent-checkbox-wrapper span {
+  font-size: 0.9rem;
+  color: #1e293b;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+/* Footer Actions */
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px 20px;
+  border-top: 1px solid rgba(91, 123, 208, 0.12);
+  background: rgba(255, 255, 255, 0.8);
+}
+
+/* Keyframes for animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Mobile responsive fixes */
+@media (max-width: 600px) {
+  .modal-container {
+    width: 100%;
+    height: 100vh;
+    max-height: 100vh;
+    border-radius: 0;
+  }
+  .modal-actions {
+    padding: 16px;
+    flex-direction: column-reverse;
+  }
+  .modal-actions button {
+    width: 100%;
+  }
+  .modal-body {
+    padding: 16px;
+  }
+}
+
+/* --- THEME TOGGLE BUTTON --- */
+.theme-toggle-btn {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid rgba(91, 123, 208, 0.16);
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: #1e293b;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(61, 89, 145, 0.1);
+  z-index: 100;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-toggle-btn:hover {
+  transform: scale(1.05) rotate(15deg);
+  background: rgba(255, 255, 255, 0.95);
+  border-color: rgba(91, 123, 208, 0.3);
+  box-shadow: 0 6px 16px rgba(61, 89, 145, 0.15);
+}
+
+/* --- DARK MODE OVERRIDES --- */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  color: #f1f5f9;
+  background:
+    radial-gradient(circle at top, rgba(99, 102, 241, 0.15), transparent 45%),
+    linear-gradient(180deg, #0b0f19 0%, #111827 100%);
+}
+
+/* Dark mode theme toggle styling */
+:root[data-theme="dark"] .theme-toggle-btn {
+  background: rgba(30, 41, 59, 0.8);
+  border-color: rgba(99, 102, 241, 0.25);
+  color: #f8fafc;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+}
+
+:root[data-theme="dark"] .theme-toggle-btn:hover {
+  background: rgba(30, 41, 59, 0.95);
+  border-color: rgba(99, 102, 241, 0.45);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
+}
+
+/* Cards & containers */
+:root[data-theme="dark"] .hero-card {
+  border-color: rgba(99, 102, 241, 0.16);
+  background: rgba(17, 24, 39, 0.85);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
+}
+
+:root[data-theme="dark"] .landing-feature {
+  background: rgba(99, 102, 241, 0.08);
+  border-color: rgba(99, 102, 241, 0.15);
+}
+
+:root[data-theme="dark"] .landing-feature strong {
+  color: #f8fafc;
+}
+
+:root[data-theme="dark"] .landing-feature p {
+  color: #94a3b8;
+}
+
+:root[data-theme="dark"] h1, 
+:root[data-theme="dark"] h2 {
+  color: #f8fafc;
+}
+
+:root[data-theme="dark"] .lead,
+:root[data-theme="dark"] .progress-chip span,
+:root[data-theme="dark"] .panel-label,
+:root[data-theme="dark"] .footer-note,
+:root[data-theme="dark"] .score-meta,
+:root[data-theme="dark"] .score-label,
+:root[data-theme="dark"] .helper-text,
+:root[data-theme="dark"] .disclaimer {
+  color: #94a3b8;
+}
+
+:root[data-theme="dark"] .progress-chip {
+  background: rgba(99, 102, 241, 0.1);
+  border-color: rgba(99, 102, 241, 0.15);
+}
+
+:root[data-theme="dark"] .progress-chip strong {
+  color: #f8fafc;
+}
+
+:root[data-theme="dark"] .progress-bar {
+  background: rgba(99, 102, 241, 0.18);
+}
+
+:root[data-theme="dark"] .question-card {
+  background: linear-gradient(180deg, rgba(31, 41, 55, 0.9), rgba(17, 24, 39, 0.95));
+  border-color: rgba(99, 102, 241, 0.18);
+}
+
+/* Options */
+:root[data-theme="dark"] .option-button {
+  border-color: rgba(99, 102, 241, 0.18);
+  background: rgba(31, 41, 55, 0.5);
+  color: #e2e8f0;
+}
+
+:root[data-theme="dark"] .option-button:hover {
+  border-color: rgba(129, 140, 248, 0.5);
+  background: rgba(49, 46, 129, 0.3);
+}
+
+:root[data-theme="dark"] .option-button.selected {
+  border-color: rgba(99, 102, 241, 0.85);
+  background: rgba(49, 46, 129, 0.55);
+}
+
+:root[data-theme="dark"] .option-index {
+  background: rgba(99, 102, 241, 0.2);
+  color: #a5b4fc;
+}
+
+:root[data-theme="dark"] .option-text {
+  color: #f1f5f9;
+}
+
+/* Buttons */
+:root[data-theme="dark"] .secondary-button {
+  color: #e2e8f0;
+  background: rgba(99, 102, 241, 0.15);
+  border-color: rgba(99, 102, 241, 0.25);
+}
+
+:root[data-theme="dark"] .ghost-button {
+  color: #cbd5e1;
+  border-color: rgba(99, 102, 241, 0.2);
+}
+
+/* Results */
+:root[data-theme="dark"] .score-card {
+  border-color: rgba(99, 102, 241, 0.18);
+  background: rgba(31, 41, 55, 0.6);
+}
+
+:root[data-theme="dark"] .score-card p {
+  color: #94a3b8;
+}
+
+:root[data-theme="dark"] .mini-bar {
+  background: rgba(99, 102, 241, 0.15);
+}
+
+:root[data-theme="dark"] .score-value {
+  color: #f8fafc;
+}
+
+:root[data-theme="dark"] .highlight-panel {
+  background: rgba(99, 102, 241, 0.12);
+  border-color: rgba(99, 102, 241, 0.2);
+}
+
+/* Messenger components */
+:root[data-theme="dark"] .messenger-header {
+  background: rgba(17, 24, 39, 0.95);
+  border-bottom-color: rgba(99, 102, 241, 0.18);
+}
+
+:root[data-theme="dark"] .messenger-info h2 {
+  color: #f8fafc;
+}
+
+:root[data-theme="dark"] .messenger-status {
+  color: #94a3b8;
+}
+
+:root[data-theme="dark"] .progress-info span {
+  color: #cbd5e1;
+}
+
+:root[data-theme="dark"] .progress-bar-mini {
+  background: rgba(99, 102, 241, 0.18);
+}
+
+:root[data-theme="dark"] .action-icon-btn {
+  background: rgba(99, 102, 241, 0.12);
+  border-color: rgba(99, 102, 241, 0.2);
+  color: #cbd5e1;
+}
+
+:root[data-theme="dark"] .action-icon-btn:hover {
+  background: rgba(99, 102, 241, 0.2);
+}
+
+:root[data-theme="dark"] .action-icon-btn.secondary {
+  color: #94a3b8;
+}
+
+:root[data-theme="dark"] .action-icon-btn.secondary:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+:root[data-theme="dark"] .chat-thread {
+  background: #0f172a;
+}
+
+/* Chat bubble styling */
+:root[data-theme="dark"] .chat-message.assistant .chat-bubble {
+  background: #1e293b;
+  color: #f1f5f9;
+  border-color: #334155;
+}
+
+:root[data-theme="dark"] .chat-input-area {
+  background: #111827;
+  border-top-color: rgba(99, 102, 241, 0.18);
+}
+
+:root[data-theme="dark"] .chat-input-area input {
+  border-color: #334155;
+  background: #1f2937;
+  color: #f1f5f9;
+}
+
+:root[data-theme="dark"] .chat-input-area input:focus {
+  border-color: #6366f1;
+  background: #1f2937;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
+}
+
+:root[data-theme="dark"] .chat-input-area input::placeholder {
+  color: #6b7280;
+}
+
+:root[data-theme="dark"] .cancel-pill-btn {
+  color: #94a3b8;
+}
+
+:root[data-theme="dark"] .cancel-pill-btn:hover {
+  color: #f1f5f9;
+}
+
+:root[data-theme="dark"] .quick-replies {
+  background: #0f172a;
+  border-top-color: rgba(99, 102, 241, 0.12);
+}
+
+:root[data-theme="dark"] .quick-reply-btn {
+  border-color: #6366f1;
+  background: #1e293b;
+  color: #a5b4fc;
+}
+
+:root[data-theme="dark"] .quick-reply-btn:hover:not(:disabled) {
+  background: #6366f1;
+  color: #ffffff;
+}
+
+:root[data-theme="dark"] .quick-reply-btn:disabled {
+  border-color: #4b5563;
+  color: #6b7280;
+}
+
+/* Modal */
+:root[data-theme="dark"] .modal-backdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+:root[data-theme="dark"] .modal-container {
+  background: rgba(17, 24, 39, 0.98);
+  border-color: rgba(99, 102, 241, 0.22);
+  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.6);
+}
+
+:root[data-theme="dark"] .modal-header {
+  border-bottom-color: rgba(99, 102, 241, 0.18);
+  background: rgba(17, 24, 39, 0.9);
+}
+
+:root[data-theme="dark"] .modal-header h2 {
+  color: #f8fafc;
+}
+
+:root[data-theme="dark"] .modal-close-btn {
+  color: #94a3b8;
+}
+
+:root[data-theme="dark"] .modal-close-btn:hover {
+  background: rgba(99, 102, 241, 0.15);
+  color: #f1f5f9;
+}
+
+:root[data-theme="dark"] .modal-intro {
+  color: #cbd5e1;
+}
+
+:root[data-theme="dark"] .privacy-section {
+  background: rgba(99, 102, 241, 0.05);
+  border-color: rgba(99, 102, 241, 0.12);
+}
+
+:root[data-theme="dark"] .privacy-section:hover {
+  border-color: rgba(99, 102, 241, 0.2);
+  background: rgba(99, 102, 241, 0.08);
+}
+
+:root[data-theme="dark"] .privacy-section-title {
+  color: #f8fafc;
+}
+
+:root[data-theme="dark"] .privacy-list {
+  color: #cbd5e1;
+}
+
+:root[data-theme="dark"] .privacy-list li strong {
+  color: #f8fafc;
+}
+
+:root[data-theme="dark"] .consent-checkbox-wrapper {
+  background: rgba(34, 197, 94, 0.08);
+  border-color: rgba(34, 197, 94, 0.2);
+}
+
+:root[data-theme="dark"] .consent-checkbox-wrapper:hover {
+  background: rgba(34, 197, 94, 0.12);
+  border-color: rgba(34, 197, 94, 0.3);
+}
+
+:root[data-theme="dark"] .consent-checkbox-wrapper span {
+  color: #cbd5e1;
+}
+
+:root[data-theme="dark"] .modal-actions {
+  border-top-color: rgba(99, 102, 241, 0.18);
+  background: rgba(17, 24, 39, 0.9);
+}
+
+/* Warnings */
+:root[data-theme="dark"] .warning-banner {
+  background: rgba(245, 158, 11, 0.15);
+  border-color: rgba(245, 158, 11, 0.3);
+  color: #fef08a;
+}
+
+:root[data-theme="dark"] .risk-high {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #fca5a5;
+}
+
+:root[data-theme="dark"] .risk-moderate {
+  background: rgba(245, 158, 11, 0.15);
+  border-color: rgba(245, 158, 11, 0.3);
+  color: #fde047;
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 800px) {
+  .theme-toggle-btn {
+    top: 12px;
+    right: 12px;
+    width: 38px;
+    height: 38px;
+  }
+}
+

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "lib": ["ES2022"],
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://127.0.0.1:3001',
+    },
+  },
+});