@qarakash/blockwriteai 1.0.7

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.
@@ -0,0 +1,3762 @@
1
+ :root {
2
+ --rbe-font: Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
3
+ --rbe-bg: #f6f8fb;
4
+ --rbe-surface: #ffffff;
5
+ --rbe-surface-soft: #f1f5f9;
6
+ --rbe-text: #172033;
7
+ --rbe-muted: #667085;
8
+ --rbe-border: #d7dee8;
9
+ --rbe-border-strong: #afbac9;
10
+ --rbe-accent: #2563eb;
11
+ --rbe-accent-soft: #e7efff;
12
+ --rbe-success: #07845f;
13
+ --rbe-warning: #b76b00;
14
+ --rbe-danger: #cf2f2f;
15
+ --rbe-shadow: 0 16px 48px rgba(15, 23, 42, 0.14);
16
+ --rbe-radius: 8px;
17
+ --rbe-min-height: 320px;
18
+ }
19
+
20
+ .rbe,
21
+ .rbe * {
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ .rbe-sr-only {
26
+ position: absolute;
27
+ width: 1px;
28
+ height: 1px;
29
+ padding: 0;
30
+ margin: -1px;
31
+ overflow: hidden;
32
+ clip: rect(0, 0, 0, 0);
33
+ white-space: nowrap;
34
+ border: 0;
35
+ }
36
+
37
+ .rbe-shell,
38
+ .rbe-shell * {
39
+ box-sizing: border-box;
40
+ }
41
+
42
+ .rbe-shell {
43
+ width: 100%;
44
+ max-width: var(--rbe-shell-max-width, none);
45
+ margin: 0 auto;
46
+ min-width: 0;
47
+ color: var(--rbe-text);
48
+ font-family: var(--rbe-font);
49
+ }
50
+
51
+ .rbe-shell-brand {
52
+ display: grid;
53
+ gap: 4px;
54
+ margin-bottom: 14px;
55
+ min-width: 0;
56
+ }
57
+
58
+ .rbe-shell-logo {
59
+ width: min(252px, 100%);
60
+ height: auto;
61
+ display: block;
62
+ }
63
+
64
+ .rbe-shell-title {
65
+ display: inline-flex;
66
+ align-items: center;
67
+ color: #102033;
68
+ font-size: 26px;
69
+ font-weight: 850;
70
+ line-height: 1.1;
71
+ }
72
+
73
+ .rbe-shell-subtitle {
74
+ margin: 4px 0 0;
75
+ color: var(--rbe-muted);
76
+ font-size: 16px;
77
+ line-height: 1.5;
78
+ }
79
+
80
+ .rbe-shell-panel {
81
+ min-width: 0;
82
+ overflow: visible;
83
+ border: 1px solid var(--rbe-border);
84
+ border-radius: var(--rbe-radius);
85
+ background: var(--rbe-surface);
86
+ }
87
+
88
+ .rbe-shell-panel-title {
89
+ display: grid;
90
+ grid-template-columns: minmax(90px, 1fr) minmax(180px, 420px) minmax(160px, 1fr);
91
+ align-items: center;
92
+ gap: 8px;
93
+ padding: 11px 12px;
94
+ border-bottom: 1px solid var(--rbe-border);
95
+ color: var(--rbe-text);
96
+ font-weight: 760;
97
+ }
98
+
99
+ .rbe-shell-heading {
100
+ grid-column: 1;
101
+ justify-self: start;
102
+ }
103
+
104
+ .rbe-shell-status {
105
+ grid-column: 3;
106
+ justify-self: end;
107
+ color: var(--rbe-muted);
108
+ font-size: 13px;
109
+ font-weight: 520;
110
+ text-align: right;
111
+ white-space: nowrap;
112
+ }
113
+
114
+ .rbe-shell-progress {
115
+ grid-column: 2;
116
+ display: grid;
117
+ gap: 5px;
118
+ justify-self: center;
119
+ width: min(100%, 390px);
120
+ min-width: 0;
121
+ }
122
+
123
+ .rbe-shell-progress[hidden] {
124
+ display: none !important;
125
+ }
126
+
127
+ .rbe-shell-progress-text {
128
+ overflow: hidden;
129
+ color: #475467;
130
+ font-size: 11px;
131
+ font-weight: 760;
132
+ line-height: 1.2;
133
+ text-align: center;
134
+ text-overflow: ellipsis;
135
+ white-space: nowrap;
136
+ }
137
+
138
+ .rbe-shell-progress-track {
139
+ position: relative;
140
+ height: 5px;
141
+ overflow: hidden;
142
+ border-radius: 999px;
143
+ background: #eef2f7;
144
+ }
145
+
146
+ .rbe-shell-progress-track::before {
147
+ content: "";
148
+ position: absolute;
149
+ inset: 0;
150
+ background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), rgba(245, 158, 11, 0.18), rgba(34, 197, 94, 0.18));
151
+ }
152
+
153
+ .rbe-shell-progress-track span {
154
+ position: relative;
155
+ display: block;
156
+ width: 42%;
157
+ height: 100%;
158
+ border-radius: inherit;
159
+ background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
160
+ animation: rbe-shell-progress-sweep 1.1s ease-in-out infinite;
161
+ }
162
+
163
+ @keyframes rbe-shell-progress-sweep {
164
+ 0% {
165
+ transform: translateX(-115%);
166
+ }
167
+
168
+ 55% {
169
+ width: 64%;
170
+ }
171
+
172
+ 100% {
173
+ transform: translateX(245%);
174
+ }
175
+ }
176
+
177
+ .rbe-shell-editor-wrap {
178
+ min-width: 0;
179
+ padding: 12px;
180
+ }
181
+
182
+ .rbe {
183
+ position: relative;
184
+ width: 100%;
185
+ max-width: 100%;
186
+ min-width: 0;
187
+ min-height: var(--rbe-min-height);
188
+ color: var(--rbe-text);
189
+ font-family: var(--rbe-font);
190
+ line-height: 1.58;
191
+ overflow-wrap: anywhere;
192
+ }
193
+
194
+ .rbe-editor-toolbar {
195
+ position: relative;
196
+ display: flex;
197
+ flex-wrap: wrap;
198
+ align-items: center;
199
+ justify-content: flex-end;
200
+ gap: 6px;
201
+ margin-bottom: 8px;
202
+ }
203
+
204
+ .rbe-history-btn {
205
+ appearance: none;
206
+ display: inline-flex;
207
+ align-items: center;
208
+ gap: 7px;
209
+ max-width: 100%;
210
+ min-height: 30px;
211
+ border: 1px solid var(--rbe-border);
212
+ border-radius: 7px;
213
+ background: #ffffff;
214
+ color: var(--rbe-text);
215
+ padding: 4px 10px;
216
+ font: inherit;
217
+ font-size: 13px;
218
+ font-weight: 740;
219
+ cursor: pointer;
220
+ }
221
+
222
+ .rbe-fa-icon {
223
+ display: inline-grid;
224
+ place-items: center;
225
+ width: 1em;
226
+ min-width: 1em;
227
+ line-height: 1;
228
+ }
229
+
230
+ .rbe-history-btn:hover:not(:disabled) {
231
+ border-color: var(--rbe-accent);
232
+ background: var(--rbe-accent-soft);
233
+ }
234
+
235
+ .rbe-save-btn {
236
+ border-color: var(--rbe-accent);
237
+ background: var(--rbe-accent);
238
+ color: #ffffff;
239
+ }
240
+
241
+ .rbe-save-btn:hover:not(:disabled) {
242
+ background: #1d4ed8;
243
+ color: #ffffff;
244
+ }
245
+
246
+ .rbe-export-menu-wrap {
247
+ position: relative;
248
+ display: inline-flex;
249
+ }
250
+
251
+ .rbe-export-btn {
252
+ width: 34px;
253
+ min-width: 34px;
254
+ justify-content: center;
255
+ padding-left: 0;
256
+ padding-right: 0;
257
+ }
258
+
259
+ .rbe-export-html-btn {
260
+ width: 34px;
261
+ min-width: 34px;
262
+ justify-content: center;
263
+ padding-left: 0;
264
+ padding-right: 0;
265
+ }
266
+
267
+ .rbe-export-menu {
268
+ position: absolute;
269
+ top: calc(100% + 6px);
270
+ right: 0;
271
+ z-index: 45;
272
+ display: flex;
273
+ gap: 6px;
274
+ padding: 6px;
275
+ border: 1px solid var(--rbe-border);
276
+ border-radius: 10px;
277
+ background: #ffffff;
278
+ box-shadow: var(--rbe-shadow);
279
+ }
280
+
281
+ .rbe-export-menu[hidden] {
282
+ display: none !important;
283
+ }
284
+
285
+ .rbe-export-option {
286
+ appearance: none;
287
+ width: 34px;
288
+ height: 34px;
289
+ display: inline-grid;
290
+ place-items: center;
291
+ border: 1px solid var(--rbe-border);
292
+ border-radius: 8px;
293
+ background: #ffffff;
294
+ color: #111827;
295
+ cursor: pointer;
296
+ }
297
+
298
+ .rbe-export-option:hover,
299
+ .rbe-export-option:focus-visible {
300
+ border-color: #111827;
301
+ background: #111827;
302
+ color: #ffffff;
303
+ }
304
+
305
+ .rbe-html-preview-modal {
306
+ position: fixed;
307
+ inset: 0;
308
+ z-index: 100000;
309
+ display: grid;
310
+ place-items: center;
311
+ padding: 22px;
312
+ background: rgba(15, 23, 42, 0.58);
313
+ }
314
+
315
+ .rbe-html-preview-shell {
316
+ width: min(1180px, 100%);
317
+ height: min(860px, calc(100vh - 44px));
318
+ display: grid;
319
+ grid-template-rows: auto minmax(0, 1fr);
320
+ overflow: hidden;
321
+ border: 1px solid var(--rbe-border);
322
+ border-radius: 12px;
323
+ background: #ffffff;
324
+ box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
325
+ }
326
+
327
+ .rbe-html-preview-header {
328
+ display: flex;
329
+ align-items: center;
330
+ justify-content: space-between;
331
+ gap: 12px;
332
+ padding: 12px 14px;
333
+ border-bottom: 1px solid var(--rbe-border);
334
+ color: var(--rbe-ink);
335
+ }
336
+
337
+ .rbe-html-preview-close {
338
+ appearance: none;
339
+ width: 34px;
340
+ height: 34px;
341
+ display: inline-grid;
342
+ place-items: center;
343
+ border: 1px solid var(--rbe-border);
344
+ border-radius: 999px;
345
+ background: #ffffff;
346
+ color: var(--rbe-ink);
347
+ cursor: pointer;
348
+ }
349
+
350
+ .rbe-html-preview-close:hover,
351
+ .rbe-html-preview-close:focus-visible {
352
+ border-color: #111827;
353
+ background: #111827;
354
+ color: #ffffff;
355
+ }
356
+
357
+ .rbe-html-preview-body {
358
+ min-height: 0;
359
+ background: #eef3f8;
360
+ }
361
+
362
+ .rbe-html-preview-frame {
363
+ width: 100%;
364
+ height: 100%;
365
+ display: block;
366
+ border: 0;
367
+ background: #eef3f8;
368
+ }
369
+
370
+ .rbe-clear-editor-btn {
371
+ width: 30px;
372
+ min-width: 30px;
373
+ justify-content: center;
374
+ padding-left: 0;
375
+ padding-right: 0;
376
+ color: var(--rbe-danger);
377
+ }
378
+
379
+ .rbe-clear-editor-btn:hover:not(:disabled) {
380
+ border-color: var(--rbe-danger);
381
+ background: #fff1f1;
382
+ color: #b42318;
383
+ }
384
+
385
+ .rbe-history-btn:disabled {
386
+ cursor: not-allowed;
387
+ opacity: 0.45;
388
+ }
389
+
390
+ .rbe-history-panel {
391
+ position: absolute;
392
+ top: calc(100% + 6px);
393
+ right: 0;
394
+ z-index: 25;
395
+ width: min(320px, calc(100vw - 32px));
396
+ max-height: 320px;
397
+ overflow: auto;
398
+ display: grid;
399
+ gap: 6px;
400
+ padding: 10px;
401
+ border: 1px solid var(--rbe-border);
402
+ border-radius: 10px;
403
+ background: #ffffff;
404
+ box-shadow: var(--rbe-shadow);
405
+ }
406
+
407
+ .rbe-history-panel[hidden] {
408
+ display: none;
409
+ }
410
+
411
+ .rbe-history-panel > strong {
412
+ font-size: 13px;
413
+ }
414
+
415
+ .rbe-history-empty {
416
+ color: var(--rbe-muted);
417
+ font-size: 12px;
418
+ }
419
+
420
+ .rbe-history-row {
421
+ display: grid;
422
+ grid-template-columns: minmax(0, 1fr) 34px;
423
+ gap: 6px;
424
+ align-items: stretch;
425
+ }
426
+
427
+ .rbe-history-restore {
428
+ display: flex;
429
+ justify-content: space-between;
430
+ gap: 10px;
431
+ align-items: center;
432
+ width: 100%;
433
+ border: 1px solid var(--rbe-border);
434
+ border-radius: 8px;
435
+ background: #fbfdff;
436
+ color: var(--rbe-text);
437
+ padding: 8px;
438
+ font: inherit;
439
+ font-weight: 680;
440
+ cursor: pointer;
441
+ text-align: left;
442
+ }
443
+
444
+ .rbe-history-restore:hover {
445
+ border-color: var(--rbe-accent);
446
+ background: var(--rbe-accent-soft);
447
+ }
448
+
449
+ .rbe-history-restore small {
450
+ color: var(--rbe-muted);
451
+ text-align: right;
452
+ line-height: 1.25;
453
+ }
454
+
455
+ .rbe-history-restore span {
456
+ display: grid;
457
+ gap: 2px;
458
+ }
459
+
460
+ .rbe-history-restore em {
461
+ color: var(--rbe-muted);
462
+ font-size: 12px;
463
+ font-style: normal;
464
+ }
465
+
466
+ .rbe-history-delete,
467
+ .rbe-history-clear {
468
+ appearance: none;
469
+ border: 1px solid var(--rbe-border);
470
+ background: #ffffff;
471
+ color: var(--rbe-muted);
472
+ font: inherit;
473
+ cursor: pointer;
474
+ }
475
+
476
+ .rbe-history-delete {
477
+ display: grid;
478
+ place-items: center;
479
+ min-height: 100%;
480
+ border-radius: 8px;
481
+ padding: 0;
482
+ }
483
+
484
+ .rbe-history-delete:hover {
485
+ border-color: var(--rbe-danger);
486
+ background: #fff5f5;
487
+ color: var(--rbe-danger);
488
+ }
489
+
490
+ .rbe-history-clear {
491
+ display: inline-flex;
492
+ justify-content: center;
493
+ align-items: center;
494
+ gap: 7px;
495
+ min-height: 34px;
496
+ margin-top: 4px;
497
+ border-radius: 8px;
498
+ color: var(--rbe-danger);
499
+ font-size: 13px;
500
+ font-weight: 740;
501
+ }
502
+
503
+ .rbe-history-clear:hover:not(:disabled) {
504
+ border-color: var(--rbe-danger);
505
+ background: #fff5f5;
506
+ }
507
+
508
+ .rbe-history-clear:disabled {
509
+ cursor: not-allowed;
510
+ opacity: 0.48;
511
+ }
512
+
513
+ .rbe-comment-modal {
514
+ position: fixed;
515
+ inset: 0;
516
+ z-index: 2147483004;
517
+ display: grid;
518
+ place-items: center;
519
+ background: rgba(15, 23, 42, 0.36);
520
+ padding: 18px;
521
+ }
522
+
523
+ .rbe-comment-modal[hidden] {
524
+ display: none;
525
+ }
526
+
527
+ .rbe-comment-dialog {
528
+ width: min(460px, 100%);
529
+ }
530
+
531
+ .rbe-comment-content {
532
+ border-radius: 10px;
533
+ background: #ffffff;
534
+ box-shadow: var(--rbe-shadow);
535
+ overflow: hidden;
536
+ }
537
+
538
+ .rbe-comment-header,
539
+ .rbe-comment-footer {
540
+ display: flex;
541
+ align-items: center;
542
+ justify-content: space-between;
543
+ gap: 10px;
544
+ padding: 12px;
545
+ border-bottom: 1px solid var(--rbe-border);
546
+ }
547
+
548
+ .rbe-comment-footer {
549
+ justify-content: flex-end;
550
+ border-top: 1px solid var(--rbe-border);
551
+ border-bottom: 0;
552
+ }
553
+
554
+ .rbe-comment-body {
555
+ padding: 12px;
556
+ }
557
+
558
+ .rbe-comment-input {
559
+ min-height: 96px;
560
+ }
561
+
562
+ .rbe-link-modal-label {
563
+ display: block;
564
+ margin-bottom: 6px;
565
+ color: var(--rbe-muted);
566
+ font-size: 12px;
567
+ font-weight: 740;
568
+ }
569
+
570
+ .rbe-link-input.is-invalid {
571
+ border-color: var(--rbe-danger);
572
+ box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
573
+ }
574
+
575
+ .rbe-comment-close {
576
+ width: 30px;
577
+ height: 30px;
578
+ display: grid;
579
+ place-items: center;
580
+ border: 1px solid var(--rbe-border);
581
+ border-radius: 7px;
582
+ background: #ffffff;
583
+ color: var(--rbe-text);
584
+ cursor: pointer;
585
+ }
586
+
587
+ .rbe-canvas {
588
+ min-height: var(--rbe-min-height);
589
+ max-height: var(--rbe-max-height, 680px);
590
+ overflow-y: auto;
591
+ overflow-x: hidden;
592
+ padding: 18px 12px 36px;
593
+ background: var(--rbe-surface);
594
+ border: 1px solid var(--rbe-border);
595
+ border-radius: var(--rbe-radius);
596
+ }
597
+
598
+ .rbe-block {
599
+ position: relative;
600
+ display: grid;
601
+ grid-template-columns: 42px minmax(0, 1fr);
602
+ gap: 8px;
603
+ min-height: 44px;
604
+ padding: 4px 8px 4px 0;
605
+ border-radius: var(--rbe-radius);
606
+ }
607
+
608
+ .rbe-block + .rbe-block {
609
+ margin-top: 15px;
610
+ }
611
+
612
+ .rbe-block-actions {
613
+ position: absolute;
614
+ top: -25px;
615
+ right: 12px;
616
+ z-index: 8;
617
+ display: flex;
618
+ gap: 4px;
619
+ padding: 4px;
620
+ border: 1px solid var(--rbe-border);
621
+ border-radius: 8px;
622
+ background: rgba(255, 255, 255, 0.96);
623
+ box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
624
+ opacity: 0;
625
+ pointer-events: none;
626
+ transform: translateY(3px);
627
+ transition: opacity 140ms ease, transform 140ms ease;
628
+ }
629
+
630
+ .rbe-block:hover .rbe-block-actions,
631
+ .rbe-block:focus-within .rbe-block-actions {
632
+ opacity: 1;
633
+ pointer-events: auto;
634
+ transform: translateY(0);
635
+ }
636
+
637
+ .rbe-block-action {
638
+ appearance: none;
639
+ display: inline-grid;
640
+ place-items: center;
641
+ min-width: 28px;
642
+ height: 26px;
643
+ border: 1px solid var(--rbe-border);
644
+ border-radius: 7px;
645
+ background: #f8fafc;
646
+ color: #344054;
647
+ font: inherit;
648
+ font-size: 10px;
649
+ font-weight: 850;
650
+ line-height: 1;
651
+ cursor: pointer;
652
+ }
653
+
654
+ .rbe-block-action:hover {
655
+ border-color: var(--rbe-accent);
656
+ background: var(--rbe-accent-soft);
657
+ color: #143f91;
658
+ }
659
+
660
+ .rbe-block-action[data-action="delete"] {
661
+ border-color: rgba(220, 38, 38, 0.5);
662
+ background: rgba(254, 226, 226, 0.92);
663
+ color: #991b1b;
664
+ font-size: 12px;
665
+ font-weight: 900;
666
+ }
667
+
668
+ .rbe-block-action[data-action="delete"]:hover {
669
+ border-color: #991b1b;
670
+ background: #991b1b;
671
+ color: #ffffff;
672
+ }
673
+
674
+ .rbe-block:hover,
675
+ .rbe-block:focus-within {
676
+ background: #fbfdff;
677
+ }
678
+
679
+ .rbe-is-dragging {
680
+ opacity: 0.38;
681
+ }
682
+
683
+ .rbe-block-controls {
684
+ position: relative;
685
+ z-index: 12;
686
+ display: flex;
687
+ align-items: flex-start;
688
+ justify-content: flex-end;
689
+ gap: 4px;
690
+ padding-top: 5px;
691
+ opacity: 0;
692
+ transition: opacity 140ms ease;
693
+ }
694
+
695
+ .rbe-block:hover .rbe-block-controls,
696
+ .rbe-block:focus-within .rbe-block-controls {
697
+ opacity: 1;
698
+ }
699
+
700
+ .rbe-control-btn,
701
+ .rbe-icon-btn,
702
+ .rbe-small-btn,
703
+ .rbe-inline-btn,
704
+ .rbe-menu-item {
705
+ appearance: none;
706
+ border: 1px solid var(--rbe-border);
707
+ background: var(--rbe-surface);
708
+ color: var(--rbe-text);
709
+ font: inherit;
710
+ }
711
+
712
+ .rbe-control-btn {
713
+ width: 28px;
714
+ height: 28px;
715
+ border-radius: 7px;
716
+ display: inline-flex;
717
+ align-items: center;
718
+ justify-content: center;
719
+ color: var(--rbe-muted);
720
+ cursor: pointer;
721
+ line-height: 1;
722
+ }
723
+
724
+ .rbe-control-btn:hover,
725
+ .rbe-small-btn:hover,
726
+ .rbe-inline-btn:hover,
727
+ .rbe-icon-btn:hover,
728
+ .rbe-menu-item:hover,
729
+ .rbe-menu-item.is-active {
730
+ border-color: var(--rbe-accent);
731
+ background: var(--rbe-accent-soft);
732
+ color: #143f91;
733
+ }
734
+
735
+ .rbe-menu-item.is-premium-locked,
736
+ .rbe-menu-item.is-premium-locked:hover,
737
+ .rbe-menu-item.is-premium-locked:focus-visible {
738
+ border-color: #f59e0b;
739
+ background: #fffbeb;
740
+ color: #92400e;
741
+ }
742
+
743
+ .rbe-premium-badge {
744
+ display: inline-flex;
745
+ align-items: center;
746
+ margin-left: 8px;
747
+ padding: 2px 6px;
748
+ border-radius: 999px;
749
+ background: #fef3c7;
750
+ color: #92400e;
751
+ font-size: 10px;
752
+ font-style: normal;
753
+ font-weight: 850;
754
+ line-height: 1;
755
+ vertical-align: middle;
756
+ }
757
+
758
+ .rbe-ai-toolbar-btn.is-premium-locked,
759
+ .rbe-ai-inline-btn.is-premium-locked {
760
+ border-color: #f59e0b !important;
761
+ background: #fffbeb !important;
762
+ color: #92400e !important;
763
+ }
764
+
765
+ .rbe-toast-stack {
766
+ position: fixed;
767
+ right: 18px;
768
+ bottom: 18px;
769
+ z-index: 12000;
770
+ display: grid;
771
+ gap: 10px;
772
+ width: min(360px, calc(100vw - 24px));
773
+ pointer-events: none;
774
+ }
775
+
776
+ .rbe-toast {
777
+ display: flex;
778
+ align-items: flex-start;
779
+ gap: 10px;
780
+ border: 1px solid #d7dee8;
781
+ border-radius: 12px;
782
+ background: #ffffff;
783
+ color: #172033;
784
+ padding: 12px 14px;
785
+ box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
786
+ opacity: 0;
787
+ transform: translateY(12px) scale(0.98);
788
+ transition: opacity 0.24s ease, transform 0.24s ease;
789
+ pointer-events: auto;
790
+ }
791
+
792
+ .rbe-toast.is-show {
793
+ opacity: 1;
794
+ transform: translateY(0) scale(1);
795
+ }
796
+
797
+ .rbe-toast.is-hiding {
798
+ opacity: 0;
799
+ transform: translateY(10px) scale(0.98);
800
+ }
801
+
802
+ .rbe-toast i {
803
+ margin-top: 2px;
804
+ }
805
+
806
+ .rbe-toast strong {
807
+ display: block;
808
+ font-size: 13px;
809
+ line-height: 1.25;
810
+ }
811
+
812
+ .rbe-toast span {
813
+ display: block;
814
+ margin-top: 2px;
815
+ color: #475467;
816
+ font-size: 12px;
817
+ line-height: 1.4;
818
+ }
819
+
820
+ .rbe-toast.is-error {
821
+ border-color: #fecaca;
822
+ background: #fff7f7;
823
+ }
824
+
825
+ .rbe-toast.is-error i,
826
+ .rbe-toast.is-error strong {
827
+ color: #b42318;
828
+ }
829
+
830
+ .rbe-toast.is-warning {
831
+ border-color: #fedf89;
832
+ background: #fffbeb;
833
+ }
834
+
835
+ .rbe-toast.is-warning i,
836
+ .rbe-toast.is-warning strong {
837
+ color: #b54708;
838
+ }
839
+
840
+ .rbe-toast.is-success {
841
+ border-color: #bbf7d0;
842
+ background: #f0fdf4;
843
+ }
844
+
845
+ .rbe-toast.is-success i,
846
+ .rbe-toast.is-success strong {
847
+ color: #087443;
848
+ }
849
+
850
+ .rbe-drag-handle {
851
+ cursor: grab;
852
+ font-weight: 700;
853
+ letter-spacing: 0;
854
+ }
855
+
856
+ .rbe-block-body {
857
+ min-width: 0;
858
+ max-width: 100%;
859
+ }
860
+
861
+ .rbe-editable {
862
+ min-height: 28px;
863
+ width: 100%;
864
+ max-width: 100%;
865
+ min-width: 0;
866
+ outline: 0;
867
+ overflow-wrap: anywhere;
868
+ word-break: break-word;
869
+ font-family: Arial, sans-serif;
870
+ font-size: 16px;
871
+ }
872
+
873
+ .rbe-editable:empty::before {
874
+ content: attr(data-placeholder);
875
+ color: #9aa5b1;
876
+ pointer-events: none;
877
+ }
878
+
879
+ .rbe-editable a {
880
+ color: var(--rbe-accent);
881
+ text-decoration: underline;
882
+ text-underline-offset: 3px;
883
+ }
884
+
885
+ .rbe-paragraph {
886
+ padding: 5px 0;
887
+ font-size: 16px;
888
+ max-width: 100%;
889
+ min-width: 0;
890
+ }
891
+
892
+ .rbe-heading-wrap,
893
+ .rbe-list-wrap,
894
+ .rbe-checklist-wrap {
895
+ display: grid;
896
+ grid-template-columns: 132px minmax(0, 1fr);
897
+ gap: 10px;
898
+ align-items: start;
899
+ }
900
+
901
+ .rbe-heading-wrap {
902
+ grid-template-columns: 84px minmax(0, 1fr);
903
+ }
904
+
905
+ .rbe-heading-level,
906
+ .rbe-list-style,
907
+ .rbe-callout-tone,
908
+ .rbe-code-language,
909
+ .rbe input[type="text"],
910
+ .rbe input[type="url"],
911
+ .rbe textarea,
912
+ .rbe select {
913
+ width: 100%;
914
+ min-height: 34px;
915
+ border: 1px solid var(--rbe-border);
916
+ border-radius: 7px;
917
+ background: var(--rbe-surface);
918
+ color: var(--rbe-text);
919
+ font: inherit;
920
+ padding: 7px 9px;
921
+ outline: 0;
922
+ }
923
+
924
+ .rbe-heading-level {
925
+ min-width: 76px;
926
+ }
927
+
928
+ .rbe-list-style {
929
+ min-width: 124px;
930
+ }
931
+
932
+ .rbe-callout-tone {
933
+ min-width: 118px;
934
+ }
935
+
936
+ .rbe input:focus,
937
+ .rbe textarea:focus,
938
+ .rbe select:focus,
939
+ .rbe [contenteditable="true"]:focus {
940
+ border-color: transparent;
941
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
942
+ }
943
+
944
+ .rbe-heading {
945
+ padding: 0;
946
+ font-weight: 760;
947
+ line-height: 1.2;
948
+ max-width: 100%;
949
+ min-width: 0;
950
+ }
951
+
952
+ .rbe-h1 {
953
+ font-size: 34px;
954
+ }
955
+
956
+ .rbe-h2 {
957
+ font-size: 28px;
958
+ }
959
+
960
+ .rbe-h3 {
961
+ font-size: 23px;
962
+ }
963
+
964
+ .rbe-h4 {
965
+ font-size: 19px;
966
+ }
967
+
968
+ .rbe-quote {
969
+ border-left: 4px solid var(--rbe-accent);
970
+ background: #f8fbff;
971
+ padding: 12px 14px;
972
+ border-radius: 0 var(--rbe-radius) var(--rbe-radius) 0;
973
+ }
974
+
975
+ .rbe-quote-text {
976
+ font-size: 18px;
977
+ font-style: italic;
978
+ }
979
+
980
+ .rbe-quote-caption,
981
+ .rbe-image-caption,
982
+ .rbe-embed-caption {
983
+ margin-top: 10px;
984
+ }
985
+
986
+ .rbe-list,
987
+ .rbe-checklist {
988
+ grid-column: 2;
989
+ margin: 0;
990
+ padding-left: 0;
991
+ display: grid;
992
+ gap: 7px;
993
+ }
994
+
995
+ .rbe-list-tools,
996
+ .rbe-checklist-tools {
997
+ display: grid;
998
+ grid-template-columns: repeat(2, minmax(0, 1fr));
999
+ gap: 6px;
1000
+ align-content: start;
1001
+ }
1002
+
1003
+ .rbe-list-style {
1004
+ grid-column: 1 / -1;
1005
+ min-width: 0;
1006
+ }
1007
+
1008
+ .rbe-list-tools > .select2-container {
1009
+ grid-column: 1 / -1;
1010
+ width: 100% !important;
1011
+ }
1012
+
1013
+ .rbe-list-nest-action {
1014
+ min-width: 0;
1015
+ width: 100%;
1016
+ height: 32px;
1017
+ padding: 0;
1018
+ }
1019
+
1020
+ .rbe-list-item,
1021
+ .rbe-check-item {
1022
+ display: grid;
1023
+ grid-template-columns: 28px minmax(0, 1fr) 28px;
1024
+ align-items: center;
1025
+ gap: 8px;
1026
+ }
1027
+
1028
+ .rbe-list-item[data-level="1"],
1029
+ .rbe-check-item[data-level="1"] {
1030
+ margin-left: 28px;
1031
+ }
1032
+
1033
+ .rbe-list-item[data-level="2"],
1034
+ .rbe-check-item[data-level="2"] {
1035
+ margin-left: 56px;
1036
+ }
1037
+
1038
+ .rbe-list-item[data-level="3"],
1039
+ .rbe-check-item[data-level="3"] {
1040
+ margin-left: 84px;
1041
+ }
1042
+
1043
+ .rbe-list-item[data-level="4"],
1044
+ .rbe-check-item[data-level="4"] {
1045
+ margin-left: 112px;
1046
+ }
1047
+
1048
+ .rbe-list-marker {
1049
+ min-height: 28px;
1050
+ display: inline-flex;
1051
+ align-items: center;
1052
+ justify-content: flex-end;
1053
+ color: var(--rbe-text);
1054
+ font-weight: 740;
1055
+ }
1056
+
1057
+ .rbe-list-text {
1058
+ padding: 4px 0;
1059
+ }
1060
+
1061
+ .rbe-row-add {
1062
+ justify-self: end;
1063
+ width: 34px;
1064
+ height: 34px;
1065
+ border: 0;
1066
+ border-radius: 50%;
1067
+ background: transparent;
1068
+ color: #16a34a;
1069
+ font-size: 22px;
1070
+ box-shadow: none;
1071
+ }
1072
+
1073
+ .rbe-list-add {
1074
+ grid-column: 2;
1075
+ }
1076
+
1077
+ .rbe-row-add:hover {
1078
+ background: transparent;
1079
+ color: #15803d;
1080
+ }
1081
+
1082
+ .rbe-row-remove {
1083
+ display: inline-flex;
1084
+ align-items: center;
1085
+ justify-content: center;
1086
+ width: 26px;
1087
+ height: 26px;
1088
+ padding: 0;
1089
+ border-color: rgba(220, 38, 38, 0.52);
1090
+ border-radius: 50%;
1091
+ background: rgba(254, 226, 226, 0.94);
1092
+ color: #991b1b;
1093
+ font-size: 12px;
1094
+ line-height: 1;
1095
+ }
1096
+
1097
+ .rbe-row-remove:hover {
1098
+ border-color: #991b1b;
1099
+ background: #991b1b;
1100
+ color: #ffffff;
1101
+ }
1102
+
1103
+ .rbe-list li {
1104
+ min-height: 26px;
1105
+ padding: 2px 0;
1106
+ }
1107
+
1108
+ .rbe-check-input {
1109
+ width: 17px;
1110
+ height: 17px;
1111
+ margin-top: 7px;
1112
+ accent-color: var(--rbe-accent);
1113
+ }
1114
+
1115
+ .rbe-check-toggle {
1116
+ width: 28px;
1117
+ height: 28px;
1118
+ display: inline-flex;
1119
+ align-items: center;
1120
+ justify-content: center;
1121
+ border: 0;
1122
+ border-radius: 6px;
1123
+ background: transparent;
1124
+ color: #64748b;
1125
+ cursor: pointer;
1126
+ }
1127
+
1128
+ .rbe-check-toggle .rbe-fa-icon {
1129
+ font-size: 19px;
1130
+ }
1131
+
1132
+ .rbe-check-toggle.is-checked {
1133
+ color: #16a34a;
1134
+ }
1135
+
1136
+ .rbe-check-toggle.is-nested {
1137
+ border-radius: 50%;
1138
+ }
1139
+
1140
+ .rbe-check-toggle:hover {
1141
+ background: #eef5ff;
1142
+ color: #2563eb;
1143
+ }
1144
+
1145
+ .rbe-check-toggle:disabled {
1146
+ cursor: default;
1147
+ }
1148
+
1149
+ .rbe-check-toggle:disabled:hover {
1150
+ background: transparent;
1151
+ }
1152
+
1153
+ .rbe-check-text {
1154
+ padding: 4px 0;
1155
+ }
1156
+
1157
+ .rbe-icon-btn {
1158
+ width: 28px;
1159
+ height: 28px;
1160
+ border-radius: 7px;
1161
+ cursor: pointer;
1162
+ }
1163
+
1164
+ .rbe-check-remove {
1165
+ display: inline-flex;
1166
+ align-items: center;
1167
+ justify-content: center;
1168
+ width: 26px;
1169
+ height: 26px;
1170
+ padding: 0;
1171
+ text-align: center;
1172
+ }
1173
+
1174
+ .rbe-check-remove .rbe-fa-icon {
1175
+ font-size: 12px;
1176
+ }
1177
+
1178
+ .rbe-check-remove:hover {
1179
+ border-color: #991b1b;
1180
+ background: #991b1b;
1181
+ color: #ffffff;
1182
+ }
1183
+
1184
+ .rbe-small-btn {
1185
+ display: inline-flex;
1186
+ align-items: center;
1187
+ justify-content: center;
1188
+ gap: 6px;
1189
+ min-height: 34px;
1190
+ min-width: 36px;
1191
+ border-radius: 7px;
1192
+ padding: 6px 10px;
1193
+ cursor: pointer;
1194
+ white-space: nowrap;
1195
+ }
1196
+
1197
+ .rbe-combo-icon {
1198
+ display: inline-flex;
1199
+ align-items: center;
1200
+ gap: 3px;
1201
+ }
1202
+
1203
+ .rbe-combo-icon .rbe-fa-icon {
1204
+ font-size: 11px;
1205
+ }
1206
+
1207
+ .rbe-mini-btn {
1208
+ appearance: none;
1209
+ min-height: 28px;
1210
+ border: 1px solid var(--rbe-border);
1211
+ border-radius: 7px;
1212
+ background: #ffffff;
1213
+ color: var(--rbe-text);
1214
+ padding: 4px 8px;
1215
+ font: inherit;
1216
+ font-size: 12px;
1217
+ font-weight: 720;
1218
+ cursor: pointer;
1219
+ }
1220
+
1221
+ .rbe-mini-btn:hover {
1222
+ border-color: var(--rbe-accent);
1223
+ background: var(--rbe-accent-soft);
1224
+ }
1225
+
1226
+ .rbe-checklist-add {
1227
+ justify-self: end;
1228
+ }
1229
+
1230
+ .rbe-code-wrap {
1231
+ max-width: 100%;
1232
+ min-width: 0;
1233
+ overflow: hidden;
1234
+ border: 1px solid var(--rbe-border);
1235
+ border-radius: var(--rbe-radius);
1236
+ background: var(--rbe-code-bg, #f3f4f6);
1237
+ }
1238
+
1239
+ .rbe-code-header {
1240
+ display: flex;
1241
+ flex-wrap: wrap;
1242
+ gap: 8px;
1243
+ align-items: center;
1244
+ justify-content: flex-start;
1245
+ padding: 8px;
1246
+ border-bottom: 1px solid rgba(15, 23, 42, 0.12);
1247
+ background: var(--rbe-code-header-bg, #e5e7eb);
1248
+ color: var(--rbe-code-header-text, var(--rbe-text));
1249
+ }
1250
+
1251
+ .rbe-code-header .rbe-code-language {
1252
+ max-width: 240px;
1253
+ min-width: 176px;
1254
+ min-height: 30px;
1255
+ }
1256
+
1257
+ .rbe-code-header .select2-container {
1258
+ width: 176px !important;
1259
+ min-width: 176px;
1260
+ }
1261
+
1262
+ .rbe-code-color-label {
1263
+ display: inline-flex;
1264
+ align-items: center;
1265
+ gap: 7px;
1266
+ min-height: 34px;
1267
+ border: 1px solid rgba(15, 23, 42, 0.14);
1268
+ border-radius: 7px;
1269
+ background: rgba(255, 255, 255, 0.64);
1270
+ padding: 4px 7px;
1271
+ color: inherit;
1272
+ font-size: 12px;
1273
+ font-weight: 740;
1274
+ }
1275
+
1276
+ .rbe-code-color-label input {
1277
+ width: 30px;
1278
+ height: 24px;
1279
+ border: 0;
1280
+ background: transparent;
1281
+ padding: 0;
1282
+ cursor: pointer;
1283
+ }
1284
+
1285
+ .rbe-code-copy,
1286
+ .rbe-code-format,
1287
+ .rbe-raw-copy,
1288
+ .rbe-raw-format {
1289
+ width: 34px;
1290
+ min-width: 34px;
1291
+ padding: 0;
1292
+ }
1293
+
1294
+ .rbe-code-editor,
1295
+ .rbe-raw-editor {
1296
+ position: relative;
1297
+ height: 260px;
1298
+ overflow: hidden;
1299
+ background: var(--rbe-code-bg, #f3f4f6);
1300
+ }
1301
+
1302
+ .rbe-code-highlight,
1303
+ .rbe-raw-highlight,
1304
+ .rbe-code-input,
1305
+ .rbe-raw-input {
1306
+ position: absolute;
1307
+ inset: 0;
1308
+ display: block;
1309
+ width: 100%;
1310
+ height: 100%;
1311
+ margin: 0;
1312
+ border: 0;
1313
+ border-radius: 0;
1314
+ padding: 12px;
1315
+ overflow: auto;
1316
+ resize: none;
1317
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
1318
+ font-size: 13px;
1319
+ line-height: 1.5;
1320
+ tab-size: 2;
1321
+ white-space: pre;
1322
+ }
1323
+
1324
+ .rbe-code-highlight,
1325
+ .rbe-raw-highlight {
1326
+ pointer-events: none;
1327
+ color: var(--rbe-code-text, #172033);
1328
+ }
1329
+
1330
+ .rbe-code-input,
1331
+ .rbe-raw-input {
1332
+ z-index: 1;
1333
+ background: transparent;
1334
+ color: transparent;
1335
+ caret-color: var(--rbe-code-text, #172033);
1336
+ }
1337
+
1338
+ .rbe-code-input::selection,
1339
+ .rbe-raw-input::selection {
1340
+ background: rgba(37, 99, 235, 0.28);
1341
+ color: transparent;
1342
+ }
1343
+
1344
+ .rbe-token-keyword {
1345
+ color: #1d4ed8;
1346
+ font-weight: 720;
1347
+ }
1348
+
1349
+ .rbe-token-string {
1350
+ color: #047857;
1351
+ }
1352
+
1353
+ .rbe-token-comment {
1354
+ color: #64748b;
1355
+ font-style: italic;
1356
+ }
1357
+
1358
+ .rbe-token-number {
1359
+ color: #b45309;
1360
+ }
1361
+
1362
+ .rbe-token-punctuation {
1363
+ color: #7c3aed;
1364
+ }
1365
+
1366
+ .rbe-image,
1367
+ .rbe-embed,
1368
+ .rbe-attachment,
1369
+ .rbe-table-wrap,
1370
+ .rbe-callout,
1371
+ .rbe-raw-wrap {
1372
+ max-width: 100%;
1373
+ min-width: 0;
1374
+ border: 1px solid var(--rbe-border);
1375
+ border-radius: var(--rbe-radius);
1376
+ background: #ffffff;
1377
+ padding: 12px;
1378
+ }
1379
+
1380
+ .rbe-raw-header {
1381
+ display: flex;
1382
+ flex-wrap: wrap;
1383
+ align-items: center;
1384
+ gap: 8px;
1385
+ padding: 8px;
1386
+ border: 1px solid var(--rbe-border);
1387
+ border-bottom: 0;
1388
+ border-radius: 8px 8px 0 0;
1389
+ background: #e5e7eb;
1390
+ }
1391
+
1392
+ .rbe-raw-header strong {
1393
+ display: inline-flex;
1394
+ align-items: center;
1395
+ gap: 8px;
1396
+ margin-right: auto;
1397
+ font-size: 13px;
1398
+ }
1399
+
1400
+ .rbe-raw-editor {
1401
+ border: 1px solid var(--rbe-border);
1402
+ border-radius: 0 0 8px 8px;
1403
+ background: #f3f4f6;
1404
+ --rbe-code-bg: #f3f4f6;
1405
+ --rbe-code-text: #172033;
1406
+ }
1407
+
1408
+ .rbe-image-preview {
1409
+ display: block;
1410
+ width: 100%;
1411
+ max-height: 520px;
1412
+ object-fit: contain;
1413
+ border-radius: 7px;
1414
+ background: var(--rbe-surface-soft);
1415
+ }
1416
+
1417
+ .rbe-image-gallery {
1418
+ position: relative;
1419
+ display: flex;
1420
+ flex-wrap: wrap;
1421
+ justify-content: center;
1422
+ align-items: flex-start;
1423
+ gap: 10px;
1424
+ }
1425
+
1426
+ .rbe-image-stage {
1427
+ position: relative;
1428
+ flex: 0 1 auto;
1429
+ max-width: 100%;
1430
+ overflow: hidden;
1431
+ border-radius: 8px;
1432
+ background: var(--rbe-surface-soft);
1433
+ touch-action: none;
1434
+ }
1435
+
1436
+ .rbe-image-stage .rbe-image-preview {
1437
+ margin: 0 auto;
1438
+ transform: scale(var(--rbe-image-zoom, 1));
1439
+ transition: filter 0.18s ease, transform 0.18s ease;
1440
+ }
1441
+
1442
+ .rbe-image-stage.is-custom-crop .rbe-image-preview {
1443
+ height: 100%;
1444
+ max-height: none;
1445
+ object-fit: cover;
1446
+ }
1447
+
1448
+ .rbe-image-stage.is-editable::after,
1449
+ .rbe-attachment-card.is-editable::after {
1450
+ content: "";
1451
+ position: absolute;
1452
+ inset: 0;
1453
+ z-index: 2;
1454
+ pointer-events: none;
1455
+ background: rgba(15, 23, 42, 0.36);
1456
+ opacity: 0;
1457
+ transition: opacity 0.18s ease;
1458
+ }
1459
+
1460
+ .rbe-image-stage.is-editable:hover::after,
1461
+ .rbe-attachment-card.is-editable:hover::after,
1462
+ .rbe-image-stage.is-media-menu-open::after,
1463
+ .rbe-attachment-card.is-media-menu-open::after {
1464
+ opacity: 1;
1465
+ }
1466
+
1467
+ .rbe-image-stage.is-editable:hover .rbe-image-preview,
1468
+ .rbe-attachment-card.is-editable:hover .rbe-attachment-card-link,
1469
+ .rbe-image-stage.is-media-menu-open .rbe-image-preview,
1470
+ .rbe-attachment-card.is-media-menu-open .rbe-attachment-card-link {
1471
+ filter: blur(4px);
1472
+ transform: scale(calc(var(--rbe-image-zoom, 1) * 1.02));
1473
+ }
1474
+
1475
+ .rbe-image-stage.is-image-crop-mode::after {
1476
+ opacity: 0 !important;
1477
+ }
1478
+
1479
+ .rbe-image-stage.is-image-crop-mode .rbe-image-preview {
1480
+ cursor: grab;
1481
+ filter: none !important;
1482
+ transform: scale(var(--rbe-image-zoom, 1)) !important;
1483
+ }
1484
+
1485
+ .rbe-image-stage.is-image-crop-mode:active .rbe-image-preview {
1486
+ cursor: grabbing;
1487
+ }
1488
+
1489
+ .rbe-image-stage.is-image-crop-mode {
1490
+ outline: 2px dashed rgba(37, 99, 235, 0.72);
1491
+ outline-offset: 3px;
1492
+ }
1493
+
1494
+ .rbe-media-gear-menu {
1495
+ position: absolute;
1496
+ left: 50%;
1497
+ top: 60%;
1498
+ z-index: 3;
1499
+ width: 132px;
1500
+ height: 132px;
1501
+ opacity: 0;
1502
+ pointer-events: none;
1503
+ transform: translate(-50%, -50%) scale(0.9);
1504
+ transition: opacity 0.18s ease, transform 0.18s ease;
1505
+ }
1506
+
1507
+ .rbe-media-gear,
1508
+ .rbe-media-action {
1509
+ position: absolute;
1510
+ left: 50%;
1511
+ top: 50%;
1512
+ width: 38px;
1513
+ height: 38px;
1514
+ display: grid;
1515
+ place-items: center;
1516
+ border: 0;
1517
+ border-radius: 999px;
1518
+ background: rgba(255, 255, 255, 0.94);
1519
+ color: #172033;
1520
+ font-size: 13px;
1521
+ line-height: 1;
1522
+ cursor: pointer;
1523
+ box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
1524
+ transform: translate(-50%, -50%);
1525
+ transition: background 0.18s ease, color 0.18s ease, transform 0.24s ease, opacity 0.18s ease;
1526
+ }
1527
+
1528
+ .rbe-media-gear {
1529
+ z-index: 2;
1530
+ font-size: 16px;
1531
+ }
1532
+
1533
+ .rbe-media-action {
1534
+ opacity: 0;
1535
+ pointer-events: none;
1536
+ }
1537
+
1538
+ .rbe-media-action-bottom {
1539
+ background: rgba(220, 38, 38, 0.96);
1540
+ color: #ffffff;
1541
+ }
1542
+
1543
+ .rbe-media-gear:hover,
1544
+ .rbe-media-gear:focus-visible,
1545
+ .rbe-media-action:hover,
1546
+ .rbe-media-action:focus-visible {
1547
+ background: #ffffff;
1548
+ color: var(--rbe-accent);
1549
+ }
1550
+
1551
+ .rbe-media-action-bottom:hover,
1552
+ .rbe-media-action-bottom:focus-visible {
1553
+ background: #b91c1c;
1554
+ color: #ffffff;
1555
+ }
1556
+
1557
+ .rbe-image-crop-toggle.is-active {
1558
+ background: #2563eb;
1559
+ color: #ffffff;
1560
+ }
1561
+
1562
+ .rbe-image-resize-handle {
1563
+ position: absolute;
1564
+ right: 6px;
1565
+ bottom: 6px;
1566
+ z-index: 5;
1567
+ width: 22px;
1568
+ height: 22px;
1569
+ border-radius: 7px;
1570
+ background: rgba(255, 255, 255, 0.96);
1571
+ color: #172033;
1572
+ box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
1573
+ opacity: 0;
1574
+ pointer-events: none;
1575
+ cursor: nwse-resize;
1576
+ }
1577
+
1578
+ .rbe-image-resize-handle::before {
1579
+ content: "";
1580
+ position: absolute;
1581
+ right: 6px;
1582
+ bottom: 6px;
1583
+ width: 8px;
1584
+ height: 8px;
1585
+ border-right: 2px solid currentColor;
1586
+ border-bottom: 2px solid currentColor;
1587
+ }
1588
+
1589
+ .rbe-image-stage.is-editable:hover .rbe-image-resize-handle,
1590
+ .rbe-image-stage.is-media-menu-open .rbe-image-resize-handle,
1591
+ .rbe-image-stage.is-image-crop-mode .rbe-image-resize-handle {
1592
+ opacity: 1;
1593
+ pointer-events: auto;
1594
+ }
1595
+
1596
+ .rbe-image-crop-handle {
1597
+ position: absolute;
1598
+ z-index: 6;
1599
+ display: none;
1600
+ background: #ffffff;
1601
+ border: 2px solid #2563eb;
1602
+ box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
1603
+ }
1604
+
1605
+ .rbe-image-stage.is-image-crop-mode .rbe-image-crop-handle {
1606
+ display: block;
1607
+ }
1608
+
1609
+ .rbe-image-crop-e {
1610
+ top: 50%;
1611
+ right: 4px;
1612
+ width: 10px;
1613
+ height: 34px;
1614
+ border-radius: 999px;
1615
+ transform: translateY(-50%);
1616
+ cursor: ew-resize;
1617
+ }
1618
+
1619
+ .rbe-image-crop-s {
1620
+ left: 50%;
1621
+ bottom: 4px;
1622
+ width: 34px;
1623
+ height: 10px;
1624
+ border-radius: 999px;
1625
+ transform: translateX(-50%);
1626
+ cursor: ns-resize;
1627
+ }
1628
+
1629
+ .rbe-image-crop-se {
1630
+ right: 4px;
1631
+ bottom: 4px;
1632
+ width: 15px;
1633
+ height: 15px;
1634
+ border-radius: 5px;
1635
+ cursor: nwse-resize;
1636
+ }
1637
+
1638
+ .rbe-image-stage.is-editable:hover .rbe-media-gear-menu,
1639
+ .rbe-attachment-card.is-editable:hover .rbe-media-gear-menu,
1640
+ .rbe-media-gear-menu:focus-within,
1641
+ .rbe-image-stage.is-media-menu-open .rbe-media-gear-menu,
1642
+ .rbe-attachment-card.is-media-menu-open .rbe-media-gear-menu {
1643
+ opacity: 1;
1644
+ pointer-events: auto;
1645
+ transform: translate(-50%, -50%) scale(1);
1646
+ }
1647
+
1648
+ .rbe-image-stage.is-media-menu-open .rbe-media-gear,
1649
+ .rbe-attachment-card.is-media-menu-open .rbe-media-gear {
1650
+ opacity: 0;
1651
+ pointer-events: none;
1652
+ }
1653
+
1654
+ .rbe-image-stage.is-media-menu-open .rbe-media-action,
1655
+ .rbe-attachment-card.is-media-menu-open .rbe-media-action,
1656
+ .rbe-media-gear-menu:focus-within .rbe-media-action {
1657
+ opacity: 1;
1658
+ pointer-events: auto;
1659
+ }
1660
+
1661
+ .rbe-media-row-has-space.is-media-menu-open .rbe-media-action-left,
1662
+ .rbe-media-row-has-space .rbe-media-gear-menu:focus-within .rbe-media-action-left {
1663
+ transform: translate(calc(-50% - 48px), -50%);
1664
+ }
1665
+
1666
+ .rbe-media-row-has-space.is-media-menu-open .rbe-media-action-top,
1667
+ .rbe-media-row-has-space .rbe-media-gear-menu:focus-within .rbe-media-action-top {
1668
+ transform: translate(-50%, calc(-50% - 48px));
1669
+ }
1670
+
1671
+ .rbe-media-row-has-space.is-media-menu-open .rbe-media-action-right,
1672
+ .rbe-media-row-has-space .rbe-media-gear-menu:focus-within .rbe-media-action-right {
1673
+ transform: translate(calc(-50% + 48px), -50%);
1674
+ }
1675
+
1676
+ .rbe-image-stage.is-media-menu-open .rbe-media-action-bottom,
1677
+ .rbe-attachment-card.is-media-menu-open .rbe-media-action-bottom,
1678
+ .rbe-media-gear-menu:focus-within .rbe-media-action-bottom {
1679
+ transform: translate(-50%, calc(-50% + 48px));
1680
+ }
1681
+
1682
+ .rbe-media-row-full .rbe-media-align {
1683
+ display: none;
1684
+ }
1685
+
1686
+ .rbe-media-align-left {
1687
+ justify-self: start;
1688
+ }
1689
+
1690
+ .rbe-media-align-center {
1691
+ justify-self: center;
1692
+ }
1693
+
1694
+ .rbe-media-align-right {
1695
+ justify-self: end;
1696
+ }
1697
+
1698
+ .rbe-image-replace-hint {
1699
+ position: absolute;
1700
+ left: 50%;
1701
+ bottom: 14px;
1702
+ transform: translateX(-50%);
1703
+ opacity: 0;
1704
+ pointer-events: none;
1705
+ border-radius: 999px;
1706
+ background: rgba(15, 23, 42, 0.78);
1707
+ color: #ffffff;
1708
+ padding: 7px 12px;
1709
+ font-size: 12px;
1710
+ font-weight: 720;
1711
+ transition: opacity 0.18s ease;
1712
+ }
1713
+
1714
+ .rbe-image-gallery:hover .rbe-image-replace-hint {
1715
+ opacity: 1;
1716
+ }
1717
+
1718
+ .rbe-dropzone,
1719
+ .rbe-upload-dropzone {
1720
+ position: relative;
1721
+ min-height: 210px;
1722
+ display: flex;
1723
+ flex-direction: column;
1724
+ align-items: center;
1725
+ justify-content: center;
1726
+ gap: 6px;
1727
+ text-align: center;
1728
+ color: #4b5563;
1729
+ border: 2px dashed #c8d2df;
1730
+ border-radius: 18px;
1731
+ background: linear-gradient(180deg, #fbfcff 0%, #f4f7fc 100%);
1732
+ padding: 26px 20px;
1733
+ cursor: pointer;
1734
+ transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
1735
+ }
1736
+
1737
+ .rbe-upload-dropzone:hover,
1738
+ .rbe-upload-dropzone:focus-within {
1739
+ border-color: #7c3aed;
1740
+ background: #fbf9ff;
1741
+ box-shadow: 0 18px 38px rgba(124, 58, 237, 0.14);
1742
+ transform: translateY(-1px);
1743
+ }
1744
+
1745
+ .rbe-upload-input {
1746
+ position: absolute;
1747
+ width: 1px;
1748
+ height: 1px;
1749
+ opacity: 0;
1750
+ pointer-events: none;
1751
+ }
1752
+
1753
+ .rbe-upload-icon {
1754
+ width: 68px;
1755
+ height: 54px;
1756
+ display: inline-flex;
1757
+ align-items: center;
1758
+ justify-content: center;
1759
+ color: #6d3df5;
1760
+ font-size: 52px;
1761
+ line-height: 1;
1762
+ }
1763
+
1764
+ .rbe-upload-dropzone strong {
1765
+ color: #374151;
1766
+ font-size: 16px;
1767
+ font-weight: 760;
1768
+ }
1769
+
1770
+ .rbe-upload-main {
1771
+ color: #374151;
1772
+ font-size: 16px;
1773
+ }
1774
+
1775
+ .rbe-upload-dropzone small {
1776
+ margin-top: 6px;
1777
+ color: #8a94a6;
1778
+ font-size: 13px;
1779
+ }
1780
+
1781
+ .rbe-attachment-dropzone {
1782
+ min-height: 170px;
1783
+ }
1784
+
1785
+ .rbe-media-tools {
1786
+ display: grid;
1787
+ grid-template-columns: minmax(0, 1fr) auto auto;
1788
+ gap: 8px;
1789
+ margin-top: 10px;
1790
+ align-items: center;
1791
+ }
1792
+
1793
+ .rbe-table-toolbar {
1794
+ display: flex;
1795
+ flex-wrap: wrap;
1796
+ gap: 8px;
1797
+ margin-bottom: 10px;
1798
+ }
1799
+
1800
+ .rbe-table-layout {
1801
+ display: flex;
1802
+ flex-wrap: wrap;
1803
+ gap: 10px;
1804
+ align-items: center;
1805
+ justify-content: flex-start;
1806
+ margin-bottom: 10px;
1807
+ padding: 8px;
1808
+ border: 1px solid var(--rbe-border);
1809
+ border-radius: 7px;
1810
+ background: #fbfdff;
1811
+ }
1812
+
1813
+ .rbe-table-width-label,
1814
+ .rbe-table-align-label,
1815
+ .rbe-table-border-style-label,
1816
+ .rbe-table-border-width-label {
1817
+ display: flex;
1818
+ align-items: center;
1819
+ gap: 8px;
1820
+ color: var(--rbe-muted);
1821
+ font-size: 13px;
1822
+ font-weight: 680;
1823
+ }
1824
+
1825
+ .rbe-table-width-label > span:first-child,
1826
+ .rbe-table-align-label > span:first-child,
1827
+ .rbe-table-border-style-label > span:first-child,
1828
+ .rbe-table-border-width-label > span:first-child {
1829
+ white-space: nowrap;
1830
+ }
1831
+
1832
+ .rbe-table-width {
1833
+ width: 150px;
1834
+ accent-color: var(--rbe-accent);
1835
+ }
1836
+
1837
+ .rbe-table-border-width {
1838
+ width: 112px;
1839
+ accent-color: var(--rbe-accent);
1840
+ }
1841
+
1842
+ .rbe-table-width-value,
1843
+ .rbe-table-border-width-value {
1844
+ min-width: 42px;
1845
+ color: var(--rbe-text);
1846
+ font-weight: 760;
1847
+ }
1848
+
1849
+ .rbe-table-align,
1850
+ .rbe-table-border-style {
1851
+ min-width: 104px;
1852
+ }
1853
+
1854
+ .rbe-table-layout .select2-container {
1855
+ width: auto !important;
1856
+ min-width: 104px;
1857
+ flex: 0 0 auto;
1858
+ }
1859
+
1860
+ .rbe-table-stage {
1861
+ width: 100%;
1862
+ overflow: auto;
1863
+ }
1864
+
1865
+ .rbe-table {
1866
+ width: 100%;
1867
+ border-collapse: collapse;
1868
+ table-layout: fixed;
1869
+ --rbe-table-border-width: 1px;
1870
+ --rbe-table-border-style: solid;
1871
+ }
1872
+
1873
+ .rbe-table-wrap[data-align="left"] .rbe-table {
1874
+ margin-left: 0;
1875
+ margin-right: auto;
1876
+ }
1877
+
1878
+ .rbe-table-wrap[data-align="center"] .rbe-table {
1879
+ margin-left: auto;
1880
+ margin-right: auto;
1881
+ }
1882
+
1883
+ .rbe-table-wrap[data-align="right"] .rbe-table {
1884
+ margin-left: auto;
1885
+ margin-right: 0;
1886
+ }
1887
+
1888
+ .rbe-table th,
1889
+ .rbe-table td {
1890
+ min-width: 88px;
1891
+ min-height: 38px;
1892
+ border: var(--rbe-table-border-width) var(--rbe-table-border-style) var(--rbe-border);
1893
+ padding: 8px;
1894
+ vertical-align: top;
1895
+ outline: 0;
1896
+ word-break: break-word;
1897
+ }
1898
+
1899
+ .rbe-table th {
1900
+ background: #eef5ff;
1901
+ font-weight: 720;
1902
+ }
1903
+
1904
+ .rbe-table-heading-toggle {
1905
+ display: inline-flex;
1906
+ align-items: center;
1907
+ gap: 8px;
1908
+ margin-top: 10px;
1909
+ color: var(--rbe-muted);
1910
+ font-size: 14px;
1911
+ }
1912
+
1913
+ .rbe-embed-frame {
1914
+ width: 100%;
1915
+ aspect-ratio: 16 / 9;
1916
+ border: 0;
1917
+ border-radius: 7px;
1918
+ background: #111827;
1919
+ }
1920
+
1921
+ .rbe-callout {
1922
+ display: grid;
1923
+ grid-template-columns: 120px minmax(0, 1fr);
1924
+ gap: 10px;
1925
+ align-items: start;
1926
+ border-left-width: 5px;
1927
+ }
1928
+
1929
+ .rbe-callout[data-tone="info"] {
1930
+ border-left-color: var(--rbe-accent);
1931
+ background: #f6faff;
1932
+ }
1933
+
1934
+ .rbe-callout[data-tone="success"] {
1935
+ border-left-color: var(--rbe-success);
1936
+ background: #f2fbf7;
1937
+ }
1938
+
1939
+ .rbe-callout[data-tone="warning"] {
1940
+ border-left-color: var(--rbe-warning);
1941
+ background: #fff9ef;
1942
+ }
1943
+
1944
+ .rbe-callout[data-tone="danger"] {
1945
+ border-left-color: var(--rbe-danger);
1946
+ background: #fff5f5;
1947
+ }
1948
+
1949
+ .rbe-delimiter-wrap {
1950
+ position: relative;
1951
+ display: grid;
1952
+ place-items: center;
1953
+ gap: 10px;
1954
+ }
1955
+
1956
+ .rbe-divider-toolbar {
1957
+ position: absolute;
1958
+ left: 50%;
1959
+ top: 50%;
1960
+ z-index: 4;
1961
+ display: inline-flex;
1962
+ gap: 4px;
1963
+ padding: 4px;
1964
+ border: 1px solid var(--rbe-border);
1965
+ border-radius: 999px;
1966
+ background: rgba(255, 255, 255, 0.96);
1967
+ box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
1968
+ opacity: 0;
1969
+ pointer-events: none;
1970
+ transform: translate(-50%, -50%) scale(0.96);
1971
+ transition: opacity 0.16s ease, transform 0.16s ease;
1972
+ }
1973
+
1974
+ .rbe-delimiter-wrap:hover .rbe-divider-toolbar,
1975
+ .rbe-divider-toolbar:focus-within {
1976
+ opacity: 1;
1977
+ pointer-events: auto;
1978
+ transform: translate(-50%, -50%) scale(1);
1979
+ }
1980
+
1981
+ .rbe-delimiter-wrap.rbe-divider-toolbar-dismissed .rbe-divider-toolbar {
1982
+ opacity: 0;
1983
+ pointer-events: none;
1984
+ transform: translate(-50%, -50%) scale(0.96);
1985
+ }
1986
+
1987
+ .rbe-divider-style-btn {
1988
+ width: 28px;
1989
+ height: 28px;
1990
+ display: grid;
1991
+ place-items: center;
1992
+ border: 1px solid transparent;
1993
+ border-radius: 999px;
1994
+ background: #ffffff;
1995
+ color: #344054;
1996
+ cursor: pointer;
1997
+ }
1998
+
1999
+ .rbe-divider-style-btn:hover,
2000
+ .rbe-divider-style-btn.is-active {
2001
+ border-color: var(--rbe-accent);
2002
+ background: var(--rbe-accent-soft);
2003
+ color: #143f91;
2004
+ }
2005
+
2006
+ .rbe-delimiter {
2007
+ width: 100%;
2008
+ height: 1px;
2009
+ border: 0;
2010
+ background: var(--rbe-border-strong);
2011
+ margin: 20px 0;
2012
+ }
2013
+
2014
+ .rbe-delimiter-wrap[data-style="dashed"] .rbe-delimiter {
2015
+ height: 0;
2016
+ border-top: 2px dashed var(--rbe-border-strong);
2017
+ background: transparent;
2018
+ }
2019
+
2020
+ .rbe-delimiter-wrap[data-style="dotted"] .rbe-delimiter {
2021
+ height: 0;
2022
+ border-top: 3px dotted var(--rbe-border-strong);
2023
+ background: transparent;
2024
+ }
2025
+
2026
+ .rbe-delimiter-wrap[data-style="thick"] .rbe-delimiter {
2027
+ height: 4px;
2028
+ border-radius: 999px;
2029
+ }
2030
+
2031
+ .rbe-button-block,
2032
+ .rbe-toggle,
2033
+ .rbe-link-preview {
2034
+ border: 1px solid var(--rbe-border);
2035
+ border-radius: var(--rbe-radius);
2036
+ background: #ffffff;
2037
+ padding: 12px;
2038
+ }
2039
+
2040
+ .rbe-button-controls,
2041
+ .rbe-link-preview-fields {
2042
+ display: grid;
2043
+ grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.4fr) minmax(74px, 0.35fr) minmax(74px, 0.35fr) minmax(120px, 0.55fr);
2044
+ gap: 8px;
2045
+ align-items: center;
2046
+ margin-bottom: 12px;
2047
+ }
2048
+
2049
+ .rbe-link-preview-fields {
2050
+ grid-template-columns: minmax(180px, 1.2fr) minmax(140px, 1fr) minmax(180px, 1.4fr);
2051
+ }
2052
+
2053
+ .rbe-button-preview {
2054
+ min-height: 42px;
2055
+ }
2056
+
2057
+ .rbe-button-color-label {
2058
+ display: inline-flex;
2059
+ align-items: center;
2060
+ justify-content: space-between;
2061
+ gap: 8px;
2062
+ min-height: 34px;
2063
+ border: 1px solid var(--rbe-border);
2064
+ border-radius: 7px;
2065
+ background: #ffffff;
2066
+ color: var(--rbe-muted);
2067
+ padding: 6px 8px;
2068
+ font-size: 12px;
2069
+ font-weight: 740;
2070
+ }
2071
+
2072
+ .rbe-button-color-label input[type="color"] {
2073
+ width: 28px;
2074
+ height: 22px;
2075
+ padding: 0;
2076
+ border: 0;
2077
+ background: transparent;
2078
+ cursor: pointer;
2079
+ }
2080
+
2081
+ .rbe-button-link {
2082
+ display: inline-flex;
2083
+ align-items: center;
2084
+ justify-content: center;
2085
+ min-height: 38px;
2086
+ border-radius: 8px;
2087
+ padding: 8px 14px;
2088
+ font-weight: 760;
2089
+ text-decoration: none;
2090
+ transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
2091
+ }
2092
+
2093
+ .rbe-button-link:hover {
2094
+ transform: translateY(-1px);
2095
+ box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
2096
+ }
2097
+
2098
+ .rbe-button-link-primary {
2099
+ background: var(--rbe-accent);
2100
+ color: #ffffff;
2101
+ }
2102
+
2103
+ .rbe-button-link-secondary {
2104
+ border: 1px solid var(--rbe-border);
2105
+ background: #ffffff;
2106
+ color: var(--rbe-text);
2107
+ }
2108
+
2109
+ .rbe-button-link-success {
2110
+ background: var(--rbe-success);
2111
+ color: #ffffff;
2112
+ }
2113
+
2114
+ .rbe-button-link-dark {
2115
+ background: #111827;
2116
+ color: #ffffff;
2117
+ }
2118
+
2119
+ .rbe-toggle {
2120
+ background: #fbfdff;
2121
+ }
2122
+
2123
+ .rbe-toggle-summary {
2124
+ display: flex;
2125
+ gap: 8px;
2126
+ align-items: center;
2127
+ list-style: none;
2128
+ cursor: pointer;
2129
+ font-weight: 760;
2130
+ }
2131
+
2132
+ .rbe-toggle-summary::-webkit-details-marker {
2133
+ display: none;
2134
+ }
2135
+
2136
+ .rbe-toggle-arrow {
2137
+ width: 28px;
2138
+ height: 28px;
2139
+ display: grid;
2140
+ place-items: center;
2141
+ flex: 0 0 auto;
2142
+ border: 0;
2143
+ border-radius: 999px;
2144
+ background: transparent;
2145
+ color: var(--rbe-text);
2146
+ cursor: pointer;
2147
+ transition: transform 0.16s ease, background 0.16s ease;
2148
+ }
2149
+
2150
+ .rbe-toggle-arrow:hover {
2151
+ background: var(--rbe-accent-soft);
2152
+ }
2153
+
2154
+ .rbe-toggle[open] .rbe-toggle-arrow {
2155
+ transform: rotate(90deg);
2156
+ }
2157
+
2158
+ .rbe-toggle-title {
2159
+ width: min(520px, 100%);
2160
+ margin-left: 0;
2161
+ }
2162
+
2163
+ .rbe-toggle-content {
2164
+ margin-top: 5px;
2165
+ padding: 10px;
2166
+ border: 1px solid var(--rbe-border);
2167
+ border-radius: 7px;
2168
+ background: #ffffff;
2169
+ }
2170
+
2171
+ .rbe-toggle-nested-canvas {
2172
+ display: grid;
2173
+ gap: 12px;
2174
+ }
2175
+
2176
+ .rbe-toggle-nested-canvas > .rbe-block {
2177
+ margin-top: 0;
2178
+ padding-right: 0;
2179
+ }
2180
+
2181
+ .rbe-link-preview-card,
2182
+ .rbe-output-link-preview {
2183
+ display: grid;
2184
+ grid-template-columns: auto minmax(0, 1fr);
2185
+ gap: 4px 10px;
2186
+ align-items: center;
2187
+ border: 1px solid var(--rbe-border);
2188
+ border-radius: 8px;
2189
+ background: #f8fbff;
2190
+ color: var(--rbe-text);
2191
+ padding: 12px;
2192
+ text-decoration: none;
2193
+ }
2194
+
2195
+ .rbe-link-preview-icon {
2196
+ grid-row: span 2;
2197
+ display: grid;
2198
+ place-items: center;
2199
+ width: 36px;
2200
+ height: 36px;
2201
+ border-radius: 8px;
2202
+ background: #eaf1ff;
2203
+ color: var(--rbe-accent);
2204
+ }
2205
+
2206
+ .rbe-link-preview-card-title,
2207
+ .rbe-output-link-preview strong {
2208
+ font-weight: 780;
2209
+ }
2210
+
2211
+ .rbe-link-preview-card-description,
2212
+ .rbe-output-link-preview span:last-child {
2213
+ color: var(--rbe-muted);
2214
+ font-size: 13px;
2215
+ }
2216
+
2217
+ .rbe-output-delimiter {
2218
+ border: 0;
2219
+ height: 1px;
2220
+ background: var(--rbe-border-strong);
2221
+ margin: 20px 0;
2222
+ }
2223
+
2224
+ .rbe-output-delimiter-dashed {
2225
+ height: 0;
2226
+ border-top: 2px dashed var(--rbe-border-strong);
2227
+ background: transparent;
2228
+ }
2229
+
2230
+ .rbe-output-delimiter-dotted {
2231
+ height: 0;
2232
+ border-top: 3px dotted var(--rbe-border-strong);
2233
+ background: transparent;
2234
+ }
2235
+
2236
+ .rbe-output-delimiter-thick {
2237
+ height: 4px;
2238
+ border-radius: 999px;
2239
+ }
2240
+
2241
+ .rbe-output-quote,
2242
+ .preview blockquote.rbe-output-quote {
2243
+ border-left: 5px solid #a3aab8;
2244
+ border-radius: 8px;
2245
+ background: #f3f4f6;
2246
+ color: #263244;
2247
+ margin: 0 0 15px;
2248
+ padding: 14px 16px;
2249
+ font-style: italic;
2250
+ }
2251
+
2252
+ .rbe-output-quote footer {
2253
+ margin-top: 8px;
2254
+ color: var(--rbe-muted);
2255
+ font-size: 13px;
2256
+ }
2257
+
2258
+ .rbe-output-code {
2259
+ overflow: hidden;
2260
+ border: 1px solid var(--rbe-border);
2261
+ border-radius: 8px;
2262
+ background: var(--rbe-code-bg, #f3f4f6);
2263
+ color: var(--rbe-code-text, #172033);
2264
+ margin: 0 0 15px;
2265
+ }
2266
+
2267
+ .rbe-output-code-title {
2268
+ padding: 7px 10px;
2269
+ border-bottom: 1px solid rgba(15, 23, 42, 0.12);
2270
+ background: var(--rbe-code-header-bg, #e5e7eb);
2271
+ color: var(--rbe-code-header-text, #172033);
2272
+ font-size: 12px;
2273
+ font-weight: 760;
2274
+ text-transform: uppercase;
2275
+ letter-spacing: 0;
2276
+ }
2277
+
2278
+ .rbe-output-code pre {
2279
+ max-height: 360px;
2280
+ margin: 0;
2281
+ padding: 12px;
2282
+ overflow: auto;
2283
+ }
2284
+
2285
+ .rbe-output-code code {
2286
+ font: 13px/1.5 "Cascadia Code", Consolas, "Liberation Mono", monospace;
2287
+ white-space: pre;
2288
+ }
2289
+
2290
+ .rbe-output-toggle {
2291
+ border: 1px solid var(--rbe-border);
2292
+ border-radius: 8px;
2293
+ background: #fbfdff;
2294
+ padding: 10px 12px;
2295
+ margin: 0 0 15px;
2296
+ }
2297
+
2298
+ .rbe-output-toggle summary {
2299
+ cursor: pointer;
2300
+ font-weight: 760;
2301
+ }
2302
+
2303
+ .rbe-raw-preview {
2304
+ margin-top: 10px;
2305
+ background: #fbfdff;
2306
+ overflow: hidden;
2307
+ }
2308
+
2309
+ .rbe-raw-frame {
2310
+ display: block;
2311
+ width: 100%;
2312
+ min-height: 360px;
2313
+ border: 0;
2314
+ border-radius: calc(var(--rbe-radius) - 2px);
2315
+ background: #ffffff;
2316
+ }
2317
+
2318
+ .rbe-output-raw-frame {
2319
+ display: block;
2320
+ width: 100%;
2321
+ min-height: 420px;
2322
+ border: 1px solid var(--rbe-border);
2323
+ border-radius: 8px;
2324
+ background: #ffffff;
2325
+ margin: 0 0 15px;
2326
+ }
2327
+
2328
+ .rbe-output-raw-html {
2329
+ display: block;
2330
+ width: 100%;
2331
+ margin: 0 0 15px;
2332
+ }
2333
+
2334
+ .rbe-output-raw-html > *:first-child {
2335
+ margin-top: 0;
2336
+ }
2337
+
2338
+ .rbe-output-raw-html > *:last-child {
2339
+ margin-bottom: 0;
2340
+ }
2341
+
2342
+ .rbe-attachment {
2343
+ display: block;
2344
+ }
2345
+
2346
+ .rbe-attachment-grid {
2347
+ position: relative;
2348
+ display: flex;
2349
+ flex-wrap: wrap;
2350
+ justify-content: center;
2351
+ gap: 10px;
2352
+ align-items: start;
2353
+ margin-bottom: 15px;
2354
+ }
2355
+
2356
+ .rbe-attachment-icon {
2357
+ width: 54px;
2358
+ height: 54px;
2359
+ display: grid;
2360
+ place-items: center;
2361
+ border-radius: 7px;
2362
+ background: #e9f7f1;
2363
+ color: var(--rbe-success);
2364
+ font-weight: 780;
2365
+ font-size: 22px;
2366
+ }
2367
+
2368
+ .rbe-attachment-fields {
2369
+ display: grid;
2370
+ gap: 8px;
2371
+ }
2372
+
2373
+ .rbe-attachment-link {
2374
+ color: var(--rbe-accent);
2375
+ font-weight: 650;
2376
+ }
2377
+
2378
+ .rbe-attachment-label {
2379
+ display: none;
2380
+ color: var(--rbe-text);
2381
+ font-weight: 720;
2382
+ }
2383
+
2384
+ .rbe-attachment-card {
2385
+ position: relative;
2386
+ width: 112px;
2387
+ min-height: 112px;
2388
+ display: inline-flex;
2389
+ flex-direction: column;
2390
+ align-items: center;
2391
+ justify-content: center;
2392
+ gap: 5px;
2393
+ border: 1px solid var(--rbe-border);
2394
+ border-radius: 10px;
2395
+ background: #f8fbff;
2396
+ color: var(--rbe-text);
2397
+ text-align: center;
2398
+ text-decoration: none;
2399
+ padding: 10px;
2400
+ overflow: hidden;
2401
+ box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
2402
+ transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
2403
+ }
2404
+
2405
+ .rbe-attachment-card-link {
2406
+ width: 100%;
2407
+ min-height: 90px;
2408
+ display: inline-flex;
2409
+ flex-direction: column;
2410
+ align-items: center;
2411
+ justify-content: center;
2412
+ gap: 5px;
2413
+ color: inherit;
2414
+ text-align: center;
2415
+ text-decoration: none;
2416
+ transition: filter 0.18s ease, transform 0.18s ease;
2417
+ }
2418
+
2419
+ .rbe-attachment-card:hover {
2420
+ border-color: var(--rbe-accent);
2421
+ box-shadow: 0 14px 28px rgba(37, 99, 235, 0.16);
2422
+ transform: translateY(-1px);
2423
+ }
2424
+
2425
+ .rbe-attachment-card-icon {
2426
+ color: var(--rbe-success);
2427
+ font-size: 28px;
2428
+ line-height: 1;
2429
+ }
2430
+
2431
+ .rbe-attachment-card[data-kind="pdf"] .rbe-attachment-card-icon,
2432
+ .rbe-attachment-card[data-kind="pdf"] .rbe-attachment-card-type {
2433
+ color: #dc2626;
2434
+ }
2435
+
2436
+ .rbe-attachment-card[data-kind="word"] .rbe-attachment-card-icon,
2437
+ .rbe-attachment-card[data-kind="word"] .rbe-attachment-card-type {
2438
+ color: #2563eb;
2439
+ }
2440
+
2441
+ .rbe-attachment-card[data-kind="excel"] .rbe-attachment-card-icon,
2442
+ .rbe-attachment-card[data-kind="excel"] .rbe-attachment-card-type {
2443
+ color: #16a34a;
2444
+ }
2445
+
2446
+ .rbe-attachment-card[data-kind="powerpoint"] .rbe-attachment-card-icon,
2447
+ .rbe-attachment-card[data-kind="powerpoint"] .rbe-attachment-card-type {
2448
+ color: #ea580c;
2449
+ }
2450
+
2451
+ .rbe-attachment-card[data-kind="video"] .rbe-attachment-card-icon,
2452
+ .rbe-attachment-card[data-kind="video"] .rbe-attachment-card-type {
2453
+ color: #7c3aed;
2454
+ }
2455
+
2456
+ .rbe-attachment-card[data-kind="text"] .rbe-attachment-card-icon,
2457
+ .rbe-attachment-card[data-kind="text"] .rbe-attachment-card-type {
2458
+ color: #475569;
2459
+ }
2460
+
2461
+ .rbe-attachment-card-type {
2462
+ color: #0f172a;
2463
+ font-size: 12px;
2464
+ font-weight: 820;
2465
+ letter-spacing: 0.04em;
2466
+ }
2467
+
2468
+ .rbe-attachment-card-name {
2469
+ max-width: 100%;
2470
+ color: #475467;
2471
+ font-size: 11px;
2472
+ line-height: 1.25;
2473
+ overflow: hidden;
2474
+ text-overflow: ellipsis;
2475
+ display: -webkit-box;
2476
+ -webkit-line-clamp: 2;
2477
+ -webkit-box-orient: vertical;
2478
+ }
2479
+
2480
+ .rbe-attachment-card small {
2481
+ color: #8a94a6;
2482
+ font-size: 10px;
2483
+ line-height: 1.2;
2484
+ }
2485
+
2486
+ .rbe-attachment-replace-hint {
2487
+ flex: 0 0 100%;
2488
+ color: #8a94a6;
2489
+ font-size: 11px;
2490
+ font-weight: 650;
2491
+ }
2492
+
2493
+ .rbe-attachment-delete-menu {
2494
+ position: absolute;
2495
+ inset: 0;
2496
+ z-index: 3;
2497
+ display: grid;
2498
+ place-items: center;
2499
+ opacity: 0;
2500
+ pointer-events: none;
2501
+ transition: opacity 0.18s ease;
2502
+ }
2503
+
2504
+ .rbe-attachment-card.is-editable:hover .rbe-attachment-delete-menu,
2505
+ .rbe-attachment-delete-menu:focus-within {
2506
+ opacity: 1;
2507
+ pointer-events: auto;
2508
+ }
2509
+
2510
+ .rbe-attachment-delete-menu .rbe-media-delete {
2511
+ position: static;
2512
+ width: 34px;
2513
+ height: 34px;
2514
+ opacity: 1;
2515
+ pointer-events: auto;
2516
+ transform: none;
2517
+ }
2518
+
2519
+ .rbe-inline-toolbar {
2520
+ position: fixed;
2521
+ z-index: 2147483001;
2522
+ transform: none;
2523
+ display: flex;
2524
+ flex-wrap: wrap;
2525
+ align-items: center;
2526
+ gap: 4px;
2527
+ max-width: calc(100vw - 16px);
2528
+ overflow-x: auto;
2529
+ padding: 5px;
2530
+ border: 1px solid var(--rbe-border);
2531
+ border-radius: var(--rbe-radius);
2532
+ background: #ffffff;
2533
+ box-shadow: var(--rbe-shadow);
2534
+ }
2535
+
2536
+ .rbe-inline-select {
2537
+ min-height: 30px;
2538
+ border-radius: 7px;
2539
+ font-size: 13px;
2540
+ }
2541
+
2542
+ .rbe-inline-toolbar[hidden],
2543
+ .rbe-menu[hidden] {
2544
+ display: none;
2545
+ }
2546
+
2547
+ .rbe-inline-btn {
2548
+ min-width: 30px;
2549
+ height: 30px;
2550
+ border-radius: 7px;
2551
+ padding: 0 8px;
2552
+ cursor: pointer;
2553
+ font-weight: 700;
2554
+ }
2555
+
2556
+ .rbe-inline-btn.is-active {
2557
+ border-color: var(--rbe-accent);
2558
+ background: var(--rbe-accent-soft);
2559
+ color: #143f91;
2560
+ box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
2561
+ }
2562
+
2563
+ .rbe-color-control {
2564
+ display: inline-flex;
2565
+ align-items: center;
2566
+ gap: 4px;
2567
+ min-height: 30px;
2568
+ border: 1px solid var(--rbe-border);
2569
+ border-radius: 7px;
2570
+ background: #ffffff;
2571
+ padding: 2px 4px;
2572
+ cursor: pointer;
2573
+ }
2574
+
2575
+ .rbe-color-icon {
2576
+ min-width: 14px;
2577
+ color: #111827;
2578
+ font-size: 13px;
2579
+ font-weight: 800;
2580
+ line-height: 1;
2581
+ text-align: center;
2582
+ }
2583
+
2584
+ .rbe-color-input {
2585
+ width: 24px;
2586
+ height: 24px;
2587
+ padding: 0;
2588
+ border: 0;
2589
+ border-radius: 5px;
2590
+ background: #fff;
2591
+ cursor: pointer;
2592
+ }
2593
+
2594
+ .rbe-color-reset {
2595
+ width: 20px;
2596
+ height: 20px;
2597
+ display: grid;
2598
+ place-items: center;
2599
+ border: 0;
2600
+ border-radius: 999px;
2601
+ background: transparent;
2602
+ color: var(--rbe-muted);
2603
+ padding: 0;
2604
+ cursor: pointer;
2605
+ font-size: 11px;
2606
+ }
2607
+
2608
+ .rbe-color-reset:hover {
2609
+ background: var(--rbe-surface-soft);
2610
+ color: var(--rbe-danger);
2611
+ }
2612
+
2613
+ .rbe .select2-container {
2614
+ font-family: var(--rbe-font);
2615
+ font-size: 14px;
2616
+ }
2617
+
2618
+ .rbe .select2-container--default .select2-selection--single {
2619
+ min-height: 34px;
2620
+ border: 1px solid var(--rbe-border);
2621
+ border-radius: 7px;
2622
+ background: var(--rbe-surface);
2623
+ }
2624
+
2625
+ .rbe .select2-container--default .select2-selection--single .select2-selection__rendered {
2626
+ line-height: 32px;
2627
+ color: var(--rbe-text);
2628
+ padding-left: 9px;
2629
+ }
2630
+
2631
+ .rbe .select2-container--default .select2-selection--single .select2-selection__arrow {
2632
+ height: 32px;
2633
+ }
2634
+
2635
+ .rbe-inline-toolbar .select2-container--default .select2-selection--single {
2636
+ min-height: 30px;
2637
+ }
2638
+
2639
+ .rbe-inline-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
2640
+ line-height: 28px;
2641
+ }
2642
+
2643
+ .select2-container--open {
2644
+ z-index: 2147483003;
2645
+ }
2646
+
2647
+ .select2-search--dropdown {
2648
+ display: none;
2649
+ }
2650
+
2651
+ .rbe-menu {
2652
+ position: fixed;
2653
+ z-index: 2147483000;
2654
+ width: min(340px, calc(100% - 24px));
2655
+ max-height: min(440px, calc(100vh - 24px));
2656
+ overflow: auto;
2657
+ border: 1px solid var(--rbe-border);
2658
+ border-radius: var(--rbe-radius);
2659
+ background: #ffffff;
2660
+ box-shadow: var(--rbe-shadow);
2661
+ padding: 8px;
2662
+ }
2663
+
2664
+ .rbe-menu-section + .rbe-menu-section {
2665
+ margin-top: 8px;
2666
+ padding-top: 8px;
2667
+ border-top: 1px solid var(--rbe-border);
2668
+ }
2669
+
2670
+ .rbe-menu-title {
2671
+ padding: 6px 8px;
2672
+ color: var(--rbe-muted);
2673
+ font-size: 12px;
2674
+ font-weight: 750;
2675
+ text-transform: uppercase;
2676
+ letter-spacing: 0;
2677
+ }
2678
+
2679
+ .rbe-menu-item {
2680
+ width: 100%;
2681
+ display: grid;
2682
+ grid-template-columns: 44px minmax(0, 1fr);
2683
+ gap: 8px;
2684
+ align-items: center;
2685
+ min-height: 50px;
2686
+ margin: 2px 0;
2687
+ padding: 7px;
2688
+ border-radius: 7px;
2689
+ cursor: pointer;
2690
+ text-align: left;
2691
+ }
2692
+
2693
+ .rbe-menu-icon {
2694
+ width: 34px;
2695
+ height: 34px;
2696
+ display: grid;
2697
+ place-items: center;
2698
+ border-radius: 7px;
2699
+ background: var(--rbe-surface-soft);
2700
+ color: var(--rbe-text);
2701
+ font-size: 12px;
2702
+ font-weight: 800;
2703
+ }
2704
+
2705
+ .rbe-menu-icon .rbe-fa-icon {
2706
+ font-size: 15px;
2707
+ }
2708
+
2709
+ .rbe-menu-item strong,
2710
+ .rbe-menu-item small {
2711
+ display: block;
2712
+ }
2713
+
2714
+ .rbe-menu-item strong {
2715
+ font-size: 14px;
2716
+ }
2717
+
2718
+ .rbe-menu-item small,
2719
+ .rbe-empty-menu {
2720
+ color: var(--rbe-muted);
2721
+ font-size: 12px;
2722
+ }
2723
+
2724
+ .rbe-empty-menu {
2725
+ padding: 12px;
2726
+ }
2727
+
2728
+ .rbe[data-readonly="true"] .rbe-block-controls,
2729
+ .rbe[data-readonly="true"] .rbe-block-actions,
2730
+ .rbe[data-readonly="true"] .rbe-editor-toolbar,
2731
+ .rbe[data-readonly="true"] .rbe-inline-toolbar {
2732
+ display: none;
2733
+ }
2734
+
2735
+ .rbe-output-checklist {
2736
+ display: grid;
2737
+ gap: 8px;
2738
+ margin: 0 0 15px;
2739
+ padding: 0;
2740
+ list-style: none;
2741
+ }
2742
+
2743
+ .rbe-output-checklist-item {
2744
+ display: grid;
2745
+ grid-template-columns: 22px minmax(0, 1fr);
2746
+ gap: 8px;
2747
+ align-items: start;
2748
+ }
2749
+
2750
+ .rbe-output-checklist-nested {
2751
+ grid-column: 2;
2752
+ margin: 6px 0 0;
2753
+ padding-left: 0;
2754
+ }
2755
+
2756
+ .rbe-output-check {
2757
+ width: 22px;
2758
+ height: 22px;
2759
+ display: inline-flex;
2760
+ align-items: center;
2761
+ justify-content: center;
2762
+ margin-top: 2px;
2763
+ color: #64748b;
2764
+ font-size: 18px;
2765
+ font-weight: 900;
2766
+ line-height: 1;
2767
+ }
2768
+
2769
+ .rbe-output-check.is-checked {
2770
+ color: #16a34a;
2771
+ }
2772
+
2773
+ .rbe-output-check.is-nested {
2774
+ font-size: 17px;
2775
+ }
2776
+
2777
+ .rbe-output-image-figure {
2778
+ margin: 0 0 15px;
2779
+ }
2780
+
2781
+ .rbe-output-image,
2782
+ .preview .rbe-output-image,
2783
+ .preview img {
2784
+ display: block;
2785
+ max-width: 100%;
2786
+ max-height: 360px;
2787
+ width: auto;
2788
+ height: auto;
2789
+ object-fit: contain;
2790
+ }
2791
+
2792
+ .rbe-output-image-figure figcaption {
2793
+ margin-top: 6px;
2794
+ color: var(--rbe-muted);
2795
+ font-size: 13px;
2796
+ }
2797
+
2798
+ .rbe-output-image-figure > figcaption,
2799
+ .rbe-output-audio > figcaption {
2800
+ display: none;
2801
+ }
2802
+
2803
+ .rbe-output-embed-figure {
2804
+ display: grid;
2805
+ justify-items: center;
2806
+ gap: 8px;
2807
+ margin: 0 0 15px;
2808
+ }
2809
+
2810
+ .rbe-output-embed,
2811
+ .preview .rbe-output-embed,
2812
+ .preview iframe {
2813
+ display: block;
2814
+ width: 100%;
2815
+ max-width: 560px;
2816
+ margin-left: auto;
2817
+ margin-right: auto;
2818
+ margin-bottom: 15px;
2819
+ aspect-ratio: 16 / 9;
2820
+ border: 0;
2821
+ border-radius: 7px;
2822
+ background: #111827;
2823
+ }
2824
+
2825
+ .rbe-output-embed-figure figcaption {
2826
+ text-align: center;
2827
+ color: var(--rbe-muted);
2828
+ font-size: 13px;
2829
+ font-weight: 650;
2830
+ }
2831
+
2832
+ .rbe-output-embed-link {
2833
+ text-align: center;
2834
+ }
2835
+
2836
+ .rbe-output-table-wrap {
2837
+ width: 100%;
2838
+ overflow: auto;
2839
+ margin: 0 0 15px;
2840
+ }
2841
+
2842
+ .rbe-output-table-wrap table {
2843
+ border-collapse: collapse;
2844
+ table-layout: fixed;
2845
+ }
2846
+
2847
+ .rbe-output-table-wrap th,
2848
+ .rbe-output-table-wrap td {
2849
+ border: 1px solid var(--rbe-border);
2850
+ padding: 8px;
2851
+ text-align: left;
2852
+ vertical-align: top;
2853
+ }
2854
+
2855
+ .rbe-output-table-wrap th {
2856
+ background: #eef5ff;
2857
+ }
2858
+
2859
+ .rbe-output-columns {
2860
+ display: grid;
2861
+ grid-template-columns: repeat(var(--rbe-columns, 2), minmax(180px, 1fr));
2862
+ gap: 12px;
2863
+ margin: 0 0 15px;
2864
+ overflow-x: auto;
2865
+ }
2866
+
2867
+ .rbe-output-column {
2868
+ border: 1px solid var(--rbe-border);
2869
+ border-radius: 8px;
2870
+ background: #ffffff;
2871
+ padding: 12px;
2872
+ min-width: 0;
2873
+ }
2874
+
2875
+ .rbe-output-column-header {
2876
+ margin: -12px -12px 10px;
2877
+ padding: 10px 12px;
2878
+ border-bottom: 1px solid var(--rbe-border);
2879
+ border-radius: 8px 8px 0 0;
2880
+ background: #eef5ff;
2881
+ font-weight: 760;
2882
+ text-align: left;
2883
+ }
2884
+
2885
+ .rbe-output-column-body {
2886
+ min-width: 0;
2887
+ }
2888
+
2889
+ @media (max-width: 760px) {
2890
+ .rbe-output-columns {
2891
+ grid-template-columns: 1fr;
2892
+ }
2893
+ }
2894
+
2895
+ .rbe-output-outline-list {
2896
+ display: grid;
2897
+ gap: 6px;
2898
+ margin: 0 0 15px;
2899
+ padding-left: 0;
2900
+ list-style: none;
2901
+ }
2902
+
2903
+ .rbe-output-outline-list .rbe-output-outline-list {
2904
+ margin: 6px 0 0 24px;
2905
+ }
2906
+
2907
+ .rbe-output-outline-list li {
2908
+ display: block;
2909
+ }
2910
+
2911
+ .rbe-output-list-marker {
2912
+ display: inline-block;
2913
+ min-width: 34px;
2914
+ margin-right: 6px;
2915
+ color: var(--rbe-muted);
2916
+ font-variant-numeric: tabular-nums;
2917
+ }
2918
+
2919
+ .rbe-output-callout,
2920
+ .preview .rbe-output-callout {
2921
+ display: block;
2922
+ padding: 12px 14px;
2923
+ margin: 0 0 15px;
2924
+ border-radius: 8px;
2925
+ color: var(--rbe-text);
2926
+ }
2927
+
2928
+ .rbe-output-callout-info {
2929
+ border-left: 5px solid var(--rbe-accent);
2930
+ background: #f6faff;
2931
+ }
2932
+
2933
+ .rbe-output-callout-success {
2934
+ border-left: 5px solid var(--rbe-success);
2935
+ background: #f2fbf7;
2936
+ }
2937
+
2938
+ .rbe-output-callout-warning {
2939
+ border-left: 5px solid var(--rbe-warning);
2940
+ background: #fff9ef;
2941
+ }
2942
+
2943
+ .rbe-output-callout-danger {
2944
+ border-left: 5px solid var(--rbe-danger);
2945
+ background: #fff5f5;
2946
+ }
2947
+
2948
+ .rbe-output-toggle > summary {
2949
+ margin-bottom: 5px;
2950
+ font-weight: 760;
2951
+ cursor: pointer;
2952
+ }
2953
+
2954
+ .rbe-comment-mark {
2955
+ background: #fff2a8;
2956
+ border-bottom: 2px dotted #b76b00;
2957
+ cursor: help;
2958
+ }
2959
+
2960
+ .rbe-output-annotation {
2961
+ position: relative;
2962
+ display: inline-block;
2963
+ background: #fff2a8;
2964
+ border-bottom: 2px dotted #b76b00;
2965
+ padding: 0 2px;
2966
+ }
2967
+
2968
+ .rbe-output-annotation::after {
2969
+ content: "";
2970
+ position: absolute;
2971
+ left: 0;
2972
+ top: 100%;
2973
+ display: none;
2974
+ width: min(280px, 82vw);
2975
+ height: 12px;
2976
+ }
2977
+
2978
+ .rbe-output-annotation-card {
2979
+ position: absolute;
2980
+ left: 0;
2981
+ top: calc(100% + 2px);
2982
+ z-index: 20;
2983
+ display: none;
2984
+ width: min(280px, 82vw);
2985
+ padding: 10px;
2986
+ border: 1px solid var(--rbe-border);
2987
+ border-radius: 8px;
2988
+ background: #ffffff;
2989
+ box-shadow: var(--rbe-shadow);
2990
+ color: var(--rbe-text);
2991
+ text-align: left;
2992
+ }
2993
+
2994
+ .rbe-output-annotation:hover::after,
2995
+ .rbe-output-annotation.is-open::after {
2996
+ display: block;
2997
+ }
2998
+
2999
+ .rbe-output-annotation:hover .rbe-output-annotation-card,
3000
+ .rbe-output-annotation:focus-within .rbe-output-annotation-card,
3001
+ .rbe-output-annotation.is-open .rbe-output-annotation-card {
3002
+ display: grid;
3003
+ gap: 8px;
3004
+ }
3005
+
3006
+ .rbe-output-annotation-note {
3007
+ color: var(--rbe-muted);
3008
+ font-size: 13px;
3009
+ }
3010
+
3011
+ .rbe-output-annotation-reply {
3012
+ width: 100%;
3013
+ min-height: 54px;
3014
+ border: 1px solid var(--rbe-border);
3015
+ border-radius: 7px;
3016
+ padding: 7px;
3017
+ font: inherit;
3018
+ resize: vertical;
3019
+ }
3020
+
3021
+ .rbe-output-annotation-actions {
3022
+ display: flex;
3023
+ justify-content: flex-end;
3024
+ gap: 6px;
3025
+ }
3026
+
3027
+ .rbe-output-annotation-actions button {
3028
+ width: 30px;
3029
+ height: 30px;
3030
+ border: 1px solid var(--rbe-border);
3031
+ border-radius: 7px;
3032
+ background: #ffffff;
3033
+ color: var(--rbe-text);
3034
+ cursor: pointer;
3035
+ }
3036
+
3037
+ .rbe-output-annotation-resolve:hover {
3038
+ border-color: var(--rbe-success);
3039
+ color: var(--rbe-success);
3040
+ }
3041
+
3042
+ .rbe-output-annotation-decline:hover {
3043
+ border-color: var(--rbe-danger);
3044
+ color: var(--rbe-danger);
3045
+ }
3046
+
3047
+ .rbe-output-annotation-decline-form[hidden] {
3048
+ display: none;
3049
+ }
3050
+
3051
+ .rbe-output-annotation-decline-form {
3052
+ display: grid;
3053
+ gap: 6px;
3054
+ }
3055
+
3056
+ .rbe-output-annotation-save-decline {
3057
+ justify-self: end;
3058
+ min-height: 30px;
3059
+ border: 1px solid var(--rbe-border);
3060
+ border-radius: 7px;
3061
+ background: #ffffff;
3062
+ color: var(--rbe-text);
3063
+ padding: 4px 9px;
3064
+ font: inherit;
3065
+ font-size: 12px;
3066
+ font-weight: 720;
3067
+ cursor: pointer;
3068
+ }
3069
+
3070
+ .rbe-output-annotation-save-decline:hover {
3071
+ border-color: var(--rbe-danger);
3072
+ color: var(--rbe-danger);
3073
+ }
3074
+
3075
+ .rbe-output-annotation-history {
3076
+ display: grid;
3077
+ gap: 4px;
3078
+ }
3079
+
3080
+ .rbe-output-annotation-history-item {
3081
+ display: block;
3082
+ border-radius: 6px;
3083
+ background: #f8fafc;
3084
+ color: var(--rbe-muted);
3085
+ padding: 5px 6px;
3086
+ font-size: 12px;
3087
+ }
3088
+
3089
+ .rbe-output-annotation.is-resolved {
3090
+ background: #ecfdf3;
3091
+ border-bottom-color: var(--rbe-success);
3092
+ }
3093
+
3094
+ .rbe-output-annotation.is-resolved .rbe-output-annotation-resolve {
3095
+ border-color: var(--rbe-success);
3096
+ background: var(--rbe-success);
3097
+ color: #ffffff;
3098
+ }
3099
+
3100
+ .rbe-output-annotation.is-declined {
3101
+ background: #fff5f5;
3102
+ border-bottom-color: var(--rbe-danger);
3103
+ }
3104
+
3105
+ .rbe-output-annotation.is-declined .rbe-output-annotation-decline {
3106
+ border-color: var(--rbe-danger);
3107
+ background: var(--rbe-danger);
3108
+ color: #ffffff;
3109
+ }
3110
+
3111
+ .preview ul,
3112
+ .preview ol {
3113
+ padding-left: 22px;
3114
+ }
3115
+
3116
+ .preview li > ul,
3117
+ .preview li > ol {
3118
+ margin-top: 6px;
3119
+ padding-left: 22px;
3120
+ }
3121
+
3122
+ .preview > * {
3123
+ margin-bottom: 15px;
3124
+ }
3125
+
3126
+ .preview .rbe-output-outline-list {
3127
+ padding-left: 0;
3128
+ }
3129
+
3130
+ .preview .rbe-output-outline-list .rbe-output-outline-list {
3131
+ padding-left: 0;
3132
+ }
3133
+
3134
+ .rbe[data-readonly="true"] .rbe-canvas {
3135
+ overflow-y: auto;
3136
+ }
3137
+
3138
+ .rbe[data-readonly="true"] .rbe-block {
3139
+ display: block;
3140
+ padding: 6px 10px;
3141
+ }
3142
+
3143
+ .rbe[data-readonly="true"] .rbe-block + .rbe-block {
3144
+ margin-top: 15px;
3145
+ }
3146
+
3147
+ .rbe[data-readonly="true"] .rbe-heading-wrap,
3148
+ .rbe[data-readonly="true"] .rbe-list-wrap,
3149
+ .rbe[data-readonly="true"] .rbe-checklist-wrap,
3150
+ .rbe[data-readonly="true"] .rbe-callout {
3151
+ display: block;
3152
+ }
3153
+
3154
+ .rbe[data-readonly="true"] .rbe-raw-input {
3155
+ display: none;
3156
+ }
3157
+
3158
+ .rbe[data-readonly="true"] .rbe-raw-preview {
3159
+ margin-top: 0;
3160
+ }
3161
+
3162
+ .rbe[data-readonly="true"] .rbe-upload-dropzone {
3163
+ display: none;
3164
+ }
3165
+
3166
+ .rbe[data-readonly="true"] .rbe-heading-level,
3167
+ .rbe[data-readonly="true"] .rbe-list-tools,
3168
+ .rbe[data-readonly="true"] .rbe-checklist-tools,
3169
+ .rbe[data-readonly="true"] .rbe-table-toolbar,
3170
+ .rbe[data-readonly="true"] .rbe-table-layout,
3171
+ .rbe[data-readonly="true"] .rbe-media-tools,
3172
+ .rbe[data-readonly="true"] .rbe-button-controls,
3173
+ .rbe[data-readonly="true"] .rbe-link-preview-fields,
3174
+ .rbe[data-readonly="true"] .rbe-toggle-tools,
3175
+ .rbe[data-readonly="true"] .rbe-divider-toolbar,
3176
+ .rbe[data-readonly="true"] .rbe-image-caption,
3177
+ .rbe[data-readonly="true"] .rbe-embed-caption,
3178
+ .rbe[data-readonly="true"] .rbe-quote-caption,
3179
+ .rbe[data-readonly="true"] .rbe-code-header,
3180
+ .rbe[data-readonly="true"] .rbe-table-heading-toggle,
3181
+ .rbe[data-readonly="true"] .rbe-attachment-name,
3182
+ .rbe[data-readonly="true"] .rbe-attachment-url,
3183
+ .rbe[data-readonly="true"] .rbe-attachment-file,
3184
+ .rbe[data-readonly="true"] .rbe-list-add,
3185
+ .rbe[data-readonly="true"] .rbe-list-remove,
3186
+ .rbe[data-readonly="true"] .rbe-checklist-add,
3187
+ .rbe[data-readonly="true"] .rbe-check-remove,
3188
+ .rbe[data-readonly="true"] .rbe-callout-tone {
3189
+ display: none;
3190
+ }
3191
+
3192
+ .rbe[data-readonly="true"] .rbe-list-item {
3193
+ grid-template-columns: 28px minmax(0, 1fr);
3194
+ }
3195
+
3196
+ .rbe[data-readonly="true"] .rbe-check-item {
3197
+ grid-template-columns: 28px minmax(0, 1fr);
3198
+ }
3199
+
3200
+ .rbe[data-readonly="true"] .rbe-attachment {
3201
+ padding: 10px;
3202
+ border: 1px solid var(--rbe-border);
3203
+ border-radius: var(--rbe-radius);
3204
+ background: #fbfdff;
3205
+ }
3206
+
3207
+ .rbe[data-readonly="true"] .rbe-attachment-fields {
3208
+ align-content: center;
3209
+ }
3210
+
3211
+ .rbe[data-readonly="true"] .rbe-attachment-link {
3212
+ display: inline-flex;
3213
+ align-items: center;
3214
+ min-height: 34px;
3215
+ }
3216
+
3217
+ .rbe[data-readonly="true"] .rbe-attachment-label {
3218
+ display: inline-flex;
3219
+ align-items: center;
3220
+ min-height: 34px;
3221
+ }
3222
+
3223
+ .rbe[data-readonly="true"] .rbe-editable {
3224
+ box-shadow: none;
3225
+ }
3226
+
3227
+ @media (max-width: 720px) {
3228
+ .rbe-shell-brand {
3229
+ margin-bottom: 10px;
3230
+ }
3231
+
3232
+ .rbe-shell-subtitle {
3233
+ font-size: 14px;
3234
+ line-height: 1.45;
3235
+ }
3236
+
3237
+ .rbe-shell-panel-title {
3238
+ grid-template-columns: 1fr;
3239
+ align-items: stretch;
3240
+ gap: 7px;
3241
+ }
3242
+
3243
+ .rbe-shell-heading,
3244
+ .rbe-shell-status,
3245
+ .rbe-shell-progress {
3246
+ grid-column: 1;
3247
+ justify-self: stretch;
3248
+ width: 100%;
3249
+ text-align: left;
3250
+ }
3251
+
3252
+ .rbe-shell-progress-text {
3253
+ text-align: left;
3254
+ }
3255
+
3256
+ .rbe-shell-editor-wrap {
3257
+ padding: 8px;
3258
+ }
3259
+
3260
+ .rbe-canvas {
3261
+ padding: 12px 8px 28px;
3262
+ min-height: min(var(--rbe-min-height), calc(100dvh - 172px));
3263
+ max-height: min(var(--rbe-max-height, 680px), calc(100dvh - 150px));
3264
+ }
3265
+
3266
+ .rbe-block {
3267
+ grid-template-columns: 30px minmax(0, 1fr);
3268
+ gap: 5px;
3269
+ }
3270
+
3271
+ .rbe-block-controls {
3272
+ opacity: 1;
3273
+ }
3274
+
3275
+ .rbe-control-btn {
3276
+ width: 25px;
3277
+ height: 25px;
3278
+ }
3279
+
3280
+ .rbe-heading-wrap,
3281
+ .rbe-list-wrap,
3282
+ .rbe-callout,
3283
+ .rbe-button-controls,
3284
+ .rbe-link-preview-fields {
3285
+ grid-template-columns: 1fr;
3286
+ }
3287
+
3288
+ .rbe-h1 {
3289
+ font-size: 30px;
3290
+ }
3291
+
3292
+ .rbe-h2 {
3293
+ font-size: 25px;
3294
+ }
3295
+
3296
+ .rbe-h3 {
3297
+ font-size: 21px;
3298
+ }
3299
+
3300
+ .rbe-media-tools {
3301
+ grid-template-columns: 1fr;
3302
+ }
3303
+
3304
+ .rbe-inline-toolbar {
3305
+ left: 8px !important;
3306
+ right: 8px !important;
3307
+ max-width: none;
3308
+ max-height: min(50dvh, 360px);
3309
+ overflow: auto;
3310
+ justify-content: flex-start;
3311
+ }
3312
+ }
3313
+
3314
+ @media (max-width: 560px) {
3315
+ .rbe-canvas {
3316
+ padding-left: 6px;
3317
+ padding-right: 6px;
3318
+ }
3319
+
3320
+ .rbe-block {
3321
+ grid-template-columns: minmax(0, 1fr);
3322
+ gap: 6px;
3323
+ }
3324
+
3325
+ .rbe-block-controls {
3326
+ grid-column: 1;
3327
+ grid-row: 1;
3328
+ justify-content: flex-start;
3329
+ padding-top: 0;
3330
+ }
3331
+
3332
+ .rbe-block-body {
3333
+ grid-column: 1;
3334
+ grid-row: 2;
3335
+ overflow-x: clip;
3336
+ }
3337
+
3338
+ .rbe-table-toolbar {
3339
+ gap: 6px;
3340
+ max-width: 100%;
3341
+ overflow-x: auto;
3342
+ flex-wrap: nowrap;
3343
+ padding-bottom: 2px;
3344
+ }
3345
+
3346
+ .rbe-table-toolbar .rbe-small-btn {
3347
+ flex: 0 0 auto;
3348
+ min-width: 32px;
3349
+ height: 32px;
3350
+ padding: 4px 7px;
3351
+ }
3352
+
3353
+ .rbe-table-layout {
3354
+ max-width: 100%;
3355
+ overflow: hidden;
3356
+ }
3357
+
3358
+ .rbe-table-wrap,
3359
+ .rbe-plugin-card {
3360
+ width: calc(100% - 8px);
3361
+ max-width: calc(100% - 8px);
3362
+ overflow: hidden;
3363
+ }
3364
+
3365
+ .rbe-table-width,
3366
+ .rbe-table-border-width {
3367
+ width: calc(100% - 8px);
3368
+ justify-self: start;
3369
+ }
3370
+
3371
+ .rbe-table-width-label,
3372
+ .rbe-table-border-width-label {
3373
+ grid-template-columns: 48px minmax(0, 1fr);
3374
+ }
3375
+
3376
+ .rbe-table-align-label,
3377
+ .rbe-table-border-style-label {
3378
+ grid-template-columns: 48px minmax(0, 1fr);
3379
+ }
3380
+
3381
+ .rbe-table-width-value,
3382
+ .rbe-table-border-width-value {
3383
+ display: none;
3384
+ }
3385
+ }
3386
+
3387
+ @media (max-width: 1024px) {
3388
+ .rbe-editor-toolbar {
3389
+ justify-content: flex-start;
3390
+ }
3391
+
3392
+ .rbe-html-preview-modal {
3393
+ padding: 12px;
3394
+ }
3395
+
3396
+ .rbe-html-preview-shell {
3397
+ height: calc(100dvh - 24px);
3398
+ }
3399
+
3400
+ .rbe-code-header,
3401
+ .rbe-raw-header,
3402
+ .rbe-table-toolbar,
3403
+ .rbe-table-layout,
3404
+ .rbe-button-controls,
3405
+ .rbe-link-preview-fields {
3406
+ min-width: 0;
3407
+ }
3408
+
3409
+ .rbe-button-controls {
3410
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3411
+ }
3412
+
3413
+ .rbe-link-preview-fields {
3414
+ grid-template-columns: 1fr;
3415
+ }
3416
+
3417
+ .rbe-table-layout {
3418
+ display: grid;
3419
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3420
+ align-items: stretch;
3421
+ }
3422
+
3423
+ .rbe-table-width-label,
3424
+ .rbe-table-border-width-label {
3425
+ display: grid;
3426
+ grid-template-columns: auto minmax(0, 1fr) auto;
3427
+ align-items: center;
3428
+ min-width: 0;
3429
+ }
3430
+
3431
+ .rbe-table-align-label,
3432
+ .rbe-table-border-style-label {
3433
+ display: grid;
3434
+ grid-template-columns: auto minmax(0, 1fr);
3435
+ align-items: center;
3436
+ min-width: 0;
3437
+ }
3438
+
3439
+ .rbe-table-width,
3440
+ .rbe-table-border-width {
3441
+ width: 100%;
3442
+ min-width: 0;
3443
+ }
3444
+
3445
+ .rbe-output-table-wrap,
3446
+ .rbe-table-stage,
3447
+ .rbe-raw-preview,
3448
+ .rbe-output-raw-frame {
3449
+ max-width: 100%;
3450
+ }
3451
+ }
3452
+
3453
+ @media (max-width: 560px) {
3454
+ .rbe {
3455
+ --rbe-radius: 7px;
3456
+ }
3457
+
3458
+ .rbe-editor-toolbar {
3459
+ gap: 5px;
3460
+ }
3461
+
3462
+ .rbe-history-btn {
3463
+ min-height: 34px;
3464
+ padding: 5px 8px;
3465
+ }
3466
+
3467
+ .rbe-history-btn .rbe-button-text {
3468
+ display: none;
3469
+ }
3470
+
3471
+ .rbe-save-btn .rbe-button-text {
3472
+ display: inline;
3473
+ }
3474
+
3475
+ .rbe-export-menu {
3476
+ right: auto;
3477
+ left: 0;
3478
+ }
3479
+
3480
+ .rbe-history-panel {
3481
+ right: auto;
3482
+ left: 0;
3483
+ width: min(320px, calc(100vw - 20px));
3484
+ }
3485
+
3486
+ .rbe-canvas {
3487
+ padding: 10px 6px 24px;
3488
+ }
3489
+
3490
+ .rbe-block {
3491
+ grid-template-columns: 1fr;
3492
+ gap: 7px;
3493
+ padding: 8px 6px;
3494
+ }
3495
+
3496
+ .rbe-block-controls {
3497
+ grid-row: 1;
3498
+ justify-content: flex-start;
3499
+ align-items: center;
3500
+ padding-top: 0;
3501
+ opacity: 1;
3502
+ }
3503
+
3504
+ .rbe-block-body {
3505
+ grid-row: 2;
3506
+ width: 100%;
3507
+ max-width: calc(100vw - 76px);
3508
+ overflow-x: hidden;
3509
+ }
3510
+
3511
+ .rbe-block-actions {
3512
+ position: static;
3513
+ grid-row: 3;
3514
+ justify-self: flex-start;
3515
+ max-width: 100%;
3516
+ overflow-x: auto;
3517
+ opacity: 1;
3518
+ pointer-events: auto;
3519
+ transform: none;
3520
+ }
3521
+
3522
+ .rbe-image,
3523
+ .rbe-embed,
3524
+ .rbe-attachment,
3525
+ .rbe-table-wrap,
3526
+ .rbe-callout,
3527
+ .rbe-raw-wrap,
3528
+ .rbe-button-block,
3529
+ .rbe-toggle,
3530
+ .rbe-link-preview {
3531
+ padding: 10px;
3532
+ }
3533
+
3534
+ .rbe-heading-wrap,
3535
+ .rbe-list-wrap,
3536
+ .rbe-checklist-wrap,
3537
+ .rbe-callout {
3538
+ grid-template-columns: 1fr;
3539
+ min-width: 0;
3540
+ max-width: 100%;
3541
+ }
3542
+
3543
+ .rbe-heading-level,
3544
+ .rbe-list-style,
3545
+ .rbe-callout-tone,
3546
+ .rbe-code-language,
3547
+ .rbe input[type="text"],
3548
+ .rbe input[type="url"],
3549
+ .rbe textarea,
3550
+ .rbe select {
3551
+ min-width: 0;
3552
+ }
3553
+
3554
+ .rbe-h1 {
3555
+ font-size: 27px;
3556
+ }
3557
+
3558
+ .rbe-h2 {
3559
+ font-size: 23px;
3560
+ }
3561
+
3562
+ .rbe-h3 {
3563
+ font-size: 20px;
3564
+ }
3565
+
3566
+ .rbe-paragraph,
3567
+ .rbe-callout .rbe-editable {
3568
+ width: calc(100vw - 96px) !important;
3569
+ max-width: 100% !important;
3570
+ }
3571
+
3572
+ .rbe-list,
3573
+ .rbe-checklist,
3574
+ .rbe-list-add {
3575
+ grid-column: 1;
3576
+ }
3577
+
3578
+ .rbe-list-tools,
3579
+ .rbe-checklist-tools {
3580
+ grid-template-columns: 1fr;
3581
+ }
3582
+
3583
+ .rbe-list,
3584
+ .rbe-checklist {
3585
+ padding-right: 10px;
3586
+ }
3587
+
3588
+ .rbe-list-item,
3589
+ .rbe-check-item {
3590
+ grid-template-columns: 22px 24px minmax(0, 1fr);
3591
+ gap: 5px;
3592
+ max-width: 100%;
3593
+ }
3594
+
3595
+ .rbe-list-marker,
3596
+ .rbe-check-toggle {
3597
+ grid-column: 1;
3598
+ grid-row: 1;
3599
+ }
3600
+
3601
+ .rbe-list-text,
3602
+ .rbe-check-text {
3603
+ grid-column: 3;
3604
+ grid-row: 1;
3605
+ }
3606
+
3607
+ .rbe-list-item .rbe-row-remove,
3608
+ .rbe-check-item .rbe-check-remove {
3609
+ grid-column: 2;
3610
+ grid-row: 1;
3611
+ justify-self: center;
3612
+ }
3613
+
3614
+ .rbe-row-add {
3615
+ justify-self: start;
3616
+ }
3617
+
3618
+ .rbe-list-item .rbe-row-remove,
3619
+ .rbe-check-item .rbe-check-remove {
3620
+ width: 24px;
3621
+ height: 24px;
3622
+ min-width: 24px;
3623
+ }
3624
+
3625
+ .rbe-check-toggle {
3626
+ width: 22px;
3627
+ height: 22px;
3628
+ }
3629
+
3630
+ .rbe-list-item[data-level="1"],
3631
+ .rbe-check-item[data-level="1"] {
3632
+ margin-left: 18px;
3633
+ }
3634
+
3635
+ .rbe-list-item[data-level="2"],
3636
+ .rbe-check-item[data-level="2"] {
3637
+ margin-left: 34px;
3638
+ }
3639
+
3640
+ .rbe-list-item[data-level="3"],
3641
+ .rbe-check-item[data-level="3"] {
3642
+ margin-left: 50px;
3643
+ }
3644
+
3645
+ .rbe-list-item[data-level="4"],
3646
+ .rbe-check-item[data-level="4"] {
3647
+ margin-left: 66px;
3648
+ }
3649
+
3650
+ .rbe-code-header .rbe-code-language,
3651
+ .rbe-code-header .select2-container,
3652
+ .rbe-inline-toolbar .select2-container {
3653
+ width: min(176px, 100%) !important;
3654
+ min-width: 0;
3655
+ }
3656
+
3657
+ .rbe-code-editor,
3658
+ .rbe-raw-editor {
3659
+ height: min(260px, 45dvh);
3660
+ }
3661
+
3662
+ .rbe-raw-frame {
3663
+ min-height: 260px;
3664
+ }
3665
+
3666
+ .rbe-dropzone,
3667
+ .rbe-upload-dropzone {
3668
+ min-height: 170px;
3669
+ padding: 20px 12px;
3670
+ }
3671
+
3672
+ .rbe-upload-icon {
3673
+ width: 54px;
3674
+ height: 44px;
3675
+ font-size: 42px;
3676
+ }
3677
+
3678
+ .rbe-table-layout {
3679
+ display: grid;
3680
+ grid-template-columns: 1fr;
3681
+ gap: 8px;
3682
+ }
3683
+
3684
+ .rbe-table-width,
3685
+ .rbe-table-border-width {
3686
+ width: 100%;
3687
+ min-width: 0;
3688
+ }
3689
+
3690
+ .rbe-table-width-label,
3691
+ .rbe-table-border-width-label,
3692
+ .rbe-table-align-label,
3693
+ .rbe-table-border-style-label {
3694
+ width: 100%;
3695
+ }
3696
+
3697
+ .rbe-table-width-value,
3698
+ .rbe-table-border-width-value {
3699
+ min-width: 34px;
3700
+ text-align: right;
3701
+ white-space: nowrap;
3702
+ }
3703
+
3704
+ .rbe-table-layout .select2-container,
3705
+ .rbe-table-align,
3706
+ .rbe-table-border-style {
3707
+ width: 100% !important;
3708
+ }
3709
+
3710
+ .rbe-button-controls {
3711
+ grid-template-columns: 1fr;
3712
+ }
3713
+
3714
+ .rbe-output-embed,
3715
+ .preview .rbe-output-embed,
3716
+ .preview iframe {
3717
+ max-width: 100%;
3718
+ }
3719
+
3720
+ .rbe-output-columns {
3721
+ grid-template-columns: 1fr !important;
3722
+ }
3723
+
3724
+ .rbe-output-code pre,
3725
+ .rbe-output-table-wrap,
3726
+ .rbe-output-raw-frame {
3727
+ max-height: 52dvh;
3728
+ }
3729
+
3730
+ .rbe-output-annotation-card {
3731
+ left: 50%;
3732
+ transform: translateX(-50%);
3733
+ }
3734
+ }
3735
+
3736
+ @media (max-width: 380px) {
3737
+ .rbe-history-btn {
3738
+ min-width: 34px;
3739
+ justify-content: center;
3740
+ padding-left: 7px;
3741
+ padding-right: 7px;
3742
+ }
3743
+
3744
+ .rbe-save-btn .rbe-button-text {
3745
+ display: none;
3746
+ }
3747
+
3748
+ .rbe-inline-btn {
3749
+ min-width: 28px;
3750
+ padding: 0 6px;
3751
+ }
3752
+
3753
+ .rbe-color-input {
3754
+ width: 22px;
3755
+ height: 22px;
3756
+ }
3757
+
3758
+ .rbe-list-tools,
3759
+ .rbe-checklist-tools {
3760
+ grid-template-columns: 1fr;
3761
+ }
3762
+ }