.str-chat {
    font-family: var(--str-chat__font-family)
}

.str-chat,.str-chat * {
    box-sizing: border-box
}

.str-chat .float-ui-container,.str-chat .ngxp__container {
    z-index: 1;
    padding: 0!important;
    box-shadow: none!important;
    border-color: transparent!important
}

.str-chat .float-ui-container .ngxp__arrow,.str-chat .ngxp__container .ngxp__arrow {
    display: none
}

stream-icon,stream-icon-placeholder {
    display: flex;
    justify-content: center;
    align-items: center
}

:root {
    --str-chat__theme-version: 2
}

.str-chat {
    --str-chat__spacing-px: 1px;
    --str-chat__spacing-0_5: 0.125rem;
    --str-chat__spacing-1: 0.25rem;
    --str-chat__spacing-1_5: 0.375rem;
    --str-chat__spacing-2: 0.5rem;
    --str-chat__spacing-2_5: 0.625rem;
    --str-chat__spacing-3: 0.75rem;
    --str-chat__spacing-3_5: 0.875rem;
    --str-chat__spacing-4: 1rem;
    --str-chat__spacing-5: 1.25rem;
    --str-chat__spacing-6: 1.5rem;
    --str-chat__spacing-7: 1.75rem;
    --str-chat__spacing-8: 2rem;
    --str-chat__spacing-9: 2.25rem;
    --str-chat__spacing-10: 2.5rem;
    --str-chat__spacing-11: 2.75rem;
    --str-chat__spacing-12: 3rem;
    --str-chat__spacing-14: 3.5rem;
    --str-chat__spacing-16: 4rem;
    --str-chat__image-fallback-icon: url("");
    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32)
}

@font-face {
    font-family: stream-chat-icons;
    src: url("");
    src: url("") format("embedded-opentype"),url("") format("woff2"),url("") format("woff"),url("") format("truetype"),url("") format("svg");
    font-weight: 400;
    font-style: normal
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family:stream-chat-icons;
        src: url("") format("svg")
    }
}

.str-chat .stream-chat__avatar--autocomplete-item {
    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30)
}

.str-chat .stream-chat__avatar--channel-header {
    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 40)
}

.str-chat .stream-chat__avatar--channel-preview {
    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 49)
}

.str-chat .stream-chat__avatar--quoted-message-sender {
    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20)
}

.str-chat .stream-chat__avatar--reaction {
    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30)
}

.str-chat__avatar {
    position: relative
}

.str-chat__avatar .str-chat__avatar-fallback {
    text-align: center;
    height: inherit;
    width: inherit
}

.str-chat__avatar .str-chat__avatar--online-indicator {
    position: absolute;
    width: calc(var(--str-chat__spacing-px)*12);
    height: calc(var(--str-chat__spacing-px)*12);
    inset-inline-end: 3%;
    inset-block-start: 2%
}

.str-chat__loading-channels-avatar {
    flex-shrink: 0;
    width: calc(var(--str-chat__spacing-px)*49);
    height: calc(var(--str-chat__spacing-px)*49)
}

.str-chat-angular__avatar {
    height: var(--str-chat__avatar-size);
    line-height: var(--str-chat__avatar-size);
    width: var(--str-chat__avatar-size)
}

.str-chat-angular__avatar.stream-chat__avatar--one-letter {
    font-size: calc(var(--str-chat__avatar-size)*.5)
}

.str-chat-angular__avatar.stream-chat__avatar--multiple-letters {
    font-size: calc(var(--str-chat__avatar-size)*.3)
}

.str-chat-angular__avatar .str-chat__avatar-image {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.str-chat {
    --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
    --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
    --str-chat__voice-recording-amplitude-bar-width: 2px;
    --str-chat__voice-recording-amplitude-bar-gap-width: var(--str-chat__spacing-px)
}

.str-chat__attachment-list {
    --str-chat__attachment-max-width: calc(var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin)));
    --str-chat__video-height: var(--str-chat__attachment-max-width);
    --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
    --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0
}

.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--header {
    position: relative
}

.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--source-link {
    padding-bottom: var(--str-chat__spacing-2)
}

.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--text {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis
}

.str-chat__attachment-list .str-chat__message-attachment--image,.str-chat__attachment-list .str-chat__message-attachment--video,.str-chat__attachment-list .str-chat__message-attachment-card--header {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.str-chat__attachment-list .str-chat__message-attachment-card--header {
    height: var(--str-chat__scraped-image-height)
}

.str-chat__attachment-list .str-chat__message-attachment-card--header img {
    object-fit: cover;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    cursor: default
}

.str-chat__attachment-list .str-chat__message-attachment-card-react--header img {
    cursor: zoom-in
}

.str-chat__attachment-list .str-chat__message-attachment-card--giphy .str-chat__message-attachment-card--header {
    height: var(--str-chat__gif-height)
}

.str-chat__attachment-list .str-chat__message-attachment-card--giphy .str-chat__message-attachment-card--header img {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
    cursor: default
}

.str-chat__attachment-list .str-chat__message-attachment-card--giphy .str-chat__message-attachment-card-react--header img {
    cursor: zoom-in
}

.str-chat__attachment-list .str-chat__message-attachment--image:not(.str-chat__message-attachment--card)>img {
    height: min(var(--str-chat__attachment-max-width),min(var(--str-chat__attachment-max-width,1000000)/var(--original-width,1000000),1px)*var(--original-height,1000000));
    max-width: var(--str-chat__attachment-max-width);
    max-height: var(--str-chat__attachment-max-width);
    object-fit: cover;
    width: 100%;
    cursor: zoom-in
}

.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
    max-width: var(--str-chat__attachment-max-width);
    display: flex
}

.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) .str-chat__player-wrapper,.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header .str-chat__player-wrapper {
    height: 100%;
    width: 100%;
    min-width: 0;
    max-width: var(--str-chat__attachment-max-width);
    display: flex;
    flex-direction: column
}

.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) .str-chat__player-wrapper .react-player,.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) .str-chat__player-wrapper .str-chat__video-angular,.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header .str-chat__player-wrapper .react-player,.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header .str-chat__player-wrapper .str-chat__video-angular {
    height: 100%;
    width: 100%;
    max-width: var(--str-chat__attachment-max-width);
    max-height: 100%;
    min-height: 0
}

.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card):not(.str-chat__message-attachment-dynamic-size) {
    height: var(--str-chat__video-height)
}

.str-chat__attachment-list .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) {
    max-height: var(--str-chat__video-height)
}

.str-chat__attachment-list .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) .str-chat__player-wrapper {
    height: min(var(--str-chat__video-height),min(var(--str-chat__attachment-max-width,1000000)/var(--original-width,1000000),1px)*var(--original-height,1000000));
    max-height: var(--str-chat__video-height)
}

.str-chat__attachment-list .str-chat__message-attachment--video.str-chat__message-attachment-dynamic-size:not(.str-chat__message-attachment--card) .str-chat__video-angular {
    max-height: var(--str-chat__video-height)
}

.str-chat__attachment-list .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
    height: var(--str-chat__scraped-video-height)
}

.str-chat__attachment-list .str-chat__message-attachment--gallery,.str-chat__attachment-list .str-chat__message-attachment--image:not(.str-chat__message-attachment--card),.str-chat__attachment-list .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
    margin: var(--str-chat__attachment-margin)
}

.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery {
    display: grid;
    grid-template-columns: 50% 50%;
    overflow: hidden;
    width: fit-content;
    gap: var(--str-chat__spacing-0_5);
    max-width: var(--str-chat__attachment-max-width);
    height: var(--str-chat__attachment-max-width)
}

.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery.str-chat__gallery-two-rows {
    grid-template-rows: 50% 50%
}

.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-image {
    padding: 0;
    margin: 0;
    position: relative
}

.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    max-width: var(--str-chat__attachment-max-width)
}

.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
    margin: 0;
    cursor: zoom-in;
    max-width: var(--str-chat__attachment-max-width)
}

.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-placeholder p {
    position: relative;
    z-index: 1
}

.str-chat__attachment-list .str-chat__message-attachment--gallery .str-chat__gallery .str-chat__gallery-placeholder:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.str-chat__attachment-list .str-chat__gallery .str-chat__message-attachment--svg-image,.str-chat__attachment-list .str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
    padding: var(--str-chat__spacing-6)
}

.str-chat__attachment-list .str-chat__gallery .str-chat__message-attachment--svg-image img,.str-chat__attachment-list .str-chat__message-attachment--image.str-chat__message-attachment--svg-image img {
    object-fit: contain;
    max-width: calc(var(--str-chat__attachment-max-width) - var(--str-chat__spacing-6));
    max-height: calc(var(--str-chat__attachment-max-width) - var(--str-chat__spacing-6))
}

.str-chat__attachment-list .str-chat__message-attachment-unsupported {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-2);
    column-gap: var(--str-chat__spacing-4);
    margin: var(--str-chat__attachment-margin)
}

.str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__file-icon {
    width: calc(var(--str-chat__spacing-px)*30)
}

