.hngng-sns {
    margin: 0 auto;
    width: 349px;
    min-height: 91px;
    padding: 0 0 46px;
    box-sizing: border-box;
    border: 1px solid #e6e6e9;
    background: url(https://forumstatic.ru/files/001b/ae/0f/15924.png) no-repeat top, url(https://forumstatic.ru/files/001b/ae/0f/78114.png) no-repeat bottom #b6b6b6;
    border-radius: 30px;
}

.hngng-sns .username {
    font-family: Montserrat;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    height: 12px;
    width: 180px;
    margin: 10px 0 0 75px;
    text-align: left;
    overflow: hidden;
}

.hngng-sns .userpic {
    margin: 7px 0 0 36px;
    position: absolute;
}

.hngng-sns .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e6e6e9;
    object-fit: cover;
    filter: grayscale(30%);
    opacity: .9;
}

.hngng-sns .main {
    background: #fff;
    padding: 15px;
    width: 100%;
    margin: 20px 0 0;
    box-sizing: border-box;
    max-height: 520px;
    overflow-y: auto;
}

.hngng-sns .main::-webkit-scrollbar {
    width: 3px;
    background: rgb(248, 248, 248);
}

.hngng-sns .main::-webkit-scrollbar-thumb {
    width: 3px;
    background: #c8c8c8;
}

.hngng-sns .msg {
    font-family: Montserrat;
    font-size: 10px;
    color: #c5c5c5;
    display: flex;
    font-weight: 600;
}

.hngng-sns .msg:not(:first-child) {
    margin-top: 15px;
}

.hngng-sns-right .msg {
    flex-direction: row-reverse;
}

.hngng-sns-left .msg__content {
    display: flex;
    flex-wrap: wrap;
}

.hngng-sns-right .msg__content {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: end;
    -webkit-justify-content: end;
    width: 90%;
}

.hngng-sns .msg__content>*:not(:first-child) {
    margin-top: 7px;
}

.hngng-sns-left .msg__userpic {
    margin: 0 10px 0 0;
}

.hngng-sns-right .msg__userpic {
    margin: 0 0 0 10px;
}

.hngng-sns .msg__text,
.hngng-sns .msg__voice {
    background: #f8f8f8;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 10px;
    width: fit-content;
}

.hngng-sns .msg__text img {
    max-width: 11px !important;
    max-height: 11px !important;
}

.hngng-sns .last-call .msg__text {
    padding-right: 25px;
    text-transform: uppercase;
    position: relative;
}

.hngng-sns .last-call .msg__text::after {
    content: '\f095';
    position: absolute;
    margin: -1px 0 0 4px;
    font: var(--fa-font-solid);
    font-size: 14px;
}

.hngng-sns .voice .msg__text::before {
    content: '';
    background: url(https://forumstatic.ru/files/001b/ae/0f/84534.png) left repeat-x;
    display: block;
    height: 25px;
    width: 200px;
    opacity: .7;
}

.hngng-sns details {
    width: 200px;
    margin: 3px 0 0;
}

.hngng-sns details[open] summary {
    margin: 0 0 3px;
}

.hngng-sns details summary {
    text-transform: uppercase;
}

.hngng-sns .msg__time {
    text-align: left;
    width: 100%;
    margin: 2px 0 0 5px !important;
    position: relative;
}

.hngng-sns-right .msg__time {
    text-align: right;
    width: 100%;
    margin: 2px 17px 0 0 !important;
}

.hngng-sns .msg__time::after {
    content: '\f560';
    width: 10px;
    height: 10px;
    position: absolute;
    margin: 1px 0 0 3px;
    font: var(--fa-font-solid);
    color: #dccdbd;
}

.hngng-sns .last-call .msg__time::after {
    content: '\f060';
    rotate: -45deg;
    margin: 3px 0 0 3px;
}


.hngng-sns .msg__picture {
    width: 100%;
}

.hngng-sns-right .msg__picture {
    text-align: right;
}

.hngng-sns .msg__picture img {
    max-width: 80%;
    border-radius: 7px;
    grid-area: pic;
    border: 1px solid #e6e6e9;
}