/*-------------------------------------------------*/
/* Global config */

@font-face {
    font-family: "emoji";

    src: local('Apple Color Emoji'),
    local('Android Emoji'),
    local('Segoe UI Emoji'),
    local('Noto Color Emoji'),
    local(EmojiSymbols),
    local(Symbola);

    unicode-range: U+231A-231B, U+23E9-23EC, U+23F0, U+23F3, U+25FD-25FE, U+2614-2615, U+2648-2653, U+267F, U+2693, U+26A1, U+26AA-26AB, U+26BD-26BE, U+26C4-26C5, U+26CE, U+26D4, U+26EA, U+26F2-26F3, U+26F5, U+26FA, U+26FD, U+2705, U+270A-270B, U+2728, U+274C, U+274E, U+2753-2755, U+2757, U+2795-2797, U+27B0, U+27BF, U+2B1B-2B1C, U+2B50, U+2B55, U+FE0F, U+1F004, U+1F0CF, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F21A, U+1F22F, U+1F232-1F236, U+1F238-1F23A, U+1F250-1F251, U+1F300-1F320, U+1F32D-1F335, U+1F337-1F393, U+1F3A0-1F3CA, U+1F3CF-1F3D3, U+1F3E0-1F3F0, U+1F3F4, U+1F3F8-1F43E, U+1F440, U+1F442-1F4FC, U+1F4FF-1F53D, U+1F54B-1F567, U+1F57A, U+1F595-1F596, U+1F5A4, U+1F5FB-1F64F, U+1F680-1F6CC, U+1F6D0-1F6D2, U+1F6D5-1F6D7, U+1F6DC-1F6DF, U+1F6EB-1F6EC, U+1F6F4-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1FA7C, U+1FA80-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8;

    size-adjust: normal;
    descent-override: normal;
    ascent-override: normal;
}

:root {

    font-family: Helvetica, "emoji";
    font-size: 15px;

    --wsym-aspect-ratio: 0.46;

    --header-size-in-px: 93px;
    --footer-size-in-px: 80px;

    /* Default values */
    --message-max_width: calc(90% - 10px);
    --double-check-display: none;
    --check-display: none;
    --message-quote-display: none;
    --message-fowarded-display: none;
    --message-deleted-display: none;
    --message-tail-visibility-right: visible;
    --message-tail-visibility-left: visible;
    --battery-number-display: none;
}

p {
    padding: 0;
    margin: 0;
}

ul {
    list-style-type: none;
}

/*-------------------------------------------------*/
/* Setup colors for light mode */

[theme="light"] {
    --color-bg-header-footer: #f6f6f6;
    --color-ft-header-footer: #000000;
    --color-bg-messagebox: #ebe6e1;
    --color-bg-message_r: #dcf8c7;
    --color-bg-message_l: #ffffff;
    --color-bg-day: #dbdfeb;
    --color-ft-message: #000000;
    --color-ft-message-day: #414350;
    --color-ft-message-info: rgba(0, 0, 0, 0.5);
    --color-icons: #53a6fd;
    --color-message-name: orange;
    --shadow-box-display: 0px 2px 2px rgba(0, 0, 0, 0.1);
    --color-signal-empty: #cbc7bc;
    --color-ft-quote: rgba(0, 0, 0, 0.7);
    --default-background: url("https://mdz-messenger.s3.sa-east-1.amazonaws.com/conversations/default/light_background.png");
    --color-border-footer-input: #dedfe0;
    --audio-image: url("https://mdz-messenger.s3.sa-east-1.amazonaws.com/conversations/default/audio_content_light.png");
    --audio-image-lighter: url("https://mdz-messenger.s3.sa-east-1.amazonaws.com/conversations/default/audio_content_lighter_light.png");
    --audio-thumb-color: #6E7C64;
    --color-bg-group-details: #ffffff;
}

/*-------------------------------------------------*/
/* Setup colors for dark mode */

[theme="dark"] {
    --color-bg-header-footer: #1a1b1c;
    --color-ft-header-footer: #ffffff;
    --color-bg-messagebox: #0b0b0d;
    --color-bg-message_r: #005046;
    --color-bg-message_l: #363638;
    --color-bg-day: #1d1d1d;
    --color-ft-message: #ffffff;
    --color-ft-message-day: #a5a5a5;
    --color-ft-message-info: rgba(255, 255, 255, 0.5);
    --color-icons: #53a6fd;
    --color-message-name: pink;
    --shadow-box-display: 0px 2px 2px rgba(0, 0, 0, 0.1);
    --color-signal-empty: #484849;
    --color-ft-quote: rgba(255, 255, 255, 0.7);
    --default-background: url("https://mdz-messenger.s3.sa-east-1.amazonaws.com/conversations/default/dark_background.png");
    --color-border-footer-input: #4b4b4d;
    --audio-image: url("https://mdz-messenger.s3.sa-east-1.amazonaws.com/conversations/default/audio_content_dark.png");
    --audio-image-lighter: url("https://mdz-messenger.s3.sa-east-1.amazonaws.com/conversations/default/audio_content_lighter_dark.png");
    --audio-thumb-color: white;
    --color-bg-group-details: #2c2c2c;
}

