@product7/feedback-sdk 1.3.2 → 1.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/feedback-sdk.js +2343 -3194
  2. package/dist/feedback-sdk.js.map +1 -1
  3. package/dist/feedback-sdk.min.js +1 -1
  4. package/dist/feedback-sdk.min.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/api/services/MessengerService.js +20 -0
  7. package/src/index.js +2 -3
  8. package/src/styles/base.js +27 -52
  9. package/src/styles/changelog.js +152 -269
  10. package/src/styles/components.js +489 -0
  11. package/src/styles/design-tokens.js +104 -0
  12. package/src/styles/feedback.js +59 -369
  13. package/src/styles/messenger-core.js +390 -0
  14. package/src/styles/messenger-features.js +347 -0
  15. package/src/styles/messenger-help.js +298 -0
  16. package/src/styles/messenger-themes.js +500 -0
  17. package/src/styles/messenger-views.js +618 -0
  18. package/src/styles/messenger.js +558 -0
  19. package/src/styles/styles.js +24 -2
  20. package/src/styles/surveys.js +354 -0
  21. package/src/widgets/BaseWidget.js +25 -58
  22. package/src/widgets/ButtonWidget.js +3 -18
  23. package/src/widgets/ChangelogWidget.js +7 -48
  24. package/src/widgets/InlineWidget.js +16 -13
  25. package/src/widgets/MessengerWidget.js +51 -54
  26. package/src/widgets/SurveyWidget.js +42 -146
  27. package/src/widgets/TabWidget.js +2 -22
  28. package/src/widgets/messenger/components/MessengerLauncher.js +10 -5
  29. package/src/widgets/messenger/components/MessengerPanel.js +5 -27
  30. package/src/widgets/messenger/components/NavigationTabs.js +5 -14
  31. package/src/widgets/messenger/views/ChangelogView.js +13 -14
  32. package/src/widgets/messenger/views/ChatView.js +43 -36
  33. package/src/widgets/messenger/views/ConversationsView.js +16 -21
  34. package/src/widgets/messenger/views/HelpView.js +10 -10
  35. package/src/widgets/messenger/views/HomeView.js +11 -16
  36. package/src/widgets/messenger/views/PreChatFormView.js +18 -30
  37. package/src/styles/messengerStyles.js +0 -2328
