// $f21ico-schedule: image-url('f21ico-schedule.svg', false, false);
// $f21ico-done: image-url('../assets/images/f21ico-done.svg', false, false);
// $f21ico-done_all: image-url('../assets/images/f21ico-done_all.svg', false, false);
@import '../../../../sass/variables';
// @import '../../../sass/normalize.css';

:host {
    --themeColor: $bck-msg-sent;
    --foregroundColor: $col-msg-sent;
}

#scroll-me {
    scroll-behavior: smooth;
}
#scroll-me.withoutAnimation {
    scroll-behavior: unset;
}

// ============= CSS #chat21-conversation-component ================= //
#chat21-conversation-component {
    // background-color: #ffffff;
    // width: 100%;
    // height: 100%;
    // position: relative;
    // margin: 0px;
    // padding: 0px;

    position: absolute;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    // border: 0.1px solid lightgray;
    .c21-title {
        position: absolute;
        left: 50px;
        right: 100px;
        display: inline-block;
        width: auto;
        height: 42px;
        padding: 0px;
        margin: 5px 0px;
        font-size: 1.6em;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .titleText {
        position: relative;
        line-height: 40px;
        text-align: left;
        font-size: 1em;
    }
    .avatar-project {
        position: relative;
        padding: 0;
        margin: 0;
        margin: 0 10px 0 0;
        float: left;
        height: 42px;
        width: 42px;
        line-height: 42px;
    }
    .avatar-placeholder {
        font-size: 16px;
    }
    .avatar-image {
        max-width: 30px;
        max-height: 30px;
        margin: 6px;
    }

     /* SET ICON AVATAR */
     .c21-icon-avatar {
        position: relative;
        padding: 0;
        margin: 0;
        height: 40px;
        width: 40px;
        min-height: 40px;
        min-width: 40px;
        line-height: 40px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #ffffff;
        .c21-avatar-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            text-align: center;
            font-size: 1.4em;
            color: #ffffff;
            font-weight: 500;
        }
        .c21-avatar-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 50%;
        }
        .c21-avatar-image img{
            max-width: 100%;
            width: 100%;
            height: 100%;
            min-width: 25px;
            min-height: 25px;
            object-fit: cover;
        }
    }

     /* SET SCROLLBAR */
    // ============= CSS c21-header ================= // 
    .c21-header {
        position: fixed;
        left: 0px;
        right: 0px;
        .c21-header-container{
            .c21-header-content {
                .c21-header-writing{
                    position: absolute;
                    left: 40px;
                    right: 40px;
                    bottom: 3px;
                    width: auto;
                    text-align: center;
                    margin: 0px;
                    padding: 0px;
                    font-size: 1.1em;
                    color: #ffffff;
                }
            }
        }
    }

    .rowMsg{
        position: relative;
        height: auto;
        display: block;
    }
    // .c21-header-button:hover {
    //     background-color: rgba(0, 0, 0, 0.4);
    //     border-radius: 20px;
    //     height: 40px;
    //     width: 40px;
    //     margin: 5px 10px;
    // }
    
    // ============= CSS c21-body ================= //
    .c21-body {
        // -webkit-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
        // -moz-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
        // box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
        position: fixed;
        .c21-body-container {
            // .c21-body-header {
            //     .chat21-header-modal-select {
            //         font-family: 'Google Sans', sans-serif !important;
            //         padding: 0px;
            //         background-color: #b9b9b921;
            //         margin: 8px;
            //         line-height: 1.2em;
            //         color: #616161;
            //         font-size: 15px;
            //         text-align: center;
            //         word-wrap: break-word;
            //         border-radius: 8px;
            //     }
            //     .chat21-header-modal-select-more-of-one-dept {
            //         position: relative;
            //         height: auto;
            //         padding: 10px;
            //         margin: 30px 0 0 0;
            //     }
            // } // end .chat21-sheet-header

            // .c21-body-content  {
            //     /* no conflict
            //     https://stackoverflow.com/questions/28556520/jquery-widget-css-conflicts-with-third-party-site */
            //     /** CONTENT **/
            //     .chat21-sheet-content {
            //         position: absolute;
            //         top: 0;
            //         right: 0;
            //         left: 0;
            //         bottom: 43px;
            //         overflow: hidden;
            //         .time{
            //             margin-bottom: 20px;
            //         }
            //         /* ====== SET SCROLLBAR ====== */
            //         .chat21-conversation-parts-container {
            //             height: 100%;
            //             overflow-y: hidden;
            //         }

            //         #c21-contentScroll{
            //             position: absolute;
            //             left: 0px;
            //             right: 10px;
            //             padding: 10px;
            //             // display: none;
            //             opacity: 0;
            //             -webkit-transition: opacity 0.5s; /* Safari */
            //             transition: opacity 0.5s;
            //             transition-timing-function: ease-in;
            //         }
            //         .chat21-conversation-parts-container::-webkit-scrollbar {
            //             width: 8px;
            //             background-color: #00000000!important;
            //         } 
            //         .chat21-conversation-parts-container::-webkit-scrollbar-track {
            //             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            //             background-color: #00000000!important;
            //         }
            //         .chat21-conversation-parts-container::-webkit-scrollbar-thumb {
            //             border-radius: 6px!important;
            //             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); 
            //             background-color: #00000040!important;   
            //         } 
            //         #scroll-me {
            //             height: 100%;
            //             width: 100%;
            //             overflow-y: auto;
            //             overflow-x: hidden;
            //             position: absolute;
            //             top: 0;
            //             right: 0;
            //         }
            //         #scroll-me:hover {
            //             &::-webkit-scrollbar-thumb {
            //                 background: #777777; 
            //             }
            //         }
            //         .msg_container {
            //             overflow: hidden;
            //             display: flex;
            //             opacity: 0px;
            //         }
            //         /* ====== SET MESSAGES ====== */
            //         .messages {
            //             border-radius: 8px;
            //             padding: 0;
            //             word-wrap: break-word;
            //             // padding: 14px;
            //             // padding: 6px 6px 6px 6px;
            //             // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            //             // -webkit-animation: heartbeat 1.5s ease-in-out both;
            //             // animation: heartbeat 1.5s ease-in-out both;

            //             p {
            //                 font-size: 1.4em;
            //                 margin: 0;
            //                 padding: 14px;
            //                 font-style: normal;
            //                 letter-spacing: normal;
            //                 font-stretch: normal;
            //                 font-variant: normal;
            //                 font-weight: 300;
            //                 overflow: hidden;
            //             }
            //             img {
            //                 border-radius: 8px;
            //                 padding: 3px;
            //                 margin-bottom: 0px;
            //                 max-width: calc(100% - 6px);
            //                 width: auto;
            //                 height: auto;
            //                 object-fit: cover;
            //             }
            //             .message_innerhtml {
            //                 margin: 0px;
            //                 // padding: 0px 14px;
            //                 &.marked{
            //                     padding:8px;
            //                     margin-block-start: -1em!important;
            //                     margin-block-end: -1em!important;
            //                 }
                            
            //                 .text-message {
            //                     padding-top: 14px;
            //                 }
            //             }
                        
            //         }
            //         /* send message */
            //         .base_sent {
            //             align-items: flex-end;
            //             justify-content: flex-end;
            //             padding: 2px 0px 4px 40px;

            //             .msg_sent {
            //                 background-color: var(--themeColor);
            //                 color: var(--foregroundColor);
            //                 margin-right: 0;
            //                 margin-left: 4px;
            //                 max-width: calc(100% - 30px);
            //                 min-width: 14px;
            //             }
            //             .message_innerhtml {
            //                 padding: 8px;
            //             }
            //             .emoticon {
            //                 background-color: transparent!important;
            //                 font-size: 4em;
            //                 .message_innerhtml {
            //                     padding: 0;
            //                     margin: 0;
            //                 }
            //             }                        
                        
            //             .status-message {
            //                 width: 16px;
            //                 height: 16px;
            //                 margin-left: 4px;
            //                 .icon {
            //                     width: 13px;
            //                     height: 13px;
            //                     background-repeat: no-repeat;
            //                     background-position: center;
            //                     background-size: cover;
            //                     overflow-x: hidden;
            //                 }
            //                 .c21-ico-schedule {
            //                     background-image: url("../../../../assets/images/f21ico-schedule.svg");
            //                 }
            //                 .c21-ico-done {
            //                     background-image: url("../../../../assets/images/f21ico-done.svg");
            //                 }
            //                 .c21-ico-done_all {
            //                     background-image: url("../../../../assets/images/f21ico-done_all.svg");
            //                 }
            //             }
                        
            //         }
    
            //         /** recive message **/
            //         .base_receive {
            //             padding: 0px 0px 6px 0px;
            //             /* avatar */
            //             .content-avatar {
            //                 position: relative;
            //                 border-radius: 50%;
            //                 width: 28px;
            //                 height: 28px;
            //                 margin-right: 6px;
                        
            //                 .profile_image{
            //                     position: relative;
            //                     width: 25px;
            //                     height: 25px;
            //                     border-radius: 50%;
            //                     overflow: hidden;
            //                     background-color: #ffffff;
            //                     border: 1px solid #e2e2e2;
            //                 }
            //                 .profile_image img{
            //                     max-width: 100%;
            //                     width: 100%;
            //                     height: 100%;
            //                     min-width: 25px;
            //                     min-height: 25px;
            //                     object-fit: cover;
            //                 }
            //             }
            //             /* message */
            //             .msg_receive {
            //                 background-color: $light-white;
            //                 color: $black;
            //                 // max-width: 260px;
            //                 max-width: calc(100% - 70px);
            //                 min-width: 14px;
            //                 margin: 0 20px 4px 10px;
            //                 height: fit-content;
            //                 width: auto;
            //             }
            //             .message_innerhtml {
            //                 padding: 14px;
            //             }
            //             .emoticon {
            //                 background-color: transparent!important;
            //                 font-size: 4em;
            //                 .message_innerhtml {
            //                     padding: 0;
            //                     margin: 0;
            //                 }
            //             }                     
            //         }
    
            //         .message_sender_fullname{
            //             font-size: 1em;
            //             color: $gray;
            //             margin: 0 auto 4px auto;
            //         }
                    
            //     } // end .chat21-sheet-content
            // } // end .c21-body-content
        } // end .c21-body-container
    }
}

