:root {
    --jsxc-color-main-text: var(--cx-dark);
    --jsxc-color-main-background-translucent: rgba(255, 255, 255, 0.8);
    --jsxc-color-background-hover: var(--cx-gray-light);
    --jsxc-color-background-dark: var(--cx-gray-lighter);
    --jsxc-color-background-dark-translucent: rgba(70, 70, 70, 0.8);
    --jsxc-color-background-darker: var(--cx-gray-light);
    --jsxc-color-placeholder-light: #e6e6e6;
    --jsxc-color-placeholder-dark: #ccc;
    --jsxc-color-primary: var(--cx-blue);
    --jsxc-color-primary-light: #e6f3fa;
    --jsxc-color-primary-text: #fff;
    --jsxc-color-primary-text-dark: #ededed;
    --jsxc-color-error: var(--cx-red);
    --jsxc-color-warning: var(--cx-orange);
    --jsxc-color-success: var(--cx-green);
    --jsxc-color-text-maxcontrast: #767676;
    --jsxc-color-text-light: #222;
    --jsxc-color-text-lighter: #767676;
    --jsxc-color-loading-light: #ccc;
    --jsxc-color-loading-dark: #444;
    --jsxc-color-box-shadow: rgba(192, 197, 209, .5);
    --jsxc-color-border: #ededed;
    --jsxc-color-border-dark: #dbdbdb;

    --cx-red-subtle: #fadbd8;
    --cx-blue-hover: #003270;
    --chat-out: #cbdff4;
    --chat-in: #fff;
    --unread: var(--cx-orange-dark);
    --cx-twink1: #fcf1af;
}

/* REMOVE ELEMENTS */
.jsxc-filter-wrapper,
.jsxc-contact-list-wrapper>.jsxc-collapsible,
.jsxc-group-list,
.jsxc-js-main-menu,
.jsxc-js-notice-menu {
    display: none;
}

/* TOGGLE */
.jsxc-roster-toggle {
    background: var(--cx-blue)url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" height="24" viewBox="0 0 24 24" width="24"><path d="M5 14H4a2 2 0 01-2-2v-8a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H8.999L9 14l-4 4v-4zm11-10h-12v8h12v-8zM17 6h3a2 2 0 012 2v8a2 2 0 01-2 2h-1V22l-4-4 .001-0H9v-2h11v-8H17v-2z"/></svg>') no-repeat 50%/24px;
    width: 36px;
    height: 36px;
    top: 23px;
    border-radius: 5px 0 0 5px;
    border: 1px solid #FFF;
    border-right: 0;
    opacity: 0.25;
}

.jsxc-roster-toggle:hover {
    background-color: var(--cx-blue-hover);
    width: 46px;

    opacity: 1;
}

body.jsxc-roster-shown .jsxc-roster-toggle:hover {
    width: 36px;
}

.jsxc-roster-toggle:after {
    border: none;
}

.jsxc-roster-shown .jsxc-roster-toggle::after {
    transform: none;
}

/* toggle unread  */
#jsxc-roster:has(.jsxc-bar--has-unread-msg) .jsxc-roster-toggle {
    background: #004e96 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" height="24" viewBox="0 0 24 24" width="24"><path d="M15,20c0,1.104-0.671,2-1.5,2h-3C9.671,22,9,21.104,9,20H15z M20.429,19H3.571C2.69,19,2,18.252,2,17.297c0-0.473,0.197-1.132,1.134-1.587c0.021-0.01,1.374-0.672,1.983-1.945 c0.251-0.526,0.274-1.238,0.302-2.14c0.042-1.302,0.093-2.922,0.882-4.84c0.625-1.519,1.81-2.581,3.38-3.049 C9.962,2.736,10.895,2,12,2s2.038,0.736,2.319,1.736c1.57,0.469,2.756,1.531,3.38,3.049c0.789,1.918,0.84,3.538,0.882,4.84 c0.028,0.902,0.051,1.614,0.303,2.141c0.608,1.272,1.957,1.932,1.97,1.938C21.165,15.865,22,16.299,22,17.297 C22,18.236,21.295,19,20.429,19z M4.849,17h14.301c-0.648-0.459-1.53-1.242-2.07-2.372c-0.433-0.906-0.464-1.894-0.498-2.94 c-0.038-1.2-0.081-2.56-0.732-4.143c-0.462-1.123-1.344-1.8-2.621-2.013c-0.531-0.088-0.897-0.582-0.828-1.115 C12.405,4.163,12.223,4,12,4s-0.405,0.163-0.405,0.364c0.074,0.537-0.29,1.081-0.824,1.169C9.494,5.746,8.612,6.423,8.15,7.546 c-0.651,1.583-0.694,2.943-0.732,4.143c-0.033,1.046-0.064,2.034-0.497,2.939C6.382,15.754,5.503,16.537,4.849,17z"/></svg>')no-repeat 50%/24px;
    animation: toggleunread 2s ease-in-out infinite;
}

/* MAIN LIST */
#jsxc-roster {
    min-width: 240px;
    flex-direction: column-reverse;
    /* bottom: 32px;
    top: 92px; */
    bottom: 0;
    top: 25vh;
    border: 1px solid #E9EAEE;
    box-shadow: var(--cx-box-shadow-sm) !important;
}

.jsxc-roster-hidden #jsxc-roster {
    right: -240px;
}

/* topo (user) */
#jsxc-roster>.jsxc-bottom {
    padding: 16px 8px;
    background: var(--cx-gray-lighter);
    border-bottom: solid 1px var(--cx-gray-light);
}

/*    */
.jsxc-bar__caption * {
    width: 100%
}

/* lista  status */
.jsxc-menu--pushup .jsxc-menu__content {
    background-color: var(--cx-white);
    bottom: unset;
    box-shadow: 0 5px 5px -2px var(--jsxc-color-box-shadow);
    margin-top: 6px
}

.jsxc-menu--pushup li:hover:not(.jsxc-disabled) {
    opacity: 1
}

.jsxc-menu--pushup li {
    height: unset;
    line-height: 24px;
    opacity: 1;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 8px;
    padding-left: 16px
}

.jsxc-menu--pushup li::before {
    position: relative;
    margin-top: unset;
    left: unset;
    top: unset;
}

/* Remove status desnecessários */
li.jsxc-extended-status,
li.jsxc-chat,
li.jsxc-xa,
li.jsxc-offline {
    display: none;
}

/* lista de contatos */
.jsxc-contact-list-wrapper {
    background: var(--cx-white)
}

.jsxc-bar {
    height: unset;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.jsxc-bar--has-unread-msg .jsxc-bar {
    max-width: calc(100% - 1em);
}

.jsxc-contact-list {
    display: flex;
    flex-direction: column;
}

.jsxc-contact-list li {
    padding: 8px;
    cursor: pointer
}

/* nome e resumo do chat */
.chat-username {
    font-size: 1.25em;
    font-weight: 500;
    text-shadow: 0 1px #ffffff;
}

.chat-status {
    font-size: .85rem;
    color: var(--cx-secondary-color);
    text-shadow: 0 1px #ffffff;
}

.jsxc-bar__caption__primary {
    font-family: "Segoe UI", Arial, sans-serif;
}

/* oculta resumo do chat */
.jsxc-bar__caption__secondary {
    display: none;
}

/* altera posição da flag unread */
.jsxc-bar--has-unread-msg .jsxc-bar__caption__primary {
    font-weight: bold;
}

.jsxc-bar--has-unread-msg {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: start;
}

.jsxc-chatmessage .jsxc-content p {
    clear: both;
    font-size: 1em;
    margin: 0;
    line-height: 1.15em;
}

.jsxc-bar--has-unread-msg::before {
    background-color: var(--unread);
    border-radius: 50%;
    color: var(--cx-white);
    content: "";
    display: inline-block;
    height: 8px;
    margin-right: unset;
    text-align: center;
    width: 8px;
    flex-shrink: 0;
}

/* AVATAR */
/* adiciona gradiente */
.jsxc-avatar {
    pointer-events: none !important;
}

.jsxc-avatar:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #00000022, #00000088);
    border-radius: 50%;
    mix-blend-mode: soft-light;
}

