body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f4f8; /* Light background for the main page */
        }

        /* Chatbot Widget - This div will morph from icon to chatbox */
        #marjo-chatbot-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #3B82F6; /* Blue-500 for icon background (OLD COLOR) */
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            z-index: 1000; /* Ensure it's on top */
            overflow: hidden; /* Hide content that's outside the current dimensions */
            cursor: pointer; /* Indicate it's clickable */
            display: flex;
            flex-direction: column;
            
            /* Transition for morphing properties */
            transition: width 0.3s ease-out, height 0.3s ease-out, 
                        border-radius 0.3s ease-out, background-color 0.3s ease,
                        box-shadow 0.3s ease;
        }

        /* Closed state (Icon) */
        #marjo-chatbot-widget.closed {
            width: 60px;
            height: 60px;
            border-radius: 9999px; /* Fully rounded for icon */
            align-items: center; /* Center content (sparkle emoji) */
            justify-content: center; /* Center content (sparkle emoji) */
        }

        /* Open state (Chatbox) */
        #marjo-chatbot-widget.open {
            width: 380px; /* Desktop chatbox width */
            height: 500px; /* Desktop chatbox height */
            border-radius: 1rem; /* Rounded corners for chatbox */
            background-color: white; /* Chatbox background */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Chatbox shadow */
        }

        /* Mobile Fullscreen for open state */
        @media (max-width: 768px) { /* Tailwind's 'md' breakpoint is 768px */
            #marjo-chatbot-widget.open {
                width: 100%;
                height: 90vh; /* Full height on mobile */
                border-radius: 0; /* No border-radius on mobile fullscreen */
                top: 0; /* Align to top */
                left: 0; /* Align to left */
                right: auto; /* Reset right */
                bottom: auto; /* Reset bottom */
            }
        }

        /* Chatbot Header */
        #marjo-chatbot-header {
            background-color: #3B82F6; /* Blue-500 for header (OLD COLOR) */
            color: white;
            padding: 1rem;
            border-top-left-radius: 1rem; /* Match chatbox border-radius */
            border-top-right-radius: 1rem; /* Match chatbox border-radius */
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0; /* Prevent header from shrinking */
        }

        /* Header in closed state (only sparkle emoji visible) */
        #marjo-chatbot-widget.closed #marjo-chatbot-header {
            background-color: transparent; /* Make header background transparent when closed */
            padding: 0; /* No padding when closed */
            border-radius: 9999px; /* Match icon border-radius */
            width: 100%; /* Take full width of icon */
            height: 100%; /* Take full height of icon */
            justify-content: center; /* Center emoji */
        }
        #marjo-chatbot-widget.closed #marjo-chatbot-header h1,
        #marjo-chatbot-widget.closed #marjo-chatbot-header .marjo-powered-by-gemini, /* Hide this too when closed */
        #marjo-chatbot-widget.closed #marjo-chatbot-header #marjo-close-chat {
            display: none; /* Hide text and close button when closed */
        }

        /* Sparkle emoji styling and rotation */
        #marjo-chatbot-header .marjo-sparkle-emoji {
            font-size: 1.8rem; /* Icon size */
            transition: transform 0.3s ease-in-out; /* Smooth transition for rotation */
        }

        #marjo-chatbot-header.rotated .marjo-sparkle-emoji {
            transform: rotate(360deg); /* Full rotation */
        }

        /* Sparkle animation for the icon when loading */
        #marjo-chatbot-widget.loading .marjo-sparkle-emoji {
            animation: sparkle-blink 1.4s infinite both;
        }

        @keyframes sparkle-blink {
          0% { opacity: 0.5; transform: scale(1); }
          50% { opacity: 1; transform: scale(1.2); }
          100% { opacity: 0.5; transform: scale(1); }
        }

        /* Chatbox Content - messages area and input */
        #marjo-chatbox-content {
            color: #575757; /* Old text color */
            display: flex;
            flex-direction: column;
            flex-grow: 1; /* Allow content to fill remaining space */
            overflow: hidden; /* Hide overflow from scrolling content */
            opacity: 0; /* Start invisible */
            pointer-events: none; /* Disable interactions when hidden */
            transition: opacity 0.3s ease; /* Smooth fade for content */
        }

        #marjo-chatbot-widget.open #marjo-chatbox-content {
            opacity: 1; /* Become visible */
            pointer-events: auto; /* Enable interactions when visible */
            transition-delay: 0.2s; /* Add a slight delay for content to appear after morph */
        }

        /* Messages Area */
        #marjo-messages-area {
            flex-grow: 1;
            padding: 1rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0.5rem; /* Space between messages */
            background-color: #f9fafb; /* Light gray background for messages */
        }

        /* Chat Input Area */
        #marjo-chat-input-area {
            padding: 1rem;
            border-top: 1px solid #e5e7eb; /* Gray-200 */
            background-color: #f9fafb; /* Light gray background for input */
            display: flex;
            align-items: center;
            gap: 0.75rem; /* Space between input and button */
            flex-shrink: 0; /* Prevent input area from shrinking */
            border-bottom-left-radius: 1rem; /* Match chatbox border-radius */
            border-bottom-right-radius: 1rem; /* Match chatbox border-radius */
        }

        /* Message Bubbles */
        .marjo-message-bubble {
            max-width: 75%;
            padding: 0.75rem 1rem;
            border-radius: 1.25rem; /* More rounded corners */
            word-wrap: break-word;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .marjo-user-bubble {
            background-color: #3B82F6; /* Blue-500 (OLD COLOR) */
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 0.25rem; /* Slightly less rounded on one corner */
        }
        .marjo-ai-bubble {
            background-color: #E5E7EB; /* Gray-200 (OLD COLOR) */
            color: #374151; /* Gray-700 (OLD COLOR) */
            align-self: flex-start;
            border-bottom-left-radius: 0.25rem; /* Slightly less rounded on one corner */
        }

        /* New Typing Animation Styles (bouncing balls) */
        .marjo-ai-typing-animation-container {
            display: flex;
            align-items: center;
            gap: 4px; /* Space between the balls */
            height: 20px; /* Give it a fixed height to prevent layout shifts */
            /* Center the balls horizontally within the bubble */
            justify-content: center; 
            width: 50px; /* Give it a fixed width so the bubble doesn't collapse */
        }

        .marjo-ball {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #FEDD31; /* Keeping these for the animation as they are distinct */
            animation: bounce 1s infinite;
            animation-timing-function: ease;
            animation-direction: alternate;
        }

        /* Specific delays for each ball */
        .marjo-ball:nth-child(1) { animation-delay: -400ms; }
        .marjo-ball:nth-child(2) { animation-delay: -300ms; }
        .marjo-ball:nth-child(3) { animation-delay: -200ms; }

        @keyframes bounce {
            from {
                transform: translateY(0px); /* Start from current position */
                background: #FEDD31; /* Keeping these for the animation as they are distinct */
            }
            to {
                transform: translateY(-10px); /* Bounce upwards */
                background:#D0782A; /* Keeping these for the animation as they are distinct */
            }
        }

        /* Pop-up Message Styling */
        #marjo-popup-message {
            display: none;
            position: absolute;
            bottom: 85px; /* Position above the icon, slightly higher than the chatbox start */
            right: 20px;
            width: 200px; /* Fixed width for the popup */
            background-color: #E5E7EB; /* AI bubble background (OLD COLOR) */
            color: #374151; /* AI bubble text color (OLD COLOR) */
            padding: 1rem;
            border-radius: 1.25rem; /* Mimic message bubble radius */
            border-bottom-right-radius: 0.25rem; /* Mimic message bubble tail side */
            box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Mimic message bubble shadow */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 0.9rem;
            line-height: 1.4;
            opacity: 0; /* Start hidden */
            visibility: hidden; /* Start hidden */
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 998; /* Below chatbot icon, above page content */
        }

        /* Pop-up message tail */
        #marjo-popup-message::after {
            content: '';
            position: absolute;
            bottom: -8px; /* Position it just below the bubble */
            right: 15px; /* Align with the right side of the bubble */
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid #E5E7EB; /* Match bubble background color (OLD COLOR) */
        }


        #marjo-popup-message.visible { /* New class for showing */
            display: none;
            opacity: 1;
            visibility: visible;
        }

        #marjo-popup-message .marjo-close-popup {
            display: none;
            position: absolute;
            top: 5px;
            right: 8px;
            background: none;
            border: none;
            font-size: 1.1rem;
            color: #9CA3AF; /* Gray-400 */
            cursor: pointer;
            padding: 0.2rem;
            line-height: 1;
            transition: color 0.2s ease;
        }

        #marjo-popup-message .marjo-close-popup:hover {
            display: none;
            color: #6B7280; /* Gray-600 */
        }

        /* Hide popup on mobile for fullscreen chatbox */
        @media (max-width: 768px) {
            #marjo-popup-message {
                display: none;
            }
        }

        /* Chatbot button for links */
        .marjo-chat-button {
            background-color: #3B82F6; /* Blue-500 (OLD COLOR) */
            color: white;
            padding: 8px 12px;
            border-radius: 0.5rem; /* Rounded corners */
            font-size: 0.875rem; /* Small font size */
            cursor: pointer;
            transition: background-color 0.2s ease;
            margin-top: 8px; /* Space above buttons */
            display: inline-block; /* Allows buttons to sit side-by-side if space allows */
            text-decoration: none; /* Remove underline for links acting as buttons */
            text-align: center;
            border: none;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .marjo-chat-button:hover {
            background-color: #2563EB; /* Darker blue on hover (OLD COLOR) */
        }

        .marjo-chat-buttons-container {
            display: flex;
            flex-wrap: wrap; /* Allow buttons to wrap to next line */
            gap: 8px; /* Space between buttons */
            margin-top: 10px; /* Space between text and buttons */
            justify-content: flex-start; /* Align buttons to the start of the bubble */
        }

        /* New: Subtle glow on hover for the chatbot widget (closed state) */
        #marjo-chatbot-widget:hover {
            box-shadow: 0 0 0 8px rgba(66, 133, 244, 0.3), /* Blue */
                        0 0 0 16px rgba(234, 67, 53, 0.2), /* Red */
                        0 0 0 24px rgba(251, 188, 5, 0.1), /* Yellow */
                        0 0 0 32px rgba(52, 168, 83, 0.05); /* Green */
        }

        /* Remove hover effects when chatbot is open */
        #marjo-chatbot-widget.open:hover {
            /* Revert to open state shadow */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); 
            transform: none; /* Remove any transform from hover */
        }

        /* Rotating colors in header when chatbot is open */
        #marjo-chatbot-widget.open #marjo-chatbot-header {
            background: linear-gradient(45deg, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4); /* Blue, Red, Yellow, Green, Blue */
            background-size: 400% 400%;
            animation: marjo-gradient-shift 15s ease infinite;
            /* Ensure the header transitions smoothly to this gradient */
            transition: background 0.5s ease;
        }

        @keyframes marjo-gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }