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

/* ---------------------------------------------------------------------------
 * Hide WooCommerce handheld footer bar (cart overlay) on swapped homepage.
 * ------------------------------------------------------------------------ */
body.captivise-hpr-home .storefront-handheld-footer-bar,
body.captivise-hpr-home .wc-handheld-footer-bar,
body.captivise-hpr-home .handheld-footer-bar {
	display: none !important;
}

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

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

/* ---------------------------------------------------------------------------
 * Pill bar — editable answer summary
 *
 * Fixed panel that slides up above the GF nav bar when the toggle is clicked.
 * Hidden by default (drawer.hidden = true set in JS).
 * ------------------------------------------------------------------------ */
.captivise-hpr-drawer {
	position: fixed;
	bottom: var(--gf-convo-nav-bar-placeholder, 64px);
	left: 0;
	right: 0;
	max-height: 50vh;
	overflow-y: auto;
	background: #ffffff;
	border-top: 1px solid #e2e5ea;
	box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12);
	padding: 1.25rem 1.5rem 1.5rem;
	z-index: 9999;
	-webkit-overflow-scrolling: touch;
}
.captivise-hpr-drawer__list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1.25rem;
	align-items: baseline;
}
.captivise-hpr-drawer__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.captivise-hpr-drawer__answer {
	font-size: 0.95rem;
	font-weight: 500;
	color: #111827;
	margin: 0;
	word-break: break-word;
}

/* Toggle button — hidden until first answer via --hidden modifier class */
body .captivise-hpr-history-toggle--hidden {
	display: none !important;
}
body .captivise-hpr-history-toggle {
	display: inline-flex !important;
	align-items: center !important;
	background: #edf1ffe6 !important;
	background-color: #edf1ff !important;
	border: 1px solid #c7d2fe !important;
	border-radius: 999px !important;
	padding: 6px 16px !important;
	font-size: 0.82rem !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	color: #3730a3 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: background 0.12s ease, border-color 0.12s ease;
	margin-left: 8px;
	text-transform: none !important;
	letter-spacing: normal !important;
	min-height: 0 !important;
	height: auto !important;
	box-shadow: none !important;
}
body .captivise-hpr-history-toggle:hover {
	background: #e0e7ff !important;
	background-color: #e0e7ff !important;
	border-color: #a5b4fc !important;
	color: #3730a3 !important;
}
body .captivise-hpr-history-toggle:focus-visible {
	outline: 2px solid #6366f1 !important;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Tooltips — ⓘ icon next to field labels
 * ------------------------------------------------------------------------ */
.captivise-hpr-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	vertical-align: middle;
}
.captivise-hpr-tooltip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #374151;
	font-size: 0.72rem;
	font-style: normal;
	cursor: pointer;
	line-height: 1;
	transition: background 0.12s;
	user-select: none;
}
.captivise-hpr-tooltip__icon:hover,
.captivise-hpr-tooltip.is-open .captivise-hpr-tooltip__icon {
	background: #3b6aeb;
	color: #fff;
}
.captivise-hpr-tooltip__bubble {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #1f2937;
	color: #f9fafb;
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.4;
	padding: 8px 12px;
	border-radius: 8px;
	white-space: normal;
	width: max-content;
	max-width: 260px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
	z-index: 100;
	pointer-events: none;
}
.captivise-hpr-tooltip__bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1f2937;
}
.captivise-hpr-tooltip.is-open .captivise-hpr-tooltip__bubble {
	display: block;
}
@media (max-width: 480px) {
	.captivise-hpr-tooltip__bubble {
		max-width: 200px;
		left: 0;
		transform: none;
	}
	.captivise-hpr-tooltip__bubble::after {
		left: 14px;
		transform: none;
	}
}

/* ── Mobile: 95% width ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
	body.captivise-hpr-home #gform-conversational.captivise-hpr-themed .gform-conversational__screens,
	body.captivise-hpr-home #gform-conversational.captivise-hpr-themed .gform-conversational__screen-wrapper {
		width: 95% !important;
		max-width: 95% !important;
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
		box-sizing: border-box !important;
	}
	/* Dropdown: full width on mobile, white-space nowrap on option text */
	#gform-conversational .captivise-hpr-dd-sel,
	.gform_wrapper .captivise-hpr-dd-sel,
	.captivise-hpr-dd-sel {
		white-space: normal !important;
		word-break: break-word !important;
	}
}