/* inativo */
.jsxc-avatar {
    background-color: var(--cx-gray-medium) !important;
    font: normal 16px/28px "Segoe UI", sans-serif !important;
    margin: 0;
    height: 28px;
    width: 28px;
}

.jsxc-bottom .jsxc-avatar {
    height: 36px;
    width: 36px
}

/* loading */
.jsxc-avatar--loading::after {
    margin-left: 0;
    margin-top: 0;
}

/* offline */
#jsxc-roster[data-presence=offline] .jsxc-bottom .jsxc-avatar {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M15.815,12.631C17.149,11.531,18,9.865,18,8c0-3.314-2.687-6-6-6S6,4.686,6,8c0,1.865,0.851,3.531,2.185,4.631 C4.556,13.881,2,16.857,2,20.333C2,21.254,2.896,22,4,22h16c1.104,0,2-0.746,2-1.667C22,16.857,19.444,13.881,15.815,12.631z M8,8 c0-2.206,1.794-4,4-4s4,1.794,4,4s-1.794,4-4,4S8,10.206,8,8z M4.011,20c0.22-3.338,3.719-6,7.989-6s7.769,2.662,7.989,6H4.011z"/></svg>') no-repeat 50%/24px;
}

/* status */
.jsxc-avatar::before {
    top: unset;
    left: unset;
    bottom: -2px;
    right: -5px;
    height: 8px !important;
    width: 8px !important;
    border-color: var(--cx-white)
}

.jsxc-bar--window .jsxc-avatar::before {
    transition: border-color .3s ease;
}

.jsxc-roster-item:hover .jsxc-avatar::before {
    border-color: var(--cx-gray-light)
}

.jsxc-roster-item:hover {
    background-color: #f3f3f5;
}

#jsxc-roster>.jsxc-bottom:hover {
    background-color: #f3f3f5;
}

#jsxc-window-list .jsxc-bar--window:not(.jsxc-minimized) .jsxc-avatar::before {
    border-color: var(--cx-blue);
}

#jsxc-window-list .jsxc-highlight .jsxc-bar--window:not(.jsxc-minimized) .jsxc-avatar::before {
    border-color: var(--cx-gray-medium);
}

#jsxc-window-list .jsxc-minimized .jsxc-bar--window .jsxc-avatar::before {
    border-color: var(--jsxc-color-background-dark) !important;
}

.jsxc-contact-list [data-presence=online] .jsxc-avatar::before,
.jsxc-group-list [data-presence=online] .jsxc-avatar::before,
#jsxc-window-list [data-presence=online] .jsxc-bar--window .jsxc-avatar::before,
.jsxc-menu--pushup [data-presence=online]::before {
    background: var(--cx-green)
}

.jsxc-contact-list [data-presence=dnd] .jsxc-avatar::before,
.jsxc-group-list [data-presence=dnd] .jsxc-avatar::before,
#jsxc-window-list [data-presence=dnd] .jsxc-bar--window .jsxc-avatar::before,
.jsxc-menu--pushup [data-presence=dnd]::before {
    background: var(--cx-red)
}

.jsxc-contact-list [data-presence=away] .jsxc-avatar::before,
.jsxc-group-list [data-presence=away] .jsxc-avatar::before,
#jsxc-window-list [data-presence=away] .jsxc-bar--window .jsxc-avatar::before,
.jsxc-menu--pushup [data-presence=away]::before {
    background: var(--cx-orange)
}

/* CHAT */
/* navegar entre chats */
#jsxc-window-list-handler {
    z-index: 80;
    bottom: 31px;
    width: 60px;
    height: 32px;
}

#jsxc-window-list-handler>div {
    color: transparent;
    content: '';
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" width="24" height="24" viewBox="0 0 24 24"><path d="M14.542,2.43l-7.933,8.072c-0.811,0.827-0.811,2.168,0,2.995l7.933,8.072 c0.563,0.573,1.474,0.574,2.037,0s0.563-1.503,0-2.077L9.21,12l7.368-7.493c0.563-0.573,0.563-1.503,0-2.077 S15.104,1.856,14.542,2.43z"/></svg>') no-repeat 50%/ 20px;
    background-color: var(--cx-blue);
    width: 30px;
    border-radius: 5px 0 0 5px;
}

.jsxc-scrollRight {
    transform: scaleX(-1)
}

#jsxc-window-list-handler>div:hover {
    background-color: #003270;
}

/* posição */
#jsxc-window-list {
    right: 240px;
    /* bottom: 32px */
    bottom: 0;
    z-index: 499;
}

#jsxc-window-list>ul>li {
    margin-right: 0;
    width: 100% !important;
    height: 100vh;
}

/* janela chat */

.jsxc-window {
    border-radius: 6px 6px 0 0;
    transition: background-color .3s;

    height: var(--vh);
    width: 100vw;
    position: fixed;
    top: 0;
    bottom: 0;
}

.jsxc-normal .jsxc-window {
    background: var(--cx-blue);
}

.jsxc-highlight .jsxc-window {
    background-color: var(--cx-gray-medium);
}

.jsxc-highlight .jsxc-bar--window {
    background-color: var(--cx-gray-medium);
}

.jsxc-normal .jsxc-bar--window:hover {
    color: var(--jsxc-color-primary-text);
}

/* corrige borda do avatar no chat */
.jsxc-avatar[style^="background-image"] {
    background-color: transparent !important
}

.jsxc-window .jsxc-bar {
    padding: 8px 4px 8px 8px
}

.jsxc-window .jsxc-avatar {
    margin: 0;
}

.jsxc-bar__action-entry {
    height: 25px;
}

.jsxc-bar--window .jsxc-js-close:hover {
    color: var(--cx-red);
}

.jsxc-icon--clickable:hover {
    color: var(--cx-blue);
}

/* mensagens */
.jsxc-window-fade {
    background: #f3f3f5;
    height: calc(100% - 44px);
    width: 100%;
}

.jsxc-window .jsxc-message-area {
    padding-bottom: 8px
}

.jsxc-chatmessage .jsxc-menu.jsxc-menu--vertical-right,
.jsxc-chatmessage .jsxc-menu.jsxc-menu--vertical-left {
    display: none;
}

.jsxc-out {
    background: var(--chat-out);
}

.jsxc-chatmessage.jsxc-out[data-mark=aborted]:after {
    border-left-color: #fadbd8;
}

.jsxc-out,
.jsxc-probably_out,
.jsxc-in,
.jsxc-probably_in {
    max-width: 360px;
}

.jsxc-in {
    background: var(--chat-in);
}

.jsxc-mam-load-more span {
    background-color: unset;
    color: var(--cx-tertiary-color);
    border-radius: 5px
}

.jsxc-timestamp {
    color: var(--cx-body-color);
    line-height: 1.3em;
    opacity: .35;
}

.jsxc-content p {
    text-align: left;
    text-shadow: 0 1px #ffffff66;
}

.jsxc-chatmessage {
    padding-bottom: .3em;
    margin: 3px 6px;
    display: flex;
    flex-direction: column;
}

.jsxc-chatmessage__footer {
    align-items: flex-end;
    margin-top: 2px;
    order: 10;
}

/* mensagens não lidas no chat */
.jsxc-chatmessage {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .1));
}

.jsxc-normal .jsxc-unread {
    animation: unreadpulse 2.5s ease-in 2;
}

.jsxc-in .jsxc-timestamp {
    float: none;
    display: flex;
    align-items: center;
}

