/* vkify16 overrides for the new messenger */

/* Theme variables */
body {
    --common-hover: var(--button-background-color);
    --common-2: var(--module-background-color);
    --bg-page: var(--module-background-color);
    --bg-slightly: var(--module-header-background-color);
    --bg-slightly-2: var(--button-background-color);
    --bg-selected-mid: var(--module-background-color--secondary);
    --bg-slightly-border: var(--border-color);
    --bg-hover: color-mix(in srgb, var(--text-color) 16%, var(--transparent));
    --text: var(--text-color);
    --text-2: var(--muted-text-color-2);
    --text-rev: var(--accent-text-color);
    --brand: var(--accent-color);
    --brand-l-1: var(--accent-color--hover);
    --brand-bg: var(--accent-text-color);
    --nobold: var(--muted-text-color);
    --profile-link: var(--link-color);
    --link: var(--link-color);
    --color-text: var(--text-color);
    --table-hover: var(--module-background-color--secondary);
    --table-border: var(--border-color);
    --summary: var(--muted-text-color-2);
    --error-bg: var(--message-warning-background);
    --cinema: var(--muted-text-color-2);
    --post-head: var(--muted-text-color);
    --unread: color-mix(in srgb, var(--muted-text-color) 20%, var(--transparent));
    --unread-mark: var(--message-warning-border);

    --vk-im-hover: #f5f7fa;
    --vk-im-input-bg: #fafbfc;
    --vk-im-divider: #e7e8ec;
    --vk-im-bubble: #f0f2f5;
    --vk-im-bubble-hover: #e9edf2;
    --vk-im-unread-bg: #edf0f5;
    --vk-im-badge: var(--accent-color-2);
    --vk-im-badge-muted: #b2b7c2;
    --vk-im-date: #777e8c;
    --vk-im-who: #8b939b;
    --vk-im-gap: #edeef0;
    --vk-im-shadow: #e3e4e8;
    --vk-im-time: hsla(220, 8%, 51%, .6);
    --vk-im-attach-color: #4a6f97;
    --vk-im-preview-strong: #4e5966;
    --vk-im-editing-bg: color-mix(in srgb, #e6a028 10%, transparent);
    --vk-im-online: #8ac176;
    --vk-im-hl-bg: #e7edf2;
    --vk-im-reply-hover: #a3bbd6;
    --vk-im-back: #818d99;
    --vk-im-back-hover: #707d8c;
    --vk-im-icon: #99a2ad;
    --vk-im-icon-blue: #5c9ce6;
    --vk-im-icon-green: #4bb34b;
    --vk-im-icon-red: #e64646;
    --vk-im-danger: #cb4f4f;
    --vk-im-empty: #929eb0;
}

html:has(.body_im),body.body_im,.body_im .layout {
    height: 100dvh;
    max-height: 100dvh;
}

.body_im .layout {
    position: relative;
}

body.body_im .page_body {
	position: fixed;
	top: calc(var(--header-height) + 15px);
	margin: 0;
	height: calc(100dvh - var(--header-height));
	max-height: calc(100dvh - var(--header-height));
	float: none;
	margin-left: 164px !important;
}

/* ==========================================================================
   Page layout & scroll model
   ========================================================================== */

/* Classic mode is a flex row; history scrolls inside .messenger-app--messages. */
#im_container.at_page {
    --messenger-width: calc(var(--page-width) - var(--sidebar-width, 245px));
    margin: 0;
    width: 100%;
    position: relative;
    height: calc(100dvh - var(--header-height) + 15px);
    max-height: calc(100dvh - var(--header-height) + 15px);
}

#im_container.at_page:not(.compact) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
}

#im_container.at_page:not(.compact) #im_page_tabs {
    order: 2;
    flex: 0 0 auto;
    width: 230px;
    min-width: 0;
    max-height: calc(100vh - var(--header-height) - 15px);
    max-height: calc(100dvh - var(--header-height) - 15px);
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    padding: 1px;
}

#im_container.at_page:not(.compact) #im_page_tabs::-webkit-scrollbar {
    display: none;
}

#im_container.at_page:not(.compact) #im_page_containers {
    background-color: var(--module-background-color);
    border-radius: var(--module-border-radius);
    width: var(--messenger-width);
    box-shadow: 0 1px 0 0 var(--shadow-bottom-color), 0 0 0 1px var(--shadow-outline-color);
    border: 0 !important;
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

/* .messenger-app--messages is upstream's internal scroll container. */
#im_container.at_page #im_page_containers {
    height: calc(100vh - var(--header-height) - 15px);
    height: calc(100dvh - var(--header-height) - 15px);
}

/* Page scrolls instead of clipping the input bar if height math is off. */
#im_container.at_page .im_page.page-other {
    height: calc(100dvh - var(--header-height) - 15px);
    display: flex;
    flex-direction: column;
    scrollbar-color: var(--border-color-3) var(--module-background-color--secondary);
    width: var(--messenger-width);
}

#im_container.at_page .im_page:not(.hidden) {
    height: calc(100dvh - var(--header-height) - 15px);
    min-height: calc(100dvh - var(--header-height) - 15px);
}

/* .crp-list clips long lists unless its parent is height-constrained. */
#im_container.at_page:not(.compact) .im_page.page-conversations {
    height: calc(100vh - var(--header-height) - 15px);
    height: calc(100dvh - var(--header-height) - 15px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#im_container.at_page #chat-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#im_container.at_page #chat-page {
    box-sizing: border-box;
}

.messenger-app {
    background-color: var(--module-background-color);
    border-color: var(--border-color);
    border-radius: var(--module-border-radius);
    width: 100%;
}

.messenger-app--messages {
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
}

.messenger-app--messages::-webkit-scrollbar-track {
    background: var(--module-background-color--secondary);
}

.messenger-app--messages::-webkit-scrollbar-thumb {
    background: var(--border-color-3);
}

.messenger-app--messages::-webkit-scrollbar-thumb:hover {
    background: var(--border-color-3);
}

.messenger-app--tabbar-wrap {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.im_page_loader {
    flex-direction: column;
    padding: 70px !important;
    text-align: center;
    font-size: 14px;
}

.im_page_loader .loader_text {
    margin-top: 10px;
}
.im_load_container:not(.page_block) .pr {
    display: none;
}

body.body_im .page_header {
    z-index: 100;
}
body.body_im .sidebar {
    top: 0;
    z-index: 10;
}
body:has(#im_container.at_page) .sidebar {
    scrollbar-width: none;
}
body:has(#im_container.at_page) .sidebar::-webkit-scrollbar {
    display: none;
}

/* Back-to-top never activates on IM pages (no window scroll). */
body.body_im .toTop {
    display: none;
}

html:has(.body_im),
.body_im .layout {
    overflow: hidden !important;
}

body.body_im_modern {
    --layout-width: 1106px;
}

body.vkify-force-classic label:has(> input#im\.modern_mode) {
    display: none !important;
}

/* ==========================================================================
   Chat header
   ========================================================================== */

.messenger-app--header {
    background-color: var(--module-background-color);
    min-height: 50px;
    border-bottom: 1px solid var(--border-color);
    width: var(--messenger-width);
    z-index: 3;
}

.messenger-app--header-wrap {
    position: relative;
    width: 100%;
    z-index: 11;
}

.messenger-app--header-wrap .messenger-app--header {
    position: relative;
    top: auto;
    width: 100%;
}

.messenger-app--header--back,
.messenger-app-header--actions {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    height: 50px;
    display: flex;
    align-items: center;
    z-index: 1;
}

.messenger-app--header--back {
    left: 0;
}

.messenger-app-header--actions {
    right: 0;
    justify-content: flex-end;
    gap: 4px;
    padding-right: 15px;
}

.messenger-app--header--back:hover {
    background: linear-gradient(to right, var(--module-background-color--secondary), var(--transparent));
}

.messenger-app--header--back a {
    cursor: pointer;
    display: block;
    width: 100%;
    height: 19px;
    background-color: var(--transparent);
    color: var(--vk-im-back);
    font-size: 14px;
    line-height: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 14px 20px 15px 36px;
    text-decoration: none !important;
}

.messenger-app--header--back a:hover {
    color: var(--vk-im-back-hover);
}

.messenger-app--header--info {
    width: 70%;
    box-sizing: border-box;
    padding: 9px;
    text-align: center;
    margin: 0 auto;
}

.messenger-app--header--info .messenger-app--header--name,
.messenger-app--header--info .messenger-app--header--online {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.messenger-app--header--name {
    font-weight: 500;
    font-size: 15px;
}

.messenger-app--header--name a {
    color: var(--text-color);
}

.messenger-app--header--online {
    color: var(--muted-text-color);
    font-size: 13px;
}

.messenger-app--header--ava {
    position: relative;
    flex: 0 0 auto;
}

.messenger-app--header--ava img {
    height: 30px;
    width: 30px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

/* group-chat avatar mosaics: the layout comes from stock messages.css;
   only the header size is themed. */
.messenger-app--header--ava .chat_table_avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.messenger-app--header--ava .messenger-app--header--online {
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background-color: var(--success-color);
    border: 2px solid var(--module-background-color);
    right: -2px;
    bottom: 0;
    position: absolute;
}

.messenger-app-header--more-actions--trigger {
    height: 48px;
    width: 48px;
    flex: 0 0 auto;
    background: url(../icons/post_more.png) no-repeat center center;
    cursor: pointer;
}

#profile_actions_tooltip .im-action {
    padding-left: 0;
    vertical-align: middle;
}

#profile_actions_tooltip .im-action::before {
    content: "";
    width: 20px;
    height: 15px;
    background: url(../icons/im_actions.png) no-repeat 5px -184px;
    display: inline-block;
    padding-left: 15px;
    opacity: .7;
    vertical-align: middle;
}

#profile_actions_tooltip .im-action.im-action_invite::before { background-position: 5px -114px; margin-top: -2px; }
#profile_actions_tooltip .im-action.im-action_media::before { background-position: 5px -165px; }
#profile_actions_tooltip .im-action.im-action_search::before { background-position: 5px -184px; }
#profile_actions_tooltip .im-action.im-action_mute::before { background-position: 5px -203px; }
#profile_actions_tooltip .im-action.im-action_unmute::before { background-position: 5px -220px; }
#profile_actions_tooltip .im-action.im-action_clear::before { background-position: 5px -253px; margin-top: -4px; }
#profile_actions_tooltip .im-action.im-action_leave::before { background-position: 5px -360px; margin-top: -2px; }
#profile_actions_tooltip .im-action.im-action_return::before { background-position: 5px -343px; margin-top: -3px; }
#profile_actions_tooltip .im-action.im-action_block::before { background-position: 5px -306px; }
#profile_actions_tooltip .im-action.im-action_unblock::before { background-position: 5px -405px; margin-top: -3px; }
#profile_actions_tooltip .im-action.im-action_none::before { background: none; }

#profile_actions_tooltip .im-action:hover::before {
    opacity: 1;
}

#im_container.compact .messenger-app--header.messages--peers-header-peer-name,
.messenger-app--header.messages--peers-header-peer-name {
    position: relative;
    top: auto;
    width: auto;
    left: auto;
    right: auto;
    background: var(--module-background-color);
    display: block;
    gap: 0!important;
}

/* Pinned message bar */
.messenger-pinned-bar {
    padding: 8px 17px 8px 43px;
    border-bottom: 1px solid var(--border-color);
    line-height: 13.5px;
    background: var(--module-background-color);
}

.messenger-pinned-bar:hover {
    background: var(--module-background-color);
}

.messenger-pinned-bar:before {
    position: absolute;
    bottom: 19px;
    left: 21px;
    width: 12px;
    height: 12px;
    background: var(--muted-text-color-3);
    -webkit-mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M11.8%204.3l-4-4c-.1-.1-.2-.1-.3%200%200%200%200%20.1-.1.1l-.4%201.6-.2.2c-1.2%201.2-2.7%201.8-4.3%201.8h-2c-.1%200-.2.1-.2.2s0%20.1.1.1l3%203-2.9%202.9c-.4.4-.4%201%200%201.4s1%20.4%201.4%200l2.9-2.9%202.9%202.9c.1.1.2.1.3%200l.1-.1v-2c0-1.6.6-3.1%201.8-4.3l.1-.2%201.7-.4c.1%200%20.1-.1.1-.3z%22%2F%3E%3C%2Fsvg%3E') no-repeat;
    mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M11.8%204.3l-4-4c-.1-.1-.2-.1-.3%200%200%200%200%20.1-.1.1l-.4%201.6-.2.2c-1.2%201.2-2.7%201.8-4.3%201.8h-2c-.1%200-.2.1-.2.2s0%20.1.1.1l3%203-2.9%202.9c-.4.4-.4%201%200%201.4s1%20.4%201.4%200l2.9-2.9%202.9%202.9c.1.1.2.1.3%200l.1-.1v-2c0-1.6.6-3.1%201.8-4.3l.1-.2%201.7-.4c.1%200%20.1-.1.1-.3z%22%2F%3E%3C%2Fsvg%3E') no-repeat;
    opacity: .7;
    content: '';
}

.messenger-pinned-bar:after {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 4px;
    margin-top: 1px;
    pointer-events: none;
    background: -o-linear-gradient(bottom, var(--transparent), color-mix(in srgb, var(--text-color) 3%, var(--transparent)) 75%, color-mix(in srgb, var(--text-color) 6%, var(--transparent)));
    background: linear-gradient(0deg, var(--transparent), color-mix(in srgb, var(--text-color) 3%, var(--transparent)) 75%, color-mix(in srgb, var(--text-color) 6%, var(--transparent)));
    content: '';
}

.at_page:not(.compact) .messenger-pinned-bar {
    padding-right: 12px;
    padding-left: 36px;
}

.at_page:not(.compact) .messenger-pinned-bar:before {
    left: 14px;
}

#im_container.compact .messages--peers-header-wrap .messenger-pinned-bar,
#im_container.compact .messenger-app--messages {
    width: var(--messenger-width);
}

/* VK modern */
body:not(.im_mobile) #im_container.compact .messenger-app--header.messages--peers-header-peer-name {
    display: flex;
    align-items: center;
    height: 48px;
    min-height: 0;
    padding: 0 20px;
    box-sizing: border-box;
}

body:not(.im_mobile) #im_container.compact .messenger-app--header--back {
    display: none;
}

body:not(.im_mobile) #im_container.compact .messenger-app--header--info {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
    text-align: left;
}

body:not(.im_mobile) #im_container.compact .messenger-app--header--info .messenger-app--header--name,
body:not(.im_mobile) #im_container.compact .messenger-app--header--info .messenger-app--header--online {
    display: inline-block;
    width: auto;
}

body:not(.im_mobile) #im_container.compact .messenger-app--header--info .messenger-app--header--name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 14px;
}

body:not(.im_mobile) #im_container.compact .messenger-app--header--info .messenger-app--header--online {
    flex: 0 0 auto;
    margin-left: 8px;
}

body:not(.im_mobile) #im_container.compact .messenger-app-header--actions {
    position: static;
    flex: 0 0 auto;
    width: auto;
    height: 48px;
    gap: 0;
    padding-right: 0;
    margin-left: 15px;
}

body:not(.im_mobile) #im_container.compact .messenger-app-header--more-actions--trigger {
    width: 40px;
}

/* VK shares this typography across modes; only the gutter differs in classic. */
body:not(.im_mobile) #im_container .messenger-pinned-bar {
    height: 51px;
    font-size: 12.5px;
    line-height: 17px;
}

body:not(.im_mobile) #im_container .messenger-pinned-bar--title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--link-color);
}

body:not(.im_mobile) #im_container .messenger-pinned-bar--text {
    font-size: 13px;
}

body:not(.im_mobile) #im_container .messenger-pinned-bar--text b {
    font-weight: 700;
    color: var(--link-color);
}

body:not(.im_mobile) #im_container .messenger-pinned-bar--close {
    width: 24px;
    height: 24px;
    margin: 6px;
    opacity: .7;
}

body:not(.im_mobile) #im_container .messenger-pinned-bar--close:hover {
    opacity: 1;
}

/* VK's selection bar lives inside the 48px header. */
body:not(.im_mobile) #im_container.compact .messages--actions {
    height: 48px;
    padding: 0 12px 0 0;
    top: 0;
    width: var(--messenger-width);
}

body:not(.im_mobile) #im_container.compact .messages--actions .message-tab.message-tab-counter a {
    font-weight: 500;
}

/* Message selection actions */
.messages--actions,
#im_container.compact .messages--actions {
    z-index: 11;
    align-items: center;
    height: 50px;
    background: var(--module-background-color);
    border-bottom: 1px solid var(--border-color);
    padding: 8px;
    line-height: 0;
}

.messages--actions .message-tab,
#im_container.compact .messages--actions .message-tab,
.messages--actions .message-tab.message-tab-counter {
    background: none;
    display: inline-block;
    padding: 0;
    font-weight: normal;
}

.messages--actions>div {
    display: flex;
    flex-direction: row-reverse;
}

.messages--actions .message-tab a {
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    border-radius: var(--button-border-radius);
    padding: 7px 16px 8px;
    font-size: 12.5px;
    font-family: var(--font-family);
    border: 0;
    min-height: 30px;
    line-height: 15px;
    box-sizing: border-box;
    user-select: none;
    font-weight: normal;
}

.messages--actions .message-tab a:hover {
    background-color: var(--accent-color--hover);
    color: var(--accent-text-color);
    text-decoration: none;
}

.messages--actions .message-tab.message-tab-counter a {
    background-color: var(--transparent);
    color: var(--text-color);
    font-size: 13px;
    padding: 10px;
    border-radius: 0;
}

.messages--actions .message-tab.message-tab-counter a:after {
    content: '';
    background: url(../icons/cross.png) center no-repeat;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 0 -1px 7px;
    opacity: .7;
}

.messages--actions .message-tab.message-tab-counter a:hover:after {
    opacity: 1;
}

.messages--actions>div .message-tab {
    margin-left: 6px;
    border: 0!important;
}

body:not(.im_mobile) .messages--actions {
    display: flex;
    justify-content: space-between;
    height: 50px;
    padding: 0 12px 0 0;
    border-bottom: 1px solid var(--vk-im-divider);
    font-size: 13px;
    line-height: 18px;
    z-index: 12;
}

body:not(.im_mobile) .messages--actions>div {
    flex-direction: row;
    align-items: center;
    min-width: 0;
}

body:not(.im_mobile) .messages--actions>div .message-tab {
    margin-left: 0;
}

body:not(.im_mobile) .messages--actions .message-tab.message-tab-counter a {
    display: flex;
    align-items: center;
    padding: 15px 0 15px 20px;
    background: none;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    cursor: pointer;
}

body:not(.im_mobile) .messages--actions .message-tab.message-tab-counter a:after {
    width: 24px;
    height: 24px;
    margin: 0 0 -1px;
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20fill%3D%22%23828A99%22%20d%3D%22M6.4%205l3.3-3.3c.4-.4.4-1%200-1.4s-1-.4-1.4%200l-3.3%203.3-3.3-3.3c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l3.3%203.3-3.3%203.3c-.4.4-.4%201%200%201.4.2.2.4.3.7.3s.5-.1.7-.3l3.3-3.3%203.3%203.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1%200-1.4l-3.3-3.3z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    opacity: .6;
}

body:not(.im_mobile) .messages--actions .message-tab.message-tab-counter a:hover:after {
    opacity: 1;
}

