/* ==========================================================================
   Личные сообщения V11 — «Скованные Троном»
   ========================================================================== */

body.page-messages {
    overflow: hidden;
}

body.page-messages .site-footer {
    display: none !important;
}

body.page-messages .site-main {
    min-height: calc(100svh - var(--header-height));
}

.header-messages-button {
    position: relative;
    flex: 0 0 auto;
}

.header-messages-button.has-unread {
    color: #f6c1cf;
    border-color: rgba(221, 107, 137, 0.28);
    background: rgba(183, 47, 85, 0.1);
    box-shadow: 0 0 24px rgba(183, 47, 85, 0.12);
}

.header-messages-badge {
    right: -3px;
    top: -4px;
}

.messages-app {
    --msg-bg: #070b11;
    --msg-surface: #0d141e;
    --msg-surface-2: #111a27;
    --msg-surface-3: #172231;
    --msg-line: rgba(255, 255, 255, 0.075);
    --msg-line-strong: rgba(255, 255, 255, 0.13);
    --msg-text: #f4f6f9;
    --msg-soft: #c7ced8;
    --msg-muted: #7e8a9a;
    --msg-accent: #c8466d;
    --msg-accent-dark: #7e2341;
    --msg-accent-soft: rgba(200, 70, 109, 0.12);
    --msg-green: #5dc48b;
    --msg-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);

    width: min(calc(100% - 34px), 1480px);
    height: calc(100svh - var(--header-height) - 34px);
    min-height: 640px;
    margin: 17px auto;

    display: grid;
    grid-template-columns: 370px minmax(0, 1fr);
    overflow: hidden;

    border: 1px solid var(--msg-line);
    border-radius: 24px;

    color: var(--msg-text);
    background:
        radial-gradient(circle at 88% 0%, rgba(130, 34, 65, 0.1), transparent 30%),
        linear-gradient(145deg, #0c121b, #070b11 72%);
    box-shadow: var(--msg-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.messages-app *,
.messages-app *::before,
.messages-app *::after {
    box-sizing: border-box;
}

.messages-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--msg-line);
    background: linear-gradient(180deg, rgba(17, 25, 37, 0.97), rgba(9, 14, 21, 0.985));
}

.messages-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 88px;
    padding: 20px 20px 14px;
}

.messages-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #c06b86;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.messages-sidebar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 880;
    letter-spacing: -0.035em;
}

.messages-icon-button,
.messages-chat__back,
.messages-composer__tool,
.messages-composer__emoji,
.messages-send {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--msg-line);
    color: #aeb8c5;
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.messages-icon-button {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.messages-icon-button:hover,
.messages-composer__tool:hover,
.messages-composer__emoji:hover {
    color: #fff;
    border-color: rgba(213, 91, 128, 0.28);
    background: rgba(200, 70, 109, 0.09);
    transform: translateY(-1px);
}

.messages-search {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin: 0 15px 12px;
    padding: 0 13px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 13px;
    color: #667382;
    background: rgba(4, 8, 13, 0.45);
}

.messages-search:focus-within {
    border-color: rgba(211, 87, 125, 0.32);
    box-shadow: 0 0 0 4px rgba(183, 47, 85, 0.06);
}

.messages-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: #e9edf2;
    background: transparent;
    font-size: 12px;
    font-weight: 650;
}

.messages-search input::placeholder {
    color: #5f6b79;
}

.messages-chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 9px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(192, 66, 104, 0.45) transparent;
}

.messages-chat-list::-webkit-scrollbar {
    width: 5px;
}

.messages-chat-list::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(192, 66, 104, 0.42);
}

.messages-list-skeleton {
    display: grid;
    gap: 7px;
}

.messages-list-skeleton span {
    height: 73px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.055), rgba(255,255,255,.025));
    background-size: 220% 100%;
    animation: messagesShimmer 1.4s linear infinite;
}

@keyframes messagesShimmer {
    to { background-position: -220% 0; }
}

.messages-chat-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 16px;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.messages-chat-card:hover {
    border-color: rgba(255, 255, 255, 0.055);
    background: rgba(255, 255, 255, 0.03);
}

.messages-chat-card.is-active {
    border-color: rgba(204, 77, 115, 0.17);
    background: linear-gradient(135deg, rgba(190, 54, 95, 0.13), rgba(255, 255, 255, 0.025));
    box-shadow: inset 3px 0 0 #b93d62;
}

.messages-chat-card.has-unread:not(.is-active) {
    background: rgba(200, 70, 109, 0.045);
}

.messages-avatar {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: var(--messages-avatar-color, #8F2F4D);
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255,255,255,.08);
}

.messages-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.messages-avatar--list {
    width: 52px;
    height: 52px;
}

.messages-avatar--header {
    width: 45px;
    height: 45px;
}

.messages-chat-card__copy,
.messages-chat-card__top,
.messages-chat-card__bottom {
    min-width: 0;
}

.messages-chat-card__copy {
    display: grid;
    gap: 7px;
}

.messages-chat-card__top,
.messages-chat-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.messages-chat-card__top strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-chat-card__top time {
    flex: 0 0 auto;
    color: #697583;
    font-size: 8px;
    font-weight: 700;
}

.messages-chat-card__bottom small {
    overflow: hidden;
    color: #7f8b99;
    font-size: 10px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-chat-card.has-unread .messages-chat-card__bottom small {
    color: #cbd2da;
    font-weight: 760;
}

.messages-chat-card__bottom b {
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 99px;
    color: #fff;
    background: linear-gradient(135deg, #c9476f, #842541);
    font-size: 8px;
    font-weight: 900;
    box-shadow: 0 7px 18px rgba(117, 24, 52, 0.3);
}

.messages-chat-list__empty {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 300px;
    padding: 35px;
    text-align: center;
}

.messages-chat-list__empty > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    border: 1px solid rgba(200, 70, 109, 0.16);
    border-radius: 16px;
    color: #ba607b;
    background: rgba(200, 70, 109, 0.05);
}

.messages-chat-list__empty strong {
    font-size: 13px;
}

.messages-chat-list__empty p {
    max-width: 240px;
    margin: 7px 0 0;
    color: #6f7b89;
    font-size: 10px;
    line-height: 1.6;
}

.messages-conversation {
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    background:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
        radial-gradient(circle at 80% 10%, rgba(131, 35, 66, 0.08), transparent 32%),
        #080d14;
    background-size: 64px 64px, 64px 64px, auto, auto;
}

.messages-welcome {
    margin: auto;
    display: grid;
    place-items: center;
    max-width: 430px;
    padding: 30px;
    text-align: center;
}

.messages-welcome__icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin-bottom: 22px;
    border: 1px solid rgba(200, 70, 109, 0.18);
    border-radius: 28px;
    color: #c46e88;
    background: linear-gradient(145deg, rgba(200,70,109,.12), rgba(255,255,255,.02));
    box-shadow: 0 25px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}

.messages-welcome h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 880;
}

.messages-welcome p {
    margin: 13px 0 0;
    color: #7f8b9a;
    font-size: 12px;
    line-height: 1.75;
}

