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

package/theme/aichat/aichat-controls/aichat-context-controls-balloon-panels.css

@@ -107,7 +107,6 @@
 
 	&.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);
 
 		&:has(.ck-ai-skeleton:not(.ck-hidden)) {
@@ -125,60 +124,70 @@
 			padding-bottom: var(--ck-spacing-standard);
 		}
 
-		.ck-ai-chat-resources__list {
-			height: 233px;
-			overflow-y: auto;
-			overflow-x: hidden;
+		.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);
+				.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;
+					cursor: pointer;
+					transition: background-color 0.2s;
 
-				&:hover {
-					background-color: var(--ck-ai-button-secondary-hover-background-color);
-				}
+					&: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;
+					&.ck-ai-chat-resources__item--in-context {
+						color: hsla(0, 0%, 20%, 0.5);
+						pointer-events: none;
 
-					* {
-						color: inherit;
+						* {
+							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__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--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;
+					.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 {

package/theme/aichat/aichat-controls/aichat-controls-button.css

@@ -30,21 +30,23 @@
 	}
 
 	&:not(.ck-disabled) {
+		color: var(--ck-ai-button-tertiary-filled-color);
+
 		&: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-button__icon {
-				fill: var(--ck-ai-chat-button-hover-color);
+				color: var(--ck-ai-button-tertiary-filled-hover-color);
 			}
 		}
 
 		&: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-button__icon {
-				fill: var(--ck-ai-chat-button-active-color);
+				color: var(--ck-ai-button-tertiary-filled-active-color);
 			}
 		}
 

package/theme/aichat/aichat-controls/aichat-controls-loader.css

@@ -8,8 +8,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;
@@ -17,63 +18,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-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);
-	}
+		color: var(--ck-ai-chat-controls-loader-color);
 
-	& .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;
-
-		&:nth-child(1) {
-			animation-delay: 0s;
+		& .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);
 		}
 
-		&:nth-child(2) {
-			animation-delay: var(--ck-ai-loader-dot-pulse-animation-delay);
-		}
+		& .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;
 
-		&: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);
+			&:nth-child(1) {
+				animation-delay: 0s;
+			}
 
-	.ck.ck-icon.ck-button__icon {
-		color: var(--ck-ai-chat-color-text);
-		height: 14px;
-		width: 14px;
-		margin-right: 4px;
-	}
+			&:nth-child(2) {
+				animation-delay: var(--ck-ai-loader-dot-pulse-animation-delay);
+			}
 
-	&:hover {
-		background-color: var(--ck-ai-button-secondary-hover-background-color);
+			&:nth-child(3) {
+				animation-delay: calc(var(--ck-ai-loader-dot-pulse-animation-delay) * 2);
+			}
+		}
 	}
 }
 
@@ -84,10 +68,10 @@
 
 @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);
 	}
 }

package/theme/aichat/aichat-controls/prompt-capabilities.css

@@ -23,7 +23,6 @@
 
 		& > .ck-icon {
 			--ck-icon-size: 16px;
-			color: var(--ck-ai-chat-color-icon);
 		}
 	}
 

package/theme/aichat/aichat-controls.css

@@ -36,37 +36,12 @@
 		line-height: 0;
 
 		& .ck-dropdown__panel.ck-dropdown__panel_ne {
-			bottom: calc(100% + 10px);
 			top: auto;
 			padding-top: .5em;
 			width: 426px;
 			max-width: max-content;
 			max-height: 600px;
 			overflow-y: scroll;
-
-			&::before,
-			&::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;
-			}
-
-			&::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));
-			}
-
-			&::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-button.ck-dropdown__button {
@@ -86,8 +61,16 @@
 				width: auto;
 			}
 
-			&:hover,
-			&.ck-on {
+			&: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);
 
