/**
 * 3J Chat Assistant Styles — v1.0.3
 *
 * Flat brand color: #009CA7 (no gradients).
 *
 * Isolation strategy:
 *  - All rules scoped under #threej-chatbot-root
 *  - Class namespace prefix: .tjc-
 *  - High specificity (#id .class) prevents theme overrides
 *  - All animations namespaced as `tjc-*` to prevent collision
 */

/* ============ Root reset & isolation ============ */
#threej-chatbot-root,
#threej-chatbot-root * {
	box-sizing: border-box;
}

#threej-chatbot-root {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #1a1a1a;
	font-weight: 400;
	text-align: left;
	letter-spacing: normal;

	/* Brand defaults — overridden inline by JS at runtime. */
	--tjc-primary: #072A31;
	--tjc-primary-dark: #04181c;
	--tjc-accent: #009CA7;
	--tjc-accent-dark: #007A82;
	--tjc-accent-light: #1FB9C4;
	--tjc-bg: #ffffff;
	--tjc-bg-soft: #f4f7f8;
	--tjc-text: #0a1a1d;
	--tjc-text-muted: #5a6b6f;
	--tjc-border: #dde5e7;
	--tjc-shadow: 0 12px 40px rgba(7, 42, 49, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
	--tjc-radius: 16px;
	--tjc-radius-sm: 10px;
}

/* ============ Generic icon wrapper ============ */
#threej-chatbot-root .tjc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}
#threej-chatbot-root .tjc-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ============ Launcher button ============ */
#threej-chatbot-root .tjc-launcher {
	position: fixed;
	/* Sits comfortably above the back-to-top button (typically ~24-30px). */
	bottom: 60px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--tjc-accent);
	color: #ffffff;
	border: none;
	cursor: pointer;
	box-shadow: var(--tjc-shadow);
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	opacity: 0;
	transform: scale(0.5);
	animation: tjc-launcher-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}

@keyframes tjc-launcher-in {
	to { opacity: 1; transform: scale(1); }
}

#threej-chatbot-root .tjc-launcher.tjc-pos-right { right: 24px; }
#threej-chatbot-root .tjc-launcher.tjc-pos-left  { left: 24px; }

#threej-chatbot-root .tjc-launcher:hover {
	background: var(--tjc-accent-dark);
	transform: scale(1.08);
	box-shadow: 0 16px 48px rgba(0, 156, 167, 0.32), 0 4px 12px rgba(0, 0, 0, 0.08);
}

#threej-chatbot-root .tjc-launcher:active {
	transform: scale(0.95);
}

#threej-chatbot-root .tjc-launcher:focus-visible {
	outline: 3px solid var(--tjc-accent-light);
	outline-offset: 3px;
}

/* Icons inside launcher — both stacked, swap via .tjc-open class */
#threej-chatbot-root .tjc-launcher .tjc-icon {
	width: 26px;
	height: 26px;
	transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: absolute;
}

#threej-chatbot-root .tjc-launcher .tjc-launcher-icon-close {
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}
#threej-chatbot-root .tjc-launcher.tjc-open .tjc-launcher-icon-open {
	opacity: 0;
	transform: rotate(90deg) scale(0.6);
}
#threej-chatbot-root .tjc-launcher.tjc-open .tjc-launcher-icon-close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* Pulsing notification dot — appears only after delay + only for unseen visitors */
#threej-chatbot-root .tjc-launcher .tjc-pulse {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 11px;
	height: 11px;
	background: #ffffff;
	border: 2px solid var(--tjc-accent);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0);
	animation: tjc-pulse-in 0.3s ease forwards, tjc-pulse 2s ease-in-out 0.3s infinite;
}

@keyframes tjc-pulse-in {
	to { opacity: 1; transform: scale(1); }
}
@keyframes tjc-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.35); }
}

