@charset "UTF-8";

:root { /* Gradients */
    font-family: -apple-system, ".AppleColorEmojiUI"; /* .AppleColorEmojiUI specified explicitly to avoid font substitution performance penalties for emoji. */
    --imessage-gradient: -webkit-linear-gradient(rgb(86,196,250), rgb(0,119,248)); /* blue */
    --imessage-gradient-dark: -webkit-linear-gradient(rgb(10,132,255), rgb(0,93,203)); /* blue */
    --non-imessage-gradient: -webkit-linear-gradient(rgb(0,202,69), rgb(0,185,64)); /* green */
    --business-chat-gradient: -webkit-linear-gradient(rgb(132,142,153), rgb(132,142,153)); /* dark gray */
    --business-chat-gradient-dark: -webkit-linear-gradient(rgb(141,141,141), rgb(141,141,141)); /* dark gray */
    --gradient-size: auto;
    --gradient-position: 0% 0%;
}
body {
    margin: 0px 0px 0px 0px;
    --dim-animation-time: 0.15s;
}

@-webkit-keyframes body-dim-keyframes {
    from {
        z-index: 5;
        opacity: 0;
    } to {
        z-index: 5;
        opacity:  1;
    }
}

@-webkit-keyframes body-undim-keyframes {
    from {
        z-index: 5;
        opacity: 1;
    } to {
        opacity:  0;
        z-index: -1;
    }
}

body::after {
    opacity: 0;
    content: "";
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.3);
}

message-overlay {
    position:absolute;
    box-sizing:border-box;
    width:100%;
    height:100%;
    left:0px;
    bottom:0px;
    pointer-events: none;
}

[big-emoji="yes"] messagetext message-overlay {
    display: none;
}

[big-emoji="yes"] messagetext.text-invisible-ink-gl message-overlay {
    display: unset;
}

@media (prefers-dark-interface) {
    body::after {
        background-color: rgba(0, 0, 0, 0.7);
    }
}

chatitem {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient:vertical;
}

/* chatitem margins */

/* small */
chatitem {
    margin-top:1px;
}

/* medium */

[item-type="sender"]+[display-type="balloon"],
[item-type="header"]+[display-type="balloon"],
[item-type="timestamp"]+[display-type="balloon"] {
    margin-top:4px;
}

/* large */
[item-type="sender"],
[item-type="timestamp"]+[item-type="header"],
[item-type="timestamp"]+[item-type="timestamp"],
[display-type="balloon"][contiguous="no"]+[display-type="balloon"],
[item-type="status"]+[item-type="timestamp"],
[item-type="status"]+[item-type="header"],
[display-type="balloon"]+[item-type="timestamp"],
[display-type="balloon"]+[item-type="header"] {
    margin-top:9px;
}

chatitem:nth-of-type(1) {
    padding-top:9px;
}

header {
    display:block;
    text-align:center;
    -webkit-user-select: none;
    cursor: default;
}
headermessage {
    font-weight: 600;
    font-size:11px;
    color:rgb(142,142,147);
}

phishingmessage {
    display:block;
    text-align:center;
    cursor: default;
    -webkit-user-select: none;
    margin-top:20px;
    font-weight: 600;
    font-size:12px;
    color:rgb(255,46,71);
    padding: 30px;
}

timestamp {
    display:block;
    text-align:center;
    white-space:nowrap;
    -webkit-user-select: none;
    cursor: default;
}

/* receipts and receipt animations */

chatitem[item-type="status"] {
    position:relative;
    overflow:hidden;
    margin-top:0px;
}

chatitem[item-type="status"][receipt-fade] {
    margin-bottom: 4px;
}

chatitem:last-of-type[item-type="status"][receipt-fade] { /* if the last chat item is a receipt, that receipt doesn't require space */
    margin-bottom: unset;
}

[display-type="balloon"][contiguous="no"]+[item-type="status"][receipt-fade="out"] {
    min-height:9px;
}

receipt {
    position:absolute;
    top:2px;
    font-weight: 600;
    font-size:11px;
    color:rgb(142,142,147);
    overflow:hidden;
    display:-webkit-box;
    z-index:-1;
    -webkit-box-orient:vertical;
    -webkit-box-sizing:border-box;
}

receipt[from-me="YES"] {
    right:0px;
    padding-right:12px;
}

receipt[from-me="NO"] {
    left:0px;
    padding-left:12px;
}

div.receipt-keep-item {
    float: left;
    cursor: pointer;
}

receipt[from-me="YES"]>div.receipt-container>div.receipt-keep-item {
    padding-left:28px;
}

[showmypicture] receipt[from-me="YES"]>div.receipt-container>div.receipt-keep-item {
    padding-left:0px;
}

div.receipt-keep-item:hover {
    color:rgb(27,129,244);
}

receipt[from-me="YES"]>div.receipt-container>div.receipt-item {
    float: right;
    padding-left: 12px
}

receipt[from-me="NO"]>div.receipt-container>div.receipt-keep-item,
receipt[from-me="NO"]>div.receipt-container>div.receipt-item {
    padding-left: 14px;
}


[showpictures] receipt[from-me="NO"]>div.receipt-container>div.receipt-keep-item,
[showpictures] receipt[from-me="NO"]>div.receipt-container>div.receipt-item {
    padding-left: 36px;
}

chatitem[receipt-fade="none"] {
    height:15px;
    overflow: visible;
}

media {
    display:block;
    overflow:hidden;
}

chatitem[item-type="status"][breadcrumb="yes"] {
    overflow:visible;
    height: 15px;
    margin-bottom: 7px;
    margin-top: 7px;
}

[item-type="status"][breadcrumb="yes"] div.status-container div.status-item {
    margin-left: 18px; /* This value is equivalent to the width of the image plus 2 px for padding */
    font-weight: 400;
}

[showpictures] [item-type="status"][breadcrumb="yes"] div.status-container div.status-item {
    margin-left: 57px; /* This value is equivalent to the width of the image plus 2 px for padding */
}

[item-type="status"][breadcrumb="yes"] div.status-container img {
    width: 16px;
    float: left; /* setting this value to get the img and the div.status-container inline */
}

[showpictures] [item-type="status"][breadcrumb="yes"] div.status-container img {
    margin-left: 37px
}

/* fade in */

@-webkit-keyframes receipt-chatitem-fade-in {
    from {height:0px;}
    to {height:15px;}
}

chatitem[receipt-fade="in"] {
    -webkit-animation-name:receipt-chatitem-fade-in;
    -webkit-animation-fill-mode:both;
    -webkit-animation-duration:300ms;
    -webkit-animation-delay:0ms;
    -webkit-animation-timing-function:linear;
    overflow: visible;
}

@-webkit-keyframes receipt-fade-in {
    from {top:-13px;}
    to {top:2px;}
}

chatitem[receipt-fade="in"] receipt {
    -webkit-animation-name:receipt-fade-in;
    -webkit-animation-fill-mode:both;
    -webkit-animation-duration:300ms;
    -webkit-animation-delay:0ms;
    -webkit-animation-timing-function:linear;
}

/* fade out */

/* delay animation finish to allow the other animations to finish before removing receipt */
@-webkit-keyframes receipt-chatitem-fade-out {
    from {height:15px;}
    to {height:0px;}
}

chatitem[receipt-fade="out"] {
    -webkit-animation-name:receipt-chatitem-fade-out;
    -webkit-animation-fill-mode:both;
    -webkit-animation-duration:300ms;
    -webkit-animation-delay:0ms;
    -webkit-animation-timing-function:linear;
}

@-webkit-keyframes receipt-fade-out {
    from {top:2px;}
    to {top:15px;}
}

chatitem[receipt-fade="out"] receipt {
    -webkit-animation-name:receipt-fade-out;
    -webkit-animation-fill-mode:both;
    -webkit-animation-duration:300ms;
    -webkit-animation-delay:0ms;
    -webkit-animation-timing-function:linear;
}

date {
    display: inline-block;
    font-weight: 600;
    font-size:11px;
    color:rgb(142,142,147);
    margin-left:3px;
    margin-right:3px;
}

[font-size="xx-small"] date,[font-size="xx-small"] headermessage,[font-size="xx-small"] buddyname.base {
    font-size:8px;
}

[font-size="x-small"] date,[font-size="x-small"] headermessage,[font-size="x-small"] buddyname.base {
    font-size:9px;
}

[font-size="small"] date,[font-size="small"] headermessage,[font-size="small"] buddyname.base {
    font-size:10px;
}

[font-size="medium"] date,[font-size="medium"] headermessage,[font-size="medium"] buddyname.base {
    font-size:11px;
}

[font-size="large"] date,[font-size="large"] headermessage,[font-size="large"] buddyname.base {
    font-size:12px;
}

[font-size="x-large"] date,[font-size="x-large"] headermessage,[font-size="x-large"] buddyname.base {
    font-size:13px;
}

[font-size="xx-large"] date,[font-size="xx-large"] headermessage,[font-size="xx-large"] buddyname.base {
    font-size:14px;
}

receipt date {
    margin-right: -1px;
    font-size:11px !important;
}

/* statuses */

chat-item[item-type="status"]:not([role="heading"]) receipt {
    top: 14px;
}

/* messages */

rollover-date {
    -webkit-box-flex: 1;
    -webkit-transition: opacity 200ms;
    display:block;
    opacity:0;
    padding-bottom:4px;
}
[from-me="yes"] rollover-date {
    text-align:right;
}
messagetext:hover ~ rollover-date  {
    opacity:1;
}

message {
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    position: relative;
}
message[from-me="no"] {
    margin-left: 12px;
}
message[from-me="yes"] {
    margin-right: 12px;
}
[typing-indicator="no"][emote="no"] messagetext {
    display:-webkit-flex;
    -webkit-flex-direction:column;
    word-break: break-word;
    text-align:left;
    cursor: auto;
    max-width: 60%;
    min-width: 33px;
    min-height: 24px;
    position:relative;
}

/* stickers */

stickerspacer {
    display: block;
    position: relative;
    height: 0px;
    width: 0px;
    max-width: 30%;
}

chatitem[item-type="attachment"] stickerspacer {
    max-width: 23%;
}

.inner-inline-recipe-sticker {
    image-rendering: optimizeQuality;
    max-width: 33%;
}

/*Leaving this for the code review to show you what I did to calculate in the css, the variables wouldn't calculate when I had set up the proper properties in code (I verified that the numbers I wanted to calculate were set properly) */
stickerCSSComputations {
    position:absolute;
    box-sizing:border-box;
    pointer-events: visible;
    z-index: 1;
    --sticker-width: calc(var(--imageWidth) / var(--clientWidth));
    --sticker-height: calc(var(--imageHeight) / var(--clientHeight));
    width: var(--sticker-width);
    height: var(--sticker-height);
    --x1: calc(var(--imageWidth) / 2); /*originally just had this stuck in, but broke out into another var in case we couldn't calc on a calc*/
    --y1: calc(var(--imageHeight) / 2);
    --xOffset: calc(var(--x1) / var(--clientWidth));
    --yOffset: calc(var(--y1) / var(--clientHeight));
    --xScalar: calc(var(--geo-xScalar) - var(--xOffset));
    --yScalar: calc(var(--geo-yScalar) - var(--yOffset));
    top: var(--yScalar);
    left: var(--xScalar);
}

sticker {
    position:absolute;
    box-sizing:border-box;
    width:var(--sticker-width);
    height:var(--sticker-height);
    pointer-events: visible;
    z-index: 1;
    top: var(--yScalar);
    left: var(--xScalar);
}

