Add design skill and UI theming updates

Add a new Portfolio Design System skill and overhaul UI theming and styling; update backend content and streaming logic.

- Add .agents/skills/portfolio-design/SKILL.md describing typography, colors, background textures, and Spider‑Verse chromatic/glitch effects for reuse across components.
- UI: load Google fonts, introduce theme variables (light/dark), CSS tokens, and spider-title/hover classes; apply extensive styling refactor in App.tsx (theme toggle, new visuals, improved components, accessibility/spacing, updated avatar, suggestions styling, code block UI, and many spider-hover/title usages).
- CSS: add root color variables, dark-mode overrides, font stacks, chroma text shadow utilities, and scrollbar theming in ui/src/index.css.
- Backend/content: update personal_data/bio.md and backend/data/all_chunks.json to new formatted bio/header, adjust get_career_timeline in backend/agent.py with revised roles/education/projects, and improve event streaming in backend/api.py to yield token chunks and handle disconnects.
- Data stores: update faiss store LFS pointers for v30 index files and remove older v41/v42 index files.

These changes introduce a reusable design system, improve theming and UX across the app, correct and expand personal content, and make streaming behavior more granular and robust.

.agents/skills/portfolio-design/SKILL.md

@@ -0,0 +1,69 @@
+---
+name: Portfolio Design System
+description: Recreates the design tokens, typography, colors, and specific visual glitch/Spider-Verse animations of the portfolio website.
+---
+
+# Portfolio Design System Skill
+
+This skill provides instructions on how to replicate the portfolio website's aesthetic for other applications like a personal chatbot. It focuses exclusively on the design tokens, fonts, colors, layouts, and the unique CSS-based animations/effects.
+
+## 1. Typography
+Use the following font pairings sourced from Google Fonts:
+- **Headings & Display Text:** `Source Serif 4` (serif) - Use for all major titles (`display-heading`, `section-title`, etc.), usually with tight letter spacing (`letter-spacing: -0.03em`).
+- **Body Text:** `IBM Plex Sans` (sans-serif) - Standard reading text with `line-height: 1.65` and `letter-spacing: -0.01em`.
+- **Labels, Eyebrows & Meta:** `IBM Plex Mono` (monospace) - Used for small caps labels, numbering, and metadata. Usually `text-transform: uppercase` with generous tracking (`letter-spacing: 0.12em`).
+
+## 2. Color Palette
+Implement a theme-aware color system with Light and Dark modes.
+
+**Light Mode:**
+- Backgrounds: Paper (`#f4efe6`), Strong Paper (`#fcf8f1`), Panel (`#f7f1e8`)
+- Text/Ink: Primary Ink (`#171412`), Soft Ink (`#5d564f`)
+- Accents: 
+  - Blue: `#4e67b6`
+  - Rust: `#ba5a45`
+  - Teal: `#1a766c`
+
+**Dark Mode:**
+- Backgrounds: Paper (`#11100f`), Strong Paper (`#181614`), Panel (`#141210`)
+- Text/Ink: Primary Ink (`#f2ede4`), Soft Ink (`#b7aea2`)
+- Accents:
+  - Blue: `#8fa7ff`
+  - Rust: `#ef8d74`
+  - Teal: `#62c2b4`
+
+*Note: Use drop shadows consistently combining the blue and rust accent colors with low opacity (e.g., `4px 4px 0 var(--shadow-blue), -2px -2px 0 rgba(186, 90, 69, 0.04)`).*
+
+## 3. Background Textures
+The site depth is achieved through layered background textures:
+1. **Noise Dots:** Fixed `radial-gradient` creating a dot grid pattern with multiply blend mode and opacity.
+2. **Vertical Grid Lines:** Fixed `linear-gradient` creating thin vertical structural lines across the screen.
+
+## 4. "Spider-Verse" Glitch Animations
+The most unique feature is the chromatic aberration and glitch animations applied to text.
+
+**Methodology:**
+- An element with `spider-title` or `spider-field` adds a `data-text` attribute matching the element's inner text.
+- CSS `::before` and `::after` pseudo-elements are generated using `content: attr(data-text)`, layered directly on top of the original text text (`position: absolute; inset: 0`).
+- The `::before` element is tinted Blue and the `::after` element is tinted Rust, utilizing `mix-blend-mode: multiply` (Light mode) or `mix-blend-mode: screen` (Dark mode).
+
+**Animation Types:**
+1. **Calm Glitch (`spider-title`)**: 
+   - Always active.
+   - Gently animates the X and Y translation of the pseudo-elements periodically using `steps(2, end)` or `steps(4, end)` to create a jerky, frame-by-frame offset effect (`calmSpiderBlue` and `calmSpiderRust` keyframes).
+2. **Hover Glitch (`spider-field`, `spider-hover`)**:
+   - Inactive by default (`opacity: 0`).
+   - On hover, opacity increases and triggers the jitter shift keyframes, adding a brief chromatic tear to the element.
+3. **Chroma Ink Text Shadow**:
+   - Text shadows are used on headings like `chroma-ink` to create a static chromatic aberration edge: `text-shadow: 0.015em 0 0 var(--spider-blue), -0.015em 0 0 var(--spider-rust)`.
+4. **Intense Datamoshing and Slicing**:
+   - Advanced glitch elements use `clip-path` slicing (`glitch-slice-a`, `glitch-slice-b`) and horizontal scanning bands (`glitch-scan` with `datamoshBand` keyframes).
+   - Random blur (`glitchPulse`) and physical jitter (`digitJitter`) keyframes simulate heavy digital corruption.
+
+## Implementation Guide
+When applying this to a new component (like a chatbot):
+1. Establish the color variables first.
+2. Load the google fonts (`IBM Plex Sans`, `IBM Plex Mono`, `Source Serif 4`).
+3. Add the structural background gradients.
+4. Wrap any headers or important labels in elements with `spider-hover` or `spider-title` classes, ensuring you mirror the text in the `data-text` attribute.
+5. Apply the `::before`/`::after` CSS to create the RGB offset effect whenever hovered or active.

