@ckeditor/ckeditor5-ai 47.1.0 → 47.2.0-alpha.1

package/dist/index.css

@@ -425,6 +425,7 @@
 .ck.ck-button.ck-tab-button.ck-on {
 		border: 0;
 		background-color: var(--ck-color-tab-button-active-background);
+		color: var(--ck-color-tab-button-active-border);
 	}
 
 .ck.ck-button.ck-tab-button.ck-on .ck.ck-icon {
@@ -478,6 +479,7 @@
 	--ck-color-tabs-buttons-container-background: hsl(0, 0%, 96%);
 	--ck-color-tab-button-icon: hsl(0, 0%, 44%);
 	--ck-color-tab-button-active-icon: hsl(0, 0%, 44%);
+	--ck-color-tab-button-active-border: hsl(0, 0%, 44%);
 	--ck-color-tab-button-active-background: hsl(0, 0%, 91%);
 }
 
@@ -572,13 +574,13 @@
 .ck.ck-tabs.ck-ai-tabs {
 	--ck-tabs-buttons-container-buttons-vertical-spacing: 61.5px;
 	--ck-color-tab-button-active-icon: hsl(263, 59%, 52%);
+	--ck-color-tab-button-active-border: hsl(263, 59%, 52%);
 }
 
 .ck.ck-tabs.ck-ai-tabs .ck-tab-panel {
 		height: 100%;
 		display: flex;
 		flex-direction: column;
-		overflow: hidden;
 	}
 
 .ck.ck-tabs.ck-ai-tabs .ck-tab-panel>* {
@@ -718,7 +720,6 @@
 
 .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button > .ck-icon {
 			--ck-icon-size: 16px;
-			color: var(--ck-ai-chat-color-icon);
 		}
 
 .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button--commands {
@@ -906,7 +907,7 @@
 				--ck-icon-size: 1em;
 
 				font-size: 1em;
-				fill: var(--ck-ai-chat-color-icon);
+				color: var(--ck-ai-chat-color-icon);
 			}
 
 .ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper {
@@ -992,22 +993,26 @@
 		text-align: center;
 	}
 
+.ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled) {
+		color: var(--ck-ai-button-tertiary-filled-color);
+	}
+
 .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):hover {
-			background-color: var(--ck-ai-chat-button-active-background-color);
-			color: var(--ck-ai-chat-button-hover-color);
+			background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+			color: var(--ck-ai-button-tertiary-filled-hover-color);
 		}
 
 .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):hover .ck-button__icon {
-				fill: var(--ck-ai-chat-button-hover-color);
+				color: var(--ck-ai-button-tertiary-filled-hover-color);
 			}
 
 .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):active {
-			background-color: var(--ck-ai-chat-button-active-background-color);
-			color: var(--ck-ai-chat-button-active-color);
+			background-color: var(--ck-ai-button-tertiary-filled-active-background-color);
+			color: var(--ck-ai-button-tertiary-filled-active-color);
 		}
 
 .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):active .ck-button__icon {
-				fill: var(--ck-ai-chat-button-active-color);
+				color: var(--ck-ai-button-tertiary-filled-active-color);
 			}
 
 .ck.ck-button.ck-ai-chat-controls-button.ck-on:not(.ck-disabled):not(:hover):not(:active):not(.ck-disabled) {
@@ -1043,8 +1048,9 @@
  */
 
 :root {
-	--ck-ai-chat-loader-icon-dot-color: hsl(216, 5%, 81%);
-	--ck-ai-chat-loader-icon-dot-active-color: hsl(0, 0%, 20%);
+	--ck-ai-chat-controls-loader-icon-dot-color: hsl(216, 5%, 81%);
+	--ck-ai-chat-controls-loader-icon-dot-active-color: hsl(0, 0%, 20%);
+	--ck-ai-chat-controls-loader-color: hsla(0, 0%, 44%, 1);
 	--ck-ai-loader-dot-pulse-dot-size: 6px;
 	--ck-ai-loader-dot-pulse-width: 40px;
 	--ck-ai-loader-dot-pulse-height: 20px;
@@ -1052,65 +1058,46 @@
 	--ck-ai-loader-dot-pulse-animation-delay: 0.3s;
 }
 
-.ck-ai-chat-controls-loader {
-	display: flex;
-	align-items: center;
-	color: var(--ck-color-input-disabled-text);
-}
-
-.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon {
-		box-sizing: border-box;
+.ck-ai-chat-controls .ck-ai-chat-controls-loader {
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
-		width: var(--ck-ai-loader-dot-pulse-width);
-		height: var(--ck-ai-loader-dot-pulse-height);
-		margin-inline-end: var(--ck-spacing-standard);
-		padding: var(--ck-spacing-small) var(--ck-spacing-medium-small);
-		border-radius: var(--ck-ai-loader-dot-pulse-border-radius);
-		background-color: var(--ck-ai-chat-loader-icon-color);
-	}
-
-.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot {
-		width: var(--ck-ai-loader-dot-pulse-dot-size);
-		height: var(--ck-ai-loader-dot-pulse-dot-size);
-		border-radius: 50%;
-		background-color: var(--ck-ai-chat-loader-icon-dot-color);
-		flex-shrink: 0;
-
-		animation: ck-ai-loader-dot-pulse var(--ck-ai-chat-loader-animation-duration) infinite;
+		color: var(--ck-ai-chat-controls-loader-color);
 	}
 
-.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(1) {
-			animation-delay: 0s;
-		}
-
-.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(2) {
-			animation-delay: var(--ck-ai-loader-dot-pulse-animation-delay);
-		}
+.ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon {
+			box-sizing: border-box;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: var(--ck-ai-loader-dot-pulse-width);
+			height: var(--ck-ai-loader-dot-pulse-height);
+			margin-inline-end: var(--ck-spacing-standard);
+			padding: var(--ck-spacing-small) var(--ck-spacing-medium-small);
+			border-radius: var(--ck-ai-loader-dot-pulse-border-radius);
+			background-color: var(--ck-ai-chat-controls-loader-icon-color);
+		}
+
+.ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot {
+			width: var(--ck-ai-loader-dot-pulse-dot-size);
+			height: var(--ck-ai-loader-dot-pulse-dot-size);
+			border-radius: 50%;
+			background-color: var(--ck-ai-chat-controls-loader-icon-dot-color);
+			flex-shrink: 0;
 
-.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(3) {
-			animation-delay: calc(var(--ck-ai-loader-dot-pulse-animation-delay) * 2);
+			animation: ck-ai-loader-dot-pulse var(--ck-ai-chat-controls-loader-animation-duration) infinite;
 		}
 
-.ck.ck-button.ai-chat-controls-loader__cancel-button {
-	min-height: 22px;
-	padding: 0 var(--ck-spacing-medium) 0 var(--ck-spacing-small);
-	border: var(--ck-ai-chat-border-width) solid var(--ck-ai-border-color-button);
-	border-radius: var(--ck-border-radius);
-	color: var(--ck-ai-chat-color-text);
-}
+.ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(1) {
+				animation-delay: 0s;
+			}
 
-.ck.ck-button.ai-chat-controls-loader__cancel-button .ck.ck-icon.ck-button__icon {
-		color: var(--ck-ai-chat-color-text);
-		height: 14px;
-		width: 14px;
-		margin-right: 4px;
-	}
+.ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(2) {
+				animation-delay: var(--ck-ai-loader-dot-pulse-animation-delay);
+			}
 
-.ck.ck-button.ai-chat-controls-loader__cancel-button:hover {
-		background-color: var(--ck-ai-button-secondary-hover-background-color);
-	}
+.ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(3) {
+				animation-delay: calc(var(--ck-ai-loader-dot-pulse-animation-delay) * 2);
+			}
 
 .ck-ai-chat-controls-loader-wrapper {
 	display: flex;
@@ -1119,11 +1106,11 @@
 
 @keyframes ck-ai-loader-dot-pulse {
 	0%, 80%, 100% {
-		background-color: var(--ck-ai-chat-loader-icon-dot-color);
+		background-color: var(--ck-ai-chat-controls-loader-icon-dot-color);
 	}
 
 	40% {
-		background-color: var(--ck-ai-chat-loader-icon-dot-active-color);
+		background-color: var(--ck-ai-chat-controls-loader-icon-dot-active-color);
 	}
 }
 
@@ -1233,7 +1220,6 @@
 
 .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel {
 		width: var(--ck-ai-chat-context-controls-balloon-width);
-		height: 319px;
 		z-index: calc(var(--ck-ai-tabs-overlay-z-index) + 1);
 	}
 
@@ -1252,61 +1238,70 @@
 			padding-bottom: var(--ck-spacing-standard);
 		}
 
-.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list {
-			height: 233px;
-			overflow-y: auto;
-			overflow-x: hidden;
-		}
-
-.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .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;
+.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-ai-chat-resources__list {
+				overflow-y: auto;
+				overflow-x: hidden;
+				max-height: 210px;
 			}
 
-.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item:hover {
-					background-color: var(--ck-ai-button-secondary-hover-background-color);
-				}
+.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-ai-chat-resources__list .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);
 
-.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item.ck-ai-chat-resources__item--in-context {
-					color: hsla(0, 0%, 20%, 0.5);
-					pointer-events: none;
+					cursor: pointer;
+					transition: background-color 0.2s;
 				}
 
-.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item.ck-ai-chat-resources__item--in-context * {
-						color: inherit;
+.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-ai-chat-resources__list .ck-ai-chat-resources__item:hover {
+						background-color: var(--ck-ai-button-secondary-hover-background-color);
 					}
 
-.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item .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.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-ai-chat-resources__list .ck-ai-chat-resources__item.ck-ai-chat-resources__item--in-context {
+						color: hsla(0, 0%, 20%, 0.5);
+						pointer-events: none;
+					}
+
+.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-ai-chat-resources__list .ck-ai-chat-resources__item.ck-ai-chat-resources__item--in-context * {
+							color: inherit;
+						}
 
-.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item .ck-ai-chat-resources__item__icon .ck-icon {
-						height: 1.368em;
-						fill: currentColor;
+.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-ai-chat-resources__list .ck-ai-chat-resources__item .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.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item.ck-ai-chat-resources__item--in-context .ck-ai-chat-resources__item__icon {
-					color: hsla(0, 0%, 20%, 0.5);
-				}
+.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-ai-chat-resources__list .ck-ai-chat-resources__item .ck-ai-chat-resources__item__icon .ck-icon {
+							height: 1.368em;
+							fill: currentColor;
+						}
 
-.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item .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;
-				}
+.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-ai-chat-resources__list .ck-ai-chat-resources__item.ck-ai-chat-resources__item--in-context .ck-ai-chat-resources__item__icon {
+						color: hsla(0, 0%, 20%, 0.5);
+					}
+
+.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-ai-chat-resources__list .ck-ai-chat-resources__item .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.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources .ck-search ~ .ck-ai-chat-resources__list {
+				height: 210px;
+			}
 
 .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list.ck-hidden {
 			display: none;
@@ -1345,7 +1340,6 @@
 	}
 
 .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne {
-			bottom: calc(100% + 10px);
 			top: auto;
 			padding-top: .5em;
 			width: 426px;
@@ -1354,30 +1348,6 @@
 			overflow-y: scroll;
 		}
 
-.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::before,
-			.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::after {
-				content: '';
-				position: absolute;
-				left: calc(2 * var(--ck-balloon-arrow-half-width));
-				bottom: calc(-1 * var(--ck-balloon-arrow-height));
-				width: 0;
-				height: 0;
-				border-style: solid;
-				border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
-				border-color: var(--ck-color-panel-border) transparent transparent;
-			}
-
-.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::before {
-				z-index: var(--ck-balloon-panel-arrow-z-index);
-				margin-bottom: calc(-1 * var(--ck-balloon-border-width));
-				filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
-			}
-
-.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::after {
-				z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
-				margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width));
-			}
-
 .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button {
 			border: 0;
 			font-size: .9em;
@@ -1396,13 +1366,21 @@
 				width: auto;
 			}
 
-.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button:hover,
-			.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on {
+.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button:hover {
+				background-color: var(--ck-ai-chat-button-active-background-color);
+				color: var(--ck-ai-chat-button-hover-color);
+			}
+
+.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button:hover .ck-dropdown__arrow {
+					color: var(--ck-ai-chat-button-hover-color);
+				}
+
+.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on:not(:hover) {
 				background-color: var(--ck-ai-chat-button-active-background-color);
 				color: var(--ck-ai-background-color-action-button);
 			}
 
-.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button:hover .ck-dropdown__arrow, .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on .ck-dropdown__arrow {
+.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on:not(:hover) .ck-dropdown__arrow {
 					color: var(--ck-ai-background-color-action-button);
 				}
 
@@ -1420,6 +1398,7 @@
 
 .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-list-item-button__check-holder {
 						height: 1.2em;
+						flex-shrink: 0;
 					}
 
 .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-list-item-button__check-holder > .ck-list-item-button__check-icon {
@@ -1547,31 +1526,10 @@
 			transition: none;
 		}
 .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle {
-			--ck-color-button-default-hover-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background);
-			--ck-color-button-on-hover-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background);
-			--ck-color-button-default-active-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
-			--ck-color-button-on-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
-			--ck-color-focus-border: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
-			--ck-focus-ring: 1px solid var(--ck-color-focus-border);
-
 			padding: 0 var(--ck-spacing-small);
 			min-height: 22px;
 			font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
-			color: var(--ck-ai-chat-color-icon);
 		}
-.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle:hover {
-				color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-color);
-			}
-.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle:active {
-				box-shadow: none;
-				color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
-			}
-.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle.ck-on {
-				color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
-			}
-.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle:focus {
-				border: 1px solid transparent;
-			}
 .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle > .ck-icon {
 				width: 16px;
 				height: 16px;
@@ -1609,7 +1567,7 @@
 .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message p {
 				display: inline-block;
 				background-color: var(--ck-ai-chat-feed-item-color-background-secondary);
-				padding: 8px;
+				padding: var(--ck-spacing-standard);
 				border-radius: var(--ck-ai-border-radius);
 			}
 /*
@@ -1956,6 +1914,9 @@
 						margin: 0;
 						color: var(--ck-ai-chat-suggestion-icon-default-color);
 					}
+.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title .ck-toolbar .ck-button:hover {
+							background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+						}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__content :last-child {
 					padding-bottom: 0;
 					margin-bottom: var(--ck-spacing-medium);
@@ -2017,6 +1978,7 @@
 			margin-left: 0;
 			margin-right: 0;
 			margin-bottom: var(--ck-spacing-large);
+			width: 100%;
 		}
 .ck.ck-ai-suggestion__container .ck-ai-suggestion__body,
 	.ck.ck-ai-suggestion__container .ck-ai-suggestion__changes {
@@ -2116,6 +2078,11 @@
  * 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 {
+	--ck-ai-header-color-icon: hsla(0, 0%, 44%, 1);
+	--ck-ai-header-color-text: hsla(263, 59%, 52%, 1);
+	--ck-ai-header-border-color-button: hsla(262, 51%, 80%, 1);
+}
 .ck-ai-header {
 	/* Custom values unlike the rest of editor UI. */
 	--ck-ui-component-min-height: 1.7em;
@@ -2132,17 +2099,17 @@
 			/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
 			--ck-icon-font-size: .666em;
 
-			color: var(--ck-ai-chat-color-icon);
+			color: var(--ck-ai-header-color-icon);
 		}
 .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation {
 		/* TODO: Extract this to a separate class to avoid duplication (same component and styling in Chat history - empty viewr) */
 		/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
 		font-size: 11.7px;
 		min-height: unset;
-		border: 1px solid var(--ck-ai-border-color-button);
+		border: 1px solid var(--ck-ai-header-border-color-button);
 		border-radius: var(--ck-border-radius);
 		gap: var(--ck-spacing-small);
-		color: var(--ck-ai-chat-color-text);
+		color: var(--ck-ai-header-color-text);
 	}
 .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation:hover {
 			background-color: var(--ck-ai-chat-button-active-background-color);
@@ -2156,7 +2123,7 @@
 			--ck-icon-font-size: .632em;
 
 			margin-inline-end: 0;
-			color: var(--ck-ai-chat-color-text);
+			color: var(--ck-ai-header-color-text);
 		}
 .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > span.ck-button__label {
 			position: relative;
@@ -2166,6 +2133,9 @@
 			margin-inline-start: 0;
 			margin-inline-end: var(--ck-spacing-small);
 		}