body:not(.im_mobile) .messages--actions .message-tab--delete a,
body:not(.im_mobile) .messages--actions .message-tab--pin a,
body:not(.im_mobile) .messages--actions .message-tab--unpin a,
body:not(.im_mobile) .messages--actions .message-tab--report a,
body:not(.im_mobile) .messages--actions .message-tab--viewers a {
    display: block;
    width: 36px;
    min-height: 0;
    height: 26px;
    padding: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background-color: transparent;
    background-position: 50%;
    background-repeat: no-repeat;
    font-size: 0;
    line-height: 0;
    opacity: .7;
    cursor: pointer;
}

body:not(.im_mobile) .messages--actions .message-tab--delete a:hover,
body:not(.im_mobile) .messages--actions .message-tab--pin a:hover,
body:not(.im_mobile) .messages--actions .message-tab--unpin a:hover,
body:not(.im_mobile) .messages--actions .message-tab--report a:hover,
body:not(.im_mobile) .messages--actions .message-tab--viewers a:hover {
    background-color: transparent;
    opacity: 1;
}

body:not(.im_mobile) .messages--actions .message-tab--delete a {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%3E%3Cpath%20fill%3D%22%23828A99%22%20d%3D%22M2%2015c0%201.1.9%202%202%202h8c1.1%200%202-.9%202-2v-10h-12v10zm8-7c0-.6.4-1%201-1s1%20.4%201%201v6c0%20.6-.4%201-1%201s-1-.4-1-1v-6zm-3%200c0-.6.4-1%201-1s1%20.4%201%201v6c0%20.6-.4%201-1%201s-1-.4-1-1v-6zm-3%200c0-.6.4-1%201-1s1%20.4%201%201v6c0%20.6-.4%201-1%201s-1-.4-1-1v-6zM15%202h-5v-1c0-.6-.4-1-1-1h-2c-.6%200-1%20.4-1%201v1h-5c-.6%200-1%20.4-1%201s.4%201%201%201h14c.6%200%201-.4%201-1s-.4-1-1-1z%22%2F%3E%3C%2Fsvg%3E');
}

body:not(.im_mobile) .messages--actions .message-tab--pin a {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%3E%3Cpath%20fill%3D%22%23828A99%22%20d%3D%22M14.9%204.7l-4.7-4.7s-.1%200-.2.1c0%200%200%20.1-.1.1l-.4%201.8-.7.7c-1.5%201.5-3.5%202.3-5.6%202.3h-2.7c-.1%200-.2.1-.2.2s0%20.1.1.1l4%204-4%204c-.4.4-.4%201%200%201.4.1.2.3.3.6.3s.5-.1.7-.3l4-4%204%204c.1.1.2.1.3%200l.1-.1v-2.8c0-2.1.8-4.1%202.3-5.6l.7-.7%201.9-.4s0-.2-.1-.4z%22%2F%3E%3C%2Fsvg%3E');
}

body:not(.im_mobile) .messages--actions .message-tab--unpin a {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%3E%3Cpath%20fill%3D%22%236590c7%22%20d%3D%22M14.9%204.7l-4.7-4.7s-.1%200-.2.1c0%200%200%20.1-.1.1l-.4%201.8-.7.7c-1.5%201.5-3.5%202.3-5.6%202.3h-2.7c-.1%200-.2.1-.2.2s0%20.1.1.1l4%204-4%204c-.4.4-.4%201%200%201.4.1.2.3.3.6.3s.5-.1.7-.3l4-4%204%204c.1.1.2.1.3%200l.1-.1v-2.8c0-2.1.8-4.1%202.3-5.6l.7-.7%201.9-.4s0-.2-.1-.4z%22%2F%3E%3C%2Fsvg%3E');
    opacity: 1;
}

body:not(.im_mobile) .messages--actions .message-tab--report a {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23828A99%22%20d%3D%22M4.6%2012.9c.9.7%202.1%201.1%203.4%201.1%203.3%200%206-2.7%206-6%200-1.3-.4-2.5-1.1-3.4l-8.3%208.3zm-1.5-1.5l8.4-8.4c-1-.6-2.2-1-3.5-1-3.3%200-6%202.7-6%206%200%201.3.4%202.5%201.1%203.4zm4.9%204.6c-4.4%200-8-3.6-8-8s3.6-8%208-8%208%203.6%208%208-3.6%208-8%208z%22%2F%3E%3C%2Fsvg%3E');
}

body:not(.im_mobile) .messages--actions .message-tab--viewers a {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2210%22%20viewBox%3D%221%202%2014%2010%22%3E%3Cpath%20fill%3D%22%23828A99%22%20d%3D%22M8%2012C3.8%2012%201%208%201%207%201%206%203.8%202%208%202%2012.2%202%2015%206%2015%207%2015%208%2012.2%2012%208%2012ZM8%2010.5C9.9%2010.5%2011.5%208.9%2011.5%207%2011.5%205.1%209.9%203.5%208%203.5%206.1%203.5%204.5%205.1%204.5%207%204.5%208.9%206.1%2010.5%208%2010.5ZM8%208.6C7.1%208.6%206.4%207.9%206.4%207%206.4%206.1%207.1%205.4%208%205.4%208.9%205.4%209.6%206.1%209.6%207%209.6%207.9%208.9%208.6%208%208.6Z%22%2F%3E%3C%2Fsvg%3E');
}

body:not(.im_mobile) .messages--actions .message-tab--reply a,
body:not(.im_mobile) .messages--actions .message-tab--forward a {
    min-height: 0;
    margin-left: 8px;
    padding: 5px 12px 6px;
    font-size: 12.5px;
    line-height: 15px;
    cursor: pointer;
}

/* ==========================================================================
   Tabs rail (global and peer)
   ========================================================================== */

.at_page:not(.compact) .messenger-app--global-tabs,
body.body_im .at_page:not(.compact) .messenger-app--global-tabs,
body[data-themepack="vkify16"] .at_page:not(.compact) .messages--peers-tabs {
    background-color: var(--module-background-color);
    border-radius: var(--module-border-radius);
    box-shadow: 0 1px 0 0 var(--shadow-bottom-color), 0 0 0 1px var(--shadow-outline-color);
    border: 0 !important;
    width: unset !important;
    display: block;
    margin: 0;
    padding: 6px 0;
    position: static;
    order: 1;
}

.at_page:not(.compact) .messenger-app--global-tabs .tab,
.at_page:not(.compact) .messenger-app--global-tabs #spec-actions a,
.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 32px;
    line-height: 31px;
    padding: 0 5px 0 20px;
    color: var(--link-color);
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    outline: none;
    cursor: pointer;
    margin: 0;
    border-radius: 0;
    gap: 0;
}

.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab {
    display: flex;
    align-items: center;
}

.at_page:not(.compact) .messenger-app--global-tabs .tab:hover,
.at_page:not(.compact) .messenger-app--global-tabs #activetabs,
.at_page:not(.compact) .messenger-app--global-tabs #activetabs:hover,
.at_page:not(.compact) .messenger-app--global-tabs #spec-actions a:hover,
.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab.selected,
.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab:hover {
    text-decoration: none;
    background: var(--module-background-color--secondary);
}

.at_page:not(.compact) .messenger-app--global-tabs #activetabs,
.at_page:not(.compact) .messenger-app--global-tabs #activetabs:hover,
.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab.selected,
.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab.selected:hover {
    color: var(--text-color);
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    padding-left: 18px;
    border-left: 2px solid var(--accent-color-2);
}

.at_page:not(.compact) .messenger-app--global-tabs #spec-actions:before,
.at_page:not(.compact) .messenger-app--global-tabs #spec-actions .tab-divider {
    content: '';
    background: var(--border-color);
    display: block;
    margin: 6px 15px;
    height: 1px;
    color: var(--transparent);
    line-height: 0;
}

body[data-themepack="vkify16"] .at_page:not(.compact) .messages--peers-header-wrap {
    width: auto;
    position: static;
    order: 2;
}

.at_page .cross {
    margin: 0!important;
}

.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab.selected {
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    text-shadow: none;
}

.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab.selected a,
.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab.selected .messages--peers-tab-close {
    color: var(--text-color);
}

.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab a {
    font-size: 13px;
    flex: 1;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab a:hover {
    text-decoration: none;
}

.at_page:not(.compact) .messages--peers-tabs .messages--peers-tab-close {
    padding-left: 6px;
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 10px;
    line-height: 1.2;
    height: unset;
    color: var(--muted-text-color);
}

.messages--peers-tabs .messages--peers-tab.unread .messages--peers-tab-counter,
.unread-in-list {
    margin: 0;
    min-width: 6px;
    height: 18px;
    padding: 0 6px;
    border-radius: 18px;
    box-sizing: border-box;
    background: var(--vk-im-badge);
    color: var(--accent-text-color);
    font-size: 11px;
    font-weight: 500;
    line-height: 19px;
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

/* Stock renders "+N"; VK shows a bare number. */
.messages--peers-tabs .messages--peers-tab.unread .messages--peers-tab-counter::first-letter {
    font-size: 0;
}

.messages--peers-tabs .messages--peers-tab-close .cross {
    background: url(../icons/cross.png) center no-repeat;
}

/* ==========================================================================
   Conversations list
   ========================================================================== */

#conversations-top-buttons {
    background-color: var(--module-background-color);
    padding: 15px;
    position: sticky;
    top: 0;
    z-index: 11;
    margin: 0;
    display: block;
}

#conversations-top-buttons #conversations-search-bar {
    margin: -15px;
}

#conversations-search-bar input[type~="text"].search_input,
.messenger-app--tab-friends .friends-list-top .search_input {
    height: 45px;
    padding: 14px 44px 13px 48px;
    padding-left: 28px !important;
    border: 0;
    border-left: 20px solid var(--transparent);
    background: url(../icons/search_icon.png) no-repeat;
    background-position: 0;
    line-height: 18px;
}

#conversations-top-buttons .button {
    width: 34px;
    height: 34px;
    display: block;
    position: absolute;
    top: 50%;
    z-index: 10;
    margin-top: -16px;
    margin-left: -1px;
    right: 5px;
    padding: 10px;
    min-height: unset;
    min-width: unset;
    text-indent: -9999px;
    color: var(--transparent);
    background-color: var(--transparent) !important;
    background-image: url(../icons/ui_rmenu_icons.png) !important;
    background-repeat: no-repeat;
    background-position: 11px 10px;
    opacity: .5;
    background-clip: content-box;
}

#conversations-top-buttons .button:hover {
    opacity: .9;
}

#conversations-top-buttons .button:first-of-type {
    right: 34px;
    background-image: url(../icons/im_actions.png) !important;
    background-position: 5px -87px;
}

.crp-entry {
    border-color: var(--border-color);
}

.crp-entry--message {
    width: unset;
}

.crp-entry--image,
.crp-entry--image>.chat_table_avatar {
    overflow: hidden;
    border-radius: 50%;
}

.crp-entry--image>img {
    border-radius: 100px;
}

.crp-entry:hover {
    background-color: var(--module-background-color--secondary);
}

.crp-entry .unread {
    width: 395px;
    background: var(--button-background-color--light);
}

.crp-list .conversations_error_page {
    color: var(--muted-text-color)
}

#im_container {
    --crp-h: 71px;
    --crp-pad-l: 20px;
    --crp-pad-r: 15px;
    --crp-ava: 50px;
    --crp-gap: 14px;
    --crp-row-gap: 7px;
    --crp-fs: 13px;
}

#im_container.compact {
    --crp-h: 63px;
    --crp-pad-l: 15px;
    --crp-ava: 46px;
    --crp-gap: 11px;
    --crp-row-gap: 4px;
    --crp-fs: 12.5px;
}

body #im_container.compact .im_page.page-conversations .crp-entry--excess {
    display: flex !important;
}

body #im_container .crp-list {
    border-color: var(--border-color);
    scrollbar-color: color-mix(in srgb, var(--text-color) 20%, var(--transparent)) var(--transparent);
    margin: 0;

    .crp-entry {
        display: grid;
        grid-template-areas:
            "avatar name date"
            "avatar message badge";
        grid-template-columns: var(--crp-ava) minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: var(--crp-gap);
        row-gap: var(--crp-row-gap);
        align-content: center;
        align-items: center;
        height: var(--crp-h);
        min-height: var(--crp-h);
        margin: 0;
        padding: 0 var(--crp-pad-r) 0 var(--crp-pad-l);
        border-bottom: 0;
        box-sizing: border-box;
        background: var(--transparent);

        &:not(:first-of-type)::before {
            content: '';
            position: absolute;
            top: 0;
            left: calc(var(--crp-pad-l) + var(--crp-ava) + var(--crp-gap));
            right: var(--crp-pad-r);
            border-top: 1px solid var(--vk-im-divider);
            pointer-events: none;
        }

        &:hover,
        &.unread {
            background: var(--vk-im-hover);
        }
    }

    .crp-entry--main,
    .crp-entry--info,
    .crp-entry--info-wrap {
        display: contents;
    }

    .crp-entry--info {
        width: auto;
        margin: 0;
    }

    .crp-entry--image {
        grid-area: avatar;
        width: var(--crp-ava);
        height: var(--crp-ava);
        margin: 0;

        >img,
        >.chat_table_avatar {
            border-radius: 50%;
            object-position: center;
        }
    }

    .crp-entry--info a {
        grid-area: name;
        display: block;
        min-width: 0;
        max-height: none;
        font-size: var(--crp-fs);
        line-height: 16px;
        font-weight: 500;
        color: var(--heading-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
    .crp-entry--info a:hover {
        text-decoration: none;
    }

    .crp-entry--info .im-mute-indicator {
        grid-area: name;
        justify-self: end;
        align-self: center;
        margin-right: 2px;
    }

    .crp-entry--excess {
        grid-area: date;
        justify-self: end;
        margin: 0;
        flex-direction: row;
        gap: 0;

        span {
            font-size: 12.5px;
            line-height: 16px;
            color: var(--vk-im-date);
            opacity: .9;
        }

        span:first-child:not(:last-child) {
            display: none;
        }
    }

    .crp-entry .crp-entry--message {
        grid-area: message;
        position: static!important;
        inset: auto!important;
        width: auto!important;
        height: auto!important;
        padding: 0!important;
        min-height: 16px;
        align-self: start;
        border-radius: 3px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .crp-entry .crp-entry--message.unread {
        max-width: 100%;
        padding: 5px 8px;
        background: var(--vk-im-bubble);
        color: var(--muted-text-color-2);
    }

    .crp-entry:hover .crp-entry--message.unread,
    .crp-entry.unread .crp-entry--message.unread {
        background: var(--vk-im-bubble-hover);
    }

    .crp-entry--message---av {
        width: 20px;
        min-width: 20px;
        height: 20px;
        margin-right: 6px;
        border-radius: 50%;

        img {
            width: 20px;
            height: 20px;
            margin: 0;
            border-radius: 50%;
        }
    }

    .crp-entry--message---content {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .crp-entry--message---author {
        flex: 0 1 auto;
        max-width: 45%;
        margin: 0 4px 0 0;
        font-size: var(--crp-fs);
        line-height: 16px;
        font-weight: 400;
        color: var(--vk-im-who);

        &::after {
            content: ':';
        }
    }

    .crp-entry--message---text {
        height: auto;
        margin: 0;
        align-items: center!important;
        font-size: var(--crp-fs);
        line-height: 16px;
        color: var(--muted-text-color-2);

        .conv_prev_attachment_text {
            color: var(--vk-im-attach-color);
        }

        .conv_prev_img {
            width: 16px;
            height: 16px;
            border-radius: 2px;
        }
        
        span {
            vertical-align: center;
        }
    }

    .crp-entry:hover .crp-entry--message---text,
    .crp-entry.unread .crp-entry--message---text {
        color: var(--vk-im-preview-strong);
    }

    .crp-entry .unread-msgs-count {
        grid-area: badge;
        position: static;
        inset: auto;
        align-self: center;
        justify-self: end;
        margin: 0;
        min-width: 6px;
        height: 18px;
        padding: 0 6px;
        border-radius: 18px;
        box-sizing: border-box;
        background: var(--vk-im-badge);
        color: var(--accent-text-color);
        font-size: 11px;
        font-weight: 500;
        line-height: 19px;
        text-align: center;
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;

        /* Stock renders "+N"; VK shows a bare number. */
        &::first-letter {
            font-size: 0;
        }
    }

    .crp-entry:has(.im-mute-indicator) .unread-msgs-count {
        background: var(--vk-im-badge-muted);
    }
}

body #im_container.compact .crp-list .crp-entry--message---av {
    display: none;
}

/* Create group chat */
.messenger-app--tab-friends {
    display: flex;
    flex-direction: column-reverse;
    height: unset;
}

.messenger-app--tab-friends .friends-list-top {
    width: var(--messenger-width);
    box-sizing: border-box;
    padding: 15px!important;
}

.messenger-app--tab-friends .friends-list-side {
    border: 0;
}

.messenger-app--tab-friends .friends-list-top:has(.search_input) {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color)
}

.messenger-app--tab-friends .friends-list-top .search_input {
    margin: -15px;
}

.messenger-app--tab-friends .friends-list .friends-list-item img {
    border-radius: 50%;
}

.friends-list-top>div[style^="display: grid"] {
    display: flex !important;
    flex-direction: column-reverse !important;
}

.messenger-app--tab-friends .friends-list-b {
    height: unset;
}

.friends-list-top #_name {
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messenger-app--tab-friends .friends-list.friends-list-m {
    padding-bottom: 0;
}

.messenger-app--tab-friends .friends-list .friends-list-item {
    padding: 15px 5px 15px 15px;
    margin: 0;
    border-bottom: 1px solid var(--border-color)
}

.messenger-app--tab-friends .friends-list .friends-list-item hr {
    display: none;
}

/* New interface banner */
.im-new-interface-banner {
    background-color: var(--module-background-color);
    border-radius: var(--module-border-radius);
    box-shadow: 0 1px 0 0 var(--shadow-bottom-color), 0 0 0 1px var(--shadow-outline-color);
    border: 0 !important;
    padding: 15px;
    width: 100%;
    margin: 0;
}

.messenger-app--tabbar-wrap .im-new-interface-banner {
    order: 3;
}

.im_page .im-new-interface-banner {
    order: -1;
    width: auto;
    margin: 0;
    border-radius: var(--module-border-radius) var(--module-border-radius) 0 0;
    box-shadow: none;
    border-bottom: 1px solid var(--border-color) !important;
}

.im-new-interface-banner--mascot img {
    transform: none;
    width: 130px;
    height: auto;
}

.im-new-interface-banner--title {
    color: var(--text-color)
}

.im-new-interface-banner--text {
    color: var(--muted-text-color-2);
    font-size: 13px;
    line-height: 18px;
}

/* ==========================================================================
   Messages
   ========================================================================== */

.messenger-app--messages---message {
    display: block;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 0;
    padding: 6px 0 7px;
    transition: background-color 0.1s ease;
}

.messenger-app--messages---message.animated,
.messenger-app--messages .messenger-special-message.animated {
    animation-name: vk-im-target;
}

@keyframes vk-im-target {
    from {
        background-color: var(--vk-im-hl-bg);
    }

    to {
        background-color: transparent;
    }
}

.messenger-app--messages---message:has(+ .messenger-app--messages---message:not(.same-author)) {
    margin-bottom: 4px;
}

.messenger-app--messages---message>.messenger-app--messages---message--wrap {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 0 30px;
}

.messenger-app--messages---message.msg-reply .messenger-app--messages---message--wrap {
    padding-top: 0;
}

.messenger-app--messages---message ._content {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: 100%;
    padding-left: 0 !important;
    line-height: 18px;
    box-sizing: border-box;
    position: relative;
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
}

.messenger-app--messages---message ._content>*:not(._sender):not(.msg-header-right):not(.time):not(.msg-postfix) {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Text shrinks to content so edited/pinned/sending flags can sit inline. */
.messenger-app--messages---message ._content>.text,
.messenger-app--messages---message ._content>.msg-modificators {
    flex: 0 1 auto;
}

/* Lazy-load renders a bare loading_mini.gif; keep it at natural size. */
.messenger-app--messages---message ._content>img[src$="loading_mini.gif"] {
    flex: 0 0 auto;
    width: auto;
    height: auto;
}

/* Bare .time children (fwd modal) share the sender line. */
.messenger-app--messages---message ._content>.time {
    margin-left: 5px;
}

#im_container.compact .messenger-app--messages---message ._content {
    width: auto !important;
}

/* Upstream content width is 430px in non-compact desktop. */
@media (min-width: 769px) {
    #im_container:not(.compact) .messenger-app--messages---message ._content {
        width: 430px !important;
    }

    /* Back-link arrow; mobile uses a sprite instead. Masking the anchor
       itself would clip the label, so the chevron goes on a pseudo. */
    .messenger-app--header--back a {
        position: relative;
    }

    .messenger-app--header--back a::before {
        content: '';
        position: absolute;
        top: 16px;
        left: 15px;
        width: 9px;
        height: 16px;
        background-color: #828A99;
        -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgOSAxNiI+PHBhdGggZmlsbD0iYmxhY2siIGQ9Ik04IDE1LjljLS4yIDAtLjQtLjEtLjYtLjNsLTctN2MtLjMtLjMtLjMtLjkgMC0xLjJsNy03Yy4zLS4zLjktLjMgMS4yIDAgLjMuMy4zLjkgMCAxLjJsLTYuNCA2LjQgNi40IDYuNGMuMy4zLjMuOSAwIDEuMi0uMi4yLS40LjMtLjYuM3oiIG9wYWNpdHk9Ii43Ii8+PC9zdmc+") no-repeat;
        mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgOSAxNiI+PHBhdGggZmlsbD0iYmxhY2siIGQ9Ik04IDE1LjljLS4yIDAtLjQtLjEtLjYtLjNsLTctN2MtLjMtLjMtLjMtLjkgMC0xLjJsNy03Yy4zLS4zLjktLjMgMS4yIDAgLjMuMy4zLjkgMCAxLjJsLTYuNCA2LjQgNi40IDYuNGMuMy4zLjMuOSAwIDEuMi0uMi4yLS40LjMtLjYuM3oiIG9wYWNpdHk9Ii43Ii8+PC9zdmc+") no-repeat;
    }
}