/* Optional teaser bubble that appears with the pulse */
#threej-chatbot-root .tjc-teaser {
	position: fixed;
	bottom: 78px;
	background: #ffffff;
	color: var(--tjc-text);
	padding: 10px 16px;
	border-radius: 18px;
	box-shadow: var(--tjc-shadow);
	font-size: 13px;
	font-weight: 500;
	z-index: 999997;
	max-width: 220px;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
#threej-chatbot-root .tjc-teaser.tjc-pos-right { right: 100px; }
#threej-chatbot-root .tjc-teaser.tjc-pos-left  { left: 100px; }
#threej-chatbot-root .tjc-teaser.tjc-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
#threej-chatbot-root .tjc-teaser::after {
	content: "";
	position: absolute;
	bottom: 12px;
	width: 0;
	height: 0;
	border-style: solid;
}
#threej-chatbot-root .tjc-teaser.tjc-pos-right::after {
	right: -6px;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent #ffffff;
}
#threej-chatbot-root .tjc-teaser.tjc-pos-left::after {
	left: -6px;
	border-width: 6px 8px 6px 0;
	border-color: transparent #ffffff transparent transparent;
}
#threej-chatbot-root .tjc-teaser-close {
	background: transparent;
	border: none;
	color: var(--tjc-text-muted);
	cursor: pointer;
	padding: 0;
	margin-left: 8px;
	font-size: 16px;
	line-height: 1;
	vertical-align: middle;
}

/* ============ Chat panel ============ */
#threej-chatbot-root .tjc-panel {
	position: fixed;
	bottom: 135px; /* Above the launcher's 60px position */
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 600px;
	max-height: calc(100vh - 165px);
	background: var(--tjc-bg);
	border-radius: var(--tjc-radius);
	box-shadow: var(--tjc-shadow);
	z-index: 999999;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px) scale(0.96);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	transform-origin: bottom right;
}

#threej-chatbot-root .tjc-panel.tjc-pos-right { right: 24px; transform-origin: bottom right; }
#threej-chatbot-root .tjc-panel.tjc-pos-left  { left: 24px;  transform-origin: bottom left;  }

#threej-chatbot-root .tjc-panel.tjc-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* ============ Header ============ */
#threej-chatbot-root .tjc-header {
	background: var(--tjc-accent);
	color: #ffffff;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	position: relative;
}

#threej-chatbot-root .tjc-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--tjc-accent);
	overflow: hidden;
	padding: 6px;
}
#threej-chatbot-root .tjc-avatar .tjc-icon {
	width: 100%;
	height: 100%;
}
#threej-chatbot-root .tjc-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

#threej-chatbot-root .tjc-header-text {
	flex: 1;
	min-width: 0;
}
#threej-chatbot-root .tjc-header-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 2px 0;
	color: #ffffff;
	letter-spacing: 0.2px;
}
#threej-chatbot-root .tjc-header-status {
	font-size: 12px;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Status dot — green when open, amber-ish when offline */
#threej-chatbot-root .tjc-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
	animation: tjc-status-pulse 2.4s ease-in-out infinite;
}
#threej-chatbot-root .tjc-status-dot.tjc-status-offline {
	background: rgba(255, 255, 255, 0.5);
	animation: none;
}

@keyframes tjc-status-pulse {
	0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
	50%      { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15); }
}

#threej-chatbot-root .tjc-header-close {
	background: rgba(255, 255, 255, 0.18);
	border: none;
	color: #ffffff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	transition: background 0.2s ease;
	flex-shrink: 0;
}
#threej-chatbot-root .tjc-header-close .tjc-icon {
	width: 16px;
	height: 16px;
}
#threej-chatbot-root .tjc-header-close:hover {
	background: rgba(255, 255, 255, 0.28);
}

