/*
 * Bot CSS below
*/

/* CTA */
/* .forceCommunityEmbeddedServiceHelpButton .flatButton {
    color: black !important;
} */

/* CTA icon */

.embeddedServiceIcon path {
    fill: black !important;
}

/* header */
.sidebarHeader {
    color: black !important;
}

.embeddedServiceSidebar .dockableContainer .sidebarHeader h2 {
    font-weight: 600;
    color: #000;
}

/* announcement */
.announcement[embeddedService-chatHeaderAnnouncement_chatHeaderAnnouncement] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* bottom container */
.endChatContainer {
    color: black !important;
}

/* agent chat messages */
.chat-content.agent[ebcm-einsteinBotChatMessage_einsteinBotChatMessage] {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* user chat messages */
.chat-content.chasitor[ebcm-einsteinBotChatMessage_einsteinBotChatMessage] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* bot background */
/* .embeddedServiceLiveAgentStateChatItem.chatMessage {
    background-color: #D9D9D9 !important;
}
.messageArea {
    background-color: #D9D9D9 !important;
} */

/* Sidebar Body */
.embeddedServiceSidebar .sidebarBody {
    background-color: #f4f4f4 !important;
}

/* Body of chat window where messages appear */
.embeddedServiceSidebar .messageArea {
    background-color: transparent !important;
}

/* Prechat form */
.prechatUI .fieldList label {
    font-family: "PPMori", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.embeddedServiceSidebarFormField {
    margin-top: 20px;
}
.uiInputPhone {
    margin-top: 20px;
}
/* T&Cs: "If you have a ShareFile account, for the best experience please sign in before chatting with us." */
.termsAndConditions span {
    font-family: "PPMori", sans-serif !important;
    font-size: 17px !important;
}

/* Chat Message Line Item */
.embeddedServiceSidebar .embeddedServiceSidebarState .messageArea .messageWrapper .chatMessage,
.embeddedServiceSidebar .messageArea > .typingIndicatorContainer > .embeddedServiceLiveAgentStateChatTypingIndicator {
    margin-bottom: 4px;
    background-color: transparent;
}

/* Last Chat Message Line Item */
.embeddedServiceSidebar .embeddedServiceSidebarState .messageArea .embeddedServiceLiveAgentStateChatItem:last-of-type {
    /* Distance from last chat message line item to the top of the footer */
    margin-bottom: 14px;
}

/* color of blocked text input */
.chatInputBoxDisabled {
    background-color: #efefef !important;
}

/* menu border */
.embeddedServiceSidebar .chatContent .rich-menu {
    border-radius: 8px;
}

.embeddedServiceLiveAgentStateChatItem .chatContent ul.rich-menu-items li:first-of-type {
    border: 1px solid #000000 !important;
}

.embeddedServiceLiveAgentStateChatItem .chatContent ul.rich-menu-items li {
    border: 1px solid #000000 !important;
    /* border-width: 0 1px 1px 1px !important; */
    border-style: solid !important;
}

.announcement {
    color: black !important;
}

/* Chat Message Line Item */
.embeddedServiceSidebar .embeddedServiceSidebarState .messageArea .messageWrapper .chatMessage,
.embeddedServiceSidebar .messageArea > .typingIndicatorContainer > .embeddedServiceLiveAgentStateChatTypingIndicator {
    /* Distance from left to agent avatar */ /* #VAR1 */
    padding-left: 18px;
    /* Distance from right to chasitor message */
    padding-right: 18px;
    /* Distance from end of chat message line item to next chat message line item */
    margin-bottom: 4px;
    background-color: transparent;
}
.embeddedServiceSidebar .embeddedServiceSidebarState .messageArea .messageWrapper .chatMessage.chasitor {
    /* Distance from left to agent avatar */
    /* padding-left:	0px; */
    /* Distance from right to chasitor message */
    padding-right: 28px;
    /* Distance from end of chat message line item to next chat message line item */
    /* margin-bottom:	0px; */
}

/* Message Bubble */
.embeddedServiceSidebar .messageWrapper > .chatMessage > .chatContent .chat-content {
    padding: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
    max-width: 222px;
    box-sizing: border-box;

    /* background-color:	#fff; */
    /* color:				var(--nf-mainFontColor, #000); */
    /* border-radius:		0px; */
}
.embeddedServiceSidebar .messageWrapper > .chatMessage > .chatContent .chat-content.agent {
    margin-left: 40px;
    background-color: #fff;
    /* color:				var(--nf-mainFontColor, #000); */
    border-radius: 8px 8px 8px 0px;

    /* padding:			10px; */
}
.embeddedServiceSidebar .messageWrapper > .chatMessage > .chatContent .chat-content.chasitor {
    /* background-color:	var(--nf-mainBackground, #4b70c4); */
    color: #fff;
    border-radius: 8px 8px 0px 8px;

    /* padding:			10px; */
    /* margin-right:	40px; */
}
.embeddedServiceSidebar .chatContent .chatMessageContent[ebcm-einsteinBotChatMessage_einsteinBotChatMessage] {
    font-family: "PPMori", sans-serif;
    line-height: 18.8px;
}

/* links in messages */
.chatMessageContent a {
    color: #2ca6ff !important;
    text-decoration: underline !important;
}

.embeddedServiceSidebar .chatContent .chatMessageContent {
    hyphens: none;
}

/* avatar */
.avatar {
    color: black !important;
    background-color: #ffffff !important;
}

/* avatar shadow */
.embeddedServiceLiveAgentStateChatAvatar {
    background-color: #fefefe !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    position: absolute;
    border-radius: 50px;
    bottom: 14px !important;
    box-sizing: border-box;
    background-size: cover;
}

/* if parent circle has no icon inside, hide parent circle background */
.embeddedServiceLiveAgentStateChatAvatar:empty {
    display: none;
}

.embeddedServiceSidebar .typingIndicatorContainer .embeddedServiceLiveAgentStateChatAvatar {
    bottom: 0 !important;
}

.slds-icon-utility-minimize-window path {
    fill: black;
}

.slds-icon-utility-close path {
    fill: black;
}

.embeddedServiceSidebarButton .label {
    color: black !important;
    text-decoration: none !important;
}

.embeddedServiceSidebarButton {
    background-color: #0099de !important;
}

/* .forceCommunityEmbeddedServiceHelpButton .flatButton {
    background-color: #2CA6FF !important;
} */

/* Chat Interaction Footer */
.embeddedServiceSidebar .dockableContainer .stateBody > .chasitorInputWrapper.embeddedServiceLiveAgentStateChatInputFooter {
    height: 64px;
    min-height: 64px;
    /* border-top:			2px solid var(--nf-mainColor, #4b70c4); */
    background-color: #fff;

    /* box-sizing:	content-box; */
}

/* Hamburger Menu Container */
.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter .footer-menu > .slds-dropdown-trigger.slds-dropdown-trigger_click {
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 21px;
    padding-left: 7px;
    padding-right: 7px;
}

/* Hamburger Menu Button */
.embeddedServiceSidebar .slds-dropdown-trigger > .slds-button.slds-button_icon.slds-button_icon-container-more {
    color: #d9d9d9;
    border-radius: 3px !important;
}
.embeddedServiceSidebar .slds-dropdown-trigger > .slds-button.slds-button_icon.slds-button_icon-container-more:hover {
    color: #000;
}
.embeddedServiceSidebar .slds-dropdown-trigger > .slds-button.slds-button_icon.slds-button_icon-container-more:focus {
    box-shadow: none;
}
/* Hamburger Menu Button | Menu Opened */
.embeddedServiceSidebar .slds-dropdown-trigger.slds-is-open > .slds-button.slds-button_icon.slds-button_icon-container-more {
    color: #000;
}

/* Hamburger Menu Button Icon */
.embeddedServiceSidebar .footerMenuWrapper .slds-button.slds-button_icon-container-more:hover svg.slds-button__icon {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.16));
}
/* Hamburger Menu Button Icon | Menu Opned */
.embeddedServiceSidebar .slds-dropdown-trigger.slds-is-open > .slds-button.slds-button_icon.slds-button_icon-container-more svg.slds-button__icon {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.16));
}

