/**
 * AutoDuck widget (§1.1).
 *
 * Everything is scoped under #autoduck-sn-w-widget and every property the theme
 * might otherwise leak in (font, colour, border, radius, box-sizing) is stated
 * explicitly. A feedback widget lands on themes nobody has seen, so it inherits
 * nothing it can avoid inheriting.
 */

#autoduck-sn-w-widget {
	--autoduck-sn-w-accent: #f2b705;
	/* Dark panel, light type. NOTE: --ink used to mean three different things —
	   body text, the text sitting ON the yellow accent, and the dark background
	   of the visitor's own message bubble. Flipping one token would have fixed
	   the first and broken the other two (dark-on-yellow would have gone light,
	   and the user bubble would have turned light-on-light), so each role now
	   has its own token and can be reasoned about on its own. */
	--autoduck-sn-w-ink: #e9eaee;
	--autoduck-sn-w-muted: #99a0ac;
	--autoduck-sn-w-surface: #1e2126;
	--autoduck-sn-w-sunk: #16181c;
	--autoduck-sn-w-line: #333842;
	/* The accent stays a light yellow in both themes, so anything drawn on top
	   of it stays dark — this token must NOT follow --ink. */
	--autoduck-sn-w-on-accent: #16181d;
	/* The visitor's own message: a raised surface rather than the accent, so a
	   long conversation doesn't become a wall of yellow. */
	--autoduck-sn-w-user-bg: #3a4049;
	--autoduck-sn-w-user-ink: #f5f6f8;
	/* Focus ring on the launcher, which sits on the HOST page — unknown, often
	   light — so it stays dark for contrast there rather than on our panel. */
	--autoduck-sn-w-ring: #16181d;
	--autoduck-sn-w-radius: 16px;

	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--autoduck-sn-w-ink);
}
/* Light theme. Only the tokens change — no component rule is duplicated, which
   is what keeps the two themes from drifting apart as the widget grows. The
   selector carries the same specificity as the base block, so an inline
   override from the settings screen still wins over both. */
#autoduck-sn-w-widget[data-theme="light"] {
	--autoduck-sn-w-ink: #16181d;
	--autoduck-sn-w-muted: #5d6470;
	--autoduck-sn-w-surface: #ffffff;
	--autoduck-sn-w-sunk: #f4f5f7;
	--autoduck-sn-w-line: #e3e5ea;
	--autoduck-sn-w-user-bg: #16181d;
	--autoduck-sn-w-user-ink: #ffffff;
}


#autoduck-sn-w-widget *,
#autoduck-sn-w-widget *::before,
#autoduck-sn-w-widget *::after {
	box-sizing: border-box;
}

#autoduck-sn-w-widget .autoduck-sn-w__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ bubble */

#autoduck-sn-w-widget .autoduck-sn-w__bubble {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--autoduck-sn-w-accent);
	box-shadow: 0 6px 20px rgba(20, 22, 28, 0.22);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	order: 2;
}

#autoduck-sn-w-widget .autoduck-sn-w__bubble:hover,
#autoduck-sn-w-widget .autoduck-sn-w__bubble:focus-visible {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 10px 26px rgba(20, 22, 28, 0.28);
}

#autoduck-sn-w-widget .autoduck-sn-w__bubble:focus-visible {
	outline: 3px solid var(--autoduck-sn-w-ring);
	outline-offset: 3px;
}

#autoduck-sn-w-widget .autoduck-sn-w__bubble-icon {
	font-size: 30px;
	line-height: 1;
	display: block;
}

#autoduck-sn-w-widget .autoduck-sn-w__bubble-icon img {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
	border-radius: 50%;
}

/* ------------------------------------------------------------------- panel */

#autoduck-sn-w-widget .autoduck-sn-w__panel {
	order: 1;
	display: flex;
	flex-direction: column;
	width: min(380px, calc(100vw - 32px));
	max-height: min(620px, calc(100vh - 120px));
	/* dvh tracks the *visible* viewport. Ignored by browsers that don't know
	   it, which keeps the vh line above as the fallback. */
	max-height: min(620px, calc(100dvh - 120px));
	background: var(--autoduck-sn-w-surface);
	border: 1px solid var(--autoduck-sn-w-line);
	border-radius: var(--autoduck-sn-w-radius);
	box-shadow: 0 18px 48px rgba(20, 22, 28, 0.24);
	overflow: hidden;
	transform-origin: bottom right;
	animation: autoduck-sn-w-in 0.18s ease;
}

#autoduck-sn-w-widget .autoduck-sn-w__panel[hidden] {
	display: none;
}