.jsxc-unread .jsxc-timestamp::before {
    display: none;
}


/* speech bubble */
.jsxc-in+.jsxc-out:after,
.jsxc-out:first-of-type:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-left-color: var(--chat-out);
    border-right: 0;
    border-bottom: 0;
    margin-top: -3.5px;
    margin-right: -7px;
}

.jsxc-out+.jsxc-in:after,
.jsxc-in:first-of-type:after,
.jsxc-unread+.jsxc-in:not(.jsxc-unread):after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0%;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-right-color: var(--chat-in);
    border-left: 0;
    border-bottom: 0;
    margin-top: -3.5px;
    margin-left: -7px;
}

/* janela minimizada */
#jsxc-window-list>ul>li.jsxc-minimized {
    width: 100% !important;
}

.jsxc-minimized .jsxc-bar--window {
    border: solid 1px var(--cx-gray-medium);
    border-bottom: none;
    border-radius: 6px 6px 0 0
}

/* corrige fundo azul na janela minimizada */
.jsxc-minimized .jsxc-window {
    background: transparent;
    height: var(--vh);
}

/* janela minimizada com mensagem não lida */
.jsxc-minimized .jsxc-bar--window:has(+ .jsxc-window-fade .jsxc-unread) {
    animation: twink 1.5s ease-in infinite;
}

.jsxc-minimized .jsxc-bar--window:has(+ .jsxc-window-fade .jsxc-unread):after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    background: var(--cx-orange);
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 5px;
}

/* ocultar ícones */
.jsxc-bar__action-entry.jsxc-menu,
.jsxc-bar__action-entry.jsxc-audio,
.jsxc-bar__action-entry.jsxc-video {
    display: none;
}

.jsxc-send-area .jsxc-file-transfer,
.jsxc-send-area .jsxc-transfer {
    display: none;
}

/* campo texto */
.jsxc-send-area {
    align-items: start;
    border-top: solid 1px var(--cx-border-color);
    z-index: 10;
}

.jsxc-menu--emoticons {
    font-size: 18px;
}

.jsxc-large-send-area .jsxc-message-input {
    height: 60px;
}

/* confirmação leitura */
[data-mark=transferred] .jsxc-mark::before {
    content: "";
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%239FA5B8" height="24" viewBox="0 0 24 24" width="24"><path d="M19.632,6.406L9.5,16.54l-5.132-5.134c-0.542-0.542-1.419-0.542-1.961,0c-0.542,0.542-0.542,1.42,0,1.961l6.387,6.385c0.39,0.391,1.024,0.391,1.414,0L21.594,8.368c0.542-0.542,0.542-1.419,0-1.961 C21.052,5.865,20.174,5.865,19.632,6.406z"/></svg>') no-repeat 50%/cover;
    height: 12px;
    width: 12px;
    display: block;
    filter: unset;
    opacity: unset;
}

[data-mark=received] .jsxc-mark::before {
    content: "";
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%239FA5B8" height="24" viewBox="0 0 24 24" width="24"><path d="M13.632,6.406L5.5,14.54l-3.132-3.134c-0.542-0.542-1.419-0.542-1.961,0 c-0.542,0.542-0.542,1.42,0,1.961l4.387,4.385c0.39,0.391,1.023,0.391,1.414,0l9.387-9.385c0.542-0.542,0.542-1.419,0-1.961 C15.052,5.865,14.174,5.865,13.632,6.406z M20.632,6.406L12.5,14.54L11.96,14L10,15.96l1.793,1.793c0.39,0.391,1.024,0.391,1.414,0 l9.387-9.385c0.542-0.542,0.542-1.419,0-1.961C22.052,5.865,21.174,5.865,20.632,6.406z"/></svg>') no-repeat 50%/cover;
    height: 14px;
    width: 14px;
    display: block;
}