/* Text Input Box Container */
.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter > .chasitorControls {
    margin-right: 7.5px;
    margin-bottom: 7px;
    margin-top: 7px;
    height: calc(100% - 14px);
}

/* Text Input Box */
.embeddedServiceLiveAgentStateChatInputFooter > .chasitorControls > .uiInput.textarea.chasitorText {
    border-radius: 0px;
    height: 100%;
    padding: 17px 10px;
    border: none;
    font-size: 14px;
    line-height: normal;
    /* font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif); */

    color: #000;
    /* font-weight:	var(--nf-fontWeight, normal); */
    /* font-stretch:	normal; */
    /* font-style:		oblique; */
    /* letter-spacing:	normal; */
    /* box-shadow:		0 0 8px rgb(0 0 0 / 16%); */
    background: #f4f4f4;
}

/* Text Input Box Placeholder Text */
.embeddedServiceLiveAgentStateChatInputFooter > .chasitorControls > .uiInput.textarea.chasitorText::placeholder {
    color: #9b9b9b !important;
    font-size: 14px;
    font-style: oblique !important;

    /* font-family:		var(--nf-mainFontFamily, Helvetica, sans-serif); */
    /* line-height:		normal; */
    /* font-weight:		var(--nf-fontWeight, normal); */
    /* font-stretch:	normal; */
    /* font-style:		oblique; */
    /* letter-spacing:	normal; */
}

/* Text Input Box Placeholder Text | ::selection*/
.embeddedServiceLiveAgentStateChatInputFooter > .chasitorControls > .uiInput.textarea.chasitortext::selection {
    /* color: red; */
    /* background-color:blue; */
}

