/**
 * APIgoat Chatbot — skinnable bubble + window.
 *
 * Skin via CSS custom properties. Override any of these on the .acb element
 * (the shortcode sets --acb-accent inline; the rest cascade from here or your
 * theme):
 *   --acb-accent, --acb-bg, --acb-fg, --acb-muted, --acb-line,
 *   --acb-radius, --acb-width, --acb-height, --acb-font
 */

.acb {
	--acb-accent: #1b6fc8;
	--acb-bg: #ffffff;
	--acb-fg: #1a1a1a;
	--acb-muted: #6b7280;
	--acb-line: rgba(0, 0, 0, 0.12);
	--acb-bot-bg: #f3f4f6;
	--acb-radius: 16px;
	--acb-width: 360px;
	--acb-height: 520px;
	--acb-font: inherit;

	font-family: var(--acb-font);
	box-sizing: border-box;
}

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

/* Dark theme overrides */
.acb--dark {
	--acb-bg: #1f2430;
	--acb-fg: #e8eaed;
	--acb-muted: #9aa0ac;
	--acb-line: rgba(255, 255, 255, 0.14);
	--acb-bot-bg: #2a3140;
}

/* ── Floating positioning ───────────────────────────────────────────── */
.acb--floating {
	position: fixed;
	bottom: 24px;
	z-index: 99990;
}
.acb--floating.acb--bottom-right { right: 24px; }
.acb--floating.acb--bottom-left  { left: 24px; }
/* middle-*: launcher vertically centred on the viewport edge; the open
   panel is centred on the same point. */
.acb--floating.acb--middle-right,
.acb--floating.acb--middle-left {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
}
.acb--floating.acb--middle-right { right: 24px; }
.acb--floating.acb--middle-left  { left: 24px; }

/* ── Intro callout next to the closed launcher ─────────────────────── */
.acb__intro {
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
	display: flex;
	align-items: flex-start;
	gap: 6px;
	width: max-content;
	max-width: min(280px, calc(100vw - 120px));
	padding: 10px 12px;
	background: var(--acb-bg);
	color: var(--acb-fg);
	border: 1px solid var(--acb-accent);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	font-size: 13.5px;
	line-height: 1.45;
}
.acb--bottom-right .acb__intro,
.acb--middle-right .acb__intro { right: calc(100% + 12px); }
.acb--bottom-left .acb__intro,
.acb--middle-left .acb__intro  { left: calc(100% + 12px); }
.acb--bottom-right .acb__intro,
.acb--bottom-left .acb__intro  { bottom: 0; transform: none; }
.acb__intro-text {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.acb__intro-close {
	appearance: none;
	background: none;
	border: 0;
	padding: 0 2px;
	margin: -4px -4px 0 0;
	font-size: 18px;
	line-height: 1;
	color: var(--acb-muted);
	cursor: pointer;
}
.acb__intro-close:hover { color: var(--acb-fg); }
.acb--open .acb__intro { display: none; }

/* ── Launcher bubble ────────────────────────────────────────────────── */
.acb__launcher {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	background: var(--acb-accent);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.acb__launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); }
.acb__launcher:focus-visible { outline: 3px solid var(--acb-accent); outline-offset: 3px; }
.acb--open .acb__launcher { display: none; }
/* The launcher icon is an emoji from the settings, so it arrives in the
   vendor's own colours. Flatten it to a white silhouette on the accent
   circle, whatever glyph is configured. */
.acb__launcher-icon {
	display: inline-block;
	filter: brightness(0) invert(1);
}

/* ── Panel ──────────────────────────────────────────────────────────── */
.acb__panel {
	width: var(--acb-width);
	max-width: calc(100vw - 32px);
	height: var(--acb-height);
	max-height: calc(100vh - 48px);
	background: var(--acb-bg);
	color: var(--acb-fg);
	border: 1px solid var(--acb-line);
	border-radius: var(--acb-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.acb--floating .acb__panel {
	position: absolute;
	bottom: 0;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.26);
}
.acb--floating.acb--bottom-right .acb__panel { right: 0; }
.acb--floating.acb--bottom-left  .acb__panel { left: 0; }
.acb--floating.acb--middle-right .acb__panel,
.acb--floating.acb--middle-left  .acb__panel {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
}
.acb--floating.acb--middle-right .acb__panel { right: 0; }
.acb--floating.acb--middle-left  .acb__panel { left: 0; }
.acb--inline .acb__panel { width: 100%; }

.acb__panel[hidden] { display: none; }

/* ── Header ─────────────────────────────────────────────────────────── */
.acb__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 16px;
	background: var(--acb-accent);
	color: #fff;
}
.acb__title { font-weight: 600; font-size: 15px; }
.acb__close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	opacity: 0.85;
}
.acb__close:hover { opacity: 1; }

