@font-face {
    font-family: 'Nobel Bold';
    src: url('/sfsites/c/resource/LexusFonts/Nobel-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Nobel';
    src: url('/sfsites/c/resource/LexusFonts/Nobel-Book.ttf') format('truetype');
}

:root {
    --ccmChat-cta-text:                 "ASK LEXUS";
	--ccmChat-cta-textLoading:          "Loading...";
	--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);
}

#embeddedMessagingConversationButton {
	display: flex;
    background: transparent;
	width: var(--ccmChat-cta-iconWidth);
	height: var(--ccmChat-cta-iconHeight);
	/* padding: 8px 2px 6px 2px; */
    bottom: 35px;
	right: 24px;
	border-radius: 0;
	justify-content: center;
	align-items: center;
    font-family: 'Nobel Bold', sans-serif;
	/* gap: 8px; */
	/* box-shadow: none; */
}

#embeddedMessagingConversationButton.embeddedMessagingConversationButtonLoading {
	background: #000;
	border-radius: 100%;
}

#embeddedMessagingIconContainer {
	max-width: var(--ccmChat-cta-iconWidth);
}

#embeddedMessagingIconChat {
    border-radius: 0;
}

#askLexusLabel {
	display: none;
}


/* #region Proactive Popup */
.custom-popup-container {
    position: fixed;
    top: calc(100vh - 8em);
    left: calc(100vw - 11em);
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    text-align: center;
    max-width: 200px;
    width: 100%;
    font-family: Nobel, sans-serif;
}
.popup-visible {
    display: block;
}
.popup-hidden {
    display: none;
}
.balloon-icon {
    vertical-align: bottom;
    width: 50px;
}
.main-text {
    font-size: x-large;
    font-family: Nobel, sans-serif;
}
.assistance-text {
    margin-bottom: 16px;
    margin-top: 2px;
    padding: 0;
    font-size: medium;
    font-family: Nobel, sans-serif;
}
.chat-button {
    border: solid 1px lightgray;
    width: 100%;
    padding: 10px;
}
.close-button {
    top: -5%;
    left: 96%;
    position: fixed;
    border-radius: 50%;
    background-color: lightgray;
    color: white;
    width: 1.3rem;
    height: 1.3rem;
    font-family: sans-serif;
}
/* #endregion Proactive Popup */

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:focus {
    outline: none;
}

/* #region Minimzed */
#embeddedMessagingFrame.isMinimized {
    width: var(--ccmChat-cta-iconWidth);
	height: var(--ccmChat-cta-iconHeight);
	border-radius: 0;
	bottom: 35px;
	right: 24px;
}
/* #endregion */

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

    #embeddedMessagingConversationButton.embeddedMessagingConversationButton {
        width: 180px;
		height: 50px;
        background: #000;
        border-radius: 8px 8px 0 0;
	    gap: 8px;
        bottom: 0;
    }

    #embeddedMessagingConversationButton:after {
        content: var(--ccmChat-cta-text, "Let us help!");
        color: #fff;
    }

    #embeddedMessagingConversationButton.embeddedMessagingConversationButtonLoading:after {
        content: var(--ccmChat-cta-textLoading, "Loading...");
    }

    /* Custom CTA image for Desktop */
	#embeddedMessagingIconContainer: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);
		background-size: contain;
		background-repeat: no-repeat;
	}

    /* Hide default CTA image for Desktop */
	#embeddedMessagingIconChat {
		display: none;
	}

	/* When loading, hide Custom CTA image for Desktop */
	.embeddedMessagingConversationButtonLoading #embeddedMessagingIconContainer:before {
		content: none;
	}

    #embeddedMessagingFrame.isMinimized {
        width: 180px;
        height: 50px;
        bottom: 0;
    }

    #embeddedMessagingIconContainer {
        display: block;
        color: white;
        font-size: x-small;
    }
    #embeddedMessagingIconChat {
        height: 25px;
        vertical-align: middle;
    }
}