@ckeditor/ckeditor5-ai/theme/aichat/aichat-controls.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/prompt-input.css';
@import './aichat-controls/prompt-capabilities.css';
@import './aichat-controls/model-unavailable-message.css';
@import './aichat-controls/aichat-context-controls.css';
@import './aichat-controls/aichat-context-chip.css';
@import './aichat-controls/aichat-controls-button.css';
@import './aichat-controls/aichat-controls-loader.css';
@import './aichat-controls/aichat-context-controls-balloon-panels.css';

.ck.ck-ai-chat-controls {
	padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard);
	line-height: var(--ck-form-header-height);
	border-top: var(--ck-ai-chat-border-width) solid var(--ck-color-base-border);

	/* When loader wrapper (second child) is visible, bottom padding should be larger to match the top one. */
	&:has(>:first-child.ck-hidden) {
		padding-bottom: var(--ck-spacing-large);
	}

	&.ck-ai-chat-controls-disabled {
		opacity: 0.5;
		pointer-events: none;
		cursor: default;
	}

	& .ck-ai-chat-controls__model-selection {
		line-height: 0;

		& .ck-dropdown__panel.ck-dropdown__panel_ne {
			top: auto;
			padding-top: .5em;
			width: 426px;
			max-width: max-content;
			max-height: 600px;
			overflow-y: scroll;
		}

		& .ck-button.ck-dropdown__button {
			border: 0;
			font-size: .9em;
			margin-inline-end: 0;
			color: var(--ck-ai-chat-color-icon);
			padding-top: 0;
			padding-bottom: 0;
			min-height: auto;

			&.ck-on .ck-dropdown__arrow {
				transform: rotate(180deg);
			}

			.ck-button__label {
				width: auto;
			}

			&:hover {
				background-color: var(--ck-ai-chat-button-active-background-color);
				color: var(--ck-ai-chat-button-hover-color);

				& .ck-dropdown__arrow {
					color: var(--ck-ai-chat-button-hover-color);
				}
			}

			&.ck-on:not(:hover) {
				background-color: var(--ck-ai-chat-button-active-background-color);
				color: var(--ck-ai-background-color-action-button);

				& .ck-dropdown__arrow {
					color: var(--ck-ai-background-color-action-button);
				}
			}
		}

		& .ck-list {
			& > .ck-list__item {
				&:not(:last-child) {
					margin-bottom: var(--ck-spacing-medium-small);
				}

				& > .ck-button {
					align-items: start;

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

					& > .ck-list-item-button__check-holder {
						height: 1.2em;
						flex-shrink: 0;

						& > .ck-list-item-button__check-icon {
							padding-top: 2px;
						}
					}

					& > .ck-button__label {
						line-height: 1.3;

						& > .ck-ai-chat-controls__model-selection__item-name {
							line-height: 1.3;
							font-weight: 500;
						}

						& > .ck-ai-chat-controls__model-selection__item-description {
							line-height: 1.3;
							padding-top: var(--ck-spacing-tiny);

							& > span {
								color: var(--ck-ai-chat-color-icon);
								line-height: 1;
								white-space: normal;
							}
						}

						& > .ck-ai-chat-controls__model-selection__item-capabilities {
							line-height: 1.3;
							--ck-icon-font-size: .5em;

							& > span {
								color: var(--ck-ai-chat-color-icon);

								&:nth-of-type(2n) {
									font-weight: bold;
									display: inline-block;
									width: 4ch;
								}
							}

							& > .ck-icon {
								margin-inline-end: var(--ck-spacing-standard);
								color: var(--ck-ai-chat-color-icon);
								fill: var(--ck-ai-chat-color-icon);
							}
						}
					}
				}
			}
		}
	}
}