/* ============ Banners (announcement + offline) ============ */
#threej-chatbot-root .tjc-banner {
	padding: 10px 14px;
	font-size: 12.5px;
	line-height: 1.4;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--tjc-border);
}
#threej-chatbot-root .tjc-banner.tjc-banner-info {
	background: #fffbeb;
	color: #78350f;
	border-bottom-color: #fde68a;
}
#threej-chatbot-root .tjc-banner.tjc-banner-offline {
	background: #f0f9fa;
	color: var(--tjc-primary);
	border-bottom-color: rgba(0, 156, 167, 0.2);
}
#threej-chatbot-root .tjc-banner-icon {
	flex-shrink: 0;
	margin-top: 1px;
}
#threej-chatbot-root .tjc-banner-icon .tjc-icon {
	width: 14px;
	height: 14px;
}
#threej-chatbot-root .tjc-banner-text { flex: 1; min-width: 0; }
#threej-chatbot-root .tjc-banner-close {
	background: transparent;
	border: none;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}
#threej-chatbot-root .tjc-banner-close:hover { opacity: 1; }
#threej-chatbot-root .tjc-banner-close .tjc-icon { width: 12px; height: 12px; }

/* ============ Message list ============ */
#threej-chatbot-root .tjc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px 16px;
	background: var(--tjc-bg-soft);
	scroll-behavior: smooth;
}

#threej-chatbot-root .tjc-messages::-webkit-scrollbar { width: 6px; }
#threej-chatbot-root .tjc-messages::-webkit-scrollbar-track { background: transparent; }
#threej-chatbot-root .tjc-messages::-webkit-scrollbar-thumb {
	background: rgba(7, 42, 49, 0.18);
	border-radius: 3px;
}

#threej-chatbot-root .tjc-msg-row {
	display: flex;
	margin-bottom: 12px;
	animation: tjc-msg-in 0.3s ease forwards;
	opacity: 0;
}

@keyframes tjc-msg-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

#threej-chatbot-root .tjc-msg-row.tjc-bot  { justify-content: flex-start; }
#threej-chatbot-root .tjc-msg-row.tjc-user { justify-content: flex-end; }

#threej-chatbot-root .tjc-msg {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: var(--tjc-radius-sm);
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

#threej-chatbot-root .tjc-msg.tjc-bot {
	background: #ffffff;
	color: var(--tjc-text);
	border-bottom-left-radius: 4px;
	box-shadow: 0 1px 2px rgba(7, 42, 49, 0.08);
}

#threej-chatbot-root .tjc-msg.tjc-user {
	background: var(--tjc-accent);
	color: #ffffff;
	border-bottom-right-radius: 4px;
}

#threej-chatbot-root .tjc-msg strong { font-weight: 600; }
#threej-chatbot-root .tjc-msg br { display: block; content: ""; margin-top: 4px; }

/* ============ Quick reply buttons ============ */
#threej-chatbot-root .tjc-buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0 14px 0;
	animation: tjc-msg-in 0.3s 0.1s ease forwards;
	opacity: 0;
}

#threej-chatbot-root .tjc-btn {
	background: #ffffff;
	color: var(--tjc-accent);
	border: 1.5px solid var(--tjc-accent);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1.3;
	-webkit-tap-highlight-color: transparent;
}

#threej-chatbot-root .tjc-btn:hover {
	background: var(--tjc-accent);
	color: #ffffff;
}
#threej-chatbot-root .tjc-btn:active {
	transform: scale(0.98);
}

#threej-chatbot-root .tjc-btn-icon {
	width: 14px;
	height: 14px;
}

/* WhatsApp CTA — flat brand teal */
#threej-chatbot-root .tjc-btn.tjc-btn-whatsapp {
	background: var(--tjc-accent);
	color: #ffffff;
	border-color: var(--tjc-accent);
}
#threej-chatbot-root .tjc-btn.tjc-btn-whatsapp:hover {
	background: var(--tjc-accent-dark);
	border-color: var(--tjc-accent-dark);
}

/* Call CTA — dark primary */
#threej-chatbot-root .tjc-btn.tjc-btn-call {
	background: var(--tjc-primary);
	color: #ffffff;
	border-color: var(--tjc-primary);
}
#threej-chatbot-root .tjc-btn.tjc-btn-call:hover {
	background: var(--tjc-primary-dark);
	border-color: var(--tjc-primary-dark);
}

