/*
 * Copyright 2020 salesforce.com, inc.
 * All Rights Reserved
 * Company Confidential
 */

/* CSS Variable for handling icon fill color */
:root {
	--eswIconFillColor: #FFFFFF;
	--eswIconFontSize: 16px;
	--eswButtonBottom: 25px;
	--eswButtonRight: 30px;
}

/* Default iframe specs. */
.embeddedMessagingFrame {
	/* hide iframe on initial page load by having 0x0 height & width */
	height: 0px;
	width: 0px;
	position: fixed;
	background: transparent;
	/* iframe border */
	border: none;
	outline: none;
	border-radius: 8px 8px 0 0;
	box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
}

/* Inline top container spec */
.embedded-messaging-inline {
	height: 100%;
	width: 100%;
}

/* Inline iframe specs. */
.embeddedMessagingFrameInline {
	position: relative;
	height: 100%;
	width: 100%;
}

/* minimized iframe is re-positioned above static button on both mobile and tablets/desktops */
.embedded-messaging > .embeddedMessagingFrame[class~="isMinimized"] {
	/* positioning */
	bottom: var(--eswButtonBottom, 25px);
	right: var(--eswButtonRight, 30px);
	/* padding */
	margin: 0;
	/* sizing of button */
	height: 62px;
	width: 62px;
	/* do not show shadow when minimized */
	box-shadow: none;
	display: inline-block;
	visibility: visible;
	/* rounded corners to surround minimized button */
	border-radius: 50%;
}

.embedded-messaging > .embeddedMessagingFrame[class~="isMinimized"][dir~="rtl"] {
	right: 0px;
	left: var(--eswButtonRight, 30px);
}

.embedded-messaging > .embeddedMessagingFrame[class~="isMinimized"][dir~="rtl"][class~="eswExperienceSite"] {
	right: calc(100vw - 7em);
}

.embedded-service ~ .embedded-messaging > .embeddedMessagingFrame[class~="isMinimized"] {
	/* channel menu specific positioning*/
	bottom: 22px;
	right: 27px;
}

.embedded-messaging > .embeddedMessagingFrame[class~="hasMinimizedNotification"]:not(.isMaximized) {
	/* sizing of button and notification */
	height: 215px;
	width: 206px;
	/* remove rounded corners for notification */
	border-radius: 0;
}

/* Ensure that our chat button and modal floats above other components */
.embeddedMessagingFrame,
.embeddedMessagingConversationButtonWrapper {
	/* TODO: W-10995140 - Expose styling control to customers. */
	z-index: 999;
}

/*
 * [Mobile] This mobile-only rule prevents the page from scrolling in the background while the widget is maximize.
 * This class on document.body is toggled by embeddedservice_bootstrap.minimizeIframe and embeddedservice_bootstrap.maximizeIframe.
 */
.embeddedMessagingPreventScrolling {
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
}

/* Container div for the button */
.embeddedMessagingConversationButtonWrapper {
	display: block;
	position: fixed;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	font-family: sans-serif;
	top: 0;
	left: 0;
}

/* Button default specs */
.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton {
	/* button position on page */
	position: fixed;
	bottom: var(--eswButtonBottom, 25px);
	right: var(--eswButtonRight, 30px);
	/* button size - if changed, update minimizedState.css */
	width: 56px;
	height: 56px;
	/* button border */
	outline: 0;
	border: none;
	border-radius: 50%;
	box-shadow: none;
	text-align: center;
	overflow: hidden;
	pointer-events: all;
	cursor: pointer;
	/* Increase style specificity to prevent parent app button styles from influencing button styling */
	display: block;
	line-height: normal;
	padding: 0;
	margin: 0;
	font-size: var(--eswIconFontSize, 16px);
	box-sizing: border-box;
}

.embeddedMessagingGRecaptchaBanner .grecaptcha-badge {
	bottom: min(calc(var(--eswButtonBottom, 25px) + 75px), 100vh - 125px) !important;
}

