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

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 +2698 -53
  7. package/dist/ckeditor5-premium-features.css +3109 -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,3053 @@
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
+ }
2898
+
2899
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list {
2900
+ position: relative;
2901
+ height: 100%;
2902
+ overflow: auto;
2903
+ }
2904
+
2905
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item {
2906
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
2907
+ border-bottom: 1px solid var(--ck-color-base-border);
2908
+ box-shadow: 3px 0px 0px 0px transparent inset;
2909
+ opacity: 0;
2910
+ visibility: hidden;
2911
+
2912
+ transition: box-shadow 0.3s ease-in-out;
2913
+ }
2914
+
2915
+ @media (prefers-reduced-motion: reduce) {
2916
+
2917
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item {
2918
+ transition-duration: 0s;
2919
+ }
2920
+ }
2921
+
2922
+ .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 {
2923
+ opacity: 1;
2924
+ visibility: visible;
2925
+
2926
+ transition: box-shadow 0.3s ease-in-out,
2927
+ opacity 0.1s calc(0.05s * var(--ck-ai-check-list-item-index)),
2928
+ visibility 0.1s calc(0.05s * var(--ck-ai-check-list-item-index));
2929
+ }
2930
+
2931
+ @media (prefers-reduced-motion: reduce) {
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_rendered {
2934
+ opacity: 1;
2935
+ visibility: visible;
2936
+ }
2937
+ }
2938
+
2939
+ .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 {
2940
+ box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
2941
+ }
2942
+
2943
+ .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,
2944
+ .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 {
2945
+ white-space: normal;
2946
+ line-height: 1.3;
2947
+ }
2948
+
2949
+ .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 {
2950
+ display: flex;
2951
+ justify-content: space-between;
2952
+ margin-block-end: var(--ck-spacing-tiny);
2953
+ }
2954
+
2955
+ .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 {
2956
+ flex-grow: 1;
2957
+ color: var(--ck-ai-check-list-item-title-color);
2958
+ font-weight: 700;
2959
+ }
2960
+
2961
+ .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 {
2962
+ --ck-icon-size: 20px;
2963
+
2964
+ flex-shrink: 0;
2965
+ margin-inline-start: var(--ck-spacing-small);
2966
+ color: var(--ck-ai-check-list-item-title-icon-color);
2967
+
2968
+ opacity: 0;
2969
+ visibility: hidden;
2970
+
2971
+ transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
2972
+ }
2973
+
2974
+ @media (prefers-reduced-motion: reduce) {
2975
+
2976
+ .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 {
2977
+ transition-duration: 0s;
2978
+ }
2979
+ }
2980
+
2981
+ .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 {
2982
+ box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
2983
+ }
2984
+
2985
+ .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 {
2986
+ opacity: 1;
2987
+ visibility: visible;
2988
+ }
2989
+
2990
+ .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 {
2991
+ color: var(--ck-ai-check-list-item-description-color);
2992
+ }
2993
+
2994
+ /* Parameterized form view. */
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-parameterized .ck.ck-form__row {
2997
+ padding-left: 0;
2998
+ padding-right: 0;
2999
+ }
3000
+
3001
+ .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 {
3002
+ flex: 1;
3003
+ }
3004
+
3005
+ .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 {
3006
+ width: 100%;
3007
+ }
3008
+
3009
+ .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 {
3010
+ border-color: hsl(216, 5%, 81%);
3011
+ }
3012
+
3013
+ .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 {
3014
+ width: 100%;
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-button {
3018
+ flex-shrink: 0;
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-custom-actions .ck.ck-form__row .ck.ck-input.ck-textarea.ck-review-mode__prompt-input {
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-custom-actions .ck.ck-form__row .ck-ai-review-mode__check-list-item-custom-actions-footer {
3026
+ display: flex;
3027
+ width: 100%;
3028
+ align-items: center;
3029
+ justify-content: space-between;
3030
+ }
3031
+
3032
+ .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 {
3033
+ display: flex;
3034
+ gap: var(--ck-spacing-small);
3035
+ }
3036
+
3037
+ /*
3038
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3039
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3040
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3041
+ *
3042
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3043
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3044
+ */
3045
+
3046
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run {
3047
+ position: relative;
3048
+ height: 100%;
3049
+ overflow: auto;
3050
+ display: flex;
3051
+ flex-direction: column;
3052
+ }
3053
+
3054
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
3055
+ overflow: hidden;
3056
+ }
3057
+
3058
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result {
3059
+ opacity: 0;
3060
+ visibility: hidden;
3061
+ box-shadow: 3px 0px 0px 0px transparent inset;
3062
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
3063
+
3064
+ animation: ck-ai-check-run-list-item-show 0.25s 0.1s forwards;
3065
+
3066
+ transition: box-shadow 0.3s ease-in-out;
3067
+ transition-behavior: allow-discrete;
3068
+ }
3069
+
3070
+ @media (prefers-reduced-motion: reduce) {
3071
+
3072
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result {
3073
+ animation: none;
3074
+ opacity: 1;
3075
+ visibility: visible;
3076
+ transition-duration: 0s;
3077
+ }
3078
+ }
3079
+
3080
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:not(:first-child) {
3081
+ border-top: 1px solid var(--ck-color-base-border);
3082
+ }
3083
+
3084
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:last-child {
3085
+ border-bottom: 1px solid var(--ck-color-base-border);
3086
+ }
3087
+
3088
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result .ck-suggestion-marker {
3089
+ white-space: break-spaces;
3090
+ }
3091
+
3092
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:hover {
3093
+ box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
3094
+ }
3095
+
3096
+ .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 {
3097
+ box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
3098
+ }
3099
+
3100
+ .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 {
3101
+ overflow: hidden;
3102
+ }
3103
+
3104
+ .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 > * {
3105
+ white-space: normal;
3106
+ }
3107
+
3108
+ .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 {
3109
+ max-width: 125px;
3110
+ max-height: 125px;
3111
+ }
3112
+
3113
+ .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 {
3114
+ margin-top: var(--ck-spacing-standard);
3115
+ display: flex;
3116
+ justify-content: space-between;
3117
+ align-items: center;
3118
+ gap: var(--ck-spacing-standard);
3119
+ }
3120
+
3121
+ .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 {
3122
+ display: flex;
3123
+ gap: var(--ck-spacing-standard);
3124
+ flex-grow: 1;
3125
+ }
3126
+
3127
+ .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 {
3128
+ --ck-icon-size: 16px;
3129
+ --ck-ui-component-min-height: 1.75em;
3130
+
3131
+ max-height: var(--ck-ui-component-min-height);
3132
+ margin-left: auto;
3133
+ }
3134
+
3135
+ .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 {
3136
+ animation: ck-ai-check-run-item-remove 0.2s forwards;
3137
+ }
3138
+
3139
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-header {
3140
+ display: flex;
3141
+ justify-content: space-between;
3142
+ align-items: center;
3143
+ gap: var(--ck-spacing-standard);
3144
+
3145
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
3146
+ border-bottom: 1px solid var(--ck-color-base-border);
3147
+ }
3148
+
3149
+ .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 {
3150
+ align-self: center;
3151
+ font-weight: bold;
3152
+ white-space: nowrap;
3153
+ overflow: hidden;
3154
+ max-width: 100%;
3155
+ text-overflow: ellipsis;
3156
+ }
3157
+
3158
+ .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 {
3159
+ display: flex;
3160
+ gap: var(--ck-spacing-standard);
3161
+ flex-shrink: 0;
3162
+ align-items: center;
3163
+ /* To prevent jumping when visibility of buttons is changing.
3164
+ TODO: probably it will be replaced with different loader UI. */
3165
+ min-height: 30px;
3166
+ }
3167
+
3168
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-wrapper {
3169
+ position: relative;
3170
+ height: 100%;
3171
+ overflow: auto;
3172
+ }
3173
+
3174
+ .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) ) {
3175
+ overflow: hidden;
3176
+ }
3177
+
3178
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-skeleton-container {
3179
+ position: absolute;
3180
+ width: 100%;
3181
+ top: 0;
3182
+ height: 100%;
3183
+ }
3184
+
3185
+ .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 {
3186
+ position: static;
3187
+ height: auto;
3188
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
3189
+ border-bottom: 1px solid var(--ck-color-base-border);
3190
+ }
3191
+
3192
+ .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 {
3193
+ --ck-ai-skeleton-gap: var(--ck-spacing-small);
3194
+ }
3195
+
3196
+ .ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-error-container {
3197
+ display: flex;
3198
+ flex-direction: column;
3199
+ align-items: flex-end;
3200
+ gap: var(--ck-spacing-medium-small);
3201
+ padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard) var(--ck-spacing-large);
3202
+ }
3203
+
3204
+ .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 {
3205
+ border-bottom: 1px solid var(--ck-color-base-border);
3206
+ }
3207
+
3208
+ .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 {
3209
+ font-size: 11.7px;
3210
+ min-height: unset;
3211
+ border: 1px solid var(--ck-ai-border-color-button);
3212
+ border-radius: var(--ck-border-radius);
3213
+ gap: var(--ck-spacing-small);
3214
+ color: var(--ck-ai-chat-color-text);
3215
+ }
3216
+
3217
+ @keyframes ck-ai-check-run-list-item-show {
3218
+ 0% {
3219
+ opacity: 0;
3220
+ visibility: hidden;
3221
+ }
3222
+ 100% {
3223
+ opacity: 1;
3224
+ visibility: visible;
3225
+ }
3226
+ }
3227
+
3228
+ @keyframes ck-ai-check-run-item-remove {
3229
+ 0% {
3230
+ opacity: 1;
3231
+ visibility: visible;
3232
+ display: block;
3233
+ }
3234
+ 100% {
3235
+ opacity: 0;
3236
+ visibility: hidden;
3237
+ display: none;
3238
+ }
3239
+ }
3240
+
3241
+ /*
3242
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3243
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3244
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3245
+ *
3246
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3247
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3248
+ */
3249
+
3250
+ .ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-header {
3251
+ display: flex;
3252
+ justify-content: space-between;
3253
+ align-items: center;
3254
+ gap: var(--ck-spacing-standard);
3255
+
3256
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
3257
+ border-bottom: 1px solid var(--ck-color-base-border);
3258
+ }
3259
+
3260
+ .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 {
3261
+ align-self: center;
3262
+ white-space: nowrap;
3263
+ overflow: hidden;
3264
+ max-width: 100%;
3265
+ text-overflow: ellipsis;
3266
+ }
3267
+
3268
+ .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 {
3269
+ display: flex;
3270
+ gap: var(--ck-spacing-standard);
3271
+ flex-shrink: 0;
3272
+ }
3273
+
3274
+ .ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-content {
3275
+ padding: var(--ck-spacing-extra-large) var(--ck-spacing-extra-large) 0 var(--ck-spacing-extra-large);
3276
+ text-align: center;
3277
+ }
3278
+
3279
+ .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 {
3280
+ font-size: 20px;
3281
+ line-height: 20px;
3282
+ }
3283
+
3284
+ .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 {
3285
+ margin-top: var(--ck-spacing-large);
3286
+ text-align: center;
3287
+ white-space: normal;
3288
+ }
3289
+
3290
+ /*
3291
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3292
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3293
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3294
+ *
3295
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3296
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3297
+ */
3298
+
3299
+ /*
3300
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3301
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3302
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3303
+ *
3304
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3305
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3306
+ */
3307
+
3308
+ .ck-ai-header {
3309
+ /* Custom values unlike the rest of editor UI. */
3310
+ --ck-ui-component-min-height: 1.7em;
3311
+ --ck-ui-component-min-width: 1.7em;
3312
+
3313
+ /* Custom value. It defaults to the toolbar component height so they look fine on next to each other. */
3314
+ --ck-form-header-height: 3em;
3315
+ --ck-form-header-small-icon-color: hsla(0, 0%, 20%, 1);
3316
+ }
3317
+
3318
+ .ck-ai-header > .ck-button {
3319
+ margin-inline-start: var(--ck-spacing-standard);
3320
+ }
3321
+
3322
+ .ck-ai-header > .ck-button > .ck-button__icon {
3323
+ /* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
3324
+ --ck-icon-font-size: .666em;
3325
+
3326
+ color: var(--ck-ai-chat-color-icon);
3327
+ }
3328
+
3329
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation {
3330
+ /* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
3331
+ font-size: 11.7px;
3332
+ min-height: unset;
3333
+ border: 1px solid var(--ck-ai-border-color-button);
3334
+ border-radius: var(--ck-border-radius);
3335
+ gap: var(--ck-spacing-small);
3336
+ color: var(--ck-ai-chat-color-text);
3337
+ }
3338
+
3339
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation:hover {
3340
+ background-color: var(--ck-ai-chat-button-active-background-color);
3341
+ }
3342
+
3343
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__label {
3344
+ /* Custom value unlike the rest of editor UI. */
3345
+ line-height: 1.4em;
3346
+ }
3347
+
3348
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__icon {
3349
+ /* Custom value unlike the rest of editor UI (defaults to 14px). See how it's used in the icon.css */
3350
+ --ck-icon-font-size: .632em;
3351
+
3352
+ margin-inline-end: 0;
3353
+ color: var(--ck-ai-chat-color-text);
3354
+ }
3355
+
3356
+ .ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > span.ck-button__label {
3357
+ position: relative;
3358
+ top: 1px;
3359
+ }
3360
+
3361
+ .ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back {
3362
+ margin-inline-start: 0;
3363
+ margin-inline-end: var(--ck-spacing-small);
3364
+ }
3365
+
3366
+ .ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back > .ck-button__icon {
3367
+ /* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
3368
+ --ck-icon-font-size: 13px;
3369
+
3370
+ color: var(--ck-form-header-small-icon-color);
3371
+ }
3372
+
3373
+ .ck-ai-header.ck-ai-header_small .ck-form__header__label {
3374
+ --ck-font-size-base: 13px;
3375
+ --ck-font-face: var(--ck-ai-chat-font-family);
3376
+
3377
+ font-weight: 500;
3378
+ }
3379
+
3380
+ .ck-ai-header .ck-form__header__label:not(:last-child) {
3381
+ margin-inline-end: var(--ck-spacing-small);
3382
+ }
3383
+
3384
+ .ck {
3385
+ --ck-color-ai-review-mode-suggestion: hsla(263, 59%, 52%, 0.5);
3386
+ }
3387
+
3388
+ .ck .ck-ai-review-mode {
3389
+ max-height: 100%;
3390
+ height: 100%;
3391
+ display: flex;
3392
+ flex-direction: column;
3393
+ }
3394
+
3395
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_add {
3396
+ border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
3397
+ }
3398
+
3399
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_hide {
3400
+ display: none;
3401
+ }
3402
+
3403
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_strikethrough {
3404
+ position: relative;
3405
+ }
3406
+
3407
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_strikethrough:before {
3408
+ border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
3409
+ position: absolute;
3410
+ content: "";
3411
+ width: 100%;
3412
+ height: 60%;
3413
+ }
3414
+
3415
+ .ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_underline {
3416
+ border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
3417
+ }
3418
+
3419
+ .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_add {
3420
+ white-space: break-spaces;
3421
+ border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border);
3422
+ border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border);
3423
+ background: var(--ck-color-suggestion-marker-insertion-background);
3424
+ }
3425
+
3426
+ .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_hide,
3427
+ .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_strikethrough {
3428
+ white-space: break-spaces;
3429
+ border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border);
3430
+ border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border);
3431
+ text-decoration: line-through;
3432
+ text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
3433
+ text-decoration-thickness: 3px;
3434
+ background: var(--ck-color-suggestion-marker-deletion-background);
3435
+ }
3436
+
3437
+ .ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_underline {
3438
+ border: none;
3439
+ }
3440
+
394
3441
  /*
395
3442
  * What you're currently looking at is the source code of a legally protected, proprietary software.
396
3443
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
@@ -728,6 +3775,59 @@
728
3775
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
729
3776
  */
730
3777
 
3778
+ /* We need specificity 020 to beat .ck.ck-button. */
3779
+ .ck.ck-button.ck-confirm-view-submit {
3780
+ color: var(--ck-color-button-save);
3781
+ }
3782
+
3783
+ .ck.ck-button.ck-confirm-view-cancel {
3784
+ color: var(--ck-color-button-cancel);
3785
+ }
3786
+
3787
+ .ck .ck-confirm-view-active {
3788
+ transform: translate3d( -100%, 0, 0 );
3789
+ transition: all 300ms linear;
3790
+ }
3791
+
3792
+ .ck .ck-confirm-view {
3793
+ font-size: var(--ck-font-size-base);
3794
+ position: absolute;
3795
+ display: flex;
3796
+ justify-content: flex-start;
3797
+ top: 0;
3798
+ left: 100%;
3799
+ width: 100%;
3800
+ height: 100%;
3801
+ background-color: var(--ck-color-light-red);
3802
+ }
3803
+
3804
+ .ck .ck-confirm-view .ck-confirm-view-inner {
3805
+ display: flex;
3806
+ flex-direction: column;
3807
+ align-items: center;
3808
+ justify-content: center;
3809
+ padding-top: var(--ck-spacing-standard);
3810
+ height: 100%;
3811
+ width: 100%;
3812
+
3813
+ /* Maximum height of confirmation (in case with such long comment). */
3814
+ max-height: 400px;
3815
+ }
3816
+
3817
+ .ck .ck-confirm-view p {
3818
+ font-weight: bold;
3819
+ margin: 0;
3820
+ }
3821
+
3822
+ /*
3823
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
3824
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
3825
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
3826
+ *
3827
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3828
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
3829
+ */
3830
+
731
3831
  /*
732
3832
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
733
3833
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -1522,10 +4622,6 @@ With track-changes feature enabled, we need to distinguish various types of anno
1522
4622
  }
1523
4623
  }
1524
4624
 
1525
- .ck .ck-comment__wrapper.ck-comment--remove-confirmation {
1526
- transform: translate3d( -100%, 0, 0 );
1527
- }
1528
-
1529
4625
  .ck .ck-comment__wrapper:first-of-type {
1530
4626
  border-top-right-radius: var(--ck-border-radius);
1531
4627
  border-top-left-radius: var(--ck-border-radius);
@@ -1552,14 +4648,6 @@ With track-changes feature enabled, we need to distinguish various types of anno
1552
4648
  background-color: var(--ck-color-comment-separator);
1553
4649
  }
1554
4650
 
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
4651
  .ck .ck-comment--edit {
1564
4652
  background-color: var(--ck-color-comment-input-background);
1565
4653
  }
@@ -1943,49 +5031,15 @@ We are styling resetting list-style because of parent <ul> element. */
1943
5031
  --ck-color-thread-header-active-background: var(--ck-color-unlinked-active-background);
1944
5032
  }
