Updated app

docs/blueprint.md

@@ -0,0 +1,21 @@
+# **App Name**: JourneyAI
+
+## Core Features:
+
+- Landing Page: Landing page with demo information and a 'View Demo' button.
+- Journey Selection: 'Select a journey' screen with three predefined journey options, each with an image, label, and 'launch' button. A tooltip explains.
+- AI-Powered MCQ Generation: Generative AI powered chatbot interface on the right, using the image as context for question generation.
+- Chatbot UI: Displays system messages (MCQ questions, options, feedback) and user responses in a conversational chat layout.
+- Response Handling: Implements logic for feedback and option disabling upon wrong answers.
+- Final Summary Report: Uses generative AI as a tool to create a final summary report interpreting the selected image. The LLM chooses what to include from its analysis.
+- Consistent Navigation: A consistent back button and details button throughout the app for navigation and context.
+
+## Style Guidelines:
+
+- Primary color: Indigo (#4B0082) to evoke intellect, exploration, and clarity.
+- Background color: Light grey (#E6E6FA), a desaturated version of indigo, for a calming and clean backdrop.
+- Accent color: Violet (#8F00FF) to highlight interactive elements and guide the user through the interface.
+- Body text and headlines: 'Inter', sans-serif. Modern, machined, neutral, for clean readability and an objective feel.
+- Code font: 'Source Code Pro', monospace, for displaying any relevant technical details or instructions.
+- Simple, geometric icons to complement the tech-focused aesthetic.
+- Split-screen layout in the main interface, featuring image and chatbot side-by-side.

src/ai/dev.ts

@@ -1 +1,5 @@
-// Flows will be imported for their side effects in this file.
+import { config } from 'dotenv';
+config();
+
+import '@/ai/flows/summarize-image.ts';
+import '@/ai/flows/generate-mcq.ts';

src/ai/flows/generate-mcq.ts

@@ -0,0 +1,54 @@
+'use server';
+
+/**
+ * @fileOverview Generates multiple-choice questions (MCQs) related to a given image.
+ *
+ * - generateMCQ - A function that generates MCQs based on the provided image data URI.
+ * - GenerateMCQInput - The input type for the generateMCQ function, including the image data URI.
+ * - GenerateMCQOutput - The return type for the generateMCQ function, providing the generated MCQs.
+ */
+
+import {ai} from '@/ai/genkit';
+import {z} from 'genkit';
+
+const GenerateMCQInputSchema = z.object({
+  imageDataUri: z
+    .string()
+    .describe(
+      "A image, as a data URI that must include a MIME type and use Base64 encoding. Expected format: 'data:<mimetype>;base64,<encoded_data>'."
+    ),
+});
+export type GenerateMCQInput = z.infer<typeof GenerateMCQInputSchema>;
+
+const GenerateMCQOutputSchema = z.object({
+  mcq: z.string().describe('A multiple-choice question related to the image.'),
+  options: z.array(z.string()).describe('Array of possible answers.'),
+  correctAnswer: z.string().describe('The correct answer to the question.'),
+});
+export type GenerateMCQOutput = z.infer<typeof GenerateMCQOutputSchema>;
+
+export async function generateMCQ(input: GenerateMCQInput): Promise<GenerateMCQOutput> {
+  return generateMCQFlow(input);
+}
+
+const prompt = ai.definePrompt({
+  name: 'generateMCQPrompt',
+  input: {schema: GenerateMCQInputSchema},
+  output: {schema: GenerateMCQOutputSchema},
+  prompt: `You are an expert educator creating multiple choice questions.  Create one question related to the image provided, along with possible answers and the single correct answer.
+
+Image: {{media url=imageDataUri}}
+`,
+});
+
+const generateMCQFlow = ai.defineFlow(
+  {
+    name: 'generateMCQFlow',
+    inputSchema: GenerateMCQInputSchema,
+    outputSchema: GenerateMCQOutputSchema,
+  },
+  async input => {
+    const {output} = await prompt(input);
+    return output!;
+  }
+);

src/ai/flows/summarize-image.ts

@@ -0,0 +1,51 @@
+'use server';
+
+/**
+ * @fileOverview Summarizes an image to provide insights and key takeaways.
+ *
+ * - summarizeImage - A function that summarizes the image.
+ * - SummarizeImageInput - The input type for the summarizeImage function.
+ * - SummarizeImageOutput - The return type for the summarizeImage function.
+ */
+
+import {ai} from '@/ai/genkit';
+import {z} from 'genkit';
+
+const SummarizeImageInputSchema = z.object({
+  imageDataUri: z
+    .string()
+    .describe(
+      'The image to summarize, as a data URI that must include a MIME type and use Base64 encoding. Expected format: \'data:<mimetype>;base64,<encoded_data>\'.'      
+    ),
+});
+export type SummarizeImageInput = z.infer<typeof SummarizeImageInputSchema>;
+
+const SummarizeImageOutputSchema = z.object({
+  summary: z.string().describe('The summary of the image.'),
+});
+export type SummarizeImageOutput = z.infer<typeof SummarizeImageOutputSchema>;
+
+export async function summarizeImage(input: SummarizeImageInput): Promise<SummarizeImageOutput> {
+  return summarizeImageFlow(input);
+}
+
+const prompt = ai.definePrompt({
+  name: 'summarizeImagePrompt',
+  input: {schema: SummarizeImageInputSchema},
+  output: {schema: SummarizeImageOutputSchema},
+  prompt: `You are an AI expert in image analysis.  Summarize the key aspects and insights of the following image in a concise report.
+
+Image: {{media url=imageDataUri}}`,
+});
+
+const summarizeImageFlow = ai.defineFlow(
+  {
+    name: 'summarizeImageFlow',
+    inputSchema: SummarizeImageInputSchema,
+    outputSchema: SummarizeImageOutputSchema,
+  },
+  async input => {
+    const {output} = await prompt(input);
+    return output!;
+  }
+);

src/app/globals.css

@@ -8,73 +8,73 @@ body {
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --background: 240 67% 97%; /* Light Lavender - E6E6FA */
+    --foreground: 240 10% 3.9%; /* Default dark text */
+    --card: 240 67% 97%; /* Same as background for a cohesive look */
+    --card-foreground: 240 10% 3.9%;
+    --popover: 240 67% 97%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 272 100% 25%; /* Indigo - 4B0082 */
+    --primary-foreground: 0 0% 98%; /* White text on Indigo */
+    --secondary: 240 30% 90%; /* Lighter grey for secondary elements */
+    --secondary-foreground: 240 5% 25%;
+    --muted: 240 20% 85%; /* Muted grey */
+    --muted-foreground: 240 5% 45%;
+    --accent: 274 100% 50%; /* Violet - 8F00FF */
+    --accent-foreground: 0 0% 98%; /* White text on Violet */
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --border: 240 20% 88%; /* Slightly darker border */
+    --input: 240 20% 92%; /* Input background */
+    --ring: 274 100% 60%; /* Ring color related to accent */
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
+
+    /* Sidebar specific colors, matched to the theme */
+    --sidebar-background: 240 60% 95%; /* Slightly darker lavender for sidebar */
+    --sidebar-foreground: 240 10% 20%;
+    --sidebar-primary: 272 100% 25%;
     --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-accent: 274 100% 50%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 240 30% 85%;
+    --sidebar-ring: 274 100% 60%;
   }
+
   .dark {
-    --background: 0 0% 3.9%;
+    /* Define dark theme if needed, for now keep it consistent or adjust as per dark mode strategy */
+    --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
+    --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
+    --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
+    --primary: 272 100% 70%; /* Lighter Indigo for dark mode */
+    --primary-foreground: 272 100% 15%;
+    --secondary: 240 5% 15%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
+    --muted: 240 5% 20%;
     --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
+    --accent: 274 100% 65%; /* Lighter Violet for dark mode */
+    --accent-foreground: 274 100% 10%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --border: 240 5% 15%;
+    --input: 240 5% 15%;
+    --ring: 274 100% 70%;
+
+    --sidebar-background: 240 8% 7%;
+    --sidebar-foreground: 0 0% 95%;
+    --sidebar-primary: 272 100% 70%;
+    --sidebar-primary-foreground: 272 100% 15%;
+    --sidebar-accent: 274 100% 65%;
+    --sidebar-accent-foreground: 274 100% 10%;
+    --sidebar-border: 240 5% 15%;
+    --sidebar-ring: 274 100% 70%;
   }
 }
 

src/app/journey/[journeyId]/page.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { getJourneyById, type Journey } from '@/lib/journeys';
+import { Chatbot } from '@/components/chatbot/chatbot';
+import { SummaryReportDialog } from '@/components/journey/summary-report-dialog';
+import { AppHeader } from '@/components/layout/app-header';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertTriangle, Loader2 } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+
+
+async function imageToDataUri(imageUrl: string): Promise<string | null> {
+  try {
+    const response = await fetch(imageUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch image: ${response.statusText}`);
+    }
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  } catch (error) {
+    console.error("Error converting image to data URI:", error);
+    return null;
+  }
+}
+
+
+export default function JourneyPage() {
+  const router = useRouter();
+  const params = useParams();
+  const journeyId = typeof params.journeyId === 'string' ? params.journeyId : '';
+  const [journey, setJourney] = useState<Journey | null>(null);
+  const [imageDataUri, setImageDataUri] = useState<string | null>(null);
+  const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
+  const [isLoadingJourney, setIsLoadingJourney] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (journeyId) {
+      const currentJourney = getJourneyById(journeyId);
+      if (currentJourney) {
+        setJourney(currentJourney);
+        setError(null);
+      } else {
+        setError("Journey not found. Please select a valid journey.");
+        setJourney(null);
+        toast({
+          title: "Error",
+          description: "Journey not found.",
+          variant: "destructive",
+        });
+      }
+    } else {
+      setError("No journey ID provided.");
+       toast({
+          title: "Error",
+          description: "No journey ID in URL.",
+          variant: "destructive",
+        });
+    }
+  }, [journeyId, toast]);
+
+  useEffect(() => {
+    if (journey?.imageUrl) {
+      setIsLoadingJourney(true); // Start loading state for image conversion
+      imageToDataUri(journey.imageUrl)
+        .then(uri => {
+          setImageDataUri(uri);
+          if (!uri) {
+            setError("Failed to load journey image for AI interaction.");
+            toast({
+              title: "Image Load Error",
+              description: "Could not load image data for AI features. Some functionalities might be limited.",
+              variant: "destructive",
+            });
+          }
+        })
+        .finally(() => setIsLoadingJourney(false));
+    } else if (journey && !journey.imageUrl) {
+      // Journey exists but has no image URL
+      setError("Journey image is missing.");
+      toast({
+          title: "Missing Image",
+          description: "The selected journey does not have an image.",
+          variant: "destructive",
+      });
+      setIsLoadingJourney(false);
+    }
+  }, [journey, toast]);
+
+
+  const handleOpenSummaryDialog = useCallback(() => {
+    if (!imageDataUri) {
+      toast({
+        title: "Image Not Ready",
+        description: "The image data is still loading or failed to load. Please wait or try refreshing.",
+        variant: "destructive",
+      });
+      return;
+    }
+    setIsSummaryDialogOpen(true);
+  }, [imageDataUri, toast]);
+
+
+  if (error) {
+    return (
+      <div className="flex min-h-screen flex-col">
+        <AppHeader showBackButton backHref="/select-journey" />
+        <main className="container mx-auto flex flex-1 items-center justify-center p-4">
+          <Alert variant="destructive" className="max-w-md">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        </main>
+      </div>
+    );
+  }
+
+  if (!journey && !isLoadingJourney && !error) { // Initial state before journey is resolved or if ID is bad but not caught by setError yet
+     return (
+      <div className="flex min-h-screen flex-col">
+        <AppHeader showBackButton backHref="/select-journey" />
+        <main className="container mx-auto flex flex-1 items-center justify-center p-4">
+          <Loader2 className="h-12 w-12 animate-spin text-primary" />
+        </main>
+      </div>
+    );
+  }
+  
+  const journeyTitle = journey?.title || 'Loading Journey...';
+
+  return (
+    <div className="flex h-screen flex-col">
+      <AppHeader
+        showBackButton
+        backHref="/select-journey"
+        title={journeyTitle}
+        showDetailsButton={!!journey && !!imageDataUri} // Only show if journey and image are loaded
+        onDetailsClick={handleOpenSummaryDialog}
+      />
+      <main className="flex-1 overflow-hidden p-2 md:p-4">
+        <div className="grid h-full grid-cols-1 gap-2 md:grid-cols-2 md:gap-4">
+          <Card className="flex flex-col items-center justify-center overflow-hidden shadow-lg">
+            {isLoadingJourney || !journey?.imageUrl ? (
+              <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
+                 <Loader2 className="h-16 w-16 animate-spin text-primary mb-4" />
+                 <p className="text-muted-foreground">Loading image for {journey?.title || 'journey'}...</p>
+              </div>
+            ) : (
+              <Image
+                src={journey.imageUrl}
+                alt={journey.title}
+                width={800}
+                height={600}
+                className="h-full w-full object-contain p-2"
+                data-ai-hint={journey.imageHint}
+                priority
+              />
+            )}
+             {!isLoadingJourney && !journey?.imageUrl && journey && (
+              <div className="flex h-full w-full flex-col items-center justify-center bg-muted p-4 text-center">
+                 <AlertTriangle className="h-16 w-16 text-destructive mb-4" />
+                 <p className="text-destructive-foreground font-semibold">Image Not Available</p>
+                 <p className="text-sm text-muted-foreground">The image for this journey could not be displayed.</p>
+              </div>
+            )}
+          </Card>
+          
+          <div className="h-full overflow-y-auto">
+            {isLoadingJourney && !imageDataUri && (
+                <div className="flex h-full flex-col items-center justify-center rounded-lg border bg-card p-4 shadow-xl">
+                    <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
+                    <p className="text-muted-foreground">Preparing AI interactions...</p>
+                </div>
+            )}
+            {!isLoadingJourney && imageDataUri && journey && (
+              <Chatbot imageDataUri={imageDataUri} journeyTitle={journey.title} />
+            )}
+            {!isLoadingJourney && !imageDataUri && journey && (
+               <div className="flex h-full flex-col items-center justify-center rounded-lg border bg-card p-4 shadow-xl text-center">
+                    <AlertTriangle className="h-12 w-12 text-destructive mb-4" />
+                    <p className="font-semibold text-destructive">AI Features Unavailable</p>
+                    <p className="text-sm text-muted-foreground">Could not load image data required for AI chat and summary.</p>
+                </div>
+            )}
+          </div>
+        </div>
+      </main>
+      {journey && ( // SummaryReportDialog should only be available if a journey context exists
+        <SummaryReportDialog
+            isOpen={isSummaryDialogOpen}
+            onOpenChange={setIsSummaryDialogOpen}
+            imageDataUri={imageDataUri}
+            journeyTitle={journey.title}
+        />
+      )}
+    </div>
+  );
+}

src/app/layout.tsx

@@ -1,9 +1,10 @@
 import type {Metadata} from 'next';
 import './globals.css';
+import { Toaster } from "@/components/ui/toaster";
 
 export const metadata: Metadata = {
-  title: 'Firebase Studio App',
-  description: 'Generated by Firebase Studio',
+  title: 'JourneyAI',
+  description: 'AI-Powered MCQ and Summary Generation',
 };
 
 export default function RootLayout({
@@ -14,11 +15,15 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <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=Inter&display=swap" rel="stylesheet"></link>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet" />
       </head>
-      <body className="font-body antialiased">{children}</body>
+      <body className="font-body antialiased">
+        {children}
+        <Toaster />
+      </body>
     </html>
   );
 }

src/app/page.tsx

@@ -1,3 +1,103 @@
-export default function Home() {
-  return <></>;
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Rocket, Lightbulb, CheckCircle } from 'lucide-react';
+import Image from 'next/image';
+import { AppHeader } from '@/components/layout/app-header';
+
+export default function LandingPage() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <AppHeader />
+      <main className="flex-1">
+        <section className="container mx-auto flex flex-col items-center justify-center py-12 text-center md:py-20 lg:py-28">
+          <h1 className="mb-6 font-headline text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
+            Discover with <span className="text-primary">JourneyAI</span>
+          </h1>
+          <p className="mb-8 max-w-2xl text-lg text-muted-foreground md:text-xl">
+            Embark on interactive learning adventures. JourneyAI uses cutting-edge generative AI to create engaging multiple-choice questions and insightful summaries from images.
+          </p>
+          <Button size="lg" asChild className="font-semibold">
+            <Link href="/select-journey">
+              View Demo
+              <Rocket className="ml-2 h-5 w-5" />
+            </Link>
+          </Button>
+        </section>
+
+        <section className="bg-secondary py-12 md:py-20">
+          <div className="container mx-auto">
+            <h2 className="mb-12 text-center font-headline text-3xl font-bold md:text-4xl">
+              How It Works
+            </h2>
+            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+              <Card className="shadow-lg">
+                <CardHeader>
+                  <div className="mb-4 flex justify-center">
+                    <div className="rounded-full bg-primary/10 p-3">
+                      <Image src="https://placehold.co/48x48.png" alt="Select Journey Icon" width={48} height={48} data-ai-hint="map compass" className="rounded-full" />
+                    </div>
+                  </div>
+                  <CardTitle className="text-center font-headline">1. Select Your Journey</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="text-center">
+                    Choose from a variety of captivating visual scenarios to begin your exploration.
+                  </CardDescription>
+                </CardContent>
+              </Card>
+              <Card className="shadow-lg">
+                <CardHeader>
+                  <div className="mb-4 flex justify-center">
+                     <div className="rounded-full bg-primary/10 p-3">
+                       <Lightbulb className="h-12 w-12 text-primary" />
+                    </div>
+                  </div>
+                  <CardTitle className="text-center font-headline">2. Engage with AI</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="text-center">
+                    Answer AI-generated multiple-choice questions designed to deepen your understanding of the image.
+                  </CardDescription>
+                </CardContent>
+              </Card>
+              <Card className="shadow-lg">
+                <CardHeader>
+                  <div className="mb-4 flex justify-center">
+                    <div className="rounded-full bg-primary/10 p-3">
+                      <CheckCircle className="h-12 w-12 text-primary" />
+                    </div>
+                  </div>
+                  <CardTitle className="text-center font-headline">3. Get Insights</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="text-center">
+                    Receive a comprehensive AI-generated summary report interpreting the key aspects of the image.
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </section>
+        
+        <section className="container mx-auto py-12 text-center md:py-20">
+            <h2 className="mb-6 font-headline text-2xl font-bold md:text-3xl">Ready to Start?</h2>
+            <p className="mb-8 max-w-xl mx-auto text-muted-foreground">
+                Click the button below to dive into an AI-driven learning experience like no other.
+            </p>
+            <Button size="lg" asChild className="font-semibold">
+                <Link href="/select-journey">
+                Explore Journeys
+                <Rocket className="ml-2 h-5 w-5" />
+                </Link>
+            </Button>
+        </section>
+      </main>
+      <footer className="border-t py-6 text-center">
+        <p className="text-sm text-muted-foreground">
+          &copy; {new Date().getFullYear()} JourneyAI. Powered by Generative AI.
+        </p>
+      </footer>
+    </div>
+  );
 }

src/app/select-journey/page.tsx

@@ -0,0 +1,33 @@
+import { journeys } from '@/lib/journeys';
+import { JourneyCard } from '@/components/journey/journey-card';
+import { AppHeader } from '@/components/layout/app-header';
+
+export default function SelectJourneyPage() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <AppHeader showBackButton backHref="/" />
+      <main className="flex-1">
+        <section className="container mx-auto py-12 md:py-16">
+          <div className="mb-10 text-center">
+            <h1 className="font-headline text-3xl font-bold tracking-tight md:text-4xl">
+              Select Your Journey
+            </h1>
+            <p className="mt-3 max-w-xl mx-auto text-lg text-muted-foreground">
+              Choose an image to begin your AI-guided exploration. Each journey offers unique questions and insights.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {journeys.map((journey) => (
+              <JourneyCard key={journey.id} journey={journey} />
+            ))}
+          </div>
+        </section>
+      </main>
+       <footer className="border-t py-6 text-center">
+        <p className="text-sm text-muted-foreground">
+          &copy; {new Date().getFullYear()} JourneyAI. Interactive learning powered by AI.
+        </p>
+      </footer>
+    </div>
+  );
+}

src/components/chatbot/chat-message.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import type { ChatMessage as ChatMessageType } from '@/types';
+import { cn } from '@/lib/utils';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Bot, User, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+interface ChatMessageProps {
+  message: ChatMessageType;
+}
+
+export function ChatMessage({ message }: ChatMessageProps) {
+  const isUser = message.sender === 'user';
+  const Icon = isUser ? User : Bot;
+  const avatarFallback = isUser ? 'U' : 'AI';
+
+  return (
+    <div
+      className={cn(
+        'mb-4 flex items-end space-x-3',
+        isUser ? 'justify-end' : 'justify-start'
+      )}
+    >
+      {!isUser && (
+        <Avatar className="h-8 w-8 self-start">
+          <AvatarImage src="/placeholder-bot.png" alt="AI Avatar" />
+          <AvatarFallback><Bot className="h-4 w-4" /></AvatarFallback>
+        </Avatar>
+      )}
+      <Card
+        className={cn(
+          'max-w-sm rounded-2xl p-0 shadow-md md:max-w-md',
+          isUser
+            ? 'rounded-br-none bg-primary text-primary-foreground'
+            : 'rounded-bl-none bg-card text-card-foreground border'
+        )}
+      >
+        <CardContent className="p-3">
+          {message.type === 'mcq' && message.mcq && (
+            <div className="space-y-2">
+              <p className="font-medium">{message.mcq.mcq}</p>
+              {message.mcq.options.map((option, index) => (
+                <Badge key={index} variant="secondary" className="mr-2 mt-1 block w-fit py-1 px-2.5">
+                  {String.fromCharCode(65 + index)}. {option}
+                </Badge>
+              ))}
+            </div>
+          )}
+          {message.type === 'text' && message.text && <p>{message.text}</p>}
+          {message.type === 'feedback' && message.text && (
+            <div className="flex items-center">
+              {message.isCorrect ? (
+                <CheckCircle className="mr-2 h-5 w-5 text-green-500" />
+              ) : (
+                <XCircle className="mr-2 h-5 w-5 text-destructive" />
+              )}
+              <p>{message.text}</p>
+            </div>
+          )}
+          {message.type === 'error' && message.text && (
+            <div className="flex items-center text-destructive">
+              <AlertTriangle className="mr-2 h-5 w-5" />
+              <p>{message.text}</p>
+            </div>
+          )}
+          {message.type === 'user' && message.text && (
+             <p className="italic">You chose: "{message.text}"</p>
+          )}
+
+          <p className={cn("mt-1.5 text-xs", isUser ? "text-primary-foreground/70" : "text-muted-foreground")}>
+            {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+          </p>
+        </CardContent>
+      </Card>
+      {isUser && (
+         <Avatar className="h-8 w-8 self-start">
+           <AvatarImage src="/placeholder-user.png" alt="User Avatar" />
+           <AvatarFallback><User className="h-4 w-4" /></AvatarFallback>
+         </Avatar>
+      )}
+    </div>
+  );
+}

src/components/chatbot/chatbot.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import type { ChangeEvent } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Skeleton } from '@/components/ui/skeleton';
+import { generateMCQ, type GenerateMCQOutput } from '@/ai/flows/generate-mcq';
+import type { ChatMessage as ChatMessageType } from '@/types';
+import { ChatMessage } from './chat-message';
+import { MCQOptions } from './mcq-options';
+import { useToast } from '@/hooks/use-toast';
+import { Send, RotateCcw } from 'lucide-react';
+
+interface ChatbotProps {
+  imageDataUri: string | null; // Null initially until image is loaded and converted
+  journeyTitle: string;
+}
+
+export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
+  const [messages, setMessages] = useState<ChatMessageType[]>([]);
+  const [currentMCQ, setCurrentMCQ] = useState<GenerateMCQOutput | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isAwaitingAnswer, setIsAwaitingAnswer] = useState(false);
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const { toast } = useToast();
+
+  const addMessage = (message: Omit<ChatMessageType, 'id' | 'timestamp'>) => {
+    setMessages(prev => [...prev, { ...message, id: Date.now().toString(), timestamp: new Date() }]);
+  };
+
+  const fetchNewMCQ = async () => {
+    if (!imageDataUri) {
+      addMessage({ sender: 'ai', type: 'error', text: "Image data is not available to generate questions." });
+      return;
+    }
+    setIsLoading(true);
+    setIsAwaitingAnswer(false);
+    setCurrentMCQ(null); // Clear previous MCQ options
+
+    try {
+      const mcqData = await generateMCQ({ imageDataUri });
+      setCurrentMCQ(mcqData);
+      addMessage({ sender: 'ai', type: 'mcq', mcq: mcqData });
+      setIsAwaitingAnswer(true);
+    } catch (error) {
+      console.error("Error generating MCQ:", error);
+      const errorMessage = error instanceof Error ? error.message : "An unknown error occurred.";
+      addMessage({ sender: 'ai', type: 'error', text: `Failed to generate question: ${errorMessage}` });
+      toast({
+        title: "Error",
+        description: `Could not generate a new question. ${errorMessage}`,
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    addMessage({
+      sender: 'ai',
+      type: 'text',
+      text: `Welcome to the ${journeyTitle} journey! Let's start with your first question.`,
+    });
+    if (imageDataUri) {
+      fetchNewMCQ();
+    } else {
+       // Message will be shown if imageDataUri is still null after initial load
+      addMessage({ sender: 'ai', type: 'text', text: "Preparing your journey..." });
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageDataUri, journeyTitle]); // Added imageDataUri dependency
+
+   useEffect(() => {
+    if (imageDataUri && messages.length === 2 && messages[1].text === "Preparing your journey...") { // Assuming 2 initial messages
+      fetchNewMCQ();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageDataUri, messages]);
+
+
+  useEffect(() => {
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.scrollTo({ top: scrollAreaRef.current.scrollHeight, behavior: 'smooth' });
+    }
+  }, [messages]);
+
+  const handleOptionSelect = (option: string, isCorrect: boolean) => {
+    setIsAwaitingAnswer(false); // User has answered
+
+    addMessage({
+      sender: 'user',
+      type: 'user', // Special type for user's MCQ choice
+      text: option,
+    });
+
+    if (isCorrect) {
+      addMessage({ sender: 'ai', type: 'feedback', text: "That's correct! Well done.", isCorrect: true });
+    } else {
+      addMessage({
+        sender: 'ai',
+        type: 'feedback',
+        text: `Not quite. The correct answer was: ${currentMCQ?.correctAnswer}`,
+        isCorrect: false,
+      });
+    }
+
+    // Fetch next question after a short delay to allow user to read feedback
+    setTimeout(() => {
+      fetchNewMCQ();
+    }, 2000);
+  };
+  
+  const handleRestartJourney = () => {
+    setMessages([]);
+    setCurrentMCQ(null);
+    setIsLoading(false);
+    setIsAwaitingAnswer(false);
+    addMessage({
+      sender: 'ai',
+      type: 'text',
+      text: `Welcome to the ${journeyTitle} journey! Let's start with your first question.`,
+    });
+    if (imageDataUri) {
+      fetchNewMCQ();
+    } else {
+      addMessage({ sender: 'ai', type: 'text', text: "Preparing your journey..." });
+    }
+  };
+
+
+  return (
+    <div className="flex h-full flex-col rounded-lg border bg-card shadow-xl">
+      <div className="border-b p-4">
+        <h2 className="font-headline text-lg font-semibold text-center">AI Chat Helper</h2>
+      </div>
+      <ScrollArea className="flex-1 p-4" ref={scrollAreaRef}>
+        <div className="space-y-4">
+          {messages.map((msg) => (
+            <ChatMessage key={msg.id} message={msg} />
+          ))}
+          {isLoading && !currentMCQ && (
+            <div className="flex items-start space-x-3">
+               <Skeleton className="h-8 w-8 rounded-full" />
+               <div className="space-y-2">
+                  <Skeleton className="h-4 w-48 rounded" />
+                  <Skeleton className="h-4 w-32 rounded" />
+               </div>
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+      <div className="border-t bg-background/80 p-4">
+        {isLoading && <p className="text-center text-sm text-muted-foreground">AI is thinking...</p>}
+        {!isLoading && currentMCQ && isAwaitingAnswer && (
+          <MCQOptions mcq={currentMCQ} onOptionSelect={handleOptionSelect} disabled={!isAwaitingAnswer} />
+        )}
+        {!isLoading && !isAwaitingAnswer && messages.length > 0 && (
+           <Button onClick={fetchNewMCQ} className="w-full mt-2" variant="ghost" disabled={isLoading}>
+            {currentMCQ ? 'Next Question' : 'Start Questions'} <Send className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+         {!imageDataUri && !isLoading && (
+          <p className="text-center text-sm text-muted-foreground">Loading image, please wait...</p>
+        )}
+         <Button onClick={handleRestartJourney} className="w-full mt-2" variant="outline" disabled={isLoading}>
+            Restart Journey <RotateCcw className="ml-2 h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/chatbot/mcq-options.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { GenerateMCQOutput } from '@/ai/flows/generate-mcq';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useState } from 'react';
+
+interface MCQOptionsProps {
+  mcq: GenerateMCQOutput;
+  onOptionSelect: (option: string, isCorrect: boolean) => void;
+  disabled: boolean;
+}
+
+export function MCQOptions({ mcq, onOptionSelect, disabled }: MCQOptionsProps) {
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+  const handleSelect = (option: string) => {
+    if (disabled || selectedOption) return; // Prevent selection if already disabled or an option is selected
+
+    setSelectedOption(option);
+    const isCorrect = option === mcq.correctAnswer;
+    onOptionSelect(option, isCorrect);
+  };
+
+  return (
+    <div className="mt-4 space-y-2">
+      {mcq.options.map((option, index) => {
+        const isSelected = selectedOption === option;
+        const isCorrectSelection = isSelected && option === mcq.correctAnswer;
+        const isIncorrectSelection = isSelected && option !== mcq.correctAnswer;
+
+        return (
+          <Button
+            key={index}
+            variant="outline"
+            className={cn(
+              'w-full justify-start text-left h-auto py-2.5 px-4 whitespace-normal',
+              isSelected && 'font-semibold',
+              isCorrectSelection && 'bg-green-100 border-green-500 text-green-700 hover:bg-green-200',
+              isIncorrectSelection && 'bg-red-100 border-red-500 text-red-700 hover:bg-red-200',
+              (disabled || selectedOption) && !isSelected && 'opacity-60 cursor-not-allowed'
+            )}
+            onClick={() => handleSelect(option)}
+            disabled={disabled || !!selectedOption}
+            aria-pressed={isSelected}
+          >
+            <span className="mr-2 font-medium">{String.fromCharCode(65 + index)}.</span>
+            {option}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

src/components/journey/journey-card.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Rocket, Info } from 'lucide-react';
+import type { Journey } from '@/types';
+
+interface JourneyCardProps {
+  journey: Journey;
+}
+
+export function JourneyCard({ journey }: JourneyCardProps) {
+  return (
+    <Card className="flex h-full flex-col overflow-hidden shadow-lg transition-shadow hover:shadow-xl">
+      <CardHeader className="relative h-48 w-full p-0 md:h-56">
+        <Image
+          src={journey.imageUrl}
+          alt={journey.title}
+          layout="fill"
+          objectFit="cover"
+          data-ai-hint={journey.imageHint}
+          className="transition-transform duration-300 ease-in-out group-hover:scale-105"
+        />
+      </CardHeader>
+      <CardContent className="flex-grow p-6">
+        <div className="flex items-center justify-between">
+          <CardTitle className="font-headline text-xl">{journey.title}</CardTitle>
+          <TooltipProvider>
+            <Tooltip delayDuration={100}>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-accent">
+                  <Info className="h-5 w-5" />
+                  <span className="sr-only">More info about {journey.title}</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="top" className="max-w-xs bg-popover text-popover-foreground">
+                <p>{journey.description}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+        <CardDescription className="mt-2 text-sm">
+          {journey.description.substring(0, 100)}{journey.description.length > 100 ? '...' : ''}
+        </CardDescription>
+      </CardContent>
+      <CardFooter className="p-6 pt-0">
+        <Button asChild className="w-full font-semibold">
+          <Link href={`/journey/${journey.id}`}>
+            Launch Journey
+            <Rocket className="ml-2 h-4 w-4" />
+          </Link>
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

src/components/journey/summary-report-dialog.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { summarizeImage } from '@/ai/flows/summarize-image';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useToast } from '@/hooks/use-toast';
+import { Loader2 } from 'lucide-react';
+
+interface SummaryReportDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  imageDataUri: string | null;
+  journeyTitle: string;
+}
+
+export function SummaryReportDialog({
+  isOpen,
+  onOpenChange,
+  imageDataUri,
+  journeyTitle,
+}: SummaryReportDialogProps) {
+  const [summary, setSummary] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (isOpen && imageDataUri && !summary) { // Fetch summary only if dialog is open, image is available, and summary isn't already fetched
+      const fetchSummary = async () => {
+        setIsLoading(true);
+        try {
+          const result = await summarizeImage({ imageDataUri });
+          setSummary(result.summary);
+        } catch (error) {
+          console.error('Error generating summary:', error);
+          const errorMessage = error instanceof Error ? error.message : "An unknown error occurred.";
+          setSummary(`Failed to generate summary: ${errorMessage}`);
+          toast({
+            title: "Error",
+            description: `Could not generate summary. ${errorMessage}`,
+            variant: "destructive",
+          });
+        } finally {
+          setIsLoading(false);
+        }
+      };
+      fetchSummary();
+    } else if (!isOpen) {
+      // Optionally reset summary when dialog closes to refetch next time
+      // setSummary(null); 
+    }
+  }, [isOpen, imageDataUri, summary, toast]);
+
+
+  // Effect to reset summary when imageDataUri changes (e.g., new journey)
+  useEffect(() => {
+    setSummary(null); // Reset summary if image URI changes, to force refetch
+  }, [imageDataUri]);
+
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg md:max-w-xl lg:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="font-headline text-2xl">Summary Report: {journeyTitle}</DialogTitle>
+          <DialogDescription>
+            AI-generated insights and key takeaways from the selected image.
+          </DialogDescription>
+        </DialogHeader>
+        <ScrollArea className="max-h-[60vh] pr-6">
+          {isLoading && (
+            <div className="space-y-3 py-4">
+              <Skeleton className="h-5 w-3/4 rounded-md" />
+              <Skeleton className="h-5 w-full rounded-md" />
+              <Skeleton className="h-5 w-5/6 rounded-md" />
+              <Skeleton className="h-5 w-full rounded-md" />
+              <Skeleton className="h-5 w-1/2 rounded-md" />
+            </div>
+          )}
+          {!isLoading && summary && (
+            <div className="prose prose-sm dark:prose-invert max-w-none py-4 whitespace-pre-wrap font-body">
+              {summary}
+            </div>
+          )}
+          {!isLoading && !summary && imageDataUri && (
+             <div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
+                <Loader2 className="h-8 w-8 animate-spin mb-2" />
+                <p>Generating summary...</p>
+            </div>
+          )}
+           {!imageDataUri && (
+            <div className="py-10 text-center text-muted-foreground">
+              <p>Image data is not available to generate a summary.</p>
+            </div>
+          )}
+        </ScrollArea>
+        <DialogFooter>
+          <Button onClick={() => onOpenChange(false)}>Close</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/layout/app-header.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import Link from 'next/link';
+import { ArrowLeft, FileText, Sparkles } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { usePathname } from 'next/navigation';
+
+interface AppHeaderProps {
+  showBackButton?: boolean;
+  backHref?: string;
+  showDetailsButton?: boolean;
+  onDetailsClick?: () => void;
+  title?: string;
+}
+
+export function AppHeader({
+  showBackButton = false,
+  backHref = '/',
+  showDetailsButton = false,
+  onDetailsClick,
+  title,
+}: AppHeaderProps) {
+  const pathname = usePathname();
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center">
+        <div className="mr-4 flex items-center">
+          {showBackButton && (
+            <Button variant="ghost" size="icon" asChild className="mr-2">
+              <Link href={backHref} aria-label="Go back">
+                <ArrowLeft className="h-5 w-5" />
+              </Link>
+            </Button>
+          )}
+          <Link href="/" className="flex items-center space-x-2">
+            <Sparkles className="h-6 w-6 text-primary" />
+            <span className="font-headline text-xl font-bold">JourneyAI</span>
+          </Link>
+        </div>
+
+        {title && <h1 className="flex-1 text-center font-headline text-lg font-semibold">{title}</h1>}
+        
+        <div className="ml-auto flex items-center space-x-2">
+          {showDetailsButton && onDetailsClick && (
+            <Button variant="outline" onClick={onDetailsClick} aria-label="View Details">
+              <FileText className="mr-2 h-4 w-4" />
+              Details
+            </Button>
+          )}
+        </div>
+         {/* Placeholder to balance the flex layout if title is not present and details button is not shown */}
+        {(!title && !showDetailsButton) && <div className="flex-1"></div>}
+
+      </div>
+    </header>
+  );
+}

src/lib/journeys.ts

@@ -0,0 +1,29 @@
+import type { Journey } from '@/types';
+
+export const journeys: Journey[] = [
+  {
+    id: 'ancient-civilization',
+    title: 'Ancient Civilization',
+    description: 'Explore the ruins of a long-lost civilization and uncover its secrets through AI-generated questions.',
+    imageUrl: 'https://placehold.co/600x400.png',
+    imageHint: 'archaeology ruins',
+  },
+  {
+    id: 'space-anomaly',
+    title: 'Space Anomaly',
+    description: 'Investigate a mysterious anomaly detected in a distant galaxy. What will the AI ask you?',
+    imageUrl: 'https://placehold.co/600x400.png',
+    imageHint: 'nebula galaxy',
+  },
+  {
+    id: 'microscopic-world',
+    title: 'Microscopic Marvels',
+    description: 'Dive into the unseen world of microorganisms and their complex structures, guided by AI.',
+    imageUrl: 'https://placehold.co/600x400.png',
+    imageHint: 'microscope cells',
+  },
+];
+
+export const getJourneyById = (id: string): Journey | undefined => {
+  return journeys.find(journey => journey.id === id);
+};

src/types/index.ts

@@ -0,0 +1,20 @@
+import type { GenerateMCQOutput } from '@/ai/flows/generate-mcq';
+
+export interface Journey {
+  id: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  imageHint: string; // For data-ai-hint
+}
+
+export interface ChatMessage {
+  id: string;
+  sender: 'user' | 'ai';
+  type: 'text' | 'mcq' | 'feedback' | 'error';
+  text?: string;
+  mcq?: GenerateMCQOutput;
+  options?: string[]; // For user's answer display
+  timestamp: Date;
+  isCorrect?: boolean; // For feedback messages
+}

tailwind.config.ts

@@ -12,7 +12,7 @@ export default {
       fontFamily: {
         body: ['Inter', 'sans-serif'],
         headline: ['Inter', 'sans-serif'],
-        code: ['monospace'],
+        code: ['Source Code Pro', 'monospace'],
       },
       colors: {
         background: 'hsl(var(--background))',