.str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__metadata {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__title {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    max-width: 100%
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget,.str-chat__attachment-list .str-chat__message-attachment-file--item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-2);
    column-gap: var(--str-chat__spacing-4);
    margin: var(--str-chat__attachment-margin)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    row-gap: var(--str-chat__spacing-0_5);
    min-width: 0
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--str-chat__spacing-2)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-file--item-name,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-file--item-name {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    min-width: 0
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-audio-widget--text-first-row .str-chat__message-attachment-download-icon svg,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-text .str-chat__message-attachment-file--item-first-row .str-chat__message-attachment-download-icon svg {
    width: calc(var(--str-chat__spacing-px)*24);
    height: calc(var(--str-chat__spacing-px)*16)
}

.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__file-icon {
    width: calc(var(--str-chat__spacing-px)*34)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--play-controls {
    display: flex;
    align-items: center;
    justify-content: center
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--progress-track {
    max-width: calc(var(--str-chat__spacing-px)*120)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text-second-row {
    display: flex;
    align-items: center;
    width: 100%;
    grid-column-gap: var(--str-chat__spacing-5);
    padding-top: var(--str-chat__spacing-2_5)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--text-second-row .str-chat__message-attachment-file--item-size {
    line-height: calc(var(--str-chat__spacing-px)*14)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track {
    position: relative;
    height: calc(var(--str-chat__spacing-px)*5);
    flex: 1;
    cursor: pointer
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track .str-chat__message-attachment-audio-widget--progress-indicator {
    position: absolute;
    inset-inline-start: 0;
    height: inherit
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget {
    display: grid;
    grid-template-columns: 36px auto 55px;
    align-items: center;
    justify-content: center;
    gap: calc(var(--str-chat__spacing-px)*9);
    padding: var(--str-chat__spacing-2);
    margin: var(--str-chat__attachment-margin)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--str-chat__spacing-2)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata a {
    cursor: pointer;
    text-decoration: none
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment-voice-recording-widget--first-row {
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--str-chat__spacing-1)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment__voice-recording-widget__title {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    min-width: 0
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment-download-icon svg {
    width: calc(var(--str-chat__spacing-px)*24);
    height: calc(var(--str-chat__spacing-px)*16)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment__voice-recording-widget__audio-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--str-chat__spacing-1_5);
    height: 100%
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata .str-chat__message-attachment__voice-recording-widget__error-message {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--str-chat__spacing-1)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__right-section {
    justify-self: center
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__timer {
    min-width: calc(var(--str-chat__spacing-px)*45);
    width: calc(var(--str-chat__spacing-px)*45)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget stream-voice-recording-wavebar {
    flex: 1
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__track {
    position: relative;
    flex: 1;
    width: 100%;
    height: calc(var(--str-chat__spacing-px)*25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--str-chat__voice-recording-amplitude-bar-gap-width)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__amplitude-bar {
    width: var(--str-chat__voice-recording-amplitude-bar-width);
    min-width: var(--str-chat__voice-recording-amplitude-bar-width);
    height: calc(var(--str-chat__wave-progress-bar__amplitude-bar-height) + 2px)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__progress-indicator {
    position: absolute;
    left: 0;
    height: calc(100% + 2px + 2px);
    width: calc(var(--str-chat__spacing-px)*6)
}

.str-chat__attachment-list .str-chat__message_attachment__playback-rate-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2_5)
}

.str-chat__attachment-list .str-chat__message-attachment-card {
    min-width: 0;
    max-width: var(--str-chat__attachment-max-width);
    margin: var(--str-chat__attachment-margin)
}

.str-chat__attachment-list .str-chat__message-attachment-card .str-chat__message-attachment-card--content {
    padding: var(--str-chat__spacing-2_5)
}

.str-chat__attachment-list .str-chat__message-attachment-card .str-chat__message-attachment-card--content .str-chat__message-attachment-card--title {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis
}

.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content {
    padding: 0
}

.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content .str-chat__message-attachment-card-audio-widget {
    display: flex;
    flex-direction: column;
    row-gap: var(--str-chat__spacing-2_5);
    width: 100%;
    padding: var(--str-chat__spacing-2)
}

.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--content .str-chat__message-attachment-card-audio-widget .str-chat__message-attachment-card-audio-widget--first-row {
    display: flex;
    align-items: center;
    column-gap: var(--str-chat__spacing-3_5)
}

.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-form {
    display: flex;
    justify-content: stretch
}

.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-form .str-chat__message-attachment-actions-button {
    cursor: pointer;
    width: 100%;
    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-4);
    white-space: nowrap
}

.str-chat__attachment-list .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy .str-chat__message-attachment-card .str-chat__message-attachment-card--content {
    display: none
}

.str-chat__attachment-list .str-chat-angular__message-attachment-file-single .str-chat__message-attachment-file--item-first-row {
    cursor: pointer;
    text-decoration: none
}

.str-chat__attachment-list .str-chat__message-attachment-download-icon {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16)
}

.str-chat__attachment-list .str-chat__attachment-type-icon {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37)
}

.str-chat__message-attachment-audio-widget--play-button {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--str-chat__spacing-px)*36);
    width: calc(var(--str-chat__spacing-px)*36);
    cursor: pointer
}

.str-chat__message-attachment-audio-widget--play-button svg {
    width: var(--str-chat__spacing-3)
}

.str-chat__quoted-message-preview {
    --str-chat__attachment-margin: 0px
}

.str-chat__quoted-message-preview * {
    cursor: pointer!important
}

.str-chat__quoted-message-preview .str-chat__message-attachment-card .str-chat__message-attachment-card--content,.str-chat__quoted-message-preview .str-chat__message-attachment-card .str-chat__message-attachment-card--source-link {
    display: none
}

.str-chat__quoted-message-preview .str-chat__message-attachment__voice-recording-widget {
    display: flex;
    justify-content: space-between
}

.str-chat__quoted-message-preview .str-chat__message-attachment-file--item-download,.str-chat__quoted-message-preview .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment-audio-widget--play-button,.str-chat__quoted-message-preview .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__track {
    display: none
}

.str-chat__message .str-chat__quoted-message-preview .str-chat__message-attachment-file--item {
    padding: 0
}

.str-chat__audio_recorder__waveform-box,.str-chat__wave-progress-bar__track {
    position: relative;
    flex: 1;
    width: 120px;
    height: calc(var(--str-chat__spacing-px)*25);
    display: flex;
    align-items: center;
    gap: var(--str-chat__spacing-px)
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__amplitude-bar,.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__amplitude-bar {
    width: 2px;
    min-width: 2px;
    height: calc(var(--str-chat__wave-progress-bar__amplitude-bar-height) + 2px)
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__progress-indicator,.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__progress-indicator {
    position: absolute;
    left: 0;
    height: calc(100% + 2px + 2px);
    width: calc(var(--str-chat__spacing-px)*6)
}

.str-chat__attachment-list-angular-host {
    min-width: 0
}

.str-chat__attachment-preview-list {
    --str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 18);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-1_5);
    width: 100%
}

.str-chat__attachment-preview-list .str-chat__attachment-list-scroll-container {
    overflow-y: hidden;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: var(--str-chat__spacing-2)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-image {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: calc(var(--str-chat__spacing-px)*72);
    width: calc(var(--str-chat__spacing-px)*72);
    min-width: calc(var(--str-chat__spacing-px)*72);
    overflow: hidden
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-image-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-thumbnail {
    object-fit: cover;
    height: calc(var(--str-chat__spacing-px)*72);
    width: calc(var(--str-chat__spacing-px)*72);
    word-break: break-all;
    overflow: hidden
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: calc(var(--str-chat__spacing-px)*72);
    width: calc(var(--str-chat__spacing-px)*200);
    position: relative;
    padding: 0 var(--str-chat__spacing-4);
    column-gap: var(--str-chat__spacing-2)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-metadata,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-end,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-metadata,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-end,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-metadata {
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-name,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-title,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-metadata .str-chat__attachment-preview-file-name,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-metadata .str-chat__attachment-preview-title,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-name,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-end .str-chat__attachment-preview-title,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-metadata .str-chat__attachment-preview-file-name,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-metadata .str-chat__attachment-preview-title,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-name,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-end .str-chat__attachment-preview-title,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-metadata .str-chat__attachment-preview-file-name,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-metadata .str-chat__attachment-preview-title {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    max-width: 100%
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
    --str-chat-icon-width: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon svg,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon svg,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon svg {
    height: calc(var(--str-chat__spacing-px)*37);
    width: unset
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
    line-height: calc(var(--str-chat__spacing-px)*13)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download svg {
    width: calc(var(--str-chat__spacing-px)*16);
    height: calc(var(--str-chat__spacing-px)*16)
}

.str-chat__attachment-preview-list button.str-chat__attachment-preview-delete {
    padding: unset;
    background: unset;
    border: unset;
    border-radius: var(--str-chat__border-radius-circle);
    display: flex
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-delete {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
    position: absolute;
    top: calc(var(--str-chat__spacing-px)*2);
    inset-inline-end: calc(var(--str-chat__spacing-px)*2);
    cursor: pointer;
    z-index: 1
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-delete svg {
    width: calc(var(--str-chat__spacing-px)*24);
    height: calc(var(--str-chat__spacing-px)*24)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-error {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: unset;
    background: unset;
    border: unset;
    border-radius: unset;
    inset-inline-start: 0;
    cursor: pointer;
    z-index: 1
}

.str-chat__attachment-preview-list-angular-host {
    width: 100%;
    max-width: 100%
}

.str-chat__message-textarea-angular-host {
    position: relative
}

.str-chat__message-textarea-angular-host mention-list {
    width: 100%
}

.str-chat__message-textarea-angular-host .mention-menu {
    padding: var(--str-chat__spacing-2) 0!important;
    margin: 0!important;
    max-width: 100%
}

.str-chat__message-textarea-angular-host .mention-menu .mention-item {
    padding: 0!important
}

.str-chat__suggestion-list-container {
    position: absolute;
    bottom: var(--str-chat__spacing-7);
    width: 100%;
    padding: var(--str-chat__spacing-2) 0
}

.str-chat__suggestion-list-container .str-chat__suggestion-list {
    overflow-y: auto;
    max-height: calc(var(--str-chat__spacing-px)*320);
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: unset;
    margin: unset
}

.str-chat__slash-command {
    padding: var(--str-chat__spacing-2_5)
}

.str-chat__slash-command .str-chat__slash-command-header .str-chat__slash-command-args {
    margin-inline-start:var(--str-chat__spacing-2)}

.str-chat__user-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-2_5);
    column-gap: var(--str-chat__spacing-2)
}

.str-chat__user-item .str-chat__user-item--name {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    overflow-y: hidden;
    width: 100%
}

.str-chat__emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-2_5);
    column-gap: var(--str-chat__spacing-2)
}

.str-chat__emoji-item .str-chat__emoji-item--name {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    width: 100%
}

.str-chat__message-textarea-angular-host--autocomplete-hidden mention-list {
    display: none
}

.str-chat__audio_recorder-container {
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 3.25rem;
    padding-inline:1rem}

.str-chat__audio_recorder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem
}

.str-chat__audio_recorder button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    padding: 0
}

.str-chat__audio_recorder .str-chat__audio_recorder__cancel-button svg {
    height: 28px
}

.str-chat__audio_recorder .str-chat__audio_recorder__toggle-playback-button svg {
    height: 16px
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button svg {
    height: 12px
}

.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button svg {
    height: 24px
}

.str-chat__audio_recorder .str-chat__audio_recorder__stop-button svg {
    height: 12px
}

.str-chat__audio_recorder .str-chat__audio_recorder__complete-button svg {
    height: 16px
}

.str-chat__audio_recorder .str-chat__recording-timer {
    display: flex;
    align-items: center;
    width: 3rem
}

.str-chat__audio_recorder .str-chat__recording-timer--hours {
    width: 3.75rem
}

.str-chat__audio_recorder .str-chat__wave-progress-bar__track-container {
    padding-block:.5rem;overflow-x: auto;
    height: fit-content
}

.str-chat__audio_recorder .str-chat__waveform-box-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%
}

.str-chat__audio_recorder .str-chat__audio_recorder__waveform-box,.str-chat__audio_recorder .str-chat__wave-progress-bar__track {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    height: 2rem;
    margin-inline:1rem}

.str-chat__audio_recorder .str-chat__wave-progress-bar__track {
    width: 120px
}

.str-chat__audio_recorder .str-chat__audio_recorder__waveform-box {
    overflow-x: hidden
}

.str-chat__base-image .str-chat__message-attachment-file--item-download {
    display: block
}

.str-chat__gallery-image .str-chat__message-attachment-file--item-download,.str-chat__message-attachment--image .str-chat__message-attachment-file--item-download,.str-chat__message-attachment-card--header .str-chat__message-attachment-file--item-download {
    position: absolute;
    top: .5rem;
    right: 1rem
}

.str-chat__attachment-preview-image .str-chat__message-attachment-file--item-download {
    display: none
}

.str-chat__channel {
    flex-direction: column;
    position: relative
}

.str-chat__channel,.str-chat__channel .str-chat__container {
    height: 100%;
    display: flex
}

.str-chat__channel .str-chat__container .str-chat__main-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0
}

.str-chat__channel .str-chat__container .str-chat__main-panel--hideOnThread {
    display: none
}

.str-chat__empty-channel {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-4);
    position: relative
}

.str-chat__empty-channel svg {
    width: calc(var(--str-chat__spacing-px)*136);
    height: calc(var(--str-chat__spacing-px)*136)
}

.str-chat__empty-channel .str-chat__empty-channel-notifications {
    position: absolute;
    inset-block-end: var(--str-chat__spacing-2)
}

.str-chat__loading-channel {
    height: 100%;
    display: flex;
    flex-direction: column
}

.str-chat__loading-channel .str-chat__loading-channel-header {
    display: flex;
    padding: var(--str-chat__spacing-2);
    column-gap: var(--str-chat__spacing-4);
    align-items: center
}

.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-avatar {
    flex-shrink: 0;
    width: calc(var(--str-chat__spacing-px)*40);
    height: calc(var(--str-chat__spacing-px)*40)
}

.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-end {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: hidden;
    flex: 1;
    row-gap: var(--str-chat__spacing-1_5)
}

.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-end .str-chat__loading-channel-header-name {
    border-radius: var(--str-chat__border-radius-xs);
    height: calc(var(--str-chat__spacing-px)*16);
    width: calc(var(--str-chat__spacing-px)*170)
}

.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-end .str-chat__loading-channel-header-info {
    border-radius: var(--str-chat__border-radius-xs);
    height: calc(var(--str-chat__spacing-px)*16);
    width: calc(var(--str-chat__spacing-px)*66)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list {
    padding: 0 var(--str-chat__spacing-2);
    height: 100%
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__li {
    margin-inline:calc(-1 * var(--str-chat__spacing-2));padding-inline: var(--str-chat__spacing-2)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__parent-message-li {
    margin-inline:calc(-1 * var(--str-chat__spacing-2))}

@media only screen and (min-device-width: 768px) {
    .str-chat__loading-channel .str-chat__loading-channel-message-list {
        padding:0 min(var(--str-chat__spacing-10),4%)
    }

    .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__li {
        margin-inline:calc(-1 * min(var(--str-chat__spacing-10), 4%));padding-inline: min(var(--str-chat__spacing-10),4%)
    }

    .str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__parent-message-li {
        margin-inline:calc(-1 * min(var(--str-chat__spacing-10), 4%) - 2px)}
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message {
    display: flex;
    width: 100%;
    column-gap: var(--str-chat__spacing-2);
    padding: var(--str-chat__spacing-4) 0
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-avatar {
    flex-shrink: 0;
    width: calc(var(--str-chat__spacing-px)*49);
    height: calc(var(--str-chat__spacing-px)*49)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-end {
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: var(--str-chat__spacing-2)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-end .str-chat__loading-channel-message-last-row {
    display: flex;
    width: 100%;
    column-gap: var(--str-chat__spacing-2)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-sender {
    height: calc(var(--str-chat__spacing-px)*16);
    width: calc(var(--str-chat__spacing-px)*66)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-text {
    height: calc(var(--str-chat__spacing-px)*16);
    width: 100%
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message .str-chat__loading-channel-message-date {
    height: calc(var(--str-chat__spacing-px)*16);
    width: calc(var(--str-chat__spacing-px)*50)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message:nth-of-type(2) {
    flex-direction: row-reverse
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message:nth-of-type(2) .str-chat__loading-channel-message-sender {
    align-self: end
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message:nth-of-type(2) .str-chat__loading-channel-message-last-row {
    flex-direction: row-reverse
}

.str-chat__loading-channel .str-chat__loading-channel-message-input-row {
    display: flex;
    column-gap: var(--str-chat__spacing-2);
    padding: var(--str-chat__spacing-2)
}

.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-input {
    width: 100%;
    height: calc(var(--str-chat__spacing-px)*36)
}

.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-send {
    height: calc(var(--str-chat__spacing-px)*36);
    width: calc(var(--str-chat__spacing-px)*36)
}

.str-chat__channel-header {
    display: flex;
    padding: var(--str-chat__spacing-2);
    column-gap: var(--str-chat__spacing-4);
    align-items: center
}

.str-chat__channel-header .str-chat__header-hamburger {
    display: none
}

.str-chat__channel-header .str-chat__channel-header-end {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: hidden;
    flex: 1;
    row-gap: var(--str-chat__spacing-1_5)
}

.str-chat__channel-header .str-chat__channel-header-end p {
    margin: 0
}

.str-chat__channel-header .str-chat__channel-header-end .str-chat__channel-header-info,.str-chat__channel-header .str-chat__channel-header-end .str-chat__channel-header-title {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis
}

.str-chat__channel-header .str-chat__channel-header-end .str-chat__channel-header-title {
    overflow-y: hidden
}

.str-chat__channel-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

.str-chat__channel-list .str-chat__channel-list-messenger,.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main {
    height: 100%
}

.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-4)
}

.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty svg {
    width: calc(var(--str-chat__spacing-px)*136);
    height: calc(var(--str-chat__spacing-px)*136)
}

.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty-v1 {
    display: none
}

.str-chat__channel-list .str-chat__load-more-button {
    display: flex;
    justify-content: center;
    margin: var(--str-chat__spacing-2) 0
}

.str-chat__channel-list .str-chat__load-more-button .str-chat__load-more-button__button {
    display: flex;
    align-items: center;
    justify-content: center
}

.str-chat__channel-list .str-chat__down-main {
    display: none
}

.str-chat__channel-list-react {
    overflow: hidden
}

.str-chat__channel-list-react .str-chat__channel-list-messenger-react {
    overflow: hidden;
    padding-bottom: var(--str-chat__spacing-2_5)
}

.str-chat__channel-list-react .str-chat__channel-list-messenger-react .str-chat__channel-list-messenger-react__main {
    overflow-y: auto
}

.str-chat__channel-preview {
    display: flex;
    column-gap: var(--str-chat__spacing-2);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
    margin: 0;
    text-align: start;
    cursor: pointer
}

.str-chat__channel-preview .str-chat__channel-preview-end {
    display: flex;
    flex-direction: column;
    row-gap: var(--str-chat__spacing-0_5);
    width: 100%;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    min-width: 0
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row {
    display: flex;
    column-gap: var(--str-chat__spacing-1);
    align-items: stretch
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row .str-chat__channel-preview-unread-badge {
    display: flex;
    align-items: center;
    padding: 0 var(--str-chat__spacing-2)
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-first-row .str-chat__channel-preview-messenger--name {
    width: 100%
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row {
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    min-width: 0;
    display: flex;
    column-gap: var(--str-chat__spacing-1);
    align-items: center
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--last-message {
    flex: 1
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--status {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15)
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--status svg {
    width: calc(var(--str-chat__spacing-px)*15);
    height: calc(var(--str-chat__spacing-px)*15)
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--last-message,.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--name {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    overflow-y: hidden;
    min-width: 0
}

.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--last-message p,.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-messenger--name p {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    margin: 0
}

.str-chat__channel-preview-loading {
    display: flex;
    column-gap: var(--str-chat__spacing-2);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
    margin: 0;
    text-align: start
}

.str-chat__channel-preview-loading .str-chat__channel-preview-end-loading {
    display: flex;
    flex-direction: column;
    row-gap: var(--str-chat__spacing-0_5);
    width: 100%
}

.str-chat__channel-preview-loading .str-chat__loading-channels-username {
    height: calc(var(--str-chat__spacing-px)*16);
    width: calc(var(--str-chat__spacing-px)*66)
}

.str-chat__channel-preview-loading .str-chat__loading-channels-status {
    height: calc(var(--str-chat__spacing-px)*16);
    width: 100%
}

.str-chat__channel-search {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.str-chat__channel-search.str-chat__channel-search--with-results.str-chat__channel-search--inline {
    height: 100%
}

.str-chat__channel-search.str-chat__channel-search--inline {
    min-height: 0
}

.str-chat__channel-search .str-chat__channel-search-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-2_5);
    height: 65px
}

.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-bar-button {
    background: none;
    border: none;
    width: calc(var(--str-chat__spacing-px)*40);
    height: calc(var(--str-chat__spacing-px)*40);
    padding: var(--str-chat__spacing-2_5);
    cursor: pointer
}

.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    padding: var(--str-chat__spacing-2_5);
    min-width: 0
}

.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button,.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--icon {
    display: inline-flex;
    padding: 0 var(--str-chat__spacing-2_5)
}

.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button {
    background: none;
    border: none;
    cursor: pointer
}

.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button:disabled {
    cursor: default
}

.str-chat__channel-search .str-chat__channel-search-bar .str-chat__channel-search-input--wrapper input {
    flex: 1;
    min-width: 0
}

.str-chat__channel-search .str-chat__channel-search-container-searching,.str-chat__channel-search .str-chat__channel-search-results-header {
    width: 100%;
    padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4)
}

.str-chat__channel-search .str-chat__channel-search-result-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden
}

.str-chat__channel-search .str-chat__channel-search-result-list.inline {
    flex: 1
}

.str-chat__channel-search .str-chat__channel-search-result-list.popup {
    position: absolute;
    left: 0;
    right: 0;
    top: 65px;
    height: 400px;
    z-index: 1
}

.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-container-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4)
}

.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-container-empty svg {
    height: calc(var(--str-chat__spacing-px)*90 + var(--str-chat__spacing-20));
    width: calc(var(--str-chat__spacing-px)*90);
    padding: var(--str-chat__spacing-10) 0
}

.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-result {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    width: 100%;
    column-gap: var(--str-chat__spacing-2);
    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2)
}

.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-result .channel-search__result-text,.str-chat__channel-search .str-chat__channel-search-result-list .str-chat__channel-search-result .str-chat__channel-search-result--display-name {
    overflow-y: hidden
}

.str-chat__cta-button {
    padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-6);
    cursor: pointer
}

.str-chat__circle-fab {
    width: calc(var(--str-chat__spacing-px)*42);
    height: calc(var(--str-chat__spacing-px)*42);
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center
}

.str-chat__circle-fab .str-chat__circle-fab-icon {
    display: inline-block;
    height: calc(var(--str-chat__spacing-px)*24)
}

.str-chat__edit-message-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    row-gap: var(--str-chat__spacing-5);
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    max-height: 100%
}

.str-chat__edit-message-form .str-chat__edit-message-form-options {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.str-chat__edit-message-form .str-chat__edit-message-form-options button {
    cursor: pointer;
    margin: 0
}

.str-chat-angular__edit-message-form .str-chat__message-input-angular-host {
    max-height: 100%;
    min-height: 0;
    display: flex;
    min-width: 0;
    max-width: 100%
}

.str-chat-angular__edit-message-form .str-chat__modal--open .str-chat__modal__inner {
    height: 40%;
    max-height: 80%;
    min-width: 90%;
    max-width: 90%;
    width: 90%;
    flex-basis: min-content
}

@media only screen and (min-device-width: 768px) {
    .str-chat-angular__edit-message-form .str-chat__modal--open .str-chat__modal__inner {
        min-width:40%;
        max-width: 60%;
        width: min-content
    }
}

.str-chat__image-carousel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    height: 100%
}

.str-chat__image-carousel .str-chat__image-carousel-stepper {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 30);
    padding: var(--str-chat__spacing-2_5);
    border: none;
    background: transparent
}

.str-chat__image-carousel .str-chat__image-carousel-image {
    object-fit: contain;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    width: 100%
}

.str-chat__message .str-chat__attachment-list .str-chat__modal--open .str-chat__modal__inner {
    height: 80%;
    width: 80%
}

@media only screen and (max-device-width: 768px) {
    .str-chat__message .str-chat__attachment-list .str-chat__modal--open .str-chat__modal__inner {
        height:100%;
        width: 100%
    }
}

[dir=rtl] .str-chat__image-carousel-stepper svg {
    transform: scaleX(-1)
}

.str-chat {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
    --str-chat-icon-width: auto
}

.str-chat__icon {
    display: flex;
    font-family: stream-chat-icons;
    font-style: normal;
    font-weight: 400;
    font-size: var(--str-chat-icon-height);
    height: var(--str-chat-icon-height);
    width: var(--str-chat-icon-width)
}

.str-chat__icon,.str-chat__icon:before {
    line-height: var(--str-chat-icon-height)
}

.str-chat__icon--unspecified-filetype {
    content: url("")
}

.str-chat__icon--audio-file {
    content: url("")
}

.str-chat__icon--action:before {
    content: ""
}

.str-chat__icon--arrow-down:before {
    content: ""
}

.str-chat__icon--arrow-left:before {
    content: ""
}

.str-chat__icon--arrow-right:before {
    content: ""
}

.str-chat__icon--close:before {
    content: ""
}

.str-chat__icon--arrow-up:before {
    content: ""
}

.str-chat__icon--chat-bubble:before {
    content: ""
}

.str-chat__icon--pause:before {
    content: ""
}

.str-chat__icon--download:before {
    content: ""
}

.str-chat__icon--delivered:before {
    content: ""
}

.str-chat__icon--play:before {
    content: ""
}

.str-chat__icon--reaction:before {
    content: ""
}

.str-chat__icon--error:before {
    content: ""
}

.str-chat__icon--read:before {
    content: ""
}

.str-chat__icon--retry:before {
    content: ""
}

.str-chat__icon--reply-in-thread:before {
    content: ""
}

.str-chat__icon--send:before {
    content: ""
}

.str-chat__icon--attach:before {
    content: ""
}

.str-chat__link-preview-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin-bottom: .75rem;
    padding-inline:.75rem}

.str-chat__link-preview-card {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem
}

.str-chat__link-preview-card .str-chat__tooltip {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    display: block;
    max-width: calc(var(--str-chat__spacing-px)*250);
    padding-inline:.5rem}

.str-chat__link-preview-card .str-chat__link-preview-card__icon-container {
    display: flex;
    align-items: center
}

.str-chat__link-preview-card .str-chat__link-preview-card__content {
    width: 100%;
    min-width: 0;
    flex: 1;
    padding-inline:.5rem}

.str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-description,.str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-title {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis
}

.str-chat__link-preview-card .str-chat__link-preview-card__dismiss-button {
    background: none;
    border: none;
    cursor: pointer
}

.str-chat {
    --str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 15)
}

.str-chat__loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotate 1s linear infinite
}

.str-chat__loading-indicator svg {
    width: var(--str-chat__loading-indicator-size);
    height: var(--str-chat__loading-indicator-size)
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.str-chat {
    --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);
    --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 480);
    --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);
    --str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 250);
    --str-chat__quoted-message-inside-message-input-max-width: calc(var(--str-chat__spacing-px) * 200);
    --str-chat__quoted-message-inside-message-input-max-height: calc(var(--str-chat__quoted-message-inside-message-input-max-width) + calc(var(--str-chat__spacing-px) * 50))
}

.str-chat__message .str-chat__message-bubble {
    max-width: var(--str-chat__message-max-width)
}

.str-chat__message .str-chat__message-options {
    --str-chat-icon-height: calc(var(--str-chat__message-options-button-size) * 0.7)
}

.str-chat__message.str-chat__message--has-attachment {
    --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width)
}

.str-chat__message.str-chat__message--has-attachment .str-chat__message-bubble {
    max-width: var(--str-chat__message-max-width)
}

.str-chat__quoted-message-preview {
    --str-chat__message-max-width: var(--str-chat__quoted-message-max-width)
}

.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
    pointer-events: none;
    max-width: var(--str-chat__message-max-width)
}

.str-chat__message,.str-chat__quoted-message-preview {
    display: grid;
    word-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word
}

.str-chat__message.str-chat__message--other,.str-chat__message.str-chat__quoted-message-preview,.str-chat__quoted-message-preview.str-chat__message--other,.str-chat__quoted-message-preview.str-chat__quoted-message-preview {
    grid-template-areas: "avatar message" ". replies" ". translation-notice" ". custom-metadata" ". metadata";
    column-gap: var(--str-chat__spacing-2);
    grid-template-columns: auto 1fr;
    justify-items: flex-start
}

.str-chat__message.str-chat__message--me,.str-chat__quoted-message-preview.str-chat__message--me {
    grid-template-areas: "message" "replies" "translation-notice" "custom-metadata" "metadata";
    justify-items: end
}

.str-chat__message.str-chat__message--me>.str-chat__message-sender-avatar,.str-chat__quoted-message-preview.str-chat__message--me>.str-chat__message-sender-avatar {
    display: none
}

.str-chat__message.str-chat__message--deleted,.str-chat__quoted-message-preview.str-chat__message--deleted {
    grid-template-areas: "message"
}

.str-chat__message.str-chat__message--system,.str-chat__quoted-message-preview.str-chat__message--system {
    grid-template-areas: "message";
    grid-template-columns: auto
}

.str-chat__message .str-chat__message-sender-avatar,.str-chat__quoted-message-preview .str-chat__message-sender-avatar {
    grid-area: avatar;
    align-self: end
}

.str-chat__message .str-chat__message-inner,.str-chat__quoted-message-preview .str-chat__message-inner {
    grid-area: message;
    display: grid;
    grid-template-areas: "reactions reactions" "message-bubble options";
    grid-template-columns: auto 1fr;
    column-gap: var(--str-chat__spacing-2);
    position: relative
}

.str-chat__message .str-chat__message-inner .str-chat__message-options,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options {
    grid-area: options;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: row-reverse;
    width: calc(3*var(--str-chat__message-options-button-size))
}

.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-reactions-button,.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-reply-in-thread-button,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-reactions-button,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-reply-in-thread-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: var(--str-chat__message-options-button-size);
    height: var(--str-chat__message-options-button-size)
}

.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,.str-chat__message .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-container,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-box-button,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-options .str-chat__message-actions-container {
    position: relative
}

.str-chat__message .str-chat__message-inner .str-chat__message-reactions-host,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-reactions-host {
    grid-area: reactions
}

.str-chat__message .str-chat__message-inner .str-chat__message-bubble,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble {
    grid-area: message-bubble;
    position: relative;
    min-width: 0
}

.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text {
    padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4)
}

.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p {
    margin: 0
}

.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text .str-chat__message-text-inner,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text .str-chat__message-text-inner {
    overflow-y: hidden
}

.str-chat__message .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p,.str-chat__quoted-message-preview .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text p {
    white-space: pre-line
}

.str-chat__message.str-chat__message--me .str-chat__message-inner,.str-chat__quoted-message-preview.str-chat__message--me .str-chat__message-inner {
    grid-template-areas: "reactions reactions" "options message-bubble";
    grid-template-columns: 1fr auto
}

.str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-options,.str-chat__quoted-message-preview.str-chat__message--me .str-chat__message-inner .str-chat__message-options {
    flex-direction: row
}

.str-chat__message .str-chat__translation-notice,.str-chat__quoted-message-preview .str-chat__translation-notice {
    grid-area: translation-notice
}

.str-chat__message .str-chat__translation-notice button,.str-chat__quoted-message-preview .str-chat__translation-notice button {
    cursor: pointer;
    padding: var(--str-chat__spacing-1) 0;
    margin: 0
}

.str-chat__message .str-chat__custom-message-metadata,.str-chat__quoted-message-preview .str-chat__custom-message-metadata {
    grid-area: custom-metadata;
    margin-block-start:var(--str-chat__spacing-0_5)}

.str-chat__message .str-chat__message-metadata,.str-chat__quoted-message-preview .str-chat__message-metadata {
    grid-area: metadata;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--str-chat__spacing-1);
    margin-block-start:var(--str-chat__spacing-0_5)}

.str-chat__message .str-chat__message-metadata .str-chat__message-simple-name,.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-simple-name {
    overflow-y: hidden
}

.str-chat__message .str-chat__message-metadata .str-chat__message-simple-timestamp+.str-chat__mesage-simple-edited:before,.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-simple-timestamp+.str-chat__mesage-simple-edited:before {
    content: "•";
    margin-right: var(--str-chat__spacing-1)
}

.str-chat__message .str-chat__message-metadata .str-chat__message-edited-timestamp,.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-edited-timestamp {
    --str-chat__message-edited-timestamp-height: 1rem;
    flex-basis: 100%
}

.str-chat__message.str-chat__message--me .str-chat__message-metadata,.str-chat__quoted-message-preview.str-chat__message--me .str-chat__message-metadata {
    justify-content: flex-end;
    text-align: right
}

.str-chat__message .str-chat__message-status,.str-chat__quoted-message-preview .str-chat__message-status {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15);
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--str-chat__spacing-0_5);
    position: relative
}

.str-chat__message .str-chat__message-status svg,.str-chat__quoted-message-preview .str-chat__message-status svg {
    width: calc(var(--str-chat__spacing-px)*15);
    height: calc(var(--str-chat__spacing-px)*15)
}

.str-chat__message .str-chat__message-replies-count-button-wrapper,.str-chat__quoted-message-preview .str-chat__message-replies-count-button-wrapper {
    grid-area: replies
}

.str-chat__message .str-chat__message-replies-count-button-wrapper button,.str-chat__quoted-message-preview .str-chat__message-replies-count-button-wrapper button {
    cursor: pointer;
    padding: 0
}

.str-chat__message .str-chat__message--deleted-inner,.str-chat__quoted-message-preview .str-chat__message--deleted-inner {
    padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4)
}

.str-chat__message .str-chat__message--deleted-inner p,.str-chat__quoted-message-preview .str-chat__message--deleted-inner p {
    margin: 0
}

.str-chat__message .str-chat__quoted-message-bubble,.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
    padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
    display: flex;
    column-gap: var(--str-chat__spacing-1);
    min-width: 0;
    width: 100%
}

.str-chat__message .str-chat__quoted-message-bubble p,.str-chat__quoted-message-preview .str-chat__quoted-message-bubble p {
    margin: 0
}

.str-chat__message .str-chat__emoji-display-fix,.str-chat__quoted-message-preview .str-chat__emoji-display-fix {
    display: inline-block;
    width: 1.25em
}

.str-chat__message .str-chat__message-error-icon,.str-chat__quoted-message-preview .str-chat__message-error-icon {
    display: none
}

.str-chat__message .str-chat__simple-message--error-failed,.str-chat__quoted-message-preview .str-chat__simple-message--error-failed {
    cursor: pointer
}

.str-chat__message.str-chat__message--error .str-chat__message-error-icon,.str-chat__message.str-chat__message--failed .str-chat__message-error-icon,.str-chat__quoted-message-preview.str-chat__message--error .str-chat__message-error-icon,.str-chat__quoted-message-preview.str-chat__message--failed .str-chat__message-error-icon {
    display: block;
    position: absolute;
    bottom: 0;
    inset-inline-end: calc(-1*(calc(var(--str-chat__spacing-px) * 18) / 2))
}

.str-chat__message.str-chat__message--error .str-chat__message-error-icon svg,.str-chat__message.str-chat__message--failed .str-chat__message-error-icon svg,.str-chat__quoted-message-preview.str-chat__message--error .str-chat__message-error-icon svg,.str-chat__quoted-message-preview.str-chat__message--failed .str-chat__message-error-icon svg {
    width: calc(var(--str-chat__spacing-px)*18);
    height: calc(var(--str-chat__spacing-px)*18)
}

.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within,.str-chat__modal--open)) .str-chat__message-options,.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover,.str-chat__modal--open)) .str-chat__message-options,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within,.str-chat__modal--open)) .str-chat__message-options,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover,.str-chat__modal--open)) .str-chat__message-options {
    display: flex
}

.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within,.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover,.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within,.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover,.str-chat__modal--open)) .str-chat__message--other .str-chat__message-inner {
    margin-inline-end:0}

.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within,.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover,.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within,.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover,.str-chat__modal--open)) .str-chat__message--me .str-chat__message-inner {
    margin-inline-start:0}

@supports not selector(:has(a,b)) {
    .str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message-options,.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message-options,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message-options,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message-options {
        display: flex
    }

    .str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message--other .str-chat__message-inner,.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message--other .str-chat__message-inner,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--other .str-chat__message-inner {
        margin-inline-end:0}

    .str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message--me .str-chat__message-inner,.str-chat__ul:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:focus-within .str-chat__message--me .str-chat__message-inner,.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) .str-chat__li:hover .str-chat__message--me .str-chat__message-inner {
        margin-inline-start:0}
}

.str-chat__ul.str-chat__message-options-in-bubble .str-chat__message-inner:hover .str-chat__message-options,.str-chat__virtual-list.str-chat__message-options-in-bubble .str-chat__message-inner:hover .str-chat__message-options {
    display: flex
}

.str-chat__ul.str-chat__message-options-in-bubble .str-chat__message--other .str-chat__message-inner:hover,.str-chat__virtual-list.str-chat__message-options-in-bubble .str-chat__message--other .str-chat__message-inner:hover {
    margin-inline-end:0}

.str-chat__ul.str-chat__message-options-in-bubble .str-chat__message--me .str-chat__message-inner:hover,.str-chat__virtual-list.str-chat__message-options-in-bubble .str-chat__message--me .str-chat__message-inner:hover {
    margin-inline-start:0}

.str-chat__message-inner .str-chat__message-options {
    display: none
}

.str-chat__message-inner .str-chat__message-actions-open.str-chat__message-options {
    display: flex
}

.str-chat__message--other .str-chat__message-inner {
    margin-inline-end:calc(var(--str-chat__message-options-button-size)*3)}

.str-chat__message--me .str-chat__message-inner {
    margin-inline-start: calc(var(--str-chat__message-options-button-size)*3)
}

.str-chat__li--middle .str-chat__message,.str-chat__li--top .str-chat__message {
    margin-block-end:var(--str-chat__spacing-0_5)}

.str-chat__li--middle .str-chat__message .str-chat__message-metadata,.str-chat__li--top .str-chat__message .str-chat__message-metadata {
    display: none
}

.str-chat__li--middle .str-chat__message>.str-chat__message-sender-avatar,.str-chat__li--top .str-chat__message>.str-chat__message-sender-avatar {
    visibility: hidden
}

.str-chat__li--bottom .str-chat__message,.str-chat__li--single .str-chat__message {
    margin-block-end:var(--str-chat__spacing-2)}

.str-chat__date-separator {
    display: flex;
    padding: var(--str-chat__spacing-8);
    align-items: center
}