backend/agent.py

@@ -533,23 +533,25 @@ def get_career_timeline() -> str:
     return (
         "## 🧭 Career Timeline (reverse-chronological)\n"
         "### Experience\n"
-        "- **ML Research Engineer – Cloud Systems LLC** · Jul 2024 – Present · Remote\n"
-        "  - Data pipelines (batch & real-time), complex SQL, automated ETL.\n"
-        "- **ML Research Engineer – Virginia Tech** · Sep 2024 – Jul 2024 · Blacksburg, VA\n"
-        "  - LLM pipelines (DNABERT, HyenaDNA), LoRA/soft prompting, 94%+ accuracy; Airflow automation.\n"
-        "- **Research Assistant – Virginia Tech** · Jun 2023 – May 2024 · Blacksburg, VA\n"
-        "  - Genomic ETL on Airflow/AWS; CI/CD for retraining; runtime optimizations.\n"
-        "- **Data Engineer – UJR Technologies** · Jul 2021 – Dec 2022 · Hyderabad, India\n"
-        "  - Kafka/Spark streaming migration; Snowflake perf; AWS ECS microservices.\n"
+        "- **AI Software Engineer – Tabner Inc** · Jul 2025 – Present · Remote (US)\n"
+        "  - Built agentic RAG pipelines (LangGraph, Claude), reducing report time from 4h to 2m.\n"
+        "  - Improved reliability to 96% with multi-agent orchestration, tool calling, guardrails.\n"
+        "- **Machine Learning Engineer – Virginia Tech** · Aug 2024 – Jul 2025 · Blacksburg, VA\n"
+        "  - Built PyTorch training pipelines for large sequence models; applied LoRA fine-tuning reducing training time.\n"
+        "- **Graduate Research Assistant – Virginia Tech** · Jun 2023 – May 2024 · Blacksburg, VA\n"
+        "  - Trained/fine-tuned LLaMA & SciBERT for cross-domain NER; automated HPC workflows.\n"
+        "- **Software Engineer – UJR Technologies** · Jul 2021 – Dec 2022 · Hyderabad, India\n"
+        "  - Built typed Python SDK, optimized BigQuery, and hardened CI/CD pipelines in GitHub Actions.\n"
+        "- **Software Engineer Intern – Cognizant** · Dec 2019 – May 2020 · Chennai, India\n"
+        "  - Developed Python-based sports event management system.\n"
         "\n"
         "### Education\n"
-        "- **M.S., Computer Science – Virginia Tech** · Jan 2023 – Dec 2024 (GPA 3.95/4)\n"
-        "- **B.E., Computer Science – Anna University** · Jul 2018 – May 2022 (CGPA 8.24/10)\n"
+        "- **M.Eng., Computer Science – Virginia Tech**\n"
+        "- **B.Tech., Computer Science & Engineering – Vel Tech University**\n"
         "\n"
         "### Selected Projects\n"
-        "- **LLM-Based Android Agent for UI Automation** – 80%+ step accuracy; +25% goal-success with memory/reflection.\n"
-        "- **ProxyTuNER** – +8% F1 via proxy-tuning and expert logit ensembling; 70% compute reduction.\n"
-        "- **IntelliMeet** – decentralized video; <200ms latency; on-device ML for attention; STT + summarization.\n"
+        "- **CoreLink AI, A2A Finance Agent Runtime** – Stabilized policy-constrained flows; 87% task success rate on OfficeQA.\n"
+        "- **K8s Agent Sandbox** – Kubernetes Operator for isolated LLM agent execution (98% reliability).\n"
     )
     
 @tool("analyze_job_description")

backend/api.py

@@ -18,7 +18,7 @@ from . import config
 
 # logging + helpers
 import logging, os, time
-from datetime import datetime, timezone
+from datetime import datetime, timezone, timedelta
 from fastapi.responses import JSONResponse, FileResponse, RedirectResponse
 
 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(name)s :: %(message)s")
