/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 24 2026 | 08:52:38 */
/* --- CHATBOT CSS START --- */
:root {
	--jp-teal: #007b70;
	--jp-light-teal: #e1f5f3;
	--jp-white: #ffffff;
}

#jp-chat-wrapper {
	position: fixed;
	bottom: 75px;
	right: 30px;
	z-index: 10000;
}

#jp-chat-trigger {
	width: 70px;
	height: 70px;
	background: var(--jp-white);
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(0,0,0,0.2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border: 2px solid var(--jp-teal);
}

#jp-chat-trigger:hover { transform: scale(1.1); }

#jp-chat-trigger img {
	width: 85%;
	height: 85%;
	border-radius: 50%;
	object-fit: cover;
}

#jp-chat-window {
	position: absolute;
	bottom: 85px;
	right: 0;
	width: 380px;
	max-width: calc(100vw - 60px);
	height: 550px;
	max-width: calc(100vw - 60px);
	background: var(--jp-white);
	border-radius: 20px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: opacity 0.3s, transform 0.3s;
	transform-origin: bottom right;
}

.hidden {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.8);
	display: none !important;
}

.jp-chat-header {
	background: var(--jp-teal);
	color: white;
	padding: 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-info { display: flex; align-items: center; gap: 12px; }

.header-icon img {
	width: 32px;
	height: 32px;
	background: white;
	border-radius: 50%;
	padding: 2px;
}

.close-btn {
	background: none;
	border: none;
	color: white;
	font-size: 28px;
	cursor: pointer;
	line-height: 1;
}

#jp-chat-messages {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 15px;
	background: #fdfdfd;
}

.message {
	max-width: 85%;
	padding: 12px 16px;
	border-radius: 18px;
	font-size: 14.5px;
	line-height: 1.5;
	position: relative;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.bot-msg {
	align-self: flex-start;
	background: var(--jp-light-teal);
	color: #222;
	border-bottom-left-radius: 4px;
}

.user-msg {
	align-self: flex-end;
	background: var(--jp-teal);
	color: white;
	border-bottom-right-radius: 4px;
}

.message small {
	display: block;
	font-size: 10px;
	margin-top: 6px;
	opacity: 0.6;
}

.typing-dots { padding: 10px; display: flex; gap: 5px; }
.typing-dots span {
	width: 7px; height: 7px; background: #bbb; border-radius: 50%;
	animation: blink 1.4s infinite both;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }

.jp-chat-input-area {
	padding: 15px;
	border-top: 1px solid #f0f0f0;
	display: flex;
	gap: 12px;
	background: white;
}

#jp-user-input {
	flex: 1;
	border: 1px solid #e0e0e0;
	padding: 12px 15px;
	border-radius: 25px;
	outline: none;
	font-size: 14px;
}

#jp-send-btn {
	background: none;
	border: none;
	cursor: pointer;
	fill: var(--jp-teal);
	width: 28px;
	display: flex;
	align-items: center;
}
/* --- CHATBOT CSS END --- */