/*
 * Captivise Homepage Router — frontend styles.
 *
 * Layout variables come from inline CSS injected by the plugin, so margins
 * and max-width are configurable from the admin screen without re-saving CSS.
 *
 * Three chat styles share the same DOM; classes on the wrapper toggle the
 * visual treatment.
 */

/* ---------------------------------------------------------------------------
 * Layout vars (overridden inline by the plugin)
 * ------------------------------------------------------------------------ */
:root {
	--captivise-hpr-margin-top: 24px;
	--captivise-hpr-margin-bottom: 24px;
	--captivise-hpr-max-width: 720px;
}

/* ---------------------------------------------------------------------------
 * Shared: tighten GF's default full-viewport assumptions inside theme wrap
 * ------------------------------------------------------------------------ */
body.captivise-hpr-home #gform-conversational.captivise-hpr-themed {
	min-height: auto;
	padding-top: var(--captivise-hpr-margin-top);
	padding-bottom: var(--captivise-hpr-margin-bottom);
}

body.captivise-hpr-home #gform-conversational.captivise-hpr-themed .gform-conversational__screens {
	min-height: auto;
	height: auto;          /* GF sets a fixed height; release it inside the theme */
	overflow: visible;     /* GF sets overflow:auto which causes the scrollbar */
	justify-content: flex-start;
	max-width: var(--captivise-hpr-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	width: 100%;
}

body.captivise-hpr-home #gform-conversational.captivise-hpr-themed .gform-conversational__screen,
body.captivise-hpr-home #gform-conversational.captivise-hpr-themed .gform-conversational__screen-wrapper,
body.captivise-hpr-home #gform-conversational.captivise-hpr-themed .gform-conversational__screen-content {
	min-height: auto;
	height: auto;
	overflow: visible;
}

/* ---------------------------------------------------------------------------
 * Hide breadcrumbs on the swapped homepage only.
 * Covers Yoast, Rank Math, WooCommerce, and the common theme breadcrumb
 * containers (Astra, GeneratePress, Kadence, OceanWP, Storefront, Blocksy).
 * If your theme uses a different class/ID, add it via Customizer CSS.
 * ------------------------------------------------------------------------ */
body.captivise-hpr-home .breadcrumbs,
body.captivise-hpr-home .breadcrumb,
body.captivise-hpr-home nav.breadcrumb,
body.captivise-hpr-home nav.breadcrumbs,
body.captivise-hpr-home .yoast-breadcrumbs,
body.captivise-hpr-home #breadcrumbs,
body.captivise-hpr-home .rank-math-breadcrumb,
body.captivise-hpr-home .woocommerce-breadcrumb,
body.captivise-hpr-home .ast-breadcrumbs,
body.captivise-hpr-home .ast-breadcrumbs-wrapper,
body.captivise-hpr-home .generate-breadcrumbs,
body.captivise-hpr-home .kadence-breadcrumbs,
body.captivise-hpr-home .oceanwp-breadcrumb,
body.captivise-hpr-home .storefront-breadcrumb,
body.captivise-hpr-home .ct-breadcrumbs,
body.captivise-hpr-home .site-breadcrumbs,
body.captivise-hpr-home [class*="breadcrumb"][class*="wrapper"] {
	display: none !important;
}

body.captivise-hpr-home #gform-conversational.captivise-hpr-themed .gform-conversational__screen-wrapper {
	padding-top: 0;
}

/* Intro text container. Hidden when empty so we don't leave a gap. */
.captivise-hpr-intro {
	margin: 0 0 1.25rem 0;
	line-height: 1.5;
	max-width: var(--captivise-hpr-max-width);
	margin-left: auto;
	margin-right: auto;
	padding: 0 1rem;
}
.captivise-hpr-intro:empty {
	display: none;
}

/* Typing indicator (used when enabled in settings) */
.captivise-hpr-typing {
	display: none;
	gap: 4px;
	align-items: center;
	padding: 8px 12px;
	border-radius: 12px;
	background: #f1f3f5;
	width: fit-content;
	margin: 0 0 1rem 0;
}
.captivise-hpr-typing.is-active {
	display: inline-flex;
}
.captivise-hpr-typing span {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #888;
	animation: captivise-hpr-typing 1.2s infinite ease-in-out;
}
.captivise-hpr-typing span:nth-child(2) { animation-delay: 0.15s; }
.captivise-hpr-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes captivise-hpr-typing {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * Chat style: bubbles (visual only — no history)
 * ------------------------------------------------------------------------ */
body.captivise-hpr-style-bubbles #gform-conversational.captivise-hpr-themed .gform-conversational__screen-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: stretch;
}
body.captivise-hpr-style-bubbles .captivise-hpr-intro:not(:empty) {
	background: #f1f3f5;
	color: #1d1d1f;
	padding: 0.875rem 1.125rem;
	border-radius: 18px 18px 18px 4px;
	max-width: min(85%, var(--captivise-hpr-max-width));
	margin: 0 auto 0 0;
	width: fit-content;
}
body.captivise-hpr-style-bubbles .gform_wrapper .gfield {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	padding: 1rem 1.125rem;
	border-radius: 18px 18px 4px 18px;
	max-width: min(85%, var(--captivise-hpr-max-width));
	margin: 0 0 0 auto;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* ---------------------------------------------------------------------------
 * Chat style: history — base column layout
 * History container, intro container, and form field all stack in ONE column.
 * Each bubble (history Q / history A / current intro / current field) is a
 * flex item with its own alignment (left for AI, right for user).
 * ------------------------------------------------------------------------ */
.captivise-hpr-history {
	display: none;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0 auto;
	width: 100%;
	max-width: var(--captivise-hpr-max-width);
	padding: 0 1rem;
	box-sizing: border-box;
}
body.captivise-hpr-style-history .captivise-hpr-history {
	display: flex;
}
.captivise-hpr-history__row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
}
.captivise-hpr-history__q {
	background: #f1f3f5;
	color: #1d1d1f;
	padding: 0.75rem 1rem;
	border-radius: 18px 18px 18px 4px;
	max-width: 85%;
	width: fit-content;
	align-self: flex-start;
}
.captivise-hpr-history__a {
	background: #2563eb;
	color: #fff;
	padding: 0.75rem 1rem;
	border-radius: 18px 18px 4px 18px;
	max-width: 85%;
	width: fit-content;
	align-self: flex-end;
}

