/**
 * RoyalPine Form — "Summarize with AI" button row.
 *
 * Scoped under .rpw-ai. Both an <a> (prefill providers) and a <button> (copy
 * providers such as Gemini) are styled identically, and the theme-vulnerable
 * properties are forced so arbitrary theme link/button styles cannot bleed in
 * (which otherwise turns links orange/underlined or makes the button a dark
 * pill). Hence the !important flags on colour, background, border and radius.
 */

.rpw-ai {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 20px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.rpw-ai--center {
	justify-content: center;
}

.rpw-ai--right {
	justify-content: flex-end;
}

.rpw-ai__label {
	font-weight: 700;
	font-size: 15px;
	color: #1f2a44;
	letter-spacing: -0.01em;
}

.rpw-ai__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

/* Identical clean white chip for both <a> and <button>. */
.rpw-ai a.rpw-ai__btn,
.rpw-ai button.rpw-ai__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 9px 15px;
	border: 1px solid #e4e7ec !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: #1f2a44 !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
	-webkit-appearance: none;
	appearance: none;
}

.rpw-ai a.rpw-ai__btn:hover,
.rpw-ai button.rpw-ai__btn:hover,
.rpw-ai a.rpw-ai__btn:focus,
.rpw-ai button.rpw-ai__btn:focus {
	transform: translateY(-1px);
	border-color: #d0d5dd !important;
	background: #fff !important;
	color: #1f2a44 !important;
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
	text-decoration: none !important;
}

.rpw-ai a.rpw-ai__btn:focus-visible,
.rpw-ai button.rpw-ai__btn:focus-visible {
	outline: 2px solid var(--rpw-ai-color, #1f2a44);
	outline-offset: 2px;
}

.rpw-ai .rpw-ai__row a.rpw-ai__btn .rpw-ai__name,
.rpw-ai .rpw-ai__row button.rpw-ai__btn .rpw-ai__name,
.rpw-ai .rpw-ai__name {
	color: #1f2a44 !important;
	white-space: nowrap;
	/* Neutralise every underline mechanism a theme might apply to links:
	   text-decoration, a border-bottom "underline", and gradient underlines. */
	text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
}

.rpw-ai .rpw-ai__icon {
	display: inline-flex;
	line-height: 0;
}

.rpw-ai .rpw-ai__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Icon-only variant: compact square chips. */
.rpw-ai--icon a.rpw-ai__btn,
.rpw-ai--icon button.rpw-ai__btn {
	padding: 9px;
}

/* A small toast shown after copying the Gemini prompt. */
.rpw-ai__toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	background: #1f2a44;
	color: #fff;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 14px;
	z-index: 100000;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.rpw-ai__toast.is-visible {
	opacity: 1;
}

@media (max-width: 480px) {

	.rpw-ai {
		gap: 8px 10px;
	}

	.rpw-ai a.rpw-ai__btn,
	.rpw-ai button.rpw-ai__btn {
		font-size: 13px;
		padding: 8px 12px;
	}
}