@o-chat-window-bg: #FAFAFA;
@o-chat-window-width: 325px;
@o-mail-chatter-gap: 10px; // has to be defined here as this file is both in
                           // backend and other assets (livechat)
@o-chat-header-height: 46px;
@o-chat-window-zindex: @zindex-modal + 1;

.o_chat_window {
    .o-flex-display();
    .o-flex-flow(column, nowrap);
    position: fixed;
    width: @o-chat-window-width;
    max-width: 100%;
    height: 400px;
    max-height: 100%;
    font-size: 12px;
    background-color: @o-chat-window-bg;
    border-radius: 6px 6px 0 0;
    z-index: @o-chat-window-zindex;
    box-shadow: -5px -5px 10px fade(black, 18%);

    @media (max-width: @screen-xs-max) {
        width: 100%;
        height: 100%!important;
        box-shadow: none;
        &.o_folded {
            display: none;
        }
    }

    @media print {
        display: none;
    }

    .o_chat_header {
        .o-flex-display();
        .o-flex(0, 0, auto);
        color: white;
        padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
        border-radius: 3px 3px 0 0;
        border-bottom: 1px solid @gray-lighter-dark;
        background-color: @odoo-brand-primary;
        padding: 8px;

        @media (max-width: @screen-xs-max) {
            height: @o-chat-header-height;
            padding-top: 12px;
            border-radius: 0px;
            .o_chat_title {
                font-size: 16px;
                margin-left: 10px;
            }

            .o_chat_window_close {
                font-size: 17px;
                color: white;
            }
        }

        .o_chat_title {
            cursor: pointer;
            .o-flex(1, 1, auto);
            .o-text-overflow();
        }

        .o_chat_window_buttons {
            .o-flex(0, 0, auto);
            .o_chat_window_close, .o_chat_window_expand {
                color: white;
                padding: 3px;
                margin-left: 5px;
                .o-hover-opacity(0.7, 1);
            }
        }

    }

    .o_mail_thread {
        .o-flex(1, 1, auto);
        overflow: auto;
        -webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari)
        .o_thread_date_separator {
            margin: 0px 0px 15px 0px;
            .o_thread_date {
                background-color: @o-chat-window-bg;
            }
        }
        .o_thread_message {
            padding: 4px 5px;
            .o_thread_message_sidebar {
                margin-right: 5px;
            }
        }
    }

    .o_chat_composer input {
        width: 100%;
    }
}

.o_chat_window_dropdown {
    width: auto;
    height: 28px;
    color: white;
    background-color: @gray-dark;
    cursor: pointer;
    box-shadow: none;

    @media (max-width: @screen-xs-max) {
        display: none;
    }

    .o_chat_header {
        border-radius: 0;
    }

    .o_chat_window_dropdown_toggler {
        padding: 5px;

        .o_total_unread_counter {
            .o-position-absolute(-10px, 0, auto, auto);
            background-color: @odoo-brand-optional;
            padding: 0 2px;
            font-size: smaller;
        }
    }
    &.open .o_chat_window_dropdown_toggler .o_total_unread_counter, .o_chat_window_expand {
        display: none;
    }

    > ul {
        max-width: @o-chat-window-width;
        padding: 0;

        > li.o_chat_header {
            font-size: 12px;
            padding: 3px 5px;
            &~li.o_chat_header {
                border-top: 1px solid white;
            }
            &:hover {
                background-color: darken(@odoo-brand-primary, 10%);
            }
        }
    }
}

.o_ui_blocked .o_chat_window {
    // We cannot put the z-index of chat windows directly to be greater than
    // blockUI's as ui-autocomplete dropdowns (which are below blockUI) would
    // appear under the chat windows (and ui-autocomplete is used to choose the
    // person you want to chat with). So we only raise the z-index value when
    // the ui is really blocked (in that case, the ui-autocomplete dropdowns
    // will disappear under the chat windows but this is not really an issue as
    // there should not be any at that time).
    z-index: 1101; // blockUI's z-index is 1100
}

.o_no_chat_window .o_chat_window {
    display: none;
}