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/LiveInsightPanel.tsx

@@ -0,0 +1,97 @@
+
+import React from 'react';
+import { BrainCircuit, Loader2, CheckCircle2, AlertTriangle, Lightbulb, TrendingUp } from 'lucide-react';
+import { AnalysisResult } from '../types';
+
+interface LiveInsightPanelProps {
+  analysis: AnalysisResult | null;
+  isAnalyzing: boolean;
+}
+
+const LiveInsightPanel: React.FC<LiveInsightPanelProps> = ({ analysis, isAnalyzing }) => {
+  return (
+    <div className="lg:w-[35%] w-full bg-white rounded-3xl border border-slate-200 overflow-y-auto flex flex-col animate-in slide-in-from-right-8 duration-500 shadow-xl lg:h-full h-[400px]">
+      <div className="p-6 border-b border-slate-100 flex items-center justify-between bg-[#F8FAFC]">
+        <div className="flex items-center gap-2 text-teal-600">
+           <BrainCircuit size={20} />
+           <h3 className="font-bold text-xs uppercase tracking-widest text-slate-800">Live Clinical Insight</h3>
+        </div>
+        {isAnalyzing && <Loader2 size={16} className="animate-spin text-teal-500" />}
+      </div>
+      
+      <div className="p-6 space-y-6">
+        {analysis ? (
+          <div className="animate-in fade-in duration-500 space-y-5">
+            <div className={`p-5 rounded-2xl border-l-4 ${analysis.analysis.isAdaptive ? 'bg-teal-50/50 border-teal-500' : 'bg-rose-50/50 border-rose-500'}`}>
+              <div className="flex items-center gap-2 mb-3">
+                {analysis.analysis.isAdaptive ? (
+                  <CheckCircle2 size={16} className="text-teal-600" />
+                ) : (
+                  <AlertTriangle size={16} className="text-rose-600" />
+                )}
+                <span className={`font-bold text-[10px] uppercase tracking-wider ${analysis.analysis.isAdaptive ? 'text-teal-800' : 'text-rose-800'}`}>
+                  {analysis.analysis.isAdaptive ? 'Optimal Thinking' : 'Distortion Identified'}
+                </span>
+              </div>
+              
+              {!analysis.analysis.isAdaptive && analysis.analysis.distortions.length > 0 && (
+                <div className="flex flex-wrap gap-1.5 mb-3">
+                  {analysis.analysis.distortions.map((d, i) => (
+                    <span key={i} className="text-[9px] font-black uppercase tracking-widest text-white bg-rose-500 px-2 py-0.5 rounded shadow-sm">
+                      {d}
+                    </span>
+                  ))}
+                </div>
+              )}
+              
+              <p className={`text-xs leading-relaxed font-medium ${analysis.analysis.isAdaptive ? 'text-teal-800' : 'text-rose-800'}`}>
+                {analysis.analysis.evidence}
+              </p>
+            </div>
+
+            <div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 shadow-inner">
+              <div className="flex justify-between items-center mb-3">
+                <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Efficiency</span>
+                <div className="flex gap-1">
+                  {[1,2,3,4,5].map(star => (
+                    <div key={star} className={`h-1.5 w-4 rounded-full ${star <= analysis.rating.score ? 'bg-teal-500' : 'bg-slate-200'}`} />
+                  ))}
+                </div>
+              </div>
+              <p className="text-xs text-slate-600 font-medium leading-relaxed">{analysis.rating.reason}</p>
+            </div>
+
+            <div className="space-y-3">
+              <div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm relative overflow-hidden group">
+                 <div className="flex items-center gap-2 text-teal-600 mb-2">
+                   <Lightbulb size={16} />
+                   <span className="text-[10px] font-black uppercase tracking-widest">Master Reframe</span>
+                 </div>
+                 <p className="text-sm text-slate-800 italic font-medium leading-relaxed relative z-10">"{analysis.suggestions.alternativeThought}"</p>
+              </div>
+              
+              <div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm">
+                 <div className="flex items-center gap-2 text-teal-600 mb-2">
+                   <TrendingUp size={16} />
+                   <span className="text-[10px] font-black uppercase tracking-widest">Tactical Pivot</span>
+                 </div>
+                 <p className="text-xs text-slate-800 leading-relaxed font-light">{analysis.suggestions.behavioralStep}</p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="h-full flex flex-col items-center justify-center text-center p-8 space-y-4 pt-20">
+             <div className="w-16 h-16 rounded-3xl bg-slate-50 flex items-center justify-center border border-slate-100 animate-pulse">
+               <BrainCircuit size={32} className="text-slate-300" />
+             </div>
+             <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-loose">
+               Monitoring Interaction...<br/>Turn analysis pending
+             </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(LiveInsightPanel);