PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.3.8
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.3.8
8.7.7 8.7.6 8.7.5 8.7.4 8.7.3 8.7.2 8.7.1 8.7.0 8.6.9 8.6.8 8.6.7 8.6.6 8.6.5 8.6.4 8.6.2 8.6.1 8.6.0 8.5.9 8.5.8 8.5.7 8.5.6 8.5.5 8.5.4 8.5.3 8.5.2 All 533 releases
← All changes | css/admin-style.css +21 -1000 8.7.68.3.8 View file →
@@ -11,11 +11,11 @@
11 11 .wp-chatbot-wrap .fa{
12 12 font: normal normal normal 14px / 1 FontAwesome !important;
13 13 }
14 14
15 -/* .chatbot-wpbot-lite_page_wpbot, .chatbot-wpbot-lite_page_wpbot_help_page, .chatbot-wpbot-lite_page_wpbot_openAi, .toplevel_page_wpbot-panel{
15 +.chatbot-wpbot-lite_page_wpbot, .chatbot-wpbot-lite_page_wpbot_help_page, .chatbot-wpbot-lite_page_wpbot_openAi, .toplevel_page_wpbot-panel{
16 16 background-color: #F5F7FD;
17 -} */
17 +}
18 18
19 19 .qcld-main-wrapper .h1,
20 20 .qcld-main-wrapper .h2,
21 21 .qcld-main-wrapper .h3,
@@ -996,59 +996,8 @@
996 996 .lp-submenu-wpbot_openAi .swal2-actions {
997 997 display: flex;
998 998 width: auto;
999 999 }
1000 -
1001 -/* Icon-only centered loading overlay for Save settings */
1002 -.swal2-popup.qcld-swal-loading-only {
1003 - background: transparent !important;
1004 - box-shadow: none !important;
1005 - padding: 0 !important;
1006 - width: auto !important;
1007 - min-width: 0 !important;
1008 -}
1009 -.swal2-popup.qcld-swal-loading-only .swal2-header,
1010 -.swal2-popup.qcld-swal-loading-only .swal2-title,
1011 -.swal2-popup.qcld-swal-loading-only .swal2-actions,
1012 -.swal2-popup.qcld-swal-loading-only .swal2-footer,
1013 -.swal2-popup.qcld-swal-loading-only .swal2-close {
1014 - display: none !important;
1015 -}
1016 -.swal2-popup.qcld-swal-loading-only .swal2-html-container {
1017 - margin: 0 !important;
1018 - padding: 0 !important;
1019 - overflow: visible !important;
1020 - color: transparent !important;
1021 -}
1022 -.qcld-save-settings-spinner {
1023 - position: relative;
1024 - width: 56px;
1025 - height: 56px;
1026 - margin: 0 auto;
1027 -}
1028 -.qcld-save-settings-spinner::before,
1029 -.qcld-save-settings-spinner::after {
1030 - content: '';
1031 - position: absolute;
1032 - inset: 0;
1033 - border-radius: 50%;
1034 - border: 4px solid transparent;
1035 -}
1036 -.qcld-save-settings-spinner::before {
1037 - border-top-color: #8b5cf6;
1038 - border-right-color: #8b5cf6;
1039 - animation: qcld-save-settings-spin 0.9s linear infinite;
1040 -}
1041 -.qcld-save-settings-spinner::after {
1042 - inset: 8px;
1043 - border-bottom-color: #ffffff;
1044 - border-left-color: #ffffff;
1045 - animation: qcld-save-settings-spin 0.7s linear infinite reverse;
1046 -}
1047 -@keyframes qcld-save-settings-spin {
1048 - 0% { transform: rotate(0deg); }
1049 - 100% { transform: rotate(360deg); }
1050 -}
1051 1000 .lp-submenu-wpbot_openAi button.swal2-confirm.btn.btn-lg.swal2-styled{
1052 1001 width: auto !important;
1053 1002 }
1054 1003
@@ -1163,12 +1112,12 @@
1163 1112
1164 1113 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container {
1165 1114 display: flex;
1166 1115 justify-content: flex-start;
1167 - padding: 8px 20px;
1116 + padding: 20px;
1168 1117 border-radius: 16px;
1169 1118 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
1170 - margin: 20px 0 0 0;
1119 + margin: 20px 0 20px 0;
1171 1120 gap: 30px;
1172 1121 }
1173 1122
1174 1123 .admin-maxwith.qcld-openai-main-box .tab-content {
@@ -1536,163 +1485,17 @@
1536 1485 }
1537 1486
1538 1487
1539 1488 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container h4 {
1540 - width: 365px;
1489 + width: 396px;
1541 1490 }
1542 1491
1543 1492 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container select {
1544 - display: none;
1493 + border-color: #ffffff;
1494 + width: 220px;
1545 1495 }
1546 1496
1547 -/* Avatar Location Selector */
1548 -.avatar-location-wrapper {
1549 - background: #ffffff;
1550 - border-radius: 12px;
1551 - padding: 0 0 25px 0;
1552 - margin: 0 0 0 0;
1553 -}
1554 1497
1555 -.avatar-location-title {
1556 - font-size: 13px;
1557 - font-weight: 600;
1558 - color: #6B7280;
1559 - margin: 0 0 10px 0;
1560 - text-transform: none;
1561 - letter-spacing: 0;
1562 -}
1563 -
1564 -.avatar-location-cards {
1565 - display: inline-flex;
1566 - gap: 0;
1567 - background: #F3F4F6;
1568 - border-radius: 10px;
1569 - padding: 4px;
1570 -}
1571 -
1572 -.avatar-location-card {
1573 - display: flex;
1574 - align-items: center;
1575 - gap: 6px;
1576 - padding: 8px 18px;
1577 - border-radius: 8px;
1578 - cursor: pointer;
1579 - font-size: 13px;
1580 - font-weight: 500;
1581 - color: #6B7280;
1582 - background: transparent;
1583 - border: none;
1584 - transition: all 0.2s ease;
1585 - user-select: none;
1586 -}
1587 -
1588 -.avatar-location-card:hover {
1589 - color: #374151;
1590 - background: #E5E7EB;
1591 -}
1592 -
1593 -.avatar-location-card.active {
1594 - background: #ffffff;
1595 - color: #111827;
1596 - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
1597 -}
1598 -
1599 -.avatar-location-card svg {
1600 - flex-shrink: 0;
1601 - color: inherit;
1602 -}
1603 -
1604 -.avatar-location-card.active svg {
1605 - color: #4B5563;
1606 -}
1607 -
1608 -/* AI Provider Cards Wrapper */
1609 -.ai-provider-cards-wrapper {
1610 - background: #ffffff;
1611 - border-radius: 12px;
1612 - padding: 20px 24px 20px 6px;
1613 - margin: 0 0 0 0;
1614 -}
1615 -
1616 -.ai-provider-cards {
1617 - display: flex;
1618 - gap: 12px;
1619 - flex-wrap: wrap;
1620 - padding: 4px 0;
1621 -}
1622 -
1623 -.ai-provider-card {
1624 - display: flex;
1625 - flex-direction: column;
1626 - align-items: center;
1627 - justify-content: center;
1628 - gap: 8px;
1629 - padding: 8px 12px;
1630 - min-width: 110px;
1631 - background: #ffffff;
1632 - border: 2px solid #E5E7EB;
1633 - border-radius: 12px;
1634 - cursor: pointer;
1635 - position: relative;
1636 - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1637 - user-select: none;
1638 -}
1639 -
1640 -.ai-provider-card:hover {
1641 - border-color: #93C5FD;
1642 - background: #F0F7FF;
1643 - transform: translateY(-2px);
1644 - box-shadow: 0 4px 12px rgba(37, 99, 235, 0.10);
1645 -}
1646 -
1647 -.ai-provider-card.active {
1648 - border-color: #2563EB;
1649 - background: #EFF6FF;
1650 - box-shadow: 0 2px 8px rgba(37, 99, 235, 0.13);
1651 -}
1652 -
1653 -.ai-provider-check {
1654 - position: absolute;
1655 - top: 6px;
1656 - right: 6px;
1657 - opacity: 0;
1658 - transform: scale(0.5);
1659 - transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1660 - line-height: 0;
1661 -}
1662 -
1663 -.ai-provider-card.active .ai-provider-check {
1664 - opacity: 1;
1665 - transform: scale(1);
1666 -}
1667 -
1668 -.ai-provider-icon {
1669 - width: 40px;
1670 - height: 40px;
1671 - display: flex;
1672 - align-items: center;
1673 - justify-content: center;
1674 -}
1675 -
1676 -.ai-provider-icon svg {
1677 - width: 32px;
1678 - height: 32px;
1679 -}
1680 -
1681 -.ai-provider-name {
1682 - font-size: 12px;
1683 - font-weight: 600;
1684 - color: #4B5563;
1685 - text-align: center;
1686 - white-space: nowrap;
1687 - line-height: 1.2;
1688 -}
1689 -
1690 -.ai-provider-card.active .ai-provider-name {
1691 - color: #1E40AF;
1692 -}
1693 -
1694 -
1695 1498 .admin-maxwith.qcld-openai-main-box .tab-content div#wp-chatbot-openai-training-model .row.my-4 {
1696 1499 font-size: 15px;
1697 1500 display: flex;
1698 1501 width: 100%;
@@ -2447,9 +2250,9 @@
2447 2250 font-weight: bold;
2448 2251 }
2449 2252
2450 2253 #qcld-show-more-wrapper-box .qcld-show-more-show-more-height {
2451 - height: 338px;
2254 + height: 190px;
2452 2255 overflow:hidden;
2453 2256 }
2454 2257
2455 2258 #qcld-show-more-wrapper-box .qcld-show-more-show-more i {
@@ -2558,56 +2361,8 @@
2558 2361 textarea#qcld_openai_system_content {
2559 2362 height: 120px;
2560 2363 line-height: 28px;
2561 2364 }
2562 -.qcld-openai-system-presets {
2563 - display: flex;
2564 - gap: 10px;
2565 - margin: 12px 0;
2566 - overflow-x: auto;
2567 - padding-bottom: 8px;
2568 - scroll-snap-type: x proximity;
2569 - flex-wrap: wrap;
2570 -}
2571 -.qcld-openai-system-preset {
2572 - align-items: center;
2573 - border: 1px solid #dcdcde;
2574 - border-radius: 6px;
2575 - cursor: pointer;
2576 - display: flex;
2577 - flex: 0 0 220px;
2578 - gap: 10px;
2579 - justify-content: center;
2580 - margin: 0;
2581 - min-height: 70px;
2582 - padding: 12px;
2583 - scroll-snap-align: start;
2584 - text-align: center;
2585 -}
2586 -.qcld-openai-system-preset input {
2587 - display: none;
2588 -}
2589 -.qcld-openai-system-preset.is-selected {
2590 - background: #f0f6fc;
2591 - border-color: #2271b1;
2592 -}
2593 -.qcld-openai-system-preset-content {
2594 - display: grid;
2595 - gap: 4px;
2596 - line-height: 22px;
2597 -}
2598 -.qcld-openai-system-preset-title {
2599 - color: #1d2327;
2600 - font-weight: 600;
2601 -}
2602 -.qcld-openai-system-preset-value {
2603 - display: none;
2604 -}
2605 -@media (max-width: 782px) {
2606 - .qcld-openai-system-preset {
2607 - flex-basis: 180px;
2608 - }
2609 -}
2610 2365 .qcld-main-wrapper .alert.alert-warning {
2611 2366 background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96% 96%);
2612 2367 border-radius: 6px;
2613 2368 color: #721c24;
@@ -2906,8 +2661,9 @@
2906 2661 display: block;
2907 2662 width: 18px;
2908 2663 height: 18px;
2909 2664 }
2665 +
2910 2666 div#wp-chatbot-openai-rag input[type=checkbox]+label {
2911 2667 margin-bottom: 0;
2912 2668 }
2913 2669 .qcl-openai input[type=checkbox]+label {
@@ -2915,8 +2671,9 @@
2915 2671 }
2916 2672 div#qcld-rag-settings-tab .wrap .mb-3 {
2917 2673 padding: 5px 0;
2918 2674 }
2675 +
2919 2676 div#rag-database input#search-submit {
2920 2677 background: #5b4e96;
2921 2678 color: #fff;
2922 2679 border-color: #5b4e96;
@@ -2925,8 +2682,9 @@
2925 2682 display: flex;
2926 2683 flex-direction: column;
2927 2684 gap: 6px;
2928 2685 }
2686 +
2929 2687 div#wp-chatbot-gemini-settings .input-group {
2930 2688 display: flex;
2931 2689 gap: 10px;
2932 2690 }
@@ -2935,8 +2693,9 @@
2935 2693 color: #ffffff;
2936 2694 border: none;
2937 2695 padding: 12px 30px;
2938 2696 }
2697 +
2939 2698 button#qcld_gemini_fetch_models {
2940 2699 background: #5B4E96;
2941 2700 color: #ffffff;
2942 2701 border: none;
@@ -2950,13 +2709,15 @@
2950 2709 margin: 0 0 6px 0;
2951 2710 padding: 0 4px;
2952 2711 min-width: 220px;
2953 2712 }
2713 +
2954 2714 select#qcld_language_center_select:focus {
2955 2715 border-color: #5b4e96;
2956 2716 color: #5b4e96;
2957 2717 box-shadow: 0 0 0 1px #5b4e96;
2958 2718 }
2719 +
2959 2720 div#common-ai-settings h2 a {
2960 2721 background: #5B4E96;
2961 2722 color: #ffffff;
2962 2723 display: inline-block !important;
@@ -2961,10 +2722,11 @@
2961 2722 color: #ffffff;
2962 2723 display: inline-block !important;
2963 2724 font-size: 16px;
2964 2725 padding: 8px 15px;
2965 - border-radius: 8px;
2726 + border-radius: 8px;
2966 2727 }
2728 +
2967 2729 div#common-ai-settings h2.nav-tab-wrapper {
2968 2730 border: none;
2969 2731 }
2970 2732 div#qcld-rate-settings-tab {
@@ -2980,12 +2742,14 @@
2980 2742 width: 1.5rem;
2981 2743 height: 1.5rem;
2982 2744 margin: -1px 0 0 -1px;
2983 2745 }
2746 +
2984 2747 .cxsc-settings-blocks.cxsc-settings-blocks-style .radio-inline input[type=radio] {
2985 2748 width: 1.5rem;
2986 2749 height: 1.5rem;
2987 2750 }
2751 +
2988 2752 button#rag-docx-submit, button#rag-migrate-btn, button#rag-media-docx-btn, button#qcld-rag-list-docx-btn, button#rag-media-pdf-btn, button#qcld-rag-list-pdf-btn {
2989 2753 padding: 8px 15px;
2990 2754 width: auto;
2991 2755 font-size: 16px;
@@ -3001,753 +2765,10 @@
3001 2765 text-decoration: none;
3002 2766 border-color: #5b4e96 !important;
3003 2767 line-height: normal;
3004 2768 }
2769 +
2770 +
3005 2771 button#botmaster_submit_googlesheet_btn, button#botmaster_submit_googledoc_btn {
3006 2772 background: #5B4E96;
3007 2773 border-color: #5B4E96;
3008 -}
3009 -.wpbot-wizard-field select#wizard_ai_provider {
3010 - background: transparent;
3011 - color: #fff;
3012 - width: 100%;
3013 - display: block;
3014 - max-width: unset;
3015 -}
3016 -.wpbot-wizard-field select#wizard_ai_provider:hover {
3017 - border-color: #5b4e96;
3018 - color: #5b4e96;
3019 - box-shadow: 0 0 0 1px #5b4e96;
3020 -}
3021 -div#wizard_api_key_container input#wizard_api_key {
3022 - background: transparent;
3023 - color: #fff;
3024 -}
3025 -div#collapseTwoControl input[type=radio]:checked::before {
3026 - background-color: #5b4e96;
3027 -}
3028 -.nav-tab-wrapper.sld_nav_container.wppt_nav_container.qcld_help_wppt_nav_container{
3029 - width: 320px !important;
3030 - gap: 0;
3031 -}
3032 -div#rag-settings tbody#rag-knowledge-base-list tr td button {
3033 - padding: 6px 20px;
3034 - font-weight: bold;
3035 - font-size: 12px;
3036 -}
3037 -div#rag-settings tbody#rag-knowledge-base-list tr td button.button.button-small.button-link-delete.rag-delete-doc{
3038 - background: #d14529;
3039 - color: #fff;
3040 - border-color: #d14529;
3041 -}
3042 -button#ai-knowledge-base-tab {
3043 - animation: pulse 2s infinite;
3044 -}
3045 -@keyframes pulse {
3046 - 0% {
3047 - transform: scale(1);
3048 - }
3049 - 50% {
3050 - transform: scale(1.05);
3051 - }
3052 - 100% {
3053 - transform: scale(1);
3054 - }
3055 -}
3056 -footer.wp-chatbot-admin-footer input#submit {
3057 - background: #5b4e96;
3058 - padding: 12px 30px;
3059 -}
3060 -footer.wp-chatbot-admin-footer {
3061 - padding: 0 20px 20px 20px;
3062 - margin: 0 20px;
3063 -}
3064 -.qcld-wp-chatbot-wrap-header_inn a.button.page-title-action {
3065 - padding: 8px 15px;
3066 - background: #ffffff;
3067 - color: #5B4E96;
3068 - border: 2px solid #5B4E96;
3069 - border-radius: 6px;
3070 - font-weight: bold;
3071 - position: absolute;
3072 - top: 30px;
3073 - left: 280px;
3074 - line-height: normal;
3075 - min-height: unset;
3076 -}
3077 -.qcld-wp-chatbot-wrap-header_inn a.button.page-title-action:hover {
3078 - padding: 8px 15px;
3079 - background: #5B4E96;
3080 - color: #fff;
3081 - border: 2px solid #5B4E96;
3082 - border-radius: 6px;
3083 - font-weight: bold;
3084 - position: absolute;
3085 - top: 31px;
3086 - left: 280px;
3087 -}
3088 -.qcld-session-history_menu_box .btn.btn-primary {
3089 - background: #564a8e !important;
3090 - color: #fff !important;
3091 -}
3092 -.qcld-session-history_menu_box a.btn.btn-success {
3093 - padding: 8px 24px;
3094 - width: auto;
3095 - font-size: 15px;
3096 - font-weight: 500;
3097 - border-radius: 8px;
3098 - position: relative;
3099 - background: #ffffff;
3100 - color: #564a8e;
3101 - text-decoration: none;
3102 - line-height: normal;
3103 - border: 2px solid #564a8e;
3104 -}
3105 -.qcld-session-history_menu_box a.btn.btn-success:hover {
3106 - padding: 8px 24px;
3107 - width: auto;
3108 - font-size: 15px;
3109 - font-weight: 500;
3110 - border-radius: 8px;
3111 - position: relative;
3112 - background: #564a8e;
3113 - color: #fff;
3114 - text-decoration: none;
3115 - line-height: normal;
3116 - border: 2px solid #564a8e;
3117 -}
3118 -.Expandmore {
3119 - background: #23ab10;
3120 - display: inline-block;
3121 - padding: 4px 10px;
3122 - font-size: 14px;
3123 - border-radius: 6px;
3124 - position: relative;
3125 - top: -15px;
3126 -}
3127 -.Collapsemore {
3128 - background: #ff0000;
3129 - display: inline-block;
3130 - padding: 4px 10px;
3131 - font-size: 14px;
3132 - border-radius: 6px;
3133 - position: relative;
3134 - top: -15px;
3135 -}
3136 -.Expandmore span {
3137 - color: #fff;
3138 - margin: 0 0 0 8px;
3139 - padding: 0 5px;
3140 - font-size: 18px;
3141 -}
3142 -.admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container {
3143 - display: flex;
3144 - justify-content: flex-start;
3145 - align-items: center;
3146 -}
3147 -.avatar-location-wrapper {
3148 - padding: 0 0 25px 0;
3149 -}
3150 -.avatar-location-card.active {
3151 - background: #5b4e96;
3152 - color: #ffffff;
3153 -}
3154 -.avatar-location-card.active svg {
3155 - color: #ffffff;
3156 -}
3157 -.ai-provider-cards {
3158 - margin: 0 0 0 0%;
3159 -}
3160 -.qcld-wp-chatbot-wrap-header_inn_heading a.button.page-title-action {
3161 - margin: 0 0 0 4px;
3162 -}
3163 -label.qcld_label_width_full.qcld_label_width_half {
3164 - font-size: 12px;
3165 - padding: 6px 0 0 0;
3166 -}
3167 -.qc_menu_setup_area {
3168 - margin: 40px 0 0 0;
3169 -}
3170 -input#chatbot_content_max_height, input#chatbot_content_max_height_responsive {
3171 - width: 170px;
3172 - border: 1px solid #eee;
3173 - border-radius: 6px;
3174 -}
3175 -.ai-provider-cards-wrapper h4 {
3176 - width: 410px;
3177 -}
3178 -.ai-provider-cards-wrapper {
3179 - display: flex;
3180 -}
3181 -
3182 -/* AI Actions page — match WPBot Control Panel layout */
3183 -body.chatbot-wpbot-lite_page_wpbot_ai_actions,
3184 -body.chatbot-wpbot-lite_page_wbcs-botsessions-page,
3185 -body.wpbot-panel_page_wbcs-botsessions-page {
3186 - background-color: #F5F7FD;
3187 -}
3188 -
3189 -.wp-chatbot-tabs.qcld-ai-actions-layout {
3190 - display: flex;
3191 - align-items: flex-start;
3192 - gap: 20px;
3193 - overflow: visible;
3194 -}
3195 -
3196 -.wp-chatbot-tabs.qcld-ai-actions-layout > nav {
3197 - width: 240px;
3198 - min-width: 240px;
3199 - flex-shrink: 0;
3200 - float: none;
3201 - margin-right: 0;
3202 - position: sticky;
3203 - top: 32px;
3204 -}
3205 -
3206 -.wp-chatbot-tabs.qcld-ai-actions-layout .content-wrap {
3207 - flex: 1 1 auto;
3208 - min-width: 0;
3209 - width: auto !important;
3210 - float: none;
3211 - padding: 24px;
3212 - background: #fff;
3213 - border-radius: 16px;
3214 -}
3215 -
3216 -.wp-chatbot-tabs.qcld-ai-actions-layout .qcld-ai-actions-playground {
3217 - width: 360px;
3218 - min-width: 320px;
3219 - flex-shrink: 0;
3220 - float: none;
3221 - margin: 0;
3222 - padding: 0;
3223 - background: transparent;
3224 - position: sticky;
3225 - top: 32px;
3226 -}
3227 -
3228 -.qcld-ai-actions-layout .ai-saved-actions-submenu {
3229 - list-style: none;
3230 - margin: 4px 0 0;
3231 - padding: 0 0 6px;
3232 -}
3233 -
3234 -.qcld-ai-actions-layout .ai-saved-actions-submenu li a {
3235 - padding: 10px 12px 10px 48px;
3236 - font-size: 14px;
3237 - font-weight: 500;
3238 - color: #988FBD;
3239 - border-radius: 8px;
3240 -}
3241 -
3242 -.qcld-ai-actions-layout .ai-saved-actions-submenu li.tab-current a,
3243 -.qcld-ai-actions-layout .ai-saved-actions-submenu li a:hover {
3244 - background: #5B4E96;
3245 - color: #fff;
3246 -}
3247 -
3248 -.qcld-ai-actions-layout .ai-no-saved-actions {
3249 - padding: 8px 12px 8px 48px;
3250 - color: #988FBD;
3251 - font-size: 13px;
3252 - font-style: italic;
3253 -}
3254 -
3255 -.qcld-ai-actions-layout .ai-sidebar-parent-link {
3256 - position: relative;
3257 -}
3258 -
3259 -.qcld-ai-actions-layout .qcld-ai-saved-toggle {
3260 - margin-left: auto;
3261 - font-size: 16px;
3262 - width: 16px;
3263 - height: 16px;
3264 -}
3265 -
3266 -.qcld-ai-template-grid {
3267 - display: grid;
3268 - grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
3269 - gap: 16px;
3270 - margin-top: 20px;
3271 -}
3272 -
3273 -.qcld-ai-actions-page .ai-template-card {
3274 - background: #fff;
3275 - border: 1px solid #E5E6F2;
3276 - border-radius: 16px;
3277 - padding: 22px 16px;
3278 - cursor: pointer;
3279 - text-align: center;
3280 - transition: all 0.2s ease;
3281 -}
3282 -
3283 -.qcld-ai-actions-page .ai-template-card:hover {
3284 - border-color: #5B4E96;
3285 - box-shadow: 0 8px 20px rgba(91, 78, 150, 0.12);
3286 - transform: translateY(-2px);
3287 - background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
3288 -}
3289 -
3290 -.qcld-ai-actions-page .ai-template-card-icon {
3291 - color: #5B4E96;
3292 - margin-bottom: 12px;
3293 -}
3294 -
3295 -.qcld-ai-actions-page .ai-template-card-icon .dashicons {
3296 - font-size: 36px;
3297 - width: 36px;
3298 - height: 36px;
3299 -}
3300 -
3301 -.qcld-ai-actions-page .ai-template-card h4 {
3302 - margin: 0 0 8px;
3303 - font-size: 15px;
3304 - font-weight: 700;
3305 - color: #5B4E96;
3306 -}
3307 -
3308 -.qcld-ai-actions-page .ai-template-card p {
3309 - margin: 0;
3310 - font-size: 13px;
3311 - color: #6b638f;
3312 - line-height: 1.45;
3313 -}
3314 -
3315 -.qcld-ai-actions-alert {
3316 - color: #fff;
3317 - background: #e64340;
3318 - padding: 12px 16px;
3319 - border-radius: 8px;
3320 - margin-bottom: 20px;
3321 -}
3322 -
3323 -.qcld-ai-action-edit-head {
3324 - display: flex;
3325 - justify-content: space-between;
3326 - align-items: center;
3327 - gap: 12px;
3328 - margin-bottom: 16px;
3329 - border-bottom: 1px solid #E5E6F2;
3330 - padding-bottom: 12px;
3331 -}
3332 -
3333 -.qcld-ai-action-edit-head .qcld-wpbot-main-tabs-title {
3334 - margin: 0;
3335 - border-bottom: 0;
3336 - padding: 0;
3337 -}
3338 -
3339 -.qcld-ai-action-edit-actions {
3340 - display: flex;
3341 - align-items: center;
3342 - gap: 10px;
3343 - flex-wrap: wrap;
3344 - justify-content: flex-end;
3345 -}
3346 -
3347 -.qcld-ai-actions-page .qcld-ai-goto-new-action {
3348 - padding: 10px 18px;
3349 - font-size: 14px;
3350 - line-height: 1.2;
3351 - white-space: nowrap;
3352 -}
3353 -
3354 -.qcld-ai-actions-page .remove-ai-form {
3355 - color: #e64340;
3356 - border: 1px solid #e64340;
3357 - background: #fff;
3358 - border-radius: 8px;
3359 -}
3360 -
3361 -.qcld-ai-actions-page .remove-ai-form:hover {
3362 - background: #e64340;
3363 - color: #fff;
3364 -}
3365 -
3366 -.qcld-ai-actions-page .wpbot-ai-inner-tabs {
3367 - margin-bottom: 20px;
3368 -}
3369 -
3370 -.qcld-ai-history-pro-tab {
3371 - opacity: 0.65;
3372 - cursor: not-allowed !important;
3373 -}
3374 -
3375 -.qcld-ai-actions-page .qc_wpbot_pro {
3376 - background: #e64340;
3377 - color: #fff;
3378 - font-size: 10px;
3379 - padding: 2px 6px;
3380 - border-radius: 4px;
3381 - margin-left: 5px;
3382 - vertical-align: middle;
3383 -}
3384 -
3385 -.qcld-ai-actions-page .form-group label,
3386 -.qcld-ai-actions-page .qcld-ai-email-field label {
3387 - display: block;
3388 - font-weight: 600;
3389 - margin-bottom: 6px;
3390 - color: #5B4E96;
3391 -}
3392 -
3393 -.qcld-ai-actions-page .form-group.qcld-ai-email-toggle {
3394 - display: flex;
3395 - align-items: center;
3396 - border: none;
3397 - padding: 4px 0 10px;
3398 - margin-bottom: 8px;
3399 -}
3400 -
3401 -.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] {
3402 - position: absolute;
3403 - opacity: 0;
3404 - width: 1px;
3405 - height: 1px;
3406 - pointer-events: none;
3407 -}
3408 -
3409 -.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] + label {
3410 - position: relative;
3411 - display: flex;
3412 - align-items: center;
3413 - width: auto;
3414 - height: auto;
3415 - min-height: 22px;
3416 - margin: 0;
3417 - padding: 0 0 0 34px;
3418 - border: none;
3419 - border-radius: 0;
3420 - text-indent: 0;
3421 - font: 600 16px/22px "DM Sans", sans-serif;
3422 - color: #5B4E96;
3423 - cursor: pointer;
3424 - white-space: nowrap;
3425 - user-select: none;
3426 -}
3427 -
3428 -.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] + label:before {
3429 - content: "";
3430 - position: absolute;
3431 - left: 0;
3432 - top: 50%;
3433 - width: 22px;
3434 - height: 22px;
3435 - margin-top: -11px;
3436 - border: 2px solid #5B4E96;
3437 - border-radius: 4px;
3438 - background: #fff;
3439 - box-sizing: border-box;
3440 - transition: all ease-out 200ms;
3441 -}
3442 -
3443 -.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] + label:after {
3444 - content: "";
3445 - position: absolute;
3446 - left: 7px;
3447 - top: 8px;
3448 - width: 6px;
3449 - height: 11px;
3450 - margin-top: -7px;
3451 - border-bottom: 2px solid #fff;
3452 - border-right: 2px solid #fff;
3453 - border-left: none;
3454 - transform: rotate(45deg);
3455 - opacity: 0;
3456 - transition: opacity ease-out 200ms;
3457 -}
3458 -
3459 -.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox]:checked + label {
3460 - border: none;
3461 -}
3462 -
3463 -.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox]:checked + label:before {
3464 - background: #22b573;
3465 - border-color: #22b573;
3466 -}
3467 -
3468 -.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox]:checked + label:after {
3469 - opacity: 1;
3470 - width: 6px;
3471 -}
3472 -
3473 -.qcld-ai-actions-page .form-group input[type="text"],
3474 -.qcld-ai-actions-page .form-group textarea,
3475 -.qcld-ai-actions-page .qcld-ai-email-field input[type="text"] {
3476 - width: 100%;
3477 - max-width: 100%;
3478 - border: 1px solid #E5E6F2;
3479 - border-radius: 8px;
3480 - padding: 10px 12px;
3481 -}
3482 -
3483 -.qcld-ai-email-field {
3484 - margin-top: 12px;
3485 -}
3486 -
3487 -.qcld-ai-field-hint,
3488 -.qcld-ai-muted {
3489 - margin: 6px 0 0;
3490 - font-size: 13px;
3491 - color: #888;
3492 - font-style: italic;
3493 -}
3494 -
3495 -.qcld-ai-save-footer {
3496 - display: flex;
3497 - flex-direction: column;
3498 - align-items: flex-start;
3499 - gap: 12px;
3500 - padding: 16px 0 0;
3501 -}
3502 -
3503 -.qcld-ai-save-footer .cxsc-settings-blocks-notic {
3504 - width: 100%;
3505 -}
3506 -
3507 -.qcld-ai-save-footer .cxsc-settings-blocks-notic a {
3508 - color: #5B4E96;
3509 - font-weight: 700;
3510 -}
3511 -
3512 -.qcld-ai-playground {
3513 - background: #fff;
3514 - border-radius: 16px;
3515 - overflow: hidden;
3516 - box-shadow: 0 8px 24px rgba(91, 78, 150, 0.08);
3517 - border: 1px solid #E5E6F2;
3518 -}
3519 -
3520 -.qcld-ai-playground-header {
3521 - background: #5B4E96;
3522 - color: #fff;
3523 - padding: 14px 16px;
3524 - font-weight: 700;
3525 - text-align: center;
3526 - position: relative;
3527 -}
3528 -
3529 -.qcld-ai-playground-header #ai-playground-refresh {
3530 - position: absolute;
3531 - right: 12px;
3532 - top: 10px;
3533 - background: transparent;
3534 - border: none;
3535 - color: #fff;
3536 - cursor: pointer;
3537 - padding: 0;
3538 -}
3539 -
3540 -.qcld-ai-playground-header #ai-playground-refresh .dashicons {
3541 - font-size: 20px;
3542 - width: 20px;
3543 - height: 20px;
3544 -}
3545 -
3546 -#ai-actions-playground-container {
3547 - padding: 16px;
3548 - display: flex;
3549 - flex-direction: column;
3550 - height: 420px;
3551 - overflow-y: auto;
3552 - background: #F5F7FD;
3553 -}
3554 -
3555 -#ai-actions-playground-messages {
3556 - display: flex;
3557 - flex-direction: column;
3558 - justify-content: flex-end;
3559 - flex: 1;
3560 -}
3561 -
3562 -.qcld-ai-pg-bot-row {
3563 - display: flex;
3564 - gap: 10px;
3565 - align-items: flex-end;
3566 - margin-bottom: 12px;
3567 -}
3568 -
3569 -.qcld-ai-pg-user-row {
3570 - display: flex;
3571 - justify-content: flex-end;
3572 - margin-bottom: 12px;
3573 -}
3574 -
3575 -.qcld-ai-pg-avatar {
3576 - width: 36px;
3577 - height: 36px;
3578 - background: #5B4E96;
3579 - border-radius: 50%;
3580 - flex-shrink: 0;
3581 - background-size: cover;
3582 - background-position: center;
3583 -}
3584 -
3585 -.qcld-ai-pg-bubble {
3586 - background: #fff;
3587 - padding: 12px;
3588 - border-radius: 16px;
3589 - border-bottom-left-radius: 4px;
3590 - box-shadow: 0 2px 6px rgba(91, 78, 150, 0.08);
3591 - width: 100%;
3592 - max-width: 80%;
3593 - font-size: 13px;
3594 - color: #333;
3595 - line-height: 1.45;
3596 - overflow-wrap: break-word;
3597 -}
3598 -
3599 -.qcld-ai-pg-bubble p {
3600 - margin: 0 0 10px;
3601 - font-size: 13px;
3602 -}
3603 -
3604 -.qcld-ai-pg-bubble.is-loading {
3605 - color: #988FBD;
3606 -}
3607 -
3608 -.qcld-ai-pg-user-bubble {
3609 - background: #5B4E96;
3610 - color: #fff;
3611 - padding: 8px 12px;
3612 - border-radius: 16px;
3613 - border-bottom-right-radius: 4px;
3614 - max-width: 80%;
3615 - font-size: 13px;
3616 -}
3617 -
3618 -#ai-actions-live-preview {
3619 - display: flex;
3620 - flex-wrap: wrap;
3621 - gap: 6px;
3622 -}
3623 -
3624 -.playground-ai-action-btn {
3625 - background: #fff;
3626 - border: 1px solid #5B4E96;
3627 - padding: 6px 12px;
3628 - border-radius: 16px;
3629 - font-size: 12px;
3630 - color: #5B4E96;
3631 - cursor: pointer;
3632 - display: inline-block;
3633 - transition: all 0.2s;
3634 -}
3635 -
3636 -.playground-ai-action-btn:hover {
3637 - background: #5B4E96;
3638 - color: #fff;
3639 -}
3640 -
3641 -.playground-ai-action-btn.is-empty {
3642 - cursor: default;
3643 - border-color: #E5E6F2;
3644 - color: #888;
3645 - background: #f7f7fb;
3646 -}
3647 -
3648 -.playground-ai-action-btn.is-empty:hover {
3649 - background: #f7f7fb;
3650 - color: #888;
3651 -}
3652 -
3653 -.qcld-ai-pg-form-data {
3654 - background: #F5F7FD;
3655 - padding: 10px;
3656 - border-left: 3px solid #5B4E96;
3657 - margin: 10px 0;
3658 - border-radius: 6px;
3659 -}
3660 -
3661 -.qcld-ai-pg-form-data strong {
3662 - display: block;
3663 - margin-bottom: 5px;
3664 - color: #5B4E96;
3665 - text-transform: capitalize;
3666 -}
3667 -
3668 -.qcld-ai-pg-form-data ul {
3669 - margin: 0;
3670 - padding-left: 15px;
3671 - font-size: 13px;
3672 - color: #333;
3673 -}
3674 -
3675 -.qcld-ai-playground-footer {
3676 - padding: 12px;
3677 - background: #fff;
3678 - border-top: 1px solid #E5E6F2;
3679 - display: flex;
3680 - gap: 8px;
3681 - align-items: center;
3682 -}
3683 -
3684 -.qcld-ai-playground-footer #playground-input {
3685 - width: 100%;
3686 - background: #F5F7FD;
3687 - border: 1px solid #E5E6F2;
3688 - border-radius: 20px;
3689 - padding: 10px 14px;
3690 - color: #333;
3691 - font-size: 13px;
3692 - outline: none;
3693 -}
3694 -
3695 -.qcld-ai-playground-footer #playground-send-btn {
3696 - border: none;
3697 - border-radius: 50%;
3698 - width: 40px;
3699 - height: 40px;
3700 - background: #5B4E96;
3701 - color: #fff;
3702 - cursor: pointer;
3703 - display: flex;
3704 - align-items: center;
3705 - justify-content: center;
3706 - flex-shrink: 0;
3707 -}
3708 -
3709 -.qcld-ai-playground-footer #playground-send-btn .dashicons {
3710 - font-size: 18px;
3711 - width: 18px;
3712 - height: 18px;
3713 - line-height: 1;
3714 -}
3715 -
3716 -.qcld-ai-actions-page .ai-content-pane {
3717 - animation: qcldAiFadeIn 0.3s ease-in-out;
3718 -}
3719 -
3720 -div#ai-saved-actions-container h2.nav-tab-wrapper.wpbot-ai-inner-tabs {
3721 - padding: 0 0 12px 0;
3722 - border: none;
3723 -}
3724 -
3725 -@keyframes qcldAiFadeIn {
3726 - from { opacity: 0; transform: translateY(5px); }
3727 - to { opacity: 1; transform: translateY(0); }
3728 -}
3729 -
3730 -@media (max-width: 1280px) {
3731 - .wp-chatbot-tabs.qcld-ai-actions-layout .content-wrap {
3732 - width: auto !important;
3733 - }
3734 - .wp-chatbot-tabs.qcld-ai-actions-layout .qcld-ai-actions-playground {
3735 - width: 300px;
3736 - min-width: 280px;
3737 - }
3738 -}
3739 -
3740 -@media (max-width: 992px) {
3741 - .wp-chatbot-tabs.qcld-ai-actions-layout {
3742 - flex-wrap: wrap;
3743 - }
3744 - .wp-chatbot-tabs.qcld-ai-actions-layout > nav,
3745 - .wp-chatbot-tabs.qcld-ai-actions-layout .content-wrap,
3746 - .wp-chatbot-tabs.qcld-ai-actions-layout .qcld-ai-actions-playground {
3747 - width: 100% !important;
3748 - min-width: 0;
3749 - position: static;
3750 - }
3751 -}
3752 -
3753 -
2774 +}