/**
 * True Development AI Assistant — front-end chat widget.
 */

.tda-root {
	--tda-surface: #ffffff;
	--tda-text: #111827;
	--tda-muted: #6b7280;
	--tda-line: #e5e7eb;
	--tda-bot-bg: #f3f4f6;
	--tda-radius: 16px;

	position: fixed;
	bottom: 24px;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.tda-root.tda-right { right: 24px; }
.tda-root.tda-left  { left: 24px; }

.tda-root *,
.tda-root *::before,
.tda-root *::after {
	box-sizing: border-box;
}

/*
 * Defensive reset, wrapped in :where() so it carries ZERO specificity — every
 * component rule below beats it automatically, while theme rules that reach a
 * bare `button` or `img` do not.
 *
 * The widget normally lives in a Shadow DOM where page CSS cannot reach it at
 * all; this covers the fallback path on browsers without attachShadow.
 */
:where(.tda-root) :where(button, input, textarea, img, svg, p, span, div, ol, ul, li) {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	max-width: none;
	max-height: none;
	box-shadow: none;
	text-shadow: none;
	letter-spacing: normal;
	text-transform: none;
	font-family: inherit;
	font-weight: 400;
	font-style: normal;
	transition: none;
	animation: none;
}

/* min-* only on replaced/form elements — never on div, or flex items lose their
   automatic minimum size and messages collapse into each other. */
:where(.tda-root) :where(button, input, textarea, img, svg) {
	min-width: 0;
	min-height: 0;
}

:where(.tda-root) :where(button, input, textarea) {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	appearance: none;
	-webkit-appearance: none;
	overflow: visible;
	white-space: normal;
	vertical-align: baseline;
	text-indent: 0;
	box-sizing: border-box;
}

:where(.tda-root) :where(img, svg) {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	vertical-align: middle;
}

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

.tda-launcher {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tda-size, 96px);
	height: var(--tda-size, 96px);
	border: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, #1c2c4d 0%, #0b1220 72%);
	cursor: pointer;
	box-shadow:
		0 10px 34px rgba(0, 0, 0, 0.38),
		0 0 0 1px rgba(255, 255, 255, 0.1) inset,
		0 0 30px rgba(37, 99, 235, 0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

.tda-launcher:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow:
		0 14px 40px rgba(0, 0, 0, 0.44),
		0 0 0 1px rgba(255, 255, 255, 0.16) inset,
		0 0 44px rgba(37, 99, 235, 0.8);
}

.tda-launcher:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 3px;
}

.tda-logo {
	width: 82%;
	height: 82%;
	object-fit: contain;
	pointer-events: none;
	display: block;
	filter: drop-shadow( 0 2px 4px rgba(0, 0, 0, 0.45) );
}

/* Close icon replaces the logo while the panel is open. */
.tda-launcher .tda-icon-close {
	display: none;
	width: 30%;
	height: 30%;
	fill: #fff;
	pointer-events: none;
}

.tda-root.tda-open .tda-launcher .tda-logo { display: none; }
.tda-root.tda-open .tda-launcher .tda-icon-close { display: block; }

/* Pulsing ring behind the launcher. */
.tda-launcher::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(59, 130, 246, 0.6);
	opacity: 0;
	pointer-events: none;
}

.tda-root.tda-shaking .tda-launcher::after {
	animation: tda-ring 1.15s ease-out 2;
}

@keyframes tda-ring {
	0%   { transform: scale(0.9); opacity: 0.85; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* Attention shake. */
.tda-root.tda-shaking .tda-launcher {
	animation: tda-shake 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes tda-shake {
	0%, 100%          { transform: rotate(0deg) scale(1); }
	8%                { transform: rotate(-13deg) scale(1.08); }
	18%               { transform: rotate(11deg) scale(1.08); }
	28%               { transform: rotate(-9deg) scale(1.06); }
	38%               { transform: rotate(7deg) scale(1.05); }
	48%               { transform: rotate(-5deg) scale(1.03); }
	58%               { transform: rotate(3deg) scale(1.02); }
	68%               { transform: rotate(-1deg) scale(1.01); }
}

/* Positioned as a percentage so it stays on the rim at any icon size. */
.tda-badge {
	position: absolute;
	top: 9%;
	right: 9%;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #ef4444;
	border: 2px solid #0b1220;
	box-shadow: 0 0 10px rgba(239, 68, 68, 0.9);
}

.tda-root.tda-open .tda-badge,
.tda-root.tda-seen .tda-badge { display: none; }

/* ---------- Teaser pop-up ---------- */

.tda-teaser {
	position: absolute;
	bottom: 12px;
	width: 262px;
	background: #fff;
	color: var(--tda-text);
	border-radius: 14px;
	padding: 14px 34px 14px 16px;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.24);
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transition: opacity 0.28s ease, transform 0.28s ease;
	pointer-events: none;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.tda-root.tda-right .tda-teaser { right: calc(var(--tda-size, 96px) + 14px); transform-origin: bottom right; }
.tda-root.tda-left  .tda-teaser { left:  calc(var(--tda-size, 96px) + 14px); transform-origin: bottom left; }

.tda-root.tda-teasing .tda-teaser {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Little tail pointing at the launcher. */
.tda-teaser::after {
	content: "";
	position: absolute;
	bottom: 20px;
	width: 12px;
	height: 12px;
	background: #fff;
	transform: rotate(45deg);
}

.tda-root.tda-right .tda-teaser::after { right: -6px; border-right: 1px solid rgba(0,0,0,0.06); border-top: 1px solid rgba(0,0,0,0.06); }
.tda-root.tda-left  .tda-teaser::after { left: -6px;  border-left: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); }

.tda-teaser-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	color: var(--tda-muted);
	cursor: pointer;
	border-radius: 50%;
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.tda-teaser-close:hover { background: #f3f4f6; color: var(--tda-text); }
.tda-teaser-close svg { width: 13px; height: 13px; fill: currentColor; }

@media (max-width: 480px) {
	.tda-teaser { width: min(238px, calc(100vw - 118px)); font-size: 13px; }
}

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

.tda-panel {
	position: absolute;
	bottom: calc(var(--tda-size, 96px) + 14px);
	width: 374px;
	max-width: calc(100vw - 32px);
	/* Never grow past the space actually left above the launcher. */
	height: min(548px, calc(100vh - var(--tda-size, 96px) - 56px));
	background: var(--tda-surface);
	border-radius: var(--tda-radius);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.tda-root.tda-right .tda-panel { right: 0; }
.tda-root.tda-left  .tda-panel { left: 0; }

.tda-root.tda-open .tda-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Author-origin display:flex above would otherwise beat the UA [hidden] rule,
   leaving the closed panel focusable and, on mobile, covering the viewport. */
.tda-panel[hidden] { display: none; }

/* ---------- Header ---------- */

.tda-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--tda-brand, #1a56db);
	color: #fff;
	flex-shrink: 0;
}

.tda-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/* Dark disc so the metallic logo reads, same as the launcher. */
	background: radial-gradient(circle at 50% 30%, #1c2c4d 0%, #0b1220 74%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tda-avatar svg {
	width: 20px;
	height: 20px;
	fill: #fff;
}

.tda-header-text { flex: 1; min-width: 0; }

.tda-title {
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	color: #fff;
}

.tda-status {
	font-size: 12px;
	opacity: 0.85;
	display: flex;
	align-items: center;
	gap: 5px;
}

.tda-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	display: inline-block;
}

.tda-header-btn {
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 6px;
	border-radius: 6px;
	opacity: 0.85;
	line-height: 0;
}

.tda-header-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }
.tda-header-btn svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- Messages ---------- */

.tda-messages {
	flex: 1;
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fafafa;
	overscroll-behavior: contain;
}

.tda-msg {
	/* Never let a bubble be squeezed shorter than its own text. */
	flex: 0 0 auto;
	max-width: 85%;
	padding: 11px 14px;
	border-radius: 14px;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	animation: tda-in 0.22s ease;
}

@keyframes tda-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.tda-msg,
	.tda-panel,
	.tda-teaser,
	.tda-launcher,
	.tda-root.tda-shaking .tda-launcher,
	.tda-root.tda-shaking .tda-launcher::after {
		animation: none;
		transition: none;
	}
}

/* ---------- Progress bar ---------- */

.tda-progress {
	padding: 10px 18px 11px;
	background: #fff;
	border-bottom: 1px solid var(--tda-line);
	flex-shrink: 0;
	display: none;
}

.tda-progress.is-on { display: block; }

.tda-progress-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 12px;
	color: var(--tda-muted);
	margin-bottom: 6px;
}

