/* =========================================================
   TRI-W-DATA ASSISTENT FÜR FROXLOR
   ========================================================= */

#twd-supportbot {
    position: fixed;
    right: 15px;
    bottom: 75px;
    z-index: 10000;
}


/* =========================================================
   SCHWEBENDER BUTTON
   ========================================================= */

#twd-supportbot-button {
    width: 64px;
    height: 64px;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    background: #ffffff;
    border: 2px solid #9B111E;
    border-radius: 50%;
    box-sizing: border-box;
    line-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#twd-supportbot-button:hover {
    transform: scale(1.05);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.22);
}


#twd-supportbot-button:focus-visible {
    outline: 3px solid rgba(155, 17, 30, 0.25);
    outline-offset: 3px;
}


/* =========================================================
   BOT / PFEIL
   ========================================================= */

#twd-supportbot-button .twd-icon-bot,
#twd-supportbot-button .twd-icon-arrow {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


#twd-supportbot-button .twd-icon-arrow {
    display: none;
}


#twd-supportbot.twd-open
#twd-supportbot-button
.twd-icon-bot {
    display: none;
}


#twd-supportbot.twd-open
#twd-supportbot-button
.twd-icon-arrow {
    display: flex;
}


.twd-supportbot-icon {
    width: 72%;
    height: 72%;

    object-fit: contain;
    display: block;

    filter: none;
}


.twd-icon-arrow svg {
    width: 24px;
    height: 24px;

    display: block;
}


.twd-icon-arrow svg path {
    fill: none;

    stroke: #9B111E;
    stroke-width: 2.3;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CHATFENSTER
   ========================================================= */

#twd-supportbot-window {
    position: absolute;

    right: 0;
    bottom: 78px;

    width: 400px;

    height: min(
        700px,
        calc(100vh - 170px)
    );

    background: #ffffff;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.22);

    display: none;
}


#twd-supportbot.twd-open
#twd-supportbot-window {
    display: block;
}


/* =========================================================
   IFRAME
   ========================================================= */

#twd-supportbot-window iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: #ffffff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #twd-supportbot {
        right: 5px;
        bottom: 45px;
    }


    #twd-supportbot-button {
        width: 44px;
        height: 44px;
    }


    .twd-supportbot-icon {
        width: 72%;
        height: 72%;
    }


    .twd-icon-arrow svg {
        width: 20px;
        height: 20px;
    }


    #twd-supportbot-window {
        position: fixed;

        left: 10px;
        right: 10px;
        bottom: 99px;

        width: auto;

        height: min(
            620px,
            78dvh
        );

        border-radius: 10px;
    }

}