/* Avatar */
.messenger-app--messages---message ._avatar {
    min-width: 36px;
    height: 36px;
    margin-top: 0;
    margin-right: 12px;
    flex: 0 0 36px;
    position: relative;
    cursor: pointer;
}

.messenger-app--messages---message .ava {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: 0;
}

.messenger-app--messages---message.same-author ._avatar .ava {
    display: none !important;
}

.messenger-app--messages---message.same-author ._avatar {
    display: block;
    height: 0px;
    line-height: 0;
    margin-top: 10px;
}

/* Sender name & timestamp */
.messenger-app--messages---message ._sender {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--post-action-color) !important;
    line-height: 18px;
    text-decoration: none;
    vertical-align: baseline;
    order: -2;
}

.messenger-app--messages---message ._sender:hover {
    text-decoration: underline;
}

.messenger-app--messages---message.same-author ._sender {
    display: none !important;
}

.messenger-app--messages---message .msg-header-right {
    order: -1;
    gap: 4px;
    height: auto;
    margin: 0 0 0 5px;
}

.messenger-app--messages---message.same-author .msg-header-right {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

/* In-flow so .time and .actions-2 sit side by side on hover. */
.messenger-app--messages---message.same-author .actions-2 {
    position: static;
    order: 1;
    margin-top: 0;
}

.messenger-app--messages---message .time {
    margin-left: 0;
    font-size: 12px;
    color: var(--vk-im-time);
    opacity: 1;
    line-height: 18px;
    height: auto;
    transition: opacity 0.15s ease;
    float: none;
    white-space: nowrap;
}

.messenger-app--messages---message .time span {
    color: inherit;
    font-size: inherit;
}

.messenger-app--messages---message.same-author .time {
    float: none;
    position: static;
}

/* Message body */
.messenger-app--messages---message .normalText,
.messenger-app--messages---message .text {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-color);
    margin: 0;
    word-break: break-word;
    word-wrap: break-word;
}

.messenger-app--messages---message .text a {
    color: var(--link-color);
    text-decoration: none;
}

.messenger-app--messages---message .text a:hover {
    text-decoration: underline;
}

/* Unread, selected & editing highlight */
.messenger-app--messages---message.unread,
.messenger-app--messages---message.msg-selected,
.messenger-app--messages---message.msg-editing-this {
    background-color: var(--vk-im-unread-bg) !important;
    position: relative;
}

.messenger-app--messages---message.msg-editing-this {
    background: var(--vk-im-editing-bg) !important;
    box-shadow: none;
    border-radius: 4px;
}

.messenger-app--messages---message.msg-replying-to {
    background: color-mix(in srgb, var(--accent-color-2) 8%, var(--transparent)) !important;
    box-shadow: none;
    border-radius: 4px;
}

.messenger-app--messages---message.unread:first-child,
.messenger-app--messages---message:not(.unread)+.messenger-app--messages---message.unread,
.messenger-app--messages---message.msg-selected:first-child,
.messenger-app--messages---message:not(.msg-selected)+.messenger-app--messages---message.msg-selected {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.messenger-app--messages---message.unread+.messenger-app--messages---message.unread,
.messenger-app--messages---message.msg-selected+.messenger-app--messages---message.msg-selected {
    border-radius: 0;
    margin-top: 0;
}

.messenger-app--messages---message.unread:last-child,
.messenger-app--messages---message.msg-selected:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#im_container:not(.compact) .messenger-app--messages---message:not(.unread)+.messenger-app--messages---message.unread:not(.msg-selected),
#im_container:not(.compact) .messenger-app--messages---message.unread:first-child:not(.msg-selected) {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

#im_container:not(.compact) .messenger-app--messages---message.unread:last-child:not(.msg-selected),
#im_container:not(.compact) .messenger-app--messages---message.unread:not(.msg-selected):has(+ .messenger-app--messages---message:not(.unread)) {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* Selection territory & checkbox */
.messenger-app--messages---message .click-territory {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    box-sizing: border-box;
    opacity: 0;
    transition: none;
    cursor: pointer;
    z-index: 3;
}

.messenger-app--messages---message--wrap .checkmark {
    width: 17px;
    height: 17px;
    margin: 0;
    background-image: url(../icons/msg_check.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    transition: opacity 0.15s ease;
}

.messenger-app--messages---message.same-author .checkmark,
.messenger-app--messages---message.same-author .error-checkmark {
    margin: 0;
}

/* VK */
body:not(.im_mobile) #im_container.compact .messenger-app--messages---message>.messenger-app--messages---message--wrap {
    padding-left: 43px;
}

/* Upstream hides the selection gutter in compact; VK keeps it. */
body:not(.im_mobile) #im_container.compact .messenger-app--messages---message .click-territory {
    display: flex !important;
    width: 43px;
}

body:not(.im_mobile) #im_container:not(.compact) .messenger-app--messages---message .click-territory {
    width: 36px;
}

.messenger-app--messages---message.msg-selected .click-territory {
    opacity: 1 !important;
}

.messenger-app--messages---message.msg-selected .checkmark {
    opacity: 1 !important;
}

/* Hover quick actions */
.messenger-app--messages---message .actions-2 {
    position: absolute;
    top: 0;
    right: 0;
    height: 18px;
    min-width: auto;
    gap: 6px;
    transition: opacity 0.15s ease;
}

.messenger-app--messages---message .actions-2>div {
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.12s ease;
}

.messenger-app--messages---message .actions-2 .edit-icon,
.messenger-app--messages---message .actions-2 .pin-icon,
.messenger-app--messages---message .actions-2 .report-icon,
.messenger-app--messages---message .actions-2 .viewers-icon,
.messenger-app--messages---message .actions-2 .reply-icon,
.messenger-app--messages---message .actions-2 .delete-icon {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.55;
    margin:0;
}

.messenger-app--messages---message .actions-2 .edit-icon:hover,
.messenger-app--messages---message .actions-2 .report-icon:hover,
.messenger-app--messages---message .actions-2 .reply-icon:hover {
    opacity: 1;
}

.messenger-app--messages---message .actions-2 .reply-icon {
    background: var(--muted-text-color-3) !important;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20d%3D%22M5.5%202.5L1%207l4.5%204.5V8.5c3.5%200%206%201%207.5%203.5-.5-3.5-2.5-7-7.5-7V2.5z%22%2F%3E%3C%2Fsvg%3E") center no-repeat !important;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20d%3D%22M5.5%202.5L1%207l4.5%204.5V8.5c3.5%200%206%201%207.5%203.5-.5-3.5-2.5-7-7.5-7V2.5z%22%2F%3E%3C%2Fsvg%3E") center no-repeat !important;
}

.messenger-app--messages---message .actions-2 .delete-icon {
    background: var(--muted-text-color-3) !important;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20d%3D%22M3.5%203.5l7%207m0-7l-7%207%22%2F%3E%3C%2Fsvg%3E") center no-repeat !important;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20d%3D%22M3.5%203.5l7%207m0-7l-7%207%22%2F%3E%3C%2Fsvg%3E") center no-repeat !important;
}

.messenger-app--messages---message .actions-2 .star-icon {
    width: 12px !important;
    height: 13px !important;
    background: url(../icons/m_star_small.png) no-repeat 0 0 !important;
    background-size: 12px auto !important;
}

.messenger-app--messages---message.msg-hoverable:hover .actions-2 .star-icon {
    opacity: 0.65;
}

.messenger-app--messages---message.msg-important .actions-2 .star-icon,
.messenger-app--messages---message .actions-2 .star-icon.active {
    background-position: 0 -16px !important;
    opacity: 0.85 !important;
}

.messenger-app--messages---message .actions-2 .edit-icon {
    background: var(--muted-text-color-3) !important;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22black%22%20d%3D%22M7.00723148%2C15.0072315%20L8.99270205%2C16.992702%20L8.48179718%2C17.5036239%20L6.28469369%2C17.9430593%20C6.1334322%2C17.9733127%206.02549234%2C17.8725341%206.05693874%2C17.7152969%20L6.49635944%2C15.5181205%20L7.00723148%2C15.0072315%20Z%20M8.00721489%2C14.0072149%20L15.7096092%2C6.30456502%20C16.1044963%2C5.90966486%2016.7394477%2C5.90651245%2017.1291296%2C6.29620724%20L17.7034045%2C6.87050118%20C18.0987612%2C7.26587108%2018.0893445%2C7.89575796%2017.695047%2C8.29006862%20L9.99268547%2C15.9926855%20L8.00721489%2C14.0072149%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") center no-repeat !important;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22black%22%20d%3D%22M7.00723148%2C15.0072315%20L8.99270205%2C16.992702%20L8.48179718%2C17.5036239%20L6.28469369%2C17.9430593%20C6.1334322%2C17.9733127%206.02549234%2C17.8725341%206.05693874%2C17.7152969%20L6.49635944%2C15.5181205%20L7.00723148%2C15.0072315%20Z%20M8.00721489%2C14.0072149%20L15.7096092%2C6.30456502%20C16.1044963%2C5.90966486%2016.7394477%2C5.90651245%2017.1291296%2C6.29620724%20L17.7034045%2C6.87050118%20C18.0987612%2C7.26587108%2018.0893445%2C7.89575796%2017.695047%2C8.29006862%20L9.99268547%2C15.9926855%20L8.00721489%2C14.0072149%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") center no-repeat !important;
}

.messenger-app--messages---message .actions-2 .pin-icon {
    background: var(--muted-text-color-3) !important;
    -webkit-mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%3E%3Cpath%20d%3D%22M5.3%208.3l-2.9%202.9c-.4.4-1%20.4-1.4%200-.4-.4-.4-1%200-1.4l2.9-2.9-2.9-2.8v-.2c0-.1.1-.2.2-.2h2c1.6%200%203.1-.6%204.2-1.7l.2-.2.4-1.6s0-.1.1-.1c0-.1.1-.1.2%200l3.9%203.9s0%20.1.1.1c0%20.1%200%20.2-.1.2l-1.6.4-.2.2c-1.3%201.1-1.9%202.6-1.9%204.2v2c0%20.1%200%20.1-.1.1-.1.1-.2.1-.3%200l-2.8-2.9z%22%2F%3E%3C%2Fsvg%3E') center no-repeat !important;
    mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%3E%3Cpath%20d%3D%22M5.3%208.3l-2.9%202.9c-.4.4-1%20.4-1.4%200-.4-.4-.4-1%200-1.4l2.9-2.9-2.9-2.8v-.2c0-.1.1-.2.2-.2h2c1.6%200%203.1-.6%204.2-1.7l.2-.2.4-1.6s0-.1.1-.1c0-.1.1-.1.2%200l3.9%203.9s0%20.1.1.1c0%20.1%200%20.2-.1.2l-1.6.4-.2.2c-1.3%201.1-1.9%202.6-1.9%204.2v2c0%20.1%200%20.1-.1.1-.1.1-.2.1-.3%200l-2.8-2.9z%22%2F%3E%3C%2Fsvg%3E') center no-repeat !important;
}

.messenger-app--messages---message.msg-pinned .actions-2 .pin-icon {
    opacity: 0.95;
}

.messenger-app--messages---message .actions-2 .report-icon {
    background: var(--muted-text-color-3) !important;
    -webkit-mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.6%2012.9c.9.7%202.1%201.1%203.4%201.1%203.3%200%206-2.7%206-6%200-1.3-.4-2.5-1.1-3.4l-8.3%208.3zm-1.5-1.5l8.4-8.4c-1-.6-2.2-1-3.5-1-3.3%200-6%202.7-6%206%200%201.3.4%202.5%201.1%203.4zm4.9%204.6c-4.4%200-8-3.6-8-8s3.6-8%208-8%208%203.6%208%208-3.6%208-8%208z%22%2F%3E%3C%2Fsvg%3E') center no-repeat !important;
    mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.6%2012.9c.9.7%202.1%201.1%203.4%201.1%203.3%200%206-2.7%206-6%200-1.3-.4-2.5-1.1-3.4l-8.3%208.3zm-1.5-1.5l8.4-8.4c-1-.6-2.2-1-3.5-1-3.3%200-6%202.7-6%206%200%201.3.4%202.5%201.1%203.4zm4.9%204.6c-4.4%200-8-3.6-8-8s3.6-8%208-8%208%203.6%208%208-3.6%208-8%208z%22%2F%3E%3C%2Fsvg%3E') center no-repeat !important;
    -webkit-mask-size: 10px !important;
    mask-size: 10px !important;
}

.messenger-app--messages---message .actions-2 .viewers-icon {
    background: var(--muted-text-color-3) !important;
    -webkit-mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%224.2%22%20r%3D%222.8%22%2F%3E%3Cpath%20d%3D%22M8%208.5c-1.8%200-5.5.7-5.5%203.1v.7c0%20.4.3.7.7.7h9.7c.4%200%20.7-.3.7-.7v-.7c-.1-2.4-3.8-3.1-5.6-3.1z%22%2F%3E%3C%2Fsvg%3E') center no-repeat !important;
    mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%224.2%22%20r%3D%222.8%22%2F%3E%3Cpath%20d%3D%22M8%208.5c-1.8%200-5.5.7-5.5%203.1v.7c0%20.4.3.7.7.7h9.7c.4%200%20.7-.3.7-.7v-.7c-.1-2.4-3.8-3.1-5.6-3.1z%22%2F%3E%3C%2Fsvg%3E') center no-repeat !important;
}

/* Modifiers */
.messenger-app--messages---message .msg-modificators {
    margin: 0;
}

.messenger-app--messages---message .msg-modificators p {
    color: var(--muted-text-color-3);
    font-size: 11px;
    margin: 0;
}

.messenger-app--messages---message.msg-sending .msg-modificators .modificator-sending {
    display: inline;
}

.messenger-app--messages---message:not(.msg-error, .msg-pinned, .msg-sending, .msg-edited, .msg-important) .msg-modificators {
    display: none !important;
}

/* ==========================================================================
   Quotes, replies & forwards
   ========================================================================== */

/* Reply quote: VK's flat im-mess_fwd model — left strip, avatar,
   name over date, text flush-left. */
.messenger-app--messages---message ._content .reply-msg-container {
    margin: 5px 0 7px 3px;
    padding-left: 9px;
    border-left: 2px solid var(--quote-border-color);
    transition: border-color .15s ease;
}

.messenger-app--messages---message ._content .reply-msg-container:hover {
    border-left-color: var(--vk-im-reply-hover);
    background: none;
}

.messenger-app--messages---message ._content .reply-msg-container .reply-msg-header {
    display: none;
}

/* Avatar column beside stacked name/date; markup keeps them as siblings. */
.messenger-app--messages---message ._content .reply-msg-container .reply-msg-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 0;
    margin-bottom: 4px;
    line-height: 15px;
}

.messenger-app--messages---message ._content .reply-msg-container .reply-avatar-link {
    grid-row: 1 / 3;
    align-self: center;
}

.messenger-app--messages---message ._content .reply-msg-container .reply-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.messenger-app--messages---message ._content .reply-msg-container .reply-author-name {
    grid-column: 2;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--post-action-color);
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    justify-self: start;
}

.messenger-app--messages---message ._content .reply-msg-container .reply-date {
    grid-column: 2;
    margin: 0;
    font-size: 12px;
    color: var(--vk-im-time);
    line-height: 14px;
}

.messenger-app--messages---message ._content .reply-msg-container .reply-text {
    font-size: 13px;
    color: var(--text-color);
    line-height: 18px;
}

.messenger-app--messages---message ._content .reply-msg-container .reply-no-text {
    color: var(--muted-text-color-3);
}

.messenger-app--messages---message ._content .reply-msg-container .reply-compact-attach {
    color: var(--muted-text-color-3);
    border-radius: 2px;
    background: color-mix(in srgb, var(--text-color) 4%, var(--transparent));
}

/* Forwarded messages use the same flat im-mess_fwd model as reply quotes. */
.messenger-app--messages---message .fwd-messages-container,
.fwd-modal-content .fwd-messages-container {
    margin-top: 5px;
    margin-bottom: 2px;
    margin-left: 3px;
    padding-left: 9px;
    border-left: 2px solid var(--quote-border-color);
    cursor: default;
}

.messenger-app--messages---message .fwd-messages-count,
.fwd-modal-content .fwd-messages-count {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--muted-text-color);
    margin-bottom: 6px;
}

.messenger-app--messages---message .fwd-message-block,
.fwd-modal-content .fwd-message-block {
    margin-top: 10px;
    margin-bottom: 10px;
}

.messenger-app--messages---message .fwd-message-block:first-of-type,
.fwd-modal-content .fwd-message-block:first-of-type {
    margin-top: 4px;
}

