koishi-plugin-chat-patch 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1973 +1,1997 @@
1
- .message-quote {
2
- margin: 8px 0;
3
- padding: 8px 12px;
4
- background-color: rgba(190, 190, 190, .1);
5
- border-left: 4px solid rgba(151, 152, 152, .45);
6
- border-radius: 6px;
7
- font-size: .9em;
8
- position: relative
9
- }
10
-
11
- .quote-indicator {
12
- font-size: .75em;
13
- color: #007bff;
14
- font-weight: 600;
15
- margin-bottom: 4px;
16
- text-transform: uppercase
17
- }
18
-
19
- .quote-header {
20
- display: flex;
21
- align-items: center;
22
- margin-bottom: 4px;
23
- gap: 6px
24
- }
25
-
26
- .quote-avatar {
27
- width: 20px;
28
- height: 20px;
29
- border-radius: 50%;
30
- overflow: hidden;
31
- flex-shrink: 0
32
- }
33
-
34
- .quote-avatar img {
35
- width: 100%;
36
- height: 100%;
37
- object-fit: cover
38
- }
39
-
40
- .quote-avatar .avatar-placeholder {
41
- width: 100%;
42
- height: 100%;
43
- display: flex;
44
- align-items: center;
45
- justify-content: center;
46
- background-color: #6c757d;
47
- color: #fff;
48
- font-size: 10px;
49
- font-weight: 700
50
- }
51
-
52
- .quote-username {
53
- font-weight: 600;
54
- color: #007bff;
55
- font-size: .85em
56
- }
57
-
58
- .quote-time {
59
- color: #6c757d;
60
- font-size: .75em;
61
- margin-left: auto
62
- }
63
-
64
- .quote-content {
65
- color: #7276b7;
66
- line-height: 1.3;
67
- word-wrap: break-word;
68
- word-break: break-all;
69
- overflow-wrap: anywhere;
70
- hyphens: auto
71
- }
72
-
73
- .quote-content .message-image {
74
- max-width: min(200px, 50vw);
75
- max-height: 100px
76
- }
77
-
78
- .quote-content .message-image-container {
79
- margin: 2px 0
80
- }
81
-
82
- @media (prefers-color-scheme:dark) {
83
- .message-quote {
84
- background-color: rgba(255, 255, 255, .078);
85
- border-left-color: #0d6efd
86
- }
87
-
88
- .quote-content {
89
- color: #adb5bd
90
- }
91
-
92
- .quote-username {
93
- color: #0d6efd
94
- }
95
- }
96
-
97
- .chat-container {
98
- display: flex;
99
- height: 100vh;
100
- background: 0 0;
101
- margin-left: 0;
102
- width: 100%;
103
- overflow: hidden;
104
- color: inherit;
105
- position: relative
106
- }
107
-
108
- .bot-list,
109
- .channel-list,
110
- .message-area {
111
- display: flex;
112
- flex-direction: column;
113
- background: 0 0;
114
- border-right: 1px solid rgba(128, 128, 128, .2)
115
- }
116
-
117
- .bot-list {
118
- width: 250px;
119
- min-width: 250px;
120
- max-width: 250px;
121
- flex-shrink: 0
122
- }
123
-
124
- .channel-list {
125
- width: 300px;
126
- min-width: 300px;
127
- max-width: 300px;
128
- flex-shrink: 0
129
- }
130
-
131
- .message-area {
132
- flex: 1;
133
- border-right: none
134
- }
135
-
136
- .panel-header {
137
- padding: 16px;
138
- border-bottom: 1px solid rgba(128, 128, 128, .2);
139
- background: 0 0;
140
- display: flex;
141
- align-items: center;
142
- justify-content: space-between
143
- }
144
-
145
- .panel-header h3 {
146
- margin: 0;
147
- font-size: 16px;
148
- font-weight: 600;
149
- color: currentColor
150
- }
151
-
152
- .back-button {
153
- display: none;
154
- background: 0 0;
155
- border: none;
156
- color: currentColor;
157
- font-size: 18px;
158
- cursor: pointer;
159
- padding: 4px 8px;
160
- border-radius: 4px;
161
- transition: background-color .2s
162
- }
163
-
164
- .back-button:hover {
165
- background: rgba(128, 128, 128, .1)
166
- }
167
-
168
- .bot-items,
169
- .channel-items {
170
- flex: 1;
171
- overflow-y: auto;
172
- overflow-x: hidden;
173
- max-height: calc(100vh - 140px);
174
- -webkit-overflow-scrolling: touch;
175
- scrollbar-width: thin;
176
- scrollbar-color: rgba(144, 147, 153, .4) rgba(0, 0, 0, .05);
177
- scroll-behavior: smooth;
178
- overscroll-behavior: contain;
179
- padding-bottom: 8px
180
- }
181
-
182
- .bot-item,
183
- .channel-item {
184
- display: flex;
185
- align-items: center;
186
- padding: 12px 16px;
187
- cursor: pointer;
188
- border-bottom: 1px solid rgba(128, 128, 128, .1);
189
- transition: background-color .2s
190
- }
191
-
192
- .bot-item:hover,
193
- .channel-item:hover {
194
- background: rgba(128, 128, 128, .1)
195
- }
196
-
197
- .bot-item.active,
198
- .channel-item.active {
199
- background: rgba(33, 150, 243, .1);
200
- border-right: 3px solid #2196f3
201
- }
202
-
203
- .bot-avatar {
204
- width: 40px;
205
- height: 40px;
206
- margin-right: 12px;
207
- border-radius: 50%;
208
- overflow: hidden;
209
- display: flex;
210
- align-items: center;
211
- justify-content: center;
212
- background: #e0e0e0
213
- }
214
-
215
- .bot-avatar img {
216
- width: 100%;
217
- height: 100%;
218
- object-fit: cover
219
- }
220
-
221
- .avatar-placeholder {
222
- font-size: 16px;
223
- font-weight: 700;
224
- color: currentColor;
225
- opacity: .7
226
- }
227
-
228
- .bot-info {
229
- flex: 1
230
- }
231
-
232
- .bot-name {
233
- font-weight: 500;
234
- color: currentColor;
235
- margin-bottom: 2px
236
- }
237
-
238
- .bot-platform {
239
- font-size: 12px;
240
- color: currentColor;
241
- opacity: .7
242
- }
243
-
244
- .bot-status {
245
- width: 8px;
246
- height: 8px;
247
- border-radius: 50%;
248
- margin-left: 8px
249
- }
250
-
251
- .bot-status.online {
252
- background: #4caf50
253
- }
254
-
255
- .bot-status.offline {
256
- background: #f44336
257
- }
258
-
259
- .channel-info {
260
- flex: 1
261
- }
262
-
263
- .channel-name {
264
- font-weight: 500;
265
- color: currentColor;
266
- margin-bottom: 2px
267
- }
268
-
269
- .channel-type {
270
- font-size: 12px;
271
- color: currentColor;
272
- opacity: .7
273
- }
274
-
275
- .channel-message-count {
276
- background: #2196f3;
277
- color: #fff;
278
- font-size: 12px;
279
- padding: 2px 6px;
280
- border-radius: 10px;
281
- min-width: 18px;
282
- text-align: center;
283
- position: relative;
284
- transition: all .2s ease
285
- }
286
-
287
- .channel-message-count.draggable-bubble {
288
- cursor: grab;
289
- user-select: none;
290
- -webkit-user-select: none;
291
- -moz-user-select: none;
292
- -ms-user-select: none
293
- }
294
-
295
- .channel-message-count.draggable-bubble:hover {
296
- background: #1976d2;
297
- transform: scale(1.1);
298
- box-shadow: 0 2px 8px rgba(33, 150, 243, .3)
299
- }
300
-
301
- .channel-message-count.draggable-bubble.dragging,
302
- .channel-message-count.draggable-bubble:active {
303
- cursor: grabbing;
304
- background: #1565c0;
305
- box-shadow: 0 4px 12px rgba(33, 150, 243, .4)
306
- }
307
-
308
- .dragging-clone {
309
- position: fixed;
310
- z-index: 1000;
311
- pointer-events: none;
312
- transition: none;
313
- box-sizing: border-box;
314
- display: flex;
315
- align-items: center;
316
- justify-content: center;
317
- background: #2196f3;
318
- color: #fff;
319
- font-size: 12px;
320
- padding: 2px 6px;
321
- border-radius: 10px;
322
- min-width: 18px;
323
- text-align: center;
324
- box-shadow: 0 4px 12px rgba(33, 150, 243, .4)
325
- }
326
-
327
- .dragging-clone.will-delete {
328
- background: #f44336 !important;
329
- animation: shake .3s ease-in-out infinite
330
- }
331
-
332
- @keyframes pulseThreshold {
333
-
334
- 0%,
335
- 100% {
336
- opacity: .4;
337
- transform: scale(.9);
338
- border-color: rgba(244, 67, 54, .6);
339
- box-shadow: 0 0 15px rgba(244, 67, 54, .2)
340
- }
341
-
342
- 50% {
343
- opacity: .8;
344
- transform: scale(1.1);
345
- border-color: #f44336;
346
- box-shadow: 0 0 25px rgba(244, 67, 54, .4)
347
- }
348
- }
349
-
350
- @keyframes menuSlideIn {
351
- 0% {
352
- transform: translateY(8px);
353
- opacity: 0
354
- }
355
-
356
- 100% {
357
- transform: translateY(0);
358
- opacity: 1
359
- }
360
- }
361
-
362
- .message-content {
363
- display: flex;
364
- flex-direction: column;
365
- height: calc(100vh - 60px);
366
- overflow: hidden;
367
- position: relative
368
- }
369
-
370
- .message-history {
371
- flex: 1;
372
- overflow-y: auto;
373
- padding: 16px 16px 8px 16px;
374
- max-height: calc(100vh - 200px)
375
- }
376
-
377
- .message-item {
378
- display: flex;
379
- margin-bottom: 16px;
380
- padding: 8px;
381
- border-radius: 8px;
382
- transition: background-color .3s ease
383
- }
384
-
385
- .message-item:hover {
386
- background-color: rgba(128, 128, 128, .1)
387
- }
388
-
389
- .message-item.new-message {
390
- background-color: rgba(76, 175, 80, .2);
391
- animation: highlight 2s ease-out
392
- }
393
-
394
- .message-item.bot-message {
395
- flex-direction: row-reverse;
396
- justify-content: flex-start
397
- }
398
-
399
- .message-item.bot-message .message-avatar {
400
- margin-right: 0;
401
- margin-left: 12px
402
- }
403
-
404
- .message-item.bot-message .message-content-wrapper {
405
- display: flex;
406
- flex-direction: column;
407
- align-items: flex-end
408
- }
409
-
410
- .message-item.bot-message .message-header {
411
- display: flex;
412
- align-items: center;
413
- justify-content: flex-end;
414
- margin-bottom: 4px
415
- }
416
-
417
- .message-item.bot-message .message-username {
418
- margin-right: 0;
419
- margin-left: 8px;
420
- order: 2
421
- }
422
-
423
- .message-item.bot-message .message-time {
424
- order: 1
425
- }
426
-
427
- .message-item.bot-message .message-text {
428
- background-color: rgba(33, 150, 243, .1);
429
- padding: 8px 12px;
430
- border-radius: 12px;
431
- border-bottom-right-radius: 4px;
432
- display: inline-block;
433
- max-width: 80%;
434
- text-align: left;
435
- word-wrap: break-word;
436
- word-break: break-all;
437
- overflow-wrap: anywhere
438
- }
439
-
440
- @keyframes highlight {
441
- 0% {
442
- background-color: rgba(76, 175, 80, .3)
443
- }
444
-
445
- 100% {
446
- background-color: transparent
447
- }
448
- }
449
-
450
- .message-avatar {
451
- width: 32px;
452
- height: 32px;
453
- margin-right: 12px;
454
- border-radius: 50%;
455
- overflow: hidden;
456
- display: flex;
457
- align-items: center;
458
- justify-content: center;
459
- background: #e0e0e0;
460
- flex-shrink: 0
461
- }
462
-
463
- .message-avatar img {
464
- width: 100%;
465
- height: 100%;
466
- object-fit: cover
467
- }
468
-
469
- .message-avatar .avatar-placeholder {
470
- font-size: 12px;
471
- font-weight: 700;
472
- color: currentColor;
473
- opacity: .7
474
- }
475
-
476
- .message-content-wrapper {
477
- flex: 1
478
- }
479
-
480
- .message-header {
481
- display: flex;
482
- align-items: center;
483
- margin-bottom: 4px
484
- }
485
-
486
- .message-username {
487
- font-weight: 500;
488
- color: currentColor;
489
- margin-right: 8px
490
- }
491
-
492
- .message-time {
493
- font-size: 12px;
494
- color: currentColor;
495
- opacity: .5
496
- }
497
-
498
- .message-text {
499
- color: currentColor;
500
- line-height: 1.4;
501
- word-wrap: break-word;
502
- word-break: break-all;
503
- white-space: pre-wrap;
504
- max-width: 100%;
505
- overflow-wrap: anywhere;
506
- hyphens: auto
507
- }
508
-
509
- .message-item:not(.bot-message) .message-text {
510
- background-color: rgba(128, 128, 128, .1);
511
- padding: 8px 12px;
512
- border-radius: 12px;
513
- border-bottom-left-radius: 4px;
514
- display: inline-block;
515
- max-width: 80%;
516
- word-wrap: break-word;
517
- word-break: break-all;
518
- overflow-wrap: anywhere
519
- }
520
-
521
- .message-input {
522
- display: flex;
523
- flex-direction: column;
524
- padding: 12px 16px 16px 16px;
525
- border-top: 1px solid rgba(128, 128, 128, .2);
526
- background: 0 0;
527
- flex-shrink: 0;
528
- position: sticky;
529
- bottom: 0;
530
- margin-top: -10px
531
- }
532
-
533
- .input-row {
534
- display: flex;
535
- gap: 8px;
536
- align-items: center
537
- }
538
-
539
- .floating-scroll-button {
540
- position: absolute;
541
- right: 24px;
542
- bottom: 18%;
543
- width: 48px;
544
- height: 48px;
545
- background: #2196f3;
546
- border-radius: 50%;
547
- display: flex;
548
- align-items: center;
549
- justify-content: center;
550
- cursor: pointer;
551
- box-shadow: 0 4px 12px rgba(33, 150, 243, .3);
552
- color: #fff;
553
- transition: all .3s ease;
554
- z-index: 100;
555
- border: 2px solid rgba(255, 255, 255, .2)
556
- }
557
-
558
- .floating-scroll-button:hover {
559
- background: #1976d2;
560
- transform: scale(1.1);
561
- box-shadow: 0 6px 16px rgba(33, 150, 243, .4)
562
- }
563
-
564
- .floating-scroll-button:active {
565
- transform: scale(.95)
566
- }
567
-
568
- .input-row input {
569
- flex: 1;
570
- min-width: 0;
571
- padding: 8px 12px;
572
- border: 1px solid rgba(128, 128, 128, .3);
573
- border-radius: 4px;
574
- outline: 0;
575
- background: 0 0;
576
- color: currentColor
577
- }
578
-
579
- .input-row input:focus {
580
- border-color: #2196f3;
581
- box-shadow: 0 0 0 2px rgba(33, 150, 243, .2)
582
- }
583
-
584
- .input-row button {
585
- padding: 8px 16px;
586
- background: #2196f3;
587
- color: #fff;
588
- border: none;
589
- border-radius: 4px;
590
- cursor: pointer;
591
- transition: background-color .2s
592
- }
593
-
594
- .input-row button:hover:not(:disabled) {
595
- background: #1976d2
596
- }
597
-
598
- .input-row button:disabled {
599
- background: rgba(128, 128, 128, .3);
600
- cursor: not-allowed
601
- }
602
-
603
- .input-row button.is-sending {
604
- background: #ffc107 !important;
605
- color: #333 !important;
606
- cursor: default !important
607
- }
608
-
609
- .empty-state {
610
- display: flex;
611
- align-items: center;
612
- justify-content: center;
613
- height: 100%;
614
- color: currentColor;
615
- opacity: .5;
616
- font-size: 14px
617
- }
618
-
619
- .message-image-container {
620
- margin: 8px 0;
621
- max-width: 100%;
622
- display: block
623
- }
624
-
625
- .message-image {
626
- border-radius: 8px;
627
- object-fit: contain;
628
- display: block;
629
- cursor: pointer;
630
- transition: transform .2s ease;
631
- max-width: min(400px, 66.67vw);
632
- max-height: 200px;
633
- width: auto;
634
- height: auto;
635
- /* 确保GIF动画正常播放 */
636
- image-rendering: auto;
637
- -webkit-image-rendering: auto;
638
- -moz-image-rendering: auto;
639
- -o-image-rendering: auto;
640
- }
641
-
642
- .message-image:hover {
643
- transform: scale(1.02)
644
- }
645
-
646
- /* 专门针对GIF图片的样式 */
647
- .message-image[src*=".gif"],
648
- .message-image[src*="image/gif"] {
649
- /* 确保GIF动画不被优化掉 */
650
- image-rendering: auto !important;
651
- -webkit-image-rendering: auto !important;
652
- animation-play-state: running !important;
653
- }
654
-
655
- .message-image-loading {
656
- display: inline-block;
657
- padding: 8px 12px;
658
- background: rgba(128, 128, 128, .1);
659
- border-radius: 4px;
660
- color: currentColor;
661
- opacity: .7;
662
- font-size: 12px
663
- }
664
-
665
- .message-image-error {
666
- display: inline-block;
667
- padding: 8px 12px;
668
- background: rgba(244, 67, 54, .1);
669
- border: 1px solid rgba(244, 67, 54, .3);
670
- border-radius: 4px;
671
- color: #f44336;
672
- font-size: 12px;
673
- max-width: 300px;
674
- word-break: break-word
675
- }
676
-
677
- .message-text-content {
678
- display: inline;
679
- word-wrap: break-word;
680
- word-break: break-all;
681
- overflow-wrap: anywhere;
682
- hyphens: auto
683
- }
684
-
685
- .message-paragraph {
686
- display: block;
687
- margin-bottom: 4px
688
- }
689
-
690
- .message-paragraph:last-child {
691
- margin-bottom: 0
692
- }
693
-
694
- .forward-message-container {
695
- border: 1px solid #fff;
696
- border-radius: 8px;
697
- margin: 4px 0;
698
- overflow: hidden;
699
- background: #f9f9f900
700
- }
701
-
702
- .forward-message-preview {
703
- padding: 12px;
704
- cursor: pointer;
705
- transition: background-color .2s
706
- }
707
-
708
- .forward-message-preview:hover {
709
- background: #f0f0f0
710
- }
711
-
712
- .forward-message-title {
713
- font-weight: 600;
714
- color: #333;
715
- margin-bottom: 8px;
716
- font-size: 14px
717
- }
718
-
719
- .forward-message-preview-item {
720
- color: #666;
721
- font-size: 13px;
722
- margin: 2px 0;
723
- line-height: 1.4;
724
- word-wrap: break-word;
725
- word-break: break-all;
726
- overflow-wrap: anywhere
727
- }
728
-
729
- .forward-message-footer {
730
- display: flex;
731
- justify-content: space-between;
732
- align-items: center;
733
- margin-top: 8px;
734
- padding-top: 8px;
735
- border-top: 1px solid #e8e8e8
736
- }
737
-
738
- .forward-message-count {
739
- color: #2196f3;
740
- font-size: 12px
741
- }
742
-
743
- .forward-message-toggle {
744
- color: #666;
745
- font-size: 12px
746
- }
747
-
748
- .forward-message-expanded {
749
- border-top: 1px solid #e0e0e0;
750
- background: #fff;
751
- max-height: 400px;
752
- overflow-y: auto
753
- }
754
-
755
- .forwarded-message-item {
756
- padding: 12px;
757
- border-bottom: 1px solid #f0f0f0
758
- }
759
-
760
- .forwarded-message-item:last-child {
761
- border-bottom: none
762
- }
763
-
764
- .forwarded-message-header {
765
- display: flex;
766
- align-items: center;
767
- margin-bottom: 6px
768
- }
769
-
770
- .forwarded-message-nickname {
771
- font-weight: 600;
772
- color: #333;
773
- font-size: 13px
774
- }
775
-
776
- .forwarded-message-userid {
777
- color: #999;
778
- font-size: 11px;
779
- margin-left: 6px
780
- }
781
-
782
- .forwarded-message-content {
783
- color: #555;
784
- font-size: 13px;
785
- line-height: 1.4;
786
- word-wrap: break-word;
787
- word-break: break-all;
788
- overflow-wrap: anywhere
789
- }
790
-
791
- .message-at {
792
- background: rgba(33, 150, 243, .1);
793
- color: #2196f3;
794
- padding: 2px 4px;
795
- border-radius: 3px;
796
- font-weight: 500;
797
- cursor: pointer
798
- }
799
-
800
- .message-unknown {
801
- background: rgba(255, 152, 0, .1);
802
- color: #ff9800;
803
- padding: 2px 4px;
804
- border-radius: 3px;
805
- font-style: italic;
806
- cursor: help
807
- }
808
-
809
- .input-row input {
810
- flex: 1;
811
- min-width: 0;
812
- padding: 8px 12px;
813
- border: 1px solid rgba(128, 128, 128, .3);
814
- border-radius: 4px;
815
- outline: 0;
816
- background: 0 0;
817
- color: currentColor
818
- }
819
-
820
- .input-row input:focus {
821
- border-color: #2196f3;
822
- box-shadow: 0 0 0 2px rgba(33, 150, 243, .2)
823
- }
824
-
825
- .input-row input::placeholder {
826
- color: currentColor;
827
- opacity: .5
828
- }
829
-
830
- .input-row button {
831
- padding: 8px 16px;
832
- background: #2196f3;
833
- color: #fff;
834
- border: none;
835
- border-radius: 4px;
836
- cursor: pointer;
837
- transition: background-color .2s;
838
- flex-shrink: 0;
839
- white-space: nowrap
840
- }
841
-
842
- .input-row button:hover:not(:disabled) {
843
- background: #1976d2
844
- }
845
-
846
- .input-row button:disabled {
847
- background: rgba(128, 128, 128, .3);
848
- cursor: not-allowed
849
- }
850
-
851
- .input-row button.is-sending {
852
- background: #ffc107 !important;
853
- color: #333 !important;
854
- cursor: default !important
855
- }
856
-
857
- .message-input .input-row button.is-sending {
858
- background: #ffc107 !important;
859
- color: #333 !important;
860
- cursor: default !important;
861
- border-color: #ffc107 !important
862
- }
863
-
864
- .empty-state {
865
- display: flex;
866
- align-items: center;
867
- justify-content: center;
868
- height: 100%;
869
- color: currentColor;
870
- opacity: .5;
871
- font-size: 14px
872
- }
873
-
874
- .empty-state {
875
- display: flex;
876
- align-items: center;
877
- justify-content: center;
878
- height: 100%;
879
- color: currentColor;
880
- opacity: .5;
881
- font-size: 14px
882
- }
883
-
884
- .message-text-content {
885
- display: inline;
886
- word-wrap: break-word;
887
- word-break: break-all;
888
- overflow-wrap: anywhere;
889
- hyphens: auto
890
- }
891
-
892
- .message-image-container {
893
- display: block;
894
- margin: 4px 0
895
- }
896
-
897
- .message-image {
898
- border-radius: 8px;
899
- margin: 4px 0;
900
- display: block;
901
- cursor: pointer;
902
- transition: transform .2s ease;
903
- object-fit: contain;
904
- background: rgba(128, 128, 128, .1)
905
- }
906
-
907
- .message-image:hover {
908
- transform: scale(1.02)
909
- }
910
-
911
- .message-image-loading {
912
- height: 60px;
913
- width: 200px;
914
- border-radius: 8px;
915
- margin: 4px 0;
916
- display: flex;
917
- align-items: center;
918
- justify-content: center;
919
- background: rgba(128, 128, 128, .1);
920
- color: currentColor;
921
- opacity: .7;
922
- font-size: 14px;
923
- border: 1px dashed rgba(128, 128, 128, .3)
924
- }
925
-
926
- .message-image-error {
927
- min-height: 60px;
928
- width: 200px;
929
- border-radius: 8px;
930
- margin: 4px 0;
931
- display: flex;
932
- flex-direction: column;
933
- align-items: center;
934
- justify-content: center;
935
- background: rgba(128, 128, 128, .1);
936
- color: currentColor;
937
- opacity: .7;
938
- font-size: 14px;
939
- border: 1px dashed rgba(128, 128, 128, .3);
940
- padding: 8px;
941
- text-align: center
942
- }
943
-
944
- .message-at {
945
- background: rgba(33, 150, 243, .1);
946
- color: #2196f3;
947
- padding: 2px 6px;
948
- border-radius: 4px;
949
- font-weight: 500;
950
- cursor: pointer;
951
- display: inline-block;
952
- margin: 0 2px
953
- }
954
-
955
- .message-at:hover {
956
- background: rgba(33, 150, 243, .2)
957
- }
958
-
959
- .message-unknown {
960
- background: rgba(255, 152, 0, .1);
961
- color: #ff9800;
962
- padding: 2px 6px;
963
- border-radius: 4px;
964
- font-size: 12px;
965
- display: inline-block;
966
- margin: 0 2px;
967
- cursor: help
968
- }
969
-
970
- @keyframes pulse {
971
-
972
- 0%,
973
- 100% {
974
- transform: translate(-50%, -50%) scale(1)
975
- }
976
-
977
- 50% {
978
- transform: translate(-50%, -50%) scale(1.1)
979
- }
980
- }
981
-
982
- .channel-message-count.will-delete {
983
- background: #f44336 !important;
984
- animation: shake .3s ease-in-out infinite
985
- }
986
-
987
- @keyframes shake {
988
-
989
- 0%,
990
- 100% {
991
- transform: translateX(0)
992
- }
993
-
994
- 25% {
995
- transform: translateX(-2px)
996
- }
997
-
998
- 75% {
999
- transform: translateX(2px)
1000
- }
1001
- }
1002
-
1003
- body.dragging-bubble-global {
1004
- user-select: none;
1005
- -webkit-user-select: none;
1006
- -moz-user-select: none;
1007
- -ms-user-select: none;
1008
- cursor: grabbing
1009
- }
1010
-
1011
- .drag-threshold-circle {
1012
- position: fixed;
1013
- pointer-events: none;
1014
- border: 3px dashed rgba(244, 67, 54, .8);
1015
- border-radius: 50%;
1016
- z-index: 999;
1017
- background: rgba(244, 67, 54, .1);
1018
- box-shadow: 0 0 20px rgba(244, 67, 54, .3);
1019
- animation: pulseThreshold 1.5s ease-in-out infinite
1020
- }
1021
-
1022
- .context-menu {
1023
- position: fixed;
1024
- background: rgba(255, 255, 255, .98);
1025
- border: none;
1026
- border-radius: 16px;
1027
- box-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);
1028
- backdrop-filter: blur(20px);
1029
- -webkit-backdrop-filter: blur(20px);
1030
- overflow: hidden;
1031
- z-index: 10000;
1032
- min-width: 180px
1033
- }
1034
-
1035
- .context-menu-item {
1036
- display: flex;
1037
- align-items: center;
1038
- gap: 12px;
1039
- padding: 14px 18px;
1040
- background: 0 0;
1041
- border: none;
1042
- color: #333;
1043
- font-size: 14px;
1044
- font-weight: 500;
1045
- cursor: pointer;
1046
- transition: all .2s cubic-bezier(.4, 0, .2, 1);
1047
- width: 100%;
1048
- text-align: left;
1049
- position: relative;
1050
- border-bottom: 1px solid rgba(0, 0, 0, .08);
1051
- min-width: 140px
1052
- }
1053
-
1054
- .context-menu-item:last-child {
1055
- border-bottom: none
1056
- }
1057
-
1058
- .context-menu-item::before {
1059
- content: '';
1060
- position: absolute;
1061
- left: 0;
1062
- top: 0;
1063
- bottom: 0;
1064
- width: 3px;
1065
- background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
1066
- transform: scaleY(0);
1067
- transition: transform .2s cubic-bezier(.4, 0, .2, 1)
1068
- }
1069
-
1070
- .context-menu-item:hover {
1071
- background: linear-gradient(90deg, rgba(102, 126, 234, .08) 0, rgba(118, 75, 162, .08) 100%);
1072
- color: #667eea;
1073
- transform: translateX(4px)
1074
- }
1075
-
1076
- .context-menu-item:hover::before {
1077
- transform: scaleY(1)
1078
- }
1079
-
1080
- .context-menu-item.danger {
1081
- color: #d32f2f
1082
- }
1083
-
1084
- .context-menu-item.danger:hover {
1085
- background: linear-gradient(90deg, rgba(244, 67, 54, .08) 0, rgba(211, 47, 47, .08) 100%);
1086
- color: #d32f2f
1087
- }
1088
-
1089
- .bot-item.pinned,
1090
- .channel-item.pinned {
1091
- background: rgba(255, 193, 7, .1);
1092
- border-left: 3px solid #ffc107
1093
- }
1094
-
1095
- .bot-item.pinned::before,
1096
- .channel-item.pinned::before {
1097
- content: "📌";
1098
- position: absolute;
1099
- left: 4px;
1100
- top: 50%;
1101
- transform: translateY(-50%);
1102
- font-size: 12px;
1103
- opacity: .7
1104
- }
1105
-
1106
- .bot-item.pinned {
1107
- position: relative;
1108
- padding-left: 24px
1109
- }
1110
-
1111
- .channel-item.pinned {
1112
- position: relative;
1113
- padding-left: 24px
1114
- }
1115
-
1116
- @media (prefers-color-scheme:dark) {
1117
- .context-menu {
1118
- background: rgba(30, 30, 30, .98);
1119
- box-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2)
1120
- }
1121
-
1122
- .context-menu-item {
1123
- color: #fff;
1124
- border-bottom-color: rgba(255, 255, 255, .1)
1125
- }
1126
-
1127
- .context-menu-item::before {
1128
- background: linear-gradient(135deg, #4facfe 0, #00f2fe 100%)
1129
- }
1130
-
1131
- .context-menu-item:hover {
1132
- background: linear-gradient(90deg, rgba(79, 172, 254, .12) 0, rgba(0, 242, 254, .12) 100%);
1133
- color: #4facfe
1134
- }
1135
-
1136
- .context-menu-item.danger:hover {
1137
- background: linear-gradient(90deg, rgba(244, 67, 54, .12) 0, rgba(255, 138, 128, .12) 100%);
1138
- color: #ff8a80
1139
- }
1140
-
1141
- .bot-item.pinned,
1142
- .channel-item.pinned {
1143
- background: rgba(255, 193, 7, .15)
1144
- }
1145
- }
1146
-
1147
- .message-share-card {
1148
- display: inline-block;
1149
- width: 75px;
1150
- margin: 8px 0;
1151
- border: 1px solid rgba(128, 128, 128, .2);
1152
- border-radius: 12px;
1153
- background: rgba(255, 255, 255, .05);
1154
- transition: all .3s ease;
1155
- cursor: pointer;
1156
- backdrop-filter: blur(8px);
1157
- -webkit-backdrop-filter: blur(8px)
1158
- }
1159
-
1160
- .message-share-card:hover {
1161
- transform: translateY(-2px);
1162
- box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
1163
- border-color: rgba(33, 150, 243, .3)
1164
- }
1165
-
1166
- .share-card-preview {
1167
- width: 100%;
1168
- position: relative;
1169
- display: flex;
1170
- align-items: center;
1171
- justify-content: center;
1172
- padding: 4px;
1173
- border-radius: 12px 12px 0 0
1174
- }
1175
-
1176
- .share-card-image {
1177
- max-width: calc(100% - 8px);
1178
- width: auto;
1179
- height: auto;
1180
- object-fit: contain;
1181
- transition: transform .3s ease;
1182
- display: block;
1183
- border-radius: 4px
1184
- }
1185
-
1186
- .message-share-card:hover .share-card-image {
1187
- transform: scale(1.05)
1188
- }
1189
-
1190
- .share-card-content {
1191
- padding: 8px
1192
- }
1193
-
1194
- .share-card-header {
1195
- display: flex;
1196
- align-items: center;
1197
- margin-bottom: 12px;
1198
- gap: 12px
1199
- }
1200
-
1201
- .share-card-icon {
1202
- width: 32px;
1203
- height: 32px;
1204
- border-radius: 8px;
1205
- object-fit: cover;
1206
- flex-shrink: 0
1207
- }
1208
-
1209
- .share-card-app-info {
1210
- flex: 1;
1211
- min-width: 0
1212
- }
1213
-
1214
- .share-card-app-name {
1215
- font-size: 12px;
1216
- color: currentColor;
1217
- opacity: .7;
1218
- margin-bottom: 2px;
1219
- font-weight: 500
1220
- }
1221
-
1222
- .share-card-title {
1223
- font-size: 10px;
1224
- font-weight: 600;
1225
- color: currentColor;
1226
- line-height: 1.2;
1227
- word-wrap: break-word;
1228
- display: -webkit-box;
1229
- -webkit-box-orient: vertical;
1230
- overflow: hidden
1231
- }
1232
-
1233
- .share-card-desc {
1234
- font-size: 14px;
1235
- color: currentColor;
1236
- opacity: .8;
1237
- line-height: 1.4;
1238
- margin-bottom: 12px;
1239
- display: -webkit-box;
1240
- -webkit-box-orient: vertical;
1241
- overflow: hidden;
1242
- word-wrap: break-word
1243
- }
1244
-
1245
- .share-card-link-hint {
1246
- font-size: 12px;
1247
- color: #2196f3;
1248
- font-weight: 500;
1249
- display: flex;
1250
- align-items: center;
1251
- gap: 4px
1252
- }
1253
-
1254
- .share-card-link-hint::after {
1255
- content: "→";
1256
- transition: transform .2s ease
1257
- }
1258
-
1259
- .message-share-card:hover .share-card-link-hint::after {
1260
- transform: translateX(2px)
1261
- }
1262
-
1263
- .message-json-error,
1264
- .message-json-raw {
1265
- display: inline-block;
1266
- margin: 8px 0;
1267
- max-width: 400px
1268
- }
1269
-
1270
- .json-error-text {
1271
- color: #f44336;
1272
- font-size: 14px;
1273
- font-weight: 500
1274
- }
1275
-
1276
- .json-label {
1277
- color: currentColor;
1278
- opacity: .7;
1279
- font-size: 12px;
1280
- font-weight: 500;
1281
- margin-bottom: 8px
1282
- }
1283
-
1284
- .json-raw-data {
1285
- margin-top: 8px
1286
- }
1287
-
1288
- .json-raw-data summary {
1289
- cursor: pointer;
1290
- font-size: 12px;
1291
- color: #2196f3;
1292
- font-weight: 500;
1293
- padding: 4px 8px;
1294
- border-radius: 4px;
1295
- background: rgba(33, 150, 243, .1);
1296
- display: inline-block;
1297
- transition: background-color .2s ease
1298
- }
1299
-
1300
- .json-raw-data summary:hover {
1301
- background: rgba(33, 150, 243, .2)
1302
- }
1303
-
1304
- .json-raw-content {
1305
- margin-top: 8px;
1306
- padding: 12px;
1307
- background: rgba(128, 128, 128, .1);
1308
- border-radius: 8px;
1309
- font-family: "Courier New", monospace;
1310
- font-size: 12px;
1311
- color: currentColor;
1312
- opacity: .8;
1313
- white-space: pre-wrap;
1314
- word-wrap: break-word;
1315
- word-break: break-all;
1316
- overflow-wrap: anywhere;
1317
- max-height: 200px;
1318
- overflow-y: auto;
1319
- border: 1px solid rgba(128, 128, 128, .2)
1320
- }
1321
-
1322
- @media (prefers-color-scheme:dark) {
1323
- .message-share-card {
1324
- background: rgba(255, 255, 255, .08);
1325
- border-color: rgba(255, 255, 255, .15)
1326
- }
1327
-
1328
- .message-share-card:hover {
1329
- border-color: rgba(33, 150, 243, .5);
1330
- box-shadow: 0 8px 24px rgba(0, 0, 0, .3)
1331
- }
1332
-
1333
- .json-raw-content {
1334
- background: rgba(255, 255, 255, .05);
1335
- border-color: rgba(255, 255, 255, .1)
1336
- }
1337
- }
1338
-
1339
- @media (max-width:768px) {
1340
- .chat-container {
1341
- position: relative;
1342
- height: 100vh;
1343
- height: 100dvh
1344
- }
1345
-
1346
- .bot-list,
1347
- .channel-list,
1348
- .message-area {
1349
- position: absolute;
1350
- top: 0;
1351
- left: 0;
1352
- width: 100%;
1353
- height: 100%;
1354
- transition: transform .3s ease;
1355
- z-index: 1
1356
- }
1357
-
1358
- .bot-list {
1359
- transform: translateX(0);
1360
- z-index: 3
1361
- }
1362
-
1363
- .channel-list {
1364
- transform: translateX(100%);
1365
- z-index: 2
1366
- }
1367
-
1368
- .message-area {
1369
- transform: translateX(200%);
1370
- z-index: 1
1371
- }
1372
-
1373
- .chat-container.show-channels .bot-list {
1374
- transform: translateX(-100%)
1375
- }
1376
-
1377
- .chat-container.show-channels .channel-list {
1378
- transform: translateX(0);
1379
- z-index: 3
1380
- }
1381
-
1382
- .chat-container.show-channels .message-area {
1383
- transform: translateX(100%)
1384
- }
1385
-
1386
- .chat-container.show-messages .bot-list {
1387
- transform: translateX(-200%)
1388
- }
1389
-
1390
- .chat-container.show-messages .channel-list {
1391
- transform: translateX(-100%)
1392
- }
1393
-
1394
- .chat-container.show-messages .message-area {
1395
- transform: translateX(0);
1396
- z-index: 3
1397
- }
1398
-
1399
- .back-button {
1400
- display: none !important
1401
- }
1402
-
1403
- .panel-header {
1404
- flex-direction: row-reverse;
1405
- position: sticky;
1406
- top: 0;
1407
- z-index: 5;
1408
- background: inherit
1409
- }
1410
-
1411
- .panel-header h3 {
1412
- text-align: right
1413
- }
1414
-
1415
- .floating-scroll-button {
1416
- right: 16px;
1417
- bottom: calc(90px + env(safe-area-inset-bottom, 0px));
1418
- width: 40px;
1419
- height: 40px;
1420
- transition: bottom .3s ease
1421
- }
1422
-
1423
- .message-input {
1424
- padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
1425
- position: fixed;
1426
- bottom: 20px;
1427
- left: 0;
1428
- right: 0;
1429
- background: inherit;
1430
- border-top: 1px solid rgba(128, 128, 128, .2);
1431
- z-index: 10;
1432
- min-height: calc(60px + env(safe-area-inset-bottom, 0px));
1433
- transition: transform .3s ease;
1434
- transform: translateZ(0)
1435
- }
1436
-
1437
- .input-row input {
1438
- font-size: 16px;
1439
- padding: 10px 12px
1440
- }
1441
-
1442
- .input-row button {
1443
- padding: 10px 16px;
1444
- font-size: 16px
1445
- }
1446
-
1447
- .message-history {
1448
- padding: 12px;
1449
- max-height: calc(100vh - 140px - env(safe-area-inset-bottom, 0px));
1450
- max-height: calc(100dvh - 140px - env(safe-area-inset-bottom, 0px));
1451
- padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
1452
- overflow-y: auto;
1453
- -webkit-overflow-scrolling: touch;
1454
- transition: max-height .3s ease
1455
- }
1456
-
1457
- .message-item {
1458
- margin-bottom: 12px;
1459
- padding: 6px
1460
- }
1461
-
1462
- .message-text {
1463
- max-width: 90% !important
1464
- }
1465
-
1466
- .message-avatar {
1467
- width: 28px;
1468
- height: 28px;
1469
- margin-right: 8px
1470
- }
1471
-
1472
- .message-item.bot-message .message-avatar {
1473
- margin-left: 8px
1474
- }
1475
-
1476
- .message-image {
1477
- max-width: min(280px, 66.67vw);
1478
- max-height: 160px
1479
- }
1480
-
1481
- .quote-content .message-image {
1482
- max-width: min(150px, 50vw);
1483
- max-height: 80px
1484
- }
1485
-
1486
- .context-menu {
1487
- min-width: 160px;
1488
- backdrop-filter: blur(12px);
1489
- -webkit-backdrop-filter: blur(12px)
1490
- }
1491
-
1492
- .context-menu-item {
1493
- padding: 10px 12px;
1494
- font-size: 13px;
1495
- min-width: 100px
1496
- }
1497
-
1498
- .bot-item,
1499
- .channel-item {
1500
- padding: 14px 16px
1501
- }
1502
-
1503
- .bot-avatar {
1504
- width: 36px;
1505
- height: 36px;
1506
- margin-right: 10px
1507
- }
1508
-
1509
- .bot-name,
1510
- .channel-name {
1511
- font-size: 15px
1512
- }
1513
-
1514
- .bot-platform,
1515
- .channel-type {
1516
- font-size: 13px
1517
- }
1518
-
1519
- .bot-items,
1520
- .channel-items {
1521
- flex: 1;
1522
- overflow-y: auto;
1523
- overflow-x: hidden;
1524
- max-height: calc(100vh - 140px);
1525
- max-height: calc(100dvh - 140px);
1526
- -webkit-overflow-scrolling: touch;
1527
- scrollbar-width: thin;
1528
- scrollbar-color: rgba(144, 147, 153, .4) rgba(0, 0, 0, .05);
1529
- scroll-behavior: smooth;
1530
- overscroll-behavior: contain;
1531
- padding-bottom: 8px
1532
- }
1533
- }
1534
-
1535
- @media (min-width:769px) and (max-width:1024px) {
1536
- .bot-list {
1537
- width: 220px;
1538
- min-width: 220px;
1539
- max-width: 220px
1540
- }
1541
-
1542
- .channel-list {
1543
- width: 280px;
1544
- min-width: 280px;
1545
- max-width: 280px
1546
- }
1547
-
1548
- .message-image {
1549
- max-width: min(350px, 66.67vw);
1550
- max-height: 180px
1551
- }
1552
- }
1553
-
1554
- .chat-container.swiping {
1555
- overflow: hidden
1556
- }
1557
-
1558
- .bot-list.swiping,
1559
- .channel-list.swiping,
1560
- .message-area.swiping {
1561
- transition: none !important
1562
- }
1563
-
1564
- .swipe-indicator {
1565
- position: fixed;
1566
- top: 50%;
1567
- left: 20px;
1568
- transform: translateY(-50%);
1569
- background: rgba(33, 150, 243, .8);
1570
- color: #fff;
1571
- padding: 8px 12px;
1572
- border-radius: 20px;
1573
- font-size: 14px;
1574
- z-index: 1000;
1575
- opacity: 0;
1576
- transition: opacity .2s ease;
1577
- pointer-events: none;
1578
- backdrop-filter: blur(8px);
1579
- -webkit-backdrop-filter: blur(8px)
1580
- }
1581
-
1582
- .swipe-indicator.show {
1583
- opacity: 1
1584
- }
1585
-
1586
- .message-area .message-content {
1587
- padding-bottom: 80px
1588
- }
1589
-
1590
- .image-preview-container {
1591
- display: flex;
1592
- flex-wrap: wrap;
1593
- gap: 8px;
1594
- padding: 8px 0;
1595
- margin-bottom: 8px;
1596
- border-bottom: 1px solid rgba(128, 128, 128, .1)
1597
- }
1598
-
1599
- .image-preview-item {
1600
- position: relative;
1601
- width: 60px;
1602
- height: 60px;
1603
- border-radius: 8px;
1604
- overflow: hidden;
1605
- border: 2px solid rgba(33, 150, 243, .3);
1606
- background: rgba(128, 128, 128, .1)
1607
- }
1608
-
1609
- .preview-image {
1610
- width: 100%;
1611
- height: 100%;
1612
- object-fit: cover;
1613
- display: block
1614
- }
1615
-
1616
- .remove-image-btn {
1617
- position: absolute;
1618
- top: -6px;
1619
- right: -6px;
1620
- width: 20px;
1621
- height: 20px;
1622
- border-radius: 50%;
1623
- background: #f44336;
1624
- color: #fff;
1625
- border: none;
1626
- cursor: pointer;
1627
- display: flex;
1628
- align-items: center;
1629
- justify-content: center;
1630
- font-size: 12px;
1631
- transition: all .2s ease;
1632
- box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
1633
- }
1634
-
1635
- .remove-image-btn:hover {
1636
- background: #d32f2f;
1637
- transform: scale(1.1)
1638
- }
1639
-
1640
- .input-actions {
1641
- position: relative;
1642
- margin-right: 8px
1643
- }
1644
-
1645
- .add-button {
1646
- width: 36px;
1647
- height: 36px;
1648
- border-radius: 12px;
1649
- background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
1650
- border: none;
1651
- color: #fff;
1652
- cursor: pointer;
1653
- display: flex;
1654
- align-items: center;
1655
- justify-content: center;
1656
- transition: all .3s cubic-bezier(.4, 0, .2, 1);
1657
- flex-shrink: 0;
1658
- box-shadow: 0 2px 8px rgba(102, 126, 234, .3);
1659
- position: relative;
1660
- overflow: hidden
1661
- }
1662
-
1663
- .add-button::before {
1664
- content: '';
1665
- position: absolute;
1666
- top: 0;
1667
- left: 0;
1668
- right: 0;
1669
- bottom: 0;
1670
- background: linear-gradient(135deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .1) 100%);
1671
- border-radius: 12px;
1672
- opacity: 0;
1673
- transition: opacity .3s ease
1674
- }
1675
-
1676
- .add-button:hover {
1677
- transform: translateY(-2px) scale(1.05);
1678
- box-shadow: 0 4px 16px rgba(102, 126, 234, .4)
1679
- }
1680
-
1681
- .add-button:hover::before {
1682
- opacity: 1
1683
- }
1684
-
1685
- .add-button.active {
1686
- background: linear-gradient(135deg, #f093fb 0, #f5576c 100%);
1687
- transform: translateY(-2px) scale(1.05) rotate(45deg);
1688
- box-shadow: 0 4px 16px rgba(245, 87, 108, .4)
1689
- }
1690
-
1691
- .add-button:active {
1692
- transform: translateY(0) scale(.98);
1693
- transition: all .1s ease
1694
- }
1695
-
1696
- .action-menu {
1697
- position: absolute;
1698
- bottom: 100%;
1699
- left: 0;
1700
- margin-bottom: 12px;
1701
- background: rgba(255, 255, 255, .98);
1702
- border: none;
1703
- border-radius: 16px;
1704
- box-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);
1705
- backdrop-filter: blur(20px);
1706
- -webkit-backdrop-filter: blur(20px);
1707
- overflow: hidden;
1708
- z-index: 1000;
1709
- min-width: 140px;
1710
- transform: translateY(8px);
1711
- opacity: 0;
1712
- animation: menuSlideIn .3s cubic-bezier(.4, 0, .2, 1) forwards
1713
- }
1714
-
1715
- .action-menu-item {
1716
- display: flex;
1717
- align-items: center;
1718
- gap: 12px;
1719
- padding: 14px 18px;
1720
- background: 0 0;
1721
- border: none;
1722
- color: #333;
1723
- font-size: 14px;
1724
- font-weight: 500;
1725
- cursor: pointer;
1726
- transition: all .2s cubic-bezier(.4, 0, .2, 1);
1727
- width: 100%;
1728
- text-align: left;
1729
- position: relative
1730
- }
1731
-
1732
- .action-menu-item::before {
1733
- content: '';
1734
- position: absolute;
1735
- left: 0;
1736
- top: 0;
1737
- bottom: 0;
1738
- width: 3px;
1739
- background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
1740
- transform: scaleY(0);
1741
- transition: transform .2s cubic-bezier(.4, 0, .2, 1)
1742
- }
1743
-
1744
- .action-menu-item:hover {
1745
- background: linear-gradient(90deg, rgba(102, 126, 234, .08) 0, rgba(118, 75, 162, .08) 100%);
1746
- color: #667eea;
1747
- transform: translateX(4px)
1748
- }
1749
-
1750
- .action-menu-item:hover::before {
1751
- transform: scaleY(1)
1752
- }
1753
-
1754
- .action-menu-item svg {
1755
- flex-shrink: 0
1756
- }
1757
-
1758
- @media (prefers-color-scheme:dark) {
1759
- .action-menu {
1760
- background: rgba(30, 30, 30, .98);
1761
- box-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2)
1762
- }
1763
-
1764
- .action-menu-item {
1765
- color: #fff
1766
- }
1767
-
1768
- .action-menu-item::before {
1769
- background: linear-gradient(135deg, #4facfe 0, #00f2fe 100%)
1770
- }
1771
-
1772
- .action-menu-item:hover {
1773
- background: linear-gradient(90deg, rgba(79, 172, 254, .12) 0, rgba(0, 242, 254, .12) 100%);
1774
- color: #4facfe
1775
- }
1776
-
1777
- .add-button {
1778
- background: linear-gradient(135deg, #4facfe 0, #00f2fe 100%);
1779
- box-shadow: 0 2px 8px rgba(79, 172, 254, .3)
1780
- }
1781
-
1782
- .add-button:hover {
1783
- box-shadow: 0 4px 16px rgba(79, 172, 254, .4)
1784
- }
1785
-
1786
- .add-button.active {
1787
- background: linear-gradient(135deg, #fa709a 0, #fee140 100%);
1788
- box-shadow: 0 4px 16px rgba(250, 112, 154, .4)
1789
- }
1790
-
1791
- .image-preview-item {
1792
- border-color: rgba(100, 181, 246, .5);
1793
- background: rgba(255, 255, 255, .05)
1794
- }
1795
- }
1796
-
1797
- @media (max-width:768px) {
1798
- .image-preview-container {
1799
- padding: 6px 0;
1800
- margin-bottom: 6px
1801
- }
1802
-
1803
- .image-preview-item {
1804
- width: 50px;
1805
- height: 50px
1806
- }
1807
-
1808
- .add-button {
1809
- width: 32px;
1810
- height: 32px;
1811
- border-radius: 10px
1812
- }
1813
-
1814
- .action-menu {
1815
- min-width: 100px
1816
- }
1817
-
1818
- .action-menu-item {
1819
- padding: 10px 12px;
1820
- font-size: 13px
1821
- }
1822
-
1823
- .remove-image-btn {
1824
- width: 18px;
1825
- height: 18px;
1826
- top: -5px;
1827
- right: -5px
1828
- }
1829
- }
1830
-
1831
- .message-history::-webkit-scrollbar {
1832
- width: 6px
1833
- }
1834
-
1835
- .message-history::-webkit-scrollbar-track {
1836
- background: 0 0
1837
- }
1838
-
1839
- .message-history::-webkit-scrollbar-thumb {
1840
- background-color: rgba(144, 147, 153, .3);
1841
- border-radius: 4px;
1842
- transition: background-color .3s
1843
- }
1844
-
1845
- .message-history::-webkit-scrollbar-thumb:hover {
1846
- background-color: rgba(144, 147, 153, .5)
1847
- }
1848
-
1849
- .bot-items::-webkit-scrollbar,
1850
- .channel-items::-webkit-scrollbar {
1851
- width: 8px
1852
- }
1853
-
1854
- .bot-items::-webkit-scrollbar-track,
1855
- .channel-items::-webkit-scrollbar-track {
1856
- background: rgba(0, 0, 0, .05);
1857
- border-radius: 4px
1858
- }
1859
-
1860
- .bot-items::-webkit-scrollbar-thumb,
1861
- .channel-items::-webkit-scrollbar-thumb {
1862
- background-color: rgba(144, 147, 153, .4);
1863
- border-radius: 4px;
1864
- transition: all .3s ease;
1865
- border: 1px solid rgba(255, 255, 255, .1);
1866
- background-clip: padding-box
1867
- }
1868
-
1869
- .bot-items::-webkit-scrollbar-thumb:hover,
1870
- .channel-items::-webkit-scrollbar-thumb:hover {
1871
- background-color: rgba(144, 147, 153, .6);
1872
- transform: scaleX(1.2)
1873
- }
1874
-
1875
- .bot-items::-webkit-scrollbar-thumb:active,
1876
- .channel-items::-webkit-scrollbar-thumb:active {
1877
- background-color: rgba(144, 147, 153, .8)
1878
- }
1879
-
1880
- .forward-message-expanded::-webkit-scrollbar {
1881
- width: 6px
1882
- }
1883
-
1884
- .forward-message-expanded::-webkit-scrollbar-track {
1885
- background: 0 0
1886
- }
1887
-
1888
- .forward-message-expanded::-webkit-scrollbar-thumb {
1889
- background-color: rgba(144, 147, 153, .3);
1890
- border-radius: 4px;
1891
- transition: background-color .3s
1892
- }
1893
-
1894
- .forward-message-expanded::-webkit-scrollbar-thumb:hover {
1895
- background-color: rgba(144, 147, 153, .5)
1896
- }
1897
-
1898
- .json-raw-content::-webkit-scrollbar {
1899
- width: 6px
1900
- }
1901
-
1902
- .json-raw-content::-webkit-scrollbar-track {
1903
- background: 0 0
1904
- }
1905
-
1906
- .json-raw-content::-webkit-scrollbar-thumb {
1907
- background-color: rgba(144, 147, 153, .3);
1908
- border-radius: 4px;
1909
- transition: background-color .3s
1910
- }
1911
-
1912
- .json-raw-content::-webkit-scrollbar-thumb:hover {
1913
- background-color: rgba(144, 147, 153, .5)
1914
- }
1915
-
1916
- @media (prefers-color-scheme:dark) {
1917
-
1918
- .bot-items::-webkit-scrollbar-track,
1919
- .channel-items::-webkit-scrollbar-track {
1920
- background: rgba(255, 255, 255, .05)
1921
- }
1922
-
1923
- .bot-items::-webkit-scrollbar-thumb,
1924
- .channel-items::-webkit-scrollbar-thumb,
1925
- .forward-message-expanded::-webkit-scrollbar-thumb,
1926
- .json-raw-content::-webkit-scrollbar-thumb,
1927
- .message-history::-webkit-scrollbar-thumb {
1928
- background-color: rgba(255, 255, 255, .3);
1929
- border-color: rgba(0, 0, 0, .1)
1930
- }
1931
-
1932
- .bot-items::-webkit-scrollbar-thumb:hover,
1933
- .channel-items::-webkit-scrollbar-thumb:hover,
1934
- .forward-message-expanded::-webkit-scrollbar-thumb:hover,
1935
- .json-raw-content::-webkit-scrollbar-thumb:hover,
1936
- .message-history::-webkit-scrollbar-thumb:hover {
1937
- background-color: rgba(255, 255, 255, .5)
1938
- }
1939
-
1940
- .bot-items::-webkit-scrollbar-thumb:active,
1941
- .channel-items::-webkit-scrollbar-thumb:active {
1942
- background-color: rgba(255, 255, 255, .7)
1943
- }
1944
- }
1945
-
1946
- .loading-more-indicator {
1947
- display: flex;
1948
- align-items: center;
1949
- justify-content: center;
1950
- padding: 12px;
1951
- color: #6c757d;
1952
- font-size: 14px;
1953
- }
1954
-
1955
- .loading-spinner {
1956
- width: 20px;
1957
- height: 20px;
1958
- border: 2px solid #f3f3f3;
1959
- border-top: 2px solid #2196f3;
1960
- border-radius: 50%;
1961
- animation: spin 1s linear infinite;
1962
- margin-right: 8px;
1963
- }
1964
-
1965
- @keyframes spin {
1966
- 0% {
1967
- transform: rotate(0deg);
1968
- }
1969
-
1970
- 100% {
1971
- transform: rotate(360deg);
1972
- }
1973
- }
1
+ .message-quote {
2
+ margin: 8px 0;
3
+ padding: 8px 12px;
4
+ background-color: rgba(190, 190, 190, 0.1);
5
+ border-left: 4px solid rgba(151, 152, 152, 0.45);
6
+ border-radius: 6px;
7
+ font-size: 0.9em;
8
+ position: relative;
9
+ }
10
+
11
+ .quote-indicator {
12
+ font-size: 0.75em;
13
+ color: #007bff;
14
+ font-weight: 600;
15
+ margin-bottom: 4px;
16
+ text-transform: uppercase;
17
+ }
18
+
19
+ .quote-header {
20
+ display: flex;
21
+ align-items: center;
22
+ margin-bottom: 4px;
23
+ gap: 6px;
24
+ }
25
+
26
+ .quote-avatar {
27
+ width: 20px;
28
+ height: 20px;
29
+ border-radius: 50%;
30
+ overflow: hidden;
31
+ flex-shrink: 0;
32
+ }
33
+
34
+ .quote-avatar img {
35
+ width: 100%;
36
+ height: 100%;
37
+ object-fit: cover;
38
+ }
39
+
40
+ .quote-avatar .avatar-placeholder {
41
+ width: 100%;
42
+ height: 100%;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ background-color: #6c757d;
47
+ color: #fff;
48
+ font-size: 10px;
49
+ font-weight: 700;
50
+ }
51
+
52
+ .quote-username {
53
+ font-weight: 600;
54
+ color: #007bff;
55
+ font-size: 0.85em;
56
+ }
57
+
58
+ .quote-time {
59
+ color: #6c757d;
60
+ font-size: 0.75em;
61
+ margin-left: auto;
62
+ }
63
+
64
+ .quote-content {
65
+ color: #7276b7;
66
+ line-height: 1.3;
67
+ word-wrap: break-word;
68
+ word-break: break-all;
69
+ overflow-wrap: anywhere;
70
+ hyphens: auto;
71
+ }
72
+
73
+ .quote-content .message-image {
74
+ max-width: min(200px, 50vw);
75
+ max-height: 100px;
76
+ }
77
+
78
+ .quote-content .message-image-container {
79
+ margin: 2px 0;
80
+ }
81
+
82
+ @media (prefers-color-scheme: dark) {
83
+ .message-quote {
84
+ background-color: rgba(255, 255, 255, 0.078);
85
+ border-left-color: #0d6efd;
86
+ }
87
+
88
+ .quote-content {
89
+ color: #adb5bd;
90
+ }
91
+
92
+ .quote-username {
93
+ color: #0d6efd;
94
+ }
95
+ }
96
+
97
+ .chat-container {
98
+ display: flex;
99
+ height: 100vh;
100
+ background: 0 0;
101
+ margin-left: 0;
102
+ width: 100%;
103
+ overflow: hidden;
104
+ color: inherit;
105
+ position: relative;
106
+ }
107
+
108
+ .bot-list,
109
+ .channel-list,
110
+ .message-area {
111
+ display: flex;
112
+ flex-direction: column;
113
+ background: 0 0;
114
+ border-right: 1px solid rgba(128, 128, 128, 0.2);
115
+ }
116
+
117
+ .bot-list {
118
+ width: 250px;
119
+ min-width: 250px;
120
+ max-width: 250px;
121
+ flex-shrink: 0;
122
+ }
123
+
124
+ .channel-list {
125
+ width: 300px;
126
+ min-width: 300px;
127
+ max-width: 300px;
128
+ flex-shrink: 0;
129
+ }
130
+
131
+ .message-area {
132
+ flex: 1;
133
+ border-right: none;
134
+ }
135
+
136
+ .panel-header {
137
+ padding: 16px;
138
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
139
+ background: 0 0;
140
+ display: flex;
141
+ align-items: center;
142
+ justify-content: space-between;
143
+ }
144
+
145
+ .panel-header h3 {
146
+ margin: 0;
147
+ font-size: 16px;
148
+ font-weight: 600;
149
+ color: currentColor;
150
+ }
151
+
152
+ .back-button {
153
+ display: none;
154
+ background: 0 0;
155
+ border: none;
156
+ color: currentColor;
157
+ font-size: 18px;
158
+ cursor: pointer;
159
+ padding: 4px 8px;
160
+ border-radius: 4px;
161
+ transition: background-color 0.2s;
162
+ }
163
+
164
+ .back-button:hover {
165
+ background: rgba(128, 128, 128, 0.1);
166
+ }
167
+
168
+ .bot-items,
169
+ .channel-items {
170
+ flex: 1;
171
+ overflow-y: auto;
172
+ overflow-x: hidden;
173
+ max-height: calc(100vh - 140px);
174
+ -webkit-overflow-scrolling: touch;
175
+ scrollbar-width: thin;
176
+ scrollbar-color: rgba(144, 147, 153, 0.4) rgba(0, 0, 0, 0.05);
177
+ scroll-behavior: smooth;
178
+ overscroll-behavior: contain;
179
+ padding-bottom: 8px;
180
+ }
181
+
182
+ .bot-item,
183
+ .channel-item {
184
+ display: flex;
185
+ align-items: center;
186
+ padding: 12px 16px;
187
+ cursor: pointer;
188
+ border-bottom: 1px solid rgba(128, 128, 128, 0.1);
189
+ transition: background-color 0.2s;
190
+ }
191
+
192
+ .bot-item:hover,
193
+ .channel-item:hover {
194
+ background: rgba(128, 128, 128, 0.1);
195
+ }
196
+
197
+ .bot-item.active,
198
+ .channel-item.active {
199
+ background: rgba(33, 150, 243, 0.1);
200
+ border-right: 3px solid #2196f3;
201
+ }
202
+
203
+ .bot-avatar {
204
+ width: 40px;
205
+ height: 40px;
206
+ margin-right: 12px;
207
+ border-radius: 50%;
208
+ overflow: hidden;
209
+ display: flex;
210
+ align-items: center;
211
+ justify-content: center;
212
+ background: #e0e0e0;
213
+ }
214
+
215
+ .bot-avatar img {
216
+ width: 100%;
217
+ height: 100%;
218
+ object-fit: cover;
219
+ }
220
+
221
+ .avatar-placeholder {
222
+ font-size: 16px;
223
+ font-weight: 700;
224
+ color: currentColor;
225
+ opacity: 0.7;
226
+ }
227
+
228
+ .bot-info {
229
+ flex: 1;
230
+ }
231
+
232
+ .bot-name {
233
+ font-weight: 500;
234
+ color: currentColor;
235
+ margin-bottom: 2px;
236
+ }
237
+
238
+ .bot-platform {
239
+ font-size: 12px;
240
+ color: currentColor;
241
+ opacity: 0.7;
242
+ }
243
+
244
+ .bot-status {
245
+ width: 8px;
246
+ height: 8px;
247
+ border-radius: 50%;
248
+ margin-left: 8px;
249
+ }
250
+
251
+ .bot-status.online {
252
+ background: #4caf50;
253
+ }
254
+
255
+ .bot-status.offline {
256
+ background: #f44336;
257
+ }
258
+
259
+ .channel-info {
260
+ flex: 1;
261
+ }
262
+
263
+ .channel-name {
264
+ font-weight: 500;
265
+ color: currentColor;
266
+ margin-bottom: 2px;
267
+ }
268
+
269
+ .channel-type {
270
+ font-size: 12px;
271
+ color: currentColor;
272
+ opacity: 0.7;
273
+ }
274
+
275
+ .channel-message-count {
276
+ background: #2196f3;
277
+ color: #fff;
278
+ font-size: 12px;
279
+ padding: 2px 6px;
280
+ border-radius: 10px;
281
+ min-width: 18px;
282
+ text-align: center;
283
+ position: relative;
284
+ transition: all 0.2s ease;
285
+ }
286
+
287
+ .channel-message-count.draggable-bubble {
288
+ cursor: grab;
289
+ user-select: none;
290
+ -webkit-user-select: none;
291
+ -moz-user-select: none;
292
+ -ms-user-select: none;
293
+ }
294
+
295
+ .channel-message-count.draggable-bubble:hover {
296
+ background: #1976d2;
297
+ transform: scale(1.1);
298
+ box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
299
+ }
300
+
301
+ .channel-message-count.draggable-bubble.dragging,
302
+ .channel-message-count.draggable-bubble:active {
303
+ cursor: grabbing;
304
+ background: #1565c0;
305
+ box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
306
+ }
307
+
308
+ .dragging-clone {
309
+ position: fixed;
310
+ z-index: 1000;
311
+ pointer-events: none;
312
+ transition: none;
313
+ box-sizing: border-box;
314
+ display: flex;
315
+ align-items: center;
316
+ justify-content: center;
317
+ background: #2196f3;
318
+ color: #fff;
319
+ font-size: 12px;
320
+ padding: 2px 6px;
321
+ border-radius: 10px;
322
+ min-width: 18px;
323
+ text-align: center;
324
+ box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
325
+ }
326
+
327
+ .dragging-clone.will-delete {
328
+ background: #f44336 !important;
329
+ animation: shake 0.3s ease-in-out infinite;
330
+ }
331
+
332
+ @keyframes pulseThreshold {
333
+ 0%,
334
+ 100% {
335
+ opacity: 0.4;
336
+ transform: scale(0.9);
337
+ border-color: rgba(244, 67, 54, 0.6);
338
+ box-shadow: 0 0 15px rgba(244, 67, 54, 0.2);
339
+ }
340
+
341
+ 50% {
342
+ opacity: 0.8;
343
+ transform: scale(1.1);
344
+ border-color: #f44336;
345
+ box-shadow: 0 0 25px rgba(244, 67, 54, 0.4);
346
+ }
347
+ }
348
+
349
+ @keyframes menuSlideIn {
350
+ 0% {
351
+ transform: translateY(8px);
352
+ opacity: 0;
353
+ }
354
+
355
+ 100% {
356
+ transform: translateY(0);
357
+ opacity: 1;
358
+ }
359
+ }
360
+
361
+ .message-content {
362
+ display: flex;
363
+ flex-direction: column;
364
+ height: calc(100vh - 60px);
365
+ overflow: hidden;
366
+ position: relative;
367
+ }
368
+
369
+ .message-history {
370
+ flex: 1;
371
+ overflow-y: auto;
372
+ padding: 16px 16px 8px 16px;
373
+ max-height: calc(100vh - 200px);
374
+ }
375
+
376
+ .message-item {
377
+ display: flex;
378
+ margin-bottom: 16px;
379
+ padding: 8px;
380
+ border-radius: 8px;
381
+ transition: background-color 0.3s ease;
382
+ }
383
+
384
+ .message-item:hover {
385
+ background-color: rgba(128, 128, 128, 0.1);
386
+ }
387
+
388
+ .message-item.new-message {
389
+ background-color: rgba(76, 175, 80, 0.2);
390
+ animation: highlight 2s ease-out;
391
+ }
392
+
393
+ .message-item.bot-message {
394
+ flex-direction: row-reverse;
395
+ justify-content: flex-start;
396
+ }
397
+
398
+ .message-item.bot-message .message-avatar {
399
+ margin-right: 0;
400
+ margin-left: 12px;
401
+ }
402
+
403
+ .message-item.bot-message .message-content-wrapper {
404
+ display: flex;
405
+ flex-direction: column;
406
+ align-items: flex-end;
407
+ }
408
+
409
+ .message-item.bot-message .message-header {
410
+ display: flex;
411
+ align-items: center;
412
+ justify-content: flex-end;
413
+ margin-bottom: 4px;
414
+ }
415
+
416
+ .message-item.bot-message .message-username {
417
+ margin-right: 0;
418
+ margin-left: 8px;
419
+ order: 2;
420
+ }
421
+
422
+ .message-item.bot-message .message-time {
423
+ order: 1;
424
+ }
425
+
426
+ .message-item.bot-message .message-text {
427
+ background-color: rgba(33, 150, 243, 0.1);
428
+ padding: 8px 12px;
429
+ border-radius: 12px;
430
+ border-bottom-right-radius: 4px;
431
+ display: inline-block;
432
+ max-width: 80%;
433
+ text-align: left;
434
+ word-wrap: break-word;
435
+ word-break: break-all;
436
+ overflow-wrap: anywhere;
437
+ }
438
+
439
+ @keyframes highlight {
440
+ 0% {
441
+ background-color: rgba(76, 175, 80, 0.3);
442
+ }
443
+
444
+ 100% {
445
+ background-color: transparent;
446
+ }
447
+ }
448
+
449
+ .message-avatar {
450
+ width: 32px;
451
+ height: 32px;
452
+ margin-right: 12px;
453
+ border-radius: 50%;
454
+ overflow: hidden;
455
+ display: flex;
456
+ align-items: center;
457
+ justify-content: center;
458
+ background: #e0e0e0;
459
+ flex-shrink: 0;
460
+ }
461
+
462
+ .message-avatar img {
463
+ width: 100%;
464
+ height: 100%;
465
+ object-fit: cover;
466
+ }
467
+
468
+ .message-avatar .avatar-placeholder {
469
+ font-size: 12px;
470
+ font-weight: 700;
471
+ color: currentColor;
472
+ opacity: 0.7;
473
+ }
474
+
475
+ .message-content-wrapper {
476
+ flex: 1;
477
+ }
478
+
479
+ .message-header {
480
+ display: flex;
481
+ align-items: center;
482
+ margin-bottom: 4px;
483
+ }
484
+
485
+ .message-username {
486
+ font-weight: 500;
487
+ color: currentColor;
488
+ margin-right: 8px;
489
+ }
490
+
491
+ .message-time {
492
+ font-size: 12px;
493
+ color: currentColor;
494
+ opacity: 0.5;
495
+ }
496
+
497
+ .message-text {
498
+ color: currentColor;
499
+ line-height: 1.4;
500
+ word-wrap: break-word;
501
+ word-break: break-all;
502
+ white-space: pre-wrap;
503
+ max-width: 100%;
504
+ overflow-wrap: anywhere;
505
+ hyphens: auto;
506
+ }
507
+
508
+ .message-item:not(.bot-message) .message-text {
509
+ background-color: rgba(128, 128, 128, 0.1);
510
+ padding: 8px 12px;
511
+ border-radius: 12px;
512
+ border-bottom-left-radius: 4px;
513
+ display: inline-block;
514
+ max-width: 80%;
515
+ word-wrap: break-word;
516
+ word-break: break-all;
517
+ overflow-wrap: anywhere;
518
+ }
519
+
520
+ .message-input {
521
+ display: flex;
522
+ flex-direction: column;
523
+ padding: 12px 16px 16px 16px;
524
+ border-top: 1px solid rgba(128, 128, 128, 0.2);
525
+ background: 0 0;
526
+ flex-shrink: 0;
527
+ position: sticky;
528
+ bottom: 0;
529
+ margin-top: -10px;
530
+ }
531
+
532
+ .input-row {
533
+ display: flex;
534
+ gap: 8px;
535
+ align-items: center;
536
+ }
537
+
538
+ .floating-scroll-button {
539
+ position: absolute;
540
+ right: 24px;
541
+ bottom: 18%;
542
+ width: 48px;
543
+ height: 48px;
544
+ background: #2196f3;
545
+ border-radius: 50%;
546
+ display: flex;
547
+ align-items: center;
548
+ justify-content: center;
549
+ cursor: pointer;
550
+ box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
551
+ color: #fff;
552
+ transition: all 0.3s ease;
553
+ z-index: 100;
554
+ border: 2px solid rgba(255, 255, 255, 0.2);
555
+ }
556
+
557
+ .floating-scroll-button:hover {
558
+ background: #1976d2;
559
+ transform: scale(1.1);
560
+ box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
561
+ }
562
+
563
+ .floating-scroll-button:active {
564
+ transform: scale(0.95);
565
+ }
566
+
567
+ .input-row input {
568
+ flex: 1;
569
+ min-width: 0;
570
+ padding: 8px 12px;
571
+ border: 1px solid rgba(128, 128, 128, 0.3);
572
+ border-radius: 4px;
573
+ outline: 0;
574
+ background: 0 0;
575
+ color: currentColor;
576
+ }
577
+
578
+ .input-row input:focus {
579
+ border-color: #2196f3;
580
+ box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
581
+ }
582
+
583
+ .input-row button {
584
+ padding: 8px 16px;
585
+ background: #2196f3;
586
+ color: #fff;
587
+ border: none;
588
+ border-radius: 4px;
589
+ cursor: pointer;
590
+ transition: background-color 0.2s;
591
+ }
592
+
593
+ .input-row button:hover:not(:disabled) {
594
+ background: #1976d2;
595
+ }
596
+
597
+ .input-row button:disabled {
598
+ background: rgba(128, 128, 128, 0.3);
599
+ cursor: not-allowed;
600
+ }
601
+
602
+ .input-row button.is-sending {
603
+ background: #ffc107 !important;
604
+ color: #333 !important;
605
+ cursor: default !important;
606
+ }
607
+
608
+ .empty-state {
609
+ display: flex;
610
+ align-items: center;
611
+ justify-content: center;
612
+ height: 100%;
613
+ color: currentColor;
614
+ opacity: 0.5;
615
+ font-size: 14px;
616
+ }
617
+
618
+ .message-image-container {
619
+ margin: 8px 0;
620
+ max-width: 100%;
621
+ display: block;
622
+ }
623
+
624
+ .message-image {
625
+ border-radius: 8px;
626
+ object-fit: contain;
627
+ display: block;
628
+ cursor: pointer;
629
+ transition: transform 0.2s ease;
630
+ max-width: min(400px, 66.67vw);
631
+ max-height: 200px;
632
+ width: auto;
633
+ height: auto;
634
+ /* 确保GIF动画正常播放 */
635
+ image-rendering: auto;
636
+ -webkit-image-rendering: auto;
637
+ -moz-image-rendering: auto;
638
+ -o-image-rendering: auto;
639
+ }
640
+
641
+ .message-image:hover {
642
+ transform: scale(1.02);
643
+ }
644
+
645
+ /* 专门针对GIF图片的样式 */
646
+ .message-image[src*=".gif"],
647
+ .message-image[src*="image/gif"] {
648
+ /* 确保GIF动画不被优化掉 */
649
+ image-rendering: auto !important;
650
+ -webkit-image-rendering: auto !important;
651
+ animation-play-state: running !important;
652
+ }
653
+
654
+ .message-image-loading {
655
+ display: inline-block;
656
+ padding: 8px 12px;
657
+ background: rgba(128, 128, 128, 0.1);
658
+ border-radius: 4px;
659
+ color: currentColor;
660
+ opacity: 0.7;
661
+ font-size: 12px;
662
+ }
663
+
664
+ .message-image-error {
665
+ display: inline-block;
666
+ padding: 8px 12px;
667
+ background: rgba(244, 67, 54, 0.1);
668
+ border: 1px solid rgba(244, 67, 54, 0.3);
669
+ border-radius: 4px;
670
+ color: #f44336;
671
+ font-size: 12px;
672
+ max-width: 300px;
673
+ word-break: break-word;
674
+ }
675
+
676
+ .message-text-content {
677
+ display: inline;
678
+ word-wrap: break-word;
679
+ word-break: break-all;
680
+ overflow-wrap: anywhere;
681
+ hyphens: auto;
682
+ }
683
+
684
+ .message-paragraph {
685
+ display: block;
686
+ margin-bottom: 4px;
687
+ }
688
+
689
+ .message-paragraph:last-child {
690
+ margin-bottom: 0;
691
+ }
692
+
693
+ .forward-message-container {
694
+ border: 1px solid #fff;
695
+ border-radius: 8px;
696
+ margin: 4px 0;
697
+ overflow: hidden;
698
+ background: #f9f9f900;
699
+ }
700
+
701
+ .forward-message-preview {
702
+ padding: 12px;
703
+ cursor: pointer;
704
+ transition: background-color 0.2s;
705
+ }
706
+
707
+ .forward-message-preview:hover {
708
+ background: #f0f0f0;
709
+ }
710
+
711
+ .forward-message-title {
712
+ font-weight: 600;
713
+ color: #333;
714
+ margin-bottom: 8px;
715
+ font-size: 14px;
716
+ }
717
+
718
+ .forward-message-preview-item {
719
+ color: #666;
720
+ font-size: 13px;
721
+ margin: 2px 0;
722
+ line-height: 1.4;
723
+ word-wrap: break-word;
724
+ word-break: break-all;
725
+ overflow-wrap: anywhere;
726
+ }
727
+
728
+ .forward-message-footer {
729
+ display: flex;
730
+ justify-content: space-between;
731
+ align-items: center;
732
+ margin-top: 8px;
733
+ padding-top: 8px;
734
+ border-top: 1px solid #e8e8e8;
735
+ }
736
+
737
+ .forward-message-count {
738
+ color: #2196f3;
739
+ font-size: 12px;
740
+ }
741
+
742
+ .forward-message-toggle {
743
+ color: #666;
744
+ font-size: 12px;
745
+ }
746
+
747
+ .forward-message-expanded {
748
+ border-top: 1px solid #e0e0e0;
749
+ background: #fff;
750
+ max-height: 400px;
751
+ overflow-y: auto;
752
+ }
753
+
754
+ .forwarded-message-item {
755
+ padding: 12px;
756
+ border-bottom: 1px solid #f0f0f0;
757
+ }
758
+
759
+ .forwarded-message-item:last-child {
760
+ border-bottom: none;
761
+ }
762
+
763
+ .forwarded-message-header {
764
+ display: flex;
765
+ align-items: center;
766
+ margin-bottom: 6px;
767
+ }
768
+
769
+ .forwarded-message-nickname {
770
+ font-weight: 600;
771
+ color: #333;
772
+ font-size: 13px;
773
+ }
774
+
775
+ .forwarded-message-userid {
776
+ color: #999;
777
+ font-size: 11px;
778
+ margin-left: 6px;
779
+ }
780
+
781
+ .forwarded-message-content {
782
+ color: #555;
783
+ font-size: 13px;
784
+ line-height: 1.4;
785
+ word-wrap: break-word;
786
+ word-break: break-all;
787
+ overflow-wrap: anywhere;
788
+ }
789
+
790
+ .message-at {
791
+ background: rgba(33, 150, 243, 0.1);
792
+ color: #2196f3;
793
+ padding: 2px 4px;
794
+ border-radius: 3px;
795
+ font-weight: 500;
796
+ cursor: pointer;
797
+ }
798
+
799
+ .message-unknown {
800
+ background: rgba(255, 152, 0, 0.1);
801
+ color: #ff9800;
802
+ padding: 2px 4px;
803
+ border-radius: 3px;
804
+ font-style: italic;
805
+ cursor: help;
806
+ }
807
+
808
+ .input-row input {
809
+ flex: 1;
810
+ min-width: 0;
811
+ padding: 8px 12px;
812
+ border: 1px solid rgba(128, 128, 128, 0.3);
813
+ border-radius: 4px;
814
+ outline: 0;
815
+ background: 0 0;
816
+ color: currentColor;
817
+ }
818
+
819
+ .input-row input:focus {
820
+ border-color: #2196f3;
821
+ box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
822
+ }
823
+
824
+ .input-row input::placeholder {
825
+ color: currentColor;
826
+ opacity: 0.5;
827
+ }
828
+
829
+ .input-row button {
830
+ padding: 8px 16px;
831
+ background: #2196f3;
832
+ color: #fff;
833
+ border: none;
834
+ border-radius: 4px;
835
+ cursor: pointer;
836
+ transition: background-color 0.2s;
837
+ flex-shrink: 0;
838
+ white-space: nowrap;
839
+ }
840
+
841
+ .input-row button:hover:not(:disabled) {
842
+ background: #1976d2;
843
+ }
844
+
845
+ .input-row button:disabled {
846
+ background: rgba(128, 128, 128, 0.3);
847
+ cursor: not-allowed;
848
+ }
849
+
850
+ .input-row button.is-sending {
851
+ background: #ffc107 !important;
852
+ color: #333 !important;
853
+ cursor: default !important;
854
+ }
855
+
856
+ .message-input .input-row button.is-sending {
857
+ background: #ffc107 !important;
858
+ color: #333 !important;
859
+ cursor: default !important;
860
+ border-color: #ffc107 !important;
861
+ }
862
+
863
+ .empty-state {
864
+ display: flex;
865
+ align-items: center;
866
+ justify-content: center;
867
+ height: 100%;
868
+ color: currentColor;
869
+ opacity: 0.5;
870
+ font-size: 14px;
871
+ }
872
+
873
+ .empty-state {
874
+ display: flex;
875
+ align-items: center;
876
+ justify-content: center;
877
+ height: 100%;
878
+ color: currentColor;
879
+ opacity: 0.5;
880
+ font-size: 14px;
881
+ }
882
+
883
+ .message-text-content {
884
+ display: inline;
885
+ word-wrap: break-word;
886
+ word-break: break-all;
887
+ overflow-wrap: anywhere;
888
+ hyphens: auto;
889
+ }
890
+
891
+ .message-image-container {
892
+ display: block;
893
+ margin: 4px 0;
894
+ }
895
+
896
+ .message-image {
897
+ border-radius: 8px;
898
+ margin: 4px 0;
899
+ display: block;
900
+ cursor: pointer;
901
+ transition: transform 0.2s ease;
902
+ object-fit: contain;
903
+ background: rgba(128, 128, 128, 0.1);
904
+ }
905
+
906
+ .message-image:hover {
907
+ transform: scale(1.02);
908
+ }
909
+
910
+ .message-image-loading {
911
+ height: 60px;
912
+ width: 200px;
913
+ border-radius: 8px;
914
+ margin: 4px 0;
915
+ display: flex;
916
+ align-items: center;
917
+ justify-content: center;
918
+ background: rgba(128, 128, 128, 0.1);
919
+ color: currentColor;
920
+ opacity: 0.7;
921
+ font-size: 14px;
922
+ border: 1px dashed rgba(128, 128, 128, 0.3);
923
+ }
924
+
925
+ .message-image-error {
926
+ min-height: 60px;
927
+ width: 200px;
928
+ border-radius: 8px;
929
+ margin: 4px 0;
930
+ display: flex;
931
+ flex-direction: column;
932
+ align-items: center;
933
+ justify-content: center;
934
+ background: rgba(128, 128, 128, 0.1);
935
+ color: currentColor;
936
+ opacity: 0.7;
937
+ font-size: 14px;
938
+ border: 1px dashed rgba(128, 128, 128, 0.3);
939
+ padding: 8px;
940
+ text-align: center;
941
+ }
942
+
943
+ .message-at {
944
+ background: rgba(33, 150, 243, 0.1);
945
+ color: #2196f3;
946
+ padding: 2px 6px;
947
+ border-radius: 4px;
948
+ font-weight: 500;
949
+ cursor: pointer;
950
+ display: inline-block;
951
+ margin: 0 2px;
952
+ }
953
+
954
+ .message-at:hover {
955
+ background: rgba(33, 150, 243, 0.2);
956
+ }
957
+
958
+ .message-unknown {
959
+ background: rgba(255, 152, 0, 0.1);
960
+ color: #ff9800;
961
+ padding: 2px 6px;
962
+ border-radius: 4px;
963
+ font-size: 12px;
964
+ display: inline-block;
965
+ margin: 0 2px;
966
+ cursor: help;
967
+ }
968
+
969
+ @keyframes pulse {
970
+ 0%,
971
+ 100% {
972
+ transform: translate(-50%, -50%) scale(1);
973
+ }
974
+
975
+ 50% {
976
+ transform: translate(-50%, -50%) scale(1.1);
977
+ }
978
+ }
979
+
980
+ .channel-message-count.will-delete {
981
+ background: #f44336 !important;
982
+ animation: shake 0.3s ease-in-out infinite;
983
+ }
984
+
985
+ @keyframes shake {
986
+ 0%,
987
+ 100% {
988
+ transform: translateX(0);
989
+ }
990
+
991
+ 25% {
992
+ transform: translateX(-2px);
993
+ }
994
+
995
+ 75% {
996
+ transform: translateX(2px);
997
+ }
998
+ }
999
+
1000
+ body.dragging-bubble-global {
1001
+ user-select: none;
1002
+ -webkit-user-select: none;
1003
+ -moz-user-select: none;
1004
+ -ms-user-select: none;
1005
+ cursor: grabbing;
1006
+ }
1007
+
1008
+ .drag-threshold-circle {
1009
+ position: fixed;
1010
+ pointer-events: none;
1011
+ border: 3px dashed rgba(244, 67, 54, 0.8);
1012
+ border-radius: 50%;
1013
+ z-index: 999;
1014
+ background: rgba(244, 67, 54, 0.1);
1015
+ box-shadow: 0 0 20px rgba(244, 67, 54, 0.3);
1016
+ animation: pulseThreshold 1.5s ease-in-out infinite;
1017
+ }
1018
+
1019
+ .context-menu {
1020
+ position: fixed;
1021
+ background: rgba(255, 255, 255, 0.98);
1022
+ border: none;
1023
+ border-radius: 16px;
1024
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
1025
+ backdrop-filter: blur(20px);
1026
+ -webkit-backdrop-filter: blur(20px);
1027
+ overflow: hidden;
1028
+ z-index: 10000;
1029
+ min-width: 180px;
1030
+ }
1031
+
1032
+ .context-menu-item {
1033
+ display: flex;
1034
+ align-items: center;
1035
+ gap: 12px;
1036
+ padding: 14px 18px;
1037
+ background: 0 0;
1038
+ border: none;
1039
+ color: #333;
1040
+ font-size: 14px;
1041
+ font-weight: 500;
1042
+ cursor: pointer;
1043
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1044
+ width: 100%;
1045
+ text-align: left;
1046
+ position: relative;
1047
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
1048
+ min-width: 140px;
1049
+ }
1050
+
1051
+ .context-menu-item:last-child {
1052
+ border-bottom: none;
1053
+ }
1054
+
1055
+ .context-menu-item::before {
1056
+ content: "";
1057
+ position: absolute;
1058
+ left: 0;
1059
+ top: 0;
1060
+ bottom: 0;
1061
+ width: 3px;
1062
+ background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
1063
+ transform: scaleY(0);
1064
+ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1065
+ }
1066
+
1067
+ .context-menu-item:hover {
1068
+ background: linear-gradient(
1069
+ 90deg,
1070
+ rgba(102, 126, 234, 0.08) 0,
1071
+ rgba(118, 75, 162, 0.08) 100%
1072
+ );
1073
+ color: #667eea;
1074
+ transform: translateX(4px);
1075
+ }
1076
+
1077
+ .context-menu-item:hover::before {
1078
+ transform: scaleY(1);
1079
+ }
1080
+
1081
+ .context-menu-item.danger {
1082
+ color: #d32f2f;
1083
+ }
1084
+
1085
+ .context-menu-item.danger:hover {
1086
+ background: linear-gradient(
1087
+ 90deg,
1088
+ rgba(244, 67, 54, 0.08) 0,
1089
+ rgba(211, 47, 47, 0.08) 100%
1090
+ );
1091
+ color: #d32f2f;
1092
+ }
1093
+
1094
+ .bot-item.pinned,
1095
+ .channel-item.pinned {
1096
+ background: rgba(255, 193, 7, 0.1);
1097
+ border-left: 3px solid #ffc107;
1098
+ }
1099
+
1100
+ .bot-item.pinned::before,
1101
+ .channel-item.pinned::before {
1102
+ content: "📌";
1103
+ position: absolute;
1104
+ left: 4px;
1105
+ top: 50%;
1106
+ transform: translateY(-50%);
1107
+ font-size: 12px;
1108
+ opacity: 0.7;
1109
+ }
1110
+
1111
+ .bot-item.pinned {
1112
+ position: relative;
1113
+ padding-left: 24px;
1114
+ }
1115
+
1116
+ .channel-item.pinned {
1117
+ position: relative;
1118
+ padding-left: 24px;
1119
+ }
1120
+
1121
+ @media (prefers-color-scheme: dark) {
1122
+ .context-menu {
1123
+ background: rgba(30, 30, 30, 0.98);
1124
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
1125
+ }
1126
+
1127
+ .context-menu-item {
1128
+ color: #fff;
1129
+ border-bottom-color: rgba(255, 255, 255, 0.1);
1130
+ }
1131
+
1132
+ .context-menu-item::before {
1133
+ background: linear-gradient(135deg, #4facfe 0, #00f2fe 100%);
1134
+ }
1135
+
1136
+ .context-menu-item:hover {
1137
+ background: linear-gradient(
1138
+ 90deg,
1139
+ rgba(79, 172, 254, 0.12) 0,
1140
+ rgba(0, 242, 254, 0.12) 100%
1141
+ );
1142
+ color: #4facfe;
1143
+ }
1144
+
1145
+ .context-menu-item.danger:hover {
1146
+ background: linear-gradient(
1147
+ 90deg,
1148
+ rgba(244, 67, 54, 0.12) 0,
1149
+ rgba(255, 138, 128, 0.12) 100%
1150
+ );
1151
+ color: #ff8a80;
1152
+ }
1153
+
1154
+ .bot-item.pinned,
1155
+ .channel-item.pinned {
1156
+ background: rgba(255, 193, 7, 0.15);
1157
+ }
1158
+ }
1159
+
1160
+ .message-share-card {
1161
+ display: inline-block;
1162
+ width: 75px;
1163
+ margin: 8px 0;
1164
+ border: 1px solid rgba(128, 128, 128, 0.2);
1165
+ border-radius: 12px;
1166
+ background: rgba(255, 255, 255, 0.05);
1167
+ transition: all 0.3s ease;
1168
+ cursor: pointer;
1169
+ backdrop-filter: blur(8px);
1170
+ -webkit-backdrop-filter: blur(8px);
1171
+ }
1172
+
1173
+ .message-share-card:hover {
1174
+ transform: translateY(-2px);
1175
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
1176
+ border-color: rgba(33, 150, 243, 0.3);
1177
+ }
1178
+
1179
+ .share-card-preview {
1180
+ width: 100%;
1181
+ position: relative;
1182
+ display: flex;
1183
+ align-items: center;
1184
+ justify-content: center;
1185
+ padding: 4px;
1186
+ border-radius: 12px 12px 0 0;
1187
+ }
1188
+
1189
+ .share-card-image {
1190
+ max-width: calc(100% - 8px);
1191
+ width: auto;
1192
+ height: auto;
1193
+ object-fit: contain;
1194
+ transition: transform 0.3s ease;
1195
+ display: block;
1196
+ border-radius: 4px;
1197
+ }
1198
+
1199
+ .message-share-card:hover .share-card-image {
1200
+ transform: scale(1.05);
1201
+ }
1202
+
1203
+ .share-card-content {
1204
+ padding: 8px;
1205
+ }
1206
+
1207
+ .share-card-header {
1208
+ display: flex;
1209
+ align-items: center;
1210
+ margin-bottom: 12px;
1211
+ gap: 12px;
1212
+ }
1213
+
1214
+ .share-card-icon {
1215
+ width: 32px;
1216
+ height: 32px;
1217
+ border-radius: 8px;
1218
+ object-fit: cover;
1219
+ flex-shrink: 0;
1220
+ }
1221
+
1222
+ .share-card-app-info {
1223
+ flex: 1;
1224
+ min-width: 0;
1225
+ }
1226
+
1227
+ .share-card-app-name {
1228
+ font-size: 12px;
1229
+ color: currentColor;
1230
+ opacity: 0.7;
1231
+ margin-bottom: 2px;
1232
+ font-weight: 500;
1233
+ }
1234
+
1235
+ .share-card-title {
1236
+ font-size: 10px;
1237
+ font-weight: 600;
1238
+ color: currentColor;
1239
+ line-height: 1.2;
1240
+ word-wrap: break-word;
1241
+ display: -webkit-box;
1242
+ -webkit-box-orient: vertical;
1243
+ overflow: hidden;
1244
+ }
1245
+
1246
+ .share-card-desc {
1247
+ font-size: 14px;
1248
+ color: currentColor;
1249
+ opacity: 0.8;
1250
+ line-height: 1.4;
1251
+ margin-bottom: 12px;
1252
+ display: -webkit-box;
1253
+ -webkit-box-orient: vertical;
1254
+ overflow: hidden;
1255
+ word-wrap: break-word;
1256
+ }
1257
+
1258
+ .share-card-link-hint {
1259
+ font-size: 12px;
1260
+ color: #2196f3;
1261
+ font-weight: 500;
1262
+ display: flex;
1263
+ align-items: center;
1264
+ gap: 4px;
1265
+ }
1266
+
1267
+ .share-card-link-hint::after {
1268
+ content: "→";
1269
+ transition: transform 0.2s ease;
1270
+ }
1271
+
1272
+ .message-share-card:hover .share-card-link-hint::after {
1273
+ transform: translateX(2px);
1274
+ }
1275
+
1276
+ .message-json-error,
1277
+ .message-json-raw {
1278
+ display: inline-block;
1279
+ margin: 8px 0;
1280
+ max-width: 400px;
1281
+ }
1282
+
1283
+ .json-error-text {
1284
+ color: #f44336;
1285
+ font-size: 14px;
1286
+ font-weight: 500;
1287
+ }
1288
+
1289
+ .json-label {
1290
+ color: currentColor;
1291
+ opacity: 0.7;
1292
+ font-size: 12px;
1293
+ font-weight: 500;
1294
+ margin-bottom: 8px;
1295
+ }
1296
+
1297
+ .json-raw-data {
1298
+ margin-top: 8px;
1299
+ }
1300
+
1301
+ .json-raw-data summary {
1302
+ cursor: pointer;
1303
+ font-size: 12px;
1304
+ color: #2196f3;
1305
+ font-weight: 500;
1306
+ padding: 4px 8px;
1307
+ border-radius: 4px;
1308
+ background: rgba(33, 150, 243, 0.1);
1309
+ display: inline-block;
1310
+ transition: background-color 0.2s ease;
1311
+ }
1312
+
1313
+ .json-raw-data summary:hover {
1314
+ background: rgba(33, 150, 243, 0.2);
1315
+ }
1316
+
1317
+ .json-raw-content {
1318
+ margin-top: 8px;
1319
+ padding: 12px;
1320
+ background: rgba(128, 128, 128, 0.1);
1321
+ border-radius: 8px;
1322
+ font-family: "Courier New", monospace;
1323
+ font-size: 12px;
1324
+ color: currentColor;
1325
+ opacity: 0.8;
1326
+ white-space: pre-wrap;
1327
+ word-wrap: break-word;
1328
+ word-break: break-all;
1329
+ overflow-wrap: anywhere;
1330
+ max-height: 200px;
1331
+ overflow-y: auto;
1332
+ border: 1px solid rgba(128, 128, 128, 0.2);
1333
+ }
1334
+
1335
+ @media (prefers-color-scheme: dark) {
1336
+ .message-share-card {
1337
+ background: rgba(255, 255, 255, 0.08);
1338
+ border-color: rgba(255, 255, 255, 0.15);
1339
+ }
1340
+
1341
+ .message-share-card:hover {
1342
+ border-color: rgba(33, 150, 243, 0.5);
1343
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
1344
+ }
1345
+
1346
+ .json-raw-content {
1347
+ background: rgba(255, 255, 255, 0.05);
1348
+ border-color: rgba(255, 255, 255, 0.1);
1349
+ }
1350
+ }
1351
+
1352
+ @media (max-width: 768px) {
1353
+ .chat-container {
1354
+ position: relative;
1355
+ height: 100vh;
1356
+ height: 100dvh;
1357
+ }
1358
+
1359
+ .bot-list,
1360
+ .channel-list,
1361
+ .message-area {
1362
+ position: absolute;
1363
+ top: 0;
1364
+ left: 0;
1365
+ width: 100%;
1366
+ height: 100%;
1367
+ transition: transform 0.3s ease;
1368
+ z-index: 1;
1369
+ }
1370
+
1371
+ .bot-list {
1372
+ transform: translateX(0);
1373
+ z-index: 3;
1374
+ }
1375
+
1376
+ .channel-list {
1377
+ transform: translateX(100%);
1378
+ z-index: 2;
1379
+ }
1380
+
1381
+ .message-area {
1382
+ transform: translateX(200%);
1383
+ z-index: 1;
1384
+ }
1385
+
1386
+ .chat-container.show-channels .bot-list {
1387
+ transform: translateX(-100%);
1388
+ }
1389
+
1390
+ .chat-container.show-channels .channel-list {
1391
+ transform: translateX(0);
1392
+ z-index: 3;
1393
+ }
1394
+
1395
+ .chat-container.show-channels .message-area {
1396
+ transform: translateX(100%);
1397
+ }
1398
+
1399
+ .chat-container.show-messages .bot-list {
1400
+ transform: translateX(-200%);
1401
+ }
1402
+
1403
+ .chat-container.show-messages .channel-list {
1404
+ transform: translateX(-100%);
1405
+ }
1406
+
1407
+ .chat-container.show-messages .message-area {
1408
+ transform: translateX(0);
1409
+ z-index: 3;
1410
+ }
1411
+
1412
+ .back-button {
1413
+ display: none !important;
1414
+ }
1415
+
1416
+ .panel-header {
1417
+ flex-direction: row-reverse;
1418
+ position: sticky;
1419
+ top: 0;
1420
+ z-index: 5;
1421
+ background: inherit;
1422
+ }
1423
+
1424
+ .panel-header h3 {
1425
+ text-align: right;
1426
+ }
1427
+
1428
+ .floating-scroll-button {
1429
+ right: 16px;
1430
+ bottom: calc(90px + env(safe-area-inset-bottom, 0px));
1431
+ width: 40px;
1432
+ height: 40px;
1433
+ transition: bottom 0.3s ease;
1434
+ }
1435
+
1436
+ .message-input {
1437
+ padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
1438
+ position: fixed;
1439
+ bottom: 20px;
1440
+ left: 0;
1441
+ right: 0;
1442
+ background: inherit;
1443
+ border-top: 1px solid rgba(128, 128, 128, 0.2);
1444
+ z-index: 10;
1445
+ min-height: calc(60px + env(safe-area-inset-bottom, 0px));
1446
+ transition: transform 0.3s ease;
1447
+ transform: translateZ(0);
1448
+ }
1449
+
1450
+ .input-row input {
1451
+ font-size: 16px;
1452
+ padding: 10px 12px;
1453
+ }
1454
+
1455
+ .input-row button {
1456
+ padding: 10px 16px;
1457
+ font-size: 16px;
1458
+ }
1459
+
1460
+ .message-history {
1461
+ padding: 12px;
1462
+ max-height: calc(100vh - 140px - env(safe-area-inset-bottom, 0px));
1463
+ max-height: calc(100dvh - 140px - env(safe-area-inset-bottom, 0px));
1464
+ padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
1465
+ overflow-y: auto;
1466
+ -webkit-overflow-scrolling: touch;
1467
+ transition: max-height 0.3s ease;
1468
+ }
1469
+
1470
+ .message-item {
1471
+ margin-bottom: 12px;
1472
+ padding: 6px;
1473
+ }
1474
+
1475
+ .message-text {
1476
+ max-width: 90% !important;
1477
+ }
1478
+
1479
+ .message-avatar {
1480
+ width: 28px;
1481
+ height: 28px;
1482
+ margin-right: 8px;
1483
+ }
1484
+
1485
+ .message-item.bot-message .message-avatar {
1486
+ margin-left: 8px;
1487
+ }
1488
+
1489
+ .message-image {
1490
+ max-width: min(280px, 66.67vw);
1491
+ max-height: 160px;
1492
+ }
1493
+
1494
+ .quote-content .message-image {
1495
+ max-width: min(150px, 50vw);
1496
+ max-height: 80px;
1497
+ }
1498
+
1499
+ .context-menu {
1500
+ min-width: 160px;
1501
+ backdrop-filter: blur(12px);
1502
+ -webkit-backdrop-filter: blur(12px);
1503
+ }
1504
+
1505
+ .context-menu-item {
1506
+ padding: 10px 12px;
1507
+ font-size: 13px;
1508
+ min-width: 100px;
1509
+ }
1510
+
1511
+ .bot-item,
1512
+ .channel-item {
1513
+ padding: 14px 16px;
1514
+ }
1515
+
1516
+ .bot-avatar {
1517
+ width: 36px;
1518
+ height: 36px;
1519
+ margin-right: 10px;
1520
+ }
1521
+
1522
+ .bot-name,
1523
+ .channel-name {
1524
+ font-size: 15px;
1525
+ }
1526
+
1527
+ .bot-platform,
1528
+ .channel-type {
1529
+ font-size: 13px;
1530
+ }
1531
+
1532
+ .bot-items,
1533
+ .channel-items {
1534
+ flex: 1;
1535
+ overflow-y: auto;
1536
+ overflow-x: hidden;
1537
+ max-height: calc(100vh - 140px);
1538
+ max-height: calc(100dvh - 140px);
1539
+ -webkit-overflow-scrolling: touch;
1540
+ scrollbar-width: thin;
1541
+ scrollbar-color: rgba(144, 147, 153, 0.4) rgba(0, 0, 0, 0.05);
1542
+ scroll-behavior: smooth;
1543
+ overscroll-behavior: contain;
1544
+ padding-bottom: 8px;
1545
+ }
1546
+ }
1547
+
1548
+ @media (min-width: 769px) and (max-width: 1024px) {
1549
+ .bot-list {
1550
+ width: 220px;
1551
+ min-width: 220px;
1552
+ max-width: 220px;
1553
+ }
1554
+
1555
+ .channel-list {
1556
+ width: 280px;
1557
+ min-width: 280px;
1558
+ max-width: 280px;
1559
+ }
1560
+
1561
+ .message-image {
1562
+ max-width: min(350px, 66.67vw);
1563
+ max-height: 180px;
1564
+ }
1565
+ }
1566
+
1567
+ .chat-container.swiping {
1568
+ overflow: hidden;
1569
+ }
1570
+
1571
+ .bot-list.swiping,
1572
+ .channel-list.swiping,
1573
+ .message-area.swiping {
1574
+ transition: none !important;
1575
+ }
1576
+
1577
+ .swipe-indicator {
1578
+ position: fixed;
1579
+ top: 50%;
1580
+ left: 20px;
1581
+ transform: translateY(-50%);
1582
+ background: rgba(33, 150, 243, 0.8);
1583
+ color: #fff;
1584
+ padding: 8px 12px;
1585
+ border-radius: 20px;
1586
+ font-size: 14px;
1587
+ z-index: 1000;
1588
+ opacity: 0;
1589
+ transition: opacity 0.2s ease;
1590
+ pointer-events: none;
1591
+ backdrop-filter: blur(8px);
1592
+ -webkit-backdrop-filter: blur(8px);
1593
+ }
1594
+
1595
+ .swipe-indicator.show {
1596
+ opacity: 1;
1597
+ }
1598
+
1599
+ .message-area .message-content {
1600
+ padding-bottom: 80px;
1601
+ }
1602
+
1603
+ .image-preview-container {
1604
+ display: flex;
1605
+ flex-wrap: wrap;
1606
+ gap: 8px;
1607
+ padding: 8px 0;
1608
+ margin-bottom: 8px;
1609
+ border-bottom: 1px solid rgba(128, 128, 128, 0.1);
1610
+ }
1611
+
1612
+ .image-preview-item {
1613
+ position: relative;
1614
+ width: 60px;
1615
+ height: 60px;
1616
+ border-radius: 8px;
1617
+ overflow: hidden;
1618
+ border: 2px solid rgba(33, 150, 243, 0.3);
1619
+ background: rgba(128, 128, 128, 0.1);
1620
+ }
1621
+
1622
+ .preview-image {
1623
+ width: 100%;
1624
+ height: 100%;
1625
+ object-fit: cover;
1626
+ display: block;
1627
+ }
1628
+
1629
+ .remove-image-btn {
1630
+ position: absolute;
1631
+ top: -6px;
1632
+ right: -6px;
1633
+ width: 20px;
1634
+ height: 20px;
1635
+ border-radius: 50%;
1636
+ background: #f44336;
1637
+ color: #fff;
1638
+ border: none;
1639
+ cursor: pointer;
1640
+ display: flex;
1641
+ align-items: center;
1642
+ justify-content: center;
1643
+ font-size: 12px;
1644
+ transition: all 0.2s ease;
1645
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
1646
+ }
1647
+
1648
+ .remove-image-btn:hover {
1649
+ background: #d32f2f;
1650
+ transform: scale(1.1);
1651
+ }
1652
+
1653
+ .input-actions {
1654
+ position: relative;
1655
+ margin-right: 8px;
1656
+ }
1657
+
1658
+ .add-button {
1659
+ width: 36px;
1660
+ height: 36px;
1661
+ border-radius: 12px;
1662
+ background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
1663
+ border: none;
1664
+ color: #fff;
1665
+ cursor: pointer;
1666
+ display: flex;
1667
+ align-items: center;
1668
+ justify-content: center;
1669
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1670
+ flex-shrink: 0;
1671
+ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
1672
+ position: relative;
1673
+ overflow: hidden;
1674
+ }
1675
+
1676
+ .add-button::before {
1677
+ content: "";
1678
+ position: absolute;
1679
+ top: 0;
1680
+ left: 0;
1681
+ right: 0;
1682
+ bottom: 0;
1683
+ background: linear-gradient(
1684
+ 135deg,
1685
+ rgba(255, 255, 255, 0.2) 0,
1686
+ rgba(255, 255, 255, 0.1) 100%
1687
+ );
1688
+ border-radius: 12px;
1689
+ opacity: 0;
1690
+ transition: opacity 0.3s ease;
1691
+ }
1692
+
1693
+ .add-button:hover {
1694
+ transform: translateY(-2px) scale(1.05);
1695
+ box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
1696
+ }
1697
+
1698
+ .add-button:hover::before {
1699
+ opacity: 1;
1700
+ }
1701
+
1702
+ .add-button.active {
1703
+ background: linear-gradient(135deg, #f093fb 0, #f5576c 100%);
1704
+ transform: translateY(-2px) scale(1.05) rotate(45deg);
1705
+ box-shadow: 0 4px 16px rgba(245, 87, 108, 0.4);
1706
+ }
1707
+
1708
+ .add-button:active {
1709
+ transform: translateY(0) scale(0.98);
1710
+ transition: all 0.1s ease;
1711
+ }
1712
+
1713
+ .action-menu {
1714
+ position: absolute;
1715
+ bottom: 100%;
1716
+ left: 0;
1717
+ margin-bottom: 12px;
1718
+ background: rgba(255, 255, 255, 0.98);
1719
+ border: none;
1720
+ border-radius: 16px;
1721
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
1722
+ backdrop-filter: blur(20px);
1723
+ -webkit-backdrop-filter: blur(20px);
1724
+ overflow: hidden;
1725
+ z-index: 1000;
1726
+ min-width: 140px;
1727
+ transform: translateY(8px);
1728
+ opacity: 0;
1729
+ animation: menuSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1730
+ }
1731
+
1732
+ .action-menu-item {
1733
+ display: flex;
1734
+ align-items: center;
1735
+ gap: 12px;
1736
+ padding: 14px 18px;
1737
+ background: 0 0;
1738
+ border: none;
1739
+ color: #333;
1740
+ font-size: 14px;
1741
+ font-weight: 500;
1742
+ cursor: pointer;
1743
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1744
+ width: 100%;
1745
+ text-align: left;
1746
+ position: relative;
1747
+ }
1748
+
1749
+ .action-menu-item::before {
1750
+ content: "";
1751
+ position: absolute;
1752
+ left: 0;
1753
+ top: 0;
1754
+ bottom: 0;
1755
+ width: 3px;
1756
+ background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
1757
+ transform: scaleY(0);
1758
+ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1759
+ }
1760
+
1761
+ .action-menu-item:hover {
1762
+ background: linear-gradient(
1763
+ 90deg,
1764
+ rgba(102, 126, 234, 0.08) 0,
1765
+ rgba(118, 75, 162, 0.08) 100%
1766
+ );
1767
+ color: #667eea;
1768
+ transform: translateX(4px);
1769
+ }
1770
+
1771
+ .action-menu-item:hover::before {
1772
+ transform: scaleY(1);
1773
+ }
1774
+
1775
+ .action-menu-item svg {
1776
+ flex-shrink: 0;
1777
+ }
1778
+
1779
+ @media (prefers-color-scheme: dark) {
1780
+ .action-menu {
1781
+ background: rgba(30, 30, 30, 0.98);
1782
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
1783
+ }
1784
+
1785
+ .action-menu-item {
1786
+ color: #fff;
1787
+ }
1788
+
1789
+ .action-menu-item::before {
1790
+ background: linear-gradient(135deg, #4facfe 0, #00f2fe 100%);
1791
+ }
1792
+
1793
+ .action-menu-item:hover {
1794
+ background: linear-gradient(
1795
+ 90deg,
1796
+ rgba(79, 172, 254, 0.12) 0,
1797
+ rgba(0, 242, 254, 0.12) 100%
1798
+ );
1799
+ color: #4facfe;
1800
+ }
1801
+
1802
+ .add-button {
1803
+ background: linear-gradient(135deg, #4facfe 0, #00f2fe 100%);
1804
+ box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
1805
+ }
1806
+
1807
+ .add-button:hover {
1808
+ box-shadow: 0 4px 16px rgba(79, 172, 254, 0.4);
1809
+ }
1810
+
1811
+ .add-button.active {
1812
+ background: linear-gradient(135deg, #fa709a 0, #fee140 100%);
1813
+ box-shadow: 0 4px 16px rgba(250, 112, 154, 0.4);
1814
+ }
1815
+
1816
+ .image-preview-item {
1817
+ border-color: rgba(100, 181, 246, 0.5);
1818
+ background: rgba(255, 255, 255, 0.05);
1819
+ }
1820
+ }
1821
+
1822
+ @media (max-width: 768px) {
1823
+ .image-preview-container {
1824
+ padding: 6px 0;
1825
+ margin-bottom: 6px;
1826
+ }
1827
+
1828
+ .image-preview-item {
1829
+ width: 50px;
1830
+ height: 50px;
1831
+ }
1832
+
1833
+ .add-button {
1834
+ width: 32px;
1835
+ height: 32px;
1836
+ border-radius: 10px;
1837
+ }
1838
+
1839
+ .action-menu {
1840
+ min-width: 100px;
1841
+ }
1842
+
1843
+ .action-menu-item {
1844
+ padding: 10px 12px;
1845
+ font-size: 13px;
1846
+ }
1847
+
1848
+ .remove-image-btn {
1849
+ width: 18px;
1850
+ height: 18px;
1851
+ top: -5px;
1852
+ right: -5px;
1853
+ }
1854
+ }
1855
+
1856
+ .message-history::-webkit-scrollbar {
1857
+ width: 6px;
1858
+ }
1859
+
1860
+ .message-history::-webkit-scrollbar-track {
1861
+ background: 0 0;
1862
+ }
1863
+
1864
+ .message-history::-webkit-scrollbar-thumb {
1865
+ background-color: rgba(144, 147, 153, 0.3);
1866
+ border-radius: 4px;
1867
+ transition: background-color 0.3s;
1868
+ }
1869
+
1870
+ .message-history::-webkit-scrollbar-thumb:hover {
1871
+ background-color: rgba(144, 147, 153, 0.5);
1872
+ }
1873
+
1874
+ .bot-items::-webkit-scrollbar,
1875
+ .channel-items::-webkit-scrollbar {
1876
+ width: 8px;
1877
+ }
1878
+
1879
+ .bot-items::-webkit-scrollbar-track,
1880
+ .channel-items::-webkit-scrollbar-track {
1881
+ background: rgba(0, 0, 0, 0.05);
1882
+ border-radius: 4px;
1883
+ }
1884
+
1885
+ .bot-items::-webkit-scrollbar-thumb,
1886
+ .channel-items::-webkit-scrollbar-thumb {
1887
+ background-color: rgba(144, 147, 153, 0.4);
1888
+ border-radius: 4px;
1889
+ transition: all 0.3s ease;
1890
+ border: 1px solid rgba(255, 255, 255, 0.1);
1891
+ background-clip: padding-box;
1892
+ }
1893
+
1894
+ .bot-items::-webkit-scrollbar-thumb:hover,
1895
+ .channel-items::-webkit-scrollbar-thumb:hover {
1896
+ background-color: rgba(144, 147, 153, 0.6);
1897
+ transform: scaleX(1.2);
1898
+ }
1899
+
1900
+ .bot-items::-webkit-scrollbar-thumb:active,
1901
+ .channel-items::-webkit-scrollbar-thumb:active {
1902
+ background-color: rgba(144, 147, 153, 0.8);
1903
+ }
1904
+
1905
+ .forward-message-expanded::-webkit-scrollbar {
1906
+ width: 6px;
1907
+ }
1908
+
1909
+ .forward-message-expanded::-webkit-scrollbar-track {
1910
+ background: 0 0;
1911
+ }
1912
+
1913
+ .forward-message-expanded::-webkit-scrollbar-thumb {
1914
+ background-color: rgba(144, 147, 153, 0.3);
1915
+ border-radius: 4px;
1916
+ transition: background-color 0.3s;
1917
+ }
1918
+
1919
+ .forward-message-expanded::-webkit-scrollbar-thumb:hover {
1920
+ background-color: rgba(144, 147, 153, 0.5);
1921
+ }
1922
+
1923
+ .json-raw-content::-webkit-scrollbar {
1924
+ width: 6px;
1925
+ }
1926
+
1927
+ .json-raw-content::-webkit-scrollbar-track {
1928
+ background: 0 0;
1929
+ }
1930
+
1931
+ .json-raw-content::-webkit-scrollbar-thumb {
1932
+ background-color: rgba(144, 147, 153, 0.3);
1933
+ border-radius: 4px;
1934
+ transition: background-color 0.3s;
1935
+ }
1936
+
1937
+ .json-raw-content::-webkit-scrollbar-thumb:hover {
1938
+ background-color: rgba(144, 147, 153, 0.5);
1939
+ }
1940
+
1941
+ @media (prefers-color-scheme: dark) {
1942
+ .bot-items::-webkit-scrollbar-track,
1943
+ .channel-items::-webkit-scrollbar-track {
1944
+ background: rgba(255, 255, 255, 0.05);
1945
+ }
1946
+
1947
+ .bot-items::-webkit-scrollbar-thumb,
1948
+ .channel-items::-webkit-scrollbar-thumb,
1949
+ .forward-message-expanded::-webkit-scrollbar-thumb,
1950
+ .json-raw-content::-webkit-scrollbar-thumb,
1951
+ .message-history::-webkit-scrollbar-thumb {
1952
+ background-color: rgba(255, 255, 255, 0.3);
1953
+ border-color: rgba(0, 0, 0, 0.1);
1954
+ }
1955
+
1956
+ .bot-items::-webkit-scrollbar-thumb:hover,
1957
+ .channel-items::-webkit-scrollbar-thumb:hover,
1958
+ .forward-message-expanded::-webkit-scrollbar-thumb:hover,
1959
+ .json-raw-content::-webkit-scrollbar-thumb:hover,
1960
+ .message-history::-webkit-scrollbar-thumb:hover {
1961
+ background-color: rgba(255, 255, 255, 0.5);
1962
+ }
1963
+
1964
+ .bot-items::-webkit-scrollbar-thumb:active,
1965
+ .channel-items::-webkit-scrollbar-thumb:active {
1966
+ background-color: rgba(255, 255, 255, 0.7);
1967
+ }
1968
+ }
1969
+
1970
+ .loading-more-indicator {
1971
+ display: flex;
1972
+ align-items: center;
1973
+ justify-content: center;
1974
+ padding: 12px;
1975
+ color: #6c757d;
1976
+ font-size: 14px;
1977
+ }
1978
+
1979
+ .loading-spinner {
1980
+ width: 20px;
1981
+ height: 20px;
1982
+ border: 2px solid #f3f3f3;
1983
+ border-top: 2px solid #2196f3;
1984
+ border-radius: 50%;
1985
+ animation: spin 1s linear infinite;
1986
+ margin-right: 8px;
1987
+ }
1988
+
1989
+ @keyframes spin {
1990
+ 0% {
1991
+ transform: rotate(0deg);
1992
+ }
1993
+
1994
+ 100% {
1995
+ transform: rotate(360deg);
1996
+ }
1997
+ }