/* ── Desktop: ensure option text doesn't truncate ───────────────────────── */
@media (min-width: 769px) {
	#gform-conversational .captivise-hpr-dd-sel,
	.gform_wrapper .captivise-hpr-dd-sel,
	.captivise-hpr-dd-sel {
		min-width: 100% !important;
		white-space: normal !important;
	}
	/* Force option elements to show full text */
	#gform-conversational .captivise-hpr-dd-sel option,
	.captivise-hpr-dd-sel option {
		white-space: normal !important;
	}
}


/* ── Captivise GFCF slider dropdown ────────────────────────────────────── */
/* Hidden utility — beats all GFCF display overrides */
html body #gform-conversational .captivise-hpr-hidden,
html body .gform_wrapper .captivise-hpr-hidden,
html body .captivise-hpr-hidden,
.captivise-hpr-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Slider dropdown — scoped to gform wrapper to beat GFCF resets */
#gform-conversational .captivise-hpr-dd-wrap,
.gform_wrapper .captivise-hpr-dd-wrap,
.captivise-hpr-dd-wrap {
    /* display is controlled by .captivise-hpr-hidden — do NOT set display here */
    margin: 16px 0 8px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#gform-conversational .captivise-hpr-dd-sel,
.gform_wrapper .captivise-hpr-dd-sel,
.captivise-hpr-dd-sel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 40px 12px 16px !important;
    margin: 0 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: #1e293b !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: 0 !important;
}
#gform-conversational .captivise-hpr-dd-sel:focus,
.gform_wrapper .captivise-hpr-dd-sel:focus,
.captivise-hpr-dd-sel:focus {
    outline: none !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important;
}
#gform-conversational .captivise-hpr-dd-toggle,
.gform_wrapper .captivise-hpr-dd-toggle,
.captivise-hpr-dd-toggle {
    display: inline-block !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #4f46e5 !important;
    font-size: 13px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    line-height: 1.4 !important;
}

/* ── Captivise GFCF date quick-picks ───────────────────────────────────── */
.captivise-hpr-date-wrap {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.captivise-hpr-date-btn {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 14px; border: 1px solid #d1d5db; border-radius: 8px;
    background: #f8fafc; cursor: pointer; font-size: 13px; font-weight: 600;
    color: #1e293b; line-height: 1.2; transition: background .15s, border-color .15s;
}
.captivise-hpr-date-btn:hover { background: #ede9fe; border-color: #4f46e5; color: #4f46e5; }
.captivise-hpr-date-sub { font-size: 11px; font-weight: 400; color: #6b7280; margin-top: 2px; }

/* ── Slider/dropdown toggle button ──────────────────────────────────────── */
.captivise-hpr-dd-toggle {
    display: block; margin-top: 8px;
    background: none; border: none; padding: 2px 0;
    color: #4f46e5; font-size: 12px; cursor: pointer;
    text-decoration: underline; text-align: left;
}
.captivise-hpr-dd-toggle:hover { color: #4338ca; }

/* ── Date relative-range dropdown (alongside quick-pick buttons) ────────── */
#gform-conversational .captivise-hpr-date-range-wrap,
.gform_wrapper .captivise-hpr-date-range-wrap,
.captivise-hpr-date-range-wrap {
    display: block !important;
    margin: 4px 0 16px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#gform-conversational .captivise-hpr-date-range-sel,
.gform_wrapper .captivise-hpr-date-range-sel,
.captivise-hpr-date-range-sel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 40px 12px 16px !important;
    margin: 0 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: #1e293b !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: 0 !important;
}
#gform-conversational .captivise-hpr-date-range-sel:focus,
.gform_wrapper .captivise-hpr-date-range-sel:focus,
.captivise-hpr-date-range-sel:focus {
    outline: none !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important;
}
@media (max-width: 768px) {
    #gform-conversational .captivise-hpr-date-range-sel,
    .captivise-hpr-date-range-sel {
        white-space: normal !important;
        word-break: break-word !important;
    }
}