.wsym-aspect-ratio-container {
    background-color: transparent;

    position: absolute;
    left: 0;
    top: 0;

    height: 100%;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

/*-------------------------------------------------*/
/* Main layout of the application */

.wsym-app-container {

    background-color: var(--color-ft-message);

    box-sizing: border-box;

    border-radius: 40px;
    border: solid gray 4px;

    display: grid;
    grid-template-rows: var(--header-size-in-px) auto var(--footer-size-in-px);
    grid-template-columns: auto;
    grid-template-areas:
        "wsym-header"
        "wsym-chatbox"
        "wsym-footer";

    overflow: hidden;

    position: relative;

    height: 100%;
    width: auto;
    aspect-ratio: var(--wsym-aspect-ratio);

    /*
    height: 100%;
    width: 404px;
    aspect-ratio: 1;
    */
}

@media (aspect-ratio < 0.46) {
    .wsym-app-container {
        height: auto;
        width: 100%;
    }
}

/*-------------------------------------------------*/
/* Header configuration */

.wsym-header {
    grid-area: wsym-header;
    background-color: var(--color-bg-header-footer);
    color: var(--color-ft-header-footer);

    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Row0 configuration (time, notch, internet, etc) */

.wsym-header-row0 {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 30% 1fr 30%;
    grid-template-areas:
        "wsym-header-time wsym-header-notch wsym-connection-internet-battery";

    height: 50%;
    width: 100%;
}

.wsym-header-row0 > div {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.wsym-header-time {
    grid-area: wsym-header-time;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    font-weight: normal;
    font-family: headerFont;
}

.wsym-header-notch {
    grid-area: wsym-header-notch;
    z-index: 4;
}

@media (max-width: 300px) {
    .wsym-header-notch svg {
        display: none;
    }
}

@media (max-height: 650px) {
    .wsym-header-notch svg {
        display: none;
    }
}

.wsym-connection-internet-battery {
    grid-area: wsym-connection-internet-battery;
    gap: 8px;

    position: relative;
    left: -10px;
}

/* wifi, 4G and 3G connection configuration */

[connection="wifi1"] {
    --connection-wifi1-display: block;
    --connection-wifi2-display: none;
    --connection-wifi3-display: none;
    --connection-4g-display: none;
    --connection-3g-display: none;
    --connection-e-display: none;
}

[connection="wifi2"] {
    --connection-wifi1-display: none;
    --connection-wifi2-display: block;
    --connection-wifi3-display: none;
    --connection-4g-display: none;
    --connection-3g-display: none;
    --connection-e-display: none;
}

[connection="wifi3"] {
    --connection-wifi1-display: none;
    --connection-wifi2-display: none;
    --connection-wifi3-display: block;
    --connection-4g-display: none;
    --connection-3g-display: none;
    --connection-e-display: none;
}

[connection="e"] {
    --connection-wifi1-display: none;
    --connection-wifi2-display: none;
    --connection-wifi3-display: none;
    --connection-4g-display: none;
    --connection-3g-display: none;
    --connection-e-display: block;
}

[connection="3g"] {
    --connection-wifi1-display: none;
    --connection-wifi2-display: none;
    --connection-wifi3-display: none;
    --connection-4g-display: none;
    --connection-3g-display: block;
    --connection-e-display: none;
}

[connection="4g"] {
    --connection-wifi1-display: none;
    --connection-wifi2-display: none;
    --connection-wifi3-display: none;
    --connection-4g-display: block;
    --connection-3g-display: none;
    --connection-e-display: none;
}

/* wifi, 4G and 3G connection toggle */

.wsym-connection-e {
    display: var(--connection-e-display);
}

.wsym-connection-3g {
    display: var(--connection-3g-display);
}

.wsym-connection-4g {
    display: var(--connection-4g-display);
}

.wsym-connection-wifi1 {
    display: var(--connection-wifi1-display);
}

.wsym-connection-wifi2 {
    display: var(--connection-wifi2-display);
}

.wsym-connection-wifi3 {
    display: var(--connection-wifi3-display);
}

.wsym-connection-wifi-path1 {
    fill: var(--color-ft-message);
}

.wsym-connection-wifi-path2 {
    fill: var(--color-signal-empty)
}

/* signal level connection toggle */

[signal-level="1"] {
    --color-signal1: var(--color-ft-message);
    --color-signal2: var(--color-signal-empty);
    --color-signal3: var(--color-signal-empty);
    --color-signal4: var(--color-signal-empty);
}

[signal-level="2"] {
    --color-signal1: var(--color-ft-message);
    --color-signal2: var(--color-ft-message);
    --color-signal3: var(--color-signal-empty);
    --color-signal4: var(--color-signal-empty);
}

[signal-level="3"] {
    --color-signal1: var(--color-ft-message);
    --color-signal2: var(--color-ft-message);
    --color-signal3: var(--color-ft-message);
    --color-signal4: var(--color-signal-empty);
}

[signal-level="4"] {
    --color-signal1: var(--color-ft-message);
    --color-signal2: var(--color-ft-message);
    --color-signal3: var(--color-ft-message);
    --color-signal4: var(--color-ft-message);
}

.swym_connection_signal1 {
    fill: var(--color-signal1);
}

.swym_connection_signal2 {
    fill: var(--color-signal2);
}

.swym_connection_signal3 {
    fill: var(--color-signal3);
}

.swym_connection_signal4 {
    fill: var(--color-signal4);
}

/* signal level connection toggle */

.wsym-battery-container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: "wsym-battery-container";
}

[battery-number="true"] {
    --battery-number-display: block;
}

[battery-number="false"] {
    --battery-number-display: none;
}

@font-face {
    font-family: headerFont;
    src: url("https://mdz-messenger.s3.sa-east-1.amazonaws.com/conversations/default/SF_Pro_-_Semibold.otf");
}

.wsym-battery-container p {
    display: var(--battery-number-display);
    grid-area: wsym-battery-container;
    color: var(--color-bg-group-details);
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    padding-right: 3px;
    font-family: headerFont;
}

[battery-level="0"] {
    --battery-level0-display: block;
    --battery-level20-display: none;
    --battery-level25-display: none;
    --battery-level50-display: none;
    --battery-level75-display: none;
    --battery-level100-display: none;
}

[battery-level="20"] {
    --battery-level0-display: none;
    --battery-level20-display: block;
    --battery-level25-display: none;
    --battery-level50-display: none;
    --battery-level75-display: none;
    --battery-level100-display: none;
}

[battery-level="25"] {
    --battery-level0-display: none;
    --battery-level20-display: none;
    --battery-level25-display: block;
    --battery-level50-display: none;
    --battery-level75-display: none;
    --battery-level100-display: none;
}

[battery-level="50"] {
    --battery-level0-display: none;
    --battery-level20-display: none;
    --battery-level25-display: none;
    --battery-level50-display: block;
    --battery-level75-display: none;
    --battery-level100-display: none;
}

[battery-level="75"] {
    --battery-level0-display: none;
    --battery-level20-display: none;
    --battery-level25-display: none;
    --battery-level50-display: none;
    --battery-level75-display: block;
    --battery-level100-display: none;
}

[battery-level="100"] {
    --battery-level0-display: none;
    --battery-level20-display: none;
    --battery-level25-display: none;
    --battery-level50-display: none;
    --battery-level75-display: none;
    --battery-level100-display: block;
}

.wsym-battery-0 {
    grid-area: wsym-battery-container;
    display: var(--battery-level0-display);
}

.wsym-battery-20 {
    grid-area: wsym-battery-container;
    display: var(--battery-level20-display);

}

.wsym-battery-25 {
    grid-area: wsym-battery-container;
    display: var(--battery-level25-display);

}

.wsym-battery-50 {
    grid-area: wsym-battery-container;
    display: var(--battery-level50-display);
}

.wsym-battery-75 {
    grid-area: wsym-battery-container;
    display: var(--battery-level75-display);
}

.wsym-battery-100 {
    grid-area: wsym-battery-container;
    display: var(--battery-level100-display);
}

/* Row1 configuration (profile, name, etc) */

.wsym-header-row1 {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 15% 1fr 30%;
    grid-template-areas:
        "wsym-header-arrow wsym-header-profile-and-name wsym-header-video-and-phone";

    height: 50%;
    width: 100%;
}

.wsym-header-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    grid-area: wsym-header-arrow;

    z-index: 4;
}

.wsym-header-profile-and-name {
    grid-area: wsym-header-profile-and-name;

    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 50px 1fr;
    grid-template-areas:
        "wsym-header-img wsym-header-name"
        "wsym-header-img wsym-header-status";
}

.wsym-header-img-container {
    grid-area: wsym-header-img;

    display: flex;
    justify-content: center;
    align-items: center;
}

.wsym-header-img {
    border-radius: 50%;
    width: 33px;
    height: 33px;
    background-color: transparent;
    font-size: 9px;
    object-fit: cover;
}

.wsym-header-name {
    grid-area: wsym-header-name;

    font-weight: bold;
    font-size: 14.5px;
    color: var(--color-ft-message);

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

    max-width: 100%;
    overflow: hidden;
}

.wsym-header-status {
    grid-area: wsym-header-status;

    font-size: 11px;
    color: var(--color-ft-message-info);

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

    padding-top: 0px;

    max-width: 100%;
    overflow: hidden;
}

.wsym-header-name p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.wsym-header-status p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.wsym-header-video-and-phone {
    grid-area: wsym-header-video-and-phone;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20%;
}

/*-------------------------------------------------*/
/* Chatbox configuration */

.wsym-message-box {
    grid-area: wsym-chatbox;
    background-color: var(--color-bg-messagebox);
    background-image: var(--default-background);
    background-size: cover;
    background-position: center;

    margin: 0;
    padding: 10px;
    overflow-y: scroll;
    scrollbar-width: none;

    display: flex;
    flex-direction: column;
    gap: 5px;

    z-index: 0;
}

.wsym-message-box-shadow {
    grid-area: wsym-chatbox;

    width: 100%;
    height: 100%;

    pointer-events: none;

    box-shadow: inset 0px 11px 8px -10px rgba(0, 0, 0, 0.2),
    inset 0px -11px 8px -10px rgba(0, 0, 0, 0.2);

    z-index: 1;

}

/*-------------------------------------------------*/
/* Setup message bubble main layout */

[sender="me"] {
    --message-layout-direction: flex-end;
    --message-bg-color: var(--color-bg-message_r);
    --message-tail-display-right: block;
    --message-tail-display-left: none;
    --message-tail-align: row;
    --message-tail-offset-left: -2px;
    --audio-image-order: 1;
    --microphone-position: 72%;
}

[sender="other"] {
    --message-layout-direction: flex-start;
    --message-bg-color: var(--color-bg-message_l);
    --message-tail-display-right: none;
    --message-tail-display-left: block;
    --message-tail-align: row-reverse;
    --message-tail-offset-left: 2px;
    --audio-image-order: 4;
    --microphone-position: -10%;
}

[tail="false"] {
    --message-tail-visibility-right: hidden;
    --message-tail-visibility-left: hidden;
}

[tail="true"] {
    --message-tail-visibility-right: visible;
    --message-tail-visibility-left: visible;
}


.wsym-message-item {
    display: flex;
    flex-direction: column;
}

.wsym-message {
    color: var(--color-ft-message);
    align-self: var(--message-layout-direction);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;

    max-width: var(--message-max_width);
}

.wsym-message-container {
    display: flex;
    flex-direction: var(--message-tail-align);
    align-items: flex-end;
    justify-content: flex-end;

    max-width: 100%;
}

/*-------------------------------------------------*/
/* Setup Message sender image */

.wsym-message-sender-image {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px;
}

/*-------------------------------------------------*/
/* Setup Message body */

.wsym-message[video-content] {
    max-width: calc(var(--message-max_width) * 0.9);
}

.wsym-message[image-content] {
    max-width: calc(var(--message-max_width) * 0.9);
}

.wsym-message-body {
    position: relative;

    overflow: hidden;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    padding: 8px;
    gap: 4px;

    background-color: var(--message-bg-color);
    border-radius: 12px;

    box-shadow: var(--shadow-box-display);

    max-width: 100%;
}


/*-------------------------------------------------*/
/* Setup Message tail */

.wsym-message-tail {
    display: flex;
    align-items: flex-end;

    position: relative;
    top: -5px;
    left: var(--message-tail-offset-left);

    color: var(--message-bg-color);
}

/* Toggle right and left tail depending of the message position */

.wsym-message-tail-left {
    display: var(--message-tail-display-left);
    visibility: var(--message-tail-visibility-left);
}

.wsym-message-tail-right {
    display: var(--message-tail-display-right);
    visibility: var(--message-tail-visibility-right);
}

/*-------------------------------------------------*/
/* Setup Message info */

.wsym-message-info {

    align-self: flex-end;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;

    color: var(--color-ft-message-info);
    font-size: 11px;
    font-weight: normal;
}

/* Setup Message check and double check toggle */

[check="sent"] {
    --double-check-display: none;
    --check-display: block;
    --check-color: var(--color-ft-message-info);
    --image-check-color: #ffffff;
}


[check="delivered"] {
    --double-check-display: block;
    --check-display: none;
    --check-color: var(--color-ft-message-info);
    --image-check-color: #ffffff;
}

[check="read"] {
    --double-check-display: block;
    --check-display: none;
    --check-color: #34b7f1;
    --image-check-color: #34b7f1;
}

.wsym-message-double-check {
    display: var(--double-check-display);
}

.wsym-message-double-check path {
    fill: var(--check-color)
}

.wsym-message-simple-check {
    display: var(--check-display);
}

.wsym-message-simple-check path {
    fill: var(--check-color)
}

/*-------------------------------------------------*/
/* Setup fowarded message header */

[forwarded="true"] {
    --message-fowarded-display: block;
}

[forwarded="false"] {
    --message-fowarded-display: none;
}

/* Toggle fowarded header on and off */

.wsym-message-fowarded {
    display: var(--message-fowarded-display);
}

.wsym-message-fowarded-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;

    color: var(--color-ft-message-info);
    font-size: 12px;
    font-style: italic;
}