.messages-chat {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.messages-chat__header {
    position: relative;
    z-index: 5;
    min-height: 76px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--msg-line);
    background: rgba(10, 16, 24, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.messages-chat__back {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 13px;
}

.messages-peer {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.messages-peer__copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.messages-peer__copy strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 880;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-peer__copy small {
    color: #7a8795;
    font-size: 9px;
    font-weight: 700;
}

.messages-peer__copy small.is-online {
    color: #63c88f;
}

.messages-stream {
    min-height: 0;
    overflow-y: auto;
    padding: 24px clamp(18px, 4vw, 55px) 24px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(190, 64, 102, 0.38) transparent;
}

.messages-stream::-webkit-scrollbar {
    width: 5px;
}

.messages-stream::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(190, 64, 102, 0.38);
}

.messages-stream__loader {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 30px;
}

.messages-stream__loader span,
.messages-typing > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b94a6d;
    animation: messageDot 1s infinite ease-in-out;
}

.messages-stream__loader span:nth-child(2),
.messages-typing > span:nth-child(2) { animation-delay: .12s; }
.messages-stream__loader span:nth-child(3),
.messages-typing > span:nth-child(3) { animation-delay: .24s; }

@keyframes messageDot {
    0%, 70%, 100% { opacity: .35; transform: translateY(0); }
    35% { opacity: 1; transform: translateY(-4px); }
}

.messages-day-separator {
    width: max-content;
    margin: 14px auto 22px;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 99px;
    color: #74808e;
    background: rgba(8, 13, 20, 0.78);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.message-bubble {
    position: relative;
    display: grid;
    grid-template-columns: 35px minmax(0, auto) 30px;
    justify-content: start;
    align-items: end;
    gap: 8px;
    max-width: min(78%, 760px);
    margin: 8px 0;
}

.message-bubble.is-own {
    grid-template-columns: 30px minmax(0, auto);
    justify-content: end;
    margin-left: auto;
}

.message-bubble.is-own .message-bubble__avatar {
    display: none;
}

.message-bubble__avatar {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--messages-avatar-color, #8F2F4D);
    overflow: hidden;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.message-bubble__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-bubble__content {
    position: relative;
    overflow: hidden;
    min-width: 96px;
    padding: 10px 12px 7px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 17px 17px 17px 5px;
    color: #dce2e8;
    background: linear-gradient(145deg, rgba(24,34,47,.98), rgba(15,22,32,.99));
    box-shadow: 0 13px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.025);
}

.message-bubble.is-own .message-bubble__content {
    border-color: rgba(205, 82, 119, .2);
    border-radius: 17px 17px 5px 17px;
    background: linear-gradient(145deg, rgba(129, 35, 63, .98), rgba(80, 25, 44, .99));
    box-shadow: 0 14px 35px rgba(71, 15, 33, .28), inset 0 1px 0 rgba(255,255,255,.05);
}

.message-bubble.is-new {
    animation: messageAppear 240ms ease both;
}

@keyframes messageAppear {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
}

.message-bubble__text {
    min-width: 0;
    color: inherit;
    font-size: 12px;
    font-weight: 610;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.message-bubble__text:empty {
    display: none;
}

.message-bubble__text a {
    color: #f2adc0;
    font-weight: 760;
    text-decoration: underline;
    text-decoration-color: rgba(242,173,192,.35);
    text-underline-offset: 2px;
}

.message-bubble__text em {
    color: #8994a1;
    font-style: italic;
}

.message-bubble footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-height: 14px;
    margin-top: 4px;
    color: rgba(220,226,232,.55);
    font-size: 7px;
    font-weight: 700;
}

.message-read-state {
    font-size: 9px;
    letter-spacing: -2px;
}

.message-read-state.is-read {
    color: #92d8b0;
}

.message-bubble__menu {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #697583;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
}

.message-bubble:hover .message-bubble__menu,
.message-bubble__menu:focus-visible {
    opacity: 1;
}

.message-bubble__menu:hover {
    color: #fff;
    background: rgba(255,255,255,.055);
}

.message-bubble.is-own .message-bubble__menu {
    grid-column: 1;
    grid-row: 1;
}

.message-bubble.is-own .message-bubble__content {
    grid-column: 2;
}

.message-action-menu {
    position: absolute;
    z-index: 20;
    right: -5px;
    bottom: 34px;
    min-width: 166px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(15,22,32,.98);
    box-shadow: 0 20px 60px rgba(0,0,0,.48);
    backdrop-filter: blur(18px);
}

.message-bubble:not(.is-own) .message-action-menu {
    right: auto;
    left: 42px;
}

.message-action-menu button {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    color: #b9c2cd;
    background: transparent;
    text-align: left;
    font-size: 9px;
    font-weight: 740;
    cursor: pointer;
}

.message-action-menu button:hover {
    color: #fff;
    background: rgba(255,255,255,.045);
}

.message-action-menu button[data-message-action="cancel"] {
    color: #e17b86;
}

.message-reply-preview {
    width: 100%;
    display: grid;
    gap: 2px;
    margin: 0 0 8px;
    padding: 7px 9px;
    border: 0;
    border-left: 2px solid #ce6281;
    border-radius: 7px;
    color: inherit;
    background: rgba(0,0,0,.17);
    text-align: left;
    cursor: pointer;
}

.message-reply-preview strong {
    color: #efadc0;
    font-size: 8px;
    font-weight: 850;
}

.message-reply-preview small {
    overflow: hidden;
    color: rgba(225,231,237,.62);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-bubble__media {
    display: grid;
    gap: 4px;
    margin: -6px -8px 8px;
    overflow: hidden;
    border-radius: 13px;
}

.message-bubble__media.is-multiple {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.message-media-item {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    max-width: 520px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    cursor: zoom-in;
}

.message-media-item img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 390px;
    object-fit: contain;
}

.message-bubble__media.is-multiple .message-media-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.message-media-item > span {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 4px 6px;
    border-radius: 7px;
    color: #fff;
    background: rgba(0,0,0,.65);
    font-size: 7px;
    font-weight: 900;
}

.messages-typing {
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 clamp(18px, 4vw, 55px);
    color: #8b96a4;
    font-size: 8px;
}

.messages-typing strong {
    margin-left: 4px;
    font-size: 8px;
    font-weight: 700;
}

.messages-composer {
    position: relative;
    z-index: 6;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--msg-line);
    background: rgba(9,14,21,.93);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.messages-composer__form {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 44px;
    align-items: end;
    gap: 9px;
}

.messages-composer__tool,
.messages-send {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.messages-send {
    width: 44px;
    height: 44px;
    border-color: rgba(224, 109, 142, .3);
    color: #fff;
    background: linear-gradient(135deg, #c5486f, #7f2442);
    box-shadow: 0 13px 28px rgba(100,24,48,.32), inset 0 1px 0 rgba(255,255,255,.12);
}

.messages-send:hover {
    transform: translateY(-2px) scale(1.02);
}

.messages-send:disabled,
.messages-composer__tool:disabled,
.messages-composer__emoji:disabled {
    opacity: .42;
    cursor: not-allowed;
    transform: none;
}

.messages-input-wrap {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: end;
    gap: 2px;
    min-height: 44px;
    padding: 3px 4px 3px 12px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 15px;
    background: #0d141e;
}

.messages-input-wrap:focus-within {
    border-color: rgba(211,87,125,.34);
    box-shadow: 0 0 0 4px rgba(183,47,85,.06);
}

.messages-input-wrap textarea {
    width: 100%;
    min-height: 36px;
    max-height: 140px;
    padding: 8px 0 6px;
    border: 0;
    outline: 0;
    resize: none;
    color: #e9edf2;
    background: transparent;
    font-size: 12px;
    font-weight: 610;
    line-height: 1.55;
}

.messages-input-wrap textarea::placeholder {
    color: #64707e;
}

.messages-composer__emoji {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 19px;
}

.messages-emoji-picker {
    position: absolute;
    z-index: 40;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(330px, calc(100vw - 30px));
    padding: 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    background: rgba(15,22,32,.985);
    box-shadow: 0 25px 70px rgba(0,0,0,.54);
    backdrop-filter: blur(24px);
}

.messages-emoji-picker header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 3px 10px;
}

.messages-emoji-picker header strong {
    font-size: 11px;
}

.messages-emoji-picker header small {
    color: #667280;
    font-size: 7px;
}

.messages-emoji-picker > div {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
}

.messages-emoji-picker button {
    aspect-ratio: 1;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: 19px;
    cursor: pointer;
}

.messages-emoji-picker button:hover {
    background: rgba(255,255,255,.06);
}

.messages-reply-bar,
.messages-edit-bar {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    margin: 0 52px 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.messages-reply-bar__line,
.messages-edit-bar__line {
    width: 3px;
    height: 28px;
    border-radius: 99px;
    background: linear-gradient(#e36f91, #8c2947);
}

.messages-reply-bar > span:nth-child(2),
.messages-edit-bar > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.messages-reply-bar strong,
.messages-edit-bar strong {
    color: #e89ab1;
    font-size: 9px;
    font-weight: 850;
}

.messages-reply-bar small,
.messages-edit-bar small {
    overflow: hidden;
    color: #74808e;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-reply-bar button,
.messages-edit-bar button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    color: #7d8997;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}

.messages-reply-bar button:hover,
.messages-edit-bar button:hover {
    color: #fff;
    background: rgba(255,255,255,.05);
}

.messages-attachment-preview {
    display: flex;
    gap: 7px;
    margin: 0 52px 8px;
    overflow-x: auto;
}

.messages-attachment-preview__item {
    position: relative;
    flex: 0 0 72px;
    height: 72px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
    background: rgba(0,0,0,.2);
}

.messages-attachment-preview__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.messages-attachment-preview__item button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: rgba(5,8,13,.78);
    font-size: 15px;
    cursor: pointer;
}

.messages-composer__notice {
    margin: 9px 52px 0;
    color: #dc8794;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

.messages-stream__error {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 30px;
    text-align: center;
}

.messages-stream__error strong {
    font-size: 15px;
}

.messages-stream__error p {
    margin: 7px 0 0;
    color: #7e8997;
    font-size: 10px;
}

.messages-media-viewer {
    position: fixed;
    z-index: 6000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 30px;
    background: rgba(3,5,8,.94);
    backdrop-filter: blur(20px);
    cursor: zoom-out;
}

.messages-media-viewer img {
    max-width: min(95vw, 1400px);
    max-height: 90vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 30px 100px rgba(0,0,0,.65);
}

.messages-media-viewer button {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    color: #fff;
    background: rgba(20,27,37,.78);
    font-size: 25px;
    cursor: pointer;
}

@media (max-width: 1050px) {
    .messages-app {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .message-bubble {
        max-width: 86%;
    }
}

@media (max-width: 768px) {
    body.page-messages {
        padding-bottom: 0;
        overflow: hidden;
    }

    body.page-messages .site-footer,
    body.page-messages .mobile-tabbar {
        display: none !important;
    }

    .messages-app {
        width: 100%;
        height: calc(100svh - var(--header-height));
        min-height: 0;
        margin: 0;
        grid-template-columns: 1fr;
        border: 0;
        border-radius: 0;
    }

    .messages-sidebar {
        grid-column: 1;
        grid-row: 1;
        border-right: 0;
    }

    .messages-conversation {
        position: absolute;
        z-index: 10;
        inset: 0;
        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);
        transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease, visibility 260ms;
    }

    .messages-app.is-chat-open .messages-conversation {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    .messages-chat__back {
        display: grid;
    }

    .messages-sidebar__header {
        min-height: 75px;
        padding: 14px 15px 9px;
    }

    .messages-sidebar h1 {
        font-size: 20px;
    }

    .messages-search {
        margin-right: 12px;
        margin-left: 12px;
    }

    .messages-chat-list {
        padding-right: 6px;
        padding-left: 6px;
        scrollbar-width: none;
    }

    .messages-chat-list::-webkit-scrollbar,
    .messages-stream::-webkit-scrollbar {
        display: none;
    }

    .messages-chat-card {
        min-height: 72px;
        border-radius: 14px;
    }

    .messages-chat__header {
        min-height: 68px;
        padding: 9px 10px;
    }

    .messages-avatar--header {
        width: 42px;
        height: 42px;
    }

    .messages-stream {
        padding: 18px 10px;
        scrollbar-width: none;
    }

    .message-bubble {
        max-width: 91%;
        grid-template-columns: 29px minmax(0, auto) 24px;
        gap: 6px;
    }

    .message-bubble.is-own {
        grid-template-columns: 24px minmax(0, auto);
    }

    .message-bubble__avatar {
        width: 29px;
        height: 29px;
    }

    .message-bubble__content {
        padding: 9px 10px 6px;
        border-radius: 15px 15px 15px 4px;
    }

    .message-bubble.is-own .message-bubble__content {
        border-radius: 15px 15px 4px 15px;
    }

    .message-bubble__text {
        font-size: 11px;
    }

    .message-bubble__menu {
        opacity: .8;
    }

    .message-bubble__media.is-multiple .message-media-item img {
        height: 140px;
    }

    .message-media-item img {
        max-height: 310px;
    }

    .messages-composer {
        padding: 8px 8px calc(9px + env(safe-area-inset-bottom));
    }

    .messages-composer__form {
        grid-template-columns: 39px minmax(0, 1fr) 42px;
        gap: 6px;
    }

    .messages-composer__tool {
        width: 39px;
        height: 39px;
    }

    .messages-send {
        width: 42px;
        height: 42px;
    }

    .messages-reply-bar,
    .messages-edit-bar,
    .messages-attachment-preview {
        margin-right: 47px;
        margin-left: 47px;
    }

    .messages-emoji-picker {
        right: -40px;
        bottom: calc(100% + 8px);
    }

    .messages-media-viewer {
        padding: 12px;
    }

    .messages-media-viewer button {
        top: max(10px, env(safe-area-inset-top));
        right: 10px;
    }
}

@media (max-width: 430px) {
    .messages-avatar--list {
        width: 49px;
        height: 49px;
    }

    .messages-chat-card {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px;
        padding-right: 9px;
        padding-left: 9px;
    }

    .messages-chat-card__top strong {
        font-size: 11px;
    }

    .message-bubble {
        max-width: 94%;
    }

    .messages-emoji-picker > div {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media (hover: none) {
    .message-bubble__menu {
        opacity: .85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .messages-conversation,
    .message-bubble,
    .messages-chat-card,
    .messages-send {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   ЛИЧНЫЕ СООБЩЕНИЯ V12 — Telegram-like responsive rebuild
   ========================================================================== */

.messages-app [hidden] {
    display: none !important;
}

.messages-conversation {
    overflow: hidden;
}

.messages-conversation.has-active-chat .messages-welcome {
    display: none !important;
}

.messages-chat:not([hidden]) {
    display: grid !important;
}

.messages-stream {
    position: relative;
    padding-right: clamp(22px, 5vw, 76px);
    padding-left: clamp(22px, 5vw, 76px);
}

.message-bubble {
    max-width: min(72%, 720px);
}

.message-bubble__content {
    max-width: 680px;
}

.message-bubble__quick-reply {
    display: grid;
    place-items: center;
    align-self: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #6e7a89;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}

.message-bubble:hover .message-bubble__quick-reply,
.message-bubble__quick-reply:focus-visible {
    opacity: 1;
}

.message-bubble__quick-reply:hover {
    color: #f2adc0;
    background: rgba(255, 255, 255, 0.05);
}

.message-bubble:not(.is-own) .message-bubble__quick-reply {
    grid-column: 3;
    grid-row: 1;
}

.message-bubble:not(.is-own) .message-bubble__menu {
    position: absolute;
    right: -31px;
    bottom: 0;
}

.message-bubble.is-own {
    grid-template-columns: 28px 28px minmax(0, auto);
}

.message-bubble.is-own .message-bubble__quick-reply {
    grid-column: 2;
    grid-row: 1;
}

.message-bubble.is-own .message-bubble__menu {
    grid-column: 1;
    grid-row: 1;
}

.message-bubble.is-own .message-bubble__content {
    grid-column: 3;
}

.message-bubble.is-highlighted .message-bubble__content {
    animation: messagesHighlight 1.8s ease;
}

@keyframes messagesHighlight {
    0%, 100% { box-shadow: 0 14px 35px rgba(0, 0, 0, 0.24); }
    35% { box-shadow: 0 0 0 3px rgba(224, 104, 140, 0.32), 0 18px 48px rgba(109, 24, 50, 0.42); }
}

.messages-emoji-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 2px 9px;
    overflow-x: auto;
    scrollbar-width: none;
}

.messages-emoji-tabs::-webkit-scrollbar {
    display: none;
}

.messages-emoji-tabs button {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 17px;
    cursor: pointer;
}

.messages-emoji-tabs button.is-active {
    background: rgba(200, 70, 109, 0.13);
    box-shadow: inset 0 -2px 0 #c84b70;
}

.messages-emoji-picker__empty {
    grid-column: 1 / -1;
    padding: 24px 12px;
    color: #74808e;
    font-size: 9px;
    line-height: 1.55;
    text-align: center;
}

.messages-info-backdrop {
    position: absolute;
    z-index: 39;
    inset: 0;
    border: 0;
    background: rgba(2, 5, 8, 0.46);
    backdrop-filter: blur(4px);
    cursor: default;
}

.messages-info-panel {
    position: absolute;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(390px, 92%);
    overflow-y: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.085);
    background: linear-gradient(180deg, rgba(17, 25, 37, 0.995), rgba(8, 13, 20, 0.995));
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.42);
    animation: messagesInfoIn 220ms ease both;
}

@keyframes messagesInfoIn {
    from { opacity: 0; transform: translateX(24px); }
}

.messages-info-panel__header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 76px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--msg-line);
    background: rgba(12, 18, 27, 0.94);
    backdrop-filter: blur(20px);
}

.messages-info-panel__header h2,
.messages-info-media h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 850;
}

.messages-info-user {
    display: grid;
    place-items: center;
    padding: 28px 18px;
    border-bottom: 1px solid var(--msg-line);
    text-align: center;
}

.messages-avatar--info {
    width: 86px;
    height: 86px;
    margin-bottom: 14px;
    font-size: 26px;
}

.messages-info-user > span:last-child {
    display: grid;
    gap: 5px;
}

.messages-info-user strong {
    font-size: 16px;
    font-weight: 870;
}

.messages-info-user small {
    color: #788493;
    font-size: 9px;
    font-weight: 700;
}

.messages-info-user small.is-online {
    color: #62c88e;
}

.messages-info-media {
    padding: 20px 16px 30px;
}

.messages-info-media > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.messages-info-media > header > small {
    color: #b96882;
    font-size: 10px;
    font-weight: 850;
}

.messages-info-media__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.messages-info-media__item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    cursor: zoom-in;
}

.messages-info-media__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.messages-info-media__item:hover img {
    transform: scale(1.045);
}

.messages-info-media__item span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 3px 5px;
    border-radius: 6px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    font-size: 7px;
    font-weight: 900;
}

.messages-info-media__empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    color: #7b8795;
    text-align: center;
}

.messages-info-media__empty strong {
    color: #cbd2da;
    font-size: 12px;
}

.messages-info-media__empty span {
    margin-top: 5px;
    font-size: 9px;
}

.messages-media-viewer {
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    cursor: default;
}

.messages-media-viewer__header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: min(100%, 1200px);
    margin: 0 auto;
}

.messages-media-viewer__header > button {
    position: static;
    width: 42px;
    height: 42px;
}

.messages-media-viewer__header > div {
    display: grid;
    gap: 2px;
}

.messages-media-viewer__header strong {
    font-size: 12px;
}

.messages-media-viewer__header small {
    color: #7e8997;
    font-size: 8px;
}

.messages-media-viewer__header a {
    color: #e092aa;
    font-size: 9px;
    font-weight: 760;
}

.messages-media-viewer figure {
    grid-column: 2;
    display: grid;
    place-items: center;
    align-self: stretch;
    margin: 0;
    min-height: 0;
}

.messages-media-viewer figure img {
    max-width: 100%;
    max-height: calc(100vh - 150px);
}

.messages-media-viewer figcaption {
    margin-top: 10px;
}

.messages-media-viewer figcaption button {
    position: static;
    width: auto;
    height: 38px;
    padding: 0 14px;
    color: #e8afbf;
    font-size: 9px;
    font-weight: 760;
}

.messages-media-viewer__nav {
    position: static !important;
    align-self: center;
    justify-self: center;
    width: 48px !important;
    height: 64px !important;
    border-radius: 16px !important;
    font-size: 35px !important;
}

.messages-media-viewer__nav--prev { grid-column: 1; }
.messages-media-viewer__nav--next { grid-column: 3; }

.message-bubble__media:not(.is-multiple) .message-media-item {
    max-width: min(440px, 66vw);
}

.message-bubble__media:not(.is-multiple) .message-media-item img {
    width: auto;
    max-width: 100%;
    max-height: 460px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .messages-app {
        background: #080d14;
    }

    .messages-welcome,
    .messages-welcome--desktop {
        display: none !important;
    }

    .messages-sidebar {
        width: 100%;
        height: 100%;
        visibility: visible;
        opacity: 1;
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    .messages-app.is-chat-open .messages-sidebar {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .messages-conversation {
        position: absolute;
        z-index: 20;
        inset: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateX(100%);
        background: #080d14;
    }

    .messages-app.is-chat-open .messages-conversation {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    .messages-chat:not([hidden]) {
        width: 100%;
        height: 100%;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }

    .messages-sidebar__header {
        min-height: 68px;
        padding-top: 10px;
    }

    .messages-sidebar h1 {
        font-size: 21px;
    }

    .messages-chat-card {
        min-height: 76px;
        padding: 9px 10px;
        border-radius: 15px;
    }

    .messages-chat__header {
        position: sticky;
        top: 0;
        min-height: 62px;
        padding: 7px 8px;
        gap: 8px;
    }

    .messages-chat__back {
        width: 38px;
        height: 38px;
        border: 0;
        background: transparent;
    }

    .messages-avatar--header {
        width: 39px;
        height: 39px;
    }

    .messages-peer {
        gap: 9px;
    }

    .messages-peer__copy strong {
        font-size: 13px;
    }

    .messages-stream {
        padding: 13px 8px 18px;
        overscroll-behavior: contain;
    }

    .message-bubble,
    .message-bubble.is-own {
        max-width: 88%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .message-bubble {
        grid-template-columns: minmax(0, auto) 26px;
        gap: 4px;
    }

    .message-bubble.is-own {
        grid-template-columns: 26px minmax(0, auto);
    }

    .message-bubble__avatar {
        display: none;
    }

    .message-bubble:not(.is-own) .message-bubble__content {
        grid-column: 1;
    }

    .message-bubble:not(.is-own) .message-bubble__quick-reply {
        grid-column: 2;
    }

    .message-bubble:not(.is-own) .message-bubble__menu {
        display: none;
    }

    .message-bubble.is-own .message-bubble__menu {
        grid-column: 1;
    }

    .message-bubble.is-own .message-bubble__quick-reply {
        display: none;
    }

    .message-bubble.is-own .message-bubble__content {
        grid-column: 2;
    }

    .message-bubble__quick-reply,
    .message-bubble__menu {
        opacity: 0.82;
    }

    .message-bubble__content {
        max-width: 100%;
        padding: 9px 10px 6px;
    }

    .message-bubble__text {
        font-size: 12px;
        line-height: 1.5;
    }

    .message-bubble__media:not(.is-multiple) .message-media-item {
        max-width: min(320px, 76vw);
    }

    .message-bubble__media:not(.is-multiple) .message-media-item img {
        max-height: 340px;
    }

    .messages-typing {
        min-height: 24px;
        padding: 0 12px;
    }

    .messages-composer {
        position: sticky;
        bottom: 0;
        padding: 7px 7px calc(8px + env(safe-area-inset-bottom));
        background: rgba(8, 13, 20, 0.985);
    }

    .messages-composer__form {
        grid-template-columns: 38px minmax(0, 1fr) 41px;
        gap: 5px;
    }

    .messages-input-wrap {
        min-height: 41px;
        border-radius: 17px;
    }

    .messages-input-wrap textarea {
        font-size: 13px;
    }

    .messages-reply-bar,
    .messages-edit-bar,
    .messages-attachment-preview {
        margin-right: 44px;
        margin-left: 44px;
    }

    .messages-reply-bar,
    .messages-edit-bar {
        margin-bottom: 6px;
        border-radius: 11px;
    }

    .messages-emoji-picker {
        position: fixed;
        z-index: 70;
        right: 7px;
        bottom: calc(68px + env(safe-area-inset-bottom));
        left: 7px;
        width: auto;
        max-height: min(420px, 55svh);
        overflow-y: auto;
        border-radius: 22px;
    }

    .messages-emoji-picker > div {
        grid-template-columns: repeat(8, 1fr);
    }

    .messages-info-panel {
        position: fixed;
        z-index: 5002;
        inset: 0;
        width: 100%;
        border-left: 0;
        animation: messagesMobileInfoIn 220ms ease both;
    }

    .messages-info-backdrop {
        display: none !important;
    }

    @keyframes messagesMobileInfoIn {
        from { opacity: 0; transform: translateX(100%); }
    }

    .messages-info-media__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .messages-media-viewer {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        padding: 10px;
    }

    .messages-media-viewer__header {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .messages-media-viewer__header a {
        font-size: 8px;
    }

    .messages-media-viewer__nav {
        width: 34px !important;
        height: 52px !important;
        font-size: 28px !important;
    }

    .messages-media-viewer figure img {
        max-height: calc(100svh - 145px);
        border-radius: 12px;
    }
}

@media (max-width: 430px) {
    .messages-emoji-picker > div {
        grid-template-columns: repeat(7, 1fr);
    }

    .messages-chat-card__bottom small {
        font-size: 10px;
    }

    .messages-media-viewer__header a {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ==========================================================================
   ЛИЧНЫЕ СООБЩЕНИЯ V13 — Telegram-like polish
   ========================================================================== */

.messages-stream {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.message-bubble {
    flex: 0 0 auto;
    margin-top: 3px;
    margin-bottom: 3px;
}

.message-bubble.is-group-first {
    margin-top: 11px;
}

.message-bubble.is-group-last {
    margin-bottom: 11px;
}

.message-bubble:not(.is-group-last):not(.is-own)
.message-bubble__avatar {
    visibility: hidden;
}

.message-bubble.is-group-middle .message-bubble__content,
.message-bubble:not(.is-group-first):not(.is-own)
.message-bubble__content {
    border-top-left-radius: 8px;
}

.message-bubble:not(.is-group-last):not(.is-own)
.message-bubble__content {
    border-bottom-left-radius: 8px;
}

.message-bubble.is-own:not(.is-group-first)
.message-bubble__content {
    border-top-right-radius: 8px;
}

.message-bubble.is-own:not(.is-group-last)
.message-bubble__content {
    border-bottom-right-radius: 8px;
}

.message-reply-preview {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 0;
    border-left: 3px solid #e27294;
    border-radius: 9px;
    color: inherit;
    background: rgba(5, 9, 14, 0.24);
    text-align: left;
}

.message-reply-preview__thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 7px;
    background: rgba(255,255,255,.05);
}

.message-reply-preview__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-reply-preview__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.message-reply-preview strong {
    color: #f39ab4;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
}

.message-reply-preview small {
    display: block;
    overflow: hidden;
    color: #c2cbd5;
    font-size: 10px;
    font-weight: 620;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-bubble footer {
    min-height: 17px;
    gap: 6px;
}

.message-read-state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 18px;
    height: 15px;
    margin-left: 1px;
    color: rgba(229, 197, 207, .78);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
}

.message-read-state i {
    display: block;
    font-style: normal;
}

.message-read-state i + i {
    margin-left: -3px;
}

.message-read-state.is-read {
    color: #71d7a0;
    filter: drop-shadow(0 0 5px rgba(92, 201, 139, .28));
}

.message-action-menu button {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
}

.message-action-menu button span {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 7px;
    color: #d7819c;
    background: rgba(200,70,109,.1);
    font-size: 12px;
    font-weight: 900;
}

.messages-chat__media-button {
    position: relative;
}

.messages-chat__media-button > span {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #0b1119;
    border-radius: 99px;
    color: #fff;
    background: #bd3f65;
    font-size: 7px;
    font-weight: 900;
}

.messages-media-context {
    position: fixed;
    z-index: 99999;
    display: grid;
    gap: 4px;
    min-width: 205px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(14,21,31,.98);
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    backdrop-filter: blur(20px);
}

.messages-media-context button {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    color: #dce1e7;
    background: transparent;
    font-size: 10px;
    font-weight: 760;
    text-align: left;
    cursor: pointer;
}

.messages-media-context button:hover {
    background: rgba(200,70,109,.1);
}

.messages-media-context button span {
    color: #d66d8d;
    font-size: 14px;
}

.messages-info-media__item {
    cursor: pointer;
}

@media (max-width: 768px) {
    body.page-messages {
        padding-bottom: 0 !important;
        overflow: hidden;
    }

    body.page-messages .site-header,
    body.page-messages .mobile-tabbar,
    body.page-messages .royal-footer,
    body.page-messages .site-footer {
        display: none !important;
    }

    body.page-messages .site-main {
        min-height: 100svh;
    }

    .messages-app {
        position: fixed;
        z-index: 2000;
        inset: 0;
        width: 100%;
        height: 100svh;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background:
            radial-gradient(circle at 90% 0%, rgba(135,36,68,.12), transparent 32%),
            #080d14;
    }

    .messages-sidebar {
        border-right: 0;
    }

    .messages-sidebar__header {
        min-height: calc(64px + env(safe-area-inset-top));
        padding: calc(10px + env(safe-area-inset-top)) 14px 8px;
        background: rgba(9,14,21,.97);
        backdrop-filter: blur(22px);
    }

    .messages-search {
        min-height: 42px;
        border-radius: 13px;
    }

    .messages-chat__header {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        min-height: calc(64px + env(safe-area-inset-top));
        padding: calc(7px + env(safe-area-inset-top)) 8px 7px;
        border-bottom-color: rgba(255,255,255,.075);
        background: rgba(10,16,24,.975);
        backdrop-filter: blur(24px);
    }

    .messages-chat__back,
    .messages-chat__media-button {
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255,255,255,.075);
        border-radius: 50%;
        color: #e8ebef;
        background: rgba(255,255,255,.04);
    }

    .messages-chat__back svg {
        width: 24px;
        height: 24px;
    }

    .messages-peer {
        justify-self: center;
        max-width: 100%;
    }

    .messages-avatar--header {
        width: 40px;
        height: 40px;
    }

    .messages-peer__copy strong {
        font-size: 13px;
    }

    .messages-peer__copy small {
        font-size: 8px;
    }

    .messages-stream {
        padding: 11px 8px 16px;
        background:
            radial-gradient(circle at 10% 10%, rgba(255,255,255,.018) 0 1px, transparent 1.5px) 0 0 / 28px 28px,
            linear-gradient(180deg, rgba(8,13,20,.95), rgba(6,10,15,.98));
    }

    .message-bubble,
    .message-bubble.is-own {
        max-width: min(88%, 520px);
    }

    .message-bubble {
        grid-template-columns: minmax(0, auto) 27px;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .message-bubble.is-own {
        grid-template-columns: 27px minmax(0, auto);
    }

    .message-bubble.is-group-first {
        margin-top: 8px;
    }

    .message-bubble.is-group-last {
        margin-bottom: 8px;
    }

    .message-bubble__content {
        min-width: 74px;
        padding: 8px 9px 5px;
        border-radius: 15px 15px 15px 5px;
    }

    .message-bubble.is-own .message-bubble__content {
        border-radius: 15px 15px 5px 15px;
    }

    .message-bubble__text {
        font-size: 13px;
        font-weight: 590;
        line-height: 1.42;
    }

    .message-reply-preview {
        margin-bottom: 5px;
        padding: 6px 7px;
    }

    .message-reply-preview__thumb {
        width: 31px;
        height: 31px;
    }

    .message-reply-preview strong,
    .message-reply-preview small {
        font-size: 9px;
    }

    .message-bubble footer {
        float: right;
        min-width: 54px;
        margin-top: 2px;
    }

    .message-bubble footer time {
        font-size: 8px;
    }

    .message-read-state {
        min-width: 19px;
        font-size: 11px;
    }

    .message-bubble__menu,
    .message-bubble__quick-reply {
        opacity: .78;
    }

    .message-action-menu {
        position: fixed !important;
        z-index: 9990;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        top: auto !important;
        display: grid;
        gap: 5px;
        width: auto;
        min-width: 0;
        padding: 9px;
        border-radius: 18px;
        background: rgba(17,24,35,.985);
        box-shadow: 0 28px 90px rgba(0,0,0,.65);
    }

    .message-action-menu[hidden] {
        display: none !important;
    }

    .message-action-menu button {
        min-height: 45px;
        border-radius: 12px;
        font-size: 11px;
    }

    .messages-composer {
        padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255,255,255,.07);
        background: rgba(8,13,20,.985);
        backdrop-filter: blur(22px);
    }

    .messages-composer__form {
        grid-template-columns: 42px minmax(0, 1fr) 44px;
        align-items: end;
    }

    .messages-input-wrap {
        min-height: 44px;
        border-radius: 20px;
    }

    .messages-composer__tool,
    .messages-send {
        width: 42px;
        height: 42px;
        border-radius: 50%;
    }

    .messages-reply-bar,
    .messages-edit-bar,
    .messages-attachment-preview {
        margin-right: 0;
        margin-left: 0;
    }

    .messages-reply-bar,
    .messages-edit-bar {
        border-radius: 13px;
    }

    .messages-info-panel {
        position: fixed;
        z-index: 10000;
        inset: 0;
        width: 100%;
        border-left: 0;
        background: #090f17;
    }

    .messages-info-panel__header {
        min-height: calc(62px + env(safe-area-inset-top));
        padding: calc(9px + env(safe-area-inset-top)) 12px 9px;
    }

    .messages-info-user {
        padding: 20px 16px;
    }

    .messages-info-media__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
    }

    .messages-info-media__item {
        border-radius: 5px;
    }

    .messages-media-context {
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        top: auto !important;
        min-width: 0;
        border-radius: 17px;
    }
}


/* ==========================================================================
   СООБЩЕНИЯ V16 — единый мессенджер и групповые чаты
   ========================================================================== */

body.messages-create-open {
    overflow: hidden;
}

.messages-app {
    grid-template-columns: 340px minmax(0, 1fr);
    height: calc(100svh - var(--header-height) - 28px);
    min-height: 610px;
    margin: 14px auto;
    border-radius: 22px;
}

/* Шапка чата — центрированный профиль и явная кнопка выхода. */
.messages-chat__header {
    position: relative;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    min-height: 78px;
    padding: 10px 18px;
    gap: 12px;
    background:
        linear-gradient(180deg, rgba(12, 18, 27, .98), rgba(8, 13, 20, .965));
    box-shadow: 0 12px 36px rgba(0, 0, 0, .16);
}

.messages-chat__back {
    display: grid;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 14px;
    color: #b7c0cb;
    background: rgba(255, 255, 255, .028);
}

.messages-chat__back:hover {
    color: #fff;
    border-color: rgba(207, 82, 120, .24);
    background: rgba(190, 54, 95, .09);
    transform: translateX(-2px);
}

.messages-peer.messages-peer--centered {
    justify-self: center;
    max-width: min(100%, 560px);
    min-width: 0;
    padding: 5px 16px 5px 7px;
    border: 1px solid transparent;
    border-radius: 20px;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.messages-peer.messages-peer--centered:hover {
    border-color: rgba(255, 255, 255, .065);
    background: rgba(255, 255, 255, .025);
    transform: translateY(-1px);
}

.messages-avatar--header {
    width: 48px;
    height: 48px;
    font-size: 17px;
}

.messages-peer__copy {
    text-align: left;
}

.messages-peer__copy strong {
    font-size: 15px;
    font-weight: 880;
}

.messages-peer__copy small {
    font-size: 9px;
    font-weight: 730;
}

.messages-chat__media-button {
    justify-self: end;
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

/* Группы в списке чатов. */
.messages-group-name {
    color: #f1c1d0 !important;
    text-shadow: 0 0 18px rgba(198, 70, 109, .15);
}

.messages-avatar__group-mark {
    position: absolute;
    right: -1px;
    bottom: -1px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 2px solid #101722;
    border-radius: 50%;
    color: #ffd7e2;
    background: #9f3154;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
}

.messages-chat-card__bottom em {
    flex: 0 0 auto;
    color: #6f7b89;
    font-size: 7px;
    font-style: normal;
    font-weight: 730;
    white-space: nowrap;
}

/* Поток и пузырьки. */
.messages-stream {
    padding: 22px clamp(18px, 3.6vw, 48px) 28px;
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 255, 255, .014) 0 1px, transparent 1.4px) 0 0 / 34px 34px,
        linear-gradient(180deg, rgba(7, 12, 18, .985), rgba(5, 9, 14, .995));
}

.message-bubble,
.message-bubble.is-own {
    max-width: min(72%, 690px);
    margin-top: 2px;
    margin-bottom: 2px;
}

.message-bubble.is-group-first {
    margin-top: 10px;
}

.message-bubble.is-group-last {
    margin-bottom: 10px;
}

.message-bubble {
    grid-template-columns: 36px minmax(88px, auto) 30px;
    gap: 7px;
}

.message-bubble.is-own {
    grid-template-columns: 30px minmax(88px, auto);
}

.message-bubble__content {
    position: relative;
    display: block;
    min-width: 92px;
    max-width: 690px;
    padding: 8px 11px 7px;
    overflow: hidden;
    border-radius: 17px 17px 17px 5px;
}

.message-bubble.is-own .message-bubble__content {
    border-radius: 17px 17px 5px 17px;
    background:
        linear-gradient(145deg, rgba(142, 39, 70, .98), rgba(87, 25, 47, .995));
}

.message-bubble__sender {
    display: block;
    margin: 0 0 3px;
    font-size: 9px;
    font-weight: 850;
    line-height: 1.2;
}

.message-bubble__sender[hidden] {
    display: none !important;
}

.message-bubble__text {
    display: inline;
    font-size: 12px;
    font-weight: 620;
    line-height: 1.48;
}

.message-bubble__text::after {
    display: inline-block;
    width: 76px;
    height: 1px;
    content: "";
}

.message-bubble footer {
    position: absolute;
    right: 8px;
    bottom: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-height: 12px;
    margin: 0;
    padding: 0;
    color: rgba(228, 233, 239, .52);
    background: transparent;
    font-size: 7px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.message-bubble footer time {
    color: inherit;
    font-size: 7.5px;
    font-weight: 710;
    line-height: 1;
}

.message-bubble footer [data-message-edited] {
    color: rgba(228, 233, 239, .38);
    font-size: 6.5px;
    font-weight: 650;
}

.message-read-state {
    display: inline-grid;
    place-items: center;
    width: 14px;
    min-width: 14px;
    height: 12px;
    color: rgba(255, 226, 235, .7);
}

.message-read-state.is-read {
    width: 22px;
    min-width: 22px;
    color: #64dda0;
    filter: drop-shadow(0 0 4px rgba(75, 211, 143, .18));
}

.message-read-state__icon {
    display: block;
    width: 100%;
    height: 12px;
    overflow: visible;
}

.message-read-state i {
    display: none !important;
}

.message-bubble.is-media-only .message-bubble__content {
    padding: 4px;
}

.message-bubble.is-media-only .message-bubble__text::after {
    display: none;
}

.message-bubble.is-media-only footer {
    right: 8px;
    bottom: 8px;
    min-height: 20px;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9px;
    color: rgba(255, 255, 255, .86);
    background: rgba(4, 7, 11, .6);
    box-shadow: 0 5px 17px rgba(0, 0, 0, .26);
    backdrop-filter: blur(8px);
}

.message-bubble__media {
    margin: -4px -7px 7px;
}

.message-bubble.is-media-only .message-bubble__media {
    margin: 0;
}

.message-bubble.is-reply-target .message-bubble__content,
.message-bubble.is-edit-target .message-bubble__content,
.message-bubble.is-action-open .message-bubble__content {
    overflow: visible;
}

.message-bubble.is-reply-target .message-bubble__content {
    box-shadow:
        0 0 0 2px rgba(183, 47, 85, .16),
        inset 3px 0 0 rgba(221, 107, 137, .78),
        0 16px 38px rgba(0, 0, 0, .28);
}

.message-bubble.is-edit-target .message-bubble__content {
    box-shadow:
        0 0 0 2px rgba(209, 164, 94, .12),
        inset 3px 0 0 rgba(209, 164, 94, .78),
        0 16px 38px rgba(0, 0, 0, .28);
}

/* Состав группы в боковой панели. */
.messages-info-members {
    padding: 18px 18px 4px;
    border-top: 1px solid var(--msg-line);
}

.messages-info-members > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.messages-info-members h3 {
    margin: 3px 0 0;
    font-size: 15px;
}

.messages-info-members > header > small {
    color: #a9667c;
    font-size: 10px;
    font-weight: 800;
}

.messages-info-members__list {
    display: grid;
    gap: 2px;
    max-height: 330px;
    overflow-y: auto;
}

.messages-info-member {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 5px;
    border-radius: 12px;
}

.messages-info-member:hover {
    background: rgba(255, 255, 255, .035);
}

.messages-avatar--member {
    width: 38px;
    height: 38px;
    font-size: 11px;
}

.messages-info-member > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.messages-info-member strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-info-member small {
    color: #718090;
    font-size: 8px;
    font-weight: 650;
}

/* Создание личного и группового чата. */
.messages-create-layer {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
}

.messages-create-layer[hidden] {
    display: none !important;
}

.messages-create-layer__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3, 6, 10, .72);
    backdrop-filter: blur(7px);
}

.messages-create {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
    max-height: min(760px, calc(100svh - 36px));
    display: grid;
    grid-template-rows: auto auto auto auto minmax(100px, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 0%, rgba(151, 45, 78, .16), transparent 36%),
        linear-gradient(150deg, #131c29, #090e16 70%);
    box-shadow: 0 38px 120px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.messages-create__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 22px 16px;
}

.messages-create__header h2 {
    margin: 4px 0 0;
    font-size: 24px;
}

.messages-create__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0 18px 14px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 14px;
    background: rgba(0, 0, 0, .18);
}

.messages-create__tabs button {
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    color: #758292;
    background: transparent;
    font-size: 10px;
    font-weight: 780;
    cursor: pointer;
}

.messages-create__tabs button.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(183, 47, 85, .72), rgba(103, 27, 52, .74));
    box-shadow: 0 10px 24px rgba(73, 13, 34, .22);
}

.messages-create__group-fields {
    display: grid;
    gap: 9px;
    padding: 0 18px 13px;
}

.messages-create__group-fields[hidden] {
    display: none !important;
}

.messages-create__group-fields label {
    display: grid;
    gap: 6px;
}

.messages-create__group-fields label > span {
    color: #9aa5b3;
    font-size: 9px;
    font-weight: 760;
}

.messages-create__group-fields input,
.messages-create__search {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 13px;
    color: #eef1f5;
    background: rgba(4, 8, 13, .46);
}

.messages-create__group-fields input {
    padding: 0 14px;
    outline: 0;
    font-size: 12px;
    font-weight: 650;
}

.messages-create__group-fields > small {
    color: #667383;
    font-size: 8px;
    font-weight: 680;
}

.messages-create__selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.messages-create__selected[hidden] {
    display: none !important;
}

.messages-create__chip {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(207, 82, 120, .17);
    border-radius: 99px;
    color: #efb3c5;
    background: rgba(183, 47, 85, .09);
    font-size: 8px;
    font-weight: 740;
    cursor: pointer;
}

.messages-create__search {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin: 0 18px 12px;
    padding: 0 13px;
    color: #697686;
}

.messages-create__search:focus-within {
    border-color: rgba(211, 87, 125, .32);
    box-shadow: 0 0 0 4px rgba(183, 47, 85, .07);
}

.messages-create__search input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: #edf0f4;
    background: transparent;
    font-size: 12px;
    font-weight: 650;
}

.messages-create__results {
    min-height: 120px;
    overflow-y: auto;
    padding: 0 12px 14px;
}

.messages-create__hint {
    display: grid;
    place-items: center;
    min-height: 120px;
    color: #687584;
    font-size: 10px;
    font-weight: 650;
}

.messages-create-user {
    width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.messages-create-user:hover,
.messages-create-user.is-selected {
    border-color: rgba(207, 82, 120, .14);
    background: rgba(183, 47, 85, .055);
}

.messages-avatar--create {
    width: 44px;
    height: 44px;
    font-size: 13px;
}

.messages-create-user > span:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.messages-create-user strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-create-user small {
    color: #718090;
    font-size: 8px;
}

.messages-create-user > i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #c77a91;
    background: rgba(183, 47, 85, .08);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.messages-create__footer {
    padding: 12px 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.messages-create__footer[hidden] {
    display: none !important;
}

.messages-create__submit {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(221, 107, 137, .24);
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #b43a60, #6f1c3a);
    font-size: 11px;
    font-weight: 820;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(86, 19, 43, .28);
}

.messages-create__submit:disabled {
    opacity: .38;
    cursor: not-allowed;
}

@media (max-width: 1050px) and (min-width: 769px) {
    .messages-app {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .message-bubble,
    .message-bubble.is-own {
        max-width: min(78%, 640px);
    }
}

@media (max-width: 768px) {
    body.page-messages {
        padding-bottom: 0 !important;
        overflow: hidden;
    }

    body.page-messages .site-header,
    body.page-messages .mobile-tabbar,
    body.page-messages .royal-footer,
    body.page-messages .site-footer {
        display: none !important;
    }

    .messages-app {
        position: fixed;
        z-index: 2000;
        inset: 0;
        width: 100%;
        height: 100svh;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        grid-template-columns: 1fr;
    }

    .messages-chat__header {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        min-height: calc(66px + env(safe-area-inset-top));
        padding: calc(8px + env(safe-area-inset-top)) 8px 8px;
    }

    .messages-chat__back,
    .messages-chat__media-button {
        width: 42px;
        height: 42px;
        border-radius: 50%;
    }

    .messages-peer.messages-peer--centered {
        max-width: 100%;
        padding: 2px 6px 2px 2px;
        border-radius: 17px;
    }

    .messages-avatar--header {
        width: 40px;
        height: 40px;
    }

    .messages-peer__copy strong {
        font-size: 13px;
    }

    .messages-peer__copy small {
        font-size: 8px;
    }

    .messages-stream {
        padding: 10px 8px 16px;
        overscroll-behavior: contain;
    }

    .message-bubble,
    .message-bubble.is-own {
        max-width: min(89%, 520px);
    }

    .message-bubble {
        grid-template-columns: minmax(74px, auto) 27px;
        gap: 4px;
    }

    .message-bubble.is-own {
        grid-template-columns: 27px minmax(74px, auto);
    }

    .message-bubble__avatar {
        display: none;
    }

    .message-bubble:not(.is-own) .message-bubble__content {
        grid-column: 1;
    }

    .message-bubble.is-own .message-bubble__content {
        grid-column: 2;
    }

    .message-bubble__content {
        padding: 7px 9px 7px;
        border-radius: 15px 15px 15px 5px;
    }

    .message-bubble.is-own .message-bubble__content {
        border-radius: 15px 15px 5px 15px;
    }

    .message-bubble__text {
        font-size: 13px;
        line-height: 1.42;
    }

    .message-bubble__text::after {
        width: 72px;
    }

    .message-bubble footer {
        right: 7px;
        bottom: 6px;
    }

    .message-bubble footer time {
        font-size: 7.5px;
    }

    .message-bubble__menu,
    .message-bubble__quick-reply {
        opacity: .76;
    }

    .message-action-menu {
        position: fixed !important;
        z-index: 9991 !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        top: auto !important;
        display: grid;
        gap: 5px;
        width: auto;
        min-width: 0;
        padding: 9px;
        border-radius: 20px;
        background: rgba(16, 23, 34, .992);
        box-shadow: 0 30px 100px rgba(0, 0, 0, .72);
    }

    .message-action-menu[hidden] {
        display: none !important;
    }

    .message-action-menu button {
        min-height: 48px;
        border-radius: 12px;
        font-size: 11px;
    }

    .messages-app.is-message-action-open::after {
        position: fixed;
        z-index: 9988;
        inset: 0;
        background: rgba(2, 5, 9, .52);
        backdrop-filter: blur(2px);
        content: "";
    }

    .message-bubble.is-action-open {
        z-index: 9989;
    }

    .messages-create-layer {
        align-items: end;
        padding: 0;
    }

    .messages-create {
        width: 100%;
        max-height: min(90svh, 760px);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 24px 24px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: messagesCreateMobileIn 220ms cubic-bezier(.2,.85,.25,1) both;
    }

    @keyframes messagesCreateMobileIn {
        from {
            opacity: 0;
            transform: translateY(36px);
        }
    }

    .messages-create__header {
        padding: 18px 16px 13px;
    }

    .messages-create__header h2 {
        font-size: 21px;
    }

    .messages-create__tabs,
    .messages-create__search {
        margin-right: 12px;
        margin-left: 12px;
    }

    .messages-create__group-fields {
        padding-right: 12px;
        padding-left: 12px;
    }

    .messages-create__results {
        padding-right: 7px;
        padding-left: 7px;
    }

    .messages-info-members__list {
        max-height: none;
    }
}


/* ========================================================================== V17 */
.messages-sidebar__actions,.messages-chat__left-actions{display:flex;align-items:center;gap:8px}.messages-site-exit{display:none}.messages-chat__site{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.08);border-radius:14px;color:#8995a5;background:rgba(255,255,255,.025)}
.messages-avatar__group-mark{display:none!important}.messages-chat-card.is-group .messages-avatar{border-radius:16px;box-shadow:0 10px 30px color-mix(in srgb,var(--messages-avatar-color) 24%,transparent)}.messages-chat-card.is-muted::after{content:'🔕';position:absolute;right:12px;bottom:10px;font-size:9px;opacity:.55}.messages-chat-card.is-silent::after{content:'◌';position:absolute;right:12px;bottom:10px;color:#8390a0;font-size:12px}
.message-toast-stack{position:fixed;z-index:5200;right:18px;bottom:18px;display:grid;gap:10px;width:min(390px,calc(100% - 36px));pointer-events:none}.message-toast{display:grid;grid-template-columns:48px minmax(0,1fr) 30px;align-items:center;gap:11px;padding:12px;border:1px solid rgba(221,107,137,.22);border-radius:18px;background:linear-gradient(150deg,rgba(23,31,43,.98),rgba(9,14,21,.99));box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.06);opacity:0;transform:translateY(18px) scale(.98);transition:.24s ease;pointer-events:auto;backdrop-filter:blur(24px)}.message-toast.is-visible{opacity:1;transform:none}.message-toast.is-closing{opacity:0;transform:translateX(22px)}.message-toast__avatar{display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border-radius:50%;color:#fff;background:var(--messages-avatar-color,#8F2F4D);font-weight:900}.message-toast__avatar img{width:100%;height:100%;object-fit:cover}.message-toast__copy{display:grid;gap:2px;min-width:0}.message-toast__copy small{color:#c36d88;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.11em}.message-toast__copy strong{overflow:hidden;color:#f6f7f9;font-size:12px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.message-toast__copy span{overflow:hidden;color:#9eabba;font-size:10px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.message-toast__close{width:28px;height:28px;border-radius:10px;color:#7b8795;background:rgba(255,255,255,.035);cursor:pointer}
.messages-chat-notifications,.messages-group-admin,.messages-group-add,.messages-group-roles{padding:18px 0;border-top:1px solid rgba(255,255,255,.065)}.messages-chat-notifications header,.messages-group-admin header,.messages-group-add header,.messages-group-roles header{margin-bottom:12px}.messages-chat-notifications h3,.messages-group-admin h3,.messages-group-add h3,.messages-group-roles h3{margin:2px 0 0;font-size:15px}.messages-notification-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.messages-notification-modes button{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:12px;color:#9ba6b4;background:rgba(255,255,255,.02);text-align:left}.messages-notification-modes button.is-active{border-color:rgba(213,83,123,.42);color:#f1c1cf;background:rgba(183,47,85,.1)}.messages-notification-modes b{font-size:15px}.messages-notification-modes span{display:grid}.messages-notification-modes strong{font-size:9px}.messages-notification-modes small{font-size:7px;color:#6f7b8a}
.messages-group-settings,.messages-group-avatar-form,.messages-role-create{display:grid;gap:10px}.messages-group-settings label,.messages-group-avatar-form label{display:grid;gap:6px}.messages-group-settings label>span,.messages-group-avatar-form label>span{color:#8995a4;font-size:9px;font-weight:750}.messages-group-settings input,.messages-group-settings textarea,.messages-group-settings select,.messages-group-avatar-form input,.messages-role-create input,.messages-member-role-select,.messages-group-search input{width:100%;min-height:40px;padding:9px 11px;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#e8ebef;background:#0c131c;font:inherit;font-size:10px}.messages-group-primary,.messages-group-avatar-form button,.messages-role-create button{min-height:40px;border-radius:11px;color:#fff;background:linear-gradient(135deg,#b83c61,#76203d);font-size:10px;font-weight:800;cursor:pointer}.messages-group-avatar-form{margin-top:12px}.messages-group-search-results{display:grid;max-height:220px;overflow:auto}.messages-group-selected{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.messages-group-selected button{padding:7px 9px;border-radius:9px;color:#efc0ce;background:rgba(183,47,85,.12);font-size:9px}.messages-role-create{margin-top:10px;padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:12px}.messages-role-create>div{display:grid;grid-template-columns:1fr 44px;gap:8px}.messages-role-create label{color:#8f9baa;font-size:9px}.messages-role-row{display:grid;grid-template-columns:8px 1fr;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}.messages-role-row i{width:8px;height:28px;border-radius:99px;background:var(--role-color)}.messages-role-row span{display:grid}.messages-role-row strong{font-size:10px}.messages-role-row small{font-size:8px;color:#74808f}
.messages-member-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055)}.messages-member-row>span:nth-child(2){display:grid;gap:2px}.messages-member-row strong{font-size:10px}.messages-member-row small{font-size:8px;color:#758190}.messages-member-role-select{grid-column:2;margin-top:5px}.messages-member-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:6px}.messages-member-actions button{padding:7px 9px;border-radius:9px;color:#b9c2ce;background:rgba(255,255,255,.04);font-size:8px}.messages-member-actions button.is-danger{color:#eca8b0;background:rgba(196,65,81,.11)}
@media(max-width:680px){.message-toast-stack{top:max(8px,env(safe-area-inset-top));right:7px;bottom:auto;left:7px;width:auto}.message-toast{border-radius:22px;transform:translateY(-120%) scale(.98)}.message-toast.is-visible{transform:none}.message-toast.is-closing{transform:translateY(-120%)}.messages-site-exit{display:grid}.messages-chat__site{display:grid}.messages-chat__left-actions{gap:5px}.messages-chat__header{grid-template-columns:auto minmax(0,1fr) auto}.messages-notification-modes{grid-template-columns:1fr}.messages-info-panel{padding-bottom:calc(28px + env(safe-area-inset-bottom))}}


/* ==========================================================================
   GROUP SETTINGS V19 — отдельный аккуратный экран управления
   ========================================================================== */

.messages-group-settings-launch {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;

    width: calc(100% - 32px);
    min-height: 72px;
    margin: 16px;
    padding: 11px 13px;

    border: 1px solid rgba(210, 82, 121, 0.16);
    border-radius: 16px;

    color: #d9dfe6;
    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(183, 47, 85, 0.12),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );

    text-align: left;
    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    transition:
        transform 170ms ease,
        border-color 170ms ease,
        background 170ms ease;
}

.messages-group-settings-launch:hover {
    border-color: rgba(219, 99, 135, 0.3);

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(183, 47, 85, 0.18),
            transparent 43%
        ),
        rgba(255, 255, 255, 0.035);

    transform: translateY(-1px);
}

.messages-group-settings-launch[hidden] {
    display: none !important;
}

.messages-group-settings-launch__icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(219, 99, 135, 0.2);
    border-radius: 15px;

    color: #e285a1;
    background:
        linear-gradient(
            145deg,
            rgba(183, 47, 85, 0.18),
            rgba(116, 29, 57, 0.07)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.messages-group-settings-launch > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.messages-group-settings-launch strong {
    color: #eef1f5;

    font-size: 11px;
    font-weight: 850;
}

.messages-group-settings-launch small {
    overflow: hidden;

    color: #788595;

    font-size: 8px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-group-settings-launch > i {
    color: #9f6074;

    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.messages-group-settings-panel {
    position: absolute;
    z-index: 8;
    inset: 0;

    display: grid;
    grid-template-rows:
        auto
        auto
        minmax(0, 1fr);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(151, 45, 78, 0.13),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #111925,
            #080d14
        );

    animation:
        messagesGroupSettingsIn
        220ms
        cubic-bezier(
            0.2,
            0.85,
            0.25,
            1
        )
        both;
}

.messages-group-settings-panel[hidden] {
    display: none !important;
}

@keyframes messagesGroupSettingsIn {
    from {
        opacity: 0;
        transform: translateX(22px);
    }
}

.messages-group-settings-panel__header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;

    min-height: 76px;
    padding: 13px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.065);

    background: rgba(11, 17, 25, 0.95);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.messages-group-settings-panel__header h2 {
    margin: 3px 0 0;

    font-size: 18px;
    font-weight: 860;
    letter-spacing: -0.03em;
}

.messages-group-settings-panel__back {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    color: #aab4c1;
    background: rgba(255, 255, 255, 0.025);

    cursor: pointer;
}

.messages-group-settings-panel__back:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.055);
}

.messages-group-settings-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;

    padding: 10px 12px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.055);

    background: rgba(5, 9, 14, 0.35);
}

.messages-group-settings-tabs button {
    position: relative;

    min-height: 38px;
    padding: 0 8px;

    border: 0;
    border-radius: 10px;

    color: #758292;
    background: transparent;

    font-size: 8px;
    font-weight: 780;

    cursor: pointer;
}

.messages-group-settings-tabs button:hover {
    color: #cbd2db;
    background: rgba(255, 255, 255, 0.025);
}

.messages-group-settings-tabs button.is-active {
    color: #f4d4dd;

    background:
        linear-gradient(
            135deg,
            rgba(183, 47, 85, 0.22),
            rgba(116, 29, 57, 0.08)
        );

    box-shadow:
        inset 0 0 0 1px rgba(219, 99, 135, 0.16);
}

.messages-group-settings-tabs button.is-active::after {
    position: absolute;
    right: 28%;
    bottom: 3px;
    left: 28%;

    height: 2px;

    border-radius: 99px;
    background: #d55e82;

    content: "";
}

.messages-group-settings-tabs button[hidden] {
    display: none !important;
}

.messages-group-settings-panel__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 14px 16px 30px;
}

.messages-group-settings-pane[hidden] {
    display: none !important;
}

.messages-group-settings-panel
.messages-group-admin,
.messages-group-settings-panel
.messages-group-add,
.messages-group-settings-panel
.messages-group-roles {
    padding: 0;

    border-top: 0;
}

.messages-group-settings-panel
.messages-group-admin > header,
.messages-group-settings-panel
.messages-group-add > header,
.messages-group-settings-panel
.messages-group-roles > header {
    margin-bottom: 14px;
}

.messages-group-settings-panel
.messages-group-admin h3,
.messages-group-settings-panel
.messages-group-add h3,
.messages-group-settings-panel
.messages-group-roles h3 {
    font-size: 17px;
}

.messages-group-settings-panel
.messages-group-settings,
.messages-group-settings-panel
.messages-group-avatar-form,
.messages-group-settings-panel
.messages-role-create {
    gap: 13px;
}

.messages-group-settings-panel
.messages-group-settings label,
.messages-group-settings-panel
.messages-group-avatar-form label {
    gap: 7px;
}

.messages-group-settings-panel
.messages-group-settings label > span,
.messages-group-settings-panel
.messages-group-avatar-form label > span {
    color: #9ba6b4;

    font-size: 9px;
    font-weight: 760;
}

.messages-group-settings-panel
.messages-group-settings input,
.messages-group-settings-panel
.messages-group-settings textarea,
.messages-group-settings-panel
.messages-group-settings select,
.messages-group-settings-panel
.messages-group-avatar-form input,
.messages-group-settings-panel
.messages-role-create input,
.messages-group-settings-panel
.messages-group-search input {
    min-height: 46px;

    border-color: rgba(255, 255, 255, 0.085);
    border-radius: 12px;

    background: rgba(5, 10, 16, 0.6);

    font-size: 10px;
    font-weight: 650;
}

.messages-group-settings-panel
.messages-group-settings textarea {
    min-height: 116px;

    resize: vertical;
}

.messages-group-settings-panel
.messages-group-primary,
.messages-group-settings-panel
.messages-group-avatar-form button,
.messages-group-settings-panel
.messages-role-create button {
    min-height: 45px;

    border: 1px solid rgba(220, 101, 136, 0.22);
    border-radius: 12px;

    box-shadow:
        0 12px 28px rgba(94, 22, 48, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.messages-group-settings-panel
.messages-group-avatar-form {
    margin-top: 16px;
    padding-top: 16px;

    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.messages-group-settings-panel
.messages-role-create {
    margin-top: 14px;
    padding: 14px;

    border-color: rgba(255, 255, 255, 0.075);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.018);
}

.messages-group-settings-panel
.messages-group-search-results {
    max-height: 320px;

    margin-top: 8px;
}

.messages-app.is-group-settings-open
.messages-info-panel {
    overflow: hidden;
}

@media (max-width: 680px) {
    .messages-group-settings-launch {
        width: calc(100% - 24px);
        margin: 12px;
    }

    .messages-group-settings-panel {
        position: fixed;
        z-index: 12020;
        inset: 0;

        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);

        border-radius: 0;
    }

    .messages-group-settings-panel__header {
        min-height: 68px;
        padding: 10px 12px;
    }

    .messages-group-settings-panel__header h2 {
        font-size: 17px;
    }

    .messages-group-settings-tabs {
        padding: 8px;
    }

    .messages-group-settings-tabs button {
        min-height: 40px;

        font-size: 8px;
    }

    .messages-group-settings-panel__body {
        padding:
            14px
            12px
            calc(
                24px
                + env(safe-area-inset-bottom)
            );
    }
}


/* ========================================================================== 
   MESSAGES V21 — цвет групп и закрепления
   ========================================================================== */

.messages-chat-list__section {
    padding: 10px 10px 6px;

    color: #687585;

    font-size: 8px;
    font-weight: 820;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.messages-chat-card {
    position: relative;

    padding-right: 42px;

    cursor: pointer;
}

.messages-chat-card.is-pinned {
    border-color: rgba(218, 99, 135, 0.22);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(190, 71, 108, 0.11),
            transparent 42%
        ),
        rgba(255, 255, 255, 0.024);
}

.messages-chat-card__pin {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: 10px;

    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    border: 1px solid transparent;
    border-radius: 10px;

    color: #596675;
    background: transparent;

    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);

    transition:
        opacity 150ms ease,
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.messages-chat-card:hover
.messages-chat-card__pin,
.messages-chat-card:focus-within
.messages-chat-card__pin,
.messages-chat-card__pin.is-active {
    opacity: 1;
}

.messages-chat-card__pin:hover,
.messages-chat-card__pin.is-active {
    border-color: rgba(216, 94, 130, 0.2);

    color: #e07d9b;
    background: rgba(190, 71, 108, 0.1);
}

.messages-pinned-banner {
    position: relative;
    z-index: 20;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: stretch;

    min-height: 54px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.065);

    background:
        linear-gradient(
            90deg,
            rgba(151, 45, 78, 0.13),
            rgba(12, 18, 27, 0.96) 34%,
            rgba(12, 18, 27, 0.96)
        );

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.18);
}

.messages-pinned-banner[hidden] {
    display: none !important;
}

.messages-pinned-banner__open {
    display: grid;
    grid-template-columns: 3px 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 7px 8px 7px 13px;

    border: 0;

    color: #d5dce5;
    background: transparent;

    text-align: left;
    cursor: pointer;
}

.messages-pinned-banner__line {
    align-self: stretch;

    width: 3px;

    border-radius: 99px;
    background:
        linear-gradient(
            180deg,
            #ef8aaa,
            #a92f55
        );
}

.messages-pinned-banner__icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border: 1px solid rgba(219, 99, 135, 0.16);
    border-radius: 11px;

    color: #de7393;
    background: rgba(183, 47, 85, 0.08);
}

.messages-pinned-banner__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.messages-pinned-banner__copy strong {
    color: #d97b97;

    font-size: 9px;
    font-weight: 850;
}

.messages-pinned-banner__copy small {
    overflow: hidden;

    color: #8995a4;

    font-size: 8px;
    font-weight: 660;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-pinned-banner__remove {
    align-self: center;

    width: 28px;
    height: 28px;

    border-radius: 10px;

    color: #73808f;
    background: transparent;

    font-size: 18px;
    cursor: pointer;
}

.messages-pinned-banner__remove:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.message-bubble.is-pinned-message
.message-bubble__content {
    border-color: rgba(222, 115, 147, 0.28);

    box-shadow:
        0 0 0 1px rgba(183, 47, 85, 0.08),
        0 13px 34px rgba(0, 0, 0, 0.24);
}

.messages-create__color-control,
.messages-group-color-field__control {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.messages-create__color-control input[type="color"],
.messages-group-color-field__control input[type="color"] {
    width: 48px;
    height: 42px;
    padding: 3px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
}

.messages-create__color-control small,
.messages-group-color-field__control small {
    color: #6f7b8a;

    font-size: 8px;
    font-weight: 650;
    line-height: 1.45;
}

@media (max-width: 680px) {
    .messages-chat-card__pin {
        right: 8px;

        opacity: 0.72;
    }

    .messages-chat-card {
        padding-right: 39px;
    }

    .messages-pinned-banner {
        min-height: 58px;
    }

    .messages-pinned-banner__open {
        grid-template-columns: 3px 30px minmax(0, 1fr);
        padding-left: 9px;
    }
}


/* ==========================================================================
   MESSAGES V22 — стабильный цвет названия и Telegram-style закреп
   ========================================================================== */

.messages-group-name {
    color: var(--user-group-color, #D86A8C) !important;

    text-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--user-group-color, #D86A8C) 24%,
            transparent
        );
}

.messages-create__color-control input[type="color"],
.messages-group-color-field__control input[type="color"] {
    overflow: hidden;

    border-color:
        color-mix(
            in srgb,
            currentColor 14%,
            rgba(255, 255, 255, 0.08)
        );

    background: #0b1119;
}

.messages-create__color-control input[type="color"]::-webkit-color-swatch,
.messages-group-color-field__control input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 8px;
}

.messages-create__color-control input[type="color"]::-moz-color-swatch,
.messages-group-color-field__control input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 8px;
}

/*
 * Компактная закреплённая строка, как в Telegram:
 * без лишней карточки, с одним понятным pushpin-символом.
 */
.messages-pinned-banner {
    --pinned-accent: #D86A8C;

    position: relative;
    z-index: 20;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;

    min-height: 50px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--pinned-accent) 10%,
                #0b1119
            ),
            rgba(10, 15, 23, 0.985) 42%
        );

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.16);
}

