/* TLE Chat Assistant — brand: ink #16181B, slate #3A4048, safety orange #FF6B1A, rust #B34300, paper #F7F6F2 */
#tle-chat-root {
	--tle-ink: #16181B;
	--tle-ink-2: #22262B;
	--tle-slate: #3A4048;
	--tle-muted: #6B7079;
	--tle-orange: #FF6B1A;
	--tle-orange-hover: #FF8540;
	--tle-rust: #B34300;
	--tle-paper: #F7F6F2;
	--tle-rule: #E2DED5;
	--tle-white: #FFFFFF;
	--tle-radius: 16px;
	--tle-shadow: 0 24px 60px -12px rgba(22, 24, 27, .38), 0 4px 14px rgba(22, 24, 27, .12);
	--tle-ease: cubic-bezier(.2, .8, .2, 1);
	--tle-gap: 24px;
	position: fixed;
	right: var(--tle-gap);
	bottom: var(--tle-gap);
	z-index: 99990;
	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--tle-slate);
	-webkit-font-smoothing: antialiased;
}
#tle-chat-root *, #tle-chat-root *::before, #tle-chat-root *::after { box-sizing: border-box; }
#tle-chat-root [hidden] { display: none !important; }
/* Theme-proofing: neutralise theme button/link styles inside the widget */
#tle-chat-root button, #tle-chat-root a {
	margin: 0; min-height: 0; width: auto;
	text-transform: none; letter-spacing: normal; line-height: 1.2;
	background-image: none; box-shadow: none; text-shadow: none;
	white-space: normal; vertical-align: middle;
}
#tle-chat-root button span, #tle-chat-root a span { display: inline; margin: 0; padding: 0; }

#tle-chat-root svg { width: 18px; height: 18px; flex: none; display: block; }
#tle-chat-root button { font-family: inherit; cursor: pointer; }

/* ---------- launcher ---------- */
#tle-chat-root .tle-launcher {
	position: relative;
	display: flex; align-items: center; gap: 10px;
	height: 56px; padding: 0 22px 0 10px;
	border: 0; border-radius: 999px;
	background: var(--tle-ink); color: var(--tle-white);
	font: 600 15px/1 Poppins, "DM Sans", system-ui, sans-serif; letter-spacing: .1px;
	box-shadow: var(--tle-shadow);
	opacity: 0; transform: translateY(12px);
	transition: transform .35s var(--tle-ease), opacity .35s var(--tle-ease), background-color .2s;
}
#tle-chat-root.is-ready .tle-launcher { opacity: 1; transform: none; }
#tle-chat-root .tle-launcher:focus { background: var(--tle-ink); color: var(--tle-white); border: 0; }
#tle-chat-root .tle-launcher:hover { background: var(--tle-ink-2); color: var(--tle-white); transform: translateY(-2px); }
#tle-chat-root .tle-launcher:focus-visible { outline: 3px solid var(--tle-orange); outline-offset: 3px; }
#tle-chat-root .tle-launcher__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255, 255, 255, .08); color: var(--tle-white);
}
#tle-chat-root .tle-launcher__icon svg { width: 24px; height: 24px; }
#tle-chat-root .tle-launcher__dot {
	position: absolute; top: 6px; left: 38px;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--tle-orange); border: 2px solid var(--tle-ink);
}
#tle-chat-root.is-open .tle-launcher { display: none; }

/* ---------- panel ---------- */
#tle-chat-root .tle-panel {
	position: absolute; right: 0; bottom: 0;
	width: 392px; height: min(640px, calc(100vh - 48px));
	display: flex; flex-direction: column;
	background: var(--tle-paper);
	border-radius: var(--tle-radius);
	box-shadow: var(--tle-shadow);
	overflow: hidden;
	transform-origin: bottom right;
	animation: tle-pop .32s var(--tle-ease);
}
@keyframes tle-pop { from  { opacity: 0; transform: translateY(14px) scale(.97); } to  { opacity: 1; transform: none; } }

