@import "bourbon";
@import "converse/variables";
#conversejs.converse-embedded {

    @include box-sizing(border-box);
    *, *:before, *:after {
        @include box-sizing(border-box);
    }

    bottom: auto;
    right: auto;
    position: relative;
    width: 100%;

    .converse-chatboxes {
        z-index: 1031; // One more than bootstrap navbar
        position: inherit;
        bottom: auto;
        height: auto;
        width: 100%;
    }

    .chatroom {
        margin: 0;
        width: 100%;
    }
    .flyout {
        bottom: auto;
        display: block;
        position: relative;
    }
    .chatbox {
        float: none;

        .box-flyout {
            box-shadow: none;
        }
        .chat-title {
            padding: 0.3em;
            font-size: 120%;
        }
    }
    .chatbox-btn {
        display: none;
    }
    .chatroom {
        .box-flyout {
            min-width: auto;
            width: 100%;
            height: 55vh;
            .chat-body {
                @include calc(height, '100% - #{$chat-head-height}');
            }
            .occupants-heading {
                font-size: 120%;
            }
            .chat-content {
                .chat-message {
                    margin: 0.5em;
                    font-size: 120%;
                }
            }
            .sendXMPPMessage {
                .chat-textarea {
                    padding: 0.5em;
                    font-size: 110%;
                }
            }
            .chatroom-body {
                .chatroom-form-container {
                    height: 100%;
                    position: relative;
                }
            }
            .occupants {
                .occupant-list {
                    padding-left: 0.3em;
                    li.occupant {
                        font-size: 120%;
                    }
                }
            }
        }
    }
}