/**
 * Chatbot launcher and panel styling.
 *
 * Honours the administrator's configured primary colour through the
 * `--pmproai-primary` custom property, set per page by
 * Intuera\PMProAI\Frontend\Assets via wp_add_inline_style() on this
 * stylesheet's own handle. A default is declared here too, so the widget
 * still looks correct if that inline rule is ever missing.
 *
 * Responsive down to phone widths without introducing horizontal scrolling:
 * the panel's width is clamped to the viewport, and its position collapses
 * to full-bleed with margins below 480px.
 */

.pmpro-ai-assistant {
	--pmproai-primary: #2b6cb0;
	--pmproai-on-primary: #ffffff;
	--pmproai-surface: #ffffff;
	--pmproai-surface-text: #1a1a1a;
	--pmproai-assistant-bubble: #f1f2f4;
	--pmproai-user-bubble: #2b6cb0;
	--pmproai-user-bubble-text: #ffffff;
	--pmproai-border: #e2e2e2;
	--pmproai-header: var(--pmproai-primary);
	--pmproai-header-text: var(--pmproai-on-primary);
	--pmproai-radius: 12px;
	--pmproai-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pmproai-font-size: 14px;
	--pmproai-launcher-size: 56px;
	--pmproai-panel-width: 380px;
	--pmproai-panel-height: 560px;
	--pmproai-offset: 16px;
	--pmproai-input-bg: #ffffff;
	--pmproai-input-text: #1a1a1a;
	--pmproai-input-border: #cccccc;

	position: fixed;
	right: var(--pmproai-offset);
	bottom: var(--pmproai-offset);
	z-index: 999999;
	font-family: var(--pmproai-font);
	font-size: var(--pmproai-font-size);
	line-height: 1.4;
	box-sizing: border-box;
}

.pmpro-ai-assistant *,
.pmpro-ai-assistant *::before,
.pmpro-ai-assistant *::after {
	box-sizing: border-box;
}

/*
 * Defend against the host theme.
 *
 * This widget renders inside somebody else's stylesheet, and the elements it
 * uses are exactly the ones themes style most heavily: the panel title is an
 * h2, the composer is a textarea, the controls are buttons. Without this,
 * a theme's serif headings and dark input fields are inherited and the widget
 * looks broken in a way no setting in the admin can fix — because the setting
 * was never the thing deciding it.
 *
 * Only typography and colour are reset. Layout is left alone, since this
 * stylesheet sets what it needs explicitly.
 */
.pmpro-ai-assistant h2,
.pmpro-ai-assistant h3,
.pmpro-ai-assistant p,
.pmpro-ai-assistant button,
.pmpro-ai-assistant textarea,
.pmpro-ai-assistant input,
.pmpro-ai-assistant a,
.pmpro-ai-assistant ul,
.pmpro-ai-assistant li {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}

.pmpro-ai-launcher {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var( --pmproai-primary );
	color: var( --pmproai-on-primary );
	border: none;
	border-radius: 999px;
	min-height: var( --pmproai-launcher-size );
	padding: 0.75rem 1.25rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
}

.pmpro-ai-launcher:hover {
	filter: brightness( 0.95 );
}

.pmpro-ai-launcher:focus-visible,
.pmpro-ai-panel__close:focus-visible,
.pmpro-ai-send:focus-visible,
.pmpro-ai-input:focus-visible,
.pmpro-ai-signin-action a:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 2px;
}

.pmpro-ai-launcher__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.pmpro-ai-launcher__icon img,
.pmpro-ai-launcher__icon svg {
	width: 100%;
	height: 100%;
}

