/**
 * HPI Click4Assistance Chat — button styles
 *
 * Fully namespaced under .hpi-chat so nothing leaks into Elementor or the theme.
 * All design decisions live in the token block below for easy maintenance.
 */

/* ------------------------------------------------------------------ *
 * Design tokens
 * ------------------------------------------------------------------ */
.hpi-chat {
	/* Colour */
	--hpi-chat-bg: #f8a800;          /* base + drives the icon knock-out dots   */
	--hpi-chat-bg-hover: #ff9800;    /* hover / focus / active                  */
	--hpi-chat-fg: #ffffff;          /* text + icon                             */
	--hpi-chat-focus-ring: #1a1a1a;  /* visible keyboard focus outline          */

	/* Shape */
	--hpi-chat-radius: 20px;         /* rounded top-left only                    */
	--hpi-chat-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);

	/* Layout */
	--hpi-chat-z: 9990;              /* above content, below OneTrust/Elementor modals */
	--hpi-chat-offset: 0px;          /* distance from the viewport corner        */
	--hpi-chat-pad-y: 14px;
	--hpi-chat-pad-x: 18px;
	--hpi-chat-gap: 10px;
	--hpi-chat-font: 15px;

	/* Motion */
	--hpi-chat-transition: 160ms ease;
}

/* ------------------------------------------------------------------ *
 * Container — pinned to the bottom-right corner
 * ------------------------------------------------------------------ */
.hpi-chat {
	position: fixed;
	right: var(--hpi-chat-offset);
	bottom: var(--hpi-chat-offset);
	/* Respect notches / home indicators on mobile safe areas. */
	right: calc(var(--hpi-chat-offset) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--hpi-chat-offset) + env(safe-area-inset-bottom, 0px));
	z-index: var(--hpi-chat-z);
	margin: 0;
	padding: 0;
	line-height: normal;
	pointer-events: none; /* only the button is interactive */
}

/* ------------------------------------------------------------------ *
 * Button
 * ------------------------------------------------------------------ */
.hpi-chat__button {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--hpi-chat-gap);
	margin: 0;
	padding: var(--hpi-chat-pad-y) var(--hpi-chat-pad-x);
	border: 0;
	/* Square bottom + right edges; only the top-left is rounded. */
	border-radius: var(--hpi-chat-radius) 0 0 0;
	background: var(--hpi-chat-bg);
	color: var(--hpi-chat-fg);
	font-family: inherit;
	font-size: var(--hpi-chat-font);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--hpi-chat-shadow);
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--hpi-chat-transition),
		transform var(--hpi-chat-transition);
}

/* Updating the single token recolours the button AND the SVG dots together. */
.hpi-chat__button:hover,
.hpi-chat__button:focus-visible,
.hpi-chat__button:active {
	--hpi-chat-bg: var(--hpi-chat-bg-hover);
}

.hpi-chat__button:active {
	transform: translateY(1px);
}

/* Visible, high-contrast keyboard focus. Never removed without a replacement. */
.hpi-chat__button:focus-visible {
	outline: 3px solid var(--hpi-chat-focus-ring);
	outline-offset: 2px;
}

/* Fallback for browsers without :focus-visible. */
.hpi-chat__button:focus {
	outline: 3px solid var(--hpi-chat-focus-ring);
	outline-offset: 2px;
}
.hpi-chat__button:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------------ *
 * Icon + label
 * ------------------------------------------------------------------ */
.hpi-chat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--hpi-chat-fg);
}

.hpi-chat__svg {
	display: block;
	width: 22px;
	height: 22px;
}

.hpi-chat__label {
	display: inline-block;
}

/* ------------------------------------------------------------------ *
 * Responsive — desktop breakpoint at 992px
 * Below 992px: compact, icon-only button.
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {
	.hpi-chat__button {
		padding: 14px;          /* square-ish tap target */
		gap: 0;
	}
	.hpi-chat__label {
		/* Visually hidden but kept for the accessibility tree fallback. */
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.hpi-chat__button {
		transition: none;
	}
	.hpi-chat__button:active {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Print — never show the button
 * ------------------------------------------------------------------ */
@media print {
	.hpi-chat {
		display: none !important;
	}
}