.messenger-app--messages---message .fwd-message-head,
.fwd-modal-content .fwd-message-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.messenger-app--messages---message .fwd-avatar,
.fwd-modal-content .fwd-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.messenger-app--messages---message .fwd-author-info,
.fwd-modal-content .fwd-author-info {
    display: block;
    line-height: 14px;
    overflow: hidden;
}

.messenger-app--messages---message .fwd-author-name,
.fwd-modal-content .fwd-author-name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--post-action-color);
    text-decoration: none;
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.messenger-app--messages---message .fwd-author-name:hover,
.fwd-modal-content .fwd-author-name:hover {
    text-decoration: underline;
}

/* The date drops to a second line, muted. */
.messenger-app--messages---message .fwd-date,
.fwd-modal-content .fwd-date {
    display: block;
    font-size: 12px;
    color: var(--vk-im-time);
    line-height: 14px;
}

.messenger-app--messages---message .fwd-text,
.fwd-modal-content .fwd-text {
    font-size: 13px;
    color: var(--text-color);
    line-height: 18px;
    word-break: break-word;
    margin-top: 4px;
}

.messenger-app--messages---message .msg-attach-wall-card {
    margin: 5px 0 7px 3px;
    padding: 0 0 0 9px;
    border-left: 2px solid var(--quote-border-color);
    border-radius: 0;
    background: none;
    transition: border-color .15s ease;
}

.messenger-app--messages---message .msg-attach-wall-card:hover {
    border-left-color: var(--vk-im-reply-hover);
    background: none;
}

.messenger-app--messages---message .msg-attach-wall-card .wall-card-head {
    gap: 12px;
    margin-bottom: 4px;
}

.messenger-app--messages---message .msg-attach-wall-card .wall-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.messenger-app--messages---message .msg-attach-wall-card .wall-card-author-name {
    font-size: 12.5px;
    color: var(--post-action-color);
    line-height: 15px;
}

.messenger-app--messages---message .msg-attach-wall-card .wall-card-date {
    font-size: 12px;
    color: var(--vk-im-time);
    line-height: 14px;
    margin-top: 3px;
}

.messenger-app--messages---message .msg-attach-wall-card .wall-card-text {
    font-size: 13px;
    color: var(--text-color);
    line-height: 18px;
}

.messenger-app--messages---message .msg-attach-wall-card .wall-card-empty {
    color: var(--muted-text-color-3);
}

/* VK forwards have no "open message" link */
.fwd-open-modal-wrap {
    display: none;
}

.messenger-modal-message {
    padding: 10px 14px;
}

.messenger-modal-message .messenger-app--messages---message {
    padding: 0;
}

.messenger-modal-message .messenger-app--messages---message ._content {
    width: auto !important;
    padding-left: 12px !important;
}

/* Message viewers modal */
.ovk-diag-body .message-viewers-list-wrap {
    margin: 0 -25px;
}
.message-viewers-header {
    padding: 4px 25px 10px;
    border-bottom: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--muted-text-color-2);
}

.message-viewer-row {
    padding: 7px 25px;
    border-bottom: 0;
}

.message-viewer-row:hover {
    background: var(--vk-im-hover);
}

.message-viewer-ava-link {
    margin-right: 12px;
}

.message-viewer-ava {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--module-background-color--secondary);
}

.message-viewer-name {
    font-size: 13px;
    line-height: 15px;
    font-weight: 500;
    color: var(--link-color);
}

.message-viewer-time {
    font-size: 13px;
    line-height: 15px;
    color: var(--muted-text-color);
}

/* Pinned message modal */
.ovk-diag-cont:has(.pinned-message-modal-content) {
    width: 580px !important;
}

.pinned-message-modal-inner {
    gap: 12px;
}

.pinned-message-ava {
    border-radius: 50%;
    background: var(--module-background-color--secondary);
}

.pinned-message-header {
    justify-content: flex-start;
    gap: 5px;
}

.pinned-message-author {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--link-color);
}

.pinned-message-date {
    font-size: 12.5px;
    color: var(--muted-text-color);
}

.pinned-message-text {
    margin-top: 3px;
    font-size: 13px;
    line-height: 17px;
    color: var(--text-color);
}

/* "Закрыть" duplicates the head ×; the real secondary action is styled below */
.ovk-diag-cont:has(.pinned-message-modal-content) .ovk-diag-action > .button:last-child {
    display: none;
}

.ovk-diag-cont:has(.pinned-message-modal-content) .ovk-diag-action > .button:nth-last-child(2) {
    color: var(--link-color);
    background-color: transparent;
}

/* ==========================================================================
   Attachments
   ========================================================================== */

/* Photos & Makima grid */
.msg-media-tile,
.msg-attach-j-photo {
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
}

.msg-attach-j-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s ease;
}

.msg-attach-j-photo:hover img {
    opacity: 0.95;
}

/* Videos & GIFs */
.msg-attach-j-video {
    width: 220px;
    max-width: 100%;
    margin: 4px 0;
}

.compact_video {
    border-radius: 4px;
    overflow: hidden;
    display: block;
}

.compact_video img {
    width: 100%;
    height: auto;
    display: block;
}

.msg-media-tile-video .compact_video .play-button,
.messenger-app--messages---message .msg-attach-wall-card .attachments_b .compact_video .play-button,
.msg-attach-w-gif .docGalleryItem .play-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--video-overlay-background);
    backdrop-filter: blur(2px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.15s ease;
    pointer-events: none;
}

.msg-media-tile-video .compact_video:hover .play-button,
.messenger-app--messages---message .msg-attach-wall-card .attachments_b .compact_video:hover .play-button,
.msg-attach-w-gif .docGalleryItem:hover .play-button {
    background: var(--video-overlay-background-hover);
}

.msg-media-tile-video .compact_video .play-button .play-button-ico
.messenger-app--messages---message .msg-attach-wall-card .attachments_b .compact_video .play-button .play-button-ico,
.msg-attach-w-gif .docGalleryItem .play-button-ico {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: var(--transparent) var(--transparent) var(--transparent) var(--white);
    margin-left: 3px;
}

.msg-media-tile-video .compact_video .length,
.messenger-app--messages---message .msg-attach-wall-card .attachments_b .compact_video .length {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: var(--tooltip-background-color);
    color: var(--white);
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 2px;
    line-height: 1;
}

/* Audio player */
/* Undo stock's IM re-skin of the site player; markup is normalized by audio-normalizer.js. */
.messenger-app--messages---message .audioEmbed.msg-attach-audio-player,
.ovk-attachments-modal-content .audioEmbed.msg-attach-audio-player {
    margin: 0;
    border-radius: 4px;
    background: var(--transparent);
    border: 0;
    transition: background-color 0.15s ease;
}

.messenger-app--messages---message .audioEmbed.msg-attach-audio-player .audioEntryWrapper,
.ovk-attachments-modal-content .audioEmbed.msg-attach-audio-player .audioEntryWrapper,
.fwd-modal-content .audioEmbed.msg-attach-audio-player .audioEntryWrapper {
    grid-template-columns: 0fr 10fr 1fr;
    gap: 10px;
    height: auto;
    padding: 8px 10px;
}

/* IM audios do not have the whitespace between artist and title */
.at_page .audioEntry .tire {
    margin: 0 4px;
}

.messenger-app--messages---message .audioEmbed.msg-attach-audio-player .status,
.messenger-app--messages---message .audioEmbed.msg-attach-audio-player .status .mediaInfo,
.messenger-app--messages---message .audioEmbed.msg-attach-audio-player .status:hover .mediaInfo,
.ovk-attachments-modal-content .audioEmbed.msg-attach-audio-player .status,
.ovk-attachments-modal-content .audioEmbed.msg-attach-audio-player .status .mediaInfo,
.ovk-attachments-modal-content .audioEmbed.msg-attach-audio-player .status:hover .mediaInfo {
    height: unset;
    line-height: 14px;
}

.messenger-app--messages---message .audioEmbed.msg-attach-audio-player .mini_timer,
.ovk-attachments-modal-content .audioEmbed.msg-attach-audio-player .mini_timer {
    flex-direction: column;
    justify-content: normal;
    align-items: normal;
    height: auto;
}

/* Documents */
.messenger-app--messages---message .msg-attach-w-doc .attachment_doc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-color) 2%, var(--transparent));
    border: 1px solid var(--border-color);
    max-width: 440px;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}

.messenger-app--messages---message .msg-attach-w-doc .attachment_doc:hover {
    background: color-mix(in srgb, var(--text-color) 5%, var(--transparent));
}

.messenger-app--messages---message .msg-attach-w-doc .attachment_doc svg {
    width: 18px;
    height: 22px;
    fill: var(--accent-color-2);
    flex-shrink: 0;
}

.messenger-app--messages---message .msg-attach-w-doc .attachment_note_content {
    min-width: 0;
    overflow: hidden;
}

.messenger-app--messages---message .msg-attach-w-doc .attachment_note_name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--link-color);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.messenger-app--messages---message .msg-attach-w-doc .attachment_note_name:hover {
    text-decoration: underline;
}

/* Re-box to 280x190 or stylesheet.css's wall-post rule stretches GIFs. */
.attachments .msg-attach-w-gif .docGalleryItem.embeddable {
    width: 280px;
    height: 190px;
}

/* Stock main.css (not loaded) positions the bottom panel; pin it here. */
.msg-attach-w-gif .docGalleryItem .doc_bottom_panel,
.msg-attach-w-doc-image .docGalleryItem .doc_bottom_panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 6px;
    box-sizing: border-box;
}

.msg-attach-w-gif .docGalleryItem .doc_bottom_panel span,
.msg-attach-w-doc-image .docGalleryItem .doc_bottom_panel span {
    color: var(--white);
    font-size: 10px;
    line-height: 1.4;
}

.msg-attach-w-gif .docGalleryItem .doc_bottom_panel .doc_bottom_panel_name,
.msg-attach-w-doc-image .docGalleryItem .doc_bottom_panel .doc_bottom_panel_name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-attach-w-gif .docGalleryItem .doc_bottom_panel .doc_bottom_panel_size,
.msg-attach-w-doc-image .docGalleryItem .doc_bottom_panel .doc_bottom_panel_size {
    flex-shrink: 0;
}

/* Wall repost card */
/* Deliberately unscoped */
.msg-attach-wall-card {
    max-width: 440px;
    width: 100%;
    margin: 5px 0;
    padding: 8px 10px;
    border-left: 2px solid var(--quote-border-color);
    background: color-mix(in srgb, var(--text-color) 2%, var(--transparent));
    border-radius: 0 4px 4px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.msg-attach-wall-card:hover {
    background: color-mix(in srgb, var(--text-color) 4%, var(--transparent));
}

.msg-attach-wall-card .wall-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.msg-attach-wall-card .wall-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.msg-attach-wall-card .wall-card-author-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--link-color);
    text-decoration: none;
}

.msg-attach-wall-card .wall-card-author-name:hover {
    text-decoration: underline;
}

.msg-attach-wall-card .wall-card-date {
    font-size: 10.5px;
    color: var(--muted-text-color-3);
}

.msg-attach-wall-card .wall-card-text {
    font-size: 12.5px;
    line-height: 17px;
    color: var(--text-color);
    margin: 4px 0;
}

/* Gift card */
.messenger-app--messages---message.msg-gift,
.fc_msg_row.msg-gift {
    background-color: var(--gift-message-background) !important;
    border-radius: 3px;
}
.messenger-app--messages---message.msg-gift.msg-selected {
    background-color: var(--gift-message-background--selected) !important;
    border-radius: 3px;
}
.messenger-app--messages---message.msg-gift .msg-postfix {
    order: -2;
    color: var(--gift-message-text);
}
.messenger-app--messages---message.msg-gift ._content>.text {
    flex: 0 0 100%;
    order: 1;
    margin: 20px 0;
    color: var(--gift-message-text);
    font-size: 14px;
    text-align: center;
    transform: translateX(-24px);
}
.messenger-app--messages---message.msg-gift ._content>.text:empty {
    display: none;
}
.fc_msg_row.msg-gift .fc_msg_postfix,
.fc_msg_row.msg-gift .fc_msg_text,
.msg-attach-w-gift {
    color: var(--gift-message-text);
}
.fc_msg_row.msg-gift .fc_msg_postfix {
    font-style: normal;
}
.fc_chat_box .msg-attach-w-gift {
    display: block;
    width: fit-content;
    margin-inline: auto;
}
.fc_chat_box .msg-attach-w-gift img {
    background-color: transparent;
    border: none;
    padding: 0;
    border-radius: 6px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, .06), 0 1px 2px 0 rgba(0, 0, 0, .06);
}
.fc_msg_row.msg-gift .fc_msg_body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}
.fc_msg_row.msg-gift .fc_msg_header {
    display: contents;
}
.fc_msg_row.msg-gift .fc_msg_body>* {
    flex: 0 0 100%;
}
.fc_msg_row.msg-gift .fc_msg_author,
.fc_msg_row.msg-gift .fc_msg_postfix,
.fc_msg_row.msg-gift .fc_msg_time {
    flex: 0 1 auto;
}
.fc_msg_row.msg-gift .fc_msg_postfix,
.fc_msg_row.msg-gift .fc_msg_time {
    margin-left: 5px;
}
.fc_msg_row.msg-gift .fc_msg_text {
    order: 1;
    text-align: center;
    transform: translateX(-18px);
}
.msg-attach-w-gift {
    display: block;
    width: fit-content;
    margin-inline: auto;
}
.messenger-app--messages---message.msg-gift .msg-attach-w-gift {
    transform: translateX(-24px);
}
.fc_msg_row.msg-gift .msg-attach-w-gift {
    transform: translateX(-18px);
}
.msg-attach-w-gift img {
    display: block;
    width: 256px;
    background-color: transparent;
    border-radius: 6px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, .06), 0 1px 2px 0 rgba(0, 0, 0, .06);
}
.fwd-messages-container .msg-attach-w-gift img {
    box-shadow: none;
}

.msg-postfix {
    color: var(--muted-text-color-2);
    font-size: 12px;
    margin-bottom: 2px;
}

/* Shared materials page (#materials-page-im) */
#materials-page-im .materials-photo-cell,
#materials-page-im .materials-video-cell,
#materials-page-im .materials-list-row,
.msg-media-tile {
    background: var(--module-header-background-color);
    border-color: var(--border-color);
}

#materials-page-im .materials-page-content {
    padding: 12px 4px;
}

#materials-page-im .materials-audio-list,
#materials-page-im .materials-docs-list,
#materials-page-im .materials-links-list {
    padding: 0 6px;
}

#materials-page-im .materials-list-row,
#materials-page-im .materials-item-sub {
    font-size: 12.5px;
    line-height: 17px;
}

#materials-page-im .materials-item-sub {
    color: var(--muted-text-color);
}

#materials-page-im .materials-download-btn {
    padding: 7px 16px 8px;
    font-size: 12.5px;
}

/* ==========================================================================
   Date dividers
   ========================================================================== */

/* Day divider */
.messenger-app--messages .messenger-app--messages-day-time {
    margin: 12px 0 8px 0;
}

.messenger-app--messages .messenger-app--messages-day-time b {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tab-text-color);
    background: var(--transparent) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: color 0.15s ease;
}

.messenger-app--messages .messenger-app--messages-day-time b:hover {
    color: var(--text-color);
    text-decoration: none;
}

/* Floating sticky date pill */
#im_container.compact .im_floating_date_wrap {
    top: 15px;
}

.messenger-app.messenger-layer .im_floating_date_wrap b,
#im_floating_date_text {
    border-radius: 20px;
    padding: 3px 15px;
    font-size: 12px;
    font-weight: 400;
    color: var(--tab-text-color);
    background: var(--module-background-color);
    border: 1px solid var(--border-color-3);
    box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--text-color) 10%, var(--transparent));
    transition: all 0.15s ease;
}

.messenger-app.messenger-layer .im_floating_date_wrap b:hover,
#im_floating_date_text:hover {
    color: var(--text-color);
    border-color: var(--border-color-2);
}

/* VK empty state: icon over a muted hint in a 180px column. */
.im-empty-conversation--content {
    max-width: 180px;
}

.im-empty-conversation--image {
    width: 69px;
    height: 66px;
    margin-bottom: 20px;
    background: url(../icons/empty_icon.png) no-repeat top;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .im-empty-conversation--image {
        background-image: url(../icons/empty_icon_2x.png);
        background-size: 69px 66px;
    }
}

.im-empty-conversation--text {
    color: var(--vk-im-empty);
    line-height: 22px;
}

.im-empty-conversation .im-page--cancel-fwd {
    margin-top: 8px;
}

/* Unread divider */
#im_container.at_page:not(.compact) .im-unread-divider {
    margin-left: 36px;
    margin-right: 36px;
}

#im_container.at_page.compact .im-unread-divider {
    margin-left: 43px;
    margin-right: 43px;
}

.im-unread-divider::before,
.im-unread-divider::after {
    background: var(--border-color);
}

.im-unread-divider-text {
    font-size: 12px;
    font-weight: 400;
    color: var(--tab-text-color);
    background: var(--module-background-color);
}

/* ==========================================================================
   Status bar, system & special messages
   ========================================================================== */

/* Offline state is already shown in the chat header. */
.messenger-app .messenger-app-status .write-bar.is-offline {
    display: none!important
}

.messenger-app .messenger-app-status {
    padding: 4px 20px;
}

.messenger-app .messenger-app-status .write-bar {
	padding: 0 0 0 37px;
	color: var(--muted-text-color-3);
	font-size: 12px;
	min-height: unset;
	max-height: unset;
}

.messenger-app .messenger-app-status .write-bar.is-typing:not(:empty)::before,
.messenger-app .messenger-app-status .write-bar:not(.is-offline):not(:empty)::before {
    background: url(../icons/typing.gif) no-repeat 0 0;
}

.messenger-app--messages .messenger-special-message {
    text-align: center;
    color: var(--muted-text-color-2);
    font-size: 12.5px;
    line-height: 18px;
    padding: 4px 20px;
    margin: 4px 0;
    cursor: default;
}

.messenger-app--messages .messenger-special-message ._sender {
    color: var(--heading-color) !important;
    font-weight: 600;
    font-size: 12.5px;
    text-decoration: none;
}

.messenger-app--messages .messenger-special-message ._sender:hover {
    text-decoration: underline;
}

.messenger-app--messages .messenger-special-message .text {
    color: var(--muted-text-color-2);
    font-size: 12.5px;
    font-weight: 400;
}

.messenger-app--messages .messenger-special-message .date-mini {
    color: var(--muted-text-color-3);
    font-size: 11px;
    margin-left: 6px;
    opacity: 0.7;
    cursor: pointer;
}

.messenger-app--messages .messenger-special-message .date-mini:hover {
    opacity: 1;
}

/* Search results & deleted messages */
/* modals.css's global .show_more flex doesn't fit the plain IM pager. */
#search-page-im .show_more {
    display: block;
    margin-top: 0;
}

#search-page-im {
    background: var(--bg-page);
}

#search-page-im .im-search-toolbar {
    gap: 8px;
    padding: 0 11px 0 0;
    border: 0;
    border-bottom: 1px solid var(--vk-im-divider);
    background: var(--bg-page);
}

#search-page-im .im-search-input-box input.search_input {
    height: 45px;
    padding: 14px 44px 13px 28px !important;
    border: 0;
    border-left: 20px solid var(--transparent);
    border-radius: 0;
    background: url(../icons/search_icon.png) no-repeat 0 center;
    font-size: 13px;
    line-height: 18px;
}

