@ckeditor/ckeditor5-ai/theme/aiballoon/aiballoon.css

AI features for CKEditor 5.

/*
 * What you're currently looking at is the source code of a legally protected, proprietary software.
 * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
 * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 *
 * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

:root {
	/* Taken from old AI Assistant */
	--ck-color-ai-selection: hsl(262.5, 60%, 90%);

	/* Primary button */
	--ck-ai-button-primary-color: hsla(0, 0%, 100%, 1);
	--ck-ai-button-primary-disabled-color: hsla(0, 0%, 100%, 1);
	--ck-ai-button-primary-background-color: hsla(263, 59%, 52%, 1);
	--ck-ai-button-primary-disabled-background-color: hsla(263, 59%, 52%, 0.5);
	--ck-ai-button-primary-hover-background-color: hsla(263, 59%, 40%, 1);

	/* Secondary button */
	--ck-ai-button-secondary-color: hsla(263, 59%, 52%, 1);
	--ck-ai-button-secondary-disabled-color: hsla(263, 59%, 52%, 0.5);
	--ck-ai-button-secondary-background-color: hsla(0, 0%, 100%, 1);
	--ck-ai-button-secondary-disabled-background-color: hsla(0, 0%, 100%, 0.5);
	--ck-ai-button-secondary-border-color: hsla(262, 51%, 80%, 1);
	--ck-ai-button-secondary-disabled-border-color: hsla(262, 51%, 80%, 0.5);
	--ck-ai-button-secondary-hover-background-color: hsla(262, 100%, 96%, 1);
	--ck-ai-button-secondary-active-background-color: hsla(262, 100%, 96%, 1);
}

.ck.ai-balloon {
	--ck-ai-balloon-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ck-ai-balloon-disclaimer-text-color: hsla(0, 0%, 44%, 1);

	.ck-dialog__content {
		/* Use min() to ensure the width is not greater than the dialog max width */
		width: min(580px, var(--ck-dialog-max-width));
		padding: var(--ck-spacing-large);
	}

	.ck-ai-suggestion__header {
		display: none
	}

	.ck.ck-ai-balloon__toolbar {
		border: none;
		padding: 0;
		margin-top: var(--ck-spacing-medium);
		margin-bottom: 0;

		.ck-button_with-text {
			margin-bottom: 0;
			margin-top: 0;
		}
	}

	.ck-ai-balloon__disclaimer {
		margin-top: var(--ck-spacing-medium);

		.ck-ai-balloon__disclaimer-content {
			color: var(--ck-ai-balloon-disclaimer-text-color);
			font-size: 0.75em;
			line-height: 1.025em;
			text-align: left;
			word-break: normal;
			text-wrap: auto;
		}
	}

	.ck-ai-suggestion__body {
		height: 150px;
		word-break: normal;
		text-wrap: auto;
		overflow-y: auto;

		& pre>code {
			white-space: pre-wrap;
		}

		.ck-suggestion-marker-insertion:not([data-author-id="$aiSuggestion"]),
		.ck-suggestion-marker-formatInline:not([data-author-id="$aiSuggestion"]),
		.ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"]) {
			border-top: 3px solid var(--ck-ai-suggestion-inactive-color-border);
			border-bottom: 3px solid var(--ck-ai-suggestion-inactive-color-border);
			background: var(--ck-ai-suggestion-inactive-color-background);

			&.ck-widget {
				border: 3px solid var(--ck-ai-suggestion-inactive-color-border);
			}
		}

		.ck-suggestion-marker-formatBlock:not([data-author-id="$aiSuggestion"]) {
			box-shadow: -7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-ai-suggestion-inactive-color-background);
		}

		.ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"]) {
			text-decoration: line-through;
			text-decoration-thickness: 3px;
			text-decoration-color: var(--ck-ai-suggestion-inactive-color-border);
		}

		.ck-suggestion-marker-insertion.table > tbody > tr > td {
			background-color: var(--ck-color-suggestion-widget-insertion-background);
		}
	}

	.ck-ai-suggestion__changes {
		height: 150px;
		overflow-y: auto;
	}

	* {
		font-family: var(--ck-ai-balloon-font-family) !important;
	}

	.ck-ai-suggestion__changes *,
	.ck-ai-suggestion__body *,
	.ck-ai-suggestion__change * {
		white-space: normal;
		line-height: 1.4em;
	}
}

