/* WebinarIgnition — shared agent focus mode.
 *
 * The single source for the focus look on every surface (admin agent standalone +
 * embed, later the frontend prompter). The logic lives in assets/wi-agent-shared.js
 * (window.WIAgentShared): it toggles ".wi-agent-focus" on [data-wi-focus-root] and
 * this file reacts — it never names a surface-specific class.
 *
 * On tablet/desktop the focused work area locks to the viewport ("there is nothing
 * to scroll to"): only the header/intro is hidden, the chat and the facts sidebar
 * stay visible and scroll internally. Below 561px the layout is untouched: the body
 * scrolls and the composer keeps its normal place.
 */

[data-wi-focus-root].wi-agent-focus [data-wi-focus-hide] {
	display: none !important;
}

.wi-agent-focus-restore {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 32px) + 12px);
	right: 16px;
	z-index: 100001;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 999px;
	background: #fff;
	color: #2271b1;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.wi-agent-focus-restore:hover,
.wi-agent-focus-restore:focus-visible {
	border-color: #2271b1;
	background: #f0f6fc;
}

/* The optional toggle button (e.g. in the agent toolbar): show one icon at a time and
   pop it briefly when the focus turns on, so the switch is visible. */
[data-wi-focus-toggle] .wi-agent-focus-icon--on,
[data-wi-focus-toggle] .wi-agent-focus-icon--off {
	font-size: 17px;
	line-height: 1;
}

@keyframes wi-agent-focus-pop {
	0% { transform: scale(0.5); opacity: 0.2; }
	60% { transform: scale(1.28); }
	100% { transform: scale(1); opacity: 1; }
}

[data-wi-focus-toggle].wi-agent-focus-pop {
	animation: wi-agent-focus-pop 0.5s ease;
}

/* Inside the chromeless editor iframe (wi_embed=1) the admin bar is hidden, so the
   floating restore button sits at the very top instead of below a bar that is not
   there. */
body.wi-agent-admin-embed .wi-agent-focus-restore {
	top: 12px;
}

@media (min-width: 561px) {
	[data-wi-focus-root].wi-agent-focus {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 99998;
		max-width: none !important;
		margin: 0 !important;
		padding: 12px 18px;
		box-sizing: border-box;
		background: #fff;
		overflow: hidden;
	}
	/* Skip the WP admin bar on the standalone page (32px; 46px on narrow screens). */
	body.admin-bar [data-wi-focus-root].wi-agent-focus {
		top: 32px;
	}
	/* The embed hides the admin bar above — no gap there, even if body still carries
	   the admin-bar class. */
	body.wi-agent-admin-embed [data-wi-focus-root].wi-agent-focus {
		top: 0;
	}
	/* No background scroll while the focus is open; html AND body, because the viewport
	   scrollbar is driven by html. */
	html:has([data-wi-focus-root].wi-agent-focus),
	body:has([data-wi-focus-root].wi-agent-focus) {
		overflow: hidden;
	}
}

@media (min-width: 561px) and (max-width: 782px) {
	body.admin-bar:not(.wi-agent-admin-embed) [data-wi-focus-root].wi-agent-focus {
		top: 46px;
	}
}