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

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

    bottom: auto;
    height: 100%; // When embedded, it fills the containing element
    position: relative;
    right: auto;
    width: 100%;

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

    .chatbox {
        margin: 0;
        height: 100%;
        width: 100%;

        .flyout.box-flyout {
            bottom: 0;
            box-shadow: none;
            height: 100%;
            min-width: auto;
            width: 100%;
        }

        .chat-title {
            padding: 0.3em;
            font-size: 120%;
        }
    }
    .chatbox-btn {
        display: none;
    }
    .chatroom {
        margin: 0;
        width: 100%;
        .box-flyout {
            .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 {
                height: 100%;
                .chatroom-form-container {
                    height: 100%;
                    position: relative;
                }
            }
            .occupants {
                .occupant-list {
                    padding-left: 0.3em;
                    li.occupant {
                        font-size: 120%;
                    }
                }
            }
        }
    }
}