.ck.ai-balloon-rotator {
	.ck.ck-form__header {
		justify-content: center;
		position: relative;

		h2.ck.ck-form__header__label {
			flex-grow: 0;
		}

		button.ck-button {
			margin-right: var(--ck-spacing-large);
			margin-left: var(--ck-spacing-large);
		}

		.ck-button:last-child {
			position: absolute;
			right: var(--ck-spacing-large);
		}
	}

	&::after {
		content: "";
		position: absolute;
		top: 8px;
		left: 8px;
		width: 100%;
		height: 100%;
		background: var(--ck-color-dialog-background);
		z-index: -1;
		border-radius: var(--ck-border-radius);
		box-shadow: var(--ck-drop-shadow), 0 0;
		border: 1px solid var(--ck-color-base-border);
	}
}

/* Buttons styles will be removed after shared code is merged. */
.ck.ck-button {
	&.ck-ai-button-primary {
		color: var(--ck-ai-button-primary-color);
		background-color: var(--ck-ai-button-primary-background-color);
		border: none;

		&:hover {
			background-color: var(--ck-ai-button-primary-hover-background-color);
		}

		&:disabled {
			color: var(--ck-ai-button-primary-disabled-color);
			background-color: var(--ck-ai-button-primary-disabled-background-color);
		}
	}

	&.ck-ai-button-secondary {
		color: var(--ck-ai-button-secondary-color);
		background-color: var(--ck-ai-button-secondary-background-color);
		border: 1px solid var(--ck-ai-button-secondary-border-color);

		&:hover {
			background-color: var(--ck-ai-button-secondary-hover-background-color);
		}

		&:active,
		&.ck-on {
			background-color: var(--ck-ai-button-secondary-active-background-color);
		}

		&:disabled {
			color: var(--ck-ai-button-secondary-disabled-color);
			background-color: var(--ck-ai-button-secondary-disabled-background-color);
			border: 1px solid var(--ck-ai-button-secondary-disabled-border-color);
		}
	}
}

.ck-ai-suggestion__container .ck.ck-ai-suggestion__loader {
	padding: var(--ck-spacing-large) !important;
	height: 150px;

	.ck.ck-spinner-container.ck-ai-spinner .ck-spinner {
		--ck-ai-spinner-size: 18px;
	}

	.ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_small {
		--ck-ai-spinner-size: 18px;
	}

	.ck-ai-suggestion__loader-text {
		margin-left: var(--ck-spacing-medium);
	}
}

.ck-ai-suggestion__container .ck.ck-ai-suggestion__error {
	padding: var(--ck-spacing-large) !important;
	height: 150px;

	.ck-ai-suggestion__error-text {
		background-color: hsla(15, 100%, 97%, 1);
		border: 1px solid hsla(14, 100%, 68%, 1);
		color: hsla(0, 0%, 20%, 1);
		padding: var(--ck-spacing-medium);
		display: block;
		border-radius: var(--ck-border-radius);
	}
}

.ck.ck-ai-suggestion__error.ai-balloon-error .ck-ai-suggestion__error-text {
	--ck-border-radius: 4px;

	margin-bottom: var(--ck-spacing-medium);
	background-color: hsla(15, 100%, 97%, 1);
	border: 1px solid hsla(14, 100%, 68%, 1);
	color: hsla(0, 0%, 20%, 1);
	padding: var(--ck-spacing-medium);
	display: block;
	border-radius: var(--ck-border-radius);
}

/*
 * Classes used by the "fake visual selection" displayed in the content
 * when the AI Balloon is open.
 *
 * Narrow down to <span> to prevent changing background for widgets and nested editables.
 */
.ck span.ck-fake-ai-selection {
	background: var(--ck-color-ai-selection);
}

.ck .ck-widget.ck-fake-ai-selection {
	outline-color: var(--ck-color-ai-selection);
}

.ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel.ck-ai-quick-actions-group-panel {
	/* Override the height of the panel because the default height adds 2px scrollbar. */
	max-height: 316px;
}