ckeditor5-premium-features 46.1.1 → 47.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (154) hide show
  1. package/LICENSE.md +9 -0
  2. package/dist/browser/ckeditor5-premium-features-editor.css +5 -2
  3. package/dist/browser/ckeditor5-premium-features.css +5 -2
  4. package/dist/browser/ckeditor5-premium-features.js +63 -61
  5. package/dist/browser/ckeditor5-premium-features.umd.js +65 -63
  6. package/dist/ckeditor5-premium-features-editor.css +2792 -53
  7. package/dist/ckeditor5-premium-features.css +3203 -55
  8. package/dist/translations/af.js +1 -1
  9. package/dist/translations/af.umd.js +1 -1
  10. package/dist/translations/ar.js +1 -1
  11. package/dist/translations/ar.umd.js +1 -1
  12. package/dist/translations/ast.js +1 -1
  13. package/dist/translations/ast.umd.js +1 -1
  14. package/dist/translations/az.js +1 -1
  15. package/dist/translations/az.umd.js +1 -1
  16. package/dist/translations/be.js +1 -1
  17. package/dist/translations/be.umd.js +1 -1
  18. package/dist/translations/bg.js +1 -1
  19. package/dist/translations/bg.umd.js +1 -1
  20. package/dist/translations/bn.js +1 -1
  21. package/dist/translations/bn.umd.js +1 -1
  22. package/dist/translations/bs.js +1 -1
  23. package/dist/translations/bs.umd.js +1 -1
  24. package/dist/translations/ca.js +1 -1
  25. package/dist/translations/ca.umd.js +1 -1
  26. package/dist/translations/cs.js +1 -1
  27. package/dist/translations/cs.umd.js +1 -1
  28. package/dist/translations/da.js +1 -1
  29. package/dist/translations/da.umd.js +1 -1
  30. package/dist/translations/de-ch.js +1 -1
  31. package/dist/translations/de-ch.umd.js +1 -1
  32. package/dist/translations/de.js +1 -1
  33. package/dist/translations/de.umd.js +1 -1
  34. package/dist/translations/el.js +1 -1
  35. package/dist/translations/el.umd.js +1 -1
  36. package/dist/translations/en-au.js +1 -1
  37. package/dist/translations/en-au.umd.js +1 -1
  38. package/dist/translations/en-gb.js +1 -1
  39. package/dist/translations/en-gb.umd.js +1 -1
  40. package/dist/translations/en.js +1 -1
  41. package/dist/translations/en.umd.js +1 -1
  42. package/dist/translations/eo.js +1 -1
  43. package/dist/translations/eo.umd.js +1 -1
  44. package/dist/translations/es-co.js +1 -1
  45. package/dist/translations/es-co.umd.js +1 -1
  46. package/dist/translations/es.js +1 -1
  47. package/dist/translations/es.umd.js +1 -1
  48. package/dist/translations/et.js +1 -1
  49. package/dist/translations/et.umd.js +1 -1
  50. package/dist/translations/eu.js +1 -1
  51. package/dist/translations/eu.umd.js +1 -1
  52. package/dist/translations/fa.js +1 -1
  53. package/dist/translations/fa.umd.js +1 -1
  54. package/dist/translations/fi.js +1 -1
  55. package/dist/translations/fi.umd.js +1 -1
  56. package/dist/translations/fr.js +1 -1
  57. package/dist/translations/fr.umd.js +1 -1
  58. package/dist/translations/gl.js +1 -1
  59. package/dist/translations/gl.umd.js +1 -1
  60. package/dist/translations/gu.js +1 -1
  61. package/dist/translations/gu.umd.js +1 -1
  62. package/dist/translations/he.js +1 -1
  63. package/dist/translations/he.umd.js +1 -1
  64. package/dist/translations/hi.js +1 -1
  65. package/dist/translations/hi.umd.js +1 -1
  66. package/dist/translations/hr.js +1 -1
  67. package/dist/translations/hr.umd.js +1 -1
  68. package/dist/translations/hu.js +1 -1
  69. package/dist/translations/hu.umd.js +1 -1
  70. package/dist/translations/hy.js +1 -1
  71. package/dist/translations/hy.umd.js +1 -1
  72. package/dist/translations/id.js +1 -1
  73. package/dist/translations/id.umd.js +1 -1
  74. package/dist/translations/it.js +1 -1
  75. package/dist/translations/it.umd.js +1 -1
  76. package/dist/translations/ja.js +1 -1
  77. package/dist/translations/ja.umd.js +1 -1
  78. package/dist/translations/jv.js +1 -1
  79. package/dist/translations/jv.umd.js +1 -1
  80. package/dist/translations/kk.js +1 -1
  81. package/dist/translations/kk.umd.js +1 -1
  82. package/dist/translations/km.js +1 -1
  83. package/dist/translations/km.umd.js +1 -1
  84. package/dist/translations/kn.js +1 -1
  85. package/dist/translations/kn.umd.js +1 -1
  86. package/dist/translations/ko.js +1 -1
  87. package/dist/translations/ko.umd.js +1 -1
  88. package/dist/translations/ku.js +1 -1
  89. package/dist/translations/ku.umd.js +1 -1
  90. package/dist/translations/lt.js +1 -1
  91. package/dist/translations/lt.umd.js +1 -1
  92. package/dist/translations/lv.js +1 -1
  93. package/dist/translations/lv.umd.js +1 -1
  94. package/dist/translations/ms.js +1 -1
  95. package/dist/translations/ms.umd.js +1 -1
  96. package/dist/translations/nb.js +1 -1
  97. package/dist/translations/nb.umd.js +1 -1
  98. package/dist/translations/ne.js +1 -1
  99. package/dist/translations/ne.umd.js +1 -1
  100. package/dist/translations/nl.js +1 -1
  101. package/dist/translations/nl.umd.js +1 -1
  102. package/dist/translations/no.js +1 -1
  103. package/dist/translations/no.umd.js +1 -1
  104. package/dist/translations/oc.js +1 -1
  105. package/dist/translations/oc.umd.js +1 -1
  106. package/dist/translations/pl.js +1 -1
  107. package/dist/translations/pl.umd.js +1 -1
  108. package/dist/translations/pt-br.js +1 -1
  109. package/dist/translations/pt-br.umd.js +1 -1
  110. package/dist/translations/pt.js +1 -1
  111. package/dist/translations/pt.umd.js +1 -1
  112. package/dist/translations/ro.js +1 -1
  113. package/dist/translations/ro.umd.js +1 -1
  114. package/dist/translations/ru.js +1 -1
  115. package/dist/translations/ru.umd.js +1 -1
  116. package/dist/translations/si.js +1 -1
  117. package/dist/translations/si.umd.js +1 -1
  118. package/dist/translations/sk.js +1 -1
  119. package/dist/translations/sk.umd.js +1 -1
  120. package/dist/translations/sl.js +1 -1
  121. package/dist/translations/sl.umd.js +1 -1
  122. package/dist/translations/sq.js +1 -1
  123. package/dist/translations/sq.umd.js +1 -1
  124. package/dist/translations/sr-latn.js +1 -1
  125. package/dist/translations/sr-latn.umd.js +1 -1
  126. package/dist/translations/sr.js +1 -1
  127. package/dist/translations/sr.umd.js +1 -1
  128. package/dist/translations/sv.js +1 -1
  129. package/dist/translations/sv.umd.js +1 -1
  130. package/dist/translations/th.js +1 -1
  131. package/dist/translations/th.umd.js +1 -1
  132. package/dist/translations/ti.js +1 -1
  133. package/dist/translations/ti.umd.js +1 -1
  134. package/dist/translations/tk.js +1 -1
  135. package/dist/translations/tk.umd.js +1 -1
  136. package/dist/translations/tr.js +1 -1
  137. package/dist/translations/tr.umd.js +1 -1
  138. package/dist/translations/tt.js +1 -1
  139. package/dist/translations/tt.umd.js +1 -1
  140. package/dist/translations/ug.js +1 -1
  141. package/dist/translations/ug.umd.js +1 -1
  142. package/dist/translations/uk.js +1 -1
  143. package/dist/translations/uk.umd.js +1 -1
  144. package/dist/translations/ur.js +1 -1
  145. package/dist/translations/ur.umd.js +1 -1
  146. package/dist/translations/uz.js +1 -1
  147. package/dist/translations/uz.umd.js +1 -1
  148. package/dist/translations/vi.js +1 -1
  149. package/dist/translations/vi.umd.js +1 -1
  150. package/dist/translations/zh-cn.js +1 -1
  151. package/dist/translations/zh-cn.umd.js +1 -1
  152. package/dist/translations/zh.js +1 -1
  153. package/dist/translations/zh.umd.js +1 -1
  154. package/package.json +26 -26
@@ -391,6 +391,3147 @@
391
391
  }
392
392
 
393
393
 