#tle-chat-root .tle-head {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 10px 14px 16px;
	background: var(--tle-ink); color: var(--tle-white);
	border-bottom: 3px solid var(--tle-orange);
}
#tle-chat-root .tle-avatar {
	position: relative; flex: none;
	display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 12px;
	background: rgba(255, 255, 255, .07); color: var(--tle-white);
}
#tle-chat-root .tle-avatar svg { width: 28px; height: 28px; }
#tle-chat-root .tle-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
#tle-chat-root .tle-online {
	position: absolute; right: -2px; bottom: -2px;
	width: 12px; height: 12px; border-radius: 50%;
	background: #2FBF71; border: 2px solid var(--tle-ink);
}
#tle-chat-root .tle-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#tle-chat-root .tle-head__text strong { font: 600 16px/1.25 Poppins, "DM Sans", sans-serif; color: var(--tle-white); }
#tle-chat-root .tle-head__text small { font-size: 12.5px; color: #B9BEC5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tle-chat-root .tle-iconbtn {
	display: grid; place-items: center; padding: 0;
	width: 36px; height: 36px; border: 0; border-radius: 10px;
	background: transparent; color: #C9CDD2;
	transition: background-color .2s, color .2s;
}
#tle-chat-root .tle-iconbtn:focus { background: transparent; color: #C9CDD2; }
#tle-chat-root .tle-iconbtn:hover { background: rgba(255, 255, 255, .1); color: var(--tle-white); }
#tle-chat-root .tle-iconbtn:focus-visible { outline: 2px solid var(--tle-orange); outline-offset: 1px; }

#tle-chat-root .tle-quickbar {
	display: flex; gap: 8px; padding: 10px 12px;
	background: var(--tle-white); border-bottom: 1px solid var(--tle-rule);
}
#tle-chat-root .tle-qb {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 36px; padding: 0 10px; border-radius: 9px;
	border: 1px solid var(--tle-rule); background: var(--tle-paper);
	color: var(--tle-ink) !important; text-decoration: none !important;
	font: 600 13px/1 Poppins, "DM Sans", sans-serif;
	transition: border-color .2s, background-color .2s;
	white-space: nowrap;
}
#tle-chat-root .tle-qb svg { color: var(--tle-rust); width: 16px !important; height: 16px !important; }
#tle-chat-root .tle-qb:focus { background: var(--tle-paper); color: var(--tle-ink); border-color: var(--tle-rule); }
#tle-chat-root .tle-qb:hover { border-color: var(--tle-orange); background: #FFF6F0; color: var(--tle-ink); }
#tle-chat-root .tle-qb--book { background: var(--tle-orange); border-color: var(--tle-orange); }
#tle-chat-root .tle-qb--book svg { color: var(--tle-ink); }
#tle-chat-root .tle-qb--book:focus { background: var(--tle-orange); border-color: var(--tle-orange); }
#tle-chat-root .tle-qb--book:hover { background: var(--tle-orange-hover); border-color: var(--tle-orange-hover); }

/* ---------- messages ---------- */
#tle-chat-root .tle-log {
	flex: 1; overflow-y: auto; overscroll-behavior: contain;
	padding: 18px 14px 8px;
	display: flex; flex-direction: column; gap: 10px;
	scroll-behavior: smooth;
}
#tle-chat-root .tle-row { display: flex; animation: tle-in .28s var(--tle-ease); }
@keyframes tle-in { from  { opacity: 0; transform: translateY(6px); } to  { opacity: 1; transform: none; } }
#tle-chat-root .tle-row--user { justify-content: flex-end; }
#tle-chat-root .tle-bubble {
	max-width: 86%;
	padding: 10px 14px;
	border-radius: 14px;
	word-wrap: break-word; overflow-wrap: anywhere;
}
#tle-chat-root .tle-row--bot .tle-bubble {
	background: var(--tle-white); color: var(--tle-slate);
	border: 1px solid var(--tle-rule);
	border-bottom-left-radius: 4px;
}
#tle-chat-root .tle-row--user .tle-bubble {
	background: var(--tle-ink); color: var(--tle-white);
	border-bottom-right-radius: 4px;
	white-space: pre-wrap;
}
#tle-chat-root .tle-bubble p { margin: 0 0 8px; }
#tle-chat-root .tle-bubble p:last-child, #tle-chat-root .tle-bubble ul:last-child, #tle-chat-root .tle-bubble ol:last-child { margin-bottom: 0; }
#tle-chat-root .tle-bubble ul, #tle-chat-root .tle-bubble ol { margin: 4px 0 8px; padding-left: 18px; }
#tle-chat-root .tle-bubble li { margin: 0 0 5px; padding-left: 2px; line-height: 1.45; }
#tle-chat-root .tle-bubble li:last-child { margin-bottom: 0; }
#tle-chat-root .tle-bubble li::marker { color: var(--tle-orange); }
#tle-chat-root .tle-bubble ol li::marker { font-weight: 700; color: var(--tle-rust); }
#tle-chat-root .tle-bubble p + ul, #tle-chat-root .tle-bubble p + ol { margin-top: -2px; }
#tle-chat-root .tle-bubble ul + p, #tle-chat-root .tle-bubble ol + p { margin-top: 10px; }
#tle-chat-root .tle-bubble .tle-label {
	margin: 12px 0 4px; padding-top: 10px;
	border-top: 1px solid var(--tle-rule);
	font: 600 12px/1.3 Poppins, "DM Sans", sans-serif;
	letter-spacing: .3px; text-transform: uppercase;
	color: var(--tle-rust);
}
#tle-chat-root .tle-bubble .tle-label:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#tle-chat-root .tle-bubble strong { color: var(--tle-ink); font-weight: 700; }
#tle-chat-root .tle-bubble a { color: var(--tle-rust); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
#tle-chat-root .tle-bubble a:hover { color: var(--tle-orange); }

#tle-chat-root .tle-typing .tle-bubble { display: flex; gap: 5px; padding: 14px 16px; }
#tle-chat-root .tle-typing i {
	width: 7px; height: 7px; border-radius: 50%; background: #A3A8AF;
	animation: tle-dot 1.1s infinite ease-in-out;
}
#tle-chat-root .tle-typing i:nth-child(2) { animation-delay: .15s; }
#tle-chat-root .tle-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tle-dot { 0%, 80%, 100%  { opacity: .35; transform: translateY(0); } 40%  { opacity: 1; transform: translateY(-3px); } }

#tle-chat-root .tle-note { align-self: center; font-size: 12px; color: var(--tle-muted); }

#tle-chat-root .tle-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 2px; }
#tle-chat-root .tle-chip {
	border: 1px solid var(--tle-orange); background: var(--tle-white);
	color: var(--tle-rust); border-radius: 999px;
	padding: 7px 12px; font-size: 13px; font-weight: 600; line-height: 1.25; text-align: left;
	transition: background-color .2s, color .2s;
}
#tle-chat-root .tle-chip:focus { background: var(--tle-white); color: var(--tle-rust); }
#tle-chat-root .tle-chip:hover { background: var(--tle-orange); color: var(--tle-ink); }

/* ---------- cards ---------- */
#tle-chat-root .tle-card {
	align-self: stretch;
	margin: 2px 0 2px;
	padding: 14px;
	background: var(--tle-white);
	border: 1px solid var(--tle-rule);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(22, 24, 27, .05);
	display: flex; flex-direction: column; gap: 8px;
	animation: tle-in .28s var(--tle-ease);
}
#tle-chat-root .tle-card__intro { margin: 0; font-size: 14px; color: var(--tle-ink); font-weight: 600; }
#tle-chat-root .tle-card__ok, #tle-chat-root .tle-card--done { color: #1E6B37; font-weight: 600; margin: 0; }
#tle-chat-root .tle-card--done { background: #EEF8F1; border-color: #CBE9D5; }
#tle-chat-root .tle-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 44px; padding: 10px 14px;
	border-radius: 9px; border: 1px solid transparent;
	font: 600 14px/1.2 Poppins, "DM Sans", sans-serif;
	text-decoration: none !important;
	transition: background-color .2s, border-color .2s, transform .15s;
}
#tle-chat-root .tle-btn:active { transform: scale(.985); }
#tle-chat-root .tle-btn--primary { background: var(--tle-orange); color: var(--tle-ink) !important; }
#tle-chat-root .tle-btn--primary:focus { background: var(--tle-orange); color: var(--tle-ink); }
#tle-chat-root .tle-btn--primary:hover { background: var(--tle-orange-hover); color: var(--tle-ink); }
#tle-chat-root .tle-btn--primary:disabled { opacity: .6; cursor: wait; }
#tle-chat-root .tle-btn--ghost { background: transparent; border-color: var(--tle-rule); color: var(--tle-ink) !important; }
#tle-chat-root .tle-btn--ghost:focus { background: transparent; color: var(--tle-ink); }
#tle-chat-root .tle-btn--ghost:hover { background: transparent; color: var(--tle-ink); border-color: var(--tle-ink); }
#tle-chat-root .tle-btn:focus-visible, #tle-chat-root .tle-chip:focus-visible, #tle-chat-root .tle-qb:focus-visible { outline: 3px solid var(--tle-ink); outline-offset: 2px; }
#tle-chat-root .tle-linkbtn, #tle-chat-root .tle-linkbtn:hover, #tle-chat-root .tle-linkbtn:focus { align-self: center; border: 0; background: none; color: var(--tle-muted); font-size: 13px; text-decoration: underline; padding: 4px 8px; }

