.achat__icon {
    width: 64px;
    height: 64px;
    border-radius: 100px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 899;
    bottom: 22px;
    right: 20px;
    cursor: pointer;
    box-shadow: 0 6px 16px 0 #0D224342;
    transition: all ease 0.2s;

    &:hover {
        background: var(--hover);
        transition: all ease 0.2s;
    }
}

.modal-backdrop--chat {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--backdrop);
}

.aChat {
    position: fixed;
    bottom: 0;
    right: 16px;
    box-shadow: 0px 24px 52px 0px #16346430;
    border: 1px solid #D6DEEF;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;

    max-width: 972px;
    max-height: 740px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*Bug fix - 17.06 - Egor*/
    /*Start*/
    background: var(--background);
    z-index: 1010;
    /*End*/

    & .aChat__header {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 23px 24px;
        border-bottom: 1px solid var(--lines);
    }

    & .title {
        font: var(--semiblod-headline-2);
        color: var(--dark-text);
        margin-right: auto;
    }

    & .aChat__content {
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    & .aChat__contactList {
        width: 296px;
        height: 100%;
        border-right: 1px solid var(--lines);
        /*Bug fix - 17.06 - Egor*/
        /*Start*/
        background: var(--grey-bg);
        /*End*/
    }

    & .search__block {
        padding: 20px 24px 16px;
        border-bottom: 1px solid var(--lines);
    }

    & .contactList {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-y: auto;
        scrollbar-width: thin;
        /*margin-right: 4px;*/
        /*margin-top: 3px;*/
        /*margin-bottom: 3px;*/
        max-height: 586px;
        background: var(--grey-bg);

        &::-webkit-scrollbar {
            width: 5px;
        }

        &::-webkit-scrollbar-track {
            background-color: transparent;
            border-radius: 12px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--secondary);
            border-radius: 12px;
        }

        & .item__link {
            padding: 16px 24px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
            margin-right: 4px;
            width: 100%;
        }

        & .item__link.active {
            background: var(--secondary);
        }

        & .item__img {
            width: 42px;
            height: 42px;
            position: relative;
            /*border: var(--border);*/
            border-radius: 100%;
            min-width: 42px;
            max-height: 42px;
        }

        & .item__img img {
            flex-shrink: 0;
            min-width: 100%;
            min-height: 100%;
            object-fit: cover;
        }

        & .notify__dot {
            position: absolute;
            top: 28px;
            left: 28px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--primary);
        }

        & .contact__name {
            font: var(--semiblod-title-3);
            color: var(--dark-text)
        }
    }

    & .input-item--search {
        width: 100%;
    }

    & .aChat__container {
        max-width: 676px;
        height: 670px;
        display: flex;
        flex-direction: column;
    }

    & .messages__block {
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 14px 16px 32px;
        overflow-y: auto;
        scrollbar-width: thin;
        margin-right: 8px;
        flex: revert;
        margin-top: auto;

        &::-webkit-scrollbar {
            width: 10px;
        }

        &::-webkit-scrollbar-track {
            background-color: transparent;
            border-radius: 12px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--secondary);
            border-radius: 12px;
        }
    }

    & .message {
        padding: 24px 32px;
        max-width: 580px;
        border: 1px solid var(--lines);
        background: var(--background);
        border-radius: 25px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        word-break: break-all;


        & .message__text {
            font: var(--regular-text);
            color: var(--dark-text);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            white-space: break-spaces;
        }

        & .message__attach {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            width: min-content;
        }

        & .message__date {
            font: var(--regular-text);
            color: var(--text-gray-menu);
        }

        & .button--upload > .button__upload-text {
            grid-column: 1;
            grid-row: 1 / span 2;
            align-self: center;
        }
    }

    & .companion {
        margin: 0 32px 0 0;
        display: flex;
        flex-direction: row;
        justify-content: left;
    }

    & .user {
        margin: 0 0 0 32px;
        display: flex;
        flex-direction: row;
        justify-content: right;

        /*Bug fix - 17.06 - Egor*/
        /*Start*/
        & .message {
            background: var(--grey-bg);
        }
        /*End*/
    }


    & .padBot16 {
        padding-bottom: 16px;
    }

    & .attached-files__container {
        gap: 16px;
        max-width: 612px;
        max-height: 245px;
        overflow-y: auto;
        scrollbar-width: thin;

        &::-webkit-scrollbar {
            width: 5px;
        }

        &::-webkit-scrollbar-track {
            background-color: transparent;
            border-radius: 12px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--secondary);
            border-radius: 12px;
        }
    }

    & .error {
        display: flex;
        flex-direction: row;
        gap: 6px;
        align-items: center;
        margin-bottom: 12px;

        & .error__icon {
            width: 26px;
            height: 26px;
        }

        & .error__text--mobile {
            display: none;
        }

        & .error__text {
            display: flex;
            flex-direction: column;
            gap: 0;

            & span {
                color: var(--red);
                font: 400 12px/13px "Inter", sans-serif;
                display: inline-block;
            }
        }
    }

    & .attached-files__item--pdf {
        display: flex;
        flex-direction: row;
        gap: 6px;
        padding: 14px 24px;
        border-radius: 100px;
        border: 1px solid var(--lines);
        background: var(--background);
        max-height: 48px;
        max-width: 180px;

        & .img {
            display: none;
        }

        & .pdf__icon {
            width: 20px;
            height: 20px;

            & svg {
                position: static;
                width: 20px;
                height: 20px;
            }
        }

        & .text {
            font: var(--regular-text);
            color: var(--dark-text);
            padding-right: 10px;
        }

        & .remove-icon {
            width: 16px;
            height: 16px;

            & svg {
                position: static;
            }
        }
    }

    & .messages__footer {
        display: flex;
        flex-direction: column;
        padding: 24px 32px;
        border-top: 1px solid var(--lines);
        width: 676px;
    }

    & .downBlock {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex: 1;
    }

    & .messages__footer--inner {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: end;

        & .field-item--message {
            height: auto;
            width: 100%;
            max-width: 406px;
        }

        & .input-item--message {
            height: auto;
            padding: 14px 20px;
        }

        & .input-item__textarea {
            word-break: break-all;
            height: 18px;
            resize: none;
            overflow-y: auto;
            scrollbar-width: thin;

            &::-webkit-scrollbar {
                width: 5px;
                padding-right: 5px;
            }

            &::-webkit-scrollbar-track {
                background-color: transparent;
                border-radius: 12px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: var(--secondary);
                border-radius: 12px;
            }
        }

        & .input-item--file {
            width: 50px;
            height: 50px;
            min-width: 50px;
            border-radius: 100px;
            padding: 0;
            /*Bug fix - 17.06 - Egor*/
            /*Start*/
            transition: all ease 0.2s;

            &:hover {
                background: var(--secondary);
                transition: all ease 0.2s;
            }
            /*End*/
        }

        & .input-item--file__attach-files {
            width: 50px;
            height: 50px;
            min-width: 50px;
            border-radius: 100px;
            /*Bug fix - 17.06 - Egor*/
            /*Start*/
            transition: all ease 0.2s;
            /*End*/
        }

        & .button__send {
            max-width: 140px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            border-radius: 100px;
            background: var(--primary);
            color: var(--background);
            font: var(--semiblod-title-3);
            /*Bug fix - 17.06 - Egor*/
            /*Start*/
            transition: all ease 0.2s;

            &:hover {
                background: var(--hover);
                transition: all ease 0.2s;
            }
            /*End*/
        }
    }

    & .displayNone {
        display: none;
    }
}