394
+ /*
395
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
396
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
397
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
398
+ *
399
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
400
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
401
+ */
402
+
403
+ .ck.ck-button.ck-tab-button {
404
+ padding: 0;
405
+ border: 0;
406
+ cursor: pointer;
407
+ justify-content: center;
408
+ }
409
+
410
+ .ck.ck-button.ck-tab-button:active,
411
+ .ck.ck-button.ck-tab-button:focus {
412
+ box-shadow: none;
413
+ }
414
+
415
+ .ck.ck-button.ck-tab-button:not(.ck-disabled):hover {
416
+ background-color: var(--ck-color-tab-button-active-background);
417
+ }
418
+
419
+ .ck.ck-button.ck-tab-button .ck.ck-icon {
420
+ padding: var(--ck-tab-button-padding);
421
+ color: var(--ck-color-tab-button-icon);
422
+ }
423
+
424
+ .ck.ck-button.ck-tab-button.ck-on {
425
+ border: 0;
426
+ background-color: var(--ck-color-tab-button-active-background);
427
+ }
428
+
429
+ .ck.ck-button.ck-tab-button.ck-on .ck.ck-icon {
430
+ color: var(--ck-color-tab-button-active-icon);
431
+ background-color: var(--ck-color-tab-button-active-background);
432
+ }
433
+
434
+ .ck.ck-button.ck-tab-button.ck-tab-button_top.ck-on {
435
+ border-bottom: 1px solid var(--ck-color-tab-button-active-icon);
436
+ box-shadow: var(--ck-color-tab-button-active-icon) 0 1px 0 0;
437
+ }
438
+
439
+ .ck.ck-button.ck-tab-button.ck-tab-button_top.ck-on .ck.ck-icon {
440
+ padding-bottom: calc(var(--ck-tab-button-padding) - 1px);
441
+ }
442
+
443
+ .ck.ck-button.ck-tab-button.ck-tab-button_left.ck-on {
444
+ border-left: 0;
445
+ border-right: 1px solid var(--ck-color-tab-button-active-icon);
446
+ box-shadow: var(--ck-color-tab-button-active-icon) 1px 0 0 0;
447
+ }
448
+
449
+ .ck.ck-button.ck-tab-button.ck-tab-button_left.ck-on .ck.ck-icon {
450
+ padding-right: calc(var(--ck-tab-button-padding) - 1px);
451
+ }
452
+
453
+ .ck.ck-button.ck-tab-button.ck-tab-button_right.ck-on {
454
+ border-right: 0;
455
+ border-left: 1px solid var(--ck-color-tab-button-active-icon);
456
+ box-shadow: var(--ck-color-tab-button-active-icon) -1px 0 0 0;
457
+ }
458
+
459
+ .ck.ck-button.ck-tab-button.ck-tab-button_right.ck-on .ck.ck-icon {
460
+ padding-left: calc(var(--ck-tab-button-padding) - 1px);
461
+ }
462
+
463
+ /*
464
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
465
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
466
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
467
+ *
468
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
469
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
470
+ */
471
+
472
+ :root {
473
+ --ck-tabs-buttons-container-buttons-vertical-spacing: 0;
474
+ --ck-tabs-panels-container-width: auto;
475
+ --ck-tabs-panels-container-background: hsl(0, 0%, 100%);
476
+ --ck-tab-button-padding: 12px;
477
+ --ck-tab-button-gap: var(--ck-spacing-medium);
478
+ --ck-color-tabs-buttons-container-background: hsl(0, 0%, 96%);
479
+ --ck-color-tab-button-icon: hsl(0, 0%, 44%);
480
+ --ck-color-tab-button-active-icon: hsl(0, 0%, 44%);
481
+ --ck-color-tab-button-active-background: hsl(0, 0%, 91%);
482
+ }
483
+
484
+ .ck.ck-tabs {
485
+ display: flex;
486
+ height: 100%;
487
+
488
+ font-size: var(--ck-font-size-base);
489
+ border: 1px solid var(--ck-color-base-border);
490
+ border-radius: var(--ck-border-radius);
491
+ }
492
+
493
+ .ck.ck-tabs.ck-tabs_top {
494
+ flex-direction: column;
495
+ }
496
+
497
+ .ck.ck-tabs.ck-tabs_left {
498
+ flex-direction: row;
499
+ }
500
+
501
+ .ck.ck-tabs.ck-tabs_right {
502
+ flex-direction: row-reverse;
503
+ }
504
+
505
+ .ck.ck-tabs .ck-tabs__panels-container {
506
+ width: var(--ck-tabs-panels-container-width);
507
+ transition: width 0.8s ease-in-out;
508
+ transition: height 0.8s ease-in-out;
509
+ background-color: var(--ck-tabs-panels-container-background);
510
+ flex-grow: 1;
511
+ }
512
+
513
+ .ck.ck-tabs .ck-tabs__buttons-container {
514
+ display: flex;
515
+ background-color: var(--ck-color-tabs-buttons-container-background);
516
+ gap: var(--ck-tab-button-gap);
517
+ }
518
+
519
+ .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_top {
520
+ border-top: none;
521
+ border-bottom: 1px solid var(--ck-color-base-border);
522
+ flex-direction: row;
523
+ }
524
+
525
+ .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_left {
526
+ border-left: none;
527
+ border-right: 1px solid var(--ck-color-base-border);
528
+ }
529
+
530
+ .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_right {
531
+ border-right: none;
532
+ border-left: 1px solid var(--ck-color-base-border);
533
+ }
534
+
535
+ .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_left,
536
+ .ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_right {
537
+ flex-direction: column;
538
+ padding-top: var(--ck-tabs-buttons-container-buttons-vertical-spacing);
539
+ }
540
+
541
+ /*
542
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
543
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
544
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
545
+ *
546
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
547
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
548
+ */
549
+
550
+ :root {
551
+ --ck-tabs-overlay-top-position: 0;
552
+ --ck-tabs-overlay-right-position: 0;
553
+ --ck-tabs-overlay-left-position: auto;
554
+ --ck-tabs-overlay-bottom-position: auto;
555
+ --ck-tabs-overlay-height: 100%;
556
+ --ck-ai-tabs-overlay-width: 500px;
557
+ --ck-ai-tabs-overlay-width-maximized: 50%;
558
+ }
559
+
560
+ .ck.ck-tabs.ck-ai-tabs {
561
+ --ck-tabs-buttons-container-buttons-vertical-spacing: 61.5px;
562
+ --ck-color-tab-button-active-icon: hsl(263, 59%, 52%);
563
+ --ck-tabs-panels-container-width: 450px;
564
+ }
565
+
566
+ .ck.ck-tabs.ck-ai-tabs .ck-tab-panel {
567
+ height: 100%;
568
+ display: flex;
569
+ flex-direction: column;
570
+ overflow: hidden;
571
+ }
572
+
573
+ .ck.ck-tabs.ck-ai-tabs .ck-tab-panel>* {
574
+ flex-grow: 1;
575
+ }
576
+
577
+ .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay {
578
+ position: fixed;
579
+ height: var(--ck-tabs-overlay-height);
580
+ top: var(--ck-tabs-overlay-top-position);
581
+ right: var(--ck-tabs-overlay-right-position);
582
+ left: var(--ck-tabs-overlay-left-position);
583
+ bottom: var(--ck-tabs-overlay-bottom-position);
584
+ z-index: calc(var(--ck-z-dialog) - 1);
585
+ border-radius: 0;
586
+ border-top: 0;
587
+ border-bottom: 0;
588
+ width: var(--ck-ai-tabs-overlay-width);
589
+ transition: width 0.3s ease;
590
+ }
591
+
592
+ .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-ai-tabs_maximized {
593
+ width: var(--ck-ai-tabs-overlay-width-maximized);
594
+ }
595
+
596
+ .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-tabs_left {
597
+ --ck-tabs-overlay-right-position: auto;
598
+ --ck-tabs-overlay-left-position: 0;
599
+ border-left: 0;
600
+ }
601
+
602
+ .ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-tabs_right {
603
+ border-right: 0;
604
+ }
605
+ /*
606
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
607
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
608
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
609
+ *
610
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
611
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
612
+ */
613
+
614
+ /*
615
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
616
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
617
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
618
+ *
619
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
620
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
621
+ */
622
+
623
+ /*
624
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
625
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
626
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
627
+ *
628
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
629
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
630
+ */
631
+
632
+ /*
633
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
634
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
635
+ */
636
+
637
+ .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view {
638
+ width: 100%;
639
+ }
640
+
641
+ .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view .ck-labeled-field-view__status_error {
642
+ line-height: 1.4em;
643
+ }
644
+
645
+ .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea {
646
+ line-height: calc(var(--ck-font-size-base) * 2);
647
+
648
+ /* The padding is used to make space for the add context button. */
649
+ }
650
+
651
+ [dir="ltr"] .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea {
652
+ padding-right: 2.6em;
653
+ }
654
+
655
+ [dir="rtl"] .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea {
656
+ padding-left: 2.6em;
657
+ }
658
+
659
+ .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper > .ck.ck-label {
660
+ visibility: hidden;
661
+ }
662
+
663
+ .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button {
664
+ height: auto;
665
+ align-self: flex-end;
666
+ margin-left: var(--ck-spacing-medium);
667
+ background-color: var(--ck-ai-background-color-action-button);
668
+ color: var(--ck-ai-font-color-action-button);
669
+ }
670
+
671
+ .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button.ck-disabled {
672
+ opacity: var(--ck-disabled-opacity);
673
+ }
674
+
675
+ .ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button > svg {
676
+ opacity: 1;
677
+ }
678
+
679
+ /*
680
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
681
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
682
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
683
+ *
684
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
685
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
686
+ */
687
+
688
+ .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities {
689
+ display: flex;
690
+ justify-content: space-between;
691
+ align-items: center;
692
+ padding-top: var(--ck-spacing-medium-small);
693
+ gap: var(--ck-spacing-medium-small);
694
+ padding-inline-end: calc(var(--ck-ui-component-min-height) + var(--ck-spacing-medium));
695
+ }
696
+
697
+ .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button:not(.ck-button_with-text) {
698
+ margin: 0;
699
+ padding: var(--ck-spacing-tiny);
700
+ }
701
+
702
+ .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button > .ck-icon {
703
+ --ck-icon-size: 16px;
704
+ color: var(--ck-ai-chat-color-icon);
705
+ }
706
+
707
+ .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button--commands {
708
+ margin-inline-start: auto;
709
+ margin-inline-end: 0;
710
+ margin-block-start: 0;
711
+ margin-block-end: 0;
712
+ padding: 0;
713
+ /*
714
+ * TODO: Remove this when the commands button is implemented.
715
+ */
716
+ visibility: hidden;
717
+ pointer-events: none;
718
+ }
719
+
720
+ .ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls__model-name {
721
+ color: var(--ck-ai-chat-color-icon);
722
+ }
723
+
724
+ /*
725
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
726
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
727
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
728
+ *
729
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
730
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
731
+ */
732
+
733
+ :root {
734
+ --ck-ai-chat-context-controls-balloon-width: 400px;
735
+ }
736
+
737
+ .ck.ck-ai-chat-controls .ck-ai-chat-context-controls {
738
+ display: flex;
739
+ align-content: center;
740
+ justify-content: flex-start;
741
+ align-items: flex-start;
742
+ flex-wrap: wrap;
743
+ padding-top: 0;
744
+ gap: var(--ck-spacing-medium-small);
745
+
746
+ padding-bottom: var(--ck-spacing-medium-small);
747
+ }
748
+
749
+ .ck.ck-ai-chat-controls .ck-ai-chat-context-controls:has(.ck-ai-chat-context-controls__pending-contexts:empty) {
750
+ padding-bottom: var(--ck-spacing-small);
751
+ }
752
+
753
+ .ck.ck-ai-chat-controls .ck-ai-chat-context-controls .ck-ai-chat-context-controls__pending-contexts {
754
+ display: contents;
755
+ }
756
+
757
+ /* The button to add context living inside the query input. */
758
+
759
+ .ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button {
760
+ position: absolute;
761
+ bottom: 3px;
762
+ opacity: .7;
763
+ margin: 0;
764
+ }
765
+
766
+ .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 {
767
+ opacity: 1;
768
+ }
769
+
770
+ /*
771
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
772
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
773
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
774
+ *
775
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
776
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
777
+ */
778
+
779
+ /* .ck-ai-chat-context-chip {
780
+
781
+ } */
782
+
783
+ :root {
784
+ --ck-ai-chat-context-balloon-width: 290px;
785
+ }
786
+
787
+ .ck.ck-balloon-panel .ck-ai-chat-context-chip, .ck.ck-ai-chat .ck-ai-chat-context-chip {
788
+ display: inline-flex;
789
+ align-items: center;
790
+ justify-content: center;
791
+ flex-shrink: 0;
792
+
793
+ max-width: max(calc(33% - var(--ck-spacing-medium-small) - (2 * var(--ck-spacing-large) / 3)), 118px);
794
+ box-sizing: border-box;
795
+
796
+ width: auto;
797
+
798
+ padding: var(--ck-spacing-small) var(--ck-spacing-medium-small);
799
+
800
+ background-color: var(--ck-ai-chat-user-context-background);
801
+ border-radius: var(--ck-ai-border-radius);
802
+ border: var(--ck-ai-chat-border-width) solid var(--ck-ai-border-color-main);
803
+
804
+ line-height: 1;
805
+ color: var(--ck-ai-chat-color-icon);
806
+ }
807
+
808
+ .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 {
809
+ max-width: max(calc(66% - var(--ck-spacing-medium-small)), 240px);
810
+ width: auto;
811
+ }
812
+
813
+ .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 {
814
+ max-width: unset;
815
+ }
816
+
817
+ .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 {
818
+ animation: ck-ai-new-item-flash var(--ck-ai-chat-animation-duration) var(--ck-ai-chat-animation-timing);
819
+ }
820
+
821
+ .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 {
822
+ font-size: 0.9em;
823
+ display: inline-block;
824
+ margin: 0 var(--ck-spacing-medium-small);
825
+ text-overflow: ellipsis;
826
+ overflow: hidden;
827
+ line-height: 1.25;
828
+ color: var(--ck-ai-chat-color-icon);
829
+ }
830
+
831
+ .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 {
832
+ --ck-icon-size: 1em;
833
+
834
+ flex-shrink: 0;
835
+ font-size: 1em;
836
+ fill: var(--ck-ai-chat-color-icon);
837
+ }
838
+
839
+ .ck.ck-balloon-panel .ck-ai-chat-context-chip .ck-button, .ck.ck-ai-chat .ck-ai-chat-context-chip .ck-button {
840
+ --ck-ui-component-min-height: 1em;
841
+
842
+ max-width: var(--ck-ui-component-min-height);
843
+ max-height: var(--ck-ui-component-min-height);
844
+ border: none;
845
+ padding: var(--ck-spacing-tiny);
846
+ }
847
+
848
+ .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 {
849
+ --ck-icon-size: 1em;
850
+
851
+ font-size: 1em;
852
+ fill: var(--ck-ai-chat-color-icon);
853
+ }
854
+
855
+ .ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper {
856
+ display: flex;
857
+ gap: var(--ck-spacing-medium-small);
858
+ flex-wrap: wrap;
859
+ align-items: center;
860
+ justify-content: flex-end;
861
+
862
+ width: 100%;
863
+ margin-bottom: 0;
864
+ padding: 0;
865
+ }
866
+
867
+ .ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper-balloon, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper-balloon {
868
+ display: flex;
869
+ gap: var(--ck-spacing-standard);
870
+ flex-wrap: wrap;
871
+ align-items: center;
872
+ justify-content: flex-start;
873
+
874
+ width: var(--ck-ai-chat-context-balloon-width);
875
+ max-height: 10em;
876
+ padding: var(--ck-spacing-standard);
877
+ overflow-y: auto;
878
+ }
879
+
880
+ .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 {
881
+ max-width: max( calc(50% - var(--ck-spacing-standard)), 110px);
882
+ }
883
+
884
+ .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 {
885
+ max-width: 100%;
886
+ }
887
+
888
+ .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 {
889
+ animation: none;
890
+ }
891
+
892
+ @keyframes ck-ai-new-item-flash {
893
+ 0% {
894
+ background-color: var(--ck-ai-chat-flash-color);
895
+ color: var(--ck-ai-chat-flash-color-text);
896
+ border-color: var(--ck-ai-chat-flash-color-text);
897
+ }
898
+
899
+ 100% {
900
+ background-color: var(--ck-ai-chat-user-context-background);
901
+ color: var(--ck-ai-chat-color-icon);
902
+ border-color: var(--ck-ai-border-color-main);
903
+ }
904
+ }
905
+
906
+ /*
907
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
908
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
909
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
910
+ *
911
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
912
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
913
+ */
914
+
915
+ .ck.ck-button.ck-ai-chat-controls-button {
916
+ --ck-ui-component-min-height: 1.88em;
917
+
918
+ padding: var(--ck-spacing-tiny);
919
+ flex-shrink: 0;
920
+ display: flex;
921
+ align-items: center;
922
+ justify-content: center;
923
+ }
924
+
925
+ .ck.ck-button.ck-ai-chat-controls-button:not(.ck-button_with-text) {
926
+ margin: 0 0 var(--ck-spacing-tiny) 0;
927
+ padding: var(--ck-spacing-tiny);
928
+ }
929
+
930
+ .ck.ck-button.ck-ai-chat-controls-button.ck-button_with-text.ck-ai-chat-controls_context_show-more-button {
931
+ display: block;
932
+ padding: 0;
933
+ border-width: 0;
934
+ letter-spacing: -0.1em;
935
+ text-align: center;
936
+ }
937
+
938
+ .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):hover {
939
+ background-color: var(--ck-ai-chat-button-active-background-color);
940
+ color: var(--ck-ai-chat-button-hover-color);
941
+ }
942
+
943
+ .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):hover .ck-button__icon {
944
+ fill: var(--ck-ai-chat-button-hover-color);
945
+ }
946
+
947
+ .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):active {
948
+ background-color: var(--ck-ai-chat-button-active-background-color);
949
+ color: var(--ck-ai-chat-button-active-color);
950
+ }
951
+
952
+ .ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):active .ck-button__icon {
953
+ fill: var(--ck-ai-chat-button-active-color);
954
+ }
955
+
956
+ .ck.ck-button.ck-ai-chat-controls-button.ck-on:not(.ck-disabled):not(:hover):not(:active):not(.ck-disabled) {
957
+ background-color: var(--ck-ai-chat-button-active-background-color);
958
+ color: var(--ck-ai-chat-button-active-color);
959
+ }
960
+
961
+ .ck.ck-button.ck-ai-chat-controls-button.ck-on:not(.ck-disabled):not(:hover):not(:active):not(.ck-disabled) .ck-button__icon {
962
+ color: var(--ck-ai-chat-button-active-color);
963
+ }
964
+
965
+ .ck.ck-button.ck-ai-chat-controls-button > .ck-icon {
966
+ --ck-icon-size: 16px;
967
+ }
968
+
969
+ .ck.ck-button.ck-ai-chat-controls-button .ck-dropdown__arrow {
970
+ display: none;
971
+ }
972
+
973
+ /* svg {
974
+ margin-right: 0;
975
+ width: auto;
976
+ font-size: 1em;
977
+ } */
978
+
979
+ /*
980
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
981
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
982
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
983
+ *
984
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
985
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
986
+ */
987
+
988
+ :root {
989
+ --ck-ai-chat-loader-icon-dot-color: hsl(216, 5%, 81%);
990
+ --ck-ai-chat-loader-icon-dot-active-color: hsl(0, 0%, 20%);
991
+ --ck-ai-loader-dot-pulse-dot-size: 6px;
992
+ --ck-ai-loader-dot-pulse-width: 40px;
993
+ --ck-ai-loader-dot-pulse-height: 20px;
994
+ --ck-ai-loader-dot-pulse-border-radius: 8px;
995
+ --ck-ai-loader-dot-pulse-animation-delay: 0.3s;
996
+ }
997
+
998
+ .ck-ai-chat-controls-loader {
999
+ display: flex;
1000
+ align-items: center;
1001
+ color: var(--ck-color-input-disabled-text);
1002
+ }
1003
+
1004
+ .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon {
1005
+ box-sizing: border-box;
1006
+ display: flex;
1007
+ align-items: center;
1008
+ justify-content: space-between;
1009
+ width: var(--ck-ai-loader-dot-pulse-width);
1010
+ height: var(--ck-ai-loader-dot-pulse-height);
1011
+ margin-inline-end: var(--ck-spacing-standard);
1012
+ padding: var(--ck-spacing-small) var(--ck-spacing-medium-small);
1013
+ border-radius: var(--ck-ai-loader-dot-pulse-border-radius);
1014
+ background-color: var(--ck-ai-chat-loader-icon-color);
1015
+ }
1016
+
1017
+ .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot {
1018
+ width: var(--ck-ai-loader-dot-pulse-dot-size);
1019
+ height: var(--ck-ai-loader-dot-pulse-dot-size);
1020
+ border-radius: 50%;
1021
+ background-color: var(--ck-ai-chat-loader-icon-dot-color);
1022
+ flex-shrink: 0;
1023
+
1024
+ animation: ck-ai-loader-dot-pulse var(--ck-ai-chat-loader-animation-duration) infinite;
1025
+ }
1026
+
1027
+ .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(1) {
1028
+ animation-delay: 0s;
1029
+ }
1030
+
1031
+ .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(2) {
1032
+ animation-delay: var(--ck-ai-loader-dot-pulse-animation-delay);
1033
+ }
1034
+
1035
+ .ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(3) {
1036
+ animation-delay: calc(var(--ck-ai-loader-dot-pulse-animation-delay) * 2);
1037
+ }
1038
+
1039
+ .ck.ck-button.ai-chat-controls-loader__cancel-button {
1040
+ min-height: 22px;
1041
+ padding: 0 var(--ck-spacing-medium) 0 var(--ck-spacing-small);
1042
+ border: var(--ck-ai-chat-border-width) solid var(--ck-ai-border-color-button);
1043
+ border-radius: var(--ck-border-radius);
1044
+ color: var(--ck-ai-chat-color-text);
1045
+ }
1046
+
1047
+ .ck.ck-button.ai-chat-controls-loader__cancel-button .ck.ck-icon.ck-button__icon {
1048
+ color: var(--ck-ai-chat-color-text);
1049
+ height: 14px;
1050
+ width: 14px;
1051
+ margin-right: 4px;
1052
+ }
1053
+
1054
+ .ck.ck-button.ai-chat-controls-loader__cancel-button:hover {
1055
+ background-color: var(--ck-ai-chat-button-active-background-color);
1056
+ }
1057
+
1058
+ .ck-ai-chat-controls-loader-wrapper {
1059
+ display: flex;
1060
+ justify-content: space-between;
1061
+ }
1062
+
1063
+ @keyframes ck-ai-loader-dot-pulse {
1064
+ 0%, 80%, 100% {
1065
+ background-color: var(--ck-ai-chat-loader-icon-dot-color);
1066
+ }
1067
+
1068
+ 40% {
1069
+ background-color: var(--ck-ai-chat-loader-icon-dot-active-color);
1070
+ }
1071
+ }
1072
+
1073
+ /*
1074
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
1075
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
1076
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
1077
+ *
1078
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
1079
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
1080
+ */
1081
+
1082
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel {
1083
+ min-width: 157px;
1084
+ max-width: 250px;
1085
+ }
1086
+
1087
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button {
1088
+ width: 100%;
1089
+ display: flex;
1090
+ padding-left: var(--ck-spacing-extra-large);
1091
+ padding-right: var(--ck-spacing-extra-large);
1092
+ }
1093
+
1094
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:first-child {
1095
+ margin-top: var(--ck-spacing-tiny);
1096
+ }
1097
+
1098
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:last-child {
1099
+ margin-bottom: var(--ck-spacing-tiny);
1100
+ }
1101
+
1102
+ .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 {
1103
+ --ck-icon-size: 16px;
1104
+ }
1105
+
1106
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button .ck-button__label {
1107
+ margin: 0;
1108
+ line-height: var(--ck-line-height-base);
1109
+ }
1110
+
1111
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:hover {
1112
+ background-color: var(--ck-ai-button-secondary-hover-background-color);
1113
+ }
1114
+
1115
+ .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 {
1116
+ width: var(--ck-dropdown-arrow-size);
1117
+
1118
+ transform: rotate(-90deg);
1119
+
1120
+ /* A space to accommodate the triangle. */
1121
+ margin-left: var(--ck-spacing-standard);
1122
+
1123
+ /* Nudge the arrow gently to the right because its center of gravity is to the left */
1124
+ margin-right: calc(-1 * var(--ck-spacing-small));
1125
+ }
1126
+
1127
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button > span {
1128
+ flex-grow: 1;
1129
+ }
1130
+
1131
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form {
1132
+ width: var(--ck-ai-chat-context-controls-balloon-width);
1133
+ line-height: var(--ck-form-header-height);
1134
+ }
1135
+
1136
+ .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 {
1137
+ display: flex;
1138
+ align-items: flex-start;
1139
+ padding: var(--ck-spacing-large);
1140
+ }
1141
+
1142
+ .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 {
1143
+ width: 100%;
1144
+ }
1145
+
1146
+ .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 {
1147
+ width: 100%;
1148
+ font: normal normal normal var(--ck-font-size-base) / var(--ck-line-height-base) var(--ck-font-face);
1149
+ vertical-align: middle;
1150
+ line-height: var(--ck-line-height-base);
1151
+ }
1152
+
1153
+ .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 {
1154
+ visibility: hidden;
1155
+ }
1156
+
1157
+ .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 {
1158
+ height: auto;
1159
+ margin-left: var(--ck-spacing-medium);
1160
+ background-color: var(--ck-ai-background-color-action-button);
1161
+ color: var(--ck-ai-font-color-action-button);
1162
+ }
1163
+
1164
+ .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 {
1165
+ opacity: 0.5;
1166
+ }
1167
+
1168
+ .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 {
1169
+ opacity: 1;
1170
+ }
1171
+
1172
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel {
1173
+ width: var(--ck-ai-chat-context-controls-balloon-width);
1174
+ height: 319px;
1175
+ }
1176
+
1177
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel:has(.ck-ai-skeleton:not(.ck-hidden)) {
1178
+ overflow: hidden;
1179
+ }
1180
+
1181
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck.ck-search__query_with-icon {
1182
+ padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-tiny) var(--ck-spacing-large);
1183
+ }
1184
+
1185
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-skeleton {
1186
+ --ck-ai-skeleton-gap: var(--ck-spacing-small);
1187
+
1188
+ padding-top: var(--ck-spacing-standard);
1189
+ padding-bottom: var(--ck-spacing-standard);
1190
+ }
1191
+
1192
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list {
1193
+ height: 233px;
1194
+ overflow-y: auto;
1195
+ overflow-x: hidden;
1196
+ }
1197
+
1198
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item {
1199
+ display: flex;
1200
+ align-items: center;
1201
+ padding: var(--ck-spacing-tiny) var(--ck-spacing-extra-large);
1202
+ border-radius: var(--ck-border-radius);
1203
+
1204
+ cursor: pointer;
1205
+ transition: background-color 0.2s;
1206
+ }
1207
+
1208
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item:hover {
1209
+ background-color: var(--ck-ai-button-secondary-hover-background-color);
1210
+ }
1211
+
1212
+ .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 {
1213
+ color: hsla(0, 0%, 20%, 0.5);
1214
+ pointer-events: none;
1215
+ }
1216
+
1217
+ .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 * {
1218
+ color: inherit;
1219
+ }
1220
+
1221
+ .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 {
1222
+ display: flex;
1223
+ align-items: center;
1224
+ justify-content: center;
1225
+ height: 1.14em;
1226
+ margin-right: 0.35em;
1227
+ flex-shrink: 0;
1228
+ }
1229
+
1230
+ .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 {
1231
+ height: 1.368em;
1232
+ fill: currentColor;
1233
+ }
1234
+
1235
+ .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 {
1236
+ color: hsla(0, 0%, 20%, 0.5);
1237
+ }
1238
+
1239
+ .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 {
1240
+ flex: 1;
1241
+ font-size: 1em;
1242
+ line-height: var(--ck-line-height-base);
1243
+ overflow: hidden;
1244
+ text-overflow: ellipsis;
1245
+ white-space: nowrap;
1246
+ }
1247
+
1248
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list.ck-hidden {
1249
+ display: none;
1250
+ }
1251
+
1252
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__chip-tooltip {
1253
+ max-width: 180px;
1254
+ }
1255
+
1256
+ .ck.ck-balloon-panel.ck-ai-chat-context-controls__chip-tooltip .ck.ck-tooltip__text {
1257
+ white-space: normal;
1258
+ display: inline-block;
1259
+ padding: var(--ck-tooltip-text-padding) 0;
1260
+ }
1261
+
1262
+ .ck.ck-ai-chat-controls {
1263
+ padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard);
1264
+ line-height: var(--ck-form-header-height);
1265
+ border-top: var(--ck-ai-chat-border-width) solid var(--ck-color-base-border);
1266
+
1267
+ /* When loader wrapper (second child) is visible, bottom padding should be larger to match the top one. */
1268
+ }
1269
+
1270
+ .ck.ck-ai-chat-controls:has(>:first-child.ck-hidden) {
1271
+ padding-bottom: var(--ck-spacing-large);
1272
+ }
1273
+
1274
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection {
1275
+ line-height: 0;
1276
+ }
1277
+
1278
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne {
1279
+ bottom: calc(100% + 10px);
1280
+ top: auto;
1281
+ padding-top: .5em;
1282
+ width: 426px;
1283
+ max-width: max-content;
1284
+ max-height: 600px;
1285
+ overflow-y: scroll;
1286
+ }
1287
+
1288
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::before,
1289
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::after {
1290
+ content: '';
1291
+ position: absolute;
1292
+ left: calc(2 * var(--ck-balloon-arrow-half-width));
1293
+ bottom: calc(-1 * var(--ck-balloon-arrow-height));
1294
+ width: 0;
1295
+ height: 0;
1296
+ border-style: solid;
1297
+ border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
1298
+ border-color: var(--ck-color-panel-border) transparent transparent;
1299
+ }
1300
+
1301
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::before {
1302
+ z-index: var(--ck-balloon-panel-arrow-z-index);
1303
+ margin-bottom: calc(-1 * var(--ck-balloon-border-width));
1304
+ filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
1305
+ }
1306
+
1307
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::after {
1308
+ z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
1309
+ margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width));
1310
+ }
1311
+
1312
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button {
1313
+ border: 0;
1314
+ font-size: .9em;
1315
+ margin-inline-end: 0;
1316
+ color: var(--ck-ai-chat-color-icon);
1317
+ padding-top: 0;
1318
+ padding-bottom: 0;
1319
+ min-height: auto;
1320
+ }
1321
+
1322
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on .ck-dropdown__arrow {
1323
+ transform: rotate(180deg);
1324
+ }
1325
+
1326
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button .ck-button__label {
1327
+ width: auto;
1328
+ }
1329
+
1330
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button:hover,
1331
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on {
1332
+ background-color: var(--ck-ai-chat-button-active-background-color);
1333
+ color: var(--ck-ai-background-color-action-button);
1334
+ }
1335
+
1336
+ .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 {
1337
+ color: var(--ck-ai-background-color-action-button);
1338
+ }
1339
+
1340
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item:not(:last-child) {
1341
+ margin-bottom: var(--ck-spacing-medium-small);
1342
+ }
1343
+
1344
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button {
1345
+ align-items: start;
1346
+ }
1347
+
1348
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-list-item-button__check-holder {
1349
+ height: 1.2em;
1350
+ }
1351
+
1352
+ .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 {
1353
+ padding-top: 2px;
1354
+ }
1355
+
1356
+ .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label {
1357
+ line-height: 1.3;
1358
+ }
1359
+
1360
+ .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 {
1361
+ line-height: 1.3;
1362
+ font-weight: 500;
1363
+ }
1364
+
1365
+ .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 {
1366
+ line-height: 1.3;
1367
+ padding-top: var(--ck-spacing-tiny);
1368
+ }
1369
+
1370
+ .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 {
1371
+ color: var(--ck-ai-chat-color-icon);
1372
+ line-height: 1;
1373
+ white-space: normal;
1374
+ }
1375
+
1376
+ .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 {
1377
+ line-height: 1.3;
1378
+ --ck-icon-font-size: .5em;
1379
+ }
1380
+
1381
+ .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 {
1382
+ color: var(--ck-ai-chat-color-icon);
1383
+ }
1384
+
1385
+ .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) {
1386
+ font-weight: bold;
1387
+ display: inline-block;
1388
+ width: 4ch;
1389
+ }
1390
+
1391
+ .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 {
1392
+ margin-inline-end: var(--ck-spacing-standard);
1393
+ color: var(--ck-ai-chat-color-icon);
1394
+ fill: var(--ck-ai-chat-color-icon);
1395
+ }
1396
+ /*
1397
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
1398
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
1399
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
1400
+ *
1401
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
1402
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
1403
+ */
1404
+ /*
1405
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
1406
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
1407
+ */
1408
+ /**
1409
+ * Implements rounded corner interface for .ck-rounded-corners class.
1410
+ *
1411
+ * @see $ck-border-radius
1412
+ */
1413
+ :root {
1414
+ --ck-ai-chat-feed-item-color-text: hsla(0, 0%, 0%, 1);
1415
+ --ck-ai-chat-feed-item-color-background: hsla(0, 0%, 96%, 1);
1416
+ --ck-ai-chat-feed-item-color-background-secondary: hsla(0, 0%, 96%, 1);
1417
+ --ck-ai-chat-feed-item-color-actions-button-hover: hsla(263, 59%, 40%, 1);
1418
+ --ck-ai-chat-feed-item-color-show-changes-toggle-hover-color: hsla(263, 59%, 40%, 1);
1419
+ --ck-ai-chat-feed-item-color-show-changes-toggle-hover-background: hsl(262, 100%, 96%);
1420
+ --ck-ai-chat-feed-item-color-show-changes-toggle-on-color: hsla(263, 59%, 40%, 1);
1421
+ --ck-ai-chat-feed-item-color-show-changes-toggle-on-background: hsl(262, 100%, 96%);
1422
+ --ck-ai-chat-feed-item-color-show-changes-toggle-active-background: hsl(262, 100%, 96%);
1423
+ --ck-ai-chat-feed-loader-icon-color: hsla(0, 0%, 85%, 1);
1424
+ --ck-ai-chat-feed-interaction-header-capabilities-color-text: hsla(0, 0%, 44%, 1);
1425
+ }
1426
+ .ck.ck-ai-chat__feed {
1427
+ flex: 1 1 auto;
1428
+ overflow-y: auto;
1429
+ display: flex;
1430
+ flex-direction: column;
1431
+ justify-content: flex-start;
1432
+ align-items: stretch;
1433
+ flex-wrap: nowrap;
1434
+ padding-bottom: var(--ck-spacing-extra-large);
1435
+ gap: var(--ck-spacing-large);
1436
+ position: relative;
1437
+
1438
+ /* This is needed to prevent the feed from overflowing when the skeleton is visible. */
1439
+ }
1440
+ .ck.ck-ai-chat__feed:has(.ck-ai-skeleton:not(.ck-hidden)) {
1441
+ overflow: hidden;
1442
+ }
1443
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__items {
1444
+ display: flex;
1445
+ flex-direction: column;
1446
+ gap: var(--ck-spacing-extra-large) 0;
1447
+ }
1448
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__items > .ck-ai-chat__feed__item:first-child {
1449
+ margin-top: var(--ck-spacing-extra-large);
1450
+ }
1451
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item {
1452
+ margin: 0 var(--ck-spacing-large);
1453
+ scroll-margin: var(--ck-spacing-large);
1454
+
1455
+ /* These controls show up only after the item is done */
1456
+ }
1457
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-mini-toolbar,
1458
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-suggestion__actions,
1459
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle {
1460
+ transition: opacity .4s, display .4s allow-discrete;
1461
+ }
1462
+ @starting-style {
1463
+ .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 {
1464
+ opacity: 0;
1465
+ }
1466
+ }
1467
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle {
1468
+ --ck-color-button-default-hover-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background);
1469
+ --ck-color-button-on-hover-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background);
1470
+ --ck-color-button-default-active-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
1471
+ --ck-color-button-on-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
1472
+ --ck-color-focus-border: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
1473
+ --ck-focus-ring: 1px solid var(--ck-color-focus-border);
1474
+
1475
+ padding: 0 var(--ck-spacing-small);
1476
+ min-height: 22px;
1477
+ font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
1478
+ color: var(--ck-ai-chat-color-icon);
1479
+ }
1480
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle:hover {
1481
+ color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-color);
1482
+ }
1483
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle:active {
1484
+ box-shadow: none;
1485
+ color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
1486
+ }
1487
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle.ck-on {
1488
+ color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
1489
+ }
1490
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle:focus {
1491
+ border: 1px solid transparent;
1492
+ }
1493
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle > .ck-icon {
1494
+ width: 16px;
1495
+ height: 16px;
1496
+ margin-right: 0;
1497
+ margin-left: var(--ck-spacing-medium);
1498
+ }
1499
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-mini-toolbar,
1500
+ .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,
1501
+ .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 {
1502
+ display: none;
1503
+ opacity: 0;
1504
+ }
1505
+ /*
1506
+ * Any item that contains text (AI replies, suggestions, user messages etc.)
1507
+ */
1508
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item {
1509
+ word-break: normal;
1510
+ text-wrap: auto;
1511
+ }
1512
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item pre > code {
1513
+ white-space: pre-wrap;
1514
+ }
1515
+ /*
1516
+ * User message item with a query to the AI
1517
+ */
1518
+ .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) {
1519
+ max-width: 100%;
1520
+ }
1521
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message .ck-ai-chat__feed__message-content {
1522
+ max-width: 80%;
1523
+ margin-inline-end: 0;
1524
+ margin-inline-start: auto;
1525
+ text-align: end;
1526
+ }
1527
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message p {
1528
+ display: inline-block;
1529
+ background-color: var(--ck-ai-chat-feed-item-color-background-secondary);
1530
+ padding: 8px;
1531
+ border-radius: var(--ck-ai-border-radius);
1532
+ }
1533
+ /*
1534
+ * Replies from the AI that aren't suggestions.
1535
+ *
1536
+ * Also, occasionally used for static notifications.
1537
+ */
1538
+ /* &.ck-ai-chat__feed__ai-reply {} */
1539
+ /*
1540
+ * This is the kind of reply from the AI where content changes are suggested.
1541
+ */
1542
+ /*
1543
+ * Actions for the suggestion.
1544
+ */
1545
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions {
1546
+ --ck-color-split-button-hover-background: var(--ck-ai-background-color-action-button);
1547
+
1548
+ margin-top: var(--ck-spacing-medium);
1549
+ width: fit-content;
1550
+ }
1551
+ .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 {
1552
+ --ck-color-button-default-background: var(--ck-ai-background-color-action-button);
1553
+ --ck-color-button-default-hover-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
1554
+ --ck-color-button-on-hover-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
1555
+ --ck-color-button-default-active-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
1556
+ --ck-color-button-on-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
1557
+ --ck-color-button-on-active-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
1558
+ --ck-color-focus-border: var(--ck-color-base-background);
1559
+ --ck-focus-ring: 1px solid var(--ck-color-focus-border);
1560
+
1561
+ color: var(--ck-color-base-background);
1562
+ }
1563
+ .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 {
1564
+ border-radius: 0;
1565
+ }
1566
+ .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,
1567
+ .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 {
1568
+ border-radius: var(--ck-border-radius);
1569
+ border-top-right-radius: 0;
1570
+ border-bottom-right-radius: 0;
1571
+ }
1572
+ .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__arrow {
1573
+ width: 1.9em;
1574
+ color: var(--ck-color-base-background);
1575
+
1576
+ /* Separator always visible */
1577
+ }
1578
+ .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__arrow:after {
1579
+ content: '';
1580
+ position: absolute;
1581
+ width: 1px;
1582
+ height: 100%;
1583
+ left: -1px;
1584
+ background: var(--ck-color-base-background);
1585
+ }
1586
+ .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-disabled {
1587
+ background: hsl(263, 59%, 52%, 0.5);
1588
+ }
1589
+ /*
1590
+ * Interaction header showing capabilities used for the entire interaction.
1591
+ */
1592
+ .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 {
1593
+ display: flex;
1594
+ align-items: center;
1595
+ gap: 4px;
1596
+ color: var(--ck-ai-chat-feed-interaction-header-capabilities-color-text);
1597
+ }
1598
+ .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 {
1599
+ border-radius: 50%;
1600
+ flex-shrink: 0;
1601
+ background-color: var(--ck-tabs-panels-container-background);
1602
+ }
1603
+ .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) {
1604
+ margin-left: calc(var(--ck-icon-size) * -0.75)
1605
+ }
1606
+ .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 {
1607
+ color: var(--ck-ai-chat-feed-interaction-header-capabilities-color-text);
1608
+ font-weight: 500;
1609
+ }
1610
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-reply-container > *:first-child {
1611
+ /* This is needed to clear the default top margin from first HTML element from reply. */
1612
+ margin-top: 0;
1613
+ }
1614
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-reply-container > *:last-child {
1615
+ /* This is needed to clear the default bottom margin from last HTML element from reply. */
1616
+ margin-bottom: 0;
1617
+ }
1618
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body *,
1619
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item
1620
+ *:not(.ck-ai-chat__feed__context-chips):not(.ck-ai-chat__feed__context-chips *):not(.ck-ai-web-source .ck-button__label) {
1621
+ white-space: normal;
1622
+ line-height: 1.4em;
1623
+ }
1624
+ /* TODO: This CSS class is added twice. */
1625
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__context-chips {
1626
+ display: flex;
1627
+ justify-content: flex-end;
1628
+ margin-bottom: var(--ck-spacing-medium-small);
1629
+ }
1630
+ /* stylelint-disable-next-line no-descending-specificity */
1631
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources {
1632
+ display: grid;
1633
+ grid-template-columns: repeat(3, 1fr);
1634
+ gap: var(--ck-spacing-standard);
1635
+
1636
+ padding: var(--ck-spacing-medium-small) var(--ck-spacing-large) var(--ck-spacing-extra-large) var(--ck-spacing-large);
1637
+ }
1638
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header {
1639
+ grid-column-start: span 3;
1640
+
1641
+ font-size: 12px;
1642
+ font-weight: 500;
1643
+ line-height: 1.4em;
1644
+ }
1645
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header > .ck-icon {
1646
+ vertical-align: text-bottom;
1647
+ width: 14px;
1648
+ height: 14px;
1649
+ margin-right: var(--ck-spacing-medium-small);
1650
+ color: hsl(0, 0%, 44%);
1651
+ }
1652
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header > span {
1653
+ color: hsl(0, 0%, 44%);
1654
+ }
1655
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source {
1656
+ padding: var(--ck-spacing-medium) var(--ck-spacing-large);
1657
+ border: 0;
1658
+ border-radius: 50px;
1659
+ background-color: var(--ck-ai-chat-feed-item-color-background);
1660
+ }
1661
+ .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 {
1662
+ box-shadow: none;
1663
+ }
1664
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-button__icon {
1665
+ margin-right: var(--ck-spacing-medium);
1666
+ color: var(--ck-ai-button-primary-background-color);
1667
+ width: 16px;
1668
+ height: 16px;
1669
+ }
1670
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-button__label {
1671
+ /* display: inline-block; */
1672
+ white-space: nowrap;
1673
+ overflow: hidden;
1674
+ text-overflow: ellipsis;
1675
+ max-width: 80px;
1676
+ font-size: 10px;
1677
+ font-weight: 700;
1678
+ line-height: 1.4em;
1679
+ }
1680
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-ai-web-source__title {
1681
+ display: flex;
1682
+ align-items: center;
1683
+ gap: var(--ck-spacing-small);
1684
+ }
1685
+ /* Remove padding if it's directly inside the reply container as the padding is already set. */
1686
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item > .ck-ai-web-sources {
1687
+ padding: var(--ck-spacing-extra-large) 0 var(--ck-spacing-medium) 0;
1688
+ }
1689
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__loader {
1690
+ display: flex;
1691
+ align-items: flex-start;
1692
+ }
1693
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__loader .ck.ck-spinner-container.ck-ai-spinner {
1694
+ /* Designs have 16px but it needs to be aligned with chat feed items */
1695
+ margin: 0 var(--ck-spacing-large);
1696
+ }
1697
+ .ck.ck-ai-chat__feed .ck.ck-ai-chat__loader .ck.ck-ai-chat__loader-text {
1698
+ font-weight: 500;
1699
+ line-height: 1.462em;
1700
+ white-space: normal;
1701
+ }
1702
+ /**
1703
+ * This is the balloon panel for the suggestion actions.
1704
+ */
1705
+ .ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-button.ck-list-item-button {
1706
+ padding-top: 0;
1707
+ padding-bottom: 0;
1708
+ }
1709
+ @keyframes ck-html-streamer-fade-in {
1710
+ from {
1711
+ opacity: 0;
1712
+ }
1713
+
1714
+ to {
1715
+ opacity: 1;
1716
+ }
1717
+ }
1718
+ /*
1719
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
1720
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
1721
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
1722
+ *
1723
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
1724
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
1725
+ */
1726
+ /*
1727
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
1728
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
1729
+ */
1730
+ /**
1731
+ * Implements rounded corner interface for .ck-rounded-corners class.
1732
+ *
1733
+ * @see $ck-border-radius
1734
+ */
1735
+ :root {
1736
+ --ck-ai-chat-suggestion-container-header-font-size: .9em;
1737
+ --ck-ai-background-color-action-button-semi-transparent: hsla(263, 59%, 52%, 0.5);
1738
+ }
1739
+ /*
1740
+ * Container for the suggestion where the content returned by the AI is displayed.
1741
+ *
1742
+ * It supports the regular output and "Show preview" mode.
1743
+ *
1744
+ * It works in the feed (sidebar) and in the dialog/balloon.
1745
+ */
1746
+ .ck.ck-ai-suggestion__container {
1747
+ border-radius: 0;
1748
+
1749
+ --ck-border-radius: 4px;
1750
+
1751
+ border: 1px solid var(--ck-color-base-border);
1752
+ position: relative;
1753
+ }
1754
+ .ck-rounded-corners .ck.ck-ai-suggestion__container,
1755
+ .ck.ck-ai-suggestion__container.ck-rounded-corners {
1756
+ border-radius: var(--ck-border-radius);
1757
+ }
1758
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__header {
1759
+ height: 3.23em; /* 42px */
1760
+ border-bottom: 1px solid var(--ck-color-base-border);
1761
+ display: flex;
1762
+ flex-direction: row;
1763
+ justify-content: space-between;
1764
+ align-items: center;
1765
+ padding: 0 var(--ck-spacing-large);
1766
+ }
1767
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > span {
1768
+ font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
1769
+ font-weight: bold;
1770
+ color: var(--ck-ai-chat-color-icon);
1771
+ flex-grow: 1;
1772
+ }
1773
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-icon {
1774
+ width: 14px;
1775
+ height: 14px;
1776
+ margin-right: var(--ck-spacing-medium);
1777
+ color: var(--ck-ai-chat-color-icon);
1778
+ }
1779
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton {
1780
+ --ck-switch-button-toggle-width: 2.307em;
1781
+ --ck-switch-button-toggle-inner-size: 1em;
1782
+ --ck-switch-button-translation: calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2px );
1783
+ --ck-color-switch-button-off-background: var(--ck-ai-chat-color-icon);
1784
+ }
1785
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__label {
1786
+ font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
1787
+ margin-right: var(--ck-spacing-standard);
1788
+ }
1789
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__toggle {
1790
+ border-radius: var(--ck-switch-button-toggle-inner-size);
1791
+ }
1792
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__toggle .ck-button__toggle__inner {
1793
+ border-radius: 100%;
1794
+ }
1795
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body {
1796
+ display: flex;
1797
+ flex-direction: column;
1798
+ }
1799
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-parts {
1800
+ display: flex;
1801
+ flex-direction: column;
1802
+ }
1803
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part {
1804
+ position: relative;
1805
+ padding-bottom: var(--ck-spacing-large);
1806
+ }
1807
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title {
1808
+ display: flex;
1809
+ justify-content: space-between;
1810
+ align-items: center;
1811
+ color: var(--ck-ai-background-color-action-button);
1812
+ height: 2.308em;
1813
+ }
1814
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-ai-suggestion__body__content-part__icon-title {
1815
+ position: absolute;
1816
+ left: calc(-1.8 * var(--ck-spacing-large));
1817
+ background: var(--ck-color-base-background);
1818
+ box-shadow: 0 0 5px 6px var(--ck-color-base-background);
1819
+ clip-path: inset(-6px 0 -6px 0);
1820
+ border-radius: 100%;
1821
+ }
1822
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-ai-suggestion__body__content-part__icon-accepted {
1823
+ color: var(--ck-color-base-action);
1824
+ }
1825
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-ai-suggestion__body__content-part__icon-rejected {
1826
+ color: var(--ck-color-base-error);
1827
+ }
1828
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-icon,
1829
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-toolbar .ck-icon {
1830
+ --ck-icon-size: 1.477em;
1831
+ }
1832
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title .ck-toolbar {
1833
+ border: 0;
1834
+ }
1835
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title .ck-toolbar .ck-button {
1836
+ margin: 0;
1837
+ opacity: .6;
1838
+ }
1839
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__content :last-child {
1840
+ padding-bottom: 0;
1841
+ margin-bottom: var(--ck-spacing-medium);
1842
+ }
1843
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part:hover .ck-ai-suggestion__body__content-part__title .ck-toolbar {
1844
+ visibility: visible;
1845
+ opacity: 1;
1846
+ }
1847
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part:not(:last-child)::after {
1848
+ content: '...';
1849
+ width: 100%;
1850
+ text-align: center;
1851
+ display: block;
1852
+ clear: both;
1853
+ }
1854
+ /* TODO: This is only a temporary implementation for preview demo purposes. Make it nice. */
1855
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:hover::before {
1856
+ content: '';
1857
+ position: absolute;
1858
+ left: calc((-1 * var(--ck-spacing-large)) - 1px);
1859
+ top: 5px;
1860
+ height: 100%;
1861
+ border-left: 2px solid hsl( 262, 51%, 80% );
1862
+ }
1863
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:last-child::before {
1864
+ height: calc(100% - 10px);
1865
+ }
1866
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:last-child:first-child::before {
1867
+ display: none;
1868
+ }
1869
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted .ck-ai-suggestion__body__content-part__content, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected .ck-ai-suggestion__body__content-part__content {
1870
+ opacity: 0.5;
1871
+ }
1872
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted .ck-ai-suggestion__body__content-part__title
1873
+ :not(.ck-ai-suggestion__body__content-part__icon-title):not(.ck-ai-suggestion__body__content-part__icon-title *), .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected .ck-ai-suggestion__body__content-part__title
1874
+ :not(.ck-ai-suggestion__body__content-part__icon-title):not(.ck-ai-suggestion__body__content-part__icon-title *) {
1875
+ opacity: 0.5;
1876
+ }
1877
+ /* stylelint-disable no-descending-specificity */
1878
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted .ck-ai-suggestion__body__content-part__icon-title, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected .ck-ai-suggestion__body__content-part__icon-title {
1879
+ /* Icon can not be transparent because the border would be visible, it has to be controlled by the color. */
1880
+ color: var(--ck-ai-background-color-action-button-semi-transparent);
1881
+ }
1882
+ /* stylelint-enable no-descending-specificity */
1883
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted::after, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected::after {
1884
+ opacity: 0.5;
1885
+ }
1886
+ /* The warning is displayed when some parts of the suggestion are empty. */
1887
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck.ck-ai-chat__feed__item.ck-ai-chat-error_warning {
1888
+ margin-left: 0;
1889
+ margin-right: 0;
1890
+ margin-bottom: var(--ck-spacing-large);
1891
+ }
1892
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__body,
1893
+ .ck.ck-ai-suggestion__container .ck-ai-suggestion__changes {
1894
+ padding: var(--ck-spacing-large);
1895
+ padding-bottom: 0px;
1896
+ }
1897
+ /*
1898
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
1899
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
1900
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
1901
+ *
1902
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
1903
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
1904
+ */
1905
+ .ck.ck-ai-mini-toolbar {
1906
+ --ck-color-button-action-background: hsl(263.2, 59.2%, 52%);
1907
+ --ck-color-button-default-hover-background: hsl(262.1, 100%, 96.3%);
1908
+ --ck-color-button-default-active-background: hsl(262.1, 100%, 96.3%);
1909
+ --ck-color-button-on-background: hsl(262.1, 100%, 96.3%);
1910
+ --ck-color-button-on-hover-background: hsl(262.1, 100%, 96.3%);
1911
+ --ck-color-button-on-active-background: hsl(262.1, 100%, 96.3%);
1912
+ --ck-color-button-on-disabled-background: hsl(262.1, 100%, 96.3%);
1913
+ --ck-color-button-on-color: hsl(263.2, 59.2%, 52%);
1914
+ --ck-color-button-action-hover-background: hsl(262.6, 58.9%, 49.6%);
1915
+ --ck-color-button-action-active-background: hsl(262.6, 58.9%, 49.6%);
1916
+ --ck-color-button-action-disabled-background: hsl(263.8, 59.3%, 75.9%);
1917
+
1918
+ position: absolute;
1919
+ right: var(--ck-spacing-large);
1920
+ bottom: 0;
1921
+ transform: translateY(50%);
1922
+ }
1923
+ .ck.ck-ai-mini-toolbar .ck.ck-button {
1924
+ font-size: .9em;
1925
+ font-family: var(--ck-ai-chat-font-family);
1926
+ color: var(--ck-ai-chat-color-icon);
1927
+ }
1928
+ .ck.ck-ai-mini-toolbar .ck.ck-button.ck-on {
1929
+ color: var(--ck-ai-background-color-action-button);
1930
+ }
1931
+ .ck.ck-ai-mini-toolbar .ck.ck-button.ck-button_with-text {
1932
+ min-height: 2.1em;
1933
+ box-sizing: border-box;
1934
+ flex-direction: row-reverse;
1935
+ padding-right: 0.3em;
1936
+ padding-left: 0.3em;
1937
+ }
1938
+ .ck.ck-ai-mini-toolbar .ck.ck-button.ck-button_with-text span {
1939
+ line-height: 1.4em;
1940
+ }
1941
+ .ck.ck-ai-mini-toolbar .ck.ck-button.ck-button_with-text svg {
1942
+ margin-left: var(--ck-spacing-medium);
1943
+ margin-right: 0;
1944
+ --ck-icon-size: 16px
1945
+ }
1946
+ .ck.ck-ai-mini-toolbar .ck.ck-button.ck-ai-mini-toolbar-copy-button .ck-ai-mini-toolbar-copy-button__check-mark {
1947
+ position: absolute;
1948
+ top: 50%;
1949
+ right: 50%;
1950
+ transform: translate(50%, -50%);
1951
+ color: var(--ck-color-base-action);
1952
+ display: none;
1953
+ }
1954
+ .ck.ck-ai-mini-toolbar .ck.ck-button.ck-ai-mini-toolbar-copy-button.ck-ai-mini-toolbar-copy-button_copied .ck-button__icon {
1955
+ display: none;
1956
+ }
1957
+ .ck.ck-ai-mini-toolbar .ck.ck-button.ck-ai-mini-toolbar-copy-button.ck-ai-mini-toolbar-copy-button_copied .ck-ai-mini-toolbar-copy-button__check-mark {
1958
+ display: block;
1959
+ animation-duration: 1s;
1960
+ animation-name: ck-ai-mini-toolbar-copy-animation;
1961
+ animation-iteration-count: 1;
1962
+ animation-timing-function: ease-out;
1963
+ }
1964
+ @keyframes ck-ai-mini-toolbar-copy-animation {
1965
+ 0% {
1966
+ clip-path: inset(0 100% 0 0);
1967
+ }
1968
+
1969
+ 50% {
1970
+ clip-path: inset(0 0 0 0);
1971
+ }
1972
+
1973
+ 100% {
1974
+ clip-path: inset(0 0 0 0);
1975
+ }
1976
+ }
1977
+ /*
1978
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
1979
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
1980
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
1981
+ *
1982
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
1983
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
1984
+ */
1985
+ .ck-ai-header {
1986
+ /* Custom values unlike the rest of editor UI. */
1987
+ --ck-ui-component-min-height: 1.7em;
1988
+ --ck-ui-component-min-width: 1.7em;
1989
+
1990
+ /* Custom value. It defaults to the toolbar component height so they look fine on next to each other. */
1991
+ --ck-form-header-height: 3em;
1992
+ --ck-form-header-small-icon-color: hsla(0, 0%, 20%, 1);
1993
+ }
1994
+ .ck-ai-header > .ck-button {
1995
+ margin-inline-start: var(--ck-spacing-standard);
1996
+ }
1997
+ .ck-ai-header > .ck-button > .ck-button__icon {
1998
+ /* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
1999
+ --ck-icon-font-size: .666em;
2000
+
2001
+ color: var(--ck-ai-chat-color-icon);
2002
+ }
2003
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation {
2004
+ /* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
2005
+ font-size: 11.7px;
2006
+ min-height: unset;
2007
+ border: 1px solid var(--ck-ai-border-color-button);
2008
+ border-radius: var(--ck-border-radius);
2009
+ gap: var(--ck-spacing-small);
2010
+ color: var(--ck-ai-chat-color-text);
2011
+ }
2012
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation:hover {
2013
+ background-color: var(--ck-ai-chat-button-active-background-color);
2014
+ }
2015
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__label {
2016
+ /* Custom value unlike the rest of editor UI. */
2017
+ line-height: 1.4em;
2018
+ }
2019
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__icon {
2020
+ /* Custom value unlike the rest of editor UI (defaults to 14px). See how it's used in the icon.css */
2021
+ --ck-icon-font-size: .632em;
2022
+
2023
+ margin-inline-end: 0;
2024
+ color: var(--ck-ai-chat-color-text);
2025
+ }
2026
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > span.ck-button__label {
2027
+ position: relative;
2028
+ top: 1px;
2029
+ }
2030
+ .ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back {
2031
+ margin-inline-start: 0;
2032
+ margin-inline-end: var(--ck-spacing-small);
2033
+ }
2034
+ .ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back > .ck-button__icon {
2035
+ /* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
2036
+ --ck-icon-font-size: 13px;
2037
+
2038
+ color: var(--ck-form-header-small-icon-color);
2039
+ }
2040
+ .ck-ai-header.ck-ai-header_small .ck-form__header__label {
2041
+ --ck-font-size-base: 13px;
2042
+ --ck-font-face: var(--ck-ai-chat-font-family);
2043
+
2044
+ font-weight: 500;
2045
+ }
2046
+ .ck-ai-header .ck-form__header__label:not(:last-child) {
2047
+ margin-inline-end: var(--ck-spacing-small);
2048
+ }
2049
+ /*
2050
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
2051
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
2052
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
2053
+ *
2054
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
2055
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
2056
+ */
2057
+ :root {
2058
+ --ck-ai-chat-color-background-error: hsla(15, 100%, 97%, 1);
2059
+ --ck-ai-chat-color-background-warning: hsla(36, 100%, 65.10%, 0.10);
2060
+
2061
+ --ck-ai-chat-color-border-error: hsla(14, 100%, 68%, 1);
2062
+ --ck-ai-chat-color-border-warning: hsla(36, 100%, 65%, 1);
2063
+ }
2064
+ /* TODO: rename the class to make it more generic and function as a modifier. */
2065
+ .ck.ck-ai-chat-error {
2066
+ display: flex;
2067
+ align-items: flex-start;
2068
+ justify-content: space-between;
2069
+ gap: var(--ck-spacing-medium);
2070
+ width: fit-content;
2071
+
2072
+ background-color: var(--ck-ai-chat-color-background-error);
2073
+ border: 1px solid var(--ck-ai-chat-color-border-error);
2074
+ padding: var(--ck-spacing-standard);
2075
+ border-radius: var(--ck-ai-border-radius);
2076
+ }
2077
+ .ck.ck-ai-chat-error.ck-ai-chat-error_warning {
2078
+ background-color: var(--ck-ai-chat-color-background-warning);
2079
+ border-color: var(--ck-ai-chat-color-border-warning);
2080
+ }
2081
+ .ck.ck-ai-chat-error > p {
2082
+ flex: 1;
2083
+ max-width: calc(100% - (16px + var(--ck-spacing-medium)));
2084
+ white-space: normal;
2085
+ color: var(--ck-color-base-text);
2086
+ line-height: var(--ck-line-height-base);
2087
+ }
2088
+ .ck.ck-ai-chat-error > .ck-button {
2089
+ --ck-icon-font-size: 0.666em;
2090
+ }
2091
+ .ck.ck-ai-chat-error > .ck-button.ck-ai-chat-error__dismiss-button {
2092
+ --ck-icon-font-size: 0.666em;
2093
+ --ck-ui-component-min-height: 16px;
2094
+
2095
+ padding: 0;
2096
+ flex-shrink: 0;
2097
+ }
2098
+ .ck.ck-ai-chat-error.ck-ai-chat-error_full-width > p {
2099
+ max-width: 100%;
2100
+ }
2101
+ /*
2102
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
2103
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
2104
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
2105
+ *
2106
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
2107
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
2108
+ */
2109
+ :root {
2110
+ --ai-skeleton-z-index: calc( var(--ck-z-default) + 1 );
2111
+ --ck-ai-skeleton-item-background: linear-gradient(90deg, hsl(0, 0.00%, 98.00%) 0%, hsl(0, 0.00%, 94.10%) 50%, hsl(0, 0.00%, 98.00%) 100%);
2112
+ --ck-ai-skeleton-animation-duration: 1s;
2113
+ --ck-ai-skeleton-gap: var(--ck-spacing-extra-large);
2114
+ }
2115
+ .ck.ck-ai-skeleton {
2116
+ position: absolute;
2117
+ inset: 0;
2118
+ z-index: var(--ai-skeleton-z-index);
2119
+ display: flex;
2120
+ flex-direction: column;
2121
+ align-items: flex-end;
2122
+ gap: var(--ck-ai-skeleton-gap) 0;
2123
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large) var(--ck-spacing-large);
2124
+ width: 100%;
2125
+ height: 100%;
2126
+ background-color: var(--ck-color-base-background);
2127
+ opacity: 1;
2128
+ transition: opacity .4s, display .4s allow-discrete;
2129
+ transition-delay: 350ms;
2130
+ }
2131
+ .ck.ck-ai-skeleton.ck-hidden {
2132
+ transition-delay: 0ms;
2133
+ opacity: 0;
2134
+ }
2135
+ @starting-style {
2136
+ .ck.ck-ai-skeleton {
2137
+ opacity: 0;
2138
+ }
2139
+ }
2140
+ .ck.ck-ai-skeleton > .ck.ck-ai-skeleton__item {
2141
+ background: var(--ck-ai-skeleton-item-background);
2142
+ background-size: 200% 100%;
2143
+ animation: var(--ck-ai-skeleton-animation-duration) ck-ai-skeleton-shine linear infinite;
2144
+ width: 100%;
2145
+ }
2146
+ @keyframes ck-ai-skeleton-shine {
2147
+ to {
2148
+ background-position-x: -200%;
2149
+ }
2150
+ }
2151
+ /*
2152
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
2153
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
2154
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
2155
+ *
2156
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
2157
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
2158
+ */
2159
+ :root {
2160
+ --ck-ai-spinner-size: var(--ck-toolbar-spinner-size);
2161
+ --ck-ai-spinner-background: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 58%));
2162
+ --ck-ai-spinner-mask: radial-gradient(farthest-side, transparent 66%, hsl(0, 0%, 0%) 61%);
2163
+ --ck-ai-spinner-animation-duration: 1s;
2164
+ }
2165
+ .ck.ck-spinner-container.ck-ai-spinner {
2166
+ display: inline-block;
2167
+ width: var(--ck-ai-spinner-size);
2168
+ height: var(--ck-ai-spinner-size);
2169
+ margin: 0;
2170
+ flex-shrink: 0;
2171
+ animation-duration: var(--ck-ai-spinner-animation-duration);
2172
+ }
2173
+ .ck.ck-spinner-container.ck-ai-spinner .ck-spinner {
2174
+ width: var(--ck-ai-spinner-size);
2175
+ height: var(--ck-ai-spinner-size);
2176
+
2177
+ border: none;
2178
+
2179
+ background: var(--ck-ai-spinner-background);
2180
+ -webkit-mask: var(--ck-ai-spinner-mask);
2181
+ mask: var(--ck-ai-spinner-mask);
2182
+
2183
+ box-sizing: border-box;
2184
+ }
2185
+ .ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_small {
2186
+ --ck-ai-spinner-size: 1em;
2187
+ }
2188
+ .ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_tiny {
2189
+ --ck-ai-spinner-size: 12px;
2190
+ }
2191
+ .ck.ck-spinner-container.ck-hidden {
2192
+ display: none;
2193
+ animation: none;
2194
+ }
2195
+ @keyframes ck-spin {
2196
+ to {
2197
+ transform: rotate(360deg);
2198
+ }
2199
+ }
2200
+ /*
2201
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
2202
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
2203
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
2204
+ *
2205
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
2206
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
2207
+ */
2208
+ :root {
2209
+ /* Primary button */
2210
+ --ck-ai-button-primary-color: hsla(0, 0%, 100%, 1);
2211
+ --ck-ai-button-primary-disabled-color: hsla(0, 0%, 100%, 1);
2212
+ --ck-ai-button-primary-background-color: hsla(263, 59%, 52%, 1);
2213
+ --ck-ai-button-primary-disabled-background-color: hsla(263, 59%, 52%, 0.5);
2214
+ --ck-ai-button-primary-hover-background-color: hsla(263, 59%, 40%, 1);
2215
+
2216
+ /* Secondary button */
2217
+ --ck-ai-button-secondary-color: hsla(263, 59%, 52%, 1);
2218
+ --ck-ai-button-secondary-disabled-color: hsla(263, 59%, 52%, 0.5);
2219
+ --ck-ai-button-secondary-background-color: hsla(0, 0%, 100%, 1);
2220
+ --ck-ai-button-secondary-disabled-background-color: hsla(0, 0%, 100%, 0.5);
2221
+ --ck-ai-button-secondary-border-color: hsla(262, 51%, 80%, 1);
2222
+ --ck-ai-button-secondary-disabled-border-color: hsla(262, 51%, 80%, 0.5);
2223
+ --ck-ai-button-secondary-hover-background-color: hsla(262, 100%, 96%, 1);
2224
+ --ck-ai-button-secondary-active-background-color: hsla(262, 100%, 96%, 1);
2225
+
2226
+ /* Tertiary text button */
2227
+ --ck-ai-button-tertiary-text-color: hsla(263, 59%, 52%, 1);
2228
+ --ck-ai-button-tertiary-disabled-text-color: hsla(263, 59%, 52%, 0.5);
2229
+ --ck-ai-button-tertiary-text-background-color: transparent;
2230
+ --ck-ai-button-tertiary-text-hover-background-color: hsla(262, 100%, 96%, 1);
2231
+
2232
+ /* Tertiary filled button */
2233
+ --ck-ai-button-tertiary-filled-color: hsla(0, 0%, 44%, 1);
2234
+ --ck-ai-button-tertiary-filled-disabled-color: hsla(0, 0%, 44%, 0.5);
2235
+ --ck-ai-button-tertiary-filled-hover-color: hsla(0, 0%, 20%, 1);
2236
+ --ck-ai-button-tertiary-filled-active-color: hsla(263, 59%, 52%, 1);
2237
+ --ck-ai-button-tertiary-filled-background-color: transparent;
2238
+ --ck-ai-button-tertiary-filled-disabled-background-color: hsla(0, 0%, 93%, 1);
2239
+ --ck-ai-button-tertiary-filled-hover-background-color: hsla(262, 100%, 96%, 1);
2240
+ --ck-ai-button-tertiary-filled-active-background-color: hsla(262, 100%, 96%, 1);
2241
+ }
2242
+ .ck.ck-button.ck-ai-button-primary {
2243
+ color: var(--ck-ai-button-primary-color);
2244
+ background-color: var(--ck-ai-button-primary-background-color);
2245
+ border: none;
2246
+ }
2247
+ .ck.ck-button.ck-ai-button-primary:hover {
2248
+ background-color: var(--ck-ai-button-primary-hover-background-color);
2249
+ }
2250
+ .ck.ck-button.ck-ai-button-primary:disabled,
2251
+ .ck.ck-button.ck-ai-button-primary.ck-disabled {
2252
+ color: var(--ck-ai-button-primary-disabled-color);
2253
+ background-color: var(--ck-ai-button-primary-disabled-background-color);
2254
+ cursor: not-allowed;
2255
+ }
2256
+ .ck.ck-button.ck-ai-button-primary:disabled > .ck.ck-button__label,
2257
+ .ck.ck-button.ck-ai-button-primary.ck-disabled > .ck.ck-button__label,
2258
+ .ck.ck-button.ck-ai-button-primary:disabled > .ck-button__icon,
2259
+ .ck.ck-button.ck-ai-button-primary.ck-disabled > .ck-button__icon {
2260
+ opacity: 1;
2261
+ }
2262
+ .ck.ck-button.ck-ai-button-secondary {
2263
+ color: var(--ck-ai-button-secondary-color);
2264
+ background-color: var(--ck-ai-button-secondary-background-color);
2265
+ border: 1px solid var(--ck-ai-button-secondary-border-color);
2266
+ }
2267
+ .ck.ck-button.ck-ai-button-secondary:hover {
2268
+ background-color: var(--ck-ai-button-secondary-hover-background-color);
2269
+ }
2270
+ .ck.ck-button.ck-ai-button-secondary:active,
2271
+ .ck.ck-button.ck-ai-button-secondary.ck-on {
2272
+ background-color: var(--ck-ai-button-secondary-active-background-color);
2273
+ }
2274
+ .ck.ck-button.ck-ai-button-secondary:disabled,
2275
+ .ck.ck-button.ck-ai-button-secondary.ck-disabled {
2276
+ color: var(--ck-ai-button-secondary-disabled-color);
2277
+ background-color: var(--ck-ai-button-secondary-disabled-background-color);
2278
+ border: 1px solid var(--ck-ai-button-secondary-disabled-border-color);
2279
+ cursor: not-allowed;
2280
+ }
2281
+ .ck.ck-button.ck-ai-button-secondary:disabled > .ck.ck-button__label,
2282
+ .ck.ck-button.ck-ai-button-secondary.ck-disabled > .ck.ck-button__label,
2283
+ .ck.ck-button.ck-ai-button-secondary:disabled > .ck-button__icon,
2284
+ .ck.ck-button.ck-ai-button-secondary.ck-disabled > .ck-button__icon {
2285
+ opacity: 1;
2286
+ }
2287
+ .ck.ck-button.ck-ai-button-tertiary-text {
2288
+ color: var(--ck-ai-button-tertiary-text-color);
2289
+ background-color: var(--ck-ai-button-tertiary-text-background-color);
2290
+ border: none;
2291
+ }
2292
+ .ck.ck-button.ck-ai-button-tertiary-text:hover {
2293
+ background-color: var(--ck-ai-button-tertiary-text-hover-background-color);
2294
+ }
2295
+ .ck.ck-button.ck-ai-button-tertiary-text:disabled,
2296
+ .ck.ck-button.ck-ai-button-tertiary-text.ck-disabled {
2297
+ color: var(--ck-ai-button-tertiary-disabled-text-color);
2298
+ cursor: not-allowed;
2299
+ }
2300
+ .ck.ck-button.ck-ai-button-tertiary-text:disabled > .ck.ck-button__label,
2301
+ .ck.ck-button.ck-ai-button-tertiary-text.ck-disabled > .ck.ck-button__label,
2302
+ .ck.ck-button.ck-ai-button-tertiary-text:disabled > .ck-button__icon,
2303
+ .ck.ck-button.ck-ai-button-tertiary-text.ck-disabled > .ck-button__icon {
2304
+ opacity: 1;
2305
+ }
2306
+ .ck.ck-button.ck-ai-button-tertiary-filled {
2307
+ color: var(--ck-ai-button-tertiary-filled-color);
2308
+ background-color: var(--ck-ai-button-tertiary-filled-background-color);
2309
+ border: none;
2310
+ }
2311
+ .ck.ck-button.ck-ai-button-tertiary-filled:hover {
2312
+ color: var(--ck-ai-button-tertiary-filled-hover-color);
2313
+ background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
2314
+ }
2315
+ .ck.ck-button.ck-ai-button-tertiary-filled:active,
2316
+ .ck.ck-button.ck-ai-button-tertiary-filled.ck-on {
2317
+ color: var(--ck-ai-button-tertiary-filled-active-color);
2318
+ background-color: var(--ck-ai-button-tertiary-filled-active-background-color);
2319
+ }
2320
+ .ck.ck-button.ck-ai-button-tertiary-filled:disabled,
2321
+ .ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled {
2322
+ color: var(--ck-ai-button-tertiary-filled-disabled-color);
2323
+ background-color: var(--ck-ai-button-tertiary-filled-disabled-background-color);
2324
+ cursor: not-allowed;
2325
+ }
2326
+ .ck.ck-button.ck-ai-button-tertiary-filled:disabled > .ck.ck-button__label,
2327
+ .ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled > .ck.ck-button__label,
2328
+ .ck.ck-button.ck-ai-button-tertiary-filled:disabled > .ck-button__icon,
2329
+ .ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled > .ck-button__icon {
2330
+ opacity: 1;
2331
+ }
2332
+ /*
2333
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
2334
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
2335
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
2336
+ *
2337
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
2338
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
2339
+ */
2340
+ :root {
2341
+ --ck-ai-disclaimer-background-color: hsla(0, 0%, 96%, 1);
2342
+ --ck-ai-disclaimer-border-color: hsla(220, 6%, 82%, 1);
2343
+ --ck-ai-disclaimer-text-color: hsla(0, 0%, 44%, 1);
2344
+ }
2345
+ .ck.ck-ai-disclaimer {
2346
+ background-color: var(--ck-ai-disclaimer-background-color);
2347
+ border-top: 1px solid var(--ck-ai-disclaimer-border-color);
2348
+ padding: var(--ck-spacing-standard) 1em;
2349
+ }
2350
+ .ck.ck-ai-disclaimer > .ck.ck-ai-disclaimer__content {
2351
+ color: var(--ck-ai-disclaimer-text-color);
2352
+ font-size: 0.75em;
2353
+ line-height: 1.025em;
2354
+ text-align: center;
2355
+ word-break: normal;
2356
+ text-wrap: auto;
2357
+ }
2358
+
2359
+ :root {
2360
+ --ck-ai-border-color-main: hsla(216, 5%, 81%, 1);
2361
+ --ck-ai-border-color-button: hsla(262, 51%, 80%, 1);
2362
+ --ck-ai-background-color-action-button: hsla(263, 59%, 52%, 1);
2363
+ --ck-ai-font-color-action-button: hsl(0, 0%, 100%);
2364
+
2365
+ --ck-ai-chat-color-text: hsla(263, 59%, 52%, 1);
2366
+ --ck-ai-chat-color-icon: hsla(0, 0%, 44%, 1);
2367
+ --ck-ai-chat-border-width: 1px;
2368
+
2369
+ --ck-ai-chat-button-active-background-color: hsla(262, 100%, 96%, 1);
2370
+ --ck-ai-chat-button-active-color: hsla(263, 59%, 52%, 1);
2371
+ --ck-ai-chat-button-hover-color: hsla(0, 0%, 20%, 1);
2372
+ --ck-ai-chat-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
2373
+ --ck-ai-chat-user-context-background: hsla(0, 0%, 98%, 1);
2374
+
2375
+ --ck-ai-chat-flash-color: hsla(263, 59%, 52%, 0.102);
2376
+ --ck-ai-chat-flash-color-text: hsla(263, 59%, 52%, 1);
2377
+ --ck-ai-chat-animation-duration: 0.6s;
2378
+ --ck-ai-chat-animation-timing: ease-out;
2379
+
2380
+ --ck-ai-chat-loader-animation-duration: 1.5s;
2381
+ --ck-ai-chat-loader-icon-color: hsla(0, 0%, 96%, 0.98);
2382
+
2383
+ --ck-ai-chat-feed-loader-icon-color: hsla(0, 0%, 85%, 1);
2384
+
2385
+ --ck-ai-border-radius: calc(var(--ck-border-radius) * 2);
2386
+ }
2387
+
2388
+ /* Note: This class name is mentioned in the guide and acts like a public API. */
2389
+ .ck-ai-ui_theme {
2390
+ /* @TODO: there should be one theme applied on all NextGenAI features */
2391
+ }
2392
+
2393
+ .ck.ck-ai-chat {
2394
+
2395
+ width: 100%;
2396
+ min-height: 300px;
2397
+ display: flex;
2398
+ flex-direction: column;
2399
+ overflow: hidden;
2400
+ font-family: var(--ck-ai-chat-font-family) !important;
2401
+ }
2402
+
2403
+ .ck.ck-ai-chat * {
2404
+ font-family: var(--ck-ai-chat-font-family) !important;
2405
+ }
2406
+
2407
+ /*
2408
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
2409
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
2410
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
2411
+ *
2412
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
2413
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
2414
+ */
2415
+
2416
+ :root {
2417
+ --ai-active-icon-size: 17px;
2418
+
2419
+ --ck-ai-loader-icon-color: hsla(0, 0%, 85%, 1);
2420
+ --ck-ai-loader-icon-dot-color: hsla(0, 0%, 65%, 1);
2421
+ --ck-ai-chat-feed-item-spacing: var(--ck-spacing-extra-large);
2422
+ }
2423
+
2424
+ .ck .ck-ai-chat-history {
2425
+ display: flex;
2426
+ flex-direction: column;
2427
+ height: 100%;
2428
+ }
2429
+
2430
+ .ck .ck-ai-chat-history .ck-ai-chat-history__content,
2431
+ .ck .ck-ai-chat-history .ck-search {
2432
+ display: flex;
2433
+ flex-direction: column;
2434
+ flex: 1 1 auto;
2435
+ min-height: 0;
2436
+ gap: var(--ck-spacing-medium-small);
2437
+ position: relative;
2438
+ }
2439
+
2440
+ .ck .ck-ai-chat-history .ck-ai-chat-history__content .ck-ai-chat-error {
2441
+ margin: var(--ck-spacing-extra-large) var(--ck-spacing-large) var(--ck-spacing-medium) var(--ck-spacing-large);
2442
+ }
2443
+
2444
+ .ck .ck-ai-chat-history .ck-search > .ck-labeled-field-view {
2445
+ margin-top: var(--ck-spacing-medium);
2446
+ padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-tiny);
2447
+ }
2448
+
2449
+ .ck .ck-ai-chat-history .ck-search__results {
2450
+ min-height: 0;
2451
+ flex: 1 1 auto;
2452
+ overflow-y: auto;
2453
+ overflow-x: hidden;
2454
+ }
2455
+
2456
+ .ck .ck-ai-chat-history .ck-dropdown .ck-dropdown__arrow {
2457
+ display: none;
2458
+ }
2459
+
2460
+ .ck .ck-ai-chat-history .ck-ai-chat-history__sections {
2461
+ gap: var(--ck-spacing-medium-small);
2462
+ }
2463
+
2464
+ .ck .ck-ai-chat-history .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
2465
+ padding: 0;
2466
+ }
2467
+
2468
+ .ck .ck-ai-chat-history .ck-ai-chat-history__section-title {
2469
+ color: var(--ck-ai-chat-color-icon);
2470
+ font-size: 0.85em;
2471
+ font-weight: 700;
2472
+ line-height: 1.85em;
2473
+ padding: 0.48em 0.9em 0 0.9em;
2474
+ }
2475
+
2476
+ .ck .ck-ai-chat-history .ck-confirm-view .ck-confirm-view-inner, .ck .ck-ai-chat-history .ck-ai-chat-history__item {
2477
+ padding: var(--ck-spacing-tiny)
2478
+ var(--ck-spacing-extra-large)
2479
+ var(--ck-spacing-tiny)
2480
+ var(--ck-spacing-large);
2481
+ }
2482
+
2483
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item {
2484
+ display: flex;
2485
+ position: relative;
2486
+ transition: transform 300ms ease;
2487
+ }
2488
+
2489
+ @media (prefers-reduced-motion: reduce) {
2490
+
2491
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item {
2492
+ transition: none;
2493
+ }
2494
+ }
2495
+
2496
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item:hover {
2497
+ background-color: var(--ck-ai-chat-button-active-background-color);
2498
+ }
2499
+
2500
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-title {
2501
+ display: inline-block;
2502
+ width: 100%;
2503
+ overflow: hidden;
2504
+ text-overflow: ellipsis;
2505
+ }
2506
+
2507
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item--active .ck-ai-chat-history__item-title {
2508
+ font-weight: 700;
2509
+ }
2510
+
2511
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-row {
2512
+ --ck-icon-font-size: .666em;
2513
+ --ck-ui-component-min-height: 1.7em;
2514
+ --ck-ui-component-min-width: 1.7em;
2515
+
2516
+ width: 100%;
2517
+ min-width: 0;
2518
+ margin-left: 0.3em;
2519
+ }
2520
+
2521
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-row, .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions {
2522
+ display: flex;
2523
+ align-items: center;
2524
+ gap: 0.6em;
2525
+ }
2526
+
2527
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions {
2528
+ height: 100%;
2529
+ }
2530
+
2531
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-button,
2532
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-dropdown .ck-dropdown__button {
2533
+ opacity: .7;
2534
+ }
2535
+
2536
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-button:hover, .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-dropdown .ck-dropdown__button:hover {
2537
+ opacity: 1;
2538
+ background: none;
2539
+ }
2540
+
2541
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-button.ck-on, .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-dropdown .ck-dropdown__button.ck-on {
2542
+ background-color: var(--ck-ai-chat-button-active-background-color);
2543
+ color: var(--ck-ai-chat-button-hover-color);
2544
+ }
2545
+
2546
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-button.ck-on svg, .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-dropdown .ck-dropdown__button.ck-on svg {
2547
+ color: var(--ck-ai-chat-button-active-color);
2548
+ }
2549
+
2550
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-input,
2551
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-input_focused {
2552
+ width: 100%;
2553
+ padding: 0;
2554
+ border: none;
2555
+ box-shadow: none;
2556
+ background: transparent;
2557
+ }
2558
+
2559
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item--edit {
2560
+ background: var(--ck-ai-chat-button-active-background-color);
2561
+ }
2562
+
2563
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-ai-chat-history__item-edit .ck-input {
2564
+ background: var(--ck-ai-chat-button-active-background-color);
2565
+ }
2566
+
2567
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-ai-chat-history__item-actions {
2568
+ align-items: center;
2569
+ }
2570
+
2571
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-content {
2572
+ display: flex;
2573
+ flex-direction: column;
2574
+ justify-content: center;
2575
+ align-items: flex-start;
2576
+ flex: 1 0 0;
2577
+ overflow: hidden;
2578
+ }
2579
+
2580
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-main-content {
2581
+ width: 100%;
2582
+ }
2583
+
2584
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-main-content, .ck .ck-ai-chat-history .ck-ai-chat-history__item-check-container {
2585
+ display: flex;
2586
+ align-items: center;
2587
+ height: 2em;
2588
+ }
2589
+
2590
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-check-container {
2591
+ --ck-icon-font-size: .5em;
2592
+
2593
+ min-width: var(--ai-active-icon-size);
2594
+ }
2595
+
2596
+ .ck .ck-ai-chat-history .ck-ai-chat-history__item-date {
2597
+ line-height: 1.385em;
2598
+ color: var(--ck-ai-chat-color-icon);
2599
+ }
2600
+
2601
+ .ck .ck-ai-chat-history .ck-ai-chat-history__empty {
2602
+ padding: var(--ck-spacing-tiny) var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-large);
2603
+ }
2604
+
2605
+ .ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat-history__empty-message {
2606
+ text-wrap: auto;
2607
+ line-height: 1.85em;
2608
+ margin: var(--ck-spacing-large) 0;
2609
+ }
2610
+
2611
+ .ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat-history__open-chat-button {
2612
+ font-size: 0.9em;
2613
+ border: none;
2614
+ padding: 0 var(--ck-spacing-standard);
2615
+ min-height: 22px;
2616
+ height: 22px;
2617
+
2618
+ background-color: var(--ck-ai-background-color-action-button);
2619
+ color: var(--ck-ai-font-color-action-button);
2620
+ }
2621
+
2622
+ .ck .ck-ai-chat-history .ck-confirm-view {
2623
+ --ck-icon-font-size: .666em;
2624
+ --ck-ui-component-min-height: 1.7em;
2625
+ --ck-ui-component-min-width: 1.7em;
2626
+ }
2627
+
2628
+ .ck .ck-ai-chat-history .ck-confirm-view .ck-confirm-view-inner {
2629
+ flex-direction: row;
2630
+ align-items: center;
2631
+ justify-content: space-between;
2632
+ gap: 0.6em;
2633
+ flex: 1 0 0;
2634
+ margin-left: var(--ai-active-icon-size);
2635
+ }
2636
+
2637
+ .ck .ck-ai-chat-history .ck-confirm-view .ck-confirm-view-actions {
2638
+ display: flex;
2639
+ gap: 0.6em;
2640
+ }
2641
+
2642
+ /*
2643
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
2644
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
2645
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
2646
+ *
2647
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
2648
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
2649
+ */
2650
+
2651
+ :root {
2652
+ --ck-ai-quick-actions-button-color: hsla(263, 59%, 52%, 1);
2653
+ --ck-ai-quick-actions-button-background-color: hsla(265, 100%, 96%, 1);
2654
+ }
2655
+
2656
+ .ck-ai-quick-actions {
2657
+ width: 300px;
2658
+ }
2659
+
2660
+ .ck-ai-quick-actions svg.ck-icon {
2661
+ width: 20px;
2662
+ height: 20px;
2663
+ }
2664
+
2665
+ :scope .ck-ai-quick-actions-dropdown,:scope .ck-ai-quick-actions-group-panel {
2666
+ --ck-color-list-button-hover-background: var(--ck-ai-quick-actions-button-background-color);
2667
+ --ck-color-button-default-hover-background: var(--ck-ai-quick-actions-button-background-color);
2668
+ --ck-color-button-on-background: var(--ck-ai-quick-actions-button-background-color);
2669
+ --ck-color-button-on-hover-background: var(--ck-ai-quick-actions-button-background-color);
2670
+ }
2671
+
2672
+ :scope .ck-ai-quick-actions-dropdown .ck.ck-button:not(.ck-dropdown__button),:scope .ck-ai-quick-actions-group-panel .ck.ck-button:not(.ck-dropdown__button) {
2673
+ border-color: transparent;
2674
+ box-shadow: none;
2675
+ }
2676
+
2677
+ :scope .ck-ai-quick-actions-dropdown .ck.ck-button:not(.ck-dropdown__button):focus,:scope .ck-ai-quick-actions-group-panel .ck.ck-button:not(.ck-dropdown__button):focus {
2678
+ background-color: var(--ck-ai-quick-actions-button-background-color);
2679
+ }
2680
+
2681
+ :scope .ck-ai-quick-actions-dropdown .ck.ck-button.ck-dropdown__button.ck-on,:scope .ck-ai-quick-actions-group-panel .ck.ck-button.ck-dropdown__button.ck-on {
2682
+ color: var(--ck-ai-quick-actions-button-color);
2683
+ }
2684
+
2685
+ /*
2686
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
2687
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
2688
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
2689
+ *
2690
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
2691
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
2692
+ */
2693
+
2694
+ :root {
2695
+ /* Taken from old AI Assistant */
2696
+ --ck-color-ai-selection: hsl(262.5, 60%, 90%);
2697
+
2698
+ /* Primary button */
2699
+ --ck-ai-button-primary-color: hsla(0, 0%, 100%, 1);
2700
+ --ck-ai-button-primary-disabled-color: hsla(0, 0%, 100%, 1);
2701
+ --ck-ai-button-primary-background-color: hsla(263, 59%, 52%, 1);
2702
+ --ck-ai-button-primary-disabled-background-color: hsla(263, 59%, 52%, 0.5);
2703
+ --ck-ai-button-primary-hover-background-color: hsla(263, 59%, 40%, 1);
2704
+
2705
+ /* Secondary button */
2706
+ --ck-ai-button-secondary-color: hsla(263, 59%, 52%, 1);
2707
+ --ck-ai-button-secondary-disabled-color: hsla(263, 59%, 52%, 0.5);
2708
+ --ck-ai-button-secondary-background-color: hsla(0, 0%, 100%, 1);
2709
+ --ck-ai-button-secondary-disabled-background-color: hsla(0, 0%, 100%, 0.5);
2710
+ --ck-ai-button-secondary-border-color: hsla(262, 51%, 80%, 1);
2711
+ --ck-ai-button-secondary-disabled-border-color: hsla(262, 51%, 80%, 0.5);
2712
+ --ck-ai-button-secondary-hover-background-color: hsla(262, 100%, 96%, 1);
2713
+ --ck-ai-button-secondary-active-background-color: hsla(262, 100%, 96%, 1);
2714
+ }
2715
+
2716
+ .ck.ai-balloon {
2717
+ --ck-ai-balloon-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
2718
+ --ck-ai-balloon-disclaimer-text-color: hsla(0, 0%, 44%, 1);
2719
+ }
2720
+
2721
+ .ck.ai-balloon .ck-dialog__content {
2722
+ width: 580px;
2723
+ padding: var(--ck-spacing-large);
2724
+ }
2725
+
2726
+ .ck.ai-balloon .ck-ai-suggestion__header {
2727
+ display: none
2728
+ }
2729
+
2730
+ .ck.ai-balloon .ck.ck-ai-balloon__toolbar {
2731
+ border: none;
2732
+ padding: 0;
2733
+ margin-top: var(--ck-spacing-medium);
2734
+ margin-bottom: 0;
2735
+ }
2736
+
2737
+ .ck.ai-balloon .ck.ck-ai-balloon__toolbar .ck-button_with-text {
2738
+ margin-bottom: 0;
2739
+ margin-top: 0;
2740
+ }
2741
+
2742
+ .ck.ai-balloon .ck-ai-balloon__disclaimer {
2743
+ margin-top: var(--ck-spacing-medium);
2744
+ }
2745
+
2746
+ .ck.ai-balloon .ck-ai-balloon__disclaimer .ck-ai-balloon__disclaimer-content {
2747
+ color: var(--ck-ai-balloon-disclaimer-text-color);
2748
+ font-size: 0.75em;
2749
+ line-height: 1.025em;
2750
+ text-align: left;
2751
+ word-break: normal;
2752
+ text-wrap: auto;
2753
+ }
2754
+
2755
+ .ck.ai-balloon .ck-ai-suggestion__body {
2756
+ height: 150px;
2757
+ word-break: normal;
2758
+ text-wrap: auto;
2759
+ overflow-y: auto;
2760
+ }
2761
+
2762
+ .ck.ai-balloon .ck-ai-suggestion__body pre>code {
2763
+ white-space: pre-wrap;
2764
+ }
2765
+
2766
+ .ck.ai-balloon .ck-ai-suggestion__changes {
2767
+ height: 150px;
2768
+ overflow-y: auto;
2769
+ }
2770
+
2771
+ .ck.ai-balloon * {
2772
+ font-family: var(--ck-ai-balloon-font-family) !important;
2773
+ }
2774
+
2775
+ .ck.ai-balloon .ck-ai-suggestion__changes *,
2776
+ .ck.ai-balloon .ck-ai-suggestion__body *,
2777
+ .ck.ai-balloon .ck-ai-suggestion__change * {
2778
+ white-space: normal;
2779
+ line-height: 1.4em;
2780
+ }
2781
+
2782
+ .ck.ai-balloon-rotator .ck.ck-form__header {
2783
+ justify-content: center;
2784
+ position: relative;
2785
+ }
2786
+
2787
+ .ck.ai-balloon-rotator .ck.ck-form__header h2.ck.ck-form__header__label {
2788
+ flex-grow: 0;
2789
+ }
2790
+
2791
+ .ck.ai-balloon-rotator .ck.ck-form__header button.ck-button {
2792
+ margin-right: var(--ck-spacing-large);
2793
+ margin-left: var(--ck-spacing-large);
2794
+ }
2795
+
2796
+ .ck.ai-balloon-rotator .ck.ck-form__header .ck-button:last-child {
2797
+ position: absolute;
2798
+ right: var(--ck-spacing-large);
2799
+ }
2800
+
2801
+ .ck.ai-balloon-rotator::after {
2802
+ content: "";
2803
+ position: absolute;
2804
+ top: 8px;
2805
+ left: 8px;
2806
+ width: 100%;
2807
+ height: 100%;
2808
+ background: var(--ck-color-dialog-background);
2809
+ z-index: -1;
2810
+ border-radius: var(--ck-border-radius);
2811
+ box-shadow: var(--ck-drop-shadow), 0 0;
2812
+ border: 1px solid var(--ck-color-base-border);
2813
+ }
2814
+
2815
+ /* Buttons styles will be removed after shared code is merged. */
2816
+ .ck.ck-button.ck-ai-button-primary {
2817
+ color: var(--ck-ai-button-primary-color);
2818
+ background-color: var(--ck-ai-button-primary-background-color);
2819
+ border: none;
2820
+ }
2821
+ .ck.ck-button.ck-ai-button-primary:hover {
2822
+ background-color: var(--ck-ai-button-primary-hover-background-color);
2823
+ }
2824
+ .ck.ck-button.ck-ai-button-primary:disabled {
2825
+ color: var(--ck-ai-button-primary-disabled-color);
2826
+ background-color: var(--ck-ai-button-primary-disabled-background-color);
2827
+ cursor: not-allowed;
2828
+ }
2829
+ .ck.ck-button.ck-ai-button-secondary {
2830
+ color: var(--ck-ai-button-secondary-color);
2831
+ background-color: var(--ck-ai-button-secondary-background-color);
2832
+ border: 1px solid var(--ck-ai-button-secondary-border-color);
2833
+ }
2834
+ .ck.ck-button.ck-ai-button-secondary:hover {
2835
+ background-color: var(--ck-ai-button-secondary-hover-background-color);
2836
+ }
2837
+ .ck.ck-button.ck-ai-button-secondary:active,
2838
+ .ck.ck-button.ck-ai-button-secondary.ck-on {
2839
+ background-color: var(--ck-ai-button-secondary-active-background-color);
2840
+ }
2841
+ .ck.ck-button.ck-ai-button-secondary:disabled {
2842
+ color: var(--ck-ai-button-secondary-disabled-color);
2843
+ background-color: var(--ck-ai-button-secondary-disabled-background-color);
2844
+ border: 1px solid var(--ck-ai-button-secondary-disabled-border-color);
2845
+ cursor: not-allowed;
2846
+ }
2847
+
2848
+ .ck-ai-suggestion__container .ck.ck-ai-suggestion__loader {
2849
+ padding: var(--ck-spacing-large) !important;
2850
+ height: 150px;
2851
+ }
2852
+
2853
+ .ck-ai-suggestion__container .ck.ck-ai-suggestion__loader .ck.ck-spinner-container.ck-ai-spinner .ck-spinner {
2854
+ --ck-ai-spinner-size: 18px;
2855
+ }
2856
+
2857
+ .ck-ai-suggestion__container .ck.ck-ai-suggestion__loader .ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_small {
2858
+ --ck-ai-spinner-size: 18px;
2859
+ }
2860
+
2861
+ .ck-ai-suggestion__container .ck.ck-ai-suggestion__loader .ck-ai-suggestion__loader-text {
2862
+ margin-left: var(--ck-spacing-medium);
2863
+ }
2864
+
2865
+ /*
2866
+ * Classes used by the "fake visual selection" displayed in the content
2867
+ * when the AI Balloon is open.
2868
+ *
2869
+ * Narrow down to <span> to prevent changing background for widgets and nested editables.
2870
+ */
2871
+ .ck span.ck-fake-ai-selection {
2872
+ background: var(--ck-color-ai-selection);
2873
+ }
2874
+
2875
+ .ck .ck-widget.ck-fake-ai-selection {
2876
+ outline-color: var(--ck-color-ai-selection);
2877
+ }
2878
+
2879
+ .ck.ck-dialog-overlay:has(.ai-balloon) {
2880
+ z-index: 998;
2881
+ }
2882
+ /*
2883
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
2884
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
2885
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
2886
+ *
2887
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
2888
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
2889
+ */
2890
+
2891
+ :root {
2892
+ --ck-ai-check-list-item-hover-border-color: hsla(262, 64%, 78%, 1);
2893
+ --ck-ai-check-list-item-active-border-color: hsla(263, 59%, 52%, 1);
2894
+ --ck-ai-check-list-item-title-color: var(--ck-color-text);
2895
+ --ck-ai-check-list-item-description-color: hsla(0, 0%, 44%, 1);
2896
+ --ck-ai-check-list-item-title-icon-color: hsla(0, 0%, 44%, 1);
2897
+ --ck-ai-check-list-model-dropdown-width: 426px;
2898
+ --ck-ai-check-list-model-dropdown-max-height: 340px;
2899
+ --ck-ai-check-list-model-dropdown-arrow-drop-shadow: 0 -2px 0px var(--ck-color-shadow-drop);
2900
+ }
2901
+
2902
+ .ck.ck-ai-review-mode * {
2903
+ font-family: var(--ck-ai-chat-font-family) !important;
2904
+ }
2905
+
2906
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list {
2907
+ position: relative;
2908
+ height: 100%;
2909
+ overflow: auto;
2910
+ }
2911
+
2912
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item {
2913
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
2914
+ border-bottom: 1px solid var(--ck-color-base-border);
2915
+ box-shadow: 3px 0px 0px 0px transparent inset;
2916
+ opacity: 0;
2917
+ visibility: hidden;
2918
+
2919
+ transition: box-shadow 0.3s ease-in-out;
2920
+ }
2921
+
2922
+ @media (prefers-reduced-motion: reduce) {
2923
+
2924
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item {
2925
+ transition-duration: 0s;
2926
+ }
2927
+ }
2928
+
2929
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-description {
2930
+ color: var(--ck-ai-check-list-item-description-color);
2931
+ }
2932
+
2933
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title-text,
2934
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-description {
2935
+ white-space: normal;
2936
+ line-height: 1.3;
2937
+ }
2938
+
2939
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item:hover {
2940
+ cursor: pointer;
2941
+ }
2942
+
2943
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item:hover .ck-ai-review-mode__check-list-item-title-text,
2944
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item:hover .ck-ai-review-mode__check-list-item-description {
2945
+ cursor: pointer;
2946
+ }
2947
+
2948
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item.ck-ai-review-mode__check-list-item_rendered {
2949
+ opacity: 1;
2950
+ visibility: visible;
2951
+
2952
+ transition: box-shadow 0.3s ease-in-out,
2953
+ opacity 0.1s calc(0.05s * var(--ck-ai-check-list-item-index)),
2954
+ visibility 0.1s calc(0.05s * var(--ck-ai-check-list-item-index));
2955
+ }
2956
+
2957
+ @media (prefers-reduced-motion: reduce) {
2958
+
2959
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item.ck-ai-review-mode__check-list-item_rendered {
2960
+ opacity: 1;
2961
+ visibility: visible;
2962
+ }
2963
+ }
2964
+
2965
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item.ck-ai-review-mode__check-list-item_selected {
2966
+ box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
2967
+ }
2968
+
2969
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title {
2970
+ display: flex;
2971
+ justify-content: space-between;
2972
+ margin-block-end: var(--ck-spacing-tiny);
2973
+ }
2974
+
2975
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title > .ck-ai-review-mode__check-list-item-title-text {
2976
+ flex-grow: 1;
2977
+ color: var(--ck-ai-check-list-item-title-color);
2978
+ font-weight: 700;
2979
+ }
2980
+
2981
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
2982
+ --ck-icon-size: 20px;
2983
+
2984
+ flex-shrink: 0;
2985
+ margin-inline-start: var(--ck-spacing-small);
2986
+ color: var(--ck-ai-check-list-item-title-icon-color);
2987
+
2988
+ opacity: 0;
2989
+ visibility: hidden;
2990
+
2991
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
2992
+ }
2993
+
2994
+ @media (prefers-reduced-motion: reduce) {
2995
+
2996
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
2997
+ transition-duration: 0s;
2998
+ }
2999
+ }
3000
+
3001
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item:not(.ck-ai-review-mode__check-list-item_selected):hover {
3002
+ box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
3003
+ }
3004
+
3005
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item:not(.ck-ai-review-mode__check-list-item_selected):hover .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
3006
+ opacity: 1;
3007
+ visibility: visible;
3008
+ }
3009
+
3010
+ /* Parameterized form view. */
3011
+
3012
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row {
3013
+ padding-left: 0;
3014
+ padding-right: 0;
3015
+ }
3016
+
3017
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element {
3018
+ flex: 1;
3019
+ }
3020
+
3021
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element > *:first-child {
3022
+ width: 100%;
3023
+ }
3024
+
3025
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element.ck-ai-review-mode__check-list-item-parameterized-form-element_dropdown .ck-button.ck-dropdown__button {
3026
+ border-color: hsl(216, 5%, 81%);
3027
+ }
3028
+
3029
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element.ck-ai-review-mode__check-list-item-parameterized-form-element_dropdown .ck-button.ck-dropdown__button > .ck-button__label {
3030
+ width: 100%;
3031
+ }
3032
+
3033
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row .ck.ck-button {
3034
+ flex-shrink: 0;
3035
+ }
3036
+
3037
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-custom-actions .ck.ck-form__row .ck.ck-input.ck-textarea.ck-review-mode__prompt-input {
3038
+ width: 100%;
3039
+ }
3040
+
3041
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-custom-actions .ck.ck-form__row .ck-ai-review-mode__check-list-item-custom-actions-footer {
3042
+ display: flex;
3043
+ width: 100%;
3044
+ align-items: center;
3045
+ justify-content: space-between;
3046
+ }
3047
+
3048
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-custom-actions .ck.ck-form__row .ck-ai-review-mode__check-list-item-custom-actions-footer .ck-ai-review-mode__check-list-item-parameterized-custom-actions-buttons {
3049
+ display: flex;
3050
+ gap: var(--ck-spacing-small);
3051
+ }
3052
+
3053
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown > .ck.ck-button.ck-dropdown__button {
3054
+ font-size: .9em;
3055
+ }
3056
+
3057
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown > .ck.ck-button.ck-dropdown__button.ck-on,
3058
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown > .ck.ck-button.ck-dropdown__button:active {
3059
+ background-color: var(--ck-ai-button-secondary-active-background-color);
3060
+ color: var(--ck-ai-background-color-action-button);
3061
+ }
3062
+
3063
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown > .ck.ck-button.ck-dropdown__button > .ck.ck-button__label {
3064
+ width: auto;
3065
+ }
3066
+
3067
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel {
3068
+ width: var(--ck-ai-check-list-model-dropdown-width);
3069
+ padding-top: var(--ck-spacing-standard);
3070
+ top: calc(100% + var(--ck-balloon-arrow-height));
3071
+ bottom: auto;
3072
+ }
3073
+
3074
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel.ck-dropdown__panel_se::before,
3075
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel.ck-dropdown__panel_se::after {
3076
+ content: '';
3077
+ position: absolute;
3078
+ left: calc(2 * var(--ck-balloon-arrow-half-width));
3079
+ top: calc(-1 * var(--ck-balloon-arrow-height) + 2px);
3080
+ width: 0;
3081
+ height: 0;
3082
+ border-style: solid;
3083
+ border-width: 0 var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-half-width);
3084
+ border-color: transparent transparent var(--ck-color-panel-background) transparent;
3085
+ }
3086
+
3087
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel.ck-dropdown__panel_se::before {
3088
+ z-index: var(--ck-balloon-panel-arrow-z-index);
3089
+ margin-bottom: calc(-1 * var(--ck-balloon-border-width));
3090
+ filter: drop-shadow(var(--ck-ai-check-list-model-dropdown-arrow-drop-shadow));
3091
+ }
3092
+
3093
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel.ck-dropdown__panel_se::after {
3094
+ z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
3095
+ margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width));
3096
+ }
3097
+
3098
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel.ck-dropdown__panel_se > .ck-list {
3099
+ max-height: var(--ck-ai-check-list-model-dropdown-max-height);
3100
+ overflow-y: scroll;
3101
+ }
3102
+
3103
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel > .ck.ck-list {
3104
+ gap: var(--ck-spacing-standard);
3105
+ }
3106
+
3107
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel > .ck.ck-list > .ck.ck-list__item > .ck.ck-button.ck-list-item-button {
3108
+ align-items: baseline;
3109
+ }
3110
+
3111
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel > .ck.ck-list > .ck.ck-list__item > .ck.ck-button.ck-list-item-button .ck-list-item-button__check-holder {
3112
+ flex-shrink: 0;
3113
+ }
3114
+
3115
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel > .ck.ck-list > .ck.ck-list__item > .ck.ck-button.ck-list-item-button .ck-ai-review-mode__check-list-item-model-dropdown-name {
3116
+ line-height: 1.3;
3117
+ font-weight: 500;
3118
+ }
3119
+
3120
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel > .ck.ck-list > .ck.ck-list__item > .ck.ck-button.ck-list-item-button .ck-ai-review-mode__check-list-item-model-dropdown-description {
3121
+ padding-top: var(--ck-spacing-tiny);
3122
+ line-height: 1.3;
3123
+ }
3124
+
3125
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-model-dropdown .ck-dropdown__panel > .ck.ck-list > .ck.ck-list__item > .ck.ck-button.ck-list-item-button .ck-ai-review-mode__check-list-item-model-dropdown-description > span {
3126
+ color: var(--ck-ai-chat-color-icon);
3127
+ line-height: 1;
3128
+ white-space: normal;
3129
+ }
3130
+
3131
+ /*
3132
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3133
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3134
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3135
+ *
3136
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3137
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3138
+ */
3139
+
3140
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run {
3141
+ position: relative;
3142
+ height: 100%;
3143
+ overflow: auto;
3144
+ display: flex;
3145
+ flex-direction: column;
3146
+ }
3147
+
3148
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
3149
+ overflow: hidden;
3150
+ }
3151
+
3152
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result {
3153
+ opacity: 0;
3154
+ visibility: hidden;
3155
+ box-shadow: 3px 0px 0px 0px transparent inset;
3156
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
3157
+
3158
+ animation: ck-ai-check-run-list-item-show 0.25s 0.1s forwards;
3159
+
3160
+ transition: box-shadow 0.3s ease-in-out;
3161
+ transition-behavior: allow-discrete;
3162
+ }
3163
+
3164
+ @media (prefers-reduced-motion: reduce) {
3165
+
3166
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result {
3167
+ animation: none;
3168
+ opacity: 1;
3169
+ visibility: visible;
3170
+ transition-duration: 0s;
3171
+ }
3172
+ }
3173
+
3174
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:not(:first-child) {
3175
+ border-top: 1px solid var(--ck-color-base-border);
3176
+ }
3177
+
3178
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:last-child {
3179
+ border-bottom: 1px solid var(--ck-color-base-border);
3180
+ }
3181
+
3182
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result .ck-suggestion-marker {
3183
+ white-space: break-spaces;
3184
+ }
3185
+
3186
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:hover {
3187
+ box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
3188
+ }
3189
+
3190
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_active {
3191
+ box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
3192
+ }
3193
+
3194
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response {
3195
+ overflow: hidden;
3196
+ }
3197
+
3198
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response > * {
3199
+ white-space: normal;
3200
+ }
3201
+
3202
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response img {
3203
+ max-width: 125px;
3204
+ max-height: 125px;
3205
+ }
3206
+
3207
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-footer {
3208
+ margin-top: var(--ck-spacing-standard);
3209
+ display: flex;
3210
+ justify-content: space-between;
3211
+ align-items: center;
3212
+ gap: var(--ck-spacing-standard);
3213
+ }
3214
+
3215
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-footer > .ck-ai-review-mode__check-run-result-action-buttons {
3216
+ display: flex;
3217
+ gap: var(--ck-spacing-standard);
3218
+ flex-grow: 1;
3219
+ }
3220
+
3221
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-footer .ck.ck-button.ck-ai-review-mode__check-run-result-info-button {
3222
+ --ck-icon-size: 16px;
3223
+ --ck-ui-component-min-height: 1.75em;
3224
+
3225
+ max-height: var(--ck-ui-component-min-height);
3226
+ margin-left: auto;
3227
+ }
3228
+
3229
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_removing {
3230
+ animation: ck-ai-check-run-item-remove 0.2s forwards;
3231
+ }
3232
+
3233
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-header {
3234
+ display: flex;
3235
+ justify-content: space-between;
3236
+ align-items: center;
3237
+ gap: var(--ck-spacing-standard);
3238
+
3239
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
3240
+ border-bottom: 1px solid var(--ck-color-base-border);
3241
+ }
3242
+
3243
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-header .ck-ai-review-mode__check-run-results-header-title {
3244
+ align-self: center;
3245
+ font-weight: bold;
3246
+ white-space: nowrap;
3247
+ overflow: hidden;
3248
+ max-width: 100%;
3249
+ text-overflow: ellipsis;
3250
+ }
3251
+
3252
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-header .ck-ai-review-mode__check-run-results-header-buttons {
3253
+ display: flex;
3254
+ gap: var(--ck-spacing-standard);
3255
+ flex-shrink: 0;
3256
+ align-items: center;
3257
+ /* To prevent jumping when visibility of buttons is changing.
3258
+ TODO: probably it will be replaced with different loader UI. */
3259
+ min-height: 30px;
3260
+ }
3261
+
3262
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-wrapper {
3263
+ position: relative;
3264
+ height: 100%;
3265
+ overflow: auto;
3266
+ }
3267
+
3268
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-wrapper:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
3269
+ overflow: hidden;
3270
+ }
3271
+
3272
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-skeleton-container {
3273
+ position: absolute;
3274
+ width: 100%;
3275
+ top: 0;
3276
+ height: 100%;
3277
+ }
3278
+
3279
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-skeleton-container .ck-ai-review-mode__check-run-skeleton-item {
3280
+ position: static;
3281
+ height: auto;
3282
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
3283
+ border-bottom: 1px solid var(--ck-color-base-border);
3284
+ }
3285
+
3286
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-skeleton-container .ck-ai-review-mode__check-run-skeleton-item.ck-ai-skeleton {
3287
+ --ck-ai-skeleton-gap: var(--ck-spacing-small);
3288
+ }
3289
+
3290
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-error-container {
3291
+ display: flex;
3292
+ flex-direction: column;
3293
+ align-items: flex-end;
3294
+ gap: var(--ck-spacing-medium-small);
3295
+ padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard) var(--ck-spacing-large);
3296
+ }
3297
+
3298
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-error-container.ck-ai-review-mode__check-run-error-container_border-bottom {
3299
+ border-bottom: 1px solid var(--ck-color-base-border);
3300
+ }
3301
+
3302
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-error-container .ck-ai-review-mode__check-run-error-retry-button {
3303
+ font-size: 11.7px;
3304
+ min-height: unset;
3305
+ border: 1px solid var(--ck-ai-border-color-button);
3306
+ border-radius: var(--ck-border-radius);
3307
+ gap: var(--ck-spacing-small);
3308
+ color: var(--ck-ai-chat-color-text);
3309
+ }
3310
+
3311
+ @keyframes ck-ai-check-run-list-item-show {
3312
+ 0% {
3313
+ opacity: 0;
3314
+ visibility: hidden;
3315
+ }
3316
+ 100% {
3317
+ opacity: 1;
3318
+ visibility: visible;
3319
+ }
3320
+ }
3321
+
3322
+ @keyframes ck-ai-check-run-item-remove {
3323
+ 0% {
3324
+ opacity: 1;
3325
+ visibility: visible;
3326
+ display: block;
3327
+ }
3328
+ 100% {
3329
+ opacity: 0;
3330
+ visibility: hidden;
3331
+ display: none;
3332
+ }
3333
+ }
3334
+
3335
+ /*
3336
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3337
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3338
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3339
+ *
3340
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3341
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3342
+ */
3343
+
3344
+ .ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-header {
3345
+ display: flex;
3346
+ justify-content: space-between;
3347
+ align-items: center;
3348
+ gap: var(--ck-spacing-standard);
3349
+
3350
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
3351
+ border-bottom: 1px solid var(--ck-color-base-border);
3352
+ }
3353
+
3354
+ .ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-header .ck-ai-review-mode__review-completed-header-title {
3355
+ align-self: center;
3356
+ white-space: nowrap;
3357
+ overflow: hidden;
3358
+ max-width: 100%;
3359
+ text-overflow: ellipsis;
3360
+ }
3361
+
3362
+ .ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-header .ck-ai-review-mode__review-completed-header-buttons {
3363
+ display: flex;
3364
+ gap: var(--ck-spacing-standard);
3365
+ flex-shrink: 0;
3366
+ }
3367
+
3368
+ .ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-content {
3369
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-extra-large) 0 var(--ck-spacing-extra-large);
3370
+ text-align: center;
3371
+ }
3372
+
3373
+ .ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-content .ck-ai-review-mode__review-completed-content-icon {
3374
+ font-size: 20px;
3375
+ line-height: 20px;
3376
+ }
3377
+
3378
+ .ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-content .ck-ai-review-mode__review-completed-content-text {
3379
+ margin-top: var(--ck-spacing-large);
3380
+ text-align: center;
3381
+ white-space: normal;
3382
+ }
3383
+
3384
+ /*
3385
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3386
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3387
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3388
+ *
3389
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3390
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3391
+ */
3392
+
3393
+ /*
3394
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3395
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3396
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3397
+ *
3398
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3399
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3400
+ */
3401
+
3402
+ .ck-ai-header {
3403
+ /* Custom values unlike the rest of editor UI. */
3404
+ --ck-ui-component-min-height: 1.7em;
3405
+ --ck-ui-component-min-width: 1.7em;
3406
+
3407
+ /* Custom value. It defaults to the toolbar component height so they look fine on next to each other. */
3408
+ --ck-form-header-height: 3em;
3409
+ --ck-form-header-small-icon-color: hsla(0, 0%, 20%, 1);
3410
+ }
3411
+
3412
+ .ck-ai-header > .ck-button {
3413
+ margin-inline-start: var(--ck-spacing-standard);
3414
+ }
3415
+
3416
+ .ck-ai-header > .ck-button > .ck-button__icon {
3417
+ /* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
3418
+ --ck-icon-font-size: .666em;
3419
+
3420
+ color: var(--ck-ai-chat-color-icon);
3421
+ }
3422
+
3423
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation {
3424
+ /* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
3425
+ font-size: 11.7px;
3426
+ min-height: unset;
3427
+ border: 1px solid var(--ck-ai-border-color-button);
3428
+ border-radius: var(--ck-border-radius);
3429
+ gap: var(--ck-spacing-small);
3430
+ color: var(--ck-ai-chat-color-text);
3431
+ }
3432
+
3433
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation:hover {
3434
+ background-color: var(--ck-ai-chat-button-active-background-color);
3435
+ }
3436
+
3437
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__label {
3438
+ /* Custom value unlike the rest of editor UI. */
3439
+ line-height: 1.4em;
3440
+ }
3441
+
3442
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__icon {
3443
+ /* Custom value unlike the rest of editor UI (defaults to 14px). See how it's used in the icon.css */
3444
+ --ck-icon-font-size: .632em;
3445
+
3446
+ margin-inline-end: 0;
3447
+ color: var(--ck-ai-chat-color-text);
3448
+ }
3449
+
3450
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > span.ck-button__label {
3451
+ position: relative;
3452
+ top: 1px;
3453
+ }
3454
+
3455
+ .ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back {
3456
+ margin-inline-start: 0;
3457
+ margin-inline-end: var(--ck-spacing-small);
3458
+ }
3459
+
3460
+ .ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back > .ck-button__icon {
3461
+ /* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
3462
+ --ck-icon-font-size: 13px;
3463
+
3464
+ color: var(--ck-form-header-small-icon-color);
3465
+ }
3466
+
3467
+ .ck-ai-header.ck-ai-header_small .ck-form__header__label {
3468
+ --ck-font-size-base: 13px;
3469
+ --ck-font-face: var(--ck-ai-chat-font-family);
3470
+
3471
+ font-weight: 500;
3472
+ }
3473
+
3474
+ .ck-ai-header .ck-form__header__label:not(:last-child) {
3475
+ margin-inline-end: var(--ck-spacing-small);
3476
+ }
3477
+
3478
+ .ck {
3479
+ --ck-color-ai-review-mode-suggestion: hsla(263, 59%, 52%, 0.5);
3480
+ }
3481
+
3482
+ .ck .ck-ai-review-mode {
3483
+ max-height: 100%;
3484
+ height: 100%;
3485
+ display: flex;
3486
+ flex-direction: column;
3487
+ }
3488
+
3489
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_add {
3490
+ border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
3491
+ }
3492
+
3493
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_hide {
3494
+ display: none;
3495
+ }
3496
+
3497
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_strikethrough {
3498
+ position: relative;
3499
+ }
3500
+
3501
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_strikethrough:before {
3502
+ border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
3503
+ position: absolute;
3504
+ content: "";
3505
+ width: 100%;
3506
+ height: 60%;
3507
+ }
3508
+
3509
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_underline {
3510
+ border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
3511
+ }
3512
+
3513
+ .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_add {
3514
+ white-space: break-spaces;
3515
+ border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border);
3516
+ border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border);
3517
+ background: var(--ck-color-suggestion-marker-insertion-background);
3518
+ }
3519
+
3520
+ .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_hide,
3521
+ .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_strikethrough {
3522
+ white-space: break-spaces;
3523
+ border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border);
3524
+ border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border);
3525
+ text-decoration: line-through;
3526
+ text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
3527
+ text-decoration-thickness: 3px;
3528
+ background: var(--ck-color-suggestion-marker-deletion-background);
3529
+ }
3530
+
3531
+ .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_underline {
3532
+ border: none;
3533
+ }
3534
+
394
3535
  /*
395
3536
  * What you're currently looking at is the source code of a legally protected, proprietary software.
396
3537
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
@@ -728,6 +3869,59 @@
728
3869
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
729
3870
  */
730
3871
 
3872
+ /* We need specificity 020 to beat .ck.ck-button. */
3873
+ .ck.ck-button.ck-confirm-view-submit {
3874
+ color: var(--ck-color-button-save);
3875
+ }
3876
+
3877
+ .ck.ck-button.ck-confirm-view-cancel {
3878
+ color: var(--ck-color-button-cancel);
3879
+ }
3880
+
3881
+ .ck .ck-confirm-view-active {
3882
+ transform: translate3d( -100%, 0, 0 );
3883
+ transition: all 300ms linear;
3884
+ }
3885
+
3886
+ .ck .ck-confirm-view {
3887
+ font-size: var(--ck-font-size-base);
3888
+ position: absolute;
3889
+ display: flex;
3890
+ justify-content: flex-start;
3891
+ top: 0;
3892
+ left: 100%;
3893
+ width: 100%;
3894
+ height: 100%;
3895
+ background-color: var(--ck-color-light-red);
3896
+ }
3897
+
3898
+ .ck .ck-confirm-view .ck-confirm-view-inner {
3899
+ display: flex;
3900
+ flex-direction: column;
3901
+ align-items: center;
3902
+ justify-content: center;
3903
+ padding-top: var(--ck-spacing-standard);
3904
+ height: 100%;
3905
+ width: 100%;
3906
+
3907
+ /* Maximum height of confirmation (in case with such long comment). */
3908
+ max-height: 400px;
3909
+ }
3910
+
3911
+ .ck .ck-confirm-view p {
3912
+ font-weight: bold;
3913
+ margin: 0;
3914
+ }
3915
+
3916
+ /*
3917
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3918
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3919
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3920
+ *
3921
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3922
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3923
+ */
3924
+
731
3925
  /*
732
3926
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
733
3927
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -1522,10 +4716,6 @@ With track-changes feature enabled, we need to distinguish various types of anno
1522
4716
  }
1523
4717
  }
1524
4718
 
1525
- .ck .ck-comment__wrapper.ck-comment--remove-confirmation {
1526
- transform: translate3d( -100%, 0, 0 );
1527
- }
1528
-
1529
4719
  .ck .ck-comment__wrapper:first-of-type {
1530
4720
  border-top-right-radius: var(--ck-border-radius);
1531
4721
  border-top-left-radius: var(--ck-border-radius);
@@ -1552,14 +4742,6 @@ With track-changes feature enabled, we need to distinguish various types of anno
1552
4742
  background-color: var(--ck-color-comment-separator);
1553
4743
  }
1554
4744
 
1555
- .ck .ck-comment--remove {
1556
- background-color: var(--ck-color-comment-remove-background);
1557
- }
1558
-
1559
- .ck .ck-comment--remove::after {
1560
- opacity: 0;
1561
- }
1562
-
1563
4745
  .ck .ck-comment--edit {
1564
4746
  background-color: var(--ck-color-comment-input-background);
1565
4747
  }
@@ -1943,49 +5125,15 @@ We are styling resetting list-style because of parent <ul> element. */
1943
5125
  --ck-color-thread-header-active-background: var(--ck-color-unlinked-active-background);
1944
5126
  }
