/* MAIN CHAT ANCHOR */
#noupe-chat-anchor {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;

    z-index: 2147483647 !important;

    width: auto;
    height: auto;

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

    pointer-events: none;

    isolation: isolate;
}

/* ENABLE INTERACTION ONLY FOR CHAT */
#noupe-chat-anchor .embedded-agent-container {
    pointer-events: auto;
}

/* COLLAPSED BUTTON */
#noupe-chat-anchor .embedded-agent-container:not(.opened) {
    position: relative !important;
}

/* OPEN CHAT WINDOW */
#noupe-chat-anchor .embedded-agent-container.opened {
    position: fixed !important;

    right: 20px !important;
    bottom: 20px !important;

    top: auto !important;
    left: auto !important;

    z-index: 2147483647 !important;

    width: min(420px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;

    height: min(80dvh, 720px) !important;
    max-height: calc(100dvh - 24px) !important;

    overflow: hidden !important;

    border-radius: 16px !important;

    box-shadow:
        0 10px 40px rgba(0,0,0,0.18),
        0 2px 10px rgba(0,0,0,0.12);
}

/* HIDE PRIVACY TEXT WHEN CLOSED */
#noupe-chat-anchor
.embedded-agent-container.square:not(.opened)
.privacyPolicy {
    display: none !important;
}

/* MOBILE */
@media (max-width: 768px) {

    #noupe-chat-anchor {
        right: 12px !important;
        bottom: 12px !important;
    }

    #noupe-chat-anchor .embedded-agent-container.opened {

        right: 12px !important;
        bottom: 12px !important;

        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;

        height: min(85dvh, 720px) !important;
        max-height: calc(100dvh - 24px) !important;

        border-radius: 14px !important;
    }
}

/* VERY SMALL PHONES */
@media (max-width: 480px) {

    #noupe-chat-anchor .embedded-agent-container.opened {

        right: 8px !important;
        bottom: 8px !important;

        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;

        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;

        border-radius: 12px !important;
    }
}