#search-page-im .im-search-clear {
    right: 12px;
    width: 20px;
    height: 20px;
    color: var(--muted-text-color-3);
    font-size: 18px;
    line-height: 20px;
}

#search-page-im .im-search-btn {
    display: none;
}

#search-page-im .im-search-calendar-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    opacity: .75;
}

#search-page-im .im-search-calendar-btn:hover {
    background: var(--vk-im-hover);
    opacity: 1;
}

#search-page-im .im-search-calendar-btn.active {
    background: var(--vk-im-unread-bg);
    opacity: 1;
}

#search-page-im .im-search-calendar-btn .im-search-calendar-icon {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23828A99' d='M6 1.5a.8.8 0 011.5 0V3h5V1.5a.8.8 0 011.5 0V3h.5A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3H6zM4.5 8v6.5c0 .55.45 1 1 1h9c.55 0 1-.45 1-1V8zm1-3.5c-.55 0-1 .45-1 1V6.5h11V5.5c0-.55-.45-1-1-1z'/%3E%3C/svg%3E") 50% no-repeat;
    transform: none;
    filter: none;
}

#search-page-im .im-search-cancel-btn a {
    margin-left: 6px;
    font-size: 13px;
    color: var(--link-color);
}

#search-page-im .im-search-results {
    background: var(--bg-page);
}

#search-page-im .im-search-section {
    border: 0;
}

#search-page-im .im-search-section-header {
    padding: 16px 20px 9px;
    border: 0;
    background: transparent;
}

#search-page-im .im-search-section-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    color: var(--heading-color);
    text-transform: none;
    letter-spacing: 0;
}

#search-page-im .im-search-section-count {
    font-size: 13px;
    color: var(--muted-text-color);
}

#search-page-im .im-search-peer-item {
    gap: 14px;
    min-height: 63px;
    padding: 8px 20px;
    box-sizing: border-box;
    border: 0;
}

#search-page-im .im-search-peer-item:hover,
#search-page-im .im-search-item:hover {
    background: var(--vk-im-hover);
}

#search-page-im .im-search-peer-avatar,
#search-page-im .im-search-peer-avatar img {
    width: 46px;
    height: 46px;
}

#search-page-im .im-search-peer-avatar img,
#search-page-im .im-search-item-avatar img {
    border-radius: 50%;
}

#search-page-im .im-search-peer-online-dot {
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    background: var(--vk-im-online);
}

#search-page-im .im-search-peer-name {
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    color: var(--heading-color);
}

#search-page-im .im-search-peer-item:hover .im-search-peer-name {
    text-decoration: none;
}

#search-page-im .im-search-peer-meta {
    margin-top: 4px;
    font-size: 13px;
    line-height: 16px;
    color: var(--muted-text-color-2);
}

#search-page-im .im-search-item {
    gap: 14px;
    padding: 10px 20px;
}

#search-page-im .im-search-item-avatar,
#search-page-im .im-search-item-avatar img {
    width: 40px;
    height: 40px;
}

#search-page-im .im-search-item-header {
    margin-bottom: 3px;
}

#search-page-im .im-search-item-title {
    font-size: 13px;
    line-height: 16px;
    color: var(--muted-text-color);
}

#search-page-im .im-search-author,
#search-page-im .im-search-chat-link {
    font-weight: 500;
    color: var(--link-color);
}

#search-page-im .im-search-date {
    font-size: 13px;
    color: var(--muted-text-color);
}

#search-page-im .im-search-item-text {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-color);
}

#search-page-im .im-search-hl {
    padding: 0;
    border-radius: 0;
    background: var(--vk-im-hl-bg);
    font-weight: 400;
    color: inherit;
}

#search-page-im .show_more {
    padding: 14px 10px;
    border-top: 1px solid var(--vk-im-divider);
    background: transparent;
    font-weight: 500;
    color: var(--link-color);
}

#search-page-im .show_more:hover {
    background: var(--vk-im-hover);
}

#search-page-im .im-search-empty {
    padding: 40px;
    line-height: 18px;
    color: var(--muted-text-color);
}

.messenger-app--messages---message.msg-searched {
    border-bottom: 1px solid var(--border-color);
    padding: 8px 0;
    margin-top: 0;
}

.messenger-app--messages---message.msg-searched:hover {
    background: var(--module-header-background-color);
}

.messenger-app--messages---message.msg-searched:hover::after {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    background: url(../icons/search_arrow.png) no-repeat;
    position: absolute;
    right: 24px;
    top: 50%;
    margin-top: -5px;
}

.messenger-app--messages---message.msg-deleted .text,
.messenger-app--messages---message .msg-deleted-content,
.messenger-app--messages---message .msg-deleted-label {
    color: var(--muted-text-color-3) !important;
    font-size: 12.5px;
}

.messenger-app--messages---message .msg-restore-btn {
    color: var(--link-color);
    font-size: 12.5px;
}

/* ==========================================================================
   History loader, app end & "go to end" pill
   ========================================================================== */
@keyframes round_spinner {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}
.im_top_loader,
#load_skeleton:before, .im_page_loader:before {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 15px auto;
    display: block;
    width: 16px;
    height: 16px;
    animation-name: round_spinner;
    animation-duration: 700ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background-image: url(../icons/round_spinner.png)
}

.im_top_loader img,#load_skeleton img, .im_page_loader img {
    display: none!important;
}
#load_skeleton:before, .im_page_loader:before {
    content: '';
}

#load_skeleton, .im_page_loader {
    background-color: var(--module-background-color)
}

.messenger-app-end {
    width: var(--messenger-width);
    bottom: 0;
    z-index: 10;
    border-radius: 0 0 var(--module-border-radius) var(--module-border-radius);
    box-shadow: 0 1px 0 0 var(--shadow-bottom-color), 0 0 0 1px var(--shadow-outline-color);
}

/* "Go to end of history" pill */
/* Driven by m-mountain classes. */
.messenger-app-end .messenger-mountain.im-to-end {
    position: absolute;
    top: 0;
    margin-top: -57px;
    padding-bottom: 11px;
    cursor: pointer;
    box-sizing: border-box;
    left: 0;
    width: 100%;
    opacity: 0;
    color: var(--link-color);
    font-size: 12.5px;
    font-weight: normal;
    z-index: 102;
    text-align: center;
    overflow: hidden;
    border: none;
    display: block;
    pointer-events: none;
    -o-transition: 0.2s opacity;
    transition: 0.2s opacity;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.messenger-app-end .messenger-mountain.im-to-end .im-to-end--label {
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
    -o-transition: 0.2s transform;
    transition: 0.2s transform;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    position: relative;
    border: solid 1px var(--border-color-3);
    padding: 8px 16px 8px 34px;
    box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--text-color) 10%, var(--transparent));
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: var(--module-background-color) url(../icons/history_end.png) no-repeat 14px center;
    border-radius: 102.5px;
    display: inline-block;
    color: var(--link-color);
    font-size: 12.5px;
}

.messenger-app-end .messenger-mountain.im-to-end:hover .im-to-end--label {
    background-color: var(--module-background-color--secondary);
}

.messenger-app-end.m-mountain .messenger-mountain.im-to-end,
.messenger-app-end.m-mountain-fatal .messenger-mountain.im-to-end {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.messenger-app-end.m-mountain .messenger-mountain.im-to-end .im-to-end--label,
.messenger-app-end.m-mountain-fatal .messenger-mountain.im-to-end .im-to-end--label {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.messenger-app-end.m-selected .messenger-mountain.im-to-end {
    display: none;
}

.messenger-app-end.m-selected .input-m {
    border: 0;
    background: none;
    padding: 10px 38px 0;
    height: unset;
}
.messenger-app-end.m-selected:not(.stock-input-bar) {
    background: var(--vk-im-input-bg);
}

.messenger-app-end.m-selected:not(.stock-input-bar) .input-m.input-reply {
    padding-right: 55px;
    padding-left: 55px;
}

.messenger-app-end.m-selected.stock-input-bar .input-m.input-reply {
    padding-right: 74px;
    padding-left: 74px;
}

.compact .messenger-app-end.m-selected.stock-input-bar .input-m.input-reply {
    padding-right: 18px;
    padding-left: 15px;
}

/* Reply/edit/forward preview */
.messenger-app-end .input-m.input-reply .input-reply-content {
    position: relative;
    padding-left: 10px;
    flex-direction: column;
    align-items: start;
    gap: 5px;
}

.messenger-app-end .input-m.input-reply .input-reply-content:before {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    width: 2px;
    border-radius: 1px;
    background: var(--quote-border-color);
    content: '';
}

.messenger-app-end .input-m.input-reply:hover .input-reply-content:before {
    background: var(--vk-im-reply-hover);
}

.messenger-app-end .input-m.input-reply .input-reply-content .input-type,
.messenger-app-end .input-m.input-reply .input-reply-content .input-reply-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--link-color);
}

.messenger-app-end .input-m.input-reply .input-reply-content .input-reply-text {
    font-size: 13px;
    color: var(--text-color);
}

.messenger-app-end .input-m.input-reply .input-close {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 0;
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20stroke%3D%22%23828A99%22%20stroke-width%3D%222%22%20d%3D%22M8%2C8%20L16%2C16%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20stroke%3D%22%23828A99%22%20stroke-width%3D%222%22%20d%3D%22M8%2C8%20L16%2C16%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform%3D%22matrix(-1%200%200%201%2024%200)%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 50% no-repeat;
    opacity: .7;
}

.messenger-app-end .input-m.input-reply .input-close:hover {
    opacity: 1;
}

/* The pill brings its own hover. */
.messenger-app-end .messenger-mountain:hover {
    background: none;
}

/* ==========================================================================
   Chat input bar
   ========================================================================== */

/* 2018 variant */
.messenger-app .im-chat-input {
    padding: 12px 0 0;
    box-sizing: border-box;
    border-top: solid 1px var(--border-color);
    background: var(--vk-im-input-bg);
    position: relative;
}

.messenger-app .im-chat-input.im-chat-input_classic {
    padding-left: 0;
    padding-right: 0;
    border-top: 0;
    /* Card chrome lives on .messenger-app-end; keep this flat. */
}

.messenger-app .im-chat-input--textarea {
    float: none;
    width: auto;
    margin: 0 55px;
    position: relative;
}

.messenger-app .im-chat-input--txt-wrap {
    position: relative;
    cursor: text;
    margin-bottom: 12px;
    background: var(--module-background-color);
    border-radius: 6px;
    border: solid 1px var(--border-color-3);
}

.messenger-app .im-chat-input--text,
#write.expanded-textarea .messenger-app--input---messagebox .content-editable,
#write.expanded-textarea .messenger-app--input---messagebox .content-editable[contenteditable="true"],
.messenger-app .im-chat-input--textarea textarea {
    background: var(--module-background-color);
    color: var(--text-color);
    outline: 0;
    min-height: 36px !important;
    width: 100%;
    resize: none;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 6px;
    line-height: 17px;
    padding: 9px 74px 10px 13px;
    margin-bottom: 0;
    word-wrap: break-word;
    box-sizing: border-box;
    border: none;
    font-size: 13px;
    -o-transition: border-bottom-color 0.3s linear;
    transition: border-bottom-color 0.3s linear;
}

.messenger-app .im-chat-input--text:focus {
    border-bottom-color: var(--accent-color);
}

.messenger-app .im-chat-input--attach {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    right: 46px;
    bottom: 6px;
}

.messenger-app .im-chat-input--attach-label {
    background: var(--muted-text-color-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%22442%2020%2024%2024%22%3E%3Cdesc%3E%20Created%20with%20Sketch.%3C%2Fdesc%3E%3Cg%20fill%3D%22none%22%3E%3Crect%20x%3D%22442%22%20y%3D%2220%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M454%2029.5C452.6%2029.5%20451.5%2030.6%20451.5%2032%20451.5%2033.4%20452.6%2034.5%20454%2034.5%20455.4%2034.5%20456.5%2033.4%20456.5%2032%20456.5%2030.6%20455.4%2029.5%20454%2029.5L454%2029.5ZM459.5%2026C459.3%2026%20458.6%2025.7%20458.5%2025.5L458.1%2024.8C457.8%2024.4%20457.1%2024%20456.5%2024L451.5%2024C451%2024%20450.3%2024.4%20449.9%2024.8L449.5%2025.5C449.4%2025.7%20448.8%2026%20448.5%2026L446.8%2026C445.9%2026%20445%2026.6%20445%2027.5L445%2037.2C445%2038.1%20445.9%2039%20446.8%2039L461.2%2039C462.1%2039%20463%2038.1%20463%2037.2L463%2027.5C463%2026.6%20462.1%2026%20461.2%2026L459.5%2026ZM450%2032C450%2029.8%20451.8%2028%20454%2028%20456.2%2028%20458%2029.8%20458%2032%20458%2034.2%20456.2%2036%20454%2036%20451.8%2036%20450%2034.2%20450%2032ZM460.5%2029C460.2%2029%20460%2028.8%20460%2028.5%20460%2028.2%20460.2%2028%20460.5%2028%20460.8%2028%20461%2028.2%20461%2028.5%20461%2028.8%20460.8%2029%20460.5%2029L460.5%2029Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%22442%2020%2024%2024%22%3E%3Cdesc%3E%20Created%20with%20Sketch.%3C%2Fdesc%3E%3Cg%20fill%3D%22none%22%3E%3Crect%20x%3D%22442%22%20y%3D%2220%22%20width%3D%2224%22%20height%3D%2224%22%2F%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M454%2029.5C452.6%2029.5%20451.5%2030.6%20451.5%2032%20451.5%2033.4%20452.6%2034.5%20454%2034.5%20455.4%2034.5%20456.5%2033.4%20456.5%2032%20456.5%2030.6%20455.4%2029.5%20454%2029.5L454%2029.5ZM459.5%2026C459.3%2026%20458.6%2025.7%20458.5%2025.5L458.1%2024.8C457.8%2024.4%20457.1%2024%20456.5%2024L451.5%2024C451%2024%20450.3%2024.4%20449.9%2024.8L449.5%2025.5C449.4%2025.7%20448.8%2026%20448.5%2026L446.8%2026C445.9%2026%20445%2026.6%20445%2027.5L445%2037.2C445%2038.1%20445.9%2039%20446.8%2039L461.2%2039C462.1%2039%20463%2038.1%20463%2037.2L463%2027.5C463%2026.6%20462.1%2026%20461.2%2026L459.5%2026ZM450%2032C450%2029.8%20451.8%2028%20454%2028%20456.2%2028%20458%2029.8%20458%2032%20458%2034.2%20456.2%2036%20454%2036%20451.8%2036%20450%2034.2%20450%2032ZM460.5%2029C460.2%2029%20460%2028.8%20460%2028.5%20460%2028.2%20460.2%2028%20460.5%2028%20460.8%2028%20461%2028.2%20461%2028.5%20461%2028.8%20460.8%2029%20460.5%2029L460.5%2029Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    width: 24px;
    height: 24px;
    opacity: 0.7;
    cursor: pointer;
    display: block;
}

.messenger-app .im-chat-input--attach-label:hover {
    opacity: 1;
}

.messenger-app .im-chat-input--smile-wrap {
    position: absolute;
    top: auto;
    bottom: 6px;
    right: 14px;
    z-index: 4;
}

.messenger-app .im-chat-input--smile-wrap .emoji_picker_entrypoint {
    position: static;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: none;
    opacity: 1;
}

.messenger-app .im-chat-input--smile-wrap .emoji_smile_icon_vector {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    -o-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
    background: var(--muted-text-color-3);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20opacity%3D%22.4%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22black%22%20fill-rule%3D%22nonzero%22%20d%3D%22M2%2012C2%206.477%206.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010S2%2017.523%202%2012zm18.3%200a8.3%208.3%200%201%200-16.6%200%208.3%208.3%200%200%200%2016.6%200zm-11.05-.5a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5zm5.5%200a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5z%22%2F%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20d%3D%22M9%2014.85c.833.767%201.833%201.15%203%201.15s2.167-.383%203-1.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20opacity%3D%22.4%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22black%22%20fill-rule%3D%22nonzero%22%20d%3D%22M2%2012C2%206.477%206.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010S2%2017.523%202%2012zm18.3%200a8.3%208.3%200%201%200-16.6%200%208.3%208.3%200%200%200%2016.6%200zm-11.05-.5a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5zm5.5%200a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5z%22%2F%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20d%3D%22M9%2014.85c.833.767%201.833%201.15%203%201.15s2.167-.383%203-1.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.messenger-app .im-chat-input--smile-wrap .emoji_picker_entrypoint:hover .emoji_smile_icon_vector {
    opacity: 1;
}

.messenger-app .im-chat-input--selector {
    position: absolute;
    left: -55px;
    bottom: -16px;
    z-index: 119;
}

/* 2018 */
.messenger-app .post-attach-menu:not(.post-attach-menu--inline) .post-attach-menu__trigger {
    background: var(--muted-text-color-3);
    -webkit-mask: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%2F%3E%0A%20%20%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20d%3D%22M20.0291094%2C15.0279907%20L14.6443834%2C20.2583795%20L14.6443834%2C20.2583795%20C12.0566785%2C22.7719155%207.93029511%2C22.7421861%205.37907548%2C20.1916257%20L5.37907548%2C20.1916257%20L5.37907548%2C20.1916257%20L5.37907548%2C20.1916257%20C2.76745218%2C17.5806772%202.76690514%2C13.3469463%205.37785362%2C10.735323%20C5.38546336%2C10.7277113%205.39309146%2C10.720118%205.40073787%2C10.7125431%20L13.4673115%2C2.72143747%20L13.4673115%2C2.72143747%20C15.2274317%2C0.977784268%2018.0678013%2C0.991133451%2019.8114545%2C2.7512537%20C19.8205797%2C2.76046506%2019.8296649%2C2.76971594%2019.8387099%2C2.77900608%20L19.8387099%2C2.77900608%20L19.8387099%2C2.77900608%20C21.5887922%2C4.57652514%2021.569373%2C7.4467765%2019.7951292%2C9.22045114%20L11.6642625%2C17.3487092%20L11.6642625%2C17.3487092%20C10.8163456%2C18.196354%209.46403082%2C18.26344%208.53638318%2C17.5038779%20L8.40267048%2C17.3943933%20L8.40267048%2C17.3943933%20C7.50791768%2C16.6617656%207.37648933%2C15.342513%208.10911705%2C14.4477602%20C8.14767542%2C14.4006692%208.18826865%2C14.3552816%208.23078109%2C14.311727%20L13.6981137%2C8.71035836%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E) center no-repeat;
    mask: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%2F%3E%0A%20%20%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20d%3D%22M20.0291094%2C15.0279907%20L14.6443834%2C20.2583795%20L14.6443834%2C20.2583795%20C12.0566785%2C22.7719155%207.93029511%2C22.7421861%205.37907548%2C20.1916257%20L5.37907548%2C20.1916257%20L5.37907548%2C20.1916257%20L5.37907548%2C20.1916257%20C2.76745218%2C17.5806772%202.76690514%2C13.3469463%205.37785362%2C10.735323%20C5.38546336%2C10.7277113%205.39309146%2C10.720118%205.40073787%2C10.7125431%20L13.4673115%2C2.72143747%20L13.4673115%2C2.72143747%20C15.2274317%2C0.977784268%2018.0678013%2C0.991133451%2019.8114545%2C2.7512537%20C19.8205797%2C2.76046506%2019.8296649%2C2.76971594%2019.8387099%2C2.77900608%20L19.8387099%2C2.77900608%20L19.8387099%2C2.77900608%20C21.5887922%2C4.57652514%2021.569373%2C7.4467765%2019.7951292%2C9.22045114%20L11.6642625%2C17.3487092%20L11.6642625%2C17.3487092%20C10.8163456%2C18.196354%209.46403082%2C18.26344%208.53638318%2C17.5038779%20L8.40267048%2C17.3943933%20L8.40267048%2C17.3943933%20C7.50791768%2C16.6617656%207.37648933%2C15.342513%208.10911705%2C14.4477602%20C8.14767542%2C14.4006692%208.18826865%2C14.3552816%208.23078109%2C14.311727%20L13.6981137%2C8.71035836%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E) center no-repeat;
    width: 52px;
    height: 55px;
    border: none;
    padding: 31px 28px;
    line-height: 1;
    box-sizing: border-box;
}