1945
5127
 
1946
- .ck .ck-thread--remove-confirmation .ck-thread__container {
1947
- transform: translate3d( -100%, 0, 0 );
1948
- }
1949
-
1950
5128
  /* We need specificity 020 to beat .ck.ck-button. */
1951
- .ck.ck-button.ck-thread__remove-confirm-submit {
5129
+ .ck.ck-button.ck-confirm-view-submit {
1952
5130
  color: var(--ck-color-button-save);
1953
5131
  }
1954
5132
 
1955
- .ck.ck-button.ck-thread__remove-confirm-cancel {
5133
+ .ck.ck-button.ck-confirm-view-cancel {
1956
5134
  color: var(--ck-color-button-cancel);
1957
5135
  }
1958
5136
 
1959
- .ck .ck-thread__remove-confirm {
1960
- font-size: var(--ck-font-size-base);
1961
- position: absolute;
1962
- display: flex;
1963
- justify-content: flex-start;
1964
- top: 0;
1965
- left: 100%;
1966
- width: 100%;
1967
- height: 100%;
1968
- background-color: var(--ck-color-comment-remove-background);
1969
- }
1970
-
1971
- .ck .ck-thread__remove-confirm .ck-thread__remove-confirm-inner {
1972
- display: flex;
1973
- flex-direction: column;
1974
- align-items: center;
1975
- justify-content: center;
1976
- padding-top: var(--ck-spacing-standard);
1977
- height: 100%;
1978
- width: 100%;
1979
-
1980
- /* Maximum height of confirmation (in case with such long comment). */
1981
- max-height: 400px;
1982
- }
1983
-
1984
- .ck .ck-thread__remove-confirm p {
1985
- font-weight: bold;
1986
- margin: 0;
1987
- }
1988
-
1989
5137
  /*
1990
5138
  * What you're currently looking at is the source code of a legally protected, proprietary software.
1991
5139
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
@@ -4593,7 +7741,7 @@ See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. *
4593
7741
 
4594
7742
  /* A confirmation that shows up when attempting to delete a revision */
4595
7743
 
4596
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm {
7744
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view {
4597
7745
  display: flex;
4598
7746
  flex-direction: row;
4599
7747
  justify-content: space-around;
@@ -4611,14 +7759,14 @@ See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. *
4611
7759
  user-select: none;
4612
7760
  }
4613
7761
 
4614
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner {
7762
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner {
4615
7763
  text-align: center;
4616
7764
  margin-top: var(--ck-spacing-small);
4617
7765
 
4618
7766
  /* Confirmation message */
4619
7767
  }
4620
7768
 
4621
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner p {
7769
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner p {
4622
7770
  margin: 0;
4623
7771
  font-weight: bold;
4624
7772
  color: var(--ck-color-text);
@@ -4626,21 +7774,21 @@ See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. *
4626
7774
 
4627
7775
  /* Confirmation buttons */
4628
7776
 
4629
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions {
7777
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions {
4630
7778
  display: flex;
4631
7779
  flex-direction: row;
4632
7780
  justify-content: space-evenly;
4633
7781
  }
4634
7782
 
4635
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button:hover, .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button:focus, .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button:active {
7783
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button:hover, .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button:focus, .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button:active {
4636
7784
  background: var(--ck-revision-history-revision-delete-confirmation-active-button-background);
4637
7785
  }
4638
7786
 
4639
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button.ck-thread__remove-confirm-submit {
7787
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button.ck-confirm-view-submit {
4640
7788
  color: var(--ck-color-button-save);
4641
7789
  }
4642
7790
 
4643
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button.ck-thread__remove-confirm-cancel {
7791
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button.ck-confirm-view-cancel {
4644
7792
  color: var(--ck-color-button-cancel);
4645
7793
  }
4646
7794