@ckeditor/ckeditor5-ai/dist/index-content.css

AI features for CKEditor 5.

/**
 * @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
 */
.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;
}

@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);
  }
}

@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-content.ck-ai-suggestion-streamable-content{
  padding:0;
  overflow-x:auto;
}

.ck.ck-content.ck-ai-suggestion-streamable-content :first-child{
  margin-top:0;
}

.ck.ck-content.ck-ai-suggestion-streamable-content :last-child{
  margin-bottom:0;
}

.ck.ck-content.ck-ai-suggestion-streamable-content, .ck.ck-content.ck-ai-suggestion-streamable-content *{
  white-space:normal;
}

.ck.ck-content.ck-ai-suggestion-streamable-content pre > code{
  white-space:pre-wrap;
}

.ck.ck-content.ck-ai-suggestion-streamable-content .ck-suggestion-marker-insertion:not([data-author-id="$aiSuggestion"]), .ck.ck-content.ck-ai-suggestion-streamable-content .ck-suggestion-marker-formatInline:not([data-author-id="$aiSuggestion"]), .ck.ck-content.ck-ai-suggestion-streamable-content .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-content.ck-ai-suggestion-streamable-content .ck-suggestion-marker-insertion:not([data-author-id="$aiSuggestion"]), .ck.ck-content.ck-ai-suggestion-streamable-content .ck-suggestion-marker-formatInline:not([data-author-id="$aiSuggestion"]), .ck.ck-content.ck-ai-suggestion-streamable-content .ck-suggestion-marker-deletion:not([data-author-id="$aiSuggestion"])).ck-widget{
  border:3px solid var(--ck-color-ai-suggestion-inactive-border);
}

.ck.ck-content.ck-ai-suggestion-streamable-content .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-content.ck-ai-suggestion-streamable-content .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-content.ck-ai-suggestion-streamable-content .ck-suggestion-marker-insertion.table > tbody > tr > td{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
}

:root{
  --ck-color-ai-inactive-insertion-border:#b9bbba59;
  --ck-color-ai-inactive-insertion-background:#eceeec59;
  --ck-color-ai-suggestion-inactive-background:var(--ck-color-ai-inactive-insertion-background);
  --ck-color-ai-suggestion-inactive-border:var(--ck-color-ai-inactive-insertion-border);
}