/*-------------------------------------------------*/
/* Setup fowarded deleted */

[deleted="true"] {
    --message-deleted-display: block;
}

[deleted="false"] {
    --message-deleted-display: none;
}

.wsym-message-deleted {
    display: var(--message-deleted-display);
}

/*-------------------------------------------------*/
/* Setup Quote message header */

/* quotte toggle */

[quote="message"] {
    --message-quote-display: flex;
    --message-quote-image-display: none;
    --message-qupte-content-display: block;
    --message-qupte-content-image-display: none;
    --message-qupte-content-video-display: none;
    --message-qupte-content-sticker-display: none;
    --message-qupte-content-audio-display: none;
    --message-qupte-content-gif-display: none;
}

[quote="image"] {
    --message-quote-display: flex;
    --message-quote-image-display: block;
    --message-qupte-content-display: none;
    --message-qupte-content-image-display: flex;
    --message-qupte-content-video-display: none;
    --message-qupte-content-sticker-display: none;
    --message-qupte-content-audio-display: none;
    --message-qupte-content-gif-display: none;

}

[quote="video"] {
    --message-quote-display: flex;
    --message-quote-image-display: block;
    --message-qupte-content-display: none;
    --message-qupte-content-image-display: none;
    --message-qupte-content-video-display: flex;
    --message-qupte-content-sticker-display: none;
    --message-qupte-content-audio-display: none;
    --message-qupte-content-gif-display: none;

}

