@ckeditor/ckeditor5-collaboration-core 48.3.1 → 48.4.0-alpha.0

package/dist/index-editor.css

@@ -2,382 +2,364 @@
  * @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-user-colors--0:#6d78e8;
-  --ck-user-colors--0-alpha:#6d78e826;
-  --ck-user-colors--1:#007a6c;
-  --ck-user-colors--1-alpha:#007a6c26;
-  --ck-user-colors--2:#ba4545;
-  --ck-user-colors--2-alpha:#ba454526;
-  --ck-user-colors--3:#5635b1;
-  --ck-user-colors--3-alpha:#5635b126;
-  --ck-user-colors--4:#548a2e;
-  --ck-user-colors--4-alpha:#548a2e26;
-  --ck-user-colors--5:#c3185d;
-  --ck-user-colors--5-alpha:#c3185d26;
-  --ck-user-colors--6:#ea4343;
-  --ck-user-colors--6-alpha:#ea434326;
-  --ck-user-colors--7:#0bc3d0;
-  --ck-user-colors--7-alpha:#0bc3d026;
-  --ck-user-dot-size:6px;
+:root {
+  --ck-user-colors--0: #6d78e8;
+  --ck-user-colors--0-alpha: #6d78e826;
+  --ck-user-colors--1: #007a6c;
+  --ck-user-colors--1-alpha: #007a6c26;
+  --ck-user-colors--2: #ba4545;
+  --ck-user-colors--2-alpha: #ba454526;
+  --ck-user-colors--3: #5635b1;
+  --ck-user-colors--3-alpha: #5635b126;
+  --ck-user-colors--4: #548a2e;
+  --ck-user-colors--4-alpha: #548a2e26;
+  --ck-user-colors--5: #c3185d;
+  --ck-user-colors--5-alpha: #c3185d26;
+  --ck-user-colors--6: #ea4343;
+  --ck-user-colors--6-alpha: #ea434326;
+  --ck-user-colors--7: #0bc3d0;
+  --ck-user-colors--7-alpha: #0bc3d026;
+  --ck-user-dot-size: 6px;
 }
 
-.ck [class^="ck-user__color--"], .ck [class*=" ck-user__color--"]{
-  color:var(--ck-user-color, var(--ck-user-colors--0));
+.ck [class^="ck-user__color--"], .ck [class*=" ck-user__color--"] {
+  color: var(--ck-user-color, var(--ck-user-colors--0));
 }
 
-.ck [class^="ck-user__bg-color--"], .ck [class*=" ck-user__bg-color--"]{
-  background-color:var(--ck-user-color, var(--ck-user-colors--0));
+.ck [class^="ck-user__bg-color--"], .ck [class*=" ck-user__bg-color--"] {
+  background-color: var(--ck-user-color, var(--ck-user-colors--0));
 }
 
-.ck [class^="ck-user__selection--"], .ck [class*=" ck-user__selection--"]{
-  background-color:var(--ck-user-color-alpha, var(--ck-user-colors--0-alpha));
+.ck [class^="ck-user__selection--"], .ck [class*=" ck-user__selection--"] {
+  background-color: var(--ck-user-color-alpha, var(--ck-user-colors--0-alpha));
 }
 
-:is(.ck [class^="ck-user__selection--"], .ck [class*=" ck-user__selection--"]).ck-widget{
-  border:3px solid var(--ck-user-color, var(--ck-user-colors--0));
-  background-color:#0000;
+:is(.ck [class^="ck-user__selection--"], .ck [class*=" ck-user__selection--"]).ck-widget {
+  border: 3px solid var(--ck-user-color, var(--ck-user-colors--0));
+  background-color: #0000;
 }
 
-:is(:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]), :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-tooltip, :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-dot), :is(:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]), :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-tooltip, :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-dot)::selection{
-  background-color:var(--ck-user-color, var(--ck-user-colors--0));
+:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]), :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-tooltip, :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-dot {
+  background-color: var(--ck-user-color, var(--ck-user-colors--0));
 }
 
-:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-line{
-  border:1px solid var(--ck-user-color, var(--ck-user-colors--0));
+:is(:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]), :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-tooltip, :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-dot)::selection {
+  background-color: var(--ck-user-color, var(--ck-user-colors--0));
 }
 
-:root{
-  --ck-user-avatar-size:40px;
-  --ck-user-avatar-background:#3670ab;
-  --ck-user-avatar-color:#fff;
-  --ck-user-me-border-color:#fff;
+:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-line {
+  border: 1px solid var(--ck-user-color, var(--ck-user-colors--0));
 }
 
-.ck.ck-user{
-  background-color:var(--ck-user-avatar-background);
-  box-sizing:border-box;
-  height:var(--ck-user-avatar-size);
-  width:var(--ck-user-avatar-size);
-  min-width:var(--ck-user-avatar-size);
-  min-height:var(--ck-user-avatar-size);
-  border-radius:50%;
-  justify-content:center;
-  align-items:center;
-  margin:2px;
-  line-height:100%;
-  display:flex;
-  position:relative;
-}
-
-.ck.ck-user.ck-user_me{
-  border:2px solid var(--ck-user-me-border-color);
-  outline:2px solid var(--ck-user-avatar-background);
-}
-
-.ck.ck-user__name{
-  color:var(--ck-user-avatar-color);
-  cursor:default;
-  -webkit-user-select:none;
-  user-select:none;
+:root {
+  --ck-user-avatar-size: 40px;
+  --ck-user-avatar-background: #3670ab;
+  --ck-user-avatar-color: #fff;
+  --ck-user-me-border-color: #fff;
 }
 
-.ck.ck-user__name.ck-user__name--hidden{
-  display:none;
+.ck.ck-user {
+  background-color: var(--ck-user-avatar-background);
+  box-sizing: border-box;
+  height: var(--ck-user-avatar-size);
+  width: var(--ck-user-avatar-size);
+  min-width: var(--ck-user-avatar-size);
+  min-height: var(--ck-user-avatar-size);
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  margin: 2px;
+  line-height: 100%;
+  display: flex;
+  position: relative;
 }
 
-.ck.ck-user__img{
-  background-position:center;
-  background-repeat:no-repeat;
-  background-size:cover;
-  background-color:var(--ck-user-avatar-background);
-  border:none;
-  border-radius:50%;
-  width:100%;
-  height:100%;
-  display:none;
+.ck.ck-user.ck-user_me {
+  border: 2px solid var(--ck-user-me-border-color);
+  outline: 2px solid var(--ck-user-avatar-background);
 }
 
-.ck.ck-user__img.ck-user__anonymous{
-  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M9.8%2020H2c0-5.7%205-5.7%206-7l.2-.8c-1.6-.8-2.7-2.7-2.7-5%200-2.8%202-5.2%204.3-5.2S14%204.4%2014%207.3c0%202.2-1%204-2.6%205l.2.6c1.2%201.3%206%201.4%206%207H9.8z%22%2F%3E%0A%3C%2Fsvg%3E");
-  display:block;
+.ck.ck-user__name {
+  color: var(--ck-user-avatar-color);
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
-.ck.ck-user__img.ck-user__anonymous + .ck-user__name{
-  display:none;
+.ck.ck-user__name.ck-user__name--hidden {
+  display: none;
 }
 
-.ck.ck-user__img.ck-user__avatar{
-  background-color:#fff;
-  display:block;
+.ck.ck-user__img {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: var(--ck-user-avatar-background);
+  border: none;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  display: none;
 }
 
-.ck.ck-user__img.ck-user__img--hidden{
-  display:none;
+.ck.ck-user__img.ck-user__anonymous {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M9.8%2020H2c0-5.7%205-5.7%206-7l.2-.8c-1.6-.8-2.7-2.7-2.7-5%200-2.8%202-5.2%204.3-5.2S14%204.4%2014%207.3c0%202.2-1%204-2.6%205l.2.6c1.2%201.3%206%201.4%206%207H9.8z%22%2F%3E%0A%3C%2Fsvg%3E");
+  display: block;
 }
 
-.ck.ck-user__notification{
-  background:var(--ck-color-base-background);
-  border:2px solid var(--ck-color-base-background);
-  box-sizing:content-box;
-  border-radius:50%;
-  justify-content:center;
-  align-items:center;
-  width:15px;
-  height:15px;
-  display:flex;
-  position:absolute;
-  top:-8px;
-  right:-7px;
-  overflow:hidden;
-  transform:translateZ(0);
+.ck.ck-user__img.ck-user__anonymous + .ck-user__name {
+  display: none;
 }
 
-.ck.ck-user__notification .ck-user__icon{
-  color:var(--ck-color-annotation-info);
-  background:var(--ck-color-base-background);
-  width:19px;
-  min-width:19px;
-  max-width:19px;
-  height:19px;
-  min-height:19px;
-  max-height:19px;
+.ck.ck-user__img.ck-user__avatar {
+  background-color: #fff;
+  display: block;
 }
 
-.ck.ck-pill{
-  --ck-pill-icon-size:12px;
-  --ck-pill-radius:9999px;
-  --ck-pill-line-height:var(--ck-pill-icon-size);
-  --ck-pill-padding-block:var(--ck-spacing-small);
-  --ck-pill-padding-inline:var(--ck-spacing-standard);
-  --ck-pill-gap:var(--ck-spacing-small);
-  --ck-pill-font-size:var(--ck-font-size-small);
-  --ck-pill-background:var(--ck-color-button-default-hover-background);
-  --ck-pill-color:var(--ck-color-text);
-  align-items:center;
-  gap:var(--ck-pill-gap);
-  padding:var(--ck-pill-padding-block) var(--ck-pill-padding-inline);
-  border-radius:var(--ck-pill-radius);
-  background:var(--ck-pill-background);
-  color:var(--ck-pill-color);
-  font-size:var(--ck-pill-font-size);
-  line-height:var(--ck-pill-line-height);
-  white-space:nowrap;
-  cursor:default;
-  display:inline-flex;
+.ck.ck-user__img.ck-user__img--hidden {
+  display: none;
 }
 
-.ck.ck-pill.ck-pill_icon-right{
-  flex-direction:row-reverse;
+.ck.ck-user__notification {
+  background: var(--ck-color-base-background);
+  border: 2px solid var(--ck-color-base-background);
+  box-sizing: content-box;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  width: 15px;
+  height: 15px;
+  display: flex;
+  position: absolute;
+  top: -8px;
+  right: -7px;
+  overflow: hidden;
+  transform: translateZ(0);
 }
 
-.ck.ck-pill .ck-pill__icon{
-  flex:0 0 var(--ck-pill-icon-size);
-  width:var(--ck-pill-icon-size);
-  height:var(--ck-pill-icon-size);
-  display:inline-flex;
+.ck.ck-user__notification .ck-user__icon {
+  color: var(--ck-color-annotation-info);
+  background: var(--ck-color-base-background);
+  width: 19px;
+  min-width: 19px;
+  max-width: 19px;
+  height: 19px;
+  min-height: 19px;
+  max-height: 19px;
+}
+
+.ck.ck-pill {
+  --ck-pill-icon-size: 12px;
+  --ck-pill-radius: 9999px;
+  --ck-pill-line-height: var(--ck-pill-icon-size);
+  --ck-pill-padding-block: var(--ck-spacing-small);
+  --ck-pill-padding-inline: var(--ck-spacing-standard);
+  --ck-pill-gap: var(--ck-spacing-small);
+  --ck-pill-font-size: var(--ck-font-size-small);
+  --ck-pill-background: var(--ck-color-button-default-hover-background);
+  --ck-pill-color: var(--ck-color-text);
+  align-items: center;
+  gap: var(--ck-pill-gap);
+  padding: var(--ck-pill-padding-block) var(--ck-pill-padding-inline);
+  border-radius: var(--ck-pill-radius);
+  background: var(--ck-pill-background);
+  color: var(--ck-pill-color);
+  font-size: var(--ck-pill-font-size);
+  line-height: var(--ck-pill-line-height);
+  white-space: nowrap;
+  cursor: default;
+  display: inline-flex;
 }
 
-.ck.ck-pill .ck-pill__icon svg{
-  width:100%;
-  height:100%;
+.ck.ck-pill.ck-pill_icon-right {
+  flex-direction: row-reverse;
 }
 
-.ck.ck-pill .ck-pill__label{
-  color:inherit;
-  font-size:inherit;
-  line-height:inherit;
-  display:inline-block;
+.ck.ck-pill .ck-pill__icon {
+  flex: 0 0 var(--ck-pill-icon-size);
+  width: var(--ck-pill-icon-size);
+  height: var(--ck-pill-icon-size);
+  display: inline-flex;
 }
 
-.ck.ck-button.ck-confirm-view-submit{
-  color:var(--ck-color-button-save);
+.ck.ck-pill .ck-pill__icon svg {
+  width: 100%;
+  height: 100%;
 }
 
-.ck.ck-button.ck-confirm-view-cancel{
-  color:var(--ck-color-button-cancel);
+.ck.ck-pill .ck-pill__label {
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  display: inline-block;
 }
 
-.ck .ck-confirm-view-active{
-  transition:all .3s linear;
-  transform:translate3d(-100%, 0, 0);
+.ck.ck-button.ck-confirm-view-submit {
+  color: var(--ck-color-button-save);
 }
 
-.ck .ck-confirm-view{
-  font-size:var(--ck-font-size-base);
-  background-color:var(--ck-color-light-red);
-  justify-content:flex-start;
-  width:100%;
-  height:100%;
-  display:flex;
-  position:absolute;
-  top:0;
-  left:100%;
+.ck.ck-button.ck-confirm-view-cancel {
+  color: var(--ck-color-button-cancel);
 }
 
-.ck .ck-confirm-view .ck-confirm-view-inner{
-  padding-top:var(--ck-spacing-standard);
-  flex-direction:column;
-  justify-content:center;
-  align-items:center;
-  width:100%;
-  height:100%;
-  max-height:400px;
-  display:flex;
+.ck .ck-confirm-view-active {
+  transition: all .3s linear;
+  transform: translate3d(-100%, 0, 0);
 }
 
-.ck .ck-confirm-view p{
-  margin:0;
-  font-weight:bold;
+.ck .ck-confirm-view {
+  font-size: var(--ck-font-size-base);
+  background-color: var(--ck-color-light-red);
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 100%;
 }
 
-:root{
-  --ck-color-comment-box-border:#f2de02;
-  --ck-color-suggestion-box-deletion-border:#d85a79;
-  --ck-color-suggestion-box-insertion-border:#5ad86b;
-  --ck-color-suggestion-box-format-border:#5ac1d8;
-  --ck-color-suggestion-ai-accent:#743ccd;
-  --ck-color-suggestion-ai-accent-background:#f2ebff;
-  --ck-suggestion-ai-author-icon-size:18px;
+.ck .ck-confirm-view .ck-confirm-view-inner {
+  padding-top: var(--ck-spacing-standard);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  max-height: 400px;
+  display: flex;
 }
 
-.ck .ck-suggestion{
-  border-top-left-radius:var(--ck-border-radius);
+.ck .ck-confirm-view p {
+  margin: 0;
+  font-weight: bold;
 }
 
-.ck .ck-suggestion:focus{
-  background:var(--ck-color-button-default-hover-background);
-  outline:none;
+:root {
+  --ck-color-comment-box-border: #f2de02;
+  --ck-color-suggestion-box-deletion-border: #d85a79;
+  --ck-color-suggestion-box-insertion-border: #5ad86b;
+  --ck-color-suggestion-box-format-border: #5ac1d8;
+  --ck-color-suggestion-ai-accent: #743ccd;
+  --ck-color-suggestion-ai-accent-background: #f2ebff;
+  --ck-suggestion-ai-author-icon-size: 18px;
+  --ck-color-suggestion-marker-insertion-border: #1eae3159;
+  --ck-color-suggestion-marker-insertion-border-active: #126d1f80;
+  --ck-color-suggestion-marker-deletion-border: #ae1e4259;
+  --ck-color-suggestion-marker-deletion-border-active: #6d122980;
+  --ck-color-suggestion-widget-insertion-background: #66e5770d;
 }
 
-.ck .ck-annotation{
-  border-left:3px solid #0000;
+.ck .ck-suggestion {
+  border-top-left-radius: var(--ck-border-radius);
 }
 
-.ck .ck-suggestion--disabled-comments .ck-annotation{
-  min-height:80px;
+.ck .ck-suggestion:focus {
+  background: var(--ck-color-button-default-hover-background);
+  outline: none;
 }
 
-.ck .ck-comment, .ck .ck-thread__comment-count, .ck .ck-comment__input-container, .ck .ck-thread__header{
-  border-left:3px solid var(--ck-color-comment-box-border);
+.ck .ck-annotation {
+  border-left: 3px solid #0000;
 }
 
-.ck .ck-suggestion-insertion .ck-suggestion{
-  border-left-color:var(--ck-color-suggestion-box-insertion-border);
+.ck .ck-suggestion--disabled-comments .ck-annotation {
+  min-height: 80px;
 }
 
-.ck .ck-suggestion-deletion .ck-suggestion{
-  border-left-color:var(--ck-color-suggestion-box-deletion-border);
+.ck .ck-comment, .ck .ck-thread__comment-count, .ck .ck-comment__input-container, .ck .ck-thread__header {
+  border-left: 3px solid var(--ck-color-comment-box-border);
 }
 
-.ck .ck-suggestion-replace .ck-suggestion{
-  border-left-color:var(--ck-color-suggestion-box-insertion-border);
+.ck .ck-suggestion-insertion .ck-suggestion {
+  border-left-color: var(--ck-color-suggestion-box-insertion-border);
 }
 
-.ck .ck-suggestion-format .ck-suggestion{
-  border-left-color:var(--ck-color-suggestion-box-format-border);
+.ck .ck-suggestion-deletion .ck-suggestion {
+  border-left-color: var(--ck-color-suggestion-box-deletion-border);
 }
 
-.ck .ck-suggestion-wrapper{
-  border-radius:var(--ck-rounded-corners-radius);
-  overflow:hidden;
+.ck .ck-suggestion-replace .ck-suggestion {
+  border-left-color: var(--ck-color-suggestion-box-insertion-border);
 }
 
-.ck .ck-suggestion-wrapper:focus{
-  outline:var(--ck-focus-ring);
-  box-shadow:0 0 0 4px var(--ck-color-focus-outer-shadow);
+.ck .ck-suggestion-format .ck-suggestion {
+  border-left-color: var(--ck-color-suggestion-box-format-border);
 }
 
-.ck-balloon-panel:has(.ck-suggestion-wrapper:focus){
-  border:var(--ck-focus-ring);
-  box-shadow:var(--ck-drop-shadow), var(--ck-focus-outer-shadow), 0 0;
-  outline:none;
+.ck .ck-suggestion-wrapper {
+  border-radius: var(--ck-rounded-corners-radius);
+  overflow: hidden;
 }
 
-.ck .ck-suggestion-type{
-  font-weight:bold;
+.ck .ck-suggestion-wrapper:focus {
+  outline: var(--ck-focus-ring);
+  box-shadow: 0 0 0 4px var(--ck-color-focus-outer-shadow);
 }
 
-.ck .ck-suggestion-color{
-  vertical-align:text-bottom;
-  border-radius:14px;
-  width:14px;
-  height:14px;
-  margin:0 5px;
-  display:inline-block;
-  box-shadow:0 0 0 1px #454545;
+.ck-balloon-panel:has(.ck-suggestion-wrapper:focus) {
+  border: var(--ck-focus-ring);
+  box-shadow: var(--ck-drop-shadow), var(--ck-focus-outer-shadow), 0 0;
+  outline: none;
 }
 
-.ck .ck-suggestion-insertion .ck-comment, .ck .ck-suggestion-insertion .ck-thread__comment-count, .ck .ck-suggestion-insertion .ck-comment__input-container, .ck .ck-suggestion-replace .ck-comment, .ck .ck-suggestion-replace .ck-thread__comment-count, .ck .ck-suggestion-replace .ck-comment__input-container{
-  border-left-color:var(--ck-color-suggestion-box-insertion-border);
+.ck .ck-suggestion-type {
+  font-weight: bold;
 }
 
-.ck .ck-suggestion-deletion .ck-comment, .ck .ck-suggestion-deletion .ck-thread__comment-count, .ck .ck-suggestion-deletion .ck-comment__input-container{
-  border-left-color:var(--ck-color-suggestion-box-deletion-border);
+.ck .ck-suggestion-color {
+  vertical-align: text-bottom;
+  border-radius: 14px;
+  width: 14px;
+  height: 14px;
+  margin: 0 5px;
+  display: inline-block;
+  box-shadow: 0 0 0 1px #454545;
 }
 
-.ck .ck-suggestion-format .ck-comment, .ck .ck-suggestion-format .ck-thread__comment-count, .ck .ck-suggestion-format .ck-comment__input-container{
-  border-left-color:var(--ck-color-suggestion-box-format-border);
+.ck .ck-suggestion-insertion .ck-comment, .ck .ck-suggestion-insertion .ck-thread__comment-count, .ck .ck-suggestion-insertion .ck-comment__input-container, .ck .ck-suggestion-replace .ck-comment, .ck .ck-suggestion-replace .ck-thread__comment-count, .ck .ck-suggestion-replace .ck-comment__input-container {
+  border-left-color: var(--ck-color-suggestion-box-insertion-border);
 }
 
-.ck.ck-pill.ck-pill_ai{
-  --ck-pill-background:var(--ck-color-suggestion-ai-accent-background);
-  --ck-pill-color:var(--ck-color-suggestion-ai-accent);
-  --ck-pill-font-size:calc(var(--ck-font-size-base) * .9);
-  --ck-pill-line-height:1em;
-  --ck-pill-padding-block:calc(var(--ck-font-size-base) * .3);
-  --ck-pill-padding-inline:calc(var(--ck-font-size-base) * .6);
-  --ck-pill-gap:calc(var(--ck-font-size-base) * .3);
+.ck .ck-suggestion-deletion .ck-comment, .ck .ck-suggestion-deletion .ck-thread__comment-count, .ck .ck-suggestion-deletion .ck-comment__input-container {
+  border-left-color: var(--ck-color-suggestion-box-deletion-border);
 }
 
-.ck .ck-user[data-user-id="ck-ai-author"] .ck-user__img.ck-user__avatar{
-  background-color:var(--ck-color-base-foreground);
-  box-shadow:0 0 0 1.5px var(--ck-color-suggestion-ai-accent);
-  color:var(--ck-color-suggestion-ai-accent);
-  justify-content:center;
-  align-items:center;
-  display:flex;
+.ck .ck-suggestion-format .ck-comment, .ck .ck-suggestion-format .ck-thread__comment-count, .ck .ck-suggestion-format .ck-comment__input-container {
+  border-left-color: var(--ck-color-suggestion-box-format-border);
 }
 
-.ck .ck-user[data-user-id="ck-ai-author"] .ck-user__avatar-icon{
-  width:var(--ck-suggestion-ai-author-icon-size);
-  height:var(--ck-suggestion-ai-author-icon-size);
+.ck.ck-pill.ck-pill_ai {
+  --ck-pill-background: var(--ck-color-suggestion-ai-accent-background);
+  --ck-pill-color: var(--ck-color-suggestion-ai-accent);
+  --ck-pill-font-size: calc(var(--ck-font-size-base) * .9);
+  --ck-pill-line-height: 1em;
+  --ck-pill-padding-block: calc(var(--ck-font-size-base) * .3);
+  --ck-pill-padding-inline: calc(var(--ck-font-size-base) * .6);
+  --ck-pill-gap: calc(var(--ck-font-size-base) * .3);
 }
 
-.ck .ck-suggestion__ai-source-pill{
-  margin-top:var(--ck-spacing-small);
-  grid-column:1 / -1;
-  justify-content:flex-end;
-  display:flex;
+.ck .ck-user[data-user-id="ck-ai-author"] .ck-user__img.ck-user__avatar {
+  background-color: var(--ck-color-base-foreground);
+  box-shadow: 0 0 0 1.5px var(--ck-color-suggestion-ai-accent);
+  color: var(--ck-color-suggestion-ai-accent);
+  justify-content: center;
+  align-items: center;
+  display: flex;
 }
 
-:root{
-  --ck-color-suggestion-marker-insertion-border:#1eae3159;
-  --ck-color-suggestion-marker-insertion-border-active:#126d1f80;
-  --ck-color-suggestion-marker-insertion-background:#66e57759;
-  --ck-color-suggestion-marker-insertion-background-active:#25da3d80;
-  --ck-color-suggestion-marker-deletion-border:#ae1e4259;
-  --ck-color-suggestion-marker-deletion-border-active:#6d122980;
-  --ck-color-suggestion-marker-deletion-background:#e5668659;
-  --ck-color-suggestion-marker-deletion-background-active:#da255280;
-  --ck-color-suggestion-marker-deletion-stroke:#570f2180;
-  --ck-color-suggestion-marker-format-border:#99d7e6;
-  --ck-color-suggestion-marker-format-border-active:#5cc0d6;
-  --ck-color-suggestion-widget-insertion-background:#66e5770d;
-  --ck-color-suggestion-widget-insertion-background-active:#25da3d12;
-  --ck-color-suggestion-widget-deletion-background:#e566860d;
-  --ck-color-suggestion-widget-deletion-background-active:#c4214a12;
-  --ck-color-suggestion-widget-format-background:#0aa0c217;
-  --ck-color-suggestion-widget-format-background-active:#0aa0c229;
+.ck .ck-user[data-user-id="ck-ai-author"] .ck-user__avatar-icon {
+  width: var(--ck-suggestion-ai-author-icon-size);
+  height: var(--ck-suggestion-ai-author-icon-size);
 }
 
-.ck.ck-aria-description{
-  display:none;
+.ck .ck-suggestion__ai-source-pill {
+  margin-top: var(--ck-spacing-small);
+  grid-column: 1 / -1;
+  justify-content: flex-end;
+  display: flex;
 }
 
-:root{
-  --ck-color-suggestion-widget-th-insertion-background:#66e5771f;
-  --ck-color-suggestion-widget-th-insertion-background-active:#25da3d24;
-  --ck-color-suggestion-widget-th-deletion-background:#e5668624;
-  --ck-color-suggestion-widget-th-deletion-background-active:#c4214a29;
+.ck.ck-aria-description {
+  display: none;
 }