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