#conversejs {
    .chatbox-btn {
        font-size: $font-size-large;
        margin: 0 0.3em;
    }
    .flyout {
        border: $flyout-padding solid $chat-head-color;
        border-top: 0.8em solid $chat-head-color;
        border-radius: 0;
        bottom: 0;
    }
    .chat-head {
        font-size: 20px;
        padding: 0;
        .user-custom-message {
            font-size: 66%;
            height: auto;
            line-height: $line-height;
        }
        &.chat-head-chatbox {
            .close-chatbox-button {
                display: none;
            }
        }
    }
    .chatbox {
        height: 100%;
        margin: 0;
        @include calc(width, '100% - #{$controlbox-width}');
        margin: 0;
        .box-flyout {
            background-color: $chat-head-color;
            @include calc(width, '100% - #{$controlbox-width}');
            box-shadow: none;
            min-width: auto;
        }
        .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;
                margin: 0.5em 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: $font-size-huge;
        }

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