.embeddedMessagingGRecaptchaBanner .grecaptcha-badge[class~="isMaximized"] {
	bottom: min(calc(var(--eswHeight, 480px) + 25px), 100vh - 125px) !important;
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton[dir~="rtl"] {
	right: 0;
	left: var(--eswButtonRight, 30px);
	transform: scaleX(-1);
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton[dir~="rtl"][class~="eswExperienceSite"] {
	right: calc(100vw - 7em);
}

/* [A11Y] Elements on parent page consumes custom branding tokens from config */
.embeddedMessagingConversationButton {
	background: var(--eswButtonColor, #2E2E2E);
}

.embeddedMessagingConversationButton:focus {
	outline: 2px solid var(--eswButtonColor, #2E2E2E);
    outline-offset: 2px;
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:not(.no-hover):hover {
	outline: 0;
	background: var(--eswButtonHoverColor, #181818);
	transition-timing-function: ease-in-out;
	transition: all 0.2s;
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:active:after {
	transform: scale(0, 0);
	opacity: 0.3;
	transition: 0s;
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton[class~="embeddedMessagingConversationButtonLoading"] {
	pointer-events: none;
	cursor: none;
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton[class~="embeddedMessagingConversationButtonLoaded"] {
	box-shadow: none;
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"] {
	/* centers icon container on button */
	display: inline-block;
	vertical-align: middle;
	/* fit icon container to button size */
	max-width: 100%;
	max-height: 100%;
}

/* Default chat icon shown on button, on page load. */
.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"] > svg.embeddedMessagingIconChat {
	/* button icon size */
	width: 100%;
	height: 100%;
	max-height: 30px;
	max-width: 30px;
	fill: var(--eswIconFillColor);
	transform: scale(1) translate(0px, 1.5px);
	overflow: visible;
}

/* Custom chat icon (from fabImageUrl) shown on button, on page load.*/
.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"] > img.embeddedMessagingIconChat {
	/* button icon size */
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: contain;
}

/* Minimize action shown on button, when client is maximized. */
.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"] > svg.embeddedMessagingIconMinimize {
	/* button icon size */
	width: 100%;
	height: 100%;
	max-height: 30px;
	max-width: 30px;
	fill: var(--eswIconFillColor);
	transform: scale(1.5) translate(7px, 8px);
	overflow: visible;
}

/* Minimize action shown on button, when client is maximized. */
.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"] > svg.embeddedMessagingIconError {
	/* button icon size */
	width: 100%;
	height: 100%;
	max-height: 32px;
	max-width: 32px;
	fill: var(--eswIconFillColor);
	transform: scale(3.35) translate(10.8px, 10.9px);
	overflow: visible;
}

.embeddedMessagingIconProgressIndicator {
    position: relative;
    width: 25px;
    height: 25px;
}

.embeddedMessagingIconOuterArc {
    position: absolute;
    top: 0;
    left: 0;
    animation-name: clockwise;
    animation-duration: 2.5s;
    transform-box: fill-box;
    animation-iteration-count: infinite;
    transform-origin: center;
    display: inline-block;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.7);
    height: 25px;
    width: 25px;
    fill: var(--eswIconFillColor, #FFFFFF);
}

.embeddedMessagingIconInnerArc {
    position: absolute;
    top: 5.8px;
    left: 12.2px;
    animation-name: anti-clockwise;
    animation-duration: 2.5s;
    transform-box: fill-box;
    animation-iteration-count: infinite;
    transform-origin: 0.5px 6.7px;
    display: inline-block;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.7);
    height: 14px;
    width: 14px;
    fill: var(--eswIconFillColor, #FFFFFF);
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes anti-clockwise {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.embeddedMessagingFilePreviewFrame {
	position: fixed;
	z-index: 99999999999;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: transparent;
	display: none;
}

.embeddedMessagingFilePreviewFrame[class~="show"] {
	display: block;
}

.embeddedMessagingSiteContextFrame {
	display: none;
}

/* Minimized Notification area */
.embeddedMessagingMinimizedNotification {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	max-width: 302px;
	width: auto;
	min-height: 53px;
	height: auto;
	border-radius: 8px;
	background: var(--eswNotificationBackgroundColor, #2e2e2e);
	box-shadow: none;
	position: fixed;
	bottom: 102px;
	right: 30px;
	pointer-events: all;
	cursor: default;
	text-decoration: none;
	overflow: visible;
}

.embeddedMessagingMinimizedNotification[dir~="rtl"] {
	right: auto;
	left: var(--eswButtonRight, 30px);
}

.embeddedMessagingMinimizedNotification::-moz-focus-inner,
.embeddedMessagingMinimizedNotificationDismissButton::-moz-focus-inner {
	/* No outline on firefox. */
	border: 0;
	outline: 0;
	outline-style: none;
	-moz-outline-style: none;
}

.embeddedMessagingMinimizedNotificationTextWrapper {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	max-width: 245px;
	width: auto;
	padding: 10px 0 10px 10px;
}

.embeddedMessagingMinimizedNotificationTextWrapper[dir~="rtl"] {
	padding: 10px 10px 10px 0;
}

.embeddedMessagingMinimizedNotificationTextWrapper>.embeddedMessagingMinimizedNotificationText {
	color: var(--eswNotificationTextColor, #ffffff);
	font-family: "Segoe UI";
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	white-space: normal;
	text-align: left;
}

.embeddedMessagingMinimizedNotificationTextWrapper>.embeddedMessagingMinimizedNotificationText[dir~="rtl"] {
	text-align: right;
}

.embeddedMessagingMinimizedNotificationDismissButton {
	width: 36px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	background-color: var(--eswNotificationBackgroundColor, #2e2e2e);
	border: none;
	box-shadow: none;
	outline: none;
	cursor: pointer;
	margin: 4px;
	border-radius: 4px;
}

.embeddedMessagingMinimizedNotificationDismissButton:focus {
	outline: 2px solid var(--eswNotificationButtonColor, #AEAEAE);
	outline-offset: -4px;
}

.embeddedMessagingMinimizedNotificationDismissButton:hover {
	background-color: var(--eswNotificationButtonHoverColor, #181818);
}

.embeddedMessagingMinimizedNotificationDismissButton svg {
	width: 16px;
	height: 16px;
	fill: var(--eswNotificationButtonColor, #AEAEAE);
}

.slds-assistive-text {
	position: absolute !important;
	margin: -1px !important;
	border: 0 !important;
	padding: 0 !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

/***************************
	Animations (Classes)
***************************/
.embeddedMessagingLiveRegion {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/***************************
	Animations (Keyframes)
***************************/
@keyframes embeddedmessaging-loading-circle-fade-delay {
	/* Loading circles fade delay. */
	0%,
	39%,
	100% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}
}

/***************************
Responsive styles for the iframe
(mobile vs desktop/tablet)
***************************/
/* mobile phones (240px-767px) */
@media only screen and (min-width: 15em) and (max-width: 47.9375em) {
	/* maximized iframe takes up entire viewport on mobile devices */
	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {
		/* positioning */
		bottom: 0;
		right: 0;
		/* padding */
		margin: 16px;
		width: var(--eswWidth, 320px);
		height: var(--eswHeight, 480px);
		/* default iframe dimensions */
		height: 100vh;
		width: 100vw;
		max-height: calc(100vh - 9em);
		max-width: calc(100vw - 2em);
		min-width: 80px;
		min-height: 120px;
		display: inline-block;
		visibility: visible;
	}

	/* dynamic container sizing for experience site */
	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"][class~="eswExperienceSite"] {
		max-height: calc(100vh - 11em);
	}

	/* dynamic container sizing for mobile publisher app */
	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"][class~="eswMobilePublisher"] {
		max-height: calc(100vh - 6em);
	}

	/* dynamic container sizing for desktop devices that have been magnified to mobile viewport*/
	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"][class~="eswIsDesktop"] {
		max-height: calc(100vh - 2em);
	}

	/* hide static button if chat is maximized */
	#embeddedMessagingModalOverlay[class~="isMaximized"]~div.embeddedMessagingConversationButtonWrapper {
		display: none;
	}

	/* hide background modal on mobile when client is minimized */
	.embedded-messaging > #embeddedMessagingModalOverlay {
		display: none;
	}

	/* show background modal on mobile when client is maximized */
	.embedded-messaging > #embeddedMessagingModalOverlay.isMaximized {
		background-color: rgba(51, 51, 51, 0.48);
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		pointer-events: none;
		cursor: none;
		overflow: hidden;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
	}

	/* do not allow background clicks or scrolling on mobile devices when client is maximized */
	.embeddedMessagingPreventScrolling {
		overflow: hidden;
		cursor: none;
	}
}

/* tablets and desktops (768px+) */
@media only screen and (min-width: 48em) {
	/* maximized iframe is re-positioned above static button on tablets and desktops */
	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {
		/* positioning */
		bottom: 0;
		right: 30px;
		/* padding */
		margin: 0;
		display: inline-block;
		visibility: visible;
		/* dynamic container sizing for iframe when zooming in */
		max-height: calc(100vh - 9em);
		max-width: calc(100vw - 9em);
		min-width: 80px;
		min-height: 120px;
		width: var(--eswWidth, 320px);
		height: var(--eswHeight, 480px);
	}

	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"][dir~="rtl"] {
		right: 0;
		left: 30px;
	}

	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"][dir~="rtl"][class~="eswExperienceSite"] {
		right: calc(100vw - 29em);
	}

	/* show button if chat is maximized on tablets and desktops */
	#embeddedMessagingModalOverlay[class~="isMaximized"]~div.embeddedMessagingConversationButtonWrapper {
		display: block;
	}

	/* hide background modal on tablets and desktops */
	.embedded-messaging > #esw-modaloverlay,
	.embedded-messaging > #esw-modaloverlay.isMaximized {
		display: none;
	}

	/* allow background clicks and scrolling on tablets/desktop when client is maximized */
	.embeddedMessagingPreventScrolling {
		pointer-events: auto;
		cursor: auto;
	}
}

/*
	These devices' widths happen to be within the bounds of the tablet/desktop media query, but should behave like mobile phones.
	In order to override it, this media query targets specific devices and must always be preceded by the tablet/desktop media query.
	-  iPhone X (370px-816px) in landscape mode
*/
@media only screen and (min-width: 23.125em) and (max-width: 51em) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
	/* maximized iframe takes up entire viewport on mobile devices */
	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {
		/* positioning */
		bottom: 0;
		right: 0;
		/* padding */
		margin: 16px;
		/* default iframe dimensions */
		max-height: calc(100vh - 7em);
		max-width: calc(100vw - 2em);
		min-width: 80px;
		min-height: 120px;
		width: var(--eswWidth, 100vw);
		height: var(--eswHeight, 100vh);
		display: inline-block;
		visibility: visible;
	}

	/* dynamic container sizing for experience site */
	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"][class~="eswExperienceSite"] {
		max-height: calc(100vh - 9em);
	}

	/* dynamic container sizing for mobile publisher app */
	.embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"][class~="eswMobilePublisher"] {
		max-height: calc(100vh - 4em);
	}

	/* hide static button if client is maximized */
	#embeddedMessagingModalOverlay[class~="isMaximized"]~div.embeddedMessagingConversationButtonWrapper {
		display: none;
	}

	/* hide background modal on mobile when client is minimized */
	.embedded-messaging > #embeddedMessagingModalOverlay {
		display: none;
	}

	/* show background modal on mobile when client is maximized */
	.embedded-messaging > #embeddedMessagingModalOverlay.isMaximized {
		background-color: rgba(51, 51, 51, 0.48);
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		pointer-events: none;
		cursor: none;
		overflow: hidden;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
	}

	/* do not allow background clicks or scrolling on mobile devices when client is maximized */
	.embeddedMessagingPreventScrolling {
		overflow: hidden;
		cursor: none;
	}
}