.o_chat_composer {
    position: relative;
    .o-flex(0, 0, auto);
    .o-flex-display();
    margin: 1px 0;
    border-top: none;
    background: @gray-lighter;

    .o_composer, .o_composer_subject {
        position: relative;
        background: white;

        textarea, input {
            border: none;
        }
    }

    .o_composer_subject {
        .o-flex-display();
        padding-bottom: 5px;

        > input {
            .o-flex(1, 1, auto);
            padding: 5px;
            margin-right: 30px;
        }
    }

    .o_composer {
        .o_composer_input > textarea {
            width: 100%;
            resize: none;
        }
        .o_composer_mention_dropdown .o_mention_proposition > a {
            .o-text-overflow();
            width: 100%;
            padding: 3px 15px;
            .o_mention_name {
                font-weight: 500;
            }
            .o_mention_info {
                font-style: italic;
                color: gray;
            }
        }
        textarea {
            resize: none;
        }
        .btn-icon {
            .o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1);
            border: none;
        }
        .o_composer_button_full_composer {
            .o-position-absolute(auto, 0);
        }
        @media (max-width: @screen-xs-max) {
            .o_composer_button_send {
                color: @odoo-brand-optional;
            }
        }

        .o_mail_emoji_container {
            padding: 0 @o-mail-chatter-gap @o-mail-chatter-gap 0;
            border: 1px solid @gray-lighter-dark;
            border-width: 1px 0 0 0;
            background-color: @gray-lighter;

            .o_mail_emoji {
                margin: @o-mail-chatter-gap 0 0 @o-mail-chatter-gap;
                cursor: pointer; // only in the popover
            }
        }
    }

    // Both inline and not-inline design. Mini-composer disabled.
    &:not(.o_chat_mini_composer) {
        padding:  @mail-thread-avatar-size*0.5;
        padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap;
        border: 1px solid @gray-lighter-dark;
        border-top: none;

        .o_chatter_avatar {
            .o-position-absolute(0, @left:  -@mail-thread-avatar-size - @o-mail-chatter-gap);
        }

        .o_chatter_composer_info, .o_composer_suggested_partners {
            .o-flex(0, 0, 100%);
            margin-bottom: @o-mail-chatter-gap*0.5;
        }

        .o_composer_container {
            position: relative;
        }

        .o_composer {
            border-radius: 2px;
            textarea {
                padding-right: @grid-gutter-width; // avoid overlaps betwenn textarea and o_composer_button_full_composer
            }

            .o_mail_emoji_container {
                margin: 0 -@o-mail-chatter-gap;
            }
        }

        .o_composer, .o_composer_subject {
            border: 1px solid @gray-lighter-dark;

            textarea, input {
                padding: 0 0 @o-mail-chatter-gap;
                border: none;
            }
        }
        .o_composer_subject {
            border-bottom: 0;
            border-radius: 2px 2px 0 0;
        }

        .o_chatter_composer_tools {
            border-top: 1px solid @gray-lighter-dark;
        }

        &:not(.o_chat_inline_composer) {
            .o-flex-flow(row, wrap);

            .o_composer_container, .o_composer_button_send {
                .o-flex(1, 0, 100%);
            }
            .o_composer, .o_composer_subject {
                padding: @o-mail-chatter-gap @o-mail-chatter-gap 0;
            }
            .o_composer_send {
                margin-top: @o-mail-chatter-gap;
            }
        }

        &.o_chat_inline_composer {
            .o_composer_container {
                .o-flex(1, 1, auto);
            }
            .o_composer {
                padding: @o-mail-chatter-gap @o-mail-chatter-gap 0 @o-mail-chatter-gap;
                border-radius: 2px 0 0 2px;
                border-right-width: 0;

                .o_mail_emoji_container {
                    text-align: right;
                    border-right-width: 1px;
                }
            }
            .o_composer_input {
                .o-flex-display();
                .o-flex-flow(row, wrap);
            }
            .o_composer_text_field {
                .o-flex(1, 1, 50%);
                margin: 0;
                padding: 0;
            }
            .o_chatter_composer_tools {
                .o-flex(0, 1, auto);
            }
            .o_composer_attachments_list {
                .o-flex(1, 0, 100%);
            }

            .o_chatter_composer_tools {
                border: none;
                border-left: 1px solid @gray-lighter-dark;
                padding-left: @o-mail-chatter-gap*0.5;
                .o-transform(translateY(-@o-mail-chatter-gap*0.5));
            }

            .o_composer_button_send {
                border-radius: 0 3px 3px 0;
                // Make the button appear as the same size as the subject input
                padding: 10px @padding-base-horizontal;
                border: 1px solid darken(@odoo-brand-optional, 5%);
                border-left-width: 0;
            }
        }
    }

    // Mini-composer enabled
    &.o_chat_mini_composer {
        .o_composer_container {
            border-top: 1px solid @gray-lighter-dark;
            width: 100%;
        }
        .o_composer {
            .o_mail_emoji_container {
                .o-position-absolute(auto, 0, 100%, 0);
                border-bottom-width: 1px;
            }
        }
        .o_composer_input {
            .o-flex-display();
            .o-flex-flow(row, nowrap);

            textarea.o_composer_text_field {
                .o-flex(1, 1, auto);
            }

            .o_chatter_composer_tools {
                .o-flex(0, 0, auto);
            }
            @media (max-width: @screen-xs-max) {
                .o_composer_button_send {
                    display: inline-block;
                }
            }
        }
        .o_composer_button_send, .o_chatter_avatar {
            display: none;
        }
    }
}