/*tweaking the big emoji sticker values, as the dimensions we get from iOS don't match what we display, so it's hard to correctly get where the sticker should be placed */
/*also stickers are going to be bigger than they appear on iOS on big emoji, tweaking those numbers can cause stretching and it's better to preserve the aspect ratio and have them a little off*/
[big-emoji="yes"] sticker {
    left: calc(var(--xScalar) - 8%);
}
[from-me="yes"][big-emoji="yes"] sticker {
    left: calc(var(--xScalar) + 8%);
}


sticker img{
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}


[sticker-view-visible="yes"] sticker,
[is-being-acknowledged="yes"] sticker {
    opacity: 0;
    -webkit-transition: opacity var(--dim-animation-time) linear;
}
[sticker-view-visible="no"] sticker,
sticker {
    opacity: 1;
    -webkit-transition: opacity var(--dim-animation-time) linear;
}

[item-type="attachment"] [typing-indicator="no"][emote="no"] messagetext {
    max-width:75%;
}

messagesubject {
    display: block;
}
[emote="no"] messagesubject span {
    font-weight: 600;
}

buddyicon div {
    display: block;
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px);
}

[showpictures] [emote="no"][from-me="no"] buddyicon,
[showpictures][showmypicture] [emote="no"] buddyicon {
    display:block;
    width:30px;
    height:24px;
    position:relative;
    clip: auto;
}

[showpictures] [emote="no"][from-me="no"] buddyicon div,
[showpictures][showmypicture] [emote="no"] buddyicon div {
    display: block;
    position:absolute;
    bottom:-1px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    clip: auto;
}
[showpictures] [contiguous="yes"] [emote="no"] buddyicon div {
    visibility: hidden;
    clip: auto;
}

spacer {
    display:none;
}

[from-me="yes"] {
    -webkit-box-direction: reverse;
    -webkit-box-align: end;
    -webkit-box-pack: end;
    -webkit-box-orient: horizontal;
}
[from-me="no"] {
    -webkit-box-direction: normal;
    -webkit-box-align: end;
    -webkit-box-pack: start;
    -webkit-box-orient: horizontal;
}

[item-type="text"] [emote="no"][from-me="yes"] span {
    color: white;
}

[item-type="text"] [big-emoji="yes"][emote="no"][from-me="yes"] span {
    color: captiontext !important;
}

[item-type="text"] [emote="no"][from-me="no"] span {
    color: captiontext;
}

[item-type="attachment"] [emote="no"] span {
    color: captiontext;
}

buddyname.base {
    font-size:11px;
    margin-left:57px;
    color:rgb(142,142,147);
}

[emote="no"] span {
    text-shadow: none !important;
    --font-size: 13px;
    font-size: var(--font-size);
}

[font-size="xx-small"] [emote="no"] span {
    --font-size: 10px !important;
    font-size: var(--font-size);
}

[font-size="x-small"] [emote="no"] span {
    --font-size: 11px !important;
    font-size: var(--font-size);
}

[font-size="small"] [emote="no"] span {
    --font-size: 12px !important;
    font-size: var(--font-size);
}

[font-size="medium"] [emote="no"] span {
    --font-size: 13px !important;
    font-size: var(--font-size);
}

[font-size="large"] [emote="no"] span {
    --font-size: 14px !important;
    font-size: var(--font-size);
}

[font-size="x-large"] [emote="no"] span {
    --font-size: 15px !important;
    font-size: var(--font-size);
}

[font-size="xx-large"] [emote="no"] span {
    --font-size: 18px !important;
    font-size: var(--font-size);
}

/* Big Emoji */

[emote="no"] messagetextcontainer div.bigemoji {
    margin-bottom: -13px;
}

[emote="no"] messagetextcontainer div.bigemoji span {
    font-size: 48px !important;
}

[big-emoji="yes"][from-me="no"][emote="no"][typing-indicator="no"] messagebody,
[big-emoji="yes"][from-me="yes"][emote="no"] messagebody {
    padding-bottom: 10px;
}

[showpictures="yes"] [big-emoji="yes"][from-me="no"][emote="no"][typing-indicator="no"] messagebody {
    padding-left: 2px;
}
[big-emoji="yes"][from-me="no"][emote="no"][typing-indicator="no"] messagebody {
    padding-left: 0px;
}

[showmypicture="yes"] [big-emoji="yes"][from-me="yes"][emote="no"] messagebody {
    padding-right: 2px;
}

[big-emoji="yes"][from-me="yes"][emote="no"] messagebody {
    padding-right: 0px;
}

/* Background colors (messagetext) */

[from-me="yes"][emote="no"] messagebody {
    background-repeat:repeat-x;
    background-attachment: fixed;
    background-image: var(--non-imessage-gradient);
    background-size: var(--gradient-size);
    background-position: var(--gradient-position);
}

[from-me="yes"][emote="no"] messagebody {
    padding:5px 15px 5px 10px;
}
[from-me="no"][emote="no"][typing-indicator="no"] messagebody {
    padding:5px 10px 5px 15px;
}

[plugin="yes"] messagetextcontainer {
    width: 100%;
}

messagebody[plugin="yes"] {
    padding:0px !important;
}

[from-me="yes"][emote="no"] messagebody[inline-image="yes"] {
    padding:0px;
}