[quote="sticker"] {
    --message-quote-display: flex;
    --message-quote-image-display: block;
    --message-qupte-content-display: none;
    --message-qupte-content-image-display: none;
    --message-qupte-content-video-display: none;
    --message-qupte-content-sticker-display: flex;
    --message-qupte-content-audio-display: none;
    --message-qupte-content-gif-display: none;
}

[quote="audio"] {
    --message-quote-display: flex;
    --message-quote-image-display: none;
    --message-qupte-content-display: none;
    --message-qupte-content-image-display: none;
    --message-qupte-content-video-display: none;
    --message-qupte-content-sticker-display: none;
    --message-qupte-content-audio-display: flex;
    --message-qupte-content-gif-display: none;
}

[quote="gif"] {
    --message-quote-display: flex;
    --message-quote-image-display: none;
    --message-qupte-content-display: none;
    --message-qupte-content-image-display: none;
    --message-qupte-content-video-display: none;
    --message-qupte-content-sticker-display: none;
    --message-qupte-content-audio-display: none;
    --message-qupte-content-gif-display: flex;
}


.wsym-message-quote {

    position: relative;

    display: var(--message-quote-display);
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background-color: rgba(0, 0, 0, 0.1);

    overflow: hidden;
    border-radius: 8px;

    margin: -4px;
    width: calc(100% + 8px)

}