.str-chat__date-separator-line {
    flex: 1;
    height: var(--str-chat__spacing-px)
}

.str-chat__date-separator>:not(:last-child) {
    margin-right: var(--str-chat__spacing-4)
}

.str-chat__message .str-chat__quoted-message-preview {
    margin-block-end:var(--str-chat__spacing-2)}

.str-chat__message--system {
    width: 100%;
    text-align: center
}

.str-chat__message--system p {
    margin: 0
}

.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
    flex-direction: column;
    align-items: stretch;
    row-gap: var(--str-chat__spacing-1);
    flex-basis: min-content
}

.str-chat__message-input .str-chat__quoted-message-preview {
    --str-chat__message-max-width: var(--str-chat__quoted-message-inside-message-input-max-width)
}

.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
    max-height: var(--str-chat__quoted-message-inside-message-input-max-height)
}

.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble .str-chat__quoted-message-text {
    max-height: 100%;
    min-height: 0
}

.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble .str-chat__quoted-message-text p {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

.str-chat__unread-messages-separator-wrapper {
    padding-block:.5rem}

.str-chat__unread-messages-separator-wrapper .str-chat__unread-messages-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .5rem
}

.str-chat__unread-messages-notification {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
    position: absolute;
    top: .75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    overflow: clip
}

.str-chat__unread-messages-notification button {
    padding-block:.5rem;height: 100%;
    width: 100%;
    white-space: nowrap
}

.str-chat__unread-messages-notification button:first-of-type {
    padding-inline:.75rem .375rem}

.str-chat__unread-messages-notification button:last-of-type {
    padding-inline:.375rem .75rem}

.str-chat__unread-messages-notification button:last-of-type svg {
    width: .875rem
}

.str-chat-angular__message-bubble {
    transform: translateZ(0)
}

.str-chat-angular__message-bubble.str-chat-angular__message-bubble--attachment-modal-open {
    transform: none
}

.str-chat__message-edited-timestamp {
    overflow: hidden;
    transition: height .1s
}

.str-chat__message-edited-timestamp--open {
    height: var(--str-chat__message-edited-timestamp-height,1rem)
}

.str-chat__message-edited-timestamp--collapsed {
    height: 0
}

.str-chat__message-text--pointer-cursor {
    cursor: pointer
}

.str-chat__message-actions-box {
    overflow: hidden
}

.str-chat__message-actions-box .str-chat__message-actions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 10rem
}

.str-chat__message-actions-box .str-chat__message-actions-list .str-chat__message-actions-list-item-button {
    padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
    margin: 0;
    cursor: pointer;
    width: 100%;
    text-align: start
}

.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) {
    display: none;
    z-index: 1
}

.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular).str-chat__message-actions-box--open {
    display: block
}

.str-chat__message-bounce-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--str-chat__spacing-9)
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-actions {
    display: flex;
    flex-direction: column;
    gap: var(--str-chat__spacing-2)
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-delete,.str-chat__message-bounce-prompt .str-chat__message-bounce-edit,.str-chat__message-bounce-prompt .str-chat__message-bounce-send {
    cursor: pointer;
    padding: var(--str-chat__spacing-2)
}

.str-chat__message-input {
    flex-direction: column;
    padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
    position: relative
}

.str-chat__message-input,.str-chat__message-input .str-chat__quoted-message-preview-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-reply-to-message {
    width: 100%;
    text-align: center
}

.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-remove {
    width: calc(var(--str-chat__spacing-px)*40);
    height: calc(var(--str-chat__spacing-px)*40);
    cursor: pointer
}

.str-chat__message-input .str-chat__dropzone-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 5
}

.str-chat__message-input .str-chat__dropzone-container p {
    margin: unset
}

.str-chat__message-input .str-chat__message-input-inner {
    flex-grow: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--str-chat__spacing-px)*45);
    height: calc(var(--str-chat__spacing-px)*45);
    cursor: pointer
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container .str-chat__file-input {
    display: none
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container .str-chat__file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-height: 100%
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker {
    width: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    padding: var(--str-chat__spacing-2) var(--str-chat__spacing-4);
    column-gap: var(--str-chat__spacing-2)
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea {
    width: 100%;
    display: flex;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--str-chat__spacing-px)*27);
    height: calc(var(--str-chat__spacing-px)*27);
    font-size: calc(var(--str-chat__spacing-px)*27);
    align-self: end
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__message-textarea-emoji-picker-container {
    z-index: 5
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__message-textarea-emoji-picker-container .str-chat__emoji-picker-container {
    display: flex
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__emoji-picker-button {
    padding: unset;
    background: unset;
    border: unset;
    border-radius: var(--str-chat__border-radius-circle);
    display: flex;
    cursor: pointer
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__emoji-picker-button svg {
    width: calc(var(--str-chat__spacing-px)*24);
    height: calc(var(--str-chat__spacing-px)*24)
}

.str-chat__message-input .str-chat__message-input-inner .str-chat__message-textarea-container .str-chat__message-textarea-with-emoji-picker .str-chat__message-textarea-emoji-picker .str-chat__emoji-picker-button svg path {
    fill: var(--str-chat__message-input-tools-color)
}

.str-chat__message-input .str-chat__message-textarea-angular-host,.str-chat__message-input .str-chat__message-textarea-react-host {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.str-chat__message-input .str-chat__message-textarea-react-host {
    position: relative
}

.str-chat__message-input .str-chat__send-button {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 32);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    width: calc(var(--str-chat__spacing-px)*45);
    height: calc(var(--str-chat__spacing-px)*45);
    min-width: calc(var(--str-chat__spacing-px)*45)
}

.str-chat__message-input .str-chat__send-button svg {
    width: calc(var(--str-chat__spacing-px)*32);
    height: calc(var(--str-chat__spacing-px)*32)
}

.str-chat__message-input .str-chat__start-recording-audio-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    width: calc(var(--str-chat__spacing-px)*40);
    height: calc(var(--str-chat__spacing-px)*40);
    min-width: calc(var(--str-chat__spacing-px)*40)
}

.str-chat__message-input .str-chat__start-recording-audio-button svg {
    height: calc(var(--str-chat__spacing-px)*25)
}

.str-chat__message-input .str-chat__message-input-cooldown {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start:var(--str-chat__spacing-2);margin-block: calc(var(--str-chat__spacing-2)/2);
    min-width: calc(calc(var(--str-chat__spacing-px) * 45) - var(--str-chat__spacing-2));
    min-height: calc(calc(var(--str-chat__spacing-px) * 45) - var(--str-chat__spacing-2))
}

.str-chat__message-input .str-chat__message-input-not-allowed {
    align-self: center;
    padding: var(--str-chat__spacing-3)
}

.str-chat__message-input .str-chat__quoted-message-preview {
    padding: var(--str-chat__spacing-2)
}

.str-chat__message-input .str-chat__recording-permission-denied-notification {
    position: absolute;
    left: .5rem;
    max-width: 100%;
    bottom: 100%;
    padding: 1rem;
    margin-inline:.5rem;z-index: 2
}

.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__dismiss-button-container {
    display: flex;
    justify-content: flex-end
}

.str-chat__message-input-angular-host {
    max-height: 50%
}

.str-chat-angular__message-input {
    height: 100%;
    max-height: 100%
}

.str-chat-angular__message-input-inner {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    flex-grow: 0
}

[dir=rtl] .str-chat__send-button svg,[dir=rtl] .str-chat__start-recording-audio-button svg {
    transform: scaleX(-1)
}

.str-chat__main-panel-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    align-items: center
}

.str-chat__list {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    width: 100%;
    height: 100%;
    max-height: 100%
}

.str-chat__list .str-chat__message-list-scroll {
    padding: 0 var(--str-chat__spacing-2)
}

.str-chat__list .str-chat__message-list-scroll .str-chat__li {
    margin-inline:calc(-1 * var(--str-chat__spacing-2));padding-inline: var(--str-chat__spacing-2)
}

.str-chat__list .str-chat__message-list-scroll .str-chat__parent-message-li {
    margin-inline:calc(-1 * var(--str-chat__spacing-2))}

@media only screen and (min-device-width: 768px) {
    .str-chat__list .str-chat__message-list-scroll {
        padding:0 min(var(--str-chat__spacing-10),4%)
    }

    .str-chat__list .str-chat__message-list-scroll .str-chat__li {
        margin-inline:calc(-1 * min(var(--str-chat__spacing-10), 4%));padding-inline: min(var(--str-chat__spacing-10),4%)
    }

    .str-chat__list .str-chat__message-list-scroll .str-chat__parent-message-li {
        margin-inline:calc(-1 * min(var(--str-chat__spacing-10), 4%) - 2px)}
}

.str-chat__list .str-chat__message-list-scroll .str-chat__ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.str-chat__list .str-chat__parent-message-li {
    padding-block-end:var(--str-chat__spacing-4);margin-block-end: var(--str-chat__spacing-4)
}

.str-chat__list .str-chat__parent-message-li .str-chat__thread-start {
    text-align: start;
    padding-top: var(--str-chat__spacing-3)
}

.str-chat__jump-to-latest-message {
    position: absolute;
    inset-block-end: var(--str-chat__spacing-4);
    inset-inline-end: var(--str-chat__spacing-2);
    z-index: 2
}

.str-chat__jump-to-latest-message .str-chat__jump-to-latest-unread-count {
    position: absolute;
    padding: var(--str-chat__spacing-0_5) var(--str-chat__spacing-2);
    left: 50%;
    transform: translateX(-50%) translateY(-100%)
}

.str-chat__thread .str-chat__main-panel-inner {
    height: auto
}

.str-chat__main-panel .str-chat__ul .str-chat__li:first-of-type {
    padding-top: 4.5rem
}

.str-chat__main-panel .str-chat__ul .str-chat__date-separator+.str-chat__li:first-of-type {
    padding-top: inherit
}

.str-chat__virtual-list {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    width: 100%;
    height: 100%
}

.str-chat__virtual-list .str-chat__message-list-scroll {
    overscroll-behavior: none
}

.str-chat__virtual-list .str-chat__message-list-scroll>div {
    padding: 0 var(--str-chat__spacing-2)
}

.str-chat__virtual-list .str-chat__message-list-scroll>div .str-chat__li {
    margin-inline:calc(-1 * var(--str-chat__spacing-2));padding-inline: var(--str-chat__spacing-2)
}

.str-chat__virtual-list .str-chat__message-list-scroll>div .str-chat__parent-message-li {
    margin-inline:calc(-1 * var(--str-chat__spacing-2))}

@media only screen and (min-device-width: 768px) {
    .str-chat__virtual-list .str-chat__message-list-scroll>div {
        padding:0 min(var(--str-chat__spacing-10),4%)
    }

    .str-chat__virtual-list .str-chat__message-list-scroll>div .str-chat__li {
        margin-inline:calc(-1 * min(var(--str-chat__spacing-10), 4%));padding-inline: min(var(--str-chat__spacing-10),4%)
    }

    .str-chat__virtual-list .str-chat__message-list-scroll>div .str-chat__parent-message-li {
        margin-inline:calc(-1 * min(var(--str-chat__spacing-10), 4%) - 2px)}
}

.str-chat__virtual-list .str-chat__parent-message-li {
    padding-block-end: var(--str-chat__spacing-4)
}

.str-chat__virtual-list .str-chat__parent-message-li .str-chat__thread-start {
    text-align: start;
    padding-top: var(--str-chat__spacing-3)
}

.str-chat__virtual-list__loading {
    display: flex;
    padding-top: var(--str-chat__spacing-2);
    justify-content: center;
    width: 100%;
    position: absolute
}

.str-chat__virtual-list p {
    margin: 0!important
}

.str-chat__virtual-list p a {
    white-space: pre-line;
    overflow: hidden;
    word-wrap: break-word
}

.str-chat__virtual-list .str-chat__message {
    margin-block-end:0!important}

.str-chat__virtual-list .str-chat__virtual-list-message-wrapper {
    padding-block-end:var(--str-chat__spacing-0_5)}

.str-chat__thread--virtualized .str-chat__main-panel-inner {
    height: 100%
}

.str-chat__thread--virtualized .str-chat__main-panel-inner .str-chat__virtual-list-message-wrapper:first-of-type {
    padding-block-start:var(--str-chat__spacing-4)}

.str-chat__message-reactions-container {
    display: flex
}

.str-chat__message-reactions-container .str-chat__message-reactions {
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
    display: flex;
    margin-block-start:var(--str-chat__spacing-0_5);margin-block-end: var(--str-chat__spacing-0_5);
    column-gap: var(--str-chat__spacing-0_5);
    width: fit-content;
    padding: 0;
    position: relative
}

.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--str-chat__spacing-1_5);
    position: relative;
    cursor: pointer;
    flex-shrink: 0
}

.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction button {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction .str-chat__message-reaction-emoji {
    height: calc(var(--str-chat__spacing-px)*13);
    display: flex!important;
    align-items: center;
    justify-content: center
}

.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__reaction-list--counter,.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__simple-reactions-list-item--last-number {
    display: none
}

.str-chat__message--me .str-chat__message-reactions-container {
    justify-content: flex-end
}

.str-chat__message--other .str-chat__message-reactions-container {
    justify-content: flex-start
}

.str-chat__message-reactions-details-modal .str-chat__modal--open .str-chat__modal__inner {
    height: 40%;
    max-height: 80%;
    min-width: 90%;
    max-width: 90%;
    width: 90%;
    flex-basis: min-content
}

@media only screen and (min-device-width: 768px) {
    .str-chat__message-reactions-details-modal .str-chat__modal--open .str-chat__modal__inner {
        min-width:40%;
        max-width: 60%;
        width: min-content
    }
}

.str-chat__message-reactions-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--str-chat__spacing-4);
    max-height: 100%;
    height: 100%;
    min-height: 0
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reaction-types {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    gap: var(--str-chat__spacing-4);
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reaction-types .str-chat__message-reactions-details-reaction-type {
    display: flex;
    align-items: center;
    padding: var(--str-chat__spacing-1) 0;
    flex-shrink: 0;
    cursor: pointer
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reaction-types .str-chat__message-reactions-details-reaction-type .str-chat__message-reaction-emoji--with-fallback {
    width: 18px;
    line-height: 18px
}

.str-chat__message-reactions-details .str-chat__message-reaction-emoji-big {
    --str-chat__stream-emoji-size: 1em;
    align-self: center;
    font-size: 2rem
}

.str-chat__message-reactions-details .str-chat__message-reaction-emoji-big.str-chat__message-reaction-emoji--with-fallback {
    line-height: 2rem
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reacting-users {
    display: flex;
    flex-direction: column;
    gap: var(--str-chat__spacing-3);
    max-height: 100%;
    overflow-y: auto;
    min-height: 30vh
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reacting-users .str-chat__loading-indicator {
    margin: auto
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reacting-users .str-chat__message-reactions-details-reacting-user {
    display: flex;
    align-items: center;
    gap: var(--str-chat__spacing-2)
}

.str-chat__message-reaction-selector {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    inset-block-end: 100%
}

.str-chat__message-reaction-selector .str-chat__message-reactions-options {
    list-style: none;
    display: flex;
    margin-block-end:var(--str-chat__spacing-0_5);width: fit-content;
    column-gap: var(--str-chat__spacing-1);
    padding: var(--str-chat__spacing-2)
}

.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: calc(var(--str-chat__spacing-px)*40);
    height: calc(var(--str-chat__spacing-px)*40)
}

.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option .str-chat__message-reaction-emoji {
    height: calc(var(--str-chat__spacing-px)*20);
    display: flex!important;
    align-items: center;
    justify-content: center
}

.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-last-user,.str-chat__message-reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-list-item__count {
    display: none
}

.str-chat__message--me .str-chat__message-reaction-selector {
    inset-inline-end: 0
}

.str-chat__message--other .str-chat__message-reaction-selector {
    inset-inline-start: 0
}

.str-chat__modal--open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 100
}

.str-chat__modal--open button.str-chat__modal__close-button {
    padding: unset;
    background: unset;
    border: unset;
    border-radius: var(--str-chat__border-radius-circle);
    margin: var(--str-chat__spacing-2);
    cursor: pointer
}

.str-chat__modal--open .str-chat__modal__close-button {
    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 28);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-2);
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    cursor: pointer
}

.str-chat__modal--open .str-chat__modal__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4);
    width: 40%;
    min-width: 0;
    min-height: 0
}

.str-chat__modal--close {
    display: none
}

.str-chat__message-notification {
    display: block;
    position: absolute;
    align-self: center;
    padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
    bottom: calc(var(--str-chat__spacing-px)*10);
    z-index: 101
}

.str-chat__list-notifications {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    row-gap: var(--str-chat__spacing-1);
    margin: var(--str-chat__spacing-1_5);
    width: auto
}

.str-chat__notification {
    padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-4)
}

.str-chat-react__notification {
    z-index: 101
}

.str-chat__thread-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%
}

.str-chat__thread-container .str-chat__thread-header {
    display: flex;
    padding: var(--str-chat__spacing-2);
    column-gap: var(--str-chat__spacing-4);
    align-items: center
}

.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: hidden;
    flex: 1;
    row-gap: var(--str-chat__spacing-1_5)
}

.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-channel-name,.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-name,.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-reply-count,.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-subtitle,.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-title {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis
}

.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-details .str-chat__thread-header-subtitle {
    overflow-y: hidden
}

.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: calc(var(--str-chat__spacing-px)*40);
    height: calc(var(--str-chat__spacing-px)*40);
    cursor: pointer;
    line-height: calc(var(--str-chat__spacing-px)*21);
    font-size: calc(var(--str-chat__spacing-px)*21)
}

.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button svg {
    height: calc(var(--str-chat__spacing-px)*21);
    width: calc(var(--str-chat__spacing-px)*21)
}

.str-chat__thread-container .str-chat__thread-list {
    height: auto
}

.str-chat__main-panel--hideOnThread+.str-chat__thread-container {
    flex: 1
}

.str-chat__parent-message-li,.str-chat__tooltip {
    padding: var(--str-chat__spacing-2)
}

.str-chat__tooltip {
    overflow-y: hidden;
    display: flex;
    z-index: 1;
    max-width: calc(var(--str-chat__spacing-px)*150);
    width: max-content
}

.str-chat__typing-indicator-react-host {
    position: static!important
}

.str-chat__virtual-list .str-chat__typing-indicator {
    position: static
}

.str-chat__typing-indicator {
    padding: var(--str-chat__spacing-1_5);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: var(--str-chat__spacing-1);
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0
}

.str-chat__typing-indicator .str-chat__typing-indicator__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--str-chat__spacing-0_5)
}

.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot {
    width: calc(var(--str-chat__spacing-px)*4);
    height: calc(var(--str-chat__spacing-px)*4)
}

.str-chat {
    --str-chat__blue950: #001333;
    --str-chat__blue900: #00163d;
    --str-chat__blue800: #002666;
    --str-chat__blue700: #003999;
    --str-chat__blue600: #004ccc;
    --str-chat__blue500: #005fff;
    --str-chat__blue400: #337eff;
    --str-chat__blue300: #669fff;
    --str-chat__blue200: #ccdfff;
    --str-chat__blue100: #e0f0ff;
    --str-chat__blue50: #ebf5ff;
    --str-chat__grey950: #080707;
    --str-chat__grey900: #17191c;
    --str-chat__grey800: #1c1e22;
    --str-chat__grey700: #272a30;
    --str-chat__grey600: #4c525c;
    --str-chat__grey500: #72767e;
    --str-chat__grey400: #b4b7bb;
    --str-chat__grey300: #dbdde1;
    --str-chat__grey200: #e9eaed;
    --str-chat__grey100: #f4f4f5;
    --str-chat__grey50: #fff;
    --str-chat__red900: #330003;
    --str-chat__red800: #660006;
    --str-chat__red700: #990008;
    --str-chat__red600: #cc000b;
    --str-chat__red500: #ff000e;
    --str-chat__red400: #ff3742;
    --str-chat__red300: #ff666e;
    --str-chat__red200: #ff999f;
    --str-chat__red100: #ffe5e7;
    --str-chat__green900: #062d16;
    --str-chat__green800: #0d592c;
    --str-chat__green700: #138643;
    --str-chat__green600: #19b359;
    --str-chat__green500: #20e070;
    --str-chat__green400: #4ce68c;
    --str-chat__green300: #79eca9;
    --str-chat__green200: #a6f2c6;
    --str-chat__green100: #e9f1ff;
    --str-chat__yellow900: #332500;
    --str-chat__yellow800: #664900;
    --str-chat__yellow700: #996e00;
    --str-chat__yellow600: #cc9200;
    --str-chat__yellow500: #ffb700;
    --str-chat__yellow400: #ffd466;
    --str-chat__yellow300: #ffe299;
    --str-chat__yellow200: #fff1cc;
    --str-chat__yellow100: #fff8e5;
    --str-chat__border-radius-xs: 8px;
    --str-chat__border-radius-sm: 14px;
    --str-chat__border-radius-md: 18px;
    --str-chat__border-radius-lg: 20px;
    --str-chat__border-radius-circle: 999px;
    --str-chat__font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    --str-chat__caption-text: 0.75rem/1.3 var(--str-chat__font-family);
    --str-chat__caption-medium-text: 500 0.75rem/1.3 var(--str-chat__font-family);
    --str-chat__caption-strong-text: 700 0.75rem/1.3 var(--str-chat__font-family);
    --str-chat__body-text: 0.875rem/1.2 var(--str-chat__font-family);
    --str-chat__body-medium-text: 500 0.875rem/1.2 var(--str-chat__font-family);
    --str-chat__body2-text: 0.9375rem/1.2 var(--str-chat__font-family);
    --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family);
    --str-chat__subtitle-text: 1rem/1.1.25 var(--str-chat__font-family);
    --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family);
    --str-chat__subtitle2-text: 1.25rem/1.2 var(--str-chat__font-family);
    --str-chat__subtitle2-medium-text: 500 1.25rem/1.2 var(--str-chat__font-family);
    --str-chat__headline-text: 1.5rem/1.2 var(--str-chat__font-family);
    --str-chat__headline2-text: 1.8rem/1.2 var(--str-chat__font-family)
}

.str-chat,.str-chat__theme-light {
    --str-chat__primary-color: var(--str-chat__blue500);
    --str-chat__primary-overlay-color: rgba(0,95,255,.6);
    --str-chat__primary-color-low-emphasis: var(--str-chat__blue300);
    --str-chat__active-primary-color: var(--str-chat__blue600);
    --str-chat__on-primary-color: var(--str-chat__grey50);
    --str-chat__background-color: var(--str-chat__grey50);
    --str-chat__secondary-background-color: var(--str-chat__grey50);
    --str-chat__primary-surface-color: var(--str-chat__blue100);
    --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue50);
    --str-chat__surface-color: var(--str-chat__grey300);
    --str-chat__secondary-surface-color: var(--str-chat__grey200);
    --str-chat__tertiary-surface-color: var(--str-chat__grey100);
    --str-chat__text-color: var(--str-chat__grey950);
    --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
    --str-chat__disabled-color: var(--str-chat__grey400);
    --str-chat__on-disabled-color: var(--str-chat__grey50);
    --str-chat__danger-color: var(--str-chat__red400);
    --str-chat__message-highlight-color: var(--str-chat__yellow100);
    --str-chat__unread-badge-color: var(--str-chat__red400);
    --str-chat__on-unread-badge-color: var(--str-chat__grey50);
    --str-chat__overlay-color: hsla(0,0%,99%,.9);
    --str-chat__secondary-overlay-color: rgba(0,0,0,.2);
    --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
    --str-chat__opaque-surface-background-color: rgba(0,0,0,.8);
    --str-chat__opaque-surface-text-color: var(--str-chat__grey50);
    --str-chat__box-shadow-color: rgba(0,0,0,.18);
    --str-chat__info-color: var(--str-chat__green500)
}

