UNPKG

@ckeditor/ckeditor5-ai

Version:

AI features for CKEditor 5.

1,408 lines (1,166 loc) • 143 kB
/** * @license Copyright (c) 2003-2026, 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:#1fb0ff4d; } .ck-ai-assistant-ui_theme{ --ck-color-button-default-hover-background:#f3ecff; --ck-color-button-default-active-background:#f3ecff; --ck-color-button-on-background:#f3ecff; --ck-color-button-on-hover-background:#f3ecff; --ck-color-button-on-active-background:#f3ecff; --ck-color-button-on-disabled-background:#f3ecff; --ck-color-button-on-color:#743ccd; --ck-color-button-action-background:#743ccd; --ck-color-button-action-hover-background:#6c34c9; --ck-color-button-action-active-background:#6c34c9; --ck-color-button-action-disabled-background:#ba9de6; --ck-color-list-button-hover-background:#f3ecff; --ck-ai-form-content-background:#f9f9f9; --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:#e2d6f5; } .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-candidate{ background:var(--ck-color-ai-selection); } .ck .ck-fake-ai-selection_collapsed{ border-right:1px solid var(--ck-color-base-text); outline:1px solid #ffffff80; height:100%; margin-right:-1px; } .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:.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:#fafafa; --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 (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); border:1px solid var(--ck-color-base-border); border-radius:2px; overflow-y:auto; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area-wrapper:focus{ border:var(--ck-focus-ring); box-shadow:var(--ck-focus-outer-shadow), 0 0; outline:none; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area{ background-color:var(--ck-ai-form-content-background); display:flex; } .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{ white-space:normal; width:100%; 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"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field){ padding-right:0; } [dir="rtl"] :is(.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"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-spinner-container){ margin-right:var(--ck-spacing-medium); } [dir="rtl"] :is(.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{ flex-direction:column-reverse; padding-left:2px; display:flex; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button{ min-height:unset; min-width:unset; padding:4px; position:sticky; bottom:1px; right:1px; } .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{ margin-top:var(--ck-spacing-medium); margin-bottom:calc(2 * var(--ck-spacing-medium)); border:none; padding:0; } .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__loader{ align-items:center; display:flex; } .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{ justify-content:space-between; display:flex; } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view{ flex-grow:1; } [dir="ltr"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit){ margin-left:var(--ck-spacing-medium); } [dir="rtl"] :is(.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{ border-color:var(--ck-ai-form-submit-button-border-color); color:var(--ck-ai-form-submit-button-text-color); } .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{ font-size:var(--ck-font-size-tiny); position:absolute; } [dir="ltr"] :is(.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"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history){ left:var(--ck-spacing-medium); } .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history{ bottom:var(--ck-spacing-small); top:var(--ck-spacing-small); min-height:unset; min-width:unset; padding:4px; } [dir="ltr"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea){ padding-right:30px; } [dir="rtl"] :is(.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea){ padding-left:30px; } @media screen and (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{ grid-column-gap:0px; grid-row-gap:0px; grid-template-rows:auto; grid-template-columns:auto 1fr; display:grid; } .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{ min-height:auto; font-size:var(--ck-ai-form-history-font-size); margin:var(--ck-spacing-medium) 0 0; background:none; grid-area:1 / 2 / 2 / 3; justify-self:start; padding: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; text-overflow:ellipsis; max-width:100%; font-size:var(--ck-ai-form-history-font-size); line-height:var(--ck-line-height-base); overflow:hidden; } .ck .ck-ai-form .ck-ai-form__error{ padding:var(--ck-spacing-medium); background-color:var(--ck-ai-form-error-background); color:var(--ck-color-base-text); margin-bottom:var(--ck-spacing-medium); border-radius:2px; justify-content:center; align-items:center; display:flex; } .ck.ck-button.ck-ai-tabs__resize.ck-on:not(:hover){ background-color:var(--ck-color-ai-button-tertiary-background); } :root{ --ck-color-ai-chat-shortcuts-shortcut-border:var(--ck-color-ai-accent-100); --ck-color-ai-chat-shortcuts-shortcut-icon:var(--ck-color-ai-accent-700); --ck-color-ai-chat-shortcuts-shortcut-icon-hover-background:var(--ck-color-ai-accent-50); --ck-color-ai-chat-shortcuts-prompt-highlight-background:var(--ck-color-ai-accent-700-a1); --ck-color-ai-chat-shortcuts-prompt-animation-glow-ring:var(--ck-color-ai-accent-700-a3); --ck-color-ai-chat-shortcuts-prompt-animation-border:var(--ck-color-ai-accent-700); --ck-ai-chat-shortcut-border-radius:.6em; --ck-ai-chat-shortcut-padding:var(--ck-spacing-medium) calc(2 * var(--ck-spacing-standard)); --ck-ai-chat-shortcut-min-height:3.07em; --ck-ai-chat-shortcut-icon-size:1.385em; --ck-ai-chat-shortcuts-prompt-input-animation:ck-ai-chat-shortcuts-prompt-input-glow .8s ease-in-out; --ck-ai-chat-shortcuts-prompt-input-animation-box-shadow:0 0 0 4px var(--ck-color-ai-chat-shortcuts-prompt-animation-glow-ring); --ck-ai-chat-shortcuts-prompt-input-animation-border:1px solid var(--ck-color-ai-chat-shortcuts-prompt-animation-border); } .ck.ck-ai-chat-shortcuts > .ck-list{ gap:var(--ck-spacing-medium); padding:0; } .ck.ck-ai-chat-shortcuts > .ck-list .ck.ck-button.ck-ai-chat-shortcut{ border-radius:var(--ck-ai-chat-shortcut-border-radius); border-color:var(--ck-color-ai-chat-shortcuts-shortcut-border); padding:var(--ck-ai-chat-shortcut-padding); min-height:var(--ck-ai-chat-shortcut-min-height); font-weight:500; } .ck.ck-ai-chat-shortcuts > .ck-list .ck.ck-button.ck-ai-chat-shortcut .ck-icon{ --ck-icon-size:var(--ck-ai-chat-shortcut-icon-size); --ck-icon-font-size:1em; color:var(--ck-color-ai-chat-shortcuts-shortcut-icon); margin-right:var(--ck-spacing-standard); flex:none; } .ck.ck-ai-chat-shortcuts > .ck-list .ck.ck-button.ck-ai-chat-shortcut:hover{ background-color:var(--ck-color-ai-chat-shortcuts-shortcut-icon-hover-background); } .ck.ck-ai-chat__prompt-input.ck-search.ck-ai-chat__prompt-input_highlighted .ck.ck-input.ck-textarea{ --ck-color-ai-chat-prompt-input-animation-background:var(--ck-color-ai-chat-shortcuts-prompt-highlight-background); animation:var(--ck-ai-chat-prompt-input-animation), var(--ck-ai-chat-shortcuts-prompt-input-animation); } @keyframes ck-ai-chat-shortcuts-prompt-input-glow{ 0%{ box-shadow:var(--ck-ai-chat-shortcuts-prompt-input-animation-box-shadow); border:var(--ck-ai-chat-shortcuts-prompt-input-animation-border); } 100%{ box-shadow:var(--ck-focus-outer-shadow); border:var(--ck-focus-ring); } } :root{ --ck-ai-chat-suggestion-container-header-font-size:.9em; --ck-color-ai-chat-suggestion-container-outdated-icon:var(--ck-color-ai-chat-suggestion-icon-default); --ck-color-ai-chat-suggestion-container-header-shadow:var(--ck-color-ai-shadow); --ck-color-ai-chat-suggestion-container-content-part-title:var(--ck-color-ai-gray-600); --ck-color-ai-chat-suggestion-container-content-part-active-outline:var(--ck-color-ai-accent-400); --ck-color-ai-chat-suggestion-container-content-part-active-shadow:var(--ck-color-ai-accent-700-a2); } .ck.ck-ai-suggestion__container{ border-radius:var(--ck-rounded-corners-radius); border:1px solid var(--ck-color-base-border); --ck-border-radius:4px; position:relative; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header{ border-radius:var(--ck-rounded-corners-radius); height:3.23em; padding:0 var(--ck-spacing-large); border-bottom:1px solid var(--ck-color-base-border); z-index:1; border-bottom-right-radius:0; border-bottom-left-radius:0; flex-direction:row; justify-content:space-between; align-items:center; display:flex; position:relative; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > span{ font-size:var(--ck-ai-chat-suggestion-container-header-font-size); color:var(--ck-color-ai-chat-icon); flex-grow:1; font-weight:bold; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-icon{ width:14px; height:14px; margin-right:var(--ck-spacing-medium); color:var(--ck-color-ai-chat-icon); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton{ --ck-switch-button-toggle-width:2.307em; --ck-switch-button-toggle-inner-size:1em; --ck-switch-button-translation:calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2px); --ck-color-switch-button-off-background:var(--ck-color-ai-chat-icon); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__label{ font-size:var(--ck-ai-chat-suggestion-container-header-font-size); margin-right:var(--ck-spacing-standard); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__toggle{ border-radius:var(--ck-switch-button-toggle-inner-size); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__toggle .ck-button__toggle__inner{ border-radius:100%; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body{ gap:var(--ck-spacing-large); border-radius:var(--ck-rounded-corners-radius); background:var(--ck-color-ai-chat-feed-item-background); border-top-left-radius:0; border-top-right-radius:0; flex-direction:column; display:flex; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-parts{ gap:var(--ck-spacing-large); flex-direction:column; display:flex; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-parts > .ck-ai-skeleton{ --ck-ai-skeleton-gap:var(--ck-spacing-standard); padding-top:calc(var(--ck-ai-skeleton-gap) + var(--ck-spacing-large)); padding-bottom:calc(var(--ck-ai-skeleton-gap) + var(--ck-spacing-large)); background-color:var(--ck-color-base-background); border-radius:var(--ck-rounded-corners-radius); align-items:flex-start; transition-delay:0s; position:static; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-parts > .ck-ai-skeleton.ck-hidden{ transition-duration:0s; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part{ border-radius:var(--ck-rounded-corners-radius); padding:var(--ck-spacing-large); background:var(--ck-color-base-background); opacity:0; padding-top:0; animation:.2s ease-out forwards ck-ai-suggestion-content-part-fade-in; position:relative; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title{ color:var(--ck-color-ai-chat-suggestion-container-content-part-title); justify-content:space-between; align-items:center; height:2.93em; display:flex; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active{ box-shadow:0 1px 3px 1.5px var(--ck-color-ai-chat-suggestion-container-content-part-active-shadow); outline:1px solid var(--ck-color-ai-chat-suggestion-container-content-part-active-outline); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active .ck-ai-suggestion__body__content-part__title, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active .ck-ai-suggestion__body__content-part__title .ck-toolbar .ck-icon{ color:var(--ck-color-ai-chat-primary-button-background); } :is(.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_outdated) .ck-ai-suggestion-streamable-content, :is(.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_outdated) .ck-ai-suggestion__body__content-part__title{ opacity:.5; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_pending:hover{ box-shadow:0 1px 3px 1.5px var(--ck-color-ai-chat-suggestion-container-header-shadow); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_pending:hover .ck-ai-suggestion__body__content-part__title, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_pending:hover .ck-toolbar .ck-icon{ color:var(--ck-color-ai-chat-primary-button-background); } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck.ck-ai-chat__feed__item.ck-ai-notification_warning{ width:100%; margin-left:0; margin-right:0; } .ck.ck-ai-suggestion__container .ck-ai-suggestion__body, .ck.ck-ai-suggestion__container .ck-ai-suggestion__changes{ padding:var(--ck-spacing-standard); } @keyframes ck-ai-suggestion-content-part-fade-in{ to{ opacity:1; } } :root{ --ck-color-ai-chat-feed-item-background:var(--ck-color-ai-gray-50); --ck-color-ai-chat-feed-item-background-secondary:var(--ck-color-ai-gray-50); --ck-color-ai-chat-feed-interaction-header-capabilities-text:var(--ck-color-ai-gray-600); --ck-color-ai-chat-web-source-tooltip-url:var(--ck-color-ai-accent-700); --ck-color-ai-chat-web-source-tooltip-title:var(--ck-color-ai-gray-900); --ck-color-ai-chat-feed-web-sources-header-icon:var(--ck-color-ai-gray-600); --ck-color-ai-chat-feed-web-sources-header-text:var(--ck-color-ai-gray-600); } .ck.ck-ai-chat__feed{ padding-bottom:var(--ck-spacing-extra-large); justify-content:flex-start; align-items:stretch; gap:var(--ck-spacing-large); contain:size; flex-flow:column; flex:auto; display:flex; position:relative; overflow-y:auto; } .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{ gap:var(--ck-spacing-extra-large) 0; flex-direction:column; margin-top:auto; display:flex; } .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{ :is(.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-suggestion__header__show-changes-toggle{ padding:0 var(--ck-spacing-small); min-height:22px; font-size:var(--ck-ai-chat-suggestion-container-header-font-size); } .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{ opacity:0; display:none; } .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{ text-align:end; max-width:80%; margin-inline:auto 0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message p{ background-color:var(--ck-color-ai-chat-feed-item-background-secondary); padding:var(--ck-spacing-standard); border-radius:var(--ck-ai-border-radius); display:inline-block; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion{ margin:0 var(--ck-spacing-standard); } .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-rounded-corners-radius:2px; gap:var(--ck-spacing-standard); flex-direction:row; width:fit-content; display:flex; } .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-ai-chat__feed__suggestion__actions__info > p{ color:var(--ck-color-ai-chat-icon); font-size:.75em; line-height:2.8em !important; } .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-ai-chat__feed__suggestion__actions__info > p button{ font-size:.8em; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities{ color:var(--ck-color-ai-chat-feed-interaction-header-capabilities-text); align-items:center; gap:4px; display:flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities svg{ background-color:var(--ck-tabs-panels-container-background); border-radius:50%; flex-shrink:0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities svg:not(:first-child){ margin-left:calc(var(--ck-icon-size) * -.75); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities__text{ color:var(--ck-color-ai-chat-feed-interaction-header-capabilities-text); font-weight:500; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-reply-container > *:first-child{ margin-top:0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-reply-container > *:last-child{ margin-bottom:0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-insertion:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-formatInline:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"]){ border-top:3px solid var(--ck-color-ai-suggestion-inactive-border); border-bottom:3px solid var(--ck-color-ai-suggestion-inactive-border); background:var(--ck-color-ai-suggestion-inactive-background); } :is(.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-insertion:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-formatInline:not([data-author-id="$aiSuggestion"]), .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"])).ck-widget{ border:3px solid var(--ck-color-ai-suggestion-inactive-border); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-formatBlock:not([data-author-id="$aiSuggestion"]){ box-shadow:-7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-color-ai-suggestion-inactive-background); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"]){ text-decoration:line-through 3px; text-decoration-color:var(--ck-color-ai-suggestion-inactive-border); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body .ck-suggestion-marker-insertion.table > tbody > tr > td{ background-color:var(--ck-color-suggestion-widget-insertion-background); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item :not(.ck-ai-chat__feed__context-chips, .ck-ai-chat__feed__context-chips *, .ck-ai-web-source .ck-button__label, .ck-content.ck-ai-suggestion-streamable-content, .ck-content.ck-ai-suggestion-streamable-content *){ white-space:pre-wrap; line-height:1.4em; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__context-chips{ margin-bottom:var(--ck-spacing-medium-small); justify-content:flex-end; display:flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources{ gap:var(--ck-spacing-standard); padding:var(--ck-spacing-medium) 0 0; grid-template-columns:repeat(3, 1fr); display:grid; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header{ grid-column-start:span 3; font-size:12px; font-weight:500; line-height:1.4em; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header > .ck-icon{ vertical-align:text-bottom; width:14px; height:14px; margin-right:var(--ck-spacing-medium-small); color:var(--ck-color-ai-chat-feed-web-sources-header-icon); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header > span{ color:var(--ck-color-ai-chat-feed-web-sources-header-text); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source{ padding:var(--ck-spacing-medium) var(--ck-spacing-large); background-color:var(--ck-color-base-background); border:0; border-radius:50px; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source:hover{ background-color:var(--ck-color-ai-chat-button-active-background); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source:focus, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source:active{ box-shadow:none; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-ai-web-source__image, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-button__icon{ margin-right:var(--ck-spacing-medium); color:var(--ck-color-ai-button-primary-background); width:16px; height:16px; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-button__label{ white-space:nowrap; text-overflow:ellipsis; max-width:75px; font-size:10px; font-weight:700; line-height:1.4em; overflow:hidden; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-ai-web-source__title{ align-items:center; gap:var(--ck-spacing-small); display:flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item > .ck-ai-web-sources{ padding:var(--ck-spacing-extra-large) 0 var(--ck-spacing-medium) 0; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__loader{ align-items:flex-start; display:flex; } .ck.ck-ai-chat__feed .ck.ck-ai-chat__loader .ck.ck-spinner-container.ck-ai-spinner{ margin:0 var(--ck-spacing-large); } .ck.ck-ai-chat__feed .ck.ck-ai-chat__loader .ck.ck-ai-chat__loader-text{ white-space:normal; font-weight:500; line-height:1.462em; } .ck-ai-chat__feed__ai-suggestion__actions__balloon.ck-balloon-panel{ z-index:calc(var(--ck-ai-tabs-overlay-z-index) + 1); } .ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-list__item{ min-width:fit-content; } .ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-button.ck-list-item-button{ padding-top:0; padding-bottom:0; } .ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-button.ck-list-item-button:hover:not(.ck-disabled){ background-color:var(--ck-color-ai-button-secondary-background-hover); } .ck-ai-web-source__tooltip-balloon{ border-radius:var(--ck-rounded-corners-radius); } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip{ font-size:var(--ck-font-size-small); width:214px; padding:.8em; line-height:1.4em; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-row{ align-items:center; gap:.4em; margin-bottom:.4em; display:flex; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-row:last-child{ margin-bottom:0; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-image{ width:1.477em; height:1.477em; color:var(--ck-color-ai-button-primary-background); flex-shrink:0; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-url{ font-size:var(--ck-font-size-small); color:var(--ck-color-ai-chat-web-source-tooltip-url); white-space:normal; word-wrap:break-word; overflow-wrap:break-word; word-break:break-all; font-weight:500; text-decoration:underline; } .ck-ai-web-source__tooltip-balloon .ck-ai-web-source__tooltip .ck-ai-web-source__tooltip-title{ color:var(--ck-color-ai-chat-web-source-tooltip-title); white-space:normal; vertical-align:middle; font-size:1.026em; font-weight:700; line-height:1.35; } @keyframes ck-html-streamer-fade-in{ from{ opacity:0; } to{ opacity:1; } } .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:.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{ width:426px; max-width:max-content; max-height:600px; padding-top:.5em; top:auto; overflow-y:scroll; } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button{ min-height:auto; margin-inline-end:0; padding-top:0; padding-bottom:0; font-size:.9em; } .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-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{ background-color:var(--ck-color-list-background); align-items:start; gap:0; } .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-color-ai-button-secondary-background-hover); } .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-list-item-button__check-holder{ flex-shrink:0; 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{ font-weight:500; 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-description{ padding-top:var(--ck-spacing-tiny); 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-description > span{ color:var(--ck-color-ai-chat-icon); white-space:normal; line-height:1; } .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-font-size:.5em; 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-capabilities > span{ color:var(--ck-color-ai-chat-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){ width:4ch; font-weight:bold; display:inline-block; } .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{ color:var(--ck-color-ai-chat-icon); fill:var(--ck-color-ai-chat-icon); margin-inline-end:var(--ck-spacing-standard); } :root{ --ck-color-ai-chat-prompt-input-animation-background:var(--ck-color-ai-prompt-glow); --ck-ai-chat-prompt-input-animation:ck-ai-chat-prompt-input-glow .8s ease-in-out; --ck-ai-chat-prompt-input-line-height:1.4em; --ck-ai-chat-prompt-input-padding-vertical:5px; } .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{ padding-top:var(--ck-ai-chat-prompt-input-padding-vertical); padding-bottom:var(--ck-ai-chat-prompt-input-padding-vertical); line-height:var(--ck-ai-chat-prompt-input-line-height); } [dir="ltr"] :is(.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"] :is(.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-input_highlighted .ck.ck-input.ck-textarea{ animation:var(--ck-ai-chat-prompt-input-animation); } .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button{ height:auto; margin-left:var(--ck-spacing-medium); align-self:flex-end; } .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button .ck.ck-icon.ck-button__icon{ --ck-icon-size:20px; } @keyframes ck-ai-chat-prompt-input-glow{ 0%{ background:var(--ck-color-ai-chat-prompt-input-animation-background); } 100%{ background:var(--ck-color-input-background); } } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities{ padding-top:var(--ck-spacing-medium-small); justify-content:space-between; align-items:center; gap:var(--ck-spacing-medium-small); padding-inline-end:calc(var(--ck-ui-component-min-height) + var(--ck-spacing-medium)); display:flex; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button:not(.ck-button_with-text){ padding:var(--ck-spacing-tiny); margin:0; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button > .ck-icon{ --ck-icon-size:16px; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button--commands{ visibility:hidden; pointer-events:none; margin-block:0; margin-inline:auto 0; padding:0; } .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls__model-name{ color:var(--ck-color-ai-chat-icon); } :root{ --ck-color-ai-chat-model-unavailable-message-border:var(--ck-color-ai-accent-400); --ck-color-ai-chat-model-unavailable-message-background:var(--ck-color-ai-accent-700-a1); } .ck.ck-ai-chat-controls-model-unavailable-message{ border:1px solid var(--ck-color-ai-chat-model-unavailable-message-border); background-color:var(--ck-color-ai-chat-model-unavailable-message-background); border-radius:4px; } .ck.ck-ai-chat-controls-model-unavailable-message p{ white-space:normal; padding:var(--ck-spacing-large); line-height:1.4; } .ck.ck-ai-chat-controls-model-unavailable-message p button.ck-ai-chat-controls__start-new-chat-button{ cursor:default; vertical-align:baseline; color:var(--ck-color-ai-chat-text); background:none; border:none; padding:0; 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{ box-shadow:none; background:none; } :root{ --ck-ai-chat-context-controls-balloon-width:400px; } .ck.ck-ai-chat-controls .ck-ai-chat-context-controls{ place-content:center flex-start; align-items:flex-start; gap:var(--ck-spacing-medium-small); padding-top:0; padding-bottom:var(--ck-spacing-medium-small); flex-wrap:wrap; display:flex; } .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{ margin:0; position:absolute; bottom:3px; } .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; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip{ 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-color-ai-chat-user-context-background); border-radius:var(--ck-ai-border-radius); border:var(--ck-ai-chat-border-width) solid var(--ck-color-ai-chat-border-main); color:var(--ck-color-ai-chat-icon); flex-shrink:0; justify-content:center; align-items:center; line-height:1; display:inline-flex; } :is(.ck.ck-balloon-panel, .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; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip.ck-ai-chat-context-chip_document{ max-width:unset; } :is(.ck.ck-balloon-panel, .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); } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip > .ck-ai-chat-context-chip__label{ margin:0 var(--ck-spacing-medium-small); text-overflow:ellipsis; color:var(--ck-color-ai-chat-icon); font-size:.9em; line-height:1.25; display:inline-block; overflow:hidden; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip > .ck-icon.ck-ai-chat-context-chip__type-icon{ --ck-icon-size:1em; fill:var(--ck-color-ai-chat-icon); flex-shrink:0; font-size:1em; } :is(.ck.ck-balloon-panel, .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); padding:0; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chip .ck-button > .ck-icon{ --ck-icon-size:1em; color:var(--ck-color-ai-chat-icon); font-size:1em; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chips-wrapper{ gap:var(--ck-spacing-medium-small); flex-wrap:wrap; justify-content:flex-end; align-items:center; width:100%; margin-bottom:0; padding:0; display:flex; } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chips-wrapper-balloon{ gap:var(--ck-spacing-standard); width:var(--ck-ai-chat-context-balloon-width); max-height:10em; padding:var(--ck-spacing-standard); flex-wrap:wrap; justify-content:flex-start; align-items:center; display:flex; overflow-y:auto; } :is(.ck.ck-balloon-panel, .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); } :is(.ck.ck-balloon-panel, .ck.ck-ai-chat) .ck-ai-chat-context-chips-wrapper-balloon.ck-ai-chat-context-chip_wide{ max-width:100%; } :is(.ck.ck-balloon-panel, .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-color-ai-chat-flash); color:var(--ck-color-ai-chat-flash-text); border-color:var(--ck-color-ai-chat-flash-text); } 100%{ background-color:var(--ck-color-ai-chat-user-context-background); color:var(--ck-color-ai-chat-icon); border-color:var(--ck-color-ai-chat-border-main); } } .ck.ck-button.ck-ai-chat-controls-button{ --ck-ui-component-min-height:1.88em; padding:var(--ck-spacing-tiny); flex-shrink:0; justify-content:center; align-items:center; display:flex; } .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{ letter-spacing:-.1em; text-align:center; border-width:0; padding:0; display:block; } .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-color-ai-chat-controls-loader-icon-dot:var(--ck-color-ai-gray-300); --ck-color-ai-chat-controls-loader-icon-dot-active:var(--ck-color-ai-gray-900); --ck-color-ai-chat-controls-loader:var(--ck-color-ai-gray-600); --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:.3s; } .ck-ai-chat-controls .ck-ai-chat-controls-loader{ color:var(--ck-color-ai-chat-controls-loader); align-items:center; display:flex; } .ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon{ box-sizing:border-box; width:var(--ck-ai-loader-dot-pulse-width); height:var(--ck-ai-loader-dot-pulse-height); padding:var(--ck-spacing-small) var(--ck-spacing-medium-small); border-radius:var(--ck-ai-loader-dot-pulse-border-radius); background-color:var(--ck-color-ai-chat-controls-loader-icon); justify-content:space-between; align-items:center; margin-inline-end:var(--ck-spacing-standard); display:flex; } .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); background-color:var(--ck-color-ai-chat-controls-loader-icon-dot); animation:ck-ai-loader-dot-pulse var(--ck-ai-chat-controls-loader-animation-duration) infinite; border-radius:50%; flex-shrink:0; } .ck-ai-chat-controls .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:first-child{ animation-delay:0s; } .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-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{ justify-content:space-between; display:flex; } @keyframes ck-ai-loader-dot-pulse{ 0%, 80%, 100%{ background-color:var(--ck-color-ai-chat-controls-loader-icon-dot); } 40%{ background-color:var(--ck-color-ai-chat-controls-loader-icon-dot-active); } } :root{ --ck-color-ai-chat-context-balloon-resource-item-in-context:var(--ck-color-ai-gray-900-a5); --ck-color-ai-chat-context-balloon-resource-item-in-context-icon:var(--ck-color-ai-gray-900-a5); } .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%; padding-left:var(--ck-spacing-extra-large); padding-right:var(--ck-spacing-extra-large); display:flex; } .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{ line-height:var(--ck-line-height-base); margin:0; } .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-color-ai-button-secondary-background-hover); } .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); margin-left:var(--ck-spacing-standard); margin-right:calc(-1 * var(--ck-spacing-small)); transform:rotate(-90deg); } .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-