+.ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back:hover {
+				background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+			}
 .ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back > .ck-button__icon {
 				/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
 				--ck-icon-font-size: 13px;
@@ -2363,6 +2333,7 @@
 	--ck-ai-button-tertiary-disabled-text-color: hsla(263, 59%, 52%, 0.5);
 	--ck-ai-button-tertiary-text-background-color: transparent;
 	--ck-ai-button-tertiary-text-hover-background-color: hsla(262, 100%, 96%, 1);
+	--ck-ai-button-tertiary-text-hover-color: hsla(0, 0%, 20%, 1);
 
 	/* Tertiary filled button */
 	--ck-ai-button-tertiary-filled-color: hsla(0, 0%, 44%, 1);
@@ -2424,7 +2395,17 @@
 	}
 .ck.ck-button.ck-ai-button-tertiary-text:hover {
 			background-color: var(--ck-ai-button-tertiary-text-hover-background-color);
+			color: var(--ck-ai-button-tertiary-text-hover-color);
 		}
+.ck.ck-button.ck-ai-button-tertiary-text:hover > .ck.ck-button__icon {
+				color: var(--ck-ai-button-tertiary-text-hover-color);
+			}
+.ck.ck-button.ck-ai-button-tertiary-text.ck-on:hover {
+				background-color: var(--ck-ai-button-tertiary-text-hover-background-color);
+			}
+.ck.ck-button.ck-ai-button-tertiary-text.ck-on:hover > .ck.ck-button__icon {
+					color: var(--ck-ai-button-tertiary-text-hover-color);
+				}
 .ck.ck-button.ck-ai-button-tertiary-text:disabled,
 		.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled {
 			color: var(--ck-ai-button-tertiary-disabled-text-color);
@@ -2460,6 +2441,15 @@
 			.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled > .ck-button__icon {
 				opacity: 1;
 			}
+.ck.ck-button.ck-ai-button-stop-generating {
+		min-height: 22px;
+		padding: 0 var(--ck-spacing-medium) 0 var(--ck-spacing-small);
+	}
+.ck.ck-button.ck-ai-button-stop-generating .ck.ck-icon.ck-button__icon {
+			height: 14px;
+			width: 14px;
+			margin-right: 4px;
+		}
 /*
  * 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,
@@ -2497,6 +2487,13 @@
 :root {
 	--ck-ai-suggestion-inactive-color-background: hsla(128, 6%, 93%, 0.35);
 	--ck-ai-suggestion-inactive-color-border: hsla(128, 1%, 73%, 0.35);
+
+	--ck-ai-suggestion-marker-insertion-border-color: var(--ck-color-suggestion-marker-insertion-border, hsla(128, 71%, 40%, .35));
+	--ck-ai-suggestion-marker-insertion-background-color: var(--ck-color-suggestion-marker-insertion-background, hsla(128, 71%, 65%, .35));
+
+	--ck-ai-suggestion-marker-deletion-border-color: var(--ck-color-suggestion-marker-deletion-border, hsla(345, 71%, 40%, .35));
+	--ck-ai-suggestion-marker-deletion-background-color: var(--ck-color-suggestion-marker-deletion-background, hsla(345, 71%, 65%, .35));
+	--ck-ai-suggestion-marker-deletion-stroke-color: var(--ck-color-suggestion-marker-deletion-stroke, hsla(345, 71%, 20%, .5));
 }
 
 :root {
@@ -2522,8 +2519,8 @@
 	--ck-ai-chat-animation-duration: 0.6s;
 	--ck-ai-chat-animation-timing: ease-out;
 
-	--ck-ai-chat-loader-animation-duration: 1.5s;
-	--ck-ai-chat-loader-icon-color: hsla(0, 0%, 96%, 0.98);
+	--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);
 
@@ -2540,7 +2537,6 @@
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-		overflow: hidden;
 		font-family: var(--ck-ai-chat-font-family) !important;
 	}
 
@@ -2715,6 +2711,10 @@
 					color: var(--ck-ai-chat-button-active-color);
 				}
 
+.ck .ck-ai-chat-history .ck-ai-chat-history__item-actions .ck-dropdown .ck-dropdown__panel .ck-list__item .ck-button:hover, .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions .ck-dropdown .ck-dropdown__panel .ck-list__item .ck-button:active {
+							background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+						}
+
 .ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-input,
 	.ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-input_focused {
 		width: 100%;
@@ -3075,6 +3075,18 @@
 		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.
@@ -3103,18 +3115,20 @@
  */
 
 :root {
-	--ck-ai-check-list-item-hover-border-color: hsla(262, 64%, 78%, 1);
-	--ck-ai-check-list-item-active-border-color: hsla(263, 59%, 52%, 1);
-	--ck-ai-check-list-item-title-color: var(--ck-color-text);
-	--ck-ai-check-list-item-description-color: hsla(0, 0%, 44%, 1);
-	--ck-ai-check-list-item-title-icon-color: hsla(0, 0%, 44%, 1);
-	--ck-ai-check-list-model-dropdown-width: 426px;
-	--ck-ai-check-list-model-dropdown-max-height: 340px;
-	--ck-ai-check-list-model-dropdown-arrow-drop-shadow: 0 -2px 0px var(--ck-color-shadow-drop);
+	--ck-ai-review-check-list-item-hover-border-color: hsla(262, 64%, 78%, 1);
+	--ck-ai-review-check-list-item-active-border-color: hsla(263, 59%, 52%, 1);
+	--ck-ai-review-check-list-item-title-color: var(--ck-color-text);
+	--ck-ai-review-check-list-item-description-color: hsla(0, 0%, 44%, 1);
+	--ck-ai-review-check-list-item-title-icon-color: hsla(0, 0%, 44%, 1);
+	--ck-ai-review-check-list-model-dropdown-width: 426px;
+	--ck-ai-review-check-list-model-dropdown-max-height: 340px;
+	--ck-ai-review-check-list-model-dropdown-arrow-drop-shadow: 0 -2px 0px var(--ck-color-shadow-drop);
+	--ck-ai-review-check-list-model-dropdown-hover-background-color: hsla(262, 100%, 96%, 1);
+	--ck-ai-review-check-list-model-dropdown-active-color: hsla(263, 59%, 52%, 1);
 }
 
 .ck.ck-ai-review-mode * {
-		font-family: var(--ck-ai-chat-font-family) !important;
+		font-family: var(--ck-ai-review-font-family) !important;
 	}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list {
@@ -3141,7 +3155,7 @@
 			}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-description {
-				color: var(--ck-ai-check-list-item-description-color);
+				color: var(--ck-ai-review-check-list-item-description-color);
 			}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title-text,
@@ -3164,8 +3178,8 @@
 				visibility: visible;
 
 				transition: box-shadow 0.3s ease-in-out,
-					opacity 0.1s calc(0.05s * var(--ck-ai-check-list-item-index)),
-					visibility 0.1s calc(0.05s * var(--ck-ai-check-list-item-index));
+					opacity 0.1s calc(0.05s * var(--ck-ai-review-check-list-item-index)),
+					visibility 0.1s calc(0.05s * var(--ck-ai-review-check-list-item-index));
 			}
 
 @media (prefers-reduced-motion: reduce) {
@@ -3177,7 +3191,7 @@
 				}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item.ck-ai-review-mode__check-list-item_selected {
-				box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
+				box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-active-border-color) inset;
 			}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title {
@@ -3188,7 +3202,7 @@
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title > .ck-ai-review-mode__check-list-item-title-text {
 					flex-grow: 1;
-					color: var(--ck-ai-check-list-item-title-color);
+					color: var(--ck-ai-review-check-list-item-title-color);
 					font-weight: 700;
 				}
 
@@ -3197,7 +3211,7 @@
 
 					flex-shrink: 0;
 					margin-inline-start: var(--ck-spacing-small);
-					color: var(--ck-ai-check-list-item-title-icon-color);
+					color: var(--ck-ai-review-check-list-item-title-icon-color);
 
 					opacity: 0;
 					visibility: hidden;
@@ -3213,7 +3227,7 @@
 					}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item:not(.ck-ai-review-mode__check-list-item_selected):hover {
-				box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
+				box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-hover-border-color) inset;
 			}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item:not(.ck-ai-review-mode__check-list-item_selected):hover .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
@@ -3275,12 +3289,12 @@
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown > .ck.ck-button.ck-dropdown__button.ck-on,
 					.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown > .ck.ck-button.ck-dropdown__button:active {
 						background-color: var(--ck-ai-button-secondary-active-background-color);
-						color: var(--ck-ai-background-color-action-button);
+						color: var(--ck-ai-review-check-list-model-dropdown-active-color);
 					}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown > .ck.ck-button.ck-dropdown__button:hover:not(.ck-disabled) {
-						background-color: var(--ck-ai-chat-button-active-background-color);
-						color: var(--ck-ai-background-color-action-button);
+						background-color: var(--ck-ai-review-check-list-model-dropdown-hover-background-color);
+						color: var(--ck-ai-review-check-list-model-dropdown-active-color);
 					}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown > .ck.ck-button.ck-dropdown__button > .ck.ck-button__label {
@@ -3288,7 +3302,7 @@
 					}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel {
-					width: var(--ck-ai-check-list-model-dropdown-width);
+					width: var(--ck-ai-review-check-list-model-dropdown-width);
 					padding-top: var(--ck-spacing-standard);
 					top: calc(100% + var(--ck-balloon-arrow-height));
 					bottom: auto;
@@ -3310,7 +3324,7 @@
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel.ck-dropdown__panel_se::before {
 							z-index: var(--ck-balloon-panel-arrow-z-index);
 							margin-bottom: calc(-1 * var(--ck-balloon-border-width));
-							filter: drop-shadow(var(--ck-ai-check-list-model-dropdown-arrow-drop-shadow));
+							filter: drop-shadow(var(--ck-ai-review-check-list-model-dropdown-arrow-drop-shadow));
 						}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel.ck-dropdown__panel_se::after {
@@ -3319,7 +3333,7 @@
 						}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel.ck-dropdown__panel_se > .ck-list {
-							max-height: var(--ck-ai-check-list-model-dropdown-max-height);
+							max-height: var(--ck-ai-review-check-list-model-dropdown-max-height);
 							overflow-y: scroll;
 						}
 
@@ -3350,7 +3364,7 @@
 								}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel > .ck.ck-list > .ck.ck-list__item > .ck.ck-button.ck-list-item-button .ck-ai-review-mode__check-list-item-model-dropdown-description > span {
-										color: var(--ck-ai-chat-color-icon);
+										color: var(--ck-ai-review-color-icon);
 										line-height: 1;
 										white-space: normal;
 									}