@@ -112,6 +95,7 @@
 
 					& > .ck-list-item-button__check-holder {
 						height: 1.2em;
+						flex-shrink: 0;
 
 						& > .ck-list-item-button__check-icon {
 							padding-top: 2px;

package/theme/aichat/aichat.css

@@ -42,8 +42,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);
 
@@ -64,7 +64,6 @@
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-		overflow: hidden;
 		font-family: var(--ck-ai-chat-font-family) !important;
 	}
 }

package/theme/aichat/aichatfeed.css

@@ -80,34 +80,9 @@
 		}
 
 		& .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);
-
-			&:hover {
-				color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-color);
-			}
-
-			&:active {
-				box-shadow: none;
-				color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
-			}
-
-			&.ck-on {
-				color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
-			}
-
-			&:focus {
-				border: 1px solid transparent;
-			}
 
 			> .ck-icon {
 				width: 16px;
@@ -156,7 +131,7 @@
 			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);
 			}
 		}
@@ -266,7 +241,6 @@
 		}
 
 		&.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body {
-
 			.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"]) {

package/theme/aichat/aichathistory.css

@@ -139,6 +139,18 @@
 				}
 			}
 		}
+
+		& .ck-dropdown {
+			& .ck-dropdown__panel {
+				& .ck-list__item {
+					& .ck-button {
+						&:hover, &:active {
+							background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+						}
+					}
+				}
+			}
+		}
 	}
 
 	.ck-ai-chat-history__item--edit .ck-input,

package/theme/aichat/aisuggestioncontainer.css

@@ -126,6 +126,10 @@
 					& .ck-button {
 						margin: 0;
 						color: var(--ck-ai-chat-suggestion-icon-default-color);
+
+						&:hover {
+							background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+						}
 					}
 				}
 			}
@@ -210,6 +214,7 @@
 			margin-left: 0;
 			margin-right: 0;
 			margin-bottom: var(--ck-spacing-large);
+			width: 100%;
 		}
 	}
 

package/theme/aireviewmode/aireviewmode-check-list.css

@@ -8,19 +8,21 @@
  */
 
 :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-ai-review-mode__check-list {
@@ -42,7 +44,7 @@
 			}
 
 			& .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-ai-review-mode__check-list-item-title-text,
@@ -65,8 +67,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) {
 					opacity: 1;
@@ -75,7 +77,7 @@
 			}
 
 			&.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-ai-review-mode__check-list-item-title {
@@ -85,7 +87,7 @@
 
 				& > .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;
 				}
 
@@ -94,7 +96,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;
@@ -108,7 +110,7 @@
 			}
 
 			&: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-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
 					opacity: 1;
@@ -178,12 +180,12 @@
 					&.ck-on,
 					&: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);
 					}
 
 					&: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-button__label {
@@ -192,7 +194,7 @@
 				}
 
 				& .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;
@@ -214,7 +216,7 @@
 						&::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));
 						}
 
 						&::after {
@@ -223,7 +225,7 @@
 						}
 
 						& > .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;
 						}
 					}
@@ -253,7 +255,7 @@
 									line-height: 1.3;
 
 									& > span {
-										color: var(--ck-ai-chat-color-icon);
+										color: var(--ck-ai-review-color-icon);
 										line-height: 1;
 										white-space: normal;
 									}

package/theme/aireviewmode/aireviewmode-check-run-result.css

@@ -7,6 +7,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);
@@ -28,6 +39,16 @@
 			max-height: var(--ck-ui-component-min-height);
 			margin-left: auto;
 		}
+
+		& .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.ck-icon {
+				--ck-icon-size: 16px;
+			}
+		}
 	}
 
 	& > .ck-ai-review-mode__check-run-result-response {
@@ -54,4 +75,28 @@
 			max-height: 125px;
 		}
 	}
+
+	&.ck-ai-review-mode__check-run-result_grayout {
+		pointer-events: none;
+		background-color: var(--ck-ai-review-mode-inactive-check-background);
+
+		& .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-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-response {
+			& > * {
+				filter: grayscale(1);
+			}
+		}
+	}
 }