/**
 * Chatbot V2 by CraftBook Magazine — interface styles.
 *
 * Identity: an editorial "magazine concierge". Serif display (system) for the
 * name and launcher, clean system sans for the conversation. Everything is
 * scoped under .cbv2 so it cannot leak into (or inherit unexpectedly from) the
 * host theme. Colours are driven by CSS variables; the accent and its derived
 * tints are set inline by the script from the admin setting.
 *
 * Built for Chrome, Firefox, Edge, Safari and Kindle Fire (Silk): spacing uses
 * margins rather than relying on flex gap, and no bleeding-edge CSS features.
 */

/* ---- Design tokens (light) ---- */
.cbv2 {
	--cbv2-accent: #1f6feb;
	--cbv2-accent-ink: #ffffff;
	--cbv2-accent-soft: rgba(31, 111, 235, 0.12);
	--cbv2-accent-ring: rgba(31, 111, 235, 0.30);

	--cbv2-ink: #1b2733;
	--cbv2-muted: #5b6b7a;
	--cbv2-bg: #ffffff;
	--cbv2-bg-soft: #f5f7fa;
	--cbv2-bot-bubble: #eef2f7;
	--cbv2-hairline: #e3e8ee;
	--cbv2-shadow: 0 18px 48px rgba(19, 33, 48, 0.20), 0 2px 8px rgba(19, 33, 48, 0.10);

	--cbv2-serif: Georgia, "Iowan Old Style", Palatino, "Palatino Linotype", "Times New Roman", serif;
	--cbv2-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--cbv2-radius: 16px;
	--cbv2-radius-sm: 11px;

	box-sizing: border-box;
	font-family: var(--cbv2-sans);
	line-height: 1.5;
	color: var(--cbv2-ink);
}
.cbv2 *,
.cbv2 *::before,
.cbv2 *::after { box-sizing: border-box; }