@@ -3364,6 +3378,11 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-ai-review-color-text: hsla(263, 59%, 52%, 1);
+	--ck-ai-review-border-color-button: hsla(262, 51%, 80%, 1);
+}
+
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-run {
 		position: relative;
 		height: 100%;
@@ -3403,7 +3422,19 @@
 			}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:last-child {
-				border-bottom: 1px solid var(--ck-color-base-border);
+				position: relative;
+				contain: layout;
+			}
+
+.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:last-child::after {
+				display: block;
+				content: "";
+				height: 1px;
+				background: var(--ck-color-base-border);
+				position: absolute;
+				left: 0;
+				right: 0;
+				bottom: -1px;
 			}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result .ck-suggestion-marker {
@@ -3411,11 +3442,11 @@
 			}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:hover {
-				box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
+				box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-hover-border-color) inset;
 			}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_active {
-				box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
+				box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-active-border-color) inset;
 			}
 
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_removing {
@@ -3522,12 +3553,16 @@
 .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-error-container .ck-ai-review-mode__check-run-error-retry-button {
 				font-size: 11.7px;
 				min-height: unset;
-				border: 1px solid var(--ck-ai-border-color-button);
+				border: 1px solid var(--ck-ai-review-border-color-button);
 				border-radius: var(--ck-border-radius);
 				gap: var(--ck-spacing-small);
-				color: var(--ck-ai-chat-color-text);
+				color: var(--ck-ai-review-color-text);
 			}
 
+.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-error-container:not(.ck-hidden) + .ck-ai-review-mode__check-run-results-container:not(.ck-hidden) > .ck-ai-review-mode__check-run-result:first-child {
+					border-top: 1px solid var(--ck-color-base-border);
+				}
+
 @keyframes ck-ai-check-run-list-item-show {
 	0% {
 		opacity: 0;
@@ -3632,6 +3667,17 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-ai-review-mode-inactive-check-background: hsla(0, 0%, 98%, 1);
+
+	--ck-color-suggestion-marker-deletion-border-inactive: hsla(345, 1%, 74%, 0.35);
+	--ck-color-suggestion-marker-deletion-background-inactive: hsla(345, 11%, 95%, 0.35);
+	--ck-color-suggestion-marker-deletion-stroke-inactive: hsla(0, 1%, 62%, 0.35);
+
+	--ck-color-suggestion-marker-insertion-border-inactive: hsla(128, 1%, 73%, 0.35);
+	--ck-color-suggestion-marker-insertion-background-inactive: hsla(128, 6%, 93%, 0.35);
+}
+
 .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-footer {
 		margin-top: var(--ck-spacing-standard);
 		display: flex;
@@ -3654,6 +3700,16 @@
 			margin-left: auto;
 		}
 
+.ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-footer .ck.ck-button.ck-ai-review-mode__check-run-result-status-button {
+			background-color: hsla(0, 0%, 93%, 1);
+			color: hsla(0, 0%, 44%, 1);
+			border: none;
+		}
+
+.ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-footer .ck.ck-button.ck-ai-review-mode__check-run-result-status-button > .ck.ck-icon {
+				--ck-icon-size: 16px;
+			}
+
 .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response {
 		overflow: hidden;
 	}
@@ -3677,6 +3733,26 @@
 			max-height: 125px;
 		}
 
+.ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_grayout {
+		pointer-events: none;
+		background-color: var(--ck-ai-review-mode-inactive-check-background);
+	}
+
+.ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_grayout .ck-suggestion-marker.ck-suggestion-marker-deletion {
+				--ck-color-suggestion-marker-deletion-border: var(--ck-color-suggestion-marker-deletion-border-inactive);
+				--ck-color-suggestion-marker-deletion-background: var(--ck-color-suggestion-marker-deletion-background-inactive);
+				--ck-color-suggestion-marker-deletion-stroke: var(--ck-color-suggestion-marker-deletion-stroke-inactive);
+			}
+
+.ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_grayout .ck-suggestion-marker.ck-suggestion-marker-insertion {
+				--ck-color-suggestion-marker-insertion-border: var(--ck-color-suggestion-marker-insertion-border-inactive);
+				--ck-color-suggestion-marker-insertion-background: var(--ck-color-suggestion-marker-insertion-background-inactive);
+			}
+
+.ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_grayout > .ck-ai-review-mode__check-run-result-response > * {
+				filter: grayscale(1);
+			}
+
 /*
  * 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,
@@ -3695,6 +3771,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-ai-header-color-icon: hsla(0, 0%, 44%, 1);
+	--ck-ai-header-color-text: hsla(263, 59%, 52%, 1);
+	--ck-ai-header-border-color-button: hsla(262, 51%, 80%, 1);
+}
+
 .ck-ai-header {
 	/* Custom values unlike the rest of editor UI. */
 	--ck-ui-component-min-height: 1.7em;
@@ -3713,7 +3795,7 @@
 			/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
 			--ck-icon-font-size: .666em;
 
-			color: var(--ck-ai-chat-color-icon);
+			color: var(--ck-ai-header-color-icon);
 		}
 
 .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation {
@@ -3721,10 +3803,10 @@
 		/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
 		font-size: 11.7px;
 		min-height: unset;
-		border: 1px solid var(--ck-ai-border-color-button);
+		border: 1px solid var(--ck-ai-header-border-color-button);
 		border-radius: var(--ck-border-radius);
 		gap: var(--ck-spacing-small);
-		color: var(--ck-ai-chat-color-text);
+		color: var(--ck-ai-header-color-text);
 	}
 
 .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation:hover {
@@ -3741,7 +3823,7 @@
 			--ck-icon-font-size: .632em;
 
 			margin-inline-end: 0;
-			color: var(--ck-ai-chat-color-text);
+			color: var(--ck-ai-header-color-text);
 		}
 
 .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > span.ck-button__label {
@@ -3754,6 +3836,10 @@
 			margin-inline-end: var(--ck-spacing-small);
 		}
 