.pmpro-ai-panel {
	position: fixed;
	right: var( --pmproai-offset );
	bottom: calc( var( --pmproai-launcher-size ) + var( --pmproai-offset ) + 0.75rem );
	width: min( var( --pmproai-panel-width ), calc( 100vw - 2rem ) );
	/*
	 * Fixed height, not max-height: the panel keeps the configured size
	 * whether it holds one message or forty, so the composer never walks up
	 * and down the screen as the conversation grows. Still clamped to the
	 * viewport, so a tall setting cannot push the input off a short screen.
	 */
	height: min( var( --pmproai-panel-height ), calc( 100vh - 7rem ) );
	display: flex;
	flex-direction: column;
	background: var( --pmproai-surface );
	color: var( --pmproai-surface-text );
	border-radius: var( --pmproai-radius );
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.22 );
	overflow: hidden;
}

.pmpro-ai-panel[hidden] {
	display: none;
}

.pmpro-ai-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.85rem 1rem;
	background: var( --pmproai-header );
	color: var( --pmproai-header-text );
	flex: 0 0 auto;
}

.pmpro-ai-panel__title {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	/* Explicit: the title is an h2 and themes colour headings aggressively. */
	color: var( --pmproai-header-text );
	overflow-wrap: break-word;
}

.pmpro-ai-panel__close {
	background: transparent;
	border: none;
	color: inherit;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	flex: 0 0 auto;
}

.pmpro-ai-panel__close:hover {
	background: rgba( 255, 255, 255, 0.15 );
}

.pmpro-ai-panel__body,
.pmpro-ai-panel__transcript {
	flex: 1 1 auto;
	overflow-y: auto;
	/*
	 * min-height: 0 is load-bearing. A flex item's default minimum size is
	 * its content, so without this the transcript refuses to shrink below the
	 * full conversation, the panel grows past its fixed height, and
	 * overflow-y: auto silently never engages.
	 */
	min-height: 0;
	overscroll-behavior: contain;
	padding: 1rem;
}

.pmpro-ai-signin-message {
	margin: 0 0 1rem;
}

.pmpro-ai-signin-action a {
	color: var( --pmproai-primary );
	font-weight: 600;
}

.pmpro-ai-message {
	margin: 0 0 0.75rem;
	padding: 0.55rem 0.75rem;
	border-radius: 10px;
	max-width: 90%;
	overflow-wrap: break-word;
	word-break: break-word;
	white-space: pre-wrap;
}

.pmpro-ai-message--user {
	margin-left: auto;
	background: var( --pmproai-user-bubble );
	color: var( --pmproai-user-bubble-text );
}

.pmpro-ai-message--assistant {
	margin-right: auto;
	background: var( --pmproai-assistant-bubble );
	color: var( --pmproai-surface-text );
}

.pmpro-ai-citations {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.85em;
}

.pmpro-ai-citations__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
	opacity: 0.75;
}

.pmpro-ai-citations li {
	margin-bottom: 0.25rem;
}

.pmpro-ai-citations a {
	color: var( --pmproai-primary );
	text-decoration: underline;
	overflow-wrap: break-word;
}

.pmpro-ai-panel__status {
	min-height: 1.2em;
	padding: 0 1rem;
	font-size: 0.85em;
	color: #555555;
	flex: 0 0 auto;
}

.pmpro-ai-panel__form {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	padding: 0.75rem;
	border-top: 1px solid var( --pmproai-border );
	flex: 0 0 auto;
}

.pmpro-ai-input {
	flex: 1 1 auto;
	resize: none;
	min-height: 2.5rem;
	max-height: 6rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid var( --pmproai-input-border );
	border-radius: 8px;
	font: inherit;
	/* Both are required. Setting only the text colour is what left the field
	   dark on themes that style inputs, with unreadable text. */
	background: var( --pmproai-input-bg );
	color: var( --pmproai-input-text );
}

.pmpro-ai-input::placeholder {
	color: var( --pmproai-input-text );
	opacity: 0.55;
}