.str-chat__theme-dark {
    --str-chat__primary-color: var(--str-chat__blue400);
    --str-chat__primary-overlay-color: rgba(51,126,255,.6);
    --str-chat__primary-color-low-emphasis: var(--str-chat__blue700);
    --str-chat__active-primary-color: var(--str-chat__blue600);
    --str-chat__on-primary-color: var(--str-chat__grey50);
    --str-chat__background-color: var(--str-chat__grey950);
    --str-chat__secondary-background-color: var(--str-chat__grey900);
    --str-chat__primary-surface-color: var(--str-chat__blue900);
    --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue950);
    --str-chat__surface-color: var(--str-chat__grey700);
    --str-chat__secondary-surface-color: var(--str-chat__grey800);
    --str-chat__tertiary-surface-color: var(--str-chat__grey900);
    --str-chat__text-color: var(--str-chat__grey50);
    --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
    --str-chat__disabled-color: var(--str-chat__grey600);
    --str-chat__on-disabled-color: var(--str-chat__grey50);
    --str-chat__danger-color: var(--str-chat__red600);
    --str-chat__message-highlight-color: var(--str-chat__yellow900);
    --str-chat__unread-badge-color: var(--str-chat__red400);
    --str-chat__on-unread-badge-color: var(--str-chat__grey50);
    --str-chat__overlay-color: rgba(0,0,0,.7);
    --str-chat__secondary-overlay-color: rgba(0,0,0,.4);
    --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
    --str-chat__opaque-surface-background-color: hsla(0,0%,98%,.85);
    --str-chat__opaque-surface-text-color: var(--str-chat__grey900);
    --str-chat__box-shadow-color: rgba(0,0,0,.8);
    --str-chat__info-color: var(--str-chat__green500)
}

.image-gallery-icon {
    color: #fff;
    transition: all .3s ease-out;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
    position: absolute;
    z-index: 4;
    filter: drop-shadow(0 2px 2px #1a1a1a)
}

@media(hover: hover)and (pointer:fine) {
    .image-gallery-icon:hover {
        color:#337ab7
    }

    .image-gallery-icon:hover .image-gallery-svg {
        transform: scale(1.1)
    }
}

.image-gallery-icon:focus {
    outline: 2px solid #337ab7
}

.image-gallery-using-mouse .image-gallery-icon:focus {
    outline: none
}

.image-gallery-fullscreen-button {
    bottom: 0;
    padding: 20px
}

.image-gallery-fullscreen-button .image-gallery-svg {
    height: 28px;
    width: 28px
}

@media(max-width: 768px) {
    .image-gallery-fullscreen-button {
        padding:15px
    }

    .image-gallery-fullscreen-button .image-gallery-svg {
        height: 24px;
        width: 24px
    }
}

@media(max-width: 480px) {
    .image-gallery-fullscreen-button {
        padding:10px
    }

    .image-gallery-fullscreen-button .image-gallery-svg {
        height: 16px;
        width: 16px
    }
}

.image-gallery-fullscreen-button {
    right: 0
}

.image-gallery-left-nav,.image-gallery-right-nav {
    padding: 50px 10px;
    top: 50%;
    transform: translateY(-50%)
}

.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg {
    height: 120px;
    width: 60px
}

@media(max-width: 768px) {
    .image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg {
        height:72px;
        width: 36px
    }
}

@media(max-width: 480px) {
    .image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg {
        height:48px;
        width: 24px
    }
}

.image-gallery-left-nav[disabled],.image-gallery-right-nav[disabled] {
    cursor: disabled;
    opacity: .6;
    pointer-events: none
}

.image-gallery-left-nav {
    left: 0
}

.image-gallery-right-nav {
    right: 0
}

.image-gallery {
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.image-gallery.fullscreen-modal {
    background: #000;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 5
}

.image-gallery.fullscreen-modal .image-gallery-content {
    top: 50%;
    transform: translateY(-50%)
}

.image-gallery-content {
    position: relative;
    line-height: 0;
    top: 0
}

.image-gallery-content .image-gallery-slide {
    background-color: var(--str-chat__secondary-surface-color)
}

.image-gallery-content .image-gallery-slide .str-chat__base-image--load-failed {
    height: var(--str-chat__attachment-max-width);
    width: var(--str-chat__attachment-max-width);
    font-size: 0
}

.image-gallery-content .image-gallery-slide .str-chat__message-attachment-file--item-download {
    position: absolute;
    left: .375rem;
    top: .375rem
}

.image-gallery-content.fullscreen {
    background: #000
}

.image-gallery-content.fullscreen .image-gallery-slide .image-gallery-image {
    max-width: 100%
}

.image-gallery-content .image-gallery-slide .image-gallery-image {
    max-height: calc(100vh - 80px);
    max-width: unset;
    object-fit: contain
}

.image-gallery-content.image-gallery-thumbnails-left .image-gallery-slide .image-gallery-image,.image-gallery-content.image-gallery-thumbnails-right .image-gallery-slide .image-gallery-image,.image-gallery-content.left .image-gallery-slide .image-gallery-image,.image-gallery-content.right .image-gallery-slide .image-gallery-image {
    max-height: 100vh
}

.image-gallery-slide-wrapper {
    position: relative
}

.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right,.image-gallery-slide-wrapper.left,.image-gallery-slide-wrapper.right {
    display: inline-block;
    width: calc(100% - 110px)
}

@media(max-width: 768px) {
    .image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right,.image-gallery-slide-wrapper.left,.image-gallery-slide-wrapper.right {
        width:calc(100% - 87px)
    }
}

.image-gallery-slide-wrapper.image-gallery-rtl {
    direction: rtl
}

.image-gallery-slides {
    line-height: 0;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    text-align: center
}

.image-gallery-slide {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.image-gallery-slide.center,.image-gallery-slide.image-gallery-center {
    position: relative
}

.image-gallery-slide .image-gallery-image {
    width: 100%;
    object-fit: contain
}

.image-gallery-index {
    background: rgba(0,0,0,.4);
    color: #fff;
    line-height: 1;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4
}

@media(max-width: 768px) {
    .image-gallery-index {
        font-size:.8em;
        padding: 5px 10px
    }
}

.str-chat {
    --str-chat__cta-button-border-radius: var(--str-chat__border-radius-xs);
    --str-chat__cta-button-color: var(--str-chat__on-primary-color);
    --str-chat__cta-button-background-color: var(--str-chat__primary-color);
    --str-chat__cta-button-border-block-start: none;
    --str-chat__cta-button-border-block-end: none;
    --str-chat__cta-button-border-inline-start: none;
    --str-chat__cta-button-border-inline-end: none;
    --str-chat__cta-button-box-shadow: none;
    --str-chat__cta-button-pressed-background-color: var(--str-chat__active-primary-color);
    --str-chat__cta-button-disabled-background-color: var(--str-chat__disabled-color);
    --str-chat__cta-button-disabled-color: var(--str-chat__on-disabled-color)
}

.str-chat__cta-button {
    background: var(--str-chat__cta-button-background-color);
    color: var(--str-chat__cta-button-color);
    box-shadow: var(--str-chat__cta-button-box-shadow);
    border-radius: var(--str-chat__cta-button-border-radius);
    border-block-start:var(--str-chat__cta-button-border-block-start);border-block-end: var(--str-chat__cta-button-border-block-end);
    border-inline-start:var(--str-chat__cta-button-border-inline-start);border-inline-end: var(--str-chat__cta-button-border-inline-end);
    font: var(--str-chat__subtitle-text)
}

.str-chat__cta-button:active {
    background-color: var(--str-chat__cta-button-pressed-background-color)
}

.str-chat__cta-button:disabled {
    background-color: var(--str-chat__cta-button-disabled-background-color);
    color: var(--str-chat__cta-button-disabled-color)
}

.str-chat {
    --str-chat__circle-fab-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__circle-fab-color: var(--str-chat__primary-color);
    --str-chat__circle-fab-background-color: var(--str-chat__secondary-background-color);
    --str-chat__circle-fab-pressed-background-color: var(--str-chat__surface-color);
    --str-chat__circle-fab-box-shadow: 0 2px 4px rgba(0,0,0,.25);
    --str-chat__circle-fab-border-block-start: none;
    --str-chat__circle-fab-border-block-end: none;
    --str-chat__circle-fab-border-inline-start: none;
    --str-chat__circle-fab-border-inline-end: none
}

.str-chat__circle-fab {
    background: var(--str-chat__circle-fab-background-color);
    color: var(--str-chat__circle-fab-color);
    box-shadow: var(--str-chat__circle-fab-box-shadow);
    border-radius: var(--str-chat__circle-fab-border-radius);
    border-block-start:var(--str-chat__circle-fab-border-block-start);border-block-end: var(--str-chat__circle-fab-border-block-end);
    border-inline-start:var(--str-chat__circle-fab-border-inline-start);border-inline-end: var(--str-chat__circle-fab-border-inline-end)
}

.str-chat__circle-fab svg path {
    fill: var(--str-chat__circle-fab-color)
}

.str-chat__circle-fab:active {
    background-color: var(--str-chat__circle-fab-pressed-background-color)
}

.str-chat {
    --str-chat__avatar-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__avatar-color: var(--str-chat__on-primary-color);
    --str-chat__avatar-background-color: var(--str-chat__primary-color);
    --str-chat__avatar-border-block-start: none;
    --str-chat__avatar-border-block-end: none;
    --str-chat__avatar-border-inline-start: none;
    --str-chat__avatar-border-inline-end: none;
    --str-chat__avatar-box-shadow: none;
    --str-chat__avatar-online-indicator-color: var(--str-chat__info-color);
    --str-chat__avatar-online-indicator-border-radius: var(--str-chat__border-radius-circle)
}

.str-chat__avatar .str-chat__avatar-image {
    display: block
}

.str-chat__avatar .str-chat__avatar-fallback,.str-chat__avatar .str-chat__avatar-image {
    background: var(--str-chat__avatar-background-color);
    color: var(--str-chat__avatar-color);
    box-shadow: var(--str-chat__avatar-box-shadow);
    border-radius: var(--str-chat__avatar-border-radius);
    border-block-start:var(--str-chat__avatar-border-block-start);border-block-end: var(--str-chat__avatar-border-block-end);
    border-inline-start:var(--str-chat__avatar-border-inline-start);border-inline-end: var(--str-chat__avatar-border-inline-end)
}

.str-chat__avatar .str-chat__avatar-fallback {
    text-transform: uppercase
}

.str-chat__avatar .str-chat__avatar--online-indicator {
    background-color: var(--str-chat__avatar-online-indicator-color);
    border-radius: var(--str-chat__avatar-online-indicator-border-radius)
}

.str-chat__loading-channels-avatar {
    border-radius: var(--str-chat__avatar-border-radius)
}

.str-chat {
    --str-chat__attachment-list-border-radius: 0;
    --str-chat__attachment-list-color: var(--str-chat__text-color);
    --str-chat__attachment-list-background-color: transparent;
    --str-chat__attachment-list-border-block-start: none;
    --str-chat__attachment-list-border-block-end: none;
    --str-chat__attachment-list-border-inline-start: none;
    --str-chat__attachment-list-border-inline-end: none;
    --str-chat__attachment-list-box-shadow: none;
    --str-chat__image-attachment-border-radius: calc(var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin));
    --str-chat__image-attachment-color: var(--str-chat__text-color);
    --str-chat__image-attachment-background-color: var(--str-chat__secondary-surface-color);
    --str-chat__image-attachment-border-block-start: none;
    --str-chat__image-attachment-border-block-end: none;
    --str-chat__image-attachment-border-inline-start: none;
    --str-chat__image-attachment-border-inline-end: none;
    --str-chat__image-attachment-box-shadow: none;
    --str-chat__image-gallery-attachment-border-radius: calc(var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin));
    --str-chat__image-gallery-attachment-color: var(--str-chat__text-color);
    --str-chat__image-gallery-attachment-background-color: transparent;
    --str-chat__image-gallery-attachment-border-block-start: none;
    --str-chat__image-gallery-attachment-border-block-end: none;
    --str-chat__image-gallery-attachment-border-inline-start: none;
    --str-chat__image-gallery-attachment-border-inline-end: none;
    --str-chat__image-gallery-attachment-box-shadow: none;
    --str-chat__image-gallery-attachment-overlay: var(--str-chat__secondary-overlay-color);
    --str-chat__image-gallery-attachment-overlay-text-color: var( --str-chat__secondary-overlay-text-color );
    --str-chat__card-attachment-border-radius: 0;
    --str-chat__card-attachment-color: var(--str-chat__text-color);
    --str-chat__card-attachment-link-color: var(--str-chat__primary-color);
    --str-chat__card-attachment-background-color: transparent;
    --str-chat__card-attachment-border-block-start: none;
    --str-chat__card-attachment-border-block-end: none;
    --str-chat__card-attachment-border-inline-start: none;
    --str-chat__card-attachment-border-inline-end: none;
    --str-chat__card-attachment-box-shadow: none;
    --str-chat__file-attachment-border-radius: calc(var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin));
    --str-chat__file-attachment-color: var(--str-chat__text-color);
    --str-chat__file-attachment-secondary-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__file-attachment-background-color: var(--str-chat__secondary-background-color);
    --str-chat__file-attachment-border-block-start: none;
    --str-chat__file-attachment-border-block-end: none;
    --str-chat__file-attachment-border-inline-start: none;
    --str-chat__file-attachment-border-inline-end: none;
    --str-chat__file-attachment-box-shadow: none;
    --str-chat__audio-attachment-widget-border-radius: calc(var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin));
    --str-chat__audio-attachment-widget-color: var(--str-chat__text-color);
    --str-chat__audio-attachment-widget-secondary-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__audio-attachment-widget-background-color: var(--str-chat__secondary-background-color);
    --str-chat__audio-attachment-widget-border-block-start: none;
    --str-chat__audio-attachment-widget-border-block-end: none;
    --str-chat__audio-attachment-widget-border-inline-start: none;
    --str-chat__audio-attachment-widget-border-inline-end: none;
    --str-chat__audio-attachment-widget-box-shadow: none;
    --str-chat__voice-recording-attachment-widget-border-radius: calc(var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin));
    --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
    --str-chat__voice-recording-attachment-widget-secondary-color: var( --str-chat__text-low-emphasis-color );
    --str-chat__voice-recording-attachment-widget-background-color: var( --str-chat__secondary-background-color );
    --str-chat__voice-recording-attachment-widget-border-block-start: none;
    --str-chat__voice-recording-attachment-widget-border-block-end: none;
    --str-chat__voice-recording-attachment-widget-border-inline-start: none;
    --str-chat__voice-recording-attachment-widget-border-inline-end: none;
    --str-chat__voice-recording-attachment-widget-box-shadow: none;
    --str-chat__audio-attachment-controls-button-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__audio-attachment-controls-button-color: var(--str-chat__text-color);
    --str-chat__audio-attachment-controls-button-background-color: var( --str-chat__secondary-background-color );
    --str-chat__audio-attachment-controls-button-pressed-background-color: var( --str-chat__surface-color );
    --str-chat__audio-attachment-controls-button-border-block-start: none;
    --str-chat__audio-attachment-controls-button-border-block-end: none;
    --str-chat__audio-attachment-controls-button-border-inline-start: none;
    --str-chat__audio-attachment-controls-button-border-inline-end: none;
    --str-chat__audio-attachment-controls-button-box-shadow: var(--str-chat__circle-fab-box-shadow);
    --str-chat__attachment-actions-border-radius: 0;
    --str-chat__attachment-actions-color: var(--str-chat__text-color);
    --str-chat__attachment-actions-background-color: transparent;
    --str-chat__attachment-actions-border-block-start: none;
    --str-chat__attachment-actions-border-block-end: none;
    --str-chat__attachment-actions-border-inline-start: none;
    --str-chat__attachment-actions-border-inline-end: none;
    --str-chat__attachment-actions-box-shadow: none;
    --str-chat__attachment-action-border-radius: 0;
    --str-chat__attachment-action-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__attachment-action-background-color: var(--str-chat__secondary-background-color);
    --str-chat__attachment-action-border-block-start: var(--str-chat__surface-color) 1px solid;
    --str-chat__attachment-action-border-block-end: var(--str-chat__surface-color) 1px solid;
    --str-chat__attachment-action-border-inline-start: var(--str-chat__surface-color) 1px solid;
    --str-chat__attachment-action-border-inline-end: var(--str-chat__surface-color) 1px solid;
    --str-chat__attachment-action-box-shadow: none;
    --str-chat__attachment-action-active-color: var(--str-chat__primary-color)
}

.str-chat__attachment-list {
    background: var(--str-chat__attachment-list-background-color);
    color: var(--str-chat__attachment-list-color);
    box-shadow: var(--str-chat__attachment-list-box-shadow);
    border-radius: var(--str-chat__attachment-list-border-radius);
    border-block-start:var(--str-chat__attachment-list-border-block-start);border-block-end: var(--str-chat__attachment-list-border-block-end);
    border-inline-start:var(--str-chat__attachment-list-border-inline-start);border-inline-end: var(--str-chat__attachment-list-border-inline-end)
}

.str-chat__attachment-list .str-chat__message-attachment--image,.str-chat__attachment-list .str-chat__message-attachment--video,.str-chat__attachment-list .str-chat__message-attachment-card--header {
    background: var(--str-chat__image-attachment-background-color);
    color: var(--str-chat__image-attachment-color);
    box-shadow: var(--str-chat__image-attachment-box-shadow);
    border-radius: var(--str-chat__image-attachment-border-radius);
    border-block-start:var(--str-chat__image-attachment-border-block-start);border-block-end: var(--str-chat__image-attachment-border-block-end);
    border-inline-start:var(--str-chat__image-attachment-border-inline-start);border-inline-end: var(--str-chat__image-attachment-border-inline-end)
}

.str-chat__attachment-list .str-chat__gallery {
    background: var(--str-chat__image-gallery-attachment-background-color);
    color: var(--str-chat__image-gallery-attachment-color);
    box-shadow: var(--str-chat__image-gallery-attachment-box-shadow);
    border-radius: var(--str-chat__image-gallery-attachment-border-radius);
    border-block-start:var(--str-chat__image-gallery-attachment-border-block-start);border-block-end: var(--str-chat__image-gallery-attachment-border-block-end);
    border-inline-start:var(--str-chat__image-gallery-attachment-border-inline-start);border-inline-end: var(--str-chat__image-gallery-attachment-border-inline-end)
}

.str-chat__attachment-list .str-chat__gallery .str-chat__gallery-image {
    background-color: var(--str-chat__image-attachment-background-color);
    border: 0
}

.str-chat__attachment-list .str-chat__gallery .str-chat__gallery-placeholder {
    color: var(--str-chat__image-gallery-attachment-overlay-text-color);
    display: flex;
    border: none;
    font: var(--str-chat__headline2-text)
}

.str-chat__attachment-list .str-chat__gallery .str-chat__gallery-placeholder:after {
    background-color: var(--str-chat__image-gallery-attachment-overlay)
}

