// ============================================================================
// AI Settings — "API Configuration"
//
// Shared by the Pro settings form (`betterlinks-pro` components/AISettings) and
// the free upgrade teaser (components/AISettings). Both render `.bl-ai`, so this
// sheet ships in the FREE plugin only and Pro inherits it — the free stylesheet
// always loads on these screens. Keep the two markups in step when editing here.
//
// Redesigned as a stack of titled cards instead of one flat run of fields:
//
//   header            title + subtitle + a Connected / Not configured pill
//   card "Provider"   two selectable provider cards, then the API key field
//   card "Model &     model select + token cap, side by side
//         Usage"
//   card "AI Link     one switch row per assistant behaviour
//         Assistant"
//   actions           helper line on the left, Save on the right
//
// Every control in a card shares `$ai-field` (or a column of the grid), so the
// form has one left edge and one right edge the whole way down. The old layout
// capped the select wrapper at 450px, the inputs at 300px and the notes at
// 450px, so no two rows lined up.
// ============================================================================
$ai-field: 460px; // shared width of a full-width control + its hint
$ai-border: #e4e7ec;
$ai-line: #eef0f4;
$ai-surface: #fff;
$ai-subtle: #f9fafb;
$ai-text: #1d2939;
$ai-label: #344054;
$ai-muted: #667085;
$ai-blue: #2563eb;
$ai-blue-dark: #1d4ed8;
$ai-green: #16a34a;
$ai-danger: #f97272;
$ai-radius: 12px;

