@rufous/ui 0.1.86 → 0.1.88

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.
package/dist/main.css CHANGED
@@ -1099,7 +1099,7 @@
1099
1099
  --text-secondary: #666666;
1100
1100
  --border-color: #e0e0e0;
1101
1101
  --hover-color: #fff5f5;
1102
- --selection-color: #fce4ec;
1102
+ --selection-color: #a41b0614;
1103
1103
  --icon-color: #a41b06;
1104
1104
  }
1105
1105
  .dialog-overlay.overlay-fullscreen {
@@ -5832,6 +5832,158 @@ pre {
5832
5832
  filter: grayscale(60%);
5833
5833
  }
5834
5834
 
5835
+ /* lib/styles/phone-field.css */
5836
+ .rf-phone-field {
5837
+ position: relative;
5838
+ }
5839
+ .rf-phone-field--margin-normal {
5840
+ margin-top: 16px;
5841
+ margin-bottom: 8px;
5842
+ }
5843
+ .rf-phone-field--margin-dense {
5844
+ margin-top: 8px;
5845
+ margin-bottom: 4px;
5846
+ }
5847
+ .rf-phone-field__country-selector {
5848
+ display: flex;
5849
+ align-items: center;
5850
+ gap: 2px;
5851
+ padding: 0 2px 0 8px;
5852
+ cursor: pointer;
5853
+ user-select: none;
5854
+ flex-shrink: 0;
5855
+ border: none;
5856
+ background: none;
5857
+ outline: none;
5858
+ border-radius: 4px;
5859
+ transition: background-color 0.15s;
5860
+ }
5861
+ .rf-text-field--filled .rf-phone-field__country-selector {
5862
+ padding: 17px 2px 0 8px;
5863
+ }
5864
+ .rf-text-field--standard .rf-phone-field__country-selector {
5865
+ padding: 15px 2px 0 8px;
5866
+ }
5867
+ .rf-phone-field__country-selector:hover {
5868
+ cursor: pointer;
5869
+ }
5870
+ .rf-phone-field__country-selector--disabled {
5871
+ pointer-events: none;
5872
+ opacity: 0.5;
5873
+ cursor: default;
5874
+ }
5875
+ .rf-phone-field__flag {
5876
+ font-size: 18px;
5877
+ line-height: 1;
5878
+ }
5879
+ .rf-phone-field__dial-code {
5880
+ color: var(--tf-text-color, #333);
5881
+ white-space: nowrap;
5882
+ }
5883
+ .rf-phone-field__chevron {
5884
+ display: flex;
5885
+ align-items: center;
5886
+ color: var(--tf-placeholder-color, #888);
5887
+ transition: transform 0.2s;
5888
+ }
5889
+ .rf-phone-field .rf-text-field__wrapper {
5890
+ display: flex;
5891
+ align-items: center;
5892
+ }
5893
+ .rf-phone-field .rf-text-field__label {
5894
+ transform: translate(14px, -9px) scale(0.75) !important;
5895
+ }
5896
+ .rf-phone-field.rf-text-field--filled .rf-text-field__label {
5897
+ transform: translate(12px, 4px) scale(0.75) !important;
5898
+ }
5899
+ .rf-phone-field.rf-text-field--standard .rf-text-field__label {
5900
+ transform: translate(0, -18px) scale(0.75) !important;
5901
+ }
5902
+ .rf-phone-field.rf-text-field--small.rf-text-field--outlined .rf-text-field__label {
5903
+ transform: translate(14px, -7px) scale(0.75) !important;
5904
+ }
5905
+ .rf-phone-field.rf-text-field--small.rf-text-field--filled .rf-text-field__label {
5906
+ transform: translate(12px, 2px) scale(0.75) !important;
5907
+ }
5908
+ .rf-phone-field .rf-text-field__legend {
5909
+ max-width: 100% !important;
5910
+ }
5911
+ .rf-phone-field__divider {
5912
+ width: 1px;
5913
+ height: 60%;
5914
+ background-color: var(--tf-border-color, #c4c4c4);
5915
+ flex-shrink: 0;
5916
+ }
5917
+ .rf-phone-field__input {
5918
+ flex: 1;
5919
+ min-width: 0;
5920
+ }
5921
+ .rf-phone-field__popup.rf-select__popup {
5922
+ position: fixed;
5923
+ top: 0;
5924
+ left: 0;
5925
+ right: auto;
5926
+ width: max-content;
5927
+ min-width: 280px;
5928
+ max-width: 360px;
5929
+ z-index: 1400;
5930
+ overflow: hidden;
5931
+ }
5932
+ .rf-phone-field__search-indicator {
5933
+ padding: 6px 12px;
5934
+ font-size: 12px;
5935
+ color: var(--tf-placeholder-color, #888);
5936
+ border-bottom: 1px solid var(--tf-border-color, #e0e0e0);
5937
+ background: var(--rf-surface-variant, #f5f5f5);
5938
+ }
5939
+ .rf-phone-field__popup .rf-select__listbox {
5940
+ max-height: inherit;
5941
+ }
5942
+ .rf-phone-field__option {
5943
+ display: flex;
5944
+ align-items: center;
5945
+ gap: 10px;
5946
+ padding: 8px 12px;
5947
+ cursor: pointer;
5948
+ transition: background-color 0.1s;
5949
+ font-size: 14px;
5950
+ }
5951
+ .rf-phone-field__option:hover,
5952
+ .rf-phone-field__option--focused {
5953
+ background-color: var(--hover-color);
5954
+ }
5955
+ .rf-phone-field__option--selected {
5956
+ background-color: var(--selection-color);
5957
+ font-weight: 500;
5958
+ }
5959
+ .rf-phone-field__option--selected.rf-phone-field__option--focused {
5960
+ background-color: var(--rf-selected-hover, rgba(25, 118, 210, 0.12));
5961
+ }
5962
+ .rf-phone-field__option-flag {
5963
+ font-size: 18px;
5964
+ line-height: 1;
5965
+ flex-shrink: 0;
5966
+ }
5967
+ .rf-phone-field__option-name {
5968
+ flex: 1;
5969
+ min-width: 0;
5970
+ overflow: hidden;
5971
+ text-overflow: ellipsis;
5972
+ white-space: nowrap;
5973
+ color: var(--tf-text-color, #333);
5974
+ }
5975
+ .rf-phone-field__option-code {
5976
+ color: var(--tf-placeholder-color, #888);
5977
+ font-size: 13px;
5978
+ flex-shrink: 0;
5979
+ }
5980
+ .rf-phone-field__no-results {
5981
+ padding: 12px;
5982
+ text-align: center;
5983
+ color: var(--tf-placeholder-color, #888);
5984
+ font-size: 14px;
5985
+ }
5986
+
5835
5987
  /* lib/styles/button.css */
5836
5988
  .btn {
5837
5989
  padding: 10px 20px;
@@ -6270,7 +6422,7 @@ pre {
6270
6422
  margin-top: 17px;
6271
6423
  }
6272
6424
  .rf-text-field--adorned-start .rf-text-field__input {
6273
- padding-left: 8px;
6425
+ padding-left: 0px;
6274
6426
  }
6275
6427
  .rf-text-field--adorned-end .rf-text-field__input {
6276
6428
  padding-right: 8px;
@@ -13800,6 +13952,2172 @@ svg.jodit-icon {
13800
13952
  .jodit_theme_dark.jodit-dialog .jodit-filebrowser__files.active .jodit-filebrowser__files-item-info {
13801
13953
  background-color: #d1cccc;
13802
13954
  }
13955
+
13956
+ /* lib/styles/rufous-text-editor.css */
13957
+ .rf-rte-wrapper {
13958
+ border: 1px solid #dadce0;
13959
+ border-radius: 8px;
13960
+ overflow: visible;
13961
+ background: #fff;
13962
+ box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1), 0 2px 6px rgba(60, 64, 67, 0.08);
13963
+ position: relative;
13964
+ z-index: 1;
13965
+ display: flex;
13966
+ flex-direction: column;
13967
+ flex: 1;
13968
+ min-height: 0;
13969
+ }
13970
+ .rf-rte-wrapper:focus-within,
13971
+ .rf-rte-wrapper:has(.dropdown-menu),
13972
+ .rf-rte-wrapper:has(.ai-commands-panel),
13973
+ .rf-rte-wrapper:has(.tts-panel),
13974
+ .rf-rte-wrapper:has(.stt-panel),
13975
+ .rf-rte-wrapper:has(.image-toolbar),
13976
+ .rf-rte-wrapper:has(.translate-toast-popup) {
13977
+ z-index: 100;
13978
+ }
13979
+ .rf-rte-wrapper.fullscreen {
13980
+ position: fixed;
13981
+ top: 0;
13982
+ left: 0;
13983
+ right: 0;
13984
+ bottom: 0;
13985
+ z-index: 9999;
13986
+ border-radius: 0;
13987
+ margin: 0;
13988
+ max-width: none;
13989
+ display: flex;
13990
+ flex-direction: column;
13991
+ }
13992
+ .rf-rte-wrapper.fullscreen .tiptap {
13993
+ flex: 1;
13994
+ overflow-y: auto;
13995
+ }
13996
+ .rf-rte-wrapper .toolbar {
13997
+ border-bottom: 1px solid #dadce0;
13998
+ background: #f9fbfd;
13999
+ border-radius: 8px 8px 0 0;
14000
+ flex-shrink: 0;
14001
+ position: relative;
14002
+ z-index: 10;
14003
+ overflow: visible;
14004
+ }
14005
+ .rf-rte-wrapper .toolbar-row {
14006
+ display: flex;
14007
+ align-items: center;
14008
+ gap: 1px;
14009
+ padding: 4px 8px;
14010
+ flex-wrap: wrap;
14011
+ }
14012
+ .rf-rte-wrapper .toolbar-row + .toolbar-row {
14013
+ border-top: 1px solid #e8eaed;
14014
+ }
14015
+ .rf-rte-wrapper .toolbar-group {
14016
+ display: flex;
14017
+ align-items: center;
14018
+ gap: 1px;
14019
+ padding: 0 4px;
14020
+ border-right: 1px solid #dadce0;
14021
+ margin-right: 4px;
14022
+ }
14023
+ .rf-rte-wrapper .toolbar-group:last-child {
14024
+ border-right: none;
14025
+ margin-right: 0;
14026
+ }
14027
+ .rf-rte-wrapper .toolbar-btn {
14028
+ display: inline-flex;
14029
+ align-items: center;
14030
+ justify-content: center;
14031
+ min-width: 34px;
14032
+ height: 34px;
14033
+ padding: 0 5px;
14034
+ border: none;
14035
+ border-radius: 4px;
14036
+ background: transparent;
14037
+ color: #444746;
14038
+ font-size: 14px;
14039
+ font-weight: 600;
14040
+ cursor: pointer;
14041
+ transition: background 0.15s ease, color 0.15s ease;
14042
+ line-height: 1;
14043
+ position: relative;
14044
+ flex-shrink: 0;
14045
+ }
14046
+ .rf-rte-wrapper .toolbar-btn svg {
14047
+ width: 20px;
14048
+ height: 20px;
14049
+ flex-shrink: 0;
14050
+ stroke-width: 2.2;
14051
+ }
14052
+ .rf-rte-wrapper .toolbar-btn:hover {
14053
+ background: #f5d5d5;
14054
+ color: #202124;
14055
+ }
14056
+ .rf-rte-wrapper .toolbar-btn.is-active,
14057
+ .rf-rte-wrapper .toolbar-btn.is-active:hover {
14058
+ background: #f5d5d5;
14059
+ color: #202124;
14060
+ }
14061
+ .rf-rte-wrapper .toolbar-btn:disabled {
14062
+ opacity: 0.3;
14063
+ cursor: not-allowed;
14064
+ }
14065
+ .rf-rte-wrapper .dropdown {
14066
+ position: relative;
14067
+ display: inline-flex;
14068
+ }
14069
+ .rf-rte-wrapper .dropdown-arrow {
14070
+ font-size: 8px;
14071
+ margin-left: 2px;
14072
+ opacity: 0.5;
14073
+ }
14074
+ .rf-rte-wrapper .dropdown-menu {
14075
+ position: absolute;
14076
+ top: 100%;
14077
+ left: 0;
14078
+ z-index: 1000;
14079
+ min-width: 170px;
14080
+ padding: 4px;
14081
+ background: #fff;
14082
+ border: 1px solid #dadce0;
14083
+ border-radius: 8px;
14084
+ box-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.3);
14085
+ margin-top: 4px;
14086
+ }
14087
+ .rf-rte-wrapper .dropdown-item {
14088
+ display: flex;
14089
+ align-items: center;
14090
+ gap: 10px;
14091
+ width: 100%;
14092
+ padding: 7px 12px;
14093
+ border: none;
14094
+ border-radius: 4px;
14095
+ background: transparent;
14096
+ color: #3c4043;
14097
+ font-size: 13px;
14098
+ cursor: pointer;
14099
+ text-align: left;
14100
+ white-space: nowrap;
14101
+ transition: background 0.12s ease;
14102
+ }
14103
+ .rf-rte-wrapper .dropdown-item svg {
14104
+ width: 16px;
14105
+ height: 16px;
14106
+ flex-shrink: 0;
14107
+ }
14108
+ .rf-rte-wrapper .dropdown-item:hover {
14109
+ background: #e8eaed;
14110
+ color: #202124;
14111
+ }
14112
+ .rf-rte-wrapper .dropdown-item.is-active {
14113
+ background: #d3e3fd;
14114
+ color: #041e49;
14115
+ font-weight: 500;
14116
+ }
14117
+ .rf-rte-wrapper .dropdown-item.heading-1 {
14118
+ font-size: 20px;
14119
+ font-weight: 700;
14120
+ }
14121
+ .rf-rte-wrapper .dropdown-item.heading-2 {
14122
+ font-size: 17px;
14123
+ font-weight: 600;
14124
+ }
14125
+ .rf-rte-wrapper .dropdown-item.heading-3 {
14126
+ font-size: 15px;
14127
+ font-weight: 600;
14128
+ }
14129
+ .rf-rte-wrapper .dropdown-item.heading-4 {
14130
+ font-size: 14px;
14131
+ font-weight: 600;
14132
+ }
14133
+ .rf-rte-wrapper .dropdown-item.heading-5 {
14134
+ font-size: 13px;
14135
+ font-weight: 600;
14136
+ }
14137
+ .rf-rte-wrapper .dropdown-item.heading-6 {
14138
+ font-size: 12px;
14139
+ font-weight: 600;
14140
+ }
14141
+ .rf-rte-wrapper .dropdown-menu:has(.font-size-item) {
14142
+ max-height: 300px;
14143
+ overflow-y: auto;
14144
+ min-width: 80px;
14145
+ }
14146
+ .rf-rte-wrapper .font-size-item {
14147
+ justify-content: center;
14148
+ font-size: 13px;
14149
+ }
14150
+ .rf-rte-wrapper .dropdown-menu:has(.font-family-item) {
14151
+ max-height: 320px;
14152
+ overflow-y: auto;
14153
+ min-width: 180px;
14154
+ }
14155
+ .rf-rte-wrapper .font-family-item {
14156
+ font-size: 14px;
14157
+ padding: 8px 12px;
14158
+ }
14159
+ .rf-rte-wrapper .dropdown-menu:has(.line-height-item) {
14160
+ max-height: 300px;
14161
+ overflow-y: auto;
14162
+ min-width: 70px;
14163
+ }
14164
+ .rf-rte-wrapper .line-height-item {
14165
+ justify-content: center;
14166
+ font-size: 13px;
14167
+ padding: 6px 12px;
14168
+ }
14169
+ .rf-rte-wrapper .bullet-style-item {
14170
+ font-size: 14px;
14171
+ padding: 8px 12px;
14172
+ gap: 10px;
14173
+ }
14174
+ .rf-rte-wrapper .bullet-style-icon {
14175
+ display: inline-flex;
14176
+ align-items: center;
14177
+ justify-content: center;
14178
+ width: 18px;
14179
+ font-size: 16px;
14180
+ color: #374151;
14181
+ }
14182
+ .rf-rte-wrapper .align-item {
14183
+ font-size: 14px;
14184
+ padding: 8px 12px;
14185
+ gap: 10px;
14186
+ }
14187
+ .rf-rte-wrapper .align-icon {
14188
+ display: inline-flex;
14189
+ flex-direction: column;
14190
+ gap: 2px;
14191
+ width: 16px;
14192
+ }
14193
+ .rf-rte-wrapper .align-line {
14194
+ display: block;
14195
+ height: 2px;
14196
+ width: 100%;
14197
+ background: currentColor;
14198
+ border-radius: 1px;
14199
+ }
14200
+ .rf-rte-wrapper .align-line.short {
14201
+ width: 60%;
14202
+ }
14203
+ .rf-rte-wrapper .align-line.short-left {
14204
+ width: 60%;
14205
+ align-self: flex-start;
14206
+ }
14207
+ .rf-rte-wrapper .align-line.short-center {
14208
+ width: 60%;
14209
+ align-self: center;
14210
+ }
14211
+ .rf-rte-wrapper .align-line.short-right {
14212
+ width: 60%;
14213
+ align-self: flex-end;
14214
+ }
14215
+ .rf-rte-wrapper .indent-icon {
14216
+ display: inline-flex;
14217
+ align-items: center;
14218
+ gap: 2px;
14219
+ }
14220
+ .rf-rte-wrapper .indent-arrow {
14221
+ font-size: 10px;
14222
+ line-height: 1;
14223
+ }
14224
+ .rf-rte-wrapper .indent-lines {
14225
+ display: inline-flex;
14226
+ flex-direction: column;
14227
+ gap: 2px;
14228
+ width: 12px;
14229
+ }
14230
+ .rf-rte-wrapper .indent-lines .align-line {
14231
+ height: 1.5px;
14232
+ }
14233
+ .rf-rte-wrapper .color-grid {
14234
+ display: grid;
14235
+ grid-template-columns: repeat(5, 1fr);
14236
+ gap: 4px;
14237
+ padding: 6px;
14238
+ }
14239
+ .rf-rte-wrapper .color-swatch {
14240
+ width: 24px;
14241
+ height: 24px;
14242
+ border: 2px solid #e5e7eb;
14243
+ border-radius: 4px;
14244
+ cursor: pointer;
14245
+ transition: transform 0.1s, border-color 0.1s;
14246
+ }
14247
+ .rf-rte-wrapper .color-swatch:hover {
14248
+ transform: scale(1.2);
14249
+ border-color: #6366f1;
14250
+ }
14251
+ .rf-rte-wrapper .color-picker-panel {
14252
+ padding: 8px;
14253
+ min-width: 260px;
14254
+ }
14255
+ .rf-rte-wrapper .color-picker-tabs {
14256
+ display: flex;
14257
+ border-bottom: 1px solid #e5e7eb;
14258
+ margin-bottom: 8px;
14259
+ }
14260
+ .rf-rte-wrapper .color-picker-tab {
14261
+ flex: 1;
14262
+ padding: 6px 0;
14263
+ border: none;
14264
+ background: transparent;
14265
+ color: #6b7280;
14266
+ font-size: 13px;
14267
+ font-weight: 500;
14268
+ cursor: pointer;
14269
+ border-bottom: 2px solid transparent;
14270
+ transition: color 0.15s, border-color 0.15s;
14271
+ }
14272
+ .rf-rte-wrapper .color-picker-tab:hover {
14273
+ color: #374151;
14274
+ }
14275
+ .rf-rte-wrapper .color-picker-tab.active {
14276
+ color: #111827;
14277
+ border-bottom-color: #111827;
14278
+ }
14279
+ .rf-rte-wrapper .color-picker-grid {
14280
+ display: grid;
14281
+ grid-template-columns: repeat(10, 1fr);
14282
+ gap: 2px;
14283
+ padding: 4px 0;
14284
+ }
14285
+ .rf-rte-wrapper .color-picker-swatch {
14286
+ width: 22px;
14287
+ height: 22px;
14288
+ border: none;
14289
+ border-radius: 2px;
14290
+ cursor: pointer;
14291
+ transition: transform 0.1s, box-shadow 0.1s;
14292
+ padding: 0;
14293
+ }
14294
+ .rf-rte-wrapper .color-picker-swatch:hover {
14295
+ transform: scale(1.25);
14296
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
14297
+ z-index: 1;
14298
+ position: relative;
14299
+ }
14300
+ .rf-rte-wrapper .color-picker-swatch.white-swatch {
14301
+ border: 1px solid #d1d5db;
14302
+ }
14303
+ .rf-rte-wrapper .color-picker-swatch.swatch-active {
14304
+ box-shadow: 0 0 0 2px #444746;
14305
+ border-radius: 3px;
14306
+ z-index: 1;
14307
+ position: relative;
14308
+ }
14309
+ .rf-rte-wrapper .color-picker-footer {
14310
+ display: flex;
14311
+ align-items: center;
14312
+ gap: 8px;
14313
+ margin-top: 8px;
14314
+ padding-top: 8px;
14315
+ border-top: 1px solid #e5e7eb;
14316
+ }
14317
+ .rf-rte-wrapper .color-picker-preview {
14318
+ flex: 1;
14319
+ height: 28px;
14320
+ border-radius: 4px;
14321
+ border: 1px solid #e5e7eb;
14322
+ }
14323
+ .rf-rte-wrapper .color-picker-remove {
14324
+ width: 28px;
14325
+ height: 28px;
14326
+ border: 1px solid #e5e7eb;
14327
+ border-radius: 4px;
14328
+ background: #fff;
14329
+ cursor: pointer;
14330
+ display: flex;
14331
+ align-items: center;
14332
+ justify-content: center;
14333
+ font-size: 14px;
14334
+ color: #374151;
14335
+ }
14336
+ .rf-rte-wrapper .color-picker-remove:hover {
14337
+ background: #f3f4f6;
14338
+ }
14339
+ .rf-rte-wrapper .insert-panel {
14340
+ padding: 12px;
14341
+ min-width: 260px;
14342
+ }
14343
+ .rf-rte-wrapper .insert-panel-tabs {
14344
+ display: flex;
14345
+ gap: 0;
14346
+ margin-bottom: 12px;
14347
+ border: 1px solid #e5e7eb;
14348
+ border-radius: 6px;
14349
+ overflow: hidden;
14350
+ }
14351
+ .rf-rte-wrapper .insert-tab {
14352
+ flex: 1;
14353
+ padding: 8px 12px;
14354
+ border: none;
14355
+ background: #fff;
14356
+ color: #6b7280;
14357
+ font-size: 13px;
14358
+ cursor: pointer;
14359
+ display: flex;
14360
+ align-items: center;
14361
+ justify-content: center;
14362
+ gap: 6px;
14363
+ transition: background 0.12s, color 0.12s;
14364
+ }
14365
+ .rf-rte-wrapper .insert-tab:hover {
14366
+ background: #f9fafb;
14367
+ }
14368
+ .rf-rte-wrapper .insert-tab.active {
14369
+ background: #f3f4f6;
14370
+ color: #111827;
14371
+ font-weight: 600;
14372
+ }
14373
+ .rf-rte-wrapper .insert-tab + .insert-tab {
14374
+ border-left: 1px solid #e5e7eb;
14375
+ }
14376
+ .rf-rte-wrapper .insert-panel-label {
14377
+ display: block;
14378
+ font-size: 12px;
14379
+ color: #9ca3af;
14380
+ margin-bottom: 6px;
14381
+ text-transform: uppercase;
14382
+ letter-spacing: 0.05em;
14383
+ }
14384
+ .rf-rte-wrapper .insert-panel-input {
14385
+ width: 100%;
14386
+ padding: 8px 12px;
14387
+ border: 1px solid #d1d5db;
14388
+ border-radius: 6px;
14389
+ font-size: 14px;
14390
+ color: #1f2937;
14391
+ outline: none;
14392
+ box-sizing: border-box;
14393
+ transition: border-color 0.15s;
14394
+ }
14395
+ .rf-rte-wrapper .insert-panel-input:focus {
14396
+ border-color: #6366f1;
14397
+ }
14398
+ .rf-rte-wrapper .insert-panel-textarea {
14399
+ width: 100%;
14400
+ padding: 8px 12px;
14401
+ border: 1px solid #d1d5db;
14402
+ border-radius: 6px;
14403
+ font-size: 13px;
14404
+ font-family:
14405
+ "Fira Code",
14406
+ "Consolas",
14407
+ monospace;
14408
+ color: #1f2937;
14409
+ outline: none;
14410
+ resize: vertical;
14411
+ box-sizing: border-box;
14412
+ transition: border-color 0.15s;
14413
+ }
14414
+ .rf-rte-wrapper .insert-panel-textarea:focus {
14415
+ border-color: #6366f1;
14416
+ }
14417
+ .rf-rte-wrapper .insert-panel-btn {
14418
+ margin-top: 10px;
14419
+ padding: 8px 20px;
14420
+ border: none;
14421
+ border-radius: 6px;
14422
+ background: #dc2626;
14423
+ color: #fff;
14424
+ font-size: 14px;
14425
+ font-weight: 600;
14426
+ cursor: pointer;
14427
+ transition: background 0.15s;
14428
+ }
14429
+ .rf-rte-wrapper .insert-panel-btn:hover {
14430
+ background: #b91c1c;
14431
+ }
14432
+ .rf-rte-wrapper .drop-zone {
14433
+ display: flex;
14434
+ flex-direction: column;
14435
+ align-items: center;
14436
+ justify-content: center;
14437
+ padding: 24px 16px;
14438
+ border: 2px dashed #d1d5db;
14439
+ border-radius: 8px;
14440
+ cursor: pointer;
14441
+ transition: border-color 0.15s, background 0.15s;
14442
+ gap: 2px;
14443
+ }
14444
+ .rf-rte-wrapper .drop-zone:hover {
14445
+ border-color: #9ca3af;
14446
+ background: #f9fafb;
14447
+ }
14448
+ .rf-rte-wrapper .drop-zone.dragging {
14449
+ border-color: #6366f1;
14450
+ background: #eef2ff;
14451
+ }
14452
+ .rf-rte-wrapper .drop-zone-text-bold {
14453
+ font-size: 14px;
14454
+ font-weight: 700;
14455
+ color: #1f2937;
14456
+ }
14457
+ .rf-rte-wrapper .drop-zone-text-sub {
14458
+ font-size: 13px;
14459
+ color: #9ca3af;
14460
+ }
14461
+ .rf-rte-wrapper .char-grid {
14462
+ display: grid;
14463
+ grid-template-columns: repeat(6, 1fr);
14464
+ gap: 2px;
14465
+ padding: 6px;
14466
+ max-height: 200px;
14467
+ overflow-y: auto;
14468
+ }
14469
+ .rf-rte-wrapper .char-btn {
14470
+ width: 32px;
14471
+ height: 32px;
14472
+ border: 1px solid #e5e7eb;
14473
+ border-radius: 4px;
14474
+ background: #fff;
14475
+ font-size: 16px;
14476
+ cursor: pointer;
14477
+ display: flex;
14478
+ align-items: center;
14479
+ justify-content: center;
14480
+ transition: background 0.1s;
14481
+ }
14482
+ .rf-rte-wrapper .char-btn:hover {
14483
+ background: #eef2ff;
14484
+ border-color: #6366f1;
14485
+ }
14486
+ .rf-rte-wrapper .task-status-item {
14487
+ gap: 8px;
14488
+ }
14489
+ .rf-rte-wrapper .task-icon {
14490
+ display: inline-flex;
14491
+ align-items: center;
14492
+ justify-content: center;
14493
+ width: 18px;
14494
+ height: 18px;
14495
+ border-radius: 3px;
14496
+ font-size: 12px;
14497
+ line-height: 1;
14498
+ }
14499
+ .rf-rte-wrapper .task-icon.task-todo {
14500
+ color: #dc2626;
14501
+ border: 2px solid #dc2626;
14502
+ }
14503
+ .rf-rte-wrapper .task-icon.task-working {
14504
+ color: #2563eb;
14505
+ border: 2px solid #2563eb;
14506
+ }
14507
+ .rf-rte-wrapper .task-icon.task-blocked {
14508
+ color: #1f2937;
14509
+ background: #1f2937;
14510
+ }
14511
+ .rf-rte-wrapper .task-icon.task-resolved {
14512
+ color: #16a34a;
14513
+ border: 2px solid #16a34a;
14514
+ }
14515
+ .rf-rte-wrapper .editor-content-wrapper {
14516
+ flex: 1;
14517
+ display: flex;
14518
+ flex-direction: column;
14519
+ min-height: 0;
14520
+ position: relative;
14521
+ z-index: 1;
14522
+ }
14523
+ .rf-rte-wrapper .tiptap {
14524
+ padding: 24px 32px;
14525
+ min-height: 0;
14526
+ flex: 1;
14527
+ overflow-y: auto;
14528
+ outline: none;
14529
+ font-size: 16px;
14530
+ line-height: 1.75;
14531
+ color: #1e293b;
14532
+ text-align: left;
14533
+ }
14534
+ .rf-rte-wrapper .tiptap:focus {
14535
+ outline: none;
14536
+ }
14537
+ .rf-rte-wrapper .tiptap h1 {
14538
+ font-size: 2em;
14539
+ font-weight: 700;
14540
+ margin: 1em 0 0.4em;
14541
+ line-height: 1.2;
14542
+ }
14543
+ .rf-rte-wrapper .tiptap h2 {
14544
+ font-size: 1.5em;
14545
+ font-weight: 600;
14546
+ margin: 0.8em 0 0.4em;
14547
+ line-height: 1.3;
14548
+ }
14549
+ .rf-rte-wrapper .tiptap h3 {
14550
+ font-size: 1.25em;
14551
+ font-weight: 600;
14552
+ margin: 0.6em 0 0.3em;
14553
+ line-height: 1.4;
14554
+ }
14555
+ .rf-rte-wrapper .tiptap h4 {
14556
+ font-size: 1.1em;
14557
+ font-weight: 600;
14558
+ margin: 0.5em 0 0.25em;
14559
+ }
14560
+ .rf-rte-wrapper .tiptap h5 {
14561
+ font-size: 1em;
14562
+ font-weight: 600;
14563
+ margin: 0.5em 0 0.25em;
14564
+ }
14565
+ .rf-rte-wrapper .tiptap h6 {
14566
+ font-size: 0.9em;
14567
+ font-weight: 600;
14568
+ margin: 0.5em 0 0.25em;
14569
+ text-transform: uppercase;
14570
+ letter-spacing: 0.05em;
14571
+ }
14572
+ .rf-rte-wrapper .tiptap p {
14573
+ margin: 0.5em 0;
14574
+ }
14575
+ .rf-rte-wrapper .tiptap ul,
14576
+ .rf-rte-wrapper .tiptap ol {
14577
+ padding-left: 24px;
14578
+ margin: 0.5em 0;
14579
+ }
14580
+ .rf-rte-wrapper .tiptap li {
14581
+ margin: 0.25em 0;
14582
+ }
14583
+ .rf-rte-wrapper .tiptap ul[data-type=taskList] {
14584
+ list-style: none;
14585
+ padding-left: 24px;
14586
+ }
14587
+ .rf-rte-wrapper .tiptap ul[data-type=taskList] li.task-item {
14588
+ display: flex;
14589
+ align-items: flex-start;
14590
+ gap: 8px;
14591
+ margin: 4px 0;
14592
+ }
14593
+ .rf-rte-wrapper .tiptap ul[data-type=taskList] li.task-item > label {
14594
+ flex-shrink: 0;
14595
+ margin-top: 3px;
14596
+ }
14597
+ .rf-rte-wrapper .task-checkbox {
14598
+ display: inline-flex;
14599
+ align-items: center;
14600
+ justify-content: center;
14601
+ width: 20px;
14602
+ height: 20px;
14603
+ border-radius: 3px;
14604
+ cursor: pointer;
14605
+ font-size: 13px;
14606
+ font-weight: 700;
14607
+ line-height: 1;
14608
+ user-select: none;
14609
+ transition: all 0.15s ease;
14610
+ }
14611
+ .rf-rte-wrapper .task-status-todo {
14612
+ border: 2px solid #dc2626;
14613
+ color: #dc2626;
14614
+ background: #fff;
14615
+ }
14616
+ .rf-rte-wrapper .task-status-working {
14617
+ border: 2px solid #2563eb;
14618
+ color: #2563eb;
14619
+ background: #eff6ff;
14620
+ }
14621
+ .rf-rte-wrapper .task-status-blocked {
14622
+ border: 2px solid #1f2937;
14623
+ color: #fff;
14624
+ background: #1f2937;
14625
+ }
14626
+ .rf-rte-wrapper .task-status-resolved {
14627
+ border: 2px solid #16a34a;
14628
+ color: #fff;
14629
+ background: #16a34a;
14630
+ }
14631
+ .rf-rte-wrapper .task-checkbox:hover {
14632
+ opacity: 0.8;
14633
+ transform: scale(1.1);
14634
+ }
14635
+ .rf-rte-wrapper .tiptap ul[data-type=taskList] li.task-item .task-item-content {
14636
+ flex: 1;
14637
+ }
14638
+ .rf-rte-wrapper .tiptap ul[data-type=taskList] li.task-item[data-status=resolved] .task-item-content {
14639
+ text-decoration: line-through;
14640
+ color: #9ca3af;
14641
+ }
14642
+ .rf-rte-wrapper .tts-wrapper {
14643
+ position: relative;
14644
+ display: inline-flex;
14645
+ align-items: center;
14646
+ gap: 2px;
14647
+ }
14648
+ .rf-rte-wrapper .tts-panel {
14649
+ position: absolute;
14650
+ top: 100%;
14651
+ left: 0;
14652
+ z-index: 100;
14653
+ background: #fff;
14654
+ border: 1px solid #e5e7eb;
14655
+ border-radius: 8px;
14656
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
14657
+ padding: 12px;
14658
+ min-width: 240px;
14659
+ margin-top: 4px;
14660
+ }
14661
+ .rf-rte-wrapper .tts-panel-header {
14662
+ font-weight: 600;
14663
+ font-size: 13px;
14664
+ color: #374151;
14665
+ margin-bottom: 10px;
14666
+ padding-bottom: 6px;
14667
+ border-bottom: 1px solid #e5e7eb;
14668
+ }
14669
+ .rf-rte-wrapper .tts-label {
14670
+ display: block;
14671
+ font-size: 11px;
14672
+ font-weight: 600;
14673
+ color: #6b7280;
14674
+ margin-bottom: 4px;
14675
+ margin-top: 8px;
14676
+ }
14677
+ .rf-rte-wrapper .tts-select {
14678
+ width: 100%;
14679
+ padding: 5px 8px;
14680
+ border: 1px solid #d1d5db;
14681
+ border-radius: 4px;
14682
+ font-size: 12px;
14683
+ background: #fff;
14684
+ color: #374151;
14685
+ }
14686
+ .rf-rte-wrapper .tts-range {
14687
+ width: 100%;
14688
+ margin: 4px 0;
14689
+ accent-color: #6366f1;
14690
+ }
14691
+ .rf-rte-wrapper .tts-info {
14692
+ font-size: 11px;
14693
+ color: #9ca3af;
14694
+ margin: 8px 0;
14695
+ font-style: italic;
14696
+ }
14697
+ .rf-rte-wrapper .tts-speak-btn {
14698
+ width: 100%;
14699
+ padding: 7px 12px;
14700
+ background: #6366f1;
14701
+ color: #fff;
14702
+ border: none;
14703
+ border-radius: 6px;
14704
+ font-size: 13px;
14705
+ font-weight: 600;
14706
+ cursor: pointer;
14707
+ transition: background 0.15s;
14708
+ }
14709
+ .rf-rte-wrapper .tts-speak-btn:hover {
14710
+ background: #4f46e5;
14711
+ }
14712
+ .rf-rte-wrapper .tts-controls {
14713
+ display: inline-flex;
14714
+ gap: 2px;
14715
+ }
14716
+ .rf-rte-wrapper .stt-wrapper {
14717
+ position: relative;
14718
+ display: inline-flex;
14719
+ align-items: center;
14720
+ gap: 2px;
14721
+ }
14722
+ .rf-rte-wrapper .stt-recording {
14723
+ color: #dc2626 !important;
14724
+ animation: stt-pulse 1.2s ease-in-out infinite;
14725
+ }
14726
+ @keyframes stt-pulse {
14727
+ 0%, 100% {
14728
+ opacity: 1;
14729
+ }
14730
+ 50% {
14731
+ opacity: 0.4;
14732
+ }
14733
+ }
14734
+ .rf-rte-wrapper .stt-panel {
14735
+ position: absolute;
14736
+ top: 100%;
14737
+ left: 0;
14738
+ z-index: 100;
14739
+ background: #fff;
14740
+ border: 1px solid #e5e7eb;
14741
+ border-radius: 8px;
14742
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
14743
+ padding: 12px;
14744
+ min-width: 240px;
14745
+ margin-top: 4px;
14746
+ }
14747
+ .rf-rte-wrapper .stt-panel-header {
14748
+ font-weight: 600;
14749
+ font-size: 13px;
14750
+ color: #374151;
14751
+ margin-bottom: 10px;
14752
+ padding-bottom: 6px;
14753
+ border-bottom: 1px solid #e5e7eb;
14754
+ }
14755
+ .rf-rte-wrapper .stt-label {
14756
+ display: block;
14757
+ font-size: 11px;
14758
+ font-weight: 600;
14759
+ color: #6b7280;
14760
+ margin-bottom: 4px;
14761
+ margin-top: 8px;
14762
+ }
14763
+ .rf-rte-wrapper .stt-select {
14764
+ width: 100%;
14765
+ padding: 5px 8px;
14766
+ border: 1px solid #d1d5db;
14767
+ border-radius: 4px;
14768
+ font-size: 12px;
14769
+ background: #fff;
14770
+ color: #374151;
14771
+ }
14772
+ .rf-rte-wrapper .stt-info {
14773
+ font-size: 11px;
14774
+ color: #9ca3af;
14775
+ margin: 10px 0;
14776
+ font-style: italic;
14777
+ line-height: 1.4;
14778
+ }
14779
+ .rf-rte-wrapper .stt-start-btn {
14780
+ width: 100%;
14781
+ padding: 7px 12px;
14782
+ background: #dc2626;
14783
+ color: #fff;
14784
+ border: none;
14785
+ border-radius: 6px;
14786
+ font-size: 13px;
14787
+ font-weight: 600;
14788
+ cursor: pointer;
14789
+ transition: background 0.15s;
14790
+ }
14791
+ .rf-rte-wrapper .stt-start-btn:hover {
14792
+ background: #b91c1c;
14793
+ }
14794
+ .rf-rte-wrapper .stt-interim {
14795
+ position: absolute;
14796
+ top: 100%;
14797
+ left: 0;
14798
+ z-index: 100;
14799
+ background: #fef3c7;
14800
+ border: 1px solid #fbbf24;
14801
+ border-radius: 6px;
14802
+ padding: 6px 10px;
14803
+ font-size: 12px;
14804
+ color: #92400e;
14805
+ margin-top: 4px;
14806
+ min-width: 200px;
14807
+ max-width: 400px;
14808
+ white-space: pre-wrap;
14809
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
14810
+ }
14811
+ .rf-rte-wrapper .tiptap blockquote {
14812
+ border-left: 3px solid #6366f1;
14813
+ margin: 0.8em 0;
14814
+ padding: 0.4em 0 0.4em 16px;
14815
+ color: #4b5563;
14816
+ background: #f9fafb;
14817
+ border-radius: 0 4px 4px 0;
14818
+ }
14819
+ .rf-rte-wrapper .tiptap code {
14820
+ background: #f3f4f6;
14821
+ border-radius: 4px;
14822
+ padding: 2px 6px;
14823
+ font-size: 0.9em;
14824
+ color: #e11d48;
14825
+ font-family:
14826
+ "Fira Code",
14827
+ "Consolas",
14828
+ monospace;
14829
+ }
14830
+ .rf-rte-wrapper .tiptap pre {
14831
+ background: #1e1e2e;
14832
+ color: #cdd6f4;
14833
+ border-radius: 8px;
14834
+ padding: 16px;
14835
+ margin: 0.8em 0;
14836
+ overflow-x: auto;
14837
+ }
14838
+ .rf-rte-wrapper .tiptap pre code {
14839
+ background: none;
14840
+ color: inherit;
14841
+ padding: 0;
14842
+ font-size: 0.9em;
14843
+ }
14844
+ .rf-rte-wrapper .tiptap hr {
14845
+ border: none;
14846
+ border-top: 2px solid #e5e7eb;
14847
+ margin: 1.5em 0;
14848
+ }
14849
+ .rf-rte-wrapper .tiptap strong {
14850
+ font-weight: 700;
14851
+ }
14852
+ .rf-rte-wrapper .tiptap em {
14853
+ font-style: italic;
14854
+ }
14855
+ .rf-rte-wrapper .tiptap s {
14856
+ text-decoration: line-through;
14857
+ color: #9ca3af;
14858
+ }
14859
+ .rf-rte-wrapper .tiptap u {
14860
+ text-decoration: underline;
14861
+ }
14862
+ .rf-rte-wrapper .tiptap mark {
14863
+ border-radius: 2px;
14864
+ padding: 1px 2px;
14865
+ }
14866
+ .rf-rte-wrapper .tiptap table {
14867
+ border-collapse: collapse;
14868
+ width: 100%;
14869
+ margin: 0.8em 0;
14870
+ overflow: hidden;
14871
+ border-radius: 4px;
14872
+ }
14873
+ .rf-rte-wrapper .tiptap table td,
14874
+ .rf-rte-wrapper .tiptap table th {
14875
+ border: 1px solid #d1d5db;
14876
+ padding: 8px 12px;
14877
+ min-width: 80px;
14878
+ vertical-align: top;
14879
+ position: relative;
14880
+ }
14881
+ .rf-rte-wrapper .tiptap table th {
14882
+ background: #f3f4f6;
14883
+ font-weight: 600;
14884
+ text-align: left;
14885
+ }
14886
+ .rf-rte-wrapper .tiptap table td.selectedCell,
14887
+ .rf-rte-wrapper .tiptap table th.selectedCell {
14888
+ background: #eef2ff;
14889
+ }
14890
+ .rf-rte-wrapper .tiptap .tableWrapper {
14891
+ overflow-x: auto;
14892
+ margin: 0.8em 0;
14893
+ }
14894
+ .rf-rte-wrapper .tiptap .resize-cursor {
14895
+ cursor: col-resize;
14896
+ }
14897
+ .rf-rte-wrapper .tiptap div[data-youtube-video] {
14898
+ margin: 0.8em 0;
14899
+ }
14900
+ .rf-rte-wrapper .tiptap div[data-youtube-video] iframe {
14901
+ border-radius: 8px;
14902
+ max-width: 100%;
14903
+ }
14904
+ .rf-rte-wrapper .bubble-menu {
14905
+ display: flex;
14906
+ gap: 2px;
14907
+ padding: 4px 6px;
14908
+ background: #1e293b;
14909
+ border-radius: 10px;
14910
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
14911
+ }
14912
+ .rf-rte-wrapper .bubble-menu button {
14913
+ padding: 5px 10px;
14914
+ border: none;
14915
+ border-radius: 6px;
14916
+ background: transparent;
14917
+ color: #cbd5e1;
14918
+ font-size: 13px;
14919
+ cursor: pointer;
14920
+ transition: all 0.15s ease;
14921
+ line-height: 1;
14922
+ }
14923
+ .rf-rte-wrapper .bubble-menu button:hover {
14924
+ background: #334155;
14925
+ color: #f8fafc;
14926
+ }
14927
+ .rf-rte-wrapper .bubble-menu button.is-active {
14928
+ background: #6366f1;
14929
+ color: #fff;
14930
+ }
14931
+ .rf-rte-wrapper .floating-menu {
14932
+ display: flex;
14933
+ gap: 2px;
14934
+ padding: 4px 6px;
14935
+ background: #fff;
14936
+ border: 1px solid #e2e8f0;
14937
+ border-radius: 10px;
14938
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
14939
+ }
14940
+ .rf-rte-wrapper .floating-menu button {
14941
+ padding: 4px 8px;
14942
+ border: none;
14943
+ border-radius: 4px;
14944
+ background: transparent;
14945
+ color: #6b7280;
14946
+ font-size: 13px;
14947
+ cursor: pointer;
14948
+ transition: background 0.15s, color 0.15s;
14949
+ line-height: 1;
14950
+ }
14951
+ .rf-rte-wrapper .floating-menu button:hover {
14952
+ background: #f3f4f6;
14953
+ color: #1f2937;
14954
+ }
14955
+ .rf-rte-wrapper .floating-menu button.is-active {
14956
+ background: #6366f1;
14957
+ color: #fff;
14958
+ }
14959
+ .rf-rte-wrapper .tiptap p.is-editor-empty:first-child::before {
14960
+ content: attr(data-placeholder);
14961
+ float: left;
14962
+ color: #94a3b8;
14963
+ pointer-events: none;
14964
+ height: 0;
14965
+ font-style: italic;
14966
+ }
14967
+ .rf-rte-wrapper .tiptap .editor-link {
14968
+ color: #6366f1;
14969
+ text-decoration: underline;
14970
+ text-underline-offset: 2px;
14971
+ cursor: pointer;
14972
+ }
14973
+ .rf-rte-wrapper .tiptap .editor-link:hover {
14974
+ color: #4f46e5;
14975
+ }
14976
+ .rf-rte-wrapper .tiptap img {
14977
+ max-width: 100%;
14978
+ height: auto;
14979
+ border-radius: 8px;
14980
+ margin: 0.8em 0;
14981
+ }
14982
+ .rf-rte-wrapper .tiptap img.ProseMirror-selectednode {
14983
+ outline: 2px solid #6366f1;
14984
+ outline-offset: 2px;
14985
+ }
14986
+ .rf-rte-wrapper .status-bar {
14987
+ display: flex;
14988
+ justify-content: space-between;
14989
+ align-items: center;
14990
+ padding: 8px 16px;
14991
+ border-top: 1px solid #dadce0;
14992
+ background: #f9fbfd;
14993
+ font-size: 12px;
14994
+ border-radius: 0 0 8px 8px;
14995
+ flex-shrink: 0;
14996
+ }
14997
+ .rf-rte-wrapper .status-bar-left {
14998
+ display: flex;
14999
+ align-items: center;
15000
+ gap: 8px;
15001
+ }
15002
+ .rf-rte-wrapper .status-bar-right {
15003
+ display: flex;
15004
+ align-items: center;
15005
+ gap: 14px;
15006
+ }
15007
+ .rf-rte-wrapper .format-select {
15008
+ padding: 4px 10px;
15009
+ border: 1px solid #e2e8f0;
15010
+ border-radius: 6px;
15011
+ background: #fff;
15012
+ font-size: 12px;
15013
+ color: #64748b;
15014
+ cursor: pointer;
15015
+ transition: border-color 0.15s;
15016
+ }
15017
+ .rf-rte-wrapper .format-select:hover {
15018
+ border-color: #94a3b8;
15019
+ }
15020
+ .rf-rte-wrapper .status-btn {
15021
+ padding: 5px 14px;
15022
+ border: none;
15023
+ border-radius: 6px;
15024
+ font-size: 12px;
15025
+ font-weight: 500;
15026
+ cursor: pointer;
15027
+ transition: all 0.15s ease;
15028
+ }
15029
+ .rf-rte-wrapper .save-btn {
15030
+ background: #6366f1;
15031
+ color: #fff;
15032
+ }
15033
+ .rf-rte-wrapper .save-btn:hover {
15034
+ background: #4f46e5;
15035
+ box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
15036
+ }
15037
+ .rf-rte-wrapper .export-btn {
15038
+ background: #f1f5f9;
15039
+ color: #475569;
15040
+ border: 1px solid #e2e8f0;
15041
+ }
15042
+ .rf-rte-wrapper .export-btn:hover {
15043
+ background: #e2e8f0;
15044
+ border-color: #cbd5e1;
15045
+ }
15046
+ .rf-rte-wrapper .clear-btn {
15047
+ background: transparent;
15048
+ color: #94a3b8;
15049
+ }
15050
+ .rf-rte-wrapper .clear-btn:hover {
15051
+ background: #fef2f2;
15052
+ color: #ef4444;
15053
+ }
15054
+ .rf-rte-wrapper .save-status {
15055
+ color: #22c55e;
15056
+ font-weight: 500;
15057
+ }
15058
+ .rf-rte-wrapper .word-count {
15059
+ color: #5f6368;
15060
+ font-weight: 500;
15061
+ font-size: 11px;
15062
+ letter-spacing: 0.5px;
15063
+ text-transform: uppercase;
15064
+ }
15065
+ .rf-rte-wrapper .image-toolbar {
15066
+ display: flex;
15067
+ align-items: center;
15068
+ gap: 3px;
15069
+ padding: 5px 6px;
15070
+ background: #1e293b;
15071
+ border-radius: 10px;
15072
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
15073
+ position: absolute;
15074
+ z-index: 100;
15075
+ transform: translateY(4px);
15076
+ }
15077
+ .rf-rte-wrapper .img-tool-btn {
15078
+ display: inline-flex;
15079
+ align-items: center;
15080
+ justify-content: center;
15081
+ padding: 5px 8px;
15082
+ border: none;
15083
+ border-radius: 6px;
15084
+ background: transparent;
15085
+ color: #cbd5e1;
15086
+ font-size: 14px;
15087
+ cursor: pointer;
15088
+ transition: all 0.15s ease;
15089
+ line-height: 1;
15090
+ gap: 3px;
15091
+ }
15092
+ .rf-rte-wrapper .img-tool-btn:hover {
15093
+ background: #334155;
15094
+ color: #f8fafc;
15095
+ }
15096
+ .rf-rte-wrapper .img-tool-copy-wrapper {
15097
+ position: relative;
15098
+ display: inline-flex;
15099
+ }
15100
+ .rf-rte-wrapper .img-copy-toast {
15101
+ position: absolute;
15102
+ bottom: 100%;
15103
+ left: 50%;
15104
+ transform: translateX(-50%);
15105
+ background: #22c55e;
15106
+ color: #fff;
15107
+ font-size: 11px;
15108
+ font-weight: 600;
15109
+ padding: 4px 10px;
15110
+ border-radius: 4px;
15111
+ white-space: nowrap;
15112
+ pointer-events: none;
15113
+ animation: toast-fade-in 0.2s ease;
15114
+ margin-bottom: 4px;
15115
+ }
15116
+ @keyframes toast-fade-in {
15117
+ from {
15118
+ opacity: 0;
15119
+ transform: translateX(-50%) translateY(4px);
15120
+ }
15121
+ to {
15122
+ opacity: 1;
15123
+ transform: translateX(-50%) translateY(0);
15124
+ }
15125
+ }
15126
+ .rf-rte-wrapper .img-tool-dropdown {
15127
+ position: relative;
15128
+ }
15129
+ .rf-rte-wrapper .img-tool-menu {
15130
+ position: absolute;
15131
+ top: 100%;
15132
+ left: 0;
15133
+ z-index: 1001;
15134
+ min-width: 120px;
15135
+ padding: 4px;
15136
+ background: #fff;
15137
+ border: 1px solid #e5e7eb;
15138
+ border-radius: 8px;
15139
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
15140
+ margin-top: 4px;
15141
+ }
15142
+ .rf-rte-wrapper .tiptap img {
15143
+ cursor: grab;
15144
+ }
15145
+ .rf-rte-wrapper .tiptap img:active {
15146
+ cursor: grabbing;
15147
+ }
15148
+ .rf-rte-wrapper .tiptap img.ProseMirror-selectednode {
15149
+ outline: 2px solid #6366f1;
15150
+ outline-offset: 2px;
15151
+ }
15152
+ .modal-overlay {
15153
+ position: fixed;
15154
+ top: 0;
15155
+ left: 0;
15156
+ right: 0;
15157
+ bottom: 0;
15158
+ background: rgba(0, 0, 0, 0.4);
15159
+ z-index: 10000;
15160
+ display: flex;
15161
+ align-items: center;
15162
+ justify-content: center;
15163
+ }
15164
+ .modal-content {
15165
+ background: #fff;
15166
+ border-radius: 12px;
15167
+ width: 680px;
15168
+ max-width: 95vw;
15169
+ max-height: 90vh;
15170
+ overflow-y: auto;
15171
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
15172
+ }
15173
+ .modal-header {
15174
+ display: flex;
15175
+ justify-content: space-between;
15176
+ align-items: center;
15177
+ padding: 16px 20px;
15178
+ border-bottom: 1px solid #e5e7eb;
15179
+ }
15180
+ .modal-header h3 {
15181
+ margin: 0;
15182
+ font-size: 18px;
15183
+ font-weight: 600;
15184
+ color: #1f2937;
15185
+ }
15186
+ .modal-close {
15187
+ background: none;
15188
+ border: none;
15189
+ font-size: 24px;
15190
+ color: #9ca3af;
15191
+ cursor: pointer;
15192
+ padding: 0 4px;
15193
+ line-height: 1;
15194
+ }
15195
+ .modal-close:hover {
15196
+ color: #1f2937;
15197
+ }
15198
+ .modal-body {
15199
+ padding: 20px;
15200
+ }
15201
+ .modal-layout {
15202
+ display: flex;
15203
+ gap: 24px;
15204
+ }
15205
+ .modal-preview-col {
15206
+ flex: 0 0 220px;
15207
+ }
15208
+ .modal-preview {
15209
+ border: 1px solid #e5e7eb;
15210
+ border-radius: 6px;
15211
+ overflow: hidden;
15212
+ margin-bottom: 12px;
15213
+ }
15214
+ .modal-preview img {
15215
+ width: 100%;
15216
+ height: auto;
15217
+ display: block;
15218
+ }
15219
+ .modal-dimensions {
15220
+ display: flex;
15221
+ align-items: center;
15222
+ gap: 6px;
15223
+ }
15224
+ .dim-input {
15225
+ width: 80px;
15226
+ padding: 6px 8px;
15227
+ border: 1px solid #d1d5db;
15228
+ border-radius: 4px;
15229
+ font-size: 13px;
15230
+ text-align: center;
15231
+ color: #1f2937;
15232
+ }
15233
+ .lock-btn {
15234
+ background: none;
15235
+ border: none;
15236
+ font-size: 16px;
15237
+ cursor: pointer;
15238
+ padding: 4px;
15239
+ color: #6b7280;
15240
+ }
15241
+ .lock-btn.locked {
15242
+ color: #6366f1;
15243
+ }
15244
+ .modal-fields-col {
15245
+ flex: 1;
15246
+ }
15247
+ .modal-tabs {
15248
+ display: flex;
15249
+ gap: 0;
15250
+ margin-bottom: 16px;
15251
+ border: 1px solid #e5e7eb;
15252
+ border-radius: 6px;
15253
+ overflow: hidden;
15254
+ }
15255
+ .modal-tab {
15256
+ flex: 1;
15257
+ padding: 8px 16px;
15258
+ border: none;
15259
+ background: #fff;
15260
+ color: #6b7280;
15261
+ font-size: 14px;
15262
+ cursor: pointer;
15263
+ transition: background 0.12s;
15264
+ }
15265
+ .modal-tab.active {
15266
+ background: #f3f4f6;
15267
+ color: #111827;
15268
+ font-weight: 600;
15269
+ }
15270
+ .modal-tab + .modal-tab {
15271
+ border-left: 1px solid #e5e7eb;
15272
+ }
15273
+ .modal-label {
15274
+ display: block;
15275
+ font-size: 13px;
15276
+ font-weight: 500;
15277
+ color: #374151;
15278
+ margin: 12px 0 4px;
15279
+ }
15280
+ .modal-input {
15281
+ width: 100%;
15282
+ padding: 8px 10px;
15283
+ border: 1px solid #d1d5db;
15284
+ border-radius: 6px;
15285
+ font-size: 14px;
15286
+ color: #1f2937;
15287
+ outline: none;
15288
+ box-sizing: border-box;
15289
+ }
15290
+ .modal-input:focus {
15291
+ border-color: #6366f1;
15292
+ }
15293
+ .modal-checkbox {
15294
+ display: flex;
15295
+ align-items: center;
15296
+ gap: 8px;
15297
+ margin-top: 12px;
15298
+ font-size: 14px;
15299
+ color: #374151;
15300
+ cursor: pointer;
15301
+ }
15302
+ .modal-checkbox input[type=checkbox] {
15303
+ width: 16px;
15304
+ height: 16px;
15305
+ cursor: pointer;
15306
+ }
15307
+ .modal-footer {
15308
+ display: flex;
15309
+ justify-content: space-between;
15310
+ align-items: center;
15311
+ padding: 16px 20px;
15312
+ border-top: 1px solid #e5e7eb;
15313
+ }
15314
+ .modal-footer-left {
15315
+ display: flex;
15316
+ gap: 12px;
15317
+ }
15318
+ .modal-btn-cancel {
15319
+ padding: 8px 16px;
15320
+ border: none;
15321
+ background: transparent;
15322
+ color: #6b7280;
15323
+ font-size: 14px;
15324
+ cursor: pointer;
15325
+ }
15326
+ .modal-btn-cancel:hover {
15327
+ color: #1f2937;
15328
+ }
15329
+ .modal-btn-delete {
15330
+ padding: 8px 16px;
15331
+ border: none;
15332
+ background: transparent;
15333
+ color: #6b7280;
15334
+ font-size: 14px;
15335
+ cursor: pointer;
15336
+ }
15337
+ .modal-btn-delete:hover {
15338
+ color: #dc2626;
15339
+ }
15340
+ .modal-btn-apply {
15341
+ padding: 8px 24px;
15342
+ border: none;
15343
+ border-radius: 6px;
15344
+ background: #991b1b;
15345
+ color: #fff;
15346
+ font-size: 14px;
15347
+ font-weight: 600;
15348
+ cursor: pointer;
15349
+ transition: background 0.15s;
15350
+ }
15351
+ .modal-btn-apply:hover {
15352
+ background: #7f1d1d;
15353
+ }
15354
+ .rf-rte-wrapper .translate-split-btn {
15355
+ display: inline-flex;
15356
+ align-items: center;
15357
+ position: relative;
15358
+ border-radius: 4px;
15359
+ border: 1px solid transparent;
15360
+ transition: border-color 0.15s ease;
15361
+ }
15362
+ .rf-rte-wrapper .translate-split-btn:hover {
15363
+ border-color: #dadce0;
15364
+ }
15365
+ .rf-rte-wrapper .translate-split-btn .toolbar-btn {
15366
+ border-radius: 4px 0 0 4px;
15367
+ }
15368
+ .rf-rte-wrapper .translate-split-btn .toolbar-btn:hover {
15369
+ background: #f5d5d5;
15370
+ }
15371
+ .rf-rte-wrapper .translate-split-btn .dropdown {
15372
+ margin-left: -1px;
15373
+ }
15374
+ .rf-rte-wrapper .translate-split-btn .translate-arrow-btn {
15375
+ border-radius: 0 4px 4px 0;
15376
+ min-width: 18px;
15377
+ padding: 4px 2px;
15378
+ }
15379
+ .rf-rte-wrapper .translate-split-btn .translate-arrow-btn:hover {
15380
+ background: #e8eaed;
15381
+ }
15382
+ .rf-rte-wrapper .translate-icon-btn {
15383
+ display: flex;
15384
+ align-items: center;
15385
+ justify-content: center;
15386
+ }
15387
+ .rf-rte-wrapper .translate-icon-btn svg {
15388
+ width: 16px;
15389
+ height: 16px;
15390
+ }
15391
+ .rf-rte-wrapper .translate-toast-popup {
15392
+ position: absolute;
15393
+ top: 100%;
15394
+ left: 0;
15395
+ margin-top: 4px;
15396
+ white-space: nowrap;
15397
+ font-size: 11px;
15398
+ font-weight: 500;
15399
+ color: #16a34a;
15400
+ background: #fff;
15401
+ border: 1px solid #e5e7eb;
15402
+ border-radius: 4px;
15403
+ padding: 4px 10px;
15404
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
15405
+ z-index: 100;
15406
+ animation: toast-fade-in 0.2s ease;
15407
+ }
15408
+ .rf-rte-wrapper .translate-toast-popup.error {
15409
+ color: #dc2626;
15410
+ }
15411
+ .translate-modal {
15412
+ max-width: 520px;
15413
+ width: 520px;
15414
+ }
15415
+ .translate-columns {
15416
+ display: flex;
15417
+ gap: 0;
15418
+ align-items: stretch;
15419
+ }
15420
+ .translate-col {
15421
+ flex: 1;
15422
+ display: flex;
15423
+ flex-direction: column;
15424
+ }
15425
+ .translate-filter {
15426
+ padding: 0 0 8px 0;
15427
+ }
15428
+ .translate-filter-input {
15429
+ width: 100%;
15430
+ padding: 7px 10px 7px 28px;
15431
+ border: 1px solid #ddd;
15432
+ border-radius: 6px;
15433
+ font-size: 13px;
15434
+ outline: none;
15435
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 8px center;
15436
+ box-sizing: border-box;
15437
+ }
15438
+ .translate-filter-input:focus {
15439
+ border-color: #991b1b;
15440
+ }
15441
+ .translate-list {
15442
+ max-height: 260px;
15443
+ overflow-y: auto;
15444
+ border: 1px solid #eee;
15445
+ border-radius: 6px;
15446
+ }
15447
+ .translate-item {
15448
+ display: flex;
15449
+ align-items: center;
15450
+ gap: 10px;
15451
+ width: 100%;
15452
+ padding: 8px 12px;
15453
+ border: none;
15454
+ background: none;
15455
+ cursor: pointer;
15456
+ font-size: 13px;
15457
+ text-align: left;
15458
+ transition: background 0.12s;
15459
+ }
15460
+ .translate-item:hover {
15461
+ background: #f5f5f5;
15462
+ }
15463
+ .translate-item.active {
15464
+ background: #fef2f2;
15465
+ border-left: 3px solid #991b1b;
15466
+ font-weight: 600;
15467
+ }
15468
+ .translate-code {
15469
+ color: #991b1b;
15470
+ font-weight: 600;
15471
+ min-width: 32px;
15472
+ font-size: 12px;
15473
+ }
15474
+ .translate-name {
15475
+ color: #333;
15476
+ }
15477
+ .translate-swap {
15478
+ display: flex;
15479
+ align-items: center;
15480
+ justify-content: center;
15481
+ padding: 0 8px;
15482
+ }
15483
+ .translate-swap-btn {
15484
+ background: none;
15485
+ border: 1px solid #ddd;
15486
+ border-radius: 50%;
15487
+ width: 32px;
15488
+ height: 32px;
15489
+ cursor: pointer;
15490
+ font-size: 16px;
15491
+ color: #666;
15492
+ display: flex;
15493
+ align-items: center;
15494
+ justify-content: center;
15495
+ transition: all 0.15s;
15496
+ }
15497
+ .translate-swap-btn:hover {
15498
+ background: #f5f5f5;
15499
+ border-color: #999;
15500
+ color: #333;
15501
+ }
15502
+ .translate-error {
15503
+ margin-top: 10px;
15504
+ padding: 8px 12px;
15505
+ background: #fef2f2;
15506
+ border: 1px solid #fecaca;
15507
+ border-radius: 6px;
15508
+ color: #991b1b;
15509
+ font-size: 13px;
15510
+ }
15511
+ .rf-rte-wrapper .table-grid-panel {
15512
+ padding: 12px;
15513
+ min-width: auto;
15514
+ }
15515
+ .rf-rte-wrapper .table-grid {
15516
+ display: flex;
15517
+ flex-direction: column;
15518
+ gap: 3px;
15519
+ }
15520
+ .rf-rte-wrapper .table-grid-row {
15521
+ display: flex;
15522
+ gap: 3px;
15523
+ }
15524
+ .rf-rte-wrapper .table-grid-cell {
15525
+ width: 24px;
15526
+ height: 24px;
15527
+ border: 1px solid #e5e7eb;
15528
+ border-radius: 2px;
15529
+ cursor: pointer;
15530
+ transition: background 0.08s, border-color 0.08s;
15531
+ background: #fff;
15532
+ }
15533
+ .rf-rte-wrapper .table-grid-cell:hover {
15534
+ border-color: #d1d5db;
15535
+ }
15536
+ .rf-rte-wrapper .table-grid-cell.active {
15537
+ background: #fce7f3;
15538
+ border-color: #f9a8d4;
15539
+ }
15540
+ .rf-rte-wrapper .table-grid-footer {
15541
+ display: flex;
15542
+ align-items: center;
15543
+ justify-content: space-between;
15544
+ margin-top: 10px;
15545
+ padding-top: 8px;
15546
+ }
15547
+ .rf-rte-wrapper .table-grid-size {
15548
+ font-size: 14px;
15549
+ color: #6b7280;
15550
+ font-weight: 500;
15551
+ }
15552
+ .rf-rte-wrapper .table-grid-submit {
15553
+ background: #991b1b;
15554
+ color: #fff;
15555
+ border: none;
15556
+ padding: 6px 16px;
15557
+ border-radius: 4px;
15558
+ font-size: 12px;
15559
+ font-weight: 700;
15560
+ letter-spacing: 0.5px;
15561
+ cursor: pointer;
15562
+ transition: background 0.15s;
15563
+ }
15564
+ .rf-rte-wrapper .table-grid-submit:hover {
15565
+ background: #7f1d1d;
15566
+ }
15567
+ .rf-rte-wrapper .table-grid-submit:disabled {
15568
+ opacity: 0.4;
15569
+ cursor: not-allowed;
15570
+ }
15571
+ .rf-rte-wrapper .ai-commands-wrapper {
15572
+ position: relative;
15573
+ display: inline-flex;
15574
+ }
15575
+ .rf-rte-wrapper .ai-commands-wrapper .toolbar-btn svg {
15576
+ width: 16px;
15577
+ height: 16px;
15578
+ vertical-align: middle;
15579
+ }
15580
+ .rf-rte-wrapper .ai-spinner {
15581
+ display: inline-block;
15582
+ width: 16px;
15583
+ height: 16px;
15584
+ border: 2px solid #e5e7eb;
15585
+ border-top-color: #991b1b;
15586
+ border-radius: 50%;
15587
+ animation: ai-spin 0.6s linear infinite;
15588
+ }
15589
+ @keyframes ai-spin {
15590
+ to {
15591
+ transform: rotate(360deg);
15592
+ }
15593
+ }
15594
+ .rf-rte-wrapper .ai-commands-panel {
15595
+ position: absolute;
15596
+ top: 100%;
15597
+ left: 0;
15598
+ z-index: 1000;
15599
+ min-width: 220px;
15600
+ background: #fff;
15601
+ border: 1px solid #e5e7eb;
15602
+ border-radius: 8px;
15603
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
15604
+ padding: 6px 0;
15605
+ margin-top: 4px;
15606
+ }
15607
+ .rf-rte-wrapper .ai-commands-header {
15608
+ padding: 8px 14px 6px;
15609
+ font-size: 11px;
15610
+ font-weight: 600;
15611
+ text-transform: uppercase;
15612
+ letter-spacing: 0.5px;
15613
+ color: #9ca3af;
15614
+ }
15615
+ .rf-rte-wrapper .ai-commands-list {
15616
+ display: flex;
15617
+ flex-direction: column;
15618
+ }
15619
+ .rf-rte-wrapper .ai-command-item {
15620
+ display: block;
15621
+ width: 100%;
15622
+ padding: 9px 14px;
15623
+ text-align: left;
15624
+ font-size: 14px;
15625
+ color: #1f2937;
15626
+ background: none;
15627
+ border: none;
15628
+ cursor: pointer;
15629
+ transition: background 0.12s;
15630
+ font-family: inherit;
15631
+ }
15632
+ .rf-rte-wrapper .ai-command-item:hover {
15633
+ background: #fce7f3;
15634
+ color: #1f2937;
15635
+ }
15636
+ .rf-rte-wrapper .ai-commands-hint {
15637
+ padding: 6px 14px 8px;
15638
+ font-size: 11px;
15639
+ color: #9ca3af;
15640
+ border-top: 1px solid #f3f4f6;
15641
+ margin-top: 4px;
15642
+ }
15643
+ .ai-modal-overlay {
15644
+ position: fixed;
15645
+ top: 0;
15646
+ left: 0;
15647
+ right: 0;
15648
+ bottom: 0;
15649
+ background: rgba(0, 0, 0, 0.4);
15650
+ z-index: 9999;
15651
+ display: flex;
15652
+ align-items: center;
15653
+ justify-content: center;
15654
+ }
15655
+ .ai-modal {
15656
+ background: #fff;
15657
+ border-radius: 8px;
15658
+ width: 620px;
15659
+ max-width: 90vw;
15660
+ max-height: 85vh;
15661
+ display: flex;
15662
+ flex-direction: column;
15663
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
15664
+ }
15665
+ .ai-modal-header {
15666
+ display: flex;
15667
+ align-items: center;
15668
+ justify-content: space-between;
15669
+ padding: 16px 20px 12px;
15670
+ border-bottom: 1px solid #f3f4f6;
15671
+ }
15672
+ .ai-modal-title {
15673
+ font-size: 18px;
15674
+ font-weight: 600;
15675
+ color: #1f2937;
15676
+ }
15677
+ .ai-modal-close {
15678
+ background: none;
15679
+ border: none;
15680
+ font-size: 22px;
15681
+ color: #9ca3af;
15682
+ cursor: pointer;
15683
+ padding: 0 4px;
15684
+ line-height: 1;
15685
+ }
15686
+ .ai-modal-close:hover {
15687
+ color: #1f2937;
15688
+ }
15689
+ .ai-modal-prompt-section {
15690
+ padding: 16px 20px 12px;
15691
+ }
15692
+ .ai-modal-label {
15693
+ display: block;
15694
+ font-size: 12px;
15695
+ font-weight: 500;
15696
+ color: #9ca3af;
15697
+ margin-bottom: 6px;
15698
+ }
15699
+ .ai-modal-prompt-row {
15700
+ display: flex;
15701
+ gap: 10px;
15702
+ align-items: flex-start;
15703
+ }
15704
+ .ai-modal-prompt {
15705
+ flex: 1;
15706
+ padding: 10px 12px;
15707
+ border: 2px solid #3b82f6;
15708
+ border-radius: 6px;
15709
+ font-size: 14px;
15710
+ font-family: inherit;
15711
+ color: #1f2937;
15712
+ resize: vertical;
15713
+ min-height: 60px;
15714
+ outline: none;
15715
+ }
15716
+ .ai-modal-prompt:focus {
15717
+ border-color: #2563eb;
15718
+ }
15719
+ .ai-modal-robot-btn {
15720
+ flex-shrink: 0;
15721
+ width: 40px;
15722
+ height: 40px;
15723
+ border: 1px solid #e5e7eb;
15724
+ border-radius: 6px;
15725
+ background: #fff;
15726
+ cursor: pointer;
15727
+ display: flex;
15728
+ align-items: center;
15729
+ justify-content: center;
15730
+ color: #6b7280;
15731
+ transition: all 0.15s;
15732
+ }
15733
+ .ai-modal-robot-btn:hover {
15734
+ background: #f9fafb;
15735
+ color: #1f2937;
15736
+ border-color: #d1d5db;
15737
+ }
15738
+ .ai-modal-robot-btn:disabled {
15739
+ opacity: 0.4;
15740
+ cursor: not-allowed;
15741
+ }
15742
+ .ai-modal-actions {
15743
+ display: flex;
15744
+ align-items: center;
15745
+ gap: 10px;
15746
+ padding: 0 20px 12px;
15747
+ }
15748
+ .ai-modal-action-btn {
15749
+ padding: 8px 18px;
15750
+ font-size: 14px;
15751
+ font-weight: 600;
15752
+ border: none;
15753
+ cursor: pointer;
15754
+ font-family: inherit;
15755
+ transition: background 0.15s;
15756
+ }
15757
+ .ai-modal-insert-btn {
15758
+ background: #991b1b;
15759
+ color: #fff;
15760
+ border-radius: 6px;
15761
+ }
15762
+ .ai-modal-insert-btn:hover {
15763
+ background: #7f1d1d;
15764
+ }
15765
+ .ai-modal-insert-after-btn {
15766
+ background: #fff;
15767
+ color: #1f2937;
15768
+ border: 1px solid #e5e7eb;
15769
+ border-radius: 6px;
15770
+ }
15771
+ .ai-modal-insert-after-btn:hover {
15772
+ background: #f9fafb;
15773
+ }
15774
+ .ai-modal-refresh-btn {
15775
+ background: none;
15776
+ border: none;
15777
+ font-size: 20px;
15778
+ color: #6b7280;
15779
+ padding: 6px 10px;
15780
+ margin-left: 6px;
15781
+ border-radius: 6px;
15782
+ }
15783
+ .ai-modal-refresh-btn:hover {
15784
+ background: #f3f4f6;
15785
+ color: #1f2937;
15786
+ }
15787
+ .ai-modal-action-btn:disabled {
15788
+ opacity: 0.4;
15789
+ cursor: not-allowed;
15790
+ }
15791
+ .ai-modal-result-section {
15792
+ flex: 1;
15793
+ margin: 0 20px;
15794
+ padding: 14px;
15795
+ border: 1px solid #e5e7eb;
15796
+ border-radius: 6px;
15797
+ background: #fafafa;
15798
+ min-height: 180px;
15799
+ max-height: 320px;
15800
+ overflow-y: auto;
15801
+ font-size: 14px;
15802
+ color: #1f2937;
15803
+ line-height: 1.6;
15804
+ white-space: pre-wrap;
15805
+ }
15806
+ .ai-modal-loading {
15807
+ display: flex;
15808
+ align-items: center;
15809
+ gap: 10px;
15810
+ color: #9ca3af;
15811
+ font-size: 14px;
15812
+ padding: 20px 0;
15813
+ }
15814
+ .ai-modal-result {
15815
+ white-space: pre-wrap;
15816
+ }
15817
+ .ai-modal-footer {
15818
+ display: flex;
15819
+ justify-content: flex-end;
15820
+ padding: 12px 20px 16px;
15821
+ }
15822
+ .ai-modal-cancel-btn {
15823
+ background: none;
15824
+ border: 2px solid #991b1b;
15825
+ color: #991b1b;
15826
+ padding: 8px 24px;
15827
+ border-radius: 6px;
15828
+ font-size: 13px;
15829
+ font-weight: 700;
15830
+ letter-spacing: 0.5px;
15831
+ cursor: pointer;
15832
+ font-family: inherit;
15833
+ transition: all 0.15s;
15834
+ }
15835
+ .ai-modal-cancel-btn:hover {
15836
+ background: #991b1b;
15837
+ color: #fff;
15838
+ }
15839
+ .link-modal-overlay {
15840
+ position: fixed;
15841
+ top: 0;
15842
+ left: 0;
15843
+ right: 0;
15844
+ bottom: 0;
15845
+ background: transparent;
15846
+ z-index: 10000;
15847
+ }
15848
+ .link-modal {
15849
+ position: absolute;
15850
+ top: 50%;
15851
+ left: 50%;
15852
+ transform: translate(-50%, -50%);
15853
+ background: #fff;
15854
+ border-radius: 8px;
15855
+ width: 320px;
15856
+ max-width: 92vw;
15857
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
15858
+ animation: link-slide-up 0.15s ease;
15859
+ }
15860
+ @keyframes link-slide-up {
15861
+ from {
15862
+ opacity: 0;
15863
+ transform: translate(-50%, -48%);
15864
+ }
15865
+ to {
15866
+ opacity: 1;
15867
+ transform: translate(-50%, -50%);
15868
+ }
15869
+ }
15870
+ .link-modal-body {
15871
+ padding: 16px 16px 8px;
15872
+ }
15873
+ .link-modal-field {
15874
+ margin-bottom: 12px;
15875
+ }
15876
+ .link-modal-label {
15877
+ display: block;
15878
+ font-size: 12px;
15879
+ font-weight: 500;
15880
+ color: #9ca3af;
15881
+ margin-bottom: 4px;
15882
+ }
15883
+ .link-modal-input {
15884
+ width: 100%;
15885
+ padding: 8px 10px;
15886
+ border: 1px solid #e5e7eb;
15887
+ border-radius: 6px;
15888
+ font-size: 14px;
15889
+ color: #1f2937;
15890
+ outline: none;
15891
+ box-sizing: border-box;
15892
+ transition: border-color 0.15s, box-shadow 0.15s;
15893
+ font-family: inherit;
15894
+ }
15895
+ .link-modal-input:focus {
15896
+ border-color: #991b1b;
15897
+ box-shadow: 0 0 0 2px rgba(153, 27, 27, 0.08);
15898
+ }
15899
+ .link-modal-input::placeholder {
15900
+ color: #d1d5db;
15901
+ }
15902
+ .link-modal-checkboxes {
15903
+ display: flex;
15904
+ flex-direction: column;
15905
+ gap: 8px;
15906
+ margin-top: 4px;
15907
+ margin-bottom: 4px;
15908
+ }
15909
+ .link-modal-checkbox {
15910
+ display: flex;
15911
+ align-items: center;
15912
+ gap: 8px;
15913
+ font-size: 14px;
15914
+ color: #374151;
15915
+ cursor: pointer;
15916
+ user-select: none;
15917
+ }
15918
+ .link-modal-checkbox input[type=checkbox] {
15919
+ width: 16px;
15920
+ height: 16px;
15921
+ accent-color: #991b1b;
15922
+ cursor: pointer;
15923
+ border-radius: 3px;
15924
+ }
15925
+ .link-modal-footer {
15926
+ display: flex;
15927
+ justify-content: space-between;
15928
+ align-items: center;
15929
+ padding: 12px 16px;
15930
+ border-top: 1px solid #f3f4f6;
15931
+ }
15932
+ .link-modal-btn-unlink {
15933
+ padding: 7px 16px;
15934
+ border: 1px solid #e5e7eb;
15935
+ background: #f9fafb;
15936
+ color: #374151;
15937
+ font-size: 13px;
15938
+ font-weight: 500;
15939
+ cursor: pointer;
15940
+ border-radius: 6px;
15941
+ transition: all 0.15s;
15942
+ }
15943
+ .link-modal-btn-unlink:hover {
15944
+ background: #fef2f2;
15945
+ border-color: #fecaca;
15946
+ color: #dc2626;
15947
+ }
15948
+ .link-modal-btn-apply {
15949
+ padding: 7px 20px;
15950
+ border: none;
15951
+ border-radius: 6px;
15952
+ background: #991b1b;
15953
+ color: #fff;
15954
+ font-size: 13px;
15955
+ font-weight: 600;
15956
+ cursor: pointer;
15957
+ transition: background 0.15s;
15958
+ }
15959
+ .link-modal-btn-apply:hover {
15960
+ background: #7f1d1d;
15961
+ }
15962
+ @media (max-width: 1024px) {
15963
+ .rf-rte-wrapper .toolbar-btn {
15964
+ min-width: 30px;
15965
+ height: 30px;
15966
+ padding: 0 4px;
15967
+ }
15968
+ .rf-rte-wrapper .toolbar-btn svg {
15969
+ width: 18px;
15970
+ height: 18px;
15971
+ }
15972
+ .rf-rte-wrapper .toolbar-group {
15973
+ padding: 0 3px;
15974
+ margin-right: 3px;
15975
+ }
15976
+ }
15977
+ @media (max-width: 768px) {
15978
+ .rf-rte-wrapper {
15979
+ border-radius: 8px;
15980
+ }
15981
+ .rf-rte-wrapper .toolbar {
15982
+ border-radius: 8px 8px 0 0;
15983
+ }
15984
+ .rf-rte-wrapper .toolbar-row {
15985
+ padding: 3px 4px;
15986
+ gap: 0px;
15987
+ }
15988
+ .rf-rte-wrapper .toolbar-btn {
15989
+ min-width: 28px;
15990
+ height: 28px;
15991
+ padding: 0 3px;
15992
+ }
15993
+ .rf-rte-wrapper .toolbar-btn svg {
15994
+ width: 17px;
15995
+ height: 17px;
15996
+ }
15997
+ .rf-rte-wrapper .toolbar-group {
15998
+ padding: 0 2px;
15999
+ margin-right: 2px;
16000
+ border-right: none;
16001
+ }
16002
+ .rf-rte-wrapper .tiptap {
16003
+ padding: 16px;
16004
+ font-size: 15px;
16005
+ }
16006
+ .rf-rte-wrapper .status-bar {
16007
+ padding: 6px 10px;
16008
+ border-radius: 0 0 8px 8px;
16009
+ flex-wrap: wrap;
16010
+ gap: 6px;
16011
+ }
16012
+ .modal-content {
16013
+ width: 95vw !important;
16014
+ max-width: 95vw !important;
16015
+ margin: 10px;
16016
+ }
16017
+ .translate-modal {
16018
+ width: 95vw !important;
16019
+ max-width: 95vw !important;
16020
+ }
16021
+ .translate-columns {
16022
+ flex-direction: column;
16023
+ }
16024
+ .translate-swap {
16025
+ transform: rotate(90deg);
16026
+ padding: 8px 0;
16027
+ }
16028
+ }
16029
+ @media (max-width: 480px) {
16030
+ .rf-rte-wrapper .toolbar-btn {
16031
+ min-width: 26px;
16032
+ height: 26px;
16033
+ padding: 0 2px;
16034
+ }
16035
+ .rf-rte-wrapper .toolbar-btn svg {
16036
+ width: 16px;
16037
+ height: 16px;
16038
+ }
16039
+ .rf-rte-wrapper .toolbar-group {
16040
+ padding: 0 1px;
16041
+ margin-right: 1px;
16042
+ }
16043
+ .rf-rte-wrapper .status-bar-left,
16044
+ .rf-rte-wrapper .status-bar-right {
16045
+ gap: 4px;
16046
+ }
16047
+ .rf-rte-wrapper .tiptap {
16048
+ padding: 12px;
16049
+ font-size: 14px;
16050
+ }
16051
+ }
16052
+ .rf-rte-wrapper .tiptap .mention {
16053
+ background: #fef2f2;
16054
+ color: #991b1b;
16055
+ border-radius: 4px;
16056
+ padding: 1px 4px;
16057
+ font-weight: 600;
16058
+ font-size: 0.95em;
16059
+ white-space: nowrap;
16060
+ box-decoration-break: clone;
16061
+ }
16062
+ .rf-rte-mention-dropdown {
16063
+ background: #fff;
16064
+ border: 1px solid #dadce0;
16065
+ border-radius: 8px;
16066
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
16067
+ padding: 4px;
16068
+ min-width: 200px;
16069
+ max-height: 280px;
16070
+ overflow-y: auto;
16071
+ display: flex;
16072
+ flex-direction: column;
16073
+ }
16074
+ .rf-rte-mention-item {
16075
+ display: flex;
16076
+ align-items: center;
16077
+ gap: 10px;
16078
+ width: 100%;
16079
+ padding: 8px 10px;
16080
+ border: none;
16081
+ background: transparent;
16082
+ border-radius: 6px;
16083
+ cursor: pointer;
16084
+ font-size: 14px;
16085
+ color: #1f2937;
16086
+ text-align: left;
16087
+ transition: background 0.15s;
16088
+ box-sizing: border-box;
16089
+ }
16090
+ .rf-rte-mention-item:hover,
16091
+ .rf-rte-mention-item.is-selected {
16092
+ background: #f3f4f6;
16093
+ }
16094
+ .rf-rte-mention-item.is-selected {
16095
+ background: #fef2f2;
16096
+ }
16097
+ .rf-rte-mention-no-result {
16098
+ color: #9ca3af;
16099
+ font-style: italic;
16100
+ cursor: default;
16101
+ }
16102
+ .rf-rte-mention-no-result:hover {
16103
+ background: transparent;
16104
+ }
16105
+ .rf-rte-mention-avatar {
16106
+ display: flex;
16107
+ align-items: center;
16108
+ justify-content: center;
16109
+ width: 30px;
16110
+ height: 30px;
16111
+ border-radius: 50%;
16112
+ background: #991b1b;
16113
+ color: #fff;
16114
+ font-weight: 700;
16115
+ font-size: 13px;
16116
+ flex-shrink: 0;
16117
+ }
16118
+ .rf-rte-mention-name {
16119
+ font-weight: 500;
16120
+ }
13803
16121
  /*! Bundled license information:
13804
16122
 
13805
16123
  jodit/es5/jodit.min.css: