:root
{
    --FoxySpeechBubble_Width: 15rem;
    --FoxySpeechBubble_Height: 20rem;
    --FoxySpeechBubble_BubblePointer: 16px;
}

#FoxyAI_Main
{
    position: fixed;
    z-index: 1000001;
    width: 9rem;
    height: 9rem;
    right: 0px;
    bottom: 0px;
    background-image: url("Test-Picture.png");
    background-size: cover;
    pointer-events: all;
    /* border: 1px solid #000000; */
}

#FoxyAI_SpeechBubble.SPTop
{
    width: var(--FoxySpeechBubble_Width);
    height: var(--FoxySpeechBubble_Height);
    background: rgb(255,255,225);
    position: fixed;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    top: 100px;
    right: 0;
    z-index: 1000003;
}

    #FoxyAI_SpeechBubble.SPTop:before
    {
        content: "";
        width: 0;
        height: 0;
        top: calc(-1 * var(--FoxySpeechBubble_BubblePointer));
        right: calc((var(--FoxySpeechBubble_Width) / 2) - (var(--FoxySpeechBubble_BubblePointer) / 2));
        position: absolute;
        border-left: var(--FoxySpeechBubble_BubblePointer) solid transparent;
        border-right: var(--FoxySpeechBubble_BubblePointer) solid transparent;
        border-bottom: var(--FoxySpeechBubble_BubblePointer) solid black;
    }

    #FoxyAI_SpeechBubble.SPTop:after
    {
        content: "";
        width: 0;
        height: 0;
        top: calc((-1 * var(--FoxySpeechBubble_BubblePointer)) - -1px);
        right: calc((var(--FoxySpeechBubble_Width) / 2) - (var(--FoxySpeechBubble_BubblePointer) / 2));
        position: absolute;
        border-left: var(--FoxySpeechBubble_BubblePointer) solid transparent;
        border-right: var(--FoxySpeechBubble_BubblePointer) solid transparent;
        border-bottom: var(--FoxySpeechBubble_BubblePointer) solid rgb(255,255,225);
    }


#FoxyAI_SpeechBubble.SPBottom
{
    width: var(--FoxySpeechBubble_Width);
    height: var(--FoxySpeechBubble_Height);
    background: rgb(255,255,225);
    position: fixed;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    top: 100px;
    right: 0;
    z-index: 1000003;
}

    #FoxyAI_SpeechBubble.SPBottom:before
    {
        content: "";
        width: 0;
        height: 0;
        top: calc(var(--FoxySpeechBubble_Height) - 1px);
        right: calc((var(--FoxySpeechBubble_Width) / 2) - (var(--FoxySpeechBubble_BubblePointer) / 2));
        position: absolute;
        border-left: var(--FoxySpeechBubble_BubblePointer) solid transparent;
        border-right: var(--FoxySpeechBubble_BubblePointer) solid transparent;
        border-top: var(--FoxySpeechBubble_BubblePointer) solid black;
    }

    #FoxyAI_SpeechBubble.SPBottom:after
    {
        content: "";
        width: 0;
        height: 0;
        top: calc(var(--FoxySpeechBubble_Height) - 2px);
        right: calc((var(--FoxySpeechBubble_Width) / 2) - (var(--FoxySpeechBubble_BubblePointer) / 2));
        position: absolute;
        border-left: var(--FoxySpeechBubble_BubblePointer) solid transparent;
        border-right: var(--FoxySpeechBubble_BubblePointer) solid transparent;
        border-top: var(--FoxySpeechBubble_BubblePointer) solid rgb(255,255,225);
    }