.displayNoneChat {
    display: none;
}

@media (max-width: 1000px) {
    .aChat {
        max-width: calc(100% - 32px);
    }

    .aChat .messages__footer {
        max-width: 100%;
        width: 100%;
    }

    .aChat .aChat__container {
        max-width: 100%;
        width: 100%;

    }
}

@media (max-height: 750px) {

    .aChat {
        max-height: calc(100% - 16px);
    }
    .aChat .aChat__container {
        height: 100%;
    }

    .aChat  .aChat__content {

        height: calc(100% - 70px);
    }


}

@media (max-width: 768px) {

    .achat__icon {
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;

        &:hover, &:active, &:focus {
            background: var(--primary);
        }
    }

    .modal-backdrop {
        /*display: block;*/
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }

    .aChat {
        right: 0;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        max-height: calc(100% - 64px);
        max-width: 100%;
        /*Bug fix - 17.06 - Egor*/
        /*Start*/
        z-index: 1000;
        overflow: hidden;
        /*End*/

        & .aChat__contactList {
            width: 100%;
            overflow: auto;

            &::-webkit-scrollbar {
                width: 5px;
            }

            &::-webkit-scrollbar-track {
                background-color: transparent;
                border-radius: 12px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: var(--secondary);
                border-radius: 12px;
            }
        }

        & .close__button {
            display: none;
        }

        & .aChat__header {
            justify-content: center;
            /*Bug fix - 17.06 - Egor*/
            /*Start*/
            background: var(--background);
            position: relative;

            & .aChat__header--decor {
                position: absolute;
                width: 34px;
                height: 4px;
                background: #E3E4E7;
                top: 8px;
                left: calc(50% - 17px);
                border-radius: 2px;
            }
            /*End*/
        }

        & .aChat__header {
            padding: 28px 15px 16px;

            & .title {
                width: 100%;
                text-align: center;
                font: var(--mobile-title-3);
            }
        }

        & .aChat__header--inner {
            display: flex;
            flex-direction: row;
            gap: 4px;
            width: 100%;
            align-items: center;

            & .button__back {
                transform: rotate(90deg);
            }

            & .contact__name--title {
                display: flex;
                flex-direction: row;
                gap: 8px;
                align-items: center;

                & span {
                    font: var(--mobile-title-4);
                    color: var(--dark-text);
                }
            }
        }

        & .aChat__header--avatar {
            width: 36px;
            min-width: 36px;
            max-width: 36px;
            height: 36px;
            border: var(--border);
            border-radius: 100%;
            overflow: hidden;
            & img {
                min-width: 100%;
                min-height: 100%;
                object-fit: cover;
            }
        }

        & .search__block {
            padding: 20px 15px 15px 15px;
        }

        & .input-item--search {
            & svg {
                order: 1;
            }

            & .input-item__input {
                order: 0;
            }
        }

        & .contactList {
            overflow: visible;
            height: calc(100% - 82px);

            & .item__link {
                margin-right: 0;
            }
        }

        & .messages__footer {
            width: 100%;
        }

        & .messages__footer--inner {
            flex-direction: column;
            /*Bug fix - 17.06 - Egor*/
            /*Start*/
            gap: 16px;
            /*End*/

            & .input-item--message {
                padding: 11px 20px 12px;
            }

            & .input-item__textarea {
                font: var(--mobile-text);
                height: 15px;
            }

            & .input-item--file {
                width: 36px;
                height: 36px;
                min-width: 36px;
                min-height: 36px;
            }

            & .button__send {
                height: 36px;
                max-width: 100%;
                /*Bug fix - 17.06 - Egor*/
                /*Start*/
                font: var(--mobile-title-4);
                /*End*/
            }

            & .field-item--message {
                max-width: 100%;
            }
        }

        & .downBlock {
            width: 100%;
            & .field-item {
                width: 36px;
            }
        }

        & .messages__block {
            /*flex-grow: 1;*/
            flex: revert;
            margin-right: 0;
            padding: 8px 15px 15px 15px;
            justify-content: start;
            margin-top: auto;
            /*margin-bottom: 191px;*/
        }

        & .message {
            padding: 16px;

            & .message__text {
                font: var(--mobile-text);
            }

            & .message__date {
                font: var(--mobile-text);
            }
        }

        & .companion {
            margin: 0 13px 0 0;
        }

        & .user {
            margin: 0 0 0 13px;
        }

        & .aChat__container {
            width: 100%;
            /*height: 100%;*/
            height: calc(100% - 135px);
            background-color: var(--background);
            position: fixed;
            inset: auto 0 0 0;
        }

        & .messages__footer {
            /*position: fixed;*/
            position: static;
            bottom: 0;
            /*margin-top: auto;*/
            border: none;
            box-shadow: 0px 0px 22px 0px #9499A242;
            padding: 16px 15px;
            z-index: 999;
            background: var(--background);
        }

        & .attached-files__item--pdf {
            /*Bug fix - 17.06 - Egor*/
            /*Start*/

            /*padding: 8px;*/
            /*font: var(--mobile-text);*/
            /*align-items: center;*/
            /*max-height: 38px;*/
            /*max-width: 98%;*/
            /*justify-content: space-between;*/
            padding: 12px 24px 13px 24px;
            font: var(--mobile-text);
            align-items: center;
            max-height: 40px;
            max-width: 100%;
            justify-content: space-between;

            & .text {
                font: var(--mobile-text);
            }

            & .pdf__icon {
                display: none;
            }
            /*End*/
        }

        & .attached-files__container {
            align-items: center;
            max-height: 188px;
            gap: 8px;
        }

        & .error {

            & .error__text {
                display: none;
            }

            & .error__text--mobile {
                display: block;

                & span {
                    color: var(--red);
                    font: 400 12px/13px "Inter", sans-serif;
                    display: inline-block;
                }
            }
        }

        & .button--upload > .button__upload-text {
            font: var(--mobile-text);
        }
        & .button--upload > .button__upload-text--secondary {
            font: var(--mobile-text);
        }
        & .displayNone {
            display: none;
        }
    }
}