body .betterlinks-body .bl-ai {
	max-width: 880px;

	* {
		box-sizing: border-box;
	}

	// ---- Page header -------------------------------------------------------
	&__head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	&__title {
		margin: 0 0 4px;
		padding: 0;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.25;
		color: $ai-text;
	}
	&__subtitle {
		margin: 0;
		max-width: 560px;
		font-size: 13px;
		line-height: 1.55;
		color: $ai-muted;
	}

	// Connection pill — grey until a key has actually been saved.
	&__status {
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 6px 12px;
		border: 1px solid $ai-border;
		border-radius: 999px;
		background: $ai-subtle;
		color: $ai-muted;
		font-size: 12px;
		font-weight: 600;

		&.is-ok {
			border-color: rgba($ai-green, 0.35);
			background: rgba($ai-green, 0.08);
			color: #15803d;
		}
	}
	&__status-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: currentColor;
	}

	// ---- Cards -------------------------------------------------------------
	// NOT `overflow: hidden`. That would clip the react-select menu, which opens
	// downward out of the card. The head rounds its own top corners instead.
	&__card {
		margin-bottom: 16px;
		border: 1px solid $ai-border;
		border-radius: $ai-radius;
		background: $ai-surface;
	}
	&__card-head {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 16px 20px;
		border-bottom: 1px solid $ai-line;
		border-radius: ($ai-radius - 1) ($ai-radius - 1) 0 0;
		background: $ai-subtle;
	}
	&__card-title {
		margin: 0;
		padding: 0;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
		color: $ai-text;
	}
	&__card-desc {
		margin: 3px 0 0;
		font-size: 12.5px;
		line-height: 1.5;
		color: $ai-muted;
	}
	&__card-icon {
		flex: none;
		display: inline-flex;

		svg {
			width: 34px;
			height: 34px;
			border-radius: 9px;
			box-shadow: 0 6px 16px rgba(92, 124, 240, 0.3);
		}
	}
	&__card-body {
		display: flex;
		gap: 10px;
		flex-direction: column;
		padding: 20px;
	}

	// ---- Provider picker ---------------------------------------------------
	// Replaces a two-option dropdown: with only two choices, showing both at
	// once is one click instead of two and leaves room to say what each is.
	&__providers {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-bottom: 20px;

		@media (max-width: 700px) {
			grid-template-columns: minmax(0, 1fr);
		}
	}
	&__provider {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px;
		border: 1px solid $ai-border;
		border-radius: 10px;
		background: $ai-surface;
		text-align: left;
		cursor: pointer;
		transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

		&:hover:not(:disabled) {
			border-color: rgba($ai-blue, 0.45);
		}
		&:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}
		&.is-active {
			border-color: $ai-blue;
			background: rgba($ai-blue, 0.04);
			box-shadow: 0 0 0 3px rgba($ai-blue, 0.1);
		}
		&:focus-visible {
			outline: none;
			box-shadow: 0 0 0 3px rgba($ai-blue, 0.25);
		}
	}
	&__provider-mark {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 9px;
		background: #eef2ff;
		color: #4f46e5;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.02em;
	}
	&__provider-text {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	&__provider-name {
		font-size: 13.5px;
		font-weight: 600;
		color: $ai-text;
	}
	&__provider-desc {
		font-size: 12px;
		line-height: 1.45;
		color: $ai-muted;
	}
	&__provider-check {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		border: 1px solid $ai-border;
		border-radius: 50%;
		background: $ai-surface;
		color: transparent;
		transition: all 0.15s ease;
	}
	&__provider.is-active &__provider-check {
		border-color: $ai-blue;
		background: $ai-blue;
		color: #fff;
	}

	// ---- Fields ------------------------------------------------------------
	&__field {
		display: flex;
		flex-direction: column;

		& + & {
			margin-top: 18px;
		}
	}
	&__label {
		margin-bottom: 7px;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.4;
		color: $ai-label;
	}

	// One width for every full-width control and its hint.
	&__key,
	&__suffixed,
	&__hint,
	&__error {
		width: 100%;
		max-width: $ai-field;
	}

	// The Settings shell caps every control in a panel at 420px — see
	// `.bl-settings__panel input[type=…], [class*=btl-modal-select], select` in
	// the free plugin's _settings.scss. In this form the wrapper already owns the
	// width, so that cap has to be released: left on, a control stops 40px short
	// of its wrapper, which stranded the API key's reveal button outside the
	// field and made the model select and token input disagree with their grid
	// columns.
	input[type='text'],
	input[type='password'],
	input[type='number'],
	select,
	[class*='btl-modal-select'] {
		max-width: none;
	}

	// Shared input skin. react-select's control matches it so a select row and
	// an input row are the same height, radius and focus ring.
	input[type='text'],
	input[type='password'],
	input[type='number'] {
		width: 100%;
		height: 42px;
		margin: 0;
		padding: 0 12px;
		border: 1px solid $ai-border;
		border-radius: 9px;
		background: $ai-surface;
		box-shadow: none;
		color: $ai-text;
		font-size: 14px;
		line-height: 40px;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&::placeholder {
			color: #98a2b3;
		}
		&:focus {
			outline: none;
			border-color: $ai-blue;
			box-shadow: 0 0 0 3px rgba($ai-blue, 0.12);
		}
		&:disabled {
			background: $ai-subtle;
			color: $ai-muted;
		}
		&.is-error {
			border-color: $ai-danger;
			box-shadow: 0 0 0 3px rgba($ai-danger, 0.14);
		}
	}

	.btl-react-select__control {
		min-height: 42px;
		border-color: $ai-border;
		border-radius: 9px;
		background: $ai-surface;
		box-shadow: none;

		&--is-focused {
			border-color: $ai-blue;
			box-shadow: 0 0 0 3px rgba($ai-blue, 0.12);
		}
	}
	.btl-react-select__value-container {
		padding: 0 12px;
	}
	.btl-react-select__indicator-separator {
		display: none;
	}
	.btl-react-select__menu {
		z-index: 20;
	}

	// API key + reveal button. The button overlays the field's right end rather
	// than sitting beside it, so the row keeps the same shape as every other.
	&__key {
		position: relative;

		input {
			padding-right: 44px;
		}
	}
	&__key-toggle {
		position: absolute;
		top: 50%;
		right: 6px;
		transform: translateY(-50%);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		padding: 0;
		border: none;
		border-radius: 7px;
		background: transparent;
		color: $ai-muted;
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease;

		&:hover {
			background: $ai-subtle;
			color: $ai-blue;
		}
		&:focus-visible {
			outline: none;
			box-shadow: 0 0 0 3px rgba($ai-blue, 0.25);
		}
	}

	// Number field with a trailing unit. The browser's spinner buttons also live
	// at the right edge, so they'd sit underneath the unit label — hide them and
	// let the field be typed into. Stepping a token cap by 1 is useless anyway
	// when the values run in the thousands.
	&__suffixed {
		position: relative;

		input {
			padding-right: 62px;
			appearance: textfield;
			-moz-appearance: textfield;

			&::-webkit-outer-spin-button,
			&::-webkit-inner-spin-button {
				-webkit-appearance: none;
				appearance: none;
				margin: 0;
			}
		}
	}
	&__suffix {
		position: absolute;
		top: 50%;
		right: 12px;
		transform: translateY(-50%);
		color: $ai-muted;
		font-size: 12px;
		font-weight: 600;
		pointer-events: none;
	}

	// Two related settings side by side; one column when there isn't room.
	&__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;

		// The grid's own columns set the width here, so the shared cap must not
		// also apply or the second column would be indented.
		.bl-ai__suffixed {
			max-width: none;
		}

		@media (max-width: 700px) {
			grid-template-columns: minmax(0, 1fr);
		}
	}
	&__grid + &__hint {
		margin-top: 14px;
		max-width: none;
	}

	// ---- Hints & errors ----------------------------------------------------
	&__hint {
		margin: 7px 0 0;
		font-size: 12px;
		line-height: 1.55;
		color: $ai-muted;

		strong {
			color: $ai-label;
			font-weight: 600;
		}
		a {
			color: $ai-blue;
			text-decoration: none;

			&:hover {
				color: $ai-blue-dark;
				text-decoration: underline;
			}
		}
	}
	&__error {
		margin: 10px 0 0;
		padding: 9px 12px;
		border: 1px solid rgba($ai-danger, 0.4);
		border-radius: 8px;
		background: #fff5f5;
		color: #b42318;
		font-size: 12.5px;
		line-height: 1.5;
	}

	// ---- Assistant switch rows ---------------------------------------------
	&__switch-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		margin: 0;
		padding: 14px 16px;
		border: 1px solid $ai-border;
		border-radius: 10px;
		background: $ai-surface;
		cursor: pointer;
		transition: border-color 0.15s ease;

		&:hover {
			border-color: rgba($ai-blue, 0.35);
		}
		& + & {
			margin-top: 12px;
		}
		&.is-disabled {
			opacity: 0.55;
			cursor: default;
		}
	}
	&__switch-text {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}
	&__switch-title {
		font-size: 13.5px;
		font-weight: 600;
		color: $ai-text;
	}
	&__switch-desc {
		font-size: 12px;
		line-height: 1.5;
		color: $ai-muted;
	}

	// ---- Actions -----------------------------------------------------------
	&__actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
		margin-top: 20px;
		padding-top: 18px;
		border-top: 1px solid $ai-line;

		button {
			flex: none;
			height: 42px;
			padding: 0 22px;
			border: none;
			border-radius: 9px;
			background: $ai-blue;
			color: #fff;
			font-size: 14px;
			font-weight: 600;
			cursor: pointer;
			transition: background 0.15s ease;

			&:hover:not(:disabled) {
				background: $ai-blue-dark;
			}
			&:disabled {
				opacity: 0.65;
				cursor: not-allowed;
			}
		}
	}
	&__actions-note {
		margin: 0;
		font-size: 12px;
		color: $ai-muted;

		a {
			color: $ai-blue;
			text-decoration: none;

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

// ============================================================================
// iOS-style toggle (kept from the previous markup — the switch element itself
// is unchanged, so the class names stay).
//
// Geometry matches the `.btl-check` switch used across the admin: a 40x22 track
// around an 18px knob. The old track declared a 13px CONTENT height with 5px
// padding around a 20px knob, so the knob bulged past the track's edges.
// ============================================================================
body .betterlinks-body .bl-ai {
	.btl-ai-toggle {
		position: relative;
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
	}

	.btl-ai-toggle__input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		opacity: 0;
		cursor: pointer;
		z-index: 1;
	}

	.is-disabled .btl-ai-toggle__input {
		cursor: default;
	}

	.btl-ai-toggle__track {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		width: 40px;
		height: 22px;
		padding: 2px;
		border-radius: 999px;
		background: #cdd5e3;
		transition: background 0.2s ease;
	}

	.btl-ai-toggle__thumb {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		transform: translateX(0);
		transition: transform 0.2s ease;
	}

	.btl-ai-toggle__input:checked + .btl-ai-toggle__track {
		background: #3b6ef5;
	}
	.btl-ai-toggle__input:checked + .btl-ai-toggle__track .btl-ai-toggle__thumb {
		transform: translateX(18px);
	}
	.btl-ai-toggle__input:focus-visible + .btl-ai-toggle__track {
		box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.3);
	}
}

