/* add smooth scrolling */
        html {
            scroll-behavior: smooth;
        }

        

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message-animation {
            animation: fadeIn 0.3s ease-out;
        }

        #chat::-webkit-scrollbar {
            display: none;
        }

        /* Markdown styling */
        .markdown-content h1 {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: .25em;
        }

        .markdown-content h2 {
            font-size: 1.3em;
            font-weight: bold;
            margin-top: 0.8em;
        }

        .markdown-content h3 {
            font-size: 1.1em;
            font-weight: bold;
            margin-top: 0.6em;
        }

        .markdown-content p:first-of-type {
            margin: 0;
        }

        .markdown-content p {
            margin: .5em 0 0;
        }

        .markdown-content ul,
        .markdown-content ol {
            margin-left: 1.5em;
        }

        .markdown-content blockquote {
            border-left: 3px solid #ccc;
            padding-left: 1em;
            margin-left: 0;
            color: #555;
            font-style: italic;
        }

        .markdown-content hr {
            border: none;
            border-top: 1px solid #ccc;
            margin: 1em 0;
        }

        .markdown-content img {
            max-width: 100%;
            width: 100%;
            height: auto;
            display: block;
            margin: 1em 0em 0em;
        }

        .markdown-content a {
            color: #0577b8;
            text-decoration: underline;
        }

        .loading-dots {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            animation: pulse 1.5s infinite;
        }

        .dot {
            width: 6px;
            height: 6px;
            background-color: #9CA3AF;
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out;
        }

        .dot:nth-child(1) {
            animation-delay: -0.32s;
        }

        .dot:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes bounce {

            0%,
            80%,
            100% {
                transform: scale(0);
            }

            40% {
                transform: scale(1);
            }
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }