:root {
    --xsf-miaw-loading-background-image: url(https://c1.sfdcstatic.com/content/dam/web/en_us/www/images/live-agent/astro-waiting-snap-ins-wave.gif);
    --xsf-miaw-agent-image: url(https://a.sfdcstatic.com/shared/chat/agentforce-astro.png);
    --xsf-miaw-bottom: 40px;
    --xsf-miaw-bottom-mobile: 40px;
    --xsf-miaw-invite-bottom: 20px;
    --xsf-miaw-frame-bottom: 0;
    --xsf-miaw-chat-text: "Ask Agentforce";
    --hgf-g-blue-vibrant-50: rgba(1, 118, 211, 1);
}

.animation {
    transition: bottom 0.5s ease;
    transition-delay: 0.5s;
}

/* Start of Invitation  */

/* Remove link styling from Safari */
.embeddedServiceInvitationBody {
    pointer-events: none;
}
.embeddedServiceInvitationBody a {
    text-decoration: none;
    color: inherit;
}

.zindexup {
    position: relative;
    z-index: 5000;
}

#xsf_miaw_invite {
    background-color: var(--hgf-g-blue-vibrant-50);
    font-family: var(--hgf-g-font-display);
    overflow: visible;
    border-radius: 10px;
    visibility: hidden;
    position: fixed !important; /* since Chat Product JS sets element style */
    margin-left: -343px !important; /* since Chat Product JS sets element style */
    margin-top: -274px !important; /* since Chat Product JS sets element style */
    -webkit-font-smoothing: antialiased; /* reduces the thickness of the font */
}

#xsf_miaw_invite.embeddedServiceInvitation {
    background-color: var(--hgf-g-blue-vibrant-50);
    width: 317px;
    -webkit-box-shadow: 0 12px 48px rgba(0, 22, 57, 0.12),
        0 2px 10px rgba(0, 22, 57, 0.04);
    -moz-box-shadow: 0 12px 48px rgba(0, 22, 57, 0.12),
        0 2px 10px rgba(0, 22, 57, 0.04);
    box-shadow: 0 12px 48px rgba(0, 22, 57, 0.12),
        0 2px 10px rgba(0, 22, 57, 0.04);
}

/* allows mobile users to close the chat window */
/* body .embeddedServiceSidebar.layout-docked .dockableContainer {
    height: calc(100% - 130px);
    margin-top: 120px;
} */

#xsf_miaw_invite.embeddedServiceInvitation > .embeddedServiceInvitationHeader {
    width: inherit;
    color: var(--hgf-g-brand-default-color-background);
    overflow: initial;
    justify-content: space-between;
    align-items: stretch;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
}

#xsf_miaw_invite > .embeddedServiceInvitationHeader #customAvatar {
    margin-top: 24px;
    width: 37px;
    height: 37px;
}

#xsf_miaw_invite > .embeddedServiceInvitationHeader .embeddedServiceTitleText {
    color: var(--hgf-g-brand-default-color-background);
    overflow: hidden;
    align-self: stretch;
    flex-grow: 1;
    max-width: 100%;
    margin: 16px 24px 0 24px;
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    overflow-wrap: break-word;
}

#xsf_miaw_invite.embeddedServiceInvitation > .embeddedServiceInvitationBody {
    font-family: var(--hgf-g-font-sans);
    background-color: var(--hgf-g-blue-vibrant-50);
    color: var(--hgf-g-brand-default-color-background);
    max-height: 110px;
    min-width: 243px;
    margin: 12px 37px 18px;
    overflow: auto;
    text-align: center;
}

#xsf_miaw_invite > .embeddedServiceInvitationBody p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 18px;
    color: var(--hgf-g-brand-default-color-background);
}

#xsf_miaw_invite.embeddedServiceInvitation > .embeddedServiceInvitationFooter {
    width: inherit;
    color: var(--hgf-g-brand-default-color-background);
    background-color: var(--hgf-g-blue-vibrant-50);
    max-height: 50px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-evenly;
}