.str-chat__attachment-list .str-chat__message-attachment--svg-image {
    background-image: repeating-conic-gradient(#d4d5d7 0 25%,#f4f4f4 0 50%);
    background-size: 24px 24px
}

.str-chat__attachment-list .str-chat__message-attachment-file--item,.str-chat__attachment-list .str-chat__message-attachment-unsupported {
    background: var(--str-chat__file-attachment-background-color);
    color: var(--str-chat__file-attachment-color);
    box-shadow: var(--str-chat__file-attachment-box-shadow);
    border-radius: var(--str-chat__file-attachment-border-radius);
    border-block-start:var(--str-chat__file-attachment-border-block-start);border-block-end: var(--str-chat__file-attachment-border-block-end);
    border-inline-start:var(--str-chat__file-attachment-border-inline-start);border-inline-end: var(--str-chat__file-attachment-border-inline-end)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-name,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-audio-widget--title,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-name,.str-chat__attachment-list .str-chat__message-attachment-unsupported .str-chat__message-attachment-unsupported__title {
    font: var(--str-chat__subtitle-medium-text);
    word-break: keep-all
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-file--item-size,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-file--item-size {
    color: var(--str-chat__file-attachment-secondary-color);
    font: var(--str-chat__body-text)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget .str-chat__message-attachment-download-icon svg path,.str-chat__attachment-list .str-chat__message-attachment-file--item .str-chat__message-attachment-download-icon svg path {
    fill: var(--str-chat__file-attachment-color)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget {
    background: var(--str-chat__audio-attachment-widget-background-color);
    color: var(--str-chat__audio-attachment-widget-color);
    box-shadow: var(--str-chat__audio-attachment-widget-box-shadow);
    border-radius: var(--str-chat__audio-attachment-widget-border-radius);
    border-block-start:var(--str-chat__audio-attachment-widget-border-block-start);border-block-end: var(--str-chat__audio-attachment-widget-border-block-end);
    border-inline-start:var(--str-chat__audio-attachment-widget-border-inline-start);border-inline-end: var(--str-chat__audio-attachment-widget-border-inline-end)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track {
    background: linear-gradient(to right,var(--str-chat__primary-color) var(--str-chat__message-attachment-audio-widget-progress),var(--str-chat__disabled-color) var(--str-chat__message-attachment-audio-widget-progress));
    border-radius: calc(var(--str-chat__spacing-px)*5)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget--progress-track .str-chat__message-attachment-audio-widget--progress-indicator {
    background-color: var(--str-chat__primary-color);
    border-radius: inherit
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button {
    background: var(--str-chat__audio-attachment-controls-button-background-color);
    color: var(--str-chat__audio-attachment-controls-button-color);
    box-shadow: var(--str-chat__audio-attachment-controls-button-box-shadow);
    border-radius: var(--str-chat__audio-attachment-controls-button-border-radius);
    border-block-start:var(--str-chat__audio-attachment-controls-button-border-block-start);border-block-end: var(--str-chat__audio-attachment-controls-button-border-block-end);
    border-inline-start:var(--str-chat__audio-attachment-controls-button-border-inline-start);border-inline-end: var(--str-chat__audio-attachment-controls-button-border-inline-end)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button svg path {
    fill: var(--str-chat__audio-attachment-controls-button-color)
}

.str-chat__attachment-list .str-chat__message-attachment-audio-widget--play-button:active {
    background-color: var(--str-chat__audio-attachment-controls-button-pressed-background-color)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget {
    background: var(--str-chat__voice-recording-attachment-widget-background-color);
    color: var(--str-chat__voice-recording-attachment-widget-color);
    box-shadow: var(--str-chat__voice-recording-attachment-widget-box-shadow);
    border-radius: var(--str-chat__voice-recording-attachment-widget-border-radius);
    border-block-start:var(--str-chat__voice-recording-attachment-widget-border-block-start);border-block-end: var(--str-chat__voice-recording-attachment-widget-border-block-end);
    border-inline-start:var(--str-chat__voice-recording-attachment-widget-border-inline-start);border-inline-end: var(--str-chat__voice-recording-attachment-widget-border-inline-end)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget a {
    color: var(--str-chat__voice-recording-attachment-widget-color)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__title {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    font: var(--str-chat__subtitle-medium-text)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__timer {
    font: var(--str-chat__body-text);
    color: var(--str-chat__text-low-emphasis-color);
    white-space: nowrap
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__amplitude-bar {
    background: var(--str-chat__text-low-emphasis-color);
    border-radius: var(--str-chat__border-radius-circle)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__amplitude-bar--active {
    background: var(--str-chat__primary-color)
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__wave-progress-bar__progress-indicator {
    background-color: #fff;
    border-radius: var(--str-chat__border-radius-circle);
    border: 1px solid var(--str-chat__secondary-overlay-color);
    cursor: grab
}

.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__error-message {
    font: var(--str-chat__body-text);
    color: var(--str-chat__text-low-emphasis-color)
}

.str-chat__attachment-list .str-chat__message_attachment__playback-rate-button {
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
    border-radius: var(--str-chat__border-radius-circle);
    background-color: #fff;
    cursor: pointer
}

.str-chat__attachment-list .str-chat__message-attachment--card {
    background: var(--str-chat__card-attachment-background-color);
    color: var(--str-chat__card-attachment-color);
    box-shadow: var(--str-chat__card-attachment-box-shadow);
    border-radius: var(--str-chat__card-attachment-border-radius);
    border-block-start:var(--str-chat__card-attachment-border-block-start);border-block-end: var(--str-chat__card-attachment-border-block-end);
    border-inline-start:var(--str-chat__card-attachment-border-inline-start);border-inline-end: var(--str-chat__card-attachment-border-inline-end);
    font: var(--str-chat__body-text)
}

.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--source-link,.str-chat__attachment-list .str-chat__message-attachment--card .str-chat__message-attachment-card--title {
    font: var(--str-chat__body-medium-text)
}

.str-chat__attachment-list .str-chat__message-attachment-card--audio img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card--header .str-chat__message-attachment-card--source-link {
    background-color: var(--str-chat__audio-attachment-widget-background-color)
}

.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card-audio-widget {
    background-color: var(--str-chat__audio-attachment-widget-background-color);
    border-radius: 0 0 calc(var(--str-chat__spacing-px)*14) calc(var(--str-chat__spacing-px)*14)
}

.str-chat__attachment-list .str-chat__message-attachment-card--audio .str-chat__message-attachment-card-audio-widget .str-chat__message-attachment-audio-widget--title {
    color: var(--str-chat__text-color);
    font: var(--str-chat__body-medium-text)
}

.str-chat__attachment-list .str-chat__message-attachment-actions {
    background: var(--str-chat__attachment-actions-background-color);
    color: var(--str-chat__attachment-actions-color);
    box-shadow: var(--str-chat__attachment-actions-box-shadow);
    border-radius: var(--str-chat__attachment-actions-border-radius);
    border-block-start:var(--str-chat__attachment-actions-border-block-start);border-block-end: var(--str-chat__attachment-actions-border-block-end);
    border-inline-start:var(--str-chat__attachment-actions-border-inline-start);border-inline-end: var(--str-chat__attachment-actions-border-inline-end)
}

.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-button {
    background: var(--str-chat__attachment-action-background-color);
    color: var(--str-chat__attachment-action-color);
    box-shadow: var(--str-chat__attachment-action-box-shadow);
    border-radius: var(--str-chat__attachment-action-border-radius);
    border-block-start:var(--str-chat__attachment-action-border-block-start);border-block-end: var(--str-chat__attachment-action-border-block-end);
    border-inline-start:var(--str-chat__attachment-action-border-inline-start);border-inline-end: var(--str-chat__attachment-action-border-inline-end);
    font: var(--str-chat__subtitle-medium-text);
    border-collapse: collapse
}

.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-button:active {
    color: var(--str-chat__attachment-action-active-color)
}

.str-chat__attachment-list .str-chat__message-attachment-actions .str-chat__message-attachment-actions-button:not(:last-of-type) {
    border-inline-end:none}

.str-chat__attachment-list .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy .str-chat__message-attachment-card--header {
    border-end-start-radius: 0;
    border-end-end-radius: 0
}

.str-chat__message-attachment-audio-widget--play-button {
    background: var(--str-chat__audio-attachment-controls-button-background-color);
    color: var(--str-chat__audio-attachment-controls-button-color);
    box-shadow: var(--str-chat__audio-attachment-controls-button-box-shadow);
    border-radius: var(--str-chat__audio-attachment-controls-button-border-radius);
    border-block-start:var(--str-chat__audio-attachment-controls-button-border-block-start);border-block-end: var(--str-chat__audio-attachment-controls-button-border-block-end);
    border-inline-start:var(--str-chat__audio-attachment-controls-button-border-inline-start);border-inline-end: var(--str-chat__audio-attachment-controls-button-border-inline-end)
}

.str-chat__message-attachment-audio-widget--play-button svg path {
    fill: var(--str-chat__audio-attachment-controls-button-color)
}

.str-chat__message-attachment-audio-widget--play-button:active {
    background-color: var(--str-chat__audio-attachment-controls-button-pressed-background-color)
}

.str-chat__message-attachment-card.str-chat__message-attachment-card--audio .str-chat__message-attachment-card--header {
    border-end-start-radius: 0;
    border-end-end-radius: 0
}

.str-chat__message-attachment__voice-recording-widget {
    background: var(--str-chat__voice-recording-attachment-widget-background-color);
    color: var(--str-chat__voice-recording-attachment-widget-color);
    box-shadow: var(--str-chat__voice-recording-attachment-widget-box-shadow);
    border-radius: var(--str-chat__voice-recording-attachment-widget-border-radius);
    border-block-start:var(--str-chat__voice-recording-attachment-widget-border-block-start);border-block-end: var(--str-chat__voice-recording-attachment-widget-border-block-end);
    border-inline-start:var(--str-chat__voice-recording-attachment-widget-border-inline-start);border-inline-end: var(--str-chat__voice-recording-attachment-widget-border-inline-end)
}

.str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__title {
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    word-break: keep-all;
    font: var(--str-chat__subtitle-medium-text)
}

.str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__timer {
    font: var(--str-chat__body-text);
    color: var(--str-chat__text-low-emphasis-color);
    white-space: nowrap
}

.str-chat__audio_recorder__waveform-box,.str-chat__wave-progress-bar__track {
    cursor: pointer
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__amplitude-bar,.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__amplitude-bar {
    background: var(--str-chat__text-low-emphasis-color);
    border-radius: var(--str-chat__border-radius-circle)
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__amplitude-bar--active,.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__amplitude-bar--active {
    background: var(--str-chat__primary-color)
}

.str-chat__audio_recorder__waveform-box .str-chat__wave-progress-bar__progress-indicator,.str-chat__wave-progress-bar__track .str-chat__wave-progress-bar__progress-indicator {
    background-color: #fff;
    border-radius: var(--str-chat__border-radius-circle);
    border: 1px solid var(--str-chat__secondary-overlay-color);
    cursor: grab
}

.str-chat-angular__message-attachment-file-single .str-chat__message-attachment-file--item-first-row {
    color: var(--str-chat__attachment-list-color)
}

.str-chat {
    --str-chat__attachment-preview-list-border-radius: var(--str-chat__border-radius-sm);
    --str-chat__attachment-preview-list-color: var(--str-chat__text-color);
    --str-chat__attachment-preview-list-background-color: transparent;
    --str-chat__attachment-preview-list-border-block-start: none;
    --str-chat__attachment-preview-list-border-block-end: none;
    --str-chat__attachment-preview-list-border-inline-start: none;
    --str-chat__attachment-preview-list-border-inline-end: none;
    --str-chat__attachment-preview-list-box-shadow: none;
    --str-chat__attachment-preview-close-icon-background: var(--str-chat__secondary-overlay-color);
    --str-chat__attachment-preview-close-icon-color: var(--str-chat__secondary-overlay-text-color);
    --str-chat__attachment-preview-retry-icon-color: var(--str-chat__primary-color);
    --str-chat__attachment-preview-download-icon-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__attachment-preview-overlay-color: var(--str-chat__overlay-color);
    --str-chat__attachment-preview-image-border-radius: var(--str-chat__border-radius-sm);
    --str-chat__attachment-preview-image-color: var(--str-chat__text-color);
    --str-chat__attachment-preview-image-background-color: transparent;
    --str-chat__attachment-preview-image-border-block-start: none;
    --str-chat__attachment-preview-image-border-block-end: none;
    --str-chat__attachment-preview-image-border-inline-start: none;
    --str-chat__attachment-preview-image-border-inline-end: none;
    --str-chat__attachment-preview-image-box-shadow: none;
    --str-chat__attachment-preview-file-border-radius: var(--str-chat__border-radius-md);
    --str-chat__attachment-preview-file-color: var(--str-chat__text-color);
    --str-chat__attachment-preview-file-background-color: transparent;
    --str-chat__attachment-preview-file-border-block-start: 1px solid var(--str-chat__surface-color);
    --str-chat__attachment-preview-file-border-block-end: 1px solid var(--str-chat__surface-color);
    --str-chat__attachment-preview-file-border-inline-start: 1px solid var(--str-chat__surface-color);
    --str-chat__attachment-preview-file-border-inline-end: 1px solid var(--str-chat__surface-color);
    --str-chat__attachment-preview-file-box-shadow: none
}

.str-chat__attachment-preview-list {
    background: var(--str-chat__attachment-preview-list-background-color);
    color: var(--str-chat__attachment-preview-list-color);
    box-shadow: var(--str-chat__attachment-preview-list-box-shadow);
    border-radius: var(--str-chat__attachment-preview-list-border-radius);
    border-block-start:var(--str-chat__attachment-preview-list-border-block-start);border-block-end: var(--str-chat__attachment-preview-list-border-block-end);
    border-inline-start:var(--str-chat__attachment-preview-list-border-inline-start);border-inline-end: var(--str-chat__attachment-preview-list-border-inline-end)
}

.str-chat__attachment-preview-list .str-chat__attachment-list-scroll-container {
    border-radius: inherit
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-image {
    background: var(--str-chat__attachment-preview-image-background-color);
    color: var(--str-chat__attachment-preview-image-color);
    box-shadow: var(--str-chat__attachment-preview-image-box-shadow);
    border-radius: var(--str-chat__attachment-preview-image-border-radius);
    border-block-start:var(--str-chat__attachment-preview-image-border-block-start);border-block-end: var(--str-chat__attachment-preview-image-border-block-end);
    border-inline-start:var(--str-chat__attachment-preview-image-border-inline-start);border-inline-end: var(--str-chat__attachment-preview-image-border-inline-end)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-image-loading,.str-chat__attachment-preview-list .str-chat__attachment-preview-image .str-chat__attachment-preview-thumbnail {
    border-radius: var(--str-chat__attachment-preview-image-border-radius);
    background-color: var(--str-chat__attachment-preview-overlay-color)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording {
    background: var(--str-chat__attachment-preview-file-background-color);
    color: var(--str-chat__attachment-preview-file-color);
    box-shadow: var(--str-chat__attachment-preview-file-box-shadow);
    border-radius: var(--str-chat__attachment-preview-file-border-radius);
    border-block-start:var(--str-chat__attachment-preview-file-border-block-start);border-block-end: var(--str-chat__attachment-preview-file-border-block-end);
    border-inline-start:var(--str-chat__attachment-preview-file-border-inline-start);border-inline-end: var(--str-chat__attachment-preview-file-border-inline-end)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-name,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-title,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-name,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-title,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-name,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-title {
    font: var(--str-chat__subtitle-medium-text)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-download {
    --str-chat-icon-color: var(--str-chat__attachment-preview-download-icon-color);
    text-decoration: none
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download svg path,.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-download svg path,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-download svg path {
    fill: var(--str-chat__attachment-preview-download-icon-color)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__recording-timer {
    color: var(--str-chat__text-low-emphasis-color);
    font: var(--str-chat__caption-medium-text)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-delete {
    --str-chat-icon-color: var(--str-chat__attachment-preview-close-icon-color)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-delete .str-chat__icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-delete svg {
    background-color: var(--str-chat__attachment-preview-close-icon-background);
    border-radius: 999px
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-delete svg path {
    fill: var(--str-chat__attachment-preview-close-icon-color)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-error {
    --str-chat-icon-color: var(--str-chat__attachment-preview-retry-icon-color);
    background-color: var(--str-chat__attachment-preview-overlay-color)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-error svg path {
    fill: var(--str-chat__attachment-preview-retry-icon-color)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-error.str-chat__attachment-preview-error-image {
    border-radius: var(--str-chat__attachment-preview-image-border-radius)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-error.str-chat__attachment-preview-error-file {
    border-radius: var(--str-chat__attachment-preview-file-border-radius)
}

.str-chat__audio_recorder-container {
    background-color: var(--str-chat__background-color)
}

.str-chat__audio_recorder button {
    background: none;
    border: none;
    cursor: pointer
}

.str-chat__audio_recorder button:disabled {
    cursor: default
}

.str-chat__audio_recorder .str-chat__audio_recorder__cancel-button,.str-chat__audio_recorder .str-chat__audio_recorder__toggle-playback-button {
    color: var(--str-chat__text-low-emphasis-color)
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button,.str-chat__audio_recorder .str-chat__audio_recorder__resume-recording-button {
    color: var(--str-chat__danger-color)
}

.str-chat__audio_recorder .str-chat__audio_recorder__pause-recording-button {
    border: 3px solid var(--str-chat__danger-color);
    border-radius: var(--str-chat__border-radius-circle)
}

.str-chat__audio_recorder .str-chat__audio_recorder__complete-button,.str-chat__audio_recorder .str-chat__audio_recorder__stop-button {
    border-radius: var(--str-chat__border-radius-circle);
    color: var(--str-chat__on-primary-color);
    background-color: var(--str-chat__primary-color)
}

.str-chat__audio_recorder .str-chat__audio_recorder__complete-button .str-chat__loading-indicator svg linearGradient stop:last-child,.str-chat__audio_recorder .str-chat__audio_recorder__stop-button .str-chat__loading-indicator svg linearGradient stop:last-child {
    stop-color: var(--str-chat__background-color)
}

.str-chat {
    --str-chat__autocomplete-menu-border-radius: var(--str-chat__border-radius-xs);
    --str-chat__autocomplete-menu-color: var(--str-chat__text-color);
    --str-chat__autocomplete-menu-background-color: var(--str-chat__secondary-background-color);
    --str-chat__autocomplete-menu-border-block-start: none;
    --str-chat__autocomplete-menu-border-block-end: none;
    --str-chat__autocomplete-menu-border-inline-start: none;
    --str-chat__autocomplete-menu-border-inline-end: none;
    --str-chat__autocomplete-menu-box-shadow: 0 0 8px rgba(0,0,0,.15);
    --str-chat__autocomplete-active-background-color: var(--str-chat__surface-color);
    --str-chat__suggestion-list-container-border-radius: var(--str-chat__border-radius-xs);
    --str-chat__suggestion-list-container-color: var(--str-chat__text-color);
    --str-chat__suggestion-list-container-background-color: var( --str-chat__secondary-background-color );
    --str-chat__suggestion-list-container-border-block-start: none;
    --str-chat__suggestion-list-container-border-block-end: none;
    --str-chat__suggestion-list-container-border-inline-start: none;
    --str-chat__suggestion-list-container-border-inline-end: none;
    --str-chat__suggestion-list-container-box-shadow: 0 0 8px rgba(0,0,0,.15);
    --str-chat__suggestion-list-item--selected-background-color: var(--str-chat__surface-color);
    --str-chat__slash-command-border-radius: 0;
    --str-chat__slash-command-color: var(--str-chat__text-color);
    --str-chat__slash-command-background-color: transparent;
    --str-chat__slash-command-border-block-start: none;
    --str-chat__slash-command-border-block-end: none;
    --str-chat__slash-command-border-inline-start: none;
    --str-chat__slash-command-border-inline-end: none;
    --str-chat__slash-command-box-shadow: none;
    --str-chat__slash-command-args-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__mention-list-user-item-border-radius: 0;
    --str-chat__mention-list-user-item-color: var(--str-chat__text-color);
    --str-chat__mention-list-user-item-background-color: transparent;
    --str-chat__mention-list-user-item-border-block-start: none;
    --str-chat__mention-list-user-item-border-block-end: none;
    --str-chat__mention-list-user-item-border-inline-start: none;
    --str-chat__mention-list-user-item-border-inline-end: none;
    --str-chat__mention-list-user-item-box-shadow: none;
    --str-chat__mention-list-user-item-at-sign-color: var(--str-chat__primary-color);
    --str-chat__mention-list-emoji-item-font-family: var(--str-chat__font-family);
    --str-chat__mention-list-emoji-item-border-radius: 0;
    --str-chat__mention-list-emoji-item-color: var(--str-chat__text-color);
    --str-chat__mention-list-emoji-item-background-color: transparent;
    --str-chat__mention-list-emoji-item-border-block-start: none;
    --str-chat__mention-list-emoji-item-border-block-end: none;
    --str-chat__mention-list-emoji-item-border-inline-start: none;
    --str-chat__mention-list-emoji-item-border-inline-end: none;
    --str-chat__mention-list-emoji-item-box-shadow: none
}

.mention-menu {
    background: var(--str-chat__autocomplete-menu-background-color)!important;
    color: var(--str-chat__autocomplete-menu-color)!important;
    box-shadow: var(--str-chat__autocomplete-menu-box-shadow)!important;
    border-radius: var(--str-chat__autocomplete-menu-border-radius)!important;
    border-block-start:var(--str-chat__autocomplete-menu-border-block-start)!important;border-block-end: var(--str-chat__autocomplete-menu-border-block-end)!important;
    border-inline-start:var(--str-chat__autocomplete-menu-border-inline-start)!important;border-inline-end: var(--str-chat__autocomplete-menu-border-inline-end)!important
}

.mention-menu .active.mention-active>a {
    background-color: var(--str-chat__autocomplete-active-background-color)!important
}

.mention-menu .mention-item {
    color: var(--str-chat__autocomplete-menu-color)!important;
    background-color: transparent!important
}

.str-chat__slash-command {
    background: var(--str-chat__slash-command-background-color);
    color: var(--str-chat__slash-command-color);
    box-shadow: var(--str-chat__slash-command-box-shadow);
    border-radius: var(--str-chat__slash-command-border-radius);
    border-block-start:var(--str-chat__slash-command-border-block-start);border-block-end: var(--str-chat__slash-command-border-block-end);
    border-inline-start:var(--str-chat__slash-command-border-inline-start);border-inline-end: var(--str-chat__slash-command-border-inline-end)
}

.str-chat__slash-command .str-chat__slash-command-header .str-chat__slash-command-name {
    text-transform: capitalize;
    font: var(--str-chat__subtitle2-text)
}

.str-chat__slash-command .str-chat__slash-command-header .str-chat__slash-command-args {
    color: var(--str-chat__slash-command-args-color);
    font: var(--str-chat__subtitle-text)
}

.str-chat__user-item {
    background: var(--str-chat__mention-list-user-item-background-color);
    color: var(--str-chat__mention-list-user-item-color);
    box-shadow: var(--str-chat__mention-list-user-item-box-shadow);
    border-radius: var(--str-chat__mention-list-user-item-border-radius);
    border-block-start:var(--str-chat__mention-list-user-item-border-block-start);border-block-end: var(--str-chat__mention-list-user-item-border-block-end);
    border-inline-start:var(--str-chat__mention-list-user-item-border-inline-start);border-inline-end: var(--str-chat__mention-list-user-item-border-inline-end)
}

.str-chat__user-item .str-chat__user-item--name {
    font: var(--str-chat__subtitle-text)
}

.str-chat__user-item .str-chat__user-item-at {
    font: var(--str-chat__subtitle2-text);
    color: var(--str-chat__mention-list-user-item-at-sign-color)
}

.str-chat__emoji-item {
    background: var(--str-chat__mention-list-emoji-item-background-color);
    color: var(--str-chat__mention-list-emoji-item-color);
    box-shadow: var(--str-chat__mention-list-emoji-item-box-shadow);
    border-radius: var(--str-chat__mention-list-emoji-item-border-radius);
    border-block-start:var(--str-chat__mention-list-emoji-item-border-block-start);border-block-end: var(--str-chat__mention-list-emoji-item-border-block-end);
    border-inline-start:var(--str-chat__mention-list-emoji-item-border-inline-start);border-inline-end: var(--str-chat__mention-list-emoji-item-border-inline-end)
}

.str-chat__emoji-item .str-chat__emoji-item--name {
    font: var(--str-chat__subtitle-text)
}

.str-chat__suggestion-list-container {
    background: var(--str-chat__suggestion-list-container-background-color);
    color: var(--str-chat__suggestion-list-container-color);
    box-shadow: var(--str-chat__suggestion-list-container-box-shadow);
    border-radius: var(--str-chat__suggestion-list-container-border-radius);
    border-block-start:var(--str-chat__suggestion-list-container-border-block-start);border-block-end: var(--str-chat__suggestion-list-container-border-block-end);
    border-inline-start:var(--str-chat__suggestion-list-container-border-inline-start);border-inline-end: var(--str-chat__suggestion-list-container-border-inline-end)
}

.str-chat__suggestion-list-container .str-chat__suggestion-list .str-chat__suggestion-list-item>a {
    text-decoration: none
}

.str-chat__suggestion-list-container .str-chat__suggestion-list .str-chat__suggestion-item--selected {
    background-color: var(--str-chat__suggestion-list-item--selected-background-color)
}

.str-chat__base-image {
    color: transparent
}

.str-chat__base-image--load-failed {
    mask-image: var(--str-chat__image-fallback-icon);
    -webkit-mask-image: var(--str-chat__image-fallback-icon);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: 5rem 5rem;
    -webkit-mask-size: 5rem 5rem;
    background-color: var(--str-chat__disabled-color)
}

.str-chat__base-image--load-failed~.str-chat__message-attachment-file--item-download .str-chat__message-attachment-download-icon path {
    fill: var(--str-chat__text-color)
}

.str-chat__attachment-preview-image .str-chat__base-image--load-failed {
    mask-size: 1.5rem 1.5rem;
    -webkit-mask-size: 1.5rem 1.5rem
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-image--error {
    background-color: var(--str-chat__secondary-surface-color)
}

.str-chat__attachment-preview-list .str-chat__attachment-preview-image--error .str-chat__attachment-preview-thumbnail.str-chat__base-image--load-failed {
    background-color: var(--str-chat__disabled-color)
}

.str-chat {
    --str-chat__channel-border-radius: 0;
    --str-chat__channel-color: var(--str-chat__text-color);
    --str-chat__channel-background-color: var(--str-chat__background-color);
    --str-chat__channel-box-shadow: none;
    --str-chat__channel-border-block-start: none;
    --str-chat__channel-border-block-end: none;
    --str-chat__channel-border-inline-start: none;
    --str-chat__channel-border-inline-end: none;
    --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
    --str-chat__channel-empty-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__channel-loading-state-color: var(--str-chat__disabled-color)
}

.str-chat__channel,.str-chat__empty-channel {
    background: var(--str-chat__channel-background-color);
    color: var(--str-chat__channel-color);
    box-shadow: var(--str-chat__channel-box-shadow);
    border-radius: var(--str-chat__channel-border-radius);
    border-block-start:var(--str-chat__channel-border-block-start);border-block-end: var(--str-chat__channel-border-block-end);
    border-inline-start:var(--str-chat__channel-border-inline-start);border-inline-end: var(--str-chat__channel-border-inline-end)
}

.str-chat__empty-channel {
    --str-chat-icon-color: var(--str-chat__channel-empty-color);
    font: var(--str-chat__headline-text);
    text-align: center
}

.str-chat__empty-channel svg path {
    fill: var(--str-chat__channel-empty-indicator-color)
}

.str-chat__empty-channel .str-chat__empty-channel-text {
    color: var(--str-chat__channel-empty-color)
}

.str-chat__loading-channel {
    animation: pulsate 1s linear 0s infinite alternate
}

.str-chat__loading-channel:nth-of-type(2) {
    animation: pulsate 1s linear .3334s infinite alternate
}

.str-chat__loading-channel:last-of-type {
    animation: pulsate 1s linear .6667s infinite alternate
}

.str-chat__loading-channel .str-chat__loading-channel-header {
    background-color: var(--str-chat__channel-header-background-color)
}

.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-avatar {
    background-image: linear-gradient(-90deg,var(--str-chat__channel-loading-state-color) 0,var(--str-chat__channel-loading-state-color) 100%);
    border-radius: var(--str-chat__avatar-border-radius)
}

.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-info,.str-chat__loading-channel .str-chat__loading-channel-header .str-chat__loading-channel-header-name {
    background-image: linear-gradient(-90deg,var(--str-chat__channel-loading-state-color) 0,var(--str-chat__channel-loading-state-color) 100%);
    border-radius: var(--str-chat__border-radius-xs)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list {
    background-color: var(--str-chat__message-list-background-color)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-avatar {
    background-image: linear-gradient(-90deg,var(--str-chat__channel-loading-state-color) 0,var(--str-chat__channel-loading-state-color) 100%);
    border-radius: var(--str-chat__avatar-border-radius)
}

.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-date,.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-sender,.str-chat__loading-channel .str-chat__loading-channel-message-list .str-chat__loading-channel-message-text {
    background-image: linear-gradient(-90deg,var(--str-chat__channel-loading-state-color) 0,var(--str-chat__channel-loading-state-color) 100%);
    border-radius: var(--str-chat__message-bubble-border-radius)
}

.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-input,.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-send {
    background-image: linear-gradient(-90deg,var(--str-chat__channel-loading-state-color) 0,var(--str-chat__channel-loading-state-color) 100%)
}

.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-input {
    border-radius: var(--str-chat__message-textarea-border-radius)
}

.str-chat__loading-channel .str-chat__loading-channel-message-input-row .str-chat__loading-channel-message-send {
    border-radius: var(--str-chat__message-send-border-radius)
}

.str-chat {
    --str-chat__channel-header-border-radius: 0;
    --str-chat__channel-header-color: 0;
    --str-chat__channel-header-background-color: var(--str-chat__secondary-background-color);
    --str-chat__channel-header-border-block-start: none;
    --str-chat__channel-header-border-block-end: none;
    --str-chat__channel-header-border-inline-start: none;
    --str-chat__channel-header-border-inline-end: none;
    --str-chat__channel-header-box-shadow: none;
    --str-chat__channel-header-info-color: var(--str-chat__text-low-emphasis-color)
}

.str-chat__channel-header {
    background: var(--str-chat__channel-header-background-color);
    color: var(--str-chat__channel-header-color);
    box-shadow: var(--str-chat__channel-header-box-shadow);
    border-radius: var(--str-chat__channel-header-border-radius);
    border-block-start:var(--str-chat__channel-header-border-block-start);border-block-end: var(--str-chat__channel-header-border-block-end);
    border-inline-start:var(--str-chat__channel-header-border-inline-start);border-inline-end: var(--str-chat__channel-header-border-inline-end)
}

.str-chat__channel-header .str-chat__channel-header-title {
    font: var(--str-chat__subtitle-medium-text)
}

.str-chat__channel-header .str-chat__channel-header-info {
    font: var(--str-chat__body-text);
    color: var(--str-chat__channel-header-info-color)
}

.str-chat {
    --str-chat__channel-list-border-radius: 0;
    --str-chat__channel-list-color: var(--str-chat__text-color);
    --str-chat__channel-list-background-color: var(--str-chat__secondary-background-color);
    --str-chat__channel-list-box-shadow: none;
    --str-chat__channel-list-border-block-start: none;
    --str-chat__channel-list-border-block-end: none;
    --str-chat__channel-list-border-inline-start: none;
    --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
    --str-chat__channel-list-load-more-border-radius: var(--str-chat__cta-button-border-radius);
    --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color);
    --str-chat__channel-list-load-more-background-color: var(--str-chat__cta-button-background-color);
    --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow);
    --str-chat__channel-list-load-more-border-block-start: var( --str-chat__cta-button-border-block-start );
    --str-chat__channel-list-load-more-border-block-end: var(--str-chat__cta-button-border-block-end);
    --str-chat__channel-list-load-more-border-inline-start: var( --str-chat__cta-button-border-inline-start );
    --str-chat__channel-list-load-more-border-inline-end: var( --str-chat__cta-button-border-inline-end );
    --str-chat__channel-list-load-more-pressed-background-color: var( --str-chat__cta-button-pressed-background-color );
    --str-chat__channel-list-load-more-disabled-background-color: var( --str-chat__cta-button-disabled-background-color );
    --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
    --str-chat__channel-list-empty-indicator-color: var(--str-chat__text-low-emphasis-color)
}

.str-chat__channel-list {
    background: var(--str-chat__channel-list-background-color);
    color: var(--str-chat__channel-list-color);
    box-shadow: var(--str-chat__channel-list-box-shadow);
    border-radius: var(--str-chat__channel-list-border-radius);
    border-block-start:var(--str-chat__channel-list-border-block-start);border-block-end: var(--str-chat__channel-list-border-block-end);
    border-inline-start:var(--str-chat__channel-list-border-inline-start);border-inline-end: var(--str-chat__channel-list-border-inline-end)
}

.str-chat__channel-list .str-chat__load-more-button__button {
    background: var(--str-chat__channel-list-load-more-background-color);
    color: var(--str-chat__channel-list-load-more-color);
    box-shadow: var(--str-chat__channel-list-load-more-box-shadow);
    border-radius: var(--str-chat__channel-list-load-more-border-radius);
    border-block-start:var(--str-chat__channel-list-load-more-border-block-start);border-block-end: var(--str-chat__channel-list-load-more-border-block-end);
    border-inline-start:var(--str-chat__channel-list-load-more-border-inline-start);border-inline-end: var(--str-chat__channel-list-load-more-border-inline-end);
    width: 80%
}

.str-chat__channel-list .str-chat__load-more-button__button:active {
    background-color: var(--str-chat__channel-list-load-more-pressed-background-color)
}

.str-chat__channel-list .str-chat__load-more-button__button:disabled {
    background-color: var(--str-chat__channel-list-load-more-disabled-background-color);
    color: var(--str-chat__channel-list-load-more-disabled-color)
}

.str-chat__channel-list .str-chat__channel-list-empty {
    --str-chat-icon-color: var(--str-chat__channel-list-empty-indicator-color);
    font: var(--str-chat__headline-text);
    text-align: center;
    color: var(--str-chat__channel-list-empty-indicator-color)
}

.str-chat__channel-list .str-chat__channel-list-empty svg path {
    fill: var(--str-chat__channel-list-empty-indicator-color)
}

.str-chat {
    --str-chat__channel-preview-border-radius: 0;
    --str-chat__channel-preview-color: var(--str-chat__text-color);
    --str-chat__channel-preview-background-color: transparent;
    --str-chat__channel-preview-border-block-start: none;
    --str-chat__channel-preview-border-block-end: none;
    --str-chat__channel-preview-border-inline-start: none;
    --str-chat__channel-preview-border-inline-end: none;
    --str-chat__channel-preview-active-background-color: var(--str-chat__surface-color);
    --str-chat__channel-preview-hover-background-color: var(--str-chat__secondary-surface-color);
    --str-chat__channel-preview-latest-message-secondary-color: var( --str-chat__text-low-emphasis-color );
    --str-chat__channel-preview-loading-state-color: var(--str-chat__disabled-color);
    --str-chat__channel-preview-unread-badge-background-color: var(--str-chat__unread-badge-color);
    --str-chat__channel-preview-unread-badge-color: var(--str-chat__on-unread-badge-color);
    --str-chat__channel-preview-unread-badge-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__channel-preview-unread-badge-border-block-start: none;
    --str-chat__channel-preview-unread-badge-border-block-end: none;
    --str-chat__channel-preview-unread-badge-border-inline-start: none;
    --str-chat__channel-preview-unread-badge-border-inline-end: none;
    --str-chat__channel-preview-message-status-color: var(--str-chat__primary-color);
    --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color)
}

.str-chat__channel-preview {
    background: var(--str-chat__channel-preview-background-color);
    color: var(--str-chat__channel-preview-color);
    box-shadow: var(--str-chat__channel-preview-box-shadow);
    border-radius: var(--str-chat__channel-preview-border-radius);
    border-block-start:var(--str-chat__channel-preview-border-block-start);border-block-end: var(--str-chat__channel-preview-border-block-end);
    border-inline-start:var(--str-chat__channel-preview-border-inline-start);border-inline-end: var(--str-chat__channel-preview-border-inline-end)
}

.str-chat__channel-preview--active,.str-chat__channel-preview-messenger--active {
    background-color: var(--str-chat__channel-preview-active-background-color)
}

.str-chat__channel-preview:hover {
    background-color: var(--str-chat__channel-preview-hover-background-color)
}

.str-chat__channel-preview .str-chat__channel-preview-end-first-row {
    font: var(--str-chat__subtitle-medium-text)
}

.str-chat__channel-preview .str-chat__channel-preview-end-first-row .str-chat__channel-preview-unread-badge {
    background: var(--str-chat__channel-preview-unread-badge-background-color);
    color: var(--str-chat__channel-preview-unread-badge-color);
    box-shadow: var(--str-chat__channel-preview-unread-badge-box-shadow);
    border-radius: var(--str-chat__channel-preview-unread-badge-border-radius);
    border-block-start:var(--str-chat__channel-preview-unread-badge-border-block-start);border-block-end: var(--str-chat__channel-preview-unread-badge-border-block-end);
    border-inline-start:var(--str-chat__channel-preview-unread-badge-border-inline-start);border-inline-end: var(--str-chat__channel-preview-unread-badge-border-inline-end);
    font-size: 80%
}

.str-chat__channel-preview .str-chat__channel-preview-end-first-row .str-chat__channel-preview-messenger--last-message {
    font: var(--str-chat__body-text);
    color: var(--str-chat__channel-preview-latest-message-secondary-color)
}

.str-chat__channel-preview .str-chat__channel-preview-end-first-row--active .str-chat__channel-preview-messenger--last-message,.str-chat__channel-preview .str-chat__channel-preview-end-first-row:hover .str-chat__channel-preview-messenger--last-message {
    color: var(--str-chat__channel-preview-color)
}

.str-chat__channel-preview .str-chat__channel-preview-messenger--status {
    --str-chat-icon-color: var(--str-chat__channel-preview-message-status-color);
    color: var(--str-chat__channel-preview-message-status-color)
}

.str-chat__channel-preview .str-chat__channel-preview-messenger--status svg path {
    fill: var(--str-chat__channel-preview-message-status-color)
}

.str-chat__channel-preview .str-chat__channel-preview-messenger--time {
    color: var(--str-chat__channel-preview-message-time-color);
    font: var(--str-chat__caption-text)
}

.str-chat__channel-preview-loading {
    animation: pulsate 1s linear 0s infinite alternate
}

.str-chat__channel-preview-loading:nth-of-type(2) {
    animation: pulsate 1s linear .3334s infinite alternate
}

.str-chat__channel-preview-loading:last-of-type {
    animation: pulsate 1s linear .6667s infinite alternate
}

@keyframes pulsate {
    0% {
        opacity: .5
    }

    to {
        opacity: 1
    }
}

.str-chat__channel-preview-loading .str-chat__loading-channels-avatar,.str-chat__channel-preview-loading .str-chat__loading-channels-status,.str-chat__channel-preview-loading .str-chat__loading-channels-username {
    background-image: linear-gradient(-90deg,var(--str-chat__channel-preview-loading-state-color) 0,var(--str-chat__channel-preview-loading-state-color) 100%)
}

.str-chat__channel-preview-loading .str-chat__loading-channels-status,.str-chat__channel-preview-loading .str-chat__loading-channels-username {
    border-radius: var(--str-chat__border-radius-xs)
}

.str-chat {
    --str-chat__channel-search-input-color: var(--str-chat__text-color);
    --str-chat__channel-search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__channel-search-input-icon-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__channel-search-input-border-block-start: none;
    --str-chat__channel-search-input-border-block-end: none;
    --str-chat__channel-search-input-border-inline-start: none;
    --str-chat__channel-search-input-border-inline-end: none;
    --str-chat__channel-search-input-wrapper-border-radius: var(--str-chat__border-radius-lg);
    --str-chat__channel-search-input-wrapper-background-color: transparent;
    --str-chat__channel-search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px solid;
    --str-chat__channel-search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px solid;
    --str-chat__channel-search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px solid;
    --str-chat__channel-search-input-wrapper-border-inline-end: var(--str-chat__surface-color) 1px solid;
    --str-chat__channel-search-input-wrapper-active-border-radius: var(--str-chat__border-radius-lg);
    --str-chat__channel-search-input-wrapper-active-background-color: transparent;
    --str-chat__channel-search-input-wrapper-active-border-block-start: var(--str-chat__primary-color) 1px solid;
    --str-chat__channel-search-input-wrapper-active-border-block-end: var(--str-chat__primary-color) 1px solid;
    --str-chat__channel-search-input-wrapper-active-border-inline-start: var( --str-chat__primary-color ) 1px solid;
    --str-chat__channel-search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color) 1px solid;
    --str-chat__channel-search-result-background-color: transparent;
    --str-chat__channel-search-result-border-block-start: none;
    --str-chat__channel-search-result-border-block-end: none;
    --str-chat__channel-search-result-border-inline-start: none;
    --str-chat__channel-search-result-border-inline-end: none;
    --str-chat__channel-search-result-hover-background-color: var( --str-chat__secondary-surface-color );
    --str-chat__channel-search-result-list-color: var(--str-chat__text-color);
    --str-chat__channel-search-result-list-background-color: var(--str-chat__secondary-background-color);
    --str-chat__channel-search-result-list-border-block-start: none;
    --str-chat__channel-search-result-list-border-block-end: none;
    --str-chat__channel-search-result-list-border-inline-start: none;
    --str-chat__channel-search-result-list-border-inline-end: none;
    --str-chat__channel-search-result-list-popup-box-shadow: 0 4px 4px var(--str-chat__box-shadow-color);
    --str-chat__channel-search-results-header-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__channel-search-results-header-background-color: var(--str-chat__background-color);
    --str-chat__channel-search-results-header-border-block-start: none;
    --str-chat__channel-search-results-header-border-block-end: var(--str-chat__surface-color) 1px solid;
    --str-chat__channel-search-results-header-border-inline-start: none;
    --str-chat__channel-search-results-header-border-inline-end: none;
    --str-chat__channel-search-results-loading-indicator-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__channel-search-results-loading-indicator-background-color: var(--str-chat__background-color);
    --str-chat__channel-search-results-loading-indicator-border-block-start: none;
    --str-chat__channel-search-results-loading-indicator-border-block-end: var(--str-chat__surface-color) 1px solid;
    --str-chat__channel-search-results-loading-indicator-border-inline-start: none;
    --str-chat__channel-search-results-loading-indicator-border-inline-end: none;
    --str-chat__channel-search-results-empty-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__channel-search-results-empty-icon-color: var(--str-chat__disabled-color);
    --str-chat__channel-search-results-empty-background-color: var(--str-chat__background-color);
    --str-chat__channel-search-results-empty-border-block-start: none;
    --str-chat__channel-search-results-empty-border-block-end: none;
    --str-chat__channel-search-results-empty-border-inline-start: none;
    --str-chat__channel-search-results-empty-border-inline-end: none
}

.str-chat__channel-search-input--wrapper {
    background: var(--str-chat__channel-search-input-wrapper-background-color);
    color: var(--str-chat__channel-search-input-wrapper-color);
    box-shadow: var(--str-chat__channel-search-input-wrapper-box-shadow);
    border-radius: var(--str-chat__channel-search-input-wrapper-border-radius);
    border-block-start:var(--str-chat__channel-search-input-wrapper-border-block-start);border-block-end: var(--str-chat__channel-search-input-wrapper-border-block-end);
    border-inline-start:var(--str-chat__channel-search-input-wrapper-border-inline-start);border-inline-end: var(--str-chat__channel-search-input-wrapper-border-inline-end)
}

.str-chat__channel-search-input--wrapper input {
    background: var(--str-chat__channel-search-input-background-color);
    color: var(--str-chat__channel-search-input-color);
    box-shadow: var(--str-chat__channel-search-input-box-shadow);
    border-radius: var(--str-chat__channel-search-input-border-radius);
    border-block-start:var(--str-chat__channel-search-input-border-block-start);border-block-end: var(--str-chat__channel-search-input-border-block-end);
    border-inline-start:var(--str-chat__channel-search-input-border-inline-start);border-inline-end: var(--str-chat__channel-search-input-border-inline-end);
    outline: none;
    font: var(--str-chat__subtitle-text)
}

.str-chat__channel-search-input--wrapper .str-chat__channel-search-input--clear-button svg path {
    fill: transparent
}

.str-chat__channel-search-input--wrapper-active {
    background: var(--str-chat__channel-search-input-wrapper-active-background-color);
    color: var(--str-chat__channel-search-input-wrapper-active-color);
    box-shadow: var(--str-chat__channel-search-input-wrapper-active-box-shadow);
    border-radius: var(--str-chat__channel-search-input-wrapper-active-border-radius);
    border-block-start:var(--str-chat__channel-search-input-wrapper-active-border-block-start);border-block-end: var(--str-chat__channel-search-input-wrapper-active-border-block-end);
    border-inline-start:var(--str-chat__channel-search-input-wrapper-active-border-inline-start);border-inline-end: var(--str-chat__channel-search-input-wrapper-active-border-inline-end)
}

.str-chat__channel-search-input--wrapper-active .str-chat__channel-search-input--icon svg path {
    fill: var(--str-chat__primary-color)
}

.str-chat__channel-search-input--wrapper-active .str-chat__channel-search-input--clear-button svg path {
    fill: var(--str-chat__text-low-emphasis-color)
}

.str-chat__channel-search-results-header {
    background: var(--str-chat__channel-search-results-header-background-color);
    color: var(--str-chat__channel-search-results-header-color);
    box-shadow: var(--str-chat__channel-search-results-header-box-shadow);
    border-radius: var(--str-chat__channel-search-results-header-border-radius);
    border-block-start:var(--str-chat__channel-search-results-header-border-block-start);border-block-end: var(--str-chat__channel-search-results-header-border-block-end);
    border-inline-start:var(--str-chat__channel-search-results-header-border-inline-start);border-inline-end: var(--str-chat__channel-search-results-header-border-inline-end);
    font: var(--str-chat__subtitle-text)
}

.str-chat__channel-search-result-list {
    background: var(--str-chat__channel-search-result-list-background-color);
    color: var(--str-chat__channel-search-result-list-color);
    box-shadow: var(--str-chat__channel-search-result-list-box-shadow);
    border-radius: var(--str-chat__channel-search-result-list-border-radius);
    border-block-start:var(--str-chat__channel-search-result-list-border-block-start);border-block-end: var(--str-chat__channel-search-result-list-border-block-end);
    border-inline-start:var(--str-chat__channel-search-result-list-border-inline-start);border-inline-end: var(--str-chat__channel-search-result-list-border-inline-end)
}

.str-chat__channel-search-result-list.popup {
    box-shadow: var(--str-chat__channel-search-result-list-popup-box-shadow)
}

.str-chat__channel-search-result-list .str-chat__channel-search-container-searching {
    background: var(--str-chat__channel-search-results-loading-indicator-background-color);
    color: var(--str-chat__channel-search-results-loading-indicator-color);
    box-shadow: var(--str-chat__channel-search-results-loading-indicator-box-shadow);
    border-radius: var(--str-chat__channel-search-results-loading-indicator-border-radius);
    border-block-start:var(--str-chat__channel-search-results-loading-indicator-border-block-start);border-block-end: var(--str-chat__channel-search-results-loading-indicator-border-block-end);
    border-inline-start:var(--str-chat__channel-search-results-loading-indicator-border-inline-start);border-inline-end: var(--str-chat__channel-search-results-loading-indicator-border-inline-end)
}

.str-chat__channel-search-result-list .str-chat__channel-search-container-empty {
    background: var(--str-chat__channel-search-results-empty-background-color);
    color: var(--str-chat__channel-search-results-empty-color);
    box-shadow: var(--str-chat__channel-search-results-empty-box-shadow);
    border-radius: var(--str-chat__channel-search-results-empty-border-radius);
    border-block-start:var(--str-chat__channel-search-results-empty-border-block-start);border-block-end: var(--str-chat__channel-search-results-empty-border-block-end);
    border-inline-start:var(--str-chat__channel-search-results-empty-border-inline-start);border-inline-end: var(--str-chat__channel-search-results-empty-border-inline-end);
    font: var(--str-chat__subtitle2-medium-text)
}

.str-chat__channel-search-result-list .str-chat__channel-search-container-empty svg path {
    fill: var(--str-chat__channel-search-results-empty-icon-color)
}

.str-chat__channel-search-result-list .str-chat__channel-search-result {
    background: var(--str-chat__channel-search-result-background-color);
    color: var(--str-chat__channel-search-result-color);
    box-shadow: var(--str-chat__channel-search-result-box-shadow);
    border-radius: var(--str-chat__channel-search-result-border-radius);
    border-block-start:var(--str-chat__channel-search-result-border-block-start);border-block-end: var(--str-chat__channel-search-result-border-block-end);
    border-inline-start:var(--str-chat__channel-search-result-border-inline-start);border-inline-end: var(--str-chat__channel-search-result-border-inline-end)
}

.str-chat__channel-search-result-list .str-chat__channel-search-result .str-chat__channel-search-result--display-name {
    font: var(--str-chat__subtitle-medium-text)
}

.str-chat__channel-search-result-list .str-chat__channel-preview-messenger--active {
    background-color: var(--str-chat__channel-preview-active-background-color)
}

.str-chat__channel-search-result-list .str-chat__channel-search-result--focused,.str-chat__channel-search-result-list .str-chat__channel-search-result:hover {
    background-color: var(--str-chat__channel-search-result-hover-background-color)
}

.str-chat {
    --str-chat__edit-message-modal-button-border-radius: none;
    --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
    --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__edit-message-modal-button-background-color: transparent;
    --str-chat__edit-message-modal-button-border-block-start: none;
    --str-chat__edit-message-modal-button-border-block-end: none;
    --str-chat__edit-message-modal-button-border-inline-start: none;
    --str-chat__edit-message-modal-button-border-inline-end: none;
    --str-chat__edit-message-modal-button-box-shadow: none
}

.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-cancel,.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-send {
    background: var(--str-chat__edit-message-modal-button-background-color);
    color: var(--str-chat__edit-message-modal-button-color);
    box-shadow: var(--str-chat__edit-message-modal-button-box-shadow);
    border-radius: var(--str-chat__edit-message-modal-button-border-radius);
    border-block-start:var(--str-chat__edit-message-modal-button-border-block-start);border-block-end: var(--str-chat__edit-message-modal-button-border-block-end);
    border-inline-start:var(--str-chat__edit-message-modal-button-border-inline-start);border-inline-end: var(--str-chat__edit-message-modal-button-border-inline-end);
    font: var(--str-chat__body-medium-text)
}

.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-cancel {
    text-transform: capitalize;
    color: var(--str-chat__edit-message-modal-cancel-button-color)
}

.str-chat__edit-message-form .str-chat__edit-message-form-options .str-chat__edit-message-send {
    text-transform: uppercase;
    color: var(--str-chat__edit-message-modal-send-button-color)
}

.str-chat {
    --str-chat-icon-color: var(--str-chat__text-color)
}

.str-chat__icon {
    color: var(--str-chat-icon-color)
}

.str-chat__icon--error {
    --str-chat-icon-color: var(--str-chat__danger-color)
}

.str-chat {
    --str-chat__image-carousel-stepper-color: var(--str-chat__text-color)
}

@media only screen and (max-device-width: 768px) {
    .str-chat__message .str-chat__attachment-list .str-chat__modal--open .str-chat__modal__inner {
        border-radius:0
    }
}

.str-chat__image-carousel .str-chat__image-carousel-stepper {
    --str-chat-icon-color: var(--str-chat__image-carousel-stepper-color);
    cursor: pointer
}

.str-chat__image-carousel .str-chat__image-carousel-stepper svg path {
    fill: var(--str-chat__image-carousel-stepper-color)
}

.str-chat__link-preview-card .str-chat__link-preview-card__content {
    border-left: 2px solid var(--str-chat__primary-color)
}

.str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-title {
    font: var(--str-chat__body-medium-text)
}

.str-chat__link-preview-card .str-chat__link-preview-card__content .str-chat__link-preview-card__content-description {
    font: var(--str-chat__caption-text)
}

.str-chat__link-preview-card .str-chat__link-preview-card__dismiss-button svg path {
    fill: var(--str-chat__text-low-emphasis-color)
}

.str-chat {
    --str-chat__loading-indicator-color: var(--str-chat__primary-color)
}

.str-chat__loading-indicator svg linearGradient stop:last-child {
    stop-color: var(--str-chat__loading-indicator-color)
}

.str-chat {
    --str-chat__message-border-radius: none;
    --str-chat__message-color: var(--str-chat__text-color);
    --str-chat__message-error-message-color: var(--str-chat__danger-color);
    --str-chat__message-secondary-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__message-link-color: var(--str-chat__primary-color);
    --str-chat__message-mention-color: var(--str-chat__primary-color);
    --str-chat__message-status-color: var(--str-chat__primary-color);
    --str-chat__message-replies-count-color: var(--str-chat__primary-color);
    --str-chat__message-background-color: transparent;
    --str-chat__message-highlighted-background-color: var(--str-chat__message-highlight-color);
    --str-chat__message-border-block-start: none;
    --str-chat__message-border-block-end: none;
    --str-chat__message-border-inline-start: none;
    --str-chat__message-border-inline-end: none;
    --str-chat__message-box-shadow: none;
    --str-chat__message-active-bacground-color: transparent;
    --str-chat__message-options-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__message-options-hover-background-color: var(--str-chat__tertiary-surface-color);
    --str-chat__message-options-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__message-options-active-color: var(--str-chat__primary-color);
    --str-chat__message-bubble-border-radius: var(--str-chat__border-radius-md);
    --str-chat__message-bubble-color: var(--str-chat__text-color);
    --str-chat__message-bubble-background-color: var(--str-chat__secondary-surface-color);
    --str-chat__own-message-bubble-color: var(--str-chat__message-bubble-color);
    --str-chat__own-message-bubble-background-color: var(--str-chat__primary-surface-color);
    --str-chat__quoted-message-bubble-background-color: var(--str-chat__secondary-background-color);
    --str-chat__message-bubble-border-block-start: none;
    --str-chat__message-bubble-border-block-end: none;
    --str-chat__message-bubble-border-inline-start: none;
    --str-chat__message-bubble-border-inline-end: none;
    --str-chat__message-bubble-box-shadow: none;
    --str-chat__deleted-message-border-radius: var(--str-chat__border-radius-md);
    --str-chat__deleted-message-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__deleted-message-background-color: var(--str-chat__secondary-surface-color);
    --str-chat__deleted-message-border-block-start: none;
    --str-chat__deleted-message-border-block-end: none;
    --str-chat__deleted-message-border-inline-start: none;
    --str-chat__deleted-message-border-inline-end: none;
    --str-chat__deleted-message-box-shadow: none;
    --str-chat__system-message-border-radius: 0;
    --str-chat__system-message-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__system-message-background-color: transparent;
    --str-chat__system-message-border-block-start: none;
    --str-chat__system-message-border-block-end: none;
    --str-chat__system-message-border-inline-start: none;
    --str-chat__system-message-border-inline-end: none;
    --str-chat__system-message-box-shadow: none;
    --str-chat__date-separator-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__date-separator-line-color: var(--str-chat__disabled-color);
    --str-chat__date-separator-border-radius: 0;
    --str-chat__date-separator-background-color: transparent;
    --str-chat__date-separator-border-block-start: none;
    --str-chat__date-separator-border-block-end: none;
    --str-chat__date-separator-border-inline-start: none;
    --str-chat__date-separator-border-inline-end: none;
    --str-chat__date-separator-box-shadow: none;
    --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color)
}

.str-chat__message--system {
    background: var(--str-chat__system-message-background-color);
    color: var(--str-chat__system-message-color);
    box-shadow: var(--str-chat__system-message-box-shadow);
    border-radius: var(--str-chat__system-message-border-radius);
    border-block-start:var(--str-chat__system-message-border-block-start);border-block-end: var(--str-chat__system-message-border-block-end);
    border-inline-start:var(--str-chat__system-message-border-inline-start);border-inline-end: var(--str-chat__system-message-border-inline-end);
    font: var(--str-chat__caption-text)
}

.str-chat__date-separator {
    background: var(--str-chat__date-separator-background-color);
    color: var(--str-chat__date-separator-color);
    box-shadow: var(--str-chat__date-separator-box-shadow);
    border-radius: var(--str-chat__date-separator-border-radius);
    border-block-start:var(--str-chat__date-separator-border-block-start);border-block-end: var(--str-chat__date-separator-border-block-end);
    border-inline-start:var(--str-chat__date-separator-border-inline-start);border-inline-end: var(--str-chat__date-separator-border-inline-end);
    font: var(--str-chat__body-text)
}

.str-chat__date-separator-line {
    background-color: var(--str-chat__date-separator-line-color);
    border: none
}

.str-chat__message {
    background: var(--str-chat__message-background-color);
    color: var(--str-chat__message-color);
    box-shadow: var(--str-chat__message-box-shadow);
    border-radius: var(--str-chat__message-border-radius);
    border-block-start:var(--str-chat__message-border-block-start);border-block-end: var(--str-chat__message-border-block-end);
    border-inline-start:var(--str-chat__message-border-inline-start);border-inline-end: var(--str-chat__message-border-inline-end)
}

.str-chat__message a {
    text-decoration: none;
    color: var(--str-chat__message-link-color)
}

.str-chat__message .str-chat__message-mention {
    color: var(--str-chat__message-mention-color);
    font: var(--str-chat__body2-medium-text)
}

.str-chat__message .str-chat__message-bubble {
    background: var(--str-chat__message-bubble-background-color);
    color: var(--str-chat__message-bubble-color);
    box-shadow: var(--str-chat__message-bubble-box-shadow);
    border-radius: var(--str-chat__message-bubble-border-radius);
    border-block-start:var(--str-chat__message-bubble-border-block-start);border-block-end: var(--str-chat__message-bubble-border-block-end);
    border-inline-start:var(--str-chat__message-bubble-border-inline-start);border-inline-end: var(--str-chat__message-bubble-border-inline-end);
    font: var(--str-chat__body2-text)
}

.str-chat__message .str-chat__message--deleted-inner {
    background: var(--str-chat__deleted-message-background-color);
    color: var(--str-chat__deleted-message-color);
    box-shadow: var(--str-chat__deleted-message-box-shadow);
    border-radius: var(--str-chat__deleted-message-border-radius);
    border-block-start:var(--str-chat__deleted-message-border-block-start);border-block-end: var(--str-chat__deleted-message-border-block-end);
    border-inline-start:var(--str-chat__deleted-message-border-inline-start);border-inline-end: var(--str-chat__deleted-message-border-inline-end);
    font: var(--str-chat__body2-text)
}

.str-chat__message.str-chat__message--me .str-chat__message-bubble {
    color: var(--str-chat__own-message-bubble-color);
    background-color: var(--str-chat__own-message-bubble-background-color)
}

.str-chat__message .str-chat__message-options {
    --str-chat-icon-color: var(--str-chat__message-options-color)
}

.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button,.str-chat__message .str-chat__message-options .str-chat__message-reactions-button,.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button {
    background: none;
    border: none;
    border-radius: var(--str-chat__message-options-border-radius);
    color: var(--str-chat__message-options-color)
}

.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button .str-chat__message-action-icon path,.str-chat__message .str-chat__message-options .str-chat__message-reactions-button .str-chat__message-action-icon path,.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button .str-chat__message-action-icon path {
    fill: var(--str-chat__message-options-color)
}

.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button:hover,.str-chat__message .str-chat__message-options .str-chat__message-reactions-button:hover,.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button:hover {
    background-color: var(--str-chat__message-options-hover-background-color)
}

.str-chat__message .str-chat__message-options .str-chat__message-actions-box-button:active .str-chat__message-action-icon path,.str-chat__message .str-chat__message-options .str-chat__message-reactions-button:active .str-chat__message-action-icon path,.str-chat__message .str-chat__message-options .str-chat__message-reply-in-thread-button:active .str-chat__message-action-icon path {
    fill: var(--str-chat__message-options-active-color)
}

.str-chat__message .str-chat__translation-notice button {
    font: var(--str-chat__body2-text);
    color: var(--str-chat__translation-notice-color);
    border: none;
    background: none
}

.str-chat__message .str-chat__translation-notice button:active,.str-chat__message .str-chat__translation-notice button:hover {
    background: var(--str-chat__translation-notice-active-background-color)
}

.str-chat__message .str-chat__custom-message-metadata,.str-chat__message .str-chat__message-metadata {
    color: var(--str-chat__message-secondary-color);
    font: var(--str-chat__caption-text)
}

.str-chat__message .str-chat__custom-message-metadata .str-chat__message-sender-name,.str-chat__message .str-chat__message-metadata .str-chat__message-sender-name {
    font: var(--str-chat__caption-medium-text)
}

.str-chat__message .str-chat__message-status {
    --str-chat-icon-color: var(--str-chat__message-status-color);
    color: var(--str-chat__message-status-color);
    font: var(--str-chat__body-text)
}

.str-chat__message .str-chat__message-status svg path {
    fill: var(--str-chat__message-status-color)
}

.str-chat__message .str-chat__message-replies-count-button-wrapper button {
    border: none;
    background-color: transparent;
    font: var(--str-chat__body-medium-text);
    color: var(--str-chat__message-replies-count-color)
}

.str-chat__message .str-chat__message--error-message {
    color: var(--str-chat__message-error-message-color);
    font: var(--str-chat__caption-text)
}

.str-chat__message .str-chat__message-error-icon {
    --str-chat-icon-color: var(--str-chat__message-error-message-color)
}

.str-chat__message .str-chat__message-error-icon svg #background {
    fill: var(--str-chat__message-error-message-color)
}

.str-chat__message--highlighted {
    transition: background-color .1s ease-out;
    background-color: var(--str-chat__message-highlighted-background-color)
}

.str-chat__li:hover:not(:has(.str-chat__reaction-list:hover,.str-chat__modal--open)) {
    background-color: var(--str-chat__message-active-bacground-color)
}

@supports not selector(:has(a,b)) {
    .str-chat__li:hover {
        background-color: var(--str-chat__message-active-bacground-color)
    }
}

.str-chat__li--single .str-chat__message--other .str-chat__message-bubble,.str-chat__li--top .str-chat__message--other .str-chat__message-bubble {
    border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius)/6)
}

.str-chat__li--single .str-chat__message--me .str-chat__message-bubble,.str-chat__li--top .str-chat__message--me .str-chat__message-bubble {
    border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius)/6)
}

.str-chat__li--bottom .str-chat__message--other .str-chat__message-bubble,.str-chat__li--middle .str-chat__message--other .str-chat__message-bubble {
    border-start-start-radius: calc(var(--str-chat__message-bubble-border-radius)/6);
    border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius)/6)
}

.str-chat__li--bottom .str-chat__message--me .str-chat__message-bubble,.str-chat__li--middle .str-chat__message--me .str-chat__message-bubble {
    border-start-end-radius: calc(var(--str-chat__message-bubble-border-radius)/6);
    border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius)/6)
}

.str-chat__message-with-thread-link.str-chat__message--other .str-chat__message-bubble {
    border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius)/6)
}

.str-chat__message-with-thread-link.str-chat__message--me .str-chat__message-bubble {
    border-end-end-radius: calc(var(--str-chat__message-bubble-border-radius)/6)
}

.str-chat__quoted-message-preview {
    background: var(--str-chat__message-background-color);
    color: var(--str-chat__message-color);
    box-shadow: var(--str-chat__message-box-shadow);
    border-radius: var(--str-chat__message-border-radius);
    border-block-start:var(--str-chat__message-border-block-start);border-block-end: var(--str-chat__message-border-block-end);
    border-inline-start:var(--str-chat__message-border-inline-start);border-inline-end: var(--str-chat__message-border-inline-end)
}

.str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
    background: var(--str-chat__message-bubble-background-color);
    color: var(--str-chat__message-bubble-color);
    box-shadow: var(--str-chat__message-bubble-box-shadow);
    border-radius: var(--str-chat__message-bubble-border-radius);
    border-block-start:var(--str-chat__message-bubble-border-block-start);border-block-end: var(--str-chat__message-bubble-border-block-end);
    border-inline-start:var(--str-chat__message-bubble-border-inline-start);border-inline-end: var(--str-chat__message-bubble-border-inline-end);
    background-color: var(--str-chat__quoted-message-bubble-background-color);
    border-end-start-radius: calc(var(--str-chat__message-bubble-border-radius)/6)
}

.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble {
    background-color: var(--str-chat__message-bubble-background-color)
}

.str-chat__unread-messages-separator {
    background-color: var(--str-chat__secondary-surface-color);
    color: var(--str-chat__text-low-emphasis-color);
    text-transform: uppercase;
    font: var(--str-chat__caption-strong-text)
}

.str-chat__unread-messages-notification {
    --str-chat-icon-color: var(--str-chat__on-primary-color);
    background-color: var(--str-chat__text-low-emphasis-color);
    border-radius: 1.125rem
}

.str-chat__unread-messages-notification button {
    cursor: pointer;
    color: var(--str-chat__on-primary-color);
    border: none;
    background-color: transparent
}

.str-chat__unread-messages-notification button:first-of-type {
    font: var(--str-chat__caption-text)
}

.str-chat {
    --str-chat__message-actions-box-border-radius: var(--str-chat__border-radius-sm);
    --str-chat__message-actions-box-color: var(--str-chat__text-color);
    --str-chat__message-actions-box-background-color: var(--str-chat__secondary-background-color);
    --str-chat__message-actions-box-border-block-start: none;
    --str-chat__message-actions-box-border-block-end: none;
    --str-chat__message-actions-box-border-inline-start: none;
    --str-chat__message-actions-box-border-inline-end: none;
    --str-chat__message-actions-box-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
    --str-chat__message-actions-box-item-border-radius: 0;
    --str-chat__message-actions-box-item-color: var(--str-chat__text-color);
    --str-chat__message-actions-box-item-background-color: transparent;
    --str-chat__message-actions-box-item-hover-background-color: var( --str-chat__secondary-surface-color );
    --str-chat__message-actions-box-item-border-block-start: none;
    --str-chat__message-actions-box-item-border-block-end: none;
    --str-chat__message-actions-box-item-border-inline-start: none;
    --str-chat__message-actions-box-item-border-inline-end: none;
    --str-chat__message-actions-box-item-box-shadow: none
}

.str-chat__message-actions-box {
    background: var(--str-chat__message-actions-box-background-color);
    color: var(--str-chat__message-actions-box-color);
    box-shadow: var(--str-chat__message-actions-box-box-shadow);
    border-radius: var(--str-chat__message-actions-box-border-radius);
    border-block-start:var(--str-chat__message-actions-box-border-block-start);border-block-end: var(--str-chat__message-actions-box-border-block-end);
    border-inline-start:var(--str-chat__message-actions-box-border-inline-start);border-inline-end: var(--str-chat__message-actions-box-border-inline-end)
}

.str-chat__message-actions-box .str-chat__message-actions-list-item-button {
    background: var(--str-chat__message-actions-box-item-background-color);
    color: var(--str-chat__message-actions-box-item-color);
    box-shadow: var(--str-chat__message-actions-box-item-box-shadow);
    border-radius: var(--str-chat__message-actions-box-item-border-radius);
    border-block-start:var(--str-chat__message-actions-box-item-border-block-start);border-block-end: var(--str-chat__message-actions-box-item-border-block-end);
    border-inline-start:var(--str-chat__message-actions-box-item-border-inline-start);border-inline-end: var(--str-chat__message-actions-box-item-border-inline-end);
    font: var(--str-chat__subtitle-text)
}

.str-chat__message-actions-box .str-chat__message-actions-list-item-button:hover {
    background-color: var(--str-chat__message-actions-box-item-hover-background-color)
}

.str-chat {
    --str-chat__message-bounce-edit-button-color: var(--str-chat__primary-color);
    --str-chat__message-bounce-send-button-color: var(--str-chat__primary-color);
    --str-chat__message-bounce-delete-button-color: var(--str-chat__primary-color);
    --str-chat__message-bounce-button-background-color: transparent;
    --str-chat__message-bounce-button-border-block-start: none;
    --str-chat__message-bounce-button-border-block-end: none;
    --str-chat__message-bounce-button-border-inline-start: none;
    --str-chat__message-bounce-button-border-inline-end: none;
    --str-chat__message-bounce-button-box-shadow: none
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-delete,.str-chat__message-bounce-prompt .str-chat__message-bounce-edit,.str-chat__message-bounce-prompt .str-chat__message-bounce-send {
    background: var(--str-chat__message-bounce-button-background-color);
    color: var(--str-chat__message-bounce-button-color);
    box-shadow: var(--str-chat__message-bounce-button-box-shadow);
    border-radius: var(--str-chat__message-bounce-button-border-radius);
    border-block-start:var(--str-chat__message-bounce-button-border-block-start);border-block-end: var(--str-chat__message-bounce-button-border-block-end);
    border-inline-start:var(--str-chat__message-bounce-button-border-inline-start);border-inline-end: var(--str-chat__message-bounce-button-border-inline-end);
    font: var(--str-chat__body-medium-text)
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-edit {
    color: var(--str-chat__message-bounce-edit-button-color)
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-send {
    color: var(--str-chat__message-bounce-send-button-color)
}

.str-chat__message-bounce-prompt .str-chat__message-bounce-delete {
    color: var(--str-chat__message-bounce-delete-button-color)
}

.str-chat {
    --str-chat__message-input-border-radius: 0;
    --str-chat__message-input-color: var(--str-chat__text-color);
    --str-chat__message-input-background-color: var(--str-chat__secondary-background-color);
    --str-chat__message-input-border-block-start: none;
    --str-chat__message-input-border-block-end: none;
    --str-chat__message-input-border-inline-start: none;
    --str-chat__message-input-border-inline-end: none;
    --str-chat__message-input-box-shadow: none;
    --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
    --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
    --str-chat__dropzone-container-backdrop-filter: blur(3px);
    --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md);
    --str-chat__message-textarea-color: var(--str-chat__text-color);
    --str-chat__message-textarea-background-color: transparent;
    --str-chat__message-textarea-border-block-start: 1px solid var(--str-chat__surface-color);
    --str-chat__message-textarea-border-block-end: 1px solid var(--str-chat__surface-color);
    --str-chat__message-textarea-border-inline-start: 1px solid var(--str-chat__surface-color);
    --str-chat__message-textarea-border-inline-end: 1px solid var(--str-chat__surface-color);
    --str-chat__message-textarea-box-shadow: none;
    --str-chat__message-send-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__message-send-color: var(--str-chat__primary-color);
    --str-chat__message-send-background-color: transparent;
    --str-chat__message-send-border-block-start: 0;
    --str-chat__message-send-border-block-end: 0;
    --str-chat__message-send-border-inline-start: 0;
    --str-chat__message-send-border-inline-end: 0;
    --str-chat__message-send-box-shadow: none;
    --str-chat__message-send-disabled-color: var(--str-chat__disabled-color);
    --str-chat__message-send-disabled-background-color: var(--str-chat__disabled-color);
    --str-chat__start-recording-audio-button-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__start-recording-audio-button-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__start-recording-audio-button-background-color: transparent;
    --str-chat__start-recording-audio-button-border-block-start: 0;
    --str-chat__start-recording-audio-button-border-block-end: 0;
    --str-chat__start-recording-audio-button-border-inline-start: 0;
    --str-chat__start-recording-audio-button-border-inline-end: 0;
    --str-chat__start-recording-audio-button-box-shadow: none;
    --str-chat__start-recording-audio-button-disabled-color: var(--str-chat__disabled-color);
    --str-chat__start-recording-audio-button-disabled-background-color: transparent;
    --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__message-input-tools-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__message-input-tools-background-color: transparent;
    --str-chat__message-input-tools-border-block-start: 0;
    --str-chat__message-input-tools-border-block-end: 0;
    --str-chat__message-input-tools-border-inline-start: 0;
    --str-chat__message-input-tools-border-inline-end: 0;
    --str-chat__message-input-tools-box-shadow: none;
    --str-chat__message-input-not-allowed-color: var(--str-chat__disabled-color);
    --str-chat__cooldown-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__cooldown-color: var(--str-chat__on-disabled-color);
    --str-chat__cooldown-background-color: var(--str-chat__disabled-color);
    --str-chat__cooldown-border-block-start: 0;
    --str-chat__cooldown-border-block-end: 0;
    --str-chat__cooldown-border-inline-start: 0;
    --str-chat__cooldown-border-inline-end: 0;
    --str-chat__cooldown-box-shadow: none
}

.str-chat__message-input {
    background: var(--str-chat__message-input-background-color);
    color: var(--str-chat__message-input-color);
    box-shadow: var(--str-chat__message-input-box-shadow);
    border-radius: var(--str-chat__message-input-border-radius);
    border-block-start:var(--str-chat__message-input-border-block-start);border-block-end: var(--str-chat__message-input-border-block-end);
    border-inline-start:var(--str-chat__message-input-border-inline-start);border-inline-end: var(--str-chat__message-input-border-inline-end)
}

.str-chat__message-input .str-chat__dropzone-container {
    background-color: var(--str-chat__dropzone-container-background-color);
    color: var(--str-chat__dropzone-container-color);
    -webkit-backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
    backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
    font: var(--str-chat__subtitle-text)
}

.str-chat__message-input .str-chat__file-input-container {
    --str-chat-icon-color: var(--str-chat__message-input-tools-color);
    background: var(--str-chat__message-input-tools-background-color);
    color: var(--str-chat__message-input-tools-color);
    box-shadow: var(--str-chat__message-input-tools-box-shadow);
    border-radius: var(--str-chat__message-input-tools-border-radius);
    border-block-start:var(--str-chat__message-input-tools-border-block-start);border-block-end: var(--str-chat__message-input-tools-border-block-end);
    border-inline-start:var(--str-chat__message-input-tools-border-inline-start);border-inline-end: var(--str-chat__message-input-tools-border-inline-end)
}

.str-chat__message-input .str-chat__file-input-container svg path {
    fill: var(--str-chat__message-input-tools-color)
}

.str-chat__message-input .str-chat__attachment-preview-image-error svg path {
    fill: var(--str-chat__primary-color)
}

.str-chat__message-input .str-chat__message-textarea-container {
    background: var(--str-chat__message-textarea-background-color);
    color: var(--str-chat__message-textarea-color);
    box-shadow: var(--str-chat__message-textarea-box-shadow);
    border-radius: var(--str-chat__message-textarea-border-radius);
    border-block-start:var(--str-chat__message-textarea-border-block-start);border-block-end: var(--str-chat__message-textarea-border-block-end);
    border-inline-start:var(--str-chat__message-textarea-border-inline-start);border-inline-end: var(--str-chat__message-textarea-border-inline-end)
}

.str-chat__message-input .str-chat__message-textarea-container .str-chat__message-textarea {
    resize: none;
    border: none;
    color: var(--str-chat__message-textarea-color);
    background-color: transparent;
    box-shadow: none;
    outline: none;
    font: var(--str-chat__subtitle-text)
}

.str-chat__message-input .str-chat__send-button {
    --str-chat-icon-color: var(--str-chat__message-send-color);
    background: var(--str-chat__message-send-background-color);
    color: var(--str-chat__message-send-color);
    box-shadow: var(--str-chat__message-send-box-shadow);
    border-radius: var(--str-chat__message-send-border-radius);
    border-block-start:var(--str-chat__message-send-border-block-start);border-block-end: var(--str-chat__message-send-border-block-end);
    border-inline-start:var(--str-chat__message-send-border-inline-start);border-inline-end: var(--str-chat__message-send-border-inline-end)
}

.str-chat__message-input .str-chat__send-button svg path {
    fill: var(--str-chat__message-send-color)
}

.str-chat__message-input .str-chat__send-button:disabled {
    --str-chat-icon-color: var(--str-chat__message-send-disabled-color);
    background-color: transparent
}

.str-chat__message-input .str-chat__send-button:disabled svg path {
    fill: var(--str-chat__message-send-disabled-color)
}

.str-chat__message-input .str-chat__start-recording-audio-button {
    background: var(--str-chat__start-recording-audio-button-background-color);
    color: var(--str-chat__start-recording-audio-button-color);
    box-shadow: var(--str-chat__start-recording-audio-button-box-shadow);
    border-radius: var(--str-chat__start-recording-audio-button-border-radius);
    border-block-start:var(--str-chat__start-recording-audio-button-border-block-start);border-block-end: var(--str-chat__start-recording-audio-button-border-block-end);
    border-inline-start:var(--str-chat__start-recording-audio-button-border-inline-start);border-inline-end: var(--str-chat__start-recording-audio-button-border-inline-end)
}

.str-chat__message-input .str-chat__start-recording-audio-button:disabled {
    background-color: var(--str-chat__message-send-disabled-background-color)
}

.str-chat__message-input .str-chat__message-input-cooldown {
    background: var(--str-chat__cooldown-background-color);
    color: var(--str-chat__cooldown-color);
    box-shadow: var(--str-chat__cooldown-box-shadow);
    border-radius: var(--str-chat__cooldown-border-radius);
    border-block-start:var(--str-chat__cooldown-border-block-start);border-block-end: var(--str-chat__cooldown-border-block-end);
    border-inline-start:var(--str-chat__cooldown-border-inline-start);border-inline-end: var(--str-chat__cooldown-border-inline-end);
    font: var(--str-chat__subtitle-medium-text)
}

.str-chat__message-input .str-chat__message-input-not-allowed {
    color: var(--str-chat__message-input-not-allowed-color);
    font: var(--str-chat__subtitle-text)
}

.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-reply-to-message {
    font: var(--str-chat__subtitle-medium-text)
}

.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-remove {
    background-color: transparent;
    border: none
}

.str-chat__message-input .str-chat__quoted-message-preview-header .str-chat__quoted-message-remove svg path {
    fill: var(--str-chat__message-input-tools-color)
}

.str-chat__message-input .str-chat__recording-permission-denied-notification {
    background-color: var(--str-chat__text-color);
    border-radius: var(--str-chat__border-radius-md);
    color: var(--str-chat__background-color)
}

.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__dismiss-button,.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__heading {
    font: var(--str-chat__subtitle2-medium-text)
}

.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__message {
    font: var(--str-chat__subtitle-text)
}

.str-chat__message-input .str-chat__recording-permission-denied-notification .str-chat__recording-permission-denied-notification__dismiss-button {
    background: none;
    border: none;
    color: var(--str-chat__background-color);
    cursor: pointer;
    text-transform: uppercase
}

.str-chat {
    --str-chat__message-list-border-radius: 0;
    --str-chat__message-list-color: var(--str-chat__text-color);
    --str-chat__message-list-background-color: var(--str-chat__background-color);
    --str-chat__message-list-box-shadow: none;
    --str-chat__message-list-border-block-start: none;
    --str-chat__message-list-border-block-end: none;
    --str-chat__message-list-border-inline-start: none;
    --str-chat__message-list-border-inline-end: none;
    --str-chat__jump-to-latest-message-border-radius: var(--str-chat__circle-fab-border-radius);
    --str-chat__jump-to-latest-message-color: var(--str-chat__circle-fab-color);
    --str-chat__jump-to-latest-message-background-color: var(--str-chat__circle-fab-background-color);
    --str-chat__jump-to-latest-message-pressed-background-color: var( --str-chat__circle-fab-pressed-background-color );
    --str-chat__jump-to-latest-message-box-shadow: var(--str-chat__circle-fab-box-shadow);
    --str-chat__jump-to-latest-message-border-block-start: var( --str-chat__circle-fab-border-block-start );
    --str-chat__jump-to-latest-message-border-block-end: var(--str-chat__circle-fab-border-block-end);
    --str-chat__jump-to-latest-message-border-inline-start: var( --str-chat__circle-fab-border-inline-start );
    --str-chat__jump-to-latest-message-border-inline-end: var( --str-chat__circle-fab-border-inline-end );
    --str-chat__jump-to-latest-message-unread-count-background-color: var( --str-chat__jump-to-latest-message-color );
    --str-chat__jump-to-latest-message-unread-count-color: var( --str-chat__jump-to-latest-message-background-color );
    --str-chat__thread-head-start-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__thread-head-start-border-block-end-color: var(--str-chat__surface-color)
}

.str-chat__list {
    background: var(--str-chat__message-list-background-color);
    color: var(--str-chat__message-list-color);
    box-shadow: var(--str-chat__message-list-box-shadow);
    border-radius: var(--str-chat__message-list-border-radius);
    border-block-start:var(--str-chat__message-list-border-block-start);border-block-end: var(--str-chat__message-list-border-block-end);
    border-inline-start:var(--str-chat__message-list-border-inline-start);border-inline-end: var(--str-chat__message-list-border-inline-end)
}

.str-chat__list .str-chat__parent-message-li {
    border-block-end:1px solid var(--str-chat__thread-head-start-border-block-end-color)}

.str-chat__list .str-chat__parent-message-li .str-chat__thread-start {
    color: var(--str-chat__thread-head-start-color);
    font: var(--str-chat__subtitle-text)
}

.str-chat__jump-to-latest-message {
    --str-chat-icon-color: var(--str-chat__jump-to-latest-message-unread-count-background-color)
}

.str-chat__jump-to-latest-message .str-chat__circle-fab {
    background: var(--str-chat__jump-to-latest-message-background-color);
    color: var(--str-chat__jump-to-latest-message-color);
    box-shadow: var(--str-chat__jump-to-latest-message-box-shadow);
    border-radius: var(--str-chat__jump-to-latest-message-border-radius);
    border-block-start:var(--str-chat__jump-to-latest-message-border-block-start);border-block-end: var(--str-chat__jump-to-latest-message-border-block-end);
    border-inline-start:var(--str-chat__jump-to-latest-message-border-inline-start);border-inline-end: var(--str-chat__jump-to-latest-message-border-inline-end)
}

.str-chat__jump-to-latest-message .str-chat__circle-fab svg path {
    fill: var(--str-chat__jump-to-latest-message-color)
}

.str-chat__jump-to-latest-message .str-chat__circle-fab:active {
    background-color: var(--str-chat__jump-to-latest-message-pressed-background-color)
}

.str-chat__jump-to-latest-message .str-chat__circle-fab .str-chat__jump-to-latest-unread-count {
    background-color: var(--str-chat__jump-to-latest-message-unread-count-background-color);
    color: var(--str-chat__jump-to-latest-message-unread-count-color);
    border-radius: var(--str-chat__jump-to-latest-message-border-radius);
    font: var(--str-chat__caption-text)
}

.str-chat {
    --str-chat__virtual-list-border-radius: 0;
    --str-chat__virtual-list-color: var(--str-chat__text-color);
    --str-chat__virtual-list-background-color: var(--str-chat__background-color);
    --str-chat__virtual-list-box-shadow: none;
    --str-chat__virtual-list-border-block-start: none;
    --str-chat__virtual-list-border-block-end: none;
    --str-chat__virtual-list-border-inline-start: none;
    --str-chat__virtual-list-border-inline-end: none
}

.str-chat__virtual-list {
    background: var(--str-chat__virtual-list-background-color);
    color: var(--str-chat__virtual-list-color);
    box-shadow: var(--str-chat__virtual-list-box-shadow);
    border-radius: var(--str-chat__virtual-list-border-radius);
    border-block-start:var(--str-chat__virtual-list-border-block-start);border-block-end: var(--str-chat__virtual-list-border-block-end);
    border-inline-start:var(--str-chat__virtual-list-border-inline-start);border-inline-end: var(--str-chat__virtual-list-border-inline-end)
}

.str-chat__virtual-list .str-chat__parent-message-li {
    border-block-end:1px solid var(--str-chat__thread-head-start-border-block-end-color)}

.str-chat__virtual-list .str-chat__parent-message-li .str-chat__thread-start {
    color: var(--str-chat__thread-head-start-color);
    font: var(--str-chat__subtitle-text)
}

.str-chat {
    --str-chat__message-reactions-border-radius: none;
    --str-chat__message-reactions-color: var(--str-chat__text-color);
    --str-chat__message-reactions-background-color: transparent;
    --str-chat__message-reactions-border-block-start: none;
    --str-chat__message-reactions-border-block-end: none;
    --str-chat__message-reactions-border-inline-start: none;
    --str-chat__message-reactions-border-inline-end: none;
    --str-chat__message-reactions-box-shadow: none;
    --str-chat__message-reaction-border-radius: var(--str-chat__border-radius-xs);
    --str-chat__message-reaction-color: var(--str-chat__text-color);
    --str-chat__message-reaction-background-color: var(--str-chat__tertiary-surface-color);
    --str-chat__message-reaction-border-block-start: none;
    --str-chat__message-reaction-border-block-end: none;
    --str-chat__message-reaction-border-inline-start: none;
    --str-chat__message-reaction-border-inline-end: none;
    --str-chat__message-reaction-box-shadow: none;
    --str-chat__own-message-reaction-color: var(--str-chat__text-color);
    --str-chat__own-message-reaction-background-color: var( --str-chat__primary-surface-color-low-emphasis );
    --str-chat__messsage-reactions-details--selected-color: solid var(--str-chat__primary-color)
}

.str-chat__message-reactions-container .str-chat__message-reactions {
    background: var(--str-chat__message-reactions-background-color);
    color: var(--str-chat__message-reactions-color);
    box-shadow: var(--str-chat__message-reactions-box-shadow);
    border-radius: var(--str-chat__message-reactions-border-radius);
    border-block-start:var(--str-chat__message-reactions-border-block-start);border-block-end: var(--str-chat__message-reactions-border-block-end);
    border-inline-start:var(--str-chat__message-reactions-border-inline-start);border-inline-end: var(--str-chat__message-reactions-border-inline-end)
}

.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction {
    background: var(--str-chat__message-reaction-background-color);
    color: var(--str-chat__message-reaction-color);
    box-shadow: var(--str-chat__message-reaction-box-shadow);
    border-radius: var(--str-chat__message-reaction-border-radius);
    border-block-start:var(--str-chat__message-reaction-border-block-start);border-block-end: var(--str-chat__message-reaction-border-block-end);
    border-inline-start:var(--str-chat__message-reaction-border-inline-start);border-inline-end: var(--str-chat__message-reaction-border-inline-end);
    font: var(--str-chat__caption-text)
}

.str-chat__message-reactions-container .str-chat__message-reactions .str-chat__message-reaction.str-chat__message-reaction-own {
    color: var(--str-chat__own-message-reaction-color);
    background-color: var(--str-chat__own-message-reaction-background-color)
}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reaction-type {
    border-block-end:solid transparent}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reaction-type--selected {
    border-block-end:var(--str-chat__messsage-reactions-details--selected-color)}

.str-chat__message-reactions-details .str-chat__message-reactions-details-reacting-user {
    font: var(--str-chat__subtitle-text)
}

.str-chat {
    --str-chat__message-reactions-options-border-radius: var(--str-chat__border-radius-circle);
    --str-chat__message-reactions-options-color: var(--str-chat__text-color);
    --str-chat__message-reactions-options-background-color: var( --str-chat__secondary-background-color );
    --str-chat__message-reactions-options-border-block-start: none;
    --str-chat__message-reactions-options-border-block-end: none;
    --str-chat__message-reactions-options-border-inline-start: none;
    --str-chat__message-reactions-options-border-inline-end: none;
    --str-chat__message-reactions-options-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
    --str-chat__message-reactions-option-border-radius: var(--str-chat__border-radius-md);
    --str-chat__message-reactions-option-color: var(--str-chat__text-color);
    --str-chat__message-reactions-option-background-color: var( --str-chat__secondary-background-color );
    --str-chat__message-reactions-option-hover-background-color: var( --str-chat__primary-surface-color );
    --str-chat__message-reactions-option-selected-background-color: var( --str-chat__primary-color-low-emphasis );
    --str-chat__message-reactions-option-border-block-start: none;
    --str-chat__message-reactions-option-border-block-end: none;
    --str-chat__message-reactions-option-border-inline-start: none;
    --str-chat__message-reactions-option-border-inline-end: none;
    --str-chat__message-reactions-option-box-shadow: none
}

.str-chat__reaction-selector .str-chat__message-reactions-options {
    background: var(--str-chat__message-reactions-options-background-color);
    color: var(--str-chat__message-reactions-options-color);
    box-shadow: var(--str-chat__message-reactions-options-box-shadow);
    border-radius: var(--str-chat__message-reactions-options-border-radius);
    border-block-start:var(--str-chat__message-reactions-options-border-block-start);border-block-end: var(--str-chat__message-reactions-options-border-block-end);
    border-inline-start:var(--str-chat__message-reactions-options-border-inline-start);border-inline-end: var(--str-chat__message-reactions-options-border-inline-end)
}

.str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option {
    background: var(--str-chat__message-reactions-option-background-color);
    color: var(--str-chat__message-reactions-option-color);
    box-shadow: var(--str-chat__message-reactions-option-box-shadow);
    border-radius: var(--str-chat__message-reactions-option-border-radius);
    border-block-start:var(--str-chat__message-reactions-option-border-block-start);border-block-end: var(--str-chat__message-reactions-option-border-block-end);
    border-inline-start:var(--str-chat__message-reactions-option-border-inline-start);border-inline-end: var(--str-chat__message-reactions-option-border-inline-end)
}

.str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option:hover {
    background-color: var(--str-chat__message-reactions-option-hover-background-color)
}

.str-chat__reaction-selector .str-chat__message-reactions-options .str-chat__message-reactions-option.str-chat__message-reactions-option-selected {
    background-color: var(--str-chat__message-reactions-option-selected-background-color)
}

.str-chat {
    --str-chat__modal-border-radius: var(--str-chat__border-radius-sm);
    --str-chat__modal-color: var(--str-chat__text-color);
    --str-chat__modal-background-color: var(--str-chat__secondary-background-color);
    --str-chat__modal-overlay-color: var(--str-chat__secondary-overlay-color);
    --str-chat__modal-overlay-backdrop-filter: blur(3px);
    --str-chat__modal-border-block-start: none;
    --str-chat__modal-border-block-end: none;
    --str-chat__modal-border-inline-start: none;
    --str-chat__modal-border-inline-end: none;
    --str-chat__modal-box-shadow: none;
    --str-chat__modal-close-icon-background: var(--str-chat__text-low-emphasis-color);
    --str-chat__modal-close-icon-color: var(--str-chat__on-disabled-color)
}

.str-chat__modal {
    background-color: var(--str-chat__modal-overlay-color);
    -webkit-backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter);
    backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter)
}

.str-chat__modal .str-chat__modal__inner {
    background: var(--str-chat__modal-background-color);
    color: var(--str-chat__modal-color);
    box-shadow: var(--str-chat__modal-box-shadow);
    border-radius: var(--str-chat__modal-border-radius);
    border-block-start:var(--str-chat__modal-border-block-start);border-block-end: var(--str-chat__modal-border-block-end);
    border-inline-start:var(--str-chat__modal-border-inline-start);border-inline-end: var(--str-chat__modal-border-inline-end)
}

.str-chat__modal .str-chat__modal__close-button {
    --str-chat-icon-color: var(--str-chat__modal-close-icon-color);
    background: none;
    border: none
}

.str-chat__modal .str-chat__modal__close-button .str-chat__icon {
    background-color: var(--str-chat__modal-close-icon-background);
    border-radius: 999px
}

.str-chat__modal .str-chat__modal__close-button svg path {
    fill: var(--str-chat__modal-close-icon-color)
}

.str-chat__modal .str-chat__modal__close-button svg circle,.str-chat__modal .str-chat__modal__close-button svg rect {
    fill: var(--str-chat__modal-close-icon-background)
}

.str-chat__message-attachment--card .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner,.str-chat__message-attachment--gallery .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner,.str-chat__message-attachment--image .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner {
    background-color: transparent;
    width: unset;
    height: unset;
    padding: 0
}

.str-chat__message-attachment--card .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner img,.str-chat__message-attachment--gallery .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner img,.str-chat__message-attachment--image .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner img {
    max-width: unset;
    max-height: calc(100vh - 80px);
    cursor: default
}

.str-chat {
    --str-chat__message-notification-background-color: var(--str-chat__primary-color);
    --str-chat__message-notification-border-block-start: none;
    --str-chat__message-notification-border-block-end: none;
    --str-chat__message-notification-border-inline-start: none;
    --str-chat__message-notification-border-inline-end: none;
    --str-chat__message-notification-border-radius: 50px;
    --str-chat__message-notification-box-shadow: none;
    --str-chat__message-notification-color: var(--str-chat__on-primary-color)
}

.str-chat__message-notification {
    background: var(--str-chat__message-notification-background-color);
    color: var(--str-chat__message-notification-color);
    box-shadow: var(--str-chat__message-notification-box-shadow);
    border-radius: var(--str-chat__message-notification-border-radius);
    border-block-start:var(--str-chat__message-notification-border-block-start);border-block-end: var(--str-chat__message-notification-border-block-end);
    border-inline-start:var(--str-chat__message-notification-border-inline-start);border-inline-end: var(--str-chat__message-notification-border-inline-end);
    font: var(--str-chat__caption-text);
    cursor: pointer
}

.str-chat {
    --str-chat__notification-list-border-radius: none;
    --str-chat__notification-list-color: var(--str-chat__notification-list-text-color);
    --str-chat__notification-list-background-color: transparent;
    --str-chat__notification-list-border-block-start: none;
    --str-chat__notification-list-border-block-end: none;
    --str-chat__notification-list-border-inline-start: none;
    --str-chat__notification-list-border-inline-end: none;
    --str-chat__notification-list-box-shadow: none
}

.str-chat__list-notifications {
    background: var(--str-chat__notification-list-background-color);
    color: var(--str-chat__notification-list-color);
    box-shadow: var(--str-chat__notification-list-box-shadow);
    border-radius: var(--str-chat__notification-list-border-radius);
    border-block-start:var(--str-chat__notification-list-border-block-start);border-block-end: var(--str-chat__notification-list-border-block-end);
    border-inline-start:var(--str-chat__notification-list-border-inline-start);border-inline-end: var(--str-chat__notification-list-border-inline-end)
}

.str-chat {
    --str-chat__notification-border-radius: var(--str-chat__border-radius-sm);
    --str-chat__notification-color: var(--str-chat__opaque-surface-text-color);
    --str-chat__notification-background-color: var(--str-chat__opaque-surface-background-color);
    --str-chat__notification-border-block-start: none;
    --str-chat__notification-border-block-end: none;
    --str-chat__notification-border-inline-start: none;
    --str-chat__notification-border-inline-end: none;
    --str-chat__notification-box-shadow: 0 0 8px var(--str-chat__box-shadow-color)
}

.str-chat__notification {
    background: var(--str-chat__notification-background-color);
    color: var(--str-chat__notification-color);
    box-shadow: var(--str-chat__notification-box-shadow);
    border-radius: var(--str-chat__notification-border-radius);
    border-block-start:var(--str-chat__notification-border-block-start);border-block-end: var(--str-chat__notification-border-block-end);
    border-inline-start:var(--str-chat__notification-border-inline-start);border-inline-end: var(--str-chat__notification-border-inline-end);
    font: var(--str-chat__subtitle-text)
}

.str-chat {
    --str-chat__thread-border-radius: 0;
    --str-chat__thread-color: var(--str-chat__text-color);
    --str-chat__thread-background-color: var(--str-chat__secondary-background-color);
    --str-chat__thread-border-block-start: none;
    --str-chat__thread-border-block-end: none;
    --str-chat__thread-border-inline-start: 1px solid var(--str-chat__surface-color);
    --str-chat__thread-border-inline-end: none;
    --str-chat__thread-box-shadow: none;
    --str-chat__thread-header-border-radius: 0;
    --str-chat__thread-header-color: var(--str-chat__text-color);
    --str-chat__thread-header-background-color: var(--str-chat__secondary-background-color);
    --str-chat__thread-header-border-block-start: none;
    --str-chat__thread-header-border-block-end: none;
    --str-chat__thread-header-border-inline-start: none;
    --str-chat__thread-header-border-inline-end: none;
    --str-chat__thread-header-box-shadow: none;
    --str-chat__thread-header-info-color: var(--str-chat__text-low-emphasis-color)
}

.str-chat__thread-container {
    background: var(--str-chat__thread-background-color);
    color: var(--str-chat__thread-color);
    box-shadow: var(--str-chat__thread-box-shadow);
    border-radius: var(--str-chat__thread-border-radius);
    border-block-start:var(--str-chat__thread-border-block-start);border-block-end: var(--str-chat__thread-border-block-end);
    border-inline-start:var(--str-chat__thread-border-inline-start);border-inline-end: var(--str-chat__thread-border-inline-end)
}

.str-chat__thread-container .str-chat__thread-header {
    background: var(--str-chat__thread-header-background-color);
    color: var(--str-chat__thread-header-color);
    box-shadow: var(--str-chat__thread-header-box-shadow);
    border-radius: var(--str-chat__thread-header-border-radius);
    border-block-start:var(--str-chat__thread-header-border-block-start);border-block-end: var(--str-chat__thread-header-border-block-end);
    border-inline-start:var(--str-chat__thread-header-border-inline-start);border-inline-end: var(--str-chat__thread-header-border-inline-end)
}

.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-name,.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-title {
    font: var(--str-chat__subtitle-medium-text)
}

.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-channel-name,.str-chat__thread-container .str-chat__thread-header .str-chat__thread-header-subtitle {
    font: var(--str-chat__body-text);
    color: var(--str-chat__thread-header-info-color)
}

.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button {
    background-color: transparent;
    border: none
}

.str-chat__thread-container .str-chat__thread-header .str-chat__close-thread-button svg path {
    fill: var(--str-chat__thread-color)
}

.str-chat {
    --str-chat__tooltip-border-radius: var(--str-chat__border-radius-xs);
    --str-chat__tooltip-color: var(--str-chat__text-color);
    --str-chat__tooltip-background-color: var(--str-chat__secondary-background-color);
    --str-chat__tooltip-border-block-start: none;
    --str-chat__tooltip-border-block-end: none;
    --str-chat__tooltip-border-inline-start: none;
    --str-chat__tooltip-border-inline-end: none;
    --str-chat__tooltip-box-shadow: 0 0 20px var(--str-chat__box-shadow-color)
}

.str-chat__tooltip {
    background: var(--str-chat__tooltip-background-color);
    color: var(--str-chat__tooltip-color);
    box-shadow: var(--str-chat__tooltip-box-shadow);
    border-radius: var(--str-chat__tooltip-border-radius);
    border-block-start:var(--str-chat__tooltip-border-block-start);border-block-end: var(--str-chat__tooltip-border-block-end);
    border-inline-start:var(--str-chat__tooltip-border-inline-start);border-inline-end: var(--str-chat__tooltip-border-inline-end);
    font: var(--str-chat__caption-text)
}

.str-chat__tooltip:after {
    background-color: var(--str-chat__tooltip-background-color)
}

.str-chat {
    --str-chat__typing-indicator-border-radius: none;
    --str-chat__typing-indicator-color: var(--str-chat__text-low-emphasis-color);
    --str-chat__typing-indicator-background-color: var(--str-chat__overlay-color);
    --str-chat__typing-indicator-border-block-start: none;
    --str-chat__typing-indicator-border-block-end: none;
    --str-chat__typing-indicator-border-inline-start: none;
    --str-chat__typing-indicator-border-inline-end: none;
    --str-chat__typing-indicator-box-shadow: none;
    --str-chat__typing-indicator-dot-background-color: var(--str-chat__text-color)
}

.str-chat__typing-indicator {
    background: var(--str-chat__typing-indicator-background-color);
    color: var(--str-chat__typing-indicator-color);
    box-shadow: var(--str-chat__typing-indicator-box-shadow);
    border-radius: var(--str-chat__typing-indicator-border-radius);
    border-block-start:var(--str-chat__typing-indicator-border-block-start);border-block-end: var(--str-chat__typing-indicator-border-block-end);
    border-inline-start:var(--str-chat__typing-indicator-border-inline-start);border-inline-end: var(--str-chat__typing-indicator-border-inline-end)
}

.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot {
    border-radius: 999px;
    animation: dotFlashing 1s infinite alternate;
    background-color: var(--str-chat__typing-indicator-dot-background-color)
}

.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:first-child {
    animation-delay: 0s
}

.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(2) {
    animation-delay: .5s
}

.str-chat__typing-indicator .str-chat__typing-indicator__dots .str-chat__typing-indicator__dot:nth-child(3) {
    animation-delay: 1s
}

@keyframes dotFlashing {
    0% {
        opacity: 1
    }

    50% {
        opacity: .6
    }

    to {
        opacity: .2
    }
}