/* ================== CSS chat21-footer ==================== */ 
#chat21-footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 0px;
    padding: 0;
    // box-shadow: 0 -1px 0px 0px $trasp-light-gray;
    background: white;
 
    &.border-top{
        box-shadow: 0 -1px 0px 0px $trasp-light-gray;
    }

    .visible-text-area {
        pointer-events: auto;
    }
    
    .chat21-textarea-button {
        pointer-events: auto;
    }
    .chat21-textarea-button {
        fill: $blue;
        pointer-events: auto;
    }

    

    /* resize and hide the text input area */
    // .hidden-text-area {
    //     display: hidden;
    //     height: 0px;
    // }

    // /* show and restore the text area size */
    // .visible-text-area {
    //     display: block;
    //     height: 100%;
    // }

    /* button scroll to bottom page */
    #chat21-buttonToBottom {
        display: flex;
        position: relative;
        margin-right: 10px;
        margin-top: -40px;
        float: right;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        z-index: 1;
        cursor: pointer;
        background-color: #ffffff;
        border: 1px solid $trasp-light-gray;
        // -webkit-box-shadow: 0 3px 2px $trasp-light-black;
        // box-shadow: 0 3px 2px $trasp-light-black;
        text-align: center;
        svg {
            margin: auto;
            fill: $gray;
        }
    }
    #chat21-buttonToBottom:hover {
        background-color: var(--themeColor);
        opacity: 1!important;
        transition: all .45s ease-in-out!important;
        -moz-transition: all .45s ease-in-out!important;
        -webkit-transition: all .45s ease-in-out!important;
        border: 1px solid var(--foregroundColor);
        svg {
            fill: var(--foregroundColor);
        }
    }

    #chat21-main-message-context {
        overflow: hidden;
        word-wrap: break-word;
        resize: horizontal;
        overflow-y: auto;
        box-sizing: border-box;
        color: $black;
        min-width: 100%;
        outline: 0;
        resize: none;
        font-size: 1.4em;
        line-height: 1.4em;
        font-weight: 300;
        max-height: 110px;
        min-height: auto;
        height: 20px;
        padding: 0px 40px;
        margin: 10px 0px 10px;
        border: none;
    }

    .chat21-textarea-button {
        position: absolute;
        display: block;
        bottom: 22px;
        width: 20px;
        height: 20px;
        opacity: 0.3;
        cursor: initial;
        &.active {
            opacity: 1;
            cursor: pointer;
        }
    }
   



    #chat21-button-send {
        right: 8px;
        bottom: 10px;
    }
    #chat21-file{
        left: 8px;
        bottom: 10px;
    }
    #chat21-start-upload-doc,
    #chat21-start-mic {
        left: 8px;
        top: 10px;
    }
}

/* ==================== OPTION MENU CONTAINER ==================== */ 
#c21-options-menu {
    width: auto;
    height: auto;
    min-height: 40px;
    min-width: 100px;
    max-width: 80%;
    position: absolute;
    z-index: 10;
    top: 40px;
    right: 15px;
    border-radius: 6px;
    font-size: 1.2em;
    line-height: normal;
    overflow: hidden;
    border: 1px solid #d7d7d7;
    background-color: #ffffff;
    padding: 10px 0px 10px 0px;
    .c21-header-button {
        padding: 6px 10px 6px 10px;
        display: flex;
        align-items: center;
    }
    .c21-header-button:hover {
        background-color: whitesmoke;
        cursor: pointer;
    }
    .label-menu-item{
        line-height: 20px;
        position: relative;
        margin: 0 10px 0px 10px;
    }
    
}




/* ==================== MOBILE VERSION ==================== */ 
@media (max-width: 451px) {
    #chat21-conversation-component {
        .c21-header {
            .c21-header-container {    
                .c21-header-content {
                    .c21-header-button {
                        &.c21-close {
                            display: flex;
                        }
                    }
                }
            }
        }
    }
}