/* WordPress Chatbot Frontend Styles */
.wp-local-chatbot-widget {
position: fixed;
z-index: 2147483647 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
/* Position-specific styles */
.wp-local-chatbot-widget.position-bottom-right {
bottom: 20px;
right: 20px;
}
.wp-local-chatbot-widget.position-bottom-left {
bottom: 20px;
left: 20px;
}
.wp-local-chatbot-widget.position-bottom-center {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.wp-local-chatbot-widget.position-right-center {
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.wp-local-chatbot-widget.position-left-center {
top: 50%;
left: 20px;
transform: translateY(-50%);
}
.wp-local-chatbot-toggle {
width: 57px; /* mockup size */
height: 57px; /* mockup size */
background: #141414 !important; /* mockup dark circle */
border-radius: 50%;
cursor: pointer;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); /* softer, larger drop shadow */
transition: transform 0.2s ease, box-shadow .2s ease;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.wp-local-chatbot-toggle:hover {
transform: scale(1.1);
}
/* Hide the default icon and draw a custom one matching the mockup */
.wp-local-chatbot-toggle svg { display: none !important; }
.wp-local-chatbot-toggle::after{
content: '';
position: absolute; inset: 0; margin: auto;
width: 28px; height: 24px; display: block;
background-repeat: no-repeat; background-position:center; background-size: 28px 24px;
/* New launcher icon per provided SVG */
background-image: url("data:image/svg+xml;utf8,");
}
.wp-local-chatbot-toggle:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.3); }
/* ========================================
Icon Animation Effects (v1.6.3)
======================================== */
/* Animation Keyframes */
@keyframes wp-lc-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
@keyframes wp-lc-ring-pulse {
0% { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(20, 20, 20, 0.7); }
50% { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(20, 20, 20, 0); }
100% { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(20, 20, 20, 0); }
}
@keyframes wp-lc-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes wp-lc-wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-3deg); }
75% { transform: rotate(3deg); }
}
@keyframes wp-lc-glow {
0%, 100% { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); }
50% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(20, 20, 20, 0.6); }
}
@keyframes wp-lc-heartbeat {
0%, 100% { transform: scale(1); }
10% { transform: scale(1.1); }
20% { transform: scale(1); }
30% { transform: scale(1.1); }
40% { transform: scale(1); }
}
/* Base Animation Classes - Normal speed (2.5s) */
#wp-local-chatbot-toggle.wp-local-chatbot-toggle.animate-pulse {
animation: wp-lc-pulse 2.5s ease-in-out infinite !important;
}
#wp-local-chatbot-toggle.wp-local-chatbot-toggle.animate-ring {
animation: wp-lc-ring-pulse 2.5s ease-in-out infinite !important;
}
#wp-local-chatbot-toggle.wp-local-chatbot-toggle.animate-bounce {
animation: wp-lc-bounce 2.5s ease-in-out infinite !important;
}
#wp-local-chatbot-toggle.wp-local-chatbot-toggle.animate-wiggle {
animation: wp-lc-wiggle 2.5s ease-in-out infinite !important;
}
#wp-local-chatbot-toggle.wp-local-chatbot-toggle.animate-glow {
animation: wp-lc-glow 2.5s ease-in-out infinite !important;
}
#wp-local-chatbot-toggle.wp-local-chatbot-toggle.animate-heartbeat {
animation: wp-lc-heartbeat 2.5s ease-in-out infinite !important;
}
/* Speed Variants - Slow (4s) */
#wp-local-chatbot-toggle.speed-slow.animate-pulse { animation-duration: 4s !important; }
#wp-local-chatbot-toggle.speed-slow.animate-ring { animation-duration: 4s !important; }
#wp-local-chatbot-toggle.speed-slow.animate-bounce { animation-duration: 4s !important; }
#wp-local-chatbot-toggle.speed-slow.animate-wiggle { animation-duration: 4s !important; }
#wp-local-chatbot-toggle.speed-slow.animate-glow { animation-duration: 4s !important; }
#wp-local-chatbot-toggle.speed-slow.animate-heartbeat { animation-duration: 4s !important; }
/* Speed Variants - Fast (1.5s) */
#wp-local-chatbot-toggle.speed-fast.animate-pulse { animation-duration: 1.5s !important; }
#wp-local-chatbot-toggle.speed-fast.animate-ring { animation-duration: 1.5s !important; }
#wp-local-chatbot-toggle.speed-fast.animate-bounce { animation-duration: 1.5s !important; }
#wp-local-chatbot-toggle.speed-fast.animate-wiggle { animation-duration: 1.5s !important; }
#wp-local-chatbot-toggle.speed-fast.animate-glow { animation-duration: 1.5s !important; }
#wp-local-chatbot-toggle.speed-fast.animate-heartbeat { animation-duration: 1.5s !important; }
/* Pause animation when chat is open */
#wp-local-chatbot-widget.chat-open #wp-local-chatbot-toggle,
.wp-local-chatbot-widget.chat-open #wp-local-chatbot-toggle {
animation: none !important;
}
/* Pause animation on hover and apply scale transform */
#wp-local-chatbot-toggle.animate-pulse:hover,
#wp-local-chatbot-toggle.animate-ring:hover,
#wp-local-chatbot-toggle.animate-bounce:hover,
#wp-local-chatbot-toggle.animate-wiggle:hover,
#wp-local-chatbot-toggle.animate-glow:hover,
#wp-local-chatbot-toggle.animate-heartbeat:hover {
animation-play-state: paused !important;
transform: scale(1.1) !important;
}
/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
#wp-local-chatbot-toggle.animate-pulse,
#wp-local-chatbot-toggle.animate-ring,
#wp-local-chatbot-toggle.animate-bounce,
#wp-local-chatbot-toggle.animate-wiggle,
#wp-local-chatbot-toggle.animate-glow,
#wp-local-chatbot-toggle.animate-heartbeat {
animation: none !important;
}
}
/* Floating teaser (compact, non-intrusive) */
.wp-local-chatbot-teaser {
position: absolute;
right: 0;
bottom: 76px; /* directly above 60px launcher + spacing */
display: flex;
flex-direction: column;
gap: 8px;
max-width: min(90vw, 420px);
z-index: 10000;
}
.wp-local-chatbot-teaser .wp-lc-teaser-item{ position: relative; }
.wp-local-chatbot-teaser .wp-lc-teaser-close{
position:absolute;
top:-40px; /* lift further above to avoid overlap */
right:-10px; /* nudge slightly outward */
width:34px; /* match main window close */
height:34px; /* match main window close */
border-radius:17px;
background: transparent !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 34px 34px !important;
color: transparent !important; /* hide fallback glyph */
border:none !important;
box-shadow:none !important;
cursor:pointer;
display:block;
font-size:0 !important;
line-height:0;
z-index: 10001; /* above teaser */
transition: transform .15s ease, filter .15s ease;
padding:0;
margin:0;
}
/* Hover visuals handled in JS: .wp-local-chatbot-teaser .wp-lc-teaser-close:hover */
/* Ensure lead/contact forms render above message avatars */
.wp-local-chatbot-lead-form,
.wp-local-chatbot-agent-form,
.wp-local-chatbot-timeout-form {
position: relative;
z-index: 2;
}
/* Strong overrides to beat global theme button styles (desktop) */
#wp-local-chatbot-widget .wp-local-chatbot-header #wp-local-chatbot-close,
#wp-local-chatbot-widget .wp-local-chatbot-header-actions #wp-local-chatbot-close{
/* Use unified circular close icon rendered from inline SVG */
width: 34px !important;
height: 34px !important;
background: transparent !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 34px 34px !important;
color: transparent !important; /* hide any text glyph */
border: none !important;
box-shadow: none !important;
opacity: 1 !important;
font-size: 0 !important; /* visually hide fallback glyph while keeping button accessible */
}
/* Close button hover visuals handled in JS:
#wp-local-chatbot-widget .wp-local-chatbot-header #wp-local-chatbot-close:hover,
#wp-local-chatbot-widget .wp-local-chatbot-header-actions #wp-local-chatbot-close:hover
*/
#wp-local-chatbot-widget .wp-lc-drawer-close{
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
#wp-local-chatbot-widget .wp-lc-drawer-close:hover{
background: var(--wp-local-chatbot-secondary-color, #006291) !important;
color: #ffffff !important;
}
.wp-local-chatbot-teaser .wp-lc-teaser-item{
background: var(--wp-local-chatbot-primary-color, #0073aa);
color: #fff;
padding: 12px 14px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.18);
font-weight: 500;
white-space: nowrap; /* keep one line on desktop */
}
.wp-local-chatbot-teaser .wp-lc-teaser-whatsapp{
text-decoration: none;
display: inline-block;
background: var(--wp-local-chatbot-secondary-color, #006291) !important; /* Use settings secondary color */
}
/* WhatsApp button on teaser (same size/placement as close, to its left) */
.wp-local-chatbot-teaser .wp-lc-teaser-whatsapp-btn{
position:absolute;
top:-40px;
right:28px; /* sits to the left of close (close is at right:-10px and 34px wide) */
width:34px;
height:34px;
border-radius:17px;
background: var(--wp-local-chatbot-secondary-color, #006291);
color: #111B21; /* icon fill is black inside secondary bg */
display:flex; align-items:center; justify-content:center;
text-decoration:none;
box-shadow:none;
z-index:10001;
transition: transform .15s ease, filter .15s ease;
}
.wp-local-chatbot-teaser .wp-lc-teaser-whatsapp-btn:hover{ filter: brightness(0.95); }
.wp-local-chatbot-teaser .wp-lc-teaser-whatsapp-btn svg{ width:18px; height:18px; display:block; }
/* Icebreaker chips under welcome message */
#wp-local-chatbot-widget .wp-local-chatbot-icebreakers{
display: flex;
flex-direction: column; /* stack vertically like pills */
align-items: flex-end; /* align pills to the right (user-side) */
gap: 10px;
margin: 10px 0 8px 0;
max-width: 100%;
}
/* Teaser v2 layout */
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2{ position:absolute; display:none; z-index:10000; max-width: min(92vw, var(--wp-lc-window-width, clamp(350px, 25vw, 450px))) !important; width: min(92vw, var(--wp-lc-window-width, clamp(350px, 25vw, 450px))) !important; }
.position-bottom-right #wp-local-chatbot-teaser.v2{ right:0; bottom:76px; }
.position-bottom-left #wp-local-chatbot-teaser.v2{ left:0; bottom:76px; }
.position-bottom-center #wp-local-chatbot-teaser.v2{ left:50%; transform:translateX(-50%); bottom:76px; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-banner{
display:flex; align-items:center; gap:10px; border:none; cursor:pointer;
background:#1f1f1f; color:#fff; padding:10px 12px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-text{ font-weight:600; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-icebreakers{ display:flex; flex-direction:column; gap:8px; margin-top:10px; align-items:flex-end; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-icebreakers .wp-lc-icebreaker{
background: var(--wp-local-chatbot-icebreaker-bg, var(--wp-local-chatbot-secondary-color, #06c291)) !important;
color: var(--wp-local-chatbot-icebreaker-color, #0d0d0d) !important;
border:none !important;
border-radius: var(--wp-local-chatbot-icebreaker-radius, 20px) !important;
box-shadow: var(--wp-local-chatbot-icebreaker-shadow, 0 0 8px rgba(0,0,0,0.09));
min-height: var(--wp-local-chatbot-icebreaker-height, 40px);
display: inline-flex; align-items: center; justify-content: center;
}
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video{ margin-top:12px; border-radius:12px; overflow:hidden; width:100%; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video-el{
width:100%; height:auto; display:block;
aspect-ratio: 16 / 9;
}
/* Text overlay on teaser video */
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video{ position:relative; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video-overlay{
position:absolute; left:12px; top:10px; right:12px;
pointer-events:none; /* do not block clicks to video */
z-index:1; color:#fff; text-align:left;
opacity: 1; transition: opacity .25s ease;
}
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video-overlay.hidden{ opacity: 0; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-video-title{
text-transform: uppercase;
font-weight: 700; /* bold */
font-size: 14px; line-height: 20px;
letter-spacing: 2.1px;
color: #FFFFFF;
margin: 0 0 4px 0;
font-family: inherit; /* use same font as header/theme */
}
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-video-subtitle{
font-weight: 400; font-size: 14px; line-height: 20px;
letter-spacing: 0;
color: #FFFFFF;
margin: 0;
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}
/* Strongly scoped pill style to avoid theme overrides */
#wp-local-chatbot-widget .wp-lc-icebreaker{
appearance: none;
-webkit-appearance: none;
display: inline-block;
border: 0 !important;
background: var(--wp-local-chatbot-icebreaker-bg, var(--wp-local-chatbot-secondary-color, #006291)) !important;
color: var(--wp-local-chatbot-icebreaker-color, #000000) !important;
box-shadow: var(--wp-local-chatbot-icebreaker-shadow, 0 0 8px rgba(0,0,0,0.09));
border-radius: var(--wp-local-chatbot-icebreaker-radius, 20px);
padding: 10px 12px; /* slightly tighter sides for multi-line pills */
min-height: var(--wp-local-chatbot-icebreaker-height, 40px);
font-family: var(--wp-local-chatbot-icebreaker-font, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 19px !important;
cursor: pointer;
text-align: left !important; /* avoid large side space on wrapped lines */
/* Match normal chat bubble width */
max-width: var(--wp-local-chatbot-bubble-max, 80%) !important;
white-space: normal !important; /* allow wrapping */
overflow-wrap: break-word !important;/* wrap long words */
word-break: normal !important;
hyphens: auto !important;
opacity: var(--wp-local-chatbot-icebreaker-opacity, 1);
}
#wp-local-chatbot-widget .wp-lc-icebreaker:hover,
#wp-local-chatbot-widget .wp-lc-icebreaker:focus{
background: var(--wp-local-chatbot-icebreaker-bg-hover, var(--wp-local-chatbot-secondary-color, #006291)) !important;
color: var(--wp-local-chatbot-icebreaker-color, #000000) !important;
outline: none !important;
box-shadow: var(--wp-local-chatbot-icebreaker-shadow, 0 0 8px rgba(0,0,0,0.09));
}
#wp-local-chatbot-widget .wp-lc-icebreaker:disabled{
opacity: .6;
cursor: default;
}
.position-bottom-left .wp-local-chatbot-teaser{ left: 0; right: auto; }
.position-bottom-center .wp-local-chatbot-teaser{ left: 50%; transform: translateX(-50%); }
.position-right-center .wp-local-chatbot-teaser{ top: 50%; right: 0; bottom:auto; transform: translateY(-50%); }
.position-left-center .wp-local-chatbot-teaser{ top: 50%; left: 0; right:auto; bottom:auto; transform: translateY(-50%); }
@media (max-width: 600px){
/* Force stronger positioning rules for mobile */
.wp-local-chatbot-widget .wp-local-chatbot-teaser{
position: fixed !important;
right: 15px !important;
left: 15px !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
max-width: none !important;
width: calc(100vw - 30px) !important;
box-sizing: border-box !important;
transform: none !important;
text-align: center !important;
z-index: 9998 !important;
}
/* Override positioning for ALL widget positions on mobile - stronger selectors */
.wp-local-chatbot-widget.position-bottom-left .wp-local-chatbot-teaser,
.wp-local-chatbot-widget.position-bottom-center .wp-local-chatbot-teaser,
.wp-local-chatbot-widget.position-bottom-right .wp-local-chatbot-teaser,
.wp-local-chatbot-widget.position-left-center .wp-local-chatbot-teaser,
.wp-local-chatbot-widget.position-right-center .wp-local-chatbot-teaser {
position: fixed !important;
right: 15px !important;
left: 15px !important;
top: auto !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
transform: none !important;
width: calc(100vw - 30px) !important;
box-sizing: border-box !important;
text-align: center !important;
max-width: none !important;
}
/* Strong mobile rules for teaser items */
.wp-local-chatbot-widget .wp-local-chatbot-teaser .wp-lc-teaser-item{
white-space: normal !important;
padding: 16px 20px !important;
font-size: 16px !important;
line-height: 1.4 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: center !important;
margin-bottom: 10px !important;
border-radius: 12px !important;
font-weight: 500 !important;
}
/* Larger hit areas on mobile */
#wp-local-chatbot-widget .wp-local-chatbot-icebreakers{ gap: 10px; }
#wp-local-chatbot-widget .wp-lc-icebreaker{ padding: 12px 16px; font-size: 16px; }
/* Force WhatsApp teaser colors and styles on mobile */
.wp-local-chatbot-widget .wp-local-chatbot-teaser .wp-lc-teaser-whatsapp {
background: var(--wp-local-chatbot-secondary-color, #006291) !important;
color: #ffffff !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Force primary teaser colors on mobile */
.wp-local-chatbot-widget .wp-local-chatbot-teaser .wp-lc-teaser-item:not(.wp-lc-teaser-whatsapp) {
background: var(--wp-local-chatbot-primary-color, #0073aa) !important;
color: #ffffff !important;
}
/* Make close button touch-friendly on mobile */
.wp-local-chatbot-widget .wp-local-chatbot-teaser .wp-lc-teaser-close {
width: 36px !important;
height: 36px !important;
font-size: 18px !important;
z-index: 10001 !important;
touch-action: manipulation !important;
}
/* Teaser close hover/active visuals handled in JS to preserve SVG pill */
}
.wp-local-chatbot-window {
position: absolute;
/* Allow override via CSS var for flexibility; fallback preserves current behavior */
width: var(--wp-lc-window-width, clamp(350px, 25vw, 450px));
height: clamp(400px, 95vh, 95vh); /* Dynamic height: min 400px, max 95% of viewport height */
background: var(--wp-local-chatbot-window-bg, #ffffff);
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
justify-content: flex-start; /* stack children, input will push down via margin-top:auto */
overflow: hidden;
}
/* Background image + overlay inside the chat window */
#wp-local-chatbot-widget .wp-lc-bg{
position:absolute; inset:0; z-index:0;
background-position:center; background-size:cover; background-repeat:no-repeat;
/* Use two-layer background: overlay gradient + image URL from CSS var */
background-image: linear-gradient(
rgba(var(--wp-lc-bg-overlay-rgb, 0,0,0), var(--wp-lc-bg-overlay-opacity, 0.0)),
rgba(var(--wp-lc-bg-overlay-rgb, 0,0,0), var(--wp-lc-bg-overlay-opacity, 0.0))
), var(--wp-lc-bg-url, none);
pointer-events: none; /* never affect layout or interactions */
}
#wp-local-chatbot-widget .wp-local-chatbot-header,
#wp-local-chatbot-widget .wp-local-chatbot-messages,
#wp-local-chatbot-widget .wp-local-chatbot-input-container{ position:relative; z-index:1; }
/* Scope background to the main area only */
#wp-local-chatbot-widget .wp-lc-main{ position:relative; display:flex !important; flex-direction:column !important; flex: 1 1 auto !important; min-height:0 !important; }
#wp-local-chatbot-widget .wp-local-chatbot-window{ display:flex; flex-direction:column; }
#wp-local-chatbot-widget .wp-lc-main{ flex:1 1 auto !important; min-height:0 !important; }
#wp-local-chatbot-widget .wp-local-chatbot-messages{ flex:1 1 auto !important; min-height:0 !important; }
#wp-local-chatbot-widget .wp-local-chatbot-window > .wp-local-chatbot-input-container{ margin-top:auto !important; }
/* Extend background image to full window area when enabled */
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg{
/* Apply overlay gradient + image to the entire window */
background-image: linear-gradient(
rgba(var(--wp-lc-bg-overlay-rgb, 0,0,0), var(--wp-lc-bg-overlay-opacity, 0.0)),
rgba(var(--wp-lc-bg-overlay-rgb, 0,0,0), var(--wp-lc-bg-overlay-opacity, 0.0))
), var(--wp-lc-bg-url, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Make input container transparent on image mode */
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-input-container{ background: transparent !important; }
/* Avoid double backgrounds (seam) – disable inner bg layer when full-window bg is active */
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-lc-bg{
background: transparent !important;
}
/* Make messages transparent when background image enabled */
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-messages{ background: transparent !important; }
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-header{ background: transparent !important; }
@media (max-width: 600px){
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-header{ background: transparent !important; }
}
/* Header top gradient overlay when background image is enabled */
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-header{
position: relative !important; /* ensure stacking context for pseudo-element */
}
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-header::before{
content: '';
position: absolute; left: 0; right: 0; top: -32px; /* extend slightly above */
height: 160px; /* fade down into the image */
background: linear-gradient(to bottom,
rgba(0,0,0,0.80) 0%,
rgba(0,0,0,0.55) 45%,
rgba(0,0,0,0.25) 80%,
rgba(0,0,0,0.00) 100%);
pointer-events: none; /* purely decorative */
z-index: 0;
}
/* Ensure header content sits above the gradient overlay */
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-header > *,
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-header .wp-local-chatbot-header-actions,
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-header #wp-local-chatbot-close{
position: relative !important;
z-index: 1 !important;
}
/* Strong desktop enforcement: input bar participates in window flow */
@media (min-width: 601px){
#wp-local-chatbot-widget .wp-lc-main{ flex:1 1 auto !important; min-height:0 !important; position:relative !important; }
#wp-local-chatbot-widget .wp-local-chatbot-messages{ flex:1 1 auto !important; }
#wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-input-container,
#wp-local-chatbot-widget .wp-local-chatbot-window > .wp-local-chatbot-input-container{
position: static !important;
left: auto !important; right: auto !important; bottom: auto !important;
padding: 12px 12px 3px 12px !important;
background: var(--wp-local-chatbot-window-bg, #fff) !important;
z-index: 1 !important;
}
}
/* Universal desktop-like override driven by body state (JS sets this only on mobile) */
body:not(.wp-local-chatbot-mobile-open) #wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-input-container{
position: static !important; left:auto !important; right:auto !important; bottom:auto !important;
}
/* Desktop: keep input bar inside window flow (not fixed) */
@media (min-width: 601px){
#wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-input-container{ position: static !important; }
}
/* When background image is used, make header transparent so image shows under it */
#wp-local-chatbot-widget .wp-local-chatbot-window.has-bg .wp-local-chatbot-header{
background: transparent !important;
}
/* Window positioning based on widget position - beside toggle for more vertical space */
.position-bottom-right .wp-local-chatbot-window {
bottom: 1vh; /* Small margin from bottom - 1% of viewport */
right: 80px;
max-height: 95vh; /* Use 95% of viewport height */
}
.position-bottom-left .wp-local-chatbot-window {
bottom: 1vh; /* Small margin from bottom - 1% of viewport */
left: 80px;
max-height: 95vh; /* Use 95% of viewport height */
}
.position-bottom-center .wp-local-chatbot-window {
bottom: 1vh; /* Small margin from bottom - 1% of viewport */
left: 50%;
transform: translateX(-50%) translateX(-175px); /* Offset to position beside centered toggle */
max-height: 95vh; /* Use 95% of viewport height */
}
.position-right-center .wp-local-chatbot-window {
top: 50%;
right: 80px;
transform: translateY(-50%);
max-height: 95vh; /* Use 95% of viewport height */
}
.position-left-center .wp-local-chatbot-window {
top: 50%;
left: 80px;
transform: translateY(-50%);
max-height: 95vh; /* Use 95% of viewport height */
}
.wp-local-chatbot-header {
background: #0073aa;
color: white;
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Left group: avatar + title */
.wp-local-chatbot-header-left{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.wp-lc-header-avatar{
width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink:0;
box-shadow: 0 2px 10px rgba(0,0,0,0.35);
border: 2px solid rgba(255,255,255,0.2);
}
.wp-lc-header-back{
display:none !important;
align-items:center;
gap:6px;
padding:0;
background:transparent;
color:inherit;
font:inherit;
font-weight:inherit;
text-decoration:none;
cursor:pointer;
transition: color .15s ease;
}
.wp-lc-header-back:hover,
.wp-lc-header-back:focus{
color: var(--wp-local-chatbot-secondary-color, #006291);
text-decoration:none;
outline:none;
}
.wp-lc-header-back:active{
color: var(--wp-local-chatbot-secondary-color, #006291);
}
.wp-lc-header-back:visited{
color:inherit;
text-decoration:none;
}
.wp-lc-header-back:focus-visible{
outline:2px solid var(--wp-local-chatbot-secondary-color, #006291);
outline-offset:2px;
}
.wp-local-chatbot-header.wp-lc-back-active .wp-lc-header-back{
display:inline-flex !important;
}
.wp-local-chatbot-header.wp-lc-back-active .wp-lc-header-brand{
display:none !important;
}
.wp-local-chatbot-header h3 {
margin: 0;
color: var(--wp-local-chatbot-header-title-color, #ffffff) !important;
font-family: var(--wp-local-chatbot-heading-font, revert) !important; /* match contact header font */
font-weight: 700 !important;
font-size: 22px !important;
line-height: 29px !important;
text-transform: uppercase !important;
letter-spacing: 3.3px !important;
}
.wp-local-chatbot-header-actions{
display:flex;
gap:10px;
align-items:center;
min-height:28px;
flex-shrink: 0;
}
/* Always-on Contact & Booking CTA icons */
.wp-lc-contact-cta.icon,
.wp-lc-booking-cta.icon{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:17px;
background: var(--wp-local-chatbot-secondary-color, #006291) !important;
color: #111B21 !important;
border:none;
cursor:pointer;
transition: all 0.2s ease;
padding:0;
line-height: 0;
}
.wp-lc-contact-cta.icon:hover,
.wp-lc-booking-cta.icon:hover{
filter: none;
}
.wp-lc-contact-cta.icon:active,
.wp-lc-booking-cta.icon:active{
transform: none;
box-shadow: none;
}
.wp-lc-contact-cta.icon svg,
.wp-lc-booking-cta.icon svg{
width:18px !important;
height:18px !important;
display:block !important;
fill: currentColor !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-header .wp-lc-contact-cta.header.icon,
#wp-local-chatbot-widget .wp-local-chatbot-header .wp-lc-booking-cta.header.icon{
width:34px !important;
height:34px !important;
border-radius:17px !important;
padding:0 !important;
}
/* Drawer */
.wp-lc-contact-drawer{
position:absolute;
left:0; right:0; bottom:0;
background:#fff;
border-top:1px solid #e9e9e9;
box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
transform: translateY(100%);
transition: transform .2s ease;
display:flex; /* stack header + body */
flex-direction:column;
max-height:none; /* open fully */
overflow:hidden; /* drawer itself doesn't scroll; body does */
padding-bottom: 0; /* bottom spacing handled in body */
box-sizing: border-box;
z-index: 4; /* above avatars and peek */
}
.wp-lc-contact-drawer.open{ transform: translateY(0); }
.wp-lc-contact-drawer.wp-lc-drawer-has-bg{
background: var(--lc-drawer-surface, rgba(247,247,247,0.96)) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.wp-lc-contact-drawer.wp-lc-drawer-has-bg .wp-lc-drawer-header{
background: var(--lc-drawer-header-surface, rgba(247,247,247,0.98)) !important;
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.wp-lc-contact-drawer .wp-lc-drawer-header h4{
color: var(--lc-drawer-header-color, #111111) !important;
}
.wp-lc-contact-drawer .wp-lc-drawer-desc{
color: var(--lc-drawer-body-text-color, #333333) !important;
}
.wp-lc-drawer-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:6px 16px 6px 30px; /* tighter to reduce total height */
background: #f7f7f7 !important;
border-bottom:1px solid #eee;
position:sticky; /* keep header visible while scrolling */
top:0;
z-index:1;
}
.wp-lc-drawer-header h4{
margin: 0;
color: #000 !important;
/* Prefer theme heading font; allow override via variable */
font-family: var(--wp-local-chatbot-heading-font, revert) !important;
font-weight: 700 !important;
font-size: 22px !important;
line-height: 29px !important;
text-transform: uppercase !important;
letter-spacing: 3.3px !important;
display: block; /* no fixed height so header can be tighter */
}
.wp-lc-drawer-close{
background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:#666;
width: 32px; height: 28px; display:flex; align-items:center; justify-content:center; border-radius:4px;
}
.wp-lc-drawer-close:hover{ background: var(--wp-local-chatbot-secondary-color, #006291) !important; color:#fff !important; }
.wp-lc-drawer-body{
padding:10px 12px 24px 30px; /* bottom padding for buttons */
flex: 1 1 auto; /* take remaining space */
min-height: 0; /* allow flex child to shrink for scrolling */
overflow-y: auto; /* scroll inner area if needed */
overscroll-behavior: contain;/* keep scroll within drawer */
}
.wp-lc-drawer-desc{ margin:0 0 10px 0; color:#555; font-size:14px; }
/* Contact primary button styling */
.wp-lc-contact-primary{
background: var(--wp-local-chatbot-primary-color, #0073aa) !important;
color: #ffffff !important;
border: none !important;
padding: 10px 16px !important;
border-radius: 4px !important;
font-size: 14px !important;
font-weight: 500 !important;
cursor: pointer !important;
width: 100% !important;
box-shadow: none !important;
text-align: center !important;
}
.wp-lc-contact-primary:hover{
background: var(--wp-local-chatbot-secondary-color, #006291) !important;
color: #ffffff !important;
}
/* Peeking tab for sliding prompt */
.wp-lc-contact-peek{
position:absolute; left:0; bottom:90px; /* positioned relative to chat window, above input area */
width:18px !important; height:60px !important; border-radius:0 8px 8px 0 !important; /* narrow tab, increased height */
background: var(--wp-local-chatbot-primary-color, #0073aa) !important;
color:#fff !important; border:none !important; cursor:pointer !important;
display:flex !important; align-items:center !important; justify-content:center !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
z-index: 2 !important;
margin: 0 !important;
padding: 0 !important;
/* Force sizing */
min-width: 18px !important;
max-width: 18px !important;
min-height: 60px !important;
max-height: 60px !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
/* Smooth slide animation */
transform: translateX(0);
transition: transform 0.3s ease-in-out;
}
.wp-lc-contact-peek.hidden{
transform: translateX(-100%); /* Slide out to the left */
}
.wp-lc-contact-peek img{
display:block !important;
width:16px !important;
height:16px !important;
min-width:16px !important;
min-height:16px !important;
transform: rotate(90deg);
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-sizing: border-box !important;
}
/* Peek sliding panel (wide) */
.wp-lc-peek-panel{
position:absolute; left:0; bottom:78px; right:auto;
transform: translateX(-100%);
transition: transform .25s ease-in-out;
z-index: 3;
}
.wp-lc-peek-panel.open{
transform: translateX(0);
}
.wp-lc-peek-panel .wp-lc-peek-panel-inner{
background: var(--wp-local-chatbot-primary-color, #0073aa);
color:#fff;
border-radius: 0 10px 10px 0;
padding: 12px 16px 12px 20px; /* standard padding; right space handled by close button width */
display:flex; align-items:center; gap:12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
position: relative;
min-height: 40px;
}
.wp-lc-peek-panel .wp-lc-peek-text{
font-weight:500; font-size:14px; flex: 1;
margin-right: 8px;
}
.wp-lc-peek-panel .wp-lc-peek-cta{
background: var(--wp-local-chatbot-secondary_color, var(--wp-local-chatbot-secondary-color, #006291));
color:#fff; border:none; border-radius:4px; padding:8px 14px; cursor:pointer;
font-size:13px; font-weight:500;
flex-shrink: 0;
}
.wp-lc-peek-panel .wp-lc-peek-cta:hover{
background: rgba(255,255,255,0.2);
}
/* Slider close button uses same look-and-feel as header close */
.wp-lc-peek-panel .wp-lc-peek-close{
background: transparent !important;
border: none !important;
color: #ffffff !important;
box-shadow: none !important;
font-size: 18px !important;
line-height: 1 !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 4px !important; /* same as header close */
margin-left: 10px !important;
cursor: pointer !important;
}
.wp-lc-peek-panel .wp-lc-peek-close::before{ content:none !important; }
.wp-lc-peek-panel .wp-lc-peek-close:hover{
background: var(--wp-local-chatbot-secondary-color, #006291) !important;
color: #ffffff !important;
}
/* Hover circle appears smaller (16px) */
.wp-lc-peek-panel .wp-lc-peek-close::before{
content: '';
position: absolute; top: 50%; left: 50%;
width: 16px; height: 16px; border-radius: 50%;
background: rgba(0,0,0,0.3);
transform: translate(-50%, -50%) scale(0);
transition: transform .15s ease;
pointer-events: none;
}
.wp-lc-peek-panel .wp-lc-peek-close:hover::before{
transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 600px){
.wp-lc-contact-drawer{ position:fixed; bottom:0; left:0; right:0; z-index:2147483647; max-height:85vh; }
/* Prevent header title wrapping and keep controls aligned */
#wp-local-chatbot-widget .wp-local-chatbot-header-left{ min-width:0; display:flex; align-items:center; gap:8px; }
#wp-local-chatbot-widget .wp-local-chatbot-header-left h3{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Force all header action buttons to equal circular size and centered content */
#wp-local-chatbot-widget .wp-local-chatbot-header-actions > *{
width:34px !important; height:34px !important; border-radius:17px !important;
display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-header-actions > a#wp-local-chatbot-whatsapp svg{ width:18px !important; height:18px !important; }
/* Compact CTA as icon on mobile */
}
.wp-local-chatbot-whatsapp{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:17px;
background: var(--wp-local-chatbot-secondary-color, #006291);
color: white;
transition: all 0.2s ease;
text-decoration: none;
}
.wp-local-chatbot-whatsapp:hover{ background: var(--wp-local-chatbot-secondary-color, #006291); color: white; }
.wp-local-chatbot-close {
background: transparent !important;
border: none !important;
color: transparent !important;
font-size: 0 !important;
cursor: pointer;
padding: 0;
line-height: 1;
width: 34px; height: 34px;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 34px 34px !important;
}
.wp-local-chatbot-header .wp-local-chatbot-close{ display:flex; align-items:center; justify-content:center; margin:0 !important; }
/* Hover visuals handled in JS: .wp-local-chatbot-close:hover */
/* Ensure desktop header close hover uses secondary color even if base rule has !important */
/* Hover visuals handled in JS: .wp-local-chatbot-window .wp-local-chatbot-header .wp-local-chatbot-close:hover */
.wp-local-chatbot-window .wp-local-chatbot-header .wp-local-chatbot-close:focus-visible {
outline: 2px solid var(--wp-local-chatbot-secondary-color, #006291) !important;
outline-offset: 2px;
}
.wp-local-chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
background: var(--wp-local-chatbot-window-bg, #ffffff);
position: relative; /* so peek tab can be positioned inside */
}
.wp-local-chatbot-message {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}
.wp-local-chatbot-message-content {
padding: 10px 15px;
border-radius: 15px;
max-width: 80%;
line-height: 1.4;
position: relative;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content,
#wp-local-chatbot-widget .wp-local-chatbot-message-content :where(p, div, span, strong, em, a, h1, h2, h3, h4, h5, h6, li) {
text-transform: none !important;
letter-spacing: normal !important;
font-variant-caps: normal !important;
}
.wp-local-chatbot-message-content a {
color: #0073aa;
text-decoration: underline;
word-break: break-word;
position: relative;
display: inline;
padding: 0;
}
.wp-local-chatbot-user {
align-items: flex-end;
}
.wp-local-chatbot-user .wp-local-chatbot-message-content {
background: var(--wp-local-chatbot-primary-color, #0073aa);
color: white;
}
/* Käyttäjän puhekuplan häntä oikeaan yläkulmaan */
.wp-local-chatbot-user .wp-local-chatbot-message-content::after {
content: '';
position: absolute;
right: -5px;
top: 6px;
border-left: 8px solid var(--wp-local-chatbot-primary-color, #0073aa);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.wp-local-chatbot-user .wp-local-chatbot-message-content a {
color: #ffffff;
text-decoration: underline;
}
.wp-local-chatbot-bot {
align-items: flex-start;
}
.wp-local-chatbot-bot .wp-local-chatbot-message-content {
background: var(--wp-local-chatbot-bot-bg, #f0f0f0);
color: #333;
}
/* Botin puhekuplan häntä vasempaan yläkulmaan */
.wp-local-chatbot-bot .wp-local-chatbot-message-content::before {
content: '';
position: absolute;
left: -5px;
top: 6px;
border-right: 8px solid var(--wp-local-chatbot-bot-bg, #f0f0f0);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.wp-local-chatbot-bot .wp-local-chatbot-message-content a {
font-weight: 500;
}
/* Paragraph spacing inside chat bubbles */
#wp-local-chatbot-widget .wp-local-chatbot-message-content p{
margin: 0 0 11px 0 !important;
line-height: 1.4 !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content p:last-child{
margin-bottom: 0 !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-rendered-list{
margin: 4px 0 11px 18px !important;
padding: 0 !important;
list-style: disc outside !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-rendered-list:last-child{
margin-bottom: 0 !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-rendered-list li{
margin: 2px 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
}
.wp-local-chatbot-bot .wp-local-chatbot-message-content a:hover {
text-decoration: none;
background-color: rgba(0, 115, 170, 0.1);
border-radius: 2px;
}
/* Right-align the initial welcome message pill */
#wp-local-chatbot-widget .wp-local-chatbot-messages > .wp-local-chatbot-message:first-child{
align-items: flex-end;
}
#wp-local-chatbot-widget .wp-local-chatbot-messages > .wp-local-chatbot-message:first-child.wp-local-chatbot-bot .wp-local-chatbot-message-content::before{
left: auto;
right: -5px;
border-left: 8px solid var(--wp-local-chatbot-bot-bg, #f0f0f0);
border-right: 0;
}
.wp-local-chatbot-error .wp-local-chatbot-message-content {
background: var(--wp-local-chatbot-error-bg, #ff6b6b);
color: white;
}
/* Virheviestien puhekuplan häntä vasempaan yläkulmaan */
.wp-local-chatbot-error .wp-local-chatbot-message-content::before {
content: '';
position: absolute;
left: -5px;
top: 6px;
border-right: 8px solid var(--wp-local-chatbot-error-bg, #ff6b6b);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.wp-local-chatbot-input-container {
padding: 8px 12px 2px 12px; /* minimal bottom gap */
border-top: 1px solid #eee;
display: flex;
gap: 6px; /* tighter gap */
align-items: center; /* center all elements */
flex-wrap: nowrap; /* prevent wrapping */
margin-bottom: 0; /* no extra space below container */
}
.wp-local-chatbot-input {
flex: 1;
padding: 8px 12px; /* comfortable typing padding */
height: var(--wp-local-chatbot-input-height, 35px);
background: var(--wp-local-chatbot-input-bg, #FFFFFF);
border: 1px solid transparent;
border-radius: var(--wp-local-chatbot-input-radius, 20px);
box-shadow: var(--wp-local-chatbot-input-shadow, 0 0 8px rgba(0,0,0,0.09));
outline: none;
font-size: 14px;
font-family: var(--wp-local-chatbot-icebreaker-font, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important;
opacity: 1;
}
.wp-local-chatbot-input::placeholder,
#wp-local-chatbot-widget .wp-local-chatbot-input::placeholder,
#wp-local-chatbot-widget #wp-local-chatbot-input::placeholder,
.wp-local-chatbot-input::-webkit-input-placeholder,
.wp-local-chatbot-input::-moz-placeholder,
.wp-local-chatbot-input:-ms-input-placeholder,
.wp-local-chatbot-input::-ms-input-placeholder {
font-family: var(--wp-local-chatbot-icebreaker-font, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important;
}
.wp-local-chatbot-input:focus {
border-color: transparent;
box-shadow: var(--wp-local-chatbot-input-shadow, 0 0 8px rgba(0,0,0,0.09));
}
.wp-local-chatbot-send {
background: var(--wp-local-chatbot-primary-color, #0073aa);
color: var(--wp-local-chatbot-text-color, #ffffff);
border: none;
padding: 6px !important;
border-radius: 50% !important;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s ease;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 32px !important; /* smaller for breathing room */
height: 32px !important; /* smaller for breathing room */
flex: 0 0 32px !important; /* prevent Elementor from stretching */
flex-shrink: 0 !important; /* never shrink */
gap: 0 !important;
line-height: 1 !important;
appearance: none !important;
aspect-ratio: 1 / 1 !important;
min-width: 32px !important; /* enforce minimum */
min-height: 32px !important; /* enforce minimum */
}
.wp-local-chatbot-send:hover {
background: var(--wp-local-chatbot-secondary-color, #006291);
}
/* Send icon follows button text color */
#wp-local-chatbot-widget .wp-local-chatbot-send svg{
display: block;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
pointer-events: none !important;
flex: 0 0 auto !important;
fill: currentColor !important;
color: currentColor !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-send:hover svg{
fill: currentColor !important;
color: currentColor !important;
}
.wp-local-chatbot-typing {
/* Base: keep compact so when placed inside a bubble its height matches text bubbles */
padding: 0 8px;
display: flex;
gap: 5px;
}
.wp-local-chatbot-typing span {
width: 8px;
height: 8px;
background: #0073aa;
border-radius: 50%;
display: inline-block;
animation: typing 1s infinite ease-in-out;
}
.wp-local-chatbot-typing span:nth-child(1) { animation-delay: 0.1s; }
.wp-local-chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.wp-local-chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* Mobile responsiveness - FULL SCREEN EXPERIENCE */
@media (max-width: 600px) {
/* Force full-screen chat window on mobile and small tablets */
.wp-local-chatbot-widget {
bottom: 20px !important;
right: 10px !important;
left: auto !important;
top: auto !important;
transform: none !important;
/* Add safe area support for iOS devices */
bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
}
/* FULL SCREEN CHAT WINDOW ON MOBILE */
.wp-local-chatbot-widget .wp-local-chatbot-window {
position: fixed !important;
top: 0 !important;
bottom: 0 !important; /* override any earlier bottom offsets */
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-width: none !important;
max-height: none !important;
border-radius: 0 !important;
z-index: 999999 !important;
transform: none !important;
/* Smooth transition when opening */
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
/* Hide the widget toggle when chat is open */
.wp-local-chatbot-widget.chat-open .wp-local-chatbot-toggle {
display: none !important;
}
/* Mobile-optimized header */
.wp-local-chatbot-window .wp-local-chatbot-header {
padding: 15px 20px !important;
background: var(--wp-local-chatbot-primary-color, #0073aa) !important;
color: white !important;
position: relative;
/* Add safe area padding for notched devices */
padding-top: max(15px, env(safe-area-inset-top, 15px)) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wp-local-chatbot-window .wp-local-chatbot-header h3 {
margin: 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
text-align: center !important;
}
.wp-local-chatbot-window .wp-local-chatbot-close {
position: absolute !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: none !important;
color: transparent !important;
font-size: 0 !important;
cursor: pointer !important;
padding: 0 !important;
line-height: 1 !important;
width: 34px !important;
height: 34px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 34px 34px !important;
transition: filter 0.2s ease !important;
}
/* Hover visuals handled in JS: .wp-local-chatbot-window .wp-local-chatbot-close:hover */
/* Full height messages area */
.wp-local-chatbot-window .wp-local-chatbot-messages {
flex: 1 !important;
padding: 20px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
/* Account for input area */
margin-bottom: 0 !important;
/* Better spacing for mobile */
padding-bottom: 20px !important;
}
/* Fix input bar visibility – pin to viewport bottom */
.wp-local-chatbot-window .wp-local-chatbot-input-container {
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: env(safe-area-inset-bottom, 0px) !important;
padding: 10px 12px calc(env(safe-area-inset-bottom,0px)+10px) 12px !important;
background: var(--wp-local-chatbot-window-bg,#fff) !important;
z-index: 1000001 !important;
border-top: 1px solid #eee !important;
}
/* Add bottom margin to messages to avoid overlap */
.wp-local-chatbot-window .wp-local-chatbot-messages{
padding-bottom: 80px !important;
}
/* Mobile-optimized message bubbles */
.wp-local-chatbot-message {
margin-bottom: 16px !important;
}
.wp-local-chatbot-message-content {
padding: 12px 16px !important;
border-radius: 18px !important;
max-width: 85% !important;
line-height: 1.4 !important;
font-size: 16px !important; /* Better readability on mobile */
}
/* Puhekuplan häntien koot ja värit mobiilissa */
.wp-local-chatbot-user .wp-local-chatbot-message-content::after {
right: -5px;
top: 6px;
border-left: 8px solid var(--wp-local-chatbot-primary-color, #0073aa);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.wp-local-chatbot-bot .wp-local-chatbot-message-content::before,
.wp-local-chatbot-human-ack .wp-local-chatbot-message-content::before {
left: -5px;
top: 6px;
border-right: 8px solid var(--wp-local-chatbot-bot-bg, #f0f0f0);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.wp-local-chatbot-error .wp-local-chatbot-message-content::before {
left: -5px;
top: 6px;
border-right: 8px solid var(--wp-local-chatbot-error-bg, #ff6b6b);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
/* User messages - right aligned */
.wp-local-chatbot-user .wp-local-chatbot-message-content {
background: var(--wp-local-chatbot-primary-color, #0073aa) !important;
color: white !important;
margin-left: auto !important;
}
/* Bot messages - left aligned */
.wp-local-chatbot-bot .wp-local-chatbot-message-content {
background: var(--wp-local-chatbot-bot-bg, #f0f0f0) !important;
color: var(--wp-local-chatbot-bot-text-color, #333333) !important;
margin-right: auto !important;
}
/* Fixed input area at bottom */
.wp-local-chatbot-window .wp-local-chatbot-input-container {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background: var(--wp-local-chatbot-window-bg, #ffffff) !important;
padding: 15px 20px !important;
border-top: 1px solid #eee !important;
display: flex !important;
gap: 12px !important;
align-items: center !important;
/* Add safe area padding for home indicator */
padding-bottom: max(15px, env(safe-area-inset-bottom, 15px)) !important;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
}
.wp-local-chatbot-window .wp-local-chatbot-input {
flex: 1 !important;
padding: 12px 16px !important;
border: 1px solid #ddd !important;
border-radius: 25px !important;
outline: none !important;
font-size: 16px !important; /* Prevents zoom on iOS */
background: #f8f9fa !important;
transition: border-color 0.2s ease !important;
}
.wp-local-chatbot-window .wp-local-chatbot-input:focus {
border-color: var(--wp-local-chatbot-primary-color, #0073aa) !important;
background: white !important;
}
.wp-local-chatbot-window .wp-local-chatbot-send {
background: var(--wp-local-chatbot-primary-color, #0073aa) !important;
color: var(--wp-local-chatbot-text-color, #ffffff) !important;
border: none !important;
padding: 14px !important;
border-radius: 50% !important;
cursor: pointer !important;
font-size: 16px !important;
font-weight: 500 !important;
transition: background-color 0.2s ease !important;
box-sizing: border-box !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
line-height: 1 !important;
aspect-ratio: 1 / 1 !important;
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
appearance: none !important;
}
.wp-local-chatbot-window .wp-local-chatbot-send:hover {
/* Invert on hover */
background: var(--wp-local-chatbot-secondary-color, #006291) !important;
}
/* Mobile: ensure icon keeps secondary color on hover too */
.wp-local-chatbot-window .wp-local-chatbot-send svg{
fill: currentColor !important;
color: currentColor !important;
}
.wp-local-chatbot-window .wp-local-chatbot-send:hover svg{
fill: currentColor !important;
color: currentColor !important;
}
/* Desktop override to ensure invert behavior wins */
#wp-local-chatbot-widget .wp-local-chatbot-send:hover{
background: var(--wp-local-chatbot-secondary-color, #006291) !important;
}
/* Typing indicator adjustments (legacy floating indicator only) */
#wp-local-chatbot-window > #wp-local-chatbot-typing,
#wp-local-chatbot-widget #wp-local-chatbot-typing {
padding: 12px 16px !important;
margin: 0 20px 16px 20px !important;
background: #f0f0f0 !important;
border-radius: 18px !important;
width: fit-content !important;
}
/* When typing dots are inside a message bubble, remove extra box styling */
.wp-local-chatbot-message-content .wp-local-chatbot-typing {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
line-height: 1 !important;
}
/* Pending bot bubble: slightly tighter left/right spacing to the dots */
.wp-local-chatbot-bot.is-pending .wp-local-chatbot-message-content {
padding-left: 10px !important;
padding-right: 10px !important;
display: flex !important;
align-items: center !important;
}
/* Lead form adjustments for mobile */
.wp-local-chatbot-lead-form .wp-local-chatbot-message-content {
max-width: 100% !important;
margin: 0 !important;
padding: 20px !important;
border-radius: 12px !important;
}
/* Lead sequence choice buttons (Email/Phone/Cancel)
- Email & Phone use configured main/secondary/text colors
- Cancel mirrors contact form cancel styling
*/
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-email,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-phone,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-book,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-reopen {
display: inline-block !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 8px 16px !important;
margin: 8px 6px 0 0 !important;
background: var(--wp-local-chatbot-primary-color, #0073aa) !important;
color: var(--wp-local-chatbot-cta-text-color, #ffffff) !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
line-height: 1.2 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
text-align: center !important;
cursor: pointer !important;
transition: background-color 0.2s ease, filter 0.2s ease, transform 0.2s ease !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-email:focus,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-email:focus-visible,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-phone:focus,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-phone:focus-visible,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-book:focus,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-book:focus-visible,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-reopen:focus,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-reopen:focus-visible {
outline: 2px solid var(--wp-local-chatbot-secondary-color, #006291) !important;
outline-offset: 2px !important;
box-shadow: none !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-email:hover,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-phone:hover,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-book:hover,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-reopen:hover {
background: var(--wp-local-chatbot-secondary-color, #006291) !important;
color: var(--wp-local-chatbot-cta-text-color, #ffffff) !important;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Cancel/Skip chips: align to form cancel visuals */
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip {
display: inline-block !important;
padding: 8px 16px !important;
margin: 8px 6px 0 0 !important;
background: var(--wp-local-chatbot-cancel-bg, #f7f7f7) !important;
color: var(--wp-local-chatbot-cancel-color, #444) !important;
border: 1px solid rgba(0,0,0,0.12) !important;
border-radius: var(--wp-local-chatbot-cta-radius, 3px) !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
line-height: 1.2 !important;
cursor: pointer !important;
-webkit-appearance: none !important;
appearance: none !important;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
box-shadow: none !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel:hover,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip:hover {
background: #ececec !important;
color: #222 !important;
border-color: rgba(0,0,0,0.16) !important;
}
/* Active/focus states to prevent theme-colored flicker */
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel:active,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip:active {
background: #ececec !important;
color: #222 !important;
border-color: rgba(0,0,0,0.16) !important;
box-shadow: none !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel:focus,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel:active,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip:focus,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip:active {
outline: none !important;
box-shadow: none !important;
background: var(--wp-local-chatbot-cancel-bg, #f7f7f7) !important;
color: var(--wp-local-chatbot-cancel-color, #444) !important;
border-color: rgba(0,0,0,0.16) !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel:focus-visible,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip:focus-visible {
outline: 2px solid rgba(0,0,0,0.25) !important;
outline-offset: 2px !important;
background: var(--wp-local-chatbot-cancel-bg, #f7f7f7) !important;
color: var(--wp-local-chatbot-cancel-color, #444) !important;
border-color: rgba(0,0,0,0.16) !important;
box-shadow: none !important;
}
.wp-local-chatbot-form-field {
margin-bottom: 16px !important;
}
.wp-local-chatbot-form-field input,
.wp-local-chatbot-form-field textarea {
background: var(--wp-local-chatbot-form-bg, #FFFFFF) !important;
border: 1px solid var(--wp-local-chatbot-form-border, #DDDDDD) !important;
padding: 10px 16px !important;
font-size: 16px !important; /* Prevents zoom on iOS */
border-radius: var(--wp-local-chatbot-form-radius, 20px) !important;
box-sizing: border-box !important;
}
.wp-local-chatbot-form-field input { height: var(--wp-local-chatbot-form-height, 40px) !important; }
.wp-local-chatbot-form-buttons {
flex-direction: column !important;
gap: 12px !important;
}
.wp-local-chatbot-form-submit,
.wp-local-chatbot-form-cancel {
padding: 14px 20px !important;
font-size: 16px !important;
border-radius: 8px !important;
font-weight: 500 !important;
}
/* Agent avatar adjustments */
.wp-local-chatbot-agent .wp-local-chatbot-message-content {
margin-left: 35px !important;
}
/* Contact prompt buttons */
.wp-lc-contact-yes,
.wp-lc-contact-no {
display: inline-block;
padding: 8px 16px;
margin: 8px 6px 0 0;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
line-height: 1.2;
}
.wp-lc-contact-yes {
background: var(--wp-local-chatbot-primary-color, #0073aa);
color: white;
}
.wp-lc-contact-yes:hover {
background: var(--wp-local-chatbot-secondary-color, #006291);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}
.wp-lc-contact-no {
background: #f5f5f5;
color: #666;
border: 1px solid #ddd;
}
.wp-lc-contact-no:hover {
background: #e9e9e9;
color: #333;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.wp-lc-contact-yes:active,
.wp-lc-contact-no:active {
transform: translateY(0);
box-shadow: none;
}
/* Mobile adjustments for contact buttons */
@media (max-width: 480px) {
.wp-lc-contact-yes,
.wp-lc-contact-no {
padding: 10px 18px;
font-size: 15px;
margin: 10px 8px 0 0;
}
}
.wp-local-chatbot-agent-message-avatar {
width: 28px !important;
height: 28px !important;
}
.wp-local-chatbot-bot.has-avatar .wp-local-chatbot-message-content {
margin-left: 35px !important;
}
.wp-local-chatbot-bot-message-avatar {
width: 28px !important;
height: 28px !important;
}
/* Enhanced toggle button for mobile */
.wp-local-chatbot-toggle {
width: 56px !important;
height: 56px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.wp-local-chatbot-toggle:active {
transform: scale(0.95) !important;
}
.wp-local-chatbot-toggle svg {
width: 26px !important;
height: 26px !important;
}
}
/* iPhone specific adjustments - more aggressive positioning */
@media (max-width: 480px) and (max-height: 896px) {
.wp-local-chatbot-widget {
bottom: 35px !important; /* Higher position for iPhone */
right: 15px !important;
}
.wp-local-chatbot-widget .wp-local-chatbot-window {
bottom: 105px !important;
right: -15px !important; /* Offset to align with screen edge */
}
.wp-local-chatbot-window {
bottom: 105px;
width: calc(100vw - 30px);
right: 15px;
left: 15px;
max-width: calc(100vw - 30px);
}
}
/* Additional mobile adjustments for very small screens */
@media (max-width: 375px) {
.wp-local-chatbot-widget {
bottom: 25px !important;
right: 15px !important;
/* Extra margin for smaller screens */
bottom: max(25px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
}
.wp-local-chatbot-widget .wp-local-chatbot-window {
bottom: 95px !important;
bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
right: -15px !important; /* Offset to align with screen edge */
}
.wp-local-chatbot-window {
width: calc(100vw - 30px);
right: 15px;
left: 15px;
bottom: calc(95px + env(safe-area-inset-bottom, 0px));
max-width: calc(100vw - 30px);
}
}
/* Dynamic scaling for large screens */
@media (min-width: 1200px) {
.wp-local-chatbot-window {
width: clamp(380px, 28vw, 500px); /* Larger on big screens */
height: 95vh; /* Use 95% of viewport height */
max-height: 95vh; /* Consistent with height */
}
}
@media (min-width: 1600px) {
.wp-local-chatbot-window {
width: clamp(420px, 30vw, 550px); /* Even larger on very big screens */
height: 95vh; /* Use 95% of viewport height */
max-height: 95vh; /* Consistent with height */
}
}
/* Cap height only for truly large screens (2560×1440 and above) */
@media (min-width: 2560px) {
.wp-local-chatbot-window {
height: clamp(400px, 60vh, 900px); /* Cap at 900px for very large displays */
max-height: 900px; /* Fixed maximum for ultra-wide/large displays */
}
}
/* Ensure minimum size on smaller desktops */
@media (max-width: 1024px) and (min-width: 481px) {
.wp-local-chatbot-window {
width: 350px; /* Fixed width on smaller desktops */
height: clamp(400px, 95vh, 95vh); /* Use 95% of viewport height with minimum */
max-height: 95vh; /* Consistent with height */
}
}
/* Scrollbar styling */
.wp-local-chatbot-messages::-webkit-scrollbar {
width: 6px;
}
.wp-local-chatbot-messages::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.wp-local-chatbot-messages::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.wp-local-chatbot-messages::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Lead Capture Form Styles */
.wp-local-chatbot-lead-form .wp-local-chatbot-message-content {
background: #f8f9fa !important;
border: 2px solid var(--wp-local-chatbot-primary-color, #0073aa);
border-radius: 10px;
padding: 20px;
max-width: 100%;
}
.wp-local-chatbot-contact-form {
width: 100%;
}
.wp-local-chatbot-form-field {
margin-bottom: 10px; /* tighter spacing */
}
.wp-local-chatbot-form-field label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #333;
font-size: 14px;
}
#wp-local-chatbot-widget .wp-local-chatbot-form-field input,
#wp-local-chatbot-widget .wp-local-chatbot-form-field textarea {
width: 100%;
background: var(--wp-local-chatbot-form-bg, #FFFFFF) !important;
border: 1px solid var(--wp-local-chatbot-form-border, #DDDDDD) !important;
border-radius: var(--wp-local-chatbot-form-radius, 20px) !important;
padding: 10px 16px !important;
font-size: 14px !important;
box-sizing: border-box !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
font-family: inherit !important;
opacity: var(--wp-local-chatbot-form-opacity, 1) !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-form-field input:focus,
#wp-local-chatbot-widget .wp-local-chatbot-form-field textarea:focus {
outline: none;
border-color: var(--wp-local-chatbot-primary-color, #0073aa);
box-shadow: 0 0 0 2px rgba(var(--wp-local-chatbot-primary-color-rgb, 0, 115, 170), 0.1);
}
#wp-local-chatbot-widget .wp-local-chatbot-form-field input:required,
#wp-local-chatbot-widget .wp-local-chatbot-form-field textarea:required {
border-left-width: 1px !important;
border-left-style: solid !important;
border-left-color: var(--wp-local-chatbot-form-border, #DDDDDD) !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-form-field textarea {
resize: vertical;
min-height: var(--wp-local-chatbot-textarea-min-height, 96px);
}
/* Fixed input height for single-line fields */
#wp-local-chatbot-widget .wp-local-chatbot-form-field input {
height: var(--wp-local-chatbot-form-height, 40px);
}
/* Stronger overrides inside the contact drawer */
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-field input,
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-field textarea{
background: var(--wp-local-chatbot-form-bg, #FFFFFF) !important;
border: 1px solid var(--wp-local-chatbot-form-border, #DDDDDD) !important;
border-radius: var(--wp-local-chatbot-form-radius, 20px) !important;
padding: 10px 16px !important;
}
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-field input{ height: var(--wp-local-chatbot-form-height, 40px) !important; }
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-field input:required,
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-field textarea:required{
border-left-width: 1px !important;
border-left-style: solid !important;
border-left-color: var(--wp-local-chatbot-form-border, #DDDDDD) !important;
}
.wp-local-chatbot-form-buttons {
display: flex;
gap: 10px;
margin-top: 10px; /* tighter */
}
.wp-local-chatbot-form-submit,
.wp-local-chatbot-form-cancel {
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
flex: 1;
}
/* Mobile: add extra side padding so input and send button do not touch edges */
@media (max-width: 600px){
#wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-input-container{
padding-left: 20px !important;
padding-right: 20px !important;
}
}
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-submit,
#wp-local-chatbot-widget .wp-local-chatbot-form-submit {
background: var(--wp-local-chatbot-secondary-color, #006291) !important; /* backend secondary color */
color: var(--wp-local-chatbot-cta-text-color, #0d0d0d) !important;
border: none !important;
border-radius: var(--wp-local-chatbot-cta-radius, 3px) !important;
box-shadow: var(--wp-local-chatbot-cta-shadow, 0 0 8px rgba(0,0,0,0.09)) !important;
text-shadow: none !important;
opacity: 1 !important;
position: relative;
padding-right: 36px !important; /* room for arrow */
font-family: var(--wp-local-chatbot-button-font, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important;
font-size: 14px !important;
line-height: 19px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-submit:hover,
#wp-local-chatbot-widget .wp-local-chatbot-form-submit:hover {
background: var(--wp-local-chatbot-secondary-color, #006291) !important;
filter: brightness(0.98);
}
/* Add unified arrow icon to submit button */
#wp-local-chatbot-widget .wp-local-chatbot-form-submit::after{
content: '';
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
width: 12px; height: 11px; display: inline-block;
background-repeat: no-repeat; background-position: center; background-size: 12px 11px;
/* Use currentColor-aware SVG so it follows text color (defaults to dark) */
background-image: url("data:image/svg+xml;utf8,");
}
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-submit:disabled,
#wp-local-chatbot-widget .wp-local-chatbot-form-submit:disabled {
background: #ccc;
cursor: not-allowed;
}
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-cancel,
#wp-local-chatbot-widget .wp-local-chatbot-form-cancel {
background: var(--wp-local-chatbot-cancel-bg, #f7f7f7) !important;
color: var(--wp-local-chatbot-cancel-color, #444) !important;
border: 1px solid rgba(0,0,0,0.12) !important;
border-radius: var(--wp-local-chatbot-cta-radius, 3px) !important;
box-shadow: var(--wp-local-chatbot-cta-shadow, 0 0 8px rgba(0,0,0,0.09)) !important;
text-shadow: none !important;
}
/* FIX: Close-nappi samaan linjaan ja emailin oikealle puolelle (mobiili) */
@media (max-width: 600px){
/* Palauta normaalivirtaan: ei absolute-sijoittelua */
#wp-local-chatbot-widget .wp-local-chatbot-header .wp-local-chatbot-close{
position: static !important;
right: auto !important;
top: auto !important;
transform: none !important;
width:34px !important; height:34px !important; border-radius:17px !important;
background-position:center !important; background-repeat:no-repeat !important; background-size:34px 34px !important;
}
/* Varmista yhtenäinen riviasettelu */
#wp-local-chatbot-widget .wp-local-chatbot-header-actions{
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* Close viimeiseksi, emailin oikealle puolelle */
#wp-local-chatbot-widget .wp-local-chatbot-header-actions #wp-local-chatbot-close{
order: 99 !important;
width:34px !important; height:34px !important; border-radius:17px !important;
display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important;
}
}
/* Desktop/tablet: varmistetaan että close vastaa muiden painikkeiden kokoa headerissa */
#wp-local-chatbot-widget .wp-local-chatbot-header-actions #wp-local-chatbot-close{
width:34px; height:34px; border-radius:17px; display:flex; align-items:center; justify-content:center;
background-position:center; background-repeat:no-repeat; background-size:34px 34px;
}
/* iOS-näppäimistö: estä oikealle "hyppy" kun chat on auki */
@media (max-width: 600px){
#wp-local-chatbot-widget.chat-open .wp-local-chatbot-window{
position: fixed !important;
inset: 0 !important; /* top:0; right:0; bottom:0; left:0 */
width: 100% !important; /* vältä 100vw-ylivuoto iOS:ssa */
max-width: 100% !important;
height: 100dvh !important; /* pidä näkyvän näytän korkeus */
transform: none !important;
}
/* varmistetaan ettei sivu saa vaakaskrollia chatin ollessa auki */
body.wp-local-chatbot-mobile-open{
overflow-x: hidden !important;
}
}
/* Yliaja iPhone-lohkon right:-15px/bottom:105px kun chat on auki */
@media (max-width: 480px) and (max-height: 896px){
#wp-local-chatbot-widget.chat-open .wp-local-chatbot-window{
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
}
}
#wp-local-chatbot-widget .wp-lc-contact-drawer .wp-local-chatbot-form-cancel:hover,
#wp-local-chatbot-widget .wp-local-chatbot-form-cancel:hover {
background: #ececec !important;
color: #222 !important;
border-color: rgba(0,0,0,0.16) !important;
}
/* Mobile responsiveness for form */
@media (max-width: 480px) {
.wp-local-chatbot-lead-form .wp-local-chatbot-message-content {
padding: 15px;
}
.wp-local-chatbot-form-buttons {
flex-direction: column;
}
.wp-local-chatbot-form-submit,
.wp-local-chatbot-form-cancel {
flex: none;
}
}
/* Inline image styling for attachments inserted next to links */
#wp-local-chatbot-widget .wp-lc-inline-attachment img {
width: 100%;
height: auto;
max-height: 140px;
object-fit: contain;
border-radius: 6px;
border: 1px solid rgba(0,0,0,.08);
}
/* Handoff animations and styles */
.wp-local-chatbot-handoff {
align-items: flex-start;
}
.wp-local-chatbot-connecting {
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
background: var(--wp-local-chatbot-bot-bg, #f0f0f0);
border-radius: 10px;
margin: 10px 0;
border: 1px solid rgba(var(--wp-local-chatbot-primary-color-rgb, 0, 115, 170), .18);
animation: connecting-pulse 2s infinite;
}
.wp-local-chatbot-connecting-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(var(--wp-local-chatbot-primary-color-rgb, 0, 115, 170), .18);
border-top: 2px solid var(--wp-local-chatbot-primary-color, #0073aa);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.wp-local-chatbot-connecting-text {
color: var(--wp-local-chatbot-primary-color, #0073aa);
font-weight: 500;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes connecting-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(var(--wp-local-chatbot-primary-color-rgb, 0, 115, 170), .16);
}
50% {
box-shadow: 0 0 0 3px rgba(var(--wp-local-chatbot-primary-color-rgb, 0, 115, 170), .12);
}
}
.wp-local-chatbot-connecting-dots::after {
content: '...';
animation: connecting-dots 1.5s infinite;
}
@keyframes connecting-dots {
0%, 33% { opacity: 0.3; }
34%, 66% { opacity: 0.6; }
67%, 100% { opacity: 1; }
}
/* Agent joined message styling */
.wp-local-chatbot-agent-joined {
align-items: flex-start;
}
.wp-local-chatbot-agent-joined .wp-local-chatbot-message-content {
position: relative;
padding: 15px !important;
display: flex;
align-items: center;
gap: 12px;
/* Colors will be inherited from bot message styling via dynamic CSS */
}
.wp-local-chatbot-agent-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}
.wp-local-chatbot-agent-info {
flex: 1;
}
.wp-local-chatbot-agent-name {
font-weight: bold;
margin-bottom: 4px;
}
.wp-local-chatbot-agent-message {
margin: 0;
}
/* Mobile responsiveness for agent joined message */
@media (max-width: 480px) {
.wp-local-chatbot-agent-joined .wp-local-chatbot-message-content {
padding: 12px !important;
gap: 10px;
}
.wp-local-chatbot-agent-avatar {
width: 32px;
height: 32px;
}
.wp-local-chatbot-agent-name {
font-size: 14px;
}
.wp-local-chatbot-agent-message {
font-size: 13px;
}
}
/* Timeout form specific styling */
.wp-local-chatbot-timeout-form {
margin-top: 10px;
}
.wp-local-chatbot-timeout-form .wp-local-chatbot-form-header {
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 8px 8px 0 0;
padding: 15px;
margin: 0;
}
.wp-local-chatbot-timeout-form .wp-local-chatbot-form-header h4 {
margin: 0 0 5px 0;
color: #856404;
font-size: 16px;
}
.wp-local-chatbot-timeout-form .wp-local-chatbot-form-header p {
margin: 0;
color: #856404;
font-size: 14px;
}
.wp-local-chatbot-timeout-form .wp-local-chatbot-form-content {
background: white;
border: 1px solid #ffeaa7;
border-top: none;
border-radius: 0 0 8px 8px;
padding: 15px;
}
/* Agent form specific styling */
.wp-local-chatbot-agent-form {
margin-top: 10px;
}
.wp-local-chatbot-agent-form .wp-local-chatbot-form-header {
background: rgba(var(--wp-local-chatbot-primary-color-rgb, 0, 115, 170), 0.1);
border: 1px solid var(--wp-local-chatbot-primary-color, #0073aa);
border-radius: 8px 8px 0 0;
padding: 15px;
margin: 0;
}
.wp-local-chatbot-agent-form .wp-local-chatbot-form-header h4 {
margin: 0 0 5px 0;
color: var(--wp-local-chatbot-primary-color-dark, #006291);
font-size: 16px;
}
.wp-local-chatbot-agent-form .wp-local-chatbot-form-header p {
margin: 0;
color: var(--wp-local-chatbot-primary-color-dark, #006291);
font-size: 14px;
}
.wp-local-chatbot-agent-form .wp-local-chatbot-form-content {
background: white;
border: 1px solid var(--wp-local-chatbot-primary-color, #0073aa);
border-top: none;
border-radius: 0 0 8px 8px;
padding: 15px;
}
/* Human acknowledgment message styling */
.wp-local-chatbot-human-ack .wp-local-chatbot-message-content {
background: var(--wp-local-chatbot-human-ack-bg, #e3f2fd) !important;
border: 1px solid #bbdefb !important;
color: #0d47a1 !important;
font-style: italic;
opacity: 0.9;
}
/* Ihmisen vahvistusviestien puhekuplan häntä */
.wp-local-chatbot-human-ack .wp-local-chatbot-message-content::before {
content: '';
position: absolute;
top: 6px;
left: -8px;
width: 0;
height: 0;
border-right: 8px solid var(--wp-local-chatbot-human-ack-bg, #e3f2fd);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
/* Agent message styling */
.wp-local-chatbot-agent {
position: relative;
}
.wp-local-chatbot-agent .wp-local-chatbot-message-content {
margin-left: 35px; /* Make room for avatar */
position: relative;
/* Colors will be inherited from bot message styling via dynamic CSS */
}
.wp-local-chatbot-agent-message-avatar {
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
background: #f1f8e9;
z-index: 1;
}
/* Default avatar when no image is available */
.wp-local-chatbot-agent-message-avatar.default-avatar {
background: #4caf50;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
font-weight: bold;
}
/* Bot message avatar styling */
.wp-local-chatbot-bot.has-avatar {
position: relative;
}
.wp-local-chatbot-bot.has-avatar .wp-local-chatbot-message-content {
margin-left: 35px; /* Make room for avatar */
position: relative;
}
.wp-local-chatbot-bot-message-avatar {
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
background: #e3f2fd;
z-index: 1;
}
/* Default bot avatar when no image is available but avatar is enabled */
.wp-local-chatbot-bot-message-avatar.default-avatar {
background: #2196f3;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
font-weight: bold;
}
/* Mobile responsiveness for agent messages */
@media (max-width: 480px) {
.wp-local-chatbot-agent .wp-local-chatbot-message-content {
margin-left: 30px;
}
.wp-local-chatbot-agent-message-avatar {
width: 24px;
height: 24px;
}
.wp-local-chatbot-agent-message-avatar.default-avatar {
font-size: 10px;
}
/* Bot avatar mobile styles */
.wp-local-chatbot-bot.has-avatar .wp-local-chatbot-message-content {
margin-left: 30px;
}
.wp-local-chatbot-bot-message-avatar {
width: 24px;
height: 24px;
}
.wp-local-chatbot-bot-message-avatar.default-avatar {
font-size: 10px;
}
}
/* Markdown formatting styles for chat messages */
.wp-local-chatbot-message-content h1,
.wp-local-chatbot-message-content h2,
.wp-local-chatbot-message-content h3 {
line-height: 1.3;
margin-top: 8px;
margin-bottom: 4px;
}
.wp-local-chatbot-message-content h1:first-child,
.wp-local-chatbot-message-content h2:first-child,
.wp-local-chatbot-message-content h3:first-child {
margin-top: 0;
}
.wp-local-chatbot-message-content h1:last-child,
.wp-local-chatbot-message-content h2:last-child,
.wp-local-chatbot-message-content h3:last-child {
margin-bottom: 0;
}
/* Ensure numbered list items have proper spacing */
.wp-local-chatbot-message-content div[style*="margin: 4px 0"] {
line-height: 1.4;
}
/* Keep generated product-list links on the same line as the list marker.
Global inline-block anchors are useful elsewhere, but here they cause the
whole link box to wrap onto the next row after "1.". */
.wp-local-chatbot-message-content div[style*="margin: 4px 0"] a {
display: inline;
padding: 0;
}
/* Mobile adjustments for headers */
@media (max-width: 480px) {
.wp-local-chatbot-message-content h1 {
font-size: 16px !important;
margin: 6px 0 4px 0 !important;
}
.wp-local-chatbot-message-content h2 {
font-size: 15px !important;
margin: 6px 0 3px 0 !important;
}
.wp-local-chatbot-message-content h3 {
font-size: 14px !important;
margin: 6px 0 3px 0 !important;
}
}
/* iOS specific adjustments */
@supports (padding: max(0px)) {
@media (max-width: 480px) {
.wp-local-chatbot-widget {
/* Use max() to ensure minimum distance from bottom */
bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
}
.wp-local-chatbot-widget .wp-local-chatbot-window {
bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}
.wp-local-chatbot-window {
bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}
}
@media (max-width: 375px) {
.wp-local-chatbot-widget {
bottom: max(25px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
}
.wp-local-chatbot-widget .wp-local-chatbot-window {
bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
}
.wp-local-chatbot-window {
bottom: calc(95px + env(safe-area-inset-bottom, 0px));
}
}
}
/* Fallback for older iOS versions */
@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
.wp-local-chatbot-widget {
bottom: 30px !important; /* Extra margin for iOS */
}
.wp-local-chatbot-widget .wp-local-chatbot-window {
bottom: 100px !important;
}
.wp-local-chatbot-window {
bottom: 100px;
}
}
/* Debug styles for mobile (remove in production) */
@media (max-width: 480px) {
.wp-local-chatbot-toggle {
/* Ensure button is always clickable */
z-index: 10000;
/* Add subtle shadow to make it more visible */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
}
/* Prevent background scrolling when mobile chat is open */
body.wp-local-chatbot-mobile-open {
overflow: hidden !important;
/* On some iOS browsers (e.g. with certain themes) focusing input inside a fixed body fails.
We disable position:fixed and rely on overflow:hidden instead. */
width: 100% !important;
height: 100% !important;
}
/* Bot link color */
.wp-local-chatbot-bot .wp-local-chatbot-message-content a:hover {
text-decoration: underline;
}
/* Contact prompt buttons - GLOBAL */
.wp-lc-contact-yes,
.wp-lc-contact-no {
display: inline-block;
padding: 8px 16px;
margin: 8px 6px 0 0;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
line-height: 1.2;
}
.wp-lc-contact-yes {
background: var(--wp-local-chatbot-primary-color, #0073aa);
color: #fff;
}
.wp-lc-contact-yes:hover {
background: var(--wp-local-chatbot-secondary-color, #006291);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}
.wp-lc-contact-no {
background: #f5f5f5;
color: #666;
border: 1px solid #ddd;
}
.wp-lc-contact-no:hover {
background: #e9e9e9;
color: #333;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.wp-lc-contact-yes:active,
.wp-lc-contact-no:active {
transform: translateY(0);
box-shadow: none;
}
/* --- Force chat window full height on all small screens (overrides specific offsets) --- */
/* ===== WP Local Chatbot – Kadence mobile fix ===== */
/* ensure close button stays on top and clickable */
@media (max-width: 600px){
#wp-local-chatbot-close{
z-index: 2147483648 !important;
pointer-events: auto !important;
}
}
@media (max-width: 600px){
/* Pin input bar to bottom of viewport above any sticky footer */
#wp-local-chatbot-widget .wp-local-chatbot-window > .wp-local-chatbot-input-container{
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: env(safe-area-inset-bottom,0px) !important;
z-index: 2147483647 !important;
background: var(--wp-local-chatbot-window-bg,#fff) !important;
border-top: 1px solid #e5e5e5 !important;
padding: 10px 12px calc(env(safe-area-inset-bottom,0px)+10px) 12px !important;
display:flex !important;
gap:10px !important;
}
/* Leave space so messages don’t hide behind the input */
#wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-messages{
padding-bottom:110px !important;
}
/* Make window full viewport height */
#wp-local-chatbot-widget.chat-open .wp-local-chatbot-window{
height:100dvh !important;
display:flex !important;
flex-direction:column !important;
}
}
#wp-local-chatbot-widget .wp-lc-peek-panel .wp-lc-peek-close{
font-size: 18px !important; /* override global font-size:15px !important */
width: 28px !important;
height: 28px !important;
}
/* Powered by footer below input */
#wp-local-chatbot-widget .wp-lc-powered-by{
display: flex;
align-items: center;
justify-content: center; /* centered */
gap: 4px;
margin: 0 auto 2px auto; /* exactly 2px above and below */
width: fit-content; /* shrink to content */
color: #AAA8A6;
font-family: var(--wp-local-chatbot-button-font, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important;
font-size: 12px;
line-height: 16px;
font-weight: 300;
font-style: italic;
opacity: 1;
/* Subtle legibility enhancers */
padding: 2px 6px; /* tiny inner padding */
border-radius: 10px; /* soft pill */
background: var(--wp-lc-powered-bg, rgba(0,0,0,0.10));
-webkit-backdrop-filter: var(--wp-lc-powered-backdrop, saturate(120%) blur(2px));
backdrop-filter: var(--wp-lc-powered-backdrop, saturate(120%) blur(2px));
text-shadow: var(--wp-lc-powered-shadow, 0 1px 1px rgba(0,0,0,0.25));
}
#wp-local-chatbot-widget .wp-lc-powered-by .wp-lc-powered-label{ color:#AAA8A6; display: inline-flex; align-items: center; vertical-align: middle; padding-bottom: 2px; }
#wp-local-chatbot-widget .wp-lc-powered-by .wp-lc-powered-link{ display:inline-flex; align-items:center; text-decoration:none; }
#wp-local-chatbot-widget .wp-lc-powered-by svg{ display:inline-block; width:59px; height:10px; vertical-align: middle; }
#wp-local-chatbot-widget .wp-lc-powered-by.wp-lc-powered-light{ background:none; padding:0; text-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0; }
/* Hide on mobile where input bar is fixed to bottom to avoid overlap */
@media (max-width: 600px){
#wp-local-chatbot-widget .wp-lc-powered-by{ display:none; }
}
@media (max-width: 600px){
/* Strong override for typing input (ID-based to beat themes) */
#wp-local-chatbot-widget #wp-local-chatbot-input{
-webkit-appearance: none !important;
appearance: none !important;
height: var(--wp-local-chatbot-input-height, 35px) !important;
background: var(--wp-local-chatbot-input-bg, #FFFFFF) !important;
border: 1px solid transparent !important;
border-radius: var(--wp-local-chatbot-input-radius, 20px) !important;
box-shadow: var(--wp-local-chatbot-input-shadow, 0 0 8px rgba(0,0,0,0.09)) !important;
padding: 8px 12px !important;
font-size: 16px !important;
line-height: 1.2 !important;
opacity: 1 !important;
}
#wp-local-chatbot-widget #wp-local-chatbot-input:focus{
border-color: transparent !important;
box-shadow: var(--wp-local-chatbot-input-shadow, 0 0 8px rgba(0,0,0,0.09)) !important;
outline: none !important;
}
}
/* Robust overlay: keep close button a circular icon even if themes inject inline backgrounds */
/* Removed pseudo-element overlay for close button; hover visuals handled via JS background swap */
/* Remove speech-bubble tails (bot, user, human-ack, error) */
#wp-local-chatbot-widget .wp-local-chatbot-user .wp-local-chatbot-message-content::after,
#wp-local-chatbot-widget .wp-local-chatbot-bot .wp-local-chatbot-message-content::before,
#wp-local-chatbot-widget .wp-local-chatbot-human-ack .wp-local-chatbot-message-content::before,
#wp-local-chatbot-widget .wp-local-chatbot-error .wp-local-chatbot-message-content::before{
content: none !important;
border: 0 !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video{ position:relative; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video-controls{
position:absolute; right:8px; bottom:8px; display:flex; gap:6px; z-index:2;
opacity:1; transition:opacity .25s ease;
}
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video-controls.hidden{ opacity:0; pointer-events:none; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video:hover .wp-lc-teaser-video-controls{ opacity:1; pointer-events:auto; }
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video-controls .wp-lc-btn{
background: rgba(0,0,0,0.55); color:#fff; border:none; border-radius:6px; padding:6px 8px; cursor:pointer;
}
#wp-local-chatbot-widget .wp-local-chatbot-teaser.v2 .wp-lc-teaser-video-controls .wp-lc-btn:hover{ background: rgba(0,0,0,0.75); }
/* Align icebreaker width with chat bubbles on mobile */
@media (max-width: 600px){
#wp-local-chatbot-widget .wp-lc-icebreaker{ max-width: 85% !important; }
}
/* Force the very first bubble (welcome) to the right, regardless of mobile overrides */
#wp-local-chatbot-widget .wp-local-chatbot-messages > .wp-local-chatbot-message:first-child{ width:100% !important; align-items:flex-end !important; }
#wp-local-chatbot-widget .wp-local-chatbot-messages > .wp-local-chatbot-message:first-child .wp-local-chatbot-message-content{ margin-left:auto !important; margin-right:0 !important; align-self:flex-end !important; }
#wp-local-chatbot-widget .wp-local-chatbot-messages > .wp-local-chatbot-message:first-child.wp-local-chatbot-bot.has-avatar .wp-local-chatbot-message-content{ margin-left:auto !important; }
/* Explicit class hook from JS for reliability */
#wp-local-chatbot-widget .wp-lc-welcome{ width:100% !important; align-items:flex-end !important; }
#wp-local-chatbot-widget .wp-lc-welcome .wp-local-chatbot-message-content{ margin-left:auto !important; margin-right:0 !important; align-self:flex-end !important; }
/* iOS overflow fix: estä Safari-zoomaus fokuksessa (=16px) */
@media (max-width: 600px){
#wp-local-chatbot-widget #wp-local-chatbot-input,
#wp-local-chatbot-widget #wp-local-chatbot-input:focus,
#wp-local-chatbot-widget #wp-local-chatbot-input:active{
font-size: 16px !important;
}
}
/* --- Mobile breathing room + slightly larger controls (only =600px) --- */
@media (max-width: 600px){
/* Add vertical breathing room in the input bar (respect safe-area) */
#wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-input-container,
#wp-local-chatbot-widget .wp-local-chatbot-window > .wp-local-chatbot-input-container{
padding-top: 19px !important;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 19px) !important;
}
/* Slightly taller input via custom property + inner padding */
#wp-local-chatbot-widget{
--wp-local-chatbot-input-height: 44px;
}
#wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-input{
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* Larger send button on mobile */
#wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-send{
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
padding: 14px !important;
}
}
/* Unified hover feedback (match teaser WhatsApp button) */
#wp-local-chatbot-widget .wp-local-chatbot-header-actions > a#wp-local-chatbot-whatsapp,
#wp-local-chatbot-widget .wp-local-chatbot-header .wp-lc-contact-cta.header.icon,
#wp-local-chatbot-widget .wp-local-chatbot-header .wp-lc-booking-cta.header.icon,
#wp-local-chatbot-widget .wp-lc-icebreaker,
#wp-local-chatbot-widget .wp-local-chatbot-teaser .wp-lc-teaser-icebreakers .wp-lc-icebreaker{
transition: transform .15s ease, filter .15s ease;
}
#wp-local-chatbot-widget .wp-local-chatbot-header-actions > a#wp-local-chatbot-whatsapp:hover,
#wp-local-chatbot-widget .wp-local-chatbot-header .wp-lc-contact-cta.header.icon:hover,
#wp-local-chatbot-widget .wp-local-chatbot-header .wp-lc-booking-cta.header.icon:hover,
#wp-local-chatbot-widget .wp-lc-icebreaker:hover,
#wp-local-chatbot-widget .wp-local-chatbot-teaser .wp-lc-teaser-icebreakers .wp-lc-icebreaker:hover{
filter: brightness(0.95);
}
/* --- Keep input text color deterministic across themes/embed hosts --- */
#wp-local-chatbot-widget #wp-local-chatbot-input{
font-family: var(--wp-local-chatbot-icebreaker-font, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 19px !important;
color: var(--wp-local-chatbot-input-text-color, var(--wp-local-chatbot-bot-text-color, inherit)) !important;
-webkit-text-fill-color: var(--wp-local-chatbot-input-text-color, var(--wp-local-chatbot-bot-text-color, inherit)) !important;
caret-color: var(--wp-local-chatbot-input-text-color, var(--wp-local-chatbot-bot-text-color, inherit)) !important;
}
#wp-local-chatbot-widget #wp-local-chatbot-input::placeholder,
#wp-local-chatbot-widget #wp-local-chatbot-input::-webkit-input-placeholder,
#wp-local-chatbot-widget #wp-local-chatbot-input::-moz-placeholder,
#wp-local-chatbot-widget #wp-local-chatbot-input:-ms-input-placeholder,
#wp-local-chatbot-widget #wp-local-chatbot-input::-ms-input-placeholder {
font-family: var(--wp-local-chatbot-icebreaker-font, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 19px !important;
color: var(--wp-local-chatbot-input-placeholder-color, var(--wp-local-chatbot-input-text-color, var(--wp-local-chatbot-bot-text-color, inherit))) !important;
opacity: 0.75 !important;
}
@media (max-width: 600px){
#wp-local-chatbot-widget #wp-local-chatbot-input,
#wp-local-chatbot-widget #wp-local-chatbot-input:focus,
#wp-local-chatbot-widget #wp-local-chatbot-input:active,
#wp-local-chatbot-widget #wp-local-chatbot-input::placeholder,
#wp-local-chatbot-widget #wp-local-chatbot-input::-webkit-input-placeholder,
#wp-local-chatbot-widget #wp-local-chatbot-input::-moz-placeholder,
#wp-local-chatbot-widget #wp-local-chatbot-input:-ms-input-placeholder,
#wp-local-chatbot-widget #wp-local-chatbot-input::-ms-input-placeholder {
font-size: 16px !important;
}
#wp-local-chatbot-widget .wp-lc-icebreaker{
font-size: 16px !important;
line-height: 19px !important;
}
}
/* Desktop input font alignment */
@media (min-width: 601px){
#wp-local-chatbot-widget #wp-local-chatbot-input{
font-size: 14px !important;
line-height: 19px !important;
}
#wp-local-chatbot-widget #wp-local-chatbot-input::placeholder{
font-size: 14px !important;
line-height: 19px !important;
}
}
/* FIX: remove Hello theme pink flash on Skip/Cancel buttons */
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel {
-webkit-appearance: none !important;
appearance: none !important;
-webkit-tap-highlight-color: transparent;
outline: none !important;
box-shadow: none !important;
border: 1px solid rgba(0,0,0,0.12) !important;
transition: background-color 0.2s ease, color 0.2s ease !important;
position: relative;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip::before,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip::after,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel::before,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel::after {
content: none !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip:focus,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip:focus-visible,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip:active,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel:focus,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel:focus-visible,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel:active {
outline: 2px solid rgba(0,0,0,0.25) !important;
outline-offset: 2px !important;
box-shadow: none !important;
border-color: rgba(0,0,0,0.16) !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip::-moz-focus-inner,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel::-moz-focus-inner {
border: 0 !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-skip:-moz-focusring,
#wp-local-chatbot-widget .wp-local-chatbot-message-content .wp-lc-seq-cancel:-moz-focusring {
outline: 2px solid rgba(0,0,0,0.25) !important;
}
/* Embed/host hardening: keep mobile input row inside viewport on focus */
#wp-local-chatbot-widget .wp-local-chatbot-input-container,
#wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-input-container,
#wp-local-chatbot-widget .wp-local-chatbot-window > .wp-local-chatbot-input-container {
box-sizing: border-box !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-input,
#wp-local-chatbot-widget #wp-local-chatbot-input {
box-sizing: border-box !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
flex: 1 1 0% !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-send,
#wp-local-chatbot-widget #wp-local-chatbot-send {
flex: 0 0 auto !important;
margin-left: 0 !important;
}
@media (max-width: 600px) {
#wp-local-chatbot-widget.chat-open .wp-local-chatbot-window {
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
#wp-local-chatbot-widget.chat-open .wp-local-chatbot-window .wp-local-chatbot-input-container,
#wp-local-chatbot-widget.chat-open .wp-local-chatbot-window > .wp-local-chatbot-input-container {
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* Embed-only iOS keyboard/focus hardening */
@media (max-width: 600px) {
#wp-local-chatbot-widget.wp-local-chatbot-embed-runtime.chat-open .wp-local-chatbot-window {
position: fixed !important;
inset: 0 !important;
width: var(--wp-lc-embed-vw, auto) !important;
max-width: none !important;
overflow-x: hidden !important;
height: 100dvh !important;
}
#wp-local-chatbot-widget.wp-local-chatbot-embed-runtime.chat-open .wp-local-chatbot-window > .wp-local-chatbot-input-container {
position: fixed !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: none !important;
box-sizing: border-box !important;
overflow: hidden !important;
padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px) 12px !important;
}
#wp-local-chatbot-widget.wp-local-chatbot-embed-runtime #wp-local-chatbot-input,
#wp-local-chatbot-widget.wp-local-chatbot-embed-runtime #wp-local-chatbot-input:focus,
#wp-local-chatbot-widget.wp-local-chatbot-embed-runtime #wp-local-chatbot-input:active {
flex: 1 1 auto !important;
width: 0 !important;
min-width: 0 !important;
max-width: 100% !important;
font-size: 16px !important;
line-height: 1.2 !important;
-webkit-text-size-adjust: 100% !important;
}
#wp-local-chatbot-widget.wp-local-chatbot-embed-runtime #wp-local-chatbot-send {
flex: 0 0 52px !important;
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
}
}
/* Keep scrolling deterministic: only message pane may scroll */
#wp-local-chatbot-widget .wp-local-chatbot-window,
#wp-local-chatbot-widget .wp-lc-main {
overflow: hidden !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-messages {
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-gutter: stable !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-input-container {
overflow-y: hidden !important;
scrollbar-width: none !important;
}
#wp-local-chatbot-widget .wp-local-chatbot-input-container::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
/* Keep input area height stable even when message history grows */
#wp-local-chatbot-widget .wp-local-chatbot-window > .wp-local-chatbot-input-container,
#wp-local-chatbot-widget .wp-local-chatbot-window .wp-local-chatbot-input-container {
flex: 0 0 auto !important;
flex-shrink: 0 !important;
min-height: calc(var(--wp-local-chatbot-input-height, 35px) + 14px) !important;
align-items: center !important;
}
#wp-local-chatbot-widget .wp-lc-powered-by {
flex: 0 0 auto !important;
flex-shrink: 0 !important;
}