[data-mark=displayed] .jsxc-mark::before {
    content: "";
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%231ABC9C" height="24" viewBox="0 0 24 24" width="24"><path d="M13.632,6.406L5.5,14.54l-3.132-3.134c-0.542-0.542-1.419-0.542-1.961,0 c-0.542,0.542-0.542,1.42,0,1.961l4.387,4.385c0.39,0.391,1.023,0.391,1.414,0l9.387-9.385c0.542-0.542,0.542-1.419,0-1.961 C15.052,5.865,14.174,5.865,13.632,6.406z M20.632,6.406L12.5,14.54L11.96,14L10,15.96l1.793,1.793c0.39,0.391,1.024,0.391,1.414,0 l9.387-9.385c0.542-0.542,0.542-1.419,0-1.961C22.052,5.865,21.174,5.865,20.632,6.406z"/></svg>') no-repeat 50%/cover;
    height: 14px;
    width: 14px;
    display: block;
}

[data-mark="aborted"] .jsxc-mark::before {
    color: var(--cx-red);
    content: "✖";
    font-size: 12px;
    line-height: 12px;
}

/* EMOJIS */
.jsxc-menu--emoticons .jsxc-menu__content {
    width: 190px;
    background: var(--cx-white);
    filter: drop-shadow(2px 4px 6px var(--jsxc-color-box-shadow));
}

.jsxc-menu--dark .jsxc-menu__content::after {
    color: var(--cx-white)
}

.jsxc-menu--dark li:hover {
    background-color: var(--cx-gray-light);
    color: var(--cx-gray-light);
}

.jsxc-menu--emoticons .jsxc-menu__content {
    padding: 0
}

.jsxc-menu--emoticons ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px
}

.jsxc-menu--emoticons li {
    height: 30px;
    width: 30px;
    padding: 5px;
}


/* ATTACHMENTS */

/* preview */
.jsxc-preview {
    background: #ffffff;
}

.jsxc-chatmessage.jsxc-out[data-mark=aborted] {
    background: var(--cx-red-subtle);
}

.jsxc-preview .jsxc-attachment {
    margin: 8px
}

.jsxc-attachment {
    background: transparent;
    border: dashed 2px var(--cx-gray-medium);
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 5px;
    line-height: 1em;
    justify-content: end;
    color: var(--cx-gray-mediumdark);
}

.jsxc-chatmessage.jsxc-out[data-mark=aborted] .jsxc-attachment {
    border: none;
    padding: unset;
    margin: unset;
    min-height: unset;
    color: #00000066;
    text-decoration: line-through
}

.jsxc-chatmessage.jsxc-out:not([data-mark=aborted]) .jsxc-attachment,
.jsxc-chatmessage.jsxc-out[data-mark=aborted] .jsxc-attachment {
    display: none;
}

.jsxc-attachment.jsxc-image,
.jsxc-attachment.jsxc-application,
.jsxc-attachment.jsxc-audio,
.jsxc-attachment.jsxc-video,
.jsxc-attachment.jsxc-text {
    background: transparent;
    display: flex;
}

.jsxc-image img {
    opacity: .5
}

.jsxc-preview:has(.jsxc-attachment) {
    display: flex;
    flex-direction: column;
    align-items: start;
    z-index: 11;
    filter: drop-shadow(0 -1px 2px var(--jsxc-color-box-shadow));
}

.jsxc-preview:has(.jsxc-attachment):after {
    content: 'O anexo não será enviado';
    display: block;
    margin: 0 10px;
    /*   color: var(--cx-gray-mediumdark); */
}


