/* Style links in chat log */
#chat-log a {
    color: #87CEEB;
    /* Sky blue for hyperlinks */
    text-decoration: none;
}

#chat-log a:hover {
    text-decoration: underline;
}

#chat-log ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

#chat-log ul {
    list-style: disc;
    padding-left: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Prevent SVG from blocking clicks */
svg {
    pointer-events: none;
}

/* Hover effect for close button */
#close-chatbot:hover {
    color: #a58435;
    /* Darker gold on hover */
}

/* Animation for toggle button jiggle */
@keyframes ringJiggle {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(2.0);
    }

    50% {
        transform: scale(0.8);
    }

    75% {
        transform: scale(1.3);
    }

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

.jiggle {
    animation: ringJiggle 0.5s ease-in-out 3;
}

/* Animation for speech bubble pop-up */
@keyframes pop-up {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

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

#speech-bubble {
    animation: pop-up 0.3s ease-out forwards;
}

/* Mobile-specific styles (max-width: 400px) */
@media screen and (max-width: 400px) {
    #chatbot-widget {
        padding: 8px;
        width: 95%;
        min-width: 260px;
        bottom: 120px;
        /* Raised 50px higher from 70px */
        right: 10px;
    }

    #toggle-chatbot {
        bottom: 120px;
        /* Raised 50px higher from 70px */
        right: 10px;
    }

    #chat-log {
        max-height: 180px;
    }

    #toggle-button-container {
        width: 80px;
        height: 80px;
    }

    #toggle-button-container img {
        width: 80px;
        height: 80px;
    }

    #toggle-button-container svg {
        width: 80px;
        height: 40px;
        top: -28px;
    }

    #toggle-button-container text {
        font-size: 22px;
    }

    #speech-bubble {
        right: 10px;
        bottom: 200px;
        /* Adjusted to stay above toggle button (150px + 50px) */
        font-size: 12px;
        padding: 6px 10px;
    }
}