.pmpro-ai-send {
	flex: 0 0 auto;
	background: var( --pmproai-primary );
	color: var( --pmproai-on-primary );
	border: none;
	border-radius: 8px;
	padding: 0 1rem;
	height: 2.5rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pmpro-ai-send[disabled],
.pmpro-ai-input[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.pmpro-ai-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

@media ( max-width: 480px ) {
	.pmpro-ai-assistant {
		right: 0.5rem;
		bottom: 0.5rem;
	}

	.pmpro-ai-panel {
		right: 0.5rem;
		left: 0.5rem;
		bottom: 4.75rem;
		width: auto;
		height: calc( 100vh - 6rem );
	}
}

@media ( prefers-color-scheme: dark ) {
	.pmpro-ai-assistant {
		--pmproai-surface: #1f2124;
		--pmproai-surface-text: #f2f2f2;
		--pmproai-assistant-bubble: #2c2f33;
		--pmproai-border: #3a3d41;
	}

	.pmpro-ai-input {
		background: #17181a;
		color: var( --pmproai-surface-text );
		border-color: var( --pmproai-border );
	}

	.pmpro-ai-panel__status {
		color: #b7b7b7;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pmpro-ai-assistant * {
		transition: none !important;
	}
}

/*
 * Isolation layer.
 *
 * Everything above styles the widget. This re-asserts the handful of
 * properties a host theme must not be allowed to decide, and it exists
 * because specificity is not a contest this stylesheet can win: the widget
 * renders on sites we have never seen, and a theme rule like
 * `.entry-content textarea` already outranks a single class. Raising our own
 * specificity only moves the goalposts — the next theme uses an id.
 *
 * So these declarations are marked important, deliberately and narrowly.
 * Only colour, background, font and border are covered: the properties that
 * decide whether the widget is readable. Layout is left to the rules above,
 * where the cascade behaves normally and the administrator's settings apply
 * without a fight.
 *
 * Every value still comes from a custom property, so the admin settings
 * remain in control — this changes who wins, not what is chosen.
 */
.pmpro-ai-assistant .pmpro-ai-panel {
	background: var( --pmproai-surface ) !important;
	color: var( --pmproai-surface-text ) !important;
}

.pmpro-ai-assistant .pmpro-ai-panel__header {
	background: var( --pmproai-header ) !important;
	color: var( --pmproai-header-text ) !important;
}

.pmpro-ai-assistant .pmpro-ai-panel__title {
	color: var( --pmproai-header-text ) !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.pmpro-ai-assistant textarea.pmpro-ai-input {
	background: var( --pmproai-input-bg ) !important;
	background-image: none !important;
	color: var( --pmproai-input-text ) !important;
	border: 1px solid var( --pmproai-input-border ) !important;
	font-family: inherit !important;
	font-size: inherit !important;
	box-shadow: none !important;
	text-shadow: none !important;
	-webkit-text-fill-color: var( --pmproai-input-text ) !important;
}

.pmpro-ai-assistant textarea.pmpro-ai-input::placeholder {
	color: var( --pmproai-input-text ) !important;
	opacity: 0.55 !important;
	-webkit-text-fill-color: var( --pmproai-input-text ) !important;
}

.pmpro-ai-assistant button.pmpro-ai-send {
	background: var( --pmproai-primary ) !important;
	color: var( --pmproai-on-primary ) !important;
	border: none !important;
	font-family: inherit !important;
	text-transform: none !important;
}

.pmpro-ai-assistant .pmpro-ai-message--assistant {
	background: var( --pmproai-assistant-bubble ) !important;
	color: var( --pmproai-surface-text ) !important;
}

.pmpro-ai-assistant .pmpro-ai-message--user {
	background: var( --pmproai-user-bubble ) !important;
	color: var( --pmproai-user-bubble-text ) !important;
}

.pmpro-ai-assistant button.pmpro-ai-launcher {
	background: var( --pmproai-primary ) !important;
	color: var( --pmproai-on-primary ) !important;
	font-family: inherit !important;
	text-transform: none !important;
}