@use "./theme" as *;

@keyframes sp-real-ai-bounce {
	0%,
	100% {
		transform: translateY(2px);
		opacity: 0.45;
	}

	50% {
		transform: translateY(-2px);
		opacity: 1;
	}
}

/* Header launcher */
.sp-real-ai-builder-launcher {
	display: inline-flex;
	align-items: center;
	margin-inline: 6px 8px;

	&__button {
		height: 36px;
		padding: 0 12px;
		border-radius: 4px;
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
		cursor: pointer;
		transition: var(--sp-real-transition);
		@include sp-real-ai-launcher-skin;
	}
}

.sp-real-source-toolbar__refine-with-ai {
	color: $sp-real-ai-accent;
}

.sp-real-ai-builder-modal {
	width: 90%;
	max-width: 680px;
	border-radius: 12px;
	box-shadow:
		4px 4px 12px 2px rgba(0, 0, 0, 0.1),
		inset 0 0 0 1px $sp-real-ai-line;

	.components-modal__header {
		height: auto;
		padding: 20px 28px;
		border-bottom: 1px solid $sp-real-ai-line;

		.components-button.has-icon {
			width: 28px;
			min-width: 28px;
			height: 28px;
			padding: 0;
			border-radius: 8px;
			color: $sp-real-ai-muted;

			svg {
				width: 18px;
				height: 18px;
			}
		}
	}

	.components-modal__content {
		padding: 0 28px 28px;
	}

	.sp-real-ai-modal-mark {
		display: block;
		color: $sp-real-ai-accent;
	}

	.components-modal__header-heading {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		color: $sp-real-ai-text;
	}

	.components-modal__header-heading-container {
		align-items: center;
		gap: 12px;

		.components-modal__icon-container {
			margin-right: 0;
		}
	}

	&__body {
		padding-top: 22px;
	}

	&__notice {
		margin: 0 0 16px;
	}

	&__connect,
	&__fallback {
		margin-bottom: 22px;
		padding: 14px 18px;
		border: 1px solid #c9d8f5;
		border-radius: 8px;
		background: #f0f5ff;
		font-size: 14px;
		line-height: 1.6;
		color: $sp-real-ai-text;

		strong {
			font-weight: 600;
		}

		a {
			color: $sp-real-ai-accent;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	&__fallback {
		padding: 12px 12px 12px 18px;
	}

	&__fallback-text {
		margin: 0;
	}

	.sp-real-ai-builder-modal__fallback-btn {
		flex-shrink: 0;
		height: 36px;
		padding: 0 16px;
		border-radius: 6px;
		background: #111;
		font-size: 13px;
		font-weight: 600;
		color: #fff;

		&:hover:not(:disabled) {
			background: #000;
			color: #fff;
		}
	}

	.sp-real-ai-heading {
		margin-bottom: 12px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		color: $sp-real-ai-text;
	}

	.sp-real-ai-textarea-card {
		padding: 16px 18px 12px;
		border-radius: 8px;
		background: #fff;
		box-shadow: inset 0 0 0 1px $sp-real-ai-line;
		transition: var(--sp-real-transition);

		&:focus-within {
			box-shadow: inset 0 0 0 1px $sp-real-ai-accent;
		}
	}

	.sp-real-ai-textarea {
		box-sizing: border-box;
		min-height: 148px;
		padding: 0;
		border: none;
		outline: none;
		box-shadow: none;
		resize: none;
		background: transparent;
		font-family: inherit;
		font-size: 14px;
		line-height: 1.55;
		color: $sp-real-ai-text;

		&:focus,
		&:focus-visible {
			border: none;
			outline: none;
			box-shadow: none;
		}

		&::placeholder {
			color: $sp-real-ai-placeholder;
		}
	}

	.sp-real-ai-textarea-hint {
		padding-top: 16px;
		font-size: 12px;
		color: $sp-real-ai-muted;
		box-shadow: inset 0 1px 0 0 $sp-real-ai-line;
	}

	.sp-real-ai-starters {
		min-width: 0;
		margin-top: 14px;

		&__label {
			flex: 0 0 auto;
			margin-right: 2px;
			font-size: 12px;
			color: $sp-real-ai-muted;
		}

		&__rail {
			flex: 1 1 auto;
			min-width: 0;
			padding-bottom: 2px;
			overflow-x: auto;
			white-space: nowrap;
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
			--sp-real-ai-fade-direction: to right;
			--sp-real-ai-fade-start: #000;
			--sp-real-ai-fade-end: #000;
			mask-image: linear-gradient(
				var(--sp-real-ai-fade-direction),
				var(--sp-real-ai-fade-start) 0,
				#000 40px,
				#000 calc(100% - 56px),
				var(--sp-real-ai-fade-end) 100%
			);

			.rtl & {
				--sp-real-ai-fade-direction: to left;
			}

			&.has-overflow-start {
				--sp-real-ai-fade-start: rgba(0, 0, 0, 0.15);
			}

			&.has-overflow-end {
				--sp-real-ai-fade-end: rgba(0, 0, 0, 0.15);
			}

			&::-webkit-scrollbar {
				width: 0;
				height: 0;
			}
		}
	}

	.sp-real-ai-starter-pill,
	.sp-real-ai-starter-more,
	.sp-real-ai-stop-btn {
		flex: 0 0 auto;
		border: none;
		cursor: pointer;
		background: $sp-real-ai-chip;
		color: $sp-real-ai-text;
		font-family: inherit;

		&:hover {
			background: $sp-real-ai-accent-soft;
			color: $sp-real-ai-accent;
		}
	}

	.sp-real-ai-starter-pill {
		height: 30px;
		padding: 0 14px;
		border-radius: 999px;
		font-size: 13px;
		line-height: 1;
		scroll-snap-align: start;
	}

	.sp-real-ai-starter-more {
		width: 30px;
		height: 30px;
		padding: 0;
		border-radius: 999px;
		color: $sp-real-ai-icon;
	}

	&__footer {
		margin-top: 28px;
	}

	&__provider {
		min-width: 0;
		font-size: 13px;
		color: $sp-real-ai-text;
	}

	&__provider-sep {
		color: $sp-real-ai-muted;
	}

	// Borderless inline dropdowns; wp-admin's own arrow image stays as the chevron.
	.sp-real-ai-inline-select {
		field-sizing: content;
		max-width: 240px;
		min-height: 30px;
		padding: 0 22px 0 4px;
		border: none;
		border-radius: 4px;
		box-shadow: none;
		background-color: transparent;
		background-position: right 2px top 55%;
		font-family: inherit;
		font-size: 13px;
		line-height: 30px;
		color: $sp-real-ai-text;
		text-overflow: ellipsis;
		cursor: pointer;

		&:hover {
			color: $sp-real-ai-accent;
		}

		&:focus {
			border: none;
			outline: none;
			box-shadow: 0 0 0 1.5px $sp-real-ai-accent;
		}

		&:disabled {
			opacity: 0.6;
			cursor: default;
		}
	}

	.sp-real-ai-stop-btn {
		width: 36px;
		height: 36px;
		padding: 0;
		border-radius: 8px;
	}

	// Fill and label are stacked inside one Button — position and overflow are load-bearing.
	.sp-real-ai-generate-btn {
		position: relative;
		overflow: hidden;
		height: 44px;
		padding: 0 20px;
		border-radius: 6px;
		background: $sp-real-ai-accent;
		font-size: 13px;
		font-weight: 600;
		color: #fff;

		&:hover:not(:disabled) {
			background: $sp-real-ai-accent-dark;
		}

		&.components-button:disabled,
		&.components-button[aria-disabled="true"] {
			background: $sp-real-ai-accent;
			color: #fff;
			opacity: 0.5;
			cursor: not-allowed;
		}

		&__fill {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			background: $sp-real-ai-accent-dark;
			transition: width 400ms cubic-bezier(0.2, 0.8, 0.3, 1);
		}

		&__label {
			position: relative;
			z-index: 1;
		}

		&__dots {
			gap: 3px;
			height: 13px;

			span {
				width: 4px;
				height: 4px;
				border-radius: 999px;
				background: #fff;
				animation: sp-real-ai-bounce 1s ease-in-out infinite;

				&:nth-child(2) {
					animation-delay: 0.15s;
				}

				&:nth-child(3) {
					animation-delay: 0.3s;
				}
			}
		}
	}
}