// ============================================================================
// Dark mode
// ============================================================================
body.betterlinks-dark-mode .betterlinks-body .bl-ai {
	$d-surface: #252f47;
	$d-inner: #1f283d;
	$d-border: #36405a;
	$d-text: #e5e9f2;
	$d-muted: #9aa5bd;
	$d-blue: #6f97ff;

	.bl-ai__title {
		color: $d-text;
	}
	.bl-ai__subtitle,
	.bl-ai__hint,
	.bl-ai__actions-note,
	.bl-ai__provider-desc,
	.bl-ai__switch-desc {
		color: $d-muted;
	}

	.bl-ai__status {
		border-color: $d-border;
		background: $d-inner;
		color: $d-muted;

		&.is-ok {
			border-color: rgba(34, 197, 94, 0.4);
			background: rgba(34, 197, 94, 0.14);
			color: #86efac;
		}
	}

	.bl-ai__card {
		border-color: $d-border;
		background: $d-surface;
	}
	.bl-ai__card-head {
		border-bottom-color: $d-border;
		background: $d-inner;
	}
	.bl-ai__card-title,
	.bl-ai__provider-name,
	.bl-ai__switch-title,
	.bl-ai__label {
		color: $d-text;
	}
	.bl-ai__card-desc {
		color: $d-muted;
	}

	.bl-ai__provider,
	.bl-ai__switch-row {
		border-color: $d-border;
		background: $d-inner;

		&:hover:not(:disabled) {
			border-color: rgba($d-blue, 0.5);
		}
	}
	.bl-ai__provider.is-active {
		border-color: $d-blue;
		background: rgba($d-blue, 0.12);
		box-shadow: 0 0 0 3px rgba($d-blue, 0.16);
	}
	.bl-ai__provider-mark {
		background: rgba($d-blue, 0.16);
		color: $d-blue;
	}
	.bl-ai__provider-check {
		border-color: $d-border;
		background: $d-surface;
	}
	.bl-ai__provider.is-active .bl-ai__provider-check {
		border-color: $d-blue;
		background: $d-blue;
		color: #101828;
	}

	input[type='text'],
	input[type='password'],
	input[type='number'] {
		border-color: $d-border;
		background: $d-inner;
		color: $d-text;

		&::placeholder {
			color: #8d98b3;
		}
		&:focus {
			border-color: $d-blue;
			box-shadow: 0 0 0 3px rgba($d-blue, 0.2);
		}
		&:disabled {
			background: #1a2233;
			color: $d-muted;
		}
	}

	.btl-react-select__control {
		border-color: $d-border;
		background: $d-inner;

		&--is-focused {
			border-color: $d-blue;
			box-shadow: 0 0 0 3px rgba($d-blue, 0.2);
		}
	}

	.bl-ai__key-toggle,
	.bl-ai__suffix {
		color: $d-muted;
	}
	.bl-ai__key-toggle:hover {
		background: rgba(255, 255, 255, 0.06);
		color: $d-blue;
	}

	.bl-ai__error {
		border-color: rgba(248, 113, 113, 0.45);
		background: rgba(248, 113, 113, 0.12);
		color: #fca5a5;
	}

	.bl-ai__actions {
		border-top-color: $d-border;
	}
	.bl-ai__card-icon svg {
		box-shadow: none;
	}
	.btl-ai-toggle__track {
		background: #414d6b;
	}
}