.o_composer_attachments_list:not(:empty) {
    margin-top: @o-mail-chatter-gap;
    text-align: justify;
}

// Emoji
.o_mail_emoji {
    display: inline-block;
    height: 20px;
    width: 20px;
    padding: 0;

    > img {
        width: 100%;
    }
}

// Attachment Icons (common for chat thread and chat composer)
// ------------------------------------------------------------------
@-webkit-keyframes oe_mail_attach_loading_anim {
    0% { background: @odoo-brand-optional }
    50% { background: darken(@odoo-brand-optional, 10%) }
    100% { background: @odoo-brand-optional }
}
@-moz-keyframes oe_mail_attach_loading_anim {
    0% { background: @odoo-brand-optional }
    50% { background: darken(@odoo-brand-optional, 10%) }
    100% { background: @odoo-brand-optional }
}
@-o-keyframes oe_mail_attach_loading_anim {
    0% { background: @odoo-brand-optional }
    50% { background: darken(@odoo-brand-optional, 10%) }
    100% { background: @odoo-brand-optional }
}
@keyframes oe_mail_attach_loading_anim {
    0% { background: @odoo-brand-optional }
    50% { background: darken(@odoo-brand-optional, 10%) }
    100% { background: @odoo-brand-optional }
}

@o-mail-attachment-image-size: 100px;
.o_attachment {
    position: relative;
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: @o-mail-attachment-image-size;
    margin: 5px;
    .o_image_box {
        position: relative;
        img {
            width: @o-mail-attachment-image-size;
            height: @o-mail-attachment-image-size;
            image-orientation: from-image; // Only supported in Firefox
        }
        .o_image_overlay{
            display: none;
        }
        &:hover .o_image_overlay {
            display: block;
            .o-position-absolute(@top: 0, @left: 0, @right:0, @bottom:0);
            z-index: 20;
            background: rgba(0, 0, 0, 0.5);
            overflow: hidden;
            cursor: pointer;
            .o_attachment_download {
                .o-position-absolute(@left: 10px, @bottom:5px);
            }
            .o_attachment_play {
                .o-position-absolute(@top: 50%, @left: 50%);
                transform: translate(-50%, -50%);
            }
            .o_overlay_download {
                width: 100%;
                height: 100%;
            }
            i {
                color: #FFFFFF;
            }
        }
    }
    .caption {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 5px;
        a {
            color: @odoo-main-text-color;
        }
    }
    .o_attachment_progress_bar {
        display: none;
    }
    .o_attachment_delete {
        .o-position-absolute(@top: -10px, @right: -8px);
        color: @odoo-main-text-color;
        cursor: pointer;
        opacity: 0;
        .o-transition(opacity, 0.2s, linear);
    }
    &.o_attachment_uploading {
        .o_attachment_progress_bar {
            display: block;
            .o-position-absolute(@top: 18px, @left: 16px, @right: 16px);
            height: 17px;
            line-height: 13px;
            color: white;
            border-radius: @border-radius-base;
            border: solid 1px grey;
            box-shadow: 0px 1px 10px @odoo-shadow-color;
            .o-animation(@name: oe_mail_attach_loading_anim, @duration: 1s, @timing-function: linear, @iteration-count: infinite);
        }
        .o_attachment_delete {
            display: none;
        }
    }
    &:hover .o_attachment_delete {
        opacity: 1;
        .o-transition(opacity, 0.2s, linear);
    }
}

.o_modal_fullscreen {
    z-index: @o-chat-window-zindex + 1; // To overlap chat window
    .o_viewer_content {
        width: 100%;
        height: 100%;
        position: relative;
        cursor: pointer;
        .o_viewer-header {
            width: 100%;
            height: 45px;
            padding: 10px 10px 0;
            background-color: rgba(0, 0, 0, 0.45);
            cursor: auto;
            .o_image_caption {
                color: #FFFFFF;
                display: inline;
            }
        }
        .o_loading_img {
            .o-position-absolute(@top: 50%);
            width: 25px;
            right: 50%;
            z-index: 1;
        }
        .o_viewer_img_wrapper {
            width: 100%;
            height: 100%;
            position: fixed;
            .o_viewer_zoomer {
                width: 100%;
                height: 100%;
                .o-flex-display();
                justify-content: center;
                align-items: center;
                img {
                    image-orientation: from-image; // Only supported in Firefox
                }
                img, video {
                    max-width: 100%;
                    max-height: 100%;
                    transition: 0.3s cubic-bezier(0, 0, 0.49, 1.6) 0s, opacity 0.15s;
                }
                .o_viewer_pdf {
                    width: 80%;
                    height: 90%;
                    border: 0px;
                    box-shadow: 1px 1px 20px 1px #000;
                }
                .o_viewer_video {
                    height: 80%;
                }
            }
        }
        .o_viewer_toolbar {
            .o-position-absolute(@left: 50%);
            bottom: 15px;
            transform: translate(-50%, -50%);
            padding: 8px 10px 0px 10px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 4px;
        }
    }
    .arrow {
        .o-position-absolute(@top: 50%);
        color: #FFFFFF;
    }
    .arrow-left {
        left: 0;
    }

    .arrow-right {
        right: 0;
    }
    i.fa {
        color: #FFFFFF;
    }
}