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

.ck.ck-balloon-panel {
	&.ck-ai-chat-context-controls__add-context-balloon-panel {
		min-width: 157px;
		max-width: 250px;
		z-index: calc(var(--ck-ai-tabs-overlay-z-index) + 1);

		& .ck-ai-chat-context-controls__balloon-button {
			width: 100%;
			display: flex;
			padding-left: var(--ck-spacing-extra-large);
			padding-right: var(--ck-spacing-extra-large);

			&:first-child {
				margin-top: var(--ck-spacing-tiny);
			}

			&:last-child {
				margin-bottom: var(--ck-spacing-tiny);
			}

			& .ck-icon.ck-button__icon {
				--ck-icon-size: 16px;
			}

			& .ck-button__label {
				margin: 0;
				line-height: var(--ck-line-height-base);
			}

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

			& > .ck-ai-chat-context-controls__balloon-button-source__arrow {
				width: var(--ck-dropdown-arrow-size);

				transform: rotate(-90deg);

				/* A space to accommodate the triangle. */
				margin-left: var(--ck-spacing-standard);

				/* Nudge the arrow gently to the right because its center of gravity is to the left */
				margin-right: calc(-1 * var(--ck-spacing-small));
			}

			& > span {
				flex-grow: 1;
			}
		}
	}

	&.ck-ai-chat-context-controls__url-balloon-panel {
		z-index: calc(var(--ck-ai-tabs-overlay-z-index) + 1);

		& .ck-ai-chat-context-controls__url-form {
			width: var(--ck-ai-chat-context-controls-balloon-width);
			line-height: var(--ck-form-header-height);

			& .ck-ai-chat-context-controls__url-input-section {
				display: flex;
				align-items: flex-start;
				padding: var(--ck-spacing-large);

				&>.ck-labeled-field-view {
					width: 100%;

					&>.ck.ck-labeled-field-view__input-wrapper {
						&>.ck.ck-input {
							width: 100%;
							font: normal normal normal var(--ck-font-size-base) / var(--ck-line-height-base) var(--ck-font-face);
							vertical-align: middle;
							line-height: var(--ck-line-height-base);
						}

						&>.ck.ck-label {
							visibility: hidden;
						}
					}
				}

				&>.ck.ck-button {
					height: auto;
					margin-left: var(--ck-spacing-medium);
					background-color: var(--ck-ai-background-color-action-button);
					color: var(--ck-ai-font-color-action-button);

					&.ck-disabled {
						opacity: 0.5;

						&>.ck-button__icon {
							opacity: 1;
						}
					}
				}
			}
		}
	}

	&.ck-ai-chat-context-controls__source-balloon-panel {
		width: var(--ck-ai-chat-context-controls-balloon-width);
		z-index: calc(var(--ck-ai-tabs-overlay-z-index) + 1);

		&:has(.ck-ai-skeleton:not(.ck-hidden)) {
			overflow: hidden;
		}

		.ck.ck-search__query_with-icon {
			padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-tiny) var(--ck-spacing-large);
		}

		.ck-ai-skeleton {
			--ck-ai-skeleton-gap: var(--ck-spacing-small);

			padding-top: var(--ck-spacing-standard);
			padding-bottom: var(--ck-spacing-standard);
		}

		.ck-ai-chat-resources {
			& .ck-ai-chat-resources__list {
				overflow-y: auto;
				overflow-x: hidden;
				max-height: 210px;

				.ck-ai-chat-resources__item {
					display: flex;
					align-items: center;
					padding: var(--ck-spacing-tiny) var(--ck-spacing-extra-large);
					border-radius: var(--ck-border-radius);

					cursor: pointer;
					transition: background-color 0.2s;

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

					&.ck-ai-chat-resources__item--in-context {
						color: hsla(0, 0%, 20%, 0.5);
						pointer-events: none;

						* {
							color: inherit;
						}
					}

					.ck-ai-chat-resources__item__icon {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 1.14em;
						margin-right: 0.35em;
						flex-shrink: 0;

						.ck-icon {
							height: 1.368em;
							fill: currentColor;
						}
					}

					&.ck-ai-chat-resources__item--in-context .ck-ai-chat-resources__item__icon {
						color: hsla(0, 0%, 20%, 0.5);
					}

					.ck-ai-chat-resources__item-title {
						flex: 1;
						font-size: 1em;
						line-height: var(--ck-line-height-base);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			/*
			 * Use a fixed height for the resources list when the search input is visible so it acts like a filtered list.
			 * See https://github.com/ckeditor/ckeditor5-commercial/pull/8747.
			 */
			& .ck-search ~ .ck-ai-chat-resources__list {
				height: 210px;
			}
		}

		.ck-ai-chat-resources__list.ck-hidden {
			display: none;
		}
	}

	&.ck-ai-chat-context-controls__chip-tooltip {
		max-width: 180px;

		& .ck.ck-tooltip__text {
			white-space: normal;
			display: inline-block;
			padding: var(--ck-tooltip-text-padding) 0;
		}
	}
}