.at_page .ui_actions_menu_wrap {
    --ui-actions-menu-distance: 0px;
    --action-menu-z-index: 11;
}

.messenger-app .im-send-btn {
    width: 52px;
    height: 55px;
    border: none;
    background: none;
    padding: 31px 28px;
    cursor: pointer;
    display: block;
    opacity: 0.7;
    position: relative;
    box-sizing: border-box;
}

.messenger-app .im-send-btn:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--muted-text-color-3);
    -webkit-mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.7%2015.8c-.7%201.9-1.1%203.2-1.3%203.9-.6%202.4-1%202.9%201.1%201.8%202.1-1.1%2012-6.7%2014.3-7.9%202.9-1.6%202.9-1.5-.2-3.2-2.3-1.4-12.2-6.8-14-7.9s-1.7-.6-1.2%201.8c.2.8.6%202.1%201.3%203.9.5%201.3%201.6%202.3%203%202.5l5.8%201.1c.1%200%20.1.1.1.1s0%20.1-.1.1l-5.8%201.1c-1.3.4-2.5%201.3-3%202.7z%22%2F%3E%3C%2Fsvg%3E') center no-repeat;
    mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.7%2015.8c-.7%201.9-1.1%203.2-1.3%203.9-.6%202.4-1%202.9%201.1%201.8%202.1-1.1%2012-6.7%2014.3-7.9%202.9-1.6%202.9-1.5-.2-3.2-2.3-1.4-12.2-6.8-14-7.9s-1.7-.6-1.2%201.8c.2.8.6%202.1%201.3%203.9.5%201.3%201.6%202.3%203%202.5l5.8%201.1c.1%200%20.1.1.1.1s0%20.1-.1.1l-5.8%201.1c-1.3.4-2.5%201.3-3%202.7z%22%2F%3E%3C%2Fsvg%3E') center no-repeat;
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
}

.messenger-app .im-send-btn:hover {
    opacity: 1;
}

.messenger-app .is_msg_editing .im-send-btn {
    background: var(--accent-color-2);
    -webkit-mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M10%2016.9c-.2%200-.5-.1-.6-.3l-3-3c-.4-.4-.4-.9%200-1.3s.9-.4%201.3%200l2.4%202.4%206.4-6.4c.4-.4.9-.4%201.3%200s.4.9%200%201.3l-7%207c-.3.2-.6.3-.8.3zM12%2023.9c-6.6%200-11.9-5.3-11.9-11.9s5.3-11.9%2011.9-11.9%2011.9%205.3%2011.9%2011.9%2011.9-5.3%2011.9-11.9%2011.9-5.3%2011.9-11.9%2011.9zm0-22c-5.6%200-10.1%204.5-10.1%2010.1s4.5%2010.1%2010.1%2010.1%2010.1-4.5%2010.1-10.1-4.5-10.1-10.1-10.1z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    mask: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M10%2016.9c-.2%200-.5-.1-.6-.3l-3-3c-.4-.4-.4-.9%200-1.3s.9-.4%201.3%200l2.4%202.4%206.4-6.4c.4-.4.9-.4%201.3%200s.4.9%200%201.3l-7%207c-.3.2-.6.3-.8.3zM12%2023.9c-6.6%200-11.9-5.3-11.9-11.9s5.3-11.9%2011.9-11.9%2011.9%205.3%2011.9%2011.9%2011.9-5.3%2011.9-11.9%2011.9-5.3%2011.9-11.9%2011.9zm0-22c-5.6%200-10.1%204.5-10.1%2010.1s4.5%2010.1%2010.1%2010.1%2010.1-4.5%2010.1-10.1-4.5-10.1-10.1z%22%2F%3E%3C%2Fsvg%3E') center no-repeat;
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
    opacity: 0.9;
}

.messenger-app .is_msg_editing .im-send-btn:after {
    display: none;
}

.messenger-app .is_msg_editing .im-send-btn:hover {
    opacity: 1;
}

.messenger-app .im-chat-input--send {
    margin-top: -1px;
    bottom: -13px;
    right: -55px;
    position: absolute;
}

.messenger-app .im-chat-input--scroll .im-chat-input--attaches {
    padding-right: 2px;
    margin-top: 0;
}

.messenger-app .im-chat-input--scroll .im-chat-input--attaches:has(.post-horizontal:not(:empty), .post-vertical:not(:empty)) {
    margin-top: 10px;
}

.stock-input-bar .messenger-app--input---messagebox .post-horizontal:not(:empty),
.stock-input-bar .messenger-app--input---messagebox .post-vertical:not(:empty) {
    margin-top: 10px;
}

.messenger-app .post-horizontal.vkify_makima_composer + .post-vertical:not(:empty),
.stock-input-bar .post-horizontal.vkify_makima_composer + .post-vertical:not(:empty) {
    margin-top: 8px;
}

.messenger-app .im-chat-input--attaches .multi_media_preview {
    margin-bottom: 0;
}

.messenger-app .im-chat-input--attaches .multi_media_preview .media_preview {
    max-width: 100%;
}

.messenger-app .im-chat-input--attaches .media_preview:empty {
    display: none;
}

.messenger-app--input---messagebox .content-editable:empty::before {
    color: var(--muted-text-color);
}

.input--messagebox-left {
    margin-top: 6px;
}

.messenger-app--input .input--messagebox-buttons {
    align-items: center;
}

/* Stock variant */
.stock-input-bar .messenger-app--input {
    padding: 12px 14px 17px;
    background: var(--module-background-color);
    justify-content: unset;
    border: 0;
}

.compact .stock-input-bar .messenger-app--input {
    padding: 12px 26px 17px;
}

.stock-input-bar .messenger-app--input---messagebox {
    padding: 0px 14px;
    width: 100%;
}

.stock-input-bar .messenger-app--input>.ava,
.stock-input-bar .messenger-app--input>.chat_table_avatar.ava,
.stock-input-bar .messenger-app--input>table.chat_table_avatar.ava {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.stock-input-bar #write.expanded-textarea .messenger-app--input---messagebox .content-editable,
.stock-input-bar #write.expanded-textarea .messenger-app--input---messagebox .content-editable[contenteditable="true"] {
    min-height: 55px !important;
    padding: 6px 25px 7px 0px;
    border-bottom: 1px solid var(--border-color);
}

.stock-input-bar #write.expanded-textarea .messenger-app--input---messagebox .content-editable:focus,
.stock-input-bar #write.expanded-textarea .messenger-app--input---messagebox .content-editable[contenteditable="true"]:focus {
    border-color: var(--border-color-2);
}

.stock-input-bar #write.expanded-textarea .messenger-app--input---messagebox .content-editable::placeholder {
    color: var(--muted-text-color);
}

.stock-input-bar .messenger-app--input .input--messagebox-buttons,
.stock-input-bar .messenger-app--input .input--messagebox-left {
    flex-direction: row-reverse;
}

.stock-input-bar .post-attach-menu__trigger {
    margin-left: 5px;
}

/* "Can't write" bars */
.im-cant-write-container {
    position: relative;
    background: var(--module-header-background-color);
}

.messenger-app--cant-write {
    flex-direction: column;
    align-items: stretch;
    min-height: 80px;
    padding: 15px 36px 15px 82px;
    border: 0;
}

.messenger-app--cant-write::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 36px;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    background: url(../icons/alert.svg) 50% / 36px 36px no-repeat;
}

.im-cant-write-text {
    color: var(--text-color);
    text-align: left;
}

.fc_cant_write_bar {
    position: relative;
    justify-content: flex-start;
    background: var(--module-header-background-color);
    border-top: 1px solid var(--border-color);
    padding: 8px 14px 8px 46px;
}

.fc_cant_write_bar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: url(../icons/alert.svg) 50% / 20px 20px no-repeat;
}

.fc_cant_write_text {
    color: var(--text-color);
    text-align: left;
}

/* ==========================================================================
   Compact mode
   ========================================================================== */

#im_container.at_page.compact {
    --sidebar-width: 318px;
    margin: 0;
}

#im_container.at_page.compact #im_page_containers {
    flex-direction: row;
}

#im_container.compact .messenger-app,
#im_container.compact .messenger-app--input,
#im_container.compact .im_floating_date_wrap,
#im_container.compact .messenger-pinned-bar,
#im_container.compact .messenger-app-end.m-selected .input-m {
    width: var(--messenger-width);
    max-width: var(--messenger-width)
}

#im_container.compact .crp-bottom {
    margin: 0;
    position: static;
}

#im_container.compact .im_page.page-conversations {
    width: 316px;
    height: calc(100vh - var(--header-height) - 15px);
    height: calc(100dvh - var(--header-height) - 15px);
    display: flex !important;
    flex-direction: column;
    position: static;
    background-color: var(--module-background-color);
    border: 1px solid var(--border-color);
}

/* Only one .im_page is visible, so the side-by-side offset is dead space. */
#im_container.at_page.compact #im_page_tabs {
    margin-left: 0;
    width: var(--messenger-width);
}

#im_container.compact .im_page.page-other {
    margin-left: 0;
    margin-top: 0;
    position: static;
    width: var(--messenger-width);
    height: calc(100vh - var(--header-height) - 15px);
    height: calc(100dvh - var(--header-height) - 15px);
    background-color: var(--module-background-color);
    border: 1px solid var(--border-color);
    border-left: 0;
    display: flex;
    flex-direction: column;
    scrollbar-color: color-mix(in srgb, var(--text-color) 20%, var(--transparent)) var(--transparent);
}

.compact #conversations-top-buttons {
    background: none;
}

.compact .crp-bottom {
    position: static;
}

#im_container.compact .messenger-app--global-tabs {
    width: calc(var(--messenger-width) - 20px) !important;
}

.compact #conversations-search-bar input[type~="text"].search_input {
    height: 47px;
}

#im_container.compact .crp-list {
    border-top: 1px solid var(--border-color);
    max-height: unset;
}

#im_container.compact .crp-list .crp-entry--message---text {
    height: auto;
}
.page_content #im_container .peer-back.button {
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    padding: 14px 20px 15px 36px;
    background: var(--bg-page) url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2216%22%20viewBox%3D%220%200%209%2016%22%3E%3Cpath%20fill%3D%22%23828A99%22%20d%3D%22M8%2015.9c-.2%200-.4-.1-.6-.3l-7-7c-.3-.3-.3-.9%200-1.2l7-7c.3-.3.9-.3%201.2%200%20.3.3.3.9%200%201.2l-6.4%206.4%206.4%206.4c.3.3.3.9%200%201.2-.2.2-.4.3-.6.3z%22%20opacity%3D%22.7%22%2F%3E%3C%2Fsvg%3E') 15px 16px no-repeat!important;
    color: var(--vk-im-back);
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    line-height: 19px;
    text-decoration: none;
    cursor: pointer;
    z-index: 10;
    margin: 0;
    width: 100%;
    height: unset;
    border-radius: 0;
    text-align: left;

    &:hover {
        background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2216%22%20viewBox%3D%220%200%209%2016%22%3E%3Cpath%20fill%3D%22%23828A99%22%20d%3D%22M8%2015.9c-.2%200-.4-.1-.6-.3l-7-7c.3-.3.3-.9%200-1.2l7-7c.3-.3.9-.3%201.2%200%20.3.3.3.9%200%201.2l-6.4%206.4%206.4%206.4c.3.3.3.9%200%201.2-.2.2-.4.3-.6.3z%22%20opacity%3D%22.7%22%2F%3E%3C%2Fsvg%3E') 15px 16px no-repeat,
            linear-gradient(to right, var(--module-background-color--secondary), var(--bg-page)) left / 148px 100% no-repeat
            var(--bg-page)!important;
        color: var(--vk-im-back-hover);
    }
    &:active {
        box-shadow: none;
    }
}
#im_container:not(.compact) .peer-back.button {
    border: 1px solid var(--border-color)
}

/* ==========================================================================
   Peer window & misc
   ========================================================================== */

.peer-window-open #im_container.at_page:not(.compact) #im_page_containers,
.peer-window-open #im_container.compact .im_page.page-other {
    border: 0!important;
    box-shadow: none;
}

