/* =========================================================
   TWD SUPPORTBOT FÜR ROUNDCUBE
   ========================================================= */

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

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}

/* =========================================================
   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;
}

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

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

/* Standard: Smiley anzeigen */
#twd-supportbot-button .twd-icon-arrow {
    display: none;
}

/* Wenn offen: Pfeil anzeigen */
#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-Smiley */
.twd-supportbot-icon {
    width: 72%;
    height: 72%;
    object-fit: contain;
    display: block;
    filter: none;
}

/* Pfeil nach unten */
.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;
}

/* geöffnet */
#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;
    }
}