.mindjack p{
font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol !important;
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: 400;
line-height: 24px;
/*color: #000000 !important;*/
}
.mj-overlay.light p{
color: #000000 !important;
}
.mj-overlay.dark p{
color: #ffffff !important;
}
.mj-overlay.dark hr{
color: #ffffff !important;
}
/* font-family: 'Perfect DOS VGA 437', monospace; */
.mindjack :is(h1,h2,h3,h4,h5,h6){
font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol !important;
line-height: 1.2 !important;
letter-spacing: normal !important;
/*color: #000000 !important;*/
text-transform: none !important;
}
.mj-overlay.light :is(h1,h2,h3,h4,h5,h6){
color: #000000 !important;
}
.mj-overlay.dark :is(h1,h2,h3,h4,h5,h6){
color: #ffffff !important;
}
.mindjack :is(h1,h2){
margin-top: 30px !important;
margin-bottom: 15px !important;
}
.mindjack :is(h3,h4,h5,h6){
margin-top: 15px; margin-bottom: 15px;
}
.mindjack h1{
font-size: 32px !important;
font-weight: 600 !important;
}
.mindjack h2{
font-size: 24px !important;
font-weight: 600 !important;
}
.mindjack :is(h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h5 strong) {
font-weight: normal !important;
}
.mindjack h3{
font-size: 20px !important;
font-weight: 600 !important;
}
.mindjack :is(h4,h5,h6){
font-size: 20px !important;
font-weight: 600 !important;
}
.mindjack :is(ul,ol,ul ul,ul ol,ol ul, ol ol) {
padding-top:0px !important;
padding-bottom:0px !important;
padding-right:0px !important;
margin-bottom: 20px !important;
/*color: #000000;*/
font-size: 16px !important;
font-weight: 400 !important;
margin-block-start: 0px !important;
margin-block-end: 0px !important;
line-height: 24px !important;
}
.mj-overlay.dark .mj-output a {
color: #00ff00;
}
.mj-overlay.light .mj-output a {
color: #0000ff;
}
.mj-overlay a{
background-color: transparent;
text-decoration: none;
}
/*.mj-overlay ul li{*/
/* list-style-type: disc;*/
/* list-style-position: outside;*/
/* margin-bottom: 5px;*/
/*}*/
.mj-overlay ol li, ul li{/* added ul li in v2 */
list-style-type: none;
list-style-position: outside; /* ensures bullet is outside the text */
margin-top: 5px;
margin-bottom: 5px;
}
.mj-overlay ol, ul{/* added ul in v2 */
padding-left: 0px !important;
margin-left: 0px !important;
}
.mj-overlay.light :is(ul,ol,ul ul,ul ol,ol ul, ol ol) {
color: #000000 !important;
}
.mj-overlay.dark :is(ul,ol,ul ul,ul ol,ol ul, ol ol) {
color: #ffffff !important;
}
.mindjack pre{
background-color: rgb(249, 249, 249);
margin-top:30px;
margin-bottom: 30px;
}
/* Vibe insert@ / replace@ — summary heading is real marked ### h3; only collapse chrome here */
.mindjack .ssai-vibe-codegen-toggle,
.mindjack .ssai-vibe-codegen-group-toggle,
.mindjack .ssai-reasoning-thought-toggle,
.mindjack .ssai-reasoning-code-toggle {
cursor: pointer;
}
.mindjack .ssai-vibe-codegen-body.is-collapsed,
.mindjack .ssai-vibe-codegen-group-body.is-collapsed,
.mindjack .ssai-reasoning-thought-body.is-collapsed,
.mindjack .ssai-reasoning-code-body.is-collapsed {
display: none;
}
/* Incomplete ``` hidden only when vibe is expected (classified, command, or command-prefix) */
.mindjack pre.ssai-vibe-codegen-pending {
display: none;
}
.mindjack .ssai-vibe-codegen-body:not(.is-collapsed) pre,
.mindjack .ssai-reasoning-thought-body:not(.is-collapsed) pre,
.mindjack .ssai-reasoning-code-body:not(.is-collapsed) pre {
margin-top: 0;
}
.mindjack .ssai-vibe-codegen-group-body:not(.is-collapsed) > .ssai-vibe-codegen {
margin-top: 0.5em;
}
/* Reasoning Thought — whisper (secondary to reply type; vibe h3s stay on shared heading rules) */
.mindjack .ssai-reasoning-thought-toggle,
.mindjack .ssai-reasoning-code-toggle {
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.mindjack .ssai-reasoning-thought-body :is(p, ul, ol, li) {
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
.mj-overlay.light .ssai-reasoning-thought-toggle,
.mj-overlay.light .ssai-reasoning-thought-caret,
.mj-overlay.light .ssai-reasoning-code-toggle,
.mj-overlay.light .ssai-reasoning-code-caret,
.mj-overlay.light .ssai-reasoning-thought-body,
.mj-overlay.light .ssai-reasoning-thought-body :is(p, ul, ol, li, h1, h2, h3, h4, h5, h6) {
color: #6b7280 !important;
}
.mj-overlay.dark .ssai-reasoning-thought-toggle,
.mj-overlay.dark .ssai-reasoning-thought-caret,
.mj-overlay.dark .ssai-reasoning-code-toggle,
.mj-overlay.dark .ssai-reasoning-code-caret,
.mj-overlay.dark .ssai-reasoning-thought-body,
.mj-overlay.dark .ssai-reasoning-thought-body :is(p, ul, ol, li, h1, h2, h3, h4, h5, h6) {
color: #9ca3af !important;
}
.mindjack .text-bubble {
font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol !important;
clear: both;
border-radius: 1rem;
padding: 12px 16px;
display:inline-block !important;
max-width: 75%;
word-wrap: break-word;
margin-bottom: 10px;
margin-top: 40px;
font-size: 16px !important;
font-weight: 400 !important;
z-index: inherit;
}
.mj-overlay.light .text-bubble {
background-color: #f1f1f1;
color:#000000;
}
.mj-overlay.dark .text-bubble {
background-color: #444444;
color:#ffffff;
}
.mj-overlay .d-flex.ssai-auto-message-error {
justify-content: flex-start !important;
}
.mindjack .text-bubble.ssai-auto-message-error {
max-width: none;
margin-top: 18px;
margin-bottom: 4px;
padding: 6px 10px 6px 12px;
border-radius: 0;
border-left: 2px solid #ff0000;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.02em;
background-color: transparent !important;
}
.mj-overlay.light .text-bubble.ssai-auto-message-error {
color: #6b7280;
}
.mj-overlay.dark .text-bubble.ssai-auto-message-error {
color: #9ca3af;
}
.mindjack .text-agent{
overflow: auto;
padding-top: 0px !important;
}
/*.mindjack .text-agent > *:first-child {*/
/* margin-top: 0 !important;*/
/* padding-top: 0 !important;*/
/*}*/
/*.mindjack .text-agent > :is(h1, h2):first-of-type {*/
/* margin-top: 0 !important;*/
/* padding-top: 0 !important;*/
/*}*/
/*.mindjack .text-agent > :not(.spinner_spacer):first-child {*/
/* margin-top: 0 !important;*/
/* padding-top: 0 !important;*/
/*}*/
.mindjack .black-button {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: black;
color: white;
border: none;
font-size: 20px;
font-weight: bold;
line-height: 1;
text-align: center;
cursor: pointer;
}
/* Base table styling */
.mindjack table {
width: 100% !important;
min-width: 500px !important;
border-collapse: separate !important;
border-spacing: 0 !important; /* 0 12px */
font-family: system-ui, sans-serif !important;
font-size: 15px !important;
margin-bottom: 30px !important;
margin-top:30px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important; /* smooth scroll on iOS */
}
/* Header row */
.mindjack thead th {
text-align: left !important;
padding: 8px 12px !important;
font-weight: 500 !important;
border-bottom: 2px solid #ddd !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
.mj-overlay.light thead th{
background-color: #f8f9fa !important;
color: #000000 !important;
}
.mj-overlay.dark thead th{
background-color: #444444 !important;
color: #ffffff !important;
}
/* Data rows */
.mindjack tbody td {
background: #ffffff !important;
padding: 12px !important;
vertical-align: top !important;
border-bottom: 1px solid #eee !important;
/*border-left: 4px solid #e4e4e4;*/
/*border-radius: 4px;*/
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
.mj-overlay.light tbody td{
background: #ffffff !important;
color: #000000 !important;
}
.mj-overlay.dark tbody td{
background: #000000 !important;
color: #ffffff !important;
}
/* Optional: spacing between rows */
.mindjack tbody tr + tr td {
border-top: none !important;
margin-top: 0px !important;
}
.mj-overlay.light tbody tr:hover td {
background-color: #f6faff !important;
}
.mj-overlay.dark tbody tr:hover td {
background-color: #1d1d1d !important;
}
.mindjack blockquote {
position: relative !important;
margin: 1em 0 !important;
padding: 1em 1em 1em 2em !important;
font-style: italic !important;
color: #444 !important;
line-height: 1.6 !important;
overflow: hidden !important; /* Ensures ::before doesn't overflow weirdly */
}
.mindjack blockquote::before {
content: "" !important;
position: absolute !important;
top: 0.75em !important;
bottom: 0.75em !important;
left: 0.5em !important;
width: 6px !important;
background-color: #d0d0d0 !important;
border-radius: 6px !important;
}
.mindjack img:not(.emoji) {
max-height: 300px !important;
/*margin-right: 20px !important;*/
/*float: left !important;*/
}
/* LLM reply images/gifs in the conversation column only (not navbar/header logos) */
.mindjack .mj-drawer-inner img:not(.emoji) {
max-width: 100% !important;
max-height: 200px !important;
width: auto !important;
height: auto !important;
}
/* WordPress swaps unicode emoji for ![]()
SVGs (no intrinsic size); keep them at
text size even if core's emoji stylesheet is dequeued or out-specified by the caps above. */
.mindjack img.emoji {
height: 1em !important;
width: 1em !important;
max-height: 1em !important;
max-width: 1em !important;
vertical-align: -0.1em !important;
display: inline !important;
margin: 0 0.07em !important;
}
.mindjack .mj-output {
margin-bottom:600px !important;
}
.container.convo{
/* 768px is container max */
/*max-width: 650px; */
max-width: 100%;
width: 650px;
position: fixed;
bottom: 8px;
left: 50%;/*ask-offetx*/
transform: translateX(-50%);
/*left: 100%;*/
/*transform: translateX(-100%);*/
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
z-index: 1000029999 !important;
box-sizing: border-box;
}
.mindjack .convo-container-row {
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
}
.mindjack .container{
max-width:650px;/* 768px is normal container max... but this stops the jitters from 768 to 600 */
width: 100% !important;
margin-top: 50px !important;
}
.mindjack .send-button{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: black;
color: white !important;
border: none;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
cursor: pointer;
line-height: 1;
}
/*.mindjack .input-group {
height:80px;
}*/
.mindjack .form-control.question{
resize:none;
padding-left:20px;
padding-right:20px;
padding-top: 10px;
min-height: 40px;
border:none;
font-size: 16px;
line-height: 24px;
background: none;
color:#000000;
/*dark mode (next 2 lines):*/
/*color: #ffffff;*/
/*caret-color:#ffffff;*/
}
.mindjack .form-control.question::placeholder {
color: #aaaaaa; /* Replace with any color you like */
opacity: 1; /* Optional: ensures it's fully opaque in some browsers */
}
.mindjack .input-group-text{
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
background: none;
}
.mindjack .mj-prompt{
/*background-color:#ffffff;*/
/*dark mode (next line):*/
/*background-color:#464646;*/
/*background-color: rgba(50,50,50,0.9);*/
/*border:1px solid #777777;*/
border-radius:30px;
padding:10px;
/*box-shadow: 1px 1px 1px #aaaaaa;*/
}
.mindjack .mj-prompt.light {
background-color:#ffffff;
border:1px solid #dee2e6;
color: #000000;
}
.mindjack .mj-prompt.dark {
background-color:rgba(68,68,68,1);
border:none;
color: #ffffff;
}
.mindjack textarea:focus {
outline: none !important;
box-shadow: none !important;
border-color: inherit !important;
}
.mindjack .mj-label{
text-align:center;
font-size:12px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 2px;
display: none;
}
.mindjack .mj-label.dark {
background-color: #000000;
color:#777777;
}
.mindjack .mj-label.light {
background-color: #ffffff;
color:#cccccc;
}
/* ------------- FULL-SCREEN SLIDING OVERLAY ------------- */
.mj-overlay {
position: fixed;
top: 0;
right: -100%; /* keep it off-screen */
width: 100%;
height: 100%;
overflow-y: auto;
z-index: 1000009998 !important; /* above everything, incl. textarea (9999) */
transition: right 0.45s ease;
color-scheme: light !important;
}
.mj-overlay.light{
background: rgba(255,255,255,1);
}
.mj-overlay.dark{
background: rgba(0,0,0,1);
}
/* Target WebKit browsers (including mobile) */
/*.mj-overlay::-webkit-scrollbar {*/
/* width: 8px !important; !* or height for horizontal *!*/
/* color-scheme: light;*/
/*}*/
/*.mj-overlay::-webkit-scrollbar-track {*/
/* background: #f0f0f0 !important;*/
/* color-scheme: light;*/
/*}*/
/*.mj-overlay::-webkit-scrollbar-thumb {*/
/* background: #888 !important;*/
/* border-radius: 4px !important;*/
/* color-scheme: light;*/
/*}*/
/*.mj-overlay::-webkit-scrollbar-thumb:hover {*/
/* background: #555 !important;*/
/* color-scheme: light;*/
/*}*/
/*.mj-overlay.open { right: 0; }*/
/* close (×) button */
/* keep the × pinned to the viewport but hidden until overlay opens */
.mj-close{
position: fixed; /* sticks in the same spot even when you scroll */
top: 22px; /* adjust to taste */
right: 30px;
z-index: 10000010002; /* above overlay content */
border: none;
background: transparent;
font-size: 40px;
line-height: 1;
cursor: pointer;
padding: 0;
color: #000;
display: none; /* <- start hidden */
}
/* show the button only while the drawer is on-screen */
.mj-overlay.open .mj-close{
display: block;
}
/* optional: hide body scroll when overlay open */
/* body.mj-lock-scroll { overflow: hidden; } */
/* ===================== DRAWER WIDTH MODES ===================== */
.mj-overlay.full { width:100%; right:-100%; }
.mj-overlay.full.open { right:0; }
.mj-overlay.half { width:34%; right:-34%; }/* RIGHT HALF SET x3 (+ - +) */
.mj-overlay.half.open { right:0; }
/* When half-drawer is open, give the page breathing room */
body.mj-half-open { padding-right:34%; transition:padding-right .45s ease; }
/*header.mj-half-open { padding-right:34%; transition:padding-right .45s ease; }*/
/* shrink the page when half-drawer is open */
body.mj-half-open #mj-page-scroll {
width:66%; /* LEFT HALF SET */
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
body.mj-half-open #mj-page-scroll::-webkit-scrollbar {
width:5px;
}
body.mj-half-open #mj-page-scroll::-webkit-scrollbar-thumb {
background-color: #a0a0a0;
border-radius: 3px;
}
body.mj-half-open #mj-page-scroll::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
/* page scroll wrapper — full width until half-drawer opens (then 66%) */
#mj-page-scroll{
position:fixed;
top:0;
left:0;
width:100%; /* full width until the drawer opens */
height:100vh;
overflow-y:auto !important;
overflow-x:hidden;
z-index:1000009998;
transition: width .45s ease, padding-right .45s ease;
-webkit-overflow-scrolling:touch;
}
body.mj-half-open #mj-page-scroll {
width: 66% !important; /* ✅ shrink only when drawer is open */
}
/* ==================== compensate for WP admin bar ==================== */
/* Desktop: bar is 32 px */
body.admin-bar #mj-page-scroll { top:32px; height:calc(100vh - 32px); }
body.admin-bar .mj-overlay { top:32px; height:calc(100vh - 32px); }
body.admin-bar .mj-close { top:54px; } /* 22px + 32px */
/* Mobile/tablet: bar is 46 px (WP breakpoint at 782 px) */
@media (max-width:782px){
/*body.admin-bar #mj-page-scroll { top:46px; height:calc(100vh - 46px); }*/
/*body.admin-bar .mj-overlay { top:46px; height:calc(100vh - 46px); }*/
/*body.admin-bar .mj-close { top:68px; }*/
body.admin-bar #mj-page-scroll { top:0px; height:100vh; }
body.admin-bar .mj-overlay { top:0px; height:100vh; }
body.admin-bar .mj-close { top:0px; }
/* 22px + 46px */
}
body.mj-full-open #mj-page-scroll {
overflow: hidden !important;
height: 100% !important;
position: fixed !important; /* prevents hidden-but-scrollable case */
}
body.mj-full-open, html.mj-full-open {
overflow: hidden !important;
height: 100% !important;
}
.mj-no-fade {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.convo-container-row::-webkit-scrollbar {
width: 60px;
}
/* ... same for thumb/track ... */
.convo-container-row {
scrollbar-width: auto;
scrollbar-color: #888 #f0f0f0;
}
.mindjack .send-button:hover,
.mindjack .send-button:focus,
.mindjack .send-button:active {
background-color: #5d5d5d;
}
/* Hide scrollbar for modern browsers */
/*html, body {*/
/* scrollbar-width: none; !* Firefox *!*/
/* -ms-overflow-style: none; !* IE 10+ *!*/
/* overflow-y: scroll; !* Keeps scroll active *!*/
/*}*/
/*html::-webkit-scrollbar,*/
/*body::-webkit-scrollbar {*/
/* display: none;*/
/*}*/
.fake-scrollbar {
display: none;
position: fixed;
bottom: 0;
left: calc(100vw - 5px);
width: 5px;
height: 100vh;
background: #eee;
z-index: 2200000000;
transition: left 0.45s ease;
}
.fake-thumb {
display: none;
position: absolute;
width: 100%;
background: #888;
border-radius: 3px;
height: 150px;
cursor: pointer;
}
.mindjack .navbar-toggler,
.mindjack .navbar-toggler-icon,
.ssai-left-overlay .navbar-toggler,
.ssai-left-overlay .navbar-toggler-icon {
border: none !important;
outline: none !important;
box-shadow: none !important;
font-size: 20px !important;
color: #ff0000 !important;
background-color: transparent !important;
}
.mindjack .navbar-toggler:focus,
.mindjack .navbar-toggler-icon:focus,
.mindjack .navbar-toggler:hover,
.mindjack .navbar-toggler-icon:hover,
.mindjack .navbar-toggler:active,
.mindjack .navbar-toggler-icon:active
.ssai-left-overlay .navbar-toggler:focus,
.ssai-left-overlay .navbar-toggler-icon:focus,
.ssai-left-overlay .navbar-toggler:hover,
.ssai-left-overlay .navbar-toggler-icon:hover,
.ssai-left-overlay .navbar-toggler:active,
.ssai-left-overlay .navbar-toggler-icon:active {
border: none !important;
outline: none !important;
box-shadow: none !important;
color: #ff0000 !important;
/*background-color: #ffffff !important;*/
}
.mindjack nav a{
color: #0000ff;
}
#mj-navbar.navbar-dark .nav-link,
#mj-navbar.navbar-dark .nav-link:hover,
#mj-navbar.navbar-dark .nav-link:focus {
color: #ffffff;
}
#mj-overlay-close, #mj-overlay-close2{
border: none !important;
outline: none !important;
box-shadow: none !important;
font-size: 30px !important;
color: #aaaaaa !important;
background-color: transparent !important;
}
.mindjack button i{
color: #aaaaaa;
/*color: #aaaaaa !important;*/
}
.mindjack .navbar {
z-index: 2100000000;
/*max-height: 100px;*/
}
#mj-navbar.bg-navbar-light{
background-image: url("/wp-content/plugins/ssai-chat/assets/img/bg-scratches-mindjack-1024x600-lighter.jpg") !important;
}
#mj-navbar.bg-navbar-light-hex{
background-image: url("/wp-content/plugins/ssai-chat/assets/img/xsai-nav-bg-hexled-light3.jpg") !important;
background-size: cover;
}
#mj-navbar.bg-navbar-dark{
background-image: url("/wp-content/plugins/ssai-chat/assets/img/bg-scratches-mindjack-1024x600-dark.jpg") !important;
}
#mj-navbar.bg-navbar-dark-hex{
background-image: url("/wp-content/plugins/ssai-chat/assets/img/xsai-nav-bg-hexled-dark4.jpg") !important;
background-size: cover;
}
/* SSAI persona: photo sits in the dropdown column only. Navbar hex/solid stays on #mj-navbar. */
#navbarNavDropdown {
position: relative;
}
#navbarNavDropdown.show {
min-height: 350px;
}
#navbarNavDropdown.ssai-persona-ssai {
position: relative;
isolation: isolate;
}
#navbarNavDropdown.ssai-persona-ssai::before {
content: "";
position: absolute;
inset: 0;
bottom: -8px;
background-image: url("/wp-content/plugins/ssai-chat/assets/img/split-screen-ai-app-image-1024x576-dark-v2.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
pointer-events: none;
}
.mj-overlay.light #navbarNavDropdown.ssai-persona-ssai::before {
background-image: url("/wp-content/plugins/ssai-chat/assets/img/split-screen-ai-app-image-1024x576-white-pale-v6.png");
filter: grayscale(1);
}
#navbarNavDropdown.ssai-persona-ssai > *:not(#ssai-menu-glass) {
position: relative;
z-index: 1;
}
#navbarNavDropdown .navbar-nav {
position: relative;
z-index: 1;
}
#ssai-menu-glass {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 0;
height: 0;
max-width: 250px;
opacity: 0;
pointer-events: none;
border: none;
border-radius: 8px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.mj-overlay.dark #ssai-menu-glass {
background: rgba(0, 0, 0, 0.225);
}
.mj-overlay.light #ssai-menu-glass {
background: rgba(255, 255, 255, 0.275);
}
#navbarNavDropdown.ssai-persona-ssai .nav-link {
text-align: center !important;
}
.mj-overlay.dark #navbarNavDropdown.ssai-persona-ssai p,
.mj-overlay.dark #navbarNavDropdown.ssai-persona-ssai .nav-link,
.mj-overlay.dark #navbarNavDropdown.ssai-persona-ssai .nav-link:hover,
.mj-overlay.dark #navbarNavDropdown.ssai-persona-ssai .nav-link:focus,
.mj-overlay.dark #navbarNavDropdown.ssai-persona-ssai hr {
color: #ffffff !important;
}
.mj-overlay.light #navbarNavDropdown.ssai-persona-ssai .nav-link,
.mj-overlay.light #navbarNavDropdown.ssai-persona-ssai .nav-link:hover,
.mj-overlay.light #navbarNavDropdown.ssai-persona-ssai .nav-link:focus {
color: #111111 !important;
}
#img-mj-eye, #img-mj-eye-leftpane{
height: 80px !important;
}
.mindjack .spinner_spacer{
height:0px;
}
html, body {
scroll-behavior: auto !important;
}
.scroll-locked {
overflow: hidden;
position: fixed;
width: 100%;
}
.noselect {
user-select: none; /* Standard syntax */
-webkit-user-select: none; /* Chrome, Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
/*.vc_row[data-vc-full-width="true"] {*/
/* transition: width 0.45s ease !important;*/
/* transition: left 0.45s ease !important;*/
/*}*/
.wp_main_37x .vc_row[data-vc-full-width="true"] {
width: 66vw !important;
left: calc(
((576.2509803922px - 33.0348039216vw)
- clamp(0px, 628.9057720058px - 33.2227032227vw, 230.2333333333px))
- 0.25px
) !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
/*max-width: none !important;*/
padding-left: 0 !important;
padding-right: 0 !important;
/*left: 17vw !important;*/
/*left: -4.925vw !important;*/
/*left: calc(20.9823529412px - 5.9485294118vw) !important;*/
/*right: auto !important;*/
/*transition: all 0.45s ease;*/
/*margin-left: 0 !important;*/
/*margin-right: 0 !important;*/
/*transform: none !important;*/
/*max-width: none !important;*/
/*padding-left: 0 !important;*/
/*padding-right: 0 !important;*/
/*position: relative !important;*/
/*width: 66vw !important;*/
/*left: 0 !important;*/
/*padding-left: 0px !important;*/
/*padding-right: 0px !important;*/
/*transition: all 0.45s ease !important;*/
/*right: auto !important;*/
/*margin-left: 0 !important;*/
/*margin-right: 0 !important;*/
/*transform: none !important;*/
/*max-width: none !important;*/
/*!*position: relative !important;*!*/
/*width: 100% !important; !* ← fill the 66% wrapper, no vw math *!*/
/*left: 0 !important; !* ← kill WPBakery’s offset *!*/
/*right: auto !important;*/
/*!* Belt-and-braces: nuke the usual tricks *!*/
/*!*margin-left: 0 !important;*!*/
/*!*margin-right: 0 !important;*!*/
/*transform: none !important;*/
/*max-width: none !important;*/
/*padding-left: 0 !important;*/
/*padding-right: 0 !important;*/
/*width: 83vw !important;*/
/*width: 66vw !important;*/
/*If pane = P%, then:*/
/*width: (100 - P)vw;*/
/*left: (P / 2)vw;*/
/*transition: width 0.45s ease !important;*/
/*transition: left 0.45s ease !important;*/
/*transition: none !important;*/
/*width: 66vw !important;*/
/*left: 30.3% !important;*/
/*width: 66vw !important;*/
/*left: 37.85% !important;*/
}
@media (min-width: 993px) {
.wp_main_37x .phantom-sticky .fixed-masthead.masthead {
width: 66.2vw !important;
transition: width 0.45s !important;
}
}
.mj-half-open .transparent-header-background {
width: 500px !important;
transition: width 0.45s !important;
}
@media (max-width: 1800px) {
.mj-half-open .container {
width: auto !important;
}
}
/*.plugin37x-scope .input-group {*/
/* display: flex !important;*/
/* align-items: stretch !important; !* important so they share the same line *!*/
/* width: 100% !important;*/
/*}*/
/*.plugin37x-scope .input-group > .form-control {*/
/* flex: 1 1 auto !important; !* allows textarea to fill remaining space *!*/
/* width: 1% !important; !* prevents wrapping *!*/
/* margin-bottom: 0 !important; !* prevents collapsing with next element *!*/
/*}*/
/*.plugin37x-scope .input-group > .input-group-text {*/
/* display: flex !important;*/
/* align-items: center !important;*/
/*}*/
/* Base box-sizing for predictable width */
.mindjack *, .mindjack *::before, .mindjack *::after { box-sizing: border-box; }
/* Fixed, centered container with 650px max (and safe side margins on small screens) */
.ask37x-sticky {
position: fixed;
left: 0;
right: 0;
bottom: 8px;
width: calc(100% - 32px);
max-width: 650px;
transition-duration: 0.45s;
transition: max-width 0.45s ease, transform 0.45s ease, width 0.45s ease;
margin-inline: auto;
z-index: 1000029999 !important;
font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI",
Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
will-change: transform, max-width;
contain: layout paint;
backface-visibility: hidden;
/*next line is useful if floating ask anything box needs to be floating in the "center + ___px" but need to update JS code to reset to this instead of "none" or zero */
/*transform: translateX(150px);*/
}
/* isolate from reflow paint */
/*will-change: transform, max-width;*/
/*contain: layout paint;*/
/*backface-visibility: hidden;*/
/* Pill wrapper */
.ask37x-form {
display: flex;
align-items: center;
gap: 12px;
/*background: #3a3a3a;*/
/*background: rgba(58, 58, 58, 0.5);*/
backdrop-filter: blur(12px) saturate(180%) !important;
-webkit-backdrop-filter: blur(12px) saturate(180%) !important; /* Safari support */
border-radius: 44px; /* pill corners */
/*border: 1px solid rgba(255, 255, 255, 0.3);*/
/*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
padding: 12px 18px;
/*box-shadow: 0 10px 24px rgba(0,0,0,0.25);*/
width: 100%;
}
.ask37x-form.light{
background: rgba(230, 230, 230, 0.5);
}
.ask37x-form.dark{
background: rgba(58, 58, 58, 0.5);
}
/* Firefox-specific override; because Firefox does not support backdrop-filter: blur(12px) saturate(180%); */
@-moz-document url-prefix() {
.ask37x-form.dark {
background: rgba(80, 80, 80, 0.95); /* Fallback */
}
.ask37x-form.light {
background: rgba(230, 230, 230, 0.95); /* Fallback */
}
}
.mindjack textarea{
font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol !important;
font-size: 16px !important;
height: 24px !important;
min-height: 24px !important;
width: auto !important;
background: none !important;
}
/* Textarea styled like a single-line input; grows as you type */
.ask37x-textarea {
flex: 1 1 auto;
min-width: 0;
resize: none;
border: none !important;
margin-bottom: 5px !important;
outline: none;
background: none;
font: 16px/1.5 ui-sans-serif, -apple-system, system-ui, "Segoe UI",
Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 0; /* pill provides the padding */
height: 24px !important;
min-height: 24px !important;
width: auto !important;
box-shadow: none !important;
}
ask37x-textarea.dark, ask37x-textarea.dark:focus{
color: #ffffff !important;
}
ask37x-textarea.light, ask37x-textarea.light:focus{
color: #000000 !important;
}
.ask37x-textarea.dark::placeholder {
/*color: #9a9a9a;*/
color: #cccccc;
opacity: 1;
}
.ask37x-textarea.light::placeholder {
/*color: #9a9a9a;*/
color: #555555;
opacity: 1;
}
/* Round send button */
.ask37x-send i.fa-solid{
color: #ffffff !important;
}
/*.mindjack .dark textarea:focus {*/
/* color: #ff0000;*/
/*}*/
.mindjack .dark textarea, .mindjack .mj-prompt.dark textarea{
color: #ffffff !important;
}
.mindjack .light textarea, .mindjack .mj-prompt.light textarea{
color: #000000 !important;
}
.ask37x-send {
width: 44px !important;
height: 44px !important;
border: none !important;
border-radius: 50% !important;
background: #000000 !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
line-height: 1 !important;
padding: 0 !important;
/*transition: background 120ms ease-in-out, transform 60ms ease;*/
flex: 0 0 44px !important;
z-index: 1000030000 !important;
}
.ask37x-send:hover,
.ask37x-send:focus { background: #5d5d5d !important; outline: none !important; }
.ask37x-send:active { transform: translateY(1px); }
/* Small centered label below */
.mindjack .ask37x-label {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 2px;
text-align: center;
font-size: 12px;
color: #9a9a9a;
user-select: none;
display:none;
}
.plugin37x-scope #mj-navbar {
width: 14vw;
/*box-sizing: border-box;*/
}
.plugin37x-scope #mj-navbar .nav-link {
font-size: 14px;
}
/* Open/right state */
.ask37x-sticky-right {
position: fixed;
bottom: 24px;
right: 10px; /* pin to right */
left: auto;
max-width: calc(34vw - 30px);
width: 100%;
transform: none; /* pinned, no offset */
transition: transform 0.45s ease;
will-change: transform;
z-index: 1000030;
}
/* Avada theme requires white instead of transparent background to allow for transition below without canvas bleed */
.wp_main_37x .fusion-tb-header {
background-color: #ffffff !important;
z-index: 100 !important;
}
/* Avada theme restores correct postion of flexslider when 37x Plugin is open */
.wp_main_37x .tfs-slider.flexslider.main-flex{
z-index: 0 !important;
left:0; /* JS may intelligently modify this to 33% or 0 (eg. 33% is for Avada Agency... 0 is for Avada Factory) */
transition: left 0.45s ease, max-width 0.45s ease;
max-width: 66vw !important;
}
/*if(.tfs-slider:left>0){left=33%}else{left=0}*/
.wp_main_37x .mfn-header-tmpl{
width:66vw !important;
transition: width 0.45s ease;
}
.mfn-header-tmpl{
width:100vw !important;
transition: width 0.45s ease;
}
/* Set Revolution Slider to 66vw (not required if slider has setting of "Layout > Width:Auto") */
.wp_main_37x sr7-content {
width:66vw !important;
transition: width 0.45s ease;
}
/* Smooth transition for Revolution Slider back to 100vw (not required if slider on "Layout > Width:Auto") */
/*sr7-content {*/
/* width:100vw !important;*/
/* transition: width 0.45s ease;*/
/*}*/
/*.wp_main_37x sr7-grp {*/
/* left:100px !important;*/
/* transition: width 0.45s ease;*/
/*}*/
/*.tfs-slider .flexslider main-flex{*/
/* left: 17% !important;*/
/* transform: translateX(calc(-17% + 149.5px)) !important;*/
/*}*/
/*navbar-collapse collapse show*/
/*navbar.navbar-collapse navbar.collapse navbar.show{*/
/* display: block !important;*/
/*}*/
.plugin37x-scope .collapse.show{
display: block !important;
}
/*fusion-fullwidth fullwidth-box fusion-builder-row-1-2 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling*/
.wp_main_37x .awb-menu__mega-wrap{
/*ADD BACK!*/
max-width:55vw !important;
transform: translateX(-17vw) !important;
transition: max-width 0.45s ease;
/*position: fixed !important;*/
/*left:0 !important;*/
/*top:0 !important;*/
}
.wp_main_37x_common #coming-soon-footer-banner{
/*ADD BACK!*/
width:66vw !important;
transition: width 0.45s ease;
}
.wp_main_37x #coming-soon-footer-banner{
/*ADD BACK!*/
width:66vw !important;
transition: width 0.45s ease;
}
.wp_main_37x_common header.two-thirds-37x{
/*ADD BACK!*/
width: 66vw !important;
transition: width 0.45s ease;
}
.wp_main_37x_common #main-header, .wp_main_37x_common #Top_bar{
/*ADD BACK!*/
width: 66vw !important;
transition: width 0.45s ease;
}
.wp_main_37x_common .container{
/*ADD BACK!*/
max-width: 66vw !important;
margin-left:0px;
transition: max-width 0.45s ease;
}
.wp_main_37x_common #content, .wp_main_37x_common #Content, .wp_main_37x_common footer{
/*ADD BACK!*/
width: 66vw;
transition: width 0.45s ease;
}
.wp_main_37x_common .mfn-megamenu-tmpl-builder{
/*ADD BACK!*/
margin-left:0px !important;
}
.wp_main_37x .fusion-body:not(.has-sidebar) .alignwide:not(.tribe-events-view){
/*not 66vw because woocommerce seems to have zero padding*/
/*ADD BACK!*/
width:64vw !important;
}
.wp_main_37x .awb-off-canvas-wrap{
/*ADD BACK!*/
width:66vw !important;
}
/*header: */
.aimenu37x_header {
display: none !important;
visibility: hidden !important;
}
/*.top-bar, .topbar, .top-area, .toparea, #top-bar, #topbar, #top-area, #toparea{*/
/* display: none !important;*/
/* visibility: hidden !important;*/
/*}*/
/*tfs-slider flexslider main-flex*/
/*--awb-megamenu-width: var(--site_width); left: -455.882px; right: auto;*/
/* Base bar + typography */
.aimenu37x_root{
display:flex; align-items:center; background:none; color:#000000;
font-size:15px; line-height:1.5; font-weight:600;
/*padding-top: 8px;*/
padding-top: 0px;
text-transform: uppercase;
position:fixed; top:0; left:0;
/*z-index:999999999;*/
z-index: 99999;
right:0; width:100%;
transition: width 0.45s ease, background-color 0.45s ease;
background: transparent;
/*border-bottom:1px solid #0f0;*/
}
.aimenu37x_root.scrolled {
background-color: #ffffff; /* solid white */
}
.wp_main_37x_common .aimenu37x_root{
right:33vw; width:66vw;
transition: width 0.45s ease;
}
.aimenu37x_root *{ box-sizing:border-box; }
/* Inner container */
.aimenu37x_inner{
width:100%; max-width:1240px; margin:0 auto;
padding-top:10px;
padding-bottom:10px;
padding-left: 20px;
padding-right: 20px;
display:flex; align-items:center; gap:24px;
}
/* Brand */
.aimenu37x_brand{
color:#000000; text-decoration:none; font-weight:800; letter-spacing:.3px;
border:none;
padding-top:13px;
padding-bottom:6px;
padding-left:0px;
padding-right:6px;
}
.aimenu37x_brand:focus-visible{ outline:2px solid #0f0; outline-offset:2px; }
/* Top-level list -> one line */
.aimenu37x_list{
margin:0; padding:0; list-style:none;
display:flex; align-items:center; gap:14px;
/* right alignment */
margin-left: auto; /* pushes the to the right edge */
justify-content: flex-end; /* aligns its children to the right within the */
}
/* Top-level items/links */
.aimenu37x_item > a{
display:inline-flex; align-items:center; gap:6px;
color:#000000; text-decoration:none; padding:8px 12px; border-radius:6px;
border:1px solid transparent;
}
.aimenu37x_item > a:hover{ background:rgba(255,255,255,0); text-decoration: none; color:rgb(255, 0, 84) }
.aimenu37x_item > a:focus-visible{ outline:2px solid #0f0; outline-offset:2px; }
/* Caret */
.aimenu37x_caret{ font-size:.9em; opacity:.85; }
/* Dropdown container */
.aimenu37x_has_dropdown{ position:relative; }
/* Dropdown panel (hidden by default) */
.aimenu37x_dropdown{
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
margin-top: 0; /* was 8px */
padding: 8px;
list-style: none;
background: #ffffff;
border: none;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
display: none;
z-index: 1000;
}
/* Show dropdown on hover or keyboard focus */
.aimenu37x_has_dropdown:hover > .aimenu37x_dropdown,
.aimenu37x_has_dropdown:focus-within > .aimenu37x_dropdown{ display:block; }
/* Dropdown items */
.aimenu37x_dropdown > li{ margin:0; padding:0; }
.aimenu37x_dropdown a{
display:block; padding:10px 12px; color:#000000; text-decoration:none; border-radius:8px;
}
.aimenu37x_dropdown a:hover{ background:rgba(0,0,0,0.01); color:rgb(255, 0, 84); text-decoration: none; }
.aimenu37x_dropdown a:focus-visible{ outline:2px solid #0f0; outline-offset:2px; }
/* Optional: make active page stand out */
.aimenu37x_item > a[aria-current="page"]{ background:rgba(0,255,0,0.14); }
/* Small screens: allow wrapping */
@media (max-width: 720px){
.aimenu37x_inner{ flex-wrap:wrap; gap:10px; }
.aimenu37x_list{ flex-wrap:wrap; gap:6px; }
.aimenu37x_has_dropdown{ width:100%; }
.aimenu37x_dropdown{ position:static; display:none; margin:6px 0 0; }
.aimenu37x_has_dropdown:hover > .aimenu37x_dropdown,
.aimenu37x_has_dropdown:focus-within > .aimenu37x_dropdown{ display:block; }
}
/* Feature pill (apply to the ) */
.aimenu37x_item > a.aimenu37x_feature{
color:rgb(255, 0, 84);
background:#fff;
border-radius:5px;
padding:8px 16px; /* a bit wider than regular links */
margin-left:8px;
margin-right:0px;
text-transform: none;
letter-spacing: 1px;
font-weight: 600;
/*box-shadow:0 2px 10px rgba(0,0,0,.08);*/
/*border:1px solid rgba(0,0,0,.08);*/
}
/* Keep it white on hover/focus; no gray tint */
.aimenu37x_item > a.aimenu37x_feature:hover{
background:#fff;
text-decoration:none;
box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.aimenu37x_item > a.aimenu37x_feature:focus-visible{
outline:2px solid #000; /* or your accent color */
outline-offset:2px;
}
@media (max-width: 1499px) {
.wp_main_37x_common .aimenu37x_item > a.aimenu37x_feature{
display: none;
}
}
@media (max-width: 1010px) {
.aimenu37x_item > a.aimenu37x_feature{
display: none;
}
}
/* Black fade only inside mj-overlay */
#mj-overlay .askai-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1 !important; /* just below modal */
}
/* High z-index modal */
#askAiModal.modal {
z-index: 3900000001 !important;
position: absolute; /* center within mj-overlay */
}
/* Backdrop sits directly inside overlay */
.modal-backdrop.show { display: none !important; } /* prevent Bootstrap global backdrop */
#askAiModal {
z-index: 3900000001 !important;
}
.mindjack button, .mindjack p button{
font-size: 12px !important;
padding-left: 8px !important;
padding-right: 8px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
}
/*.wp_main_37x .vc_row[data-vc-full-width="true"] {*/
/* position: relative !important;*/
/* width: 66vw !important;*/
/* left: -4.925vw !important;*/
/* right: auto !important;*/
/* !* Nuke the common WPBakery full-width tricks *!*/
/* margin-left: 0 !important;*/
/* margin-right: 0 !important;*/
/* transform: none !important;*/
/* max-width: none !important;*/
/* padding-left: 0 !important;*/
/* padding-right: 0 !important;*/
/*}*/
/* ===================== LEFT OVERLAY ===================== */
#ssai-left-overlay {
position: fixed;
top: 0;
left: 0;
width: 66%;
height: 100vh;
background-color: #ffffff;
color: #000000;
z-index: 2000009997; /* Below right overlay at 1000009998 */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: opacity 0.3s ease;
}
/* 1199: align with JS HALF at >=1200 (max-width:1200 still matched at exact 1200) */
@media (max-width: 1199px) {
#ssai-left-overlay {
width: 100%;
}
}
/* Override mj-overlay positioning for mj-overlay2 inside left overlay */
#ssai-left-overlay #mj-overlay2 {
position: sticky !important;
right: auto !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
z-index: 11;
background: #fff;
}
/* Ensure navbar2 is visible */
#ssai-left-overlay #mj-navbar2 {
position: relative !important;
}
.ssai-left-overlay-content {
padding: 20px;
box-sizing: border-box;
}
/* Compensate for WP admin bar */
body.admin-bar #ssai-left-overlay {
top: 32px;
height: calc(100vh - 32px);
}
@media (max-width: 782px) {
body.admin-bar #ssai-left-overlay {
top: 0px;
height: 100vh;
}
}