/* ── Message log ────────────────────────────────────────────────────── */
.acb__log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.acb__msg {
	max-width: 82%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.acb__msg--bot {
	align-self: flex-start;
	background: var(--acb-bot-bg);
	color: var(--acb-fg);
	border-bottom-left-radius: 4px;
}
.acb__msg--user {
	align-self: flex-end;
	background: var(--acb-accent);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.acb__msg--error {
	align-self: center;
	background: transparent;
	color: #b91c1c;
	font-size: 13px;
}

/* Typing indicator */
.acb__typing { display: inline-flex; gap: 4px; align-items: center; }
.acb__typing span {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--acb-muted);
	animation: acb-blink 1.2s infinite ease-in-out;
}
.acb__typing span:nth-child(2) { animation-delay: 0.2s; }
.acb__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes acb-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* Source citation chips (apichatbot cite_sources) */
.acb__cites {
	align-self: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: -4px;
}
.acb__cite {
	font-size: 11px;
	line-height: 1.4;
	padding: 3px 8px;
	border: 1px solid var(--acb-line);
	border-radius: 999px;
	color: var(--acb-muted);
	background: transparent;
}

/* Follow-up suggestions (apichatbot suggest_followups) */
.acb__followups {
	align-self: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.acb__followup {
	font: inherit;
	font-size: 12.5px;
	line-height: 1.35;
	padding: 6px 11px;
	border: 1px solid var(--acb-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--acb-fg);
	cursor: pointer;
	text-align: left;
}
.acb__followup:hover { background: var(--acb-accent); color: #fff; }
.acb__followup:focus-visible { outline: 2px solid var(--acb-accent); outline-offset: 1px; }

/* ── Composer ───────────────────────────────────────────────────────── */
.acb__form {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--acb-line);
}
.acb__input {
	flex: 1 1 auto;
	border: 1px solid var(--acb-line);
	border-radius: 999px;
	padding: 9px 14px;
	font-size: 14px;
	background: var(--acb-bg);
	color: var(--acb-fg);
}
.acb__input:focus-visible { outline: 2px solid var(--acb-accent); outline-offset: 1px; }
.acb__send {
	border: none;
	background: var(--acb-accent);
	color: #fff;
	border-radius: 999px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.acb__send:disabled { opacity: 0.5; cursor: default; }

/* ── Lead form ─────────────────────────────────────────────────────── */
.acb__lead {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--acb-line);
	border-radius: 12px;
	background: var(--acb-bg);
}
.acb__lead-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--acb-fg);
}
.acb__lead-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 12.5px;
	color: var(--acb-fg);
}
.acb__lead-field input,
.acb__lead-field textarea {
	font: inherit;
	font-size: 14px;
	border: 1px solid var(--acb-line);
	border-radius: 8px;
	padding: 7px 10px;
	background: var(--acb-bg);
	color: var(--acb-fg);
}
.acb__lead-field textarea { min-height: 64px; resize: vertical; }
.acb__lead-field input:focus-visible,
.acb__lead-field textarea:focus-visible { outline: 2px solid var(--acb-accent); outline-offset: 1px; }
.acb__lead-consent {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--acb-fg);
	opacity: 0.85;
}
.acb__lead-error { font-size: 12.5px; color: #b42318; min-height: 0; }
.acb__lead-error:empty { display: none; }
.acb__lead-offer { align-self: stretch; }
.acb__lead-submit,
.acb__lead-more,
.acb__lead-cta {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-radius: 999px;
	padding: 9px 16px;
	background: var(--acb-accent);
	color: #fff;
	cursor: pointer;
	align-self: flex-start;
}
.acb__lead-submit:disabled { opacity: 0.5; cursor: default; }
.acb__lead-submit:focus-visible,
.acb__lead-more:focus-visible,
.acb__lead-cta:focus-visible { outline: 2px solid var(--acb-accent); outline-offset: 2px; }
.acb__lead-done {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
	color: var(--acb-fg);
}
.acb__lead-more { background: transparent; color: var(--acb-fg); border: 1px solid var(--acb-accent); }
.acb__lead-more:hover { background: var(--acb-accent); color: #fff; }
.acb__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.acb__launcher { transition: none; }
	.acb__typing span { animation: none; }
}
/* The "middle" launcher sits a fixed fraction up from the bottom edge rather
   than dead centre, where it covered what the visitor was reading. The open
   panel is pinned to the viewport bottom instead of centred on the launcher,
   which would push a 520px panel off-screen from that lower anchor. */
.acb--floating.acb--middle-right,
.acb--floating.acb--middle-left {
	top: auto;
	bottom: 15%;
	transform: none;
}
.acb--floating.acb--middle-right .acb__panel,
.acb--floating.acb--middle-left .acb__panel {
	position: fixed;
	top: auto;
	bottom: 24px;
	transform: none;
}
.acb--floating.acb--middle-right .acb__panel { right: 24px; }
.acb--floating.acb--middle-left  .acb__panel { left: 24px; }