/* * --- OKLCH Theme Variables ---
         * These variables are preserved to drive the dynamic light/dark theme switching.
         * Tailwind uses arbitrary values (e.g., bg-[var(--background)]) to reference these.
         */
        :root {
            --radius: 0.65rem;
            /* Light Theme */
            --background: oklch(1 0 0);
            --foreground: oklch(0.141 0.005 285.823);
            --card: oklch(1 0 0);
            --primary: oklch(0.623 0.214 259.815);
            --primary-foreground: oklch(0.97 0.014 254.604);
            --secondary: oklch(0.967 0.001 286.375);
            --secondary-foreground: oklch(0.21 0.006 285.885);
            --muted-foreground: oklch(0.552 0.016 285.938);
            --border: oklch(0.92 0.004 286.32);
        }

        .dark {
            /* Dark Theme */
            --background: oklch(0.141 0.005 285.823);
            --foreground: oklch(0.985 0 0);
            --card: oklch(0.21 0.006 285.885);
            --primary: oklch(0.546 0.245 262.881);
            --primary-foreground: oklch(0.985 0 0);
            /* Using white for primary-foreground text in dark mode for contrast */
            --secondary: oklch(0.274 0.006 286.033);
            --secondary-foreground: oklch(0.985 0 0);
            --muted-foreground: oklch(0.705 0.015 286.067);
            --border: oklch(1 0 0 / 10%);
        }

        /* Set base colors and font for the body */
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--background);
            color: var(--foreground);
            touch-action: none;
            transition: background-color 0.5s, color 0.5s;
        }

        /* * --- Timeline Styling with Arbitrary Variants ---
         * Replicating the ::before pseudo-element for the vertical line.
         */
        .timeline-line::before {
            content: '';
            position: absolute;
            left: 1.5rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: var(--border);
        }

        /* Ensure chart has a defined height for responsiveness */
        .chart-container {
            position: relative;
            height: 350px;
            width: 100%;
        }


        /* Custom scrollbar for chat messages */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: var(--background);
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: oklch(0.5 0.05 285.823);
            /* A gray-blue thumb */
            border-radius: 3px;
        }

        /* Hide the chatbot initially for a toggle button if needed, but keeping it visible for now */
        /* #chatbot-container { display: none; } */