#xsf_miaw_invite
    > .embeddedServiceInvitationFooter
    > .embeddedServiceActionButton {
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    line-height: 20px;
    letter-spacing: -0.002em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

#xsf_miaw_invite > .embeddedServiceInvitationFooter > #acceptInvite {
    top: calc(50% - 20px / 2 + 2px);
    background-color: var(--hgf-g-brand-default-color-background);
    color: var(--hgf-g-blue-vibrant-50);
    flex: none;
    order: 0;
    flex-grow: 0;
    align-items: center;
    padding: 16px 24px 12px;
    margin: 0 2.5px 0 10px;
}

#xsf_miaw_invite > .embeddedServiceInvitationFooter > #rejectInvite {
    background-color: var(--hgf-g-blue-vibrant-50);
    color: var(--hgf-g-brand-default-color-background);
    text-decoration-line: underline;
    mix-blend-mode: normal;
    padding: 16px 0 12px 0;
    margin: 0 10px 0 2.5px;
}
/* End of Invitations  */

/* Start of button overrides  */

/* match the size of existing chat (and phone) icon in mobile */
body
    .embeddedMessagingConversationButtonWrapper
    .embeddedMessagingConversationButton {
    height: 60px;
    width: 60px;
    box-sizing: border-box;
    background-image: var(--xsf-miaw-agent-image);
    background-size: contain;
}

body
    .embeddedMessagingConversationButtonWrapper
    .embeddedMessagingConversationButton
    div.embeddedMessagingIconContainer {
    display: none;
}

body
    .embeddedMessagingConversationButtonWrapper
    .embeddedMessagingConversationButton.embeddedMessagingConversationButtonLoading
    div.embeddedMessagingIconContainer {
    display: block;
}

/* miaw reduces opacity when hovering, override to match our existing style */
body
    .embeddedMessagingConversationButtonWrapper
    .embeddedMessagingConversationButton:not(.no-hover):hover {
    opacity: 1;
}

/* overrides to match the positioning, color and drop shadow styling */
body
    .embeddedMessagingConversationButtonWrapper
    .embeddedMessagingConversationButton,
body
    .embeddedMessagingConversationButtonWrapper
    .embeddedMessagingConversationButton.embeddedMessagingConversationButtonLoaded {
    background-color: var(--hgf-g-blue-vibrant-50, rgba(1, 118, 211, 1));
    bottom: var(--xsf-miaw-bottom-mobile, 30px);
    right: 30px;
    box-shadow: 0px 12px 48px rgba(0, 22, 57, 0.12),
        0px 2px 10px rgba(0, 22, 57, 0.04);
}

/* 
override the positioning of the iframe as well, since some of the button variations
are inside the iframe
*/
#embeddedMessagingFrame.embeddedMessagingFrame[class~='isMinimized'] {
    bottom: var(--xsf-miaw-bottom-mobile, 30px);
}

/* in mobile, positioning of the spinner is off, so adjust that */
body
    .embeddedMessagingConversationButtonWrapper
    .embeddedMessagingConversationButton
    .embeddedMessagingLoadingSpinner {
    padding: unset;
    margin: unset;
    margin: auto;
    padding: 1px;
}

embeddedmessaging-chat-header .chatHeader button.headerButton {
    cursor: pointer;
}
/* End of button overrides  */

/* TO-DO: is this :required */
/* Allows the Live Chat window to be positioned correctly for mobile devices */
/* #xsf_miaw_invite.embeddedServiceInvitation
    ~ div.embeddedServiceSidebar.layout-docked
    .dockableContainer {
    top: 80px;
    height: calc(100% - 100px);
    max-width: 90%;
} */