@@ -1,2328 +0,0 @@
1
- export const MESSENGER_STYLES = `
2
- /* ========================================
3
- Messenger Widget - Intercom-style Dark Theme
4
- ======================================== */
5
-
6
- .messenger-widget {
7
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;
8
- font-size: 14px;
9
- line-height: 1.5;
10
- -webkit-font-smoothing: antialiased;
11
- -moz-osx-font-smoothing: grayscale;
12
- }
13
-
14
- .messenger-widget *,
15
- .messenger-widget *::before,
16
- .messenger-widget *::after {
17
- box-sizing: border-box;
18
- }
19
-
20
- /* ========================================
21
- Launcher Button
22
- ======================================== */
23
-
24
- .messenger-launcher {
25
- position: fixed;
26
- z-index: 999999;
27
- }
28
-
29
- .messenger-launcher-bottom-right {
30
- bottom: 20px;
31
- right: 20px;
32
- }
33
-
34
- .messenger-launcher-bottom-left {
35
- bottom: 20px;
36
- left: 20px;
37
- }
38
-
39
- .messenger-launcher-btn {
40
- width: 60px;
41
- height: 60px;
42
- border-radius: 50%;
43
- border: none;
44
- background: #1c1c1e;
45
- color: white;
46
- cursor: pointer;
47
- display: flex;
48
- align-items: center;
49
- justify-content: center;
50
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
51
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
52
- position: relative;
53
- }
54
-
55
- .messenger-launcher-btn:hover {
56
- transform: scale(1.05);
57
- box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
58
- }
59
-
60
- .messenger-launcher-btn:active {
61
- transform: scale(0.95);
62
- }
63
-
64
- .messenger-launcher-icon {
65
- display: flex;
66
- align-items: center;
67
- justify-content: center;
68
- transition: opacity 0.2s ease, transform 0.2s ease;
69
- }
70
-
71
- .messenger-launcher-open .messenger-launcher-icon-chat {
72
- opacity: 0;
73
- transform: rotate(-90deg);
74
- }
75
-
76
- .messenger-launcher-open .messenger-launcher-icon-close {
77
- opacity: 1;
78
- transform: rotate(0deg);
79
- }
80
-
81
- .messenger-launcher-badge {
82
- position: absolute;
83
- top: -4px;
84
- right: -4px;
85
- min-width: 20px;
86
- height: 20px;
87
- background: #ef4444;
88
- color: white;
89
- font-size: 11px;
90
- font-weight: 600;
91
- border-radius: 10px;
92
- display: flex;
93
- align-items: center;
94
- justify-content: center;
95
- padding: 0 6px;
96
- border: 2px solid white;
97
- }
98
-
99
- /* ========================================
100
- Panel Container
101
- ======================================== */
102
-
103
- .messenger-panel {
104
- position: fixed;
105
- z-index: 999998;
106
- width: 400px;
107
- height: 680px;
108
- max-height: calc(100vh - 100px);
109
- display: none;
110
- opacity: 0;
111
- transform: translateY(20px) scale(0.95);
112
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
113
- }
114
-
115
- .messenger-panel.open {
116
- opacity: 1;
117
- transform: translateY(0) scale(1);
118
- }
119
-
120
- .messenger-panel-bottom-right {
121
- bottom: 90px;
122
- right: 20px;
123
- }
124
-
125
- .messenger-panel-bottom-left {
126
- bottom: 90px;
127
- left: 20px;
128
- }
129
-
130
- .messenger-panel-content {
131
- background: #1c1c1e;
132
- height: 100%;
133
- border-radius: 16px;
134
- overflow: hidden;
135
- display: flex;
136
- flex-direction: column;
137
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
138
- }
139
-
140
- /* Light theme */
141
- .messenger-panel.theme-light .messenger-panel-content {
142
- background: #ffffff;
143
- }
144
-
145
- /* ========================================
146
- Views Container
147
- ======================================== */
148
-
149
- .messenger-panel-views {
150
- flex: 1;
151
- overflow: hidden;
152
- display: flex;
153
- flex-direction: column;
154
- }
155
-
156
- .messenger-view {
157
- height: 100%;
158
- display: flex;
159
- flex-direction: column;
160
- overflow: hidden;
161
- }
162
-
163
- /* ========================================
164
- Common Components
165
- ======================================== */
166
-
167
- /* Close Button */
168
- .messenger-close-btn {
169
- background: none;
170
- border: none;
171
- padding: 8px;
172
- cursor: pointer;
173
- color: rgba(255, 255, 255, 0.6);
174
- border-radius: 8px;
175
- display: flex;
176
- align-items: center;
177
- justify-content: center;
178
- transition: all 0.2s ease;
179
- }
180
-
181
- .messenger-close-btn:hover {
182
- background: rgba(255, 255, 255, 0.1);
183
- color: white;
184
- }
185
-
186
- .theme-light .messenger-close-btn {
187
- color: #86868b;
188
- }
189
-
190
- .theme-light .messenger-close-btn:hover {
191
- background: #f5f5f7;
192
- color: #1d1d1f;
193
- }
194
-
195
- /* Back Button */
196
- .messenger-back-btn {
197
- background: none;
198
- border: none;
199
- padding: 8px;
200
- cursor: pointer;
201
- color: rgba(255, 255, 255, 0.6);
202
- border-radius: 8px;
203
- display: flex;
204
- align-items: center;
205
- justify-content: center;
206
- transition: all 0.2s ease;
207
- }
208
-
209
- .messenger-back-btn:hover {
210
- background: rgba(255, 255, 255, 0.1);
211
- color: white;
212
- }
213
-
214
- /* Avatar Stack */
215
- .messenger-avatar-stack {
216
- display: flex;
217
- align-items: center;
218
- }
219
-
220
- .messenger-avatar {
221
- width: 32px;
222
- height: 32px;
223
- border-radius: 50%;
224
- border: 2px solid #1c1c1e;
225
- background: #5856d6;
226
- color: white;
227
- font-size: 13px;
228
- font-weight: 600;
229
- display: flex;
230
- align-items: center;
231
- justify-content: center;
232
- margin-left: -8px;
233
- object-fit: cover;
234
- }
235
-
236
- .messenger-avatar:first-child {
237
- margin-left: 0;
238
- }
239
-
240
- .messenger-avatar-small {
241
- width: 28px;
242
- height: 28px;
243
- font-size: 11px;
244
- }
245
-
246
- .messenger-avatar-medium {
247
- width: 40px;
248
- height: 40px;
249
- font-size: 15px;
250
- font-weight: 600;
251
- }
252
-
253
- .messenger-avatar-tiny {
254
- width: 20px;
255
- height: 20px;
256
- font-size: 9px;
257
- border-width: 1.5px;
258
- margin-left: -6px;
259
- }
260
-
261
- .messenger-avatar-tiny:first-child {
262
- margin-left: 0;
263
- }
264
-
265
- .theme-light .messenger-avatar {
266
- border-color: #ffffff;
267
- }
268
-
269
- /* ========================================
270
- Home View
271
- ======================================== */
272
-
273
- .messenger-home-view {
274
- background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 40%);
275
- }
276
-
277
- .messenger-home-header {
278
- padding: 20px;
279
- background: linear-gradient(180deg, rgba(88, 86, 214, 0.2) 0%, transparent 100%);
280
- }
281
-
282
- .messenger-home-header-top {
283
- display: flex;
284
- align-items: center;
285
- justify-content: space-between;
286
- margin-bottom: 24px;
287
- }
288
-
289
- .messenger-home-logo {
290
- width: 32px;
291
- height: 32px;
292
- }
293
-
294
- .messenger-home-logo img {
295
- width: 100%;
296
- height: 100%;
297
- border-radius: 8px;
298
- object-fit: cover;
299
- }
300
-
301
- .messenger-home-logo-default {
302
- width: 32px;
303
- height: 32px;
304
- background: linear-gradient(135deg, #5856d6, #007aff);
305
- border-radius: 8px;
306
- display: flex;
307
- align-items: center;
308
- justify-content: center;
309
- color: white;
310
- }
311
-
312
- .messenger-home-avatars {
313
- flex: 1;
314
- display: flex;
315
- justify-content: flex-end;
316
- margin-right: 12px;
317
- }
318
-
319
- .messenger-home-welcome {
320
- display: flex;
321
- flex-direction: column;
322
- gap: 4px;
323
- }
324
-
325
- .messenger-home-greeting {
326
- font-size: 15px;
327
- color: rgba(255, 255, 255, 0.5);
328
- }
329
-
330
- .messenger-home-question {
331
- font-size: 18px;
332
- font-weight: 600;
333
- color: white;
334
- }
335
-
336
- .messenger-home-body {
337
- flex: 1;
338
- padding: 20px;
339
- overflow-y: auto;
340
- }
341
-
342
- .messenger-home-message-btn {
343
- width: 100%;
344
- display: flex;
345
- align-items: center;
346
- justify-content: space-between;
347
- padding: 16px 20px;
348
- background: #2c2c2e;
349
- border: none;
350
- border-radius: 24px;
351
- color: white;
352
- font-size: 15px;
353
- font-weight: 500;
354
- cursor: pointer;
355
- transition: all 0.2s ease;
356
- margin-bottom: 20px;
357
- }
358
-
359
- .messenger-home-message-btn:hover {
360
- background: #3c3c3e;
361
- transform: translateX(4px);
362
- }
363
-
364
- .messenger-home-message-btn svg {
365
- opacity: 0.6;
366
- }
367
-
368
- /* Continue conversation variant */
369
- .messenger-home-continue-btn {
370
- flex-direction: column;
371
- align-items: flex-start;
372
- gap: 2px;
373
- position: relative;
374
- }
375
-
376
- .messenger-home-continue-btn > i {
377
- position: absolute;
378
- right: 20px;
379
- top: 50%;
380
- transform: translateY(-50%);
381
- }
382
-
383
- .messenger-home-continue-info {
384
- display: flex;
385
- flex-direction: column;
386
- gap: 2px;
387
- text-align: left;
388
- }
389
-
390
- .messenger-home-continue-label {
391
- font-size: 14px;
392
- font-weight: 600;
393
- }
394
-
395
- .messenger-home-continue-preview {
396
- font-size: 12px;
397
- opacity: 0.6;
398
- font-weight: 400;
399
- }
400
-
401
- /* Featured Card */
402
- .messenger-home-featured {
403
- background: #2c2c2e;
404
- border-radius: 12px;
405
- overflow: hidden;
406
- margin-bottom: 20px;
407
- }
408
-
409
- .messenger-home-featured-image {
410
- width: 100%;
411
- height: 120px;
412
- object-fit: cover;
413
- }
414
-
415
- .messenger-home-featured-content {
416
- padding: 16px;
417
- }
418
-
419
- .messenger-home-featured-content h3 {
420
- margin: 0 0 8px;
421
- font-size: 16px;
422
- font-weight: 600;
423
- color: white;
424
- }
425
-
426
- .messenger-home-featured-content p {
427
- margin: 0;
428
- font-size: 14px;
429
- color: rgba(255, 255, 255, 0.6);
430
- }
431
-
432
- /* Changelog Section in Home */
433
- .messenger-home-changelog-section {
434
- margin-top: 20px;
435
- display: flex;
436
- flex-direction: column;
437
- gap: 16px;
438
- }
439
-
440
- .messenger-home-changelog-card {
441
- background: #2c2c2e;
442
- border-radius: 16px;
443
- overflow: hidden;
444
- cursor: pointer;
445
- transition: all 0.2s ease;
446
- }
447
-
448
- .messenger-home-changelog-card:hover {
449
- background: #3c3c3e;
450
- transform: translateY(-2px);
451
- }
452
-
453
- .messenger-home-changelog-cover {
454
- width: 100%;
455
- height: 140px;
456
- overflow: hidden;
457
- position: relative;
458
- border-radius: 12px;
459
- margin: 12px 12px 0 12px;
460
- padding-bottom: 12px;
461
- width: calc(100% - 24px);
462
- }
463
-
464
- .messenger-home-changelog-cover img {
465
- width: 100%;
466
- height: 100%;
467
- object-fit: cover;
468
- border-radius: 12px;
469
- }
470
-
471
- .messenger-home-changelog-cover-text {
472
- position: absolute;
473
- bottom: 12px;
474
- left: 12px;
475
- right: 12px;
476
- color: #ffffff;
477
- font-size: 14px;
478
- font-weight: 600;
479
- text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
480
- line-height: 1.3;
481
- }
482
-
483
- .messenger-home-changelog-card-content {
484
- padding: 16px;
485
- border-top: 1px solid rgba(255, 255, 255, 0.1);
486
- }
487
-
488
- .messenger-home-changelog-card-title {
489
- margin: 0 0 8px 0;
490
- font-size: 14px;
491
- font-weight: 600;
492
- color: #ffffff;
493
- line-height: 1.3;
494
- }
495
-
496
- .messenger-home-changelog-card-desc {
497
- margin: 0;
498
- font-size: 14px;
499
- color: rgba(255, 255, 255, 0.7);
500
- line-height: 1.5;
501
- display: -webkit-box;
502
- -webkit-line-clamp: 3;
503
- -webkit-box-orient: vertical;
504
- overflow: hidden;
505
- }
506
-
507
- /* ========================================
508
- Conversations View
509
- ======================================== */
510
-
511
- .messenger-conversations-header {
512
- display: flex;
513
- align-items: center;
514
- justify-content: space-between;
515
- padding: 20px;
516
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
517
- }
518
-
519
- .messenger-conversations-header h2 {
520
- margin: 0;
521
- font-size: 20px;
522
- font-weight: 600;
523
- color: white;
524
- }
525
-
526
- .messenger-conversations-body {
527
- flex: 1;
528
- overflow-y: auto;
529
- padding: 4px 12px 12px 12px;
530
- }
531
-
532
- .messenger-conversations-empty {
533
- display: flex;
534
- flex-direction: column;
535
- align-items: center;
536
- justify-content: center;
537
- height: 100%;
538
- text-align: center;
539
- padding: 40px;
540
- }
541
-
542
- .messenger-conversations-empty-icon {
543
- color: rgba(255, 255, 255, 0.3);
544
- margin-bottom: 16px;
545
- }
546
-
547
- .messenger-conversations-empty h3 {
548
- margin: 0 0 8px;
549
- font-size: 18px;
550
- font-weight: 600;
551
- color: white;
552
- }
553
-
554
- .messenger-conversations-empty p {
555
- margin: 0;
556
- font-size: 14px;
557
- color: rgba(255, 255, 255, 0.5);
558
- }
559
-
560
- .messenger-conversation-item {
561
- display: flex;
562
- align-items: flex-start;
563
- gap: 12px;
564
- padding: 10px 16px;
565
- border-radius: 12px;
566
- cursor: pointer;
567
- transition: background 0.2s ease;
568
- }
569
-
570
- .messenger-conversation-item:hover {
571
- background: rgba(255, 255, 255, 0.05);
572
- }
573
-
574
- .messenger-conversation-avatars {
575
- flex-shrink: 0;
576
- padding-top: 2px;
577
- }
578
-
579
- .messenger-conversation-content {
580
- flex: 1;
581
- min-width: 0;
582
- }
583
-
584
- .messenger-conversation-header {
585
- display: flex;
586
- align-items: center;
587
- justify-content: space-between;
588
- margin-bottom: 4px;
589
- gap: 12px;
590
- }
591
-
592
- .messenger-conversation-title {
593
- font-size: 15px;
594
- font-weight: 400;
595
- color: #ffffff;
596
- line-height: 1.3;
597
- }
598
-
599
- .messenger-conversation-time {
600
- font-size: 13px;
601
- color: rgba(255, 255, 255, 0.5);
602
- flex-shrink: 0;
603
- }
604
-
605
- .messenger-conversation-preview {
606
- display: flex;
607
- align-items: center;
608
- gap: 8px;
609
- }
610
-
611
- .messenger-unread-dot {
612
- width: 8px;
613
- height: 8px;
614
- background: #ef4444;
615
- border-radius: 50%;
616
- flex-shrink: 0;
617
- }
618
-
619
- .messenger-conversation-message {
620
- font-size: 14px;
621
- color: rgba(255, 255, 255, 0.7);
622
- white-space: nowrap;
623
- overflow: hidden;
624
- text-overflow: ellipsis;
625
- line-height: 1.4;
626
- }
627
-
628
- .messenger-conversation-item.unread .messenger-conversation-title {
629
- font-weight: 400;
630
- color: #ffffff;
631
- }
632
-
633
- .messenger-conversation-item.unread .messenger-conversation-message {
634
- color: rgba(255, 255, 255, 0.9);
635
- }
636
-
637
- .messenger-conversations-footer {
638
- padding: 16px;
639
- border-top: 1px solid rgba(255, 255, 255, 0.1);
640
- }
641
-
642
- .messenger-new-message-btn {
643
- width: 100%;
644
- display: flex;
645
- align-items: center;
646
- gap: 12px;
647
- padding: 12px 16px;
648
- background: #2c2c2e;
649
- border: none;
650
- border-radius: 24px;
651
- color: white;
652
- font-size: 14px;
653
- font-weight: 500;
654
- cursor: pointer;
655
- transition: all 0.2s ease;
656
- }
657
-
658
- .messenger-new-message-btn:hover {
659
- background: #3c3c3e;
660
- }
661
-
662
- .messenger-new-message-btn span {
663
- flex: 1;
664
- text-align: left;
665
- }
666
-
667
- .messenger-new-message-btn svg {
668
- opacity: 0.6;
669
- }
670
-
671
- /* ========================================
672
- Chat View
673
- ======================================== */
674
-
675
- .messenger-chat-header {
676
- display: flex;
677
- align-items: center;
678
- gap: 12px;
679
- padding: 16px 20px;
680
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
681
- }
682
-
683
- .messenger-chat-header-info {
684
- flex: 1;
685
- display: flex;
686
- align-items: center;
687
- gap: 10px;
688
- }
689
-
690
- .messenger-chat-title {
691
- font-size: 16px;
692
- font-weight: 500;
693
- color: white;
694
- }
695
-
696
- .messenger-chat-view {
697
- position: relative;
698
- overflow: visible;
699
- }
700
-
701
- .messenger-chat-messages {
702
- flex: 1;
703
- overflow-y: auto;
704
- padding: 16px;
705
- display: flex;
706
- flex-direction: column;
707
- gap: 16px;
708
- }
709
-
710
- .messenger-chat-empty {
711
- flex: 1;
712
- display: flex;
713
- flex-direction: column;
714
- align-items: center;
715
- justify-content: center;
716
- text-align: center;
717
- padding: 40px;
718
- }
719
-
720
- .messenger-chat-empty-avatars {
721
- margin-bottom: 16px;
722
- }
723
-
724
- .messenger-chat-empty h3 {
725
- margin: 0 0 8px;
726
- font-size: 18px;
727
- font-weight: 600;
728
- color: white;
729
- }
730
-
731
- .messenger-chat-empty p {
732
- margin: 0;
733
- font-size: 14px;
734
- color: rgba(255, 255, 255, 0.5);
735
- max-width: 240px;
736
- }
737
-
738
- /* Messages */
739
- .messenger-message {
740
- display: flex;
741
- gap: 8px;
742
- max-width: 85%;
743
- }
744
-
745
- .messenger-message-own {
746
- align-self: flex-end;
747
- flex-direction: column;
748
- align-items: flex-end;
749
- }
750
-
751
- .messenger-message-received {
752
- align-self: flex-start;
753
- }
754
-
755
- .messenger-message-wrapper {
756
- display: flex;
757
- flex-direction: column;
758
- }
759
-
760
- .messenger-message-sender {
761
- font-size: 12px;
762
- font-weight: 500;
763
- color: rgba(255, 255, 255, 0.6);
764
- margin-bottom: 4px;
765
- margin-left: 12px;
766
- }
767
-
768
- .messenger-message-bubble {
769
- padding: 12px 16px;
770
- border-radius: 18px;
771
- word-wrap: break-word;
772
- }
773
-
774
- .messenger-message-own .messenger-message-bubble {
775
- background: rgb(29, 78, 216);
776
- color: white;
777
- border-bottom-right-radius: 4px;
778
- }
779
-
780
- .messenger-message-received .messenger-message-bubble {
781
- background: #2c2c2e;
782
- color: white;
783
- border-bottom-left-radius: 4px;
784
- }
785
-
786
- .messenger-message-content {
787
- font-size: 15px;
788
- line-height: 1.4;
789
- }
790
-
791
- .messenger-message-time {
792
- font-size: 11px;
793
- color: rgba(255, 255, 255, 0.4);
794
- margin-top: 4px;
795
- padding: 0 4px;
796
- }
797
-
798
- .messenger-message-avatar {
799
- flex-shrink: 0;
800
- margin-top: auto;
801
- }
802
-
803
- /* Conversation Closed Banner */
804
- .messenger-closed-banner {
805
- display: flex;
806
- align-items: center;
807
- justify-content: center;
808
- gap: 8px;
809
- padding: 12px 16px;
810
- margin: 16px;
811
- background: rgba(52, 199, 89, 0.12);
812
- color: #34c759;
813
- border-radius: 12px;
814
- font-size: 13px;
815
- font-weight: 500;
816
- }
817
-
818
- /* Compose Area */
819
- .messenger-chat-compose {
820
- display: flex;
821
- align-items: center;
822
- gap: 8px;
823
- padding: 12px 16px;
824
- border-top: 1px solid rgba(255, 255, 255, 0.1);
825
- background: #1c1c1e;
826
- }
827
-
828
- .messenger-compose-input-wrapper {
829
- flex: 1;
830
- background: #2c2c2e;
831
- border-radius: 10px;
832
- padding: 8px 16px;
833
- }
834
-
835
- .messenger-compose-input {
836
- width: 100%;
837
- background: transparent;
838
- border: none;
839
- outline: none;
840
- color: white;
841
- font-size: 15px;
842
- line-height: 1.4;
843
- resize: none;
844
- max-height: 120px;
845
- font-family: inherit;
846
- }
847
-
848
- .messenger-compose-input::placeholder {
849
- color: rgba(255, 255, 255, 0.4);
850
- }
851
-
852
- .messenger-compose-send {
853
- width: 40px;
854
- height: 40px;
855
- background: #007aff;
856
- border: none;
857
- border-radius: 50%;
858
- color: white;
859
- cursor: pointer;
860
- display: flex;
861
- align-items: center;
862
- justify-content: center;
863
- transition: all 0.2s ease;
864
- flex-shrink: 0;
865
- }
866
-
867
- .messenger-compose-send:hover:not(:disabled) {
868
- background: #0066d6;
869
- transform: scale(1.05);
870
- }
871
-
872
- .messenger-compose-send:disabled {
873
- background: #3c3c3e;
874
- color: rgba(255, 255, 255, 0.3);
875
- cursor: not-allowed;
876
- }
877
-
878
- /* Attach Button */
879
- .messenger-compose-attach {
880
- width: 40px;
881
- height: 40px;
882
- background: transparent;
883
- border: none;
884
- border-radius: 50%;
885
- color: rgba(255, 255, 255, 0.5);
886
- cursor: pointer;
887
- display: flex;
888
- align-items: center;
889
- justify-content: center;
890
- transition: all 0.2s ease;
891
- flex-shrink: 0;
892
- }
893
-
894
- .messenger-compose-attach:hover:not(:disabled) {
895
- color: rgba(255, 255, 255, 0.85);
896
- background: rgba(255, 255, 255, 0.08);
897
- }
898
-
899
- .messenger-compose-attach:disabled {
900
- opacity: 0.3;
901
- cursor: not-allowed;
902
- }
903
-
904
- /* Attachment Preview Strip */
905
- .messenger-compose-attachments-preview {
906
- display: none;
907
- flex-wrap: wrap;
908
- gap: 8px;
909
- padding: 8px 16px;
910
- border-top: 1px solid rgba(255, 255, 255, 0.1);
911
- background: #1c1c1e;
912
- }
913
-
914
- .messenger-attachment-preview {
915
- position: relative;
916
- width: 56px;
917
- height: 56px;
918
- border-radius: 8px;
919
- overflow: hidden;
920
- border: 1px solid rgba(255, 255, 255, 0.15);
921
- }
922
-
923
- .messenger-attachment-thumb {
924
- width: 100%;
925
- height: 100%;
926
- object-fit: cover;
927
- display: block;
928
- }
929
-
930
- .messenger-attachment-file-icon {
931
- display: flex;
932
- align-items: center;
933
- justify-content: center;
934
- background: #2c2c2e;
935
- color: rgba(255, 255, 255, 0.5);
936
- }
937
-
938
- .messenger-attachment-remove {
939
- position: absolute;
940
- top: 2px;
941
- right: 2px;
942
- width: 18px;
943
- height: 18px;
944
- background: rgba(0, 0, 0, 0.7);
945
- border: none;
946
- border-radius: 50%;
947
- color: white;
948
- font-size: 12px;
949
- line-height: 1;
950
- cursor: pointer;
951
- display: flex;
952
- align-items: center;
953
- justify-content: center;
954
- padding: 0;
955
- transition: background 0.15s ease;
956
- }
957
-
958
- .messenger-attachment-remove:hover {
959
- background: rgba(255, 59, 48, 0.85);
960
- }
961
-
962
- /* Message Attachments (inline images & file links) */
963
- .messenger-message-image {
964
- max-width: 220px;
965
- max-height: 200px;
966
- width: auto;
967
- height: auto;
968
- border-radius: 8px;
969
- margin-top: 4px;
970
- cursor: pointer;
971
- object-fit: contain;
972
- display: block;
973
- }
974
-
975
- .messenger-message-file {
976
- display: inline-flex;
977
- align-items: center;
978
- gap: 6px;
979
- margin-top: 4px;
980
- padding: 8px 12px;
981
- border-radius: 8px;
982
- background: #2c2c2e;
983
- color: #60a5fa;
984
- text-decoration: none;
985
- font-size: 13px;
986
- transition: background 0.15s ease;
987
- max-width: 100%;
988
- word-break: break-all;
989
- cursor: pointer;
990
- }
991
-
992
- .messenger-message-file:hover {
993
- background: #3c3c3e;
994
- }
995
-
996
- .messenger-file-download-icon {
997
- margin-left: auto;
998
- opacity: 0.5;
999
- flex-shrink: 0;
1000
- }
1001
-
1002
- .messenger-message-file:hover .messenger-file-download-icon {
1003
- opacity: 1;
1004
- }
1005
-
1006
- /* Light theme overrides for attachments */
1007
- .theme-light .messenger-compose-attach {
1008
- color: #9ca3af;
1009
- }
1010
-
1011
- .theme-light .messenger-compose-attach:hover:not(:disabled) {
1012
- color: #374151;
1013
- background: #f3f4f6;
1014
- }
1015
-
1016
- .theme-light .messenger-compose-attachments-preview {
1017
- background: #ffffff;
1018
- border-top-color: #e5e7eb;
1019
- }
1020
-
1021
- .theme-light .messenger-attachment-preview {
1022
- border-color: #e5e7eb;
1023
- }
1024
-
1025
- .theme-light .messenger-attachment-file-icon {
1026
- background: #f3f4f6;
1027
- color: #6b7280;
1028
- }
1029
-
1030
- .theme-light .messenger-message-file {
1031
- background: #f3f4f6;
1032
- color: #2563eb;
1033
- }
1034
-
1035
- .theme-light .messenger-message-file:hover {
1036
- background: #e5e7eb;
1037
- }
1038
-
1039
- /* ========================================
1040
- Help View
1041
- ======================================== */
1042
-
1043
- .messenger-help-header {
1044
- display: flex;
1045
- align-items: center;
1046
- justify-content: center;
1047
- padding: 20px;
1048
- position: relative;
1049
- }
1050
-
1051
- .messenger-help-header h2 {
1052
- margin: 0;
1053
- font-size: 17px;
1054
- font-weight: 600;
1055
- color: white;
1056
- }
1057
-
1058
- .messenger-help-header .messenger-close-btn {
1059
- position: absolute;
1060
- right: 16px;
1061
- top: 50%;
1062
- transform: translateY(-50%);
1063
- }
1064
-
1065
- .messenger-help-search {
1066
- padding: 0 16px 16px;
1067
- }
1068
-
1069
- .messenger-help-search-wrapper {
1070
- display: flex;
1071
- align-items: center;
1072
- background: #2c2c2e;
1073
- border-radius: 12px;
1074
- padding: 14px 16px;
1075
- position: relative;
1076
- }
1077
-
1078
- .messenger-help-search-icon {
1079
- position: absolute;
1080
- right: 16px;
1081
- color: rgba(255, 255, 255, 0.4);
1082
- }
1083
-
1084
- .messenger-help-search-input {
1085
- flex: 1;
1086
- background: transparent;
1087
- border: none;
1088
- outline: none;
1089
- color: white;
1090
- font-size: 16px;
1091
- font-family: inherit;
1092
- padding-right: 32px;
1093
- }
1094
-
1095
- .messenger-help-search-input::placeholder {
1096
- color: rgba(255, 255, 255, 0.4);
1097
- }
1098
-
1099
- .messenger-help-body {
1100
- flex: 1;
1101
- overflow-y: auto;
1102
- padding: 0;
1103
- }
1104
-
1105
- .messenger-help-collections-header {
1106
- font-size: 17px;
1107
- font-weight: 600;
1108
- color: white;
1109
- padding: 12px 16px 8px;
1110
- border-top: 1px solid rgba(255, 255, 255, 0.1);
1111
- }
1112
-
1113
- .messenger-help-collections {
1114
- padding: 0;
1115
- }
1116
-
1117
- .messenger-help-collection {
1118
- display: flex;
1119
- align-items: center;
1120
- padding: 10px 16px;
1121
- cursor: pointer;
1122
- transition: background 0.2s ease;
1123
- border-top: 1px solid rgba(255, 255, 255, 0.1);
1124
- }
1125
-
1126
- .messenger-help-collection:hover {
1127
- background: rgba(255, 255, 255, 0.05);
1128
- }
1129
-
1130
- .messenger-help-collection-content {
1131
- flex: 1;
1132
- min-width: 0;
1133
- }
1134
-
1135
- .messenger-help-collection-title {
1136
- margin: 0 0 2px;
1137
- font-size: 14px;
1138
- font-weight: 600;
1139
- color: white;
1140
- }
1141
-
1142
- .messenger-help-collection-desc {
1143
- margin: 0 0 2px;
1144
- font-size: 14px;
1145
- color: rgba(255, 255, 255, 0.7);
1146
- line-height: 1.3;
1147
- }
1148
-
1149
- .messenger-help-collection-count {
1150
- font-size: 14px;
1151
- color: rgba(255, 255, 255, 0.4);
1152
- }
1153
-
1154
- .messenger-help-collection-arrow {
1155
- color: rgba(255, 255, 255, 0.3);
1156
- flex-shrink: 0;
1157
- margin-left: 12px;
1158
- }
1159
-
1160
- .messenger-help-empty {
1161
- display: flex;
1162
- flex-direction: column;
1163
- align-items: center;
1164
- justify-content: center;
1165
- height: 100%;
1166
- text-align: center;
1167
- padding: 40px;
1168
- }
1169
-
1170
- .messenger-help-empty-icon {
1171
- color: rgba(255, 255, 255, 0.3);
1172
- margin-bottom: 16px;
1173
- }
1174
-
1175
- .messenger-help-empty h3 {
1176
- margin: 0 0 8px;
1177
- font-size: 18px;
1178
- font-weight: 600;
1179
- color: white;
1180
- }
1181
-
1182
- .messenger-help-empty p {
1183
- margin: 0;
1184
- font-size: 14px;
1185
- color: rgba(255, 255, 255, 0.5);
1186
- }
1187
-
1188
- /* ========================================
1189
- Changelog View
1190
- ======================================== */
1191
-
1192
- .messenger-changelog-header {
1193
- display: flex;
1194
- align-items: center;
1195
- justify-content: space-between;
1196
- padding: 20px;
1197
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
1198
- }
1199
-
1200
- .messenger-changelog-header h2 {
1201
- margin: 0;
1202
- font-size: 20px;
1203
- font-weight: 600;
1204
- color: white;
1205
- }
1206
-
1207
- .messenger-changelog-subheader {
1208
- display: flex;
1209
- align-items: center;
1210
- justify-content: space-between;
1211
- padding: 12px 20px;
1212
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
1213
- }
1214
-
1215
- .messenger-changelog-latest {
1216
- font-size: 12px;
1217
- font-weight: 600;
1218
- color: rgba(255, 255, 255, 0.5);
1219
- text-transform: uppercase;
1220
- letter-spacing: 0.5px;
1221
- }
1222
-
1223
- .messenger-changelog-team {
1224
- display: flex;
1225
- align-items: center;
1226
- gap: 8px;
1227
- font-size: 13px;
1228
- color: rgba(255, 255, 255, 0.6);
1229
- }
1230
-
1231
- .messenger-changelog-body {
1232
- flex: 1;
1233
- overflow-y: auto;
1234
- padding: 16px;
1235
- }
1236
-
1237
- .messenger-changelog-card {
1238
- background: #2c2c2e;
1239
- border-radius: 12px;
1240
- overflow: hidden;
1241
- margin-bottom: 12px;
1242
- cursor: pointer;
1243
- transition: all 0.2s ease;
1244
- }
1245
-
1246
- .messenger-changelog-card:hover {
1247
- background: #3c3c3e;
1248
- transform: translateY(-2px);
1249
- }
1250
-
1251
- .messenger-changelog-cover {
1252
- height: 120px;
1253
- overflow: hidden;
1254
- }
1255
-
1256
- .messenger-changelog-cover img {
1257
- width: 100%;
1258
- height: 100%;
1259
- object-fit: cover;
1260
- }
1261
-
1262
- .messenger-changelog-content {
1263
- padding: 16px;
1264
- }
1265
-
1266
- .messenger-changelog-tags {
1267
- display: flex;
1268
- flex-wrap: wrap;
1269
- gap: 8px;
1270
- margin-bottom: 12px;
1271
- }
1272
-
1273
- .messenger-changelog-tag {
1274
- font-size: 11px;
1275
- font-weight: 600;
1276
- color: white;
1277
- background: rgba(88, 86, 214, 0.3);
1278
- padding: 4px 10px;
1279
- border-radius: 12px;
1280
- text-transform: uppercase;
1281
- letter-spacing: 0.3px;
1282
- }
1283
-
1284
- .messenger-changelog-title {
1285
- margin: 0 0 8px;
1286
- font-size: 14px;
1287
- font-weight: 600;
1288
- color: white;
1289
- line-height: 1.3;
1290
- }
1291
-
1292
- .messenger-changelog-description {
1293
- margin: 0 0 12px;
1294
- font-size: 14px;
1295
- color: rgba(255, 255, 255, 0.6);
1296
- line-height: 1.4;
1297
- }
1298
-
1299
- .messenger-changelog-meta {
1300
- display: flex;
1301
- align-items: center;
1302
- justify-content: space-between;
1303
- }
1304
-
1305
- .messenger-changelog-date {
1306
- font-size: 12px;
1307
- color: rgba(255, 255, 255, 0.5);
1308
- }
1309
-
1310
- .messenger-changelog-arrow {
1311
- color: rgba(255, 255, 255, 0.3);
1312
- }
1313
-
1314
- .messenger-changelog-empty {
1315
- display: flex;
1316
- flex-direction: column;
1317
- align-items: center;
1318
- justify-content: center;
1319
- height: 100%;
1320
- text-align: center;
1321
- padding: 40px;
1322
- }
1323
-
1324
- .messenger-changelog-empty-icon {
1325
- color: rgba(255, 255, 255, 0.3);
1326
- margin-bottom: 16px;
1327
- }
1328
-
1329
- .messenger-changelog-empty h3 {
1330
- margin: 0 0 8px;
1331
- font-size: 18px;
1332
- font-weight: 600;
1333
- color: white;
1334
- }
1335
-
1336
- .messenger-changelog-empty p {
1337
- margin: 0;
1338
- font-size: 14px;
1339
- color: rgba(255, 255, 255, 0.5);
1340
- }
1341
-
1342
- /* ========================================
1343
- Navigation Tabs
1344
- ======================================== */
1345
-
1346
- .messenger-panel-nav {
1347
- border-top: 1px solid rgba(255, 255, 255, 0.1);
1348
- background: #1c1c1e;
1349
- }
1350
-
1351
- .messenger-nav {
1352
- display: flex;
1353
- padding: 4px 8px;
1354
- gap: 4px;
1355
- }
1356
-
1357
- .messenger-nav-tab {
1358
- flex: 1;
1359
- display: flex;
1360
- flex-direction: column;
1361
- align-items: center;
1362
- gap: 4px;
1363
- padding: 8px 4px;
1364
- background: none;
1365
- border: none;
1366
- cursor: pointer;
1367
- border-radius: 8px;
1368
- transition: all 0.2s ease;
1369
- position: relative;
1370
- }
1371
-
1372
- .messenger-nav-tab:hover {
1373
- background: rgba(255, 255, 255, 0.05);
1374
- }
1375
-
1376
- .messenger-nav-icon {
1377
- color: rgba(255, 255, 255, 0.5);
1378
- transition: color 0.2s ease;
1379
- }
1380
-
1381
- .messenger-nav-home-icon {
1382
- position: relative;
1383
- display: inline-flex;
1384
- align-items: center;
1385
- justify-content: center;
1386
- }
1387
-
1388
- .messenger-nav-home-icon > i:first-child {
1389
- position: relative;
1390
- }
1391
-
1392
- .messenger-nav-home-icon > i:last-child {
1393
- position: absolute;
1394
- top: 8px;
1395
- left: 50%;
1396
- transform: translateX(-50%);
1397
- transition: color 0.2s ease, filter 0.2s ease;
1398
- }
1399
-
1400
- .messenger-nav-tab:hover .messenger-nav-home-icon > i:last-child {
1401
- color: #ffd700;
1402
- filter: drop-shadow(0 0 4px #ffd700);
1403
- }
1404
-
1405
- .messenger-nav-label {
1406
- font-size: 11px;
1407
- font-weight: 500;
1408
- color: rgba(255, 255, 255, 0.5);
1409
- transition: color 0.2s ease;
1410
- }
1411
-
1412
- .messenger-nav-tab.active .messenger-nav-icon {
1413
- color: white;
1414
- }
1415
-
1416
- .messenger-nav-tab.active .messenger-nav-label {
1417
- color: white;
1418
- font-weight: 400;
1419
- }
1420
-
1421
- .messenger-nav-badge {
1422
- position: absolute;
1423
- top: 4px;
1424
- right: calc(50% - 16px);
1425
- min-width: 16px;
1426
- height: 16px;
1427
- background: #ef4444;
1428
- color: white;
1429
- font-size: 10px;
1430
- font-weight: 600;
1431
- border-radius: 8px;
1432
- display: flex;
1433
- align-items: center;
1434
- justify-content: center;
1435
- padding: 0 4px;
1436
- }
1437
-
1438
- /* ========================================
1439
- Light Theme Overrides
1440
- ======================================== */
1441
-
1442
- /* Panel */
1443
- .theme-light .messenger-panel-content {
1444
- background: #ffffff;
1445
- }
1446
-
1447
- /* Home View */
1448
- .theme-light .messenger-home-view {
1449
- background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 40%);
1450
- }
1451
-
1452
- .theme-light .messenger-home-header {
1453
- background: linear-gradient(180deg, rgba(88, 86, 214, 0.1) 0%, transparent 100%);
1454
- }
1455
-
1456
- .theme-light .messenger-home-greeting {
1457
- color: #86868b;
1458
- }
1459
-
1460
- .theme-light .messenger-home-question {
1461
- color: #1d1d1f;
1462
- }
1463
-
1464
- .theme-light .messenger-home-message-btn {
1465
- background: #f5f5f7;
1466
- color: #1d1d1f;
1467
- border: 1px solid #e0e0e0;
1468
- }
1469
-
1470
- .theme-light .messenger-home-message-btn:hover {
1471
- background: #e8e8ed;
1472
- }
1473
-
1474
- .theme-light .messenger-home-message-btn svg,
1475
- .theme-light .messenger-home-message-btn i {
1476
- color: #86868b;
1477
- }
1478
-
1479
- .theme-light .messenger-home-featured {
1480
- background: #f5f5f7;
1481
- }
1482
-
1483
- .theme-light .messenger-home-featured-content h3 {
1484
- color: #1d1d1f;
1485
- }
1486
-
1487
- .theme-light .messenger-home-featured-content p {
1488
- color: #86868b;
1489
- }
1490
-
1491
- .theme-light .messenger-home-changelog-card {
1492
- background: #f5f5f7;
1493
- border: 1px solid #e0e0e0;
1494
- }
1495
-
1496
- .theme-light .messenger-home-changelog-card-content {
1497
- border-top-color: #e0e0e0;
1498
- }
1499
-
1500
- .theme-light .messenger-home-changelog-card:hover {
1501
- background: #e8e8ed;
1502
- }
1503
-
1504
- .theme-light .messenger-home-changelog-card-title {
1505
- color: #1d1d1f;
1506
- }
1507
-
1508
- .theme-light .messenger-home-changelog-card-desc {
1509
- color: #6e6e73;
1510
- }
1511
-
1512
- /* Close/Back buttons */
1513
- .theme-light .messenger-close-btn,
1514
- .theme-light .messenger-back-btn {
1515
- color: #86868b;
1516
- }
1517
-
1518
- .theme-light .messenger-close-btn:hover,
1519
- .theme-light .messenger-back-btn:hover {
1520
- background: #f5f5f7;
1521
- color: #1d1d1f;
1522
- }
1523
-
1524
- /* Avatar */
1525
- .theme-light .messenger-avatar {
1526
- border-color: #ffffff;
1527
- }
1528
-
1529
- /* Conversations View */
1530
- .theme-light .messenger-conversations-view {
1531
- background: #ffffff;
1532
- }
1533
-
1534
- .theme-light .messenger-conversations-header,
1535
- .theme-light .messenger-help-header,
1536
- .theme-light .messenger-changelog-header,
1537
- .theme-light .messenger-chat-header {
1538
- background: #ffffff;
1539
- border-bottom-color: #e5e5e7;
1540
- }
1541
-
1542
- .theme-light .messenger-conversations-header h2,
1543
- .theme-light .messenger-help-header h2,
1544
- .theme-light .messenger-changelog-header h2 {
1545
- color: #1d1d1f;
1546
- }
1547
-
1548
- .theme-light .messenger-conversations-body {
1549
- background: #ffffff;
1550
- }
1551
-
1552
- .theme-light .messenger-conversations-footer {
1553
- background: #ffffff;
1554
- }
1555
-
1556
- .theme-light .messenger-conversations-empty-icon,
1557
- .theme-light .messenger-chat-empty-avatars,
1558
- .theme-light .messenger-help-empty-icon,
1559
- .theme-light .messenger-changelog-empty-icon {
1560
- color: #c7c7cc;
1561
- }
1562
-
1563
- .theme-light .messenger-conversations-empty h3,
1564
- .theme-light .messenger-chat-empty h3,
1565
- .theme-light .messenger-help-empty h3,
1566
- .theme-light .messenger-changelog-empty h3 {
1567
- color: #1d1d1f;
1568
- }
1569
-
1570
- .theme-light .messenger-conversations-empty p,
1571
- .theme-light .messenger-chat-empty p,
1572
- .theme-light .messenger-help-empty p,
1573
- .theme-light .messenger-changelog-empty p {
1574
- color: #86868b;
1575
- }
1576
-
1577
- .theme-light .messenger-conversation-item:hover {
1578
- background: rgba(0, 0, 0, 0.03);
1579
- }
1580
-
1581
- .theme-light .messenger-conversation-title {
1582
- color: #1d1d1f !important;
1583
- }
1584
-
1585
- .theme-light .messenger-conversation-item.unread .messenger-conversation-title {
1586
- color: #1d1d1f !important;
1587
- font-weight: 400;
1588
- }
1589
-
1590
- .theme-light .messenger-conversation-time {
1591
- color: #86868b !important;
1592
- }
1593
-
1594
- .theme-light .messenger-conversation-message {
1595
- color: #6e6e73 !important;
1596
- }
1597
-
1598
- .theme-light .messenger-conversation-item.unread .messenger-conversation-message {
1599
- color: #3a3a3c !important;
1600
- }
1601
-
1602
- .theme-light .messenger-chat-title,
1603
- .theme-light .messenger-help-article-title,
1604
- .theme-light .messenger-changelog-title {
1605
- color: #1d1d1f;
1606
- }
1607
-
1608
- .theme-light .messenger-help-article-desc,
1609
- .theme-light .messenger-changelog-description {
1610
- color: #86868b;
1611
- }
1612
-
1613
- .theme-light .messenger-conversations-footer {
1614
- border-top-color: #e5e5e7;
1615
- }
1616
-
1617
- .theme-light .messenger-new-message-btn {
1618
- background: #f5f5f7;
1619
- color: #1d1d1f;
1620
- }
1621
-
1622
- .theme-light .messenger-new-message-btn:hover {
1623
- background: #e8e8ed;
1624
- }
1625
-
1626
- .theme-light .messenger-new-message-btn svg,
1627
- .theme-light .messenger-new-message-btn i {
1628
- color: #86868b;
1629
- }
1630
-
1631
- /* Chat View */
1632
- .theme-light .messenger-chat-view {
1633
- background: #ffffff;
1634
- }
1635
-
1636
- .theme-light .messenger-chat-header {
1637
- background: #ffffff;
1638
- }
1639
-
1640
- .theme-light .messenger-chat-title {
1641
- color: #1d1d1f;
1642
- }
1643
-
1644
- .theme-light .messenger-chat-messages {
1645
- background: #ffffff;
1646
- }
1647
-
1648
- .theme-light .messenger-chat-empty h3 {
1649
- color: #1d1d1f;
1650
- }
1651
-
1652
- .theme-light .messenger-chat-empty p {
1653
- color: #86868b;
1654
- }
1655
-
1656
- .theme-light .messenger-message-sender {
1657
- color: #86868b;
1658
- }
1659
-
1660
- .theme-light .messenger-message-received .messenger-message-bubble {
1661
- background: #f5f5f7;
1662
- color: #1d1d1f;
1663
- }
1664
-
1665
- .theme-light .messenger-message-own .messenger-message-bubble {
1666
- background: rgb(29, 78, 216);
1667
- color: #ffffff;
1668
- }
1669
-
1670
- .theme-light .messenger-message-time {
1671
- color: #86868b;
1672
- }
1673
-
1674
- .theme-light .messenger-closed-banner {
1675
- background: rgba(52, 199, 89, 0.1);
1676
- color: #22883a;
1677
- }
1678
-
1679
- .theme-light .messenger-chat-compose {
1680
- background: #ffffff;
1681
- border-top-color: #e5e5e7;
1682
- }
1683
-
1684
- .theme-light .messenger-compose-input-wrapper {
1685
- background: #f5f5f7;
1686
- }
1687
-
1688
- .theme-light .messenger-compose-input {
1689
- color: #1d1d1f;
1690
- }
1691
-
1692
- .theme-light .messenger-compose-input::placeholder {
1693
- color: #86868b;
1694
- }
1695
-
1696
- .theme-light .messenger-compose-send:disabled {
1697
- background: #e5e5e7;
1698
- color: #c7c7cc;
1699
- }
1700
-
1701
- /* Help View */
1702
- .theme-light .messenger-help-view {
1703
- background: #ffffff;
1704
- }
1705
-
1706
- .theme-light .messenger-help-body {
1707
- background: #ffffff;
1708
- }
1709
-
1710
- .theme-light .messenger-help-search {
1711
- background: #ffffff;
1712
- }
1713
-
1714
- .theme-light .messenger-help-search-wrapper {
1715
- background: #f5f5f7;
1716
- }
1717
-
1718
- .theme-light .messenger-help-search-icon {
1719
- color: #86868b;
1720
- }
1721
-
1722
- .theme-light .messenger-help-search-input {
1723
- color: #1d1d1f;
1724
- }
1725
-
1726
- .theme-light .messenger-help-search-input::placeholder {
1727
- color: #86868b;
1728
- }
1729
-
1730
- .theme-light .messenger-help-collections-header {
1731
- color: #1d1d1f;
1732
- border-top-color: #e5e5e7;
1733
- }
1734
-
1735
- .theme-light .messenger-help-collection {
1736
- border-top-color: #e5e5e7;
1737
- }
1738
-
1739
- .theme-light .messenger-help-collection:hover {
1740
- background: rgba(0, 0, 0, 0.03);
1741
- }
1742
-
1743
- .theme-light .messenger-help-collection-title {
1744
- color: #1d1d1f;
1745
- }
1746
-
1747
- .theme-light .messenger-help-collection-desc {
1748
- color: #6e6e73;
1749
- }
1750
-
1751
- .theme-light .messenger-help-collection-count {
1752
- color: #86868b;
1753
- }
1754
-
1755
- .theme-light .messenger-help-collection-arrow {
1756
- color: #c7c7cc;
1757
- }
1758
-
1759
- /* Changelog View */
1760
- .theme-light .messenger-changelog-subheader {
1761
- border-bottom-color: #e5e5e7;
1762
- }
1763
-
1764
- .theme-light .messenger-changelog-latest {
1765
- color: #86868b;
1766
- }
1767
-
1768
- .theme-light .messenger-changelog-team {
1769
- color: #86868b;
1770
- }
1771
-
1772
- .theme-light .messenger-changelog-card {
1773
- background: #f5f5f7;
1774
- }
1775
-
1776
- .theme-light .messenger-changelog-card:hover {
1777
- background: #e8e8ed;
1778
- }
1779
-
1780
- .theme-light .messenger-changelog-tag {
1781
- background: rgba(0, 122, 255, 0.15);
1782
- color: #007aff;
1783
- }
1784
-
1785
- .theme-light .messenger-changelog-date {
1786
- color: #86868b;
1787
- }
1788
-
1789
- .theme-light .messenger-changelog-arrow {
1790
- color: #c7c7cc;
1791
- }
1792
-
1793
- /* Navigation */
1794
- .theme-light .messenger-panel-nav {
1795
- background: #ffffff;
1796
- border-top-color: #e5e5e7;
1797
- }
1798
-
1799
- .theme-light .messenger-nav-icon {
1800
- color: #86868b;
1801
- }
1802
-
1803
- .theme-light .messenger-nav-label {
1804
- color: #86868b;
1805
- }
1806
-
1807
- .theme-light .messenger-nav-tab:hover {
1808
- background: rgba(0, 0, 0, 0.05);
1809
- }
1810
-
1811
- .theme-light .messenger-nav-tab.active .messenger-nav-icon,
1812
- .theme-light .messenger-nav-tab.active .messenger-nav-label {
1813
- color: #007aff;
1814
- }
1815
-
1816
- /* ========================================
1817
- Responsive Design
1818
- ======================================== */
1819
-
1820
- @media (max-width: 480px) {
1821
- .messenger-panel {
1822
- width: 100%;
1823
- height: 100%;
1824
- max-height: 100%;
1825
- bottom: 0;
1826
- right: 0;
1827
- left: 0;
1828
- border-radius: 0;
1829
- }
1830
-
1831
- .messenger-panel-content {
1832
- border-radius: 0;
1833
- }
1834
-
1835
- .messenger-launcher {
1836
- bottom: 16px;
1837
- right: 16px;
1838
- }
1839
-
1840
- .messenger-launcher-bottom-left {
1841
- left: 16px;
1842
- }
1843
- }
1844
-
1845
- /* ========================================
1846
- Availability Status
1847
- ======================================== */
1848
-
1849
- .messenger-home-availability,
1850
- .messenger-chat-availability {
1851
- display: flex;
1852
- align-items: center;
1853
- gap: 6px;
1854
- margin-top: 8px;
1855
- font-size: 13px;
1856
- color: rgba(255, 255, 255, 0.7);
1857
- }
1858
-
1859
- .theme-light .messenger-home-availability,
1860
- .theme-light .messenger-chat-availability {
1861
- color: #6b7280;
1862
- }
1863
-
1864
- .messenger-availability-dot {
1865
- width: 8px;
1866
- height: 8px;
1867
- border-radius: 50%;
1868
- flex-shrink: 0;
1869
- }
1870
-
1871
- .messenger-availability-online {
1872
- background: #22c55e;
1873
- box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
1874
- }
1875
-
1876
- .messenger-availability-away {
1877
- background: #9ca3af;
1878
- }
1879
-
1880
- .messenger-availability-text {
1881
- opacity: 0.9;
1882
- }
1883
-
1884
- /* ========================================
1885
- Typing Indicator
1886
- ======================================== */
1887
-
1888
- .messenger-typing-indicator {
1889
- display: flex;
1890
- align-items: center;
1891
- gap: 8px;
1892
- padding: 8px 12px;
1893
- margin: 4px 0;
1894
- }
1895
-
1896
- .messenger-typing-dots {
1897
- display: flex;
1898
- align-items: center;
1899
- gap: 4px;
1900
- background: #374151;
1901
- padding: 8px 12px;
1902
- border-radius: 16px;
1903
- }
1904
-
1905
- .theme-light .messenger-typing-dots {
1906
- background: #e5e7eb;
1907
- }
1908
-
1909
- .messenger-typing-dots span {
1910
- width: 6px;
1911
- height: 6px;
1912
- background: #9ca3af;
1913
- border-radius: 50%;
1914
- animation: messenger-typing-bounce 1.4s infinite ease-in-out;
1915
- }
1916
-
1917
- .messenger-typing-dots span:nth-child(1) {
1918
- animation-delay: -0.32s;
1919
- }
1920
-
1921
- .messenger-typing-dots span:nth-child(2) {
1922
- animation-delay: -0.16s;
1923
- }
1924
-
1925
- .messenger-typing-dots span:nth-child(3) {
1926
- animation-delay: 0s;
1927
- }
1928
-
1929
- .messenger-typing-text {
1930
- font-size: 12px;
1931
- color: #9ca3af;
1932
- }
1933
-
1934
- @keyframes messenger-typing-bounce {
1935
- 0%, 80%, 100% {
1936
- transform: scale(0.8);
1937
- opacity: 0.5;
1938
- }
1939
- 40% {
1940
- transform: scale(1);
1941
- opacity: 1;
1942
- }
1943
- }
1944
-
1945
- /* ========================================
1946
- Pre-Chat Form View (Transparent Overlay)
1947
- ======================================== */
1948
-
1949
- .messenger-prechat-view {
1950
- background: transparent;
1951
- position: relative;
1952
- }
1953
-
1954
- .messenger-prechat-overlay {
1955
- position: absolute;
1956
- top: 0;
1957
- left: 0;
1958
- right: 0;
1959
- bottom: 0;
1960
- background: rgba(0, 0, 0, 0.5);
1961
- backdrop-filter: blur(2px);
1962
- display: flex;
1963
- align-items: flex-end;
1964
- padding: 16px;
1965
- animation: messenger-fade-in 0.2s ease;
1966
- }
1967
-
1968
- .messenger-prechat-card {
1969
- background: #1c1c1e;
1970
- border-radius: 16px;
1971
- padding: 20px;
1972
- width: 100%;
1973
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
1974
- animation: messenger-slide-up 0.25s ease;
1975
- }
1976
-
1977
- .messenger-prechat-card h4 {
1978
- margin: 0 0 14px;
1979
- font-size: 15px;
1980
- font-weight: 600;
1981
- color: white;
1982
- text-align: center;
1983
- }
1984
-
1985
- .messenger-prechat-form {
1986
- display: flex;
1987
- flex-direction: column;
1988
- gap: 10px;
1989
- }
1990
-
1991
- .messenger-prechat-fields {
1992
- display: flex;
1993
- flex-direction: column;
1994
- gap: 8px;
1995
- }
1996
-
1997
- .messenger-prechat-input {
1998
- width: 100%;
1999
- padding: 11px 14px;
2000
- background: #2c2c2e;
2001
- border: 1px solid rgba(255, 255, 255, 0.1);
2002
- border-radius: 10px;
2003
- color: white;
2004
- font-size: 14px;
2005
- font-family: inherit;
2006
- outline: none;
2007
- transition: border-color 0.2s ease;
2008
- }
2009
-
2010
- .messenger-prechat-input:focus {
2011
- border-color: #007aff;
2012
- }
2013
-
2014
- .messenger-prechat-input::placeholder {
2015
- color: rgba(255, 255, 255, 0.4);
2016
- }
2017
-
2018
- .messenger-prechat-error {
2019
- font-size: 12px;
2020
- color: #ef4444;
2021
- display: none;
2022
- text-align: center;
2023
- }
2024
-
2025
- .messenger-prechat-actions {
2026
- display: flex;
2027
- gap: 10px;
2028
- margin-top: 4px;
2029
- }
2030
-
2031
- .messenger-prechat-skip {
2032
- flex: 1;
2033
- padding: 11px 14px;
2034
- background: transparent;
2035
- border: 1px solid rgba(255, 255, 255, 0.2);
2036
- border-radius: 20px;
2037
- color: rgba(255, 255, 255, 0.7);
2038
- font-size: 14px;
2039
- font-weight: 500;
2040
- cursor: pointer;
2041
- transition: all 0.2s ease;
2042
- }
2043
-
2044
- .messenger-prechat-skip:hover {
2045
- background: rgba(255, 255, 255, 0.05);
2046
- border-color: rgba(255, 255, 255, 0.3);
2047
- }
2048
-
2049
- .messenger-prechat-submit {
2050
- flex: 1;
2051
- display: flex;
2052
- align-items: center;
2053
- justify-content: center;
2054
- gap: 6px;
2055
- padding: 11px 14px;
2056
- background: #007aff;
2057
- border: none;
2058
- border-radius: 20px;
2059
- color: white;
2060
- font-size: 14px;
2061
- font-weight: 600;
2062
- cursor: pointer;
2063
- transition: all 0.2s ease;
2064
- }
2065
-
2066
- .messenger-prechat-submit:hover:not(:disabled) {
2067
- background: #0066d6;
2068
- }
2069
-
2070
- .messenger-prechat-submit:disabled {
2071
- background: #3c3c3e;
2072
- color: rgba(255, 255, 255, 0.4);
2073
- cursor: not-allowed;
2074
- }
2075
-
2076
- .messenger-prechat-submit-loading {
2077
- display: inline-flex;
2078
- align-items: center;
2079
- animation: messenger-spin 1s linear infinite;
2080
- }
2081
-
2082
- @keyframes messenger-spin {
2083
- from { transform: rotate(0deg); }
2084
- to { transform: rotate(360deg); }
2085
- }
2086
-
2087
- /* Light Theme - Pre-Chat Form */
2088
- .theme-light .messenger-prechat-overlay {
2089
- background: rgba(255, 255, 255, 0.6);
2090
- }
2091
-
2092
- .theme-light .messenger-prechat-card {
2093
- background: #ffffff;
2094
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
2095
- }
2096
-
2097
- .theme-light .messenger-prechat-card h4 {
2098
- color: #1d1d1f;
2099
- }
2100
-
2101
- .theme-light .messenger-prechat-input {
2102
- background: #f5f5f7;
2103
- border-color: #e5e5e7;
2104
- color: #1d1d1f;
2105
- }
2106
-
2107
- .theme-light .messenger-prechat-input:focus {
2108
- border-color: #007aff;
2109
- background: #ffffff;
2110
- }
2111
-
2112
- .theme-light .messenger-prechat-input::placeholder {
2113
- color: #86868b;
2114
- }
2115
-
2116
- .theme-light .messenger-prechat-skip {
2117
- border-color: #e5e5e7;
2118
- color: #6e6e73;
2119
- }
2120
-
2121
- .theme-light .messenger-prechat-skip:hover {
2122
- background: #f5f5f7;
2123
- }
2124
-
2125
- .theme-light .messenger-prechat-submit:disabled {
2126
- background: #e5e5e7;
2127
- color: #c7c7cc;
2128
- }
2129
-
2130
- /* ========================================
2131
- Animations
2132
- ======================================== */
2133
-
2134
- @keyframes messenger-slide-up {
2135
- from {
2136
- opacity: 0;
2137
- transform: translateY(20px) scale(0.95);
2138
- }
2139
- to {
2140
- opacity: 1;
2141
- transform: translateY(0) scale(1);
2142
- }
2143
- }
2144
-
2145
- @keyframes messenger-fade-in {
2146
- from { opacity: 0; }
2147
- to { opacity: 1; }
2148
- }
2149
-
2150
- /* Reduced motion */
2151
- @media (prefers-reduced-motion: reduce) {
2152
- .messenger-launcher-btn,
2153
- .messenger-panel,
2154
- .messenger-nav-tab,
2155
- .messenger-conversation-item,
2156
- .messenger-help-article,
2157
- .messenger-changelog-card {
2158
- transition: none;
2159
- }
2160
- }
2161
-
2162
- /* ========================================
2163
- Email Collection Overlay (Bottom Sheet)
2164
- ======================================== */
2165
-
2166
- .messenger-email-overlay {
2167
- position: absolute;
2168
- bottom: -56px;
2169
- left: 0;
2170
- right: 0;
2171
- top: 0;
2172
- display: flex;
2173
- align-items: flex-end;
2174
- z-index: 20;
2175
- background: rgba(0, 0, 0, 0.08);
2176
- pointer-events: auto;
2177
- }
2178
-
2179
- .messenger-email-card {
2180
- width: 100%;
2181
- background: #ffffff;
2182
- border-radius: 0;
2183
- padding: 16px 16px 72px;
2184
- box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
2185
- animation: messenger-slide-up 0.25s ease;
2186
- }
2187
-
2188
- .messenger-email-card h4 {
2189
- margin: 0 0 2px;
2190
- font-size: 13px;
2191
- font-weight: 600;
2192
- color: #1d1d1f;
2193
- text-align: center;
2194
- }
2195
-
2196
- .messenger-email-card p {
2197
- margin: 0 0 10px;
2198
- font-size: 11px;
2199
- color: #6b7280;
2200
- text-align: center;
2201
- }
2202
-
2203
- .messenger-email-name,
2204
- .messenger-email-input {
2205
- width: 100%;
2206
- padding: 8px 10px;
2207
- background: #f3f4f6;
2208
- border: 1px solid transparent;
2209
- border-radius: 8px;
2210
- color: #1d1d1f;
2211
- font-size: 12px;
2212
- font-family: inherit;
2213
- outline: none;
2214
- margin-bottom: 6px;
2215
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
2216
- }
2217
-
2218
- .messenger-email-name:focus,
2219
- .messenger-email-input:focus {
2220
- border-color: #007aff;
2221
- box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.12);
2222
- background: #ffffff;
2223
- }
2224
-
2225
- .messenger-email-name::placeholder,
2226
- .messenger-email-input::placeholder {
2227
- color: #9ca3af;
2228
- }
2229
-
2230
- .messenger-email-actions {
2231
- display: flex;
2232
- gap: 8px;
2233
- margin-top: 4px;
2234
- }
2235
-
2236
- .messenger-email-submit {
2237
- flex: 1.2;
2238
- padding: 7px 12px;
2239
- background: #007aff;
2240
- border: none;
2241
- border-radius: 8px;
2242
- color: white;
2243
- font-size: 12px;
2244
- font-weight: 600;
2245
- cursor: pointer;
2246
- transition: all 0.2s ease;
2247
- }
2248
-
2249
- .messenger-email-submit:hover:not(:disabled) {
2250
- background: #0066d6;
2251
- }
2252
-
2253
- .messenger-email-submit:disabled {
2254
- background: #d1d5db;
2255
- color: #9ca3af;
2256
- cursor: not-allowed;
2257
- }
2258
-
2259
- .messenger-email-skip {
2260
- flex: 0.8;
2261
- padding: 7px 12px;
2262
- background: #ffffff;
2263
- border: 1px solid #e5e5e7;
2264
- border-radius: 8px;
2265
- color: #4b5563;
2266
- font-size: 12px;
2267
- font-weight: 500;
2268
- cursor: pointer;
2269
- transition: all 0.2s ease;
2270
- }
2271
-
2272
- .messenger-email-skip:hover {
2273
- background: #f9fafb;
2274
- border-color: #d1d5db;
2275
- }
2276
-
2277
- /* Dark Theme - Email Overlay */
2278
- .theme-dark .messenger-email-overlay {
2279
- background: rgba(0, 0, 0, 0.3);
2280
- }
2281
-
2282
- .theme-dark .messenger-email-card {
2283
- background: #1c1c1e;
2284
- }
2285
-
2286
- .theme-dark .messenger-email-card h4 {
2287
- color: white;
2288
- }
2289
-
2290
- .theme-dark .messenger-email-card p {
2291
- color: rgba(255, 255, 255, 0.6);
2292
- }
2293
-
2294
- .theme-dark .messenger-email-name,
2295
- .theme-dark .messenger-email-input {
2296
- background: #2c2c2e;
2297
- border-color: transparent;
2298
- color: white;
2299
- }
2300
-
2301
- .theme-dark .messenger-email-name:focus,
2302
- .theme-dark .messenger-email-input:focus {
2303
- border-color: #007aff;
2304
- box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.25);
2305
- background: #1c1c1e;
2306
- }
2307
-
2308
- .theme-dark .messenger-email-name::placeholder,
2309
- .theme-dark .messenger-email-input::placeholder {
2310
- color: rgba(255, 255, 255, 0.4);
2311
- }
2312
-
2313
- .theme-dark .messenger-email-submit:disabled {
2314
- background: #3c3c3e;
2315
- color: rgba(255, 255, 255, 0.4);
2316
- }
2317
-
2318
- .theme-dark .messenger-email-skip {
2319
- background: transparent;
2320
- border-color: rgba(255, 255, 255, 0.15);
2321
- color: rgba(255, 255, 255, 0.8);
2322
- }
2323
-
2324
- .theme-dark .messenger-email-skip:hover {
2325
- background: rgba(255, 255, 255, 0.05);
2326
- border-color: rgba(255, 255, 255, 0.25);
2327
- }
2328
- `;