/* Style the chats of messages list */
.AppMessagesChatsList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;

    padding: var(--size-17);

    opacity: 0.0;
    transition: 0.2s;
}

@media screen and (max-width: 900px){
    .AppMessagesChatsList {
        padding: var(--size-07);
    }
}

    .AppMessagesChatsList__Date {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        font-size: var(--font-size-context);
        color: rgb(127, 127, 127);

        width: 100%;

        margin-top: var(--size-17);
        margin-bottom: var(--size-17);
    }

    .AppMessagesChatsList__Request {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;

        width: 100%;

        margin-bottom: var(--size-07);
    }

        .AppMessagesChatsListRequest__Block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;

            background: rgb(245, 245, 245);
            /* background: rgb(207, 227, 237); */
            border: 1px solid rgb(237, 237, 237);
            border-top-left-radius: var(--size-07);
            border-top-right-radius: var(--size-07);
            border-bottom-left-radius: var(--size-07);

            max-width: 75%;

            padding: var(--size-04);

            transition: 0.4s;
        }

        @media screen and (max-width: 650px){
            .AppMessagesChatsListRequest__Block {
                max-width: 87%;
            }
        }

            .AppMessagesChatsListRequest__Block:hover {
                transition: 0.2s;
                background: rgb(240, 240, 240);
                /* background: rgb(202, 222, 232); */
            }

            .AppMessagesChatsListRequestBlock__Content {
                display: block;
                
                text-align: left;
                white-space: normal;
                word-break: break-word;

                margin-bottom: var(--size-04);
                
                cursor: text;
                user-select: text;
            }

            .AppMessagesChatsListRequestBlock__Data {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;

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

                width: 100%;
            }

                .AppMessagesChatsListRequestBlockData__Delivery {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;

                    width: 100%;
                }

                    .AppMessagesChatsListRequestBlockDataDelivery__Icon {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;

                        margin-right: var(--size-03);
                    }

                        .AppMessagesChatsListRequestBlockDataDelivery__Icon > img {
                            width: 100%;
                            height: auto;
                            max-width: var(--icon-button-size);
                        }

                    .AppMessagesChatsListRequestBlockDataDelivery__Status {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-start;

                        color: rgb(127, 127, 127);
                        text-align: left;

                        min-width: var(--size-4);

                        margin-right: var(--size-07);
                    }

                .AppMessagesChatsListRequestBlockData__Time {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                    color: rgb(127, 127, 127);
                }

    .AppMessagesChatsList__Response {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        width: 100%;

        margin-bottom: var(--size-07);
    }

        .AppMessagesChatsListResponse__Block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;

            background: rgb(255, 255, 255);
            border: 1px solid rgb(237, 237, 237);
            border-top-left-radius: var(--size-07);
            border-top-right-radius: var(--size-07);
            border-bottom-right-radius: var(--size-07);

            max-width: 75%;

            padding: var(--size-04);

            transition: 0.4s;
        }

        @media screen and (max-width: 650px){
            .AppMessagesChatsListResponse__Block {
                max-width: 87%;
            }
        }

            .AppMessagesChatsListResponse__Block:hover {
                transition: 0.2s;
                background: rgb(250, 250, 250);
            }

            .AppMessagesChatsListResponseBlock__Content {
                display: block;
                
                text-align: left;
                white-space: normal;
                word-break: break-word;

                margin-bottom: var(--size-04);
                
                cursor: text;
                user-select: text;
            }

            .AppMessagesChatsListResponseBlock__Data {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;

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

                width: 100%;
            }

                .AppMessagesChatsListResponseBlockData__Time {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                    color: rgb(127, 127, 127);
                }

    .AppMessagesChatsListMessageBlock__Files {
        display: grid;
        align-items: flex-start;
        justify-content: flex-start;

        border-left: 2px solid rgb(200, 200, 200);

        grid-template-columns: repeat( auto-fit, minmax(35%, 1fr) );

        width: 100%;

        gap: var(--size-02);
        padding: var(--size-02);
        margin-top: var(--size-04);
        margin-bottom: var(--size-04);
    }

    @media screen and (max-width: 650px) {
        .AppMessagesChatsListMessageBlock__Files {
            grid-template-columns: repeat( auto-fit, minmax(50%, 1fr) );
        }

    }

        .AppMessagesChatsListMessageBlockFiles__Item {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;

            background: rgba(157, 217, 97, 0.1);
            border: 1px solid rgba(157, 217, 97, 0.7);
            border-radius: var(--size-04);

            width: 100%;
            height: 100%;
            
            padding: var(--size-04);

            user-select: none;
            transition: 0.4s;
        }

            .AppMessagesChatsListMessageBlockFiles__Item:hover {
                transition: 0.2s;
                background: rgba(157, 217, 97, 0.3);
                border: 1px solid rgba(157, 217, 97, 0.9);
            }

            .AppMessagesChatsListMessageBlockFilesItem__Icon {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                
                margin-right: var(--size-04);
            }

                .AppMessagesChatsListMessageBlockFilesItem__Icon > img {
                    width: var(--icon-view-size);
                    height: auto;
                    
                    opacity: 0.7;
                    transition: 0.4s;
                }

                    .AppMessagesChatsListMessageBlockFiles__Item:hover .AppMessagesChatsListMessageBlockFilesItem__Icon > img {
                        transition: 0.2s;
                        opacity: 1.0;
                    }

            .AppMessagesChatsListMessageBlockFilesItem__Data {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;

                width: 100%;
            }

                .AppMessagesChatsListMessageBlockFilesItemData__Name {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;

                    width: 100%;
                }

                    .AppMessagesChatsListMessageBlockFilesItemData__Name > a {
                        font-size: var(--font-size-context);

                        white-space: normal;
                        word-break: break-word;
                    }

                        .AppMessagesChatsListMessageBlockFilesItemData__Name > a:hover {
                            color: rgb(57, 57, 57);
                        }

                .AppMessagesChatsListMessageBlockFilesItemData__Size {
                    color: rgb(127, 127, 127);
                    font-size: var(--font-size-context);
                }

    .AppMessagesChatsListMessageBlock__FilesImages {
        display: grid;
        align-items: flex-start;
        justify-content: flex-start;

        border-left: 2px solid rgb(200, 200, 200);

        grid-template-columns: repeat( auto-fit, minmax(25%, 1fr) );

        width: 100%;

        gap: var(--size-02);
        padding: var(--size-02);
        margin-top: var(--size-04);
        margin-bottom: var(--size-04);
    }

    @media screen and (max-width: 650px) {
        .AppMessagesChatsListMessageBlock__FilesImages {
            grid-template-columns: repeat( auto-fit, minmax(20%, 1fr) );
        }

    }

        .AppMessagesChatsListMessageBlockFilesImages__Item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            
            border: 1px solid rgb(200, 200, 200);
            border-radius: var(--size-07);

            width: 100%;
            height: 100%;
        }

        @media screen and (max-width: 650px){
            .AppMessagesChatsListMessageBlockFilesImages__Item {
                grid-column: 2 span;
            }
        }

            .AppMessagesChatsListMessageBlockFilesImagesItem__Preview {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                opacity: 1.0;
                transition: 0.4s;
            }

                .AppMessagesChatsListMessageBlockFilesImages__Item:hover > .AppMessagesChatsListMessageBlockFilesImagesItem__Preview {
                    transition: 0.2s;
                    opacity: 0.9;
                }

                .AppMessagesChatsListMessageBlockFilesImagesItem__Preview > img,
                .AppMessagesChatsListMessageBlockFilesImagesItem__Preview > video {
                    border-top-left-radius: var(--size-07);
                    border-top-right-radius: var(--size-07);

                    width: 100%;
                    height: auto;
                }

            .AppMessagesChatsListMessageBlockFilesImagesItem__Data {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;

                width: 100%;

                padding: var(--size-04);
            }

                .AppMessagesChatsListMessageBlockFilesImagesItemData__Name > a {
                    font-size: var(--font-size-context);

                    white-space: normal;
                    word-break: break-word;
                }

                    .AppMessagesChatsListMessageBlockFilesImagesItemData__Name > a:hover {
                        color: rgb(57, 57, 57);
                    }

                .AppMessagesChatsListMessageBlockFilesImagesItemData__Size {
                    color: rgb(127, 127, 127);
                    font-size: var(--font-size-context);
                }