@ckeditor/ckeditor5-ai/theme/aichat/aichat.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
 */

@import './aichat-controls.css';
@import './aichatfeed.css';
@import './aisuggestioncontainer.css';
@import './aiminitoolbar.css';
@import '../common/aiheader.css';
@import '../common/ainotification.css';
@import '../common/aiskeleton.css';
@import '../common/aispinner.css';
@import '../common/aibutton.css';
@import '../common/aidisclaimer.css';
@import '../common/aitrackchanges.css';

:root {
	--ck-ai-border-color-main: hsla(216, 5%, 81%, 1);
	--ck-ai-border-color-button: hsla(262, 51%, 80%, 1);
	--ck-ai-background-color-action-button: hsla(263, 59%, 52%, 1);
	--ck-ai-font-color-action-button: hsl(0, 0%, 100%);

	--ck-ai-chat-color-text: hsla(263, 59%, 52%, 1);
	--ck-ai-chat-color-icon: hsla(0, 0%, 44%, 1);
	--ck-ai-chat-border-width: 1px;
	--ck-ai-chat-suggestion-icon-default-color: hsl(0, 0%, 44%);
	--ck-ai-chat-suggestion-border-hover-color: hsl(262, 64%, 78%);

	--ck-ai-chat-button-active-background-color: hsla(262, 100%, 96%, 1);
	--ck-ai-chat-button-active-color: hsla(263, 59%, 52%, 1);
	--ck-ai-chat-button-hover-color: hsla(0, 0%, 20%, 1);
	--ck-ai-chat-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ck-ai-chat-user-context-background: hsla(0, 0%, 98%, 1);

	--ck-ai-chat-flash-color: hsla(263, 59%, 52%, 0.102);
	--ck-ai-chat-flash-color-text: hsla(263, 59%, 52%, 1);
	--ck-ai-chat-animation-duration: 0.6s;
	--ck-ai-chat-animation-timing: ease-out;

	--ck-ai-chat-controls-loader-animation-duration: 1.5s;
	--ck-ai-chat-controls-loader-icon-color: hsla(0, 0%, 96%, 0.98);

	--ck-ai-chat-feed-loader-icon-color: hsla(0, 0%, 85%, 1);
}

/* Note: This class name is mentioned in the guide and acts like a public API. */
.ck-ai-ui_theme {
	/* @TODO: there should be one theme applied on all NextGenAI features */
}

.ck {
	&.ck-ai-chat {
		* {
			font-family: var(--ck-ai-chat-font-family) !important;
		}

		width: 100%;
		display: flex;
		flex-direction: column;
		font-family: var(--ck-ai-chat-font-family) !important;
	}
}