/* History mode: turn the screens container into a real chat column. */
body.captivise-hpr-style-history #gform-conversational.captivise-hpr-themed .gform-conversational__screens {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	max-width: var(--captivise-hpr-max-width);
	margin: 0 auto;
}
body.captivise-hpr-style-history #gform-conversational.captivise-hpr-themed .gform-conversational__screen-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	align-items: stretch;
}
/* Current intro becomes an AI bubble (left-aligned). */
body.captivise-hpr-style-history .captivise-hpr-intro {
	margin: 0;
	padding: 0;
	max-width: 100%;
	width: 100%;
}
body.captivise-hpr-style-history .captivise-hpr-intro:not(:empty) {
	background: #f1f3f5;
	color: #1d1d1f;
	padding: 0.875rem 1.125rem;
	border-radius: 18px 18px 18px 4px;
	max-width: 85%;
	width: fit-content;
	margin: 0 auto 0 0;
}
/* Current field becomes a user-side bubble (right-aligned). */
body.captivise-hpr-style-history .gform_wrapper .gfield {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	padding: 1rem 1.125rem;
	border-radius: 18px 18px 4px 18px;
	max-width: 85%;
	margin: 0 0 0 auto;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Layout modes (only active when chat_style = history)
 * ------------------------------------------------------------------------ */

/* Stacked (default): history container on top, current intro+field below. */
body.captivise-hpr-layout-stacked.captivise-hpr-style-history #gform-conversational.captivise-hpr-themed .gform-conversational__screens {
	flex-direction: column;
}

/* Reverse: current intro+field on top, history scrolls below. */
body.captivise-hpr-layout-reverse.captivise-hpr-style-history #gform-conversational.captivise-hpr-themed .gform-conversational__screens {
	flex-direction: column;
}
body.captivise-hpr-layout-reverse.captivise-hpr-style-history .captivise-hpr-history {
	order: 99;
}

/* Collapsed: history hidden behind a toggle button. JS shows/hides .is-open. */
body.captivise-hpr-layout-collapsed.captivise-hpr-style-history .captivise-hpr-history {
	display: none;
}
body.captivise-hpr-layout-collapsed.captivise-hpr-style-history .captivise-hpr-history.is-open {
	display: flex;
}
.captivise-hpr-history-toggle {
	display: none;
	align-self: flex-start;
	background: transparent;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.875rem;
	color: #1d1d1f;
	cursor: pointer;
	margin: 0 auto 0.75rem 0;
}
.captivise-hpr-history-toggle:hover {
	background: #f1f3f5;
}
body.captivise-hpr-layout-collapsed.captivise-hpr-style-history .captivise-hpr-history-toggle {
	display: inline-flex;
}

/* Inline: side-by-side history + current, desktop only.
   On mobile it falls back to stacked automatically (media query below). */
@media (min-width: 900px) {
	body.captivise-hpr-layout-inline.captivise-hpr-style-history #gform-conversational.captivise-hpr-themed .gform-conversational__screens {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
		max-width: calc(var(--captivise-hpr-max-width) * 1.4);
		align-items: start;
	}
	body.captivise-hpr-layout-inline.captivise-hpr-style-history .captivise-hpr-history {
		grid-column: 1;
		padding: 0;
		max-height: 70vh;
		overflow-y: auto;
	}
	body.captivise-hpr-layout-inline.captivise-hpr-style-history .gform-conversational__screen-content {
		grid-column: 2;
	}
}

/* ---------------------------------------------------------------------------
 * AI bubble text modes
 * ------------------------------------------------------------------------ */

/* "hidden" — suppress the current intro AI bubble entirely. */
body.captivise-hpr-bubble-hidden .captivise-hpr-intro {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Mobile: bubbles fill width minus small side padding (per Aaron's spec)
 * ------------------------------------------------------------------------ */
@media (max-width: 600px) {
	body.captivise-hpr-style-bubbles .gform_wrapper .gfield,
	body.captivise-hpr-style-bubbles .captivise-hpr-intro:not(:empty),
	body.captivise-hpr-style-history .gform_wrapper .gfield,
	body.captivise-hpr-style-history .captivise-hpr-intro:not(:empty),
	body.captivise-hpr-style-history .captivise-hpr-history__q,
	body.captivise-hpr-style-history .captivise-hpr-history__a {
		max-width: calc(100% - 1rem);
	}
	body.captivise-hpr-style-history .captivise-hpr-history,
	body.captivise-hpr-style-history #gform-conversational.captivise-hpr-themed .gform-conversational__screens,
	body.captivise-hpr-style-history #gform-conversational.captivise-hpr-themed .gform-conversational__screen-content {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	/* Inline layout falls back to stacked on mobile. */
	body.captivise-hpr-layout-inline.captivise-hpr-style-history #gform-conversational.captivise-hpr-themed .gform-conversational__screens {
		display: flex !important;
		grid-template-columns: none !important;
		flex-direction: column !important;
	}
}