@layer component {
	.feedback-widget {
		position: fixed;
		right: 1.25rem;
		bottom: 1.25rem;
		z-index: 30;
	}

	.feedback-bubble {
		background-color: var(--grey-900);
		color: var(--white);
		border: 1px solid var(--grey-900);
		border-radius: 0.5rem;
		box-shadow: 0 0.5rem 1.25rem var(--grey-shadow);
		font-size: 0.875rem;
		font-weight: 600;
		padding: 0.7rem 0.9rem;
	}

	.feedback-bubble:hover,
	.feedback-bubble:focus {
		background-color: var(--grey-800);
	}

	.feedback-backdrop {
		position: fixed;
		inset: 0;
		background-color: #10182866;
		z-index: 35;
	}

	.feedback-panel {
		position: fixed;
		right: 1.25rem;
		bottom: 4.75rem;
		width: min(24rem, calc(100vw - 2rem));
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
		background-color: var(--white);
		border: 1px solid var(--grey-200);
		border-radius: 0.5rem;
		box-shadow: 0 1rem 2rem var(--grey-shadow);
		padding: 1rem;
		z-index: 40;
	}

	.feedback-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 0.75rem;
	}

	.feedback-panel-header h2 {
		font-size: 1.1rem;
		line-height: 1.35;
		margin: 0;
	}

	.feedback-close {
		border-radius: 0.5rem;
		color: var(--grey-600);
		padding: 0.25rem;
	}

	.feedback-close:hover,
	.feedback-close:focus {
		background-color: var(--grey-100);
	}

	.feedback-close svg {
		height: 1.25rem;
		width: 1.25rem;
	}

	.feedback-form {
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
	}

	.feedback-form textarea {
		resize: vertical;
	}

	.feedback-actions {
		display: flex;
		justify-content: flex-end;
		gap: 0.5rem;
		padding-top: 0.25rem;
	}

	.feedback-status {
		border-radius: 0.5rem;
		font-size: 0.875rem;
		margin: 0 0 0.75rem;
		padding: 0.65rem 0.75rem;
	}

	.feedback-status.success {
		background-color: var(--success-50);
		color: var(--success-800);
	}

	.feedback-status.error {
		background-color: var(--error-50);
		color: var(--error-800);
	}

	.feedback-form .field.error input,
	.feedback-form .field.error textarea,
	.feedback-form .field.error select {
		border-color: var(--error-300);
	}

	@media (max-width: 42rem) {
		.feedback-widget {
			right: 1rem;
			bottom: 1rem;
		}

		.feedback-panel {
			right: 1rem;
			bottom: 4.5rem;
			width: calc(100vw - 2rem);
		}
	}
}