/*
 * Look of the floating chat button, shared by the desktop and the mobile versions; its size and position
 * are set by the file of the version. The button is above the page content and the floating order buttons,
 * below sticky bars and popups.
 */
.messenger-chat-button {
    --messenger-chat-button-border: 2px;

    position: fixed;
    z-index: 8;
    box-sizing: border-box;
    /* The only line of the button, on its very edge. The icon is drawn on the disc inside it, see the "viewBox" of the icon */
    border: var(--messenger-chat-button-border) solid #1f9dac;
    /* Round ends at any width: a circle, and a pill when the desktop button is open */
    border-radius: 999px;
    background-color: #fff;
    background-repeat: no-repeat;
    /* The icon keeps its place at the right end when the button grows to the left */
    background-position: right center;
    background-size: auto 100%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

.messenger-chat-button_telegram {
    background-image: url(../img/telegram-plane.svg);
}

/* Keyboard focus makes the line thicker: the outline joins the border, it is not a second ring around the button */
.messenger-chat-button:focus-visible {
    outline: 2px solid #1f9dac;
    outline-offset: 0;
}

/*
 * Hidden while a popup is open: Bootstrap modals, the photo gallery, a video in fullscreen.
 * "body" keeps every rule here above the "display" that the file of a version sets for the button.
 */
body.modal-open .messenger-chat-button,
body.fancybox-active .messenger-chat-button,
body .messenger-chat-button_hidden {
    display: none;
}

@media print {
    body .messenger-chat-button {
        display: none;
    }
}