#conversejs.fullscreen {
    .chatbox-btn {
        font-size: $font-size-large;
        margin: 0 0.3em;
    }
    .flyout {
        border-radius: 0;
        border: $flyout-padding solid $chat-head-color;
        border-top: 0.8em solid $chat-head-color;
        bottom: 0;
    }
    .chat-head {
        font-size: 20px;
        padding: 0;
        .user-custom-message {
            font-size: 50%;
            height: auto;
            line-height: $line-height;
        }
        &.chat-head-chatbox {
            .close-chatbox-button {
                display: none;
            }
        }
    }
    .chatbox {
        width: 100%;
        height: 100%;
        margin: 0;

        @include make-col-ready();
        @include media-breakpoint-up(md) {
            @include make-col(9);
        }
        @include media-breakpoint-up(xl) {
            @include make-col(10);
        }

        .box-flyout {
            background-color: $chat-head-color;
            height: 100vh;
            width: 100%;
            box-shadow: none;
        }
        .chat-body {
            background-color: $chat-head-color;
            border-top-left-radius: $chatbox-border-radius;
            border-top-right-radius: $chatbox-border-radius;

            .chat-message {
                line-height: $line-height;
                font-size: $font-size-small;
                padding: 0.4em 0;
                .chat-msg-author {
                    line-height: $line-height;
                }
                .chat-msg-content {
                    line-height: $line-height;
                    .emojione {
                        height: $line-height;
                        margin-bottom: -$line-height/4;
                    }
                }
            }
        }
        .chat-content {
            padding: 0 $padding $padding $padding;
            border-top-left-radius: $chatbox-border-radius;
            border-top-right-radius: $chatbox-border-radius;
        }
        .chat-title {
            font-size: $font-size-huge;
            line-height: $line-height-huge;
        }

        .sendXMPPMessage {
            ul {
                width: 100%;
            }
            .toggle-smiley {
                ul {
                    &.emoji-toolbar {
                        .emoji-category-picker {
                            margin-right: 5em;
                        }
                        .emoji-category {
                            padding-left: 10px;
                            padding-right: 10px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {
    #conversejs.fullscreen  {
        .chatbox {
            width: calc(100% - 50px);
        }
    }
}