/* ---- Dark theme: automatic and forced ---- */
@media (prefers-color-scheme: dark) {
	.cbv2[data-cbv2-theme="auto"] {
		--cbv2-accent-ink: #0b1017;
		--cbv2-ink: #e7edf3;
		--cbv2-muted: #9fb0c0;
		--cbv2-bg: #131c27;
		--cbv2-bg-soft: #0f1620;
		--cbv2-bot-bubble: #1f2b39;
		--cbv2-hairline: #29323f;
		--cbv2-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
	}
}
.cbv2[data-cbv2-theme="dark"] {
	--cbv2-accent-ink: #0b1017;
	--cbv2-ink: #e7edf3;
	--cbv2-muted: #9fb0c0;
	--cbv2-bg: #131c27;
	--cbv2-bg-soft: #0f1620;
	--cbv2-bot-bubble: #1f2b39;
	--cbv2-hairline: #29323f;
	--cbv2-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ===================================================================
 * Launcher bubble
 * =================================================================== */
.cbv2-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483000;
	display: inline-flex;
	align-items: center;
	border: 0;
	margin: 0;
	padding: 0 18px 0 14px;
	height: 56px;
	border-radius: 30px;
	background: var(--cbv2-accent);
	color: var(--cbv2-accent-ink);
	font-family: var(--cbv2-serif);
	font-size: 16px;
	letter-spacing: 0.2px;
	cursor: pointer;
	box-shadow: var(--cbv2-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.cbv2-launcher:hover { transform: translateY(-2px); }
.cbv2-launcher:active { transform: translateY(0); }
.cbv2-launcher:focus-visible { outline: 3px solid var(--cbv2-accent-ring); outline-offset: 3px; }
.cbv2-launcher__mark {
	display: inline-flex;
	width: 30px;
	height: 30px;
	margin-right: 9px;
	align-items: center;
	justify-content: center;
}
.cbv2-launcher__mark svg { width: 26px; height: 26px; display: block; }
.cbv2-launcher__label { white-space: nowrap; }
.cbv2-launcher[hidden] { display: none; }

/* Hide the launcher label on very small screens to keep a tidy circle */
@media (max-width: 380px) {
	.cbv2-launcher { padding: 0; width: 56px; justify-content: center; }
	.cbv2-launcher__mark { margin-right: 0; }
	.cbv2-launcher__label { display: none; }
}

/* ===================================================================
 * Panel
 * =================================================================== */
.cbv2-panel {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483001;
	width: 384px;
	max-width: calc(100vw - 32px);
	height: 564px;
	max-height: calc(100vh - 96px);
	display: flex;
	flex-direction: column;
	background: var(--cbv2-bg);
	border: 1px solid var(--cbv2-hairline);
	border-radius: var(--cbv2-radius);
	box-shadow: var(--cbv2-shadow);
	overflow: hidden;
	transform-origin: bottom right;
}
.cbv2-panel[hidden] { display: none; }
.cbv2-panel--enter { animation: cbv2-pop 0.22s ease both; }

/* Inline (embedded) mode: sits in the page flow, always open, no launcher */
.cbv2--inline .cbv2-panel {
	/* Inline mode must sit as ordinary in-flow content: 'static' keeps it out
	   of the positioned paint layer, so a sticky/fixed site header (or the
	   WordPress admin bar) always renders above it while scrolling. Using
	   'relative' here, even with z-index:auto, still lets it paint over the
	   header because it comes later in the DOM. */
	position: static;
	right: auto;
	bottom: auto;
	width: 100%;
	max-width: 100%;
	height: 520px;
	max-height: none;
	box-shadow: none;
	z-index: auto;
}
.cbv2--inline .cbv2-launcher { display: none; }

/* Mobile: near full-screen sheet */
@media (max-width: 560px) {
	.cbv2-panel:not(.cbv2--inline .cbv2-panel) {
		right: 12px;
		left: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
		height: auto;
		top: 64px;
		max-height: none;
	}
}

/* ---- Header ---- */
.cbv2-header {
	display: flex;
	align-items: center;
	padding: 12px 12px 12px 14px;
	background: var(--cbv2-bg);
	border-bottom: 1px solid var(--cbv2-hairline);
}
.cbv2-header__avatar {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--cbv2-accent-soft);
	color: var(--cbv2-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cbv2-header__avatar svg { width: 22px; height: 22px; display: block; }
.cbv2-header__titles { flex: 1 1 auto; min-width: 0; }
.cbv2-header__name {
	font-family: var(--cbv2-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cbv2-header__status {
	font-size: 11.5px;
	color: var(--cbv2-muted);
	line-height: 1.3;
	margin-top: 1px;
}
.cbv2-header__status::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 5px;
	border-radius: 50%;
	background: #35c07a;
	vertical-align: middle;
}
.cbv2-iconbtn {
	border: 0;
	background: transparent;
	color: var(--cbv2-muted);
	width: 34px;
	height: 34px;
	margin-left: 2px;
	padding: 0;
	border-radius: 9px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}
.cbv2-iconbtn:hover { background: var(--cbv2-bg-soft); color: var(--cbv2-ink); }
.cbv2-iconbtn:focus-visible { outline: 3px solid var(--cbv2-accent-ring); outline-offset: 2px; }
.cbv2-iconbtn svg { width: 18px; height: 18px; display: block; }

/* ---- Messages ---- */
.cbv2-log {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px 14px 6px;
	background: var(--cbv2-bg-soft);
	-webkit-overflow-scrolling: touch;
}
.cbv2-msg { display: flex; margin-bottom: 14px; animation: cbv2-rise 0.22s ease both; }
.cbv2-msg__avatar {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	margin-right: 8px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--cbv2-accent-soft);
	color: var(--cbv2-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cbv2-msg__avatar svg { width: 16px; height: 16px; display: block; }
.cbv2-bubble {
	max-width: 82%;
	padding: 10px 13px;
	border-radius: var(--cbv2-radius-sm);
	font-size: 14.5px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.cbv2-msg--bot .cbv2-bubble {
	background: var(--cbv2-bot-bubble);
	color: var(--cbv2-ink);
	border-top-left-radius: 4px;
}
.cbv2-msg--user { flex-direction: row-reverse; }
.cbv2-msg--user .cbv2-bubble {
	background: var(--cbv2-accent);
	color: var(--cbv2-accent-ink);
	border-top-right-radius: 4px;
}
.cbv2-msg--user .cbv2-msg__avatar { display: none; }

/* Link buttons inside a bot reply */
.cbv2-links { margin-top: 9px; }
.cbv2-link {
	display: block;
	text-decoration: none;
	color: var(--cbv2-accent);
	background: var(--cbv2-bg);
	border: 1px solid var(--cbv2-hairline);
	border-radius: 10px;
	padding: 9px 11px;
	margin-top: 7px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.cbv2-link:hover { border-color: var(--cbv2-accent); background: var(--cbv2-accent-soft); }
.cbv2-link:active { transform: translateY(1px); }
.cbv2-link:focus-visible { outline: 3px solid var(--cbv2-accent-ring); outline-offset: 2px; }
.cbv2-link__icon { float: right; margin-left: 8px; opacity: 0.7; }

/* ---- Suggestion chips ---- */
.cbv2-chips {
	display: flex;
	flex-wrap: wrap;
	padding: 0 14px 10px;
	background: var(--cbv2-bg-soft);
}
.cbv2-chip {
	border: 1px solid var(--cbv2-hairline);
	background: var(--cbv2-bg);
	color: var(--cbv2-ink);
	border-radius: 20px;
	padding: 7px 13px;
	margin: 0 7px 7px 0;
	font-size: 13px;
	font-family: var(--cbv2-sans);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cbv2-chip:hover { border-color: var(--cbv2-accent); color: var(--cbv2-accent); background: var(--cbv2-accent-soft); }
.cbv2-chip:focus-visible { outline: 3px solid var(--cbv2-accent-ring); outline-offset: 2px; }

/* ---- Typing indicator ---- */
.cbv2-typing { display: inline-flex; align-items: center; padding: 12px 14px; }
.cbv2-typing span {
	width: 7px; height: 7px; margin: 0 2px; border-radius: 50%;
	background: var(--cbv2-muted); display: inline-block;
	animation: cbv2-dot 1.2s infinite ease-in-out;
}
.cbv2-typing span:nth-child(2) { animation-delay: 0.18s; }
.cbv2-typing span:nth-child(3) { animation-delay: 0.36s; }

/* ---- Input ---- */
.cbv2-inputbar {
	display: flex;
	align-items: flex-end;
	padding: 10px 10px 10px 14px;
	border-top: 1px solid var(--cbv2-hairline);
	background: var(--cbv2-bg);
}
.cbv2-input {
	flex: 1 1 auto;
	resize: none;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--cbv2-ink);
	font-family: var(--cbv2-sans);
	font-size: 14.5px;
	line-height: 1.4;
	max-height: 96px;
	padding: 8px 6px 8px 0;
}
.cbv2-input::placeholder { color: var(--cbv2-muted); }
.cbv2-send {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	margin-left: 6px;
	border: 0;
	border-radius: 50%;
	background: var(--cbv2-accent);
	color: var(--cbv2-accent-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease, transform 0.12s ease;
}
.cbv2-send svg { width: 18px; height: 18px; display: block; }
.cbv2-send:hover { transform: translateY(-1px); }
.cbv2-send:focus-visible { outline: 3px solid var(--cbv2-accent-ring); outline-offset: 2px; }
.cbv2-send[disabled] { opacity: 0.45; cursor: default; transform: none; }

/* ---- Footer ---- */
.cbv2-footer {
	padding: 7px 14px 9px;
	text-align: center;
	font-size: 11px;
	color: var(--cbv2-muted);
	background: var(--cbv2-bg);
	border-top: 1px solid var(--cbv2-hairline);
}
.cbv2-footer a { color: var(--cbv2-muted); text-decoration: none; }
.cbv2-footer a:hover { color: var(--cbv2-accent); text-decoration: underline; }

/* Screen-reader-only utility */
.cbv2-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Animations ---- */
@keyframes cbv2-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes cbv2-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cbv2-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.cbv2 *,
	.cbv2 *::before,
	.cbv2 *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Legacy noscript / stub fallbacks from earlier phases */
.cbv2-noscript { margin: 0.5rem 0; padding: 0.75rem 1rem; border-radius: 10px; background: #f4f4f5; color: #333; font-size: 0.95rem; }

/* In-message body column and contextual suggestion chips under a reply */
.cbv2-msg__body { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.cbv2-msg--user .cbv2-msg__body { align-items: flex-end; }
.cbv2-msg .cbv2-chips { padding: 0; margin-top: 9px; background: transparent; }