// ============================================================================
// Free teaser
// ============================================================================
// The free plugin renders the same `.bl-ai` markup as Pro, but inert: the
// controls are divs rather than form elements, so nothing can be focused,
// typed into or submitted. Clicking anywhere opens the upgrade modal.
body .betterlinks-body .bl-ai--teaser {
	.bl-ai__card-body,
	.bl-ai__providers {
		// A picture of the feature, not a form — the card owns the click.
		pointer-events: none;
		user-select: none;
	}

	// Faux controls, styled to match the real input/select skin.
	.bl-ai__fauxinput {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		height: 42px;
		padding: 0 12px;
		border: 1px solid $ai-border;
		border-radius: 9px;
		background: $ai-surface;
		color: $ai-muted;
		font-size: 14px;

		svg {
			flex: none;
			color: $ai-muted;
		}
	}
	// Dots standing in for a masked key.
	.bl-ai__fauxinput--key {
		letter-spacing: 2px;
		color: #98a2b3;
	}

	.bl-ai__card {
		cursor: pointer;
	}

	// Unlock row, replacing the Save button in the action bar.
	.bl-ai__unlock {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 42px;
		padding: 0 20px;
		border: none;
		border-radius: 9px;
		background: $ai-blue;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.15s ease;

		&:hover {
			background: $ai-blue-dark;
			color: #fff;
		}
		svg {
			flex: none;
		}
	}
}

body.betterlinks-dark-mode .betterlinks-body .bl-ai--teaser {
	.bl-ai__fauxinput {
		border-color: #36405a;
		background: #1f283d;
		color: #9aa5bd;

		svg {
			color: #9aa5bd;
		}
	}
	.bl-ai__fauxinput--key {
		color: #8d98b3;
	}
}