/*
 * Floating contact button (inc/contact.php, js/contact.js) in the header's language: Montserrat, the slate
 * ink, hairlines, Phosphor glyphs. The round ink button holds a speech bubble that turns into a cross;
 * the card grows out of it (from the bottom right corner): Олена with her greeting in a chat bubble,
 * then Telegram (in its own blue, with its mark) and the phone. Phones: the card spans the screen.
 */

.ses-contact {
	--ink: #212b36;
	--text: #4a5561;
	--muted: #7a838c;
	--line: #e3e6e9;
	--soft: #f4f6f7;
	--telegram: #2aabee;
	--telegram-dark: #1e96d4;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--launcher: 56px;
	--edge: 24px;

	position: fixed;
	right: var(--edge);
	bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
	z-index: 99990; /* under the phone and cart drawers (100000) and the favourites toast */
	font-family: Montserrat, sans-serif;
	-webkit-font-smoothing: antialiased;
	transition: opacity 0.25s, visibility 0s linear 0s;
}

.ses-contact *,
.ses-contact *::before,
.ses-contact *::after {
	box-sizing: border-box;
}

/* Out of the way while a header panel, a phone drawer or the cart is open. */
html.ses-locked .ses-contact,
body.ses-nav-open .ses-contact,
body.ses-cart-open .ses-contact {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0s linear 0.2s;
}

/* The round button. */

.ses-contact .ses-contact__launcher {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--launcher);
	height: var(--launcher);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	box-shadow: 0 10px 28px rgba(33, 43, 54, 0.28);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.3s var(--ease), box-shadow 0.3s;
}

.ses-contact .ses-contact__launcher:hover,
.ses-contact .ses-contact__launcher:focus {
	background: var(--ink);
	color: #fff;
	outline: 0;
}

.ses-contact .ses-contact__launcher:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink);
}

.ses-contact .ses-contact__launcher:active {
	transform: scale(0.94);
}

.ses-contact__launcher .ses-icon {
	grid-area: 1 / 1;
	transition: opacity 0.25s, transform 0.4s var(--ease);
}

.ses-contact__close-icon {
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

.ses-contact.is-open .ses-contact__open-icon {
	opacity: 0;
	transform: rotate(90deg) scale(0.6);
}

.ses-contact.is-open .ses-contact__close-icon {
	opacity: 1;
	transform: none;
}

/* The card. */

.ses-contact__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	width: 344px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(33, 43, 54, 0.18);
	color: var(--ink);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.96);
	transform-origin: calc(100% - 28px) calc(100% + 14px);
	transition: opacity 0.2s, transform 0.3s var(--ease), visibility 0s linear 0.3s;
}

.ses-contact.is-open .ses-contact__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.25s, transform 0.45s var(--ease);
}

.ses-contact__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 12px 16px 18px;
}

.ses-contact__avatar {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--line);
}

.ses-contact__who {
	flex: 1 1 auto;
	min-width: 0;
}

.ses-contact__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
}

.ses-contact__role {
	margin-top: 2px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.35;
}

.ses-contact .ses-contact__close {
	display: grid;
	flex: 0 0 36px;
	place-items: center;
	align-self: flex-start;
	width: 36px;
	height: 36px;
	margin: -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.ses-contact .ses-contact__close:hover,
.ses-contact .ses-contact__close:focus-visible {
	background: var(--soft);
	color: var(--ink);
	outline: 0;
}

.ses-contact .ses-contact__close:focus:not(:focus-visible) {
	background: transparent;
	outline: 0;
}

/* Her greeting, as a message in a chat. */
.ses-contact__chat {
	padding: 18px 18px 20px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--soft);
}

.ses-contact .ses-contact__bubble {
	position: relative;
	max-width: 92%;
	margin: 0;
	padding: 11px 14px;
	border-radius: 4px 14px 14px 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(33, 43, 54, 0.06);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
}

.ses-contact.is-open .ses-contact__bubble {
	animation: ses-contact-message 0.5s var(--ease) 0.12s both;
}

@keyframes ses-contact-message {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* Two ways to reach the shop. */
.ses-contact__actions {
	display: grid;
	gap: 8px;
	padding: 14px;
}

.ses-contact .ses-contact__action {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 10px 14px 10px 10px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.ses-contact__badge {
	display: grid;
	flex: 0 0 40px;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--soft);
	color: var(--ink);
}

.ses-contact__label {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.ses-contact__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.ses-contact__hint {
	margin-top: 1px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.35;
}

.ses-contact__go {
	flex: 0 0 auto;
	color: var(--muted);
	transition: transform 0.3s var(--ease), color 0.2s;
}

/* Telegram: the main way, in Telegram's blue. */
.ses-contact .ses-contact__action--telegram {
	border-color: var(--telegram);
	background: var(--telegram);
	color: #fff;
}

.ses-contact__action--telegram .ses-contact__badge {
	background: #fff;
	color: var(--telegram);
}

.ses-contact__action--telegram .ses-contact__mark {
	margin-left: -2px; /* the plane's weight sits right of its box */
}

.ses-contact__action--telegram .ses-contact__hint,
.ses-contact__action--telegram .ses-contact__go {
	color: rgba(255, 255, 255, 0.8);
}

.ses-contact .ses-contact__action:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

@media (hover: hover) {
	.ses-contact .ses-contact__action:hover {
		border-color: var(--ink);
		color: var(--ink);
	}

	.ses-contact .ses-contact__action--telegram:hover {
		border-color: var(--telegram-dark);
		background: var(--telegram-dark);
		color: #fff;
	}

	.ses-contact .ses-contact__action:hover .ses-contact__go {
		transform: translateX(3px);
	}

	.ses-contact .ses-contact__action--phone:hover .ses-contact__go {
		color: var(--ink);
	}
}

/* Phones: the button a little smaller and nearer the edge, the card across the screen above it. */
@media (max-width: 600px) {
	.ses-contact {
		--launcher: 52px;
		--edge: 16px;
	}

	.ses-contact__panel {
		position: fixed;
		right: 16px;
		bottom: calc(16px + var(--launcher) + 12px + env(safe-area-inset-bottom, 0px));
		left: 16px;
		width: auto;
		max-height: calc(100dvh - 120px);
		overflow-y: auto;
		transform-origin: calc(100% - 26px) calc(100% + 12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ses-contact,
	.ses-contact * {
		transition: none !important;
		animation: none !important;
	}
}