.tda-progress-label {
	font-weight: 600;
	color: var(--tda-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tda-progress-count { white-space: nowrap; font-variant-numeric: tabular-nums; }

.tda-progress-track {
	height: 6px;
	background: var(--tda-line);
	border-radius: 999px;
	overflow: hidden;
}

.tda-progress-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tda-brand, #1a56db), #60a5fa);
	transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tda-progress.is-done .tda-progress-fill {
	background: linear-gradient(90deg, #059669, #34d399);
}

.tda-msg-bot {
	align-self: flex-start;
	background: var(--tda-bot-bg);
	color: var(--tda-text);
	border-bottom-left-radius: 4px;
}

.tda-msg-user {
	align-self: flex-end;
	background: var(--tda-brand, #1a56db);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.tda-msg-error {
	align-self: flex-start;
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
	border-bottom-left-radius: 4px;
	font-size: 14px;
}

.tda-msg-system {
	align-self: center;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
	font-size: 13px;
	text-align: center;
	max-width: 95%;
}

.tda-msg a { color: inherit; text-decoration: underline; }

/* ---------- Markdown inside bot replies ---------- */

.tda-msg .tda-md-p { margin: 0 0 8px; }
.tda-msg .tda-md-p:last-child { margin-bottom: 0; }

.tda-msg .tda-md-list {
	margin: 0 0 8px;
	padding-left: 20px;
	list-style-position: outside;
}

.tda-msg ul.tda-md-list { list-style-type: disc; }
.tda-msg ol.tda-md-list { list-style-type: decimal; }
.tda-msg .tda-md-list:last-child { margin-bottom: 0; }
.tda-msg .tda-md-list li { margin: 0 0 3px; }

.tda-msg strong { font-weight: 700; }
.tda-msg em { font-style: italic; }

.tda-msg code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: rgba(0, 0, 0, 0.07);
	padding: 1px 5px;
	border-radius: 4px;
}

.tda-msg-user code { background: rgba(255, 255, 255, 0.22); }

/* Model output is plain text everywhere else; markdown builds real nodes so
   pre-wrap would double up the spacing. */
.tda-msg-bot { white-space: normal; }

.tda-msg-file { opacity: 0.85; font-size: 13px; }

/* ---------- Design preview ---------- */

.tda-terms {
	flex: 0 0 auto;
	align-self: stretch;
	background: #fff;
	border: 1px solid var(--tda-brand, #1a56db);
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.5;
}

.tda-terms-title { font-weight: 700; margin: 0 0 6px; color: var(--tda-text); }
.tda-terms-intro { margin: 0 0 10px; color: var(--tda-muted); }

.tda-terms-full { margin-bottom: 10px; }
.tda-terms-full summary {
	cursor: pointer;
	color: var(--tda-brand, #1a56db);
	font-weight: 600;
	font-size: 12px;
}

.tda-terms-body {
	white-space: pre-wrap;
	max-height: 190px;
	overflow: auto;
	margin-top: 8px;
	padding: 10px;
	background: #f8fafc;
	border-radius: 8px;
	font-size: 12px;
	color: var(--tda-text);
	line-height: 1.55;
}

.tda-terms-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 12px;
	cursor: pointer;
	color: var(--tda-text);
}

.tda-terms-check input {
	width: 16px;
	height: 16px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: var(--tda-brand, #1a56db);
	appearance: auto;
	-webkit-appearance: checkbox;
}

.tda-terms-actions { display: flex; gap: 8px; }

.tda-preview-card {
	flex: 0 0 auto;
	align-self: stretch;
	background: linear-gradient(135deg, #0b1220, #16233d);
	color: #fff;
	border-radius: 14px;
	padding: 16px;
	text-align: center;
}

.tda-preview-title { margin: 0 0 10px; font-weight: 700; font-size: 14px; }

.tda-preview-open {
	display: inline-block;
	background: var(--tda-brand, #1a56db);
	color: #fff;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 9px;
	font-weight: 600;
	font-size: 14px;
}

.tda-preview-open:hover { background: var(--tda-brand-dark, #14448f); }

.tda-preview-note {
	margin: 10px 0 0;
	font-size: 11px;
	color: #9fb2d0;
}

/* ---------- Voice input ---------- */

.tda-voice {
	width: 38px;
	height: 42px;
	flex-shrink: 0;
	border: 0;
	background: none;
	color: var(--tda-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 0;
}

.tda-voice:hover { color: var(--tda-brand, #1a56db); background: #f3f4f6; }
.tda-voice svg { width: 19px; height: 19px; fill: currentColor; }

.tda-voice.is-live {
	color: #fff;
	background: #dc2626;
	animation: tda-pulse 1.4s ease-in-out infinite;
}

@keyframes tda-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
	60%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.tda-voice.is-live { animation: none; }
}

/* ---------- Pipeline stage pills (admin list) ---------- */

/* ---------- Attachments ---------- */

.tda-attach {
	width: 38px;
	height: 42px;
	flex-shrink: 0;
	border: 0;
	background: none;
	color: var(--tda-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 0;
}

.tda-attach:hover { color: var(--tda-brand, #1a56db); background: #f3f4f6; }
.tda-attach svg { width: 19px; height: 19px; fill: currentColor; }

.tda-files {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 12px;
	background: #fff;
	flex-shrink: 0;
}

.tda-files:empty { display: none; }

.tda-file {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	color: #3730a3;
	border-radius: 999px;
	padding: 4px 6px 4px 11px;
	font-size: 12px;
}

.tda-file.is-loading { opacity: 0.7; padding-right: 11px; }

.tda-file-name {
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tda-file-x {
	width: 18px;
	height: 18px;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
}

.tda-file-x:hover { background: rgba(55, 48, 163, 0.15); }
.tda-file-x svg { width: 10px; height: 10px; fill: currentColor; }

/* ---------- Typing indicator ---------- */

.tda-typing {
	flex: 0 0 auto;
	align-self: flex-start;
	background: var(--tda-bot-bg);
	padding: 14px 16px;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	display: flex;
	gap: 4px;
}

.tda-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #9ca3af;
	animation: tda-bounce 1.3s infinite ease-in-out;
}

.tda-typing span:nth-child(2) { animation-delay: 0.18s; }
.tda-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes tda-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30%           { transform: translateY(-5px); opacity: 1; }
}

/* ---------- Quick replies ---------- */

.tda-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 0 18px 12px;
	background: #fafafa;
	flex-shrink: 0;
}

.tda-quick:empty { display: none; }

.tda-quick button {
	background: #fff;
	border: 1px solid var(--tda-brand, #1a56db);
	color: var(--tda-brand, #1a56db);
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 13px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease, color 0.15s ease;
}

.tda-quick button:hover {
	background: var(--tda-brand, #1a56db);
	color: #fff;
}

/* ---------- Action bar (human handoff + booking) ---------- */

.tda-actions {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	background: #fff;
	border-top: 1px solid var(--tda-line);
	flex-shrink: 0;
}

.tda-actions:empty { display: none; }

.tda-action {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--tda-line);
	background: #fff;
	color: var(--tda-text);
	border-radius: 10px;
	padding: 9px 10px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	line-height: 1.2;
	text-align: center;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tda-action:hover {
	background: #f8fafc;
	border-color: var(--tda-brand, #1a56db);
	color: var(--tda-brand, #1a56db);
}

.tda-action svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex-shrink: 0;
}

.tda-action-primary {
	background: var(--tda-brand, #1a56db);
	border-color: var(--tda-brand, #1a56db);
	color: #fff;
}

.tda-action-primary:hover {
	background: var(--tda-brand-dark, #14448f);
	border-color: var(--tda-brand-dark, #14448f);
	color: #fff;
}

.tda-action:disabled { opacity: 0.5; cursor: not-allowed; }

.tda-msg-urgent {
	align-self: center;
	background: #fff7ed;
	color: #9a3412;
	border: 1px solid #fed7aa;
	font-size: 13px;
	text-align: center;
	max-width: 95%;
}

/* ---------- Composer ---------- */

.tda-composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--tda-line);
	background: #fff;
	flex-shrink: 0;
}

.tda-input {
	flex: 1;
	resize: none;
	border: 1px solid var(--tda-line);
	border-radius: 12px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	max-height: 110px;
	min-height: 42px;
	color: var(--tda-text);
	background: #fff;
	outline: none;
	/* The zero-specificity reset centres inputs; text entry must stay left. */
	text-align: left;
}

.tda-input:focus {
	border-color: var(--tda-brand, #1a56db);
	box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

.tda-send {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tda-brand, #1a56db);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
	padding: 0;
}

.tda-send:hover:not(:disabled) { background: var(--tda-brand-dark, #14448f); }
.tda-send:disabled { opacity: 0.45; cursor: not-allowed; }
.tda-send svg { width: 18px; height: 18px; fill: currentColor; }

.tda-footer {
	text-align: center;
	font-size: 11px;
	color: var(--tda-muted);
	padding: 0 12px 10px;
	background: #fff;
}

.tda-footer a { color: var(--tda-muted); }

/* ---------- Inline shortcode trigger ---------- */

.tda-inline-trigger {
	display: inline-block;
	background: var(--tda-brand, #1a56db);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}

.tda-inline-trigger:hover { opacity: 0.9; }

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
	.tda-root {
		bottom: 16px;
	}

	/* Doubled class beats the inline --tda-size the plugin prints after this
	   file; media queries add no specificity of their own. */
	.tda-root.tda-root {
		--tda-size: clamp(64px, 20vw, 84px);
	}

	.tda-root.tda-right { right: 16px; }
	.tda-root.tda-left  { left: 16px; }

	.tda-panel {
		position: fixed;
		inset: 0;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
		bottom: 0;
	}

	.tda-root.tda-open .tda-launcher { display: none; }
}

/* ---------- Screen reader helper ---------- */

.tda-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Returning visitor notice ---------- */

.tda-memory-note {
	margin: 4px 0 2px;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(15, 23, 42, 0.04);
	color: #4b5563;
	font-size: 12px;
	line-height: 1.5;
}

.tda-forget {
	appearance: none;
	border: 0;
	padding: 0;
	background: none;
	color: var(--tda-brand, #1a56db);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
}

.tda-forget:hover,
.tda-forget:focus-visible {
	color: var(--tda-brand-dark, #143f9e);
}

/* ---------- Attention moves ----------
 *
 * The shake is the routine nudge. Every few shakes the launcher does one of
 * these instead: a bigger, obviously deliberate piece of movement that reads as
 * "this thing is alive" rather than as a rendering glitch.
 *
 * Every move ends exactly where it started. A launcher that finishes somewhere
 * new is a launcher the visitor has to go looking for.
 */

.tda-root.tda-right { --tda-dir: -1; }
.tda-root.tda-left  { --tda-dir: 1; }

/* How far the travelling moves are allowed to roam. */
.tda-root { --tda-roam: calc(var(--tda-size, 96px) * 1.6); }

/* 1. Hop — squash, stretch, and three bounces on the spot. */
.tda-root.tda-move-hop .tda-launcher {
	animation: tda-hop 1.7s cubic-bezier(0.28, 0.84, 0.42, 1) both;
}

@keyframes tda-hop {
	0%   { transform: translateY(0) scale(1, 1); }
	8%   { transform: translateY(0) scale(1.14, 0.86); }
	20%  { transform: translateY(-38%) scale(0.92, 1.12); }
	32%  { transform: translateY(0) scale(1.12, 0.88); }
	44%  { transform: translateY(-26%) scale(0.95, 1.08); }
	56%  { transform: translateY(0) scale(1.1, 0.9); }
	68%  { transform: translateY(-14%) scale(0.97, 1.05); }
	80%  { transform: translateY(0) scale(1.06, 0.94); }
	90%  { transform: translateY(-4%) scale(1, 1); }
	100% { transform: translateY(0) scale(1, 1); }
}

/* 2. Skate — glides away from its corner, leans into the turn, comes home. */
.tda-root.tda-move-skate .tda-launcher {
	animation: tda-skate 2.5s cubic-bezier(0.45, 0, 0.35, 1) both;
}

@keyframes tda-skate {
	0%   { transform: translateX(0) rotate(0deg); }
	18%  { transform: translateX(calc(var(--tda-dir, -1) * var(--tda-roam) * 0.55)) rotate(calc(var(--tda-dir, -1) * -10deg)); }
	34%  { transform: translateX(calc(var(--tda-dir, -1) * var(--tda-roam))) rotate(calc(var(--tda-dir, -1) * -14deg)); }
	44%  { transform: translateX(calc(var(--tda-dir, -1) * var(--tda-roam))) rotate(calc(var(--tda-dir, -1) * 8deg)); }
	/* The settle overshoots PAST home, towards the corner. It has to stay well
	   inside the 24px the widget sits off the edge, or the icon clips off the
	   side of the screen on the way back. */
	68%  { transform: translateX(calc(var(--tda-dir, -1) * var(--tda-roam) * -0.05)) rotate(calc(var(--tda-dir, -1) * 12deg)); }
	84%  { transform: translateX(calc(var(--tda-dir, -1) * var(--tda-roam) * 0.1)) rotate(calc(var(--tda-dir, -1) * -5deg)); }
	100% { transform: translateX(0) rotate(0deg); }
}

/* 3. The dance — a few beats of choreography rather than one motion. */
.tda-root.tda-move-dance .tda-launcher {
	animation: tda-dance 2.4s ease-in-out both;
}

@keyframes tda-dance {
	0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
	10%  { transform: translate(calc(var(--tda-dir, -1) * 16%), -6%) rotate(calc(var(--tda-dir, -1) * -12deg)) scale(1.06); }
	22%  { transform: translate(calc(var(--tda-dir, -1) * -6%), 0) rotate(calc(var(--tda-dir, -1) * 12deg)) scale(1.02); }
	34%  { transform: translate(calc(var(--tda-dir, -1) * 16%), -6%) rotate(calc(var(--tda-dir, -1) * -12deg)) scale(1.06); }
	46%  { transform: translate(0, 0) rotate(0deg) scale(1); }
	56%  { transform: translate(0, -20%) rotate(0deg) scale(1.12, 0.9); }
	64%  { transform: translate(0, 0) rotate(0deg) scale(0.92, 1.1); }
	74%  { transform: translate(0, -10%) rotate(180deg) scale(1.05); }
	86%  { transform: translate(0, 0) rotate(360deg) scale(1); }
	100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}

/* 4. The character — it sprouts arms and legs and dances, then packs them away. */
.tda-limbs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	visibility: hidden;
}

.tda-root.tda-move-character .tda-limbs { visibility: visible; }

.tda-limb {
	position: absolute;
	background: linear-gradient(180deg, #dbe6fb 0%, #a9bfe8 100%);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transform: scale(0);
}

/* Hands and feet. */
.tda-limb::after {
	content: "";
	position: absolute;
	background: #f4f7fe;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.tda-arm {
	width: calc(var(--tda-size, 96px) * 0.34);
	height: calc(var(--tda-size, 96px) * 0.075);
	top: 40%;
}

.tda-arm::after {
	width: calc(var(--tda-size, 96px) * 0.13);
	height: calc(var(--tda-size, 96px) * 0.13);
	top: 50%;
	margin-top: calc(var(--tda-size, 96px) * -0.065);
}

.tda-arm-l { right: 94%; transform-origin: 100% 50%; }
.tda-arm-r { left:  94%; transform-origin: 0% 50%; }
.tda-arm-l::after { left: calc(var(--tda-size, 96px) * -0.055); }
.tda-arm-r::after { right: calc(var(--tda-size, 96px) * -0.055); }

.tda-leg {
	width: calc(var(--tda-size, 96px) * 0.075);
	height: calc(var(--tda-size, 96px) * 0.26);
	top: 88%;
	transform-origin: 50% 0%;
}

.tda-leg::after {
	width: calc(var(--tda-size, 96px) * 0.17);
	height: calc(var(--tda-size, 96px) * 0.1);
	bottom: calc(var(--tda-size, 96px) * -0.03);
	left: 50%;
	margin-left: calc(var(--tda-size, 96px) * -0.05);
	border-radius: 50% 50% 40% 40%;
}

.tda-leg-l { left: 27%; }
.tda-leg-r { right: 27%; }

.tda-root.tda-move-character .tda-launcher {
	animation: tda-character-body 3s ease-in-out both;
}

.tda-root.tda-move-character .tda-arm-l { animation: tda-arm-l 3s ease-in-out both; }
.tda-root.tda-move-character .tda-arm-r { animation: tda-arm-r 3s ease-in-out both; }
.tda-root.tda-move-character .tda-leg-l { animation: tda-leg-l 3s ease-in-out both; }
.tda-root.tda-move-character .tda-leg-r { animation: tda-leg-r 3s ease-in-out both; }

/*
 * It stands UP onto its legs and steps IN from the corner before dancing, then
 * sits back down exactly where it was. Both are load-bearing, not styling:
 * without the lift the feet hang below the bottom of the screen, and without
 * the step inward the outer arm reaches past the side of it. At the largest
 * icon size the plugin allows, either one is a limb cut in half by the edge.
 */
@keyframes tda-character-body {
	0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
	7%   { transform: translate(calc(var(--tda-dir, -1) * 24%), -26%) rotate(0deg) scale(1.06); }
	12%  { transform: translate(calc(var(--tda-dir, -1) * 36%), -24%) rotate(0deg) scale(1); }
	24%  { transform: translate(calc(var(--tda-dir, -1) * 36%), -24%) rotate(-8deg) scale(1); }
	36%  { transform: translate(calc(var(--tda-dir, -1) * 36%), -36%) rotate(8deg) scale(1); }
	48%  { transform: translate(calc(var(--tda-dir, -1) * 36%), -24%) rotate(-8deg) scale(1); }
	60%  { transform: translate(calc(var(--tda-dir, -1) * 36%), -36%) rotate(8deg) scale(1); }
	72%  { transform: translate(calc(var(--tda-dir, -1) * 36%), -24%) rotate(-6deg) scale(1); }
	82%  { transform: translate(calc(var(--tda-dir, -1) * 36%), -32%) rotate(6deg) scale(1); }
	92%  { transform: translate(calc(var(--tda-dir, -1) * 12%), -22%) rotate(0deg) scale(1.03); }
	100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* Limbs pop out with a little overshoot, wave, then tuck away again. */
@keyframes tda-arm-l {
	0%   { transform: scale(0) rotate(0deg); }
	9%   { transform: scale(1.06) rotate(-46deg); }
	14%  { transform: scale(1) rotate(-24deg); }
	28%  { transform: scale(1) rotate(-72deg); }
	42%  { transform: scale(1) rotate(-14deg); }
	56%  { transform: scale(1) rotate(-72deg); }
	70%  { transform: scale(1) rotate(-14deg); }
	84%  { transform: scale(1) rotate(-52deg); }
	/* Arms finish raised, not stretched out sideways. By this beat the body is
	   already stepping back to its corner, and a horizontal arm reaches past the
	   edge of the screen at the largest icon size. */
	93%  { transform: scale(1) rotate(-62deg); }
	100% { transform: scale(0) rotate(0deg); }
}

@keyframes tda-arm-r {
	0%   { transform: scale(0) rotate(0deg); }
	9%   { transform: scale(1.06) rotate(46deg); }
	14%  { transform: scale(1) rotate(24deg); }
	28%  { transform: scale(1) rotate(14deg); }
	42%  { transform: scale(1) rotate(72deg); }
	56%  { transform: scale(1) rotate(14deg); }
	70%  { transform: scale(1) rotate(72deg); }
	84%  { transform: scale(1) rotate(20deg); }
	93%  { transform: scale(1) rotate(58deg); }
	100% { transform: scale(0) rotate(0deg); }
}

@keyframes tda-leg-l {
	0%   { transform: scale(0) rotate(0deg); }
	10%  { transform: scale(1.1) rotate(8deg); }
	15%  { transform: scale(1) rotate(4deg); }
	28%  { transform: scale(1) rotate(26deg); }
	42%  { transform: scale(1) rotate(-6deg); }
	56%  { transform: scale(1) rotate(26deg); }
	70%  { transform: scale(1) rotate(-6deg); }
	84%  { transform: scale(1) rotate(18deg); }
	93%  { transform: scale(1) rotate(4deg); }
	100% { transform: scale(0) rotate(0deg); }
}

@keyframes tda-leg-r {
	0%   { transform: scale(0) rotate(0deg); }
	10%  { transform: scale(1.1) rotate(-8deg); }
	15%  { transform: scale(1) rotate(-4deg); }
	28%  { transform: scale(1) rotate(6deg); }
	42%  { transform: scale(1) rotate(-26deg); }
	56%  { transform: scale(1) rotate(6deg); }
	70%  { transform: scale(1) rotate(-26deg); }
	84%  { transform: scale(1) rotate(-18deg); }
	93%  { transform: scale(1) rotate(-4deg); }
	100% { transform: scale(0) rotate(0deg); }
}

/* The ring pulses along with any big move, not just the shake. */
.tda-root.tda-move-hop .tda-launcher::after,
.tda-root.tda-move-skate .tda-launcher::after,
.tda-root.tda-move-dance .tda-launcher::after,
.tda-root.tda-move-character .tda-launcher::after {
	animation: tda-ring 1.15s ease-out 2;
}

/* Phones keep the in-place moves only. A launcher sliding across a small screen
   covers real content and reads as broken rather than playful. */
@media (max-width: 700px) {
	.tda-root { --tda-roam: calc(var(--tda-size, 96px) * 0.5); }
}

/* Someone who has asked their system for less motion gets the shake and these
   alike: nothing. */
@media (prefers-reduced-motion: reduce) {
	.tda-root.tda-move-hop .tda-launcher,
	.tda-root.tda-move-skate .tda-launcher,
	.tda-root.tda-move-dance .tda-launcher,
	.tda-root.tda-move-character .tda-launcher,
	.tda-root.tda-move-hop .tda-launcher::after,
	.tda-root.tda-move-skate .tda-launcher::after,
	.tda-root.tda-move-dance .tda-launcher::after,
	.tda-root.tda-move-character .tda-launcher::after,
	.tda-limb {
		animation: none;
	}

	.tda-limbs { visibility: hidden; }
}