.peer-window {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--body-background-color);
    font-size: 13px;
    line-height: 19px;

    .peer-side {
        padding-bottom: 12px;
        flex: 1 0 auto;
        gap: 0;
    }

    .peer-side .peer-info {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        align-items: start;
        gap: 0 16px;
        min-height: 75px;
        padding: 25px 25px 20px;
        border: 0;
        border-radius: 0;
        border: 1px solid var(--border-color);
        border-top: 0;
        margin-bottom: 12px;
    }

    .peer-side .peer-info .peer-avatar {
        width: 80px;
        height: 80px;
        margin-top: -5px;
        overflow: hidden;
        border-radius: 50%;
        background: var(--border-color);
    }

    .peer-side .peer-info .peer-avatar > img {
        border-radius: 50%;
    }

    .peer-side .peer-info .avatar-opener {
        height: 26px;
    }
    .peer-side .peer-info .avatar-opener .lupa {
        width: 13px;
        height: 13px;
        background: url(../icons/zoom_photo.png) 0px 0px;
        filter: none;
        opacity: 0.75;
    }

    .peer-side .peer-info .peer-name {
        gap: 0;
    }

    .peer-side .peer-info .peer-name .peer-link {
        margin-top: 13px;
        font-size: 19px;
        line-height: 23px;
        font-weight: 400;
        color: var(--heading-color);
        word-wrap: break-word;
    }

    .peer-side .peer-info .peer-name .peer-link:hover {
        text-decoration: none;
    }

    /* seamless title editor */
    .peer-title-edit-wrap {
        width: 100%;
    }

    .peer-side .peer-info .peer-name .peer-title-input {
        flex: 1;
        min-width: 0;
        margin: 13px 0 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        outline: none;
        font-family: var(--font-family);
        font-size: 19px;
        line-height: 23px;
        font-weight: 400;
        color: var(--heading-color);
        height: unset;
    }

    .peer-title-save-btn,
    .peer-title-cancel-btn {
        display: none;
    }

    .peer-status span {
        font-size: 13px;
        line-height: 19px;
        color: var(--muted-text-color-2);
    }

    .peer-block {
        background: var(--bg-page);
        border: 1px solid var(--border-color);
        margin-bottom: 12px;
    }

    .peer-rows {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .peer-rows li {
        position: relative;
        margin: 0 0 -1px;
        padding: 0;
        background: none;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
    }

    .peer-rows li::before {
        content: '';
        position: absolute;
        bottom: -1px;
        right: 25px;
        left: 25px;
        height: 1px;
        background: var(--vk-im-divider);
    }

    .peer-rows li:last-child::before,
    .peer-rows li:hover::before {
        content: none;
    }

    .peer-rows li:hover {
        border-color: var(--vk-im-divider);
        background: var(--vk-im-hover);
    }

    .peer-rows li:first-child:hover {
        border-top-color: transparent;
    }

    .peer-rows li:last-child:hover {
        border-bottom-color: transparent;
    }

    .peer-rows li a,
    .peer-block--manage .peer-invite-section .chat-tab-2-header b {
        position: relative;
        display: flex;
        align-items: center;
        height: 54px;
        padding: 0 25px;
        box-sizing: border-box;
        font-size: 13px;
        line-height: 28px;
        font-weight: 400;
        color: var(--link-color);
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
    }

    .peer-rows li a::before,
    .peer-block--manage .peer-invite-section .chat-tab-2-header b::before {
        content: '';
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        margin-right: 12px;
        border-radius: 50%;
        background: var(--vk-im-icon);
    }

    .peer-rows li a::after {
        content: '';
        width: 8px;
        height: 14px;
        margin: 0 7px 0 auto;
        background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%2214%22%20viewBox%3D%220%200%208%2014%22%3E%3Cpath%20fill%3D%22%23828A99%22%20d%3D%22M1.2%2013.8c-.2%200-.4-.1-.5-.2-.3-.3-.3-.8%200-1.1l5.5-5.5-5.5-5.5c-.3-.3-.3-.8%200-1.1s.8-.3%201.1%200l6%206c.3.3.3.8%200%201.1l-6%206c-.2.2-.4.3-.6.3z%22%2F%3E%3C%2Fsvg%3E');
        opacity: .7;
    }

    .peer-rows li#dm_files a::before {
        background: var(--vk-im-icon-blue) url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.3%2015.9c-1.3%200-2.7-.5-3.7-1.5s-1.5-2.3-1.5-3.7.5-2.7%201.5-3.7l5.5-5.4c.7-.7%201.7-1.1%202.7-1.1%201%200%202%20.4%202.7%201.1%201.5%201.5%201.5%203.9%200%205.4l-5.5%205.5c-.8.8-2.2.9-3.1.2l-.1-.1c-.4-.4-.7-.9-.8-1.5s0-1.1.4-1.6l.1-.1%203.7-3.8c.3-.3.8-.3%201.1%200%20.3.3.3.8%200%201.1l-3.7%203.8c-.2.2-.2.4-.2.5%200%20.2.1.3.2.4l.1.1c.3.3.8.2%201.1-.1l5.5-5.5c.9-.9.9-2.4%200-3.3-.4-.4-1-.7-1.6-.7-.6%200-1.2.2-1.6.7l-5.4%205.4c-.7.7-1.1%201.7-1.1%202.7s.4%202%201.1%202.7c1.4%201.4%203.8%201.4%205.2%200l3.6-3.5c.3-.3.8-.3%201.1%200%20.3.3.3.8%200%201.1l-3.6%203.5c-1.1%201-2.4%201.4-3.7%201.4z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    }

    .peer-rows li#pinned a::before {
        background: var(--vk-im-icon-green) url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M5.3%208.3l-2.9%202.9c-.4.4-1%20.4-1.4%200-.4-.4-.4-1%200-1.4l2.9-2.9-2.9-2.8v-.2c0-.1.1-.2.2-.2h2c1.6%200%203.1-.6%204.2-1.7l.2-.2.4-1.6s0-.1.1-.1c0-.1.1-.1.2%200l3.9%203.9s0%20.1.1.1c0%20.1%200%20.2-.1.2l-1.6.4-.2.2c-1.3%201.1-1.9%202.6-1.9%204.2v2c0%20.1%200%20.1-.1.1-.1.1-.2.1-.3%200l-2.8-2.9z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    }

    .peer-rows li#rights a::before {
        background: var(--vk-im-icon) url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M5.7%202.4c1-.6%201.2-1.2%201.3-1.8.1-.6.3-.6.7-.6h.6c.4%200%20.5%200%20.7.7.2.6.3%201.2%201.3%201.8%201.1.3%201.7%200%202.2-.3.6-.4.7-.2.9%200l.5.5c.2.2.3.3%200%20.9-.3.6-.6%201.1-.3%202.2.6%201%201.2%201.2%201.8%201.3.6%200%20.6.2.6.6v.6c0%20.3%200%20.5-.7.7-.6.2-1.2.3-1.8%201.3-.3%201.1%200%201.7.3%202.2.4.6.2.7%200%20.9l-.5.5s-.3.3-.9%200c-.6-.3-1.1-.6-2.2-.3-1%20.6-1.2%201.2-1.3%201.8%200%20.6-.2.6-.6.6h-.6c-.3%200-.5%200-.7-.7-.2-.6-.3-1.2-1.3-1.8-1.1-.3-1.7%200-2.2.3-.6.4-.7.2-.9%200l-.5-.5c-.2-.2-.3-.3%200-.9.3-.6.6-1.1.3-2.2-.5-.9-1.1-1.1-1.7-1.2-.7-.1-.7-.3-.7-.7v-.6c0-.4%200-.5.7-.7.6-.2%201.2-.3%201.8-1.3.3-1.1%200-1.7-.3-2.2-.5-.5-.3-.7-.1-.9l.5-.5c.2-.2.3-.3.9%200%20.6.3%201.1.6%202.2.3zm2.3%209c1.9%200%203.4-1.5%203.4-3.4s-1.5-3.4-3.4-3.4-3.4%201.5-3.4%203.4%201.5%203.4%203.4%203.4z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    }

    .peer-rows li#ava a::before {
        background: var(--vk-im-icon-blue) url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M3%2011l2%202-.6.6-2.2.4c-.1%200-.2-.1-.2-.2l.4-2.2.6-.6zm1.5-1.5l7.2-7.2c.4-.4%201-.4%201.4%200l.6.6c.4.4.4%201%200%201.4l-7.2%207.2-2-2z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    }

    .peer-rows li#notify_toggle a::before {
        background: var(--vk-im-icon-red) url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M10%2013.4c0%201-.5%201.3-1.5.5-1.4-1.2-3-2.6-3.5-3-.5-.4-1.3-.5-2.5-.5s-1.5-.5-1.5-1v-3c.1-.7.3-1%201.5-1s2-.1%202.5-.5%202.1-1.8%203.5-3c1-.8%201.5-.5%201.5.5v11zm3.2-1.6c-.3.2-.7.3-1%200-.3-.2-.3-.6%200-.9.9-.8%201.4-1.8%201.4-3s-.5-2.2-1.4-2.9c-.3-.2-.3-.6%200-.9.3-.2.7-.2%201%200%201.1%201.1%201.8%202.4%201.8%203.9s-.7%202.8-1.8%203.8z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    }

    .peer-rows li#clean a::before {
        background: var(--vk-im-icon-red) url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8%209.4l2.8%202.8c.4.4%201%20.4%201.4%200%20.4-.4.4-1%200-1.4l-2.8-2.8%202.8-2.8c.4-.4.4-1%200-1.4-.4-.4-1-.4-1.4%200l-2.8%202.8-2.8-2.8c-.4-.4-1-.4-1.4%200-.4.4-.4%201%200%201.4l2.8%202.8-2.8%202.8c-.4.4-.4%201%200%201.4.4.4%201%20.4%201.4%200l2.8-2.8z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    }

    .peer-rows li#return_to_chat a::before,
    .peer-rows li#return_to_chat a::after,
    .peer-rows li#club_allow a::before,
    .peer-rows li#club_allow a::after,
    .peer-rows li#club_deny a::before,
    .peer-rows li#club_deny a::after,
    .peer-rows li#kick_user a::before,
    .peer-rows li#kick_user a::after,
    .peer-rows li#debug a::before,
    .peer-rows li#debug a::after {
        display: none;
    }

    .peer-rows li#return_to_chat a,
    .peer-rows li#club_allow a,
    .peer-rows li#club_deny a {
        font-weight: 500;
    }

    .peer-rows li#kick_user a {
        color: var(--vk-im-danger);
    }

    .peer-rows li#invite_link a::before {
        background: var(--vk-im-icon-green) url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%203h-7c-.6%200-1%20.4-1%201s.4%201%201%201h4.6l-6.3%206.3c-.4.4-.4%201%200%201.4.2.2.4.3.7.3s.5-.1.7-.3l6.3-6.3v4.6c0%20.6.4%201%201%201s1-.4%201-1v-7c0-.6-.4-1-1-1z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    }

    .peer-rows li#invite_link a::after {
        display: none;
    }

    .peer-invite-row-label {
        flex: none;
    }

    .peer-invite-row-link {
        flex: 0 1 auto;
        min-width: 0;
        margin-left: 4px;
        color: var(--muted-text-color-2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .peer-block--manage .peer-invite-section {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .peer-block--manage .peer-invite-section .chat-tab-2-header {
        display: block;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .peer-block--manage .peer-invite-section .chat-tab-2-header b::before {
        background: var(--vk-im-icon-green) url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%203h-7c-.6%200-1%20.4-1%201s.4%201%201%201h4.6l-6.3%206.3c-.4.4-.4%201%200%201.4.2.2.4.3.7.3s.5-.1.7-.3l6.3-6.3v4.6c0%20.6.4%201%201%201s1-.4%201-1v-7c0-.6-.4-1-1-1z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    }

    .peer-invite-body {
        padding: 2px 25px 11px 65px;
    }

    .peer-invite-input {
        padding: 6px 8px;
        font-size: 13px;
        font-weight: 700;
    }

    .peer-invite-reset {
        margin-top: 8px;
        font-size: 13px;
        font-weight: 500;
    }

    .peer-members-section {
        padding: 0;
        border: 0;
    }

    .peer-members-section .chat-tab-2-header {
        align-items: flex-end;
        height: 45px;
        margin: 0;
        padding: 0 21px;
        box-sizing: border-box;
        border: 0;
        border-bottom: 1px solid var(--vk-im-divider);
        background: transparent;
    }

    .peer-members-section .chat-tab-2-header b {
        display: block;
        margin: 0 4px -1px;
        padding: 16px 6px 13px;
        border-bottom: 2px solid var(--accent-color-2);
        line-height: 14px;
        font-weight: 400;
        color: var(--text-color);
    }

    .peer-add-row {
        padding: 12px 25px 8px;
    }

    .peer-add-row a {
        display: inline-flex;
        align-items: center;
        color: var(--link-color);
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
    }

    .peer-add-row a:hover {
        text-decoration: underline;
    }

    .peer-add-row a::before {
        content: '';
        display: block;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        margin-right: 12px;
        box-sizing: border-box;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        background: var(--module-background-color) url('data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%207h6c.552%200%201%20.448%201%201s-.448%201-1%201h-6v6c0%20.552-.448%201-1%201s-1-.448-1-1v-6h-6c-.552%200-1-.448-1-1s.448-1%201-1h6v-6c0-.552.448-1%201-1s1%20.448%201%201z%22%20fill%3D%22%239bb2cc%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
    }

    .chat-members-list {
        padding: 0 0 4px;
        border: 0;
        background: transparent;
    }

    .chat-members-list .chat-member-item {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto auto;
        grid-template-areas:
            "ava name role actions"
            "ava online role actions";
        column-gap: 12px;
        row-gap: 4px;
        min-height: 40px;
        padding: 8px 25px;
        box-sizing: border-box;
        border: 0;
        font-weight: 400;
        background: transparent;
    }

    .chat-members-list .chat-member-item:hover {
        background: var(--vk-im-hover);
    }

    .chat-members-list .chat-member-item .inf,
    .chat-members-list .chat-member-item .chat-member-info {
        display: contents;
    }

    .chat-members-list .chat-member-item .inf > a {
        grid-area: ava;
        display: block;
        line-height: 0;
    }

    .chat-members-list .chat-member-item img.chat-member-ava {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--module-background-color--secondary);
    }

    .chat-members-list .chat-member-item .chat-member-name {
        grid-area: name;
        align-self: end;
        font-size: 13px;
        line-height: 15px;
        font-weight: 500;
        color: var(--link-color);
    }

    .chat-members-list .chat-member-item .chat-member-badge {
        grid-area: role;
        padding: 0;
        background: none;
        color: var(--muted-text-color);
        font-size: 13px;
        line-height: 15px;
        font-weight: 400;
    }

    .chat-members-list .chat-member-item .chat-member-online {
        grid-area: online;
        align-self: start;
        margin: 0;
        font-size: 13px;
        line-height: 15px;
        color: var(--muted-text-color);
    }

    .chat-members-list .chat-member-item .chat-member-actions {
        grid-area: actions;
        gap: 12px;
        margin-left: 0;
    }

    .chat-members-list .chat-member-item .chat-member-action-btn {
        font-size: 13px;
    }

    .chat-members-list .chat-member-item .chat-member-action-kick {
        width: 14px;
        height: 14px;
        border-radius: 0;
        background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20fill%3D%22%23828A99%22%20d%3D%22M6.4%205l3.3-3.3c.4-.4.4-1%200-1.4s-1-.4-1.4%200l-3.3%203.3-3.3-3.3c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l3.3%203.3-3.3%203.3c-.4.4-.4%201%200%201.4.2.2.4.3.7.3s.5-.1.7-.3l3.3-3.3%203.3%203.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1%200-1.4l-3.3-3.3z%22%2F%3E%3C%2Fsvg%3E') 50% no-repeat;
        opacity: .5;
    }

    .chat-members-list .chat-member-item .chat-member-action-kick:hover {
        opacity: .7;
    }

    .chat-members-list .chat-member-item .chat-member-action-kick .chats-close-icon {
        display: none;
    }

    .chat-members-list .chat-member-item .chat-member-action-mod .chat-mod-star-icon {
        opacity: .5;
    }

    .peer-block--footer .peer-rows li a {
        height: 54px;
    }

    .peer-leave-row a {
        display: block;
        padding: 0 25px;
        font-size: 13px;
        line-height: 54px;
        text-align: center;
        color: var(--vk-im-danger);
        text-decoration: none;
        cursor: pointer;
    }

    .peer-leave-row a:hover {
        background: var(--vk-im-hover);
    }
}

#im_container.compact .peer-window .peer-back,
#im_container.compact .peer-window .peer-info,
#im_container.compact .peer-window .peer-block {
    border-left: 0;
}

.im_mobile .peer-window .peer-side .peer-info {
    padding: 20px 15px 16px;
}

.im_mobile .peer-window .peer-rows li a,
.im_mobile .peer-window .chat-members-list .chat-member-item,
.im_mobile .peer-window .peer-add-row,
.im_mobile .peer-window .peer-invite-body {
    padding-left: 15px;
    padding-right: 15px;
}

/* Chat invite page */
.chat-invite-tab-page {
    margin: auto;
}
.chat-invite-member-ava,
.chat-invite-avatar {
    border-radius: 50%;
    box-shadow: none;
}

.chat-invite-redirect-hint {
    color: var(--muted-text-color-2);
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {
    .body_im .appbar {
        position: static;
    }

    /* --ovk-vv-* tracks the visual viewport on browsers where only it shrinks
       for the on-screen keyboard. Set by messenger/mobile-mode.js. */
    html:has(.body_im), body.body_im, .body_im .layout {
        height: var(--ovk-vv-height, 100dvh);
        max-height: var(--ovk-vv-height, 100dvh);
    }
    body.body_im .page_body {
        margin: 0!important;
        top: calc(var(--ovk-vv-top, 0px) + var(--header-height));
        height: calc(var(--ovk-vv-height, 100dvh) - var(--header-height));
        max-height: calc(var(--ovk-vv-height, 100dvh) - var(--header-height));
    }
    body.body_im .messenger-app--header.messages--peers-header-peer-name,
    body.body_im .messages--actions {
        top: var(--ovk-vv-top, 0px);
    }

    #im_container.at_page:not(.compact) #im_page_tabs {
        display: none;
    }

    #im_container.at_page:not(.compact) #im_page_containers {
        width: 100%;
        margin-right: 0;
        border-radius: 0;
    }

    #im_container.at_page:not(.compact) {
        --messenger-width: 100%;
        margin: 0 !important;
        padding: 0;
    }

    #im_container.at_page .messenger-app--messages---message>.messenger-app--messages---message--wrap {
        padding: 0 12px!important;
    }

    #im_container.at_page {
        height: calc(var(--ovk-vv-height, 100dvh) - var(--header-height));
        max-height: calc(var(--ovk-vv-height, 100dvh) - var(--header-height));
    }

    #im_container.at_page:not(.compact) .im_page.page-conversations,
    #im_container.at_page #im_page_containers,
    #im_container.at_page .im_page:not(.hidden),
    #im_container.at_page .im_page.page-other {
        min-height: calc(100vh - var(--header-height));
        min-height: calc(var(--ovk-vv-height, 100dvh) - var(--header-height));
        height: calc(100vh - var(--header-height));
        height: calc(var(--ovk-vv-height, 100dvh) - var(--header-height));
    }

    .im_mobile .msg-attachments-container:has(.msg-makima-grid) {
        max-width: 70vw;
    }
    .im_mobile .msg-attachments-container {
        max-width: 70vw;
    }
    .im_mobile .msg-media-tile, .msg-attach-j-photo {
        height: 100% !important;
    }

    .messenger-app--messages---message .audioEmbed.msg-attach-audio-player,
    .ovk-attachments-modal-content .audioEmbed.msg-attach-audio-player {
        margin: 0 0 10px;
    }

    .messenger-app .messenger-app-status .write-bar {
        padding: 0 0 0 19px;
    }
}

/* ==========================================================================
   User send-message dialog (VK mail-compose box style)
   ========================================================================== */

#user-send-dialog {
    padding: 0;
}

#user-send-dialog .user-send-centre {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

#user-send-dialog .user-send-left {
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    width: 72px;
}

/* stock .user-send-left img sets 100px */
#user-send-dialog .user-send-left img.udlg-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

#user-send-dialog .udlg-send-right #write {
    margin-top: 0;
}

#user-send-dialog .udlg-goto {
    font-size: 12px;
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;
}

#user-send-dialog .udlg-goto:hover {
    text-decoration: underline;
}

#user-send-dialog .udlg-send-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#user-send-dialog .udlg-info {
    line-height: 18px;
}

#user-send-dialog .udlg-name {
    color: var(--heading-color);
    text-decoration: none;
}

#user-send-dialog .udlg-online {
    font-size: 12px;
    line-height: 16px;
    color: var(--muted-text-color-2);
}

/* VK compose field */
#user-send-dialog #write .udlg-textarea,
#user-send-dialog #write .content-editable-wrap .content-editable {
    width: 100%;
    box-sizing: border-box;
    min-height: 96px;
    padding: 8px 10px;
    border: 1px solid var(--border-color-3);
    border-radius: 2px;
    background: var(--module-background-color);
    font-size: 13px;
    line-height: 18px;
    color: var(--text-color);
    outline: none;
}

#user-send-dialog .udlg-actions .attachment-icons {
    display: flex;
    justify-content: flex-start !important;
    gap: 6px;
}

#user-send-dialog .udlg-actions .attachment-icons div {
    width: 22px;
    height: 22px;
    opacity: .7;
    background: url(../icons/post_icon.png) no-repeat;
}

#user-send-dialog .udlg-actions .attachment-icons div:hover {
    opacity: 1;
}

#user-send-dialog .udlg-actions .attachment-icons div img {
    display: none;
}

#user-send-dialog .udlg-actions .attachment-icons #__photoAttachment    { background-position: left -65px; }
#user-send-dialog .udlg-actions .attachment-icons #__videoAttachment    { background-position: left -87px; }
#user-send-dialog .udlg-actions .attachment-icons #__audioAttachment    { background-position: left -109px; }
#user-send-dialog .udlg-actions .attachment-icons #__documentAttachment { background-position: left -131px; }

/* footer */
#user-send-dialog .modal-footer-actions {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

#user-send-dialog .modal-footer-actions > div:first-child {
    display: none;
}

#user-send-dialog .modal-footer-actions #_close {
    background: none;
    border: 0;
    box-shadow: none;
    min-width: 0;
    color: var(--link-color);
    font-weight: 400;
}

#user-send-dialog .modal-footer-actions #_close:hover {
    background: none;
    text-decoration: underline;
}

/* ==========================================================================
   FastChat (VK 2016 notifier.css style)
   ========================================================================== */

#fastchats_container {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
    display: block;
    font-family: var(--font-family);
    font-size: 12.5px;
    pointer-events: none;
}

#fastchats_container .vkify_fc_root > * {
    pointer-events: auto;
}

/* Right-bottom dock (#chat_onl_wrap) */
#fastchats_container .chat_onl_wrap {
    display: block;
    position: fixed;
    bottom: 0;
    right: 10px;
    text-align: center;
    z-index: 1500;
}

#fastchats_container .chat_onl_inner {
    position: relative;
    background-color: var(--elevator-bg-color);
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

#fastchats_container .chat_tab_wrap,
#fastchats_container .chat_tab_wrap.fc_online_tab_pinned {
    display: block;
    position: relative;
    bottom: auto;
    right: auto;
    overflow: hidden;
    cursor: pointer;
    width: 52px;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 6px;
    box-sizing: border-box;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-family);
    animation: none;
    text-decoration: none;
}

#fastchats_container .chat_tab_wrap:hover,
#fastchats_container .chat_tab_wrap.fc_online_tab_pinned:hover {
    background-color: var(--sidebar-count-color);
    box-shadow: none;
    text-decoration: none;
}

#fastchats_container .chat_onl_cont {
    padding: 6px 0;
}

#fastchats_container .chat_onl,
#fastchats_container .chat_onl.fc_online_tab_label {
    color: var(--post-meta-color);
    font-size: 11px;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 14px;
    line-height: 14px;
    display: block;
    text-align: center;
}

#fastchats_container .chat_onl::after {
    display: inline-block;
    content: ' ';
    width: 9px;
    height: 11px;
    background: url(../icons/chats.png) no-repeat 0 -116px;
    margin-bottom: -1px;
    margin-left: 4px;
}

#fastchats_container .chat_cont_scrolling {
    position: relative;
    scrollbar-width: none;
}

#fastchats_container .chat_cont_scrolling::-webkit-scrollbar {
    display: none;
}

#fastchats_container .chat_tab_imgcont {
    position: relative;
    height: 40px;
    width: 40px;
    transition: height 100ms ease-in-out, opacity 100ms ease-in-out;
}

#fastchats_container .chat_tab_img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

#fastchats_container .chat_tab_imgcont.online::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--elevator-bg-color);
    background-color: var(--success-color);
    border-radius: 50%;
    height: 7px;
    width: 7px;
    box-sizing: content-box;
}

#fastchats_container .chat_tab_wrap:hover .chat_tab_imgcont.online::after {
    border-color: var(--sidebar-count-color);
}

#fastchats_container .chat_tab_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .65);
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 2;
}

#fastchats_container .chat_tab_close::after {
    display: block;
    content: ' ';
    width: 14px;
    height: 14px;
    background: url(../icons/chats.png) no-repeat 3px -43px;
    opacity: 0.7;
}

#fastchats_container .chat_tab_wrap:hover .chat_tab_close,
#fastchats_container .chat_tab_close:hover::after {
    opacity: 1;
}

#fastchats_container .chat_tab_counter {
    position: absolute;
    top: 6px;
    left: 6px;
    height: 17px;
    line-height: 13px;
    min-width: 17px;
    border-radius: 8px;
    padding: 2px 4px;
    background-color: var(--gift-limit-background);
    color: var(--white);
    font-weight: 500;
    font-size: 11px;
    box-sizing: border-box;
    z-index: 2;
}