+.ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back:hover {
+				background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+			}
+
 .ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back > .ck-button__icon {
 				/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
 				--ck-icon-font-size: 13px;
@@ -3771,6 +3857,331 @@
 .ck-ai-header .ck-form__header__label:not(:last-child) {
 			margin-inline-end: var(--ck-spacing-small);
 		}
+/*
+ * 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 {
+	/* 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);
+
+	/* Tertiary text button */
+	--ck-ai-button-tertiary-text-color: hsla(263, 59%, 52%, 1);
+	--ck-ai-button-tertiary-disabled-text-color: hsla(263, 59%, 52%, 0.5);
+	--ck-ai-button-tertiary-text-background-color: transparent;
+	--ck-ai-button-tertiary-text-hover-background-color: hsla(262, 100%, 96%, 1);
+	--ck-ai-button-tertiary-text-hover-color: hsla(0, 0%, 20%, 1);
+
+	/* Tertiary filled button */
+	--ck-ai-button-tertiary-filled-color: hsla(0, 0%, 44%, 1);
+	--ck-ai-button-tertiary-filled-disabled-color: hsla(0, 0%, 44%, 0.5);
+	--ck-ai-button-tertiary-filled-hover-color: hsla(0, 0%, 20%, 1);
+	--ck-ai-button-tertiary-filled-active-color: hsla(263, 59%, 52%, 1);
+	--ck-ai-button-tertiary-filled-background-color: transparent;
+	--ck-ai-button-tertiary-filled-disabled-background-color: hsla(0, 0%, 93%, 1);
+	--ck-ai-button-tertiary-filled-hover-background-color: hsla(262, 100%, 96%, 1);
+	--ck-ai-button-tertiary-filled-active-background-color: hsla(262, 100%, 96%, 1);
+}
+.ck.ck-button.ck-ai-button-primary {
+		color: var(--ck-ai-button-primary-color);
+		background-color: var(--ck-ai-button-primary-background-color);
+		border: 1px solid transparent;
+	}
+.ck.ck-button.ck-ai-button-primary:hover {
+			background-color: var(--ck-ai-button-primary-hover-background-color);
+		}
+.ck.ck-button.ck-ai-button-primary:disabled,
+		.ck.ck-button.ck-ai-button-primary.ck-disabled {
+			color: var(--ck-ai-button-primary-disabled-color);
+			background-color: var(--ck-ai-button-primary-disabled-background-color);
+		}
+.ck.ck-button.ck-ai-button-primary:disabled > .ck.ck-button__label,
+			.ck.ck-button.ck-ai-button-primary.ck-disabled > .ck.ck-button__label,
+			.ck.ck-button.ck-ai-button-primary:disabled > .ck-button__icon,
+			.ck.ck-button.ck-ai-button-primary.ck-disabled > .ck-button__icon {
+				opacity: 1;
+			}
+.ck.ck-button.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);
+	}
+.ck.ck-button.ck-ai-button-secondary:hover {
+			background-color: var(--ck-ai-button-secondary-hover-background-color);
+		}
+.ck.ck-button.ck-ai-button-secondary:active,
+		.ck.ck-button.ck-ai-button-secondary.ck-on {
+			background-color: var(--ck-ai-button-secondary-active-background-color);
+		}
+.ck.ck-button.ck-ai-button-secondary:disabled,
+		.ck.ck-button.ck-ai-button-secondary.ck-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.ck-button.ck-ai-button-secondary:disabled > .ck.ck-button__label,
+			.ck.ck-button.ck-ai-button-secondary.ck-disabled > .ck.ck-button__label,
+			.ck.ck-button.ck-ai-button-secondary:disabled > .ck-button__icon,
+			.ck.ck-button.ck-ai-button-secondary.ck-disabled > .ck-button__icon {
+				opacity: 1;
+			}
+.ck.ck-button.ck-ai-button-tertiary-text {
+		color: var(--ck-ai-button-tertiary-text-color);
+		background-color: var(--ck-ai-button-tertiary-text-background-color);
+		border: none;
+	}
+.ck.ck-button.ck-ai-button-tertiary-text:hover {
+			background-color: var(--ck-ai-button-tertiary-text-hover-background-color);
+			color: var(--ck-ai-button-tertiary-text-hover-color);
+		}
+.ck.ck-button.ck-ai-button-tertiary-text:hover > .ck.ck-button__icon {
+				color: var(--ck-ai-button-tertiary-text-hover-color);
+			}
+.ck.ck-button.ck-ai-button-tertiary-text.ck-on:hover {
+				background-color: var(--ck-ai-button-tertiary-text-hover-background-color);
+			}
+.ck.ck-button.ck-ai-button-tertiary-text.ck-on:hover > .ck.ck-button__icon {
+					color: var(--ck-ai-button-tertiary-text-hover-color);
+				}
+.ck.ck-button.ck-ai-button-tertiary-text:disabled,
+		.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled {
+			color: var(--ck-ai-button-tertiary-disabled-text-color);
+		}
+.ck.ck-button.ck-ai-button-tertiary-text:disabled > .ck.ck-button__label,
+			.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled > .ck.ck-button__label,
+			.ck.ck-button.ck-ai-button-tertiary-text:disabled > .ck-button__icon,
+			.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled > .ck-button__icon {
+				opacity: 1;
+			}
+.ck.ck-button.ck-ai-button-tertiary-filled {
+		color: var(--ck-ai-button-tertiary-filled-color);
+		background-color: var(--ck-ai-button-tertiary-filled-background-color);
+		border: none;
+	}
+.ck.ck-button.ck-ai-button-tertiary-filled:hover {
+			color: var(--ck-ai-button-tertiary-filled-hover-color);
+			background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+		}
+.ck.ck-button.ck-ai-button-tertiary-filled:active,
+		.ck.ck-button.ck-ai-button-tertiary-filled.ck-on {
+			color: var(--ck-ai-button-tertiary-filled-active-color);
+			background-color: var(--ck-ai-button-tertiary-filled-active-background-color);
+		}
+.ck.ck-button.ck-ai-button-tertiary-filled:disabled,
+		.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled {
+			color: var(--ck-ai-button-tertiary-filled-disabled-color);
+			background-color: var(--ck-ai-button-tertiary-filled-disabled-background-color);
+		}
+.ck.ck-button.ck-ai-button-tertiary-filled:disabled > .ck.ck-button__label,
+			.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled > .ck.ck-button__label,
+			.ck.ck-button.ck-ai-button-tertiary-filled:disabled > .ck-button__icon,
+			.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled > .ck-button__icon {
+				opacity: 1;
+			}
+.ck.ck-button.ck-ai-button-stop-generating {
+		min-height: 22px;
+		padding: 0 var(--ck-spacing-medium) 0 var(--ck-spacing-small);
+	}
+.ck.ck-button.ck-ai-button-stop-generating .ck.ck-icon.ck-button__icon {
+			height: 14px;
+			width: 14px;
+			margin-right: 4px;
+		}
+/*
+ * 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 {
+	--ck-ai-chat-color-background-error: hsla(15, 100%, 97%, 1);
+	--ck-ai-chat-color-background-warning: hsla(36, 100%, 65.10%, 0.10);
+
+	--ck-ai-chat-color-border-error: hsla(14, 100%, 68%, 1);
+	--ck-ai-chat-color-border-warning: hsla(36, 100%, 65%, 1);
+}
+/* TODO: rename the class to make it more generic and function as a modifier. */
+.ck.ck-ai-chat-error {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--ck-spacing-medium);
+	width: fit-content;
+
+	background-color: var(--ck-ai-chat-color-background-error);
+	border: 1px solid var(--ck-ai-chat-color-border-error);
+	padding: var(--ck-spacing-standard);
+	border-radius: var(--ck-ai-border-radius);
+}
+.ck.ck-ai-chat-error.ck-ai-chat-error_warning {
+		background-color: var(--ck-ai-chat-color-background-warning);
+		border-color: var(--ck-ai-chat-color-border-warning);
+	}
+.ck.ck-ai-chat-error > p {
+		flex: 1;
+		max-width: calc(100% - (16px + var(--ck-spacing-medium)));
+		white-space: normal;
+		color: var(--ck-color-base-text);
+		line-height: var(--ck-line-height-base);
+	}
+.ck.ck-ai-chat-error > .ck-button {
+		--ck-icon-font-size: 0.666em;
+	}
+.ck.ck-ai-chat-error > .ck-button.ck-ai-chat-error__dismiss-button {
+			--ck-icon-font-size: 0.666em;
+			--ck-ui-component-min-height: 16px;
+
+			padding: 0;
+			flex-shrink: 0;
+		}
+.ck.ck-ai-chat-error.ck-ai-chat-error_full-width > p {
+			max-width: 100%;
+		}
+/*
+ * 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 {
+	--ck-ai-disclaimer-background-color: hsla(0, 0%, 96%, 1);
+	--ck-ai-disclaimer-border-color: hsla(220, 6%, 82%, 1);
+	--ck-ai-disclaimer-text-color: hsla(0, 0%, 44%, 1);
+}
+.ck.ck-ai-disclaimer {
+	background-color: var(--ck-ai-disclaimer-background-color);
+	border-top: 1px solid var(--ck-ai-disclaimer-border-color);
+	padding: var(--ck-spacing-standard) 1em;
+}
+.ck.ck-ai-disclaimer > .ck.ck-ai-disclaimer__content {
+		color: var(--ck-ai-disclaimer-text-color);
+		font-size: 0.75em;
+		line-height: 1.025em;
+		text-align: center;
+		word-break: normal;
+		text-wrap: auto;
+	}
+/*
+ * 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 {
+	--ai-skeleton-z-index: calc( var(--ck-z-default) + 1 );
+	--ck-ai-skeleton-item-background: linear-gradient(90deg, hsl(0, 0.00%, 98.00%) 0%, hsl(0, 0.00%, 94.10%) 50%, hsl(0, 0.00%, 98.00%) 100%);
+	--ck-ai-skeleton-animation-duration: 1s;
+	--ck-ai-skeleton-gap: var(--ck-spacing-extra-large);
+}
+.ck.ck-ai-skeleton {
+	position: absolute;
+	inset: 0;
+	z-index: var(--ai-skeleton-z-index);
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: var(--ck-ai-skeleton-gap) 0;
+	padding: var(--ck-spacing-extra-large) var(--ck-spacing-large) var(--ck-spacing-large);
+	width: 100%;
+	height: 100%;
+	background-color: var(--ck-color-base-background);
+	opacity: 1;
+	transition: opacity .4s, display .4s allow-discrete;
+	transition-delay: 350ms;
+}
+.ck.ck-ai-skeleton.ck-hidden {
+		transition-delay: 0ms;
+		opacity: 0;
+	}
+@starting-style {
+.ck.ck-ai-skeleton {
+		opacity: 0;
+}
+	}
+.ck.ck-ai-skeleton > .ck.ck-ai-skeleton__item {
+		background: var(--ck-ai-skeleton-item-background);
+		background-size: 200% 100%;
+		animation: var(--ck-ai-skeleton-animation-duration) ck-ai-skeleton-shine linear infinite;
+		width: 100%;
+	}
+@keyframes ck-ai-skeleton-shine {
+	to {
+		background-position-x: -200%;
+	}
+}
+/*
+ * 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 {
+	--ck-ai-spinner-size: var(--ck-toolbar-spinner-size);
+	--ck-ai-spinner-background: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 58%));
+	--ck-ai-spinner-mask: radial-gradient(farthest-side, transparent 66%, hsl(0, 0%, 0%) 61%);
+	--ck-ai-spinner-animation-duration: 1s;
+}
+.ck.ck-spinner-container.ck-ai-spinner {
+		display: inline-block;
+		width: var(--ck-ai-spinner-size);
+		height: var(--ck-ai-spinner-size);
+		margin: 0;
+		flex-shrink: 0;
+		animation-duration: var(--ck-ai-spinner-animation-duration);
+	}
+.ck.ck-spinner-container.ck-ai-spinner .ck-spinner {
+			width: var(--ck-ai-spinner-size);
+			height: var(--ck-ai-spinner-size);
+
+			border: none;
+
+			background: var(--ck-ai-spinner-background);
+			-webkit-mask: var(--ck-ai-spinner-mask);
+			mask: var(--ck-ai-spinner-mask);
+
+			box-sizing: border-box;
+		}
+.ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_small {
+			--ck-ai-spinner-size: 1em;
+		}
+.ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_tiny {
+			--ck-ai-spinner-size: 12px;
+		}
+.ck.ck-spinner-container.ck-hidden {
+		display: none;
+		animation: none;
+	}
+@keyframes ck-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
 /*
  * 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,
@@ -3782,6 +4193,18 @@
 :root {
 	--ck-ai-suggestion-inactive-color-background: hsla(128, 6%, 93%, 0.35);
 	--ck-ai-suggestion-inactive-color-border: hsla(128, 1%, 73%, 0.35);
+
+	--ck-ai-suggestion-marker-insertion-border-color: var(--ck-color-suggestion-marker-insertion-border, hsla(128, 71%, 40%, .35));
+	--ck-ai-suggestion-marker-insertion-background-color: var(--ck-color-suggestion-marker-insertion-background, hsla(128, 71%, 65%, .35));
+
+	--ck-ai-suggestion-marker-deletion-border-color: var(--ck-color-suggestion-marker-deletion-border, hsla(345, 71%, 40%, .35));
+	--ck-ai-suggestion-marker-deletion-background-color: var(--ck-color-suggestion-marker-deletion-background, hsla(345, 71%, 65%, .35));
+	--ck-ai-suggestion-marker-deletion-stroke-color: var(--ck-color-suggestion-marker-deletion-stroke, hsla(345, 71%, 20%, .5));
+}
+
+:root {
+	--ck-ai-review-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	--ck-ai-review-color-icon: hsla(0, 0%, 44%, 1);
 }
 
 .ck {
@@ -3821,20 +4244,20 @@
 
 .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_add {
 			white-space: break-spaces;
-			border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border);
-			border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border);
-			background: var(--ck-color-suggestion-marker-insertion-background);
+			border-top: 3px solid var(--ck-ai-suggestion-marker-insertion-border-color);
+			border-bottom: 3px solid var(--ck-ai-suggestion-marker-insertion-border-color);
+			background: var(--ck-ai-suggestion-marker-insertion-background-color);
 		}
 
 .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_hide,
 		.ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_strikethrough {
 			white-space: break-spaces;
-			border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border);
-			border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border);
+			border-top: 3px solid var(--ck-ai-suggestion-marker-deletion-border-color);
+			border-bottom: 3px solid var(--ck-ai-suggestion-marker-deletion-border-color);
 			text-decoration: line-through;
-			text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
+			text-decoration-color: var(--ck-ai-suggestion-marker-deletion-stroke-color);
 			text-decoration-thickness: 3px;
-			background: var(--ck-color-suggestion-marker-deletion-background);
+			background: var(--ck-ai-suggestion-marker-deletion-background-color);
 		}
 
 .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_underline {