#threej-chatbot-root .tjc-btn.tjc-btn-back {
	background: transparent;
	color: var(--tjc-text-muted);
	border-color: var(--tjc-border);
	font-size: 12px;
}
#threej-chatbot-root .tjc-btn.tjc-btn-back:hover {
	background: var(--tjc-border);
	color: var(--tjc-text);
	border-color: var(--tjc-border);
}

/* ============ Typing indicator ============ */
#threej-chatbot-root .tjc-typing {
	display: inline-flex;
	gap: 4px;
	padding: 12px 14px;
	background: #ffffff;
	border-radius: var(--tjc-radius-sm);
	border-bottom-left-radius: 4px;
	box-shadow: 0 1px 2px rgba(7, 42, 49, 0.08);
}
#threej-chatbot-root .tjc-typing span {
	width: 6px;
	height: 6px;
	background: var(--tjc-accent);
	border-radius: 50%;
	animation: tjc-bounce 1.4s ease-in-out infinite;
}
#threej-chatbot-root .tjc-typing span:nth-child(2) { animation-delay: 0.15s; }
#threej-chatbot-root .tjc-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes tjc-bounce {
	0%, 60%, 100% { transform: translateY(0);  opacity: 0.4; }
	30%           { transform: translateY(-6px); opacity: 1;  }
}

/* ============ Input area ============ */
#threej-chatbot-root .tjc-input-area {
	border-top: 1px solid var(--tjc-border);
	background: #ffffff;
	padding: 12px;
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

#threej-chatbot-root .tjc-input {
	flex: 1;
	border: 1px solid var(--tjc-border);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	background: var(--tjc-bg-soft);
	color: var(--tjc-text);
	min-width: 0;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
#threej-chatbot-root .tjc-input:focus {
	border-color: var(--tjc-accent);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(0, 156, 167, 0.15);
}

/* Flat brand send button */
#threej-chatbot-root .tjc-send {
	background: var(--tjc-accent);
	color: #ffffff;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	margin: 0;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
#threej-chatbot-root .tjc-send:hover  { background: var(--tjc-accent-dark); }
#threej-chatbot-root .tjc-send:active { transform: scale(0.92); }
#threej-chatbot-root .tjc-send:disabled {
	background: var(--tjc-border);
	cursor: not-allowed;
}
#threej-chatbot-root .tjc-send .tjc-icon {
	width: 16px;
	height: 16px;
}

/* ============ Footer branding ============ */
#threej-chatbot-root .tjc-footer-note {
	text-align: center;
	font-size: 11px;
	color: var(--tjc-text-muted);
	padding: 6px 12px 10px;
	background: #ffffff;
	flex-shrink: 0;
	letter-spacing: 0.2px;
}

