/**
 * Jouelanity assistant.
 *
 * Sits in the theme's own vocabulary: sharp corners, thin rules, Raleway,
 * letterspaced small caps for labels. It reads as part of the shop rather than
 * a widget bolted on, which is the whole point of building it here rather than
 * embedding somebody else's bubble.
 */

.jl-chat-launch {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 12px 18px;
	border: 1px solid var(--jl-ink, #333);
	border-radius: 0;
	background: var(--jl-ink, #333);
	color: #fff;
	font-family: var(--jl-font, "Raleway", Arial, sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
	transition: background .2s ease, color .2s ease;
}

.jl-chat-launch:hover {
	background: #000;
}

.jl-chat-launch.is-open {
	background: #fff;
	color: var(--jl-ink, #333);
}

.jl-chat {
	position: fixed;
	right: 22px;
	bottom: 78px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	width: 370px;
	max-width: calc(100vw - 32px);
	max-height: min(74vh, 620px);
	background: #fff;
	border: 1px solid var(--jl-line, #e6e6e6);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
	font-family: var(--jl-font, "Raleway", Arial, sans-serif);
}

.jl-chat[hidden] {
	display: none;
}

.jl-chat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 16px;
	border-bottom: 1px solid var(--jl-line, #e6e6e6);
}

.jl-chat__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--jl-ink, #333);
}

.jl-chat__x {
	border: 0;
	background: none;
	padding: 0 2px;
	font-size: 22px;
	line-height: 1;
	color: var(--jl-muted, #9a9a9a);
	cursor: pointer;
}

.jl-chat__x:hover {
	color: var(--jl-ink, #333);
}

.jl-chat__intro {
	margin: 0;
	padding: 12px 16px;
	background: var(--jl-bg-soft, #f6f6f6);
	border-bottom: 1px solid var(--jl-line-2, #efefef);
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--jl-text, #7a7a7a);
}

.jl-chat__log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.jl-chat__msg {
	display: flex;
}

.jl-chat__msg--you {
	justify-content: flex-end;
}

.jl-chat__bubble {
	max-width: 84%;
	padding: 10px 13px;
	font-size: 13px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.jl-chat__msg--bot .jl-chat__bubble {
	background: var(--jl-bg-soft, #f6f6f6);
	color: var(--jl-ink, #333);
	border-left: 2px solid var(--jl-ink, #333);
}

.jl-chat__msg--you .jl-chat__bubble {
	background: var(--jl-ink, #333);
	color: #fff;
}

.jl-chat__msg.is-pending .jl-chat__bubble {
	color: var(--jl-muted, #9a9a9a);
	font-style: italic;
	border-left-color: var(--jl-line, #e6e6e6);
}

.jl-chat__form {
	display: flex;
	gap: 0;
	border-top: 1px solid var(--jl-line, #e6e6e6);
}

.jl-chat__input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 13px 14px;
	border: 0;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	color: var(--jl-ink, #333);
}

.jl-chat__input:focus {
	outline: 0;
	background: var(--jl-bg-alt, #fafafa);
}

.jl-chat__send {
	flex: 0 0 auto;
	margin: 0;
	padding: 13px 18px;
	border: 0;
	border-left: 1px solid var(--jl-line, #e6e6e6);
	border-radius: 0;
	background: #fff;
	color: var(--jl-ink, #333);
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}

.jl-chat__send:hover:not(:disabled) {
	background: var(--jl-ink, #333);
	color: #fff;
}

.jl-chat__send:disabled {
	color: var(--jl-muted, #9a9a9a);
	cursor: default;
}

.jl-chat__foot {
	margin: 0;
	padding: 10px 16px 13px;
	border-top: 1px solid var(--jl-line-2, #efefef);
	font-size: 11.5px;
	color: var(--jl-muted, #9a9a9a);
}

.jl-chat__foot a {
	color: var(--jl-ink-2, #555);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 520px) {
	.jl-chat {
		right: 12px;
		left: 12px;
		bottom: 72px;
		width: auto;
		max-height: 70vh;
	}

	.jl-chat-launch {
		right: 12px;
		bottom: 12px;
		padding: 11px 15px;
	}

	.jl-chat-launch span {
		display: none;
	}
}

@media print {
	.jl-chat,
	.jl-chat-launch {
		display: none !important;
	}
}