#tle-chat-root .tle-f { display: flex; flex-direction: column; gap: 3px; margin: 0; }
#tle-chat-root .tle-f span { font-size: 12px; font-weight: 600; color: var(--tle-slate); }
#tle-chat-root .tle-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#tle-chat-root .tle-lead input, #tle-chat-root .tle-lead select, #tle-chat-root .tle-endform input {
	width: 100%; height: 40px; margin: 0;
	padding: 0 11px;
	border: 1px solid #CFCAC0; border-radius: 8px;
	background: var(--tle-white); color: var(--tle-ink);
	font: 15px "DM Sans", system-ui, sans-serif;
	box-shadow: none;
}
#tle-chat-root .tle-lead input:focus, #tle-chat-root .tle-lead select:focus, #tle-chat-root .tle-endform input:focus { outline: none; border-color: var(--tle-orange); box-shadow: 0 0 0 3px rgba(255, 107, 26, .22); }
#tle-chat-root .tle-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }
#tle-chat-root .tle-err { margin: 0; color: #B3261E; font-size: 13px; font-weight: 600; }
#tle-chat-root .tle-fine { margin: 0; font-size: 12px; color: var(--tle-muted); text-align: center; }
#tle-chat-root .tle-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#tle-chat-root .tle-ended { text-align: center; }
#tle-chat-root .tle-ended strong { color: var(--tle-ink); font: 600 16px Poppins, "DM Sans", sans-serif; }
#tle-chat-root .tle-ended p { margin: 0 0 4px; }

/* ---------- composer ---------- */
#tle-chat-root .tle-composer {
	display: flex; align-items: flex-end; gap: 8px;
	margin: 0; padding: 10px 12px;
	background: var(--tle-white); border-top: 1px solid var(--tle-rule);
}
#tle-chat-root .tle-composer.is-ended { opacity: .55; }
#tle-chat-root .tle-input {
	flex: 1; min-height: 44px; max-height: 120px; margin: 0;
	padding: 11px 14px; resize: none;
	border: 1px solid #CFCAC0; border-radius: 12px;
	background: var(--tle-paper); color: var(--tle-ink);
	font: 15px/1.4 "DM Sans", system-ui, sans-serif;
	box-shadow: none;
}
#tle-chat-root .tle-input:focus { outline: none; border-color: var(--tle-orange); background: var(--tle-white); box-shadow: 0 0 0 3px rgba(255, 107, 26, .22); }
#tle-chat-root .tle-send {
	flex: none; display: grid; place-items: center; padding: 0;
	width: 44px; height: 44px; border: 0; border-radius: 12px;
	background: var(--tle-orange); color: var(--tle-ink);
	transition: background-color .2s, transform .15s;
}
#tle-chat-root .tle-send:focus { background: var(--tle-orange); color: var(--tle-ink); }
#tle-chat-root .tle-send:hover { background: var(--tle-orange-hover); color: var(--tle-ink); }
#tle-chat-root .tle-send:disabled { opacity: .5; cursor: wait; }
#tle-chat-root .tle-send svg { width: 20px; height: 20px; }
#tle-chat-root .tle-foot {
	padding: 6px 12px 9px; background: var(--tle-white);
	font-size: 11.5px; color: var(--tle-muted); text-align: center;
}
#tle-chat-root .tle-foot a { color: var(--tle-muted); text-decoration: underline; }

/* ---------- end-chat confirm ---------- */
#tle-chat-root .tle-overlay {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end;
	background: rgba(22, 24, 27, .55);
	animation: tle-fade .2s ease;
}
@keyframes tle-fade { from  { opacity: 0; } }
#tle-chat-root .tle-confirm {
	width: 100%;
	padding: 20px 18px 18px;
	background: var(--tle-white);
	border-radius: 16px 16px 0 0;
	display: flex; flex-direction: column; gap: 9px;
	animation: tle-up .28s var(--tle-ease);
}
@keyframes tle-up { from  { transform: translateY(24px); opacity: 0; } }
#tle-chat-root .tle-confirm strong { font: 600 18px Poppins, "DM Sans", sans-serif; color: var(--tle-ink); }
#tle-chat-root .tle-confirm p { margin: 0 0 4px; }
#tle-chat-root .tle-endform { display: grid; gap: 8px; margin: 0; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
	#tle-chat-root { --tle-gap: 14px; bottom: calc(var(--tle-gap) + var(--tle-mobile-offset, 0px)); }
	#tle-chat-root .tle-launcher { height: 54px; width: 54px; padding: 0; justify-content: center; }
	#tle-chat-root .tle-launcher__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	#tle-chat-root .tle-launcher__icon { background: transparent; }
	#tle-chat-root .tle-launcher__dot { top: 4px; left: auto; right: 4px; }
	#tle-chat-root.is-open { inset: 0; right: 0; bottom: 0; }
	#tle-chat-root .tle-panel {
		position: fixed; inset: 0;
		width: 100%; height: 100%; height: 100dvh;
		border-radius: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	#tle-chat-root .tle-input { font-size: 16px; } /* prevents iOS zoom */
	#tle-chat-root .tle-lead input, #tle-chat-root .tle-lead select, #tle-chat-root .tle-endform input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	#tle-chat-root *, #tle-chat-root *::before, #tle-chat-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Calendly popup sits above the chat */
.calendly-overlay { z-index: 100000 !important; }
