UNPKG

@ckeditor/ckeditor5-ai

Version:

AI features for CKEditor 5.

1,360 lines (1,167 loc) • 127 kB
/** * @license 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-form-submit-button-text-color:var(--ck-color-text); --ck-ai-form-submit-button-border-color:transparent; --ck-ai-form-submit-button-disabled-border-color:transparent; --ck-ai-toolbar-button-hover-color:var(--ck-color-text); --ck-color-ai-selection:hsla(201, 100%, 56%, 0.3); } .ck-ai-assistant-ui_theme{ --ck-color-button-default-hover-background:hsl(262.1,100%,96.3%); --ck-color-button-default-active-background:hsl(262.1,100%,96.3%); --ck-color-button-on-background:hsl(262.1,100%,96.3%); --ck-color-button-on-hover-background:hsl(262.1,100%,96.3%); --ck-color-button-on-active-background:hsl(262.1,100%,96.3%); --ck-color-button-on-disabled-background:hsl(262.1,100%,96.3%); --ck-color-button-on-color:hsl(263.2,59.2%,52%); --ck-color-button-action-background:hsl(263.2,59.2%,52%); --ck-color-button-action-hover-background:hsl(262.6,58.9%,49.6%); --ck-color-button-action-active-background:hsl(262.6,58.9%,49.6%); --ck-color-button-action-disabled-background:hsl(263.8,59.3%,75.9%); --ck-color-list-button-hover-background:hsl(262.1,100%,96.3%); --ck-ai-form-content-background:hsl(0,0%,97.6%); --ck-ai-form-submit-button-text-color:var(--ck-color-button-on-color); --ck-ai-form-submit-button-border-color:var(--ck-color-button-action-background); --ck-ai-form-submit-button-disabled-border-color:var(--ck-color-button-action-disabled-background); --ck-ai-toolbar-button-hover-color:var(--ck-color-button-on-color); --ck-color-ai-selection:hsl(262.5,60%,90%); } .ck-ai-commands-dropdown > .ck-button:hover, .ck-ai-assistant-button:hover{ color:var(--ck-ai-toolbar-button-hover-color); } .ck span.ck-fake-ai-selection{ background:var(--ck-color-ai-selection); } .ck .ck-widget.ck-fake-ai-selection{ outline-color:var(--ck-color-ai-selection); } .ck span.ck-fake-ai-selection-candidate{ background:var(--ck-color-ai-selection); } .ck .ck-fake-ai-selection_collapsed{ height:100%; border-right:1px solid var(--ck-color-base-text); margin-right:-1px; outline:solid 1px hsla(0, 0%, 100%, .5); } .ck.ck-content.ck-ai-form__content-field h2{ font-size:1.3em; } .ck.ck-content.ck-ai-form__content-field h3{ font-size:1.2em; } .ck.ck-content.ck-ai-form__content-field h4, .ck.ck-content.ck-ai-form__content-field h5, .ck.ck-content.ck-ai-form__content-field h6{ font-size:1.1em; } .ck.ck-content.ck-ai-form__content-field h2, .ck.ck-content.ck-ai-form__content-field h3, .ck.ck-content.ck-ai-form__content-field h4, .ck.ck-content.ck-ai-form__content-field h5, .ck.ck-content.ck-ai-form__content-field h6, .ck.ck-content.ck-ai-form__content-field p, .ck.ck-content.ck-ai-form__content-field ul, .ck.ck-content.ck-ai-form__content-field ol{ margin-block-start:.5em; margin-block-end:.5em; line-height:1.7em; } .ck.ck-content.ck-ai-form__content-field > :first-child{ margin-top:0; } .ck.ck-content.ck-ai-form__content-field > :last-child{ margin-bottom:0; } :root{ --ck-ai-dropdown-view-width:250px; --ck-ai-dropdown-view-list-max-height:250px; } .ck.ck-ai-commands-search{ width:var(--ck-ai-dropdown-view-width); } .ck.ck-ai-commands-search > .ck-labeled-field-view{ padding:var(--ck-spacing-large); } .ck.ck-ai-commands-search > .ck-labeled-field-view .ck-input{ min-width:unset; } .ck.ck-ai-commands-search > .ck-search__results{ border-top:1px solid var(--ck-color-base-border); } .ck.ck-ai-commands-search > .ck-search__results > .ck-list{ max-height:var(--ck-ai-dropdown-view-list-max-height); overflow:auto; } :root{ --ck-ai-form-view-width:600px; --ck-ai-form-content-height:175px; --ck-ai-form-content-background:hsl(0, 0%, 98%); --ck-ai-form-history-font-size:.9em; --ck-ai-form-error-background:var(--ck-color-light-red); } .ck .ck-ai-form{ width:var(--ck-ai-form-view-width); max-width:100%; } @media screen and (max-width: 600px){ .ck .ck-ai-form{ --ck-ai-form-view-width:100vw; } } .ck .ck-ai-form .ck-ai-form-content{ padding:var(--ck-spacing-large); width:100%; } .ck .ck-ai-form .ck-ai-form-content .ck-input{ width:100%; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area-wrapper{ width:100%; max-height:var(--ck-ai-form-content-height); overflow-y:auto; border:1px solid var(--ck-color-base-border); border-radius:2px; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area-wrapper:focus{ outline:none; border:var(--ck-focus-ring); box-shadow:var(--ck-focus-outer-shadow), 0 0; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area{ display:flex; background-color:var(--ck-ai-form-content-background); } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area.ck-ai-form__content-area--processing{ --ck-color-text:var(--ck-color-input-disabled-text); background-color:var(--ck-color-input-disabled-background); } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field{ width:100%; white-space:normal; padding:var(--ck-spacing-tiny) var(--ck-spacing-medium); min-height:calc( var(--ck-line-height-base) * var(--ck-font-size-base)); box-sizing:content-box; } [dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field{ padding-right:0; } [dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field{ padding-left:0; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field > *{ white-space:normal; color:inherit; } [dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-spinner-container{ margin-right:var(--ck-spacing-medium); } [dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-spinner-container{ margin-left:var(--ck-spacing-medium); } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button-wrapper{ display:flex; flex-direction:column-reverse; padding-left:2px; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button{ position:sticky; right:1px; bottom:1px; padding:4px; min-height:unset; min-width:unset; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button svg{ --ck-icon-size:16px; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button.ck-ai-form__copy-button--copied{ color:inherit; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__toolbar{ border:none; padding:0; margin-top:var(--ck-spacing-medium); margin-bottom:calc( 2 * var(--ck-spacing-medium)); } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__loader{ display:flex; align-items:center; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__loader .ck-spinner{ box-sizing:border-box; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete{ display:flex; justify-content:space-between; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view{ flex-grow:1; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit{ border-color:var(--ck-ai-form-submit-button-border-color); color:var(--ck-ai-form-submit-button-text-color); } [dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit{ margin-left:var(--ck-spacing-medium); } [dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit{ margin-right:var(--ck-spacing-medium); } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit.ck-disabled{ border-color:var(--ck-ai-form-submit-button-disabled-border-color); } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history{ position:absolute; font-size:var(--ck-font-size-tiny); bottom:var(--ck-spacing-small); top:var(--ck-spacing-small); padding:4px; min-height:unset; min-width:unset; } [dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history{ right:var(--ck-spacing-medium); } [dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history{ left:var(--ck-spacing-medium); } [dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea{ padding-right:30px; } [dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea{ padding-left:30px; } @media screen and (max-width: 600px){ .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea{ --ck-input-width:auto; } } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto; grid-column-gap:0px; grid-row-gap:0px; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > span{ grid-area:1 / 1 / 2 / 2; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-button{ padding:0; min-height:auto; grid-area:1 / 2 / 2 / 3; font-size:var(--ck-ai-form-history-font-size); justify-self:start; background:none; margin:var(--ck-spacing-medium) 0 0; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-button .ck-button__label{ line-height:inherit; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-button .ck-button__label:hover{ text-decoration:underline; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-list{ grid-area:2 / 1 / 3 / 3; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-list .ck-list__item .ck-button .ck-button__label{ white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; font-size:var(--ck-ai-form-history-font-size); line-height:var(--ck-line-height-base); } .ck .ck-ai-form .ck-ai-form__error{ display:flex; justify-content:center; align-items:center; padding:var(--ck-spacing-medium); background-color:var(--ck-ai-form-error-background); color:var(--ck-color-base-text); border-radius:2px; margin-bottom:var(--ck-spacing-medium); } .ck.ck-button.ck-tab-button{ padding:0; border:0; cursor:pointer; justify-content:center; } .ck.ck-button.ck-tab-button:active, .ck.ck-button.ck-tab-button:focus{ box-shadow:none; } .ck.ck-button.ck-tab-button:not(.ck-disabled):hover{ background-color:var(--ck-color-tab-button-active-background); } .ck.ck-button.ck-tab-button .ck.ck-icon{ box-sizing:content-box; padding:var(--ck-tab-button-padding); color:var(--ck-color-tab-button-icon); } .ck.ck-button.ck-tab-button.ck-on{ border:0; background-color:var(--ck-color-tab-button-active-background); } .ck.ck-button.ck-tab-button.ck-on .ck.ck-icon{ color:var(--ck-color-tab-button-active-icon); background-color:var(--ck-color-tab-button-active-background); } .ck.ck-button.ck-tab-button.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-button.ck-tab-button.ck-tab-button_top.ck-on .ck.ck-icon{ padding-bottom:calc(var(--ck-tab-button-padding) - 1px); } .ck.ck-button.ck-tab-button.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-button.ck-tab-button.ck-tab-button_left.ck-on .ck.ck-icon{ padding-right:calc(var(--ck-tab-button-padding) - 1px); } .ck.ck-button.ck-tab-button.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-button.ck-tab-button.ck-tab-button_right.ck-on .ck.ck-icon{ padding-left:calc(var(--ck-tab-button-padding) - 1px); } :root{ --ck-tabs-buttons-container-buttons-vertical-spacing:0; --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; font-size:var(--ck-font-size-base); border:1px solid var(--ck-color-base-border); border-radius:var(--ck-border-radius); min-width:0; } .ck.ck-tabs.ck-tabs_top{ flex-direction:column; } .ck.ck-tabs.ck-tabs_left{ flex-direction:row; } .ck.ck-tabs.ck-tabs_right{ flex-direction:row-reverse; } .ck.ck-tabs .ck-tabs__panels-container{ 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; min-width:0 } .ck.ck-tabs .ck-tabs__buttons-container{ display:flex; background-color:var(--ck-color-tabs-buttons-container-background); gap:var(--ck-tab-button-gap); } .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_top{ border-top:none; border-bottom:1px solid var(--ck-color-base-border); flex-direction:row; } .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_left{ border-left:none; border-right:1px solid var(--ck-color-base-border); } .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_right{ border-right:none; border-left:1px solid var(--ck-color-base-border); } .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_left, .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_right{ flex-direction:column; padding-top:var(--ck-tabs-buttons-container-buttons-vertical-spacing); padding-bottom:var(--ck-tabs-buttons-container-buttons-vertical-spacing); } :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-ai-tabs-overlay-z-index:calc(var(--ck-z-dialog) - 1); } .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.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>*{ flex-grow:1; } .ck.ck-tabs.ck-ai-tabs .ck-tab-panel.ck-tab-panel_disabled{ pointer-events:none; opacity:0.5; } .ck.ck-tabs.ck-ai-tabs.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:var(--ck-ai-tabs-overlay-z-index); border-radius:0; border-top:0; border-bottom:0; width:var(--ck-ai-tabs-overlay-width); transition:width 0.3s ease; } .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-ai-tabs_maximized{ width:var(--ck-ai-tabs-overlay-width-maximized); } .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-tabs_left{ --ck-tabs-overlay-right-position:auto; --ck-tabs-overlay-left-position:0; border-left:0; } .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-tabs_right{ border-right:0; } .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view{ width:100%; } .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view .ck-labeled-field-view__status_error{ line-height:1.4em; } .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea{ line-height:calc(var(--ck-font-size-base) * 2); } [dir="ltr"] .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea{ padding-right:2.6em; } [dir="rtl"] .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea{ padding-left:2.6em; } .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper > .ck.ck-label{ visibility:hidden; } .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button{ height:auto; align-self:flex-end; margin-left:var(--ck-spacing-medium); background-color:var(--ck-ai-background-color-action-button); color:var(--ck-ai-font-color-action-button); } .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button.ck-disabled{ opacity:var(--ck-disabled-opacity); } .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button > svg{ opacity:1; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities{ display:flex; justify-content:space-between; align-items:center; padding-top:var(--ck-spacing-medium-small); gap:var(--ck-spacing-medium-small); padding-inline-end:calc(var(--ck-ui-component-min-height) + var(--ck-spacing-medium)); } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button:not(.ck-button_with-text){ margin:0; padding:var(--ck-spacing-tiny); } .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{ margin-inline-start:auto; margin-inline-end:0; margin-block-start:0; margin-block-end:0; padding:0; visibility:hidden; pointer-events:none; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls__model-name{ color:var(--ck-ai-chat-color-icon); } .ck.ck-ai-chat-controls-model-unavailable-message{ border:1px solid hsl(262, 51%, 80%); border-radius:4px; background-color:hsla(263, 59%, 52%, 0.051); } .ck.ck-ai-chat-controls-model-unavailable-message p{ white-space:normal; line-height:1.4; padding:var(--ck-spacing-large); } .ck.ck-ai-chat-controls-model-unavailable-message p button.ck-ai-chat-controls__start-new-chat-button{ background:none; border:none; padding:0; cursor:default; vertical-align:baseline; color:var(--ck-ai-chat-color-text); text-decoration:underline; } .ck.ck-ai-chat-controls-model-unavailable-message p button.ck-ai-chat-controls__start-new-chat-button:hover{ background:none; } .ck.ck-ai-chat-controls-model-unavailable-message p button.ck-ai-chat-controls__start-new-chat-button:active, .ck.ck-ai-chat-controls-model-unavailable-message p button.ck-ai-chat-controls__start-new-chat-button:focus{ background:none; box-shadow:none; } :root{ --ck-ai-chat-context-controls-balloon-width:400px; } .ck.ck-ai-chat-controls .ck-ai-chat-context-controls{ display:flex; align-content:center; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; padding-top:0; gap:var(--ck-spacing-medium-small); padding-bottom:var(--ck-spacing-medium-small); } .ck.ck-ai-chat-controls .ck-ai-chat-context-controls:has(.ck-ai-chat-context-controls__pending-contexts:empty){ padding-bottom:var(--ck-spacing-small); } .ck.ck-ai-chat-controls .ck-ai-chat-context-controls .ck-ai-chat-context-controls__pending-contexts{ display:contents; } .ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button{ position:absolute; bottom:3px; opacity:.7; margin:0; } .ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button:hover, .ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button:focus{ opacity:1; } :root{ --ck-ai-chat-context-balloon-width:290px; } .ck.ck-balloon-panel .ck-ai-chat-context-chip, .ck.ck-ai-chat .ck-ai-chat-context-chip{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; max-width:max(calc(33% - var(--ck-spacing-medium-small) - (2 * var(--ck-spacing-large) / 3)), 118px); box-sizing:border-box; width:auto; padding:var(--ck-spacing-small) var(--ck-spacing-medium-small); background-color:var(--ck-ai-chat-user-context-background); border-radius:var(--ck-ai-border-radius); border:var(--ck-ai-chat-border-width) solid var(--ck-ai-border-color-main); line-height:1; color:var(--ck-ai-chat-color-icon); } .ck.ck-balloon-panel .ck-ai-chat-context-chip.ck-ai-chat-context-chip_wide, .ck.ck-ai-chat .ck-ai-chat-context-chip.ck-ai-chat-context-chip_wide{ max-width:max(calc(66% - var(--ck-spacing-medium-small)), 240px); width:auto; } .ck.ck-balloon-panel .ck-ai-chat-context-chip.ck-ai-chat-context-chip_document, .ck.ck-ai-chat .ck-ai-chat-context-chip.ck-ai-chat-context-chip_document{ max-width:unset; } .ck.ck-balloon-panel .ck-ai-chat-context-chip.ck-ai-chat-context-chip_new-chip, .ck.ck-ai-chat .ck-ai-chat-context-chip.ck-ai-chat-context-chip_new-chip{ animation:ck-ai-new-item-flash var(--ck-ai-chat-animation-duration) var(--ck-ai-chat-animation-timing); } .ck.ck-balloon-panel .ck-ai-chat-context-chip > .ck-ai-chat-context-chip__label, .ck.ck-ai-chat .ck-ai-chat-context-chip > .ck-ai-chat-context-chip__label{ font-size:0.9em; display:inline-block; margin:0 var(--ck-spacing-medium-small); text-overflow:ellipsis; overflow:hidden; line-height:1.25; color:var(--ck-ai-chat-color-icon); } .ck.ck-balloon-panel .ck-ai-chat-context-chip > .ck-icon.ck-ai-chat-context-chip__type-icon, .ck.ck-ai-chat .ck-ai-chat-context-chip > .ck-icon.ck-ai-chat-context-chip__type-icon{ --ck-icon-size:1em; flex-shrink:0; font-size:1em; fill:var(--ck-ai-chat-color-icon); } .ck.ck-balloon-panel .ck-ai-chat-context-chip .ck-button, .ck.ck-ai-chat .ck-ai-chat-context-chip .ck-button{ --ck-ui-component-min-height:1em; max-width:var(--ck-ui-component-min-height); max-height:var(--ck-ui-component-min-height); border:none; padding:var(--ck-spacing-tiny); } .ck.ck-balloon-panel .ck-ai-chat-context-chip .ck-button > .ck-icon, .ck.ck-ai-chat .ck-ai-chat-context-chip .ck-button > .ck-icon{ --ck-icon-size:1em; font-size:1em; fill: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{ display:flex; gap:var(--ck-spacing-medium-small); flex-wrap:wrap; align-items:center; justify-content:flex-end; width:100%; margin-bottom:0; padding:0; } .ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper-balloon, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper-balloon{ display:flex; gap:var(--ck-spacing-standard); flex-wrap:wrap; align-items:center; justify-content:flex-start; width:var(--ck-ai-chat-context-balloon-width); max-height:10em; padding:var(--ck-spacing-standard); overflow-y:auto; } .ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper-balloon .ck-ai-chat-context-chip, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper-balloon .ck-ai-chat-context-chip{ max-width:max( calc(50% - var(--ck-spacing-standard)), 110px); } .ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper-balloon.ck-ai-chat-context-chip_wide, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper-balloon.ck-ai-chat-context-chip_wide{ max-width:100%; } .ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper-balloon .ck-ai-chat-context-chip.ck-ai-chat-context-chip_new-chip, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper-balloon .ck-ai-chat-context-chip.ck-ai-chat-context-chip_new-chip{ animation:none; } @keyframes ck-ai-new-item-flash{ 0%{ background-color:var(--ck-ai-chat-flash-color); color:var(--ck-ai-chat-flash-color-text); border-color:var(--ck-ai-chat-flash-color-text); } 100%{ background-color:var(--ck-ai-chat-user-context-background); color:var(--ck-ai-chat-color-icon); border-color:var(--ck-ai-border-color-main); } } .ck.ck-button.ck-ai-chat-controls-button{ --ck-ui-component-min-height:1.88em; padding:var(--ck-spacing-tiny); flex-shrink:0; display:flex; align-items:center; justify-content:center; } .ck.ck-button.ck-ai-chat-controls-button:not(.ck-button_with-text){ margin:0 0 var(--ck-spacing-tiny) 0; padding:var(--ck-spacing-tiny); } .ck.ck-button.ck-ai-chat-controls-button.ck-button_with-text.ck-ai-chat-controls_context_show-more-button{ display:block; padding:0; border-width:0; letter-spacing:-0.1em; text-align:center; } .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); } .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):hover .ck-button__icon{ fill:var(--ck-ai-chat-button-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); } .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):active .ck-button__icon{ fill:var(--ck-ai-chat-button-active-color); } .ck.ck-button.ck-ai-chat-controls-button.ck-on:not(.ck-disabled):not(:hover):not(:active):not(.ck-disabled){ background-color:var(--ck-ai-chat-button-active-background-color); color:var(--ck-ai-chat-button-active-color); } .ck.ck-button.ck-ai-chat-controls-button.ck-on:not(.ck-disabled):not(:hover):not(:active):not(.ck-disabled) .ck-button__icon{ color:var(--ck-ai-chat-button-active-color); } .ck.ck-button.ck-ai-chat-controls-button > .ck-icon{ --ck-icon-size:16px; } .ck.ck-button.ck-ai-chat-controls-button .ck-dropdown__arrow{ display:none; } :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-loader-dot-pulse-dot-size:6px; --ck-ai-loader-dot-pulse-width:40px; --ck-ai-loader-dot-pulse-height:20px; --ck-ai-loader-dot-pulse-border-radius:8px; --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; 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; } .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-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(3){ animation-delay:calc(var(--ck-ai-loader-dot-pulse-animation-delay) * 2); } .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.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.ck-button.ai-chat-controls-loader__cancel-button:hover{ background-color:var(--ck-ai-button-secondary-hover-background-color); } .ck-ai-chat-controls-loader-wrapper{ display:flex; justify-content:space-between; } @keyframes ck-ai-loader-dot-pulse{ 0%, 80%, 100%{ background-color:var(--ck-ai-chat-loader-icon-dot-color); } 40%{ background-color:var(--ck-ai-chat-loader-icon-dot-active-color); } } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel{ min-width:157px; max-width:250px; z-index:calc(var(--ck-ai-tabs-overlay-z-index) + 1); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button{ width:100%; display:flex; padding-left:var(--ck-spacing-extra-large); padding-right:var(--ck-spacing-extra-large); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:first-child{ margin-top:var(--ck-spacing-tiny); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:last-child{ margin-bottom:var(--ck-spacing-tiny); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button .ck-icon.ck-button__icon{ --ck-icon-size:16px; } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button .ck-button__label{ margin:0; line-height:var(--ck-line-height-base); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:hover{ background-color:var(--ck-ai-button-secondary-hover-background-color); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button > .ck-ai-chat-context-controls__balloon-button-source__arrow{ width:var(--ck-dropdown-arrow-size); transform:rotate(-90deg); margin-left:var(--ck-spacing-standard); margin-right:calc(-1 * var(--ck-spacing-small)); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button > span{ flex-grow:1; } .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel{ z-index:calc(var(--ck-ai-tabs-overlay-z-index) + 1); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form{ width:var(--ck-ai-chat-context-controls-balloon-width); line-height:var(--ck-form-header-height); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section{ display:flex; align-items:flex-start; padding:var(--ck-spacing-large); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck-labeled-field-view{ width:100%; } .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-input{ width:100%; font:normal normal normal var(--ck-font-size-base) / var(--ck-line-height-base) var(--ck-font-face); vertical-align:middle; line-height:var(--ck-line-height-base); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-label{ visibility:hidden; } .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck.ck-button{ height:auto; margin-left:var(--ck-spacing-medium); background-color:var(--ck-ai-background-color-action-button); color:var(--ck-ai-font-color-action-button); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck.ck-button.ck-disabled{ opacity:0.5; } .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck.ck-button.ck-disabled>.ck-button__icon{ opacity:1; } .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); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel:has(.ck-ai-skeleton:not(.ck-hidden)){ overflow:hidden; } .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck.ck-search__query_with-icon{ padding:var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-tiny) var(--ck-spacing-large); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-skeleton{ --ck-ai-skeleton-gap:var(--ck-spacing-small); padding-top:var(--ck-spacing-standard); 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__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--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__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{ 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__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--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__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__list.ck-hidden{ display:none; } .ck.ck-balloon-panel.ck-ai-chat-context-controls__chip-tooltip{ max-width:180px; } .ck.ck-balloon-panel.ck-ai-chat-context-controls__chip-tooltip .ck.ck-tooltip__text{ white-space:normal; display:inline-block; padding:var(--ck-tooltip-text-padding) 0; } .ck.ck-ai-chat-controls{ padding:var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard); line-height:var(--ck-form-header-height); border-top:var(--ck-ai-chat-border-width) solid var(--ck-color-base-border); } .ck.ck-ai-chat-controls:has(>:first-child.ck-hidden){ padding-bottom:var(--ck-spacing-large); } .ck.ck-ai-chat-controls.ck-ai-chat-controls-disabled{ opacity:0.5; pointer-events:none; cursor:default; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection{ line-height:0; } .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; max-width:max-content; max-height:600px; 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; margin-inline-end:0; color:var(--ck-ai-chat-color-icon); padding-top:0; padding-bottom:0; min-height:auto; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on .ck-dropdown__arrow{ transform:rotate(180deg); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button .ck-button__label{ 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{ 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{ color:var(--ck-ai-background-color-action-button); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item:not(:last-child){ margin-bottom:var(--ck-spacing-medium-small); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button{ align-items:start; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button:hover:not(.ck-disabled){ background-color:var(--ck-ai-button-secondary-hover-background-color); } .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; } .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{ padding-top:2px; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label{ line-height:1.3; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-name{ line-height:1.3; font-weight:500; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-description{ line-height:1.3; padding-top:var(--ck-spacing-tiny); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-description > span{ color:var(--ck-ai-chat-color-icon); line-height:1; white-space:normal; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities{ line-height:1.3; --ck-icon-font-size:.5em; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities > span{ color:var(--ck-ai-chat-color-icon); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities > span:nth-of-type(2n){ font-weight:bold; display:inline-block; width:4ch; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities > .ck-icon{ margin-inline-end:var(--ck-spacing-standard); color:var(--ck-ai-chat-color-icon); fill:var(--ck-ai-chat-color-icon); } :root{ --ck-ai-chat-feed-item-color-text:hsla(0, 0%, 0%, 1); --ck-ai-chat-feed-item-color-background:hsla(0, 0%, 96%, 1); --ck-ai-chat-feed-item-color-background-secondary:hsla(0, 0%, 96%, 1); --ck-ai-chat-feed-item-color-actions-button-hover:hsla(263, 59%, 40%, 1); --ck-ai-chat-feed-item-color-show-changes-toggle-hover-color:hsla(263, 59%, 40%, 1); --ck-ai-chat-feed-item-color-show-changes-toggle-hover-background:hsl(262, 100%, 96%); --ck-ai-chat-feed-item-color-show-changes-toggle-on-color:hsla(263, 59%, 40%, 1); --ck-ai-chat-feed-item-color-show-changes-toggle-on-background:hsl(262, 100%, 96%); --ck-ai-chat-feed-item-color-show-changes-toggle-active-background:hsl(262, 100%, 96%); --ck-ai-chat-feed-loader-icon-color:hsla(0, 0%, 85%, 1); --ck-ai-chat-feed-interaction-header-capabilities-color-text:hsla(0, 0%, 44%, 1); } .ck.ck-ai-chat__feed{ flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; flex-wrap:nowrap; padding-bottom:var(--ck-spacing-extra-large); gap:var(--ck-spacing-large); position:relative; contain:size; } .ck.ck-ai-chat__feed:has(.ck-ai-skeleton:not(.ck-hidden)){ overflow:hidden; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__items{ display:flex; flex-direction:column; gap:var(--ck-spacing-extra-large) 0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__items > .ck-ai-chat__feed__item:first-child{ margin-top:var(--ck-spacing-extra-large); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item{ margin:0 var(--ck-spacing-large); scroll-margin:var(--ck-spacing-large); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-mini-toolbar, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-suggestion__actions, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle{ transition:opacity .4s, display .4s allow-discrete; } @starting-style{ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-mini-toolbar, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-suggestion__actions, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle{ opacity:0; } } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-suggestion__actions--no-animation{ 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; margin-right:0; margin-left:var(--ck-spacing-medium); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-mini-toolbar, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-chat__feed__ai-suggestion__actions, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-suggestion__header__show-changes-toggle{ display:none; opacity:0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item{ word-break:normal; text-wrap:auto; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item pre > code{ white-space:pre-wrap; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message:has(.ck-ai-chat-context-chips-wrapper){ max-width:100%; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message .ck-ai-chat__feed__message-content{ max-width:80%; margin-inline-end:0; margin-inline-start:auto; text-align:end; } .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; border-radius:var(--ck-ai-border-radius); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions{ --ck-color-split-button-hover-background:var(--ck-ai-background-color-action-button); margin-top:var(--ck-spacing-medium); width:fit-content; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button{ --ck-color-button-default-background:var(--ck-ai-background-color-action-button); --ck-color-button-default-hover-background:var(--ck-ai-chat-feed-item-color-actions-button-hover); --ck-color-button-on-hover-background:var(--ck-ai-chat-feed-item-color-actions-button-hover); --ck-color-button-default-active-background:var(--ck-ai-chat-feed-item-color-actions-button-hover); --ck-color-button-on-background:var(--ck-ai-chat-feed-item-color-actions-button-hover); --ck-color-button-on-active-background:var(--ck-ai-chat-feed-item-color-actions-button-hover); --ck-color-focus-border:var(--ck-color-base-background); --ck-focus-ring:1px solid var(--ck-color-focus-border); color:var(--ck-color-base-background); margin-top:0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-splitbutton__action{ border-radius:0; } .ck-rounded-corners .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-splitbutton__action, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-splitbutton__action.ck-rounded-corners{ border-radius:var(--ck-border-radius); border-top-right-radius:0; border-bottom-right-radius:0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-sugges