1945
5033
 
1946
- .ck .ck-thread--remove-confirmation .ck-thread__container {
1947
- transform: translate3d( -100%, 0, 0 );
1948
- }
1949
-
1950
5034
  /* We need specificity 020 to beat .ck.ck-button. */
1951
- .ck.ck-button.ck-thread__remove-confirm-submit {
5035
+ .ck.ck-button.ck-confirm-view-submit {
1952
5036
  color: var(--ck-color-button-save);
1953
5037
  }
1954
5038
 
1955
- .ck.ck-button.ck-thread__remove-confirm-cancel {
5039
+ .ck.ck-button.ck-confirm-view-cancel {
1956
5040
  color: var(--ck-color-button-cancel);
1957
5041
  }
1958
5042
 
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
5043
  /*
1990
5044
  * What you're currently looking at is the source code of a legally protected, proprietary software.
1991
5045
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
@@ -4593,7 +7647,7 @@ See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. *
4593
7647
 
4594
7648
  /* A confirmation that shows up when attempting to delete a revision */
4595
7649
 
4596
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm {
7650
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view {
4597
7651
  display: flex;
4598
7652
  flex-direction: row;
4599
7653
  justify-content: space-around;
@@ -4611,14 +7665,14 @@ See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. *
4611
7665
  user-select: none;
4612
7666
  }
4613
7667
 
4614
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner {
7668
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner {
4615
7669
  text-align: center;
4616
7670
  margin-top: var(--ck-spacing-small);
4617
7671
 
4618
7672
  /* Confirmation message */
4619
7673
  }
4620
7674
 
4621
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner p {
7675
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner p {
4622
7676
  margin: 0;
4623
7677
  font-weight: bold;
4624
7678
  color: var(--ck-color-text);
@@ -4626,21 +7680,21 @@ See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. *
4626
7680
 
4627
7681
  /* Confirmation buttons */
4628
7682
 
4629
- .ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions {
7683
+ .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions {
4630
7684
  display: flex;
4631
7685
  flex-direction: row;
4632
7686
  justify-content: space-evenly;
4633
7687
  }
4634
7688
 
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 {
7689
+ .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
7690
  background: var(--ck-revision-history-revision-delete-confirmation-active-button-background);
4637
7691
  }
4638
7692
 
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 {
7693
+ .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
7694
  color: var(--ck-color-button-save);
4641
7695
  }
4642
7696
 
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 {
7697
+ .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
7698
  color: var(--ck-color-button-cancel);
4645
7699
  }
4646
7700