.b_chat{
    --bg-clr: hsl(0 0 100);
    --border-clr: hsl(0 0 80);
    --border-radius: 6px;

    /* icons */
    --filter-border-clr: brightness(0) saturate(100%) invert(86%) sepia(25%) saturate(0%) hue-rotate(194deg) brightness(90%) contrast(94%);
    --filter-inactive-user-clr: brightness(0) saturate(100%) invert(86%) sepia(25%) saturate(0%) hue-rotate(194deg) brightness(90%) contrast(94%);
    --filter-active-user-clr: brightness(0) saturate(100%) invert(32%) sepia(90%) saturate(1186%) hue-rotate(213deg) brightness(104%) contrast(101%);

    /* text */
    --s-font-size: 12px;
    --m-font-size: 14px;
    --b-font-size: 16px;

    /* colors */
    --main-clr: hsl(0 0 0);
    --info-clr: hsl(0 0 20);
    --light-grey-clr: hsl(0 0 95);
    --accent-clr: hsl(230 100 44);
    --light-accent-clr: hsl(230 100 95);

    --user-active-clr: hsl(230 100 44);
    --user-inactive-clr: hsl(0 0 80);

    /* modal properties */
    --modal-bottom: 40px;
    --modal-right: 23px;

    --modal-height: calc(100svh - var(--modal-bottom) - 65px);
    --modal-width: 300px;

    --modal-first-line-height: 26px;

    position: fixed;
    z-index: 10000;
    bottom: var(--modal-bottom);
    right: var(--modal-right);

    height: var(--modal-height);
    width: var(--modal-width);

    background: var(--bg-clr);
    border: 1px solid var(--border-clr);
    border-radius: var(--border-radius);

    /* .b_chat states */
    &.closed{
        display: none;
    }

    @media (max-width: 500px){
        --modal-bottom: 0;
        --modal-right: 0;

        --modal-height: 100svh;
        --modal-width: 100svw;

        border-radius: 0;
    }

    .chat_first_line{
        padding: 5px 7px;
        height: var(--modal-first-line-height);
        border-bottom: 1px solid var(--border-clr);

        grid-template-columns: 16px calc(100% - 52px) 16px;
        gap: 10px;
        .chat_icon{
            height: 16px;
            display: block;
        }
        .chat_title{
            font-size: var(--s-font-size);
            color: var(--info-clr);
        }
        .close_chat_btn{
            padding: 2px;
            border-radius: var(--border-radius);
            cursor: pointer;
            --img-filter: var(--filter-border-clr);

            img{
                height: 12px;
                width: 12px;
                display: block;
                filter: var(--img-filter);
            }
            @media(any-hover: hover){
                &:hover{
                    background-color: var(--border-clr);
                    /* img-filter : #000000 */
                    --img-filter: brightness(0) saturate(100%) invert(0%) sepia(63%) saturate(748%) hue-rotate(201deg) brightness(85%) contrast(107%);
                }
            }
        }
    }

    .container_chat_parts{
        position: relative;
        height: calc(var(--modal-height) - var(--modal-first-line-height));
        overflow: hidden;
        &.chats_list_opened{
            .chats_list{
                position: absolute;
                left: 0;
                top: 0;
            }
            .chat_container{
                position: absolute;
                left: var(--modal-width);
                top: 0;
            }
        }
        &.chat_container_opened{
            .chats_list{
                position: absolute;
                left: var(--modal-width);
                top: 0;
            }
            .chat_container{
                position: absolute;
                left: 0;
                top: 0;
            }
        }

        .global_chats_overlay{
            height: calc(var(--modal-height) - var(--modal-first-line-height));
            width: var(--modal-width);

            position: absolute;
            top: 0;
            left: 0;

            backdrop-filter: blur(6px);

            display: none;
            align-items: center;
            justify-content: center;

            img{
                filter: invert(1);
                width: 50px;
                display: block;
            }

            &.show{
                display: flex;
            }
        }
    }

    /* chats list */
    .chats_list{
        width: var(--modal-width);
        height: calc(var(--modal-height) - var(--modal-first-line-height));
        overflow: auto;
        transition: 200ms all;
        .w_chat_info{
            padding: 10px 7px;
            grid-template-columns: 50px calc(100% - 50px);
            cursor: pointer;

            /* .w_chat_info statuses */
            @media(any-hover: hover){
                &:hover{
                    background: var(--light-grey-clr);
                }
            }

            .user_avatar__user_status{
                position: relative;
                .avatar{
                    width: 50px;
                    height: 50px;

                    border-radius: 50%;
                    object-fit: cover;
                }
                .user_status_marker{
                    position: absolute;
                    bottom: 0;
                    right: -5px;

                    width: 10px;
                    height: 10px;
                    background: var(--user-inactive-clr);
                    border-radius: 50%;

                    &.online{
                        background: var(--user-active-clr);
                    }
                }
            }
            .chat_info{
                padding: 0 0 0 10px;

                .user_name__last_sent_msg_date{
                    height: 20px;

                    grid-template-columns: calc(100% - 35px) 30px;
                    gap: 5px;

                    &:has(.last_sent_msg_date[data-date_type="date"]){
                        grid-template-columns: calc(100% - 60px) 55px;
                    }

                    .user_name{
                        font-size: var(--b-font-size);
                        font-weight: var(--sb-font-weight);
                        color: var(--main-clr);
                    }

                    .last_sent_msg_date{
                        text-align: right;
                        font-size: var(--s-font-size);
                        color: var(--info-clr);
                    }
                }

                .last_sent_msg__count_unread_msgs{
                    height: 16px;

                    grid-template-columns: calc(100% - 35px) 30px;
                    gap: 5px;

                    &:has(.count_unread_msgs[data-count_unread_msgs="0"]){
                        grid-template-columns: 100%;
                    }

                    .count_unread_msgs{
                        width: fit-content;
                        height: 16px;
                        min-width: 17px;
                        justify-self: right;

                        max-width: 100%;

                        padding: 0px 6px 0 5px;
                        background: var(--user-active-clr);
                        border-radius: 10px;

                        font-size: var(--s-font-size);
                        color: #ffffff;

                        &[data-count_unread_msgs="0"]{display: none;}
                    }

                    .last_sent_msg{
                        width: 100%;
                        font-size: var(--s-font-size);
                        color: var(--info-clr);

                        flex-wrap: nowrap;
                        gap: 2px;

                        .last_msg_file, .last_msg_text{
                            display: block;
                            height: 16px;
                            line-height: 16px;

                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }

                        img{
                            height: 100%;
                            aspect-ratio: 1 / 1;
                            object-fit: cover;
                            border-radius: 3px;
                        }
                    }
                }
            }
        }
    }

    .chat_container{
        --chat-container-height: calc(var(--modal-height) - var(--modal-first-line-height));
        --receiver-info-line-height: 71px;
        --input-data-line-height: calc(11px + var(--contenteditable-height));
        --uploaded-files-cont-height: 0;
        --contenteditable-height: 21px;

        width: var(--modal-width);
        height: var(--chat-container-height);
        transition: 200ms all;

        &:has(.input_data_line_container .uploaded_files .w_uploaded_file), &:has(.input_data_line_container .uploaded_files .w_uploaded_photo){
            --input-data-line-height: calc(var(--uploaded-files-cont-height) + var(--contenteditable-height) + 10px);
            .input_data_line .send_message_btn{
                cursor: pointer;
                --filter: unset;
            }
        }

        .receiver_info_line{
            padding: 10px 7px;
            grid-template-columns: 12px calc(100% - 44px) 12px;
            border-bottom: 1px solid var(--border-clr);
            gap: 10px;

            .left_from_a_chat{
                cursor: pointer;
                img{
                    width: 12px;
                    display: block;
                }
            }
            .receiver_info_container{
                grid-template-columns: 50px calc(100% - 60px);
                gap: 10px;
                .receiver_avatar{
                    width: 50px;
                    height: 50px;
                    display: block;

                    border-radius: 50%;
                    object-fit: cover;
                }
                .receiver_info{
                    .receiver_name{
                        font-size: var(--b-font-size);
                        font-weight: var(--sb-font-weight);
                        color: var(--main-clr);
                    }
                    .receiver_status{
                        font-size: var(--s-font-size);
                        color: var(--user-inactive-clr);

                        &.online{
                            color: var(--user-active-clr);
                        }
                    }
                }
            }
            .chat_actions_cont{
                .additional_actions_container{
                    height: fit-content;
                    button{
                        height: 25px;
                        display: block;
                        img{
                            width: 8px;
                            height: 25px;
                            object-fit: cover;
                        }
                    }
                }
            }
        }

        .container_msgs_container{
            position: relative;
            height: calc(var(--chat-container-height) - var(--receiver-info-line-height) - var(--input-data-line-height));
            width: var(--modal-width);

            .btn_scroll_down__unread_msgs_count{
                position: absolute;
                inset: auto 15px 10px auto;

                width: 33px;
                height: 33px;

                background: var(--light-grey-clr);
                border: 1px solid var(--border-clr);
                border-radius: 50%;

                cursor: pointer;

                &.hidden{
                    display: none;
                }
                .unread_msgs_count_line{
                    margin-top: -17px;
                    margin-bottom: 3px;

                    &.hidden{
                        display: none;
                    }
                    .unread_msgs_count{
                        height: 18px;
                        min-width: 17px;
                        padding: 0px 6px 0 5px;

                        cursor: default;
                        background: hsl(from var(--light-accent-clr) h s 85);
                        border-radius: 50%;

                        font-size: var(--m-font-size);

                        &[data-unread_msgs_total_count="0"]{
                            display: none;
                        }
                    }
                }

                img{
                    display: block;
                    margin-left: 1px;
                    padding: 6px 9px;
                }
            }
        }

        .msgs_container{
            overflow: auto;
            height: calc(var(--chat-container-height) - var(--receiver-info-line-height) - var(--input-data-line-height));
            padding: 8px 7px;

            flex-direction: column-reverse;
            gap: 10px;
            justify-content: flex-start;

            .w_message{
                --bg: var(--border-clr);
                --text-clr: var(--main-clr);

                max-width: 70%;
                width: fit-content;

                .message_data_cont{
                    background: var(--bg);
                    border-radius: 6px;
                    overflow: hidden;

                    .imgs_msg_data{
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
                        gap: 2px;

                        a{
                            cursor: pointer;

                            &:has(img.unloaded){
                                background: linear-gradient(0deg, #f9f9f9, #303030);
                                background-size: 400% 400%;
                                height: 50px;
                                /*animation: swimmingBgInChatMessagesImgPreloader 15s ease infinite;*/
                            }
                            img{
                                width: 100%;
                                height: 100%;
                                display: block;
                                object-fit: cover;

                                &.unloaded{display: none;}
                            }
                        }
                    }

                    .files_msg_data{
                        &:has(.file_cont){
                            margin-top: 10px;
                        }
                        .file_cont{
                            padding: 5px 7px;
                            grid-template-columns: 20px calc(100% - 30px);

                            .donwload_file_btn{
                                width: 20px;
                                cursor: pointer;
                                img{
                                    display: block;
                                    width: 100%;
                                }
                            }
                            .file_inf{
                                .file_name{
                                    font-size: var(--m-font-size);
                                }
                                .file_size{
                                    font-size: var(--s-font-size);
                                    color: var(--info-clr);
                                }
                            }
                        }
                    }

                    .txt_msg_data{
                        padding: 5px 7px;

                        font-size: var(--m-font-size);
                        color: var(--text-clr);
                    }
                }

                .sent_date__sent_status{
                    grid-template-columns: 100%;

                    gap: 10px;
                    margin-top: 4px;

                    &:has(.sent_status){
                        grid-template-columns: calc(100% - 23px) 13px;
                    }

                    .sent_date{
                        font-size: var(--s-font-size);
                        color: var(--border-clr);
                        line-height: 9px;
                    }

                    .sent_status{
                        --filter: var(--filter-inactive-user-clr);
                        width: 13px;
                        display: block;

                        filter: var(--filter);

                        &.read{
                            --filter: var(--filter-active-user-clr);
                        }
                        &.delivered{
                            width: 10px;
                            --filter: var(--filter-active-user-clr);
                        }
                        &.in_process{
                            --filter: var(--filter-inactive-user-clr);
                        }
                    }
                }

                &.my{
                    align-self: flex-end;
                    --bg: var(--light-accent-clr);
                }
                &.other_user{
                    --bg: var(--light-grey-clr);
                    align-self: flex-start;
                }
            }
        }

        .input_data_line_container{
            height: var(--input-data-line-height);
            .uploaded_files{
                overflow-y: auto;

                height: var(--uploaded-files-cont-height);
                border-top: 1px solid var(--border-clr);
                display: none;

                &:has(.w_uploaded_photo){
                    display: block;
                    padding-top: 10px;
                }

                &:has(.w_uploaded_file){
                    display: block;
                }

                .uploaded_photos_list{
                    overflow-x: auto;
                    overflow-y: hidden;

                    cursor: all-scroll;

                    &:has(.w_uploaded_photo){
                        padding: 0 7px 10px;
                        border-bottom: 1px solid var(--border-clr);
                    }
                    .w_uploaded_photo{
                        position: relative;

                        width: 100%;
                        min-width: calc(33% - 5px);
                        height: 125px;
                        .uploaded_photo{
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }

                        .delete_uploaded_photo{
                            position: absolute;
                            inset: 10px 10px auto auto;

                            cursor: pointer;

                            padding: 3px;
                            background: hsla(0 0 0 / 0.1);
                            backdrop-filter: blur(4px);

                            border-radius: 4px;
                            img{
                                width: 12px;
                                display: block;
                            }
                        }
                    }
                }

                .w_uploaded_file{
                    padding: 2px 7px;
                    border-bottom: 1px solid var(--border-clr);

                    &:last-of-type{
                        border-bottom: none;
                    }

                    .uploaded_file_name{
                        font-size: var(--s-font-size);
                    }

                    .delete_uploaded_file_btn{
                        cursor: pointer;

                        padding: 3px;

                        &:hover{
                            background: hsla(0 0 0 / 0.1);
                        }
                        border-radius: 4px;

                        transition: 0.2s ease all;
                        img{
                            width: 12px;
                            display: block;
                        }
                    }
                }
            }
        }

        .input_data_line{
            padding: 5px 7px;
            border-top: 1px solid var(--border-clr);
            grid-template-columns: 20px calc(100% - 60px) 20px;
            align-items: flex-end;
            gap: 10px;

            .send_file_btn{
                width: 16px;
                height: 14px;
                padding: 3px 2px;

                cursor: pointer;

                &:hover{
                    --filter-border-clr: brightness(0) saturate(100%);
                }
                img{
                    filter: var(--filter-border-clr);
                    height: 16px;
                    display: block;

                    &[src="/static/v2/icons/spinner.svg"]{
                        --filter-border-clr: none;
                        scale: 2;
                    }
                }
            }

            .input_text{
                outline: none;
                width: 100%;
                height: 100%;
                position: relative;
                min-height: 21px;
            }

            .input_text[data-is-empty="true"]::after{
                content: attr(placeholder);

                width: 100%;
                height: 100%;
                padding: var(--textarea-padding);

                position: absolute;
                top: 1px;
                left: 0;
                font-size: var(--s-font-size);
                color: var(--border-clr);

                line-height: 21px;

                box-sizing: border-box;

                cursor: text;
            }

            .send_message_btn{
                --filter: unset;

                text-align: center;
                width: 16px;
                height: 16px;
                padding: 2px;
                img{
                    height: 16px;
                    width: 16px;
                    display: block;

                    object-fit: cover;
                    object-position: top;

                    filter: var(--filter);
                }
            }
        }
        .input_data_line:has(.input_text[data-is-empty="true"]){
            .send_message_btn{
                cursor: not-allowed;
                --filter: var(--filter-border-clr);
            }
        }
    }
}

.list_chat_notifications{
    --border-clr: hsl(0 0 80);
    --border-radius: 6px;

    /* icons */
    --filter-border-clr: brightness(0) saturate(100%) invert(86%) sepia(25%) saturate(0%) hue-rotate(194deg) brightness(90%) contrast(94%);
    --filter-inactive-user-clr: brightness(0) saturate(100%) invert(86%) sepia(25%) saturate(0%) hue-rotate(194deg) brightness(90%) contrast(94%);
    --filter-active-user-clr: brightness(0) saturate(100%) invert(32%) sepia(90%) saturate(1186%) hue-rotate(213deg) brightness(104%) contrast(101%);

    /* text */
    --s-font-size: 12px;
    --m-font-size: 14px;
    --b-font-size: 16px;

    /* colors */
    --info-clr: hsl(0 0 20);

    position: fixed;
    z-index: 1000;
    inset: 50px 23px auto auto;

    max-height: calc(100svh - 35px - 100px);
    width: 300px;

    overflow: auto;


    @media(max-width: 450px){
        width: calc(100svw - 46px);
        inset: 50px 23px auto auto;
    }

    .w_chat_notification{
        width: 100%;
        margin-bottom: 10px;
        padding: 10px 7px;

        grid-template-columns: 50px calc(100% - 85px) 15px;
        gap: 10px;

        background: #fff;
        border: 1px solid var(--border-clr);
        border-radius: var(--border-radius);

        cursor: pointer;

        .avatar{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }

        .notification_inf{
            .user_name{
                font-size: var(--b-font-size);
                font-weight: var(--sb-font-weight);
                color: #000000;
            }

            .notification_content{
                --line-clamp: 3;

                font-size: var(--s-font-size);
                font-weight: var(--n-font-weight);
                color: #000000;
            }
        }

        .close_notification_btn{
            --filter: var(--filter-border-clr);
            height: fit-content;
            padding: 4px;
            img{
                width: 100%;
                display: block;

                filter: var(--filter);
            }

            @media(any-hover: hover){
                &:hover{
                    --filter: none;
                }
            }
        }
    }
}

.open_b_chat_btn{
    --accent-clr: hsl(230 100 44);
    --bg: hsl(230 100 95);

    --s-font-size: 12px;
    --m-font-size: 14px;
    --b-font-size: 16px;

    --bottom: 30px;

    position: fixed;
    inset: auto 30px var(--bottom) auto;

    padding: 10px;
    background: var(--bg);

    border-radius: 6px;
    border: 1px solid #dbdbdb;

    box-shadow: 0 0 5px 0px var(--bg);

    cursor: pointer;

    transition: 0.3s ease all;

    z-index: 1000;

    &.hidden{
        display: none;
    }
    @media(any-hover: hover){
        &:hover{
            box-shadow: 0 0 20px 0px var(--bg);
        }
    }

    img{
        height: 16px;
        display: block;
    }

    .unread_msgs_total_count{
        position: absolute;
        inset: -8px -9px auto auto;

        height: 18px;
        min-width: 17px;
        padding: 0px 6px 0 5px;

        cursor: default;
        background: hsl(from var(--accent-clr) h s 85);
        border-radius: 50%;

        font-size: var(--m-font-size);

        &[data-unread_msgs_total_count="0"]{display: none;}
    }
}

@keyframes swimmingBgInChatMessagesImgPreloader {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}