@keyframes autoduck-sn-w-in {
	from { opacity: 0; transform: translateY(10px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	#autoduck-sn-w-widget .autoduck-sn-w__panel { animation: none; }
	#autoduck-sn-w-widget .autoduck-sn-w__bubble { transition: none; }
}

#autoduck-sn-w-widget .autoduck-sn-w__header {
	/* Never shrink. In a squeezed flex column the header is the first thing
	   the browser will compress, and it carries the close button — the one
	   control a visitor on a small screen must always be able to hit. */
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 16px 14px 14px 18px;
	background: var(--autoduck-sn-w-accent);
	/* Derived from the header ink, not a fixed dark: on a dark accent a dark
	   hairline is invisible, which is how the header loses its edge. */
	border-bottom: 1px solid rgba(20, 22, 28, 0.08);
	border-bottom-color: color-mix(in srgb, var(--autoduck-sn-w-on-accent) 12%, transparent);
}

#autoduck-sn-w-widget .autoduck-sn-w__titles { flex: 1 1 auto; min-width: 0; }

#autoduck-sn-w-widget .autoduck-sn-w__title {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--autoduck-sn-w-on-accent);
	letter-spacing: -0.01em;
}

#autoduck-sn-w-widget .autoduck-sn-w__tagline {
	margin: 4px 0 0;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.4;
	/* Was a hardcoded near-black rgba, which is why setting a dark accent left
	   this line unreadable even once the title was fixed. It shares the header
	   ink now and is softened with opacity rather than its own colour, so it
	   can never again disagree with the heading above it. */
	color: var(--autoduck-sn-w-on-accent);
	opacity: 0.78;
}

#autoduck-sn-w-widget .autoduck-sn-w__close {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	/* A wash of the header ink, not a fixed white chip: white behind light ink
	   is an invisible close button, and on a dark accent that is the one
	   control a visitor most needs to find. */
	background: rgba(255, 255, 255, 0.45);
	background: color-mix(in srgb, var(--autoduck-sn-w-on-accent) 14%, transparent);
	color: var(--autoduck-sn-w-on-accent);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

#autoduck-sn-w-widget .autoduck-sn-w__close:hover {
	background: rgba(255, 255, 255, 0.8);
	background: color-mix(in srgb, var(--autoduck-sn-w-on-accent) 28%, transparent);
}

/* --------------------------------------------------------------------- log */

#autoduck-sn-w-widget .autoduck-sn-w__log {
	flex: 1 1 auto;
	min-height: 140px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--autoduck-sn-w-sunk);
}

#autoduck-sn-w-widget .autoduck-sn-w__msg {
	max-width: 86%;
	padding: 9px 13px;
	border-radius: 14px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 14.5px;
}

#autoduck-sn-w-widget .autoduck-sn-w__msg--user {
	align-self: flex-end;
	background: var(--autoduck-sn-w-user-bg);
	color: var(--autoduck-sn-w-user-ink);
	border-bottom-right-radius: 5px;
}

#autoduck-sn-w-widget .autoduck-sn-w__msg--bot {
	align-self: flex-start;
	background: var(--autoduck-sn-w-surface);
	border: 1px solid var(--autoduck-sn-w-line);
	border-bottom-left-radius: 5px;
}

#autoduck-sn-w-widget .autoduck-sn-w__msg--note {
	align-self: stretch;
	max-width: 100%;
	background: transparent;
	border: 1px dashed var(--autoduck-sn-w-line);
	color: var(--autoduck-sn-w-muted);
	font-size: 13px;
	text-align: center;
}

#autoduck-sn-w-widget .autoduck-sn-w__msg--error {
	border-color: #d8bcbc;
	color: #8a3232;
}

#autoduck-sn-w-widget .autoduck-sn-w__msg img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: 6px;
	border-radius: 8px;
}

#autoduck-sn-w-widget .autoduck-sn-w__file-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 12.5px;
}

#autoduck-sn-w-widget .autoduck-sn-w__msg--bot .autoduck-sn-w__file-chip {
	background: var(--autoduck-sn-w-sunk);
}

/* Typing indicator. */
#autoduck-sn-w-widget .autoduck-sn-w__typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	height: 10px;
}

#autoduck-sn-w-widget .autoduck-sn-w__typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--autoduck-sn-w-muted);
	animation: autoduck-sn-w-blink 1.2s infinite ease-in-out;
}

#autoduck-sn-w-widget .autoduck-sn-w__typing span:nth-child(2) { animation-delay: 0.18s; }
#autoduck-sn-w-widget .autoduck-sn-w__typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes autoduck-sn-w-blink {
	0%, 60%, 100% { opacity: 0.25; }
	30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#autoduck-sn-w-widget .autoduck-sn-w__typing span { animation: none; opacity: 0.6; }
}

/* -------------------------------------------------------------------- form */