/*gray bubble background for messages not from me*/
[item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody,
[item-type="audio-message"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody,
[from-me="no"][emote="no"][typing-indicator="no"] messagebody {
    background-color:rgb(229,229,234);
}
@media (prefers-dark-interface) {
    [item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody,
    [item-type="audio-message"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody,
    [from-me="no"][emote="no"][typing-indicator="no"] messagebody {
        background-color:rgb(85,85,85);
    }
}

[from-me="no"][emote="no"][typing-indicator="no"] messagebody[inline-image="yes"] {
    padding:0px;
}
[showpictures][from-me="no"][emote="no"][typing-indicator="no"] messagebody {
    margin-left:0px;
}

[from-me="yes"][emote="no"][service="imessage"][typing-indicator="no"][business="no"] messagebody {
    background-image: var(--imessage-gradient);
}
[from-me="yes"][emote="no"][service="imessage"][typing-indicator="no"][business="yes"] messagebody {
    background-image: var(--business-chat-gradient);
}
@media (prefers-dark-interface) {
    [from-me="yes"][emote="no"][service="imessage"][typing-indicator="no"][business="yes"] messagebody {
        background-image: var(--business-chat-gradient-dark);
    }
    [from-me="yes"][emote="no"][service="imessage"][typing-indicator="no"][business="no"] messagebody {
        background-image: var(--imessage-gradient-dark);
    }

}
[disable-gradients="yes"] [from-me="yes"][emote="no"][service="imessage"][typing-indicator="no"] messagebody {
    background-image:none;
    background-color:rgb(90,200,250);
}
[disable-gradients="yes"] [from-me="yes"][emote="no"] messagebody {
    background-image:none;
    background-color:rgb(0,238,80);
}

[item-type="audio-message"] messagebody {
    -webkit-mask-box-image-width: 11px 15px 12px 17px !important;
}

[item-type="attachment"] messagebody {
    border-width: 0px !important;
    border-image: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

[big-emoji="yes"] messagebody {
    border-width: 0px !important;
    border-image: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-mask-box-image:none !important;
}


/* Attachments Border */
[contiguous="no"][item-type="attachment"] [from-me="yes"][emote="no"] message-overlay {
    border-width: 11px 17px 12px 15px;
    border-image:url(transcript-resource://coreui/attachment-local) 11 17 12 15;
}
chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="no"][item-type="attachment"] [from-me="yes"][emote="no"] message-overlay {
    border-width: 11px 17px 12px 15px;
    border-image:url(transcript-resource://coreui/attachment-local-tapback) 14 17 12 15;
}

[contiguous="no"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] message-overlay {
    border-width: 11px 15px 12px 17px;
    border-image:url(transcript-resource://coreui/attachment-remote) 11 15 12 17;
}
chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="no"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] message-overlay {
    border-width: 11px 15px 12px 17px;
    border-image:url(transcript-resource://coreui/attachment-remote-tapback) 11 15 12 17;
}

[contiguous="yes"][item-type="attachment"] [from-me="yes"][emote="no"] message-overlay {
    border-width: 11px 17px 12px 15px;
    border-image:url(transcript-resource://coreui/attachment-local-notail) 11 17 12 15;
}
chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"][item-type="attachment"] [from-me="yes"][emote="no"] message-overlay {
    border-width: 11px 17px 12px 15px;
    border-image:url(transcript-resource://coreui/attachment-local-tapback-notail) 11 17 12 15;
}

[contiguous="yes"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] message-overlay {
    border-width: 11px 15px 12px 17px;
    border-image:url(transcript-resource://coreui/attachment-remote-notail) 11 15 12 17;
}
chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] message-overlay {
    border-width: 11px 15px 12px 17px;
    border-image:url(transcript-resource://coreui/attachment-remote-tapback-notail) 11 15 12 17;
}


/* Regular message bubbles */

messagebody[inline-image="yes"]+message-overlay {
    border-image:none !important;
}

[contiguous="no"][item-type="attachment"] [from-me="yes"][emote="no"] messagebody[inline-image="yes"],
[from-me="yes"][emote="no"] messagebody {
    -webkit-mask-box-image-width: 11px 17px 12px 15px;
    -webkit-mask-box-image:url(transcript-resource://coreui/bubble-local) 11 17 12 15;
}
chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="no"][item-type="attachment"] [from-me="yes"][emote="no"] messagebody[inline-image="yes"],
chatitem:not([is-being-acknowledged]) [is-acknowledged="yes"] [from-me="yes"][emote="no"] messagebody {
    -webkit-mask-box-image-width: 11px 17px 11px 15px;
    -webkit-mask-box-image:url(transcript-resource://coreui/bubble-local-tapback) 11 17 12 15;
}
[contiguous="no"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody[inline-image="yes"],
[from-me="no"][emote="no"][typing-indicator="no"] messagebody {
    -webkit-mask-box-image-width: 11px 15px 12px 17px;
    -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote) 11 15 12 17;
}
chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="no"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody[inline-image="yes"],
chatitem:not([is-being-acknowledged])[is-acknowledged="yes"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody {
    -webkit-mask-box-image-width: 11px 15px 12px 17px;
    -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote-tapback) 11 15 12 17;
}
[contiguous="yes"][item-type="attachment"] [from-me="yes"][emote="no"] messagebody[inline-image="yes"],
[contiguous="yes"] [from-me="yes"][emote="no"] messagebody {
    -webkit-mask-box-image:url(transcript-resource://coreui/bubble-local-notail) 11 17 12 15;
}
chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"][item-type="attachment"] [from-me="yes"][emote="no"] messagebody[inline-image="yes"],
chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"] [from-me="yes"][emote="no"] messagebody {
    -webkit-mask-box-image:url(transcript-resource://coreui/bubble-local-tapback-notail) 11 17 12 15;
}
[contiguous="yes"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody[inline-image="yes"],
[contiguous="yes"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody {
    -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote-notail) 11 15 12 17;
}
chatitem:not([is-being-acknowledged]) [is-acknowledged="yes"][contiguous="yes"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody[inline-image="yes"],
chatitem:not([is-being-acknowledged]) [is-acknowledged="yes"][contiguous="yes"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody {
    -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote-tapback-notail) 11 15 12 17;
}


@media screen and (-webkit-device-pixel-ratio:2) {
    
    /* Attachments */
    [contiguous="no"][item-type="attachment"] [from-me="yes"][emote="no"] message-overlay {
        border-image:url(transcript-resource://coreui/attachment-local-2x) 22 34 24 30;
    }
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="no"][item-type="attachment"] [from-me="yes"][emote="no"] message-overlay {
        border-image:url(transcript-resource://coreui/attachment-local-tapback-2x) 22 34 24 30;
    }
    
    [contiguous="no"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] message-overlay {
        border-image:url(transcript-resource://coreui/attachment-remote-2x) 22 30 24 34;
    }
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="no"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] message-overlay {
        border-image:url(transcript-resource://coreui/attachment-remote-tapback-2x) 22 30 24 34;
    }
    
    [contiguous="yes"][item-type="attachment"] [from-me="yes"][emote="no"] message-overlay {
        border-image:url(transcript-resource://coreui/attachment-local-notail-2x) 22 34 24 30;
    }
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"][item-type="attachment"] [from-me="yes"][emote="no"] message-overlay {
        border-image:url(transcript-resource://coreui/attachment-local-tapback-notail-2x) 22 34 24 30;
    }
    
    [contiguous="yes"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] message-overlay {
        border-image:url(transcript-resource://coreui/attachment-remote-notail-2x) 22 30 24 34;
    }
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] message-overlay {
        border-image:url(transcript-resource://coreui/attachment-remote-tapback-notail-2x) 22 30 24 34;
    }

    /* Regular message bubbles */

    [contiguous="no"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody[inline-image="yes"],
    [from-me="no"][emote="no"][typing-indicator="no"] messagebody {
        -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote-2x) 22 30 24 34;
    }
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="no"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody[inline-image="yes"],
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody {
        -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote-tapback-2x) 22 30 24 34;
    }
    [contiguous="no"][item-type="attachment"] [from-me="yes"][emote="no"] messagebody[inline-image="yes"],
    [from-me="yes"][emote="no"] messagebody {
        -webkit-mask-box-image:url(transcript-resource://coreui/bubble-local-2x) 22 34 24 30;
    }
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="no"][item-type="attachment"] [from-me="yes"][emote="no"] messagebody[inline-image="yes"],
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"] [from-me="yes"][emote="no"] messagebody {
        -webkit-mask-box-image:url(transcript-resource://coreui/bubble-local-tapback-2x) 22 34 24 30;
    }
    [contiguous="yes"][item-type="attachment"] [from-me="yes"][emote="no"] messagebody[inline-image="yes"],
    [contiguous="yes"] [from-me="yes"][emote="no"] messagebody {
        -webkit-mask-box-image:url(transcript-resource://coreui/bubble-local-notail-2x) 22 34 24 30;
    }
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"][item-type="attachment"] [from-me="yes"][emote="no"] messagebody[inline-image="yes"],
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"] [from-me="yes"][emote="no"] messagebody {
        -webkit-mask-box-image:url(transcript-resource://coreui/bubble-local-tapback-notail-2x) 22 34 24 30;
    }
    [contiguous="yes"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody[inline-image="yes"],
    [contiguous="yes"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody {
        -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote-notail-2x) 22 30 24 34;
    }
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"][item-type="attachment"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody[inline-image="yes"],
    chatitem:not([is-being-acknowledged])[is-acknowledged="yes"][contiguous="yes"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody {
        -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote-tapback-notail-2x) 22 30 24 34;
    }

}


[item-type="text"] messagebody {
    -webkit-flex:0 1 auto;
}

ddresult {
    text-decoration:underline;
    cursor:pointer;
}

a {
    word-break:break-all;
}
[from-me="yes"] a:link, a:visited {
    color:white;
}
@media (prefers-dark-interface) {
    [from-me="no"] a:link, a:visited {
        color:rgba(56,156,255, 1.0);
    }
    [from-me="no"] a:active  {
        color:lightgray;
    }
}

ddresult[ddlightlink="yes"] {
    -webkit-text-decoration-color:rgba(0, 0, 0, 0.26);
}

@media (prefers-dark-interface) {
    ddresult[ddlightlink="yes"] {
        -webkit-text-decoration-color:rgba(255, 255, 255, 0.46);
    }
}


[from-me="yes"] ddresult {
    color:white;

}

[from-me="yes"] ddresult[ddlightlink="yes"] {
    -webkit-text-decoration-color:rgba(255, 255, 255, 0.46);
}

/* inline media */
.inline-image .inner-inline-image, .inline-image .overlay,
.inline-video .inner-inline-video, .inline-video .overlay {
    -webkit-user-select:auto;
}

.inner-inline-image,
.inner-inline-video {
    max-height:80vh;
    max-width:72vw;
    width:auto;
}

.inner-inline-image.inline-sticker-image {
    max-height: 206px;  /*  Max recommended sticker size is 206x206 */
    min-height: 100px !important; /* Min recommended sticker size is 100x100. ~1/3 of the min width of the transcript -[ChatViewController minWidth] & 1/3 the maximum size for small stickers */
}

video::-webkit-media-controls-fullscreen-button {
    display:none;
}

video::-webkit-media-controls-mute-button {
    margin-right:20px;
}

video::-webkit-media-controls-volume-slider-container {
    display:none;
}

.animoji-inline-video {
    max-height:70vh;
    max-width:70vw;
    width:auto;
}

@media print {
    
    span {
        color: black !important;
    }
    
    body::after {
        background-color: transparent !important;
    }
    
    messagebody {
        -webkit-mask-box-image: none !important;
        background-color:transparent !important;
        background-image:none !important;
    }
    
    message-overlay {
        background-color:transparent !important;
    }
    
    acknowledgments-container {
        visibility: hidden !important;
    }
    
    [contiguous="no"] [from-me="yes"][emote="no"] messagebody:not([inline-image]):not([plugin])+message-overlay {
        border-width: 11px 17px 12px 15px;
        border-image:url(transcript-resource://coreui/attachment-local-2x) 22 34 24 30 !important;
    }
    
    [contiguous="no"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody:not([inline-image]):not([plugin])+message-overlay {
        border-width: 11px 15px 12px 17px;
        border-image:url(transcript-resource://coreui/attachment-remote-2x) 22 30 24 34 !important;
    }
    
    [contiguous="yes"] [from-me="yes"][emote="no"] messagebody:not([inline-image]):not([plugin])+message-overlay {
        border-width: 11px 17px 12px 15px;
        border-image:url(transcript-resource://coreui/attachment-local-notail-2x) 22 34 24 30 !important;
    }
    
    [contiguous="yes"] [from-me="no"][emote="no"][typing-indicator="no"] messagebody:not([inline-image]):not([plugin])+message-overlay {
        border-width: 11px 15px 12px 17px;
        border-image:url(transcript-resource://coreui/attachment-remote-notail-2x) 22 30 24 34 !important;
    }
    
}

.transfer {
    padding-bottom: 2px;
}

message[typing-indicator="yes"] {
    width: 46px;
    height: 24px;
    -webkit-user-select:none;
}

message[typing-indicator="yes"][from-me="yes"] {
    display:none;
}

.boxes,
.compact {
    display: none !important;
}

.overlay {
    display:block;
    position:absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    -webkit-user-select: none;
}

/* Location */
img.location-chevron {
    size: 11px;
    height: 11px;
    width: 10px;
    margin-right: 4px;
    content:url(transcript-resource://coreui/Tracking);
    -webkit-user-select: none;
}

@media screen and (-webkit-device-pixel-ratio:2) {
    img.location-chevron {
        content:url(transcript-resource://coreui/Tracking-2x);
    }
}

.map-container {
    background-size: cover;
    width: 300;
    height: 300;
    max-height:80vh;
    max-width:72vw;
    display: -webkit-flex;
    position: relative;
}

.map-label {
    box-sizing:border-box;
    display: block;
    font-size: 10pt;
    padding-top:10px;
    padding-bottom:10px;
    width: 100%;
    bottom: 0px;
    left: 0px;
    text-align: center;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-user-select: none;
}

/* Emotes */
[emote="yes"] messagetext {
    display: block;
    text-align: center;
    -webkit-border-image: none 100% 1 0 stretch !important;
    padding: 10px 0px 10px 0px;
    max-width: 100%;
    width: 100%;
}
[emote="yes"] messagebody {
    display: inline !important;
    margin: 0px 0px 0px 0px !important;
}
[emote="yes"] span,
[emote="yes"][from-me="yes"] a:link {
    font-weight: 600;
    font-size:13px;
    color:rgb(142,142,147);
    background-color:clear;
}
[selected="yes"] [emote="yes"] span,
[selected="yes"] [emote="yes"] buddyname:before {
    color: #3875D7 !important; /* alternateSelectedControlColor */
    text-shadow: none !important;
}
[emote="yes"] buddyicon,
[emote="yes"] .buddyicon {
    display: none !important;
}
[emote="yes"] date {
    display: none !important;
}
[emote="yes"]+receipt {
    display: none !important;
}
[emote="yes"] buddyname:before {
    font-weight: 600;
    font-size:13px;
    position: relative;
    display: inline;
    color:rgb(142,142,147);

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

/* Acknowledgments  Display */

chatitem[is-acknowledged="yes"],
chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-width: 32px;
    --acknowledgment-height: 32px;
    --acknowledgment-background-color: rgb(229, 229, 234);

    --acknowledgment-balloon-url: url(transcript-resource://coreui/Tapback-Balloon-2x);
    --acknowledgment-stack-balloon-url: url(transcript-resource://coreui/Tapback-Balloon-Stack-2x);
    --acknowledgment-stack-balloon-not-from-me-url: url(transcript-resource://coreui/Tapback-Etc-Double-2x);
    --acknowledgment-stack-balloon-from-me-url: url(transcript-resource://coreui/Tapback-Etc-2x);

    --acknowledgment-2-stack-balloon-url: url(transcript-resource://coreui/Tapback-Balloon-2x);
    --acknowledgment-2-stack-balloon-not-from-me-url: url(transcript-resource://coreui/Tapback-Etc-2x);
    --acknowledgment-2-stack-balloon-from-me-url: url(transcript-resource://coreui/Tapback-Etc-2x);

    --acknowledgment-glyph-width: 48px;
    --acknowledgment-glyph-height: 48px;
    --acknowledgment-glyph-top-adjust: 2px;
    --acknowledgment-glyph-left-adjust: 2px;
    --acknowledgment-glyph-right-adjust: 6px;
    --acknowledgment-glyph-thumbsup-url: url(transcript-resource://coreui/Ack-Balloon-ThumbsUp);
    --acknowledgment-glyph-thumbsdown-url: url(transcript-resource://coreui/Ack-Balloon-ThumbsDown);
    --acknowledgment-glyph-heart-url: url(transcript-resource://coreui/Ack-Balloon-Heart);
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_EN);
    --acknowledgment-glyph-exclamation-url: url(transcript-resource://coreui/Ack-Balloon-Exclamation);
    --acknowledgment-glyph-questionmark-url: url(transcript-resource://coreui/Ack-Balloon-QuestionMark);
    --acknowledgment-glyph-color-not-from-me: rgb(124, 124, 124);
    --acknowledgment-glyph-color-from-me: rgb(255, 255, 255);
    --acknowledgment-glyph-heart-color: rgb(250, 90, 155);

    --acknowledgment-placement-x-offset: -16px;
    --acknowledgment-placement-y-offset: -17px;
    --acknowledgment-message-top-padding: 8px;
}

@media (prefers-dark-interface) {
    chatitem[is-acknowledged="yes"] {
        --acknowledgment-glyph-color-not-from-me: rgb(206, 206, 210);
        --acknowledgment-background-color: rgb(92, 86, 84);
    }
}

/* Arabic */
:lang(ar) chatitem[is-acknowledged="yes"],
:lang(ar) chatitem[is-acknowledged-with-stack="yes"] {
     --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_AR);
 }

/* Chinese */
:lang(zh) chatitem[is-acknowledged="yes"],
:lang(zh) chatitem[is-acknowledged-with-stack="yes"] ,
:lang(zh-Hans) chatitem[is-acknowledged="yes"],
:lang(zh-Hans) chatitem[is-acknowledged-with-stack="yes"],
:lang(zh-Hant) chatitem[is-acknowledged="yes"],
:lang(zh-Hant) chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_ZH);
}

/* Greek, Russian, Ukrainian */
:lang(el) chatitem[is-acknowledged="yes"],
:lang(el) chatitem[is-acknowledged-with-stack="yes"],
:lang(ru) chatitem[is-acknowledged="yes"],
:lang(ru) chatitem[is-acknowledged-with-stack="yes"],
:lang(uk) chatitem[is-acknowledged="yes"],
:lang(uk) chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_EL);
}

/* Hebrew */
:lang(he) chatitem[is-acknowledged="yes"],
:lang(he) chatitem[is-acknowledged-with-stack="yes"],
:lang(iw) chatitem[is-acknowledged="yes"],
:lang(iw) chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_HE);
 }

/* Hindi */
:lang(hi) chatitem[is-acknowledged="yes"],
:lang(hi) chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_HI);
 }

/* Italian */
:lang(it) chatitem[is-acknowledged="yes"],
:lang(it) chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_IT);
}


/* Japanese */
:lang(ja) chatitem[is-acknowledged="yes"],
:lang(ja) chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_JA);
}

/* Korean */
:lang(ko) chatitem[is-acknowledged="yes"],
:lang(ko) chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_KO);
}

/* Spanish */
:lang(es) chatitem[is-acknowledged="yes"],
:lang(es) chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_ES);
 }

/* Thai */
:lang(th) chatitem[is-acknowledged="yes"],
:lang(th) chatitem[is-acknowledged-with-stack="yes"] {
    --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_TH);
 }

@media screen and (-webkit-device-pixel-ratio:2) {
    chatitem[is-acknowledged="yes"],
    chatitem[is-acknowledged-with-stack="yes"] {
        --acknowledgment-glyph-thumbsup-url: url(transcript-resource://coreui/Ack-Balloon-ThumbsUp-2x);
        --acknowledgment-glyph-thumbsdown-url: url(transcript-resource://coreui/Ack-Balloon-ThumbsDown-2x);
        --acknowledgment-glyph-heart-url: url(transcript-resource://coreui/Ack-Balloon-Heart-2x);
        --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_EN-2x);
        --acknowledgment-glyph-exclamation-url: url(transcript-resource://coreui/Ack-Balloon-Exclamation-2x);
        --acknowledgment-glyph-questionmark-url: url(transcript-resource://coreui/Ack-Balloon-QuestionMark-2x);
    }

    /* Arabic */
     :lang(ar) chatitem[is-acknowledged="yes"],
     :lang(ar) chatitem[is-acknowledged-with-stack="yes"] {
         --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_AR-2x);
     }

    /* Chinese */
    :lang(zh) chatitem[is-acknowledged="yes"],
    :lang(zh) chatitem[is-acknowledged-with-stack="yes"] ,
    :lang(zh-Hans) chatitem[is-acknowledged="yes"],
    :lang(zh-Hans) chatitem[is-acknowledged-with-stack="yes"],
    :lang(zh-Hant) chatitem[is-acknowledged="yes"],
    :lang(zh-Hant) chatitem[is-acknowledged-with-stack="yes"] {
        --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_ZH-2x);
    }

    /* Greek, Russian, Ukrainian */
    :lang(el) chatitem[is-acknowledged="yes"],
    :lang(el) chatitem[is-acknowledged-with-stack="yes"],
    :lang(ru) chatitem[is-acknowledged="yes"],
    :lang(ru) chatitem[is-acknowledged-with-stack="yes"],
    :lang(uk) chatitem[is-acknowledged="yes"],
    :lang(uk) chatitem[is-acknowledged-with-stack="yes"] {
        --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_EL-2x);
    }

    /* Hebrew */
     :lang(he) chatitem[is-acknowledged="yes"],
     :lang(he) chatitem[is-acknowledged-with-stack="yes"],
     :lang(iw) chatitem[is-acknowledged="yes"],
     :lang(iw) chatitem[is-acknowledged-with-stack="yes"] {
         --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_HE-2x);
     }

    /* Hindi */
     :lang(hi) chatitem[is-acknowledged="yes"],
     :lang(hi) chatitem[is-acknowledged-with-stack="yes"] {
         --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_HI-2x);
     }

    /* Italian */
    :lang(it) chatitem[is-acknowledged="yes"],
    :lang(it) chatitem[is-acknowledged-with-stack="yes"] {
        --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_IT-2x);
    }

    /* Japanese */
    :lang(ja) chatitem[is-acknowledged="yes"],
    :lang(ja) chatitem[is-acknowledged-with-stack="yes"] {
        --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_JA-2x);
    }

    /* Korean */
    :lang(ko) chatitem[is-acknowledged="yes"],
    :lang(ko) chatitem[is-acknowledged-with-stack="yes"] {
        --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_KO-2x);
    }

    /* Spanish */
    :lang(es) chatitem[is-acknowledged="yes"],
    :lang(es) chatitem[is-acknowledged-with-stack="yes"] {
        --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_ES-2x);
    }

    /* Thai */
     :lang(th) chatitem[is-acknowledged="yes"],
     :lang(th) chatitem[is-acknowledged-with-stack="yes"] {
         --acknowledgment-glyph-ha-url: url(transcript-resource://coreui/Ack-Balloon-Haha_TH-2x);
     }
}

chatitem[is-acknowledged="yes"] message[big-emoji="yes"],
chatitem[is-acknowledged-with-stack="yes"] message[big-emoji="yes"] {
    --acknowledgment-placement-x-offset: -18px;
    --acknowledgment-placement-y-offset: -7px;
}


chatitem[is-acknowledged="yes"] message,
chatitem[is-acknowledged-with-stack="yes"] message {
    margin-top: var(--acknowledgment-message-top-padding);
}

[is-being-acknowledged="yes"] acknowledgments-container {
    visibility: hidden;
}

acknowledgments-container {
    width: var(--acknowledgment-width);
    height: var(--acknowledgment-height);
    display: block;
    position: absolute;
    top: var(--acknowledgment-placement-y-offset);
    right: var(--acknowledgment-placement-x-offset);
}

message[from-me="yes"] acknowledgments-container {
    -webkit-transform:scaleX(-1);
    right: unset;
    left: var(--acknowledgment-placement-x-offset);
}

acknowledgments-container::before { /* Balloons' shadow display */
    content: ""; /*Requires contents since this pseudo elements is an inline-block*/
    display: inline-block;
    position: absolute;
    width: var(--acknowledgment-width);
    height: var(--acknowledgment-height);
    background: transparent;
}

@media (prefers-dark-interface) {
    acknowledgments-container::before {
        background: transparent !important;
    }
}

chatitem[is-acknowledged-with-stack="yes"] acknowledgments-container::before {
    -webkit-mask-image: var(--acknowledgment-stack-shadow-url);
}

chatitem[is-acknowledged-with-stack="yes"][has-two-acknowledgments="yes"] acknowledgments-container::before {
    -webkit-mask-image: var(--acknowledgment-2-stack-shadow-url);
}

acknowledgment {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    width: var(--acknowledgment-width);
    height: var(--acknowledgment-height);

    background-color: var(--acknowledgment-background-color);
    -webkit-mask-image: var(--acknowledgment-balloon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% auto;
}

chatitem[is-acknowledged-with-stack="yes"] acknowledgment {
    width: 37px;
    height: 34px;
    --acknowledgment-glyph-right-adjust: 11px;
    -webkit-mask-image: var(--acknowledgment-stack-balloon-url);
}

chatitem[is-acknowledged-with-stack="yes"][has-two-acknowledgments="yes"] acknowledgment {
    width: var(--acknowledgment-width);
    height: var(--acknowledgment-height);
    --acknowledgment-glyph-right-adjust: 6px;
    -webkit-mask-image: var(--acknowledgment-2-stack-balloon-url);
}

acknowledgment[from-me="yes"] {
    background-color: unset;
    background-image: var(--imessage-gradient);
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-size: var(--gradient-size);
    background-position: var(--gradient-position);
    -webkit-mask-image: var(--acknowledgment-balloon-url);
}
@media (prefers-dark-interface) {
    acknowledgment[from-me="yes"] {
        background-image: var(--imessage-gradient-dark);
    }
}

acknowledgment[glyph]::before { /* Glyph psesudo-element */
    content: ""; /*Requires contents since this pseudo elements is an inline-block*/
    display: inline-block;
    height: var(--acknowledgment-glyph-height);
    width: var(--acknowledgment-glyph-width);
    position: absolute;

    background-color: var(--acknowledgment-glyph-color-not-from-me);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 50% 50%;
    top: var(--acknowledgment-glyph-top-adjust);
    left: var(--acknowledgment-glyph-left-adjust);
}

message[from-me="yes"] acknowledgment[glyph]::before {
    -webkit-transform:scaleX(-1);
    left: unset;
    right: var(--acknowledgment-glyph-right-adjust);
}

acknowledgment[from-me="yes"]::before {
    background-color: var(--acknowledgment-glyph-color-from-me);
}

acknowledgment[glyph="heart"]::before,
acknowledgment[from-me="yes"][glyph="heart"]::before {
    -webkit-mask-image: var(--acknowledgment-glyph-heart-url);
    background-color: var(--acknowledgment-glyph-heart-color);
}

acknowledgment[glyph="thumbsup"]::before {
    -webkit-mask-image: var(--acknowledgment-glyph-thumbsup-url);
}

acknowledgment[glyph="thumbsdown"]::before {
    -webkit-mask-image: var(--acknowledgment-glyph-thumbsdown-url);
}

acknowledgment[glyph="ha"]::before {
    -webkit-mask-image: var(--acknowledgment-glyph-ha-url);
}

acknowledgment[glyph="exclamation"]::before {
    -webkit-mask-image: var(--acknowledgment-glyph-exclamation-url);
}

acknowledgment[glyph="questionmark"]::before {
    -webkit-mask-image: var(--acknowledgment-glyph-questionmark-url);
}

message[from-me="yes"] acknowledgment[glyph]::before {
    -webkit-transform:scaleX(-1);
    left: unset;
    right: var(--acknowledgment-glyph-right-adjust);
}

acknowledgment-etc {
    display: inline-block;
    width: 37px;
    height: 34px;
    position: absolute;

    background-color:   var(--acknowledgment-background-color);
    -webkit-mask-image: var(--acknowledgment-stack-balloon-not-from-me-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% auto;
}

acknowledgment-etc[from-me="yes"] {
    background-color: unset;
    background-image: var(--imessage-gradient);
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-size: var(--gradient-size);
    background-position: var(--gradient-position);
    -webkit-mask-image: var(--acknowledgment-stack-balloon-from-me-url);
}
@media (prefers-dark-interface) {
    acknowledgment-etc[from-me="yes"] {
        background-image: var(--imessage-gradient-dark);
    }
}

acknowledgment-etc[has-two-acknowledgments="yes"][from-me="yes"] {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% auto;

    -webkit-mask-image: var(--acknowledgment-2-stack-balloon-not-from-me-url);
}

acknowledgment-etc[has-two-acknowledgments="yes"] {
     -webkit-mask-image: var(--acknowledgment-2-stack-balloon-from-me-url);
}

[sticker-view-visible="yes"] acknowledgments-container {
    opacity: 0;
    -webkit-transition: opacity var(--dim-animation-time) linear;
}

[sticker-view-visible="no"] acknowledgments-container {
    opacity: 1;
    -webkit-transition: opacity var(--dim-animation-time) linear;
}


/* Acknowledgment Picker */

acknowledgment-picker-container {
    --acknowledgment-picker-number-of-buttons: 6.0;
    --acknowledgment-picker-button-width: 32px;
    --acknowledgment-picker-button-height: 32px;

    --acknowledgment-picker-width: 224px;
    --acknowledgment-picker-height: 52px;
    --acknowledgment-picker-background-color: rgb(255, 255, 255);
    --acknowledgment-picker-y-offset: 44px;
    --acknowledgment-picker-side-margin: 3px;
    --acknowledgment-picker-side-float: 23px;

    --acknowledgment-picker-tail-width: 15px;
    --acknowledgment-picker-tail-height: 14px;
    --acknowledgment-picker-tail-x-offset: 205px;
    --acknowledgment-picker-tail-y-offset: 3px;
    --acknowledgment-picker-tail-url: url(transcript-resource://coreui/Acknowledgment-Balloon_Tail);

    --acknowledgment-picker-pill-initial-width: 32px;
    --acknowledgment-picker-pill-final-width: var(--acknowledgment-picker-width);
    --acknowledgment-picker-pill-max-width-delta: 10px;
    --acknowledgment-picker-pill-max-width: calc(var(--acknowledgment-picker-pill-final-width) + var(--acknowledgment-picker-pill-max-width-delta));
    --acknowledgment-picker-pill-initial-height: 20px;
    --acknowledgment-picker-pill-final-height: 40px;
    --acknowledgment-picker-pill-initial-bottom-offset: -20px;
    --acknowledgment-picker-pill-final-bottom-offset: 0px;
    --acknowledgment-picker-pill-initial-x-offset: 127px;
    --acknowledgment-picker-pill-max-x-offset: -7px;
    --acknowledgment-picker-pill-final-x-offset: 0px;

    --acknowledgment-picker-button-selection-color: rgb(0, 122, 255);
    --acknowledgment-picker-button-horizontal-end-margin: 6px;
    --acknowledgment-picker-button-horizontal-margin: 1.7px;
    --acknowledgment-picker-button-initial-horizontal-margin: calc(-1.0 * var(--acknowledgment-picker-button-width) / 2.0);
    --acknowledgment-picker-button-final-horizontal-margin: var(--acknowledgment-picker-button-horizontal-margin);
    --acknowledgment-picker-button-max-horizontal-margin: 5.25px;
    --acknowledgment-picker-button-initial-bottom-offset: 5px;
    --acknowledgment-picker-button-final-bottom-offset: 0px;

    --acknowledgment-picker-glyph-width: var(--acknowledgment-picker-button-width);
    --acknowledgment-picker-glyph-height: var(--acknowledgment-picker-button-height);
    --acknowledgment-picker-glyph-color: rgb(124, 124, 124);
    --acknowledgment-picker-glyph-selected-color: rgb(255, 255, 255);
    --acknowledgment-picker-glyph-selected-heart-color: rgb(250, 90, 155);
    --acknowledgment-picker-glyph-heart-url: url(transcript-resource://coreui/Ack_Heart_Menu);
    --acknowledgment-picker-glyph-thumbsup-url: url(transcript-resource://coreui/Ack_ThumbsUp_Menu);
    --acknowledgment-picker-glyph-thumbsdown-url: url(transcript-resource://coreui/Ack_ThumbsDown_Menu);
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_EN_Menu);
    --acknowledgment-picker-glyph-exclamation-url: url(transcript-resource://coreui/Ack_Exclamation_Menu);
    --acknowledgment-picker-glyph-question-url: url(transcript-resource://coreui/Ack_Question_Menu);

    width: var(--acknowledgment-picker-width);
    height: var(--acknowledgment-picker-height);
    display: -webkit-flex;
    position: absolute;
    z-index: 15;
    top: calc(-1 * var(--acknowledgment-picker-y-offset));
    margin-left: var(--acknowledgment-picker-side-margin);

    --acknowledgment-picker-animation-time-scale: 1;
    --acknowledgment-picker-tail-animation-delay: calc(var(--acknowledgment-picker-animation-time-scale) * 0.0s);
    --acknowledgment-picker-tail-animation-time: calc(var(--acknowledgment-picker-animation-time-scale) * 0.15s);
    --acknowledgment-picker-pill-animation-delay: calc(var(--acknowledgment-picker-animation-time-scale) * 0.15s);
    --acknowledgment-picker-pill-animation-time: calc(var(--acknowledgment-picker-animation-time-scale) * 0.25s);
    --acknowledgment-picker-pill-button-animation-delay: calc(var(--acknowledgment-picker-animation-time-scale) * 0.40s);
    --acknowledgment-picker-pill-button-animation-time: calc(var(--acknowledgment-picker-animation-time-scale) * 0.25s);
    --acknowledgment-picker-glyph-animation-heart-delay: calc(var(--acknowledgment-picker-animation-time-scale) * 0.15s + 0.4133s);
    --acknowledgment-picker-glyph-animation-thumbsup-delay: calc(var(--acknowledgment-picker-animation-time-scale) * 0.15s + 0.52s);
    --acknowledgment-picker-glyph-animation-thumbsdown-delay: calc(var(--acknowledgment-picker-animation-time-scale) * 0.15s + 0.5376s);
    --acknowledgment-picker-glyph-animation-ha-delay: calc(var(--acknowledgment-picker-animation-time-scale) * 0.15s + 0.6133s);
    --acknowledgment-picker-glyph-animation-exclamation-delay: calc(var(--acknowledgment-picker-animation-time-scale) * 0.15s + 0.64s);
    --acknowledgment-picker-glyph-animation-question-delay: calc(var(--acknowledgment-picker-animation-time-scale) * 0.15s + 0.6833s);

    --acknowledgment-picker-animation-function: cubic-bezier(0.15, 0,0.3499999, 1);
    --acknowledgment-picker-glyph-animation-start-x-position: 0px;
    --acknowledgment-picker-glyph-animation-end-x-position: -1920px;
    --acknowledgment-picker-glyph-animation-duration: 1s;
    --acknowledgment-picker-glyph-animation-iterations: 1;
}

/* Arabic */
:lang(ar) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_AR_Menu);
}

/* Chinese */
:lang(zh) acknowledgment-picker-container,
:lang(zh-Hans) acknowledgment-picker-container,
:lang(zh-Hant) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_ZH_Menu);
}

/* Greek, Russian, Ukrainian */
:lang(el) acknowledgment-picker-container,
:lang(ru) acknowledgment-picker-container,
:lang(uk) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_EL_Menu);
}

/* Hebrew */
:lang(he) acknowledgment-picker-container,
:lang(iw) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_HE_Menu);
}

/* Hindi */
:lang(hi) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_HI_Menu);
}

/* Italian */
:lang(it) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_IT_Menu);
}

/* Japanese */
:lang(ja) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_JA_Menu);
}

/* Korean */
:lang(ko) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_KO_Menu);
}

/* Spanish */
:lang(es) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_ES_Menu);
}

/* Thai */
:lang(th) acknowledgment-picker-container {
    --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_TH_Menu);
}

@media screen and (-webkit-device-pixel-ratio:2) {
    acknowledgment-picker-container {
        --acknowledgment-picker-tail-url: url(transcript-resource://coreui/Acknowledgment-Balloon_Tail-2x);
        --acknowledgment-picker-glyph-heart-url: url(transcript-resource://coreui/Ack_Heart_Menu-2x);
        --acknowledgment-picker-glyph-thumbsup-url: url(transcript-resource://coreui/Ack_ThumbsUp_Menu-2x);
        --acknowledgment-picker-glyph-thumbsdown-url: url(transcript-resource://coreui/Ack_ThumbsDown_Menu-2x);
        --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_EN_Menu-2x);
        --acknowledgment-picker-glyph-exclamation-url: url(transcript-resource://coreui/Ack_Exclamation_Menu-2x);
        --acknowledgment-picker-glyph-question-url: url(transcript-resource://coreui/Ack_Question_Menu-2x);
    }

    /* Arabic */
     :lang(ar) acknowledgment-picker-container {
     --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_AR_Menu-2x);
     }

    /* Chinese */
    :lang(zh) acknowledgment-picker-container,
    :lang(zh-Hans) acknowledgment-picker-container,
    :lang(zh-Hant) acknowledgment-picker-container {
        --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_ZH_Menu-2x);
    }

    /* Greek, Russian, Ukrainian */
     :lang(el) acknowledgment-picker-container,
     :lang(ru) acknowledgment-picker-container,
     :lang(uk) acknowledgment-picker-container {
         --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_EL_Menu-2x);
     }

    /* Hebrew */
     :lang(he) acknowledgment-picker-container,
     :lang(iw) acknowledgment-picker-container {
         --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_HE_Menu-2x);
     }

    /* Hindi */
     :lang(hi) acknowledgment-picker-container {
         --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_HI_Menu-2x);
     }

    /* Italian */
    :lang(it) acknowledgment-picker-container {
        --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_IT_Menu-2x);
    }

    /* Japanese */
    :lang(ja) acknowledgment-picker-container {
        --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_JA_Menu-2x);
    }

    /* Korean */
    :lang(ko) acknowledgment-picker-container {
        --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_KO_Menu-2x);
    }

    /* Spanish */
     :lang(es) acknowledgment-picker-container {
         --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_ES_Menu-2x);
     }

    /* Thai */
     :lang(th) acknowledgment-picker-container {
         --acknowledgment-picker-glyph-ha-url: url(transcript-resource://coreui/Ack_Haha_TH_Menu-2x);
     }
}

