/**
 * AI Overview Block Styles
 *
 * @package hamelp
 */

.hamelp-ai-overview {
	&__form {
		display: flex;
		gap: 0.5rem;
	}

	&__input {
		flex: 1;
		padding: 0.75rem;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 1rem;

		&:focus {
			outline: none;
			border-color: #0073aa;
			box-shadow: 0 0 0 1px #0073aa;
		}
	}

	&__button {
		padding: 0.75rem 1.5rem;
		background: #0073aa;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 1rem;
		transition: background 0.2s ease;

		&:hover {
			background: #005a87;
		}

		&:disabled {
			opacity: 0.5;
			cursor: wait;
		}
	}

	&__result {
		margin-top: 1rem;
		padding: 1rem;
		border-radius: 4px;
		min-height: 2rem;
	}

	&.is-loading &__result {
		background: #f5f5f5;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	&.is-loading &__button {
		opacity: 0.5;
		cursor: wait;
	}

	&.has-result &__result {
		background: #f0f7fc;
		border: 1px solid #0073aa;
	}

	&.has-error &__result {
		background: #fef7f1;
		border: 1px solid #d63638;
	}

	&__answer {
		line-height: 1.6;

		p {
			margin: 0 0 1em;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	&__error {
		color: #d63638;
	}

	&__sources {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid rgba(0, 115, 170, 0.2);
		font-size: 0.9em;

		p {
			margin: 0 0 0.5rem;
			font-weight: 600;
		}

		ul {
			margin: 0;
			padding-left: 1.5rem;
		}

		li {
			margin-bottom: 0.25rem;
		}

		a {
			color: #0073aa;
			text-decoration: none;

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

	// Editor preview styles
	&__preview {
		display: flex;
		gap: 0.5rem;

		input,
		button {
			opacity: 0.7;
		}
	}

	&__note {
		margin-top: 0.5rem;
		font-size: 0.85em;
		color: #666;
		font-style: italic;
	}

	// Spinner
	.spinner {
		display: inline-block;
		width: 1em;
		height: 1em;
		border: 2px solid #ccc;
		border-top-color: #0073aa;
		border-radius: 50%;
		animation: hamelp-spin 0.8s linear infinite;
	}

	@keyframes hamelp-spin {
		to {
			transform: rotate(360deg);
		}
	}
}