/* ============ Mobile responsiveness ============
   Mobile (<= 768px): force left positioning, edge-to-edge panel, dvh
   viewport handling for browsers with hide/show URL bars.

   Strategy for "force left on mobile":
   - The launcher/panel/teaser keep their server-set tjc-pos-* class so
     desktop behavior is unaffected.
   - Inside this media query we override BOTH .tjc-pos-right AND
     .tjc-pos-left to use left positioning. This means whatever the
     admin chose, mobile always shows on the left.
   - We use !important only on the `right` and `left` properties so we
     win over the side-class rules above (which carry id-specificity
     identical to ours). It's surgical and scoped to mobile only.
============================================================ */
@media (max-width: 768px) {

	/* ---- Launcher: force left on mobile ---- */
	#threej-chatbot-root .tjc-launcher,
	#threej-chatbot-root .tjc-launcher.tjc-pos-right,
	#threej-chatbot-root .tjc-launcher.tjc-pos-left {
		bottom: 16px;
		width: 56px;
		height: 56px;
		right: auto !important;
		left: 16px !important;
	}

	/* ---- Panel: edge-to-edge, full mobile screen, dvh-safe ---- */
	#threej-chatbot-root .tjc-panel,
	#threej-chatbot-root .tjc-panel.tjc-pos-right,
	#threej-chatbot-root .tjc-panel.tjc-pos-left {
		/* Stick to all four edges — true mobile chat experience */
		top: 0;
		bottom: 0;
		right: 0 !important;
		left: 0 !important;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		height: 100dvh; /* preferred when supported */
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 0; /* full-screen — no rounded corners */
		/* Open-from-bottom feels right on mobile, regardless of side */
		transform-origin: bottom center;
	}

	/* Slightly different open animation on mobile — slide up from bottom */
	#threej-chatbot-root .tjc-panel {
		transform: translateY(20px);
	}
	#threej-chatbot-root .tjc-panel.tjc-visible {
		transform: translateY(0) scale(1);
	}

	/* Header gets safe-area inset for iOS notch */
	#threej-chatbot-root .tjc-header {
		padding-top: calc(18px + env(safe-area-inset-top, 0px));
		padding-left: calc(20px + env(safe-area-inset-left, 0px));
		padding-right: calc(20px + env(safe-area-inset-right, 0px));
	}

	/* Input area: respect bottom safe-area on iPhones with home indicator */
	#threej-chatbot-root .tjc-input-area {
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		padding-left: calc(12px + env(safe-area-inset-left, 0px));
		padding-right: calc(12px + env(safe-area-inset-right, 0px));
	}

	/* Footer disappears on mobile to save space — small screens are
	   already crowded and the branding isn't critical */
	#threej-chatbot-root .tjc-footer-note {
		display: none;
	}

	/* Banner padding tweak for narrow screens */
	#threej-chatbot-root .tjc-banner {
		padding: 10px 16px;
	}

	/* Slightly larger close button — fingers, not mice */
	#threej-chatbot-root .tjc-header-close {
		width: 36px;
		height: 36px;
	}
	#threej-chatbot-root .tjc-header-close .tjc-icon {
		width: 18px;
		height: 18px;
	}

	/* Quick reply buttons: more comfortable padding for thumbs */
	#threej-chatbot-root .tjc-btn {
		padding: 11px 18px;
		font-size: 13.5px;
	}

	/* Messages area gets a touch more horizontal breathing room */
	#threej-chatbot-root .tjc-messages {
		padding: 16px 14px;
	}

	/* Slightly larger input for thumb typing */
	#threej-chatbot-root .tjc-input {
		padding: 12px 18px;
		font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
	}

	/* Send button — bigger tap target */
	#threej-chatbot-root .tjc-send {
		width: 44px;
		height: 44px;
	}

	/* Hide teaser entirely on mobile — too cramped, and the pulse
	   already does the job of attracting attention */
	#threej-chatbot-root .tjc-teaser {
		display: none !important;
	}

	/* Pulse stays the same; just make sure it's on the right side of
	   the launcher (which is now on the left) so it doesn't get clipped
	   off-screen */
	#threej-chatbot-root .tjc-launcher .tjc-pulse {
		top: 6px;
		right: 6px;
	}
}

/* Extra-narrow phones (< 360px wide): tighten further */
@media (max-width: 360px) {
	#threej-chatbot-root .tjc-header {
		padding-left: calc(14px + env(safe-area-inset-left, 0px));
		padding-right: calc(14px + env(safe-area-inset-right, 0px));
		gap: 10px;
	}
	#threej-chatbot-root .tjc-avatar {
		width: 38px;
		height: 38px;
	}
	#threej-chatbot-root .tjc-header-title {
		font-size: 15px;
	}
	#threej-chatbot-root .tjc-header-status {
		font-size: 11.5px;
	}
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
	#threej-chatbot-root *,
	#threej-chatbot-root *::before,
	#threej-chatbot-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}