#chatbot-messages {
            display: flex;
            flex-direction: column;
        }

        .message-wrapper {
            display: flex;
            margin-bottom: 10px;
        }

        .message-wrapper.user {
            justify-content: flex-end;
        }

        .message-wrapper.bot {
            justify-content: flex-start;
        }

        .message-bubble {
            max-width: 75%;
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 13px;
            position: relative;
        }

        .message-bubble.user {
            background: #007bff;
            color: #fff;
            border-bottom-right-radius: 2px;
        }

        .message-bubble.bot {
            background: #e4e6eb;
            color: #000;
            border-bottom-left-radius: 2px;
        }

        .typing-indicator {
            display: flex;
            gap: 4px;
        }

        .typing-indicator span {
            width: 6px;
            height: 6px;
            background: #999;
            border-radius: 50%;
            animation: bounce 1.2s infinite;
        }

        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes bounce {

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

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