@@ -158,7 +158,16 @@ async def _event_stream_with_config(thread_id: str, message: str, request: Reque
     yield {"event": "thread", "data": thread_id}
     try:
         async for ev in lg_app.astream_events({"messages": [("user", message)]}, config=config, version="v2"):
-            ...
+            if ev["event"] == "on_chat_model_stream":
+                chunk = ev["data"]["chunk"].content
+                if isinstance(chunk, list):
+                    text = "".join(getattr(p, "text", "") or str(p) for p in chunk)
+                else:
+                    text = chunk or ""
+                if text:
+                    yield {"event": "token", "data": text}
+            if await request.is_disconnected():
+                break
     finally:
         yield {"event": "done", "data": "1"}
 

backend/data/all_chunks.json

@@ -1,12 +1,12 @@
 [
   {
-    "text": "[HEADER] Krishna Vamsi Dhulipalla is a Software Engineer specializing in generic workflows and AI platforms. He currently works at **Cloud Systems LLC**, where he architects LangGraph-based agents to automate data auditing. Previously, he served as a Machine Learning Engineer at **Virginia Tech**, optimizing genomic models with LoRA/soft prompting, and as a Software Engineer at **UJR Technologies**, building ML SDKs and CI/CD pipelines. He holds an M.S. in Computer Science from Virginia Tech (Dec 2024) and has significant expertise in **LangGraph**, **Kubernetes**, **PyTorch**, and **MLOps**.\n\nKrishna Vamsi Dhulipalla is a Software Engineer specializing in generic workflows and AI platforms. He currently works at **Cloud Systems LLC**, where he architects LangGraph-based agents to automate data auditing. Previously, he served as a Machine Learning Engineer at **Virginia Tech**, optimizing genomic models with LoRA/soft prompting, and as a Software Engineer at **UJR Technologies**, building ML SDKs and CI/CD pipelines. He holds an M.S. in Computer Science from Virginia Tech (Dec 2024) and has significant expertise in **LangGraph**, **Kubernetes**, **PyTorch**, and **MLOps**.",
+    "text": "[HEADER] # Krishna Vamsi Dhulipalla\n\n# Krishna Vamsi Dhulipalla\n**AI Engineer**\n+1 540-558-3528 | [krishnadhulipalla13@gmail.com](mailto:krishnadhulipalla13@gmail.com)\n\nI am an AI Engineer specializing in building production LLM systems, agentic workflows, and RAG pipelines for enterprise use cases. I have extensive experience designing multi-agent systems with LangGraph, MCP servers, and API-driven orchestration. \n\nMy work ranges from rapid prototyping of AI agents and integrating enterprise data systems to deploying scalable AI services on AWS and Kubernetes. Currently, I work as an AI Software Engineer at Tabner Inc., previously holding roles as a Machine Learning Engineer and Graduate Research Assistant at Virginia Tech, where I also completed my M.Eng. in Computer Science.\n\n**Core Proficiencies:** Python, TypeScript, LangGraph, RAG architectures, Multi-Agent Orchestration, AWS Bedrock, OpenAI API, PyTorch, LoRA fine-tuning, AWS, Kubernetes, FastAPI, and PostgreSQL.",
     "metadata": {
       "source": "bio.md",
-      "header": "Krishna Vamsi Dhulipalla is a Software Engineer specializing in generic workflows and AI platforms. He currently works at **Cloud Systems LLC**, where he architects LangGraph-based agents to automate data auditing. Previously, he served as a Machine Learning Engineer at **Virginia Tech**, optimizing genomic models with LoRA/soft prompting, and as a Software Engineer at **UJR Technologies**, building ML SDKs and CI/CD pipelines. He holds an M.S. in Computer Science from Virginia Tech (Dec 2024) and has significant expertise in **LangGraph**, **Kubernetes**, **PyTorch**, and **MLOps**.",
-      "chunk_id": "bio.md_#0_9ac3944c",
-      "has_header": false,
-      "word_count": 83
+      "header": "# Krishna Vamsi Dhulipalla",
+      "chunk_id": "bio.md_#0_c5fdc65d",
+      "has_header": true,
+      "word_count": 123
     }
   },
   {

backend/data/faiss_store/v30_1000-250/index.faiss

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bd1d8e7e716c51242a7b4af9c2f8a7900de4a0a5b7d90374286abd2c75bd3e7c
+oid sha256:8d1db4c2cefa1dd60438240fdc9c583bd8b2e847f79f39d0448712bc44074409
 size 184365

backend/data/faiss_store/v30_1000-250/index.pkl

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:685b70a0fbd47f8ccb3e9f940de304370dd699ef9d72e0dd17256a007d3b6528
-size 29588
+oid sha256:c4c5e78343da7bf6f3aa2e85e88d245516041431fa1424395de8e16bc86136d5
+size 28814

backend/data/faiss_store/v41_1000-250/index.faiss

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8ee9d834545d3be697618907fc9bef3e70b8f75da655efbbedcbfc6b1d5b439e
-size 63021

backend/data/faiss_store/v41_1000-250/index.pkl

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:bad387134da4e80a88b9ffb304a0c427a8024c7b1bff07bb3e9a96856978b7d9
-size 39546

backend/data/faiss_store/v42_1000-250/index.faiss

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:401590397d9754522466693adaca908407d119593e187dfb212e938bb5313eb4
-size 64557

backend/data/faiss_store/v42_1000-250/index.pkl

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1adfd6e3ac55f44a3d8acde031bf6c5a734ff0e6ab665c61e9cddbbbe12c5e58
-size 40986

personal_data/bio.md

@@ -1 +1,9 @@
-Krishna Vamsi Dhulipalla is a Software Engineer specializing in generic workflows and AI platforms. He currently works at **Cloud Systems LLC**, where he architects LangGraph-based agents to automate data auditing. Previously, he served as a Machine Learning Engineer at **Virginia Tech**, optimizing genomic models with LoRA/soft prompting, and as a Software Engineer at **UJR Technologies**, building ML SDKs and CI/CD pipelines. He holds an M.S. in Computer Science from Virginia Tech (Dec 2024) and has significant expertise in **LangGraph**, **Kubernetes**, **PyTorch**, and **MLOps**.
+# Krishna Vamsi Dhulipalla
+**AI Engineer**
++1 540-558-3528 | [krishnadhulipalla13@gmail.com](mailto:krishnadhulipalla13@gmail.com)
+
+I am an AI Engineer specializing in building production LLM systems, agentic workflows, and RAG pipelines for enterprise use cases. I have extensive experience designing multi-agent systems with LangGraph, MCP servers, and API-driven orchestration. 
+
+My work ranges from rapid prototyping of AI agents and integrating enterprise data systems to deploying scalable AI services on AWS and Kubernetes. Currently, I work as an AI Software Engineer at Tabner Inc., previously holding roles as a Machine Learning Engineer and Graduate Research Assistant at Virginia Tech, where I also completed my M.Eng. in Computer Science.
+
+**Core Proficiencies:** Python, TypeScript, LangGraph, RAG architectures, Multi-Agent Orchestration, AWS Bedrock, OpenAI API, PyTorch, LoRA fine-tuning, AWS, Kubernetes, FastAPI, and PostgreSQL.

ui/index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100..700;1,100..700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
     <title>Krishn'a Chatbot</title>
   </head>
   <body>

ui/src/App.tsx

@@ -15,6 +15,8 @@ import {
   DocumentDuplicateIcon,
   ChatBubbleLeftRightIcon,
   CommandLineIcon,
+  SunIcon,
+  MoonIcon,
 } from "@heroicons/react/24/outline";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -26,16 +28,7 @@ import type { ThreadMeta } from "./threads";
 // --- Constants & Config ---
 const APP_TITLE = "Krishna's Digital Twin";
 const BOT_AVATAR =
-  "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=Krishna1&backgroundColor=6366f1"; // Cleaner 3D-ish Robot
-
-/*
-const DID_YOU_KNOW = [
-  "Krishna achieved a 3.95 GPA during his M.S. at Virginia Tech.",
-  "Krishna built an agent that automates Android UI tasks with 80%+ accuracy.",
-  "Krishna optimized genomic ETL pipelines reducing runtime by 70%.",
-  "Krishna specializes in building autonomous agents and RAG systems.",
-];
-*/
+  "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=Krishna1&backgroundColor=4e67b6";
 
 const SUGGESTIONS = [
   {
@@ -60,32 +53,6 @@ const SUGGESTIONS = [
   },
 ];
 
-/*
-function DidYouKnowRotator() {
-  const [index, setIndex] = useState(0);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setIndex((prev) => (prev + 1) % DID_YOU_KNOW.length);
-    }, 5000); // Rotate every 5 seconds
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className="mt-8 p-4 rounded-xl bg-white/5 border border-white/5 max-w-lg mx-auto text-center animate-in fade-in slide-in-from-bottom-2 duration-700">
-      <p className="text-[10px] uppercase tracking-widest text-zinc-500 font-semibold mb-2">
-        Did you know?
-      </p>
-      <p
-        key={index}
-        className="text-sm text-zinc-300 italic min-h-[20px] transition-all duration-500"
-      >
-        "{DID_YOU_KNOW[index]}"
-      </p>
-    </div>
-  );
-}
-*/
-
 // --- Helper: Date Grouping for Sidebar ---
 function groupThreadsByDate(threads: ThreadMeta[]) {
   const today = new Date();
@@ -135,6 +102,22 @@ export default function App() {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const prevThreadId = useRef<string | null>(null);
 
+  // Theme toggle logic
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+
+  useEffect(() => {
+    // Sync theme with HTML class
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
   // --- Voice Input Logic ---
   const [isListening, setIsListening] = useState(false);
   const recognitionRef = useRef<any>(null);
@@ -205,41 +188,46 @@ export default function App() {
         sendMessage();
       }
     },
-    [sendMessage]
+    [sendMessage],
   );
 
   const groupedThreads = useMemo(() => groupThreadsByDate(threads), [threads]);
 
   return (
-    <div className="flex h-screen w-screen bg-[#05050A] text-zinc-100 font-sans selection:bg-indigo-500/30">
-      {/* Background Ambience */}
-      <div className="fixed inset-0 z-0 pointer-events-none">
-        <div className="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-indigo-900/20 rounded-full blur-[128px]" />
-        <div className="absolute bottom-[-10%] left-[-10%] w-[600px] h-[600px] bg-purple-900/10 rounded-full blur-[128px]" />
-      </div>
+    <div className="flex h-screen w-screen selection:-text-accent-teal/30">
+      {/* Background Ambience / Structural Divs */}
+      <div className="fixed inset-0 z-0 pointer-events-none"></div>
 
       {/* --- Sidebar --- */}
-      <aside className="hidden md:flex flex-col w-[280px] z-10 bg-zinc-950/40 backdrop-blur-xl border-r border-white/5 transition-all">
+      <aside className="hidden md:flex flex-col w-[280px] z-10 bg-[var(--bg-strong-paper)]/80 backdrop-blur-xl border-r border-[var(--text-soft-ink)]/10 transition-all">
         {/* Header */}
-        <div className="p-4 border-b border-white/5">
+        <div className="p-4 border-b border-[var(--text-soft-ink)]/10">
           <button
             onClick={newChat}
-            className="group flex items-center gap-3 w-full px-3 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/5 transition-all duration-200"
+            className="group flex items-center gap-3 w-full px-3 py-2.5 rounded-xl border border-[var(--text-soft-ink)]/10 bg-[var(--bg-panel)] hover:bg-[var(--text-ink)]/5 transition-all duration-200"
           >
-            <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-400 group-hover:text-indigo-300">
+            <div className="p-1.5 rounded-lg bg-[var(--accent-blue)]/10 text-[var(--accent-blue)]">
               <SparklesIcon className="w-5 h-5" />
             </div>
-            <span className="text-sm font-medium text-zinc-200">New Chat</span>
+            <span
+              className="text-sm font-medium font-mono uppercase tracking-wide text-[var(--text-ink)] spider-hover"
+              data-text="New Chat"
+            >
+              New Chat
+            </span>
           </button>
         </div>
 
         {/* History List */}
-        <div className="flex-1 overflow-y-auto p-3 space-y-6 scrollbar-thin scrollbar-thumb-zinc-800">
+        <div className="flex-1 overflow-y-auto p-3 space-y-6 scrollbar-thin scrollbar-thumb-[var(--text-soft-ink)]">
           {Object.entries(groupedThreads).map(([label, group]) => {
             if (group.length === 0) return null;
             return (
               <div key={label}>
-                <h3 className="px-3 mb-2 text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+                <h3
+                  className="px-3 mb-2 text-[10px] font-mono uppercase tracking-[0.12em] text-[var(--text-soft-ink)] spider-hover"
+                  data-text={label}
+                >
                   {label}
                 </h3>
                 <div className="space-y-0.5">
@@ -249,12 +237,13 @@ export default function App() {
                       onClick={() => setActiveThread(t)}
                       className={`group relative flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors ${
                         active?.id === t.id
-                          ? "bg-white/10 text-zinc-100"
-                          : "text-zinc-400 hover:bg-white/5 hover:text-zinc-200"
+                          ? "bg-[var(--text-ink)]/10 text-[var(--text-ink)]"
+                          : "text-[var(--text-soft-ink)] hover:bg-[var(--text-ink)]/5 hover:text-[var(--text-ink)]"
                       }`}
                     >
                       <span
-                        className="text-sm flex-1 line-clamp-1 break-all"
+                        className="text-sm flex-1 line-clamp-1 break-all spider-hover"
+                        data-text={t.title || "New Conversation"}
                         title={t.title || "New Conversation"}
                       >
                         {t.title || "New Conversation"}
@@ -266,7 +255,7 @@ export default function App() {
                           if (window.confirm("Delete thread?"))
                             deleteThread(t.id);
                         }}
-                        className="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-red-500/20 text-zinc-500 hover:text-red-400 transition-all"
+                        className="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-[var(--accent-rust)]/10 text-[var(--text-soft-ink)] hover:text-[var(--accent-rust)] transition-all z-10"
                       >
                         <TrashIcon className="w-3.5 h-3.5" />
                       </button>
@@ -279,12 +268,13 @@ export default function App() {
         </div>
 
         {/* Sidebar Footer */}
-        <div className="p-4 border-t border-white/5">
+        <div className="p-4 border-t border-[var(--text-soft-ink)]/10">
           <a
             href="https://github.com/krishna-dhulipalla/LangGraph_ChatBot"
             target="_blank"
             rel="noreferrer"
-            className="flex items-center gap-2 text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
+            className="flex items-center gap-2 text-xs font-mono uppercase tracking-wide text-[var(--text-soft-ink)] hover:text-[var(--text-ink)] transition-colors spider-hover"
+            data-text="View Source Code"
           >
             <CommandLineIcon className="w-4 h-4" />
             <span>View Source Code</span>
@@ -295,31 +285,45 @@ export default function App() {
       {/* --- Main Chat Area --- */}
       <main className="relative z-10 flex-1 flex flex-col h-full overflow-hidden">
         {/* Top Navigation */}
-        <header className="h-16 flex items-center justify-between px-6 border-b border-white/5 bg-zinc-950/20 backdrop-blur-sm">
+        <header className="h-16 flex items-center justify-between px-6 border-b border-[var(--text-soft-ink)]/10 bg-[var(--bg-paper)]/60 backdrop-blur-md">
           <div className="flex items-center gap-3">
             <div className="relative">
               <img
                 src={BOT_AVATAR}
                 alt="Bot"
-                className="w-9 h-9 rounded-full ring-2 ring-indigo-500/20 shadow-lg shadow-indigo-500/10"
+                className="w-9 h-9 rounded-md border border-[var(--text-soft-ink)]/20 shadow-[2px_2px_0_var(--shadow-blue)]"
               />
-              <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-[#05050A] rounded-full"></span>
+              <span className="absolute -bottom-1 -right-1 w-3 h-3 bg-[var(--accent-teal)] border-2 border-[var(--bg-paper)] rounded-full"></span>
             </div>
             <div>
-              <h1 className="text-sm font-semibold text-zinc-100">
+              <h1
+                className="text-lg display-heading text-[var(--text-ink)] spider-title font-semibold"
+                data-text={APP_TITLE}
+              >
                 {APP_TITLE}
               </h1>
-              <p className="text-[10px] text-zinc-400 flex items-center gap-1">
-                <span className="inline-block w-1 h-1 rounded-full bg-indigo-500 animate-pulse" />
+              <p className="text-[10px] font-mono uppercase tracking-widest text-[var(--text-soft-ink)] flex items-center gap-1">
+                <span className="inline-block w-1.5 h-1.5 rounded-full bg-[var(--accent-blue)] animate-pulse" />
                 Online & Ready
               </p>
             </div>
           </div>
 
           <div className="flex items-center gap-2">
+            <button
+              onClick={toggleTheme}
+              className="p-2 text-[var(--text-soft-ink)] hover:text-[var(--text-ink)] hover:bg-[var(--text-ink)]/5 rounded-full transition-all"
+              title="Toggle Theme"
+            >
+              {theme === "light" ? (
+                <MoonIcon className="w-5 h-5" />
+              ) : (
+                <SunIcon className="w-5 h-5" />
+              )}
+            </button>
             <button
               onClick={clearChat}
-              className="p-2 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 rounded-full transition-all"
+              className="p-2 text-[var(--text-soft-ink)] hover:text-[var(--text-ink)] hover:bg-[var(--text-ink)]/5 rounded-full transition-all"
               title="Clear Chat"
             >
               <ArrowPathIcon className="w-5 h-5" />
@@ -331,39 +335,38 @@ export default function App() {
         <div className="flex-1 overflow-y-auto p-4 md:p-8 scroll-smooth">
           {messages.length === 0 ? (
             <div className="h-full flex flex-col items-center justify-center max-w-2xl mx-auto animate-in fade-in duration-500">
-              <div className="mb-8 p-4 rounded-full bg-white/5 ring-1 ring-white/10 shadow-2xl shadow-indigo-500/10">
-                <ChatBubbleLeftRightIcon className="w-10 h-10 text-indigo-400" />
+              <div className="mb-2 p-4 bg-[var(--bg-panel)] border border-[var(--text-soft-ink)]/10 shadow-[4px_4px_0_var(--shadow-blue),-2px_-2px_0_rgba(186,90,69,0.04)] rotate-3">
+                <ChatBubbleLeftRightIcon className="w-10 h-10 text-[var(--accent-blue)] -rotate-3" />
               </div>
-              <h2 className="text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-br from-zinc-100 to-zinc-500 mb-2">
+              <h2
+                className="text-3xl section-title text-[var(--text-ink)] mb-4 spider-title"
+                data-text="How can I help you today?"
+              >
                 How can I help you today?
               </h2>
-              <p className="text-zinc-400 text-sm mb-6 max-w-md text-center">
+              <p className="text-[var(--text-soft-ink)] text-sm mb-8 max-w-md text-center leading-relaxed">
                 I'm Krishna's digital twin. Ask me about his architecture
                 skills, recent projects, or schedule a meeting.
               </p>
 
-              {/* <DidYouKnowRotator /> */}
-              {/* <div className="h-8"></div> */}
-
               {/* Suggestions Grid */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 w-full">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
                 {SUGGESTIONS.map((s, i) => (
                   <button
                     key={i}
                     onClick={() => {
-                      // Just send immediately without prefilling input state visually
                       if (!isStreaming) send(s.text);
                     }}
-                    className="group flex items-start gap-4 p-4 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/5 hover:border-white/10 text-left transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/10"
+                    className="group flex items-start gap-4 p-5 bg-[var(--bg-panel)] hover:bg-[var(--bg-strong-paper)] border border-[var(--text-soft-ink)]/10 text-left transition-all hover:-translate-y-1 hover:shadow-[4px_4px_0_var(--shadow-blue)]"
                   >
-                    <span className="text-xl grayscale group-hover:grayscale-0 transition-all">
+                    <span className="text-xl inline-block group-hover:scale-110 transition-transform">
                       {s.icon}
                     </span>
                     <div>
-                      <div className="text-sm font-medium text-zinc-200 group-hover:text-indigo-300 transition-colors">
+                      <div className="text-sm font-semibold font-serif text-[var(--text-ink)] group-hover:text-[var(--accent-blue)] transition-colors">
                         {s.title}
                       </div>
-                      <div className="text-xs text-zinc-500 mt-1 line-clamp-1 group-hover:text-zinc-400 transition-colors">
+                      <div className="text-xs text-[var(--text-soft-ink)] mt-1 line-clamp-2 leading-relaxed">
                         {s.text}
                       </div>
                     </div>
@@ -383,9 +386,9 @@ export default function App() {
               {/* Streaming Indicator */}
               {isStreaming && !hasFirstToken && (
                 <div className="flex gap-1 ml-14">
-                  <span className="w-2 h-2 rounded-full bg-zinc-600 animate-bounce" />
-                  <span className="w-2 h-2 rounded-full bg-zinc-600 animate-bounce [animation-delay:0.1s]" />
-                  <span className="w-2 h-2 rounded-full bg-zinc-600 animate-bounce [animation-delay:0.2s]" />
+                  <span className="w-2 h-2 rounded-full bg-[var(--text-soft-ink)] animate-bounce" />
+                  <span className="w-2 h-2 rounded-full bg-[var(--text-soft-ink)] animate-bounce [animation-delay:0.1s]" />
+                  <span className="w-2 h-2 rounded-full bg-[var(--text-soft-ink)] animate-bounce [animation-delay:0.2s]" />
                 </div>
               )}
               <div ref={bottomRef} className="h-4" />
@@ -396,14 +399,14 @@ export default function App() {
         {/* --- Input Area --- */}
         <div className="p-4 md:p-6 pb-8">
           <div className="max-w-3xl mx-auto relative">
-            <div className="relative flex flex-col gap-2 p-2 rounded-3xl bg-zinc-900/50 backdrop-blur-xl border border-white/10 shadow-2xl focus-within:ring-1 focus-within:ring-indigo-500/50 transition-all">
+            <div className="relative flex flex-col gap-2 p-2 bg-[var(--bg-strong-paper)]/90 backdrop-blur-xl rounded-2xl border border-[var(--text-soft-ink)]/20 shadow-sm focus-within:ring-1 focus-within:ring-[var(--accent-blue)] transition-all">
               <textarea
                 ref={inputRef}
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder="Type a message..."
-                className="w-full bg-transparent text-zinc-100 placeholder-zinc-500 px-4 py-3 min-h-[50px] max-h-[200px] resize-none outline-none text-[15px] leading-relaxed scrollbar-hide"
+                className="w-full bg-transparent text-[var(--text-ink)] placeholder-[var(--text-soft-ink)] px-4 py-3 min-h-[50px] max-h-[200px] resize-none outline-none text-[15px] leading-relaxed scrollbar-hide font-sans"
                 rows={1}
               />
 
@@ -411,17 +414,17 @@ export default function App() {
               <div className="flex items-center justify-between px-2 pb-1">
                 <div className="flex items-center gap-1">
                   <button
-                    className="cursor-not-allowed opacity-50 p-2 rounded-xl text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors"
+                    className="cursor-not-allowed opacity-50 p-2 text-[var(--text-soft-ink)] hover:text-[var(--text-ink)] hover:bg-[var(--text-ink)]/5 transition-colors"
                     title="Attach file (coming soon)"
                   >
                     <PaperClipIcon className="w-5 h-5" />
                   </button>
                   <button
                     onClick={toggleListening}
-                    className={`p-2 rounded-xl transition-all duration-300 ${
+                    className={`p-2 transition-all duration-300 ${
                       isListening
-                        ? "text-red-400 bg-red-500/10 animate-pulse ring-1 ring-red-500/20"
-                        : "text-zinc-400 hover:text-zinc-200 hover:bg-white/5"
+                        ? "text-[var(--accent-rust)] bg-[var(--accent-rust)]/10 animate-pulse ring-1 ring-[var(--accent-rust)]/20"
+                        : "text-[var(--text-soft-ink)] hover:text-[var(--text-ink)] hover:bg-[var(--text-ink)]/5"
                     }`}
                     title={isListening ? "Stop Listening" : "Voice Input"}
                   >
@@ -432,25 +435,23 @@ export default function App() {
                 <button
                   onClick={sendMessage}
                   disabled={!input.trim() || isStreaming}
-                  className={`p-2 rounded-xl flex items-center gap-2 transition-all ${
+                  className={`p-2 px-4 rounded-xl flex items-center gap-2 transition-all font-mono uppercase tracking-widest text-xs font-semibold ${
                     input.trim() && !isStreaming
-                      ? "bg-indigo-600 text-white shadow-lg shadow-indigo-500/20 hover:bg-indigo-500"
-                      : "bg-zinc-800 text-zinc-500 cursor-not-allowed"
+                      ? "bg-[var(--text-ink)] text-[var(--bg-paper)] hover:opacity-90 shadow-sm"
+                      : "bg-[var(--text-soft-ink)]/10 text-[var(--text-soft-ink)] cursor-not-allowed"
                   }`}
                 >
                   {isStreaming ? (
-                    <span className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" />
+                    <span className="w-4 h-4 border-2 border-[var(--bg-paper)] border-t-transparent rounded-full animate-spin" />
                   ) : (
-                    <PaperAirplaneIcon className="w-5 h-5 -ml-0.5 transform -rotate-45 translate-x-0.5" />
+                    <>
+                      Send
+                      <PaperAirplaneIcon className="w-4 h-4 -ml-0.5" />
+                    </>
                   )}
                 </button>
               </div>
             </div>
-            <div className="text-center mt-3">
-              <p className="text-[10px] text-zinc-600">
-                AI can make mistakes. Please verify important information.
-              </p>
-            </div>
           </div>
         </div>
       </main>
@@ -473,20 +474,21 @@ function Bubble({
       className={`flex gap-4 ${isUser ? "justify-end" : "justify-start group"}`}
     >
       {!isUser && (
-        <div className="shrink-0 flex flex-col gap-2">
+        <div className="shrink-0 flex flex-col gap-2 pt-1">
           <img
             src={BOT_AVATAR}
             alt="AI"
-            className="w-8 h-8 rounded-full ring-1 ring-white/10"
+            className="w-8 h-8 rounded border border-[var(--text-soft-ink)]/20 spider-title"
+            data-text=""
           />
         </div>
       )}
 
       <div
-        className={`relative max-w-[85%] md:max-w-[75%] rounded-2xl px-5 py-3.5 shadow-sm text-[15px] leading-7 ${
+        className={`relative max-w-[85%] md:max-w-[80%] px-5 py-4 text-[15px] leading-relaxed transition-all ${
           isUser
-            ? "bg-gradient-to-br from-indigo-600 to-violet-600 text-white rounded-br-sm shadow-md shadow-indigo-500/10"
-            : "bg-white/5 border border-white/5 text-zinc-100 rounded-bl-sm backdrop-blur-md"
+            ? "bg-[var(--bg-panel)] border-2 border-[var(--accent-blue)] text-[var(--text-ink)] shadow-[4px_4px_0_var(--shadow-blue)] font-medium"
+            : "bg-[var(--bg-strong-paper)] border border-[var(--text-soft-ink)]/20 text-[var(--text-ink)] shadow-[2px_2px_0_rgba(186,90,69,0.04)]"
         }`}
       >
         <ReactMarkdown
@@ -495,41 +497,76 @@ function Bubble({
             a: ({ ...props }) => (
               <a
                 {...props}
-                className="text-blue-400 hover:underline"
+                className="text-[var(--accent-blue)] underline underline-offset-4 decoration-[var(--accent-blue)]/30 hover:decoration-[var(--accent-blue)] hover:text-[var(--accent-blue)] inline-block spider-hover"
+                data-text={props.children}
                 target="_blank"
               />
             ),
+            h1: ({ ...props }) => (
+              <h1
+                className="text-2xl display-heading mt-6 mb-4 spider-title"
+                data-text={props.children}
+                {...props}
+              />
+            ),
+            h2: ({ ...props }) => (
+              <h2
+                className="text-xl section-title mt-5 mb-3 spider-title"
+                data-text={props.children}
+                {...props}
+              />
+            ),
+            h3: ({ ...props }) => (
+              <h3
+                className="text-lg font-semibold font-serif mt-4 mb-2"
+                {...props}
+              />
+            ),
             code: ({ inline, className, children, ...props }: any) => {
               if (inline)
                 return (
                   <code
-                    className="bg-white/10 px-1 py-0.5 rounded font-mono text-sm"
+                    className="bg-[var(--text-soft-ink)]/10 text-[var(--accent-rust)] px-1.5 py-0.5 font-mono text-[13px]"
                     {...props}
                   >
                     {children}
                   </code>
                 );
               return (
-                <pre className="bg-zinc-950/50 p-3 rounded-xl border border-white/5 overflow-x-auto my-2 text-sm">
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                </pre>
+                <div className="relative group/code">
+                  <div
+                    className="absolute top-2 right-2 text-[10px] font-mono text-[var(--text-soft-ink)] px-2 py-1 bg-[var(--bg-paper)]/50 uppercase tracking-widest pointer-events-none opacity-50 spider-title"
+                    data-text="CODE"
+                  >
+                    CODE
+                  </div>
+                  <pre className="bg-[var(--bg-panel)] p-4 border border-[var(--text-soft-ink)]/20 overflow-x-auto my-4 text-sm shadow-inner font-mono text-[var(--text-ink)]">
+                    <code className={className} {...props}>
+                      {children}
+                    </code>
+                  </pre>
+                </div>
               );
             },
             ul: (props) => (
               <ul
-                className="list-disc list-inside ml-2 space-y-1 my-2"
+                className="list-disc list-inside ml-2 space-y-1.5 my-3"
                 {...props}
               />
             ),
             ol: (props) => (
               <ol
-                className="list-decimal list-inside ml-2 space-y-1 my-2"
+                className="list-decimal list-inside ml-2 space-y-1.5 my-3"
+                {...props}
+              />
+            ),
+            p: (props) => <p className="mb-3 last:mb-0" {...props} />,
+            strong: (props) => (
+              <strong
+                className="font-semibold text-[var(--accent-blue)]"
                 {...props}
               />
             ),
-            p: (props) => <p className="mb-2 last:mb-0" {...props} />,
           }}
         >
           {message.content}
@@ -537,7 +574,7 @@ function Bubble({
 
         {/* Actions for Assistant */}
         {!isUser && !isStreaming && (
-          <div className="absolute -bottom-6 left-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-2">
+          <div className="absolute -bottom-8 left-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-2">
             <ActionButton
               icon={<DocumentDuplicateIcon className="w-3.5 h-3.5" />}
               label="Copy"
@@ -567,7 +604,8 @@ function ActionButton({
   return (
     <button
       onClick={onClick}
-      className="flex items-center gap-1 text-[10px] text-zinc-500 hover:text-zinc-300 bg-white/5 px-2 py-1 rounded-md transition-colors"
+      className="flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-widest text-[var(--text-soft-ink)] hover:text-[var(--text-ink)] bg-[var(--bg-panel)] border border-[var(--text-soft-ink)]/10 px-2 py-1 transition-colors spider-hover"
+      data-text={label}
     >
       {icon} {label}
     </button>

ui/src/index.css

@@ -1,7 +1,69 @@
 @import "tailwindcss";
 
+@theme {
+  --color-paper: var(--bg-paper);
+  --color-strong-paper: var(--bg-strong-paper);
+  --color-panel: var(--bg-panel);
+  --color-ink: var(--text-ink);
+  --color-soft-ink: var(--text-soft-ink);
+  --color-accent-blue: var(--accent-blue);
+  --color-accent-rust: var(--accent-rust);
+  --color-accent-teal: var(--accent-teal);
+
+  --font-serif: "Source Serif 4", serif;
+  --font-sans: "IBM Plex Sans", sans-serif;
+  --font-mono: "IBM Plex Mono", monospace;
+}
+
+:root {
+  /* Light Mode */
+  --bg-paper: #f4efe6;
+  --bg-strong-paper: #fcf8f1;
+  --bg-panel: #f7f1e8;
+  --text-ink: #171412;
+  --text-soft-ink: #5d564f;
+  --accent-blue: #4e67b6;
+  --accent-rust: #ba5a45;
+  --accent-teal: #1a766c;
+
+  --spider-blend: multiply;
+}
+
+html.dark {
+  /* Dark Mode */
+  --bg-paper: #11100f;
+  --bg-strong-paper: #181614;
+  --bg-panel: #141210;
+  --text-ink: #f2ede4;
+  --text-soft-ink: #b7aea2;
+  --accent-blue: #8fa7ff;
+  --accent-rust: #ef8d74;
+  --accent-teal: #62c2b4;
+
+  --spider-blend: screen;
+}
+
+body {
+  background-color: var(--bg-paper);
+  color: var(--text-ink);
+  font-family: var(--font-sans);
+}
+
+.display-heading,
+.section-title {
+  font-family: var(--font-serif);
+  letter-spacing: -0.03em;
+}
+
+/* 3. Chroma Ink Text Shadow */
+.chroma-ink {
+  text-shadow:
+    0.02em 0 0 var(--accent-blue),
+    -0.02em 0 0 var(--accent-rust);
+}
+
 @layer utilities {
-  /* Custom Scrollbar for Dark Mode */
+  /* Custom Scrollbar */
   ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -10,10 +72,10 @@
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background: #3f3f46; /* zinc-700 */
+    background: var(--text-soft-ink);
     border-radius: 10px;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: #52525b; /* zinc-600 */
+    background: var(--text-ink);
   }
 }