/**
 * Flow Editorial Workflow — Review Page layout styles.
 * Imported by src/review-page/index.js; extracted to build/review-page/style-index.css.
 *
 * Only page-level layout rules live here — component styles live in
 * bar.scss and sidebar.scss, injected directly into their Shadow DOM roots.
 */

@use './tokens' as *;

// `--wp-admin-theme-color` (plus rgb / darker variants) is injected by
// `Assets::get_admin_theme_inline_css()` based on the user's wp-admin
// colour scheme. Individual rules use `var(... , #fallback)` so missing
// vars still render — no `:root` declaration needed here.

// Push content below the fixed bar. The comments sidebar lives on the
// RIGHT and is open by default on desktop, so default margin-right is
// reserved. The activity sidebar lives on the LEFT and is closed by
// default, so default margin-left is 0; the `--activity-open` modifier
// pushes content right when it slides in.
body.flow-review-page {
	padding-top: $bar-height !important;
	margin-right: $sidebar-width !important;
	transition: margin-left 180ms ease, margin-right 180ms ease;
}

body.flow-review-page--comments-closed {
	margin-right: 0 !important;
}

body.flow-review-page--activity-open {
	margin-left: $activity-sidebar-width !important;
}

// Device preview mode (Pro): iframe is centered + clamped to a fixed
// designed width, so the surrounding canvas needs a backdrop to make
// the device frame readable.
body.flow-device-preview {
	background-color: #ddd;
}

// Mobile: both sidebars overlay content instead of pushing it, so the
// iframe preview can use the full viewport width (matched in
// ReviewBar.js iframe scaling, which treats sidebars as 0px below this
// breakpoint).
@media (max-width: $mobile-bp) {
	body.flow-review-page {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

// Host element only — the popover itself is mounted into a Shadow DOM root
// (see mount-in-shadow + popover.scss) so theme / page-builder CSS in the
// parent document can't reach the popover button styles. The big light-DOM
// button reset that used to live here is no longer needed.
#flow-inline-popover-host {
	position: relative;
	z-index: 100000;
	pointer-events: none;
}

#flow-bar-host,
#flow-sidebar-host,
#flow-activity-sidebar-host {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	body.flow-review-page {
		transition: none;
	}
}

// =============================================================================
// Inline comment help — Figma Alert / info (Frame 30).
// =============================================================================

.flow-review-info-notice {
	// Same register as Pro's site-review welcome popin, minus the dimmer:
	// it sits in the bottom-left corner so it never covers the content
	// being reviewed. Above the iframe, below the popover / sidebar roots.
	position: fixed;
	// The upsell bar publishes its height on :root; clear it the same way
	// the review bar's own floating controls do.
	bottom: calc(16px + var(--flow-ew-upsell-bar-height, 0px));
	left: 16px;
	z-index: 99999;
	width: $sidebar-width;
	max-width: calc(100% - 32px);
	max-height: calc(
		100vh - #{$bar-height} - 32px - var(--flow-ew-upsell-bar-height, 0px)
	);
	overflow: auto;
	font-family: $font-stack;
	font-size: $font-size-base;
	line-height: $line-height-base;
	color: #1e1e1e;
	background: #fff;
	border-radius: $radius-sm;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
	animation: flow-review-hint-pop-in 140ms ease-out;
}

@keyframes flow-review-hint-pop-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.flow-review-info-notice {
		animation: none;
	}
}

.flow-review-info-notice__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 16px 0;
}

.flow-review-info-notice__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #1e1e1e;
}

.flow-review-info-notice__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
}

.flow-review-info-notice__text {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: #1e1e1e;
}

.flow-review-info-notice__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 896 / 516;
	border-radius: $radius-sm;
	background: rgba(0, 0, 0, 0.04);
}

.flow-review-info-notice__actions {
	display: flex;
	justify-content: flex-end;
}

.flow-review-info-notice__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.1s ease, border-color 0.1s ease;
}

