| @@ -57,9 +57,10 @@ | ||
| 57 | 57 | color: #555555; |
| 58 | 58 | margin-bottom: 20px; |
| 59 | 59 | } |
| 60 | 60 | |
| 61 | -.email-blocker input[type="email"] { | |
| 61 | +.email-blocker input[type="email"], | |
| 62 | +.email-blocker .mxchat-name-input { | |
| 62 | 63 | width: 100%; |
| 63 | 64 | padding: 12px; |
| 64 | 65 | margin-bottom: 15px; |
| 65 | 66 | border: 1px solid #ddd; |
| @@ -69,9 +70,10 @@ | ||
| 69 | 70 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| 70 | 71 | transition: border-color 0.3s, box-shadow 0.3s; |
| 71 | 72 | } |
| 72 | 73 | |
| 73 | -.email-blocker input[type="email"]:focus { | |
| 74 | +.email-blocker input[type="email"]:focus, | |
| 75 | +.email-blocker .mxchat-name-input:focus { | |
| 74 | 76 | border-color: #0073aa; |
| 75 | 77 | box-shadow: 0 0 8px rgba(0, 115, 170, 0.3); |
| 76 | 78 | outline: none; |
| 77 | 79 | } |
| @@ -170,8 +172,33 @@ | ||
| 170 | 172 | gap: 8px !important; |
| 171 | 173 | margin-bottom: 8px !important; |
| 172 | 174 | } |
| 173 | 175 | |
| 176 | +.bot-message .chat-heading { | |
| 177 | +color: inherit; | |
| 178 | +} | |
| 179 | + | |
| 180 | +div.bot-message h1.chat-heading { | |
| 181 | + font-size: 24px; | |
| 182 | +} | |
| 183 | + | |
| 184 | +div.bot-message h2.chat-heading { | |
| 185 | + font-size: 20px; | |
| 186 | +} | |
| 187 | + | |
| 188 | +div.bot-message h3.chat-heading { | |
| 189 | + font-size: 18px; | |
| 190 | +} | |
| 191 | + | |
| 192 | +div.bot-message h4.chat-heading { | |
| 193 | + font-size: 16px; | |
| 194 | +} | |
| 195 | + | |
| 196 | +div.bot-message h5.chat-heading { | |
| 197 | + font-size: 12px; | |
| 198 | +} | |
| 199 | + | |
| 200 | + | |
| 174 | 201 | .mxchat-site-icon { |
| 175 | 202 | width: 16px !important; |
| 176 | 203 | height: 16px !important; |
| 177 | 204 | flex-shrink: 0 !important; |
| @@ -263,15 +290,14 @@ | ||
| 263 | 290 | } |
| 264 | 291 | |
| 265 | 292 | .active-pdf-name { |
| 266 | 293 | font-size: 11px; |
| 267 | - color: #666; | |
| 268 | 294 | white-space: nowrap; |
| 269 | 295 | overflow: hidden; |
| 270 | 296 | text-overflow: ellipsis; |
| 271 | 297 | } |
| 272 | 298 | |
| 273 | -.remove-pdf-btn { | |
| 299 | +.remove-pdf-btn, .toolbar-perplexity { | |
| 274 | 300 | background: 0 0; |
| 275 | 301 | border: none; |
| 276 | 302 | padding: 2px; |
| 277 | 303 | margin-left: 4px; |
| @@ -279,22 +305,22 @@ | ||
| 279 | 305 | transition: opacity .2s; |
| 280 | 306 | line-height: 13px; |
| 281 | 307 | } |
| 282 | 308 | |
| 283 | -.remove-pdf-btn:hover { | |
| 309 | +.remove-pdf-btn:hover, | |
| 310 | +.toolbar-perplexity:hover, | |
| 311 | +.remove-pdf-btn:active, | |
| 312 | +.toolbar-perplexity:active { | |
| 284 | 313 | opacity: 1; |
| 285 | 314 | background: none; |
| 286 | 315 | } |
| 287 | 316 | |
| 288 | - | |
| 289 | - | |
| 290 | - | |
| 291 | 317 | #mxchat-chatbot .chat-toolbar { |
| 292 | 318 | display: flex; |
| 293 | 319 | gap: 10px; |
| 294 | 320 | padding: 8px; |
| 295 | - border-top: 1px solid #e5e5e5; | |
| 296 | 321 | background: none; |
| 322 | + align-items: end; | |
| 297 | 323 | } |
| 298 | 324 | |
| 299 | 325 | #mxchat-chatbot .toolbar-btn { |
| 300 | 326 | background: none; |
| @@ -302,9 +328,8 @@ | ||
| 302 | 328 | padding: 0px; |
| 303 | 329 | cursor: pointer; |
| 304 | 330 | width: 16px; |
| 305 | 331 | height: 16px; |
| 306 | - display: flex; | |
| 307 | 332 | align-items: center; |
| 308 | 333 | justify-content: center; |
| 309 | 334 | opacity: 0.6; |
| 310 | 335 | transition: opacity 0.2s; |
| @@ -331,8 +356,26 @@ | ||
| 331 | 356 | background: none; |
| 332 | 357 | border: none; |
| 333 | 358 | } |
| 334 | 359 | |
| 360 | +/* Add this to your plugin's CSS */ | |
| 361 | +.toolbar-btn.active { | |
| 362 | + background-color: rgba(120, 115, 245, 0.2); | |
| 363 | + box-shadow: 0 0 0 2px rgba(120, 115, 245, 0.4); | |
| 364 | +} | |
| 365 | + | |
| 366 | + | |
| 367 | +.system-message { | |
| 368 | + padding: 8px 12px; | |
| 369 | + margin: 8px 0; | |
| 370 | + background-color: rgba(120, 115, 245, 0.1); | |
| 371 | + border-radius: 8px; | |
| 372 | + color: #555; | |
| 373 | + font-style: italic; | |
| 374 | + font-size: 14px; | |
| 375 | + text-align: center; | |
| 376 | +} | |
| 377 | + | |
| 335 | 378 | #mxchat-chatbot .spinner { |
| 336 | 379 | animation: rotate 2s linear infinite; |
| 337 | 380 | width: 20px; |
| 338 | 381 | height: 20px; |
| @@ -558,11 +601,21 @@ | ||
| 558 | 601 | |
| 559 | 602 | |
| 560 | 603 | |
| 561 | 604 | #mxchat-popular-questions { |
| 562 | - padding: 10px; | |
| 605 | + padding-top: 0px; | |
| 606 | + padding-left: 10px; | |
| 607 | + padding-right: 10px; | |
| 608 | + padding-bottom: 10px; | |
| 609 | + transition: all 0.3s ease; | |
| 610 | + margin-bottom: 12px; | |
| 611 | + position: relative; | |
| 563 | 612 | } |
| 564 | 613 | |
| 614 | +.user-message p { | |
| 615 | + margin: 0; | |
| 616 | +} | |
| 617 | + | |
| 565 | 618 | .mxchat-popular-questions-title { |
| 566 | 619 | font-size: 14px; |
| 567 | 620 | line-height: 24px; |
| 568 | 621 | font-weight: bold; |
| @@ -570,21 +623,204 @@ | ||
| 570 | 623 | margin-bottom: 10px; |
| 571 | 624 | } |
| 572 | 625 | |
| 573 | 626 | .mxchat-popular-questions-container { |
| 574 | - position: relative; /* Make it the parent for positioning */ | |
| 627 | + position: relative; | |
| 575 | 628 | display: flex; |
| 576 | 629 | flex-direction: column; |
| 577 | 630 | max-height: 200px; |
| 578 | 631 | overflow-y: auto; |
| 632 | + padding-top: 0px; | |
| 633 | + padding-left: 10px; | |
| 579 | 634 | padding-right: 10px; |
| 580 | 635 | padding-bottom: 10px; |
| 581 | - scrollbar-width: thin; /* For Firefox */ | |
| 582 | - scrollbar-color: #212121 #f1f1f1; /* Thumb and track colors */ | |
| 636 | + scrollbar-width: thin; | |
| 637 | + scrollbar-color: #212121 #f1f1f1; | |
| 638 | + transition: all 0.3s ease; | |
| 639 | + gap: 8px; | |
| 583 | 640 | } |
| 584 | 641 | |
| 642 | +/* Collapsed State - just shows a simple button */ | |
| 643 | +#mxchat-popular-questions.collapsed { | |
| 644 | + padding: 0px; | |
| 645 | + margin: 0px; | |
| 646 | +} | |
| 585 | 647 | |
| 586 | -/* Styling the scrollbar for WebKit browsers (Chrome, Safari, etc.) */ | |
| 648 | +#mxchat-popular-questions.collapsed .mxchat-popular-questions-container { | |
| 649 | + flex-direction: row; | |
| 650 | + justify-content: center; | |
| 651 | + align-items: center; | |
| 652 | + padding: 0; | |
| 653 | + max-height: 40px; | |
| 654 | + overflow: visible; | |
| 655 | +} | |
| 656 | + | |
| 657 | +/* Hide questions when collapsed */ | |
| 658 | +#mxchat-popular-questions.collapsed .mxchat-popular-question { | |
| 659 | + display: none; | |
| 660 | +} | |
| 661 | + | |
| 662 | +/* Hide collapse button when collapsed */ | |
| 663 | +#mxchat-popular-questions.collapsed .questions-collapse-btn { | |
| 664 | + display: none; | |
| 665 | +} | |
| 666 | + | |
| 667 | +/* Simple toggle button for expanding - clean up arrow with no background */ | |
| 668 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn { | |
| 669 | + background: none; | |
| 670 | + border: none; | |
| 671 | + padding: 0; | |
| 672 | + margin: 0; | |
| 673 | + cursor: pointer; | |
| 674 | + transition: all 0.2s ease; | |
| 675 | + color: #212121; | |
| 676 | + display: none; /* Hidden by default when open */ | |
| 677 | + align-items: center; | |
| 678 | + justify-content: center; | |
| 679 | + width: 32px; | |
| 680 | + height: 32px; | |
| 681 | + box-shadow: none; | |
| 682 | + outline: none; | |
| 683 | +} | |
| 684 | + | |
| 685 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn:hover { | |
| 686 | + background: none; | |
| 687 | + border: none; | |
| 688 | + box-shadow: none; | |
| 689 | +} | |
| 690 | + | |
| 691 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn:focus { | |
| 692 | + outline: none; | |
| 693 | + background: none; | |
| 694 | + border: none; | |
| 695 | + box-shadow: none; | |
| 696 | +} | |
| 697 | + | |
| 698 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn:active { | |
| 699 | + background: none; | |
| 700 | + border: none; | |
| 701 | + box-shadow: none; | |
| 702 | +} | |
| 703 | + | |
| 704 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn svg { | |
| 705 | + transition: transform 0.2s ease; | |
| 706 | + fill: none; | |
| 707 | + width: 25px; | |
| 708 | + height: 25px; | |
| 709 | +} | |
| 710 | + | |
| 711 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn:hover svg { | |
| 712 | + opacity: 0.7; | |
| 713 | +} | |
| 714 | + | |
| 715 | +/* Show expand button when collapsed - arrow points UP */ | |
| 716 | +#mxchat-popular-questions.collapsed .mxchat-popular-questions-container .questions-toggle-btn { | |
| 717 | + display: flex; | |
| 718 | + align-items: center; | |
| 719 | + justify-content: center; | |
| 720 | +} | |
| 721 | + | |
| 722 | +/* Collapse button for when questions are open - centered at top */ | |
| 723 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn { | |
| 724 | + background: none; | |
| 725 | + border: none; | |
| 726 | + padding: 0; | |
| 727 | + margin: 0px; /* Center and add bottom margin */ | |
| 728 | + cursor: pointer; | |
| 729 | + transition: all 0.2s ease; | |
| 730 | + color: #212121; | |
| 731 | + display: none; /* Hidden by default */ | |
| 732 | + align-items: center; | |
| 733 | + justify-content: center; | |
| 734 | + width: 32px; | |
| 735 | + height: 32px; | |
| 736 | + box-shadow: none; | |
| 737 | + outline: none; | |
| 738 | + align-self: center; /* Center in flex container */ | |
| 739 | + order: -1; /* Make sure it appears first */ | |
| 740 | +} | |
| 741 | + | |
| 742 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn:hover { | |
| 743 | + background: none; | |
| 744 | + border: none; | |
| 745 | + box-shadow: none; | |
| 746 | +} | |
| 747 | + | |
| 748 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn:focus { | |
| 749 | + outline: none; | |
| 750 | + background: none; | |
| 751 | + border: none; | |
| 752 | + box-shadow: none; | |
| 753 | +} | |
| 754 | + | |
| 755 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn:active { | |
| 756 | + background: none; | |
| 757 | + border: none; | |
| 758 | + box-shadow: none; | |
| 759 | +} | |
| 760 | + | |
| 761 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn svg { | |
| 762 | + fill: none; | |
| 763 | + transition: transform 0.2s ease; | |
| 764 | + width: 25px; | |
| 765 | + height: 25px; | |
| 766 | +} | |
| 767 | + | |
| 768 | +#mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn:hover svg { | |
| 769 | + opacity: 0.7; | |
| 770 | +} | |
| 771 | + | |
| 772 | +/* Show collapse button only when it has been previously collapsed */ | |
| 773 | +#mxchat-popular-questions.has-been-collapsed .mxchat-popular-questions-container .questions-collapse-btn { | |
| 774 | + display: flex; | |
| 775 | +} | |
| 776 | + | |
| 777 | +/* Hide collapse button when collapsed */ | |
| 778 | +#mxchat-popular-questions.collapsed .mxchat-popular-questions-container .questions-collapse-btn { | |
| 779 | + display: none; | |
| 780 | +} | |
| 781 | + | |
| 782 | +/* Popular question styles */ | |
| 783 | +#mxchat-popular-questions .mxchat-popular-questions-container .mxchat-popular-question { | |
| 784 | + padding: 12px 20px; | |
| 785 | + background-color: #f5f5f5; | |
| 786 | + border: 1px solid #bbb; | |
| 787 | + border-radius: 8px; | |
| 788 | + color: #212121; | |
| 789 | + font-size: 14px; | |
| 790 | + line-height: 24px; | |
| 791 | + cursor: pointer; | |
| 792 | + text-align: initial; | |
| 793 | + transition: all 0.3s ease; | |
| 794 | + margin-bottom: 0; | |
| 795 | + box-shadow: none; | |
| 796 | +} | |
| 797 | + | |
| 798 | +#mxchat-popular-questions .mxchat-popular-questions-container .mxchat-popular-question:hover { | |
| 799 | + background-color: #eaeaea; | |
| 800 | + border-color: #999; | |
| 801 | + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); | |
| 802 | + color: #212121; | |
| 803 | + transform: translateY(-1px); | |
| 804 | +} | |
| 805 | + | |
| 806 | +#mxchat-popular-questions .mxchat-popular-questions-container .mxchat-popular-question:focus { | |
| 807 | + outline: none; | |
| 808 | + background-color: #e0e0e0; | |
| 809 | + border-color: #777; | |
| 810 | + box-shadow: 0 0 0 3px rgba(100, 149, 237, 0.5); | |
| 811 | + color: #212121; | |
| 812 | +} | |
| 813 | + | |
| 814 | +#mxchat-popular-questions .mxchat-popular-questions-container .mxchat-popular-question:active { | |
| 815 | + background-color: #d8d8d8; | |
| 816 | + border-color: #666; | |
| 817 | + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); | |
| 818 | + color: #212121; | |
| 819 | + transform: translateY(0); | |
| 820 | +} | |
| 821 | + | |
| 822 | +/* Scrollbar styles for WebKit browsers (Chrome, Safari, etc.) */ | |
| 587 | 823 | .mxchat-popular-questions-container::-webkit-scrollbar { |
| 588 | 824 | width: 8px; |
| 589 | 825 | } |
| 590 | 826 | |
| @@ -603,16 +839,16 @@ | ||
| 603 | 839 | } |
| 604 | 840 | |
| 605 | 841 | /* For Firefox */ |
| 606 | 842 | .mxchat-popular-questions-container { |
| 607 | - scrollbar-width: thin; /* Makes the scrollbar thinner */ | |
| 608 | - scrollbar-color: #212121 #f1f1f1; /* Thumb color and track color */ | |
| 843 | + scrollbar-width: thin; | |
| 844 | + scrollbar-color: #212121 #f1f1f1; | |
| 609 | 845 | } |
| 610 | 846 | |
| 611 | 847 | /* For Edge and other modern browsers */ |
| 612 | 848 | .mxchat-popular-questions-container { |
| 613 | - -ms-overflow-style: none; /* Removes the default scrollbars for Edge */ | |
| 614 | - scrollbar-gutter: stable; /* Prevent layout shifting */ | |
| 849 | + -ms-overflow-style: none; | |
| 850 | + scrollbar-gutter: stable; | |
| 615 | 851 | } |
| 616 | 852 | |
| 617 | 853 | /* For a more uniform cross-browser look */ |
| 618 | 854 | .mxchat-popular-questions-container { |
| @@ -619,45 +855,11 @@ | ||
| 619 | 855 | overflow: auto; |
| 620 | 856 | overscroll-behavior: contain; |
| 621 | 857 | } |
| 622 | 858 | |
| 623 | -.mxchat-popular-question { | |
| 624 | - padding: 12px 20px; | |
| 625 | - background-color: #f5f5f5; /* Darker background for better contrast */ | |
| 626 | - border: 1px solid #bbb; /* Darker border for better visibility */ | |
| 627 | - border-radius: 8px; | |
| 628 | - color: #212121; | |
| 629 | - font-size: 14px; | |
| 630 | - line-height: 24px; | |
| 631 | - cursor: pointer; | |
| 632 | - text-align: left; | |
| 633 | - transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; | |
| 634 | - margin-bottom: 10px; | |
| 635 | -} | |
| 636 | 859 | |
| 637 | -.mxchat-popular-question:hover { | |
| 638 | - background-color: #eaeaea; /* Slightly darker on hover */ | |
| 639 | - border-color: #999; /* Darker border on hover */ | |
| 640 | - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Slightly darker shadow on hover */ | |
| 641 | - color: #212121; | |
| 642 | -} | |
| 643 | 860 | |
| 644 | -.mxchat-popular-question:focus { | |
| 645 | - outline: none; | |
| 646 | - background-color: #e0e0e0; /* Darker background on focus */ | |
| 647 | - border-color: #777; /* More prominent focus border */ | |
| 648 | - box-shadow: 0 0 0 3px rgba(100, 149, 237, 0.5); /* Subtle focus ring */ | |
| 649 | - color: #212121; | |
| 650 | -} | |
| 651 | 861 | |
| 652 | -.mxchat-popular-question:active { | |
| 653 | - background-color: #d8d8d8; /* Darker pressed background */ | |
| 654 | - border-color: #666; /* Darker border when pressed */ | |
| 655 | - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); /* Slightly darker pressed effect */ | |
| 656 | - color: #212121; | |
| 657 | -} | |
| 658 | - | |
| 659 | - | |
| 660 | 862 | #widget_icon, #widget_icon_2, #widget_icon_3, #widget_icon_5, #widget_icon_4, #widget_icon_6, #widget_icon_7 { |
| 661 | 863 | padding: 10px; |
| 662 | 864 | } |
| 663 | 865 | |
| @@ -696,9 +898,8 @@ | ||
| 696 | 898 | margin-bottom: 10px; |
| 697 | 899 | } |
| 698 | 900 | |
| 699 | 901 | #mxchat-chatbot { |
| 700 | - max-width: 800px; | |
| 701 | 902 | overflow: hidden; |
| 702 | 903 | position: relative; |
| 703 | 904 | display: flex; |
| 704 | 905 | flex-direction: column; |
| @@ -746,14 +947,13 @@ | ||
| 746 | 947 | text-align: left; |
| 747 | 948 | float: right; |
| 748 | 949 | clear: both; |
| 749 | 950 | border-radius: 18px 0 18px 18px; |
| 750 | - border: solid 1px #212121; | |
| 751 | - word-wrap: break-word; | |
| 951 | + word-wrap: break-word; | |
| 952 | + border: 1px solid rgba(226, 232, 255, .2); | |
| 752 | 953 | } |
| 753 | 954 | |
| 754 | 955 | #mxchat-chatbot #chat-container #chat-box .bot-message { |
| 755 | - text-align: left; | |
| 756 | 956 | float: left; |
| 757 | 957 | clear: both; |
| 758 | 958 | border: 1px solid rgba(226, 232, 255, .2); |
| 759 | 959 | border-radius: 0 18px 18px; |
| @@ -777,9 +977,12 @@ | ||
| 777 | 977 | align-items: center; |
| 778 | 978 | padding-right: 40px; |
| 779 | 979 | border: 1px solid #ccc; |
| 780 | 980 | border-radius: 10px; |
| 781 | - margin: 10px; | |
| 981 | + margin-top: 0px; | |
| 982 | + margin-left: 10px; | |
| 983 | + margin-right: 10px; | |
| 984 | + margin-bottom: 10px; | |
| 782 | 985 | } |
| 783 | 986 | |
| 784 | 987 | #mxchat-chatbot #chat-container #input-container #chat-input { |
| 785 | 988 | flex-grow: 1; |
| @@ -797,8 +1000,9 @@ | ||
| 797 | 1000 | border-radius: 5px; |
| 798 | 1001 | box-sizing: border-box; |
| 799 | 1002 | padding: 0.4em 0.5em; |
| 800 | 1003 | outline: none; |
| 1004 | + border-radius: 10px; | |
| 801 | 1005 | } |
| 802 | 1006 | |
| 803 | 1007 | /* Styling the scrollbar for WebKit browsers (Chrome, Safari, etc.) */ |
| 804 | 1008 | #chat-input::-webkit-scrollbar { |
| @@ -994,8 +1198,9 @@ | ||
| 994 | 1198 | background: 0 0; |
| 995 | 1199 | border: none; |
| 996 | 1200 | opacity: .8; |
| 997 | 1201 | padding: 0px; |
| 1202 | + min-width: 20px; | |
| 998 | 1203 | } |
| 999 | 1204 | |
| 1000 | 1205 | .exit-chat { |
| 1001 | 1206 | border: none; |
| @@ -1030,52 +1235,81 @@ | ||
| 1030 | 1235 | #mxchat-chatbot-wrapper .chatbot-footer .powered-by span { |
| 1031 | 1236 | text-decoration: underline; |
| 1032 | 1237 | } |
| 1033 | 1238 | |
| 1034 | -.thinking-dots-container { | |
| 1239 | +#chat-box .bot-message.temporary-message .thinking-dots-container { | |
| 1035 | 1240 | display: flex; |
| 1036 | 1241 | justify-content: center; |
| 1037 | 1242 | align-items: center; |
| 1038 | 1243 | overflow: hidden; |
| 1039 | - height: 20px; /* Adjust as needed */ | |
| 1244 | + height: 20px; | |
| 1245 | + position: relative; | |
| 1246 | + z-index: 1; | |
| 1247 | + flex-shrink: 0; | |
| 1040 | 1248 | } |
| 1041 | 1249 | |
| 1042 | -.thinking-dots { | |
| 1250 | +#chat-box .bot-message.temporary-message .thinking-dots { | |
| 1043 | 1251 | display: flex; |
| 1044 | 1252 | justify-content: center; |
| 1045 | 1253 | align-items: center; |
| 1046 | 1254 | height: 90%; |
| 1255 | + gap: 5px; | |
| 1256 | + flex-shrink: 0; | |
| 1047 | 1257 | } |
| 1048 | 1258 | |
| 1049 | -.dot { | |
| 1050 | - height: 8px; | |
| 1051 | - width: 8px; | |
| 1259 | +#chat-box .bot-message.temporary-message .thinking-dots .dot { | |
| 1260 | + height: 6px; | |
| 1261 | + width: 6px; | |
| 1052 | 1262 | margin: 0 3px; |
| 1053 | 1263 | background-color: #fff; |
| 1054 | 1264 | border-radius: 50%; |
| 1055 | 1265 | display: inline-block; |
| 1266 | + position: static; | |
| 1267 | + right: auto; | |
| 1268 | + top: auto; | |
| 1269 | + text-align: initial; | |
| 1270 | + color: transparent; | |
| 1271 | + font-size: 0; | |
| 1272 | + font-weight: normal; | |
| 1273 | + line-height: normal; | |
| 1274 | + font-style: normal; | |
| 1056 | 1275 | animation: bounce 1.4s ease-in-out infinite both; |
| 1276 | + -webkit-animation: bounce 1.4s ease-in-out infinite both; | |
| 1277 | + -moz-animation: bounce 1.4s ease-in-out infinite both; | |
| 1278 | + -o-animation: bounce 1.4s ease-in-out infinite both; | |
| 1279 | + vertical-align: middle; | |
| 1057 | 1280 | } |
| 1058 | 1281 | |
| 1059 | -.dot:first-child { | |
| 1060 | - animation-delay: -.32s; | |
| 1282 | +#chat-box .bot-message.temporary-message .thinking-dots .dot:first-child { | |
| 1283 | + animation-delay: -0.32s; | |
| 1284 | + -webkit-animation-delay: -0.32s; | |
| 1285 | + -moz-animation-delay: -0.32s; | |
| 1286 | + -o-animation-delay: -0.32s; | |
| 1061 | 1287 | } |
| 1062 | 1288 | |
| 1063 | -.dot:nth-child(2) { | |
| 1064 | - animation-delay: -.16s; | |
| 1289 | +#chat-box .bot-message.temporary-message .thinking-dots .dot:nth-child(2) { | |
| 1290 | + animation-delay: -0.16s; | |
| 1291 | + -webkit-animation-delay: -0.16s; | |
| 1292 | + -moz-animation-delay: -0.16s; | |
| 1293 | + -o-animation-delay: -0.16s; | |
| 1065 | 1294 | } |
| 1066 | 1295 | |
| 1067 | 1296 | @keyframes bounce { |
| 1068 | 1297 | 0%, 100%, 80% { |
| 1069 | 1298 | transform: scale(1); |
| 1299 | + -webkit-transform: scale(1); | |
| 1300 | + -moz-transform: scale(1); | |
| 1301 | + -o-transform: scale(1); | |
| 1070 | 1302 | } |
| 1071 | 1303 | 40% { |
| 1072 | 1304 | transform: scale(1.5); |
| 1305 | + -webkit-transform: scale(1.5); | |
| 1306 | + -moz-transform: scale(1.5); | |
| 1307 | + -o-transform: scale(1.5); | |
| 1073 | 1308 | } |
| 1074 | 1309 | } |
| 1075 | 1310 | |
| 1076 | 1311 | |
| 1077 | - | |
| 1078 | 1312 | #pre-chat-message { |
| 1079 | 1313 | position: fixed; |
| 1080 | 1314 | bottom: 85px; |
| 1081 | 1315 | right: 30px; |
| @@ -1103,8 +1337,10 @@ | ||
| 1103 | 1337 | font-size: 14px; |
| 1104 | 1338 | cursor: pointer; |
| 1105 | 1339 | border-radius: 50%; |
| 1106 | 1340 | width: 20px; |
| 1341 | + min-width: 20px; | |
| 1342 | + min-height: 20px; | |
| 1107 | 1343 | height: 20px; |
| 1108 | 1344 | display: flex; |
| 1109 | 1345 | align-items: center; |
| 1110 | 1346 | justify-content: center; |
| @@ -1115,8 +1351,29 @@ | ||
| 1115 | 1351 | |
| 1116 | 1352 | |
| 1117 | 1353 | |
| 1118 | 1354 | @media (max-width: 550px) { |
| 1355 | + | |
| 1356 | + | |
| 1357 | + #mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn { | |
| 1358 | + width: 28px; | |
| 1359 | + height: 28px; | |
| 1360 | + } | |
| 1361 | + | |
| 1362 | + #mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn svg { | |
| 1363 | + width: 22px; | |
| 1364 | + height: 22px; | |
| 1365 | + } | |
| 1366 | + | |
| 1367 | + #mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn { | |
| 1368 | + width: 28px; | |
| 1369 | + height: 28px; | |
| 1370 | + } | |
| 1371 | + | |
| 1372 | + #mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn svg { | |
| 1373 | + width: 22px; | |
| 1374 | + height: 22px; | |
| 1375 | + } | |
| 1119 | 1376 | |
| 1120 | 1377 | #pre-chat-message { |
| 1121 | 1378 | bottom: 70px; /* Adjust this value as needed */ |
| 1122 | 1379 | right: 15px; /* Adjust this value as needed */ |
| @@ -1165,6 +1422,37 @@ | ||
| 1165 | 1422 | } |
| 1166 | 1423 | |
| 1167 | 1424 | |
| 1168 | 1425 | |
| 1426 | +/* Simplified styles for Perplexity status indicator */ | |
| 1427 | +#active-perplexity-container { | |
| 1428 | + display: flex; | |
| 1429 | + align-items: center; | |
| 1430 | + margin-left: 8px; | |
| 1431 | + font-size: 12px; | |
| 1432 | +} | |
| 1169 | 1433 | |
| 1434 | +#perplexity-search-btn { | |
| 1435 | + display: none; | |
| 1436 | +} | |
| 1170 | 1437 | |
| 1438 | +#perplexity-search-btn.active { | |
| 1439 | + opacity: 1; | |
| 1440 | +} | |
| 1441 | + | |
| 1442 | + | |
| 1443 | + | |
| 1444 | + | |
| 1445 | + | |
| 1446 | + | |
| 1447 | +.bot-message a { | |
| 1448 | + color: #ffffff; | |
| 1449 | + text-decoration: underline !important; | |
| 1450 | +} | |
| 1451 | +.bot-message a:hover { | |
| 1452 | + color: #e0e0e0; | |
| 1453 | + text-decoration: underline; | |
| 1454 | +} | |
| 1455 | + | |
| 1456 | +.bot-message a:visited { | |
| 1457 | + color: #ffffff; | |
| 1458 | +} | |
