:root {
	--ccmChat-cta-text:                 "ASK LEXUS";
	--ccmChat-cta-textNewMessages:      "New Messages";
	--ccmChat-cta-iconWidth-mobile: 	56px;
	--ccmChat-cta-iconWidth-desktop: 	34px;
	--ccmChat-cta-iconHeight-mobile: 	56px;
	--ccmChat-cta-iconHeight-desktop: 	35px;
	--ccmChat-cta-iconWidth:			var(--ccmChat-cta-iconWidth-mobile);
	--ccmChat-cta-iconHeight:			var(--ccmChat-cta-iconHeight-mobile);
}

embeddedmessaging-container embeddedmessaging-minimized-state.notificationArea .minimizedButtonWrapper .minimizedButton.slds-button {
	display: flex;
    background: transparent;
	/* flex-direction: column-reverse; */
	width: var(--ccmChat-cta-iconWidth);
	height: var(--ccmChat-cta-iconHeight);
	border-radius: 100%;
	align-items: center;
	/* box-shadow: none; */
	bottom: 0;
	right: 0;
    background: #fff;
}

embeddedmessaging-container embeddedmessaging-minimized-state.notificationArea .minimizedButtonWrapper .minimizedButton.slds-button:focus {
	outline: none;
}

.minimizedButtonIconContainer {
    padding: 10px;
}

embeddedmessaging-container embeddedmessaging-minimized-state.notificationArea .minimizedButtonWrapper .minimizedButton.slds-button .minimizedButtonIconContainer img {
    border-radius: 0;
}

.minimizedButtonWrapper .minimizedButton .minimizedButtonIconChat path {
	fill: #000;
}

.unseenMessageCountText {
	color: white !important;
}

@media screen and (min-width: 57px) {
    :root {
		--ccmChat-cta-iconWidth:			var(--ccmChat-cta-iconWidth-desktop);
		--ccmChat-cta-iconHeight:			var(--ccmChat-cta-iconHeight-desktop);
	}

    embeddedmessaging-container embeddedmessaging-minimized-state.notificationArea .minimizedButtonWrapper .minimizedButton.slds-button {
        background-color: #1A1B1E;
        justify-content: center;
        width: 180px;
        height: 50px;
    	gap: 8px;
        border-radius: 8px 8px 0 0;
        bottom: 0;
		right: 0;
        font-family: 'Nobel', sans-serif;
		font-weight: bold;
        border: 4px solid #fff;
    }
    embeddedmessaging-container .minimizedButton:after {
        content: var(--ccmChat-cta-text, "ASK LEXUS");
        color: #fff;
    }

    embeddedmessaging-container .minimizedButton:has(.unseenMessageCountText):after {
        content: var(--ccmChat-cta-textNewMessages, "New Messages");
    }

    embeddedmessaging-container .minimizedButtonWrapper button.slds-button.minimizedButton .minimizedButtonIconContainer {
        width: unset;
        width: var(--ccmChat-cta-iconWidth);
	    height: var(--ccmChat-cta-iconHeight);
        align-items: unset;
        padding: 0;
    }

    /* Custom CTA image for Desktop */
	embeddedmessaging-container .minimizedButton .minimizedButtonIconContainer:before {
		content: "";
		display: block;
		width: var(--ccmChat-cta-iconWidth);
		height: var(--ccmChat-cta-iconHeight);
		background-image: url(/sfsites/c/resource/CCM_Lexus_Messaging/img/CTA_desktop.png?v=124);
		background-size: contain;
		background-repeat: no-repeat;
	}

    /* Hide default CTA image for Desktop */
	embeddedmessaging-container .minimizedButton .minimizedButtonIconContainer img {
		display: none;
	}

    .minimizedButtonIconContainer svg.minimizedButtonIconChat {
        display: none;
    }

    .embedded-messaging-automated-response {
        padding: 12px;
        background: #f3f3f3;
        border-radius: 4px;
        text-align: left !important;
        font-size: 14px !important;
        color: #2e2e2e !important;
        margin-left: 31px !important;
    }

    .unseenMessageCountText {
        display: none;
    }
}