/**
 * Iacofano Chat widget styles.
 *
 * Every rule is prefixed with the #iaco-chat-root ID. An ID beats almost any theme
 * selector on specificity, so the theme cannot bleed into the widget and the widget
 * cannot bleed out into the theme.
 */

#iaco-chat-root {
	--iaco-accent: #1a3a5c;
	--iaco-accent-ink: #ffffff;
	--iaco-surface: #ffffff;
	--iaco-text: #1b1b1b;
	--iaco-muted: #5c6470;
	--iaco-line: #e3e6ea;
	--iaco-bot-bg: #f2f4f7;
	--iaco-user-bg: var(--iaco-accent);
	--iaco-radius: 14px;
	--iaco-w: 390px;
	--iaco-h: 580px;

	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999999;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--iaco-text);
}

#iaco-chat-root *,
#iaco-chat-root *::before,
#iaco-chat-root *::after {
	box-sizing: border-box;
}

/* The hidden attribute must always win. Without !important, any rule that sets display
   (like display:flex on our buttons) silently overrides it, which is how the Stop button
   ended up showing permanently. */
#iaco-chat-root [hidden] {
	display: none !important;
}

/* Neutralise theme button styles. Themes commonly give every <button> large padding,
   uppercase text and letter-spacing. On a 40px icon button that padding swallows the
   whole width and the icon disappears. Our class rules below then set exactly what each
   button needs. One ID in the selector beats the theme's element and attribute rules,
   including its :hover states. */
#iaco-chat-root button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: inherit;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	white-space: normal;
	transition: none;
}

#iaco-chat-root svg {
	display: block;
	flex-shrink: 0;
	max-width: none;
	max-height: none;
}

/* Explicit icon sizes. Themes often set svg { width: 100% }, which would otherwise
   stretch each icon to the full size of its button. */
#iaco-chat-root .iaco-launcher svg { width: 24px; height: 24px; }
#iaco-chat-root .iaco-send svg     { width: 18px; height: 18px; }
#iaco-chat-root .iaco-stop svg     { width: 14px; height: 14px; }
#iaco-chat-root .iaco-icon svg     { width: 16px; height: 16px; }

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

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

#iaco-chat-root .iaco-launcher {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	padding: 12px 20px 12px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--iaco-accent);
	color: var(--iaco-accent-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	transition: transform 0.15s ease;
}

#iaco-chat-root .iaco-launcher:hover {
	background: var(--iaco-accent);
	color: var(--iaco-accent-ink);
	transform: translateY(-1px);
}

#iaco-chat-root .iaco-launcher:focus-visible {
	outline: 3px solid #f0b429;
	outline-offset: 3px;
}

#iaco-chat-root.iaco-is-open .iaco-launcher {
	padding: 14px;
	border-radius: 50%;
}

#iaco-chat-root.iaco-is-open .iaco-launcher-label {
	display: none;
}

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

#iaco-chat-root .iaco-panel {
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 0;
	bottom: 68px;
	width: var(--iaco-w);
	height: var(--iaco-h);
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 120px);
	background: var(--iaco-surface);
	border-radius: var(--iaco-radius);
	overflow: hidden;
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}

#iaco-chat-root .iaco-panel[hidden] {
	display: none;
}

#iaco-chat-root .iaco-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	gap: 8px;
	padding: 12px 10px 12px 16px;
	background: var(--iaco-accent);
	color: var(--iaco-accent-ink);
}

#iaco-chat-root .iaco-title {
	font-weight: 600;
	font-size: 15px;
}

#iaco-chat-root .iaco-bar-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

#iaco-chat-root .iaco-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: inherit;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

#iaco-chat-root .iaco-icon:hover {
	background: rgba(255, 255, 255, 0.3);
	color: inherit;
}

#iaco-chat-root .iaco-icon:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Log ------------------------------------------------------------------ */

#iaco-chat-root .iaco-log {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	background: var(--iaco-surface);
}

#iaco-chat-root .iaco-msg {
	display: flex;
	margin-bottom: 12px;
}

#iaco-chat-root .iaco-msg-user {
	justify-content: flex-end;
}

#iaco-chat-root .iaco-bubble {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--iaco-bot-bg);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

#iaco-chat-root .iaco-msg-user .iaco-bubble {
	background: var(--iaco-user-bg);
	color: var(--iaco-accent-ink);
	white-space: pre-wrap;
}

#iaco-chat-root .iaco-bubble p {
	margin: 0 0 8px;
}

#iaco-chat-root .iaco-bubble p:last-child {
	margin-bottom: 0;
}

#iaco-chat-root .iaco-bubble .iaco-list {
	margin: 4px 0 8px;
	padding-left: 20px;
	list-style: disc;
}

#iaco-chat-root .iaco-bubble .iaco-list li {
	margin: 2px 0;
}

#iaco-chat-root .iaco-link {
	color: inherit;
	text-decoration: underline;
}

#iaco-chat-root .iaco-status {
	margin: 0 0 12px;
	color: var(--iaco-muted);
	font-size: 13px;
	font-style: italic;
}

#iaco-chat-root .iaco-error {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid #f0c9c7;
	border-radius: 10px;
	background: #fdf1f0;
	font-size: 14px;
}

#iaco-chat-root .iaco-error p {
	margin: 0 0 8px;
}

#iaco-chat-root .iaco-retry:hover {
	background: var(--iaco-accent);
	color: var(--iaco-accent-ink);
}

#iaco-chat-root .iaco-retry {
	padding: 6px 12px;
	border: 1px solid var(--iaco-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--iaco-accent);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

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

#iaco-chat-root .iaco-compose {
	flex: 0 0 auto;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--iaco-line);
	background: var(--iaco-surface);
}

#iaco-chat-root .iaco-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

#iaco-chat-root .iaco-input {
	flex: 1 1 auto;
	min-height: 40px;
	max-height: 140px;
	padding: 9px 12px;
	border: 1px solid var(--iaco-line);
	border-radius: 20px;
	background: #ffffff;
	color: var(--iaco-text);
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	resize: none;
}

#iaco-chat-root .iaco-input:focus {
	border-color: var(--iaco-accent);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.15);
}

#iaco-chat-root .iaco-input:disabled {
	background: #f6f7f9;
	color: var(--iaco-muted);
}

#iaco-chat-root .iaco-send {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--iaco-accent);
	color: var(--iaco-accent-ink);
	cursor: pointer;
}

#iaco-chat-root .iaco-send:hover {
	background: var(--iaco-accent);
	color: var(--iaco-accent-ink);
	filter: brightness(1.12);
}

#iaco-chat-root .iaco-stop:hover {
	background: #8a1c1c;
}

#iaco-chat-root .iaco-send:focus-visible {
	outline: 3px solid #f0b429;
	outline-offset: 2px;
}

#iaco-chat-root .iaco-stop {
	background: #8a1c1c;
}

#iaco-chat-root .iaco-lead {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 8px 10px;
	border: 1px solid var(--iaco-line);
	border-radius: 10px;
	background: transparent;
	color: var(--iaco-accent);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

#iaco-chat-root .iaco-lead[hidden] {
	display: none;
}

#iaco-chat-root .iaco-lead:hover:not(:disabled) {
	background: var(--iaco-bot-bg);
}

#iaco-chat-root .iaco-lead:disabled {
	color: var(--iaco-muted);
	cursor: default;
}

#iaco-chat-root .iaco-lead:focus-visible {
	outline: 3px solid #f0b429;
	outline-offset: 2px;
}

#iaco-chat-root .iaco-note {
	margin: 8px 2px 0;
	color: var(--iaco-muted);
	font-size: 12px;
	line-height: 1.35;
}

/* Small screens: full screen ------------------------------------------- */

@media (max-width: 520px) {
	#iaco-chat-root {
		right: 12px;
		bottom: 12px;
	}

	#iaco-chat-root .iaco-panel {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		border-radius: 0;
		padding-top: env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	#iaco-chat-root .iaco-launcher {
		padding: 14px;
		border-radius: 50%;
	}

	#iaco-chat-root .iaco-launcher-label {
		display: none;
	}

	#iaco-chat-root.iaco-is-open .iaco-launcher {
		display: none;
	}

	/* 16px stops iOS Safari zooming in when the field takes focus. */
	#iaco-chat-root .iaco-input {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#iaco-chat-root .iaco-launcher {
		transition: none;
	}

	#iaco-chat-root .iaco-launcher:hover {
		transform: none;
	}
}

/* Colour lock. Some themes and page builders set button:hover colours with !important.
   Normally the more specific selector wins, but !important beats specificity, so we have
   to answer in kind for the handful of properties where a wrong colour would be jarring:
   the launcher, Send, Stop, header buttons, Try again and the lead button. */
#iaco-chat-root .iaco-launcher,
#iaco-chat-root .iaco-launcher:hover,
#iaco-chat-root .iaco-launcher:focus,
#iaco-chat-root .iaco-send,
#iaco-chat-root .iaco-send:hover,
#iaco-chat-root .iaco-send:focus {
	background: var(--iaco-accent) !important;
	color: var(--iaco-accent-ink) !important;
	border: 0 !important;
}

#iaco-chat-root .iaco-stop,
#iaco-chat-root .iaco-stop:hover,
#iaco-chat-root .iaco-stop:focus {
	background: #8a1c1c !important;
	color: #ffffff !important;
}

#iaco-chat-root .iaco-icon,
#iaco-chat-root .iaco-icon:focus {
	background: rgba(255, 255, 255, 0.16) !important;
	color: var(--iaco-accent-ink) !important;
	border: 0 !important;
}

#iaco-chat-root .iaco-icon:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	color: var(--iaco-accent-ink) !important;
}

#iaco-chat-root .iaco-retry,
#iaco-chat-root .iaco-retry:focus {
	background: transparent !important;
	color: var(--iaco-accent) !important;
	border: 1px solid var(--iaco-accent) !important;
}

#iaco-chat-root .iaco-retry:hover {
	background: var(--iaco-accent) !important;
	color: var(--iaco-accent-ink) !important;
}

#iaco-chat-root .iaco-lead,
#iaco-chat-root .iaco-lead:focus {
	background: transparent !important;
	color: var(--iaco-accent) !important;
	border: 1px solid var(--iaco-line) !important;
}

#iaco-chat-root .iaco-lead:hover:not(:disabled) {
	background: var(--iaco-bot-bg) !important;
	color: var(--iaco-accent) !important;
}