/**
 * Settings page — review & support card.
 */

.aipc-feedback {
	--aipc-ink: #0f172a;
	--aipc-muted: #475569;
	--aipc-accent: #0d9488;
	--aipc-accent-hover: #0f766e;
	--aipc-star: #f59e0b;
	--aipc-surface-a: #f0f7f6;
	--aipc-surface-b: #e8eef8;
	--aipc-border: rgba(15, 23, 42, 0.08);

	position: relative;
	margin-top: 2.5rem;
	max-width: 40rem;
	overflow: hidden;
	border: 1px solid var(--aipc-border);
	border-radius: 14px;
	background:
		radial-gradient(ellipse 80% 60% at 100% 0%, rgba(13, 148, 136, 0.14), transparent 55%),
		radial-gradient(ellipse 70% 50% at 0% 100%, rgba(59, 130, 246, 0.1), transparent 50%),
		linear-gradient(145deg, var(--aipc-surface-a) 0%, var(--aipc-surface-b) 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
	animation: aipc-feedback-in 0.55s ease-out both;
}

.aipc-feedback__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.35;
	background-image:
		linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 85%);
}

.aipc-feedback__body {
	position: relative;
	padding: 1.5rem 1.65rem 1.4rem;
}

.aipc-feedback__stars {
	margin: 0 0 0.65rem;
	font-size: 1.05rem;
	letter-spacing: 0.18em;
	line-height: 1;
	color: var(--aipc-star);
	text-shadow: 0 0 18px rgba(245, 158, 11, 0.35);
	animation: aipc-stars-glow 2.8s ease-in-out infinite;
}

.aipc-feedback__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--aipc-ink);
}

.aipc-feedback__lead {
	margin: 0 0 1.15rem;
	max-width: 34rem;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--aipc-muted);
}

.aipc-feedback__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.15rem;
	margin-bottom: 1rem;
}

.aipc-feedback__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.1rem;
	border-radius: 8px;
	background: linear-gradient(180deg, #14b8a6 0%, var(--aipc-accent) 100%);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.25) inset,
		0 6px 16px -6px rgba(13, 148, 136, 0.55);
	transition:
		transform 0.18s ease,
		background 0.18s ease,
		box-shadow 0.18s ease;
}

.aipc-feedback__cta:hover,
.aipc-feedback__cta:focus {
	background: linear-gradient(180deg, #2dd4bf 0%, var(--aipc-accent-hover) 100%);
	color: #fff !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.3) inset,
		0 8px 20px -6px rgba(13, 148, 136, 0.65);
	transform: translateY(-1px);
}

.aipc-feedback__cta:focus {
	outline: 2px solid rgba(13, 148, 136, 0.45);
	outline-offset: 2px;
}

.aipc-feedback__support {
	font-size: 13px;
	font-weight: 500;
	color: var(--aipc-accent) !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.aipc-feedback__support:hover,
.aipc-feedback__support:focus {
	color: var(--aipc-accent-hover) !important;
	border-bottom-color: rgba(13, 148, 136, 0.45);
}

.aipc-feedback__note {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(15, 23, 42, 0.07);
	font-size: 12.5px;
	line-height: 1.5;
	color: #64748b;
}

@keyframes aipc-feedback-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes aipc-stars-glow {
	0%,
	100% {
		text-shadow: 0 0 14px rgba(245, 158, 11, 0.28);
		opacity: 0.92;
	}
	50% {
		text-shadow: 0 0 22px rgba(245, 158, 11, 0.48);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aipc-feedback,
	.aipc-feedback__stars,
	.aipc-feedback__cta {
		animation: none;
		transition: none;
	}
}