PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.7.6
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.7.6
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 8.5.0 All 532 releases
← All changes | css/admin-style.css +952 -27 8.5.08.7.6 View file →
@@ -996,8 +996,59 @@
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 +}
1000 1051 .lp-submenu-wpbot_openAi button.swal2-confirm.btn.btn-lg.swal2-styled{
1001 1052 width: auto !important;
1002 1053 }
1003 1054
@@ -1112,12 +1163,12 @@
1112 1163
1113 1164 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container {
1114 1165 display: flex;
1115 1166 justify-content: flex-start;
1116 - padding: 20px;
1167 + padding: 8px 20px;
1117 1168 border-radius: 16px;
1118 1169 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
1119 - margin: 20px 0 20px 0;
1170 + margin: 20px 0 0 0;
1120 1171 gap: 30px;
1121 1172 }
1122 1173
1123 1174 .admin-maxwith.qcld-openai-main-box .tab-content {
@@ -1485,17 +1536,163 @@
1485 1536 }
1486 1537
1487 1538
1488 1539 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container h4 {
1489 - width: 396px;
1540 + width: 365px;
1490 1541 }
1491 1542
1492 1543 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container select {
1493 - border-color: #ffffff;
1494 - width: 220px;
1544 + display: none;
1495 1545 }
1496 1546
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 +}
1497 1554
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 +
1498 1695 .admin-maxwith.qcld-openai-main-box .tab-content div#wp-chatbot-openai-training-model .row.my-4 {
1499 1696 font-size: 15px;
1500 1697 display: flex;
1501 1698 width: 100%;
@@ -2250,9 +2447,9 @@
2250 2447 font-weight: bold;
2251 2448 }
2252 2449
2253 2450 #qcld-show-more-wrapper-box .qcld-show-more-show-more-height {
2254 - height: 190px;
2451 + height: 338px;
2255 2452 overflow:hidden;
2256 2453 }
2257 2454
2258 2455 #qcld-show-more-wrapper-box .qcld-show-more-show-more i {
@@ -2361,8 +2558,56 @@
2361 2558 textarea#qcld_openai_system_content {
2362 2559 height: 120px;
2363 2560 line-height: 28px;
2364 2561 }
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 +}
2365 2610 .qcld-main-wrapper .alert.alert-warning {
2366 2611 background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96% 96%);
2367 2612 border-radius: 6px;
2368 2613 color: #721c24;
@@ -2661,9 +2906,8 @@
2661 2906 display: block;
2662 2907 width: 18px;
2663 2908 height: 18px;
2664 2909 }
2665 -
2666 2910 div#wp-chatbot-openai-rag input[type=checkbox]+label {
2667 2911 margin-bottom: 0;
2668 2912 }
2669 2913 .qcl-openai input[type=checkbox]+label {
@@ -2671,9 +2915,8 @@
2671 2915 }
2672 2916 div#qcld-rag-settings-tab .wrap .mb-3 {
2673 2917 padding: 5px 0;
2674 2918 }
2675 -
2676 2919 div#rag-database input#search-submit {
2677 2920 background: #5b4e96;
2678 2921 color: #fff;
2679 2922 border-color: #5b4e96;
@@ -2682,9 +2925,8 @@
2682 2925 display: flex;
2683 2926 flex-direction: column;
2684 2927 gap: 6px;
2685 2928 }
2686 -
2687 2929 div#wp-chatbot-gemini-settings .input-group {
2688 2930 display: flex;
2689 2931 gap: 10px;
2690 2932 }
@@ -2693,9 +2935,8 @@
2693 2935 color: #ffffff;
2694 2936 border: none;
2695 2937 padding: 12px 30px;
2696 2938 }
2697 -
2698 2939 button#qcld_gemini_fetch_models {
2699 2940 background: #5B4E96;
2700 2941 color: #ffffff;
2701 2942 border: none;
@@ -2709,15 +2950,13 @@
2709 2950 margin: 0 0 6px 0;
2710 2951 padding: 0 4px;
2711 2952 min-width: 220px;
2712 2953 }
2713 -
2714 2954 select#qcld_language_center_select:focus {
2715 2955 border-color: #5b4e96;
2716 2956 color: #5b4e96;
2717 2957 box-shadow: 0 0 0 1px #5b4e96;
2718 2958 }
2719 -
2720 2959 div#common-ai-settings h2 a {
2721 2960 background: #5B4E96;
2722 2961 color: #ffffff;
2723 2962 display: inline-block !important;
@@ -2722,11 +2961,10 @@
2722 2961 color: #ffffff;
2723 2962 display: inline-block !important;
2724 2963 font-size: 16px;
2725 2964 padding: 8px 15px;
2726 - border-radius: 8px;
2965 + border-radius: 8px;
2727 2966 }
2728 -
2729 2967 div#common-ai-settings h2.nav-tab-wrapper {
2730 2968 border: none;
2731 2969 }
2732 2970 div#qcld-rate-settings-tab {
@@ -2742,14 +2980,12 @@
2742 2980 width: 1.5rem;
2743 2981 height: 1.5rem;
2744 2982 margin: -1px 0 0 -1px;
2745 2983 }
2746 -
2747 2984 .cxsc-settings-blocks.cxsc-settings-blocks-style .radio-inline input[type=radio] {
2748 2985 width: 1.5rem;
2749 2986 height: 1.5rem;
2750 2987 }
2751 -
2752 2988 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 {
2753 2989 padding: 8px 15px;
2754 2990 width: auto;
2755 2991 font-size: 16px;
@@ -2765,15 +3001,12 @@
2765 3001 text-decoration: none;
2766 3002 border-color: #5b4e96 !important;
2767 3003 line-height: normal;
2768 3004 }
2769 -
2770 -
2771 3005 button#botmaster_submit_googlesheet_btn, button#botmaster_submit_googledoc_btn {
2772 3006 background: #5B4E96;
2773 3007 border-color: #5B4E96;
2774 3008 }
2775 -
2776 3009 .wpbot-wizard-field select#wizard_ai_provider {
2777 3010 background: transparent;
2778 3011 color: #fff;
2779 3012 width: 100%;
@@ -2788,18 +3021,14 @@
2788 3021 div#wizard_api_key_container input#wizard_api_key {
2789 3022 background: transparent;
2790 3023 color: #fff;
2791 3024 }
2792 -
2793 -
2794 -
2795 3025 div#collapseTwoControl input[type=radio]:checked::before {
2796 3026 background-color: #5b4e96;
2797 3027 }
2798 -
2799 3028 .nav-tab-wrapper.sld_nav_container.wppt_nav_container.qcld_help_wppt_nav_container{
2800 - width: 320px !important;
2801 - gap: 0;
3029 + width: 320px !important;
3030 + gap: 0;
2802 3031 }
2803 3032 div#rag-settings tbody#rag-knowledge-base-list tr td button {
2804 3033 padding: 6px 20px;
2805 3034 font-weight: bold;
@@ -2809,13 +3038,11 @@
2809 3038 background: #d14529;
2810 3039 color: #fff;
2811 3040 border-color: #d14529;
2812 3041 }
2813 -
2814 3042 button#ai-knowledge-base-tab {
2815 3043 animation: pulse 2s infinite;
2816 3044 }
2817 -
2818 3045 @keyframes pulse {
2819 3046 0% {
2820 3047 transform: scale(1);
2821 3048 }
@@ -2825,4 +3052,702 @@
2825 3052 100% {
2826 3053 transform: scale(1);
2827 3054 }
2828 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 +