.messages-pinned-banner::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 10px;

    width: 3px;

    border-radius: 99px;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--pinned-accent) 80%,
                white
            ),
            var(--pinned-accent)
        );

    box-shadow:
        0 0 15px
        color-mix(
            in srgb,
            var(--pinned-accent) 28%,
            transparent
        );

    content: "";
}

.messages-pinned-banner[hidden] {
    display: none !important;
}

.messages-pinned-banner__open {
    display: grid;
    grid-template-columns:
        27px
        minmax(0, 1fr)
        18px;
    align-items: center;
    gap: 9px;

    min-width: 0;
    min-height: 50px;
    padding: 5px 8px 5px 20px;

    border: 0;

    color: #dbe1e8;
    background: transparent;

    text-align: left;
    cursor: pointer;
}

.messages-pinned-banner__open:hover {
    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--pinned-accent) 7%,
                transparent
            ),
            transparent 70%
        );
}

.messages-pinned-banner__icon {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    color: var(--pinned-accent);

    filter:
        drop-shadow(
            0 0 7px
            color-mix(
                in srgb,
                var(--pinned-accent) 25%,
                transparent
            )
        );
}

.messages-pinned-banner__copy {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    min-width: 0;
    gap: 1px 7px;
    align-items: baseline;
}

.messages-pinned-banner__label {
    grid-column: 1 / -1;

    color:
        color-mix(
            in srgb,
            var(--pinned-accent) 82%,
            white
        );

    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.messages-pinned-banner__copy strong {
    overflow: hidden;

    color: #e6eaf0;

    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-pinned-banner__copy small {
    overflow: hidden;

    color: #8995a4;

    font-size: 8px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-pinned-banner__arrow {
    display: grid;
    place-items: center;

    color: #657181;
}

.messages-pinned-banner__remove {
    display: grid;
    place-items: center;
    justify-self: center;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 1px solid transparent;
    border-radius: 10px;

    color: #6f7b8a;
    background: transparent;

    cursor: pointer;

    transition:
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.messages-pinned-banner__remove:hover {
    border-color: rgba(255, 255, 255, 0.08);

    color: #eef2f6;
    background: rgba(255, 255, 255, 0.045);
}

.message-action-menu__icon {
    display: grid;
    place-items: center;

    width: 19px;
    height: 19px;
}

.messages-chat-card__pin svg,
.message-action-menu__icon svg {
    display: block;
}

.message-bubble.is-pinned-message
.message-bubble__content {
    border-color:
        color-mix(
            in srgb,
            var(--pinned-accent, #D86A8C) 30%,
            rgba(255, 255, 255, 0.08)
        );

    box-shadow:
        0 0 0 1px
        color-mix(
            in srgb,
            var(--pinned-accent, #D86A8C) 10%,
            transparent
        ),
        0 13px 34px rgba(0, 0, 0, 0.22);
}

@media (max-width: 680px) {
    .messages-pinned-banner {
        min-height: 54px;
    }

    .messages-pinned-banner__open {
        min-height: 54px;
        padding-left: 19px;
    }

    .messages-pinned-banner__copy {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .messages-pinned-banner__copy strong {
        font-size: 9px;
    }

    .messages-pinned-banner__copy small {
        font-size: 8px;
    }
}


/* ==========================================================================
   MESSAGES V23 — единое кадрирование аватаров
   ========================================================================== */

.messages-avatar,
.message-toast__avatar,
.messages-member-avatar,
.messages-chat-card__avatar {
    --avatar-crop-x: 50%;
    --avatar-crop-y: 50%;
    --avatar-zoom: 1;

    overflow: hidden;
}

.messages-avatar img,
.message-toast__avatar img,
.messages-member-avatar img,
.messages-chat-card__avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position:
        var(--avatar-crop-x)
        var(--avatar-crop-y);

    transform: scale(var(--avatar-zoom));
    transform-origin:
        var(--avatar-crop-x)
        var(--avatar-crop-y);
}


/* ==========================================================================
   MESSAGES V24 — мобильные действия и изображения без рамок
   ========================================================================== */

/*
 * Экран больше не размывается при долгом нажатии, ответе,
 * редактировании, закреплении или открытии меню сообщения.
 */
@media (max-width: 680px) {
    .messages-app.is-message-action-open::after {
        background: rgba(2, 5, 9, 0.34) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .message-action-menu {
        background:
            linear-gradient(
                160deg,
                rgba(22, 30, 42, 0.998),
                rgba(9, 14, 21, 0.998)
            ) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .message-bubble.is-action-open,
    .message-bubble.is-reply-target,
    .message-bubble.is-edit-target {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /*
     * У входящих и исходящих сообщений остаётся нормальное свободное
     * пространство со стороны противоположного края экрана.
     */
    .message-bubble:not(.is-own) {
        width: fit-content;
        max-width: calc(100% - 54px) !important;
        margin-right: auto !important;
        padding-right: 10px;
    }

    .message-bubble.is-own {
        width: fit-content;
        max-width: calc(100% - 42px) !important;
        margin-left: auto !important;
        padding-left: 10px;
    }

    .message-bubble:not(.is-own)
    .message-bubble__content,
    .message-bubble.is-own
    .message-bubble__content {
        max-width: 100%;
    }
}

/*
 * Медиа без искусственной цветной рамки.
 * Размер сохраняет исходные пропорции и только уменьшается,
 * если изображение шире доступного пространства.
 */
.message-media-item {
    background: transparent !important;
    box-shadow: none !important;
}

.message-bubble__media {
    background: transparent !important;
}

.message-bubble__media:not(.is-multiple) {
    width: fit-content;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.message-bubble__media:not(.is-multiple)
.message-media-item {
    display: block;

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

    border: 0;
    border-radius: 15px;

    background: transparent !important;
}

.message-bubble__media:not(.is-multiple)
.message-media-item img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(72svh, 760px);

    border: 0;
    border-radius: 15px;

    object-fit: contain;
    background: transparent;
}

/*
 * Пост только с картинкой или GIF не получает бордовую/серую
 * капсулу вокруг медиа.
 */
.message-bubble.is-media-only
.message-bubble__content,
.message-bubble.is-media-only.is-own
.message-bubble__content {
    min-width: 0;
    max-width: 100%;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 15px !important;

    background: transparent !important;

    box-shadow: none !important;
}

.message-bubble.is-media-only
.message-bubble__media {
    overflow: visible;

    margin: 0 !important;

    border-radius: 15px;

    background: transparent !important;
}

.message-bubble.is-media-only footer {
    right: 7px;
    bottom: 7px;

    border-color: rgba(255, 255, 255, 0.08);

    background: rgba(4, 7, 11, 0.58);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/*
 * Если у сообщения есть и картинка, и текст, изображение касается
 * краёв капсулы и не получает внутреннюю цветную рамку.
 */
.message-bubble.has-media:not(.is-media-only)
.message-bubble__media {
    margin:
        -8px
        -11px
        8px;

    border-radius:
        16px
        16px
        10px
        10px;
}

.message-bubble.has-media:not(.is-media-only)
.message-media-item {
    border-radius: inherit;
}

.message-bubble.has-media:not(.is-media-only)
.message-media-item img {
    border-radius: inherit;
}

@media (max-width: 680px) {
    .message-bubble__media:not(.is-multiple)
    .message-media-item img {
        max-width: min(82vw, 100%);
        max-height: 68svh;
    }

    .message-bubble.is-media-only {
        max-width: calc(100% - 30px) !important;
        padding: 0;
    }

    .message-bubble.is-media-only:not(.is-own) {
        margin-right: auto !important;
    }

    .message-bubble.is-media-only.is-own {
        margin-left: auto !important;
    }
}


/* ==========================================================================
   MESSAGES V28 — stable media frame and scroll
   ========================================================================== */

/*
 * Polling and image loading must not animate the scroll position.
 * Smooth movement is used only for explicit "go to message" actions.
 */
.messages-stream {
    scroll-behavior: auto !important;
    overflow-anchor: none;
    overscroll-behavior: contain;
}

.messages-stream > * {
    overflow-anchor: none;
}

/*
 * Text messages and messages with text + media keep the normal grid.
 */
.message-bubble.has-media:not(.is-media-only) {
    width: auto !important;
    max-width: min(72%, 690px) !important;
}

.message-bubble.has-media:not(.is-media-only)
.message-bubble__content {
    width: auto !important;
    height: auto !important;
    min-width: 92px !important;
    max-width: 690px !important;
}

/*
 * A message containing only one image is removed from the grid entirely.
 * This prevents the grid track from stretching into an empty dark frame.
 */
.message-bubble.is-media-only[data-single-media="true"] {
    position: relative;

    display: block !important;

    width: var(
        --message-single-media-width
    ) !important;

    min-width: 0 !important;
    max-width: calc(100% - 74px) !important;

    margin-top: 6px;
    margin-bottom: 6px;
}

.message-bubble.is-media-only[data-single-media="true"]:not(.is-own) {
    margin-right: auto !important;
    margin-left: 44px !important;
}

.message-bubble.is-media-only[data-single-media="true"].is-own {
    margin-right: 0 !important;
    margin-left: auto !important;
}

.message-bubble.is-media-only[data-single-media="true"]
.message-bubble__avatar {
    position: absolute;
    bottom: 0;
    left: -44px;

    display: grid;
}

.message-bubble.is-media-only[data-single-media="true"].is-own
.message-bubble__avatar {
    display: none;
}

.message-bubble.is-media-only[data-single-media="true"]
.message-bubble__content {
    display: block !important;

    width: var(
        --message-single-media-width
    ) !important;

    height: var(
        --message-single-media-height
    ) !important;

    min-width: 0 !important;
    max-width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 15px !important;

    background: transparent !important;

    box-shadow: none !important;
}

.message-bubble.is-media-only[data-single-media="true"]
.message-bubble__media {
    display: block !important;

    width: var(
        --message-single-media-width
    ) !important;

    height: var(
        --message-single-media-height
    ) !important;

    max-width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden;

    border-radius: 15px;

    background: transparent !important;
}

.message-bubble.is-media-only[data-single-media="true"]
.message-media-item {
    display: block !important;

    width: var(
        --message-single-media-width
    ) !important;

    height: var(
        --message-single-media-height
    ) !important;

    max-width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden;

    border: 0 !important;
    border-radius: 15px;

    background: transparent !important;

    box-shadow: none !important;
}

.message-bubble.is-media-only[data-single-media="true"]
.message-media-item img {
    display: block !important;

    width: var(
        --message-single-media-width
    ) !important;

    height: var(
        --message-single-media-height
    ) !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 15px;

    object-fit: contain !important;

    background: transparent !important;
}

/*
 * Action controls are absolutely positioned and no longer influence
 * the width of an image-only message.
 */
.message-bubble.is-media-only[data-single-media="true"]
.message-bubble__quick-reply,
.message-bubble.is-media-only[data-single-media="true"]
.message-bubble__menu {
    position: absolute;
    bottom: 3px;
}

.message-bubble.is-media-only[data-single-media="true"]:not(.is-own)
.message-bubble__quick-reply {
    right: -35px;
}

.message-bubble.is-media-only[data-single-media="true"]:not(.is-own)
.message-bubble__menu {
    right: -67px;
}

.message-bubble.is-media-only[data-single-media="true"].is-own
.message-bubble__quick-reply {
    left: -35px;
}

.message-bubble.is-media-only[data-single-media="true"].is-own
.message-bubble__menu {
    left: -67px;
}

.message-bubble.is-media-only[data-single-media="true"]
footer {
    right: 7px;
    bottom: 7px;

    background: rgba(4, 7, 11, 0.64);

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/*
 * Keep the composer and header stable while the stream scrolls.
 */
.messages-chat,
.messages-conversation,
.messages-stream {
    min-height: 0;
}

.messages-composer,
.messages-chat__header,
.messages-pinned-banner {
    flex-shrink: 0;
}

@media (max-width: 680px) {
    .message-bubble.is-media-only[data-single-media="true"] {
        max-width: calc(100% - 54px) !important;
    }

    .message-bubble.is-media-only[data-single-media="true"]:not(.is-own) {
        margin-left: 40px !important;
    }

    .message-bubble.is-media-only[data-single-media="true"]
    .message-bubble__avatar {
        left: -40px;

        width: 32px;
        height: 32px;
    }

    .message-bubble.is-media-only[data-single-media="true"]:not(.is-own)
    .message-bubble__menu {
        right: -32px;
    }

    .message-bubble.is-media-only[data-single-media="true"]:not(.is-own)
    .message-bubble__quick-reply {
        right: -2px;
        bottom: -31px;
    }

    .message-bubble.is-media-only[data-single-media="true"].is-own
    .message-bubble__menu {
        left: -32px;
    }

    .message-bubble.is-media-only[data-single-media="true"].is-own
    .message-bubble__quick-reply {
        left: -2px;
        bottom: -31px;
    }
}