#autoduck-sn-w-widget .autoduck-sn-w__form {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 14px 10px;
	background: var(--autoduck-sn-w-surface);
	border-top: 1px solid var(--autoduck-sn-w-line);
}

/* Honeypot: off-canvas rather than display:none, which some bots skip. */
#autoduck-sn-w-widget .autoduck-sn-w__hp {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#autoduck-sn-w-widget .autoduck-sn-w__composer {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding: 6px;
	border: 1px solid var(--autoduck-sn-w-line);
	border-radius: 13px;
	background: var(--autoduck-sn-w-surface);
}

#autoduck-sn-w-widget .autoduck-sn-w__composer:focus-within {
	border-color: var(--autoduck-sn-w-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--autoduck-sn-w-accent) 30%, transparent);
}

#autoduck-sn-w-widget .autoduck-sn-w__input {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 132px;
	padding: 6px 4px 6px 8px;
	margin: 0;
	border: 0;
	outline: 0;
	resize: none;
	background: transparent;
	color: var(--autoduck-sn-w-ink);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.45;
}

#autoduck-sn-w-widget .autoduck-sn-w__attach,
#autoduck-sn-w-widget .autoduck-sn-w__send {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	background: transparent;
	color: var(--autoduck-sn-w-muted);
}

#autoduck-sn-w-widget .autoduck-sn-w__attach:hover { background: var(--autoduck-sn-w-sunk); color: var(--autoduck-sn-w-ink); }

#autoduck-sn-w-widget .autoduck-sn-w__send {
	background: var(--autoduck-sn-w-accent);
	color: var(--autoduck-sn-w-on-accent);
}

#autoduck-sn-w-widget .autoduck-sn-w__send[disabled],
#autoduck-sn-w-widget .autoduck-sn-w__attach[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

#autoduck-sn-w-widget .autoduck-sn-w__attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

#autoduck-sn-w-widget .autoduck-sn-w__pending {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 4px 6px 4px 10px;
	border: 1px solid var(--autoduck-sn-w-line);
	border-radius: 999px;
	background: var(--autoduck-sn-w-sunk);
	font-size: 12.5px;
}

#autoduck-sn-w-widget .autoduck-sn-w__pending button {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 0 2px;
	color: var(--autoduck-sn-w-muted);
}

#autoduck-sn-w-widget .autoduck-sn-w__foot {
	margin: 8px 2px 0;
	padding: 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--autoduck-sn-w-muted);
	text-align: center;
}

/* ------------------------------------------------------------------ small */

@media (max-width: 480px) {
	#autoduck-sn-w-widget {
		right: 12px;
		left: 12px;
		align-items: flex-end;
		/* Clear of the home indicator on a notched phone, and of nothing at
		   all on a device without one. */
		bottom: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	#autoduck-sn-w-widget .autoduck-sn-w__panel {
		width: 100%;

		/* The bug this replaces: on iOS Safari `100vh` is the height with the
		   toolbar RETRACTED — the largest the viewport ever gets — so while
		   the toolbar is showing, `100vh` is taller than the screen. The panel
		   is anchored to the bottom and grows upward, so the excess pushed the
		   header, and the close button with it, off the top. The panel could
		   be neither read nor dismissed.

		   `svh` is the small viewport: the height with the toolbar SHOWING,
		   i.e. the smallest it ever gets. Sizing to it costs a little room
		   while the toolbar is hidden and in exchange the panel fits whatever
		   Safari is doing, without relayout as the bar slides in and out.
		   For a panel that must always expose its close button, guaranteed
		   beats roomy. The vh line stays as the fallback for older browsers. */
		max-height: calc(100vh - 108px);
		max-height: calc(100svh - 96px - env(safe-area-inset-bottom, 0px));
	}

	/* The log is the only part that should give up space when there isn't
	   enough; its desktop floor is taller than some phones can spare. */
	#autoduck-sn-w-widget .autoduck-sn-w__log {
		min-height: 88px;
	}
}

/* A phone in landscape, or a small window: there is no room for a comfortable
   minimum, so drop it entirely and let the log scroll. Without this the
   min-heights add up past the panel's max-height and the overflow is clipped —
   silently, since the panel hides it. */
@media (max-height: 520px) {
	#autoduck-sn-w-widget .autoduck-sn-w__panel {
		max-height: calc(100vh - 84px);
		max-height: calc(100svh - 72px - env(safe-area-inset-bottom, 0px));
	}

	#autoduck-sn-w-widget .autoduck-sn-w__log {
		min-height: 0;
	}

	#autoduck-sn-w-widget .autoduck-sn-w__header {
		padding: 10px 12px 9px 14px;
	}

	#autoduck-sn-w-widget .autoduck-sn-w__tagline {
		display: none; /* The heading and the close button earn the space first. */
	}
}