/* TDG Guided WhatsApp Chat – widget styles */

.tdgwa {
	--tdgwa-grad: linear-gradient(135deg, #25D366, #128C7E);
	--tdgwa-c1: #25D366;
	--tdgwa-c2: #128C7E;
	--tdgwa-on: #ffffff;
	--tdgwa-radius: 20px;
	--tdgwa-width: 380px;
	--tdgwa-x: 24px;
	--tdgwa-y: 24px;
	--tdgwa-mx: 16px;
	--tdgwa-my: 16px;
	--tdgwa-z: 99990;
	--tdgwa-pos: fixed;
	--tdgwa-l: 60px; /* launcher height */
	--tdgwa-bg: #ffffff;
	--tdgwa-surface: #f4f6f8;
	--tdgwa-bubble: #ffffff;
	--tdgwa-text: #1d2327;
	--tdgwa-muted: #6b7280;
	--tdgwa-line: rgba(15, 23, 42, 0.09);
	--tdgwa-glow: color-mix(in srgb, var(--tdgwa-c2) 40%, transparent);
	--tdgwa-tint: color-mix(in srgb, var(--tdgwa-c1) 12%, transparent);
	--tdgwa-shadow: 0 18px 50px -12px rgba(15, 23, 42, 0.35), 0 4px 14px rgba(15, 23, 42, 0.08);

	font-family: var(--tdgwa-font, inherit);
	font-size: 15px;
	line-height: 1.45;
	color: var(--tdgwa-text);
	-webkit-font-smoothing: antialiased;
}
.tdgwa *, .tdgwa *::before, .tdgwa *::after { box-sizing: border-box; }
.tdgwa svg { display: block; width: 100%; height: 100%; }

.tdgwa--theme-dark {
	--tdgwa-bg: #15181d;
	--tdgwa-surface: #0e1013;
	--tdgwa-bubble: #20242b;
	--tdgwa-text: #eef0f3;
	--tdgwa-muted: #9aa3ae;
	--tdgwa-line: rgba(255, 255, 255, 0.09);
	--tdgwa-tint: color-mix(in srgb, var(--tdgwa-c1) 22%, transparent);
}
.tdgwa--shadow-none { --tdgwa-shadow: 0 0 0 1px var(--tdgwa-line); --tdgwa-glow: transparent; }
.tdgwa--shadow-strong { --tdgwa-shadow: 0 28px 70px -10px rgba(15, 23, 42, 0.55), 0 8px 24px rgba(15, 23, 42, 0.18); }
.tdgwa--size-sm { --tdgwa-l: 50px; }
.tdgwa--size-lg { --tdgwa-l: 70px; }
.tdgwa--preview { --tdgwa-pos: absolute; }

/* Reset theme/builder button styles inside the widget */
.tdgwa button, .tdgwa input {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	margin: 0;
	min-height: 0;
	min-width: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.tdgwa button { cursor: pointer; background: none; border: 0; padding: 0; }

/* ---------------------------------------------------------------- Launcher */

.tdgwa-launcher {
	position: var(--tdgwa-pos);
	bottom: var(--tdgwa-y);
	z-index: var(--tdgwa-z);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--tdgwa-l);
	min-width: var(--tdgwa-l);
	padding: 0 calc(var(--tdgwa-l) * 0.22) !important;
	border-radius: 999px !important;
	background: var(--tdgwa-grad) !important;
	color: var(--tdgwa-on) !important;
	box-shadow: 0 10px 28px -6px var(--tdgwa-glow), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
	transition: transform 0.25s cubic-bezier(.2, .9, .3, 1.3), box-shadow 0.25s ease, width 0.25s ease;
	isolation: isolate;
}
.tdgwa--right .tdgwa-launcher { right: var(--tdgwa-x); }
.tdgwa--left .tdgwa-launcher { left: var(--tdgwa-x); }
.tdgwa-launcher:hover { transform: translateY(-2px) scale(1.03); }
.tdgwa-launcher:focus-visible { outline: 3px solid var(--tdgwa-c1); outline-offset: 3px; }

.tdgwa-launcher__icon,
.tdgwa-launcher__close {
	width: calc(var(--tdgwa-l) * 0.5);
	height: calc(var(--tdgwa-l) * 0.5);
	flex: none;
	transition: transform 0.3s ease, opacity 0.2s ease;
}
.tdgwa-launcher__close { position: absolute; left: 50%; top: 50%; width: calc(var(--tdgwa-l) * 0.4); height: calc(var(--tdgwa-l) * 0.4); margin: calc(var(--tdgwa-l) * -0.2) 0 0 calc(var(--tdgwa-l) * -0.2); opacity: 0; transform: rotate(-90deg) scale(.6); }
.tdgwa-launcher__text { font-weight: 700; font-size: calc(var(--tdgwa-l) * 0.255); white-space: nowrap; padding-right: 6px; line-height: 1.15; }

/* circle + square: icon only */
.tdgwa--launcher-circle .tdgwa-launcher,
.tdgwa--launcher-square .tdgwa-launcher { width: var(--tdgwa-l); padding: 0 !important; justify-content: center; }
.tdgwa--launcher-square .tdgwa-launcher { border-radius: calc(var(--tdgwa-l) * 0.3) !important; }

/* card style: white card, gradient icon tile, two lines */
.tdgwa--launcher-bar .tdgwa-launcher {
	background: var(--tdgwa-bg) !important;
	color: var(--tdgwa-text) !important;
	border-radius: calc(var(--tdgwa-l) * 0.32) !important;
	padding: 0 18px 0 7px !important;
	height: calc(var(--tdgwa-l) + 6px);
	box-shadow: var(--tdgwa-shadow) !important;
	border: 1px solid var(--tdgwa-line);
}
.tdgwa--launcher-bar .tdgwa-launcher__icon,
.tdgwa--launcher-bar .tdgwa-launcher__avatar {
	width: calc(var(--tdgwa-l) - 8px);
	height: calc(var(--tdgwa-l) - 8px);
	padding: calc(var(--tdgwa-l) * 0.15);
	border-radius: calc(var(--tdgwa-l) * 0.25);
	background: var(--tdgwa-grad);
	color: var(--tdgwa-on);
}
.tdgwa--launcher-bar .tdgwa-launcher__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; font-size: calc(var(--tdgwa-l) * 0.25); }
.tdgwa--launcher-bar .tdgwa-launcher__text small { font-weight: 500; font-size: 0.78em; color: var(--tdgwa-muted); margin-top: 2px; }
.tdgwa--launcher-bar .tdgwa-launcher__close { color: var(--tdgwa-on); }

.tdgwa-launcher__avatar { width: calc(var(--tdgwa-l) - 10px); height: calc(var(--tdgwa-l) - 10px); margin-left: calc(var(--tdgwa-l) * -0.14); border: 2px solid rgba(255, 255, 255, 0.7); }
.tdgwa--launcher-circle .tdgwa-launcher__avatar,
.tdgwa--launcher-square .tdgwa-launcher__avatar { margin: 0; }
.tdgwa--launcher-bar .tdgwa-launcher__avatar { margin: 0; border: 0; padding: 0; }

/* open state: launcher shrinks to a close button */
.tdgwa.is-open .tdgwa-launcher { width: var(--tdgwa-l); height: var(--tdgwa-l); padding: 0 !important; justify-content: center; border-radius: 999px !important; background: var(--tdgwa-grad) !important; }
.tdgwa.is-open .tdgwa-launcher__text,
.tdgwa.is-open .tdgwa-badge { display: none; }
.tdgwa.is-open .tdgwa-launcher__icon,
.tdgwa.is-open .tdgwa-launcher__avatar { opacity: 0; transform: rotate(90deg) scale(.5); position: absolute; }
.tdgwa.is-open .tdgwa-launcher__close { opacity: 1; transform: none; color: var(--tdgwa-on); }

/* pulse ring */
.tdgwa--pulse:not(.is-open) .tdgwa-launcher::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--tdgwa-grad);
	z-index: -1;
	animation: tdgwa-pulse 2.6s ease-out infinite;
}
.tdgwa--launcher-bar.tdgwa--pulse .tdgwa-launcher::before { display: none; }
@keyframes tdgwa-pulse {
	0% { transform: scale(1); opacity: .55; }
	70%, 100% { transform: scale(1.35); opacity: 0; }
}

/* badge */
.tdgwa-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 21px;
	height: 21px;
	padding: 0 6px;
	border-radius: 999px;
	background: #ff3b30;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 21px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
	animation: tdgwa-bounce 0.6s 1s both;
}
@keyframes tdgwa-bounce {
	0% { transform: scale(0); }
	60% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* ---------------------------------------------------------------- Teaser */

.tdgwa-teaser {
	position: var(--tdgwa-pos);
	bottom: calc(var(--tdgwa-y) + var(--tdgwa-l) + 14px);
	z-index: var(--tdgwa-z);
	max-width: min(290px, calc(100vw - 2 * var(--tdgwa-x)));
	opacity: 0;
	transform: translateY(10px) scale(.96);
	pointer-events: none;
	transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3);
}
.tdgwa--right .tdgwa-teaser { right: var(--tdgwa-x); transform-origin: bottom right; }
.tdgwa--left .tdgwa-teaser { left: var(--tdgwa-x); transform-origin: bottom left; }
.tdgwa-teaser.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.tdgwa.is-open .tdgwa-teaser { display: none; }
.tdgwa-teaser__body {
	display: flex !important;
	align-items: center;
	gap: 10px;
	text-align: left;
	padding: 12px 34px 12px 12px !important;
	border-radius: 16px !important;
	background: var(--tdgwa-bg) !important;
	color: var(--tdgwa-text) !important;
	box-shadow: var(--tdgwa-shadow) !important;
	border: 1px solid var(--tdgwa-line) !important;
	font-size: 14px;
	font-weight: 500;
}
.tdgwa-teaser__close {
	position: absolute !important;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	padding: 5px !important;
	border-radius: 50% !important;
	color: var(--tdgwa-muted) !important;
}
.tdgwa-teaser__close:hover { background: var(--tdgwa-surface) !important; }

/* ---------------------------------------------------------------- Avatar */

.tdgwa-avatar {
	position: relative;
	display: inline-block;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: visible;
}
.tdgwa-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.tdgwa-avatar--icon { padding: 9px; background: rgba(255, 255, 255, .22); color: var(--tdgwa-on); border-radius: 50%; }
.tdgwa-avatar--sm { width: 36px; height: 36px; }
.tdgwa-teaser .tdgwa-avatar--icon { background: var(--tdgwa-grad); padding: 7px; }
.tdgwa-online {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #31d158;
	box-shadow: 0 0 0 2px var(--tdgwa-c2);
}

/* ---------------------------------------------------------------- Panel */

.tdgwa-panel {
	position: var(--tdgwa-pos);
	bottom: calc(var(--tdgwa-y) + var(--tdgwa-l) + 14px);
	z-index: var(--tdgwa-z);
	width: var(--tdgwa-width);
	max-width: calc(100vw - 2 * var(--tdgwa-x));
	height: min(600px, calc(100vh - var(--tdgwa-y) - var(--tdgwa-l) - 40px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--tdgwa-radius);
	background: var(--tdgwa-surface);
	box-shadow: var(--tdgwa-shadow);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.1), visibility 0s .35s;
}
.tdgwa--right .tdgwa-panel { right: var(--tdgwa-x); transform-origin: bottom right; }
.tdgwa--left .tdgwa-panel { left: var(--tdgwa-x); transform-origin: bottom left; }
.tdgwa--anim-slide .tdgwa-panel { transform: translateY(24px); }
.tdgwa--anim-pop .tdgwa-panel { transform: scale(.85); }
.tdgwa.is-open .tdgwa-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }

.tdgwa-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 16px 18px 18px;
	background: var(--tdgwa-grad);
	color: var(--tdgwa-on);
	position: relative;
	flex: none;
}
.tdgwa-header::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .22), transparent 55%);
	pointer-events: none;
}
.tdgwa-header__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tdgwa-header__title { font-size: 16.5px; font-weight: 700; line-height: 1.2; color: var(--tdgwa-on); }
.tdgwa-header__sub { font-size: 12.5px; opacity: .88; margin-top: 2px; }
.tdgwa-close {
	width: 34px;
	height: 34px;
	flex: none;
	padding: 7px !important;
	border-radius: 50% !important;
	color: var(--tdgwa-on) !important;
	background: rgba(255, 255, 255, .16) !important;
	position: relative;
	z-index: 1;
	transition: background .2s ease;
}
.tdgwa-close:hover { background: rgba(255, 255, 255, .28) !important; }

.tdgwa-msgs {
	flex: 1;
	overflow-y: auto;
	padding: 18px 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}
.tdgwa-row { display: flex; animation: tdgwa-in .3s ease both; }
.tdgwa-row--user { justify-content: flex-end; }
.tdgwa-row--choices, .tdgwa-row--card { padding: 2px 0 6px; }
.tdgwa-row > .tdgwa-chips, .tdgwa-row > .tdgwa-summary { flex: 1 1 100%; min-width: 0; }
@keyframes tdgwa-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tdgwa-bubble {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 18px 18px 18px 6px;
	background: var(--tdgwa-bubble);
	color: var(--tdgwa-text);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
	white-space: pre-line;
	word-wrap: break-word;
}
.tdgwa-bubble--user {
	border-radius: 18px 18px 6px 18px;
	background: var(--tdgwa-grad);
	color: var(--tdgwa-on);
	font-weight: 500;
}
.tdgwa-bubble--wa {
	max-width: 92%;
	background: #d9fdd3;
	color: #111b21;
	font-size: 13.5px;
	border: 1px dashed rgba(0, 0, 0, .15);
}

.tdgwa-typing { display: inline-flex; gap: 4px; padding: 13px 15px; border-radius: 18px 18px 18px 6px; background: var(--tdgwa-bubble); }
.tdgwa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--tdgwa-muted); opacity: .5; animation: tdgwa-dot 1.1s infinite ease-in-out; }
.tdgwa-typing i:nth-child(2) { animation-delay: .15s; }
.tdgwa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdgwa-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

/* chips */
.tdgwa-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tdgwa .tdgwa-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px !important;
	border-radius: 999px !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.tdgwa-chip__icon { font-size: 16px; line-height: 1; }
.tdgwa--chips-outline .tdgwa-chip { background: var(--tdgwa-bg) !important; border: 1.5px solid var(--tdgwa-c1) !important; color: var(--tdgwa-text) !important; }
.tdgwa--chips-soft .tdgwa-chip { background: var(--tdgwa-tint) !important; border: 1.5px solid transparent !important; color: var(--tdgwa-text) !important; }
.tdgwa--chips-filled .tdgwa-chip { background: var(--tdgwa-grad) !important; border: 0 !important; color: var(--tdgwa-on) !important; padding: 9.5px 15px !important; }
.tdgwa .tdgwa-chip:hover:not(:disabled) { transform: translateY(-1px); }
.tdgwa--chips-outline .tdgwa-chip:hover:not(:disabled) { background: var(--tdgwa-tint) !important; }
.tdgwa-chips.is-done .tdgwa-chip { opacity: .4; cursor: default; }
.tdgwa-chips.is-done .tdgwa-chip.is-picked { opacity: 1; }
.tdgwa-chips.is-done { display: none; }

/* composer */
.tdgwa-composer {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--tdgwa-bg);
	border-top: 1px solid var(--tdgwa-line);
	flex: none;
	margin: 0;
}
.tdgwa-composer.is-active { display: flex; }
.tdgwa .tdgwa-input {
	flex: 1;
	height: 44px;
	padding: 0 16px !important;
	border-radius: 999px !important;
	border: 1.5px solid var(--tdgwa-line) !important;
	background: var(--tdgwa-surface) !important;
	color: var(--tdgwa-text) !important;
	font-size: 16px; /* 16px stops iOS zooming in */
	outline: none;
	transition: border-color .2s ease;
}
.tdgwa .tdgwa-input:focus { border-color: var(--tdgwa-c1) !important; }
.tdgwa .tdgwa-input[aria-invalid="true"] { border-color: #e5484d !important; }
.tdgwa .tdgwa-input[aria-invalid="true"]::placeholder { color: #e5484d; }
.tdgwa-send {
	width: 44px;
	height: 44px;
	flex: none;
	padding: 11px 10px 11px 12px !important;
	border-radius: 50% !important;
	background: var(--tdgwa-grad) !important;
	color: var(--tdgwa-on) !important;
}
.tdgwa-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.tdgwa-composer.is-shake { animation: tdgwa-shake .35s; }
@keyframes tdgwa-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* summary card */
.tdgwa-summary {
	width: 100%;
	padding: 14px;
	border-radius: 16px;
	background: var(--tdgwa-bg);
	border: 1px solid var(--tdgwa-line);
	box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}
.tdgwa-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 14px; }
.tdgwa-summary dt { color: var(--tdgwa-muted); font-weight: 500; margin: 0; }
.tdgwa-summary dd { margin: 0; font-weight: 600; color: var(--tdgwa-text); word-break: break-word; }
.tdgwa .tdgwa-go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 50px;
	border-radius: 14px !important;
	background: var(--tdgwa-grad) !important;
	color: var(--tdgwa-on) !important;
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 10px 22px -8px var(--tdgwa-glow) !important;
	transition: transform .15s ease, filter .2s ease;
}
.tdgwa .tdgwa-go svg { width: 22px; height: 22px; }
.tdgwa .tdgwa-go:hover { transform: translateY(-1px); filter: brightness(1.05); }
.tdgwa .tdgwa-go { text-decoration: none !important; box-sizing: border-box; }
.tdgwa .tdgwa-go.is-sent { opacity: .75; }
.tdgwa .tdgwa-restart { display: block; margin: 10px auto 0; font-size: 13px; color: var(--tdgwa-muted) !important; text-decoration: underline; }
.tdgwa .tdgwa-privacy { font-size: 12.5px; color: var(--tdgwa-muted); text-decoration: underline; padding: 0 4px; margin-top: -2px; }
.tdgwa .tdgwa-fallback { font-size: 13px; color: var(--tdgwa-c2); font-weight: 600; text-decoration: underline; padding: 2px 4px; }

/* footer */
.tdgwa-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px 10px;
	font-size: 11.5px;
	color: var(--tdgwa-muted);
	background: var(--tdgwa-bg);
	flex: none;
}
.tdgwa-composer.is-active + .tdgwa-foot { padding-top: 0; }
.tdgwa-foot__icon { width: 14px; height: 14px; color: #25D366; flex: none; }

/* ---------------------------------------------------------------- Compact (phones) */

.tdgwa--compact .tdgwa-launcher { bottom: var(--tdgwa-my); }
.tdgwa--compact.tdgwa--right .tdgwa-launcher { right: var(--tdgwa-mx); }
.tdgwa--compact.tdgwa--left .tdgwa-launcher { left: var(--tdgwa-mx); }
.tdgwa--compact .tdgwa-teaser { bottom: calc(var(--tdgwa-my) + var(--tdgwa-l) + 12px); max-width: calc(100% - 2 * var(--tdgwa-mx)); }
.tdgwa--compact.tdgwa--right .tdgwa-teaser { right: var(--tdgwa-mx); }
.tdgwa--compact.tdgwa--left .tdgwa-teaser { left: var(--tdgwa-mx); }
.tdgwa--compact .tdgwa-panel {
	left: var(--tdgwa-mx) !important;
	right: var(--tdgwa-mx) !important;
	width: auto;
	max-width: none;
	bottom: calc(var(--tdgwa-my) + var(--tdgwa-l) + 10px);
	height: min(560px, calc(100vh - var(--tdgwa-my) - var(--tdgwa-l) - 30px));
	height: min(560px, calc(100dvh - var(--tdgwa-my) - var(--tdgwa-l) - 30px));
}
.tdgwa--compact.tdgwa--launcher-bar .tdgwa-launcher__text small { display: none; }

/* Admin live preview: size against the preview box, not the browser window */
.tdgwa--preview .tdgwa-panel { height: min(600px, calc(100% - var(--tdgwa-y) - var(--tdgwa-l) - 40px)); }
.tdgwa--preview.tdgwa--compact .tdgwa-panel { height: min(560px, calc(100% - var(--tdgwa-my) - var(--tdgwa-l) - 30px)); }
.tdgwa--preview .tdgwa-teaser { max-width: min(290px, calc(100% - 2 * var(--tdgwa-x))); }

@media (prefers-reduced-motion: reduce) {
	.tdgwa *, .tdgwa *::before { animation: none !important; transition: none !important; }
}
@media print { .tdgwa { display: none !important; } }