/* ----- Save Transcript (Hamburger Menu Selected) ----- */
/* Menu Container */
.embeddedServiceSidebar .footer-menu > .slds-dropdown-trigger > .slds-dropdown {
    margin-bottom: 2px;
}

/* Menu */
.embeddedServiceSidebar .footer-menu .slds-dropdown .slds-dropdown__list .footer-menu-items {
    border: none;
}

/* Menu Item */
.embeddedServiceSidebar .footer-menu .slds-dropdown .slds-dropdown__list .footer-menu-items > .slds-dropdown__item {
    border: 1px solid var(--nf-mainColor, #4b70c4);
    border-bottom: none;
}

/* Menu Item Link */
.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter .footer-menu .footer-menu-items > .slds-dropdown__item > a {
    background: #fff;
    font-size: 14px;
    color: #2ca6ff;
    border: none;
    /* font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif); */
    padding-left: 35.5px;

    /* font-weight:	var(--nf-fontWeight, normal); */
    /* font-stretch:	normal; */
    /* font-style:		normal; */
    /* line-height:	1.34; */
    /* letter-spacing:	normal; */
    /* text-align:		center; */
}

/* Menu Item Link | :focus */
.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter .footer-menu .footer-menu-items > .slds-dropdown__item > a:focus {
    /* border:				none; */
    text-decoration: none;
    box-shadow: none;
}

/* minicard */
.containerDiv[ebcm-einsteinBotMiniCardContainer_einsteinBotMiniCardContainer] {
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

.embeddedServiceSidebar .chatContent .minicard-header {
    margin: 12px;
}

.embeddedServiceSidebar .chatContent .minicard-icon {
    display: none;
}

.embeddedServiceSidebar .chatContent .minicard-header .minicard-title.title {
    text-align: left;
    padding: 0;
    font-size: 14px !important;
    color: #000;
}

.embeddedServiceSidebar .chatContent .minicard-body .minicard-description .description {
    color: #7a7a7a;
    font-size: 14px;
    line-height: 18.8px !important;
}

.embeddedServiceSidebar .chatContent .mini-card {
    margin-right: 19px;
}

.embeddedServiceSidebar .chatContent .minicard-body .minicard-button {
    display: block;
    width: 100%;
    background: #2ca6ff;
    text-align: center;
    border-radius: 100px;
    margin-top: 12px;
    padding: 6px 11px;
    font-size: 16px;
    font-weight: 600;
}

.embeddedServiceSidebar .dialogState button.slds-button:focus,
.embeddedServiceSidebar .endChatContainer button.slds-button:focus {
    text-decoration: none;
}

.embeddedServiceSidebar button.slds-button.embeddedServiceSidebarButton {
    border-radius: 3px !important;
}

/* ----- Menu Base State ----- */
/* Menu */
.embeddedServiceLiveAgentStateChatMenuMessage > .chatContent > .rich-menu {
    width: 222px;
    margin-left: 40px;
    border-radius: 8px;

    /* Margin auto if menu card should be cented in chat message line item */
    /* margin:			auto; */
}

/* Menu Items */
.embeddedServiceLiveAgentStateChatMenuMessage > .chatContent > .rich-menu > .rich-menu-items > li {
    box-sizing: border-box;
    background-color: #fff;
    border: solid 1px #000;
    margin-top: -1px;
}
.embeddedServiceLiveAgentStateChatMenuMessage > .chatContent > .rich-menu > .rich-menu-items > li:first-of-type {
    margin-top: 0px;
    border: 1px solid #000;
    border-radius: 8px 8px 0px 0px;
}
.embeddedServiceLiveAgentStateChatMenuMessage > .chatContent > .rich-menu > .rich-menu-items > li:last-of-type {
    border-radius: 0px 0px 8px 8px;
}

/* Menu Item Button */
.embeddedServiceSidebar .chatMessage .rich-menu-items > li > .embeddedServiceLiveAgentStateChatRichItem {
    /* font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif); */
    font-size: 15px;
    color: #000;

    margin: -1px;
    width: calc(100% + 1px + 1px);
    /* font-weight:	var(--nf-fontWeight, normal); */
    /* font-stretch:	normal; */
    /* font-style:		normal; */
    /* line-height:	normal; */
    /* letter-spacing:	normal; */
    /* text-align:		center; */
}

/* Menu Item Button | :hover, :focus, :active:focus */
.embeddedServiceSidebar .chatMessage .rich-menu-items > li > .rich-menu-item:hover,
.embeddedServiceSidebar .chatMessage .rich-menu-items > li > .rich-menu-item:focus,
.embeddedServiceSidebar .chatMessage .rich-menu-items > li > .embeddedServiceLiveAgentStateChatRichItem:active:focus {
    background-color: #000;
    color: #fff;
    opacity: 1;

    /* box-sizing: border-box; */
    /* border-image-width: 0px; */
    /* border-radius: var(--nf-borderRadius, 8px); */
}

/* Menu Item Button | :disabled */
.embeddedServiceSidebar .chatMessage .rich-menu-items > li > .embeddedServiceLiveAgentStateChatRichItem[disabled] {
    border: 1px solid #d9d9d9;
    color: #d9d9d9;

    /* font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif); */
    /* font-size:		15px; */
    /* font-weight:	var(--nf-fontWeight, normal); */
    /* font-stretch:	normal; */
    /* font-style:		normal; */
    /* line-height:	normal; */
    /* letter-spacing:	normal; */
    /* text-align:		center; */
}

/* ----- Quick Reply Button Base State ----- */
.embeddedServiceSidebar .embeddedServiceSidebarState .messageArea .messageWrapper .chatMessage > .chatContent {
    /* Eleminate the 40px margin on the right */
    margin-inline: auto;
}
.embeddedServiceSidebar .chatMessage > .chatContent .rich-button-item.uiButton {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;

    border: 1px solid #000;
    background: #fff;
    width: 72px;
    box-sizing: content-box;
    border-radius: 21px;
    margin-inline: 5px;
    margin-top: 3px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
    color: #000;
}

.embeddedServiceSidebar .chatContent > .rich-button-item.uiButton > .label.bBody {
    /* font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif); */
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    /* font-stretch: normal; */
    /* font-style: normal; */
    line-height: normal;
    /* letter-spacing: normal; */
    /* text-align: center; */
}

.embeddedServiceSidebar .chatMessage > .chatContent .rich-button-item.uiButton:hover:not([disabled]) {
    background: #000;
    color: #fff;
    opacity: 1;
}

.embeddedServiceSidebar .chatMessage > .chatContent .rich-button-item.uiButton:hover {
    opacity: 1;
}

/* ----- End of Chat Confirmation ----- */
/* End Chat Background */
.embeddedServiceSidebar .sidebarBody .activeFeature > .featureBody:not(.embeddedServiceLiveAgentSidebarFeature) > .stateBody > .dialogState {
    background-color: #fff;
}

/* Form Card */
.embeddedServiceSidebar .chatContent .form-card .formcard-container {
    background-color: #fff;
    padding: 16px 12px;
    border-radius: 8px;
}

.embeddedServiceSidebar .chatContent .form-card .formcard-container .slds-media .slds-p-top_x-small {
    padding: 0;
}

.embeddedServiceSidebar .chatContent .form-card .formcard-container .slds-media .slds-p-top_x-small h1 {
    margin: 0;
    color: #4a4a4a;
    font-family: "PPMori", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 17.8px;
}

.embeddedServiceSidebar .chatContent .form-card .formcard-container .fieldIcon {
    display: none;
}

.embeddedServiceSidebar .chatContent .form-card .form-action-container > button.action {
    width: 100%;
    background: #2ca6ff;
    color: #000;
    font-family: "PPMori", sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.embeddedServiceSidebar .chatContent .form-card .form-action-container {
    margin-bottom: 0;
}

.embeddedServiceSidebar .chatContent .form-card .formcard-container .slds-p-vertical_small {
    padding: 0;
}

/* File upload paperclip icon */
.embeddedServiceLiveAgentStateChatAction.uiButton.medium svg {
    display: block !important;
}

/* ----- CTA ----- */
/* base styling for CTA in before chat and minimized state */
/* button.uiButton.helpButtonEnabled,
    button.sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI {
        width: 203px;
        height: 34px !important;
        border-radius: 17.5px !important;
        right: 25px;
        bottom: 25px;
        background-color: var(--nf-mainColor) !important;
        border: 1px;
    }

    button.uiButton.helpButtonEnabled:hover,
    button.sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI:hover {
        background-color: var(--nf-hoverColor) !important;

    }

    .embeddedServiceHelpButton button.uiButton.helpButtonEnabled:hover::before,
    .embeddedServiceHelpButton button.uiButton.helpButtonEnabled:focus::before,
    .embeddedServiceHelpButton button.flatButton:hover::before,
    .embeddedServiceHelpButton button.flatButton:focus::before
    {
        display: none !important;
    }

    button.uiButton.helpButtonDisabled {
        display: none !important;
    }

    .uiButton span.message {
        font-size: 13px;
        font-weight: var(--nf-fontWeight2, bold);
    }

    .embeddedServiceHelpButton .helpButton .helpButtonDisabled .embeddedServiceIcon:before,
    .embeddedServiceHelpButton .helpButton .helpButtonEnabled .embeddedServiceIcon:before,
    .messageContent > span.help > svg.icon {
        display: inline-block !important;
        content: "";
        background-image: var(--cta-imgUrl);
        height: 25px;
        width: 25px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        vertical-align: middle;
        margin-left: auto;
        margin-right: auto;
    }

    .messageContent > span.help > svg.icon > path {
        display: none;
    }




*/

.ui-widget > div.forceCommunityEmbeddedServiceHelpButton,
.embeddedServiceHelpButton > div.helpButton {
    height: 38px;
    bottom: 60px;
    right: 72px;
}

.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton,
.embeddedServiceHelpButton > .helpButton button.uiButton {
    border-radius: 17.5px;
    padding: 9px 16px 6px 16px;
    height: 100%;
    background: #2ca6ff;
    color: #000;
    line-height: unset;
    box-shadow: none;
    position: static;
}

.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton:hover::before,
.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton:focus::before,
.embeddedServiceHelpButton > .helpButton button.uiButton:hover::before,
.embeddedServiceHelpButton > .helpButton button.uiButton:focus::before {
    display: none;
}

.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton .embeddedServiceIcon,
.embeddedServiceHelpButton > .helpButton button.uiButton .embeddedServiceIcon {
    display: inline-block !important;
    margin-right: 8.02px;
    padding: 0;
    line-height: normal;
}

/* hide icon in experience cloud sites */
.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton svg,
.ui-widget > .embeddedServiceSidebar .embeddedServiceIcon svg {
    display: none;
}

.embeddedServiceSidebar .minimizedContainer {
    border-radius: 17.5px;
    background: #2ca6ff;
    border: none;
    height: 38px;
    bottom: 60px;
    right: 72px;
    box-shadow: none;
}

.embeddedServiceSidebar .endChatContainer button.uiButton:first-child {
    margin-bottom: 4px;
}

.embeddedServiceSidebar .endChatContainer .endChatButton.uiButton--inverse {
    background: transparent !important;
}

.embeddedServiceSidebar .sidebarBody .uiButton:focus {
    text-decoration: none;
}

@media only screen and (max-width: 480px) {
    .ui-widget > div.forceCommunityEmbeddedServiceHelpButton,
    .embeddedServiceHelpButton > div.helpButton {
        transform: rotate(270deg);
        right: 0;
        bottom: calc(169px + 85px);
        transform-origin: 100% 100%;
    }

    .ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton,
    .embeddedServiceHelpButton > .helpButton button.uiButton {
        border-radius: 8px 8px 0 0;
    }

    /* in minimized state, hide all characters */
    .embeddedServiceSidebar .minimizedContainer .minimizedText > .message {
        font-size: 0;
    }

    /* if new message, show first number */
    .embeddedServiceSidebar .minimizedContainer.newMessage .minimizedText > .message:first-letter {
        font-size: 14px;
    }

    /* if loading state, show loading balls */
    .embeddedServiceSidebar .minimizedContainer .content .loadingBallContainer.embeddedServiceLoadingBalls {
        min-width: unset;
        height: 100%;
        width: 100%;
        margin-block: auto;
        background: #2ca6ff;
        border-radius: 100%;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .embeddedServiceSidebar .minimizedContainer {
        height: 35px !important;
        width: 35px !important;
        min-width: unset !important;
        border-radius: 100% !important;
        background: #2ca6ff !important;
    }

    .embeddedServiceSidebar .minimizedContainer.sidebarHeader .content {
        padding: 0;
    }
}

/* SHAREFILE THEME OVERRIDES FOR NEW BRANDING START HERE */
.sidebarHeader button {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    margin-left: 20px;
    padding-top: 0 !important;
}

.sidebarHeader button:before {
    top: inherit !important;
    right: inherit !important;
    width: 22px !important;
    height: 22px !important;
    margin-top: 0px;
    margin-left: -3px;
}

.rich-menu-items li:before {
    display: none;
}

.slds-form-element__control input {
    font-size: 14px !important;
}

.embeddedServiceSidebar .chatContent .form-card .form-action-container > button.action {
    border: none !important;
}

.headerAnnouncement {
    background-color: #000 !important;
}

.headerAnnouncement p {
    color: #ffffff !important;
    font-size: 12px;
}

.embeddedServiceSidebar button .label {
    margin-bottom: 0 !important;
    line-height: inherit !important;
}

.slds-form-element {
   padding: 0 !important;
   padding-bottom: 8px !important;
}

/* === CTA: remove the icon/logo entirely === */

/* remove the pseudo-element that paints the icon */
.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton .embeddedServiceIcon:before,
.embeddedServiceHelpButton > .helpButton button.uiButton .embeddedServiceIcon:before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* hide the <svg> fallback */
.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton .embeddedServiceIcon svg,
.embeddedServiceHelpButton > .helpButton button.uiButton .embeddedServiceIcon svg {
  display: none !important;
}

/* hide the icon wrapper */
.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton .embeddedServiceIcon,
.embeddedServiceHelpButton > .helpButton button.uiButton .embeddedServiceIcon {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* optional: ensure the text isn’t indented for the missing icon */
.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton .message,
.embeddedServiceHelpButton > .helpButton button.uiButton .message {
  margin-left: 0 !important;
}

/* === Remove the header logo in chat window === */
.embeddedServiceSidebar.sidebarMaximized .sidebarHeader:before {
    content: none !important;
    background: none !important;
    display: none !important;
}

/* Align the title without the logo */
.embeddedServiceSidebar.sidebarMaximized .sidebarHeader h2 {
    margin-left: 0 !important;
    padding-left: 8px !important; /* tweak as needed */
    
}

/*  New header title with company name  */
.embeddedServiceSidebar.sidebarMaximized .sidebarHeader h2 {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #000 !important;
    position: relative;
    text-indent: -9999px;   /* visually hide original "Chat" text */
    line-height: 1.2;
}

.embeddedServiceSidebar.sidebarMaximized .sidebarHeader h2::after {
    content: "Progress ShareFile";
    text-indent: 0;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

/* === Remove agent/bot avatar from conversation window === */
.embeddedServiceSidebar .chatMessage > .embeddedServiceLiveAgentStateChatAvatar,
.embeddedServiceSidebar .chatMessage > div.embeddedServiceLiveAgentStateChatAvatar > div.avatar {
    display: none !important;
    background: none !important;
}

/* Re-align message bubbles */
.embeddedServiceSidebar .messageWrapper .chatMessage.agent .chatContent,
.embeddedServiceSidebar .messageWrapper .chatMessage.bot .chatContent {
    margin-left: 0 !important;
    padding-left: 12px !important; /* small padding for breathing room */
}

/* 1) More left space for text */
.embeddedServiceSidebar .embeddedServiceSidebarState .messageArea .messageWrapper .chatMessage {
  padding-left: 8px !important;   /* was ~18px */
  padding-right: 8px !important;  /* keep things even */
}

/* 2) Remove leftover indent on messages */
.embeddedServiceSidebar .messageWrapper > .chatMessage > .chatContent .chat-content.agent {
  margin-left: 0 !important;      /* was 40px */
}

/* 3) Let bubbles use all window */
.embeddedServiceSidebar .messageWrapper > .chatMessage > .chatContent .chat-content {
  max-width: calc(100% - 16px) !important;  /* override the 222px cap */
  box-sizing: border-box !important;
}

/* Right-aligned customer bubble still hugs the right edge cleanly */
.embeddedServiceSidebar .messageWrapper > .chatMessage.chasitor > .chatContent .chat-content.chasitor {
  margin-left: auto !important;
  margin-right: 8px !important;
}

/* 4) Tighten vertical whitespace between messages */
.embeddedServiceSidebar .embeddedServiceSidebarState .messageArea .messageWrapper .chatMessage,
.embeddedServiceSidebar .messageArea > .typingIndicatorContainer > .embeddedServiceLiveAgentStateChatTypingIndicator {
  margin-bottom: 2px !important;  /* was 4px */
}

/* 5) Optional: slightly denser text for fewer lines per message */
.embeddedServiceSidebar .chatContent .chatMessageContent {
  font-size: 14px !important;
  line-height: 1.35 !important;
}




/* =========================
   Progress ShareFile – Brand Theme Overrides
   ========================= */

/* 1) Load Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* 2) Global font everywhere inside chat */
.embeddedServiceSidebar,
.embeddedServiceSidebar * {
  font-family: 'Roboto', Arial, sans-serif !important;
}

/* 3) Header bar (already stripped logo) */
.embeddedServiceSidebar.sidebarMaximized .sidebarHeader,
.embeddedServiceSidebar .dockableContainer .sidebarHeader {
  background: #2B2BB2 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.embeddedServiceSidebar .dockableContainer .sidebarHeader h2::after {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* 4) Message bubbles */
.chat-content.agent[ebcm-einsteinBotChatMessage_einsteinBotChatMessage] {
  background: #F0F2F7 !important;
  color: #202124 !important;
}
.chat-content.chasitor[ebcm-einsteinBotChatMessage_einsteinBotChatMessage] {
  background: #2B2BB2 !important;
  color: #ffffff !important;
}

/* 5) Composer (text input) */
.embeddedServiceSidebar .chasitorText,
.embeddedServiceSidebar .chasitorText:focus {
  border: 2px solid #2B2BB2 !important;
  box-shadow: 0 0 0 3px rgba(43,43,178,.15) !important;
}

/* 6) Links */
.embeddedServiceSidebar a,
.embeddedServiceSidebar .rich-menu a,
.chatMessageContent a {
  color: #2B2BB2 !important;
}

/* 7) Prechat / consent screen buttons */
.embeddedServiceSidebar .form-card .form-action-container > button.action,
.embeddedServiceSidebar .buttonWrapper > button {
  background: #2B2BB2 !important;
  border-color: #2B2BB2 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}
/* Lock hover to brand color */
.embeddedServiceSidebar .form-card .form-action-container > button.action:hover,
.embeddedServiceSidebar .buttonWrapper > button:hover {
  background: #2B2BB2 !important;
  border-color: #2B2BB2 !important;
  color: #ffffff !important;
}

/* 8) Launcher CTA (minimized chat button) */
.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton,
.embeddedServiceHelpButton > .helpButton button.uiButton,
.embeddedServiceSidebar .minimizedContainer {
  background: #2B2BB2 !important;
  border-color: #2B2BB2 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}
/* Lock hover color */
.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton:hover,
.embeddedServiceHelpButton > .helpButton button.uiButton:hover {
  background: #2B2BB2 !important;
  border-color: #2B2BB2 !important;
  color: #ffffff !important;
}

/* === FORCE WHITE: header icons/text + primary button labels === */

/* Header title and overall text color */
.embeddedServiceSidebar .sidebarHeader {
  color: #ffffff !important;
}
.embeddedServiceSidebar .dockableContainer .sidebarHeader h2,
.embeddedServiceSidebar .dockableContainer .sidebarHeader h2::after {
  color: #ffffff !important;
}

/* Header controls: minimize & close – override any earlier black fill */
.embeddedServiceSidebar .sidebarHeader .minimizeButton svg path,
.embeddedServiceSidebar .sidebarHeader .closeButton svg path,
.slds-icon-utility-minimize-window path,
.slds-icon-utility-close path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* “Start Chatting” (and other primary) button text – override earlier .embeddedServiceSidebarButton .label {color:black} */
.embeddedServiceSidebar .form-card .form-action-container > button.action,
.embeddedServiceSidebar .form-card .form-action-container > button.action .label,
.embeddedServiceSidebar .buttonWrapper > button,
.embeddedServiceSidebar .buttonWrapper > button .label {
  color: #ffffff !important;
}

/* Launcher CTA label (minimized button) */
.ui-widget > .forceCommunityEmbeddedServiceHelpButton button.flatButton .message,
.embeddedServiceHelpButton > .helpButton button.uiButton .message {
  color: #ffffff !important;
}

/* --- Input: remove brand blue border/ring --- */
.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput.textarea.chasitorText,
.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput.textarea.chasitorText:focus,
.embeddedServiceSidebar .chasitorText,
.embeddedServiceSidebar .chasitorText:focus {
  border: 1px solid #DCDCDC !important;   /* or border: none !important; if you want zero border */
  box-shadow: none !important;
  outline: none !important;
  background: #ffffff !important;          /* use #f4f4f4 if you prefer the gray fill you had */
  color: #000000 !important;
}

/* SLDS focus helper sometimes adds a glow — neutralize it */
.embeddedServiceSidebar .slds-has-focus,
.embeddedServiceSidebar .slds-has-focus:focus {
  box-shadow: none !important;
}

/* Some builds put the ring on the wrapper instead */
.embeddedServiceSidebar .chasitorControls,
.embeddedServiceSidebar .chasitorControls:focus,
.embeddedServiceSidebar .chasitorControls.hasFocus {
  box-shadow: none !important;
  border: none !important;
}

/* =========================
   Buttons: unify to brand
   ========================= */

/* Base: every button inside the chat */
.embeddedServiceSidebar button,
.embeddedServiceSidebar .slds-button,
.embeddedServiceSidebar .uiButton,
.embeddedServiceSidebar .buttonWrapper > button,
.embeddedServiceSidebar .form-card .form-action-container > button,
.embeddedServiceSidebar .endChatContainer button {
  background: #2B2BB2 !important;
  border-color: #2B2BB2 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Label text inside SLDS buttons */
.embeddedServiceSidebar button .label,
.embeddedServiceSidebar .slds-button .label,
.embeddedServiceSidebar .uiButton .label {
  color: #ffffff !important;
}

/* Remove salesforce “inverse/neutral/brand” */
.embeddedServiceSidebar .slds-button_brand,
.embeddedServiceSidebar .slds-button_neutral,
.embeddedServiceSidebar .uiButton--inverse,
.embeddedServiceSidebar .endChatContainer .uiButton--inverse {
  background: #2B2BB2 !important;
  border-color: #2B2BB2 !important;
  color: #ffffff !important;
}

/* New color for all buttons */
.embeddedServiceSidebar button:hover,
.embeddedServiceSidebar button:focus,
.embeddedServiceSidebar button:active,
.embeddedServiceSidebar .slds-button:hover,
.embeddedServiceSidebar .slds-button:focus,
.embeddedServiceSidebar .slds-button:active,
.embeddedServiceSidebar .uiButton:hover,
.embeddedServiceSidebar .uiButton:focus,
.embeddedServiceSidebar .uiButton:active {
  background: #2B2BB2 !important;
  border-color: #2B2BB2 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Specific screens with custom classes */
.embeddedServiceSidebar .dialogState button.slds-button,
.embeddedServiceSidebar .endChatContainer button.slds-button,
.embeddedServiceSidebar .endChatContainer button.uiButton,
.embeddedServiceSidebar .buttonWrapper > button {
  background: #2B2BB2 !important;
  border-color: #2B2BB2 !important;
  color: #ffffff !important;
}

/* Make sure the “Cancel Chat Request”, “Confirm End Chat”, “Go Back” all pick it up */
.embeddedServiceSidebar .waitingState button,
.embeddedServiceSidebar .endChatContainer button {
  background: #2B2BB2 !important;
  border-color: #2B2BB2 !important;
  color: #ffffff !important;
}

/* Accessibility focus ring: remove blue halo */
.embeddedServiceSidebar .slds-button:focus,
.embeddedServiceSidebar .uiButton:focus,
.embeddedServiceSidebar button:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* =============  V2 Button Theming (scoped)  ============= */
:root { --psf-brand: #2B2BB2; }

/* Primary actions only:
   - Start Chatting (prechat/consent)
   - Cancel Chat Request (queue screen)
   - Confirm End Chat / Go Back (end dialog)
*/
.embeddedServiceSidebar
  .buttonWrapper > button,
.embeddedServiceSidebar
  .form-card .form-action-container > button,
.embeddedServiceSidebar
  .waitingState button.slds-button,
.embeddedServiceSidebar
  .endChatContainer button.slds-button {
  background: var(--psf-brand) !important;
  border-color: var(--psf-brand) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* lock their hover/focus/active to the same brand color */
.embeddedServiceSidebar
  .buttonWrapper > button:hover,
.embeddedServiceSidebar
  .form-card .form-action-container > button:hover,
.embeddedServiceSidebar
  .waitingState button.slds-button:hover,
.embeddedServiceSidebar
  .endChatContainer button.slds-button:hover,
.embeddedServiceSidebar
  .buttonWrapper > button:focus,
.embeddedServiceSidebar
  .form-card .form-action-container > button:focus,
.embeddedServiceSidebar
  .waitingState button.slds-button:focus,
.embeddedServiceSidebar
  .endChatContainer button.slds-button:focus,
.embeddedServiceSidebar
  .buttonWrapper > button:active,
.embeddedServiceSidebar
  .form-card .form-action-container > button:active,
.embeddedServiceSidebar
  .waitingState button.slds-button:active,
.embeddedServiceSidebar
  .endChatContainer button.slds-button:active {
  background: var(--psf-brand) !important;
  border-color: var(--psf-brand) !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Make sure their inner labels are white */
.embeddedServiceSidebar
  .buttonWrapper > button .label,
.embeddedServiceSidebar
  .form-card .form-action-container > button .label,
.embeddedServiceSidebar
  .waitingState button.slds-button .label,
.embeddedServiceSidebar
  .endChatContainer button.slds-button .label {
  color: #fff !important;
}

/* --- Restore neutral styles for NON-primary controls --- */

/* Hamburger (more) icon button stays gray/neutral */
.embeddedServiceSidebar
  .slds-button.slds-button_icon.slds-button_icon-container-more {
  background: transparent !important;
  border: none !important;
  color: #d9d9d9 !important;
}
.embeddedServiceSidebar
  .slds-dropdown-trigger.slds-is-open > .slds-button.slds-button_icon.slds-button_icon-container-more,
.embeddedServiceSidebar
  .slds-button.slds-button_icon.slds-button_icon-container-more:hover {
  color: #000 !important;
  background: transparent !important;
}

/* Quick-reply pills (rich-button items) – white with black border */
.embeddedServiceSidebar
  .chatMessage > .chatContent .rich-button-item.uiButton {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  box-shadow: 0 0 8px 0 rgba(0,0,0,.08) !important;
}
.embeddedServiceSidebar
  .chatMessage > .chatContent .rich-button-item.uiButton:hover:not([disabled]) {
  background: #000 !important;
  color: #fff !important;
}

/* Card menus (list of options) – keep white with black border */
.embeddedServiceSidebar
  .chatMessage .rich-menu-items > li > .embeddedServiceLiveAgentStateChatRichItem,
.embeddedServiceSidebar
  .chatMessage .rich-menu-items > li > .rich-menu-item {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}
.embeddedServiceSidebar
  .chatMessage .rich-menu-items > li > .embeddedServiceLiveAgentStateChatRichItem:hover,
.embeddedServiceSidebar
  .chatMessage .rich-menu-items > li > .rich-menu-item:hover {
  background: #000 !important;
  color: #fff !important;
}

/* Keep paperclip / upload icon neutral (not branded) */
.embeddedServiceLiveAgentStateChatAction.uiButton.medium {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* === Bot message styling (clean modern white bubbles) === */
.embeddedServiceSidebar
  .messageWrapper > .chatMessage > .chatContent .chat-content.agent,
.embeddedServiceSidebar
  .messageWrapper > .chatMessage > .chatContent .chat-content.bot {
  background: #ffffff !important;    /* back to white */
  color: #202124 !important;         /* dark text for readability */
  border-radius: 8px !important;     /* subtle rounded corners */
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; /* light depth */
  margin-left: 0 !important;         /* align flush with edge */
  padding: 10px 12px !important;     /* a little breathing room */
}