@ckeditor/ckeditor5-ai 46.1.1 → 47.0.0-alpha.0

package/theme/aireviewmode/aireviewmode.css

@@ -0,0 +1,73 @@
+/*
+ * 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 '../common/aiheader.css';
+
+.ck {
+	--ck-color-ai-review-mode-suggestion: hsla(263, 59%, 52%, 0.5);
+
+	.ck-ai-review-mode {
+		max-height: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&.ck-ai-review-mode-highlights {
+
+		span.ck-ai_review-mode-marker_add {
+			border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
+		}
+
+		span.ck-ai_review-mode-marker_hide {
+			display: none;
+		}
+
+		span.ck-ai_review-mode-marker_strikethrough {
+			position: relative;
+
+			&:before {
+				border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
+				position: absolute;
+				content: "";
+				width: 100%;
+				height: 60%;
+			}
+		}
+
+		span.ck-ai_review-mode-marker_underline {
+			border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
+		}
+	}
+
+	&.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);
+		}
+
+		span.ck-ai_review-mode-marker_hide,
+		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);
+			text-decoration: line-through;
+			text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
+			text-decoration-thickness: 3px;
+			background: var(--ck-color-suggestion-marker-deletion-background);
+		}
+
+		span.ck-ai_review-mode-marker_underline {
+			border: none;
+		}
+	}
+}

package/theme/aitabs/aitabsview.css

@@ -0,0 +1,64 @@
+/*
+ * 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-tabs-overlay-top-position: 0;
+	--ck-tabs-overlay-right-position: 0;
+	--ck-tabs-overlay-left-position: auto;
+	--ck-tabs-overlay-bottom-position: auto;
+	--ck-tabs-overlay-height: 100%;
+	--ck-ai-tabs-overlay-width: 500px;
+	--ck-ai-tabs-overlay-width-maximized: 50%;
+}
+
+.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-tabs-panels-container-width: 450px;
+
+	& .ck-tab-panel {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		&>* {
+			flex-grow: 1;
+		}
+	}
+
+	&.ck-ai-tabs__overlay {
+		position: fixed;
+		height: var(--ck-tabs-overlay-height);
+		top: var(--ck-tabs-overlay-top-position);
+		right: var(--ck-tabs-overlay-right-position);
+		left: var(--ck-tabs-overlay-left-position);
+		bottom: var(--ck-tabs-overlay-bottom-position);
+		z-index: calc(var(--ck-z-dialog) - 1);
+		border-radius: 0;
+		border-top: 0;
+		border-bottom: 0;
+		width: var(--ck-ai-tabs-overlay-width);
+		transition: width 0.3s ease;
+
+		&.ck-ai-tabs_maximized {
+			width: var(--ck-ai-tabs-overlay-width-maximized);
+		}
+
+		&.ck-tabs_left {
+			--ck-tabs-overlay-right-position: auto;
+			--ck-tabs-overlay-left-position: 0;
+			border-left: 0;
+		}
+
+		&.ck-tabs_right {
+			border-right: 0;
+		}
+	}
+}

package/theme/aitabs/tabs/tabbuttonview.css

@@ -0,0 +1,74 @@
+/*
+ * 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-button.ck-tab-button {
+	padding: 0;
+	border: 0;
+	cursor: pointer;
+	justify-content: center;
+
+	&:active,
+	&:focus {
+		box-shadow: none;
+	}
+
+	&:not(.ck-disabled):hover {
+		background-color: var(--ck-color-tab-button-active-background);
+	}
+
+	& .ck.ck-icon {
+		padding: var(--ck-tab-button-padding);
+		color: var(--ck-color-tab-button-icon);
+	}
+
+	&.ck-on {
+		border: 0;
+		background-color: var(--ck-color-tab-button-active-background);
+
+		& .ck.ck-icon {
+			color: var(--ck-color-tab-button-active-icon);
+			background-color: var(--ck-color-tab-button-active-background);
+		}
+	}
+
+	&.ck-tab-button_top {
+		&.ck-on {
+			border-bottom: 1px solid var(--ck-color-tab-button-active-icon);
+			box-shadow: var(--ck-color-tab-button-active-icon) 0 1px 0 0;
+
+			& .ck.ck-icon {
+				padding-bottom: calc(var(--ck-tab-button-padding) - 1px);
+			}
+		}
+	}
+
+	&.ck-tab-button_left {
+		&.ck-on {
+			border-left: 0;
+			border-right: 1px solid var(--ck-color-tab-button-active-icon);
+			box-shadow: var(--ck-color-tab-button-active-icon) 1px 0 0 0;
+
+			& .ck.ck-icon {
+				padding-right: calc(var(--ck-tab-button-padding) - 1px);
+			}
+		}
+	}
+
+	&.ck-tab-button_right {
+		&.ck-on {
+			border-right: 0;
+			border-left: 1px solid var(--ck-color-tab-button-active-icon);
+			box-shadow: var(--ck-color-tab-button-active-icon) -1px 0 0 0;
+
+			& .ck.ck-icon {
+				padding-left: calc(var(--ck-tab-button-padding) - 1px);
+			}
+		}
+	}
+}

package/theme/aitabs/tabs/tabsview.css

@@ -0,0 +1,78 @@
+/*
+ * 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-tabs-buttons-container-buttons-vertical-spacing: 0;
+	--ck-tabs-panels-container-width: auto;
+	--ck-tabs-panels-container-background: hsl(0, 0%, 100%);
+	--ck-tab-button-padding: 12px;
+	--ck-tab-button-gap: var(--ck-spacing-medium);
+	--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-background: hsl(0, 0%, 91%);
+}
+
+.ck.ck-tabs {
+	display: flex;
+	height: 100%;
+
+	font-size: var(--ck-font-size-base);
+	border: 1px solid var(--ck-color-base-border);
+	border-radius: var(--ck-border-radius);
+
+	&.ck-tabs_top {
+		flex-direction: column;
+	}
+
+	&.ck-tabs_left {
+		flex-direction: row;
+	}
+
+	&.ck-tabs_right {
+		flex-direction: row-reverse;
+	}
+
+
+	.ck-tabs__panels-container {
+		width: var(--ck-tabs-panels-container-width);
+		transition: width 0.8s ease-in-out;
+		transition: height 0.8s ease-in-out;
+		background-color: var(--ck-tabs-panels-container-background);
+		flex-grow: 1;
+	}
+
+	.ck-tabs__buttons-container {
+		display: flex;
+		background-color: var(--ck-color-tabs-buttons-container-background);
+		gap: var(--ck-tab-button-gap);
+
+		&.ck-tabs__buttons-container_top {
+			border-top: none;
+			border-bottom: 1px solid var(--ck-color-base-border);
+			flex-direction: row;
+		}
+
+		&.ck-tabs__buttons-container_left {
+			border-left: none;
+			border-right: 1px solid var(--ck-color-base-border);
+		}
+
+		&.ck-tabs__buttons-container_right {
+			border-right: none;
+			border-left: 1px solid var(--ck-color-base-border);
+		}
+
+		&.ck-tabs__buttons-container_left,
+		&.ck-tabs__buttons-container_right {
+			flex-direction: column;
+			padding-top: var(--ck-tabs-buttons-container-buttons-vertical-spacing);
+		}
+	}
+}

package/theme/common/aibutton.css

@@ -0,0 +1,145 @@
+/*
+ * 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);
+
+	/* 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: none;
+
+		&:hover {
+			background-color: var(--ck-ai-button-primary-hover-background-color);
+		}
+
+		&:disabled,
+		&.ck-disabled {
+			color: var(--ck-ai-button-primary-disabled-color);
+			background-color: var(--ck-ai-button-primary-disabled-background-color);
+			cursor: not-allowed;
+
+			& > .ck.ck-button__label,
+			& > .ck-button__icon {
+				opacity: 1;
+			}
+		}
+	}
+
+	&.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);
+
+		&:hover {
+			background-color: var(--ck-ai-button-secondary-hover-background-color);
+		}
+
+		&:active,
+		&.ck-on {
+			background-color: var(--ck-ai-button-secondary-active-background-color);
+		}
+
+		&:disabled,
+		&.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);
+			cursor: not-allowed;
+
+			& > .ck.ck-button__label,
+			& > .ck-button__icon {
+				opacity: 1;
+			}
+		}
+	}
+
+	&.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;
+
+		&:hover {
+			background-color: var(--ck-ai-button-tertiary-text-hover-background-color);
+		}
+
+		&:disabled,
+		&.ck-disabled {
+			color: var(--ck-ai-button-tertiary-disabled-text-color);
+			cursor: not-allowed;
+
+			& > .ck.ck-button__label,
+			& > .ck-button__icon {
+				opacity: 1;
+			}
+		}
+	}
+
+	&.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;
+
+		&:hover {
+			color: var(--ck-ai-button-tertiary-filled-hover-color);
+			background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+		}
+
+		&:active,
+		&.ck-on {
+			color: var(--ck-ai-button-tertiary-filled-active-color);
+			background-color: var(--ck-ai-button-tertiary-filled-active-background-color);
+		}
+
+		&:disabled,
+		&.ck-disabled {
+			color: var(--ck-ai-button-tertiary-filled-disabled-color);
+			background-color: var(--ck-ai-button-tertiary-filled-disabled-background-color);
+			cursor: not-allowed;
+
+			& > .ck.ck-button__label,
+			& > .ck-button__icon {
+				opacity: 1;
+			}
+		}
+	}
+}

package/theme/common/aichaterror.css

@@ -0,0 +1,61 @@
+/*
+ * 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-ai-chat-error_warning {
+		background-color: var(--ck-ai-chat-color-background-warning);
+		border-color: var(--ck-ai-chat-color-border-warning);
+	}
+
+	& > 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-button {
+		--ck-icon-font-size: 0.666em;
+
+		&.ck-ai-chat-error__dismiss-button {
+			--ck-icon-font-size: 0.666em;
+			--ck-ui-component-min-height: 16px;
+
+			padding: 0;
+			flex-shrink: 0;
+		}
+	}
+
+	&.ck-ai-chat-error_full-width {
+		& > p {
+			max-width: 100%;
+		}
+	}
+}

package/theme/common/aidisclaimer.css

@@ -0,0 +1,29 @@
+/*
+ * 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__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;
+	}
+}

package/theme/common/aiheader.css

@@ -0,0 +1,88 @@
+/*
+ * 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-ai-header {
+	/* Custom values unlike the rest of editor UI. */
+	--ck-ui-component-min-height: 1.7em;
+	--ck-ui-component-min-width: 1.7em;
+
+	/* Custom value. It defaults to the toolbar component height so they look fine on next to each other. */
+	--ck-form-header-height: 3em;
+	--ck-form-header-small-icon-color: hsla(0, 0%, 20%, 1);
+
+	& > .ck-button {
+		margin-inline-start: var(--ck-spacing-standard);
+
+		& > .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: .666em;
+
+			color: var(--ck-ai-chat-color-icon);
+		}
+	}
+
+	& > .ck.ck-button.ck-ai-chat__start-conversation {
+		/* 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-radius: var(--ck-border-radius);
+		gap: var(--ck-spacing-small);
+		color: var(--ck-ai-chat-color-text);
+
+		&:hover {
+			background-color: var(--ck-ai-chat-button-active-background-color);
+		}
+
+		& > .ck-button__label {
+			/* Custom value unlike the rest of editor UI. */
+			line-height: 1.4em;
+		}
+
+		& > .ck-button__icon {
+			/* Custom value unlike the rest of editor UI (defaults to 14px). See how it's used in the icon.css */
+			--ck-icon-font-size: .632em;
+
+			margin-inline-end: 0;
+			color: var(--ck-ai-chat-color-text);
+		}
+
+		& > span.ck-button__label {
+			position: relative;
+			top: 1px;
+		}
+	}
+
+	&.ck-ai-header_small {
+		& > .ck.ck-button.ck-button-back {
+			margin-inline-start: 0;
+			margin-inline-end: var(--ck-spacing-small);
+
+			& > .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;
+
+				color: var(--ck-form-header-small-icon-color);
+			}
+		}
+
+		& .ck-form__header__label {
+			--ck-font-size-base: 13px;
+			--ck-font-face: var(--ck-ai-chat-font-family);
+
+			font-weight: 500;
+		}
+	}
+
+	& .ck-form__header__label {
+		&:not(:last-child) {
+			margin-inline-end: var(--ck-spacing-small);
+		}
+	}
+}

package/theme/common/aiskeleton.css

@@ -0,0 +1,54 @@
+/*
+ * 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-hidden {
+		transition-delay: 0ms;
+		opacity: 0;
+	}
+
+	@starting-style {
+		opacity: 0;
+	}
+
+	& > .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%;
+	}
+}