/* Desktop Styles */
@media only screen and (min-width: 768px) {
    #xsf_miaw_invite.xsf_miaw_invite_show {
        bottom: var(--xsf-miaw-invite-bottom, 20px);
        left: 100%;
        z-index: 10000;
        visibility: visible;
    }

    /* in desktop, match the sizing of the circle buttons with the iframe contained variations */
    body
        .embeddedMessagingConversationButtonWrapper
        .embeddedMessagingConversationButton {
        height: 56px;
        width: 56px;
    }

    /* 
    in desktop, apply our current chat button styling on the miaw initiate chat button
    (keep loading and loaded variations the unchanged, aside from bg color)
    */
    body
        .embeddedMessagingConversationButtonWrapper
        .embeddedMessagingConversationButton:not(.embeddedMessagingConversationButtonLoaded, .embeddedMessagingConversationButtonLoading) {
        bottom: var(--xsf-miaw-bottom, 40px);
        right: 40px;
        border-radius: 25px;
        height: 48px;
        min-width: 146px;
        max-width: 317px;
        width: fit-content;
        cursor: pointer;
        display: block;
        line-height: normal;
        padding: 0;
        margin: 0;
        font-size: var(--eswIconFontSize, 16px);
        box-sizing: border-box;
    }

    #embeddedMessagingFrame.embeddedMessagingFrame[class~='isMaximized'] {
        bottom: var(--xsf-miaw-frame-bottom, 0);
    }

    /* 
    in desktop, add agent image to the miaw chat button 
    (again, don't add the agent image to the loading and loaded variations)
    */
    body
        .embeddedMessagingConversationButtonWrapper
        .embeddedMessagingConversationButton:not(.embeddedMessagingConversationButtonLoaded, .embeddedMessagingConversationButtonLoading)
        .embeddedMessagingIconContainer {
        width: 100%;
        height: 100%;
        background: var(--xsf-miaw-agent-image);
        background-repeat: no-repeat;
        background-size: 36px;
        background-position: left;
        margin-left: 7px;
    }

    /* 
    Before pseudo element is used for the label because the MIAW library resets the button 
    after chat ends removing any custom labels inside the button. Currently, there is no event for 
    us to listen (to indicate when chat ends), so that we can reinsert the labels.
    */
    body
        .embeddedMessagingConversationButtonWrapper
        .embeddedMessagingConversationButton:not(.embeddedMessagingConversationButtonLoaded, .embeddedMessagingConversationButtonLoading)
        .embeddedMessagingIconContainer::before {
        content: var(--xsf-miaw-chat-text);
        font-style: normal;
        font-family: var(--hgf-g-font-display);
        font-weight: 500;
        font-size: 14px;
        color: white;
        position: relative;
        top: 14px;
        padding: 0px 36px 0px 48px;
        -webkit-font-smoothing: antialiased;
    }

    /* for accessibility, when miaw chat button is focused, the text should underline */
    body
        .embeddedMessagingConversationButtonWrapper
        .embeddedMessagingConversationButton:focus
        .embeddedMessagingIconContainer::before {
        text-decoration: underline;
        color: white;
    }

    /* in desktop, hide the chat icon from the initiate miaw chat button */
    body
        .embeddedMessagingConversationButtonWrapper
        .embeddedMessagingConversationButton
        .embeddedMessagingIconChat {
        display: none;
    }

    /* in desktop, the loading spinner was slightly off, so adjusting that */
    body
        .embeddedMessagingConversationButtonWrapper
        .embeddedMessagingConversationButton
        .embeddedMessagingLoadingSpinner {
        padding: 4px;
    }

    body
        .embeddedMessagingConversationButtonWrapper
        .embeddedMessagingConversationButton {
        background-image: none;
    }

    body
        .embeddedMessagingConversationButtonWrapper
        .embeddedMessagingConversationButton
        div.embeddedMessagingIconContainer {
        display: block;
    }
}
/* End of Desktop Styles */
/* Start Mobile Styles */
@media only screen and (max-width: 480px) {
  div.embeddedMessagingConversationButtonWrapper > button.embeddedMessagingConversationButtonLoaded {
      height:0;
      width:0;
  }
  .embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"][class~="experienceSite"] {
      max-height: calc(100vh - 10em - 125px - env(safe-area-inset-bottom) - env(safe-area-inset-top))!important;
  }
}