#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated {
--kravmaga-green: #93C11F;
--kravmaga-green-hover: #79A11A;
--km-chat-bg: #f4f6f0;
--km-chat-surface: #ffffff;
--km-chat-text: #2c2c2c;
--km-chat-muted: #6b6b6b;
--km-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
left: auto !important;
top: auto !important;
z-index: 2147483646 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
max-width: none !important;
min-width: 0 !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
float: none !important;
clear: none !important;
font-family: var(--km-font) !important;
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
color: var(--km-chat-text) !important;
text-align: left !important;
text-transform: none !important;
letter-spacing: normal !important;
box-sizing: border-box !important;
-webkit-font-smoothing: antialiased;
} #kravmaga-chatbot-wrap.kravmaga-chatbot-isolated *,
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated *::before,
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated *::after {
box-sizing: border-box !important;
font-family: inherit !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated button,
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated input,
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated img,
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated div:not(.kravmaga-msg):not(.kravmaga-chatbot-messages):not(.kravmaga-chatbot-header):not(.kravmaga-chatbot-header-logo):not(.kravmaga-chatbot-header-text):not(.kravmaga-chatbot-input-wrap),
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated span,
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated strong,
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated svg {
margin: 0 !important;
padding: 0;
border: none;
outline: none;
background: transparent;
box-shadow: none;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: normal !important;
line-height: inherit;
vertical-align: baseline;
float: none !important;
width: auto;
height: auto;
max-width: none;
min-height: 0;
min-width: 0;
position: static;
transform: none;
opacity: 1;
visibility: visible;
list-style: none !important;
appearance: none;
-webkit-appearance: none;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated img {
border: none !important;
box-shadow: none !important;
vertical-align: middle;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated.kravmaga-chatbot-hidden .kravmaga-chatbot-btn {
display: flex !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated.kravmaga-chatbot-hidden #kravmaga-chatbot-window {
display: none !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated:not(.kravmaga-chatbot-hidden) .kravmaga-chatbot-btn {
display: none !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated:not(.kravmaga-chatbot-hidden) #kravmaga-chatbot-window {
display: flex !important;
} #kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-btn {
position: relative !important;
display: flex !important;
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
max-width: 60px !important;
max-height: 60px !important;
border-radius: 50% !important;
background: var(--kravmaga-green) !important;
border: none !important;
cursor: pointer !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
transition: background 0.2s, transform 0.15s !important;
padding: 0 !important;
margin: 0 !important;
color: #fff !important;
font: inherit !important;
text-align: center !important;
line-height: 1 !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-btn:hover {
background: var(--kravmaga-green-hover) !important;
transform: scale(1.05) !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-btn:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(147, 193, 31, 0.5) !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-btn svg {
width: 28px !important;
height: 28px !important;
color: #fff !important;
display: block !important;
flex-shrink: 0 !important;
} #kravmaga-chatbot-wrap.kravmaga-chatbot-isolated #kravmaga-chatbot-window {
position: relative !important;
display: flex !important;
flex-direction: column !important;
width: 380px !important;
max-width: calc(100vw - 48px) !important;
height: 520px !important;
max-height: calc(100vh - 120px) !important;
min-height: 0 !important;
background: var(--km-chat-surface) !important;
border-radius: 12px !important;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
overflow: hidden !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
} #kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-header {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 18px !important;
background: linear-gradient(135deg, var(--kravmaga-green) 0%, #7aad18 100%) !important;
color: #fff !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
flex-shrink: 0 !important;
border: none !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-header-logo {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
flex-shrink: 0 !important;
border-radius: 10px !important;
background: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
border: 2px solid rgba(255, 255, 255, 0.2) !important;
padding: 0 !important;
margin: 0 !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-header-logo img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
float: none !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-header-text {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-width: 0 !important;
gap: 2px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-header-text strong {
display: block !important;
font-size: 1.1em !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
line-height: 1.2 !important;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-header-text span {
display: block !important;
font-size: 0.82em !important;
opacity: 0.92 !important;
font-weight: 500 !important;
color: #fff !important;
line-height: 1.3 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-close {
background: rgba(0, 0, 0, 0.12) !important;
border: none !important;
color: #fff !important;
font-size: 22px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: background 0.2s !important;
padding: 0 !important;
margin: 0 !important;
text-align: center !important;
box-shadow: none !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-close:hover {
background: rgba(0, 0, 0, 0.22) !important;
color: #fff !important;
} #kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-messages {
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 16px !important;
background: var(--km-chat-bg) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
margin: 0 !important;
border: none !important;
min-height: 0 !important;
width: 100% !important;
max-width: 100% !important;
} #kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-msg {
display: block !important;
position: relative !important;
width: auto !important;
max-width: 85% !important;
min-width: 0 !important;
min-height: auto !important;
height: auto !important;
padding: 12px 14px !important;
margin: 0 !important;
border-radius: 12px !important;
line-height: 1.5 !important;
font-size: 15px !important;
font-weight: 400 !important;
text-align: left !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
overflow: visible !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
box-sizing: border-box !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-msg-bot {
align-self: flex-start !important;
background: var(--km-chat-surface) !important;
color: var(--km-chat-text) !important;
border: 1px solid #e2e8de !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
border-bottom-left-radius: 4px !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-msg-user {
align-self: flex-end !important;
margin-left: auto !important;
background: var(--kravmaga-green) !important;
color: #fff !important;
border: none !important;
border-bottom-right-radius: 4px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
} #kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-input-wrap {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 16px !important;
background: var(--km-chat-surface) !important;
border-top: 1px solid #e5e8e3 !important;
margin: 0 !important;
flex-shrink: 0 !important;
width: 100% !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated #kravmaga-chatbot-input {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 44px !important;
padding: 12px 14px !important;
border: 1px solid #d8ddd4 !important;
border-radius: 24px !important;
background: #fafbf9 !important;
color: var(--km-chat-text) !important;
font-size: 15px !important;
font-family: var(--km-font) !important;
font-weight: 400 !important;
line-height: 1.4 !important;
margin: 0 !important;
box-shadow: none !important;
display: block !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated #kravmaga-chatbot-input::placeholder {
color: var(--km-chat-muted) !important;
opacity: 1 !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated #kravmaga-chatbot-input:focus {
outline: none !important;
border-color: var(--kravmaga-green) !important;
background: #fff !important;
color: var(--km-chat-text) !important;
box-shadow: 0 0 0 3px rgba(147, 193, 31, 0.2) !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-send-btn {
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
min-height: 46px !important;
max-width: 46px !important;
max-height: 46px !important;
border-radius: 50% !important;
background: var(--kravmaga-green) !important;
border: none !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: background 0.2s !important;
padding: 0 !important;
margin: 0 !important;
color: #fff !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-send-btn:hover {
background: var(--kravmaga-green-hover) !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-send-btn svg {
width: 20px !important;
height: 20px !important;
color: #fff !important;
stroke: currentColor !important;
fill: none !important;
display: block !important;
flex-shrink: 0 !important;
} @media (max-width: 480px) {
body.kravmaga-chatbot-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
}
}
@media (max-width: 480px) {
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated {
bottom: max(16px, env(safe-area-inset-bottom)) !important;
right: max(16px, env(safe-area-inset-right)) !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated:not(.kravmaga-chatbot-hidden) {
inset: 0 !important;
bottom: 0 !important;
right: 0 !important;
left: 0 !important;
top: 0 !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-btn {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
max-width: 56px !important;
max-height: 56px !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated #kravmaga-chatbot-window {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
max-height: 100% !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-header {
padding: 12px 12px 12px max(16px, env(safe-area-inset-left)) !important;
padding-right: max(16px, env(safe-area-inset-right)) !important;
min-height: 48px !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-close {
min-width: 44px !important;
min-height: 44px !important;
-webkit-tap-highlight-color: transparent !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-messages {
padding: 12px !important;
padding-left: max(12px, env(safe-area-inset-left)) !important;
padding-right: max(12px, env(safe-area-inset-right)) !important;
-webkit-overflow-scrolling: touch !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-msg {
max-width: 90% !important;
padding: 12px 14px !important;
font-size: 16px !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-input-wrap {
padding: 10px 12px !important;
padding-left: max(12px, env(safe-area-inset-left)) !important;
padding-right: max(12px, env(safe-area-inset-right)) !important;
padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated #kravmaga-chatbot-input {
min-height: 44px !important;
font-size: 16px !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-send-btn {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
max-width: 48px !important;
max-height: 48px !important;
-webkit-tap-highlight-color: transparent !important;
}
}
@media (hover: none) {
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-btn:active {
transform: scale(0.98) !important;
}
#kravmaga-chatbot-wrap.kravmaga-chatbot-isolated .kravmaga-chatbot-btn:hover {
transform: none !important;
}
}