/**
 * 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; }

/* ── 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; }

@media (prefers-reduced-motion: reduce) {
	.acb__launcher { transition: none; }
	.acb__typing span { animation: none; }
}