.jsxc-delete-handle {
    border: none;
    background: url('data:image/svg+xml,<svg fill="%23E74C3C" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14,2h-3V1c0-0.55-0.45-1-1-1H6C5.45,0,5,0.45,5,1v1H2C1.45,2,1,2.45,1,3 s0.45,1,1,1v11c0,0.55,0.45,1,1,1h10c0.55,0,1-0.45,1-1V4c0.55,0,1-0.45,1-1S14.55,2,14,2z M12,14H4V4h8V14z M7,11c0,0.55-0.45,1-1,1l0,0c-0.55,0-1-0.45-1-1V7c0-0.55,0.45-1,1-1l0,0 c0.55,0,1,0.45,1,1V11z M11,11c0,0.55-0.45,1-1,1l0,0c-0.55,0-1-0.45-1-1V7c0-0.55,0.45-1,1-1l0,0 c0.55,0,1,0.45,1,1V11z"/></svg>') no-repeat 50%/contain;
    color: transparent;
    width: 16px;
    height: 16px;
    margin: unset;
    border-radius: 0;
    position: relative
}

.jsxc-image:not(.jsxc-image-webp):not(.jsxc-image-svg) .jsxc-delete-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.jsxc-delete-handle,
.jsxc-delete-handle:hover {
    /*   background-color: var(--cx-red); */
    background-color: transparent;
}

/* anexo enviado */
.jsxc-chatmessage .jsxc-attachment {
    font-size: .8em;
}

.jsxc-chatmessage .jsxc-error-content {
    background-color: transparent;
    color: var(--cx-red);
    margin: unset;
    padding: unset;
}

/* END ATTACHMENTS */


/* FIX CHAT ABRINDO */
body #jsxc-roster {
    right: -240px;
    z-index: 499;
}

body.jsxc-roster-shown #jsxc-roster {
    right: 0;
}

body #jsxc-window-list {
    right: 0;
}

body.jsxc-roster-shown #jsxc-window-list {
    width: 100%;
    left: 0;
    right: auto;
}


/* END FIX CHAT ABRINDO */

.jsxc-window-opened {
    overflow-y: hidden;
}

.jsxc-window-opened #jsxc-window-list:before {
    content: " ";
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: block;
}

.jsxc-window .jsxc-bar {
    width: 100%;
    pointer-events: none;
}

.jsxc-window .jsxc-bar * {
    pointer-events: all;
}

#jsxc-window-list>ul {
    width: 100%;
    height: auto;
    right: 0 !important;
}

.jsxc-roster-shown #jsxc-window-list>ul {
    right: 0 !important;
}

.jsxc-minimized .jsxc-window-fade {
    height: calc(100% - 44px);
    min-height: 0;
}



/* MEDIA QUERY */

@media (min-width: 768px) {

    .jsxc-window-opened {
        overflow-y: auto;
    }

    .jsxc-window-opened #jsxc-window-list:before {
        display: none;
    }

    #jsxc-window-list {
        clip: rect(-10000px, 10000px, 0, 0);
        right: 240px;
        /* left: auto; */
    }

    #jsxc-window-list>ul>li {
        margin-right: 10px;
        height: 44px;
        width: 46px;
    }

    #jsxc-window-list>ul {
        width: auto;
        height: 44px;
        right: 0 !important;
    }

    .jsxc-roster-shown #jsxc-window-list>ul {

        right: 240px !important;
    }

    .jsxc-window .jsxc-bar {
        width: 250px;
        pointer-events: all;
    }

    .jsxc-window {
        height: 364px;
        width: 250px;
        position: relative;
        top: auto;
    }

    .jsxc-window-fade {
        height: 320px;
        width: 250px;
    }

    .jsxc-minimized .jsxc-window-fade {
        height: 0;
    }

    .jsxc-minimized .jsxc-window {
        height: 44px;
    }
}



/* ANIMATIONS */

/* pulse */
@property --chat-in {
    syntax: '<color>';
    initial-value: #fff;
    inherits: true;
}

@keyframes unreadpulse {
    25% {
        --chat-in: #fcf1af;
    }
}

@keyframes toggleunread {
    25% {
        background-color: #ff8000;
    }

    75% {
        background-color: #ff8000;
    }
}

@keyframes twink {
    50% {
        background: var(--cx-twink1);
    }
}

@media print {
    .jsxc-roster-toggle,#jsxc-roster,#jsxc-window-list,#jsxc-window-list-handler {
        display: none !important;
    }
}