.wsym-message-quote-color {

    position: absolute;
    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background-color: var(--color-message-name);
}

.wsym-message-quote-image {
    display: var(--message-quote-image-display);

    position: relative;
    height: 68px;
    width: 68px;

    object-fit: cover;

    align-self: flex-end;
    justify-self: center;
}

/* name and content of the quoted message config */

.wsym-message-quote-name-and-content {
    padding: 14px;
    color: var(--color-ft-quote);
    font-size: 13px;

    align-self: flex-start;
    flex-grow: 2;

}

.wsym-message-quote-name {
    padding-bottom: 8px;
    font-weight: bold;
    color: var(--color-message-name);
}

/* quote message, photo, video and sticker toggle */

.wsym-message-quote-content-image {
    display: var(--message-qupte-content-image-display);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.wsym-message-quote-content-video {
    display: var(--message-qupte-content-video-display);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.wsym-message-quote-content-sticker {
    display: var(--message-qupte-content-sticker-display);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.wsym-message-quote-content-audio {
    display: var(--message-qupte-content-audio-display);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.wsym-message-quote-content-gif {
    display: var(--message-qupte-content-gif-display);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.wsym-message-quote-content {
    display: var(--message-qupte-content-display);
}

/*-------------------------------------------------*/
/* Setup Video message */

.wsym-message-video-container {
    position: relative;
    border-radius: 8px;

    margin: -4px;
    width: calc(100% + 8px);

    overflow: hidden;

    background-color: grey;
}

.wsym-message-video {
    display: block;
    width: 100%;
    object-fit: contain;
}


.wsym-message-video-container button {
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    background-color: rgba(255, 255, 255, 0.8);

    border: 0;
    border-radius: 50%;

    width: 50px;
    height: 50px;

    color: black;
}

.wsym-message-video-container button:hover {
    background-color: rgba(255, 255, 255, 0.6);
}


.wsym-message-video-container button svg {
    position: absolute;
    left: calc(50% - 6px);
    top: calc(50% - 8px);
}

.wsym-message-video-container button svg path {
    fill: rgba(0, 0, 0, 0.8);
}

.wsym-message-video-container button:hover svg path {
    fill: rgba(0, 0, 0, 0.6);
}

/*-------------------------------------------------*/
/* Setup Image message */

.wsym-message-image-container {
    position: relative;

    border-radius: 8px;
    margin: -4px;
    width: calc(100% + 8px);

    overflow: hidden;

}

.wsym-message-image {
    display: block;
    width: 100%;
    min-height: 30px;
    object-fit: cover;
}


.wsym-message-image-shadow {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    /*background-color: rgba(255, 0, 255, 0.1);*/
    background: linear-gradient(-20deg, rgba(0, 0, 0, 0.7), 20%, transparent);

    pointer-events: none;
}

.wsym-message-info-image {
    position: absolute;
    bottom: 0;
    right: 0;

    align-self: flex-end;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;

    color: white;
    font-size: 11px;
    font-weight: normal;

    padding: 0px 8px 4px 8px;
}

.wsym-message-info-image path {
    fill: var(--image-check-color);
}

/*-------------------------------------------------*/
/* Setup message sticker */


.wsym-sticker-container {
    display: flex;
    flex-direction: var(--message-tail-align);
    align-items: flex-end;
    justify-content: flex-end;

    max-width: 100%;
    margin: 0;
    padding: 0;
}

.wsym-sticker-body {

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;
    gap: 4px;

    background-color: transparent;

    max-width: 100%;

}

.wsym-sticker {
    width: 150px;
    height: 100%;
    object-fit: cover;
}

.wsym-sticker-name {
    font-weight: bold;
    font-size: 13px;
    color: var(--color-message-name);

    background-color: var(--message-bg-color);
    padding: 8px;
    border-radius: 12px;
}

.wsym-sticker-sender-image {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px;
    visibility: hidden;
}

.wsym-sticker-tail {
    visibility: hidden;
}

/* Toggle name header on and off */

.wsym-message-name {
    font-weight: bold;
    font-size: 13px;
    color: var(--color-message-name);
}


/*-------------------------------------------------*/
/* Setup message content */

.wsym-message-content {
}

/*-------------------------------------------------*/
/* Setup message day indicator */

.wsym-message-day {
    align-self: center;
    justify-self: center;

    background-color: var(--color-bg-day);
    border-radius: 8px;

    padding: 3px 24px 3px 24px;

    text-align: center;
    color: var(--color-ft-message-day);

    font-weight: bold;
    font-size: 12px;

    box-shadow: var(--shadow-box-display);
}


/*-------------------------------------------------*/
/* Setup message event indicator */

.wsym-message-event {
    align-self: center;
    justify-self: center;

    background-color: var(--color-bg-day);
    border-radius: 8px;

    padding: 3px 24px 3px 24px;

    text-align: center;
    color: var(--color-ft-message-day);

    font-weight: normal;
    font-size: 12px;

    box-shadow: var(--shadow-box-display);
}

/*-------------------------------------------------*/
/* Setup footer */

.wsym-footer {
    grid-area: wsym-footer;
    background-color: var(--color-bg-header-footer);

    display: grid;
    grid-template-rows: 1fr 5px;
    grid-template-columns: 15% 1fr 26%;
    grid-template-areas:
        "wsym-footer-plus wsym-footer-input wsym-footer-camera"
        "asd asd asd";


    width: 100%;
    height: 100%;
}

.wsym-footer > div {
    padding-top: 12px;

    width: 100%;
    height: 100%;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.wsym-footer-plus {

    grid-area: wsym-footer-plus;
    position: relative;
    top: 4px;
}

.wsym-footer-input {
    grid-area: wsym-footer-input;
}

.wsym-footer-camera {
    grid-area: wsym-footer-camera;
    gap: 20%;
    position: relative;
    top: 4px;
}

.wsym-footer-input > div {
    width: 100%;
    height: 30px;
    background-color: var(--color-bg-message_l);
    border-radius: 15px;
    border: solid var(--color-border-footer-input) 1px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-right: 8px;

    position: relative;
}

.wsym-footer-homebar {
    position: absolute;

    bottom: 6px;
    left: calc(50% - 67px);

    width: 134px;
    height: 5px;
    border-radius: 100px;
    background-color: var(--color-ft-message);

    z-index: 4;
}

/*-------------------------------------------------*/
/* Audio message */
.wsym-message-audio-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    position: relative;

    overflow: visible;

    user-select: none;
    -webkit-user-select: none;
}

.wsym-audio-image {
    background-color: transparent;
    order: var(--audio-image-order);
    position: relative;

    overflow: visible;
}

.wsym-audio-image img {
    width: 33px;
    height: 33px;
    border-radius: 50%;
}

.wsym-audio-image svg {
    position: absolute;
    left: var(--microphone-position);
    top: 50%;

    background-color: var(--message-bg-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    padding: 2px;
}

.wsym-audio-image svg path {
    fill: var(--audio-thumb-color)
}


.wsym-audio-button {
    background-color: transparent;
    order: 2;
}

.wsym-audio-button svg path {
    fill: var(--audio-thumb-color);
}

.wsym-audio-button svg rect {
    fill: var(--audio-thumb-color);
}

.wsym-message-audio-container button {
    border: 0;
    background-color: transparent;
}

.wsym-audio-player {
    width: auto;
    height: auto;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: "wsym-player";

    position: relative;
    order: 3;
}

.wsym-audio-duration {
    position: absolute;
    bottom: -20px;
    left: 0;
    color: var(--audio-thumb-color);
    user-select: none;
    font-size: 12px;
    color: var(--color-ft-message-info);
}

.wsym-thumb {
    --thumb-size: 14px;

    position: absolute;
    left: calc(0% - calc(var(--thumb-size) / 2));
    top: calc(50% - calc(var(--thumb-size) / 2));

    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;

    background-color: var(--audio-thumb-color);
}

.wsym-track-background {
    grid-area: wsym-player;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

.wsym-track-background img {
    width: 100%;
    height: 100%;

    content: var(--audio-image-lighter);
}

.wsym-progress-background {
    grid-area: wsym-player;
    clip-path: rect(auto 0% auto auto);
    pointer-events: none;
    user-select: none;
}

.wsym-progress-background img {
    width: 100%;
    height: 100%;
    content: var(--audio-image);
}

.wsym-message-audio-play {
    display: block;
}

.wsym-message-audio-pause {
    display: none;
}

/*-------------------------------------------------*/
/* Fullscreen container */
.wsym-fullscreen-container {
    background-color: rgba(0, 0, 0, 0.85);

    position: absolute;
    left: 0px;
    top: 0px;

    width: 100%;
    height: 100%;
    z-index: 3;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    color: var(--color-ft-message);
}

.wsym-fullscreen-container-header {
    height: var(--header-size-in-px);
    width: 100%;
    background-color: var(--color-bg-header-footer);

    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.wsym-fullscreen-container-footer {
    width: 100%;
    background-color: transparent;

    height: calc(var(--footer-size-in-px) - 20px);

    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;

    background-color: transparent;
}

.wsym-fullscreen-container-empty {
    width: 100%;
    height: 20px;

    background-color: transparent;
}

.wsym-fullscreen-container-footer p {
    padding: 12px;
    color: white;
}

.wsym-fullscreen-container img {
    width: 100%;
    height: calc(100% - var(--header-size-in-px) - var(--footer-size-in-px));
    object-fit: contain;
}

.wsym-fullscreen-container video {
    width: 100%;
    height: calc(100% - var(--header-size-in-px) - var(--footer-size-in-px));
    object-fit: contain;
}

.wsym-fullscreen-name-and-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 6px;
}

.wsym-fullscreen-name {
    font-size: 14px;
}

.wsym-fullscreen-time {
    font-size: 11px;
}

/*-------------------------------------------------*/
/* Goup details container */

.wsym-group-details-container {
    background-color: rgba(255, 0, 255, 0.35);
    background-color: var(--color-bg-header-footer);

    position: absolute;
    left: 0px;
    top: 0px;

    width: 100%;
    height: 100%;
    z-index: 3;

    overflow: hidden;

    display: none;
    flex-direction: column;
    align-items: center;

    color: var(--color-ft-message);

}

.wsym-group-info {
    background-color: var(--color-bg-header-footer);
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
}

.wsym-group-info img {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    object-fit: cover;
}

.wsym-group-info h1 {
    text-align: center;

    font-size: 24px;
    font-weight: bold;

    padding: 0;
    margin: 0;
    padding-top: 14px;
}

.wsym-group-info p {
    text-align: center;

    font-size: 15px;
    color: var(--color-ft-message-info);

    padding: 0;
    margin: 0;
}

.wsym-members-info {
    background-color: var(--color-bg-group-details);

    width: 86%;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    padding: 0;
    margin: 0;

    margin-top: 40px;
    margin-bottom: 10px;
}

.wsym-member {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    border-top: solid #8c8c8c80 1px;

    padding-top: 8px;
    padding-bottom: 8px;

    position: relative;
}

.wsym-member img {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    padding-left: 8px;
    padding-right: 8px;
}

.wsym-members-info .wsym-member-text {
    color: var(--color-ft-message);
    font-size: 16;
    font-weight: normal;
    text-align: left;
}

.wsym-members-info .wsym-admin-text {
    color: var(--color-ft-message-info);
    position: absolute;
    top: 18px;
    right: 8px;
    font-size: 12px;
}

.wsym-group-creation-info {
    color: var(--color-ft-message-info);
    font-size: 12px;
    font-weight: normal;

    align-self: flex-start;
    padding-left: 7%;
}

/*-------------------------------------------------*/