/**
 * Flow Editorial Workflow — Inline comment popover styles.
 * Mounted into a Shadow DOM root (see src/review-page/index.js → mountInShadow),
 * so theme / page-builder CSS in the parent document cannot leak in.
 */

@use './tokens' as *;
@use './confirm-dialog';

.flow-btn--text.components-button {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--wp-admin-theme-color, #007cba);

	&:hover:not(:disabled),
	&:active:not(:disabled) {
		color: var(--wp-admin-theme-color, #007cba);
		background: #f0f6fc !important;
	}

	&:focus:not(:disabled) {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff,
			0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) var(--wp-admin-theme-color, #007cba) !important;
		outline: 1px solid transparent;
	}

	&:disabled,
	&[aria-disabled='true'] {
		background: transparent !important;
		border: none !important;
		color: #8c8f94 !important;
		opacity: 1 !important;
	}
}

.flow-btn--cancel.components-button {
	min-width: 80px !important;
	text-decoration: underline;
	text-underline-offset: 2px;

	&:hover:not(:disabled),
	&:active:not(:disabled) {
		text-decoration: none;
	}
}

.flow-comment-editor__submit-btn.components-button {
	background: transparent !important;
	border: 1px solid var(--wp-admin-theme-color, #007cba) !important;
	color: var(--wp-admin-theme-color, #007cba) !important;
	box-shadow: none !important;

	&:hover:not(:disabled),
	&:active:not(:disabled) {
		background: #f0f6fc !important;
		border-color: var(--wp-admin-theme-color, #007cba) !important;
		color: var(--wp-admin-theme-color, #007cba) !important;
	}

	&:focus:not(:disabled) {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff,
			0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) var(--wp-admin-theme-color, #007cba) !important;
		outline: 1px solid transparent;
	}

	&:disabled,
	&[aria-disabled='true'] {
		background: transparent !important;
		border-color: #dcdcde !important;
		color: #757575 !important;
		opacity: 1 !important;
	}
}

// =============================================================================
// Inline comment popover (Shadow DOM — floats near selection)
// =============================================================================
// Mounted via mount-in-shadow.js, so all selectors are scoped to the shadow
// root and theme stylesheets in the parent document cannot reach them.

.flow-inline-popover {
	$popover-accent: var(--wp-admin-theme-color, #007cba);

	pointer-events: auto;

	&__btn {
		--popover-btn-bg: #fff;

		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 10px 16px;
		background: var(--popover-btn-bg);
		color: $popover-accent;
		border: 1px solid $popover-accent;
		border-radius: 2px;
		font-size: 18px;
		font-weight: 400;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		cursor: pointer;
		position: relative;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
		white-space: nowrap;
		overflow: visible;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

		&:hover {
			--popover-btn-bg: #f0f6fc;
			background: var(--popover-btn-bg);
			border-color: $popover-accent;
			color: $popover-accent;
		}

		&:focus-visible {
			outline: 2px solid $popover-accent;
			outline-offset: 2px;
		}

		// Rotated square — 1px borders match the popup edge exactly (triangle
		// borders anti-alias to a lighter shade than the box border).
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: -6px;
			z-index: 1;
			width: 10px;
			height: 10px;
			box-sizing: border-box;
			background: var(--popover-btn-bg);
			border-left: 1px solid $popover-accent;
			border-bottom: 1px solid $popover-accent;
			transform: translateY(-50%) rotate(45deg);
			transition: background 0.15s ease, border-color 0.15s ease;
			pointer-events: none;
		}

		// Hide the button's left border where the caret joins so the seam
		// doesn't throw off vertical alignment.
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			z-index: 2;
			width: 1px;
			height: 14px;
			background: var(--popover-btn-bg);
			transform: translateY(-50%);
			pointer-events: none;
		}
	}

	&__btn-label {
		font-size: 18px;
		line-height: 1.2;
	}

	&__btn-icon {
		width: 22px;
		height: 22px;
		color: $popover-accent;
		flex: 0 0 auto;

		svg {
			fill: currentColor;
		}
	}

	&--editor {
		width: min(380px, calc(100vw - 24px));
	}

	&__editor-wrap {
		$pe-border: #1d2327;
		$pe-accent: var(--wp-admin-theme-color, #007cba);

		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
		padding: 12px;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		font-size: 13px;
		line-height: 1.4;
		color: #1e1e1e;

		.flow-comment-editor {
			display: flex;
			flex-direction: column;
		}

		.flow-comment-editor__toolbar {
			display: flex;
			align-items: stretch;
			gap: 0;
			padding: 0;
			background: #fff;
			border: 1px solid $pe-border;
			border-bottom: 0;
			border-radius: 2px 2px 0 0;
			overflow-x: auto;
			overflow-y: hidden;

			.components-button {
				min-width: 32px !important;
				width: auto !important;
				height: 36px !important;
				padding: 0 6px !important;
				border-radius: 0;
				border-left: 1px solid $pe-border;
				color: #1e1e1e;
				box-shadow: none;
				flex-shrink: 0;

				&:hover:not(:disabled) { background: #f0f0f0; }
				&.is-pressed:not(:disabled) {
					background: #f0f6fc;
					color: $pe-accent;
				}
			}

			.components-button.is-small,
			.components-button[data-size="small"] {
				min-width: 32px !important;
				width: auto !important;
				height: 36px !important;
				padding: 0 6px !important;
				border-radius: 0;
			}
		}

		.flow-comment-editor__toolbar-group {
			display: flex;
			align-items: stretch;
			flex-shrink: 0;
			border-left: 1px solid $pe-border;

			.components-button { border-left: 0; }
		}

		.flow-comment-editor__block-select {
			height: 36px;
			padding: 0 10px;
			border: 0;
			border-radius: 0;
			background: #fff;
			font-size: 12px;
			cursor: pointer;
			flex-shrink: 0;
			min-width: 84px;

			&:hover { background: #f0f0f0; }
			&:focus {
				outline: none;
				box-shadow: inset 0 0 0 2px $pe-accent;
			}
		}

		.flow-comment-editor__toolbar-sep { display: none; }

		.flow-comment-editor__content {
			border: 1px solid $pe-border;
			border-radius: 0 0 2px 2px;
			background: #fff;
			cursor: text;

			&:focus-within {
				border-color: $pe-accent;
				box-shadow: 0 0 0 1px $pe-accent;
			}

			.ProseMirror {
				position: relative;
				min-height: 75px;
				max-height: 200px;
				overflow-y: auto;
				padding: 8px 10px;
				line-height: 1.6;
				outline: none;
				word-break: break-word;

				p.is-editor-empty:first-child::before {
					content: attr(data-placeholder);
					color: #949494;
					pointer-events: none;
					float: left;
					height: 0;
				}

				ul, ol { padding-left: 1.5em; margin: 0.3em 0; }
				li { margin: 0.1em 0; }
				a { color: $pe-accent; text-decoration: underline; }
				strong { font-weight: 600; }
				em { font-style: italic; }
			}
		}

		.flow-comment-editor--basic .flow-comment-editor__content {
			border-radius: 2px;
		}

		.flow-comment-editor__textarea {
			display: block;
			width: 100%;
			min-height: 75px;
			max-height: 200px;
			margin: 0;
			padding: 8px 10px;
			border: 0;
			border-radius: inherit;
			background: #fff;
			font-family: inherit;
			font-size: 13px;
			line-height: 1.6;
			resize: vertical;
			box-sizing: border-box;
			outline: none;
			color: #1e1e1e;

			&::placeholder {
				color: #949494;
			}
		}

		.flow-comment-editor__link-row {
			display: flex;
			align-items: center;
			gap: 4px;
			padding: 4px 6px;
			background: #f6f7f7;
			border: 1px solid $pe-border;
			border-top: none;
			border-bottom: none;
		}

		.flow-comment-editor__link-input {
			flex: 1;
			height: 28px;
			padding: 0 6px;
			border: 1px solid #949494;
			border-radius: 2px;
			background: #fff;
			font-size: 12px;

			&:focus {
				outline: none;
				border-color: $pe-accent;
				box-shadow: 0 0 0 1px $pe-accent;
			}
		}

		.flow-comment-editor__submit-row {
			display: flex;
			gap: 8px;
			margin-top: 10px;
			justify-content: flex-start;
			flex-wrap: wrap;

			.flow-comment-editor__submit-btn.components-button {
				flex: 0 0 auto;
				min-width: 100px;
				justify-content: center;
			}

			.flow-btn--cancel.components-button {
				flex: 0 0 auto;
				min-width: 80px !important;
				justify-content: center;
			}

			.flow-comment-editor__submit-btn:disabled,
			.flow-comment-editor__submit-btn[aria-disabled='true'] {
				background: transparent !important;
				border-color: #dcdcde !important;
				color: #757575 !important;
				opacity: 1 !important;
			}
		}

		.flow-comment-editor__error {
			margin: 8px 0 0;
			padding: 6px 10px;
			background: #fcf0f1;
			border: 1px solid #cc1818;
			border-radius: 2px;
			color: #cc1818;
			font-size: 12px;
		}
	}

	&__anchor-label {
		font-size: 12px;
		font-style: italic;
		color: #757575;
		margin-bottom: 8px;
		padding: 6px 10px;
		background: #f6f7f7;
		border-radius: 2px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

// =============================================================================
// Inline thread popover (light DOM — shows when clicking a highlight)
// =============================================================================

.flow-thread-popover {
	$tp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	$tp-border: #e0e0e0;
	$tp-accent: var(--wp-admin-theme-color, #007cba);
	$tp-editor-border: #1d2327;

	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;

	// On phones the JS-positioned `left`/`transform` can still drift past
	// the viewport edge (the iframe's scaled coords don't always round-trip
	// to the parent doc's clamp logic). Brute-force a viewport-anchored
	// layout below 600px so the bubble has a guaranteed 16px gutter on
	// both sides regardless of the inline style React writes. We have to
	// use `!important` because the `position: fixed; left: …; transform:
	// translateX(-50%)` triplet is set inline from React.
	//
	// The caret is hidden in this mode — once the bubble no longer tracks
	// the highlight horizontally, an arrow pointing at a fixed spot is
	// more confusing than helpful.
	@media (max-width: 600px) {
		left: 16px !important;
		right: 16px !important;
		transform: none !important;
		align-items: stretch;

		.flow-thread-popover__caret {
			display: none;
		}
	}

	&__caret {
		position: relative;
		width: 16px;
		height: 8px;
		flex: 0 0 auto;
		margin-bottom: -1px;
		z-index: 2;
		pointer-events: none;

		&::before {
			content: '';
			position: absolute;
			left: 50%;
			top: 0;
			transform: translateX(-50%);
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid $tp-border;
		}

		&::after {
			content: '';
			position: absolute;
			left: 50%;
			top: 1px;
			transform: translateX(-50%);
			border-left: 7px solid transparent;
			border-right: 7px solid transparent;
			border-bottom: 7px solid #fff;
		}
	}

	// When the popover doesn't fit below the mark, it flips above. The card
	// renders first via `flex-direction: column-reverse`, the caret slides to
	// the bottom and points down toward the mark.
	&--above {
		flex-direction: column-reverse;

		// Direct child selector so SCSS doesn't double the parent ID and
		// produce an unmatchable selector chain.
		.flow-thread-popover__caret {
			margin-bottom: 0;
			margin-top: -1px;

			&::before {
				top: auto;
				bottom: 0;
				border-bottom: 0;
				border-top: 8px solid $tp-border;
			}

			&::after {
				top: auto;
				bottom: 1px;
				border-bottom: 0;
				border-top: 7px solid #fff;
			}
		}
	}

	&__card {
		// 360px nominal width, but never wider than the viewport minus a
		// 16px gutter on each side. Using `width` + `max-width` instead of
		// `min()` because some sass pipelines emit `min(360px, 100vw - 32px)`
		// (without `calc()`) which not every browser computes correctly,
		// and the simpler pair is unambiguous.
		width: 360px;
		max-width: calc(100vw - 32px);

		// Mobile counterpart of the parent's left:16/right:16 override —
		// stretch the card to fill the now-anchored container.
		@media (max-width: 600px) {
			width: auto;
			max-width: 100%;
		}

		background: #fff;
		border: 1px solid $tp-border;
		border-radius: 6px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
		padding: 14px;
		font-family: $tp-font;
		font-size: 13px;
		line-height: 1.5;
		color: #1e1e1e;
		position: relative;
		z-index: 1;
	}

	&__header,
	&__reply-header {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 8px;
		row-gap: 1px;
		align-items: center;
	}

	&__header {
		margin-bottom: 6px;
		padding-right: 56px;
	}

	&__header-actions {
		position: absolute;
		top: 8px;
		right: 8px;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 4px;
	}

	&__close.components-button {
		position: static;
		min-width: 0 !important;
		width: 32px !important;
		height: 32px !important;
		padding: 4px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1e1e1e !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: $radius-sm;
		transition: background-color 0.15s ease;

		.components-button__icon,
		svg {
			margin: 0;
			fill: currentColor;
			width: 20px;
			height: 20px;
		}

		&:hover:not(:disabled),
		&:focus-visible:not(:disabled),
		&:active:not(:disabled) {
			color: #1e1e1e !important;
			background: #ebebeb !important;
			box-shadow: none !important;
		}
	}

	&__resolve-icon.components-button {
		min-width: 0 !important;
		width: 32px !important;
		height: 32px !important;
		padding: 4px !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: $radius-sm !important;
		transition: background-color 0.15s ease;

		svg {
			width: 20px;
			height: 20px;

			.flow-comment-resolve__default,
			.flow-comment-resolve__hover {
				transition: opacity 0.15s ease;
			}

			.flow-comment-resolve__hover {
				opacity: 0;
			}
		}

		&:hover:not(:disabled),
		&:focus-visible:not(:disabled) {
			background: #e7f5e4 !important;

			svg .flow-comment-resolve__default {
				opacity: 0;
			}

			svg .flow-comment-resolve__hover {
				opacity: 1;
			}
		}
	}

	&__reply-header {
		margin-bottom: 4px;
	}

	&__avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		flex-shrink: 0;
		user-select: none;
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}

	&__avatar--fallback {
		background: #dcdcde;
		color: #757575;
	}

	&__avatar--img {
		display: block;
		object-fit: cover;
		background: transparent;
	}

	&__author {
		font-weight: 600;
		font-size: 12px;
		color: #1e1e1e;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		grid-column: 2;
		grid-row: 1;
	}

	&__date {
		font-size: 11px;
		color: #757575;
		line-height: 1.2;
		white-space: nowrap;
		grid-column: 2;
		grid-row: 2;
	}

	&__body {
		font-size: 13px;
		line-height: 1.6;
		word-break: break-word;

		> * { margin: 0; }
		> * + * { margin-top: 0.3em; }
		strong { font-weight: 600; }
		em { font-style: italic; }
		a { color: $tp-accent; text-decoration: underline; }
		ul, ol { padding-left: 1.4em; margin: 0.3em 0; }
	}

	&__replies {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid $tp-border;
	}

	&__reply {
		padding: 8px 0 4px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	&__reply-body {
		font-size: 13px;
		line-height: 1.6;
		color: #1e1e1e;
		word-break: break-word;

		> * {
			margin: 0;
		}

		> * + * {
			margin-top: 0.4em;
		}
	}

	&__reply-editor {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid $tp-border;
	}

	&__actions {
		display: flex;
		gap: 8px;
		margin-top: 12px;
		padding-top: 10px;
		justify-content: flex-start;

		.components-button {
			min-height: 30px;
		}
	}

	&__reply-btn.components-button.has-icon.has-text {
		margin-left: 0;
		margin-right: 12px;
		gap: 8px !important;
		text-decoration: underline;
		text-underline-offset: 2px;

		&:hover:not(:disabled),
		&:focus-visible:not(:disabled) {
			text-decoration: none;
		}

		svg,
		.components-button__icon {
			margin-right: 0 !important;
		}
	}

	&__resolved-badge {
		margin-top: 10px;
		padding: 0 8px;
		height: 26px;
		background: #edfaee;
		border: 1px solid #82d68e;
		border-radius: 3px;
		color: #1a6b28;
		font-size: 11px;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		margin-left: auto;
	}

	// Editor styles within the thread popover (same as inline popover)
	.flow-comment-editor { display: flex; flex-direction: column; }

	.flow-comment-editor__toolbar {
		display: flex;
		align-items: stretch;
		gap: 0;
		padding: 0;
		background: #fff;
		border: 1px solid $tp-editor-border;
		border-bottom: 0;
		border-radius: 2px 2px 0 0;
		overflow-x: auto;
		overflow-y: hidden;

		.components-button {
			min-width: 32px !important;
			width: auto !important;
			height: 36px !important;
			padding: 0 6px !important;
			border-radius: 0;
			border-left: 1px solid $tp-editor-border;
			color: #1e1e1e;
			box-shadow: none;
			flex-shrink: 0;

			&:hover:not(:disabled) { background: #f0f0f0; }
			&.is-pressed:not(:disabled) { background: #f0f6fc; color: $tp-accent; }
		}

		.components-button.is-small,
		.components-button[data-size="small"] {
			min-width: 32px !important;
			width: auto !important;
			height: 36px !important;
			padding: 0 6px !important;
			border-radius: 0;
		}
	}

	.flow-comment-editor__toolbar-group {
		display: flex;
		align-items: stretch;
		flex-shrink: 0;
		border-left: 1px solid $tp-editor-border;
		.components-button { border-left: 0; }
	}

	.flow-comment-editor__block-select {
		height: 36px;
		padding: 0 10px;
		border: 0;
		border-radius: 0;
		background: #fff;
		font-size: 12px;
		cursor: pointer;
		flex-shrink: 0;
		min-width: 84px;
		&:hover { background: #f0f0f0; }
		&:focus { outline: none; box-shadow: inset 0 0 0 2px $tp-accent; }
	}

	.flow-comment-editor__toolbar-sep { display: none; }

	.flow-comment-editor__content {
		border: 1px solid $tp-editor-border;
		border-radius: 0 0 2px 2px;
		background: #fff;
		cursor: text;
		&:focus-within { border-color: $tp-accent; box-shadow: 0 0 0 1px $tp-accent; }

		.ProseMirror {
			position: relative;
			min-height: 75px;
			max-height: 150px;
			overflow-y: auto;
			padding: 8px 10px;
			line-height: 1.6;
			outline: none;
			word-break: break-word;

			p.is-editor-empty:first-child::before {
				content: attr(data-placeholder);
				color: #949494;
				pointer-events: none;
				float: left;
				height: 0;
			}

			ul, ol { padding-left: 1.5em; margin: 0.3em 0; }
			li { margin: 0.1em 0; }
			a { color: $tp-accent; text-decoration: underline; }
			strong { font-weight: 600; }
			em { font-style: italic; }
		}
	}

	.flow-comment-editor--basic .flow-comment-editor__content {
		border-radius: 2px;
	}

	.flow-comment-editor__textarea {
		display: block;
		width: 100%;
		min-height: 75px;
		max-height: 150px;
		margin: 0;
		padding: 8px 10px;
		border: 0;
		border-radius: inherit;
		background: #fff;
		font-family: inherit;
		font-size: 13px;
		line-height: 1.6;
		resize: vertical;
		box-sizing: border-box;
		outline: none;
		color: #1e1e1e;

		&::placeholder {
			color: #949494;
		}
	}

	.flow-comment-editor__link-row {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 4px 6px;
		background: #f6f7f7;
		border: 1px solid $tp-editor-border;
		border-top: none;
		border-bottom: none;
	}

	.flow-comment-editor__link-input {
		flex: 1;
		height: 28px;
		padding: 0 6px;
		border: 1px solid #949494;
		border-radius: 2px;
		background: #fff;
		font-size: 12px;
		&:focus { outline: none; border-color: $tp-accent; box-shadow: 0 0 0 1px $tp-accent; }
	}

	.flow-comment-editor__submit-row {
		display: flex;
		gap: 8px;
		margin-top: 10px;
		justify-content: flex-start;

		.flow-comment-editor__submit-btn.components-button {
			flex: 0 0 auto;
			min-width: 80px;
			justify-content: center;
		}

		.flow-btn--cancel.components-button {
			flex: 0 0 auto;
			min-width: 80px !important;
			justify-content: center;
		}

		.flow-comment-editor__submit-btn:disabled,
		.flow-comment-editor__submit-btn[aria-disabled='true'] {
			background: transparent !important;
			border-color: #dcdcde !important;
			color: #757575 !important;
			opacity: 1 !important;
		}
	}

	.flow-comment-editor__error {
		margin: 8px 0 0;
		padding: 6px 10px;
		background: #fcf0f1;
		border: 1px solid #cc1818;
		border-radius: 2px;
		color: #cc1818;
		font-size: 12px;
	}
}