.tg_chat_bg_pattern {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background: url("/static/site/img/tg_bg_pattern.d0c22c6a9702.svg") center repeat;
    background-size: 420px auto;
}

.tg_chat_bg_color {
    background-color: #88b884;
}

.bubble-content-wrapper {
    &.mobile {
        max-width: 255px;
    }

}

.tg_message {
    max-width: 30rem;
    color: black;
}

tg-spoiler {
    position: relative;
    filter: blur(1px);
}

tg-spoiler:hover {
    filter: blur(0);
}

.message_bubble {
    font-family: 'Roboto', sans-serif;

    position: relative;

    margin-right: auto;

    min-width: 200px;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
    padding: 4px 9px;
    border-radius: 15px;
    box-shadow: 0 1px 2px #10232f26;
    background-color: #fff;

    .message_author {
        font-size: 14px;
        line-height: 19px;
        margin: 1px 0 0;
        color: #2481cc;
        text-align: left;
        text-overflow: ellipsis;
        font-weight: 500;
    }

    .message_media_wrap {
        margin: 10px -9px;
        min-width: calc(100% + 18px) !important;
        max-width: calc(100% + 18px) !important;

        position: relative;
        overflow: hidden;

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;

        img, video {
            flex: 1 calc(33.333%); /* до 3 в ряд */
            min-width: calc((100% - 16px) / 3);
            height: auto;
            object-fit: contain;
            box-sizing: border-box;
            max-height: 25rem;
        }

        &:has(:nth-child(2)) {
            img,
            video {
                height: 200px; /* однакова висота */
                object-fit: cover;
            }
        }
    }

    .message_text {
        font-size: 14px;
        line-height: 21px;
        word-break: break-word;
        margin-top: 6px;
        white-space: pre-wrap;

        b, strong {
            font-weight: 500;
        }

        & > p {
            min-height: 21px;
        }

        a {
            color: #2481cc;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        blockquote {
            display: block;
            width: fit-content;
            margin: 4px 0;
            padding: 2px 34px 2px 12px;
            position: relative;
            border-radius: 4px;
            background-image: linear-gradient(45deg, rgb(36, 129, 204), rgb(36, 129, 204));
            background-color: rgba(36, 129, 204, 0.12);
            background-size: 2.8px 100%;
            background-repeat: no-repeat;

            &::after {
                content: "";
                position: absolute;
                width: 12px;
                height: 12px;
                top: 6px;
                right: 4px;
                background-color: rgb(36, 129, 204);
                mask: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 366.3018'%3E%3Cpath d='M3 101q0-18 9-33t24-23.5T68.5 36t32.5 8.5T125 68t9 33v19q0 54-24 102l-12 24q-6 12-19 16t-25-2-16.5-18.5T39 217l12-24q7-13 11-27-25-3-42-21.5T3 101zm163 0q0-18 9-33t24-23.5 32.5-8.5 32.5 8.5T288 68t9 33v19q0 54-24 102l-12 24q-6 12-19 16t-25-2-16.5-18.5T202 217l12-24q7-13 11-27-25-3-42-21.5T166 101z'/%3E%3C/svg%3E");
            }
        }
    }

    .message_footer {
        font-size: 12px;
        line-height: 14px;
        color: #7d7f81;
        margin: 5px 0 0;

        .message_info {
            text-align: right;

            .message_views {
                &::after {
                    content: '';
                    display: inline-block;
                    width: 16px;
                    height: 10px;
                    margin-left: 5px;
                    background: url("data:image/svg+xml,%3Csvg%20height%3D%2210%22%20viewBox%3D%220%200%2016%2010%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m8%200c2.8897625%200%205.2230958%201.66666667%207%205-1.7769042%203.33333333-4.1102375%205-7%205-2.88976248%200-5.22309581-1.66666667-7-5%201.77690419-3.33333333%204.11023752-5%207-5zm0%201.48148148c-1.98523978%200-3.59459459%201.5752944-3.59459459%203.51851852s1.60935481%203.51851852%203.59459459%203.51851852%203.5945946-1.5752944%203.5945946-3.51851852-1.60935482-3.51851852-3.5945946-3.51851852zm0%201.85185185c.94037674%200%201.7027027.74619209%201.7027027%201.66666667s-.76232596%201.66666667-1.7027027%201.66666667-1.7027027-.74619209-1.7027027-1.66666667.76232596-1.66666667%201.7027027-1.66666667z%22%20fill%3D%22%237d7f81%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
                }
            }
        }
    }

    .hidden {
        display: none;
    }
}

.message_inline_keyboard {
    position: relative;

    .row {
        margin-top: 6px;
        display: flex;
        gap: 6px;

        .button {
            cursor: pointer;

            display: inline-block;
            position: relative;
            font-size: 14px;
            line-height: 21px;
            text-decoration: none;
            background: rgba(74, 142, 58, 0.6);

            font-weight: 500;
            box-shadow: none;
            color: #fff;
            border-radius: 10px;
            padding: 7px 12px 6px;
            text-align: center;
            width: 1px;
            box-sizing: border-box;
            flex-grow: 1;
            flex-shrink: 1;
        }

        .button--link {
            padding-right: 24px;

            &::after {
                content: '';
                position: absolute;
                top: 6px;
                right: 8px;
                width: 10px;
                height: 10px;
                background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20d%3D%22M3.4%201.5H8.5V6.6H7.4V3.2L2.4%208.2L1.6%207.4L6.6%202.4H3.4V1.5Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
                opacity: 0.9;
                pointer-events: none;
            }
        }
    }
}

.tg_poll-placeholder {
    margin-top: 10px;
    font-size: 13px;
    line-height: 18px;
    color: #7d7f81;
}

.tg_poll {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg_poll-question {
    font-size: 15px;
    line-height: 21px;
    font-weight: 500;
    color: #17212b;
}

.tg_poll-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg_poll-option {
    position: relative;
    padding-bottom: 5px;
    padding-left: 18px;
    cursor: pointer;
}

.tg_poll-option::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;

    width: 14px;
    height: 14px;

    border: 2px solid #dfe1e5;
    border-radius: 50%;
}


.dark, html[data-theme="dark"] {
    .tg_chat_bg_color {
        background-color: #000000;
    }

    .tg_chat_bg_pattern {
        filter: invert(1);
    }

    .tg_message {
        color: white;
    }

    .message_bubble {
        background-color: #303030;

        .message_author {
            color: #64b5ef;
        }

        .message_text {
            a {
                color: #64b5ef;
            }
        }
    }

    .message_inline_keyboard {

        .row {

            .button {
                background: #303030;
            }
        }
    }

    .tg_poll-placeholder {
        color: #a5adba;
    }

    .tg_poll-question {
        color: #f1f1f1;
    }

    .tg_poll-option {
        color: #f1f1f1;
    }
}