[from-me="yes"] acknowledgment-picker-container {
    margin-left: unset;
    right: var(--acknowledgment-picker-side-margin);
}

acknowledgment-picker-container[float-to-end="yes"] {
    right: calc(-1 * var(--acknowledgment-picker-side-float));
}

acknowledgment-picker-container[float-to-beginning="yes"] {
    left: calc(-1 * var(--acknowledgment-picker-side-float));
}

/* Acknowledgment Picker Tail */

@-webkit-keyframes acknowledgment-picker-tail-keyframes {
    0% {
        opacity: 0;
    }
    100% {
        opacity:  1;
    }
}

@-webkit-keyframes acknowledgment-picker-tail-dismiss-keyframes {
    0% {
        opacity: 1;
    }
    100% {
        opacity:  0;
    }
}

.acknowledgment-picker-tail-animation {
    -webkit-animation: acknowledgment-picker-tail-keyframes ease var(--acknowledgment-picker-tail-animation-time);
    -webkit-animation-delay: var(--acknowledgment-picker-tail-animation-delay);
}

.acknowledgment-picker-tail-dismiss-animation {
    -webkit-animation: acknowledgment-picker-tail-dismiss-keyframes ease var(--acknowledgment-picker-tail-animation-time);
    -webkit-animation-delay: var(--acknowledgment-picker-tail-animation-delay);

}