.flow-review-info-notice__btn--primary {
	color: #fff;
	background: var(--wp-admin-theme-color, #007cba);
	border-color: var(--wp-admin-theme-color, #007cba);

	&:hover {
		background: var(--wp-admin-theme-color-darker-10, #006ba1);
		border-color: var(--wp-admin-theme-color-darker-10, #006ba1);
	}

	&:focus-visible {
		outline: 2px solid var(--wp-admin-theme-color, #007cba);
		outline-offset: 2px;
	}
}

.flow-review-info-notice__dismiss {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: -8px -8px -8px 0;
	padding: 0;
	color: #1e1e1e;
	background: transparent;
	border: 0;
	border-radius: 2px;
	cursor: pointer;

	&:hover {
		background: #f0f0f0;
	}

	&:focus-visible {
		outline: 2px solid var(--wp-admin-theme-color, #007cba);
		outline-offset: -2px;
	}

	svg {
		display: block;
	}
}

// =============================================================================
// Inline comment highlights (light DOM — content area)
// =============================================================================

.flow-inline-highlight {
	background: rgba(255, 212, 59, 0.35);
	// box-shadow underline — same visual as border-bottom but doesn't push
	// the line box, so wrapping text doesn't reflow when a highlight lands.
	box-shadow: inset 0 -2px 0 rgba(255, 183, 0, 0.6);
	cursor: pointer;
	border-radius: 2px;
	transition: background 0.2s ease, box-shadow 0.2s ease;

	&:hover {
		background: rgba(255, 212, 59, 0.55);
	}

	&--active {
		background: rgba(255, 183, 0, 0.55);
		box-shadow: inset 0 -2px 0 #e69500;
	}

	&--resolved {
		background: rgba(130, 214, 142, 0.3);
		box-shadow: inset 0 -2px 0 rgba(130, 214, 142, 0.5);

		&:hover {
			background: rgba(130, 214, 142, 0.45);
		}
	}
}

// The highlight ring on commented media renders as an inset outline on the
// `.flow-embed-overlay` sibling (see init-embed-overlays.js for that CSS).
// This unifies the look across wrapped media (figures), positioned media
// (.wp-block-cover backgrounds, embed iframes in aspect-ratio wrappers),
// where parent overflow:hidden clipping rules out a per-media outset
// outline that matches everywhere.
img.flow-inline-highlight-media,
video.flow-inline-highlight-media,
iframe.flow-inline-highlight-media {
	cursor: pointer;
}

// =============================================================================
// Embed iframe overlay (YouTube, Vimeo, etc.)
//
// Each iframe is wrapped in `.flow-embed-wrap` so the overlay only covers
// the iframe itself — never sibling content. `pointer-events: none` on the
// iframe means the cross-origin player can't intercept clicks; the overlay
// captures them and routes to the comment popover.
// =============================================================================

.flow-embed-wrap {
	display: inline-block;
	line-height: 0;
	max-width: 100%;
	position: relative;
	vertical-align: top;

	> iframe {
		display: block;
		max-width: 100%;
	}
}

.flow-embed-overlay {
	align-items: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
	transition: background-color 0.15s ease;
	z-index: 2;

	&:hover,
	&:focus-visible,
	&.is-touch-armed {
		// The active text-selection blue. The system Highlight color is gray
		// until the preview frame is focused, so the first hover would not match.
		background: rgba(128, 188, 254, 0.6);

		.flow-embed-overlay__hint {
			opacity: 1;
		}
	}

	// Held while the comment form is open, after the pointer has left.
	&.is-comment-open,
	&.is-comment-open:hover,
	&.is-comment-open.is-playing,
	&.is-comment-open.is-playing:hover {
		background: rgba(128, 188, 254, 0.6);

		.flow-embed-overlay__hint {
			opacity: 0;
		}
	}

	&:focus-visible {
		outline: 2px solid var(--wp-admin-theme-color, #2271b1);
		outline-offset: -2px;
	}
}

.flow-embed-overlay__hint {
	background: rgba(0, 0, 0, 0.7);
	border-radius: 4px;
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	opacity: 0;
	padding: 8px 14px;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

// The View menu renders in the page, not the bar. On mobile it hangs from the
// bar's right edge like the panels, instead of from the narrow trigger.
@media (max-width: 782px) {
	.components-popover.flow-bar__view-dropdown-popover {
		transform: none !important;
		top: 68px !important;
		left: auto !important;
		right: 8px !important;
	}
}

// Menus that render in the page instead of a shadow root (WP dropdowns, the
// @mention list) pick up theme button rules; put back the component look.
.flow-ew-portal :is(button, [type='button'], [type='submit']) {
	gap: 8px;
	border: 0;
	border-radius: 2px;
	background-color: transparent;
	box-shadow: none;
	color: #1e1e1e;
	font-family: inherit;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-shadow: none;
	text-transform: none;
	transition: none;
}

.components-popover.flow-ew-portal [role^='menuitem'] {
	min-height: 32px;
}