#fastchats_container .chat_tab_typing_wrap {
    display: none;
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 3px;
    border-radius: 3px 0 0 0;
    background-color: var(--elevator-bg-color);
}

#fastchats_container .chat_tab_wrap:hover .chat_tab_typing_wrap {
    background-color: var(--sidebar-count-color);
}

#fastchats_container .chat_tab_typing_icon {
    height: 7px;
    width: 7px;
    background-position: 0 -143px;
}

/* Sprite & Window Box Chrome */
#fastchats_container .chats_sp {
    background: url(../icons/chats.png) no-repeat;
}

#fastchats_container .rb_box_wrap.fc_friends_window,
#fastchats_container .rb_box_wrap.fc_chat_box {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none !important;
    padding: 0;
    overflow: visible;
    display: block;
    animation: none;
}

#fastchats_container .fc_tab_wrap {
    position: relative;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
    border-radius: 3px;
    font-size: 12.5px;
    background: transparent;
}

#fastchats_container .fc_tab_wrap.fc_tobottom {
    border-radius: 3px 3px 0 0;
}

#fastchats_container .fc_tab_head,
#fastchats_container .fc_tab_head.fc_head {
    cursor: move;
    background-color: var(--header-background-color);
    border: 1px solid var(--header-background-color--hover);
    border-radius: 3px 3px 0 0;
    padding: 0 7px 0 8px;
    height: 32px;
    line-height: 30px;
    display: block;
    box-sizing: border-box;
}

#fastchats_container .rb_inactive .fc_tab_head {
    background-color: var(--accent-color-3);
    border-color: var(--accent-color);
}

body.dark-mode #fastchats_container .rb_inactive .fc_tab_head {
    background-color: var(--module-header-background-color);
    border-color: var(--border-color);
}

#fastchats_container .rb_minimized .fc_tab_wrap {
    width: 180px !important;
}

#fastchats_container .fc_tab_close_wrap,
#fastchats_container .fc_tab_max_wrap,
#fastchats_container .fc_tab_pin_wrap,
#fastchats_container .fc_tab_close_wrap.fc_head_close,
#fastchats_container .fc_tab_max_wrap.fc_head_openfull {
    display: block;
    float: right;
    padding: 4px;
    margin-top: 5px;
    width: auto;
    height: auto;
    background: none;
    opacity: 1;
    cursor: pointer;
}

#fastchats_container .fc_tab_close_wrap.fc_head_close::before {
    content: none;
}

#fastchats_container .fc_tab_pin_wrap {
    display: none;
}

#fastchats_container .fc_fixed .fc_tab_pin_wrap {
    display: block;
}

#fastchats_container .fc_tab_close,
#fastchats_container .fc_tab_max,
#fastchats_container .fc_tab_pin {
    display: block;
    height: 12px;
    width: 12px;
    opacity: 0.6;
}

#fastchats_container .fc_tab_wrap .fc_tab_close {
    background-position: 2px -31px;
}

#fastchats_container .fc_tab_wrap .fc_tab_max {
    background-position: 1px -16px;
}

#fastchats_container .fc_tab_wrap .fc_tab_pin {
    background-position: 0 -1px;
}

#fastchats_container .fc_tab_close_wrap:hover .fc_tab_close,
#fastchats_container .fc_tab_max_wrap:hover .fc_tab_max,
#fastchats_container .fc_tab_pin_wrap:hover .fc_tab_pin {
    opacity: 1;
}

#fastchats_container .fc_tab_title,
#fastchats_container .fc_tab_title.fc_head_title {
    padding: 0 3px;
    font-size: 12px;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--header-text-color);
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Friends Contact List (#fc_clist) */
#fastchats_container #fc_ctabs_cont {
    border: 1px solid var(--border-color-2);
    border-top: none;
    border-radius: 0 0 3px 3px;
    background: var(--module-background-color);
}

#fastchats_container .fc_tobottom #fc_ctabs_cont {
    border-bottom: none;
    border-radius: 0;
}

#fastchats_container .fc_ctab {
    display: none;
}

#fastchats_container .fc_ctab.fc_ctab_active {
    display: block;
}

#fastchats_container .fc_contacts_wrap {
    overflow: hidden;
}

#fastchats_container #fc_contacts,
#fastchats_container #fc_contacts.fc_friends_list {
    position: relative;
    height: 299px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--module-background-color);
    border: none;
    border-radius: 0;
    padding: 0;
    scrollbar-width: thin;
}

#fastchats_container .fc_clist_empty,
#fastchats_container .fc_log_empty {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 16px;
    text-align: center;
    color: var(--muted-text-color);
    font-size: 12.5px;
    line-height: 17px;
}

#fastchats_container .fc_contact,
#fastchats_container .fc_contact.fc_friend_row {
    display: block;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: none;
    text-decoration: none;
    cursor: pointer;
}

#fastchats_container .fc_contact:hover {
    background-color: var(--module-background-color--secondary);
    text-decoration: none;
}

#fastchats_container img.fc_contact_photo,
#fastchats_container img.fc_contact_photo.fc_avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

#fastchats_container span.fc_contact_photo {
    float: left;
    display: block;
    position: relative;
    height: 34px;
    width: 34px;
}

#fastchats_container span.fc_contact_photo.online::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--module-background-color);
    background-color: var(--vk-im-online);
    border-radius: 50%;
    height: 6px;
    width: 6px;
    box-sizing: content-box;
}

#fastchats_container .fc_contact:hover span.fc_contact_photo.online::after {
    border-color: var(--module-background-color--secondary);
}

#fastchats_container .fc_contact_status {
    float: right;
    display: none;
    margin-left: 4px;
}

#fastchats_container .fc_contact:hover .fc_contact_status {
    display: block;
    background: url(../icons/chats.png) no-repeat 0 -153px;
    margin-top: 11px;
    margin-right: 3px;
    height: 13px;
    width: 12px;
    opacity: 0.7;
}

#fastchats_container .fc_contact_name,
#fastchats_container .fc_contact_name.fc_name {
    line-height: 34px;
    padding-left: 9px;
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 700;
    font-size: 12.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--post-action-color);
}

#fastchats_container .fc_contact_unread {
    font-size: 11px;
    color: var(--post-action-color);
}

#fastchats_container em.fc_clist_hl {
    font-style: normal;
    background: var(--vk-im-hl-bg);
    padding: 0;
    margin: 0;
}

/* Bottom search filter in friends window */
#fastchats_container div.fc_clist_filter_wrap,
#fastchats_container div.fc_clist_filter_wrap.fc_search_wrap {
    cursor: text;
    padding: 3px 8px 4px;
    border: none;
    border-top: 1px solid var(--quote-border-color);
    background: var(--module-background-color);
    border-radius: 0 0 3px 3px;
}

#fastchats_container .chats_sp.fc_clist_search_icon {
    float: left;
    background-position: 0 -100px;
    height: 12px;
    width: 12px;
    margin: 10px 0 0 5px;
}

#fastchats_container div.fc_clist_filter {
    overflow: hidden;
    font-size: 12.5px;
}

#fastchats_container #fc_clist_filter,
#fastchats_container #fc_clist_filter.fc_search_input {
    width: 100%;
    border: 0 !important;
    padding: 5px 20px 7px 7px;
    font-size: 12.5px;
    font-family: var(--font-family);
    background: transparent !important;
    color: var(--text-color);
    outline: none;
    box-shadow: none;
}

#fastchats_container #fc_clist_filter::placeholder {
    color: var(--search-placeholder-color);
}

#fastchats_container #fc_clist_filter:focus::placeholder {
    color: var(--search-placeholder-focus-color);
}

#fastchats_container .fc_clist_online_wrap {
    position: relative;
    float: right;
}

#fastchats_container .fc_clist_online,
#fastchats_container .fc_clist_online.fc_toggle_offline_btn {
    cursor: pointer;
    position: absolute;
    margin: 8px 0 0 -15px;
    padding: 4px;
    width: auto;
    height: auto;
    line-height: 0;
    background: transparent;
    border: none;
}

#fastchats_container .fc_clist_online::before {
    display: block;
    content: ' ';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--vk-im-online);
    opacity: 0.45;
}

#fastchats_container .fc_clist_online.fc_clist_online_active::before {
    opacity: 1;
}

/* Active Peer Chat Tab (.fc_tab) */
#fastchats_container .fc_tab {
    border: 1px solid var(--border-color-2);
    border-top: none;
    border-radius: 0 0 3px 3px;
    background-color: var(--button-background-color--light);
}

#fastchats_container .fc_fixed .fc_tab,
#fastchats_container .fc_tobottom .fc_tab {
    border-bottom: none;
    border-radius: 0;
}

#fastchats_container .fc_tab_log_wrap {
    overflow: hidden;
    position: relative;
}

#fastchats_container .fc_tab_log,
#fastchats_container .fc_tab_log.fc_messages_list {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    padding: 4px 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    display: block;
    scrollbar-width: thin;
}

#fastchats_container .fc_load_more {
    margin: 0 0 4px 0;
    padding: 6px;
    font-size: 12px;
    background: var(--module-background-color);
    border-bottom: 1px solid var(--quote-border-color);
    color: var(--link-color);
}

#fastchats_container .fc_msgs_wrap {
    padding: 4px 12px 4px 8px;
    position: relative;
}

#fastchats_container .fc_msgs_wrap::after {
    content: '';
    display: table;
    clear: both;
}

#fastchats_container .fc_msgs_unread {
    background-color: var(--vk-im-unread-bg);
}

#fastchats_container .fc_msgs_inner {
    position: relative;
    display: inline-block;
}

#fastchats_container .fc_msgs_out_inner {
    float: right;
}

#fastchats_container div.fc_msgs_author {
    display: table-cell;
    vertical-align: bottom;
}

#fastchats_container a.fc_msgs_img {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-size: cover;
    background-position: 50%;
    margin-right: 5px;
}

#fastchats_container .fc_msgs {
    display: table-cell;
    vertical-align: bottom;
    background-color: var(--module-background-color);
    border: 1px solid var(--fc-in-bubble-border);
    padding: 4px 6px 3px;
    border-radius: 6px;
    box-sizing: border-box;
    max-width: 200px;
}

#fastchats_container .fc_msgs_out .fc_msgs {
    background-color: var(--fc-out-bubble-background);
    border: 1px solid var(--fc-out-bubble-border);
}

#fastchats_container .fc_msg_sticker .fc_msgs {
    background: none;
    padding: 0;
    border: 0;
}

/* Gift messages inside FastChat */
#fastchats_container .fc_msgs_wrap.msg-gift .fc_msgs {
    background-color: var(--gift-message-background) !important;
    border-color: color-mix(in srgb, var(--gift-message-text) 25%, var(--transparent)) !important;
    padding: 8px 10px 6px;
    text-align: center;
}

#fastchats_container .fc_msgs_wrap.msg-gift .fc_msg,
#fastchats_container .fc_msgs_wrap.msg-gift .fc_msg.fc_msg_row {
    background: transparent !important;
    padding: 2px 0;
    margin: 0;
}

#fastchats_container .fc_msgs_wrap.msg-gift .fc_msg_postfix {
    color: var(--gift-message-text);
    font-size: 11.5px;
    font-style: normal;
    margin: 0 0 6px;
    text-align: center;
}

#fastchats_container .fc_msgs_wrap.msg-gift .fc_msg_text {
    color: var(--gift-message-text);
    font-size: 12px;
    text-align: center;
    transform: none;
    margin-top: 6px;
}

#fastchats_container .fc_msgs_wrap.msg-gift .msg-attach-w-gift {
    display: block;
    width: fit-content;
    margin: 4px auto;
    transform: none;
}

#fastchats_container .fc_msgs_wrap.msg-gift .msg-attach-w-gift img {
    max-width: 96px !important;
    max-height: 96px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 6px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, .06), 0 1px 2px 0 rgba(0, 0, 0, .06);
}

#fastchats_container .fc_msgs_wrap.msg-gift .fc_msgs_date {
    color: var(--gift-message-text);
    opacity: 0.75;
}

#fastchats_container .fc_msg,
#fastchats_container .fc_msg.fc_msg_row {
    display: block;
    padding: 4px 2px 2px;
    line-height: 17px;
    border: none;
}

#fastchats_container .fc_msg:first-child {
    padding-top: 0;
}

#fastchats_container .fc_msg .fc_msg_text {
    font-size: 12.5px;
    line-height: 17px;
    word-break: break-word;
    color: var(--text-color);
}

#fastchats_container .fc_msgs_date {
    color: var(--muted-text-color);
    font-size: 11px;
    padding: 4px 0 3px;
    opacity: 0.8;
    text-align: center;
}

/* Replied & forwarded messages inside FastChat (VK flat left-strip style) */
#fastchats_container .fc_chat_box .reply-msg-container {
    margin: 3px 0 5px 1px;
    padding: 0 0 0 7px;
    border: none;
    border-left: 2px solid var(--quote-border-color);
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    line-height: 15px;
    transition: border-color 0.15s ease;
}

#fastchats_container .fc_chat_box .fc_msgs_out .reply-msg-container,
#fastchats_container .fc_chat_box .fc_msgs_out .fwd-messages-container {
    border-left-color: color-mix(in srgb, var(--post-action-color) 35%, var(--transparent));
}

#fastchats_container .fc_chat_box .reply-msg-container:hover {
    border-left-color: var(--vk-im-reply-hover);
    background: transparent;
}

#fastchats_container .fc_chat_box .reply-msg-container .reply-msg-head {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 7px;
    margin-bottom: 3px;
    line-height: 13px;
    align-items: center;
}

#fastchats_container .fc_chat_box .reply-msg-container .reply-avatar-link {
    grid-row: 1 / 3;
    align-self: center;
    line-height: 0;
}

#fastchats_container .fc_chat_box .reply-msg-container .reply-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

#fastchats_container .fc_chat_box .reply-msg-container .reply-author-name {
    grid-column: 2;
    font-size: 12px;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--post-action-color);
    line-height: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    justify-self: start;
    text-decoration: none;
}

#fastchats_container .fc_chat_box .reply-msg-container .reply-author-name:hover {
    text-decoration: underline;
}

#fastchats_container .fc_chat_box .reply-msg-container .reply-date {
    grid-column: 2;
    font-size: 11px;
    color: var(--vk-im-time);
    line-height: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#fastchats_container .fc_chat_box .reply-msg-container .reply-text {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-color);
    white-space: normal;
    word-break: break-word;
}

#fastchats_container .fc_chat_box .fwd-messages-container {
    margin: 4px 0 2px 1px;
    padding: 0 0 0 7px;
    border: none;
    border-left: 2px solid var(--quote-border-color);
    background: transparent;
    display: block;
}

#fastchats_container .fc_chat_box .fwd-message-block {
    margin: 6px 0;
    font-size: 12px;
    line-height: 16px;
}

#fastchats_container .fc_chat_box .fwd-message-block:first-of-type {
    margin-top: 2px;
}

#fastchats_container .fc_chat_box .fwd-message-block:last-of-type {
    margin-bottom: 2px;
}

#fastchats_container .fc_chat_box .fwd-message-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}

#fastchats_container .fc_chat_box .fwd-avatar-link {
    line-height: 0;
    flex-shrink: 0;
}

#fastchats_container .fc_chat_box .fwd-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

#fastchats_container .fc_chat_box .fwd-author-info {
    display: block;
    line-height: 13px;
    min-width: 0;
    overflow: hidden;
}

#fastchats_container .fc_chat_box .fwd-author-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--post-action-color);
    line-height: 13px;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#fastchats_container .fc_chat_box .fwd-author-name:hover {
    text-decoration: underline;
}

#fastchats_container .fc_chat_box .fwd-date {
    display: block;
    font-size: 11px;
    color: var(--vk-im-time);
    line-height: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#fastchats_container .fc_chat_box .fwd-text {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-color);
    word-break: break-word;
    margin-top: 2px;
}

/* Typing indicator inside FastChat log */
#fastchats_container .fc_tab_typing {
    color: var(--muted-text-color);
    opacity: 0;
    min-height: 1.2em;
    max-height: 2.4em;
    line-height: 120%;
    padding: 3px 4px 7px 39px;
    vertical-align: middle;
    pointer-events: none;
    transition: opacity 200ms ease-in-out;
}

#fastchats_container .fc_tab_typing_icon {
    display: none;
    float: left;
    opacity: 1;
    line-height: inherit;
    margin: 0 0 0 -27px;
}

#fastchats_container .fc_tab_typing_icon .pr_bt {
    margin-right: 3px;
    background-color: var(--muted-text-color);
    vertical-align: middle;
    margin-top: -2px;
}

#fastchats_container .fc_tab_typing_icon .pr_bt:last-child {
    margin-right: 0;
}

/* Fastchat input area (.fc_tab_txt) */
#fastchats_container .fc_tab_txt_wrap.fc_input_bar:not(.fc_cant_write_bar) {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    display: block;
}

#fastchats_container div.fc_tab_txt {
    background: var(--module-background-color);
    padding: 6px 3px 4px 10px;
    border-top: 1px solid var(--quote-border-color);
}

#fastchats_container .emoji_cont {
    position: relative;
}

#fastchats_container .fc_tab_txt .emoji_smile_wrap {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 2px 0 0;
}

#fastchats_container .fc_tab_txt .emoji_smile {
    position: relative;
    cursor: pointer;
    opacity: 0.7;
    z-index: 4;
    transition: opacity 200ms ease-in-out;
}

#fastchats_container .fc_tab_txt .emoji_smile:hover {
    opacity: 1;
}

#fastchats_container .fc_editable,
#fastchats_container .fc_editable.fc_textarea {
    width: 100%;
    min-height: 28px;
    max-height: 80px;
    padding: 2px 26px 2px 0;
    border: 0;
    resize: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: 12.5px;
    line-height: 17px;
    color: var(--text-color);
    box-sizing: border-box;
    display: block;
}

#fastchats_container .fc_editable::placeholder {
    color: var(--search-placeholder-color);
}

#fastchats_container .fc_editable:focus::placeholder {
    color: var(--search-placeholder-focus-color);
}

/* Pointer arrow towards the right dock */
#fastchats_container .fc_pointer_offset {
    position: absolute;
    right: 1px;
    bottom: 28px;
}

#fastchats_container .fc_tab_pointer {
    display: none;
    position: relative;
}

#fastchats_container .fc_fixed .fc_tab_pointer {
    display: block;
}

#fastchats_container .fc_tab_pointer::before,
#fastchats_container .fc_tab_pointer::after {
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    left: 100%;
    top: 9px;
}

#fastchats_container .fc_tab_pointer::before {
    border-width: 6px;
    margin: -6px 0;
    border-left-color: var(--border-color-2);
}

#fastchats_container .fc_tab_pointer::after {
    border-width: 5px;
    margin: -5px 0;
    border-left-color: var(--module-background-color);
}

#fastchats_container .fc_tab_pointer.fc_tab_pointer_peer::after {
    border-left-color: var(--button-background-color--light);
}

/* Resize handle for unpinned boxes */
#fastchats_container .rb_resize_wrap {
    position: relative;
}

#fastchats_container .chats_sp.rb_resize {
    cursor: se-resize;
    position: absolute;
    top: -12px;
    right: 3px;
    height: 10px;
    width: 10px;
    background-position: 2px -130px;
}

#fastchats_container .fc_fixed .chats_sp.rb_resize {
    display: none;
}