feat: Initialize project structure

Sets up the basic project configuration for Cognitive Clarity. This includes:
- Initializing `package.json` with necessary dependencies (React, Gemini API, Lucide React) and build scripts for Vite.
- Creating a basic `index.html` with Tailwind CSS and Google Fonts integration.
- Setting up `index.tsx` as the React application entry point.
- Configuring `tsconfig.json` for TypeScript compilation with Vite.
- Establishing `vite.config.ts` for development server setup and environment variable handling.
- Adding a standard `.gitignore` file.
- Updating `README.md` with local run instructions and AI Studio links.
- Defining `metadata.json` for application details.
- Creating core type definitions in `types.ts`.
- Populating `constants.ts` with initial CBT glossary terms.
- Adding utility functions for audio processing in `services/audioUtils.ts`.

components/ChatMessage.tsx

@@ -0,0 +1,40 @@
+
+import React from 'react';
+import { User, Bot } from 'lucide-react';
+import { Message } from '../types';
+
+interface ChatMessageProps {
+  message: Message;
+  isLoading?: boolean;
+}
+
+const ChatMessage: React.FC<ChatMessageProps> = ({ message, isLoading }) => {
+  const isModel = message.role === 'model';
+
+  return (
+    <div className={`flex ${!isModel ? 'justify-end' : 'justify-start'}`}>
+      <div className={`flex max-w-[85%] gap-3 ${!isModel ? 'flex-row-reverse' : 'flex-row'}`}>
+        <div className={`w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm border ${
+          !isModel ? 'bg-teal-50 text-teal-600 border-teal-100' : 'bg-slate-50 text-slate-600 border-slate-100'
+        }`}>
+          {!isModel ? <User size={18} /> : <Bot size={18} />}
+        </div>
+        <div className={`p-4 rounded-2xl text-sm leading-relaxed shadow-sm ${
+          !isModel 
+            ? 'bg-teal-600 text-white rounded-tr-none' 
+            : 'bg-[#F9FAFB] text-slate-800 rounded-tl-none border border-slate-100'
+        }`}>
+          {message.text || (isModel && isLoading ? (
+            <div className="flex gap-1 items-center">
+              <span className="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+              <span className="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+              <span className="w-1 h-1 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+            </div>
+          ) : null)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(ChatMessage);