@import "bourbon";
@import "variables";
#converse-embedded-chat {

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

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

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

        .box-flyout {
            box-shadow: none;
        }
        .chat-title {
            padding: 0.3em;
            font-size: 110%;
        }
    }
    .chatbox-btn {
        display: none;
    }
    .chatroom {
        .box-flyout {
            min-width: auto;
            width: 100%;
            height: 90vh;
            .chat-body {
                @include calc(height, '100% - #{$chat-head-height}');
            }
            .chat-content {
                height: calc(100% - #{$toolbar-height + $chat-textarea-height +2px});
            }
            .chatroom-body {
                .chatroom-form-container {
                    height: auto;
                    position: relative;
                }
            }
            .occupants {
                .occupant-list {
                    padding-left: 0.3em;
                    li.occupant {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}