acknowledgment-picker-tail {
    width: var(--acknowledgment-picker-tail-width);
    height: var(--acknowledgment-picker-tail-height);
    left: var(--acknowledgment-picker-tail-x-offset);
    bottom: var(--acknowledgment-picker-tail-y-offset);
    display: box;
    position: absolute;

    background-color: var(--acknowledgment-picker-background-color);
    -webkit-mask-image: var(--acknowledgment-picker-tail-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
}

[from-me="yes"] acknowledgment-picker-tail {
    left: unset;
    right: var(--acknowledgment-picker-tail-x-offset);
    -webkit-transform:scaleX(-1);
}

/* Acknowledgment Picker Pill */

/* This is solely for the floar-right case. Small balloons will need to have --acknowledgment-picker-pill-*-x-offset computed at runtime. */
@-webkit-keyframes acknowledgment-picker-pill-position-keyframes {
    0% {
        left: var(--acknowledgment-picker-pill-initial-x-offset);
        bottom: var(--acknowledgment-picker-pill-initial-bottom-offset);
    }
    50% {
        left: var(--acknowledgment-picker-pill-max-x-offset);
        bottom: var(--acknowledgment-picker-pill-final-bottom-offset);
    }
    100% {
        left: var(--acknowledgment-picker-pill-final-x-offset);
    }
}

@-webkit-keyframes acknowledgment-picker-pill-position-keyframes-from-me-side {
    0% {
        right: calc(-1.0 * var(--acknowledgment-picker-pill-initial-x-offset));
        bottom: var(--acknowledgment-picker-pill-initial-bottom-offset);
    }
    50% {
        right: calc(-1.0 * var(--acknowledgment-picker-pill-max-x-offset));
        bottom: var(--acknowledgment-picker-pill-final-bottom-offset);
    }
    100% {
        right: calc(-1.0 * var(--acknowledgment-picker-pill-final-x-offset));
    }
}


@-webkit-keyframes acknowledgment-picker-pill-expansion-keyframes {
    0% {
        visibility:  visible;
        opacity:  0;
        width: var(--acknowledgment-picker-pill-initial-width);
        height: var(--acknowledgment-picker-pill-initial-height);
    }
    10% {
        opacity: 1;
    }
    50% {
        width: var(--acknowledgment-picker-pill-max-width);
        height: var(--acknowledgment-picker-pill-final-height);
    }
    100% {
        visibility:  visible;
        width: var(--acknowledgment-picker-pill-final-width);
    }
}

@-webkit-keyframes acknowledgment-picker-pill-dismiss-keyframes {
    from {
        opacity:  1;
    } to {
        opacity: 0;
    }
}

.acknowledgment-picker-pill-animation {
    -webkit-animation: acknowledgment-picker-pill-position-keyframes var(--acknowledgment-picker-animation-function) var(--acknowledgment-picker-pill-animation-time),
    acknowledgment-picker-pill-expansion-keyframes var(--acknowledgment-picker-animation-function) var(--acknowledgment-picker-pill-animation-time);
    -webkit-animation-delay: var(--acknowledgment-picker-pill-animation-delay);
    -webkit-animation-fill-mode: forwards;
}

.acknowledgment-picker-pill-dismiss-animation {
    -webkit-animation: acknowledgment-picker-pill-dismiss-keyframes var(--acknowledgment-picker-animation-function) var(--acknowledgment-picker-pill-animation-time);
    -webkit-animation-fill-mode: forwards;
}

.acknowledgment-picker-pill-expansion-animation {
    -webkit-animation: acknowledgment-picker-pill-expansion-keyframes var(--acknowledgment-picker-animation-function)  var(--acknowledgment-picker-pill-animation-time);
    -webkit-animation-delay: var(--acknowledgment-picker-pill-animation-delay);
}

acknowledgment-picker-pill {
    visibility:  hidden;
    display: block;
    width: var(--acknowledgment-picker-width);
    height: var(--acknowledgment-picker-pill-final-height);
    position: relative;
    /* left: 20px; To be determined at runtime */

    background-color: var(--acknowledgment-picker-background-color);
    border-radius: var(--acknowledgment-picker-height);
}

acknowledgment-picker-button-container {
    display: block;
    height: var(--acknowledgment-picker-pill-final-height);
    position: relative;
    white-space: nowrap;
    overflow:  hidden;
}

/* Acknowledgment Picker Buttons */

acknowledgment-picker-button-container:first-child {
    margin-left: var(--acknowledgment-picker-button-horizontal-end-margin);
}

acknowledgment-picker-button-container:last-child {
    margin-right: var(--acknowledgment-picker-button-horizontal-end-margin);
}


@-webkit-keyframes acknowledgment-picker-button-keyframes {
    from {
        opacity:  0;
    } to {
        opacity: 1;
    }
}

.acknowledgment-picker-button-animation {
    -webkit-animation: acknowledgment-picker-button-keyframes var(--acknowledgment-picker-animation-function) var(--acknowledgment-picker-pill-button-animation-time);
    -webkit-animation-delay: var(--acknowledgment-picker-pill-button-animation-delay);
    -webkit-animation-fill-mode: forwards;
}

acknowledgment-picker-button {
    display: inline-block;
    width: var(--acknowledgment-picker-button-width);
    height: var(--acknowledgment-picker-button-height);
    border-radius: 50%;
    margin-top: calc((var(--acknowledgment-picker-pill-final-height) - var(--acknowledgment-picker-button-height)) / 2);
    margin-left: var(--acknowledgment-picker-button-horizontal-margin);
    margin-right: var(--acknowledgment-picker-button-horizontal-margin);
    position: relative;
    opacity: 0;
}

@-webkit-keyframes acknowledgment-picker-button-selection-keyframes {
    from {
        opacity: 1;
        background-color: var(--acknowledgment-picker-background-color);
    }  to {
        opacity: 1;
        background-color: var(--acknowledgment-picker-button-selection-color);
    }
}

@-webkit-keyframes acknowledgment-picker-button-deselection-keyframes {
    from {
        opacity: 1;
        background-color: var(--acknowledgment-picker-button-selection-color);
    }  to {
        opacity: 1;
        background-color: var(--acknowledgment-picker-background-color);
    }
}

.acknowledgment-picker-button-selection-animation {
    -webkit-animation: acknowledgment-picker-button-selection-keyframes ease 0.25s;
    -webkit-animation-fill-mode: forwards;
}

.acknowledgment-picker-button-deselection-animation {
    -webkit-animation: acknowledgment-picker-button-deselection-keyframes ease 0.25s;
    -webkit-animation-fill-mode: forwards;
}


acknowledgment-picker-button[selected="yes"] {
    background-color: var(--acknowledgment-picker-button-selection-color);
}

@-webkit-keyframes acknowledgment-picker-glyph-keyframes {
    from {
        -webkit-mask-position: var(--acknowledgment-picker-glyph-animation-start-x-position);
    } to {
        -webkit-mask-position: var(--acknowledgment-picker-glyph-animation-end-x-position);
    }
}

acknowledgment-picker-button[glyph]::after {
    content:  "";
    width: var(--acknowledgment-picker-glyph-width);
    height: var(--acknowledgment-picker-glyph-height);
    background-color: var(--acknowledgment-picker-glyph-color);
    display: block;
    -webkit-mask-size: 1952px 32px;

    -webkit-animation-name: acknowledgment-picker-glyph-keyframes;
    animation-duration: var(--acknowledgment-picker-glyph-animation-duration);
    animation-iteration-count: var(--acknowledgment-picker-glyph-animation-iterations);
    animation-timing-function: steps(60);
    -webkit-animation-fill-mode: forwards;
}

acknowledgment-picker-button[selected="yes"][glyph]::after {
    background-color: var(--acknowledgment-picker-glyph-selected-color);
}

acknowledgment-picker-button[selected="yes"][glyph="heart"]::after {
    background-color: var(--acknowledgment-picker-glyph-selected-heart-color);
}

acknowledgment-picker-button[glyph="heart"]::after {
    -webkit-mask-image: var(--acknowledgment-picker-glyph-heart-url);
    -webkit-animation-delay: var(--acknowledgment-picker-glyph-animation-heart-delay);
}

acknowledgment-picker-button[glyph="thumbsup"]::after {
    -webkit-mask-image: var(--acknowledgment-picker-glyph-thumbsup-url);
    -webkit-animation-delay: var(--acknowledgment-picker-glyph-animation-thumbsup-delay);
}

acknowledgment-picker-button[glyph="thumbsdown"]::after {
    -webkit-mask-image: var(--acknowledgment-picker-glyph-thumbsdown-url);
    -webkit-animation-delay: var(--acknowledgment-picker-glyph-animation-thumbsdown-delay);
}

acknowledgment-picker-button[glyph="ha"]::after {
    -webkit-mask-image: var(--acknowledgment-picker-glyph-ha-url);
    -webkit-animation-delay: var(--acknowledgment-picker-glyph-animation-ha-delay);
}

acknowledgment-picker-button[glyph="exclamation"]::after {
    -webkit-mask-image: var(--acknowledgment-picker-glyph-exclamation-url);
    -webkit-animation-delay: var(--acknowledgment-picker-glyph-animation-exclamation-delay);
}

acknowledgment-picker-button[glyph="questionmark"]::after {
    -webkit-mask-image: var(--acknowledgment-picker-glyph-question-url);
    -webkit-animation-delay: var(--acknowledgment-picker-glyph-animation-question-delay);
}

[is-being-acknowledged="yes"] messagetext {
    z-index: 10;
}

/* Audio Stuff */

div.audio-message {
    margin-top:-3px;
    margin-bottom:-3px;
    margin-left:-8px;
}

div.audio-message-waveforms {
    position:relative;
    display: inline-block;
    -webkit-user-select: none;
}

img.audio-message-waveforms-image {
    -webkit-user-select: none;
    margin-top: 1px;
}

img.audio-message-control {
    height: 19px;
    width: 19px;
    margin-right: 6px;
    margin-left: -3px;
    content:url(transcript-resource://coreui/Video-play-button);
    -webkit-user-select: none;
}

.audio-message-control {
    display:inline-block;
    position:relative;
}

.audio-message-progress {
    width:22px;
    height:22px;
    margin-right: 6px;
    -webkit-user-select: none;
    pointer-events: none;
    -webkit-mask-size:22px;
}

.audio-message-button[playing="yes"] {
    position:absolute;
    -webkit-mask-size:8px;
    -webkit-mask-image:-webkit-image-set(url(transcript-resource://coreui/NSPauseTemplate/8/8) 1x, url(transcript-resource://coreui/NSPauseTemplate/16/16) 2x);
    width:8px;
    height:8px;
    left:7px;
    top:7px;
    pointer-events: none;
}

.audio-message-button[playing="no"] {
    position:absolute;
    -webkit-mask-size:10px;
    -webkit-mask-image:-webkit-image-set(url(transcript-resource://coreui/NSPlayTemplate/10/10) 1x, url(transcript-resource://coreui/NSPlayTemplate/20/20) 2x);
    width:10px;
    height:10px;
    left:7px;
    top:6px;
    pointer-events: none;
}

[from-me="yes"] .audio-message-progress,
[from-me="yes"] .audio-message-button,
[from-me="yes"] .audio-message-played-waveform {
    background-color:white;
}

img.audio-message-waveforms-image {
    opacity:0;
}

.audio-message-unplayed-waveform {
    margin-top: -1px;
}

[from-me="yes"] .audio-message-unplayed-waveform {
    background-color:rgba(255,255,255,0.2);
}

[from-me="no"] .audio-message-unplayed-waveform {
    background-color:rgba(0,0,0,0.2);
}


[from-me="no"][played="no"] .audio-message-progress,
[from-me="no"][played="no"] .audio-message-button,
[from-me="no"][played="no"] .audio-message-unplayed-waveform {
    background-image: var(--imessage-gradient);
    background-repeat:repeat-x;
    background-attachment: fixed;
    background-position:100% 100%;
    background-size:contain;
}

[from-me="no"][played="no"][busines="yes"] .audio-message-progress,
[from-me="no"][played="no"][busines="yes"] .audio-message-button,
[from-me="no"][played="no"][busines="yes"] .audio-message-unplayed-waveform {
    background-image: var(--business-chat-gradient);
}
@media (prefers-dark-interface) {
    [from-me="no"][played="no"][busines="yes"] .audio-message-progress,
    [from-me="no"][played="no"][busines="yes"] .audio-message-button,
    [from-me="no"][played="no"][busines="yes"] .audio-message-unplayed-waveform {
        background-image: var(--business-chat-gradient-dark);
    }
    [from-me="no"][played="no"] .audio-message-progress,
    [from-me="no"][played="no"] .audio-message-button,
    [from-me="no"][played="no"] .audio-message-unplayed-waveform {
        background-image: var(--imessage-gradient-dark);
    }
}

[from-me="no"][played="yes"] .audio-message-progress,
[from-me="no"] .audio-message-played-waveform,
[from-me="no"][played="yes"] .audio-message-button {
    background-color:rgb(93,93,97);
}

.audio-message-unplayed-waveform {
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    -webkit-user-select: none;
}

[from-me="no"][played="yes"] .audio-message-played-waveform,
[from-me="yes"] .audio-message-played-waveform {
    width:100%;
}

div.audio-message-played-waveform {
    position:absolute;
    height:100%;
    overflow: hidden;
    pointer-events: none;
    -webkit-user-select: none;
}

div.audio-message-time {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 4px;
    margin-bottom:3px;
    -webkit-user-select: none;
    min-width: 32px;
    text-align: center;
    
}

.audio-message-time-string {
    font-size: 13px;
}

[from-me="yes"] .audio-message-time-string {
    color: #ffffff;
}

[from-me="no"] .audio-message-time-string {
    color: #000000;
}


/* file transfer */
.transfer {
    display: -webkit-box;
    cursor: default;
    -webkit-user-select: none;
    -webkit-box-direction: normal;
}

transfer-atom {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    cursor: default;
    -webkit-box-flex: 1;
}

.transfer-icon {
    height: 16px;
    width: 16px;
    pointer-events: none;
    padding-top: 3px;
}

.transfer-text {
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-flex: 2;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all;
    padding-left: 5px;
    pointer-events: none;
}

.transfer-button-container {
    -webkit-user-select: none;
}
.transfer-button-container img {
    width: 14px;
    height: 14px;
    padding-top: 5px;
    padding-left: 5px;
    -webkit-user-select: none;
}

.transfer-button-download {
    content:url(transcript-resource://transfer-button/NSTransferDownload/14/noinvert/unpressed);
}
.transfer-button-download-mousedown {
    content:url(transcript-resource://transfer-button/NSTransferDownload/14/noinvert/pressed);
}

.transfer-button-info {
    content:url(transcript-resource://transfer-button/NSTransferShowInfo/14/noinvert/unpressed);
}
.transfer-button-info-mousedown {
    content:url(transcript-resource://transfer-button/NSTransferShowInfo/14/noinvert/pressed);
}

.transfer-button-decline {
    content:url(transcript-resource://transfer-button/NSStopProgressFreestandingTemplate/14/noinvert/unpressed);
}
.transfer-button-decline-mousedown {
    content:url(transcript-resource://transfer-button/NSStopProgressFreestandingTemplate/14/noinvert/pressed);
}

.transfer-button-reveal {
    content:url(transcript-resource://transfer-button/NSRevealFreestandingTemplate/14/noinvert/unpressed);
}
.transfer-button-reveal-mousedown {
    content:url(transcript-resource://transfer-button/NSRevealFreestandingTemplate/14/noinvert/pressed);
}

@media (prefers-dark-interface) {

    .transfer-button-download {
        content:url(transcript-resource://transfer-button/NSTransferDownload/14/noinvert/unpressed/dark);
    }
    .transfer-button-download-mousedown {
        content:url(transcript-resource://transfer-button/NSTransferDownload/14/noinvert/pressed/dark);
    }

    .transfer-button-info {
        content:url(transcript-resource://transfer-button/NSTransferShowInfo/14/noinvert/unpressed/dark);
    }
    .transfer-button-info-mousedown {
        content:url(transcript-resource://transfer-button/NSTransferShowInfo/14/noinvert/pressed/dark);
    }

    .transfer-button-decline {
        content:url(transcript-resource://transfer-button/NSStopProgressFreestandingTemplate/14/noinvert/unpressed/dark);
    }
    .transfer-button-decline-mousedown {
        content:url(transcript-resource://transfer-button/NSStopProgressFreestandingTemplate/14/noinvert/pressed/dark);
    }

    .transfer-button-reveal {
        content:url(transcript-resource://transfer-button/NSRevealFreestandingTemplate/14/noinvert/unpressed/dark);
    }
    .transfer-button-reveal-mousedown {
        content:url(transcript-resource://transfer-button/NSRevealFreestandingTemplate/14/noinvert/pressed/dark);
    }
}

.transfer-button-nodisplay {
    display: none;
}

.progresswheel {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 14px;
    height: 14px;
    pointer-events: none;
    color: white;
}

@media (prefers-dark-interface) {
    .progresswheel {
        color: black;
    }
}

.transfer-button-container img.progresswheel {
    position: relative;
    bottom: 0px;
    left: 0px;
    width: 14px;
    height: 14px;
    -webkit-user-select: none;
}

.livephotobadge {
    position: absolute;
    width: 30px;
    height: 30px;
    pointer-events: none;
    content:url(transcript-resource://coreui/livePhoto-wShadow);
}

[from-me="no"] .livephotobadge {
    top: 1px;
    left: 3px;
}

[from-me="yes"] .livephotobadge {
    top: 0px;
    left: 0px;
}

@media screen and (-webkit-device-pixel-ratio:2) {
    img.livephotobadge {
        content:url(transcript-resource://coreui/livePhoto-wShadow-2x);
    }
}

[extension="unknown_file_extension"] {
    content:url(transcript-resource://iconpreview/unknown_file_extension/16);
}

@media screen and (-webkit-device-pixel-ratio:2) {
    body {
        -webkit-font-smoothing:antialiased;
    }
    .transfer-button-download {
        content:url(transcript-resource://transfer-button/NSTransferDownload-2x/14/noinvert/unpressed);
    }
    .transfer-button-download-mousedown {
        content:url(transcript-resource://transfer-button/NSTransferDownload-2x/14/noinvert/pressed);
    }

    .transfer-button-info {
        content:url(transcript-resource://transfer-button/NSTransferShowInfo-2x/14/noinvert/unpressed);
    }
    .transfer-button-info-mousedown {
        content:url(transcript-resource://transfer-button/NSTransferShowInfo-2x/14/noinvert/pressed);
    }

    .transfer-button-decline {
        content:url(transcript-resource://transfer-button/NSStopProgressFreestandingTemplate-2x/14/noinvert/unpressed);
    }
    .transfer-button-decline-mousedown {
        content:url(transcript-resource://transfer-button/NSStopProgressFreestandingTemplate-2x/14/noinvert/pressed);
    }

    .transfer-button-reveal {
        content:url(transcript-resource://transfer-button/NSRevealFreestandingTemplate-2x/14/noinvert/unpressed);
    }
    .transfer-button-reveal-mousedown {
        content:url(transcript-resource://transfer-button/NSRevealFreestandingTemplate-2x/14/noinvert/pressed);
    }
}

@media screen and (-webkit-device-pixel-ratio:2) and (prefers-dark-interface) {
    body {
        -webkit-font-smoothing:antialiased;
    }
    .transfer-button-download {
        content:url(transcript-resource://transfer-button/NSTransferDownload-2x/14/noinvert/unpressed/dark);
    }
    .transfer-button-download-mousedown {
        content:url(transcript-resource://transfer-button/NSTransferDownload-2x/14/noinvert/pressed/dark);
    }

    .transfer-button-info {
        content:url(transcript-resource://transfer-button/NSTransferShowInfo-2x/14/noinvert/unpressed/dark);
    }
    .transfer-button-info-mousedown {
        content:url(transcript-resource://transfer-button/NSTransferShowInfo-2x/14/noinvert/pressed/dark);
    }

    .transfer-button-decline {
        content:url(transcript-resource://transfer-button/NSStopProgressFreestandingTemplate-2x/14/noinvert/unpressed/dark);
    }
    .transfer-button-decline-mousedown {
        content:url(transcript-resource://transfer-button/NSStopProgressFreestandingTemplate-2x/14/noinvert/pressed/dark);
    }

    .transfer-button-reveal {
        content:url(transcript-resource://transfer-button/NSRevealFreestandingTemplate-2x/14/noinvert/unpressed/dark);
    }
    .transfer-button-reveal-mousedown {
        content:url(transcript-resource://transfer-button/NSRevealFreestandingTemplate-2x/14/noinvert/pressed/dark);
    }
}

/* PassKit Passes */
.pass-text {
    margin-left:9px;
}

/* Error Buttons */

[error-icon-pressed] span {
    -webkit-user-select: none !important;
}

error-button {
    width: 21px;
    height: 22px;
    cursor: pointer;
    display: block;
    padding: 0px 11px 6px 0px;
}
error-icon {
    display: block;
    width: 21px;
    height: 22px;
    background-size: 21px 22px;
    background-position: center;
    background-repeat: no-repeat;
    background-image:url(transcript-resource://coreui/exclamation);
}
error-icon:active {
    background-image:url(transcript-resource://coreui/exclamation-pressed);
}

@media screen and (-webkit-device-pixel-ratio:2) {
    error-icon {
        background-image:url(transcript-resource://coreui/exclamation-2x);
    }
    error-icon:active {
        background-image:url(transcript-resource://coreui/exclamation-pressed-2x);
    }
}

/* RTL */

[text-direction="rtl"] {
    direction: rtl !important;
    unicode-bidi: embed;
}
[text-direction="ltr"] {
    direction: ltr !important;
}

messagetextcontainer[text-direction="rtl"], messagesubject[text-direction="rtl"] {
    text-align: right !important;
}
messagetextcontainer[text-direction="ltr"], messagesubject[text-direction="ltr"] {
    text-align: left !important;
}

/* Invisible Ink */

.parent-of-photo-invisible-ink {
	position: relative;
}

.loading-invisible-ink {
    visibility: hidden;
}

canvas.photo-invisible-ink {
	width:    100%;
  	height:   100%;
	position: absolute;
  	top:      0px;
  	left:     0px;
}

canvas.text-invisible-ink-gl {
	width:    100%;
  	height:   100%;
	position: absolute;
  	top:      0px;
  	left:     0px;
}

messagebody.text-invisible-ink {
	position: relative;
}

messagebody.text-invisible-ink > messagetextcontainer {
    filter: blur(5px);
}

messagetext.text-invisible-ink-gl {
	position: relative;
}

messagebody.text-invisible-ink-gl {
	position: relative;
}

canvas.text-invisible-ink {
    width:    100%;
    height:   100%;
    position: absolute;
    top:      0px;
    left:     0px;
    pointer-events: none;
}

/* Rich Link Plugins */

chatitem[general-plugin="yes"] [typing-indicator="no"][emote="no"] messagetext {
    max-width: 90%;
}

/* Debug Styles */

messagetext-debug {
    display: none;
}

[show-debug-text] messagebody,
[show-debug-text] messagetextcontainer {
    opacity: 0;
}

[show-debug-text] messagetext-debug {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index:1;
}

[show-debug-text] buddyicon {
    visibility: hidden;
}

[show-debug-text] messagetext-debug-content {
    display: block;
    position: relative;
    left: -50%;
    top: -50%;
    background-color:rgba(255,255,255,0.6);
    font-size:10px;
}

replay-item {
    position : relative;
    cursor: pointer;
    overflow:hidden;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: left center;
    background-image:url(transcript-resource://coreui/replay-icon);
    padding-left: 12px;
    z-index:0;

    font-weight: 600;
    font-size:11px;
    color:rgb(142,142,147);

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-sizing:border-box;
}

replay-item[from-me="no"] {
    margin-left: 28px;
}

[showmypicture="yes"] replay-item[from-me="no"] {
    margin-left: 58px;
}

replay-item[from-me="yes"] {
    margin-right: 26px;
    float: right;
}

[showmypicture="yes"] replay-item[from-me="no"]  {
    margin-right: 56px;
    float: right;
}

replay-item:hover {
    color:rgb(27,129,244);
    cursor: pointer;
}

@keyframes animate-loudly-outer {
    0%      {   transform: translate(-045.00%, 045.00%) scale( 00.10, 00.10) rotate( 0.0grad); animation-timing-function: cubic-bezier(0.34,0,0.28,1); }
    13%     {   transform: translate(-033.00%, 33.00%) scale( 00.33, 00.33) rotate( 0.0grad); }
    23%     {   transform: translate(-016.50%, 016.50%) scale( 00.66, 00.66) rotate(-4.0grad); }
    26%     {   transform: translate( 000.00%, 000.00%) scale( 01.00, 01.00) rotate( 5.0grad); }
    31%     {   transform: translate( 012.50%,-012.50%) scale( 01.25, 01.25) rotate(-3.2grad); }
    35%     {   transform: translate( 025.00%,-025.00%) scale( 01.50, 01.50) rotate( 3.0grad); }
    38%     {   transform: translate( 035.00%,-035.00%) scale( 01.75, 01.75) rotate(-2.6grad); }
    42%     {   transform: translate( 050.00%,-050.00%) scale( 02.00, 02.00) rotate( 1.3grad); animation-timing-function: linear; }
    43%     {   transform: translate( 050.00%,-050.00%) scale( 02.00, 02.00) rotate( 1.9grad); }
    47%     {   transform: translate( 050.00%,-050.00%) scale( 02.00, 02.00) rotate(-1.4grad); }
    53%     {   transform: translate( 050.00%,-050.00%) scale( 02.00, 02.00) rotate( 1.0grad); }
    61%     {   transform: translate( 050.00%,-050.00%) scale( 02.00, 02.00) rotate(-1.0grad); }
    65%     {   transform: translate( 050.00%,-050.00%) scale( 02.00, 02.00) rotate( 0.5grad); }
    68%     {   transform: translate( 050.00%,-050.00%) scale( 02.00, 02.00) rotate(-0.5grad); }
    72%     {   transform: translate( 050.00%,-050.00%) scale( 02.00, 02.00) rotate( 0.0grad); animation-timing-function: cubic-bezier(0.42,0,0.32,1.0); }
    100%    {   transform: translate( 000.00%, 000.00%) scale( 01.00, 01.00) rotate( 0.0grad);  }
}

@keyframes animate-loudly-inner {
    0%      {   transform: scale( 1, 1); }
    49%     {   transform: scale( 1, 1); }
    70%     {   transform: scale( 1.15, 1.15); animation-timing-function: cubic-bezier(0.24, 0.0, 0.18, 1.0); }
    90%     {   transform: scale( 01.00, 01.00); }
    100%    {   transform: scale( 01.00, 01.00); }
}

@keyframes animate-gently-outer {
    0%      {   transform: translate(-045.00%, 045.00%) scale( 00.10, 00.10); animation-timing-function: cubic-bezier(.35,0,.50,1); }
    15%     {   transform: translate( 025.00%,-025.000%) scale( 01.50, 01.50); animation-timing-function: linear; }
    26%     {   transform: translate( 025.00%,-025.00%) scale( 01.50, 01.50); animation-timing-function: cubic-bezier(.20,0,.23,1); }
    100%    {   transform: translate( 000.00%, 000.00%) scale( 01.00, 01.00); }
}

@keyframes animate-gently-inner {
    0%      {   transform: scale( 00.5, 00.5); animation-timing-function: cubic-bezier(0.24, 0.0, 0.18, 1.0); }
    26%      {   transform: scale( 00.5, 00.5); animation-timing-function: cubic-bezier(0.24, 0.0, 0.18, 1.0); }
    100%    {   transform: scale( 01.00, 01.00); }
}

@keyframes animate-slam-outer {
    0%      {   transform: translate( 100.00%,-050.00%) scale( 03.00, 03.00) rotate( 11.0grad); animation-timing-function: cubic-bezier(0.054, 0.145, 0.355, 0.648);}
    24%     {   transform: translate( 250.00%,-100.00%) scale( 06.00, 06.00) rotate( 07.0grad); animation-timing-function: cubic-bezier(0.625, 0.325, 0.939, 0.823);}
    50%     {   transform: translate(-000.04%, 000.04%) scale( 00.92, 00.92) rotate(-03.0grad); animation-timing-function: cubic-bezier(0.002, 0.006, 0.066, 0.151);}
    51%     {   transform: translate(-000.05%, 000.05%) scale( 00.90, 00.90) rotate(-01.5grad); animation-timing-function: cubic-bezier(0.182, 0.081, 0.687, 0.886);}
    75%     {   transform: translate( 000.03%,-000.03%) scale( 01.2, 01.06) rotate( 00.0grad); animation-timing-function: cubic-bezier(0.004, 0.010, 0.111, 0.190);}
    78%     {   transform: translate( 000.04%,-000.04%) scale( 01.25, 01.08) rotate( 00.0grad); animation-timing-function: cubic-bezier(0.442, 0.118, 0.868, 1.000);}
    100%    {   transform: translate( 000.00%, 000.00%) scale( 01.00, 01.00) rotate( 00.0grad); }
}

@keyframes animate-slam-inner {
}

.loud-impact-animation-outer {
    animation-name: animate-loudly-outer;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}

.loud-impact-animation-inner {
    animation-name: animate-loudly-inner;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}

.gentle-impact-animation-outer {
    animation-name: animate-gently-outer;
    animation-duration: 4s;
    animation-iteration-count: 1;
}

.gentle-impact-animation-inner {
    animation-name: animate-gently-inner;
    animation-duration: 4s;
    animation-iteration-count: 1;
}

.slam-impact-animation-outer {
    animation-name: animate-slam-outer;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
}

.slam-impact-animation-inner {
    animation-name: animate-slam-inner;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
}

@keyframes slam-splash-previous-frames {
    0%  { transform: translate( 0px, -10px); }
    2.5% { transform: translate( 0%, -20px); }
    5% { transform: translate( 0%,   -30px); }
    7.5% { transform: translate( 0%, -40px); }
    100% { transform: translate( 0px, 0px); }
}

.slam-splash-previous {
    animation-name: slam-splash-previous-frames;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes slam-splash-next-frames {
    0%  { transform: translate( 0px, 10px); }
    2.5% { transform: translate( 0%, 20px); }
    5% { transform: translate( 0%,   30px); }
    7.5% { transform: translate( 0%, 40px); }
    100% { transform: translate( 000.0%,000.0%); }
}

.slam-splash-next {
    animation-name: slam-splash-next-frames;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

facetime-bubble-container {
    display:-webkit-flex;
}

facetime-bubble {
    position:relative;
    overflow:hidden;
    display: block;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-sizing:border-box;
    
    padding-top: 8px;
    padding-bottom: 1px;
    padding-right: 12px;
    padding-left: 18px;
    
    background-color:rgb(92,86,84);
    -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote) 11 15 12 17;

    margin-top: 10px;
    margin-left: 10px;
    
    -webkit-user-select: none;
}

chatitem[item-type="facetime"] {
    overflow:hidden;
}

/* First item in facetime bubble */
facetime-icon {
    background-size: 40px 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-image:url(transcript-resource://coreui/facetime-app-icon);

    display: inline-block;
    position: relative;
    
    width: 40px;
    height: 40px;
}

/* Second item in facetime bubble, this contains "FaceTime" header and info text  */
facetime-bubble-text-container {
    position:relative;
    top: -8px;
    display: -webkit-inline-box;
    -webkit-box-orient:vertical;
    -webkit-box-sizing:border-box;
    
    margin-left: 8px;
    margin-right: 16px;
}

/* inside the facetime-bubble-text-container on top */
facetime-bubble-inner-text-header {
    position: relative;
    display: block;
    font-size:13px;
    font-weight:600;
    font-family: -apple-system;    
    color : #FFFFFF;
}

/* inside the facetime-bubble-text-container on bottom */
facetime-bubble-inner-text {
    position: relative;
    display: block;
    font-size:11px;
    font-weight:normal;
    font-family: -apple-system;
    color: #cccccc;
}

/* Last item inside facetime bubble, one of two possible buttons */
facetime-join-button {
    cursor: pointer;
    position: relative;
    top: -15px;
    
    display: -webkit-inline-box;
    
    border-radius: 6px;
    
    background-color: rgb(30, 222, 78);
    
    color: #FFFFFF;
    font-size:13px;
    font-weight:600;
    font-family: -apple-system;
    
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 5px;
    padding-bottom:5px;
    
    -webkit-user-select: none;
}

facetime-join-button:active {
    background-color: rgba(30, 222, 78, 0.8); 
    cursor: pointer;
}

facetime-join-button:hover {
    cursor: pointer;
}

/* Last item inside facetime bubble, one of two possible buttons */
facetime-info-button {
    cursor: pointer;
    position: relative;
    display: inline-block;
    top: -12px;

    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-image:url(transcript-resource://coreui/facetime-info?template=true&width=20&height=20&color=grayColor);
    
    width: 20px;
    height: 20px;    

    opacity:1.0; 
}

facetime-info-button:active {
    opacity:0.6; 
    cursor: pointer;
}

facetime-info-button:hover {
    cursor: pointer;
}

@media (prefers-dark-interface) {
    facetime-bubble {
        background-color:rgb(92,86,84);
    }
    facetime-bubble-inner-text-header {
        color : #FFFFFF;
    }
    facetime-bubble-inner-text {
        color: #cccccc;
    }
}

@media screen and (-webkit-device-pixel-ratio:2) {
    facetime-bubble {
        -webkit-mask-box-image-width: 11px 15px 12px 17px;
        -webkit-mask-box-image:url(transcript-resource://coreui/bubble-remote-2x) 22 30 24 34;
    }
}

selection-overlay {
    position:absolute;
    box-sizing:border-box;
    width:100%;
    height:100%;
    left:0px;
    bottom:0px;
    background-color:rgba(206,206,210,0.4);
    pointer-events: none;
}

/* don't select big emoji */
[big-emoji="yes"] messagetext selection-overlay {
    display: none;
}
[big-emoji="yes"] messagetext.text-invisible-ink-gl selection-overlay {
    display: unset;
}

.inline-image[handwriting="yes"] {
    background-color : white;
}